铸造者

src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -35,7 +35,7 @@
           <span>{{ info.followers }}</span>
         </div>
         <van-button
-          @click="follow"
+          @click.prevent="follow"
           :class="{ follow: info.follow }"
           plain
           type="primary"

src/main/nine-space/src/styles/app.less

@@ -30,6 +30,7 @@
   --van-uploader-upload-background-color: transparent;
   --van-uploader-file-background-color: transparent;
   --van-active-color: @bg3;
+  --van-image-placeholder-background-color: @bg2;
 }
 input,
 input:hover,

src/main/nine-space/src/views/CreatorDetail.vue

@@ -4,7 +4,7 @@
       <van-image
         width="100%"
         height="35vw"
-        :src="userInfo.bg"
+        :src="info.bg"
         fit="cover"
         class="top-img"
       />
@@ -15,55 +15,76 @@
             width="78"
             height="78"
             :src="
-              userInfo.avatar || require('../assets/svgs/img_default_photo.svg')
+              info.avatar || require('../assets/svgs/img_default_photo.svg')
             "
             fit="cover"
             @click="$router.push('/setting')"
           />
           <div class="text">
-            <div class="text1 van-ellipsis">{{ userInfo.nickname }}</div>
+            <div class="text1 van-ellipsis">{{ info.nickname }}</div>
             <div class="text2">
-              <span>{{ userInfo.id }}</span>
+              <span>{{ info.id }}</span>
               <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
             </div>
           </div>
         </div>
 
         <div class="sub">
-          {{ userInfo.intro }}
+          {{ info.intro }}
         </div>
 
         <div class="btns">
           <div class="collect">
-            <div class="text1">{{ userInfo.follows }}</div>
+            <div class="text1">{{ info.follows }}</div>
             <div class="text2">关注</div>
           </div>
           <div class="collect">
-            <div class="text1">{{ userInfo.followers }}</div>
+            <div class="text1">{{ info.followers }}</div>
             <div class="text2">粉丝</div>
           </div>
           <div class="flex1"></div>
           <van-button
+            class="follow"
+            @click="follow"
             plain
-            color="#fff"
+            type="primary"
             size="mini"
-            :icon="require('../assets/svgs/person.svg')"
             round
-            @click="goAuth"
+            :class="{ followed: info.follow }"
           >
-            {{ authStatus }}
+            {{ info.follow ? "已关注" : "关注" }}
           </van-button>
           <van-button
             plain
             @click="$router.push('/setting')"
-            color="#fff"
+            color="#939599"
             size="mini"
             round
-            >编辑资料</van-button
+            >分享</van-button
           >
         </div>
       </div>
     </div>
+
+    <van-sticky>
+      <div class="menu">
+        <div class="menu-item" :class="{ active: type === 'DEFAULT' }">
+          藏品类目
+        </div>
+        <div class="menu-item" :class="{ active: type === 'BLIND_BOX' }">
+          盲盒类目
+        </div>
+        <div class="flex1"></div>
+        <div class="search">
+          <img src="../assets/svgs/search.svg" alt="" />
+        </div>
+      </div>
+
+      <van-tabs v-model:active="status" line-width="16" line-height="2">
+        <van-tab title="全部"></van-tab>
+        <van-tab title="售卖"></van-tab>
+      </van-tabs>
+    </van-sticky>
   </div>
 </template>
 
@@ -73,28 +94,65 @@ export default {
   computed: {
     ...mapState(["userInfo"]),
   },
+  inject: ["bs"],
   data() {
     return {
       info: {},
+      type: "DEFAULT",
+      status: 0,
     };
   },
   mounted() {
     this.getInfo();
   },
   methods: {
+    copy() {
+      this.$copyText(this.info.id).then(
+        (e) => {
+          this.$toast.success("复制成功");
+          console.log(e);
+        },
+        (e) => {
+          this.$toast("复制失败");
+          console.log(e);
+        }
+      );
+    },
     getInfo() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
       this.$http.get("/user/get/" + this.$route.query.id).then((res) => {
         this.info = res;
+        setTimeout(() => {
+          this.bs.value.refresh();
+        }, 500);
       });
     },
+    follow() {
+      if (!this.info.follow) {
+        this.$http.get(`/user/${this.info.id}/follow`).then((res) => {
+          this.getInfo();
+          this.$toast.success("关注成功");
+        });
+      } else {
+        this.$http.get(`/user/${this.info.id}/unfollow`).then(() => {
+          this.getInfo();
+          this.$toast.success("取消关注");
+        });
+      }
+    },
   },
 };
 </script>
 
 <style lang="less" scoped>
+.mine {
+  background-color: #0f0f0f;
+}
 .userInfo {
   padding-top: 35vw;
-  border-bottom: 5px solid @bg3;
   position: relative;
 
   .top-img {
@@ -123,13 +181,14 @@ export default {
     .collect {
       width: 20%;
       display: flex;
-      flex-direction: column;
+      flex-direction: row-reverse;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-end;
       .text1 {
         font-size: 16px;
         color: #ffffff;
         line-height: 24px;
+        margin-left: 6px;
       }
       .text2 {
         font-size: 14px;
@@ -139,7 +198,7 @@ export default {
     }
 
     /deep/.van-button {
-      width: 90px;
+      width: 70px;
       .van-icon__image {
         display: block;
         width: 18px;
@@ -149,6 +208,21 @@ export default {
     .van-button + .van-button {
       margin-left: 10px;
     }
+
+    .follow {
+      border: solid 0px transparent;
+      padding: 1px;
+      background-image: linear-gradient(@bg, @bg),
+        linear-gradient(135deg, #fdfb60, #ff8f3e);
+      background-origin: border-box;
+      box-sizing: border-box;
+      background-clip: content-box, border-box;
+      &.followed {
+        background-image: linear-gradient(@bg, @bg),
+          linear-gradient(135deg, #939599, #939599);
+        color: #939599;
+      }
+    }
   }
 }
 .userInfo-top {
@@ -182,4 +256,32 @@ export default {
     }
   }
 }
+.menu {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  padding: 0 16px;
+  border-bottom: 1px solid #202122;
+  .menu-item {
+    font-size: 16px;
+    font-weight: bold;
+    color: #939599;
+    line-height: 24px;
+    margin-right: 30px;
+    &.active {
+      color: @prim;
+      font-size: 18px;
+    }
+  }
+}
+/deep/ .van-tabs {
+  .van-tabs__nav {
+    background-color: #0f0f0f;
+  }
+  .van-tab {
+    flex-grow: 0;
+    flex-shrink: 0;
+    min-width: 70px;
+  }
+}
 </style>