✨ feat(登录模块): API联调

hookehuyr
Commit 63d0fde7fb7907ea14e03fd3a2899f38b07e0f6c 63d0fde7 1 parent b2572fb8
Showing 2 changed files with 85 additions and 86 deletions
src/views/business/login.vue
src/views/business/me.vue
--- a/src/views/business/login.vue
View file @63d0fde
+++ b/src/views/business/login.vue
View file @63d0fde
@@ -15,33 +15,12 @@
     <van-config-provider :theme-vars="themeVars">
       <van-form ref="form" @submit="onSubmit">
         <van-cell-group inset style="border: 1px solid #EAEAEA;">
-          <van-field
+          <van-field v-if="use_widget" v-model="phone" name="phone" label="手机号" placeholder="手机号" readonly clickable
-            v-if="use_widget"
+            @touchstart.stop="showKeyboard" />
-            v-model="phone"
+          <van-field v-else v-model="phone" name="phone" label="手机号" placeholder="手机号"
-            name="phone"
+            :rules="[{ validator, message: '请输入正确手机号' }]" />
-            label="手机号"
+          <van-field v-model="code" center clearable name="code" label="短信验证码" placeholder="请输入短信验证码"
-            placeholder="手机号"
+            :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
-            readonly clickable
-            @touchstart.stop="showKeyboard"
-          />
-          <van-field
-            v-else
-            v-model="phone"
-            name="phone"
-            label="手机号"
-            placeholder="手机号"
-            :rules="[{ validator, message: '请输入正确手机号' }]"
-          />
-          <van-field
-            v-model="code"
-            center
-            clearable
-            name="code"
-            label="短信验证码"
-            placeholder="请输入短信验证码"
-            :formatter="formatter"
-            :rules="[{ required: true, message: '请填写验证码' }]"
-          >
             <template #button>
               <van-button @click="sendCode" size="small" type="primary" :disabled="disabled">
                 <span v-if="countDown === 60">发送验证码</span>
@@ -57,18 +36,12 @@
     </van-config-provider>
   </div>
-  <van-number-keyboard
+  <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="onBlur" />
-    v-model="phone"
-    :show="keyboard_show"
-    :maxlength="11"
-    @blur="onBlur"
-  />
 </template>
 <script setup>
 import { ref, onMounted } from 'vue';
 import { Toast } from 'vant'
-import qs from 'Qs'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios'
 import logo_image from '@images/zhengshu-banner@2x.png'
@@ -76,14 +49,14 @@ import { wxInfo } from '@/utils/tools';
 const $route = useRoute();
 const $router = useRouter();
-  // 判断是否显示控件
+// 判断是否显示控件
-  let use_widget = ref(true);
+let use_widget = ref(true);
-  /**
+/**
  * 手机号码校验
  * 函数返回 true 表示校验通过，false 表示不通过
  * @param {*} val 
  */
