feat:购物车地址页完成
This commit is contained in:
parent
e30d9cf0f8
commit
2c3b890ef1
@ -21,9 +21,6 @@
|
||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
@ -47,10 +44,8 @@ export default {
|
||||
provList: [], // 省
|
||||
cityList: [], //市
|
||||
distList: [], // 区
|
||||
|
||||
defaultCity: [], // 默认展示的市区数据
|
||||
defaultDist: [], // 默认展示的县/区数据
|
||||
|
||||
confirmProv: {}, // 默认选中省
|
||||
confirmProv1: {},
|
||||
confirmCity: {}, // 默认选中市
|
||||
@ -102,7 +97,6 @@ export default {
|
||||
this.defaultDist = res.rows;
|
||||
this.confirmDist = res.rows[0] // 区的第一条信息
|
||||
},
|
||||
|
||||
async init() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
.container {}
|
||||
page {
|
||||
background-color: #f6f7fb;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 0 30rpx;
|
||||
margin-top: 30rpx;
|
||||
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.row_label {
|
||||
@ -72,7 +77,6 @@
|
||||
background: #F6F6FA;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
padding: 30rpx 24rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
@ -104,4 +108,56 @@
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.choseAddress {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.isdef {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.isdef_left1 {
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.isdef_left2 {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.isdef_right {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
.noneborder {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn {
|
||||
width: 600rpx;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 120rpx;
|
||||
}
|
||||
@ -19,35 +19,82 @@
|
||||
<div class="tabItem" :class="{ 'active': tab == 1 }" @click="changeTab(1)">地区选择</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">地址</div>
|
||||
<div class="row_con">
|
||||
<u--input placeholder="请选择地址" @click="chooseAddress" border="none" disabled></u--input>
|
||||
<div class="currentAddress">
|
||||
<div class="currentAddress1">
|
||||
<div class="currentAddress1_left">当前定位：和平里社区综合 服务站</div>
|
||||
<div class="currentAddress1_right">使用</div>
|
||||
<div class="tabItems" v-if="tab == 0">
|
||||
<div class="row">
|
||||
<div class="row_label">地址</div>
|
||||
<div class="row_con">
|
||||
<div class="choseAddress" @click="chooseAddress">
|
||||
请选择地址
|
||||
</div>
|
||||
<div class="currentAddress2">河北衡水市桃城区</div>
|
||||
|
||||
<div class="currentAddress">
|
||||
<div class="currentAddress1">
|
||||
<div class="currentAddress1_left">当前定位：和平里社区综合 服务站</div>
|
||||
<div class="currentAddress1_right">使用</div>
|
||||
</div>
|
||||
<div class="currentAddress2">河北衡水市桃城区</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row_label">门牌号</div>
|
||||
<div class="row_con noneborder">
|
||||
<u--input placeholder="例：6栋201室" clearable border="none" v-model="value"
|
||||
@change="change"></u--input>
|
||||
<!-- <div class="tips">记得完善门牌号</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tabItems" v-if="tab == 1">
|
||||
<view>
|
||||
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
|
||||
@change="bindChange">
|
||||
<picker-view-column>
|
||||
<view v-for="(item, index) in provList" :key="index"
|
||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(item, index) in defaultCity" :key="index"
|
||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view v-for="(item, index) in defaultDist" :key="index"
|
||||
style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
|
||||
<div class="row">
|
||||
<div class="row_label">门牌号</div>
|
||||
<div class="row_con">
|
||||
<u--input placeholder="例：6栋201室" clearable border="none" v-model="value" @change="change"></u--input>
|
||||
<div class="tips">记得完善门牌号</div>
|
||||
<div class="row">
|
||||
<div class="row_label"><span>*</span>详细地址</div>
|
||||
<div class="row_con">
|
||||
<u--input placeholder="小区、门牌号" clearable border="none" v-model="value" @change="change"></u--input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line"></div>
|
||||
<div class="isdef">
|
||||
<div class="isdef_left">
|
||||
<div class="isdef_left1">设置默认地址</div>
|
||||
<div class="isdef_left2">提醒：下单时会优先选择</div>
|
||||
</div>
|
||||
<div class="isdef_right">
|
||||
<img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
|
||||
<!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt="" /> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn">确定</div>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/doorToDoor';
|
||||
} from '../../../api/area';
|
||||
import {
|
||||
picUrl,
|
||||
menuButtonInfo,
|
||||
@ -61,8 +108,20 @@ export default {
|
||||
localHeight: "",
|
||||
value: '',
|
||||
type: "error",
|
||||
tab: 0
|
||||
tab: 0,
|
||||
|
||||
provList: [], // 省
|
||||
cityList: [], //市
|
||||
distList: [], // 区
|
||||
defaultCity: [], // 默认展示的市区数据
|
||||
defaultDist: [], // 默认展示的县/区数据
|
||||
confirmProv: {}, // 默认选中省
|
||||
confirmProv1: {},
|
||||
confirmCity: {}, // 默认选中市
|
||||
confirmDist: {}, // 默认选中区/县
|
||||
sf: true,
|
||||
xsq: {},
|
||||
value2: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -71,14 +130,85 @@ export default {
|
||||
},
|
||||
chooseAddress() {
|
||||
console.log(123);
|
||||
|
||||
NavgateTo("/pages/shopcity/index")
|
||||
NavgateTo("/pages/shopcity/shopcity")
|
||||
},
|
||||
/////////////////////////////////// 省市区方法///////////////////////////////////////////
|
||||
// 获取省份信息
|
||||
async getProvList() {
|
||||
const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
|
||||
this.provList = res.rows;
|
||||
this.confirmProv1 = res.rows[0]
|
||||
// 缓存省市区数据
|
||||
this.getCityList();
|
||||
},
|
||||
|
||||
// 获取市区信息
|
||||
async getCityList(sq, x) {
|
||||
console.log('11swq', sq);
|
||||
if (!this.sf) {
|
||||
console.log('省份没变，查市跟区', this.cityList)
|
||||
let newDist = this.cityList[sq];
|
||||
console.log('新的市信息', newDist);
|
||||
if (this.xsq.ad_code !== newDist.ad_code) {
|
||||
console.log('新市区跟旧市区不一直')
|
||||
this.xsq = newDist;
|
||||
this.getDistList(newDist, x);
|
||||
}
|
||||
return
|
||||
}
|
||||
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
|
||||
this.cityList = res.rows;
|
||||
let newDist;
|
||||
|
||||
this.defaultCity = res.rows;
|
||||
this.confirmCity = res.rows[0]; // 拿市的第一条区查区
|
||||
this.getDistList(newDist, x);
|
||||
},
|
||||
// 获取 县/区 信息
|
||||
async getDistList(xsq, x) {
|
||||
const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
|
||||
this.distList = res.rows;
|
||||
this.defaultDist = res.rows;
|
||||
this.confirmDist = res.rows[0] // 区的第一条信息
|
||||
},
|
||||
async init() {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask: true
|
||||
});
|
||||
try {
|
||||
this.getProvList()
|
||||
uni.hideLoading();
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
console.log('获取省市区信息异常', error);
|
||||
}
|
||||
},
|
||||
// 切换省市区时联动改变参数值
|
||||
bindChange(e) {
|
||||
console.log('[1231331], e', e);
|
||||
const { value } = e.detail;
|
||||
// // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
|
||||
let newCrty = this.provList[value[0]];
|
||||
console.log('新的省份信息', newCrty);
|
||||
console.log('旧的省信息', this.confirmProv1);
|
||||
if (newCrty.ad_code === this.confirmProv1.ad_code) {
|
||||
console.log('省份信息没变');
|
||||
this.sf = false;
|
||||
} else {
|
||||
this.sf = true;
|
||||
}
|
||||
console.log('this.cityListthis.cityList', this.cityList);
|
||||
this.confirmProv1 = newCrty
|
||||
this.getCityList(value[1], value[2])
|
||||
},
|
||||
/////////////////////////////////// 省市区方法///////////////////////////////////////////
|
||||
},
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.init()
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
|
||||
<div class="hasAddress" v-if="false">
|
||||
<div class="hasAddress">
|
||||
<div class="addressList">
|
||||
<div class="addressItem" v-for="item, index in 3" :key="index" :class="{ 'addressItem_def': index == 0 }">
|
||||
<div class="addressItem_top">
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
</div>
|
||||
<div class="addressItem_footer_right">
|
||||
<div class="btn1">删除</div>
|
||||
<div class="btn1" @click="deleteItem">删除</div>
|
||||
<div class="btn2">修改</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty">
|
||||
<div class="empty" v-if="false">
|
||||
<image src="http://192.168.0.172:5500/7.15/shop_noAdd.png"></image>
|
||||
<div class="empty_text">暂无收货地址</div>
|
||||
|
||||
@ -69,6 +69,19 @@ export default {
|
||||
addAddress(){
|
||||
NavgateTo("../addAddress/index")
|
||||
},
|
||||
deleteItem(){
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '是否删除地址',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
console.log('用户点击确定');
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
|
||||
@ -8,11 +8,18 @@
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "packages/shop/addAddress/index",
|
||||
"pathName": "packages/shop/addAddress/index",
|
||||
"name": "packages/shop/address/index",
|
||||
"pathName": "packages/shop/address/index",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "packages/shop/addAddress/index",
|
||||
"pathName": "packages/shop/addAddress/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user