285 lines
6.2 KiB
Vue
285 lines
6.2 KiB
Vue
<template>
|
|
<!-- 我的页面1 -->
|
|
<view class="page">
|
|
<view class="flex-1 section">
|
|
<view class="group">
|
|
<view class="self-stretch group_2">
|
|
<view class="button-b group_3">
|
|
<view class="textcolor">
|
|
收件人
|
|
</view>
|
|
<input type="text" v-model="forlist.username">
|
|
</view>
|
|
<view class="button-b group_3">
|
|
<view class="textcolor">
|
|
手机号
|
|
</view>
|
|
<input type="text" v-model="forlist.mobile">
|
|
</view>
|
|
<view @click="alterDon" class="button-box group_3">
|
|
<view class="textcolor">
|
|
地区
|
|
</view>
|
|
<view class="flex-row items-center jiantou-d">
|
|
<text class="font">{{forlist.area}}</text>
|
|
<image
|
|
class="image_6"
|
|
src="../../static/wode-youjianto.png"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="button-b group_3">
|
|
<view class="textcolor">
|
|
街道
|
|
</view>
|
|
<input type="text" v-model="forlist.jiedao">
|
|
</view>
|
|
<view class="button-b group_3">
|
|
<view class="textcolor">
|
|
楼层门牌
|
|
</view>
|
|
<input type="text" v-model="forlist.menpai">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="padding-lr">
|
|
<u-button @click="saveadd" color="#23693f" type="primary" shape="circle" text="保 存"></u-button>
|
|
</view>
|
|
</view>
|
|
<address-picker @cancel="showst=false" :address-data="addressData" :show="showst" :columns="columns" @confirm="confirm"></address-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '../../utils/request'
|
|
export default {
|
|
data() {
|
|
return{
|
|
forlist:{
|
|
username:'',
|
|
mobile:'',
|
|
area:'',
|
|
jiedao:'',
|
|
menpai:'',
|
|
},
|
|
components: {},
|
|
props: {},
|
|
showst:false,
|
|
columns: [],
|
|
addressData: ['北京市', '北京市', '东城区'],
|
|
listdata:{}
|
|
}
|
|
},
|
|
|
|
onShow(){
|
|
this.listData()
|
|
},
|
|
methods: {
|
|
saveadd(){
|
|
// 用户点击确定
|
|
request.put('/api/user/update', {
|
|
receiver:this.forlist.username,
|
|
shipping_mobile:this.forlist.mobile,
|
|
shipping_area:this.forlist.area,
|
|
shipping_address:this.forlist.jiedao,
|
|
shipping_floor:this.forlist.menpai,
|
|
}).then(res=>{
|
|
this.listData()
|
|
})
|
|
},
|
|
confirm(e) {
|
|
this.forlist.area = `${e.value[0]}${e.value[1]}${e.value[2]}`
|
|
this.showst = false
|
|
},
|
|
alterDon(){
|
|
this.showst = true
|
|
},
|
|
listData(){
|
|
request.get('/api/user/info', {}).then(res => {
|
|
// console.log(res)
|
|
this.forlist.username = res.data.data.receiver
|
|
// this.forlist.urgency_mobile = res.data.data.mobile
|
|
this.forlist.mobile = res.data.data.shipping_mobile
|
|
this.forlist.area = res.data.data.shipping_area
|
|
this.forlist.jiedao = res.data.data.shipping_address
|
|
this.forlist.menpai = res.data.data.shipping_floor
|
|
// this.listdata = JSON.parse(JSON.stringify(res.data.data))
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: 微软雅黑;
|
|
line-height: 27.6rpx;
|
|
color: #000000;
|
|
}
|
|
.jiantou-d {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.padding-lr{
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 92%;
|
|
padding: 35rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.textcolor{
|
|
margin-right: 20rpx;
|
|
color: #8888;
|
|
}
|
|
.button-b{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.button-box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.mt-73 {
|
|
margin-top: 146rpx;
|
|
}
|
|
.mt-113 {
|
|
margin-top: 226rpx;
|
|
}
|
|
.ml-3 {
|
|
margin-left: 6rpx;
|
|
}
|
|
.mt-5 {
|
|
margin-top: 10rpx;
|
|
}
|
|
.page {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
}
|
|
.section {
|
|
padding-top: 80rpx;
|
|
background-color: #ffffff;
|
|
overflow-y: auto;
|
|
}
|
|
.group {
|
|
padding-left: 72rpx;
|
|
padding-right: 46rpx;
|
|
}
|
|
.group-zi{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* border: 1px solid black; */
|
|
}
|
|
.image-r{
|
|
width: 204rpx;
|
|
height: 204rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
/* border: 1px solid red; */
|
|
}
|
|
.image_5 {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.group_2 {
|
|
border-bottom: solid 2rpx #8185861a;
|
|
}
|
|
.group_3 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 30rpx 18rpx 40rpx 28rpx;
|
|
border-bottom: solid 2rpx #4444441a;
|
|
input{
|
|
text-align: right;
|
|
}
|
|
}
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: 微软雅黑;
|
|
line-height: 27.78rpx;
|
|
color: #444444;
|
|
}
|
|
.text_3 {
|
|
line-height: 27.7rpx;
|
|
}
|
|
.image_6 {
|
|
margin-right: 20rpx;
|
|
width: 25rpx;
|
|
height: 32rpx;
|
|
}
|
|
.group_4 {
|
|
padding: 40rpx 20rpx 40rpx 24rpx;
|
|
border-bottom: solid 2rpx #4444441a;
|
|
}
|
|
.text_4 {
|
|
line-height: 27.8rpx;
|
|
}
|
|
.group_5 {
|
|
padding: 2rpx 0;
|
|
}
|
|
.group_6 {
|
|
padding: 40rpx 20rpx 40rpx 28rpx;
|
|
border-bottom: solid 2rpx #4444441a;
|
|
}
|
|
.text_5 {
|
|
line-height: 27.96rpx;
|
|
}
|
|
.group_7 {
|
|
padding: 40rpx 20rpx 40rpx 28rpx;
|
|
border-bottom: solid 2rpx #8185861a;
|
|
}
|
|
.group_8 {
|
|
padding: 40rpx 20rpx 40rpx 28rpx;
|
|
}
|
|
.text_6 {
|
|
line-height: 27.14rpx;
|
|
}
|
|
.equal-division {
|
|
background-color: #ffffff;
|
|
border-radius: 0 60rpx 0 0;
|
|
border-left: solid 2rpx #f7f7f7;
|
|
border-right: solid 2rpx #f7f7f7;
|
|
border-top: solid 2rpx #f7f7f7;
|
|
border-bottom: solid 2rpx #f7f7f7;
|
|
}
|
|
.group_9 {
|
|
flex: 1 1 146rpx;
|
|
}
|
|
.equal-division-item {
|
|
padding: 12rpx 0;
|
|
}
|
|
.image_7 {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
.font_2 {
|
|
font-size: 22rpx;
|
|
font-family: Poppins;
|
|
line-height: 20.4rpx;
|
|
color: #999999;
|
|
}
|
|
.text_7 {
|
|
line-height: 20.24rpx;
|
|
}
|
|
.text_8 {
|
|
line-height: 20.32rpx;
|
|
}
|
|
.text_9 {
|
|
color: #888888;
|
|
line-height: 20.24rpx;
|
|
}
|
|
.image_8 {
|
|
filter: drop-shadow(0rpx 4rpx 4rpx #00000040);
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
.text_10 {
|
|
color: #23693f;
|
|
}
|
|
</style> |