下拉隐藏

components/shopListPopup.vue

@@ -1,16 +1,19 @@
 <template>
+	<!-- fixed -->
 	<up-popup :show="show" closeable round="10" @close="close">
 		<view class="address-popup">
 			<view class="head-title">选择提货点</view>
 			<view class="list-admin">
-        <up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword" @custom="searchKeyword"></up-search>
+				<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
+					@custom="searchKeyword"></up-search>
 			</view>
 			<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
 				<view class="row" v-for="(item,index) in list" :key="index" @click="addressType=index">
 					<view class="content">
 						<view class="top">
 							<view class="name">{{item.mer_name}}</view>
-              <u-tag v-if="item.distance" style="pointer-events: none;" :text="item.distance" type="success" plain size="mini"></u-tag>
+							<u-tag v-if="item.distance" style="pointer-events: none;" :text="item.distance"
+								type="success" plain size="mini"></u-tag>
 						</view>
 						<view class="bottom u-line-2">{{item.service_phone}}</view>
 					</view>
@@ -24,7 +27,9 @@
 </template>
 
 <script setup>
-  import { ref } from "vue"
+	import {
+		ref
+	} from "vue"
 
 	const addressType = ref(-1)
 

pageQuota/goodDetail/index.vue

@@ -0,0 +1,11 @@
+<template>
+	<view class="">
+		商品详情
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pageQuota/quotation/index.vue

@@ -0,0 +1,18 @@
+<template>
+	<view class="">
+		<up-navbar placeholder style="z-index: 10080;">
+			<template #left>
+				<view style="font-size: 30rpx;font-weight: bold;" @click="test">报价单</view>
+			</template>
+		</up-navbar>
+
+		dgfsdhjg
+
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages.json

@@ -81,7 +81,26 @@
 				}
 			}
 		]
+	}, {
+		"root": "pageQuota",
+		"pages": [{
+				"path": "quotation/index",
+				"style": {
+					"navigationBarTitleText": "报价单",
+					"enablePullDownRefresh": false,
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path": "goodDetail/index",
+				"style": {
+					"navigationBarTitleText": "商品详情",
+					"enablePullDownRefresh": false
+				}
+			}
+		]
 	}],
+
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "",

pages/index/index.vue

@@ -2,12 +2,13 @@
 	<view class="content">
 		<up-navbar placeholder style="z-index: 10080;">
 			<template #left>
-        <view style="font-size: 30rpx;font-weight: bold;">惠农批发</view>
+				<view style="font-size: 30rpx;font-weight: bold;" @click="test">惠农批发</view>
 			</template>
 		</up-navbar>
 		<view class="navbar">
 			<view style="width: 500rpx;">
-        <up-search placeholder="请输入商品" @search="searchKeyword" v-model="keyword" :showAction="false"></up-search>
+				<up-search placeholder="请输入商品" @search="searchKeyword" v-model="keyword"
+					:showAction="false"></up-search>
 			</view>
 			<view class="nav-item" @click="navTo('/pages/cart/cart')">
 				<image src="@/static/tab/ba.png"></image>
@@ -18,11 +19,11 @@
 				<text>个人中心</text>
 			</view>
 		</view>
-    <view style="position: relative;overflow: hidden;">
+		<view class='headScoll' ref='headscroll' :style="{height:isScroll?'0':'200rpx'}">
 			<scroll-view class="head-view" scroll-x>
 				<view class="list">
-          <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
+					<view class="item" :class="{'item-active': topActive===item.id}"
-            :key="index" @click="changeOne(item, index)">
+						v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
 						<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
 						<view class="c-text u-line-1">{{item.name}}</view>
 					</view>
@@ -41,9 +42,10 @@
 				<view class="head-title">全部分类</view>
 				<scroll-view scroll-y style="height: 600rpx;">
 					<view class="list">
-            <view class="item" :class="{'item-active': topActive===item.id}" v-for="(item, index) in goodClassList"
+						<view class="item" :class="{'item-active': topActive===item.id}"
-              :key="index" @click="changeOne(item, index)">
+							v-for="(item, index) in goodClassList" :key="index" @click="changeOne(item, index)">
-              <view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image></view>
+							<view class="c-img"><up-image height="100rpx" width="100rpx" :src="item.pic"></up-image>
+							</view>
 							<view class="c-text u-line-1">{{item.name}}</view>
 						</view>
 					</view>
@@ -52,8 +54,9 @@
 		</viewPopup>
 		<view class="scroll-box">
 			<scroll-view class="left" scroll-y>
-        <view class="item u-line-1" :class="{'item-active': leftActive===item.id}" v-for="(item, index) in goodClassTow"
+				<view class="item u-line-1" :class="{'item-active': leftActive===item.id}"
-          :key="index" @click="changeTwo(item, index)">{{item.name}}</view>
+					v-for="(item, index) in goodClassTow" :key="index" @click="changeTwo(item, index)">{{item.name}}
+				</view>
 				<view style="width: 100%;height: 300rpx;"></view>
 			</scroll-view>
 			<view class="right">
@@ -74,24 +77,27 @@
 						<view class="item" :class="{'order-active': where.order==''}" @click="changeOrder('')">综合</view>
 						<view class="item" :class="{'order-active': where.order=='desc'||where.order=='asc'}"
 							@click="changeOrder(where.order=='asc'?'desc':'asc')">价格</view>
