fear:增加验质图片放大功能

yangan

2024-02-05 fb20d356a9d1415816102a2610af383feaea5d3b

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

@@ -73,6 +73,15 @@
                        <view class="coal-name">{{ item.coalName }}</view>
                     </view>
                  </view>
                  <!-- 创建时间 -->
                  <view class="created-box">
                        <view class="clock-create">
                           <view class="time-icon"><u-icon name="clock"
                                 color="#515151"
                                 size="40"></u-icon></view>
                                 <text class="create-date"> {{ item.createTime }}</text>
                        </view>
                     </view>
                  <view class="fourth-line"
                     @click.stop="qiangDanBtn(item)"
                     v-if="item.carNum - item.taskNum !== 0">
@@ -97,13 +106,18 @@
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
                  iconSize="1000"
                  text="暂无数据"
                  v-if="driverBillOfLoadingData.list3 ? (driverBillOfLoadingData.list3.length == 0 ? true : false) : true"></u-empty>

               <view class="appointment-form">
                  <view class="appointment-form-item"
                     v-for="(item, index) in driverBillOfLoadingData.list3"
                     :key="index">
                     :key="index"
                     @click.stop="list3CardIconClick(item)"
                     >
							
                     <view class="main-divider"></view>
                     <view class="orderCode">订单号：{{ item.orderCode }}</view>	
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
@@ -160,8 +174,17 @@
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
                     <!-- 创建时间 -->
                     <view class="created-box">
                        <view class="clock-create">
                           <view class="time-icon"><u-icon name="clock"
                                 color="#515151"
                                 size="40"></u-icon></view>
                                 <text class="create-date"> {{ item.createTime }}</text>
                        </view>
                     </view>
                     <view class="fourth-line"
                        @click="toAppointmentClick(item)">
                        @click.stop="toAppointmentClick(item)">
                        <view class="button-img">立即预约</view>
                     </view>
                  </view>
@@ -175,6 +198,7 @@
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
                  iconSize="1000"
                  text="暂无数据"
                  v-if="driverBillOfLoadingData.list2 ? (driverBillOfLoadingData.list2.length == 0 ? true : false) : true"></u-empty>
               <view class="appointment-form">
                  <view class="appointment-form-item"
@@ -182,6 +206,7 @@
                     :key="index"
                     @click="list3CardIconClick(item)">
                     <view class="main-divider"></view>
                     <view class="orderCode">订单号：{{ item.orderCode }}</view>	
                     <view class="first-line">
                        <view class="main-information">
                           <view class="sign">装</view>
@@ -224,6 +249,15 @@
                                 size="40"></u-icon></view>
                        </view>
                     </view>
                     <!-- 创建时间 -->
                     <view class="created-box">
                        <view class="clock-create">
                           <view class="time-icon"><u-icon name="clock"
                                 color="#515151"
                                 size="40"></u-icon></view>
                                 <text class="create-date"> {{ item.createTime }}</text>
                        </view>
                     </view>
                     <view class="status">
                        <u-tag :text="coalStatus[item.statusWeigh] || ''"
                           plain>
@@ -241,6 +275,8 @@
                           <!-- <view class="order-type">{{ item.orderType }}</view> -->
                        </view>
                     </view>
                     <view class="fourth-line" style="opacity: 0;">
                     </view>
                  </view>
               </view>
               <view class="white-block"></view>
@@ -248,7 +284,7 @@
            <!-- 图片预览弹出框 -->
            <view class="previewImage-container">
               <previewImage ref="previewImage"
                  :imgs="TourImgList"
                  :imgs="driverTourImgList"
                  :saveBtn='false'></previewImage>
            </view>
         </view>
@@ -262,6 +298,8 @@
   import { onlineurl } from '@/api/request.js'
   import { BaseUrl } from '@/api/publicInterface.js'
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   import { mapState } from 'vuex';
   import { Debounce } from '../../../utils/util';
   export default {
      components: {
         combinedTitle,
@@ -283,6 +321,7 @@
         },
      },
      computed: {
         ...mapState(['driverTourImgList']),
         roleType() {
            return uni.getStorageSync('roleType');
         },
@@ -302,19 +341,16 @@
            fleetId: '',
            xsUserId: '',
            customerId: '',
            coalStatus: ['未称重', '称重中', '验质中', '称重完成', '验质完成'],
            coalStatus: ['未称重', '称重中', '验质中', '称重完成', '处理完成'],
            onlineurl,
            TourImgList: ['https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj1.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj2.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj3.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj4.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj5.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj6.jpg',
               'https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj7.jpg'
            ],
            phone: "",
            isFirstLogin: true //是否是第一次登录
         };
      },
      mounted() {
         // this.TourImgList = TourImgList
         this.getLogOn()
			
      },
      onShow() {
         this.init();
@@ -330,7 +366,6 @@
         },
         init() {
            this.qiangDanList();
            this.getLogOn()
         },
         // 司机首页列表
         qiangDanList() {
@@ -343,7 +378,7 @@
            });
         },
         // 抢单按钮
         qiangDanBtn(value) {
         qiangDanBtn:Debounce(function(value){
            if (value.tmcCount == '0') {
               this.qiangDan(value.orderPlanId, value.fleetId, value.customerId === null ? '0' : value.customerId,
                  value.xsUserId === null ? '0' : value.xsUserId);
@@ -355,7 +390,9 @@
               this.qiangDanShow = true;
               this.qiangDanContent = `已抢${value.tmcCount}单，确定抢单？`;
            }
         },
         } ,500)
				
         ,
         // 抢单模态框
         qiangDanConfirm() {
            this.qiangDanContent = '';
@@ -413,7 +450,6 @@
               uni.request({
                  url: `${BaseUrl}/admin/log/getLogOnType?phone=${this.phone}`,
                  success: res => {
                     console.log(res, '日志');
                     // res.data.data 为1 代表第一次登录  为0取消学习指引 为2 代表存在
                     if (res.data.data === 1) {
                        this.noobTour()
@@ -432,6 +468,24 @@

<style lang="scss"
   scoped>
    .created-box{
      display: flex;
      position: absolute;
      bottom: 20rpx;
          left: 35rpx;
      .clock-create{
         display: flex;
      }
      .create-date{
         height: 24rpx;
         line-height: 37rpx;
         font-size: 28rpx;
         font-weight: 300;
         color: #515151;
         margin-left: 28rpx;
      }

   }
   @mixin formItem {
      width: vww(345);
      height: vww(150);
@@ -460,6 +514,16 @@
      display: flex;
      justify-content: space-between;
      align-items: center;
      .clock-create{
          width: 100%;
         height: 42rpx;
         margin-right: 100rpx;
         line-height: 42rpx;
         display: flex;
         justify-content: space-between;
         align-items: center;
         justify-content: flex-start;
      }

      .send-date {
         width: 148rpx;
@@ -467,6 +531,13 @@
         line-height: 24rpx;
         font-size: 28rpx;
         font-weight: 300;
         color: #515151;
      }
      .create-date {
         line-height: 24rpx;
         font-size: 28rpx;
         font-weight: 300;
         margin-left: 28rpx;
         color: #515151;
      }

@@ -768,18 +839,20 @@

            .appointment-form-item {
               @include formItem;
               height: vww(220);
               height: vww(240);
               justify-content: space-between;
               overflow: hidden;

               .main-divider {
                  width: 560rpx;
                  height: 1rpx;
                  background: #e3e3e3;
                  position: absolute;
                  top: 122rpx;
                  top: 200rpx;
                  left: 128rpx;
               }
               .orderCode{
                  padding: 10px;
               }

               .first-line {
                  position: relative;