361 lines
8.0 KiB
Vue
361 lines
8.0 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view class="top">
|
|
<view class="item">
|
|
<view class="left">收货人</view>
|
|
<input type="text" placeholder-class="line" v-model="InforData['name']" placeholder="请填写收货人姓名" />
|
|
</view>
|
|
<view class="item">
|
|
<view class="left">手机号码</view>
|
|
<input type="number" placeholder-class="line" v-model="InforData['mobile']" placeholder="请填写收货人手机号" />
|
|
</view>
|
|
<view class="item" @tap="showRegionPicker">
|
|
<view class="left">所在地区</view>
|
|
<input disabled type="text" placeholder-class="line" v-model="InforData['region']"
|
|
placeholder="省市区县、乡镇等" />
|
|
</view>
|
|
<view class="item address">
|
|
<view class="left">详细地址</view>
|
|
<textarea type="text" placeholder-class="line" v-model="InforData['address']" placeholder="街道、楼牌等" />
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="default">
|
|
<view class="left">
|
|
<view class="tips">提醒：每次下单会默认推荐该地址</view>
|
|
</view>
|
|
<view class="right">
|
|
<u-switch v-model="InforData['is_default']" :activeValue='1' :inactiveValue='0'
|
|
activeColor="#FD8F3B"></u-switch>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="btn-el" @tap="operation">
|
|
<button class="button_1">
|
|
<text lines="1" class="text_11">保存</text>
|
|
</button>
|
|
</view>
|
|
<!-- <u-picker mode="region" ref="uPicker" v-model="show" @confirm="confirm" @cancel="show = false" /> -->
|
|
<!-- <u-picker :show="show" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
|
<u-popup :show="show" mode="bottom">
|
|
<view>
|
|
<ehPicker @conceal="conceal"/>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
let self;
|
|
import {
|
|
getAddressAPI,
|
|
createEditAddressAPI,
|
|
getDefaultAddressAPI
|
|
} from '@/request/diy/index.js';
|
|
import ehPicker from '@/components/erha-picker/erha-picker.vue';
|
|
import {
|
|
mapActions,
|
|
mapGetters
|
|
} from 'vuex';
|
|
export default {
|
|
components: {
|
|
ehPicker
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
checked: true,
|
|
add_id: 0,
|
|
InforData: {
|
|
name: '',
|
|
mobile: '',
|
|
region: '',
|
|
address: '',
|
|
is_default: false
|
|
},
|
|
};
|
|
},
|
|
onLoad(parametes) {
|
|
self = this;
|
|
// 编辑逻辑
|
|
if (parametes?.add_id) {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
// 修改标题
|
|
uni.setNavigationBarTitle({
|
|
title: '修改地址'
|
|
});
|
|
// 获取数据
|
|
this.getAddress(parametes['add_id']);
|
|
} else {
|
|
// 获取默认是否存在
|
|
getDefaultAddressAPI().then(res => {
|
|
console.log(res, '默认地址');
|
|
if (!res['data']) {
|
|
this['InforData']['is_default'] = 1;
|
|
uni.showToast({
|
|
title: '您还未添加地址,该地址将自动为默认地址',
|
|
icon: 'none'
|
|
})
|
|
};
|
|
})
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
...mapGetters('diy', ['GetList']),
|
|
},
|
|
methods: {
|
|
...mapActions('diy', ['GetAreaLisr']),
|
|
/**
|
|
* @获取详情
|
|
* */
|
|
getAddress(add_id) {
|
|
getAddressAPI({
|
|
add_id
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
// res['data']['is_default'] = Boolean(res['data']['is_default']);
|
|
// console.log(res['data'],'*-*-*');
|
|
this['InforData'] = res['data'];
|
|
this.$forceUpdate();
|
|
})
|
|
},
|
|
showRegionPicker() {
|
|
this.show = true;
|
|
},
|
|
|
|
/**
|
|
* @点击确定
|
|
* */
|
|
// confirm(e) {
|
|
// let {
|
|
// area,
|
|
// city,
|
|
// province
|
|
// } = e;
|
|
// this['InforData']['region'] = `${province['label']}-${city['label']}-${area['label']}`
|
|
// },
|
|
|
|
conceal(param) {
|
|
// 获取到传过来的 省 市 区 县数据
|
|
// 选择完毕后隐藏
|
|
this.show = false;
|
|
this['InforData']['region'] = `${param['province']}-${param['city']}-${param['area']}-${param['street']}`;
|
|
console.log(this['InforData']['region']);
|
|
|
|
},
|
|
|
|
/**
|
|
* @保存
|
|
* @编辑
|
|
* */
|
|
operation() {
|
|
this.$u.debounce(()=>{
|
|
if (!this['InforData']['name']) {
|
|
uni.showToast({
|
|
title: '请填写收货人',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
} else if (!this['InforData']['mobile']) {
|
|
uni.showToast({
|
|
title: '请填写联系方式',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
} else if (!this['InforData']['region'] || !this['InforData']['address']) {
|
|
uni.showToast({
|
|
title: '请完善收获地址',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
|
|
let form = JSON.parse(JSON.stringify(this['InforData']));
|
|
form['is_default'] = +JSON.parse(JSON.stringify(form['is_default']));
|
|
createEditAddressAPI(form).then(res => {
|
|
uni.showToast({
|
|
title: self['InforData']['add_id'] ? '修改成功' : '保存成功',
|
|
success: () => {
|
|
self.GetAreaLisr();
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 1000)
|
|
}
|
|
})
|
|
})
|
|
},1000,true)
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .line {
|
|
color: $u-light-color;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
uni-input {
|
|
flex: 1;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.wrap {
|
|
background-color: #f2f2f2;
|
|
box-sizing: border-box;
|
|
|
|
.top {
|
|
background-color: #ffffff;
|
|
border-top: solid 2rpx $u-border-color;
|
|
padding: 22rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
align-items: center;
|
|
border-bottom: solid 2rpx $u-border-color;
|
|
|
|
.left {
|
|
width: 180rpx;
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
input {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
padding: 20rpx 0;
|
|
|
|
textarea {
|
|
// width: 100%;
|
|
height: 150rpx;
|
|
background-color: #f7f7f7;
|
|
line-height: 60rpx;
|
|
margin: 40rpx auto;
|
|
padding: 20rpx;
|
|
}
|
|
}
|
|
|
|
.site-clipboard {
|
|
padding-right: 40rpx;
|
|
|
|
textarea {
|
|
// width: 100%;
|
|
height: 150rpx;
|
|
background-color: #f7f7f7;
|
|
line-height: 60rpx;
|
|
margin: 40rpx auto;
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.clipboard {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
color: $u-tips-color;
|
|
height: 80rpx;
|
|
|
|
.icon {
|
|
margin-top: 6rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
margin-top: 20rpx;
|
|
padding: 32rpx;
|
|
background-color: #ffffff;
|
|
font-size: 28rpx;
|
|
|
|
.tag {
|
|
display: flex;
|
|
|
|
.left {
|
|
width: 160rpx;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.tags {
|
|
width: 140rpx;
|
|
padding: 16rpx 8rpx;
|
|
border: solid 2rpx $u-border-color;
|
|
text-align: center;
|
|
border-radius: 50rpx;
|
|
margin: 0 10rpx 20rpx;
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $u-content-color;
|
|
line-height: 1;
|
|
}
|
|
|
|
.plus {
|
|
//padding: 10rpx 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.default {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 64rpx;
|
|
flex-direction: row;
|
|
margin-top: 32rpx !important;
|
|
|
|
.tips {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.right {}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-el {
|
|
position: fixed;
|
|
bottom: 32rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: calc(env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.button_1 {
|
|
background-image: linear-gradient(90deg, rgba(255, 173, 2, 1.000000) 0, rgba(253, 143, 59, 1.000000) 100.000000%);
|
|
border-radius: 19rpx;
|
|
align-self: center;
|
|
margin-top: -2rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 704rpx;
|
|
padding: 25rpx 329rpx 23rpx 325rpx;
|
|
}
|
|
|
|
.text_11 {
|
|
overflow-wrap: break-word;
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 23rpx;
|
|
font-family: PingFangSC-Semibold;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
line-height: 33rpx;
|
|
}
|
|
</style>
|