svip页面开发

pages/pay/svip.vue

@@ -21,26 +21,32 @@
 				<view>原价：<text class="original-price">¥598</text></view>
 				<view class="discount-price">活动价：¥198</view>
 			</view>
-			<radio-group @change="radioChange" class="pay-type-box">
-				<view>支付方式</view>
-				<view class="type-radio-box">
-					<icon></icon>
-					<text>微信</text>
-					<radio value="weixin" :checked="payType==='weixin'" />
-				</view>
-				<view class="type-radio-box">
-					<icon></icon>
-					<text>支付宝</text>
-					<radio value="zhifubao" :checked="payType==='zhifubao'" />
+			<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 = [
     {
@@ -64,6 +70,9 @@ const svipArr = [
         content: '成为会员，即刻畅享专属权益，开启无忧学习之旅'
     }
 ];
+function radioChange(data){
+	payType.value = data.detail.value;
+}
 </script>
 
 <style>