vue版添加商品多规格sku实现源码

今天无意中在网上看到的代码,觉得效果不错,于是收藏一下,分享给需要的朋友们学习之用。添加商品多规格几乎是每个商城必备的功能。但每个人都有自己不同的实现原理。以下源码实现的原理是根据多个规格和多个规格对应的属性组合成数列的原理。

截图预览:

vue版添加商品多规格sku实现源码

vue版添加商品多规格sku实现源码

代码片段:

  1. this.zum=[];
  2. for (let index in this.k_ruledata) {//循环的次数  第一张图是 两次  第二张图是 三次
  3.     this.getDate(this.zum,this.k_ruledata[index]);
  4.   }
  1. getDate(zum,first){//公共存的集合  第一个集合
  2.                 if(zum.length!=0){
  3.                     let item = first.k_moreruledata;
  4.                     let zumto=[];
  5.                     for(let index in zum){
  6.                         for(let to in item){
  7.                             let ss={};
  8.                             ss.rule_name=zum[index].rule_name+"/"+first.k_rule_name+":"+item[to].rule_name;
  9.                             zumto.push(ss);
  10.                         }
  11.                     }
  12.                     this.zum=zumto;
  13.                 }else{
  14.                     let item = first.k_moreruledata;
  15.                     for(let index in item){
  16.                         let ss={};
  17.                         ss.rule_name=first.k_rule_name+":"+item[index].rule_name;
  18.                         zum.push(ss);
  19.                     }
  20.                     this.zum=zum;
  21.                 }
  22.              },

具体使用方法:

