| | |
| | | <view class="wait-collection" |
| | | :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/diverbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }"> |
| | | </view> |
| | | <!-- 引导页 --> |
| | | <view class="noob-tour" |
| | | v-if="roleType===3&&isFirstLogin"> |
| | | <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="collection-form"> |
| | | <view class="collection-form-item" |
| | | v-for="(item, index) in driverBillOfLoadingData.list1" |
| | |
| | | <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"> |
| | |
| | | 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> |
| | |
| | | <!-- <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> |
| | |
| | | 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" |
| | |
| | | :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> |
| | |
| | | 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> |
| | |
| | | <!-- <view class="order-type">{{ item.orderType }}</view> --> |
| | | </view> |
| | | </view> |
| | | <view class="fourth-line" style="opacity: 0;"> |
| | | </view> |
| | | </view> |
| | | </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> |
| | | <previewImage ref="previewImage" |
| | | :imgs="driverTourImgList" |
| | | :saveBtn='false'></previewImage> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | import { customerId } from '@/utils/status'; |
| | | import combinedTitle from '@/components/combined-title/combined-title.vue'; |
| | | 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 |
| | | combinedTitle, |
| | | previewImage |
| | | }, |
| | | props: { |
| | | indexdriverBillOfLoadingData: { |
| | |
| | | }, |
| | | deep: true, |
| | | immediate: true |
| | | } |
| | | }, |
| | | }, |
| | | computed: { |
| | | ...mapState(['driverTourImgList']), |
| | | roleType() { |
| | | return uni.getStorageSync('roleType'); |
| | | }, |
| | | imageStyle() { |
| | | return { |
| | | transition: this.transition ? 'transform 0.3s ease' : 'none' |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | 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 |
| | | phone: "", |
| | | isFirstLogin: true //是否是第一次登录 |
| | | }; |
| | | }, |
| | | mounted() { |
| | | // this.TourImgList = TourImgList |
| | | this.getLogOn() |
| | | |
| | | }, |
| | | onShow() { |
| | | this.init(); |
| | |
| | | }); |
| | | }, |
| | | // 抢单按钮 |
| | | 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); |
| | |
| | | this.qiangDanShow = true; |
| | | this.qiangDanContent = `已抢${value.tmcCount}单,确定抢单?`; |
| | | } |
| | | }, |
| | | } ,500) |
| | | |
| | | , |
| | | // 抢单模态框 |
| | | qiangDanConfirm() { |
| | | this.qiangDanContent = ''; |
| | |
| | | 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 |
| | | noobTour() { |
| | | this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj1.jpg') |
| | | }, |
| | | getLogOn() { |
| | | this.$reqGet('getUserEntity').then(res => { |
| | | this.phone = res.data.phone |
| | | }).then(() => { |
| | | uni.request({ |
| | | url: `${BaseUrl}/admin/log/getLogOnType?phone=${this.phone}`, |
| | | success: res => { |
| | | // res.data.data 为1 代表第一次登录 为0取消学习指引 为2 代表存在 |
| | | if (res.data.data === 1) { |
| | | this.noobTour() |
| | | } else if (res.data.data === 2) { |
| | | this.isFirstLogin = true |
| | | } else { |
| | | this.isFirstLogin = false |
| | | } |
| | | } |
| | | }); |
| | | }) |
| | | }, |
| | | 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> |
| | | |
| | | <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); |
| | |
| | | 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; |
| | |
| | | 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; |
| | | } |
| | | |
| | |
| | | text-align: center; |
| | | line-height: vww(40); |
| | | } |
| | | } |
| | | |
| | | .fade-enter-active, |
| | | .fade-leave-active { |
| | | transition: opacity 0.5s; |
| | | } |
| | | |
| | | .fade-enter, |
| | | .fade-leave-to { |
| | | opacity: 0; |
| | | } |
| | | |
| | | .exceedHide { |
| | |
| | | |
| | | .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 { |
| | |
| | | } |
| | | |
| | | .noob-tour { |
| | | margin-bottom: vww(50); |
| | | margin-bottom: vww(10); |
| | | position: relative; |
| | | top: -240rpx; |
| | | } |
| | | |
| | | .u-popup { |