Browse Source

fix: 我要离开弹窗增加

chenzhen2 2 years ago
parent
commit
110a2a053a

File diff suppressed because it is too large
+ 3 - 0
public/images/ipdImages/icon-handshake.svg


+ 217 - 0
src/views/envmonitor/components/workOvertime/LeaveDailog.vue

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

+ 24 - 4
src/views/envmonitor/components/workOvertime/WorkConfig.vue

@@ -2,7 +2,7 @@
   <div class="scene-config">
     <!--开放办公区-->
     <div class="time-box" :class="timerText.classColor">
-      <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" />
+      <!-- <img :src="parseImgUrl('page-officehome', 'work.svg')" alt="" /> -->
       <div class="time-text">
         <span>{{ timerText.text }}</span>
         <span>{{ timerText.timer }}</span>
@@ -23,6 +23,13 @@
       </div>
     </div>
   </div>
+  <!--加班点击我要离开触发-->
+  <leave-dailog
+    :isShowLeaveDailog="isShowLeaveDailog"
+    v-if="isShowLeaveDailog"
+    @closeDailog="closeLeavDailog"
+  >
+  </leave-dailog>
 </template>
 
 <script lang="ts">
@@ -47,6 +54,8 @@ import {
 import { UserActionTypes } from "@/store/modules/user/action-types";
 import { useStore } from "@/store";
 import { saveBatchCustomScene } from "@/apis/envmonitor";
+// import { Dialog } from "vant";
+import LeaveDailog from "@/views/envmonitor/components/workOvertime/LeaveDailog.vue";
 
 export default defineComponent({
   props: {
@@ -59,6 +68,9 @@ export default defineComponent({
       default: () => [],
     },
   },
+  components: {
+    LeaveDailog
+  },
   setup(props, contx) {
     const proxyGlobal: any = getCurrentInstance();
     let router: any = useRouter();
@@ -406,18 +418,26 @@ export default defineComponent({
       },
       // 取消加班记录
       saveBatchCustomScene() {
-        proxyGlobal.proxy.$loadingStart(0);
+        // proxyGlobal.proxy.$loadingStart(0);
+        proxyData.openLeavDailog();
         saveBatchCustomScene(proxyData.delTimeArr)
           .then((res) => {
             proxyData.leaveBtnFlag = false;
             console.log(res);
-            proxyGlobal.proxy.$loadinngEnd();
+            // proxyGlobal.proxy.$loadinngEnd();
           })
           .catch(() => {
             proxyData.leaveBtnFlag = false;
-            proxyGlobal.proxy.$loadinngEnd();
+            // proxyGlobal.proxy.$loadinngEnd();
           });
       },
+      isShowLeaveDailog: false,
+      openLeavDailog() {
+        proxyData.isShowLeaveDailog = true;
+      },
+      closeLeavDailog() {
+        proxyData.isShowLeaveDailog = false;
+      },
     });
     watch(
       props,