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="userInfo.headImage" mode="aspectFill"></image>
			</view>
			<view class="info">
				<view class="name">
					{{userInfo.nickName}}
					<view>
						<uv-icon name="edit-pen" size="40rpx" color="#fff"></uv-icon>
						修改资料
					</view>
				</view>
				<view class="tips">
					手机号：{{userInfo.phone}}
				</view>
			</view>
		</view>

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

		<view class="options">
			<view 
			@click="vipId = item.id"
			:class="{option : true, act : vipId == item.id}" 
			v-for="(item,index) in list" :key="index">
				<view style="font-weight: 600;">{{ item.name }}</view>
				<view style="color: #FF2E2E;">
					<text style="font-size: 20rpx;">￥</text>
					<text style="font-size: 36rpx;">{{ item.price }}</text>
				</view>
				<view>{{ item.remark }}</view>
			</view>
		</view>

		<view class="block" v-if="vip.id">
			<view class="privilege">{{ vip.name }}</view>
			<view class="cells">
				<view class="cell" 
				v-for="(item, index) in vip.keys">
					<image src="../static/mine/characteristic.png" mode="aspectFill" />
					<view class="text">
						<view>{{ item[0] }}</view>
						<view style="font-size: 24rpx;">该{{ item[1] }}</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>
					总计金额：￥{{ vip.price }}
				</view>
				<view @click="submit(vip.id)">
					确认协议并支付
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import mixinList from '@/mixins/list.js'
	import { mapState } from 'vuex'
	export default {
		mixins : [mixinList],
		data() {
			return {
				radiovalue: false,
				mixinsListApi : 'commonQueryVipType',
				vipId : ''
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
		},
		computed: {
			headImage() {
				return '/static/image/center/headImage.png'
			},
			vip(){
				let vip = {}
				this.list.forEach(n => {
					if(n.id == this.vipId){
						
						let keys = n.perquisite.split('##')
						
						keys.forEach((s, i) => {
							keys[i] = s.split('$$')
						})
						
						n.keys = keys
						
						vip = n
					}
				})
				return vip
			},
		},
		methods: {
			submit(id){
				console.log("当前标识:"+id)
				this.$api('addVIP',{id:id}, res =>{
					console.log(res)
				})
			},
			getDataThen(list){
				this.vipId = list[0] && list[0].id
			},
		},
	}
</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;
			flex-wrap: wrap;
			.option {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border: 2rpx solid #3796F8;
				width: 220rpx;
				height: 240rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
				margin: 12rpx;
				view {
					margin-top: 15rpx;
					font-size: 28rpx;
				}
			}
			.act{
				border: 4rpx solid $uni-color;
				box-shadow: 0 0 10rpx 10rpx rgba($uni-color, 0.2);
			}
		}

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

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

			.cells {
				display: flex;
				flex-direction: column;

				.cell {
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					.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>