You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
7.9 KiB
327 lines
7.9 KiB
<template>
|
|
|
|
<BaseContainer class="add-address">
|
|
<NavBar :title="title" />
|
|
<view class="form">
|
|
<view class="form-box">
|
|
<view class="section">
|
|
<view class="label flex flex-center-x">
|
|
<view class="left-prop">姓名</view>
|
|
<input v-model="realName" type="text" placeholder="请输入姓名" placeholder-class="input-placeholder"/>
|
|
</view>
|
|
<view class="label flex flex-center-x">
|
|
<view class="left-prop">联系电话</view>
|
|
<input v-model="phone" type="tel" maxlength="11" placeholder="请输入手机号" placeholder-class="input-placeholder" />
|
|
</view>
|
|
<view class="label flex flex-center-x" v-if="type">
|
|
<view class="left-prop">所在地区</view>
|
|
<AddressPicker ref="picker" style="width: 440rpx;" :address="address.district" @change="handleCityChange" />
|
|
<!-- <image
|
|
class="address-icon"
|
|
mode="heightFix"
|
|
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
|
|
/> -->
|
|
<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
|
|
</view>
|
|
<view class="label flex flex-center-x" v-else>
|
|
<view class="left-prop">所在地区</view>
|
|
<view @click="showPicker" style="flex: 1;">
|
|
<input
|
|
v-model="area"
|
|
disabled
|
|
placeholder="请选择"
|
|
readonly
|
|
style="pointer-events: none;"
|
|
placeholder-class="input-placeholder"
|
|
/>
|
|
</view>
|
|
<!-- <image
|
|
class="address-icon"
|
|
mode="heightFix"
|
|
:src="getImgPath('/wap/first/zsff/images/location_fill.png')"
|
|
/> -->
|
|
<text class="iconfont iconxiangyou" style="color: #CBCBCB"></text>
|
|
</view>
|
|
|
|
<view class="label flex flex-center-x" style="height: 132rpx;">
|
|
<view class="left-prop">详细地址</view>
|
|
<textarea
|
|
v-model="detail"
|
|
placeholder="请输入详细的地址信息，如道路、门牌号、小区、楼栋号、单元室等"
|
|
placeholder-class="input-placeholder"
|
|
style="height: 100%;padding: 28rpx 0;"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="section">
|
|
<view class="label flex flex-center-x" style="border-bottom: none;justify-content: space-between;font-size: 28rpx;color:#333;">
|
|
设置为默认地址
|
|
<switch :checked="isDefault" @change="changeDefault" class="default-switch" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn">
|
|
<view class="save-btn flex flex-center" @click="addAddress">保存地址</view>
|
|
</view>
|
|
<AddressPicker ref="picker" style="width: 440rpx;" v-if="!type" :address="address.district" @change="handleCityChange" />
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUserAddressInfo, updateUserAddressInfo } from "@/api/user";
|
|
import AddressPicker from "@/components/AddressPicker/index.vue";
|
|
|
|
export default {
|
|
components: {
|
|
AddressPicker,
|
|
},
|
|
data() {
|
|
return {
|
|
id: "",
|
|
realName: "",
|
|
phone: "",
|
|
address: {
|
|
province: "",
|
|
city: "",
|
|
district: "",
|
|
},
|
|
detail: "",
|
|
isDefault: false,
|
|
show: false,
|
|
district: "",
|
|
cartId: 0,
|
|
cityData: [],
|
|
type:false
|
|
};
|
|
},
|
|
computed: {
|
|
title() {
|
|
return this.id ? "修改地址" : "添加地址";
|
|
},
|
|
area() {
|
|
let address = this.address;
|
|
return (address.province + " " + address.city + " " + address.district).trim();
|
|
},
|
|
},
|
|
onLoad({ id = "", cartId = 0 }) {
|
|
// #ifdef MP-KUAISHOU
|
|
this.type = true
|
|
// #endif
|
|
// #ifdef MP-TOUTIAO
|
|
this.type = true
|
|
// #endif
|
|
this.id = id;
|
|
this.cartId = cartId;
|
|
if (id) this.getData();
|
|
},
|
|
methods: {
|
|
handleCityChange({ detail }) {
|
|
let [{ value: province }, { value: city }, district = {}] = detail.value;
|
|
|
|
district = district.value || "";
|
|
this.address = {
|
|
province,
|
|
city,
|
|
district,
|
|
};
|
|
},
|
|
|
|
showPicker() {
|
|
console.log(this.$refs.picker);
|
|
this.$refs.picker.show();
|
|
},
|
|
getData() {
|
|
getUserAddressInfo(this.id).then(({ data }) => {
|
|
const { addressInfo, cartId } = data;
|
|
const {
|
|
real_name,
|
|
phone,
|
|
province,
|
|
city,
|
|
district,
|
|
detail,
|
|
is_default,
|
|
} = addressInfo;
|
|
Object.assign(this, {
|
|
addressInfo,
|
|
realName: real_name,
|
|
phone,
|
|
address: {
|
|
province,
|
|
city,
|
|
district,
|
|
},
|
|
detail,
|
|
isDefault: is_default === 1,
|
|
district,
|
|
cartId,
|
|
});
|
|
});
|
|
},
|
|
async addAddress() {
|
|
if (this.$reg.isEmpty(this.realName)) {
|
|
return this.$util.showMsg("请输入姓名");
|
|
} else if (!this.$reg.isPhone(this.phone)) {
|
|
return this.$util.showMsg("请输入正确的手机号");
|
|
} else if (
|
|
this.$reg.isEmpty(this.address.province) ||
|
|
this.$reg.isEmpty(this.address.city) ||
|
|
this.$reg.isEmpty(this.address.district)
|
|
) {
|
|
return this.$util.showMsg("请选择所在地区");
|
|
} else if (this.$reg.isEmpty(this.detail)) {
|
|
return this.$util.showMsg("请输入详细地址");
|
|
}
|
|
|
|
uni.showLoading({ mask: true });
|
|
|
|
try {
|
|
const { data } = await updateUserAddressInfo({
|
|
id: this.id,
|
|
real_name: this.realName,
|
|
phone: this.phone,
|
|
address: this.address,
|
|
detail: this.detail,
|
|
is_default: this.isDefault,
|
|
});
|
|
uni.hideLoading();
|
|
|
|
if (this.cartId) {
|
|
uni.navigateTo({
|
|
url: `/pages/special/confirm_order?cartId=${this.cartId}`,
|
|
});
|
|
} else {
|
|
const pages = getCurrentPages();
|
|
if (pages.length > 1 && pages[pages.length - 2].route === "pages/my/address") {
|
|
uni.navigateBack();
|
|
} else {
|
|
uni.redirectTo({
|
|
url: "/pages/my/address",
|
|
});
|
|
}
|
|
}
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
result(ret) {
|
|
this.address.province = ret.itemName1;
|
|
this.address.city = ret.itemName2;
|
|
this.address.district = ret.itemName3;
|
|
},
|
|
changeDefault(e) {
|
|
console.log(e, this.isDefault);
|
|
this.isDefault = e.detail.value;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.add-address {
|
|
background: #f6f6f6;
|
|
}
|
|
.form-box {
|
|
width: 690rpx;
|
|
margin: 20rpx auto 0;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.04);
|
|
}
|
|
/* 添加地址 */
|
|
.add-address .section {
|
|
background-color: #ffffff;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.add-address .label {
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
position: relative;
|
|
border-bottom: 1px solid #eee;
|
|
text {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: -20rpx;
|
|
}
|
|
input, textarea {
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
}
|
|
.input-placeholder {
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
}
|
|
.iconfont {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
::v-deep .default-switch {
|
|
.uni-switch-input {
|
|
width: 80rpx;
|
|
height: 40rpx;
|
|
&:before,
|
|
&:after {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
.add-address .label .left-prop {
|
|
width: 220rpx;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.add-address .label .address-icon {
|
|
height: 38rpx;
|
|
pointer-events: none;
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
.add-address input::placeholder {
|
|
color: #ccc;
|
|
}
|
|
|
|
.add-address input,
|
|
.add-address textarea {
|
|
flex: 1;
|
|
font-family: inherit;
|
|
text-align: right;
|
|
}
|
|
|
|
.add-address .checkbox {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
|
|
.add-address .checkbox image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
object-fit: cover;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.add-address .btn {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 690rpx;
|
|
bottom: 44rpx;
|
|
}
|
|
|
|
.add-address .save-btn {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
border-radius: 43rpx;
|
|
background-color: #2a8eff;
|
|
font-family: inherit;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
}
|
|
</style>
|
|
|