horzi_rai_wxa/pages/reportForm/components/strategy.vue

<template>
	<!-- 季度策略 -->
	<view class="industrial-container">
		<!-- 季度策略 -->
		<view class="collect-ul">
			<view class="collect-ltem" v-for="(item,index) in collectList" :key="index" @click="goDetail(item,index)">
				<view class="item-left">
					<text class="title text_twoLine">{{item.Title}}
						<text class="reg-text" v-if="item.IsRed"></text>
					</text>
					<text v-if="isText" :class="threeFour?'text-threeFour':'text_one'">
						{{item.Abstract}}
					</text>
					<text class="text_twoLine desc">{{item.PublishDate}}</text>
				</view>
				<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage>1" />
		</view>
	</view>
</template>

<script>
	import {
		Reports
	} from '@/config/api.js'
	import {
		Throttle
	} from '@/config/util.js'
	let app = getApp()
	export default {
		props: {
			strategyIndexTwo: {
				type: Number
			},
			isNum: {
				type: Number
			},
			tabAct_idTwo: {
				type: Number
			},
			pageNumFather: {
				type: Number,
				default: null
			},
			matchTypeName: {
				type: String
			}
		},
		data() {
			return {
				refresh: false, //正在下拉
				page_no: 1,
				pageSize: 10,
				collectList: [],
				haveData: true,
				status: 'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
				totalPage: '',
				isShow: false,
				threeFour: false,
				isText: true
			};
		},
		watch: {
			matchTypeName: {
				handler() {
					if (this.matchTypeName == "资金流向" || this.matchTypeName == "大类资产") {
						this.threeFour = true
					}
					if (this.matchTypeName == "周度思考" || this.matchTypeName == "估值研究") {
						this.isText = false
					} else {
						this.isText = true
					}
				},
				immediate: true
			},
			isNum: {
				handler() {
					if (this.status === 'nomore') return;
					this.status = 'loading';
					this.page_no++;
					this.getCollectList()
				},
			},
			tabAct_idTwo: {
				handler() {
					this.page_no = 1,
						this.pageSize = 10,
						this.getCollectList()
				},
				// immediate:true
			},
			pageNumFather: {
				handler() {
					if (this.pageNumFather) {
						this.page_no = 1
						this.getCollectList()
					}
				}
			}
		},
		mounted() {
			if (this.tabAct_idTwo) {
				this.getCollectList()
			}
		},
		methods: {
			/* 获取列表 */
			getCollectList() {
				Reports.getTacticsList({
					PageSize: this.pageSize,
					CurrentIndex: this.page_no,
					CategoryId: this.tabAct_idTwo
				}).then(res => {
					if (res.Ret === 200) {
						this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
						this.totalPage = res.Data.Paging.Pages; //总页数
						if (this.page_no === 1) {
							this.collectList = res.Data.List || [];
							this.haveData = this.collectList.length ? true : false
							if (this.refresh) {
								uni.stopPullDownRefresh();
								this.refresh = false;
							}
						} else {
							this.collectList = this.collectList.concat(res.Data.List)
						}
					}
				})
			},
			goDetail(item, index) {
				/* 无需授权且已绑定 检验是或否有权限 */
				if (index == 0) {
					this.$emit('hideIsred', this.isShow)
				}
				this.collectList[index].IsRed = false

				// 	console.log(this.collectList[index])
				this.$store.dispatch('checkHandle').then(res => {
					app.globalData.isAuth = res.IsAuth;
					app.globalData.isBind = res.IsBind;
					if ((!res.IsAuth) && (!res.IsBind)) { // 已授权已绑定
						uni.navigateTo({
							url: '/pages/reportDetail/reportDetail?idReport=' + item.ArticleId,
						});
					} else if (res.IsAuth) { //未授权
						uni.navigateTo({
							url: '/pages/authGuide/authGuide'
						})
					} else if (res.IsBind && !res.IsAuth) { //已授权未绑定
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				})

			},
		},

		/* 下拉刷新 */
		onPullDownRefresh: Throttle(function() {
			this.page_no = 1;
			this.refresh = true;
			this.getCollectList()
		}),


	}
</script>

<style scoped lang="scss">
	.industrial-container {
		background-color: #f6f6f6;
		margin-top: 132rpx;

		.collect-ul {

			// margin-top: 10rpx;
			// background-color: #f6f6f6;
			// padding-top: rpx;
			.collect-ltem {
				display: flex;
				padding: 30rpx 34rpx;
				background: #fff;
				margin-top: 10rpx;
				align-items: center;
				justify-content: space-between;

				.title {
					position: relative;
					max-width: 625rpx;
					color: #333;
					font-size: 30rpx;
					padding-left: 28rpx;

					.reg-text {
						position: absolute;
						top: 50%;
						left: 0rpx;
						width: 14rpx;
						height: 14rpx;
						transform: translateY(-50%);
						background-color: #FF0000;
						border-radius: 50%;
						z-index: 9;
					}
				}

				.desc {
					margin-top: 17rpx;
					padding-left: 28rpx;
					width: 625rpx;
					color: #999;
				}

				.text_one {
					max-width: 600rpx;
					padding-left: 28rpx;
					color: #666666;
					font-size: 28rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.text-threeFour {
					max-width: 600rpx;
					padding-left: 28rpx;
					color: #666666;
					font-size: 28rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
</style>