aiot-app/pages/pcs/components/myCard.vue

<!-- myCard.vue（增强版，添加单选功能） -->
<template>
	<view class="card_container">
		<view class="card_box">
			<!-- 标题区域 -->
			<view class="header_box" v-if="title">
				<view class="title_left">
					<view class="round" v-if="index">{{ index }}</view>
					<view class="orderId" :style="{ marginLeft: index ? '16rpx' : '' }">{{
						title
					}}</view>
				</view>
				<!-- 状态标签 -->
				<view class="status-tag" v-if="status">{{ status }}</view>
				<!-- 单选按钮 -->
				<view class="radio-tag" v-if="showRadio" @click.stop="handleRadioClick">
					<u-radio-group v-model="radioValueModel" placement="row">
						<u-radio :name="item.id" :iconSize="32" activeColor="#3c9cff"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="item_box rx-bc" v-for="(_item, i) in columns" :key="i">
				<template v-for="val in _item">
					<view class="perce50" :class="[val.className, { 'full-width': val.isFullWidth }]"
						:style="val.style" :key="val.prop" v-if="!val.isNone">
						<!-- 操作行 -->
						<view class="item_one rx-sc" v-if="val.type == 'action'">
							<view class="lable">{{ val.label }}</view>
							<view class="text" style="flex-wrap: wrap">
								<template v-for="(btn, bI) in btnList">
									<u-button :plain="true" :hairline="true" size="mini" :type="btn.btnType"
										v-if="judge(btn)" :text="btn.name" @click="action(btn)" :key="bI">
									</u-button>
								</template>
							</view>
						</view>
						<!-- 普通信息行 -->
						<view class="item_one rx-sc kk" v-else>
							<view class="lable">{{ val.label }}</view>
							<view class="text" :class="val.valueClass" v-if="val.formatter">{{
								val.formatter(item) || ""
							}}</view>
							<view class="text" :class="val.valueClass" v-else-if="val.slot">
								<slot :name="val.slot"></slot>
							</view>
							<view class="text" :class="val.valueClass" v-else>{{
								item[val.prop] || ""
							}}</view>
						</view>
					</view>
				</template>
			</view>

			<!-- 查看详情 -->
			<view class="footer-link" v-if="showDetail" @click="goDetail">
				<text>查看详情</text>
				<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			btnList: {
				type: Array,
				default: () => []
			},
			item: {
				type: Object,
				default: () => ({})
			},
			columns: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: ""
			},
			status: {
				type: String,
				default: ""
			},
			index: {
				type: [String, Number],
				default: ""
			},
			showDetail: {
				type: Boolean,
				default: true
			},
			// 新增：是否显示单选按钮
			showRadio: {
				type: Boolean,
				default: false
			},
			// 新增：当前选中的值（父组件传入）
			radioValue: {
				type: [String, Number],
				default: null
			}
		},
		computed: {
			judge() {
				return (item) => {
					if (item.judge) {
						let is = true;
						item.judge.forEach(({
							key,
							value,
							authorities,
							fn
						}) => {
							if (authorities) {
								is = this.$isAuthorities(authorities);
							}
							if (value && !value.includes(this.item[key])) {
								is = false;
							}
							if (fn) {
								is = fn(this.item);
							}
						});
						return is;
					} else {
						return true;
					}
				};
			},
			radioValueModel: {
				get() {
					return this.radioValue;
				},
				set(val) {
					// 当单选值变化时触发事件
					if (val === this.item.id) {
						this.$emit('radioChange', this.item);
					}
				}
			}
		},
		methods: {
			action(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: item.pageUrl + "?id=" + this.item.id + (item.query || ""),
					});
				} else {
					this.$emit(item.apiName);
				}
			},
			goDetail() {
				this.$emit("goDetail", this.item);
			},
			handleRadioClick() {
				// 触发选中事件，与radioChange保持一致
				this.$emit('radioChange', this.item);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.card_container {
		padding: 16rpx 0;
	}

	.card_box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;

		.rx-bc {
			display: flex;
			align-items: flex-start;
			flex-flow: row wrap;

			>view {
				margin-top: 24rpx;

				&:first-child,
				&:nth-child(2) {
					margin-top: 0;
				}
			}
		}

		.rx-sc {
			display: flex;
			align-items: flex-start;
		}

		.header_box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			position: relative;
			background: linear-gradient(135deg, #eef5ff 0%, #f5f9ff 100%);
			padding: 20rpx 24rpx;
			border-radius: 20rpx 20rpx 0 0;
			margin: -24rpx -24rpx 24rpx -24rpx;
			width: calc(100% + 48rpx);
			box-sizing: border-box;

			.round {
				width: 44rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 24rpx;
				font-weight: 600;
				flex-shrink: 0;
			}

			.orderId {
				color: #1f2b3c;
				font-size: 30rpx;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.title_left {
				display: flex;
				align-items: center;
				flex: 1;
				padding-right: 120rpx;
				overflow: hidden;
			}

			.status-tag {
				background: #e3f2fd;
				color: #2196f3;
				font-size: 24rpx;
				padding: 6rpx 20rpx;
				border-radius: 30rpx;
				font-weight: 500;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
				z-index: 1;
			}

			.radio-tag {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
				z-index: 2;
				background: transparent;

				/deep/ .u-radio-group {
					.u-radio {
						padding: 0;
						margin-right: 0;
					}
				}
			}
		}

		.item_box {
			.text {
				display: flex;
				flex: 1;

				uni-button:after {
					border: none;
				}

				uni-button {
					width: 100rpx;
					margin-left: 10rpx;
					margin-right: 0;
					color: #fff !important;
					border: none;
					background: #157a2c;
					margin-top: 3px;
				}
			}

			.kk .text {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: block;
			}

			.item_one {
				width: 100%;
				font-size: 28rpx;
				line-height: 44rpx;
				display: flex;
				align-items: flex-start;

				.lable {
					color: #8e9aae;
					flex-shrink: 0;
					margin-right: 16rpx;
					font-size: 26rpx;
				}

				.text {
					color: #1f2b3c;
					font-size: 28rpx;
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					min-width: 0;

					&.highlight {
						color: #4caf50;
					}
				}
			}

			.perce50 {
				width: 50%;
				box-sizing: border-box;
				padding-right: 20rpx;

				&:nth-child(2n) {
					padding-right: 0;
					padding-left: 20rpx;
				}
			}

			.perce100 {
				width: 100%;
			}

			.full-width {
				width: 100% !important;
				padding-left: 0 !important;
				padding-right: 0 !important;
			}
		}

		.footer-link {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 24rpx;
			padding-top: 20rpx;
			border-top: 2rpx solid #f0f2f5;
			color: #8e9aae;
			font-size: 28rpx;
			cursor: pointer;
			gap: 8rpx;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>