code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-11-11 03:18:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(category): 重构分类页面UI

Browse Source 
- 重构分类页面导航栏，将标题+搜索框改为仅搜索框样式
- 优化分类页面左侧列表与右侧内容区域的布局及视觉样式
- 重写搜索栏宽度计算逻辑
- 优化分类滚动组件、侧边列表、排序栏及子标签栏的交互样式
- 增加分类头部图片条件渲染及商品列表嵌入模式样式
- 关闭商品列表划线价默认显示配置
This commit is contained in:
pikachu1995@126.com
2026-10-22 15:59:47 +08:00
parent 6b59ae3d6e
commit 5e59f2cd3c
13 changed files with 545 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/m-goods-list/base-list.vue
View File

@@ -82,9 +82,6 @@
</div>
</view>
<div class="promotion" @click="navigateToDetailPage(item)">
<div v-if="item.salesModel == 'WHOLESALE'">
<span>批</span>
</div>
<div
v-for="(promotionItem, promotionIndex) in getPromotion(item)"
:key="promotionIndex"

182
components/m-goods-list/list.vue
View File

@@ -21,9 +21,6 @@
</div>
</view>
<div class="promotion" @click="navigateToDetailPage(item)">
<div v-if="item.salesModel == 'WHOLESALE'">
<span class="promotion-tag">批</span>
</div>
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
@@ -46,18 +43,32 @@
</view>
</view>
<!-- 一行一列商品展示 -->
<div v-if="type == 'oneColumns'" class="goods-one-row">
<div v-if="type == 'oneColumns'" class="goods-one-row" :class="{ 'goods-one-row--embedded': !tabBarGap }">
<div v-for="(item, index) in res" :key="index" class="goods-row">
<div class="flex goods-col">
<div class="goods-img" @click="navigateToDetailPage(item)">
<u-image width="230rpx" mode="aspectFit" border-radius='16' height="230rpx" :src="item.thumbnail">
<u-image :width="!tabBarGap ? '170rpx' : '230rpx'" mode="aspectFit" :border-radius="!tabBarGap ? '12' : '16'" :height="!tabBarGap ? '170rpx' : '230rpx'" :src="item.thumbnail">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
</div>
<div class="goods-detail">
<div class="title clamp3" @click="navigateToDetailPage(item)">{{ item.goodsName }}</div>
<div class="title clamp2" @click="navigateToDetailPage(item)">
<text class="self-tag" v-if="(!storeName || flag('selfTag')) && item.selfOperated">自营</text>
{{ item.goodsName }}
</div>
<div class="selling-point" v-if="extra('subTitle') && item.sellingPoint">{{ item.sellingPoint }}</div>
<div class="spec-summary" v-if="extra('spec') && specSummary(item)">{{ specSummary(item) }}</div>
<div class="promotion" v-if="flag('tags')" @click="navigateToDetailPage(item)">
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div>
</div>
<div style="overflow: hidden" v-if="flag('sales')" @click="navigateToDetailPage(item)" class="count-config">
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
<span style="float: right; font-size: 22rpx" v-if="item.commentNum">{{ item.commentNum }}条评论</span>
</div>
<view class="price-box" @click="navigateToDetailPage(item)">
<div class="price" v-if="flag('price') && item.price!=undefined">
¥<span class="price-int">{{ goodsFormatPrice(item.price )[0] }} </span>.{{
@@ -66,25 +77,11 @@
</div>
<div class="market-price" v-if="extra('linePrice') && hasMarketPrice(item)">¥{{ item.marketPrice }}</div>
<div class="cart-btn" v-if="extra('cart')" @click.stop="emit('addCart', item)">
<u-icon name="shopping-cart" size="20" color="#fff"></u-icon>
<u-icon name="shopping-cart" size="16" :color="mainColor"></u-icon>
</div>
</view>
<div class="promotion" v-if="flag('tags')" @click="navigateToDetailPage(item)">
<div v-if="item.salesModel == 'WHOLESALE'">
<span class="promotion-tag">批</span>
</div>
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
<span class="promotion-tag" v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
<span class="promotion-tag" v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
<span class="promotion-tag" v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
</div>
</div>
<div style="overflow: hidden" v-if="flag('sales')" @click="navigateToDetailPage(item)" class="count-config">
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
</div>
<div class="store-seller-name" @click="navigateToStoreDetailPage(item)">
<view class="store-name-row" v-if="storeName">
<div class="store-seller-name" v-if="storeName" @click="navigateToStoreDetailPage(item)">
<view class="store-name-row">
<text class="self-tag" v-if="item.selfOperated && flag('selfTag')">自营</text>
<text class="store-name-text">{{ item.storeName }}</text>
<text class="to-store">进店</text>
@@ -93,18 +90,20 @@
</div>
</div>
</div>
</div>
</div>
</view>
</template>
<script setup lang="ts">
import { watch } from 'vue'
import { computed, watch } from 'vue'
import { useStore } from '@/store'
import { useGoodsListCommon } from './common'
import { goodsFormatPrice } from '@/utils/filters.js'
const store = useStore()
const mainColor = computed(() => (store && store.getters && store.getters.mainColor) || '#ff3c2a')
const { lightSearchStr, getPromotion, navigateToDetailPage, navigateToStoreDetailPage } = useGoodsListCommon()
const props = withDefaults(defineProps<{
@@ -238,6 +237,128 @@ watch(() => props.keyword, (val) => {
}
}
.goods-one-row--embedded {
.goods-row {
padding: 20rpx 16rpx;
border-bottom: 1rpx solid #f6f6f6;
background: #ffffff;
>.goods-col {
display: flex;
align-items: stretch;
>.goods-img {
flex: 0 0 170rpx;
width: 170rpx;
height: 170rpx;
border-radius: 12rpx;
overflow: hidden;
background: #f8f8f8;
}
>.goods-detail {
flex: 1;
min-width: 0;
margin: 0 0 0 16rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
>.title {
font-size: 26rpx;
color: #222;
line-height: 1.4;
max-height: 74rpx;
padding: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
.self-tag {
display: inline-block;
margin-right: 8rpx;
padding: 1rpx 8rpx;
border-radius: 6rpx;
background: $main-color;
color: #fff;
font-size: 20rpx;
line-height: 1.4;
vertical-align: middle;
}
}
.selling-point {
font-size: 22rpx;
color: #999;
line-height: 1.3;
margin-top: 4rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.spec-summary {
font-size: 22rpx;
color: #999;
line-height: 1.3;
margin-top: 2rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.count-config {
font-size: 22rpx;
color: #999;
margin-top: 4rpx;
}
.price-box {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: auto;
padding-top: 8rpx;
.price {
font-size: 22rpx;
color: $main-color;
font-weight: 500;
line-height: 1;
.price-int {
font-size: 34rpx;
font-weight: bold;
}
}
.market-price {
font-size: 22rpx;
color: #bbb;
text-decoration: line-through;
margin-left: 8rpx;
}
.cart-btn {
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: #ffffff;
border: 2rpx solid $main-color;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
}
}
}
}
}
}
.goods-row {
background: #fff;
padding: 16rpx;
@@ -299,14 +420,17 @@ watch(() => props.keyword, (val) => {
}
.cart-btn {
width: 44rpx;
height: 44rpx;
width: 48rpx;
height: 48rpx;
border-radius: 50%;
background: $main-color;
background: #ffffff;
border: 2rpx solid $main-color;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
box-shadow: 0 2rpx 8rpx rgba(255, 60, 42, 0.12);
}
.promotion {