[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>


返回

条结果""