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

1、添加了主题颜色的粉色与橙色2、分类页面样式1的左右间距调整

Browse Source
This commit is contained in:
77 2024-11-12 18:14:48 +08:00
parent 46a7fa4e61
commit 1226a59c32
12 changed files with 593 additions and 395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -125,11 +125,19 @@
} }
.lvv{ .lvv{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ed254fe4a03c16933e608f8adeb3e700a24ec4620064746a516c10da395b9395.png') !important; background: url('https://zysc.fjptzykj.com:3000/shangcheng/ed254fe4a03c16933e608f8adeb3e700a24ec4620064746a516c10da395b9395.png') !important;
background-size: 100% 100%; background-size: 100% 100% !important;
} }
.bluev{ .bluev{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/8728b7f2de5a0d2d8a74ef0c17a275f82b265a3d8d11993ec7c424c3ad454f0b.png') !important; background: url('https://zysc.fjptzykj.com:3000/shangcheng/8728b7f2de5a0d2d8a74ef0c17a275f82b265a3d8d11993ec7c424c3ad454f0b.png') !important;
background-size: 100% 100%; background-size: 100% 100% !important;
}
.pinkv{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/b44a3035cd4f676504a7003607bfb9aa457ffe1335c12d1e26dcffb45e3bfec8.png') !important;
background-size: 100% 100% !important;
}
.orangev{
background: url('https://zysc.fjptzykj.com:3000/shangcheng/ebc89def2a0cf1db1ce6b5aec26407e24e49c85dcf81a1d1c759afe414da033f.png') !important;
background-size: 100% 100% !important;
} }
.list-content { .list-content {
position: relative; position: relative;

8
pages/goods/index.vue
View File

@ -330,6 +330,14 @@
background-color:rgba(253,157,17) !important; background-color:rgba(253,157,17) !important;
color:white !important; color:white !important;
} }
.pinkv{
background-color:black !important;
color:white !important;
}
.orangev{
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;

8
pages/goods/seckill.vue
View File

@ -306,6 +306,14 @@
background-color:rgba(253,157,17) !important; background-color:rgba(253,157,17) !important;
color:white !important; color:white !important;
} }
.pinkv{
background-color:#ff448f !important;
color:white !important;
}
.orangev{
background-color:#fe5c2d !important;
color:white !important;
}
.disabled-btn-box[disabled] { .disabled-btn-box[disabled] {
background-color: transparent; background-color: transparent;
} }

4
pages/index/components/second-one.vue
View File

@ -1,8 +1,8 @@
<!-- 分类展示：second-one 风格 --> <!-- 分类展示：second-one 风格 -->
<template> <template>
<view> <view style=" padding: 0 15px;">
<!-- 一级分类的名字 --> <!-- 一级分类的名字 -->
<view class="title-box ss-flex ss-col-center ss-row-center ss-p-b-30"> <view class="second-one ss-flex ss-col-center ss-row-center ss-p-b-30">
<view class="title-line-left" /> <view class="title-line-left" />
<view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view> <view class="title-text ss-p-x-20">{{ props.data[activeMenu].name }}</view>
<view class="title-line-right" /> <view class="title-line-right" />

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

