合并代码

ebike-maintenance/pages.json

@@ -309,6 +309,11 @@
 				"style": {
 					"navigationBarTitleText": "常见问题"
 				}
+			}, {
+				"path": "BillingRules",
+				"style": {
+					"navigationBarTitleText": "计费规则"
+				}
 			}]
 		},
 		{

ebike-maintenance/pages/user/HelpPage/BillingRules.vue

@@ -0,0 +1,35 @@
+<template>
+  <view class="billing-rules">
+    <text class="title">计费规则</text>
+    <view class="content">
+      <text>这里是计费规则的详细描述。</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  // Vue 3 中的 <script setup> 语法
+  // 使用 Composition API 来编写逻辑
+  
+  import { ref } from 'vue';
+
+  const message = ref("这里是计费规则的详细描述");
+</script>
+
+<style scoped>
+.billing-rules {
+  padding: 20px;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #333;
+}
+
+.content {
+  margin-top: 10px;
+  font-size: 16px;
+  color: #555;
+}
+</style>

ebike-maintenance/pages/user/HelpPage/HelpPage.vue

@@ -2,7 +2,7 @@
 	<view class="container">
 		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
 			<view class="cu-item arrow">
-				<view class="content flex">
+				<view class="content flex"  @click="goToBillingRules">
 					<text class="text-black text-bold">计费规则</text>
 				</view>
 			</view>
@@ -20,9 +20,16 @@
 	</view>
 	<!-- 普通弹窗 -->
 	<uni-popup ref="popup" background-color="#fff" @change="change">
-		<view>popup 内容</view>
-	</uni-popup>
+		<view class="popys">
+			<view class="contact-title">
+				客服电话
+			</view>
+			<view class="phone-number">
+				400-888-88888
+			</view>
 
+		</view>
+	</uni-popup>
 </template>
 
 <script setup>
@@ -35,6 +42,11 @@
 			url: '/pages/user/HelpPage/HelpFaq'
 		});
 	}
+	const goToBillingRules = () => {
+		uni.navigateTo({
+			url: '/pages/user/HelpPage/BillingRules'
+		});
+	}
 	const popup = ref(null);
 	const openPhone = () => {
 		popup.value.open("center");
@@ -46,4 +58,33 @@
 		background-color: white;
 		height: 100vh;
 	}
+
+	.uni-popup .uni-popup__wrapper {
+		border-radius: 10px;
+	}
+
+	.popys {
+		text-align: center;
+		width: 260px;
+		height: 140px;
+		background: linear-gradient(180deg, rgb(220 248 218), rgb(255, 255, 255));
+		border-radius: 10px;
+	}
+
+	/* 设置客服电话标题样式 */
+	.contact-title { 
+		font-size: 14px;
+		font-weight: bold;
+		letter-spacing: 3px;
+		color: #333;
+		padding-top: 40px;
+		margin-bottom: 20px;
+	}
+
+	/* 设置客服电话号码样式 */
+	.phone-number {
+		font-size: 16px; 
+		font-weight: bold; 
+		color: rgb(59,183,55); 
+	}
 </style>