167 lines
4.2 KiB
Vue
167 lines
4.2 KiB
Vue
<template>
|
|
<view :animation="anidatamask" class="_mask" @tap="close('mask')" v-if="popsh" :style="{background:'#00000044',zIndex:50020,opacity:0}"></view>
|
|
<view :animation="anidatapop" v-if="popsh" class="_dialog" :style="dialogstyle" @tap="nobtnclose" style="z-index:50020">
|
|
<view class="_title" v-if="title">{{title}}</view>
|
|
<view class="_content" :style="{maxHeight:maxheight,height:height}">
|
|
<view v-if="html" v-html="html"></view>
|
|
<view v-if="ele" style="padding:1em;">
|
|
<view v-if="content" v-html="tobr(content)" style="padding-bottom:1em;"></view>
|
|
<ciy-input v-if="ele == 'input'" bb v-model="inputtxt"></ciy-input>
|
|
<view v-else>
|
|
<ciy-textarea bb v-model="inputtxt"></ciy-textarea>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="content" v-html="tobr(content)" style="padding:1.5em 0.5em;" :style="{textAlign:align}"></view>
|
|
<view style="display: flex;gap: 0.5em;justify-content: flex-end;padding: 0.5em 1em;" v-if="btns.length > 0">
|
|
<view v-for="(item,index) in btns" :key="index" class="btn" :class="item.cls" @tap="chkbtn(item.btn)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
._dialog {
|
|
position: fixed;
|
|
left: 1.5em;
|
|
right: 1.5em;
|
|
border: 1px solid var(--bg6);
|
|
border-radius: 0.5em;
|
|
background: var(--bg1);
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
|
|
._dialog ._title {
|
|
line-height: 1.5em;
|
|
background: linear-gradient(150deg, var(--bg2), var(--bg4));
|
|
padding: 0.5em 1em;
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
}
|
|
|
|
._dialog ._content {
|
|
overflow: scroll;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
props: {},
|
|
data() {
|
|
return {
|
|
popsh: false,
|
|
dialogstyle: {},
|
|
anidatamask: {},
|
|
anidatapop: {},
|
|
maxheight: 'auto',
|
|
height: 'auto',
|
|
title: '',
|
|
content: '',
|
|
align: '',
|
|
ele: null,
|
|
inputtxt: '',
|
|
html: '',
|
|
btns: [],
|
|
};
|
|
},
|
|
methods: {
|
|
async Open(res) {
|
|
return new Promise(async (resolve, reject) => {
|
|
if (this.popsh) {
|
|
this.popsh = false;
|
|
await this.sleep(500);
|
|
}
|
|
this.cb = resolve;
|
|
res = res || {};
|
|
if (typeof(res) == 'string') {
|
|
res = {
|
|
content: res
|
|
};
|
|
}
|
|
this.title = res.title === undefined ? this.lang('alert.deftitle') : res.title;
|
|
this.align = res.align || 'center';
|
|
this.inputtxt = res.value ? res.value : '';
|
|
this.ele = res.ele;
|
|
if (res.content && res.content[0] == '<') {
|
|
this.html = res.content;
|
|
this.content = '';
|
|
} else {
|
|
this.html = '';
|
|
this.content = res.content;
|
|
}
|
|
const {
|
|
headerheight,
|
|
footerheight
|
|
} = await this.com_gethdft();
|
|
var app = getApp();
|
|
if (res.height) {
|
|
this.height = res.height;
|
|
this.maxheight = 'auto';
|
|
} else {
|
|
this.height = 'auto';
|
|
var height = app.globalData._sysinfo.screenHeight - 80;
|
|
this.maxheight = height + 'px';
|
|
}
|
|
this.btns = [];
|
|
if (res.btns) {
|
|
if (typeof(res.btns) == 'string') {
|
|
var btns = res.btns.split(',');
|
|
for (var i in btns) {
|
|
this.btns.push({
|
|
name: this.lang(btns[i]),
|
|
btn: btns[i]
|
|
});
|
|
}
|
|
} else {
|
|
for (var i in res.btns) {
|
|
this.btns.push(res.btns[i]);
|
|
}
|
|
}
|
|
}
|
|
var top = (app.globalData._sysinfo.windowHeight / 4);
|
|
if (top < headerheight + 20)
|
|
top = headerheight + 20;
|
|
this.dialogstyle.marginTop = top + 'px';
|
|
this.popsh = true;
|
|
this.goani('sa0.8,op0|sa1,op1,400', data => this.anidatapop = data);
|
|
this.goani('op0|op1,400', data => this.anidatamask = data);
|
|
}).catch(e => {
|
|
return e;
|
|
});
|
|
},
|
|
chkbtn(btn) {
|
|
if (!this.ele)
|
|
return this.close(btn);
|
|
if (btn == 'cancel')
|
|
return this.close({
|
|
text: '',
|
|
btn
|
|
});
|
|
this.close({
|
|
text: this.inputtxt,
|
|
btn
|
|
});
|
|
this.inputtxt = '';
|
|
},
|
|
nobtnclose() {
|
|
if (this.btns.length > 0)
|
|
return;
|
|
this.close('nobtnclose');
|
|
},
|
|
async close(btn) {
|
|
this.goani('sa1,op1|sa0.8,op0,400', data => this.anidatapop = data);
|
|
await this.goani('op0,400', data => this.anidatamask = data);
|
|
this.popsh = false;
|
|
this.cb(btn);
|
|
}
|
|
}
|
|
}
|
|
</script> |