Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修复选择地址回显的问题

zyh
Gao xiaosong 3 years ago
parent
0a13a11ec6
commit
5e8f7befd9
3 changed files with 201 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 197
      components/CitySelect.vue
  2. 2
      manifest.json
  3. 166
      pages/user/address/AddAddress/index.vue

197
components/CitySelect.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<view>
<text class="uni-input" @tap="open">{{value}}</text>
<text class="uni-input" @tap="open">{{ value }}</text>
<uni-popup ref="popup" type="bottom">
<view class="cityselect">
<view class="cityselect-header">
@ -9,13 +9,13 @@
</view>
<view class="cityselect-nav">
<view class="item" v-if="provinceActive" @tap="changeNav(0)">
<text>{{provinceActive.n}}</text>
<text>{{ provinceActive.n }}</text>
</view>
<view class="item" v-if="cityActive" @tap="changeNav(1)">
<text>{{cityActive.n}}</text>
<text>{{ cityActive.n }}</text>
</view>
<view class="item" v-if="districtActive" @tap="changeNav(2)">
<text>{{districtActive.n}}</text>
<text>{{ districtActive.n }}</text>
</view>
<view class="item active" v-else>
<text>请选择</text>
@ -27,14 +27,9 @@
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in province"
:key="index"
@tap="selectProvince(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
<view class="cityselect-item" v-for="(item, index) in province" :key="index" @tap="selectProvince(index)">
<view class="cityselect-item-box" :class="{ active: isProvinceActive(item) }">
<text>{{ item.n }}</text>
</view>
</view>
</view>
@ -43,14 +38,9 @@
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in city"
:key="index"
@tap="selectCity(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
<view class="cityselect-item" v-for="(item, index) in city" :key="index" @tap="selectCity(index)">
<view class="cityselect-item-box" :class="{ active: isCityActive(item)}">
<text>{{ item.n }}</text>
</view>
</view>
</view>
@ -59,14 +49,9 @@
<swiper-item>
<scroll-view scroll-y class="cityScroll">
<view>
<view
class="cityselect-item"
v-for="(item,index) in district"
:key="index"
@tap="selectDistrict(index)"
>
<view class="cityselect-item-box">
<text>{{item.n}}</text>
<view class="cityselect-item" v-for="(item, index) in district" :key="index" @tap="selectDistrict(index)">
<view class="cityselect-item-box" :class="{ active: isDistrictActive(item) }">
<text>{{ item.n }}</text>
</view>
</view>
</view>
@ -80,21 +65,21 @@
</template>
<script type="text/babel">
import uniPopup from "./uni-popup/uni-popup.vue";
import uniPopupMessage from "./uni-popup/uni-popup-message.vue";
import uniPopupDialog from "./uni-popup/uni-popup-dialog.vue";
import uniPopup from './uni-popup/uni-popup.vue'
import uniPopupMessage from './uni-popup/uni-popup-message.vue'
import uniPopupDialog from './uni-popup/uni-popup-dialog.vue'
export default {
name: "CitySelect",
name: 'CitySelect',
components: {
uniPopup,
uniPopupMessage,
uniPopupDialog
uniPopupDialog,
},
props: ["callback", "items", "defaultValue"],
props: ['callback', 'items', 'defaultValue'],
data() {
return {
value: "请选择",
value: '请选择',
show: this.value,
province: [],
provinceActive: null,
@ -102,60 +87,107 @@ export default {
cityActive: null,
district: [],
districtActive: null,
current: 0
};
current: 0,
}
},
watch: {
items(nextItem) {
this.province = nextItem;
items(next) {
this.province = next
},
defaultValue(next) {
this.value = `${next.province.n} ${next.city.n} ${next.district.n}`
this.setDefaultValue(this.items, next)
},
defaultValue(next){
this.value=next
}
},
mounted() {
console.log(this);
console.log(this)
if (this.value) {
this.value = this.value;
this.value = this.value
}
this.province = this.items;
this.province = this.items
},
methods: {
isProvinceActive(item) {
return this.provinceActive && item.v == this.provinceActive.v
},
isCityActive(item) {
return this.cityActive && item.v == this.cityActive.v
},
isDistrictActive(item) {
return this.districtActive && item.v == this.districtActive.v
},
setDefaultValue(items, value) {
if (!items || !value) {
return
}
this.province = items
items.map(province => {
if (province.n == value.province.n) {
this.city = province.c
this.provinceActive = {
v: province.v,
n: value.province.n,
}
province.c.map(city => {
if (city.n == value.city.n) {
this.district = city.c
this.cityActive = {
v: city.v,
n: value.city.n,
}
city.c.map(district => {
if (district.n == value.district.n) {
this.districtActive = {
v: city.v,
n: value.district.n,
}
}
})
}
})
}
})
console.log(this.provinceActive, this.cityActive, this.districtActive)
console.log(this)
},
open() {
this.province = this.items;
this.provinceActive = null;
this.cityActive = null;
this.districtActive = null;
this.city = [];
this.district = [];
this.current = 0;
this.$refs.popup.open();
this.province = this.items
this.provinceActive = null
this.cityActive = null
this.districtActive = null
this.city = []
this.district = []
this.current = 0
this.$refs.popup.open()
this.setDefaultValue(this.items, this.defaultValue)
},
changeNav(index) {
if (index == 0) {
this.provinceActive = null;
this.provinceActive = null
}
if (index == 1) {
this.cityActive = null;
this.cityActive = null
}
if (index == 2) {
this.districtActive = null;
this.districtActive = null
}
this.current = index;
this.current = index
},
selectProvince(index) {
this.provinceActive = this.province[index];
this.city = this.province[index].c;
this.current = 1;
this.provinceActive = this.province[index]
this.city = this.province[index].c
this.current = 1
},
selectCity(index) {
this.cityActive = this.city[index];
this.district = this.city[index].c;
this.current = 2;
this.cityActive = this.city[index]
this.district = this.city[index].c
this.current = 2
},
selectDistrict(index) {
this.districtActive = this.district[index];
this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`;
this.districtActive = this.district[index]
this.value = `${this.provinceActive.n} ${this.cityActive.n} ${this.districtActive.n}`
// this.callback({
// province: {
// id: this.provinceActive.v,
@ -170,24 +202,24 @@ export default {
// name: this.districtActive.n
// }
// });
this.$emit("callback", {
this.$emit('callback', {
province: {
id: this.provinceActive.v,
name: this.provinceActive.n
name: this.provinceActive.n,
},
city: {
id: this.cityActive.v,
name: this.cityActive.n
name: this.cityActive.n,
},
district: {
id: this.districtActive.v,
name: this.districtActive.n
}
});
this.$refs.popup.close();
}
}
};
name: this.districtActive.n,
},
})
this.$refs.popup.close()
},
},
}
</script>
<style lang="less">
@ -197,14 +229,14 @@ export default {
background-color: #fff;
z-index: 1502;
position: relative;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.cityScroll {
height: 100%;
}
.swiper {
height: 800rpx;
height: 800rpx;
}
}
.cityselect-header {
@ -224,7 +256,7 @@ export default {
z-index: 0;
bottom: 0;
left: 0;
content: "";
content: '';
width: 100%;
background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
}
@ -274,8 +306,11 @@ export default {
max-height: 65rpx;
font-size: 26rpx;
color: #333;
&.active{
color:#f23030 !important;
}
&:after {
content: "";
content: '';
height: 1rpx;
position: absolute;
z-index: 0;

2
manifest.json
Unescape View File

@ -166,7 +166,7 @@
"devServer": {
"disableHostCheck": true,
"proxy": {
"/api": {
"^/api": {
"target": "https://wxapi.yixiang.co",
"changeOrigin": true,
"secure": true,

166
pages/user/address/AddAddress/index.vue
Unescape View File

@ -13,7 +13,7 @@
<view class="name">所在地区</view>
<view class="picker acea-row row-between-wrapper select-value form-control">
<view class="address">
<CitySelect ref="cityselect" :defaultValue="addressText" @callback="result" :items="district"></CitySelect>
<CitySelect ref="cityselect" :defaultValue="defaultAddress" @callback="result" :items="district"></CitySelect>
</view>
<view class="iconfont icon-dizhi font-color-red"></view>
</view>
@ -28,7 +28,7 @@
<view class="checkbox-wrapper">
<checkbox-group @change="ChangeIsDefault">
<label class="well-check">
<checkbox :value="userAddress.isDefault==1?'checked':''" :checked="userAddress.isDefault ? true : false"></checkbox>
<checkbox :value="userAddress.isDefault == 1 ? 'checked' : ''" :checked="userAddress.isDefault ? true : false"></checkbox>
<text class="def">设置为默认地址</text>
</label>
</checkbox-group>
@ -42,17 +42,17 @@
</template>
<script type="text/babel">
import CitySelect from "@/components/CitySelect";
import { getAddress, postAddress, getCity } from "@/api/user";
import attrs, { required, chs_phone } from "@/utils/validate";
import { validatorDefaultCatch } from "@/utils/dialog";
import CitySelect from '@/components/CitySelect'
import { getAddress, postAddress, getCity } from '@/api/user'
import attrs, { required, chs_phone } from '@/utils/validate'
import { validatorDefaultCatch } from '@/utils/dialog'
// import { openAddress } from "@/libs/wechat";
import { isWeixin } from "@/utils";
import { isWeixin } from '@/utils'
export default {
name: "AddAddress",
name: 'AddAddress',
components: {
CitySelect
CitySelect,
},
data() {
return {
@ -61,73 +61,75 @@ export default {
userAddress: { isDefault: 0 },
address: {},
isWechat: isWeixin(),
addressText: ""
};
defaultAddress: {},
addressText: '',
}
},
mounted: function() {
let id = this.$yroute.query.id;
this.id = id;
this.getUserAddress();
this.getCityList();
let id = this.$yroute.query.id
this.id = id
this.getUserAddress()
this.getCityList()
},
watch: {
addressText(nextModel2) {
console.log(nextModel2, 8585858585);
}
console.log(nextModel2, 8585858585)
},
},
methods: {
getCityList: function() {
let that = this;
let that = this
getCity()
.then(res => {
that.district = res.data;
that.ready = true;
that.district = res.data
that.ready = true
})
.catch(err => {
uni.showToast({
title: err.msg,
icon: "none",
duration: 2000,
});
});
title: err.msg,
icon: 'none',
duration: 2000,
})
})
},
getUserAddress: function() {
if (!this.id) return false;
let that = this;
if (!this.id) return false
let that = this
getAddress(that.id).then(res => {
that.userAddress = res.data;
that.addressText =
res.data.province + " " + res.data.city + " " + res.data.district;
that.address.province = res.data.province;
that.address.city = res.data.city;
that.address.district = res.data.district;
});
that.userAddress = res.data
that.defaultAddress = {
province: {
n: res.data.province,
},
city: {
n: res.data.city,
},
district: {
n: res.data.district,
},
}
that.addressText = res.data.province + ' ' + res.data.city + ' ' + res.data.district
that.address.province = res.data.province
that.address.city = res.data.city
that.address.district = res.data.district
})
},
getAddress() {},
async submit() {
console.log(this);
console.log(this.address);
console.log(this.addressText);
let name = this.userAddress.realName,
phone = this.userAddress.phone,
addressText = this.addressText,
detail = this.userAddress.detail,
isDefault = this.userAddress.isDefault;
isDefault = this.userAddress.isDefault
try {
await this.$validator({
name: [
required(required.message("姓名")),
attrs.range([2, 16], attrs.range.message("姓名"))
],
phone: [
required(required.message("联系电话")),
chs_phone(chs_phone.message())
],
addressText: [required("请选择地址")],
detail: [required(required.message("具体地址"))]
}).validate({ name, phone, addressText, detail });
name: [required(required.message('姓名')), attrs.range([2, 16], attrs.range.message('姓名'))],
phone: [required(required.message('联系电话')), chs_phone(chs_phone.message())],
addressText: [required('请选择地址')],
detail: [required(required.message('具体地址'))],
}).validate({ name, phone, addressText, detail })
} catch (e) {
return validatorDefaultCatch(e);
return validatorDefaultCatch(e)
}
try {
let that = this,
@ -138,21 +140,21 @@ export default {
address: this.address,
detail: detail,
is_default: isDefault ? true : false,
post_code: ""
};
post_code: '',
}
postAddress(data).then(function() {
if (that.id) {
uni.showToast({
title: "修改成功",
icon: "none",
duration: 2000
});
title: '修改成功',
icon: 'none',
duration: 2000,
})
} else {
uni.showToast({
title: "操作成功",
icon: "none",
duration: 2000
});
title: '操作成功',
icon: 'none',
duration: 2000,
})
// uni.showToast({
// title: "已取消绑定",
// icon: "none",
@ -162,41 +164,41 @@ export default {
// path: "/pages/user/PersonalData/index"
// });
}
that.$yrouter.back();
});
that.$yrouter.back()
})
} catch (err) {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000
});
icon: 'none',
duration: 2000,
})
}
},
ChangeIsDefault: function() {
this.userAddress.isDefault = !this.userAddress.isDefault;
this.userAddress.isDefault = !this.userAddress.isDefault
},
result(values) {
console.log(this);
console.log(values);
console.log(this)
console.log(values)
this.address = {
province: values.province.name || "",
city: values.city.name || "",
district: values.district.name || "",
city_id: values.city.id
};
this.addressText = `${this.address.province}${this.address.city}${this.address.district}`;
province: values.province.name || '',
city: values.city.name || '',
district: values.district.name || '',
city_id: values.city.id,
}
this.addressText = `${this.address.province}${this.address.city}${this.address.district}`
// this.addressText =
// this.address.province + this.address.city + this.address.district;
}
}
};
},
},
}
</script>
<style lang="less">
.address {
text {
width: 100%;
display: block;
}
.address {
text {
width: 100%;
display: block;
}
}
</style>

Write Preview
Loading…
Cancel
Save