新增货物配送页面
This commit is contained in:
parent
33f840ebf2
commit
3a8aa3ba25
|
|
@ -37,12 +37,6 @@
|
||||||
"navigationBarTitleText": "购物车"
|
"navigationBarTitleText": "购物车"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"path": "pages/service/other/other",
|
|
||||||
"style": {
|
|
||||||
"navigationBarTitleText": "其他服务"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/order/create",
|
"path": "pages/order/create",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -109,6 +103,12 @@
|
||||||
"navigationBarTitleText": "联保"
|
"navigationBarTitleText": "联保"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/service/other/other",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "其他服务"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/service/other/project",
|
"path": "pages/service/other/project",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
@ -120,6 +120,12 @@
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "企业合作"
|
"navigationBarTitleText": "企业合作"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/service/other/distribution",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "货物配送"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|
|
||||||
|
|
@ -196,7 +196,7 @@ export default {
|
||||||
id: 13,
|
id: 13,
|
||||||
icon: require("@/static/temp/index/a5.png"),
|
icon: require("@/static/temp/index/a5.png"),
|
||||||
title: "货物配送",
|
title: "货物配送",
|
||||||
page: "",
|
page: "/pages/service/other/distribution",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
bussinessServiceList: [
|
bussinessServiceList: [
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,261 @@
|
||||||
|
<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 limit-line clamp-1">
|
||||||
|
{{ carTypeText ? carTypeText : "请选择装货车型" }}
|
||||||
|
</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 limit-line clamp-1">
|
||||||
|
{{ pickupAddressText ? pickupAddressText : "请选择取货地址" }}
|
||||||
|
</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 limit-line clamp-1">
|
||||||
|
{{ datetime ? datetime : "选择期望取货时间" }}
|
||||||
|
</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 limit-line clamp-1">
|
||||||
|
{{ unloadAddressText ? unloadAddressText : "请选择卸货地址" }}
|
||||||
|
</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">
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
v-model="content"
|
||||||
|
placeholder="每公里配送费为3元，5公里以下按5公里计算"
|
||||||
|
placeholder-class="placeholder-style-4"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="common-bottom-components" :style="{ bottom: config.safeAreaInsets.bottom + 'px' }">
|
||||||
|
<text class="price">¥ {{ utils.formatNumber(total) }}</text>
|
||||||
|
<view class="btn" @click="pay">
|
||||||
|
<div class="text">立即支付</div>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</app-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AppLayout from "@/components/layout/layout";
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "service-other-distribution",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
utils: this.$utils,
|
||||||
|
carTypeList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "营运",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "非营运",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
unitPrice: 3,
|
||||||
|
minDistance: 5,
|
||||||
|
carTypeId: 0,
|
||||||
|
carTypeText: "",
|
||||||
|
pickupAddressId: 0,
|
||||||
|
pickupAddressText: "",
|
||||||
|
unloadAddressId: 0,
|
||||||
|
unloadAddressText: "",
|
||||||
|
datetime: "",
|
||||||
|
distance: null,
|
||||||
|
content: "",
|
||||||
|
total: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
AppLayout,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
config: (state) => state.system.config,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
onLoad() {},
|
||||||
|
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.datetime = e.detail.value;
|
||||||
|
},
|
||||||
|
changeDistance(num) {
|
||||||
|
num = parseFloat(num);
|
||||||
|
if (num < this.minDistance) {
|
||||||
|
num = this.minDistance;
|
||||||
|
}
|
||||||
|
this.total = num * this.unitPrice;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</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%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 30rpx;
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
Loading…
Reference in New Issue