统计 个人打卡记录

App.vue

@@ -17,16 +17,13 @@ export default {
 
     await this.login();
     await this.getUserInfo();
-    this.getSites();
   },
 
   computed: mapState('user', ['token']),
 
   methods: {
-	...mapMutations('user', ['setUserInfo','setHealthCode']),
+    ...mapMutations('user', ['setUserInfo', 'setHealthCode']),
     ...mapActions('user', ['login']),
-	...mapActions('site', ['getSites']),
-
 
     /**
      * 查询个人信息
@@ -36,27 +33,22 @@ export default {
         const { token } = this;
         const params = {
           param: {
-					token
+            token,
-				}
+          },
         };
         const res = await this.$http.post(GET_USER_INFO, params);
-			const {
+        const { success, code, msg, data } = res.data;
-				success,
-				code,
-				msg,
-				data
-			} = res.data;
         if (success && code === 200) {
           this.setUserInfo(data);
-				if(data.healthCodeList && data.healthCodeList.length>0){
+          if (data.healthCodeList && data.healthCodeList.length > 0) {
             const oldCode = data.healthCodeList[0].healthCode;
-					this.setHealthCode(oldCode)
+            this.setHealthCode(oldCode);
           }
           this.success = true;
         } else {
           uni.showToast({
             title: msg || '查询个人信息成功',
-					icon: 'none'
+            icon: 'none',
           });
         }
       } catch (error) {
@@ -64,12 +56,11 @@ export default {
         if (error.msg) {
           uni.showToast({
             title: error.msg || '查询个人信息失败',
-					icon: 'none'
+            icon: 'none',
           });
         }
       }
     },
-	
   },
 };
 </script>

components/timeline/timeline.vue

@@ -1,22 +1,11 @@
 <template>
   <view>
     <view class="cu-timeline">
-			<view class="cu-time">昨天</view>
+      <!-- <view class="cu-time">昨天</view> -->
-			<view class="cu-item cur cuIcon-noticefill">
+      <view :key="index" class="cu-item cur" v-for="(item, index) in userSigns">
         <view class="content bg-green shadow-blur">
-					<text>22:22</text>【广州市】快件已到达地球
+          <text>{{ generateTime(item.time - 0) }}</text>
-				</view>
+          【 {{ item.siteName }} 】打卡
-			</view>
-			<view class="cu-item text-red cuIcon-attentionforbidfill">
-				<view class="content bg-red shadow-blur">这是第一次，我家的铲屎官走了这么久。久到足足有三天！！</view>
-			</view>
-		</view>
-
-		<view class="cu-timeline">
-			<view class="cu-time">06-17</view>
-			<view class="cu-item">
-				<view class="content">
-					<text>01:30</text>【喵星】 MX-12138 已揽收，准备发往银河系
         </view>
       </view>
     </view>
@@ -24,9 +13,32 @@
 </template>
 
 <script>
-	export default {
+import { mapState } from 'vuex';
+
+export default {
   data() {
     return {};
   },
-	};
+
+  computed: mapState('statistics', ['userSigns']),
+
+  methods: {
+    /**
+     * 格式化时间为文本
+     * @param {number} time ms数
+     */
+    generateTime(time) {
+      let type = 'YYYY-MM-DD HH:mm';
+      if (this.$moment().isSame(time, 'day')) {
+        return `今天 ${this.$moment(time).format('HH:mm')}`;
+      }
+
+      if (this.$moment().isSame(time, 'year')) {
+        type = 'MM-DD HH:mm';
+      }
+
+      return this.$moment(time).format(type);
+    },
+  },
+};
 </script>

config/api/api.js

@@ -28,6 +28,9 @@ export const USER_SIGNS = `${sites}/info`;
 // 获取所有场景信息
 export const SITES_INFO = `${sites}/siteInfo`;
 
+// 根据二维码的id获取场所的信息
+export const SITE = `${sites}/site`;
+
 // 扫码统计
 export const SCHOOL_SIGNS = `${sites}/statistics`;
 

pages/basic-info/basic-info.vue

@@ -2,58 +2,103 @@
   <view>
     <form class="padding-lr cu-form-group flex-direction">
       <view class="cu-form-group flex flex-direction padding-tb">
-				<view class="title padding-bottom-sm"><span v-show="!userInfo" class="text-red padding-right-xs">*</span>姓名</view>
+        <view class="title padding-bottom-sm">
-				<input :disabled="userInfo ? true : false" placeholder="请输入真实姓名" name="input" type="text" v-model="name" />
+          <span class="text-red padding-right-xs" v-show="!userInfo">*</span>姓名
+        </view>
+        <input
+          :disabled="(userinfo && userInfo.id) ? true : false"
+          name="input"
+          placeholder="请输入真实姓名"
+          type="text"
+          v-model="name"
+        />
       </view>
       <view class="cu-form-group flex flex-direction padding-tb">
