<template>
|
<view class="apply-vip" v-if="!loading">
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
<view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
|
<view class="tc head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
|
<view class="fb">{{titel}}</view>
|
</view>
|
<!-- #endif -->
|
<view class="banner d-c-c d-c" v-if="top_background!=''">
|
<image :src="top_background" mode="widthFix"></image>
|
</view>
|
<view class="banner-fill"></view>
|
<!--申请成功-->
|
<template v-if="apply_status == 'success'">
|
<view class="form-wrap p30 f30 tc">
|
<view class="pb30 d-c-c gray3 f40 fb">
|
申请已提交
|
</view>
|
<view class="pt20">
|
您的申请已提交，请耐心等待审核
|
</view>
|
<view class="pt30">
|
<button type="primary" class="btn-gcred" @click="gotoVip">返回VIP中心</button>
|
</view>
|
</view>
|
</template>
|
|
<!--申请表单-->
|
<template v-else>
|
<view class="form-wrap p30 f30">
|
<form @submit="formSubmit">
|
<view class="form-item border-b">
|
<view class="field-name">姓名</view>
|
<input name="real_name" class="flex-1 ml20" type="text" placeholder="请输入真实姓名" />
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">手机号</view>
|
<input name="mobile" class="flex-1 ml20" type="number" maxlength="11" placeholder="请输入手机号" />
|
</view>
|
<view class="form-item border-b">
|
<view class="field-name">推荐人</view>
|
<input name="referee_id" class="flex-1 ml20" type="number" placeholder="请输入推荐人ID（选填）" />
|
</view>
|
|
<view class="pt30">
|
<button class="btn-gcred" form-type="submit">提交申请</button>
|
</view>
|
</form>
|
</view>
|
</template>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
loading: true,
|
titel: '',
|
top_background: '',
|
apply_status: 'form' // form-表单, success-申请成功
|
};
|
},
|
onLoad() {
|
this.getPageData();
|
},
|
methods: {
|
// 获取页面数据
|
getPageData() {
|
let self = this;
|
uni.showLoading({ title: '加载中' });
|
|
self._get('plus.vip.apply/getAgreement', {}, function(res) {
|
self.titel = '申请成为VIP';
|
self.top_background = res.data.data.background?.cash_apply || '';
|
self.loading = false;
|
uni.hideLoading();
|
});
|
},
|
|
// 表单提交
|
formSubmit(e) {
|
let self = this;
|
let formData = e.detail.value;
|
|
// 数据验证
|
if (!formData.real_name) {
|
uni.showToast({ title: '请输入姓名', icon: 'none' });
|
return;
|
}
|
|
if (!/^1[3-9]\d{9}$/.test(formData.mobile)) {
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
return;
|
}
|
|
if (formData.referee_id && !/^\d+$/.test(formData.referee_id)) {
|
uni.showToast({ title: '推荐人ID格式不正确', icon: 'none' });
|
return;
|
}
|
|
// 提交申请
|
uni.showLoading({ title: '提交中' });
|
self._post('plus.vip.apply/submit', formData, function(res) {
|
uni.hideLoading();
|
if (res.code === 1) {
|
uni.showToast({ title: '申请提交成功' });
|
self.apply_status = 'success';
|
} else {
|
uni.showToast({ title: res.msg, icon: 'none' });
|
}
|
});
|
},
|
|
// 返回VIP中心
|
gotoVip() {
|
uni.redirectTo({
|
url: '/pages/plus/vip/index'
|
});
|
},
|
|
goback() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.apply-vip {
|
min-height: 100vh;
|
background: #fff;
|
}
|
|
.head_top {
|
position: absolute;
|
width: 100%;
|
padding-top: var(--status-bar-height);
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.banner-fill {
|
height: 200rpx;
|
}
|
|
.form-wrap {
|
.form-item {
|
display: flex;
|
align-items: center;
|
padding: 30rpx 0;
|
|
.field-name {
|
width: 150rpx;
|
color: #333;
|
}
|
|
input {
|
height: 50rpx;
|
line-height: 50rpx;
|
}
|
}
|
}
|
|
.btn-gcred {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
border-radius: 44rpx;
|
background: #FF5649;
|
border-color: #FF5649;
|
color: #fff;
|
font-size: 32rpx;
|
}
|
</style>
|
