diff --git a/components/category/category-scroller.vue b/components/category/category-scroller.vue index 8d2b8bf..2df77b2 100644 --- a/components/category/category-scroller.vue +++ b/components/category/category-scroller.vue @@ -9,14 +9,19 @@ @click="$emit('change', item)" > - {{ item.name }} + @@ -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 : '' ) @@ -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; } diff --git a/components/category/category-side-list.vue b/components/category/category-side-list.vue index 760d369..4cb9e61 100644 --- a/components/category/category-side-list.vue +++ b/components/category/category-side-list.vue @@ -7,7 +7,8 @@ :class="{ active: item.id === currentId }" @click="$emit('change', item)" > - {{ item.name }} + + {{ item.name }} @@ -26,26 +27,49 @@ defineEmits(['change']) diff --git a/components/category/sort-bar.vue b/components/category/sort-bar.vue index d0805e8..86bb5ee 100644 --- a/components/category/sort-bar.vue +++ b/components/category/sort-bar.vue @@ -5,31 +5,31 @@ :class="{ active: sort === 'releaseTime' }" @click="onClick('releaseTime')" > - 综合 + 综合 - 销量 + 销量 - 价格 + 价格 @@ -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; } diff --git a/components/category/sub-tag-bar.vue b/components/category/sub-tag-bar.vue index 3d1d087..33ba9e6 100644 --- a/components/category/sub-tag-bar.vue +++ b/components/category/sub-tag-bar.vue @@ -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 : '' ) @@ -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; } } diff --git a/components/category/tpl-category-goods.vue b/components/category/tpl-category-goods.vue index 70a8bd0..f74ba35 100644 --- a/components/category/tpl-category-goods.vue +++ b/components/category/tpl-category-goods.vue @@ -8,13 +8,6 @@ mode="icon" @change="onL1Change" /> - - + + - - {{ failed ? '加载失败,请点击重试' : '暂无商品' }} - 重试 + + + 重试 + @@ -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, }) } @@ -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; } diff --git a/components/m-buy/goods.vue b/components/m-buy/goods.vue index 1f2f677..05d9fcd 100644 --- a/components/m-buy/goods.vue +++ b/components/m-buy/goods.vue @@ -27,18 +27,7 @@ - -
-
- - ¥ - {{ goodsFormatPrice(item.price)[0] }} - .{{ goodsFormatPrice(item.price)[1] }} - - {{ item.num }}{{ goodsDetail.goodsUnit }} -
-
-
+
¥ {{ goodsFormatPrice(goodsDetail.price)[0] }} @@ -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('') @@ -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; diff --git a/components/m-goods-list/base-list.vue b/components/m-goods-list/base-list.vue index 07b6ccb..2187388 100644 --- a/components/m-goods-list/base-list.vue +++ b/components/m-goods-list/base-list.vue @@ -82,9 +82,6 @@
-
- 批 -
-
- 批 -
劵 满减 @@ -46,18 +43,32 @@ -
+
- +
-
{{ item.goodsName }}
+
+ 自营 + {{ item.goodsName }} +
{{ item.sellingPoint }}
{{ specSummary(item) }}
+
+
+ 劵 + 满减 + 秒杀 +
+
+
+ 已售 {{ item.buyCount || '0' }} + {{ item.commentNum }}条评论 +
¥{{ goodsFormatPrice(item.price )[0] }} .{{ @@ -66,25 +77,11 @@
¥{{ item.marketPrice }}
- +
-
-
- 批 -
-
- 劵 - 满减 - 秒杀 -
-
-
- 已售 {{ item.buyCount || '0' }} - {{ item.commentNum || '0' }}条评论 -
-
- +
+ 自营 {{ item.storeName }} 进店 @@ -93,18 +90,20 @@
-
- @@ -169,7 +188,7 @@ function navigateToList(sid: any, tid: any) { @@ -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 */ diff --git a/utils/categoryPageSetting.js b/utils/categoryPageSetting.js index 0976060..abd265b 100644 --- a/utils/categoryPageSetting.js +++ b/utils/categoryPageSetting.js @@ -6,7 +6,7 @@ export const DEFAULT_CATEGORY_PAGE_SETTING = { tags: true, selfTag: true, price: true, - linePrice: true, + linePrice: false, sales: true, cart: true, },