From 85c65143ff3276864e5ce7584ad183fa763ade99 Mon Sep 17 00:00:00 2001
From: yanran200730 <yanran200830@163.com>
Date: Fri, 17 Mar 2023 10:35:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E7=A8=8B=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/project/fengdu/AppCircle/AppCircle.vue  |   2 +-
 src/project/fengdu/AppCircle/MyPostList.vue | 446 +++++++++++++++++++-
 2 files changed, 424 insertions(+), 24 deletions(-)

diff --git a/src/project/fengdu/AppCircle/AppCircle.vue b/src/project/fengdu/AppCircle/AppCircle.vue
index ae3894b..66b7c77 100644
--- a/src/project/fengdu/AppCircle/AppCircle.vue
+++ b/src/project/fengdu/AppCircle/AppCircle.vue
@@ -5,7 +5,7 @@
         <span @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">广场</span>
         <span @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">社区</span>
       </div>
-      <div class="right">
+      <div class="right" @click="$linkTo('./MyPostList')">
         <span>我的贴子</span>
         <i>1</i>
       </div>
diff --git a/src/project/fengdu/AppCircle/MyPostList.vue b/src/project/fengdu/AppCircle/MyPostList.vue
index 01a1fea..e0f8d8b 100644
--- a/src/project/fengdu/AppCircle/MyPostList.vue
+++ b/src/project/fengdu/AppCircle/MyPostList.vue
@@ -1,32 +1,432 @@
 <template>
-  <div class="page">
-    
+  <div class="MyPostList">
+    <div class="userinfo">
+      <div class="top">
+        <div class="left">
+          <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+          <h2>李在天</h2>
+        </div>
+        <div class="add-btn" hover-class="text-hover" @click="$linkTo('./Add')">发贴</div>
+      </div>
+      <div class="bottom">
+        <div class="bottom-item" @click="currIndex = 0" :class="[currIndex === 0 ? 'active' : '']">
+          <span>发贴</span>
+          <h2>23</h2>
+        </div>
+        <div class="bottom-item" @click="currIndex = 1" :class="[currIndex === 1 ? 'active' : '']">
+          <span>点赞</span>
+          <h2>23</h2>
+        </div>
+        <div class="bottom-item" @click="currIndex = 2" :class="[currIndex === 2 ? 'active' : '']">
+          <span>评论</span>
+          <h2>23</h2>
+        </div>
+      </div>
+    </div>
+    <div class="body">
+      <div class="body-list" v-if="currIndex === 0">
+        <div class="item" v-for="(item, index) in 10" :key="index">
+          <div class="item-top">
+            <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+            <div class="right">
+              <h3>李在地</h3>
+              <span>清风街道</span>
+            </div>
+            <image class="remove" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
+          </div>
+          <div class="item-content">
+            <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
+            <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
+          </div>
+          <div class="item-imgs">
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+          </div>
+          <p>2020-12-11 10:10</p>
+          <div class="item-bottom">
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+              <i>10</i>
+            </div>
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
+              <i>10</i>
+            </div>
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+              <i>10</i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="body-list" v-if="currIndex === 1">
+        <div class="item" v-for="(item, index) in 10" :key="index">
+          <div class="item-top">
+            <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+            <div class="right">
+              <h3>李在地</h3>
+              <span>清风街道</span>
+            </div>
+          </div>
+          <div class="item-content">
+            <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
+            <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
+          </div>
+          <div class="item-imgs">
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" />
+          </div>
+          <p>2020-12-11 10:10</p>
+          <div class="item-bottom">
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+              <i>10</i>
+            </div>
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png" />
+              <i>10</i>
+            </div>
+            <div>
+              <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+              <i>10</i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="comment" v-if="currIndex === 2">
+        <div class="comment-item" v-for="(item, index) in 10" :key="index">
+          <div class="comment-top">
+            <span>2020-12-11 10:10</span>
+            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-delete.png" />
+          </div>
+          <p>联系方式</p>
+          <div class="bottom">
+            <div class="item-top">
+              <image class="avatar" src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fangwuchuzu.png" />
+              <div class="right">
+                <h3>李在地</h3>
+                <span>清风街道</span>
+              </div>
+            </div>
+            <div class="item-content">
+              <span @click="$linkTo('./TopicDetail')">#【闲置物品交易】</span>
+              <text>社家用闲置柜子自用，原价212，现价80要的联系</text>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+  import {mapState} from "vuex";
 
-export default {
-  name: "MyPostList",
-  appName: '我的帖子',
-  computed: {
-    ...mapState(['user', 'token']),
-  },
-  methods: {
-    
-  },
-  onShow() {
+  export default {
+    name: 'MyPostList',
+    appName: '我的帖子',
 
-  },
-}
+    data () {
+      return {
+        currIndex: 2
+      }
+    },
+
+    computed: {
+      ...mapState(['user', 'token']),
+    },
+
+    methods: {
+
+    },
+    onShow() {
+
+    },
+  }
 </script>
