微信小程序实现电商平台中的添加商品规格

技术交流请加QQ：2272172668 。也可以通过QQ号搜索微信。

在电商平台中肯定少不了添加商品规格的功能。上传动态图失败了，哎，只能看静态图了。如图：

就是一个商品里边有很多给个好多个属性。

之前用JQ的时候还是比较容易写出来的。因为在JQ中可以直接操作dom，直接对dom进行属性添加等处理，可以把每个元素的属性用自定义属性的方式记录在本元素上。

现在用微信小程序写这个东西就开始头疼了。因为没有办法直接操作dom，也没办法获取一个元素的上下级dom，哎，每个元素都是孤立存在的，这就略显尴尬了。不过还是有办法实现的。

这是实现的效果，里边的算法跟以前JQ算法是一样的。

我还是先说一下用微信小程序实现这个功能的思路吧，最后边我把代码复制下来，里边有一下引用的公共组件的，不过这些组件不太影响，只是ajax的封装，还有一些变量的封装。重要的是解决这个问题的思路，而不是具体的方法，因为他们后台返回来的数据格式跟我们后台返回来的格式不一样！后台返回的数据我放在文章的最下边了。

思路：1：通过js控制属性的状态。（前提是你已经把这个页面的静态页写出来了，如果这个静态页没有写出来就看看我下面的代码，其实就是循环遍历一下就展示出来了。）现在不能直接操作dom元素了，只能间接地通过数据来控制。我们把这些商品的属性弄成一个二维数组！关键就在这个二维数组上，这个二维数组的第一行就是第行属性的所有信息，同理第二个元素就是属性的第二行所以的信息。这个二维数组的每个元素就是一个属性值的信息！其实这个是可以是一个对象，这个对象包含了这个值的所有信息，也可以是一个值，这样就仅仅包含一个信息。我在写的时候就是仅仅是一个值！这个值有三个取值：0,1,2.为什么设置这三个值呢？看图中的属性，属性有三个状态：正常状态，选中状态，置灰状态。这三个状态分别用0,1,2来表示。我们根据这三个状态来判断该元素是否有具有某个class。class="per_attr {{arr[index][idx] == 1 ? 'active':''}} {{arr[index][idx] == 2 ? 'disabled':''}}"。这样就可以动态的

通过js来控制所有属性的状态了，可以实现属性的自由改变了。

2：通过选中的属性来匹配sku。其实这个匹配也没有多好的办法，就是在数组中一个元素一个元素的查询。但是这里有个很重要的算法，

这个算法就是通过匹配后怎么判断某些元素置灰还是正常显示。这个算法比较麻烦复杂，其实有很多博客上都有写，但是我过几个博客写的

比较含糊，没有写具体的思路，看完后也是一头雾水。

下面我来写一下点击某个元素后通过什么算法设置其他元素的状态的（点击不一定是从上到下顺序的）。用上图举例子：第一次点击了

尺寸里边的“小”，算法中的思路是：当前所有选中属性是“小”，“小”置成选中状态，循环每一行来设置属性的状态，以除去当前行选中元素来进行匹配

sku，根据所有匹配到的所有sku的尺寸属性来设置尺寸属性的状态，sku中包含的属性就设置为正常状态，不包含的属性就置灰。

然后进行第一行品牌的状态设置，因为当前所有选中状态是“小”，除去本行选中以外的元素就是空了，就是没有选中了，所以能匹配到所有的

sku，即第一行的所有属性都是正常状态（点击的元素为选中状态）。然后进行第二行状态的设置，除去第二行以外所有选中状态就是“小”，

根据“小”来匹配所有的sku，能找到几个符合的sku，吧这几个sku中所有的品牌属性都挑选出来，这些挑选出出来的属性都保持正常状态，

不包含的属性全部置灰，然后进行第三行，，，一直到最后一行。这个仅仅是点击了第一次的操作，点击第二次的操作跟点击第一次的操作

一样。

3：点击的元素如果是已经置灰了，就把所有置灰元素设置成正常状态，仅仅保留当前点击的为选中状态，在以这个一个选中元素为基础进行sku的匹配。

