root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

1、实现主题颜色、分类样式与后台的互通

Browse Source
This commit is contained in:
77 2024-11-08 17:29:51 +08:00
parent 6c85309ff4
commit 15bf3ad508
17 changed files with 655 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
pages/activity/groupon/list.vue
View File

@ -1,7 +1,7 @@
<!-- 拼团活动列表 -->
<template>
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }">
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="page-bg" :class="state.themeType ? `${state.themeType}v` : ''" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]" />
<view class="list-content">
<!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center">
@ -17,7 +17,7 @@
<i>···</i>
</span>
</view>
<text class="pic_count">{{ state.summaryData.userCount || 0 }}人参与</text>
<text class="pic_count" :class="state.themeType ? state.themeType : ''">{{ state.summaryData.userCount || 0 }}人参与</text>
</view>
</view>
<scroll-view
@ -36,7 +36,7 @@
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
>
<template v-slot:cart>
<button class="ss-reset-button cart-btn">去拼团</button>
<button class="ss-reset-button cart-btn" :class="state.themeType ? state.themeType : ''">去拼团</button>
</template>
</s-goods-column>
</view>
@ -53,11 +53,11 @@
</s-layout>
</template>
<script setup>
import { reactive } from 'vue';
import { reactive,computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination';
const app = computed(() => sheep.$store('app'));
const { safeAreaInsets, safeArea } = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@ -74,6 +74,7 @@
},
loadStatus: '',
summaryData: {},
themeType:app.value.platform.themeType
});
// 加载统计数据
@ -122,6 +123,14 @@
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%;
}
.lvv{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ed254fe4a03c16933e608f8adeb3e700a24ec4620064746a516c10da395b9395.png') !important;
background-size: 100% 100%;
}
.bluev{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/8728b7f2de5a0d2d8a74ef0c17a275f82b265a3d8d11993ec7c424c3ad454f0b.png') !important;
background-size: 100% 100%;
}
.list-content {
position: relative;
z-index: 3;
@ -220,6 +229,7 @@
font-size: 24rpx;
color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%);
// background: rgba(72,204,82);
}
}
}

7
pages/goods/components/detail/detail-comment-card.vue
View File

