其它方式登陆功能抽离

pages/login/localPhoneLogin.vue

@@ -13,15 +13,7 @@
         <view class="other-phone sys-color-gray-6">其他手机号登录</view>
       </view>
       <view class="login-bottom">
-        <view class="other-login">
-          <view class="other-wire"></view>
-          <view class="other-text sys-color-gray-9">其他登录方式</view>
-          <view class="other-wire"></view>
-        </view>
-        <view class="login-icon">
-          <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
-          <image class="login-icon-img" src="/static/img/login/apple.png" mode="aspectFill"></image>
-        </view>
+        <other-login></other-login>
         <login-agreement :type="2"></login-agreement>
       </view>
 
@@ -33,9 +25,10 @@
 <script>
 import EnNav from "@/components/en-utils/en-nav/en-nav";
 import LoginAgreement from "@/pages/login/model/loginAgreement";
+import OtherLogin from "@/pages/login/model/otherLogin";
 export default {
   name:'localPhoneLogin',
-  components: {LoginAgreement, EnNav},
+  components: {OtherLogin, LoginAgreement, EnNav},
   data() {
     return {
       navHeight:40
@@ -93,33 +86,6 @@ export default {
     bottom: 0;
     left: 80rpx;
     width:calc(100vw - 160rpx);
-    .other-login{
-      width:calc(100vw - 160rpx);
-      display: flex;
-      justify-content: space-between;
-      .other-text{
-        font-size: 24rpx;
-        margin: 0 14rpx;
-        height: 45rpx;
-        line-height: 45rpx;
-      }
-      .other-wire{
-        margin-top: 22rpx;
-        width:calc((100vw - 348rpx) / 2);
-        height: 1rpx;
-        background-color: #E0E0E0;
-      }
-    }
-    .login-icon{
-      padding:40rpx 156rpx 80rpx 156rpx;
-      display: flex;
-      justify-content: space-between;
-      .login-icon-img{
-        width: 88rpx;
-        height: 88rpx;
-        border-radius: 50%;
-      }
-    }
   }
 
 

pages/login/model/otherLogin.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="other-box">
+    <view class="other-login">
+      <view class="other-wire"></view>
+      <view class="other-text sys-color-gray-9">其他登录方式</view>
+      <view class="other-wire"></view>
+    </view>
+    <view class="login-icon">
+      <image class="login-icon-img" src="/static/img/login/weixin.png" mode="aspectFill"></image>
+      <image class="login-icon-img" src="/static/img/login/apple.png" mode="aspectFill"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "otherLogin",
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.other-box{
+  .other-login{
+    width:calc(100vw - 160rpx);
+    display: flex;
+    justify-content: space-between;
+    .other-text{
+      font-size: 24rpx;
+      margin: 0 14rpx;
+      height: 45rpx;
+      line-height: 45rpx;
+    }
+    .other-wire{
+      margin-top: 22rpx;
+      width:calc((100vw - 348rpx) / 2);
+      height: 1rpx;
+      background-color: #E0E0E0;
+    }
+  }
+  .login-icon {
+    padding: 40rpx 156rpx 80rpx 156rpx;
+    display: flex;
+    justify-content: space-between;
+
+    .login-icon-img {
+      width: 88rpx;
+      height: 88rpx;
+      border-radius: 50%;
+    }
+  }
+}
+
+</style>