11

pageMy/my/vip/bind.vue

@@ -0,0 +1,96 @@
+<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>