Przeglądaj źródła

用户须知页面

QAQ 陈 2 miesięcy temu
rodzic
commit
9ee1d4d6ab

+ 106 - 0
pages/usernotice/usernotice.js

@@ -0,0 +1,106 @@
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    noticeDetail: {
+      content: ''
+    },
+    phoneNumbers: [] // 存储提取出的电话号码
+  },
+
+  // 处理电话号码,将电话号码转换为可点击的链接
+  processPhoneNumbers: function(content) {
+    if (!content) return '';
+    
+    // 匹配带区号的固定电话号码(如:0516-87030707)和手机号码
+    const phoneRegex = /(?:0\d{2,3}-\d{7,8}|1[3-9]\d{9})/g;
+    const phoneNumbers = [];
+    
+    // 将内容中的电话号码替换为蓝色文本
+    let processedContent = content;
+    
+    // 找到所有匹配的电话号码,从后向前替换,避免位置变化
+    const matches = [];
+    let match;
+    while ((match = phoneRegex.exec(content)) !== null) {
+      matches.push({
+        text: match[0],
+        index: match.index,
+        length: match[0].length
+      });
+    }
+    
+    // 从后向前替换,避免索引变化
+    for (let i = matches.length - 1; i >= 0; i--) {
+      const matchInfo = matches[i];
+      const phoneText = matchInfo.text;
+      const cleanNumber = phoneText.replace(/-/g, '');
+      
+      // 保存电话号码信息
+      phoneNumbers.unshift({
+        phoneText: phoneText,
+        cleanNumber: cleanNumber
+      });
+      
+      // 替换为带颜色的HTML
+      const before = processedContent.substring(0, matchInfo.index);
+      const after = processedContent.substring(matchInfo.index + matchInfo.length);
+      processedContent = before + 
+        `<span style="color:#007AFF;">${phoneText}</span>` +
+        after;
+    }
+    
+    this.setData({
+      phoneNumbers: phoneNumbers
+    });
+    
+    return processedContent;
+  },
+
+  // 处理电话号码点击事件
+  handlePhoneTap: function(e) {
+    // 获取点击的位置
+    const touchX = e.detail.x;
+    const touchY = e.detail.y;
+    
+    // 获取保存的电话号码
+    const phoneNumbers = this.data.phoneNumbers;
+    if (phoneNumbers && phoneNumbers.length > 0) {
+      // 弹出操作菜单让用户选择
+      wx.showActionSheet({
+        itemList: phoneNumbers.map(item => `拨打: ${item.phoneText}`),
+        success: (res) => {
+          if (res.tapIndex >= 0) {
+            const selectedPhone = phoneNumbers[res.tapIndex].cleanNumber;
+            wx.makePhoneCall({
+              phoneNumber: selectedPhone,
+              fail: (err) => {
+              }
+            });
+          }
+        }
+      });
+    }
+  },
+
+  onLoad: function (options) {
+    const app = getApp();
+    // 从全局数据中获取用户须知信息
+    const userNotices = app.globalData.currentAccountInfo?.userNotices || '';
+    
+    // 处理电话号码
+    const processedContent = this.processPhoneNumbers(userNotices);
+    
+    this.setData({
+      'noticeDetail.content': processedContent
+    });
+  },
+
+  /**
+   * 返回上一页
+   */
+  goBack: function() {
+    wx.navigateBack();
+  },
+}) 

+ 5 - 0
pages/usernotice/usernotice.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "通知详情",
+  "navigationStyle": "custom",
+  "usingComponents": {}
+} 

+ 30 - 0
pages/usernotice/usernotice.wxml

@@ -0,0 +1,30 @@
+<!-- 用户须知页面 -->
+<view class="tzxqcontainer">
+  <!-- 背景图 -->
+  <view class="header">
+    <image class="background" src="/static_file/background.png" mode="widthFix" />
+  </view>
+  
+  <!-- 导航栏 -->
+  <view class="custom-nav">
+    <view bindtap="goBack">
+      <image src="/static_file/backcion.png" mode="aspectFit" class="back-icon"></image>
+    </view>
+    <view class="nav-title">用户须知</view>
+  </view>
+
+  <!-- 内容区域 -->
+  <scroll-view scroll-y="true" class="notice-scroll-view">
+    <view class="notice-detail-wrapper">
+      <view class="notice-detail">
+        <view class="notice-content">
+          <rich-text nodes="{{noticeDetail.content}}" bindtap="handlePhoneTap" space="nbsp"></rich-text>
+        </view>
+        <!-- 添加一个提示,告诉用户可以点击查看电话号码 -->
+        <view wx:if="{{phoneNumbers.length > 0}}" class="phone-hint">
+          <text>点击内容可拨打电话</text>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</view>

