<template>
	<view class="content">
		<headerTopsTips></headerTopsTips>
		<uni-nav-bar left-icon="left" title="vip购买" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
		<view class="padd_box">
			<view class="now_pur">
				<view class="tops_vip">
					<view style="color: #7bc68f; font-weight: 600;">
						<text>VIP会员卡6折</text>
						<text>¥10.0</text>
					</view>
					<view style="font-size: 12px; margin-top: 5rpx;">
						<text style="color: #7bc68f;">会员享受6折优惠</text>
						<text style="color: #ccc;">¥99</text>
					</view>
				</view>
				<view class="bottom_vip">
					<view>
						<text>有效期30天</text>
						<view class="see_main">
							查看详情
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="bottom_pur">
				<view style="display: flex; align-items: center;">
					<view style="font-size: 12px;">
						总计:
					</view>
					<view class="money">
						¥10.0
					</view>
				</view>
				<view class="btn_pur" @click="choose_pay">
					立即支付
				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script setup>
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	import {
		ref
	} from 'vue'

	import {
		baseUrl,
		apiPath
	}
	from '@/sheep/config';
	import sheep from '@/sheep';

	function handlegoback() {
		uni.navigateBack()
	}

	function choose_pay() {
		uni.request({
			url: `${baseUrl + apiPath}/share/user-vip/create`,
			method: 'POST',
			header: {
				'tenant-id': 1, //自定义请求头信息
				"Authorization": uni.getStorageSync('token')
			},
			success: (res) => {
				console.log(res, '结束')
				if (res.data.code == 0) {
					// handle_finish_pay(res.data.data.rideId)
					sheep.$router.go('/pages/pay/index', {
						id: res.data.data.payOrderId,
						type: 'vip'
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '创建失败'
					})
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		// background: #f8f8f8;
		display: flex;
		flex-direction: column;
	}

	.padd_box {
		padding: 20rpx;
		box-sizing: border-box;
		position: relative;
		flex: 1;
	}

	.now_pur {
		width: 100%;
		height: 200rpx;
		background: #eafff0;
		border-radius: 10rpx;
		border: 1px solid #91d299;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.tops_vip {
			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}

		.bottom_vip {
			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #ccc;
				font-size: 12px;
			}

			.see_main {
				line-height: 40rpx;
				border: 1px solid #ccc;
				border-radius: 20rpx;
				width: 150rpx;
				text-align: center;
				font-size: 12px;
			}
		}
	}

	.bottom_pur {
		padding-left: 10rpx;
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 100rpx;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.money {
			margin-left: 15rpx;
			font-size: 18px;
			font-weight: 600;
			color: #fb9004;
		}

		.btn_pur {
			width: 250rpx;
			background: #44c159;
			color: #fff;
			font-size: 14px;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.pop_main {
		padding: 30rpx;
		box-sizing: border-box;

		// margin-top: 50rpx;
		.package {
			font-size: 16px;
			font-weight: 600;
			text-align: center;
		}

		.item_main {
			margin: 30rpx 0;
			font-weight: 600;
		}
	}
</style>