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

189
components/CitySelect.vue
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
}
defaultValue(next) {
this.value = `${next.province.n} ${next.city.n} ${next.district.n}`
this.setDefaultValue(this.items, 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">
@ -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
View File

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

156
pages/user/address/AddAddress/index.vue
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",
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 {
.address {
text {
width: 100%;
display: block;
}
}
}
</style>