renshouH5/library/longPoster/index.vue

<template>
	<view>
		<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 style="height: 120rpx;"></view>
		<view class="ddflex" style="padding: 30rpx;">
			<view class="poster-item" v-for="item in 36">
				<image class="poster-item-pic" src="http://img.zhiqiyun.com/test/2023/07/31/8b7ed072b68fe70f0d6f409a71a8b17b.png" mode="aspectFill"></image>
				<view class="poster-item-title tover">年度理赔账单</view>
				<view class="zhuanfa" @click="download('http://img.zhiqiyun.com/test/2023/07/31/8b7ed072b68fe70f0d6f409a71a8b17b.png')">转发</view>
				<!-- <view class="poster-item-use">2056 人正在使用</view> -->
			</view>
		</view>
		
		<view class="act-create" @click="showBtn">
			<image src="../static/images/add.png"></image>
			<view>发布</view>
		</view>
		<view class="ceng" v-if="isShowbtn" @click="hideBtn"></view>
		<view class="side ddflex" v-if="isShowbtn">
			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService')">
				<image src="/static/images/ll_dt.png"></image>
				<view>年度账单</view>
			</view>
			<view class="li" @click="jumpUrl('/library/longPosterService/longPosterService2')">
				<image src="/static/images/ll_cz.png"></image>
				<view>日/月/年报</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		components: {},
		props: {},
		data() {
			return {
				searchVal:'',
				isShowbtn:false,
				
				searchVal:'',
				isShow: false,
				pageList: [],
				isLoad: true,
				form: {
					page: 1,
					limit: 10
				},
			}
		},
		onLoad(options) {
			this.getPageList(true);
		},
		onShow() {
			
		},
		onHide() {
			this.hideBtn()
		},
		onReachBottom: function() {
			this.form.page++;
			this.getPageList(false);
		},
		methods: {
			jumpUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			// 获取海报
			getPageList(isShow){
				if (!this.isLoad) return false;
				this.isLoad = false;
				let form = this.form;
				form.code = 'poster_long'
				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()
			},
			showBtn() {
				this.isShowbtn = true;
			},
			hideBtn() {
				this.isShowbtn = false;
			},
			download(url){
				uni.downloadFile({
					url: url, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							console.log('下载成功');
							var oA = document.createElement("a");
							oA.download = ''; // 设置下载的文件名，默认是'下载'
							oA.href = res.tempFilePath; //临时路径再保存到本地
							document.body.appendChild(oA);
							oA.click();
							oA.remove(); // 下载之后把创建的元素删除
							req.msg('已保存')
						}
				
					}
				});
			}
		},
		mounted() {
			
		},
		onPageScroll: function(e) {
		}
	}
</script>

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