【功能修复】商城:选择拼团 SKU 时,存在遮罩的问题 https://gitee.com/yudaocode/yudao-mall-uniapp/issues/IAMK4A

pull/95/MERGE
YunaiV 2024-09-07 14:22:44 +08:00
parent 9b6d1a9a97
commit 80b2bb6f5e
2 changed files with 49 additions and 14 deletions

View File

@ -90,7 +90,6 @@
<s-select-groupon-sku <s-select-groupon-sku
:show="state.showSelectSku" :show="state.showSelectSku"
:goodsInfo="state.goodsInfo" :goodsInfo="state.goodsInfo"
:selectedSku="state.selectedSku"
:grouponAction="state.grouponAction" :grouponAction="state.grouponAction"
:grouponNum="state.grouponNum" :grouponNum="state.grouponNum"
@buy="onBuy" @buy="onBuy"

View File

@ -5,7 +5,11 @@
<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 class="sku-image" :src="sheep.$url.cdn(state.selectedSku.picUrl || goodsInfo.picUrl)" mode="aspectFill" /> <image
class="sku-image"
:src="sheep.$url.cdn(state.selectedSku.picUrl || goodsInfo.picUrl)"
mode="aspectFill"
/>
</view> </view>
<view class="header-right ss-flex-col ss-row-between ss-flex-1"> <view class="header-right ss-flex-col ss-row-between ss-flex-1">
<view class="goods-title ss-line-2"> <view class="goods-title ss-line-2">
@ -22,7 +26,13 @@
</view> </view>
</view> </view>
<view class="header-right-bottom ss-flex ss-col-center ss-row-between"> <view class="header-right-bottom ss-flex ss-col-center ss-row-between">
<view class="price-text"> {{ fen2yuan(state.selectedSku.price || goodsInfo.price || state.selectedSku.marketPrice) }}</view> <view class="price-text">
{{
fen2yuan(
state.selectedSku.price || goodsInfo.price || state.selectedSku.marketPrice,
)
}}</view
>
<view class="stock-text ss-m-l-20"> <view class="stock-text ss-m-l-20">
库存{{ state.selectedSku.stock || goodsInfo.stock }} 库存{{ state.selectedSku.stock || goodsInfo.stock }}
@ -35,22 +45,35 @@
<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 class="ss-reset-button spec-btn" v-for="value in property.values" :class="[ <button
class="ss-reset-button spec-btn"
v-for="value in property.values"
:class="[
{ {
'checked-btn': state.currentPropertyArray[property.id] === value.id, 'checked-btn': state.currentPropertyArray[property.id] === value.id,
}, },
{ {
'disabled-btn': value.disabled === true, 'disabled-btn': value.disabled === true,
}, },
]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)"> ]"
:key="value.id"
:disabled="value.disabled === true"
@tap="onSelectSku(property.id, value.id)"
>
{{ value.name }} {{ value.name }}
</button> </button>
</view> </view>
</view> </view>
<view class="buy-num-box ss-flex ss-col-center ss-row-between"> <view class="buy-num-box ss-flex ss-col-center ss-row-between">
<view class="label-text">购买数量</view> <view class="label-text">购买数量</view>
<su-number-box :min="1" :max="state.selectedSku.stock" :step="1" <su-number-box
v-model="state.selectedSku.count" @change="onNumberChange($event)" activity="groupon" /> :min="1"
:max="state.selectedSku.stock"
:step="1"
v-model="state.selectedSku.count"
@change="onNumberChange($event)"
activity="groupon"
/>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
@ -63,7 +86,16 @@
<view class="btn-title">{{ grouponNum + '人团' }}</view> <view class="btn-title">{{ grouponNum + '人团' }}</view>
</button> </button>
<button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy"> <button class="ss-reset-button btn-tox ss-flex-col" @tap="onBuy">
<view class="btn-price">{{ fen2yuan(state.selectedSku.price * state.selectedSku.count || goodsInfo.price * state.selectedSku.count || state.selectedSku.marketPrice * state.selectedSku.count || goodsInfo.price) }}</view> <view class="btn-price">
{{
fen2yuan(
state.selectedSku.price * state.selectedSku.count ||
goodsInfo.price * state.selectedSku.count ||
state.selectedSku.marketPrice * state.selectedSku.count ||
goodsInfo.price,
)
}}
</view>
<view v-if="grouponAction === 'create'"></view> <view v-if="grouponAction === 'create'"></view>
<view v-else-if="grouponAction === 'join'">参与拼团</view> <view v-else-if="grouponAction === 'join'">参与拼团</view>
</button> </button>
@ -77,7 +109,7 @@
<script setup> <script setup>
import { computed, reactive, watch } from 'vue'; import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import {convertProductPropertyList, fen2yuan} from '@/sheep/hooks/useGoods'; import { convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-btn-long.png'); const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-btn-long.png');
const emits = defineEmits(['change', 'addCart', 'buy', 'close', 'ladder']); const emits = defineEmits(['change', 'addCart', 'buy', 'close', 'ladder']);
@ -88,7 +120,7 @@
}, },
goodsInfo: { goodsInfo: {
type: Object, type: Object,
default () {}, default() {},
}, },
grouponAction: { grouponAction: {
type: String, type: String,
@ -111,7 +143,7 @@
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;
}); });
@ -120,7 +152,8 @@
() => state.selectedSku, () => state.selectedSku,
(newVal) => { (newVal) => {
emits('change', newVal); emits('change', newVal);
}, { },
{
immediate: true, // immediate: true, //
deep: true, // deep: true, //
}, },
@ -215,7 +248,7 @@
// 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
} }
} }
} }
@ -245,7 +278,10 @@
function onSelectSku(propertyId, valueId) { function onSelectSku(propertyId, valueId) {
// //
let isChecked = true; // or let isChecked = true; // or
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) { if (
state.currentPropertyArray[propertyId] !== undefined &&
state.currentPropertyArray[propertyId] === valueId
) {
// '' // ''
isChecked = false; isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, ''); state.currentPropertyArray.splice(propertyId, 1, '');