<!-- 开通嘀咚会员 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<view class="bg-box">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<view class="ss-flex-2 ss-col-center">
					<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
					<view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">嘀咚会员</view>
				</view>
				<view class="ss-flex-1"></view>
				<text class="textIcon icon-kefu icon-navigation"></text>
				<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
			</view>
			<view class="phone-box">
				155****0417
			</view>
			<view class="message-info-box">尚未开通嘀咚会员</view>
			<view class="title-info">开通即享4大权益</view>
			<view class="ss-flex-2 ss-col-center ss-row-between public-box" style="margin-top: 40rpx;">
				<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;" @click="jumpOrderInfo">
					<text style="color: #FFEFBB;font-size: 50rpx;font-weight: 650;" class="textIcon icon-icon_fuwu_huiyuanquanyi icon-navigation"></text>
					<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">折上八折</view>
					<view style="width: 100%;text-align: center;font-size: 18rpx;margin-top: 5rpx;">买套餐八折优惠</view>
				</view>
				<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;" @click="jumpOrderInfo">
					<text style="color: #FFEFBB;font-size: 50rpx;font-weight: 650;" class="textIcon icon-wodeyouhuiquan icon-navigation"></text>
					<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">折扣劵礼包</view>
					<view style="width: 100%;text-align: center;font-size: 18rpx;margin-top: 5rpx;">每月xxx元优惠劵</view>
				</view>
				<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;" @click="jumpOrderInfo">
					<text style="color: #FFEFBB;font-size: 50rpx;font-weight: 650;" class="textIcon icon-yongjinxiangqing-X icon-navigation"></text>
					<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">拉新有奖</view>
					<view style="width: 100%;text-align: center;font-size: 18rpx;margin-top: 5rpx;">拉新推广赚佣金</view>
				</view>
				<view class="ss-flex-2 ss-col-center ss-row-center" style="flex-wrap: wrap;" @click="jumpOrderInfo">
					<text style="color: #FFEFBB;font-size: 50rpx;font-weight: 650;" class="textIcon icon-kefu icon-navigation"></text>
					<view style="width: 100%;text-align: center;font-size: 22rpx;margin-top: 5rpx;">尊享客服</view>
					<view style="width: 100%;text-align: center;font-size: 18rpx;margin-top: 5rpx;">低电量客服提醒</view>
				</view>
			</view>
		</view>
		
		<!-- 会员卡 -->
		<view class="year-card-box" style="color: #3E210F;">
			<view style="font-size: 28rpx;margin-top: 10rpx;">年费会员</view>
			<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx;">
				<text style="color: #3E210F;font-size: 22rpx;font-weight: 650;" class="textIcon icon-renminbi1688 icon-navigation"></text>
				<view style="font-size: 26rpx;">99/年</view>
				<text style="color: #3E210F;font-size: 18rpx;font-weight: 650;margin-left: 20rpx;text-decoration: line-through;margin-top: 7rpx;" class="textIcon icon-renminbi1688 icon-navigation"></text>
				<view style="font-size: 20rpx;text-decoration: line-through;margin-top: 7rpx;">199/年</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view style="width: 95%;margin-left: 2.5%;box-sizing: border-box;margin-top: 30rpx;">
			<view class="pay-item-box">支付方式</view>
			<view class="pay-item-box ss-flex-2 ss-col-center">
				<text style="color: #FC495C;font-size: 24rpx;font-weight: 650;" class="textIcon icon-wodeyouhuiquan icon-navigation"></text>
				<view style="font-size: 26rpx;margin-left: 5rpx;">余额支付(可用：999.00元)</view>
				<view class="ss-flex-1"></view>
				<radio
				  :checked="state.yuezf"
				  color="var(--ui-BG-Main)"
				  style="transform: scale(0.8)"
				  activeBackgroundColor="#FC495C"
				  @tap.stop="onChange('yuezf')"
				/>
			</view>
			<view class="pay-item-box ss-flex-2 ss-col-center">
				<text style="color: #FC495C;font-size: 24rpx;font-weight: 650;" class="textIcon icon-wodeyouhuiquan icon-navigation"></text>
				<view style="font-size: 26rpx;margin-left: 5rpx;">微信支付</view>
				<view class="ss-flex-1"></view>
				<radio
				  :checked="state.wxzf"
				  color="var(--ui-BG-Main)"
				  style="transform: scale(0.8)"
				  activeBackgroundColor="#FC495C"
				  @tap.stop="onChange('wxzf')"
				/>
			</view>
			<view class="pay-item-box ss-flex-2 ss-col-center">
				<text style="color: #FC495C;font-size: 24rpx;font-weight: 650;" class="textIcon icon-wodeyouhuiquan icon-navigation"></text>
				<view style="font-size: 26rpx;margin-left: 5rpx;">支付宝</view>
				<view class="ss-flex-1"></view>
				<radio
				  :checked="state.zfbzf"
				  color="var(--ui-BG-Main)"
				  style="transform: scale(0.8)"
				  activeBackgroundColor="#FC495C"
				  @tap.stop="onChange('zfbzf')"
				/>
			</view>
			<view class="pay-item-box ss-flex-2 ss-col-center">
				<radio
				  :checked="agreeWith"
				  color="var(--ui-BG-Main)"
				  style="transform: scale(0.8)"
				  activeBackgroundColor="#FC495C"
				   @tap.stop="onAgree"
				/>
				<view style="font-size: 26rpx;margin-left: 5rpx;">已阅读并同意<text style="color:#3497FC;">《嘀咚到位服务协议》</text></view>
				<view class="ss-flex-1"></view>
			</view>
			<view class="pay-bt">立即支付</view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	// 返回首页
	const backPage = async () => {
		uni.reLaunch({
			url: '/pages/XDHome/myHome/myHome',
		});
	};

	// 选中什么支付方式
	const state = reactive({
	  yuezf: false,
	  wxzf:false,
	  zfbzf:false
	});
	
	// 勾选协议
	function onChange(name) {
	  state[name] = !state[name];
	  let arr=Object.keys(state)
	  for(let i=0;i<arr.length;i++){
		  let item=arr[i]
		  if(item!=name){
			  state[item]=false
		  }
	  }
	}
	// 勾选同意
	const agreeWith=ref(false)
	function onAgree(){
		agreeWith.value=!agreeWith.value
	}

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.pay-bt{
		width:100%;
		box-sizing: border-box;
		padding:17rpx;
		border-radius:15rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #36AFCA;
		margin-top: 15rpx;
	}
	.pay-item-box{
		width: 100%;
		padding: 15rpx 0rpx;
		color: #4A4C4D;
		font-size: 24rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #F4F4F4;
	}
	.year-card-box{
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 30rpx;
		border-radius: 10rpx;
		background: linear-gradient(to right, #F5DCB3, #E6BA71);
		margin-top: 20rpx;
	}
	.title-info{
		width: 100%;
		padding: 10rpx;
		text-align: center;
		font-size: 26rpx;
		letter-spacing: 2rpx;
	}
	.message-info-box {
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		font-size: 18rpx;
		padding-left: 18rpx;
	}

	.phone-box {
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
		padding: 10rpx;
		font-size: 30rpx;
		margin-top: 30rpx;
	}

	.bg-box {
		position: relative;
		width: 100%;
		min-height: 400rpx;
		box-sizing: border-box;
		background-color: #13A6E4;
		color: #fff;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 95%;
		margin-left: 2.5%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 50rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>