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>