renshou/library/poster/index.vue

<template>
	<view>
		<view class="top-sort ddflex">
			<view :class="'top-sort-item flex '+(tabCode=='poster'?'top-sort-item-active':'')" @click="tabChange('poster')">海报</view>
			<view :class="'top-sort-item flex '+(tabCode=='poster_product'?'top-sort-item-active':'')" @click="tabChange('poster_product')">产品宣传</view>
		</view>
		<view style="height: 85rpx;"></view>
		<view style="border-top: 20rpx solid #F4F5F9;">
			<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>
			<view class="ddflex" style="padding: 0 30rpx;">
				<view :class="'search-tag '+(!categoryId?'search-tag-active':'')" @click="categoryChange({id:null})">全部</view>
				<view :class="'search-tag '+(categoryId==item.id?'search-tag-active':'')" v-for="item in posterCategory" @click="categoryChange(item)">{{item.name}}</view>
			</view>
			<view class="ddflex" style="padding: 30rpx;">
				<view class="poster-item" v-for="item in pageList" @click="jumpUrl('/library/posterService/posterService?id='+item.id+'&code='+tabCode)">
					<image class="poster-item-pic" :src="item.pic" mode="aspectFill"></image>
					<view class="poster-item-title tover">{{item.title}}</view>
					<view class="poster-item-use">{{item.shareCount?item.shareCount:0}} 人正在使用</view>
				</view>
			</view>
			<view class="nodata" v-if="pageList.length==0">
				<image :src="picUrlss+'empty_dd.png'" mode="aspectFill"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

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

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				picUrlss: req.public.picUrls,
				
				searchVal:'',
				isShow: false,
				pageList: [],
				isLoad: true,
				form: {
					page: 1,
					limit: 10
				},
				posterCategory:[],
				categoryId:null,
				
				tabCode:'poster'
			}
		},
		onLoad(options) {
			this.getPageList(true);
		},
		onShow() {
			this.getCategory()
		},
		onReachBottom: function() {
			this.form.page++;
			this.getPageList(false);
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			// 切换海报类型
			tabChange(code){
				if(code==this.tabCode) return false
				this.tabCode = code
				this.categoryId = null
				this.getCategory()
				this.isLoad = true
				this.form.page = 1
				this.getPageList()
			},
			// 获取分类
			getCategory(){
				req.getRequest('/api/material/posterCategory',{code:this.tabCode},res => {
					this.posterCategory = res?res.list:[]
				});
			},
			// 选择分类
			categoryChange(item){
				if(item.id==this.categoryId) return false
				this.categoryId = item.id
				this.isLoad = true
				this.form.page = 1
				this.getPageList()
			},
			// 获取海报
			getPageList(isShow){
				if (!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				form.code = this.tabCode
				form.categoryId = this.categoryId
				form.search = this.searchVal?this.searchVal:null
				req.loadIng('加载中')
				req.getRequest('/api/material/library',form,res => {
					this.isShow = true;
					res = res?res.list:[]
					if (res && res.length == 10) {
						this.isLoad = true;
					}
					if (this.form.page > 1) {
						res = this.pageList.concat(res);
					}
					this.pageList = res;
					uni.hideLoading()
				},isShow);
			},
			
			// 搜索
			searchFn(){
				this.isLoad = true
				this.form.page = 1
				this.getPageList()
			}
		},
		mounted() {
		}
	}
</script>

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