251 lines
7.9 KiB
Vue
251 lines
7.9 KiB
Vue
<template>
|
|
<up-popup :show="visible" :round="20" mode="bottom" @close="close">
|
|
<view class="shop_sku">
|
|
<scroll-view scroll-y style="max-height: 60vh; width: 100%">
|
|
<view class="positionabsolute">
|
|
<up-icon
|
|
name="close-circle"
|
|
@click="close"
|
|
color="#000"
|
|
size="25"
|
|
></up-icon>
|
|
</view>
|
|
<up-swiper :list="specifications.item.images" height="250"></up-swiper>
|
|
<view class="shop_sku_name">{{ specifications.item.name }}</view>
|
|
<view class="shop_sku_description">
|
|
{{
|
|
specifications.item.shortTitle ? specifications.item.shortTitle : ""
|
|
}}
|
|
</view>
|
|
<view v-if="specifications.item.type != 'package'">
|
|
<view
|
|
class="shop_sku_box"
|
|
v-for="(specOptions, specType) in specifications.item
|
|
.selectSpecInfo"
|
|
:key="specType"
|
|
>
|
|
<view class="shop_sku_box_name">
|
|
{{ specType }}
|
|
</view>
|
|
<view class="flex-start">
|
|
<view
|
|
class="shop_sku_box_item"
|
|
v-for="option in specOptions"
|
|
:key="option"
|
|
@click="selectSpec(specType, option)"
|
|
:class="{
|
|
shop_sku_box_item_selected: isSelected(option),
|
|
}"
|
|
>
|
|
{{ option }}
|
|
<view
|
|
class="shop_sku_box_item_tip"
|
|
v-if="
|
|
specifications.item.result &&
|
|
specifications.item.result.isSoldStock == 1 &&
|
|
selectedSpecs[specType] === option
|
|
"
|
|
>
|
|
<view>售罄</view>
|
|
</view>
|
|
<view
|
|
class="shop_sku_box_item_tip"
|
|
v-if="
|
|
specifications.item.result == 'kong' &&
|
|
canSubmit == false &&
|
|
selectedSpecs[specType] === option
|
|
"
|
|
>
|
|
<view>已下架</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 套餐 -->
|
|
<view v-else>
|
|
<view class="shop_sku_box">
|
|
<view
|
|
v-for="(setmenu, setmenuindex) in specifications.item.groupSnap"
|
|
:key="setmenuindex"
|
|
>
|
|
<view class="shop_sku_box_name"
|
|
>{{ setmenu.title }} {{ setmenu.count }} 选{{
|
|
setmenu.number
|
|
}}</view
|
|
>
|
|
<view class="flex-start">
|
|
<view
|
|
class="shop_sku_box_item"
|
|
v-for="(option, goodsid) in setmenu.goods"
|
|
:key="goodsid"
|
|
@click="goodsidClick(setmenuindex, option, goodsid)"
|
|
:class="{
|
|
shop_sku_box_item_selected: isOptionSelected(
|
|
setmenuindex,
|
|
option
|
|
),
|
|
}"
|
|
:disabled="
|
|
isMaxSelected(setmenuindex) &&
|
|
!isOptionSelected(setmenuindex, option)
|
|
"
|
|
>
|
|
{{ option.proName }}
|
|
<text v-if="option.unitName">/{{ option.unitName }}</text>
|
|
<view
|
|
class="shop_sku_box_item_tip"
|
|
v-if="specifications.item.isSoldStock == 1"
|
|
>
|
|
<view>售罄</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="shop_bottom">
|
|
<view class="flex-between">
|
|
<view
|
|
class="price"
|
|
v-if="
|
|
specifications.item.type != 'package' &&
|
|
specifications.item.result
|
|
"
|
|
>
|
|
<text class="i">￥</text>
|
|
<view class="num">
|
|
<GoodsPrice
|
|
:limitDiscount="limitTimeDiscountRes"
|
|
:cart="specifications.item.result"
|
|
:shopUserInfo="shopUserInfo"
|
|
:shopInfo="shopInfo"
|
|
></GoodsPrice>
|
|
</view>
|
|
|
|
<text class="num" v-if="false">
|
|
{{
|
|
shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1
|
|
? specifications.item.result.memberPrice ||
|
|
specifications.item.result.salePrice
|
|
: specifications.item.result.salePrice
|
|
}}
|
|
</text>
|
|
<text class="i" v-if="specifications.item.unitName"
|
|
>/{{ specifications.item.unitName }}</text
|
|
>
|
|
<text v-if="specifications.item.result.suitNum > 1"
|
|
>「{{ specifications.item.result.suitNum
|
|
}}{{ specifications.item.result.unitName }}起点」</text
|
|
>
|
|
</view>
|
|
<view class="price" v-else>
|
|
<text class="i">￥</text>
|
|
<view class="num">
|
|
<GoodsPrice
|
|
:limitDiscount="limitTimeDiscountRes"
|
|
:cart="specifications.item"
|
|
:shopUserInfo="shopUserInfo"
|
|
:shopInfo="shopInfo"
|
|
></GoodsPrice>
|
|
</view>
|
|
<text class="num" v-if="false">
|
|
{{
|
|
shopInfo.isVip == 1 && shopInfo.isMemberPrice == 1
|
|
? specifications.item.memberPrice ||
|
|
specifications.item.salePrice
|
|
: specifications.item.salePrice
|
|
}}
|
|
</text>
|
|
<text class="i" v-if="specifications.item.unitName"
|
|
>/{{ specifications.item.unitName }}</text
|
|
>
|
|
<text v-if="specifications.item.suitNum > 1"
|
|
>「{{ specifications.item.suitNum
|
|
}}{{ specifications.item.unitName }}起点」</text
|
|
>
|
|
</view>
|
|
|
|
<view
|
|
class="operation-wrap"
|
|
v-if="specifications.item.type != 'package'"
|
|
>
|
|
<view class="btn">
|
|
<up-icon
|
|
name="minus-circle-fill"
|
|
color="#E9AB7A"
|
|
size="25"
|
|
v-if="shopCartNumber > 0"
|
|
></up-icon>
|
|
<view class="btnClick" @click="shopCart('-')"></view>
|
|
</view>
|
|
<text class="num">{{ shopCartNumber }}</text>
|
|
<view class="btn">
|
|
<up-icon
|
|
name="plus-circle-fill"
|
|
color="#E9AB7A"
|
|
size="25"
|
|
></up-icon>
|
|
<view class="btnClick" @click="shopCart('+')"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="shop_skuselect flex-start" v-if="selectedSpecsStr">
|
|
<view class="shop_skuselectname">{{ selectedSpecsStr }}</view>
|
|
</view>
|
|
<view
|
|
v-if="specifications.item.type == 'package'"
|
|
class="addShopping"
|
|
:class="shopCartNumber > 0 && allConditionsSatisfied ? 'active' : ''"
|
|
@click="submitSelection()"
|
|
>
|
|
{{ skuBtnText }}
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="addShopping"
|
|
:class="shopCartNumber > 0 && canSubmit ? 'active' : ''"
|
|
@click="submitSelection()"
|
|
>
|
|
{{ skuBtnText }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const props = defineProps({
|
|
data: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
specifications: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
item: {},
|
|
}
|
|
},
|
|
},
|
|
});
|
|
const visible = defineModel({
|
|
default: false,
|
|
});
|
|
function close() {
|
|
visible.value = false;
|
|
}
|
|
const selectedSpecs = ref({});
|
|
function isSelected(option) {
|
|
return selectedSpecs.value[specType] === option;
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.box {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
</style> |