[PC组件]-商品展示组件--示例

云小米

1、展示代码

//注意：ng-init="get_data(pagedata.extradata,'goods','jy_weishop/goods.get_goods//num='+{item}.params.num)"//这个是页面获取数据的方法；第三个参数是要获取数据的页面路径，注意，这里是管理端展示的代码，这个路径必须的管理端的页面路径//读取数据pagedata.extradata.goods，这里由于传过来的是在list里面，商品数据就是：pagedata.extradata.goods.list<div class="row margin0" style="margin-left:{{{item}.style.paddingleft}}%;margin-right:{{{item}.style.paddingright}}%;margin-top:{{{item}.style.paddingtop}}%;padding:{{{item}.style.padding}}px;background:{{{item}.style.background}}"><div class="jinyun-app-list" ng-init="get_data(pagedata.extradata,'goods','jy_weishop/goods.get_goods//num='+{item}.params.num)"><div ng-if="{item}.params.type==1" class="fui-goods-group block" ng-if="pagedata.extradata.goods.list && pagedata.extradata.goods.list.length>0"> <div class="fui-goods-item" ng-repeat="item in pagedata.extradata.goods.list"><a data-nocache="true" style="position: relative;"><div class="image" style="background-image: url('{{tomedia(item.image) || '../core/resource/images/noplugin.jpg'}}');"></div></a><a  href="#" target="_blank"><div class="detail"><div class="name" style="font-size:15px;line-height:32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.title}} <span class="r" style="font-size:12px;color:red">{{item.time}}</span></div><div class="price" style="margin-top: 0.3rem"><span class="jylabel jylabel-red">限时特卖</span><span class="text blod"> ￥{{item.price || '0.00'}}</span><span ng-if="item.price==0" class="buy disabled r" style="background:#999">限时免费</span><button ng-if="item.price>0" class="buy r"> 购买</button></div><div class="price" style="margin-top: 0.3rem"><span class="text delete" style="color: #bebebe;">原价￥{{item.originalprice}}</span><span class="purchases">{{item.salenum || 0}}人购买</span></div></div></a></div></div><div ng-if="{item}.params.type!=1" class="fui-goods-group block"> <div class="fui-goods-item" ng-repeat="{item}x in {item}.params.items"><a data-nocache="true" style="position: relative;"><div class="image" style="background-image: url('{{tomedia({item}x.image) || '../core/resource/images/noplugin.jpg'}}');"></div></a><a  href="#" target="_blank"><div class="detail"><div class="name" style="font-size:15px;line-height:32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{{item}x.title}}</div><div class="price" style="margin-top: 0.3rem"><span class="jylabel jylabel-red">限时特卖</span><span class="text blod"> ￥{{{item}x.price || '0.00'}}</span><span ng-if="{item}x.price==0" class="buy disabled r" style="background:#999">限时免费</span><button ng-if="{item}x.price>0" class="buy r"> 购买</button></div><div class="price" style="margin-top: 0.3rem"><span class="text delete" style="color: #bebebe;">原价￥{{{item}x.originalprice}}</span><span class="purchases">{{{item}x.salenum || 0}}人购买</span></div></div></a></div></div></div></div>2、编辑代码

//这里用了：ng-click="unitfunc.choose_many(pagedata.current_edit,items,'jy_weishop/goods.get_goods//getinfo=1')" 一个选择商品的方法；在非调用的情况下，支持自己选择商品<div class="row" >        <button ng-click="pagedata.show_edit=false;" class="close" style="padding:2px" type="button">×</button>        <ul class="nav nav-tabs">                <li ng-class="{'active':pagedata.edit_detail.op !='s'}"><a href="javascript:;" ng-click="pagedata.edit_style.op='y'">基本设置</a></li>        </ul></div><div class="row"><div class="form-group">    <div class="col-sm-2 control-label">调用?</div>    <div class="col-sm-10">        <label class="radio-inline"><input type="radio" name="type" value="0" class="diy-bind" ng-checked="pagedata.current_edit.type=='0' || !pagedata.current_edit.type" ng-model="pagedata.current_edit.type"> 手动添加商品</label>        <label class="radio-inline"><input type="radio" name="type" value="1" class="diy-bind" ng-checked="pagedata.current_edit.type=='1'" ng-model="pagedata.current_edit.type"> 调用商品</label>        </div>    </div></div><div class="form-group" ng-show="pagedata.current_edit.type=='1'">    <div class="col-sm-2 control-label">条数</div>    <div class="col-sm-10">        <div class="input-group form-group" style="margin: 0;">            <input class="form-control input-sm diy-bind" ng-model="pagedata.current_edit.num" data-placeholder="" placeholder="请输入数量" value="{{pagedata.current_edit.num}}" />        </div>        <div class="help-block">修改个数，保存后才有效</div>    </div></div><div class="pc-model-h5" ng-show="pagedata.current_edit.type!=1"><i class="fa fa-chevron-circle-down"></i> 商品列表</div><div class="form-group" ng-show="pagedata.current_edit.type!=1">        <label class="col-xs-12 col-sm-3 col-md-2 right-label">选择商品</label>        <div class="col-xs-12 col-sm-8 col-lg-9" ng-init="checkarray(pagedata.current_edit,items)">                <div class="input-group">                        <div style="background: #eee;line-height: 36px;height:36px"><span ng-repeat="item in pagedata.current_edit.items track by $index" style="padding: 5px;">{{item.title}};</span></div>                        <span class="input-group-btn" >                                <button class="btn btn-gray" type="button" ng-click="unitfunc.choose_many(pagedata.current_edit,items,'jy_weishop/goods.get_goods//getinfo=1')"><i class="fa fa-external-link"></i>选择商品</button>                        </span>                </div>                <div class="input-group multi-img-details" ng-if="pagedata.current_edit.items">                        <div class="multi-item" style="height:auto;" ng-repeat="item in pagedata.current_edit.items track by $index">                                <img ng-if="item.image" ng-src="{{tomedia(item.image) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" style="width:100px;height:100px">                                <div ng-if="item.title" style="text-align:center">{{item.{option_title}}}</div>                                <em class="close" title="删除" ng-click="pagedata.current_edit.items.splice($index,1)">×</em>                        </div>                </div>                <div class="help-block"></div>        </div>        <script>        if(!scope.unitfunc.choose_many){                scope.unitfunc.choose_many=function(to,value,url){                        if(url.indexOf('/')<0){                                url='/'+url;                        }                        scope.modal_func(function(res){                                if(!Array.isArray(scope.pagedata.current_edit.items)){                                        scope.pagedata.current_edit.items=[];                                        scope.pagedata.current_edit.items.push(res);                                }else{                                        var has=false;                                        scope.pagedata.current_edit.items.forEach(function(item){                                                if(JSON.stringify(item)==JSON.stringify(res)){                                                        has=true;                                                }                                        });                                        if(!has){                                                scope.pagedata.current_edit.items.push(res);                                        }                                }                                console.log(scope.pagedata.current_edit.items);                        },'',url);                }        }        </script></div>3、生成页面
//ng-init="get_data(pagedata.extradata,'goods','jy_weishop/goods.get_goods//num={params.num}')"//这里读取的客户的路径<div class="row margin0" style="margin-left:{style.paddingleft}%;margin-right:{style.paddingright}%;margin-top:{style.paddingtop}%;padding:{style.padding}px;background:{style.background}">        <div class="jinyun-app-list" ng-init="get_data(pagedata.extradata,'goods','jy_weishop/goods.get_goods//num={params.num}')">                <div ng-if="{params.type}==1" class="fui-goods-group block" ng-if="pagedata.extradata.goods.list && pagedata.extradata.goods.list.length>0">                         <div class="fui-goods-item" ng-repeat="item in pagedata.extradata.goods.list">                                                <a data-nocache="true" style="position: relative;">                                                        <div class="image" style="background-image: url('{{tomedia(item.image) || '../core/resource/images/noplugin.jpg'}}');">                                                        </div>                                                </a>                                                <a  href="#" target="_blank">                                                        <div class="detail">                                                                <div class="name" style="font-size:15px;line-height:32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.title}} <span class="r" style="font-size:12px;color:red">{{item.time}}</span></div>                                                                <div class="price" style="margin-top: 0.3rem">                                                                        <span class="jylabel jylabel-red">限时特卖</span>                                                                        <span class="text blod"> ￥{{item.price || '0.00'}}</span>                                                                        <span ng-if="item.price==0" class="buy disabled r" style="background:#999">限时免费</span>                                                                        <button ng-if="item.price>0" class="buy r"> 购买</button>                                                                </div>                                                                <div class="price" style="margin-top: 0.3rem">                                                                        <span class="text delete" style="color: #bebebe;">原价￥{{item.originalprice}}</span>                                                                        <span class="purchases">{{item.salenum || 0}}人购买</span>                                                                </div>                                                        </div>                                                </a>                        </div>                </div>                <div ng-if="{params.type}!=1" class="fui-goods-group block">                         <div class="fui-goods-item" ng-repeat="item in {params.items}">                                                <a data-nocache="true" style="position: relative;">                                                        <div class="image" style="background-image: url('{{tomedia(item.image) || '../core/resource/images/noplugin.jpg'}}');">                                                        </div>                                                </a>                                                <a  href="#" target="_blank">                                                        <div class="detail">                                                                <div class="name" style="font-size:15px;line-height:32px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">{{item.title}}</div>                                                                <div class="price" style="margin-top: 0.3rem">                                                                        <span class="jylabel jylabel-red">限时特卖</span>                                                                        <span class="text blod"> ￥{{item.price || '0.00'}}</span>                                                                        <span ng-if="item.price==0" class="buy disabled r" style="background:#999">限时免费</span>                                                                        <button ng-if="item.price>0" class="buy r"> 购买</button>                                                                </div>                                                                <div class="price" style="margin-top: 0.3rem">                                                                        <span class="text delete" style="color: #bebebe;">原价￥{{item.originalprice}}</span>                                                                        <span class="purchases">{{item.salenum || 0}}人购买</span>                                                                </div>                                                        </div>                                                </a>                        </div>                </div>        </div></div>