vip
parent
c612febd7c
commit
fab450f6ec
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -24,20 +24,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="mt-20px">
|
||||
<van-dropdown-menu v-model="value" :overlay="false">
|
||||
<van-dropdown-item title-class="w-299px" :options="options" />
|
||||
<van-dropdown-menu class="cu-select" :overlay="true">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in New Issue