Smart-Farm/uniapp/uni-app/mine/pages/fx-code.vue

<template>
	<view class="mine-pages-phone">
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" :color="`#000`" backgroundColor="#fff">
			<view class="flex-center" slot="left">
				<view @tap="toHome"
					:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]">
					<view class="iconfont icon-home"></view>
					<view class="back-user_text">回到首页</view>
				</view>
			</view>
		</uni-nav-bar>
		<view style="height:200rpx"></view>
		<view class="flex-center flex-column">
			<view class="title c-black">请输入邀请码</view>
			<view class="confirm-btn radius-16">
				<input @input="toGetFxInfo" v-model="subForm.fx_code" type="text"
					class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" placeholder-class="c-placeholder"
					:placeholder="rule[0].errorMsg" />
			</view>

			<view class="fx-user flex-center pd-md mt-md radius-16" :style="{border:`1rpx solid ${primaryColor}`}"
				v-if="fx_info.id">
				<image class="avatar md radius" :src="fx_info.avatarUrl"></image>
				<view class="flex-1 ml-md">
					<view class="f-title c-title max-476 ellipsis">{{fx_info.fx_name || fx_info.nickName}}</view>
					<view class="f-caption c-caption">邀请你加入</view>
				</view>
			</view>
			<view class="f-caption c-warning mt-md" v-if="isLoad && !fx_info.id">
				{{subForm.fx_code.length == 7 ? '邀请码无效' :'邀请码为7位数'}}
			</view>

			<view @tap="submit" class="confirm-btn flex-center f-sm-title text-bold c-base radius-16"
				:style="{background:subForm.fx_code.length > 0 ? primaryColor:'#CCE9DD'}">确定绑定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				fx_info: {},
				subForm: {
					fx_code: ''
				},
				rule: [{
					name: "fx_code",
					checkType: "isNotNull",
					errorMsg: "请输入邀请码",
					regText: "邀请码"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			loginPage: state => state.user.loginPage,
		}),
		async onLoad(options) {
			let {
				phone
			} = options
			this.subForm.phone = phone
			this.$util.setNavigationBarColor({
				color: '#000000',
				bg: '#ffffff'
			})
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateConfigItem']),
			async initIndex() {},
			async toGetFxInfo() {
				let {
					fx_code
				} = this.subForm
				if (fx_code.length == 7) {
					this.fx_info = await this.$api.user.fxcodeUser({
						fx_code
					})
				} else {
					this.fx_info = {}
				}
				this.isLoad = fx_code.length >= 7
			},
			toHome() {
				this.updateUserItem({
					key: 'isShowLogin',
					val: false
				})
				this.$util.goUrl({
					url: this.loginPage,
					openType: `switchTab`
				})
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (param.fx_code.length != 7) {
					this.$util.showToast({
						title: `邀请码为7位数`
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.user.bindReseller(param)
					this.$util.hideAll()
					this.$util.showToast({
						title: `绑定成功`
					})
					this.lockTap = false

					this.updateUserItem({
						key: 'isShowLogin',
						val: false
					})
					setTimeout(() => {
						this.$util.goUrl({
							url: this.loginPage,
							openType: `switchTab`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
			}
		}
	}
</script>


<style lang="scss">
	page {
		background: #fff;
	}

	.mine-pages-phone {
		.title {
			font-size: 54rpx;
			margin: 80rpx 0;
		}

		.confirm-btn {
			width: 630rpx;
			height: 110rpx;
			background: #F7F7F7;
			margin-top: 40rpx;

			.item-input {
				height: 110rpx;
			}
		}

		.fx-user {
			width: 630rpx;
		}
	}
</style>