更新

src/views/music/album-detail/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref
+} from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
@@ -225,10 +232,7 @@ export default defineComponent({
           }
         })
         // 如果有会员则显示
-        if (
-          albumDetail.value?.musicPaymentTypes &&
-          albumDetail.value?.musicPaymentTypes.includes('VIP')
-        ) {
+        if (buyVip.value) {
           activityId = res.data.activityId || 0
           shareDiscount.value = res.data.discount || 0
         }
@@ -238,6 +242,10 @@ export default defineComponent({
       shareStatus.value = true
     }
 
+    const buyVip = computed(() => {
+      const album = albumDetail.value?.musicPaymentTypes
+      return album && album.includes('VIP')
+    })
     return () => {
       return (
         <div class={styles.detail}>
@@ -393,8 +401,8 @@ export default defineComponent({
                 <div
                   class={[
                     'btnGroup',
-                    albumDetail.value?.musicPaymentTypes &&
-                      albumDetail.value?.musicPaymentTypes.includes('VIP') &&
+                    buyVip.value &&
+                      !state.user.data.memberRankSettingId &&
                       'btnMore'
                   ]}
                   style={{ paddingTop: '12px' }}
@@ -408,30 +416,27 @@ export default defineComponent({
                   >
                     购买专辑
                   </Button>
-                  {albumDetail.value?.musicPaymentTypes &&
-                    albumDetail.value?.musicPaymentTypes.includes('VIP') && (
-                      <>
-                        <Button
-                          block
-                          round
-                          type="primary"
-                          style={{ fontSize: '16px' }}
-                          onClick={() => {
-                            router.push({
-                              path: '/memberCenter',
-                              query: {
-                                ...route.query
-                              }
-                            })
-                          }}
-                        >
-                          {studentActivityId.value > 0 && (
-                            <div class={[styles.buttonDiscount]}>专属优惠</div>
-                          )}
-                          开通会员
-                        </Button>
-                      </>
-                    )}
+                  {buyVip.value && !state.user.data.memberRankSettingId && (
+                    <Button
+                      block
+                      round
+                      type="primary"
+                      style={{ fontSize: '16px' }}
+                      onClick={() => {
+                        router.push({
+                          path: '/memberCenter',
+                          query: {
+                            ...route.query
+                          }
+                        })
+                      }}
+                    >
+                      {studentActivityId.value > 0 && (
+                        <div class={[styles.buttonDiscount]}>专属优惠</div>
+                      )}
+                      开通会员
+                    </Button>
+                  )}
                 </div>
               </ColSticky>
             )}

src/views/music/list/index.module.less

@@ -125,5 +125,12 @@
     .van-switch__node {
       background: rgba(255, 255, 255, 0.51);
     }
+
+    .van-switch--on {
+      background: rgba(255, 255, 255, 0.8);
+      .van-switch__node {
+        background: rgba(255, 255, 255, 1);
+      }
+    }
   }
 }

src/views/music/list/index.tsx

@@ -234,7 +234,7 @@ export default defineComponent({
                           FetchList()
                         }}
                       >
-                        <span>精品</span>
+                        <span>免费</span>
                         <Switch v-model={exquisiteFlag.value} size="20px" />
                       </span>
                     )