优化退款密码

src/views/table/index.vue

@@ -22,16 +22,26 @@
                 </div>
                 <div class="overflow_y" v-loading="loading">
                     <div class="tab_list">
-                        <div class="item" :class="{ active: tableItemActive == index }"
+                        <div class="item"
+                            :class="{ active: tableItemActive == index, using: item.status == 'using', closed: item.status == 'closed' }"
                             v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
                             <div class="tab_title" :class="`${item.status}`">
                                 <span>{{ item.name }}</span>
                                 <span>0/{{ item.maxCapacity }}</span>
                             </div>
                             <div class="tab_cont">
-                                <el-icon class="icon">
+                                <el-icon class="icon" v-if="item.status != 'using'">
                                     <CircleClose />
                                 </el-icon>
+                                <div class="using" v-else>
+                                    <div class="t1">开台中</div>
+                                    <!-- <div class="t2">
+                                        <el-icon>
+                                            <Timer />
+                                        </el-icon>
+                                        <span>{{ countTime(item.updatedAt) }}</span>
+                                    </div> -->
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -58,6 +68,7 @@ import tableInfo from '@/views/table/components/tableInfo.vue'
 
 import { ref, onMounted } from 'vue'
 import { useUser } from "@/store/user.js"
+import { dayjs } from 'element-plus'
 const store = useUser()
 
 
@@ -99,6 +110,12 @@ function tabChange(item, index) {
     queryShopTableAjax()
 }
 
+// 计算当前的时间差
+function countTime(t) {
+    let ctime = dayjs().valueOf()
+    return dayjs(ctime - t).format('H小时m分')
+}
+
 // 支付成功，刷新状态
 async function paySuccess() {
     await queryShopTableAjax()
@@ -241,9 +258,28 @@ onMounted(() => {
             border-radius: 6px;
             overflow: hidden;
             border: 2px solid #fff;
+            $usingColor: #D2441F;
+            $subColor: #3274D5;
+            $closedColor: #aeb8c9;
 
             &.active {
-                border-color: var(--primary-color);
+                border-color: $subColor;
+            }
+
+            &.using {
+                &.active {
+                    border-color: $usingColor;
+                }
+            }
+
+            &.closed {
+                .tab_title {
+                    color: #555;
+                }
+
+                &.active {
+                    border-color: $closedColor;
+                }
             }
 
             &:hover {
@@ -260,19 +296,19 @@ onMounted(() => {
                 background-color: #999;
 
                 &.subscribe {
-                    background-color: var(--el-color-success);
+                    background-color: $subColor;
                 }
 
                 &.closed {
-                    background-color: #999;
+                    background-color: $closedColor;
                 }
 
                 &.idle {
-                    background-color: var(--primary-color);
+                    background-color: $subColor;
                 }
 
                 &.using {
-                    background-color: var(--el-color-success);
+                    background-color: $usingColor;
                 }
 
                 &.opening {
@@ -295,6 +331,27 @@ onMounted(() => {
                     font-size: 30px;
                     transform: rotate(45deg);
                 }
+
+                .using {
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    padding-bottom: 10px;
+
+                    .t2 {
+                        font-size: 12px;
+                        display: flex;
+                        align-items: center;
+                        margin-top: 2px;
+
+                        span {
+                            margin-left: 4px;
+                        }
+                    }
+                }
             }
         }
     }