vue和小程序电商Sku算法demo

最新推荐文章于 2024-04-02 17:16:06 发布
最新推荐文章于 2024-04-02 17:16:06 发布
阅读量337 收藏
点赞数 1
文章标签： vue.js 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junx666/article/details/128932505
版权

1.vue代码

        1.1 html代码

//html
<div class="sku">
    <h3>iphone 13</h3>
        <div style="margin-bottom:10px;" v-for="(attr, index) in process_attribute"     :key="index">
        <h4>{{ attr.name }}</h4>
         <div class="sku-group">
            <button
            v-for="(item, index2) in attr.item"
                                :key="index2"
                                style="margin: 0 5px 5px 0;"
                                :style="{
                                    color:item.actived ? 'red' : '#666',
                                    opacity:item.disabled?0.7:1
                                }"
                                :disabled="item.disabled"
                                @click="skuClick(index, index2)">{{ item.name }}</button>
                        </div>
                    </div>
                    <div style="margin-top: 20px;">
                        库存：
                        <span>{{ stock }}</span>
                    </div>
                    <div style="margin-bottom:20px;">
                        价格：
                        <span v-if="minprice == maxprice">{{ minprice }}</span>
                        <span v-else>{{ minprice }} - {{ maxprice }}</span>
                    </div>
                    <button type="button" @click="submit">购买</button>
               </div>
//js

        1.2 js代码

//data参数
 data() {
        return {
            separator: ';',
            attribute: [{
                    "name": "颜色",
                    "item": [
                        "星光色",
                        "午夜色",
                        "粉色",
                        "蓝色",
                        "红色"
                    ]
                },
                {
                    "name": "版本",
                    "item": [
                        "128GB",
                        "256GB",
                        "512GB"
                    ]
                },
                {
                    "name": "运营商",
                    "item": [
                        "全网通",
                        "移动版",
                        "联通版",
                        "电信版"
                    ]
                }
            ],
            sku: [{
                    "sku": "星光色;128GB;全网通",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "星光色;128GB;移动版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "星光色;128GB;联通版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "星光色;128GB;电信版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "星光色;256GB;全网通",
                    "price": 7288,
                    "stock": 0
                },
                {
                    "sku": "星光色;256GB;电信版",
                    "price": 7288,
                    "stock": 0
                },
                {
                    "sku": "星光色;512GB;全网通",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "星光色;512GB;移动版",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "星光色;512GB;联通版",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "星光色;512GB;电信版",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "午夜色;128GB;全网通",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "午夜色;128GB;移动版",
                    "price": 5695,
                    "stock": 10
                },
                {
                    "sku": "午夜色;128GB;联通版",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "午夜色;128GB;电信版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "午夜色;256GB;全网通",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "午夜色;256GB;移动版",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "午夜色;256GB;联通版",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "午夜色;256GB;电信版",
                    "price": 7288,
                    "stock": 0
                },
                {
                    "sku": "午夜色;512GB;全网通",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "午夜色;512GB;移动版",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "午夜色;512GB;联通版",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "午夜色;512GB;电信版",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "粉色;128GB;全网通",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "粉色;128GB;移动版",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "粉色;128GB;联通版",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "粉色;128GB;电信版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "粉色;256GB;全网通",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "粉色;256GB;移动版",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "粉色;256GB;联通版",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "粉色;256GB;电信版",
                    "price": 7288,
                    "stock": 0
                },
                {
                    "sku": "粉色;512GB;全网通",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "粉色;512GB;移动版",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "粉色;512GB;联通版",
                    "price": 9688,
                    "stock": 10
                },
                {
                    "sku": "粉色;512GB;电信版",
                    "price": 9688,
                    "stock": 0
                },
                {
                    "sku": "蓝色;128GB;全网通",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "蓝色;128GB;移动版",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "蓝色;128GB;联通版",
                    "price": 5699,
                    "stock": 10
                },
                {
                    "sku": "蓝色;128GB;电信版",
                    "price": 5699,
                    "stock": 0
                },
                {
                    "sku": "蓝色;256GB;全网通",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "蓝色;256GB;移动版",
                    "price": 7288,
                    "stock": 10
                },
                {
                    "sku": "蓝色;256GB;联通版",
                    "price": 7288,
                    "stock": 10
                },
            ],
            process_attribute: [],
            process_sku: [],
            // 当前选中 sku 的库存及价格区间
            stock: '',
            minprice: '',
            maxprice: ''
        }
    },
