zyejMAll-mobile/sheep/components/s-block-item/s-block-item.vue

<template>
	<view>
		<!-- 基础组件：搜索框 -->
		<s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
		<!-- 基础组件：公告栏 -->
		<s-notice-block v-if="type === 'NoticeBar'" :data="data" />
		<!-- 基础组件：菜单导航 -->
		<s-menu-button v-if="type === 'MenuSwiper'" :data="data" :styles="styles" />
		<!-- 基础组件：列表导航 -->
		<s-menu-list v-if="type === 'MenuList'" :data="data" />
		<!-- 基础组件：宫格导航 -->
		<s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
		<!-- 基础组件：弹窗广告 -->
		<s-popup-image v-if="type === 'Popover'" :data="data" />
		<!-- 基础组件：悬浮按钮 -->
		<s-float-menu v-if="type === 'FloatingActionButton'" :data="data" />

		<!-- 图文组件：图片展示 -->
		<s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />
		<!-- 图文组件：图片轮播 -->
		<s-image-banner v-if="type === 'Carousel'" :data="data" :styles="styles" />
		<!-- 基础组件：标题栏 -->
		<s-title-block v-if="type === 'TitleBar'" :data="data" :styles="styles" />
		<!-- 图文组件：广告魔方 -->
		<s-image-cube v-if="type === 'MagicCube'" :data="data" :styles="styles" />
		<!-- 图文组件：视频播放 -->
		<s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
		<!-- 基础组件：分割线 -->
		<s-line-block v-if="type === 'Divider'" :data="data" />
		<!-- 图文组件：热区 -->
		<s-hotzone-block v-if="type === 'HotZone'" :data="data" :styles="styles" />

		<!-- 商品组件：商品卡片 -->
		<s-goods-card v-if="type === 'ProductCard'" :data="data" :styles="styles" />
		<!-- 商品组件：商品栏 -->
		<s-goods-shelves v-if="type === 'ProductList'" :data="data" :styles="styles" />

		<!-- 营销组件：拼团 -->
		<s-groupon-block v-if="type === 'PromotionCombination'" :data="data" :styles="styles" />
		<!-- 营销组件：秒杀 -->
		<s-seckill-block v-if="type === 'PromotionSeckill'" :data="data" :styles="styles" />
		<!-- 营销组件：积分商城 -->
		<s-point-block v-if="type === 'PromotionPoint'" :data="data" :styles="styles" />
		<!-- 营销组件：小程序直播（暂时没有这个功能） -->
		<s-live-block v-if="type === 'MpLive'" :data="data" :styles="styles" />
		<!-- 营销组件：优惠券 -->
		<s-coupon-block v-if="type === 'CouponCard'" :data="data" :styles="styles" />
		<!-- 营销组件：文章 -->
		<!-- <s-richtext-block v-if="type === 'PromotionArticle'" :data="data" :styles="styles" /> -->
		<view class="floxt" v-if="type === 'PromotionArticle'">
			<view class="addClass" v-for="(item, index) in state.model" @click="path(item.id)">
				<view class="image">
					<image :src="item.picUrl" alt="" />
				</view>
				<view class="text">
					<view class="top">
						{{item.title}}
					</view>
					<view class="bottom">
						{{ sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
					</view>
				</view>
			</view>
		</view>

		<!-- 用户组件：用户卡片 -->
		<s-user-card v-if="type === 'UserCard'" />
		<view v-if="type === 'UserOrder'" class="new-huiy" @click="
			  sheep.$router.go('/pages/user/user_vip/index')
			">
			<view class="new-button">立即开通</view>
			<image class="seckill1" mode="aspectFit"
				src="https://zysc.fjptzykj.com:3000/shangcheng/64776e2edc3c2f15295e7c3976ba301e08f9170f99a2e845d8f33bd65179b177.png" />
		</view>
		<!-- 用户组件：用户订单 -->
		<s-order-card v-if="type === 'UserOrder'" :data="data" />
		<!-- 用户组件：用户资产 -->
		<s-wallet-card v-if="type === 'UserCard'" />
		<!-- 用户组件：用户卡券 -->
		<s-coupon-card v-if="type === 'UserCoupon'" />
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		ref,
		reactive,
		unref
	} from 'vue';
	import AddressApi from '@/sheep/api/member/address';
	const state = reactive({
		model: [],
	});

	const ff = async (id) => {
		let {
			code,
			data
		} = await AddressApi.textList();
		state.model = data;
	}

	ff();
	/**
	 * 装修组件 - 组件集
	 */
	const props = defineProps({
		type: {
			type: String,
			default: '',
		},
		data: {
			type: Object,
			default () {},
		},
		styles: {
			type: Object,
			default () {},
		},
	});

	function path(id) {
		// $u.route({url:'/pages/goods/index',params:{id:'14'}})
		uni.navigateTo({
			url: `/pages/mulu/mulu?id=${id}`
		});
	}
</script>

<style scoped lang="scss">
	:deep(.uni-border-bottom) {
		height: 0;
	}

	.new-huiy {
		width: 100%;
		height: 93px;
		z-index: 9999999999999;

		.new-button {
			background: white;
			padding: 4px 8px;
			text-align: center;
			position: absolute;
			border-radius: 20px;
			right: 14px;
			top: 37px;
			font-size: 14px;
			color: rgba(148, 109, 45, 1);
			z-index: 33;
		}

		.seckill1 {
			height: 100px;
			position: absolute;
			z-index: 22;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
		}
	}


	.floxt {
		width: 100%;

		.addClass {
			background: white;
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin: 20rpx 0;

			// padding: 40rpx;
			// padding-right: 0;
			// height: 200rpx;
			.image {
				width: 250rpx;
				height: 156rpx;
				margin-right: 18rpx;
				padding: 20rpx 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				display: flex;
				width: 100%;
				// text-align: center;
				padding: 20rpx 20rpx;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;

				.bottom {
					color: #999;
					font-size: 12px;
				}

			}
		}
	}
</style>