tqApp-webView/peixun/ziliao/ziliao.vue

<template>
	<view class="pageContainer">
		<view class="page-header">
			<view class="content" style="float: none;">
				<view class="condition" style="padding-top: 14rpx;margin-top: 0;height:110rpx;">
					<u-search placeholder="请输入资料名称" height="40" v-model="studyTitle" @search="handleTableList"
						@custom="handleTableList" :clearabled="true" @clear="handleTableList" :show-action="true"
						action-text="搜索"></u-search>
				</view>
				<view class="condition" style="padding-top: 14rpx;margin-top: 0;height:110rpx;">
					<u-search placeholder="请输入发布人" height="40" v-model="pubPep" @search="handleTableList"
						@custom="handleTableList" :clearabled="true" @clear="handleTableList" :show-action="true"
						action-text="搜索"></u-search>
				</view>
				<view class="condition" style="padding-top: 0rpx;margin-top: 0;height:90rpx;">
					<u-cell title="上传时间" :value="calendarStart + ' 至 ' + calendarEnd" style="height: 86rpx"
						@click="$refs.calendarRef.show()">

					</u-cell>
					<tq-calendar ref="calendarRef" type="daterange" @confirm="(e) => {
						calendarStart = e[0]
						calendarEnd = e[1]
						handleSearch()
					}">
					</tq-calendar>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="list" v-for="item in tableList" :key="item.id">
				<view class="taskList">
					<view class="contentBody">
						<u-col :span="12">
							<u-row style="margin-top: 12rpx;">
								<view
									style="display:flex;justify-content: center;align-items: center;height: 180px;width: 100%;">
									<image v-if="item.studyType == 2" src="@/static/icon/pdficon.svg" class="image"
										style="width: 45%; height: 88%;object-fit:fill;"
										@click="checkAddClickNum(item)" />
									<video v-if="item.studyType == 1" :src="$getImages(item.studyUrl)" class="image"
										style="width: 100%; height: 100%;object-fit:fill;" controls
										@click="checkAddClickNum(item)">
									</video>

								</view>
							</u-row>
						</u-col>
						<u-col :span="6">
							<u-row style="margin-top: 12rpx;">
								<text class="lightgray-text">名称：</text>
								<text class="lightgray-text font-weight">{{ item.studyTitle }}</text>
							</u-row>
						</u-col>
						<u-col :span="6">
							<u-row>
								<text class="lightgray-text">类型：</text>
								<text class="lightgray-text">{{ item.studyTypeName }}</text>
							</u-row>
						</u-col>

						<u-col :span="6">
							<u-row style="margin-top: 12rpx;">
								<text class="lightgray-text">发布人：</text>
								<text class="lightgray-text font-weight">
									<text>
										{{ item.pubPep }}
									</text>

								</text>
							</u-row>
						</u-col>
						<u-col :span="12">

							<u-row style="margin-top: 12rpx;">
								<text class="lightgray-text">上传时间：</text>
								<text class="lightgray-text font-weight">{{ item.createTime }}</text>
							</u-row>
						</u-col>

					</view>
				</view>
			</view>
      <view class="nodata-warp" v-if="!tableList.length">
        <image :src="$getImages('/assetsMobile/images/no-data.png')" class="nodata-image"></image>
      </view>
		</view>
		<u-calendar :show="calendarShow" mode="range" :defaultDate="defaultDate" :maxDate="maxDate" minDate="2023-10-01"
			monthNum="24" @confirm="calendarChange" @close="onClose"></u-calendar>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	getList, addClickNum
} from "@/api/accidentStudy/accidentStudy.js"
export default {
	components: {},
	props: {},
	data() {
		return {
			studyTitle: '',
			pubPep: '',
			calendarShow: false, // 日历
			tableList: [],
			calendarShow: false, // 日历
			calendarStart: this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), // 开始时间
			calendarEnd: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'), // 结束时间
			defaultDate: [this.dayjs().subtract(6, 'day').format('YYYY-MM-DD'), this.dayjs().subtract(0, 'day').format(
				'YYYY-MM-DD')],
			page: 1,
			size: 10,
			total: 0,
			maxDate: this.dayjs().subtract(0, 'day').format('YYYY-MM-DD'),

		};

	},
	mounted() {
		this.handleTableList();
	},
	onReachBottom() {
		// 滚动到底部
		if (this.page * this.size < this.total) {
			this.page += 1;
			this.handleTableList();
		}
	},

	methods: {
		checkTime() {
			this.calendarShow = true
		},
		handleDataDetection(data) {
			// 数据检测
			return data == null || data == undefined ? "" : data;
		},
		async handleTableList() {
			let obj = {
				page: this.page,
				size: 10,
				startTime: this.calendarStart == "" || this.calendarStart == null ?
					undefined : this.calendarStart + ' 00:00:00',
				endTime: this.calendarEnd == "" || this.calendarEnd == null ?
					undefined : this.calendarEnd + ' 23:59:59',
				pubPep: this.handleDataDetection(this.pubPep),
				studyTitle: this.handleDataDetection(this.studyTitle),
			};
			let res = await getList(obj);
			if (res.code == "0" && res.data.list) {
				this.tableList = res.data.list
				this.total = res.data.listtotal;
			}
		},

		async checkAddClickNum(row) {
			let obj = {
				id: row.id,
			}
			let res = await addClickNum(obj);
			if (row.studyType == 2) {
				this.showPdf(row)
			}
		},
		showPdf(item) {

			this.download(this.$getImages(item.studyUrl))
		},
		download(url) {
			let u = navigator.userAgent;
			let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
			let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

			if (isAndroid) {  //android终端
				window.open(url);
			} else if (isiOS) {   //ios终端
				window.location.href = url;
			}

		},

		calendarChange(e) {
			this.page = 1;
			this.tableList = [];
			// 修改日期
			this.calendarStart = e[0]; // 开始时间
			this.calendarEnd = e[1]; // 结束时间
			this.calendarShow = false;
			this.handleTableList();
		},
		onClose() {
			this.calendarShow = false;
			this.handleTableList();
		},


	},
};
</script>
<style scoped lang="scss">
.page-header {
	background-color: #ffffff;
	float: left;
	width: 100%;

	.condition {
		position: relative;
		/* float: left; */
		width: calc(100% - 40rpx);
		margin-left: 20rpx;
		margin-top: 40rpx;
		height: 80rpx;
		box-sizing: border-box;
		border-top: 1px solid #f0f0f0;
		padding: 0 22rpx;
		background: #FFFFFF;

		.head {
			float: left;
			height: 100%;

			display: flex;
			align-items: center;
			justify-content: flex-start;

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.claend {
			width: 60rpx;
			height: 60rpx;
		}

		.content {
			float: right;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4971F8;

			.datePicker {
				width: 500rpx;

				/deep/ .uni-date-x--border {
					border: none;
				}

				/deep/ .uniui-calendar {
					display: none;
				}
			}

			.icon_color {
				color: #333333;
			}
		}
	}

}

.body {
	position: relative;
	float: left;
	width: 100%;
	height: calc(100% - 300rpx);
	padding: 30rpx 20rpx 0 20rpx;
  background-color: #ffffff;
}

.nomore {
	float: left;
	width: 100%;
	text-align: center;
}

.taskList {
	position: relative;
	float: left;
	margin: 0 0 30rpx 0;
	width: 87%;
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 16rpx 30rpx;
}

.contentBody {
	position: relative;
	float: left;
	width: 100%;
	background-color: white;
	border-bottom-left-radius: 30rpx;
	border-bottom-right-radius: 30rpx;
}

.lightgray-text {
	font-size: 28rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333333;
}

.font-weight {
	font-weight: 600;
}
.nodata-warp{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  .nodata-image{
    width: 218rpx;
    height: 150rpx;
  }
}
</style>