fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 张文文
Commit 2923b1bfb656e2b597aea5a14ecaa5458521ed10 1 parent b2a76673

更新和删除地址操作

Inline Side-by-side
Showing 4 changed files with 136 additions and 42 deletions
... ... @@ -2,10 +2,21 @@
<LayoutApp title="添加地址" :show-back="true">
<div class="pane-body">
<FormItem>
<CInput label="收货人" place-holder="请写姓名" v-model="model.receiverName"></CInput>
<CInput
label="收货人"
place-holder="请写姓名"
v-model="model.receiverName"
:textValue="model.receiverName"
type="text"
></CInput>
</FormItem>
<FormItem>
<CInput label="手机号" place-holder="请填写手机号" v-model="model.receiverMobile"></CInput>
<CInput
label="手机号"
place-holder="请填写手机号"
v-model="model.receiverMobile"
:textValue="model.receiverMobile"
></CInput>
</FormItem>
<template>
... ... @@ -26,7 +37,12 @@
</template>
<FormItem>
<CInput label="详细地址" place-holder="请输入详细地址" v-model="model.receiverAddress"></CInput>
<CInput
label="详细地址"
place-holder="请输入详细地址"
v-model="model.receiverAddress"
:textValue="model.receiverAddress"
></CInput>
</FormItem>
<label
... ... @@ -41,6 +57,7 @@
<label class="label-text">
<input
type="radio"
checked="tag.code === model.tagType"
name="tag"
:value="tag.code"
class="label-tag"
... ... @@ -51,12 +68,16 @@
</div>
</label>
<Radio
class="radio"
:label="{text: '设为默认地址', value: 1}"
style="flex: 0 1 100%;"
v-model="model.defaultType"
></Radio>
<div class="wrapper-del">
<Radio
class="radio"
:label="{text: '设为默认地址', value: 'Y'}"
style="flex: 0 1 100%;"
checked="model.tagType === 'Y'"
v-model="model.defaultType"
></Radio>
<div v-if="isUpdate" class="del-address" @click="delAddress">删除地址</div>
</div>
<div :class="submitClass" @touchend="onSubmit">确定</div>
</div>
... ... @@ -88,6 +109,7 @@ export default {
data() {
return {
isShowPop: false,
isUpdate: false,
model: {
addressId: "",
receiverName: "",
... ... @@ -96,7 +118,7 @@ export default {
receiverArea: "",
receiverAddress: "",
tagType: "",
defaultType: false
defaultType: "N"
}
};
},
... ... @@ -121,7 +143,12 @@ export default {
},
methods: {
...mapMutations({}),
...mapActions(["fetchAddressTags", "addUserAddress"]),
...mapActions([
"fetchAddressTags",
"addUserAddress",
"updateUserAddress",
"deleteUserAddress"
]),
async onSubmit() {
let that = this;
... ... @@ -137,16 +164,20 @@ export default {
mask: true
}).show();
const result = await this.addUserAddress(data);
let result = {};
if (this.isUpdate) {
//更新和添加地址接口不同
result = await this.updateUserAddress(data);
} else {
result = await this.addUserAddress(data);
}
await this.sleep(1000);
this.toast && this.toast.hide();
if (result && result.code === 200) {
this.$store.commit("address/address/ADD_USER_ADDRESS_INFO", {
status: 0
});
this.$router.go(-1);
} else {
this.$createToast({
... ... @@ -199,7 +230,7 @@ export default {
area_code: info.areaCode,
area: info.receiverArea,
address: info.receiverAddress,
is_default: info.defaultType ? "Y" : "N",
is_default: info.defaultType,
tag_code: info.tagType
};
},
... ... @@ -223,10 +254,39 @@ export default {
that.model.areaCode = info.code;
that.model.receiverArea = info.area;
}
},
async delAddress() {
const result = await this.deleteUserAddress(this.model.addressId);
if (result && result.code === 200) {
this.$router.go(-1);
} else {
this.$createToast({
type: "error",
txt: result.message,
mask: true
}).show();
}
}
},
mounted() {
this.fetchAddressTags();
this.isUpdate = this.$route.params.update;
if (this.$route.params.update) {
let item = JSON.parse(this.$route.params.item);
if (item) {
let that = this;
that.model.receiverName = item.consignee;
that.model.addressId = item.address_id;
that.model.receiverMobile = item.mobile;
that.model.areaCode = item.area_code;
that.model.receiverArea = item.area;
that.model.receiverAddress = item.address;
that.model.tagType = item.tag_code;
that.model.defaultType = item.is_default;
}
}
}
};
</script>
... ... @@ -240,6 +300,21 @@ export default {
padding-right: 40px;
}
.wrapper-del {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.del-address {
width: 150px;
text-align: center;
line-height: 80px;
color: #cd001a;
font-size: 26px;
}
}
.wrapper-area {
display: flex;
flex-direction: column;
... ...
... ... @@ -10,7 +10,12 @@
<p class="mobile">{{item.mobile}}</p>
<div v-if="item.is_default === 'Y'" class="tag-btn">默认</div>
<div v-if="item.tag_code" class="tag-btn">{{item.tag}}</div>
<div class="option-btn" :data-item="item" :data-add="false" @click="toEditorPage">编辑</div>
<div
class="option-btn"
:data-item="JSON.stringify(item)"
:data-add="0"
@click="toEditorPage"
>编辑</div>
</div>
<p class="address">{{item.area}}{{item.address}}</p>
<div class="border-line"></div>
... ... @@ -20,7 +25,7 @@
</div>
</div>
<div class="add-btn" :data-add="true" @click="toEditorPage">添加地址</div>
<div class="add-btn" :data-add="1" @click="toEditorPage">添加地址</div>
</CubeScroll>
</template>
... ... @@ -58,19 +63,16 @@ export default {
},
toEditorPage(event) {
event.stopPropagation();
let isAdd = event.currentTarget.dataset.add;
let isAdd = !!parseInt(event.currentTarget.dataset.add);
let item = event.currentTarget.dataset.item || {};
if (isAdd) {
this.$router.push({
name: "addressEdit"
});
} else {
this.$router.push({
name: "addressEdit",
item: item
});
}
this.$router.push({
name: "addressEdit",
params: {
item: item,
update: !isAdd
}
});
}
},
components: {
... ...
... ... @@ -32,6 +32,12 @@ export default {
return "";
}
},
textValue: {
type: String,
default() {
return "";
}
},
label: {
type: String,
default() {
... ... @@ -69,9 +75,14 @@ export default {
}
}
},
watch: {
textValue() {
this.inputValue = this.textValue;
}
},
data() {
return {
inputValue: this.value,
inputValue: this.textValue,
tipError: "不能为空",
numTipError: "只能为数字",
error: "不能为空",
... ...
... ... @@ -87,24 +87,30 @@ export default {
async updateUserAddress({
commit
}) {
const result = await this.$api.post('/api/address/updateAddress');
if (result.code === 200) {
commit(Types.UPDATE_USER_ADDRESS_INFO);
}
}, data) {
const result = await this.$api.post('/api/address/updateAddress', {
uid: '500031912',
id: data.id,
address: data.address,
area_code: data.area_code,
consignee: data.consignee,
mobile: data.mobile,
tag_code: data.tag_code,
is_default: data.is_default,
debug: 'XYZ'
});
return result || {};
},
async deleteUserAddress({
commit
}) {
const result = await this.$api.post('/api/address/delAddress');
if (result.code === 200) {
commit(Types.DELETE_USER_ADDRESS_INFO);
}
}, addressId) {
const result = await this.$api.post('/api/address/delAddress', {
uid: '500031912',
id: addressId,
debug: 'XYZ'
});
return result || {};
},
... ...