uniapp连续七日签到功能

<template>
	<view>
		<view class="content">
			<!-- 签到区 -->
			<view class="sign_conent_box">
				<view class="sign_conent">
					<view class="sign_conent_title">
						你已连续签到
						<span class="sign_conent_title_span">{{day}}</span>
						天
					</view>
					<view class="ft12 mt10" style="color: #999;">签到领看币，新剧抢先看。连续签到7天领惊喜礼包</view>
					<view class="sign_list_aligns">
						<!-- <scroll-view class="scroll-view_H" scroll-x="true"> -->
						<view class="">
							<view class="flex.space">
								<view class="scroll_view_itemsv " v-for="i in goldList">
									<image src="@/static/playlet/red_bag.png" class="scroll_view_item_img"
										mode="widthFix"> </image>
									<view class="scroll_view_item_top" v-if="i.unit">+{{i.unit}}
									</view>
									<view class="mt10 week">{{i.week}}天
									</view>						
								</view>
							</view>
							<view class="flex.space mt10">
							</view>
						</view>

						<!-- </scroll-view> -->
					</view>
					<view class="sign_conent_btn mt10" @click="signAdd()">{{isSigned?'已签到':'今日签到'}}</view>
				</view>
			</view>
		</view>
		<view class="flex.center">
			<view class="new_task">
				<view class="task_title">新手任务</view>
				<view class="dashed-line"></view>
				<!-- 解锁只能推荐 -->
				<view class="task_end" v-for="item in task">
					<view class="">
						<view class="flex">
							<text class="ft14 ftw600">{{item.title}}</text>
							<view class="mb15">
								<image :src="item.image" mode="widthFix" class="gold_img" />
								<text class="ft12 ftw600  cl-orange">+</text>
								<text class="ft14 cl-orange ftw600">{{item.goldbean}}金豆</text>
							</view>
						</view>
						<view class="ft12 cl-grey">{{item.syn}}</view>
					</view>

					<view class="flex.center endBtn">
						去完成
					</view>
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sign_list: {},
			qdjl: 0,
			tdsy: 0,
			day: ''
		},
		data() {
			return {
				isSigned: false, // 是否已签到
				day: '', //签到天数
				goldList: [], //获取签到奖励列表
				task: [{
						title: '解锁智能推荐',
						image: require('../../static/icon/gold.png'),
						goldbean: 50,
						syn: '获取您的用户信息，解锁智能推荐'
					},
					{
						title: '新人签到',
						image: require('../../static/icon/gold.png'),
						goldbean: 30,
						syn: '每日签到领金豆'
					}
				]
			};

		},
		created() {
			this.signDay();
			this.signinList();
		},

		methods: {
			async signAdd() {
				if (uni.getStorageSync('token')) {
				
					let obj={};
					if(this.day<7){
					obj.week=Number(this.day)+1;
					this.goldList.forEach(el=>{
						if(el.week == obj.week){
							obj.unit=el.unit
						}
					})
					}
					console.log(obj,"obk");
					
					
					const res = await this.$post('signAdd', obj, false, 'application/json');
					console.log(res,'111');
					if (res.data.code == 200) {
						this.isSigned = true;
						this.$successToast('签到成功');
					} else {
						this.$errorToast('签到失败，请稍后重试');
					}
				}
			},
			// 签到天数
			async signDay() {
				const res = await this.$get('signDay');
				this.day = res.data.data.week;
			},
			// 获取签到奖励列表
			async signinList() {
				const res = await this.$get('signinList');
				this.goldList = res.data.rows;
			}
		}
	};
</script>

<style lang="scss">
	.week {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.new_task {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
		width: 95%;
		margin-top: 30upx;
		padding: 30rpx;

		.task_title {
			font-size: 40rpx;
			font-weight: bold;
			padding: 20rpx 0 30rpx 10rpx;
			color: #fcae3a;
		}

		.task_end {
			padding-top: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.gold_img {
				width: 23rpx;
				height: 23rpx;
				margin: 0 5rpx 0 20rpx;

			}

			.endBtn {
				width: 155rpx;
				height: 72rpx;
				border-radius: 50rpx;
				background: #f15d25;
				display: flex;
				align-items: center;
				color: #ffffff;


			}
		}

	}

	.dashed-line {
		border: 3rpx dashed #fcae3a;
		width: 100%;
		/* 设置虚线的宽度 */
		height: 0;
	}

	.content {
		display: flex;
		justify-content: center;
	}

	.sign_conent_box {
		border-radius: 10rpx;
		width: 95%;
		display: flex;
		justify-content: center;
		margin-top: 30upx;
		padding: 30rpx;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

		.sign_conent {
			width: 686upx;
			// background: white;
			// border-radius: 20upx;
			padding: 0upx 0upx;
			box-sizing: border-box;

			.sign_conent_title {
				width: 100%;
				font-size: 36upx;
				font-weight: bold;
				color: #333333;

				.sign_conent_title_span {
					color: #ff6526 !important;
				}
			}

			.scroll_view_item_img {
				width: 60rpx;
				// position: relative;
				margin-top: 10rpx;
			}

			.scroll_view_item_top {
				margin-top: -34rpx;
				text-align: center;
				font-size: 21rpx;
				color: #e6b356;
			}

	
			.sign_conent_btn {
				width: 100%;
				border-radius: 45upx;
				background: linear-gradient(270deg, #fcae3a 0%, #f15d25 100%);
				color: #ffffff;
				text-align: center;
				padding: 22upx 0;
				font-size: 32upx;
			}
		}
	}
</style>