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",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@ -12,6 +12,7 @@
|
||||
"axios": "^0.19.1",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"core-js": "^3.4.4",
|
||||
"crc-32": "^1.2.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
"element-ui": "^2.13.0",
|
||||
"es6-promise": "^4.2.8",
|
||||
|
||||
@ -3,9 +3,9 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Co-Create</title>
|
||||
<meta name="description" content="Co-Create!为长理同学提供课表,成绩代理查询服务" />
|
||||
<meta name="keywords" content="Co-Create,coc,长春理工大学,长理,coc app,教务系统,查课表,查成绩" />
|
||||
<title>Cherry</title>
|
||||
<meta name="description" content="Cherry!为长理同学提供课表,成绩代理查询服务" />
|
||||
<meta name="keywords" content="Cherry,长春理工大学,长理app,教务系统,查课表,查成绩" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
@ -13,7 +13,7 @@
|
||||
<link rel="icon" 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="为长理同学提供课表代理查询服务" />
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ import axios from 'axios'
|
||||
|
||||
export const api = axios.create({
|
||||
// baseURL: 'https://beta.powerrain.cn/api/',
|
||||
// baseURL: 'https://coc.powerrain.cn/api/',
|
||||
baseURL: window.location.origin + '/api/',
|
||||
baseURL: 'https://coc.powerrain.cn/api/',
|
||||
// baseURL: window.location.origin + '/api/',
|
||||
// baseURL: 'http://152.136.99.231:8001' + '/api/',
|
||||
//baseURL: 'http://127.0.0.1:5000/api',
|
||||
headers: {
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<p>课表小游戏</p>
|
||||
</div>
|
||||
<div class="list-item"
|
||||
v-clipboard:copy="'https://ccb.canary.moe'"
|
||||
v-clipboard:copy="'https://canary.lacus.site'"
|
||||
v-clipboard:success="onCopyUrl"
|
||||
v-clipboard:error="onErrorUrl">
|
||||
<icon class="game" name="canary"></icon>
|
||||
@ -325,17 +325,4 @@ export default {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/*
|
||||
这个页面需要进行absolute处理
|
||||
整体用left：width进行隐藏
|
||||
drawer为最高显示级别，分配z-index：200~250
|
||||
将挂载在app上，任何页面都能打开
|
||||
* 账户页面
|
||||
* 账号密码 自动保存
|
||||
* 头像 默认 logo
|
||||
* 昵称 默认 小樱桃001
|
||||
* 隐藏周末
|
||||
课表小游戏
|
||||
退出登录
|
||||
*/
|
||||
</style>
|
||||
@ -9,10 +9,10 @@
|
||||
<i :class="current_page == 'grade'? 'select' : ''" class="el-icon-s-claim"></i>
|
||||
<p :class="current_page == 'grade'? 'select' : ''">成绩</p>
|
||||
</div>
|
||||
<!-- <div class="content" @click="goToAddress('/laf')">
|
||||
<i :class="current_page == 'laf'? 'select' : ''" class="el-icon-s-flag"></i>
|
||||
<p :class="current_page == 'laf'? 'select' : ''">失物招领</p>
|
||||
</div> -->
|
||||
<div class="content" @click="goToAddress('/myaccount')">
|
||||
<i :class="current_page == 'myaccount'? 'select' : ''" class="el-icon-s-custom"></i>
|
||||
<p :class="current_page == 'myaccount'? 'select' : ''">我的</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
@ -92,8 +92,8 @@ footer .content:nth-of-type(2) .select {
|
||||
// color: $footer-laf-color;
|
||||
// }
|
||||
|
||||
// footer .content:last-of-type .select {
|
||||
// color: $footer-mine-color;
|
||||
// /* color: #efe02d; */
|
||||
// }
|
||||
footer .content:last-of-type .select {
|
||||
color: $footer-mine-color;
|
||||
/* color: #efe02d; */
|
||||
}
|
||||
</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:{
|
||||
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',
|
||||
@ -75,6 +43,14 @@ const routes = [
|
||||
keepAlive:false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/myaccount',
|
||||
name: 'MyAccount',
|
||||
component: () => import(/* webpackChunkName: "account" */ '../views/MyAccount/MyAccount.vue'),
|
||||
meta:{
|
||||
keepAlive:false
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '*', // 页面不存在的情况下会跳到schedule
|
||||
redirect: '/schedule',
|
||||
|
||||
@ -11,10 +11,6 @@ export default new Vuex.Store({
|
||||
grade: null,
|
||||
// 课表
|
||||
schedule: null,
|
||||
// LAF
|
||||
LAF_data: null,
|
||||
// 失物招领首页刷新
|
||||
LAF_reflash: false,
|
||||
// 当前页面
|
||||
current_page: null,
|
||||
// 游戏
|
||||
@ -38,14 +34,6 @@ export default new Vuex.Store({
|
||||
// 设置课表
|
||||
SET_SCHEDULE(state, 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) {
|
||||
@ -76,16 +64,6 @@ export default new Vuex.Store({
|
||||
setSchedule({ commit }, arg){
|
||||
commit('SET_SCHEDULE', arg[0]);
|
||||
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) {
|
||||
|
||||
@ -68,10 +68,10 @@
|
||||
总绩点：
|
||||
<span>{{total.total_GPA.toPrecision(4)}}</span>
|
||||
</p>
|
||||
<p>
|
||||
去选修绩点：
|
||||
<span>{{total.total_bixiu_GPA.toPrecision(4)}}</span>
|
||||
</p>
|
||||
<p>
|
||||
去选修绩点：
|
||||
<span>{{total.total_bixiu_GPA.toPrecision(4)}}</span>
|
||||
</p>
|
||||
<p>
|
||||
总学分：
|
||||
<span>{{total.total_credit}}</span>
|
||||
@ -94,7 +94,10 @@
|
||||
import FooterSpace from "@/components/FooterSpace.vue";
|
||||
import GradeCard from "./components/GradeCard.vue";
|
||||
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 {
|
||||
name: "grade",
|
||||
@ -108,35 +111,48 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["grade", "user_info"])
|
||||
...mapState(["grade", "user_info", "schedule"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setCurrentPage", 'setGrade']),
|
||||
...mapActions(["setUserInfo", "setGrade", "setSchedule", "setCurrentPage"]),
|
||||
// 初始化
|
||||
init(lock = false) {
|
||||
// 刷新本页vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||
// 刷新本页vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
// 互斥锁加锁
|
||||
if(this.init_lock) return
|
||||
console.log('刷新成绩信息')
|
||||
this.init_lock = lock
|
||||
if (this.init_lock) return;
|
||||
console.log("刷新成绩信息");
|
||||
this.init_lock = lock;
|
||||
// 设置footerNav
|
||||
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 == '∞') {
|
||||
console.log('重置信息')
|
||||
this.setGrade([getGradeInitData(), this])
|
||||
}
|
||||
// 处理第一次进来没有初始信息的情况
|
||||
if (
|
||||
!this.grade ||
|
||||
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的信息存到简单的变量里，由于不涉及更改，所以不需要深拷贝
|
||||
this.split = this.grade.data.split
|
||||
this.total = this.grade.data.total
|
||||
this.split = this.grade.data.split;
|
||||
this.total = this.grade.data.total;
|
||||
// 互斥锁解锁
|
||||
setTimeout(function(){
|
||||
this.init_lock = false
|
||||
}.bind(this), 100)
|
||||
setTimeout(
|
||||
function() {
|
||||
this.init_lock = false;
|
||||
}.bind(this),
|
||||
100
|
||||
);
|
||||
},
|
||||
|
||||
// 改变周数
|
||||
|
||||
// 改变周数
|
||||
changeWeek(direction, judge) {
|
||||
// 拦截器
|
||||
if (!judge) return;
|
||||
@ -144,9 +160,77 @@ export default {
|
||||
if (direction == "left") this.current_term_index++;
|
||||
else this.current_term_index--;
|
||||
},
|
||||
// 更新信息
|
||||
// 更新信息
|
||||
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() {
|
||||
|
||||
@ -43,6 +43,7 @@ import { login } from '@/axios/api.js';
|
||||
import { Loading } from 'element-ui';
|
||||
import FooterSpace from '@/components/FooterSpace.vue';
|
||||
import { getGradeInitData } from '@/lib/utils.js'
|
||||
import { encryptMainCode } from '@/lib/aes.js'
|
||||
|
||||
export default {
|
||||
name: 'login',
|
||||
@ -67,12 +68,6 @@ export default {
|
||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||
// 设置footerNav
|
||||
this.setCurrentPage(["None", this]);
|
||||
// 只对已经获取到信息的用户显示
|
||||
if (this.grade || this.schedule) {
|
||||
this.$alert('如从教务获取信息失败，将保留原先数据', '提示', {
|
||||
confirmButtonText: '阅！'
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 用户点击rushB
|
||||
@ -121,7 +116,8 @@ export default {
|
||||
login_time: new Date().getTime(),
|
||||
id: data.student_id,
|
||||
name: data.student_name,
|
||||
cid: this.cid
|
||||
cid: this.cid,
|
||||
pwd: encryptMainCode(this.pwd)
|
||||
};
|
||||
// 后端数据，本地数据，初始化数据，有哪个取哪个,
|
||||
// 成绩保证只存在初始数据和成功返回的数据两种情况
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="myaccount">
|
||||
<header>
|
||||
<img src="../assets/logo_nobg.png" alt="logo" />
|
||||
<img src="../../assets/logo_nobg.png" alt="logo" />
|
||||
<p>
|
||||
Co-Create
|
||||
<span>v1.0</span>
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- <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> -->
|
||||
</header>
|
||||
<div class="user-box shadow-warp">
|
||||
<div class="user-box shadow-warp" v-if="user_info">
|
||||
<div class="cid-box">
|
||||
<div class="cid">{{user_info.id}}</div>
|
||||
<div class="label">
|
||||
@ -25,10 +25,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logout" @click="logout()">消除数据</div>
|
||||
<div class="qq">
|
||||
使用安卓的同学请注意！！！！！！不要用安装包！那不是官方的正式版本！！我们极力推荐使用浏览器将网页保存到桌面的方法,请转告身边的同学,拜托了！！！(不会保存网页可以来群里问我哈)
|
||||
</div>
|
||||
<div class="logout" @click="logout()" v-if="user_info">退出登录</div>
|
||||
<div class="logout" @click="goTo('/login')" v-else>立即登录</div>
|
||||
<div class="qq">
|
||||
反馈及获取最新功能=>
|
||||
<span @click="openQQ()">1030523678</span>
|
||||
@ -38,7 +36,7 @@
|
||||
v-clipboard:success="onCopyUrl"
|
||||
v-clipboard:error="onErrorUrl">
|
||||
coc主站地址=>
|
||||
<span>coc.powerrain.cn</span>
|
||||
<span>cherry.lacus.site</span>
|
||||
</div>
|
||||
<FooterSpace></FooterSpace>
|
||||
</div>
|
||||
@ -55,11 +53,11 @@ export default {
|
||||
name: "myaccount",
|
||||
data() {
|
||||
return {
|
||||
web_addr: 'https://coc.powerrain.cn'
|
||||
web_addr: 'https://cherry.lacus.site'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "current_week", "current_schedule"])
|
||||
...mapState(["user_info"])
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
@ -68,6 +66,11 @@ export default {
|
||||
"setSchedule",
|
||||
"setUserInfo"
|
||||
]),
|
||||
init() {
|
||||
// 刷新本页vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||
this.setCurrentPage(["myaccount", this]);
|
||||
},
|
||||
// 登出
|
||||
logout() {
|
||||
this.setUserInfo([null, this]);
|
||||
@ -96,10 +99,10 @@ export default {
|
||||
created() {
|
||||
},
|
||||
mounted(){
|
||||
this.setCurrentPage(["myaccount", this]);
|
||||
this.init()
|
||||
},
|
||||
activated (){
|
||||
this.setCurrentPage(["myaccount", this]);
|
||||
this.init()
|
||||
},
|
||||
components: {
|
||||
FooterSpace
|
||||
@ -108,7 +111,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import "../style/main";
|
||||
@import "../../style/main";
|
||||
.myaccount {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
@ -118,7 +121,7 @@ export default {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
header {
|
||||
background-image: url(../assets/mine_bg.jpg);
|
||||
background-image: url(../../assets/mine_bg.jpg);
|
||||
background-size: cover;
|
||||
height: 7rem;
|
||||
display: flex;
|
||||
|
||||
@ -1,111 +1,153 @@
|
||||
<template>
|
||||
<div class="schedule">
|
||||
<header>
|
||||
<div class="w">
|
||||
<i class="el-icon-s-operation more" @click="openDrawer()"></i>
|
||||
<div class="left-box" @click="changeWeek('left')">
|
||||
<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 class="schedule">
|
||||
<header>
|
||||
<div class="w">
|
||||
<i class="el-icon-s-operation more" @click="openDrawer()"></i>
|
||||
<div class="left-box" @click="changeWeek('left')">
|
||||
<i class="el-icon-arrow-left icon" v-show="show_week!==1"></i>
|
||||
</div>
|
||||
</header>
|
||||
<div style="height: 1.2rem;"></div>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="week-title" v-for="i in hide_weekend? 5:7" :class="highlightWeek == i%7? 'highlight':''" :key="i">
|
||||
<p>{{week_day[i-1]}}</p>
|
||||
<p>{{date_arr[i-1]}}</p>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<v-touch @swiperight="openDrawer()">
|
||||
<aside>
|
||||
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
|
||||
</aside>
|
||||
</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>
|
||||
<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>
|
||||
</header>
|
||||
<div style="height: 1.2rem;"></div>
|
||||
<body>
|
||||
<nav>
|
||||
<div
|
||||
class="week-title"
|
||||
v-for="i in hide_weekend? 5:7"
|
||||
:class="highlightWeek == i%7? 'highlight':''"
|
||||
:key="i"
|
||||
>
|
||||
<p>{{week_day[i-1]}}</p>
|
||||
<p>{{date_arr[i-1]}}</p>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="main">
|
||||
<v-touch @swiperight="openDrawer()">
|
||||
<aside>
|
||||
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
|
||||
</aside>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</v-touch>
|
||||
</div>
|
||||
<!-- 课表点击弹窗 -->
|
||||
<div class="dialog" v-show="detail" @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>
|
||||
课程名：
|
||||
<span>{{detail.Lesson}}</span>
|
||||
</p>
|
||||
<p>
|
||||
周数：
|
||||
<span>{{detail.Time}}</span>
|
||||
</p>
|
||||
<p>
|
||||
上课地点：
|
||||
<span>{{detail.Room}}</span>
|
||||
</p>
|
||||
<p>
|
||||
任课教师：
|
||||
<span>{{detail.Teacher}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-touch>
|
||||
</div>
|
||||
<!-- 课表点击弹窗 -->
|
||||
<div class="dialog" v-show="detail" @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>
|
||||
课程名：
|
||||
<span>{{detail.Lesson}}</span>
|
||||
</p>
|
||||
<p>
|
||||
周数：
|
||||
<span>{{detail.Time}}</span>
|
||||
</p>
|
||||
<p>
|
||||
上课地点：
|
||||
<span>{{detail.Room}}</span>
|
||||
</p>
|
||||
<p>
|
||||
任课教师：
|
||||
<span>{{detail.Teacher}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<FooterSpace></FooterSpace>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<FooterSpace></FooterSpace>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import FooterSpace from "@/components/FooterSpace.vue";
|
||||
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 {
|
||||
name: "schedule",
|
||||
data() {
|
||||
return {
|
||||
// 本周实际周数
|
||||
current_week: 1,
|
||||
// 当前显示周数
|
||||
// 本周实际周数
|
||||
current_week: 1,
|
||||
// 当前显示周数
|
||||
show_week: 1,
|
||||
// 最大周数
|
||||
// 最大周数
|
||||
max_week: 22,
|
||||
// 课程详情兼dialog开关
|
||||
// 课程详情兼dialog开关
|
||||
detail: false,
|
||||
// 隐藏周末
|
||||
// 隐藏周末
|
||||
hide_weekend: false,
|
||||
// 遍历星期数组
|
||||
week_day: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
// 课程背景颜色
|
||||
bg_color: ["e4f5ff", "defbf7", "e7e5fa", "fcebcf", "feeeef", "d7f0db", "ebd4ef", "f9d7ea", "ede1d9", '48f350'],
|
||||
// 课程文字颜色
|
||||
font_color: ["58a2d9", "2bbbbc", "8379d8", "e89812", "d36e88", "39b54a", "9c26b0", "e03997", "a5673f", '48f350'],
|
||||
// 初始化互斥锁
|
||||
// 遍历星期数组
|
||||
week_day: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||||
// 课程背景颜色
|
||||
bg_color: [
|
||||
"e4f5ff",
|
||||
"defbf7",
|
||||
"e7e5fa",
|
||||
"fcebcf",
|
||||
"feeeef",
|
||||
"d7f0db",
|
||||
"ebd4ef",
|
||||
"f9d7ea",
|
||||
"ede1d9",
|
||||
"48f350"
|
||||
],
|
||||
// 课程文字颜色
|
||||
font_color: [
|
||||
"58a2d9",
|
||||
"2bbbbc",
|
||||
"8379d8",
|
||||
"e89812",
|
||||
"d36e88",
|
||||
"39b54a",
|
||||
"9c26b0",
|
||||
"e03997",
|
||||
"a5673f",
|
||||
"48f350"
|
||||
],
|
||||
// 初始化互斥锁
|
||||
init_lock: false,
|
||||
// 本周日期列表
|
||||
date_arr: []
|
||||
@ -113,7 +155,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState(["user_info", "current_page", "schedule"]),
|
||||
// 高亮本日星期
|
||||
// 高亮本日星期
|
||||
highlightWeek: function() {
|
||||
if (this.show_week == this.current_week) {
|
||||
// 是当前周
|
||||
@ -121,35 +163,49 @@ export default {
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setCurrentPage", "setDrawerState"]),
|
||||
|
||||
...mapActions([
|
||||
"setUserInfo",
|
||||
"setGrade",
|
||||
"setSchedule",
|
||||
"setCurrentPage",
|
||||
"setDrawerState"
|
||||
]),
|
||||
|
||||
// 初始化课表
|
||||
init(lock = false) {
|
||||
// 刷新本页vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
|
||||
// 互斥锁加锁
|
||||
if(this.init_lock) return
|
||||
console.log('刷新课表信息')
|
||||
this.init_lock = lock
|
||||
// 设置footerNav
|
||||
this.setCurrentPage(["schedule", this]);
|
||||
// 互斥锁解锁
|
||||
setTimeout(function(){
|
||||
this.init_lock = false
|
||||
}.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()
|
||||
// 刷新本页vuex
|
||||
this.$store.replaceState(
|
||||
Object.assign(
|
||||
this.$store.state,
|
||||
JSON.parse(localStorage.getItem("storeState"))
|
||||
)
|
||||
);
|
||||
// 互斥锁加锁
|
||||
if (this.init_lock) return;
|
||||
console.log("刷新课表信息");
|
||||
this.init_lock = lock;
|
||||
// 设置footerNav
|
||||
this.setCurrentPage(["schedule", this]);
|
||||
// 互斥锁解锁
|
||||
setTimeout(
|
||||
function() {
|
||||
this.init_lock = false;
|
||||
}.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.getDays()
|
||||
this.getDays();
|
||||
},
|
||||
|
||||
|
||||
// 改变周数
|
||||
changeWeek(dirction) {
|
||||
if (dirction == "left")
|
||||
@ -157,89 +213,156 @@ export default {
|
||||
else return;
|
||||
else if (this.show_week < this.max_week) this.show_week++;
|
||||
else return;
|
||||
this.getDays()
|
||||
this.getDays();
|
||||
},
|
||||
|
||||
// 刷新信息
|
||||
reflash() {
|
||||
this.$router.push({ name: "login" });
|
||||
},
|
||||
|
||||
// 打开dialog显示课程详情
|
||||
|
||||
// 打开dialog显示课程详情
|
||||
openDialog(data) {
|
||||
this.detail = data;
|
||||
},
|
||||
|
||||
// 关闭dialog
|
||||
|
||||
// 关闭dialog
|
||||
closeDialog() {
|
||||
this.detail = false;
|
||||
},
|
||||
|
||||
|
||||
//滑动改变周数
|
||||
swipeLeft(){
|
||||
if (this.show_week > 1)
|
||||
this.show_week--;
|
||||
this.getDays()
|
||||
swipeLeft() {
|
||||
if (this.show_week > 1) this.show_week--;
|
||||
this.getDays();
|
||||
},
|
||||
swipeRight(){
|
||||
if (this.show_week < this.max_week)
|
||||
this.show_week++;
|
||||
this.getDays()
|
||||
swipeRight() {
|
||||
if (this.show_week < this.max_week) this.show_week++;
|
||||
this.getDays();
|
||||
},
|
||||
|
||||
// 课程颜色
|
||||
lessonStyle(item) {
|
||||
return `background:#${this.bg_color[item.color]};color:#${this.font_color[item.color]}`
|
||||
|
||||
// 课程颜色
|
||||
lessonStyle(item) {
|
||||
return `background:#${this.bg_color[item.color]};color:#${
|
||||
this.font_color[item.color]
|
||||
}`;
|
||||
},
|
||||
|
||||
// 跳转到游戏
|
||||
goToGame() {
|
||||
this.$router.push('/game')
|
||||
},
|
||||
|
||||
// 获取当前周
|
||||
getCurrentWeek() {
|
||||
|
||||
// 跳转到游戏
|
||||
goToGame() {
|
||||
this.$router.push("/game");
|
||||
},
|
||||
|
||||
// 获取当前周
|
||||
getCurrentWeek() {
|
||||
// let start = new Date("2020-02-24 00:00").getTime();
|
||||
let start = 1582473600000
|
||||
let now = new Date().getTime();
|
||||
//计算出两个日期的天数差
|
||||
let days = Math.abs(Math.floor((now - start) / (1000 * 60 * 60 * 24)));
|
||||
let current_week;
|
||||
if (start >= now) {
|
||||
// 没开学
|
||||
this.current_week = 1;
|
||||
} else {
|
||||
// 开学后
|
||||
this.current_week = Math.floor(days / 7) + 1;
|
||||
}
|
||||
let start = 1582473600000;
|
||||
let now = new Date().getTime();
|
||||
//计算出两个日期的天数差
|
||||
let days = Math.abs(Math.floor((now - start) / (1000 * 60 * 60 * 24)));
|
||||
let current_week;
|
||||
if (start >= now) {
|
||||
// 没开学
|
||||
this.current_week = 1;
|
||||
} else {
|
||||
// 开学后
|
||||
this.current_week = Math.floor(days / 7) + 1;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取本周日期
|
||||
getDays() {
|
||||
const day_time = 1000 * 60 * 60 * 24,
|
||||
start = 1582473600000;
|
||||
let week_start_time = (this.show_week - 1) * 7 * day_time + start
|
||||
this.date_arr = []
|
||||
for(let i = 1; i <= 7; i++) {
|
||||
let current_day = new Date(week_start_time).getDate()
|
||||
if( current_day < 10) {
|
||||
current_day = '0' + current_day
|
||||
start = 1582473600000;
|
||||
let week_start_time = (this.show_week - 1) * 7 * day_time + start;
|
||||
this.date_arr = [];
|
||||
for (let i = 1; i <= 7; i++) {
|
||||
let current_day = new Date(week_start_time).getDate();
|
||||
if (current_day < 10) {
|
||||
current_day = "0" + current_day;
|
||||
}
|
||||
if (i == 1 || current_day == '01') {
|
||||
current_day = (new Date(week_start_time).getMonth() + 1) + '/' + current_day
|
||||
if (i == 1 || current_day == "01") {
|
||||
current_day =
|
||||
new Date(week_start_time).getMonth() + 1 + "/" + current_day;
|
||||
}
|
||||
this.date_arr.push(current_day)
|
||||
week_start_time += day_time
|
||||
this.date_arr.push(current_day);
|
||||
week_start_time += day_time;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 打开抽屉
|
||||
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() {
|
||||
this.init(true);
|
||||
this.init(true);
|
||||
},
|
||||
mounted() {},
|
||||
activated() {
|
||||
@ -341,7 +464,7 @@ export default {
|
||||
.lesson-warp {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
touch-action: pan-y!important;
|
||||
touch-action: pan-y !important;
|
||||
// max-width: 94%;
|
||||
.day-box {
|
||||
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 = {
|
||||
productionSourceMap: false,
|
||||
pwa: {
|
||||
name: 'Co-Create',
|
||||
// themeColor: '#e54d42',
|
||||
name: 'Cherry',
|
||||
themeColor: '#e54d42',
|
||||
workboxOptions: {
|
||||
skipWaiting: true
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user