angelo
/
web-store-retail-h5
forked from angelo/web-retail-h5
3
0
Fork 0
Code Pull Requests Activity

feat(index): 首页商品列表样式变更

This commit is contained in:
woody 2025-04-22 15:16:47 +08:00
parent 024c0c585f
commit 6957f1d7b5
2 changed files with 125 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
pages/index/index.vue
View File

@ -10,33 +10,14 @@
<!-- 商品专区入口 先别删 -->
<!-- <view @tap="goSpecialArea">会员专区</view> -->
<view :class="userInfo.skin ? 'index-top1' : 'index-top'">
<view class="index_t">
<!-- <view class="index_t">
<view class="index-left">
<view class="english">GLOBALIZATION</view>
<view class="text">{{ '全球一体化' }}</view>
</view>
<!-- <view class="index-right">
<view
class="changeLanguages"
v-if="isEmpty(getLanguageList) == false"
>
<picker
:range="getLanguageList"
:value="index"
range-key="label"
@change="bindPickerChange"
>
<view class="select-text">
<view class="texts">{{ getLanguageList[index].label }}</view>
<view class="">
</view>
</view>
</picker>
</view>
</view> -->
</view>
</view>
<view class="banner" v-if="isEmpty(goodsList.advertBannerList) == false">
<view class="uni-margin-wrap">
@ -49,7 +30,8 @@
:duration="duration"
>
<swiper-item
v-for="item in goodsList.advertBannerList"
v-for="(item, index) in goodsList.advertBannerList"
:key="index"
@click="bannerTap(item.link)"
>
<view class="swiper-item uni-bg-red">
@ -61,10 +43,13 @@
</view>
<view class="goods-sort">
<view class="goods-flexs">
<view
v-for="(item, index) in goodsList.recommendSpecialAreaList"
:key="index"
>
<view
class="goods-view"
@click="navTap(item)"
v-for="(item, index) in goodsList.recommendSpecialAreaList"
v-if="item.waresList != false && (index < 8 || moreFlag == true)"
>
<view :class="userInfo.skin ? 'bg-color1' : 'bg-color'"></view>
@ -92,6 +77,7 @@
</template>
</view>
</view>
</view>
<view v-if="isEmpty(goodsList.recommendSpecialAreaList) == false">
<view
class="more"
@ -102,28 +88,11 @@
</view>
</view>
<view class="goods_content">
<!-- banner图!-->
<!-- <view class="goods-lists"-->
<!-- v-if="isEmpty(goodsList.waresCoverInfoList)==false">-->
<!-- <view class="uni-margin-wrap"-->
<!-- v-if="goodsList.waresCoverInfoList[0]">-->
<!-- <swiper class="swiper swiper-s"-->
<!-- circular-->
<!-- :indicator-dots="indicatorDots"-->
<!-- :autoplay="autoplay"-->
<!-- :interval="interval"-->
<!-- :duration="duration">-->
<!-- <swiper-item v-for="item in goodsList.waresCoverInfoList[0].coverList">-->
<!-- <view class="swiper-items uni-bg-red">-->
<!-- <image :src="item"></image>-->
<!-- </view>-->
<!-- </swiper-item>-->
<!-- </swiper>-->
<!-- </view>-->
<!-- </view>-->
<view
class="goods-center-lists"
v-for="item in goodsList.waresVoList"
:key="item.waresId"
@click="goDetails(item)"
>
<view
@ -134,32 +103,30 @@
<view class="goods-img">
<image :src="item.cover1"></image>
</view>
<view class="padding_s">
<view class="padding_s goods-info">
<view class="goods-name">{{ item.waresName }}</view>
<view class="goods-sales-wrapper">
<view class="goods-sales">累计销量{{ item.sales | seles }}</view>
<view
class="goods-price"
v-if="item.specialArea == 31 && userInfo.isMakerSpace == 1"
><span>{{ item.vipPrice | numberToCurrency | isLocal }}</span>
>
<span class="price-symbol">￥</span>
<span>{{ item.vipPrice | numberToCurrency }}</span>
</view>
<view class="goods-price" v-if="item.specialArea != 31"
><span>{{
item.waresPrice | numberToCurrency | isLocal
}}</span>
<view class="goods-price" v-if="item.specialArea != 31">
<span class="price-symbol">￥</span>
<span>{{ item.waresPrice | numberToCurrency }}</span>
</view>
<view
class="goods-price"
v-if="item.specialArea == 31 && userInfo.isMakerSpace == 0"
>
{{ item.waresPrice | numberToCurrency | isLocal }}
<span class="price-symbol">￥</span>
<span>{{ item.waresPrice | numberToCurrency }}</span>
</view>
<!-- <view class="goods-price1" v-show="item.specialArea == 31"
>统一零售价:<span>{{
item.retailPrice | numberToCurrency | isLocal
}}</span>
</view> -->
<view class="goods-sales"
>{{ '累计销量' }}{{ item.sales | seles }}</view
>
</view>
</view>
</view>
</view>
@ -730,64 +697,90 @@ header {
padding: 0 20rpx;
}
.goods-name {
width: 100%;
margin-top: 10rpx;
color: #333;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-word;
line-height: 1.4;
// min-height: calc(26rpx * 1.4 * 2);
}
.goods-center-lists {
width: calc(100% - 40rpx); // height: 450rpx;
background: #ffffff;
margin-left: 20rpx;
margin-right: 20rpx;
border-radius: 15rpx;
border-bottom: 20rpx;
margin-bottom: 20rpx;
// padding-bottom: 30rpx;
position: relative;
.goods-flex-s {
display: flex;
padding: 20rpx;
.goods-img {
flex-shrink: 0;
width: 236rpx;
height: 236rpx;
image {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
}
}
.goods-info {
flex: 1;
padding-left: 20rpx;
width: 0;
display: flex;
flex-direction: column;
.goods-sales-wrapper {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
.goods-sales {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
.goods-price {
color: #f82c1a;
margin-top: 10rpx;
font-style: 22rpx;
margin-left: -7rpx;
.price-symbol {
font-size: 22rpx;
}
span {
font-size: 30rpx;
font-size: 36rpx;
font-weight: bold;
}
}
.goods-price1 {
color: #999;
// margin-top: 10rpx;
font-size: 10px;
margin-left: -7rpx;
span {
font-size: 10rpx;
}
}
.goods-name {
margin-top: 10rpx;
color: #333;
font-size: 26rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-img {
image {
width: 100%;
border-radius: 10rpx 10rpx 0 0;
height: 322rpx;
}
}
.goods-center-lists:nth-child(3) {
//margin-top: 0rpx;
}
.goods-center-lists {
width: 345rpx; // height: 450rpx;
background: #ffffff;
margin-left: 20rpx;
border-radius: 15rpx;
border-bottom: 20rpx;
margin-bottom: 20rpx;
padding-bottom: 30rpx;
position: relative;
}
.goods-sort {
@ -806,6 +799,7 @@ header {
.goods_content {
display: flex;
flex-direction: column;
padding: 0;
flex-wrap: wrap;
}
@ -970,7 +964,7 @@ header {
}
.banner {
padding: 140rpx 0 0 0;
padding: 30rpx 0 0 0;
text-align: center;
width: 100%;
}
@ -1028,7 +1022,7 @@ page {
position: fixed;
z-index: 10;
width: 100%;
height: 120rpx;
height: 20rpx;
.index_t {
padding: 30rpx 20rpx;
}
@ -1043,7 +1037,7 @@ page {
position: fixed;
z-index: 10;
width: 100%;
height: 120rpx;
height: 100%;
.index_t {
padding: 30rpx 20rpx;
}

1
pages/other/index.vue
View File

@ -750,6 +750,7 @@ export default {
api.memLevel(this.allGoodsData).then(res => {
if (res.data.isEnough) {
console.log(res.data, 'res.data...memLevel')
this.form.pkGradeVal = res.data.pkGradeVal
} else {
this.isLoading.close()