招聘页面优化
This commit is contained in:
dengxin
302
components/vertical-menu/classifyData.js
Normal file
302
components/vertical-menu/classifyData.js
Normal file
@@ -0,0 +1,302 @@
|
||||
export default [
|
||||
{
|
||||
name: "年龄",
|
||||
foods: [
|
||||
{
|
||||
name: "不限年龄",
|
||||
key: "不限年龄",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "30以下",
|
||||
key: "30",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "35以下",
|
||||
key: "35",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "40以下",
|
||||
key: "40",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "45以下",
|
||||
key: "45",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "50以下",
|
||||
key: "50",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "55以下",
|
||||
key: "55",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "60以下",
|
||||
key: "60",
|
||||
cat: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "学历",
|
||||
foods: [
|
||||
{
|
||||
name: "学历不限",
|
||||
key: "学历不限",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "初中及以下",
|
||||
key: "初中及以下",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "中专及中技",
|
||||
key: "中专及中技",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "高中",
|
||||
key: "高中",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "大专",
|
||||
key: "大专",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "本科及以上",
|
||||
key: "本科及以上",
|
||||
cat: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工资",
|
||||
foods: [
|
||||
{
|
||||
name: "薪资不限",
|
||||
key: "薪资不限",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "100-150/天",
|
||||
key: "100-150/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "151-200/天",
|
||||
key: "151-200/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "201-250/天",
|
||||
key: "201-250/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "251-300/天",
|
||||
key: "251-300/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "300元/天以上",
|
||||
key: "300元/天以上",
|
||||
cat: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工资",
|
||||
foods: [
|
||||
{
|
||||
name: "薪资不限",
|
||||
key: "薪资不限",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "100-150/天",
|
||||
key: "100-150/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "151-200/天",
|
||||
key: "151-200/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "201-250/天",
|
||||
key: "201-250/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "251-300/天",
|
||||
key: "251-300/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "300元/天以上",
|
||||
key: "300元/天以上",
|
||||
cat: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "年龄",
|
||||
foods: [
|
||||
{
|
||||
name: "不限年龄",
|
||||
key: "不限年龄",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "30以下",
|
||||
key: "30",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "35以下",
|
||||
key: "35",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "40以下",
|
||||
key: "40",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "45以下",
|
||||
key: "45",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "50以下",
|
||||
key: "50",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "55以下",
|
||||
key: "55",
|
||||
cat: 10,
|
||||
},
|
||||
{
|
||||
name: "60以下",
|
||||
key: "60",
|
||||
cat: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "学历",
|
||||
foods: [
|
||||
{
|
||||
name: "学历不限",
|
||||
key: "学历不限",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "初中及以下",
|
||||
key: "初中及以下",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "中专及中技",
|
||||
key: "中专及中技",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "高中",
|
||||
key: "高中",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "大专",
|
||||
key: "大专",
|
||||
cat: 6,
|
||||
},
|
||||
{
|
||||
name: "本科及以上",
|
||||
key: "本科及以上",
|
||||
cat: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工资",
|
||||
foods: [
|
||||
{
|
||||
name: "薪资不限",
|
||||
key: "薪资不限",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "100-150/天",
|
||||
key: "100-150/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "151-200/天",
|
||||
key: "151-200/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "201-250/天",
|
||||
key: "201-250/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "251-300/天",
|
||||
key: "251-300/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "300元/天以上",
|
||||
key: "300元/天以上",
|
||||
cat: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "工资",
|
||||
foods: [
|
||||
{
|
||||
name: "薪资不限",
|
||||
key: "薪资不限",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "100-150/天",
|
||||
key: "100-150/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "151-200/天",
|
||||
key: "151-200/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "201-250/天",
|
||||
key: "201-250/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "251-300/天",
|
||||
key: "251-300/天",
|
||||
cat: 3,
|
||||
},
|
||||
{
|
||||
name: "300元/天以上",
|
||||
key: "300元/天以上",
|
||||
cat: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
364
components/vertical-menu/vertical-menu.vue
Normal file
364
components/vertical-menu/vertical-menu.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="u-wrap">
|
||||
<view class="u-menu-wrap">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
||||
:scroll-into-view="itemId">
|
||||
<view v-for="(item, index) in tabbar" :key="index" class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
||||
<text class="u-line-1">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
|
||||
@scroll="rightScroll">
|
||||
<view class="page-view">
|
||||
<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
|
||||
<view class="item-title">
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="item-container">
|
||||
<view @click="clickFunc" class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
|
||||
<view class="item-menu-name">{{ item1.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- <view class="text-area">
|
||||
<text class="title" @click="areaModal.addressShow=true">{{areaModal.address}}</text>
|
||||
</view> -->
|
||||
<data-picker :show="areaModal.addressShow" @confirm='confirmAddress' @cancel='areaModal.addressShow = false'
|
||||
@close='areaModal.addressShow = false' :defaultNames="areaModal.defaultNames" :indexs="areaModal.indexs"
|
||||
:defaultIds="areaModal.defaultIds" :showToolbar="false" :showBottombar="true"
|
||||
:labelName="areaModal.labelName"></data-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import classifyData from './classifyData.js';
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
// vTabs,
|
||||
// companyList, verticalMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
oldScrollTop: 0,
|
||||
current: 0,
|
||||
menuHeight: 0,
|
||||
menuItemHeight: 0,
|
||||
itemId: "0",
|
||||
tabbar: classifyData,
|
||||
menuItemPos: 0,
|
||||
arr: [],
|
||||
scrollRightTop: 0,
|
||||
timer: null,
|
||||
|
||||
|
||||
areaModal: {
|
||||
address: '',
|
||||
addressShow: false,
|
||||
title: 'Hello',
|
||||
// indexs: [0, 0, 8],
|
||||
// defaultIds: [1, 110000, 110106],
|
||||
defaultNames: ['北京市', '北京市', '房山区'],
|
||||
labelName: "areaName"
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['area'])
|
||||
},
|
||||
onLoad: function () {
|
||||
console.log("0000000000000000000");
|
||||
this.getMenuItemTop()
|
||||
console.log(this.area, '--------------------');
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (index == this.current) return;
|
||||
this.scrollRightTop = this.oldScrollTop;
|
||||
this.$nextTick(() => {
|
||||
this.scrollRightTop = this.arr[index];
|
||||
// scrollRightTop = newarrTop
|
||||
this.current = index;
|
||||
this.leftMenuStatus(index);
|
||||
})
|
||||
},
|
||||
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
// const query = uni.createSelectorQuery().in(this);
|
||||
const query = uni.createSelectorQuery()
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
if (dataVal == 'menuHeight') {
|
||||
this.menuHeight = res.height;
|
||||
}
|
||||
if (dataVal == 'menuItemHeight') {
|
||||
this.menuItemHeight = res.height;
|
||||
}
|
||||
|
||||
resolve();
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
|
||||
// 观测元素相交状态
|
||||
async observer() {
|
||||
this.tabbar.map((val, index) => {
|
||||
let observer = uni.createIntersectionObserver(this);
|
||||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||||
observer.relativeTo('.right-box', {
|
||||
top: 0
|
||||
}).observe('#item' + index, res => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
let id = res.id.substring(4);
|
||||
this.leftMenuStatus(id);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 设置左边菜单的滚动状态
|
||||
async leftMenuStatus(index) {
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
console.log(index, this.arr[index]);
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
|
||||
// 右边菜单滚动
|
||||
async rightScroll(e) {
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (this.timer) return;
|
||||
if (!this.menuHeight) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
}
|
||||
setTimeout(() => { // 节流
|
||||
this.timer = null;
|
||||
// scrollHeight为右边菜单垂直中点位置
|
||||
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
let height1 = this.arr[i];
|
||||
let height2 = this.arr[i + 1];
|
||||
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
this.leftMenuStatus(i - 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, 50)
|
||||
},
|
||||
|
||||
// 获取右边菜单每个item到顶部的距离
|
||||
getMenuItemTop() {
|
||||
new Promise(resolve => {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
console.log(selectorQuery);
|
||||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||||
console.log(rects);
|
||||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||||
if (!rects.length) {
|
||||
setTimeout(() => {
|
||||
this.getMenuItemTop();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
rects.forEach((rect) => {
|
||||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||||
this.arr.push(rect.top - rects[0].top);
|
||||
resolve();
|
||||
})
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
clickFunc(e) {
|
||||
console.log(e);
|
||||
this.show = true;
|
||||
this.areaModal.addressShow = true
|
||||
},
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
value,
|
||||
values, // values为当前变化列的数组内容
|
||||
index,
|
||||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||||
picker = this.$refs.uPicker
|
||||
} = e
|
||||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||||
if (columnIndex === 0) {
|
||||
// picker为选择器this实例，变化第二列对应的选项
|
||||
picker.setColumnValues(1, this.columnData[index])
|
||||
}
|
||||
},
|
||||
|
||||
confirmAddress(val) {
|
||||
console.log(val);
|
||||
var valArr = val.value;
|
||||
this.areaModal.address = [...new Set(val.value)].join('')
|
||||
this.areaModal.addressShow = false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.u-search-box {
|
||||
padding: 18rpx 30rpx;
|
||||
}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 100;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: #ccc;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: #000;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid skyblue;
|
||||
height: 32rpx;
|
||||
left: 0;
|
||||
top: 39rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
padding: 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.class-item:last-child {
|
||||
// min-height: 100vh;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 43%;
|
||||
line-height: 70rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
margin-left: 20rpx;
|
||||
background-color: #f3f4f8;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,20 @@
|
||||
<template>
|
||||
<view>
|
||||
<v-tabs :tabs="['最新','附近','推荐']" height="45px" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rpx"
|
||||
activeFontSize="36rpx" @change='changeTab' />
|
||||
|
||||
<!-- 筛选 -->
|
||||
<view class="screenButton" @click="showPopUp = true">
|
||||
筛选
|
||||
<view class="arrow-up-right">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<u-popup :show="showPopUp" mode="right" @close="closePopUp" @open="openPopUp">
|
||||
<view class="popUpWrapper">
|
||||
<verticalMenu></verticalMenu>
|
||||
</view>
|
||||
</u-popup>
|
||||
<v-tabs :tabs="['最新', '附近', '推荐']" height="45px" v-model="activeTab" color="#999" activeColor="#000"
|
||||
fontSize="36rpx" activeFontSize="36rpx" @change='changeTab' />
|
||||
<image src="../../static/img/search.svg" @click="goSeach" class="topseach" mode=""></image>
|
||||
|
||||
<block v-if="activeTab == 0">
|
||||
@@ -77,10 +90,11 @@
|
||||
import {
|
||||
getcoder
|
||||
} from "@/api/map.js";
|
||||
import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';
|
||||
export default {
|
||||
components: {
|
||||
vTabs,
|
||||
companyList
|
||||
companyList, verticalMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -109,7 +123,14 @@
|
||||
longitude: 0
|
||||
},
|
||||
key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
|
||||
open:false
|
||||
open: false,
|
||||
showPopUp: false,
|
||||
indexList: ["年龄", "学历", "工资"],
|
||||
itemArr: [
|
||||
['列表A1', '列表A2', '列表A3'],
|
||||
['列表B1', '列表B2', '列表B3'],
|
||||
['列表C1', '列表C2', '列表C3'],
|
||||
]
|
||||
}
|
||||
},
|
||||
onLoad: function () {
|
||||
@@ -328,12 +349,47 @@
|
||||
this.getRecommendList();
|
||||
this.getNewList();
|
||||
}
|
||||
},
|
||||
|
||||
openPopUp() {
|
||||
// console.log('open');
|
||||
},
|
||||
closePopUp() {
|
||||
this.showPopUp = false
|
||||
// console.log('close');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.screenButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
z-index: 1;
|
||||
left: 30rpx;
|
||||
/* border: 1px solid black; */
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
background-color: #f3f4f8;
|
||||
}
|
||||
|
||||
.arrow-up-right {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid #949396;
|
||||
/* 这里的颜色可以根据你的需要进行修改 */
|
||||
border-bottom: 10px solid transparent;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.topseach {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@@ -402,4 +458,8 @@
|
||||
background: #f6f6f6;
|
||||
height: 20rpx;
|
||||
}
|
||||
|
||||
.popUpWrapper {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
43
uni_modules/data-picker/changelog.md
Normal file
43
uni_modules/data-picker/changelog.md
Normal file
@@ -0,0 +1,43 @@
|
||||
## 1.0.5（2023-06-29）
|
||||
FIX
|
||||
|
||||
修复选择器在支付宝小程序的样式兼容问题
|
||||
## 1.0.4（2023-06-27）
|
||||
|
||||
支持异步加载数据，动态页面渲染，可动态修改indexs，defaultIds，defaultNames，sourceData。使用时父页面直接修改数据即可，具体可看示例
|
||||
## 1.0.3（2023-06-27）
|
||||
|
||||
新增了initBack属性，默认为true，返回根据默认值加载的数据，相当于初始化后手动点了一次确认，获取数据同样在confirm里面，具体可看示例
|
||||
## 1.0.2（2023-06-26）
|
||||
|
||||
FIX
|
||||
|
||||
修复vue2中的语法警告
|
||||
|
||||
修复小程序中的样式兼容问题
|
||||
|
||||
ADD
|
||||
|
||||
考虑到业务复杂性，返回数据中新增了所选择的对象
|
||||
## 1.0.1（2023-06-21）
|
||||
|
||||
当对象显示属性不是name时，支持自定义修改显示的属性名，eg：
|
||||
我要显示对象中的areaName属性，我可以设置labelName="areaName"
|
||||
具体使用可以看示例工程
|
||||
|
||||
## 1.0.0（2023-06-20）
|
||||
基于uview封装的级联选择器，内置的地区数据
|
||||
|
||||
支持单列，多列，自动识别层级
|
||||
|
||||
支持自动去除重复名称：北京市-北京市-东城区---->北京市东城区
|
||||
|
||||
支持操作按钮显示在顶部，或者底部
|
||||
|
||||
支持三种模式传递默认值，如下
|
||||
|
||||
index:[0,0,7],
|
||||
|
||||
defaultIds: [1, 110000, 110106],
|
||||
|
||||
defaultNames: ['北京市', '北京市', '房山区']
|
||||
293
uni_modules/data-picker/components/data-picker/data-picker.vue
Normal file
293
uni_modules/data-picker/components/data-picker/data-picker.vue
Normal file
@@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<u-picker-plus :show="show" ref="uPicker" :title="title" :showToolbar="showToolbar" :itemHeight="itemHeight"
|
||||
:cancelText="cancelText" :cancelColor="cancelColor" :confirmText="confirmText" :confirmColor="confirmColor"
|
||||
:loading="loading" :visibleItemCount="visibleItemCount" :defaultIndex="currIndexs" :columns="columns"
|
||||
:closeOnClickOverlay="closeOnClickOverlay" @confirm="confirm" @close="close" @cancel="cancel"
|
||||
@change="changeHandler" :showBottombar="showBottombar">
|
||||
</u-picker-plus>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import area from "../../province-city-county.json"
|
||||
import uPickerPlus from "../u-picker-plus/u-picker-plus.vue"
|
||||
export default {
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: () => ""
|
||||
},
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
showBottombar: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
},
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: () => 44
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: () => "取消"
|
||||
},
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: () => "#909193"
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: () => "确认"
|
||||
},
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: () => "#3c9cff"
|
||||
},
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: () => 5
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
indexs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultIds: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
defaultNames: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
labelName: {
|
||||
type: String,
|
||||
default: () => 'name'
|
||||
},
|
||||
sourceData: {
|
||||
type: Array,
|
||||
default: () => area
|
||||
},
|
||||
initBack: {
|
||||
type: Boolean,
|
||||
default: () => true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currSourceData: this.sourceData,
|
||||
//展示数据
|
||||
columns: [],
|
||||
//层级，仅用做判断
|
||||
level: 0,
|
||||
currIndexs: this.indexs,
|
||||
currNames: this.defaultNames,
|
||||
currIds: this.defaultIds,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
indexs: function(newValue, oldValue) {
|
||||
this.defaultValChange(newValue, 1)
|
||||
},
|
||||
defaultNames: function(newValue, oldValue) {
|
||||
this.defaultValChange(newValue, 2)
|
||||
},
|
||||
defaultIds: function(newValue, oldValue) {
|
||||
this.defaultValChange(newValue, 3)
|
||||
},
|
||||
sourceData: function(newValue, oldValue) {
|
||||
this.defaultValChange(newValue, 4)
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.formatData();
|
||||
if (this.initBack) {
|
||||
this.initBackData();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
uPickerPlus
|
||||
},
|
||||
methods: {
|
||||
changeHandler(e) {
|
||||
const {
|
||||
columnIndex,
|
||||
indexs,
|
||||
picker = this.$refs.uPicker
|
||||
} = e
|
||||
if (columnIndex === 0) {
|
||||
if (this.level == 2) {
|
||||
picker.setColumnValues(1, this.currSourceData[indexs[0]].children.map(v => v[this.labelName]))
|
||||
} else if (this.level == 3) {
|
||||
picker.setColumnValues(1, this.currSourceData[indexs[0]].children.map(v => v[this.labelName]))
|
||||
picker.setColumnValues(2, this.currSourceData[indexs[0]].children[indexs[1]].children.map(v => v[
|
||||
this
|
||||
.labelName]))
|
||||
}
|
||||
}
|
||||
if (columnIndex === 1 && this.level > 2) {
|
||||
picker.setColumnValues(2, this.currSourceData[indexs[0]].children[indexs[1]].children.map(v => v[this
|
||||
.labelName]))
|
||||
}
|
||||
},
|
||||
//处理异步回调数据改变重新渲染问题
|
||||
defaultValChange(newValue, changeType) {
|
||||
this.columns = []
|
||||
this.level = 0
|
||||
this.currIndexs = []
|
||||
this.currNames = []
|
||||
this.currIds = [];
|
||||
//indexs改变
|
||||
if (changeType == 1) {
|
||||
this.currIndexs = newValue
|
||||
}
|
||||
//name改变
|
||||
if (changeType == 2) {
|
||||
this.currNames = newValue
|
||||
}
|
||||
//id改变
|
||||
if (changeType == 3) {
|
||||
this.currIds = newValue;
|
||||
}
|
||||
//数据源改变
|
||||
if (changeType == 4) {
|
||||
this.currSourceData = newValue;
|
||||
this.currIndexs = this.indexs
|
||||
this.currNames = this.defaultNames
|
||||
this.currIds = this.defaultIds
|
||||
}
|
||||
this.formatData();
|
||||
if (this.initBack) {
|
||||
this.initBackData();
|
||||
}
|
||||
},
|
||||
formatData() {
|
||||
//如果没有传入默认值，则设置index[0,0,0]
|
||||
if ([this.currNames, this.currIndexs, this.currIds].every(arr => arr.length == 0)) {
|
||||
this.currIndexs = [0, 0, 0]
|
||||
}
|
||||
//优先级为：下标，名称，id
|
||||
if (this.currIndexs.length > 0) {
|
||||
this.initData(this.currIndexs, 0)
|
||||
} else if (this.currNames.length > 0) {
|
||||
this.initData(this.currNames, 1)
|
||||
} else if (this.currIds.length > 0) {
|
||||
this.initData(this.currIds, 2)
|
||||
}
|
||||
},
|
||||
confirm(e) {
|
||||
var chooseIds = [];
|
||||
var chooseObjs = [];
|
||||
let lv1Obj = this.currSourceData[e.indexs[0]];
|
||||
let lv1Id = this.currSourceData[e.indexs[0]].id;
|
||||
chooseIds.push(lv1Id);
|
||||
chooseObjs.push(lv1Obj);
|
||||
if (this.level > 1) {
|
||||
let lv2Obj = this.currSourceData[e.indexs[0]].children[e.indexs[1]];
|
||||
let lv2Id = this.currSourceData[e.indexs[0]].children[e.indexs[1]].id;
|
||||
chooseIds.push(lv2Id);
|
||||
chooseObjs.push(lv2Obj);
|
||||
}
|
||||
if (this.level > 2) {
|
||||
let lv3Obj = this.currSourceData[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]];
|
||||
let lv3Id = this.currSourceData[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]].id;
|
||||
chooseIds.push(lv3Id);
|
||||
chooseObjs.push(lv3Obj);
|
||||
}
|
||||
e.chooseIds = chooseIds;
|
||||
e.chooseObjs = chooseObjs;
|
||||
this.$emit("confirm", e)
|
||||
},
|
||||
initBackData() {
|
||||
var initValue = [];
|
||||
for (var i = 0; i < this.currIndexs.length; i++) {
|
||||
initValue.push(this.columns[i][this.currIndexs[i]])
|
||||
}
|
||||
var initData = {
|
||||
value: initValue,
|
||||
indexs: this.currIndexs,
|
||||
values: this.columns
|
||||
}
|
||||
this.confirm(initData);
|
||||
},
|
||||
close() {
|
||||
this.$emit("close")
|
||||
},
|
||||
open() {
|
||||
this.$emit("open")
|
||||
this.formatData()
|
||||
},
|
||||
cancel() {
|
||||
this.$emit("cancel")
|
||||
},
|
||||
|
||||
//初始化数据
|
||||
initData(inPutArr, inpuType) {
|
||||
//第一层级
|
||||
if (inPutArr[0] != undefined) {
|
||||
this.level = 1;
|
||||
var arr = this.currSourceData.map(t => {
|
||||
return t[this.labelName]
|
||||
});
|
||||
this.columns.push(arr)
|
||||
if (inpuType == 1) {
|
||||
var currIndex = this.currSourceData.findIndex(item => item[this.labelName] == inPutArr[0]);
|
||||
this.currIndexs.push(currIndex)
|
||||
} else if (inpuType == 2) {
|
||||
var currIndex = this.currSourceData.findIndex(item => item.id == inPutArr[0]);
|
||||
this.currIndexs.push(currIndex)
|
||||
}
|
||||
}
|
||||
//第二层级
|
||||
if (inPutArr[1] != undefined) {
|
||||
this.level = 2;
|
||||
var level2Arr = this.currSourceData[this.currIndexs[0]].children
|
||||
var arr = level2Arr.map(t => {
|
||||
return t[this.labelName]
|
||||
})
|
||||
this.columns.push(arr)
|
||||
if (inpuType == 1) {
|
||||
console.log('根据defaultNames判断');
|
||||
var currIndex = level2Arr.findIndex(item => item[this.labelName] == inPutArr[1]);
|
||||
this.currIndexs.push(currIndex)
|
||||
} else if (inpuType == 2) {
|
||||
console.log('根据defaultIds判断');
|
||||
var currIndex = level2Arr.findIndex(item => item.id == inPutArr[1]);
|
||||
this.currIndexs.push(currIndex)
|
||||
}
|
||||
}
|
||||
if (inPutArr[2] != undefined) {
|
||||
this.level = 3;
|
||||
var level3Arr = this.currSourceData[this.currIndexs[0]].children[this.currIndexs[1]].children
|
||||
var arr = level3Arr.map(t => {
|
||||
return t[this.labelName]
|
||||
})
|
||||
this.columns.push(arr)
|
||||
if (inpuType == 1) {
|
||||
var currIndex = level3Arr.findIndex(item => item[this.labelName] == inPutArr[2]);
|
||||
this.currIndexs.push(currIndex)
|
||||
} else if (inpuType == 2) {
|
||||
var currIndex = level3Arr.findIndex(item => item.id == inPutArr[2]);
|
||||
this.currIndexs.push(currIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,84 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示picker弹窗
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.show
|
||||
},
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.showToolbar
|
||||
},
|
||||
// 是否展示底部的操作栏
|
||||
showBottombar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.title
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
type: Array,
|
||||
default: uni.$u.props.picker.columns
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.loading
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.picker.itemHeight
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.cancelText
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.confirmText
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.cancelColor
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.confirmColor
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: uni.$u.props.picker.visibleItemCount
|
||||
},
|
||||
// 选项对象中，需要展示的属性键名
|
||||
keyName: {
|
||||
type: String,
|
||||
default: uni.$u.props.picker.keyName
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.closeOnClickOverlay
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: uni.$u.props.picker.defaultIndex
|
||||
},
|
||||
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||
immediateChange: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.picker.immediateChange
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<u-popup :show="show" @close="closeHandler">
|
||||
<view class="u-picker">
|
||||
<u-toolbar v-if="showToolbar" :cancelColor="cancelColor" :confirmColor="confirmColor"
|
||||
:cancelText="cancelText" :confirmText="confirmText" :title="title" @cancel="cancel" @confirm="confirm">
|
||||
</u-toolbar>
|
||||
<picker-view class="u-picker__view" :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
|
||||
:value="innerIndex" :immediateChange="immediateChange" :style="{
|
||||
height: `${$u.addUnit(visibleItemCount * itemHeight)}`
|
||||
}" @change="changeHandler">
|
||||
<picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column">
|
||||
<!-- <text v-if="$u.test.array(item)" class="u-picker__view__column__item u-line-1"
|
||||
v-for="(item1, index1) in item" :key="index1" :style="{
|
||||
height: $u.addUnit(itemHeight),
|
||||
lineHeight: $u.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
}">{{ getItemText(item1) }}</text> -->
|
||||
|
||||
|
||||
<view v-if="$u.test.array(item)" class="u-picker__view__column__item u-line-1"
|
||||
v-for="(item1, index1) in item" :key="index1" :style="{
|
||||
height: $u.addUnit(itemHeight),
|
||||
lineHeight: $u.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
}">{{ getItemText(item1) }}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view v-if="loading" class="u-picker--loading">
|
||||
<u-loading-icon mode="circle"></u-loading-icon>
|
||||
</view>
|
||||
<view class="bottom-toolbar" v-if="showBottombar">
|
||||
<u-button text="取消" class="bottom-btn canel" @click="cancel"></u-button>
|
||||
<u-button text="确定" class="bottom-btn confirm" @click="confirm"></u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* u-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} show 是否显示picker弹窗（默认 false ）
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import props from './u-picker-plus-props.js';
|
||||
export default {
|
||||
name: 'u-picker-plus',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (uni.$u.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 关闭选择器
|
||||
closeHandler() {
|
||||
if (this.closeOnClickOverlay) {
|
||||
this.$emit('close')
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
this.$emit('confirm', {
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
})
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
// #ifndef MP-WEIXIN || MP-LARK
|
||||
// 微信小程序不能传递this，会因为循环引用而报错
|
||||
picker: this,
|
||||
// #endif
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = uni.$u.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = uni.$u.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = uni.$u.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = uni.$u.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await uni.$u.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../../uview-ui/libs/css/components.scss";
|
||||
|
||||
.u-picker {
|
||||
position: relative;
|
||||
|
||||
&__view {
|
||||
|
||||
&__column {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
color: $u-main-color;
|
||||
|
||||
&--disabled {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.bottom-toolbar {
|
||||
height: 62px;
|
||||
@include flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
.u-button {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:first-child {
|
||||
background-color: #f8f8f8;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
background-color: #1AAC19;
|
||||
color: white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.u-button:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
uni_modules/data-picker/package.json
Normal file
85
uni_modules/data-picker/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "data-picker",
|
||||
"displayName": "级联数据选择data-picker 默认为三级联动地区选择器（包含港澳台）",
|
||||
"version": "1.0.5",
|
||||
"description": "单列、多列级联选择器，常用于省市区城市选择、公司部门选择、多级分类等场景",
|
||||
"keywords": [
|
||||
"picker",
|
||||
"级联",
|
||||
"省市区",
|
||||
"区域选择",
|
||||
"地区"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "n"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "n",
|
||||
"快手": "n",
|
||||
"飞书": "n",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22271
uni_modules/data-picker/province-city-county.json
Normal file
22271
uni_modules/data-picker/province-city-county.json
Normal file
File diff suppressed because it is too large
Load Diff
35
uni_modules/data-picker/readme.md
Normal file
35
uni_modules/data-picker/readme.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# data-picker
|
||||
**具体使用示例请导入示例项目查看**
|
||||
|
||||
1、该组件在uview的基础上研发，使用前需要先引入uview，[点击查看组件引入教程](http://t.csdn.cn/9uFhh)
|
||||
|
||||
2、sourceData如果不传的话，会默认取区域数据作为数据源
|
||||
|
||||
3、支持三种模式传递默认值，如下
|
||||
|
||||
```
|
||||
indexs: [0, 0, 7],
|
||||
defaultIds: [1, 110000, 110111],
|
||||
defaultNames: ['北京市', '北京市', '房山区']
|
||||
```
|
||||
|
||||
4、三种默认任选其一即可，如果传了多个，则选择其中一种生效，权重从大到小为indexs、defaultNames、defaultIds
|
||||
|
||||
5、自动识别需要的层级，如数组长度为1，显示一列，长度为3，显示3列
|
||||
|
||||
6、默认显示底部按钮，如果需要切换为顶部按钮，则需要传递参数showToolbar=true和showBottombar=false
|
||||
|
||||
### DataPicker Props
|
||||
|
||||
| 属性名 | 类型 | 可选值 | 默认 | 说明 |
|
||||
| :-----------: | :-----: | :--------: | :------------: | :----------------------------------------------------------: |
|
||||
| indexs | Array | - | - | 默认选择数据下标 |
|
||||
| defaultNames | Array | - | - | 默认选择数据的name |
|
||||
| defaultIds | Array | - | - | 默认选择数据的id |
|
||||
| sourceData | Array | - | 省市县区域数据 | 源数据。不传则默认读取省市县区域数据 |
|
||||
| showToolbar | Boolean | true/false | false | 显示顶部操作按钮 |
|
||||
| showBottombar | Boolean | true/false | true | 显示底部操作按钮 |
|
||||
| labelName | String | - | name | 默认sourceData中对象属性名为name，如果不是name，<br />可以自定义名称，具体可以看示例项目 |
|
||||
| initBack | Boolean | true/false | true | 是否返回根据默认值加载的数据，相当于初始化后手动点了一次确认，<br />获取数据同样在confirm里面 |
|
||||
|
||||
注意：由于本组件是基于uview中的picker开发的，u-picker组件中所有的属性在本组件都支持，不再重复罗列， [点击查看u-picker组件属性](https://www.uviewui.com/components/picker.html)
|
||||
Reference in New Issue
Block a user