设置路由跳转对接提交

main
JayChou 1 week ago
parent f5b1ab61a5
commit 09b405503a
  1. 8
      src/api/index.ts
  2. 24
      src/layout/index.vue
  3. 2
      src/layout/loginPage.vue
  4. 110
      src/layout/studyPage.vue
  5. 2
      src/permissions.ts
  6. 9
      src/utils/request.ts
  7. 2
      src/views/subjectTest/index.vue

@ -74,3 +74,11 @@ export const getExperiment = ()=>{
method:'get', method:'get',
}) })
} }
// 确认实验
export const submitExperiment = (data:any) => {
return request({
url:'/xnRecords/verifyExperimentaInfo',
method:"POST",
data
})
}

@ -2,8 +2,9 @@
<div class="container-bgc"> <div class="container-bgc">
<div class="top"> <div class="top">
<div class="loginBtn"> <div class="loginBtn">
<p @click="loginFn">{{user.token?'已登录':'登录/注册'}}</p> <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
</div> </div>
<div class="title">{{ setting.title }}</div> <div class="title">{{ setting.title }}</div>
</div> </div>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
@ -17,19 +18,25 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
// import { onMounted, reactive, ref, toRefs, watch } from "vue"; // import { onMounted, reactive, ref, toRefs, watch } from "vue";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
import userStore from '@/store/modules/user'; import userStore from "@/store/modules/user";
const user = userStore(); const user = userStore();
const setting = settingStore(); const setting = settingStore();
const router = useRouter() const router = useRouter();
console.log(setting.title); console.log(setting.title);
user.token ? router.push('/spacePage') : ''
const loginFn = () => { const loginFn = () => {
router.push('/login') // user.token ? router.push("/spacePage") : "";
if(user.token){
router.push("/spacePage")
return
} }
router.push("/login");
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -64,12 +71,12 @@ const loginFn=()=>{
/* 向左浮动 */ /* 向左浮动 */
top: 10px; top: 10px;
left: 230px; left: 230px;
border: 1px solid #33FEFE; border: 1px solid #33fefe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 142px; width: 142px;
height: 40px; height: 40px;
line-height: 37px; line-height: 37px;
background: linear-gradient(to bottom, #08B9C1, #0758B8); background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg); transform: skew(-30deg);
cursor: pointer; cursor: pointer;
/* 在X轴方向倾斜 -35 度 */ /* 在X轴方向倾斜 -35 度 */
@ -82,6 +89,5 @@ const loginFn=()=>{
} }
} }
} }
} }
</style> </style>

@ -429,7 +429,7 @@ const login = async () => {
}; };
const res = await user.logIn(data); const res = await user.logIn(data);
if (res) { if (res) {
router.push('/') router.push('/studyPage')
} }
}; };

