topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增货物配送页面

This commit is contained in:
TOP糯米 2023-02-27 00:07:37 +08:00
parent 33f840ebf2
commit 3a8aa3ba25
3 changed files with 274 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages.json
View File

@ -37,12 +37,6 @@
"navigationBarTitleText": "购物车"
}
},
{
"path": "pages/service/other/other",
"style": {
"navigationBarTitleText": "其他服务"
}
},
{
"path": "pages/order/create",
"style": {
@ -109,6 +103,12 @@
"navigationBarTitleText": "联保"
}
},
{
"path": "pages/service/other/other",
"style": {
"navigationBarTitleText": "其他服务"
}
},
{
"path": "pages/service/other/project",
"style": {
@ -120,6 +120,12 @@
"style": {
"navigationBarTitleText": "企业合作"
}
},
{
"path": "pages/service/other/distribution",
"style": {
"navigationBarTitleText": "货物配送"
}
}
],
"globalStyle": {

2
src/pages/index/index.vue
View File

@ -196,7 +196,7 @@ export default {
id: 13,
icon: require("@/static/temp/index/a5.png"),
title: "货物配送",
page: "",
page: "/pages/service/other/distribution",
},
],
bussinessServiceList: [

261
src/pages/service/other/distribution.vue Normal file
View File

@ -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>