@ -3,7 +3,7 @@
<view class="detail-comment-card bg-white">
<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30">
<view class="ss-flex ss-col-center">
<view class="line"></view>
<view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
<view class="title ss-m-l-20 ss-m-r-10">评价</view>
<view class="des">({{ state.total }})</view>
</view>
@ -32,11 +32,11 @@
</template>
<script setup>
import { reactive, onBeforeMount } from 'vue';
import { reactive, onBeforeMount,computed } from 'vue';
import sheep from '@/sheep';
import CommentApi from '@/sheep/api/product/comment';
import commentItem from './comment-item.vue';
const app = computed(() => sheep.$store('app'));
const props = defineProps({
goodsId: {
type: [Number, String],
@ -47,6 +47,7 @@
const state = reactive({
commentList: [], // 评论列表，只展示最近的 3 条
total: 0, // 总评论数
themeType: app.value.platform.themeType
});
async function getComment(id) {

91
pages/goods/components/detail/detail-content-card.vue
View File

@ -1,52 +1,63 @@
<!-- 商品详情：描述卡片 -->
<template>
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
<view class="line"></view>
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
</view>
<view class="card-content">
<mp-html :content="content" />
</view>
</view>
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20">
<view class="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
<view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
<view class="title ss-m-l-20 ss-m-r-20">详情</view>
</view>
<view class="card-content">
<mp-html :content="content" />
</view>
</view>
</template>
<script setup>
import sheep from '@/sheep';
const { safeAreaInsets } = sheep.$platform.device;
import {
reactive,
computed
} from 'vue';
import sheep from '@/sheep';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
const props = defineProps({
content: {
type: String,
default: '',
},
});
const {
safeAreaInsets
} = sheep.$platform.device;
const props = defineProps({
content: {
type: String,
default: '',
},
});
</script>
<style lang="scss" scoped>
.detail-content-card {
.card-header {
.line {
width: 6rpx;
height: 30rpx;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
border-radius: 3rpx;
}
.detail-content-card {
.card-header {
.line {
width: 6rpx;
height: 30rpx;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
border-radius: 3rpx;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.title {
font-size: 30rpx;
font-weight: bold;
}
.des {
font-size: 24rpx;
color: $dark-9;
}
.des {
font-size: 24rpx;
color: $dark-9;
}
.more-btn {
font-size: 24rpx;
color: var(--ui-BG-Main);
}
}
}
</style>
.more-btn {
font-size: 24rpx;
color: var(--ui-BG-Main);
}
}
}
</style>

7
pages/goods/components/detail/detail-navbar.vue
View File

@ -29,7 +29,7 @@
<view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
{{ item.label }}
</view>
<view v-show="state.curTab === item.value" class="tab-line"></view>
<view v-show="state.curTab === item.value" class="tab-line" :class="state.themeType ? state.themeType : ''"></view>
</view>
</view>
</view>
@ -41,12 +41,12 @@
</template>
<script setup>
import { reactive } from 'vue';
import { reactive, computed } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import throttle from '@/sheep/helper/throttle.js';
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
const app = computed(() => sheep.$store('app'));
const sys_statusBar = sheep.$platform.device.statusBarHeight;
const sys_navBar = sheep.$platform.navbar;
const capsuleStyle = {
@ -74,6 +74,7 @@
to: 'detail-content-selector',
},
],
themeType:app.value.platform.themeType
});
const emits = defineEmits(['clickLeft']);
const hasHistory = sheep.$router.hasHistory();

62
pages/goods/groupon.vue
View File

File diff suppressed because one or more lines are too long

14
pages/goods/index.vue
View File

@ -111,12 +111,14 @@
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
<button
class="ss-reset-button add-btn ui-Shadow-Main"
@tap="state.showSelectSku = true"
:class="state.themeType ? `${state.themeType}v` : ''"
@tap="state.showSelectSku = true"
>
加入购物车
</button>
<button
class="ss-reset-button buy-btn ui-Shadow-Main"
:class="state.themeType ? state.themeType : ''"
@tap="state.showSelectSku = true"
>
立即购买
@ -167,6 +169,7 @@
onPageScroll(() => {});
const isLogin = computed(() => sheep.$store('user').isLogin);
const app = computed(() => sheep.$store('app'));
const state = reactive({
goodsId: 0,
skeletonLoading: true, // SPU 加载中
@ -178,6 +181,7 @@
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
themeType:app.value.platform.themeType
});
// 规格变更
@ -318,6 +322,14 @@
</script>
<style lang="scss" scoped>
.bluev{
background-color:rgba(33,202,254) !important;
color:white !important;
}
.lvv{
background-color:rgba(253,157,17) !important;
color:white !important;
}
.detail-card {
background-color: #ffff;
margin: 14rpx 20rpx;

32
pages/goods/seckill.vue
View File

File diff suppressed because one or more lines are too long

12
pages/index/category.vue
View File

@ -21,10 +21,10 @@
<first-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
<!-- 样式1 -->
<!-- <second-one v-if="state.style === 'second_one'" :data="state.categoryList"
:activeMenu="state.activeMenu" /> -->
<second-one v-show="state.typeId === '1'" :data="state.categoryList"
:activeMenu="state.activeMenu" />
<!-- 样式2 -->
<second-second ref="secondRef" v-if="state.style === 'second_one'" :data="state.categoryList"
<second-second ref="secondRef" v-show="state.typeId === '2'" :data="state.categoryList"
:activeMenu="state.activeMenu" />
<uni-load-more v-if="
@ -60,7 +60,6 @@
import {
handleTree
} from '@/sheep/util';
const state = reactive({
style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
categoryList: [], // 商品分类树
@ -74,8 +73,11 @@
pageSize: 6,
},
loadStatus: '',
typeId:'1'
});
const app = computed(() => sheep.$store('app'));
state.typeId = app.value.platform.goodsType;//判断是什么样式
// console.log(app.value.platform.goodsType,"------------------------")
const secondRef = ref(null);
const {

9
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -170,8 +170,8 @@
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<!-- <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view> -->
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view>
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center" :class="state.themeType ? state.themeType : ''">
<view class="tag-icon" :class="state.themeType ? state.themeType : ''">拼团</view>
</view>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ">
@ -350,6 +350,7 @@
*
*/
import {
reactive,
computed,
getCurrentInstance,
nextTick,
@ -369,6 +370,10 @@
import {
PromotionActivityTypeEnum
} from '@/sheep/util/const';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType:app.value.platform.themeType
});
// console.log(PromotionActivityTypeEnum,"PromotionActivityTypeEnum")
// 接收参数
const props = defineProps({

199
sheep/components/s-order-card/s-order-card.vue
View File

@ -16,11 +16,7 @@
:key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })">
<uni-badge class="uni-badge-left-margin" :text="numData.orderCount[item.count]" absolute="rightTop"
size="small">
<image v-if="index == 0" class="item-icon" :src="imag0" mode="aspectFit" />
<image v-if="index == 1" class="item-icon" :src="imag1" mode="aspectFit" />
<image v-if="index == 2" class="item-icon" :src="imag2" mode="aspectFit" />
<image v-if="index == 3" class="item-icon" :src="imag3" mode="aspectFit" />
<image v-if="index == 4" class="item-icon" :src="imag4" mode="aspectFit" />
<image class="item-icon" :src="item.icon" mode="aspectFit" />
</uni-badge>
<view class="menu-title">{{ item.title }}</view>
</view>
@ -39,57 +35,152 @@
*/
import sheep from '@/sheep';
import {
computed
computed,
reactive,
ref
} from 'vue';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
const orderMap = ref([]);
if (state.themeType == 'lv') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/853135945c3ba85e1e59b7b4998fc058353b0d6a293d123a7208ea119bbc3511.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c9957347129a658ed5c9217bd913e4ecd8d05b161f9ba7931a7f9915657dde14.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c2c90f1a7bee3d1d0e933b7ab7c5b186b4dbc0adf8748ceb4e69cabcbfab136f.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/d392c395c9aa2fa0a6d250b4bad574909945f56cb480b7a05707c4f4e7e23b19.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/cdd41605506b625510a90ce6d8194ad4b66be37ec5bdf6a56ddcf8d9206eff40.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'blue') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/e947004cbd4ffa27cc5b0b752da5cebfc4133a280961711c581025ff2e28e04b.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/1658843d761c5d2a130feeabe86b82f11ef6f9546db4fd013eb94ab4d759858f.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/71e01ef9cfe2c54695169248f142dd28d37b56b61fc36622b98b415b70e7b495.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/3bcf948bf269e61d0fe709836b2d36f646bfc3adbc968efc9404e41e7be6f04d.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6c69c4f4b1887889a0d0a5ca34a26582a8ba4f0600ae2db3ea6c76a67fcdab59.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/623cb21c48a8e74cad53266c2b51db74408871f85a7e6adcb375513011659197.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/908b654b1d00bdb10f0364607fa2799f1209f2e986cb58582f0dc6ebe52d9ce4.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a6bc4ea6f95aaaec8b12ce20886d2dd7e1db7b547ba1c52f8b4bebb35f3e7cf3.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4f14b9cc394e0791928257174fa1b62e05a535f5556f07218f058ffc6cefe80.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/686bf80ff876ed116df99552e5649e10ed5a9cddcc7b3cd5adc641ec022366cf.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
// ,
// {
// title: '全部订单',
// value: '0',
// icon: '/static/img/shop/order/all_order.png',
// path: '/pages/order/list',
// }
];
}
const orderMap = [{
title: '待付款',
value: '1',
icon: '/static/img/shop/order/no_pay.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: '/static/img/shop/order/no_take.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: '/static/img/shop/order/no_take.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: '/static/img/shop/order/no_comment.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: '/static/img/shop/order/change_order.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
// ,
// {
// title: '全部订单',
// value: '0',
// icon: '/static/img/shop/order/all_order.png',
// path: '/pages/order/list',
// }
];
const numData = computed(() => sheep.$store('user').numData);

22
sheep/components/s-select-sku/s-select-sku.vue
View File

@ -42,6 +42,12 @@
{
'disabled-btn': value.disabled === true,
},
{
'lv' : state.themeType == 'lv' && state.currentPropertyArray[property.id] === value.id,
},
{
'blue' : state.themeType == 'blue' && state.currentPropertyArray[property.id] === value.id,
},
]"
:key="value.id"
:disabled="value.disabled === true"
@ -59,6 +65,7 @@
:step="1"
v-model="state.selectedSku.goods_num"
@change="onNumberChange($event)"
:vsl= state.themeType
/>
</view>
</scroll-view>
@ -67,10 +74,10 @@
<!-- 操作区 -->
<view class="modal-footer border-top">
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
<button :class="state.themeType ? `${state.themeType}v` : ''" class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
>加入购物车</button
>
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
<button :class="state.themeType ? state.themeType : ''" class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
@ -81,7 +88,7 @@
import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep';
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
const app = computed(() => sheep.$store('app'));
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
@ -97,6 +104,7 @@
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
themeType:app.value.platform.themeType
});
const propertyList = convertProductPropertyList(props.goodsInfo.skus);
@ -295,6 +303,14 @@
</script>
<style lang="scss" scoped>
.bluev{
background-color:rgba(33,202,254) !important;
color:white !important;
}
.lvv{
background-color:rgba(253,157,17) !important;
color:white !important;
}
// 购买
.buy-box {
padding: 10rpx 0;

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

@ -1,90 +1,178 @@
<template>
<view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar
:value="path"
:fixed="true"
:placeholder="true"
:safeAreaInsetBottom="true"
:inactiveColor="tabbar.style.color"
:activeColor="tabbar.style.activeColor"
:midTabBar="tabbar.mode === 2"
:customStyle="tabbarStyle"
>
<su-tabbar-item
v-for="(item, index) in tabbar.items"
:key="item.text"
:text="item.text"
:name="item.url"
:isCenter="getTabbarCenter(index)"
: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.activeIconUrl)"></image>
</template>
<template v-slot:inactive-icon>
<image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
</template>
</su-tabbar-item>
</su-tabbar>
</view>
<view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
:inactiveColor="tabbar.style.color" :activeColor="tabbar.style.activeColor" :midTabBar="tabbar.mode === 2"
:customStyle="tabbarStyle">
<su-tabbar-item v-for="(item, index) in Citrn" :key="item.text" :text="item.text" :name="item.url"
:isCenter="getTabbarCenter(index)" :centerImage="sheep.$url.cdn(item.iconUrl)"
@tap="sheep.$router.go(item.url)"
:vl="state.themeType">
<template v-slot:active-icon>
<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.iconUrl)"></image>
</template>
</su-tabbar-item>
</su-tabbar>
</view>
</template>
<script setup>
import { computed, unref } from 'vue';
import sheep from '@/sheep';
const tabbar = computed(() => {
return sheep.$store('app').template.basic?.tabbar;
});
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') {
return { background: backgroundStyle.bgColor };
}
if (backgroundStyle.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
import {
computed,
unref,
ref,
reactive
} from 'vue';
import sheep from '@/sheep';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType:app.value.platform.themeType
});
const tabbar = computed(() => {
return sheep.$store('app').template.basic?.tabbar;
});
console.log('--------', tabbar.value.items)
const Citrn = ref([]);
if (state.themeType == 'lv') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/fdece57673d74d956692edad8c83e85b62503f90f1286cfcbfa9e1c564e127f0.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/3f681bdfd791d2170fff188be799c588b60a3ceb5b9cd22b8b94a1ae508783d4.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/c8e2bc5e2d49ad959951e52c4f4020d6b794310389a09138e1b454be6d6086ec.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/cfd3ca7242acfa44b890c66b43ea39dc83de0570a20718251c73785540085002.png"
}
];
} else if (state.themeType == 'blue') {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/d353e289077f36dab00bb39b161e04364e8d5c1f8e86b2c8ad77e2efc8b38c80.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/ffdbfc0244b68cbc0985339049e9b5b5cddf16e50cf4c0ec7326efd61dc5334d.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/5d399948d0d391a2ae88fb29049ced561106d7bc6d3bae525c32f3f6dfb92677.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/4a5387da733de9a9b2bfe921d0a3f09031cc6da7d3bf1b6125eb6635c9e5f7e9.png"
}
];
} else {
Citrn.value = [{
text: "首页",
url: "/pages/index/index",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/1-002.png"
},
{
text: "分类",
url: "/pages/index/category?id=3",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/2-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/2-002.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/3-002.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "http://mall.yudao.iocoder.cn/static/images/4-002.png"
}
];
}
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') {
return {
background: backgroundStyle.bgColor
};
}
if (backgroundStyle.bgType === 'img')
return {
background: `url(${sheep.$url.cdn(
backgroundStyle.bgImg,
)}) no-repeat top center / 100% auto`,
};
});
};
});
const getTabbarCenter = (index) => {
if (unref(tabbar).mode !== 2) return false;
return unref(tabbar).items % 2 > 0
? Math.ceil(unref(tabbar).items.length / 2) === index + 1
: false;
};
const getTabbarCenter = (index) => {
if (unref(tabbar).mode !== 2) return false;
return unref(tabbar).items % 2 > 0 ?
Math.ceil(unref(tabbar).items.length / 2) === index + 1 :
false;
};
const props = defineProps({
path: String,
default: '',
});
const props = defineProps({
path: String,
default: '',
});
</script>
<style lang="scss">
.u-page {
padding: 0;
.u-page {
padding: 0;
&__item {
&__title {
color: var(--textSize);
background-color: #fff;
padding: 15px;
font-size: 15px;
&__item {
&__title {
color: var(--textSize);
background-color: #fff;
padding: 15px;
font-size: 15px;
&__slot-title {
color: var(--textSize);
font-size: 14px;
}
}
&__slot-title {
color: var(--textSize);
font-size: 14px;
}
}
&__slot-icon {
width: 25px;
height: 25px;
}
}
}
</style>
&__slot-icon {
width: 25px;
height: 25px;
}
}
}
</style>

