商城后台添加多规格属性

数据库设计：

1、商品表

2、商品和属性的关系表

3、属性表

4、属性值表

5、商品和属性值的关系表

6、SKU表

大概关系如下：

根据实际需要，增删表结构

我们后台管理系统中需要实现的效果图如下：

后台代码重点逻辑

如何将属性和属性值，如图排列显示，这里我们用到递归排序的方法

    private $index=0;//属性值组合public function combineAttributes($attr){$m_len = count($attr);if($m_len >= 2){$result = $this->recurse($attr[$this->index],$attr[++$this->index],$m_len,$attr);}else{$result = $attr[0];}foreach ($result as $k=>$v){$result[$k] = explode(",",$v);}return $result;}//属性名 递归拼接属性public function recurse($array1,$array2,$m_len,$attr){$res = array();foreach ($array1 as $a1){foreach ($array2 as $a2){array_push($res,$a1.','.$a2);}}$this->index++;if($this->index <= $m_len-1){return $this->recurse($res,$attr[$this->index],$m_len,$attr);}else{return $res;}}

将拼接好属性值组合存入sku表中，这样每种搭配对应的价格，库存都是不一样的

前端实现随机点属性值组合，传给后端获取对应的库存和价格，代码思路如下：

 //type=1是单规格，type!=1是多规格<view class="spec" wx:if="{{product.arrGoodsSku.type=='1'}}"><view class="name">产品规格</view><view class="list"><view class="type {{selectId===item.id?'type-active':''}}" wx:for="{{product.arrGoodsSku.data}}" wx:key="index" bindtap="selectType" data-id="{{item.id}}">{{item.color}}</view></view></view><view class="spec" wx:if="{{product.arrGoodsSku.type!='1'}}" wx:for="{{product.arrGoodsSku.data}}" wx:key="index" wx:for-item="dataitem" wx:for-index="dataindex"><view class="name">{{dataitem.name}}</view><view class="list"><view class="type {{selectId[dataindex]===item.id?'type-active':''}}" wx:for="{{dataitem.attr_val}}" wx:key="index" bindtap="selectType" data-id="{{item.id}}" data-dataindex="{{dataindex}}">{{item.name}}</view></view></view>

  async selectType(e) {      let id = $attr(e, 'id');      //获取到当前点击的父级的下标let dataindex = parseInt($attr(e, 'dataindex'));//获取到的id存入数组this.data.skuarr[dataindex] = id//把数组转换成字符串let stringsku = this.data.skuarr.join(',');}

参考思路：https://www.lovchun.com/posts/83089735-9b7e-4d49-bc98-43cd243e226e.html

商城后台添加多规格属性相关推荐

自定义商品分类，选择分类之后，添加商品附属性；仿淘宝后台添加商品附属性的价格和数量
效果图(图片较大,加载较慢) 页面部分: <div class="layui-form-item" id="add_attribute"><l ...
Java实现校园商城后台管理系统
1.校园商城后台管理系统背景本系统模拟商城系统开发的校园商城后台管理系统. 2.校园商城后台管理系统技术架构主要技术 Spring.SpringMVC.Mybatis JSP.JSTL.jQuer ...
html添加商品规格,商品SKU插件（ HTML版）
data: function() { //alert(document.getElementById('seach').value) var specs = [ { "name": ...
PHP:【商城后台管理系统】部署角色管理，角色添加，菜单权限，删除角色功能
PHP:[商城后台管理系统]部署角色管理,角色添加,菜单权限,删除角色功能一.角色管理界面 ①首页 ②角色添加 ③角色编辑 ④角色删除二.部署流程部署流程后端采用thinkphp6.0框架,角 ...
谷粒商城--SPU和SKU（属性分组、规格参数、销售属性）
属性分组.规格参数 SPU和SKU 规格参数和销售属性表的关系理解导入前端代码完善后端接口接口开发流程什么是开发接口? 开发思路属性分组详情显示属性分组属性分组回显规格参数详情保存 ...
商城后台管理系统之普通查询_分页查询_商品的添加，单个删除，批量删除
一.MVC开发模式和JavaEE经典三层结构 1.JSP开发模式一: jsp(接收请求,响应请求,展示数据)+javabean(处理业务逻辑) javaBean:可复用的java组件 -user -u ...
Magento后台添加商品属性集属性集详细教程
第一步进入属性列表页: 第二步点击Add New Attribute进入属性添加页面: 第三步按照下面样式填写: 然后点击Save Attribute保存,然后列表页中就新加了该属性: 第四步进入属性 ...
【javaWeb微服务架构项目——乐优商城day05】——商品规格参数管理(增、删、改,查已完成)，SPU和SKU数据结构，商品查询
乐优商城day05 0.学习目标 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2.4. ...
视频教程-vuecli实战商城后台管理系统-Vue
vuecli实战商城后台管理系统帝莎学院创始人&CEO,目前主要从事全栈开发.Python.PHP.小程序.App.Web等技术的研究和开发.专注于实战类教程,授课风趣幽默,讲解条理清晰.通 ...

商城后台添加多规格属性

商城后台添加多规格属性相关推荐

最新文章

热门文章