peiwan-uniapp/pages/clerk/fans/components/orderList.vue

<template>
	  <view :id="`zp-id-${item.zp_index}`" :key="item.zp_index" v-for="(item,index) in orderList" class="order-card">
		
		<view class="main-box" :class="index == orderList.length-1 ? '':'bt'">
			<view @click="detail(item)">
				<u-avatar mode="square" size="170" :src="item.avatar"></u-avatar>
			</view>
			<view class="right-box">
				<view class="nickname-box">
					<view class="nickname">{{item.nickname}}</view>
					<view class="oline" v-if="item.onlineStatus">
						<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
						<text class="text">在线</text>
					</view>
					<view class="oline un" v-else>
						<tui-badge :scaleRatio="0.8" type="gray" dot></tui-badge>
						<text class="text">休息中</text>
					</view>
				</view>
				<view class="city">{{item.city}}</view>
				<view class="sex-box">
					<view class="sex-tag">
						<text class="tag" v-if="item.sex == 1">女</text>
						<text class="tag" v-if="item.sex == 0">男</text>
						<text class="tag">{{item.age}}岁</text>
					</view>
					<view class="fans-box" @click="fans(item)">
						<view class="fans">{{item.fansNum}}人收藏</view>
						<u-icon v-if="item.fans" name="star-fill" size="36" color="var(--ui-BG-Main)"></u-icon>
						<u-icon v-else name="star" size="36" color="#ddd"></u-icon>
					</view>
				</view>
				<view class="info">{{item.intro}}</view> 
			</view>
		</view>
		
	  </view>
  
</template>

<script>
	import TuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import TrendApi from '@/sheep/api/worker/trend';
	import sheep from '@/sheep';
	export default {
		components: {
			TuiBadge,
		},
		props: {
			virtualList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				
			}
		},
		computed: {
			orderList() {
				return this.virtualList;
			},
		},
		methods: {
			fans(e) {
				TrendApi.createClerkFans({
					workerClerkId: e.workerClerkId,
				}).then((res) => {
					if(res){
						if(e.fans){
							sheep.$helper.toast('取消收藏');
							e.fans = false;
						}else{
							sheep.$helper.toast('收藏成功');
							e.fans = true;
						}
					}
				});
			},
			detail(e) {
				this.$u.route({
					url: 'pages/clerk/detail/index',
					params: {
						id: e.workerClerkId,
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-card {
		padding: 0 10px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		flex: 1;
		
		.main-box {
			display: flex;
			padding: 10px 0;
			
			.right-box {
				display: flex;
				justify-content: center;
				flex: 1;
				margin-left: 10px;
				flex-direction: column;
				
				.nickname-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
					
					.nickname {
						font-size: 28rpx;
					}
					
					.oline {
						display: flex;
						align-items: center;
						
						.text {
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
					
					.un {
						color: rgb(100, 101, 102);
					}
				}
				
				.city {
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}
				
				.sex-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 18rpx;
					
					.sex-tag {
						font-size: 24rpx;
						
						.tag {
							margin-right: 20rpx;
						}
					}
					
					.fans-box {
						display: flex;
						align-items: center;
						
						.fans {
							font-size: 22rpx;
							color: rgb(100, 101, 102);
							margin-right: 10rpx;
						}
					}
				}
				
				.info {
					font-size: 24rpx;
					color: rgb(100, 101, 102);
					line-height: 22rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
				}
				
			}
		}
		
		.bt {
			border-bottom: 1px solid #fbf0f0;
		}
		
		.bottom-box {
			display: flex;
			justify-content: flex-end;
			
			.btn-box {
				display: flex;
				align-items: center;
			}
			
			.btn {
				background-color: #ddd;
				color: rgb(100, 101, 102);
				font-size: 22rpx;
				border-radius: 40px;
				padding: 5px 10px;
				margin-left: 10px;
				min-width: 140rpx;
				display: flex;
				justify-content: center;
			}
			
			.active {
				background-color: var(--ui-BG-Main);
				color: #fff;
			}
		}
	}
	
</style>