jufubao-base 1.0.119-beta2 → 1.0.119-beta3

package/src/components/JfbBaseSaasLogin/JfbBaseSaasLogin.vue

@@ -16,51 +16,110 @@
     <view class="jfb-base-saas-login__body" :style="{
       minHeight: layoutInfo.bodyMinHeightPx + 'px'
     }">
-      <view class="login_form_wrap">
-        <xd-form
-          label-width="130"
-          label-align="right"
-          content-align="left"
-          :border="true"
-          paddingBetween="40"
-        >
-          <xd-form-item class="form-item"
-            label="手机号"
-            content-align="left"
-          >
-            <xd-form-input
-              v-model="accountForm.phone_number"
-              placeholder="请输入11位手机号"
-            />
-          </xd-form-item>
-          <xd-form-item
-            label="验证码"
+      <view v-if="showStep === 1" class="panel-login-auth">
+        <view class="logo-wrap">
+          <image mode="aspectFit" :src="logo" />
+          <view :style="{ color: logoTextColor,  }" >{{ partnerName }}</view>
+        </view>
+        <view class="login_types">
+          <xd-button
+            v-if="hasAuthLogin"
+            :disabled="!panelIsChecked"
+            type="primary"
+            radius="20rpx"
+            @click="doLoginAuth"
+          >快捷登录</xd-button>
+          <view class="login-pub">
+            <xd-button
+              v-if="hasAccountLogin"
+              :disabled="!panelIsChecked"
+              type="primary"
+              radius="20rpx"
+              @click="doLoginAccount"
+            >账号登录</xd-button>
+          </view>
+
+          <view class="protocol">
+            <xd-form-checkbox
+              class="xd-form-checkbox"
+              v-model="panel_1_checked"
+              mode="default"
+              multiple
+              :localdata="[{ value: 1, text: '请阅读并同意《隐私政策》《用户服务协议》' },]"
+            >
+              <template slot="a1">
+                <view>
+                  <text>请阅读并同意</text>
+                  <text @click.stop="handlePrivacy('privacy_privacy')" :style="{color: mainColor}">《隐私政策》</text>
+                  <text @click.stop="handlePrivacy('privacy_service')" :style="{color: mainColor}">《用户服务协议》</text>
+                </view>
+              </template>
+            </xd-form-checkbox>
+          </view>
+        </view>
+      </view>
+      <view v-if="showStep === 2" class="panel-login-password">
+        <!-- <view class="phone-login-type">
+          <view
+            v-if="phoneLogin"
+            class="_item"
+            :class="{ active: accountLoginType === 'phone' }"
+            @click="setAccountLoginType('phone')"
+            >验证码登录<text :style="{ background: mainColor }"></text
+          ></view>
+          <view
+            v-if="pwdLogin"
+            class="_item"
+            :class="{ active: accountLoginType === 'pwd' }"
+            @click="setAccountLoginType('pwd')"
+            >密码登录<text :style="{ background: mainColor }"></text
+          ></view>
+        </view> -->
+        <view style="margin-top: 40rpx">
+          <xd-form
+            label-width="130"
+            label-align="right"
             content-align="left"
+            :border="true"
+            paddingBetween="40"
           >
-            <view class="flex align-center">
+            <xd-form-item class="form-item" label="手机号" content-align="left">
               <xd-form-input
-                v-model="accountForm.verification_code"
-                placeholder="请输入验证码"
+                v-model="accountForm.phone_number"
+                placeholder="请输入11位手机号"
               />
-              <view
-                class="get_code"
-                @click="reGetCode"
-                :style="{ color: mainColor }"
-                >{{ time ? time + "秒后获取" : "获取验证码" }}
+            </xd-form-item>
+            <xd-form-item
+              v-if="accountLoginType === 'phone'"
+              label="验证码"
+              content-align="left"
+            >
+              <view class="flex align-center">
+                <xd-form-input
+                  v-model="accountForm.verification_code"
+                  placeholder="请输入验证码"
+                />
+                <view
+                  class="get_code"
+                  @click="reGetCode"
+                  :style="{ color: mainColor }"
+                  >{{ time ? time + "秒后获取" : "获取验证码" }}
+                </view>
               </view>
