style(mobile/promotion): 促销移动端_重构促销计划详情样式

src/mobile/views/promotion/plan/detail/index.vue

@@ -5,13 +5,15 @@
       @click-left="clickBack()"
       fixed
       placeholder>
-      <template #right v-if="!isCityManager">
+      <template #right
+        v-if="!isCityManager">
         <p class="van-nav-bar__text"
           @click="clickExamine()">
           {{ (examined ? '已' : '未') + '稽查' }}
         </p>
       </template>
     </van-nav-bar>
+    <!-- 计划详情 -->
     <van-cell-group>
       <van-cell>
         <template #title>
@@ -19,31 +21,66 @@
           <p>{{ planDetail.pattern }}</p>
         </template>
         <template #label>
-          <p class="employee"
-            v-if="planDetail.planStatus === 0">未执行</p>
-          <p v-else
-            class="employee plan-go">执行</p>
-          <p class="employee">活动日期：&emsp;{{ parseTime(planDetail.date, '{y}-{m}-{d} (周{a})') }}</p>
-          <p class="employee">归属人：&emsp;&emsp;{{ planDetail.employeeName }}（{{ planDetail.employeeNo }}）</p>
-          <p class="employee">战区：&emsp;&emsp;&emsp;{{ planDetail.orgName }}</p>
-
-          <p class="employee">系统名称：&emsp;{{ planDetail.lineName }}</p>
-          <p class="employee">店铺编码：&emsp;{{ planDetail.storeCode }}</p>
-          <p class="employee">上班时间：&emsp;{{ parseTime(planDetail.clockInTime, "{h}:{i}:{s}") }}</p>
-          <p class="employee">下班时间：&emsp;{{ parseTime(planDetail.clockOutTime, "{h}:{i}:{s}") }}</p>
-          <p class="employee">促销员薪资：¥{{ planDetail.salary }}</p>
-          <p class="employee">杂费：&emsp;&emsp;&emsp;¥{{ planDetail.incidentals }}</p>
-          <p class="employee">经销商：&emsp;&emsp;{{ planDetail.dealerName }}</p>
-          <p class="employee">创建人：&emsp;&emsp;{{ planDetail.createBy }}</p>
-          <p class="employee">修改人：&emsp;&emsp;{{ planDetail.modifyBy }}</p>
-          <p class="employee">地址：&emsp;&emsp;&emsp;{{ planDetail.addr }}</p>
+          <p :class="{ 'plan-go': planDetail.planStatus === 1 }">
+            {{ getPromotionActiveStatus(planDetail.planStatus).label }}
+          </p>
+          <p>
+            <span>活动日期：</span>
+            <span>{{ parseTime(planDetail.date, '{y}-{m}-{d} (周{a})') }}</span>
+          </p>
+          <p>
+            <span>归属人：</span>
+            <span>{{ planDetail.employeeName }}（{{ planDetail.employeeNo }}）</span>
+          </p>
+          <p>
+            <span>战区：</span>
+            <span>{{ planDetail.orgName }}</span>
+          </p>
+
+          <p>
+            <span>系统名称：</span>
+            <span>{{ planDetail.lineName }}</span>
+          </p>
+          <p>
+            <span>店铺编码：</span>
+            <span>{{ planDetail.storeCode }}</span>
+          </p>
+          <p>
+            <span>上班时间：</span>
+            <span>{{ parseTime(planDetail.clockInTime, "{h}:{i}:{s}") }}</span>
+          </p>
+          <p>
+            <span>下班时间：</span>
+            <span>{{ parseTime(planDetail.clockOutTime, "{h}:{i}:{s}") }}</span>
+          </p>
+          <p>
+            <span>促销员薪资：</span>
+            <span>¥{{ planDetail.salary }}</span>
+          </p>
+          <p>
+            <span>杂费：</span>
+            <span>¥{{ planDetail.incidentals }}</span>
+          </p>
+          <p>
+            <span>经销商：</span>
+            <span>{{ planDetail.dealerName }}</span>
+          </p>
+          <p>
+            <span>创建人：</span>
+            <span>{{ planDetail.createBy }}</span>
+          </p>
+          <p>
+            <span>修改人：</span>
+            <span>{{ planDetail.modifyBy }}</span>
+          </p>
+          <p>
+            <span>地址：</span>
+            <span>{{ planDetail.addr }}</span>
+          </p>
         </template>
       </van-cell>
     </van-cell-group>
     <!-- 任务列表 -->
-    <van-pull-refresh v-model="refreshLoading"
-      :pull-distance="100"
-      @refresh="onRefresh">
     <van-list v-model:loading="loading"
       :finished="finished"
       :immediate-check="false"
@@ -52,11 +89,10 @@
       <van-cell-group inset
         v-if="planList?.length > 0">
         <van-cell v-for="item in planList"
-            :key="item.id"
-            label-class="image-cell">
+          :key="item.id">
           <template #title>
             <p>{{ item.temporaryName }}</p>
-              <p class="gray_title">参考地址：{{ item.province + item.city + item.addr }}</p>
+            <p>参考地址：{{ item.province + item.city + item.addr }}</p>
           </template>
           <template #label>
             <div class="item"
