306 lines
7.1 KiB
Vue
306 lines
7.1 KiB
Vue
<template>
|
||
<view class="apply-pages" v-if="isLoad">
|
||
<view class="apply-form pl-lg pr-lg">
|
||
<view class="fill-base mt-md radius-16">
|
||
<view class="flex-between ml-lg mr-lg b-1px-b">
|
||
<view class="item-text">联系人</view>
|
||
<input v-model="form.user_name" type="text" class="item-input flex-1" maxlength="20"
|
||
:placeholder="rule[0].errorMsg" />
|
||
</view>
|
||
<view class="flex-between ml-lg mr-lg">
|
||
<view class="item-text">手机号</view>
|
||
<input v-model="form.mobile" type="text" class="item-input flex-1"
|
||
:placeholder="rule[1].errorMsg" />
|
||
</view>
|
||
</view>
|
||
<view class="fill-base mt-md radius-16">
|
||
<view class="flex-between ml-lg mr-lg b-1px-b">
|
||
<view class="item-text">选择地区</view>
|
||
<view @tap.stop="toChooseLocation" class="item-input text flex-1">
|
||
<view class="flex-y-center text-right">
|
||
<view class="flex-1 text-right">{{form.address || `点击右边图标设置`}}</view><i
|
||
class="iconfont iconjuli ml-sm" :style="{color: primaryColor}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-between ml-lg mr-lg">
|
||
<view class="item-text">详细地址</view>
|
||
<input v-model="form.address_info" type="text" class="item-input flex-1"
|
||
:placeholder="rule[3].errorMsg" />
|
||
</view>
|
||
</view>
|
||
<view class="fill-base mt-md radius-16">
|
||
<view class="flex-between ml-lg mr-lg">
|
||
<view class="item-text flex-1" style="width: 300rpx;">设为默认地址</view>
|
||
<!-- status 1默认； -->
|
||
<view @tap.stop="form.status = form.status ==1 ? 0 : 1" class="item-input">
|
||
<i class="iconfont icon-switch" :class="[{'icon-switch-on':form.status==1}]"
|
||
:style="{color:form.status==1? primaryColor:'#f2f2f2'}"></i>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="f-icontext c-caption mt-md"> 设置后，下单时优先展示该地址</view>
|
||
</view>
|
||
|
||
<view class="space-max-footer"></view>
|
||
|
||
<fix-bottom-button @cancel="toDel" @confirm="submit" :text="textArr" bgColor="#fff"></fix-bottom-button>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from "vuex"
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
isLoad: false,
|
||
options: {},
|
||
textArr: [{
|
||
text: '删除',
|
||
type: 'cancel'
|
||
}, {
|
||
text: '保存',
|
||
type: 'confirm'
|
||
}],
|
||
form: {
|
||
id: 0,
|
||
user_name: '',
|
||
mobile: '',
|
||
address: '',
|
||
address_info: '',
|
||
lng: '',
|
||
lat: '',
|
||
status: 0
|
||
},
|
||
rule: [{
|
||
name: "user_name",
|
||
checkType: "isNotNull",
|
||
errorMsg: "输入联系人姓名",
|
||
regType: 2
|
||
}, {
|
||
name: "mobile",
|
||
checkType: "isMobile",
|
||
errorMsg: "输入手机号"
|
||
},
|
||
{
|
||
name: "address",
|
||
checkType: "isNotNull",
|
||
errorMsg: "设置地区"
|
||
},
|
||
{
|
||
name: "address_info",
|
||
checkType: "isNotNull",
|
||
errorMsg: "输入街道、楼牌号等",
|
||
regType: 2
|
||
},
|
||
],
|
||
lockTap: false
|
||
}
|
||
},
|
||
computed: mapState({
|
||
primaryColor: state => state.config.configInfo.primaryColor,
|
||
subColor: state => state.config.configInfo.subColor,
|
||
location: state => state.user.location,
|
||
}),
|
||
onLoad(options) {
|
||
this.options = options
|
||
this.initIndex()
|
||
},
|
||
methods: {
|
||
...mapMutations(['updateUserItem', 'updateOrderItem']),
|
||
async initIndex() {
|
||
// #ifdef H5
|
||
if (this.$jweixin.isWechat()) {
|
||
await this.$jweixin.initJssdk();
|
||
this.$jweixin.wxReady(() => {
|
||
this.$jweixin.hideOptionMenu()
|
||
})
|
||
}
|
||
// #endif
|
||
let {
|
||
id = 0
|
||
} = this.options
|
||
uni.setNavigationBarTitle({
|
||
title: id ? `编辑地址` : `添加新地址`
|
||
})
|
||
if (!id) {
|
||
this.textArr.splice(0, 1)
|
||
this.isLoad = true
|
||
this.$util.setNavigationBarColor({
|
||
bg: this.primaryColor
|
||
})
|
||
return
|
||
}
|
||
let data = await this.$api.mine.addressInfo({
|
||
id
|
||
})
|
||
for (let key in this.form) {
|
||
this.form[key] = data[key]
|
||
}
|
||
this.$util.setNavigationBarColor({
|
||
bg: this.primaryColor
|
||
})
|
||
this.isLoad = true
|
||
},
|
||
// 选择地区
|
||
async toChooseLocation(e) {
|
||
await this.$util.checkAuth({
|
||
type: 'userLocation'
|
||
})
|
||
let {
|
||
lat: locaLat = '',
|
||
lng: locaLng = ''
|
||
} = this.location
|
||
let {
|
||
id = 0,
|
||
lat: addrLat,
|
||
lng: addrLng
|
||
} = this.form
|
||
|
||
if (id) {
|
||
locaLat = addrLat
|
||
locaLng = addrLng
|
||
}
|
||
|
||
let param = {}
|
||
if (!locaLat && !locaLng) {
|
||
// #ifdef H5
|
||
if (this.$jweixin.isWechat()) {
|
||
this.$util.showLoading()
|
||
await this.$jweixin.wxReady2();
|
||
let {
|
||
latitude,
|
||
longitude
|
||
} = await this.$jweixin.getWxLocation()
|
||
locaLat = latitude
|
||
locaLng = longitude
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
let location = await this.$util.getBmapLocation()
|
||
locaLat = location.lat
|
||
locaLng = location.lng
|
||
// #endif
|
||
}
|
||
|
||
// #ifndef MP-WEIXIN
|
||
param = {
|
||
latitude: locaLat,
|
||
longitude: locaLng
|
||
}
|
||
// #endif
|
||
let [, {
|
||
address = '',
|
||
longitude,
|
||
latitude,
|
||
name
|
||
}] = await uni.chooseLocation(param);
|
||
if (!address) return
|
||
this.form.address = address
|
||
this.form.lng = longitude
|
||
this.form.lat = latitude
|
||
},
|
||
async toDel() {
|
||
let [res_del, {
|
||
confirm
|
||
}] = await uni.showModal({
|
||
title: '提示',
|
||
content: "请确认是否要删除此数据?"
|
||
})
|
||
if (!confirm) return;
|
||
let {
|
||
id
|
||
} = this.form
|
||
let {
|
||
check_id
|
||
} = this.$util.getPage(-1)
|
||
if (this.lockTap) return
|
||
this.lockTap = true
|
||
this.$util.showLoading()
|
||
try {
|
||
await this.$api.mine.addressDel({
|
||
id
|
||
})
|
||
this.$util.hideAll()
|
||
this.$util.showToast({
|
||
title: `删除成功`,
|
||
});
|
||
this.lockTap = false
|
||
if (id == check_id) {
|
||
this.updateOrderItem({
|
||
key: 'haveOperItem',
|
||
val: true
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
this.$util.back()
|
||
this.$util.goUrl({
|
||
url: 1,
|
||
openType: `navigateBack`
|
||
})
|
||
}, 1000)
|
||
} catch (e) {
|
||
setTimeout(() => {
|
||
this.lockTap = false
|
||
this.$util.hideAll()
|
||
}, 2000)
|
||
}
|
||
},
|
||
//表单验证
|
||
validate(param) {
|
||
let validate = new this.$util.Validate();
|
||
this.rule.map(item => {
|
||
let {
|
||
name,
|
||
} = item
|
||
validate.add(param[name], item);
|
||
})
|
||
let message = validate.start();
|
||
return message;
|
||
},
|
||
async submit() {
|
||
let param = this.$util.deepCopy(this.form)
|
||
let msg = this.validate(param);
|
||
if (msg) {
|
||
this.$util.showToast({
|
||
title: msg
|
||
});
|
||
return;
|
||
}
|
||
if (this.lockTap) return
|
||
this.lockTap = true
|
||
this.$util.showLoading()
|
||
try {
|
||
let methodModel = param.id ? `addressUpdate` : `addressAdd`
|
||
await this.$api.mine[methodModel](param)
|
||
this.$util.hideAll()
|
||
this.$util.showToast({
|
||
title: `保存成功`,
|
||
});
|
||
setTimeout(() => {
|
||
this.$util.back()
|
||
this.$util.goUrl({
|
||
url: 1,
|
||
openType: `navigateBack`
|
||
})
|
||
}, 1000)
|
||
} catch (e) {
|
||
setTimeout(() => {
|
||
this.lockTap = false
|
||
this.$util.hideAll()
|
||
}, 2000)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
</style>
|