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>
					{{UserExtensionInfo.vipType}}
				</view> -->
			</view>
		</view>

		<view class="openvip">{{UserExtensionInfo.vipType || ''}}</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" 
				:key="item.id"
				v-for="(item, index) in vip.keys">
					<image src="../static/mine/characteristic.png" 
					style="flex-shrink: 0;"
					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-checkbox-group v-model="checkboxValue">
						<uv-checkbox
							size="40rpx"
							icon-size="30rpx"
							activeColor="#3796F8"
							:name="1"
						></uv-checkbox>
					</uv-checkbox-group>
				</view>
				
				<!-- 缺失会员服务协议 -->
				<view>开通前请阅读<text
				style="color: #3796F8;"
				@click="$refs.configPopup.open('config_vip_service')"
				>《会员服务协议》</text></view>
			</view>
		</view>

		<view class="confirm">
			<view class="box">
				<view>
					总计金额：￥{{ vip.price }}
				</view>
				<view @click="submit(vipId)">
					确认协议并支付
				</view>
			</view>
		</view>
		
		<configPopup ref="configPopup"/>
	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	import {
		mapState
	} from 'vuex'
	export default {
		mixins: [mixinList],
		data() {
			return {
				checkboxValue : [],
				mixinsListApi: 'commonQueryVipType',
				vipId: '',
			}
		},
		onShow() {
			this.$store.commit('getUserInfo')
			//判断如果是登录状态则获取信息
			this.$store.commit('getUserExtensionInfo')
		},
		computed: {
			...mapState(['UserExtensionInfo']),
			headImage() {
				return '/static/image/center/headImage.png'
			},
			vip() {
				let vip = {}
				this.list.forEach(n => {
					if (n.id == this.vipId) {

						let keys = n.perquisite.split('\n')

						keys.forEach((s, i) => {
							keys[i] = s.split('$$')
						})

						n.keys = keys

						vip = n
					}
				})
				return vip
			},
		},
		methods: {
			submit(vipTypeId) {
				if(!this.checkboxValue.length){
					return uni.showToast({
						title: '请先同意会员服务协议',
						icon:'none'
					})
				}
				console.log("当前标识:" + vipTypeId)
				this.$api('addVIP', {
					vipTypeId
				}, res => {
					if(res.code == 200){
						uni.requestPayment({
							provider: 'wxpay', // 服务提提供商
							timeStamp: res.result.timeStamp, // 时间戳
							nonceStr: res.result.nonceStr, // 随机字符串
							package: res.result.packageValue,
							signType: res.result.signType, // 签名算法
							paySign: res.result.paySign, // 签名
							success: function(res) {
								console.log('支付成功', res);
								self.$refs.confirmationPopupUpload.open()
								// self.$refs.confirmationPopup.close()
							},
							fail: function(err) {
								console.log('支付失败', err);
								self.$refs.confirmationPopup.close()
								uni.showToast({
									icon: 'none',
									title: "支付失败"
								})
							}
						});
					}
				})
			},
			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: 26rpx;
				}
			}

			.act {
				border: 2rpx solid $uni-color;
				box-shadow: 0 0 10rpx 10rpx rgba($uni-color, 0.2);
			}
		}

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

			.privilege {
				font-size: 30rpx;
				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: 26rpx;

					}

					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>