页面开发

project.private.config.json

@@ -23,13 +23,20 @@
     "miniprogram": {
       "list": [
         {
-          "name": "我的",
+          "name": "我的帖子",
-          "pathName": "pages/my/index",
+          "pathName": "pages/myWall/index",
           "query": "",
           "scene": null,
           "launchMode": "default"
         },
         {
+          "name": "我的",
+          "pathName": "pages/my/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "视频详情",
           "pathName": "pages/videoDetail/index",
           "query": "",

src/app.json

@@ -20,7 +20,8 @@
     "pages/heartDetail/index",
     "pages/videoList/index",
     "pages/videoDetail/index",
-    "pages/articleDetail/index"
+    "pages/articleDetail/index",
+    "pages/myWall/index"
   ],
   "subPackages": [
     {

src/pages/my/index.scss

@@ -5,3 +5,132 @@ page {
   width: 266rpx;
   height: 58rpx;
 }
+
+.page {
+  .user {
+    margin: 40rpx;
+    display: flex;
+    gap: 24rpx;
+    .avatar {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      border: 1px solid #fff;
+    }
+    .wrap {
+      margin-top: 6rpx;
+      .name {
+        color: #1e293b;
+        font-size: 36rpx;
+        font-weight: 700;
+        line-height: 44rpx;
+      }
+      .content {
+        margin-top: 12rpx;
+        color: rgba(148, 163, 184, 1);
+        font-size: 28rpx;
+        line-height: 32rpx;
+        .high {
+          display: inline;
+          font-weight: bold;
+          color: #2f82a9;
+        }
+      }
+    }
+  }
+  .kkd {
+    margin: 20rpx 40rpx;
+    display: flex;
+    align-items: center;
+    gap: 30rpx;
+    .k-item {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 32rpx;
+      border-radius: 32rpx;
+      border: 2rpx solid #fff;
+      background: linear-gradient(180deg, #e6eff4 0%, #fff 100%);
+      box-shadow: 0 8rpx 64rpx 0 rgba(0, 99, 132, 0.08);
+      box-sizing: border-box;
+      font-size: 32rpx;
+      color: rgba(30, 41, 59, 1);
+      font-weight: bold;
+      .icon {
+        width: 84rpx;
+        height: 84rpx;
+      }
+    }
+  }
+  .list {
+    margin: 30rpx 40rpx;
+    background-color: #fff;
+    border-radius: 32rpx;
+    padding: 0 32rpx;
+    .list-item {
+      padding: 32rpx 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1rpx solid #f1f5f9;
+      &:last-of-type {
+        border: none;
+      }
+      .icon {
+        flex-shrink: 0;
+        width: 48rpx;
+        height: 48rpx;
+      }
+      .content {
+        font-size: 32rpx;
+        color: rgba(30, 41, 59, 1);
+      }
+      .arrow {
+        font-size: 32rpx;
+        color: rgba(148, 163, 184, 1);
+      }
+    }
+  }
+  .public-office {
+    margin: 30rpx 40rpx;
+    padding: 32rpx;
+    border-radius: 32rpx;
+    border: 1px solid #fff;
+    background: rgba(255, 255, 255, 0.7);
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    .wrap {
+      .title {
+        margin-bottom: 18rpx;
+        padding-bottom: 18rpx;
+        font-size: 32rpx;
+        color: rgba(30, 41, 59, 1);
+        line-height: 48rpx;
+        border-bottom: 1px dashed rgba(47, 130, 169, 0.35);
+        .high {
+          display: inline;
+          color: #2f82a9;
+        }
+      }
+      .content {
+        font-size: 32rpx;
+        color: rgba(47, 130, 169, 1);
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        .icon {
+          width: 56rpx;
+          height: 32rpx;
+        }
+      }
+    }
+    .code {
+      flex-shrink: 0;
+      width: 200rpx;
+      height: 200rpx;
+      border-radius: 12rpx;
+    }
+  }
+}

src/pages/my/index.wxml

@@ -1,3 +1,68 @@
 <navbar fixed custom-style="background:{{background}}" back>
   <image class="page-title" slot="left" src="/images/logo2.png"></image>
 </navbar>
+
+<view
+  class="page"
+  style="background: url('/images/bg6.png') no-repeat top center/100% 478rpx;padding-top: {{pageTop}}px;"
+>
+  <view class="user">
+    <image class="avatar" mode="aspectFill" src="/images/bg1.png"></image>
+    <view class="wrap">
+      <view class="name">张小山</view>
+      <view class="content">
+        星动守护您的第
+        <view class="high">15</view>
+        天～
+      </view>
+    </view>
+  </view>
+  <view class="kkd">
+    <view class="k-item">
+      我的帖子
+      <image class="icon" src="/images/icon30.png"></image>
+    </view>
+    <view class="k-item">
+      健康档案
+      <image class="icon" src="/images/icon31.png"></image>
+    </view>
+  </view>
+  <view class="list">
+    <view class="list-item">
+      <image class="icon" src="/images/icon32.png"></image>
+      <view class="content">我的评论</view>
+      <van-icon class="arrow" name="arrow" />
+    </view>
+    <view class="list-item">
+      <image class="icon" src="/images/icon33.png"></image>
+      <view class="content">我的收藏</view>
+      <van-icon class="arrow" name="arrow" />
+    </view>
+    <view class="list-item">
+      <image class="icon" src="/images/icon34.png"></image>
+      <view class="content">个人信息</view>
+      <van-icon class="arrow" name="arrow" />
+    </view>
+    <view class="list-item">
+      <image class="icon" src="/images/icon35.png"></image>
+      <view class="content">隐私协议</view>
+      <van-icon class="arrow" name="arrow" />
+    </view>
+  </view>
+  <view class="public-office">
+    <view class="wrap">
+      <view class="title">
+        <view>关注公众号</view>
+        <view>
+          及时
+          <view class="high">获取系统消息</view>
+        </view>
+      </view>
+      <view class="content">
+        长按识别二维码
+        <image class="icon" src="/images/icon36.png"></image>
+      </view>
+    </view>
+    <image class="code" src="/images/bg1.png" show-menu-by-longpress></image>
+  </view>
+</view>

src/pages/myWall/index.json

@@ -0,0 +1,9 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "popup": "/components/popup/index",
+    "navbar": "/components/navbar/index",
+    "uploadFile": "/components/uploadFile/index",
+    "van-popup": "@vant/weapp/popup/index"
+  }
+}

src/pages/myWall/index.scss

@@ -0,0 +1,176 @@
+page {
+  background-color: #f7fafc;
+}
+
+.page-title {
+  font-size: 36rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.page {
+  padding-bottom: 260rpx;
+  .list {
+    padding: 0 30rpx;
+    .list-card {
+      margin-top: 30rpx;
+      position: relative;
+      padding: 36rpx 32rpx 12rpx;
+      border-radius: 32rpx;
+      border: 2rpx solid #f1f5f9;
+      background: #fff;
+      box-shadow: 0 16rpx 48rpx -8rpx rgba(0, 99, 132, 0.06);
+      box-sizing: border-box;
+      .status {
+        display: inline-block;
+        font-size: 28rpx;
+        line-height: 36rpx;
+        padding: 8rpx 16rpx;
+        border-radius: 12rpx;
+        box-sizing: border-box;
+        &.status1 {
+          color: rgba(100, 116, 139, 1);
+          background: rgba(100, 116, 139, 0.08);
+        }
+        &.status2 {
+          color: rgba(234, 88, 26, 1);
+          background-color: rgba(234, 88, 26, 0.08);
+        }
+        &.status3 {
+          color: rgba(186, 26, 26, 1);
+          background-color: rgba(186, 26, 26, 0.08);
+        }
+        &.status4 {
+          color: rgba(45, 190, 141, 1);
+          background-color: rgba(45, 190, 141, 0.08);
+        }
+      }
+      .content {
+        margin-top: 32rpx;
+        font-size: 32rpx;
+        color: rgba(24, 28, 30, 1);
+        line-height: 52rpx;
+        .c-topic {
+          display: inline;
+          font-size: 32rpx;
+          color: rgba(47, 130, 169, 1);
+        }
+      }
+      .tags {
+        margin-top: 24rpx;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16rpx;
+        .tag {
+          padding: 0 24rpx;
+          height: 48rpx;
+          font-size: 24rpx;
+          color: rgba(47, 130, 169, 1);
+          display: flex;
+          align-items: center;
+          background-color: rgba(47, 130, 169, 0.05);
+          border-radius: 12rpx;
+        }
+      }
+      .photo1 {
+        margin-top: 24rpx;
+        height: 352rpx;
+        border-radius: 24rpx;
+      }
+      .photo9 {
+        margin-top: 24rpx;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16rpx;
+        .p-item {
+          width: 100%;
+          aspect-ratio: 1 / 1;
+          .p-img {
+            width: 100%;
+            height: 100%;
+            border-radius: 24rpx;
+          }
+        }
+      }
+      .date {
+        padding: 32rpx 0;
+        font-size: 28rpx;
+        color: rgba(148, 163, 184, 1);
+        line-height: 32rpx;
+        border-bottom: 1px solid rgba(241, 245, 249, 1);
+      }
+      .rejected {
+        padding: 16rpx 24rpx;
+        border-radius: 16rpx;
+        background: rgba(186, 26, 26, 0.08);
+        box-sizing: border-box;
+        font-size: 28rpx;
+        color: rgba(186, 26, 26, 1);
+        line-height: 32rpx;
+        .icon {
+          display: inline-block;
+          flex-shrink: 0;
+          margin-right: 16rpx;
+          width: 32rpx;
+          height: 32rpx;
+          vertical-align: middle;
+        }
+        .blod {
+          display: inline-block;
+          font-weight: bold;
+        }
+      }
+      .footer {
+        padding: 32rpx 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .public {
+          display: flex;
+          align-items: center;
+          gap: 12rpx;
+          color: #475569;
+          font-size: 28rpx;
+          font-weight: 500;
+          line-height: 40rpx;
+          .icon {
+            width: 44rpx;
+            height: 44rpx;
+          }
+        }
+        .btn-wrap {
+          display: flex;
+          gap: 16rpx;
+          .btn1 {
+            display: flex;
+            width: 164rpx;
+            height: 64rpx;
+            padding: 24rpx 0;
+            justify-content: center;
+            align-items: center;
+            border-radius: 102rpx;
+            border: 1px solid #e5e7eb;
+            box-sizing: border-box;
+            color: #64748b;
+            font-size: 32rpx;
+            line-height: 48rpx;
+          }
+          .btn2 {
+            display: flex;
+            width: 164rpx;
+            height: 64rpx;
+            padding: 32rpx 0;
+            justify-content: center;
+            align-items: center;
+            border-radius: 102rpx;
+            background: var(--, linear-gradient(270deg, #439fc7 0%, #2f82a9 100%));
+            box-sizing: border-box;
+            color: #fff;
+            text-align: center;
+            font-size: 32rpx;
+            line-height: 48rpx;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/myWall/index.ts

@@ -0,0 +1,103 @@
+const app = getApp<IAppOption>()
+
+Page({
+  data: {
+    popupShow: false,
+    popupType: '',
+    popupParams: {
+      position: 'bottom',
+    } as any,
+
+    topicShow: false,
+    replayShow: true,
+
+    fileList: [] as any[],
+  },
+  onLoad() {
+    app.waitLogin({ type: 0 }).then(() => {})
+  },
+  handlePopupOk() {
+    const { popupType } = this.data
+    if (popupType === 'argument') {
+      app.mpBehavior({ PageName: 'BTN_PATIENTLOG' })
+      wx.ajax({
+        method: 'POST',
+        url: '?r=wtx/user/agree-guest-privacy',
+        data: {
+          WorkerId: app.globalData.scene?.workerId || '',
+        },
+      }).then(() => {
+        this.setData({
+          popupShow: false,
+          popupType: '',
+          popupParams: {},
+        })
+        const waitBindDoctorId = app.globalData.waitBindDoctorId
+        if (waitBindDoctorId) {
+          this.handleBindDoctor(waitBindDoctorId)
+        }
+      })
+    }
+    if (popupType === 'conformBindDoctorConform') {
+      this.setData({
+        popupShow: false,
+      })
+      wx.ajax({
+        method: 'POST',
+        url: '?r=wtx/account/wait-bind-doctor',
+        data: {
+          doctorId: app.globalData.waitBindDoctorId,
+        },
+      }).then(() => {
+        wx.navigateTo({
+          url: `/patient/pages/login/index`,
+        })
+      })
+    }
+  },
+  handlePopupCancel() {
+    const { popupType } = this.data
+    if (popupType === 'argument') {
+      wx.exitMiniProgram()
+    }
+    if (popupType === 'conformBindDoctorConform') {
+      this.setData({
+        popupShow: false,
+      })
+      wx.ajax({
+        method: 'POST',
+        url: '?r=wtx/account/wait-bind-doctor',
+        data: {
+          doctorId: app.globalData.waitBindDoctorId,
+        },
+      }).then(() => {
+        app.globalData.waitBindDoctorId = ''
+      })
+    }
+  },
+  handleWechatWork() {
+    wx.navigateTo({
+      url: '/pages/wechatWork/index',
+    })
+  },
+  handleSetData(e) {
+    const { fileList } = this.data
+    this.setData({
+      fileList: [...fileList, ...e.detail],
+    })
+  },
+  handleDeleteFile(e) {
+    const { index } = e.detail
+    const { fileList } = this.data
+    this.setData({
+      fileList: fileList.filter((_, i) => i !== index),
+    })
+  },
+  topicClose() {
+    this.setData({
+      topicShow: false,
+    })
+  },
+})
+
+export {}

src/pages/myWall/index.wxml

@@ -0,0 +1,51 @@
+<navbar fixed custom-style="background:{{background}}" back>
+  <view class="page-title" slot="left">
+    <van-icon name="arrow-left" />
+    我的帖子
+  </view>
+</navbar>
+
+<view
+  class="page"
+  style="background: url('/images/bg6.png') no-repeat top center/100% 478rpx;padding-top: {{pageTop}}px;"
+>
+  <view class="list">
+    <view class="list-card" bind:tap="handleDetail">
+      <!-- 草稿：status1; 待审核 status2; 已驳回 status3; 已通过 status4 -->
+      <view class="status status1">草稿</view>
+      <view class="content">
+        <view class="c-topic">#我的心悸经历</view>
+        <view class="c-topic">#PSVT急救常识</view>
+        今天去复诊，把最近的发作记录都给医生看了，沟通效率高了很多，也更安心。原来平时记下时间和感受真的很有用。
+      </view>
+      <view class="tags">
+        <view class="tag" wx:for="{{4}}" wx:key="index">患者故事</view>
+      </view>
+      <!-- 单图 -->
+      <image class="photo1" mode="heightFix" src="/images/bg1.png"></image>
+      <!-- 多图 -->
+      <view class="photo9">
+        <view class="p-item" wx:for="{{3}}" wx:key="index">
+          <image class="p-img" mode="aspectFill" src="/images/bg1.png"></image>
+        </view>
+      </view>
+      <view class="date">2026年7月1日 13:09</view>
+      <view class="rejected">
+        <image class="icon" src="/images/icon39.png"></image>
+        <view class="blod">驳回原因：</view>
+        语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当
+        语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当 语言不当
+      </view>
+      <view class="footer">
+        <view class="public">
+          <image class="icon" src="/images/icon37.png"></image>
+          公开可见
+        </view>
+        <view class="btn-wrap">
+          <view class="btn1">删除</view>
+          <view class="btn2">编辑</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>