//方法和渲染
    mounted() {
        this.init()
    },
    methods: {
        init() {
            // 对 attribute 数据进行加工，并存入 process_attribute 中
            this.attribute.map(attr => {
                    let temp = {
                        name: attr.name
                    }
                    temp.item = attr.item.map(item => {
                        return {
                            name: item,
                            actived: false,
                            disabled: this.itemquantity(item) <= 0
                        }
                    })
                    this.process_attribute.push(temp)
                })
                // 对 sku 数据进行加工，并存入 process_sku 中
            this.sku.map(v => {
                    var combArr = this.arrayCombine(v.sku.split(this.separator))
                    for (var j = 0; j < combArr.length; j++) {
                        var key = combArr[j].join(this.separator)
                        if (this.process_sku[key]) {
                            // 库存累加，价格添加进数组
                            this.process_sku[key].stock += v.stock
                            this.process_sku[key].prices.push(v.price)
                        } else {
                            this.process_sku[key] = {
                                stock: v.stock,
                                prices: [v.price]
                            }
                        }
                    }
                })
                // 更新数据视图
            this.process_sku = Object.assign({}, this.process_sku)
            this.skuCheck()

            console.log('process_attribute', this.process_attribute);
            console.log('process_sku', this.process_sku);
        },
        //查询属性数量
        itemquantity(item) {
            let quantity = 0;
            this.sku.forEach(element => {
                var skuArr = element.sku.split(this.separator);
                if (skuArr.indexOf(item) != -1) {
                    quantity += element.stock;
                }
            });
            return quantity
        },
        arrayCombine(targetArr) {
            var resultArr = []
            for (var n = 0; n <= targetArr.length; n++) {
                var flagArrs = this.getFlagArrs(targetArr.length, n)
                while (flagArrs.length) {
                    var flagArr = flagArrs.shift()
                    var combArr = Array(targetArr.length)
                    for (var i = 0; i < targetArr.length; i++) {
                        if (flagArr[i]) {
                            combArr[i] = targetArr[i]
                        }
                    }
                    resultArr.push(combArr)
                }
            }
            return resultArr
        },
        getFlagArrs(m, n) {
            var flagArrs = [],
                flagArr = [],
                isEnd = false
            for (var i = 0; i < m; i++) {
                flagArr[i] = i < n ? 1 : 0
            }
            flagArrs.push(flagArr.concat())
                // 当n不等于0并且m大于n的时候进入
            if (n && m > n) {
                while (!isEnd) {
                    var leftCnt = 0
                    for (var i = 0; i < m - 1; i++) {
                        if (flagArr[i] == 1 && flagArr[i + 1] == 0) {
                            for (var j = 0; j < i; j++) {
                                flagArr[j] = j < leftCnt ? 1 : 0
                            }
                            flagArr[i] = 0
                            flagArr[i + 1] = 1
                            var aTmp = flagArr.concat()
                            flagArrs.push(aTmp)
                            if (aTmp.slice(-n).join('').indexOf('0') == -1) {
                                isEnd = true
                            }
                            break
                        }
                        flagArr[i] == 1 && leftCnt++
                    }
                }
            }
            return flagArrs
        },
        skuClick(key1, key2) {
            if (!this.process_attribute[key1].item[key2].disabled) {
                this.process_attribute[key1].item.map((item, index) => {
                    item.actived = index == key2 ? !item.actived : false
                })
                this.skuCheck()
                this.getStockPrice()
            }
        },
        skuCheck() {
            let sku = []
            this.process_attribute.map(attr => {
                let name = ''
                attr.item.map(item => {
                    if (item.actived) {
                        name = item.name
                    }
                })
                sku.push(name)
            })
            this.stock = this.process_sku[sku.join(this.separator)].stock
            this.minprice = Math.min.apply(Math, this.process_sku[sku.join(this.separator)].prices)
            this.maxprice = Math.max.apply(Math, this.process_sku[sku.join(this.separator)].prices)
        },
        getStockPrice() {
            this.process_attribute.map(attr => {
                attr.item.map(item => {
                    item.disabled = this.itemquantity(item.name) <= 0
                })
            })
            let count = 0
            let i = 0
            this.process_attribute.map((attr, index) => {
                    let flag = false
                    attr.item.map(item => {
                        if (item.actived) {
                            flag = true
                        }
                    })
                    if (!flag) {
                        count += 1
                        i = index
                    }
                })
                // 当只有一组规格没选时
            if (count == 1) {
                this.process_attribute[i].item.map(item => {
                    let sku = []
                    let text = item.name
                    this.process_attribute.map((attr, index) => {
                        if (index != i) {
                            attr.item.map(item2 => {
                                if (item2.actived) {
                                    sku.push(item2.name)
                                }
                            })
                        } else {
                            sku.push(text)
                        }
                    })
                    if (this.process_sku[sku.join(this.separator)].stock == 0) {
                        item.disabled = true
                    }
                })
            }
            // 当所有规格都有选时
            if (count == 0) {
                this.process_attribute.map((attr, index) => {
                    let i = index
                    this.process_attribute[index].item.map(item => {
                        if (!item.actived) {
                            let sku = []
                            let text = item.name
                            this.process_attribute.map((list, index) => {
                                if (index != i) {
                                    list.item.map(item2 => {
                                        if (item2.actived) {
                                            sku.push(item2.name)
                                        }
                                    })
                                } else {
                                    sku.push(text)
                                }
                            })
                            if (this.process_sku[sku.join(this.separator)].stock == 0) {
                                item.disabled = true
                            }
                        }
                    })
                })
            }
        },
        submit() {
            let sku = []
            let isSelectSKU = this.process_attribute.every(attr => {
                let filter = attr.item.filter(v => v.actived)
                if (filter.length != 0) {
                    sku.push(filter[0].name)
                }
                return filter.length != 0
            })
            if (isSelectSKU) {
                alert(`当前SKU为：${sku.join(this.separator)}`)
            } else {
                alert('请选择完整商品属性')
            }
        }
    }

