partnerApp/pages/components/card.vue

<template>
	<view>
		
	<block v-for="(item,index) in cardData" :key="index">
	<view class="card">
		<view class="dis j-s card-title">
			<view>
				<text style="font-size: 16px;">{{item.userName}}</text>
				<image v-if="item.level==1 " style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie1.png" mode=""></image>
				<image v-if="item.level==2 "  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie.png" mode=""></image>
				<image v-if="item.level==3 "  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie3.png" mode=""></image>
				<image v-if="item.level==4"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie4.png" mode=""></image>
				<image v-if="item.level==5"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie5.png" mode=""></image>
				<image v-if="item.level==6"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/jibie6.png" mode=""></image>
			</view>
			<text v-if="isStudio" @click="detail(item)">详情
			<image style="display: inline-block; width: 9px;height:9px;vertical-align: -1px;" src="/static/icon/right.png" mode=""></image></text>
		</view>
		<view class="card-con dis j-c a-c">
			<view v-if="!isStudio">
				<text>{{item.suggestName || '无'}}</text>
				<text>推荐人</text>
			</view>
			<view >
				<text>{{item.teamManNum}}</text>
				<text>会员总人数</text>
			</view>
			<view> 
				<text>{{item.sumPremium}}</text>
				<text>总保费</text>
			</view>
			<view style="border-right:none">
				<text>{{item.extractFee}}</text>
				<text>总佣金</text>
			</view>
		</view>
		<view class="card-footer dis" v-if="!isStudio">
			<text style="border-right: 1px solid #EEEEEE;" @click="partnerDetail(item)">
				<image  src="/static/icon/hehuoren.png" mode=""></image>
				合伙人（{{item.partnerNumber}}）
			</text>
			<text @click="closeInstitution(item)">
				<image  src="/static/icon/gongzuoshi.png" mode=""></image>
				工作室（{{item.workNumber}}）
			</text>
		</view>
	</view>
	</block>
	<!-- <u-loadmore style="margin-top: 5px;" v-if="data.length!=0" :status="status" />
	<o-empty v-if="data.length==0" /> -->
	</view>
</template>

<script>
	export default{
		props: {
			cardData: {
				type: Array,
				default() {
					return [];
				}
			},
			isStudio: {
				type: Boolean,
				default() {
					return false;
				}
			},
		},
		
		data(){
			return{
				chineseNumbers:[ '一', '二', '三', '四', '五', '六', '七', '八', '九'],
			}
		},
		methods:{
			partnerDetail(item){
				if(item.partnerIds.length>0){
					uni.navigateTo({
						url: "/pages/institutional/partnerDetail?key="+encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			detail(item){
				uni.navigateTo({
					url: "/pages/institutional/institutionalDetail?key="+encodeURIComponent(JSON.stringify(item))
				})
			},
			closeInstitution(item){
				if(item.leaderIds.length>0){
				uni.navigateTo({
					url: "/pages/institutional/institutionalTeam?key="+encodeURIComponent(JSON.stringify(item))
				})
				}
			},
		}
	}

</script>

<style lang="scss" scoped>
	.card{
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		margin: 10px;
		background-image: url("/static/card.png");
		background-size: 100% 100%;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(45, 217, 255, 0), rgba(45, 217, 255, 1), rgba(45, 217, 255, 0)) 1 1;
		
		.card-title{
			padding:10px 15px;
			text:first-child{
				font-weight: 600;
				font-size: 16px;
				color: #333333;
			}
			text:last-child{
				font-size: 12px;
				color: #666666;
			}
		}
		.card-con{
			padding: 10px 0;
			view{
				text-align: center;
				width: 25%;
				border-right: 1px solid #EEEEEE;
					text{
						display: block;
					}
					text:first-child{
						font-weight: 600;
						font-size: 16px;
						color: #333333;
						line-height: 18px;
					}
					text:last-child{
						font-size: 10px;
						color: #999999;
					}
				}
		}
		.card-footer{
			border-top: 1px solid #EEEEEE;
			line-height: 42px;
			image{
				display: inline-block; 
				width: 17px;
				height:17px;
				vertical-align: middle;
				margin-right: 8px;
			}
			text{
				width: 49%;
				text-align: center;
				line-height: 40px;
				font-size: 16px;
				color: #333333;
			}
		}
	}
	.sum-insurance{
		padding: 10px 0;
		view{
			text-align: center;
			width: 33.33%;
			border-right: 1px solid #EEEEEE;
				text{
					display: block;
				}
				text:first-child{
					font-weight: 600;
					font-size: 18px;
					color: #333333;
				}
				text:last-child{
					font-size: 10px;
					color: #999999;
				}
			}
	}
</style>