代码提交

pages/goodsDetail/goodsDetail.vue

@@ -1,17 +1,10 @@
 <template>
   <layout class="goodsDetail">
-    <!--    <uv-navbar-->
-    <!--        fixed-->
-    <!--        :safeAreaInsetTop="true"-->
-    <!--        title=""-->
-    <!--        bg-color="transparent"-->
-    <!--        @leftClick="goBack"-->
-    <!--    />-->
+    <view :style="computedHeightStyle"></view>
     <Header
+        ref="headerRef"
         :propUp="false"
-        :scrollTop="scrollTop"
     >
-
     </Header>
     <view v-if="detailData">
       <swiper
@@ -28,7 +21,7 @@
             <image
                 class="image"
                 :src="item"
-                mode="widthFix"
+                mode="aspectFill"
             />
           </view>
         </swiper-item>
@@ -44,9 +37,9 @@
           </view>
           <view
               class="goodsDetail-price goodsDetail-price-original"
-              v-if="(storeAttr&& storeAttr.otPrice) || (storeInfo&&storeInfo.otPrice)"
+              v-if="storeAttr && storeInfo"
           >
-            ¥{{ storeAttr.otPrice || storeInfo.otPrice }}
+            ¥{{ storeAttr&&storeAttr.otPrice || storeInfo&&storeInfo.otPrice }}
           </view>
         </view>
         <view class="goodsDetail-storeName">{{ storeInfo.storeName }}</view>
@@ -115,7 +108,10 @@
 
 
       <view class="card full">
-        <view class="card-head" :style="{borderBottom:detailData.replyCount<=0?'none':'1rpx solid #e6e6e6'}">
+        <view
+            class="card-head"
+            :style="{borderBottom:detailData.replyCount<=0?'none':'1rpx solid #e6e6e6'}"
+        >
           <view class="card-title">商品评价({{ detailData.replyCount }})</view>
           <view
               class="card-more"
@@ -256,7 +252,7 @@
 </template>
 
 <script setup>
-import { ref, unref } from 'vue'
+import { computed, onMounted, ref, unref } from 'vue'
 import { collectSingle, getProductDetail, unCollectSingle } from '@/api/product'
 import { getCartAdd, getCartCount } from '@/api/cart'
 import { onLoad, onPageScroll } from '@dcloudio/uni-app'
@@ -265,6 +261,7 @@ import { useInterface } from "@/hooks/useInterface";
 import Header from '@/components/Header/index.vue'
 import GoodCouponSelect from "@/components/good-coupon-select/good-coupon-select.vue";
 import UvIcon from "@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue";
+import { useScroll } from "@/hooks/useScroll";
 
 const {push, getParams, pushToTab, goBack} = useRouter();
 const {toast} = useInterface()
@@ -279,6 +276,16 @@ const cardCount = ref(null)
 const selectAttrPanel = ref(false)
 const selectCouponPanel = ref(false)
 const selectCoupon = ref(false)
+const headerRef = ref()
+
+const computedHeightStyle = computed(() => {
+  const style = {width: '100 %', height: 0,background:'#f5f5f5'}
+  if (!headerRef.value || !headerRef.value.heightInfo) return style
+  return {...style, height: `${ headerRef.value.heightInfo.statusBarHeight }px`}
+})
+
+onMounted(() => {
+})
 
 const handleGetDetail = async (id) => {
   try {
@@ -312,7 +319,7 @@ onLoad((options) => {
   handleGetDetail(params.id)
   handleGetCartCount(params.id)
 })
-
+useScroll()
 const goToService = () => {
   toast({title: '😒敬请期待😒'})
 }
@@ -407,10 +414,7 @@ const handleGetCartCount = async () => {
   cardCount.value = count.count
 }
 
-const scrollTop = ref(0)
-onPageScroll((e) => {
-  scrollTop.value = e.scrollTop
-})
+
 
 </script>
 
@@ -743,7 +747,9 @@ onPageScroll((e) => {
 
 // ======================= 👇 kahu ===
 .row-context {
-  margin: 30rpx 0 ;
+  margin: 30rpx 0;
+
+
   .label-row {
     @include useFlex(space-between, center);
     @include usePadding(30, 20);
@@ -775,6 +781,20 @@ onPageScroll((e) => {
     .value {
       @include useFlex(flex-end, center);
       flex-shrink: 0;
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+}
+
+.swiper {
+  .swiper-item {
+    width: 100%;
+    height: 100%;
+
+    .image {
+      width: inherit;
+      height: inherit;
     }
   }
 }