jufubao-base 1.0.119-beta9 → 1.0.120

package/src/components/JfbBaseSaasLogin/JfbBaseSaasLogin.vue

@@ -1,724 +0,0 @@
-<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.error_callback_url = getContainerPropsValue(container, 'content.error_callback_url', {value: ""}).value;
-        this.phone_auth_callback_url = getContainerPropsValue(container, 'content.phone_auth_callback_url', {value: ""}).value;
-        this.phone_number_login_url = getContainerPropsValue(container, 'content.phone_number_login_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";
-        }
-      },
-      //快捷登录
-      doLoginAuth(){
-        console.log("快捷登录", this.quickLogin);
-        const { quickLogin } = this;
-        //登录平台name 聚福宝 钉钉 企业微信
-        if(quickLogin.login_platform_code === 'DD'){
-          this.p_loginDing();
-        }else if(quickLogin.login_platform_code === 'QW'){
-          this.p_loginWxEnter();
-        }
-      },
-      //企业微信登录
-      p_loginWxEnter(){
-        const { quickLogin } = this;
-        location.href = quickLogin.redirect_url;
-        // let params = this.getReqParams();
-        // params['code'] = "";  //企业微信code
-        // jfbRootExec("loginWxEnter", {
-        //   vm: this,
-        //   data: params
-        // }).then(res => {
-        //   location.href = res.redirect_url;
-        // })
-      },
-      //获取钉钉免登码
-      p_loginDing(){
-        const { quickLogin } = this;
-
-        dd.getAuthCode({
-          corpId: quickLogin.corp_id,
-          success: (res) => {
-            console.warn("钉钉授权成功");
-            console.warn(JSON.stringify(res));
-            const { code } = res;
-            jfbRootExec("loginDing", {
-              vm: this,
-              data: {
-                sub_company_id: this.sub_company_id,
-                code: code
-              }
-            }).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{
-                //passport登录
-                this.p_passportSaasLogin({access_code})
-              }
-            })
-          },
-          fail: () => {
-            console.error("钉钉授权失败")
-          },
-          complete: () => {
-            console.info("钉钉授权完成")
-          },
-        })
-      },
-      //账号登录
-      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({access_code}){
-        let redirect_url = this.handleRedirectUrl();
-        const { phone_number, password, verification_code } = this.accountForm;
-        jfbRootExec("passportSaasLogin", {
-          vm: this,
-          data: {
-            access_token: access_code,
-            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>