vip

package.json

@@ -20,6 +20,7 @@
     "markdown-it-link-attributes": "^4.0.1",
     "md5": "^2.3.0",
     "pinia": "^2.1.3",
+    "qrcode.vue": "^3.4.1",
     "resize-observer-polyfill": "^1.5.1",
     "swiper": "^10.1.0",
     "vant": "^4.6.4",

src/views/vip/components/item.vue

@@ -24,20 +24,9 @@
         </div>
       </div>
       <div class="mt-20px">
-        <van-dropdown-menu v-model="value" :overlay="false">
+        <van-dropdown-menu class="cu-select"  :overlay="true">
-          <van-dropdown-item title-class="w-299px" :options="options" />
+          <van-dropdown-item  v-model="value" :options="options" />
         </van-dropdown-menu>
-
-        <!-- <a-select
-          class="w-full cu-select"
-          v-model:value="value"
-          :options="options"
-          popupClassName="cu-select-popup"
-          :dropdownStyle="{
-            backgroundColor: '#A5937C',
-            color: 'white',
-          }"
-        ></a-select> -->
       </div>
       <div
         class="mt-80px text-35px text-[#886E43] font-bold"
@@ -64,21 +53,21 @@
       ></div>
       <div
         class="grid gap-x-5 mt-40px"
-        :class="[currentAttr.is_subscribe ? 'grid-cols-2' : 'grid-cols-1']"
+        :class="[data.is_subscribe ? 'grid-cols-2' : 'grid-cols-1']"
       >
         <van-button
           @click="handleSubscribe(0)"
           type="primary"
           :style="{ backgroundColor: current.color }"
-          class="bg-[#786B56] h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
+          class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
           >订阅</van-button
         >
         <van-button
           @click="handleSubscribe(1)"
           type="primary"
-          v-if="currentAttr.is_subscribe"
+          v-if="data.is_subscribe"
           :style="{ backgroundColor: current.color }"
-          class="bg-[#786B56] h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
+          class="bg-[#786B56] !h-79px flex items-center justify-center text-white font-bold mt-7 rounded-4px !border-none"
           >连续订阅</van-button
         >
       </div>
@@ -219,4 +208,49 @@ function formatNumber(num, digits = 0) {
     color: white;
   }
 }
+.cu-select{
+  .van-haptics-feedback:active{
+    opacity: 1;
+  }
+  .van-dropdown-menu__title{
+
+  }
+  .van-cell{
+    background-color: #847663;
+    color: white;
+    .van-badge__wrapper{
+      &::before{
+        color: white;
+      }
+    }
+  }
+  .van-dropdown-menu__bar{
+    height: 79px;
+  }
+  .van-dropdown-item {
+      width: 541px !important;
+      left: 101px !important;
+    }
+  .van-dropdown-menu__item{
+    align-items: center;
+    justify-content: space-between;
+   
+    background-color: #847663;
+    color: white;
+    .van-ellipsis{
+      color: white;
+    }
+    
+  }
+  .van-dropdown-menu__title--active{
+    color: white;
+  }
+  .van-dropdown-menu__title{
+    width: calc(100% - 30px);
+    padding:0 30px;
+  }
+  .van-overlay{
+    background: transparent;
+  }
+}
 </style>

src/views/vip/index.vue

@@ -36,11 +36,53 @@
         @subscribe="handleSubscribe"
       ></Item>
     </div>
+
+    <van-popup v-model:show="open">
+      <div class="relative w-660px px-20px pb-20px">
+        <div class="absolute right-20px top-10px">
+          <div class="text-20px text-red-500">
+            <SvgIcon
+              @click="open = false"
+              class="text-black text-60px cursor-pointer"
+              name="close"
+            ></SvgIcon>
+          </div>
+        </div>
+        <div class="text-center text-[#000000] pt-20px">
+          <div class="text-42px font-bold">扫码付款</div>
+          <div class="text-28px mt-20px">
+            您正在订阅{{ currentVipText }}服务,付款请扫以下二维码
+          </div>
+          <div class="flex justify-center mt-40px">
+            <QRCode
+            :size="200"
+            :bordered="false"
+            :value="orderQrcodeUrl"
+          />
+          </div>
+          <div class="mt-20px text-28px">请使用支付宝、微信扫码支付</div>
+          <div class="grid grid-cols-2 gap-x-20px mt-20px">
+            <van-button
+              @click="handleConfirmOrder"
+              class="rounded-4px !text-22px !px-0 !border-none !h-70px !rounded-2px"
+              type="primary"
+              >我已付款，点击跳转</van-button
+            >
+            <van-button
+              @click="handleCancelOrder"
+              class="rounded-4px !bg-[#969696] !text-22px !px-0 !border-none !h-70px !rounded-2px"
+              type="primary"
+              >还未付款，点击取消</van-button
+            >
+          </div>
+        </div>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script setup>
-// import { QRCode } from 'ant-design-vue'
+import QRCode from 'qrcode.vue'
 import { ref, onMounted, computed, toRaw } from 'vue'
 import http from '@/io/request'
 import Item from './components/item.vue'