1

package-lock.json

@@ -27,6 +27,7 @@
         "@imengyu/imengyu-utils": "^0.0.27",
         "@imengyu/js-request-transform": "^0.4.0",
         "async-validator": "^4.2.5",
+        "cax": "^1.3.6",
         "crypto-js": "^4.2.0",
         "pinia": "^3.0.1",
         "tslib": "^2.8.1",
@@ -9019,6 +9020,12 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cax": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmmirror.com/cax/-/cax-1.3.6.tgz",
+      "integrity": "sha512-t/YuUc7pizVSLu4B0XnwxI3wZnhvyRpmf+VukmfzY/QqSfIcfXomaxWE9eK9Q8Cg57/IUatST5i/8yvYrA5yRQ==",
+      "license": "MIT"
+    },
     "node_modules/centra": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/centra/-/centra-2.7.0.tgz",

package.json

@@ -54,6 +54,7 @@
     "@imengyu/imengyu-utils": "^0.0.27",
     "@imengyu/js-request-transform": "^0.4.0",
     "async-validator": "^4.2.5",
+    "cax": "^1.3.6",
     "crypto-js": "^4.2.0",
     "pinia": "^3.0.1",
     "tslib": "^2.8.1",

src/components/display/Progress.vue

@@ -67,6 +67,7 @@
       }),
         borderRadius: barRadius,
         backgroundColor: barBackgroundColor,
+        ...props.backgroundStyle,
       }"
     >
       <view
@@ -209,6 +210,11 @@ export interface ProgressProps {
    * 进度的样式
    */
   progressStyle?: ViewStyle,
+
+  /**
+   * 背景的样式
+   */
+  backgroundStyle?: ViewStyle,
 }
 
 
