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
+89 -79
View File
@@ -1,96 +1,106 @@
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信息携带放在此处 // 可以设置 加载的动画效果 的展示
console.log(config) // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
return config console.log(config);
}, (error) => { return config;
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 message = errorCode[code] || response.data.msg || errorCode['default'] const code = response.data.code || 200;
if(code == 200){ const message =
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口 errorCode[code] || response.data.msg || errorCode["default"];
}else{ if (code == 200) {
Toast.clear() if (loadNoCloseArr.includes(response.config.url)) {
} // 设置请求不关闭加载动画接口
}else{ } else {
Toast.clear() Toast.clear();
}
if (code === 401) {
Toast.fail(message)
setTimeout(()=>{
localStorage.removeItem('token');
localStorage.removeItem('user');
const redirectUrl = localStorage.getItem('redirect')
if(redirectUrl){
window.location.href = redirectUrl
}else{
window.location.href = '/userHome'
} }
},2000) } else {
return Promise.reject('登录状态已过期,即将返回首页重新登录。') Toast.clear();
} else if (code === 500) { }
// Message({ message: msg, type: 'error' }) if (code === 401) {
Toast.fail(message) console.log("进了");
return Promise.reject(response.data) Toast.fail(message);
} else if (code === 601) { setTimeout(() => {
// Message({ message: msg, type: 'warning' }) localStorage.removeItem("token");
Toast.fail(message) localStorage.removeItem("user");
return Promise.reject('error') const redirectUrl = localStorage.getItem("redirect");
} else if (code != 200) { if (redirectUrl) {
Toast.fail(message) window.location.href = redirectUrl;
return Promise.reject('error') } else {
} else { window.location.href = "/adminHome";
return response.data }
}, 2000);
return Promise.reject("登录状态已过期,即将返回首页重新登录。");
} else if (code === 500) {
// Message({ message: msg, type: 'error' })
Toast.fail(message);
return Promise.reject(response.data);
} else if (code === 601) {
// Message({ message: msg, type: 'warning' })
Toast.fail(message);
return Promise.reject("error");
} else if (code != 200) {
Toast.fail(message);
return Promise.reject("error");
} else {
return response.data;
}
},
(error) => {
Toast.clear();
console.log(error.message);
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
console.log(message);
Toast.fail(message);
return Promise.reject(error.response);
} }
}, error => { );
Toast.clear()
console.log(error.message)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
console.log(message)
Toast.fail(message)
return Promise.reject(error.response)
}) export default request;
export default request
src/api/index.js
+90 -81
View File
@@ -1,98 +1,107 @@
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信息携带放在此处 // 可以设置 加载的动画效果 的展示
console.log(config) // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
return config console.log(config);
}, (error) => { return config;
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 message = errorCode[code] || response.data.msg || errorCode['default'] const code = response.data.code || 200;
if(code == 200){ const message =
if(loadNoCloseArr.includes(response.config.url)){ // 设置请求不关闭加载动画接口 errorCode[code] || response.data.msg || errorCode["default"];
}else{ if (code == 200) {
Toast.clear() if (loadNoCloseArr.includes(response.config.url)) {
} // 设置请求不关闭加载动画接口
}else{ } else {
Toast.clear() Toast.clear();
}
if (code === 401) {
Toast.fail(message)
setTimeout(()=>{
localStorage.removeItem('token');
localStorage.removeItem('user');
localStorage.removeItem('userToken');
const redirectUrl = localStorage.getItem('redirect')
if(redirectUrl){
window.location.href = redirectUrl
}else{
window.location.href = '/userHome'
} }
},2000) } else {
return Promise.reject('登录状态已过期,即将返回首页重新登录。') Toast.clear();
} else if (code === 500) { }
// Message({ message: msg, type: 'error' }) if (code === 401) {
Toast.fail(message) Toast.fail(message);
return Promise.reject(response.data) setTimeout(() => {
} else if (code === 601) { localStorage.removeItem("token");
// Message({ message: msg, type: 'warning' }) localStorage.removeItem("user");
Toast.fail(message) localStorage.removeItem("userToken");
return Promise.reject('error')
} else if (code != 200) {
Toast.fail(message)
return Promise.reject('error')
} else {
return response.data
}
}, error => {
Toast.clear()
console.log(error.message)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
console.log(message)
Toast.fail(message)
return Promise.reject(error.response)
}) const redirectUrl = localStorage.getItem("redirect");
if (redirectUrl) {
window.location.href = redirectUrl;
} else {
window.location.href = "/userHome";
}
}, 2000);
return Promise.reject("登录状态已过期,即将返回首页重新登录。");
} else if (code === 500) {
// Message({ message: msg, type: 'error' })
Toast.fail(message);
return Promise.reject(response.data);
} else if (code === 601) {
// Message({ message: msg, type: 'warning' })
Toast.fail(message);
return Promise.reject("error");
} else if (code != 200) {
Toast.fail(message);
return Promise.reject("error");
} else {
return response.data;
}
},
(error) => {
Toast.clear();
console.log(error.message);
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
console.log(message);
Toast.fail(message);
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
+62 -66
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
+90 -105
View File
@@ -1,142 +1,127 @@
<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>
<Savesuccessmodel v-if="false" />
<!-- <img src="" alt=""> -->
<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++) {
// byteNumbers[i] = byteCharacters.charCodeAt(i); // byteNumbers[i] = byteCharacters.charCodeAt(i);
// } // }
// const byteArray = new Uint8Array(byteNumbers); // const byteArray = new Uint8Array(byteNumbers);
// const blob = new Blob([byteArray], { type: 'image/jpeg' }); // const blob = new Blob([byteArray], { type: 'image/jpeg' });
// 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>标签来触发下载
// link.click();
// // 模拟点击隐藏的<a>标签来触发下载 // // 清理URL对象
// link.click(); // URL.revokeObjectURL(url);
};
// // 清理URL对象 const onClickA = () => {
// URL.revokeObjectURL(url); const canvas = document.getElementById("canvas");
} console.log(canvas.offsetHeight);
const onClickA =() =>{ console.log(canvas.scrollHeight);
const canvas = document.getElementById('canvas') dd.previewImage({
console.log(canvas.offsetHeight) urls: [canvasUrl.value],
console.log(canvas.scrollHeight) current: 1,
dd.previewImage({ success: () => {},
urls: [ fail: () => {},
canvasUrl.value, complete: () => {},
], });
current: 1, };
success: () => {}, const onClickDown = () => {
fail: () => {}, // let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null }
complete: () => {}, autoPicture("canvas");
}); };
const autoPicture = async (el, options) => {
} // let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options
const onClickDown = () =>{ const id = document.getElementById(el);
// let options = { scale: 1, allowTaint: false, useCORS: true, width: '375', height: '649', backgroundColor: null } // alert(document.getElementById('canvas').offsetWidth
autoPicture('canvas') const canvas = await html2canvas(id, {
} scale: 2, //缩放比例,默认为1
const autoPicture = async (el, options) => { allowTaint: false, //是否允许跨域图像污染画布
// let { scale = 1, allowTaint = false, useCORS = true, width = '375', height = '649', backgroundColor = null } = options useCORS: true, //是否尝试使用CORS从服务器加载图像
const id = document.getElementById(el) // width: document.getElementById('canvas').offsetWidth, //画布的宽度
// alert(document.getElementById('canvas').offsetWidth // height: document.getElementById('canvas').offsetHeight, //画布的高度
const canvas = await html2canvas(id, { width: document.getElementById("canvas").offsetWidth, //画布的宽度
scale: 2, //缩放比例,默认为1 height: document.getElementById("canvas").offsetHeight, //画布的高度
allowTaint: false, //是否允许跨域图像污染画布 backgroundColor: null, //画布的背景色，默认为透明
useCORS: true, //是否尝试使用CORS从服务器加载图像 });
// width: document.getElementById('canvas').offsetWidth, //画布的宽度 // canvas.toDataURL('image/png')
// height: document.getElementById('canvas').offsetHeight, //画布的高度 // console.log(canvas.toDataURL('image/png'))
width: document.getElementById('canvas').offsetWidth, //画布的宽度 canvasUrl.value = canvas.toDataURL("image/png");
height: document.getElementById('canvas').offsetHeight, //画布的高度 };
backgroundColor: null //画布的背景色，默认为透明 // localStorage.setItem('token', 123456)
}) getWhiteCode().then((res) => {
// canvas.toDataURL('image/png') console.log(res);
// console.log(canvas.toDataURL('image/png')) imgEncode.value = res.imgEncode;
canvasUrl.value = canvas.toDataURL('image/png') // autoPicture(canvas)
// raw.value = window.atob(res.imgEncode);
setTimeout(() => {
} onClickDown();
// localStorage.setItem('token', 123456) }, 100);
getWhiteCode().then(res =>{ });
console.log(res)
imgEncode.value = res.imgEncode
// autoPicture(canvas)
// raw.value = window.atob(res.imgEncode);
setTimeout(()=>{
onClickDown()
}, 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
+188 -182
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 {
alert('请在微信中打开！')
} }
} else {
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({
}, },
}, },
}, },
});
})