收货地址
This commit is contained in:
parent
60f404fd49
commit
cb0ccd685f
|
|
@ -1,86 +1,177 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="width: calc( 100% - 64rpx); margin: 0 auto;">
|
<view style="width: calc(100% - 64rpx); margin: 0 auto">
|
||||||
<u--form :model="model1" ref="form1" labelWidth='auto' :labelStyle='{fontWeight:800}'>
|
<u--form
|
||||||
|
:model="model1"
|
||||||
|
ref="form1"
|
||||||
|
labelWidth="auto"
|
||||||
|
:labelStyle="{ fontWeight: 800 }"
|
||||||
|
>
|
||||||
<u-form-item ref="item1" label="收货姓名" class="data_itm" borderBottom>
|
<u-form-item ref="item1" label="收货姓名" class="data_itm" borderBottom>
|
||||||
<u--input style="padding: 32rpx;" placeholder="请输入收货人姓名" clearable v-model="model1.userInfo.name"
|
<u--input
|
||||||
border="none"></u--input>
|
style="padding: 32rpx"
|
||||||
|
placeholder="请输入收货人姓名"
|
||||||
|
clearable
|
||||||
|
v-model="model1.userInfo.userName"
|
||||||
|
border="none"
|
||||||
|
></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item ref="item1" label="手机号码" class="data_itm" borderBottom>
|
<u-form-item ref="item1" label="手机号码" class="data_itm" borderBottom>
|
||||||
<u--input style="padding: 32rpx;" placeholder="请输入手机号码" clearable v-model="model1.userInfo.phoneNum"
|
<u--input
|
||||||
border="none"></u--input>
|
style="padding: 32rpx"
|
||||||
|
placeholder="请输入手机号码"
|
||||||
|
clearable
|
||||||
|
v-model="model1.userInfo.userPhone"
|
||||||
|
border="none"
|
||||||
|
></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item ref="item1" label="所在地区" class="data_itm" borderBottom @click="selectAdd">
|
<u-form-item
|
||||||
<u--input style="padding: 32rpx;" placeholder="选择所在地区" readonly clearable
|
ref="item1"
|
||||||
v-model="model1.userInfo.AddressText" suffixIcon="arrow-right" border="none">
|
label="所在地区"
|
||||||
|
class="data_itm"
|
||||||
|
borderBottom
|
||||||
|
@click="selectAdd"
|
||||||
|
>
|
||||||
|
<u--input
|
||||||
|
style="padding: 32rpx"
|
||||||
|
placeholder="选择所在地区"
|
||||||
|
readonly
|
||||||
|
clearable
|
||||||
|
v-model="model1.AddressText"
|
||||||
|
suffixIcon="arrow-right"
|
||||||
|
border="none"
|
||||||
|
>
|
||||||
</u--input>
|
</u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item ref="item1" label="详细地址" class="data_itm">
|
<u-form-item ref="item1" label="详细地址" class="data_itm" borderBottom>
|
||||||
<u--input style="padding: 32rpx;" placeholder="街道、楼门排号等" clearable v-model="model1.userInfo.AddressDetail"
|
<u--input
|
||||||
border="none"></u--input>
|
style="padding: 32rpx"
|
||||||
|
placeholder="街道、楼门排号等"
|
||||||
|
clearable
|
||||||
|
v-model="model1.userInfo.userAddress"
|
||||||
|
border="none"
|
||||||
|
></u--input>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<view class="save" style="padding: 4px 24rpx;">
|
<u-form-item ref="item1" label="是否设为默认地址" class="data_itm" >
|
||||||
<u-button text="保存" :customStyle="{'border-radius':'8rpx'}" size="large" throttleTime=1000
|
<u-switch v-model="model1.userInfo.isDefault"></u-switch>
|
||||||
color="#99241B" @click="goAddEditPGE"></u-button>
|
</u-form-item>
|
||||||
|
<view class="save" style="padding: 4px 24rpx">
|
||||||
|
<u-button
|
||||||
|
text="保存"
|
||||||
|
:customStyle="{ 'border-radius': '8rpx' }"
|
||||||
|
size="large"
|
||||||
|
throttleTime="1000"
|
||||||
|
color="#99241B"
|
||||||
|
@click="goAddEditPGE"
|
||||||
|
></u-button>
|
||||||
</view>
|
</view>
|
||||||
</u--form>
|
</u--form>
|
||||||
<view style="position: relative; width: 100%; height: 50px;">
|
<view style="position: relative; width: 100%; height: 50px">
|
||||||
<uni-data-picker ref="picker" style="border: 0px; position: absolute; " :localdata="items" v-model="ttt"
|
<uni-data-picker
|
||||||
:map="{text:'name',value:'code'}" popup-title="请选择所在地区" @change="onchange" @nodeclick="onnodeclick">
|
ref="picker"
|
||||||
|
style="border: 0px; position: absolute"
|
||||||
|
:localdata="items"
|
||||||
|
v-model="ttt"
|
||||||
|
:map="{ text: 'name', value: 'code' }"
|
||||||
|
popup-title="请选择所在地区"
|
||||||
|
@change="onchange"
|
||||||
|
@nodeclick="onnodeclick"
|
||||||
|
>
|
||||||
</uni-data-picker>
|
</uni-data-picker>
|
||||||
<view style="position: absolute; width: 100%; height: 100%; background-color: #FFFFFF;">
|
<view
|
||||||
|
style="
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
"
|
||||||
|
>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import cityData from "/src/pagesA/ReceivingAddress/ChinaCity.js"
|
import cityData from "/src/pagesA/ReceivingAddress/ChinaCity.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: cityData.cityData,
|
items: cityData.cityData,
|
||||||
showAddr: false,
|
showAddr: false,
|
||||||
ttt: "330212",
|
ttt: "330212",
|
||||||
model1: {
|
model1: {
|
||||||
|
AddressText: "",
|
||||||
userInfo: {
|
userInfo: {
|
||||||
name: '',
|
id: "",
|
||||||
phoneNum: '',
|
isDefault: false,
|
||||||
meeting: '',
|
userName: "",
|
||||||
meetingTime: '',
|
userPhone: "",
|
||||||
ServerName: '',
|
userAddress: "",
|
||||||
Address: '',
|
province: "",
|
||||||
AddressText: '',
|
provinceCode: "",
|
||||||
AddressDetail: '',
|
city: "",
|
||||||
|
cityCode: "",
|
||||||
|
area: "",
|
||||||
|
areaCode: "",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(opt) {
|
onLoad(opt) {
|
||||||
console.log(opt.num);
|
console.log(opt.id);
|
||||||
|
if (opt.id) {
|
||||||
|
this.http.request(`/address/${opt.id}`, {}, "GET").then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.model1.userInfo = res.data;
|
||||||
|
this.model1.AddressText = `${res.data.province}/${res.data.city}/${res.data.area}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title: opt.name
|
title: opt.name,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onchange(e) {
|
onchange(e) {
|
||||||
const value = e.detail.value
|
const value = e.detail.value;
|
||||||
this.model1.userInfo.AddressText = `${value[0].text}/${value[1].text}/${value[2].text}`
|
this.model1.AddressText = `${value[0].text}/${value[1].text}/${value[2].text}`;
|
||||||
this.Address = value
|
// this.Address = value;
|
||||||
console.log(this.Address,this.model1.userInfo.AddressText);
|
// console.log(this.Address, this.model1.userInfo.AddressText);
|
||||||
|
this.model1.userInfo.province = value[0].text;
|
||||||
|
this.model1.userInfo.provinceCode = value[0].value;
|
||||||
|
this.model1.userInfo.city = value[1].text;
|
||||||
|
this.model1.userInfo.cityCode = value[1].value;
|
||||||
|
this.model1.userInfo.area = value[2].text;
|
||||||
|
this.model1.userInfo.areaCode = value[2].value;
|
||||||
|
console.log(this.model1.userInfo);
|
||||||
// var arr=[{text:'',value:''}]
|
// var arr=[{text:'',value:''}]
|
||||||
// value.map((v)=>{ v[0]})
|
// value.map((v)=>{ v[0]})
|
||||||
|
|
||||||
},
|
},
|
||||||
onnodeclick(node) {},
|
onnodeclick(node) {},
|
||||||
selectAdd() {
|
selectAdd() {
|
||||||
this.$refs.picker.show()
|
this.$refs.picker.show();
|
||||||
}
|
},
|
||||||
}
|
goAddEditPGE() {
|
||||||
|
console.log(this.model1.userInfo);
|
||||||
|
this.http
|
||||||
|
.request("/address/edit", this.model1.userInfo, "POST")
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
uni.showToast({
|
||||||
|
title: "保存成功",
|
||||||
|
icon: "none",
|
||||||
|
});
|
||||||
|
uni.navigateBack({
|
||||||
|
delta: 1,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: #FFFFFF;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,105 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="width: calc( 100% - 64rpx); margin: 0 auto;">
|
<view style="width: calc(100% - 64rpx); margin: 0 auto">
|
||||||
|
<view
|
||||||
<view class="address_main" style="margin: 24rpx 0rpx 32rpx; background-color: #FFFFFF; border-radius: 8rpx;">
|
class="address_main"
|
||||||
<view class="address_itm" v-for="(item,index) in 3" :key="index"
|
style="
|
||||||
style="padding: 32rpx 24rpx 28rpx; border-bottom: 1rpx solid #EFEFF1;">
|
margin: 24rpx 0rpx 32rpx;
|
||||||
<view class="address_itm_top"
|
background-color: #ffffff;
|
||||||
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rpx; font-weight: 600; font-size: 32rpx;">
|
border-radius: 8rpx;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="address_itm"
|
||||||
|
v-for="(item, index) in list"
|
||||||
|
:key="index"
|
||||||
|
style="padding: 32rpx 24rpx 28rpx; border-bottom: 1rpx solid #efeff1"
|
||||||
|
>
|
||||||
|
<view
|
||||||
|
class="address_itm_top"
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
"
|
||||||
|
>
|
||||||
<view class="address_itm_top_text">
|
<view class="address_itm_top_text">
|
||||||
<image style="width: 38rpx; height: 38rpx; vertical-align: bottom; margin-right: 16rpx;"
|
<image
|
||||||
src="../../static/selectID/gouXuan.png" mode=""></image>
|
style="
|
||||||
<text style="margin-right: 24rpx; ">王毅</text> <text> 16658525844</text>
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
"
|
||||||
|
src="../../static/selectID/gouXuan.png"
|
||||||
|
mode=""
|
||||||
|
v-if="item.isDefault"
|
||||||
|
></image>
|
||||||
|
<text style="margin-right: 24rpx">{{item.userName}}</text>
|
||||||
|
<text>{{item.userPhone}}</text>
|
||||||
</view>
|
</view>
|
||||||
<image style="width: 40rpx; height: 40rpx;" src="../../static/editAddress.png" mode=""
|
<image
|
||||||
@click="goEditAddress(index)"></image>
|
style="width: 40rpx; height: 40rpx"
|
||||||
|
src="../../static/editAddress.png"
|
||||||
|
mode=""
|
||||||
|
@click="goEditAddress(item.id)"
|
||||||
|
></image>
|
||||||
</view>
|
</view>
|
||||||
<text style="color: #AFADB0;">宁波市高新区智慧园A区</text>
|
<text style="color: #afadb0">{{item.province}}{{item.city}}{{item.area}}{{item.address}}{{item.userAddress}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-button text="添加收货地址" :customStyle="{'border-radius':'8rpx'}" size="large" icon="plus-circle"
|
<u-button
|
||||||
iconColor="#FFFFFF" throttleTime=1000 color="#99241B" @click="goAddEditPGE"></u-button>
|
text="添加收货地址"
|
||||||
|
:customStyle="{ 'border-radius': '8rpx' }"
|
||||||
|
size="large"
|
||||||
|
icon="plus-circle"
|
||||||
|
iconColor="#FFFFFF"
|
||||||
|
throttleTime="1000"
|
||||||
|
color="#99241B"
|
||||||
|
@click="goAddEditPGE"
|
||||||
|
></u-button>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
list: {},
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getAddress();
|
||||||
|
},
|
||||||
|
onShow(){
|
||||||
|
this.getAddress();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goEditAddress(num) {
|
goEditAddress(id) {
|
||||||
|
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pagesA/ReceivingAddress/EditAddresspge?name=修改收货地址&num=${num}`
|
url: `/pagesA/ReceivingAddress/EditAddresspge?name=修改收货地址&id=${id}`,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
goAddEditPGE() {
|
goAddEditPGE() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pagesA/ReceivingAddress/EditAddresspge?name=新建地址 '
|
url: "/pagesA/ReceivingAddress/EditAddresspge?name=新建地址 ",
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
}
|
getAddress() {
|
||||||
|
this.http.request("/address/list", {}, "GET").then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
this.list = res.data;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page {
|
page {
|
||||||
background-color: #F4F5F7;
|
background-color: #f4f5f7;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue