首页增加新手指导

qingyiay

2023-08-31 0c94177318838593ec4dd89f7f85ab92ea5a001d

 pages/customer-page/customer-index/customer-index.vue

@@ -2,9 +2,9 @@
   <view class="">
      <view class="customer-index">
         <view class="customer-index-body">
            <!-- 待领取和转发提煤单 -->
            <!-- 待领取和转发通知单 -->
            <view class="wait-collection"
               style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain">
               :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/customerbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
            </view>
            <view style="position: relative;top: -120px;">
               <u-empty mode="data"
@@ -22,7 +22,8 @@
                     <view class="dispatch-receive">
                        <view class="dispatch">{{ item.filedName||'' }}</view>
                     </view>
                     <view class="point-number">
                     <view class="point-number"
                        v-if="roleType == 1">
                        <text class="residue">{{ item.cars2||'' }}</text>
                        <text>/{{ item.carNum ||''}}</text>
                     </view>
@@ -36,17 +37,17 @@
                     </view>
                  </view>
                  <view class="third-line">
                     <view class="time-icon">
                     <!-- <view class="time-icon">
                        <view
                           style="width: 24rpx;height: 24rpx;li ne-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/carNO.png') no-repeat;background-size: cover">
                           :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carNO.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                        </view>
                     </view>
                     <view class="car-num">{{ item.carNos||''}}</view>
                     </view> -->
                     <view class="car-num">{{ item.code||''}}</view>
                  </view>
                  <view class="third-line">
                     <view class="time-icon">
                        <view
                           style="width: 24rpx;height: 24rpx;li ne-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                           :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                        </view>
                     </view>
                     <view class="send-date">{{ item.sendDate }}</view>
@@ -62,18 +63,18 @@
                        v-if="item.orderType!=='外购'">
                        <view class="button-image">转发</view>
                     </view>
                     <view class="forward"
                     <!-- <view class="forward"
                        @click.stop="validateClick(index)"
                        v-else>
                        v-if='roleType===4'>
                        <view class="button-image">验质</view>
                     </view>
                     </view> -->
                  </view>
               </view>
            </view>

            <!-- 历史提煤单 -->
            <!-- 历史通知单 -->
            <view class="history-numbers">
               <combined-title title="历史提煤单"></combined-title>
               <combined-title title="历史通知单"></combined-title>
               <scroll-view :scroll-top="scrollTop"
                  scroll-y="true"
                  class="scroll-Y"
@@ -110,14 +111,14 @@
                              v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
                        </view>
                        <view class="third-line">
                           <view class="third-line_text">提煤单个数:</view>
                           <view class="third-line_text">通知单个数:</view>
                           <view class="third-line_num">{{ item.tmCount }}</view>
                        </view>
                     </view>
                     <view class="fourth">
                        <view class="fourth-icon">
                           <view
                              style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                              :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                           </view>
                        </view>
                        <view class="senddate">{{ item.sendDate }}</view>
@@ -125,7 +126,7 @@
                     <view class="fourth">
                        <view class="fourth-icon">
                           <view
                              style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;">
                              :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carnNUm.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'26rpx',height:'26rpx',lineHeight:'26rpx'}">
                           </view>
                        </view>
                        <view class="senddate">{{ item.orderCode }}</view>
@@ -136,6 +137,51 @@
                  <view class="white-block"></view>
               </scroll-view>
            </view>
         </view>
         <!-- 引导页 -->
         <view class="noob-tour">
            <combined-title title="操作指引"></combined-title>
            <u-cell-group>
               <u-cell title="新手指引"
                  name='1'
                  :clickable="true"
                  @click="noobTour">
                  <u-badge type="primary"
                     value="01"
                     slot='icon'></u-badge>
                  <u-icon slot="value"
                     name="arrow-right"
                     size="30"
                     color="#b8b8b8"></u-icon>
               </u-cell>
            </u-cell-group>
         </view>
         <!-- 图片预览弹出框 -->
         <view class="previewImage-container">
            <u-popup :show="previewImageShow"
               mode="center"
               @close="previewImageClose"
               @open="previewImageOpen"
               :closeable='true'>
               <view class="image-container"
                  @touchstart="touchStart"
                  @touchmove="touchMove"
                  @touchend="touchEnd">
                  <u--image :src="onlineurl+'/appimg/image/tour/quality/'+TourImgList[imgIndex]"
                     width="400px"
                     height="700px"
                     @click='closeImg'
                     mode='widthFix'
                     :style="imageStyle">
                     <view slot="error"
                        style="font-size: 48rpx;">加载失败</view>
                  </u--image>
                  <view class=""
                     style="text-align: center;background-color: rgba(0, 0, 0, 0.5);color: white;">
                     {{imgIndex+1}}/{{TourImgList.length}}张
                  </view>
               </view>
            </u-popup>
         </view>
         <!-- 领取弹出框 -->
         <u-popup :show="show"
@@ -161,7 +207,7 @@
</template>