-            </view>
-          </xd-form-item>
-          <!-- <xd-form-item
-            label="密码"
-            content-align="left"
-          >
-            <xd-form-input
-              type="password"
-              v-model="accountForm.password"
-              placeholder="请输入密码"
-            />
-          </xd-form-item> -->
-        </xd-form>
+            </xd-form-item>
+            <xd-form-item
+              v-if="accountLoginType === 'pwd'"
+              label="密码"
+              content-align="left"
+            >
+              <xd-form-input
+                type="password"
+                v-model="accountForm.password"
+                placeholder="请输入密码"
+              />
+            </xd-form-item>
+          </xd-form>
+        </view>
 
         <view class="form-group" style="padding-bottom:0">
           <xd-form-checkbox
@@ -88,22 +147,12 @@
             @click="doLoginForm"
           >登录</xd-button>
         </view>
-        <!-- <view
+        <view
+          v-if="accountLoginType === 'pwd'"
           class="forget_password"
           @click="toValidPhone"
-        >忘记密码</view> -->
+        >忘记密码</view>
       </view>
-      <view class="not_login">暂不登录，去逛逛</view>
-      <xd-dailog :show.sync="dialogShow" title="">
-        <view class="dia_title">您在多个企业任职<br/>请选择本次要访问的企业</view>
-        <view class="company_list">
-          <view class="company_item" v-for="(item, i) in companyList" :key="i" @click="toHome(item)">
-            <view class="_name">{{ item.company_name }}</view>
-            <xd-font-icon icon="iconxiangyou_xian" :size="30"></xd-font-icon>
-          </view>
-        </view>
-        <view slot="btn"></view>
-      </xd-dailog>
     </view>
   </view>
 </template>
