更新

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

@@ -5,19 +5,9 @@
 				<u-icon name="red-packet"></u-icon>
 				<text class="u-padding-left-10">发送1.00元红包</text>
 			</u-button>
-		</view>		
-		<u-keyboard 
-			default=""
-			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>
+		<u-keyboard default="" 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 
-						mode="box" 
-						:maxlength="6"
-						:dot-fill="true"
-						v-model="password"
-						:disabled-keyboard="true"
-						@finish="finish"
-					></u-message-input>
+					<u-message-input mode="box" :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>
@@ -43,71 +27,72 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				show:false,
-				password:''
+export default {
+	data() {
+		return {
+			show: false,
+			password: ''
+		}
+	},
+	onLoad() {
+
+	},
+	methods: {
+		onChange(val) {
+			if (this.password.length < 6) {
+				this.password += val;
+			}
+
+			if (this.password.length >= 6) {
+				this.pay();
 			}
 		},
-		onLoad() {
-			
+		onBackspace(e) {
+			if (this.password.length > 0) {
+				this.password = this.password.substring(0, this.password.length - 1);
+			}
 		},
-		methods: {
-			onChange(val){
-				if(this.password.length<6){
-					this.password += val;
-				}
-				
-				if(this.password.length>=6){
-					this.pay();
-				}
-			},
-			onBackspace(e){
-				if(this.password.length>0){
-					this.password = this.password.substring(0,this.password.length-1);
-				}
-			},
-			pay(){
-				uni.showLoading({
-					title:'支付中'
+		pay() {
+			uni.showLoading({
+				title: '支付中'
+			})
+
+			setTimeout(() => {
+				uni.hideLoading();
+				this.show = false;
+				uni.showToast({
+					icon: 'success',
+					title: '支付成功'
 				})
-				
-				setTimeout(()=>{
-					uni.hideLoading();
-					this.show = false;
-					uni.showToast({
-						icon:'success',
-						title:'支付成功'
-					})
-				},2000);
-			},
-			showPop(flag = true){
-				this.password = '';
-				this.show = flag;
-			},
-			finish(){
-				console.log(11111)
-			}
+			}, 2000);
+		},
+		showPop(flag = true) {
+			this.password = '';
+			this.show = flag;
+		},
+		finish() {
+			console.log(11111)
 		}
 	}
+}
 </script>
 
 <style lang="scss">
-	.money{
-		font-size: 80rpx;
-		color: $u-warning;
-		position: relative;
-		
-		.close{
-			position: absolute;
-			top: 20rpx;
-			right: 20rpx;
-			line-height: 28rpx;
-			font-size: 28rpx;
-		}
-	}
-	.tips{
-		color:$u-tips-color;
+.money {
+	font-size: 80rpx;
+	color: $u-warning;
+	position: relative;
+
+	.close {
+		position: absolute;
+		top: 20rpx;
+		right: 20rpx;
+		line-height: 28rpx;
+		font-size: 28rpx;
 	}
+}
+
+.tips {
+	color: $u-tips-color;
+}
 </style>