完善签到

pages/signin/signin.vue

@@ -4,10 +4,10 @@
 			<view class="bold-700 title">每日签到</view>
 			<view class="day">
 				<text class="lg">已经连续签到</text>
-				<text class="">1天</text>
+				<text class="">{{ signDays }}天</text>
 			</view>
 			<view class="row-between u-m-t-32 u-m-l-24 u-m-r-24">
-				<view class="sigin-day expire column-center">
+				<!-- <view class="sigin-day expire column-center">
 					<view class="date mt10">第一天</view>
 					<view class="mt10">
 						<u-image :src="cloudPath + 'img/icon_signin_gray.png'" width="30" height="30"></u-image>
@@ -61,10 +61,18 @@
 						<u-image :src="cloudPath + 'img/icon_signin_white.png'" width="30" height="30"></u-image>
 					</view>
 					<view class="points mt10">x140</view>
+				</view> -->
+				<view :class="getDayActive(item)" v-for="(item, index) in signList" :key="index">
+					<view class="date mt10">第{{ item.days }}天</view>
+					<view class="mt10">
+						<!-- <u-image :src="cloudPath + 'img/icon_signin_gray.png'" width="30" height="30"></u-image> -->
+						<u-image :src="signinCurrent(item)" width="30" height="30"></u-image>
+					</view>
+					<view class="points mt10">x{{ item.integral }}</view>
 				</view>
 			</view>
-			<view class="u-m-t-26 signin-btn">
-				签到
+			<view class="u-m-t-26 signin-btn" @tap="userSignFun">
+				{{ canSign == 1 ? '已签到' : '签到' }}
 			</view>
 		</view>
 		
@@ -88,8 +96,117 @@
 </template>
 
 <script>
+	import { getSignList, userSign } from "@/api/user"
+	import { trottle } from '@/utils/tools.js'
 	export default {
-		
+		data() {
+			return {
+				// 积分
+				integral: 0,
+				avatar: "",
+				signList: [],
+				showPop: false,
+				canSign: 0,
+				addIntegral: 0,
+				addGrowth: 0,
+				signDays: 0,
+				makeInegral: [],
+				weekDay: 1
+			}
+		},
+
+		onLoad() {
+			this.userSignFun = trottle(this.userSignFun, 1000, this)
+		},
+
+		onShow() {
+			this.getSignListFun();
+		},
+
+		methods: {
+			// 获取签到数据
+			getSignListFun() {
+				getSignList().then(res => {
+					if (res.code == 1) {
+						let {
+							sign_list
+						} = res.data;
+						console.log("sign_list>>>", sign_list);
+						
+						this.signList = sign_list
+						this.integral = res.data.user.user_integral
+						this.canSign = res.data.user.today_sign
+						this.signDays = res.data.user.days
+						this.weekDay = res.data.user.week_day
+						this.makeInegral = res.data.make_inegral
+					}
+				});
+			},
+
+
+			// 用户开始签到
+			userSignFun() {
+				if (this.canSign == 1) {
+					return;
+				}
+
+				userSign().then(res => {
+					if (res.code == 1) {
+						let {
+							days,
+							growth,
+							integral
+						} = res.data;
+
+						this.addIntegral = integral;
+						this.signDays = days
+
+						this.getSignListFun();
+					}
+				});
+			}
+		},
+
+		computed: {
+			// 处理签到图片显示
+			signinCurrent() {
+				return (item) => {
+					// 如果签到天数为0的话,也指向第一天的高亮图片
+					const day = this.signDays || 1
+					if (day == item.days && this.canSign == 0) {
+						// 当天日期
+						return `${this.cloudPath}img/icon_signin_white.png`
+					} else if (item.status == 0) {
+						// 未签到
+						return `${this.cloudPath}img/icon_signin_gray.png`
+					} else if (item.status == 1) {
+						// 已签到
+						return `${this.cloudPath}img/icon_signin_blue.png`
+					}
+				}
+			},
+
+			// 处理签到class显示
+			getDayActive() {
+				return (item) => {
+					let obj = {'sigin-day': true, 'column-center': true}
+					
+					// 如果签到天数为0的话,也指向第一天的高亮样式
+					const day = this.signDays || 1
+
+					if (day == item.days && this.canSign == 0) {
+						// 当天日期
+						return Object.assign(obj, {'last': true})
+					} else if (item.status == 0) {
+						// 未签到
+						return Object.assign(obj, {'expire': true})
+					} else if (item.status == 1) {
+						// 已签到
+						return Object.assign(obj, {'normal': true})
+					}
+				}
+			}
+		}
 	}
 </script>