9
sheep/components/s-user-card/s-user-card.vue
View File

@ -1,7 +1,9 @@
<!-- 装修用户组件：用户卡片 -->
<template>
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;">
<image class="seckill" src="@/static/images/seckilbg.png"></image>
<image class="seckill" src="@/static/images/seckilbg.png" v-if="state.themeType == ''"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/7925fd9e2c1df9cd29462c946f7c54d89d148b03d5fd366864636c3343282a2b.png" v-if="state.themeType == 'lv'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/b350b54f38628fcb465805b81d624717dc83598604c4e58c674ae8558dc7386c.png" v-if="state.themeType == 'blue'"></image>
<view class="ss-flex ss-col-center ss-row-between ">
<view class="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24">
@ -73,7 +75,10 @@
showShareModal,
showAuthModal
} from '@/sheep/hooks/useModal';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType: app.value.platform.themeType
});
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
console.log('用户信息', userInfo);

9
sheep/scss/index.scss
View File

@ -25,3 +25,12 @@ page {
color: transparent;
display: none;
}
/* 主题颜色 */
.lv{
background:rgba(72,204,82) !important;
}
.blue{
background:rgba(28,165,233) !important;
}

236
sheep/store/app.js
View File

@ -1,134 +1,140 @@
import DiyApi from '@/sheep/api/promotion/diy';
import { defineStore } from 'pinia';
import {
defineStore
} from 'pinia';
import $platform from '@/sheep/platform';
import $router from '@/sheep/router';
import user from './user';
import sys from './sys';
const app = defineStore({
id: 'app',
state: () => ({
info: {
// 应用信息
name: '', // 商城名称
logo: '', // logo
version: '', // 版本号
copyright: '', // 版权信息 I
copytime: '', // 版权信息 II
id: 'app',
state: () => ({
info: {
// 应用信息
name: '', // 商城名称
logo: '', // logo
version: '', // 版本号
copyright: '', // 版权信息 I
copytime: '', // 版权信息 II
cdnurl: '', // 云存储域名
filesystem: '', // 云存储平台
},
platform: {
share: {
methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息
posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址
},
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
},
template: {
// 店铺装修模板
basic: {}, // 基本信息
home: {
// 首页模板
style: {},
data: [],
},
user: {
// 个人中心模板
style: {},
data: [],
},
},
shareInfo: {}, // 全局分享信息
has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有
}),
actions: {
// 获取Shopro应用配置和模板
async init(templateId = null) {
// 检查网络
const networkStatus = await $platform.checkNetwork();
if (!networkStatus) {
$router.error('NetworkError');
}
cdnurl: '', // 云存储域名
filesystem: '', // 云存储平台
},
platform: {
share: {
methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息
posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址
},
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
goodsType: '' //商城分类样式
},
template: {
// 店铺装修模板
basic: {}, // 基本信息
home: {
// 首页模板
style: {},
data: [],
},
user: {
// 个人中心模板
style: {},
data: [],
},
},
shareInfo: {}, // 全局分享信息
has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有
}),
actions: {
// 获取Shopro应用配置和模板
async init(templateId = null) {
// 检查网络
const networkStatus = await $platform.checkNetwork();
if (!networkStatus) {
$router.error('NetworkError');
}
// 加载装修配置
await adaptTemplate(this.template, templateId);
// 加载装修配置
const res2 = await adaptTemplate(this.template, templateId);
console.log(res2,"--------------")
// TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
if (true) {
this.info = {
name: '芋道商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.1.13',
copyright: '全部开源，个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
// TODO 芋艿：未来支持管理后台可配；对应 https://api.shopro.sheepjs.com/shop/api/init
if (true) {
this.info = {
name: '芋道商城',
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
version: '1.1.13',
copyright: '全部开源，个人与企业可 100% 免费使用',
copytime: 'Copyright© 2018-2024',
cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
filesystem: 'qcloud', // 云存储平台
};
this.platform = {
share: {
methods: ['poster', 'link'],
linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
posterInfo: {
user_bg: '/shangcheng/baa4f41883b4bb8880ff83281f258418281ea0383c505001300ca2953299db8a.png',
goods_bg: '/shangcheng/goods-poster-bg.png',
groupon_bg: '/shangcheng/groupon-poster-bg.png',
},
},
bind_mobile: 0,
goodsType:res2.goodsType,
themeType:res2.themeType
};
this.has_wechat_trade_managed = 0;
cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
filesystem: 'qcloud', // 云存储平台
};
this.platform = {
share: {
methods: ['poster', 'link'],
linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
posterInfo: {
user_bg: '/shangcheng/baa4f41883b4bb8880ff83281f258418281ea0383c505001300ca2953299db8a.png',
goods_bg: '/shangcheng/goods-poster-bg.png',
groupon_bg: '/shangcheng/groupon-poster-bg.png',
},
},
bind_mobile: 0,
};
this.has_wechat_trade_managed = 0;
// 加载主题
const sysStore = sys();
sysStore.setTheme();
// 加载主题
const sysStore = sys();
sysStore.setTheme();
// 模拟用户登录
const userStore = user();
if (userStore.isLogin) {
userStore.loginAfter();
}
return Promise.resolve(true);
} else {
$router.error('InitError', res.msg || '加载失败');
}
},
},
persist: {
enabled: true,
strategies: [
{
key: 'app-store',
},
],
},
// 模拟用户登录
const userStore = user();
if (userStore.isLogin) {
userStore.loginAfter();
}
return Promise.resolve(true);
} else {
$router.error('InitError', res.msg || '加载失败');
}
},
},
persist: {
enabled: true,
strategies: [{
key: 'app-store',
}, ],
},
});
// todo: @owen 先做数据适配，后期重构
const adaptTemplate = async (appTemplate, templateId) => {
const { data: diyTemplate } = templateId
? // 查询指定模板，一般是预览时使用
await DiyApi.getDiyTemplate(templateId)
: await DiyApi.getUsedDiyTemplate();
// 模板不存在
if (!diyTemplate) {
$router.error('TemplateError');
return;
}
const {
data: diyTemplate
} = templateId
? // 查询指定模板，一般是预览时使用
await DiyApi.getDiyTemplate(templateId) :
await DiyApi.getUsedDiyTemplate();
// 模板不存在
if (!diyTemplate) {
$router.error('TemplateError');
return;
}
const tabBar = diyTemplate?.property?.tabBar;
if (tabBar) {
appTemplate.basic.tabbar = tabBar;
if (tabBar?.theme) {
appTemplate.basic.theme = tabBar?.theme;
}
}
appTemplate.home = diyTemplate?.home;
appTemplate.user = diyTemplate?.user;
const tabBar = diyTemplate?.property?.tabBar;
if (tabBar) {
appTemplate.basic.tabbar = tabBar;
if (tabBar?.theme) {
appTemplate.basic.theme = tabBar?.theme;
}
}
appTemplate.home = diyTemplate?.home;
appTemplate.user = diyTemplate?.user;
return diyTemplate
};
export default app;
export default app;

