dl_uniapp/pages/notice/card-item.vue

<template>
	<view class="dl-components">
		<view class="card-dom " v-for="(item,index) in dataList">
			<!-- 多选框--管理状态或者选择名片时使用 -->
			<view class="choose-dom" v-if="ifChoose&&status==0">
				<uni-data-checkbox v-model="item.choosed" :disabled="item.canUse=='0'" multiple
					:localdata="checkboxArray" @change="chooseItem()" />
			</view>
			<view :class="['right-content',item.choosed.length>0?'click':'']">
				<view class="card-title">
					<!-- 需要根据平台code取对应的图片 TODO -->
					<image :src="'/static/platform/'+item.platformCode+'.png'" mode="aspectFit"></image>
					<text>{{item.platformName}}博主</text>
					<!-- <view class="edit-text" @click="edit()">
						<text v-if="1==item.approvalStatus" style="color:#5986F2;">已审核</text>
						<text v-else-if="0==item.approvalStatus" style="color:#FC1F3E ;">审核中</text>
						<text v-else>未通过</text>
					</view> -->
					<view class="edit-text">
						<text v-if="!item.ifChecked" style="color:#F97A35;">待定</text>
						<text v-else style="color:#5986F2 ;" @click="chooseOk(item)">合适</text>
					</view>
				</view>
				<view class="card-content">
					<view class="card-person-info">
						<view class="card-name">
							<view>{{ item.accountName }}</view>
						</view>
						<view class="detail-text">
							<view class="fans-dom">
								粉丝：{{ formatNumberWithUnits(item.fansNum) }}
							</view>
						</view>
					</view>
				</view>
				<!-- <view v-if="ifEdit" @click="remove(item.id)" :class="['edit-dom',item.choosed.length>0?'':'no-choose']">
					删除
				</view>
				<view v-else :class="['edit-dom',item.choosed.length>0?'':'no-choose']" @click="edit(item.id)">编辑
				</view> -->
				<view :class="['edit-dom','edit-dom-2']" @click="goIndex(item)">主页
				</view>
				<view v-if="status==0" :class="['edit-dom']" @click="chooseCardVal(item.id)">{{"合适"}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatNumberWithUnits
	} from '@/utils/common.js'
	import config from '@/config'
	export default {
		props: {
			dataList: {
				type: Array,
				default: []
			},

			ifChoose: {
				type: Boolean,
				default: false
			},

			status: {
				default: 0
			}
		},
		data() {
			return {
				checkboxArray: [{
					text: '',
					value: true
				}],
			}
		},
		methods: {
			chooseItem() {
				console.log(this.dataList, "dataList")
				this.$emit("updateList", this.dataList)
			},
			chooseOk() {

			},
			formatNumberWithUnits(num) {
				return formatNumberWithUnits(num)
			},
			/**
			 * 去名片所有者主页
			 */
			goIndex(item) {
				this.$emit("goIndex", item)
			},
			/**
			 * 将名片置为合适或不合适
			 */
			chooseCardVal(value) {

				this.$emit("chooseCardVal", value)
			}
		}
	}
</script>

<style lang="scss">
	.dl-components {

		.card-dom:first-child {
			margin-top: 20rpx;
		}

		.card-dom {
			width: 100%;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: start;
			position: relative;

			.choose-dom {
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: start;
			}

			.edit-dom {
				right: 0;
				bottom: 0;
				position: absolute;
				padding: 10rpx 30rpx;
				font-size: 25rpx;
				color: white;
				background-color: #FC1F3E;
				border-radius: 15rpx 0 15rpx 0;
			}

			.edit-dom-2 {
				right: 130rpx;
			}

			.no-choose {
				right: -3rpx !important;
				bottom: -3rpx !important;
				padding: 10rpx 33rpx 13rpx 30rpx !important;
				border-radius: 15rpx 0 20rpx 0 !important;
			}

			.right-content {
				flex: 1;
				width: 100%;
				border: 3rpx solid white;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: white;
				position: relative;
				z-index: 10;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;

				.card-title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						padding-left: 10rpx;
						flex: 1;
					}

					.edit-text {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						text-align: right;
						width: 150rpx;
					}
				}

				.card-content {
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 15rpx;
					}

					.card-person-info {
						padding-left: 20rpx;
						flex: 1;
						display: flex;
						align-items: self-start;
						justify-content: center;
						flex-direction: column;

						.card-name {
							font-weight: bold;
							font-size: 32rpx;
						}

						image {
							margin-left: 10rpx;
							width: 20rpx;
							height: 20rpx;
						}

						.detail-text {
							width: 100%;
							display: flex;
							color: #363636;
							align-items: center;
							justify-content: start;
							font-size: 24rpx;
							padding: 5rpx 0;

							.fans-dom {
								width: 30%;
							}

							.nickname-dom {
								flex: 1;
							}
						}
					}
				}
			}

		}
	}
</style>