库存保有单位 (Stock keeping Unit 或者SKU)是对每一个产品和服务的唯一标示符,该系统的使用SKU的值根于数据管理,使公司能够跟踪系统,如仓库和零售商店或产品的库存情况。

在开发商城时,我们需要对商品的sku进行判断,当用户选择完一个规格后,去判断剩下的未选规格是否继续选择,可提高用户体验。

线上demo:https://my.weblf.cn/alone_page/pages/sku.html

线上demo2:https://my.weblf.cn/alone_page/pages/sku2.html

页面效果截图:

主页面全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,target-densitydpi=400" >
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
  <title>vue的sku前端实现(商城选择规格)</title>
  <link rel="stylesheet" href="../statics/css/reset.css" id='reset'>
  <link rel="stylesheet/less" type="text/css" href="../statics/css/sku.less?ver=1">
  <script type="text/javascript" src="../statics/js/public.js?ver=2" id='public'></script>
  <script type="text/javascript" src="../statics/js/less2.5.3.min.js" id='less'></script>
  <script type="text/javascript" src="../statics/js/vue2.6.11.js"></script>
  <!-- mint-ui -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
</head>
<body>
  <div id="app" v-cloak :style="{'padding-top':isWeiXin?'0rem':'3rem'}">
    <!-- 头部 -->
    <div class="now_page_head" ref="now_page_head" v-if="!isWeiXin">
      vue的sku前端实现(商城选择规格)
      <img src="../statics/images/back.png" class="back"/>
    </div>
    <!-- 页面的主要内容 -->
    <section class="content">
      <div class="wrap wrap-sku">
        <div class="product-box">
          <!-- 库存 -->
          <div class="stock_box">
            <p class="stock_box_title">库存状态</p>
            <p class="stock_info" v-for="(item,index) in simulatedDATA.difference">
              <span>{{item.difference}}:</span>
              <span>{{item.stock}}</span>
            </p>
          </div>
          <!-- 规格选择区 -->
          <div class="product-content">
            <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications" :key="n">
              <p>{{ProductItem.name}}</p>
              <ul class="product-footerlist clearfix">
                <li
                  v-for="(oItem,index) in ProductItem.item"
                  :key="index"
                  v-on:click="specificationBtn(oItem.name,n,$event,index)"
                  v-bind:class="[oItem.isShow?'':'noneActive',subIndex[n] == index?'productActive':'']"
                >{{oItem.name}}</li>
              </ul>
            </div>
            <p v-if="price" class="price">¥{{price}}</p>
          </div>
          <div class="product-footer">
            <a href="javascript:" rel="external nofollow">立即购买</a>
          </div>
        </div>
      </div>
    </section>

    <!-- 页面结束 -->
  </div>
</body>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      showSpinner: false,
      isWeiXin: window.TS_WEB.isWeiXin,
      isApps: window.TS_WEB.isApp,
      simulatedDATA: {
        //模拟后台返回的数据 多规格
        difference: [
            //所有的规格可能情况都在这个数组里
          {
            id: "19",
            price: "200.00",
            stock: "19", //库存
            difference: "100,白色"//此规格的属性键值
          },
          {
            id: "20",
            price: "100.00",
            stock: "29",
            difference: "200,白色"
          },
          {
            id: "21",
            price: "300.00",
            stock: "10",
            difference: "100,黑色"
          },
          {
            id: "22",
            price: "900.00",
            stock: "0",
            difference: "200,黑色"
          },
          {
            id: "25",
            price: "90.00",
            stock: "0",
            difference: "100,蓝色"
          },
          {
            id: "26",
            price: "40.00",
            stock: "20",
            difference: "200,蓝色"
          }
        ],
        //展示给用户看的规格
        specifications: [
          {
            //这里是要被渲染字段
            name: "尺寸",
            item: [
              {
                name: "100"
              },
              {
                name: "200"
              }
            ]
          },
          {
            name: "颜色",
            item: [
              {
                name: "白色"
              },
              {
                name: "蓝色"
              },
              {
                name: "黑色"
              }
            ]
          }
        ]
      },
      selectArr: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是单规格,所以这里定义数组来判断
      price: "" //选中规格的价钱
    },
    components: {},
    computed: {},
    methods: {
      //手动点击选择
      specificationBtn: function(item, n, event, index) { //属性值、规格项、
        var self = this;
        if (self.selectArr[n] != item) {
          self.selectArr[n] = item; //当前规格选中,赋值为选项的名字(蓝色、黑色)
          self.subIndex[n] = index; //设置此项为选中
        } else {
          self.selectArr[n] = "";
          self.subIndex[n] = -1; //去掉选中的颜色
        }
        self.checkItem();
      },
      //处理已选择列表
      checkItem: function() {
        var self = this;
        var option = self.simulatedDATA.specifications;
        var result = []; //定义数组储存被选中的值
        for (var i in option) {
          //初始化被选中的数组,如果此类别没被选中,则赋值为空,如果有3个类别,则数组长度为3
          result[i] = self.selectArr[i] ? self.selectArr[i] : "";
        }
        //便利每个类别的每个小项
        for (var i in option) {
          var last = result[i]; //把选中的值存放到字符串last去
          for (var k in option[i].item) {
            result[i] = option[i].item[k].name; //获取每个小项的值(如:红色、蓝色),并临时存放于result[i],存在直接覆盖,不存在往里面添加name值
            option[i].item[k].isShow = self.isMay(result); //result数组每一次修改都将计算一次是否可以选择,添加字段isShow来判断是否可以选择
          }
          result[i] = last; //还原,目的是记录点下去那个值,避免下一次执行循环时被覆盖
        }
        //如果可获取sku,则显示当前sku价格
        if (this.shopItemInfo[result]) {
          this.price = this.shopItemInfo[result].price || "";
        }
        self.$forceUpdate(); //重绘
      },
      //判断每个小项是否可以选择
      isMay: function(result) {
        for (var i in result) {
          if (result[i] == "") {
            return true; //如果数组里有为空的值,则表示未被全部选择,无法获取sku,直接返回true
          }
        }
        //result选满,可获取sku,根据初始化时shopItemInfo的difference[i].difference键值对(200,蓝色)可获取sku信息
        return this.shopItemInfo[result].stock == 0 ? false : true; //匹配选中的数据的库存,若不为空返回true反之返回false
      }
    },
    created() {
      document.title='vue的sku前端实现(商城选择规格)'
      let obj={}
      //便利sku
      for (var i in this.simulatedDATA.difference) {
        //修改数据结构格式,改成键值对的方式,以方便和选中之后的值进行匹配
        //键:由属性拼接而成,值:相对应sku的信息
        obj[this.simulatedDATA.difference[i].difference] = this.simulatedDATA.difference[i];
      }
      //赋值给全局变量
      this.shopItemInfo=obj
      this.checkItem()
    }
  })
</script>
</html>

 

Logo

前往低代码交流专区

更多推荐