📦 活动游戏页

src/components/layout/BaseView.ts

@@ -69,7 +69,7 @@ export function useBaseViewStyleBuilder(props: FlexProps) {
       delete obj.marginHorizontal;
     }
 
-    if (props.inset) {
+    if (props.inset != undefined) {
       if (Array.isArray(props.inset)) {
         obj.top = themeContext.resolveThemeSize(props.inset[0]);
         obj.right = themeContext.resolveThemeSize(props.inset[1]);

src/pages.json

@@ -305,6 +305,18 @@
           }
         }
       ]
+    },
+    {
+      "root": "pages/home/village/games",
+      "pages": [
+        {
+          "path": "index",
+          "style": {
+            "navigationBarTitleText": "互动游戏",
+            "enablePullDownRefresh": false
+          }
+        }
+      ]
     }
   ],
   "globalStyle": {

src/pages/home/village/games/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <FlexCol gap="gap.md">
+    <FlexRow wrap justify="space-around">
+      <Touchable 
+        v-for="game in gamesLoader.content.value" :key="game.id" 
+        position="relative"
+        :touchable="game.unlock"
+        :innerStyle="{
+          width: 'calc(50% - 50rpx)',
+          height: '480rpx',
+          backgroundImage: `url(${game.image})`,
+          backgroundSize: 'contain',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }"
+        @click="openGame(game)"
+      >
+        <FlexCol v-if="!game.unlock" position="absolute" center :inset="0" :zIndex="2" backgroundColor="rgba(225, 245, 250, 0.5)">
+          <BackgroundBox center :width="100" :height="50" backgroundImage="https://xy.wenlvti.net/app_static/images/home/games/UnlockButton.png">
+            <Text text="待解锁" fontConfig="contentText" color="white" />
+          </BackgroundBox>
+        </FlexCol>
+        <FlexCol position="absolute" center :left="60" :right="60" :bottom="30" :zIndex="1">
+          <BackgroundBox center :width="300" :height="80" backgroundImage="https://xy.wenlvti.net/app_static/images/home/games/NameBadge.png">
+            <Text :text="game.name" fontConfig="contentText" color="white" />
+            <Height :height="20" />
+          </BackgroundBox>
+        </FlexCol>
+      </Touchable>
+    </FlexRow>
+  </FlexCol>
+</template>
+
+<script setup lang="ts">
+import Text from '@/components/basic/Text.vue';
+import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
+import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Touchable from '@/components/feedback/Touchable.vue';
+import FlexCol from '@/components/layout/FlexCol.vue';
+import FlexRow from '@/components/layout/FlexRow.vue';
+import Height from '@/components/layout/space/Height.vue';
+import { navTo } from '@/components/utils/PageAction';
+
+const gamesLoader = useSimpleDataLoader(async () => {
+  const games = [
+    {
+      id: 1,
+      name: '知识竞赛',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games1.png',
+      link: 'https://mn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard',
+      unlock: true,
+    },
+    {
+      id: 2,
+      name: '乡源寻美景',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games2.png',
+      unlock: false,
+    },
+    {
+      id: 3,
+      name: '农耕小拼图',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games3.png',
+      unlock: false,
+    },
+    {
+      id: 4,
+      name: '乡情口令接龙',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games4.png',
+      unlock: false,
+    },
+    {
+      id: 5,
+      name: '农耕小拼图',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games5.png',
+      unlock: false,
+    },
+    {
+      id: 6,
+      name: '乡情口令接龙',
+      image: 'https://xy.wenlvti.net/app_static/images/home/games/Games6.png',
+      unlock: false,
+    },
+  ];
+  return games;
+});
+
+const openGame = (game: { link?: string }) => {
+  if (game.link) {
+    navTo('/pages/article/web/ewebview', {
+      url: 'https://mn.wenlvti.net/assets/addons/yunexamine/h5/#/pages/home/dashboard'
+    });
+  }
+};
+</script>

src/pages/home/village/introd/card.vue

@@ -38,7 +38,7 @@
       </FlexRow>
 
       <!-- 状态与申请 -->
-      <Construction text="没有接口，数据不正确">
+      <Construction text="暂无数据">
         <FlexRow 
           backgroundColor="background.tertiary" 
           radius="radius.md" 
@@ -56,7 +56,7 @@
       </Construction>
       
       <!-- 图片 -->
-      <Construction text="没有接口">
+      <Construction text="暂无接口">
         <FlexRow v-if="villageInfoLoader.content.value" justify="space-between">
           <Image 
             v-for="index of 3" 
@@ -203,11 +203,11 @@
       GridItemPaddingVertical: 8,
     }">
       <Grid :borderGrid="false" :mainAxisCount="4">
-        <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable />
-        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable />
+        <GridItem title="乡源荣光" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeHornor.png" touchable @click="toast('暂未开放，敬请期待！')" />
+        <GridItem title="乡源好物" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGoods.png" touchable @click="toast('暂未开放，敬请期待！')" />
         <GridItem title="乡源树" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeTree.png" touchable @click="emit('goTree')" />
-        <GridItem title="政贤连心" icon="https://xy.wenlvti.net/app_static/images/village/IconGovAffairs.png" touchable />
-        <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable />
+        <GridItem title="政贤连心" icon="https://xy.wenlvti.net/app_static/images/village/IconGovAffairs.png" touchable @click="toast('暂未开放，敬请期待！')" />
+        <GridItem title="互动游戏" icon="https://xy.wenlvti.net/app_static/images/village/IconLargeGame.png" touchable @click="navTo('/pages/home/village/games/index')" />
       </Grid>
     </ProvideVar>