Commit 09a06ec4 authored by liwei's avatar liwei

新增了会员列表搜索功能和页面

parent 98e7d2b2
......@@ -294,9 +294,9 @@
]
},
{
"root": "pagespreference",
"root": "pagesUser",
"pages": [{
"path": "preference/preference",
"path": "userFilterPage",
"style": {
"navigationBarTitleText": "筛选设置",
"backgroundColor": "#ffffff",
......
......@@ -124,14 +124,13 @@
</template>
<script>
import UFormItem from "../../uni_modules/uview-ui/components/u-form-item/u-form-item";
import {getOptions} from "../../common/options";
import UFormItem from "../uni_modules/uview-ui/components/u-form-item/u-form-item";
import {getOptions} from "../common/options";
export default {
components: {UFormItem },
components: {UFormItem},
data() {
return {
index:0,
//数据选项
sexActions:[
getOptions('sex')
......@@ -149,12 +148,12 @@ export default {
value: '0101'
}]
],
//选择器
//选择器显示
showSex: false,
showEducation: false,
showResidence: false,
showHeight:false,
showWeight:false,
//搜索参数
queryParams: {
memSex: '',//性别
memHeight:'',//身高
......@@ -162,20 +161,11 @@ export default {
memResidenceProvince:'',//居住地省份
memResidenceCity:'',//居住城市
},
tipMsg: '',
isConfirm: false
}
},
onReady() {
},
onShow() {
},
methods: {
//性别确认
confirmSex(e){
console.log('======e======', e)
this.showSex = false
this.queryParams.memSex = e.value[0].value
this.queryParams.memSexText = e.value[0].label
......
......@@ -93,11 +93,11 @@ export default {
let maxHeight = ''
let minWeight = ''
let maxWeight = ''
if (value.memHeight != ''){
if (value.memHeight != '' && value.memHeight != '不限'){
minHeight = value.memHeight.split('-')[0]
maxHeight = value.memHeight.split('-')[1]
}
if (value.memWeight != ''){
if (value.memWeight != '' && value.memWeight != '不限'){
minWeight = value.memWeight.split('-')[0]
maxWeight = value.memWeight.split('-')[1]
}
......@@ -105,8 +105,6 @@ export default {
this.queryParam = {
page: 1,
rows: 10,
memCareer:value.memCareer,
memCollege:value.memCollege,
memSex: value.memSex,
minHeight: minHeight,
maxHeight: maxHeight,
......@@ -121,7 +119,7 @@ export default {
search() {
//判断当前是否已登录
uni.navigateTo({
url: '/pagespreference/preference/preference'
url: '/pagesUser/userFilterPage'
});
},
//跳转用户详情
......
<template>
<view clipchildren=false>
<!-- <text class="loading" :style="{opacity: lineLeft===0 ? '1' : '0'}">loading...</text> -->
<view class="fj-slider-box" :style="{opacity: lineLeft!==0 ? '1' : '0'}" clipchildren=false>
<!-- <view class="fj-value">
<text class="fj-v-l"
>{{fillMinValue}}</text>
<text class="fj-v-r" >{{fillValue}}</text>
</view> -->
<text class="tip" :style="{left:curValue==100?`${tipLeft-22}px`:`${tipLeft-16}px`,opacity: tipShow ? '1' : '0'}">{{curValue}}</text>
<view class="fj-slider" clipchildren=false>
<view class="fj-line" ref="fj-line"></view>
<view v-if="maxLeft-minLeft>=0" class="fj-line-pull"
:style="{left: `${minLeft + touchWidth/2}px`, width:`${Math.abs(maxLeft - minLeft)}px`}"></view>
<view v-else class="fj-line-pull"
:style="{left: `${minLeft + touchWidth/2- Math.abs(maxLeft - minLeft) }px`, width:`${Math.abs(maxLeft - minLeft)}px`}">
</view>
<view class="" style="width: 100rpx;height: 100rpx;position: absolute;display: flex;justify-content: flex-start;margin-top: -40rpx;
margin-left: -40rpx;"
ref="fjtouchleft" @touchstart="touchstart($event, 'min')" :style="{left:`${minLeft}px`}"
@touchmove="touchmove($event, 'min')" @touchend="touchend($event, 'min')">
<view class="fj-touch-left" style="margin-top: 40rpx;margin-left: 40rpx;margin-bottom: 20px;"> </view>
</view>
<view class="" style="width: 100rpx;height: 100rpx;position: absolute;display: flex;justify-content: flex-start;margin-top: -40rpx;
margin-right: -40rpx;" @touchstart="touchstart($event, 'max')" :style="{left:`${maxLeft-4}px`}"
@touchmove="touchmove($event, 'max')" @touchend="touchend($event, 'max')">
<view class="fj-touch-right"
style="margin-top: 40rpx;margin-right: 40rpx;margin-bottom: 20px;">
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifndef APP-PLUS
const createSelectorQuery = (that) => {
let query = uni.createSelectorQuery().in(that);
// #ifdef MP-ALIPAY
query = my.createSelectorQuery();
// #endif
return query;
}
// #endif
// #ifdef APP-PLUS
const dom = weex.requireModule('dom');
// #endif
export default {
name: 's-region-slider',
props: {
fillValue: {
type: Number,
default: 1000,
},
fillMinValue: {
type: Number,
default: 0,
},
minValue: {
type: Number,
default: 0,
},
maxValue: {
type: Number,
default: 1000,
},
step: {
type: Number,
default: 50,
},
},
watch: {
minValue(newVal, oldVla) {
if (newVal < this.fillMinValue || this.maxValue > this.fillValue) {
console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
return;
}
this.sMinValue = newVal - this.fillMinValue;
this.showMinNum = newVal;
this.minLeft = this.sMinValue / this.percentage;
},
maxValue(newVal, oldVla) {
if (this.minValue < this.fillMinValue || newVal > this.fillValue) {
console.error(`请在${this.fillMinValue}-${this.fillValue}范围中设置`)
return;
}
this.sMaxValue = newVal - this.fillMinValue;
this.showMaxNum = newVal;
this.maxLeft = this.sMaxValue / this.percentage;
},
fillValue(newVal, oldVla) {
this.sFillValue = this.fillValue;
}
},
data() {
return {
tipShow: false,
tipLeft: 0,
minLeft: 0,
maxLeft: 0,
touchWidth: 30,
lineWidth: 0,
lineLeft: 0,
showMinNum: 0,
showMaxNum: 0,
curValue: 0,
sMinValue: 0,
sMaxValue: 0,
sFillValue: 0,
sFillMinValue: 0,
percentage: 0
};
},
mounted() {
this.$nextTick().then(() => {
this.envir({
classname: '.fj-touch-left',
refname: this.$refs.fjtouchleft,
fn: (ret) => {
this.touchWidth = ret.width;
}
})
this.envir({
classname: '.fj-line',
refname: this.$refs['fj-line'],
fn: (ret) => {
this.lineWidth = ret.width;
this.lineLeft = ret.left; //
this.sMinValue = (this.minValue - this.fillMinValue) > 0 ? this.minValue - this
.fillMinValue : 0;
this.sMaxValue = (this.maxValue - this.fillMinValue) > 0 ? this.maxValue - this
.fillMinValue : 0;
this.sFillValue = (this.fillValue - this.fillMinValue) > 0 ? this.fillValue -
this.fillMinValue : 0;
this.percentage = this.sFillValue / this.lineWidth;
this.minLeft = this.sMinValue / this.percentage;
this.maxLeft = this.sMaxValue / this.percentage;
this.showMaxNum = this.sMaxValue + this.fillMinValue;
this.showMinNum = this.sMinValue + this.fillMinValue;
}
})
})
},
methods: {
envir(opt) {
setTimeout(() => {
// #ifdef APP-PLUS
dom.getComponentRect(opt.refname, ret => {
const option = ret.size
opt.fn({
width: option.width,
height: option.height,
top: option.top,
bottom: option.bottom,
left: option.left,
right: option.right,
})
})
// #endif
// #ifndef APP-PLUS
createSelectorQuery(this).select(opt.classname).boundingClientRect().exec((data) => {
const option = data[0];
opt.fn({
width: option.width,
height: option.height,
top: option.top,
bottom: option.bottom,
left: option.left,
right: option.right,
})
})
// #endif
}, 200)
},
touchstart(e, type) {
this.$emit('down', {
...e,
custom: {
type,
minValue: this.showMinNum,
maxValue: this.showMaxNum
}
})
},
touchmove(e, type) {
// #ifndef APP-PLUS
const disX = e.touches[0].clientX - this.lineLeft
// #endif
// #ifdef APP-PLUS
const disX = e.touches[0].screenX - this.lineLeft
// #endif
if (disX < 0 || disX > this.lineWidth) {
return;
}
if (type === 'min') {
this.minLeft = Math.floor(disX);
if (this.minLeft < 0) {
this.minLeft = 0;
return;
}
if (this.maxLeft > this.lineWidth) {
this.maxLeft = this.lineWidth;
return;
}
//if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.minLeft = this.maxLeft - this.touchWidth; return;}
this.curValue = Math.floor(this.minLeft * this.percentage);
}
if (type === 'max') {
this.maxLeft = Math.ceil(disX);
if (this.minLeft < 0) {
this.minLeft = 0;
return;
}
if (this.maxLeft > this.lineWidth) {
this.maxLeft = this.lineWidth;
return;
}
// if(this.maxLeft - this.minLeft <= this.touchWidth ) {this.maxLeft = this.minLeft + this.touchWidth;return;}
this.curValue = Math.round(this.maxLeft * this.percentage);
}
this.tipShow = true;
this.tipLeft = Math.round((this.curValue) / this.percentage);
this.tipLeft = this.tipLeft >= this.lineWidth ? this.lineWidth : this.tipLeft
this.tipLeft = this.tipLeft <= 0 ? 0 : this.tipLeft
this.curValue = this.curValue + this.fillMinValue;
this.$emit('move', {
...e,
custom: {
type,
minValue: this.showMinNum,
maxValue: this.showMaxNum,
curValue: this.curValue,
}
})
},
touchend(e, type) {
if (type === 'min') {
if (this.step === 1) {
this.sMinValue = this.curValue - this.fillMinValue;
} else {
const stepnum = Math.round((this.minLeft * this.percentage) / this.step);
this.sMinValue = stepnum * this.step;
this.minLeft = this.sMinValue / this.percentage;
}
}
if (type === 'max') {
if (this.step === 1) {
this.sMaxValue = this.curValue - this.fillMinValue;
} else {
const stepnum = Math.round((this.maxLeft * this.percentage) / this.step);
this.sMaxValue = stepnum * this.step;
if (this.sFillValue - this.sMaxValue < this.step) {
this.sMaxValue = this.sFillValue
}
this.maxLeft = this.sMaxValue / this.percentage;
}
}
this.tipShow = false;
if (this.sMinValue <= this.sMaxValue) {
this.showMaxNum = this.sMaxValue + this.fillMinValue;
this.showMinNum = this.sMinValue + this.fillMinValue;
} else {
this.showMaxNum = this.sMinValue + this.fillMinValue;
this.showMinNum = this.sMaxValue + this.fillMinValue;
}
this.$emit('up', {
...e,
custom: {
type,
minValue: this.showMinNum < this.fillMinValue ? this.fillMinValue : this.showMinNum,
maxValue: this.showMaxNum > this.fillValue ? this.fillValue : this.showMaxNum
}
})
},
},
};
</script>
<style scoped>
.fj-slider-box {
font-size: 12px;
position: relative;
}
.loading {
font-size: 12px;
}
.fj-value {
position: relative;
height: 50rpx;width: 686rpx;
display: flex;align-items: center;
}
.fj-v-l {
height: 50rpx;
font-size: 36rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 50rpx;
}
.fj-v-r {
height: 50rpx;
font-size: 32rpx;
font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold;
color: #446CD2;
line-height: 50rpx;
margin-left: 24rpx;
}
.fj-slider {
position: relative;
height: 30px;
}
.fj-touch-left,
.fj-touch-right {
position: absolute;
width: 20rpx;
height: 20rpx;
background: #EBEEF3;
border-radius: 50%;
z-index: 3;
}
.tip {
position: absolute;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
top: -60px;
border-radius: 10px;
z-index: 4;
font-size: 10px;
justify-content: center
}
.fj-line,
.fj-line-pull {
height: 5px;
position: absolute;
top: 3px;
left: 0px;
right: 15px;background: #E6E6E6;
width: 682rpx;
border-radius: 4rpx;
z-index: 1;
}
.fj-line-pull {
z-index: 2;
background: #446CD2;
}
</style>
/* eslint-disable */
var allData = [
{
"id":"1",
"name":"北京",
"code":"11",
"children":[
{
"id":"1230040276324601858",
"name":"北京大学",
"code":"10001",
"children":[
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144593367408641",
"name":"广播电视",
"code":"guangbodianshi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
}
]
},
{
"id":"1230040276500762626",
"name":"清华大学",
"code":"10003",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144272230522882",
"name":"雕塑",
"code":"diaosu"
},
{
"id":"1219144319747792898",
"name":"动漫",
"code":"dongman"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144412131532802",
"name":"服装设计",
"code":"fuzhuangsheji"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144498089598978",
"name":"工艺美术",
"code":"gongyimeishu"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219144789576949761",
"name":"绘画",
"code":"huihua"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145078623215618",
"name":"科普硕士",
"code":"kepushuoshi"
},
{
"id":"1219145224144592897",
"name":"染织设计",
"code":"ranzhisheji"
},
{
"id":"1219145386988445697",
"name":"摄影",
"code":"sheying"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145533864583169",
"name":"书法",
"code":"shufa"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1227896860333654018",
"name":"陶瓷陶艺",
"code":"taocitaoyi"
},
{
"id":"1219145760835149826",
"name":"文物修复",
"code":"wenwuxiufu"
},
{
"id":"1219145971510845442",
"name":"信息设计",
"code":"xinxisheji"
},
{
"id":"1219146010878582785",
"name":"信息艺术设计",
"code":"xinxiyishusheji"
},
{
"id":"1219146055183015938",
"name":"艺术管理",
"code":"yishuguanli"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
},
{
"id":"1219146300742737922",
"name":"造型设计",
"code":"zaoxingsheji"
},
{
"id":"1219146338717966338",
"name":"展示设计",
"code":"zhanshisheji"
}
]
},
{
"id":"1230040276454625281",
"name":"北京航空航天大学",
"code":"10006",
"children":[
{
"id":"1219144319747792898",
"name":"动漫",
"code":"dongman"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144789576949761",
"name":"绘画",
"code":"huihua"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
}
]
},
{
"id":"1230040276454625282",
"name":"北京理工大学",
"code":"10007",
"children":[
{
"id":"1227895075556638722",
"name":"不区分",
"code":"buqufen"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145424410025986",
"name":"实验艺术",
"code":"shiyanyishu"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1219146259248488450",
"name":"油画",
"code":"youhua"
}
]
},
{
"id":"1230040276458819585",
"name":"北京师范大学",
"code":"10027",
"children":[
{
"id":"1219144237023535106",
"name":"电影",
"code":"dianying"
},
{
"id":"1219144272230522882",
"name":"雕塑",
"code":"diaosu"
},
{
"id":"1219144593367408641",
"name":"广播电视",
"code":"guangbodianshi"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144789576949761",
"name":"绘画",
"code":"huihua"
},
{
"id":"1219145797497561090",
"name":"舞蹈",
"code":"wudao"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
},
{
"id":"1219146169012232194",
"name":"音乐",
"code":"yinyue"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
},
{
"id":"1219146259248488450",
"name":"油画",
"code":"youhua"
}
]
}
]
},
{
"id":"2",
"name":"天津",
"code":"12",
"children":[
{
"id":"1230040276496568322",
"name":"南开大学",
"code":"10055",
"children":[
{
"id":"1219144412131532802",
"name":"服装设计",
"code":"fuzhuangsheji"
},
{
"id":"1219144547225870338",
"name":"公共艺术",
"code":"gonggongyishu"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219144789576949761",
"name":"绘画",
"code":"huihua"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
}
]
},
{
"id":"1230040276509151235",
"name":"天津大学",
"code":"10056",
"children":[
{
"id":"1227895075556638722",
"name":"不区分",
"code":"buqufen"
},
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
}
]
}
]
},
{
"id":"6",
"name":"辽宁省",
"code":"21",
"children":[
{
"id":"1230040276458819586",
"name":"大连理工大学",
"code":"10141",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219144789576949761",
"name":"绘画",
"code":"huihua"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
}
]
},
{
"id":"1230040276467208193",
"name":"东北大学",
"code":"10145",
"children":[
{
"id":"1219144498089598978",
"name":"工艺美术",
"code":"gongyimeishu"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
}
]
}
]
},
{
"id":"7",
"name":"吉林省",
"code":"22",
"children":[
{
"id":"1230040276492374018",
"name":"吉林大学",
"code":"10183",
"children":[
{
"id":"1227895075556638722",
"name":"不区分",
"code":"buqufen"
},
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
}
]
}
]
},
{
"id":"8",
"name":"黑龙江省",
"code":"23",
"children":[
{
"id":"1230040276479791107",
"name":"哈尔滨工业大学",
"code":"10213",
"children":[
{
"id":"1227895075556638722",
"name":"不区分",
"code":"buqufen"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144498089598978",
"name":"工艺美术",
"code":"gongyimeishu"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
}
]
}
]
},
{
"id":"9",
"name":"上海",
"code":"31",
"children":[
{
"id":"1230040276479791106",
"name":"复旦大学",
"code":"10246",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145345833934850",
"name":"设计学(工科)",
"code":"shejixuegongke"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
}
]
},
{
"id":"1230040276513345537",
"name":"同济大学",
"code":"10247",
"children":[
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
}
]
},
{
"id":"1230040276509151233",
"name":"上海交通大学",
"code":"10248",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
}
]
},
{
"id":"1230040276483985410",
"name":"华东师范大学",
"code":"10269",
"children":[
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144547225870338",
"name":"公共艺术",
"code":"gonggongyishu"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145018980212738",
"name":"景观设计",
"code":"jingguansheji"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
},
{
"id":"1219146055183015938",
"name":"艺术管理",
"code":"yishuguanli"
}
]
}
]
},
{
"id":"10",
"name":"江苏省",
"code":"32",
"children":[
{
"id":"1230040276496568321",
"name":"南京大学",
"code":"10284",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144593367408641",
"name":"广播电视",
"code":"guangbodianshi"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219145116258705409",
"name":"美术教育",
"code":"meishujiaoyu"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
},
{
"id":"1219146169012232194",
"name":"音乐",
"code":"yinyue"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
}
]
},
{
"id":"1230040276471402497",
"name":"东南大学",
"code":"10286",
"children":[
{
"id":"1219144272230522882",
"name":"雕塑",
"code":"diaosu"
},
{
"id":"1219145148403851265",
"name":"美术史",
"code":"meishushi"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
}
]
}
]
},
{
"id":"13",
"name":"福建省",
"code":"35",
"children":[
{
"id":"1230040276504956930",
"name":"厦门大学",
"code":"10384",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145018980212738",
"name":"景观设计",
"code":"jingguansheji"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
},
{
"id":"1219146259248488450",
"name":"油画",
"code":"youhua"
}
]
}
]
},
{
"id":"15",
"name":"山东省",
"code":"37",
"children":[
{
"id":"1230040276504956931",
"name":"山东大学",
"code":"10422",
"children":[
{
"id":"1219144498089598978",
"name":"工艺美术",
"code":"gongyimeishu"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1219145569100931073",
"name":"数字媒体",
"code":"shuzimeiti"
},
{
"id":"1219145843601350658",
"name":"戏剧影视",
"code":"xijuyingshi"
},
{
"id":"1219146169012232194",
"name":"音乐",
"code":"yinyue"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
}
]
}
]
},
{
"id":"18",
"name":"湖南省",
"code":"43",
"children":[
{
"id":"1230040276483985409",
"name":"湖南大学",
"code":"10532",
"children":[
{
"id":"1227895075556638722",
"name":"不区分",
"code":"buqufen"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219145148403851265",
"name":"美术史",
"code":"meishushi"
},
{
"id":"1219145345833934850",
"name":"设计学(工科)",
"code":"shejixuegongke"
},
{
"id":"1219145386988445697",
"name":"摄影",
"code":"sheying"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1219145717432492034",
"name":"文创设计",
"code":"wenchuangsheji"
},
{
"id":"1219146169012232194",
"name":"音乐",
"code":"yinyue"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
}
]
}
]
},
{
"id":"19",
"name":"广东省",
"code":"44",
"children":[
{
"id":"1230040276488179714",
"name":"华南理工大学",
"code":"10561",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219144940915826689",
"name":"交互设计",
"code":"jiaohusheji"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
}
]
}
]
},
{
"id":"23",
"name":"四川省",
"code":"51",
"children":[
{
"id":"1230040276509151234",
"name":"四川大学",
"code":"10610",
"children":[
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144547225870338",
"name":"公共艺术",
"code":"gonggongyishu"
},
{
"id":"1219144454728884225",
"name":"工业设计",
"code":"gongyesheji"
},
{
"id":"1219144667669504001",
"name":"环境设计",
"code":"huanjingsheji"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145345833934850",
"name":"设计学(工科)",
"code":"shejixuegongke"
},
{
"id":"1227896860333654018",
"name":"陶瓷陶艺",
"code":"taocitaoyi"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1227895184327524353",
"name":"音乐舞蹈",
"code":"yinyuewudao"
}
]
}
]
},
{
"id":"28",
"name":"甘肃省",
"code":"62",
"children":[
{
"id":"1230040276492374019",
"name":"兰州大学",
"code":"10730",
"children":[
{
"id":"1219143897435906050",
"name":"壁画",
"code":"bihua"
},
{
"id":"1227895285913567233",
"name":"城乡规划(城市规划)",
"code":"chengxiangguihua"
},
{
"id":"1219144373145477122",
"name":"风景园林",
"code":"fengjingyuanlin"
},
{
"id":"1219144412131532802",
"name":"服装设计",
"code":"fuzhuangsheji"
},
{
"id":"1219144628058497025",
"name":"国画",
"code":"guohua"
},
{
"id":"1219144708824014849",
"name":"环境艺术",
"code":"huanjingyishu"
},
{
"id":"1219144866961858562",
"name":"建筑史",
"code":"jianzhushi"
},
{
"id":"1219144901711667202",
"name":"建筑学",
"code":"jianzhuxue"
},
{
"id":"1219145018980212738",
"name":"景观设计",
"code":"jingguansheji"
},
{
"id":"1219145148403851265",
"name":"美术史",
"code":"meishushi"
},
{
"id":"1219145280591536130",
"name":"设计史",
"code":"shejishi"
},
{
"id":"1219145461957435394",
"name":"视觉传达",
"code":"shijuechuanda"
},
{
"id":"1227895002827407361",
"name":"停招",
"code":"tingzhao"
},
{
"id":"1219146134597967873",
"name":"艺术学理论",
"code":"yishuxuelilun"
}
]
}
]
}
]
export default allData;
\ No newline at end of file
<template>
<view class="">
<view class="dsds" v-if="showPopup" @click="showPopup = false"> </view>
<view class="linkage" v-if="showPopup" @touchmove.stop.prevent="clear">
<!-- 遮罩层 -->
<view class="linkage-content linkage--fixed">
<view class="linkage__header">
选择城市
</view>
<view class="linkage__box">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class"
class="linkage-view" :mask-style="fsdfds" :value="pickerValue" @change="pickerChange">
<picker-view-column>
<view class="picker-item" style="height: 92rpx;" v-for="(item,index) in firstLevel"
:key="index" :class="one==index?'lldl':''">{{item.name}}</view>
</picker-view-column>
<picker-view-column v-if="secondShow">
<view class="picker-item" v-for="(item,index) in secondLevel" :key="index"
:class="two==index?'lldl':''">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="button" @click="com">
确定
</view>
<view class="" style="height: 54rpx;">
</view>
</view>
</view>
<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
</view>
</template>
<script>
import allData from './data-info/level-data.js';
import ELM from '@/components/elm-toast/index.vue';
export default {
name: "levelLinkage",
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
/* 弹出层类型,可选值;
bottom:底部弹出层
*/
type: {
type: String,
default: 'bottom'
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
},
maskBgColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)', //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
},
themeColor: {
type: String,
default: '', // 主题色
},
/* 默认值 */
pickerValueDefault: {
type: Array,
default () {
return [0, 0]
}
},
},
data() {
return {
indicatorStyle: `height: 45px;color: rgba(51, 51, 51, 0.2);`,
fsdfds: `opacity: 0.5;font-weight: 600;background: rgba(238, 245, 254, 0);`,
secondShow: false,
thirdShow: false,
ani: '',
showPopup: false,
pickerValue: [0, 0],
firstLevel: [],
secondLevel: [],
thirdLevel: [],
one: 0,
two: 0,
emptyList: [{
id: "",
name: "",
code: "",
"children": []
}],
erji: "",
obj: {},
num: '',
tipMsg: '',
isConfirm: false
}
},
watch: {
show(newValue) {
if (newValue) {
this.open()
} else {
this.close()
}
},
pickerValueDefault() {
this.init();
}
},
components: {
ELM
},
created() {
this.init()
this.pulls()
},
methods: {
async pulls() {
const res = await this.$myRequest({
url: 'nostalgia/area/province',
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.firstLevel = res.data.data
this.erji = this.firstLevel[0].regionCode
this.pullings()
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
async pullings() {
this.two = 0
const res = await this.$myRequest({
url: 'nostalgia/area/son',
data: {
parentCode: this.erji
},
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.secondLevel = res.data.data
this.obj.parentCode1 = this.firstLevel[this.one].parentCode
this.obj.regionCode1 = this.firstLevel[this.one].regionCode
this.obj.regionName1 = this.firstLevel[this.one].regionName
this.obj.parentCode2 = this.secondLevel[0].parentCode
this.obj.regionCode2 = this.secondLevel[0].regionCode
this.obj.regionName2 = this.secondLevel[0].regionName
this.obj.nameing = this.obj.regionName1 + '-' + this.secondLevel[0].regionName
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
init() {
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
this.firstLevel = allData;
this.secondShow = this.pickerValueDefault[1] >= 0 ? true : false;
this.thirdShow = this.pickerValueDefault[2] >= 0 ? true : false;;
if (this.secondShow) {
this.secondLevel = this.firstLevel[this.pickerValueDefault[0]].children.length == 0 ?
this.emptyList : this.firstLevel[this.pickerValueDefault[0]].children;
} else {
this.thirdShow = false;
}
if (this.thirdShow) {
this.thirdLevel = this.secondLevel[this.pickerValueDefault[1]].children.length == 0 ?
this.emptyList : this.secondLevel[this.pickerValueDefault[1]].children;
}
this.pickerValue = this.pickerValueDefault;
},
handPickValueDefault() {
if (this.pickerValueDefault !== [0, 0, 0]) {
if (this.pickerValueDefault[0] > allData.length - 1) {
this.pickerValueDefault[0] = allData.length - 1;
}
if (this.secondShow && this.pickerValueDefault[1] > allData[this.pickerValueDefault[0]].children
.length - 1) {
this.pickerValueDefault[1] = allData[this.pickerValueDefault[0]].children.length - 1;
}
if (this.thirdShow &&
this.pickerValueDefault[2] >
allData[this.pickerValueDefault[0]].children[this.pickerValueDefault[1]].children.length - 1) {
this.pickerValueDefault[2] = allData[this.pickerValueDefault[0]].children[this.pickerValueDefault[
1]].children.length - 1;
}
}
},
pickerChange(e) {
console.log(e)
this.one = e.detail.value[0]
this.two = e.detail.value[1]
let changePickerValue = e.detail.value;
if (this.pickerValue[0] !== changePickerValue[0]) {
// 第一级发生滚动
if (this.secondShow) {
this.secondLevel = this.firstLevel[changePickerValue[0]].children == 0 ?
this.emptyList : this.firstLevel[changePickerValue[0]].children;
changePickerValue[1] = 0;
}
this.erji = this.firstLevel[this.one].regionCode
this.pullings()
} else if (this.pickerValue[1] !== changePickerValue[1]) {
// 第二级滚动
if (this.thirdShow) {
this.thirdLevel = this.secondLevel[changePickerValue[1]].children == 0 ?
this.emptyList : this.secondLevel[changePickerValue[1]].children;
changePickerValue[2] = 0;
}
}
this.pickerValue = changePickerValue;
this.obj.name1 = this.firstLevel[this.pickerValue[0]].name
this.obj.parentCode1 = this.firstLevel[this.pickerValue[0]].parentCode
this.obj.regionCode1 = this.firstLevel[this.pickerValue[0]].regionCode
this.obj.regionName1 = this.firstLevel[this.pickerValue[0]].regionName
this.obj.parentCode2 = this.secondLevel[this.pickerValue[1]].parentCode
this.obj.regionCode2 = this.secondLevel[this.pickerValue[1]].regionCode
this.obj.regionName2 = this.secondLevel[this.pickerValue[1]].regionName
this.obj.name2 = this.secondLevel[this.pickerValue[1]].name
this.obj.nameing = this.firstLevel[this.pickerValue[0]].name + '-' + this.secondLevel[this.pickerValue[1]]
.regionName
console.log(this.obj, this.pickerValue)
},
_$emit(emitName) {
// 自定义选中项,选中内容
let firstPick = {};
let secondPick = {};
let thirdPick = {};
firstPick = {
id: this._getFirst().id,
name: this._getFirst().name,
code: this._getFirst().code
}
if (this.secondShow) {
secondPick = {
id: this._getSecond().id,
name: this._getSecond().name,
code: this._getSecond().code
}
}
if (this.thirdShow) {
thirdPick = {
id: this._getThird().id,
name: this._getThird().name,
code: this._getThird().code
}
}
let pickObj = {
name: this._getLabel(),
value: this.pickerValue,
secondPick: secondPick,
thirdPick: thirdPick,
firstPick: firstPick
};
this.$emit(emitName, pickObj);
},
_getLabel() {
let pcikerLabel =
this.firstLevel[this.pickerValue[0]].name;
if (this.secondShow) {
pcikerLabel = pcikerLabel + '-' +
this.secondLevel[this.pickerValue[1]].name
}
if (this.thirdShow) {
pcikerLabel = pcikerLabel + '-' +
this.thirdLevel[this.pickerValue[2]].name;
}
return pcikerLabel;
},
_getSecond() {
if (this.secondShow) {
return this.secondLevel[this.pickerValue[1]];
}
return this.emptyList;
},
_getFirst() {
return this.firstLevel[this.pickerValue[0]];
},
_getThird() {
if (this.thirdShow) {
return this.thirdLevel[this.pickerValue[2]];
}
return this.emptyList;
},
clear() {
},
com() {
console.log(this.obj, "=====================")
this.obj.num = this.num
this.$emit('take', this.obj);
this.close();
},
hideMask() {
this._$emit('onCancel');
this.close();
},
pickerCancel() {
this._$emit('onCancel');
this.close();
},
pickerConfirm() {
this._$emit('onConfirm');
this.close();
},
open(e) {
console.log(e)
this.num = e
this.showPopup = true
},
close(type) {
this.showPopup = false
}
}
}
</script>
<style lang="scss" scoped>
.button {
width: 614rpx;
height: 84rpx;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
margin: 0 auto;
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415C9E;
display: flex;
align-items: center;
justify-content: center;
line-height: 84rpx;
margin-top: 38rpx;
}
/deep/ .indicator-class {
background: #EEF5FE;
z-index: -1;
}
.linkage {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.linkage-mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
transition-property: opacity;
transition-duration: 0.5s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.mask-ani {
transition-property: opacity;
transition-duration: 0s;
}
.linkage-c-bottom-mask {
opacity: 1;
}
.linkage-c-center-mask {
opacity: 1;
}
.linkage--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
border-radius: 36rpx 36rpx 0px 0px;
}
.linkage-content {
background-color: #FFFFFF;
}
.linkage-c-content-bottom {
bottom: 0;
left: 0;
right: 0;
transform: translateY(500rpx);
}
.content-ani {
transition-property: transform, opacity;
transition-duration: 0.1s;
}
.linkage-c-bottom-content {
transform: translateY(0);
}
.linkage-c-center-content {
transform: scale(1);
opacity: 1;
}
.linkage__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
font-size: 32rpx;
// font-family: 'PingFang SC-Heavy, PingFang SC';
font-weight: 800;
color: #333333;
line-height: 32rpx;
margin: 38rpx 0;
}
.linkage--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1rpx;
}
/*弹窗遮罩层*/
.dsds::before {
content: "";
cursor: default;
z-index: 22;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.linkage__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 92rpx;
}
.linkage__header-text {
text-align: center;
font-size: $uni-font-size-base;
color: #1aad19;
line-height: 70rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.linkage__box {
position: relative;
height: 460rpx;
}
.linkage-view {
position: relative;
bottom: 0;
left: 0;
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
height: 460rpx;
background-color: rgba(255, 255, 255, 1);
}
.picker-item {
text-align: center;
line-height: 92rpx;
height: 45px !important;
text-overflow: ellipsis;
font-size: 36rpx;
// font-family: 'PingFang SC-Regular, PingFang SC';
color: #B8B8B8;
z-index: 11;
opacity: 1;
font-weight: 400;
}
.lldl {
// font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #434343;
}
</style>
\ No newline at end of file
<template>
<view class="">
<view class="dsds" v-if="showPopup" @click="showPopup = false"> </view>
<view class="linkage" v-if="showPopup" @touchmove.stop.prevent="clear">
<!-- 遮罩层 -->
<view class="linkage-content linkage--fixed">
<view class="linkage__header">
选择城市
</view>
<view class="linkage__box">
<picker-view :indicator-style="indicatorStyle" indicator-class="indicator-class"
class="linkage-view" :mask-style="fsdfds" :value="pickerValue" @change="pickerChange">
<picker-view-column>
<view class="picker-item" style="height: 92rpx;" v-for="(item,index) in firstLevel"
:key="index" :class="one==index?'lldl':''">{{item.name}}</view>
</picker-view-column>
<picker-view-column v-if="secondShow">
<view class="picker-item" v-for="(item,index) in secondLevel" :key="index"
:class="two==index?'lldl':''">{{item.name}}</view>
</picker-view-column>
</picker-view>
</view>
<view class="button" @click="com">
确定
</view>
<view class="" style="height: 54rpx;">
</view>
</view>
</view>
<ELM ref="elm" :msg="tipMsg" :isConfirm="isConfirm" @confirm="confirm"></ELM>
</view>
</template>
<script>
import ELM from '@/components/elm-toast/index.vue';
export default {
name: "levelLinkage",
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
/* 弹出层类型,可选值;
bottom:底部弹出层
*/
type: {
type: String,
default: 'bottom'
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
},
maskBgColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)', //背景颜色 rgba(0, 0, 0, 0.4) 为空则调用 uni.scss
},
themeColor: {
type: String,
default: '', // 主题色
},
/* 默认值 */
pickerValueDefault: {
type: Array,
default () {
return [0, 0]
}
},
},
data() {
return {
indicatorStyle: `height: 45px;color: rgba(51, 51, 51, 0.2);`,
fsdfds: `opacity: 0.5;font-weight: 600;background: rgba(238, 245, 254, 0);`,
secondShow: false,
thirdShow: false,
ani: '',
showPopup: false,
pickerValue: [0, 0],
firstLevel: [],
secondLevel: [],
thirdLevel: [],
one: 0,
two: 0,
emptyList: [{
id: "",
name: "",
code: "",
"children": []
}],
erji: "",
obj: {},
num: '',
tipMsg: '',
isConfirm: false
}
},
components: {
ELM
},
watch: {
show(newValue) {
if (newValue) {
this.open()
} else {
this.close()
}
},
pickerValueDefault() {
this.init();
}
},
created() {
this.pull()
this.init()
},
methods: {
async pull() {
this.one = 0
this.two = 0
this.firstLevel = []
const res = await this.$myRequest({
url: 'nostalgia/area/province',
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.firstLevel = res.data.data
this.erji = res.data.data[0].regionCode
this.pulling()
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
async pulls(obj) {
this.one = 0
this.two = 0
this.firstLevel = []
console.log(obj, "[[[[[[]]]]]]")
obj.name = obj.regionName
const res = await this.$myRequest({
url: 'nostalgia/area/province',
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.firstLevel = res.data.data
for (var i = 0; i < this.firstLevel.length; i++) {
if (this.firstLevel[i].regionName === obj.regionName) {
this.firstLevel.splice(i, 1);
break;
}
}
this.firstLevel.unshift(obj);
this.erji = this.firstLevel[0].regionCode
this.obj.index = obj.index
this.pullings()
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
async pullings() {
this.two = 0
const res = await this.$myRequest({
url: 'nostalgia/area/son',
data: {
parentCode: this.erji
},
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.secondLevel = res.data.data
this.obj.parentCode1 = this.firstLevel[this.one].parentCode
this.obj.regionCode1 = this.firstLevel[this.one].regionCode
this.obj.regionName1 = this.firstLevel[this.one].regionName
this.obj.parentCode2 = this.secondLevel[0].parentCode
this.obj.regionCode2 = this.secondLevel[0].regionCode
this.obj.regionName2 = this.secondLevel[0].regionName
this.obj.nameing = this.obj.regionName1 + '-' + this.secondLevel[0].regionName
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
async pulling() {
this.two = 0
const res = await this.$myRequest({
url: 'nostalgia/area/son',
data: {
parentCode: this.erji
},
method: 'GET',
});
console.log(res, 'delshoucang');
if (res.data.code == 200) {
res.data.data.forEach((item, index) => {
item.name = item.regionName
})
this.secondLevel = res.data.data
console.log(this.firstLevel[this.one].regionName, this.secondLevel[0].regionName, "pppppppppppppp")
this.obj.parentCode1 = this.firstLevel[this.one].parentCode
this.obj.regionCode1 = this.firstLevel[this.one].regionCode
this.obj.regionName1 = this.firstLevel[this.one].regionName
this.obj.parentCode2 = this.secondLevel[0].parentCode
this.obj.regionCode2 = this.secondLevel[0].regionCode
this.obj.regionName2 = this.secondLevel[0].regionName
this.obj.nameing = this.obj.regionName1 + '-' + this.obj.regionName2
} else {
this.tipMsg = res.data.msg;
this.$refs.elm.showDialog();
}
},
init() {
this.handPickValueDefault(); // 对 pickerValueDefault 做兼容处理
this.firstLevel = allData;
this.secondShow = this.pickerValueDefault[1] >= 0 ? true : false;
this.thirdShow = this.pickerValueDefault[2] >= 0 ? true : false;;
if (this.secondShow) {
this.secondLevel = this.firstLevel[this.pickerValueDefault[0]].children.length == 0 ?
this.emptyList : this.firstLevel[this.pickerValueDefault[0]].children;
} else {
this.thirdShow = false;
}
if (this.thirdShow) {
this.thirdLevel = this.secondLevel[this.pickerValueDefault[1]].children.length == 0 ?
this.emptyList : this.secondLevel[this.pickerValueDefault[1]].children;
}
this.pickerValue = this.pickerValueDefault;
},
handPickValueDefault() {
if (this.pickerValueDefault !== [0, 0, 0]) {
if (this.pickerValueDefault[0] > allData.length - 1) {
this.pickerValueDefault[0] = allData.length - 1;
}
if (this.secondShow && this.pickerValueDefault[1] > allData[this.pickerValueDefault[0]].children
.length - 1) {
this.pickerValueDefault[1] = allData[this.pickerValueDefault[0]].children.length - 1;
}
if (this.thirdShow &&
this.pickerValueDefault[2] >
allData[this.pickerValueDefault[0]].children[this.pickerValueDefault[1]].children.length - 1) {
this.pickerValueDefault[2] = allData[this.pickerValueDefault[0]].children[this.pickerValueDefault[
1]].children.length - 1;
}
}
},
pickerChange(e) {
console.log(e)
this.one = e.detail.value[0]
this.two = e.detail.value[1]
let changePickerValue = e.detail.value;
if (this.pickerValue[0] !== changePickerValue[0]) {
// 第一级发生滚动
if (this.secondShow) {
this.secondLevel = this.firstLevel[changePickerValue[0]].children == 0 ?
this.emptyList : this.firstLevel[changePickerValue[0]].children;
changePickerValue[1] = 0;
}
this.erji = this.firstLevel[this.one].regionCode
this.pulling()
} else if (this.pickerValue[1] !== changePickerValue[1]) {
// 第二级滚动
if (this.thirdShow) {
this.thirdLevel = this.secondLevel[changePickerValue[1]].children == 0 ?
this.emptyList : this.secondLevel[changePickerValue[1]].children;
changePickerValue[2] = 0;
}
}
this.pickerValue = changePickerValue;
this.obj.name1 = this.firstLevel[this.pickerValue[0]].name
this.obj.parentCode1 = this.firstLevel[this.pickerValue[0]].parentCode
this.obj.regionCode1 = this.firstLevel[this.pickerValue[0]].regionCode
this.obj.regionName1 = this.firstLevel[this.pickerValue[0]].regionName
this.obj.parentCode2 = this.secondLevel[this.pickerValue[1]].parentCode
this.obj.regionCode2 = this.secondLevel[this.pickerValue[1]].regionCode
this.obj.regionName2 = this.secondLevel[this.pickerValue[1]].regionName
this.obj.name2 = this.secondLevel[this.pickerValue[1]].name
this.obj.nameing = this.firstLevel[this.pickerValue[0]].name + '-' + this.secondLevel[this.pickerValue[1]]
.regionName
console.log(this.obj, this.pickerValue)
},
_$emit(emitName) {
// 自定义选中项,选中内容
let firstPick = {};
let secondPick = {};
let thirdPick = {};
firstPick = {
id: this._getFirst().id,
name: this._getFirst().name,
code: this._getFirst().code
}
if (this.secondShow) {
secondPick = {
id: this._getSecond().id,
name: this._getSecond().name,
code: this._getSecond().code
}
}
if (this.thirdShow) {
thirdPick = {
id: this._getThird().id,
name: this._getThird().name,
code: this._getThird().code
}
}
let pickObj = {
name: this._getLabel(),
value: this.pickerValue,
secondPick: secondPick,
thirdPick: thirdPick,
firstPick: firstPick
};
this.$emit(emitName, pickObj);
},
_getLabel() {
let pcikerLabel =
this.firstLevel[this.pickerValue[0]].name;
if (this.secondShow) {
pcikerLabel = pcikerLabel + '-' +
this.secondLevel[this.pickerValue[1]].name
}
if (this.thirdShow) {
pcikerLabel = pcikerLabel + '-' +
this.thirdLevel[this.pickerValue[2]].name;
}
return pcikerLabel;
},
_getSecond() {
if (this.secondShow) {
return this.secondLevel[this.pickerValue[1]];
}
return this.emptyList;
},
_getFirst() {
return this.firstLevel[this.pickerValue[0]];
},
_getThird() {
if (this.thirdShow) {
return this.thirdLevel[this.pickerValue[2]];
}
return this.emptyList;
},
clear() {
},
com() {
console.log(this.obj, "=====================")
this.obj.num = this.num
this.$emit('take', this.obj);
this.close();
},
hideMask() {
this._$emit('onCancel');
this.close();
},
pickerCancel() {
this._$emit('onCancel');
this.close();
},
pickerConfirm() {
this._$emit('onConfirm');
this.close();
},
open(e) {
console.log(e)
this.num = e
this.showPopup = true
if (e !== '1') {
} else {
this.pull()
}
},
close(type) {
this.showPopup = false
}
}
}
</script>
<style lang="scss" scoped>
.button {
width: 614rpx;
height: 84rpx;
background: linear-gradient(86deg, #C2D2F9 0%, #C5C2F3 100%);
border-radius: 42rpx;
margin: 0 auto;
font-size: 28rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #415C9E;
display: flex;
align-items: center;
justify-content: center;
line-height: 84rpx;
margin-top: 38rpx;
}
/deep/ .indicator-class {
background: #EEF5FE;
z-index: -1;
}
.linkage {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.linkage-mask {
position: fixed;
bottom: 0;
top: 0;
left: 0;
right: 0;
transition-property: opacity;
transition-duration: 0.5s;
opacity: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
}
.mask-ani {
transition-property: opacity;
transition-duration: 0s;
}
.linkage-c-bottom-mask {
opacity: 1;
}
.linkage-c-center-mask {
opacity: 1;
}
.linkage--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
border-radius: 36rpx 36rpx 0px 0px;
}
.linkage-content {
background-color: #FFFFFF;
}
.linkage-c-content-bottom {
bottom: 0;
left: 0;
right: 0;
transform: translateY(500rpx);
}
.content-ani {
transition-property: transform, opacity;
transition-duration: 0.1s;
}
.linkage-c-bottom-content {
transform: translateY(0);
}
.linkage-c-center-content {
transform: scale(1);
opacity: 1;
}
.linkage__header {
position: relative;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
font-size: 32rpx;
font-family: 'PingFang SC-Heavy, PingFang SC';
font-weight: 800;
color: #333333;
line-height: 32rpx;
margin: 38rpx 0;
}
.linkage--fixed-top {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
justify-content: space-between;
border-top-color: $uni-border-color;
border-top-style: solid;
border-top-width: 1rpx;
}
/*弹窗遮罩层*/
.dsds::before {
content: "";
cursor: default;
z-index: 22;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.linkage__header-btn-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
height: 92rpx;
}
.linkage__header-text {
text-align: center;
font-size: $uni-font-size-base;
color: #1aad19;
line-height: 70rpx;
padding-left: 40rpx;
padding-right: 40rpx;
}
.linkage__box {
position: relative;
height: 460rpx;
}
.linkage-view {
position: relative;
bottom: 0;
left: 0;
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
height: 460rpx;
background-color: rgba(255, 255, 255, 1);
}
.picker-item {
text-align: center;
line-height: 92rpx;
height: 92rpx !important;
text-overflow: ellipsis;
font-size: 36rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
color: #B8B8B8;
z-index: 11;
opacity: 1;
font-weight: 400;
}
.lldl {
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #434343;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment