parent
d2e07d8a6c
commit
63ad31bb3c
25 changed files with 90 additions and 1655 deletions
@ -1,130 +0,0 @@ |
|||||||
<template> |
|
||||||
<view |
|
||||||
class="u-mask" |
|
||||||
hover-stop-propagation |
|
||||||
:style="[maskStyle, zoomStyle]" |
|
||||||
@tap="click" |
|
||||||
@touchmove.stop.prevent="() => {}" |
|
||||||
:class="{ |
|
||||||
'u-mask-zoom': zoom, |
|
||||||
'u-mask-show': show, |
|
||||||
}" |
|
||||||
> |
|
||||||
<slot /> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
/** |
|
||||||
* mask 遮罩 |
|
||||||
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景 |
|
||||||
* @tutorial https://www.uviewui.com/components/mask.html |
|
||||||
* @property {Boolean} show 是否显示遮罩（默认false） |
|
||||||
* @property {String Number} z-index z-index 层级（默认1070） |
|
||||||
* @property {Object} custom-style 自定义样式对象，见上方说明 |
|
||||||
* @property {String Number} duration 动画时长，单位毫秒（默认300） |
|
||||||
* @property {Boolean} zoom 是否使用scale对这招进行缩放（默认true） |
|
||||||
* @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true） |
|
||||||
* @event {Function} click mask-click-able为true时，点击遮罩发送此事件 |
|
||||||
* @example <u-mask :show="show" @click="show = false"></u-mask> |
|
||||||
*/ |
|
||||||
export default { |
|
||||||
name: "u-mask", |
|
||||||
props: { |
|
||||||
// 是否显示遮罩 |
|
||||||
show: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
// 层级z-index |
|
||||||
zIndex: { |
|
||||||
type: [Number, String], |
|
||||||
default: "", |
|
||||||
}, |
|
||||||
// 用户自定义样式 |
|
||||||
customStyle: { |
|
||||||
type: Object, |
|
||||||
default() { |
|
||||||
return {}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
// 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放 |
|
||||||
zoom: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
// 遮罩的过渡时间，单位为ms |
|
||||||
duration: { |
|
||||||
type: [Number, String], |
|
||||||
default: 300, |
|
||||||
}, |
|
||||||
// 是否可以通过点击遮罩进行关闭 |
|
||||||
maskClickAble: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
zoomStyle: { |
|
||||||
transform: "", |
|
||||||
}, |
|
||||||
scale: "scale(1.2, 1.2)", |
|
||||||
}; |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
show(n) { |
|
||||||
if (n && this.zoom) { |
|
||||||
// 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果 |
|
||||||
this.zoomStyle.transform = "scale(1, 1)"; |
|
||||||
} else if (!n && this.zoom) { |
|
||||||
// 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果 |
|
||||||
this.zoomStyle.transform = this.scale; |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
maskStyle() { |
|
||||||
let style = {}; |
|
||||||
style.backgroundColor = "rgba(0, 0, 0, 0.6)"; |
|
||||||
if (this.show) |
|
||||||
style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.mask; |
|
||||||
else style.zIndex = -1; |
|
||||||
style.transition = `all ${this.duration / 1000}s ease-in-out`; |
|
||||||
// 判断用户传递的对象是否为空，不为空就进行合并 |
|
||||||
if (Object.keys(this.customStyle).length) |
|
||||||
style = { |
|
||||||
...style, |
|
||||||
...this.customStyle, |
|
||||||
}; |
|
||||||
return style; |
|
||||||
}, |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
click() { |
|
||||||
if (!this.maskClickAble) return; |
|
||||||
this.$emit("click"); |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
.u-mask { |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
opacity: 0; |
|
||||||
transition: transform 0.3s; |
|
||||||
} |
|
||||||
|
|
||||||
.u-mask-show { |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.u-mask-zoom { |
|
||||||
transform: scale(1.2, 1.2); |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,510 +0,0 @@ |
|||||||
<template> |
|
||||||
<view |
|
||||||
v-if="visibleSync" |
|
||||||
:style="[ |
|
||||||
customStyle, |
|
||||||
{ |
|
||||||
zIndex: uZindex - 1, |
|
||||||
}, |
|
||||||
]" |
|
||||||
class="u-drawer" |
|
||||||
hover-stop-propagation |
|
||||||
> |
|
||||||
<z-mask |
|
||||||
:duration="duration" |
|
||||||
:custom-style="maskCustomStyle" |
|
||||||
:maskClickAble="maskCloseAble" |
|
||||||
:z-index="uZindex - 2" |
|
||||||
:show="showDrawer && mask" |
|
||||||
@click="maskClick" |
|
||||||
></z-mask> |
|
||||||
<view |
|
||||||
class="u-drawer-content" |
|
||||||
@tap="modeCenterClose(mode)" |
|
||||||
:class="[ |
|
||||||
safeAreaInsetBottom ? 'safe-area-inset-bottom' : '', |
|
||||||
'u-drawer-' + mode, |
|
||||||
showDrawer ? 'u-drawer-content-visible' : '', |
|
||||||
zoom && mode == 'center' ? 'u-animation-zoom' : '', |
|
||||||
]" |
|
||||||
@transitionend="transitionend" |
|
||||||
@touchmove.stop.prevent |
|
||||||
@tap.stop.prevent |
|
||||||
:style="[style]" |
|
||||||
> |
|
||||||
<view |
|
||||||
class="u-mode-center-box" |
|
||||||
@tap.stop.prevent |
|
||||||
@touchmove.stop.prevent |
|
||||||
v-if="mode == 'center'" |
|
||||||
:style="[centerStyle]" |
|
||||||
> |
|
||||||
<u-icon |
|
||||||
@click="close" |
|
||||||
v-if="closeable" |
|
||||||
class="u-close" |
|
||||||
:class="['u-close--' + closeIconPos]" |
|
||||||
:name="closeIcon" |
|
||||||
:color="closeIconColor" |
|
||||||
:size="closeIconSize" |
|
||||||
></u-icon> |
|
||||||
<scroll-view class="u-drawer__scroll-view" scroll-y="true"> |
|
||||||
<slot /> |
|
||||||
</scroll-view> |
|
||||||
<slot name="fixedContent" /> |
|
||||||
</view> |
|
||||||
<scroll-view class="u-drawer__scroll-view" scroll-y="true" v-else> |
|
||||||
<slot /> |
|
||||||
</scroll-view> |
|
||||||
<view @tap="close" class="u-close" :class="['u-close--' + closeIconPos]"> |
|
||||||
<u-icon |
|
||||||
v-if="mode != 'center' && closeable" |
|
||||||
:name="closeIcon" |
|
||||||
:color="closeIconColor" |
|
||||||
:size="closeIconSize" |
|
||||||
></u-icon> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
/** |
|
||||||
* popup 弹窗 |
|
||||||
* @description 弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义 |
|
||||||
* @tutorial https://www.uviewui.com/components/popup.html |
|
||||||
* @property {String} mode 弹出方向（默认left） |
|
||||||
* @property {Boolean} mask 是否显示遮罩（默认true） |
|
||||||
* @property {Stringr | Number} length mode=left | 见官网说明（默认auto） |
|
||||||
* @property {Boolean} zoom 是否开启缩放动画，只在mode为center时有效（默认true） |
|
||||||
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false） |
|
||||||
* @property {Boolean} mask-close-able 点击遮罩是否可以关闭弹出层（默认true） |
|
||||||
* @property {Object} custom-style 用户自定义样式 |
|
||||||
* @property {Stringr | Number} negative-top 中部弹出时，往上偏移的值 |
|
||||||
* @property {Numberr | String} border-radius 弹窗圆角值（默认0） |
|
||||||
* @property {Numberr | String} z-index 弹出内容的z-index值（默认1075） |
|
||||||
* @property {Boolean} closeable 是否显示关闭图标（默认false） |
|
||||||
* @property {String} close-icon 关闭图标的名称，只能uView的内置图标 |
|
||||||
* @property {String} close-icon-pos 自定义关闭图标位置（默认top-right） |
|
||||||
* @property {String} close-icon-color 关闭图标的颜色（默认#909399） |
|
||||||
* @property {Number | String} close-icon-size 关闭图标的大小，单位rpx（默认30） |
|
||||||
* @event {Function} open 弹出层打开 |
|
||||||
* @event {Function} close 弹出层收起 |
|
||||||
* @example <u-popup v-model="show"><view>出淤泥而不染，濯清涟而不妖</view></u-popup> |
|
||||||
*/ |
|
||||||
import ZMask from "./mask.vue"; |
|
||||||
export default { |
|
||||||
name: "popup", |
|
||||||
components: { |
|
||||||
ZMask, |
|
||||||
}, |
|
||||||
props: { |
|
||||||
/** |
|
||||||
* 显示状态 |
|
||||||
*/ |
|
||||||
show: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
/** |
|
||||||
* 弹出方向，left|right|top|bottom|center |
|
||||||
*/ |
|
||||||
mode: { |
|
||||||
type: String, |
|
||||||
default: "left", |
|
||||||
}, |
|
||||||
/** |
|
||||||
* 是否显示遮罩 |
|
||||||
*/ |
|
||||||
mask: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
// 抽屉的宽度(mode=left|right)，或者高度(mode=top|bottom)，单位rpx，或者"auto" |
|
||||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度 |
|
||||||
length: { |
|
||||||
type: [Number, String], |
|
||||||
default: "auto", |
|
||||||
}, |
|
||||||
// 是否开启缩放动画，只在mode=center时有效 |
|
||||||
zoom: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
// 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 |
|
||||||
safeAreaInsetBottom: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
// 是否可以通过点击遮罩进行关闭 |
|
||||||
maskCloseAble: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
// 用户自定义样式 |
|
||||||
customStyle: { |
|
||||||
type: Object, |
|
||||||
default() { |
|
||||||
return {}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
value: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
// 此为内部参数，不在文档对外使用，为了解决Picker和keyboard等融合了弹窗的组件 |
|
||||||
// 对v-model双向绑定多层调用造成报错不能修改props值的问题 |
|
||||||
popup: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
// 显示显示弹窗的圆角，单位rpx |
|
||||||
borderRadius: { |
|
||||||
type: [Number, String], |
|
||||||
default: 0, |
|
||||||
}, |
|
||||||
zIndex: { |
|
||||||
type: [Number, String], |
|
||||||
default: "10075", |
|
||||||
}, |
|
||||||
// 是否显示关闭图标 |
|
||||||
closeable: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
// 关闭图标的名称，只能uView的内置图标 |
|
||||||
closeIcon: { |
|
||||||
type: String, |
|
||||||
default: "close", |
|
||||||
}, |
|
||||||
// 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角 |
|
||||||
closeIconPos: { |
|
||||||
type: String, |
|
||||||
default: "top-right", |
|
||||||
}, |
|
||||||
// 关闭图标的颜色 |
|
||||||
closeIconColor: { |
|
||||||
type: String, |
|
||||||
default: "#909399", |
|
||||||
}, |
|
||||||
// 关闭图标的大小，单位rpx |
|
||||||
closeIconSize: { |
|
||||||
type: [String, Number], |
|
||||||
default: "30", |
|
||||||
}, |
|
||||||
// 宽度，只对左，右，中部弹出时起作用，单位rpx，或者"auto" |
|
||||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
|
||||||
width: { |
|
||||||
type: String, |
|
||||||
default: "", |
|
||||||
}, |
|
||||||
// 高度，只对上，下，中部弹出时起作用，单位rpx，或者"auto" |
|
||||||
// 或者百分比"50%"，表示由内容撑开高度或者宽度，优先级高于length参数 |
|
||||||
height: { |
|
||||||
type: String, |
|
||||||
default: "", |
|
||||||
}, |
|
||||||
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况，仅在mode=center时有效 |
|
||||||
negativeTop: { |
|
||||||
type: [String, Number], |
|
||||||
default: 0, |
|
||||||
}, |
|
||||||
// 遮罩的样式，一般用于修改遮罩的透明度 |
|
||||||
maskCustomStyle: { |
|
||||||
type: Object, |
|
||||||
default() { |
|
||||||
return {}; |
|
||||||
}, |
|
||||||
}, |
|
||||||
// 遮罩打开或收起的动画过渡时间，单位ms |
|
||||||
duration: { |
|
||||||
type: [String, Number], |
|
||||||
default: 250, |
|
||||||
}, |
|
||||||
// 中间弹窗的背景颜色值 |
|
||||||
centerPupBg: { |
|
||||||
type: String, |
|
||||||
default: "#fff", |
|
||||||
}, |
|
||||||
bgColor: { |
|
||||||
type: String, |
|
||||||
default: "#fff", |
|
||||||
}, |
|
||||||
}, |
|
||||||
|
|
||||||
data() { |
|
||||||
return { |
|
||||||
visibleSync: false, |
|
||||||
showDrawer: false, |
|
||||||
timer: null, |
|
||||||
closeFromInner: false, // value的值改变，是发生在内部还是外部 |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
// 根据mode的位置，设定其弹窗的宽度(mode = left|right)，或者高度(mode = top|bottom) |
|
||||||
style() { |
|
||||||
let style = {}; |
|
||||||
// 如果是左边或者上边弹出时，需要给translate设置为负值，用于隐藏 |
|
||||||
if (this.mode == "left" || this.mode == "right") { |
|
||||||
style = { |
|
||||||
width: this.width |
|
||||||
? this.getUnitValue(this.width) |
|
||||||
: this.getUnitValue(this.length), |
|
||||||
height: "100%", |
|
||||||
transform: `translate3D(${ |
|
||||||
this.mode == "left" ? "-100%" : "100%" |
|
||||||
},0px,0px)`, |
|
||||||
background: this.bgColor, |
|
||||||
}; |
|
||||||
} else if (this.mode == "top" || this.mode == "bottom") { |
|
||||||
style = { |
|
||||||
width: "100%", |
|
||||||
height: this.height |
|
||||||
? this.getUnitValue(this.height) |
|
||||||
: this.getUnitValue(this.length), |
|
||||||
transform: `translate3D(0px,${ |
|
||||||
this.mode == "top" ? "-100%" : "100%" |
|
||||||
},0px)`, |
|
||||||
background: this.bgColor, |
|
||||||
}; |
|
||||||
} |
|
||||||
style.zIndex = this.uZindex; |
|
||||||
// 如果用户设置了borderRadius值，添加弹窗的圆角 |
|
||||||
if (this.borderRadius) { |
|
||||||
switch (this.mode) { |
|
||||||
case "left": |
|
||||||
style.borderRadius = `0 ${this.borderRadius}rpx ${this.borderRadius}rpx 0`; |
|
||||||
break; |
|
||||||
case "top": |
|
||||||
style.borderRadius = `0 0 ${this.borderRadius}rpx ${this.borderRadius}rpx`; |
|
||||||
break; |
|
||||||
case "right": |
|
||||||
style.borderRadius = `${this.borderRadius}rpx 0 0 ${this.borderRadius}rpx`; |
|
||||||
break; |
|
||||||
case "bottom": |
|
||||||
style.borderRadius = `${this.borderRadius}rpx ${this.borderRadius}rpx 0 0`; |
|
||||||
break; |
|
||||||
default: |
|
||||||
} |
|
||||||
// 不加可能圆角无效 |
|
||||||
style.overflow = "hidden"; |
|
||||||
} |
|
||||||
if (this.duration) |
|
||||||
style.transition = `all ${this.duration / 1000}s linear`; |
|
||||||
return style; |
|
||||||
}, |
|
||||||
// 中部弹窗的特有样式 |
|
||||||
centerStyle() { |
|
||||||
let style = {}; |
|
||||||
style.width = this.width |
|
||||||
? this.getUnitValue(this.width) |
|
||||||
: this.getUnitValue(this.length); |
|
||||||
// 中部弹出的模式，如果没有设置高度，就用auto值，由内容撑开高度 |
|
||||||
style.height = this.height ? this.getUnitValue(this.height) : "auto"; |
|
||||||
style.zIndex = this.uZindex; |
|
||||||
// style.marginTop = `-${this.$u.addUnit(this.negativeTop)}`; |
|
||||||
style.background = this.centerPupBg; |
|
||||||
if (this.borderRadius) { |
|
||||||
style.borderRadius = `${this.borderRadius}rpx`; |
|
||||||
// 不加可能圆角无效 |
|
||||||
style.overflow = "hidden"; |
|
||||||
} |
|
||||||
return style; |
|
||||||
}, |
|
||||||
// 计算整理后的z-index值 |
|
||||||
uZindex() { |
|
||||||
return this.zIndex ? this.zIndex : this.$u.zIndex.popup; |
|
||||||
}, |
|
||||||
}, |
|
||||||
watch: { |
|
||||||
value(val) { |
|
||||||
if (val) { |
|
||||||
this.open(); |
|
||||||
} else if (!this.closeFromInner) { |
|
||||||
this.close(); |
|
||||||
} |
|
||||||
this.closeFromInner = false; |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
// 组件渲染完成时，检查value是否为true，如果是，弹出popup |
|
||||||
this.value && this.open(); |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 动画结束回调 |
|
||||||
transitionend(e) { |
|
||||||
// console.log(e, "动画结束popup"); |
|
||||||
}, |
|
||||||
// 判断传入的值，是否带有单位，如果没有，就默认用rpx单位 |
|
||||||
getUnitValue(val) { |
|
||||||
if (/(%|px|rpx|auto)$/.test(val)) return val; |
|
||||||
else return val + "rpx"; |
|
||||||
}, |
|
||||||
// 遮罩被点击 |
|
||||||
maskClick() { |
|
||||||
this.close(); |
|
||||||
}, |
|
||||||
close() { |
|
||||||
// 标记关闭是内部发生的，否则修改了value值，导致watch中对value检测，导致再执行一遍close |
|
||||||
// 造成@close事件触发两次 |
|
||||||
this.closeFromInner = true; |
|
||||||
this.change("showDrawer", "visibleSync", false); |
|
||||||
}, |
|
||||||
// 中部弹出时，需要.u-drawer-content将居中内容，此元素会铺满屏幕，点击需要关闭弹窗 |
|
||||||
// 让其只在mode=center时起作用 |
|
||||||
modeCenterClose(mode) { |
|
||||||
if (mode != "center" || !this.maskCloseAble) return; |
|
||||||
this.close(); |
|
||||||
}, |
|
||||||
open() { |
|
||||||
this.change("visibleSync", "showDrawer", true); |
|
||||||
}, |
|
||||||
// 此处的原理是，关闭时先通过动画隐藏弹窗和遮罩，再移除整个组件 |
|
||||||
// 打开时，先渲染组件，延时一定时间再让遮罩和弹窗的动画起作用 |
|
||||||
change(param1, param2, status) { |
|
||||||
// 如果this.popup为false，意味着为picker，actionsheet等组件调用了popup组件 |
|
||||||
if (this.popup == true) { |
|
||||||
this.$emit("input", status); |
|
||||||
} |
|
||||||
this[param1] = status; |
|
||||||
if (status) { |
|
||||||
// #ifdef H5 || MP |
|
||||||
this.timer = setTimeout(() => { |
|
||||||
this[param2] = status; |
|
||||||
this.$emit(status ? "open" : "close"); |
|
||||||
}, 50); |
|
||||||
// #endif |
|
||||||
// #ifndef H5 || MP |
|
||||||
this.$nextTick(() => { |
|
||||||
this[param2] = status; |
|
||||||
this.$emit(status ? "open" : "close"); |
|
||||||
}); |
|
||||||
// #endif |
|
||||||
} else { |
|
||||||
this.timer = setTimeout(() => { |
|
||||||
this[param2] = status; |
|
||||||
this.$emit(status ? "open" : "close"); |
|
||||||
}, this.duration); |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
@mixin vue-flex($direction: row) { |
|
||||||
/* #ifndef APP-NVUE */ |
|
||||||
display: flex; |
|
||||||
flex-direction: $direction; |
|
||||||
/* #endif */ |
|
||||||
} |
|
||||||
.u-drawer { |
|
||||||
/* #ifndef APP-NVUE */ |
|
||||||
display: block; |
|
||||||
/* #endif */ |
|
||||||
position: fixed; |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
bottom: 0; |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-content { |
|
||||||
/* #ifndef APP-NVUE */ |
|
||||||
display: block; |
|
||||||
/* #endif */ |
|
||||||
position: absolute; |
|
||||||
z-index: 1003; |
|
||||||
transition: all 0.25s linear; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer__scroll-view { |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-left { |
|
||||||
top: 0; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-right { |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
bottom: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-top { |
|
||||||
top: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-bottom { |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-center { |
|
||||||
@include vue-flex; |
|
||||||
flex-direction: column; |
|
||||||
bottom: 0; |
|
||||||
left: 0; |
|
||||||
right: 0; |
|
||||||
top: 0; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
opacity: 0; |
|
||||||
z-index: 99999; |
|
||||||
} |
|
||||||
|
|
||||||
.u-mode-center-box { |
|
||||||
min-width: 100rpx; |
|
||||||
min-height: 100rpx; |
|
||||||
/* #ifndef APP-NVUE */ |
|
||||||
display: block; |
|
||||||
/* #endif */ |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-content-visible.u-drawer-center { |
|
||||||
transform: scale(1); |
|
||||||
opacity: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.u-animation-zoom { |
|
||||||
transform: scale(1.15); |
|
||||||
} |
|
||||||
|
|
||||||
.u-drawer-content-visible { |
|
||||||
transform: translate3D(0px, 0px, 0px) !important; |
|
||||||
} |
|
||||||
|
|
||||||
.u-close { |
|
||||||
position: absolute; |
|
||||||
z-index: 3; |
|
||||||
} |
|
||||||
|
|
||||||
.u-close--top-left { |
|
||||||
top: 30rpx; |
|
||||||
left: 30rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.u-close--top-right { |
|
||||||
top: 30rpx; |
|
||||||
right: 30rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.u-close--bottom-left { |
|
||||||
bottom: 30rpx; |
|
||||||
left: 30rpx; |
|
||||||
} |
|
||||||
|
|
||||||
.u-close--bottom-right { |
|
||||||
right: 30rpx; |
|
||||||
bottom: 30rpx; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,155 +0,0 @@ |
|||||||
## 导入即用 全端支持 |
|
||||||
|
|
||||||
### 有问题 + wx : zy597172583 标注来意 可评论 看到及时回复 |
|
||||||
1.使用方式 |
|
||||||
|
|
||||||
```javascript |
|
||||||
<template> |
|
||||||
<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup.filter" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
import FilterPopup from "@/components/filter-popup/filter-popup"; |
|
||||||
export default { |
|
||||||
components: { |
|
||||||
FilterPopup, |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
//筛选表单数据 |
|
||||||
filterData: [ |
|
||||||
{ |
|
||||||
children: false,//是否有子项 |
|
||||||
title: "意向度", |
|
||||||
key: "intention_type", //键名 接收对象名字 |
|
||||||
keyValue: "value", //获取的值是哪个 |
|
||||||
isRadio: true, //是否单选 否则多选 |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
title: "一般意向", |
|
||||||
id: 1, |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "中意向度", |
|
||||||
id: 2, |
|
||||||
value: 2, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "高意向度", |
|
||||||
id: 3, |
|
||||||
value: 3, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
children: false,//是否有子项 |
|
||||||
title: "手机号码", |
|
||||||
key: "is_bind_phone", //键名 接收对象名字 |
|
||||||
keyValue: "value", //获取的值是哪个 |
|
||||||
isRadio: true, //是否单选 否则多选 |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
title: "未绑定", |
|
||||||
value: 0, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "已绑定", |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
children: false,//是否有子项 |
|
||||||
title: "企微好友", |
|
||||||
key: "is_work_customer", //键名 接收对象名字 |
|
||||||
keyValue: "value", //获取的值是哪个 |
|
||||||
isRadio: true, //是否单选 否则多选 |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
title: "未添加", |
|
||||||
value: 0, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "已添加", |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
children: true,//是否有子项 |
|
||||||
isRadio: false, //是否单选 |
|
||||||
title: "标签内容", |
|
||||||
key: "label", //键名 接收对象名字 |
|
||||||
keyValue: "id", //获取的值是哪个 |
|
||||||
data: [ |
|
||||||
{ |
|
||||||
title: "客户重要程度", |
|
||||||
id: 22, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
title: "一般意向2", |
|
||||||
id: 32, |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "一般意向3", |
|
||||||
id: 12, |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "客户重要程度2", |
|
||||||
id: 122, |
|
||||||
children: [ |
|
||||||
{ |
|
||||||
title: "一般意向2", |
|
||||||
id: 43, |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: "一般意向3", |
|
||||||
id: 23, |
|
||||||
value: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
], //筛选数据 |
|
||||||
filterForm: {}, //选中的表单 |
|
||||||
}; |
|
||||||
}, |
|
||||||
} |
|
||||||
``` |
|
||||||
|
|
||||||
2.组件props |
|
||||||
|
|
||||||
| 参数名 | 类型 | 介绍 | |
|
||||||
| ---------- | ------- | ------------------------------------------------- | |
|
||||||
| form | Object | .sync双向绑定的表单值 ， 可传入显示初始哪些被选中 | |
|
||||||
| data | Array | 动态渲染选项的数据数组 | |
|
||||||
| title | String | 标题 | |
|
||||||
| height | String | 弹出层高度 单位 rpx px upx 百分比 vw等 | |
|
||||||
| themeColor | String | 组件主体颜色 默认：\#0066ff | |
|
||||||
| mask | Boolean | 是否显示弹出遮盖层 | |
|
||||||
|
|
||||||
3.data 参数 |
|
||||||
|
|
||||||
| 参数名 | 类型 | 是否必填 | 介绍 | |
|
||||||
| -------- | ------- | -------- | ------------------------------------------------------------ | |
|
||||||
| children | Boolean | 是 | 是否有子项 | |
|
||||||
| data | Array | 是 | 渲染出来的选项数据 | |
|
||||||
| isRadio | Boolean | 是 | 是否单选 单个选项指定，单选还是多选 | |
|
||||||
| title | String | 是 | 标签内容标题 | |
|
||||||
| key | String | 是 | 接收对象名字 会作为@finsh返回对象的键名 | |
|
||||||
| keyValue | String | 是 | 获取的值是哪个 自定义指定获取哪个键值 value还是id或者自己定义的 | |
|
||||||
|
|
||||||
4.事件 |
|
||||||
|
|
||||||
| 事件名 | 返回参数 | 简介 | |
|
||||||
| ------ | -------- | ----------------------------------------- | |
|
||||||
| finsh | Object | 点击确定时触发 返回参数为选中值的对象数组 | |
|
||||||
| close | 无 | 组件点击关闭时触发 | |
|
||||||
|
|
||||||
 |
|
||||||
@ -1,596 +0,0 @@ |
|||||||
<template> |
|
||||||
<popup |
|
||||||
:mask="mask" |
|
||||||
border-radius="50" |
|
||||||
v-model="acceptValue" |
|
||||||
mode="bottom" |
|
||||||
class="filter-popup" |
|
||||||
:height="height" |
|
||||||
@close="close" |
|
||||||
:style="{ '--color': themeColor }" |
|
||||||
:mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }" |
|
||||||
> |
|
||||||
<view class="top-title flex-row-sb" v-if="showTop"> |
|
||||||
<view class="popup-title flex-row-c-c">{{ title }}</view> |
|
||||||
<text class="saasIcon flex-row-c-c" @click="close"></text> |
|
||||||
</view> |
|
||||||
|
|
||||||
<scroll-view class="select-scroll" scroll-y :style="{ height: `calc( ${height} - 120rpx - 152rpx )` }"> |
|
||||||
<view class="select-main"> |
|
||||||
<view v-if="showCategory" class="select-item"> |
|
||||||
<view class="title">学科专业</view> |
|
||||||
<view class="category-wrap"> |
|
||||||
<picker mode="multiSelector" v-model="category" @change="change" @columnchange="columnchange" :range="categories" range-key="title"> |
|
||||||
<view class="category">{{categoryName ? categoryName : '请选择'}}</view> |
|
||||||
</picker> |
|
||||||
<uni-icons v-if="categoryName" class="icon" type="closeempty" size="16" color="#333" @click.stop="delCatagory"></uni-icons> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
|
|
||||||
<view class="select-item" v-for="(item, index) in data" :key="index"> |
|
||||||
<view class="title"> {{ item.title }} </view> |
|
||||||
<view class="tag-list" v-if="!item.children"> |
|
||||||
<view |
|
||||||
class="tag-item" |
|
||||||
:class="[acceptForm[item.key].includes(item2.value) ? 'select-on' : '']" |
|
||||||
v-for="(item2, index2) in item.data" |
|
||||||
:key="index2" |
|
||||||
@click="selectTagBuyValueOrId(item2, item.key, item.keyValue, item.isRadio)" |
|
||||||
> |
|
||||||
{{ item2.title }} |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
<!-- 有childer --> |
|
||||||
<view class="select-childer" v-else v-for="item2 in item.data" :key="item2.id"> |
|
||||||
<view class="childer-title flex-row--c">{{ item2.title }}</view> |
|
||||||
<view class="tag-list"> |
|
||||||
<view |
|
||||||
class="tag-item" |
|
||||||
:class="[acceptForm[item.key].includes(item3.id) ? 'select-on' : '']" |
|
||||||
v-for="item3 in item2.children" |
|
||||||
:key="item3.id" |
|
||||||
@click="selectTagBuyValueOrId(item3, item.key, item.keyValue, item.isRadio)" |
|
||||||
> |
|
||||||
{{ item3.title }} |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</scroll-view> |
|
||||||
|
|
||||||
<view class="filter-button flex-row-c"> |
|
||||||
<view class="btn flex-row"> |
|
||||||
<view class="btn-1 flex-row-c-c" @click="reset">重置</view> |
|
||||||
<view class="btn-2 flex-row-c-c" @click="finsh">完成</view> |
|
||||||
</view> |
|
||||||
</view> |
|
||||||
</popup> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import { courseDiscipline, courseProfessionalClass, courseProfessional } from '@/apis/modules/product.js' |
|
||||||
import Popup from './components/popup.vue'; |
|
||||||
export default { |
|
||||||
components:{ |
|
||||||
Popup |
|
||||||
}, |
|
||||||
name: "filter-popup", |
|
||||||
props: { |
|
||||||
//选中的表单 |
|
||||||
form: { |
|
||||||
type: Object, |
|
||||||
default: () => {}, |
|
||||||
}, |
|
||||||
//主题颜色 |
|
||||||
themeColor: { |
|
||||||
type: String, |
|
||||||
default: "#0066ff", |
|
||||||
}, |
|
||||||
//渲染数据 |
|
||||||
data: { |
|
||||||
type: Array, |
|
||||||
default: () => [], |
|
||||||
}, |
|
||||||
//标题 |
|
||||||
title: { |
|
||||||
type: String, |
|
||||||
default: "请选择", |
|
||||||
}, |
|
||||||
value: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
mask: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
height: { |
|
||||||
type: String, |
|
||||||
default: "600rpx", |
|
||||||
}, |
|
||||||
//是否显示退出按钮 |
|
||||||
showTop: { |
|
||||||
type: Boolean, |
|
||||||
default: true, |
|
||||||
}, |
|
||||||
//是否显示学科专业选择 |
|
||||||
showCategory: { |
|
||||||
type: Boolean, |
|
||||||
default: false, |
|
||||||
}, |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
// 接收表单 |
|
||||||
acceptForm: { |
|
||||||
get() { |
|
||||||
this.originForm = JSON.parse(JSON.stringify(this.form)) |
|
||||||
if (Object.keys(this.form).length) { |
|
||||||
return this.form; |
|
||||||
} else { |
|
||||||
let obj = {}; |
|
||||||
this.data.forEach((item) => { |
|
||||||
obj[item.key] = []; |
|
||||||
}); |
|
||||||
return obj; |
|
||||||
} |
|
||||||
}, |
|
||||||
set(nval) { |
|
||||||
// console.log("set Form :>> ", nval); |
|
||||||
this.$emit("update:form", nval); |
|
||||||
}, |
|
||||||
}, |
|
||||||
acceptValue: { |
|
||||||
get() { |
|
||||||
return this.value; |
|
||||||
}, |
|
||||||
set(nval) { |
|
||||||
this.$emit("input", nval); |
|
||||||
}, |
|
||||||
}, |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
originForm: {}, |
|
||||||
|
|
||||||
categoryName:'', |
|
||||||
categoryId: '', |
|
||||||
professionalCategoryId: '', |
|
||||||
professionalId: '', |
|
||||||
categories:[], |
|
||||||
category: [] |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.getDis() |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
//选择存value 还是id |
|
||||||
selectTagBuyValueOrId(item, key, keyValue, isRadio) { |
|
||||||
//如果是单选 |
|
||||||
if (isRadio) { |
|
||||||
if (keyValue == "value") { |
|
||||||
if (this.acceptForm[key].some((value) => value === item.value)) { |
|
||||||
this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value); |
|
||||||
return; |
|
||||||
} |
|
||||||
this.acceptForm[key] = []; |
|
||||||
this.acceptForm[key].push(item.value); |
|
||||||
} else { |
|
||||||
if (this.acceptForm[key].some((id) => id === item.id)) { |
|
||||||
this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id); |
|
||||||
return; |
|
||||||
} |
|
||||||
this.acceptForm[key] = []; |
|
||||||
this.acceptForm[key].push(item.id); |
|
||||||
} |
|
||||||
} else { |
|
||||||
if (keyValue == "value") { |
|
||||||
this.acceptForm[key].some((value) => value === item.value) |
|
||||||
? (this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value)) |
|
||||||
: this.acceptForm[key].push(item.value); |
|
||||||
} else { |
|
||||||
this.acceptForm[key].some((id) => id === item.id) |
|
||||||
? (this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id)) |
|
||||||
: this.acceptForm[key].push(item.id); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
this.acceptForm = this.acceptForm; |
|
||||||
}, |
|
||||||
|
|
||||||
// 查询学科类别 |
|
||||||
async getDis() { |
|
||||||
const { list } = await courseDiscipline() |
|
||||||
list.map(e => { |
|
||||||
e.id = e.disciplineId |
|
||||||
e.title = e.disciplineName |
|
||||||
}) |
|
||||||
this.categories.push(list) |
|
||||||
|
|
||||||
const res = await courseProfessionalClass(1) |
|
||||||
res.list.map(e => { |
|
||||||
e.id = e.professionalClassId |
|
||||||
e.title = e.professionalClassName |
|
||||||
}) |
|
||||||
this.categories.push(res.list) |
|
||||||
|
|
||||||
const res1 = await courseProfessional(1) |
|
||||||
res1.list.map(e => { |
|
||||||
e.id = e.professionalId |
|
||||||
e.title = e.professionalName |
|
||||||
}) |
|
||||||
this.categories.push(res1.list) |
|
||||||
}, |
|
||||||
// 学科专业确定回调 |
|
||||||
change(e) { |
|
||||||
const i0 = e.detail.value[0] |
|
||||||
const i1 = e.detail.value[1] |
|
||||||
const i2 = e.detail.value[2] |
|
||||||
const i1IsNumber = typeof i1 === 'number' |
|
||||||
const i2IsNumber = typeof i2 === 'number' |
|
||||||
const list = this.categories |
|
||||||
this.categoryId = list[0][i0].id |
|
||||||
this.categoryName = list[0][i0].title |
|
||||||
|
|
||||||
this.professionalCategoryId = '' |
|
||||||
this.professionalId = '' |
|
||||||
if (i1IsNumber && list[1].length > 0) { |
|
||||||
this.professionalCategoryId = list[1][i1].id |
|
||||||
this.categoryName += '/' + list[1][i1].title |
|
||||||
} |
|
||||||
if (i2IsNumber && list[2].length > 0) { |
|
||||||
this.professionalId = list[2][i2].id |
|
||||||
this.categoryName += '/' + list[2][i2].title |
|
||||||
} |
|
||||||
}, |
|
||||||
// 学科专业切换回调 |
|
||||||
async columnchange(e) { |
|
||||||
const { column } = e.detail |
|
||||||
if (column == 0) { |
|
||||||
const { list } = await courseProfessionalClass(this.categories[0][e.detail.value].id) |
|
||||||
list.map(e => { |
|
||||||
e.id = e.professionalClassId |
|
||||||
e.title = e.professionalClassName |
|
||||||
}) |
|
||||||
this.categories[1] = list |
|
||||||
this.categories[2] = [] |
|
||||||
this.$set(this.categories, 1, list) |
|
||||||
console.log('inner',this.categories) |
|
||||||
} else |
|
||||||
if (column == 1) { |
|
||||||
const { list } = await courseProfessional(this.categories[1][e.detail.value].id) |
|
||||||
list.map(e => { |
|
||||||
e.id = e.professionalId |
|
||||||
e.title = e.professionalName |
|
||||||
}) |
|
||||||
this.categories[2] = list |
|
||||||
this.$set(this.categories, 2, list) |
|
||||||
} |
|
||||||
}, |
|
||||||
// 删除学科专业 |
|
||||||
delCatagory() { |
|
||||||
this.category = [] |
|
||||||
this.categoryName = '' |
|
||||||
this.categoryId = '' |
|
||||||
this.professionalCategoryId = '' |
|
||||||
this.professionalId = '' |
|
||||||
}, |
|
||||||
|
|
||||||
// 点击完成 |
|
||||||
finsh() { |
|
||||||
if (this.showCategory) { |
|
||||||
this.acceptForm.categoryId = this.categoryId |
|
||||||
this.acceptForm.professionalCategoryId = this.professionalCategoryId |
|
||||||
this.acceptForm.professionalId = this.professionalId |
|
||||||
this.acceptForm.categoryName = this.categoryName |
|
||||||
} |
|
||||||
this.$emit("finsh", this.acceptForm); |
|
||||||
this.$emit("input", false); |
|
||||||
}, |
|
||||||
close() { |
|
||||||
this.$emit("input", false); |
|
||||||
this.$emit("close"); |
|
||||||
}, |
|
||||||
//重置 |
|
||||||
reset() { |
|
||||||
this.acceptForm = {} |
|
||||||
this.categoryId = '' |
|
||||||
this.professionalCategoryId = '' |
|
||||||
this.professionalId = '' |
|
||||||
this.categoryName = '' |
|
||||||
this.$nextTick(() => { |
|
||||||
this.$emit("finsh", this.acceptForm); |
|
||||||
this.$emit("input", false); |
|
||||||
}) |
|
||||||
}, |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
<style lang="scss" scoped> |
|
||||||
@font-face { |
|
||||||
font-family: 'iconfont'; /* Project id 2729410 */ |
|
||||||
src: url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff2?t=1628330097695') format('woff2'), |
|
||||||
url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff?t=1628330097695') format('woff'), |
|
||||||
url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.ttf?t=1628330097695') format('truetype'); |
|
||||||
} |
|
||||||
.saasIcon { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-webkit-text-stroke-width: 0.2px; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
.filter-popup { |
|
||||||
color: #000000; |
|
||||||
.top-title { |
|
||||||
font-weight: bold; |
|
||||||
height: 90rpx; |
|
||||||
margin-left: 70rpx; |
|
||||||
font-size: 30rpx; |
|
||||||
margin-top: 20rpx; |
|
||||||
.popup-title { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
.saasIcon { |
|
||||||
// width: 150rpx; |
|
||||||
height: 100%; |
|
||||||
padding-right: 70rpx; |
|
||||||
} |
|
||||||
} |
|
||||||
.select-scroll { |
|
||||||
} |
|
||||||
.category-wrap { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
margin-top: 10rpx; |
|
||||||
.icon { |
|
||||||
margin-left: 10rpx; |
|
||||||
} |
|
||||||
} |
|
||||||
.category { |
|
||||||
font-size: 28rpx; |
|
||||||
} |
|
||||||
.select-main { |
|
||||||
padding: 0 32rpx; |
|
||||||
.select-item { |
|
||||||
.title { |
|
||||||
font-weight: bold; |
|
||||||
font-size: 28rpx; |
|
||||||
color: #000000; |
|
||||||
padding-top: 30rpx; |
|
||||||
} |
|
||||||
.tag-list { |
|
||||||
display: flex; |
|
||||||
flex-wrap: wrap; |
|
||||||
margin-left: -12rpx; |
|
||||||
.tag-item { |
|
||||||
margin-top: 20rpx; |
|
||||||
padding: 10rpx 40rpx; |
|
||||||
font-size: 26rpx; |
|
||||||
background: #f5f5f5; |
|
||||||
color: #484848; |
|
||||||
border-radius: 36rpx; |
|
||||||
margin-left: 12rpx; |
|
||||||
&.select-on { |
|
||||||
background: var(--color); |
|
||||||
color: #fff; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.select-childer { |
|
||||||
.childer-title { |
|
||||||
color: #484848; |
|
||||||
font-size: 28rpx; |
|
||||||
border-bottom: 1px solid #f5f5f5; |
|
||||||
height: 80rpx; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
.filter-button { |
|
||||||
width: 100%; |
|
||||||
height: 152rpx; |
|
||||||
background: #ffffff; |
|
||||||
box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.06); |
|
||||||
position: fixed; |
|
||||||
bottom: 0; |
|
||||||
.btn { |
|
||||||
border-radius: 100rpx; |
|
||||||
margin-top: 26rpx; |
|
||||||
width: 680rpx; |
|
||||||
height: 80rpx; |
|
||||||
color: #ffffff; |
|
||||||
font-size: 28rpx; |
|
||||||
overflow: hidden; |
|
||||||
.btn-1 { |
|
||||||
flex: 1; |
|
||||||
background: linear-gradient(271deg, #2698fb 0%, #84c6ff 100%); |
|
||||||
} |
|
||||||
.btn-2 { |
|
||||||
flex: 1; |
|
||||||
background: linear-gradient(90deg, #0066ff 0%, #1371ff 100%); |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// 自定义css |
|
||||||
.flex-row { |
|
||||||
display: flex; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-c { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row--c { |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-c-c { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-sb-c { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-sb-t { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-sb-b { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-c-sb { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-sb { |
|
||||||
display: flex; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-l { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-l-c { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-start; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-c-t { |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-r-c { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row-r { |
|
||||||
display: flex; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-row--b { |
|
||||||
display: flex; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col--c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-c-c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-sb-c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-c-sb { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-sb { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-t-c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-start; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-c-l { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-t { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-b { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-b-c { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: flex-end; |
|
||||||
align-items: center; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col-c-l { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
justify-content: center; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col--l { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: flex-start; |
|
||||||
} |
|
||||||
|
|
||||||
.flex-col--r { |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
align-items: flex-end; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,10 +0,0 @@ |
|||||||
/** |
|
||||||
/** |
|
||||||
* 产品 配置文件 |
|
||||||
* @author yujialong |
|
||||||
*/ |
|
||||||
|
|
||||||
export default { |
|
||||||
normalIcon: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220609/png/1534733700683030528.png', // 通用图标
|
|
||||||
dataIcon: 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220627/png/1541256164447641600.png' // 数据图标
|
|
||||||
} |
|
||||||
@ -1,39 +0,0 @@ |
|||||||
/** |
|
||||||
* @file 百度移动统计配置文件 |
|
||||||
*/ |
|
||||||
|
|
||||||
module.exports = { |
|
||||||
/** |
|
||||||
* 从百度移动统计获取的AppKey |
|
||||||
* @type {string} |
|
||||||
*/ |
|
||||||
appKey: 'ce2fa79380', |
|
||||||
|
|
||||||
/** |
|
||||||
* 是否使用了插件 |
|
||||||
* @type {boolean} |
|
||||||
*/ |
|
||||||
hasPlugin: false, |
|
||||||
|
|
||||||
/** |
|
||||||
* 是否获取当前的地理位置和速度信息 |
|
||||||
* @type {boolean} |
|
||||||
*/ |
|
||||||
getLocation: false, |
|
||||||
|
|
||||||
/** |
|
||||||
* 是否获取组件滚动信息 |
|
||||||
* @type {boolean} |
|
||||||
*/ |
|
||||||
getComponentScroll: false, |
|
||||||
/** |
|
||||||
* 是否开启了A/B 测试 |
|
||||||
* @type {boolean} |
|
||||||
*/ |
|
||||||
hasABTest: false, |
|
||||||
/** |
|
||||||
* 是否开启热力图功能 |
|
||||||
* @type {boolean} |
|
||||||
*/ |
|
||||||
hasHeatmap: false, |
|
||||||
}; |
|
||||||
File diff suppressed because one or more lines are too long
@ -1,18 +0,0 @@ |
|||||||
|
|
||||||
import uma from 'umtrack-wx'; |
|
||||||
uma.init({ |
|
||||||
appKey: '64cc98d5a1a164591b62da3e', // 由友盟分配的APP_KEY
|
|
||||||
useOpenid: true, |
|
||||||
// 使用Openid进行统计，此项为false时将使用友盟+uuid进行用户统计。
|
|
||||||
// 使用Openid来统计微信小程序的用户，会使统计的指标更为准确，对系统准确性要求高的应用推荐使用Openid
|
|
||||||
autoGetOpenid: true, |
|
||||||
// 使用openid进行统计时，是否授权友盟自动获取Openid，
|
|
||||||
// 如若需要，请到友盟后台"设置管理-应用信息"(https://mp.umeng.com/setting/appset)中设置appId及secret
|
|
||||||
debug: true,// 是否打开调试模式
|
|
||||||
uploadUserInfo: true, // 自动上传用户信息，设为false取消上传，默认为false
|
|
||||||
enableVerify: true |
|
||||||
}); |
|
||||||
uma.install = function(Vue) { |
|
||||||
Vue.prototype.$uma = uma; |
|
||||||
} |
|
||||||
export default uma; |
|
||||||
@ -1,32 +0,0 @@ |
|||||||
@font-face { |
|
||||||
font-family: "iconfont";
src: url('/static/iconfont/iconfont.ttf') format('truetype'); |
|
||||||
} |
|
||||||
|
|
||||||
.iconfont { |
|
||||||
font-family: "iconfont" !important; |
|
||||||
font-size: 16px; |
|
||||||
font-style: normal; |
|
||||||
-webkit-font-smoothing: antialiased; |
|
||||||
-moz-osx-font-smoothing: grayscale; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-qrcode:before { |
|
||||||
content: "\e7dd"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-dingdan:before { |
|
||||||
content: "\e601"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-product:before { |
|
||||||
content: "\e788"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-edit:before { |
|
||||||
content: "\e621"; |
|
||||||
} |
|
||||||
|
|
||||||
.icon-filter:before { |
|
||||||
content: "\e6b9"; |
|
||||||
} |
|
||||||
|
|
||||||
Binary file not shown.
Loading…
Reference in new issue