2.小程序代码

        2.1 小程序wxml

<view class="product_type_dia"></view>
<view class="wait_appoint_box active">
  <view class="wait_appoint_main">
    <view class="wait_appoint_main_top">
      <image class="image_icon_product" mode="aspectFill" src="https://qn.teckongroup.com/fcbd2eb7ccd8b45350d1f1794278c8dd.jpg-b65ccc46-58c5-498b-99e6-1dd830ad8c76?e=3205907883&token=E5awrJ_kA5QMsl2SZRitj11DfZ7uInaqjqhlFajV:mqXBRk7Qu3XTKTtjOQPImO1rmrM=">
      </image>
      <view class="product_type_dia_money">
        <view class="top" wx:if="{{minprice != maxprice}}">￥{{minprice}}- {{ maxprice }}</view>
        <view class="top" wx:if="{{minprice == maxprice}}">￥{{minprice}}</view>
        <view class="bottom">库存{{stock}}件</view>
      </view>
      <image src="/images/icon_close.png" class="icon_close_size"></image>
    </view>
    <block wx:for="{{process_attribute}}" wx:for-index="index" wx:for-item="attr">
      <view class="wait_appoint_main_type">{{attr.name}}</view>
    <view class="wait_appoint_main_type_list">
      <view class="wait_appoint_main_type_item {{item.actived?'active':''}}" style="color:{{item.disabled?'#C3C3C3':''}}" wx:for="{{attr.item}}" bindtap="skuClick" data-index="{{index}}" data-index2="{{index2}}" wx:for-index="index2">
        {{item.name}}
      </view>
    </view>
    </block>

    <view class="wait_appoint_main_type_number">
      <view class="wait_appoint_main_type_left">数量</view>
      <view class="cart_item_cart_counter">
        <view class="dec" bindtap="toReduce">-</view>
        <input type="number" class="graty" value="{{quantity}}" disabled />
        <view class="dec" bindtap="toAdd">+</view>
      </view>
    </view>
    <view class="dia_btn_box">
      <view class="dia_btn_red_active">加入购物车</view>
      <view class="dia_btn_yellow_active" bindtap="toBuyThisGoods">立即购买</view>
    </view>
  </view>
