talk_appAmin/pages/signln/signid.vue

<!-- 签到任务 -->
<template>
	<navbar_neadVue title="签到任务" background_color="#CAF6F5"></navbar_neadVue>
	<view class="content-top">
		<view class="top">
			<view class="top-right-text">
				<text @click="GoTo()">签到明细</text>
			</view>

			<view>
				<view class="top-left-text">
					<text>{{campus_coin}}</text>
					<text>校园币</text>
				</view>

				<view class="top-left">
					<text>我的校园币</text>
				</view>
			</view>

			<view class="right-image">
				<image src="../../static/images/sign/jin.png"></image>
			</view>

			<view class="content-bottom">
				<view class="c-bottom">
					<text>
						已连续签到<text class="text-1">{{number_days_sign}}</text>天
					</text>
				</view>
			</view>

			<view class="content-bottom-bot">
				<view class="bot-text">
					<text>记得去商城兑换礼物奥！</text>
				</view>

				<!-- 签到日期 -->
				<view>
					<view class="data">
						<view class="data-view" v-for="(item,index) in weekDates" :key="index">
							<image v-if="item.isDate == true" class="data-image"
								src="../../static/images/sign/one_l.png">
							</image>
							<image v-else class="data-image" src="../../static/images/sign/one.png"></image>
							<text class="data-text">{{item.data}}日</text>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>

	<!-- 签到任务 -->
	<view class="task">
		<view style="height: 60rpx;">
			<text class="tasktext">签到任务</text>
		</view>

		<view class="task-content" v-for="(item,index) in arr" :key="index">
			<!-- 签到按钮 -->
			<view class="task-right" @click="goTaskRight(item.type,item.id)">
				<text>{{item.type}}</text>
			</view>
			<view>
				<text class="c-text">{{item.title}}</text>
				<image style="width: 21rpx;height: 21rpx;margin-left: 36rpx;vertical-align: middle;"
					src="../../static/images/sign/one.png">
				</image>
				<text class="count-text">+{{item.rewards}}</text>
			</view>
			<view class="task-left">
				<text class="left-text">{{item.content}}</text>
				<text v-show="item.conditons != null" class="left-text"
					style="margin-left: 20rpx;">{{leftParenthesis}}</text>
				<text v-show="item.conditons != null" class="left-0text">{{acquiesce}}</text>
				<text v-show="item.conditons != null"
					class="left-text">{{slash}}{{item.conditons}}{{rightParenthesis}}</text>
			</view>
		</view>

		<view style="height: 24rpx;"></view>
	</view>

	<view class="bottom">
		<view class="bottom-left"></view>
		<view class="bottom-text">
			<text class="bottom-text-s">兑换商城</text>
			<view class="bottom-text-r" @click="GoExchange()">
				<text style=" vertical-align: middle;">更多</text>
				<image style="width: 14rpx; height: 23rpx;margin-left: 9rpx; vertical-align: middle;"
					src="../../static/images/sign/rig.png">
				</image>
			</view>
		</view>
	</view>


	<view>
		<ex></ex>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from "vue";
	import navbar_neadVue from "@/pages/common/navbar/navbar_nead.vue";
	import ex from "@/pages/common/exchange/index.vue";
	import {
		listTask,
		getTask,
		delTask,
		addTask,
		updateTask
	} from "@/api/signln/checktask/task";

	import {
		listSignTa,
		getSignTa,
		delSignTa,
		addSignTa,
		updateSignTa,
		newtableone,
		listSignTaUser
	} from "@/api/signln/SignTa/SignTa";


	const {
		proxy
	} = getCurrentInstance();


	//首次进入页面的用户创建一条数据
	function FirstEntry() {
		newtableone('sign_table').then(response => {})
	}


	// 签到的数据
	let arr = ref([])
	const leftParenthesis = ref("(")
	const rightParenthesis = ref(")")
	const slash = ref("/");
	const acquiesce = ref("0");
	/** 查询签到任务列表 */
	function getList() {
		listTask().then(response => {
			arr.value = response.rows;
		});
	}
	getList();

	//签到表自己的数据
	const form = reactive([]);


	// 校园币
	let campus_coin = ref(0);
	// 连续签到天数
	let number_days_sign = ref(0);
	//上次签到的时间
	let lastTimeSign = ref();
	//具体日期
	const past = 19;

	/** 查询签到详情列表 */
	function getListsign() {
		listSignTaUser().then(response => {
			if (response.rows.length > 0) {
				form.value = response.rows[0];
				campus_coin.value = response.rows[0].campusCoin;
				number_days_sign.value = response.rows[0].numberDaysSign;
				lastTimeSign.value = response.rows[0].lastTimeSign;
			} else {
				FirstEntry();
			}
		});
	}
	getListsign();

	//签到点击事件
	function goTaskRight(type, id) {
		switch (type) {
			case "立即签到":
				SignSuccess(id);
				break;
			case "立即邀请":
				uni.navigateBack({
					url: '/pages/index'
				});
				// proxy.$tab.navigateTo('/pages/index')
				break;
			default:
				uni.navigateBack({
					url: '/pages/index'
				});
				// proxy.$tab.navigateTo('/pages/index')
				break;
		}

		cot.value++;
		Ipp(cot.value);
		// console.log(weekDates)
		// console.log(cot.value)

	}





	// 签到成功
	function SignSuccess(id) {
		//判断是否给币的条件
		ToDaySign();
		form.value.numberDaysSign++;
		form.value.lastTimeSign = parseTime(new Date(), '{y}-{m}-{d}')
		form.value.campusCoin = arr.value.find(item => item.id == id).rewards;
		form.value.taskid = id;

		console.log(form.value)
		// 修改签到表
		updateSignTa(form.value).then(response => {
			getListsign();
		});

		// 添加签到明细
		// addSign(form.value).then(response => {

		// });


		// uni.showToast({
		// 	title: '操作成功',
		// 	//将值设置为 success 或者直接不用写icon这个参数
		// 	icon: 'success',
		// 	//显示持续时间为 2秒
		// 	duration: 2000
		// })
	}

	// 今天是否签到了
	function ToDaySign() {
		var today = new Date().getDate();
		var lasttimesign = new Date(form.value.lastTimeSign).getDate();
		if (today != lasttimesign) {
			return;
		} else {

		}
	}






	// 获取上次签到时间 然后返回后面7天的时间 然后上次签到断了则开始新的日期
	var date = new Date();
	console.log("日" + date.getDate() + "年" + date.getFullYear() + "月" + (date.getMonth() + 1))

	const datetimes = reactive([{
		data: date.getDate(),
	}])

	const sdate = new Date();
	const dayof = date.getDay();
	const weekDates = reactive([]);
	sdate.setDate(date.getDate() - dayof + (dayof === 0 ? -6 : 1));
	console.log(dayof)
	for (let i = 0; i < 7; i++) {
		const date = new Date(sdate);
		date.setDate(sdate.getDate() + i);
		const list = {
			data: date.getDate(),
			isDate: false
		}
		weekDates.push(list);
	}


	//连续签到天数
	const cot = ref(2);



	async function Ipp(ite) {
		const indexs = weekDates.indexOf(weekDates.find(item => item.data == past));
		for (let j = 0; j < ite; j++) {
			weekDates.find(item => item.data == past + j).isDate = true;
		}
	}

	Ipp(cot.value);
	// console.log(indexs)
	// console.log(weekDates)

	//签到时间
	const datetime = reactive([])

	//
	function GoTo() {
		uni.navigateTo({
			url: './signiddetails'
		});
	}

	//
	function GoExchange() {
		uni.navigateTo({
			url: './exchangemall',
		});
	}


	//时间
	function parseTime(time, pattern) {
		if (arguments.length === 0 || !time) {
			return null
		}
		const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
		let date
		if (typeof time === 'object') {
			date = time
		} else {
			if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
				time = parseInt(time)
			} else if (typeof time === 'string') {
				time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
			}
			if ((typeof time === 'number') && (time.toString().length === 10)) {
				time = time * 1000
			}
			date = new Date(time)
		}
		const formatObj = {
			y: date.getFullYear(),
			m: date.getMonth() + 1,
			d: date.getDate(),
			h: date.getHours(),
			i: date.getMinutes(),
			s: date.getSeconds(),
			a: date.getDay()
		}
		const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
			let value = formatObj[key]
			// Note: getDay() returns 0 on Sunday
			if (key === 'a') {
				return ['日', '一', '二', '三', '四', '五', '六'][value]
			}
			if (result.length > 0 && value < 10) {
				value = '0' + value
			}
			return value || 0
		})
		return time_str
	}
