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

<template>
	<view class="myFollw">
		<view class="bg"></view>
		<u-navbar :back-icon-color="'#fff'" :is-back="true" :border-bottom="true" :back-text="$t('common.Back')"
			:background="{background:'#1777FE'}" :back-text-style="{color:'#fff'}" :custom-back="back" :title="title"
			title-color="#fff">
			<!-- <view slot="right" class="edit" @click="editMyFollow(menuIndex)">编辑</view> 后期可能会用-->
		</u-navbar>
		<view class="menus" v-if="menuList.length>0">
			<u-tabs-swiper ref="uTabs" :list="menuList" :current="current" @change="tabsChange" :is-scroll="true"
				:bar-height="2" :bar-width="60" swiperWidth="750">
			</u-tabs-swiper>
		</view>
		<view class="followList" v-if="followList.length>0">
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(pageitem, pageidex) in followList" :key="pageidex">
					<scroll-view scroll-y style="height:100%;width:100%;background:#fafafa"
						@scrolltolower="onreachBottom">
						<view class="page" v-for="(item, index) in pageitem.list" :key="index">
							<view class="item" @click="showDetial(item,modelType)" v-if="item.followName!='已删除'">
								<view class="thumb">
									<image class="ui-img" :src="item.bannerImg" @error="showErrorImg(item)"></image>
								</view>
								<view class="info">
									<view class="label">{{item.followName}}</view>
									<view class="other date" v-if="swiperCurrent==0">
										<!--项目-->
										<text
											style="margin-right:20upx;color:#aaa;font-size:20upx">{{$t('common.FollowDate')}}</text>
										<text
											style="color:#aaa;font-size:20upx">{{formatDate(item.followSetUpDate)}}</text>
									</view>
									<view class="other qiye" v-if="swiperCurrent==1">
										<text
											style="margin-right:20upx;color:#aaa;font-size:20upx">{{item.followUnitCountry}}</text>
										<text style="color:#aaa;font-size:20upx">{{item.unitLabel}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="nodata" v-if="!showLoading && followList[swiperCurrent].list.length==0"
							style="text-align: center;margin-top: 120upx;">
							<view class="imgBox" style="height:400upx;margin-bottom:60upx">
								<image src="../../../static/img/public/7.png" style="width: 80%;margin:10%"
									mode="widthFix"></image>
								<text style="font-size:28upx;color:#ccc">{{$t('common.Nodata')}}</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 页面优化提示 -->
		<view class="loading" v-if="showLoading" :class="{fixbottom:true}">
			<u-loadmore :status="status" iconType="flower" :load-text="{loading: $t('Loading')}" />
		</view>

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

<script>
	import {
		getFollowModelNumByUser,
		saveFollowModel
	} from '@/api/operation/basePortalModelFollowInfo'
	import {
		getPortalMyFollowMode
	} from '@/api/userCenter/myFollow'
	import UNavbar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		name: 'MyFollow',
		components: {
			UNavbar,
		},
		data() {
			return {
				defaultImgPath: 'https://m.geidcp.com/api/file/pub/',
				title: '',
				current: 0,
				swiperCurrent: 0,
				flag: false,
				pageNo: 1,
				totalPage: 0,
				pageSize: 10,
				modelType: '',
				menuList: [],
				followList: [],
				showLoading: true,
				status: 'loading',
				token: '',
				userId: '',
			}
		},
		onLoad(e) {
			this.title = this.$i18n.locale == 'zh' ? '我的关注' : 'My Attention';
		},
		created() {
			this.getFollowModelNumByUser();
		},
		onShow() {
			this.token = uni.getStorageSync('Auth-Token') ? 'Bearer ' + uni.getStorageSync('Auth-Token') : '';
			this.userId = uni.getStorageSync('user') ? JSON.parse(uni.getStorageSync('user')).id : '';
			// if(!this.token){
			// 	uni.navigateTo({url:'/pages/public/login?back=1'})
			// }else{

			// }
		},
		methods: {
			// 获取选项卡标题与默认项的数据列表
			async getFollowModelNumByUser() {
				let res = await this.$myRequest({
					url: '/op/basePortalModelFollowInfos/followModelNumByUser',
					data: {
						language: this.$i18n.locale.toUpperCase()
					}
				})
				if (res.status != 200) {
					this.showLoading = false;
					this.menuList = [];
					this.followList[0] = {
						list: []
					}
				} else {
					if (res.data.modelTypeMap.length > 0) {
						for (let i = 0; i < res.data.modelTypeMap.length; i++) {
							this.$set(res.data.modelTypeMap[i], 'name', res.data.modelTypeMap[i]['modelName']);
							this.followList[i] = {
								list: []
							}
						}
						this.menuList = res.data.modelTypeMap;
						this.modelType = res.data.modelTypeMap[0].modelType;
						this.getPortalMyFollowModel(0);
					}
				}
			},

			// 获取不同项目的数据列表
			async getPortalMyFollowModel(index, loadmore) {
				let data = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					modelType: this.modelType,
					language: this.$i18n.locale.toUpperCase()
				}
				let res = await this.$myRequest({
					url: '/op/basePortalModelFollowInfos/getPortalMyFollowModel',
					headers: {
						token: this.token
					},
					data
				})
				this.showLoading = false;
				if (res.data.models) {
					this.totalPage = res.data.page.totalPage ? parseInt(res.data.page.totalPage) : 0;
					for (let i = 0; i < res.data.models.length; i++) {
						if (Array.isArray(res.data.models[i].bannerImg) && res.data.models[i].bannerImg.length > 0) {
							if (res.data.models[i].bannerImg[0] == "") {
								this.$set(res.data.models[i], 'bannerImg',
									'https://m.geidcp.com/api/file/pub//def/projectdefault.png');
							} else {
								this.$set(res.data.models[i], 'bannerImg', this.defaultImgPath + res.data.models[i][
									'bannerImg'
								][0]);
							}
						} else this.$set(res.data.models[i], 'bannerImg', this.defaultImgPath + res.data.models[i]
							.bannerImg);
					}
					if (!loadmore) this.followList[index].list = res.data.models; // 不需要加载更多
					else this.followList[index].list = [...this.followList[index].list, ...res.data
						.models
					]; // 加载更多
				}
			},

			//路由后退一步
			back() {
				// #ifdef H5
				history.back()
				// #endif
				// #ifndef H5
				uni.navigateBack()
				// #endif
			},
			// 查看项目详情
			showDetial(item, modelType) {
				let url;
				console.log(item)
				switch (modelType) {
					case "project": //项目
						url = "/pages/country/projectPresentation/projectPresentationDetails?id=" + item.id
						break;
					case "enterprise": // 企业
						url = "/pages/country/enterprise/enterpriseDetail?baseEntityId=" + item.id
						break;
					case "meeting": // 会议
						url = ""
						break;
					case "country": // 国别
						url = '/pages/country/countryList/countryDetail?baseEntityId=' + item.id;
						break;
					case "activity": // 活动
						url =
							"/pages/cooperationExchange/cooperationExchangeList/activitiesInfo?ActivitesId=" +
							item.id
						break;
					case "exhibition": // 会展
						url = '';
						break;
					case "researchResources": // 调研资源
						url = "/pages/resourceSharing/resourceDetails?entityId=" + item.entityId;
						break;
					case "investmentGuidelines": //投资指引
						url = '/pages/financialService/investmentGuide/guideDetial?id=' + item.id;
						break;
					case "researchResult": // 研究成果
						url = "/pages/resourceSharing/resultDetails?entityId=" + item.entityId;
						break;
					case "financialInstitution": //金融机构
						url = '/pages/financialService/financialOrgans/organsDetial?baseEntityId=' + item.id;
						break;
				}
				if (url) uni.navigateTo({
					url
				})
			},

			// 处理错误图像
			showErrorImg(item) {
				this.$set(item, 'bannerImg', 'https://m.geidcp.com/api/file/pub//def/projectdefault.png')
			},
			// tabs通知swiper切换
			async tabsChange(index) {
				this.swiperCurrent = index;
				this.pageNo = 1;
				this.showLoading = true;
				this.modelType = this.menuList[index].modelType;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.followList[this.swiperCurrent].list = [];
				this.current = current;
				this.pageNo = 1;
				this.showLoading = true;
				this.modelType = this.menuList[this.current].modelType;
				this.getPortalMyFollowModel(this.current);
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.pageNo < this.totalPage) {
					this.pageNo++;
					this.showLoading = true;
					this.getPortalMyFollowModel(this.swiperCurrent, 'loadmore')
				} else {
					if (this.showLoading != false) this.showLoading = false;
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	.myFollw {
		.bg {
			position: fixed;
			width: 100%;
			right: 0;
			bottom: 0;
			top: 0;
			right: 0;
			background-color: #fafafa;
			z-index: -1;
		}

		width:100%;

		.edit {
			height: 80upx;
			line-height: 80upx;
			margin-right: 30upx;
			color: #fff;
			display: flex;
			align-items: center;
			position: relative;
			overflow: hidden;
		}

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

		.loading {
			width: 100%;
			padding: 20rpx 0;
			background-color: #fafafa;

			/deep/ .u-load-more-wrap {
				margin-top: 50rpx;
			}

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

		.nomore {
			position: flex;
			bottom: 0;
			text-align: center;
			height: 50upx;
			line-height: 50upx;
			font-size: 24upx;
			color: #666;
			margin-top: 1%;
		}

		.menus {
			width: 750rpx;
			height: 80rpx;
			background-color: red;

			/deep/ .u-tabs {
				padding: 10rpx 0;
			}
		}

		.followList {
			display: flex;
			flex-direction: column;
			position: fixed;
			padding: 20upx 0;
			width: 100%;
			height: 92%;

			/deep/ uni-swiper {
				height: 92%;
			}

			.item {
				display: flex;
				margin: 30upx;
				background-color: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 0 5px 3px #eee;

				.thumb {
					width: 200upx;
					min-height: 150upx;
					position: relative;
					overflow: hidden;

					.ui-img {
						width: 96%;
						height: 96%;
						display: block;
						margin: auto auto;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
					}
				}

				.info {
					flex: 1;
					padding: 16rpx;
					display: flex;
					flex-direction: column;

					.label {
						font-size: 24upx;
						display: flex;
						width: 100%;
						flex: 1;
						align-self: flex-start;
					}

					.other {
						align-self: flex-start;
						display: flex;

					}

					.tags {
						.textitem {
							margin-right: 20upx;
							background-color: #0081FF;
							color: #fff;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>