239 lines
5.9 KiB
Vue
239 lines
5.9 KiB
Vue
<template>
|
|
<view class="new-address-page">
|
|
<HeaderCom></HeaderCom>
|
|
<view class="main">
|
|
<view class="item">
|
|
<view class="label">收货人</view>
|
|
<input type="text" class="value" placeholder-class="value-place" v-model="form.receiver" placeholder="请填写收货人">
|
|
</view>
|
|
<view class="item">
|
|
<view class="label">联系电话</view>
|
|
<input type="text" class="value" placeholder-class="value-place" v-model="form.phone" placeholder="请填写收货人电话号码">
|
|
</view>
|
|
<view class="item ">
|
|
<view class="label">所在地区</view>
|
|
<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" style="width: 500rpx;height: 30rpx;z-index: 99;"></pick-regions>
|
|
<input type="text" class="value address-value" disabled v-model="regionName" placeholder="请选择所在地区" placeholder-class="value-place">
|
|
</view>
|
|
<view class="item borderBottom">
|
|
<view class="label">详细地址</view>
|
|
<input type="text" class="value" placeholder-class="value-place" v-model="form.address" placeholder="请填写详细地址">
|
|
</view>
|
|
</view>
|
|
<view class="main">
|
|
<view class="item borderBottom" style="justify-content: space-between">
|
|
<view class="label">设为默认地址</view>
|
|
<image src="@/static/new/address/kg.png" mode="aspectFit" class="status-icon" v-if="form.isDefault === 1" @click="setDefault"></image>
|
|
<image src="@/static/new/address/kg-n.png" mode="aspectFit" class="status-icon" v-if="form.isDefault === 0" @click="setDefault"></image>
|
|
</view>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="footer-btn" @click="save">保存</view>
|
|
</view>
|
|
<!-- 所有页面的弹框 -->
|
|
<page-popup page="/pages/mine/addAddress"></page-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myMixins } from "@/mixins/mixins.js";
|
|
import { addAddress,addressDetail,editAddress } from '@/API/user.js'
|
|
import pickRegions from '@/components/pick-regions/pick-regions.vue'
|
|
import HeaderCom from '@/pages/components/header.vue'
|
|
export default{
|
|
mixins: [myMixins],
|
|
data(){
|
|
return {
|
|
visible:false,
|
|
id:"",
|
|
region: [],
|
|
defaultRegion: ['北京市', '市辖区', '东城区'],
|
|
defaultRegionCode: '',
|
|
form:{
|
|
receiver:"",//收货人
|
|
phone:"",//联系电话
|
|
province:"",//省份
|
|
city:"",//城市
|
|
area:"",//城区
|
|
address:"",//详细地址
|
|
isDefault:0,//是否默认{0:否,1:是
|
|
}
|
|
}
|
|
},
|
|
components:{pickRegions,HeaderCom},
|
|
computed: {
|
|
regionName() {
|
|
// 转为字符串
|
|
return this.region.join('-')
|
|
},
|
|
regionNameList() {
|
|
// 转为字符串
|
|
return this.region
|
|
},
|
|
},
|
|
onLoad(opation) {
|
|
console.log(opation)
|
|
this.id = opation.id ? opation.id : ''
|
|
// 有id时获取详情
|
|
if(this.id){
|
|
this.getDetail()
|
|
}
|
|
},
|
|
methods:{
|
|
// 获取详情
|
|
getDetail(){
|
|
uni.showLoading()
|
|
addressDetail(this.id).then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
if(res.code === 200){
|
|
this.region = [res.data.province,res.data.city,res.data.area]
|
|
this.form = res.data
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
// 设置默认地址
|
|
setDefault(){
|
|
if(this.form.isDefault === 0){
|
|
this.form.isDefault = 1;
|
|
}else{
|
|
this.form.isDefault = 0;
|
|
}
|
|
},
|
|
// 保存收货地址
|
|
save(){
|
|
if(!this.form.receiver){
|
|
this.$api.msg('请输入收货人');
|
|
return;
|
|
}
|
|
if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(this.form.phone))) {
|
|
this.$api.msg('请输入正确的手机号');
|
|
return;
|
|
}
|
|
if(this.region.length > 0){
|
|
this.form.province = this.region[0]
|
|
this.form.city = this.region[1]
|
|
this.form.area = this.region[2]
|
|
}else{
|
|
this.$api.msg('请选择地址');
|
|
return;
|
|
}
|
|
if(!this.form.address){
|
|
this.$api.msg('请输入详细地址');
|
|
return;
|
|
}
|
|
uni.showLoading()
|
|
if(this.id){
|
|
editAddress(this.id,this.form).then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
if(res.code === 200){
|
|
uni.navigateBack()
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
}else{
|
|
addAddress(this.form).then(res => {
|
|
uni.hideLoading()
|
|
console.log(res)
|
|
if(res.code === 200){
|
|
uni.navigateBack()
|
|
}else{
|
|
this.$api.msg(res.message)
|
|
}
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
|
|
},
|
|
// 获取选择的地区
|
|
handleGetRegion(region) {
|
|
// debugger
|
|
this.region = region.map(({
|
|
name
|
|
}) => name);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background-color: #f5f5f5;
|
|
}
|
|
.new-address-page{
|
|
padding: 112rpx 32rpx 32rpx 32rpx;
|
|
.main{
|
|
background-color: #fff;
|
|
margin-bottom: 24rpx;
|
|
border-radius: 24rpx;
|
|
padding: 0 32rpx;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 102rpx;
|
|
border-bottom: 1px solid #F2F2F2;
|
|
position: relative;
|
|
.label{
|
|
// font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
width: 192rpx;
|
|
}
|
|
.value{
|
|
// font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
}
|
|
.address-value{
|
|
position: absolute;
|
|
top: 30rpx;
|
|
left: 190rpx;
|
|
}
|
|
.value-place{
|
|
// font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #CCCCCC;
|
|
}
|
|
.status-icon{
|
|
width: 80rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
.borderBottom{
|
|
border: none;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 100%;
|
|
height: 144rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #fff;
|
|
.footer-btn{
|
|
width: 686rpx;
|
|
height: 96rpx;
|
|
background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
|
|
border-radius: 16rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |