Skip to content

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

商品列表优化

parent 456a3642
Showing with 113 additions and 33 deletions
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="tops flex">
<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" />
<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" 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" />
</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 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
wx:if="{{datas.componentData.style==='list'}}"
class="goodsItem-list flex"
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<!-- 网格布局 -->
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
wx:if="{{datas.componentData.style==='list'}}"
class="goodsItem-list flex"
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<goods-item
class="goodsItem"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
indexs="{{index}}"
></goods-item>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:key="index"
class="item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
class="goodsItem"
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
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;
......
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