新增预订商城项目
This commit is contained in:
myTest383
240
components/NavBar/NavBar.vue
Normal file
240
components/NavBar/NavBar.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
|
||||
<view>
|
||||
|
||||
<!-- 左侧布局 -->
|
||||
<view v-if="navStyle==='left'" class="_navLayout"
|
||||
:style="{'background': navBackground,'height':navStatusHeight}">
|
||||
<!-- 状态栏 -->
|
||||
<view :style="{'height':statusBarHeight}"></view>
|
||||
<!-- 导航栏,去掉了不可用的宽度 -->
|
||||
<view class="_nav-real"
|
||||
:style="{'height':navHeight,'width':'calc('+enableWidth+' - 9px)' ,'margin-left':'9px'}">
|
||||
<view class="_navIcon2">
|
||||
<image v-if="showIcon" src="../../static/wx_back.png"
|
||||
style="width: 20px;height: 20px;padding-right: 6px;" @click="clickIcon"></image>
|
||||
</view>
|
||||
<!-- 标题布局 -->
|
||||
<view class="_nav-title2" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
|
||||
{{navTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 居中布局 -->
|
||||
<!-- ②这里不使用props改用data -->
|
||||
<view v-if="navStyle==='center'&&supportCustomBar" class="_navLayout"
|
||||
:style="{'background': navBackground,'height':navStatusHeight}">
|
||||
<!-- 状态栏 -->
|
||||
<view :style="{'height':statusBarHeight}"></view>
|
||||
<!-- 导航栏,去掉了不可用的宽度 -->
|
||||
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}">
|
||||
<!-- 按键区域，占用为不可用的宽度 -->
|
||||
<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}">
|
||||
<image v-if="showIcon" src="../../static/wx_back.png" style="width: 23px;height: 23px;"
|
||||
@click="clickIcon"></image>
|
||||
</view>
|
||||
<!-- 标题布局 -->
|
||||
<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}">
|
||||
{{navTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 占位的前提，必须支持自定义导航栏 -->
|
||||
<view v-if="supportCustomBar">
|
||||
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 全局默认背景透明，supportChange= false 会对默认色变成不透明
|
||||
*/
|
||||
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(97,204,44,0) 0.75%,rgba(128,200,90,0) 99.78%)";
|
||||
|
||||
export default {
|
||||
name: "NavBar",
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "white"
|
||||
},
|
||||
// 标题
|
||||
navTitle: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
// 是否支持透明
|
||||
supportChange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 背景色
|
||||
// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明
|
||||
navBg: {
|
||||
type: String,
|
||||
default: defaultTransparentBg
|
||||
},
|
||||
// 渐变开始的高度 0->1
|
||||
startChangeHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 渐变停止的高度
|
||||
// ->1
|
||||
endChangeHeight: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 显示icon
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// ①用一个新的变量接收props属性
|
||||
navBackground: this.navBg,
|
||||
navStatusHeight: 0,
|
||||
statusBarHeight: 0,
|
||||
navHeight: 0,
|
||||
disableWidth: 0,
|
||||
enableWidth: 0,
|
||||
fontSize: 0,
|
||||
navStyle: 'left',
|
||||
supportCustomBar: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// mounted能拿到data值
|
||||
if (!this.supportChange) {
|
||||
if (this.navBg === defaultTransparentBg) {
|
||||
// 使用默认的时候由于是全透明，需要改成不透明
|
||||
// ③达到修改props属性的结果
|
||||
this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)")
|
||||
}
|
||||
}
|
||||
// 赋值样式
|
||||
this.navStyle = getApp().globalData.navInfo.navBar.style
|
||||
},
|
||||
created() {
|
||||
// create阶段能拿取到了props的值,需要使用this.变量名
|
||||
// 但是拿不到data的值
|
||||
// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用
|
||||
let navInfo = getApp().globalData.navInfo
|
||||
// 总高度
|
||||
this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit
|
||||
this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit
|
||||
this.navHeight = navInfo.navBar.height + navInfo.unit
|
||||
this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit
|
||||
this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit
|
||||
this.fontSize = navInfo.navBar.fontSize + navInfo.unit
|
||||
this.supportCustomBar = navInfo.supportCustomBar
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 自定义颜色渐变的值
|
||||
*/
|
||||
alpha(res) {
|
||||
if (!this.supportChange)
|
||||
return '1.0'
|
||||
if (res.scrollTop > this.startChangeHeight) {
|
||||
// 可以开始变化了
|
||||
if (res.scrollTop < this.endChangeHeight) {
|
||||
return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + ''
|
||||
} else {
|
||||
// 保持长显示
|
||||
return '1.0'
|
||||
}
|
||||
} else {
|
||||
// 保持无色
|
||||
return '0.0'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 提供默认的颜色变化功能
|
||||
*/
|
||||
defaultColorBgAlpha(res) {
|
||||
let x = this.alpha(res)
|
||||
this.navBackground = "linear-gradient(89.26deg, rgba(97,204,44," + x +
|
||||
") 0.75%,rgba(128,200,90," + x + ") 99.78%)"
|
||||
},
|
||||
clickIcon() {
|
||||
// uni.navigateBack()
|
||||
|
||||
const pages = getCurrentPages()
|
||||
// 有可返回的页面则直接返回，uni.navigateBack 默认返回失败之后会自动刷新页面 ，无法继续返回
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack(1)
|
||||
return;
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
}
|
||||
|
||||
return;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
._navLayout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
._nav-real {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
._nav-title {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
._nav-title2 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
color: white;
|
||||
padding-left: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
._navIcon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
._navIcon2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
101
components/UserItem/UserItem.vue
Normal file
101
components/UserItem/UserItem.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
|
||||
<view class="user-item-content" @click="click">
|
||||
<view class="user-item-left">
|
||||
<image :src="src" style="width: 40rpx;height: 40rpx;" mode="aspectFit"></image>
|
||||
<text class="user-item-textBlack">{{text}}</text>
|
||||
</view>
|
||||
<view class="user-item-right">
|
||||
<text class="user-item-textBlack2">{{notes}}</text>
|
||||
<image class="user-item-right_img" src="../../static/baseIcon/zy.png"></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
notes: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
clickId: {
|
||||
type: String,
|
||||
default: "0"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
click() {
|
||||
var clickId = this.$props.clickId;
|
||||
this.$emit("click", clickId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.user-item-content {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 40rpx;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-item-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 89rpx;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-item-textBlack {
|
||||
color: #333333;
|
||||
margin-left: 15px;
|
||||
font-size: 30rpx;
|
||||
height: 89rpx;
|
||||
line-height: 89rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.user-item-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 89rpx;
|
||||
align-items: center;
|
||||
|
||||
.user-item-right_img {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 35rpx;
|
||||
}
|
||||
|
||||
.user-item-textBlack2 {
|
||||
color: #ccc;
|
||||
font-size: 25rpx;
|
||||
height: 89rpx;
|
||||
line-height: 89rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
135
components/pick-regions/pick-regions.vue
Normal file
135
components/pick-regions/pick-regions.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="handleValueChange"
|
||||
@columnchange="handleColumnChange">
|
||||
<slot></slot>
|
||||
</picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const CHINA_REGIONS = require('./regions.json')
|
||||
export default {
|
||||
props: {
|
||||
defaultRegions: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
defaultRegionCode: {
|
||||
type: String
|
||||
},
|
||||
defaultRegion: [String, Array]
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cityArr: CHINA_REGIONS[0].childs,
|
||||
districtArr: CHINA_REGIONS[0].childs[0].childs,
|
||||
multiIndex: [0, 0, 0],
|
||||
isInitMultiArray: true,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultRegion: {
|
||||
handler(region, oldRegion) {
|
||||
if (Array.isArray(region)) {
|
||||
// 避免传的是字面量的时候重复触发
|
||||
oldRegion = oldRegion || []
|
||||
if (region.join('') !== oldRegion.join('')) {
|
||||
this.handleDefaultRegion(region)
|
||||
}
|
||||
} else if (region && region.length == 6) {
|
||||
this.handleDefaultRegion(region)
|
||||
} else {
|
||||
console.warn('defaultRegion非有效格式')
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
multiArray() {
|
||||
return this.pickedArr.map(arr => arr.map(item => item.name))
|
||||
},
|
||||
pickedArr() {
|
||||
// 进行初始化
|
||||
if (this.isInitMultiArray) {
|
||||
return [
|
||||
CHINA_REGIONS,
|
||||
CHINA_REGIONS[0].childs,
|
||||
CHINA_REGIONS[0].childs[0].childs
|
||||
]
|
||||
}
|
||||
return [CHINA_REGIONS, this.cityArr, this.districtArr];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleColumnChange(e) {
|
||||
// console.log(e);
|
||||
this.isInitMultiArray = false;
|
||||
const that = this;
|
||||
let col = e.detail.column;
|
||||
let row = e.detail.value;
|
||||
that.multiIndex[col] = row;
|
||||
try {
|
||||
switch (col) {
|
||||
case 0:
|
||||
if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
|
||||
that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
|
||||
break;
|
||||
}
|
||||
that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 1:
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
|
||||
break;
|
||||
case 2:
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
// console.log(e);
|
||||
that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
|
||||
}
|
||||
|
||||
},
|
||||
handleValueChange(e) {
|
||||
// 结构赋值
|
||||
let [index0, index1, index2] = e.detail.value;
|
||||
let [arr0, arr1, arr2] = this.pickedArr;
|
||||
let address = [arr0[index0], arr1[index1], arr2[index2]];
|
||||
// console.log(address);
|
||||
this.$emit('getRegion', address)
|
||||
},
|
||||
handleDefaultRegion(region) {
|
||||
const isCode = !Array.isArray(region)
|
||||
this.isInitMultiArray = false;
|
||||
let children = CHINA_REGIONS
|
||||
for (let i = 0; i < 3; i++) {
|
||||
for (let j = 0; j < children.length; j++) {
|
||||
let condition = isCode ? children[j].code == region.slice(0, (i + 1) * 2) : children[j].name
|
||||
.includes(region[i]);
|
||||
if (condition) {
|
||||
// 匹配成功进行赋值
|
||||
// console.log(i,j,children.length-1);
|
||||
children = children[j].childs;
|
||||
if (i == 0) {
|
||||
this.cityArr = children
|
||||
} else if (i == 1) {
|
||||
this.districtArr = children
|
||||
}
|
||||
this.$set(this.multiIndex, i, j)
|
||||
// console.log(this.multiIndex);
|
||||
break;
|
||||
} else {
|
||||
// 首次匹配失败就用默认的初始化
|
||||
// console.log(i,j,children.length-1);
|
||||
if (i == 0 && j == (children.length - 1)) {
|
||||
this.isInitMultiArray = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
10330
components/pick-regions/regions.json
Normal file
10330
components/pick-regions/regions.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
components/zqs-select/right_icon.png
Normal file
BIN
components/zqs-select/right_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
505
components/zqs-select/zqs-select.vue
Normal file
505
components/zqs-select/zqs-select.vue
Normal file
@@ -0,0 +1,505 @@
|
||||
<template>
|
||||
<view class="main">
|
||||
<view class="input" @click="showModal">
|
||||
<input v-model="_value" :style="disabled ? 'color:#c0c4cc' : ''" :placeholder="placeholder"
|
||||
placeholder-style="color: #828282;" placeholder-class="zqs-select-placeholder-class" disabled />
|
||||
<!-- <image
|
||||
v-if="showArrow && !_value"
|
||||
src="../../static/more.png"
|
||||
class="selector-icon"
|
||||
></image> -->
|
||||
<image src="../../static/more.png" class="selector-icon"></image>
|
||||
</view>
|
||||
<view class="select-modal" :class="isShowModal ? 'show' : ''" @tap="hideModal">
|
||||
<view class="select-dialog" @tap.stop="" :style="{ backgroundColor: bgColor }">
|
||||
<view class="title-main">
|
||||
<text class="title-detail">{{ title }}</text>
|
||||
<image src="../../static/close2.png" class="close-icon" @click="closePop"></image>
|
||||
</view>
|
||||
|
||||
<view v-if="showSearch" class="search-box">
|
||||
<input class="search-input" confirm-type="search" v-model="searchInput" placeholder="输入内容进行模糊查询"
|
||||
placeholder-style="color:rgba(102, 102, 102, 0.25);" />
|
||||
<text v-if="showSearchBtn" class="search-text" @click="handleSearch">
|
||||
搜索
|
||||
</text>
|
||||
</view>
|
||||
<view class="select-content">
|
||||
<view class="select-item" v-for="(item, index) in list" :key="index" :style="
|
||||
valueIndexOf(item)
|
||||
? 'color:' +
|
||||
selectColor +
|
||||
';background-color:' +
|
||||
selectBgColor +
|
||||
';'
|
||||
: 'color:' + color + ';'
|
||||
" @click="select(item)">
|
||||
<view class="title">{{ getLabelKeyValue(item) }}</view>
|
||||
<text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="select-bar bg-white" v-if="multiple">
|
||||
<button plain="true" class="mini-btn action" type="default" size="default" @tap="empty">
|
||||
{{ emptyText }}
|
||||
</button>
|
||||
<button class="mini-btn action" type="primary" size="default" @tap="confirmClick">
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'zqsSelect',
|
||||
data() {
|
||||
return {
|
||||
isShowModal: false,
|
||||
searchInput: '',
|
||||
options: [],
|
||||
}
|
||||
},
|
||||
props: {
|
||||
showSearch: {
|
||||
// 是否显示搜索框
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
value: {
|
||||
type: [Number, String, Array, Object],
|
||||
default: null,
|
||||
},
|
||||
placeholder: {
|
||||
// 占位符
|
||||
default: '',
|
||||
type: String,
|
||||
},
|
||||
multiple: {
|
||||
// 是否多选
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
list: {
|
||||
default: () => [],
|
||||
type: Array,
|
||||
},
|
||||
valueKey: {
|
||||
// 指定list中valueKey的值作为下拉框绑定内容
|
||||
default: 'value',
|
||||
type: String,
|
||||
},
|
||||
labelKey: {
|
||||
// 指定list中labelKey的值作为下拉框显示内容
|
||||
default: 'label',
|
||||
type: String,
|
||||
},
|
||||
disabled: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
clearable: {
|
||||
default: false,
|
||||
type: Boolean,
|
||||
},
|
||||
emptyText: {
|
||||
default: '重置',
|
||||
type: String,
|
||||
},
|
||||
title: {
|
||||
default: '选择内容',
|
||||
type: String,
|
||||
},
|
||||
confirmText: {
|
||||
default: '确定',
|
||||
type: String,
|
||||
},
|
||||
color: {
|
||||
default: '#000000',
|
||||
type: String,
|
||||
},
|
||||
selectColor: {
|
||||
default: '#0081ff',
|
||||
type: String,
|
||||
},
|
||||
bgColor: {
|
||||
default: '#ffffff',
|
||||
type: String,
|
||||
},
|
||||
selectBgColor: {
|
||||
default: '#FFFFFF',
|
||||
type: String,
|
||||
},
|
||||
valueType: {
|
||||
default: 'single',
|
||||
type: String, // single || all
|
||||
},
|
||||
showSearchBtn: {
|
||||
default: true,
|
||||
type: Boolean, // single || all
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
emits: ['openDeepScroll', 'closeDeepScroll'],
|
||||
computed: {
|
||||
_value: {
|
||||
get() {
|
||||
return this.get_value(this.value)
|
||||
},
|
||||
set(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
closePop(){
|
||||
this.hideModal()
|
||||
},
|
||||
handleSearch() {
|
||||
this.$emit('search', this.searchInput)
|
||||
},
|
||||
get_value(val) {
|
||||
// 将数组值转换为以,隔开的字符串
|
||||
if (val || val === 0) {
|
||||
if (Array.isArray(val)) {
|
||||
let chooseAttr = []
|
||||
val.forEach((item) => {
|
||||
let choose = this.list.find((temp) => {
|
||||
let val_val = this.getValueKeyValue(temp)
|
||||
return item === val_val
|
||||
})
|
||||
// 判断是否存在
|
||||
if (choose) {
|
||||
chooseAttr.push(choose)
|
||||
}
|
||||
})
|
||||
let values = ''
|
||||
if (chooseAttr.length > 0) {
|
||||
values = chooseAttr
|
||||
.map((temp) => this.getLabelKeyValue(temp))
|
||||
.join(',')
|
||||
}
|
||||
|
||||
return values
|
||||
} else {
|
||||
let choose = this.list.find((temp) => {
|
||||
let val_val = this.getValueKeyValue(temp)
|
||||
return val === val_val
|
||||
})
|
||||
if (choose) {
|
||||
return this.getLabelKeyValue(choose)
|
||||
} else {
|
||||
return val
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
select(item) {
|
||||
// 点击选项
|
||||
let val = this.getValueKeyValue(item)
|
||||
if (this.multiple) {
|
||||
let _value = this.value
|
||||
let index = _value ? _value.indexOf(val) : -1
|
||||
if (index != -1) {
|
||||
_value.splice(index, 1)
|
||||
this.options.splice(index, 1)
|
||||
this.$emit('input', _value)
|
||||
} else {
|
||||
_value.push(val)
|
||||
this.options.push(item)
|
||||
this.$emit('input', _value)
|
||||
}
|
||||
this.$emit('change', item)
|
||||
} else {
|
||||
let label = this.getLabelKeyValue(item)
|
||||
if (this._value) {
|
||||
if (label.indexOf(this._value) !== -1) {
|
||||
this.$emit('input', '')
|
||||
} else {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
} else {
|
||||
this.$emit('input', val)
|
||||
}
|
||||
|
||||
// 单选选中的当前项所有
|
||||
this.$emit('change', item)
|
||||
this.hideModal()
|
||||
}
|
||||
},
|
||||
valueIndexOf(item) {
|
||||
let val = this.getValueKeyValue(item)
|
||||
if (Array.isArray(this.value)) {
|
||||
return this.value.indexOf(val) != -1
|
||||
} else {
|
||||
return this.value === val
|
||||
}
|
||||
},
|
||||
getLabelKeyValue(item) {
|
||||
// 获取label
|
||||
return item[this.labelKey]
|
||||
},
|
||||
getValueKeyValue(item) {
|
||||
// 获取value
|
||||
return item[this.valueKey]
|
||||
},
|
||||
empty() {
|
||||
// 清空
|
||||
if (this.multiple) {
|
||||
this.$emit('change', [])
|
||||
this.$emit('input', [])
|
||||
} else {
|
||||
this.$emit('change', '')
|
||||
this.$emit('input', '')
|
||||
}
|
||||
},
|
||||
// cancelClick() {
|
||||
// // 点击取消
|
||||
// this.$emit('cancel', this._value)
|
||||
// this.hideModal()
|
||||
// },
|
||||
confirmClick() {
|
||||
// 点击确定
|
||||
if (this.valueType === 'all') {
|
||||
this.$emit('confirm', this.options)
|
||||
} else {
|
||||
this.$emit('confirm', this._value)
|
||||
}
|
||||
this.hideModal()
|
||||
},
|
||||
showModal() {
|
||||
// 显示model
|
||||
if (!this.disabled) {
|
||||
this.isShowModal = true
|
||||
// 打开禁止穿透滚动
|
||||
this.$emit('openDeepScroll')
|
||||
}
|
||||
},
|
||||
hideModal() {
|
||||
// 隐藏model
|
||||
this.isShowModal = false
|
||||
// 关闭禁止穿透滚动
|
||||
this.$emit('closeDeepScroll')
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchInput(val) {
|
||||
if (!this.$props.showSearchBtn) this.$emit('search', val)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'selectIcon';
|
||||
src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208');
|
||||
/* IE9 */
|
||||
src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
|
||||
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
|
||||
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'),
|
||||
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg');
|
||||
/* iOS 4.1- */
|
||||
}
|
||||
|
||||
.title-main {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-detail {
|
||||
display: flex;
|
||||
width: 88%;
|
||||
justify-content: center;
|
||||
padding: 30rpx 0;
|
||||
/* border-bottom: 1rpx solid #e6e1e1; */
|
||||
}
|
||||
.close-icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 30rpx 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.selectIcon {
|
||||
font-family: 'selectIcon' !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icongou:before {
|
||||
content: '\e61c';
|
||||
}
|
||||
|
||||
.iconcross:before {
|
||||
content: '\e61a';
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// font-size: 28rpx;
|
||||
// height: 60rpx;
|
||||
// padding: 10rpx 20rpx;
|
||||
// border-radius: 10rpx;
|
||||
// border-style: solid;
|
||||
// border-width: 1rpx;
|
||||
// border-color: rgba(0, 0, 0, 0.1);
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
color: #828282;
|
||||
}
|
||||
|
||||
.selector-icon {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
vertical-align: middle;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
outline: 0;
|
||||
text-align: center;
|
||||
-ms-transform: scale(1.185);
|
||||
transform: scale(1.185);
|
||||
backface-visibility: hidden;
|
||||
perspective: 2000rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
pointer-events: none;
|
||||
margin-bottom: -1000rpx;
|
||||
|
||||
|
||||
&::before {
|
||||
content: '\200B';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.select-dialog {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: #f8f8f8;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
|
||||
.select-content {
|
||||
// background-color: #F1F1F1;
|
||||
height: 60vh;
|
||||
overflow: auto;
|
||||
|
||||
.select-item {
|
||||
text-align: left;
|
||||
padding: 20rpx 80rpx;
|
||||
display: flex;
|
||||
|
||||
::after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid #f5f2f2;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-modal.show {
|
||||
opacity: 1;
|
||||
transition-duration: 0.3s;
|
||||
-ms-transform: scale(1);
|
||||
transform: scale(1);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
pointer-events: auto;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.select-bar {
|
||||
padding: 0 80rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
min-height: 80rpx;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 50rpx;
|
||||
|
||||
.action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 78rpx;
|
||||
justify-content: center;
|
||||
max-width: 100%;
|
||||
padding: 0 100rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
margin: 10rpx 0;
|
||||
align-items: center;
|
||||
padding: 10rpx 40rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
text-align: start;
|
||||
padding-left: 20px;
|
||||
// width: 560rpx;
|
||||
height: 67rpx;
|
||||
line-height: 67rpx;
|
||||
border-radius: 40rpx;
|
||||
background: #f5f2f2;
|
||||
|
||||
}
|
||||
|
||||
.search-text {
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user