✨ feat(登录页面): 样式业务逻辑新增

 <template>
-  <div class=""></div>
+  <van-image width="100%" height="100%" :src="logo_image" />
+  <div style="margin-bottom: 1rem;">
+    <van-row align="center">
+      <van-col span="8">
+      </van-col>
+      <van-col span="8" style="text-align: center; margin-top: 2vh;">
+        <p style="font-size: 2.5vh; margin: 1vh;">登&nbsp;录</p>
+      </van-col>
+      <van-col span="8">
+      </van-col>
+    </van-row>
+  </div>
+  <div class="login-section">
+    <van-config-provider :theme-vars="themeVars">
+      <van-form ref="form" @submit="onSubmit">
+        <van-cell-group inset style="border: 1px solid #EAEAEA;">
+          <van-field
+            v-if="use_widget"
+            v-model="phone"
+            name="phone"
+            label="手机号"
+            placeholder="手机号"
+            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>
+                <span v-else>{{ countDown }} 秒重新发送</span>
+              </van-button>
+            </template>
+          </van-field>
+        </van-cell-group>
+        <div class="btn" @click="submit">
+          登&nbsp;录
+        </div>
+      </van-form>
+    </van-config-provider>
+  </div>
+
+  <van-number-keyboard
+    v-model="phone"
+    :show="keyboard_show"
+    :maxlength="11"
+    @blur="onBlur"
+  />
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+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 $ from 'jquery'
-import { Toast } from 'vant';
+import axios from '@/utils/axios'
+import logo_image from '@images/zhengshu-banner@2x.png'
+import { wxInfo } from '@/utils/tools';
 const $route = useRoute();
 const $router = useRouter();
 
+  // 判断是否显示控件
+  let use_widget = ref(true);
+  /**
+   * 手机号码校验
+   * 函数返回 true 表示校验通过，false 表示不通过
+   * @param {*} val 
+   */
+  const validator = (val) => {
+    let flag = false;
+    // 简单判断手机号位数
+    if (/1\d{10}/.test(val) && phone.value.length === 11) {
+      disabled.value = false;
+      flag = true;
+    } else {
+      disabled.value = true;
+      flag = false;
+    }
+    return flag
+  };
   onMounted(() => {
-    
+    /**
+     * 判断微信环境看是否弹出控件框
+     * 桌面微信直接输入
+     * 其他环境弹出输入框
+     */
+    if (wxInfo().isiOS || wxInfo().isAndroid) {
+      use_widget.value = true;
+    } else {
+      use_widget.value = false;
+    }
   })
+
+  // 手机号输入控件控制
+  const keyboard_show = ref(false);
+  const showKeyboard = () => { // 弹出数字弹框
+    keyboard_show.value = true;
+  };
+  const onBlur = () => { // 数字键盘失焦回调
+    keyboard_show.value = false;
+    if (phone.value.length === 11) {
+      disabled.value = false;
+    }
+  };
+
+  // 设置发送短信倒计时
+  const countDown = ref(60);
+  const countDownHandle = () => {
+    // 倒计时
+    if (countDown.value === 0) {
+      countDown.value = 60;
+    } else {
+      countDown.value--;
+      setTimeout(() => {
+        countDownHandle()
+      }, 1000)
+    }
+  }
+  const sendCode = () => { // 发送验证码
+    if (countDown.value === 60) {
+      axios.post('/srv/?f=shzl_comment&a=bind_phone&t=get_code',
+      qs.stringify({
+        phone: phone.value
+      }))
+      .then(res => {
+        if (res.data.code === 1) {
+          Toast.success('发送成功');
+          countDownHandle()
+        } else {
+          console.warn(res.data);
+          Toast({
+            message: res.data.msg,
+            icon: 'close',
+          });
+        }
+      })
+      .catch(err => {
+        console.error(err); 
+      })
+    }
+  };
+
+  const phone = ref('');
+  const code = ref('');
+  const disabled = ref(true);
+  // 过滤输入的数字 只能四位
+  const formatter = (value) => value.substring(0, 4);
+
+  /**
+   * 用户登录
+   * 3个汪  15500000000  投稿人
+   * 点评人1  10000000001  点评人1职业
+   * 点评人2  10000000002  点评热2职业
+   * 点评人3  10000000003  点评人3职业
+   * @param {*} values 
+   */
+
+  const onSubmit = (values) => {
+    axios.post('/srv/?f=shzl_comment&a=bind_phone&t=bind',
+    qs.stringify({
+      phone: values.phone,
+      code: values.code,
+    }))
+    .then(res => {
+      if (res.data.code === 1) {
+        $router.push({
+          path: '/'
+        });
+      } else {
+        console.warn(res.data);
+        Toast({
+          message: res.data.msg,
+          icon: 'close',
+        });
+      }
+    })
+    .catch(err => {
+      console.error(err);
+    })
+  };
+
+  const themeVars = {
+    buttonPrimaryBackground: '#F9D95C',
+    buttonPrimaryBorderColor: '#F9D95C',
+    buttonPrimaryColor: '#713610',
+  };
 </script>
 
 <script>
@@ -27,14 +214,49 @@ export default {
     }
   },
   mounted () {
-
+    
   },
   methods: {
-
-  }
+    submit () {
+      let valid = this.$refs.form.validate();
+      valid
+      .then(() => {
+        this.$refs.form.submit();
+      })
+      .catch(error => {
+        console.error(error);
+        this.$toast({
+          message: '请检查后再次提交',
+          icon: 'cross',
+        });
+      })
+    }
+  },
 }
 </script>
 
 <style lang="less" scoped>
+  body {
+    --van-button-primary-background: white;
+  }
 
+  // .logo-section {
+  //   height: 22vh;
+  //   // padding: 2vh;
+  //   background-size: contain;
+  //   background-image: url('@images/zhengshu-banner@2x.png');
+  // }
+
+  .login-section {
+    // background-color: #FAFAFA;
+    .btn {
+      margin: 16px; 
+      background-color: #F9D95C; 
+      text-align: center; 
+      color: #713610; 
+      font-size: 2vh;
+      padding: 1vh;
+      border-radius: 5px;
+    }
+  }
 </style>
\ No newline at end of file