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