<template>
	<view class="vip">
		<view class="vip-title">
			输入邀请码
		</view>
		<view class="vip-tip">通过客服获取由字母数字组成不少于10位的编码</view>
		<jl-form>
			<jl-form-item>
				<jl-input v-model="code" placeholder="请输入" clearable></jl-input>
			</jl-form-item>
		</jl-form>
		<view class="vip-btn">
			<jl-button inline type="primary" :disabled="valid" :loading="loading" @click="confirm">申请绑定</jl-button>
		</view>
		<view class="vip-bottom">
			未实名认证用户，请先进行实名认证。未完成实名认证，申请VIP会员无法成功。
		</view>
	</view>
</template>

<script>
	import {
		bind
	} from "@/api/vip.js"
	import jlInput from "@/components/jl-input/main.vue"
	import {
		mapGetters
	} from "vuex"

	export default {
		components: {
			jlInput
		},
		data() {
			return {
				loading: false,
				code: ""
			}
		},
		methods: {
			confirm() {
				this.loading = true
				this.$store.dispatch("bindVipCode", this.code).then(() => {
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			}
		},
		computed: {
			...mapGetters(["authInfo"]),
			valid() {
				return this.code.length < 10
			}
		}
	}
</script>

<style>
	.vip {
		width: 80%;
		padding-top: 108rpx;
		margin: 0 auto;
	}

	.vip-title {
		font-size: 46rpx;
		color: #333333;
		letter-spacing: 0;
		line-height: 46rpx;
		margin-bottom: 30rpx;
	}

	.vip-tip {
		font-size: 28rpx;
		color: #999999;
		line-height: 28rpx;
		margin-bottom: 43rpx;
	}

	.vip-btn {
		padding-top: 50rpx;
	}

	.vip-btn-invit .jl-button {
		display: block;
	}

	.vip-bottom {
		padding-top: 41rpx;
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		line-height: 34rpx;
	}
</style>
