uniProject/pages/pay/svip.vue

<!-- svip页面 -->
<template>
	<view class="ezy-svip-page">
		<view class="icon-title-navBar-box">
			<!-- 返回按钮 ↓ -->
			<view class="nav-bar-icon"></view>
			<view class="nav-bar-title">开通svip</view>
		</view>
		<icon class="svip-login"></icon>
		<view class="svip-list-box">
			<view v-for="(item, index) in svipArr" :key="index" class="list-item-box">
				<icon class="list-icon" :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></icon>
				<view>
					<view class="list-title">{{item.title}}</view>
					<view class="list-content">{{item.content}}</view>
				</view>
			</view>
		</view>
		<view class="open-svip-box">
			<view class="svip-price-box">
				<view>原价：<text class="original-price">¥598</text></view>
				<view class="discount-price">活动价：¥198</view>
			</view>
			<radio-group @change="radioChange" class="pay-type-box" >
				<view class="type-radio-title">支付方式</view>
				<view class="type-radio-content">
					<view class="type-radio-box">
						<icon class="wx-radio"></icon>
						<text>微信</text>
						<radio value="weixin" :checked="payType==='weixin'" activeBackgroundColor="transparent"
						:class="{'radio-checked': payType==='weixin'}"/>
					</view>
					<view class="type-radio-box">
						<icon class="zfb-radio"></icon>
						<text>支付宝</text>
						<radio value="zhifubao" :checked="payType==='zhifubao'" activeBackgroundColor="transparent"
						:class="{'radio-checked': payType==='zhifubao'}" style="margin-right: 0;"/>
					</view>
				</view>
			</radio-group>
			<view class="open-svip-btn">立即开通</view>
		</view>
		<CustomTabBar></CustomTabBar>
	</view>
</template>

<script setup>
import {ref} from "vue";
import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
let payType = ref('weixin')
const svipArr = [
    {
        iconPath: 'static/images/pay/svip-list-icon1.png',
		title:'学习资源，随心畅学',
        content: '解锁全年级数学优质学习资源，满足多样学习需求'
    },
    {
        iconPath: 'static/images/pay/svip-list-icon2.png',
        title:'名师打造，优质路径',
        content: '资深名师精心规划学习路径，引领高效提升方向'
    },
    {
        iconPath: 'static/images/pay/svip-list-icon3.png',
        title:'进度分析，个性贴心',
        content: '优先参与丰富真题测试，精准洞察学习状况'
    },
    {
        iconPath: 'static/images/pay/svip-list-icon4.png',
        title:'真题测试，优先体验',
        content: '成为会员，即刻畅享专属权益，开启无忧学习之旅'
    }
];
function radioChange(data){
	payType.value = data.detail.value;
}
</script>

<style>
</style>