|
|
@@ -1,84 +1,49 @@
|
|
|
<template>
|
|
|
<view class="goodsType">
|
|
|
- <uv-navbar
|
|
|
- title="商品分类"
|
|
|
- placeholder
|
|
|
- leftIcon=""
|
|
|
- bgColor="rgba(0,0,0,0)"
|
|
|
- ></uv-navbar>
|
|
|
- <view
|
|
|
- class="topsearch u-p30 u-flex-center-sb"
|
|
|
- style="paddingtop: 20rpx"
|
|
|
- @click="goSearch()"
|
|
|
- >
|
|
|
- <view class="u-flex1 u-flex-center leftbox">
|
|
|
- <text class="iconfont u-font30 u-666 u-ml30"></text>
|
|
|
- <text class="u-font22 u-CCC u-ml20">请输入搜索关键字</text>
|
|
|
- <text class="search-btn">搜索</text>
|
|
|
+ <view class="goodsHeader">
|
|
|
+ <view :style="{ height: `${statusBarHeight}px` }"></view>
|
|
|
+ <view class="classification-title" :style="[
|
|
|
+ { height: `${menuButtonHeight}px`, lineHeight: `${menuButtonHeight}px` },
|
|
|
+ ]">
|
|
|
+ <text class="title-txt">商品分类</text>
|
|
|
+ </view>
|
|
|
+ <view class="topsearch u-p30 u-flex-center-sb" @click="goSearch()">
|
|
|
+ <view class="u-flex1 u-flex-center leftbox">
|
|
|
+ <text class="iconfont u-font30 u-666 u-ml30"></text>
|
|
|
+ <text class="u-font22 u-CCC u-ml20">请输入搜索关键字</text>
|
|
|
+ <text class="search-btn">搜索</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- <text class="u-font28 u-1A1A1A u-ml30">搜索</text> -->
|
|
|
</view>
|
|
|
- <!-- <view
|
|
|
- class=""
|
|
|
- style="height: 13rpx; background-color: rgba(230, 230, 230, 0.4)"
|
|
|
- ></view> -->
|
|
|
+
|
|
|
<view class="goodsBox">
|
|
|
<scroll-view scroll-y="true" class="goodsBox_lScroll">
|
|
|
<view class="goodsBox_l">
|
|
|
- <view
|
|
|
- v-for="(v, i) in firstList"
|
|
|
- :key="i"
|
|
|
- :class="activeFirst.categoryId === v.categoryId ? 'active' : ''"
|
|
|
- @click="clickFirst(v)"
|
|
|
- >{{ v.categoryName }}</view
|
|
|
- >
|
|
|
+ <view v-for="(v, i) in firstList" :key="i" :class="activeFirst.categoryId === v.categoryId ? 'active' : ''"
|
|
|
+ @click="clickFirst(v)">{{ v.categoryName }}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="goodsBox_r">
|
|
|
<scroll-view scroll-x="true" class="goodsBox_r_t">
|
|
|
<view class="goodsBox_r_t_box">
|
|
|
- <view
|
|
|
- class="goodsBox_r_t_item"
|
|
|
- v-for="(v, i) in secondList"
|
|
|
- :key="'a' + i"
|
|
|
- :class="activeSecond.categoryId === v.categoryId ? 'active' : ''"
|
|
|
- @click="clickSecond(v)"
|
|
|
- >{{ v.categoryName }}</view
|
|
|
- >
|
|
|
+ <view class="goodsBox_r_t_item" v-for="(v, i) in secondList" :key="'a' + i"
|
|
|
+ :class="activeSecond.categoryId === v.categoryId ? 'active' : ''" @click="clickSecond(v)">{{
|
|
|
+ v.categoryName }}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- class="listScroll"
|
|
|
- @scrolltolower="loadMore"
|
|
|
- >
|
|
|
+ <scroll-view scroll-y="true" class="listScroll" @scrolltolower="loadMore">
|
|
|
<view class="list">
|
|
|
- <view
|
|
|
- class="item"
|
|
|
- v-for="(v, i) in list"
|
|
|
- :key="i"
|
|
|
- @click="goDetails(v)"
|
|
|
- >
|
|
|
+ <view class="item" v-for="(v, i) in list" :key="i" @click="goDetails(v)">
|
|
|
<image :src="v.coverImage" mode=""></image>
|
|
|
<view class="item_r">
|
|
|
<view class="item_r_title">{{ v.title }}</view>
|
|
|
<view class="item_r_price">
|
|
|
- <text
|
|
|
- v-if="v.productPaymentMode == 1"
|
|
|
- style="font-size: 28rpx"
|
|
|
- >{{ v.minPoints }}积分</text
|
|
|
- >
|
|
|
- <rich-text
|
|
|
- v-else
|
|
|
- :nodes="$mUtil.priceBigSmall(v.salePrice || v.minSalePrice)"
|
|
|
- ></rich-text>
|
|
|
+ <text v-if="v.productPaymentMode == 1" style="font-size: 28rpx">{{ v.minPoints }}积分</text>
|
|
|
+ <rich-text v-else :nodes="$mUtil.priceBigSmall(v.salePrice || v.minSalePrice)"></rich-text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <noData
|
|
|
- v-if="list.length <= 0"
|
|
|
- :config="{ top: 20, content: '暂无商品~' }"
|
|
|
- ></noData>
|
|
|
+ <noData v-if="list.length <= 0" :config="{ top: 20, content: '暂无商品~' }"></noData>
|
|
|
<uv-load-more v-else :status="status" />
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
@@ -90,10 +55,9 @@
|
|
|
<script setup>
|
|
|
import { merchantCategoryTree_Api, shopProductPage_Api } from "@/api/shop.js";
|
|
|
import { ref, getCurrentInstance } from "vue";
|
|
|
-const { proxy } = getCurrentInstance();
|
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
|
const status = ref("nomore"); //loadmore - 加载前,loading - 加载中,nomore - 没有数据
|
|
|
-const tabTop = ref(0);
|
|
|
+
|
|
|
const firstList = ref([]);
|
|
|
const secondList = ref([]);
|
|
|
const activeFirst = ref({});
|
|
|
@@ -104,12 +68,24 @@ const params = ref({
|
|
|
pageNum: 1,
|
|
|
productCategoryId: undefined,
|
|
|
});
|
|
|
+const statusBarHeight = ref(0);
|
|
|
+const menuButtonHeight = ref(44);
|
|
|
+
|
|
|
onLoad((options) => {
|
|
|
uni.getSystemInfo({
|
|
|
success: (res) => {
|
|
|
- tabTop.value = res.statusBarHeight + 44;
|
|
|
+ statusBarHeight.value = res.statusBarHeight;
|
|
|
+ // console.log("statusBarHeight==>", res.statusBarHeight);
|
|
|
},
|
|
|
});
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ try {
|
|
|
+ let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
+ // console.log("menuButtonInfo", menuButtonInfo);
|
|
|
+ menuButtonHeight.value = menuButtonInfo.height + 10;
|
|
|
+ } catch (error) {
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
getTypeList();
|
|
|
});
|
|
|
const goBack = () => {
|
|
|
@@ -185,9 +161,32 @@ const goSearch = () => {
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
+page {
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
.goodsType {
|
|
|
background: linear-gradient(180deg, #fffaec, #ffffff 36%);
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
+.goodsHeader {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.classification-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC-Bold;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ color: #1a1a1a;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
.leftbox {
|
|
|
height: 80rpx;
|
|
|
line-height: 80rpx;
|
|
|
@@ -196,6 +195,7 @@ const goSearch = () => {
|
|
|
border-radius: 35rpx;
|
|
|
padding: 5rpx;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.search-btn {
|
|
|
margin-left: auto;
|
|
|
width: 124rpx;
|
|
|
@@ -207,15 +207,22 @@ const goSearch = () => {
|
|
|
color: #1a1a1a;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goodsBox {
|
|
|
// background-color: rgba(230, 230, 230, 0.4);
|
|
|
display: flex;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+
|
|
|
.goodsBox_lScroll {
|
|
|
+ width: 176rpx;
|
|
|
background-color: #f4f4f4;
|
|
|
- height: calc(100vh - 150rpx - v-bind(tabTop) * 1rpx);
|
|
|
+ height: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.goodsBox_l {
|
|
|
- > view {
|
|
|
+ >view {
|
|
|
width: 176rpx;
|
|
|
height: 100rpx;
|
|
|
text-align: center;
|
|
|
@@ -227,13 +234,15 @@ const goSearch = () => {
|
|
|
text-overflow: ellipsis;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
- > .active {
|
|
|
+
|
|
|
+ >.active {
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
|
|
color: #fa6137;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: bold;
|
|
|
border-radius: 0rpx 20rpx 20rpx 0rpx;
|
|
|
+
|
|
|
&::after {
|
|
|
width: 8rpx;
|
|
|
height: 40rpx;
|
|
|
@@ -247,23 +256,34 @@ const goSearch = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goodsBox_r {
|
|
|
// background: #fff;
|
|
|
width: 570rpx;
|
|
|
padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+
|
|
|
.goodsBox_r_t {
|
|
|
width: 510rpx;
|
|
|
height: 90rpx;
|
|
|
line-height: 90rpx;
|
|
|
border-bottom: 1px solid #e7e7e7;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
.goodsBox_r_t_box {
|
|
|
display: flex;
|
|
|
flex-wrap: nowrap;
|
|
|
+
|
|
|
.active {
|
|
|
color: #fa6138;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goodsBox_r_t_item {
|
|
|
margin-right: 45rpx;
|
|
|
display: inline-block;
|
|
|
@@ -273,11 +293,13 @@ const goSearch = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list {
|
|
|
.item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 30rpx;
|
|
|
+
|
|
|
image {
|
|
|
width: 160rpx;
|
|
|
height: 160rpx;
|
|
|
@@ -285,6 +307,7 @@ const goSearch = () => {
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+
|
|
|
.item_r {
|
|
|
padding-bottom: 25rpx;
|
|
|
border-bottom: 1px solid #e7e7e7;
|
|
|
@@ -293,6 +316,7 @@ const goSearch = () => {
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
flex: 1;
|
|
|
+
|
|
|
.item_r_title {
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
@@ -301,9 +325,10 @@ const goSearch = () => {
|
|
|
-webkit-box-orient: vertical;
|
|
|
word-wrap: break-word;
|
|
|
word-break: break-all;
|
|
|
- white-space: normal !important ;
|
|
|
+ white-space: normal !important;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
+
|
|
|
.item_r_price {
|
|
|
font-size: 32rpx;
|
|
|
color: #ff6600;
|
|
|
@@ -315,7 +340,9 @@ const goSearch = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.listScroll {
|
|
|
- height: calc(100vh - 220rpx - v-bind(tabTop) * 1rpx);
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|