<template> <view class="container"> <view class="detail-desc"> <view class="d-header"> <text>基本信息</text> </view> <view class="c-list"> <view class="c-row b-b"> <text class="tit">承运人</text> <view class="con-list"> <text>{{car.driver}}</text> </view> </view> <view class="c-row b-b"> <text class="tit">承运人电话</text> <view class="con-list"> <text>{{car.driverPhone}}</text> </view> </view> <view class="c-row b-b"> <text class="tit">车牌号</text> <view class="con-list"> <text>{{car.carNo}}</text> </view> </view> </view> <view class="d-header"> <text>货源信息</text> </view> <view class="c-list"> <view class="c-row b-b"> <view class="tit">货源单号</view> <view class="con-list"> <text >{{tranNo}}</text> </view> <button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">选择</button> </view> <view class="c-row b-b"> <text class="tit">剩余量</text> <view class="con-list"> <text>{{exsitCount}}</text> </view> </view> <view class="c-row b-b"> <text class="tit">价格</text> <view class="con-list"> <input placeholder="请填写" name="input" @input="priceInput"></input> </view> </view> <view class="c-row b-b"> <text class="tit">承运吨数</text> <view class="con-list"> <input placeholder="请填写" type="mobile" name="input" @input="tranCountInput"></input> </view> </view> </view> </view> <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal"> <scroll-view scroll-y class="cu-dialog" style="height: 800rpx;" @tap.stop=""> <radio-group class="block" @change="RadioChange"> <view class="cu-list menu text-left"> <view class="cu-item" v-for="(item,index) in tranInfo" :key="index"> <label class="flex justify-between align-center flex-sub"> <view class="flex-sub">{{item.tranNo}}(剩余量:{{item.total-item.tranCount}})</view> <radio class="round" :class="tranNo==item.tranNo?'checked':''" :checked="tranNo==item.tranNo?true:false" :value="index"></radio> </label> </view> </view> </radio-group> </scroll-view> </view> <!-- 底部操作菜单 --> <view class="page-bottom"> <view class="action-btn-group"> <button type="primary" class=" action-btn no-border buy-now-btn" @click="contactUs">联系我们</button> <button v-if="car.status == 2" type="primary" class=" action-btn no-border add-cart-btn" @click="tranNow">立即委派</button> </view> </view> </view> </template> <script> import uniNumberBox from '@/components/uni-number-box.vue'; import { mapState } from 'vuex'; export default { components: { uniNumberBox }, data() { return { car: { id:'', tranNo:'', tranCount: 0, price:0, driverPhone:'', }, tranInfo:{}, driver:'', driverPhone:'', price:0, carNo:'', tranCount: 0, sendText:'获取验证码', sendDisabled: false, verifyCode:'', modalName: null, tranNo: '请选择货源单号', exsitCount:0 }; }, onShow() { }, onLoad(options) { const that = this uni.showLoading({ title: '正在加载', mask:true }) that.$api.request('tran', 'getCarDetailInfo', { id: options.id }, failres => { that.$api.msg(failres.errmsg) uni.hideLoading() }).then(res => { that.car = res.data uni.hideLoading() }) }, computed: { ...mapState(['hasLogin','userInfo']) }, methods: { RadioChange(e) { this.tranNo = this.tranInfo[e.detail.value].tranNo this.exsitCount = this.tranInfo[e.detail.value].total - this.tranInfo[e.detail.value].tranCount this.modalName = null }, tranCountInput(e) { this.tranCount = e.detail.value }, priceInput(e) { this.price = e.detail.value }, hideModal(e) { this.modalName = null }, showModal(e) { // if (!this.hasLogin||this.userInfo.phone == undefined) { // uni.showModal({ // title: '登录提示', // content: '您尚未登录,是否立即登录?', // showCancel: true, // confirmText: '登录', // success: (e) => { // if (e.confirm) { // uni.navigateTo({ // url: '/pages/public/login' // }) // } // }, // fail: () => {}, // complete: () => {} // }) // } // else{ let that = this this.modalName = e.currentTarget.dataset.target this.$api.request('tran', 'getTranNoList',{ senderPhone: that.userInfo.phone, }, failres => { that.$api.msg(failres.errmsg) uni.hideLoading() }).then(res => { let data = res.data console.log(data.tranInfo) //销售信息 if(data.tranInfo){ that.tranInfo = data.tranInfo } uni.hideLoading() }) // } }, contactUs() { const that = this uni.makePhoneCall({ // 手机号 phoneNumber: that.car.driverPhone, // 成功回调 success: (res) => { console.log('调用成功!') }, // 失败回调 fail: (res) => { console.log('调用失败!') } }); }, tranNow(){ let that = this if (!this.hasLogin) { uni.showModal({ title: '登录提示', content: '您尚未登录,是否立即登录?', showCancel: true, confirmText: '登录', success: (e) => { if (e.confirm) { uni.navigateTo({ url: '/pages/public/login' }) } }, fail: () => {}, complete: () => {} }) } else{ if(!that.tranNo){ this.$api.msg('请选择货源单号'); return; } if (!that.price) { that.$api.msg('请填写运价'); return } if (!that.tranCount) { that.$api.msg('请填写承运吨数'); return } if(that.tranCount>that.exsitCount){ that.$api.msg('承运吨数必须小于等于剩余量'); return } that.car.tranCount = that.tranCount that.car.price = that.price that.car.tranNo = that.tranNo uni.showLoading({ title: '正在提交', mask:true }) that.$api.request('tran', 'pipei',that.car, failres => { uni.hideLoading() that.$api.msg(failres.errmsg); }).then(res => { uni.hideLoading() uni.showModal({ title: '提示', content: "委派承运成功", showCancel: false, confirmText: '确定', success: () => { uni.navigateBack({ delta: 2 }) } }) // that.$api.prePage().refreshList(data, that.manageType); }) } } }, } </script> <style lang='scss' scoped> page { background: $page-color-base; padding-bottom: 160upx; } .icon-you { font-size: $font-base + 2upx; color: #888; } .carousel { height: 722upx; position: relative; swiper { height: 100%; } .image-wrapper { width: 100%; height: 100%; } .swiper-item { display: flex; justify-content: center; align-content: center; height: 750upx; overflow: hidden; image { width: 100%; height: 100%; } } } .c-list { font-size: $font-sm + 2upx; color: $font-color-base; background: #fff; .c-row { display: flex; align-items: center; padding: 20upx 30upx; position: relative; } .tit { width: 220upx; } .con { flex: 1; color: $font-color-dark; .selected-text { margin-right: 10upx; } } .bz-list { height: 40upx; font-size: $font-sm+2upx; color: $font-color-dark; text { display: inline-block; margin-right: 30upx; } } .con-list { flex: 1; display: flex; flex-direction: column; color: $font-color-dark; line-height: 40upx; text-align: right; padding-right: 20upx; } .red { color: $uni-color-primary; } } /* 评价 */ .eva-section { display: flex; flex-direction: column; padding: 20upx 30upx; background: #fff; margin-top: 16upx; .e-header { display: flex; align-items: center; height: 70upx; font-size: $font-sm + 2upx; color: $font-color-light; .tit { font-size: $font-base + 2upx; color: $font-color-dark; margin-right: 4upx; } .tip { flex: 1; text-align: right; } .icon-you { margin-left: 10upx; } } } .eva-box { display: flex; padding: 20upx 0; .portrait { flex-shrink: 0; width: 80upx; height: 80upx; border-radius: 100px; } .right { flex: 1; display: flex; flex-direction: column; font-size: $font-base; color: $font-color-base; padding-left: 26upx; .con { font-size: $font-base; color: $font-color-dark; padding: 20upx 0; } .bot { display: flex; justify-content: space-between; font-size: $font-sm; color: $font-color-light; } } } /* 详情 */ .detail-desc { background: #fff; margin-top: 16upx; width: 750upx; .d-header { display: flex; justify-content: center; align-items: center; height: 80upx; font-size: $font-base + 2upx; color: $font-color-dark; position: relative; text { padding: 0 20upx; background: #fff; position: relative; z-index: 1; } &:after { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); width: 300upx; height: 0; content: ''; border-bottom: 1px solid #ccc; } } } /* 规格选择弹窗 */ .attr-content { padding: 10upx 30upx; .a-t { display: flex; image { width: 170upx; height: 170upx; flex-shrink: 0; margin-top: -40upx; border-radius: 8upx; ; } .right { display: flex; flex-direction: column; padding-left: 24upx; font-size: $font-sm + 2upx; color: $font-color-base; line-height: 42upx; .price { font-size: $font-lg; color: $uni-color-primary; margin-bottom: 10upx; } .selected-text { margin-right: 10upx; } } } .attr-list { display: flex; flex-direction: column; font-size: $font-base + 2upx; color: $font-color-base; padding-top: 30upx; padding-left: 10upx; } .item-list { padding: 30upx 0 0; display: flex; flex-wrap: wrap; text { display: flex; align-items: center; justify-content: center; background: #eee; margin-right: 20upx; margin-bottom: 20upx; border-radius: 100upx; min-width: 60upx; height: 60upx; padding: 0 20upx; font-size: $font-base; color: $font-color-dark; } .selected { background: #fbebee; color: $uni-color-primary; } } } /* 弹出层 */ .popup { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99; &.show { display: block; .mask { animation: showPopup 0.2s linear both; } .layer { animation: showLayer 0.2s linear both; } } &.hide { .mask { animation: hidePopup 0.2s linear both; } .layer { animation: hideLayer 0.2s linear both; } } &.none { display: none; } .mask { position: fixed; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.4); } .layer { position: fixed; z-index: 99; bottom: 0; width: 100%; min-height: 40vh; border-radius: 10upx 10upx 0 0; background-color: #fff; .btn { height: 66upx; line-height: 66upx; border-radius: 100upx; background: $uni-color-primary; font-size: $font-base + 2upx; color: #fff; margin: 30upx auto 20upx; } } @keyframes showPopup { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hidePopup { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes showLayer { 0% { transform: translateY(120%); } 100% { transform: translateY(0%); } } @keyframes hideLayer { 0% { transform: translateY(0); } 100% { transform: translateY(120%); } } } /* 底部操作菜单 */ .page-bottom { position: fixed; left: 30upx; bottom: 30upx; z-index: 95; display: flex; justify-content: center; align-items: center; width: 690upx; height: 100upx; background: rgba(255, 255, 255, .9); box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5); border-radius: 16upx; .p-b-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: $font-sm; color: $font-color-base; width: 96upx; height: 80upx; .yticon { font-size: 40upx; line-height: 48upx; color: $font-color-light; } &.active, &.active .yticon { color: $uni-color-primary; } .icon-fenxiang2 { font-size: 42upx; transform: translateY(-2upx); } .icon-shoucang { font-size: 46upx; } } } /* 优惠券面板 */ .mask { display: flex; align-items: flex-end; position: fixed; left: 0; top: var(--window-top); bottom: 0; width: 100%; background: rgba(0, 0, 0, 0); z-index: 9995; transition: .3s; .mask-content { width: 100%; min-height: 30vh; max-height: 70vh; background: #f3f3f3; transform: translateY(100%); transition: .3s; overflow-y: scroll; } &.none { display: none; } &.show { background: rgba(0, 0, 0, .4); .mask-content { transform: translateY(0); } } } /* 优惠券列表 */ .coupon-item { display: flex; flex-direction: column; margin: 20upx 24upx; background: #fff; .con { display: flex; align-items: center; position: relative; height: 120upx; padding: 0 30upx; &:after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 0; border-bottom: 1px dashed #f3f3f3; transform: scaleY(50%); } } .left { display: flex; flex-direction: column; justify-content: center; flex: 1; overflow: hidden; height: 100upx; } .title { font-size: 32upx; color: $font-color-dark; margin-bottom: 10upx; } .time { font-size: 24upx; color: $font-color-light; } .right { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 26upx; color: $font-color-base; height: 100upx; } .price { font-size: 44upx; color: $base-color; &:before { content: '¥'; font-size: 34upx; } } .tips { font-size: 24upx; color: $font-color-light; line-height: 60upx; padding-left: 30upx; } .circle { position: absolute; left: -6upx; bottom: -10upx; z-index: 10; width: 20upx; height: 20upx; background: #f3f3f3; border-radius: 100px; &.r { left: auto; right: -6upx; } } } .rich-img { width: 100%; height: auto; margin: 0; padding: 0; line-height: 0px; } button::after { border: none; } </style>