</script>




<style scoped>
	@import '@/pages/common/navbar/navbar.css';

	.content-top {
		/* height: 424rpx; */
		height: 502rpx;
		background: linear-gradient(-180deg, #c9f6f5, #ffffff);
	}

	.top {
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.top-right-text>text {
		font-weight: Regular;
		/* width: 95rpx; */
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #000000;
		float: right;
		margin-top: 24rpx;
	}

	.top-left-text {
		padding-top: 99rpx;
		padding-left: 1rpx;
	}

	.top-left-text>text:first-child {
		color: #000000;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 48rpx;
		text-align: left;
		line-height: 46.29rpx;
	}

	.top-left-text>text:last-child {
		color: #000000;
		font-weight: Regular;
		font-weight: 600;
		font-face: Microsoft YaHei;
		font-size: 28rpx;
		text-align: left;
		line-height: 46.29rpx;
	}

	.top-left>text {
		display: block;
		font-weight: Regular;
		/* width: 119rpx; */
		font-size: 24rpx;
		text-align: left;
		color: #6F6F6F;
		padding-left: 1rpx;
		line-height: 24rpx;
	}

	.right-image>image {
		width: 248rpx;
		height: 289rpx;
		position: absolute;
		top: 279rpx;
		right: 32rpx;
		z-index: 7;
	}

	.content-bottom {
		width: 319rpx;
		height: 60rpx;
		border-radius: 20rpx 20rpx 0 0;
		background: #ffffff;
		margin-top: 48rpx;
	}

	.c-bottom {
		padding-left: 26rpx;
		padding-top: 8rpx;
	}

	.c-bottom>text:first-child {
		color: #000000;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 28rpx;
		text-align: left;
		line-height: 46.29rpx;
	}

	.text-1 {
		color: #fa3939;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 28rpx;
		text-align: left;
		line-height: 46.29rpx;
	}

	.content-bottom-bot {
		position: relative;
		/* 		width: 686rpx; */
		height: 214rpx;
		border-radius: 0 32rpx 32rpx 32rpx;
		background: #ffffff;
		z-index: 9;
	}

	.bot-text {
		padding-left: 24rpx;
		display: block;
		/* padding-top: 12rpx; */
	}

	.bot-text>text {
		font-weight: Regular;
		width: 248rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #6F6F6F;
	}

	.task {
		width: 686rpx;
		/* height: 484rpx; */
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		background: #ffffff;
		/* background: #fa3939; */
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 24rpx;
	}

	.tasktext {
		display: block;
		font-weight: Regular;
		width: 144rpx;
		height: 36rpx;
		font-size: 36rpx;
		text-align: left;
		color: #000000;
		padding-top: 24rpx;
		margin-left: 24rpx;
	}

	.task-content {
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.task-right {
		margin-top: 16rpx;
		width: 120rpx;
		height: 48rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f99b46;
		float: right;
		margin-right: 24rpx;
	}

	.c-text {
		font-weight: Regular;
		width: 95rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #000000;
		vertical-align: middle;
	}

	.count-text {
		font-weight: Regular;
		width: 20rpx;
		height: 16rpx;
		font-size: 20rpx;
		text-align: left;
		color: #F99B46;
		padding-left: 3rpx;
		line-height: 16rpx;
		vertical-align: middle;
	}

	.task-right>text {
		font-weight: Regular;
		/* width: 95rpx; */
		height: 25rpx;
		font-size: 24rpx;
		text-align: left;
		color: #FFFFFF;
		display: block;
		margin: auto;
		text-align: center;
		line-height: 48rpx;
	}

	.task-left {
		/* display: block; */
		height: 20rpx;
	}

	.left-text {
		display: inline;
		color: #999999;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 20rpx;
		text-align: left;
		/* margin-top: 12rpx; */
	}

	.left-0text {
		color: #fb5c5c;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 20rpx;
		text-align: left;
	}

	.bottom {
		margin-right: 32rpx;
		margin-left: 32rpx;
		margin-top: 24rpx;
	}

	.bottom-left {
		width: 4rpx;
		height: 30rpx;
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		background: #f99b46;
		float: left;
		margin-top: 8rpx;
	}

	.bottom-text-s {
		font-weight: Regular;
		/* width: 123rpx; */
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		margin-left: 24rpx;
		vertical-align: baseline;
	}

	.bottom-text-r {
		float: right;
		font-weight: Regular;
		/* width: 47rpx; */
		height: 24rpx;
		line-height: 48rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
		vertical-align: middle;
		margin-right: 32rpx;
	}

	.bottom-text-r>text {}


	.data {
		display: flex;
		margin-left: 24rpx;
		padding-left: 2rpx;
		margin-top: 48rpx;
		border-radius: 0 32rpx 32rpx 32rpx;
	}

	.data-view {
		margin-right: 45rpx;
	}

	.data-image {
		display: flex;
	}

	.data-image {
		width: 42rpx;
		height: 44rpx;
	}

	.data-text {
		display: block;
		font-weight: Regular;
		width: 60rpx;
		height: 22rpx;
		font-size: 24rpx;
		text-align: center;
		vertical-align: middle;
		color: #7E7E7E;
		margin-left: -8rpx;
		margin-top: 12rpx;
	}
</style>