打卡的积分

src/project/fengdu/AppNewFarmerBank/integralTask.vue

@@ -4,7 +4,7 @@
       <img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
     </div>
     <div class="title">任务大厅</div>
-    <div class="card-list">
+    <div class="card-list" v-if="list.length">
       <div class="card" v-for="(item,index) in list" :key="index" @click="$linkTo('./taskDetail?id='+item.id)">
         <h4>{{ item.title }}</h4>
         <p>{{ item.detail }}</p>
@@ -12,12 +12,12 @@
           <image mode="aspectFill" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
         </div>
         <div class="time">
-          <div class="goin">
+          <div class="goin" v-if="item.intoBegintime && item.intoEndtime">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
             <div class="label">进场时间：</div>
             <div class="value">{{ item.intoBegintime.substring(0, 16)}} 至 {{ item.intoEndtime.substring(0, 16) }}</div>
           </div>
-          <div class="exit">
+          <div class="exit" v-if="item.exitBegintime && item.exitEndtime">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
             <div class="label">离场时间：</div>
             <div class="value">{{ item.exitBegintime.substring(0, 16) }} 至 {{ item.exitEndtime.substring(0, 16) }}</div>
@@ -25,11 +25,12 @@
           <div class="type">
             <img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
             <div class="label">任务类型：</div>
-            <div class="value">{{ item.type==0? '打卡得积分':'报名得积分' }}</div>
+            <div class="value">{{ $dict.getLabel('fdIntegralTaskType', item.type) }}</div>
           </div>
         </div>
       </div>
     </div>
+    <AiEmpty :description="`暂无任务`" class="emptyWrap" v-else/>
   </div>
 </template>
 
