Skip to content

M
mayi-mp-shop
Commit 2bc21767 by 李嘉林
Options

商品列表优化

parent 456a3642
Showing with 249 additions and 144 deletions
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item --> <!-- 商品列表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}}"> <view class="merchantsEntrance flex" wx:if="{{datas.componentData['merchantsEntrance'] && datas.componentData['merchantsEntranceType'] == 0}}">
<view class="logo"> <view class="left flex" wx:if="{{items != null}}">
<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" /> <view class="logo">
</view> <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" />
<view class="name">{{items.orgName}}</view>
</view>
</view>
<!-- 商品图片 -->
<view class="imgBox slidebox1">
<view class="goodsPicture" wx:if="{{items!=null}}">
<!-- 开启售卖 -->
<view class="saleWay" wx:if="{{items.saleWay==2 &&getSaleTime(items.saleTime)>0}}">
<view class="saleWayBg"></view>
<view>
6545646
</view>
</view>
<!-- 商品角标 -->
<view
class="angleSign"
style="width:{{datas.componentData.angleSignSize}}%;height:{{datas.componentData.angleSignSize}}%;"
wx:if="{{datas.componentData['angleSign'] && datas.componentData['angleSignImg']}}"
>
<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" />
</view>
<!-- 商品主图 -->
<image mode="widthFix" src="https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700" />
<!-- 售罄遮罩 -->
<view class="whiteBg" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0}}">
<view class="cover">
<image mode="widthFix" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
</view>
</view>
</view>
</view>
<!-- 商品详情 -->
<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="info-top">
<text class="name" wx:if="{{datas.componentData['nameShow']}}">
{{items!=null?items['productName']:'名称'}}
</text>
<view class="follower-wrap" wx:if="{{datas.componentData['followerShow']}}">
<view class="follower-num">
{{items!=null?Number(items['totalCollectionCount']) ? Number(items['totalCollectionCount']) : 0:0}}
<text class="follower-text">关注人数</text>
</view> </view>
<view class="name">{{items.orgName}}</view>
</view> </view>
</view> </view>
<!-- 已售 --> <!-- 商品图片 -->
<view> <view class="imgBox" style="background-color:{{datas.componentData['backgroundColorShow']?datas.componentData['backgroundColor']:''}}">
<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>
</view>
<!-- 标签 -->
<view class="marketing flex" wx:if="{{datas.componentData['marketingTag']&&datas.componentData['marketingStyle']==0&&items.marketingTag}}">
<view <view
class="item" class="goodsPicture"
wx:for="{{items.marketingTag}}" wx:if="{{items!=null}}"
wx:key="index" style="padding:{{datas.componentData.imgSize}}"
> >
{{item.label}} <!-- 开启售卖 -->
</view> <view class="saleWay" wx:if="{{items.saleWay==2 &&getSaleTime(items.saleTime)>0}}">
</view> <view class="saleWayBg"></view>
<!-- 底部 --> <view>
<view class="bottom" wx:if="{{datas.componentData['goodsType'] ==1}}"> 6545646
<!-- 价格 -->
<view class="priceItem flex">
<text class="price" wx:if="{{datas.componentData['priceShow']}}">￥{{items!=null?Number(items['minPrice']).toFixed(2):0}}</text>
<view class="vipPrice2 flex">
<view class="left" wx:if="{{showVipPrice(index)==true}}">
￥{{Number(items['minPriceAfterRecommendedCardPriceTable']).toFixed(2)}}
</view> </view>
<view class="vipIcon line-clamp1" wx:if="{{showVipTag(index)==true}}"> </view>
{{items["recommendedCardMinPricePriceTableName"]}} <!-- 商品角标 -->
<view
class="angleSign"
style="width:{{datas.componentData.angleSignSize}}%;height:{{datas.componentData.angleSignSize}}%;"
wx:if="{{datas.componentData['angleSign'] && datas.componentData['angleSignImg']}}"
>
<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" />
</view>
<!-- 商品主图 -->
<image mode="widthFix" src="https://test-bucket-ant.oss-cn-shanghai.aliyuncs.com/product/yWDmitPPmD.jpg?x-oss-process=image/resize,limit_1,w_700" />
<!-- 售罄遮罩 -->
<view class="whiteBg" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0}}">
<view class="cover">
<image mode="widthFix" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
</view> </view>
</view> </view>
</view> </view>
<!-- 收益样式一 --> </view>
<block class="" wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}"> <!-- 商品详情 -->
<view class="showCommission" wx:if="{{datas.componentData.commissionStyle==0}}"> <view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="commission-box"> <view class="info-top flex">
<text>收益</text> <view class="name" wx:if="{{datas.componentData['nameShow']}}">
<text>￥{{Number(items['minProductGoodsCommission']).toFixed(2)}}</text> {{items!=null?items['productName']:'名称'}}
</view>
<view class="follower-wrap" wx:if="{{datas.componentData['followerShow']}}">
<view class="follower-num" style="color:{{datas.componentData['followerColor']?datas.componentData['followerColor']:'#ff9933'}};">
{{items!=null?Number(items['totalCollectionCount']) ? Number(items['totalCollectionCount']) : 0:0}}
</view> </view>
<view class="follower-text">关注人数</view>
</view> </view>
</block>
<!-- 立即购买按钮 -->
<view class="buy-now" 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>
<view wx:else class="buy-now"> <!-- 已售 -->
{{datas.componentData.btnTest}} <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>
</view> </view>
</view> <!-- 标签 -->
<!-- 底部展示标签列表 --> <view class="marketing flex" wx:if="{{datas.componentData['marketingTag']&&datas.componentData['marketingStyle']==0&&items.marketingTag}}">
<block wx:if="{{items!=null}}">
<view class="marketing flex" wx:if="{{datas.componentData.marketingTag&&datas.componentData.marketingStyle==1&&items.marketingTag}}">
<view <view
class="item" class="item"
wx:for="{{items.marketingTag}}" wx:for="{{items.marketingTag}}"
...@@ -112,28 +72,93 @@ ...@@ -112,28 +72,93 @@
{{item.label}} {{item.label}}
</view> </view>
</view> </view>
</block> <!-- 底部 -->
<!-- 收益样式二 --> <view class="bottom" wx:if="{{datas.componentData['goodsType'] !=1}}">
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}"> <!-- 价格 -->
<view class="showCommissionTwo flex" wx:if="{{datas.componentData.commissionStyle==1}}"> <view class="priceItem flex">
<view class="commission-box"> <view
<text class="iconfont-common common-iconfenxiang"> class="price flex"
赚￥ style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;"
<text style="font-size:32rpx;"> wx:if="{{datas.componentData['priceShow']}}"
{{Number(items['minProductGoodsCommission']).toFixed(2)}} >
</text> <text>
</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)}}
</view>
<view class="vipIcon line-clamp1" wx:if="{{showVipTag(index)==true}}">
{{items["recommendedCardMinPricePriceTableName"]}}
</view>
</view>
</view>
<!-- 收益样式一 -->
<block class="" wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommission" wx:if="{{datas.componentData.commissionStyle==0}}">
<view class="commission-box">
<text>收益</text>
<text>￥{{Number(items['minProductGoodsCommission']).toFixed(2)}}</text>
</view>
</view>
</block>
<!-- 立即购买按钮 -->
<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 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>
</view> </view>
</block> <!-- 底部展示标签列表 -->
</view> <block wx:if="{{items!=null}}">
<!-- 商户入口二 --> <view class="marketing flex" wx:if="{{datas.componentData.marketingTag&&datas.componentData.marketingStyle==1&&items.marketingTag}}">
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1}}"> <view
<view class="left flex" wx:if="{{items!=null}}"> class="item"
<view class="logo"> wx:for="{{items.marketingTag}}"
<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" /> wx:key="index"
>
{{item.label}}
</view>
</view>
</block>
<!-- 收益样式二 -->
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view class="showCommissionTwo flex" wx:if="{{datas.componentData.commissionStyle==1}}">
<view class="commission-box">
<text class="iconfont-common common-iconfenxiang">
赚￥
<text style="font-size:32rpx;">
{{Number(items['minProductGoodsCommission']).toFixed(2)}}
</text>
</text>
</view>
</view>
</block>
</view>
<!-- 商户入口二 -->
<view class="merchantsEntrance flex" wx:if="{{datas.componentData.merchantsEntrance&&datas.componentData.merchantsEntranceType==1}}">
<view class="left flex" wx:if="{{items!=null}}">
<view class="logo">
<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" />
</view>
<view class="name">{{items.orgName}}</view>
</view> </view>
<view class="name">{{items.orgName}}</view>
</view> </view>
</view> </view>
</view> </view>
......
static/nativeComponents/GoodsList/GoodsItem/index.wxss
.flex{ .flex{
display: flex; display: flex;
} }
.goods-item-child-bd{
border: 1px solid var(--border-color);
}
image{ image{
width: 100%; width: 100%;
} }
.goodsItem{
margin-bottom: var(--proGap2);
}
.goods-item-child {
position: relative;
overflow: hidden;
background: #ffffff;
}
.merchantsEntrance{ .merchantsEntrance{
padding: 8rpx 20rpx; padding: 8rpx 20rpx;
} }
...@@ -86,6 +97,10 @@ image{ ...@@ -86,6 +97,10 @@ image{
position: relative; position: relative;
background-color: white; background-color: white;
} }
.info .info-top{
overflow: hidden;
justify-content: space-between;
}
.info .name{ .info .name{
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
...@@ -154,6 +169,9 @@ image{ ...@@ -154,6 +169,9 @@ image{
.priceItem { .priceItem {
align-items: flex-end; align-items: flex-end;
} }
.priceItem .price{
align-items: center;
}
.vipPrice2{ .vipPrice2{
align-items: flex-end; align-items: flex-end;
margin-top: 12rpx; margin-top: 12rpx;
...@@ -181,6 +199,60 @@ image{ ...@@ -181,6 +199,60 @@ image{
-ms-border-radius: 12rpx; -ms-border-radius: 12rpx;
-o-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 { .marketing {
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
......
static/nativeComponents/GoodsList/index.js
...@@ -35,7 +35,7 @@ const componentOptions = { ...@@ -35,7 +35,7 @@ const componentOptions = {
haveGroupNum: "0", haveGroupNum: "0",
maxPrice: "21.00", maxPrice: "21.00",
minGoodsId: "99121", minGoodsId: "99121",
minGoodsSuggestedRetailPrice: "18.600000", minGoodsSuggestedRetailPrice: "100.00000",
minPrice: "21.00", minPrice: "21.00",
minProductGoodsId: "85531", minProductGoodsId: "85531",
minProductGoodsMixid: "daadejqb50l7", minProductGoodsMixid: "daadejqb50l7",
...@@ -85,7 +85,7 @@ const componentOptions = { ...@@ -85,7 +85,7 @@ const componentOptions = {
haveGroupNum: "0", haveGroupNum: "0",
maxPrice: "800.00", maxPrice: "800.00",
minGoodsId: "99344", minGoodsId: "99344",
minGoodsSuggestedRetailPrice: "100.000000", minGoodsSuggestedRetailPrice: "300.000000",
minPrice: "200.00", minPrice: "200.00",
minProductGoodsId: "92690", minProductGoodsId: "92690",
minProductGoodsMixid: "emng64ho4rp3", minProductGoodsMixid: "emng64ho4rp3",
...@@ -130,7 +130,7 @@ const componentOptions = { ...@@ -130,7 +130,7 @@ const componentOptions = {
haveGroupNum: "0", haveGroupNum: "0",
maxPrice: "10.00", maxPrice: "10.00",
minGoodsId: "99537", minGoodsId: "99537",
minGoodsSuggestedRetailPrice: "10.000000", minGoodsSuggestedRetailPrice: "20.000000",
minPrice: "10.00", minPrice: "10.00",
minProductGoodsId: "92685", minProductGoodsId: "92685",
minProductGoodsMixid: "lbsmteepkra4", minProductGoodsMixid: "lbsmteepkra4",
...@@ -299,8 +299,8 @@ const componentOptions = { ...@@ -299,8 +299,8 @@ const componentOptions = {
followerColor: "", followerColor: "",
alSaleShow: true, alSaleShow: true,
followerFontSize: 0.6, followerFontSize: 0.6,
paynow: false, paynow: true,
priceMarking: true, priceMarking: false,
goodsSort: 0, goodsSort: 0,
whetherFindDistributionCommission: true, whetherFindDistributionCommission: true,
commissionColor: "", commissionColor: "",
......
static/nativeComponents/GoodsList/index.wxml
<!-- 商品列表组件 --> <!-- 商品列表组件 -->
<view class="goodsList"> <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="left 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="img" wx:if="{{datas.componentData['titleIcon']}}"> <view class="left flex">
<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" /> <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" />
</view>
<view class="title">{{datas.componentData['titles']}}</view>
</view>
<view class="moreTop" wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign'}}">
查看更多
<text class="jt"></text>
</view> </view>
<view class="title">{{datas.componentData['titles']}}</view>
</view>
<view class="moreTop" wx:if="{{datas.componentData['moreShow'] && datas.componentData.moreButtonSite=='top' && datas.componentData['goodsSource']!='assign'}}">
查看更多
<text class="jt"></text>
</view> </view>
</view> <!-- 网格布局 -->
<!-- 网格布局 -->
<view
wx:if="{{datas.componentData.style==='list'}}"
class="goodsItem-list flex"
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view <view
wx:for="{{datas.componentData.goodsList}}" wx:if="{{datas.componentData.style==='list'}}"
wx:key="index" class="goodsItem-list flex"
class="item" style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
> >
<goods-item <view
class="goodsItem" wx:for="{{datas.componentData.goodsList}}"
datas="{{datas}}" wx:key="index"
items="{{datas.componentData.goodsList[index]}}" class="item"
indexs="{{index}}" style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
></goods-item> >
<goods-item
class="goodsItem"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view> </view>
</view> </view>
</view> </view>
static/nativeComponents/GoodsList/index.wxss
...@@ -4,6 +4,13 @@ ...@@ -4,6 +4,13 @@
image{ image{
width: 100%; width: 100%;
} }
.goodsList{
font-size: 32rpx;
position: relative;
}
.goodsList .heap-wrap{
padding: 20rpx;
}
.tops{ .tops{
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment