feat：修改地址选中
This commit is contained in:
+180
-172
@@ -1,197 +1,205 @@
|
||||
<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-gray" :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-gray 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-gray ">{{xItem.name}}</text>
|
||||
<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-gray" :style="{
|
||||
color: index == curSelect ? '#7934F6' : '#333',
|
||||
'white-space': 'nowrap',
|
||||
}">{{ item.name }}</text>
|
||||
<view class="select-line" v-if="index == curSelect"></view>
|
||||
</view>
|
||||
</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-gray">{{item.zi}}</text>
|
||||
</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-gray 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-gray ">{{ 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-gray">{{ 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:'',
|
||||
}
|
||||
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
|
||||
},
|
||||
props:{
|
||||
show:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
headText:{
|
||||
type:String,
|
||||
default:'请选择所在地区'
|
||||
},
|
||||
dataList:{
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
selectList:{
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
curSelect:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
|
||||
headText: {
|
||||
type: String,
|
||||
default: '请选择所在地区'
|
||||
},
|
||||
|
||||
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){
|
||||
Func.debounce(()=>this.onItemOne(item,xItem));
|
||||
},
|
||||
onItemOne(item,xItem){
|
||||
this.$emit('itemSelect',item,xItem);
|
||||
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) {
|
||||
// 传入第二个参数 150 毫秒
|
||||
Func.debounce(() => this.onItemOne(item, xItem), 150);
|
||||
},
|
||||
onItemOne(item, xItem) {
|
||||
this.$emit('itemSelect', item, xItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.address-popup-view{
|
||||
width:100vw;
|
||||
height:1000rpx;
|
||||
min-height:1000rpx;
|
||||
.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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.address-data-data {
|
||||
padding-top: 24rpx;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user