细节优化

src/pages/be-vip.vue

@@ -6,14 +6,12 @@ import SButton from "@/components/SButton.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, config } = storeToRefs(store);
 
-const vipChoosen = ref(0);
-
-const vips = [1, 3, 6, 12];
+const selectedVIP = ref(0);
 
 const chooseVip = (index) => {
-  vipChoosen.value = index;
+  selectedVIP.value = index;
 };
 
 const onPay = () => {
@@ -61,19 +59,19 @@ const onPay = () => {
         </view>
         <view class="vip-items">
           <view
-            v-for="(item, index) in vips"
+            v-for="(item, index) in config.vipMenus || []"
             :key="index"
             :style="{
-              color: vipChoosen === index ? '#fff' : '#333333',
-              borderColor: vipChoosen === index ? '#FF7D57' : '#eee',
+              color: selectedVIP === index ? '#fff' : '#333333',
+              borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
               background:
-                vipChoosen === index
+                selectedVIP === index
                   ? '#FF7D57'
                   : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
             }"
             @click="chooseVip(index)"
           >
-            {{ item }}个月会员
+            {{ item.name }}
           </view>
         </view>
       </view>
@@ -140,15 +138,15 @@ const onPay = () => {
 }
 .vip-items {
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: repeat(4, 23.5%);
   padding: 10px;
+  row-gap: 5%;
+  column-gap: 2%;
 }
 .vip-items > view {
   border: 1px solid #eee;
   padding: 12px 0;
-  width: 23%;
   border-radius: 10px;
   text-align: center;
 }