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

2
manifest.json
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save