Skip to content

N
national_museum_vod-H5
Commit 71a3fdcb authored by 乐宝呗666's avatar 乐宝呗666
Browse files
Options

添加功能

parent 187e0ddc
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1620 additions and 681 deletions
package.json
View file @ 71a3fdcb
......@@ -8,8 +8,10 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^4.8.0",
"qs": "^6.10.1",
"vant": "^2.12.6",
"vue": "^2.6.11",
"vue-router": "^3.5.1"
......
public/index.html
View file @ 71a3fdcb
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<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, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>国博建党百年展点播院线统计平台</title>
</head>
......
src/components/tabbar/index.vue
View file @ 71a3fdcb
......@@ -79,5 +79,12 @@ export default {
};
</script>
<style lang="scss" scoped>
<style scoped>
.my-tabbar {
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
</style>
\ No newline at end of file
src/config/env.js 0 → 100644
View file @ 71a3fdcb
let baseUrl="/mall/";
let routerMode='history';
let backToken = "back";
let frontToken = "front";
export {
baseUrl,
backToken,
frontToken,
routerMode
}
\ No newline at end of file
src/config/request.js 0 → 100644
View file @ 71a3fdcb
/**
* Created by supervisor on 2017/11/3.
*/
import axios from 'axios'
import router from '../router'
import {baseUrl} from './env'
import {
Toast
} from 'vant';
// Vue.use($msg)
//axios 拦截器 请求时的拦截
axios.interceptors.request.use(config => {
// 发送请求之前做一些处理
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0,
});
return config
}, error => {
// 当请求异常时做一些处理
return new Promise.reject(error)
})
// 响应时拦截
axios.interceptors.response.use(response => {
// 返回响应时做一些处理
return response
}, error => {
// 当响应异常时做一些处理
return Promise.resolve(error.response)
})
function errorState(status, data) {
Toast.clear() // 关闭 loading
if (status === 500 && data.message.indexOf("token invalid") !== -1) {
Toast({
message: '您的登录过期，将重新登录!',
onClose: () => {
//清除用户信息
localStorage.removeItem('backToken')
localStorage.removeItem('userId')
router.push({
path: '/',
query: {
redirect: router.history.current.fullPath
}
})
}
});
} else if (status === 401) {
Toast({
message: '您的用户权限已被禁用，请联系管理员!',
onClose: () => {
//这个时候点击确定后清除用户信息
localStorage.removeItem('backToken')
localStorage.removeItem('userId')
router.push({
path: '/',
query: {
redirect: router.history.current.fullPath
}
})
}
});
} else if (status === 500 && data.message.indexOf("not have permission") !== -1) {
Toast.fail("抱歉，你无权访问该页面!")
} else if (!data) {
Toast.fail("网络出小差咯~")
}
}
function successState() {
Toast.clear() //隐藏loading
}
const httpServer = (opts, data, file, timeout) => {
//如果是不需要登录就可以访问的接口 需要设置opts.open
let Public = {} //公共参数
let httpDefaultOpts = {
method: opts.method,
url: baseUrl + opts.url,
timeout: timeout ? timeout : 20000,
params: Object.assign(Public, data),
data: data,
headers: opts.headers || {},
};
httpDefaultOpts.headers["Access-control-Allow-Origin"] = "*";
httpDefaultOpts.headers["Access-Control-Allow-Headers"] = "content-type,x-requested-with";
let authToken = "";
if (opts.authType && opts.authType != "") {
if (opts.authType === "back") {
authToken =localStorage.getItem('token') || "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsInVzZXJfaWQiOiIxIiwiaXNzIjoiSUFUQSIsImV4cCI6MTYxNjY2NTkzOCwiaWF0IjoxNjE2NjUxNTM4fQ._nqZq0LMwkurIBKJtfX-imXLCxQSNwJ-ueGZ8iwW-0oAW880gY7PjNEfroYYQZ91v0u5yQb73Alzvy6EIp6GGg"
} else if (opts.authType === "front") {
authToken = localStorage.getItem("token");
}
httpDefaultOpts.headers["Authorization"] = authToken
}
if (opts.method === 'get') {
delete httpDefaultOpts.data
httpDefaultOpts.params.timestamp_static = new Date().getTime();
} else {
delete httpDefaultOpts.params
if (file) {
httpDefaultOpts.data = data;
}
}
let promise = new Promise(function (resolve, reject) {
Toast.loading({
message: '加载中...',
forbidClick: true,
duration: 0,
});
let markIndex = setTimeout(function () {
Toast.clear()
}, 10000)
axios(httpDefaultOpts).then((res) => {
Toast.clear()
clearTimeout(markIndex)
successState(res)
if (res) {
resolve(res)
errorState(res.status, res.data)
}
}).catch((response) => {
Toast.clear()
clearTimeout(markIndex)
if (response && response.response && response.response.status && response.response.data) {
errorState(response.response.status, response.response.data)
}
reject(response)
if (response.response.data) {
if (response.response.data.message) {
Toast.fail(response.response.data.message)
} else {
Toast.fail("操作失败!")
}
}
})
})
return promise
}
export default httpServer
\ No newline at end of file
src/main.js
View file @ 71a3fdcb
......@@ -3,7 +3,9 @@ import App from './App.vue'
import router from './router'
import './assets/style/public.scss'
import echarts from "echarts"
import qs from 'qs'
import http from '@/config/request'
import {baseUrl,backToken,frontToken} from './config/env'
import Vant from 'vant';
import 'vant/lib/index.css';
// 自定义tabbar
......@@ -12,6 +14,13 @@ Vue.component('my-tabbar',Mytabbar)
Vue.use(Vant);
Vue.prototype.$echarts = echarts
Vue.prototype.$qs = qs
Vue.prototype.$https = http
Vue.prototype.$baseUrl=baseUrl
Vue.prototype.backToken=backToken
Vue.prototype.frontToken=frontToken
Vue.config.productionTip = false
new Vue({
......
src/router/index.js
View file @ 71a3fdcb
......@@ -22,6 +22,14 @@ const routes= [
},
component: () => import('@/views/setTopBoxManage/login')
},
{
path: '/success',
name: 'success',
meta: {
title: '操作成功'
},
component: () => import('@/views/setTopBoxManage/success')
},
{
path: '/opt',
name: 'opt',
......@@ -71,4 +79,14 @@ const router = new VueRouter({
routes: routes,
mode: "history"
})
router.beforeEach((to, from, next) => {
let user = localStorage.getItem("token");
if (!user && to.path !=='/login') { // 通过vuex state获取当前的token是否存在
next({
path: '/login',
})
}else {
next();
}
})
export default router
src/views/setTopBoxManage/components/form.vue
View file @ 71a3fdcb
<template>
<div class="form-container">
<van-form @submit="onSubmit">
<van-field
class="field-form-item"
readonly
clickable
name="orgName"
:value="boxInfo.orgName"
label="机顶盒所属单位"
placeholder="请选择组织单位"
:right-icon="showOrg? 'arrow-up':'arrow-down'"
@click="showOrg = true"
:rules="[{ required: true}]"/>
<van-popup v-model="showOrg" position="bottom">
<van-picker
show-toolbar
:columns="orgList"
@confirm="onConfirmOrg"
@cancel="showOrg = false"
/>
</van-popup>
<van-field
class="field-form-item"
v-model="boxInfo.macURL"
name="macURL"
label="机顶盒Mac地址"
placeholder="请填写机顶盒Mac地址"
:rules="[{ required: true }]"
/>
<div class="form-page-button">
<van-button type="default" native-type="submit" v-if="actived==='1'">激活</van-button>
<van-button type="default" native-type="submit" v-if="actived==='2'">上报</van-button>
</div>
</van-form>
</div>
<div class="form-container">
<van-form @submit="onSubmit">
<van-field
class="field-form-item"
readonly
clickable
name="organName"
:value="boxInfo.organName"
label="机顶盒所属单位"
placeholder="请选择组织单位"
:right-icon="showOrg ? 'arrow-up' : 'arrow-down'"
@click="showOrg = true"
:rules="[{ required: true }]"
/>
<van-popup v-model="showOrg" position="bottom">
<van-picker
show-toolbar
:columns="orgNameList"
@confirm="onConfirmOrg"
@cancel="showOrg = false"
/>
</van-popup>
<van-field
class="field-form-item"
v-model="boxInfo.macURL"
name="macURL"
label="机顶盒Mac地址"
placeholder="请填写机顶盒Mac地址"
:rules="[{ required: true }]"
/>
<div class="form-page-button">
<van-button type="default" native-type="submit" v-if="actived === '1'"
>激活</van-button
>
<van-button type="default" native-type="submit" v-if="actived === '2'"
>上报</van-button
>
</div>
</van-form>
</div>
</template>
<script>
export default {
props:['actived'],
data(){
return {
boxInfo:{},
orgList: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
showOrg: false,
showUser: false,
}
export default {
props: ["actived"],
data() {
return {
boxInfo: {},
orgNameList: [],
orgList: [],
showOrg: false,
showUser: false,
};
},
watch: {},
mounted() {
this.getorganName();
},
methods: {
// 获取所属单位
getorganName() {
let vm = this;
vm.$https({
url: "boxOperation/getList",
method: "get",
authType: this.backToken,
})
.then((res) => {
if (res.data.resultCode === "200") {
vm.orgList = res.data.data;
vm.orgNameList = res.data.data.map((item) => item.organName);
}
})
.catch(function (err) {
console.log(err);
});
},
onConfirmOrg(value, index) {
this.boxInfo.organName = value;
this.boxInfo.organId = this.orgList[index].organId;
this.boxInfo.id = this.orgList[index].id;
this.showOrg = false;
},
onSubmit() {
if (this.actived === "1") {
// 激活
this.submitData("2");
} else {
// 上报
this.submitData("3");
}
},
submitData(status) {
let vm = this;
const param = {
organName: this.boxInfo.organName,
organId: this.boxInfo.organId,
id: this.boxInfo.id,
mac: this.boxInfo.macURL,
status: status,
};
vm.$https(
{
url: "boxOperation/update",
method: "put",
authType: this.backToken,
},
methods:{
onConfirmOrg(value) {
this.boxInfo.orgName = value;
this.showOrg = false;
},
onSubmit(values) {
console.log('submit', values,this.boxInfo);
if(this.actived==='1'){
// 调用激活接口
this.$toast.success('提交成功');
}else{
// 调用上报接口
this.$toast.success('提交成功');
}
},
}
}
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
// 调用激活接口
this.$router.replace("/success");
} else {
this.$toast(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
},
},
};
</script>
<style lang="scss">
.form-container{
.van-form {
padding: 24px;
background: #FFFFFF;
border-radius: 0 0 4px 4px;
.van-field {
background: #F5F5F5;
border-radius: 4px;
.van-field__left-icon {
margin-right: 12px;
}
}
.form-container {
.van-form {
padding: 24px;
background: #ffffff;
border-radius: 0 0 4px 4px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
.van-field__left-icon {
margin-right: 12px;
}
}
.form-page-button{
text-align: center;
background: #A4151D;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
.form-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
.field-form-item.van-cell{
display: block;
padding: 8px 0 16px 0;
background-color: transparent;
border-bottom: none;
.van-field__label{
width: 100%;
color: #333;
font-size: 14px;
font-weight: normal;
margin-bottom: 16px;
}
.van-field__value{
background: #F5F5F5;
border-radius: 4px;
padding: 8px 20px;
}
&::after {
border: none;
}
.van-field__control{
color: #333;
font-size: 14px;
font-weight: normal;
}
}
.van-tabs__nav--card {
margin: 0;
}
.field-form-item.van-cell {
display: block;
padding: 8px 0 16px 0;
background-color: transparent;
border-bottom: none;
.van-field__label {
width: 100%;
color: #333;
font-size: 14px;
font-weight: normal;
margin-bottom: 16px;
}
}
.van-field__value {
background: #f5f5f5;
border-radius: 4px;
padding: 8px 20px;
}
&::after {
border: none;
}
.van-field__control {
color: #333;
font-size: 14px;
font-weight: normal;
}
}
.van-tabs__nav--card {
margin: 0;
}
}
</style>
src/views/setTopBoxManage/login.vue
View file @ 71a3fdcb
<template>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">机顶盒运维客户端</div>
<div class="login-page-form">
<van-form @submit="onSubmit">
<van-field
v-model="userInfo.username"
name="用户名"
left-icon="manager"
placeholder="请输入用户名"
:rules="[{ required: true, message: '用户名不能为空' }]"
/>
<van-field
v-model="userInfo.password"
type="password"
name="密码"
left-icon="lock"
placeholder="请输入密码"
:rules="[{ required: true, message: '密码不能为空' }]"
/>
<div class="login-page-button">
<van-button type="default" native-type="submit">登录</van-button>
</div>
</van-form>
</div>
<div class="login-container">
<div class="login-bg"></div>
<div class="login-page">
<div class="login-page-body">
<div class="login-page-title">客户端登录</div>
<div class="login-page-form">
<van-form @submit="onSubmit">
<van-field
v-model="userInfo.username"
name="用户名"
left-icon="manager"
placeholder="请输入用户名"
:rules="[{ required: true, message: '用户名不能为空' }]"
/>
<van-field
v-model="userInfo.password"
type="password"
name="密码"
left-icon="lock"
placeholder="请输入密码"
:rules="[{ required: true, message: '密码不能为空' }]"
/>
<div class="login-page-button">
<van-button type="default" native-type="submit">登录</van-button>
</div>
</van-form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
userInfo:{}
}
},
methods:{
onSubmit(values) {
console.log('submit', values);
const isOpt = 2
if(isOpt==2){
this.$router.push('/opt')
}else{
this.$router.push('/commit')
}
export default {
data() {
return {
userInfo: {},
};
},
mounted() {},
methods: {
onSubmit() {
let vm = this;
let param = {
password: this.userInfo.password,
username: this.userInfo.username,
};
vm.$https(
{
url: "ajaxLogin",
method: "post",
authType: this.backToken,
},
}
}
</script>
<style lang="scss">
.login-container{
width: 100%;
height: 100%;
max-width: 1024px;
.login-bg{
width: 100%;
height: 100%;
margin: 0 auto;
background: #a4171d;
&:before{
display: inline-block;
content: "";
width: 100%;
height: 106px;
background: url('/images/topBox/bg-bottom.png') no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after{
display: inline-block;
content: "";
width: 100%;
height: 421px;
background: url('/images/topBox/bg-top.png') no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page{
height: 350px;
position: absolute;
bottom: 58px;
left: 24px;
right: 24px;
padding: 24px;
background: #FFFFFF;
box-shadow: 0 8px 20px 0 rgba(0,0,0,0.20);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #F5F5F5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
vm.$qs.stringify(param)
)
.then((res) => {
if (res.data.resultCode === "200") {
let data = res.data;
const isOpt = data.user.type;
localStorage.setItem("token", data.token);
localStorage.setItem("userInfo", JSON.stringify(data.user));
if (isOpt == "4") {
this.$router.push("/opt");
}
}
.login-page-title{
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button{
text-align: center;
background: #A4151D;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
if (isOpt == "2") {
this.$router.push("/commit");
}
} else {
this.$toast.fail(res.data.message);
}
})
.catch(function (err) {
console.log(err);
});
},
},
};
</script>
<style lang="scss">
.login-container {
width: 100%;
height: 100%;
max-width: 1024px;
.login-bg {
width: 100%;
height: 100%;
margin: 0 auto;
background: #a4171d;
&:before {
display: inline-block;
content: "";
width: 100%;
height: 106px;
background: url("/images/topBox/bg-bottom.png") no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 0;
}
&:after {
display: inline-block;
content: "";
width: 100%;
height: 421px;
background: url("/images/topBox/bg-top.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
}
.login-page {
height: 350px;
position: absolute;
bottom: 58px;
left: 24px;
right: 24px;
padding: 24px;
background: #ffffff;
box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.2);
border-radius: 8px;
.login-page-form {
padding-top: 24px;
.van-field {
background: #f5f5f5;
border-radius: 4px;
margin-bottom: 32px;
.van-field__left-icon {
margin-right: 12px;
}
}
}
}
}
.login-page-title {
font-size: 18px;
color: #333;
text-align: center;
margin: 24px 0;
}
.login-page-button {
text-align: center;
background: #a4151d;
border-radius: 4px;
position: absolute;
bottom: 40px;
left: 24px;
right: 24px;
box-sizing: border-box;
.van-button {
font-size: 16px;
color: #fff;
background-color: transparent;
border: none;
}
}
}
}
</style>
src/views/setTopBoxManage/opt.vue
View file @ 71a3fdcb
<template>
<div class="opt-container">
<div class="opt-page">
<van-tabs type="card" v-model="activeName">
<van-tab title="机顶盒激活" name="1">
<custom-form actived="1"></custom-form>
</van-tab>
<van-tab title="故障上报" name="2">
<custom-form actived="2"></custom-form>
</van-tab>
</van-tabs>
</div>
<div class="opt-container">
<div class="opt-page">
<van-tabs type="card" v-model="activeName">
<van-tab title="机顶盒激活" name="1">
<custom-form actived="1"></custom-form>
</van-tab>
<van-tab title="故障上报" name="2">
<custom-form actived="2"></custom-form>
</van-tab>
</van-tabs>
</div>
</div>
</template>
<script>
import CustomForm from './components/form'
export default {
components:{
CustomForm
},
data(){
return {
activeName:'1',
}
}
}
import CustomForm from "./components/form";
export default {
components: {
CustomForm,
},
data() {
return {
activeName: "1",
};
},
};
</script>
<style lang="scss">
.opt-container{
position: absolute;
top: 16px;
bottom: 16px;
left: 16px;
right: 16px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
.opt-page{
width: 100%;
height: 100%;
}
.van-tabs__nav--card {
margin: 0;
}
.van-tabs {
width: 100%;
height: 100%;
}
.van-tabs--card>.van-tabs__wrap {
height: 40px;
}
.van-tabs__nav--card .van-tab {
color: #333;
font-size: 16px;
border-right: none;
}
.van-tabs__nav--card {
height: 40px;
background: #EEEEEE;
border-radius: 8px 8px 0 0;
border: none;
}
.van-tabs__nav--card .van-tab.van-tab--active {
color:#fff;
background-color: #A4151D;
}
.van-tabs__nav--card .van-tab.van-tab--active:last-child {
border-top-right-radius: 8px;
}
.van-tabs__nav--card .van-tab.van-tab--active:first-child {
border-top-left-radius: 8px;
}
}
.opt-container {
position: absolute;
top: 16px;
bottom: 16px;
left: 16px;
right: 16px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
.opt-page {
width: 100%;
height: 100%;
}
.van-tabs__nav--card {
margin: 0;
}
.van-tabs {
width: 100%;
height: 100%;
}
.van-tabs--card > .van-tabs__wrap {
height: 40px;
}
.van-tabs__nav--card .van-tab {
color: #333;
font-size: 16px;
border-right: none;
}
.van-tabs__nav--card {
height: 40px;
background: #eeeeee;
border-radius: 8px 8px 0 0;
border: none;
}
.van-tabs__nav--card .van-tab.van-tab--active {
color: #fff;
background-color: #a4151d;
}
.van-tabs__nav--card .van-tab.van-tab--active:last-child {
border-top-right-radius: 8px;
}
.van-tabs__nav--card .van-tab.van-tab--active:first-child {
border-top-left-radius: 8px;
}
}
</style>
src/views/setTopBoxManage/success.vue 0 → 100644
View file @ 71a3fdcb
<template>
<div class="success-container">
<img src="images/applets/success.png" alt="" />
<p>操作成功</p>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss">
.success-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
img {
width: 50%;
margin-top: 200px;
}
p {
margin-top: 30px;
font-size: 18px;
color: #333;
}
}
</style>
src/views/user/admin.vue
View file @ 71a3fdcb
<template>
<div class="admin-conatiner">
<Header title="管理员信息"/>
<Header title="管理员信息" />
<ul>
<li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
<span>{{item.name}}</span>
<img v-if="item.name==='丁大大'" src="/images/applets/edit.png" alt />
<img v-if="item.name!=='丁大大'" src="/images/applets/detail.png" alt />
<span>{{item.userName}}</span>
<img v-if="item.id===currentUserId" src="/images/applets/edit.png" alt />
<img v-if="item.id!==currentUserId" src="/images/applets/detail.png" alt />
</li>
</ul>
<my-tabbar active="2"></my-tabbar>
......@@ -13,32 +13,58 @@
</template>
<script>
import Header from '@/components/Header/index.vue'
import Header from "@/components/Header/index.vue";
export default {
components:{Header},
components: { Header },
data() {
return {
list:[
{name:"丁大大"},
{name:"丁尔尔1"},
{name:"丁二二2"},
{name:"丁三三3"},
]
list: [],
currentUserId: JSON.parse(localStorage.getItem("userInfo")).id
};
},
mounted(){
mounted() {
this.getList();
},
methods:{
goDetail(item){
if(item.name==='丁大大'){
// 修改页面
this.$router.push({path:'/adminInfo',query:{id:item.name,disabled:false}})
}else{
// 详情页面
this.$router.push({path:'/adminInfo',query:{id:item.name,disabled:true}})
}
methods: {
// 获取管理员列表
getList() {
let vm = this;
let param = {
_index: 1,
_size: 10,
type: JSON.parse(localStorage.getItem("userInfo")).type
};
vm.$https(
{
url: "tUser/getPageList",
method: "get",
authType: this.backToken
},
param
)
.then(res => {
let data = res.data.data;
vm.list = data.records;
})
.catch(function(err) {
console.log(err);
});
},
goDetail(item) {
if (item.id === this.currentUserId) {
// 修改页面
this.$router.push({
path: "/adminInfo",
query: { id: item.id, disabled: false }
});
} else {
// 详情页面
this.$router.push({
path: "/adminInfo",
query: { id: item.id, disabled: true }
});
}
}
}
};
</script>
......@@ -47,11 +73,12 @@ export default {
.admin-conatiner {
width: 100%;
height: 100vh;
padding: 16px;
padding: 50px 16px 60px;
display: flex;
flex-direction: column;
box-sizing: border-box;
ul {
list-style: none;
margin-top: 44px;
}
li {
display: flex;
......@@ -63,8 +90,8 @@ export default {
color: #333333;
margin-top: 20px;
img {
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}
}
}
......
src/views/user/commit.vue
View file @ 71a3fdcb
......@@ -79,10 +79,12 @@ export default {
.home {
width: 100%;
height: 100vh;
padding: 16px;
padding: 50px 16px 60px;
display: flex;
flex-direction: column;
box-sizing: border-box;
.commit-container {
margin-top: 44px;
height: 100%;
/deep/.van-tabs--card>.van-tabs__wrap {
height: 40px;
.van-tabs__nav--card {
......
src/views/user/components/adminInfo.vue
View file @ 71a3fdcb
......@@ -5,7 +5,7 @@
<van-field
label="管理员姓名"
:disabled="disabled"
v-model="form.adminName"
v-model="form.userName"
placeholder="请输入管理员姓名"
input-align="right"
/>
......@@ -19,21 +19,21 @@
<van-field
label="固定电话"
:disabled="disabled"
v-model="form.tel"
v-model="form.telephone"
placeholder="请输入固定电话"
input-align="right"
/>
<van-field
label="微信"
:disabled="disabled"
v-model="form.wechat"
v-model="form.weChat"
placeholder="请输入微信"
input-align="right"
/>
<van-field
label="邮箱"
:disabled="disabled"
v-model="form.mail"
v-model="form.email"
placeholder="请输入邮箱"
input-align="right"
/>
......@@ -70,16 +70,64 @@ export default {
console.log("修改");
this.disabled = false;
}
this.getUserInfo()
},
methods: {
getUserInfo(){
let vm = this;
let param = {
id:this.adminId
};
vm.$https(
{
url: "tUser/getById",
method: "get",
authType: this.backToken
},param)
.then(res => {
if(res.data.resultCode==='200'){
this.form = res.data.data;
console.log(this.form)
}else{
this.$toast(res.data.message)
}
})
.catch(function(err) {
console.log(err);
});
},
onCancel() {
this.$router.go(-1);
},
// 提交数据
onSubmit() {
console.log(this.form);
this.$toast.success("信息修改成功");
this.$router.replace('/admin')
let vm = this;
let param = {};
for (let key in this.form) {
if (this.form[key]) {
param[key] = this.form[key];
}
}
console.log(param)
vm.$https(
{
url: "tUser/update",
method: "put",
authType: this.backToken
},param)
.then(res => {
if(res.data.resultCode==='200'){
this.form = res.data.data;
this.$toast.success("信息修改成功");
this.$router.replace('/admin')
}else{
this.$toast(res.data.message)
}
})
.catch(function(err) {
console.log(err);
});
}
}
};
......@@ -87,11 +135,10 @@ export default {
<style lang="scss" scoped>
.admin-detail-content {
padding: 24px 12px;
height: calc(100% - 150px);
padding: 50px 16px 0;
// height: calc(100% - 150px);
overflow-y: auto;
.input-box {
margin-top: 44px;
padding-bottom: 32px;
.van-cell {
line-height: 40px;
......
src/views/user/components/commitTab.vue
View file @ 71a3fdcb
This diff is collapsed.
src/views/user/components/contentTab.vue 0 → 100644
View file @ 71a3fdcb
<template>
<div class="learn-detail-content">
<div class="page-wrapper">
<form action="javascript:return true">
<van-search
type="search"
v-model="searchVal"
shape="round"
right-icon="search"
left-icon
placeholder="请输入学习内容名称"
@search="onRefresh"
/>
</form>
<div class="detail-body">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
offset="50"
>
<van-cell v-for="(item,index) in tableData" :key="index">
<van-swipe-cell :stop-propagation="true">
<van-card :title="item.name" :thumb="item.cover" @click="goDetail(item)"/>
<template #right>
<van-button
@click="optFn(item)"
square
:text="active?'启用':'删除'"
type="danger"
:class="{'delete-button':active===0,'enable-button':active===1}"
/>
</template>
</van-swipe-cell>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["active","proId"],
data() {
return {
searchVal:"",
pageNum: 1,
pageSize: 8,
tableData:[],
loading: false,
finished: false,
refreshing: false,
flag:true,
};
},
watch:{
"active"(val,oldVal){
this.onRefresh()
}
},
mounted() {
this.getList()
},
methods: {
// 获得数据接口
getList() {
let vm = this;
let param = {
_index:this.pageNum,
_size:this.pageSize,
isPublished: this.active!==1,
learningProjectId:this.proId,
nameOrCode: this.searchVal
};
vm.$https(
{
url: "learningContent/getPageList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
).then(res => {
if(res.data.resultCode==='200'){
vm.loading = false
let data = res.data.data;
vm.tableData = vm.flag ? data.records :vm.tableData.concat(data.records)
vm.flag = false
vm.refreshing = false;
vm.pageNum = vm.pageNum + 1
vm.finished = data.records.length < vm.pageSize ? true : false
vm.tableData = [...vm.tableData]
}else{
vm.$message({type:'error',message:res.data.message})
}
})
.catch(function(err) {
console.log(err);
})
},
// 列表的load上拉加载事件
onLoad() {
if(!this.flag){
console.log("加载数据");
this.loading = true;
this.flag = false;
this.getList();
}
},
onRefresh() {
// 清空列表数据
this.finished = false;
this.flag = true;
this.loading = true;
this.pageNum = 1;
this.getList();
},
optFn(item) {
if (this.active === 1) {
this.changeStatus(true,item.id)
} else {
this.changeStatus(false,item.id)
}
},
// 启用 禁用
changeStatus(flag,id){
let vm = this;
let param = {
id:id,
isPublish:flag
};
vm.$https(
{
url: `learningContent/enable/${id}`,
method: "put",
authType: this.backToken
},vm.$qs.stringify(param))
.then(res => {
if(res.data.resultCode==='200'){
this.$toast(res.data.message)
this.onRefresh()
}else{
this.$toast(res.data.message)
}
})
.catch(function(err) {
console.log(err);
});
},
goDetail(item) {
this.$router.push({path:'/learnDetail',query:{id:item.id}})
}
}
};
</script>
<style lang="scss" scoped>
.learn-detail-content {
height: calc(100vh - 100px);
.page-wrapper{
height: 100%;
}
.van-search {
padding: 20px 0;
.van-cell {
line-height: 30px;
}
}
/deep/.van-field__right-icon {
color: #ac9374;
.van-icon {
font-size: 20px;
}
}
.detail-body {
height: calc(100% - 80px);
overflow-y: auto;
.van-pull-refresh {
height: 100%;
}
.van-cell {
padding: 0;
}
.van-cell::after {
border-bottom: none;
}
}
.delete-button {
height: 100%;
background: #a4151d;
font-size: 16px;
}
.enable-button {
height: 100%;
background: #6bc20b;
font-size: 16px;
}
.van-button--danger {
border: none;
}
.van-card {
padding: 16px;
background-color: transparent;
border-bottom: 1px solid #eee;
.van-card__thumb {
width: 64px;
height: 40px;
}
.van-card__content {
min-height: 40px;
.van-card__title {
line-height: 40px;
font-size: 16px;
color: #333;
}
}
}
}
</style>
\ No newline at end of file
src/views/user/components/detailTab.vue deleted 100644 → 0
View file @ 187e0ddc
<template>
<div class="learn-detail-content">
<div class="page-wrapper">
<van-search
v-model="searchVal"
shape="round"
right-icon="search"
left-icon
placeholder="请输入搜索关键词"
/>
<div class="detail-body">
<van-swipe-cell v-for="(item,index) in list" :key="index" :stop-propagation="true">
<van-card :title="item.title" :thumb="item.image" @click="goDetail(item)"/>
<template #right>
<van-button
@click="optFn(item)"
square
:text="active?'启用':'删除'"
type="danger"
:class="{'delete-button':active===0,'enable-button':active===1}"
/>
</template>
</van-swipe-cell>
</div>
</div>
</div>
</template>
<script>
export default {
props: ["active"],
data() {
return {
searchVal:"",
list: [
{ image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容1" },
{ image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容2" },
{ image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容3" },
{ image: "https://img01.yzcdn.cn/vant/cat.jpeg", title: "学习内容4" }
]
};
},
mounted() {},
methods: {
optFn(item) {
if (this.active === 1) {
console.log("启用", item);
} else {
console.log("删除", item);
}
},
goDetail(item) {
console.log('12121',item);
this.$router.push({path:'/learnDetail',query:{id:item.title}})
}
}
};
</script>
<style lang="scss" scoped>
.learn-detail-content {
height: calc(100% - 150px);
overflow-y: auto;
.van-search {
padding: 20px 0;
.van-cell {
line-height: 30px;
}
}
/deep/.van-field__right-icon {
color: #ac9374;
.van-icon {
font-size: 20px;
}
}
.delete-button {
height: 100%;
background: #a4151d;
font-size: 16px;
}
.enable-button {
height: 100%;
background: #6bc20b;
font-size: 16px;
}
.van-button--danger {
border: none;
}
.van-card {
padding: 16px;
background-color: transparent;
border-bottom: 1px solid #eee;
.van-card__thumb {
width: 64px;
height: 40px;
}
.van-card__content {
min-height: 40px;
.van-card__title {
line-height: 40px;
font-size: 16px;
color: #333;
}
}
}
}
</style>
\ No newline at end of file
src/views/user/components/historyTab.vue
View file @ 71a3fdcb
<template>
<div class="history-page-content">
<div class="page-wrapper">
<div class="field-title">
<span>2021/03/05</span>
</div>
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<template #title>
<div>建档伟业<span class="author">丁一一</span>
</div>
</template>
<div class="content">
<!-- <div class="learnvideo">
<div class="learn-title">学习视频</div>
<div class="learn-body">
<video src=""></video>
<video src=""></video>
<video src=""></video>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
offset="50"
>
<van-cell v-for="(item,index) in tableData" :key="index">
<div class="field-title">
<span>{{item.createTime}}</span>
</div>
<van-collapse v-model="activeNames">
<van-collapse-item :name="item.id">
<template #title>
<div>{{item.name||'妹纸'}}<span class="author">{{item.username}}</span>
</div>
</template>
<div class="content">
<div class="learnvideo">
<div class="learn-title">学习视频</div>
<div class="learn-body">
<span v-for="(s,i) in item.videos" :key="i">
<video controls width='100%' height='100%' poster="images/applets/video.png">
<source :src="s" />
</video>
<!-- autoplay="autoplay"
x5-playsinline='true'
webkit-playsinline='true'
playsinline='true'
x-webkit-airplay='true'
x5-video-player-type='h5-page'
x5-video-player-fullscreen='true'
x5-video-ignore-metadata='true' -->
</span>
</div>
</div>
</div> -->
<div class="learnphoto">
<div class="learn-title">学习照片</div>
<div class="learn-body">
<img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
<img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
<img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
<div class="learnphoto">
<div class="learn-title">学习照片</div>
<div class="learn-body">
<img :src="s" v-for="(s,i) in item.images" :key="i" alt="" @click="sceneImg(item.images,i)">
</div>
</div>
</div>
<div class="learntextarea">
<div class="learn-title">有话对党说</div>
<div class="learn-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
<div class="learntextarea">
<div class="learn-title">有话对党说</div>
<div class="learn-body">{{item.content}}</div>
</div>
</div>
<!-- <van-image-preview :images="images"/> -->
</div>
</van-collapse-item>
<van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
</van-collapse>
</div>
</van-collapse-item>
</van-collapse>
</van-cell>
</van-list>
</van-pull-refresh>
</div>
</template>
<script>
import { ImagePreview } from "vant"; // 引入Vant图片预览组件
export default {
data() {
return {
activeNames: ['1'],
images: [
'https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg',
],
pageNum: 1,
pageSize: 8,
tableData:[],
loading: false,
finished: false,
refreshing: false,
flag:true,
};
},
mounted() {},
methods: {}
mounted() {
this.getList()
},
methods: {
// 图片预览
sceneImg(images,index) {
ImagePreview({
images:images, //需要预览的图片 URL 数组
showIndex:true, //是否显示页码
loop:false, //是否开启循环播放
startPosition:index //图片预览起始位置索引
})
},
// 获得数据接口
getList() {
let vm = this;
let param = {
_index:this.pageNum,
_size:this.pageSize,
orgId: JSON.parse(localStorage.getItem("userInfo")).orgId
};
vm.$https(
{
url: "interaction/getList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
).then(res => {
if(res.data.resultCode==='200'){
vm.loading = false
let data = res.data.data;
let arr=[]
data.records.forEach(item=>{
arr= item.images.split(',')
item.videos =[]
item.images =[]
item.audio =[]
arr.forEach((result)=>{
if (/\.(MP4|mp4)/.test(result)){
item.videos.push(result)
}else if (/\.(MP3|mp3)/.test(result)){
item.audio.push(result)
}else {
item.images.push(result)
}
})
})
vm.tableData = vm.flag ? data.records :vm.tableData.concat(data.records)
vm.flag = false
vm.refreshing = false;
vm.pageNum = vm.pageNum + 1
vm.finished = data.records.length < vm.pageSize ? true : false
vm.tableData = [...vm.tableData]
}else{
vm.$message({type:'error',message:res.data.message})
}
})
.catch(function(err) {
console.log(err);
})
},
// 列表的load上拉加载事件
onLoad() {
if(!this.flag){
console.log("加载数据");
this.loading = true;
this.flag = false;
this.getList();
}
},
onRefresh() {
// 清空列表数据
this.finished = false;
this.flag = true;
this.loading = true;
this.pageNum =1;
this.getList();
},
}
};
</script>
<style lang="scss" scoped>
.history-page-content {
padding: 24px 12px;
height: calc(100% - 150px);
height: calc(100% - 200px);
overflow-y: auto;
.van-pull-refresh {
overflow-y:auto;
}
.van-cell {
padding-left: 0;
padding-right: 0;
}
.van-hairline--top-bottom::after {
border-width: 0;
}
.field-title {
position: relative;
padding-bottom: 20px;
// padding-bottom: 20px;
span {
color: #333;
font-size: 16px;
......
src/views/user/components/learnContent.vue
View file @ 71a3fdcb
......@@ -4,10 +4,10 @@
<div class="content">
<van-tabs type="card" v-model="activeTab">
<van-tab title="启用列表">
<detail-tab :active="activeTab"/>
<content-tab :active="activeTab" :proId="proId"/>
</van-tab>
<van-tab title="禁用列表">
<detail-tab :active="activeTab"/>
<content-tab :active="activeTab" :proId="proId"/>
</van-tab>
</van-tabs>
</div>
......@@ -16,17 +16,21 @@
</template>
<script>
import detailTab from './detailTab.vue'
import contentTab from './contentTab.vue'
import Header from '@/components/Header/index.vue'
export default {
components:{Header,detailTab},
components:{Header,contentTab},
data() {
return {
activeTab: 0,
proId:''
};
},
mounted() {},
methods: {}
mounted() {
this.proId = this.$route.query.id;
},
methods: {
}
};
</script>
......@@ -34,10 +38,10 @@ export default {
.learn-content-container {
width: 100%;
height: 100vh;
padding: 16px;
padding: 50px 16px 16px;
box-sizing: border-box;
.content {
margin-top: 44px;
height: calc(100vh - 66px);
}
/deep/.van-tabs--card > .van-tabs__wrap {
height: 40px;
......
src/views/user/components/learnDetail.vue
View file @ 71a3fdcb
<template>
<div class="learn-detail-page-content">
<Header title="管理员详情"/>
<Header title="学习内容详情"/>
<div class="page-wrapper">
<div class="title-content">
<div class="row-body">
<div class="title-label">学习内容名称</div>
<div class="title-body">建党伟业</div>
<div class="title-body">{{list.name}}</div>
</div>
<div class="row-body">
<div class="title-label">学习内容宣传图</div>
<div class="title-body">
<img src="images/applets/bg_top.png" alt="">
<img :src="list.cover" alt="">
</div>
</div>
</div>
<van-collapse v-model="activeNames" accordion>
<van-collapse-item name="1" title="建党伟业">
<van-collapse-item :name="item.id" :title="item.name" v-for="(item,index) in list.exhibitionBoardList" :key="index">
<div class="content">
<div class="row-body">
<div class="title-label">展板版权方</div>
<div class="title-body">中国国家博物馆</div>
<div class="title-body">{{item.assetCopyrightOwnerName}}</div>
</div>
<div class="row-body">
<div class="title-label">展板宣传图</div>
<div class="title-body">
<img src="images/applets/bg_top.png" alt="">
<img :src="item.cover" alt="">
</div>
</div>
<div class="detail-body">
<div class="learn-title">展板简介</div>
<div class="learn-body textarea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
{{item.remarks}}
</div>
</div>
<div class="detail-body">
<div class="learn-title">展板视频</div>
<div class="learn-body">
<img src="images/applets/video.png" alt="">
<span>建党伟业-中文.mp4</span>
<span class="file-box" v-for="(s,i) in item.videoUrl" :key="i">
<video controls width='100%' height='100%' poster="images/applets/video.png">
<source :src="s.fileUrl" />
</video>
<span>{{s.fileName}}</span>
</span>
</div>
</div>
<div class="detail-body">
<div class="learn-title">展板音频</div>
<div class="learn-body">
<img src="images/applets/audio.png" alt="">
中文.mp3
<img src="images/applets/audio.png" alt="">
英文.mp3
<span class="file-box" v-for="(s,i) in item.guideAudioUrl" :key="i">
<audio controls width='100%' height='100%' poster="images/applets/audio.png">
<source :src="s.fileUrl" />
</audio>
<span>{{s.fileName}}</span>
</span>
</div>
</div>
</div>
</van-collapse-item>
<van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
</van-collapse>
</div>
</div>
......@@ -64,28 +70,60 @@ export default {
components:{Header},
data() {
return {
activeNames: ['1'],
images: [
'https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg',
],
activeNames: [],
list:[]
};
},
mounted() {},
methods: {}
mounted() {
this.id = this.$route.query.id;
this.getContentInfo()
},
methods: {
// 获取详情
getContentInfo(){
let vm = this;
let param = {
id:this.id
};
vm.$https(
{
url: `learningContent/get/${this.id}`,
method: "get",
authType: this.backToken
},param)
.then(res => {
if(res.data.resultCode==='200'){
this.list = res.data.data;
this.activeNames = this.list.exhibitionBoardList[0].id
this.list.exhibitionBoardList.forEach(item=>{
item.videoUrl =JSON.parse(item.videoUrl)
item.guideAudioUrl =JSON.parse(item.guideAudioUrl)
})
}else{
this.$toast(res.data.message)
}
})
.catch(function(err) {
console.log(err);
});
},
}
};
</script>
<style lang="scss" scoped>
.learn-detail-page-content {
padding: 24px;
overflow-y: auto;
padding: 50px 16px 16px;
box-sizing: border-box;
.page-wrapper {
margin-top: 44px;
padding-top: 20px;
width: 100%;
height: calc(100vh - 100px);
height: calc(100vh - 80px);
overflow-y: auto;
}
.title-content {
padding: 0 10px;
}
.row-body {
margin-bottom: 30px;
display: flex;
......@@ -124,7 +162,14 @@ export default {
.detail-body {
margin-bottom: 20px;
.learn-body{
display: flex;
flex-wrap: wrap;
padding-bottom: 12px;
.file-box {
width: 50%;
padding: 10px;
box-sizing: border-box;
}
img {
width: 32px;
height: auto;
......
src/views/user/editPsd.vue
View file @ 71a3fdcb
......@@ -2,38 +2,44 @@
<div class="edit-psd-conatiner">
<Header title="修改密码"/>
<div class="edit-container">
<div class="input-box">
<van-field
label="当前账号"
v-model="form.username"
placeholder="请输入当前账号"
input-align="right"
/>
<van-field
label="当前密码"
type="password"
v-model="form.password"
placeholder="请输入当前密码"
input-align="right"
/>
<van-field
label="新密码"
type="password"
v-model="form.newPsd"
placeholder="请输入新密码"
input-align="right"
/>
<van-field
label="再次输入新密码"
v-model="form.againPsd"
placeholder="请再次输入新密码"
input-align="right"
/>
</div>
<div class="admin-detail-button">
<van-button type="default" plain @click="onCancle">取消</van-button>
<van-button type="default" @click="onSubmit">提交</van-button>
</div>
<van-form @submit="onSubmit">
<div class="input-box">
<van-field
label="当前账号"
readonly
v-model="form.username"
placeholder="请输入当前账号"
input-align="right"
/>
<van-field
label="当前密码"
type="password"
v-model="form.oldPassWord"
placeholder="请输入当前密码"
input-align="right"
:rules="[{ required: true}]"
/>
<van-field
label="新密码"
type="password"
v-model="form.password"
placeholder="请输入新密码"
input-align="right"
:rules="[{ required: true}]"
/>
<van-field
label="再次输入新密码"
v-model="form.againPsd"
placeholder="请再次输入新密码"
input-align="right"
:rules="[{ required: true}]"
/>
</div>
<div class="admin-detail-button">
<van-button type="default" plain native-type="button" @click="onCancle">取消</van-button>
<van-button type="default" native-type="submit">提交</van-button>
</div>
</van-form>
</div>
<my-tabbar active="3"></my-tabbar>
</div>
......@@ -45,7 +51,9 @@ export default {
components:{Header},
data() {
return {
form: {}
form: {
username:JSON.parse(localStorage.getItem('userInfo')).userName
}
};
},
mounted() {
......@@ -53,13 +61,45 @@ export default {
},
methods: {
onCancle() {
this.form ={}
this.form ={
username:JSON.parse(localStorage.getItem('userInfo')).userName
}
},
// 提交数据
onSubmit() {
console.log(this.form);
this.$toast.success("密码已修改,请用新密码重新登录系统");
this.$router.replace('/login')
if(this.form.password !== this.form.againPsd){
this.$toast('两次输入的密码不一致')
return false
}
let vm = this;
let param = {
password: this.form.password,
oldPassWord: this.form.oldPassWord,
};
vm.$https(
{
url: "tUser/editPwd",
method: "put",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
if(res.data.resultCode==='200'){
localStorage.removeItem('token')
localStorage.removeItem('userInfo')
this.$toast.success("密码已修改,请用新密码重新登录系统");
this.$router.replace('/login')
}else{
this.$toast(res.data.message);
}
})
.catch(function(err) {
console.log(err);
});
}
}
};
......@@ -69,10 +109,12 @@ export default {
.edit-psd-conatiner {
width: 100%;
height: 100vh;
padding: 16px;
padding: 50px 16px 60px;
display: flex;
flex-direction: column;
box-sizing: border-box;
.edit-container {
margin-top: 44px;
}
.input-box {
......
src/views/user/learn.vue
View file @ 71a3fdcb
<template>
<div class="learn-conatiner">
<Header title="学习项目"/>
<ul>
<li v-for="(item,index) in list" :key="index" @click="goDetail(item)">
<Header title="学习项目" />
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
offset="5"
>
<van-cell v-for="(item,index) in list" :key="index" @click="goDetail(item)">
<span>{{item.name}}</span>
<img src="/images/applets/coming.png" alt />
</li>
</ul>
</van-cell>
</van-list>
</van-pull-refresh>
<my-tabbar active="1"></my-tabbar>
</div>
</template>
<script>
import Header from '@/components/Header/index.vue'
import Header from "@/components/Header/index.vue";
export default {
components:{Header},
components: { Header },
data() {
return {
list:[
{name:"十四大学习"},
{name:"十四大学习1"},
{name:"十四大学习2"},
{name:"十四大学习3"},
]
loading: false,
finished: false,
pageNum: 1,
pageSize: 10,
flag:true,
list: [],
refreshing: false,
};
},
mounted(){
mounted() {
this.getList();
},
methods:{
goDetail(item){
this.$router.push({path:'/learnContent',query:{id:item.name}})
methods: {
// 获取管理员列表
getList() {
let vm = this;
let param = {
_index: this.pageNum,
_size: this.pageSize,
type: JSON.parse(localStorage.getItem("userInfo")).type
};
vm.$https(
{
url: "learningProject/getPageList",
method: "post",
authType: this.backToken
},
vm.$qs.stringify(param)
)
.then(res => {
let data = res.data.data;
this.loading = false
vm.list = this.flag ? data.records : vm.list.concat(data.records)
this.pageNum = this.pageNum + 1
this.finished = data.records.length < this.pageSize ? true : false
this.flag = false;
this.refreshing = false;
})
.catch(function(err) {
console.log(err);
});
},
// 列表的load上拉加载事件
onLoad() {
if(!this.flag){
console.log("加载数据");
this.loading = true;
this.flag = false;
this.getList();
}
},
onRefresh() {
// 清空列表数据
this.finished = false;
this.flag = true;
this.loading = true;
this.pageNum =1;
this.getList();
},
goDetail(item) {
this.$router.push({ path: "/learnContent", query: { id: item.id } });
}
}
};
</script>
......@@ -40,13 +95,17 @@ export default {
.learn-conatiner {
width: 100%;
height: 100vh;
padding: 16px;
padding: 50px 16px 60px;
display: flex;
flex-direction: column;
box-sizing: border-box;
ul {
margin-top: 44px;
list-style: none;
.van-pull-refresh {
overflow-y:auto;
}
.van-cell {
padding: 0;
}
li {
.van-cell__value {
display: flex;
justify-content: space-between;
background: #f8f8f8;
......@@ -56,8 +115,8 @@ export default {
color: #333333;
margin-top: 20px;
img {
width: 24px;
height: 24px;
width: 24px;
height: 24px;
}
}
}
......
vue.config.js
View file @ 71a3fdcb
......@@ -18,7 +18,15 @@ module.exports = {
disableHostCheck: false,
https: false,
hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
// proxy: {}
proxy: {
'/mall': {
target: "http://192.168.110.67/mall",
changeOrigin: true,
pathRewrite: {
'^/mall': '/' // 重写接口
}
}
}
},
css: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment