apply-assistant-v3/components/panel/formItem.vue

<template>
	<view class="g-components-item">
		<view class="m-set g_bg_f g_radius_8 u-skeleton ">
			<view
				class="item g_flex_row_start"
				v-for="(item, index) in list"
				:key="index"
				:hover-class="item.type == 'slot' ? 'none' : 'g_bg_e'"
				@click="handleClickItem(item, index)"
				:style="{
					'padding-top': (item.pColumn ? item.pColumn : 19) + 'px',
					'padding-bottom': (item.pColumn ? item.pColumn : 19) + 'px',
					'padding-left': (item.pRow ? item.pRow : 10) + 'px',
					'padding-right': (item.pRow ? item.pRow : 10) + 'px',
				}"
			>
				<view class="g_pl_10 g_pr_10 g_flex_column_center ">
					<view class="g_flex_1 g_flex_row_start flex_center u-skeleton-fillet" :class="item.require ? 'labelRequire' : ''">
						<view
							class="t-icon g_h_22 g_w_22 g_pl_7 g_mr_5"
							style="width: 22px; height: 22px; background-repeat: no-repeat"
							:style="{
								width: item.icon == 'icon-wodetuandui' ? '24px' : '22px',
								height: item.icon == 'icon-wodetuandui' ? '24px' : '22px',
							}"
							v-if="item.icon && item.itype != 'icon'"
							:class="'t-' + item.icon"
						></view>
						<view class="g_flex_c g_h_22 g_w_22 g_mr_5" v-if="item.icon && item.itype == 'icon'">
							<i
								class="iconfont"
								:class="item.icon"
								:style="{
									'font-size': '24px',
								}"
							></i>
						</view>
						<view class="g_flex_column_center g_c_3 g_fs_16 ">{{ item.label }}</view>
					</view>
				</view>
				<view class="g_flex_1 g_flex_column_center u-skeleton-fillet">
					<view class="g_flex_row_end">
						<view class="g_flex_row_end flex_center">
							<!-- 通用类型 -->
							<view class="g_fs_16 g_ell_1 g_lh_1_2 g_c_8" style="max-width: 45vw" :class="item.fontColor" v-if="item.result">{{ item.result }}</view>
							<!-- 迷你二维码 -->
							<view class="g_flex_rowRight_columnCenter" v-if="item.tip == 'code'">
								<i class="iconfont icon-a-erweimabeifen2 g_fs_21 g_c_c" style="font-size: 21px"></i>
							</view>
							<!-- 头像类 -->
							<view class="g_flex_rowRight_columnCenter" v-if="item.tip == 'avatar'">
								<img :src="item.value" alt="" class="g_w_48 g_h_48" style="border-radius: 13px" />
							</view>
							<!-- 右箭头 -->
							<view class="g_flex_column_center flex_center" v-if="item.type != 'slot'">
								<i class="iconfont icon-gengduo11 g_c_c"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-skeleton :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
</template>

<script>
/* item单行卡片
 * 示例：我的页面中的设置展示UI
 */
export default {
	data() {
		return {
			localBaseImg: "",
		};
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		loading: {
			type: Boolean,
			default: false,
		}
	},
	created() {
		this.localBaseImg = this.G.store().localBaseImg;
	},
	methods: {
		// 当前行
		handleClickItem($item, $index) {
			this.$emit("clickItem", {
				item: $item,
				index: $index,
			});
		},
	},
};
</script>

<style lang="scss">
.g-components-item {
	.m-set {
		width: calc(100% - 40rpx);
		margin: 0 auto;

		.item {
			position: relative;
			// border-bottom: 1rpx solid #eee;
			&:after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 16px;
				border-bottom: 1rpx solid #eee;
				height: 1rpx solid #eee;
				width: calc(100vw - 52px);
			}

			&:last-child {
				border-bottom: none;
				&:after {
					content: none;
				}
			}
		}

		.labelRequire {
			&::afrer {
				content: "*";
				color: #ff4400;
				margin-top: 8px;
				margin-right: 2px;
			}
		}
	}

	.btn-text {
		.btn-con {
			border-left: 1rpx solid #eee;
			padding: 0 0 0 16px;
			background-color: transparent;
			border-radius: 0;
			height: 40rpx;
			line-height: 40rpx;
		}
	}
}
</style>