商城多规格示例
为系统添加商城多规格组件示例

    介绍

    基于ElementPlus封装的商城多规格组件，提供商品规格生成入库示例

    主要特性

    • 适应表单样式，与现有设计风格相容。
    • 简单易用，只需简单引入即可立即使用。
    • 规格模板一键填充属性，方便快捷。
    • 可自定义规格SKU字段，满足个性化需求。
    • 批量设置规格SKU功能，提高操作效率。

    使用教程

    vue 复制代码 
    // 引入规格组件 import GoodsSpec from '/@/components/joyComponents/goodsSpec.vue' <GoodsSpec v-model="baTable.form.items!.spec_data" :spec-template-config="{ enable: true, data: specTemplateData, }" sku-field="{ price: { label: t('component.spec.goods.price'), attr: { min: 0.01, precision: 2, }, }, sku_code: { label: t('component.spec.goods.sku_code'), attr: { type: 'text', }, }, }" />

    属性介绍

    model-value

    规格信息字段

    示例：

    json 复制代码 
    { // 规格属性列表 specList: [ {name: '颜色', value: ['黑色']}, {name: '内存', value: ['8+128G','8+256G']} ], // sku列表 skuList: [ {id: 1, goods_id: 9, spec: "颜色:黑色;内存:8+128G",…}, {id: 2, goods_id: 9, spec: "颜色:黑色;内存:8+256G",…} ] }

    sku-field

    sku 字段，默认生成 spec 和 specImg 字段，剩下字段可按格式自定义

    示例：

    vue 复制代码 
    sku-field="{ sku_code: { label: t('component.spec.goods.sku_code'), // type为input-number时使用el-input-number输入框的属性,否则使用el-input输入框的属性 attr: { type: 'text', ... }, }, price: { label: t('component.spec.goods.price'), attr: { min: 0.01, precision: 2, ... }, }, }"

    spec-template-config

    规格模板配置

    示例：

    vue 复制代码 
    :spec-template-config="{ // 是否启用,false不展示模板选择框 enable: true, data: [ {id:1,name:'内存',value:['128G','256G']} ], }"

    文件说明

    组件源码位置

    web/src/components/joyComponents

    示例文件位置

    后端：app/admin/controller/examples/joyspec

    前端：web/src/views/backend/examples/joyspec

    更新日志

    • 2024-07-30 19:27:17

      v1.0.1

      优化和兼容系统新版本
      • 优化SKU列表图片上传框样式
      • 优化批量设置SKU样式
      • 兼容v2.1.0版本前端依赖升级
      • 此版本仅提供给>=v2.1.0版本的BuildAdmin
    • 2024-04-14 23:40:57

      v1.0.0

      首次发布

      无详细更新日志

    Age_Chen
    Age_Chen
    这家伙很懒，什么也没写~
    模块授权
    正版授权，允许商业使用
    免费更新至一年内发布的所有版本
    一年内发布的所有版本永久免费下载
    不加密源代码，私有部署，二开方便
    可复制产品，不支持七天无理由退款
    禁止转售、分享等任何形式的再分发
    仅 BuildAdmin 后台管理系统可以使用
    模块信息
    模块价格
    ￥59.90
    访问次数
    5569
    模块标识
    joyspec
    下载次数
    58
    模块分类
    实用案例
    上次更新
    2024-07-30 19:27:17
    开发者主页
    -
    购买送积分
    -
    TypeScriptCRUD+
    推荐模块
    JoyShop商城