forked from angelo/web-retail-h5
351 lines
8.6 KiB
Vue
351 lines
8.6 KiB
Vue
<template>
|
||
<view class="main">
|
||
<view class="contents">
|
||
<u-form :model="addressForm" labelWidth="auto" ref="uForm">
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="收货人"
|
||
label-width="100px"
|
||
prop="recName"
|
||
>
|
||
<u-input
|
||
:maxlength="40"
|
||
v-model.trim="addressForm.recName"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
placeholder="请输入收货人姓名"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="联系方式"
|
||
label-width="100px"
|
||
prop="recPhone"
|
||
>
|
||
<u-input
|
||
v-if="pkCountry == 1"
|
||
v-model.trim="addressForm.recPhone"
|
||
placeholder-class="place-class"
|
||
:maxlength="11"
|
||
class="border-color"
|
||
type="number"
|
||
placeholder="请输入联系方式"
|
||
/>
|
||
<u-input
|
||
v-else
|
||
v-model.trim="addressForm.recPhone"
|
||
placeholder-class="place-class"
|
||
:maxlength="30"
|
||
class="border-color"
|
||
placeholder="请输入联系方式"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class" @click="getDiqu">
|
||
<u-form-item label="收货地址" label-width="100px" prop="address">
|
||
<view
|
||
v-if="address"
|
||
style="font-size: 28rpx; color: #333; margin-left: 20rpx"
|
||
>{{ address }}</view
|
||
>
|
||
<view
|
||
style="
|
||
margin-left: 20rpx;
|
||
font-size: 28rpx;
|
||
color: rgb(192, 196, 204);
|
||
"
|
||
v-else
|
||
>请选择收货地址</view
|
||
>
|
||
</u-form-item>
|
||
<view class="drop">
|
||
<image src="../../static/images/drop.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="view-class">
|
||
<u-form-item
|
||
label="详细地址"
|
||
class="label-style"
|
||
label-width="100px"
|
||
prop="recAddress"
|
||
>
|
||
<u-textarea
|
||
v-model.trim="addressForm.recAddress"
|
||
placeholder-class="place-class"
|
||
class="border-color"
|
||
maxlength="200"
|
||
placeholder="请输入详细地址"
|
||
/>
|
||
</u-form-item>
|
||
</view>
|
||
<view class="view-class flex-s">
|
||
<view> 设为默认地址 </view>
|
||
<view @click="checkTap">
|
||
<view class="check" v-if="addressForm.isDefault == 0">
|
||
<view></view>
|
||
</view>
|
||
<view class="check" v-else>
|
||
<image src="../../static/images/check.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
<v-address
|
||
ref="address"
|
||
@getAddressData="AddressData"
|
||
:defaultCode="defaultCode"
|
||
@addressData="addressData"
|
||
></v-address>
|
||
<u-button
|
||
:disabled="!addressForm.recName || !addressForm.recPhone || !addressForm.recAddress"
|
||
type="success"
|
||
shape="circle"
|
||
class="btn"
|
||
@click="submit"
|
||
color="#005BAC"
|
||
:loading="loading"
|
||
>
|
||
确定
|
||
</u-button>
|
||
<view style="height: 20rpx"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as api from "@/config/login.js";
|
||
import { setToken } from "@/config/auth.js";
|
||
import address from "@/components/address.vue";
|
||
import store from "@/store";
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: "",
|
||
pkCountry:'',
|
||
check: false,
|
||
address: "",
|
||
defaultCode: [],
|
||
urls: "/member/api/maker-space/update-file",
|
||
addressForm: {
|
||
recName: "",
|
||
recPhone: "",
|
||
recProvince: "",
|
||
recCity: "",
|
||
recCounty: "",
|
||
recAddress: "",
|
||
isDefault: 0,
|
||
pkId: "",
|
||
},
|
||
loading: false,
|
||
rules: {
|
||
recName: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: "姓名不能为空",
|
||
},
|
||
],
|
||
recAddress: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: "详细地址不能为空",
|
||
},
|
||
],
|
||
recProvince: [
|
||
{
|
||
// 必填项
|
||
required: true,
|
||
// 提示内容（会出现在u-form-item内的底部）
|
||
message: "地址不能为空",
|
||
|
||
trigger: ["change"],
|
||
},
|
||
],
|
||
recPhone: [
|
||
{
|
||
required: true,
|
||
message: "请输入手机号",
|
||
trigger: ["blur"],
|
||
},
|
||
// {
|
||
// validator: (rule, value, callback) => {
|
||
// return this.$u.test.mobile(value);
|
||
// },
|
||
// message: "手机号格式不正确",
|
||
// trigger: ["blur"],
|
||
// },
|
||
],
|
||
},
|
||
};
|
||
},
|
||
onLoad(option) {
|
||
if (option.pkId) {
|
||
this.getAddress(option.pkId);
|
||
uni.setNavigationBarTitle({
|
||
title: "修改收货地址",
|
||
});
|
||
}
|
||
this.pkCountry = uni.getStorageSync("pkCountry");
|
||
this.userInfo = uni.getStorageSync("User");
|
||
},
|
||
onReady() {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
},
|
||
components: {
|
||
"v-address": address,
|
||
},
|
||
methods: {
|
||
AddressData(name) {
|
||
this.address = name;
|
||
},
|
||
submit() {
|
||
this.$refs.uForm.validate().then((res) => {
|
||
this.loading = true
|
||
api.saveAddress(this.addressForm).then((res) => {
|
||
if (res.code == "200") {
|
||
const toast = uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
complete() {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
uni.navigateBack(1)
|
||
toast.hideToast()
|
||
}, 500);
|
||
},
|
||
});
|
||
} else {
|
||
this.loading = false
|
||
}
|
||
}).catch(() => {
|
||
this.loading = false
|
||
})
|
||
});
|
||
},
|
||
getDiqu() {
|
||
this.$refs.address.setShow();
|
||
},
|
||
addressData(diqu, obj) {
|
||
this.address = diqu;
|
||
this.addressForm.recProvince = obj.province;
|
||
this.addressForm.recCity = obj.city;
|
||
this.addressForm.recCounty = obj.county;
|
||
this.$forceUpdate();
|
||
// this.getPostAge()
|
||
// this.queryAdressPostage()
|
||
},
|
||
checkTap() {
|
||
if (this.addressForm.isDefault == 0) {
|
||
this.addressForm.isDefault = 1;
|
||
} else {
|
||
this.addressForm.isDefault = 0;
|
||
}
|
||
},
|
||
getAddressData(e) {
|
||
console.error(e);
|
||
},
|
||
getAddress(id) {
|
||
api
|
||
.getAddress(id)
|
||
.then((res) => {
|
||
if (res) {
|
||
this.addressForm = {
|
||
recName: res.data.recName,
|
||
recPhone: res.data.recPhone,
|
||
recProvince: res.data.recProvince,
|
||
recCity: res.data.recCity,
|
||
recCounty: res.data.recCounty || "",
|
||
pkId: res.data.pkId,
|
||
recAddress: res.data.recAddress,
|
||
isDefault: res.data.isDefault,
|
||
};
|
||
this.defaultCode = [
|
||
res.data.recProvince,
|
||
res.data.recCity,
|
||
res.data.recCounty || "",
|
||
];
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
reject(error);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:v-deep .u-form-item__body__right__message {
|
||
margin-left: 215rpx !important;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
.drop {
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
}
|
||
}
|
||
.check {
|
||
position: relative;
|
||
view {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 1rpx solid #dddddd;
|
||
border-radius: 50%;
|
||
margin-top: 25rpx;
|
||
}
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
right: 0rpx;
|
||
top: 25rpx;
|
||
// margin-top: 20rpx;
|
||
}
|
||
}
|
||
.flex-s {
|
||
justify-content: space-between;
|
||
display: flex;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
}
|
||
.label-style {
|
||
display: block !important;
|
||
}
|
||
:v-deep .label-style .u-form-item__body__left {
|
||
display: block !important;
|
||
margin-top: 20rpx;
|
||
}
|
||
.uni-textarea {
|
||
height: 100rpx;
|
||
}
|
||
.view-class {
|
||
border-bottom: 1rpx solid #eee;
|
||
margin: 0 30rpx;
|
||
position: relative;
|
||
}
|
||
.border-color {
|
||
border: none;
|
||
}
|
||
page {
|
||
background-color: #f2f2f2;
|
||
}
|
||
.contents {
|
||
background-color: #fff;
|
||
}
|
||
.btn {
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 30rpx;
|
||
margin: 40rpx auto;
|
||
width: 690rpx;
|
||
}
|
||
</style>
|