cyzh-SoundOfMusic-H5/pages/activityList/mine/agent/myPromote.vue

<template>
	<view>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" inactive-color="#b5b7b6" active-color="#000000" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view class="container" v-show="current == 0">
			<view class="flex align-center text-center text-sm text-bold padding-sm">
				<view style="width: 10%">头像</view>
				<view style="width: 25%">用户名</view>
				<view style="width: 25%">加入时间</view>
				<view style="width: 25%">加入方式</view>
				<view>我的收益</view>
			</view>
			<block v-for="(item, index) in userList">
				<view class="flex align-center text-center padding-sm text-sm text-bold">
					<view style="width: 10%">
						<u-avatar :src="item.avatar" size="60"></u-avatar>
					</view>
					<view class="text-cut" style="width: 25%">{{item.name}}</view>
					<view style="width: 25%">{{item.joinTime}}</view>
					<view style="width: 25%">{{item.type}}</view>
					<view style="width: 12%;color: #ffaa6c;">￥{{item.income}}</view>
				</view>
			</block>
		</view>
		<view v-show="current == 1">
			<block v-for="(item, index) in storeList" :key="index">
				<view class="container flex align-center">
					<view class="margin">
						<u-avatar :src="item.avatar"></u-avatar>
					</view>
					<view style="width: 55%;">
						<view class="text-lg text-black text-bold">{{item.name}}</view>
						<view class="text-sm margin-tb-xs">加入时间：{{item.joinTime}}</view>
						<view class="text-sm">加入方式：{{item.type}}</view>
					</view>
					<view style="color: #fe9447;font-size: 36upx;font-weight: bold;">￥{{item.income}}</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '推广用户'
				}, {
					name: '推广商户'
				}],
				current: 0,
				userList: [
					{avatar: '/static/avatar.png', name: '德得信赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
					{avatar: '/static/avatar.png', name: '德芙值信赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
					{avatar: '/static/avatar.png', name: '德芙值得赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
					{avatar: '/static/avatar.png', name: '德芙值得信赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
					{avatar: '/static/avatar.png', name: '德信赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
					{avatar: '/static/avatar.png', name: '德信赖', joinTime: '2021.05.06', type: '扫描二维码', income: '60'},
				],
				storeList: [
					{avatar: '/static/avatar.png', name: '麦当劳', joinTime: '2021.05.06', type: '扫描二维码', income: '600'},
					{avatar: '/static/avatar.png', name: '肯德基', joinTime: '2021.05.06', type: '面谈', income: '600'},
					{avatar: '/static/avatar.png', name: '粒上皇', joinTime: '2021.05.06', type: '洽谈', income: '600'},
					{avatar: '/static/avatar.png', name: '脉动饮料', joinTime: '2021.05.06', type: '聊天', income: '600'},
					{avatar: '/static/avatar.png', name: '黄焖鸡米饭', joinTime: '2021.05.06', type: '入股', income: '600'},
				]
			}
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style>
	.container {
		background-color: #ffffff;
		margin: 30upx;
		border-radius: 16upx;
	}
</style>