add account && add auto reflash
This commit is contained in:
parent
937ac40576
commit
0cd4893625
3
Dockerfile
Normal file
3
Dockerfile
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
FROM nginx
|
||||||
|
COPY dist/ /usr/share/nginx/html/
|
||||||
|
COPY nginx/default.conf /etc/nginx/conf.d/default.conf
|
||||||
17
nginx/default.conf
Normal file
17
nginx/default.conf
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name localhost;
|
||||||
|
|
||||||
|
access_log /var/log/nginx/host.access.log main;
|
||||||
|
error_log /var/log/nginx/error.log error;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html index.htm;
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
error_page 500 502 503 504 /50x.html;
|
||||||
|
location = /50x.html {
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "coc",
|
"name": "cherry",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@ -12,6 +12,7 @@
|
|||||||
"axios": "^0.19.1",
|
"axios": "^0.19.1",
|
||||||
"babel-polyfill": "^6.26.0",
|
"babel-polyfill": "^6.26.0",
|
||||||
"core-js": "^3.4.4",
|
"core-js": "^3.4.4",
|
||||||
|
"crc-32": "^1.2.0",
|
||||||
"crypto-js": "^4.0.0",
|
"crypto-js": "^4.0.0",
|
||||||
"element-ui": "^2.13.0",
|
"element-ui": "^2.13.0",
|
||||||
"es6-promise": "^4.2.8",
|
"es6-promise": "^4.2.8",
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Co-Create</title>
|
<title>Cherry</title>
|
||||||
<meta name="description" content="Co-Create!为长理同学提供课表,成绩代理查询服务" />
|
<meta name="description" content="Cherry!为长理同学提供课表,成绩代理查询服务" />
|
||||||
<meta name="keywords" content="Co-Create,coc,长春理工大学,长理,coc app,教务系统,查课表,查成绩" />
|
<meta name="keywords" content="Cherry,长春理工大学,长理app,教务系统,查课表,查成绩" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
@ -13,7 +13,7 @@
|
|||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>favicon.ico">
|
<link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>favicon.ico">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<meta itemprop="name" content="Co-Create" />
|
<meta itemprop="name" content="Cherry" />
|
||||||
<!-- 描述 -->
|
<!-- 描述 -->
|
||||||
<meta itemprop="description" content="为长理同学提供课表代理查询服务" />
|
<meta itemprop="description" content="为长理同学提供课表代理查询服务" />
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,8 @@ import axios from 'axios'
|
|||||||
|
|
||||||
export const api = axios.create({
|
export const api = axios.create({
|
||||||
// baseURL: 'https://beta.powerrain.cn/api/',
|
// baseURL: 'https://beta.powerrain.cn/api/',
|
||||||
// baseURL: 'https://coc.powerrain.cn/api/',
|
baseURL: 'https://coc.powerrain.cn/api/',
|
||||||
baseURL: window.location.origin + '/api/',
|
// baseURL: window.location.origin + '/api/',
|
||||||
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
||||||
//baseURL: 'http://127.0.0.1:5000/api',
|
//baseURL: 'http://127.0.0.1:5000/api',
|
||||||
headers: {
|
headers: {
|
||||||
|
|||||||
@ -21,7 +21,7 @@
|
|||||||
<p>课表小游戏</p>
|
<p>课表小游戏</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="list-item"
|
<div class="list-item"
|
||||||
v-clipboard:copy="'https://ccb.canary.moe'"
|
v-clipboard:copy="'https://canary.lacus.site'"
|
||||||
v-clipboard:success="onCopyUrl"
|
v-clipboard:success="onCopyUrl"
|
||||||
v-clipboard:error="onErrorUrl">
|
v-clipboard:error="onErrorUrl">
|
||||||
<icon class="game" name="canary"></icon>
|
<icon class="game" name="canary"></icon>
|
||||||
@ -325,17 +325,4 @@ export default {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
/*
|
|
||||||
这个页面需要进行absolute处理
|
|
||||||
整体用left：width进行隐藏
|
|
||||||
drawer为最高显示级别，分配z-index：200~250
|
|
||||||
将挂载在app上，任何页面都能打开
|
|
||||||
* 账户页面
|
|
||||||
* 账号密码 自动保存
|
|
||||||
* 头像 默认 logo
|
|
||||||
* 昵称 默认 小樱桃001
|
|
||||||
* 隐藏周末
|
|
||||||
课表小游戏
|
|
||||||
退出登录
|
|
||||||
*/
|
|
||||||
@ -9,10 +9,10 @@
|
|||||||
<i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
|
<i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
|
||||||
<p :class="current_page == 'grade'? 'select' : ''">成绩</p>
|
<p :class="current_page == 'grade'? 'select' : ''">成绩</p>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="content" @click="goToAddress('/laf')">
|
<div class="content" @click="goToAddress('/myaccount')">
|
||||||
<i :class="current_page == 'laf'? 'select' : ''" class="el-icon-s-flag"></i>
|
<i :class="current_page == 'myaccount'? 'select' : ''" class="el-icon-s-custom"></i>
|
||||||
<p :class="current_page == 'laf'? 'select' : ''">失物招领</p>
|
<p :class="current_page == 'myaccount'? 'select' : ''">我的</p>
|
||||||
</div> -->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
@ -92,8 +92,8 @@ footer .content:nth-of-type(2) .select {
|
|||||||
// color: $footer-laf-color;
|
// color: $footer-laf-color;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// footer .content:last-of-type .select {
|
footer .content:last-of-type .select {
|
||||||
// color: $footer-mine-color;
|
color: $footer-mine-color;
|
||||||
// /* color: #efe02d; */
|
/* color: #efe02d; */
|
||||||
// }
|
}
|
||||||
</style>
|
</style>
|
||||||
48
src/lib/aes.js
Normal file
48
src/lib/aes.js
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import CryptoJS from 'crypto-js'
|
||||||
|
import CRC32 from 'crc-32'
|
||||||
|
|
||||||
|
// aes加密
|
||||||
|
export function encrypt(code, json_row) {
|
||||||
|
// 循环冗余校验
|
||||||
|
let aesKey = CRC32.str(code)
|
||||||
|
// 取八位
|
||||||
|
aesKey = aesKey.toString().slice(0,8)
|
||||||
|
// 字符串化
|
||||||
|
let json_str = JSON.stringify(json_row)
|
||||||
|
// 加密
|
||||||
|
return CryptoJS.AES.encrypt(json_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// aes解密
|
||||||
|
export function decrypt(code, encrypt_str) {
|
||||||
|
// 循环冗余校验
|
||||||
|
let aesKey = CRC32.str(code)
|
||||||
|
// 取八位
|
||||||
|
aesKey = aesKey.toString().slice(0,8)
|
||||||
|
// 解密
|
||||||
|
return CryptoJS.AES.decrypt(encrypt_str, CryptoJS.enc.Utf8.parse(aesKey), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString(CryptoJS.enc.Utf8);
|
||||||
|
}
|
||||||
|
|
||||||
|
// aes加密用户密码
|
||||||
|
export function encryptMainCode(code) {
|
||||||
|
let default_key = 'e08b44a351a3'
|
||||||
|
return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// aes解密用户密码
|
||||||
|
export function decryptMainCode(row_code) {
|
||||||
|
let default_key = 'e08b44a351a3'
|
||||||
|
return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString(CryptoJS.enc.Utf8);
|
||||||
|
}
|
||||||
@ -34,38 +34,6 @@ const routes = [
|
|||||||
meta:{
|
meta:{
|
||||||
keepAlive:true
|
keepAlive:true
|
||||||
},
|
},
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/laf',
|
|
||||||
name: 'LAF',
|
|
||||||
component: () => import(/* webpackChunkName: "laf" */ '../views/lostandfound/LostAndFound.vue'),
|
|
||||||
meta:{
|
|
||||||
keepAlive:true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/lafdetail',
|
|
||||||
name: 'LAFDetail',
|
|
||||||
component: () => import(/* webpackChunkName: "lafdetail" */ '../views/lostandfound/LAFDetail.vue'),
|
|
||||||
meta:{
|
|
||||||
keepAlive:false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/lafadd',
|
|
||||||
name: 'LAFAdd',
|
|
||||||
component: () => import(/* webpackChunkName: "lafadd" */ '../views/lostandfound/LAFAdd.vue'),
|
|
||||||
meta:{
|
|
||||||
keepAlive:false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/lafsearch',
|
|
||||||
name: 'LAFSearch',
|
|
||||||
component: () => import(/* webpackChunkName: "lafsearch" */ '../views/lostandfound/LAFSearch.vue'),
|
|
||||||
meta:{
|
|
||||||
keepAlive:true
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/game',
|
path: '/game',
|
||||||
@ -75,6 +43,14 @@ const routes = [
|
|||||||
keepAlive:false
|
keepAlive:false
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/myaccount',
|
||||||
|
name: 'MyAccount',
|
||||||
|
component: () => import(/* webpackChunkName: "account" */ '../views/MyAccount/MyAccount.vue'),
|
||||||
|
meta:{
|
||||||
|
keepAlive:false
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '*', // 页面不存在的情况下会跳到schedule
|
path: '*', // 页面不存在的情况下会跳到schedule
|
||||||
redirect: '/schedule',
|
redirect: '/schedule',
|
||||||
|
|||||||
@ -11,10 +11,6 @@ export default new Vuex.Store({
|
|||||||
grade: null,
|
grade: null,
|
||||||
// 课表
|
// 课表
|
||||||
schedule: null,
|
schedule: null,
|
||||||
// LAF
|
|
||||||
LAF_data: null,
|
|
||||||
// 失物招领首页刷新
|
|
||||||
LAF_reflash: false,
|
|
||||||
// 当前页面
|
// 当前页面
|
||||||
current_page: null,
|
current_page: null,
|
||||||
// 游戏
|
// 游戏
|
||||||
@ -38,14 +34,6 @@ export default new Vuex.Store({
|
|||||||
// 设置课表
|
// 设置课表
|
||||||
SET_SCHEDULE(state, schedule){
|
SET_SCHEDULE(state, schedule){
|
||||||
state.schedule = schedule;
|
state.schedule = schedule;
|
||||||
},
|
|
||||||
// 设置LAF
|
|
||||||
SET_LAFDATA(state, LAF_data) {
|
|
||||||
state.LAF_data = LAF_data;
|
|
||||||
},
|
|
||||||
// 设置失物招领首页刷新
|
|
||||||
SET_LAFREFLASH(state, LAF_reflash) {
|
|
||||||
state.LAF_reflash = LAF_reflash;
|
|
||||||
},
|
},
|
||||||
// 设置游戏
|
// 设置游戏
|
||||||
SET_SCHEDULE_GAME(state, schedule_game) {
|
SET_SCHEDULE_GAME(state, schedule_game) {
|
||||||
@ -76,16 +64,6 @@ export default new Vuex.Store({
|
|||||||
setSchedule({ commit }, arg){
|
setSchedule({ commit }, arg){
|
||||||
commit('SET_SCHEDULE', arg[0]);
|
commit('SET_SCHEDULE', arg[0]);
|
||||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||||
},
|
|
||||||
// 设置失物信息
|
|
||||||
setLAFData({ commit }, arg) {
|
|
||||||
commit('SET_LAFDATA', arg[0]);
|
|
||||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
|
||||||
},
|
|
||||||
// 设置失物招领首页刷新
|
|
||||||
setLAFReflash({ commit }, arg) {
|
|
||||||
commit('SET_LAFREFLASH', arg[0]);
|
|
||||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
|
||||||
},
|
},
|
||||||
// 设置游戏
|
// 设置游戏
|
||||||
setScheduleGame({ commit }, arg) {
|
setScheduleGame({ commit }, arg) {
|
||||||
|
|||||||
@ -68,10 +68,10 @@
|
|||||||
总绩点：
|
总绩点：
|
||||||
<span>{{total.total_GPA.toPrecision(4)}}</span>
|
<span>{{total.total_GPA.toPrecision(4)}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
去选修绩点：
|
去选修绩点：
|
||||||
<span>{{total.total_bixiu_GPA.toPrecision(4)}}</span>
|
<span>{{total.total_bixiu_GPA.toPrecision(4)}}</span>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
总学分：
|
总学分：
|
||||||
<span>{{total.total_credit}}</span>
|
<span>{{total.total_credit}}</span>
|
||||||
@ -94,7 +94,10 @@
|
|||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
import FooterSpace from "@/components/FooterSpace.vue";
|
||||||
import GradeCard from "./components/GradeCard.vue";
|
import GradeCard from "./components/GradeCard.vue";
|
||||||
import { mapState, mapActions } from "vuex";
|
import { mapState, mapActions } from "vuex";
|
||||||
import { getGradeInitData } from '@/lib/utils.js'
|
import { getGradeInitData } from "@/lib/utils.js";
|
||||||
|
import { decryptMainCode } from "@/lib/aes.js";
|
||||||
|
import { Loading } from "element-ui";
|
||||||
|
import { login } from "@/axios/api.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "grade",
|
name: "grade",
|
||||||
@ -108,35 +111,48 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["grade", "user_info"])
|
...mapState(["grade", "user_info", "schedule"])
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["setCurrentPage", 'setGrade']),
|
...mapActions(["setUserInfo", "setGrade", "setSchedule", "setCurrentPage"]),
|
||||||
// 初始化
|
// 初始化
|
||||||
init(lock = false) {
|
init(lock = false) {
|
||||||
// 刷新本页vuex
|
// 刷新本页vuex
|
||||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
this.$store.replaceState(
|
||||||
|
Object.assign(
|
||||||
|
this.$store.state,
|
||||||
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
|
)
|
||||||
|
);
|
||||||
// 互斥锁加锁
|
// 互斥锁加锁
|
||||||
if(this.init_lock) return
|
if (this.init_lock) return;
|
||||||
console.log('刷新成绩信息')
|
console.log("刷新成绩信息");
|
||||||
this.init_lock = lock
|
this.init_lock = lock;
|
||||||
// 设置footerNav
|
// 设置footerNav
|
||||||
this.setCurrentPage(["grade", this]);
|
this.setCurrentPage(["grade", this]);
|
||||||
// 处理第一次进来没有初始信息的情况
|
// 处理第一次进来没有初始信息的情况
|
||||||
if(!this.grade || Object.keys(this.grade) == 0 || !this.grade.data.total.total_bixiu_GPA || this.grade.data.total.total_bixiu_GPA == '∞') {
|
if (
|
||||||
console.log('重置信息')
|
!this.grade ||
|
||||||
this.setGrade([getGradeInitData(), this])
|
Object.keys(this.grade) == 0 ||
|
||||||
}
|
!this.grade.data.total.total_bixiu_GPA ||
|
||||||
|
this.grade.data.total.total_bixiu_GPA == "∞"
|
||||||
|
) {
|
||||||
|
console.log("重置信息");
|
||||||
|
this.setGrade([getGradeInitData(), this]);
|
||||||
|
}
|
||||||
//将grade的信息存到简单的变量里，由于不涉及更改，所以不需要深拷贝
|
//将grade的信息存到简单的变量里，由于不涉及更改，所以不需要深拷贝
|
||||||
this.split = this.grade.data.split
|
this.split = this.grade.data.split;
|
||||||
this.total = this.grade.data.total
|
this.total = this.grade.data.total;
|
||||||
// 互斥锁解锁
|
// 互斥锁解锁
|
||||||
setTimeout(function(){
|
setTimeout(
|
||||||
this.init_lock = false
|
function() {
|
||||||
}.bind(this), 100)
|
this.init_lock = false;
|
||||||
|
}.bind(this),
|
||||||
|
100
|
||||||
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
// 改变周数
|
// 改变周数
|
||||||
changeWeek(direction, judge) {
|
changeWeek(direction, judge) {
|
||||||
// 拦截器
|
// 拦截器
|
||||||
if (!judge) return;
|
if (!judge) return;
|
||||||
@ -144,9 +160,77 @@ export default {
|
|||||||
if (direction == "left") this.current_term_index++;
|
if (direction == "left") this.current_term_index++;
|
||||||
else this.current_term_index--;
|
else this.current_term_index--;
|
||||||
},
|
},
|
||||||
// 更新信息
|
// 更新信息
|
||||||
reflash() {
|
reflash() {
|
||||||
this.$router.push("/login");
|
// 未登录拦截
|
||||||
|
if (!this.user_info || !this.user_info.pwd) {
|
||||||
|
this.$router.push("/login");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let load = Loading.service({
|
||||||
|
background: "rgba(255,245,236,.7)",
|
||||||
|
target: document.querySelector(".grade")
|
||||||
|
});
|
||||||
|
let cid = this.user_info.cid;
|
||||||
|
let pwd = decryptMainCode(this.user_info.pwd);
|
||||||
|
let data = {
|
||||||
|
cid,
|
||||||
|
pwd
|
||||||
|
};
|
||||||
|
login(data)
|
||||||
|
.then(res => {
|
||||||
|
this.manageRes(res.data, load);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
load.close();
|
||||||
|
if (
|
||||||
|
error.code === "ECONNABORTED" &&
|
||||||
|
error.message.indexOf("timeout") !== -1
|
||||||
|
) {
|
||||||
|
// 超时
|
||||||
|
this.$message.error("教务挂了");
|
||||||
|
} else {
|
||||||
|
// 服务器挂了
|
||||||
|
this.$message.error("服务器挂了");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理服务器返回的数据
|
||||||
|
manageRes(data, load) {
|
||||||
|
if (data.errcode == 200) {
|
||||||
|
// 登录成功
|
||||||
|
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
||||||
|
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
||||||
|
let grade =
|
||||||
|
data.grade.errcode == 200
|
||||||
|
? data.grade
|
||||||
|
: this.grade
|
||||||
|
? this.grade
|
||||||
|
: getGradeInitData();
|
||||||
|
let schedule =
|
||||||
|
data.schedule.errcode == 200
|
||||||
|
? data.schedule
|
||||||
|
: this.schedule
|
||||||
|
? this.schedule
|
||||||
|
: {};
|
||||||
|
// 设置localStorage
|
||||||
|
this.setGrade([grade, this]);
|
||||||
|
this.setSchedule([schedule, this]);
|
||||||
|
// 用户侧处理
|
||||||
|
this.split = this.grade.data.split;
|
||||||
|
this.total = this.grade.data.total;
|
||||||
|
load.close();
|
||||||
|
this.$message({
|
||||||
|
message: "信息刷新成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 教务挂了
|
||||||
|
load.close();
|
||||||
|
this.$message.error("教务挂了");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|||||||
@ -43,6 +43,7 @@ import { login } from '@/axios/api.js';
|
|||||||
import { Loading } from 'element-ui';
|
import { Loading } from 'element-ui';
|
||||||
import FooterSpace from '@/components/FooterSpace.vue';
|
import FooterSpace from '@/components/FooterSpace.vue';
|
||||||
import { getGradeInitData } from '@/lib/utils.js'
|
import { getGradeInitData } from '@/lib/utils.js'
|
||||||
|
import { encryptMainCode } from '@/lib/aes.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'login',
|
name: 'login',
|
||||||
@ -67,12 +68,6 @@ export default {
|
|||||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||||
// 设置footerNav
|
// 设置footerNav
|
||||||
this.setCurrentPage(["None", this]);
|
this.setCurrentPage(["None", this]);
|
||||||
// 只对已经获取到信息的用户显示
|
|
||||||
if (this.grade || this.schedule) {
|
|
||||||
this.$alert('如从教务获取信息失败，将保留原先数据', '提示', {
|
|
||||||
confirmButtonText: '阅！'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 用户点击rushB
|
// 用户点击rushB
|
||||||
@ -121,7 +116,8 @@ export default {
|
|||||||
login_time: new Date().getTime(),
|
login_time: new Date().getTime(),
|
||||||
id: data.student_id,
|
id: data.student_id,
|
||||||
name: data.student_name,
|
name: data.student_name,
|
||||||
cid: this.cid
|
cid: this.cid,
|
||||||
|
pwd: encryptMainCode(this.pwd)
|
||||||
};
|
};
|
||||||
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
||||||
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="myaccount">
|
<div class="myaccount">
|
||||||
<header>
|
<header>
|
||||||
<img src="../assets/logo_nobg.png" alt="logo" />
|
<img src="../../assets/logo_nobg.png" alt="logo" />
|
||||||
<p>
|
<p>
|
||||||
Co-Create
|
Co-Create
|
||||||
<span>v1.0</span>
|
<span>v1.0</span>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
<!-- <img src="../assets/wave.gif" mode="scaleToFill" class="gif-wave"/> -->
|
<!-- <img src="../assets/wave.gif" mode="scaleToFill" class="gif-wave"/> -->
|
||||||
<!-- <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
|
<!-- <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
|
||||||
</header>
|
</header>
|
||||||
<div class="user-box shadow-warp">
|
<div class="user-box shadow-warp" v-if="user_info">
|
||||||
<div class="cid-box">
|
<div class="cid-box">
|
||||||
<div class="cid">{{user_info.id}}</div>
|
<div class="cid">{{user_info.id}}</div>
|
||||||
<div class="label">
|
<div class="label">
|
||||||
@ -25,10 +25,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="logout" @click="logout()">消除数据</div>
|
<div class="logout" @click="logout()" v-if="user_info">退出登录</div>
|
||||||
<div class="qq">
|
<div class="logout" @click="goTo('/login')" v-else>立即登录</div>
|
||||||
使用安卓的同学请注意！！！！！！不要用安装包！那不是官方的正式版本！！我们极力推荐使用浏览器将网页保存到桌面的方法,请转告身边的同学,拜托了！！！(不会保存网页可以来群里问我哈)
|
|
||||||
</div>
|
|
||||||
<div class="qq">
|
<div class="qq">
|
||||||
反馈及获取最新功能=>
|
反馈及获取最新功能=>
|
||||||
<span @click="openQQ()">1030523678</span>
|
<span @click="openQQ()">1030523678</span>
|
||||||
@ -38,7 +36,7 @@
|
|||||||
v-clipboard:success="onCopyUrl"
|
v-clipboard:success="onCopyUrl"
|
||||||
v-clipboard:error="onErrorUrl">
|
v-clipboard:error="onErrorUrl">
|
||||||
coc主站地址=>
|
coc主站地址=>
|
||||||
<span>coc.powerrain.cn</span>
|
<span>cherry.lacus.site</span>
|
||||||
</div>
|
</div>
|
||||||
<FooterSpace></FooterSpace>
|
<FooterSpace></FooterSpace>
|
||||||
</div>
|
</div>
|
||||||
@ -55,11 +53,11 @@ export default {
|
|||||||
name: "myaccount",
|
name: "myaccount",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
web_addr: 'https://coc.powerrain.cn'
|
web_addr: 'https://cherry.lacus.site'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["user_info", "current_week", "current_schedule"])
|
...mapState(["user_info"])
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions([
|
...mapActions([
|
||||||
@ -68,6 +66,11 @@ export default {
|
|||||||
"setSchedule",
|
"setSchedule",
|
||||||
"setUserInfo"
|
"setUserInfo"
|
||||||
]),
|
]),
|
||||||
|
init() {
|
||||||
|
// 刷新本页vuex
|
||||||
|
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||||
|
this.setCurrentPage(["myaccount", this]);
|
||||||
|
},
|
||||||
// 登出
|
// 登出
|
||||||
logout() {
|
logout() {
|
||||||
this.setUserInfo([null, this]);
|
this.setUserInfo([null, this]);
|
||||||
@ -96,10 +99,10 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
mounted(){
|
mounted(){
|
||||||
this.setCurrentPage(["myaccount", this]);
|
this.init()
|
||||||
},
|
},
|
||||||
activated (){
|
activated (){
|
||||||
this.setCurrentPage(["myaccount", this]);
|
this.init()
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
FooterSpace
|
FooterSpace
|
||||||
@ -108,7 +111,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
<style scoped lang="scss" type="text/scss">
|
||||||
@import "../style/main";
|
@import "../../style/main";
|
||||||
.myaccount {
|
.myaccount {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
@ -118,7 +121,7 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
header {
|
header {
|
||||||
background-image: url(../assets/mine_bg.jpg);
|
background-image: url(../../assets/mine_bg.jpg);
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
height: 7rem;
|
height: 7rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,111 +1,153 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="schedule">
|
<div class="schedule">
|
||||||
<header>
|
<header>
|
||||||
<div class="w">
|
<div class="w">
|
||||||
<i class="el-icon-s-operation more" @click="openDrawer()"></i>
|
<i class="el-icon-s-operation more" @click="openDrawer()"></i>
|
||||||
<div class="left-box" @click="changeWeek('left')">
|
<div class="left-box" @click="changeWeek('left')">
|
||||||
<i class="el-icon-arrow-left icon" v-show="show_week!==1"></i>
|
<i class="el-icon-arrow-left icon" v-show="show_week!==1"></i>
|
||||||
</div>
|
|
||||||
<div class="week-box">第{{show_week}}周</div>
|
|
||||||
<div class="right-box" @click="changeWeek('right')">
|
|
||||||
<i class="el-icon-arrow-right icon" v-show="show_week!==max_week"></i>
|
|
||||||
</div>
|
|
||||||
<i class="el-icon-refresh refresh" @click="reflash"></i>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
<div class="week-box">第{{show_week}}周</div>
|
||||||
<div style="height: 1.2rem;"></div>
|
<div class="right-box" @click="changeWeek('right')">
|
||||||
<body>
|
<i class="el-icon-arrow-right icon" v-show="show_week!==max_week"></i>
|
||||||
<nav>
|
</div>
|
||||||
<div class="week-title" v-for="i in hide_weekend? 5:7" :class="highlightWeek == i%7? 'highlight':''" :key="i">
|
<i class="el-icon-refresh refresh" @click="reflash"></i>
|
||||||
<p>{{week_day[i-1]}}</p>
|
</div>
|
||||||
<p>{{date_arr[i-1]}}</p>
|
</header>
|
||||||
</div>
|
<div style="height: 1.2rem;"></div>
|
||||||
</nav>
|
<body>
|
||||||
<div class="main">
|
<nav>
|
||||||
<v-touch @swiperight="openDrawer()">
|
<div
|
||||||
<aside>
|
class="week-title"
|
||||||
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
|
v-for="i in hide_weekend? 5:7"
|
||||||
</aside>
|
:class="highlightWeek == i%7? 'highlight':''"
|
||||||
</v-touch>
|
:key="i"
|
||||||
<v-touch class="lesson-warp" :swipe-options="{direction: 'horizontal'}" @swipeleft="swipeRight" @swiperight="swipeLeft">
|
>
|
||||||
<div class="lesson-warp">
|
<p>{{week_day[i-1]}}</p>
|
||||||
<div class="day-box" v-for="d in hide_weekend ? 5:7" :key="d">
|
<p>{{date_arr[i-1]}}</p>
|
||||||
<div class="lesson-box" v-for="i in 6" :key="i">
|
</div>
|
||||||
<template v-if="schedule && schedule.errcode === 200 && schedule.data.lesson[d-1][i-1] !== 0">
|
</nav>
|
||||||
<template v-for="item in schedule.data.lesson[d-1][i-1]">
|
<div class="main">
|
||||||
<template v-if="item.Time_split[show_week]">
|
<v-touch @swiperight="openDrawer()">
|
||||||
<div class="lesson" :style="lessonStyle(item)" @click="openDialog(item)">
|
<aside>
|
||||||
<p class="info">{{item.Lesson}}<br/>{{item.Room.replace(/\[.+\]/, "")}}</p>
|
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
|
||||||
</div>
|
</aside>
|
||||||
</template>
|
</v-touch>
|
||||||
|
<v-touch
|
||||||
|
class="lesson-warp"
|
||||||
|
:swipe-options="{direction: 'horizontal'}"
|
||||||
|
@swipeleft="swipeRight"
|
||||||
|
@swiperight="swipeLeft"
|
||||||
|
>
|
||||||
|
<div class="lesson-warp">
|
||||||
|
<div class="day-box" v-for="d in hide_weekend ? 5:7" :key="d">
|
||||||
|
<div class="lesson-box" v-for="i in 6" :key="i">
|
||||||
|
<template
|
||||||
|
v-if="schedule && schedule.errcode === 200 && schedule.data.lesson[d-1][i-1] !== 0"
|
||||||
|
>
|
||||||
|
<template v-for="item in schedule.data.lesson[d-1][i-1]">
|
||||||
|
<template v-if="item.Time_split[show_week]">
|
||||||
|
<div class="lesson" :style="lessonStyle(item)" @click="openDialog(item)">
|
||||||
|
<p class="info">
|
||||||
|
{{item.Lesson}}
|
||||||
|
<br />
|
||||||
|
{{item.Room.replace(/\[.+\]/, "")}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</v-touch>
|
</div>
|
||||||
</div>
|
</v-touch>
|
||||||
<!-- 课表点击弹窗 -->
|
</div>
|
||||||
<div class="dialog" v-show="detail" @touchmove.prevent>
|
<!-- 课表点击弹窗 -->
|
||||||
<div class="w">
|
<div class="dialog" v-show="detail" @touchmove.prevent>
|
||||||
<div class="title">
|
<div class="w">
|
||||||
详情
|
<div class="title">
|
||||||
<div class="icon-box" @click="closeDialog()">
|
详情
|
||||||
<i class="el-icon-close icon"></i>
|
<div class="icon-box" @click="closeDialog()">
|
||||||
</div>
|
<i class="el-icon-close icon"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="dialog-main">
|
</div>
|
||||||
<p>
|
<div class="dialog-main">
|
||||||
课程名：
|
<p>
|
||||||
<span>{{detail.Lesson}}</span>
|
课程名：
|
||||||
</p>
|
<span>{{detail.Lesson}}</span>
|
||||||
<p>
|
</p>
|
||||||
周数：
|
<p>
|
||||||
<span>{{detail.Time}}</span>
|
周数：
|
||||||
</p>
|
<span>{{detail.Time}}</span>
|
||||||
<p>
|
</p>
|
||||||
上课地点：
|
<p>
|
||||||
<span>{{detail.Room}}</span>
|
上课地点：
|
||||||
</p>
|
<span>{{detail.Room}}</span>
|
||||||
<p>
|
</p>
|
||||||
任课教师：
|
<p>
|
||||||
<span>{{detail.Teacher}}</span>
|
任课教师：
|
||||||
</p>
|
<span>{{detail.Teacher}}</span>
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</div>
|
||||||
<FooterSpace></FooterSpace>
|
</body>
|
||||||
</div>
|
<FooterSpace></FooterSpace>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
import FooterSpace from "@/components/FooterSpace.vue";
|
||||||
import { mapState, mapActions } from "vuex";
|
import { mapState, mapActions } from "vuex";
|
||||||
import { gameUpload } from '@/axios/api.js'
|
import { gameUpload } from "@/axios/api.js";
|
||||||
|
import { getGradeInitData } from "@/lib/utils.js";
|
||||||
|
import { decryptMainCode } from "@/lib/aes.js";
|
||||||
|
import { Loading } from "element-ui";
|
||||||
|
import { login } from "@/axios/api.js";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "schedule",
|
name: "schedule",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
// 本周实际周数
|
// 本周实际周数
|
||||||
current_week: 1,
|
current_week: 1,
|
||||||
// 当前显示周数
|
// 当前显示周数
|
||||||
show_week: 1,
|
show_week: 1,
|
||||||
// 最大周数
|
// 最大周数
|
||||||
max_week: 22,
|
max_week: 22,
|
||||||
// 课程详情兼dialog开关
|
// 课程详情兼dialog开关
|
||||||
detail: false,
|
detail: false,
|
||||||
// 隐藏周末
|
// 隐藏周末
|
||||||
hide_weekend: false,
|
hide_weekend: false,
|
||||||
// 遍历星期数组
|
// 遍历星期数组
|
||||||
week_day: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
week_day: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||||
// 课程背景颜色
|
// 课程背景颜色
|
||||||
bg_color: ["e4f5ff", "defbf7", "e7e5fa", "fcebcf", "feeeef", "d7f0db", "ebd4ef", "f9d7ea", "ede1d9", '48f350'],
|
bg_color: [
|
||||||
// 课程文字颜色
|
"e4f5ff",
|
||||||
font_color: ["58a2d9", "2bbbbc", "8379d8", "e89812", "d36e88", "39b54a", "9c26b0", "e03997", "a5673f", '48f350'],
|
"defbf7",
|
||||||
// 初始化互斥锁
|
"e7e5fa",
|
||||||
|
"fcebcf",
|
||||||
|
"feeeef",
|
||||||
|
"d7f0db",
|
||||||
|
"ebd4ef",
|
||||||
|
"f9d7ea",
|
||||||
|
"ede1d9",
|
||||||
|
"48f350"
|
||||||
|
],
|
||||||
|
// 课程文字颜色
|
||||||
|
font_color: [
|
||||||
|
"58a2d9",
|
||||||
|
"2bbbbc",
|
||||||
|
"8379d8",
|
||||||
|
"e89812",
|
||||||
|
"d36e88",
|
||||||
|
"39b54a",
|
||||||
|
"9c26b0",
|
||||||
|
"e03997",
|
||||||
|
"a5673f",
|
||||||
|
"48f350"
|
||||||
|
],
|
||||||
|
// 初始化互斥锁
|
||||||
init_lock: false,
|
init_lock: false,
|
||||||
// 本周日期列表
|
// 本周日期列表
|
||||||
date_arr: []
|
date_arr: []
|
||||||
@ -113,7 +155,7 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["user_info", "current_page", "schedule"]),
|
...mapState(["user_info", "current_page", "schedule"]),
|
||||||
// 高亮本日星期
|
// 高亮本日星期
|
||||||
highlightWeek: function() {
|
highlightWeek: function() {
|
||||||
if (this.show_week == this.current_week) {
|
if (this.show_week == this.current_week) {
|
||||||
// 是当前周
|
// 是当前周
|
||||||
@ -121,35 +163,49 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
return -1;
|
return -1;
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["setCurrentPage", "setDrawerState"]),
|
...mapActions([
|
||||||
|
"setUserInfo",
|
||||||
|
"setGrade",
|
||||||
|
"setSchedule",
|
||||||
|
"setCurrentPage",
|
||||||
|
"setDrawerState"
|
||||||
|
]),
|
||||||
|
|
||||||
// 初始化课表
|
// 初始化课表
|
||||||
init(lock = false) {
|
init(lock = false) {
|
||||||
// 刷新本页vuex
|
// 刷新本页vuex
|
||||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
this.$store.replaceState(
|
||||||
// 互斥锁加锁
|
Object.assign(
|
||||||
if(this.init_lock) return
|
this.$store.state,
|
||||||
console.log('刷新课表信息')
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
this.init_lock = lock
|
)
|
||||||
// 设置footerNav
|
);
|
||||||
this.setCurrentPage(["schedule", this]);
|
// 互斥锁加锁
|
||||||
// 互斥锁解锁
|
if (this.init_lock) return;
|
||||||
setTimeout(function(){
|
console.log("刷新课表信息");
|
||||||
this.init_lock = false
|
this.init_lock = lock;
|
||||||
}.bind(this), 100)
|
// 设置footerNav
|
||||||
// 无课表信息拦截器
|
this.setCurrentPage(["schedule", this]);
|
||||||
if(!this.schedule) return
|
// 互斥锁解锁
|
||||||
// 判断当前周数
|
setTimeout(
|
||||||
// 可能用户刷新了数据，所以activated还得使用，但是维持keepalive是想维持当前显示的周数
|
function() {
|
||||||
// this.current_week = this.schedule.data.cur_week > 0 ? this.schedule.data.cur_week : 1;
|
this.init_lock = false;
|
||||||
this.getCurrentWeek()
|
}.bind(this),
|
||||||
|
100
|
||||||
|
);
|
||||||
|
// 无课表信息拦截器
|
||||||
|
if (!this.schedule) return;
|
||||||
|
// 判断当前周数
|
||||||
|
// 可能用户刷新了数据，所以activated还得使用，但是维持keepalive是想维持当前显示的周数
|
||||||
|
// this.current_week = this.schedule.data.cur_week > 0 ? this.schedule.data.cur_week : 1;
|
||||||
|
this.getCurrentWeek();
|
||||||
this.show_week = lock ? this.current_week : this.show_week;
|
this.show_week = lock ? this.current_week : this.show_week;
|
||||||
this.getDays()
|
this.getDays();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 改变周数
|
// 改变周数
|
||||||
changeWeek(dirction) {
|
changeWeek(dirction) {
|
||||||
if (dirction == "left")
|
if (dirction == "left")
|
||||||
@ -157,89 +213,156 @@ export default {
|
|||||||
else return;
|
else return;
|
||||||
else if (this.show_week < this.max_week) this.show_week++;
|
else if (this.show_week < this.max_week) this.show_week++;
|
||||||
else return;
|
else return;
|
||||||
this.getDays()
|
this.getDays();
|
||||||
},
|
},
|
||||||
|
|
||||||
// 刷新信息
|
// 打开dialog显示课程详情
|
||||||
reflash() {
|
|
||||||
this.$router.push({ name: "login" });
|
|
||||||
},
|
|
||||||
|
|
||||||
// 打开dialog显示课程详情
|
|
||||||
openDialog(data) {
|
openDialog(data) {
|
||||||
this.detail = data;
|
this.detail = data;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 关闭dialog
|
// 关闭dialog
|
||||||
closeDialog() {
|
closeDialog() {
|
||||||
this.detail = false;
|
this.detail = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
//滑动改变周数
|
//滑动改变周数
|
||||||
swipeLeft(){
|
swipeLeft() {
|
||||||
if (this.show_week > 1)
|
if (this.show_week > 1) this.show_week--;
|
||||||
this.show_week--;
|
this.getDays();
|
||||||
this.getDays()
|
|
||||||
},
|
},
|
||||||
swipeRight(){
|
swipeRight() {
|
||||||
if (this.show_week < this.max_week)
|
if (this.show_week < this.max_week) this.show_week++;
|
||||||
this.show_week++;
|
this.getDays();
|
||||||
this.getDays()
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 课程颜色
|
// 课程颜色
|
||||||
lessonStyle(item) {
|
lessonStyle(item) {
|
||||||
return `background:#${this.bg_color[item.color]};color:#${this.font_color[item.color]}`
|
return `background:#${this.bg_color[item.color]};color:#${
|
||||||
|
this.font_color[item.color]
|
||||||
|
}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 跳转到游戏
|
// 跳转到游戏
|
||||||
goToGame() {
|
goToGame() {
|
||||||
this.$router.push('/game')
|
this.$router.push("/game");
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取当前周
|
// 获取当前周
|
||||||
getCurrentWeek() {
|
getCurrentWeek() {
|
||||||
// let start = new Date("2020-02-24 00:00").getTime();
|
// let start = new Date("2020-02-24 00:00").getTime();
|
||||||
let start = 1582473600000
|
let start = 1582473600000;
|
||||||
let now = new Date().getTime();
|
let now = new Date().getTime();
|
||||||
//计算出两个日期的天数差
|
//计算出两个日期的天数差
|
||||||
let days = Math.abs(Math.floor((now - start) / (1000 * 60 * 60 * 24)));
|
let days = Math.abs(Math.floor((now - start) / (1000 * 60 * 60 * 24)));
|
||||||
let current_week;
|
let current_week;
|
||||||
if (start >= now) {
|
if (start >= now) {
|
||||||
// 没开学
|
// 没开学
|
||||||
this.current_week = 1;
|
this.current_week = 1;
|
||||||
} else {
|
} else {
|
||||||
// 开学后
|
// 开学后
|
||||||
this.current_week = Math.floor(days / 7) + 1;
|
this.current_week = Math.floor(days / 7) + 1;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取本周日期
|
// 获取本周日期
|
||||||
getDays() {
|
getDays() {
|
||||||
const day_time = 1000 * 60 * 60 * 24,
|
const day_time = 1000 * 60 * 60 * 24,
|
||||||
start = 1582473600000;
|
start = 1582473600000;
|
||||||
let week_start_time = (this.show_week - 1) * 7 * day_time + start
|
let week_start_time = (this.show_week - 1) * 7 * day_time + start;
|
||||||
this.date_arr = []
|
this.date_arr = [];
|
||||||
for(let i = 1; i <= 7; i++) {
|
for (let i = 1; i <= 7; i++) {
|
||||||
let current_day = new Date(week_start_time).getDate()
|
let current_day = new Date(week_start_time).getDate();
|
||||||
if( current_day < 10) {
|
if (current_day < 10) {
|
||||||
current_day = '0' + current_day
|
current_day = "0" + current_day;
|
||||||
}
|
}
|
||||||
if (i == 1 || current_day == '01') {
|
if (i == 1 || current_day == "01") {
|
||||||
current_day = (new Date(week_start_time).getMonth() + 1) + '/' + current_day
|
current_day =
|
||||||
|
new Date(week_start_time).getMonth() + 1 + "/" + current_day;
|
||||||
}
|
}
|
||||||
this.date_arr.push(current_day)
|
this.date_arr.push(current_day);
|
||||||
week_start_time += day_time
|
week_start_time += day_time;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 打开抽屉
|
// 打开抽屉
|
||||||
openDrawer() {
|
openDrawer() {
|
||||||
this.setDrawerState([true, this])
|
this.setDrawerState([true, this]);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 更新信息
|
||||||
|
reflash() {
|
||||||
|
// 未登录拦截
|
||||||
|
if (!this.user_info || !this.user_info.pwd) {
|
||||||
|
this.$router.push("/login");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let load = Loading.service({
|
||||||
|
background: "rgba(255,245,236,.7)",
|
||||||
|
target: document.querySelector(".grade")
|
||||||
|
});
|
||||||
|
let cid = this.user_info.cid;
|
||||||
|
let pwd = decryptMainCode(this.user_info.pwd);
|
||||||
|
let data = {
|
||||||
|
cid,
|
||||||
|
pwd
|
||||||
|
};
|
||||||
|
login(data)
|
||||||
|
.then(res => {
|
||||||
|
this.manageRes(res.data, load);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.log(error);
|
||||||
|
load.close();
|
||||||
|
if (
|
||||||
|
error.code === "ECONNABORTED" &&
|
||||||
|
error.message.indexOf("timeout") !== -1
|
||||||
|
) {
|
||||||
|
// 超时
|
||||||
|
this.$message.error("教务挂了");
|
||||||
|
} else {
|
||||||
|
// 服务器挂了
|
||||||
|
this.$message.error("服务器挂了");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理服务器返回的数据
|
||||||
|
manageRes(data, load) {
|
||||||
|
if (data.errcode == 200) {
|
||||||
|
// 登录成功
|
||||||
|
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
||||||
|
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
||||||
|
let grade =
|
||||||
|
data.grade.errcode == 200
|
||||||
|
? data.grade
|
||||||
|
: this.grade
|
||||||
|
? this.grade
|
||||||
|
: getGradeInitData();
|
||||||
|
let schedule =
|
||||||
|
data.schedule.errcode == 200
|
||||||
|
? data.schedule
|
||||||
|
: this.schedule
|
||||||
|
? this.schedule
|
||||||
|
: {};
|
||||||
|
// 设置localStorage
|
||||||
|
this.setGrade([grade, this]);
|
||||||
|
this.setSchedule([schedule, this]);
|
||||||
|
// 用户侧处理
|
||||||
|
load.close();
|
||||||
|
this.$message({
|
||||||
|
message: "信息刷新成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 教务挂了
|
||||||
|
load.close();
|
||||||
|
this.$message.error("教务挂了");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.init(true);
|
this.init(true);
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
activated() {
|
activated() {
|
||||||
@ -341,7 +464,7 @@ export default {
|
|||||||
.lesson-warp {
|
.lesson-warp {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
touch-action: pan-y!important;
|
touch-action: pan-y !important;
|
||||||
// max-width: 94%;
|
// max-width: 94%;
|
||||||
.day-box {
|
.day-box {
|
||||||
width: 14%;
|
width: 14%;
|
||||||
|
|||||||
@ -1,605 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="LAFAdd">
|
|
||||||
<header>
|
|
||||||
<div class="w">
|
|
||||||
<div class="icon-box">
|
|
||||||
<i class="el-icon-back title-icon" @click="back()"></i>
|
|
||||||
</div>
|
|
||||||
<div class="title-box">新建</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div style="height: 1.2rem;"></div>
|
|
||||||
<div class="main">
|
|
||||||
<!-- 物品名 物品描述 | 物品图片 区域 详细地址 联系方式 -->
|
|
||||||
<!-- 主体信息 -->
|
|
||||||
<div class="card">
|
|
||||||
<div class="icon-box">
|
|
||||||
<i class="el-icon-receiving icon"></i>
|
|
||||||
</div>
|
|
||||||
<p>主体信息</p>
|
|
||||||
<input type="text" placeholder="物品名(必填)" v-model="title"/>
|
|
||||||
<textarea placeholder="物品描述或者想说的话(必填)" v-model="content"/>
|
|
||||||
</div>
|
|
||||||
<!-- 链接小竖条 -->
|
|
||||||
<div class="link">
|
|
||||||
<div class="link-item">
|
|
||||||
<div class="link-dote-top"></div>
|
|
||||||
<div class="link-line"></div>
|
|
||||||
<div class="link-dote-bottom"></div>
|
|
||||||
</div>
|
|
||||||
<div class="link-item">
|
|
||||||
<div class="link-dote-top"></div>
|
|
||||||
<div class="link-line"></div>
|
|
||||||
<div class="link-dote-bottom"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 详细信息 -->
|
|
||||||
<div class="card detail-card">
|
|
||||||
<div class="icon-box">
|
|
||||||
<i class="el-icon-search icon"></i>
|
|
||||||
</div>
|
|
||||||
<p>详细信息</p>
|
|
||||||
<div class="label">类型(单选)</div>
|
|
||||||
<div class="type-box">
|
|
||||||
<div class="option" :class="type == 'lost' ? 'select' : ''" @click="changeType('lost')">丢失</div>
|
|
||||||
<div class="option" :class="type == 'found' ? 'select' : ''" @click="changeType('found')">拾到</div>
|
|
||||||
<!-- 占位 -->
|
|
||||||
<div class="option" style="background: #fff; border:none;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="label">区域(单选)</div>
|
|
||||||
<div class="addr-box">
|
|
||||||
<div class="option" :class="total_addr == '长理东区' ? 'select': ''" @click="changeTotalAddr('长理东区')">长理东区</div>
|
|
||||||
<div class="option" :class="total_addr == '长理南区' ? 'select': ''" @click="changeTotalAddr('长理南区')">长理南区</div>
|
|
||||||
<div class="option" :class="total_addr == '长理西区' ? 'select': ''" @click="changeTotalAddr('长理西区')">长理西区</div>
|
|
||||||
</div>
|
|
||||||
<input type="text" placeholder="详细地址(必填)" v-model="detail_addr"/>
|
|
||||||
<div class="label">联系方式(选填)</div>
|
|
||||||
<div class="contact-box">
|
|
||||||
<div class="option" :class="contact_way.type == 'none' ? 'select': ''" @click="changeContactWay('none')">不填</div>
|
|
||||||
<div class="option" :class="contact_way.type == 'QQ' ? 'select': ''" @click="changeContactWay('QQ')">QQ</div>
|
|
||||||
<div class="option" :class="contact_way.type == '微信' ? 'select': ''" @click="changeContactWay('微信')">微信</div>
|
|
||||||
<div class="option" :class="contact_way.type == '电话' ? 'select': ''" @click="changeContactWay('电话')">电话</div>
|
|
||||||
<div class="option" :class="contact_way.type == '邮件' ? 'select': ''" @click="changeContactWay('邮件')">邮件</div>
|
|
||||||
</div>
|
|
||||||
<input type="text" placeholder="联系方式(选填)" v-model="contact_way.content" :disabled="contact_way.type == 'none'"/>
|
|
||||||
<div class="label">图片上传(选填)</div>
|
|
||||||
<div class="img-box">
|
|
||||||
<div class="img-border" @click="uploadTrigger" v-if="!upload_file">
|
|
||||||
<input
|
|
||||||
id="upload_img"
|
|
||||||
type="file"
|
|
||||||
value
|
|
||||||
@change="uploadFile($event)"
|
|
||||||
style="display: none;"
|
|
||||||
/>
|
|
||||||
<icon class="camera" name="camera"></icon>
|
|
||||||
</div>
|
|
||||||
<div class="img-preview" v-show="upload_file">
|
|
||||||
<div class="img-delete" @click="deleteFile()">
|
|
||||||
<icon class="close-white" name="close-white"></icon>
|
|
||||||
</div>
|
|
||||||
<img id="imgPreview" src alt />
|
|
||||||
</div>
|
|
||||||
<div class="tips">
|
|
||||||
<p>图片最大为1M</p>
|
|
||||||
<p>当前：{{upload_file?parseInt(upload_file.size/1024):'0'}}kb</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="submit" @click="openSubmitDialog()">确认上传</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FooterSpace></FooterSpace>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
|
|
||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { addLAF, uploadPhoto } from "@/axios/api.js";
|
|
||||||
import { Loading } from "element-ui";
|
|
||||||
import { loginInterceptor } from "@/lib/utils.js";
|
|
||||||
import "lrz";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "LAFAdd",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
title: '',
|
|
||||||
content: '',
|
|
||||||
total_addr:'',
|
|
||||||
detail_addr:'',
|
|
||||||
contact_way:{
|
|
||||||
type: 'none',
|
|
||||||
content: ''
|
|
||||||
},
|
|
||||||
type:'',
|
|
||||||
upload_file: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState([
|
|
||||||
"user_info",
|
|
||||||
"current_week",
|
|
||||||
"current_schedule",
|
|
||||||
"personalized",
|
|
||||||
"LAF_data"
|
|
||||||
])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions([
|
|
||||||
"setLAFReflash"
|
|
||||||
]),
|
|
||||||
// 初始化
|
|
||||||
init() {
|
|
||||||
},
|
|
||||||
back() {
|
|
||||||
this.$router.go(-1);
|
|
||||||
},
|
|
||||||
//触发上传事件
|
|
||||||
uploadTrigger() {
|
|
||||||
let file = document.getElementById("upload_img");
|
|
||||||
file.click();
|
|
||||||
},
|
|
||||||
//上传文件的处理
|
|
||||||
async uploadFile(e) {
|
|
||||||
let file = e.target.files[0]; //防止用户多选文件，默认上传第一个
|
|
||||||
if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(e.target.value)) {
|
|
||||||
this.$message.error("图片类型必须是.gif,jpeg,jpg,png中的一种");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (file) {
|
|
||||||
file = await lrz(file);
|
|
||||||
file = file.file;
|
|
||||||
let filename = e.target.files[0].name;
|
|
||||||
// filename = filename.length > 5 ? filename.slice(0, 5) : filename;
|
|
||||||
file = new File([file], filename);
|
|
||||||
}
|
|
||||||
if (file.size > 1024 * 1024 * 1) {
|
|
||||||
this.$message.error("图片大小不能超过 1MB!");
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
this.upload_file = file;
|
|
||||||
let img = document.getElementById("imgPreview");
|
|
||||||
img.src = URL.createObjectURL(file);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点击删除图片
|
|
||||||
deleteFile() {
|
|
||||||
this.upload_file = null;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 类型切换
|
|
||||||
changeType(arg){
|
|
||||||
this.type = arg
|
|
||||||
},
|
|
||||||
// 区域切换
|
|
||||||
changeTotalAddr(arg) {
|
|
||||||
this.total_addr = arg
|
|
||||||
},
|
|
||||||
// 联系方式切换
|
|
||||||
changeContactWay(arg){
|
|
||||||
if(arg == 'none') {
|
|
||||||
this.contact_way.content = ''
|
|
||||||
}
|
|
||||||
this.contact_way.type = arg
|
|
||||||
},
|
|
||||||
// 对内容进行校验
|
|
||||||
judge() {
|
|
||||||
if((this.title = this.manageInput(this.title.trim())).length == 0) return '请填写物品名'
|
|
||||||
if((this.content = this.manageInput(this.content.trim())).length == 0) return '请填写物品描述'
|
|
||||||
if((this.detail_addr = this.manageInput(this.detail_addr.trim())).length == 0) return '请填写详细地址'
|
|
||||||
switch(this.contact_way.type) {
|
|
||||||
case 'none':
|
|
||||||
this.contact_way.content = ''
|
|
||||||
break;
|
|
||||||
case 'QQ':
|
|
||||||
if(!/[1-9][0-9]{4,10}/.test(this.contact_way.content)) return '请填写正确的QQ号';
|
|
||||||
break;
|
|
||||||
case '微信':
|
|
||||||
if((this.contact_way.content = this.manageInput(this.contact_way.content.trim())).length == 0) return "请填写正确的微信号";
|
|
||||||
break;
|
|
||||||
case '电话':
|
|
||||||
if(!/^1[3456789]\d{9}$/.test(this.contact_way.content)) return "请填写正确的电话号";
|
|
||||||
break;
|
|
||||||
case '邮件':
|
|
||||||
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.contact_way.content)) return "请填写正确的邮件地址";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if(this.type == '') return '请选择类型'
|
|
||||||
if(this.total_addr == '') return '请选择区域'
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
|
|
||||||
// 特殊字符处理
|
|
||||||
manageInput(value) {
|
|
||||||
// 删除特殊字符串
|
|
||||||
value = value.replace(/\$/g, "");
|
|
||||||
value = value.replace(/\^/g, "");
|
|
||||||
return value;
|
|
||||||
},
|
|
||||||
|
|
||||||
// 点击上传按钮确认用户身份
|
|
||||||
openSubmitDialog(){
|
|
||||||
let judge
|
|
||||||
if(judge = this.judge()) {
|
|
||||||
this.$alert(judge, "警告", {
|
|
||||||
confirmButtonText: "阅！"
|
|
||||||
});
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.$prompt(
|
|
||||||
`您将上传失物招领信息，此操作实名制，请输入你的学号`,
|
|
||||||
"警告",
|
|
||||||
{
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
inputPattern: /\d{7}W?\d{2}/,
|
|
||||||
inputErrorMessage: "请输入正确的学号"
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then(({ value }) => {
|
|
||||||
if(value == this.user_info.id) {
|
|
||||||
// 填入正确
|
|
||||||
this.submit()
|
|
||||||
}else {
|
|
||||||
this.$message.error('输入学号有误请核对');
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.$message({
|
|
||||||
type: "info",
|
|
||||||
message: "取消输入"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
async submit() {
|
|
||||||
let load = Loading.service({
|
|
||||||
background: "rgba(236,245,255,.7)",
|
|
||||||
target: document.querySelector(".LAFAdd")
|
|
||||||
});
|
|
||||||
let file_name = 'no_img.png'
|
|
||||||
let stop = false
|
|
||||||
if(this.upload_file) {
|
|
||||||
await uploadPhoto(this.upload_file).then(res => {
|
|
||||||
if(res.data.errcode !== 200) {
|
|
||||||
this.$message.error("图片上传失败，请重试");
|
|
||||||
console.log(res.data)
|
|
||||||
stop = true
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
file_name = res.data.filename
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
this.$message.error("图片上传失败，请重试");
|
|
||||||
console.log(err);
|
|
||||||
stop = true
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 拦截器
|
|
||||||
if(stop) {
|
|
||||||
load.close();
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let data = {
|
|
||||||
title: this.title,
|
|
||||||
content: this.content,
|
|
||||||
total_addr: this.total_addr,
|
|
||||||
detail_addr: this.detail_addr,
|
|
||||||
contact_way: this.contact_way,
|
|
||||||
type: this.type,
|
|
||||||
img_url: file_name,
|
|
||||||
create_time: new Date().getTime(),
|
|
||||||
user_info: {
|
|
||||||
user_cid: this.user_info.cid,
|
|
||||||
user_name: this.user_info.name,
|
|
||||||
user_id: this.user_info.id
|
|
||||||
},
|
|
||||||
close: 'false'
|
|
||||||
}
|
|
||||||
await addLAF(data).then(res=> {
|
|
||||||
if(res.data.errcode == 200) {
|
|
||||||
load.close()
|
|
||||||
this.$message({
|
|
||||||
message: "提交成功",
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
this.setLAFReflash([true, this])
|
|
||||||
this.back()
|
|
||||||
}
|
|
||||||
}).catch(err => {
|
|
||||||
load.close()
|
|
||||||
this.$message.error("提交失败，请重试");
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 登录态管理
|
|
||||||
// loginInterceptor.call(this,"None",this.init)
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
// 登录态管理
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FooterSpace
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../style/main";
|
|
||||||
.LAFAdd {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.2rem;
|
|
||||||
z-index: 100;
|
|
||||||
.w {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
.title-box {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
.title-icon {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main {
|
|
||||||
.card {
|
|
||||||
height: auto;
|
|
||||||
padding: 0.3rem 0.3rem 1rem 0.3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
// padding-bottom:1rem;
|
|
||||||
width: 90%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 0.15rem;
|
|
||||||
.icon-box {
|
|
||||||
text-align: center;
|
|
||||||
color: $main-color;
|
|
||||||
height: 1rem;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
// font-weight: 600;
|
|
||||||
color: $main-color;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
margin: .2rem 0;
|
|
||||||
}
|
|
||||||
input {
|
|
||||||
width: 100%;
|
|
||||||
height: 1rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
outline-style: none;
|
|
||||||
background: #f4f9ff;
|
|
||||||
border: 1px #e1effd solid;
|
|
||||||
color: $main-color;
|
|
||||||
padding: 0 .3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: .15rem;
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
}
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
/* Chrome/Opera/Safari */
|
|
||||||
color: #a4c5ed;
|
|
||||||
}
|
|
||||||
::-moz-placeholder {
|
|
||||||
/* Firefox 19+ */
|
|
||||||
color: #a4c5ed;
|
|
||||||
}
|
|
||||||
:-ms-input-placeholder {
|
|
||||||
/* IE 10+ */
|
|
||||||
color: #a4c5ed;
|
|
||||||
}
|
|
||||||
:-moz-placeholder {
|
|
||||||
/* Firefox 18- */
|
|
||||||
color: #a4c5ed;
|
|
||||||
}
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
background: #f4f9ff;
|
|
||||||
border: 1px #e1effd solid;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
border-radius: .15rem;
|
|
||||||
padding: .3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: $main-color;
|
|
||||||
height: 2.5rem;
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
color: $main-color;
|
|
||||||
font-size: .4rem;
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
}
|
|
||||||
.addr-box, .contact-box, .type-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.option {
|
|
||||||
height: .6rem;
|
|
||||||
width: 2rem;
|
|
||||||
line-height: .6rem;
|
|
||||||
font-size: .3rem;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px #e1effd solid;
|
|
||||||
color:#a4c5ed;
|
|
||||||
background: #f4f9ff;
|
|
||||||
}
|
|
||||||
.select {
|
|
||||||
background: #cce6ff !important;
|
|
||||||
color: #0081ff;
|
|
||||||
border: 1px #cce6ff solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.type-box {
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
}
|
|
||||||
.contact-box .option {
|
|
||||||
width: auto!important;
|
|
||||||
flex :1;
|
|
||||||
}
|
|
||||||
.img-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
.img-border {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 2rem;
|
|
||||||
width: 2rem;
|
|
||||||
border: 2px $create-cramera-border-color solid;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.camera {
|
|
||||||
height: 0.8rem;
|
|
||||||
width: 0.8rem;
|
|
||||||
display: block;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.img-preview {
|
|
||||||
height: 2rem;
|
|
||||||
width: 2rem;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.img-delete {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 0.5rem;
|
|
||||||
width: 0.5rem;
|
|
||||||
background: #000;
|
|
||||||
opacity: 0.6;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-bottom-left-radius: 0.1rem;
|
|
||||||
.close-white {
|
|
||||||
height: 0.3rem;
|
|
||||||
width: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.tips {
|
|
||||||
p {
|
|
||||||
font-size: .3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.submit {
|
|
||||||
width: 5rem;
|
|
||||||
height: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1rem;
|
|
||||||
margin: 1rem auto;
|
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: .4rem;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
color: #fff;
|
|
||||||
background: $main-color;
|
|
||||||
border-radius: .1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detail-card {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
.link {
|
|
||||||
height:1.5rem;
|
|
||||||
width:75%;
|
|
||||||
// background: red;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top:-.5rem;
|
|
||||||
margin-bottom:-.5rem;
|
|
||||||
.link-item {
|
|
||||||
height:1.5rem;
|
|
||||||
width:.25rem;
|
|
||||||
position: relative;
|
|
||||||
.link-dote-top {
|
|
||||||
height:.25rem;
|
|
||||||
width:.25rem;
|
|
||||||
background: #b9d4f7;
|
|
||||||
/* background: #f7bdba; */
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
top:0;
|
|
||||||
z-index:10;
|
|
||||||
}
|
|
||||||
.link-dote-bottom {
|
|
||||||
height:.25rem;
|
|
||||||
width: .25rem;
|
|
||||||
background: #b9d4f7;
|
|
||||||
/* background: #f7bdba; */
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
bottom:0;
|
|
||||||
// left:10rpx;
|
|
||||||
z-index:10;
|
|
||||||
}
|
|
||||||
.link-line {
|
|
||||||
height:1.3rem;
|
|
||||||
width:.1rem;
|
|
||||||
position: absolute;
|
|
||||||
top:.1rem;
|
|
||||||
left:.075rem;
|
|
||||||
background: #e5eef9;
|
|
||||||
/* background: #fae7e6; */
|
|
||||||
z-index:11;
|
|
||||||
border-radius: .2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,487 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="LAFDetail">
|
|
||||||
<header>
|
|
||||||
<div class="w">
|
|
||||||
<div class="icon-box">
|
|
||||||
<i class="el-icon-back title-icon" @click="back()"></i>
|
|
||||||
</div>
|
|
||||||
<div class="title-box">详情</div>
|
|
||||||
<div class="icon-box del-box">
|
|
||||||
<i class="el-icon-delete title-icon" v-if="user_info.id == '180511307' ||user_info.id == '190521119'||user_info.id == '190511710'" @click="openDelLAF()"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div style="height: 1.2rem;"></div>
|
|
||||||
<div class="main">
|
|
||||||
<InfoCard :data="content"></InfoCard>
|
|
||||||
<Comment :content="content" :openInput="openInput"></Comment>
|
|
||||||
</div>
|
|
||||||
<div style="height: 1.3rem;"></div>
|
|
||||||
<footer v-if="show_footer">
|
|
||||||
<div class="footer-w">
|
|
||||||
<div class="comment" @click="openInput(-1, -1)">我要留言</div>
|
|
||||||
<div class="finish" v-if="content.contact_way.type!='none'" @click="openDialog()">联系发布者</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<!-- 联系发布者弹窗 -->
|
|
||||||
<div class="dialog" v-if="show_contact" @touchmove.prevent>
|
|
||||||
<div class="w">
|
|
||||||
<div class="title">
|
|
||||||
联系方式
|
|
||||||
<div class="icon-box" @click="closeDialog()">
|
|
||||||
<i class="el-icon-close icon"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="dialog-main">
|
|
||||||
<p>
|
|
||||||
{{content.contact_way.type}}：
|
|
||||||
<span>{{content.contact_way.content}}</span>
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="copy-buttom"
|
|
||||||
v-clipboard:copy="content.contact_way.content"
|
|
||||||
v-clipboard:success="onCopyUrl"
|
|
||||||
v-clipboard:error="onErrorUrl"
|
|
||||||
>复制</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
|
|
||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
|
||||||
import InfoCard from "./components/InfoCard.vue";
|
|
||||||
import Comment from "./components/Comment.vue";
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { getLAFDetail, comment, delLAF } from "@/axios/api.js";
|
|
||||||
import { Loading } from "element-ui";
|
|
||||||
import { formatDateTime, loginInterceptor } from "@/lib/utils.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "LAFDetail",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
content: {
|
|
||||||
contact_way: {
|
|
||||||
type: "none"
|
|
||||||
},
|
|
||||||
content: "XXXXXXXXXX",
|
|
||||||
img_url: "no_img.png",
|
|
||||||
title: "XXXXXXXX",
|
|
||||||
total_addr: "XXXXXX",
|
|
||||||
detail_addr: "XXXXXX",
|
|
||||||
type: "lost",
|
|
||||||
create_time: 1581515035078
|
|
||||||
},
|
|
||||||
show_footer: true,
|
|
||||||
show_contact: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState([
|
|
||||||
"user_info"
|
|
||||||
])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions([
|
|
||||||
"setLAFReflash"
|
|
||||||
]),
|
|
||||||
formatDateTime,
|
|
||||||
// 初始化
|
|
||||||
init() {
|
|
||||||
// let id = this.$route.params.item._id["$oid"];
|
|
||||||
// 防止本页刷新后丢失params导致渲染出错，直接返回上一级
|
|
||||||
if (Object.keys(this.$route.params).length == 0) {
|
|
||||||
this.$router.go(-1);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let id = this.$route.params.item._id["$oid"];
|
|
||||||
let type = this.$route.params.item.type;
|
|
||||||
this.getPageData(id, type);
|
|
||||||
},
|
|
||||||
// 获取本页详情
|
|
||||||
getPageData(id, type) {
|
|
||||||
let load = Loading.service({
|
|
||||||
background: "rgba(236,245,255,.7)",
|
|
||||||
target: document.querySelector(".loading-box")
|
|
||||||
});
|
|
||||||
let data = {
|
|
||||||
id,
|
|
||||||
type
|
|
||||||
};
|
|
||||||
getLAFDetail(data)
|
|
||||||
.then(res => {
|
|
||||||
// console.log(res)
|
|
||||||
if (res.data.errcode == 200) {
|
|
||||||
// 获取成功
|
|
||||||
this.content = JSON.parse(res.data.detail);
|
|
||||||
// console.log(this.content)
|
|
||||||
load.close();
|
|
||||||
} else {
|
|
||||||
// 获取失败
|
|
||||||
load.close();
|
|
||||||
this.$message.error("服务器开小差了，请过段时间重试");
|
|
||||||
console.log(res.data);
|
|
||||||
this.back();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
load.close();
|
|
||||||
this.$message.error("服务器开小差了，请过段时间重试");
|
|
||||||
console.log(err);
|
|
||||||
this.back();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
back() {
|
|
||||||
this.$router.go(-1);
|
|
||||||
},
|
|
||||||
|
|
||||||
// 打开输入框
|
|
||||||
openInput(comment_index, reply_index) {
|
|
||||||
console.log(comment_index, reply_index);
|
|
||||||
this.show_footer = false;
|
|
||||||
this.$prompt(`请输入内容，为保证信息质量，该操作将实名制`, "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
inputPattern: /^[^\^\$\/\<\(\)]{3,}$/,
|
|
||||||
inputErrorMessage: "请勿输入特殊符号，至少3个字,"
|
|
||||||
})
|
|
||||||
.then(({ value }) => {
|
|
||||||
this.show_footer = true;
|
|
||||||
this.submit(comment_index, reply_index, value);
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.show_footer = true;
|
|
||||||
this.$message({
|
|
||||||
type: "info",
|
|
||||||
message: "取消输入"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 确认提交
|
|
||||||
submit(comment_index, reply_index, value) {
|
|
||||||
let load = Loading.service({
|
|
||||||
background: "rgba(236,245,255,.7)",
|
|
||||||
target: document.querySelector(".loading-box")
|
|
||||||
});
|
|
||||||
// 合成上传信息
|
|
||||||
// 数据一共需要提交 昵称 时间 cid 内容
|
|
||||||
// 此处内容需要根据是回复还是评论进行处理
|
|
||||||
var data = {
|
|
||||||
user_info: {
|
|
||||||
user_id: this.user_info.id,
|
|
||||||
user_name: this.user_info.name
|
|
||||||
},
|
|
||||||
time: new Date().getTime()
|
|
||||||
};
|
|
||||||
// 后端插入数据的定位信息 商品id 表类型 回复或者评论的类型
|
|
||||||
var position = {
|
|
||||||
id: this.content._id["$oid"],
|
|
||||||
type: this.content.type
|
|
||||||
};
|
|
||||||
if (comment_index == -1) {
|
|
||||||
// 留言
|
|
||||||
data.msg = value;
|
|
||||||
position.comment_type = 1;
|
|
||||||
} else {
|
|
||||||
// 回复
|
|
||||||
if (reply_index == -1) {
|
|
||||||
// 回复留言
|
|
||||||
data.msg = `@${this.content.comment[comment_index].user_info.user_name}：${value}`;
|
|
||||||
position.comment_index = comment_index;
|
|
||||||
position.comment_type = 2;
|
|
||||||
} else {
|
|
||||||
// 回复回复
|
|
||||||
data.msg = `@${this.content.comment[comment_index].reply[reply_index].user_info.user_name}：${value}`;
|
|
||||||
position.comment_index = comment_index;
|
|
||||||
position.comment_type = 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
comment(data, position)
|
|
||||||
.then(res => {
|
|
||||||
console.log(res);
|
|
||||||
if (res.data.errcode == 200) {
|
|
||||||
// 提交成功, 刷新数据
|
|
||||||
load.close();
|
|
||||||
this.$message({
|
|
||||||
type: "success",
|
|
||||||
message: `${position.comment_type == 1 ? "留言" : "回复"}成功`
|
|
||||||
});
|
|
||||||
this.getPageData(this.content._id["$oid"], this.content.type);
|
|
||||||
} else {
|
|
||||||
// 错误处理
|
|
||||||
load.close();
|
|
||||||
this.$message.error(
|
|
||||||
`${position.comment_type == 1 ? "留言" : "回复"}失败，请重试`
|
|
||||||
);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
load.close();
|
|
||||||
console.log(err);
|
|
||||||
this.$message.error(
|
|
||||||
`${position.comment_type == 1 ? "留言" : "回复"}失败，请重试`
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 打开删除对话窗
|
|
||||||
openDelLAF() {
|
|
||||||
this.show_footer = false;
|
|
||||||
this.$prompt(`此操作将删除该记录，此操作实名制，请输入你的学号`, "警告", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
inputPattern: /\d{7}W?\d{2}/,
|
|
||||||
inputErrorMessage: "请输入正确的学号"
|
|
||||||
})
|
|
||||||
.then(({ value }) => {
|
|
||||||
this.show_footer = true;
|
|
||||||
if (value == this.user_info.id) {
|
|
||||||
// 填入正确
|
|
||||||
this.closeLAF();
|
|
||||||
} else {
|
|
||||||
this.$message.error("输入学号有误请核对");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
this.show_footer = true;
|
|
||||||
this.$message({
|
|
||||||
type: "info",
|
|
||||||
message: "取消输入"
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 进行删除操作
|
|
||||||
closeLAF() {
|
|
||||||
let load = Loading.service({
|
|
||||||
background: "rgba(236,245,255,.7)",
|
|
||||||
target: document.querySelector(".loading-box")
|
|
||||||
});
|
|
||||||
let data = {
|
|
||||||
id: this.content._id["$oid"],
|
|
||||||
type: this.content.type,
|
|
||||||
user_info: {
|
|
||||||
user_id: this.user_info.id,
|
|
||||||
user_name: this.user_info.name
|
|
||||||
}
|
|
||||||
};
|
|
||||||
delLAF(data)
|
|
||||||
.then(res => {
|
|
||||||
if (res.data.errcode == 200) {
|
|
||||||
// 执行成功
|
|
||||||
load.close();
|
|
||||||
this.$message({
|
|
||||||
type: "success",
|
|
||||||
message: "恭喜，操作成功"
|
|
||||||
});
|
|
||||||
this.setLAFReflash([true, this]);
|
|
||||||
this.back();
|
|
||||||
} else {
|
|
||||||
// 执行失败
|
|
||||||
load.close();
|
|
||||||
console.log(res.data);
|
|
||||||
this.$message.error("抱歉，操作失败");
|
|
||||||
this.setLAFReflash([true, this]);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(err => {
|
|
||||||
// 执行失败
|
|
||||||
load.close();
|
|
||||||
console.log(err);
|
|
||||||
this.$message.error("抱歉，操作失败");
|
|
||||||
this.setLAFReflash([true, this]);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 打开联系发布者弹窗
|
|
||||||
openDialog() {
|
|
||||||
this.show_contact = true;
|
|
||||||
},
|
|
||||||
// 关闭联系发布者弹窗
|
|
||||||
closeDialog() {
|
|
||||||
this.show_contact = false;
|
|
||||||
},
|
|
||||||
onCopyUrl(e) {
|
|
||||||
this.$message.success("复制成功！");
|
|
||||||
},
|
|
||||||
onErrorUrl(e) {
|
|
||||||
this.$message.success("复制失败！");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 登录态管理
|
|
||||||
loginInterceptor.call(this,"None",this.init)
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
// 登录态管理
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FooterSpace,
|
|
||||||
InfoCard,
|
|
||||||
Comment
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../style/main";
|
|
||||||
.LAFDetail {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.2rem;
|
|
||||||
z-index: 100;
|
|
||||||
.w {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
.title-box {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
.title-icon {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.del-box {
|
|
||||||
right: 0;
|
|
||||||
left: auto;
|
|
||||||
.title-icon {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
footer {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
.footer-w {
|
|
||||||
border-top: 1px #eee solid;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
height: 1.3rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
line-height: 1.3rem;
|
|
||||||
.comment {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
background: #fff;
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
.finish {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
background: $main-color;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 101;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.w {
|
|
||||||
width: 70%;
|
|
||||||
max-width: 350px;
|
|
||||||
height: 5rem;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
overflow: hidden;
|
|
||||||
.title {
|
|
||||||
height: 1rem;
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1rem;
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
.icon-box {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 1rem;
|
|
||||||
height: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.icon {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-main {
|
|
||||||
height: 4rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
p {
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.4rem;
|
|
||||||
span {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
color: $main-color;
|
|
||||||
-moz-user-select: all;
|
|
||||||
-webkit-user-select: all;
|
|
||||||
-ms-user-select: all;
|
|
||||||
-khtml-user-select: all;
|
|
||||||
user-select: all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.copy-buttom {
|
|
||||||
width: 40%;
|
|
||||||
margin: 0 auto;
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
// background-image: $gradualLAF;
|
|
||||||
background: $main-color;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
text-align: center;
|
|
||||||
height: 0.7rem;
|
|
||||||
line-height: 0.7rem;
|
|
||||||
border-radius: 0.1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,309 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="LAFAdd">
|
|
||||||
<header>
|
|
||||||
<div class="w">
|
|
||||||
<div class="icon-box">
|
|
||||||
<i class="el-icon-back title-icon" @click="back()"></i>
|
|
||||||
</div>
|
|
||||||
<div class="title-box">检索</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div style="height: 1.2rem;"></div>
|
|
||||||
<div class="search-warp">
|
|
||||||
<div class="search-box">
|
|
||||||
<i class="el-icon-search icon"></i>
|
|
||||||
<input type="text" placeholder="输入物品名" v-model="search_msg"/>
|
|
||||||
</div>
|
|
||||||
<div class="submit" @click='matchSearchContent()'>搜索</div>
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<div class="lost" :class="search_type == 'lost' ? 'select': ''" @click="changeNav('lost')">失物</div>
|
|
||||||
<div class="found" :class="search_type == 'found' ? 'select': ''" @click="changeNav('found')">招领</div>
|
|
||||||
</nav>
|
|
||||||
<div class="addr-box">
|
|
||||||
<div class="option" :class="search_addr == '长理东区' ? 'select': ''" @click="changeSearchAddr('长理东区')">长理东区</div>
|
|
||||||
<div class="option" :class="search_addr == '长理南区' ? 'select': ''" @click="changeSearchAddr('长理南区')">长理南区</div>
|
|
||||||
<div class="option" :class="search_addr == '长理西区' ? 'select': ''" @click="changeSearchAddr('长理西区')">长理西区</div>
|
|
||||||
</div>
|
|
||||||
<div class="main">
|
|
||||||
<p v-if="search_res[search_type][search_addr].length == 0">空空如也呢~{{has_search?'没有符合您要求的信息呢~':'快搜索一个试试看~'}}</p>
|
|
||||||
<div class="found-page" v-else>
|
|
||||||
<LAFCard :content="item" v-for="(item, i) in search_res[search_type][search_addr]" :key="i"></LAFCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FooterSpace></FooterSpace>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
|
|
||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { Loading } from "element-ui";
|
|
||||||
import { loginInterceptor } from "@/lib/utils.js";
|
|
||||||
import LAFCard from "./components/LAFCard.vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "LAFSearch",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
search_addr:'未选',
|
|
||||||
search_res:{'lost' : {'长理西区': [], '长理东区': [], '长理南区': [], '未选': []}, 'found': {'长理西区': [], '长理东区': [], '长理南区': [], '未选': []}},
|
|
||||||
search_type:'lost',
|
|
||||||
has_search: false,
|
|
||||||
current_res: [],
|
|
||||||
search_msg: ''
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState([
|
|
||||||
"user_info",
|
|
||||||
"current_week",
|
|
||||||
"current_schedule",
|
|
||||||
"personalized",
|
|
||||||
"LAF_data"
|
|
||||||
])
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 初始化
|
|
||||||
init() {
|
|
||||||
},
|
|
||||||
back() {
|
|
||||||
this.$router.go(-1);
|
|
||||||
},
|
|
||||||
changeSearchAddr(addr) {
|
|
||||||
if(this.search_addr == addr) this.search_addr = '未选'
|
|
||||||
else this.search_addr = addr
|
|
||||||
},
|
|
||||||
changeNav(type){
|
|
||||||
this.search_type = type
|
|
||||||
},
|
|
||||||
matchSearchContent(){
|
|
||||||
// 空内容拦截器
|
|
||||||
if(!this.search_msg.trim()) {
|
|
||||||
this.$message.error("请输入搜索内容");
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.has_search = true
|
|
||||||
let lost = this.LAF_data['lost']
|
|
||||||
let found = this.LAF_data['found']
|
|
||||||
this.search_res['lost'] = this.matchReg(lost)
|
|
||||||
this.search_res['found'] = this.matchReg(found)
|
|
||||||
this.$message.success("搜索完成");
|
|
||||||
},
|
|
||||||
//正则创造辅助轮
|
|
||||||
generReg(val) {
|
|
||||||
let head = '(.*)('
|
|
||||||
let tail = ')(.*)'
|
|
||||||
let body = val.split('').join(')(.*)(')
|
|
||||||
return new RegExp(head + body + tail, 'i')
|
|
||||||
},
|
|
||||||
// 正则匹配辅助轮
|
|
||||||
matchReg(data){
|
|
||||||
let west = []
|
|
||||||
let east = []
|
|
||||||
let south = []
|
|
||||||
let total = []
|
|
||||||
for (var i in data) {
|
|
||||||
if(this.generReg(this.search_msg).test(data[i].title) || this.generReg(this.search_msg).test(data[i].content)) {
|
|
||||||
switch(data[i].total_addr){
|
|
||||||
case '长理东区':
|
|
||||||
east.push(data[i]);
|
|
||||||
break
|
|
||||||
case '长理西区':
|
|
||||||
west.push(data[i]);
|
|
||||||
break
|
|
||||||
case '长理南区':
|
|
||||||
south.push(data[i]);
|
|
||||||
break
|
|
||||||
}
|
|
||||||
total.push(data[i])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {'长理西区': west, '长理东区': east, '长理南区': south, '未选': total}
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 登录态管理
|
|
||||||
// loginInterceptor.call(this,"None",this.init)
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
// 登录态管理
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FooterSpace,
|
|
||||||
LAFCard
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../style/main";
|
|
||||||
.LAFAdd {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.2rem;
|
|
||||||
z-index: 100;
|
|
||||||
.w {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
.title-box {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
.title-icon {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search-warp {
|
|
||||||
height: 1rem;
|
|
||||||
// background: red;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
margin: 0.2rem 0;
|
|
||||||
.submit {
|
|
||||||
height: 0.7rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
// background-image: linear-gradient(to right, #1be5d2, #5e75e5);
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 0.7rem;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-left: 0.3rem;
|
|
||||||
}
|
|
||||||
.submit::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background: inherit;
|
|
||||||
filter: blur(0.1rem);
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0.1rem;
|
|
||||||
left: 0.1rem;
|
|
||||||
opacity: 0.4;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
transform: scale(1, 1);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
.search-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.7rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: rgb(241, 239, 239);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.icon {
|
|
||||||
color: #989898;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
}
|
|
||||||
input, p{
|
|
||||||
width: 100%;
|
|
||||||
height: 0.7rem;
|
|
||||||
line-height: .7rem;
|
|
||||||
border: none;
|
|
||||||
padding-left: 0.3rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
background: rgb(241, 239, 239);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.addr-box, .contact-box, .type-box {
|
|
||||||
padding: 0 .3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: .3rem;
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
.option {
|
|
||||||
height: .6rem;
|
|
||||||
width: 2rem;
|
|
||||||
line-height: .6rem;
|
|
||||||
font-size: .3rem;
|
|
||||||
text-align: center;
|
|
||||||
border: 1px #dec0ff solid;
|
|
||||||
color:#bc8eed;
|
|
||||||
background: #f6edff;
|
|
||||||
}
|
|
||||||
.select {
|
|
||||||
background: #e5ccff !important;
|
|
||||||
color: #ab64f6;
|
|
||||||
border: 1px #e5ccff solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
height: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
div {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
height: 0.7rem;
|
|
||||||
line-height: 0.7rem;
|
|
||||||
}
|
|
||||||
.lost {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
.select {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 2px #ab64f6 solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main > p {
|
|
||||||
font-size: .3rem;
|
|
||||||
margin-left: .3rem;
|
|
||||||
margin-top: .3rem;
|
|
||||||
color: #989898;
|
|
||||||
}
|
|
||||||
.main > div{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,314 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="laf">
|
|
||||||
<header>
|
|
||||||
<div class="w">
|
|
||||||
<div class="icon-box" @click="reflash()">
|
|
||||||
<i class="el-icon-refresh icon"></i>
|
|
||||||
</div>
|
|
||||||
<div class="title-box">失物招领</div>
|
|
||||||
<div class="icon-box" @click="goToAdd()">
|
|
||||||
<i class="el-icon-plus icon"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<div style="height: 1.2rem;"></div>
|
|
||||||
<div class="search-warp" @click='goToSearch()'>
|
|
||||||
<div class="search-box">
|
|
||||||
<i class="el-icon-search icon"></i>
|
|
||||||
<!-- <p>该功能开发中</p> -->
|
|
||||||
<!-- <input type="text" placeholder="输入物品名" /> -->
|
|
||||||
</div>
|
|
||||||
<div class="submit">搜索</div>
|
|
||||||
</div>
|
|
||||||
<nav>
|
|
||||||
<div class="lost" :class="page_type == 'lost' ? 'select': ''" @click="changeNav('lost')">失物</div>
|
|
||||||
<div class="found" :class="page_type == 'found' ? 'select': ''" @click="changeNav('found')">招领</div>
|
|
||||||
</nav>
|
|
||||||
<div class="main">
|
|
||||||
<p v-if="page_type == 'lost'? LAF_data.lost.length == 0 : LAF_data.found.length == 0">空空如也呢，快点击右上角添加一个吧~</p>
|
|
||||||
<div class="lost-page" v-if="page_type == 'lost'">
|
|
||||||
<LAFCard :content="item" v-for="(item, i) in LAF_data.lost" :key="i"></LAFCard>
|
|
||||||
</div>
|
|
||||||
<div class="found-page" v-else>
|
|
||||||
<LAFCard :content="item" v-for="(item, i) in LAF_data.found" :key="i"></LAFCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<FooterSpace></FooterSpace>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// @ is an alias to /src
|
|
||||||
|
|
||||||
import FooterSpace from "@/components/FooterSpace.vue";
|
|
||||||
import LAFCard from "./components/LAFCard.vue";
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { getLAF } from "@/axios/api.js";
|
|
||||||
import { Loading } from "element-ui";
|
|
||||||
import { loginInterceptor } from "@/lib/utils.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "lost_and_found",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
page_type: "lost",
|
|
||||||
need_reflash: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState([
|
|
||||||
"user_info",
|
|
||||||
"LAF_data",
|
|
||||||
'LAF_reflash'
|
|
||||||
]),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions([
|
|
||||||
"setCurrentPage",
|
|
||||||
"setLAFData",
|
|
||||||
"setLAFReflash"
|
|
||||||
]),
|
|
||||||
// 初始化
|
|
||||||
init() {
|
|
||||||
this.getLAFData();
|
|
||||||
},
|
|
||||||
|
|
||||||
getLAFData() {
|
|
||||||
// 拦截器
|
|
||||||
if (Object.keys(this.LAF_data).length != 0) {
|
|
||||||
let now = new Date().getTime(); //毫秒级时间戳
|
|
||||||
if (
|
|
||||||
now - this.LAF_data.get_time < 1000 * 60 * 3 &&
|
|
||||||
!this.need_reflash && !this.LAF_reflash
|
|
||||||
) {
|
|
||||||
// 上次获取的的时间是3分钟之内且无需刷新
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let load = Loading.service({
|
|
||||||
background: "rgba(236,245,255,.7)",
|
|
||||||
target: document.querySelector(".laf")
|
|
||||||
});
|
|
||||||
getLAF().then(res => {
|
|
||||||
// console.log(res.data);
|
|
||||||
let data = res.data
|
|
||||||
let laf
|
|
||||||
if(data.lost.errcode == 200 && data.found.errcode == 200) {
|
|
||||||
// 成功获取到信息
|
|
||||||
laf = {
|
|
||||||
lost: JSON.parse(data.lost.arr),
|
|
||||||
found: JSON.parse(data.found.arr),
|
|
||||||
get_time: new Date().getTime()
|
|
||||||
}
|
|
||||||
// console.log(laf)
|
|
||||||
if(this.need_reflash) {
|
|
||||||
this.$message({
|
|
||||||
message: "数据更新成功",
|
|
||||||
type: "success"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 信息获取失败
|
|
||||||
laf = {
|
|
||||||
lost: [],
|
|
||||||
found: [],
|
|
||||||
get_time: new Date().getTime()
|
|
||||||
}
|
|
||||||
this.$message.error("数据更新失败，请联系管理员");
|
|
||||||
console.log(res.data)
|
|
||||||
}
|
|
||||||
this.setLAFData([laf, this]);
|
|
||||||
this.setLAFReflash([false, this]);
|
|
||||||
this.need_reflash = false;
|
|
||||||
load.close()
|
|
||||||
}).catch(err => {
|
|
||||||
console.log(err)
|
|
||||||
laf = {
|
|
||||||
lost: [],
|
|
||||||
found: [],
|
|
||||||
get_time: new Date().getTime()
|
|
||||||
}
|
|
||||||
this.$message.error("网络连接失败，请联系管理员");
|
|
||||||
this.setLAFData([laf, this]);
|
|
||||||
this.need_reflash = true;
|
|
||||||
load.close()
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
// 改变nav
|
|
||||||
changeNav(type) {
|
|
||||||
this.page_type = type
|
|
||||||
},
|
|
||||||
|
|
||||||
reflash(){
|
|
||||||
// 拦截器
|
|
||||||
if(this.need_reflash) return
|
|
||||||
this.need_reflash = true
|
|
||||||
this.getLAFData()
|
|
||||||
},
|
|
||||||
// 点击新增
|
|
||||||
goToAdd(){
|
|
||||||
this.$router.push('/lafadd')
|
|
||||||
},
|
|
||||||
// 点击搜索
|
|
||||||
goToSearch(){
|
|
||||||
this.$router.push('/lafsearch')
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.init();
|
|
||||||
this.setCurrentPage(["laf", this]);
|
|
||||||
},
|
|
||||||
activated() {
|
|
||||||
this.setCurrentPage(["laf", this]);
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
FooterSpace,
|
|
||||||
LAFCard
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../style/main";
|
|
||||||
.laf {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
min-height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
header {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.2rem;
|
|
||||||
z-index: 100;
|
|
||||||
.w {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
color: #fff;
|
|
||||||
.title-box {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
height: 1.2rem;
|
|
||||||
width: 1.2rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.icon {
|
|
||||||
font-size: .6rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.search-warp {
|
|
||||||
height: 1rem;
|
|
||||||
// background: red;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
margin: 0.2rem 0;
|
|
||||||
.submit {
|
|
||||||
height: 0.7rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
// background-image: linear-gradient(to right, #1be5d2, #5e75e5);
|
|
||||||
background-image: $gradualLAF;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
color: #fff;
|
|
||||||
line-height: 0.7rem;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-left: 0.3rem;
|
|
||||||
}
|
|
||||||
.submit::before {
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
background: inherit;
|
|
||||||
filter: blur(0.1rem);
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0.1rem;
|
|
||||||
left: 0.1rem;
|
|
||||||
opacity: 0.4;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
transform: scale(1, 1);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
.search-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 0.7rem;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
background: rgb(241, 239, 239);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.icon {
|
|
||||||
color: #989898;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
}
|
|
||||||
input, p{
|
|
||||||
width: 100%;
|
|
||||||
height: 0.7rem;
|
|
||||||
line-height: .7rem;
|
|
||||||
border: none;
|
|
||||||
padding-left: 0.3rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
background: rgb(241, 239, 239);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
nav {
|
|
||||||
height: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
div {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
height: 0.7rem;
|
|
||||||
line-height: 0.7rem;
|
|
||||||
}
|
|
||||||
.lost {
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
.select {
|
|
||||||
font-size: 0.5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 2px #ab64f6 solid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main > p {
|
|
||||||
font-size: .3rem;
|
|
||||||
margin-left: .3rem;
|
|
||||||
margin-top: .3rem;
|
|
||||||
color: #989898;
|
|
||||||
}
|
|
||||||
.main > div{
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0.3rem;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,121 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="comment-warp" v-if="content.comment && content.comment.length!=0">
|
|
||||||
<div class="comment-title"># 留言</div>
|
|
||||||
<div class="comment-item" v-for="(comment, c) in content.comment" :key="c">
|
|
||||||
<div class="comment-box">
|
|
||||||
<i class="el-icon-chat-dot-round label-icon-big"></i>
|
|
||||||
<div class="reply-btn">
|
|
||||||
<span @click="openInput(c, -1)">回复</span>
|
|
||||||
</div>
|
|
||||||
<div class="comment-detail-box">
|
|
||||||
<div class="comment-user-nick">{{comment.user_info.user_name}}</div>
|
|
||||||
<div class="comment-time">{{formatDateTime(comment.time)}}</div>
|
|
||||||
<div class="comment-msg">{{comment.msg}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="reply-item" v-for="(reply, r) in comment.reply" :key="r">
|
|
||||||
<i class="el-icon-chat-line-round label-icon-small"></i>
|
|
||||||
<div class="reply-btn">
|
|
||||||
<span @click="openInput(c, r)">回复</span>
|
|
||||||
</div>
|
|
||||||
<div class="reply-detail-box">
|
|
||||||
<div class="reply-user-nick">{{reply.user_info.user_name}}</div>
|
|
||||||
<div class="reply-time">{{formatDateTime(reply.time)}}</div>
|
|
||||||
<div class="reply-msg">{{reply.msg}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { formatDateTime } from "@/lib/utils.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "comment",
|
|
||||||
props: ["content","openInput"],
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
methods: {
|
|
||||||
formatDateTime,
|
|
||||||
},
|
|
||||||
created() {}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../../style/main";
|
|
||||||
.comment-warp {
|
|
||||||
padding: 0.5rem 0.4rem;
|
|
||||||
.comment-title {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
}
|
|
||||||
.comment-item {
|
|
||||||
padding-top: 0.5rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
border-bottom: 1px #eee solid;
|
|
||||||
.reply-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 0.1rem;
|
|
||||||
right: 0rem;
|
|
||||||
font-size: 0.3rem;
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
.comment-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.label-icon-big {
|
|
||||||
font-size: .7rem;
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
.comment-detail-box {
|
|
||||||
margin-left: 0.2rem;
|
|
||||||
.comment-user-nick {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
}
|
|
||||||
.comment-time {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
color: $secondary-text;
|
|
||||||
}
|
|
||||||
.comment-msg {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.reply-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: flex-start;
|
|
||||||
position: relative;
|
|
||||||
margin-top: 0.3rem;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
.label-icon-small {
|
|
||||||
font-size: .5rem;
|
|
||||||
color: $main-color;
|
|
||||||
}
|
|
||||||
.reply-detail-box {
|
|
||||||
margin-left: 0.2rem;
|
|
||||||
.reply-user-nick {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
}
|
|
||||||
.reply-time {
|
|
||||||
font-size: 0.2rem;
|
|
||||||
margin-bottom: 0.1rem;
|
|
||||||
color: $secondary-text;
|
|
||||||
}
|
|
||||||
.reply-msg {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="infocard-page">
|
|
||||||
<!-- 题头 -->
|
|
||||||
<div class="title">{{data.title}}</div>
|
|
||||||
<div class="time">{{show_time}}</div>
|
|
||||||
<!-- 内容 -->
|
|
||||||
<div class="content-text">{{data.content}}</div>
|
|
||||||
<div class="content-imgs-box" v-if="data.img_url != 'no_img.png'">
|
|
||||||
<div class="img-warp">
|
|
||||||
<img :src="imgaddr" alt/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="addr-box">
|
|
||||||
<div class="addr" style="color: #409EFF;background: #d9ecff;">{{data.total_addr}}</div>
|
|
||||||
<div class="addr" style="color: #67C23A;background: #e1f3d8;">{{data.detail_addr}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { formatDateTime } from "@/lib/utils.js";
|
|
||||||
export default {
|
|
||||||
name: "infocard",
|
|
||||||
props: ["data"],
|
|
||||||
data: () => {
|
|
||||||
return {
|
|
||||||
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
imgaddr: function() {
|
|
||||||
return "https://coc.powerrain.cn/api/" + "photo/show/" + this.data.img_url
|
|
||||||
},
|
|
||||||
show_time:function() {
|
|
||||||
return formatDateTime(new Date(parseInt(this.data.create_time)));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../../style/main";
|
|
||||||
.infocard-page {
|
|
||||||
/* border-bottom: 0.3rem #eee solid;
|
|
||||||
padding: 0.5rem 0.4rem; */
|
|
||||||
margin: .5rem .4rem;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
padding: .3rem .3rem 0 .3rem;
|
|
||||||
border-radius: .1rem;
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: .5rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0.3rem 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
text-align: left;
|
|
||||||
color: #909399;
|
|
||||||
height: 0.3rem;
|
|
||||||
line-height: 0.3rem;
|
|
||||||
}
|
|
||||||
.content-text {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
text-align: left;
|
|
||||||
// text-indent: 1rem;
|
|
||||||
margin: 0.3rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-imgs-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-imgs-box img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.addr-box {
|
|
||||||
height: 1rem;
|
|
||||||
margin: 0.1rem 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.addr-box .addr {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
padding: 0.1rem 0.2rem;
|
|
||||||
background: red;
|
|
||||||
margin-right: 0.1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="content-box" @click="goToDetail()">
|
|
||||||
<img :src="imgaddr" alt />
|
|
||||||
<div class="text-box">
|
|
||||||
<div class="title">{{content.title.length >= 7? content.title.slice(0,7) + '...' :content.title}}</div>
|
|
||||||
<div class="time">{{show_time}}</div>
|
|
||||||
<div class="addr">
|
|
||||||
<i class="el-icon-location-information icon"></i>
|
|
||||||
<span>{{content.total_addr}}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { mapState, mapActions } from "vuex";
|
|
||||||
import { formatDateTime } from "@/lib/utils.js";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "LAFCard",
|
|
||||||
props: ["content"],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
imgaddr: function() {
|
|
||||||
return (
|
|
||||||
"https://coc.powerrain.cn/api/" + "photo/show/" + this.content.img_url
|
|
||||||
);
|
|
||||||
},
|
|
||||||
show_time:function() {
|
|
||||||
return formatDateTime(new Date(parseInt(this.content.create_time)));
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 点击详情
|
|
||||||
goToDetail(){
|
|
||||||
this.$router.push({name: 'LAFDetail', params: {item: this.content}})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
|
||||||
@import "../../../style/main";
|
|
||||||
.content-box {
|
|
||||||
width: 48%;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 0.2em;
|
|
||||||
overflow: hidden;
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
img {
|
|
||||||
height: 2rem;
|
|
||||||
width: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
.text-box {
|
|
||||||
padding: 0 0.3rem;
|
|
||||||
.title {
|
|
||||||
font-size: 0.4rem;
|
|
||||||
}
|
|
||||||
.time {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
color: #989898;
|
|
||||||
}
|
|
||||||
.addr {
|
|
||||||
font-size: 0.3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
span {
|
|
||||||
margin-left: 0.1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,8 +1,8 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
productionSourceMap: false,
|
productionSourceMap: false,
|
||||||
pwa: {
|
pwa: {
|
||||||
name: 'Co-Create',
|
name: 'Cherry',
|
||||||
// themeColor: '#e54d42',
|
themeColor: '#e54d42',
|
||||||
workboxOptions: {
|
workboxOptions: {
|
||||||
skipWaiting: true
|
skipWaiting: true
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user