页面逻辑调整

hookehuyr
Commit 37aeabc5e801480fff71dbde074fa8b48aa940a5 37aeabc5 1 parent 778a0150
Showing 5 changed files with 97 additions and 14 deletions
src/components/qrCode.vue
src/views/addVisitor.vue
src/views/bookingDetail.vue
src/views/bookingList.vue
src/views/me.vue
--- a/src/components/qrCode.vue
View file @37aeabc
+++ b/src/components/qrCode.vue
View file @37aeabc
 <!--
  * @Date: 2024-01-16 10:06:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 11:28:46
+ * @LastEditTime: 2024-01-16 15:59:42
  * @FilePath: /xysBooking/src/components/qrCode.vue
  * @Description: 文件描述
 -->
@@ -9,6 +9,9 @@
   <div class="qr-code-page">
     <div v-if="has_qrcode" class="show-qrcode">
       <div class="qrcode-content">
+        <div class="user-status">
+          <div :class="[formatStatus(props.status).key, 'status']">{{ formatStatus(props.status).value }}</div>
+        </div>
         <div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
         <div class="user-qrcode">
           <div class="left" @click="prevCode">
@@ -54,6 +57,13 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const props = defineProps({
+  status: {
+    type: String,
+    default: ''
+  }
+});
+
 const id_number = ref('511522190103214279');
 const formatId = computed(() => {
@@ -123,6 +133,26 @@ const refreshBtn = () => {
   console.warn('refreshBtn');
 }
+const formatStatus = (status) => {
+  switch (status) {
+    case 'success':
+      return {
+        key: 'success',
+        value: '预约成功'
+      }
+    case 'cancel':
+      return {
+        key: 'cancel',
+        value: '已取消'
+      }
+    case 'used':
+      return {
+        key: 'used',
+        value: '已使用'
+      }
+  }
+}
+
 onMounted(() => {
 })
@@ -141,6 +171,25 @@ onMounted(() => {
     background-color: #FFF;
     border-radius: 5px;
     box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
+    .user-status {
+      .status {
+        font-size: 0.75rem;
+        padding: 5px 8px;
+        border-radius: 5px;
+      }
+      .success {
+        color: #A67939;
+        background-color: #FBEEDC;
+      }
+      .cancel {
+        color: #929292;
+        background-color: #E6E6E6;
+      }
+      .used {
+        color: #477F3D;
+        background-color: #E5EFE3;
+      }
+    }
     .user-info {
       color: #A6A6A6;
       font-size: 1.15rem;
--- a/src/views/addVisitor.vue
View file @37aeabc
+++ b/src/views/addVisitor.vue
View file @37aeabc
 <!--
  * @Date: 2024-01-15 17:39:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 15:46:02
+ * @LastEditTime: 2024-01-16 15:48:05
  * @FilePath: /xysBooking/src/views/addVisitor.vue
  * @Description: 文件描述
 -->
@@ -39,6 +39,12 @@
         @confirm="onConfirm"
       />
     </van-popup>
+
+    <van-toast v-model:show="show_error" style="">
+      <template #message>
+        {{ error_message }}
+      </template>
+    </van-toast>
   </div>
 </template>
@@ -60,12 +66,16 @@ const username = ref('');
 const idCode = ref('');
 const isError = ref(false);
+const show_error = ref(false);
+const error_message = ref('');
+
 const checkUsername = () => {
   let flag = true;
   if (username.value) {
   } else {
-    showFailToast('参观者名称不能为空');
+    show_error.value = true;
+    error_message.value = '参观者名称不能为空';
     flag = false;
   }
   return flag;
@@ -76,7 +86,8 @@ const checkIdCode = () => {
   if (res.status) {
   } else {
-    showFailToast(res.msg);
+    show_error.value = true;
+    error_message.value = res.msg;
     flag = false;
   }
   return flag;
--- a/src/views/bookingDetail.vue
View file @37aeabc
+++ b/src/views/bookingDetail.vue
View file @37aeabc
 <!--
  * @Date: 2024-01-16 13:19:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 13:32:10
+ * @LastEditTime: 2024-01-16 16:01:04
  * @FilePath: /xysBooking/src/views/bookingDetail.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="booking-detail-page">
-    <qrCode></qrCode>
+    <qrCode status="success"></qrCode>
     <div class="detail-wrapper">
       <div class="detail-item">
         <div>参访时间：</div>
@@ -31,8 +31,8 @@
       </div>
     </div>
     <div style="height: 5rem;"></div>
-    <div class="cancel-wrapper">
+    <div v-if="status === '预约成功'" class="cancel-wrapper">
-      <div class="cancel-btn ">取消预约</div>
+      <div @click="cancelBooking" class="cancel-btn ">取消预约</div>
     </div>
   </div>
 </template>
@@ -40,16 +40,36 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { useGo } from '@/hooks/useGo'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
 import qrCode from '@/components/qrCode';
+import { showConfirmDialog } from 'vant';
+import { showSuccessToast, showFailToast } from 'vant';
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const go = useGo();
+
+const status = ref('预约成功');
+
+const cancelBooking = (item) => {
+  showConfirmDialog({
+    title: '温馨提示',
+    message: '是否取消预约？',
+    confirmButtonColor: '#A67939',
+  })
+  .then(() => {
+    // on confirm
+    showSuccessToast('取消成功');
+    })
+    .catch(() => {
+      // on cancel
+    });
+}
 </script>
 <style lang="less" scoped>
--- a/src/views/bookingList.vue
View file @37aeabc
+++ b/src/views/bookingList.vue
View file @37aeabc
 <!--
  * @Date: 2024-01-16 11:37:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 13:17:42
+ * @LastEditTime: 2024-01-16 16:02:56
  * @FilePath: /xysBooking/src/views/bookingList.vue
  * @Description: 文件描述
 -->
 <template>
   <div class="booking-list-page">
-    <div v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
+    <div @click="() => { go('/bookingDetail', { id: 'test' }) }" v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
       <div class="booking-list-item-header">
         <div>{{ item.booking_time }}</div>
         <div :class="[formatStatus(item.status).key, 'status']">{{ formatStatus(item.status).value }}</div>
@@ -27,7 +27,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { useGo } from '@/hooks/useGo'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -36,6 +36,8 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
+const go = useGo();
+
 const bookingList = ref([{
   id: '1',
   booking_time: '2024-01-10 05:00-08:00',
--- a/src/views/me.vue
View file @37aeabc
+++ b/src/views/me.vue
View file @37aeabc
@@ -10,7 +10,7 @@
     <div class="title">
       <div class="text">参观者信息</div>
     </div>
-    <div class="add-visitors">
+    <div @click="() => { go('/addVisitor') }" class="add-visitors">
       <div><van-icon name="plus" /> 添加参观者</div>
     </div>
     <div class="visitors-list">
@@ -30,6 +30,7 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useGo } from '@/hooks/useGo'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
@@ -37,7 +38,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/composables'
 import { showConfirmDialog } from 'vant';
 import { showSuccessToast, showFailToast } from 'vant';
-
+const go = useGo();
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);