yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'vue3_tmp' of https://gitee.com/huizhizao/yudao-mall-uniapp into vue3_tmp

pull/13/head
落日晚风 2023-11-09 17:46:26 +08:00
parent 60f1ff6a15 83a88d0d12
commit bfa440e98c
17 changed files with 173 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
pages/index/index.vue
View File

@ -1,9 +1,9 @@
<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>
<s-block v-for="(item, index) in template.data" :key="index" :styles="item.style">
<s-block-item :type="item.type" :data="item.data" :styles="item.style" />
<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
</s-block>
<!-- 广告模块 -->
<s-popup-image />
@ -22,12 +22,10 @@
} from '@dcloudio/uni-app';
import sheep from '@/sheep';
import $share from '@/sheep/platform/share';
import index2Api from '@/sheep/api/index2';
// 隐藏原生tabBar
uni.hideTabBar();
const template = computed(() => sheep.$store('app').template?.home);
// 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
(async function() {
console.log('原代码首页定制化数据',template)
@ -50,6 +48,7 @@
})
}())
onLoad((options) => {
// #ifdef MP
// 小程序识别二维码
@ -89,4 +88,4 @@
onPageScroll(() => {});
</script>
<style></style>
<style></style>

10
sheep/api/promotion/diy/template.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/sheep/request';
export default {
// TODO 芋艿：测试
getUsedDiyTemplate: () =>
request({
url: '/app-api/promotion/diy-template/used',
method: 'GET',
}),
};

67
sheep/components/s-block-item/s-block-item.vue
View File

@ -1,34 +1,57 @@
<template>
<view>
<s-image-block v-if="type === 'imageBlock'" :data="data" :styles="styles" />
<s-image-banner v-if="type === 'imageBanner'" :data="data" :styles="styles" />
<s-video-block v-if="type === 'videoPlayer'" :data="data" :styles="styles" />
<s-image-cube v-if="type === 'imageCube'" :data="data" :styles="styles" />
<!-- 基础组件：搜索框 -->
<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-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-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-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-score-block v-if="type === 'scoreGoods'" :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>
</template>

29
sheep/components/s-block/s-block.vue
View File

@ -20,12 +20,12 @@
const elBackground = computed(() => {
if (props.styles) {
if (props.styles.background.type == 'color')
return { background: props.styles.background.bgColor };
if (props.styles.background.type == 'image')
if (props.styles.bgType === 'color')
return { background: props.styles.bgColor };
if (props.styles.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
props.styles.background.bgImage,
props.styles.bgImage,
)}) no-repeat top center / 100% auto`,
};
}
@ -34,15 +34,18 @@
const elStyles = computed(() => {
if (props.styles) {
return {
marginTop: `${props.styles.marginTop}px`,
marginBottom: props.styles.marginBottom + 'px',
marginLeft: `${props.styles.marginLeft}px`,
marginRight: props.styles.marginRight + 'px',
'border-top-left-radius': props.styles.borderRadiusTop + 'px',
'border-top-right-radius': props.styles.borderRadiusTop + 'px',
'border-bottom-left-radius': props.styles.borderRadiusBottom + 'px',
'border-bottom-right-radius': props.styles.borderRadiusBottom + 'px',
padding: props.styles.padding + 'px',
marginTop: `${props.styles.marginTop || 0}px`,
marginBottom: `${props.styles.marginBottom || 0}px`,
marginLeft: `${props.styles.marginLeft || 0}px`,
marginRight: `${props.styles.marginRight || 0}px`,
paddingTop: `${props.styles.paddingTop || 0}px`,
paddingRight: `${props.styles.paddingRight || 0}px`,
paddingBottom: `${props.styles.paddingBottom || 0}px`,
paddingLeft: `${props.styles.paddingLeft || 0}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',
};
}

26
sheep/components/s-image-banner/s-image-banner.vue
View File

@ -1,12 +1,13 @@
<template>
<su-swiper
:list="imgList"
:dotStyle="dotMap[data.indicator]"
imageMode="widthFix"
:dotStyle="data.indicator === 'dot' ? 'long' : 'tag'"
imageMode="scaleToFill"
dotCur="bg-mask-40"
:seizeHeight="300"
:autoplay="data.autoplay"
:interval="Number(data.interval)"
:interval="data.interval * 1000"
:mode="data.type"
/>
</template>
@ -14,10 +15,7 @@
import { computed } from 'vue';
import sheep from '@/sheep';
const dotMap = {
1: 'long',
2: 'tag',
};
// 轮播图
const props = defineProps({
data: {
type: Object,
@ -30,11 +28,15 @@
});
const imgList = computed(() =>
props.data.list.map((item) => ({
...item,
src: sheep.$url.cdn(item.src),
poster: sheep.$url.cdn(item.poster),
})),
props.data.items.map((item) => {
const src = item.type === 'img' ? item.imgUrl : item.videoUrl;
return {
...item,
type: item.type === 'img' ? 'image' : 'video',
src: sheep.$url.cdn(src),
poster: sheep.$url.cdn(item.imgUrl),
};
}),
);
</script>

2
sheep/components/s-image-block/s-image-block.vue
View File

@ -1,6 +1,6 @@
<template>
<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>
</template>

8
sheep/components/s-layout/s-layout.vue
View File

@ -161,8 +161,8 @@
const bgMain = computed(() => {
if (navbarMode.value === 'inner') {
return {
background: `${props.bgStyle.color} url(${sheep.$url.cdn(
props.bgStyle.src,
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
props.bgStyle.backgroundImage,
)}) no-repeat top center / 100% auto`,
};
}
@ -173,8 +173,8 @@
const bgBody = computed(() => {
if (navbarMode.value === 'normal') {
return {
background: `${props.bgStyle.color} url(${sheep.$url.cdn(
props.bgStyle.src,
background: `${props.bgStyle.backgroundColor} url(${sheep.$url.cdn(
props.bgStyle.backgroundImage,
)}) no-repeat top center / 100% auto`,
};
}

26
sheep/components/s-menu-button/s-menu-button.vue
View File

@ -21,12 +21,12 @@
:class="{ cur: state.cur == index }"
>
<!-- 宫格 -->
<view class="grid-wrap" :col="data.rowNum">
<view class="grid-wrap">
<view
v-for="(item, index) in arr"
:key="index"
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"
@tap="sheep.$router.go(item.url)"
>
@ -34,12 +34,12 @@
<view
v-if="item.badge.show"
class="tag-box"
:style="[{ background: item.badge.bgColor, color: item.badge.color }]"
:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
>
{{ item.badge.text }}
</view>
<image
v-if="item.src"
v-if="item.iconUrl"
class="menu-icon"
:style="[
{
@ -47,15 +47,15 @@
height: props.iconSize + 'rpx',
},
]"
:src="sheep.$url.cdn(item.src)"
:src="sheep.$url.cdn(item.iconUrl)"
mode="aspectFill"
></image>
<view
v-if="data.layout == 1"
v-if="data.layout === 'iconText'"
class="menu-title"
:style="[{ color: item.title.color }]"
:style="[{ color: item.titleColor }]"
>
{{ item.title.text }}
{{ item.title }}
</view>
</view>
</view>
@ -206,15 +206,9 @@
});
// 生成数据
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.col));
const swiperHeight = computed(() => props.data.row * (props.data.layout == 1 ? 200 : 180));
const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
const swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180));
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 事件
const swiperChange = (e) => {

14
sheep/components/s-menu-grid/s-menu-grid.vue
View File

@ -1,5 +1,5 @@
<template>
<uni-grid :showBorder="Boolean(data.border)" :column="data.col">
<uni-grid :showBorder="Boolean(data.border)" :column="data.column">
<uni-grid-item
v-for="(item, index) in data.list"
:key="index"
@ -10,19 +10,19 @@
<view
class="tag-box"
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 }}
</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 class="title-box ss-flex ss-flex-col ss-row-center ss-col-center">
<view class="grid-text" :style="[{ color: item.title.color }]">
{{ item.title.text }}
<view class="grid-text" :style="[{ color: item.titleColor }]">
{{ item.title }}
</view>
<view class="grid-tip" :style="[{ color: item.tip.color }]">
{{ item.tip.text }}
<view class="grid-tip" :style="[{ color: item.subtitleColor }]">
{{ item.subtitle }}
</view>
</view>
</view>

12
sheep/components/s-menu-list/s-menu-list.vue
View File

@ -11,25 +11,25 @@
<template v-slot:header>
<view class="ss-flex ss-col-center">
<image
v-if="item.src"
v-if="item.iconUrl"
class="list-icon"
:src="sheep.$url.cdn(item.src)"
:src="sheep.$url.cdn(item.iconUrl)"
mode="aspectFit"
></image>
<view
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>
</template>
<template v-slot:footer>
<view
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>
</template>
</uni-list-item>

9
sheep/components/s-notice-block/s-notice-block.vue
View File

@ -1,15 +1,16 @@
<template>
<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
style="flex: 1"
:showIcon="false"
scrollable
single
:text="data.title.text"
:text="data.contents[0].text"
:speed="50"
:color="data.title.color"
@tap="sheep.$router.go(data.url)"
:color="data.textColor"
@tap="sheep.$router.go(data.contents[0].url)"
></su-notice-bar>
</view>
</template>

17
sheep/components/s-search-block/s-search-block.vue
View File

@ -29,24 +29,23 @@
v-model="state.searchVal"
/>
<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
class="ss-m-r-16"
:style="[{ color: item.color }]"
@tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item.text })"
>{{ item.text }}</view
:style="[{ color: data.textColor }]"
@tap.stop="sheep.$router.go('/pages/goods/list', { keyword: item })"
>{{ item }}</view
>
</view>
</view>
<view v-if="data.keywords && data.keywords.length && navbar" class="ss-flex">
<view v-if="data.hotKeywords && data.hotKeywords.length && navbar" class="ss-flex">
<button
class="ss-reset-button keyword-btn"
v-for="(item, index) in data.keywords"
v-for="(item, index) in data.hotKeywords"
:key="index"
:style="[{ color: item.color, marginRight: '10rpx' }]"
:style="[{ color: data.textColor, marginRight: '10rpx' }]"
>
{{ item.text }}
{{ item }}
</button>
</view>
</view>

28
sheep/components/s-tabbar/s-tabbar.vue
View File

@ -1,29 +1,29 @@
<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
:value="path"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
:inactiveColor="tabbar.inactiveColor"
:activeColor="tabbar.activeColor"
:inactiveColor="tabbar.style.color"
:activeColor="tabbar.style.activeColor"
:midTabBar="tabbar.mode === 2"
:customStyle="tabbarStyle"
>
<su-tabbar-item
v-for="(item, index) in tabbar.list"
v-for="(item, index) in tabbar.items"
:key="item.text"
:text="item.text"
:name="item.url"
:isCenter="getTabbarCenter(index)"
:centerImage="sheep.$url.cdn(item.inactiveIcon)"
:centerImage="sheep.$url.cdn(item.iconUrl)"
@tap="sheep.$router.go(item.url)"
>
<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 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>
</su-tabbar-item>
</su-tabbar>
@ -39,20 +39,22 @@
});
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.background;
if (backgroundStyle.type == 'color') return { background: backgroundStyle.bgColor };
if (backgroundStyle.type == 'image')
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') {
return { background: backgroundStyle.bgColor };
}
if (backgroundStyle.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
backgroundStyle.bgImage,
backgroundStyle.bgImg,
)}) no-repeat top center / 100% auto`,
};
});
const getTabbarCenter = (index) => {
if (unref(tabbar).mode !== 2) return false;
return unref(tabbar).list % 2 > 0
? Math.ceil(unref(tabbar).list.length / 2) === index + 1
return unref(tabbar).items % 2 > 0
? Math.ceil(unref(tabbar).items.length / 2) === index + 1
: false;
};

3
sheep/components/s-video-block/s-video-block.vue
View File

@ -4,8 +4,9 @@
class="sss"
:uid="guid()"
:src="sheep.$url.cdn(data.videoUrl)"
:poster="sheep.$url.cdn(data.src)"
:poster="sheep.$url.cdn(data.posterUrl)"
:height="styles.height * 2"
:autoplay="data.autoplay"
></su-video>
</template>

17
sheep/store/app.js
View File

@ -1,4 +1,5 @@
import appApi from '@/sheep/api/app';
import diyTemplateApi from '@/sheep/api/promotion/diy/template';
import { defineStore } from 'pinia';
import $platform from '@/sheep/platform';
import $router from '@/sheep/router';
@ -71,6 +72,8 @@ const app = defineStore({
}
this.chat = res.data.chat;
await adaptTemplate(this.template);
// 加载主题
const sysStore = sys();
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;

6
sheep/ui/su-tabbar-item/su-tabbar-item.vue
View File

@ -8,7 +8,7 @@
<image
v-if="icon"
:name="icon"
:color="isActive ? parentData.activeColor : parentData.inactiveColor"
:color="isActive ? parentData.activeColor : parentData.color"
:size="20"
></image>
<block v-else>
@ -29,7 +29,7 @@
<text
class="u-tabbar-item__text"
:style="{
color: isActive ? parentData.activeColor : parentData.inactiveColor,
color: isActive ? parentData.activeColor : parentData.color,
}"
>
{{ text }}
@ -120,7 +120,7 @@
parentData: {
value: null,
activeColor: '',
inactiveColor: '',
color: '',
},
parent: {},
};

5
sheep/ui/su-video/su-video.vue
View File

@ -18,6 +18,7 @@
@pause="pause"
@ended="end"
:poster="poster"
:autoplay="autoplay"
>
<!-- #ifdef APP-PLUS -->
<cover-view :style="{ transform: 'translateX(' + moveX + 'px)' }" />
@ -90,6 +91,10 @@
type: String,
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
},
autoplay: {
type: Boolean,
default: false,
}
});
// 事件