feat(material): 添加新页面：计算器页面

src/core/libs/pngs.ts

@@ -10,6 +10,8 @@ import iconCamera from '@/assets/pngs/icon-camera.png'
 import iconWallet from '@/assets/pngs/icon-wallet.png'
 import abc from '@/assets/pngs/abc.png'
 import calculator from '@/assets/pngs/calculator.png'
+import calculatorBg from '@/assets/pngs/calculator-bg.png'
+import linkBuckle from '@/assets/pngs/link-buckle.png'
 
 export {
   scheduleCardBg,
@@ -24,4 +26,6 @@ export {
   iconWallet,
   abc,
   calculator,
+  calculatorBg,
+  linkBuckle,
 }

src/layouts/default.vue

@@ -1,13 +1,3 @@
-<template>
-  <wd-config-provider class="flex-grow flex flex-col" style="flex-grow: 1" :themeVars="themeVars">
-    <view class="bg-[#f6f6f6] pb-20 flex-grow flex">
-      <slot />
-    </view>
-    <wd-toast />
-    <wd-message-box />
-  </wd-config-provider>
-</template>
-
 <script lang="ts" setup>
 import type { ConfigProviderThemeVars } from 'wot-design-uni'
 
@@ -15,8 +5,21 @@ const themeVars: ConfigProviderThemeVars = {
   // colorTheme: 'red',
   buttonPrimaryBgColor: '#000',
   // buttonPrimaryColor: '#07c160',
+  buttonMediumRadius: '16rpx',
+  buttonMediumHeight: '92rpx',
+  // buttonLargeRadius: '8px',
+  // buttonSmallRadius: '8px',
 }
 </script>
+<template>
+  <wd-config-provider class="flex-grow flex flex-col" style="flex-grow: 1" :themeVars="themeVars">
+    <view class="bg-[#f6f6f6] flex-grow flex">
+      <slot />
+    </view>
+    <wd-toast />
+    <wd-message-box />
+  </wd-config-provider>
+</template>
 <style lang="scss">
 /* stylelint-disable-next-line selector-type-no-unknown */
 layout-default-uni,

src/pages.json

@@ -199,6 +199,13 @@
       }
     },
     {
+      "path": "pages/material/calculator/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/material/detail/index",
       "type": "page",
       "style": {

src/pages/material/calculator/index.vue

@@ -0,0 +1,49 @@
+<route lang="yaml">
+style:
+  navigationStyle: 'custom'
+#   navigationBarColor: 'transparent'
+</route>
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import { calculatorBg, linkBuckle } from '@/core/libs/pngs'
+</script>
+<template>
+  <div class="flex-grow px-3.5" :style="{ background: `url(${calculatorBg}) 100% 100%` }">
+    <div
+      class="text-center text-[#e7d2c6] text-[34px] font-bold font-['Alimama ShuHeiTi'] leading-relaxed"
+    >
+      积分计算器
+    </div>
+    <div class="text-center text-white text-base font-normal font-['PingFang SC'] leading-relaxed">
+      获取积分小帮手
+    </div>
+    <Card>
+      <div class="text-[#ef4343] text-[40px] font-normal font-['D-DIN Exp'] leading-normal">
+        16000
+      </div>
+      <div
+        class="text-center text-black text-base font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        积分
+      </div>
+    </Card>
+    <div class="relative h-2.5">
+      <div class="flex justify-around absolute left-0 right-0 top--3">
+        <wd-img :width="8" :src="linkBuckle" mode="widthFix" />
+        <div></div>
+        <wd-img :width="8" :src="linkBuckle" mode="widthFix" />
+      </div>
+    </div>
+    <Card>
+      <wd-input></wd-input>
+      <wd-input></wd-input>
+      <wd-input></wd-input>
+      <wd-button :round="false" block custom-class="my-4">开始计算</wd-button>
+      <div
+        class="text-center text-black/40 text-xs font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        积分 = 订单金额 x 20% x 10 x 材料商兑换积分比例
+      </div>
+    </Card>
+  </div>
+</template>

src/pages/material/index.vue

@@ -24,6 +24,7 @@ const pieces = ref([
     desc: '积分小帮手',
     icon: calculator,
     class: 'col-start-2 row-start-1',
+    path: '/pages/material/calculator/index',
     // iconSize: 68,
   },
   {

src/types/uni-pages.d.ts

@@ -21,6 +21,7 @@ interface NavigateToOptions {
        "/pages/home/study-tour/detail" |
        "/pages/home/study-tour/index" |
        "/pages/home/study-tour/list" |
+       "/pages/material/calculator/index" |
        "/pages/material/detail/index" |
        "/pages/material/recommend/index";
 }