renshouH5/topic/contentList/contentList.vue

<template>
	<view>
		<view class="top-fixed">
			<view class="search-box ddflex">
				<view class="search-input ddflex fflex">
					<image src="/static/images/ssico.png"></image>
					<input @confirm="searchFn" confirm-type="search" @input="searchFn" v-model="searchVal" class="fflex"
						placeholder="请输入内容名称" />
				</view>
				<view class="filter ddflex">
					<view class="fflex">
						<picker mode="selector" :range="rangeList" range-key="label" v-model="rangeIndex" @change="rangeChange">
							<view class="filter-item fflex ddflex f-active" style="text-align: right;justify-content: flex-end;">
								<text style="max-width: 150rpx;" class="tover">{{rangeList[rangeIndex].label}}</text>
								<image class="filter-item-icon" src="../../static/images/down.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></view>
		<!-- 订单列表 -->
		<view style="position: relative;overflow: hidden;" v-if="dataList.length>0">
			<!-- <view class="act-list" v-if="dataList && dataList.length > 0">
				<view class="li" v-for="(item, index) in dataList" :key="index" @click="toActivity(item)">
					<view class="imgbox"><image :src="item.pic" mode="aspectFill"></image></view>
					<view class="infos fflex">
						<view class="act-tit tovers">{{ item.title }}</view>
						<view class="stas ddflex">
							<view class="fflex">
								<view class="tag-box tovers">{{ item.brief }}</view>
								<view class="area" v-if="item.time || item.enlistTime">
									<view >报名截止时间：{{ item.enlistTime }}</view>
									<view >活动结束时间：{{ item.time }}</view>
									<view v-if="item.state>0 && item.state!=6">活动状态：{{item.stateName}}</view>
									<view style="font-size: 26rpx;color: red;font-weight: 400;" v-else-if="item.state==6">审核失败 {{item.refuse}}</view>
								</view>
							</view>
							<view class="act-btn" v-if="item.state==0" @click.stop="review(item,index)">审核</view>
						</view>
					</view>
				</view>
			</view> -->
			<view class="rec" v-if="dataList.length>0">
				<view class="li" v-for="(item,index) in dataList" :key="index">
					<navigator @click="toActivity(item)" hover-class="none" class="dflex">
						<view class="flex">
							<view class="rec-tit tovers3">{{item.title}}</view>
							<view class="dflex">
								<view class="rec-time">{{item.createDate}}</view>
							</view>
						</view>
						<image :src="item.pic" mode="aspectFill" class="rec-img"></image>
					</navigator>
					<view class="ddflex" style="justify-content: flex-end;">
						<view class="review-btn" v-if="item.status==0" @click.stop="review(item,index)">审核</view>
						<view style="font-size: 26rpx;color: red;font-weight: 400;" v-else-if="item.status==1">审核失败 {{item.refuse}}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="nodata">
			<image src="../../card/static/images/empty.png" mode="widthFix"></image>
			<view>暂无数据</view>
		</view>
		
		
		
		<view class="ceng" v-show="showPop" @click="showPop=false" @touchmove.stop.prevent="moveHandle">
		</view>
		<view :style="showPop?'bottom:0;':'bottom:-100%;'"
			class="pop">
			<view class="pop-scroll">
				<view class="pop-title ddflex">审核内容 <view class="tover" style="max-width: 300rpx;margin-left: 20rpx;">{{clickItem.title}}</view></view>
				<view class="pop-textarea">
					<textarea v-model="tempData" placeholder="如审核不通过请填写不通过原因"></textarea>
				</view>
				<view style="font-size: 24rpx;color: #999;padding:0 30rpx 30rpx;">注:通过审核可直接点击通过，不通过审核请填写原因</view>
			</view>
			<view class="ddflex">
				<view class="pop-item fflex" style="background-color: red;color: #fff;" @click="unpass">不通过</view>
				<view class="pop-item fflex" style="background-color: var(--main);color: #fff;" @click="pass">通过</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const util = require('../../utils/util.js');

	export default {
		components: {
		},
		props: {},
		data() {
			return {
				statusBarHeight:0,
				
				page: 1,
				limit: 10,
				isLoad: true,
				searchVal: '',
				dataList: [],
				isReference:false,
				
				clickItem:{},
				clickIndex:-1,
				showPop:false,
				tempData:'',
				
				rangeIndex:1,
				rangeList:[{
					label:'全部',
					value:-1
				},{
					label:'待审核',
					value:0
				},{
					label:'审核失败',
					value:1
				},{
					label:'审核成功',
					value:200
				}]
			}
		},
		onLoad(options) {
			this.getDataList()
		},
		onShow() {
			if(this.isReference){
				this.isReference = false
				this.page=1;
				this.isLoad = true
				this.getDataList()
			}
		},
		onReachBottom() {
			this.page++;
			this.getDataList();
		},
		methods: {
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			toActivity(item){
				uni.navigateTo({
					url: '/topic/content/content?id=' + item.id
				});
			},
			// 分页查询
			getDataList() {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let queryParams = {
					page: this.page,
					limit: this.limit
				}
				if (this.searchVal) {
					queryParams.title = this.searchVal
				}
				queryParams.status = this.rangeList[this.rangeIndex].value
				if(queryParams.status==-1) delete queryParams.status
				req.getRequest('/api/content/interfaceYzl/page', queryParams, data => {
					data = data.list
					if (data != null && data.length == this.limit) {
						this.isLoad = true;
					}
					if (this.page == 1) {
						this.dataList = [];
					}
					if (this.page > 0) {
						data = this.dataList.concat(data);
					}
					this.dataList = data;
					console.log('列表数据>>>', this.dataList);
				})
			},
			// 搜索
			searchFn() {
				this.page = 1;
				this.isLoad = true;
				this.getDataList();
			},
			monthDayDiff(date) {
				return util.monthDayDiff(date)
			},
			
			review(item,index){
				this.clickItem = item
				this.clickIndex = index
				this.tempData = item.refuse?item.refuse:''
				this.showPop = true
			},
			pass(){
				uni.showModal({
					title:'提示',
					content:"是否确定通过该内容审核",
					success: (res) => {
						if(res.confirm){
							req.postRequest('/api/content/interfaceYzl/audit',{id:this.clickItem.id,status:200},data=>{
								req.msg("内容已通过审核")
								this.dataList[this.clickIndex].status = 200
								this.clickIndex = -1
								this.clickItem = {}
								this.tempData = ''
								this.showPop = false
							})
						}
					}
				})
			},
			unpass(){
				if(!this.tempData){
					return req.msg("请填写内容不通过原因")
				}
				uni.showModal({
					title:'提示',
					content:"是否确定不通过该内容审核",
					success: (res) => {
						if(res.confirm){
							req.postRequest('/api/content/interfaceYzl/audit',{id:this.clickItem.id,status:1,refuse:this.tempData},data=>{
								req.msg("内容未通过审核")
								this.dataList[this.clickIndex].status = 1
								this.dataList[this.clickIndex].refuse = this.tempData
								this.clickIndex = -1
								this.clickItem = {}
								this.tempData = ''
								this.showPop = false
							})
						}
					}
				})
			},
			
			rangeChange(e){
				this.rangeIndex = e.detail.value
				this.page = 1;
				this.isLoad = true;
				this.getDataList();
			}
		}
	}
</script>

<style>
	@import "./contentList.css";
</style>