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>
|