操作指引修改

qingyiay

2023-09-07 491249bdf736a5f7d50417c889ad2db734b12383

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

@@ -6,6 +6,25 @@
            <view class="wait-collection"
               :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/customerbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
            </view>
            <!-- 引导页 -->
            <view class="noob-tour"
               v-if="roleType===4">
               <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 style="position: relative;top: -120px;">
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
@@ -138,50 +157,13 @@
               </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 class="previewImage-container">
               <previewImage ref="previewImage"
                  :imgs="TourImgList"
                  :saveBtn='false'></previewImage>
                  </view>
               </view>
            </u-popup>
         </view>
         <!-- 领取弹出框 -->
         <u-popup :show="show"
@@ -210,6 +192,7 @@
   import { onlineurl } from '@/api/request.js'
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   import { customerId } from '@/utils/status';
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   export default {
      props: {
         orderPlanDataStore: {
@@ -218,7 +201,8 @@
         }
      },
      components: {
         combinedTitle
         combinedTitle,
         previewImage
      },
      watch: {
         orderPlanDataStore: {
@@ -263,7 +247,12 @@
            onlineurl,
            previewImageShow: false,
            previewImageSrc: '',
            TourImgList: ['quality01.jpg', 'quality02.jpg', 'quality03.jpg', 'quality04.jpg', 'quality05.jpg'],
            TourImgList: ['https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality01.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality02.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality03.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality04.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality05.jpg'
            ],
            imgIndex: 0,
            startX: 0, // 触摸起始点的X坐标
            endX: 0, // 触摸结束点的X坐标
@@ -402,47 +391,8 @@
               .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('这是最后一张了哟')
            this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality01.jpg')
            }
         },
         closeImg() {
            this.previewImageShow = false;
         },
         /**
          * @preview 预览图片
          */
         previewImageClose() {
            this.previewImageShow = false;
         },
         previewImageOpen() {},
      }
   };
</script>
@@ -576,7 +526,9 @@
   }

   .noob-tour {
      margin-bottom: vww(80);
      margin-bottom: vww(10);
      position: relative;
      top: -120px;
   }

   .u-popup {