14
sheep/ui/su-number-box/su-number-box.vue
View File

@ -11,6 +11,8 @@
'uni-numbox--disabled': inputValue <= min || disabled,
'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
}"
@click="_calcValue('minus')"
></text>
@ -33,6 +35,8 @@
'uni-numbox--disabled': inputValue >= max || disabled,
'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
}"
@click="_calcValue('plus')"
></text>
@ -59,6 +63,10 @@
name: 'UniNumberBox',
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
props: {
vsl:{
type: String,
default: '',
},
value: {
type: [Number, String],
default: 1,
@ -185,6 +193,12 @@
};
</script>
<style lang="scss" scoped>
.bluev{
color:rgba(28,165,233) !important;
}
.lvv{
color:rgba(72,204,82) !important;
}
.uni-numbox .uni-numbox--disabled {
color: #c0c0c0 !important;
/* #ifdef H5 */

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

@ -32,6 +32,7 @@
:style="{
color: isActive ? parentData.activeColor : parentData.color,
}"
:class="vl && isActive ? `${vl}v` : ''"
>
{{ text }}
</text>
@ -65,6 +66,10 @@
type: String,
default: '',
},
vl: {
type: String,
default: '',
},
// 跳转的页面路径
url: {
type: String,
@ -185,6 +190,12 @@
</script>
<style lang="scss" scoped>
.lvv{
color:rgba(72,204,82) !important;
}
.bluev{
color:rgba(28,165,233) !important;
}
.tabbar-center-item {
height: 40px;
width: 40px;