433 lines
9.9 KiB
Vue
433 lines
9.9 KiB
Vue
|
<template name="moreSelect">
|
||
|
|
<view class="city-box">
|
||
|
|
<view class="city-box-title" :style="'background:' + colorValue">
|
||
|
|
<view class="close-btn" @tap="closeCity">关闭</view>
|
||
|
|
<!-- <text>{{title}}(最多{{maxCount}}个)</text>-->
|
||
|
|
<text>{{title}}</text>
|
||
|
|
<view class="query-btn" @tap="queryCity">确定</view>
|
||
|
|
</view>
|
||
|
|
<view class="choosed-box" v-if="chooseCityList.length > 0">
|
||
|
|
<view class="city-single" v-for="(item,index) in chooseCityList" :key="index">
|
||
|
|
<text :style="'color:' + colorValue">{{item.name}}</text>
|
||
|
|
<image @tap="delCity(index)" src="../../static/icon-apps/close-icon.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="city-data" v-if="level == 1">
|
||
|
|
<view class="level-one-data">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
|
||
|
|
:scroll-top="scrollTop" scroll-with-animation="true">
|
||
|
|
<view class="county-single" v-for="(zItem,zIndex) in cityData" :key="zIndex"
|
||
|
|
@tap="chooseOneCity(zItem)">
|
||
|
|
<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
|
||
|
|
{{zItem.name}}</view>
|
||
|
|
<view v-else class="city-name">{{zItem.name}}</view>
|
||
|
|
|
||
|
|
<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' +colorValue">
|
||
|
|
<image src="../../static/icon-apps/nike.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="city-data" v-else-if="level == 2">
|
||
|
|
<view class="province-data">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" scroll-with-animation="true">
|
||
|
|
<view @tap="switchCity(cIndex)" class="province-single"
|
||
|
|
:class="cityIndex == cIndex ?'city-active':''" v-for="(cItem,cIndex) in cityData" :key="cIndex">
|
||
|
|
<text>{{cItem.name}}</text>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view class="county-data">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
|
||
|
|
:scroll-top="scrollTop" scroll-with-animation="true">
|
||
|
|
<view class="county-single" v-for="(zItem,zIndex) in cityData[cityIndex].children" :key="zIndex"
|
||
|
|
@tap="chooseCity(zItem)">
|
||
|
|
<view v-if="cityIdArr.includes(zItem.id)" class="city-name" :style="'color:' + colorValue">
|
||
|
|
{{zItem.name}}</view>
|
||
|
|
<view v-else class="city-name">{{zItem.name}}</view>
|
||
|
|
<view v-if="cityIdArr.includes(zItem.id)" class="selected-box" :style="'background:' + colorValue + ';border:1px solid ' + colorValue">
|
||
|
|
<image src="../../static/icon-apps/nike.png" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="city-data" v-else-if="level == 3">
|
||
|
|
<view class="province-data" style="width: 250upx;">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" scroll-with-animation="true">
|
||
|
|
<view @tap="switchOne(cIndex)" class="province-single" :class="oneIndex == cIndex ?'city-active':''"
|
||
|
|
v-for="(cItem,cIndex) in cityData" :key="cIndex">
|
||
|
|
<text class="one-text">{{cItem.name}}</text>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view class="two-data">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
|
||
|
|
:scroll-top="scrollTop" scroll-with-animation="true">
|
||
|
|
<view class="two-single" :class="twoIndex == zIndex ?'city-active':''"
|
||
|
|
v-for="(zItem,zIndex) in cityData[oneIndex].children" :key="zIndex" @tap="chooseTwo(zIndex)">
|
||
|
|
<view class="city-name">{{zItem.name}}</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
<view class="three-data">
|
||
|
|
<scroll-view scroll-y="true" :style="'height:' + (900-viewHeight) + 'upx'" @scroll="scroll"
|
||
|
|
:scroll-top="scrollTop" scroll-with-animation="true">
|
||
|
|
<view class="county-single" v-for="(zItem,zIndex) in cityData[oneIndex].children[twoIndex].children"
|
||
|
|
:key="zIndex" @tap="chooseThree(zItem)">
|
||
|
|
<view v-if="cityIdArr.includes(zItem.id)" class="city-name"
|
||
|
|
:style="'color:' + colorValue + ';font-weight:bold'">{{zItem.name}}</view>
|
||
|
|
<view v-else class="city-name">{{zItem.name}}</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "more-select",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
viewHeight: 0,
|
||
|
|
oneIndex: 0,
|
||
|
|
twoIndex: 0
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
maxCount: {
|
||
|
|
type: Number,
|
||
|
|
default: 3
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: "选择城市"
|
||
|
|
},
|
||
|
|
level: {
|
||
|
|
type: Number,
|
||
|
|
default: 2
|
||
|
|
},
|
||
|
|
chooseCityList: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
cityData: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
cityIdArr: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
scrollTop: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
cityIndex: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
colorValue: {
|
||
|
|
type: String,
|
||
|
|
default: "#016CE1"
|
||
|
|
},
|
||
|
|
oldScrollTop: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
// this.getDescBox()
|
||
|
|
// console.log(this.cityData)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
scroll(e) {
|
||
|
|
this.$emit('scrollCity', e.detail.scrollTop)
|
||
|
|
},
|
||
|
|
closeCity() {
|
||
|
|
this.$emit('closeCity', true)
|
||
|
|
},
|
||
|
|
queryCity() {
|
||
|
|
this.$emit('queryCity', true)
|
||
|
|
},
|
||
|
|
switchCity(index) {
|
||
|
|
this.$emit('switchCity', index)
|
||
|
|
},
|
||
|
|
switchOne(index) {
|
||
|
|
this.oneIndex = index
|
||
|
|
},
|
||
|
|
chooseTwo(index) {
|
||
|
|
this.twoIndex = index
|
||
|
|
},
|
||
|
|
getViewHeight() {
|
||
|
|
uni.createSelectorQuery().in(this).select('.choosed-box').boundingClientRect(result => {
|
||
|
|
if (result) {
|
||
|
|
this.viewHeight = result.height * 2
|
||
|
|
} else {
|
||
|
|
this.viewHeight = 0
|
||
|
|
}
|
||
|
|
}).exec();
|
||
|
|
},
|
||
|
|
chooseCity(item) {
|
||
|
|
let parms = {
|
||
|
|
id: item.id,
|
||
|
|
pid: item.pid,
|
||
|
|
name: item.name,
|
||
|
|
parentName: this.cityData[this.cityIndex].name
|
||
|
|
}
|
||
|
|
this.$emit('chooseCity', parms)
|
||
|
|
},
|
||
|
|
chooseOneCity(item) {
|
||
|
|
console.log(item)
|
||
|
|
let parms = {
|
||
|
|
id: item.id,
|
||
|
|
name: item.name
|
||
|
|
}
|
||
|
|
this.$emit('chooseCity', parms)
|
||
|
|
},
|
||
|
|
chooseThree(item) {
|
||
|
|
let parms = {
|
||
|
|
id: item.id,
|
||
|
|
oneId: this.cityData[this.oneIndex].id,
|
||
|
|
twoId: item.pid,
|
||
|
|
name: item.name,
|
||
|
|
oneName: this.cityData[this.oneIndex].name,
|
||
|
|
twoName: this.cityData[this.oneIndex].children[this.twoIndex].name,
|
||
|
|
}
|
||
|
|
console.log(parms)
|
||
|
|
this.$emit('chooseCity', parms)
|
||
|
|
},
|
||
|
|
delCity(index) {
|
||
|
|
this.$emit('delCity', index)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.city-box {
|
||
|
|
width: 750upx;
|
||
|
|
height: 1000upx;
|
||
|
|
background: rgba($color: #EEEEEE, $alpha: 1);
|
||
|
|
|
||
|
|
.city-box-title {
|
||
|
|
width: 750upx;
|
||
|
|
height: 100upx;
|
||
|
|
background: #016CE1;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
color: #FFFFFF;
|
||
|
|
|
||
|
|
.close-btn {
|
||
|
|
margin-left: 36upx;
|
||
|
|
font-size: 28upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.query-btn {
|
||
|
|
margin-right: 36upx;
|
||
|
|
font-size: 28upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 32upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.level-one-data {
|
||
|
|
width: 700upx;
|
||
|
|
margin: 0 auto;
|
||
|
|
|
||
|
|
// background: red;
|
||
|
|
.county-single {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 90upx;
|
||
|
|
margin-left: 20upx;
|
||
|
|
margin-right: 20upx;
|
||
|
|
border-bottom: 1px solid rgba($color: #999999, $alpha: .15);
|
||
|
|
|
||
|
|
.city-name {
|
||
|
|
font-size: 28upx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #232425;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 42upx;
|
||
|
|
height: 42upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.no-select-box {
|
||
|
|
width: 42upx;
|
||
|
|
height: 42upx;
|
||
|
|
border: 1px solid red;
|
||
|
|
border-radius: 7upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.city-data {
|
||
|
|
display: flex;
|
||
|
|
border-top: 1px solid rgba($color: #EEEEEE, $alpha: .15);
|
||
|
|
|
||
|
|
.county-single {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 90upx;
|
||
|
|
margin-left: 20upx;
|
||
|
|
margin-right: 20upx;
|
||
|
|
border-bottom: 1px solid rgba($color: #999999, $alpha: .15);
|
||
|
|
|
||
|
|
.city-name {
|
||
|
|
font-size: 28upx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #232425;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 42upx;
|
||
|
|
height: 42upx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.county-data {
|
||
|
|
width: 450upx;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.province-scroll {
|
||
|
|
height: 795upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.province-scroll-short {
|
||
|
|
height: 900upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.two-data {
|
||
|
|
width: 280upx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
|
||
|
|
.two-single {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 90upx;
|
||
|
|
padding-left: 20upx;
|
||
|
|
// margin-left: 20upx;
|
||
|
|
// margin-right: 20upx;
|
||
|
|
// border-bottom: 1px solid rgba($color: #999999, $alpha: .15);
|
||
|
|
|
||
|
|
.city-name {
|
||
|
|
font-size: 28upx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #232425;
|
||
|
|
}
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 42upx;
|
||
|
|
height: 42upx;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.province-data {
|
||
|
|
width: 300upx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.province-single {
|
||
|
|
width: 300upx;
|
||
|
|
display: flex;
|
||
|
|
height: 90upx;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 28upx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #232425;
|
||
|
|
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-left: 30upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.city-active {
|
||
|
|
background: #EEEEEE;
|
||
|
|
color: #016CE1;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.choosed-box {
|
||
|
|
width: 750upx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
padding: 30upx 0 0 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.city-single {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
margin-left: 20upx;
|
||
|
|
margin-bottom: 30upx;
|
||
|
|
padding: 0 20upx;
|
||
|
|
// width: 125upx;
|
||
|
|
height: 46upx;
|
||
|
|
background: rgba($color: #016CE1, $alpha: 0.16);
|
||
|
|
border-radius: 26upx;
|
||
|
|
font-size: 28upx;
|
||
|
|
font-family: Source Han Sans CN;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #016CE1;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 32upx;
|
||
|
|
height: 32upx;
|
||
|
|
margin-left: 6upx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.one-text {
|
||
|
|
width: 220upx;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.selected-box {
|
||
|
|
width: 38upx;
|
||
|
|
height: 38upx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
image{
|
||
|
|
width: 38upx;
|
||
|
|
height: 38upx;
|
||
|
|
}
|
||
|
|
border-radius: 7upx;
|
||
|
|
}
|
||
|
|
</style>
|