cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修复选择地址回显的问题

Browse Source
This commit is contained in:
Gao xiaosong
2021-11-07 23:51:59 +08:00
parent 0a13a11ec6
commit 5e8f7befd9
3 changed files with 201 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
components/CitySelect.vue
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">
@ -204,7 +236,7 @@ export default {
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
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
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>