@ -2,38 +2,67 @@
<div class="login_container"> <div class="login_container">
<div class="top"> <div class="top">
<div class="loginBtn"> <div class="loginBtn">
<p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p> <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
</div>
<div class="submit">
<p @click="submit">提交</p>
</div> </div>
<div class="title">{{ setting.title }}</div> <div class="title">{{ setting.title }}</div>
</div> </div>
<div class="main-content"> <div class="main-content">
<div class="box" :style="{ backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})` }" <div
@click="handleBoxClick(1)"> class="box"
:style="{
backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
@click="handleBoxClick(1)"
>
知识点学习 知识点学习
</div> </div>
<div class="box" :style="{ backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})` }" <div
@click="handleBoxClick(2)">学习</div> class="box"
<div class="box" :style="{ backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})` }" :style="{
style="margin-bottom: 80px;" @click="handleBoxClick(3)">仿真实验</div> backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
@click="handleBoxClick(2)"
>
学习
</div>
<div
class="box"
:style="{
backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})`,
}"
style="margin-bottom: 80px"
@click="handleBoxClick(3)"
>
仿真实验
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts" name="studyPage"> <script setup lang="ts" name="studyPage">
import { ref } from "vue" import { ref } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import settingStore from "@/store/modules/setting"; import settingStore from "@/store/modules/setting";
const setting = settingStore(); const setting = settingStore();
import userStore from '@/store/modules/user'; import userStore from "@/store/modules/user";
import btn1 from '@/assets/images/btn1.png' import btn1 from "@/assets/images/btn1.png";
import btn2 from '@/assets/images/btn2.png' import btn2 from "@/assets/images/btn2.png";
console.log(btn1, 'btn1'); import { submitExperiment } from "@/api";
import { ElMessage } from "element-plus";
const router = useRouter() const router = useRouter();
const user = userStore(); const user = userStore();
const loginFn = () => { const loginFn = () => {
router.push('/login') // user.token ? router.push("/spacePage") : "";
if (user.token) {
router.push("/spacePage");
return;
} }
router.push("/login");
};
const isBox1Clicked = ref(false); const isBox1Clicked = ref(false);
const isBox2Clicked = ref(false); const isBox2Clicked = ref(false);
const isBox3Clicked = ref(false); const isBox3Clicked = ref(false);
@ -45,20 +74,33 @@ const handleBoxClick = (boxNumber) => {
case 1: case 1:
isBox1Clicked.value = true; isBox1Clicked.value = true;
// router.push('/page1'); // /page1 // router.push('/page1'); // /page1
router.push('/knowledgePage') router.push("/knowledgePage");
break; break;
case 2: case 2:
isBox2Clicked.value = true; isBox2Clicked.value = true;
// router.push('/page2'); router.push("/subjectTest");
break; break;
case 3: case 3:
isBox3Clicked.value = true; isBox3Clicked.value = true;
// router.push('/page3'); router.push("/");
break; break;
default: default:
break; break;
} }
}; };
const submit = async () => {
await submitExperiment({ getStudyRecords_id: user.userInfo.id }).then(
(res: any) => {
console.log(res);
if (res.code == 500) {
ElMessage.error(res.message);
} else {
ElMessage.success(res.message);
}
}
);
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -93,12 +135,37 @@ const handleBoxClick = (boxNumber) => {
/* 向左浮动 */ /* 向左浮动 */
top: 10px; top: 10px;
left: 230px; left: 230px;
border: 1px solid #33FEFE; border: 1px solid #33fefe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 142px; width: 142px;
height: 40px; height: 40px;
line-height: 37px; line-height: 37px;
background: linear-gradient(to bottom, #08B9C1, #0758B8); background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg);
cursor: pointer;
/* 在X轴方向倾斜 -35 度 */
border-radius: 5%;
p {
transform: skew(30deg);
/* 反向倾斜,抵消父元素的变形 */
font-size: 18px;
color: #fff;
}
}
.submit {
position: absolute;
/* 清除浮动影响 */
// float: right;
/* 向左浮动 */
top: 10px;
right: 230px;
border: 1px solid #33fefe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 142px;
height: 40px;
line-height: 37px;
background: linear-gradient(to bottom, #08b9c1, #0758b8);
transform: skew(-30deg); transform: skew(-30deg);
cursor: pointer; cursor: pointer;
/* 在X轴方向倾斜 -35 度 */ /* 在X轴方向倾斜 -35 度 */
@ -126,7 +193,6 @@ const handleBoxClick = (boxNumber) => {
flex-direction: column; flex-direction: column;
.box { .box {
width: 520px; width: 520px;
height: 162px; height: 162px;
// background-color: #007BFF; // background-color: #007BFF;

@ -6,7 +6,7 @@ const store = userStore(pinia);
router.beforeEach((to: any, from: any, next: any) => { router.beforeEach((to: any, from: any, next: any) => {
if (to.path === "/login") { if (to.path === "/login") {
if (store.token) { if (store.token) {
next("/"); next("/studyPage");
} else { } else {
next(); next();
} }

@ -2,8 +2,9 @@
import axios from "axios"; import axios from "axios";
import pinia from "@/store"; import pinia from "@/store";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import {removeToken} from '@/utils/auth'
import userStore from "@/store/modules/user"; import userStore from "@/store/modules/user";
import router from '@/router'
// 创建axios实例 // 创建axios实例
const server = axios.create({ const server = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API, baseURL: import.meta.env.VITE_APP_BASE_API,
@ -26,8 +27,14 @@ server.interceptors.response.use((response) => {
// useuserStore.clearStatus(); // useuserStore.clearStatus();
// return Promise.reject(response); // return Promise.reject(response);
} }
if(response.data.code=== 401){
ElMessage.error(response.data.message);
return Promise.reject(response);
}
if (response.data.code === 412) { if (response.data.code === 412) {
ElMessage.error(response.data.message); ElMessage.error(response.data.message);
removeToken()
router.push('/login')
return Promise.reject(response); return Promise.reject(response);
} }
return response.data; return response.data;

@ -157,7 +157,7 @@ import { useRouter } from 'vue-router';
// 退 // 退
const router = useRouter() const router = useRouter()
const resetAnswers = () => { const resetAnswers = () => {
router.push('/spacePage') router.push('/studyPage')
}; };
// //
const timer = ref<number | null>(null); // setInterval const timer = ref<number | null>(null); // setInterval

Loading…
Cancel
Save