code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-11-06 17:09:01 +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

86
components/category/category-scroller.vue
View File

@@ -9,14 +9,19 @@
@click="$emit('change', item)"
>
<template v-if="mode === 'icon'">
<view class="cs-icon">
<u-image width="88rpx" height="88rpx" shape="circle" :src="item.image">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
<view class="cs-icon-box">
<view class="cs-icon">
<u-image width="80rpx" height="80rpx" shape="circle" :src="item.image" mode="aspectFill">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
</view>
</view>
<text class="cs-name">{{ item.name }}</text>
</template>
<text v-else class="cs-text-name">{{ item.name }}</text>
<template v-else>
<text class="cs-text-name">{{ item.name }}</text>
<view class="cs-text-line" v-if="item.id === currentId"></view>
</template>
</view>
</scroll-view>
</template>
@@ -37,7 +42,7 @@ const props = withDefaults(defineProps<{
defineEmits(['change'])
const intoView = computed(() =>
props.currentId != null ? `cs-${props.currentId}` : ''
props.currentId != null ? 'cs-' + props.currentId : ''
)
</script>
@@ -45,49 +50,84 @@ const intoView = computed(() =>
.cate-scroller {
white-space: nowrap;
width: 100%;
background: #fff;
background: #ffffff;
border-bottom: 1rpx solid #f2f3f5;
box-sizing: border-box;
flex-shrink: 0;
}
.cs-item {
display: inline-flex;
flex-direction: column;
align-items: center;
width: 120rpx;
padding: 16rpx 0 10rpx;
justify-content: center;
width: 130rpx;
padding: 16rpx 6rpx 14rpx;
vertical-align: top;
box-sizing: border-box;
transition: all 0.2s ease;
}
.cs-icon-box {
width: 92rpx;
height: 92rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3rpx solid transparent;
box-sizing: border-box;
background: #ffffff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-item.active .cs-icon-box {
border-color: $light-color;
box-shadow: 0 4rpx 12rpx rgba(255, 102, 0, 0.15);
}
.cs-icon {
width: 88rpx;
height: 88rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
border: 2rpx solid transparent;
}
.cs-item.active .cs-icon {
border-color: $light-color;
background: #f6f7f9;
display: flex;
align-items: center;
justify-content: center;
}
.cs-name {
margin-top: 8rpx;
font-size: 22rpx;
color: #333;
max-width: 110rpx;
margin-top: 10rpx;
font-size: 24rpx;
color: #555;
max-width: 120rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.cs-item.active .cs-name {
color: $light-color;
font-weight: bold;
font-weight: 600;
}
.cs-item--text {
width: auto;
padding: 18rpx 24rpx;
padding: 18rpx 28rpx;
position: relative;
}
.cs-text-name {
font-size: 26rpx;
color: #333;
color: #666;
transition: color 0.2s ease;
}
.cs-item--text.active .cs-text-name {
color: $light-color;
font-weight: bold;
font-weight: 600;
}
.cs-text-line {
position: absolute;
bottom: 6rpx;
left: 50%;
transform: translateX(-50%);
width: 32rpx;
height: 4rpx;
border-radius: 2rpx;
background: $light-color;
}
</style>

42
components/category/category-side-list.vue
View File

@@ -7,7 +7,8 @@
:class="{ active: item.id === currentId }"
@click="$emit('change', item)"
>
{{ item.name }}
<view class="active-indicator" v-if="item.id === currentId"></view>
<text class="side-item-text">{{ item.name }}</text>
</view>
</scroll-view>
</template>
@@ -26,26 +27,49 @@ defineEmits(['change'])
<style lang="scss" scoped>
.side-list {
width: 160rpx;
width: 176rpx;
flex-shrink: 0;
height: 100%;
background-color: #f7f7f7;
background-color: #f6f7f9;
border-right: 1rpx solid #ebebeb;
box-sizing: border-box;
}
.side-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 90rpx;
padding: 10rpx 8rpx;
min-height: 96rpx;
padding: 16rpx 14rpx;
box-sizing: border-box;
font-size: 24rpx;
color: #333;
font-size: 26rpx;
color: #666;
text-align: center;
position: relative;
transition: all 0.2s ease;
&.active {
font-weight: bold;
font-weight: 600;
color: $light-color;
background: #fff;
background: #ffffff;
}
}
.side-item-text {
line-height: 1.35;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.active-indicator {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6rpx;
height: 36rpx;
border-radius: 0 4rpx 4rpx 0;
background: $light-color;
}
</style>

41
components/category/sort-bar.vue
View File

@@ -5,31 +5,31 @@
:class="{ active: sort === 'releaseTime' }"
@click="onClick('releaseTime')"
>
综合
<text class="sort-label">综合</text>
</view>
<view
class="sort-item"
:class="{ active: sort === 'buyCount' }"
@click="onClick('buyCount')"
>
销量
<text class="sort-label">销量</text>
</view>
<view
class="sort-item"
:class="{ active: sort === 'price' }"
@click="onClick('price')"
>
<text>价格</text>
<text class="sort-label">价格</text>
<view class="arrows">
<u-icon
name="arrow-up"
size="10"
:color="sort === 'price' && order === 'asc' ? '#ff6700' : '#c5c5c5'"
name="arrow-up-fill"
size="7"
:color="sort === 'price' && order === 'asc' ? '#ff6700' : '#bbbbbb'"
></u-icon>
<u-icon
name="arrow-down"
size="10"
:color="sort === 'price' && order === 'desc' ? '#ff6700' : '#c5c5c5'"
name="arrow-down-fill"
size="7"
:color="sort === 'price' && order === 'desc' ? '#ff6700' : '#bbbbbb'"
></u-icon>
</view>
</view>
@@ -60,24 +60,35 @@ function onClick(type: string) {
.sort-bar {
display: flex;
align-items: center;
height: 72rpx;
background: #fff;
height: 68rpx;
background: #ffffff;
padding: 0 20rpx;
border-bottom: 1rpx solid #f6f6f6;
box-sizing: border-box;
flex-shrink: 0;
}
.sort-item {
display: flex;
align-items: center;
margin-right: 40rpx;
margin-right: 44rpx;
font-size: 26rpx;
color: #333;
color: #666;
height: 100%;
cursor: pointer;
transition: color 0.2s ease;
&.active {
color: $light-color;
font-weight: bold;
font-weight: 600;
}
}
.sort-label {
font-size: 26rpx;
}
.arrows {
display: flex;
flex-direction: column;
margin-left: 6rpx;
margin-left: 8rpx;
gap: 2rpx;
}
</style>

22
components/category/sub-tag-bar.vue
View File

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<{
defineEmits(['change'])
const intoView = computed(() =>
props.currentId != null ? `tb-${props.currentId}` : ''
props.currentId != null ? 'tb-' + props.currentId : ''
)
</script>
@@ -35,21 +35,27 @@ const intoView = computed(() =>
.tag-bar {
white-space: nowrap;
width: 100%;
background: #fff;
padding: 8rpx 0;
background: #ffffff;
padding: 12rpx 16rpx 10rpx;
border-bottom: 1rpx solid #f6f6f6;
box-sizing: border-box;
flex-shrink: 0;
}
.tag-item {
display: inline-block;
padding: 8rpx 24rpx;
padding: 6rpx 22rpx;
margin-right: 12rpx;
font-size: 24rpx;
color: #333;
background: #f5f5f5;
color: #666;
background: #f5f6f8;
border-radius: 24rpx;
line-height: 1.35;
transition: all 0.2s ease;
&.active {
color: #fff;
color: #ffffff;
background: $light-color;
font-weight: bold;
font-weight: 500;
}
}
</style>

77
components/category/tpl-category-goods.vue
View File

@@ -8,13 +8,6 @@
mode="icon"
@change="onL1Change"
/>
<!-- 模板2:三级分类标签横滑 -->
<sub-tag-bar
v-if="template === 2 && l3List.length"
:list="l3List"
:current-id="currentL3 && currentL3.id"
@change="onL3Change"
/>
<view class="tpl-main">
<!-- 左侧:模板2/3 为二级分类,模板4 为一级分类 -->
<category-side-list
@@ -23,6 +16,13 @@
@change="onSideChange"
/>
<view class="tpl-right">
<!-- 模板2:三级分类标签横滑 (置于右栏顶部) -->
<sub-tag-bar
v-if="template === 2 && l3List.length"
:list="l3List"
:current-id="currentL3 && currentL3.id"
@change="onL3Change"
/>
<!-- 模板4:右上二级分类文字横滑(起点为当前一级名称,作为"全部"入口) -->
<category-scroller
v-if="template === 4"
@@ -39,15 +39,24 @@
type="oneColumns"
:show-fields="setting.showFields"
:tab-bar-gap="false"
:store-name="false"
@add-cart="onAddCart"
/>
<view v-else-if="!loading" class="empty">
<text>{{ failed ? '加载失败,请点击重试' : '暂无商品' }}</text>
<view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
<view v-else-if="!loading" class="empty-state">
<u-empty
:text="failed ? '加载失败，请重试' : '暂无相关商品'"
mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"
margin-top="100"
>
<view v-if="failed" class="retry" @click="loadGoods(true)">重试</view>
</u-empty>
</view>
<uni-load-more
v-if="goodsList.length"
v-if="showLoadMore"
:status="loading ? 'loading' : hasMore ? 'more' : 'noMore'"
:color="'#bfbfbf'"
:content-text="loadMoreText"
></uni-load-more>
</scroll-view>
</view>
@@ -64,6 +73,13 @@ import SubTagBar from './sub-tag-bar.vue'
import SortBar from './sort-bar.vue'
import MGoodsList from '@/components/m-goods-list/list.vue'
defineOptions({
options: {
virtualHost: true,
addGlobalClass: true,
},
})
const props = withDefaults(defineProps<{
categoryList?: any[]
setting?: any
@@ -86,6 +102,20 @@ const hasMore = ref(true)
const loading = ref(false)
const failed = ref(false)
const loadMoreText = {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '—— 到底啦 ——',
}
// 仅在正在加载、或者有下一页、或者商品总数达到 6 件以上触底时才展示底线，避免少量商品（如1~2件）时在空白区域突兀展示
const showLoadMore = computed(() => {
if (!goodsList.value.length) return false
if (loading.value) return true
if (hasMore.value) return true
return goodsList.value.length >= 6
})
// 模板2/3:左侧为当前一级的二级分类;模板4:左侧为一级分类
const sideList = computed(() =>
props.template === 4
@@ -212,7 +242,7 @@ function loadMore() {
function onAddCart(item: any) {
uni.navigateTo({
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
url: '/pages/product/goods?id=' + item.id + '&goodsId=' + item.goodsId,
})
}
</script>
@@ -221,40 +251,47 @@ function onAddCart(item: any) {
.tpl-goods {
flex: 1;
min-height: 0;
height: 100%;
display: flex;
flex-direction: column;
background: #fff;
background: #ffffff;
overflow: hidden;
}
.tpl-main {
flex: 1;
min-height: 0;
height: 0;
display: flex;
overflow: hidden;
}
.tpl-right {
flex: 1;
min-width: 0;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: #ffffff;
}
.goods-scroll {
flex: 1;
min-height: 0;
height: 0;
}
.empty {
padding: 120rpx 0;
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
font-size: 26rpx;
justify-content: center;
padding: 60rpx 0 100rpx;
}
.retry {
margin-top: 20rpx;
padding: 10rpx 48rpx;
margin-top: 24rpx;
padding: 12rpx 50rpx;
border: 1rpx solid $light-color;
color: $light-color;
border-radius: 32rpx;
border-radius: 36rpx;
font-size: 24rpx;
font-weight: 500;
}
</style>

37
components/m-buy/goods.vue
View File

@@ -27,18 +27,7 @@
</view>
<!-- 正常商品的价格 -->
<view v-else>
<!-- 批发阶梯价（E_COUPON 仅零售价） -->
<div class="price-row flex" v-if="goodsDetail.salesModel === 'WHOLESALE' && !isECoupon(goodsDetail.goodsType)">
<div class="goods-price" v-for="(item, index) in wholesaleList" :key="index">
<span>
￥
<span class="goods-price-bigshow">{{ goodsFormatPrice(item.price)[0] }}</span>
.{{ goodsFormatPrice(item.price)[1] }}
</span>
<span class="wholesale-item">{{ item.num }}{{ goodsDetail.goodsUnit }}</span>
</div>
</div>
<div class="goods-price" v-else>
<div class="goods-price">
<span>
￥
<span class="goods-price-bigshow">{{ goodsFormatPrice(goodsDetail.price)[0] }}</span>
@@ -135,7 +124,6 @@ import {
} from '@/utils/goodsType.js'
const props = withDefaults(defineProps<{
wholesaleList?: any[] | boolean
buyMask?: boolean
isGroup?: boolean
goodsDetail?: any
@@ -144,7 +132,6 @@ const props = withDefaults(defineProps<{
addr?: any | null
pointDetail?: any | null
}>(), {
wholesaleList: false,
buyMask: false,
isGroup: false,
goodsDetail: () => ({}),
@@ -156,7 +143,7 @@ const props = withDefaults(defineProps<{
const emit = defineEmits(['closeBuy', 'changed', 'handleClickSku', 'queryCart'])
const num = ref(props.wholesaleList && Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0 ? props.wholesaleList[0].num : 1)
const num = ref(1)
const selectName = ref('')
const selectSkuList = ref<any>('')
@@ -231,18 +218,7 @@ watch(
}
)
const numCheck = (val: number) => {
if (Array.isArray(props.wholesaleList) && props.wholesaleList.length > 0) {
if (num.value <= props.wholesaleList[0].num) {
uni.showToast({
title: '批发商品购买数量不能小于起批数量!',
duration: 2000,
icon: 'none'
})
num.value = props.wholesaleList[0].num
}
}
}
const closeMask = () => {
emit('closeBuy', false)
@@ -541,13 +517,6 @@ defineExpose({
}
}
.wholesale-item {
color: #999 !important;
font-size: 24rpx;
margin: 0 20rpx;
display: flex;
justify-content: center;
}
.goods-header {
height: 200rpx;

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 {

1
main.js
View File

@@ -39,6 +39,7 @@ export function createApp() {
setConfig({
config: {
loadFontOnce: true,
iconUrl: 'https://lilishop-uniapp.oss-cn-beijing.aliyuncs.com/font_2225171_8kdcwk4po24.ttf',
},
props: {
form: {

19
pages/product/goods.vue
View File

@@ -101,20 +101,7 @@
<view class="-goods-price" v-if="goodsDetail.price != undefined">
<span>
<span v-if="wholesaleList.length">
<span>¥</span><span class="price">{{
goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[0]
}}</span>.{{
goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[1]
}}
~
<span>¥</span><span class="price">{{
goodsFormatPrice(wholesaleList[0].price)[0]
}}</span>.{{
goodsFormatPrice(wholesaleList[0].price)[1]
}}
</span>
<span v-else>
<span>
<span>¥</span><span class="price">{{
goodsFormatPrice(goodsDetail.price)[0]
}}</span>.{{ goodsFormatPrice(goodsDetail.price)[1] }}
@@ -291,7 +278,7 @@
<!-- 商品规格 商品详情，以及默认参与活动的id-->
<popupGoods :addr="delivery" ref="popupGoodsRef" @changed="changedGoods" @closeBuy="closePopupBuy"
@queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId"
v-if="goodsDetail.id" :pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
v-if="goodsDetail.id" :pointDetail="pointDetail" @handleClickSku="selectSku"
:buyMask="buyMask" />
<!-- 下架框 -->
@@ -391,7 +378,6 @@ const productId = ref(0)
const startTimer = ref(false)
const routerVal = ref<any>("")
const IMLink = ref("")
const wholesaleList = ref<any[]>([])
const takeDownFromSale = ref(false)
// computed
@@ -520,7 +506,6 @@ async function init(id: any, goodsId: any, distributionId = "", shareId = "") {
if (goodsDetail.value) {
goodsDetail.value.thumbnail = parseGoodsImageUrl(goodsDetail.value.thumbnail)
}
wholesaleList.value = response.data.result.wholesaleList || []
goodsSpec.value = response.data.result.specs || ""
PromotionList.value = response.data.result.promotionMap || ""
goodsParams.value = response.data.result.goodsParamsDTOList || []

1
pages/tabbar/cart/cartList.vue
View File

@@ -68,7 +68,6 @@
</p>
<!-- 规格 -->
<p class="sp-type" style="width:300rpx">{{skuItem.goodsSku.simpleSpecs}}</p>
<p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
<view class="sp-number">
<view class="sp-price">
<div class="main-color">

285
pages/tabbar/category/category.vue
View File

@@ -11,43 +11,51 @@
bg-color="#ffffff"
>
<template #left>
<view class="nav-content">
<text class="title">商品分类</text>
<view class="nav-search-wrap" :style="searchBarStyle">
<!-- #ifdef H5 -->
<u-search class="nav-search" @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
<!-- #ifndef H5 -->
<u-search class="nav-search" disabled @click="search" placeholder="搜索商品" :show-action="false"></u-search>
<!-- #endif -->
</view>
<view class="nav-search-box" :style="searchBarStyle" @click="search">
<u-icon name="search" size="16" color="#999999"></u-icon>
<text class="search-placeholder">搜索商品</text>
</view>
</template>
</u-navbar>
<view class="content" v-if="pageTemplate === 1">
<scroll-view scroll-y scroll-with-animation class="left-aside">
<view v-for="(item, index) in tabList" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item, index)">
{{ item.name }}
<view
v-for="(item, index) in tabList"
:key="item.id"
class="f-item"
:class="{ active: item.id === currentId }"
@click="tabtap(item, index)"
>
<text class="f-text">{{ item.name }}</text>
</view>
</scroll-view>
<scroll-view scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100" :lower-threshold="-100">
<!-- 头部图片 -->
<view class="top-img" id="main-top">
<u-image width="500rpx" height="230rpx" @click="navigateToList(topImg.id,topImg.id)" :src="topImg.image" mode="">
<view class="top-img" id="main-top" v-if="topImg && topImg.image">
<u-image width="100%" height="200rpx" border-radius="12rpx" @click="navigateToList(topImg.id, topImg.id)" :src="topImg.image" mode="aspectFill">
</u-image>
</view>
<view v-for="item in categoryList" :key="item.id" class="s-list" :id="'main-' + item.id">
<!-- 分类标题 -->
<text class="s-item">{{ item.name }}</text>
<view class="s-header" @click="navigateToList(item.id, item.id)">
<text class="s-item">{{ item.name }}</text>
<u-icon name="arrow-right" size="12" color="#bbbbbb"></u-icon>
</view>
<!-- 分类详情 -->
<view class="t-list">
<template v-for="(children, cIndex) in item.children" :key="children.id">
<view @click="navigateToList(item.id, children.id)" v-if="children.parentId === item.id" class="t-item"
:class="{ 'margin-right': (cIndex + 1) % 3 == 0 }">
<u-image width="70px" height="70px" :src="children.image" :lazy-load="true">
</u-image>
<text>{{ children.name }}</text>
</view>
<view
@click="navigateToList(item.id, children.id)"
v-if="children.parentId === item.id"
class="t-item"
>
<view class="t-img-box">
<u-image width="128rpx" height="128rpx" border-radius="12rpx" :src="children.image" :lazy-load="true" mode="aspectFit">
<template #loading><u-loading-icon></u-loading-icon></template>
</u-image>
</view>
<text class="t-name">{{ children.name }}</text>
</view>
</template>
</view>
</view>
@@ -55,6 +63,7 @@
</view>
<tpl-category-goods
v-else
class="tpl-goods-wrapper"
:category-list="tabList"
:setting="categoryPageSetting"
:template="pageTemplate"
@@ -88,9 +97,9 @@ const themeStyle = computed(() => getThemeStyle(store.state.theme))
const searchBarStyle = computed(() => {
if (searchBarWidth.value) {
return { width: `${searchBarWidth.value}px` }
return { width: searchBarWidth.value + 'px' }
}
return { width: "460rpx" }
return { width: "680rpx" }
})
onLoad(() => {
@@ -111,18 +120,25 @@ function setSearchBarWidth() {
// #ifdef MP-WEIXIN
try {
const menuButton = uni.getMenuButtonBoundingClientRect()
const { windowWidth } = uni.getWindowInfo()
const capsuleInsetRight = windowWidth - menuButton.left
const titleWidth = uni.upx2px(160) // "商品分类" 标题宽度
const leftPadding = uni.upx2px(60) // 左侧内边距
const leftMargin = uni.upx2px(24) // 搜索框左边距
const gap = uni.upx2px(20) // 搜索框与胶囊间距
searchBarWidth.value =
windowWidth - capsuleInsetRight - titleWidth - leftPadding - gap
// 搜索框延伸至胶囊左边沿
const calcWidth = menuButton.left - leftMargin - gap
searchBarWidth.value = Math.max(calcWidth, 200)
} catch (e) {
searchBarWidth.value = 180
searchBarWidth.value = 240
}
// #endif
// #ifndef MP-WEIXIN
try {
const info = (uni.getWindowInfo ? uni.getWindowInfo() : (uni.getSystemInfoSync ? uni.getSystemInfoSync() : {})); const windowWidth = info.windowWidth || 375;
searchBarWidth.value = windowWidth - uni.upx2px(48)
} catch (e) {
searchBarWidth.value = 340
}
// #endif
}
/**
* 查询
*/
@@ -138,8 +154,10 @@ function search() {
async function loadData() {
let list = await getCategoryList(0)
tabList.value = list.data.result
currentId.value = list.data.result[0].id
loadListContent(0)
if (tabList.value && tabList.value.length) {
currentId.value = tabList.value[0].id
loadListContent(0)
}
}
/**
@@ -149,6 +167,7 @@ function loadListContent(index: number) {
topImg.value = tabList.value[index]
categoryList.value = tabList.value[index].children
}
/**
* 一级分类点击
*/
@@ -161,7 +180,7 @@ function tabtap(item: any, i: number) {
function navigateToList(sid: any, tid: any) {
uni.navigateTo({
url: `/pages/navigation/search/searchPage?category=${tid}`,
url: '/pages/navigation/search/searchPage?category=' + tid,
})
}
</script>
@@ -169,7 +188,7 @@ function navigateToList(sid: any, tid: any) {
<style lang="scss">
page {
height: 100%;
background-color: #fdfaff;
background-color: #ffffff;
}
</style>
@@ -183,36 +202,42 @@ page {
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
}
/* #endif */
.s-list {
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
}
.nav-content {
display: flex;
align-items: center;
}
.nav-search-wrap {
flex-shrink: 0;
}
.nav-search {
width: 100%;
}
.title {
flex-shrink: 0;
text-align: center;
font-size: 28rpx;
padding-right: 16rpx;
white-space: nowrap;
}
.category-wrap {
height: 100vh;
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
background-color: #ffffff;
.navbar {
border-bottom: 1rpx solid #f2f3f5;
}
.nav-search-box {
height: 64rpx;
background: #f4f5f7;
border-radius: 32rpx;
display: flex;
align-items: center;
padding: 0 24rpx;
margin-left: 24rpx;
box-sizing: border-box;
cursor: pointer;
}
.search-placeholder {
font-size: 26rpx;
color: #999999;
margin-left: 12rpx;
line-height: 1;
}
.content {
flex: 1;
min-height: 0;
@@ -220,85 +245,159 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
display: flex;
color: #333;
font-size: 28rpx;
background: #fff;
background: #ffffff;
overflow: hidden;
}
.left-aside {
flex-shrink: 0;
width: 200rpx;
width: 176rpx;
height: 100%;
background-color: #f7f7f7;
background-color: #f6f7f9;
border-right: 1rpx solid #ebebeb;
box-sizing: border-box;
}
.f-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 97rpx;
min-height: 96rpx;
padding: 16rpx 14rpx;
box-sizing: border-box;
font-size: 26rpx;
color: #666;
text-align: center;
line-height: 1.35;
position: relative;
transition: all 0.2s ease;
&.active {
font-weight: bold;
font-weight: 600;
color: $light-color;
background: #fff;
background: #ffffff;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6rpx;
height: 36rpx;
border-radius: 0 4rpx 4rpx 0;
background: $light-color;
}
}
}
.f-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.right-aside {
flex: 1;
height: 100%;
min-height: 0;
overflow: hidden;
padding: 40rpx 0 0 30rpx;
padding: 20rpx 20rpx 40rpx;
box-sizing: border-box;
background: #f8f9fa;
}
.top-img {
width: 500rpx;
height: 230rpx;
border-radius: 8px;
width: 100%;
height: 200rpx;
border-radius: 14rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
.s-item {
.s-list {
background: #ffffff;
border-radius: 16rpx;
padding: 24rpx 20rpx 12rpx;
margin-bottom: 20rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
}
.s-header {
display: flex;
align-items: center;
height: 70rpx;
padding-top: 16rpx;
font-weight: 500;
justify-content: space-between;
padding-bottom: 16rpx;
cursor: pointer;
}
.s-item {
font-size: 26rpx;
font-weight: 600;
color: #222;
}
.t-list {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-top: 12rpx;
}
.margin-right {
margin-right: 0 !important;
}
.t-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 150rpx;
margin-right: 25rpx;
width: 33.333%;
padding: 10rpx 0 20rpx;
box-sizing: border-box;
}
.t-img-box {
width: 128rpx;
height: 128rpx;
border-radius: 12rpx;
overflow: hidden;
background: #f9f9f9;
margin-bottom: 12rpx;
display: flex;
align-items: center;
justify-content: center;
}
.t-name {
font-size: 24rpx;
padding-bottom: 20rpx;
image {
width: 140rpx;
height: 140rpx;
border-radius: 8px;
margin-bottom: 20rpx;
}
::v-deep .u-image {
width: 140rpx !important;
height: 140rpx !important;
border-radius: 8px !important;
margin-bottom: 20rpx !important;
}
color: #333;
max-width: 140rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
line-height: 1.2;
}
}
.tpl-goods-wrapper {
flex: 1;
min-height: 0;
height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ */
tpl-category-goods {
flex: 1;
min-height: 0;
height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* #endif */
</style>

2
utils/categoryPageSetting.js
View File

@@ -6,7 +6,7 @@ export const DEFAULT_CATEGORY_PAGE_SETTING = {
tags: true,
selfTag: true,
price: true,
linePrice: true,
linePrice: false,
sales: true,
cart: true,
},