Merge branch 'vue3_tmp' of https://gitee.com/huizhizao/yudao-mall-uniapp into vue3_tmp
commit
bfa440e98c
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<view v-if="template">
|
<view v-if="template">
|
||||||
<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.style?.background"
|
<s-layout title="首页" navbar="custom" tabbar="/pages/index/index" :bgStyle="template.page"
|
||||||
:navbarStyle="template.style?.navbar" onShareAppMessage>
|
:navbarStyle="template.style?.navbar" onShareAppMessage>
|
||||||
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
|
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
|
||||||
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
|
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
|
||||||
</s-block>
|
</s-block>
|
||||||
<!-- 广告模块 -->
|
<!-- 广告模块 -->
|
||||||
<s-popup-image />
|
<s-popup-image />
|
||||||
|
@ -22,12 +22,10 @@
|
||||||
} from '@dcloudio/uni-app';
|
} from '@dcloudio/uni-app';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import $share from '@/sheep/platform/share';
|
import $share from '@/sheep/platform/share';
|
||||||
import index2Api from '@/sheep/api/index2';
|
|
||||||
// 隐藏原生tabBar
|
// 隐藏原生tabBar
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
|
|
||||||
const template = computed(() => sheep.$store('app').template?.home);
|
const template = computed(() => sheep.$store('app').template?.home);
|
||||||
|
|
||||||
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
|
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
|
||||||
(async function() {
|
(async function() {
|
||||||
console.log('原代码首页定制化数据',template)
|
console.log('原代码首页定制化数据',template)
|
||||||
|
@ -50,6 +48,7 @@
|
||||||
})
|
})
|
||||||
}())
|
}())
|
||||||
|
|
||||||
|
|
||||||
onLoad((options) => {
|
onLoad((options) => {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
// 小程序识别二维码
|
// 小程序识别二维码
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
import request from '@/sheep/request';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// TODO 芋艿:测试
|
||||||
|
getUsedDiyTemplate: () =>
|
||||||
|
request({
|
||||||
|
url: '/app-api/promotion/diy-template/used',
|
||||||
|
method: 'GET',
|
||||||
|
}),
|
||||||
|
};
|
|
@ -1,34 +1,57 @@
|
||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<s-image-block v-if="type === 'imageBlock'" :data="data" :styles="styles" />
|
<!-- 基础组件:搜索框 -->
|
||||||
<s-image-banner v-if="type === 'imageBanner'" :data="data" :styles="styles" />
|
<s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
|
||||||
<s-video-block v-if="type === 'videoPlayer'" :data="data" :styles="styles" />
|
<!-- 基础组件:公告栏 -->
|
||||||
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
|
<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-notice-block v-if="type === 'noticeBlock'" :data="data" />
|
<!-- 图文组件:图片展示 -->
|
||||||
<s-search-block v-if="type === 'searchBlock'" :data="data" :navbar="false" />
|
<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 === 'titleBlock'" :data="data" :styles="styles" />
|
<s-title-block v-if="type === 'titleBlock'" :data="data" :styles="styles" />
|
||||||
|
<!-- 图文组件:广告魔方 -->
|
||||||
|
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
|
||||||
|
<!-- 图文组件:视频播放 -->
|
||||||
|
<s-video-block v-if="type === 'VideoPlayer'" :data="data" :styles="styles" />
|
||||||
|
<!-- 基础组件:辅助线 -->
|
||||||
<s-line-block v-if="type === 'lineBlock'" :data="data" />
|
<s-line-block v-if="type === 'lineBlock'" :data="data" />
|
||||||
|
<!-- 图文组件:富文字 -->
|
||||||
|
<s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles" />
|
||||||
|
<!-- 图文组件:热区 -->
|
||||||
|
<s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles" />
|
||||||
|
|
||||||
<s-menu-button v-if="type === 'menuButton'" :data="data" :styles="styles" />
|
<!-- 商品组件:商品卡片 -->
|
||||||
<s-menu-list v-if="type === 'menuList'" :data="data" />
|
|
||||||
<s-menu-grid v-if="type === 'menuGrid'" :data="data" />
|
|
||||||
|
|
||||||
<s-user-card v-if="type === 'userCard'" />
|
|
||||||
<s-wallet-card v-if="type === 'walletCard'" />
|
|
||||||
<s-order-card v-if="type === 'orderCard'" :data="data" />
|
|
||||||
|
|
||||||
<s-coupon-card v-if="type === 'couponCard'" />
|
|
||||||
<s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
|
<s-goods-card v-if="type === 'goodsCard'" :data="data" :styles="styles" />
|
||||||
<s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
|
<!-- 商品组件:商品栏 -->
|
||||||
<s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
|
<s-goods-shelves v-if="type === 'goodsShelves'" :data="data" :styles="styles" />
|
||||||
<s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles"></s-coupon-block>
|
|
||||||
<s-live-block v-if="type === 'mplive'" :data="data" :styles="styles"></s-live-block>
|
|
||||||
<s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles"></s-seckill-block>
|
|
||||||
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles"></s-groupon-block>
|
|
||||||
<s-richtext-block v-if="type === 'richtext'" :data="data" :styles="styles"></s-richtext-block>
|
|
||||||
<s-hotzone-block v-if="type === 'hotzone'" :data="data" :styles="styles"></s-hotzone-block>
|
|
||||||
|
|
||||||
|
<!-- 营销组件:拼团 -->
|
||||||
|
<s-groupon-block v-if="type === 'groupon'" :data="data" :styles="styles" />
|
||||||
|
<!-- 营销组件:秒杀 -->
|
||||||
|
<s-seckill-block v-if="type === 'seckill'" :data="data" :styles="styles" />
|
||||||
|
<!-- 营销组件:积分商城 -->
|
||||||
|
<s-score-block v-if="type === 'scoreGoods'" :data="data" :styles="styles" />
|
||||||
|
<!-- 营销组件:小程序直播 -->
|
||||||
|
<s-live-block v-if="type === 'mplive'" :data="data" :styles="styles" />
|
||||||
|
<!-- 营销组件:优惠券 -->
|
||||||
|
<s-coupon-block v-if="type === 'coupon'" :data="data" :styles="styles" />
|
||||||
|
|
||||||
|
<!-- 会员组件:会员卡片 -->
|
||||||
|
<s-user-card v-if="type === 'userCard'" />
|
||||||
|
<!-- 会员组件:订单卡片 -->
|
||||||
|
<s-order-card v-if="type === 'orderCard'" :data="data" />
|
||||||
|
<!-- 会员组件:资产卡片 -->
|
||||||
|
<s-wallet-card v-if="type === 'walletCard'" />
|
||||||
|
<!-- 会员组件:卡券卡片 -->
|
||||||
|
<s-coupon-card v-if="type === 'couponCard'" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -20,12 +20,12 @@
|
||||||
|
|
||||||
const elBackground = computed(() => {
|
const elBackground = computed(() => {
|
||||||
if (props.styles) {
|
if (props.styles) {
|
||||||
if (props.styles.background.type == 'color')
|
if (props.styles.bgType === 'color')
|
||||||
return { background: props.styles.background.bgColor };
|
return { background: props.styles.bgColor };
|
||||||
if (props.styles.background.type == 'image')
|
if (props.styles.bgType === 'img')
|
||||||
return {
|
return {
|
||||||
background: `url(${sheep.$url.cdn(
|
background: `url(${sheep.$url.cdn(
|
||||||
props.styles.background.bgImage,
|
props.styles.bgImage,
|
||||||
)}) no-repeat top center / 100% auto`,
|
)}) no-repeat top center / 100% auto`,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -34,15 +34,18 @@
|
||||||
const elStyles = computed(() => {
|
const elStyles = computed(() => {
|
||||||
if (props.styles) {
|
if (props.styles) {
|
||||||
return {
|
return {
|
||||||
marginTop: `${props.styles.marginTop}px`,
|
marginTop: `${props.styles.marginTop || 0}px`,
|
||||||
marginBottom: props.styles.marginBottom + 'px',
|
marginBottom: `${props.styles.marginBottom || 0}px`,
|
||||||
marginLeft: `${props.styles.marginLeft}px`,
|
marginLeft: `${props.styles.marginLeft || 0}px`,
|
||||||
marginRight: props.styles.marginRight + 'px',
|
marginRight: `${props.styles.marginRight || 0}px`,
|
||||||
'border-top-left-radius': props.styles.borderRadiusTop + 'px',
|
paddingTop: `${props.styles.paddingTop || 0}px`,
|
||||||
'border-top-right-radius': props.styles.borderRadiusTop + 'px',
|
paddingRight: `${props.styles.paddingRight || 0}px`,
|
||||||
'border-bottom-left-radius': props.styles.borderRadiusBottom + 'px',
|
paddingBottom: `${props.styles.paddingBottom || 0}px`,
|
||||||
'border-bottom-right-radius': props.styles.borderRadiusBottom + 'px',
|
paddingLeft: `${props.styles.paddingLeft || 0}px`,
|
||||||
padding: props.styles.padding + 'px',
|
borderTopLeftRadius: `${props.styles.borderTopLeftRadius || 0}px`,
|
||||||
|
borderTopRightRadius: `${props.styles.borderTopRightRadius || 0}px`,
|
||||||
|
borderBottomRightRadius: `${props.styles.borderBottomRightRadius || 0}px`,
|
||||||
|
borderBottomLeftRadius: `${props.styles.borderBottomLeftRadius || 0}px`,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<su-swiper
|
<su-swiper
|
||||||
:list="imgList"
|
:list="imgList"
|
||||||
:dotStyle="dotMap[data.indicator]"
|
:dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
|
||||||
imageMode="widthFix"
|
imageMode="scaleToFill"
|
||||||
dotCur="bg-mask-40"
|
dotCur="bg-mask-40"
|
||||||
:seizeHeight="300"
|
:seizeHeight="300"
|
||||||
:autoplay="data.autoplay"
|
:autoplay="data.autoplay"
|
||||||
:interval="Number(data.interval)"
|
:interval="data.interval * 1000"
|
||||||
|
:mode="data.type"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -14,10 +15,7 @@
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
|
|
||||||
const dotMap = {
|
// 轮播图
|
||||||
1: 'long',
|
|
||||||
2: 'tag',
|
|
||||||
};
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
@ -30,11 +28,15 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
const imgList = computed(() =>
|
const imgList = computed(() =>
|
||||||
props.data.list.map((item) => ({
|
props.data.items.map((item) => {
|
||||||
|
const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
|
||||||
|
return {
|
||||||
...item,
|
...item,
|
||||||
src: sheep.$url.cdn(item.src),
|
type: item.type === 'img' ? 'image' : 'video',
|
||||||
poster: sheep.$url.cdn(item.poster),
|
src: sheep.$url.cdn(src),
|
||||||
})),
|
poster: sheep.$url.cdn(item.imgUrl),
|
||||||
|
};
|
||||||
|
}),
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<view @tap="sheep.$router.go(data?.url)">
|
<view @tap="sheep.$router.go(data?.url)">
|
||||||
<su-image :src="sheep.$url.cdn(data.src)" mode="widthFix"></su-image>
|
<su-image :src="sheep.$url.cdn(data.imgUrl)" mode="widthFix"></su-image>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -161,8 +161,8 @@
|
||||||
const bgMain = computed(() => {
|
const bgMain = computed(() => {
|
||||||
if (navbarMode.value === 'inner') {
|
if (navbarMode.value === 'inner') {
|
||||||
return {
|
return {
|
||||||
background: `${props.bgStyle.color} url(${sheep.$url.cdn(
|
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||||
props.bgStyle.src,
|
props.bgStyle.backgroundImage,
|
||||||
)}) no-repeat top center / 100% auto`,
|
)}) no-repeat top center / 100% auto`,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -173,8 +173,8 @@
|
||||||
const bgBody = computed(() => {
|
const bgBody = computed(() => {
|
||||||
if (navbarMode.value === 'normal') {
|
if (navbarMode.value === 'normal') {
|
||||||
return {
|
return {
|
||||||
background: `${props.bgStyle.color} url(${sheep.$url.cdn(
|
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
|
||||||
props.bgStyle.src,
|
props.bgStyle.backgroundImage,
|
||||||
)}) no-repeat top center / 100% auto`,
|
)}) no-repeat top center / 100% auto`,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,12 +21,12 @@
|
||||||
:class="{ cur: state.cur == index }"
|
:class="{ cur: state.cur == index }"
|
||||||
>
|
>
|
||||||
<!-- 宫格 -->
|
<!-- 宫格 -->
|
||||||
<view class="grid-wrap" :col="data.rowNum">
|
<view class="grid-wrap">
|
||||||
<view
|
<view
|
||||||
v-for="(item, index) in arr"
|
v-for="(item, index) in arr"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
|
class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
|
||||||
:style="[{ width: clWidth + 'px', height: '200rpx' }]"
|
:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
|
||||||
hover-class="ss-hover-btn"
|
hover-class="ss-hover-btn"
|
||||||
@tap="sheep.$router.go(item.url)"
|
@tap="sheep.$router.go(item.url)"
|
||||||
>
|
>
|
||||||
|
@ -34,12 +34,12 @@
|
||||||
<view
|
<view
|
||||||
v-if="item.badge.show"
|
v-if="item.badge.show"
|
||||||
class="tag-box"
|
class="tag-box"
|
||||||
:style="[{ background: item.badge.bgColor, color: item.badge.color }]"
|
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
|
||||||
>
|
>
|
||||||
{{ item.badge.text }}
|
{{ item.badge.text }}
|
||||||
</view>
|
</view>
|
||||||
<image
|
<image
|
||||||
v-if="item.src"
|
v-if="item.iconUrl"
|
||||||
class="menu-icon"
|
class="menu-icon"
|
||||||
:style="[
|
:style="[
|
||||||
{
|
{
|
||||||
|
@ -47,15 +47,15 @@
|
||||||
height: props.iconSize + 'rpx',
|
height: props.iconSize + 'rpx',
|
||||||
},
|
},
|
||||||
]"
|
]"
|
||||||
:src="sheep.$url.cdn(item.src)"
|
:src="sheep.$url.cdn(item.iconUrl)"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
></image>
|
></image>
|
||||||
<view
|
<view
|
||||||
v-if="data.layout == 1"
|
v-if="data.layout === 'iconText'"
|
||||||
class="menu-title"
|
class="menu-title"
|
||||||
:style="[{ color: item.title.color }]"
|
:style="[{ color: item.titleColor }]"
|
||||||
>
|
>
|
||||||
{{ item.title.text }}
|
{{ item.title }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -206,15 +206,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// 生成数据
|
// 生成数据
|
||||||
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.col));
|
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
|
||||||
const swiperHeight = computed(() => props.data.row * (props.data.layout == 1 ? 200 : 180));
|
const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
|
||||||
const windowWidth = sheep.$platform.device.windowWidth;
|
const windowWidth = sheep.$platform.device.windowWidth;
|
||||||
const clWidth = computed(
|
|
||||||
() =>
|
|
||||||
(windowWidth -
|
|
||||||
(props.styles.marginLeft + props.styles.marginRight + props.styles.padding * 2)) /
|
|
||||||
props.data.col,
|
|
||||||
);
|
|
||||||
|
|
||||||
// current 改变时会触发 change 事件
|
// current 改变时会触发 change 事件
|
||||||
const swiperChange = (e) => {
|
const swiperChange = (e) => {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<uni-grid :showBorder="Boolean(data.border)" :column="data.col">
|
<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
|
||||||
<uni-grid-item
|
<uni-grid-item
|
||||||
v-for="(item, index) in data.list"
|
v-for="(item, index) in data.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
@ -10,19 +10,19 @@
|
||||||
<view
|
<view
|
||||||
class="tag-box"
|
class="tag-box"
|
||||||
v-if="item.badge.show"
|
v-if="item.badge.show"
|
||||||
:style="[{ background: item.badge.bgColor, color: item.badge.color }]"
|
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
|
||||||
>
|
>
|
||||||
{{ item.badge.text }}
|
{{ item.badge.text }}
|
||||||
</view>
|
</view>
|
||||||
<image class="menu-image" :src="sheep.$url.cdn(item.src)"></image>
|
<image class="menu-image" :src="sheep.$url.cdn(item.iconUrl)"></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
|
<view class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
|
||||||
<view class="grid-text" :style="[{ color: item.title.color }]">
|
<view class="grid-text" :style="[{ color: item.titleColor }]">
|
||||||
{{ item.title.text }}
|
{{ item.title }}
|
||||||
</view>
|
</view>
|
||||||
<view class="grid-tip" :style="[{ color: item.tip.color }]">
|
<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
|
||||||
{{ item.tip.text }}
|
{{ item.subtitle }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
@ -11,25 +11,25 @@
|
||||||
<template v-slot:header>
|
<template v-slot:header>
|
||||||
<view class="ss-flex ss-col-center">
|
<view class="ss-flex ss-col-center">
|
||||||
<image
|
<image
|
||||||
v-if="item.src"
|
v-if="item.iconUrl"
|
||||||
class="list-icon"
|
class="list-icon"
|
||||||
:src="sheep.$url.cdn(item.src)"
|
:src="sheep.$url.cdn(item.iconUrl)"
|
||||||
mode="aspectFit"
|
mode="aspectFit"
|
||||||
></image>
|
></image>
|
||||||
<view
|
<view
|
||||||
class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
|
class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
|
||||||
:style="[{ color: item.title.color }]"
|
:style="[{ color: item.titleColor }]"
|
||||||
>
|
>
|
||||||
{{ item.title.text }}
|
{{ item.title }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:footer>
|
<template v-slot:footer>
|
||||||
<view
|
<view
|
||||||
class="notice-text ss-flex ss-row-center ss-col-center"
|
class="notice-text ss-flex ss-row-center ss-col-center"
|
||||||
:style="[{ color: item.tip.color }]"
|
:style="[{ color: item.subtitleColor }]"
|
||||||
>
|
>
|
||||||
{{ item.tip.text }}
|
{{ item.subtitle }}
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</uni-list-item>
|
</uni-list-item>
|
||||||
|
|
|
@ -1,15 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="ss-flex ss-col-center notice-wrap">
|
<view class="ss-flex ss-col-center notice-wrap">
|
||||||
<image class="icon-img" :src="sheep.$url.cdn(data.src)" mode="heightFix"></image>
|
<image class="icon-img" :src="sheep.$url.cdn(data.iconUrl)" mode="heightFix"></image>
|
||||||
|
<!-- todo:@owen 暂时只支持一个公告 -->
|
||||||
<su-notice-bar
|
<su-notice-bar
|
||||||
style="flex: 1"
|
style="flex: 1"
|
||||||
:showIcon="false"
|
:showIcon="false"
|
||||||
scrollable
|
scrollable
|
||||||
single
|
single
|
||||||
:text="data.title.text"
|
:text="data.contents[0].text"
|
||||||
:speed="50"
|
:speed="50"
|
||||||
:color="data.title.color"
|
:color="data.textColor"
|
||||||
@tap="sheep.$router.go(data.url)"
|
@tap="sheep.$router.go(data.contents[0].url)"
|
||||||
></su-notice-bar>
|
></su-notice-bar>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -29,24 +29,23 @@
|
||||||
v-model="state.searchVal"
|
v-model="state.searchVal"
|
||||||
/>
|
/>
|
||||||
<view class="keyword-link ss-flex">
|
<view class="keyword-link ss-flex">
|
||||||
<view v-for="(item, index) in data.keywords" :key="index">
|
<view v-for="(item, index) in data.hotKeywords" :key="index">
|
||||||
<view
|
<view
|
||||||
class="ss-m-r-16"
|
class="ss-m-r-16"
|
||||||
:style="[{ color: item.color }]"
|
:style="[{ color: data.textColor }]"
|
||||||
@tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
|
@tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
|
||||||
>{{ item.text }}</view
|
>{{ item }}</view
|
||||||
>
|
>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
|
||||||
<view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
|
|
||||||
<button
|
<button
|
||||||
class="ss-reset-button keyword-btn"
|
class="ss-reset-button keyword-btn"
|
||||||
v-for="(item, index) in data.keywords"
|
v-for="(item, index) in data.hotKeywords"
|
||||||
:key="index"
|
:key="index"
|
||||||
:style="[{ color: item.color, marginRight: '10rpx' }]"
|
:style="[{ color: data.textColor, marginRight: '10rpx' }]"
|
||||||
>
|
>
|
||||||
{{ item.text }}
|
{{ item }}
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
|
@ -1,29 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="u-page__item" v-if="tabbar?.list.length > 0">
|
<view class="u-page__item" v-if="tabbar?.items.length > 0">
|
||||||
<su-tabbar
|
<su-tabbar
|
||||||
:value="path"
|
:value="path"
|
||||||
:fixed="true"
|
:fixed="true"
|
||||||
:placeholder="true"
|
:placeholder="true"
|
||||||
:safeAreaInsetBottom="true"
|
:safeAreaInsetBottom="true"
|
||||||
:inactiveColor="tabbar.inactiveColor"
|
:inactiveColor="tabbar.style.color"
|
||||||
:activeColor="tabbar.activeColor"
|
:activeColor="tabbar.style.activeColor"
|
||||||
:midTabBar="tabbar.mode === 2"
|
:midTabBar="tabbar.mode === 2"
|
||||||
:customStyle="tabbarStyle"
|
:customStyle="tabbarStyle"
|
||||||
>
|
>
|
||||||
<su-tabbar-item
|
<su-tabbar-item
|
||||||
v-for="(item, index) in tabbar.list"
|
v-for="(item, index) in tabbar.items"
|
||||||
:key="item.text"
|
:key="item.text"
|
||||||
:text="item.text"
|
:text="item.text"
|
||||||
:name="item.url"
|
:name="item.url"
|
||||||
:isCenter="getTabbarCenter(index)"
|
:isCenter="getTabbarCenter(index)"
|
||||||
:centerImage="sheep.$url.cdn(item.inactiveIcon)"
|
:centerImage="sheep.$url.cdn(item.iconUrl)"
|
||||||
@tap="sheep.$router.go(item.url)"
|
@tap="sheep.$router.go(item.url)"
|
||||||
>
|
>
|
||||||
<template v-slot:active-icon>
|
<template v-slot:active-icon>
|
||||||
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIcon)"></image>
|
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
|
||||||
</template>
|
</template>
|
||||||
<template v-slot:inactive-icon>
|
<template v-slot:inactive-icon>
|
||||||
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.inactiveIcon)"></image>
|
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
|
||||||
</template>
|
</template>
|
||||||
</su-tabbar-item>
|
</su-tabbar-item>
|
||||||
</su-tabbar>
|
</su-tabbar>
|
||||||
|
@ -39,20 +39,22 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
const tabbarStyle = computed(() => {
|
const tabbarStyle = computed(() => {
|
||||||
const backgroundStyle = tabbar.value.background;
|
const backgroundStyle = tabbar.value.style;
|
||||||
if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
|
if (backgroundStyle.bgType === 'color') {
|
||||||
if (backgroundStyle.type == 'image')
|
return { background: backgroundStyle.bgColor };
|
||||||
|
}
|
||||||
|
if (backgroundStyle.bgType === 'img')
|
||||||
return {
|
return {
|
||||||
background: `url(${sheep.$url.cdn(
|
background: `url(${sheep.$url.cdn(
|
||||||
backgroundStyle.bgImage,
|
backgroundStyle.bgImg,
|
||||||
)}) no-repeat top center / 100% auto`,
|
)}) no-repeat top center / 100% auto`,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const getTabbarCenter = (index) => {
|
const getTabbarCenter = (index) => {
|
||||||
if (unref(tabbar).mode !== 2) return false;
|
if (unref(tabbar).mode !== 2) return false;
|
||||||
return unref(tabbar).list % 2 > 0
|
return unref(tabbar).items % 2 > 0
|
||||||
? Math.ceil(unref(tabbar).list.length / 2) === index + 1
|
? Math.ceil(unref(tabbar).items.length / 2) === index + 1
|
||||||
: false;
|
: false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -4,8 +4,9 @@
|
||||||
class="sss"
|
class="sss"
|
||||||
:uid="guid()"
|
:uid="guid()"
|
||||||
:src="sheep.$url.cdn(data.videoUrl)"
|
:src="sheep.$url.cdn(data.videoUrl)"
|
||||||
:poster="sheep.$url.cdn(data.src)"
|
:poster="sheep.$url.cdn(data.posterUrl)"
|
||||||
:height="styles.height * 2"
|
:height="styles.height * 2"
|
||||||
|
:autoplay="data.autoplay"
|
||||||
></su-video>
|
></su-video>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import appApi from '@/sheep/api/app';
|
import appApi from '@/sheep/api/app';
|
||||||
|
import diyTemplateApi from '@/sheep/api/promotion/diy/template';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import $platform from '@/sheep/platform';
|
import $platform from '@/sheep/platform';
|
||||||
import $router from '@/sheep/router';
|
import $router from '@/sheep/router';
|
||||||
|
@ -71,6 +72,8 @@ const app = defineStore({
|
||||||
}
|
}
|
||||||
this.chat = res.data.chat;
|
this.chat = res.data.chat;
|
||||||
|
|
||||||
|
await adaptTemplate(this.template);
|
||||||
|
|
||||||
// 加载主题
|
// 加载主题
|
||||||
const sysStore = sys();
|
const sysStore = sys();
|
||||||
sysStore.setTheme();
|
sysStore.setTheme();
|
||||||
|
@ -96,4 +99,18 @@ const app = defineStore({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// todo: @owen 先做数据适配,后期重构
|
||||||
|
const adaptTemplate = async (appTemplate) => {
|
||||||
|
const diyTemplate = await diyTemplateApi.getUsedDiyTemplate();
|
||||||
|
const tabBar = diyTemplate?.data?.property?.tabBar;
|
||||||
|
if (tabBar) {
|
||||||
|
appTemplate.basic.tabbar = tabBar
|
||||||
|
if (tabBar?.theme) {
|
||||||
|
appTemplate.basic.theme = tabBar?.theme;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
appTemplate.home = diyTemplate?.data?.home;
|
||||||
|
// appTemplate.user = diyTemplate?.data?.user;
|
||||||
|
}
|
||||||
|
|
||||||
export default app;
|
export default app;
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<image
|
<image
|
||||||
v-if="icon"
|
v-if="icon"
|
||||||
:name="icon"
|
:name="icon"
|
||||||
:color="isActive ? parentData.activeColor : parentData.inactiveColor"
|
:color="isActive ? parentData.activeColor : parentData.color"
|
||||||
:size="20"
|
:size="20"
|
||||||
></image>
|
></image>
|
||||||
<block v-else>
|
<block v-else>
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
<text
|
<text
|
||||||
class="u-tabbar-item__text"
|
class="u-tabbar-item__text"
|
||||||
:style="{
|
:style="{
|
||||||
color: isActive ? parentData.activeColor : parentData.inactiveColor,
|
color: isActive ? parentData.activeColor : parentData.color,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
{{ text }}
|
{{ text }}
|
||||||
|
@ -120,7 +120,7 @@
|
||||||
parentData: {
|
parentData: {
|
||||||
value: null,
|
value: null,
|
||||||
activeColor: '',
|
activeColor: '',
|
||||||
inactiveColor: '',
|
color: '',
|
||||||
},
|
},
|
||||||
parent: {},
|
parent: {},
|
||||||
};
|
};
|
||||||
|
|
|
@ -18,6 +18,7 @@
|
||||||
@pause="pause"
|
@pause="pause"
|
||||||
@ended="end"
|
@ended="end"
|
||||||
:poster="poster"
|
:poster="poster"
|
||||||
|
:autoplay="autoplay"
|
||||||
>
|
>
|
||||||
<!-- #ifdef APP-PLUS -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
<cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
|
<cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
|
||||||
|
@ -90,6 +91,10 @@
|
||||||
type: String,
|
type: String,
|
||||||
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
|
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
|
||||||
},
|
},
|
||||||
|
autoplay: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 事件
|
// 事件
|
||||||
|
|
Loading…
Reference in New Issue