首页增加新手指导

qingyiay

2023-08-31 0c94177318838593ec4dd89f7f85ab92ea5a001d

 pages/driver-page/driver-index/driver-index.vue

@@ -2,9 +2,9 @@
   <view class="">
      <view class="driver-index">
         <view class="driver-index-body">
            <!-- 待领取提煤单 -->
            <!-- 待领取通知单 -->
            <view class="wait-collection"
               style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png') no-repeat;background-size:contain">
               :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/diverbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
            </view>
            <view class="collection-form">
               <view class="collection-form-item"
@@ -71,9 +71,9 @@
                  @cancel="qiangDanCancel"></u-modal>
            </view>

            <!-- 待预约提煤单 -->
            <!-- 待预约通知单 -->
            <view class="wait-appointment">
               <combined-title title="待预约提煤单"></combined-title>
               <combined-title title="待预约通知单"></combined-title>
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
@@ -149,9 +149,9 @@
               </view>
            </view>

            <!-- 已预约提煤单 -->
            <!-- 已预约通知单 -->
            <view class="Reserved">
               <combined-title title="已预约提煤单"></combined-title>
               <combined-title title="已预约通知单"></combined-title>
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
@@ -226,6 +226,53 @@
               </view>
               <view class="white-block"></view>
            </view>

            <!-- 引导页 -->
            <view class="noob-tour">
               <combined-title title="操作指引"></combined-title>
               <u-cell-group>
                  <u-cell v-if="roleType===3"
                     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/driver/'+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>
         </view>
      </view>
   </view>
@@ -234,7 +281,7 @@
<script>
   import { customerId } from '@/utils/status';
   import combinedTitle from '@/components/combined-title/combined-title.vue';

   import { onlineurl } from '@/api/request.js'
   export default {
      components: {
         combinedTitle
@@ -254,6 +301,16 @@
            immediate: true
         }
      },
      computed: {
         roleType() {
            return uni.getStorageSync('roleType');
         },
         imageStyle() {
            return {
               transition: this.transition ? 'transform 0.3s ease' : 'none'
            }
         }
      },
      data() {
         return {
            driverBillOfLoadingData: {
@@ -269,7 +326,15 @@
            fleetId: '',
            xsUserId: '',
            customerId: '',
            coalStatus: ['未称重', '称重中', '验质中', '称重完成']
            coalStatus: ['未称重', '称重中', '验质中', '称重完成', '验质完成'],
            onlineurl,
            previewImageShow: false,
            previewImageSrc: '',
            TourImgList: ['sj1.jpg', 'sj2.jpg', 'sj3.jpg', 'sj4.jpg', 'sj5.jpg', 'sj6.jpg', 'sj7.jpg'],
            imgIndex: 0,
            startX: 0, // 触摸起始点的X坐标
            endX: 0, // 触摸结束点的X坐标
            transition: false
         };
      },
      onShow() {
@@ -346,7 +411,7 @@
               url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${value.id}&yyId=${value.yyId}`
            });
         },
         // 提煤单详情
         // 通知单详情
         cardBodyClick(name) {
            uni.navigateTo({
               url: `/pages/driver-page/driver-index/bill-of-lading-details/bill-of-lading-details?orderPlanId=${name}`
@@ -357,7 +422,49 @@
            uni.navigateTo({
               url: `/pages/driver-page/appointment/appointment?takeCoalId=${value.id}&filedId=${value.filedId}&deptId=${value.deptId}&sendDate=${value.sendDate}`
            });
         }
         },
         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>
@@ -455,7 +562,7 @@
      .driver-index-body {

         // margin-bottom: vww(56);
         // 待领取提煤单
         // 待领取通知单
         .wait-collection {
            width: 100%;
            height: 600rpx;
@@ -846,6 +953,27 @@
               margin-top: vww(10);
            }
         }

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

         .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;
                        }
                     }
                  }
               }
            }
         }
      }
   }
</style>