367 lines
9.7 KiB
Vue
367 lines
9.7 KiB
Vue
<template>
|
|
<view class="new-address-page">
|
|
<NavCom title="添加新地址"></NavCom>
|
|
<view class="main">
|
|
<view class="address-main">
|
|
<view class="address-item">
|
|
<view class="shu"></view>
|
|
<view class="item">
|
|
<view class="title">收货人</view>
|
|
<input type="text" class="value" v-model="form.receiver" placeholder="请填写收货人" placeholder-class="value-placeholder">
|
|
</view>
|
|
</view>
|
|
<view class="address-item">
|
|
<view class="shu"></view>
|
|
<view class="item">
|
|
<view class="title">联系电话</view>
|
|
<input type="text" class="value" v-model="form.phone" placeholder="请填写收货人电话号码" placeholder-class="value-placeholder">
|
|
</view>
|
|
</view>
|
|
<view class="address-item">
|
|
<view class="shu"></view>
|
|
<view class="item">
|
|
<view class="title">所在地区</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-placeholder">
|
|
</view>
|
|
</view>
|
|
<view class="address-item" >
|
|
<view class="shu"></view>
|
|
<view class="item" style="border-bottom: none;">
|
|
<view class="title">详细地址</view>
|
|
<input type="text" class="value" v-model="form.address" placeholder="请填写详细地址" placeholder-class="value-placeholder">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="address">
|
|
<view class="address-info">
|
|
<view class="info-label">收货人</view>
|
|
<input type="text" placeholder="请填写收货人" class="address-input" v-model="form.receiver">
|
|
</view>
|
|
</view>
|
|
<view class="address">
|
|
<view class="address-info">
|
|
<view class="info-label">联系电话</view>
|
|
<input type="text" placeholder="收货人电话号码" class="address-input" v-model="form.phone">
|
|
</view>
|
|
</view> -->
|
|
<!-- <view class="address">
|
|
<view class="address-info">
|
|
<view class="info-label">所在地区</view>
|
|
<pick-regions :defaultRegion="defaultRegion" @getRegion="handleGetRegion" style="width: 500rpx;height: 30rpx;z-index: 99;">
|
|
</pick-regions>
|
|
<input type="text" disabled class="address-input address-value" style="z-index: 1;" placeholder="请选择" v-model="regionName"
|
|
readonly="readonly">
|
|
</view>
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/ar.png" mode="" class="address-img"></image>
|
|
</view> -->
|
|
<!-- <view class="address">
|
|
<view class="address-info">
|
|
<view class="info-label-textarea">详细地址</view>
|
|
<textarea placeholder="请输入" class="address-textarea" v-model="form.address"></textarea>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="default">
|
|
<view class="default-title">设为默认地址</view>
|
|
<view class="default-img default-yes" v-if="form.isDefault === 1" @click="setDefault">
|
|
<image src="@/static/mine/y.png" mode="" class="status"></image>
|
|
</view>
|
|
<view class="default-img default-no" v-if="form.isDefault === 0" @click="setDefault">
|
|
<image src="@/static/mine/y.png" mode="" class="status"></image>
|
|
</view>
|
|
<!-- <image src="@/static/mine/s.png" mode="" class="default-img" v-if="form.isDefault === 1" @click="setDefault"></image>
|
|
<image src="@/static/mine/n.png" mode="" class="default-img" v-if="form.isDefault === 0" @click="setDefault"></image> -->
|
|
<!-- <image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/ad.png" mode="" class="default-img" v-if="form.isDefault === 1" @click="setDefault"></image>
|
|
<image src="https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/order/nd.png" mode="" class="default-img" v-if="form.isDefault === 0" @click="setDefault"></image> -->
|
|
</view>
|
|
<view class="footer" @click="save">保存收货地址</view>
|
|
</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 NavCom from '@/pages/components/nav.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,NavCom},
|
|
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-image: url('@/static/index/bg.png');
|
|
background-size: 100%;
|
|
}
|
|
.new-address-page{
|
|
|
|
.main{
|
|
// height:100vh;
|
|
padding-top: 130rpx;
|
|
.address-main{
|
|
width: 707rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
padding: 0rpx 35rpx 0 24rpx;
|
|
margin-left: 22rpx;
|
|
.address-item{
|
|
display: flex;
|
|
align-items: center;
|
|
height: 112rpx;
|
|
.shu{
|
|
width: 8rpx;
|
|
height: 18rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 13rpx;
|
|
margin-right: 13rpx;
|
|
}
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 626rpx;
|
|
height: 112rpx;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
position: relative;
|
|
.title{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
width: 150rpx;
|
|
}
|
|
.value{
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.address-value{
|
|
position: absolute;
|
|
top: 36rpx;
|
|
left: 150rpx;
|
|
}
|
|
.value-placeholder{
|
|
font-size: 28rpx;
|
|
color: #888888;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// background-color: #fff;
|
|
.address{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 60rpx;
|
|
.address-info{
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
.info-label{
|
|
width: 112rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: 800;
|
|
}
|
|
.address-input{
|
|
width: 452rpx;
|
|
margin-left: 38rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
.address-value{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 108rpx;
|
|
}
|
|
.info-label-textarea{
|
|
height: 100rpx;
|
|
width: 112rpx;
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
font-weight: 800;
|
|
}
|
|
.address-textarea{
|
|
width: 432rpx;
|
|
height: 100rpx;
|
|
margin-left: 38rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.address-img{
|
|
width: 8rpx;
|
|
height: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
.default{
|
|
width: 707rpx;
|
|
height: 109rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx;
|
|
margin-left: 22rpx;
|
|
margin-top: 22rpx;
|
|
padding: 0 45rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.default-title{
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
.default-img{
|
|
width: 63rpx;
|
|
height: 31rpx;
|
|
padding: 0rpx 6rpx;
|
|
border-radius: 25rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.status{
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
}
|
|
}
|
|
.default-yes{
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
justify-content: flex-end;
|
|
}
|
|
.default-no{
|
|
background: #E5E5E5;
|
|
}
|
|
}
|
|
.footer{
|
|
width: 706rpx;
|
|
height: 88rpx;
|
|
background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
|
|
border-radius: 44rpx;
|
|
margin-left: 22rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 49rpx;
|
|
}
|
|
}
|
|
</style> |