@@ -78,8 +114,7 @@
         </van-cell>
       </van-cell-group>
     </van-list>
-    </van-pull-refresh>
-
+    <!-- 图片预览 -->
     <van-image-preview v-model:show="show"
       :images="images"
       :start-position="startIndex"
@@ -93,6 +128,7 @@
 import { getPlanDetailAPI, createExamine } from '@/api'
 import { parseTime } from '@/utils'
 import userStore from '@/store/modules/user'
+import { getPromotionActiveStatus } from '@/dicts'
 
 const { proxy } = getCurrentInstance()
 const isCityManager = ref(userStore().promotionIdentity)
@@ -181,15 +217,6 @@ const getPlanDetail = async () => {
       title: '考勤打卡照片',
       list: clockList
     }])
-    // 把数组里图片合并成一个大数组
-    // const allPhotoList = ref([])
-    // photoDialogList.value.forEach(o => {
-    //   if (o.list) {
-    //     allPhotoList.value.push(...o.list)
-    //     allPhotoList.value.push(...o.list)
-    //     allPhotoList.value.push(...o.list)
-    //   }
-    // })
     return {
       id: o.reported.id, // 用的是促销上报的id，不是打卡的 id 
       province: o.reported.province, // 省份
@@ -199,6 +226,8 @@ const getPlanDetail = async () => {
       photoList: photoDialogList, // 照片列表
     }
   })
+
+  console.log(planList)
 }
 getPlanDetail()
 
@@ -226,14 +255,6 @@ const clickExamine = async () => {
   })
 }
 
-const refreshLoading = ref(false)
-const onRefresh = () => {
-  refreshLoading.value = true
-  setTimeout(() => {
-    refreshLoading.value = false
-    getPlanDetail()
-  }, 1000)
-}
 const loading = ref(false)
 const finished = ref(false)
 const onLoad = () => {
@@ -261,52 +282,89 @@ const onChange = (ind) => {
   index.value = ind
 }
 
-
 </script>
 
-<style scoped>
-p {
-  margin: 0;
-}
-
-.plan-go {
-  color: #39bb74;
-}
+<style scoped
+  lang="scss">
 
-.mobile-container {
+  .mobile-container {
     background: #f5f5f5;
     min-height: 100vh;
 
+    /* 计划详情 */
     .van-cell-group {
       background: #f5f5f5;
+
+      .van-cell__title {
+        p {
+          font-size: 14px;
+          margin: 0 0 5px;
+        }
       }
 
-  .van-list {
-    margin-top: 20px;
-    min-height: 100vh;
+      .van-cell__label {
+        .plan-go {
+          color: #39bb74;
+        }
 
-    ::v-deep(.van-cell:nth-child(n+2)) {
-      margin-top: 20px;
+        p {
+          display: flex;
+
+          span:first-child {
+            width: 100px;
+            display: inline-block;
           }
 
-    ::v-deep(.van-cell) {
-      .item {
-        margin-top: 20px;
+          span:nth-child(2) {
+            flex: 1;
           }
         }
+
       }
 
-  ::v-deep(.van-cell__title) {
-    flex: 3;
+    }
+
+    /* 任务列表 */
+    .van-list {
+      margin-top: 20px;
+      overflow: hidden;
+
+      .van-cell-group {
+        margin: 0 20px;
+        width: 100%;
+
+        /* 每个上报人组 */
+        ::v-deep(.van-cell) {
+          width: calc(100% - 40px);
+
+          .van-cell__title {
             width: 100%;
 
+            .van-cell__label {
+
+              /* 每个照片组（推广试吃，推荐成交） */
+              .item {
+                margin-top: 20px;
+
+                /* 横向图片容器 */
                 .image-wrap {
                   /* 强制内容在一行 */
                   white-space: nowrap;
-      flex: 1;
                   overflow: scroll;
                   overflow-y: hidden;
 
+
+                  .small-item {
+                    width: 125px;
+                    text-align: center;
+                    display: inline-block;
+
+                    .van-image {
+                      height: 135px;
+                    }
+
+                  }
+
                   &::-webkit-scrollbar-track {
                     background-color: transparent;
                   }
@@ -316,43 +374,18 @@ p {
                     margin: 0 10px;
                   }
                 }
-
               }
-
-  ::v-deep(.van-cell__label) {
-    flex: 1;
-    width: 100%;
             }
-}
-
-::v-deep(.employee) {
-  margin-bottom: 5px !important;
-}
-
-::v-deep(.van-popup--right) {
-  width: 85% !important;
-}
-
-::v-deep(.van-cell__label) {
-  font-size: 14px !important;
-}
-
-.small-item {
-  width: 125px;
-  text-align: center;
-  display: inline-block;
+          }
 
-  .van-image {
-    height: 135px;
+          &:nth-child(n+2) {
+            margin-top: 20px;
+          }
+        }
+      }
+    }
   }
-}
 
 
-.gray_title {
-  color: gray;
-}
 
-.black_title {
-  color: black;
-}
 </style>
\ No newline at end of file