252 lines
8.2 KiB
Vue
252 lines
8.2 KiB
Vue
<template>
|
|
<ciy-header title="我的收货地址"></ciy-header>
|
|
<view v-if="init.code != 1" class="px4 py4">
|
|
<view class="ciy-skeleton" style="height:2em;width:60%;"></view>
|
|
<view class="ciy-skeleton" style="height:1em;width:40%;margin-left:1em;"></view>
|
|
<view class="ciy-skeleton" style="height:1em;width:50%;"></view>
|
|
<view class="ciy-skeleton" style="height:6em;width:100%;"></view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="ciy-list" :class="{selected:opn.sel&&item.id==opn.id,del:item._del}" v-for="(item,index) in init.list" :key="item.id" @tap="select(item.id)">
|
|
<view class="l2">收件人 {{item.name}}</view>
|
|
<view class="l2">联系电话 {{item.phone}}</view>
|
|
<view class="l2">{{mcode(g.ciy_arearpc,item.areacode,'name').join(' . ')}}</view>
|
|
<view class="l2">{{item.addr}}</view>
|
|
<view class="dot" @tap.stop="showmenu(index)"></view>
|
|
</view>
|
|
<view style="height:5em;"></view>
|
|
<view class="ciy-add" style="z-index:41;" @tap="editshow()"></view>
|
|
<view v-if="opn.sel">
|
|
<view class="bg1 txt-center py4 ciy-bottom">
|
|
<button class="btn lg" @tap="selectok">选定</button>
|
|
</view>
|
|
</view>
|
|
<ciy-anipop v-model="popedit" :zindex="998" maskbg="#00000077" :title="edit.id>0?'更新地址':'新建地址'">
|
|
<view class="bg1 pop">
|
|
<form @submit="edit_submit" class="char5">
|
|
<view class="ciy-form">
|
|
<label class="imp">收件人</label>
|
|
<view>
|
|
<ciy-input name="name" v-model="edit.name" bb ciystyle="width:9em;margin-right: 0.5em;"></ciy-input>
|
|
</view>
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view style="flex:none;">
|
|
<button class="btn sm" @tap="chooseaddr">从微信同步</button>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label class="imp">联系电话</label>
|
|
<view>
|
|
<ciy-input name="phone" v-model="edit.phone" bb ciystyle="width:7em;"></ciy-input>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label class="imp">省市区</label>
|
|
<view>
|
|
<ciy-selcas left name="areacode" align="left" v-model="edit.areacode" :range="g.ciy_arearpc" rootupid="0"></ciy-selcas>
|
|
</view>
|
|
</view>
|
|
<view class="ciy-form">
|
|
<label class="imp">详细地址</label>
|
|
<view>
|
|
<ciy-input name="addr" v-model="edit.addr" bb ciystyle="margin-right:0.5em;"></ciy-input>
|
|
</view>
|
|
<view style="flex:none;display: block;line-height: 1em;font-size: 0.7em;text-align: center;margin-right: 1em;" @tap="getloc">
|
|
<i class="iconloc"></i><br />
|
|
定位
|
|
</view>
|
|
</view>
|
|
<view class="px4 py4 txt-center">
|
|
<button class="btn lg" form-type="submit">提交</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</ciy-anipop>
|
|
</view>
|
|
</template>
|
|
|
|
<style>
|
|
.ciy-list {
|
|
border: 2px solid var(--bg1);
|
|
transition: all 0.5s;
|
|
}
|
|
|
|
.selected {
|
|
border: 2px solid var(--man6);
|
|
}
|
|
|
|
.iconloc {
|
|
width: 2em;
|
|
height: 2em;
|
|
display: inline-block;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUxNS4yMTMgNjRjLTE4My42NTYgMC0zMzkuMjIgMTU2LjQzNi0zMzkuMjIgMzQxLjczNCAwIDE5NC4wNDcgMTgwLjI4MyAzOTIuNDg1IDMwMS41NTIgNTMxLjk1MyAwLjQ2NSAwLjU2IDIwLjA1OCAyMi4zMTIgNDQuMjE2IDIyLjMxMmgyLjEzM2MyNC4xNDUgMCA0My42MTQtMjEuNzUyIDQ0LjEwNy0yMi4zMTIgMTEzLjgwNi0xMzAuODI4IDI4MC4wMDQtMzQ2LjU0NiAyODAuMDA0LTUzMS45NTNDODQ4LjAwNiAyMjAuNDM2IDcyNi42OCA2NCA1MTUuMjEzIDY0eiBtMTEuMjUyIDgzNi4xMjljLTEgMC45ODQtMi40MDUgMi4wOTItMy42NzggMi45ODItMS4yNy0wLjg5LTIuNjkyLTEuOTk4LTMuNzA1LTIuOTgybC0xNC42Ny0xNi44NDRjLTExNC45Ny0xMzEuODk0LTI3Mi40MTctMzEyLjUxNi0yNzIuNDE3LTQ3Ny41NSAwLTE1NC44OTIgMTI5LjY5NC0yODUuNzQ4IDI4My4yMTctMjg1Ljc0OCAxOTEuMjA2IDAgMjc2Ljc5MiAxNDMuNTAzIDI3Ni43OTIgMjg1Ljc0NyAwIDEyNS4yOS04OS4zMzIgMjkxLjYzOS0yNjUuNTM5IDQ5NC4zOTV6IiBmaWxsPSIjOTNEM0MzIj48L3BhdGg+PHBhdGggZD0iTTUxMi45OTggMjMzLjU2MmMtOTIuNzc4IDAtMTY4LjAwMiA3NS4yMjMtMTY4LjAwMiAxNjguMDAzIDAgOTIuNzc4IDc1LjIyNCAxNjguMDAyIDE2OC4wMDIgMTY4LjAwMlM2ODEgNDk0LjM0MiA2ODEgNDAxLjU2NWMwLjAwMS05Mi43OC03NS4yMjQtMTY4LjAwMy0xNjguMDAyLTE2OC4wMDN6IG0wIDI4MC4wMDRjLTYxLjc1NyAwLTExMy4yODgtNTEuNDYyLTExMy4yODgtMTEzLjIzMiAwLTYxLjc1OCA1MC4yNDYtMTEyLjAwMiAxMTIuMDAyLTExMi4wMDIgNjEuNzcgMCAxMTIuMDAxIDUwLjI0NSAxMTIuMDAxIDExMi4wMDIgMC4wMDEgNjEuNzctNDguOTQ1IDExMy4yMzItMTEwLjcxNSAxMTMuMjMyeiIgZmlsbD0iIzkzRDNDMyI+PC9wYXRoPjwvc3ZnPg==");
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
id: {},
|
|
sel: {}
|
|
},
|
|
data() {
|
|
return {
|
|
popedit: false,
|
|
edit: {
|
|
id: -1
|
|
},
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.load_ciydict(this.file_stor('/dict/ciy_arearpc.js')).then(json => {
|
|
if (json.code != 1)
|
|
return this.alert(json.errmsg);
|
|
this.g.ciy_arearpc = json.arr;
|
|
});
|
|
this.getlist();
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
methods: {
|
|
async getlist() {
|
|
if (this._loading)
|
|
return;
|
|
this._loading = true;
|
|
var retjson = await this.callfunc({
|
|
func: 'me.user_shipaddr_list'
|
|
});
|
|
this._loading = false;
|
|
if (retjson.code != 1)
|
|
return this.alert(retjson.errmsg);
|
|
this.init = retjson;
|
|
if (!this._add && retjson.list.length == 0) {
|
|
setTimeout(() => {
|
|
this.editshow(null);
|
|
}, 400);
|
|
}
|
|
this._add = true;
|
|
},
|
|
showmenu(idx) {
|
|
var dat = this.init.list[idx];
|
|
dat._idx = idx;
|
|
var items = [];
|
|
items.push({
|
|
func: 'editshow',
|
|
name: '更新',
|
|
data: dat
|
|
});
|
|
items.push({
|
|
func: 'del',
|
|
name: '删除',
|
|
style: 'color:var(--dag5)',
|
|
data: dat
|
|
});
|
|
this.popmenu({
|
|
items
|
|
});
|
|
},
|
|
editshow(item) {
|
|
item = item || {
|
|
data: {
|
|
id: 0,
|
|
_idx: -1
|
|
}
|
|
};
|
|
this.edit = {
|
|
...item.data
|
|
};
|
|
this.popedit = true;
|
|
},
|
|
async edit_submit(e) {
|
|
if (e.detail.value.areacode.length == 0)
|
|
return this.alert('请选择省市区');
|
|
if (e.detail.value.addr == '')
|
|
return this.alert('请输入详细地址');
|
|
if (e.detail.value.name == '')
|
|
return this.alert('请输入收件人');
|
|
if (e.detail.value.phone == '')
|
|
return this.alert('请输入联系电话');
|
|
e.detail.value.id = this.edit.id;
|
|
if (this._loading)
|
|
return;
|
|
this._loading = true;
|
|
var retjson = await this.callfunc({
|
|
func: 'me.user_shipaddr_edit',
|
|
data: e.detail.value
|
|
});
|
|
this._loading = false;
|
|
if (retjson.code != 1)
|
|
return this.alert(retjson.errmsg);
|
|
if (this.edit._idx == -1)
|
|
this.init.list.unshift(retjson.data);
|
|
else
|
|
this.init.list[this.edit._idx] = this.objdeepmerge(this.init.list[this.edit._idx], retjson.data);
|
|
this.popedit = false;
|
|
this.toast('更新成功');
|
|
},
|
|
async del(item) {
|
|
if (await this.askmsg('是否删除？') != 'ok')
|
|
return;
|
|
var retjson = await this.callfunc({
|
|
func: 'me.user_shipaddr_del',
|
|
data: {
|
|
id: item.data.id
|
|
}
|
|
});
|
|
if (retjson.code != 1)
|
|
return this.alert(retjson.errmsg);
|
|
this.init.list[item.data._idx]._del = true;
|
|
setTimeout(() => {
|
|
this.init.list.splice(item.data._idx, 1);
|
|
}, 500);
|
|
},
|
|
select(id) {
|
|
if (this.opn.id == id)
|
|
return this.selectok();
|
|
this.opn.id = id;
|
|
},
|
|
selectok() {
|
|
var addr = this.ccode(this.init.list, this.opn.id, '_obj');
|
|
if (addr == null)
|
|
return this.toast('请选择一个收货地址');
|
|
const eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.emit('writedata', addr);
|
|
this.setstorage('shipaddr', addr);
|
|
uni.navigateBack();
|
|
},
|
|
async getloc() {
|
|
try {
|
|
var res = await uni.chooseLocation();
|
|
} catch (res) {
|
|
if (res.errMsg.indexOf('cancel') > -1)
|
|
return;
|
|
this.alert(res.errMsg);
|
|
return;
|
|
}
|
|
this.edit.addr = res.address;
|
|
const regex = /市.*?区/g;
|
|
const match = regex.exec(res.address);
|
|
if (match == null)
|
|
return;
|
|
|
|
var dist = match[0].substr(1);
|
|
for (var i in this.g.ciy_arearpc) {
|
|
if (this.g.ciy_arearpc[i].name == dist) {
|
|
this.edit.areacode = this.g.ciy_arearpc[i].id;
|
|
this.edit.addr = res.address.substr(match.index + match[0].length);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
async chooseaddr() {
|
|
var addr = await wx.chooseAddress();
|
|
console.log(addr);
|
|
this.edit.areacode = addr.nationalCode;
|
|
this.edit.addr = addr.detailInfo;
|
|
this.edit.name = addr.userName;
|
|
this.edit.phone = addr.telNumber;
|
|
}
|
|
}
|
|
}
|
|
</script> |