首页增加新手指导

qingyiay

2023-08-31 0c94177318838593ec4dd89f7f85ab92ea5a001d

首页增加新手指导

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

@@ -138,6 +138,51 @@
                    </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"
                @close="close"
@@ -215,7 +260,14 @@
                // 剩余的通知单数量
                carNumSurplus: '',
                canClick: false,
                onlineurl: ''
                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() {},
@@ -349,6 +401,48 @@
                uni
                    .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>
@@ -481,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;

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

@@ -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>
@@ -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: {
@@ -271,6 +328,13 @@
                customerId: '',
                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() {
@@ -358,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>
@@ -847,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>