说了这么多也不一定能说清楚，吧代码写上更直观。如果有看不太清楚的地方欢迎私聊。qq：2272172668，不用问在吗，直接把问题发过来就行。

<view class="container"><!-- 用户信息 --><view class="user-info"><span class="icon address" style="background-image:url({{icon.address}})"></span><view class="info"><span>{{memberDTO.real_name}}</span><span>{{memberDTO.mobile}}</span><span>{{memberDTO.address}}</span></view></view><!-- My payment for goods --><view class="goods-price"><span>我的货款：<i>¥ {{avaliable_amount}}</i></span><span bindtap="go_recharge" class="btn"><button size="mini" type="primary">充值</button></span></view><view class='block'></view><!-- 商品详情 --><view class="goods-info"><!-- tab发货切换 --><view class="swiper-tab"><view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" data-type="2" bindtap="swichNav">厂家发货</view><view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" data-type="1" bindtap="swichNav">上级发货</view></view><view class="goods-details"><!-- <image src="{{img_url}}"></image> --><image wx:if="{{is_sku == '1'}}" src="{{confirm_show_info.image_uri}}"></image><image wx:if="{{is_sku == '2'}}" src="{{img_url}}"></image><view class="about"><p>{{spu_name}}</p></view></view></view><view class="attr_box"><view wx:for="{{total_attr_num}}"  wx:if="{{property_arr[index]}}"><view data-name="{{property_arr[index].original_name}}" data-id="{{property_arr[index].id}}" class='attr_row'><view class="property_name">{{property_arr[index].property_name}}：</view><view class='row_box'><span bindtap="fun_per_attr" wx:for="{{property_arr[index].property}}" data-name="{{property_arr[index].original_name}}" wx:for-index="idx" data-row="{{index}}" data-property="{{item}}" data-colom="{{idx}}" data-status="{{arr[index][idx]}}" class="per_attr {{arr[index][idx] == 1 ? 'active':''}} {{arr[index][idx] == 2 ? 'disabled':''}}">{{item}}</span></view></view></view></view><view class='goods_num'><span class="left">拿货价：{{ confirm_show_info.sku_price || ""}}</span><view class='right'><span bindtap="fun_minus">-</span><span>{{goods_num}}</span><span bindtap="fun_add">+</span></view></view><view wx:if="{{currentTab==2}}" class='goods_title'>类型说明：厂家发货订单，将由您的上级和总部进行审单，最终由厂家直接发货到您手中。</view><view wx:if="{{currentTab==1}}" class='goods_title'>类型说明：上级发货订单，将由您的上级进行审单，最终由您的上级直接发货到您手中。</view><view class='block_bootom'></view><view class='order'><span class="left">订单金额：¥ {{is_sku==2 ? total_price : ''}}</span><button class="right {{total_price > 0 ? '' : 'dis_btn'}}" size="mini" bindtap='fun_submit'  type="primary">提交订单</button></view>
</view>

