xiangshan
/
yxxh5
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

收货地址

This commit is contained in:
姚宇浩 2024-01-25 16:06:53 +08:00
parent 60f404fd49
commit cb0ccd685f
2 changed files with 266 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

247
src/pagesA/ReceivingAddress/EditAddresspge.vue
View File

@ -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
<u-form-item ref="item1" label="收货姓名" class="data_itm" borderBottom> :model="model1"
<u--input style="padding: 32rpx;" placeholder="请输入收货人姓名" clearable v-model="model1.userInfo.name" ref="form1"
border="none"></u--input> labelWidth="auto"
</u-form-item> :labelStyle="{ fontWeight: 800 }"
<u-form-item ref="item1" label="手机号码" class="data_itm" borderBottom> >
<u--input style="padding: 32rpx;" placeholder="请输入手机号码" clearable v-model="model1.userInfo.phoneNum" <u-form-item ref="item1" label="收货姓名" class="data_itm" borderBottom>
border="none"></u--input> <u--input
</u-form-item> style="padding: 32rpx"
<u-form-item ref="item1" label="所在地区" class="data_itm" borderBottom @click="selectAdd"> placeholder="请输入收货人姓名"
<u--input style="padding: 32rpx;" placeholder="选择所在地区" readonly clearable clearable
v-model="model1.userInfo.AddressText" suffixIcon="arrow-right" border="none"> v-model="model1.userInfo.userName"
</u--input> border="none"
</u-form-item> ></u--input>
<u-form-item ref="item1" label="详细地址" class="data_itm"> </u-form-item>
<u--input style="padding: 32rpx;" placeholder="街道、楼门排号等" clearable v-model="model1.userInfo.AddressDetail" <u-form-item ref="item1" label="手机号码" class="data_itm" borderBottom>
border="none"></u--input> <u--input
</u-form-item> style="padding: 32rpx"
<view class="save" style="padding: 4px 24rpx;"> placeholder="请输入手机号码"
<u-button text="保存" :customStyle="{'border-radius':'8rpx'}" size="large" throttleTime=1000 clearable
color="#99241B" @click="goAddEditPGE"></u-button> v-model="model1.userInfo.userPhone"
</view> border="none"
</u--form> ></u--input>
<view style="position: relative; width: 100%; height: 50px;"> </u-form-item>
<uni-data-picker ref="picker" style="border: 0px; position: absolute; " :localdata="items" v-model="ttt" <u-form-item
:map="{text:'name',value:'code'}" popup-title="请选择所在地区" @change="onchange" @nodeclick="onnodeclick"> ref="item1"
</uni-data-picker> label="所在地区"
<view style="position: absolute; width: 100%; height: 100%; background-color: #FFFFFF;"> class="data_itm"
</view> borderBottom
</view> @click="selectAdd"
</view> >
<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> </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: {
userInfo: { AddressText: "",
name: '', userInfo: {
phoneNum: '', id: "",
meeting: '', isDefault: false,
meetingTime: '', userName: "",
ServerName: '', userPhone: "",
Address: '', userAddress: "",
AddressText: '', province: "",
AddressDetail: '', provinceCode: "",
}, city: "",
} cityCode: "",
}; area: "",
}, areaCode: "",
onLoad(opt) { },
console.log(opt.num); },
uni.setNavigationBarTitle({ };
title: opt.name },
}) onLoad(opt) {
}, console.log(opt.id);
methods: { if (opt.id) {
onchange(e) { this.http.request(`/address/${opt.id}`, {}, "GET").then((res) => {
const value = e.detail.value if (res.code == 200) {
this.model1.userInfo.AddressText = `${value[0].text}/${value[1].text}/${value[2].text}` this.model1.userInfo = res.data;
this.Address = value this.model1.AddressText = `${res.data.province}/${res.data.city}/${res.data.area}`;
console.log(this.Address,this.model1.userInfo.AddressText); }
// var arr=[{text:'',value:''}] });
// value.map((v)=>{ v[0]}) }
uni.setNavigationBarTitle({
}, title: opt.name,
onnodeclick(node) {}, });
selectAdd() { },
this.$refs.picker.show() 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> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #FFFFFF; background-color: #ffffff;
} }
</style> </style>

142
src/pagesA/ReceivingAddress/ReceivingAddress.vue
View File

@ -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_top_text"> >
<image style="width: 38rpx; height: 38rpx; vertical-align: bottom; margin-right: 16rpx;" <view
src="../../static/selectID/gouXuan.png" mode=""></image> class="address_itm"
<text style="margin-right: 24rpx; ">王毅</text> <text> 16658525844</text> v-for="(item, index) in list"
</view> :key="index"
<image style="width: 40rpx; height: 40rpx;" src="../../static/editAddress.png" mode="" style="padding: 32rpx 24rpx 28rpx; border-bottom: 1rpx solid #efeff1"
@click="goEditAddress(index)"></image> >
</view> <view
<text style="color: #AFADB0;">宁波市高新区智慧园A区</text> class="address_itm_top"
</view> style="
</view> display: flex;
<u-button text="添加收货地址" :customStyle="{'border-radius':'8rpx'}" size="large" icon="plus-circle" justify-content: space-between;
iconColor="#FFFFFF" throttleTime=1000 color="#99241B" @click="goAddEditPGE"></u-button> align-items: center;
</view> 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> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
list: {},
}; };
}, },
methods: { onLoad() {
goEditAddress(num) { this.getAddress();
},
uni.navigateTo({ onShow(){
url: `/pagesA/ReceivingAddress/EditAddresspge?name=修改收货地址&num=${num}` this.getAddress();
}) },
}, methods: {
goAddEditPGE() { goEditAddress(id) {
uni.navigateTo({ uni.navigateTo({
url: '/pagesA/ReceivingAddress/EditAddresspge?name=新建地址 ' 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> </script>
<style lang="scss"> <style lang="scss">
page { page {
background-color: #F4F5F7; background-color: #f4f5f7;
} }
</style> </style>