97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<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>
|