|
|
@@ -1,50 +1,89 @@
|
|
|
<config>
|
|
|
{
|
|
|
"navigationBarTitleText": "填写个人信息",
|
|
|
- "disableScroll": true
|
|
|
+ "disableScroll": true,
|
|
|
+ "backgroundColor":"#F8FAFF",
|
|
|
+ "usingComponents": {
|
|
|
+ "van-popup": "../vant/popup/index"
|
|
|
+ }
|
|
|
}
|
|
|
</config>
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div class="group">
|
|
|
- <div class="field">
|
|
|
- <div class="label">姓名</div>
|
|
|
- <input class="value" placeholder-class="placeholder" placeholder="请输入姓名" />
|
|
|
+ <van-cell-group>
|
|
|
+ <van-field
|
|
|
+ :value="form.name"
|
|
|
+ @input="form.name = $event.detail"
|
|
|
+ label="姓名"
|
|
|
+ placeholder="请输入收货人名"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ :value="form.mobile"
|
|
|
+ type="tel"
|
|
|
+ label="联系方式"
|
|
|
+ placeholder="请输入收货人手机号码"
|
|
|
+ input-align="right"
|
|
|
+ @input="form.mobile = $event.detail"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ :value="form.address"
|
|
|
+ @input="form.address = $event.detail"
|
|
|
+ readonly
|
|
|
+ label="所在地区"
|
|
|
+ icon="arrow"
|
|
|
+ placeholder="请选择"
|
|
|
+ input-align="right"
|
|
|
+ @click="showPicker = true"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ :value="form.detailAddress"
|
|
|
+ @input="form.detailAddress = $event.detail"
|
|
|
+ label="详细地址"
|
|
|
+ placeholder="请输入详细地址"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ :value="form.phone"
|
|
|
+ @input="form.phone = $event.detail"
|
|
|
+ label="固定电话"
|
|
|
+ type="digit"
|
|
|
+ placeholder="请输入固定电话"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+ <van-field
|
|
|
+ :value="form.zipCode"
|
|
|
+ @input="form.zipCode = $event.detail"
|
|
|
+ label="邮编"
|
|
|
+ type="digit"
|
|
|
+ placeholder="请输入邮编"
|
|
|
+ input-align="right"
|
|
|
+ />
|
|
|
+
|
|
|
+ <van-cell class="check">
|
|
|
+ <van-checkbox
|
|
|
+ :value="form.isDefault == '1'"
|
|
|
+ :checked-color="$colors.prim"
|
|
|
+ @input="form.isDefault = $event.detail ? '1' : '0'"
|
|
|
+ >设置为默认购车人</van-checkbox
|
|
|
+ >
|
|
|
+ </van-cell>
|
|
|
+ <div class="btn-wrapper">
|
|
|
+ <van-button block :color="$colors.prim" @click="onSubmit">保存</van-button>
|
|
|
</div>
|
|
|
- <div class="field">
|
|
|
- <div class="label">联系方式</div>
|
|
|
- <input class="value" placeholder-class="placeholder" placeholder="请输入收货人手机号码" type="number" />
|
|
|
- </div>
|
|
|
- <div class="field">
|
|
|
- <div class="label">所在地区</div>
|
|
|
- <div class="value placeholder">
|
|
|
- 请选择城市
|
|
|
- </div>
|
|
|
- <img src="../static/imgs/icon_arrow_right.png" class="arrow" />
|
|
|
- </div>
|
|
|
- <div class="field">
|
|
|
- <div class="label">详细地址</div>
|
|
|
- <input class="value" placeholder-class="placeholder" placeholder="请选择详细地址" />
|
|
|
- </div>
|
|
|
- <div class="field">
|
|
|
- <div class="label">固定电话</div>
|
|
|
- <input class="value" placeholder-class="placeholder" placeholder="请输入固定电话" type="number" />
|
|
|
- </div>
|
|
|
- <div class="field" style="border: none;">
|
|
|
- <div class="label">邮编</div>
|
|
|
- <input class="value" placeholder-class="placeholder" placeholder="请输入邮编" type="number" />
|
|
|
- </div>
|
|
|
- <div class="cb-wrapper" @click="checked = !checked">
|
|
|
- <img
|
|
|
- class="cb"
|
|
|
- :src="checked ? require('../static/imgs/cb_check.png') : require('../static/imgs/cb.png')"
|
|
|
- />
|
|
|
- <div>设置为默认购车人</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn-wrapper">
|
|
|
- <van-button block :color="$colors.prim">保存</van-button>
|
|
|
- </div>
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <van-popup :show="showPicker" position="bottom">
|
|
|
+ <van-picker
|
|
|
+ show-toolbar
|
|
|
+ value-key="name"
|
|
|
+ :columns="columns"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @change="onChange"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+
|
|
|
<van-dialog id="van-dialog" />
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -53,49 +92,192 @@ import Dialog from '../vant/dialog/dialog';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- checked: false
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ mobile: '',
|
|
|
+ address: '',
|
|
|
+ provinceId: '',
|
|
|
+ cityId: '',
|
|
|
+ countryId: '',
|
|
|
+ detailAddress: '',
|
|
|
+ phone: '',
|
|
|
+ zipCode: '',
|
|
|
+ isDefault: ''
|
|
|
+ },
|
|
|
+ provincesList: [],
|
|
|
+ cityList: [],
|
|
|
+ districtList: [],
|
|
|
+ showPicker: false
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ columns() {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ values: [...this.provincesList],
|
|
|
+ defaultIndex: this.getIndex(this.form.provinceId, this.provincesList)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ values: [...this.cityList],
|
|
|
+ defaultIndex: this.getIndex(this.form.cityId, this.cityList)
|
|
|
+ },
|
|
|
+ {
|
|
|
+ values: [...this.districtList],
|
|
|
+ defaultIndex: this.getIndex(this.form.countryId, this.districtList)
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
onShow() {
|
|
|
- Dialog.alert({
|
|
|
- message: '收获地址请填写真实购车人姓名和手机号，否则会影响权益领取！',
|
|
|
- showCancelButton: true,
|
|
|
- className: 'custom-class-name'
|
|
|
- }).then(() => {
|
|
|
- // on close
|
|
|
+ this.getFormInfo().then(() => {
|
|
|
+ this.getProvince();
|
|
|
});
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getFormInfo() {
|
|
|
+ if (this.$mp.query.id) {
|
|
|
+ return this.$http
|
|
|
+ .get('/applets/querycustomeraddressbyid', {
|
|
|
+ id: this.$mp.query.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ res.data.mobile = res.data.originMobile;
|
|
|
+ res.data.phone = res.data.originPhone;
|
|
|
+
|
|
|
+ this.form = { ...res.data };
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ Dialog.alert({
|
|
|
+ message: '收获地址请填写真实购车人姓名和手机号，否则会影响权益领取！',
|
|
|
+ showCancelButton: true,
|
|
|
+ className: 'custom-class-name'
|
|
|
+ }).then(() => {
|
|
|
+ // on close
|
|
|
+ });
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getProvince() {
|
|
|
+ this.$http.get('/applets/queryallprovinces').then(res => {
|
|
|
+ this.provincesList = res.data;
|
|
|
+ this.cityList = [];
|
|
|
+ this.getCityList(this.form.provinceId || 0, this.form.provinceId ? 'id' : 'index');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCityList(key, type = 'index') {
|
|
|
+ this.$http
|
|
|
+ .get('/applets/querycitybyprovinceid', {
|
|
|
+ provinceId: type === 'id' ? key : this.provincesList[key || 0].id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.cityList = res.data;
|
|
|
+ this.districtList = [];
|
|
|
+ this.getdistrictList();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getdistrictList(key, type = 'index') {
|
|
|
+ this.$http
|
|
|
+ .get('/applets/querydistrictbycityid', {
|
|
|
+ cityId: type === 'id' ? key : this.cityList[key || 0].id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.districtList = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onConfirm(e) {
|
|
|
+ const values = e.target.value;
|
|
|
+ this.form.provinceId = values[0].id;
|
|
|
+ this.form.cityId = values[1].id;
|
|
|
+ this.form.countryId = values[2].id;
|
|
|
+ this.form.address = values
|
|
|
+ .map(item => {
|
|
|
+ return item.name;
|
|
|
+ })
|
|
|
+ .join(' ');
|
|
|
+ this.showPicker = false;
|
|
|
+ },
|
|
|
+ getIndex(id, list) {
|
|
|
+ let index = 0;
|
|
|
+ if (id) {
|
|
|
+ index = list.findIndex(item => {
|
|
|
+ return item.id === id;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ return index === -1 ? 0 : index;
|
|
|
+ },
|
|
|
+ onChange(e) {
|
|
|
+ const values = e.target.value;
|
|
|
+ if (values[0].id === values[1].provinceId && values[1].id !== values[2].cityId) {
|
|
|
+ this.getdistrictList(values[1].id, 'id');
|
|
|
+ } else if (values[0].id !== values[1].provinceId) {
|
|
|
+ this.getCityList(values[0].id, 'id');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ if (!this.form.name) {
|
|
|
+ this.showToastError('请填写收货人');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.mobile || !/1\d{10}/.test(this.form.mobile)) {
|
|
|
+ this.showToastError('请正确填写联系方式');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.provinceId || !this.form.cityId || !this.form.countryId || !this.form.address) {
|
|
|
+ this.showToastError('请选择地址信息');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.detailAddress) {
|
|
|
+ this.showToastError('请填写详细地址');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!!this.form.phone && !/^[0-9]+$/.test(this.form.phone)) {
|
|
|
+ this.showToastError('请正确填写固定电话');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!!this.form.zipCode && !/^[1-9][0-9]{5}$/.test(this.form.zipCode)) {
|
|
|
+ this.showToastError('请正确填写邮编');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ this.form.id ? '/applets/updateaddress' : '/applets/addaddress',
|
|
|
+ {
|
|
|
+ ...this.form
|
|
|
+ },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ //1：成功 -1：已达上限
|
|
|
+ if (res.data === -1) {
|
|
|
+ this.showToastError('你的地址已达上限，无法新增');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (res.data === 1) {
|
|
|
+ this.showToastError(this.form.id ? '修改成功' : '新增成功', 'success');
|
|
|
+ this.navigateBack(500);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.showToastError(this.form.id ? '修改失败' : '新增失败');
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
page {
|
|
|
- background: @bg;
|
|
|
-}
|
|
|
-.group {
|
|
|
- background: white;
|
|
|
- border-top: 1px solid #dde6ef;
|
|
|
- border-bottom: 1px solid #dde6ef;
|
|
|
+ background: @bg2;
|
|
|
}
|
|
|
-.field {
|
|
|
- .flex();
|
|
|
- margin: 0 15px;
|
|
|
- border-bottom: 1px solid #dde6ef;
|
|
|
- height: 40px;
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- color: @text1;
|
|
|
- margin-left: 9px;
|
|
|
- }
|
|
|
- .value {
|
|
|
- font-size: 16px;
|
|
|
- color: @text1;
|
|
|
- flex-grow: 1;
|
|
|
- text-align: right;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .arrow {
|
|
|
- width: 8px;
|
|
|
- height: 13px;
|
|
|
+
|
|
|
+.check {
|
|
|
+ .van-checkbox {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
}
|
|
|
}
|
|
|
.cb-wrapper {
|
|
|
@@ -111,9 +293,7 @@ page {
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
}
|
|
|
-.placeholder {
|
|
|
- color: #b7b7b7 !important;
|
|
|
-}
|
|
|
+
|
|
|
.btn-wrapper {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
