376 lines
16 KiB
Vue
376 lines
16 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-nav></common-nav>
|
|
<view class="w-1200 flex justify-start items-start my-25 m-a">
|
|
<view class="flex-col flex-col justify-center items-center bg-white text-40 left-wrap pointer">
|
|
<view class="flex justify-center items-center" :class="[activeIndex === 0 ? 'active' : '' ]"
|
|
@click="changeActive(0)">
|
|
<i class="el-icon-upload2"/>
|
|
<text class="ml-20">我的上传</text>
|
|
</view>
|
|
<view class="flex justify-center items-center" :class="[activeIndex === 1 ? 'active' : '' ]"
|
|
@click="changeActive(1)">
|
|
<i class="el-icon-star-off"/>
|
|
<text class="ml-20">我的收藏</text>
|
|
</view>
|
|
<view class="flex justify-center items-center" :class="[activeIndex === 2 ? 'active' : '' ]"
|
|
@click="changeActive(2)">
|
|
<i class="el-icon-download"/>
|
|
<text class="ml-20">我的下载</text>
|
|
</view>
|
|
</view>
|
|
<view class="ml-35 bg-white p-40 flex-1">
|
|
<template v-if="mode === 'list'">
|
|
<view v-if="activeIndex === 0" class="flex justify-start items-center text-50">
|
|
<view class="flex justify-start items-center mr-35">
|
|
<text>累计上传</text>
|
|
<text class="text-main">{{ list.length }}</text>
|
|
<text>篇</text>
|
|
</view>
|
|
<el-button type="primary" @click="showAction">我要上传</el-button>
|
|
</view>
|
|
<view v-if="activeIndex === 1" class="flex justify-start items-center text-50">
|
|
<view class="flex justify-start items-center mr-35">
|
|
<text>共计收藏</text>
|
|
<text class="text-main">{{ list.length }}</text>
|
|
<text>篇</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="activeIndex === 2" class="flex justify-start items-center text-50">
|
|
<view class="flex justify-start items-center mr-35">
|
|
<text>累计下载</text>
|
|
<text class="text-main">{{ list.length }}</text>
|
|
<text>篇</text>
|
|
</view>
|
|
<el-button type="primary" @click="showAction">我要上传</el-button>
|
|
</view>
|
|
<view class="flex flex-col justify-start items-start w-100p">
|
|
<view v-for="(item, index) in list" :key="index" class="content-item-wrap pointer"
|
|
@click="navTo(`/pages/article/detail?id=${item._id}`)">
|
|
<template v-if="item.files && item.files.length > 0">
|
|
<template v-if="['doc', 'docx'].includes(item.files[0].split('.').pop())">
|
|
<file-word theme="outline" class="pointer" size="80" fill="#4a90e2" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else-if="['xls', 'xlsx'].includes(item.files[0].split('.').pop())">
|
|
<file-excel theme="outline" class="pointer" size="80" fill="#417505" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else-if="['pdf'].includes(item.files[0].split('.').pop())">
|
|
<file-pdf-one theme="outline" class="pointer" size="80" fill="#f5a623" strokeLinecap="square"/>
|
|
</template>
|
|
<template v-else>
|
|
<el-image :src="item.files[0]" style="width: 100px; height: 100px" fit="cover"
|
|
:preview-src-list="[item.files]"/>
|
|
</template>
|
|
</template>
|
|
<view class="content">
|
|
<text class="title">{{ item.name }}</text>
|
|
<view class="desc">
|
|
<text class="item">{{ item._add_time_str }}</text>
|
|
<text class="item">{{ item.viewNum }}人浏览</text>
|
|
<text class="item">{{ item.downloadNum }}次下载</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<!-- <view class="flex justify-start items-center">-->
|
|
<!-- <text class="text-50">上传文档</text>-->
|
|
<!-- <vk-data-upload v-model="form1.data.files" accept="image/*,application/pdf,application/msword,application/vnd.ms-excel,application/vnd.ms-powerpoint">-->
|
|
<!-- <template>-->
|
|
<!-- <el-button type="primary">点击上传</el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </vk-data-upload>-->
|
|
<!-- <u-upload :custom-btn="true" :show-upload-list="false" :action="">-->
|
|
<!-- <template v-slot:addBtn>-->
|
|
<!-- <el-button type="primary">点击上传</el-button>-->
|
|
<!-- </template>-->
|
|
<!-- </u-upload>-->
|
|
<!-- </view>-->
|
|
<vk-data-form v-model="form1.data" :rules="form1.props.rules" :action="form1.props.action"
|
|
:form-type="form1.props.formType" :columns='form1.props.columns' label-width="120px"
|
|
@success="addSuccess" :show-cancel="false">
|
|
<!-- <template v-slot:content="{ form, keyName }">-->
|
|
<!-- <div style="border: 1px solid #ccc;">-->
|
|
<!-- <Toolbar-->
|
|
<!-- style="border-bottom: 1px solid #ccc"-->
|
|
<!-- :editor="editor"-->
|
|
<!-- :defaultConfig="toolbarConfig"-->
|
|
<!-- mode="simple"-->
|
|
<!-- />-->
|
|
<!-- <Editor-->
|
|
<!-- style="height: 500px; overflow-y: hidden;"-->
|
|
<!-- v-model="form1.data.content"-->
|
|
<!-- :defaultConfig="editorConfig"-->
|
|
<!-- mode="simple"-->
|
|
<!-- @onCreated="onCreated"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
<!-- </template>-->
|
|
</vk-data-form>
|
|
</template>
|
|
<div class="text-center">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:total="total"
|
|
:page-size="pageSize"
|
|
@click="changePage"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
<common-footer></common-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {FileExcel, FilePdfOne, FileWord} from "@icon-park/vue";
|
|
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
|
|
|
|
export default {
|
|
name: "school",
|
|
components: {FilePdfOne, FileExcel, FileWord, Editor, Toolbar},
|
|
data() {
|
|
return {
|
|
total: 0,
|
|
pageSize: 5,
|
|
activeIndex: 0,
|
|
mode: 'list',
|
|
list: [],
|
|
cateList: [],
|
|
uploadFile: null,
|
|
editor: null,
|
|
toolbarConfig: {},
|
|
editorConfig: {placeholder: '请输入内容...'},
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
amount: 0,
|
|
content: ''
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "client/article/list/kh/add",
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{
|
|
key: "name",
|
|
title: "标题",
|
|
type: "text",
|
|
placeholder: "请输入标题"
|
|
},
|
|
{
|
|
key: "files",
|
|
title: "附件",
|
|
type: "file",
|
|
accept: '.xls,.xlsx,.doc,.docx,.ppt,.pptx,.pdf,.png,.jpg,.jpeg'
|
|
},
|
|
{
|
|
key: "parentId",
|
|
title: "分类",
|
|
type: "remote-select",
|
|
placeholder: "请选择分类",
|
|
showAll: true,
|
|
action: "client/article/category/pub/getList",
|
|
props: {
|
|
list: "rows",
|
|
value: "_id",
|
|
label: "name",
|
|
},
|
|
},
|
|
{key: "content", title: "内容", type: "editor"},
|
|
// {
|
|
// key: "content",
|
|
// title: "内容",
|
|
// type: "html",
|
|
// },
|
|
// {
|
|
// key: "amount",
|
|
// title: "金额",
|
|
// type: "text",
|
|
// placeholder: "请输入内容",
|
|
// },
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
name: [
|
|
{required: true, message: '名称不能为空', trigger: 'blur'},
|
|
],
|
|
parentId: [
|
|
{required: true, message: '请选择分类', trigger: 'blur'},
|
|
],
|
|
content: [
|
|
{required: true, message: '请输入内容', trigger: 'blur'},
|
|
],
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "",
|
|
// 是否显示表单的弹窗
|
|
show: false
|
|
}
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
onCreated(editor) {
|
|
this.editor = Object.seal(editor)
|
|
},
|
|
async getList(pageIndex = 1) {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/list/kh/getUserList',
|
|
pageIndex,
|
|
pageSize: this.pageSize
|
|
})
|
|
this.list = rows
|
|
},
|
|
async getCollectList(pageIndex = 1) {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/collect/kh/getList',
|
|
pageIndex,
|
|
pageSize: this.pageSize
|
|
})
|
|
this.list = rows.map(item => {
|
|
if (item.article) {
|
|
item._id = item.article._id
|
|
item.name = item.article.name
|
|
item._add_time_str = item.article._add_time_str
|
|
item.viewNum = item.article.viewNum
|
|
item.downloadNum = item.article.downloadNum
|
|
}
|
|
return item
|
|
})
|
|
},
|
|
async getDownloadList(pageIndex = 1) {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/list/kh/getDownloadList',
|
|
pageIndex,
|
|
pageSize: this.pageSize
|
|
})
|
|
this.list = rows.map(item => {
|
|
if (item.article) {
|
|
item._id = item.article._id
|
|
item.name = item.article.name
|
|
item._add_time_str = item.article._add_time_str
|
|
item.viewNum = item.article.viewNum
|
|
item.downloadNum = item.article.downloadNum
|
|
}
|
|
return item
|
|
})
|
|
},
|
|
changePage(page) {
|
|
if (this.activeIndex === 0) this.getList(page)
|
|
else if (this.activeIndex === 1) this.getCollectList(page)
|
|
else if (this.activeIndex === 2) this.getDownloadList(page)
|
|
},
|
|
changeActive(index) {
|
|
this.list = []
|
|
this.mode = 'list'
|
|
this.activeIndex = index
|
|
if (index === 0) this.getList()
|
|
else if (index === 1) this.getCollectList()
|
|
else if (index === 2) this.getDownloadList()
|
|
},
|
|
showAction() {
|
|
this.mode = 'action'
|
|
this.activeIndex = null
|
|
},
|
|
addSuccess() {
|
|
this.mode = 'list'
|
|
this.activeIndex = 0
|
|
this.getList()
|
|
},
|
|
navTo(url) {
|
|
vk.navigateTo({url})
|
|
}
|
|
// beforeUpload(file) {
|
|
// this.uploadFile = file
|
|
// // return false
|
|
// },
|
|
// doUpload() {
|
|
// vk.uploadFile({
|
|
// title: '上传中',
|
|
// filePath: this.uploadFile,
|
|
// success(res) {
|
|
// console.log(res)
|
|
// }
|
|
// })
|
|
// }
|
|
},
|
|
onLoad() {
|
|
if (!vk.getVuex('$user.userInfo.mobile')) {
|
|
this.$confirm('请先绑定手机号', '提示', {
|
|
confirmButtonText: '确定',
|
|
showCancelButton: false,
|
|
type: 'warning'
|
|
}).then(() => {
|
|
vk.redirectTo(`/pages/auth/login/wechat?state=jjx_` + vk.getVuex('$user.userInfo.accountType'))
|
|
}).catch(() => {
|
|
vk.redirectTo(`/pages/auth/login/wechat?state=jjx_` + vk.getVuex('$user.userInfo.accountType'))
|
|
})
|
|
return
|
|
}
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
<style src="@wangeditor/editor/dist/css/style.css"></style>
|
|
|
|
<style lang="scss" scoped>
|
|
.left-wrap {
|
|
width: 240px;
|
|
|
|
view {
|
|
padding: 20px;
|
|
}
|
|
|
|
.active {
|
|
background-color: #a92924;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.content-item-wrap {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
margin: 30px 0;
|
|
|
|
.content {
|
|
margin-left: 25px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
flex-direction: column;
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 14px;
|
|
color: #bbb;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
margin-top: 10px;
|
|
|
|
.item {
|
|
padding: 0 10px;
|
|
border-right: 2px solid #bbb;
|
|
}
|
|
|
|
:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
:last-child {
|
|
border-right: none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |