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

修改下单时的地址为填写方式、删除地址管理相关页面

This commit is contained in:
TOP糯米 2023-04-05 22:37:13 +08:00
parent e00888cdf5
commit 3ff0dcefee
8 changed files with 445 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/App.vue
View File

@ -176,11 +176,23 @@ export default {
.widget-item:first-child { .widget-item:first-child {
margin-top: 0; margin-top: 0;
} }
.widget-item.input {
.picker,
.title {
position: relative;
top: 0;
left: 0;
}
.title {
padding: 0;
padding-left: 30rpx;
}
}
.widget-item { .widget-item {
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
width: 100%; width: 100%;
margin-top: 2rpx; margin-top: 2rpx;
padding: 44rpx 30rpx; padding: 44rpx 30rpx;
@ -237,6 +249,7 @@ export default {
font-weight: bold; font-weight: bold;
line-height: 30rpx; line-height: 30rpx;
color: #2d2d2d; color: #2d2d2d;
flex-shrink: 0;
} }
.desc { .desc {
font-size: 28rpx; font-size: 28rpx;
@ -268,7 +281,7 @@ export default {
line-height: 30rpx; line-height: 30rpx;
// input // input
.input-box { .input-box {
width: 500rpx; width: 100%;
position: relative; position: relative;
padding: 25rpx 0; padding: 25rpx 0;
} }

12
src/pages.json
View File

@ -109,18 +109,6 @@
"navigationBarTitleText": "修改密码" "navigationBarTitleText": "修改密码"
} }
}, },
{
"path": "pages/address/address",
"style": {
"navigationBarTitleText": "地址管理"
}
},
{
"path": "pages/address/edit",
"style": {
"navigationBarTitleText": "新增地址"
}
},
{ {
"path": "pages/service/other/after-market", "path": "pages/service/other/after-market",
"style": { "style": {

248
src/pages/address/address.vue
View File

@ -1,248 +0,0 @@
<template>
<app-layout :title="pageTitle">
<view class="address-group">
<view class="address-item" v-for="(item, index) in list" :key="index">
<view class="address-box" @click="selectAddress(item)" @longpress="deleteAddress(item.id, index)">
<view v-if="openType == 'choose'" class="checkbox">
<widget-check-box :size="52" :checked="chooseAddressId == item.id" />
</view>
<view class="item-box">
<view class="address-text limit-line clamp-1">
<text v-if="item.isDefault" class="default-icon">默认</text>
<text class="text">{{ item.address }}</text>
</view>
<view class="address-detail limit-line clamp-1">
{{ item.detail }}
</view>
<view class="contact limit-line clamp-1">
<text class="name">{{ item.name }}</text>
<text class="mobile">{{ item.mobile }}</text>
</view>
</view>
</view>
<view class="edit" @click="editAddress(item.id)">
<text class="iconfont icon-bianji"></text>
</view>
</view>
</view>
<view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
<view class="btn get-wechat-address" @click="getWechatAddress">
<text class="text">获取微信收货地址</text>
</view>
<view class="btn add-address" @click="utils.toPage('/pages/address/edit')">
<text class="text">新增地址</text>
</view>
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import WidgetCheckBox from "@/components/widgets/checkbox";
export default {
name: "member-address",
data() {
return {
utils: this.$utils,
pageTitle: "我的地址",
openType: "list",
pageConfig: {},
chooseAddressId: 0,
list: [],
};
},
components: {
AppLayout,
WidgetCheckBox,
},
onLoad(e) {
this.pageConfig = getApp().globalData.pageConfig;
if (e.openType) {
this.openType = e.openType;
if (e.openType == "choose") {
this.pageTitle = "选择地址";
uni.setNavigationBarTitle({
title: this.pageTitle,
});
}
}
if (e.id) {
this.chooseAddressId = e.id;
}
},
onShow() {
this.list = [];
this.loadAddress();
},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
onShareTimeline() {},
onShareAppMessage() {},
methods: {
loadAddress() {
this.$request({
api: "user.address.list",
})
.then((response) => {
response.data.forEach((item) => {
this.list.push({
id: item.id,
address: item.address,
detail: item.doorplate,
name: item.name,
mobile: item.mobil,
isDefault: item.default == 1,
});
});
})
.catch((e) => {});
},
selectAddress(address) {
if (this.openType == "choose") {
this.getOpenerEventChannel().emit("setAddress", address);
uni.navigateBack();
} else {
this.editAddress(address.id);
}
},
getWechatAddress() {
const that = this;
// #ifndef H5
let platformAddress = {};
uni.chooseAddress({
success: (data) => {
platformAddress.address = data.provinceName + data.cityName + data.countyName;
platformAddress.detail = data.detailInfo;
platformAddress.mobile = data.telNumber;
platformAddress.name = data.userName;
setTimeout(() => {
that.$utils.toPage("/pages/address/edit?addr=" + encodeURIComponent(JSON.stringify(platformAddress)));
}, 200);
},
});
// #endif
},
editAddress(id) {
this.$utils.toPage("/pages/address/edit?id=" + id);
},
deleteAddress(id, index) {
const that = this;
uni.showModal({
title: "删除地址？",
content: "数据删除后不可恢复，请谨慎操作！",
complete(res) {
if (res.confirm) {
that.$request({
api: "user.address.delete",
data: {
id: id,
},
}).then((response) => {
if (response.code == 1) {
that.list.splice(index, 1);
return;
}
that.$utils.toast(response.msg);
});
}
},
});
},
},
};
</script>
<style lang="less" scoped>
.address-group {
width: 100%;
box-sizing: border-box;
padding: 0 18rpx 120rpx 18rpx;
.address-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff;
box-sizing: border-box;
padding: 0 30rpx;
margin-bottom: 25rpx;
}
.edit {
width: 50rpx;
text-align: right;
flex-shrink: 0;
.iconfont {
color: #8b9beb;
font-size: 36rpx;
}
}
}
.address-box {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
padding: 35rpx 0;
.checkbox {
width: 75rpx;
}
.item-box {
width: 100%;
.address-text,
.address-detail {
font-size: 30rpx;
color: #2d2d2d;
line-height: 40rpx;
}
.address-detail {
margin-top: 14rpx;
}
.default-icon {
display: inline-block;
width: 60rpx;
height: 30rpx;
background: rgba(139, 155, 235, 0.32);
border: 1px solid #8194f2;
font-size: 24rpx;
color: #8194f2;
text-align: center;
margin-right: 18rpx;
line-height: 28rpx;
box-sizing: border-box;
}
.contact {
font-size: 28rpx;
color: #999999;
line-height: 28rpx;
margin-top: 18rpx;
}
}
}
.common-bottom-components {
.btn {
width: 310rpx;
height: 76rpx;
border-radius: 38rpx;
text-align: center;
line-height: 76rpx;
.text {
font-size: 28rpx;
}
}
.btn.get-wechat-address {
background: #8b9beb;
.text {
color: #ffffff;
}
}
.btn.add-address {
background: #f6f6f6;
border: 1px solid #4b65ed;
box-sizing: border-box;
.text {
color: #8b9beb;
}
}
}
</style>

224
src/pages/address/edit.vue
View File

@ -1,224 +0,0 @@
<template>
<app-layout :title="pageTitle">
<view class="tips-container">
<widget-tips text="个人信息仅用于发布需求，隐私信息完全保密" textColor="#ffa800" />
</view>
<view class="common-form-container">
<view class="input-item">
<view class="title-box">
<text>服务地址</text>
</view>
<view class="input-box map" @click="chooseLocation">
<view class="address-text limit-line clamp-1" :class="{ active: address }">
{{ address ? address : "点击选择服务地址" }}
</view>
<text class="iconfont icon-dingwei"></text>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>门牌号</text>
</view>
<view class="input-box">
<input
class="input"
v-model="detail"
placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>联系人</text>
</view>
<view class="input-box">
<input class="input" v-model="name" placeholder="请输入姓名" placeholder-class="placeholder-style-3" />
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>性别</text>
</view>
<view class="input-box">
<view class="checkbox">
<view class="checkbox-item" :class="[gender == 1 ? 'active' : '']" @click="gender = 1">
<text>先生</text>
</view>
<view class="checkbox-item" :class="[gender == 2 ? 'active' : '']" @click="gender = 2">
<text>女士</text>
</view>
</view>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>手机号码</text>
</view>
<view class="input-box">
<input class="input" v-model="mobile" placeholder="请输入手机号码" placeholder-class="placeholder-style-3" />
</view>
</view>
<view class="input-item default-address">
<view class="title-box">
<text>设为默认地址</text>
</view>
<view class="input-box" @click="isDefault = !isDefault">
<widget-switch :open="isDefault" />
</view>
</view>
</view>
<view class="common-save-form-btn">
<view class="btn" @click="save">保存</view>
</view>
</app-layout>
</template>
<script>
import AppLayout from "@/components/layout/layout";
import WidgetTips from "@/components/widgets/tips";
import WidgetSwitch from "@/components/widgets/switch";
import { mapGetters } from "vuex";
export default {
name: "address-add",
data() {
return {
pageTitle: "新增地址",
id: 0,
address: "",
detail: "",
gender: 1,
isDefault: false,
name: "",
mobile: "",
longitude: 0,
latitude: 0,
};
},
components: {
AppLayout,
WidgetTips,
WidgetSwitch,
},
computed: {
...mapGetters({
isLogin: "user/isLogin",
}),
},
onLoad(e) {
if (e.id) {
this.pageTitle = "编辑地址";
uni.setNavigationBarTitle({
title: this.pageTitle,
});
this.id = e.id;
this.setAddressData();
}
if (e.addr) {
let platformAddress = JSON.parse(decodeURIComponent(e.addr));
this.address = platformAddress.address;
this.detail = platformAddress.detail;
this.name = platformAddress.name;
this.mobile = platformAddress.mobile;
}
},
onShow() {
if (!this.isLogin) {
this.$store.commit("user/showLoginModal", true);
}
},
onReady() {},
onReachBottom() {},
onPullDownRefresh() {},
onShareTimeline() {},
onShareAppMessage() {},
methods: {
save() {
this.$request({
api: "user.address.edit",
data: {
id: this.id,
address: this.address,
doorplate: this.detail,
name: this.name,
mobil: this.mobile,
sex: this.gender == 1 ? "男" : "女",
default: this.isDefault ? 1 : 0,
lat: this.latitude,
lng: this.longitude,
},
}).then((response) => {
if (response.code == 1) {
return this.$utils.toPage("", {}, "back");
}
this.$utils.toast(response.msg);
});
},
setAddressData() {
this.$request({
api: "user.address.detail",
data: {
id: this.id,
},
}).then((response) => {
this.address = response.data.address;
this.detail = response.data.doorplate;
this.name = response.data.name;
this.mobile = response.data.mobil;
this.gender = response.data.sex == "男" ? 1 : 2;
this.isDefault = response.data.default == 1;
this.latitude = response.data.lat;
this.longitude = response.data.lng;
});
},
chooseLocation() {
const t = this;
uni.chooseLocation({
success: ({ name, address, longitude, latitude }) => {
t.address = address;
t.detail = name;
t.longitude = longitude;
t.latitude = latitude;
},
fail: (error) => {},
});
},
},
};
</script>
<style lang="less" scoped>
.tips-container {
width: 710rpx;
margin: 0 auto;
}
.input-item.default-address {
justify-content: space-between;
.title-box {
width: 180rpx;
flex-shrink: 0;
}
.input-box {
width: auto;
}
}
.input-box.map {
.address-text {
font-size: 28rpx;
line-height: 38rpx;
color: #c9c9c9;
box-sizing: border-box;
padding-right: 40rpx;
}
.address-text.active {
color: #000000;
}
.iconfont {
position: absolute;
top: 28rpx;
right: 0;
font-size: 35rpx;
color: #8194f2;
}
}
</style>

151
src/pages/demand/demand.vue
View File

@ -58,7 +58,7 @@
<textarea <textarea
v-model="content" v-model="content"
class="textarea" class="textarea"
placeholder="请您详细填写需求说明" placeholder="请尽量描述您的产品名称，型号，数量"
placeholder-class="placeholder-style-3" placeholder-class="placeholder-style-3"
/> />
</view> </view>
@ -105,23 +105,68 @@
</block> </block>
</view> </view>
</view> </view>
<view class="common-form-container address">
<view class="input-item">
<view class="title-box title">
<text>基本信息</text>
<text class="desc">（隐私信息完全保密）</text>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>服务地址</text>
</view>
<view class="input-box map" @click="chooseLocation">
<view class="address-text limit-line clamp-1" :class="{ active: address.text }">
{{ address.text ? address.text : "点击选择服务地址" }}
</view>
<text class="iconfont icon-dingwei"></text>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>门牌号</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.detail"
placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>联系人</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.name"
placeholder="请输入姓名"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>手机号码</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.mobile"
placeholder="请输入手机号码"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
</view>
<view class="common-form-container form-widget"> <view class="common-form-container form-widget">
<view class="input-item"> <view class="input-item">
<view class="common-form-widget-group"> <view class="common-form-widget-group">
<view class="title-box">
<text>选择报价方式</text>
<text class="desc">（隐私信息完全保密）</text>
</view>
<view class="input-box"> <view class="input-box">
<view class="widget-item" @click="selectAddress">
<text class="iconfont icon-dingwei icon"></text>
<text class="title">
<text class="limit-line clamp-1">
{{ addressText ? addressText : "请选择上门地址" }}
</text>
</text>
<text class="iconfont icon-jinru more"></text>
</view>
<view class="widget-item"> <view class="widget-item">
<text class="iconfont icon-shijian icon"></text> <text class="iconfont icon-shijian icon"></text>
<picker mode="date" @change="bindDateChange" class="picker"> <picker mode="date" @change="bindDateChange" class="picker">
@ -225,7 +270,14 @@ export default {
content: "", content: "",
cateId: 0, cateId: 0,
uploadImages: [], uploadImages: [],
addressText: "", address: {
lng: 0.0,
lat: 0.0,
text: "",
detail: "",
name: "",
mobile: "",
},
date: "", date: "",
time: "", time: "",
insurance: false, insurance: false,
@ -338,15 +390,16 @@ export default {
/** /**
* 选择地址 * 选择地址
*/ */
selectAddress() { chooseLocation() {
const that = this; const that = this;
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.addressId, { uni.chooseLocation({
events: { success({ name, address, longitude, latitude }) {
setAddress(address) { that.address.text = address;
that.addressId = address.id; that.address.detail = name;
that.addressText = address.address + address.detail; that.address.lng = longitude;
}, that.address.lat = latitude;
}, },
fail(error) {},
}); });
}, },
/** /**
@ -402,8 +455,11 @@ export default {
* 发布报价 * 发布报价
*/ */
submit() { submit() {
if (!this.addressId) { if (this.address.text == "" || this.address.detail == "" || this.address.name == "") {
return this.$utils.toast("请选择地址"); return this.$utils.toast("请完善地址信息");
}
if (!this.$test.mobile(this.address.mobile)) {
return this.$utils.toast("请填写正确的手机号码");
} }
if (!this.date || !this.time) { if (!this.date || !this.time) {
return this.$utils.toast("请选择时间和日期"); return this.$utils.toast("请选择时间和日期");
@ -415,7 +471,14 @@ export default {
types: this.type, types: this.type,
desc: this.content, desc: this.content,
img: this.uploadImages, img: this.uploadImages,
addid: this.addressId, address: {
address: this.address.text,
doorplate: this.address.detail,
name: this.address.name,
mobil: this.address.mobile,
lng: this.address.lng,
lat: this.address.lat,
},
times: datetime, times: datetime,
baoxian: this.insurance ? 1 : 0, baoxian: this.insurance ? 1 : 0,
money: this.price, money: this.price,
@ -579,21 +642,16 @@ export default {
} }
} }
.common-form-container.form-widget { .common-form-container.form-widget {
margin-top: 22rpx;
.input-item { .input-item {
height: auto; height: auto;
padding: 0; padding: 0;
border-bottom: 0; border-bottom: 0;
line-height: unset; line-height: unset;
} }
.title-box {
width: 100%;
box-sizing: border-box;
padding: 30rpx 0 0 30rpx;
}
.input-box { .input-box {
width: 100%; width: 100%;
padding-bottom: 0; padding-bottom: 0;
padding: 0;
} }
.widget-item:first-child { .widget-item:first-child {
border-bottom: 1rpx solid #e8e7e7; border-bottom: 1rpx solid #e8e7e7;
@ -642,6 +700,37 @@ export default {
} }
} }
} }
.common-form-container.address {
width: 100%;
margin-top: 22rpx;
.title-box.title {
width: 100%;
font-weight: bold;
box-sizing: border-box;
}
.title-box {
font-weight: normal;
}
.input-box.map {
.address-text {
font-size: 28rpx;
line-height: 38rpx;
color: #c9c9c9;
box-sizing: border-box;
padding-right: 40rpx;
}
.address-text.active {
color: #000000;
}
.iconfont {
position: absolute;
top: 28rpx;
right: 0;
font-size: 35rpx;
color: #8194f2;
}
}
}
.price-box { .price-box {
.submit-price { .submit-price {
width: 100%; width: 100%;

5
src/pages/member/member.vue
View File

@ -29,11 +29,6 @@
</view> </view>
<view class="menu-container"> <view class="menu-container">
<view class="common-form-widget-group"> <view class="common-form-widget-group">
<view class="widget-item" @click="utils.toPage('/pages/address/address?openType=list')">
<text class="iconfont icon-dingwei icon"></text>
<text class="title">我的地址</text>
<text class="iconfont icon-jinru more"></text>
</view>
<view class="widget-item" @click="utils.toPage('/pages/member/complaint')"> <view class="widget-item" @click="utils.toPage('/pages/member/complaint')">
<text class="iconfont icon-tousu icon"></text> <text class="iconfont icon-tousu icon"></text>
<text class="title">意见投诉</text> <text class="title">意见投诉</text>

127
src/pages/order/create.vue
View File

@ -4,16 +4,59 @@
<widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" /> <widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" />
</view> </view>
<view class="create-order-container"> <view class="create-order-container">
<view class="common-form-widget-group"> <view class="common-form-container">
<view class="widget-item" @click="selectAddress"> <view class="input-item">
<text class="iconfont icon-dingwei icon"></text> <view class="title-box">
<text class="title"> <text>服务地址</text>
<text class="text limit-line clamp-1"> </view>
{{ addressText ? addressText : "请选择上门地址" }} <view class="input-box map" @click="chooseLocation">
</text> <view class="address-text limit-line clamp-1" :class="{ active: address.text }">
</text> {{ address.text ? address.text : "点击选择服务地址" }}
<text class="iconfont icon-jinru more"></text> </view>
<text class="iconfont icon-dingwei"></text>
</view>
</view> </view>
<view class="input-item">
<view class="title-box">
<text>门牌号</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.detail"
placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>联系人</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.name"
placeholder="请输入姓名"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>手机号码</text>
</view>
<view class="input-box">
<input
class="input"
v-model="address.mobile"
placeholder="请输入手机号码"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
</view>
<view class="common-form-widget-group">
<view class="widget-item"> <view class="widget-item">
<text class="iconfont icon-shijian icon"></text> <text class="iconfont icon-shijian icon"></text>
<picker mode="date" @change="bindDateChange" class="picker"> <picker mode="date" @change="bindDateChange" class="picker">
@ -77,8 +120,14 @@ export default {
return { return {
utils: this.$utils, utils: this.$utils,
pageConfig: {}, pageConfig: {},
addressId: 0, address: {
addressText: "", lng: 0.0,
lat: 0.0,
text: "",
detail: "",
name: "",
mobile: "",
},
date: "", date: "",
time: "", time: "",
content: "", content: "",
@ -150,15 +199,16 @@ export default {
/** /**
* 选择地址 * 选择地址
*/ */
selectAddress() { chooseLocation() {
const that = this; const that = this;
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.addressId, { uni.chooseLocation({
events: { success({ name, address, longitude, latitude }) {
setAddress(address) { that.address.text = address;
that.addressId = address.id; that.address.detail = name;
that.addressText = address.address + address.detail; that.address.lng = longitude;
}, that.address.lat = latitude;
}, },
fail(error) {},
}); });
}, },
/** /**
@ -176,8 +226,11 @@ export default {
* 下单支付 * 下单支付
*/ */
pay() { pay() {
if (!this.addressId) { if (this.address.text == "" || this.address.detail == "" || this.address.name == "") {
return this.$utils.toast("请选择地址"); return this.$utils.toast("请完善地址信息");
}
if (!this.$test.mobile(this.address.mobile)) {
return this.$utils.toast("请填写正确的手机号码");
} }
if (!this.date || !this.time) { if (!this.date || !this.time) {
return this.$utils.toast("请选择时间和日期"); return this.$utils.toast("请选择时间和日期");
@ -186,7 +239,14 @@ export default {
this.$models.order this.$models.order
.createOrder({ .createOrder({
ids: this.orderData, ids: this.orderData,
addid: this.addressId, address: {
address: this.address.text,
doorplate: this.address.detail,
name: this.address.name,
mobil: this.address.mobile,
lng: this.address.lng,
lat: this.address.lat,
},
times: datetime, times: datetime,
baoxian: this.insurance ? 1 : 0, baoxian: this.insurance ? 1 : 0,
desc: this.content, desc: this.content,
@ -298,4 +358,29 @@ export default {
background-color: #ffffff; background-color: #ffffff;
} }
} }
.common-form-container {
width: 100%;
.title-box {
font-weight: normal;
}
.input-box.map {
.address-text {
font-size: 28rpx;
line-height: 38rpx;
color: #c9c9c9;
box-sizing: border-box;
padding-right: 40rpx;
}
.address-text.active {
color: #000000;
}
.iconfont {
position: absolute;
top: 28rpx;
right: 0;
font-size: 35rpx;
color: #8194f2;
}
}
}
</style> </style>

265
src/pages/service/other/distribution.vue
View File

@ -18,17 +18,8 @@
</view> </view>
</view> </view>
<view class="form-item"> <view class="form-item">
<view class="form-item-title">取货地址</view> <view class="form-item-title">服务时间</view>
<view class="common-form-widget-group"> <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"> <view class="widget-item">
<text class="iconfont icon-shijian icon"></text> <text class="iconfont icon-shijian icon"></text>
<picker mode="date" @change="bindDateChange" class="picker"> <picker mode="date" @change="bindDateChange" class="picker">
@ -53,43 +44,138 @@
</view> </view>
</view> </view>
</view> </view>
<view class="form-item">
<view class="form-item-title">取货地址</view>
<view class="common-form-container">
<view class="input-item">
<view class="title-box">
<text>服务地址</text>
</view>
<view class="input-box map" @click="selectPickupAddress">
<view class="address-text limit-line clamp-1" :class="{ active: pickupAddress.text }">
{{ pickupAddress.text ? pickupAddress.text : "点击选择服务地址" }}
</view>
<text class="iconfont icon-dingwei"></text>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>门牌号</text>
</view>
<view class="input-box">
<input
class="input"
v-model="pickupAddress.detail"
placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>联系人</text>
</view>
<view class="input-box">
<input
class="input"
v-model="pickupAddress.name"
placeholder="请输入姓名"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>手机号码</text>
</view>
<view class="input-box">
<input
class="input"
v-model="pickupAddress.mobile"
placeholder="请输入手机号码"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
</view>
</view>
<view class="form-item"> <view class="form-item">
<view class="form-item-title">卸货地址</view> <view class="form-item-title">卸货地址</view>
<view class="common-form-widget-group"> <view class="common-form-container">
<view class="widget-item" @click="selectUnloadAddress"> <view class="input-item">
<text class="iconfont icon-dingwei icon"></text> <view class="title-box">
<text class="title"> <text>服务地址</text>
<text class="limit-line clamp-1"> </view>
{{ unloadAddressText ? unloadAddressText : "请选择卸货地址" }} <view class="input-box map" @click="selectUnloadAddress">
</text> <view class="address-text limit-line clamp-1" :class="{ active: unloadAddress.text }">
</text> {{ unloadAddress.text ? unloadAddress.text : "点击选择服务地址" }}
<text class="iconfont icon-jinru more"></text> </view>
<text class="iconfont icon-dingwei"></text>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>门牌号</text>
</view>
<view class="input-box">
<input
class="input"
v-model="unloadAddress.detail"
placeholder="请输入详细地址，如8栋5单元18a"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>联系人</text>
</view>
<view class="input-box">
<input
class="input"
v-model="unloadAddress.name"
placeholder="请输入姓名"
placeholder-class="placeholder-style-3"
/>
</view>
</view>
<view class="input-item">
<view class="title-box">
<text>手机号码</text>
</view>
<view class="input-box">
<input
class="input"
v-model="unloadAddress.mobile"
placeholder="请输入手机号码"
placeholder-class="placeholder-style-3"
/>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="form-item distance"> <view class="form-item distance">
<view class="input-title">预估配送公里数</view> <view class="input-title">预估价格</view>
<view class="input-box"> <view class="input-box">
<input <input
class="input" class="input"
v-model="distance" v-model="price"
type="number" type="number"
placeholder="请输入预估配送预估公里数" placeholder="请输入预估配送价格"
placeholder-class="placeholder-style-4" placeholder-class="placeholder-style-3"
@input="changeDistance(distance)"
/> />
<text class="unit">km</text> <text class="unit">元</text>
</view> </view>
</view> </view>
<view class="form-item explain"> <view class="form-item explain">
<view class="form-item-title">配送说明</view> <view class="form-item-title">配送说明</view>
<view class="textarea-box"> <view class="textarea-box">
<text>每公里配送费为{{ unitPrice }}元，{{ minDistance }}公里以下按{{ minDistance }}公里计算</text> <text>请合理预估价格，价格过低可能会导致长时间无师傅接单。</text>
</view> </view>
</view> </view>
</view> </view>
<view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }"> <view class="common-bottom-components" :style="{ paddingBottom: pageConfig.safeAreaInsets.bottom + 'px' }">
<text class="price">¥ {{ utils.formatNumber(total) }}</text> <text class="price">¥ {{ utils.formatNumber(price) }}</text>
<view class="btn" @click="submit"> <view class="btn" @click="submit">
<div class="text">立即支付</div> <div class="text">立即支付</div>
</view> </view>
@ -106,17 +192,31 @@ export default {
utils: this.$utils, utils: this.$utils,
pageConfig: {}, pageConfig: {},
carTypeList: [], carTypeList: [],
unitPrice: 0,
minDistance: 0,
carTypeId: 0, carTypeId: 0,
carTypeText: "", carTypeText: "",
pickupAddress: {
lng: 0.0,
lat: 0.0,
text: "",
detail: "",
name: "",
mobile: "",
},
unloadAddress: {
lng: 0.0,
lat: 0.0,
text: "",
detail: "",
name: "",
mobile: "",
},
pickupAddressId: 0, pickupAddressId: 0,
pickupAddressText: "", pickupAddressText: "",
unloadAddressId: 0, unloadAddressId: 0,
unloadAddressText: "", unloadAddressText: "",
date: "", date: "",
time: "", time: "",
distance: null, price: null,
content: "", content: "",
total: 0, total: 0,
}; };
@ -126,10 +226,6 @@ export default {
}, },
onLoad() { onLoad() {
this.pageConfig = getApp().globalData.pageConfig; 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.$models.service.distributionCar().then((list) => {
this.carTypeList = list; this.carTypeList = list;
}); });
@ -154,13 +250,14 @@ export default {
*/ */
selectPickupAddress() { selectPickupAddress() {
const that = this; const that = this;
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.pickupAddressId, { uni.chooseLocation({
events: { success({ name, address, longitude, latitude }) {
setAddress(address) { that.pickupAddress.text = address;
that.pickupAddressId = address.id; that.pickupAddress.detail = name;
that.pickupAddressText = address.address + address.detail; that.pickupAddress.lng = longitude;
}, that.pickupAddress.lat = latitude;
}, },
fail(error) {},
}); });
}, },
/** /**
@ -168,13 +265,14 @@ export default {
*/ */
selectUnloadAddress() { selectUnloadAddress() {
const that = this; const that = this;
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.unloadAddressId, { uni.chooseLocation({
events: { success({ name, address, longitude, latitude }) {
setAddress(address) { that.unloadAddress.text = address;
that.unloadAddressId = address.id; that.unloadAddress.detail = name;
that.unloadAddressText = address.address + address.detail; that.unloadAddress.lng = longitude;
}, that.unloadAddress.lat = latitude;
}, },
fail(error) {},
}); });
}, },
/** /**
@ -189,35 +287,55 @@ export default {
bindTimeChange(e) { bindTimeChange(e) {
this.time = e.detail.value; this.time = e.detail.value;
}, },
/**
* 计算价格
*/
changeDistance(num) {
num = parseFloat(num);
if (num < this.minDistance) {
num = this.minDistance;
}
this.total = num * this.unitPrice;
},
/** /**
* 提交订单 * 提交订单
*/ */
submit() { submit() {
if (!this.pickupAddressId || !this.unloadAddressId) { if (!this.carTypeId) {
return this.$utils.toast("请选择地址"); return this.$utils.toast("请选择车型");
} }
if (!this.date || !this.time) { if (!this.date || !this.time) {
return this.$utils.toast("请选择时间和日期"); return this.$utils.toast("请选择时间和日期");
} }
if (
this.pickupAddress.text == "" ||
this.pickupAddress.detail == "" ||
this.pickupAddress.name == "" ||
this.unloadAddress.text == "" ||
this.unloadAddress.detail == "" ||
this.unloadAddress.name == ""
) {
return this.$utils.toast("请完善地址信息");
}
if (!this.$test.mobile(this.pickupAddress.mobile) || !this.$test.mobile(this.unloadAddress.mobile)) {
return this.$utils.toast("请填写正确的手机号码");
}
let datetime = this.date + " " + this.time; let datetime = this.date + " " + this.time;
if (!this.price) {
return this.$utils.toast("请输入预估价格");
}
this.$models.service this.$models.service
.createDistributionOrder({ .createDistributionOrder({
car: this.carTypeId, car: this.carTypeId,
address: this.pickupAddressId, address: {
addressb: this.unloadAddressId, address: this.pickupAddress.text,
doorplate: this.pickupAddress.detail,
name: this.pickupAddress.name,
mobil: this.pickupAddress.mobile,
lng: this.pickupAddress.lng,
lat: this.pickupAddress.lat,
},
addressb: {
address: this.unloadAddress.text,
doorplate: this.unloadAddress.detail,
name: this.unloadAddress.name,
mobil: this.unloadAddress.mobile,
lng: this.unloadAddress.lng,
lat: this.unloadAddress.lat,
},
starttime: datetime, starttime: datetime,
sendtime: 0, sendtime: 0,
distance: this.distance, money: this.price,
}) })
.then((data) => { .then((data) => {
this.$store.commit("system/currentOrderTabIndex", 2); this.$store.commit("system/currentOrderTabIndex", 2);
@ -332,4 +450,29 @@ export default {
} }
} }
} }
.common-form-container {
width: 100%;
.title-box {
font-weight: normal;
}
.input-box.map {
.address-text {
font-size: 28rpx;
line-height: 38rpx;
color: #c9c9c9;
box-sizing: border-box;
padding-right: 40rpx;
}
.address-text.active {
color: #000000;
}
.iconfont {
position: absolute;
top: 28rpx;
right: 0;
font-size: 35rpx;
color: #8194f2;
}
}
}
</style> </style>