bocai_supplyChain_uni/components/panel/infoCard.vue

<template>
	<view>
		<view class="m-info g_flex_row_between g_p_16 g_bg_f g_m_10 g_radius_8" hover-class="g_bg_e" style="margin-top: 0" @click="handleClick"
				  :style="{
						'backgroundColor':cusBg ? cusBg : '#fff'
					}"
		>
			<view class="g_flex_1 g_flex_row_start">
				<view class="g_flex_none g_flex_column_center g_position_rela">
					<g-panel-image :radius="radius" :size="info.imgSize ? info.imgSize : 112" :url="info.avatar" />
					<view v-if="info.sex == 1" class="g_position_abso"
								style="right: 0;bottom: -4px;"
					>
						<image :src="cdnBaseImg + 'nan.svg'" mode="widthFix" style="width: 16px;"></image>
					</view>
					<view v-if="info.sex == 2" class="g_position_abso"
								style="right: 0;bottom: -4px;"
					>
						<image :src="cdnBaseImg + 'nv.svg'" mode="widthFix" style="width: 16px;"></image>
					</view>
				</view>
				<view class="g_flex_1 g_ml_11 g_flex_column_between">
					<view class="">
						<view class="g_flex_row_start">
							<view
								class="g_flex_none g_ell_1 g_fs_20 g_fw_bold g_c_3"
								:style="{
									'font-size': info.titleFS ? info.titleFS : 20,
									'font-weight': info.titleFW ? info.titleFW : 'bold',
									'max-width': info.recordStatus ? '260rpx' : '500rpx',
								}"
							>
								{{ info.title ? info.title : "-" }}
							</view>
							<view v-if="info.isHaveOrder" class="g_flex_1 g_flex_column_center g_ml_4">
								<i class="t-icon t-icon-fadanhao_circle"></i>
							</view>
						</view>
					</view>
					<view
						class="g_fs_16 g_c_9 g_ell_1"
						v-if="info.num != 'slot' && cusType == 'tel'"
						:style="{
							'font-size': info.numFS ? info.numFS : '16px',
						}"
					>
						{{ info.num == "slot" ? "" : info.num }}
					</view>
					<view
						class="g_fs_16 g_c_9 g_ell_1"
						v-if="info.num != 'slot' && cusType == 'image'"
					>
						<image :src="cdnBaseImg + 'yizhengzheng.svg'" mode="widthFix" style="width: 56px;"></image>
					</view>
					<view v-if="info.num == 'slot'" class="g_flex_row_start">
						<view v-for="(item, index) in info.slot" :key="index" class="g_flex_row_start g_mr_10">
							<view class="g_fs_12 g_c_6 g_flex_column_end">{{ item.name }}</view>
							<view class="g_fs_15 g_c_3 g_fw_600 g_ml_4">{{ item.num }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="g_flex_none g_flex_column_center g_pl_20" v-if="isShowMore == 1 && rightType == 'more'">
				<i class="iconfont icon-gengduo11 g_c_c"></i>
			</view>
			<view class="g_flex_none g_flex_column_center" v-if="isShowMore == 1 && rightType == 'image' && rightImage">
				<g-panel-image :radius="radius" size="56" :url="rightImage" />
			</view>
			<view class="g_flex_none g_flex_column_center" v-if="isShowMore == 1 && rightType == 'button'">
				<view class="g_flex_c g_radius_14 g_pt_4 g_pb_4 g_pr_8 g_pl_10" style="border: 1px solid #3578f6" @click="goForm">
					<view class="g_flex_row_center">
						<view class="g_c_main g_fs_14 g_flex_column_center g_mb_1"> + </view>
						<view class="g_c_main g_fs_12 g_flex_column_center g_ml_4">关注</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/* 基本信息卡片
 * @params info 展示信息
 * @param  isShowMore 是否显示右侧图标
 * @function clickCard 卡片点击事件
 * @function clickMore 右侧按钮点击事件
 */
export default {
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
		};
	},
	props: {
		info: {
			type: Object,
			default: () => {
				return {
					avatar: "",
					title: "-",
					num: "-",
				};
			},
		},
		isShowMore: {
			default: () => {
				return 1;
			},
		},
		radius: {
			default: () => {
				return 50;
			},
		},
		rightType: {
			type: String,
			default: () => {
				return "more";
			},
		},
		rightImage: {
			type: String,
			default: () => {
				return "";
			},
		},
		cusBg:{type: String,
			default:''
		},
		cusType:{
			type: String,
			default:'tel'
		}
	},

	methods: {
		handleClick() {
			this.$emit("clickCard");
		},
		goMore() {
			this.$emit("clickMore");
		},
		goForm() {
			uni.navigateTo({
				url: "/root/bind/applyForm?code=" + this.info.agencyCode + "&form=1",
			});
		},
	},
};
</script>

<style></style>