@@ -118,9 +167,13 @@
   import XdDailog from "@/components/XdDailog/XdDailog"
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseSaasLoginMixin from "./JfbBaseSaasLoginMixin";
+  import { mapState } from "vuex"
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import { Base64 } from "js-base64";
+  import * as dd from "dingtalk-jsapi"
   export default {
     name: "JfbBaseSaasLogin",
     components: {
@@ -136,6 +189,10 @@
       componentsMixins, extsMixins, JfbBaseSaasLoginMixin
     ],
     computed: {
+      ...mapState(['jfbAuthorize']),
+      panelIsChecked() {
+        return this.panel_1_checked.includes(1);
+      },
       panelTwoIsChecked() {
         return this.panel_2_checked.includes(1);
       },
@@ -147,15 +204,33 @@
           password: "",
           verification_code: ""
         },
+        showStep: 1,
         time: 0,
+        panel_1_checked: "",
         panel_2_checked: "",
+        pwdLogin: null,
+        phoneLogin: null,
+        accountLoginType: "phone", //phone: 验证码登录   pwd: 密码登录
         redirect_url: "", //401回跳地址
+        hasAuthLogin: false, //是否有授权登录
+        hasAccountLogin: false, //是否有账号登录 包含 验证码、密码登录
+        quickLogin: null,
+        biz_name: "login",
+
         dialogShow: false,
         companyList: [],
+        logo: "",
+        partnerName: "",
+        logoTextColor: "",
+        base: "",
+        sub_company_id: "1",
 
         //面板
         callback_url: "", //面板配置登录完跳转地址
         forget_pwd_url: "", //忘记密码跳转地址
+        phone_number_login_url: "", //手机号登陆URL
+        phone_auth_callback_url: "",  //手机认证回调URL
+        error_callback_url: "",  //错误回调URL
       }
     },
     watch: {
@@ -165,19 +240,134 @@
     },
     created() {
       this.init(this.container);
+      this.base = this.jfbAuthorize.getBasePath(this);
+      this.site_logo = getServiceUrl(this.projectAttr["site_logo"]);
     },
     methods: {
       onJfbLoad(options) {
         this.redirect_url = options.redirect_url ? Base64.decode(options.redirect_url): '';
+        if(options.sub_company_id){
+          this.sub_company_id = options.sub_company_id;
+        }else if(options['x-common']){
+          let decodeParams = Base64.decode(options['x-common']);
+          if(decodeParams.sub_company_id){
+            this.sub_company_id = decodeParams.sub_company_id;
+          }
+        }
+        this.p_getPlatform();
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        let name, logo;
+        if (this.projectAttr["site_logo"])
+        logo = getServiceUrl(this.projectAttr["site_logo"], "size3");
         this.callback_url = getContainerPropsValue(container, "content.callback_url", {value: ''}).value;
         this.forget_pwd_url = getContainerPropsValue(container, "content.forget_pwd_url", {value: ''}).value;
+        this.logo = logo || "//dummyimage.com/100x100";
+        this.partnerName = name || "聚福宝福利";
+        this.logoTextColor = getContainerPropsValue(container, "content.logoTextColor", "#333");
+      },
+      handleRedirectUrl(){
+        let { redirect_url, callback_url } = this;
+
+        //不同项目直接域名替换
+        if (/^(@site_domain@).+$/.test(redirect_url)) {
+          redirect_url = redirect_url.replace(/@site_domain@/, location.origin)
+        }
+        try {
+          let redirectURL = new URL(redirect_url);
+          redirect_url = redirectURL.href;
+        } catch (e) {
+          redirect_url = location.origin + this.base + redirect_url;
+        }
+        return redirect_url;
+      },
+      getReqParams(){
+        let redirect_url = this.handleRedirectUrl();
+        let params = {
+          sub_company_id: this.sub_company_id,
+          callback_url: redirect_url,
+          phone_number_login_url: location.origin + this.base + this.phone_number_login_url,
+          phone_auth_callback_url: location.origin + this.base + this.phone_auth_callback_url,
+          error_callback_url: location.origin + this.base + this.error_callback_url,
+        };
+        return params;
       },
+      p_getPlatform(){
+        let params = this.getReqParams();
+
+        jfbRootExec("getPlatform", {
+          vm: this,
+          data: params
+        }).then(res => {
+          this.handleAuthResult(res);
+        })
+      },
+      /**
+       * @description 获取到登陆方式之后处理
+       */
+      handleAuthResult(res) {
+        if (res.quick_enabled) {
+          this.hasAuthLogin = true;
+          this.quickLogin = res.quick;
+        }
+        if (res.other.length > 0) {
+          this.hasAccountLogin = true;
+          res.other.forEach((item) => {
+            if (item.login_platform_code === "JFB") {
+              this.phoneLogin = item;
+            }
+            // else if (item.login_platform_code === "account") {
+            //   this.pwdLogin = item;
+            // }
+          });
+          // if (!this.phoneLogin) this.accountLoginType = "pwd";
+        }
+      },
+      //企业微信登录
+      p_loginWxEnter(){
+        let params = this.getReqParams();
+        params['code'] = "";  //企业微信code
+        jfbRootExec("loginWxEnter", {
+          vm: this,
+          data: params
+        }).then(res => {
+
+        })
+      },
+
+      //获取钉钉免登码
+      p_loginDing(){
+        dd.getAuthCode({
+          corpId: 'ding12345xxx',
+          success: (res) => {
+            const { authCode } = res;
+            jfbRootExec("loginDing", {
+              vm: this,
+              data: {
+                sub_company_id: this.sub_company_id,
+                code: authCode
+              }
+            }).then(res => {
+              const { access_code, phone_auth, phone_number } = res;
+              //手机号是否认证： Y已认证 N未认证
+              if(phone_auth === 'N'){
+                this.$xdUniHelper.redirectTo({
+                  url: `${phone_auth_callback_url}?access_code=${access_code}&phone_number=${phone_number}`
+                });
+              }else{
+                this.toHomeAfterLogin();
+              }
+            })
+          },
+          fail: () => {},
+          complete: () => {},
+        })
+      },
+      //账号登录
       doLoginForm() {
         const { phone_number, password, verification_code } = this.accountForm;
         let err_tip = "";
@@ -191,18 +381,16 @@
         }
 
         this.$xdShowLoading({})
-        jfbRootExec("sassLogin", {
+        jfbRootExec("sassPhoneLogin", {
           vm: this,
           data: {
-            biz_name: "login",
+            biz_name: this.biz_name,
             phone_number: phone_number,
             valid_code: verification_code,
           },
         })
           .then((res) => {
             this.$xdHideLoading()
-            // this.jfbAuthorize.setAllToken(res);
-            // this.toHomeAfterLogin();
             if(res.list.length === 0){
               uni.showToast({
                 title: '该用户没有所属企业',
@@ -213,7 +401,7 @@
               this.companyList = res.list;
               this.dialogShow = true;
             }else{
-              this.toHome(res.list[0])
+              this.p_passportSaasLogin(res.list[0])
             }
           })
           .catch(error => {
@@ -221,12 +409,25 @@
             this.$xdLog.catch(error)
           });
       },
-      toHome(item){
-        this.$xdUniHelper.redirectTo({
-          url: `/apply/main/saas/home?company_id=${item.company_id}`
-        });
-        // this.toHomeAfterLogin();
+      //选择企业后，需要passport登录
+      p_passportSaasLogin(item){
+        let redirect_url = this.handleRedirectUrl();
+        const { phone_number, password, verification_code } = this.accountForm;
+        jfbRootExec("passportSaasLogin", {
+          vm: this,
+          data: {
+            access_token: item.access_code,
+            redirect_url,
+            phone_number,
+            valid_code: verification_code,
+            biz_name: this.biz_name
+          }
+        }).then(res => {
+          this.jfbAuthorize.setAllToken(res);
+          this.toHomeAfterLogin();
+        })
       },
+
       toHomeAfterLogin() {
         let { redirect_url, callback_url } = this;
         if (redirect_url) redirect_url = redirect_url;
@@ -247,6 +448,20 @@
           url: `/pages/content/content?${params}`
         })
       },
+      doLoginAccount() {
+        console.log("doLoginAccount", this.panel_1_checked);
+        if (this.panel_1_checked.includes(1)) {
+          this.showStep = 2;
+        } else {
+          this.$xdConfirm({
+            content: "请阅读并勾选读用户协议与隐私协议",
+            cancel: false,
+            confirmText: "我知道了",
+            $vm: this,
+          });
+          return;
+        }
+      },
       reGetCode() {
         if (this.time > 0) return;
         const { phone_number } = this.accountForm;
@@ -262,7 +477,7 @@
           vm: this,
           data: {
             phone_number,
-            biz_name: "login",
+            biz_name: this.biz_name,
           },
         }).then((res) => {
           this.$xdHideLoading();
@@ -313,39 +528,6 @@
     border: 1px dashed rgba(0, 0, 0, 0);
     box-sizing: border-box;
     &__body{
-      position: relative;
-      .dia_title{
-        color: #333333;
-        font-size: 32rpx;
-        font-weight: 500;
-        margin: 60rpx 0;
-      }
-      .company_list{
-        .company_item{
-          display: flex;
-          justify-content: space-between;
-          background: #FE7A63;
-          border-radius: 60rpx;
-          padding: 20rpx 48rpx;
-          color: #FFFFFF;
-          margin: 20rpx 0;
-          ._name{
-            flex: 1;
-            width: 100rpx;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-      }
-      .not_login{
-        position: absolute;
-        bottom: 200rpx;
-        text-align: center;
-        width: 100%;
-        color: #FE7A63;
-        font-size: 24rpx;
-      }
       .xd-form-checkbox {
         /deep/ .checklist-content .checklist-text {
           font-size: 26rpx !important;
@@ -370,41 +552,149 @@
       .form-group {
         padding: 40rpx 70rpx;
       }
+      .form-item {
+        /deep/ .uni-forms-item {
+          padding-left: unit(30rpx) !important;
+        }
+      }
       .get_code {
         color: @xd-base-color;
         font-size: 24rpx;
         margin-right: unit(20,rpx);
       }
-      .form-item {
-        /deep/ .uni-forms-item {
-          padding-left: unit(30rpx) !important;
+      .panel-login-auth {
+        .logo-wrap {
+          text-align: center;
+          margin: unit(165,rpx) 0;
+          image {
+            width: 180rpx;
+            height: 180rpx;
+            margin-bottom: unit(12,rpx);
+          }
+          view {
+            font-size: unit(36,rpx);
+            font-weight: 600;
+          }
+        }
+        .login_types {
+          padding: 10rpx 50rpx;
+
+          .protocol {
+            font-size: 24rpx;
+            margin-top: 40rpx;
+          }
         }
       }
-      /deep/ .uni-forms-item__label {
-        .label-text {
+      .panel-login-password {
+        /deep/ .uni-forms-item__label {
+          .label-text {
+            font-size: 26rpx;
+            color: #a6a6a6;
+          }
+        }
+        /deep/ .uni-easyinput__placeholder-class {
           font-size: 26rpx;
+          color: #d4d4d4;
+        }
+        .phone-login-type {
+          display: flex;
+          color: #808080;
+          font-size: 32rpx;
+          padding: 40rpx 70rpx;
+          align-items: center;
+          ._item {
+            margin: 0 30rpx;
+            position: relative;
+            line-height: 2;
+            &:first-child {
+              margin-left: 0;
+            }
+
+            &.active {
+              color: #383838;
+              font-size: 36rpx;
+
+              text {
+                position: absolute;
+                height: 6rpx;
+                width: 90rpx;
+                border-radius: 6rpx;
+                left: 50%;
+                bottom: 0;
+                transform: translateX(-50%);
+              }
+            }
+          }
+        }
+        .forget_password {
+          font-size: 24rpx;
           color: #a6a6a6;
+          text-align: right;
+          margin: 20rpx 70rpx 0 0;
+        }
+
+        .not_login {
+          position: fixed;
+          width: 100%;
+          text-align: center;
+          bottom: 100rpx;
+          font-size: 24rpx;
+          color: #fe7a63;
         }
       }
-      /deep/ .uni-easyinput__placeholder-class {
-        font-size: 26rpx;
-        color: #d4d4d4;
+      .panel-forget-password {
+        /deep/ .uni-forms-item__label {
+          .label-text {
+            font-size: 26rpx;
+            color: #a6a6a6;
+          }
+        }
+        /deep/ .uni-easyinput__placeholder-class {
+          font-size: 26rpx;
+          color: #d4d4d4;
+        }
+        .forget_tip {
+          box-sizing: border-box;
+          width: 600rpx;
+          border-radius: 10rpx;
+          box-shadow: 0px 0px 20px 0px #00000019;
+          padding: 64rpx 46rpx;
+          margin: 200rpx auto;
+          text-align: center;
+          font-size: 32rpx;
+          .contact_phone {
+            color: @xd-base-color;
+            font-size: 56rpx;
+            margin: 20rpx 0 30rpx;
+          }
+        }
       }
-      .forget_password {
-        font-size: 24rpx;
-        color: #a6a6a6;
-        text-align: right;
-        margin: 20rpx 70rpx 0 0;
+      .panel-reset-password {
+        /deep/ .uni-forms-item__label {
+          width: 185rpx !important;
+          .label-text {
+            font-size: 26rpx;
+            color: #a6a6a6;
+          }
+        }
+        /deep/ .uni-easyinput__placeholder-class {
+          font-size: 26rpx;
+          color: #d4d4d4;
+        }
       }
     }
   }
-.flex {
-  display: flex;
-}
-.flex-sub {
-  flex: 1;
-}
-.align-center {
-  align-items: center;
-}
+  .flex {
+    display: flex;
+  }
+  .flex-sub {
+    flex: 1;
+  }
+  .align-center {
+    align-items: center;
+  }
+
+  .login-pub {
+    margin-top: unit(40, rpx);
+  }
 </style>