①在components目录下建立一个模板文件。

  1. <template>
  2.     <div>
  3.         <a-modal
  4.                 :destroyOnClose="true"
  5.                 :visible="visible"
  6.                 width="1000px"
  7.                 :closable="false"
  8.                 okText="确定"
  9.                 cancelText="取消"
  10.                 centered
  11.                 :confirmLoading="btnLoading"
  12.                 @ok="save"
  13.                 @cancel="visible=false"
  14.                 title="商品规格添加"
  15.         >
  16.             <div style="overflow-y: scroll;height: 400px">
  17.                 <a-form layout="inline" :form="form" style="margin-bottom: 15px">
  18.                     <a-row style="display: flex;flex-direction: row">
  19.                         <div v-if="rule">
  20.                             <span style="margin-right: 10px">规则名称:</span>
  21.                             <a-input placeholder="填写规格名称"
  22.                                      v-for="(item,index) in ruledata"
  23.                                      :key="index"
  24.                                      v-model="item.rule_name"
  25.                                      @blur="k_addrule(item,$event)"
  26.                                      style="width: 150px;height: 40px;margin-right: 10px">
  27.                                 <a-icon slot="suffix" type="close-circle"
  28.                                         @click="deletrule(index)"
  29.                                         v-if="item.rule_name!=''"/>
  30.                             </a-input>
  31.                         </div>
  32.                         <a-button type="dashed"
  33.                                   icon="plus"
  34.                                   @click="addRule"
  35.                                   style="width: 150px;height: 40px">添加新规则
  36.                         </a-button>
  37.                     </a-row>
  38.                     <a-row v-for="(item,index) in k_ruledata" :key="index"
  39.                             style="display: flex;flex-direction: row;margin-top: 20px;align-items: center;">
  40.                         <div style="float:left;display: flex;flex-direction: row">
  41.                             <span style="margin-right: 10px;margin-top: 5px">{{item.k_rule_name}}:</span>
  42.                             <div
  43.                                v-if="item.k_rule"
  44.                                v-for="(itemto,indexto) in item.k_moreruledata"
  45.                                :key="indexto"
  46.                              style="margin-right: 10px;width: 80px;height: 30px;
  47.                             display: flex;flex-direction: row;
  48.                             color:#578CE5 ;
  49.                             border-radius: 4px;border: 1px solid #578CE5">
  50.                                 <div style="flex: 2;border-right: 1px solid #578CE5;text-align: center;line-height: 30px ">
  51.                                     {{itemto.rule_name}}
  52.                                 </div>
  53.                                 <div style="flex: 1;text-align: center;line-height: 30px">X</div>
  54.                             </div>
  55.                         </div>
  56.                         <a-input placeholder="设置属性"
  57.                                  v-model="item.provaluse"
  58.                                  style="width: 150px;height: 30px;margin-right: 10px"/>
  59.                         <a-button type="primary"
  60.                                   @click="k_addpro(item)"
  61.                                   style="width: 60px;height: 30px">添加
  62.                         </a-button>
  63.                     </a-row>
  64.                     <a-button type="primary" style="margin-top: 20px;width: 600px" @click="autodata">生成</a-button>
  65.                     <!--自动生成的数据列表-->
  66.                     <div v-if="autodata_rule">
  67.                     <a-row style="margin-top: 20px" v-for="(item,index) in autoruledata" :key="index">
  68.                         <a-col :span="3" style="text-align: center;">
  69.                             <div style="margin-top: 10px"> {{item.rule_name}}</div>
  70.                         </a-col>
  71.                         <a-col :span="4">
  72.                             <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="金额">
  73.                                 <a-input-number
  74.                                         v-decorator="[
  75.           'goods_cost',
  76.           {rules: [{ required: true, message: '请填写金额' }]}
  77.         ]"
  78.                                         :min="0"
  79.                                 ></a-input-number>
  80.                             </a-form-item>
  81.                         </a-col>
  82.                         <a-col :span="4">
  83.                             <a-form-item :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" label="库存">
  84.                                 <a-input-number
  85.                                         v-decorator="[
  86.           'goods_cost',
  87.           {rules: [{ required: true, message: '请填写库存' }]}
  88.         ]"
  89.                                         :min="0"
  90.                                 ></a-input-number>
  91.                             </a-form-item>
  92.                         </a-col>
  93.                         <a-col :span="4">
  94.                             <a-form-item :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }" label="成本价">
  95.                                 <a-input-number
  96.                                         v-decorator="[
  97.           'goods_cost',
  98.           {rules: [{ required: true, message: '请填写成本价' }]}
  99.         ]"
  100.                                         :min="0"
  101.                                 ></a-input-number>
  102.                             </a-form-item>
  103.                         </a-col>
  104.                     </a-row>
  105.                     </div>
  106.                 </a-form>
  107.             </div>
  108.         </a-modal>
  109.         <a-icon type="plus" style="font-size:20px;color:#3E86ED;margin-left: 10px" @click="toadd"></a-icon>
  110.     </div>
  111. </template>
  112. <script>
  113.     export default {
  114.         props: {
  115.             ugro_id: {//订单ID
  116.                 type: Number,
  117.                 default: 0
  118.             },
  119.         },
  120.         name: "",
  121.         data() {
  122.             return {
  123.                 visible: false,
  124.                 btnLoading: false,
  125.                 form: this.$form.createForm(this),
  126.                 rule: false,//规格
  127.                 ruledata: [],
  128.                 k_ruledata: [],//一个规格--》对应 多个属性
  129.                 autodata_rule:false,
  130.                 autoruledata:[],//自动生成的数据
  131.                 zum:[],
  132.             }
  133.         },
  134.         mounted() {
  135.         },
  136.         methods: {
  137.             toadd() {//添加规格
  138.                 this.visible = true;
  139.                 this.rule=false;
  140.                 this.autodata_rule=false;
  141.                 this.ruledata = [];//暂时
  142.                 this.k_ruledata=[];
  143.                 this.autoruledata=[];
  144.                 this.zum=[];
  145.             },
  146.             //添加规则
  147.             addRule() {
  148.                 //添加一个数据
  149.                 let ss = {rule_id: '', rule_name: ''};
  150.                 this.ruledata.push(ss);
  151.                 this.rule = true;
  152.             },
  153.             //删除规则
  154.             deletrule(index) {
  155.                 this.$confirm({
  156.                     content: "确认删除这个规则名称?",
  157.                     okText: "确定",
  158.                     title: "提示",
  159.                     okType: "danger",
  160.                     centered: true,
  161.                     cancelText: "取消",
  162.                     onOk: () => {
  163.                         this.ruledata.splice(index, 1);
  164.                         //对应删除--相应的属性
  165.                         k_ruledata.split(index,1);
  166.                     }
  167.                 });
  168.             },
  169.             k_addrule(item,event) {
  170.                 console.log(item);
  171.                 let ss={
  172.                         k_rule_id:item.rule_id,
  173.                         k_rule_name:item.rule_name,
  174.                         k_rule:false,
  175.                         k_provaluse:'',//属性
  176.                         k_moreruledata:[],
  177.                        }
  178.                   this.k_ruledata.push(ss);
  179.             },
  180.             k_addpro(item){//添加属性
  181.                 let ss = {rule_id: '', rule_name: item.provaluse};
  182.                 item.k_moreruledata.push(ss);
  183.                 item.k_rule=true;
  184.                 //添加完成后
  185.                 item.provaluse="";
  186.             },
  187.             autodata() {//自动生成
  188.                 //autoruledata
  189.                 if (this.k_ruledata.length < 0) {
  190.                     this.$message.info('请先添加');
  191.                     return;
  192.                 }
  193.                  this.zum=[];
  194.                 for (let index in this.k_ruledata) {//循环的次数
  195.                     this.getDate(this.zum,this.k_ruledata[index]);
  196.                   }
  197.                 for(let index in this.zum){
  198.                     this.zum[index].rule_id = "";
  199.                     this.zum[index].rule_cost = '';//金额
  200.                     this.zum[index].rule_unit = '';//库存
  201.                     this.zum[index].rule_price = '';//成本价
  202.                  }
  203.                 this.autoruledata=this.zum;
  204.                 console.log(this.autoruledata);
  205.                 this.autodata_rule=true;
  206.             },
  207.               getDate(zum,first){//公共存的集合  第一个集合
  208.                  if(zum.length!=0){
  209.                      let item = first.k_moreruledata;
  210.                      let zumto=[];
  211.                      for(let index in zum){
  212.                          for(let to in item){
  213.                              let ss={};
  214.                              ss.rule_name=zum[index].rule_name+"/"+first.k_rule_name+":"+item[to].rule_name;
  215.                              zumto.push(ss);
  216.                          }
  217.                      }
  218.                      this.zum=zumto;
  219.                  }else{
  220.                      let item = first.k_moreruledata;
  221.                      for(let index in item){
  222.                          let ss={};
  223.                          ss.rule_name=first.k_rule_name+":"+item[index].rule_name;
  224.                          zum.push(ss);
  225.                      }
  226.                      this.zum=zum;
  227.                  }
  228.               },
  229.             save() {
  230.             },
  231.         }
  232.     }
  233. </script>
  234. <style lang="scss" scoped>
  235. </style>

②在添加商品多规格的地方引入。

  1. import specsgoods from "@/components/specsgoods"
  2. components: { specsgoods},
  1. <!--添加规格-->
  2. <template slot="space" slot-scope="item">
  3.         <specsgoods :ugro_id="item.ugro_id">
  4.         </specsgoods>
  5. </template>

内容转自CSDN,原文链接:https://blog.csdn.net/shihuiyun/article/details/97272943,希望对需要的朋友们有所帮助。

波波
  • 版权声明: 本文源自 CSDN, 于3个月前,由整理发表,共 11043字。
  • 原文链接:点此查看原文
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!