front-end/ghsApp/src/pagesInvite/inviteItem.vue

<template>
	<view class="invite-item">
		<image
			class="item-logo"
			:src="info.fullAvatar"
			alt="商品图"
		/>
		<view class="item-info">
			<view class="info-title">{{ info.name }} <text class="ghs-info" v-if="info.style ==2">供货商</text></view>
			<view class="info-row">
				<text class="info-tag">{{ info.adminName }}</text>
				<text class="info-tag">{{ info.mobile }} </text>
				<text class="info-tag light">{{ info.fee }} </text>
			</view>
		</view>
		<view :class="['status']">
			<text v-if="info.status == '2'" :class="['iconfont', 'icondagou']"> </text>
			<text v-else class="status-name">{{ getStatusName }}</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		info: {
			required: true
		}
	},
	computed: {
		getStatusName() {
			let name = "";
			switch (this.info.status) {
				case "1":
					name = "待审核";
					break;
				case "2":
					name = "试用中";
					break;
				case "3":
					name = "未通过";
					break;
				case "4":
					name = "已购买";
					break;
				case "5":
					name = "已失效";
					break;

				default:
					break;
			}
			return name;
		}
	}
};
</script>

<style lang="scss" scoped>
.invite-item {
	margin-bottom: 3upx;
	padding: 30upx;
	display: flex;
	align-items: center;
	box-shadow: 0upx 1upx 0upx 0upx #eeeeee;
	background-color: #fff;
	.item-logo {
		margin-right: 20upx;
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
	.item-info {
		flex: 1;
		margin-right: 20upx;
		.info-title {
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
		}
		.ghs-info{
			color:#BBBB44;
			font-size:19upx;
			margin-left:20upx;
			border:1upx solid #BBBB44;
			border-radius: 10upx;
			padding:0 4upx 0 4upx;
		}
		.info-row {
			margin-top: 10upx;
			display: flex;
			align-items: center;
		}
		.info-tag {
			margin-right: 20upx;
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			&.light {
				color: $redColor;
			}
		}
	}
	.status {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
		width: 100upx;
		color: $redColor;
		.status-name {
			margin-top: 10upx;
			font-size: 26upx;
		}
		.icondagou {
			font-size: 46upx;
			color: $mainColor;
		}
		// &.primary {
		// 	color: #3385ff;
		// }
		// &.gray {
		// 	color: #cccccc;
		// }
		// &.warn {
		// 	color: #ffaf1d;
		// }
		// &.fail {
		// 	color: $redColor;
		// }
	}
}
</style>