forest-H5/pages/usercenter/bindphone/bindphone.vue

<template>
	<view class="pages">
		<view class="app_container">
			<form @submit="formSubmit" :model="form" ref="uForm" :rules="rules" @reset="formReset">
				<view class="login-list flex border-all">
					<view class="login-input">
						<view label="手机号" label-width="150" prop="telephone">
							<input v-model="form.telephone" placeholder="请输入手机号" />
						</view>
					</view>
				</view>
				<view class="login-list flex border-all">
					<view class="login-input">
						<view label="验证码" label-width="150" prop="pictureCode">
							<input v-model="form.pictureCode" placeholder="请输入验证码" />
						</view>
					</view>
					<view class="codeimg"><img :src="codeUrl" @click="getCode" /></view>
				</view>
				<view class="login-list-code flex border-all">
					<view class="login-input login-code">
						<view label="短信验证码" label-width="150" prop="SMSCode">
							<input class="uni-input" v-model="form.SMSCode" maxlength="10" placeholder="请输入短信验证码" />
						</view>
					</view>

					<view class="getCodeMsg" @click="getSMSCode" :disabled="countFlag">{{btnMsg == null ? countNum+'s重新发送':btnMsg}}</view>
				</view>
			</form>
			<view class="uni-padding-wrap uni-common-mt">
				<button type="primary" class="login-btn" @tap="submit">绑定</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				params:{
					token: '',
				},
				// 倒计时周期
				countNum: 60,
				// 用于倒计时标记，true-正在倒计时
				countFlag: false,
				// 定时器
				intervalBtn: {},
				//默认按钮的值
				btnMsg: "发送验证码",
				form: [],
				codeUrl: '',
				rules: {
					telephone: [{
							required: true,
							message: '请输入品牌名称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 140,
							message: '长度在 2 到 140 个字符',
							trigger: 'blur'
						}
					],
					pictureCode: [{
						required: true,
						message: '请输入品牌logo',
						trigger: 'blur'
					}],
					SMSCode: [{
						required: true,
						message: '请选择供应商',
						trigger: 'blur'
					}],
				},

			}
		},
		onShow() {
			let self = this;
			uni.getStorage({
				key:'token',
				success: function (res) {
					self.params.token = res.data;
				   // console.log(res.data);
				}
			});

		},
		onLoad() {
			this.getCode();

		},
		methods: {
			// 倒计时
			countDown() {
				// 设置btn倒计时时显示的信息
				this.btnMsg = null;
				// 更改btn状态
				this.countFlag = !this.countFlag;
				// 设置倒计时
				this.intervalBtn = setInterval(() => {
					if (this.countNum <= 0) {
						// 重置btn提示信息
						this.btnMsg = "发送验证码";
						// 清除定时器
						clearInterval(this.intervalBtn)
						// 更改btn状态
						this.countFlag = !this.countFlag;
						// 重置倒计时状态
						this.countNum = 60;
					};
					// 倒计时
					this.countNum--;
				}, 1000);
			},
			getCode() {
				this.$api.http.get(this.config.apiBaseurl + '/product/categorySearch').then(res => {
					if (res.data.code == 200) {
						this.codeUrl = 'http://placekitten.com/120/50'
					}
				})
			},
			getSMSCode() {
				if (this.form.pictureCode === null || this.form.pictureCode === '' || this.form.telephone === null || this.form.telephone ===
					'') {
					uni.showToast({
						title: '请填写完整',
						icon: 'none'
					});
				} else {
					this.$api.http.get(this.config.apiBaseurl + '/product/categorySearch').then(res => {
						if (res.data.code == 200) {
							this.codeUrl = 'http://placekitten.com/120/60';
							this.countDown();
						}
					})

				}
			},
			submit(){								
				this.$api.http.post(this.config.apiBaseurl+'/product/categorySearch',this.form,{
					header: {
						Accept:'application/json',
						Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
					}
				}).then(res=>{
					console.log('res',res)
				})
			}

		}
	}
</script>

<style scoped>
	@import url("./bindphone.css");
</style>