siyu_app/pages/expert/index.vue

<template>
	<view style="position: relative;">
		<image class="page_bg" :src="info.backGround||defaultBg" mode="widthFix"></image>
		<view class="content-header">
			<image class="backicon" src="/static/image/liveStream/back_white_icon.png" mode="aspectFill" @click="$navBack()"></image>
			<view class="editinfo" v-if="info.userId&&info.userId == userId" @click="$navTo('/pages/expert/info')">编辑资料</view>
		</view>
		<u-sticky offsetTop="0" customNavHeight="0" zIndex="999">
			<view class="content-header-sticky" :style="{height:`calc(${statusBarHeight}px + 44px)`,opacity:opacity,display:showNav? 'flex':'none'}" @click.stop="">
				<image src="/static/image/black_back.png" mode="aspectFill" @click="$navBack()"></image>
				<text class="textOne" style="width: 50%;text-align: center;">{{info.nickName}}</text>
			</view>
		</u-sticky>
		<view class="content-body">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="user">
				<u-avatar :src="info.avatar||'/static/logo.png'" size="88"></u-avatar>
				<view class="user-left">
					<view class="textOne">{{info.nickName}}</view>
					<view class="levelbox">
						<image class="levelbox-icon" src="/static/image/my/intelligent_icon.png" mode="aspectFill"></image>
						<text>LV.{{info.level}}</text>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="rowbox es-pr-24">
					<view class="x-f flex">
						<view class="rowbox-item">
							<view>{{formatNum(fansCount)}}</view>
							<text>粉丝</text>
						</view>
						<view class="rowbox-item">
							<view>{{formatNum(idolCount)}}</view>
							<text>关注</text>
						</view>
						<view class="rowbox-item">
							<view>{{formatNum(favoriteNum)}}</view>
							<text>收藏</text>
						</view>
						<view class="rowbox-item">
							<view>{{formatNum(likeNum)}}</view>
							<text>获赞</text>
						</view>
					</view>
					<view class="es-ml-24">
						<image class="es-icon-80 es-mr-24" src="/static/images/other/user/dy.png" mode="aspectFill"></image>
						<image class="es-icon-80" src="/static/images/other/user/ks.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="es-pl-24 es-pr-24 es-mt-32 es-fs-26">{{info.title}}</view>
				<view class="taglist es-pl-24 es-mt-26 x-f es-fs-22">
					<view class="x-c" style="min-width: 60px;">
						<u-icon v-show="info.sex==1" class="sexicon" name="woman" color="#FF8394" size="16"></u-icon>
						<u-icon v-show="info.sex==0" class="sexicon" name="man" color="#2979ff" size="16"></u-icon>
						<text v-show="info.sex!=1&&info.sex!=0" style="margin-right: 6rpx;">未知</text>
						<text>{{info.birthDay&&$getAge(info.birthDay)|| '--'}}岁</text>
						<!-- 0男,1女,2未知 -->
					</view>
					<view class="textOne" style="max-width: 320rpx;" v-if="info.address">{{info.province}}</view>
					<view class="textOne" v-for="(tag,index) in tags" :key="index">{{tag}}</view>
				</view>
				<view class="x-f es-mt-16 es-pr-24 es-pl-24" v-if="info.userId&&info.userId != userId">
					<view class="item_btn x-c es-mr-24" @click="handleFollow">
						<template v-if="isFollow==1">
							取消关注
						</template>
						<template v-else>
							<u-icon name="plus" color="#fff" size="16" class="es-pr-14"></u-icon>关注
						</template>
					</view>
					<!-- <view class="item_btn x-c">私信</view> -->
				</view>
				<!-- <view class="x-f es-mt-24 es-pl-24 es-pr-24">
					<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
						<view class="x-f">
							<image class="icon" src="/static/image/liveStream/recommend_icon.png" mode="aspectFill"></image>
							<view class="es-ml-17 es-fs-26 es-fw-500">达人推荐</view>
						</view>
						<view class="es-fs-22 es-mt-4 es-c-99">超多性价比好物</view>
					</view>
					<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
						<view class="x-f">
							<image class="icon" src="/static/image/liveStream/my_wallet_icon.png" mode="aspectFill"></image>
							<view class="es-ml-17 es-fs-26 es-fw-500">我的钱包</view>
						</view>
						<view class="es-fs-22 es-mt-4 es-c-99">查看可提现佣金</view>
					</view>
					<view class="user-item es-pt-14 es-pb-14 es-pl-22 es-pr-22">
						<view class="x-f">
							<image class="icon" src="/static/image/liveStream/browsing_history_icon.png" mode="aspectFill"></image>
							<view class="es-ml-17 es-fs-26 es-fw-500">浏览记录</view>
						</view>
						<view class="es-fs-22 es-mt-4 es-c-99">我的访问记录</view>
					</view>
				</view> -->
				<u-sticky :offsetTop="0" :customNavHeight="customNavHeight" zIndex="999">
					<view class="tab-bar x-c es-mt-8">
						<view :class="current == 0 ? 'tab-bar-item active':'tab-bar-item'">主页</view>
						<view :class="current == 1 ? 'tab-bar-item active':'tab-bar-item'">收藏</view>
					</view>
				</u-sticky>
				<view class="es-pl-24 es-pr-24 es-pt-20 es-pb-20">
					<!-- <view class="x-bc es-pt-20 es-pb-32">
						<view class="x-f es-fs-32 es-fw-500">短视频<text class="x-f es-fs-28 es-ml-22">(6)</text></view>
						<view class="x-f es-fs-24 es-c-99">
							查看全部
							<image class="es-w-48 es-h-48" src="/static/image/hall/my_right_arrow_right_icon.png" mode="aspectFill"></image>
						</view>
					</view> -->
					<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption"> -->
						<view class="x-f video-list">
							<view class="video-item es-br-16" v-for="(item,i) in dataList" :key="i">
								<image class="video-item-img" :src="item.cover" mode="aspectFill"></image>
								<view class="textOne es-pl-20 es-pr-20 es-pt-22 es-pb-22">{{item.title}}</view>
							</view>
						</view>
					<!-- </mescroll-body> -->
				</view>
			</view>
			</mescroll-body>
		</view>
		<view class="footer x-c" v-if="info.userId&&info.userId == userId">
			<view class="x-c footer-fb" @click="$navTo('/pages/expert/releaseVideo')"><image src="/static/image/liveStream/publish_video_icon.png"></image>发布视频</view>
			<!-- <view class="x-c footer-zb"><image src="/static/image/liveStream/live_broadcast_icon2.png"></image>开直播</view> -->
		</view>
	</view>
