增加巡检内容
This commit is contained in:
xuli
238
src/components/pollingShowModal.vue
Normal file
238
src/components/pollingShowModal.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view class="model" v-if="visibleF">
|
||||
<view class="model-con">
|
||||
<view class="model-top" v-if="title">{{title}}</view>
|
||||
<view class="img-title" :class="{'m-height':!title}" v-if="!isGreen">
|
||||
<img :src="'static/images/polling/icon-Alert.png'"/>
|
||||
</view>
|
||||
<view class="img-title" :class="{'m-height':!title}" v-else>
|
||||
<img :src="'static/images/polling/icon-success.png'"/>
|
||||
</view>
|
||||
<view class="model-middle">
|
||||
<view :class="{'font-green':true,'font-orange':!isGreen}">{{contents}}</view>
|
||||
<view>{{subContents}}</view>
|
||||
<view v-if="subTimes">{{parseTime(subTimes,'{y}年{m}月{d}日 星期{a} {h}:{i}')}}</view>
|
||||
</view>
|
||||
<view class="model-bottom">
|
||||
<button type="default" class="btn-green" @click="handleConfirm" v-if="btnFlags" :loading="loading" :disabled="loading">{{btnTxts}}</button>
|
||||
<button type="primary" class="btn-cancel" @click="handleCancel" v-if="btnFlags2">{{btnCancelTxts}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref,watch } from 'vue'
|
||||
import { parseTime } from '@/utils/datetime.js';
|
||||
const props = defineProps({
|
||||
visible:{
|
||||
type:Boolean
|
||||
},
|
||||
title:{//标题
|
||||
type: String,
|
||||
},
|
||||
content: {//显示的内容
|
||||
type: String
|
||||
},
|
||||
subContent:{//确认内容
|
||||
type:String,
|
||||
default:'是否确认提交?'
|
||||
},
|
||||
subTime:{//提交的时间
|
||||
|
||||
},
|
||||
btnFlag:{//提交按钮是否显示
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
btnFlag2:{//暂不提交按钮是否显示
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
btnTxt:{//提交按钮文字
|
||||
type:String,
|
||||
default:'提交'
|
||||
},
|
||||
btnCancelTxt:{//暂不提交按钮文字
|
||||
type:String,
|
||||
default:'暂不提交'
|
||||
},
|
||||
isGreen:{//是否显示绿色
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
let visibleF = ref(props.visible)
|
||||
let titles = ref(props.title)
|
||||
let contents = ref(props.content);
|
||||
let subContents = ref(props.subContent);
|
||||
let subTimes = ref(props.subTime);
|
||||
let btnFlags = ref(props.btnFlag);
|
||||
let btnFlags2 = ref(props.btnFlag2)
|
||||
let btnTxts = ref(props.btnTxt);
|
||||
let btnCancelTxts = ref(props.btnCancelTxt);
|
||||
let isGreens = ref(props.isGreen);
|
||||
let loading = ref(false);
|
||||
|
||||
// 显示隐藏
|
||||
watch(() => props.visible, (newVal, oldVal) => {
|
||||
loading.value = false;
|
||||
visibleF = newVal
|
||||
},{
|
||||
deep:true, // 深度监听
|
||||
immediate:true // 立即执行
|
||||
});
|
||||
|
||||
// 标题
|
||||
watch(() => props.title, (newVal, oldVal) => {
|
||||
titles.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
// 内容
|
||||
watch(() => props.content, (newVal, oldVal) => {
|
||||
contents.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
watch(() => props.subContent, (newVal, oldVal) => {
|
||||
subContents.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
watch(() => props.subTime, (newVal, oldVal) => {
|
||||
subTimes.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
// 按钮
|
||||
watch(() => props.btnFlag, (newVal, oldVal) => {
|
||||
btnFlags.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
// 按钮
|
||||
watch(() => props.btnFlag2, (newVal, oldVal) => {
|
||||
btnFlags2.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
watch(() => props.btnTxt, (newVal, oldVal) => {
|
||||
btnTxts.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
watch(() => props.btnCancelTxt, (newVal, oldVal) => {
|
||||
btnCancelTxts.value = newVal
|
||||
},{
|
||||
deep:true,
|
||||
immediate:true
|
||||
});
|
||||
|
||||
// 调用父组件的方法
|
||||
const emit = defineEmits(['close','confirm'])
|
||||
const handleCancel = ()=>{
|
||||
emit('close');
|
||||
}
|
||||
|
||||
const handleConfirm = ()=>{
|
||||
loading.value=true;
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.model {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
z-index: 9999;
|
||||
.model-con{
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
top:40%;
|
||||
left:50%;
|
||||
// width:620rpx;
|
||||
width:580rpx;
|
||||
min-height: 278rpx;
|
||||
margin-left:-310rpx;
|
||||
margin-top:-139rpx;
|
||||
border-radius: 24rpx;
|
||||
padding:20rpx 20rpx 30rpx;
|
||||
}
|
||||
.model-top{
|
||||
text-align: center;
|
||||
padding:20rpx 0;
|
||||
font-size:36rpx;
|
||||
}
|
||||
.img-title{
|
||||
text-align: center;
|
||||
img{
|
||||
width:120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
.model-middle{
|
||||
text-align: center;
|
||||
font-size:30rpx;
|
||||
color:#333333;
|
||||
margin-bottom:10rpx;
|
||||
.font-green{
|
||||
color:#00BF5A;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
padding:20rpx 0;
|
||||
}
|
||||
.font-orange{
|
||||
color:#FF9638;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
padding:0rpx 0 20rpx;
|
||||
}
|
||||
}
|
||||
.m-height{
|
||||
padding:40rpx 0 20rpx;
|
||||
}
|
||||
.model-bottom{
|
||||
width:380rpx;
|
||||
margin-top:40rpx;
|
||||
margin:40rpx auto;
|
||||
.btn-green,.btn-cancel{
|
||||
background-color: #fff;
|
||||
color:#05A3F4;
|
||||
border-radius: 48rpx;
|
||||
font-size:36rpx;
|
||||
text-align: center;
|
||||
line-height: 2.2;
|
||||
margin:10rpx 0 0 0 !important;
|
||||
&::after{
|
||||
border:none;
|
||||
border-radius: 37rpx;
|
||||
}
|
||||
}
|
||||
.btn-green{
|
||||
border: 1px solid #05A3F4;
|
||||
background-color:#05A3F4;
|
||||
color:#fff;
|
||||
margin:0rpx 0 0 20rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user