dev/dcp-app-gate/pages/service/others/mycollection.vue

<template>
	<view class="myCollection">
		<view class="bg"></view>
		<u-navbar back-icon-color="#fff" :back-text="$t('common.Back')" :is-back="true"
			:background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :border-bottom="true"
			title-color="#fff" :title="title" :custom-back="back">
		</u-navbar>
		<view class="collectList" v-if="collectList.length>0">
			<view class="item" v-for="(item,index) in collectList" :key="index">
				<uni-swipe-action style="width:100%">
					<uni-swipe-action-item :right-options="options" @click="addCollectInfo(index,item)">
						<view class="thumb" @click="showDetial(item)"
							v-if="item.pictureUrl && !isArray(item.pictureUrl)">
							<image class="img" :src="websiteUrl+item.pictureUrl" mode="widthFix"></image>
						</view>
						<view class="info" @click="showDetial(item)">
							<view class="label" :class="{hasThumb:item.pictureUrl}">{{item.title}}</view>
							<view class="tags" :class="{hasThumb:item.pictureUrl}">
								<text class="textitem">{{item.auther}}</text>
								<view class="date" v-if="item.publishDate">{{formatDate(item.publishDate -0)}}</view>
							</view>
							<!-- <view class="mulimgs" v-if="!item.pictureUrl && index==0">
								<view class="imgitem" @click="showDetial(item)">
									<image class="img" src="https://www.geidcp.com/api/file/pub//def/projectdefault.png" mode="widthFix"></image>
								</view>
								<view class="imgitem" @click="showDetial(item)">
									<image class="img" src="https://www.geidcp.com/api/file/pub//def/projectdefault.png" mode="widthFix"></image>
								</view>
								<view class="imgitem" @click="showDetial(item)">
									<image class="img" src="https://www.geidcp.com/api/file/pub//def/projectdefault.png" mode="widthFix"></image>
								</view>
							</view> -->
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<uni-load-more :status="status" v-show="this.total>10"></uni-load-more>
		</view>
		<!-- <view class="loading" v-if="showLoading" :class="{fixbottom:pageNo<totalPage}">
			<u-loadmore :status="status" iconType="flower" :load-text="{loading: $t('common.Loading')}" />
		</view> -->
		<view class="nodata" v-if="!showLoading && collectList.length==0"
			style="text-align: center;margin-top: 120upx;">
			<view class="imgBox" style="height:600upx;margin-bottom:60upx">
				<image src="../../../static/img/public/7.png" style="width: 80%;margin:0 10%" mode="widthFix"></image>
			</view>
			<text style="font-size: 30upx;color:#ccc">{{$t('common.Nodata')}}</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import {
		addCollectInfo,
		getPortalMyCollecModel
	} from '@/api/baseUnitView'
	export default {
		name: 'MyCollection',
		components: {
			UNavbar,
			uniSwipeAction,
		},
		data() {
			return {
				total: null,
				token: '',
				userId: '',
				pageNo: 1,
				pageSize: 10,
				modelType: '',
				totalPage: 0,
				options: [{
					text: this.$t('common.CancelCollection'),
					style: {
						fontSize: '12px',
						height: '30px',
						backgroundColor: '#f2a059',
						height: '60px'
					}
				}],
				menuIndex: 0,
				flag: false,
				collectList: [],
				showLoading: true,
				status: 'more',
			}
		},
		onLoad(e) {
			this.title = this.$i18n.locale == 'zh' ? '我的收藏' : 'My Collection';
		},
		onShow() {
			this.token = uni.getStorageSync('Auth-Token') ? 'Bearer ' + uni.getStorageSync('Auth-Token') : '';
			this.userId = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).id : '';
		},
		created() {
			this.getPortalMyCollecModel()
		},
		//加载更多
		onReachBottom() {
			if (this.pageNo < this.totalPage) {
				this.showLoading = true;
				this.pageNo++;
				this.getPortalMyCollecModel('loadmore')
			} else {
				if (this.showLoading != false) this.showLoading = false
				this.status = 'noMore';
			}
		},
		onPullDownRefresh() {
			//调用获取数据方法
			this.getPortalMyCollecModel('loadmore')
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// onReachBottom() {
		// 	let allTotal = this.pageNo * this.pageSize
		// 	if (allTotal < this.total) {
		// 		console.log(this.total);
		// 		//当前条数小于总条数 则增加请求页数
		// 		this.status = 'loading';
		// 		this.pageSize++;
		// 		this.getPortalMyCollecModel() //调用加载数据方法
		// 	} else {
		// 		this.status = 'noMore';
		// 		// console.log('已加载全部数据')
		// 	}
		// },
		methods: {
			// 获取我的收藏数据列表
			async getPortalMyCollecModel(loadmore) {
				let data = {
					modelType: 'message',
					userId: this.userId,
					language: this.$i18n.locale.toUpperCase(),
					pageNo: this.pageNo,
					pageSize: this.pageSize,
				}
				let res = await this.$myRequest({
					url: '/op/basePortalModelCollectInfos/getPortalMyCollecModel',
					headers: {
						token: this.token
					},
					data
				})
				// if (res.status != 200) {
				// 	this.collectList = []
				// } else {
				if (res.data.models) {
					this.totalPage = res.data.page.totalPage
					this.total = res.data.page.totalCount
					if (!loadmore) this.collectList = res.data.models.cmsInformationViewList;
					else this.collectList = [...this.collectList, ...res.data.models.cmsInformationViewList]
				}
				// }
				this.showLoading = false;
			},

			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},

			// 查看详情
			showDetial(item) {
				uni.navigateTo({
					url: '/pages/information/components/rankDetail?key=' + item.baseEntityId
				})
			},
			//取消收藏
			async addCollectInfo(index, item) {
				// let res = await addCollectInfo(item.id,item.businessType,this.userId,'uncollect',this.token);
				let res = await this.$myRequest({
					url: '/op/basePortalModelCollectInfos/addCollectInfo',
					method: 'post',
					headers: {
						token: this.token
					},
					data: {
						collectType: "uncollect",
						modelId: item.baseEntityId,
						modelType: "message",
						// modelType: item.businessType,
						userId: this.userId
					}
				})
				if (res.status == 200) {
					this.collectList.splice(index, 1);
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? "取消收藏成功" : "Success Cancel the like",
						type: 'success',
					})
				} else {
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh' ? "取消收藏失败" : "Fail Cancel the like",
						type: 'error',
					})
				}
			},

			// 判断是否为数组
			isArray(data) {
				return Array.isArray(data) === true ? true : false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCollection {
		.bg {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: #fff;
			z-index: -1;
		}

		.line-h {
			height: 1px;
			background-color: #eee;
			margin: 10upx 0;
		}

		.loading {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;

			.fixbottom {
				position: fixed;
				bottom: 0;
				z-index: 999;
			}
		}

		.collectList {
			display: flex;
			flex-direction: column;
			padding: 0 3% 50upx 3%;
			width: 100%;

			.item {
				margin: 20upx 0 0 0;
				padding: 20upx 0;
				border-bottom: 2upx solid #eee;
				display: flex;
				flex: 1;

				&:last-of-type {
					border: none
				}

				.thumb {
					width: 200upx;
					margin-right: 3%;
					position: relative;
					overflow: hidden;
					display: flex;
					align-items: center;

					.img {
						width: 100%;
						display: block;
					}
				}

				.info {
					flex: 1;
					margin-right: 10px;

					.label {
						font-size: 24upx;
						color: #666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-bottom: 20upx;

						&.hasThumb {
							margin-bottom: 12upx;
						}

						.follow {
							background-color: #0081FF;
							color: #fff;
							padding: 4upx 10upx;
							border-radius: 6upx;
							margin-left: 10upx;
						}
					}

					.tags {
						display: flex;
						justify-content: space-between;
						width: 100%;

						&.hasThumb {
							width: 90%;
						}

						.textitem {
							margin-right: 20upx;
							background: #EBF3FF;
							padding: 4upx 8upx;
							color: #3386F1;
							font-size: 12px;
						}

						.date {
							font-size: 24upx;
							color: #999;
						}
					}

					.mulimgs {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						align-items: center;

						.imgitem {
							width: 30%;
							height: 140upx;
							margin: 16upx 16upx 0 0;
							position: relative;
							overflow: hidden;

							&:last-of-type {
								margin-right: 0
							}

							.img {
								display: block;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
</style>