更新

src/pages.json

@@ -103,6 +103,12 @@
     {
       "root": "pages_template/pages",
       "pages": [
+        {
+          "path": "index/index",
+          "style": {
+            "pageOrientation": "auto"
+          }
+        },
         {
           "path": "wxCenter/index",
           "style": {

src/pages/template.config.js

@@ -57,6 +57,12 @@ export default [
 		groupName: '页面',
 		groupName_en: 'Page',
 		list: [
+			{
+				path: '/pages_template/pages/index/index',
+				icon: 'wxCenter',
+				title: '组件展示',
+				title_en: 'index',
+			},
 			{
 				path: '/pages_template/pages/wxCenter/index',
 				icon: 'wxCenter',

src/pages_template/components/circle-menu.vue

@@ -0,0 +1,62 @@
+<template>
+    <view class="menu" :style="menuStyle"  @click="$emit('click')">
+        <image :src="icon" :style="imageStyle"></image>
+    </view>
+    <view class="title" :style="titleStype">{{ label }}</view>
+</template>
+  
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    icon: {
+        type: String,
+        default: ''
+    },
+    size: {
+        type: Number,
+        default: 80
+    },
+    label: {
+        type: String,
+        default: "菜单"
+    },
+    labelColor: {
+        type: String,
+        default: '#515151'
+    }
+})
+const menuStyle = computed(() => {
+    return {
+        width: `${props.size + 40}rpx`,
+        height: `${props.size + 40}rpx`
+    }
+})
+
+const imageStyle = computed(() => {
+    return {
+        width: `${props.size}rpx`,
+        height: `${props.size}rpx`
+    }
+})
+
+const titleStype = computed(()=>{
+    return {
+        width: `${props.size + 40}rpx`,
+        color: props.labelColor
+    }
+})
+</script>
+  
+<style lang="scss" scoped>
+.menu {
+    border-radius: 10000px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 20rpx;
+}
+
+.title {
+    text-align: center;
+}
+</style>
+  

src/pages_template/components/statistic.vue

@@ -0,0 +1,88 @@
+<template>
+    <view :style="labelStyle" class="title">{{ label }}</view>
+    <view :style="numberStyle" class="number">{{ formatNumber(number,props.place) }}</view>
+</template>
+  
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+    icon: {
+        type: String,
+        default: ''
+    },
+    label: {
+        type: String,
+        default: "订单数量"
+    },
+    width: {
+        type: Number,
+        default: 300
+    },
+    labelColor: {
+        type: String,
+        default: '#white'
+    },
+    labelSize: {
+        type: Number,
+        default: 16
+    },
+    number: {
+        type: Number,
+        default: 80
+    },
+    numberColor: {
+        type: String,
+        default: 'red'
+    },
+    numberSize: {
+        type: Number,
+        default: 20
+    },
+    place: {
+        type: Number,
+        default: 2
+    }
+})
+const labelStyle = computed(() => {
+    return {
+        width: `${props.width}rpx`,
+        color: props.labelColor,
+        fontSize: `${props.labelSize}px`
+    }
+})
+
+const numberStyle = computed(() => {
+    return {
+        width: `${props.width}rpx`,
+        color: props.numberColor,
+        fontSize: `${props.numberSize}px`
+    }
+})
+
+function formatNumber(num,place) {
+    
+    let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
+    let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
+    let integerPart = parts[0]; // 整数部分
+    let decimalPart = parts[1]; // 小数部分
+
+    // 使用padStart方法补0到小数部分
+    decimalPart = decimalPart.padStart(place, '0');
+
+    return integerPart + '.' + decimalPart;
+}
+
+
+</script>
+  
+<style lang="scss" scoped>
+.title {
+    text-align: center;
+}
+
+.number {
+    text-align: center;
+}
+</style>
+  

src/pages_template/pages/index/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
+  <u-row gutter="0">
+    <u-col span="6">
+      <statistic label="订单数量(个)" labelColor="#1f1f1f" number="0" numberColor="red" />
+    </u-col>
+    <u-col span="6">
+      <statistic label="交易金额(元)" labelColor="#1f1f1f" number="0" numberColor="red" />
+    </u-col>
+  </u-row>
+
+  <uni-section class="mb-10" title="圆形菜单" sub-title="circle-menu" type="line"></uni-section>
+  <u-row>
+    <u-col :span="2.1" :offset="0.3" v-for="menu, index in menus" :key="index">
+      <circleMenu :icon="menu.icon" :label="menu.label" :size="60" @click="modal.msg(menu.label)"></circleMenu>
+    </u-col>
+  </u-row>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import circleMenu from '../../components/circle-menu'
+import statistic from '../../components/statistic.vue';
+import modal from '@/plugins/modal.js'
+
+
+// 菜单板块
+const menus = reactive(
+  [
+    { icon: "/static/images/icon/rocket.png", label: '抢单' },
+    { icon: "/static/images/icon/phone.png", label: '回访' },
+    { icon: "/static/images/icon/message.png", label: '消息' },
+    { icon: "/static/images/icon/dialogue.png", label: '公告' },
+    { icon: "/static/images/icon/knowledge.png", label: '知识库' }
+  ]);
+</script>
+
+<style lang="scss" scoped></style>

src/pages_template/pages/keyboardPay/index.vue

@@ -6,18 +6,8 @@
 				<text class="u-padding-left-10">发送1.00元红包</text>
 			</u-button>
 		</view>
-		<u-keyboard 
+		<u-keyboard default="" ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false" :dot-enabled="false"
-			default=""
+			:show="show" :safe-area-inset-bottom="true" :tooltip="false" @change="onChange" @backspace="onBackspace">
-			ref="uKeyboard" 
-			mode="number" 
-			:mask="true" 
-			:mask-close-able="false"
-			:dot-enabled="false" 
-			:show="show"
-			:safe-area-inset-bottom="true"
-			:tooltip="false"
-			@change="onChange"
-			@backspace="onBackspace">
 			<view>
 				<view class="u-text-center u-padding-20 money">
 					<text>1.00</text>
@@ -27,14 +17,8 @@
 					</view>
 				</view>
 				<view class="u-flex u-row-center">
-					<u-message-input 
+					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
-						mode="box" 
+						@finish="finish"></u-message-input>
-						:maxlength="6"
-						:dot-fill="true"
-						v-model="password"
-						:disabled-keyboard="true"
-						@finish="finish"
-					></u-message-input>
 				</view>
 				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
 			</view>
@@ -107,6 +91,7 @@
 		font-size: 28rpx;
 	}
 }
+
 .tips {
 	color: $u-tips-color;
 }