parent
5a9e8516c8
commit
4dacb5cb65
19 changed files with 1808 additions and 191 deletions
@ -0,0 +1,130 @@ |
||||
<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> |
||||
@ -0,0 +1,510 @@ |
||||
<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> |
||||
@ -0,0 +1,155 @@ |
||||
## 导入即用 全端支持 |
||||
|
||||
### 有问题 + 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 | 无 | 组件点击关闭时触发 | |
||||
|
||||
 |
||||
@ -0,0 +1,466 @@ |
||||
<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></view> <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 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 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, |
||||
}, |
||||
}, |
||||
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: {} |
||||
} |
||||
}, |
||||
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; |
||||
}, |
||||
// 点击完成 |
||||
finsh() { |
||||
this.$emit("finsh", this.acceptForm); |
||||
this.$emit("input", false); |
||||
}, |
||||
close() { |
||||
this.$emit("input", false); |
||||
this.$emit("close"); |
||||
}, |
||||
//重置 |
||||
reset() { |
||||
this.acceptForm = {} |
||||
}, |
||||
}, |
||||
}; |
||||
</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 { |
||||
} |
||||
.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> |
||||
@ -0,0 +1,12 @@ |
||||
{ |
||||
"id": "filter-popup", |
||||
"name": "筛选 菜单 筛选菜单 上拉筛选 ", |
||||
"version": "1.0.4", |
||||
"description": "筛选菜单，支持单选和多选 ， 选择后的数据通过.sync双向绑定,全端支持 导入即用", |
||||
"keywords": [ |
||||
"筛选", |
||||
"菜单", |
||||
"筛选菜单", |
||||
"上拉筛选" |
||||
] |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<view class="input"> |
||||
<uni-easyinput v-model.trim="account" placeholder="请输入账号"></uni-easyinput> |
||||
</view> |
||||
<button type="primary" @click="submit">确认</button> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { queryUserInfoDetails, updatePersonCenter } from '@/apis/modules/user.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
account: '', |
||||
hrUserInfo: {}, |
||||
personalFileList: [], |
||||
userAccountList: [], |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.getInfo() |
||||
}, |
||||
methods: { |
||||
// 获取个人信息 |
||||
getInfo() { |
||||
queryUserInfoDetails().then(({ result }) => { |
||||
this.hrUserInfo = result.hrUserInfo |
||||
this.userAccountList = result.userAccountList |
||||
}).catch(e => {}) |
||||
}, |
||||
submit() { |
||||
const { account, hrUserInfo, userAccountList } = this |
||||
if(!account) return this.$util.errMsg('请输入账号') |
||||
userAccountList[0].userId = hrUserInfo.userId |
||||
userAccountList[0].account = account |
||||
updatePersonCenter({ |
||||
hrUserInfo, |
||||
userAccountList |
||||
}).then(res => { |
||||
this.$util.sucMsg('修改成功！') |
||||
setTimeout(() => { |
||||
uni.reLaunch({ |
||||
url: '../person/person' |
||||
}) |
||||
}, 1000) |
||||
}).catch(e => {}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page { |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
} |
||||
/deep/.input { |
||||
margin-bottom: 15px; |
||||
.is-input-border { |
||||
border-color: #dedede !important; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,130 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<view class="input"> |
||||
<uni-easyinput v-model="form.email" placeholder="请填写你的邮箱" :clearable="false" /> |
||||
</view> |
||||
<view class="input code-wrap"> |
||||
<uni-easyinput class="code" v-model="form.code" placeholder="验证码" :clearable="false" /> |
||||
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ btnText }}</view> |
||||
</view> |
||||
<button type="primary" @click="submit">确认</button> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { queryUserInfoDetails, bindPhoneOrEmail, sendPhoneOrEmailCode } from '@/apis/modules/user.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
userId: '', |
||||
form: { |
||||
email: '', |
||||
code: '' |
||||
}, |
||||
codeDisabled: false, |
||||
phoneTimer: null, |
||||
phoneOpener: '', |
||||
btnText: '发送验证码', |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.getInfo() |
||||
}, |
||||
methods: { |
||||
// 获取个人信息 |
||||
getInfo() { |
||||
queryUserInfoDetails().then(({ result }) => { |
||||
this.userId = result.hrUserInfo.userId |
||||
}).catch(e => {}) |
||||
}, |
||||
// 发送验证码 |
||||
sendCode() { |
||||
const { email } = this.form |
||||
if (!email) return this.$util.errMsg('请输入邮箱') |
||||
if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)) return this.$util.errMsg('请输入正确的请输入邮箱') |
||||
sendPhoneOrEmailCode({ |
||||
userId: this.userId, |
||||
email, |
||||
types: 1 |
||||
}).then(({ message }) => { |
||||
if (message.opener) { |
||||
this.phoneCountdown() |
||||
this.phoneOpener = message.opener |
||||
} else { |
||||
this.$util.errMsg(message) |
||||
} |
||||
}).catch(res => {}) |
||||
}, |
||||
// 验证码倒计时 |
||||
phoneCountdown() { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.codeDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.btnText = `${count}秒后重试` |
||||
} else { |
||||
this.codeDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.btnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
// 提交 |
||||
submit() { |
||||
const { email, code } = this.form |
||||
if (!email) return this.$util.errMsg('请输入邮箱') |
||||
if (!code) return this.$util.errMsg('请输入验证码') |
||||
bindPhoneOrEmail({ |
||||
userId: this.userId, |
||||
email, |
||||
types: 1, |
||||
code, |
||||
opener: this.phoneOpener |
||||
}).then(res => { |
||||
this.$util.sucMsg('修改成功！') |
||||
setTimeout(() => { |
||||
uni.reLaunch({ |
||||
url: '../person/person' |
||||
}) |
||||
}, 1500) |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page { |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
} |
||||
/deep/.input { |
||||
margin-bottom: 15px; |
||||
.is-input-border { |
||||
border-color: #dedede !important; |
||||
} |
||||
} |
||||
.input { |
||||
margin-bottom: 20px; |
||||
} |
||||
.code-wrap { |
||||
display: flex; |
||||
} |
||||
.code { |
||||
flex: 1; |
||||
} |
||||
.send-code { |
||||
width: 100px; |
||||
margin-left: 20px; |
||||
text-align: center; |
||||
color: #4386ff; |
||||
font-size: 12px; |
||||
line-height: 36px; |
||||
border: 1px solid #4386ff; |
||||
border-radius: 5px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,130 @@ |
||||
<template> |
||||
<view class="page"> |
||||
<view class="input"> |
||||
<uni-easyinput v-model="form.phone" placeholder="请填写你的手机号" :clearable="false" /> |
||||
</view> |
||||
<view class="input code-wrap"> |
||||
<uni-easyinput class="code" v-model="form.code" placeholder="验证码" :clearable="false" /> |
||||
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ btnText }}</view> |
||||
</view> |
||||
<button type="primary" @click="submit">确认</button> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import { queryUserInfoDetails, bindPhoneOrEmail, sendPhoneOrEmailCode } from '@/apis/modules/user.js' |
||||
export default { |
||||
data() { |
||||
return { |
||||
userId: '', |
||||
form: { |
||||
phone: '', |
||||
code: '' |
||||
}, |
||||
codeDisabled: false, |
||||
phoneTimer: null, |
||||
phoneOpener: '', |
||||
btnText: '发送验证码', |
||||
} |
||||
}, |
||||
onShow() { |
||||
this.getInfo() |
||||
}, |
||||
methods: { |
||||
// 获取个人信息 |
||||
getInfo() { |
||||
queryUserInfoDetails().then(({ result }) => { |
||||
this.userId = result.hrUserInfo.userId |
||||
}).catch(e => {}) |
||||
}, |
||||
// 发送验证码 |
||||
sendCode() { |
||||
const { phone } = this.form |
||||
if (!phone) return this.$util.errMsg('请输入手机号') |
||||
if (!/^1[3456789]\d{9}$/.test(phone) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(phone)) return this.$util.errMsg('请输入正确的手机号') |
||||
sendPhoneOrEmailCode({ |
||||
userId: this.userId, |
||||
phone, |
||||
types: 2 |
||||
}).then(({ message }) => { |
||||
if (message.opener) { |
||||
this.phoneCountdown() |
||||
this.phoneOpener = message.opener |
||||
} else { |
||||
this.$util.errMsg(message) |
||||
} |
||||
}).catch(res => {}) |
||||
}, |
||||
// 验证码倒计时 |
||||
phoneCountdown() { |
||||
let count = 60 |
||||
if (!this.phoneTimer) { |
||||
this.codeDisabled = true |
||||
this.phoneTimer = setInterval(() => { |
||||
if (count > 0) { |
||||
count-- |
||||
this.btnText = `${count}秒后重试` |
||||
} else { |
||||
this.codeDisabled = false |
||||
clearInterval(this.phoneTimer) |
||||
this.phoneTimer = null |
||||
this.btnText = `发送验证码` |
||||
} |
||||
}, 1000) |
||||
} |
||||
}, |
||||
// 提交 |
||||
submit() { |
||||
const { phone, code } = this.form |
||||
if (!phone) return this.$util.errMsg('请输入手机号') |
||||
if (!code) return this.$util.errMsg('请输入验证码') |
||||
bindPhoneOrEmail({ |
||||
userId: this.userId, |
||||
phone, |
||||
types: 2, |
||||
code, |
||||
opener: this.phoneOpener |
||||
}).then(res => { |
||||
this.$util.sucMsg('修改成功！') |
||||
setTimeout(() => { |
||||
uni.reLaunch({ |
||||
url: '../person/person' |
||||
}) |
||||
}, 1500) |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.page { |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
} |
||||
/deep/.input { |
||||
margin-bottom: 15px; |
||||
.is-input-border { |
||||
border-color: #dedede !important; |
||||
} |
||||
} |
||||
.input { |
||||
margin-bottom: 20px; |
||||
} |
||||
.code-wrap { |
||||
display: flex; |
||||
} |
||||
.code { |
||||
flex: 1; |
||||
} |
||||
.send-code { |
||||
width: 100px; |
||||
margin-left: 20px; |
||||
text-align: center; |
||||
color: #4386ff; |
||||
font-size: 12px; |
||||
line-height: 36px; |
||||
border: 1px solid #4386ff; |
||||
border-radius: 5px; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue