新增名片卡片

pages/about/about.js

@@ -63,6 +63,20 @@ Page({
         })
     },
 
+    makePhoneCall(e){
+        let phone = e.currentTarget.dataset.phone;
+        console.log(phone);
+        wx.makePhoneCall({
+            phoneNumber: phone, //此号码仅用于测试
+            success: function () {
+                console.log("拨打电话成功！")
+            },
+            fail: function () {
+                console.log("拨打电话失败！")
+            }
+        })
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

pages/about/about.wxml

@@ -5,19 +5,63 @@
     <view class="container">
         <view class="title">
             <text>{{contact_title}}</text>
-            <text class="date">{{date}}</text>
+            <text class="date"></text>
         </view>
         <view class="content">
             <view class="text">
-                <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
+                <template is="wxParse" data="{{wxParseData:content.nodes}}" />
             </view>
+        </view>
+
+        <view class="about">
             <view class="text-list">地址：{{contact_address}}</view>
             <view class="text-list">电话：{{contact_tel}}</view>
             <view class="text-list">邮编：{{contact_post_code}}</view>
             <view class="text-list">邮箱：{{contact_email}}</view>
         </view>
+
+        <view class="about-title">
+            <text>快捷联系</text>
+            <text class="date"></text>
+        </view>
+        <view class="about">
+            <view class="user-container">
+                <view class="user-header">
+                    <view class="user-info">
+                        <text class="user-name">{{engineer_name_a}}</text>
+                        <text class="user-intro">简介：{{engineer_md_a}}</text>
+                        <text class="user-phone">电话：{{engineer_phone_a}}</text>
+                    </view>
+                    <button class="user-block-button" style="width: 200rpx;height: 140rpx;" data-phone="{{engineer_phone_a}}" bindtap="makePhoneCall">快捷拨号</button>
+                </view>
+            </view>
+        </view>
+        <view class="about">
+            <view class="user-container">
+                <view class="user-header">
+                    <view class="user-info">
+                        <text class="user-name">{{engineer_name_b}}</text>
+                        <text class="user-intro">简介：{{engineer_md_b}}</text>
+                        <text class="user-phone">电话：{{engineer_phone_b}}</text>
+                    </view>
+                    <button class="user-block-button" style="width: 200rpx;height: 140rpx;" data-phone="{{engineer_phone_b}}"  bindtap="makePhoneCall">快捷拨号</button>
+                </view>
+            </view>
+        </view>
+        <view class="about">
+            <view class="user-container">
+                <view class="user-header">
+                    <view class="user-info">
+                        <text class="user-name">{{engineer_name_c}}</text>
+                        <text class="user-intro">简介：{{engineer_md_c}}</text>
+                        <text class="user-phone">电话：{{engineer_phone_c}}</text>
+                    </view>
+                    <button class="user-block-button" style="width: 200rpx;height: 140rpx;" data-phone="{{engineer_phone_c}}" bindtap="makePhoneCall">快捷拨号</button>
+                </view>
+            </view>
+        </view>
     </view>
 </scroll-view>
 <view class='btn-view'>
-    <button bind:tap="phoneOn" style="background: #3c8bf6;;border-radius: 60rpx;width: 85%;color: #fff;font-size: 30rpx;font-weight: normal;">拨打电话</button>
+    <button bind:tap="phoneOn" style="background: #3c8bf6;border-radius: 60rpx;width: 85%;color: #fff;font-size: 30rpx;font-weight: normal;">拨打电话</button>
 </view>

pages/about/about.wxss

@@ -38,7 +38,6 @@ page {
     margin-top: 30rpx;
     margin-left: 30rpx;
     margin-right: 30rpx;
-
 }
 .text {
     /* margin-top: 16px; */
@@ -52,6 +51,69 @@ page {
     line-height: 55rpx;
     color: #333;
 }
+.about{
+    /* border-top: 2rpx solid #e9e9e9; */
+    border-bottom: 2rpx solid #e9e9e9;
+    padding: 20rpx 30rpx 20rpx 30rpx;
+    /* padding-left: 30rpx;
+    padding-right: 30rpx; */
+}
+.about-title{
+    /* border-bottom: 2rpx solid #e9e9e9; */
+    /* padding-bottom: 30rpx; */
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+    margin-top: 30rpx;
+    font-size: 36rpx;
+    text-align: center;
+    /* margin-bottom: 20rpx; */ 
+}
+
+.user-container {
+    display: flex;
+    flex-direction: column;
+    /* padding: 10px; */
+    /* background-color: #fff; */
+    /* border-radius: 8px; */
+    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
+}
+
+.user-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch; /* 使子元素的高度匹配容器高度 */
+}
+
+.user-info {
+    flex-grow: 1; /* 让左侧信息部分尽可能占满剩余空间 */
+}
+
+.user-name {
+    font-size: 36rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+}
+
+.user-intro, .user-phone {
+    font-size: 28rpx;
+    margin-bottom: 10rpx;
+}
+
+.user-block-button {
+    background-color: #3c8bf6;
+    color: #fff;
+    padding: 10rpx;
+    border: none;
+    border-radius: 10rpx;
+    /* cursor: pointer; */
+    align-self: center; /* 水平居中对齐 */
+    height: auto; /* 按钮的高度自适应 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    writing-mode: vertical-lr; /* 将文本垂直排列 */
+    /*transform: rotate(180deg);  旋转文本，使其从上到下 */
+}
 
 
 .btn-view {