Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
977b784f 1 parent 9b06b75e

fix 我的页面底部新增nav，API请求错误提示修复

Inline Side-by-side
Showing 3 changed files with 130 additions and 70 deletions
/*
* @Date: 2022-05-18 22:56:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-24 10:56:44
* @FilePath: /front/src/api/fn.js
* @LastEditTime: 2024-01-25 10:03:20
* @FilePath: /xysBooking/src/api/fn.js
* @Description: 文件描述
*/
import axios from '@/utils/axios';
import { showSuccessToast, showFailToast } from 'vant';
import { showSuccessToast, showFailToast, showToast } from 'vant';
import qs from 'Qs'
/**
......@@ -21,9 +21,9 @@ export const fn = (api) => {
return res.data || true;
} else {
// tslint:disable-next-line: no-console
console.warn(res);
if (!res.data.show) return false;
showFailToast(res.data.msg);
console.warn(res.data.show);
if (res.data.show === false) return false;
showToast(res.data.msg);
return false;
}
})
......
/*
* @Date: 2023-08-24 09:42:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-24 14:13:35
* @LastEditTime: 2024-01-25 08:36:47
* @FilePath: /xysBooking/src/api/index.js
* @Description: 文件描述
*/
......
<!--
* @Date: 2024-01-16 13:33:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-18 11:11:00
* @LastEditTime: 2024-01-25 10:10:41
* @FilePath: /xysBooking/src/views/me.vue
* @Description: 我的页面
-->
<template>
<div class="me-page">
<div class="title">
<div class="text">参观者信息</div>
</div>
<div @click="() => { go('/addVisitor') }" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div v-if="visitorList.length" class="visitors-list">
<div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
<div>
<p style="color: #A67939;">{{ item.name }}</p>
<p>证件号：{{ formatId(item.id_number) }}</p>
</div>
<div @click="removeItem(item)" style="margin-left: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
<div class="me-content">
<div class="title">
<div class="text">参观者信息</div>
</div>
<div @click="() => { go('/addVisitor') }" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div v-if="visitorList.length" class="visitors-list">
<div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
<div>
<p style="color: #A67939;">{{ item.name }}</p>
<p>证件号：{{ formatId(item.id_number) }}</p>
</div>
<div @click="removeItem(item)" style="margin-left: 1rem;">
<van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
</div>
</div>
</div>
<div v-else class="no-visitors-list">
<img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
<div class="no-visitors-list-title">您还没有添加过参观者</div>
</div>
</div>
<div v-else class="no-visitors-list">
<img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
<div class="no-visitors-list-title">您还没有添加过参观者</div>
<div class="index-nav">
<div class="nav-logo" @click="toHome">
<van-icon size="1.5rem" :name="icon_3" color="#A67939" />
首页
</div>
<div class="nav-logo" @click="toCode">
<van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
<van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
预约码
</div>
<div class="nav-logo">
<van-icon size="1.5rem" :name="icon_5" color="#A67939" />
我的
</div>
</div>
</div>
</template>
......@@ -42,11 +59,29 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import { personListAPI, delPersonAPI } from '@/api/index'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的02@2x.png'
const go = useGo();
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const toBooking = () => { // 跳转到预约须知
go('/notice');
}
const toRecord = () => { // 跳转到预约记录
go('/bookingList');
}
const toCode = () => { // 跳转到预约码
go('/bookingCode');
}
const toHome = () => { // 跳转到我的
go('/');
}
const visitorList = ref([]);
/**
......@@ -101,62 +136,87 @@ onMounted(async () => {
<style lang="less" scoped>
.me-page {
margin: 1rem;
position: relative;
.title {
padding: 0.5rem 0.75rem;
padding-left: 0;
display: flex;
justify-content: space-between;
align-items: center;
.text {
&::before {
content: '';
border: 2px solid #A67939;
margin-right: 0.5rem;
height: 100vh;
.me-content {
margin: 0 1rem;
.title {
padding: 0.5rem 0.75rem;
padding-top: 1rem;
padding-left: 0;
display: flex;
justify-content: space-between;
align-items: center;
.text {
&::before {
content: '';
border: 2px solid #A67939;
margin-right: 0.5rem;
}
}
.day {
background-color: #FFFBF3;
border-radius: 7px;
border: 1px solid #A67939;
padding: 0.2rem 0.5rem;
color: #A67939;
}
}
.day {
background-color: #FFFBF3;
border-radius: 7px;
border: 1px solid #A67939;
padding: 0.2rem 0.5rem;
.add-visitors {
border: 1px dashed #A67939;
color: #A67939;
border-radius: 5px;
text-align: center;
padding: .65rem 0;
margin: 1rem 0;
font-size: 1.15rem;
}
}
.add-visitors {
border: 1px dashed #A67939;
color: #A67939;
border-radius: 5px;
text-align: center;
padding: .65rem 0;
margin: 1rem 0;
font-size: 1.15rem;
}
.visitors-list {
.visitor-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
.visitors-list {
.visitor-item {
background-color: #FFF;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.no-visitors-list {
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
flex-direction: column;
img {
margin-top: 1rem;
margin-bottom: 1rem;
width: 10rem;
}
.no-visitors-list-title {
color: #A67939;
font-size: 1.05rem;
}
}
}
.no-visitors-list {
.index-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 10vh;
background: #FFFFFF;
box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
margin-top: 1rem;
margin-bottom: 1rem;
width: 10rem;
}
.no-visitors-list-title {
color: #A67939;
font-size: 1.05rem;
justify-content: space-around;
color: #A67939;
.nav-logo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
......