修改下单时的地址为填写方式、删除地址管理相关页面
This commit is contained in:
parent
e00888cdf5
commit
3ff0dcefee
17
src/App.vue
17
src/App.vue
|
|
@ -176,11 +176,23 @@ export default {
|
|||
.widget-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.widget-item.input {
|
||||
.picker,
|
||||
.title {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.title {
|
||||
padding: 0;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
}
|
||||
.widget-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
margin-top: 2rpx;
|
||||
padding: 44rpx 30rpx;
|
||||
|
|
@ -237,6 +249,7 @@ export default {
|
|||
font-weight: bold;
|
||||
line-height: 30rpx;
|
||||
color: #2d2d2d;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.desc {
|
||||
font-size: 28rpx;
|
||||
|
|
@ -268,7 +281,7 @@ export default {
|
|||
line-height: 30rpx;
|
||||
// input
|
||||
.input-box {
|
||||
width: 500rpx;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding: 25rpx 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,18 +109,6 @@
|
|||
"navigationBarTitleText": "修改密码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/address/address",
|
||||
"style": {
|
||||
"navigationBarTitleText": "地址管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/address/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新增地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/service/other/after-market",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
<textarea
|
||||
v-model="content"
|
||||
class="textarea"
|
||||
placeholder="请您详细填写需求说明"
|
||||
placeholder="请尽量描述您的产品名称，型号，数量"
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
</view>
|
||||
|
|
@ -105,23 +105,68 @@
|
|||
</block>
|
||||
</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="input-item">
|
||||
<view class="common-form-widget-group">
|
||||
<view class="title-box">
|
||||
<text>选择报价方式</text>
|
||||
<text class="desc">（隐私信息完全保密）</text>
|
||||
</view>
|
||||
<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">
|
||||
<text class="iconfont icon-shijian icon"></text>
|
||||
<picker mode="date" @change="bindDateChange" class="picker">
|
||||
|
|
@ -225,7 +270,14 @@ export default {
|
|||
content: "",
|
||||
cateId: 0,
|
||||
uploadImages: [],
|
||||
addressText: "",
|
||||
address: {
|
||||
lng: 0.0,
|
||||
lat: 0.0,
|
||||
text: "",
|
||||
detail: "",
|
||||
name: "",
|
||||
mobile: "",
|
||||
},
|
||||
date: "",
|
||||
time: "",
|
||||
insurance: false,
|
||||
|
|
@ -338,15 +390,16 @@ export default {
|
|||
/**
|
||||
* 选择地址
|
||||
*/
|
||||
selectAddress() {
|
||||
chooseLocation() {
|
||||
const that = this;
|
||||
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.addressId, {
|
||||
events: {
|
||||
setAddress(address) {
|
||||
that.addressId = address.id;
|
||||
that.addressText = address.address + address.detail;
|
||||
},
|
||||
uni.chooseLocation({
|
||||
success({ name, address, longitude, latitude }) {
|
||||
that.address.text = address;
|
||||
that.address.detail = name;
|
||||
that.address.lng = longitude;
|
||||
that.address.lat = latitude;
|
||||
},
|
||||
fail(error) {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
|
|
@ -402,8 +455,11 @@ export default {
|
|||
* 发布报价
|
||||
*/
|
||||
submit() {
|
||||
if (!this.addressId) {
|
||||
return this.$utils.toast("请选择地址");
|
||||
if (this.address.text == "" || this.address.detail == "" || this.address.name == "") {
|
||||
return this.$utils.toast("请完善地址信息");
|
||||
}
|
||||
if (!this.$test.mobile(this.address.mobile)) {
|
||||
return this.$utils.toast("请填写正确的手机号码");
|
||||
}
|
||||
if (!this.date || !this.time) {
|
||||
return this.$utils.toast("请选择时间和日期");
|
||||
|
|
@ -415,7 +471,14 @@ export default {
|
|||
types: this.type,
|
||||
desc: this.content,
|
||||
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,
|
||||
baoxian: this.insurance ? 1 : 0,
|
||||
money: this.price,
|
||||
|
|
@ -579,21 +642,16 @@ export default {
|
|||
}
|
||||
}
|
||||
.common-form-container.form-widget {
|
||||
margin-top: 22rpx;
|
||||
.input-item {
|
||||
height: auto;
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
line-height: unset;
|
||||
}
|
||||
.title-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx 0 0 30rpx;
|
||||
}
|
||||
.input-box {
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.widget-item:first-child {
|
||||
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 {
|
||||
.submit-price {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -29,11 +29,6 @@
|
|||
</view>
|
||||
<view class="menu-container">
|
||||
<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')">
|
||||
<text class="iconfont icon-tousu icon"></text>
|
||||
<text class="title">意见投诉</text>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,59 @@
|
|||
<widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" />
|
||||
</view>
|
||||
<view class="create-order-container">
|
||||
<view class="common-form-widget-group">
|
||||
<view class="widget-item" @click="selectAddress">
|
||||
<text class="iconfont icon-dingwei icon"></text>
|
||||
<text class="title">
|
||||
<text class="text limit-line clamp-1">
|
||||
{{ addressText ? addressText : "请选择上门地址" }}
|
||||
</text>
|
||||
</text>
|
||||
<text class="iconfont icon-jinru more"></text>
|
||||
<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.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-widget-group">
|
||||
<view class="widget-item">
|
||||
<text class="iconfont icon-shijian icon"></text>
|
||||
<picker mode="date" @change="bindDateChange" class="picker">
|
||||
|
|
@ -77,8 +120,14 @@ export default {
|
|||
return {
|
||||
utils: this.$utils,
|
||||
pageConfig: {},
|
||||
addressId: 0,
|
||||
addressText: "",
|
||||
address: {
|
||||
lng: 0.0,
|
||||
lat: 0.0,
|
||||
text: "",
|
||||
detail: "",
|
||||
name: "",
|
||||
mobile: "",
|
||||
},
|
||||
date: "",
|
||||
time: "",
|
||||
content: "",
|
||||
|
|
@ -150,15 +199,16 @@ export default {
|
|||
/**
|
||||
* 选择地址
|
||||
*/
|
||||
selectAddress() {
|
||||
chooseLocation() {
|
||||
const that = this;
|
||||
this.$utils.toPage("/pages/address/address?openType=choose&id=" + that.addressId, {
|
||||
events: {
|
||||
setAddress(address) {
|
||||
that.addressId = address.id;
|
||||
that.addressText = address.address + address.detail;
|
||||
},
|
||||
uni.chooseLocation({
|
||||
success({ name, address, longitude, latitude }) {
|
||||
that.address.text = address;
|
||||
that.address.detail = name;
|
||||
that.address.lng = longitude;
|
||||
that.address.lat = latitude;
|
||||
},
|
||||
fail(error) {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
|
|
@ -176,8 +226,11 @@ export default {
|
|||
* 下单支付
|
||||
*/
|
||||
pay() {
|
||||
if (!this.addressId) {
|
||||
return this.$utils.toast("请选择地址");
|
||||
if (this.address.text == "" || this.address.detail == "" || this.address.name == "") {
|
||||
return this.$utils.toast("请完善地址信息");
|
||||
}
|
||||
if (!this.$test.mobile(this.address.mobile)) {
|
||||
return this.$utils.toast("请填写正确的手机号码");
|
||||
}
|
||||
if (!this.date || !this.time) {
|
||||
return this.$utils.toast("请选择时间和日期");
|
||||
|
|
@ -186,7 +239,14 @@ export default {
|
|||
this.$models.order
|
||||
.createOrder({
|
||||
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,
|
||||
baoxian: this.insurance ? 1 : 0,
|
||||
desc: this.content,
|
||||
|
|
@ -298,4 +358,29 @@ export default {
|
|||
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>
|
||||
|
|
@ -18,17 +18,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-item-title">取货地址</view>
|
||||
<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">
|
||||
|
|
@ -53,43 +44,138 @@
|
|||
</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-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 class="common-form-container">
|
||||
<view class="input-item">
|
||||
<view class="title-box">
|
||||
<text>服务地址</text>
|
||||
</view>
|
||||
<view class="input-box map" @click="selectUnloadAddress">
|
||||
<view class="address-text limit-line clamp-1" :class="{ active: unloadAddress.text }">
|
||||
{{ unloadAddress.text ? unloadAddress.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 class="form-item distance">
|
||||
<view class="input-title">预估配送公里数</view>
|
||||
<view class="input-title">预估价格</view>
|
||||
<view class="input-box">
|
||||
<input
|
||||
class="input"
|
||||
v-model="distance"
|
||||
v-model="price"
|
||||
type="number"
|
||||
placeholder="请输入预估配送预估公里数"
|
||||
placeholder-class="placeholder-style-4"
|
||||
@input="changeDistance(distance)"
|
||||
placeholder="请输入预估配送价格"
|
||||
placeholder-class="placeholder-style-3"
|
||||
/>
|
||||
<text class="unit">km</text>
|
||||
<text class="unit">元</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item explain">
|
||||
<view class="form-item-title">配送说明</view>
|
||||
<view class="textarea-box">
|
||||
<text>每公里配送费为{{ unitPrice }}元，{{ minDistance }}公里以下按{{ minDistance }}公里计算</text>
|
||||
<text>请合理预估价格，价格过低可能会导致长时间无师傅接单。</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<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">
|
||||
<div class="text">立即支付</div>
|
||||
</view>
|
||||
|
|
@ -106,17 +192,31 @@ export default {
|
|||
utils: this.$utils,
|
||||
pageConfig: {},
|
||||
carTypeList: [],
|
||||
unitPrice: 0,
|
||||
minDistance: 0,
|
||||
carTypeId: 0,
|
||||
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,
|
||||
pickupAddressText: "",
|
||||
unloadAddressId: 0,
|
||||
unloadAddressText: "",
|
||||
date: "",
|
||||
time: "",
|
||||
distance: null,
|
||||
price: null,
|
||||
content: "",
|
||||
total: 0,
|
||||
};
|
||||
|
|
@ -126,10 +226,6 @@ export default {
|
|||
},
|
||||
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;
|
||||
});
|
||||
|
|
@ -154,13 +250,14 @@ export default {
|
|||
*/
|
||||
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;
|
||||
},
|
||||
uni.chooseLocation({
|
||||
success({ name, address, longitude, latitude }) {
|
||||
that.pickupAddress.text = address;
|
||||
that.pickupAddress.detail = name;
|
||||
that.pickupAddress.lng = longitude;
|
||||
that.pickupAddress.lat = latitude;
|
||||
},
|
||||
fail(error) {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
|
|
@ -168,13 +265,14 @@ export default {
|
|||
*/
|
||||
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;
|
||||
},
|
||||
uni.chooseLocation({
|
||||
success({ name, address, longitude, latitude }) {
|
||||
that.unloadAddress.text = address;
|
||||
that.unloadAddress.detail = name;
|
||||
that.unloadAddress.lng = longitude;
|
||||
that.unloadAddress.lat = latitude;
|
||||
},
|
||||
fail(error) {},
|
||||
});
|
||||
},
|
||||
/**
|
||||
|
|
@ -189,35 +287,55 @@ export default {
|
|||
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.carTypeId) {
|
||||
return this.$utils.toast("请选择车型");
|
||||
}
|
||||
if (!this.date || !this.time) {
|
||||
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;
|
||||
if (!this.price) {
|
||||
return this.$utils.toast("请输入预估价格");
|
||||
}
|
||||
this.$models.service
|
||||
.createDistributionOrder({
|
||||
car: this.carTypeId,
|
||||
address: this.pickupAddressId,
|
||||
addressb: this.unloadAddressId,
|
||||
address: {
|
||||
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,
|
||||
sendtime: 0,
|
||||
distance: this.distance,
|
||||
money: this.price,
|
||||
})
|
||||
.then((data) => {
|
||||
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>
|
||||
Loading…
Reference in New Issue