dandelionPlatformToB-uni-v3/components/panel/numCard.vue

<template>
	<view>
		<view
			class="m-data g_ml_10 g_mr_10 g_radius_8"
			:style="{
				backgroundColor: cusBg ? cusBg : '#fff',
			}"
		>
			<view v-if="cusTitle" class="g_pl_16 g_pt_12 g_pb_12 g_fs_17 g_flex_row_between g_border_e_b" @click="titleNavigator">
				<view class="g_fw_600">
					{{ cusTitle }}
				</view>
				<view class="g_pr_12 g_flex_row_end flex_center">
					<view class="g_c_6 g_mr_4 g_ell_1" style="max-width: 180px" v-if="subhead">
						{{ subhead }}
					</view>
          <slot></slot>
					<i v-if="titleNav" class="iconfont icon-gengduo11 g_c_c" style=""></i>
				</view>
			</view>
			<view style="width: calc(100vw - 20px); overflow: hidden; margin: 0 auto; overflow-x: auto">
				<view
					class=""
					:class="[height < 38 ? 'g_pt_16' : 'g_pt_10',cardType == 'img' ? 'g_flex_row_between' : 'g_flex_row_start']" 
					:style="{
						width: num <= 5 ? 'calc(100vw - 20px)' : 'calc(calc(750rpx / 5.8) * ' + num + ')',
            gap:cardType == 'img' ? '10px' : '0px',
            flex:cardType == 'img' ? '1' : 'unset',
					}"
				>
					<view
						v-for="(item, index) in list"
						:key="index"
						:style="{
							width: num <= 5 ? 'calc(100% / ' + num + ')' : 'calc(750rpx / 5.8)',
						}"
						@click="handleClick(item, index)"
						hover-class="thover"
					>
						<view v-if="cardType != 'img'">
							<view v-if="height < 38">
								<!-- 高度比较低的情况 。 -->
								<view :class="[`g_h_${height}`]">
									<view class="g_flex_row_center g_fs_18 g_c_3" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
										<view style="position: relative">
											<view v-if="cusType == 'num'">{{ item.num }}</view>
											<view v-if="cusType == 'image'" :class="[`g_h_${height - 4}`]" class="g_flex_column_center" style="overflow: hidden">
												<view class="" v-if="item.icon">
													<!-- iconType单色图标的判断 1是单色 -->
													<view class="iconfont g_fw_500" :class="[`icon-${item.icon}`, `g_fs_${height - 4}`]" v-if="item.iconType == 1"> </view>
													<view
														:class="[`g_h_${height - 4}`, `g_w_${height - 4}`, `t-icon-${item.icon}`, 't-icon']"
														style="background-repeat: no-repeat; background-position: 0px 1px; background-size: 95%"
														:style="{
															width: `${height - 4}px`,
															height: `${height - 4}px`,
														}"
														v-else
													></view>
												</view>

												<image v-else :src="ishidden == 1 ? item.image : svgBaseImg + item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }"></image>
											</view>
											<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
										</view>
									</view>
									<view v-if="speed == 0" class="g_flex_c g_h_28">
										<rh-loading minHeight="0" text="empty" />
									</view>
								</view>
								<view class="g_flex_row_center g_fs_14 g_c_6 g_mt_2" :class="[`g_mb_${marginBottom}`]">{{ item.name }}</view>
							</view>
							<!-- 高度比较高的情况 。 -->
							<view v-else>
								<view class="g_h_48">
									<view class="g_flex_row_center g_fs_28 g_c_3 g_h_48" :class="item.num == '-' ? '' : 'g_fw_bold'" v-if="speed == 1">
										<view style="position: relative">
											<view v-if="cusType == 'num'">{{ item.num }}</view>
											<view v-if="cusType == 'image'" class="g_h_48 g_flex_column_center" style="overflow: hidden">
												<image :src="item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }" v-if="ishidden == 1"></image>
												<image :src="svgBaseImg + item.image" mode="widthFix" :style="{ height: height + 'px', width: height + 'px' }" v-else></image>
											</view>
											<view v-if="item.tip" style="position: absolute; right: -10px; top: 0" class="g_w_6 g_h_6 g_radius_50 g_bg_f40"></view>
										</view>
									</view>
									<view v-if="speed == 0" class="g_flex_c g_h_48">
										<rh-loading minHeight="0" text="empty" />
									</view>
								</view>
								<view class="g_flex_row_center g_fs_14 g_c_6 g_mt_2" :class="[`g_mb_${marginBottom}`]">{{ item.name }}</view>
							</view>
						</view>
						<view class="g_flex_row_center flex_center g_pb_16 " :class="[index === 0  ? 'g_ml_10':'',index === 3 ? 'g_mr_10':'']" v-if="cardType == 'img'">
							<img :src="item.url" alt="" class=" g_radius_6"  mode="widthFix" style="width:80px;height:142px"></img>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/* 职位，关注数展示卡片
 */
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
		};
	},
	props: {
		// 纯显示图片的判断
		cardType: {
			type: String,
			default: () => {
				return "";
			},
		},
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		speed: {
			default: () => {
				return -1;
			},
		},
		num: {
			type: Number,
			default: () => {
				return 5;
			},
		},
		height: {
			type: Number,
			default: () => {
				return 22;
			},
		},
		cusBg: {
			default: "",
		},
		cusType: {
			default: "num",
		},
		cusTitle: {
			default: "",
		},
		titleNav: {
			default: "",
		},
		subhead: {
			default: "",
		},
		// 标签距离底部距离
		marginBottom: {
			default: 10,
		},
		ishidden: {
			default: 0,
		},
	},
	methods: {
		handleClick($item, $index) {
			if (this.cardType != "img") {
				this.$emit("clickItem", {
					item: $item,
					index: $index,
				});
			} else {
        // console.log('$item',$item);
				this.$emit("clickImg", $item)
			}
		},
		titleNavigator() {
      // console.log('this.titleNav',this.titleNav);
			if (this.titleNav) {
				this.$emit("clickItem", {
					item: { path: this.titleNav },
				});
			}
		},
	},
};
</script>

<style></style>