hzd/visitor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.23

Browse Source
This commit is contained in:
hezhidong
2025-04-23 17:19:04 +08:00
parent 0fb61604d5
commit e1d13a3aeb
7 changed files with 557 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/adminRequest.js
+68 -58
View File
@@ -1,84 +1,94 @@
import axios from 'axios' import axios from "axios";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { useStore } from 'vuex'; import { useStore } from "vuex";
import { Toast, Dialog } from 'vant'; import { Toast, Dialog } from "vant";
// import { getItem, setItem, removeItem, dalert } from '@/com/index' // import { getItem, setItem, removeItem, dalert } from '@/com/index'
const errorCode = { const errorCode = {
'401': '登录状态已过期,即将返回首页重新登录。', 401: "登录状态已过期,即将返回首页重新登录",
'403': '当前操作没有权限', 403: "当前操作没有权限",
'404': '访问资源不存在', 404: "访问资源不存在",
'default': '系统未知错误，请反馈给管理员' default: "系统未知错误，请反馈给管理员",
} };
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const store = useStore() const store = useStore();
const loadNoCloseArr = ['/upload/face', ] const loadNoCloseArr = ["/upload/face"];
// 判断当前的运行环境 process.env.NODE_ENV // 判断当前的运行环境 process.env.NODE_ENV
// isDev 为真 开发环境 --- npm run serve // isDev 为真 开发环境 --- npm run serve
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build // isDev 为假 非开发环境（测试环境，生产环境）- npm run build
const isDev = process.env.NODE_ENV === 'development' const isDev = process.env.NODE_ENV === "development";
const request = axios.create({ const request = axios.create({
// 根据环境 设置不同的baseURL // 根据环境 设置不同的baseURL
// 如果配置了单个的反向代理 --- 字符串模式 // 如果配置了单个的反向代理 --- 字符串模式
// 如果配置了多个的反向代理 --- 对象模式 // 如果配置了多个的反向代理 --- 对象模式
// baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api' baseURL: isDev
baseURL: isDev ? 'http://192.168.31.118:8195' : 'http://visitor.scdswj.cn/prod-api' ? "http://visitor.scdswj.cn/prod-api"
}) : "http://visitor.scdswj.cn/prod-api",
// baseURL: isDev ? 'http://192.168.31.118:8195' : 'http://visitor.scdswj.cn/prod-api'
});
// 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065' // 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
// 请求拦截器 - 所有的请求开始之前先到此处 // 请求拦截器 - 所有的请求开始之前先到此处
request.interceptors.request.use((config) => { request.interceptors.request.use(
(config) => {
// 可以设置 加载的动画效果 的展示 // 可以设置 加载的动画效果 的展示
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处 // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
console.log(config) console.log(config);
return config return config;
}, (error) => { },
return Promise.reject(error) (error) => {
}) return Promise.reject(error);
}
);
// 响应拦截器 --- 所有请求的相应先到此处 // 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => { request.interceptors.response.use(
(response) => {
// 可以设置 加载的动画效果 的隐藏 // 可以设置 加载的动画效果 的隐藏
const code = response.data.code || 200; const code = response.data.code || 200;
const message = errorCode[code] || response.data.msg || errorCode['default'] const message =
if(code == 200){ errorCode[code] || response.data.msg || errorCode["default"];
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口 if (code == 200) {
}else{ if (loadNoCloseArr.includes(response.config.url)) {
Toast.clear() // 设置请求不关闭加载动画接口
} else {
Toast.clear();
} }
}else{ } else {
Toast.clear() Toast.clear();
} }
if (code === 401) { if (code === 401) {
Toast.fail(message) console.log("进了");
setTimeout(()=>{ Toast.fail(message);
localStorage.removeItem('token'); setTimeout(() => {
localStorage.removeItem('user'); localStorage.removeItem("token");
const redirectUrl = localStorage.getItem('redirect') localStorage.removeItem("user");
if(redirectUrl){ const redirectUrl = localStorage.getItem("redirect");
window.location.href = redirectUrl if (redirectUrl) {
}else{ window.location.href = redirectUrl;
window.location.href = '/userHome' } else {
window.location.href = "/adminHome";
} }
},2000) }, 2000);
return Promise.reject('登录状态已过期,即将返回首页重新登录。') return Promise.reject("登录状态已过期,即将返回首页重新登录。");
} else if (code === 500) { } else if (code === 500) {
// Message({ message: msg, type: 'error' }) // Message({ message: msg, type: 'error' })
Toast.fail(message) Toast.fail(message);
return Promise.reject(response.data) return Promise.reject(response.data);
} else if (code === 601) { } else if (code === 601) {
// Message({ message: msg, type: 'warning' }) // Message({ message: msg, type: 'warning' })
Toast.fail(message) Toast.fail(message);
return Promise.reject('error') return Promise.reject("error");
} else if (code != 200) { } else if (code != 200) {
Toast.fail(message) Toast.fail(message);
return Promise.reject('error') return Promise.reject("error");
} else { } else {
return response.data return response.data;
} }
}, error => { },
Toast.clear() (error) => {
console.log(error.message) Toast.clear();
console.log(error.message);
let { message } = error; let { message } = error;
if (message == "Network Error") { if (message == "Network Error") {
message = "后端接口连接异常"; message = "后端接口连接异常";
@@ -87,10 +97,10 @@ request.interceptors.response.use((response) => {
} else if (message.includes("Request failed with status code")) { } else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常"; message = "系统接口" + message.substr(message.length - 3) + "异常";
} }
console.log(message) console.log(message);
Toast.fail(message) Toast.fail(message);
return Promise.reject(error.response) return Promise.reject(error.response);
}
);
}) export default request;
export default request
src/api/index.js
+68 -59
View File
@@ -1,86 +1,95 @@
import axios from 'axios' import axios from "axios";
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { useStore } from 'vuex'; import { useStore } from "vuex";
import { Toast, Dialog } from 'vant'; import { Toast, Dialog } from "vant";
// import { getItem, setItem, removeItem, dalert } from '@/com/index' // import { getItem, setItem, removeItem, dalert } from '@/com/index'
const errorCode = { const errorCode = {
'401': '登录状态已过期,即将返回首页重新登录。', 401: "登录状态已过期,即将返回首页重新登录。",
'403': '当前操作没有权限', 403: "当前操作没有权限",
'404': '访问资源不存在', 404: "访问资源不存在",
'default': '系统未知错误，请反馈给管理员' default: "系统未知错误，请反馈给管理员",
} };
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const store = useStore() const store = useStore();
const loadNoCloseArr = ['/upload/face', ] const loadNoCloseArr = ["/upload/face"];
// 判断当前的运行环境 process.env.NODE_ENV // 判断当前的运行环境 process.env.NODE_ENV
// isDev 为真 开发环境 --- npm run serve // isDev 为真 开发环境 --- npm run serve
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build // isDev 为假 非开发环境（测试环境，生产环境）- npm run build
const isDev = process.env.NODE_ENV === 'development' const isDev = process.env.NODE_ENV === "development";
const request = axios.create({ const request = axios.create({
// 根据环境 设置不同的baseURL // 根据环境 设置不同的baseURL
// 如果配置了单个的反向代理 --- 字符串模式 // 如果配置了单个的反向代理 --- 字符串模式
// 如果配置了多个的反向代理 --- 对象模式 // 如果配置了多个的反向代理 --- 对象模式
// baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api' baseURL: isDev
baseURL: isDev ? 'http://visitor.scdswj.cn/prod-api' : 'http://visitor.scdswj.cn/prod-api' ? "http://visitor.scdswj.cn/prod-api"
}) : "http://visitor.scdswj.cn/prod-api",
// baseURL: isDev ? "http://192.168.31.124:8195" : "http://192.168.31.124:8195",
});
// 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065' // 'http://rap2api.taobao.org/app/mock/297766/example/1643070528065'
// 请求拦截器 - 所有的请求开始之前先到此处 // 请求拦截器 - 所有的请求开始之前先到此处
request.interceptors.request.use((config) => { request.interceptors.request.use(
(config) => {
// 可以设置 加载的动画效果 的展示 // 可以设置 加载的动画效果 的展示
// 在必要的路由设置一些额外的参数 ---- token信息携带放在此处 // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
console.log(config) console.log(config);
return config return config;
}, (error) => { },
return Promise.reject(error) (error) => {
}) return Promise.reject(error);
}
);
// 响应拦截器 --- 所有请求的相应先到此处 // 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => { request.interceptors.response.use(
(response) => {
// 可以设置 加载的动画效果 的隐藏 // 可以设置 加载的动画效果 的隐藏
const code = response.data.code || 200; const code = response.data.code || 200;
const message = errorCode[code] || response.data.msg || errorCode['default'] const message =
if(code == 200){ errorCode[code] || response.data.msg || errorCode["default"];
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口 if (code == 200) {
}else{ if (loadNoCloseArr.includes(response.config.url)) {
Toast.clear() // 设置请求不关闭加载动画接口
} else {
Toast.clear();
} }
}else{ } else {
Toast.clear() Toast.clear();
} }
if (code === 401) { if (code === 401) {
Toast.fail(message) Toast.fail(message);
setTimeout(()=>{ setTimeout(() => {
localStorage.removeItem('token'); localStorage.removeItem("token");
localStorage.removeItem('user'); localStorage.removeItem("user");
localStorage.removeItem('userToken'); localStorage.removeItem("userToken");
const redirectUrl = localStorage.getItem('redirect') const redirectUrl = localStorage.getItem("redirect");
if(redirectUrl){ if (redirectUrl) {
window.location.href = redirectUrl window.location.href = redirectUrl;
}else{ } else {
window.location.href = '/userHome' window.location.href = "/userHome";
} }
},2000) }, 2000);
return Promise.reject('登录状态已过期,即将返回首页重新登录。') return Promise.reject("登录状态已过期,即将返回首页重新登录。");
} else if (code === 500) { } else if (code === 500) {
// Message({ message: msg, type: 'error' }) // Message({ message: msg, type: 'error' })
Toast.fail(message) Toast.fail(message);
return Promise.reject(response.data) return Promise.reject(response.data);
} else if (code === 601) { } else if (code === 601) {
// Message({ message: msg, type: 'warning' }) // Message({ message: msg, type: 'warning' })
Toast.fail(message) Toast.fail(message);
return Promise.reject('error') return Promise.reject("error");
} else if (code != 200) { } else if (code != 200) {
Toast.fail(message) Toast.fail(message);
return Promise.reject('error') return Promise.reject("error");
} else { } else {
return response.data return response.data;
} }
}, error => { },
Toast.clear() (error) => {
console.log(error.message) Toast.clear();
console.log(error.message);
let { message } = error; let { message } = error;
if (message == "Network Error") { if (message == "Network Error") {
message = "后端接口连接异常"; message = "后端接口连接异常";
@@ -89,10 +98,10 @@ request.interceptors.response.use((response) => {
} else if (message.includes("Request failed with status code")) { } else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常"; message = "系统接口" + message.substr(message.length - 3) + "异常";
} }
console.log(message) console.log(message);
Toast.fail(message) Toast.fail(message);
return Promise.reject(error.response) return Promise.reject(error.response);
}
);
}) export default request;
export default request
src/assets/yaoqingbeijingtu.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 547 KiB

