✨ feat:登录注册页面的优化

src/App.vue

@@ -20,7 +20,7 @@ export default {
 @import url('design/common.css');
 
 page {
-  background-color: #efefef;
+  background-color: #f5f5f5;
   color: $uni-text-color;
   font-size: $uni-font-size-base;
 }

src/components/empty/index.vue

@@ -21,7 +21,6 @@ export default {
 };
 </script>
 
-
 <style lang="scss" scoped>
 .empty {
   height: 100vh;
@@ -35,4 +34,5 @@ export default {
     height: 400rpx;
   }
 }
-</style>>
+</style>
+>

src/components/tabbar/index.vue

@@ -1,45 +1,33 @@
 <template>
   <view>
-    <u-tabbar
-      :value="currentTab"
-      activeColor="#2D73F0"
-      inactiveColor="#333"
-      :fixed="true"
-      :placeholder="true"
-      :safeAreaInsetBottom="true"
-      :border="true"
-      :mid-button="true"
-    >
-      <u-tabbar-item
-        v-for="item in clientList"
-        :key="item.name"
-        :text="item.text"
-        :name="item.name"
-        @click="handTab(item)"
-      >
-        <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
-        <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
-      </u-tabbar-item>
-    </u-tabbar>
-
-    <!-- <u-tabbar
-      :value="currentTab"
-      activeColor="#2D73F0"
-      inactiveColor="#333"
-      :border="true"
-      v-show="false"
-    >
-      <u-tabbar-item
-        v-for="item in merchantList"
-        :key="item.name"
-        :text="item.text"
-        :name="item.name"
-        @click="handTab(item)"
-      >
-        <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
-        <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
-      </u-tabbar-item>
-    </u-tabbar> -->
+    <view v-if="isShow">
+      <u-tabbar :value="currentTab" activeColor="#2D73F0" inactiveColor="#333" :border="true">
+        <u-tabbar-item
+          v-for="item in clientList"
+          :key="item.name"
+          :text="item.text"
+          :name="item.name"
+          @click="handTab(item)"
+        >
+          <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
+          <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
+        </u-tabbar-item>
+      </u-tabbar>
+    </view>
+    <view v-if="!isShow">
+      <u-tabbar :value="currentTab" activeColor="#2D73F0" inactiveColor="#333" :border="true">
+        <u-tabbar-item
+          v-for="item in merchantList"
+          :key="item.name"
+          :text="item.text"
+          :name="item.name"
+          @click="handTab(item)"
+        >
+          <image class="bar_img" slot="active-icon" :src="item.selectedIconPath" />
+          <image class="bar_img" slot="inactive-icon" :src="item.iconPath" />
+        </u-tabbar-item>
+      </u-tabbar>
+    </view>
   </view>
 </template>
 
@@ -56,6 +44,7 @@ export default {
 
   data() {
     return {
+      isShow: true,
       clientList: [
         {
           text: '首页',

src/components/tabbar/tabbar.js

@@ -1,75 +0,0 @@
-// TODO：待处理
-
-// const clientList = [
-//   {
-//     text: '首页',
-//     name: 'clientHome',
-//     pagePath: 'pages/client/tabBar/home/index',
-//     iconPath: '/static/images/home.png',
-//     selectedIconPath: '/static/images/home-select.png',
-//   },
-//   {
-//     text: '社区',
-//     name: 'clientCommunity',
-//     pagePath: 'pages/client/tabBar/community/index',
-//     iconPath: '/static/images/community.png',
-//     selectedIconPath: '/static/images/community-select.png',
-//   },
-//   {
-//     text: '消息',
-//     name: 'clientMessage',
-//     pagePath: 'pages/client/tabBar/message/index',
-//     iconPath: '/static/images/message.png',
-//     selectedIconPath: '/static/images/message-select.png',
-//   },
-//   {
-//     text: '我的',
-//     name: 'clientMine',
-//     pagePath: 'pages/client/tabBar/mine/index',
-//     iconPath: '/static/images/mine.png',
-//     selectedIconPath: '/static/images/mine-select.png',
-//   },
-// ];
-
-// const merchantList = [
-//   {
-//     text: '订单',
-//     name: 'merchantOrder',
-//     pagePath: 'pages/merchant/tabBar/order/index',
-//     iconPath: '/static/images/home.png',
-//     selectedIconPath: '/static/images/home-select.png',
-//   },
-//   {
-//     text: '消息',
-//     name: 'merchantMessage',
-//     pagePath: 'pages/merchant/tabBar/message/index',
-//     iconPath: '/static/images/community.png',
-//     selectedIconPath: '/static/images/community-select.png',
-//   },
-//   {
-//     text: '推广',
-//     name: 'merchantExtend',
-//     pagePath: 'pages/merchant/tabBar/extend/index',
-//     iconPath: '/static/images/community.png',
-//     selectedIconPath: '/static/images/community-select.png',
-//   },
-//   {
-//     text: '店铺',
-//     name: 'merchantStore',
-//     pagePath: 'pages/merchant/tabBar/store/index',
-//     iconPath: '/static/images/message.png',
-//     selectedIconPath: '/static/images/message-select.png',
-//   },
-//   {
-//     text: '我的',
-//     name: 'merchantMine',
-//     pagePath: 'pages/merchant/tabBar/mine/index',
-//     iconPath: '/static/images/mine.png',
-//     selectedIconPath: '/static/images/mine-select.png',
-//   },
-// ];
-
-// export default {
-//   clientList,
-//   merchantList,
-// };

src/pages/client/clientUser/cart/CartList.vue

@@ -1,35 +1,37 @@
 <template>
-  <view class="cart_list" v-for="item in 5">
-    <view class="chelvc-flex-item store">
-      <u-radio-group>
-        <u-radio>
-          顺风租车
-          <u-icon name="arrow-right" />
-        </u-radio>
-      </u-radio-group>
-      <view class="">领券</view>
-    </view>
-    <view class="cartList chelvc-flex">
-      <u-radio-group>
-        <u-radio>
-          <image src="@/static/logo.png" mode="scaleToFill" />
-        </u-radio>
-      </u-radio-group>
-      <view>
-        <view class="text-title">23款大众捷达VS5(越野)+市区免费+市区免车</view>
-        <view class="chelvc-flex-item">
-          <view class="chelvc-flex">
-            <view>
-              <text class="text-22">￥</text>
-              <text style="font-size: 30rpx; font-weight: 800">450</text>
-            </view>
-            <view class="price chelvc-flex-item">
-              <text>预计到手价</text>
-              <text class="text-22">￥</text>
-              <text style="font-size: 26rpx; font-weight: 800">196</text>
+  <view>
+    <view class="cart_list" v-for="item in 5">
+      <view class="chelvc-flex-item store">
+        <u-radio-group>
+          <u-radio>
+            顺风租车
+            <u-icon name="arrow-right" />
+          </u-radio>
+        </u-radio-group>
+        <view class="">领券</view>
+      </view>
+      <view class="cartList chelvc-flex">
+        <u-radio-group>
+          <u-radio>
+            <image src="@/static/logo.png" mode="scaleToFill" />
+          </u-radio>
+        </u-radio-group>
+        <view>
+          <view class="text-title">23款大众捷达VS5(越野)+市区免费+市区免车</view>
+          <view class="chelvc-flex-item">
+            <view class="chelvc-flex">
+              <view>
+                <text class="text-22">￥</text>
+                <text style="font-size: 30rpx; font-weight: 800">450</text>
+              </view>
+              <view class="price chelvc-flex-item">
+                <text>预计到手价</text>
+                <text class="text-22">￥</text>
+                <text style="font-size: 26rpx; font-weight: 800">196</text>
+              </view>
             </view>
+            <view class="addStyle">x 1</view>
           </view>
-          <view class="addStyle">x 1</view>
         </view>
       </view>
     </view>

src/pages/client/clientUser/serviceCenter.vue

@@ -94,6 +94,7 @@ export default {
 <style scoped lang="scss">
 .container {
   padding: 40rpx;
+  background-color: #fff;
   .title {
     font-size: 32rpx;
     font-weight: bold;

src/pages/client/tabBar/mine/TapList.vue

@@ -44,7 +44,7 @@ export default {
           id: '1',
           icon: 'setting-fill',
           title: '询价列表',
-          url: '/pages/client/clientPackage/inquiryList',
+          url: '/pages/client/clientUser/inquiryList',
         },
       ],
       isLinkList2: [
@@ -64,13 +64,13 @@ export default {
           id: '2',
           icon: 'setting-fill',
           title: '客服中心',
-          url: '/pages/client/clientPackage/inquiryList',
+          url: '/pages/client/clientUser/serviceCenter',
         },
         {
           id: '3',
           icon: 'setting-fill',
           title: '关于我们',
-          url: '/pages/client/clientPackage/mine/setting/aboutMine',
+          url: '/pages/client/clientUser/mine/setting/aboutMine',
         },
       ],
     };

src/pages/login/index.vue

@@ -1,18 +1,22 @@
 <template>
   <view class="container">
-    <!-- 头部logo -->
-    <view class="login-logo">
-      <image src="@/static/logo.png" mode="scaleToFill" />
-    </view>
+    <view class="t-b">{{ headline }}</view>
+    <view class="t-b2">欢迎使用车旅程，为你提供便捷服务</view>
 
     <!-- 中间登录注册按钮 -->
     <view class="login-btn-wrap">
-      <u-button shape="circle" type="primary" :loading="loading" @tap="login">
+      <u-button
+        shape="circle"
+        type="primary"
+        :loading="loading"
+        :customStyle="buttonStyleTop"
+        @tap="login"
+      >
         微信用户一键登录
       </u-button>
       <u-button
         shape="circle"
-        :customStyle="{ 'margin-top': '20rpx' }"
+        :customStyle="buttonStyleButton"
         @tap="$Router.push('/pages/login/phoneLogin')"
       >
         手机号登录/注册
@@ -26,10 +30,22 @@
         <u-checkbox shape="circle" name="1" />
       </u-checkbox-group>
       <view>我已阅读并同意</view>
-      <view @click="click('用户协议')">《用户协议》</view>
-      <view @click="click('隐私政策')">《隐私政策》</view>
+      <view @click="clickAgreement('用户协议')" class="agreement">《用户协议》</view>
+      <view @click="clickAgreement('隐私政策')" class="agreement">《隐私政策》</view>
     </view>
 
+    <!-- 第三方 -->
+    <view class="t-f"><text>————— 第三方账号登录 —————</text></view>
+    <view class="t-e cl">
+      <view class="t-g" @click="$Router.push('/pages/login/phoneLogin')">
+        <image src="@/static//icon/phone.png" />
+      </view>
+      <view class="t-g">
+        <image src="@/static//icon/qq.png" />
+      </view>
+    </view>
+
+    <!-- 用户协议 -->
     <userAgreement v-if="show" :title="title" :show="show" @handleConfirm="handleConfirm" />
   </view>
 </template>
@@ -45,17 +61,38 @@ export default {
     return {
       isUserAgreement: false,
       loading: false,
+      headline: '欢迎登录车旅程！',
       form: {
         client_id: 'chelvc_client',
         client_secret: 'qWBe6jD%GCuPPTkP',
         grant_type: 'wechat',
         token: '',
       },
-      checked: ['1'],
+      checked: [],
       title: '',
-      show: false, // 添加show数据属性，并初始化为false
+      show: false,
       showUserAgreementDialog: false,
       showPrivacyPolicyDialog: false,
+      buttonStyleTop: {
+        'font-size': '28rpx',
+        background: '#5677fc',
+        color: '#fff',
+        height: '90rpx',
+        'line-height': '90rpx',
+        'border-radius': '50rpx',
+        'box-shadow': '0 5px 7px 0 rgba(86, 119, 252, 0.2)',
+        marginTop: '30rpx',
+      },
+      buttonStyleButton: {
+        'font-size': '28rpx',
+        background: '#fff',
+        color: '#333',
+        height: '90rpx',
+        'line-height': '90rpx',
+        'border-radius': '50rpx',
+        'box-shadow': '0 5px 7px 0 rgba(235, 237, 245, 0.2)',
+        marginTop: '30rpx',
+      },
     };
   },
 
@@ -73,7 +110,7 @@ export default {
     },
 
     //点击用户协议
-    click(title) {
+    clickAgreement(title) {
       this.show = true; //打开弹框
       this.title = title; //赋值标题
     },
@@ -90,7 +127,7 @@ export default {
         return;
       }
       this.$Router.pushTab('/pages/client/tabBar/home/index');
-      // return;
+
       if (this.checked.length !== 0) {
         this.loading = true;
         this.form.token = await getWxLoginCode();
@@ -133,26 +170,26 @@ export default {
 
 <style scoped lang="scss">
 .container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.login-btn-wrap {
-  margin-top: 40rpx;
-  width: 80%;
-}
+  height: 100vh;
+  padding: 0 70rpx;
+  background-color: #f2f5f9;
+  .t-b {
+    text-align: left;
+    font-size: 46rpx;
+    color: #000;
+    padding: 150rpx 0 30rpx 0;
+    font-weight: bold;
+  }
+  .t-b2 {
+    text-align: left;
+    font-size: 32rpx;
+    color: #aaaaaa;
+    padding: 0rpx 0 80rpx 0;
+  }
 
-.login-logo {
-  width: 250rpx;
-  height: 250rpx;
-  background-color: pink;
-  margin-top: 100rpx;
-  margin-bottom: 100rpx;
-  image {
+  .login-btn-wrap {
+    margin-top: 50rpx;
     width: 100%;
-    height: 100%;
   }
 }
 
@@ -161,5 +198,37 @@ export default {
   justify-content: center;
   align-items: center;
   font-size: 27rpx;
+  margin-top: 20rpx;
+  .agreement {
+    color: #3c9cff;
+    cursor: pointer;
+  }
+}
+
+.t-f {
+  text-align: center;
+  margin: 200rpx 0 0 0;
+  color: #666;
+
+  text {
+    margin-left: 20rpx;
+    color: #aaaaaa;
+    font-size: 27rpx;
+  }
+}
+
+.t-e {
+  text-align: center;
+  width: 250rpx;
+  margin: 20rpx auto 0;
+  .t-g {
+    float: left;
+    width: 50%;
+  }
+
+  image {
+    width: 50rpx;
+    height: 50rpx;
+  }
 }
 </style>

src/pages/login/phoneLogin.scss

@@ -0,0 +1,138 @@
+.t-login {
+  height: 100vh;
+  margin: 0 auto;
+  font-size: 28rpx;
+  color: #000;
+  padding: 0 70rpx;
+  background-color: #f2f5f9;
+  .t-b {
+    text-align: left;
+    font-size: 46rpx;
+    color: #000;
+    padding: 150rpx 0 30rpx 0;
+    font-weight: bold;
+  }
+  .t-b2 {
+    text-align: left;
+    font-size: 32rpx;
+    color: #aaaaaa;
+    padding: 0rpx 0 120rpx 0;
+  }
+}
+
+.t-login button {
+  font-size: 28rpx;
+  background: #5677fc;
+  color: #fff;
+  height: 90rpx;
+  line-height: 90rpx;
+  border-radius: 50rpx;
+  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
+}
+
+.t-login input {
+  padding: 0 20rpx 0 120rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  margin-bottom: 50rpx;
+  background: #f8f7fc;
+  border: 1px solid #e9e9e9;
+  font-size: 28rpx;
+  border-radius: 50rpx;
+}
+
+.t-login .t-a {
+  position: relative;
+  image {
+    width: 40rpx;
+    height: 40rpx;
+    position: absolute;
+    left: 40rpx;
+    top: 28rpx;
+    margin-right: 20rpx;
+  }
+  .line {
+    width: 2rpx;
+    height: 40rpx;
+    background-color: #dedede;
+    position: absolute;
+    top: 28rpx;
+    left: 98rpx;
+  }
+}
+
+.t-login .t-c {
+  position: absolute;
+  right: 22rpx;
+  top: 22rpx;
+  height: 50rpx;
+  line-height: 50rpx;
+  z-index: 9999;
+  ::v-deep .u-button--info {
+    height: 100%;
+    width: 100%;
+    background: #5677fc;
+    color: #fff;
+    border: none;
+    border-radius: 50rpx;
+  }
+}
+
+.t-login .t-d {
+  text-align: center;
+  color: #999;
+  margin: 80rpx 0;
+}
+
+.t-login .t-e {
+  text-align: center;
+  width: 250rpx;
+  margin: 80rpx auto 0;
+  image {
+    width: 50rpx;
+    height: 50rpx;
+  }
+}
+
+.t-login .t-g {
+  float: left;
+  width: 50%;
+}
+
+.t-login .t-f {
+  text-align: center;
+  margin: 200rpx 0 0 0;
+  color: #666;
+  text {
+    margin-left: 20rpx;
+    color: #aaaaaa;
+    font-size: 27rpx;
+  }
+}
+
+.t-login .uni-input-placeholder {
+  color: #000;
+}
+
+.cl {
+  zoom: 1;
+  .cl:after {
+    clear: both;
+    display: block;
+    visibility: hidden;
+    height: 0;
+    content: '\20';
+  }
+}
+
+.agree {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 27rpx;
+  margin-top: 20rpx;
+  .agreement {
+    color: #3c9cff;
+    cursor: pointer;
+  }
+}

src/pages/login/phoneLogin.vue

@@ -1,211 +1,141 @@
 <template>
-  <view class="container">
-    <!-- 顶部logo -->
-    <div class="image">
-      <u-image src="@/static/logo.png"></u-image>
-    </div>
-
-    <!-- 中间登录注册 -->
-    <view class="login-form-wrap">
-      <u--form labelPosition="left" :model="loginForm" :rules="rules" ref="loginForm">
-        <u-form-item prop="mobile" borderBottom label="账号">
-          <u-input
-            v-model="loginForm.mobile"
-            maxlength="11"
-            border="none"
-            focus
-            placeholder="请输入账号/手机号"
-          >
-          </u-input>
-        </u-form-item>
-        <u-form-item prop="captcha" label="密码" borderBottom>
-          <u-input
-            v-model="loginForm.password"
-            maxlength="6"
-            border="none"
-            :type="type"
-            placeholder="请输入密码"
-          >
-            <template slot="suffix">
-              <u-icon v-if="type == 'password'" name="eye-off" @click="onClickPW('text')"></u-icon>
-              <u-icon v-else name="eye-fill" @click="onClickPW('password')"></u-icon>
-            </template>
-          </u-input>
-        </u-form-item>
-
-        <view style="display: flex; justify-content: space-between">
-          <view style="display: flex">
-            <u-checkbox-group>
-              <u-checkbox
-                @change="checkboxChange"
-                v-model="isChecked"
-                :checked="isChecked"
-                shape="circle"
-                size="mini"
-              ></u-checkbox>
-            </u-checkbox-group>
-            <view class="phone-question" @click="forgetPassword">记住密码</view>
-          </view>
-          <view class="phone-question" @click="forgetPassword">忘记密码？</view>
+  <view class="t-login">
+    <view class="t-b">{{ headline }}</view>
+    <view class="t-b2">欢迎使用车旅程，为你提供便捷服务</view>
+
+    <!-- 表单数据 -->
+    <form class="cl">
+      <view class="t-a">
+        <image src="https://zhoukaiwen.com/img/loginImg/sj.png" />
+        <view class="line" />
+        <input
+          type="number"
+          name="phone"
+          placeholder="请输入手机号"
+          maxlength="11"
+          v-model="phone"
+        />
+      </view>
+
+      <view class="t-a">
+        <image src="https://zhoukaiwen.com/img/loginImg/yz.png" />
+        <view class="line" />
+        <input type="number" name="code" maxlength="6" placeholder="请输入验证码" v-model="yzm" />
+        <view class="t-c">
+          <u-toast ref="uToast" />
+          <u-code
+            :seconds="seconds"
+            @end="end"
+            @start="start"
+            ref="uCode"
+            @change="codeChange"
+          ></u-code>
+          <u-button @tap="getCode">{{ tips }}</u-button>
         </view>
-        <u-form-item>
-          <u-button
-            type="primary"
-            :disabled="isDisabled"
-            :loading="loading"
-            shape="circle"
-            @click="login"
-            >登录</u-button
-          >
-        </u-form-item>
-        <u-form-item>
-          <u-button :loading="loading" shape="circle" @click="register">注册</u-button>
-        </u-form-item>
-      </u--form>
-      <br />
-    </view>
+      </view>
+      <button @tap="login">登 录</button>
+    </form>
 
-    <!-- 底部协议 -->
-    <view class="user-agreement">
-      <u-checkbox-group>
-        <u-checkbox
-          shape="circle"
-          @change="checkboxChange"
-          v-model="isChecked"
-          :checked="isChecked"
-        ></u-checkbox>
+    <view class="agree">
+      <u-checkbox-group v-model="checked">
+        <u-checkbox shape="circle" name="1" />
       </u-checkbox-group>
       <view>我已阅读并同意</view>
-      <view @click="click('用户协议')">《用户协议》</view>
-      <view @click="click('隐私政策')">《隐私政策》</view>
+      <view @click="clickAgreement('用户协议')" class="agreement">《用户协议》</view>
+      <view @click="clickAgreement('隐私政策')" class="agreement">《隐私政策》</view>
     </view>
 
-    <!-- 用户协议弹框 -->
+    <!-- 第三方 -->
+    <view class="t-f"><text>————— 第三方账号登录 —————</text></view>
+    <view class="t-e cl">
+      <view class="t-g" @click="$Router.push('/pages/login/index')">
+        <image src="@/static/icon/wx.png" />
+      </view>
+      <view class="t-g">
+        <image src="@/static/icon/qq.png" />
+      </view>
+    </view>
+
+    <!-- 用户协议 -->
     <userAgreement v-if="show" :title="title" :show="show" @handleConfirm="handleConfirm" />
   </view>
 </template>
 
 <script>
 import userAgreement from '@/components/userAgreement/userAgreement.vue';
-import { maintainSmsCaptcha } from '@/api/login';
 export default {
-  components: {
-    userAgreement,
-  },
+  components: { userAgreement },
   data() {
     return {
-      loginForm: {
-        client_id: 'chelvc_client',
-        client_secret: 'qWBe6jD%GCuPPTkP',
-        grant_type: 'sms',
-        token: '',
-        mobile: '', //手机号
-        password: '', //密码
-      },
-      rules: {
-        mobile: [
-          {
-            required: true,
-            trigger: ['change', 'blur'],
-            message: '请输入您的手机号',
-          },
-          {
-            validator: (rule, value, cb) => {
-              return uni.$u.test.mobile(value);
-            },
-            message: '手机号码格式不正确',
-            trigger: ['change', 'blur'],
-          },
-        ],
-      },
+      headline: '欢迎登录车旅程！',
+      phone: '', //手机号码
+      yzm: '', //验证码
+      checked: [],
       title: '',
-      type: 'password',
-      isChecked: true,
       show: false,
-      loading: false,
+      tips: '',
+      seconds: 10,
     };
   },
-
-  onReady() {
-    this.$refs.loginForm.setRules(this.rules);
-  },
-
-  computed: {
-    isDisabled() {
-      return !this.loginForm.mobile;
-    },
-  },
-
   methods: {
     //点击用户协议
-    click(title) {
+    clickAgreement(title) {
       this.show = true; //打开弹框
       this.title = title; //赋值标题
     },
 
-    //点击用户协议弹框内的确定
     handleConfirm() {
       this.show = false; //关闭弹框
     },
 
-    //点击登录
-    async login() {
-      if (!this.isChecked) {
-        this.show = true;
+    login() {
+      if (!this.phone) {
+        uni.showToast({ title: '请输入手机号', icon: 'none' });
+        return;
+      }
+      if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
+        uni.showToast({ title: '请输入正确手机号', icon: 'none' });
         return;
       }
-      const params = {
-        ...this.loginForm,
-      };
-      this.loading = true;
-      const res = await maintainSmsCaptcha(params).catch(err => err);
-      this.loading = false;
-      if (res.code == 200) {
-        this.$Router.pushTab('/pages/client/tabBar/home/index');
-        uni.$u.toast('登录成功');
+      if (!this.yzm) {
+        uni.showToast({ title: '请输入验证码', icon: 'none' });
+        return;
       }
+      //....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
+      uni.showToast({ title: '登录成功！', icon: 'none' });
     },
 
-    //点击注册
-    register() {
-      this.$Router.pushTab('/pages/login/register');
+    codeChange(text) {
+      this.tips = text;
     },
-
-    //点击密码后的icon
-    onClickPW(type) {
-      this.type = type; //切换icon 和密码显示与否
+    getCode() {
+      console.log(this.$refs.uCode);
+      if (this.$refs.uCode.canGetCode) {
+        // 模拟向后端请求验证码
+        uni.showLoading({
+          title: '正在获取验证码',
+        });
+        setTimeout(() => {
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          uni.$u.toast('验证码已发送');
+          // 通知验证码组件内部开始倒计时
+          this.$refs.uCode.start();
+        }, 2000);
+      } else {
+        uni.$u.toast('倒计时结束后再发送');
+      }
+    },
+    end() {
+      uni.$u.toast('倒计时结束');
+    },
+    start() {
+      uni.$u.toast('倒计时开始');
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-.container {
-  padding: 0 40rpx;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.image {
-  margin-top: 50rpx;
-}
-
-.login-form-wrap {
-  width: 90%;
-  margin-top: 50rpx;
-
-  .phone-question {
-    text-align: right;
-    font-size: 24rpx;
-    padding: 20rpx 0 20rpx 0;
-  }
-}
-.user-agreement {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 27rpx;
-}
+@import './phoneLogin.scss';
 </style>