|
|
@@ -0,0 +1,161 @@
|
|
|
+<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>
|