</view>

        2.2 小程序js

// components/bannar/banner.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    banner: {
      type: Object, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: [], // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    attribute: {
      type: Array, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: [],
    },
    sku: {
      type: Array, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: [],
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    process_attribute: [],
    process_sku: [],
    // 当前选中 sku 的库存及价格区间
    stock: '',
    minprice: '',
    separator: ';',
    maxprice: '',
    quantity:1
  },

  /**
   * 组件的方法列表
   */
  methods: {
    init() {
      // 对 attribute 数据进行加工，并存入 process_attribute 中
      this.data.attribute.map(attr => {
        let temp = {
          name: attr.name
        }
        temp.item = attr.item.map(item => {
          return {
            name: item,
            actived: false,
            disabled: this.itemquantity(item) <= 0
          }
        })
        this.data.process_attribute.push(temp)
      })
      // console.log(this.data.process_attribute)
      this.setData({
        process_attribute:this.data.process_attribute
      })
      // 对 sku 数据进行加工，并存入 process_sku 中
      this.data.sku.map(v => {
        var combArr = this.arrayCombine(v.sku.split(this.data.separator))
        for (var j = 0; j < combArr.length; j++) {
          var key = combArr[j].join(this.data.separator)
          if (this.data.process_sku[key]) {
            // 库存累加，价格添加进数组
            this.data.process_sku[key].stock += v.stock
            this.data.process_sku[key].prices.push(v.price)
          } else {
            this.data.process_sku[key] = {
              stock: v.stock,
              prices: [v.price]
            }
          }
        }
      })
      // 更新数据视图
      this.data.process_sku = Object.assign({}, this.data.process_sku)
      console.log('process_sku', this.data.process_sku);
      this.skuCheck()
      console.log('process_attribute', this.data.process_attribute);
    },
    //查询属性数量
    itemquantity(item) {
      let quantity = 0;
      this.data.sku.forEach(element => {
        var skuArr = element.sku.split(this.data.separator);
        if (skuArr.indexOf(item) != -1) {
          quantity += element.stock;
        }
      });
      return quantity
    },
    arrayCombine(targetArr) {
      var resultArr = []
      for (var n = 0; n <= targetArr.length; n++) {
        var flagArrs = this.getFlagArrs(targetArr.length, n)
        while (flagArrs.length) {
          var flagArr = flagArrs.shift()
          var combArr = Array(targetArr.length)
          for (var i = 0; i < targetArr.length; i++) {
            if (flagArr[i]) {
              combArr[i] = targetArr[i]
            }
          }
          resultArr.push(combArr)
        }
      }
      return resultArr
    },
    getFlagArrs(m, n) {
      var flagArrs = [],
        flagArr = [],
        isEnd = false
      for (var i = 0; i < m; i++) {
        flagArr[i] = i < n ? 1 : 0
      }
      flagArrs.push(flagArr.concat())
      // 当n不等于0并且m大于n的时候进入
      if (n && m > n) {
        while (!isEnd) {
          var leftCnt = 0
          for (var i = 0; i < m - 1; i++) {
            if (flagArr[i] == 1 && flagArr[i + 1] == 0) {
              for (var j = 0; j < i; j++) {
                flagArr[j] = j < leftCnt ? 1 : 0
              }
              flagArr[i] = 0
              flagArr[i + 1] = 1
              var aTmp = flagArr.concat()
              flagArrs.push(aTmp)
              if (aTmp.slice(-n).join('').indexOf('0') == -1) {
                isEnd = true
              }
              break
            }
            flagArr[i] == 1 && leftCnt++
          }
        }
      }
      return flagArrs
    },
    skuClick(e) {
      let key1 = e.currentTarget.dataset.index
      let key2 = e.currentTarget.dataset.index2
      if (!this.data.process_attribute[key1].item[key2].disabled) {
        this.data.process_attribute[key1].item.map((item, index) => {
          item.actived = index == key2 ? !item.actived : false
        })
        this.skuCheck()
        this.getStockPrice()
        this.setData({
          process_attribute:  this.data.process_attribute
        })
      }
    },
    skuCheck() {
      let sku = []
      this.data.process_attribute.map(attr => {
        let name = ''
        attr.item.map(item => {
          if (item.actived) {
            name = item.name
          }
        })
        sku.push(name)
      })
  
      this.data.stock = this.data.process_sku[sku.join(this.data.separator)].stock
      this.data.minprice = Math.min.apply(Math, this.data.process_sku[sku.join(this.data.separator)].prices)
      this.data.maxprice = Math.max.apply(Math, this.data.process_sku[sku.join(this.data.separator)].prices)
      this.setData({
        minprice:this.data.minprice ,
        maxprice:this.data.maxprice ,
        stock:this.data.stock
      })
    },
    getStockPrice() {
      this.data.process_attribute.map(attr => {
        attr.item.map(item => {
          item.disabled = this.itemquantity(item.name) <= 0
        })
      })
      let count = 0
      let i = 0
      this.data.process_attribute.map((attr, index) => {
        let flag = false
        attr.item.map(item => {
          if (item.actived) {
            flag = true
          }
        })
        if (!flag) {
          count += 1
          i = index
        }
      })
      // 当只有一组规格没选时
      if (count == 1) {
        this.data.process_attribute[i].item.map(item => {
          let sku = []
          let text = item.name
          this.data.process_attribute.map((attr, index) => {
            if (index != i) {
              attr.item.map(item2 => {
                if (item2.actived) {
                  sku.push(item2.name)
                }
              })
            } else {
              sku.push(text)
            }
          })
          if (this.data.process_sku[sku.join(this.data.separator)].stock == 0) {
            item.disabled = true
          }
        })
      }
      // 当所有规格都有选时
      if (count == 0) {
        this.data.process_attribute.map((attr, index) => {
          let i = index
          this.data.process_attribute[index].item.map(item => {
            if (!item.actived) {
              let sku = []
              let text = item.name
              this.data.process_attribute.map((list, index) => {
                if (index != i) {
                  list.item.map(item2 => {
                    if (item2.actived) {
                      sku.push(item2.name)
                    }
                  })
                } else {
                  sku.push(text)
                }
              })
              if (this.data.process_sku[sku.join(this.data.separator)].stock == 0) {
                item.disabled = true
              }
            }
          })
        })
      }
    },
    submit() {
      let sku = []
      let isSelectSKU = this.data.process_attribute.every(attr => {
        let filter = attr.item.filter(v => v.actived)
        if (filter.length != 0) {
          sku.push(filter[0].name)
        }
        return filter.length != 0
      })
      if (isSelectSKU) {
        alert(`当前SKU为：${sku.join(this.data.separator)}`)
      } else {
        alert('请选择完整商品属性')
      }
    }
  },
  ready() {
    console.log(this.data.attribute)
    this.init()
  }
})

        2.3 小程序样式

