yichael_intomovie/pages/my/vip.vue

<template>
    <view class="content-page-wrap flex-column">
        <top-main ref ="topMainRef" title="VIP" back></top-main>
        <view class="head-title flex-left justify-between">
            <view style="width: 94rpx">
                <u-icon
                    name="arrow-left"
                    color="#000E08"
                    size="42rpx"
                    @click="goBack"
                    bold
                ></u-icon>
            </view>
            <view>VIP</view>
            <view style="width: 94rpx"> </view>
        </view>
        <view class="video-box">
            <radio-group @change="radioChange">
                <view
                    class="card-row flex-column"
                    v-for="(item, index) in vipList"
                    :key="index"
                   
                    :style="{ backgroundImage: `url(${item.img})` }"
                >
                    <view class="card-text">
                        <view>
                            <text> {{ item.costmoney }}TOX</text>
                            <text class="cost-text"> {{ item.money }}TOX</text>
                        </view>
                        <radio :value="item.id" :checked="item.id==1?true:false" backgroundColor="" activeBackgroundColor="#3F3939"></radio>
                    </view>
                </view>
            </radio-group>
        </view>
        <view style="margin: 30rpx 140rpx 60rpx">
            <u-button
                type="primary"
                text="支付"
                size="large"
                shape="circle"
                color="#3F3939"
				 @click="handlePayment"
            ></u-button>
        </view>
    </view>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import topMain from "@/components/topMain.vue";

const topMainRef = ref(null);

let vipList = ref([
    {
        costmoney: "0.01",
        money: "10",
        id: "1",
        img: "",
    },
    {
        costmoney: "0.02",
        money: "100",
        id: "2",
        img: "",
    },
    {
        costmoney: "0.03",
        money: "2000",
        id: "3",
        img: "",
    },
]);

let selectedVip = ref("1"); // 设置默认选中的值为第一个选项的id

const goBack = () => {
    uni.navigateBack();
};

const loadImages = async () => {
    try {
        const monthlyCard = (await import('@/static/img/monthly-card.svg')).default;
        const yearCard = (await import('@/static/img/year-card.svg')).default;
        const nftCard = (await import('@/static/img/nft-card.svg')).default;

        vipList.value[0].img = monthlyCard;
        vipList.value[1].img = yearCard;
        vipList.value[2].img = nftCard;

        console.log("Images loaded", vipList.value);
    } catch (error) {
        console.error("Error loading images", error);
    }
};

const radioChange = (evt) => {
    selectedVip.value = evt.detail.value;
};

const handlePayment = () => {
    const selectedVipItem = vipList.value.find(vip => vip.id === selectedVip.value);
    if (selectedVipItem) {
        topMainRef.value.transfer(selectedVipItem.costmoney);
    }
};

onMounted(() => {
    loadImages();
});
</script>


<style lang="less" scoped>
.content-page-wrap {
    overflow-x: hidden;
    padding: 32rpx;
    .video-box {
        width: 100%;
        .card-row {
            background-repeat: no-repeat;
            background-size: 100%;
            height: 430rpx;
            margin-bottom: 20rpx;
            .card-text {
                flex: 1;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;
                padding: 32rpx 64rpx;
                color: #000;
                font-size: 32rpx;
                font-weight: bold;
                .cost-text {
                    margin-left: 20rpx;
                    text-decoration: line-through 4rpx solid #ff1717;
                }
            }
        }
    }
}
</style>