<script>
   import card from '@/components/card/card.vue';
   import { onlineurl } from '@/api/request.js'
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   import { customerId } from '@/utils/status';
   export default {
@@ -172,7 +218,6 @@
         }
      },
      components: {
         card,
         combinedTitle
      },
      watch: {
@@ -187,12 +232,12 @@
      computed: {
         roleType() {
            return uni.getStorageSync('roleType');
         }
         },
      },
      data() {
         return {
            orderPlanData: [],
            show: false, // 领取提煤单弹出框
            show: false, // 领取通知单弹出框
            receiveNum: null,
            getOrderNum: {
               num: '',
@@ -212,9 +257,17 @@
            showMoreData: false,
            cars2: "",
            carNum: "",
            // 剩余的提煤单数量
            // 剩余的通知单数量
            carNumSurplus: '',
            canClick: false
            canClick: false,
            onlineurl,
            previewImageShow: false,
            previewImageSrc: '',
            TourImgList: ['quality01.jpg', 'quality02.jpg', 'quality03.jpg', 'quality04.jpg', 'quality05.jpg'],
            imgIndex: 0,
            startX: 0, // 触摸起始点的X坐标
            endX: 0, // 触摸结束点的X坐标
            transition: false
         };
      },
      onLoad() {},
@@ -225,6 +278,7 @@
         init() {
            this.GetOrderPlan();
            this.getJhOrderPlanDataPage();
            this.onlineurl = onlineurl;
         },
         // 获取发运计划列表
         GetOrderPlan() {
@@ -236,7 +290,7 @@
               }
            });
         },
         // 获取历史提煤单
         // 获取历史通知单
         getJhOrderPlanDataPage() {
            uni.showLoading({
               title: '加载中'
@@ -261,7 +315,7 @@
            this.pageCurrent++;
            this.getJhOrderPlanDataPage();
         },
         //fix 点击提煤单返回会增加重复数据
         //fix 点击通知单返回会增加重复数据
         ArrSet(Arr, id) {
            var obj = {};
            const arrays = Arr.reduce((setArr, item) => {
@@ -309,7 +363,7 @@
          */
         receiveClick(item) {
            this.show = true;
            this.getOrderNum.id = item.id; // 获取领取提煤单的id
            this.getOrderNum.id = item.id; // 获取领取通知单的id
            this.cars2 = item.cars2
            this.carNum = item.carNum
         },
@@ -322,15 +376,15 @@
            console.log('输入框', e);
            this.canClick = e > (this.carNum - this.cars2)
            if (this.canClick) {
               this.$u.toast('已超过当前日计划提煤单数量,请重新输入')
               this.$u.toast('已超过当前日计划通知单数量,请重新输入')
            }
         },
         // 提煤单详情
         // 通知单详情
         cardBodyClick(v) {
            uni
               .navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
               .navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2?v.cars2:""}` });
         },
         // 点击历史提煤单获取详情
         // 点击历史通知单获取详情
         faYundetail(v) {
            uni.navigateTo({
               url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&coalName=${v.coalName}&deptName=${v.deptName}`
@@ -345,8 +399,50 @@
         // 验质
         validateClick(index) {
            uni
               .navigateTo({ url: `/pages/driver-page/driver-index/bill-of-lading-details/weighDetail/weighDetail?index=${index}` });
               .navigateTo({ url: `/pages/driver-page/driver-index/bill-of-lading-details/selectOrderPlan/selectOrderPlan?index=${index}` });
         },
         noobTour(v) {
            this.$nextTick(() => {
               this.previewImageShow = true
               this.imgIndex = 0
            })
         },
         touchStart(event) {
            this.startX = event.touches[0].clientX;
         },

         touchMove(event) {
            this.endX = event.touches[0].clientX;
         },
         touchEnd(event) {
            const startX = this.startX;
            const endX = this.endX;
            if (startX - endX > 50 && this.imgIndex < this.TourImgList.length - 1) {
               this.transition = true;
               this.imgIndex++
               setTimeout(() => {
                  this.transition = false;
               }, 300);
            } else if (endX - startX > 50 && this.imgIndex > 0) {
               this.transition = true;
               this.imgIndex--
               setTimeout(() => {
                  this.transition = false;
               }, 300);
            } else if (this.imgIndex === this.TourImgList.length - 1) {
               return this.$u.toast('这是最后一张了哟')
            }
         },
         closeImg() {
            this.previewImageShow = false;
         },
         /**
          * @preview 预览图片
          */
         previewImageClose() {
            this.previewImageShow = false;
         },
         previewImageOpen() {},
      }
   };
</script>
@@ -479,6 +575,27 @@
      }
   }

   .noob-tour {
      margin-bottom: vww(80);
   }

   .u-popup {
      .u-transition {
         .u-popup__content {
            .editDriverPopup-container-box {}

            //closeIcon
            .u-popup__content__close--top-right {
               .u-icon {
                  .u-icon__icon {
                     font-size: vww(20) !important;
                  }
               }
            }
         }
      }
   }

   ::v-deep.customer-index {
      width: 100%;
      margin: 0 auto;
@@ -590,10 +707,17 @@
                  }

                  .car-num {
                     color: #515151;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }

                  .time-icon {
                     width: 24rpx;
                     height: 24rpx;
                     line-height: 24rpx;
                  }
               }

               .fourth-line {