From 491249bdf736a5f7d50417c889ad2db734b12383 Mon Sep 17 00:00:00 2001 From: qingyiay <2386314947@qq.com> Date: 星期四, 07 九月 2023 10:22:07 +0800 Subject: [PATCH] 操作指引修改 --- pages/customer-page/customer-index/customer-index.vue | 124 ++++++++++++---------------------------- 1 files changed, 38 insertions(+), 86 deletions(-) diff --git a/pages/customer-page/customer-index/customer-index.vue b/pages/customer-page/customer-index/customer-index.vue index fc96467..b1c1aff 100644 --- a/pages/customer-page/customer-index/customer-index.vue +++ b/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> - </view> - </u-popup> + <view class="previewImage-container"> + <previewImage ref="previewImage" + :imgs="TourImgList" + :saveBtn='false'></previewImage> + </view> </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('杩欐槸鏈�鍚庝竴寮犱簡鍝�') - } - }, - closeImg() { - this.previewImageShow = false; - }, - /** - * @preview 棰勮鍥剧墖 - */ - previewImageClose() { - this.previewImageShow = false; - }, - previewImageOpen() {}, + this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/quality/quality01.jpg') + } } }; </script> @@ -576,7 +526,9 @@ } .noob-tour { - margin-bottom: vww(80); + margin-bottom: vww(10); + position: relative; + top: -120px; } .u-popup { -- Gitblit v1.9.1