|
|
|
@ -1,42 +1,99 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue' |
|
|
|
|
import { Button, Carousel } from 'ant-design-vue' |
|
|
|
|
import { ref } from 'vue' |
|
|
|
|
import { goodsType } from '@/api/recharge/index' |
|
|
|
|
import { Button, Carousel, Modal, QRCode, message } from 'ant-design-vue' |
|
|
|
|
import { onMounted, ref } from 'vue' |
|
|
|
|
import type { GoodsData, Racharge } from './index.d' |
|
|
|
|
import { getIsPay, goodsList, goodsType, payment } from '@/api/recharge/index' |
|
|
|
|
import trumpet from '@/assets/images/recharge/lb.png' |
|
|
|
|
import { useUserStore } from '@/store/moules/userStore/index' |
|
|
|
|
import vip from '@/assets/images/recharge/vip.png' |
|
|
|
|
|
|
|
|
|
import logo from '@/assets/images/conversation/logo.png' |
|
|
|
|
import { useRechargeStore } from '@/store/moules/rechareStore' |
|
|
|
|
import { RechargeEnum } from '@/enums/recharge' |
|
|
|
|
|
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
const rechargeStore = useRechargeStore() |
|
|
|
|
// 轮播的ref |
|
|
|
|
const carouselRef = ref() |
|
|
|
|
// 选项卡索引 |
|
|
|
|
const activeTab = ref(0) |
|
|
|
|
// 支付二维码 |
|
|
|
|
const qrshow = ref<boolean>(false) |
|
|
|
|
// 套餐类型目录 |
|
|
|
|
const tabs = ref<Racharge[]>([]) |
|
|
|
|
// 套餐列表 |
|
|
|
|
const goodslists = ref<GoodsData[]>([]) |
|
|
|
|
// 支付路径 |
|
|
|
|
const payData = ref<any>({ |
|
|
|
|
orderCode: '', |
|
|
|
|
wx_result: '', |
|
|
|
|
}) |
|
|
|
|
// 轮询是否支付 |
|
|
|
|
const intervalId = ref() |
|
|
|
|
|
|
|
|
|
// 套餐类型 |
|
|
|
|
function getType() { |
|
|
|
|
goodsType().then((res) => { |
|
|
|
|
console.log(res) |
|
|
|
|
tabs.value = res |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
getType() |
|
|
|
|
// 关闭充值弹窗 |
|
|
|
|
function handleClose() { |
|
|
|
|
rechargeStore.rechargeClose() |
|
|
|
|
activeTab.value = 0 |
|
|
|
|
} |
|
|
|
|
// 选项卡目录 |
|
|
|
|
const tabs = ref([ |
|
|
|
|
{ title: '日套餐', active: true }, |
|
|
|
|
{ title: '七日套餐', active: false }, |
|
|
|
|
{ title: '月套餐', active: false }, |
|
|
|
|
{ title: '年套餐', active: false }, |
|
|
|
|
{ title: '至尊礼遇卡', active: false }, |
|
|
|
|
]) |
|
|
|
|
|
|
|
|
|
const items = ref(['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8']) |
|
|
|
|
// 套餐列表 |
|
|
|
|
function getgoodsList(type: string) { |
|
|
|
|
goodsList({ type }).then((res) => { |
|
|
|
|
goodslists.value = res |
|
|
|
|
console.log(res, 7777) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 选中选项卡 |
|
|
|
|
function selectTab(index: number) { |
|
|
|
|
// 选择选项卡 |
|
|
|
|
function selectTab(index: number, key: string) { |
|
|
|
|
activeTab.value = index |
|
|
|
|
getgoodsList(key) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 支付 |
|
|
|
|
function handlePay(goodsId: string) { |
|
|
|
|
payment({ goodsId, type: RechargeEnum.PAY_PC }).then((res) => { |
|
|
|
|
payData.value = res |
|
|
|
|
qrshow.value = true |
|
|
|
|
startPolling() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// 开始轮询 |
|
|
|
|
function startPolling() { |
|
|
|
|
// 开启定时器,每隔3秒触发一次 |
|
|
|
|
intervalId.value = setInterval(() => { |
|
|
|
|
getIsPay({ orderCode: payData.value.orderCode }).then((res) => { |
|
|
|
|
if (res) { |
|
|
|
|
qrclose() |
|
|
|
|
message.success('支付成功') |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, 2000) |
|
|
|
|
} |
|
|
|
|
// 结束轮询 |
|
|
|
|
function stopPolling() { |
|
|
|
|
// 停止定时器 |
|
|
|
|
if (intervalId.value) { |
|
|
|
|
clearInterval(intervalId.value) |
|
|
|
|
intervalId.value = null |
|
|
|
|
qrshow.value = false |
|
|
|
|
|
|
|
|
|
userStore.getChatInfoFun() |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 关闭二维码弹窗 |
|
|
|
|
function qrclose() { |
|
|
|
|
stopPolling() |
|
|
|
|
} |
|
|
|
|
onMounted(() => { |
|
|
|
|
getType() |
|
|
|
|
getgoodsList('1') |
|
|
|
|
}) |
|
|
|
|
// 关闭弹窗 |
|
|
|
|
function handleClose() { |
|
|
|
|
rechargeStore.rechargeClose() |
|
|
|
|
} |
|
|
|
|
// 选项卡样式 |
|
|
|
|
function tabClass(index: number) { |
|
|
|
@ -70,6 +127,7 @@ const extreme = ref([{
|
|
|
|
|
unit: '幅', |
|
|
|
|
name: '可生成图片', |
|
|
|
|
}]) |
|
|
|
|
|
|
|
|
|
// 走马灯向上 |
|
|
|
|
function onPrevClick() { |
|
|
|
|
carouselRef.value.prev() |
|
|
|
@ -89,34 +147,34 @@ function onNextClick() {
|
|
|
|
|
<div class="top"> |
|
|
|
|
<div class="tabs"> |
|
|
|
|
<div |
|
|
|
|
v-for="(tab, index) in tabs" |
|
|
|
|
v-for="(item, index) in tabs" |
|
|
|
|
:key="index" |
|
|
|
|
:class="tabClass(index)" |
|
|
|
|
@click="selectTab(index)" |
|
|
|
|
@click="selectTab(index, item.key)" |
|
|
|
|
> |
|
|
|
|
<img v-if="index === tabs.length - 1" class="vipphoto" :src="vip" alt=""> |
|
|
|
|
{{ tab.title }} |
|
|
|
|
{{ item.title }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="bottom"> |
|
|
|
|
<div v-if="activeTab !== 4" class="basic-meal"> |
|
|
|
|
<div v-if="activeTab !== tabs.length - 1" class="basic-meal"> |
|
|
|
|
<div class="prev-button prev" @click="onPrevClick"> |
|
|
|
|
<LeftOutlined /> |
|
|
|
|
</div> |
|
|
|
|
<Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="3" :slides-to-scroll="1"> |
|
|
|
|
<div v-for="(item, index) in items" :key="index" class="carouse-box"> |
|
|
|
|
<Carousel ref="carouselRef" arrows :dots="false" :autoplay="false" :slides-to-show="goodslists.length > 3 ? 3 : goodslists.length" :slides-to-scroll="1"> |
|
|
|
|
<div v-for="(item, index) in goodslists" :key="index" class="carouse-box"> |
|
|
|
|
<div class="carouse-item"> |
|
|
|
|
<div class="dotnumbox"> |
|
|
|
|
<div class="dotnum"> |
|
|
|
|
100点数 |
|
|
|
|
{{ item.giveNum }}点数 |
|
|
|
|
</div> |
|
|
|
|
<div class="discount"> |
|
|
|
|
限时折扣 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="deadline"> |
|
|
|
|
使用期限1个月 |
|
|
|
|
{{ item.title }} |
|
|
|
|
</div> |
|
|
|
|
<div class="equitiesbox"> |
|
|
|
|
<div class="equities"> |
|
|
|
@ -124,7 +182,7 @@ function onNextClick() {
|
|
|
|
|
GPT3.5版本 |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
250条 |
|
|
|
|
{{ item.gpt35Num }}条 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
@ -133,7 +191,7 @@ function onNextClick() {
|
|
|
|
|
GPT4.0版本 |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
25条 |
|
|
|
|
{{ item.gpt40Num }}条 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="equities"> |
|
|
|
@ -141,20 +199,20 @@ function onNextClick() {
|
|
|
|
|
AI绘图 |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
50幅 |
|
|
|
|
{{ item.pictureNum }}幅 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="price"> |
|
|
|
|
<div class="nowprice"> |
|
|
|
|
¥39.9 |
|
|
|
|
¥{{ item.price }} |
|
|
|
|
</div> |
|
|
|
|
<div class="oldprice"> |
|
|
|
|
¥50.00 |
|
|
|
|
¥{{ item.costPrice }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="payBtn"> |
|
|
|
|
<Button class="customBtn"> |
|
|
|
|
<Button class="customBtn" @click="handlePay(item.id)"> |
|
|
|
|
立即充值 |
|
|
|
|
</Button> |
|
|
|
|
</div> |
|
|
|
@ -219,7 +277,7 @@ function onNextClick() {
|
|
|
|
|
<div class="extremeopen"> |
|
|
|
|
<div class="openleft"> |
|
|
|
|
<span class="freeprice">畅享价:</span> |
|
|
|
|
<span class="newprice">¥2999</span> |
|
|
|
|
<span class="newprice">¥{{ goodslists[0].price }}</span> |
|
|
|
|
<span class="oldprice">¥4999</span> |
|
|
|
|
</div> |
|
|
|
|
<div class="openright"> |
|
|
|
@ -242,12 +300,27 @@ function onNextClick() {
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</transition> |
|
|
|
|
<Modal |
|
|
|
|
v-model:open="qrshow" |
|
|
|
|
:footer="null" |
|
|
|
|
:width="210" |
|
|
|
|
:body-style="{ zIndex: '2000' }" |
|
|
|
|
:closable="false" |
|
|
|
|
@cancel="qrclose" |
|
|
|
|
> |
|
|
|
|
<QRCode |
|
|
|
|
style="text-align: center;" |
|
|
|
|
error-level="H" |
|
|
|
|
:value="payData.wx_result" |
|
|
|
|
:icon="logo" |
|
|
|
|
/> |
|
|
|
|
</Modal> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.modal-mask { |
|
|
|
|
position: fixed; |
|
|
|
|
z-index: 9999; |
|
|
|
|
z-index: 1000; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
@ -704,6 +777,7 @@ function onNextClick() {
|
|
|
|
|
height: 260px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.dotnumbox { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|