@@ -240,6 +246,7 @@ const width = computed(() => themeContext.resolveSize(props.width));
 const progressStyles = computed(() => ({
   borderRadius: barRadius.value,
   backgroundColor: barColor.value,
+  ...props.progressStyle,
   ...selectStyleType<ViewStyle, ProgressTypes>(props.type, 'left-right', {
     'left-right': { left: 0, height: height.value },
     'right-left': { right: 0, height: height.value },

src/env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="vite/client" />
 
+declare module 'cax';
+
 declare module '*.vue' {
   import { DefineComponent } from 'vue'
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

src/pages.json

@@ -240,7 +240,10 @@
     "navigationBarTextStyle": "white",
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#e19579",
-    "backgroundColor": "#fef2e8"
+    "backgroundColor": "#fef2e8",
+    "usingComponents": {
+      "cax": "/wxcomponents/cax/cax"
+    }
   },
   "uniIdRouter": {}
 }

src/pages/home/village/components/VillageTree.vue

@@ -1,7 +1,44 @@
 <template>
-  <canvas canvas-id="villageTree" style="width: 100%; height: 200px;" />
+  <canvas 
+    id="villageTree"
+    :width="systemInfo.windowWidth" 
+    :height="200" 
+  />
 </template>
 
-<script setup lang="ts">
+<script setup>
+import { defineComponent, getCurrentInstance, onMounted } from 'vue';
 
+const instance = getCurrentInstance();
+const systemInfo = uni.getSystemInfoSync();
+
+let canvas = null;
+let ctx = null
+
+async function initCanvas() {
+  uni.createSelectorQuery()
+    .in(instance)
+    .select('#villageTree')
+    .fields({ node: true, size: true }, (res) => {
+      const canvas = res[0].node
+      const ctx = canvas.getContext('2d')
+     
+      // 保存到 this，方便其他函数使用
+      canvas = canvas
+      ctx = ctx
+    })
+}
+function animate() {
+}
+
+
+
+function animate() {
+  flag.rotation += 0.01
+  requestAnimationFrame(() => animate(stage, flag))
+}
+
+onMounted(() => {
+  initCanvas()
+});
 </script>

src/pages/home/village/index.vue

@@ -1,7 +1,6 @@
 <template>
-  <FlexCol :gap="20" :padding="30">
-
-    <FlexRow center :gap="30">
+  <FlexCol gap="gap.md">
+    <FlexRow center :padding="30" gap="gap.md">
       <HomeLargeTitle title="村社名片" :active="tab === 'card'" @click="tab = 'card'" />
       <HomeLargeTitle title="乡源树" :active="tab === 'tree'" @click="tab = 'tree'">
         <template #icon>

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

@@ -1,5 +1,5 @@
 <template>
-  <FlexCol gap="gap.lg">
+  <FlexCol :padding="30" gap="gap.lg">
 
     <!-- 卡片背景 -->
     <BackgroundBox 

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

@@ -1,97 +1,115 @@
 <template>
   <FlexCol>
-
     <FlexCol :margin="[20,0]">
       <Text textAlign="center" text="一人添果，全村增光；乡源树茂，故土名扬" fontConfig="primaryTitle" fontSize="35rpx"  />
     </FlexCol>
-
     <VillageTree />
 
-    <FlexCol>
+    <FlexCol :padding="30">
+      <FlexCol>
+        <FlexRow center>
+          <Progress 
+            :value="60" 
+            :backgroundStyle="{
+              background: 'linear-gradient(to bottom, #280502, #a44e17)',
+            }"
+            :progressStyle="{
+              borderImageSource: 'url(https://xy.wenlvti.net/app_static/images/village/ImageProgress.png)',
+              borderImageSlice: `5 25 5 25 fill`,
+              borderImageWidth: `0px 15px`,
+              borderImageRepeat: 'stretch',
+              borderRadius: '10px',
+              overflow: 'hidden',
+            }"
+            :width="300" 
+            :height="30" 
 
+          />
+        </FlexRow>
+        <Height height="space.lg" />
+        <FlexRow center gap="gap.md">
+          <Icon icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" :size="50" />
+          <Text text="乡源光 30%" fontConfig="contentText" fontSize="30rpx" color="#E79412" />
+        </FlexRow>
+        <Height height="space.md" />
+        <Text textAlign="center" text="再浇水5次 可升级" fontConfig="secondText" />
+      </FlexCol>
 
-      <FlexRow center gap="gap.md">
-        <Icon icon="https://xy.wenlvti.net/app_static/images/village/IconLight.png" :size="50" />
-        <Text text="乡源光 30%" fontConfig="contentText" fontSize="30rpx" color="#E79412" />
+      <Height height="space.xl" />
+      <FlexRow justify="space-around" :padding="[0, 30]">
+        <Touchable center direction="column" flexBasis="22%">
+          <Image src="https://xy.wenlvti.net/app_static/images/village/IconCollect.png" :width="130" mode="widthFix" />
+          <Text text="拾果" fontConfig="contentText" />
+        </Touchable>
+        <Touchable center direction="column" flexBasis="22%">
+          <Image src="https://xy.wenlvti.net/app_static/images/village/IconFertilization.png" :width="130" mode="widthFix" />
+          <Text text="施肥" fontConfig="contentText" />
+        </Touchable>
+        <Touchable center direction="column" flexBasis="22%">
+          <Image src="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" :width="130" mode="widthFix" />
+          <Text text="浇水" fontConfig="contentText" textAlign="center" />
+        </Touchable>
+        <Touchable center direction="column" flexBasis="22%">
+          <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="130" mode="widthFix" />
+          <Text text="赐福" fontConfig="contentText" textAlign="center" />
+        </Touchable>
       </FlexRow>
-      <Height height="space.md" />
-      <Text textAlign="center" text="再浇水5次 可升级" fontConfig="secondText" />
-    </FlexCol>
 
-    <Height height="space.xl" />
-    <FlexRow justify="space-around" :padding="[0, 30]">
-      <Touchable center direction="column" flexBasis="22%">
-        <Image src="https://xy.wenlvti.net/app_static/images/village/IconCollect.png" :width="130" mode="widthFix" />
-        <Text text="拾果" fontConfig="contentText" />
-      </Touchable>
-      <Touchable center direction="column" flexBasis="22%">
-        <Image src="https://xy.wenlvti.net/app_static/images/village/IconFertilization.png" :width="130" mode="widthFix" />
-        <Text text="施肥" fontConfig="contentText" />
-      </Touchable>
-      <Touchable center direction="column" flexBasis="22%">
-        <Image src="https://xy.wenlvti.net/app_static/images/village/IconWatering.png" :width="130" mode="widthFix" />
-        <Text text="浇水" fontConfig="contentText" textAlign="center" />
-      </Touchable>
-      <Touchable center direction="column" flexBasis="22%">
-        <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="130" mode="widthFix" />
-        <Text text="赐福" fontConfig="contentText" textAlign="center" />
-      </Touchable>
-    </FlexRow>
+      <HomeTitle title="最新动态" />
+      <FlexCol gap="gap.lg">
+        <FlexRow 
+          v-for="item in infoLoader.content.value" :key="item.id"
+          backgroundColor="background.tertiary"
+          radius="radius.medium"
+          :padding="[20, 30]"
+          gap="gap.lg"
+          align="center"
+        > 
+          <Avatar  
+            :url="item.head"
+            :size="80"
+            radius="50%"
+          />
+          <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
+            :backgroundCutBorder="[10, 10, 10, 10]"
+            :backgroundCutBorderSize="[10, 10, 10, 10]"
+            :padding="[15, 30]"
+          >
+            <Text :text="item.levelText" fontConfig="contentText" />
+          </BackgroundBox>
+        </FlexRow>
+      </FlexCol>
 
-    <HomeTitle title="最新动态" />
-    <FlexCol gap="gap.lg">
-      <FlexRow 
-        v-for="item in infoLoader.content.value" :key="item.id"
-        backgroundColor="background.tertiary"
-        radius="radius.medium"
-        :padding="[20, 30]"
-        gap="gap.lg"
-        align="center"
-      > 
-        <Avatar  
-          :url="item.head"
-          :size="80"
-          radius="50%"
-        />
-        <Text :text="item.content" fontConfig="contentText" :innerStyle="{ flex: 1 }" />
-        <BackgroundBox
-          backgroundImage="https://xy.wenlvti.net/app_static/images/village/TagNormal.png"
-          :backgroundCutBorder="[10, 10, 10, 10]"
-          :backgroundCutBorderSize="[10, 10, 10, 10]"
-          :padding="[15, 30]"
+      <HomeTitle title="乡源赐福" />
+      <FlexRow wrap>
+        <FlexCol 
+          v-for="(item, index) in blessingInfoLoader.content.value"
+          :key="item.id" 
+          center 
+          flexBasis="30%"
+          gap="gap.sm"
+          :margin="[10,0,0,0]"
         >
-          <Text :text="item.levelText" fontConfig="contentText" />
-        </BackgroundBox>
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
+            backgroundPosition="center"
+            :padding="[10, 20]"
+          >
+            <Text :text="index + 1" color="white" />
+          </BackgroundBox>
+          <Image :src="item.image" :width="210" :height="250" radius="radius.medium" mode="aspectFill" />
+          <BackgroundBox
+            backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingBar.png"
+            :padding="10"
+            :width="210"
+          >
+            <Text textAlign="center" :text="item.content" fontConfig="contentText" fontFamily="SongtiSCBlack" color="white" />
+          </BackgroundBox>
+        </FlexCol>
       </FlexRow>
     </FlexCol>
-
-    <HomeTitle title="乡源赐福" />
-    <FlexRow wrap>
-      <FlexCol 
-        v-for="(item, index) in blessingInfoLoader.content.value"
-        :key="item.id" 
-        center 
-        flexBasis="30%"
-        gap="gap.sm"
-        :margin="[10,0,0,0]"
-      >
-        <BackgroundBox
-          backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingCount.png"
-          backgroundPosition="center"
-          :padding="[10, 20]"
-        >
-          <Text :text="index + 1" color="white" />
-        </BackgroundBox>
-        <Image :src="item.image" :width="210" :height="250" radius="radius.medium" mode="aspectFill" />
-        <BackgroundBox
-          backgroundImage="https://xy.wenlvti.net/app_static/images/village/ImageBlessingBar.png"
-          :padding="10"
-          :width="210"
-        >
-          <Text textAlign="center" :text="item.content" fontConfig="contentText" fontFamily="SongtiSCBlack" color="white" />
-        </BackgroundBox>
-      </FlexCol>
-    </FlexRow>
   </FlexCol>
 
 </template>
@@ -109,6 +127,7 @@ import Height from '@/components/layout/space/Height.vue';
 import Avatar from '@/components/display/Avatar.vue';
 import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
 import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
+import Progress from '@/components/display/Progress.vue';
 
 const infoLoader = useSimpleDataLoader(async () => {
   return [

src/wxcomponents/cax/cax.js

@@ -0,0 +1,49 @@
+import cax from './index'
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+
+    option: {
+      type: Object
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    width: 0,
+    height: 0,
+    id: 'caxCanvas' + cax.caxCanvasId++,
+    index: cax.caxCanvasId - 1
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+    getCaxCanvasId: function () {
+      return this.data.id
+    },
+
+    touchStart: function (evt) {
+      this.stage.touchStartHandler(evt)
+      this.stage.touchStart && this.stage.touchStart(evt)
+    },
+
+    touchMove: function (evt) {
+      this.stage.touchMoveHandler(evt)
+      this.stage.touchMove && this.stage.touchMove(evt)
+    },
+
+    touchEnd: function (evt) {
+      this.stage.touchEndHandler(evt)
+      this.stage.touchEnd && this.stage.touchEnd(evt)
+    }
+
+  }
+})

src/wxcomponents/cax/cax.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/wxcomponents/cax/cax.wxml

@@ -0,0 +1,12 @@
+<canvas 
+    class="cax-canvas"
+    bindtouchstart="touchStart" 
+    bindtouchmove="touchMove" 
+    bindtouchend="touchEnd" 
+    canvas-id="{{ id }}" 
+    style="width: {{width}}px; height: {{height}}px;">
+    <slot></slot>
+</canvas>
+
+<canvas class="cax-canvas-hit" canvas-id="{{id}}Hit" style='width:1px;height:1px;display: none;'></canvas>
+<canvas class="cax-canvas-measure" canvas-id="measure{{index}}" style='width:1px;height:1px;display: none;'></canvas>