前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >进云-[PC组件]-商品展示组件--示例

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

作者头像
用户2615381
发布2022-04-15 17:17:37
7670
发布2022-04-15 17:17:37
举报
文章被收录于专栏:进云框架

1、展示代码

代码语言:javascript
复制
//注意: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、编辑代码

代码语言:javascript
复制
//这里用了: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、生成页面

代码语言:javascript
复制
//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>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档