egg(67)--商品curd之商品属性与颜色关联，商品与商品类型相关联

商品属性与颜色关联

model

app/model/goods_color.js

module.exports = app => {
    const mongoose = app.mongoose;
    const Schema = mongoose.Schema;

    const GoodsColorSchema = new Schema({
      color_name:{ type:String },
      color_value: { type: String  },
      status: { type: Number,default:1  },    
    }); 
    return mongoose.model('GoodsColor', GoodsColorSchema,'goods_color');
  }

controller

app/controller/admin/goods.js

    async add() {
        //获取所有的颜色值
      var colorResult = await this.ctx.model.GoodsColor.find({});
      await this.ctx.render('admin/goods/add',{
        colorResult:colorResult,
      });
      
    } 

view

app/view/admin/goods/add.html

                                        <li> <span>商品颜色:</span>
                                           
                                            <% for(var i =0;i<colorResult.length;i++){ %>
                                                <input type="checkbox" name="colors[]" value="<%=colorResult[i]._id%>" id="color_<%=colorResult[i]._id%>" /> <label for="color_<%=colorResult[i]._id%>"><%=colorResult[i].color_name%></label>
                                            <%}%>
        
                                         </li>

效果

在增加商品属性的时候，查找到所有的商品颜色

商品与商品类型相关联

router.js

      router.get('/admin/goods', controller.admin.goods.index);
      router.get('/admin/goods/add', controller.admin.goods.add);
      router.get('/admin/goods/goodsTypeAttribute', controller.admin.goods.goodsTypeAttribute);  
      router.post('/admin/goods/doAdd', controller.admin.goods.doAdd);

controller

app/controller/admin/goods.js

    async add() {
        //获取所有的商品类型,对应包装与规格
        var goodsType = await this.ctx.model.GoodsType.find({});
        await this.ctx.render('admin/goods/add',{
        goodsType:goodsType
      });
      
    } 

view

app/view/admin/goods/add.html

1. 根据attr_type显示同的展示形式
2. attr_type== 1 蓝色 input
3. attr_type== 2 红色 textarea
4. attr_type== 3 绿色 select

html

                        <div role="tabpanel" class="tab-pane" id="attribute">
                            <ul class="form_input">
                                <li> <span>商品类型:　</span>
                                    <select name="goods_type_id" id="goods_type_id">
                                        <option value="0">--请选择商品类型--</option>
                                        <%for(var i=0;i<goodsType.length;i++){%>
                                            <option value="<%=goodsType[i]._id%>"><%=goodsType[i].title%></option>
                                        <%}%>
                                    </select>
                                 </li>
                            </ul>
                            <ul class="form_input" id="goods_type_attribute">

                            </ul>
                        </div>

js

$(function(){
    $('#goods_type_id').change(function(){
        // alert($(this).val());
        var cate_id=$(this).val();
        var data='';
        $.get('/admin/goods/goodsTypeAttribute?cate_id='+cate_id,function(response){
            console.log(response.result);
            data=response.result;
            console.log(data.length);
            var str="";
            for(var i=0;i<data.length;i++){
                if(data[i].attr_type==1){
                   str+='<li><span>'+data[i].title+': 　</span><input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'" />  <input type="text" name="attr_value_list[]" /></li>' 
                }else if(data[i].attr_type==2){
                    str+='<li><span>'+data[i].title+': 　</span> <input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'">  <textarea cols="50" rows="3" name="attr_value_list[]"></textarea></li>'                            
                 }else{
                    var arr=data[i].attr_value.split('\n');
                    str+='<li><span>'+data[i].title+': 　</span><input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'">';
                        str+='<select name="attr_value_list[]">';                            
                            for(var j=0;j<arr.length;j++){                               
                                str+='<option value="'+arr[j]+'">'+arr[j]+'</option>';
                            }
                        str+='</select>';
                    str+='</li>';
                }
            }
            $('#goods_type_attribute').html(str);
        })
    })
})

效果