上传照片添加loading效果

pages/home/index.vue

@@ -26,13 +26,15 @@
         </uni-forms-item>
       </template>
       <uni-forms-item label="当前位置">
+        <view class="add-formitem">
           <view class="address">
             {{ address }}
+          </view>
           <uni-icons type="reload"
             class="u-icon"
             size="16"
             ref="myIcon"
-            style="margin-left: 20px;"
+            style="margin-left: 5rpx;"
             @click="refreshAdd">
             刷新
           </uni-icons>
@@ -243,25 +245,26 @@ export default {
         return
       }
       // 判断是否到了上班打卡时间
-      if (type === 1) {
-        const { clockInTime } = planObj
-        const time = parseTime(new Date(clockInTime), '{h}:{m}:{s}')
-        const isClock = checkStartLessEndTime(time, parseTime(new Date(), '{h}:{m}:{s}'))
-        if (!isClock) {
-          this.$modal.msgError('未到上班打卡时间')
-          return
-        }
-      }
+      // if (type === 1) {
+      //   const { clockInTime } = planObj
+      //   const time = parseTime(new Date(clockInTime), '{h}:{i}:{s}')
+      //   const isClock = checkStartLessEndTime(time, parseTime(new Date(), '{h}:{i}:{s}'))
+      //   if (!isClock) {
+      //     this.$modal.msgError('未到上班打卡时间')
+      //     return
+      //   }
+      // }
       // 判断是否能下班
       if (type === 4) {
         // 下班先提交促销上班看看是否通过后台校验
         const res = await getOnWorkCardStatusAPI(this.onWorkRecord.reportedId)
         if (res.code !== 0) return
       }
