265 lines
10 KiB
Vue
265 lines
10 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
<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-download"/>
|
|
<text class="ml-20">我的收藏</text>
|
|
</view>
|
|
<view class="flex justify-center items-center" :class="[activeIndex === 2 ? 'active' : '' ]"
|
|
@click="changeActive(2)">
|
|
<i class="el-icon-star-off"/>
|
|
<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 pointer w-100p">
|
|
<view v-for="(item, index) in list" :key="index" class="content-item-wrap">
|
|
<file-word theme="outline" size="80" fill="#4a90e2" strokeLinecap="square"/>
|
|
<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>
|
|
<text class="item">{{
|
|
item.amount === 0 ? '免费下载' : `${item.amount}元下载`
|
|
}}
|
|
</text>
|
|
<!-- <text class="item">{{ item._add_time_str }}</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"></vk-data-form>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<common-footer></common-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {FileWord} from "@icon-park/vue";
|
|
|
|
export default {
|
|
name: "school",
|
|
components: {FileWord},
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
mode: 'list',
|
|
list: [],
|
|
cateList: [],
|
|
uploadFile: null,
|
|
form1: {
|
|
// 表单请求数据，此处可以设置默认值
|
|
data: {
|
|
amount: 0,
|
|
},
|
|
// 表单属性
|
|
props: {
|
|
// 表单请求地址
|
|
action: "client/article/list/kh/add",
|
|
// 表单字段显示规则
|
|
columns: [
|
|
{
|
|
key: "name",
|
|
title: "标题",
|
|
type: "text",
|
|
placeholder: "请输入标题"
|
|
},
|
|
{
|
|
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",
|
|
placeholder: "请输入内容"
|
|
},
|
|
{
|
|
key: "amount",
|
|
title: "金额",
|
|
type: "text",
|
|
placeholder: "请输入内容",
|
|
},
|
|
],
|
|
// 表单验证规则
|
|
rules: {
|
|
name: [
|
|
{required: true, message: '名称不能为空', trigger: 'blur'},
|
|
],
|
|
},
|
|
// add 代表添加 update 代表修改
|
|
formType: "",
|
|
// 是否显示表单的弹窗
|
|
show: false
|
|
}
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/list/kh/getUserList'
|
|
})
|
|
this.list = rows
|
|
},
|
|
async getCollectList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/article/collect/kh/getList'
|
|
})
|
|
this.list = rows
|
|
},
|
|
changeActive(index) {
|
|
this.list = []
|
|
this.mode = 'list'
|
|
this.activeIndex = index
|
|
if (index === 0) this.getList()
|
|
else if (index === 1) this.getCollectList()
|
|
},
|
|
showAction() {
|
|
this.mode = 'action'
|
|
this.activeIndex = null
|
|
},
|
|
addSuccess() {
|
|
this.mode = 'list'
|
|
this.activeIndex = 0
|
|
this.getList()
|
|
}
|
|
// beforeUpload(file) {
|
|
// this.uploadFile = file
|
|
// // return false
|
|
// },
|
|
// doUpload() {
|
|
// vk.uploadFile({
|
|
// title: '上传中',
|
|
// filePath: this.uploadFile,
|
|
// success(res) {
|
|
// console.log(res)
|
|
// }
|
|
// })
|
|
// }
|
|
},
|
|
onLoad() {
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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> |