-            <view class="item" :class="{'order-active': where.order=='sales'}" @click="changeOrder('sales')">销量</view>
+						<view class="item" :class="{'order-active': where.order=='sales'}"
+							@click="changeOrder('sales')">销量</view>
 					</view>
 				</view>
 				<viewPopup v-if="show===2" @close="show=0">
 					<view class="cateOne">
 						<scroll-view scroll-y style="height: 230rpx;">
 							<view class="classify-list">
-                <view class="classify-list-item u-line-1" :class="{'item-active': rightActive===item.id}"
+								<view class="classify-list-item u-line-1"
-                  v-for="(item, index) in goodClassThree" :key="index" @click="changeThree(item, index)">
+									:class="{'item-active': rightActive===item.id}"
+									v-for="(item, index) in goodClassThree" :key="index"
+									@click="changeThree(item, index)">
 									{{item.name}}
 								</view>
 							</view>
 						</scroll-view>
 					</view>
 				</viewPopup>
-        <scroll-view class="list" scroll-y @scrolltolower="loadMoreGood">
+				<scroll-view class="list" scroll-y @scrolltolower="loadMoreGood" @scroll='hideHeadView'>
-          <view class="shop-item" v-for="(item, index) in goodList" :key="item.id" @click="openGoodPopup(item)">
+					<view class="shop-item" v-for="(item, index) in goodList" :key="item.id">
-            <view class="shop-img">
+						<view class="shop-img" @tap="navTo(`/pageQuota/goodDetail/index`)">
 							<up-image width="160rpx" height="160rpx" :src="item.imgs"></up-image>
 						</view>
 						<view class="shop-content">
@@ -105,7 +111,7 @@
 							</view>
 							<view class="price-btn">
 								<view class="price">￥{{item.sell}}</view>
-                <view class="btn">
+								<view class="btn" @click="openGoodPopup(item)">
 									<u--icon name="plus-circle-fill" size="20" color="#20b128"></u--icon>
 								</view>
 							</view>
@@ -140,14 +146,41 @@
 </template>
 
 <script setup>
-  import { onLoad, onShow } from "@dcloudio/uni-app"
+	import {
-  import { reactive, ref } from "vue"
+		onLoad,
-  import { goodListApi, goodClassListApi } from "@/api/good.js"
+		onShow
-  import { cartCreateApi, cartChangeApi, cartListApi } from "@/api/cart.js"
+	} from "@dcloudio/uni-app"
+	import {
+		reactive,
+		ref
+	} from "vue"
+	import {
+		goodListApi,
+		goodClassListApi
+	} from "@/api/good.js"
+	import {
+		cartCreateApi,
+		cartChangeApi,
+		cartListApi
+	} from "@/api/cart.js"
 	import viewPopup from "@/components/viewPopup.vue"
 	import goodPopup from "@/components/goodPopup.vue"
 	import useCartStore from "@/store/cart.js"
 
+	/*商品列表滚动隐藏头部导航 */
+	const isScroll = ref(false)
+	let lastScollTop = 0
+	const hideHeadView = (e) => {
+		isScroll.value = e.detail.scrollTop > lastScollTop
+		lastScollTop = e.detail.scrollTop
+	}
+	/*商品列表滚动隐藏头部导航结束 */
+	const test = () => {
+		uni.navigateTo({
+			url: '/pageQuota/quotation/index'
+		})
+	}
+
 	const cartStore = useCartStore();
 
 	const show = ref(0);
@@ -454,6 +487,7 @@
 			justify-content: center;
 			grid-gap: 20rpx;
 
+
 			.item {
 				width: 120rpx;
 				margin: 0 auto;
@@ -524,9 +558,9 @@
 		display: flex;
 
 		.left {
-      height: calc(100vh - var(--window-top) - var(--window-bottom) - 500rpx);
+			height: calc(100vh - var(--window-top) - var(--window-bottom) - 300rpx);
 			/* #ifdef H5 */
-      height: calc(100vh - 44px - 300rpx);
+			height: calc(100vh - 44px - 100rpx);
 			/* #endif */
 			width: 170rpx;
 			box-sizing: border-box;
@@ -559,9 +593,9 @@
 		}
 
 		.right {
-      height: calc(100vh - var(--window-top) - 500rpx);
+			height: calc(100vh - var(--window-top) - 300rpx);
 			/* #ifdef H5 */
-      height: calc(100vh - 96px - 180rpx);
+			height: calc(100vh - 96px + 20rpx);
 			/* #endif */
 			width: 580rpx;
 			box-sizing: border-box;
@@ -626,9 +660,9 @@
 			}
 
 			.list {
-        height: calc(100vh - var(--window-top) - 600rpx);
+				height: calc(100vh - var(--window-top) - 400rpx);
 				/* #ifdef H5 */
-        height: calc(100vh - 44px - 400rpx);
+				height: calc(100vh - 44px - 200rpx);
 
 				/* #endif */
 				.shop-item {
@@ -743,4 +777,10 @@
 			}
 		}
 	}
+
+	.headScoll {
+		position: relative;
+		overflow: hidden;
+		transition: 400ms;
+	}
 </style>