1014

src/main/nine-space/package.json

@@ -11,12 +11,14 @@
     "@better-scroll/core": "^2.4.2",
     "axios": "^0.21.4",
     "better-scroll": "^2.4.2",
+    "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
     "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",
     "swiper": "^6.8.1",
     "vant": "^3.2.3",
     "vue": "^3.0.0",
+    "vue-clipboard2": "^0.3.3",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },

src/main/nine-space/src/main.js

@@ -13,11 +13,13 @@ import PageTitle from "./components/PageTitle";
 import LikeButton from "./components/LikeButton.vue";
 import Driver from "./components/Driver.vue";
 import common from "./mixins/common";
+import VueClipboard from "vue-clipboard2";
 
 createApp(App)
   .use(Vant)
   .use(http)
   .use(ConfigProvider)
+  .use(VueClipboard)
   .mixin(common)
   .component("page-title", PageTitle)
   .component("like-button", LikeButton)

src/main/nine-space/src/mixins/common.js

@@ -4,4 +4,24 @@ export default {
       return !!this.$store.state.userInfo;
     },
   },
+  methods: {
+    updateUser(info, sucess = true) {
+      if (info) {
+        return this.$http
+          .post("/user/save", {
+            ...this.$store.state.userInfo,
+            ...info,
+          })
+          .then(() => {
+            return this.$store.dispatch("getUserInfo");
+          })
+          .then(() => {
+            if (sucess) {
+              this.$toast.success("保持");
+            }
+            return Promise.resolve();
+          });
+      }
+    },
+  },
 };

src/main/nine-space/src/router/index.js

@@ -82,6 +82,11 @@ const routes = [
     name: "userVerified",
     component: () => import("../views/user/Verified.vue"),
   },
+  {
+    path: "/setting",
+    name: "userSetting",
+    component: () => import("../views/user/Setting.vue"),
+  },
   {
     path: "/detail",
     name: "detail",

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

@@ -24,6 +24,8 @@
   --van-divider-border-color: #202122;
   --van-divider-text-color: #202122;
   --van-divider-margin: 0;
+  --van-field-error-message-color: #fdfb60;
+  --van-action-sheet-item-text-color: #000;
 }
 .van-divider::after,
 .van-divider::before {
@@ -42,3 +44,7 @@ input:-webkit-autofill {
 .van-dialog {
   color: #000;
 }
+
+.flex1 {
+  flex-grow: 1;
+}

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

@@ -57,13 +57,21 @@ export default {
     const active = ref("home");
     return { active, menus };
   },
+  data() {
+    return {
+      menu: null,
+    };
+  },
   mounted() {
     this.$nextTick(() => {
-      document.body.appendChild(this.$refs.tabbar.$el.childNodes[0]);
+      this.menu = this.$refs.tabbar.$el.childNodes[0];
+      document.body.appendChild(this.menu);
     });
   },
   beforeUnmount() {
-    document.body.removeChild(this.$refs.tabbar.$el.childNodes[0]);
+    if (this.menu) {
+      document.body.removeChild(this.menu);
+    }
   },
 };
 </script>

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

@@ -1,17 +1,78 @@
 <template>
   <div class="mine">
-    <div class="userInfo"></div>
-    <div class="top">
+    <div class="userInfo" v-if="isLogin">
+      <van-image
+        width="100%"
+        height="35vw"
+        :src="userInfo.bg"
+        fit="cover"
+        class="top-img"
+      />
+      <div class="userInfo-content">
+        <div class="userInfo-top">
+          <van-image
+            round
+            width="78"
+            height="78"
+            :src="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="text2">
+              <span>{{ userInfo.id }}</span>
+              <img @click="copy" src="../assets/svgs/copy_icon.svg" alt="" />
+            </div>
+          </div>
+        </div>
+
+        <div class="sub">
+          广州小云互娱科技有限公司成立于2017年，作为广东省游戏产业协会成员，是一家集游戏研发
+        </div>
+
+        <div class="btns">
+          <div class="collect">
+            <div class="text1">2111</div>
+            <div class="text2">关注</div>
+          </div>
+          <div class="collect">
+            <div class="text1">2111</div>
+            <div class="text2">粉丝</div>
+          </div>
+          <div class="flex1"></div>
+          <van-button
+            plain
+            color="#fff"
+            size="mini"
+            :icon="require('../assets/svgs/person.svg')"
+            round
+          >
+            未认证
+          </van-button>
+          <van-button
+            plain
+            @click="$router.push('/setting')"
+            color="#fff"
+            size="mini"
+            round
+            >编辑资料</van-button
+          >
+        </div>
+      </div>
+    </div>
+    <div class="top" v-else>
       <van-image
         round
         width="78"
         height="78"
         :src="require('../assets/svgs/img_default_photo.svg')"
         fit="cover"
+        @click="$router.push('/login')"
       />
 
       <div class="text">
-        <div class="text1">点击登录</div>
+        <div class="text1" @click="$router.push('/login')">点击登录</div>
         <div class="text2">立即登录获取精彩服务</div>
       </div>
     </div>
@@ -118,6 +179,20 @@ export default {
   computed: {
     ...mapState(["userInfo"]),
   },
+  methods: {
+    copy() {
+      this.$copyText(this.userInfo.id).then(
+        (e) => {
+          this.$toast.success("复制成功");
+          console.log(e);
+        },
+        (e) => {
+          this.$toast("复制失败");
+          console.log(e);
+        }
+      );
+    },
+  },
 };
 </script>
 
@@ -213,4 +288,94 @@ export default {
     display: block;
   }
 }
+.userInfo {
+  padding-top: 35vw;
+  border-bottom: 5px solid @bg3;
+  position: relative;
+
+  .top-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+.userInfo-content {
+  padding: 0 16px;
+  z-index: 2;
+  position: relative;
+  transform: translateY(-8px);
+  .sub {
+    font-size: 14px;
+    color: #939599;
+    line-height: 22px;
+    padding: 16px 0;
+  }
+
+  .btns {
+    display: flex;
+    // padding-bottom: 16px;
+    align-items: center;
+    .collect {
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .text1 {
+        font-size: 16px;
+        color: #ffffff;
+        line-height: 24px;
+      }
+      .text2 {
+        font-size: 14px;
+        color: #939599;
+        line-height: 24px;
+      }
+    }
+
+    /deep/.van-button {
+      width: 90px;
+      .van-icon__image {
+        display: block;
+        width: 18px;
+        height: 18px;
+      }
+    }
+    .van-button + .van-button {
+      margin-left: 10px;
+    }
+  }
+}
+.userInfo-top {
+  display: flex;
+  align-items: center;
+  .van-image {
+    border: 5px solid #fff;
+    flex-shrink: 0;
+  }
+
+  .text {
+    margin: 0 40px 0 12px;
+    overflow: hidden;
+    .text1 {
+      font-size: 24px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 34px;
+    }
+    .text2 {
+      font-size: 16px;
+      color: #949699;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      margin-top: 6px;
+      img {
+        display: block;
+        margin-left: 6px;
+      }
+    }
+  }
+}
 </style>

src/main/nine-space/src/views/user/Setting.vue

@@ -9,45 +9,68 @@
             round
             width="36"
             height="36"
-            :src="require('../../assets/svgs/img_default_photo.svg')"
+            :src="
+              userInfo.avatar ||
+              require('../../assets/svgs/img_default_photo.svg')
+            "
             fit="cover"
           />
         </template>
       </van-cell>
       <van-cell title="昵称" is-link :value="userInfo.nickname" />
-      <van-cell title="性别" is-link :value="userInfo.nickname" />
-      <van-cell title="简介" is-link :value="userInfo.nickname" />
-      <van-cell title="主页背景" is-link :value="userInfo.nickname" />
-      <van-cell title="编码" :value="userInfo.id" />
+      <van-cell
+        title="性别"
+        :class="{ not: !userInfo.sex }"
+        is-link
+        :value="userInfo.sex || '未设置'"
+        @click="show = true"
+      />
+      <van-cell
+        title="简介"
+        :class="{ not: !userInfo.intro }"
+        is-link
+        :value="userInfo.intro || '请添加介绍'"
+      />
+      <van-cell
+        title="主页背景"
+        :class="{ not: !userInfo.bg }"
+        is-link
+        :value="userInfo.bg || '更换背景图片'"
+      />
+      <van-cell class="not" title="编码" :value="userInfo.id" />
     </van-cell-group>
+
+    <van-action-sheet
+      v-model:show="show"
+      :actions="actions"
+      cancel-text="取消"
+      close-on-click-action
+      @select="chooseSex"
+    />
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
+import { ref } from "vue";
 export default {
   computed: {
     ...mapState(["userInfo"]),
   },
-  data() {
+  setup() {
+    //性别
+    const show = ref(false);
+    const actions = [{ name: "男" }, { name: "女" }];
+    const chooseSex = (val) => {
+      this.updateUser({ sex: val.name});
+    };
+
     return {
-      active: "phone",
-      form: {
-        name: "",
-        phone: "",
-        mail: "",
-        no: "",
-      },
+      show,
+      actions,
+      chooseSex,
     };
   },
-  methods: {
-    submit() {
-      console.log("63772");
-    },
-    afterRead(file) {
-      console.log(file);
-    },
-  },
 };
 </script>
 
@@ -62,4 +85,33 @@ export default {
   color: #ffffff;
   line-height: 30px;
 }
+
+/deep/ .van-cell {
+  align-items: center;
+  height: 70px;
+  .van-cell__title {
+    span {
+      font-weight: bold;
+      font-size: 14px;
+    }
+  }
+
+  .van-cell__value {
+    span {
+      font-size: 16px;
+      color: #ffffff;
+      line-height: 24px;
+    }
+  }
+
+  &.not {
+    .van-cell__value {
+      span {
+        font-size: 13px;
+        color: #939599;
+        line-height: 24px;
+      }
+    }
+  }
+}
 </style>