dandelionPlatformToB-uni-v3/components/panel/posterCard.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="g_flex_row_between g_ml_10 g_mr_10" :class="['g_pt_10']" style="column-gap: 10px">
					<view
						v-for="(item, index) in list"
						:key="index"
						:style="{
							flex: 1,
						}"
						@click="handleClick(item, index)"
						hover-class="thover"
					>
						<view class="g_flex_row_center flex_center g_pb_10 g_position_rela">
							<img :src="item.url" alt="" class="g_radius_6" mode="widthFix" style="width: 100%; height: 100%" />
							<div class="g_position_abso g_bg_f g_radius_2 g_flex_row_between flex_center" style="width: 94%; height: 15%; padding: 0 3px; transform: translateX(-50%); left: 50%; bottom: 9%; box-sizing: border-box">
								<div class="g_position_rela g_flex_row_start flex_center flex_nw g_flex_1 g_h_all">
									<!-- <img style="min-width: 8px; min-height: 8px; max-width: 8px; max-height: 8px" :src="miniAppInfo.logo || 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'" alt="" /> -->
									<div class="g_ml_2 g_position_abso" style="left: 0px; transform-origin: left; transform: scale(0.4); width: calc(200%)">
										<div :style="{ fontSize: '12px' }">
											{{ miniAppInfo.fullName || miniAppInfo.agencyName }}
										</div>
										<div class="g_ell_1 g_w_all" :style="{ fontSize: '10px' }">
											{{ miniAppInfo.slogan }}
										</div>
									</div>
								</div>
								<img style="width: 14px; height: 14px" :src="qrcode" alt="" />
							</div>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/* 海报专用的卡片组件
 */
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
			miniAppInfo: uni.getStorageSync("miniApp-info"),
			qrcode: uni.getStorageSync("user_qrcode"),
		};
	},
	props: {
		// 纯显示图片的判断
		cardType: {
			type: String,
			default: () => {
				return "";
			},
		},
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		speed: {
			default: () => {
				return -1;
			},
		},
		num: {
			type: Number,
			default: () => {
				return 5;
			},
		},
		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>