You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
282 lines
7.0 KiB
282 lines
7.0 KiB
5 days ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view :class="[{'not-auth': !per}]">
|
||
|
|
<view class="filter">
|
||
|
|
<uni-search-bar class="search" radius="30" placeholder="请输入方案名称" clearButton="auto" cancelButton="none" v-model="keyword" />
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<ul class="tab">
|
||
|
|
<li v-for="(tab, i) in classifications.slice(0, 4)" :class="{active: active === tab.id}" @click="tabChange(tab)">{{ tab.classificationName }}</li>
|
||
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="typeVisible = true"></uni-icons>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<view v-if="list.length" class="list">
|
||
|
|
<view v-for="(item, i) in list" class="item" @click="toDetail(item)">
|
||
|
|
<view class="c-name ell">{{ item.title }}</view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="info">
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">产品：</view>
|
||
|
|
<view class="val ell-wrap">
|
||
|
|
<view v-if="!item.toggle" class="product ell">{{ item.productNames }}</view>
|
||
|
|
<view v-else class="product" v-html="item.productNamesHtml"></view>
|
||
|
|
<view v-if="item.productNames && item.productNames.length > 14" class="toggle" @click.stop="toggle(item)">{{ item.toggle ? '收起' : '展开' }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">更新日期：</view>
|
||
|
|
<view class="val">{{ item.updateTime }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<view class="name">适用专业：</view>
|
||
|
|
<view class="val">{{ item.applicableMajor }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- <view class="detail" @click.stop="toEmail(i)">下载</view> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<empty v-else></empty>
|
||
|
|
|
||
|
|
<view :class="['type-popup', {active: typeVisible}]">
|
||
|
|
<uni-icons class="close" type="closeempty" size="20" color="#757575" @click="closeType"></uni-icons>
|
||
|
|
<view class="title">所属分类</view>
|
||
|
|
<view class="types">
|
||
|
|
<view v-for="(item, i) in classifications" :key="i" :class="['item', {active: active == item.id}]" @click="classificationClick(item)">{{ item.classificationName }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<notAuth v-if="!per"></notAuth>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { schemeList, queryClassificationByType } from '@/apis/modules/article.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
per: true, // 是否有权限
|
||
|
|
active: '',
|
||
|
|
typeVisible: false,
|
||
|
|
classifications: [],
|
||
|
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
||
|
|
status: 'more', // 上拉加载状态 more|loading|noMore
|
||
|
|
searchTimer: null,
|
||
|
|
articleNameSort: 'desc',
|
||
|
|
keyword: '',
|
||
|
|
list: [],
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword () {
|
||
|
|
clearTimeout(this.searchTimer)
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.initList()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onPullDownRefresh() {
|
||
|
|
this.initList()
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}, 1500)
|
||
|
|
},
|
||
|
|
// 上拉加载
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.reachBottom >= 0) {
|
||
|
|
this.reachBottom = 1
|
||
|
|
this.status = 'loading'
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.per = true
|
||
|
|
this.keyword = ''
|
||
|
|
this.active = ''
|
||
|
|
this.initRole()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 初始化权限
|
||
|
|
initRole() {
|
||
|
|
const auth = uni.getStorageSync('auth')
|
||
|
|
if (!auth.includes('工作台:方案')) {
|
||
|
|
this.per = false
|
||
|
|
this.list = [
|
||
|
|
{
|
||
|
|
title: '智信云',
|
||
|
|
productNames: '智信云师资培训班',
|
||
|
|
applicableMajor: 'python实训系统',
|
||
|
|
updateTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '智信云',
|
||
|
|
productNames: '智信云师资培训班智信云师资培训班',
|
||
|
|
applicableMajor: 'python实训系统',
|
||
|
|
updateTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '智信云智信云',
|
||
|
|
productNames: '智信云师资培训班智信云师资培训班',
|
||
|
|
applicableMajor: 'python实训系统',
|
||
|
|
updateTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '智信云',
|
||
|
|
productNames: '智信云师资培训班智信云师资培训班',
|
||
|
|
applicableMajor: 'python实训系统实训系统',
|
||
|
|
updateTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
]
|
||
|
|
} else {
|
||
|
|
this.initList()
|
||
|
|
this.getClassification()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
schemeList({
|
||
|
|
keyWord: this.keyword,
|
||
|
|
pageNum: this.page,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
querySource: 4,
|
||
|
|
classificationId: this.active
|
||
|
|
}).then(({ data }) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
|
||
|
|
const list = data.records
|
||
|
|
list.forEach(e => {
|
||
|
|
if (e.productNames) {
|
||
|
|
e.toggle = e.productNames.length < 14 // 超过了14个字才需要显示展开按钮
|
||
|
|
e.productNamesHtml = e.productNames.split(',').join('<br>')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.list = this.reachBottom > 0 ? [...this.list, ...list] : list
|
||
|
|
this.page++ // 每次获取了数据后page+1
|
||
|
|
const noMore = this.list.length === data.total // 是否加载完所有数据
|
||
|
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
||
|
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
|
||
|
|
}).catch(e => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initList() {
|
||
|
|
this.page = 1
|
||
|
|
this.reachBottom = 0
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
// 获取所属分类
|
||
|
|
getClassification() {
|
||
|
|
queryClassificationByType(3).then(({ data }) => {
|
||
|
|
this.classifications = [
|
||
|
|
{
|
||
|
|
id: '',
|
||
|
|
classificationName: '不限'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
this.classifications.push(...data)
|
||
|
|
}).catch(e => {})
|
||
|
|
},
|
||
|
|
// 所属分类点击回调
|
||
|
|
classificationClick(item, query) {
|
||
|
|
this.active = item.id
|
||
|
|
query && this.initList()
|
||
|
|
},
|
||
|
|
// 关闭所属分类弹框
|
||
|
|
closeType() {
|
||
|
|
this.typeVisible = false
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// tab切换
|
||
|
|
tabChange(tab) {
|
||
|
|
this.active = tab.id
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// 跳转详情
|
||
|
|
toDetail(item) {
|
||
|
|
this.$util.to(`/team/scheme/scheme?id=` + item.id)
|
||
|
|
},
|
||
|
|
// 发送邮箱
|
||
|
|
toEmail(id) {
|
||
|
|
this.$util.to(`../send/send?id=${id}`)
|
||
|
|
},
|
||
|
|
// 展开
|
||
|
|
toggle(item) {
|
||
|
|
item.toggle = !item.toggle
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.tab {
|
||
|
|
position: relative;
|
||
|
|
justify-content: flex-start;
|
||
|
|
li {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
}
|
||
|
|
.icon {
|
||
|
|
position: absolute;
|
||
|
|
top: 32rpx;
|
||
|
|
right: 44rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.list {
|
||
|
|
background-color: #fff;
|
||
|
|
.item {
|
||
|
|
padding: 20rpx 40rpx;
|
||
|
|
border-bottom: 1px solid #f1f1f1;
|
||
|
|
}
|
||
|
|
.c-name {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.line {
|
||
|
|
display: flex;
|
||
|
|
padding: 10rpx 0;
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
width: 140rpx;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.val {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.product {
|
||
|
|
max-width: 67vw;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
&.ell {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.toggle {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #0e92ef;
|
||
|
|
}
|
||
|
|
.detail {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #1f83ff;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|