feature:增加打卡详情

pages/home/checkIn.vue

@@ -68,9 +68,7 @@
             customStyle="padding:40rpx 0 30rpx"
             v-if="form.punchType == 50 && form.targetId"
             @click="openPartnersConcat()">
-            <view class="form-label flex_l">
-              合作伙伴联系人
-            </view>
+            <view class="form-label flex_l">合作伙伴联系人</view>
             <u-input
               :readonly="true"
               placeholder="请选择合作伙伴联系人"
@@ -124,6 +122,27 @@
       :queryParams="{ partnerId: form.targetId }"
       @close="closePartnersConcat($event)"></select-partners-concat>
     <u-notify ref="uNotify"></u-notify>
+    <u-popup :show="shwoSuccess" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0" round="10">
+      <view class="tips-wrap">
+        <u-image :src="form.punchImg" mode="scaleToFill" width="80vw" height="500px" />
+        <view class="tips-content">
+          <view class="success-icon-wrap">
+            <u-icon name="checkmark-circle-fill" color="#409EFF" size="60"></u-icon>
+          </view>
+          <view class="tit">签到成功</view>
+          <view class="content">
+            <view class="mb20">{{ getNowTime() }}</view>
+            <view class="mb20">{{ form.punchLocation }}</view>
+            <view class="mb20">打卡人：{{ nickName }}</view>
+            <view class="mb20">打卡类型：{{ form.punchVal }}</view>
+            <view class="mb20" v-if="form.targetName">{{ form.punchVal }}名称：{{ form.targetName }}</view>
+          </view>
+          <view class="confirm">
+            <u-button type="primary" text="确定" @click="shwoSuccess = false"></u-button>
+          </view>
+        </view>
+      </view>
+    </u-popup>
   </view>
 </template>
 
@@ -144,6 +163,7 @@
     },
     data() {
       return {
+        shwoSuccess: false,
         height: '',
         paddingTop: '',
         address: '获取定位',
@@ -156,7 +176,7 @@
           punchLat: 0,
           punchLng: 0,
           punchLocation: '',
-          punchImg: '',
+          punchImg: 'https://oms.dashoo.cn/weed1/5,01456eecb7e4a8',
           partnerContactId: null,
           partnerContactName: null,
         },
@@ -366,10 +386,11 @@
           success: (res) => {
             this.form.punchImg = action
             api.checkIn(this.form).then((res) => {
-              this.$refs.uToast.show({
-                type: 'success',
-                message: '打卡成功',
-              })
+              this.shwoSuccess = true
+              // this.$refs.uToast.show({
+              //   type: 'success',
+              //   message: '打卡成功',
+              // })
             })
           },
           fail: () => {
@@ -413,6 +434,35 @@
           delta: 1,
         })
       },
+      getNowTime() {
+        let now = new Date()
+        let year = now.getFullYear() //获取完整的年份(4位,1970-????)
+        let month = now.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+        let today = now.getDate() //获取当前日(1-31)
+        let hour = now.getHours() //获取当前小时数(0-23)
+        let minute = now.getMinutes() //获取当前分钟数(0-59)
+        let nowTime = ''
+        nowTime =
+          year +
+          '-' +
+          this.fillZero(month) +
+          '-' +
+          this.fillZero(today) +
+          ' ' +
+          this.fillZero(hour) +
+          ':' +
+          this.fillZero(minute)
+        return nowTime
+      },
+      fillZero(str) {
+        var realNum
+        if (str < 10) {
+          realNum = '0' + str
+        } else {
+          realNum = str
+        }
+        return realNum
+      },
     },
   }
 </script>
@@ -521,5 +571,51 @@
         }
       }
     }
+    .tips-wrap {
+      width: 100%;
+      height: 500px;
+      position: relative;
+      .tips-content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        top: 0;
+        left: 0;
+        padding: 40px 20px 20px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        .success-icon-wrap {
+          background: #fff;
+          width: 45px;
+          height: 45px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .tit {
+          font-size: 24px;
+          color: #67c23a;
+          margin: 20px 0;
+          text-align: center;
+        }
+        .confirm {
+          margin-top: 10px;
+          width: 100px;
+        }
+        .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          color: #fff;
+          font-weight: bold;
+          .mb20 {
+            margin-bottom: 20px;
+          }
+        }
+      }
+    }
   }
 </style>