zouma-short/src/components/PurchaseModal.vue

<template>
    <ion-modal :is-open="show" :initial-breakpoint="0.7" :breakpoints="[0.7]" :handle="false" @didDismiss="dismiss">
        <ion-content class="ion-padding">
            <div class="news-title text-white text-lg AlimamaShuHeiTi relative">
                <span class="z-[1] relative">購買金豆</span>
                <img class="w-[78px] h-[16px] absolute bottom-0 left-0 z-0" src="@/assets/png-xiantiao1.png" alt="" />
            </div>
            <div class="money text-xs text-white mt-[5px]">帳戶餘額：{{ balance }}金豆</div>

            <div class="choose-list flex flex-wrap justify-between overflow-auto" style="height: 350px">
                <!-- <div class="choose-btn  flex flex-col items-center justify-center">
                <div class="val text-white">
                    <span class="text-[16px]">¥</span>
                    <span class="text-[26px]">19.9</span>
                </div>
                <div class="sub text-xs text-white">1990金豆+<span class="text-[#FFEF00]">送888金豆</span></div>
                <div class="btn-tag">首充福利</div>
            </div> -->
                <div
                    v-for="(item, i) in products"
                    :key="item.id"
                    class="choose-btn flex flex-col items-center justify-center"
                    :class="{ active: selected === i }"
                    @click="selected = i"
                >
                    <div class="val text-white">
                        <!-- <span class="text-[16px]">¥</span> -->
                        <span class="text-[16px]">{{ item.pricing.price }}</span>
                    </div>
                    <div class="sub text-xs text-[#FFEF00]">
                        {{ item.title }}
                        <!-- <span class="text-[#FFEF00]">送888金豆</span> -->
                    </div>
                    <!-- <div class="btn-tag">粉丝福利</div> -->
                </div>
            </div>

            <div class="tips text-[10px] text-[#61657A] text-center py-4">
                虛擬商品購買後不可退換，青少年請在家長陪同下購買
            </div>

            <div class="btn">
                <van-button class="AlimamaShuHeiTi" type="primary" block round @click="buy">立即支付</van-button>
            </div>
        </ion-content>
    </ion-modal>
</template>

<script setup>
import { IonModal, IonContent } from '@ionic/vue'
import { ref } from 'vue'
import { useIAPStore } from '@/stores/IAP'
import { storeToRefs } from 'pinia'
import uri from 'fast-uri'
import { useUserStore } from '@/stores/user'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
const emit = defineEmits(['update:show'])
function dismiss() {
    emit('update:show', false)
}
const userStore = useUserStore()
const { user, balance } = storeToRefs(userStore)
const { getBalance } = userStore
const { products } = storeToRefs(useIAPStore())
const selected = ref(0)

function buy() {
    const { store, ProductType, Platform } = CdvPurchase
    store.when().finished(() => {
        getBalance()
    })
    store.validator = uri.resolve(import.meta.env.VITE_HTTP_BASE_URL, '/api/userBalances/recharge/' + user.id)
    // store.validator = 'http://192.168.6.215:3333/api/userBalances/recharge/1'
    console.log(products.value[selected.value].id)
    const product = store.get(products.value[selected.value].id, Platform.GOOGLE_PLAY)
    const myTransaction = store.findInLocalReceipts(product)
    console.log('myTransaction', myTransaction)
    console.log('product', product)
    product.getOffer().order()
}
</script>

<style lang="less" scoped>
.buy-page {
    --van-popup-background: #20223c;
    padding: 21px 18px;
}

.choose-btn {
    width: calc(50vw - 27px);
    height: 88px;
    background: #2d3059;
    border-radius: 8px;
    border: 1px solid #525686;
    margin-top: 18px;
    display: inline-flex;
    position: relative;

    .btn-tag {
        font-size: 12px;
        color: #ffffff;
        line-height: 18px;
        position: absolute;
        top: 0;
        left: 0;
        width: 62px;
        height: 18px;
        background: #7f82af;
        border-radius: 8px 0px 8px 0px;
        text-align: center;
    }

    &.active {
        background: #2d3059 linear-gradient(318deg, rgba(255, 87, 186, 0.1) 0%, rgba(255, 87, 186, 0.2) 100%);
        border-radius: 8px;
        border: 2px solid #ff57ba;
        .sub {
            span {
                color: #fff !important;
            }
        }
        .btn-tag {
            background: #2d3059 linear-gradient(-318deg, #ff3b20, #ff57ba);
            left: -2px;
            top: -1px;
        }
    }
}
</style>