fe / xianyu-ufo-app-web · Commits

Go to a project

Authored by 张文文
Commit 2acd34505494383c68b29c44970c0b477d649c71 1 parent 8b71520e

添加地址页面及接口

Inline Side-by-side
Showing 8 changed files with 361 additions and 229 deletions
... ... @@ -12,12 +12,12 @@
<FormItem>
<div class="wrapper-area">
<label class="input-label">所在区域</label>
<div class="wrapper-arrow">
<div class="wrapper-arrow" @click="chooseArea">
<template v-if="model.receiverArea">
<label class="text-label">江苏省南京市三山区</label>
<label class="text-label">{{model.receiverArea}}</label>
</template>
<template v-else>
<label class="choose-area" @click="chooseArea">请选择</label>
<label class="choose-area">请选择</label>
</template>
<div class="arrow"></div>
</div>
... ... @@ -37,18 +37,18 @@
accept-charset="utf-8"
>
<p class="tag-text">设置标签：</p>
<label class="label-text">
<input type="radio" name="tag" value="1" class="label-tag" v-model="model.tagType" /> 家
</label>
<label class="label-text">
<input type="radio" name="tag" value="2" class="label-tag" v-model="model.tagType" /> 公司
</label>
<label class="label-text">
<input type="radio" name="tag" value="3" class="label-tag" v-model="model.tagType" /> 学校
</label>
<label class="label-text">
<input type="radio" name="tag" value="4" class="label-tag" v-model="model.tagType" /> 其他
</label>
<div v-for="(tag, index) in addressTags" :key="index">
<label class="label-text">
<input
type="radio"
name="tag"
:value="tag.code"
class="label-tag"
v-model="model.tagType"
/>
{{tag.name}}
</label>
</div>
</label>
<Radio
... ... @@ -60,7 +60,7 @@
<div :class="submitClass" @touchend="onSubmit">确定</div>
</div>
<!-- <AddressAct></AddressAct> -->
<AddressAct v-show="isShowPop" @popHidden="popHidden" @modifyAddressAct="modifyAddressAct"></AddressAct>
</LayoutApp>
</template>
... ... @@ -87,19 +87,21 @@ export default {
},
data() {
return {
isShowPop: false,
model: {
addressId: "",
receiverName: "",
receiverMobile: "",
areaCode: "",
receiverArea: "",
receiverAddress: "",
tagType: 0,
tagType: "",
defaultType: false
}
};
},
computed: {
...mapState(["addressList"]),
...mapState(["addressTags"]),
submitClass() {
return [
"sure-btn",
... ... @@ -109,23 +111,123 @@ export default {
];
},
inNotEmpty() {
return true;
return (
this.model.receiverName &&
this.model.receiverMobile &&
this.model.receiverArea &&
this.model.receiverAddress
);
}
},
methods: {
...mapMutations({}),
...mapActions([""]),
...mapActions(["fetchAddressTags", "addUserAddress"]),
async onSubmit() {
console.log("被选中的值为:" + this.model.tagType);
console.log("被选中的值为:" + this.model.defaultType);
if (!this.inNotEmpty) {
let that = this;
let data = this.validator();
if (!data) {
return;
}
this.toast = this.$createToast({
type: "loading",
txt: "正在提交中",
mask: true
}).show();
const 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({
type: "error",
txt: result.message,
mask: true
}).show();
}
},
sleep(n) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, n);
});
},
validator() {
let info = this.model;
let username = info.receiverName.replace(/(^\s+)|(\s+$)/g, "");
// 简单的表单校验
if (!username) {
this.showToast("收件人不能为空");
return false;
}
if (!/^[\u4E00-\u9FA5A-Za-z0-9*]+$/gi.test(username)) {
this.showToast("收货人姓名不支持特殊符号");
return false;
}
if (!info.receiverMobile) {
this.showToast("手机号不能为空");
return false;
}
if (!info.areaCode || !info.receiverArea) {
this.showToast("省市区不能为空");
return false;
}
if (!info.receiverAddress) {
this.showToast("地址不能为空");
return false;
}
return {
id: info.addressId || "",
consignee: username,
mobile: info.receiverMobile,
area_code: info.areaCode,
area: info.receiverArea,
address: info.receiverAddress,
is_default: info.defaultType ? "Y" : "N",
tag_code: info.tagType
};
},
chooseArea() {}
showToast(tip) {
this.toast = this.$createToast({
type: "error",
txt: tip,
mask: true
}).show();
},
chooseArea() {
this.isShowPop = true;
},
popHidden() {
let that = this;
that.isShowPop = false;
},
modifyAddressAct(info) {
if (info) {
let that = this;
that.model.areaCode = info.code;
that.model.receiverArea = info.area;
}
}
},
mounted() {}
mounted() {
this.fetchAddressTags();
}
};
</script>
... ... @@ -151,12 +253,14 @@ export default {
.text-label {
font-size: 28px;
width: 100%;
color: #444444;
display: inline-block;
}
.choose-area {
font-size: 28px;
width: 100%;
color: #cccccc;
}
... ... @@ -168,7 +272,7 @@ export default {
.arrow {
height: 44px;
width: 44px;
background: url("~statics/image/order/arrow-right.png");
background: url("~statics/image/address/arrow-right.png");
background-size: cover;
}
}
... ...
<template>
<div class="address-select-component" v-show="true">
<div class="address-select-component">
<div class="address-select-box">
<div class="component-title">
<span class="title">所在地区</span>
<span class="iconfont close" @click="closeAddBox">&#xe623;</span>
<span class="icon-close close" @click="closeAddBox"></span>
</div>
<ul class="head-address-ul">
<li
v-if="province.title"
... ... @@ -23,6 +24,7 @@
>{{area.title}}</li>
<li v-if="street.title" :class="{ 'head-address-li': area.titleActive }">{{street.title}}</li>
</ul>
<div class="address-container">
<div class="address-content">
<ul v-if="province.showList" class="address-ul">
... ... @@ -32,10 +34,7 @@
@click="switchAddress(pprovince.id, pprovince.caption)"
>
{{pprovince.caption}}
<span
v-if="pprovince.id === province.id"
class="iconfont icon-v"
></span>
<span v-if="pprovince.id === province.id" class="icon-check"></span>
</li>
</ul>
<ul v-if="city.showList" class="address-ul">
... ... @@ -45,7 +44,7 @@
@click="switchAddress(pcity.id, pcity.caption)"
>
{{pcity.caption}}
<span v-if="pcity.id === city.id" class="iconfont icon-v"></span>
<span v-if="pcity.id === city.id" class="icon-check"></span>
</li>
</ul>
<ul v-if="area.showList" class="address-ul">
... ... @@ -55,7 +54,7 @@
@click="switchAddress(parea.id, parea.caption)"
>
{{parea.caption}}
<span v-if="parea.id === area.id" class="iconfont icon-v"></span>
<span v-if="parea.id === area.id" class="icon-check"></span>
</li>
</ul>
<ul v-if="street.showList" class="address-ul">
... ... @@ -65,7 +64,7 @@
@click="switchAddress(pstreet.id, pstreet.caption)"
>
{{pstreet.caption}}
<span v-if="pstreet.id === street.id" class="iconfont icon-v"></span>
<span v-if="pstreet.id === street.id" class="icon-check"></span>
</li>
</ul>
</div>
... ... @@ -75,6 +74,10 @@
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
"address/address"
);
export default {
data() {
return {
... ... @@ -83,7 +86,6 @@ export default {
citys: [],
areas: [],
streets: [],
show: false,
common: {
titleActive: true
},
... ... @@ -116,175 +118,173 @@ export default {
titleActive: false
}
};
},
computed: {
...mapState(["provincesList"])
},
methods: {
...mapMutations({}),
...mapActions(["fetchAddressProvinces"]),
/* 返回标题处理 */
returnTitle() {
let getTitle = "";
let returnTitle = "";
if (this.supportChangeProvince) {
getTitle =
this.province.allTitle +
this.city.allTitle +
this.area.allTitle +
this.street.allTitle;
} else {
getTitle =
this.city.allTitle + this.area.allTitle + this.street.allTitle;
}
if (getTitle.length > 11) {
returnTitle = getTitle.substr(0, 5) + "..." + getTitle.substr(-5);
} else {
returnTitle = getTitle;
}
return returnTitle;
},
/* 标题长度处理 */
titleHandle(caption) {
if (caption.length > 3) {
return caption.substring(0, 3) + "...";
} else {
return caption;
}
},
/* 选择地址后的显示控制 */
changeShow(id, caption) {
switch ((id + "").length) {
case 2:
this.province.id = id;
this.province.allTitle = caption;
this.province.title = this.titleHandle(caption);
this.city.title = "请选择";
this.city.showList = this.province.titleActive = true;
this.province.showList = this.area.showList = this.street.showList = false;
this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
case 4:
this.city.id = id;
this.city.allTitle = caption;
this.city.title = this.titleHandle(caption);
this.area.title = "请选择";
this.area.showList = this.city.titleActive = true;
this.province.showList = this.city.showList = this.street.showList = false;
this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
case 6:
this.area.id = id;
this.area.allTitle = caption;
this.area.title = this.titleHandle(caption);
this.street.title = "请选择";
this.street.showList = this.area.titleActive = true;
this.province.showList = this.city.showList = this.area.showList = false;
this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
break;
case 9:
this.street.id = id;
this.street.allTitle = caption;
this.street.title = this.titleHandle(caption);
this.street.showList = this.street.titleActive = true;
this.province.showList = this.city.showList = this.area.showList = false;
this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
break;
default:
this.province.title = "请选择";
this.province.showList = this.province.titleActive = true;
this.city.showList = this.area.showList = this.street.showList = false;
this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
break;
}
},
/* 获取地址数据绑定 */
async switchAddress(id, caption) {
if (!id) {
id = 0;
}
this.changeShow(id, caption);
const result = await this.fetchAddressProvinces(id);
let resultData = result.data;
//length小于1时弹窗消失并传数据给上层
if (resultData.length < 1) {
let returnTitle = this.returnTitle();
this.$emit("popHidden");
this.$emit("modifyAddressAct", {
code: id,
area: returnTitle
});
}
/* 数据绑定 */
switch ((id + "").length) {
case 2:
this.citys = resultData;
break;
case 4:
this.areas = resultData;
break;
case 6:
this.streets = resultData;
break;
default:
this.provinces = resultData;
break;
}
},
/* 关闭地址选择组件 */
closeAddBox() {
this.$emit("hidden");
},
/* 点击地址标题时的处理 */
clickTitle(type) {
switch (type) {
case "province":
if (!this.supportChangeProvince) {
return false;
}
if (this.provinces.length < 1) {
this.switchAddress();
}
this.province.titleActive = this.province.showList = true;
this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
this.city.title = this.area.title = this.street.title = "";
break;
case "city":
this.city.titleActive = this.city.showList = true;
this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
this.province.showList = this.area.showList = this.street.showList = false;
this.area.title = this.street.title = "";
break;
case "area":
this.area.titleActive = this.area.showList = true;
this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
this.province.showList = this.city.showList = this.street.showList = false;
this.street.title = "";
break;
default:
break;
}
}
},
created: function() {
this.switchAddress();
}
// methods: {
// /* 返回标题处理 */
// returnTitle() {
// let getTitle = "";
// let returnTitle = "";
// if (this.supportChangeProvince) {
// getTitle =
// this.province.allTitle +
// this.city.allTitle +
// this.area.allTitle +
// this.street.allTitle;
// } else {
// getTitle =
// this.city.allTitle + this.area.allTitle + this.street.allTitle;
// }
// if (getTitle.length > 11) {
// returnTitle = getTitle.substr(0, 5) + "..." + getTitle.substr(-5);
// } else {
// returnTitle = getTitle;
// }
// return returnTitle;
// },
// /* 标题长度处理 */
// titleHandle(caption) {
// if (caption.length > 3) {
// return caption.substring(0, 3) + "...";
// } else {
// return caption;
// }
// },
// /* 选择地址后的显示控制 */
// changeShow(id, caption) {
// switch ((id + "").length) {
// case 2:
// this.province.id = id;
// this.province.allTitle = caption;
// this.province.title = this.titleHandle(caption);
// this.city.title = "请选择";
// this.city.showList = this.province.titleActive = true;
// this.province.showList = this.area.showList = this.street.showList = false;
// this.common.titleActive = this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
// break;
// case 4:
// this.city.id = id;
// this.city.allTitle = caption;
// this.city.title = this.titleHandle(caption);
// this.area.title = "请选择";
// this.area.showList = this.city.titleActive = true;
// this.province.showList = this.city.showList = this.street.showList = false;
// this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
// break;
// case 6:
// this.area.id = id;
// this.area.allTitle = caption;
// this.area.title = this.titleHandle(caption);
// this.street.title = "请选择";
// this.street.showList = this.area.titleActive = true;
// this.province.showList = this.city.showList = this.area.showList = false;
// this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
// break;
// case 9:
// this.street.id = id;
// this.street.allTitle = caption;
// this.street.title = this.titleHandle(caption);
// this.street.showList = this.street.titleActive = true;
// this.province.showList = this.city.showList = this.area.showList = false;
// this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
// break;
// default:
// this.province.title = "请选择";
// this.province.showList = this.province.titleActive = true;
// this.city.showList = this.area.showList = this.street.showList = false;
// this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
// break;
// }
// },
// /* 获取地址数据绑定 */
// switchAddress(id, caption) {
// if (!id) {
// id = 0;
// }
// this.changeShow(id, caption);
// $.get(
// "/home/getaddress.json",
// {
// id: id
// },
// resultData => {
// /* 结果返回 */
// if (resultData.length < 1) {
// areaCode.val(id);
// let returnTitle = this.returnTitle();
// area.val(returnTitle);
// this.show = false;
// // this.$emit("modify.addressAct", {
// // code: id,
// // area: returnTitle
// // });
// }
// /* 数据绑定 */
// switch ((id + "").length) {
// case 2:
// this.citys = resultData;
// break;
// case 4:
// this.areas = resultData;
// break;
// case 6:
// this.streets = resultData;
// break;
// default:
// this.provinces = resultData;
// break;
// }
// }
// );
// },
// /* 关闭地址选择组件 */
// closeAddBox() {
// this.show = false;
// },
// /* 点击地址标题时的处理 */
// clickTitle(type) {
// switch (type) {
// case "province":
// if (!this.supportChangeProvince) {
// return false;
// }
// if (this.provinces.length < 1) {
// this.switchAddress();
// }
// this.province.titleActive = this.province.showList = true;
// this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
// this.city.title = this.area.title = this.street.title = "";
// break;
// case "city":
// this.city.titleActive = this.city.showList = true;
// this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
// this.province.showList = this.area.showList = this.street.showList = false;
// this.area.title = this.street.title = "";
// break;
// case "area":
// this.area.titleActive = this.area.showList = true;
// this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
// this.province.showList = this.city.showList = this.street.showList = false;
// this.street.title = "";
// break;
// default:
// break;
// }
// }
// },
// created: function() {
// this.switchAddress();
// }
};
</script>
... ... @@ -293,10 +293,6 @@ export default {
color: #a6a6a6;
}
.icon-v:before {
content: "\e6ea";
}
.address-select-component {
position: fixed;
bottom: 0;
... ... @@ -322,6 +318,14 @@ export default {
.close {
float: right;
}
.icon-close {
height: 40px;
width: 40px;
margin-top: 20px;
background: url("~statics/image/address/close.png");
background-size: cover;
}
}
.head-address-ul {
... ... @@ -402,9 +406,13 @@ export default {
position: relative;
overflow: hidden;
span {
color: #f23030;
font-size: 14px;
.icon-check {
display: inline-block;
margin-left: 10px;
height: 30px;
width: 30px;
background: url("~statics/image/address/check.png");
background-size: cover;
}
}
... ...
/* eslint-disable no-unused-vars */
import * as Types from './types';
import {
get
... ... @@ -23,7 +24,9 @@ export default {
async fetchAddressTags({
commit
}) {
const result = await this.$api.get('/api/address/getTags');
const result = await this.$api.get('/api/address/getTags', {
uid: '500031912',
});
if (result.code === 200) {
commit(Types.FETCH_ADDRESS_TAGS, {
... ... @@ -34,14 +37,20 @@ export default {
async fetchAddressProvinces({
commit
}) {
const result = await this.$api.get('/api/address/getProvinces');
if (result.code === 200) {
commit(Types.FETCH_ADDRESS_PROVINCES, {
list: get(result, 'data', [])
}, id) {
let result = {};
try {
result = await this.$api.get('/api/address/getProvinces', {
uid: '500031912',
id,
debug: 'XYZ'
});
} catch (e) {
return result;
}
return result;
},
// 设置默认地址, post请求
... ... @@ -60,16 +69,18 @@ export default {
// 添加、更新、删除地址，post请求
async addUserAddress({
commit
}, {
uid
}) {
const result = await this.$api.post('/api/address/addAddress', {
uid
});
if (result.code === 200) {
commit(Types.ADD_USER_ADDRESS_INFO);
}
}, data) {
const result = await this.$api.post(
'/api/address/addAddress', {
uid: '500031912',
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 || {};
},
... ...
... ... @@ -8,6 +8,10 @@ export default function () {
addressList: [],
addressTags: [],
provincesList: [],
addStatus: -1,
updateStatus: -1,
delStatus: -1,
setDefaultStatus: -1
},
actions,
mutations,
... ...
... ... @@ -16,4 +16,9 @@ export default {
}) {
state.provincesList = list;
},
[Types.ADD_USER_ADDRESS_INFO](state, {
status,
}) {
state.addStatus = status;
},
};
... ...