@@ -44,7 +45,7 @@ export default {
   },
   methods: {
     getList() {
-      this.$instance.post('/app/appintegraltask/list').then(res=> {
+      this.$instance.post('/app/appintegraltask/list?status=1').then(res=> {
         if(res?.data) {
           this.list = res.data.records
         }
@@ -55,7 +56,9 @@ export default {
     uni.setNavigationBarTitle({
       title: '功德银行'
     });
-    this.getList()
+    this.$dict.load(['fdIntegralTaskType']).then(() => {
+      this.getList()
+    })
   },
 }
 </script>

src/project/fengdu/AppNewFarmerBank/taskDetail.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="taskDetail">
     <div class="task">
-      <h4>10月31日线下公益宣传</h4>
+      <h4>{{ info.title }}</h4>
-      <p>百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办午，庆
+      <p>{{ info.detail }}</p>
-        祝中国共产党成立100周年在国务院举办午，庆祝中…</p>
+      <div class="imgs" v-if="info.files">
-      <div class="imgs" v-for="(item, index) in info.annexs" :key="index">
+        <image :src="item.url" v-for="(item, index) in info.files" :key="index" mode="aspectFill" @click="preview(item.url)" />
-        <!-- <img :src="item.annexFile.url" mode="aspectFill" @click="preview(info.annexs, item.annexFile.url)" /> -->
       </div>
     </div>
 
@@ -15,7 +14,7 @@
         <img src="https://cdn.cunwuyun.cn/fengdu/ic-dizhi.png" alt="">
         <div class="items-info">
           <label>活动地点：</label>
-          <div class="value">丰都县金牛区XXXX大厦XXX楼2101</div>
+          <div class="value">{{ info.address }}</div>
         </div>
         <div class="address" @click="toAddress">
           <img src="https://cdn.cunwuyun.cn/fengdu/ic-daohang.png" alt="">
@@ -26,45 +25,116 @@
         <img src="https://cdn.cunwuyun.cn/fengdu/ic-renwuleixing.png" alt="">
         <div class="item-info">
           <label>任务类型：</label>
-          <div class="value">报名得积分</div>
+          <div class="value">{{ $dict.getLabel('fdIntegralTaskType', info.type) }}</div>
         </div>
       </div>
       <div class="item">
         <img src="https://cdn.cunwuyun.cn/fengdu/ic-jinchangshijian.png" alt="">
-        <div class="item-info">
+        <div class="item-info" v-if="info.intoBegintime && info.intoEndtime">
           <label>进场时间：</label>
-          <div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
+          <div class="value">{{ info.intoBegintime.substring(0, 16) }} 至 {{ info.intoEndtime.substring(0, 16) }}</div>
         </div>
       </div>
       <div class="item">
         <img src="https://cdn.cunwuyun.cn/fengdu/ic-lichangshijian.png" alt="">
-        <div class="item-info">
+        <div class="item-info" v-if="info.exitBegintime && info.exitEndtime">
           <label>离场时间：</label>
-          <div class="value">2020-12-11 10:10 至 2020-12-11 10:10</div>
+          <div class="value">{{ info.exitBegintime.substring(0, 16) }} 至 {{ info.exitEndtime.substring(0, 16) }}</div>
         </div>
       </div>
     </div>
-    <!-- <div class="btn-wrapper">
+    <div class="btn-wrapper" v-if="info.type==1">
-      <div class="btn" @click="toReport" hover-class="text-hover">报名得积分/积分+5,已报名</div>
+      <!-- , -->
-    </div> -->
+      <div class="btn" @click="signUp" hover-class="text-hover">
-    <div class="btn-clock">
+        <span>报名得积分/积分+{{ info.enrollIntegral }}</span>
-      <div class="btn-circle" @click="toReport" hover-class="text-hover">
+        <!-- <span>已报名</span> -->
-        <div class="daka">打卡签到</div>
-        <div class="text">积分+5</div>
       </div>
-      <div class="tips">符合打卡条件,未到打卡时间,无法重复打卡</div>
+    </div>
+    <div class="btn-clock" v-if="info.type == 0">
+      <div class="btn-circle" @click="clockIn" hover-class="text-hover" :class="isClock== 0? 'gray': isClock==3? 'gray': isClock== 2? 'opacity':''">
+        <div class="daka">打卡签到</div>
+        <div class="text" v-if="isClock==1">积分+{{ intoIntegral }}</div>
+      </div>
+      <div class="tips">{{ scope }}</div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 export default {
   name: "taskDetail",
   appName: "任务详情",
   data() {
     return {
       info: {},
-      id: ''
+      id: '',
+      latitude: '',
+      longitude: '',
+      address: '',
+      qqmapsdk: null,
+      distance: 100,
+      flag: false,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+    intoIntegral() {
+      const times = new Date().getTime()
+      const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime()
+      const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime()
+      const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime()
+      const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime()
+
+      if (times > inSTimes && times < inETimes) {
+        return this.info.intoIntegral
+      }
+
+      if (times > outSTimes && times < outETimes) {
+        return this.info.exitIntegral
+      }
+
+      return 0
+    },
+    isClock() {
+      const times = new Date().getTime()
+      const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime()
+      const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime()
+      const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime()
+      const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime()
+      // 不符合条件(任务未开始、已经结束..)
+      if (times < inSTimes || times > outETimes || (inETimes < times && times < outSTimes)) {
+        return 0
+      }
+      // 在打卡范围内未打卡
+      if (this.info.clockRange > this.distance && (!this.info.intoClock && (inSTimes < times && times < inETimes)) || !this.info.exitClock && (outSTimes < times && times < outETimes)) {
+        return 1
+      }
+      // 已打卡(打卡距离内 && 打卡时间内)
+      if(this.info.clockRange > this.distance && (this.info.intoClock && (inSTimes < times && times < inETimes)) || (this.info.exitClock && outSTimes < times && times < outETimes)) {
+        return 2
+      }
+      // 没在指定范围
+      if(this.distance > this.info.clockRange) {
+        return 3
+      }
+    },
+    scope() {
+      const times = new Date().getTime()
+      const inSTimes = new Date(this.info.intoBegintime?.replaceAll('-', '/')).getTime() // 进场开始
+      const inETimes = new Date(this.info.intoEndtime?.replaceAll('-', '/')).getTime() // 进场结束
+      const outSTimes = new Date(this.info.exitBegintime?.replaceAll('-', '/')).getTime() // 离场开始
+      const outETimes = new Date(this.info.exitEndtime?.replaceAll('-', '/')).getTime() // 离场结束
+
+      if (this.info.clockRange > this.distance && (this.info.intoClock && (inSTimes < times && times < inETimes)) || (this.info.exitClock && outSTimes < times && times < outETimes)) {
+        return `无法重复打卡`
+      }
+
+      if (this.info.clockRange > this.distance && (!this.info.intoClock && (times > inSTimes && times < inETimes)) || !this.info.exitClock && (times > outSTimes && times < outETimes)) {
+        return `符合打卡条件`
+      }
+
+      return `未到打卡时间/不在指定位置`
     }
   },
   methods: {
@@ -75,19 +145,157 @@ export default {
         scale: 18
       })
     },
-    // preview(url) {
+    preview(url) {
-    //   uni.previewImage({
+      uni.previewImage({
-    //     urls: this.info.checkPhoto.map(v => v.url),
+        urls: this.info.files.map(v => v.url),
-    //     current: url
+        current: url
-    //   })
+      })
-    // },
+    },
     getDetail() {
       this.$instance.post(`/app/appintegraltask/queryDetailById?id=${this.id}`).then(res=> {
         if(res?.data) {
-          console.log(res);
+          this.info = res.data
+          this.$nextTick(() => {
+            this.getLocation()
+          })
         }
       })
-    }
+    },
+    // 打卡积分
+    clockIn() {
+      if(!this.user.idNumber) {
+        return this.$dialog.confirm({
+          content: '您只有完成信息认证后，才可进行相关操作。',
+          confirmText: '去认证'
+        }).then(() => {
+          this.$linkTo('/mods/AppMine/userInfo')
+        }).catch(() => {
+        })
+      }
+      if (!this.latitude) {
+        this.$dialog.alert({
+          title: '温馨提示',
+          content: '您未授权定位，请先授权！'
+        }).then(() => {
+          this.getLocation()
+        }).catch(() => {
+        })
+
+        return false
+      }
+
+      if (this.isClock == 0 || this.isClock == 3) {
+        return this.$dialog.alert({
+          title: '温馨提示',
+          content: '不满足打卡条件！'
+        }).then(() => {
+          this.getLocation()
+        }).catch(() => {
+        })
+      }
+
+      if (this.isClock == 2) {
+        return this.$u.toast(`已打卡，请勿重复打卡！`)
+      }
+
+      this.flag = true
+      this.daKa()
+    },
+    // 报名积分
+    signUp() {
+      if(this.info.enrollClock) return
+
+      this.flag = true 
+      this.daKa()
+    },
+    daKa() {
+      this.$instance.post(`/app/appintegraltask/clock`, {
+        address: this.address,
+        clockTime: this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
+        lat: this.latitude,
+        lng: this.longitude,
+        openId: this.user.openId,
+        realName: this.user.realName,
+        taskId: this.id,
+        type: this.info.type
+      }).then(res => {
+        if (res?.code == 0) {
+          this.flag = false
+          if (this.info.type == 1) {
+            this.$u.toast('报名成功！')
+          } else {
+            this.$u.toast('打卡签到成功！')
+          }
+          setTimeout(()=> {
+            uni.navigateBack()
+          }, 500)
+        }
+      }).catch(err => this.$u.toast(err))
+    },
+    getLocation() {
+      wx.authorize({
+        scope: 'scope.userLocation',
+        success: () => {
+          uni.getLocation({
+            type: 'gcj02',
+            success: res => {
+              this.latitude = res.latitude
+              this.longitude = res.longitude
+              this.qqmapsdk.reverseGeocoder({
+                location: `${res.latitude},${res.longitude}`,
+                success: data => {
+                  console.log(data);
+                  this.address = data.result.formatted_addresses.recommend
+                },
+                fail: function (info) {
+                  console.log(info)
+                }
+              })
+
+              this.qqmapsdk.calculateDistance({
+                from: {
+                  longitude: res.longitude,
+                  latitude: res.latitude
+                },
+                to: [{
+                  longitude: this.info.lng,
+                  latitude: this.info.lat
+                }],
+                success: res => {
+                  this.distance = res.result.elements[0].distance
+                },
+                fail: function (error) {
+                  console.error(error)
+                },
+                complete: function (res) {
+                }
+              })
+            },
+            fail: e => {
+              console.log(e)
+            }
+          })
+        },
+        fail: () => {
+          this.$dialog.confirm({
+            content: '您未授权定位，功能将无法使用'
+          }).then(() => {
+            uni.openSetting({
+              success: res => {
+                if (!res.authSetting['scope.userLocation']) {
+                  this.$dialog.alert({
+                    content: '您未授权定位，功能将无法使用'
+                  }).then(() => {
+                  })
+                } else {
+                }
+              }
+            })
+          })
+        }
+      })
+    },
+
   },
   onLoad(o) {
     this.id = o.id
@@ -95,6 +303,9 @@ export default {
       title: '任务详情'
     });
     this.getDetail()
+    this.qqmapsdk = new QQMapWX({
+      key: process.env.NODE_ENV == 'production' ? 'RWWBZ-64BEJ-MVLFJ-FTHLQ-JTR6J-SAB2S' : '3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY'
+    })
   },
 }
 </script>
@@ -122,11 +333,21 @@ export default {
 
     .imgs {
       display: flex;
-      max-width: 450px;
+      align-items: center;
+      flex-wrap: wrap;
+      padding-top: 20px;
+      box-sizing: border-box;
 
-      img {
+      image {
-        width: 40px;
+        height: 208px;
-        height: 40px;
+        width: 33.33%;
+        padding-right: 12px;
+        margin-bottom: 12px;
+        box-sizing: border-box;
+
+        &:nth-of-type(3n) {
+          padding-right: 0;
+        }
       }
     }
   }
@@ -188,13 +409,12 @@ export default {
   }
 
   .opacity {
-    opacity: 0.6000000238418579;
+    opacity: 0.6000000238418579 !important;
   }
 
   .gray {
-    background: #b5b5bcff;
+    background: #b5b5bcff !important;
   }
-
   .btn-clock {
     height: 372px;
     width: 100%;
@@ -222,6 +442,14 @@ export default {
         font-weight: 500;
       }
     }
+
+    .opacity {
+      opacity: 0.6000000238418579 !important;
+    }
+
+    .gray {
+      background: #b5b5bcff !important;
+    }
     .tips {
       text-align: center;
       color: #666666;