281 lines
7.2 KiB
Vue
281 lines
7.2 KiB
Vue
<template>
|
||
<view class="detail-content">
|
||
<u-section title="发布记录" sub-title="筛选"
|
||
color="#a3d4fe" fontSize="40" subColor="#cdfbf2">
|
||
<template slot="right">
|
||
<image @click="showSift = true" class="dc-sift" src="/static/sift.png"></image>
|
||
</template>
|
||
</u-section>
|
||
<scroll-view :scrollTop="scrollTop" :scrollY="true" class="shareList"
|
||
scroll-with-animation @scroll="scroll">
|
||
<u-swipe-action :index="index" v-for="(item, index) in shareList"
|
||
:key="item.id" @click="handleClick" bgColor="#eee" @content-click="contentClick"
|
||
:options="swipeOptions">
|
||
<view class="share-item" :class="currentClickIndex===index?'change-morphology':''">
|
||
<view class="si-left">
|
||
<u-lazy-load border-radius="16" class="sil-image" :height="currentClickIndex===index? 200 : 140"
|
||
:image="getImagePath(item.path)" @click.native.stop="previewImage(item.path)"></u-lazy-load>
|
||
</view>
|
||
<view class="si-right">
|
||
<text :style="{color: statusList[item.reviewStatus]?statusList[item.reviewStatus].color:'#61affe'}">
|
||
{{ statusList[item.reviewStatus]?statusList[item.reviewStatus].name:'未知' }}
|
||
</text>
|
||
<text>{{ dateFormat(item.createtime) }}</text>
|
||
</view>
|
||
</view>
|
||
</u-swipe-action>
|
||
<u-loadmore @loadmore="getMore" :status="isFinish" color="#b3a0da" marginTop="30" marginBottom="20" />
|
||
</scroll-view>
|
||
<view @click="goTop">
|
||
<u-back-top :scrollTop="oldScrollTop" zIndex="100" :iconStyle="{ color: '#fff' }"
|
||
:customStyle="{background: 'linear-gradient(180deg, rgba(56,45,79,1) 0%, #b3a0da 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
||
</view>
|
||
<u-select v-model="showSift" :list="statusList" @confirm="selectSift" :defaultValue="[siftIndex]"
|
||
confirm-color="#94d500" labelName="name" valueName="value"></u-select>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
import { tools } from '@/utils/utils.js';
|
||
export default {
|
||
data(){
|
||
return{
|
||
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
||
isFinish: 'nomore',
|
||
form: {
|
||
size: 10,
|
||
current: 1,
|
||
reviewStatus: ''
|
||
},
|
||
currentClickIndex: '',
|
||
// 滚动顶部
|
||
scrollTop: 0,
|
||
oldScrollTop: 0,
|
||
// 生成/消费记录
|
||
shareList: [],
|
||
// 单元滑动格删除样式
|
||
swipeOptions: [{text:'删除',style:{backgroundColor:'#dd524d',marginRight: '-2rpx'}}],
|
||
// 状态列表
|
||
statusList: [
|
||
{name: '全部', color: '#61affe', value: ''},
|
||
{name: '审核中', color: '#fca130', value: 1},
|
||
{name: '通过', color: '#49cc90', value: 2},
|
||
{name: '未通过', color: '#f93e3e', value: 3},
|
||
{name: '已推荐', color: '#49cc90', value: 4},
|
||
{name: '取消推荐', color: '#fca130', value: 5},
|
||
],
|
||
// 筛选下标
|
||
siftIndex: 0,
|
||
// 筛选显示
|
||
showSift: false,
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods:{
|
||
// 图片格式化
|
||
getImagePath(path){
|
||
if(!path) return;
|
||
let index = path?.indexOf('?');
|
||
let judge = path?.includes(configService.anotherAliUrl);
|
||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.staticIp+path);
|
||
},
|
||
// 滚动回顶部
|
||
goTop() {
|
||
this.scrollTop = this.oldScrollTop;
|
||
this.$nextTick(()=>{
|
||
this.scrollTop = 0;
|
||
});
|
||
},
|
||
// 滚动监听
|
||
scroll(e){
|
||
this.oldScrollTop = e.detail.scrollTop;
|
||
},
|
||
// 时间格式化
|
||
dateFormat(time){
|
||
let date = new Date(time);
|
||
let month = date.getMonth()+1,
|
||
day = date.getDate(),
|
||
hour = date.getHours(),
|
||
minute = date.getMinutes(),
|
||
second = date.getSeconds();
|
||
return `${date.getFullYear()}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`;
|
||
},
|
||
// 点击按钮
|
||
async handleClick(itemIndex, functionIndex){
|
||
// 删除
|
||
if(functionIndex === 0) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `是否确认删除该作品发布？`,
|
||
confirmColor: '#94d500',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
let res = await that.$api.deleteReleases(that.shareList[itemIndex].id);
|
||
if(res?.success){
|
||
that.currentClickIndex = '';
|
||
that.shareList.splice(itemIndex, 1);
|
||
that.$emit('toast',{type:'success',title: "发布记录删除成功!"});
|
||
}else{
|
||
that.$emit('toast',{type:'error',title: "发布记录删除失败!"});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
// 内容点击
|
||
contentClick(index){
|
||
this.currentClickIndex = this.currentClickIndex===index ? '' : index;
|
||
},
|
||
// 预览图片
|
||
previewImage(path){
|
||
tools.methods.lookImage(0,[this.getImagePath(path)]);
|
||
},
|
||
// 加载更多
|
||
getMore(){
|
||
if(this.isFinish === 'nomore') return;
|
||
this.form.current++;
|
||
this.getShareList();
|
||
},
|
||
// 获取生产记录列表
|
||
async getShareList(){
|
||
this.isFinish = 'loading';
|
||
let res = await this.$api.getReleases(this.form);
|
||
if(res?.success){
|
||
const { records, size, total, current } = res.data;
|
||
if(current === 1) this.shareList = records;
|
||
else this.shareList.push(...records);
|
||
this.isFinish = size*current >= total ? 'nomore' : 'loadmore';
|
||
}else{
|
||
this.$emit('toast',{type:'error',title: "发布记录获取失败!"});
|
||
this.isFinish = 'loadmore';
|
||
}
|
||
},
|
||
// 初始化
|
||
init(){
|
||
this.form = {size: 10, current: 1, reviewStatus: ''};
|
||
this.getShareList();
|
||
},
|
||
// 筛选
|
||
selectSift(e){
|
||
const value = e[0].value;
|
||
this.siftIndex = value === '' ? 0 : value;
|
||
this.form = {size: 10, current: 1, reviewStatus: value};
|
||
this.currentClickIndex = '';
|
||
this.getShareList();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-content{
|
||
width: 800rpx;
|
||
height: 100vh;
|
||
padding: 50rpx 50rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
.shareList{
|
||
margin: 30rpx 0;
|
||
width: 100%;
|
||
height: 92vh;
|
||
.share-item{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin: 20rpx;
|
||
.si-left{
|
||
transition: 0.3s;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.sil-image{
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
}
|
||
}
|
||
.si-right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
height: 140rpx;
|
||
justify-content: space-around;
|
||
color: #b3a0da;
|
||
text{
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.change-morphology{
|
||
.si-left{
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: 0.5s;
|
||
.sil-image{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
}
|
||
.si-right{
|
||
width: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text{
|
||
margin-bottom: 10rpx;
|
||
margin-right: 0rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dc-sift{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-bottom: -6rpx;
|
||
filter: drop-shadow(0 0 14rpx #4d6578);
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.9;
|
||
}
|
||
&:active{
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
}
|
||
.u-back-top{
|
||
cursor: pointer;
|
||
&:hover{
|
||
box-shadow: 0 0 20rpx #9989bb;
|
||
}
|
||
&:active{
|
||
box-shadow: 0 0 10rpx #9989bb;
|
||
}
|
||
}
|
||
::v-deep .u-swipe-action{
|
||
border-radius: 10rpx;
|
||
margin: 0 0 20rpx;
|
||
}
|
||
::v-deep .u-select__header__btn{
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.9;
|
||
}
|
||
&:active{
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
::v-deep .u-more-text{
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
</style> |