-<style scoped lang="scss">
-@import "~dvcp-wui/common";
 
-.page {
-  width: 100%;
-  min-height: 100%;
-  background-color: #F3F6F9;
-  
-}
+<style scoped lang="scss">
+  .MyPostList {
+    padding-bottom: 40px;
+
+    .userinfo {
+      margin: 24px 0;
+      background: #fff;
+
+      .top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 32px 56px;
+        border-bottom: 1px solid #eee;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          image {
+            width: 96px;
+            height: 96px;
+            margin-right: 16px;
+            border-radius: 50%;
+          }
+
+          h2 {
+            color: #333333;
+            font-size: 34px;
+            font-weight: 600;
+          }
+        }
+
+        .add-btn {
+          width: 132px;
+          height: 56px;
+          line-height: 56px;
+          text-align: center;
+          font-size: 30px;
+          color: #fff;
+          border-radius: 26px;
+          background: #2D7DFF;
+        }
+      }
+
+      .bottom {
+        display: flex;
+        height: 120px;
+        align-items: center;
+        box-sizing: border-box;
+
+        .bottom-item {
+          display: flex;
+          position: relative;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          flex: 1;
+          text-align: center;
+          height: 100%;
+
+          &.active:after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            z-index: 1;
+            width: 40px;
+            height: 6px;
+            border-radius: 3px;
+            background: #2D7DFF;
+            transform: translateX(-50%);
+            content: ' ';
+          }
+
+          span {
+            font-size: 24px;
+            color: #999;
+          }
+
+          h2 {
+            line-height: 48px;
+            font-size: 34px;
+            color: #333;
+          }
+        }
+      }
+    }
+
+    .comment {
+      padding: 0 32px;
+
+      .comment-item {
+        margin-bottom: 24px;
+        padding: 28px 24px;
+        border-radius: 18px;
+        background: #fff;
+
+        .comment-top {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          span {
+            font-size: 28px;
+            color: #333;
+          }
+
+          image {
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        & > p {
+          line-height: 1.3;
+          margin: 26px 0 20px;
+          font-size: 28px;
+          color: #666666;
+        }
+
+        .bottom {
+          padding: 24px;
+          background: #f6f6f6;
+        }
+
+        .item-top {
+          display: flex;
+          align-items: center;
+
+          .avatar {
+            width: 96px;
+            height: 96px;
+            margin-right: 16px;
+            border-radius: 50%;
+          }
+
+          .right {
+            flex: 1;
+          }
+
+          .remove {
+            width: 40px;
+            height: 40px;
+          }
+
+          h3 {
+            margin-bottom: 12px;
+            color: #333333;
+            text-align: left;
+            font-size: 34px;
+            font-weight: 500;
+          }
+
+          span {
+            color: #999999;
+            font-size: 28px;
+          }
+        }
+
+        .item-content {
+          margin-top: 16px;
+          line-height: 1.3;
+          // text-align: justify;
+
+          span {
+            font-size: 28px;
+            color: #4181FF;
+          }
+
+          text {
+            font-size: 28px;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .body-list {
+      .item {
+        margin: 0 32px 24px;
+        padding: 24px 24px 0;
+        background: #ffffff;
+        border-radius: 16px;
+        box-shadow: inset 0 -1px 0 0 #eeeeee;
+
+        .item-top {
+          display: flex;
+          align-items: center;
+
+          .avatar {
+            width: 96px;
+            height: 96px;
+            margin-right: 16px;
+            border-radius: 50%;
+          }
+
+          .right {
+            flex: 1;
+          }
+
+          .remove {
+            width: 40px;
+            height: 40px;
+          }
+
+          h3 {
+            margin-bottom: 12px;
+            color: #333333;
+            text-align: left;
+            font-size: 34px;
+            font-weight: 500;
+          }
+
+          span {
+            color: #999999;
+            font-size: 28px;
+          }
+        }
+
+        .item-imgs {
+          display: flex;
+          align-items: center;
+
+          image {
+            flex: 1;
+            height: 202px;
+            margin-right: 12px;
+
+            &:nth-of-type(3n) {
+              margin-right: 0;
+            }
+          }
+        }
+
+        & > p {
+          margin: 24px 0;
+          font-size: 28px;
+          color: #333333;
+        }
+
+        .item-bottom {
+          display: flex;
+          align-items: center;
+          height: 88px;
+          border-top: 1px solid #eeeeee;
+
+          div {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 1;
+
+            image {
+              width: 40px;
+              height: 40px;
+              margin: 16px;
+            }
+
+            i {
+              color: #687DA6;
+              font-size: 28px;
+            }
+          }
+        }
+
+        .item-content {
+          margin: 16px;
+          line-height: 1.3;
+          // text-align: justify;
+
+          span {
+            font-size: 28px;
+            color: #4181FF;
+          }
+
+          text {
+            font-size: 28px;
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
 </style>