+ 195 - 0
pages/usernotice/usernotice.wxss

@@ -0,0 +1,195 @@
+.tzxqcontainer {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+/* 背景图片样式 */
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: -1; /* 负值z-index确保在最底层 */
+}
+
+.background {
+  width: 100%;
+  height: auto;
+}
+
+.custom-nav {
+  display: flex;
+  align-items: center;
+  height: 90rpx;
+  margin-bottom: 20rpx;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 0 20rpx;
+  padding-top: 44px; /* 适配iPhone状态栏 */
+}
+
+.back-icon {
+  position: fixed;
+  top: 110rpx;
+  left: 30rpx;
+  z-index: 999;
+  width: 40rpx;
+  height: 40rpx;
+}
+
+.nav-title {
+  flex: 1;
+  text-align: center;
+  font-size: 34rpx;
+  color: #fff;
+}
+
+/* 滚动区域样式 */
+.notice-scroll-view {
+  height: calc(100vh - 180rpx - 44px); /* 减去导航栏高度和状态栏高度 */
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  margin-top: calc(90rpx + 44px); 
+}
+
+/* 通知详情卡片容器样式 */
+.notice-detail-wrapper {
+  padding: 30rpx;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* 通知详情卡片样式 */
+.notice-detail {
+  background-color: #fff;
+  border-radius: 20rpx;
+  padding: 40rpx 30rpx;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 通知标题样式 */
+.notice-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
+
+/* 标题下方分隔线 */
+.title-divider {
+  height: 2rpx;
+  background-color: #eee;
+  margin: 20rpx 0 30rpx;
+}
+
+/* 通知内容样式 */
+.notice-content {
+  font-size: 28rpx;
+  line-height: 1.8;
+  color: #333;
+  margin-bottom: 40rpx;
+  overflow-x: hidden;
+}
+
+/* rich-text内容样式控制 */
+.notice-content rich-text {
+  width: 100%;
+  overflow-x: hidden;
+  word-break: break-word;
+}
+
+.notice-content rich-text .rich-content {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* 控制rich-text中的图片大小 */
+.notice-content rich-text image {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+/* 控制rich-text中的文本样式 */
+.notice-content rich-text p,
+.notice-content rich-text div,
+.notice-content rich-text span {
+  max-width: 100% !important;
+  box-sizing: border-box;
+  word-wrap: break-word;
+  margin: inherit;
+  padding: inherit;
+}
+
+/* 电话号码样式 - 针对 rich-text 内容 */
+.phone-number, 
+.notice-content rich-text span[data-type="phone"] {
+  color: #007AFF !important;
+  text-decoration: none !important;
+  display: inline !important;
+}
+
+/* 通知底部落款样式 */
+.notice-footer {
+  text-align: right;
+  font-size: 26rpx;
+  color: #666;
+  margin-top: 30rpx;
+}
+
+.notice-signature {
+  margin-bottom: 10rpx;
+}
+
+.notice-footer-date {
+  color: #999;
+}
+
+/* 电话号码样式 */
+.phone-number:active {
+  opacity: 0.7;
+}
+
+/* 适配小屏设备 */
+@media screen and (max-width: 320px) {
+  .notice-title {
+    font-size: 36rpx;
+  }
+  
+  .notice-content {
+    font-size: 30rpx;
+  }
+  
+  .notice-detail {
+    padding: 30rpx 20rpx;
+  }
+}
+
+/* 适配大屏设备 */
+@media screen and (min-width: 768px) {
+  .notice-detail-wrapper {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* 电话提示样式 */
+.phone-hint {
+  text-align: center;
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 20rpx;
+  padding: 10rpx;
+  background-color: #f8f8f8;
+  border-radius: 8rpx;
+}