mall-laonong/pagesB/distributor/distributor.vue

<template>
	<view v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="经销商申请" :marginBottom="0" :backTag="backTag"></status-nav>
		<!-- 内容 -->
		<view class="distributor border-box" :style="{'min-height':disclaimersHeight}">
			<view class="tags font24" style="text-align: center;color: #ff0000;">请认真填写相关信息，此信息将用于分销提现使用！</view>
			<view class="distributor-list font30">
				<view class="distributor-item color-99 mar-s40">
					<view class="tips">我的邀请人</view>
					<input class="input" type="text" :value="invite_name" disabled="true">
				</view>
				<view class="distributor-item mar-s40">
					<view class="tips color-99">姓名</view>
					<input class="input" type="text" v-model="real_name" placeholder="请输入您的真实姓名" placeholder-style="color:#000000">
				</view>
				<view class="distributor-item mar-s40">
					<view class="tips color-99">电话</view>
					<input class="input" type="number" v-model="phone" placeholder="请输入您的手机号" placeholder-style="color:#000000">
				</view>
				<view class="distributor-item mar-s40">
					<view class="tips color-99">开户行</view>
					<input class="input" type="text" v-model="deposit_bank" placeholder="请填写开户行(如:中国银行)" placeholder-style="color:#000000">
				</view>
				<view class="distributor-item mar-s40">
					<view class="tips color-99">银行卡号</view>
					<input class="input" type="number" v-model="bank_account" placeholder="请填写银行卡号" placeholder-style="color:#000000">
				</view>
			</view>
		</view>
		<view class="distributor-btn background-white border-box" @tap="submitEv">
			<view class="btn font36 background-orange color-48 radius30 flex">立即提交</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'//引入mapState
	export default {
		data() {
			return {
				disclaimersHeight: `calc(100vh - ${uni.getSystemInfoSync().statusBarHeight + 50}px)`,
				disclaimers:'',
				invite_code:'',
				invite_name:'',
				real_name:'',
				phone:'',
				deposit_bank:'',
				bank_account:'',
				flag:true,
				backTag:'backindex',
				isLoading: false,
			}
		},
		onLoad(op) {
			if(op.invite_code){
				// 缓存invite_code
				uni.setStorageSync('inviteCode',op.invite_code);
				this.invite_code = op.invite_code;
			}
			if(op.invite_name){
				this.invite_name = decodeURIComponent(op.invite_name);
			}
			this.isLoading = true;
		},
		onShow() {
			this.$toolAll.tools.judgeAuth();
		},
		methods: {
			// 提交申请
			submitEv(){
				if(this.checkEmpty() && this.flag){
					let params = {
						invite_code:this.invite_code,
						invite_name:this.invite_name,
						real_name:this.real_name,
						phone:this.phone,
						deposit_bank:this.deposit_bank,
						bank_account:this.bank_account,
					}
					this.$requst.post('/api/user/distributor-apply',params).then(res=>{
						if(res.code==0){
							this.$toolAll.tools.showToast('恭喜您申请成功!');
							setTimeout(()=>{
								uni.reLaunch({
									url:`/pages/index/index`
								})
							},1500)
						} else {
							this.$toolAll.tools.showToast(res.msg);
						}
						setTimeout(()=>{
							this.flag = true;
						},2000)
					})
				}
			},
			// 验证表单
			checkEmpty(){
				let result = false;
				if(!this.real_name) {
					this.$toolAll.tools.showToast('请填写真实姓名');
				} else if(this.$toolAll.tools.isPhone(this.phone)) {
					this.$toolAll.tools.showToast('请正确填写手机号');
				}if(!this.deposit_bank) {
					this.$toolAll.tools.showToast('请填写开户行');
				}if(!this.bank_account) {
					this.$toolAll.tools.showToast('请填写卡号');
				} else {
					result = true;
				}
				return result;
			},
		}
	}
</script>

<style>

</style>