.product_type_dia {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.5;
  z-index: 100;
}

.wait_appoint_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1003;
  transform: translateY(100%);
  /* transform: translateY(0); */
  transition: all 0.3s;
  padding: 28rpx 0;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;

}

.wait_appoint_box.active {
  transform: translateY(0);
}

.wait_appoint_main {
  margin: 0 24rpx;
}

.wait_appoint_main_top {
  display: flex;
  align-items: flex-end;
  margin-bottom: 60rpx;
}

.image_icon_product {
  width: 180rpx;
  height: 180rpx;
  border-radius: 14rpx;
  margin-right: 30rpx;
}

.product_type_dia_money {
  flex: 1;
}

.product_type_dia_money .top {
  font-size: 24rpx;
  font-weight: 600;
  color: #F23030;
  margin-bottom: 16rpx;
}

.product_type_dia_money .bottom {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
}

.icon_close_size {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  top: 26rpx;
  right: 32rpx;
}

.wait_appoint_main_type {
  font-size: 26rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 30rpx;
}

.wait_appoint_main_type_left {
  font-size: 26rpx;
  font-weight: 600;
  color: #333333;
  flex: 1;
}

.wait_appoint_main_type_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40rpx;
}

.wait_appoint_main_type_item {
  background: #F6F6F6;
  border-radius: 28rpx;
  padding: 14rpx 26rpx;
  font-size: 24rpx;
  font-weight: 400;
  margin-right: 20rpx;
  border: 1rpx solid transparent;
  color: #333333;

}

