311 lines
8.2 KiB
Vue
311 lines
8.2 KiB
Vue
|
<!-- 生成记录 -->
|
|||
|
|
<template>
|
|||
|
|
<!-- #ifdef APP -->
|
|||
|
|
<view class="share-detail" :style="{ backgroundImage: `url(${myFileUrl+background})`,paddingTop: CustomBar+'rpx' }">
|
|||
|
|
<view class="app-top" :style="{ height: CustomBar+'rpx',
|
|||
|
|
background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifndef APP -->
|
|||
|
|
<view class="share-detail" :style="{ backgroundImage: `url(${myFileUrl+background})` }">
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="sdt-top">
|
|||
|
|
<view class="mobile-logo" :style="{backgroundColor: `rgba(255, 255, 255,${topLevel})`}">
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<u-icon name="arrow-left" size="40" class="back" @click="back"
|
|||
|
|
:color="topLevel===0? '#f9f9f9' : `rgba(194, 234, 4,${topLevel})`"></u-icon>
|
|||
|
|
<image :src="myFileUrl+logo"></image>
|
|||
|
|
<view style="width: 75rpx;"></view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<image :src="myFileUrl+logo"></image>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
<view class="detail-content">
|
|||
|
|
<u-section title="发布记录" sub-title="筛选"
|
|||
|
|
color="#befda1" fontSize="34" subColor="#cdfbf2">
|
|||
|
|
<template #right>
|
|||
|
|
<image @click="showSift = true" class="dc-sift" src="/static/sift.png"></image>
|
|||
|
|
</template>
|
|||
|
|
</u-section>
|
|||
|
|
<scroll-view :scroll-top="scrollTop" :scrollY="true" class="shareList"
|
|||
|
|
@scroll="scroll" scroll-with-animation>
|
|||
|
|
<u-swipe-action :index="index" v-for="(item, index) in shareList"
|
|||
|
|
:key="item.id" @click="handleClick" bgColor="#3e3256"
|
|||
|
|
:options="[{text:'删除',style:{backgroundColor:'#dd524d',marginRight: '-2rpx'}}]">
|
|||
|
|
<view class="share-item">
|
|||
|
|
<view class="si-left">
|
|||
|
|
<u-lazy-load border-radius="16" class="sil-image"
|
|||
|
|
:image="item.path" @click="previewImage(item.path)"></u-lazy-load>
|
|||
|
|
</view>
|
|||
|
|
<view class="si-right">
|
|||
|
|
<text :style="{color: statusList[item.reviewStatus].color}">
|
|||
|
|
{{ 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>
|
|||
|
|
</view>
|
|||
|
|
<view @click="goTop">
|
|||
|
|
<u-back-top :scrollTop="scrollTop" 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>
|
|||
|
|
<u-toast ref="uToast"></u-toast>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import configService from '@/common/config.service.js';
|
|||
|
|
import { tools } from '@/utils/utils.js';
|
|||
|
|
export default {
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
// 基础路径
|
|||
|
|
myFileUrl: configService.fileUrl + 'pixel/my/',
|
|||
|
|
// 我的页面背景
|
|||
|
|
background: 'background.png',
|
|||
|
|
// logo图标
|
|||
|
|
logo: 'logo.png',
|
|||
|
|
// 顶部距离等级
|
|||
|
|
topLevel: 0,
|
|||
|
|
// 是否结束——loadmore加载更多，loading加载中，nomore无更多
|
|||
|
|
isFinish: 'nomore',
|
|||
|
|
form: {
|
|||
|
|
size: 10,
|
|||
|
|
current: 1,
|
|||
|
|
reviewStatus: ''
|
|||
|
|
},
|
|||
|
|
// 滚动顶部
|
|||
|
|
scrollTop: 0,
|
|||
|
|
// 生成/消费记录
|
|||
|
|
shareList: [],
|
|||
|
|
// 状态列表
|
|||
|
|
statusList: [
|
|||
|
|
{name: '全部', color: '#61affe', value: ''},
|
|||
|
|
{name: '审核中', color: '#fca130', value: 1},
|
|||
|
|
{name: '通过', color: '#49cc90', value: 2},
|
|||
|
|
{name: '未通过', color: '#f93e3e', value: 3},
|
|||
|
|
],
|
|||
|
|
// 筛选下标
|
|||
|
|
siftIndex: 0,
|
|||
|
|
// 筛选显示
|
|||
|
|
showSift: false,
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// #ifndef H5
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
const level = e.scrollTop/60;
|
|||
|
|
if(level<=1) this.topLevel = level;
|
|||
|
|
else this.topLevel = 1;
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
mounted(){
|
|||
|
|
let that = this;
|
|||
|
|
window.onscroll = function () {
|
|||
|
|
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
|||
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
|||
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|||
|
|
const level = scrollTop/60;
|
|||
|
|
if(level<=1) that.topLevel = level;
|
|||
|
|
else that.topLevel = 1;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onHide() {
|
|||
|
|
window.onscroll = null;
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// 上拉刷新
|
|||
|
|
onPullDownRefresh(){
|
|||
|
|
try{
|
|||
|
|
this.init();
|
|||
|
|
}catch(e){}
|
|||
|
|
finally{
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.init();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 返回
|
|||
|
|
back(){
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
// 滚动
|
|||
|
|
scroll(e){
|
|||
|
|
this.scrollTop = e.detail.scrollTop
|
|||
|
|
},
|
|||
|
|
// 滚动回顶部
|
|||
|
|
goTop() {
|
|||
|
|
this.scrollTop = 0;
|
|||
|
|
},
|
|||
|
|
// 时间格式化
|
|||
|
|
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.shareList.splice(itemIndex, 1);
|
|||
|
|
that.$refs.uToast.show({type:'success',title: "发布记录删除成功!"});
|
|||
|
|
}else{
|
|||
|
|
that.$refs.uToast.show({type:'error',title: "发布记录删除失败!"});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 预览图片
|
|||
|
|
previewImage(path){
|
|||
|
|
tools.methods.lookImage(0,[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.$refs.uToast.show({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.getShareList();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.share-detail{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-size: cover;
|
|||
|
|
.sdt-top{
|
|||
|
|
// #ifdef APP
|
|||
|
|
.app-top{
|
|||
|
|
width: 100%;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
.mobile-logo{
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
// #ifndef MP-WEIXIN
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
.back{
|
|||
|
|
margin-left: 35rpx;
|
|||
|
|
margin-top: 5rpx
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 81;
|
|||
|
|
padding: 15rpx 0;
|
|||
|
|
image{
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 45rpx;
|
|||
|
|
}
|
|||
|
|
// .u-icon{
|
|||
|
|
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.detail-content{
|
|||
|
|
margin: 120rpx 20rpx 32rpx;
|
|||
|
|
padding: 34rpx 25rpx 20rpx;
|
|||
|
|
background-color: rgba(160, 160, 160, 0.1);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
.shareList{
|
|||
|
|
margin: 30rpx 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 76vh;
|
|||
|
|
.share-item{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20rpx;
|
|||
|
|
.si-left{
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
.sil-image{
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.si-right{
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
height: 140rpx;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
color: #b3a0da;
|
|||
|
|
text{
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.dc-sift{
|
|||
|
|
width: 50rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-bottom: -5rpx;
|
|||
|
|
&:active{
|
|||
|
|
opacity: 0.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
::v-deep .u-swipe-action{
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 0 0 20rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|