@ -65,7 +65,7 @@
{ {
title: '待收货', title: '待收货',
value: '3', value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c2c90f1a7bee3d1d0e933b7ab7c5b186b4dbc0adf8748ceb4e69cabcbfab136f.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/cdd41605506b625510a90ce6d8194ad4b66be37ec5bdf6a56ddcf8d9206eff40.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'noget', type: 'noget',
count: 'deliveredCount', count: 'deliveredCount',
@ -73,7 +73,7 @@
{ {
title: '待评价', title: '待评价',
value: '4', value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/d392c395c9aa2fa0a6d250b4bad574909945f56cb480b7a05707c4f4e7e23b19.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c2c90f1a7bee3d1d0e933b7ab7c5b186b4dbc0adf8748ceb4e69cabcbfab136f.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'nocomment', type: 'nocomment',
count: 'uncommentedCount', count: 'uncommentedCount',
@ -81,7 +81,7 @@
{ {
title: '退款/售后', title: '退款/售后',
value: '0', value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/cdd41605506b625510a90ce6d8194ad4b66be37ec5bdf6a56ddcf8d9206eff40.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/d392c395c9aa2fa0a6d250b4bad574909945f56cb480b7a05707c4f4e7e23b19.png',
path: '/pages/order/aftersale/list', path: '/pages/order/aftersale/list',
type: 'aftersale', type: 'aftersale',
count: 'afterSaleCount', count: 'afterSaleCount',
@ -107,7 +107,7 @@
{ {
title: '待收货', title: '待收货',
value: '3', value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/71e01ef9cfe2c54695169248f142dd28d37b56b61fc36622b98b415b70e7b495.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6c69c4f4b1887889a0d0a5ca34a26582a8ba4f0600ae2db3ea6c76a67fcdab59.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'noget', type: 'noget',
count: 'deliveredCount', count: 'deliveredCount',
@ -115,7 +115,7 @@
{ {
title: '待评价', title: '待评价',
value: '4', value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/3bcf948bf269e61d0fe709836b2d36f646bfc3adbc968efc9404e41e7be6f04d.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/71e01ef9cfe2c54695169248f142dd28d37b56b61fc36622b98b415b70e7b495.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'nocomment', type: 'nocomment',
count: 'uncommentedCount', count: 'uncommentedCount',
@ -123,7 +123,93 @@
{ {
title: '退款/售后', title: '退款/售后',
value: '0', value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6c69c4f4b1887889a0d0a5ca34a26582a8ba4f0600ae2db3ea6c76a67fcdab59.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/3bcf948bf269e61d0fe709836b2d36f646bfc3adbc968efc9404e41e7be6f04d.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'pink') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f8efe1b47be8b8059469ff33fc401c1c89330409acf9ce7f979528cc3aad3441.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ca96eec5b194101a6aec6d4088c944339b4552e01b605a8fc99a15859579b31f.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/74d8e6ec206bc7f33f577babd3aee0991cd57d4f4fe386bc30af0f37d11133ca.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/ffa9d0bfb0e2efcc213b2ff69d8da9a27bce77a6120eb338195cb1fd089147e0.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/5d35ebc74ddb39d70b8c8a03d53aff9023f6f6cafec1a7e0a59f93b2379517c6.png',
path: '/pages/order/aftersale/list',
type: 'aftersale',
count: 'afterSaleCount',
}
]
} else if (state.themeType == 'orange') {
orderMap.value = [{
title: '待付款',
value: '1',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/0dd1d348022f3a4afc393e0ca1a903039feeb9931b18903790a12b3cb4d34c80.png',
path: '/pages/order/list',
type: 'unpaid',
count: 'unpaidCount',
},
{
title: '待发货',
value: '2',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f7916da551b40545227bca74dde309a24c6516ba292087a4aed717cac2e499e6.png',
path: '/pages/order/list',
type: 'take',
count: 'undeliveredCount',
},
{
title: '待收货',
value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/6168b9bfe12ffda1805880f4da75546af803565a26ae034b2604f0280f818595.png',
path: '/pages/order/list',
type: 'noget',
count: 'deliveredCount',
},
{
title: '待评价',
value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/837009349108b9f5fee0c490d94c070367dae5312298ddf47421f4706ae884f1.png',
path: '/pages/order/list',
type: 'nocomment',
count: 'uncommentedCount',
},
{
title: '退款/售后',
value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/c1ae501cf8081e1402d85de5de66a63733f79f87d5599eeba98504f3246a9ef7.png',
path: '/pages/order/aftersale/list', path: '/pages/order/aftersale/list',
type: 'aftersale', type: 'aftersale',
count: 'afterSaleCount', count: 'afterSaleCount',
@ -150,7 +236,7 @@
{ {
title: '待收货', title: '待收货',
value: '3', value: '3',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a6bc4ea6f95aaaec8b12ce20886d2dd7e1db7b547ba1c52f8b4bebb35f3e7cf3.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/686bf80ff876ed116df99552e5649e10ed5a9cddcc7b3cd5adc641ec022366cf.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'noget', type: 'noget',
count: 'deliveredCount', count: 'deliveredCount',
@ -158,7 +244,7 @@
{ {
title: '待评价', title: '待评价',
value: '4', value: '4',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4f14b9cc394e0791928257174fa1b62e05a535f5556f07218f058ffc6cefe80.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/a6bc4ea6f95aaaec8b12ce20886d2dd7e1db7b547ba1c52f8b4bebb35f3e7cf3.png',
path: '/pages/order/list', path: '/pages/order/list',
type: 'nocomment', type: 'nocomment',
count: 'uncommentedCount', count: 'uncommentedCount',
@ -166,7 +252,7 @@
{ {
title: '退款/售后', title: '退款/售后',
value: '0', value: '0',
icon: 'https://zysc.fjptzykj.com:3000/shangcheng/686bf80ff876ed116df99552e5649e10ed5a9cddcc7b3cd5adc641ec022366cf.png', icon: 'https://zysc.fjptzykj.com:3000/shangcheng/f4f14b9cc394e0791928257174fa1b62e05a535f5556f07218f058ffc6cefe80.png',
path: '/pages/order/aftersale/list', path: '/pages/order/aftersale/list',
type: 'aftersale', type: 'aftersale',
count: 'afterSaleCount', count: 'afterSaleCount',

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

@ -1,41 +1,34 @@
<template> <template>
<!-- 规格弹窗 --> <!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')"> <su-popup :show="show" round="10" @close="emits('close')">
<!-- SKU 信息 --> <!-- SKU 信息 -->
<view class="ss-modal-box bg-white ss-flex-col"> <view class="ss-modal-box bg-white ss-flex-col">
<view class="modal-header ss-flex ss-col-center"> <view class="modal-header ss-flex ss-col-center">
<view class="header-left ss-m-r-30"> <view class="header-left ss-m-r-30">
<image <image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
class="sku-image" </view>
:src="state.selectedSku.picUrl || goodsInfo.picUrl" <view class="header-right ss-flex-col ss-row-between ss-flex-1">
mode="aspectFill" <view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
/> <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
</view> <view class="ss-flex">
<view class="header-right ss-flex-col ss-row-between ss-flex-1"> <view class="price-text">
<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view> {{ fen2yuan(state.selectedSku.price || goodsInfo.price) }}
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> </view>
<view class="ss-flex"> </view>
<view class="price-text"> <view class="stock-text ss-m-l-20">
{{ fen2yuan(state.selectedSku.price || goodsInfo.price) }} {{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
</view> </view>
</view> </view>
<view class="stock-text ss-m-l-20"> </view>
{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }} </view>
</view>
</view>
</view>
</view>
<!-- 属性选择 --> <!-- 属性选择 -->
<view class="modal-content ss-flex-1"> <view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop> <scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id"> <view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
<view class="label-text ss-m-b-20">{{ property.name }}</view> <view class="label-text ss-m-b-20">{{ property.name }}</view>
<view class="ss-flex ss-col-center ss-flex-wrap"> <view class="ss-flex ss-col-center ss-flex-wrap">
<button <button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
class="ss-reset-button spec-btn"
v-for="value in property.values"
:class="[
{ {
'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id, 'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
}, },
@ -48,397 +41,414 @@
{ {
'blue' : state.themeType == 'blue' && state.currentPropertyArray[property.id] === value.id, 'blue' : state.themeType == 'blue' && state.currentPropertyArray[property.id] === value.id,
}, },
]" {
:key="value.id" 'pink' : state.themeType == 'pink' && state.currentPropertyArray[property.id] === value.id,
:disabled="value.disabled === true" },
@tap="onSelectSku(property.id, value.id)" {
> 'orange' : state.themeType == 'orange' && state.currentPropertyArray[property.id] === value.id,
{{ value.name }} },
</button> ]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
</view> {{ value.name }}
</view> </button>
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40"> </view>
<view class="label-text">购买数量</view> </view>
<su-number-box <view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
:min="1" <view class="label-text">购买数量</view>
:max="state.selectedSku.stock" <su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
:step="1" v-model="state.selectedSku.goods_num" @change="onNumberChange($event)"
v-model="state.selectedSku.goods_num" :vsl=state.themeType />
@change="onNumberChange($event)" </view>
:vsl= state.themeType </scroll-view>
/> </view>
</view>
</scroll-view>
</view>
<!-- 操作区 --> <!-- 操作区 -->
<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="state.themeType ? `${state.themeType}v` : ''" class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart" <button :class="state.themeType ? `${state.themeType}v` : ''"
>加入购物车</button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
> <button :class="state.themeType ? state.themeType : ''"
<button :class="state.themeType ? state.themeType : ''" class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button> class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view> </view>
</view> </view>
</view> </view>
</su-popup> </su-popup>
</template> </template>
<script setup> <script setup>
import { computed, reactive, watch } from 'vue'; import {
import sheep from '@/sheep'; computed,
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods'; reactive,
const app = computed(() => sheep.$store('app')); watch
const emits = defineEmits(['change', 'addCart', 'buy', 'close']); } from 'vue';
const props = defineProps({ import sheep from '@/sheep';
goodsInfo: { import {
type: Object, formatStock,
default() {}, convertProductPropertyList,
}, fen2yuan
show: { } from '@/sheep/hooks/useGoods';
type: Boolean, const app = computed(() => sheep.$store('app'));
default: false, const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
}, const props = defineProps({
}); goodsInfo: {
type: Object,
default () {},
},
show: {
type: Boolean,
default: false,
},
});
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 themeType: app.value.platform.themeType
}); });
const propertyList = convertProductPropertyList(props.goodsInfo.skus); const propertyList = convertProductPropertyList(props.goodsInfo.skus);
// SKU 列表 // SKU 列表
const skuList = computed(() => { const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus; let skuPrices = props.goodsInfo.skus;
for (let price of skuPrices) { for (let price of skuPrices) {
price.value_id_array = price.properties.map((item) => item.valueId); price.value_id_array = price.properties.map((item) => item.valueId);
} }
return skuPrices; return skuPrices;
}); });
watch( watch(
() => state.selectedSku, () => state.selectedSku,
(newVal) => { (newVal) => {
emits('change', newVal); emits('change', newVal);
}, }, {
{ immediate: true, // 立即执行
immediate: true, // 立即执行 deep: true, // 深度监听
deep: true, // 深度监听 },
}, );
);
// 输入框改变数量 // 输入框改变数量
function onNumberChange(e) { function onNumberChange(e) {
if (e === 0) return; if (e === 0) return;
if (state.selectedSku.goods_num === e) return; if (state.selectedSku.goods_num === e) return;
state.selectedSku.goods_num = e; state.selectedSku.goods_num = e;
} }
// 加入购物车 // 加入购物车
function onAddCart() { function onAddCart() {
if (state.selectedSku.id <= 0) { if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格'); sheep.$helper.toast('请选择规格');
return; return;
} }
if (state.selectedSku.stock <= 0) { if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足'); sheep.$helper.toast('库存不足');
return; return;
} }
emits('addCart', state.selectedSku); emits('addCart', state.selectedSku);
} }
// 立即购买 // 立即购买
function onBuy() { function onBuy() {
if (state.selectedSku.id <= 0) { if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格'); sheep.$helper.toast('请选择规格');
return; return;
} }
if (state.selectedSku.stock <= 0) { if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足'); sheep.$helper.toast('库存不足');
return; return;
} }
emits('buy', state.selectedSku); emits('buy', state.selectedSku);
} }
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用 // 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) { function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
let newSkus = []; // 所有可以选择的 sku 数组 let newSkus = []; // 所有可以选择的 sku 数组
if (isChecked) { if (isChecked) {
// 情况一：选中 property // 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU // 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) { for (let price of skuList.value) {
if (price.stock <= 0) { if (price.stock <= 0) {
continue; continue;
} }
if (price.value_id_array.indexOf(valueId) >= 0) { if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price); newSkus.push(price);
} }
} }
} else { } else {
// 情况二：取消选中 property // 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU // 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList(); newSkus = getCanUseSkuList();
} }
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id // 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = []; let noChooseValueIds = [];
for (let price of newSkus) { for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array); noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
} }
noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重 noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
if (isChecked) { if (isChecked) {
// 去除当前选中的 value 属性值 id // 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId); let index = noChooseValueIds.indexOf(valueId);
noChooseValueIds.splice(index, 1); noChooseValueIds.splice(index, 1);
} else { } else {
// 循环去除当前已选择的 value 属性值 id // 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => { state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== '') { if (currentPropertyId.toString() !== '') {
return; return;
} }
// currentPropertyId 为空是反选 填充的 // currentPropertyId 为空是反选 填充的
let index = noChooseValueIds.indexOf(currentPropertyId); let index = noChooseValueIds.indexOf(currentPropertyId);
if (index >= 0) { if (index >= 0) {
// currentPropertyId 存在于 noChooseValueIds // currentPropertyId 存在于 noChooseValueIds
noChooseValueIds.splice(index, 1); noChooseValueIds.splice(index, 1);
} }
}); });
} }
// 当前已选择的 property 数组 // 当前已选择的 property 数组
let choosePropertyIds = []; let choosePropertyIds = [];
if (!isChecked) { if (!isChecked) {
// 当前已选择的 property // 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => { state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== '') { if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的 // currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId); choosePropertyIds.push(currentValueId);
} }
}); });
} else { } else {
// 当前点击选择的 property // 当前点击选择的 property
choosePropertyIds = [propertyId]; choosePropertyIds = [propertyId];
} }
for (let propertyIndex in propertyList) { for (let propertyIndex in propertyList) {
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理 // 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) { if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
continue; continue;
} }
// 如果当前 property id 不存在于有库存的 SKU 中，则禁用 // 如果当前 property id 不存在于有库存的 SKU 中，则禁用
for (let valueIndex in propertyList[propertyIndex]['values']) { for (let valueIndex in propertyList[propertyIndex]['values']) {
propertyList[propertyIndex]['values'][valueIndex]['disabled'] = propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用 noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) <
} 0; // true 禁用 or false 不禁用
} }
} }
}
// 当前所选属性下，获取所有有库存的 SKU 们 // 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() { function getCanUseSkuList() {
let newSkus = []; let newSkus = [];
for (let sku of skuList.value) { for (let sku of skuList.value) {
if (sku.stock <= 0) { if (sku.stock <= 0) {
continue; continue;
} }
let isOk = true; let isOk = true;
state.currentPropertyArray.forEach((propertyId) => { state.currentPropertyArray.forEach((propertyId) => {
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除 // propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) { if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false; isOk = false;
} }
}); });
if (isOk) { if (isOk) {
newSkus.push(sku); newSkus.push(sku);
} }
} }
return newSkus; return newSkus;
} }
// 选择规格 // 选择规格
function onSelectSku(propertyId, valueId) { function onSelectSku(propertyId, valueId) {
// 清空已选择 // 清空已选择
let isChecked = true; // 选中 or 取消选中 let isChecked = true; // 选中 or 取消选中
if ( if (
state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] !== undefined &&
state.currentPropertyArray[propertyId] === valueId state.currentPropertyArray[propertyId] === valueId
) { ) {
// 点击已被选中的，删除并填充 '' // 点击已被选中的，删除并填充 ''
isChecked = false; isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, ''); state.currentPropertyArray.splice(propertyId, 1, '');
} else { } else {
// 选中 // 选中
state.currentPropertyArray[propertyId] = valueId; state.currentPropertyArray[propertyId] = valueId;
} }
// 选中的 property 大类 // 选中的 property 大类
let choosePropertyId = []; let choosePropertyId = [];
state.currentPropertyArray.forEach((currentPropertyId) => { state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== '') { if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的 // currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId); choosePropertyId.push(currentPropertyId);
} }
}); });
// 当前所选 property 下，所有可以选择的 SKU 们 // 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList(); let newSkuList = getCanUseSkuList();
// 判断所有 property 大类是否选择完成 // 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) { if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1; newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
state.selectedSku = newSkuList[0]; state.selectedSku = newSkuList[0];
} else { } else {
state.selectedSku = {}; state.selectedSku = {};
} }
// 改变 property 禁用状态 // 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId); changeDisabled(isChecked, propertyId, valueId);
} }
changeDisabled(false); changeDisabled(false);
// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格 // TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bluev{ .bluev {
background-color:rgba(33,202,254) !important; background-color: rgba(33, 202, 254) !important;
color:white !important; color: white !important;
} }
.lvv{
background-color:rgba(253,157,17) !important; .lvv {
color:white !important; background-color: rgba(253, 157, 17) !important;
color: white !important;
} }
// 购买
.buy-box {
padding: 10rpx 0;
.add-btn { .pinkv {
width: 356rpx; background-color: black !important;
height: 80rpx; color: white !important;
border-radius: 40rpx 0 0 40rpx; }
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.buy-btn { .orangev {
width: 356rpx; background-color: rgba(253, 157, 17) !important;
height: 80rpx; color: white !important;
border-radius: 0 40rpx 40rpx 0; }
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.score-btn { // 购买
width: 100%; .buy-box {
margin: 0 20rpx; padding: 10rpx 0;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.ss-modal-box { .add-btn {
border-radius: 30rpx 30rpx 0 0; width: 356rpx;
max-height: 1000rpx; height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.modal-header { .buy-btn {
position: relative; width: 356rpx;
padding: 80rpx 20rpx 40rpx; height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.sku-image { .score-btn {
width: 160rpx; width: 100%;
height: 160rpx; margin: 0 20rpx;
border-radius: 10rpx; height: 80rpx;
} border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.header-right { .ss-modal-box {
height: 160rpx; border-radius: 30rpx 30rpx 0 0;
} max-height: 1000rpx;
.close-icon { .modal-header {
position: absolute; position: relative;
top: 10rpx; padding: 80rpx 20rpx 40rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.goods-title { .sku-image {
font-size: 28rpx; width: 160rpx;
font-weight: 500; height: 160rpx;
line-height: 42rpx; border-radius: 10rpx;
} }
.score-img { .header-right {
width: 36rpx; height: 160rpx;
height: 36rpx; }
margin: 0 4rpx;
}
.score-text { .close-icon {
font-size: 30rpx; position: absolute;
font-weight: 500; top: 10rpx;
color: $red; right: 20rpx;
font-family: OPPOSANS; font-size: 46rpx;
} opacity: 0.2;
}
.price-text { .goods-title {
font-size: 30rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
color: $red; line-height: 42rpx;
font-family: OPPOSANS; }
&::before { .score-img {
content: '￥'; width: 36rpx;
font-size: 30rpx; height: 36rpx;
font-weight: 500; margin: 0 4rpx;
color: $red; }
}
}
.stock-text { .score-text {
font-size: 26rpx; font-size: 30rpx;
color: #999999; font-weight: 500;
} color: $red;
} font-family: OPPOSANS;
}
.modal-content { .price-text {
padding: 0 20rpx; font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
.modal-content-scroll { &::before {
max-height: 600rpx; content: '￥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.label-text { .stock-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; color: #999999;
} }
}
.buy-num-box { .modal-content {
height: 100rpx; padding: 0 20rpx;
}
.spec-btn { .modal-content-scroll {
height: 60rpx; max-height: 600rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn { .label-text {
font-weight: 400; font-size: 26rpx;
color: #c6c6c6; font-weight: 500;
background: #f8f8f8; }
}
} .buy-num-box {
} height: 100rpx;
} }
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
</style> </style>

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

@ -92,6 +92,60 @@
} }
]; ];
} else if (state.themeType == 'pink') {
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/0af8fd1f7dd91b22ce8480a4f75591d237f3a359a9d991e4eb333eda96f755fe.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/15548546af5bd5e13ff5c69c5acab5ab0d3d0333b63d583fd0470f3d48bf4e76.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/27ed7f014ba28a6c257c84c2ad6e8c73335d8e9df2076db4aedff1c5d03c66ba.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/059277d5bfe7b44ee74cece09fbe8515f5d021f20b2a9729590265cdf893f31a.png"
}
];
} else if (state.themeType == 'orange') {
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/aab810be4dea52817656ac3ae17ed418561bc4b12b4e33116cb68abaf362311f.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/c972bdc6808b37c9c88eac52bb8feb2bf787874a64b45a5ac3e41be60dee0994.png"
},
{
text: "购物车",
url: "/pages/index/cart",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/3-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/69febc6f7f2371180ae3e11c25bf46c046bdb1b80a14f0b5df3abbea060f47ac.png"
},
{
text: "我的",
url: "/pages/index/user",
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
activeIconUrl: "https://zysc.fjptzykj.com:3000/shangcheng/de40b82a64b9554092cc7c35621ce1a438bbf234e9b43567790a7b9bc1b8f618.png"
}
];
} else { } else {
Citrn.value = [{ Citrn.value = [{
text: "首页", text: "首页",

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

@ -1,9 +1,11 @@
<!-- 装修用户组件：用户卡片 --> <!-- 装修用户组件：用户卡片 -->
<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" v-if="state.themeType == ''"></image> <image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/e08f161b6bf1eddf5132fe4c4b087d75f7e77590a2f546147bd094593db83eb0.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/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> <image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/b350b54f38628fcb465805b81d624717dc83598604c4e58c674ae8558dc7386c.png" v-if="state.themeType == 'blue'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/806e2d991890cab22cbeeb6ac549d5d6179f04099203e3db0256ca25544bfb5a.png" v-if="state.themeType == 'pink'"></image>
<image class="seckill" src="https://zysc.fjptzykj.com:3000/shangcheng/ad23c1846977e232b50c3382d526b4d0d8bf2694b04f8090b2e873381cccab8b.png" v-if="state.themeType == 'orange'"></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">

6
sheep/scss/index.scss
View File

@ -34,3 +34,9 @@ page {
.blue{ .blue{
background:rgba(28,165,233) !important; background:rgba(28,165,233) !important;
} }
.pink{
background:#ff448f !important;
}
.orange{
background:#fe5c2d !important;
}

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

@ -13,6 +13,8 @@
'seckill-btn': activity === 'seckill', 'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv', 'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue', 'bluev' : vsl == 'blue',
'pinkv' : vsl == 'pink',
'orangev' : vsl == 'orange',
}" }"
@click="_calcValue('minus')" @click="_calcValue('minus')"
></text> ></text>
@ -37,6 +39,8 @@
'seckill-btn': activity === 'seckill', 'seckill-btn': activity === 'seckill',
'lvv' : vsl == 'lv', 'lvv' : vsl == 'lv',
'bluev' : vsl == 'blue', 'bluev' : vsl == 'blue',
'pinkv' : vsl == 'pink',
'orangev' : vsl == 'orange',
}" }"
@click="_calcValue('plus')" @click="_calcValue('plus')"
></text> ></text>
@ -199,6 +203,12 @@
.lvv{ .lvv{
color:rgba(72,204,82) !important; color:rgba(72,204,82) !important;
} }
.pinkv{
color:#ff448f !important;
}
.orangev{
color:#fe5c2d !important;
}
.uni-numbox .uni-numbox--disabled { .uni-numbox .uni-numbox--disabled {
color: #c0c0c0 !important; color: #c0c0c0 !important;
/* #ifdef H5 */ /* #ifdef H5 */

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

@ -196,6 +196,12 @@
.bluev{ .bluev{
color:rgba(28,165,233) !important; color:rgba(28,165,233) !important;
} }
.pinkv{
color: #ff448f !important;
}
.orangev{
color: #fe5c2d !important;
}
.tabbar-center-item { .tabbar-center-item {
height: 40px; height: 40px;
width: 40px; width: 40px;

BIN
static/images/seckilbg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 82 KiB