【fix】优化代码

pages/goodsDetail/goodsDetail.vue

@@ -1,10 +1,24 @@
 <template>
   <view class="goodsDetail">
-    <view :style="computedHeightStyle"></view>
+    <!--    <view :style="computedHeightStyle"></view>-->
     <Header
+        circle-back
         ref="headerRef"
         :propUp="false"
-        :scroll-top="scrollTop" />
+        :scroll-top="scrollTop">
+      <template #right>
+        <view
+            class="share-icon"
+            @click="doShare(detailData.storeInfo)"
+            :style="computedShareIconStyle">
+          <uv-icon
+              color="#000"
+              name="share-square"
+              size="16"
+          />
+        </view>
+      </template>
+    </Header>
     <view v-if="!showEmpty">
       <view v-if="detailData">
         <swiper
@@ -43,6 +57,7 @@
             </view>
           </view>
           <view
+              v-if="detailData.couponSplicing"
               class="label-row"
               @click="discountCouponSelect('select')">
             <view class="label">
@@ -261,6 +276,7 @@
     </view>
     <GoodEmpty v-else />
     <Recommend />
+    <view style="height: 100rpx;"></view>
     <GoodAttrSelect
         v-if="detailData && storeAttr"
         ref="selectAttrPanel"
@@ -268,6 +284,11 @@
         :sku-id="storeAttr.id"
         @select="handleSelectAttr"
     />
+    <GoodsSharePopup
+        ref="goodsShare"
+        @share="shareConfirm" />
+
+    <GoodsPoster ref="goodsPoster" />
   </view>
 </template>
 
@@ -277,7 +298,7 @@ import { productAffirmCollectIcon, productCartIcon, productCollectIcon, productC
 import { computed, ref, unref } from 'vue'
 import { collectSingle, getProductDetail, unCollectSingle } from '@/api/product'
 import { getCartAdd, getCartCount } from '@/api/cart'
-import {onLoad, onPageScroll, onShareAppMessage, onShareTimeline} from '@dcloudio/uni-app'
+import { onLoad, onPageScroll, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import { useRouter } from "@/hooks/useRouter";
 import { useInterface } from "@/hooks/useInterface";
 import Header from "@/components/Header/index.vue";
@@ -293,21 +314,45 @@ import Blank from "@/components/blank/blank.vue";
 import GroupByOrderList from "@/pages/goodsDetail/components/GroupByOrderList.vue";
 import { getCanGroupByList } from "@/api/goods";
 import { useService } from "@/hooks/useService";
-import { useMainStore } from "@/store/store";
+import { useMainStore } from "@/store/modules/useMainStore";
 import { storeToRefs } from "pinia";
+import { useGlobalRequestStore } from "@/store/modules/useGlobalRequestStore";
+import GoodsPoster from "@/components/Poster/Goods.vue";
+import GoodsSharePopup from "@/components/Share/Goods.vue";
 
 const {push, getParams, pushToTab, goBack} = useRouter();
 const {toast} = useInterface();
 const mainStore = useMainStore();
-const { user } = storeToRefs(mainStore)
+const globalRequestStore = useGlobalRequestStore();
+const {user} = storeToRefs(mainStore)
 // =========================== 分享 =================================
-const {shareAppMessage, shareTimeline, goodsDetailShare} = useShare()
+const {shareAppMessage, shareTimeline, goodsDetailShare, shareH5} = useShare()
 onShareAppMessage(shareAppMessage)
 onShareTimeline(shareTimeline)
+const goodsShare = ref()
+const goodsPoster = ref()
+
+function doShare(goods) {
+  console.log(goods)
+  goodsShare.value.open('分享商品', goods)
+}
+
+async function shareConfirm(shareItem, goods) {
+  await globalRequestStore.doShareToAddIntegral()
+  goodsDetailShare(goods)
+  if (shareItem.value === 'photo') {
+    goodsPoster.value.open(goods)
+    return
+  }
+  if (shareItem.value === 'wechat') {
+    shareH5()
+  }
+}
 
 // =========================== hooks 生命周期 =================================
 const {scrollTop} = useScroll()
-onPageScroll(()=>{})
+onPageScroll(() => {
+})
 const paramsObj = ref({})
 onLoad((options) => {
   const params = getParams(options)
@@ -318,7 +363,7 @@ onLoad((options) => {
   // 处理从分销商商品分享进入
   handleJumpFromDistributionInvite(params)
   handleGetDetail({productId: params.id, skuId: params.skuId ? params.skuId : ''})
-  if(user.value){
+  if (user.value) {
     handleGetCartCount(params.id)
   }
 })
@@ -356,6 +401,14 @@ const computedHeightStyle = computed(() => {
   return {...style, height: `${ headerRef.value.heightInfo.statusBarHeight }px`}
 })
 
+const computedShareIconStyle = computed(() => {
+  const style = {width: '32px', height: '32px'}
+  if (!headerRef.value || headerRef.value?.menuInfo.height === 0) return style
+  return {
+    width: headerRef.value.menuInfo.height + 'px',
+    height: headerRef.value.menuInfo.height + 'px',
+  }
+})
 /** 选中的sku是否是活动sku */
 const skuIsActivity = computed(() => {
   if (!storeAttr.value) return false
@@ -391,6 +444,7 @@ const handleGetDetail = async (data) => {
     setDefaultAttr(detail)
     await handleGetCanGroupByList()
   } catch (error) {
+    console.dir(error)
   }
 };
 
@@ -537,7 +591,7 @@ const handleSelectAttr = (attr) => {
       break;
   }
   actionType.value = "";
-  selectAttrPanel.value.close();
+  selectAttrPanel.value?.close();
 };
 
 /**
@@ -675,7 +729,7 @@ const handleDoGroupBy = (orderInfo) => {
  * 去客服
  */
 const goToService = async () => {
-  const {getServiceData,openService} = useService();
+  const {getServiceData, openService} = useService();
   await getServiceData()
   await openService()
 };
@@ -691,6 +745,19 @@ const goToShopCart = () => {
 </script>
 
 <style lang="scss">
+.share-icon {
+  width: 64rpx;
+  height: 64rpx;
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 10rpx rgba(225, 225, 225, 0.48);
+  border: 1rpx solid rgba(225, 225, 225, 0.8);
+  box-sizing: border-box;
+}
+
 .search {
   padding: 0 17px;
 }
@@ -717,6 +784,7 @@ const goToShopCart = () => {
 
 .goodsDetail {
   width: 100%;
+  overflow-x: hidden;
 
   &-storeName {
     line-height: 40rpx;