商品列表优化

static/nativeComponents/GoodsList/GoodsItem/index.wxml

 <!-- 商品列表item -->
-<view class="goodsItem">
+<view class="goodsItem" style="--proGap2:{{datas.componentData.proGap*2}}rpx;">
+	<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius}}em;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
 		<!-- 商户入口-顶部 -->
 		<view class="merchantsEntrance flex" wx:if="{{datas.componentData['merchantsEntrance'] && datas.componentData['merchantsEntranceType'] == 0}}">
 			<view class="left flex" wx:if="{{items != null}}">
@@ -10,8 +11,12 @@
 			</view>
 		</view>
 		<!-- 商品图片 -->
-	<view class="imgBox slidebox1">
-		<view class="goodsPicture" wx:if="{{items!=null}}">
+		<view class="imgBox" style="background-color:{{datas.componentData['backgroundColorShow']?datas.componentData['backgroundColor']:''}}">
+			<view
+			 class="goodsPicture"
+			 wx:if="{{items!=null}}"
+			 style="padding:{{datas.componentData.imgSize}}"
+			>
 				<!-- 开启售卖 -->
 				<view class="saleWay" wx:if="{{items.saleWay==2 &&getSaleTime(items.saleTime)>0}}">
 					<view class="saleWayBg"></view>
@@ -39,20 +44,20 @@
 		</view>
 		<!-- 商品详情 -->
 		<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
-		<view class="info-top">
-			<text class="name" wx:if="{{datas.componentData['nameShow']}}">
+			<view class="info-top flex">
+				<view class="name" wx:if="{{datas.componentData['nameShow']}}">
 					{{items!=null?items['productName']:'名称'}}
-          </text>
+				</view>
 				<view class="follower-wrap" wx:if="{{datas.componentData['followerShow']}}">
-				<view class="follower-num">
+					<view class="follower-num" style="color:{{datas.componentData['followerColor']?datas.componentData['followerColor']:'#ff9933'}};">
 						{{items!=null?Number(items['totalCollectionCount']) ? Number(items['totalCollectionCount']) : 0:0}}
-					<text class="follower-text">关注人数</text>
 					</view>
+					<view class="follower-text">关注人数</view>
 				</view>
 			</view>
 			<!-- 已售 -->
-		<view>
-			<text wx:if="{{datas.componentData['alSaleShow']}}">已售{{items!=null? items['totalSalesCount'] :0}}件</text>
+			<view class="Sold">
+				<text wx:if="{{datas.componentData['alSaleShow']}}">已售{{items!=null ? items['totalSalesCount'] :0}}件</text>
 				<text wx:if="{{datas.componentData['alSaleShow'] && datas.componentData['collectShow']}}">/</text>
 				<text wx:if="{{datas.componentData['collectShow']}}">剩余{{items!=null && items['qty']!=undefined ? (Number(items['qty']) > 0 ? Number(items['qty'] ): items.oversoldFlag==1?'数量充足':'数量不足') : ''}}</text>
 				<text wx:if="{{items!=null && (Number(items['qty']) ? Number(items['qty']) >= 0 : Number(items['saleQty']) >= 0)}}">件</text>
@@ -68,10 +73,21 @@
 				</view>
 			</view>
 			<!-- 底部 -->
-		<view class="bottom" wx:if="{{datas.componentData['goodsType'] ==1}}">
+			<view class="bottom" wx:if="{{datas.componentData['goodsType'] !=1}}">
 				<!-- 价格 -->
 				<view class="priceItem flex">
-				<text class="price" wx:if="{{datas.componentData['priceShow']}}">￥{{items!=null?Number(items['minPrice']).toFixed(2):0}}</text>
+					<view
+					 class="price flex"
+					 style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;"
+					 wx:if="{{datas.componentData['priceShow']}}"
+					>
+						<text>
+							￥{{items!=null ? items['minPrice']:0}}
+						</text>
+						<text style="font-size:24rpx;color:#999;text-decoration:line-through;" wx:if="{{items!=null&&datas.componentData['priceMarking']&&items['minGoodsSuggestedRetailPrice']&&(items['minPrice']-0<items['minGoodsSuggestedRetailPrice']-0)&&datas.componentData['columnNum']<3}}">
+							￥{{items['minGoodsSuggestedRetailPrice']}}
+						</text>
+					</view>
 					<view class="vipPrice2 flex">
 						<view class="left" wx:if="{{showVipPrice(index)==true}}">
 							￥{{Number(items['minPriceAfterRecommendedCardPriceTable']).toFixed(2)}}
@@ -91,16 +107,24 @@
 					</view>
 				</block>
 				<!-- 立即购买按钮 -->
-			<view class="buy-now" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0 && datas.componentData['paynow']}}">
+				<view
+				 class="buy-now"
+				 style="background-color:#aaa;font-size:24rpx;"
+				 wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0 && datas.componentData['paynow']}}"
+				>
 					已售罄
 				</view>
 				<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}">
-				<text class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
-			</view>
-			<view wx:else class="buy-now">
+					<text wx:if="{{datas.componentData.btnType<6}}" class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
+					<view
+					 wx:else
+					 class="buy-now"
+					 style="background-color:{{datas.componentData.btnColor}};font-size:24rpx;"
+					>
 						{{datas.componentData.btnTest}}
 					</view>
 				</view>
+			</view>
 			<!-- 底部展示标签列表 -->
 			<block wx:if="{{items!=null}}">
 				<view class="marketing flex" wx:if="{{datas.componentData.marketingTag&&datas.componentData.marketingStyle==1&&items.marketingTag}}">