After

Width:  |  Height:  |  Size: 582 KiB

src/router/index.js
+61 -65
View File
@@ -1,110 +1,106 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from "vue-router";
import register from "../views/register.vue"; import register from "../views/register.vue";
const routerHistory = createWebHistory() const routerHistory = createWebHistory();
const routes = [ const routes = [
{ {
path: '/login', path: "/login",
name:'login', name: "login",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/login.vue') component: () => import("../views/login.vue"),
}, },
{ {
path: '/visitorApply', path: "/visitorApply",
name:'visitorApply', name: "visitorApply",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/visitorApply.vue'), component: () => import("../views/visitorApply.vue"),
meta: { title: '我要预约' } meta: { title: "我要预约" },
}, },
{ {
path: '/applyInquire', path: "/applyInquire",
name:'applyInquire', name: "applyInquire",
component: () => import('../views/applyInquire.vue'), component: () => import("../views/applyInquire.vue"),
meta: { title: '预约查询' } meta: { title: "预约查询" },
}, },
{ {
path: '/applyRecord', path: "/applyRecord",
name:'applyRecord', name: "applyRecord",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/applyRecord.vue'), component: () => import("../views/applyRecord.vue"),
meta: { title: '预约记录' } meta: { title: "预约记录" },
}, },
{ {
path: '/apply', path: "/apply",
name:'apply', name: "apply",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/apply.vue'), component: () => import("../views/apply.vue"),
meta: { title: '我要预约' } meta: { title: "我要预约" },
}, },
{ {
path: '/adminHome', path: "/adminHome",
name:'adminHome', name: "adminHome",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/adminHome.vue'), component: () => import("../views/adminHome.vue"),
meta: { title: '智能访客' } meta: { title: "智能访客" },
}, },
{ {
path: '/visitorRecord', path: "/visitorRecord",
name:'visitorRecord', name: "visitorRecord",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/visitorRecord.vue'), component: () => import("../views/visitorRecord.vue"),
meta: { title: '访客记录' } meta: { title: "访客记录" },
}, },
{ {
path: '/Invitation', path: "/Invitation",
name:'Invitation', name: "Invitation",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/Invitation.vue'), component: () => import("../views/Invitation.vue"),
meta: { title: '我要邀约' } meta: { title: "我要邀约" },
}, },
{ {
path: '/userHome', path: "/userHome",
name:'userHome', name: "userHome",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/userHome.vue'), component: () => import("../views/userHome.vue"),
meta: { title: '智能访客' } meta: { title: "智能访客" },
}, },
{ {
path: '/register', path: "/register",
name:'register', name: "register",
component: register component: register,
}, },
{ {
path: '/home', path: "/home",
name:'home', name: "home",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/home.vue'), component: () => import("../views/home.vue"),
meta: { title: '员工信息' } meta: { title: "员工信息" },
}, },
{ {
path: '/specialCrowd', path: "/specialCrowd",
name:'specialCrowd', name: "specialCrowd",
// redirect: '/login', // redirect: '/login',
component: () => import('../views/specialCrowd.vue'), component: () => import("../views/specialCrowd.vue"),
meta: { title: '特殊人员录入' } meta: { title: "特殊人员录入" },
}, },
{ {
path:'/', path: "/",
name:'', name: "",
component:()=>import('../views/userHome.vue'), component: () => import("../views/userHome.vue"),
meta: { title: '智能访客' } meta: { title: "智能访客" },
}, },
{ path: '/:pathMatch(.*)', { path: "/:pathMatch(.*)", redirect: "/userHome" },
redirect: '/userHome', ];
}
]
const router = createRouter({ const router = createRouter({
history: routerHistory, history: routerHistory,
routes routes,
}) });
const title = document.querySelector('title') const title = document.querySelector("title");
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
title.innerText = to.meta.title title.innerText = to.meta.title;
next() next();
}) });
export default router export default router;
src/views/Invitation.vue
+52 -67
View File
@@ -1,40 +1,36 @@
<template> <template>
<div v-if="!canvasUrl" class='invitation-model-fixed' id="canvas"> <div v-if="!canvasUrl" class="invitation-model-fixed" id="canvas">
<img src="../assets/yaoqingbeijingtu.png" alt="" class="big-img"> <img src="../assets/yaoqingbeijingtu.png" alt="" class="big-img" />
<img class="ewm" :src="'data:image/png;base64,'+imgEncode" alt=""> <img class="ewm" :src="'data:image/png;base64,' + imgEncode" alt="" />
<!-- <img src="" alt=""> -->
</div> </div>
<div v-if="canvasUrl" class="img-fixed"> <div v-if="canvasUrl" class="img-fixed">
<img :src="canvasUrl" alt=""> <img :src="canvasUrl" alt="" />
</div> </div>
<!-- <img src="" alt=""> -->
<Savesuccessmodel v-if="false" /> <Savesuccessmodel v-if="false" />
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useStore } from 'vuex' import { useStore } from "vuex";
import { rulesForm, resetForm, rulesPhone } from '@/com/index' import { rulesForm, resetForm, rulesPhone } from "@/com/index";
import dd from 'dingtalk-jsapi' import dd from "dingtalk-jsapi";
import html2canvas from 'html2canvas' import html2canvas from "html2canvas";
import Savesuccessmodel from '@/components/save-success.vue' import Savesuccessmodel from "@/components/save-success.vue";
import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js' import { getToken, getVisitorRecord, getWhiteCode } from "@/api/admin.js";
/* @data */ /* @data */
const router = useRouter() const router = useRouter();
const store = useStore() const store = useStore();
const imgEncode = ref('') const imgEncode = ref("");
const raw = ref('') const raw = ref("");
const canvasUrl = ref('') const canvasUrl = ref("");
/* @setup */ /* @setup */
/* @method */ /* @method */
const onClickDown1 = () =>{ const onClickDown1 = () => {
// const byteCharacters = atob(imgEncode.value); // const byteCharacters = atob(imgEncode.value);
// const byteNumbers = new Array(byteCharacters.length); // const byteNumbers = new Array(byteCharacters.length);
// for (let i = 0; i < byteCharacters.length; i++) { // for (let i = 0; i < byteCharacters.length; i++) {
@@ -45,40 +41,34 @@ import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
// raw.value = byteArray // raw.value = byteArray
// // 创建可下载链接 // // 创建可下载链接
// const url = URL.createObjectURL(blob); // const url = URL.createObjectURL(blob);
// // 创建隐藏的<a>标签 // // 创建隐藏的<a>标签
// const link = document.createElement('a'); // const link = document.createElement('a');
// link.href = url; // link.href = url;
// link.download = 'fileName'; // link.download = 'fileName';
// // 模拟点击隐藏的<a>标签来触发下载 // // 模拟点击隐藏的<a>标签来触发下载
// link.click(); // link.click();
// // 清理URL对象 // // 清理URL对象
// URL.revokeObjectURL(url); // URL.revokeObjectURL(url);
} };
const onClickA =() =>{ const onClickA = () => {
const canvas = document.getElementById('canvas') const canvas = document.getElementById("canvas");
console.log(canvas.offsetHeight) console.log(canvas.offsetHeight);
console.log(canvas.scrollHeight) console.log(canvas.scrollHeight);
dd.previewImage({ dd.previewImage({
urls: [ urls: [canvasUrl.value],
canvasUrl.value,
],
current: 1, current: 1,
success: () => {}, success: () => {},
fail: () => {}, fail: () => {},
complete: () => {}, complete: () => {},
}); });
};
} const onClickDown = () => {
const onClickDown = () =>{
// let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null } // let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
autoPicture('canvas') autoPicture("canvas");
} };
const autoPicture = async (el, options) => { const autoPicture = async (el, options) => {
// let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options // let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
const id = document.getElementById(el) const id = document.getElementById(el);
// alert(document.getElementById('canvas').offsetWidth // alert(document.getElementById('canvas').offsetWidth
const canvas = await html2canvas(id, { const canvas = await html2canvas(id, {
scale: 2, //缩放比例,默认为1 scale: 2, //缩放比例,默认为1
@@ -86,57 +76,52 @@ import { getToken, getVisitorRecord, getWhiteCode } from '@/api/admin.js'
useCORS: true, //是否尝试使用CORS从服务器加载图像 useCORS: true, //是否尝试使用CORS从服务器加载图像
// width: document.getElementById('canvas').offsetWidth, //画布的宽度 // width: document.getElementById('canvas').offsetWidth, //画布的宽度
// height: document.getElementById('canvas').offsetHeight, //画布的高度 // height: document.getElementById('canvas').offsetHeight, //画布的高度
width: document.getElementById('canvas').offsetWidth, //画布的宽度 width: document.getElementById("canvas").offsetWidth, //画布的宽度
height: document.getElementById('canvas').offsetHeight, //画布的高度 height: document.getElementById("canvas").offsetHeight, //画布的高度
backgroundColor: null //画布的背景色，默认为透明 backgroundColor: null, //画布的背景色，默认为透明
}) });
// canvas.toDataURL('image/png') // canvas.toDataURL('image/png')
// console.log(canvas.toDataURL('image/png')) // console.log(canvas.toDataURL('image/png'))
canvasUrl.value = canvas.toDataURL('image/png') canvasUrl.value = canvas.toDataURL("image/png");
};
// localStorage.setItem('token', 123456)
} getWhiteCode().then((res) => {
// localStorage.setItem('token', 123456) console.log(res);
getWhiteCode().then(res =>{ imgEncode.value = res.imgEncode;
console.log(res)
imgEncode.value = res.imgEncode
// autoPicture(canvas) // autoPicture(canvas)
// raw.value = window.atob(res.imgEncode); // raw.value = window.atob(res.imgEncode);
setTimeout(()=>{ setTimeout(() => {
onClickDown() onClickDown();
}, 100) }, 100);
});
})
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.invitation-model-fixed{ .invitation-model-fixed {
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
// background: url('../assets/yaoqingbeijingtu.png') left top/100% auto no-repeat; // background: url('../assets/yaoqingbeijingtu.png') left top/100% auto no-repeat;
background: #fff; background: #fff;
.big-img{ .big-img {
width: 100%; width: 100%;
} }
.ewm{ .ewm {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 4rem /* 300/75 */; top: 4.9rem /* 300/75 */;
transform: translateX(-50%); transform: translateX(-50%);
width:4.5333rem /* 340/75 */; width: 4.5333rem /* 340/75 */;
height: 4.5333rem /* 340/75 */; height: 4.5333rem /* 340/75 */;
} }
} }
.img-fixed{ .img-fixed {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
img{ img {
width: 100%; width: 100%;
} }
} }
src/views/userHome.vue
+177 -171
View File
@@ -1,249 +1,257 @@
<template> <template>
<div class='box'> <div class="box">
<header> <header>
<div class="header-top"> <div class="header-top">
<h1><img src="../assets/userhome/dingsheng.png" alt=""></h1> <h1><img src="../assets/userhome/dingsheng.png" alt="" /></h1>
<img class="h3" src="../assets/userhome/zhiengfangke.png" alt=""> <img class="h3" src="../assets/userhome/zhiengfangke.png" alt="" />
<p>欢迎进入鼎盛无际智能访客系统</p> <p>欢迎进入鼎盛无际智能访客系统</p>
</div> </div>
<div class="plate-box"> <div class="plate-box">
<div @click="onClickGo('/apply')" class="list"> <div @click="onClickGo('/apply')" class="list">
<h4>来访预约</h4> <h4>来访预约</h4>
<p>登记来访</p> <p>登记来访</p>
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt=""> <img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="" />
<img class="img" src="../assets/userhome/ren.png" alt=""> <img class="img" src="../assets/userhome/ren.png" alt="" />
</div> </div>
<div @click="onClickGo('/applyRecord')" class="list"> <div @click="onClickGo('/applyRecord')" class="list">
<h4>预约记录</h4> <h4>预约记录</h4>
<p>记录查询</p> <p>记录查询</p>
<img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt=""> <img class="icon-arrowhead" src="../assets/userhome/youjiantou.png" alt="" />
<img class="img" src="../assets/userhome/fang.png" alt=""> <img class="img" src="../assets/userhome/fang.png" alt="" />
</div> </div>
</div> </div>
</header> </header>
<div class="content"> <div class="content">
<div class="contact-box"> <div class="contact-box">
<h3><span>联系我们 </span><p><b class="square"></b></p> </h3> <h3>
<span>联系我们 </span>
<p><b class="square"></b></p>
</h3>
<div class="time">法定工作日 09:00-12:00 14:00-18:00</div> <div class="time">法定工作日 09:00-12:00 14:00-18:00</div>
<p @click="onClickCall" class="text-list"> <p @click="onClickCall" class="text-list">
<img src="../assets/userhome/dianhua.png" alt=""> <img src="../assets/userhome/dianhua.png" alt="" />
<span>服务热线：400040-1573</span> <span>服务热线：400040-1573</span>
</p> </p>
<p class="text-list"> <p class="text-list">
<img src="../assets/userhome/dingwei.png" alt=""> <img src="../assets/userhome/dingwei.png" alt="" />
<span>地址：四川省泸州市高新区众创中心12楼</span> <span>地址：四川省泸州市高新区众创中心12楼</span>
</p> </p>
</div> </div>
<div class="controls-box"> <div class="controls-box">
<img class="icon-img" src="../assets/caozuo.png" > <img class="icon-img" src="../assets/caozuo.png" />
<p>操作手册</p> <p>操作手册</p>
<img class="icon-right" src="../assets/youjiantou.png" alt=""> <img class="icon-right" src="../assets/youjiantou.png" alt="" />
<a href="https://www.yuque.com/zhoupangpang-m5aid/qp94nz/hhvxk757iolg8gah?singleDoc#"></a> <a
href="https://www.yuque.com/zhoupangpang-m5aid/qp94nz/hhvxk757iolg8gah?singleDoc#"
></a>
</div> </div>
<!-- <div><button @click="onClickUpdate">修改token</button></div> --> <!-- <div><button @click="onClickUpdate">修改token</button></div> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import { useStore } from 'vuex' import { useStore } from "vuex";
import { rulesForm, resetForm, rulesPhone } from '@/com/index' import { rulesForm, resetForm, rulesPhone } from "@/com/index";
import { getWeChatCode, login } from '../api/user' import { getWeChatCode, login } from "../api/user";
import { Toast, ImagePreview } from 'vant'; import { Toast, ImagePreview } from "vant";
/* @data */ /* @data */
const router = useRouter() const router = useRouter();
const store = useStore() const store = useStore();
const url = 'http://visitor.scdswj.cn/?code=071ucW200YtsQR1AUj3007Tabj2ucW26&state=STATE' const url = "http://visitor.scdswj.cn/?code=071ucW200YtsQR1AUj3007Tabj2ucW26&state=STATE";
/* @setup */ /* @setup */
// url.split('?')[1].split('&').map(item =>{ // url.split('?')[1].split('&').map(item =>{
// if(item.split('=')[0] === 'code'){ // if(item.split('=')[0] === 'code'){
// // code = item.split('=')[1] // // code = item.split('=')[1]
// console.log(item.split('=')[1]) // console.log(item.split('=')[1])
// alert(item.split('=')[1]) // alert(item.split('=')[1])
// } // }
// }) // })
localStorage.setItem('redirect', '/userhome') localStorage.setItem("redirect", "/userhome");
/* @method */ /* @method */
// const onClickUpdate = () =>{ // const onClickUpdate = () =>{
// localStorage.setItem("userToken", 'res.data.authorization'); // localStorage.setItem("userToken", 'res.data.authorization');
// } // }
const onClickGo = (url = '/userHome') =>{ const onClickGo = (url = "/userHome") => {
router.push(url) router.push(url);
} };
const onClickCall = () =>{ const onClickCall = () => {
window.location.href = 'tel:400-040-1573' window.location.href = "tel:400-040-1573";
} };
const onClickMap = () =>{ const onClickMap = () => {
window.location.href = '' window.location.href = "";
} };
//判断是否是微信内置的浏览器 //判断是否是微信内置的浏览器
const isWXBrowserFun = ()=> { const isWXBrowserFun = () => {
return ( return (
String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) ===
"micromessenger" "micromessenger"
); );
} };
//截取地址栏code //截取地址栏code
const getUrlCode = (name) =>{ const getUrlCode = (name) => {
if(window.location.href.indexOf(name) === -1) return if (window.location.href.indexOf(name) === -1) return;
let code = '' let code = "";
window.location.href.split('?')[1].split('&').map(item =>{ window.location.href
if(item.split('=')[0] === name){ .split("?")[1]
code = item.split('=')[1] .split("&")
} .map((item) => {
}) if (item.split("=")[0] === name) {
return code code = item.split("=")[1];
}
//访问微信地址，用来获取code
const weChatCode = () =>{
getWeChatCode().then(res =>{
window.location.href = res.data
})
}
//把code传递给后台接口，静默登录
const wxLogin = (code) =>{
login(code).then((res) => {
console.log(res)
if (res.code===200) {
localStorage.setItem("userToken", res.data.authorization);
Toast.success('登录成功！')
} else {
Toast.fail('登录失败！')
} }
}); });
return code;
};
//访问微信地址，用来获取code
const weChatCode = () => {
getWeChatCode().then((res) => {
console.log(res, "地址");
window.location.href = res.data;
});
};
//把code传递给后台接口，静默登录
const wxLogin = (code) => {
login(code).then((res) => {
console.log(res);
if (res.code === 200) {
localStorage.setItem("userToken", res.data.authorization);
Toast.success("登录成功！");
} else {
Toast.fail("登录失败！");
} }
});
};
const isWXBrowser = isWXBrowserFun(); const isWXBrowser = isWXBrowserFun();
if (isWXBrowser) { if (isWXBrowser) {
const userToken = localStorage.getItem('userToken') const userToken = localStorage.getItem("userToken");
if(!userToken){ if (!userToken) {
let code = getUrlCode("code"); let code = getUrlCode("code");
console.log(code) console.log(code);
if (code) { if (code) {
wxLogin(code); //后台登录 wxLogin(code); //后台登录
} else { } else {
weChatCode(); //微信授权 weChatCode(); //微信授权
} }
} }
}else { } else {
alert('请在微信中打开！') alert("请在微信中打开！");
} }
</script> </script>
<style lang='scss' scoped> <style lang="scss" scoped>
.box{ .box {
background-color: #F4F5F8; background-color: #f4f5f8;
header{ header {
width: 100%; width: 100%;
height: 6.9333rem /* 520/75 */; height: 6.9333rem /* 520/75 */;
background: url('../assets/userhome/beijign.png') left top/100% 100% no-repeat; background: url("../assets/userhome/beijign.png") left top/100% 100% no-repeat;
.header-top{ .header-top {
width: 100%; width: 100%;
height: 4.1867rem /* 314/75 */; height: 4.1867rem /* 314/75 */;
background: url('../assets/userhome/topbeijing.png') left top/100% 100% no-repeat; background: url("../assets/userhome/topbeijing.png") left top/100% 100% no-repeat;
h1{ h1 {
padding: .7467rem /* 56/75 */ .64rem /* 48/75 */; padding: 0.7467rem /* 56/75 */ 0.64rem /* 48/75 */;
box-sizing: border-box; box-sizing: border-box;
img{ img {
width: 2.1333rem /* 160/75 */; width: 2.1333rem /* 160/75 */;
height: .5867rem /* 44/75 */; height: 0.5867rem /* 44/75 */;
} }
} }
.h3{ .h3 {
width: 3.12rem /* 234/75 */; width: 3.12rem /* 234/75 */;
height: .7733rem /* 58/75 */; height: 0.7733rem /* 58/75 */;
margin: 0 0 .2133rem /* 16/75 */ .6667rem /* 50/75 */; margin: 0 0 0.2133rem /* 16/75 */ 0.6667rem /* 50/75 */;
} }
p{ p {
line-height: .48rem /* 36/75 */; line-height: 0.48rem /* 36/75 */;
font-size: .32rem /* 24/75 */; font-size: 0.32rem /* 24/75 */;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #514E4B; color: #514e4b;
padding: 0 0 0 .7467rem /* 56/75 */; padding: 0 0 0 0.7467rem /* 56/75 */;
box-sizing: border-box; box-sizing: border-box;
} }
} }
.plate-box{ .plate-box {
width: 100%; width: 100%;
height: 3.3333rem /* 250/75 */; height: 3.3333rem /* 250/75 */;
padding: 0 .4267rem /* 32/75 */; padding: 0 0.4267rem /* 32/75 */;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.list{ .list {
position: relative; position: relative;
flex: 1; flex: 1;
height: 3.3333rem /* 250/75 */; height: 3.3333rem /* 250/75 */;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
border-radius: .2667rem /* 20/75 */; border-radius: 0.2667rem /* 20/75 */;
opacity: 1; opacity: 1;
border: .0267rem /* 2/75 */ solid #FFFFFF; border: 0.0267rem /* 2/75 */ solid #ffffff;
h4{ h4 {
padding: .4533rem /* 34/75 */ 0 .1333rem /* 10/75 */ .5067rem /* 38/75 */; padding: 0.4533rem /* 34/75 */ 0 0.1333rem /* 10/75 */ 0.5067rem /* 38/75 */;
box-sizing: border-box; box-sizing: border-box;
line-height: .6133rem /* 46/75 */; line-height: 0.6133rem /* 46/75 */;
font-size: $size30; font-size: $size30;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #222222; color: #222222;
} }
p{ p {
line-height: .4533rem /* 34/75 */; line-height: 0.4533rem /* 34/75 */;
font-size: .2933rem /* 22/75 */; font-size: 0.2933rem /* 22/75 */;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #5F6583; color: #5f6583;
padding: 0 0 0 .5333rem /* 40/75 */; padding: 0 0 0 0.5333rem /* 40/75 */;
box-sizing: border-box; box-sizing: border-box;
} }
.icon-arrowhead{ .icon-arrowhead {
width: .5333rem /* 40/75 */; width: 0.5333rem /* 40/75 */;
height: .5333rem /* 40/75 */; height: 0.5333rem /* 40/75 */;
margin: .7733rem /* 58/75 */ 0 0 .4533rem /* 34/75 */; margin: 0.7733rem /* 58/75 */ 0 0 0.4533rem /* 34/75 */;
} }
.img{ .img {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: .3733rem /* 28/75 */; right: 0.3733rem /* 28/75 */;
width: 1.5733rem /* 118/75 */; width: 1.5733rem /* 118/75 */;
height: 1.8133rem /* 136/75 */; height: 1.8133rem /* 136/75 */;
} }
} }
.list:first-child{ .list:first-child {
margin-right: .3467rem /* 26/75 */; margin-right: 0.3467rem /* 26/75 */;
} }
} }
} }
.content{ .content {
width: 100%; width: 100%;
padding: 1.12rem /* 84/75 */ .4rem /* 30/75 */ 0; padding: 1.12rem /* 84/75 */ 0.4rem /* 30/75 */ 0;
box-sizing: border-box; box-sizing: border-box;
.contact-box{ .contact-box {
width: 100%; width: 100%;
height: 4.24rem /* 318/75 */; height: 4.24rem /* 318/75 */;
// background: linear-gradient(261deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); // background: linear-gradient(261deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
background: url('../assets/userhome/ditu.png') left top/100% 100% no-repeat; background: url("../assets/userhome/ditu.png") left top/100% 100% no-repeat;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: .2667rem /* 20/75 */ 1.0667rem /* 80/75 */ .2667rem /* 20/75 */ .2667rem /* 20/75 */; border-radius: 0.2667rem /* 20/75 */ 1.0667rem /* 80/75 */ 0.2667rem /* 20/75 */
h3{ 0.2667rem /* 20/75 */;
h3 {
position: relative; position: relative;
// padding: .48rem /* 36/75 */ .5333rem /* 40/75 */ .2667rem /* 20/75 */; // padding: .48rem /* 36/75 */ .5333rem /* 40/75 */ .2667rem /* 20/75 */;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
span{ span {
display: block; display: block;
padding: .48rem /* 36/75 */ 0 0 .5333rem /* 40/75 */ ; padding: 0.48rem /* 36/75 */ 0 0 0.5333rem /* 40/75 */;
line-height: .6133rem /* 46/75 */; line-height: 0.6133rem /* 46/75 */;
font-size: $size30; font-size: $size30;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500; font-weight: 500;
@@ -251,82 +259,81 @@ import { Toast, ImagePreview } from 'vant';
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
p{ p {
position: relative; position: relative;
flex: 1; flex: 1;
.square{ .square {
position: absolute; position: absolute;
bottom: .0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
transform: translateX(-70%) translateY(-20%); transform: translateX(-70%) translateY(-20%);
width: .24rem /* 18/75 */; width: 0.24rem /* 18/75 */;
height: .24rem /* 18/75 */; height: 0.24rem /* 18/75 */;
background: #30BF78; background: #30bf78;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
} }
} }
} }
.time{ .time {
padding: .2667rem /* 20/75 */ 0 0 .5333rem /* 40/75 */; padding: 0.2667rem /* 20/75 */ 0 0 0.5333rem /* 40/75 */;
box-sizing: border-box; box-sizing: border-box;
line-height: .4533rem /* 34/75 */; line-height: 0.4533rem /* 34/75 */;
font-size: .2933rem /* 22/75 */; font-size: 0.2933rem /* 22/75 */;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #5F6583; color: #5f6583;
margin-bottom: .56rem /* 42/75 */; margin-bottom: 0.56rem /* 42/75 */;
} }
.text-list{ .text-list {
padding: 0 .64rem /* 48/75 */; padding: 0 0.64rem /* 48/75 */;
box-sizing: border-box; box-sizing: border-box;
line-height: .5333rem /* 40/75 */; line-height: 0.5333rem /* 40/75 */;
font-size: $size26; font-size: $size26;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500; font-weight: 500;
color: #5F6583; color: #5f6583;
display: flex; display: flex;
margin-bottom: .3733rem /* 28/75 */; margin-bottom: 0.3733rem /* 28/75 */;
img{ img {
width: .5333rem /* 40/75 */; width: 0.5333rem /* 40/75 */;
height: .5333rem /* 40/75 */; height: 0.5333rem /* 40/75 */;
margin-right: .2133rem /* 16/75 */; margin-right: 0.2133rem /* 16/75 */;
} }
} }
} }
.controls-box{ .controls-box {
position: relative; position: relative;
height: 1.3333rem /* 100/75 */; height: 1.3333rem /* 100/75 */;
background: rgba(255,255,255,0.8); background: rgba(255, 255, 255, 0.8);
border-radius:.2667rem /* 20/75 */; border-radius: 0.2667rem /* 20/75 */;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 .24rem /* 18/75 */ 0 .4533rem /* 34/75 */; padding: 0 0.24rem /* 18/75 */ 0 0.4533rem /* 34/75 */;
box-sizing: border-box; box-sizing: border-box;
margin-top: .32rem /* 24/75 */ ; margin-top: 0.32rem /* 24/75 */;
.icon-img{ .icon-img {
width: .8533rem /* 64/75 */; width: 0.8533rem /* 64/75 */;
height: .8533rem /* 64/75 */; height: 0.8533rem /* 64/75 */;
} }
p{ p {
flex: 1; flex: 1;
font-size: $lg-size; font-size: $lg-size;
font-family: Inter, Inter; font-family: Inter, Inter;
font-weight: 500; font-weight: 500;
color: #5F6583; color: #5f6583;
line-height: .5067rem /* 38/75 */; line-height: 0.5067rem /* 38/75 */;
padding: 0 0 0 .24rem /* 18/75 */; padding: 0 0 0 0.24rem /* 18/75 */;
box-sizing: border-box; box-sizing: border-box;
} }
.icon-right{ .icon-right {
width: .64rem /* 48/75 */; width: 0.64rem /* 48/75 */;
height: .64rem /* 48/75 */; height: 0.64rem /* 48/75 */;
} }
a{ a {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -336,5 +343,4 @@ import { Toast, ImagePreview } from 'vant';
} }
} }
} }
</style> </style>
vite.config.js
+12 -16
View File
@@ -1,9 +1,8 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import { resolve } from "path" import { resolve } from "path";
import styleImport, { VantResolve } from 'vite-plugin-style-import';
import styleImport, { VantResolve } from "vite-plugin-style-import";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@@ -13,19 +12,17 @@ export default defineConfig({
resolves: [VantResolve()], resolves: [VantResolve()],
libs: [ libs: [
{ {
libraryName: 'vant', libraryName: "vant",
esModule: true, esModule: true,
resolveStyle: (name) => `../es/${name}/style`, //https://blog.csdn.net/yunchong_zhao/article/details/123552423 resolveStyle: (name) => `../es/${name}/style`, //https://blog.csdn.net/yunchong_zhao/article/details/123552423
}, },
], ],
}), }),
], ],
server: { server: {
host: '0.0.0.0',//设置地址：http://localhost host: "0.0.0.0", //设置地址：http://localhost
port: 4000, // 设置服务启动端口号 port: 4000, // 设置服务启动端口号
hmr: false, // 关闭热更新
// open: true, // 设置服务启动时是否自动打开浏览器 // open: true, // 设置服务启动时是否自动打开浏览器
// cors: true, // 允许跨域 // cors: true, // 允许跨域
// proxy: { // proxy: {
@@ -38,10 +35,10 @@ export default defineConfig({
// } // }
// } // }
}, },
resolve:{ resolve: {
alias:{ alias: {
"@": resolve(__dirname, "src") "@": resolve(__dirname, "src"),
} },
}, },
css: { css: {
// css预处理器 // css预处理器
@@ -52,5 +49,4 @@ export default defineConfig({
}, },
}, },
}, },
});
})