标签: 商品SKU

![购物车](./cart-list.png =x350)

购物车组件

::::tabs
@tab html

引用cart-list组件，并接收商品sku对话框中的添加购物车事件。

<template>
  <product-sku-dialog
    v-if="chosenProduct"
    :key="chosenProduct.id"
    v-model:visible="dialogVisible"
    :product="chosenProduct"
    @add-sku="handleAddSku"
  ></product-sku-dialog>
  <!-- 忽略... -->
  <cart-list></cart-list>
  <register-popup></register-popup>
</template>

起凡2024/1/24小于 1 分钟

商品SKU对话框

效果

![商品SKU对话框](../../product/product-sku-dialog.png =x350)

源码解析

对话框

:::tabs
@tab html

<template>
  <div>
    <div class="product-dialog">
      <!-- 这步不能使用 v-model:visible="visible" 因为visible不能从子组件更新 -->
      <!-- 通过继续把事件emit出去实现双向绑定。emit('update:visible', visible) -->
      <nut-popup
        :visible="visible"
        round
        pop-class="product-popup"
        @update:visible="(value) => emit('update:visible', value)"
      ></nut-popup
      >
    </div>
  </div>
</template>

起凡2024/1/24大约 5 分钟

小程序商品sku选择

![小程序商品sku选择对话框](./product-sku-dialog.png =x350)

后端加载商品详情

::::tabs
@tab Product

关联商品SKU

@Entity
@GenEntity
public interface Product extends BaseEntity {
    // 忽略...
  @OneToMany(mappedBy = "product")
  List<ProductSku> skuList();
}

起凡2024/1/23大约 2 分钟

商品SKU

![sku创建](image-1.png =x350)

建表

-- auto-generated definition
create table product_sku
(
    id           varchar(36)    not null
        primary key,
    created_time datetime(6)    not null,
    edited_time  datetime(6)    not null,
    creator_id   varchar(36)    not null,
    editor_id    varchar(36)    not null,
    `values`     varchar(255)   not null,
    name         varchar(255)   not null,
    product_id   varchar(255)   not null,
    cover        varchar(255)   null,
    price        decimal(38, 2) null,
    stock        int            null,
    description  varchar(255)   null
);

起凡2024/1/20大约 5 分钟