xiongmao/pages/my/my-commission/my-commission.vue

<!-- 我的佣金 -->
<template>
	<view class="wrap">

		<view class="card">
			<view class="card-label">我的佣金</view>
			<view class="card-middle">
				<view class="money">
					￥
					<text>13490.28</text>
				</view>
				<button type="default" class="btn">立即提现</button>
			</view>
			<view class="card-bottom">
				<view class="card-bottom-row">
					<text class="card-bottom-row-label">累计提现</text>
					<view class="small-money">
						￥
						<text>13490.28</text>
					</view>
				</view>
				<view class="password-msg">
					修改密码
				</view>
			</view>
		</view>

		<scroll-view scroll-x="true" class="tab-list">
			<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList" :key="index"
				@click="checked(index)">
				{{item.title}}
			</view>
		</scroll-view>

		<view class="list">
			<view class="item">
				<view class="item-sidebar">
					<view class="item-name">
						商品购买
					</view>
					<view class="item-msg">2020-02-24 14:3:23</view>
				</view>
				<text :class="[num==true?'numadd':'numless']">{{num==true ? '+' : '-'}}1239.98</text>
			</view>
			<view class="item">
				<view class="item-sidebar">
					<view class="item-name">
						商品购买
					</view>
					<view class="item-msg">2020-02-24 14:3:23</view>
				</view>
				<text :class="[num==true?'numadd':'numless']">{{num==true ? '+' : '-'}}1239.98</text>
			</view>
			<view class="item">
				<view class="item-sidebar">
					<view class="item-name">
						商品购买
					</view>
					<view class="item-msg">2020-02-24 14:3:23</view>
				</view>
				<text :class="[num==true?'numadd':'numless']">{{num==true ? '+' : '-'}}1239.98</text>
			</view>
			<!-- 无内容时显示 -->
			<!-- <view class="normal-box">
				<image src="../../../static/normal-3.png" mode="widthFix"></image>
				暂无佣金明细
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '佣金明细',
				}, {
					index: 1,
					title: "提现明细",
				}],

				num: true
			}
		},
		methods: {
			checked(index) {
				this.isActive = index
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./my-commission.css";
</style>