.wait_appoint_main_type_item.active {
  background: #FDC500;
  border-radius: 28rpx;
}
.wait_appoint_main_type_item.disabled{
  
}
.wait_appoint_main_type_number {
  display: flex;
  align-items: center;
  margin-bottom: 80rpx;
}

.cart_item_cart_counter {
  display: flex;
  align-items: center;

}


.cart_item_cart_counter .dec {
  width: 34rpx;
  height: 34rpx;
  background: #FCFCFC;
  border-radius: 6rpx;
  text-align: center;
  line-height: 34rpx;
  font-size: 26rpx;
}

.cart_item_cart_counter .graty {
  width: 68rpx;
  height: 56rpx;
  background: #F3F3F3;
  border-radius: 6rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  margin: 0 10rpx;
}

.dia_btn_box {
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 24rpx 0;
}

.dia_btn_red {
  flex: 1;
  text-align: center;
  margin: 0 22rpx 0 24rpx;
  background: linear-gradient(270deg, #F25314 0%, #E60027 100%);
  border-radius: 45rpx;
  padding: 10rpx 0;
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
}

.dia_btn_red_active {
  flex: 1;
  text-align: center;
  margin: 0 22rpx 0 24rpx;
  background: linear-gradient(270deg, #F25314 0%, #E60027 100%);
  border-radius: 45rpx;
  padding: 20rpx 0;

  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
}

.dia_btn_yellow {
  flex: 1;
  margin: 0 24rpx 0 0;
  text-align: center;
  background: linear-gradient(270deg, #FFAE00 0%, #F6730D 100%);
  border-radius: 45rpx;
  padding: 10rpx 0;
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
}
.dia_btn_yellow_active {
  flex: 1;
  margin: 0 24rpx 0 0;
  text-align: center;
  background: linear-gradient(270deg, #FFAE00 0%, #F6730D 100%);
  border-radius: 45rpx;
  padding: 20rpx 0;
  font-size: 24rpx;
  font-weight: 400;
  color: #FFFFFF;
}

        2.4 小程序json

{
  "component": true
}

3.效果展示

        3.1 vue效果展示

        3.2 小程序展示

 

junx666
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sku-algorithm:商品多规格选择-sku算法
05-08
经测，发现有bug，目前正在修复中:dashing_away::dashing_away::dashing_away: 切勿用于生产环境中！！ 如果有解决思路的同学，请给我提PR:handshake::handshake::handshake: 商品多规格选择-前端 sku 算法 相信大家看到这张图片就知道我们这篇文章要讲什么了，没错就是-商品多规格选择的解法。 近来在掘金上面看见大家都在研究“商品多规格选择”的问题，例如晨曦大佬的 在这篇文章里面，大佬写明了如何实现sku的全排列，思路非常的棒，但是并没有紧贴业务场景。真正的业务场景是，我们要根据用户每一次选择的规格，找出剩下可选的规格和不可选的规格，表现在前端页面上：就是将不可选的规格置灰，也就是如下效果（可以点击查看最终效果）： 那么今天我们就来讲讲这个问题的一个解决方法，要讲明白很难，但是我相信你看了这篇文章之后，sku就再也难不倒你了。 什么是 sku 在介绍具体解法之前，我们先来介绍一下什么是sku? sku是会计学中的一个名词，被称作库存单元。说人话？简单来讲就
vue3+Ts+Hook的方式实现商城核心功能sku选择器
weixin_64051447的博客
01-04 1138
Hooks是React等函数式编程框架中非常受欢迎的工具，随着VUE3 Composition API 函数式编程风格的推出，现在也受到越来越多VUE3开发者的青睐，它让开发者的代码具有更高的复用度且更加清晰、易于维护。本文将通过CRMEB商城商品详情sku选择功能了解Hooks的使用基础以及自定义HOOK开发相关的要点，快速入门。Hooks并不是VUE特有的概念，实际上它原本被用于指代一些特定时间点会触发的勾子。
Vue3+TypeScript项目（SKU管理模块）
最新发布
m0_65435970的博客
04-02 1134
注意：在这里切换页码和切换每页数据条数的回调不同是因为：它们都能对函数注入数据，切换页码注入的是点击的页码数，因此我们可以直接使用getHasSku作为他的回调。切换每页数据条数注入的是切换的页码条数，我们希望切换后跳转到第一页，因此使用handler，间接调用getHasSku。无外乎API(type)，组件内发请求拿数据、将数据放到模板中。2：对数据结构的理解（可以将请求回来的数据放到正确的位置上）3：element-plus组件的使用。由于没有返回数据，所以没有ts类型。轮播图 carousel。
加购商品sku选择算法方案 (vue)（淘宝）
唱歌去旅行8的博客
03-04 2736
是
微信小程序商品sku功能实现
m0_72929120的博客
07-13 227
微信小程序商品sku功能实现。
基于Vue的淘宝SKU组合算法
weixin_34233421的博客
12-10 3763
现有需求，当点击颜色时进行校验，若蓝色6.0寸无库存时禁选。 先上效果截图： 当前规格组合中 蓝色6寸 和 黑色中6寸 的库存均为0. 后台返回数据如下图： 实现思路： 例如：当选择蓝色时，进行循环遍历组合。组合结果为: 蓝黑，蓝5.5寸，蓝6.0寸，再进行校验，拿出对应组合的库存，判断库存为0时禁选 第一步： 对当前显示在页面上的spu进行重新组合 this.goodsInfo.s...
基于Vue实现电商SKU组合算法问题
10-16
主要介绍了基于Vue实现电商SKU组合算法问题 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Flask+Vue+小程序电商生态系统.zip
10-18
Flask+Vue+ 小程序全栈开源电商生态系统 技术栈 前端：Vue+Iview+Wxxcx 后端：Flask+Mysql 部署：Nginx+Gunicorn 项目简介 电商整套系统 pc 商家管理后台 + 小程序客户端 详细介绍参考：...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
vue-sku-form 基于 Vue & ElementUI 的电商 SKU 表单配置组件 你或许感兴趣 一款开箱即用的 Vue 中后台管理系统框架
基于SpringBoot和Vue的推荐算法电商平台源码
03-25
项目概述：基于SpringBoot和Vue.js的电商平台，集成了协同过滤推荐算法，致力于提供个性化的网上购物体验。该项目使用Java为主要开发语言，辅以Vue.js、JavaScript、CSS和HTML等技术栈。 技术构成： - Java文件：共...
使用vue实现多规格选择实例（SKU）
10-16
主要介绍了使用vue实现多规格选择实例（SKU），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element实现sku表格
02-12
vue编写，基于elementUI实现的商品库存表格，添加属性和规格，自动生成对应表格
Vue3电商项目实战-购物车模块3【07-购物车页面-列表展示-本地、08-购物车页面-单选操作-本地、09-购物车页面-全选操作-本地、10-购物车页面-删除操作-本地】
m0_52896752的博客
03-04 172
Vue3电商项目实战-购物车模块3【07-购物车页面-列表展示-本地、08-购物车页面-单选操作-本地、09-购物车页面-全选操作-本地、10-购物车页面-删除操作-本地】
Vue2.0开发之——购物车案例-Goods组件封装-商品数量的加减及总数量(53)
我的博客
03-06 1314
Goods点击加减实现修改数量的原理Goods点击增加实现实例Goods点击减少实现实例Footer计算商品总数量moreprops:{//商品id值，将来，使用EventBus方案，把数量传递到App.vue的时候，需要通知App组件，更新哪个商品的数量id:{default:1计算勾选商品的总数量//计算属性//已勾选商品的总数量total(){},定义勾选商品数量属性props: {all:{default:0},渲染到Footer组件中-- 结算按钮 -->
vue 商品选择规格
uuai
01-02 7487
&lt;!doctype html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.
uni-app 商城 的sku算法(vue)
weixin_43545329的博客
06-29 3788
1,之前一种用的history 路由模式 , 小程序调试工具 和pc 微信端 可以 ,但是 安卓 和ios 死活不行 ,后来将 history模式改为 hash模式 手机config ok 可以支持自定义分享 , 但是分享的url 会加#号, 微信会截取#之前的内容, 导致 分享后跳到首页 ...
电商中的sku模块在项目中的实际运用(vue2)
qq_58715846的博客
10-24 1134
sku
怎么在uniapp开发时使用sku插件
wssg1206的博客
10-10 346
下载并使用SKU组件，实现规格展示和交互。，是 uni-app 官方插件生态集中地。SKU---存货单位：库存管理的最小可用单位，通常称为单品。SKU常见于电商领域，对于前端工程师而言，更多关注和。Q：如何评估第三方插件的质量？A：查看插件的，以确保插件具有良好的社区口碑、兼容性、性能和维护状况。
Vue2项目实战：尚品汇（三）商品详情界面、加入购物车成功界面、购物车界面
DogEgg_001的博客
10-09 3245
用户在搜索页点击商品图片就会跳转到商品详情页，商品信息根据商品id向服务器请求数据动态展示出。
微信小程序vue项目接入腾讯地图demo
09-01
微信小程序是一种通过微信平台开发的应用程序，可以在微信环境中直接运行。腾讯地图是腾讯公司开发的地图服务平台，提供了丰富的地图展示和定位功能。 要将腾讯地图接入到微信小程序的Vue项目中，需要进行以下几个步骤： 1. 在Vue项目中安装并引入腾讯地图SDK。可以使用npm或yarn等包管理工具，在项目的根目录下运行以下命令安装： ``` npm install @tencent/txv-map --save ``` 2. 在小程序的配置文件（app.json）中添加使用腾讯地图的权限设置： ``` "permission": { "scope.userLocation": { "desc": "你的位置信息将用于地图定位功能" } } ``` 3. 在Vue组件中引入并使用腾讯地图SDK，可以在需要显示地图的地方插入以下代码： ```vue <template> <view> <map id="map" longitude="113.324520" latitude="23.099994" bindmarkertap="markertap" style="width: 100%; height: 300rpx;" show-location enable-rotate ></map> </view> </template> <script> import { createFrom } from '@tencent/txv-map' export default { methods: { markertap() { console.log('marker tap') } }, created() { // 初始化地图 createFrom({ id: 'map', longitude: 113.324520, latitude: 23.099994 }) } } </script> ``` 以上代码中，我们使用了`<map>`标签来展示地图，并通过`createFrom`方法初始化了地图，并设定了地图的初始经纬度。 4. 在微信小程序的开发者后台中，注册并申请使用腾讯地图的开发者账号，并获取到开发者密钥（key）。在Vue项目中的地图初始化代码中，将开发者密钥替换为你申请到的密钥。 通过以上步骤，你就可以在微信小程序的Vue项目中成功接入腾讯地图，并实现地图的展示和定位功能了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值