网络请求

common/http.interceptor.js

@@ -2,18 +2,18 @@
 // 同时，我们也可以在此使用getApp().globalData，如果你把token放在getApp().globalData的话，也是可以使用的
 const install = (Vue, vm) => {
 	Vue.prototype.$u.http.setConfig({
-		baseUrl: 'https://api.youzixy.com',
+		baseUrl: 'https://api.sign.dankal.cn/v1',
 		// 如果将此值设置为true，拦截回调中将会返回服务端返回的所有数据response，而不是response.data
 		// 设置为true后，就需要在this.$u.http.interceptor.response进行多一次的判断，请打印查看具体值
 		// originalData: true, 
 		// 设置自定义头部content-type
-		// header: {
-		// 	'content-type': 'xxx'
-		// }
+		header: {
+			'content-type': 'application/json'
+		}
 	});
 	// 请求拦截，配置Token等参数
 	Vue.prototype.$u.http.interceptor.request = (config) => {
-		config.header.Token = 'xxxxxx';
+		 config.header.language = 'cn';
 		
 		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式，见：https://uviewui.com/components/globalVariable.html
 		// config.header.token = vm.token;
@@ -34,10 +34,11 @@ const install = (Vue, vm) => {
 	Vue.prototype.$u.http.interceptor.response = (res) => {
 		// 如果把originalData设置为了true，这里得到将会是服务器返回的所有的原始数据
 		// 判断可能变成了res.statueCode，或者res.data.code之类的，请打印查看结果
-		if(res.code == 200) {
-			// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
-			return res.data;  
-		} else return false;
+		return res
+		// if(res.code == 200) {
+		// 	// 如果把originalData设置为了true，这里return回什么，this.$u.post的then回调中就会得到什么
+		// 	return res.data;  
+		// } else return false;
 	}
 }
 

components/countdown-timer/countdown-timer.vue

+<template>
+	<view><slot :time="time" :remain="timeData.remain" :day="timeData.day" :hour="timeData.hour" :minute="timeData.minute" :second="timeData.second" /></view>
+</template>
+
+<script>
+export default {
+	props: {
+		// 倒计时时长（单位：毫秒）
+		time: {
+			type: Number,
+			default: 0
+		},
+		
+		// 是否自动
+		'autoStart': {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			timer: null,
+			timeData: {
+				remain: 0,
+				day: 0,
+				hour: 0,
+				minute: 0,
+				second: 0
+			}
+		};
+	},
+	watch: {
+		time() {
+			this.reset()
+		}
+	},
+	methods: {
+		
+		// 设置timeData
+		updateTimeData() {
+			let t = this.timeData.remain;
+			this.timeData.day = Math.floor(t / 1000 / 60 / 60 / 24);
+			this.timeData.hour = Math.floor((t / 1000 / 60 / 60) % 24);
+			this.timeData.minute = Math.floor((t / 1000 / 60) % 60);
+			this.timeData.second = Math.floor((t / 1000) % 60);
+		},
+		
+		// 开启倒计时
+		startTimer() {
+			if (this.timer) {
+				clearInterval(this.timer);
+			}
+			if(this.timeData.remain < 1000) {
+				 return
+			}
+			this.timer = setInterval(() => {
+				this.timeData.remain -= 1000;
+				this.updateTimeData()
+				if (this.timeData.remain < 1000) {
+					this.pause()
+					this.$emit('finish');
+				}
+			}, 1000);
+		},
+		
+		// 重置倒计时
+		reset() {
+			this.timeData.remain = this.time;
+			this.updateTimeData();
+			if(this.autoStart) {
+				this.start()
+			}
+			
+		},
+		
+		// 暂停倒计时
+		pause() {
+			if(this.timer) {
+				clearInterval(this.timer);
+				this.timer = null
+			}
+		},
+		
+		// 开始倒计时
+		start() {
+			if(this.timer) {
+				return
+			}
+			this.startTimer();		
+		}
+	},
+	mounted() {
+		this.reset();
+	},
+	beforeDestroy() {
+		this.pause()
+	}
+};
+</script>

main.js

@@ -11,4 +11,8 @@ App.mpType = 'app'
 const app = new Vue({
     ...App
 })
+// http拦截器，此为需要加入的内容，如果不是写在common目录，请自行修改引入路径
+import httpInterceptor from '@/common/http.interceptor.js'
+// 这里需要写在最后，是为了等Vue创建对象完成，引入"app"对象(也即页面的"this"实例)
+Vue.use(httpInterceptor, app)
 app.$mount()

pages/home/home.vue

@@ -8,7 +8,7 @@
 				</view>
 				<view class="header-main">
 					<view class="header-left">
-						<text>26888</text>
+						<text>{{result.expense_amount}}</text>
 						<text>明天早起打开可瓜分</text>
 						<text>(真我币)</text>
 					</view>
@@ -31,20 +31,20 @@
 					<image src="../../static/imgs/ic_sign_1@2x.png" mode=""></image>
 					<view class="text">
 						<text>参加人数</text>
-						<text>1000</text>
+						<text>{{result.apply_num}}</text>
 					</view>
 				</view>
 				<view class="item">
 					<image style="width: 44rpx;height: 47rpx;" src="../../static/imgs/ic_sign_2@2x.png" mode=""></image>
 					<view class="text">
 						<text>上次人均瓜分</text>
-						<text>1000</text>
+						<text>{{result.last_average_expense_amount}}</text>
 					</view>
 				</view>
 			</view>
 			<view class="time-box">
 				<view class="time">
-					<text>9:00-22:00</text>
+					<text>{{result.config_vo&&result.config_vo.break_time}}</text>
 					<text>sing up</text>
 				</view>
 				<view class="line-box">
@@ -52,21 +52,32 @@
 					<view class="line"></view>
 				</view>
 				<view class="time">
-					<text>9:00-22:00</text>
+					<text>{{result.config_vo&&result.config_vo.clock_time}}</text>
 					<text>clock in</text>
 				</view>
 				<view class="line-box">
-					<text>NEXT DAY</text>
-					<view class="line"></view>
+					<text></text>
+					<view style="margin-top: 25px;" class="line"></view>
 				</view>
 				<view class="time">
-					<text>9:00-22:00</text>
+					<text>{{result.config_vo&&result.config_vo.close_time}}</text>
 					<text>settlement</text>
 				</view>
 			</view>
-			<view class="btn">
+			<view class="btn" @click="result.my_clock_statu===0">
 				支付100(真我币)，参加活动
 			</view>
+			<view class="btn" @click="result.my_clock_statu===0">
+				早起打卡倒计时：
+				<countdown-timer :time="10000" :autoStart='true' @finish='finish'>
+				    <template v-slot="{day, hour, minute, second}">
+				        <view>{{hour}}:{{minute}}:{{second}}</view>        
+				    </template>
+				</countdown-timer>
+			</view>
+			<view class="btn" @click="result.my_clock_statu===2">
+				已打卡
+			</view>
 			<view class="gz" @click="show=true">
 				<text>规则</text>
 				<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
@@ -166,11 +177,12 @@
 		},
 		data() {
 			return {
+				result:{},
 				showPay: false,
 				showLottery: false,
 				show: false,
 				showUpload: false,
-				showSuccess: true,
+				showSuccess: false,
 				src: 'https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF',
 				number: 0,
 			};
@@ -179,9 +191,14 @@
 
 		},
 		onLoad(option) {
-
+			this.$u.get('/mini/activityClocks/today', {}).then(res => {
+				this.result = res;
+			})
 		},
 		methods: {
+			finish(){
+				console.log(111)
+			},
 			goMyRecord() {
 				uni.navigateTo({
 					url: '../myRecord/myRecord'
@@ -517,7 +534,7 @@
 		.pay-box {
 			width: 690rpx;
 			box-sizing: border-box;
-			padding: 40rpx 30rpx 40rpx 55rpx;
+			padding: 40rpx 30rpx 40rpx 30rpx;
 			background: #FFFFFF;
 			border-radius: 7rpx;
 			margin: -88rpx auto 0 auto;
@@ -533,7 +550,7 @@
 				.time {
 					display: flex;
 					flex-direction: column;
-					min-width: 120rpx;
+					min-width: 132rpx;
 					align-items: center;
 				}