394 lines
7.4 KiB
Vue
394 lines
7.4 KiB
Vue
<template>
|
||
<cl-popup
|
||
v-model="spec.visible"
|
||
direction="bottom"
|
||
:border-radius="[32, 32, 0, 0]"
|
||
:padding="0"
|
||
show-close-btn
|
||
@open="onOpen"
|
||
>
|
||
<view class="goods-spec">
|
||
<view class="goods">
|
||
<goods-cover :item="spec.goods" :spec="spec.info" :link="false" :size="160" />
|
||
|
||
<view class="det">
|
||
<cl-row :margin="[0, 0, 16, 0]">
|
||
<cl-text
|
||
:value="spec.info?.price || spec.goods?.price"
|
||
type="price"
|
||
color="error"
|
||
:size="40"
|
||
bold
|
||
/>
|
||
<cl-text
|
||
color="info"
|
||
:size="24"
|
||
:margin="[0, 0, 0, 30]"
|
||
:value="`库存：${stock}`"
|
||
v-if="spec.info"
|
||
/>
|
||
</cl-row>
|
||
|
||
<cl-text
|
||
:ellipsis="2"
|
||
:line-height="1.2"
|
||
:color="spec.info ? 'primary' : 'info'"
|
||
:value="spec.text"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<cl-row type="flex" justify="space-between" :margin="[0, 24, 16, 24]">
|
||
<cl-text bold>规格分类（{{ list.length + 1 }}）</cl-text>
|
||
|
||
<cl-icon
|
||
:size="40"
|
||
:class-name="`${isGrid ? 'shop-icon-list' : 'shop-icon-list2'}`"
|
||
@tap="isGrid = !isGrid"
|
||
/>
|
||
</cl-row>
|
||
|
||
<!-- 规格列表 -->
|
||
<cl-loading-mask :loading="loading">
|
||
<scroll-view scroll-y class="scroller">
|
||
<view
|
||
class="list"
|
||
:class="{
|
||
'is-grid': isGrid,
|
||
}"
|
||
>
|
||
<cl-row :gutter="20">
|
||
<cl-col
|
||
v-for="(item, label) in list"
|
||
:key="label"
|
||
:span="isGrid ? 8 : 24"
|
||
>
|
||
<view
|
||
class="item"
|
||
:class="{
|
||
'is-active': spec.info?.id == item.id,
|
||
'is-disabled': !item.stock,
|
||
}"
|
||
@tap="select(item)"
|
||
>
|
||
<view class="cover">
|
||
<goods-cover
|
||
:item="spec.goods"
|
||
:spec="item"
|
||
:link="false"
|
||
:radius="isGrid ? 24 : 12"
|
||
:zoom="isGrid"
|
||
/>
|
||
</view>
|
||
|
||
<view class="name">
|
||
<text>{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</cl-col>
|
||
</cl-row>
|
||
|
||
<cl-list-item
|
||
label="数量"
|
||
:arrow-icon="false"
|
||
:margin="[0, -10, 0, -10]"
|
||
v-if="spec.info"
|
||
>
|
||
<cl-input-number v-model="spec.num" :min="1" :max="stock" />
|
||
</cl-list-item>
|
||
</view>
|
||
</scroll-view>
|
||
</cl-loading-mask>
|
||
|
||
<!-- 底部按钮 -->
|
||
<cl-footer :fixed="false" :vt="[spec.action]">
|
||
<!-- 加入购物车 -->
|
||
<template v-if="spec.action == 'spCart'">
|
||
<cl-button custom type="primary" :disabled="disabled" @tap="toAdd"
|
||
>确定</cl-button
|
||
>
|
||
</template>
|
||
|
||
<!-- 选规格的时候 -->
|
||
<template v-else-if="spec.action == 'select'">
|
||
<cl-button custom :disabled="disabled" @tap="toAdd">加入购物车</cl-button>
|
||
<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
|
||
>立即购买</cl-button
|
||
>
|
||
</template>
|
||
|
||
<!-- 立即购买 -->
|
||
<template v-else-if="spec.action == 'buy'">
|
||
<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
|
||
>立即购买</cl-button
|
||
>
|
||
</template>
|
||
|
||
<!-- 编辑 -->
|
||
<template v-else-if="spec.action == 'edit'">
|
||
<cl-button custom type="primary" :disabled="disabled" @tap="toEdit"
|
||
>确定</cl-button
|
||
>
|
||
</template>
|
||
</cl-footer>
|
||
</view>
|
||
</cl-popup>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { isEmpty } from "lodash-es";
|
||
import { computed, nextTick, onUnmounted, ref } from "vue";
|
||
import { useCool } from "/@/cool";
|
||
import { useSpec } from "/@/hooks";
|
||
import { useShoppingCart } from "/@/hooks";
|
||
import { useUi } from "/$/cool-ui";
|
||
import GoodsCover from "/@/components/goods/cover.vue";
|
||
|
||
const { service, router } = useCool();
|
||
const spec = useSpec();
|
||
const spCart = useShoppingCart();
|
||
const ui = useUi();
|
||
|
||
// 列表是否格子布局
|
||
const isGrid = ref(true);
|
||
|
||
// 加载规格中
|
||
const loading = ref(false);
|
||
|
||
// 规格列表
|
||
const list = ref<Eps.GoodsSpecEntity[]>([]);
|
||
|
||
// 库存数，减去购物车数量
|
||
const stock = computed(() => {
|
||
const a = spec.info?.stock || 0;
|
||
const b = spCart.list.find((e) => e.spec?.id == spec.info?.id)?.count || 0;
|
||
|
||
if (spec.action == "edit") {
|
||
return a;
|
||
}
|
||
|
||
let d = a - b;
|
||
|
||
if (d < 0) {
|
||
d = 0;
|
||
}
|
||
|
||
return d;
|
||
});
|
||
|
||
// 是否能下单
|
||
const disabled = computed(() => {
|
||
return !stock.value;
|
||
});
|
||
|
||
// 获取规格列表
|
||
async function refresh(params?: any) {
|
||
loading.value = true;
|
||
|
||
await service.goods.spec
|
||
.list({
|
||
goodsId: spec.goods?.id,
|
||
order: "sortNum",
|
||
sort: "desc",
|
||
...params,
|
||
})
|
||
.then((res) => {
|
||
list.value = res.map((e) => {
|
||
let arr = e.images || [];
|
||
|
||
if (isEmpty(arr)) {
|
||
arr = [spec.goods?.mainPic];
|
||
}
|
||
|
||
return {
|
||
...e,
|
||
cover: arr[0],
|
||
};
|
||
});
|
||
|
||
// 设置规格
|
||
spec.set(list.value.find((e) => e.id == spec.specId));
|
||
});
|
||
|
||
loading.value = false;
|
||
}
|
||
|
||
// 监听打开
|
||
function onOpen() {
|
||
refresh();
|
||
}
|
||
|
||
// 选择规格
|
||
function select(item: Eps.GoodsSpecEntity) {
|
||
if (spec.info?.id == item.id) {
|
||
spec.set();
|
||
} else {
|
||
spec.set(item);
|
||
}
|
||
|
||
nextTick(() => {
|
||
spec.setNum(1);
|
||
});
|
||
}
|
||
|
||
// 购买
|
||
function toBuy() {
|
||
spec.close();
|
||
|
||
router.push({
|
||
path: "/pages/order/submit",
|
||
params: {
|
||
buyList: [
|
||
{
|
||
spec: spec.info!,
|
||
goodsInfo: spec.goods!,
|
||
count: spec.num,
|
||
},
|
||
],
|
||
},
|
||
});
|
||
}
|
||
|
||
// 编辑
|
||
function toEdit() {
|
||
spec.emit("edit");
|
||
spec.close();
|
||
}
|
||
|
||
// 加入购物车
|
||
function toAdd() {
|
||
spCart.add({
|
||
count: spec.num,
|
||
spec: spec.info!,
|
||
goodsInfo: spec.goods!,
|
||
});
|
||
|
||
ui.showToast("添加购物车成功");
|
||
spec.close();
|
||
}
|
||
|
||
onUnmounted(() => {
|
||
spec.clear();
|
||
spec.close();
|
||
});
|
||
|
||
defineExpose({
|
||
refresh,
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.goods-spec {
|
||
.goods {
|
||
display: flex;
|
||
padding: 24rpx;
|
||
|
||
.det {
|
||
flex: 1;
|
||
padding: 24rpx 24rpx 0 24rpx;
|
||
}
|
||
}
|
||
|
||
.scroller {
|
||
height: 50vh;
|
||
|
||
.list {
|
||
padding: 0 24rpx;
|
||
|
||
.item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #eeeeee;
|
||
padding: 12rpx;
|
||
|
||
.cover {
|
||
height: 80rpx;
|
||
width: 80rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
flex: 1;
|
||
|
||
text {
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
}
|
||
|
||
&.is-active {
|
||
border-color: $cl-color-primary;
|
||
}
|
||
|
||
&.is-disabled {
|
||
.cover {
|
||
&::after {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100rpx;
|
||
width: 100rpx;
|
||
content: "无货";
|
||
color: #fff;
|
||
background-color: rgba(50, 50, 50, 0.6);
|
||
border-radius: 100%;
|
||
position: absolute;
|
||
left: calc(50% - 50rpx);
|
||
top: calc(50% - 50rpx);
|
||
font-size: 26rpx;
|
||
border: 1rpx solid currentColor;
|
||
box-sizing: border-box;
|
||
transform: scale(0.6);
|
||
}
|
||
}
|
||
|
||
.name {
|
||
color: $cl-color-disabled;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.is-grid {
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
border-radius: 28rpx;
|
||
padding: 0;
|
||
margin-bottom: 24rpx;
|
||
|
||
.cover {
|
||
height: 216rpx;
|
||
width: 100%;
|
||
|
||
&::after {
|
||
transform: scale(1);
|
||
}
|
||
}
|
||
|
||
.name {
|
||
flex: none;
|
||
height: 70rpx;
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|