</template>
<script>
	import { getTalentByToken,getVideoList,doFollow,checkFollow,getTalentByUserId } from "@/api/expert.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		// components: {
		// 	videoItem
		// },
		mixins: [MescrollMixin], 
		data(){
			return {
				userId: '',
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
				defaultBg: "https://cos.his.cdwjyyh.com/fs/20250509/e5fb40b2b6e640b48e5f055c786dd289.png",
				avatar:'',
				current: 0,
				customNavHeight: 22,
				showNav: false,
				opacity: 1,
				info: {},
				fansCount: 0,
				favoriteNum: 0,
				idolCount: 0,
				likeNum: 0,
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'/static/image/liveStream/video_default_img.png',
						tip: '暂无视频'
					}
				},
				dataList: [],
				user: {},
				isFollow: 0, // /是否已关注1：已关注，0：未关注
				talentUserId: '',
			}
		},
		computed:{
			formatNum(){
				return (num)=>{
					if(num>10000){
						return (num/10000.0).toFixed(1)+"万";
					}
					return num;
				}
			}
		},
		onLoad(option) {
			this.customNavHeight = this.statusBarHeight/2 + 44;
			this.user=this.$getUserInfo()
			this.userId = this.user.userId || ''
			this.talentUserId = option.userId || ''
		},
		onShow() {
			if(this.talentUserId) {
				this.getTalentInfo()
			} else {
				this.getInfo()
			}
		},
		methods: {
			getInfo() {
				getTalentByToken().then(res=>{
					if(res.code == 200) {
						this.info = res.data.fsUserTalent
						this.fansCount = res.data.fansCount
						this.favoriteNum = res.data.favoriteNum
						this.idolCount = res.data.idolCount
						this.likeNum = res.data.likeNum
					}
				})
			},
			getTalentInfo() {
				getTalentByUserId({userId: this.talentUserId}).then(res=>{
					if(res.code == 200) {
						this.info = res.data.fsUserTalent
						this.fansCount = res.data.fansCount
						this.favoriteNum = res.data.favoriteNum
						this.idolCount = res.data.idolCount
						this.likeNum = res.data.likeNum
						this.checkFollow()
					}
				})
			},
			handleFollow() {
				doFollow({talentId:this.info.talentId}).then(res=>{
					if(res.code==200) {
						if(this.isFollow == 1) {
							this.fansCount--
						} else {
							this.fansCount++
						}
						this.isFollow = this.isFollow==1?0:1
					}
					uni.showToast({
						title: res.msg
					})
				})
			},
			checkFollow() {
				checkFollow({talentId:this.info.talentId}).then(res=>{
					if(res.code == 200) {
						this.isFollow = res.isFollow || 0 
					}
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					userId:this.talentUserId||0,
					pageNum: page.num,
					pageSize: page.size
				};
				getVideoList(data).then(res => {
					if(res.code==200){
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list; 
							
						} else {
							that.dataList = that.dataList.concat(res.data.list);
							 
						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			}
		},
		onPageScroll(e) {
			if (e.scrollTop <= 136) {
				this.showNav = false
				this.opacity = 0
			} else if (e.scrollTop > 136) {
				this.opacity = e.scrollTop / 216 * 1 > 1 ? 1 :e.scrollTop / 216 * 1
				this.showNav = true
			}
		
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
@mixin u-flex($flexD, $alignI, $justifyC) {
	display: flex;
	flex-direction: $flexD;
	align-items: $alignI;
	justify-content: $justifyC;
}
.page_bg {
	width: 100%;
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}
.content-header {
	position: relative;
	width: 100%;
	height: 44px;
	padding: 12rpx 24rpx;
	padding-top: calc(var(--status-bar-height) + 12rpx);
	@include u-flex(row-reverse, center, space-between);
	&-sticky {
		background-color: #fff;
		@include u-flex(row, center, center);
		position: absolute;
		width: 100%;
		image {
			width: 64rpx;
			height: 64rpx;
			position: absolute;
			top: calc(var(--status-bar-height) + 12rpx);
			left: 24rpx;
		}
	}
}
.backicon {
	width: 64rpx;
	height: 64rpx;
	position: fixed;
	left: 24rpx;
	top: calc(var(--status-bar-height) + 12rpx);
	z-index: 998;
}
.editinfo {
	background: rgba(0,0,0,0.5);
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	padding: 15rpx 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
}
.content-body {
	font-family: PingFang SC;
	font-weight: 400;
	position: relative;
	color: #222222;
	.user {
		@include u-flex(row, flex-start, flex-start);
		padding: 40rpx 24rpx;
		&-left {
			overflow: hidden;
			padding-top: 24rpx;
			margin-left: 32rpx;
			font-weight: 500;
			font-size: 44rpx;
			color: #FFFFFF;
		}
		.levelbox {
			display: inline-flex;
			padding: 4rpx 12rpx;
			margin-top: 14rpx;
			background: linear-gradient( 90deg, #F5CE3C 0%, #E39414 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #FEF5EA;
			&-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
	.content-box {
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 24rpx 0;
	}
	.rowbox {
		text-align: center;
		@include u-flex(row, center, space-between);
		&-item {
			flex: 1;
			font-weight: 400;
			font-size: 26rpx;
			color: #757575;
			view {
				margin-bottom: 4rpx;
				font-family: DIN, DIN;
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
		}
	}
	.taglist {
		color: #757575;
		flex-wrap: wrap;
		view {
			max-width: 220rpx;
			overflow: hidden;
			padding: 8rpx 16rpx;
			background: #F3F3F4;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			box-sizing: border-box;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
		}
		.sexicon {
			margin: 0;
			padding: 0;
		}
	}
	.user-item {
		min-width: 220rpx;
		flex-shrink: 0;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #ECECEC;
		box-sizing: border-box;
		margin-right: 22rpx;
		.icon {
			height: 32rpx;
			width: 32rpx;
		}
	}
	.tab-bar {
		background-color: #fff;
		border-bottom: 2rpx solid #ECECEC;
		font-weight: 400;
		font-size: 32rpx;
		color: #757575;
		&-item {
			padding: 32rpx 40rpx;
		}
	}
	.active {
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		position: relative;
		&::after {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			content: "";
			width: 70rpx;
			height: 6rpx;
			background: #222222;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
		}
	}
	.video-list {
		flex-wrap: wrap;
		margin-right: -18rpx;
	}
	.video-item {
		width: 342rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		background: #F5F7FA;
		overflow: hidden;
		position: relative;
		&-img {
			width: 100%;
			height: 280rpx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
		}
	}
}
.item_btn {
	flex: 1;
	height: 70rpx;
	background: #FF5C03;
	border-radius: 16rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	background-color: #fff;
	padding: 20rpx 24rpx;
	padding-bottom: calc(var(--window-bottom) + 20rpx);
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 34rpx;
	color: #FFFFFF;
	&-fb {
		flex: 1;
		height: 112rpx;
		background: linear-gradient( 90deg, #FF5C03 0%, #F0964C 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	&-zb {
		flex: 1;
		margin-left: 18rpx;
		height: 112rpx;
		background: linear-gradient( 90deg, #4DC68D 0%, #7CD8A8 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
	image {
		height: 48rpx;
		width: 48rpx;
		margin-right: 16rpx;
	}
}
</style>