/*** 获取base编码的图标*/
var address = require("../../../contentConfig/_var.js").url_base64.address;
var myConsoleLog = require("../../../contentConfig/console_log.js").myConsoleLog;var _this = null;
var $ajaxGet = require("../../../contentConfig/ajax.js").ajaxGet;
var upload_path_h5 = require("../../../envConfig/path_config.js").upload_path_h5;/*** js逻辑中使用的全局变量，不可删除！* attr_arr  arr是两个二维数组，里边的值和页面上的属性展示一一对应。并且这两个数组都是一一对应的。格式完全一样，左边完全一样。* selected_arr 是实时统计的当前选中的属性值。并且index和sku的左边相对应* sku_arr 是一个sku属性的数组* effective_sku_arr 是实时的，有效的sku（不能被匹配的sku就被删除了。）* sku_info 是所有sku信息的数组* confirm_show_info 就是页面上展示的商品信息* is_sku == 1 代表没有确定最终sku* total_price 商品总价* spu_id spu 的id* spu_name  */
// 书序用来存放商品属性信息Page({data: {spu_id: "",total_price: "",goods_num: 1,is_sku: "2",attr_arr: [],selected_arr: [],sku_arr: [],effective_sku_arr: [],sku_info: [],confirm_show_info: [],is_show_sku: false,icon: {address: address,},currentTab: 2,// tab切换  deliver_type: "2",},onLoad: function (options) {_this = this;_this.setData({spu_id: options.id + "",img_url: options.img_url,total_attr_num: new Array(20)})myConsoleLog(_this.data.img_url)_this.fun_get_user_info();_this.fun_get_goods_info();/** * 获取系统信息 */},onReady: function () {},/** * 获取用户信息 */fun_get_user_info: function () {$ajaxGet(null, "004000002", {}, function (data) {if (data.success) {if (data.success) {_this.setData({memberDTO: data.data.memberDTO})}}});},/** * 获取所有商品信息 */fun_get_goods_info: function () {$ajaxGet(null, "002000001", { deliver_type: _this.data.deliver_type, spu_id: _this.data.spu_id + ""}, function (data) {if (data.success) {if (data.success) {//    处理商品属性信息 _this.fun_property_handle(data.data);// 整理所有sku信息_this.fun_sku_info(data.data.item_sku_d_t_o_list);_this.setData({sku_info: data.data.item_sku_d_t_o_list,avaliable_amount: data.data.avaliable_amount,spu_id : data.data.id,spu_name: data.data.spu_name})}}});},/** * 点击tab切换 */swichNav: function (e) {if (this.data.currentTab === e.target.dataset.current) {return false;} else {_this.setData({currentTab: e.target.dataset.current,deliver_type: e.target.dataset.type,attr_arr: [],selected_arr: [],sku_arr: [],effective_sku_arr: [],sku_info: [],confirm_show_info: [],total_price: "",goods_num: 1,is_sku: "2",});_this.fun_get_goods_info();}},/** * 点击某一个属性 总处理函数 （点击事件的控制中心）* */fun_per_attr: function (e) {var row = e.currentTarget.dataset.row; // 数组所在行var colom = e.currentTarget.dataset.colom; // 数组所在的列var status = e.currentTarget.dataset.status; // 当前属性的状态var property = e.currentTarget.dataset.property; // 当前属性 值var name = e.currentTarget.dataset.name; // 当前属性 名称_this.fun_handle_click(row, colom, status); //处理点击后的选中属性_this.fun_collo_selected_attr(); // 收集所有选中属性的值 index就是代表的行号_this.fun_attr_match_sku();},/** * 匹配sku，不匹配的就从effective_sku_arr数组中删除。* */fun_attr_match_sku: function(){//  sku_arr  selected_arr  effective_sku_arrmyConsoleLog("sku_arr")myConsoleLog(_this.data.sku_arr);myConsoleLog(_this.data.selected_arr);for(var j=0; j<_this.data.arr.length; j++){var tmp_selected = new Array(_this.data.selected_arr.length);_this.fun_copy_arr(_this.data.selected_arr, tmp_selected )tmp_selected[j] = ""; // 第i行被选择的属性清空 就是为了寻找设置i行的属性var tmp_effiective = new Array(_this.data.effective_sku_arr.length);_this.fun_copy_arr(_this.data.effective_sku_arr, tmp_effiective)for (var i = 0; i < tmp_effiective.length; i++) {if (_this.fun_compare_arr(tmp_selected, tmp_effiective[i])) {} else { // 有不匹配的，需要删除这个数组//    tmp_effiective.splice(i, 1);tmp_effiective[i] = ""}}// 此时的tmp_effiective已经是第j行的所有匹配到的属性了。下一步设置第j行的属性置灰，（没有匹配到的就置灰）myConsoleLog("tmp_effiective")myConsoleLog(tmp_effiective)_this.fun_disabled_attr(j, tmp_effiective);}},// 设置未被选中的属性，置灰。存在的属性保留。其他的属性全部置灰fun_disabled_attr: function (row, arr){var tmp_arr = [];for(var i=0; i<arr.length; i++){tmp_arr.push(arr[i][row]);// var str = "arr[" + i + "][" + row + "]";// _this.setData({//     [str]: "2"// })}myConsoleLog("tmp_arr") // 这是每行 需要正常展示的属性myConsoleLog(tmp_arr)for(var j=0;j<_this.data.arr[row].length;j++){if (tmp_arr.indexOf(_this.data.attr_arr[row][j]) > -1){// 不能置灰的属性if (_this.data.arr[row][j] == "2"){var str = "arr[" + row + "][" + j + "]";_this.setData({[str]: "0"})}}else{var str = "arr[" + row + "][" + j + "]";_this.setData({[str]: "2"})}}},// 浅复制两个数组fun_copy_arr: function(arr1, arr2){ // 复制arr1 到 arr2 ，新生成的是arr2for(var i=0; i< arr1.length; i++){arr2[i] = arr1[i];}},// 比较两个数组是否一样fun_compare_arr: function (tmp_selected,arr){for (var i = 0; i < tmp_selected.length; i++) {if (tmp_selected[i] != "") {break;}if (i == tmp_selected.length - 1) {return true; // 全部是空属性，返回 true就不用删除}}for (var i = 0; i < tmp_selected.length;i++){if (tmp_selected[i] == ""){continue;}if (_this.data.selected_arr[i] == arr[i]){}else{return false;  // 不同，删除数组}}return true;},/** * 每次点击后统一收集所有已经选中的属性 实时统计的，坐标和sku的坐标对应的。* */fun_collo_selected_attr: function () {if (!_this.data.selectde_arr) { // 创建selectde_arr数组，用来存放点击后 选中的属性var len = _this.data.arr.length;_this.setData({selectde_arr: new Array(len)});_this.data.selectde_arr.fill("");} else {_this.data.selectde_arr.fill("");}var lengths = _this.data.arr.length;var selected_arr = new Array(lengths);selected_arr.fill("");for(var i=0;i<_this.data.arr.length; i++){for(var j=0;j<_this.data.arr[i].length; j++){if(_this.data.arr[i][j] == "1"){selected_arr[i] = _this.data.attr_arr[i][j]}}}_this.setData({selected_arr: selected_arr});if (_this.data.selected_arr.length == _this.data.arr.length){_this.setData({is_show_sku: true});// 判断选中了那个sku商品。_this.fun_confirm_sku();}else{_this.setData({is_show_sku: false});}},fun_confirm_sku: function(){// sku_arr  selected_arr// 比较选中大的数组跟哪个sku一样。for (var i = 0; i < _this.data.sku_arr.length;i++){if (_this.data.sku_arr[i].toString() == _this.data.selected_arr.toString()){ // 匹配成功 i就是sku的顺序_this.data.sku_info[i].image_uri = upload_path_h5 + _this.data.sku_info[i].image_uri_this.setData({confirm_show_info: _this.data.sku_info[i],is_sku: "2"});if (_this.data.confirm_show_info.sku_price){_this.setData({total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price})}if (!_this.data.sku_info[i].sku_price){wx.showToast({title: '本商品未设置价格!',icon: 'none',duration: 2000})}return;}else{_this.setData({confirm_show_info: "",is_sku: "1"})}}},/** * 点击某一个属性 处理函数* 属性为0 ： 当前行所有为1的都得清零*       1    不处理*       2    吧全部属性为清零 然后把当前属性设为1*/fun_handle_click: function (row, colom, status) {// 分三种状态，0 的时候不需要操作，1：不需要额外操作 2： 点击了灰色的属性，需要先把所有属性的状态设置为 0switch (status) {case "0": {for (var i = 0; i < _this.data.arr[row].length; i++) {if (_this.data.arr[row][i] == "1") {var str = "arr[" + row + "][" + i + "]";_this.setData({[str]: "0"})}}// 当前点击置为1var str = "arr[" + row + "][" + colom + "]";_this.setData({[str]: "1"})break;}case "1": {break;}case "2": {for (var i = 0; i < _this.data.arr.length; i++) {for (var j = 0; j < _this.data.arr[i].length; j++) {var str = "arr[" + i + "][" + j + "]";_this.setData({[str]: "0"})}}// 当前点击置为1var str = "arr[" + row + "][" + colom + "]";_this.setData({[str]: "1"})break;}}},/** * 把所有的sku属性汇总起来，形成一个数组* */fun_sku_info: function(data){//  property_arrvar len = data.length;var arr = new Array(len);for(var i=0;i<data.length;i++){var tmp_arr = [];for(var j=1;j<=9;j++){var name = "reserve" + j;if (data[i][name]) {tmp_arr.push(data[i][name]);}}arr[i] = tmp_arr;}_this.setData({sku_arr: arr,effective_sku_arr: arr})myConsoleLog(arr)},/** * 处理商品属性信息* 并且创建存储属性状态的数组 0 1 2 。 (一个二维数组)* 其中 0 ：正常装填*      1： 选中状态*      2： 置灰状态*/fun_property_handle: function (data) {// 以reserve1_list名称循环var goods_property = [];for (var i = 1; i <= 9; i++) {var tmp_name = "reserve" + i + "_list";if (data[tmp_name] != "") {var tmp_json = {};tmp_json.original_name = tmp_name;tmp_json.property = data[tmp_name];tmp_json.property_name = "";goods_property.push(tmp_json);}}var length = goods_property.length;var attr_arr = new Array(length);var arr = new Array();for (var i = 0; i < goods_property.length; i++) {if (goods_property.length != 1 && i != goods_property.length - 1){goods_property[i].property_name = data.property_d_t_o_list[i].property_name;goods_property[i].id = data.property_d_t_o_list[i].property_id;}if (i != goods_property.length - 1) {} else {goods_property[i].property_name = "单位";goods_property[i].id = "2";}var len = goods_property[i].property.length;attr_arr[i] = goods_property[i].property;arr[i] = new Array(len);arr[i].fill("0");}_this.setData({property_arr: goods_property,arr: arr,attr_arr: attr_arr})myConsoleLog(goods_property);myConsoleLog("property_arr")myConsoleLog(_this.data.property_arr)},fun_minus: function(){if (_this.data.goods_num == 1){}else{_this.setData({goods_num: _this.data.goods_num - 1})if (_this.data.confirm_show_info.sku_price){_this.setData({total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price})}}},fun_add: function(){_this.setData({goods_num: _this.data.goods_num + 1})if (_this.data.confirm_show_info.sku_price) {_this.setData({total_price: _this.data.goods_num * _this.data.confirm_show_info.sku_price})}},fun_submit: function(){myConsoleLog(_this.data.confirm_show_info)if (!_this.data.total_price > 0){ // 没有可用的skuwx.showToast({title: '请选择商品!',icon: 'none',duration: 1000});return;};wx.showLoading({mask: true,title: '努力加载中...',});$ajaxGet(null, "006000007", { counts: _this.data.goods_num + "", deliver_type: _this.data.deliver_type, sku_id: _this.data.confirm_show_info.id + "", spu_id: _this.data.spu_id + ""}, function (data) {if (data.success) {wx.hideLoading();wx.showToast({title: '提交成功!',icon: 'none',duration: 1000});setTimeout(function(){wx.redirectTo({url: '../order-list/index?type=1&order_status=00'})},1000)}else{if(data.msg){wx.showToast({title: data.msg,icon: 'none',duration: 1000});}}}); },go_recharge: function(){wx.navigateTo({url: '../../payment/payment-recharge/index',})}
})

