对接接口

api/api.js

@@ -58,6 +58,8 @@ const config = {
 	teamApply: {
 		url: '/team/apply',
 		method: 'POST',
+		auth: true, 
+		limit : 800,
 	},
 	
 	
@@ -65,6 +67,8 @@ const config = {
 	authApply: {
 		url: '/auth/apply',
 		method: 'POST',
+		auth: true, 
+		limit : 800,
 	},
 	// 实名认证详情
 	authInfo: {
@@ -77,12 +81,22 @@ const config = {
 	clock: {
 		url: '/clock/in',
 		method: 'POST',
+		showLoading : true,
+		auth: true, 
+		limit : 800,
 	},
 	// 打卡详情列表
 	clockList: {
 		url: '/clock/in/log',
 		method: 'GET',
 	},
+	// 打卡统计
+	clockTotal: {
+		url: '/clock/in/total',
+		method: 'GET',
+		showLoading : true,
+		debounce : 400,
+	},
 }
 
 

config.js

@@ -6,7 +6,7 @@ import uvUI from '@/uni_modules/uv-ui-tools'
 Vue.use(uvUI);
 
 // 当前环境
-const type = 'prod'
+const type = 'dev'
 
 
 // 环境配置

pages/subPack/human/human.vue

@@ -71,16 +71,10 @@
 				console.log(res);
 				self.form.lat = res.position.latitude
 				self.form.lon = res.position.longitude
-				self.form.address = res.addressDetail.name
+				self.form.address = res.address
 			})
 		},
 		methods: {
-			//返回首页
-			toHome() {
-				uni.navigateTo({
-					url: "/pages/index/index"
-				})
-			},
 			// 人脸认证通过后拍照
 			photo() {
 				let self = this
@@ -116,9 +110,13 @@
 				
 				this.$api('clock', this.form, res => {
 					if(res.code == 200){
-						uni.reLaunch({
-							url: '/pages/index/index'
+						
+						uni.showToast({
+							title: '打卡成功',
+							icon:'none'
 						})
+						
+						setTimeout(uni.navigateBack, 1000, -1)
 					}
 				})
 			},

pages/subPack/record/record.vue

@@ -20,8 +20,8 @@
 			<view>
 				<view class="calendar-top">
 					<view class="current-time">
-						<view class="year">{{ year }}</view>
-						<view class="time">{{ monthDay }}</view>
+						<view class="year">{{ selectDate.format('YYYY') }}年</view>
+						<view class="time">{{ selectDate.format('MM') }}月</view>
 					</view>
 					<view class="calendar-desc">
 						<view class="calendar-desc-item">正常</view>
@@ -30,13 +30,16 @@
 					</view>
 				</view>
 
-				<uni-calendar class="uni-calendar--hook" :selected="selected" showMonth />
+				<uni-calendar class="uni-calendar--hook" 
+				@monthSwitch="monthSwitch"
+				@change="changeDate"
+				:selected="clockTotal.date" showMonth />
 
 				<view class="desc">
 					<view style="width: 100%;justify-content: flex-start;margin-top: 30rpx;" class="calendar-desc">
-						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>5</text></view>
-						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>3</text></view>
-						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>2</text></view>
+						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">正常：<text>{{ clockTotal.normal }}</text></view>
+						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">缺卡：<text>{{ clockTotal.noCard }}</text></view>
+						<view style="margin: 0rpx 45rpx;" class="calendar-desc-item">未打卡：<text>{{ clockTotal.abnormal }}</text></view>
 					</view>
 				</view>
 			</view>
@@ -46,12 +49,21 @@
 		<view class="today-detail main">
 			<view class="today-detail-title">今日打卡详情</view>
 			<uv-steps current="8" direction="column" dot>
-				<uv-steps-item v-for="item in list" :key="item.id">
+				<uv-steps-item v-for="item in list" 
+				:key="item.id">
 					<template #title>
 						<view class="today-detail-main">
-							<image :src="item.pic" mode="widthFix"></image>
+							<image :src="item.pic"
+							@click="previewImage([item.pic])" 
+							mode="aspectFill"></image>
 							<view class="sign-detail">
-								<view class="time">{{ item.createTime }}</view>
+								<view class="time" v-if="item.clockInTime">{{ item.clockInTime }}</view>
+								<view class="time" v-else>
+									{{ selectDate.format('YYYY-MM-DD ') + item.clockStartTime }}
+									<view class="tag">
+										缺卡
+									</view>
+								</view>
 								<view class="address">{{ item.address }}</view>
 							</view>
 						</view>
@@ -65,70 +77,69 @@
 <script>
 	import { mapState } from 'vuex'
 	import mixinList from '@/mixins/list.js'
-	/**
-	 * 获取任意时间
-	 */
-	function getDate(date, AddDayCount = 0) {
-		if (!date) {
-			date = new Date()
-		}
-		if (typeof date !== 'object') {
-			date = date.replace(/-/g, '/')
-		}
-		const dd = new Date(date)
-
-		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
-		const y = dd.getFullYear()
-		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
-		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
-		return {
-			fullDate: y + '-' + m + '-' + d,
-			year: y,
-			month: m,
-			date: d,
-			day: dd.getDay()
-		}
-	}
+	
 	export default {
 		mixins : [mixinList],
 		name: "Record",
 		data() {
-			return {
-				year: '', //年
-				monthDay: '', //月日
-				selected: [{ //info为1:正常 2:缺卡 3:未打卡
-						date: getDate(new Date(), -3).fullDate,
-						info: 3
-					},
-					{
-						date: getDate(new Date(), -2).fullDate,
-						info: 2
-					},
-					{
-						date: getDate(new Date(), -1).fullDate,
-						info: 1
-					}
+			return {//this.$dayjs().format('YYYY-MM-DD')
+				// year: this.$dayjs().format('YYYY'), //年
+				// monthDay: this.$dayjs().format('MM'), //月日
+				selectDate : this.$dayjs(),
+				selected: [ //info为1:正常 2:缺卡 3:未打卡
+					// {
+					// 	date: getDate(new Date(), -3).fullDate,
+					// 	info: 3
+					// },
+					// {
+					// 	date: getDate(new Date(), -2).fullDate,
+					// 	info: 2
+					// },
+					// {
+					// 	date: getDate(new Date(), -1).fullDate,
+					// 	info: 1
+					// }
 				],
 				mixinsListApi : 'clockList',
+				clockTotal : {
+					date : [],
+				}
 			}
 		},
+		onLoad() {
+			this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss')
+		},
 		computed : {
 			...mapState(['teamList', 'userInfo']),
 		},
 		onShow() {
-			this.getCurrentTime()
+			this.getClockTotal()
 		},
 		methods: {
-			//获取打卡日期
-			getCurrentTime() {
-				let currentDate = new Date();
-				this.year = currentDate.getFullYear();
-				let currentMonth = currentDate.getMonth() + 1;
-				let currentDay = currentDate.getDate();
-				this.monthDay =
-					`${currentMonth < 10 ? "0" + currentMonth : currentMonth}.${currentDay < 10 ? "0" + currentDay : currentDay}`
+			getClockTotal(){
+				this.$api('clockTotal', {
+					date : this.selectDate.format('YYYY-MM-DD HH:mm:ss')
+				}, res => {
+					if(res.code == 200){
+						res.result.date.forEach(n => {
+							n.info = n.type + 1
+						})
+						
+						this.clockTotal = res.result
+					}
+				})
+			},
+			//切换月份
+			monthSwitch(e){
+				this.selectDate = this.$dayjs(`${e.year}-${e.month}-01 01:00:10`)
+				this.getClockTotal()
+			},
+			// 切换日期
+			changeDate(e){
+				this.selectDate = this.$dayjs(`${e.fulldate} 01:00:10`)
+				this.queryParams.date = this.selectDate.format('YYYY-MM-DD HH:mm:ss')
+				this.getData()
 			},
-
 		}
 	}
 </script>
@@ -147,7 +158,7 @@
 		// 签到日历
 		.sign-calendar {
 			background: white;
-			border-radius: 15rpx;
+			border-radius: 30rpx;
 			overflow: hidden;
 			margin-top: 30rpx;
 			box-sizing: border-box;
@@ -162,6 +173,7 @@
 				.user-img {
 					width: 150rpx;
 					height: 150rpx;
+					border-radius: 20rpx;
 				}
 
 				.base {
@@ -248,6 +260,10 @@
 
 			// 修改日历样式
 			&::v-deep .uni-calendar__header {
+				// display: none !important;
+			}
+			
+			&::v-deep .uni-calendar__header-text{
 				display: none !important;
 			}
 
@@ -266,7 +282,7 @@
 
 		// 今日打卡详情
 		.today-detail {
-			border-radius: 15rpx;
+			border-radius: 30rpx;
 			background: white;
 			margin-top: 35rpx;
 			box-sizing: border-box;
@@ -284,10 +300,26 @@
 				margin: 15rpx 0rpx;
 				box-sizing: border-box;
 				padding: 20rpx 15rpx;
+				font-size: 26rpx;
 
 				image {
-					width: 30%;
+					width: 220rpx;
 					border-radius: 10rpx;
+					flex-shrink: 0;
+					height: 150rpx;
+				}
+				
+				.time{
+					display: flex;
+					align-items: center;
+					.tag{
+						border: 1px solid #F97D00;
+						color: #F97D00;
+						padding: 2rpx 6rpx;
+						border-radius: 10rpx;
+						font-size: 22rpx;
+						margin-left: 20rpx;
+					}
 				}
 				
 				.sign-detail {

utils/index.js

@@ -27,4 +27,11 @@ Vue.prototype.$dayjs = dayjs
 
 Vue.prototype.$timeUtils = time
 Vue.prototype.$utils = util
-Vue.prototype.$md5 = md5
+Vue.prototype.$md5 = md5
+
+Vue.prototype.previewImage = (urls, current) => {
+	uni.previewImage({
+		urls,
+		current,
+	})
+}

utils/position.js

@@ -92,7 +92,8 @@ function getUserAddress(latitude, longitude, key) { //通过经纬度获取用
 						latitude: lat,
 						longitude: lng
 					},
-					addressDetail: res.data.result.ad_info
+					addressDetail: res.data.result.ad_info,
+					address : res.data.result.address
 				}
 				resolve(data)
 			},