chore: 原生热区组件合并代码

pages/activity/engine/PageRenderEngine.vue

@@ -7,30 +7,17 @@ import HotArea from "./components/HotArea.vue";
 
 const props = defineProps<{
   id: string
+  pageConfig?: PageConfig
   debugMode?: boolean
 }>()
 
-const refreshingPageConfig = ref(false)
-const pageConfig = ref({} as PageConfig)
 const debugMode = computed(() => props.debugMode)
 
-async function refreshPageConfig() {
-  refreshingPageConfig.value = true
-  const resp = await fetchPageConfig(props.id)
-  pageConfig.value = JSON.parse(resp.data.content)
-  refreshingPageConfig.value = false
-  console.log(pageConfig.value)
-}
-
-onMounted(async () => {
-  await refreshPageConfig()
-})
-
 provide('debugMode', debugMode)
 </script>
 
 <template>
-  <view v-if="!refreshingPageConfig" class="page-render-engine">
+  <view v-if="pageConfig" class="page-render-engine">
     <template v-for="(component, index) in pageConfig.components" :key="'comp-' + index">
       <HotArea
         v-if="component.name === 'HotArea'"
@@ -38,9 +25,6 @@ provide('debugMode', debugMode)
       />
     </template>
   </view>
-  <view v-else>
-    加载中...
-  </view>
 </template>
 
 <style scoped lang="less">

pages/activity/engine/api.ts

@@ -4,5 +4,5 @@ import {CodeResponse, ThematicPageType} from "./types";
 const {api} = requestModule
 
 export function fetchPageConfig(id: string) {
-	return api.get('/c/thematicPage/data', {id}) as Promise<CodeResponse<ThematicPageType>>
+	return api.get('/c/hotzone/data', {id}) as Promise<CodeResponse<ThematicPageType>>
 }

pages/activity/engine/components/HotArea.vue

@@ -28,9 +28,44 @@ const debugMode = inject('debugMode', false)
 
 function transformClickAreaProperties(item: ClickAreaType) {
   let link;
-  if(item.link){
+  if (item.link) {
     switch (item.link.type) {
-      case 'MINI_APP_THIRD':
+      case 'GOODS': // 星妈优选商品
+        link = {
+          type: JumpType.MINI,
+          url: `subPackages/shopMainProcess/product/index?productId=${item.link.value}&skuId=${item.link.skuId}`,
+          extra: {
+            appId: 'wx4205ec55b793245e',
+          }
+        }
+        break
+      case 'PAGE':  // 页面
+        link = {
+          type: JumpType.INNER,
+          url: item.link.url,
+        }
+        break
+      case 'LINK': // 自定义链接
+        link = {
+          type: JumpType.INNER,
+          url: '/pages/activity/index?url=' + encodeURIComponent(item.link.url),
+        }
+        break
+      case 'MINI_APP': // 小程序
+        const pageType = item.link.pageType.toLowerCase()
+        if(pageType == 'other'){
+          link = {
+            type: JumpType.INNER,
+            url: item.link.url,
+          }
+        }else{
+          link = {
+            type: JumpType.INNER,
+            url: '/pages/index/index?pageType=' + pageType,
+          }
+        }
+        break
+      case 'MINI_APP_THIRD': // 第三方小程序
         link = {
           type: JumpType.MINI,
           url: item.link.url,
@@ -39,6 +74,15 @@ function transformClickAreaProperties(item: ClickAreaType) {
           }
         }
         break
+      case 'SELF_GOODS': // 星妈会商品
+        link = {
+          type: JumpType.INNER,
+          url: `/v3/goodDetail/goodDetail?gid=${item.link.value}`,
+        }
+        break
+      case 'VIDEO': // 视频
+        // todo 视频播放
+        break
     }
   }
   return {

pages/activity/page.vue

 <script setup lang="ts">
-import {ref} from 'vue'
+import {ref, provide} from 'vue'
 import PageRenderEngine from "./engine/PageRenderEngine.vue";
-import {onLoad} from "@dcloudio/uni-app";
+import {onLoad, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
+import {fetchPageConfig} from "./engine/api";
+import {PageConfig} from "./engine/types";
+import {useUserStore} from "@/stores/user";
+
+const userStore = useUserStore();
 
 const pageOptions = ref({})
 const pageId = ref<string>()
 const debugMode = ref(false)
+const shareData = ref({
+  title: '星妈会',
+  imageUrl: 'https://course.feihe.com/momclub-picture/activity/1015/v1/share-image.png',
+  path: '/pages/activity/page',
+})
+const refreshingPageConfig = ref(false)
+const pageConfig = ref<PageConfig>()
+
 
 function navBack() {
   try {
@@ -15,7 +28,6 @@ function navBack() {
         console.log('返回成功')
       },
       fail: () => {
-        // 如果返回失败，跳转到首页
         uni.redirectTo({
           url: '/pages/index/index'
         })
@@ -29,16 +41,73 @@ function navBack() {
   }
 }
 
-onLoad((options) => {
+function updateShareData(data) {
+  Object.assign(shareData.value, data)
+}
+
+async function refreshPageConfig() {
+  refreshingPageConfig.value = true
+  const resp = await fetchPageConfig(pageId.value)
+  pageConfig.value = JSON.parse(resp.data.content)
+  refreshingPageConfig.value = false
+  console.log(pageConfig.value)
+
+  updateShareData({
+    title: pageConfig.value?.shareConfig?.title,
+    imageUrl: pageConfig.value?.shareConfig?.cover,
+  })
+}
+
+function getShareData() {
+  const {title, imageUrl, path} = shareData.value
+
+  console.log('分享参数:', {
+    title,
+    path,
+    imageUrl,
+  })
+
+  return {
+    title,
+    path,
+    imageUrl,
+  }
+}
+
+onLoad(async (options) => {
   pageOptions.value = options
   pageId.value = options.id
   debugMode.value = options.debugMode
+
+  shareData.value.path = '/pages/activity/page?id=' + pageId.value
+
+  await userStore.normalAutoLogin()
+  await userStore.loadUserInfo()
+
+  await refreshPageConfig()
 })
 
+onShareAppMessage(() => {
+  return getShareData()
+})
+
+onShareTimeline(() => {
+  return getShareData()
+})
+
+provide('updateShareData', updateShareData)
 </script>
 
 <template>
-  <PageRenderEngine :id="pageId" :debug-mode="debugMode" />
+  <PageRenderEngine
+    v-if="!refreshingPageConfig"
+    :id="pageId"
+    :page-config="pageConfig"
+    :debug-mode="debugMode"
+  />
+  <view v-else class="loading-view">
+    <text>加载中…</text>
+  </view>
   <image class="btn-back" src="@/assets/images/back-btn.png" mode="aspectFit" @click="navBack"/>
 </template>
 
@@ -50,4 +119,11 @@ onLoad((options) => {
   width: 60rpx;
   height: 60rpx;
 }
+
+.loading-view{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
\ No newline at end of file