charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
money
2025-11-26 21:26:03 +08:00
parent ad548c7910
commit 853aa578b8
3 changed files with 315 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/common/address-popup.vue
+194
View File
@@ -0,0 +1,194 @@
<template>
<up-popup
:show="show"
:round="24"
:closeOnClickOverlay="false"
mode="bottom"
>
<view class="address-popup-view" >
<view class="head-view">
<text class="text-32 text-zu1 text-bold">{{headText}}</text>
<MyBtn text="确定" @ok="onOk" v-if="!dataList.length" mh="48rpx" wd="128rpx" fz="24rpx"></MyBtn>
<u-icon size="48rpx" name="close-circle-fill" color="#333" @click="onClose"></u-icon>
</view>
<scroll-view :scroll-x="true" class="address-select-view">
<view class="address-select-view-scroll">
<view class="select-box" @click="onSelectItrm(item,index)" v-for="(item,index) in selectList" :key="index">
<text class="text-28 text-zu1" :style="{color:index == curSelect ? '#7934F6' : '#333',
'white-space':'nowrap',}">{{item.name}}</text>
<view class="select-line" v-if="index == curSelect"></view>
</view>
</view>
</scroll-view>
<scroll-view :scroll-y="true" class="address-bottom-list" :scroll-into-view="scrollId">
<view class="address-data-view" v-for="(item,index) in dataList" :key="index" :id="item.zi">
<text class="text-32 text-zu1 text-bold">{{item.zi}}</text>
<view class="address-data-data" @click="onItem(item,xItem)" v-for="(xItem,xIndex) in item.data" :key="xIndex">
<text class="text-32 text-zu1 ">{{xItem.name}}</text>
</view>
</view>
</scroll-view>
<view class="right-zi-view" v-if="dataList.length">
<view class="zi-box" v-for="(item,index) in dataList" @click="onMao(item.zi)" :key="index">
<text class="text-24 text-zu1">{{item.zi}}</text>
</view>
</view>
</view>
</up-popup>
</template>
<script>
import Func from '/utils/func'
import MyBtn from '@/components/common/my-btn.vue'
export default {
components:{MyBtn},
data() {
return {
scrollId:'',
}
},
props:{
show:{
type:Boolean,
default:false
},
headText:{
type:String,
default:'请选择所在地区'
},
dataList:{
type:Array,
default:[]
},
selectList:{
type:Array,
default:[]
},
curSelect:{
type:Number,
default:0
}
},
methods: {
onClose(){
this.$emit('close')
},
onOk(){
this.$emit('ok');
},
onMao(item){
this.scrollId = item;
},
onSelectItrm(item,index){
if(index != this.curSelect){
this.$emit('select',item,index);
}
},
onItem(item,xItem){
this.$emit('itemSelect',item,xItem);
}
}
}
</script>
<style lang="scss" scoped>
.address-popup-view{
width:100vw;
height:1000rpx;
min-height:1000rpx;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #fff;
border-radius: 24rpx;
position: relative;
box-sizing: border-box;
.right-zi-view{
width:64rpx;
max-height:600rpx;
overflow-y: auto;
position: absolute;
right:32rpx;
border-radius: 32rpx;
padding: 32rpx 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(128,128,128,0.3);
}
.address-bottom-list{
width:100%;
height:calc(100% - 88rpx - 88rpx - 32rpx);
margin-top:32rpx;
display: flex;
flex-direction: column;
overflow-y: auto;
.address-data-view{
width:100%;
padding: 0 32rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
border-bottom:1rpx solid #eee;
.address-data-data{
padding-top: 24rpx;
box-sizing: border-box;
display: flex;
padding: 24rpx 0;
}
}
}
.address-select-view{
width:100%;
height:88rpx;
min-height:88rpx;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
.address-select-view-scroll{
width:100%;
display: flex;
flex-direction: row;
align-items: center;
.select-line{
width:50rpx;
height:8rpx;
min-height:8rpx;
background-color: #7934F6;
border-radius: 4rpx;
}
.select-box{
margin-right:24rpx;
height:56rpx;
min-height:56rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
}
}
.head-view{
width:100vw;
height:88rpx;
min-height:88rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 32rpx;
box-sizing: border-box;
}
}
</style>
pages/mine_package/mine_address_add/mine_address_add.vue
+116 -35
View File
@@ -1,9 +1,8 @@
<template> <template>
<view class="address_add_warp"> <view class="address_add_warp">
<Header <Header
:leftTitle="$t('address.add.title')" :leftTitle="titleText"
left-path-type="navigateTo" leftPath="1"
:leftPath="leftPath"
/> />
<view class="address_form"> <view class="address_form">
<view class="add_form_item add_form_item_but"> <view class="add_form_item add_form_item_but">
@@ -67,7 +66,7 @@
</view> --> </view> -->
<view class="add_but" @click="addAddress"> 保存地址 </view> <view class="add_but" @click="addAddress"> 保存地址 </view>
<up-toast ref="uToastRef"></up-toast> <up-toast ref="uToastRef"></up-toast>
<up-picker <!-- <up-picker
:show="regionShow" :show="regionShow"
ref="uPickerRef" ref="uPickerRef"
:columns="regionColumns" :columns="regionColumns"
@@ -78,19 +77,23 @@
itemHeight="34" itemHeight="34"
@cancel="regionShow = false" @cancel="regionShow = false"
@close="regionShow = false" @close="regionShow = false"
></up-picker> ></up-picker> -->
<AddressPopup @ok="onOk"
:show="regionShow" @itemSelect="onItemSelect" @select="onSelect" :curSelect="curSelect" :selectList="curSelectList" :dataList="addressList" @close="onClose"></AddressPopup>
</view> </view>
</template> </template>
<script> <script>
import { editAddress, getAddressDetail } from "@/api/address.js"; import { editAddress, getAddressDetail } from "@/api/address.js";
import { getCascadeRegion } from "@/api/common.js"; import { getCascadeRegion } from "@/api/common.js";
import AddressPopup from '@/components/common/address-popup.vue'
import Header from "@/components/header.vue"; import Header from "@/components/header.vue";
export default { export default {
components: { Header }, components: { Header,AddressPopup },
data() { data() {
return { return {
titleText:'添加地址',
form: { form: {
id: 0, id: 0,
name: null, // 收货人 name: null, // 收货人
@@ -104,6 +107,9 @@ export default {
address: null, // 详细地址 address: null, // 详细地址
}, },
regionShow: false, regionShow: false,
curSelect:-1,
addressList:[],
curSelectList:[],
regionColumns: [], regionColumns: [],
regionLoading: false, regionLoading: false,
// leftPath: "/pages/mine_package/mine_address/mine_address", // leftPath: "/pages/mine_package/mine_address/mine_address",
@@ -115,20 +121,77 @@ export default {
const detail = option.detail; const detail = option.detail;
if (id && id !== 0) { if (id && id !== 0) {
this.getById(id); this.getById(id);
} this.titleText = '修改地址';
const ids = option.ids;
if (ids && ids !== 0) {
this.leftPath =
"/pages/order_package/order_submit/order_submit?ids=" +
ids +
"&addressShow=true";
} else if (detail) {
this.leftPath = "";
} else {
this.leftPath = "/pages/mine_package/mine_address/mine_address";
} }
}, },
methods: { methods: {
onItemSelect(item,xItem){
this.curSelectList.push(xItem);
this.curSelect++;
this.getAddressList(xItem.id);
},
onSelect(item,index){
this.curSelectList.splice(index + 1);
this.curSelect = index;
this.getAddressList(this.curSelectList[this.curSelectList.length - 1].id);
},
async getAddressList(id = 0){
const params = {
parentId: id,
};
const resp = await getCascadeRegion(params);
if (resp.bizcode === 100) {
this.addressList = [];
resp.data.forEach(item=>{
if(this.addressList.length){
let index = this.addressList.findIndex(i=>i.zi == item.firstLetter);
if(index != -1){
this.addressList[index].data.push({id:item.id,pId:item.parentId,name:item.name});
}else{
this.addressList.push({zi:item.firstLetter,data:[{id:item.id,pId:item.parentId,name:item.name}]});
}
}else{
this.addressList.push({zi:item.firstLetter,data:[{id:item.id,pId:item.parentId,name:item.name}]});
}
})
this.addressList.sort((a,b)=>{
if (a.zi < b.zi) return -1;
if (a.zi > b.zi) return 1;
return 0;
});
}
},
onOk(){
this.form.regionStr = [];
this.curSelectList.forEach((item,index)=>{
if(index == 0){
this.form.countryId = item.id;
this.form.regionStr.push(item.name);
}else if(index == 1){
this.form.provinceId = item.id;
this.form.regionStr.push(item.name);
}else if(index == 2){
this.form.cityId = item.id;
this.form.regionStr.push(item.name);
}else if(index == 3){
this.form.areaId = item.id;
this.form.regionStr.push(item.name);
}else if(index == 4){
this.form.townshipId = item.id;
this.form.regionStr.push(item.name);
}
})
console.log('areaId',this.form)
this.onClose();
},
onClose(){
this.regionShow=false;
this.curSelect=false;
this.addressList=[];
this.curSelectList=[];
},
/** /**
* 用作编辑 * 用作编辑
*/ */
@@ -172,25 +235,43 @@ export default {
}, },
// 选择地址的弹框 // 选择地址的弹框
async regionShowCheck(status) { async regionShowCheck() {
if (status) { this.curSelectList = [];
const nation = await this.getRegion(0); this.curSelect = -1;
const province = if(this.form.townshipId){
nation && nation.length !== 0 this.curSelectList.push({id:this.form.countryId,name:this.form.regionStr[0]});
? await this.getRegion(nation[0].id) this.curSelectList.push({id:this.form.provinceId,name:this.form.regionStr[1]});
: []; this.curSelectList.push({id:this.form.cityId,name:this.form.regionStr[2]});
const city = this.curSelectList.push({id:this.form.areaId,name:this.form.regionStr[3]});
province && province.length !== 0 this.curSelectList.push({id:this.form.townshipId,name:this.form.regionStr[4]});
? await this.getRegion(province[0].id) this.curSelect = 4;
: []; await this.getAddressList(this.form.townshipId);
const area = }else if(this.form.areaId){
city && city.length !== 0 ? await this.getRegion(city[0].id) : []; this.curSelectList.push({id:this.form.countryId,name:this.form.regionStr[0]});
console.log("选择地址的弹框", nation, province, city, area, status); this.curSelectList.push({id:this.form.provinceId,name:this.form.regionStr[1]});
this.regionColumns = [nation, province, city, area]; this.curSelectList.push({id:this.form.cityId,name:this.form.regionStr[2]});
} else { this.curSelectList.push({id:this.form.areaId,name:this.form.regionStr[3]});
this.regionColumns = [[], [], [], []]; this.curSelect = 3;
await this.getAddressList(this.form.areaId);
}else if(this.form.cityId){
this.curSelectList.push({id:this.form.countryId,name:this.form.regionStr[0]});
this.curSelectList.push({id:this.form.provinceId,name:this.form.regionStr[1]});
this.curSelectList.push({id:this.form.cityId,name:this.form.regionStr[2]});
this.curSelect = 2;
await this.getAddressList(this.form.cityId);
}else if(this.form.provinceId){
this.curSelectList.push({id:this.form.countryId,name:this.form.regionStr[0]});
this.curSelectList.push({id:this.form.provinceId,name:this.form.regionStr[1]});
this.curSelect = 1;
await this.getAddressList(this.form.provinceId);
}else if(this.form.countryId){
this.curSelectList.push({id:this.form.countryId,name:this.form.regionStr[0]});
this.curSelect = 0;
await this.getAddressList(this.form.countryId);
}else{
await this.getAddressList();
} }
this.regionShow = status; this.regionShow = true;
}, },
// 数据交互 // 数据交互
async getRegion(pId) { async getRegion(pId) {
utils/config.js
+4 -4
View File
@@ -2,11 +2,11 @@
// export const BASE_URL="http://cl55un59859.vicp.fun:24346"; // 测试环境 // export const BASE_URL="http://cl55un59859.vicp.fun:24346"; // 测试环境
export const BASE_URL = "https://api.tbmall.xin"; //生产 // export const BASE_URL = "https://api.tbmall.xin"; //生产
export const MILD_BASE_URL = "https://agent.tbmall.xin/"; //中台生产 // export const MILD_BASE_URL = "https://agent.tbmall.xin/"; //中台生产
// export const BASE_URL ='https://api.o.tbmall.xin'; // 本地测试 export const BASE_URL ='https://api.o.tbmall.xin'; // 本地测试
// export const MILD_BASE_URL = "https://agent.o.tbmall.xin/"; //中台测试 export const MILD_BASE_URL = "https://agent.o.tbmall.xin/"; //中台测试
export const SHARE_URL = 'https://h.tbmall.xin'; export const SHARE_URL = 'https://h.tbmall.xin';