|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <van-dialog
|
|
|
+ v-model:show="isShowLeaveDailog"
|
|
|
+ class="dialog-width"
|
|
|
+ :show-confirm-button="false"
|
|
|
+ :show-cancel-button="false"
|
|
|
+ >
|
|
|
+ <div class="air-dialog-content">
|
|
|
+ <div class="dialog-top">
|
|
|
+ <img
|
|
|
+ class="img-yellow"
|
|
|
+ v-if="leaveDetail.img"
|
|
|
+ :src="parseImgUrl('page-officehome', leaveDetail.img)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="leave-title">工作辛苦了!</div>
|
|
|
+ <div class="leave-popup-body">
|
|
|
+ <div
|
|
|
+ class="body-item"
|
|
|
+ v-for="(item, idx) in leaveDetail.textObj"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ <van-icon
|
|
|
+ name="passed"
|
|
|
+ style="color: #07c160; margin-right: 8px"
|
|
|
+ v-if="item.status === 'ok'"
|
|
|
+ />
|
|
|
+ <span class="text-status" v-if="item.status === 'go'"></span>
|
|
|
+ <span class="text-status grey" v-if="item.status === 'grey'"></span>
|
|
|
+ <span>{{ item.text }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-btns" @click="closeDailog">
|
|
|
+ <span>隐藏</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script lang="ts">
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ onBeforeMount,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ watch,
|
|
|
+} from "vue";
|
|
|
+import { Loading, Dialog, Toast } from "vant";
|
|
|
+import { parseImgUrl } from "@/utils";
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ props: {
|
|
|
+ isShowLeaveDailog: {
|
|
|
+ type: Boolean,
|
|
|
+ default: () => false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ VanLoading: Loading,
|
|
|
+ [Dialog.Component.name]: Dialog.Component,
|
|
|
+ },
|
|
|
+ setup(props, contx) {
|
|
|
+ const proxyData = reactive({
|
|
|
+ parseImgUrl: parseImgUrl,
|
|
|
+ isShowLeaveDailog: props.isShowLeaveDailog,
|
|
|
+ leaveDetail: {
|
|
|
+ // img: parseImgUrl("ipdImages", "icon-handshake.svg"),
|
|
|
+ textObj: [
|
|
|
+ {
|
|
|
+ text: "已为您取消当前的预约时间",
|
|
|
+ status: "ok",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "系统将自动调整设备状态",
|
|
|
+ status: "ok",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "感谢您的预约使用",
|
|
|
+ status: "ok",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ closeDailog() {
|
|
|
+ contx.emit("closeDailog");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ watch(
|
|
|
+ props,
|
|
|
+ (newProps: any) => {
|
|
|
+ proxyData.isShowLeaveDailog = newProps.isShowLeaveDailog;
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: false,
|
|
|
+ immediate: true,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ onMounted(() => {});
|
|
|
+ return {
|
|
|
+ ...toRefs(proxyData),
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dialog-width {
|
|
|
+ width: 300px !important;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.leave-popup-body {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 36px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+
|
|
|
+ &.air-popup-body {
|
|
|
+ flex-direction: row;
|
|
|
+ margin: 0;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 21px;
|
|
|
+ color: #c4c4c4;
|
|
|
+
|
|
|
+ .text-status {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: #f0da21;
|
|
|
+ border-radius: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 16px;
|
|
|
+
|
|
|
+ &.grey {
|
|
|
+ background: #f3f3f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.air-dialog-content {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 360px;
|
|
|
+
|
|
|
+ .dialog-top {
|
|
|
+ position: relative;
|
|
|
+ height: 70px;
|
|
|
+ background: #f3f3f3;
|
|
|
+
|
|
|
+ .img-yellow {
|
|
|
+ background: #ffe823;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ padding: 17px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .leave-title {
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Black Han Sans;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 21px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-top: 14px;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btns {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 20px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 88px;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 1;
|
|
|
+ color: #4d5262;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 15px rgba(0, 0, 0, 0.15);
|
|
|
+ border-radius: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ span {
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|