tangdehang
/
android-cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="description" content="活动">
	<title></title>
	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
	<link rel="stylesheet" href="../static/css/index.css?v=1.0.0.6">
	<link rel="stylesheet" href="../static/css/vant.css" />
	<script src="../static/js/vender/vue/vue.min.js"></script>
	<script src="../static/js/vender/vue/vant.min.js"></script>
	<script src="../static/js/vender/config.js"></script>

	<style>
		.header{
			display: flex;
			height: 0.88rem;
			align-items: center;
			box-shadow: 0 0.01rem 0.14rem 0 rgba(184, 184, 184, 0.47);
		}
		.page-title{
			flex: 1;
			text-align: center;
			font-size: 0.36rem;
			color: #333333;
		}
		.back{
			width: 0.2rem;
			height: 0.34rem;
			margin-left: 0.2rem;
		}
		.item{
			display: flex;
			align-items: center;
			margin: 0.32rem 0.2rem 0 0.58rem;
		}
		.right{
			flex: 1;
			margin-left: 0.43rem;
		}
		.icon{
			width: 1.8rem;
			height: 1.36rem;
			border-radius: 0.1rem;
		}
		.titles{
			font-size: 0.3rem;
			color: #333333;
		}
		.contents{
			max-height: 0.66rem;
			max-width: 4.4rem;
			margin-top: 0.2rem;
			font-size: 0.24rem;
			color: #999999;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.no-content{
			width: 3.74rem;
			height: 3.14rem;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	</style>
</head>

<body>
	<div id="app" v-cloak class="app container">
		<van-list v-model="loading" :finished-text="finishedText" :finished="finished"
			:immediate-check=false @load="onLoad">
			<div v-for="(item,index) in tagList" :key="index" class="item" @click="toDetail(item)">
				<img :src="fileCenterApi + `/document/newFile/download/0/347905r86eb745a1sc38?fileKey=${item.fileId}`" class="icon" alt="">
				<div class="right">
					<div class="titles">{{item.strategyTitle}}</div>
					<div class="contents">{{getContent(index,item.content)}}</div>
				</div>
			</div>
		</van-list>
		
		<img v-if="noData" src="../static/offImg/no-content.png" class="no-content" alt="" />
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script src="../static/js/vender/vue/axios.min.js"></script>
	<script src="../static/js/vender/vue/config.js"></script>
	<script src="../static/js/vender/vue/api.js"></script>

	<script type="text/javascript">
		var u = navigator.userAgent,
			app = navigator.appVersion;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		new Vue({
			el: '#app',
			data: {
				noData: true,
				loading: false,
				title: '',
				finishedText: '',
				finished: false,
				pageNum: 1,
				tagList: []
			},
			mounted() {
				let dom = document.getElementsByTagName('title')[0];
				this.title = decodeURIComponent(GetRequest().title);
				dom.innerText = this.title;
				setTimeout(() => {
					this.getQueryByTag();//获取标签列表
				})
			},
			methods: {
				getQueryByTag(){
					this.$toast.loading({
						duration: 0,
						message: '加载中...',
						forbidClick: true,
						loadingType: 'spinner',
					});
					// 获取标签列表
					getQueryByTag(GetRequest().token, {
						tagId: +GetRequest().id,
						pageNum: this.pageNum,
						pageSize: 10
					}).then(res => {
						this.$toast.clear();
						if (res.status === 0) {
							this.loading = false //取消正在加载状态
							this.noData = false;
							let infolist = res.data.actFissionStrategyList;
							if (infolist) {
								this.tagList = this.tagList.concat(infolist);
								if (this.tagList.length >= 10) {
									this.finishedText = '没有更多了'
								}
								if(this.tagList.length == 0){
									this.noData = true;
								}
								if (this.tagList.length >= res.data.total) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
									this.finished = true;
								}
							} else {
								this.finished = true;
							}
						} else {
							this.loading = false //取消正在加载状态
							this.noData = true;
							// this.$toast(res.msg);
						}
					})
				},
				//滚动加载时触发，list组件定义的方法
				onLoad() {
					let times = setTimeout(() => {
						this.pageNum += 1 //每请求一次，页面数+1
						this.getQueryByTag();
						clearTimeout(times)
					}, 500)
				},
				getContent(index, content){
					this.$nextTick(() => {
						let dom = document.getElementsByClassName('contents')[index];
						if(dom){
							//对img标签进行匹配
							var imgReg = /<img.*?(?:>|\/>)<br \/>/gi;
							let oldContent = content;
							if(imgReg.test(content)){//有图片
								//将img标签替换为*
								content =  content.replace(imgReg,"");
							}
							if(content == ''){
								dom.innerHTML = oldContent;
							}else{
								dom.innerHTML = content;
							}
							
						}
					})
				},
				back(){
					location.href = `./actFission.html?token=${GetRequest().token}`;
				},
				toDetail(item){
					location.href = `./actFissionShare.html?strategyId=${item.id}&title=${encodeURI(item.strategyTitle)}&tagId=${GetRequest().id}&type=1&token=${GetRequest().token}`;
				},
				stopManyClick(fn) { //防抖
					if (this.flag) {
						fn();
					}
					this.flag = false;
					if (this.timer) {
						clearTimeout(this.timer);
					}
					this.timer = setTimeout(() => {
						this.flag = true
					}, 1500);
				},
			}
		})
	</script>
</body>

</html>