📝 【TASK-20240816-01】TASK:积分页面跳转

src/store/getters.js

@@ -15,6 +15,8 @@ const getters = {
   // 数据字典
   dict_datas: state => state.dict.dictDatas,
   // 用户信息
-  loginUser: state => state.user.loginUser
+  loginUser: state => state.user.loginUser,
+  // 用户id
+  id: state => state.user.id
 }
 export default getters

src/store/modules/user.js

@@ -8,7 +8,8 @@ const state = {
   avatar: '',
   introduction: '',
   roles: [],
-  loginUser: null
+  loginUser: null,
+  id: null
 }
 
 const mutations = {
@@ -29,6 +30,9 @@ const mutations = {
   },
   SET_USER: (state, data) => {
     state.loginUser = data
+  },
+  SET_ID: (state, id) => {
+    state.id = id
   }
 }
 
@@ -73,13 +77,14 @@ const actions = {
         }
 
         // eslint-disable-next-line
-        const { roles, nickname, avatar, introduction } = {...data, roles: ['admin']}
+        const { roles, id, nickname, avatar, introduction } = { ...data, roles: ['admin'] }
 
         // roles must be a non-empty array
         if (!roles || roles.length <= 0) {
           reject('getInfo: roles must be a non-null array!')
         }
 
+        commit('SET_ID', id)
         commit('SET_ROLES', roles)
         commit('SET_NAME', nickname)
         localStorage.setItem('nickname', nickname)

src/views/jiedao/profile/integral.vue

 <template>
-  <div class="app-container">
-    我的积分
-
-    <img src="@/assets/setting/user.png" />
+  <div class="integral">
+    <div class="header">
+      <div />
+      <div class="header-content">
+        <div class="content-box">
+          <div class="avatar">
+            <img class="imgs" src="@/assets/Integral/vip_avatar.png" alt="">
+          </div>
+          <div class="content-text">
+            <div class="text-vip">尊贵的白金会员</div>
+            <div class="text-integral">已兑换积分为100&ensp;可用积分为80</div>
+          </div>
+          <div class="content-image">
+            <img class="imgs" src="@/assets/Integral/vip_avatar.png" alt="">
+          </div>
+        </div>
+        <div class="content-divider">
+          <div class="divider-vip">vip1</div>
+          <div class="divider-num">233</div>
+        </div>
+      </div>
+      <div class="header-menu">
+        <div class="menu-item" @click="toJump(1)">积分日志&emsp;<i class="el-icon-arrow-right" /></div>
+        <div class="menu-item" @click="toJump(2)">兑换日志&emsp;<i class="el-icon-arrow-right" /></div>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+export default {
+  name: 'JdIntegral',
+  data() {
+    return {
+      integral: 100,
+      available: 80
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    // 跳转 日志
+    toJump(val) {
+      const path = val === 1 ? '/jiedao/jd-integral-log' : '/jiedao/jd-exchange-log'
+      this.$router.push({ path })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.integral {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  .header {
+    width: 100%;
+    height: 160px;
+    color: #333;
+    background: #B9BCC8;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    box-sizing: border-box;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .header-content {
+      padding: 20px 0;
+      width: 50%;
+      height: inherit;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .content-box{
+        width: 100%;
+        display: flex;
+        align-items: center;
+      }
+      .avatar {
+        margin-right: 10px;
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        .imgs {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .content-image {
+        margin-left: auto;
+        width: 60px;
+        height: 60px;
+        overflow: hidden;
+        .imgs {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .content-text {
+        .text-vip {
+          font-size: 16px;
+          }
+      }
+    }
+    .header-menu{
+      .menu-item{
+        margin-bottom: 20px;
+        &:last-child{
+          margin-bottom: 0;
+        }
+        i{
+          font-weight: 700;
+        }
+      }
+    }
+  }
+}
+</style>