+
       // 判断确定下班
       let wantClockOut = false
       if (type === 4) {
-        await this.$modal.confirm('你真的确定下班吗？').then(() => {
+        await this.$modal.confirm('下班后无法再修改促销照片').then(() => {
           wantClockOut = true
         })
       }
@@ -289,9 +292,9 @@ export default {
       try {
         // 打卡
         await getOnWorkCardAPI(attObj)
-        if (type === 1) {
+        if (type === 1 && !this.onWorkRecord.id) {
           // 创建上报记录-才算完成打卡
-          const res = await createOnWorkPlanAPI({
+          await createOnWorkPlanAPI({
             temporaryId: this.$store.getters.user.id, // 促销员 ID
             temporaryName: this.$store.getters.user.name, // 促销员姓名
           })
@@ -362,7 +365,6 @@ export default {
         res.data.clockOutTime = parseTime(new Date(res.data.clockOutTime), '{h}:{i}:{s}')
       }
       this.onWorkRecord = res.data
-      console.log(this.onWorkRecord)
       this.isLoading = false
     }
   }
@@ -371,11 +373,34 @@ export default {
 
 <style scoped
   lang="scss">
+  ::v-deep .uni-forms-item__label text {
+    font-size: 30rpx;
+  }
+
+  ::v-deep .checklist-text {
+    font-size: 30rpx !important;
+  }
+
+  ::v-deep .uni-combox__input-box {
+    input {
+      font-size: 30rpx !important;
+    }
+
+    input::placeholder {
+      font-size: 30rpx !important;
+    }
+
+    .uni-combox__input-plac {
+      font-size: 30rpx !important;
+    }
+  }
+
   ::v-deep .uni-forms {
     padding: 10px;
 
     .uni-forms-item__label {
       padding: 0;
+      width: 135rpx !important;
     }
 
     .uni-forms-item {
@@ -383,7 +408,7 @@ export default {
     }
 
     .uni-forms-item__content {
-      margin-left: 20px;
+      margin-left: 10rpx;
     }
   }
 
@@ -453,8 +478,28 @@ export default {
             font-size: 26rpx;
           }
         }
+      }
+    }
+  }
 
+  .add-formitem {
+    display: flex;
+    align-items: center;
   }
+
+  .address {
+    white-space: nowrap;
+    /* 强制文本不换行 */
+    overflow: hidden;
+    /* 隐藏溢出的文本 */
+    text-overflow: ellipsis;
+    /* 溢出的文本以省略号显示 */
+    font-size: 30rpx;
+    width: 460rpx;
   }
+
+  ::v-deep .uni-icons {
+    width: 100rpx;
+    font-size: 30rpx !important;
   }
 </style>
\ No newline at end of file

pages/register.vue

@@ -7,6 +7,7 @@
       <uni-forms-item label="头像"
         required
         name="avatarUrl">
+        <view class="header_wrap">
           <button class="avatar"
             open-type="chooseAvatar"
             @chooseavatar="chooseavatarFn">
@@ -17,12 +18,13 @@
               class="avatar_img"
               src="/static/default_user.jpg">
           </button>
+        </view>
       </uni-forms-item>
       <uni-forms-item label="姓名"
         required
         name="name">
         <uni-easyinput v-model="formData.name"
-          placeholder="请输入姓名" />
+          placeholder="请填写姓名" />
       </uni-forms-item>
       <uni-forms-item label="身份证">
         <view class="id_card">
@@ -140,10 +142,33 @@ page {
   background-color: #ffffff;
 }
 
+::v-deep .header_wrap {
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid #d8d8d8;
+}
+
+::v-deep .uni-forms-item__label text {
+  font-size: 30rpx;
+}
+
+::v-deep .uni-easyinput__content-input {
+  font-size: 30rpx !important;
+}
+
+::v-deep .uni-easyinput__placeholder-class {
+  font-size: 30rpx !important;
+}
+
+.file-title {
+  font-size: 30rpx !important;
+}
+
 .normal-register-container {
   width: 100%;
   padding: 40rpx;
 
+
   button {
     padding-left: 0 !important;
   }
@@ -196,9 +221,14 @@ page {
 
   // 注册提示信息
   .reg-info {
+    color: #999;
     text-align: center;
     margin-top: 30rpx;
     font-size: 30rpx;
   }
 }
+
+::v-deep .uni-file-picker {
+  margin-top: 5rpx !important;
+}
 </style>

pages/work/index.vue

@@ -56,23 +56,22 @@ export default {
     }
   },
   created() {
-    this.getOnWorkRecordFn()
     this.getPromotionPhotoFn()
   },
   onShow() {
-    this.getPromotionPhotoFn() 
+    this.getOnWorkRecordFn()
   },
   methods: {
     // 获取促销员任务列表
     async getOnWorkRecordFn() {
       const res = await getOnWorkRecordAPI(this.$store.getters.user.id)
-      console.log(res)
       this.storeName = res.data?.storeName
       this.isOutTime = res.data?.clockOutTime ? true : false // 下班时间
       this.activityReportedId = res.data?.reportedId // 活动上报 ID
     },
     // 获取推广照片列表
     async getPromotionPhotoFn() {
+      this.$modal.loading("加载图片列表中...")
       const res = await getPromotionPhotoRecordAPI(this.$store.getters.user.id)
       if (res.data && res.data.tgscPhotoUrls) {
         this.afterTryFileList = res.data.tgscPhotoUrls?.map(o => ({
@@ -93,9 +92,11 @@ export default {
           type: 'image'
         }))
       }
+      this.$modal.closeLoading()
     },
     // 推广试吃
     async afterTry(event) {
+      this.$modal.loading("上传中...")
       const photoUrl = await this.uploadPromotionPhoto(event)
       photoUrl.forEach(url => {
         this.afterTryFileList.push({
@@ -104,10 +105,12 @@ export default {
         })
       })
       // 提交照片给后台
-      this.submitPhoto()
+      await this.submitPhoto()
+      this.$modal.closeLoading()
     },
     // 推广互动
     async afterInter(event) {
+      this.$modal.loading("上传中...")
       const photoUrl = await this.uploadPromotionPhoto(event)
       photoUrl.forEach(url => {
         this.afterInterFileList.push({
@@ -115,10 +118,13 @@ export default {
           type: 'image'
         })
       })
-      this.submitPhoto()
+      // 提交照片给后台
+      await this.submitPhoto()
+      this.$modal.closeLoading()
     },
     // 推广成交
     async afterDeal(event) {
+      this.$modal.loading("上传中...")
       const photoUrl = await this.uploadPromotionPhoto(event)
       photoUrl.forEach(url => {
         this.afterDealFileList.push({
@@ -126,9 +132,11 @@ export default {
           type: 'image'
         })
       })
-      this.submitPhoto()
+      // 提交照片给后台
+      await this.submitPhoto()
+      this.$modal.closeLoading()
     },
-    // 上传推广照片
+    // 上传推广照片到阿里云
     async uploadPromotionPhoto(event) {
       const { file } = event.detail;
       let fileList = []
@@ -158,7 +166,7 @@ export default {
         tghdPhotoUrls: [...this.afterInterFileList.map(o => o.url)],
         tgcjPhotoUrls: [...this.afterDealFileList.map(o => o.url)]
       })
-      console.log(res)
+      return Promise.resolve(res)
     },
     // 删除照片
     deleteTry(event) {
@@ -181,6 +189,11 @@ export default {
 
 <style lang="scss"
   scoped>
+
+  ::v-deep .uni-forms-item__label text {
+    font-size: 30rpx;
+  }
+
   ::v-deep .uni-forms {
     padding: 10px;
 
@@ -222,14 +235,14 @@ export default {
     flex-direction: column;
 
     .store_name {
-      font-size: 28rpx;
+      font-size: 30rpx;
       display: inline-block;
       color: #7b7b7b;
       padding-left: 30rpx;
     }
 
     .title {
-      font-size: 26rpx;
+      font-size: 30rpx;
       padding: 10px;
     }