333 lines
11 KiB
Vue
333 lines
11 KiB
Vue
<template>
|
|
<app-layout title="货物配送">
|
|
<view class="distribution-container">
|
|
<view class="form-item">
|
|
<view class="form-item-title">选择车型</view>
|
|
<view class="common-form-widget-group">
|
|
<view class="widget-item">
|
|
<text class="iconfont icon-icon-truck icon"></text>
|
|
<picker mode="selector" :range="carTypeList" range-key="name" @change="selectCarType" class="picker">
|
|
<text class="title">
|
|
<text class="limit-line clamp-1">
|
|
{{ carTypeText ? carTypeText : "请选择装货车型" }}
|
|
</text>
|
|
</text>
|
|
</picker>
|
|
<text class="iconfont icon-jinru more"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-item-title">取货地址</view>
|
|
<view class="common-form-widget-group">
|
|
<view class="widget-item" @click="selectPickupAddress">
|
|
<text class="iconfont icon-dingwei icon"></text>
|
|
<text class="title">
|
|
<text class="limit-line clamp-1">
|
|
{{ pickupAddressText ? pickupAddressText : "请选择取货地址" }}
|
|
</text>
|
|
</text>
|
|
<text class="iconfont icon-jinru more"></text>
|
|
</view>
|
|
<view class="widget-item">
|
|
<text class="iconfont icon-shijian icon"></text>
|
|
<picker mode="date" @change="bindDateChange" class="picker">
|
|
<text class="title">
|
|
<text class="limit-line clamp-1">
|
|
{{ date ? date : "选择期望取货日期" }}
|
|
</text>
|
|
</text>
|
|
</picker>
|
|
<text class="iconfont icon-jinru more"></text>
|
|
</view>
|
|
<view class="widget-item">
|
|
<text class="iconfont icon-shijian icon"></text>
|
|
<picker mode="time" @change="bindTimeChange" class="picker">
|
|
<text class="title">
|
|
<text class="limit-line clamp-1">
|
|
{{ time ? time : "选择期望取货时间" }}
|
|
</text>
|
|
</text>
|
|
</picker>
|
|
<text class="iconfont icon-jinru more"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="form-item-title">卸货地址</view>
|
|
<view class="common-form-widget-group">
|
|
<view class="widget-item" @click="selectUnloadAddress">
|
|
<text class="iconfont icon-dingwei icon"></text>
|
|
<text class="title">
|
|
<text class="limit-line clamp-1">
|
|
{{ unloadAddressText ? unloadAddressText : "请选择卸货地址" }}
|
|
</text>
|
|
</text>
|
|
<text class="iconfont icon-jinru more"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form-item distance">
|
|
<view class="input-title">预估配送公里数</view>
|
|
<view class="input-box">
|
|
<input
|
|
class="input"
|
|
v-model="distance"
|
|
type="number"
|
|
placeholder="请输入预估配送预估公里数"
|
|
placeholder-class="placeholder-style-4"
|
|
@input="changeDistance(distance)"
|
|
/>
|
|
<text class="unit">km</text>
|
|
</view>
|
|
</view>
|
|
<view class="form-item explain">
|
|
<view class="form-item-title">配送说明</view>
|
|
<view class="textarea-box">
|
|
<text>每公里配送费为{{ unitPrice }}元，{{ minDistance }}公里以下按{{ minDistance }}公里计算</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="common-bottom-components" :style="{ bottom: pageConfig.safeAreaInsets.bottom + 'px' }">
|
|
<text class="price">¥ {{ utils.formatNumber(total) }}</text>
|
|
<view class="btn" @click="submit">
|
|
<div class="text">立即支付</div>
|
|
</view>
|
|
</view>
|
|
</app-layout>
|
|
</template>
|
|
|
|
<script>
|
|
import AppLayout from "@/components/layout/layout";
|
|
export default {
|
|
name: "service-other-distribution",
|
|
data() {
|
|
return {
|
|
utils: this.$utils,
|
|
pageConfig: {},
|
|
carTypeList: [],
|
|
unitPrice: 0,
|
|
minDistance: 0,
|
|
carTypeId: 0,
|
|
carTypeText: "",
|
|
pickupAddressId: 0,
|
|
pickupAddressText: "",
|
|
unloadAddressId: 0,
|
|
unloadAddressText: "",
|
|
date: "",
|
|
time: "",
|
|
distance: null,
|
|
content: "",
|
|
total: 0,
|
|
};
|
|
},
|
|
components: {
|
|
AppLayout,
|
|
},
|
|
onLoad() {
|
|
this.pageConfig = getApp().globalData.pageConfig;
|
|
this.$models.service.distributionConfig().then((config) => {
|
|
this.unitPrice = config.unitPrice;
|
|
this.minDistance = config.minDistance;
|
|
});
|
|
this.$models.service.distributionCar().then((list) => {
|
|
this.carTypeList = list;
|
|
});
|
|
},
|
|
onShow() {},
|
|
onReady() {},
|
|
onReachBottom() {},
|
|
onPullDownRefresh() {},
|
|
methods: {
|
|
/**
|
|
* 选择车型
|
|
*/
|
|
selectCarType(e) {
|
|
let { id, name } = this.carTypeList[e.detail.value];
|
|
this.carTypeId = id;
|
|
this.carTypeText = name;
|
|
},
|
|
/**
|
|
* 选择取货地址
|
|
*/
|
|
selectPickupAddress() {
|
|
const that = this;
|
|
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.pickupAddressId, {
|
|
events: {
|
|
setAddress(address) {
|
|
that.pickupAddressId = address.id;
|
|
that.pickupAddressText = address.address + address.detail;
|
|
},
|
|
},
|
|
});
|
|
},
|
|
/**
|
|
* 选择卸货地址
|
|
*/
|
|
selectUnloadAddress() {
|
|
const that = this;
|
|
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.unloadAddressId, {
|
|
events: {
|
|
setAddress(address) {
|
|
that.unloadAddressId = address.id;
|
|
that.unloadAddressText = address.address + address.detail;
|
|
},
|
|
},
|
|
});
|
|
},
|
|
/**
|
|
* 选择日期
|
|
*/
|
|
bindDateChange(e) {
|
|
this.date = e.detail.value;
|
|
},
|
|
/**
|
|
* 选择时分
|
|
*/
|
|
bindTimeChange(e) {
|
|
this.time = e.detail.value;
|
|
},
|
|
/**
|
|
* 计算价格
|
|
*/
|
|
changeDistance(num) {
|
|
num = parseFloat(num);
|
|
if (num < this.minDistance) {
|
|
num = this.minDistance;
|
|
}
|
|
this.total = num * this.unitPrice;
|
|
},
|
|
/**
|
|
* 提交订单
|
|
*/
|
|
submit() {
|
|
if (!this.pickupAddressId || !this.unloadAddressId) {
|
|
return this.$utils.toast("请选择地址");
|
|
}
|
|
if (!this.date || !this.time) {
|
|
return this.$utils.toast("请选择时间和日期");
|
|
}
|
|
let datetime = this.date + " " + this.time;
|
|
this.$models.service
|
|
.createDistributionOrder({
|
|
car: this.carTypeId,
|
|
address: this.pickupAddressId,
|
|
addressb: this.unloadAddressId,
|
|
starttime: datetime,
|
|
sendtime: 0,
|
|
distance: this.distance,
|
|
})
|
|
.then((data) => {
|
|
this.$store.commit("system/currentOrderTabIndex", 2);
|
|
this.$store.commit("system/refreshOrder", true);
|
|
this.$models.order
|
|
.pay({
|
|
request: {
|
|
api: "order.pay.t3",
|
|
data: {
|
|
id: data.id,
|
|
},
|
|
},
|
|
})
|
|
.then(() => {
|
|
this.$utils.toPage("/pages/order/order", {}, "switch");
|
|
})
|
|
.catch(() => {
|
|
this.$utils.toPage("/pages/order/order", {}, "switch");
|
|
});
|
|
})
|
|
.catch((e) => {
|
|
this.$utils.toast(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.distribution-container {
|
|
width: 710rpx;
|
|
margin: 0 auto;
|
|
padding-bottom: 120rpx;
|
|
.form-item {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.form-item-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #000000;
|
|
box-sizing: border-box;
|
|
padding: 20rpx 30rpx 0 30rpx;
|
|
}
|
|
}
|
|
.common-form-widget-group {
|
|
.widget-item {
|
|
.iconfont.icon-icon-truck {
|
|
font-size: 44rpx;
|
|
top: 38rpx;
|
|
}
|
|
}
|
|
}
|
|
.form-item.distance {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
.input-title {
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
color: #010101;
|
|
flex-shrink: 0;
|
|
}
|
|
.input-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-left: 30rpx;
|
|
line-height: 30rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
.input {
|
|
width: 350rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.unit {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.form-item.explain {
|
|
margin-bottom: 0;
|
|
.textarea-box {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
font-size: 30rpx;
|
|
box-sizing: border-box;
|
|
padding: 30rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.common-bottom-components {
|
|
.price {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #ec7655;
|
|
}
|
|
.btn {
|
|
width: 234rpx;
|
|
height: 76rpx;
|
|
background: #8b9beb;
|
|
border: 2rpx solid #4b65ed;
|
|
text-align: center;
|
|
.text {
|
|
font-size: 24rpx;
|
|
color: #ffffff;
|
|
line-height: 76rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |