完成会员横幅展示

src/components/IndexHeader.vue

@@ -1,10 +1,16 @@
 <script setup>
-import {onMounted} from "vue";
+import {computed, onMounted} from "vue";
 import {useHeaderSticky} from "@/utils/common.js";
 import {useAccount} from "@/stores/user.js";
 
 const account = useAccount()
 
+const role = computed(() => {
+  const r = account.info.roles
+  if(!r?.length) return null
+  else return account.info.roles[0]
+})
+
 const routes = [
   { name: '首页', route: "/" },
   { name: '课程列表', children: [
@@ -76,9 +82,28 @@ onMounted(useHeaderSticky)
         </div>
       </div>
     </nav>
+    <div class="vip-banner" :class="role.roleKey" v-if="role">
+      🏆 欢迎您{{ account.info.nickName }}，尊贵的{{ role.roleName }}用户，今天是{{ new Date().toLocaleDateString() }}
+    </div>
   </header>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
+.vip-banner {
+  color: white;
+  font-weight: bold;
+  padding: 5px 10px;
 
+  &.vip1 {
+    background-color: #0095f1;
+  }
+
+  &.vip2 {
+    background-color: #f1cb00;
+  }
+
+  &.vip3 {
+    background: linear-gradient(to right, #f1ad00, #7d00f1);
+  }
+}
 </style>

src/components/TopHeader.vue

@@ -23,6 +23,7 @@ function logout() {
       router.push('/')
       clearToken()
       isLogin.value = !!getToken()
+      account.info = {}
     }
   })
 }

src/stores/user.js

@@ -8,6 +8,7 @@ export const useAccount = defineStore('account', () => {
         userName: '',
         nickName: '',
         email: '',
+        roles: []
     })
 
     const cart = ref({

src/views/course/Vip.vue

@@ -1,6 +1,10 @@
 <script setup>
 
 import HeaderBreadcrumb from "@/components/HeaderBreadcrumb.vue";
+import {computed} from "vue";
+import {useAccount} from "@/stores/user.js";
+
+const account = useAccount()
 
 const vips = [
   {
@@ -8,6 +12,7 @@ const vips = [
     name: '普通会员',
     price: '35',
     limit: 1,
+    disable: ['vip1', 'vip2', "vip3"],
     colorClass: [],
     desc: ['少儿编程基础课程免费学习', '线下老师一对一指导', '免费使用少儿编程开发器件', '全天候在线咨询服务', '更多在线直播课程']
   }, {
@@ -15,6 +20,7 @@ const vips = [
     name: '黄金会员',
     price: '100',
     limit: 1,
+    disable: ['vip2', "vip3"],
     colorClass: ['two'],
     desc: [
         '少儿编程全套课程免费学习', '线下老师一对一指导', '免费使用少儿编程开发器件', '全天候在线咨询服务', '更多在线直播课程',
@@ -25,6 +31,7 @@ const vips = [
     name: '铂金会员',
     price: '288',
     limit: 3,
+    disable: ["vip3"],
     colorClass: ['three'],
     desc: [
       '少儿编程全套课程免费学习', '线下老师一对一指导', '免费使用少儿编程开发器件', '全天候在线咨询服务', '更多在线直播课程',
@@ -32,6 +39,12 @@ const vips = [
     ]
   }
 ]
+
+const role = computed(() => {
+  const r = account.info.roles
+  if(!r?.length) return null
+  else return account.info.roles[0]
+})
 </script>
 
 <template>
@@ -57,10 +70,14 @@ const vips = [
                   <li v-for="item in vip.desc">{{ item }}</li>
                 </ul>
 
-                <div class="price-btn-area">
+                <div class="price-btn-area" v-if="!vip.disable.includes(role.roleKey)">
                   <a class="price-btn" :href="`/course/vip/order?id=${vip.id}`">
                     立即购买 <span class="icon-right-arrow-11"></span></a>
                 </div>
+                <div class="price-btn-area" v-else>
+                  <a class="price-btn" style="background-color: #0b0b0b;cursor: not-allowed">
+                    您已成为此会员 <span class="icon-eye"></span></a>
+                </div>
               </div>
             </div>
           </div>