302 lines
8.0 KiB
Vue
302 lines
8.0 KiB
Vue
<template>
|
||
<view class="address-create" v-if="isloaded">
|
||
<view class="list-item">
|
||
<view class="item">收货人 <input placeholder-class="placeholder-style" maxlength="10" v-model="name"
|
||
placeholder="请输入收货人姓名" />
|
||
</view>
|
||
</view>
|
||
<view class="list-item">
|
||
<view class="item">联系电话 <input placeholder-class="placeholder-style" v-model="mobile" type="number" maxlength="11"
|
||
placeholder="请输入收货人手机号码" /></view>
|
||
</view>
|
||
<view class="list-item">
|
||
<view class="item">所在区域
|
||
<span @click="btnClick()">{{addressTxt || '请选择省市区县,乡镇等'}}</span>
|
||
</view>
|
||
</view>
|
||
<view class="list-item">
|
||
<view class="item">详细地址 <textarea placeholder-class="placeholder-style" v-model="address" auto-height
|
||
placeholder="请完善详细街道,楼牌号等" />
|
||
</view>
|
||
</view>
|
||
<view class="list-item moren">
|
||
<view class="item">
|
||
<view class="uni-list-cell-db">设置默认地址</view>
|
||
<switch @change="switchChange" :checked="is_default" color='#8b64fd' style="transform:scale(0.9)" />
|
||
</view>
|
||
</view>
|
||
<view class="besure" @click="besure">保存</view>
|
||
<selectAddress ref='selectAddress' :addressIdList='addressIdList' @selectAddress="successSelectAddress" />
|
||
<!-- <u-toast ref="uToast" /> -->
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import selectAddress from '@/components/yixuan-selectAddress/yixuan-selectAddress.vue'
|
||
import cityData from '@/static/yixuan-selectAddress/city.json'
|
||
import {
|
||
addAddresses,
|
||
getAddresses,
|
||
editAddresses
|
||
} from '@/apis/interfaces/address'
|
||
export default {
|
||
components: {
|
||
selectAddress
|
||
},
|
||
data() {
|
||
return {
|
||
name: '', //姓名
|
||
mobile: '', //电话
|
||
address: '', //详细地址
|
||
is_default: false, //默认 1=默认
|
||
addressTxt: '', // 已选择的地址显示 (页面显示)
|
||
addressIdList: [], // 向子组件传递参数数组[3,36,37] 即显示默认值【province_id，province_id，district_id】
|
||
addressId: '',
|
||
isloaded: false
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
if (!!e.id) {
|
||
uni.setNavigationBarTitle({
|
||
title: '编辑地址'
|
||
})
|
||
this.addressId = e.id
|
||
this.getInfo(e.id)
|
||
} else {
|
||
this.isloaded = true
|
||
}
|
||
},
|
||
methods: {
|
||
// 根据地址id获取地址的详细信息
|
||
getInfo(id) {
|
||
getAddresses(id).then(res => {
|
||
const array = [res.province.region_id, res.city.region_id, res.district.region_id]
|
||
this.addressIdList = array
|
||
this.name = res.name
|
||
this.mobile = res.mobile
|
||
this.address = res.address
|
||
this.addressTxt = res.province.name + ' ' + res.city.name + ' ' + res.district.name
|
||
this.is_default = res.default
|
||
this.isloaded = true
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
// 是否勾选默认
|
||
switchChange(e) {
|
||
this.is_default = e.target.value
|
||
},
|
||
// 点击省市区选择
|
||
btnClick() {
|
||
this.$refs.selectAddress.show()
|
||
},
|
||
besure() {
|
||
let params = {
|
||
name: this.name,
|
||
mobile: this.mobile,
|
||
address: this.address,
|
||
is_default: this.is_default ? 1 : 0,
|
||
province_id: this.addressIdList[0],
|
||
city_id: this.addressIdList[1],
|
||
district_id: this.addressIdList[2]
|
||
}
|
||
if (params.name.trim() === '') {
|
||
uni.showToast({
|
||
title: '请重新核对姓名',
|
||
icon: 'none'
|
||
})
|
||
} else if (params.mobile.trim() === '' || params.mobile.trim().length !== 11) {
|
||
uni.showToast({
|
||
title: '请重新核对手机号码',
|
||
icon: 'none'
|
||
})
|
||
} else if (this.addressIdList[0] === undefined || this.addressIdList[1] === undefined || this.addressIdList[
|
||
2] === undefined) {
|
||
uni.showToast({
|
||
title: '请完善省市区信息',
|
||
icon: 'none'
|
||
})
|
||
} else if (params.address.trim() === '') {
|
||
uni.showToast({
|
||
title: '请完善详细的收货地址',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
if (this.addressId) {
|
||
editAddresses(this.addressId, params).then(res => {
|
||
this.$refs.uToast.show({
|
||
title: res,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
uni.setStorageSync('refresh',true)
|
||
uni.navigateBack({})
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
} else {
|
||
addAddresses(params).then(res => {
|
||
this.$refs.uToast.show({
|
||
title: res,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
uni.navigateBack({})
|
||
}).catch(err => {
|
||
this.$refs.uToast.show({
|
||
title: err.message,
|
||
type: 'primary',
|
||
duration: 3000
|
||
})
|
||
})
|
||
}
|
||
|
||
}
|
||
},
|
||
// 选择成功回调
|
||
successSelectAddress(address) {
|
||
if (address[0].id) {
|
||
this.addressIdList = [address[0].id, address[1].id, address[2].id]
|
||
this.addressTxt = address[0].name + ' ' + address[1].name + ' ' + address[2].name
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.Create-addr {
|
||
line-height: 100vh;
|
||
background-color: #fff;
|
||
|
||
}
|
||
|
||
.list-item {
|
||
padding: 0 $padding*1.5;
|
||
background-color: #fff;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: $padding 0;
|
||
border-bottom: solid #f8f8f8 1rpx;
|
||
font-size: $title-size - 2;
|
||
color: #333;
|
||
|
||
input,
|
||
textarea,
|
||
span,
|
||
.picker {
|
||
color: #353535;
|
||
font-size: $title-size - 1;
|
||
width: 74%;
|
||
}
|
||
|
||
.picker {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
.picker-item {
|
||
width: 33.33%;
|
||
border: solid 1rpx #ccc;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.placeholder-style {
|
||
color: #ccc;
|
||
}
|
||
}
|
||
}
|
||
|
||
.moren {
|
||
border-top: $padding solid #f7f7f7;
|
||
}
|
||
|
||
.besure {
|
||
background-color: $text-price;
|
||
color: #fff;
|
||
text-align: center;
|
||
margin: $margin*1.5;
|
||
border-radius: $radius;
|
||
padding: $padding*1.3;
|
||
}
|
||
|
||
.popup {
|
||
min-height: 500rpx;
|
||
|
||
.popup-top {
|
||
position: relative;
|
||
font-size: $title-size - 4;
|
||
|
||
.title {
|
||
text-align: center;
|
||
padding: $padding*1.5 $padding*2;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
}
|
||
|
||
.select {
|
||
position: absolute;
|
||
top: $padding;
|
||
right: $padding;
|
||
color: $text-price;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.addr-show {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
padding: 0 $padding *3;
|
||
font-size: $title-size;
|
||
|
||
.addr-show-item {
|
||
padding: $padding*1.5 0;
|
||
margin-right: $margin*2;
|
||
max-width: 33.33%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.picker-item-selected {
|
||
border-bottom: solid $text-price 4rpx;
|
||
}
|
||
}
|
||
|
||
.scroll-Y {
|
||
height: 60vh;
|
||
padding: $padding*2;
|
||
box-sizing: border-box;
|
||
|
||
.scroll-item {
|
||
padding: $padding*1.5 0;
|
||
border-bottom: solid .25rpx rgba($color: #000000, $alpha: 0.02);
|
||
color: #353535;
|
||
font-size: $title-size;
|
||
|
||
.pr20 {
|
||
padding-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|