-				<view class="title padding-bottom-sm"><span v-show="!userInfo" class="text-red padding-right-xs">*</span>身份证</view>
+        <view class="title padding-bottom-sm">
-				<input :disabled="userInfo ? true : false" placeholder="请输入身份证号" name="input" type="text" v-model="idCard" />
+          <span class="text-red padding-right-xs" v-show="!(userinfo && userInfo.id)">*</span>身份证
+        </view>
+        <input
+          :disabled="(userinfo && userInfo.id) ? true : false"
+          name="input"
+          placeholder="请输入身份证号"
+          type="text"
+          v-model="idCard"
+        />
       </view>
       <view class="cu-form-group flex flex-direction padding-tb">
-				<view class="title padding-bottom-sm"><span v-show="!userInfo" class="text-red padding-right-xs">*</span>联系方式</view>
+        <view class="title padding-bottom-sm">
-				<input :disabled="userInfo ? true : false" placeholder="请输入手机号码" name="input" type="number" v-model="phone" />
+          <span class="text-red padding-right-xs" v-show="!(userinfo && userInfo.id)">*</span>联系方式
+        </view>
+        <input
+          :disabled="(userinfo && userInfo.id) ? true : false"
+          name="input"
+          placeholder="请输入手机号码"
+          type="number"
+          v-model="phone"
+        />
       </view>
       <view class="cu-form-group flex flex-direction padding-tb">
-				<view class="title padding-bottom-sm"><span v-show="!userInfo" class="text-red padding-right-xs">*</span>身份</view>
+        <view class="title padding-bottom-sm">
-				<radio-group class="block" @change="RadioChange" v-if="!userInfo">
+          <span class="text-red padding-right-xs" v-show="!(userinfo && userInfo.id)">*</span>身份
+        </view>
+        <radio-group @change="RadioChange" class="block" v-if="!(userinfo && userInfo.id)">
           <view class="flex">
-						<view class="flex-sub margin-tb-sm" v-for="(identity,index) in identitys" :key="index">
+            <view :key="index" class="flex-sub margin-tb-sm" v-for="(identity,index) in identitys">
               <label class="flex justify-between align-center">
-								<radio class="round margin-right-xs" :checked="index === current" :value="identity.value"></radio>
+                <radio
+                  :checked="index === current"
+                  :value="identity.value"
+                  class="round margin-right-xs"
+                ></radio>
                 <text class="flex-sub" style="font-size: 34rpx;">{{ identity.name }}</text>
               </label>
             </view>
           </view>
         </radio-group>
-				<input v-else disabled name="input" type="text" :value="current === 0 ? '学生' : current === 1 ? '教师' : '工作人员'" />
+        <input
+          :value="current === 0 ? '学生' : current === 1 ? '教师' : '工作人员'"
+          disabled
+          name="input"
+          type="text"
+          v-else
+        />
       </view>
       <view class="cu-form-group flex flex-direction padding-tb">
-				<view class="title padding-bottom-sm"><span v-show="!userInfo" class="text-red padding-right-xs">*</span>学号</view>
+        <view class="title padding-bottom-sm">
-				<input :disabled="userInfo ? true : false" placeholder="请输入学号" name="input" type="text" v-model="studentID" />
+          <span class="text-red padding-right-xs" v-show="!(userinfo && userInfo.id)">*</span>学号
+        </view>
+        <input
+          :disabled="(userinfo && userInfo.id) ? true : false"
+          name="input"
+          placeholder="请输入学号"
+          type="text"
+          v-model="studentID"
+        />
       </view>
-			
     </form>
-		<user-agreement v-if="!userInfo" @changeIntentions='changeIntentions'></user-agreement>
+    <user-agreement @changeIntentions="changeIntentions" v-if="!(userinfo && userInfo.id)"></user-agreement>
-		<button v-show="!userInfo" class="bg-cyan margin primary-btn" hover-class="cc-active" @tap="handleSubmitUserInfo">确认提交</button>
+    <button
+      @tap="handleSubmitUserInfo"
+      class="bg-cyan margin primary-btn"
+      hover-class="cc-active"
+      v-show="!(userinfo && userInfo.id)"
+    >确认提交</button>
   </view>
 </template>
 
 <script>
-	import {
+import { showToast } from 'common/script/util';
-		showToast
+import { SUBMIT_USER_INFO } from 'api/api';
-	} from 'common/script/util';
+import { mapState, mapMutations } from 'vuex';
-	import {
-		SUBMIT_USER_INFO
-	} from 'api/api';
-	import { mapState,mapMutations } from 'vuex';
 
-	export default {
+export default {
   data() {
     return {
       name: '',
       idCard: '',
       phone: '',
-				identitys: [{
+      identitys: [
+        {
           value: '0',
           name: '学生',
         },
@@ -68,12 +113,12 @@
       ],
       studentID: '',
       current: 0,
-				agree: false
+      agree: false,
     };
   },
 
   created() {
-			if(this.userInfo){
+    if (this.userInfo) {
       this.name = this.userInfo.name;
       this.idCard = this.userInfo.idCard;
       this.phone = this.userInfo.phone;
@@ -82,7 +127,7 @@
     }
   },
 
-		computed: mapState('user', ['userInfo','pagePath']),
+  computed: mapState('user', ['userInfo', 'pagePath']),
 
   methods: {
     ...mapMutations('user', ['setUserInfo']),
@@ -95,7 +140,7 @@
       }
     },
 
-			changeIntentions(data){
+    changeIntentions(data) {
       this.agree = data;
     },
 
@@ -106,38 +151,27 @@
       try {
         if (!this.checkRules()) return;
 
-					const {
+        const { name, idCard, phone, studentID, current } = this;
-						name,
-						idCard,
-						phone,
-						studentID,
-						current
-					} = this;
         const params = {
           param: {
             idCard,
             name,
             no: studentID,
             phone,
-							post: current
+            post: current,
-						}
+          },
         };
 
         const res = await this.$http.post(SUBMIT_USER_INFO, params);
-					const {
+        const { success, code, msg, data } = res.data;
-						success,
-						code,
-						msg,
-						data
-					} = res.data;
         if (success && code === 200) {
           this.success = true;
           this.setUserInfo(data);
-						this.openPage(pagePath)
+          this.openPage(pagePath);
         } else {
           uni.showToast({
             title: msg || '提交基本信息成功',
-							icon: 'none'
+            icon: 'none',
           });
         }
       } catch (error) {
@@ -145,7 +179,7 @@
         if (error.msg) {
           uni.showToast({
             title: error.msg || '提交基本信息失败',
-							icon: 'none'
+            icon: 'none',
           });
         }
       }
@@ -153,7 +187,7 @@
 
     // 验证信息
     checkRules() {
-			  const { name,idCard,phone,identitys,studentID,agree } = this;
+      const { name, idCard, phone, identitys, studentID, agree } = this;
       if (!name) {
         showToast('请输入姓名');
         return;
@@ -174,7 +208,7 @@
         showToast('请输入学号');
         return;
       }
-			  if(!agree) {
+      if (!agree) {
         showToast('请选择是否同意《用户服务协议》和《隐私政策》');
         return;
       }
@@ -199,11 +233,11 @@
       return idCardExg.test(idCard);
     },
   },
-	};
+};
 </script>
 
 <style lang="scss" scoped>
-	.primary-btn {
+.primary-btn {
   border-radius: 15rpx;
-	}
+}
 </style>

pages/my-signs/my-signs.vue

@@ -13,7 +13,12 @@
     <!-- 内容区 -->
     <view class="content">
       <!-- 今日打卡地图显示 -->
-      <history-map v-if="current === 0" />
+      <history-map
+        :markers="markers"
+        :polygons="polygons"
+        :polyline="polyline"
+        v-if="current === 0"
+      />
       <!-- 打卡记录 时间轴显示 -->
       <timeline v-else />
     </view>
@@ -21,6 +26,8 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
+
 export default {
   data() {
     return {
@@ -29,9 +36,96 @@ export default {
       activeColor: '#0897C7',
     };
   },
+
+  computed: {
+    ...mapState('statistics', ['userSigns']),
+    ...mapState('user', ['token']),
+    // 坐标标注点
+    markers() {
+      if (!this.userSigns) return null;
+      const result = [];
+      this.userSigns.forEach(item => {
+        const content = `${this.$moment(+item.time).format('YY-MM-DD HH:mm')} \n ${item.siteName}`;
+        const obj = {
+          latitude: item.latitude,
+          longitude: item.longitude,
+          iconPath: '/static/location.png',
+          callout: {
+            content,
+            color: '#fff',
+            padding: 4,
+            bgColor: '#0A97C6',
+            borderRadius: 2,
+            textAlign: 'center',
+          },
+        };
+        result.push(obj);
+      });
+
+      return result;
+    },
+
+    // 轨迹连线
+    polyline() {
+      if (!this.userSigns) return null;
+      const points = [];
+      this.userSigns.forEach(item => {
+        const obj = {
+          latitude: item.latitude,
+          longitude: item.longitude,
+        };
+        points.push(obj);
+      });
+      return [{ points, arrowLine: true, dottedLine: true, borderColor: '#cccccc' }];
+    },
+
+    // 多边形区域
+    polygons() {
+      if (!this.userSigns) return null;
+      const points = [];
+      this.userSigns.forEach(item => {
+        const obj = {
+          latitude: item.latitude,
+          longitude: item.longitude,
+        };
+        points.push(obj);
+      });
+      return [
+        { points, strokeWidth: 0, strokeColor: '#00000000', fillColor: '#cce6ff88', zIndex: 0 },
+      ];
+    },
+  },
+
+  onLoad() {
+    const startTime = +this.$moment()
+      .startOf('day')
+      .format('x');
+    const endTime = +this.$moment()
+      .endOf('day')
+      .format('x');
+    const params = { param: { startTime, endTime, token: this.token } };
+    this.getUserSigns(params);
+  },
+
   methods: {
+    ...mapActions('statistics', ['getUserSigns']),
+
     handleClickNav({ currentIndex }) {
       this.current = currentIndex;
+      const endTime = +this.$moment()
+        .endOf('day')
+        .format('x');
+      const startTime = +this.$moment('2020-01-01')
+        .startOf('day')
+        .format('x');
+      let param = { startTime, endTime, token: this.token };
+      if (currentIndex === 0) {
+        param.startTime = +this.$moment()
+          .startOf('day')
+          .format('x');
+      }
+      const params = { param };
+      this.getUserSigns(params);
     },
   },
 };

pages/sign/sign.vue

@@ -2,7 +2,7 @@
   <view class="padding-top-lg">
     <template v-if="!success">
       <view class="text-xxl padding text-center margin-top-xl">
-        <text class="text-black text-bold">{{ address }}</text>
+        <text class="text-black text-bold">{{ site }}</text>
       </view>
       <button @tap="handleSign(siteId)" class="cu-btn lg bg-purple margin sign-btn">{{ typeText }}</button>
     </template>
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import { formatQuery } from 'utils/util';
 import { SCAN_SIGN } from 'api/api';
 
@@ -23,7 +23,6 @@ export default {
   name: 'SignScan',
   data() {
     return {
-      address: '图书馆',
       siteId: '',
       siteName: '',
       success: false,
@@ -32,6 +31,7 @@ export default {
   },
 
   computed: {
+    ...mapState('site', ['site']),
     typeText() {
       return this.type === 0 ? '进场打卡' : '出场打卡';
     },
@@ -42,22 +42,29 @@ export default {
       const query = formatQuery(decodeURIComponent(options.scene));
       console.log('query: ', query);
       const { d, t } = query;
+      if (!d || !t) {
+        uni.showToast({
+          title: '二维码参数错误',
+          icon: 'none',
+          duration: 3000,
+        });
+      }
       this.siteId = d;
       this.type = +t;
+      this.getSiteByQrId({ param: { id: d, type: t } });
     } catch (error) {
       console.log('error: ', error);
     }
   },
 
   methods: {
-    ...mapActions('site', ['sign']),
+    ...mapActions('site', ['sign', 'getSiteByQrId']),
     /**
      * 扫码打卡
      * @param {string} siteId 场所id
      */
     async handleSign(siteId) {
       try {
-        console.log('打卡');
         const params = { param: { siteId } };
         await this.sign(params);
         this.success = true;

store/modules/site/actions.js

@@ -1,6 +1,6 @@
 import { http } from 'plugins/request/index';
 import { showLoading, hideLoading, showToast, showModal } from 'utils/ui';
-import { SITES_INFO, SCAN_SIGN } from 'api/api';
+import { SITES_INFO, SCAN_SIGN, SITE } from 'api/api';
 
 const actions = {
   /**
@@ -26,6 +26,27 @@ const actions = {
     });
   },
 
+  /**
+   * 根据二维码id获取场所信息
+   * @param {*} commit
+   * @param {object} params 提交服务端的数据
+   */
+  getSiteByQrId({ commit }, params) {
+    return new Promise((resolve, reject) => {
+      http
+        .post(SITE, params)
+        .then(res => {
+          const { data } = res.data;
+          commit('setSite', data);
+          resolve(data);
+        })
+        .catch(data => {
+          showToast(data.msg || '获取场所信息失败');
+          reject(data);
+        });
+    });
+  },
+
   /**
    * 扫码打卡 提交打卡记录
    * @param {*} commit

store/modules/site/mutations.js

@@ -7,6 +7,15 @@ const mutations = {
   setSites(state, data) {
     state.sites = data || [];
   },
+
+  /**
+   * 设置当前场所的信息
+   * @param {object} state
+   * @param {object} data
+   */
+  setSite(state, data) {
+    state.site = data || null;
+  },
 };
 
 export default mutations;

store/modules/site/state.js

@@ -1,4 +1,5 @@
 const state = {
+  site: null, // 当前场所信息
   sites: [], // 所有的场所信息
 };
 

store/modules/statistics/actions.js

@@ -16,7 +16,7 @@ const actions = {
         .then(res => {
           hideLoading();
           const { data } = res.data;
-          commit('setUserSign', data);
+          commit('setUserSigns', data);
           resolve(data);
         })
         .catch(data => {