-  const validator = (val) => {
+const validator = (val) => {
   let flag = false;
   // 简单判断手机号位数
   if (/1\d{10}/.test(val) && phone.value.length === 11) {
@@ -94,8 +67,8 @@ const $router = useRouter();
     flag = false;
   }
   return flag
-  };
+};
-  onMounted(() => {
+onMounted(() => {
   /**
    * 判断微信环境看是否弹出控件框
    * 桌面微信直接输入
@@ -106,23 +79,23 @@ const $router = useRouter();
   } else {
     use_widget.value = false;
   }
-  })
+})
-  // 手机号输入控件控制
+// 手机号输入控件控制
-  const keyboard_show = ref(false);
+const keyboard_show = ref(false);
-  const showKeyboard = () => { // 弹出数字弹框
+const showKeyboard = () => { // 弹出数字弹框
   keyboard_show.value = true;
-  };
+};
-  const onBlur = () => { // 数字键盘失焦回调
+const onBlur = () => { // 数字键盘失焦回调
   keyboard_show.value = false;
   if (phone.value.length === 11) {
     disabled.value = false;
   }
-  };
+};
-  // 设置发送短信倒计时
+// 设置发送短信倒计时
-  const countDown = ref(60);
+const countDown = ref(60);
-  const countDownHandle = () => {
+const countDownHandle = () => {
   // 倒计时
   if (countDown.value === 0) {
     countDown.value = 60;
@@ -132,13 +105,13 @@ const $router = useRouter();
       countDownHandle()
     }, 1000)
   }
-  }
+}
-  const sendCode = () => { // 发送验证码
+const sendCode = () => { // 发送验证码
   if (countDown.value === 60) {
-      axios.post('/srv/?f=shzl_comment&a=bind_phone&t=get_code',
+    // TODO: 验证码接口
-      qs.stringify({
+    axios.post('/srv/?a=bind_phone&t=get_code', {
       phone: phone.value
-      }))
+    })
       .then(res => {
         if (res.data.code === 1) {
           Toast.success('发送成功');
@@ -155,33 +128,28 @@ const $router = useRouter();
         console.error(err);
       })
   }
-  };
+};
-  const phone = ref('');
+const phone = ref('');
-  const code = ref('');
+const code = ref('');
-  const disabled = ref(true);
+const disabled = ref(true);
-  // 过滤输入的数字 只能四位
+// 过滤输入的数字 只能四位
-  const formatter = (value) => value.substring(0, 4);
+const formatter = (value) => value.substring(0, 4);
-  /**
+/**
  * 用户登录
-   * 3个汪  15500000000  投稿人
-   * 点评人1  10000000001  点评人1职业
-   * 点评人2  10000000002  点评热2职业
-   * 点评人3  10000000003  点评人3职业
  * @param {*} values 
  */
-  const onSubmit = (values) => {
+const onSubmit = (values) => {
-    axios.post('/srv/?f=shzl_comment&a=bind_phone&t=bind',
+  axios.post('/srv/?a=b_login', {
-    qs.stringify({
     phone: values.phone,
-      code: values.code,
+    pin: values.code,
-    }))
+  })
     .then(res => {
       if (res.data.code === 1) {
         $router.push({
-          path: '/'
+          path: '/business/index'
         });
       } else {
         console.warn(res.data);
@@ -194,13 +162,13 @@ const $router = useRouter();
     .catch(err => {
       console.error(err);
     })
-  };
+};
-  const themeVars = {
+const themeVars = {
   buttonPrimaryBackground: '#F9D95C',
   buttonPrimaryBorderColor: '#F9D95C',
   buttonPrimaryColor: '#713610',
-  };
+};
 </script>
 <script>
@@ -208,16 +176,16 @@ import mixin from 'common/mixin';
 export default {
   mixins: [mixin.init],
-  data () {
+  data() {
     return {
     }
   },
-  mounted () {
+  mounted() {
   },
   methods: {
-    submit () {
+    submit() {
       let valid = this.$refs.form.validate();
       valid
         .then(() => {
@@ -236,23 +204,26 @@ export default {
 </script>
 <style lang="less" scoped>
-  body {
+body {
   --van-button-primary-background: white;
-  }
+}
-  .login-header {
+.login-header {
   margin-bottom: 1rem;
+
   .title {
     text-align: center;
     margin-top: 2vh;
+
     p {
       font-size: 2.5vh;
       margin: 1vh;
     }
   }
-  }
+}
+
+.login-section {
-  .login-section {
   // background-color: #FAFAFA;
   .btn {
     margin: 16px;
@@ -263,5 +234,5 @@ export default {
     padding: 1vh;
     border-radius: 5px;
   }
-  }
+}
 </style>
\ No newline at end of file
--- a/src/views/business/me.vue
View file @63d0fde
+++ b/src/views/business/me.vue
View file @63d0fde
@@ -14,6 +14,7 @@
       </van-row>
     </div>
   </template>
+  <div @click="exitLogin" class="exit-btn">退出登录</div>
   <shortcut-fixed type="B" :item="['home']"></shortcut-fixed>
 </template>
@@ -42,9 +43,26 @@ const itemList = [
   },
 ]
-  onMounted(() => {
+// 退出登录
-    
+const exitLogin = () => {
+  axios.post('/srv/?a=b_logout')
+  .then(res => {
+    if (res.data.code === 1) {
+      $router.replace({
+        path: '/business/login'
+      });
+    } else {
+      console.warn(res);
+      Toast({
+        icon: 'close',
+        message: res.data.msg
+      });
+    }
+  })
+  .catch(err => {
+    console.error(err); 
   })
+}
 </script>
 <script>
@@ -71,4 +89,14 @@ export default {
   padding: 1rem 0; 
   margin: 0 1rem;
 }
+
+.exit-btn {
+  position: absolute; 
+  bottom: 0;
+  width: calc(100% - 2rem);
+  padding: 1rem;
+  background-color: red;
+  text-align: center;
+  color: white;
+}
 </style>
\ No newline at end of file