You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
8.4 KiB
328 lines
8.4 KiB
<template>
|
|
<view class="content">
|
|
<view class="row b-b">
|
|
<text class="tit">联系人</text>
|
|
<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
|
|
</view>
|
|
<view class="row b-b">
|
|
<view class="tit">手机号</view>
|
|
<input class="input" type="number" maxlength="11" v-model="addressData.phoneNumber" placeholder="收货人手机号码" placeholder-class="placeholder" />
|
|
</view>
|
|
|
|
<!-- <view class="row b-b">
|
|
<view class="tit">所在地</view>
|
|
<view class="input">
|
|
<w-select style="" v-model="chooseValue" defaultValue="请选择所在地" :list="range" width="100%" valueName="content" @change="change"></w-select>
|
|
-->
|
|
<!-- <uni-data-select :placeholder="addressData.region" v-model="value" :localdata="range" @change="change"></uni-data-select> -->
|
|
<!-- </view>
|
|
</view> -->
|
|
<!-- <view class="row b-b">
|
|
<text class="tit">地图:</text>
|
|
<input class="input" @click="openMap()" type="text" value="" v-model="mapAddressName"
|
|
placeholder="在地图上搜索并选择地址" disabled="true" />
|
|
<text class="yticon icon-shouhuodizhi"></text>
|
|
</view> -->
|
|
<!-- <view class="row b-b">
|
|
<view class="tit">取货点</view>
|
|
<view class="input">
|
|
<w-select style="" v-model="chooseValueAddress" defaultValue="请选择取货点" :list="rangeAddress" width="100%" valueName="content" @change="changeAddress"></w-select>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="row b-b">
|
|
<view class="tit">所在地</view>
|
|
<view class="input"><uni-data-select v-model="valueszd" :localdata="rangeszd" @change="changeszd"></uni-data-select></view>
|
|
</view>
|
|
<view class="row b-b">
|
|
<view class="tit">取货点</view>
|
|
<view class="input"><uni-data-select v-model="valueqhd" :localdata="rangeqhd" @change="changeqhd"></uni-data-select></view>
|
|
</view>
|
|
|
|
<!-- <view class="row default-row">
|
|
<text class="tit">设为默认</text>
|
|
<switch :checked="addressData.defaultStatus" color="#fa436a" @change="switchChange" />
|
|
</view> -->
|
|
<button class="add-btn" @click="confirm">提交</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Api from '@/common/api'
|
|
import lotusAddress from '@/components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
mapAddressName: '',
|
|
addressData: {
|
|
name: '',
|
|
phoneNumber: '',
|
|
province: '',
|
|
city: '',
|
|
region: '',
|
|
detailAddress: '王宫村服务站',
|
|
defaultStatus: 1,
|
|
def: false
|
|
},
|
|
lotusAddressData: {
|
|
visible: false,
|
|
provinceName: '',
|
|
cityName: '',
|
|
townName: ''
|
|
},
|
|
chooseValue: '',
|
|
range: [
|
|
{
|
|
content: '王宫村'
|
|
},
|
|
{
|
|
content: '土山村'
|
|
},
|
|
{
|
|
content: '马庄村'
|
|
}
|
|
],
|
|
chooseValueAddress: '',
|
|
rangeAddress: [],
|
|
valueszd: '',
|
|
rangeszd: [
|
|
{
|
|
value: '王宫村',
|
|
text: '王宫村'
|
|
},
|
|
{
|
|
value: '土山村',
|
|
text: '土山村'
|
|
},
|
|
{
|
|
value: '马庄村',
|
|
text: '马庄村'
|
|
}
|
|
],
|
|
valueqhd: '',
|
|
rangeqhd: [],
|
|
mapAddress: {}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
let title = '新增收货地址'
|
|
if (option.type === 'edit') {
|
|
title = '编辑收货地址'
|
|
this.addressData = JSON.parse(option.data)
|
|
this.addressData.postCode=''
|
|
this.addressData.province=''
|
|
this.addressData.city=''
|
|
this.addressData.areaId=''
|
|
this.addressData.longitude=''
|
|
this.addressData.latitude=''
|
|
this.valueszd = this.addressData.region
|
|
this.valueqhd = this.addressData.detailAddress
|
|
}
|
|
this.manageType = option.type
|
|
uni.setNavigationBarTitle({
|
|
title: title
|
|
})
|
|
this.initAddressData()
|
|
},
|
|
methods: {
|
|
initAddressData() {
|
|
let _this = this
|
|
Api.apiCall('get', Api.build.wuyeCompanyWithCommunity, {}).then(res => {
|
|
_this.mapAddress = res
|
|
_this.rangeszd = []
|
|
for (var name in res) {
|
|
_this.rangeszd.push({ value: name, text: name })
|
|
}
|
|
if (_this.manageType === 'edit') {
|
|
console.log('fFFFF',_this.addressData)
|
|
_this.valueszd = _this.addressData.region
|
|
_this.rangeqhd= []
|
|
for (var i in _this.mapAddress[_this.addressData.region]) {
|
|
_this.rangeqhd.push({ value: _this.mapAddress[_this.addressData.region][i], text: _this.mapAddress[_this.addressData.region][i] })
|
|
}
|
|
_this.valueqhd = _this.addressData.detailAddress
|
|
}
|
|
})
|
|
},
|
|
change(res) {
|
|
console.log('res', res)
|
|
console.log('chooseValue', this.chooseValue)
|
|
// let index = this.range.findIndex((item) => item.value == res)
|
|
this.addressData.region = res.content
|
|
// this.chooseValue = res.content
|
|
console.log('region》》》', this.addressData.region)
|
|
console.log('chooseValue》》》', this.chooseValue)
|
|
this.rangeAddress = []
|
|
this.valueb = []
|
|
for (var i in this.mapAddress[res.content]) {
|
|
this.rangeAddress.push({ content: this.mapAddress[res.content][i] })
|
|
}
|
|
this.chooseValueAddress = null
|
|
},
|
|
changeAddress(res) {
|
|
console.log('res', res)
|
|
// let index = this.range.findIndex((item) => item.value == res)
|
|
this.addressData.detailAddress = res.content
|
|
this.chooseValueAddress = res.content
|
|
console.log('regionxxx》》》', res.content)
|
|
},
|
|
changeszd(res) {
|
|
this.addressData.region = res
|
|
this.valueszd = res
|
|
this.rangeqhd= []
|
|
for (var i in this.mapAddress[res]) {
|
|
this.rangeqhd.push({ value: this.mapAddress[res][i], text: this.mapAddress[res][i] })
|
|
}
|
|
this.valueqhd = ''
|
|
this.addressData.detailAddress = ''
|
|
},
|
|
changeqhd(res) {
|
|
this.addressData.detailAddress = res
|
|
this.valueqhd = res
|
|
},
|
|
|
|
switchChange(e) {
|
|
this.addressData.defaultStatus = e.detail.value ? 1 : 0
|
|
this.addressData.def = e.detail.value
|
|
},
|
|
|
|
openMap() {
|
|
var _this = this
|
|
uni.chooseLocation({
|
|
success: function(res) {
|
|
console.log('res', res)
|
|
|
|
_this.addressData.latitude = res.latitude
|
|
_this.addressData.longitude = res.longitude
|
|
_this.mapAddressName = res.address + res.name
|
|
_this.addressData.detailAddress = res.address + res.name
|
|
console.log('经度：' + res.longitude)
|
|
console.log('详细地址：' + res.address)
|
|
console.log('纬度：' + res.latitude)
|
|
}
|
|
})
|
|
},
|
|
choseValue(res) {
|
|
//res数据源包括已选省市区与省市区code
|
|
this.lotusAddressData.visible = false //visible为显示与关闭组件标识true显示false隐藏
|
|
if (res.isChose) {
|
|
console.log(res)
|
|
this.lotusAddressData.provinceName = res.provice //省
|
|
this.lotusAddressData.cityName = res.city //市
|
|
this.lotusAddressData.townName = res.town //区
|
|
|
|
//赋值到addressData
|
|
this.addressData.province = res.provice
|
|
this.addressData.city = res.city
|
|
this.addressData.region = res.town
|
|
}
|
|
},
|
|
|
|
//提交
|
|
async confirm() {
|
|
const that = this
|
|
let data = this.addressData
|
|
console.log('data》》》', data)
|
|
if (!data.name) {
|
|
this.$api.msg('请填写收货人姓名')
|
|
return
|
|
}
|
|
if (!/^1[1-9][0-9]\d{8}$/.test(data.phoneNumber)) {
|
|
that.$api.msg('请输入正确的手机号码')
|
|
return
|
|
}
|
|
// if (!data.province) {
|
|
// that.$api.msg('请选择省市区');
|
|
// return
|
|
// }
|
|
// if (!data.city) {
|
|
// that.$api.msg('请选择二级城市')
|
|
// return
|
|
// }
|
|
if (!data.region) {
|
|
that.$api.msg('请选择所在地')
|
|
return
|
|
}
|
|
if (!data.detailAddress) {
|
|
that.$api.msg('请选择取货点')
|
|
return
|
|
}
|
|
|
|
let data1 = await Api.apiCall('post', Api.goods.addressSave, that.addressData)
|
|
if (data1) {
|
|
this.$api.msg(`保存成功`)
|
|
setTimeout(() => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}, 800)
|
|
} else {
|
|
this.$api.msg(`保存失败`)
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
'lotus-address': lotusAddress
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: $page-color-base;
|
|
padding-top: 16upx;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
padding: 0 30upx;
|
|
height: 110upx;
|
|
background: #fff;
|
|
|
|
.tit {
|
|
flex-shrink: 0;
|
|
width: 120upx;
|
|
font-size: 30upx;
|
|
color: $font-color-dark;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 30upx;
|
|
color: $font-color-dark;
|
|
}
|
|
|
|
.icon-shouhuodizhi {
|
|
font-size: 36upx;
|
|
color: $font-color-light;
|
|
}
|
|
}
|
|
|
|
.default-row {
|
|
margin-top: 16upx;
|
|
|
|
.tit {
|
|
flex: 1;
|
|
}
|
|
|
|
switch {
|
|
transform: translateX(16upx) scale(0.9);
|
|
}
|
|
}
|
|
|
|
.add-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 690upx;
|
|
height: 80upx;
|
|
margin: 60upx auto;
|
|
font-size: $font-lg;
|
|
color: #fff;
|
|
background-color: $base-color;
|
|
border-radius: 10upx;
|
|
box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
}
|
|
</style>
|
|
|