recruitment-wechat-uniapp-241012/pages_order/mine/MemberRecharge.vue

<template>
	<!-- 会员充值 -->
	<view class="page">
		<navbar title="会员充值" bgColor="#3796F8" leftClick color="#fff" @leftClick="$utils.navigateBack" />
		<view class="head">
			<view class="headImage">
				<image :src="headImage" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="name">
					倾心.
					<view>
						<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
						修改资料
					</view>
				</view>
				<view class="tips">
					手机号：1300000000
				</view>
			</view>
		</view>

		<view class="openvip">开通VIP</view>

		<view class="options">
			<view class="option" v-for="(item,index) in 3" :key="index">
				<view style="font-weight: 600;">普通VIP会员</view>
				<view style="color: #FF2E2E;">
					<text style="font-size: 20rpx;">￥</text>
					<text style="font-size: 36rpx;">8</text>
				</view>
				<view>包年</view>
			</view>
		</view>

		<view class="block">
			<view class="privilege">普通专属特权</view>
			<view class="cells">
				<view class="cell">
					<image src="../static/mine/characteristic.png" mode="aspectFill" />
					<view class="text">
						<view>特权一</view>
						<view style="font-size: 24rpx;">该特权每天可免费查看2个号码。</view>
					</view>
				</view>
				<view class="cell">
					<image src="../static/mine/integral.png" mode="aspectFill" />
					<view class="text">
						<view>特权二</view>
						<view style="font-size: 24rpx;">快速发布，优先审核</view>
					</view>
				</view>
			</view>
			<view class="tail">
				<view>
					<uv-radio-group v-model="radiovalue">
						<uv-radio size="30rpx">
						</uv-radio>
					</uv-radio-group>
				</view>
				<view>开通前请阅读《会员服务协议》</view>
			</view>
		</view>

		<view class="confirm">
			<view class="box">
				<view>
					总计金额：￥8
				</view>
				<view>
					确认协议并支付
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				radiovalue: false
			}
		},
		computed: {
			headImage() {
				return '/static/image/center/headImage.png'
			},

		},
		methods: {

		},
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #fff;
		height: 100vh;

		.head {
			display: flex;
			background-color: $uni-color;
			padding: 40rpx 20rpx;
			align-items: center;
			position: relative;
			color: #fff;
			padding-bottom: 70rpx;

			.headImage {
				width: 120rpx;
				height: 120rpx;
				background-size: 100% 100%;
				overflow: hidden;
				border-radius: 50%;
				margin-right: 40rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.info {
				font-size: 28rpx;

				.name {
					font-size: 32rpx;
					display: flex;
					padding-bottom: 10rpx;

					view {
						display: flex;
						font-size: 20rpx;
						align-items: center;
						padding-left: 20rpx;
					}
				}

				.tips {
					font-size: 26rpx;
					color: #fff;
				}
			}
		}

		.openvip {
			width: 100%;
			text-align: center;
			padding: 40rpx 0;
			font-size: 36rpx;
			font-weight: 500;
		}

		.options {
			display: flex;
			justify-content: space-around;

			.option {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border: 2rpx solid #3796F8;
				width: 220rpx;
				height: 240rpx;
				border-radius: 16rpx;

				view {
					margin-top: 15rpx;
					font-size: 28rpx;
				}
			}
		}

		.block {
			width: 90%;
			margin-left: 5%;

			.privilege {
				font-size: 34rpx;
				padding: 60rpx 0rpx 40rpx;
			}

			.cells {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 170rpx;

				.cell {
					display: flex;
					align-items: center;

					.text {
						margin-left: 20rpx;
						color: #707070;
						font-size: 28rpx;

					}

					image {
						height: 70rpx;
						width: 70rpx;
					}
				}

			}

			.tail {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				view:nth-child(2) {
					margin-left: 10rpx;
					color: #707070;
					font-size: 24rpx;
				}
			}
		}

		.confirm {
			display: flex;
			position: fixed;
			bottom: 0px;
			width: 100%;
			justify-content: center;
			align-items: center;
			padding: 8rpx 0;
			box-shadow: 0 -2rpx 6rpx 0 #d9d9d9	;

			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 92%;
				font-size: 28rpx;

				view:nth-child(1) {
					color: #999999;
				}
				view:nth-child(2) {
					padding: 25rpx 60rpx;
					color: #FFFFFF;
					background-color: #3796F8;
					border-radius: 12rpx;
					
				}

view:nth-child(1) {
					color: #999999;
				}
			}
		}

	}
</style>