fbySrcm_uniapp/pages/courseManage/components/vipUserItem.vue

<template>
	<view class="list-item">
		<view class="list-item-head x-bc">
			<view class="x-f" style="flex: 1;overflow: hidden;">
				<u-avatar :src='item.avatar'></u-avatar>
				<view class="list-item-head-l">
					<view style="flex: 1;overflow: hidden;display: flex;">
						<text class="list-item-name one-t">{{item.nickName}}</text>
						<image class="list-item-copy" src="@/static/images/copy_icon.png" mode="aspectFill"></image>
					</view>
					<view class="list-item-re">注册时间：{{item.createTime?item.createTime.substring(0,10):'--'}}</view>
				</view>
			</view>
			<image class="phone" src="@/static/logo.png" mode="aspectFill"></image>
		</view>
		<view class="list-item-desc">
			<view class="taglist">
				<view><u-tag text="归属消失殆尽" size="mini" color="#1677ff" bgColor="#fff" borderColor="#fff"></u-tag></view>
				<view v-for="(tag,i) in item.tags ? item.tags.split(',') : []">
					<u-tag :text="tag" size="mini" color="#999" bgColor="#f5f5f5" borderColor="#f5f5f5"></u-tag>
				</view>
			</view>
			<!-- <view style="margin-top: 5px;">
				<text class="label" style="color:red;margin-right: 20px;">停止看课{{item.watchCount || 0}}天</text>
				<text class="label">参与营期</text><text class="value-num">{{item.watchCount || 0}}</text>
				<text class="label">缺课数量</text><text class="value-num" style="color:red">{{item.watchComlpleteCount || 0}}</text>
			</view> -->
		</view>
		<view class="list-item-footer x-f">
			<view class="list-item-footer-btn footer-tagbtn x-f" @click="openModel('tag',item)">改标签</view>
			<view class="list-item-footer-btn footer-red x-f" @click="openModel('tag',item)">禁用</view>
			<view class="list-item-footer-btn footer-red x-f" @click="openModel('tag',item)">更换归属</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				item: {
					tags: '0000,小红,标签'
				}
			}
		},
		methods: {
			openModel() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item{
		padding: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 12px;
		&-head {
			.phone {
				flex-shrink: 0;
				width: 30px;
				height: 30px;
			}
			&-l {
				flex: 1;
				overflow: hidden;
				margin-left: 10px;
				margin-right: 10px;
			}
		}
		&-copy {
			width: 20px;
			height: 20px;
		}
		&-re {
			font-size: 10px;
			margin-top: 5px;
		}
		&-desc {
			padding: 5px;
			color: #999;
			font-size: 12px;
		}
		.label {
			margin-right: 4px;
		}
		.value-num {
			margin-right: 18px;
			color: #222;
			font-weight: bold;
		}
		.taglist {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			color: #555;
			padding-top: 5px;
			view {
				margin: 0 5px 5px 0;
			}
		}
		&-footer {
			justify-content: flex-end;
			padding: 6px 0;
			.footer-tagbtn {
				color: #1677ff;
				background-color: #e7f2fe;
				border: 1px solid #c9e1fb;
			}
			.footer-red {
				color: #f93e3e;
				background-color: #fae7e7;
				border: 1px solid #f7a1a1;
			}
			&-btn {
				height: 26px;
				padding: 0 10px;
				margin-left: 10px;
				background-color: #f5f5f5;
				border-radius: 25px;
				font-weight: 400;
				font-size: 10px;
				line-height: 26px;
				border: 1px solid #f5f5f5;
				box-sizing: border-box;
			}
		}
	}
</style>