355 lines
7.3 KiB
Vue
355 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="uni-popup-dialog">
|
|||
|
|
<view class="uni-dialog-title">
|
|||
|
|
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 二维码窗口 -->
|
|||
|
|
<view style="padding: 5px 15px;">
|
|||
|
|
<view style="width: 270px;height: 270px;">
|
|||
|
|
<img style="width: 100%;height: 100%;" src="../../static/erweima.png" alt="">
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 28px;padding-bottom: 15px;text-align: center;">微信扫码，即享服务</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="uni-dialog-button-group">
|
|||
|
|
<view class="uni-dialog-button" @click="close">
|
|||
|
|
<text class="uni-dialog-button-text">取消</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="uni-dialog-button uni-border-left" @click="isCiphar==1?onCiphar():isCiphar==2?onReject():onOk()">
|
|||
|
|
<text class="uni-dialog-button-text uni-button-color">确定</text>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<view v-if="popup.isDesktop" class="uni-popup-dialog__close" @click="close" style="top:16px;right: 10px;">
|
|||
|
|
<span class="uni-popup-dialog__close-icon " style="position: absolute;top: 0;right: 0;"></span>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<keypress @esc="close" @enter="onOk" />
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// #ifdef H5
|
|||
|
|
import keypress from './keypress.js'
|
|||
|
|
// #endif
|
|||
|
|
/**
|
|||
|
|
* PopUp 弹出层-对话框样式
|
|||
|
|
* @description 弹出层-对话框样式
|
|||
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|||
|
|
* @property {String} value input 模式下的默认值
|
|||
|
|
* @property {String} placeholder input 模式下输入提示
|
|||
|
|
* @property {String} type = [success|warning|info|error] 主题样式
|
|||
|
|
* @value success 成功
|
|||
|
|
* @value warning 提示
|
|||
|
|
* @value info 消息
|
|||
|
|
* @value error 错误
|
|||
|
|
* @property {String} mode = [base|input] 模式、
|
|||
|
|
* @value base 基础对话框
|
|||
|
|
* @value input 可输入对话框
|
|||
|
|
* @property {String} content 对话框内容
|
|||
|
|
* @property {Boolean} beforeClose 是否拦截取消事件
|
|||
|
|
* @event {Function} confirm 点击确认按钮触发
|
|||
|
|
* @event {Function} close 点击取消按钮触发
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "uniPopupDialog",
|
|||
|
|
components: {
|
|||
|
|
// #ifdef H5
|
|||
|
|
keypress
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
value: {
|
|||
|
|
type: [String, Array],
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: '请输入内容'
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 对话框主题 success/warning/info/error 默认 success
|
|||
|
|
*/
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'error'
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 对话框模式 base/input
|
|||
|
|
*/
|
|||
|
|
mode: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'base'
|
|||
|
|
},
|
|||
|
|
value1: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
value2: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
isCiphar: {
|
|||
|
|
type: Number,
|
|||
|
|
default: 0
|
|||
|
|
},
|
|||
|
|
buildingName: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 对话框标题
|
|||
|
|
*/
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 对话框内容
|
|||
|
|
*/
|
|||
|
|
content: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
|
|||
|
|
*/
|
|||
|
|
beforeClose: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
dialogType: 'error',
|
|||
|
|
focus: false,
|
|||
|
|
val: '',
|
|||
|
|
val1: '',
|
|||
|
|
val2: '',
|
|||
|
|
password: '',
|
|||
|
|
passwordSure: '',
|
|||
|
|
rejectResult:''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
inject: ['popup'],
|
|||
|
|
watch: {
|
|||
|
|
type(val) {
|
|||
|
|
this.dialogType = val
|
|||
|
|
},
|
|||
|
|
mode(val) {
|
|||
|
|
if (val === 'input') {
|
|||
|
|
this.dialogType = 'info'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
value(val) {
|
|||
|
|
this.val = val
|
|||
|
|
},
|
|||
|
|
password(val) {
|
|||
|
|
if (val.length > 6) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: "只可设置6位数字密码",
|
|||
|
|
success() {
|
|||
|
|
this.password = ''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 对话框遮罩不可点击
|
|||
|
|
this.popup.mkclick = false
|
|||
|
|
if (this.mode === 'input') {
|
|||
|
|
this.dialogType = 'info'
|
|||
|
|
this.val = this.value
|
|||
|
|
this.val1 = this.value1
|
|||
|
|
this.val2 = this.value2
|
|||
|
|
// console.log(this.value)
|
|||
|
|
} else {
|
|||
|
|
this.dialogType = this.type
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.focus = true
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 正则判断是否为小数，禁止填写小数
|
|||
|
|
getInput(e) {
|
|||
|
|
if (!/^\d+$/.test(e.detail.value)) {
|
|||
|
|
this.password = ''
|
|||
|
|
}
|
|||
|
|
if(!/^[0-9]+$/.test(e.detail.value) && e.detail.value){
|
|||
|
|
uni.showToast({
|
|||
|
|
icon:"none",
|
|||
|
|
title:"请输入数字作为密码",
|
|||
|
|
success:()=> {
|
|||
|
|
// this.$set(this.$data,"password",'')
|
|||
|
|
// console.log(this.password)
|
|||
|
|
// this.password = ''
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击确认按钮
|
|||
|
|
*/
|
|||
|
|
onOk() {
|
|||
|
|
var arr = [],
|
|||
|
|
val1 = this.val1,
|
|||
|
|
val2 = this.val2
|
|||
|
|
arr.push(val1, val2)
|
|||
|
|
this.$emit('confirm', arr)
|
|||
|
|
},
|
|||
|
|
onCiphar() {
|
|||
|
|
var arr = {
|
|||
|
|
password: this.password,
|
|||
|
|
passwordSure: this.passwordSure
|
|||
|
|
}
|
|||
|
|
this.$emit('confirm', arr)
|
|||
|
|
},
|
|||
|
|
onReject(){
|
|||
|
|
var data = {
|
|||
|
|
rejectResult:this.rejectResult
|
|||
|
|
}
|
|||
|
|
this.$emit('confirm', data)
|
|||
|
|
},
|
|||
|
|
/**
|
|||
|
|
* 点击取消按钮
|
|||
|
|
*/
|
|||
|
|
close() {
|
|||
|
|
if (this.beforeClose) {
|
|||
|
|
this.$emit('close', () => {
|
|||
|
|
this.popup.close()
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.popup.close()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.uni-popup-dialog {
|
|||
|
|
width: 300px;
|
|||
|
|
border-radius: 5px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-title {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding-top: 15px;
|
|||
|
|
padding-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-title-text {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-content {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 5px 15px 15px 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-content-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #6e6e6e;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-button-group {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
flex-direction: row;
|
|||
|
|
border-top-color: #f5f5f5;
|
|||
|
|
border-top-style: solid;
|
|||
|
|
border-top-width: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-button {
|
|||
|
|
/* #ifndef APP-NVUE */
|
|||
|
|
display: flex;
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
flex: 1;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 45px;
|
|||
|
|
/* #ifdef H5 */
|
|||
|
|
cursor: pointer;
|
|||
|
|
/* #endif */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-border-left {
|
|||
|
|
border-left-color: #f0f0f0;
|
|||
|
|
border-left-style: solid;
|
|||
|
|
border-left-width: 1px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-button-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-button-color {
|
|||
|
|
color: $uni-color-primary;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-dialog-input {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup__success {
|
|||
|
|
color: $uni-color-success;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup__warn {
|
|||
|
|
color: $uni-color-warning;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup__error {
|
|||
|
|
color: $uni-color-error;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup__info {
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup-dialog__close {
|
|||
|
|
display: block;
|
|||
|
|
cursor: pointer;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 9px;
|
|||
|
|
right: 17px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup-dialog__close-icon {
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 13px;
|
|||
|
|
height: 1px;
|
|||
|
|
background: #909399;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-popup-dialog__close-icon::after {
|
|||
|
|
content: '';
|
|||
|
|
display: block;
|
|||
|
|
width: 13px;
|
|||
|
|
height: 1px;
|
|||
|
|
background: #909399;
|
|||
|
|
transform: rotate(-90deg);
|
|||
|
|
}
|
|||
|
|
</style>
|