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

<template>

	<view class="card_box">


		<view class="item_box rx-bc" v-for="(_item,i) in columns" :key="i">
			<view class="perce50" :class="val.className" v-for="(val) in _item" :key="val.prop">
				<view class="item_box rx-sc" v-if="val.type=='title'">
					<view class="round" v-if='index'>{{index}}</view>
					<view class="orderId" :style="{marginLeft: index?'16rpx':''}">{{item[val.prop]||''}} </view>
				</view>
				<view class="item_one rx-sc" v-else-if="val.type=='action'">
					<view class="lable">{{val.label}}</view>
					<view class="text">
						<u-button :plain="true" :hairline="true" size='mini' :type="btn.btnType" v-if="judge(btn)"
							:text="btn.name" @click="action(btn)" v-for="(btn,bI) in btnList" :key="bI"></u-button>
					</view>

				</view>
				<view class="item_one rx-sc" v-else>
					<view class="lable">{{val.label}}</view>
					<view class="text" v-if="val.formatter">{{val.formatter(item)||''}}</view>
					<view class="text" v-else-if="val.slot">
						<slot :name="val.slot"> </slot>

					</view>
					<view class="text" v-else>{{item[val.prop]||''}}</view>
				</view>

			</view>
		</view>

	</view>

</template>

<script>
	export default {
		props: {

			btnList: {
				type: Array,
				default: () => []
			},

			item: {
				type: Object,
				default: () => ({})
			},
			columns: {
				type: Array,
				default: () => []
			},
			index: '',

		},
		computed: {
			judge() {
				return (item) => {
					if (item.judge) {
						let is = true
						item.judge.forEach(({
							key,
							value
						}) => {
							if (!value.includes(this.item[key])) {
								is = false
							}
						})
						return is
					} else {
						return true
					}
				}

			}
		},
		data() {
			return {

			}
		},
		methods: {
			action(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: item.pageUrl + '?id=' + this.item.id+(item.query||'')
					})
				} else {
					this.$emit(item.apiName)
				}

			},
		}

	}
</script>


<style lang="scss" scoped>
	.card_box {
		width: 750rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 2rpx solid #E1E1E1;

		.rx-bc {
			align-items: start;
			flex-flow: row wrap;
			>view{
				margin-top: 8rpx;
			}
		}

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

		.item_box {
			// margin-top: 10rpx;

			.text {
				display: flex;
				// padding-right: 6rpx;
				flex: 1;

				uni-button:after {
					border: none;
				}

				;

				uni-button {
					width: 100rpx;
					// height: 50rpx;
					margin-left: 10rpx;
					margin-right: 0;
					color: #fff !important;
					border: none;
					background: #157a2c;


					// border: none;

					// /deep/uni-text {
					// 	font-size: 26rpx !important;
					// }
				}
			}

			.round {
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 50%;
				background: $theme-color;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
			}

			.orderId {
				color: #000;
				font-family: PingFang HK;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 600;

			}

			.item_one {
				width: 100%;
				font-size: 26rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 38rpx;
				word-wrap: break-word;

			}

			.gylx {
				color: $theme-color;
			}

			.perce50 {
				min-width: 50%;
			}

			.perce100 {
				width: 100% !important;
			}
		}
	}

	/deep/.u-input {
		padding: 0 !important;
		height: 38rpx !important;
		font-size: 26rpx !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		font-size: 26rpx !important;
	}

	/deep/.uni-date-editor--x .uni-date__icon-clear {
		border: none !important;
	}

	/deep/.uni-date__x-input,
	/deep/.uni-date-x {
		padding: 0 !important;
		height: 38rpx !important;
		font-size: 26rpx !important;
	}

	/deep/.input-value {
		font-size: 26rpx !important;
		height: 38rpx !important;

		uni-text {
			font-size: 26rpx !important;
		}
	}

	/deep/.u-textarea {
		padding: 2px !important;
	}

	/deep/.u-textarea__field {
		font-size: 26rpx !important;
	}
</style>