[商城整个模块，及个人中心相应的模块调整]
This commit is contained in:
302
pages/user/address/create.vue
Normal file
302
pages/user/address/create.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<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]
|
||||
}
|
||||
console.log(params,'params。。。')
|
||||
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>
|
||||
Reference in New Issue
Block a user