rice-front/pages_order/mine/recommend.vue

<template>
	<view class="page">
		<navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="search">
			<uv-search 
			placeholder="会员ID/昵称" 
			bgColor="#fff" 
			@search="getData"
			@custom="getData"
			v-model="queryParams.title"></uv-search>
		</view>
		
		<view class="top">
			<view class="top-text">
				<view>{{ total }}</view>
				<view>直推人数</view>
			</view>
		</view>
		<view class="cell">
			<!-- <view class="cell-top">推广明细</view> -->
			<view class="cell-box" 
			:key="index"
			v-for="(item,index) in list">
				<view class="headImage">
					<image :src="item.headImage" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view
					style="width: 300rpx;">
						<text>昵称：</text>
						{{ item.nickName }}
					</view>
					<view style="display: flex;align-items: center;"
					@click="$utils.copyText(item.shareId)">
						<text>三只青蛙推荐官：</text>
						{{ item.shareId && item.shareId.substring(0, 8) }}...
						<uv-icon name="empty-news" color="#aaa" size="40"></uv-icon>
					</view>
				</view>
				<view class="info">
					<view class="">
						<text>级别：</text>
						我的朋友
					</view>
					<view class="">
						<text>时间：</text>
						{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		data() {
			return {
				mixinsListApi : 'getFansPageList',
				vipType : ['普通会员', '黄金会员', '渠道商'],
			}
		},
		onLoad(e) {},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F3F3F3;
		height: 100vh;
		.search {
			position: relative;
			background: #FFFFFF;
			margin: 20rpx;
			border-radius: 41rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
		
			/deep/ .uv-search__action {
				background-color: $uni-color;
				color: #FFFFFF;
				padding: 10rpx 20rpx;
				border-radius: 30rpx;
			}
		}

		.top {
			display: flex;
			height: 200rpx;
			justify-content: center;
			align-items: center;
			color: #474747;

			.top-text {
				text-align: center;

				view:nth-child(1) {
					font-size: 78rpx;
					font-weight: 600;
				}

				view:nth-child(2) {
					font-size: 28rpx;
				}
			}
		}

		.cell {
			.cell-box{
				border-radius: 16rpx;
				margin: 20rpx;
				background-color: #FFFFFF;
				padding: 20rpx;
				display: flex;
				align-items: center;
				.headImage{
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					flex-shrink: 0;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.info{
					flex: 1;
					font-size: 22rpx;
					flex-shrink: 0;
					view{
						width: 240rpx;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
					}
					text{
						font-weight: 900;
						color: #474747;
					}
				}
			}


			.cell-top {
				padding: 40rpx 34rpx;
				color: #474747;
				font-size: 34rpx;
				font-weight: 600;
			}
		}
	}
</style>