158 lines
4.5 KiB
Vue
158 lines
4.5 KiB
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-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'" />
|
||
<!-- 用户组件：用户订单 -->
|
||
<s-order-card v-if="type === 'UserOrder'" :data="data" />
|
||
<!-- 用户组件：用户资产 -->
|
||
<s-wallet-card v-if="type === 'UserWallet'" />
|
||
<!-- 用户组件：用户卡券 -->
|
||
<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">
|
||
.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> |