root/zyejMAll-mobile
1
0
Fork 0
Code Issues Pull Requests 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> <template>
<s-layout navbar="inner" :bgStyle="{ color: '#FE832A' }"> <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="list-content">
<!-- 参团会员统计 --> <!-- 参团会员统计 -->
<view class="content-header ss-flex-col ss-col-center ss-row-center"> <view class="content-header ss-flex-col ss-col-center ss-row-center">
@ -17,7 +17,7 @@
<i>···</i> <i>···</i>
</span> </span>
</view> </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>
</view> </view>
<scroll-view <scroll-view
@ -36,7 +36,7 @@
@click="sheep.$router.go('/pages/goods/groupon', { id: item.id })" @click="sheep.$router.go('/pages/goods/groupon', { id: item.id })"
> >
<template v-slot:cart> <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> </template>
</s-goods-column> </s-goods-column>
</view> </view>
@ -53,11 +53,11 @@
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue'; import { reactive,computed } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import CombinationApi from '@/sheep/api/promotion/combination'; import CombinationApi from '@/sheep/api/promotion/combination';
const app = computed(() => sheep.$store('app'));
const { safeAreaInsets, safeArea } = sheep.$platform.device; const { safeAreaInsets, safeArea } = sheep.$platform.device;
const sysNavBar = sheep.$platform.navbar; const sysNavBar = sheep.$platform.navbar;
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
@ -74,6 +74,7 @@
}, },
loadStatus: '', loadStatus: '',
summaryData: {}, summaryData: {},
themeType:app.value.platform.themeType
}); });
// 加载统计数据 // 加载统计数据
@ -122,6 +123,14 @@
background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png'); background: url('https://zysc.fjptzykj.com:3000/shangcheng/fea9ad54f32d4705a633874efd534e70e507030ea5a7604b0110fdf7292f1f4d.png');
background-size: 100% 100%; 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 { .list-content {
position: relative; position: relative;
z-index: 3; z-index: 3;
@ -220,6 +229,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #fff;
background: linear-gradient(90deg, #ff6600 0%, #fe832a 100%); 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="detail-comment-card bg-white">
<view class="card-header ss-flex ss-col-center ss-row-between ss-p-b-30"> <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="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="title ss-m-l-20 ss-m-r-10">评价</view>
<view class="des">({{ state.total }})</view> <view class="des">({{ state.total }})</view>
</view> </view>
@ -32,11 +32,11 @@
</template> </template>
<script setup> <script setup>
import { reactive, onBeforeMount } from 'vue'; import { reactive, onBeforeMount,computed } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import CommentApi from '@/sheep/api/product/comment'; import CommentApi from '@/sheep/api/product/comment';
import commentItem from './comment-item.vue'; import commentItem from './comment-item.vue';
const app = computed(() => sheep.$store('app'));
const props = defineProps({ const props = defineProps({
goodsId: { goodsId: {
type: [Number, String], type: [Number, String],
@ -47,6 +47,7 @@
const state = reactive({ const state = reactive({
commentList: [], // 评论列表，只展示最近的 3 条 commentList: [], // 评论列表，只展示最近的 3 条
total: 0, // 总评论数 total: 0, // 总评论数
themeType: app.value.platform.themeType
}); });
async function getComment(id) { async function getComment(id) {

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

@ -1,52 +1,63 @@
<!-- 商品详情：描述卡片 --> <!-- 商品详情：描述卡片 -->
<template> <template>
<view class="detail-content-card bg-white ss-m-x-20 ss-p-t-20"> <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="card-header ss-flex ss-col-center ss-m-b-30 ss-m-l-20">
<view class="line"></view> <view class="line" :class="state.themeType ? `${state.themeType}` : ''"></view>
<view class="title ss-m-l-20 ss-m-r-20">详情</view> <view class="title ss-m-l-20 ss-m-r-20">详情</view>
</view> </view>
<view class="card-content"> <view class="card-content">
<mp-html :content="content" /> <mp-html :content="content" />
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import {
const { safeAreaInsets } = sheep.$platform.device; 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({ const {
content: { safeAreaInsets
type: String, } = sheep.$platform.device;
default: '',
}, const props = defineProps({
}); content: {
type: String,
default: '',
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.detail-content-card { .detail-content-card {
.card-header { .card-header {
.line { .line {
width: 6rpx; width: 6rpx;
height: 30rpx; height: 30rpx;
background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%); background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%);
border-radius: 3rpx; border-radius: 3rpx;
} }
.title { .title {
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
} }
.des { .des {
font-size: 24rpx; font-size: 24rpx;
color: $dark-9; color: $dark-9;
} }
.more-btn { .more-btn {
font-size: 24rpx; font-size: 24rpx;
color: var(--ui-BG-Main); color: var(--ui-BG-Main);
} }
} }
} }
</style> </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' : ''"> <view class="tab-title" :class="state.curTab === item.value ? 'cur-tab-title' : ''">
{{ item.label }} {{ item.label }}
</view> </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> </view>
</view> </view>
@ -41,12 +41,12 @@
</template> </template>
<script setup> <script setup>
import { reactive } from 'vue'; import { reactive, computed } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app'; import { onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import throttle from '@/sheep/helper/throttle.js'; import throttle from '@/sheep/helper/throttle.js';
import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal'; import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
const app = computed(() => sheep.$store('app'));
const sys_statusBar = sheep.$platform.device.statusBarHeight; const sys_statusBar = sheep.$platform.device.statusBarHeight;
const sys_navBar = sheep.$platform.navbar; const sys_navBar = sheep.$platform.navbar;
const capsuleStyle = { const capsuleStyle = {
@ -74,6 +74,7 @@
to: 'detail-content-selector', to: 'detail-content-selector',
}, },
], ],
themeType:app.value.platform.themeType
}); });
const emits = defineEmits(['clickLeft']); const emits = defineEmits(['clickLeft']);
const hasHistory = sheep.$router.hasHistory(); const hasHistory = sheep.$router.hasHistory();

56
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"> <view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
<button <button
class="ss-reset-button add-btn ui-Shadow-Main" 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>
<button <button
class="ss-reset-button buy-btn ui-Shadow-Main" class="ss-reset-button buy-btn ui-Shadow-Main"
:class="state.themeType ? state.themeType : ''"
@tap="state.showSelectSku = true" @tap="state.showSelectSku = true"
> >
立即购买 立即购买
@ -167,6 +169,7 @@
onPageScroll(() => {}); onPageScroll(() => {});
const isLogin = computed(() => sheep.$store('user').isLogin); const isLogin = computed(() => sheep.$store('user').isLogin);
const app = computed(() => sheep.$store('app'));
const state = reactive({ const state = reactive({
goodsId: 0, goodsId: 0,
skeletonLoading: true, // SPU 加载中 skeletonLoading: true, // SPU 加载中
@ -178,6 +181,7 @@
showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗 showActivityModel: false, // 【满减送/限时折扣】是否展示 Activity 营销活动的弹窗
activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表 activityInfo: [], // 【满减送/限时折扣】可参与的 Activity 营销活动的列表
activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表 activityList: [], // 【秒杀/拼团/砍价】可参与的 Activity 营销活动的列表
themeType:app.value.platform.themeType
}); });
// 规格变更 // 规格变更
@ -318,6 +322,14 @@
</script> </script>
<style lang="scss" scoped> <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 { .detail-card {
background-color: #ffff; background-color: #ffff;
margin: 14rpx 20rpx; 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-one v-if="state.style === 'first_one'" :pagination="state.pagination" />
<first-two v-if="state.style === 'first_two'" :pagination="state.pagination" /> <first-two v-if="state.style === 'first_two'" :pagination="state.pagination" />
<!-- 样式1 --> <!-- 样式1 -->
<!-- <second-one v-if="state.style === 'second_one'" :data="state.categoryList" <second-one v-show="state.typeId === '1'" :data="state.categoryList"
:activeMenu="state.activeMenu" /> --> :activeMenu="state.activeMenu" />
<!-- 样式2 --> <!-- 样式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" /> :activeMenu="state.activeMenu" />
<uni-load-more v-if=" <uni-load-more v-if="
@ -60,7 +60,6 @@
import { import {
handleTree handleTree
} from '@/sheep/util'; } from '@/sheep/util';
const state = reactive({ const state = reactive({
style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级） style: 'second_one', // first_one（一级 - 样式一）, first_two（二级 - 样式二）, second_one（二级）
categoryList: [], // 商品分类树 categoryList: [], // 商品分类树
@ -74,8 +73,11 @@
pageSize: 6, pageSize: 6,
}, },
loadStatus: '', 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 secondRef = ref(null);
const { 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> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view> </view>
<!-- <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</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 v-if="grouponTag" class="groupon-tag ss-flex ss-row-center" :class="state.themeType ? state.themeType : ''">
<view class="tag-icon">拼团</view> <view class="tag-icon" :class="state.themeType ? state.themeType : ''">拼团</view>
</view> </view>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" /> <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 "> <view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ">
@ -350,6 +350,7 @@
* *
*/ */
import { import {
reactive,
computed, computed,
getCurrentInstance, getCurrentInstance,
nextTick, nextTick,
@ -369,6 +370,10 @@
import { import {
PromotionActivityTypeEnum PromotionActivityTypeEnum
} from '@/sheep/util/const'; } from '@/sheep/util/const';
const app = computed(() => sheep.$store('app'));
const state = reactive({
themeType:app.value.platform.themeType
});
// console.log(PromotionActivityTypeEnum,"PromotionActivityTypeEnum") // console.log(PromotionActivityTypeEnum,"PromotionActivityTypeEnum")
// 接收参数 // 接收参数
const props = defineProps({ 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 })"> :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" <uni-badge class="uni-badge-left-margin" :text="numData.orderCount[item.count]" absolute="rightTop"
size="small"> size="small">
<image v-if="index == 0" class="item-icon" :src="imag0" mode="aspectFit" /> <image class="item-icon" :src="item.icon" 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" />
</uni-badge> </uni-badge>
<view class="menu-title">{{ item.title }}</view> <view class="menu-title">{{ item.title }}</view>
</view> </view>
@ -39,57 +35,152 @@
*/ */
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import {
computed computed,
reactive,
ref
} from 'vue'; } 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); 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, '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" :key="value.id"
:disabled="value.disabled === true" :disabled="value.disabled === true"
@ -59,6 +65,7 @@
:step="1" :step="1"
v-model="state.selectedSku.goods_num" v-model="state.selectedSku.goods_num"
@change="onNumberChange($event)" @change="onNumberChange($event)"
:vsl= state.themeType
/> />
</view> </view>
</scroll-view> </scroll-view>
@ -67,10 +74,10 @@
<!-- 操作区 --> <!-- 操作区 -->
<view class="modal-footer border-top"> <view class="modal-footer border-top">
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center"> <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
> >
<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> </view>
</view> </view>
@ -81,7 +88,7 @@
import { computed, reactive, watch } from 'vue'; import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods'; import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
const app = computed(() => sheep.$store('app'));
const emits = defineEmits(['change', 'addCart', 'buy', 'close']); const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({ const props = defineProps({
goodsInfo: { goodsInfo: {
@ -97,6 +104,7 @@
const state = reactive({ const state = reactive({
selectedSku: {}, // 选中的 SKU selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号 currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
themeType:app.value.platform.themeType
}); });
const propertyList = convertProductPropertyList(props.goodsInfo.skus); const propertyList = convertProductPropertyList(props.goodsInfo.skus);
@ -295,6 +303,14 @@
</script> </script>
<style lang="scss" scoped> <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 { .buy-box {
padding: 10rpx 0; padding: 10rpx 0;

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

@ -1,90 +1,178 @@
<template> <template>
<view class="u-page__item" v-if="tabbar?.items?.length > 0"> <view class="u-page__item" v-if="tabbar?.items?.length > 0">
<su-tabbar <su-tabbar :value="path" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
:value="path" :inactiveColor="tabbar.style.color" :activeColor="tabbar.style.activeColor" :midTabBar="tabbar.mode === 2"
:fixed="true" :customStyle="tabbarStyle">
:placeholder="true" <su-tabbar-item v-for="(item, index) in Citrn" :key="item.text" :text="item.text" :name="item.url"
:safeAreaInsetBottom="true" :isCenter="getTabbarCenter(index)" :centerImage="sheep.$url.cdn(item.iconUrl)"
:inactiveColor="tabbar.style.color" @tap="sheep.$router.go(item.url)"
:activeColor="tabbar.style.activeColor" :vl="state.themeType">
:midTabBar="tabbar.mode === 2" <template v-slot:active-icon>
:customStyle="tabbarStyle" <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.activeIconUrl)"></image>
> </template>
<su-tabbar-item <template v-slot:inactive-icon>
v-for="(item, index) in tabbar.items" <image class="u-page__item__slot-icon" :src="sheep.$url.cdn(item.iconUrl)"></image>
:key="item.text" </template>
:text="item.text" </su-tabbar-item>
:name="item.url" </su-tabbar>
:isCenter="getTabbarCenter(index)" </view>
: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>
</template> </template>
<script setup> <script setup>
import { computed, unref } from 'vue'; import {
import sheep from '@/sheep'; 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([]);
const tabbar = computed(() => {
return sheep.$store('app').template.basic?.tabbar;
});
const tabbarStyle = computed(() => {
const backgroundStyle = tabbar.value.style;
if (backgroundStyle.bgType === 'color') { if (state.themeType == 'lv') {
return { background: backgroundStyle.bgColor }; Citrn.value = [{
} text: "首页",
if (backgroundStyle.bgType === 'img') url: "/pages/index/index",
return { iconUrl: "http://mall.yudao.iocoder.cn/static/images/1-001.png",
background: `url(${sheep.$url.cdn( 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, 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).items % 2 > 0 return unref(tabbar).items % 2 > 0 ?
? Math.ceil(unref(tabbar).items.length / 2) === index + 1 Math.ceil(unref(tabbar).items.length / 2) === index + 1 :
: false; false;
}; };
const props = defineProps({ const props = defineProps({
path: String, path: String,
default: '', default: '',
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
.u-page { .u-page {
padding: 0; padding: 0;
&__item { &__item {
&__title { &__title {
color: var(--textSize); color: var(--textSize);
background-color: #fff; background-color: #fff;
padding: 15px; padding: 15px;
font-size: 15px; font-size: 15px;
&__slot-title { &__slot-title {
color: var(--textSize); color: var(--textSize);
font-size: 14px; font-size: 14px;
} }
} }
&__slot-icon { &__slot-icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
} }
} }
</style> </style>

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

@ -1,7 +1,9 @@
<!-- 装修用户组件：用户卡片 --> <!-- 装修用户组件：用户卡片 -->
<template> <template>
<view class="ss-user-info-wrap ss-p-t-50" style="z-index: 9999;"> <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="ss-flex ss-col-center ss-row-between ">
<view class="left-box ss-flex ss-col-center ss-m-l-36"> <view class="left-box ss-flex ss-col-center ss-m-l-36">
<view class="avatar-box ss-m-r-24"> <view class="avatar-box ss-m-r-24">
@ -73,7 +75,10 @@
showShareModal, showShareModal,
showAuthModal showAuthModal
} from '@/sheep/hooks/useModal'; } 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); const userInfo = computed(() => sheep.$store('user').userInfo);
console.log('用户信息', userInfo); console.log('用户信息', userInfo);

9
sheep/scss/index.scss
View File

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

234
sheep/store/app.js
View File

@ -1,134 +1,140 @@
import DiyApi from '@/sheep/api/promotion/diy'; import DiyApi from '@/sheep/api/promotion/diy';
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';
import user from './user'; import user from './user';
import sys from './sys'; import sys from './sys';
const app = defineStore({ const app = defineStore({
id: 'app', id: 'app',
state: () => ({ state: () => ({
info: { info: {
// 应用信息 // 应用信息
name: '', // 商城名称 name: '', // 商城名称
logo: '', // logo logo: '', // logo
version: '', // 版本号 version: '', // 版本号
copyright: '', // 版权信息 I copyright: '', // 版权信息 I
copytime: '', // 版权信息 II copytime: '', // 版权信息 II
cdnurl: '', // 云存储域名 cdnurl: '', // 云存储域名
filesystem: '', // 云存储平台 filesystem: '', // 云存储平台
}, },
platform: { platform: {
share: { share: {
methods: [], // 支持的分享方式 methods: [], // 支持的分享方式
forwardInfo: {}, // 默认转发信息 forwardInfo: {}, // 默认转发信息
posterInfo: {}, // 海报信息 posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址 linkAddress: '', // 复制链接地址
}, },
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭) bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒，可手动关闭)
}, goodsType: '' //商城分类样式
template: { },
// 店铺装修模板 template: {
basic: {}, // 基本信息 // 店铺装修模板
home: { basic: {}, // 基本信息
// 首页模板 home: {
style: {}, // 首页模板
data: [], style: {},
}, data: [],
user: { },
// 个人中心模板 user: {
style: {}, // 个人中心模板
data: [], style: {},
}, data: [],
}, },
shareInfo: {}, // 全局分享信息 },
has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有 shareInfo: {}, // 全局分享信息
}), has_wechat_trade_managed: 0, // 小程序发货信息管理 0 没有 || 1 有
actions: { }),
// 获取Shopro应用配置和模板 actions: {
async init(templateId = null) { // 获取Shopro应用配置和模板
// 检查网络 async init(templateId = null) {
const networkStatus = await $platform.checkNetwork(); // 检查网络
if (!networkStatus) { const networkStatus = await $platform.checkNetwork();
$router.error('NetworkError'); 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 cdnurl: 'https://zysc.fjptzykj.com:3000', // 云存储域名
if (true) { filesystem: 'qcloud', // 云存储平台
this.info = { };
name: '芋道商城', this.platform = {
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png', share: {
version: '1.1.13', methods: ['poster', 'link'],
copyright: '全部开源，个人与企业可 100% 免费使用', linkAddress: 'http://127.0.0.1:3000', // TODO 芋艿：可以考虑改到 .env 那
copytime: 'Copyright© 2018-2024', 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', // 云存储平台 const sysStore = sys();
}; sysStore.setTheme();
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(); const userStore = user();
sysStore.setTheme(); if (userStore.isLogin) {
userStore.loginAfter();
// 模拟用户登录 }
const userStore = user(); return Promise.resolve(true);
if (userStore.isLogin) { } else {
userStore.loginAfter(); $router.error('InitError', res.msg || '加载失败');
} }
return Promise.resolve(true); },
} else { },
$router.error('InitError', res.msg || '加载失败'); persist: {
} enabled: true,
}, strategies: [{
}, key: 'app-store',
persist: { }, ],
enabled: true, },
strategies: [
{
key: 'app-store',
},
],
},
}); });
// todo: @owen 先做数据适配，后期重构 // todo: @owen 先做数据适配，后期重构
const adaptTemplate = async (appTemplate, templateId) => { const adaptTemplate = async (appTemplate, templateId) => {
const { data: diyTemplate } = templateId const {
? // 查询指定模板，一般是预览时使用 data: diyTemplate
await DiyApi.getDiyTemplate(templateId) } = templateId
: await DiyApi.getUsedDiyTemplate(); ? // 查询指定模板，一般是预览时使用
// 模板不存在 await DiyApi.getDiyTemplate(templateId) :
if (!diyTemplate) { await DiyApi.getUsedDiyTemplate();
$router.error('TemplateError'); // 模板不存在
return; if (!diyTemplate) {
} $router.error('TemplateError');
return;
}
const tabBar = diyTemplate?.property?.tabBar; const tabBar = diyTemplate?.property?.tabBar;
if (tabBar) { if (tabBar) {
appTemplate.basic.tabbar = tabBar; appTemplate.basic.tabbar = tabBar;
if (tabBar?.theme) { if (tabBar?.theme) {
appTemplate.basic.theme = tabBar?.theme; appTemplate.basic.theme = tabBar?.theme;
} }
} }
appTemplate.home = diyTemplate?.home; appTemplate.home = diyTemplate?.home;
appTemplate.user = diyTemplate?.user; 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, 'uni-numbox--disabled': inputValue <= min || disabled,
'groupon-btn': activity === 'groupon', 'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill', 'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
}" }"
@click="_calcValue('minus')" @click="_calcValue('minus')"
></text> ></text>
@ -33,6 +35,8 @@
'uni-numbox--disabled': inputValue >= max || disabled, 'uni-numbox--disabled': inputValue >= max || disabled,
'groupon-btn': activity === 'groupon', 'groupon-btn': activity === 'groupon',
'seckill-btn': activity === 'seckill', 'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue',
}" }"
@click="_calcValue('plus')" @click="_calcValue('plus')"
></text> ></text>
@ -59,6 +63,10 @@
name: 'UniNumberBox', name: 'UniNumberBox',
emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'], emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
props: { props: {
vsl:{
type: String,
default: '',
},
value: { value: {
type: [Number, String], type: [Number, String],
default: 1, default: 1,
@ -185,6 +193,12 @@
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bluev{
color:rgba(28,165,233) !important;
}
.lvv{
color:rgba(72,204,82) !important;
}
.uni-numbox .uni-numbox--disabled { .uni-numbox .uni-numbox--disabled {
color: #c0c0c0 !important; color: #c0c0c0 !important;
/* #ifdef H5 */ /* #ifdef H5 */

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

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