uniProject/pages/pay/orderPay.vue

<template>
	<view class="ezy-order-pay-page">
		<view class="ezy-navBar-box">
			<view class="nav-bar-icon"></view>
			<text class="nav-bar-title">订单支付</text>
			<view class="text-btn">取消订单</view>
		</view>
		<view class="order-pay-border-box">
			<!-- svip -->
			<view class="order-pay-img-box">
				<!-- :class="'order-pay-img'+item.cardId" 改到下方 -->
				<icon :class="'order-pay-img1'"></icon>
				<view class="img-content-box">
					<view class="content-name">SVIP终身卡</view>
					<text class="content-tag">终身有效</text>
					<text class="content-tag">不支持退订</text>
					<view class="content-yuanjia">¥598</view>
				</view>
			</view>
			
			<!-- 价格 -->
			<view class="price-box">
				<view class="price-row">
					<text>原价合计</text>
					<text class="price-red">¥598</text>
				</view>
				<view class="price-row price-line-row">
					<text>活动合计</text>
					<text class="price-red">-¥400</text>
				</view>
				<view class="price-row">
					<text>合计</text>
					<text>¥198</text>
				</view>
			</view>
			
			<!-- 支付方式 -->
			<view class="pay-type-box">
				<view class="pay-type-name">支付方式</view>
				<radio-group @change="radioChange">
					<view  class="type-radio-box">
						<view class="type-radio-row">
							<icon class="wx-radio"></icon>
							<view class="radio-content-box">
								<view class="radio-title">微信支付</view>
								<text class="radio-content">支付信用卡、储蓄卡快捷支付及微信</text>
							</view>
							<radio value="weixin" :checked="payType==='weixin'" activeBackgroundColor="transparent"
							:class="{'radio-checked': payType==='weixin'}"/>
						</view>
						<view class="type-radio-row">
							<icon class="zfb-radio"></icon>
							<view class="radio-content-box">
								<view class="radio-title">支付宝</view>
								<text class="radio-content">支付信用卡、储蓄卡快捷支付及支付宝</text>
							</view>
							<radio value="zhifubao" :checked="payType==='zhifubao'" activeBackgroundColor="transparent"
							:class="{'radio-checked': payType==='zhifubao'}" style="margin-right: 0;"/>
						</view>
					</view>
				</radio-group>
			</view>
			
			<!-- 合计 -->
			<view class="pay-sum-box">
				<view>
					<text>合计：</text>
					<text class="sum-red">¥198</text>	
				</view>
				<view class="sum-btn">
					支付
					<icon></icon>
					29:30
				</view>
			</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')
	function radioChange(data){
		payType.value = data.detail.value;
	}
</script>

<style>
</style>