bocai_supplyChain_uni/components/panel/detailItem.vue

<template>
	<view class="g_bg_f">
		<view class="item g_flex_row_between" @click="handleItem" :class="{ g_pl_15: from != 'reservation-time', g_pr_15: isShowBottom }">
			<view class="g_flex_none g_flex_row_start">
				<view class="g_fs_16 g_c_6 g_flex_column_center">{{ label }}</view>
				<view v-if="labelSubStr" class="g_pl_8 g_flex_column_center g_pr_8" @click.stop="handleClickLabel">
					<view class="g_w_32 g_c_20 g_flex_c g_c_6 g_fs_12" 
						  style="border: 1px solid #ccc;border-radius: 2px;margin-top: 4rpx;"
					>{{labelSubStr}}</view>
				</view>
			</view>
			<view class="g_flex_1 g_flex_row_end v">
				<view class="g_flex_row_end b g_flex_1">
					<view class="g_flex_none g_mr_0" v-if="beforeIcon" :class="afterType == 'list' ? 'g_flex_column_end' : 'g_flex_column_center'">
						<view class="iconfont g_fs_16 g_ml_4 g_c_9" :class="beforeIcon"
							  :style="{
							  	color:remarkValue ? '#3578f6' : '#999'
							  }"
						></view>
					</view>
					<view class="g_flex_row_end item-right-area" :class="{ g_flex_1: from == 'quick' || from == 'reservation-time' || from == '' || from == 'times', ' g_ml_10': from != 'reservation-time' }">
						<view
							v-if="afterType == 'show'"
							class="g_ell_1 g_fs_16"
							:style="{
								color: valueColor,
								'font-weight': fontWeight,
							}"
						>
							{{ value ? value : "-" }}
						</view>
						<view v-if="afterType == 'time'" class="g_flex_1 310">
							<g-panel-time :timeval="value" @confirmChooseTime="getChooseTime" />
						</view>
						<view v-if="afterType == 'list'">
							<view>
								<view v-if="value.length > 0">
									<view v-for="(item, index) in value" :key="index" class="g_flex_row_end">
										<view class="g_c_3 g_fs_16 g_ml_0">{{ item.userName }}</view>
										<view class="g_c_3 g_fs_16 g_ml_6">{{ item.tel }}</view>
									</view>
								</view>
								<view v-if="value.length == 0" class="g_flex_column_center">-</view>
							</view>
						</view>
						<view v-if="afterType == 'multi'">
							<view class="g_fs_16 g_text_r" style="white-space: pre-line">
								{{ value }}
							</view>
						</view>
					</view>
					<view class="g_flex_none g_flex_column_center g_ml_2" v-if="afterIcon">
						<view class="iconfont g_fs_16 g_ml_4 g_c_9" :class="afterIcon"
							  :style="{
								  color:remarkValue ? '#3578f6' : '#999'
							  }"
						></view>
					</view>
				</view>
			</view>
		</view>
		<view class="g_h_10" v-if="isShowBottom"></view>
	</view>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default() {
				return "";
			},
		},
		value: {
			default() {
				return "";
			},
		},
		valueColor: {
			type: String,
			default() {
				return "#333333";
			},
		},
		beforeIcon: {
			type: String,
			default() {
				return "";
			},
		},
		afterIcon: {
			type: String,
			default() {
				return "";
			},
		},
		fontWeight: {
			type: String,
			default() {
				return "400";
			},
		},
		afterType: {
			type: String,
			default() {
				return "show";
			},
		},
		isShowBottom: {
			default() {
				return true;
			},
		},
		from: {
			default() {
				return "";
			},
		},
		labelSubStr: {
			default() {
				return "";
			},
		},
		remarkValue: {
			default() {
				return "";
			},
		},
	},
	methods: {
		handleItem() {
			this.$emit("clickItem");
		},
		getChooseTime(e) {
			this.$emit("confirmChooseTime", e);
		},
		handleClickLabel() {
			this.$emit("clickLabelBtn");
		},
	},
};
</script>

<style scoped>
.g70 {
	max-width: 70%;
}
</style>