gdpaoup

pageB/components/details/userinfo.vue

@@ -1,27 +1,29 @@
 <template>
     <view class="userinfo">
-
         <view class="user">
             <view class="info">
-                <image></image>
-                <view>
-                    <text>达人昵称</text>
-                    <text>关注数量</text>
+                <view class="avatar">
+                    <image :src="item.member_avatar"></image>
+                </view>
+                <view class="box">
+                    <view class="name">{{ item.member_nickname }}</view>
+                    <view class="num">
+                        <text>粉丝数：{{ item.fans_num }}</text>
+                        <text>评论数：{{ item.comment_num }}</text>
+                    </view>
                 </view>
-               
             </view>
-            <view class="guanzhu">关注</view>
+            <view class="btn" :class="[ is_follow ? 'btn-follow' : 'btn-unfollow' ]" @click="following">{{ is_follow ? "已关注" : "关注" }}</view>
         </view>
-        <view class="profile">个性签名</view>
+        <view class="profile" :class="{'u-line-2': is_open }" @click="openPro">
+            个性签名：{{ item.recommend ? item.recommend : "对方很懒没有留下任何东西~~" }}
+            </view>
     </view>
 </template>
 <style lang="scss" scoped>
-image{
-    background-color: #0f0;
-}
 .userinfo{
-    height: 261rpx;
     width: 100%;
+    // height: 261rpx;
     padding: 30rpx;
     .user{
         display: flex;
@@ -31,53 +33,92 @@ image{
         .info{
             display: flex;
             align-items: center;
-            >image{
-                width: 140rpx;
-                height: 140rpx;
-                border-radius: 50%;
-
+            .avatar {
+                &>image{
+                    width: 140rpx;
+                    height: 140rpx;
+                    border-radius: 50%;
+                }
             }
-            >view{
-                margin-left: 40rpx;
+            .box {
                 display: flex;
-                height: 79rpx;
                 justify-content: space-between;
                 flex-direction: column;
-                >text:first-child{
+                height: 79rpx;
+                margin-left: 40rpx;
+                color: #333;
+                .name {
                     font-size: 28rpx;
-                    color:#333;
                 }
-                >text:last-child{
+                .num {
                     font-size: 24rpx;
-                    color: #333;
+                    & > :first-child {
+                        margin-right: 20rpx;
+                    }
                 }
             }
         }
-        .guanzhu{
+        .btn{
             width: 140rpx;
             height: 60rpx;
             font-size: 26rpx;
-            color:#fff;
             line-height: 60rpx;
-            border-radius: 30rpx;
-            background-color: #FF780F;
             text-align: center;
+            color:#fff;
+            border-radius: 30rpx;
+        }
+        .btn-follow {
+            background-color: #007AFF;
+        }
+        .btn-unfollow {
+            background-color: #FF780F;
         }
     }
     .profile{
-        margin-top: 19rpx;
+        margin-top: 20rpx;
         font-size: 24rpx;
         color: #333;
-        margin-left: 14rpx;
+        line-height: 1.2;
     }
 }
 </style>
 <script>
 export default {
     name:"userinfo",
+    props: ["list"],
     data(){
         return {
-
+            item: {},
+            is_open: true,
+            is_follow: false,
+        }
+    },
+    watch: {
+        list(newVal, old) {
+            // console.log(newVal);
+            this.item = newVal;
+            this.is_follow = newVal.is_attention;
+        },
+        deep: true
+    },
+    methods: {
+        // 打开个性
+        openPro() {
+            this.is_open = !this.is_open;
+        },
+        // 关注
+        following() {
+            this.$u.api.attentionMember({
+                member_id: this.item.member_id
+            }).then(res => {
+                console.log(res);
+                if (res.errCode == 0) {
+                    this.is_follow = !this.is_follow;
+                    this.$u.toast(res.message);
+                } else {
+                    this.$u.toast(res.message);
+                }
+            })
         }
     }
 }