.container {
}.container .user-info {position: relative;padding: 20rpx;font-size: 30rpx;background: #f5ffeb;overflow: hidden;
}.container .user-info .icon {position: absolute;top: 68rpx;left: 5%;line-height: 40rpx;margin-right: 20rpx;width: 32rpx;height: 41rpx;background-size: contain;vertical-align: middle;float: left;
}.container .user-info .info {position: relative;left: 10%;width: 90%;
}.container .user-info .info span {display: block;
}.container .goods-price {margin: 20rpx 0;margin-bottom: 0;padding: 20rpx;font-size: 30rpx;background: #fff;overflow-y: hidden;
}.container .goods-price span {display: inline-block;line-height: 60rpx;
}.container .goods-price span i {color: #f33;font-size: normal;font-weight: 700;
}.container .goods-price .btn {float: right;
}.container .goods-price .btn button {width: 142rpx;height: 62rpx;font-size: 30rpx;line-height: 62rpx;background: #66c300;border-radius: 10rpx;color: #fff;
}.container .goods-info {background: #fff;border-bottom: 1px solid #e8e8e8;font-size: 30rpx;
}.container .goods-info .swiper-tab {width: 100%;text-align: center;line-height: 80rpx;
}.container .goods-info .swiper-tab .swiper-tab-list {font-size: 30rpx;display: inline-block;width: 50%;color: #777;
}.container .goods-info .swiper-tab .active {background: #fff;color: #66c300;border: 0px;border-bottom: 2rpx solid #66c300;
}.container .goods-info .goods-details {position: relative;padding: 30rpx;margin-top: 10rpx;border-top: 1px solid #e8e8e8;padding-top: 20rpx;background: #fff;overflow: hidden;
}.container .goods-info .goods-details image {float: left;width: 140rpx;height: 140rpx;margin-right: 20rpx;
}.block {width: 100%;height: 20rpx;background-color: #f2f2f2;
}.attr_box {padding: 10rpx 20rpx;font-size: 30rpx;
}.property_name {display: inline-block;padding: 10rpx 20rpx;position: absolute;top: 19rpx;left: 0;
}.per_attr {display: inline-block;padding: 10rpx 20rpx;border: 1px solid #e8e8e8;margin: 10rpx 10rpx;border-radius: 10rpx;
}.attr_row {position: relative;padding: 10rpx 0;
}.row_box {padding-left: 100rpx;overflow: hidden;
}.active {color: #66c300;border: 1px solid #66c300;
}.disabled {background-color: #ccc;
}.goods_title {background-color: #ddebce;margin: 20rpx;padding: 30rpx 20rpx;border-radius: 8rpx;font-size: 30rpx;
}.goods_num {border: 1px solid #e8e8e8;font-size: 30rpx;padding: 30rpx 20rpx;overflow: hidden;
}.goods_num .left {float: left;transform: translateY(10rpx);
}.goods_num .right {padding: 10rpx;overflow: hidden;border: 1rpx solid #e8e8e8;border-radius: 10rpx;display: inline-block;float: right;
}.goods_num .right span {padding: 20rpx;
}.block_bootom {width: 100%;height: 150rpx;background-color: #f2f2f2;
}.order {border-top: 1px solid #e8e8e8;position: fixed;left: 0;bottom: 0;right: 0;padding: 20rpx;background-color: white;font-size: 30rpx;
}
.order .left{display: inline-block;padding-top: 15rpx;
}
.order .right {display: inline-block;float: right;background-color: #66c300;color: white;border-radius: 10rpx;
}
.dis_btn{background-color: gray!important;
}

