jufubao-base 1.0.118 → 1.0.119-beta3

package/src/components/JfbBaseSaasLogin/JfbBaseSaasLogin.vue

@@ -0,0 +1,700 @@
+<template>
+  <view
+    class="jfb-base-saas-login"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-saas-login__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-saas-login__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-saas-login__body" :style="{
+      minHeight: layoutInfo.bodyMinHeightPx + 'px'
+    }">
+      <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"
+          >
+            <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
+              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>
+            </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
+            class="xd-form-checkbox"
+            v-model="panel_2_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 class="form-group">
+          <xd-button
+            style="flex: 1"
+            type="primary"
+            radius="10rpx"
+            :disabled="!panelTwoIsChecked"
+            @click="doLoginForm"
+          >登录</xd-button>
+        </view>
+        <view
+          v-if="accountLoginType === 'pwd'"
+          class="forget_password"
+          @click="toValidPhone"
+        >忘记密码</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
+  import XdFormInput from "@/components/XdFormInput/XdFormInput";
+  import XdForm from "@/components/XdForm/XdForm";
+  import XdFormItem from "@/components/XdFormItem/XdFormItem";
+  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: {
+      XdFontIcon,
+      XdButton,
+      XdFormCheckbox,
+      XdFormInput,
+      XdForm,
+      XdFormItem,
+      XdDailog
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseSaasLoginMixin
+    ],
+    computed: {
+      ...mapState(['jfbAuthorize']),
+      panelIsChecked() {
+        return this.panel_1_checked.includes(1);
+      },
+      panelTwoIsChecked() {
+        return this.panel_2_checked.includes(1);
+      },
+    },
+    data() {
+      return {
+        accountForm: {
+          phone_number: "",
+          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: {
+      container(value) {
+        this.init(value)
+      }
+    },
+    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 = "";
+        if (!phone_number) err_tip = "手机号不能为空";
+        else if (!verification_code) err_tip = "验证码不能为空";
+        if (err_tip) {
+          return uni.showToast({
+            title: err_tip,
+            icon: "none",
+          });
+        }
+
+        this.$xdShowLoading({})
+        jfbRootExec("sassPhoneLogin", {
+          vm: this,
+          data: {
+            biz_name: this.biz_name,
+            phone_number: phone_number,
+            valid_code: verification_code,
+          },
+        })
+          .then((res) => {
+            this.$xdHideLoading()
+            if(res.list.length === 0){
+              uni.showToast({
+                title: '该用户没有所属企业',
+                duration: 2000
+              });
+            }
+            else if(res.list.length > 1){
+              this.companyList = res.list;
+              this.dialogShow = true;
+            }else{
+              this.p_passportSaasLogin(res.list[0])
+            }
+          })
+          .catch(error => {
+            this.$xdHideLoading()
+            this.$xdLog.catch(error)
+          });
+      },
+      //选择企业后，需要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;
+        this.$xdUniHelper.redirectTo({
+          url: redirect_url || callback_url || this.settings.index,
+        });
+      },
+      //跳转忘记密码
+      toValidPhone() {
+        this.$xdUniHelper.navigateTo({
+          url: this.forget_pwd_url,
+        });
+      },
+      handlePrivacy(code){
+        let params = `page_id=${this.pageAttr["page_id"]}`;
+        params = `${params}&container_id=${this.containerId}${code}`;
+        this.$xdUniHelper.navigateTo({
+          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;
+        if (!/^1[3-9]\d{9}$/.test(phone_number)) {
+          uni.showToast({
+            title: "请填写正确的手机号",
+            icon: "none",
+          });
+          return false;
+        }
+        this.$xdShowLoading({});
+        jfbRootExec("sendMsg", {
+          vm: this,
+          data: {
+            phone_number,
+            biz_name: this.biz_name,
+          },
+        }).then((res) => {
+          this.$xdHideLoading();
+          this.time = 120;
+          this.interval = setInterval(() => {
+            this.time--;
+            if (this.time === 0) {
+              clearTimeout(this.interval);
+            }
+          }, 1000);
+        }).catch((error) => {
+          this.$xdHideLoading();
+          console.error(error);
+          this.$xdLog.catch(error)
+        });
+      },
+      onJfbScroll(options) {
+        
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+        this.$xdUniHelper.navigateBack();
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseSaasLoginLess.less";
+
+  .jfb-base-saas-login {
+    border: 1px dashed rgba(0, 0, 0, 0);
+    box-sizing: border-box;
+    &__body{
+      .xd-form-checkbox {
+        /deep/ .checklist-content .checklist-text {
+          font-size: 26rpx !important;
+        }
+      }
+      .xd-form-checkbox {
+        /deep/ .checklist-box {
+          margin: 0;
+        }
+      }
+      .xd-form-checkbox {
+        /deep/ .checklist-group {
+          justify-content: center;
+        }
+      }
+      .xd-form-checkbox {
+        /deep/ .checklist-text {
+          margin-left: unit(20,rpx) !important;
+        }
+      }
+
+      .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);
+      }
+      .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;
+          }
+        }
+      }
+      .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;
+        }
+      }
+      .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;
+          }
+        }
+      }
+      .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;
+  }
+
+  .login-pub {
+    margin-top: unit(40, rpx);
+  }
+</style>