@@ -136,5 +160,6 @@
 				<view class="name">{{items.orgName}}</view>
 			</view>
 		</view>
+	</view>
 </view>
 

static/nativeComponents/GoodsList/GoodsItem/index.wxss

 .flex{
   display: flex;
 }
+.goods-item-child-bd{
+  border: 1px solid var(--border-color);
+}
 image{
   width: 100%;
 }
+.goodsItem{
+  margin-bottom: var(--proGap2);
+}
+.goods-item-child {
+  position: relative;
+  overflow: hidden;
+  background: #ffffff;
+}
 .merchantsEntrance{
   padding: 8rpx 20rpx;
 }
@@ -86,6 +97,10 @@ image{
   position: relative;
   background-color: white;
 }
+.info .info-top{
+  overflow: hidden;
+  justify-content: space-between;
+}
 .info .name{
   flex: 1;
   overflow: hidden;
@@ -154,6 +169,9 @@ image{
 .priceItem {
   align-items: flex-end;
 }
+.priceItem .price{
+  align-items: center;
+}
 .vipPrice2{
   align-items: flex-end;
   margin-top: 12rpx;
@@ -181,6 +199,60 @@ image{
   -ms-border-radius: 12rpx;
   -o-border-radius: 12rpx;
 }
+.Sold{
+  overflow: hidden;
+  color: #999;
+}
+.Sold text{
+  font-size: 0.7em;
+}
+.buy-now {
+  color: #ffffff;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  border-radius: 30rpx;
+  background-color: #333;
+  width: 140rpx;
+  white-space: nowrap;
+  padding: 8rpx 20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-border-radius: 30rpx;
+  -moz-border-radius: 30rpx;
+  -ms-border-radius: 30rpx;
+  -o-border-radius: 30rpx;
+}
+.buy-now-icon {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  font-size: 36rpx;
+}
+.showCommissionTwo {
+  align-items: center;
+  justify-content: center;
+  margin-top: 16rpx;
+  width: 100%;
+  height: 52rpx;
+  font-size: 24rpx;
+  border: 1px solid transparent;
+  border-radius: 26px;
+  overflow: hidden;
+}
+.showCommissionTwo  .commission-box {
+width: 100%;
+height: 100%;
+padding-left: 20rpx;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+.showCommissionTwo i {
+font-size: 28rpx;
+margin-right: 8rpx;
+}
 .marketing {
   align-items: center;
   flex-wrap: wrap;

static/nativeComponents/GoodsList/index.js

@@ -35,7 +35,7 @@ const componentOptions = {
             haveGroupNum: "0",
             maxPrice: "21.00",
             minGoodsId: "99121",
-            minGoodsSuggestedRetailPrice: "18.600000",
+            minGoodsSuggestedRetailPrice: "100.00000",
             minPrice: "21.00",
             minProductGoodsId: "85531",
             minProductGoodsMixid: "daadejqb50l7",
@@ -85,7 +85,7 @@ const componentOptions = {
             haveGroupNum: "0",
             maxPrice: "800.00",
             minGoodsId: "99344",
-            minGoodsSuggestedRetailPrice: "100.000000",
+            minGoodsSuggestedRetailPrice: "300.000000",
             minPrice: "200.00",
             minProductGoodsId: "92690",
             minProductGoodsMixid: "emng64ho4rp3",
@@ -130,7 +130,7 @@ const componentOptions = {
             haveGroupNum: "0",
             maxPrice: "10.00",
             minGoodsId: "99537",
-            minGoodsSuggestedRetailPrice: "10.000000",
+            minGoodsSuggestedRetailPrice: "20.000000",
             minPrice: "10.00",
             minProductGoodsId: "92685",
             minProductGoodsMixid: "lbsmteepkra4",
@@ -299,8 +299,8 @@ const componentOptions = {
         followerColor: "",
         alSaleShow: true,
         followerFontSize: 0.6,
-        paynow: false,
-        priceMarking: true,
+        paynow: true,
+        priceMarking: false,
         goodsSort: 0,
         whetherFindDistributionCommission: true,
         commissionColor: "",

static/nativeComponents/GoodsList/index.wxml

 <!-- 商品列表组件 -->
 <view class="goodsList">
+	<view class="list-wrap heap-wrap" style="background-color:{{datas.componentData['heapBgColorShow'] ? datas.componentData['heapBgColor'] : ''}};border-radius:{{datas.componentData['cardBorderRadius']*2}}rpx;">
 		<!-- 头部 -->
-	<view class="tops flex">
+		<view class="tops flex" style="padding:{{(datas.componentData['titleIcon'] || (datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top')) ?'0rpx 0rpx 0rpx 10rpx' : ''}};margin-bottom:{{datas.componentData['titleCardGap']*2}}rpx">
 			<view class="left flex">
 				<view class="img" wx:if="{{datas.componentData['titleIcon']}}">
 					<image mode="widthFix" src="http://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/ppefWK8BS6.png?x-oss-process=image/resize,limit_1,w_150,h_150" />
@@ -32,7 +33,7 @@
 				 indexs="{{index}}"
 				></goods-item>
 			</view>
-
+		</view>
 	</view>
 </view>
 

static/nativeComponents/GoodsList/index.wxss

@@ -4,6 +4,13 @@
 image{
   width: 100%;
 }
+.goodsList{
+  font-size: 32rpx;
+  position: relative;
+}
+.goodsList .heap-wrap{
+  padding: 20rpx;
+}
 .tops{
   justify-content: space-between;
   align-items: center;