cashier_desktop/src/components/more.vue

<template>
  <div class="drawerbox">
    <el-drawer size="60%" :with-header="false" direction="rtl" v-model="dialogVisible" style="padding: 0">
      <div class="drawerbox_box">
        <div class="drawerbox_bo_top">
          <div class="drawerbox_bo_top_left" @click="computeExpired">
            <div class="drawerbox_bo_top_left_one" style="font-size: 24px;">
              {{ store.shopInfo.shopName }}
            </div>
            <div class="tips" style="margin-top: 4px; color: var(--el-color-warning);" v-if="showTips">注意：您的账号将于{{
              store.shopInfo.expireTime }}后过期，请尽快续期！</div>
            <div class="drawerbox_bo_top_left_tow" style="margin-top: 10px">
              收银员：{{ store.userInfo.name }}
            </div>
            <div>
              <span style="color: #999">{{ dayjs(store.userInfo.loginTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </div>
          </div>
          <!-- <div class="drawerbox_bo_top_ring">
                        <div class="drawerbox_bo_top_ring_tb">
                            <el-icon style="margin: 0 auto;" size="20">
                                <FolderAdd />
                            </el-icon>
                            <span>修改密码</span>
                        </div>
                        <div class="drawerbox_bo_top_ring_tb" style="margin-left: 10px;">
                            <el-icon style="margin: 0 auto;" size="20">
                                <CopyDocument />
                            </el-icon>
                            <span>最小化</span>
                        </div>
                    </div> -->
        </div>
        <div class="drawerbox_bo_box">
          <!-- <div style="padding: 10px 0; color: #999; font-weight: bold">系统</div> -->
          <div class="drawerbox_bo_box_itemb_felx">
            <!-- <div class="drawerbox_bo_box_itembox">
              <div class="drawerbox_bo_box_icon">
                <el-icon size="40">
                  <Setting />
                </el-icon>
              </div>
              <div class="drawerbox_bo_box_icontext">设置</div>
            </div> -->
            <div class="drawerbox_bo_box_itembox" @click="router.push({ name: 'device_list' })">
              <div class="drawerbox_bo_box_icon">
                <el-icon size="40">
                  <TurnOff />
                </el-icon>
              </div>
              <div class="drawerbox_bo_box_icontext">设备管理</div>
            </div>
            <!-- <div class="drawerbox_bo_box_itembox" @click="openCallHandle">
              <div class="drawerbox_bo_box_icon">
                <el-icon size="40">
                  <Bell />
                </el-icon>
              </div>
              <div class="drawerbox_bo_box_icontext">叫号</div>
            </div> -->
            <!-- <div class="drawerbox_bo_box_itembox" @click="screenref.shows()">
              <div class="drawerbox_bo_box_icon">
                <el-icon size="40">
                  <Lock />
                </el-icon>
              </div>
              <div class="drawerbox_bo_box_icontext">锁屏</div>
            </div> -->
            <!-- <div class="drawerbox_bo_box_itembox" @click="to('webview', {
                            url: 'https://cashiernewadmin.sxczgkj.cn/',
                            title: '后台管理'
                        })">
                            <div class="drawerbox_bo_box_icon">
                                <el-icon size="40">
                                    <Monitor />
                                </el-icon>
                            </div>
                            <div class="drawerbox_bo_box_icontext">
                                后台管理
                            </div>
                        </div> -->
          </div>
        </div>
      </div>
      <div class="boxabsolute">
        <div>©银收客 v{{ packageData.version }}</div>
        <!-- <div>
                    有效期
                </div> -->
      </div>
    </el-drawer>
  </div>
  <screen ref="screenref"></screen>
</template>

<script setup>
import { ref } from "vue";
import { dayjs } from 'element-plus'
import { useRouter } from "vue-router";
import { useUser } from "@/store/user.js";
import screen from "@/components/screen.vue";

import packageData from "../../package.json";

const router = useRouter();

const emit = defineEmits(["openCall"]);

const store = useUser();
const screenref = ref(null);

const dialogVisible = ref(false);

const showTips = ref(false)

function show() {
  dialogVisible.value = true;
  computeExpired()
}

// 计算是否小于过期时间30天
function computeExpired() {
  // 当前日期
  let now = dayjs()
  // 到期时间
  let expired = dayjs(store.userInfo.expireTime).subtract(30, 'day')
  // 判断当前时间是否大于到期时间30天
  showTips.value = now.isBefore(expired)

  console.log("computeExpired===", showTips.value);
}

// 打开叫号弹窗
function openCallHandle() {
  dialogVisible.value = false;
  emit("openCall");
}

// 跳转
function to(pathName, data) {
  router.push({
    name: pathName,
    query: data,
  });
}

defineExpose({
  show,
});
</script>

<style scoped lang="scss">
.drawerbox {
  :deep(.el-drawer__body) {
    background: #1c1d1f !important;
    position: relative;
  }

  .boxabsolute {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);

    div {
      color: #8c9196;
      text-align: center;
    }

    div:nth-child(2) {
      margin-top: 10px;
    }
  }

  .drawerbox_box {
    color: #fff;

    .drawerbox_bo_top {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #47484b;

      .drawerbox_bo_top_left {
        display: flex;
        flex-direction: column;
      }

      .drawerbox_bo_top_ring {
        display: flex;
        align-items: center;

        .drawerbox_bo_top_ring_tb {
          display: flex;
          flex-direction: column;
          border: 1px solid #ccc;
          border-radius: 6px;
          padding: 6px 10px;

          span {
            width: 80px;
            margin-top: 5px;
            text-align: center;
          }
        }
      }
    }

    .drawerbox_bo_box {
      width: 100%;

      .drawerbox_bo_box_itemb_felx {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 20px 0;

        .drawerbox_bo_box_itembox {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-right: 20px;
          margin-bottom: 30px;

          .drawerbox_bo_box_icon {
            border-radius: 6px;
            background-color: var(--primary-color);
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .drawerbox_bo_box_icontext {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>