|
@@ -98,30 +98,15 @@
|
|
|
|
|
|
|
|
<uni-popup ref="addressPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
|
|
<uni-popup ref="addressPop" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff" :mask-click="false">
|
|
|
<view class="address-pop">
|
|
<view class="address-pop">
|
|
|
- <view class="address-check">
|
|
|
|
|
- <view class="check-name" @click="addTop(1,fristData.index)">{{fristData.name}}</view>
|
|
|
|
|
- <view class="check-name" @click="addTop(2,fristData.index)">{{secondData.name}}</view>
|
|
|
|
|
- <view class="check-name" @click="addTop(3,secondData.index)">{{threeData.name}}</view>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="address-title">请选择地区</view>
|
|
|
<view class="address-scroll">
|
|
<view class="address-scroll">
|
|
|
- <template v-if="fristData.list.length > 0">
|
|
|
|
|
- <view :class="fristData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in fristData.list" :key="indx" @click="addClick(indx,1)">
|
|
|
|
|
- {{ item.text }}
|
|
|
|
|
- <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- <template v-if="secondData.list.length > 0">
|
|
|
|
|
- <view :class="secondData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in secondData.list" :key="indx" @click="addClick(indx,2)">
|
|
|
|
|
- {{ item.text }}
|
|
|
|
|
- <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
- <template v-if="threeData.list.length > 0">
|
|
|
|
|
- <view :class="threeData.index==indx?'item-name active':'item-name'" v-for="(item,indx) in threeData.list" :key="indx" @click="addClick(indx,3)">
|
|
|
|
|
|
|
+ <picker-view :indicator-style="indicatorStyle" :value="pickerValue" @change="bindChange" :range="columns" class="picker-view">
|
|
|
|
|
+ <picker-view-column v-for="(col, colIndex) in columns" :key="colIndex">
|
|
|
|
|
+ <view class="item" v-for="(item, itemIndex) in col" :key="itemIndex">
|
|
|
{{ item.text }}
|
|
{{ item.text }}
|
|
|
- <view class="icon"><image src="/static/image/gou.svg"></image></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </template>
|
|
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </picker-view-column>
|
|
|
|
|
+ </picker-view>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="address-footer">
|
|
<view class="address-footer">
|
|
|
<view class="footer-btn" @click="closeOrder">取消</view>
|
|
<view class="footer-btn" @click="closeOrder">取消</view>
|
|
@@ -144,10 +129,19 @@ export default {
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
|
|
+ indicatorStyle: `height: 50px;backgroud-color:#f1f1f1`,
|
|
|
|
|
+ columns: [
|
|
|
|
|
+ [], // 省列表
|
|
|
|
|
+ [], // 市列表
|
|
|
|
|
+ [] // 区列表
|
|
|
|
|
+ ],
|
|
|
|
|
+ pickerValue: [0, 0, 0],
|
|
|
optionData:null,
|
|
optionData:null,
|
|
|
orderData:null,
|
|
orderData:null,
|
|
|
loading:false,
|
|
loading:false,
|
|
|
cityData:[],
|
|
cityData:[],
|
|
|
|
|
+ secondData:[],
|
|
|
|
|
+ dayData:[],
|
|
|
addressForm:{},
|
|
addressForm:{},
|
|
|
isSubmit:false,
|
|
isSubmit:false,
|
|
|
addressData:{
|
|
addressData:{
|
|
@@ -155,22 +149,10 @@ export default {
|
|
|
hide:null,
|
|
hide:null,
|
|
|
list:[]
|
|
list:[]
|
|
|
},
|
|
},
|
|
|
- fristData:{
|
|
|
|
|
- index:null,
|
|
|
|
|
- name:"",
|
|
|
|
|
- list:[]
|
|
|
|
|
- },
|
|
|
|
|
- secondData:{
|
|
|
|
|
- index:null,
|
|
|
|
|
- name:"",
|
|
|
|
|
- list:[]
|
|
|
|
|
- },
|
|
|
|
|
- threeData:{
|
|
|
|
|
- index:null,
|
|
|
|
|
- name:"",
|
|
|
|
|
- list:[]
|
|
|
|
|
- },
|
|
|
|
|
- doneGoods:[]
|
|
|
|
|
|
|
+ doneGoods:[],
|
|
|
|
|
+ selectedProvince: null,
|
|
|
|
|
+ selectedCity: null,
|
|
|
|
|
+ selectedArea: null
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
onLoad(options) {
|
|
onLoad(options) {
|
|
@@ -180,13 +162,56 @@ export default {
|
|
|
this.getOrder();
|
|
this.getOrder();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ checkAddress(){
|
|
|
|
|
+ app.addressData.hide = app.selectedProvince.text+app.selectedCity.text+app.selectedArea.text;
|
|
|
|
|
+ app.addressData.name = app.selectedProvince.text+"/"+app.selectedCity.text+"/"+app.selectedArea.text;
|
|
|
|
|
+ app.addressData.list = [app.selectedProvince.value,app.selectedCity.value,app.selectedArea.value];
|
|
|
|
|
+ this.$refs.addressPop.close();
|
|
|
|
|
+ },
|
|
|
|
|
+ bindChange(e){
|
|
|
|
|
+ const val = e.detail.value; // 例如 [2, 1, 0]
|
|
|
|
|
+ let [provinceIdx, cityIdx, areaIdx] = val;
|
|
|
|
|
+ // ---------- 第一步:根据省索引,更新市列表 ----------
|
|
|
|
|
+ const province = this.cityData[provinceIdx];
|
|
|
|
|
+ const newCityCol = province?.children || [];
|
|
|
|
|
+
|
|
|
|
|
+ // 【关键】如果当前城市索引超出新列表范围,强制置为 0
|
|
|
|
|
+ if (cityIdx >= newCityCol.length) {
|
|
|
|
|
+ cityIdx = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ // 如果新列表为空(没有市),cityIdx 只能为 0,且后续区列表为空
|
|
|
|
|
+ const city = newCityCol[cityIdx] || null;
|
|
|
|
|
+
|
|
|
|
|
+ // ---------- 第二步:根据市索引,更新区列表 ----------
|
|
|
|
|
+ const newAreaCol = city?.children || [];
|
|
|
|
|
+
|
|
|
|
|
+ // 【关键】如果当前区索引超出新区列表范围,强制置为 0
|
|
|
|
|
+ if (areaIdx >= newAreaCol.length) {
|
|
|
|
|
+ areaIdx = 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ const area = newAreaCol[areaIdx] || null;
|
|
|
|
|
+
|
|
|
|
|
+ // ---------- 第三步:同时更新 columns 和 pickerValue ----------
|
|
|
|
|
+ // 注意:必须将修正后的 [provinceIdx, cityIdx, areaIdx] 重新赋值给 pickerValue
|
|
|
|
|
+ app.columns = [
|
|
|
|
|
+ app.cityData, // 省列不变
|
|
|
|
|
+ newCityCol, // 更新后的市列
|
|
|
|
|
+ newAreaCol // 更新后的区列
|
|
|
|
|
+ ];
|
|
|
|
|
+ app.pickerValue = [provinceIdx, cityIdx, areaIdx];
|
|
|
|
|
+
|
|
|
|
|
+ // ---------- 第四步:保存选中的完整数据(用于提交) ----------
|
|
|
|
|
+ app.selectedProvince = province;
|
|
|
|
|
+ app.selectedCity = city;
|
|
|
|
|
+ app.selectedArea = area;
|
|
|
|
|
+ },
|
|
|
async submitOrder(){
|
|
async submitOrder(){
|
|
|
- if (app.doneGoods.length == 0) return app.$dialog.showSuccess("请选择意向商品");
|
|
|
|
|
- var formData = this.addressForm;
|
|
|
|
|
|
|
+ // if (app.doneGoods.length == 0) return app.$dialog.showSuccess("请选择意向商品");
|
|
|
|
|
+ var formData = app.addressForm;
|
|
|
var validation = form.validation(formData,[
|
|
var validation = form.validation(formData,[
|
|
|
{name:"nickname",rule:["required"],msg:["请输入姓名"]},
|
|
{name:"nickname",rule:["required"],msg:["请输入姓名"]},
|
|
|
{name:"mobile",rule:["required","isMobile"],msg:["请填写手机号码","手机号码格式错误"]},
|
|
{name:"mobile",rule:["required","isMobile"],msg:["请填写手机号码","手机号码格式错误"]},
|
|
|
- {name:"address",rule:["required"],msg:["请输入"]},
|
|
|
|
|
|
|
+ {name:"address",rule:["required"],msg:["请输入详细地址"]},
|
|
|
]);
|
|
]);
|
|
|
if(validation){
|
|
if(validation){
|
|
|
this.$dialog.showSuccess(validation);
|
|
this.$dialog.showSuccess(validation);
|
|
@@ -215,53 +240,6 @@ export default {
|
|
|
sendGoods(data){
|
|
sendGoods(data){
|
|
|
app.doneGoods = data;
|
|
app.doneGoods = data;
|
|
|
},
|
|
},
|
|
|
- checkAddress(){
|
|
|
|
|
- if (!app.fristData.index) return this.$dialog.showSuccess("请完善地区信息!");
|
|
|
|
|
- if (!app.secondData.index) return this.$dialog.showSuccess("请完善地区信息~");
|
|
|
|
|
- if (!app.threeData.index) return this.$dialog.showSuccess("请完善地区信息");
|
|
|
|
|
- var fristData = app.cityData[app.fristData.index];
|
|
|
|
|
- var secondData = fristData.children[app.secondData.index];
|
|
|
|
|
- var threeData = secondData.children[app.threeData.index];
|
|
|
|
|
- app.addressData.name = fristData.text+"/"+secondData.text+"/"+threeData.text
|
|
|
|
|
- app.addressData.hide = fristData.text+secondData.text+threeData.text
|
|
|
|
|
- app.addressData.list = [fristData.value,secondData.value,threeData.value]
|
|
|
|
|
- app.$refs.addressPop.close()
|
|
|
|
|
- },
|
|
|
|
|
- addClick(indx,type) {
|
|
|
|
|
- if (type == 1) {
|
|
|
|
|
- app.fristData.index = indx;
|
|
|
|
|
- app.fristData.list = [];
|
|
|
|
|
- app.secondData.list = app.cityData[indx].children;
|
|
|
|
|
- app.fristData.name = app.cityData[indx].text;
|
|
|
|
|
- }
|
|
|
|
|
- if (type == 2) {
|
|
|
|
|
- app.secondData.index = indx;
|
|
|
|
|
- app.secondData.name = app.secondData.list[indx].text;
|
|
|
|
|
- app.threeData.list = app.secondData.list[indx].children;
|
|
|
|
|
- app.secondData.list = [];
|
|
|
|
|
- }
|
|
|
|
|
- if (type == 3) {
|
|
|
|
|
- app.threeData.index = indx;
|
|
|
|
|
- app.threeData.name = app.threeData.list[indx].text;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- addTop(type,index){
|
|
|
|
|
- if (type == 1) {
|
|
|
|
|
- app.fristData.list = app.cityData;
|
|
|
|
|
- app.secondData.list = [];
|
|
|
|
|
- app.secondData.index = null;
|
|
|
|
|
- app.secondData.name = null;
|
|
|
|
|
- app.threeData.list = [];
|
|
|
|
|
- app.threeData.index = null;
|
|
|
|
|
- app.threeData.name = null;
|
|
|
|
|
- }
|
|
|
|
|
- if (type == 2) {
|
|
|
|
|
- app.secondData.list = app.cityData[index].children;
|
|
|
|
|
- app.threeData.list = [];
|
|
|
|
|
- app.threeData.index = null;
|
|
|
|
|
- app.threeData.name = null;
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
showAddress(){
|
|
showAddress(){
|
|
|
this.$refs.addressPop.open();
|
|
this.$refs.addressPop.open();
|
|
|
},
|
|
},
|
|
@@ -289,9 +267,18 @@ export default {
|
|
|
var resp = await app.$api.home.city.get();
|
|
var resp = await app.$api.home.city.get();
|
|
|
if (resp.code !== 1) return ;
|
|
if (resp.code !== 1) return ;
|
|
|
app.cityData = resp.data;
|
|
app.cityData = resp.data;
|
|
|
- app.fristData.index = 0;
|
|
|
|
|
- app.fristData.name = resp.data[0].text;
|
|
|
|
|
- app.fristData.list = resp.data
|
|
|
|
|
|
|
+ const provinceCol = app.cityData;
|
|
|
|
|
+ // 2. 第二列:第一个省的 children(市)
|
|
|
|
|
+ const firstProvince = provinceCol[0];
|
|
|
|
|
+ const cityCol = firstProvince?.children || [];
|
|
|
|
|
+ // 3. 第三列:第一个市的 children(区)
|
|
|
|
|
+ const firstCity = cityCol[0];
|
|
|
|
|
+ const areaCol = firstCity?.children || [];
|
|
|
|
|
+ app.columns = [provinceCol, cityCol, areaCol];
|
|
|
|
|
+ app.pickerValue = [0, 0, 0];
|
|
|
|
|
+ app.selectedProvince = firstProvince;
|
|
|
|
|
+ app.selectedCity = firstCity;
|
|
|
|
|
+ app.selectedArea = areaCol[0] || null;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -309,6 +296,11 @@ export default {
|
|
|
border-radius: 10rpx;
|
|
border-radius: 10rpx;
|
|
|
}
|
|
}
|
|
|
.address-pop{
|
|
.address-pop{
|
|
|
|
|
+ .address-title{
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ padding: 20rpx;
|
|
|
|
|
+ }
|
|
|
.address-check{
|
|
.address-check{
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
@@ -323,8 +315,15 @@ export default {
|
|
|
}
|
|
}
|
|
|
.address-scroll{
|
|
.address-scroll{
|
|
|
height: 50vh;
|
|
height: 50vh;
|
|
|
- overflow: auto;
|
|
|
|
|
|
|
+ overflow: hidden;
|
|
|
padding: 20rpx;
|
|
padding: 20rpx;
|
|
|
|
|
+ .picker-view{
|
|
|
|
|
+ height: 50vh;
|
|
|
|
|
+ .item{
|
|
|
|
|
+ line-height: 100rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.item-name{
|
|
.item-name{
|
|
|
padding: 20rpx;
|
|
padding: 20rpx;
|
|
|
border-bottom: 2rpx solid #f1f1f1;
|
|
border-bottom: 2rpx solid #f1f1f1;
|