shuiguouser/pages/users/vip/index.vue

<template>
	<view class="content">
		<view class="top">
			
		</view>
		<view class="u-i">
			<view class="user">
				<image class="avatar" :src="userInfo.avatar" mode="" v-if="userInfo.avatar"
					@click="navTo('/pages/set/userinfo')"></image>
				<view class="info">
					<view class="user-name clamp2">{{ userInfo.nickname || '游客'}}</view>
					<view class="user-id" v-if="userInfo && userInfo.uid">
						UID: {{userInfo.uid}}
					</view>
				</view>
			</view>
		</view>
		<view class="bn1-wrap">
			<image src="/static/user/bn1.png" mode="" class="bn1"></image>
		</view>
		
		<view class="card-wrap flex">
			<view class="card" v-for="(item,index) in list" :class="{'action': checked.id == item.id}"
				@click="choose(item)">
				<view class="tit">
					{{item.name}}
				</view>
				<view class="price">{{(item.price*1).toFixed(0)}}</view>
				<view class="zs">
					赠送￥{{(item.gift_amount*1).toFixed(0)}}
				</view>
				<view class="zs" style="padding-top: 10rpx;">
					有效期：{{(item.valid_date*1).toFixed(0)}}天
				</view>
			</view>
		</view>
		<!-- <input type="text" v-model="authCode" placeholder="请输入吗" /> -->
		<view class="btn flex" @click="createLevel()">
			立即开通
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getLevelLists,
		createLevel,
		paylevel
	} from '@/api/user.js'
	export default {
		data() {
			return {
				list: [],
				checked: {},
				loading: false,
				authCode: ''
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			
			getLevelList() {
				getLevelLists().then(res => {
					this.list = res.data
					this.checked = res.data[0]
				}).catch(err => {
					console.log(err);
				})
			},
			choose(item) {
				this.checked = item
			},
			goPay(orderId, payType) {
				if (this.loading) return;
				this.loading = true
				paylevel({
					order_id: orderId,
					pay_type: 'HuifuCode',
					authCode: this.authCode
				}).then(res => {
					this.loading = false
				}).catch(err => {
					this.loading = false
				})
			},
			createLevel() {
				if (this.loading) return;
				this.loading = true
				createLevel({
					level: this.checked.id,
					pay_type: 'huifu'
				}).then(res => {
					this.loading = false
					this.goPay(res.data.order_id, 'huifu')
				}).catch(err => {
					this.loading = false
				})
			}
		},
		onLoad() {
			this.getLevelList()
		}
	}
</script>

<style lang="scss" scoped>
	.card-wrap {
		background-color: #fff;
		padding: 47rpx;
	}

	.card {
		width: 204rpx;
		height: 315rpx;
		padding-top: 47rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		text-align: center;
		color: #854E13;

		.tit {
			font-weight: 500;
			font-size: 33rpx;
			color: #644931;
		}

		.price {
			padding: 20rpx 0;
			font-weight: bold;
			font-size: 66rpx;

			&::before {
				content: '￥';
				font-size: 44rpx;
			}
		}

		.zs {
			font-size: 26rpx;
		}
	}

	.action {
		background: #FFF2DF;
		border: 1px solid #FF861B;

		.price {
			color: #FF502F;

		}
	}

	.btn {
		width: 647rpx;
		height: 94rpx;
		background: linear-gradient(-90deg, #FDC358 0%, #FADDA3 100%);
		border-radius: 47rpx;
		justify-content: center;
		margin: 54rpx auto;

		font-weight: 400;
		font-size: 38rpx;
		color: #773B00;
	}

	.u-i {
		width: 100%;
		height: 342rpx;
		padding: 52rpx 0;
		margin: -250rpx 0 0;
		// .bg {
		// 	width: 100%;
		// 	height: 100%;
		// }
		background-image: url('/static/user/hy-c.png');
		background-size: 100% 100%;
		// background-repeat: no-repeat;
		
		
	}
	.user {
		width: 100%;
		height: 120rpx;
		padding: 0 72rpx;
		display: flex;
		align-items: center;
	}
	
	.info {
		padding: 10rpx 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin-right: auto;
	}
	
	.user-name {
		font-weight: bold;
		font-size: 36rpx;
		color: #773B00;
		margin-bottom: auto;
	}
	
	.user-id {
		font-weight: 500;
		font-size: 24rpx;
		color: #773B00;
	
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.bn1-wrap {
		width: 100%;
		background-color: #fff;
		// padding: 20rpx auto;
	}
	.bn1 {
		display: block;
		width: 420rpx;
		height: 38rpx;
		margin: auto;
	}
	.top {
		width: 100%;
		height: 300rpx;
		background-color: #ff6602;
	}
</style>