这是后台返回来的json数据。

{"msg":"成功","code":"10000","success":true,"data":{"spu_name":"fjc","avaliable_amount":"0.00","item_sku_d_t_o_list":[{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc4","image_uri":"1001121521969210346.jpg","deliver_type":2,"market_price":5700,"wechat_price":324500,"sku_price":"56.0","unit":"*16盒","specs":"总部发货,*16盒,大,肌洋,12瓶,上海","reserve2":"大","reserve3":"肌洋","reserve6":"12瓶","reserve7":"上海","reserve9":"*16盒","sku_status":1,"id":802,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc5","image_uri":"1001121514604700975.jpg","deliver_type":2,"market_price":76800,"wechat_price":35400,"sku_price":"56.0","unit":"*48盒","specs":"总部发货,*48盒,中,红色小象,*48盒,南京","reserve2":"中","reserve3":"红色小象","reserve6":"*48盒","reserve7":"南京","reserve9":"*48盒","sku_status":1,"id":803,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc6","image_uri":"1001121514777532774.jpg","deliver_type":2,"market_price":657800,"wechat_price":5465500,"sku_price":"56.0","unit":"24瓶","specs":"总部发货,24瓶,小,洁云,*6支,南京","reserve2":"小","reserve3":"洁云","reserve6":"*6支","reserve7":"南京","reserve9":"24瓶","sku_status":1,"id":804,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"spu_name":"fjc","sku_sn":"fjc8","image_uri":"1001051520577167894.jpg","deliver_type":2,"market_price":98700,"wechat_price":57600,"sku_price":"56.0","unit":"*16盒","specs":"总部发货,*16盒,小,肌洋,支,上海","reserve2":"小","reserve3":"肌洋","reserve6":"支","reserve7":"上海","reserve9":"*16盒","sku_status":1,"id":806,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0}],"property_d_t_o_list":[{"spu_id":318,"property_id":"4","property_name":"尺寸","id":343,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"5","property_name":"品牌","id":344,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"8","property_name":"容量","id":345,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0},{"spu_id":318,"property_id":"9","property_name":"产地","id":346,"create_date":"2018-05-14 15:05:27","update_date":"2018-05-14 15:05:27","deleted":0}],"reserve1_list":[null],"reserve2_list":["小","大","中"],"reserve3_list":["红色小象","肌洋","洁云"],"reserve4_list":[null],"reserve5_list":[null],"reserve6_list":["*48盒","支","*6支","12瓶"],"reserve7_list":["上海","南京"],"reserve8_list":[null],"reserve9_list":["*48盒","24瓶","*16盒"],"id":318}}

微信小程序实现电商平台中的添加商品规格相关推荐

从淘宝到微信小程序，电商平台变革新时
都知道淘宝在前几年的火热,要想创业阿里的淘宝就是最佳的选择,因为入驻商户不是很多.只要在上面开店,稍微运营一下基本上都会有收入,稍微有点口碑了店铺就可以起来.但在这两年,淘宝店铺增多,管理更加严格导致 ...
微信小程序为电商插上翅膀
微信小程序从2017年1月上线开始到现在即将满2周岁了,而2018年可以说是微信小程序的爆发年,它也向我们展示了惊人的成长速度.据统计,截至到2018年9月底,已上线微信小程序超过200 微信小程序从 ...
微信小程序，电商又一春！
不管愿不愿意,小程序已经成为另一种连接方式,它足够快捷,一个点击就可能整合多个营销环节,并且在设计之初就被赋予了商业的愿望. 微趋道,就是小程序资本加速入局,小程序暗流涌动据不完全统计,2017 ...
【微信小程序】电商移动前端API文档
文章目录一.文档更新说明 1.返回值调整 2.分类页图片 3.订单支付接口二.路径说明三.电商登录实现方式四.API详情 1.全局权限访问 (1)主页API 获取首页轮播图数据获取首页分类选 ...
微信小程序社区电商demo模板
今天上线了一款基础的社区电商小程序,欢迎大家给出宝贵意见,并可免费赠送基础版源码,如有需要可进行商务合作,定制开发等.uni插件市场地址:https://ext.dcloud.net.cn/plugi ...
微信小程序实现电商的购物车页面
效果如图: 思路讲解: {id:1,name:'西瓜',src:'-/-/img/01.png',color:'white',dprice:40,zprice:0,num:0}, 通过颜色来判断是否被 ...
小程序在电商中的优势
小程序在电商中的优势 1.更加安全规范与传统电商相比,电商小程序运行更加方便快捷,且小程序上架具有唯一性,用户数据不会共享,可以建立自己的私域流量池.除此之外,使用线上支付既提升了支付效率,也提升了 ...
微信小程序电商源码：外卖小程序，电商小程序，门店类小程序，展示类小程序，批发商城小程序、分销小程序。
介绍: 1.naicha 2.xianhua 3.xingbake 4.zhubaoxiao 5.zhubaoxiao 6.majiangshangcheng 7.jiafang 8.huazhuan ...
小程序做电商的硬伤 “正规军”入驻草根望尘莫及
如今的天猫店.淘宝店渐渐成为品牌的天下,曾经在淘宝混的不错的中小卖家,能够坚守下去,把品牌做大的只有寥寥几家.而这个时候,微信小程序打算在移动电商市场再"搏"一把,对于中小卖家来说 ...

微信小程序实现电商平台中的添加商品规格

微信小程序实现电商平台中的添加商品规格相关推荐

最新文章

热门文章