jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseLogin/JfbBaseLogin.vue

@@ -1,672 +1,1412 @@
 <template>
   <view
     class="jfb-base-login"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-login__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-login__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-login__body">
-      <view v-if="showStep == 1" class="panel-login-auth">
-        <view class="logo-wrap">
-          <image
-            mode="aspectFit"
-            src="https://sandbox-jfb-public-images-common.oss-cn-qingdao.aliyuncs.com/uploads/20220824/3580302c0264f06ba7739f245339249b.png"
-          />
-        </view>
-        <view class="login_types">
-          <!--#ifdef MP-->
+    <view class="jfb-base-login__body" :style="{
+      '--agreement-align': agreementAlign
+    }">
+
+      <view v-if="showLogo === 'Y'" class="logo-wrap" :style="{
+        height: logoWrapHeight + 'rpx',
+      }">
+        <image :style="logoStyle" mode="heightFix" :src="logo" @click="openDebugger()" />
+        <view v-if="isShowSiteName === 'Y'" :style="{ color: logoTextColor,  }" >{{ partnerName }}</view>
+      </view>
+
+      <view v-if="showStep === 1" class="panel-login-auth">
+        <view class="login_types" :style="authBtnBoxStyle">
+          <!--#ifdef H5-->
           <xd-button
             v-if="hasAuthLogin"
+            :disabled="!panelIsChecked"
             type="primary"
-            radius="10rpx"
-            open-type="getUserInfo"
-            @getuserinfo="getuserinfo"
-          >快捷登录</xd-button>
+            :radius="btnRadius + 'rpx'"
+            @click="doLoginAuth"
+            >
+              <!-- 快捷登录 -->
+              <xd-font-icon v-if="authLoginBtnIcon"
+                style="display: inline-flex;margin-right: 12rpx;"
+                :icon="authLoginBtnIcon"
+              ></xd-font-icon>{{h5FastLoginName}}
+            </xd-button>
           <!-- #endif -->
+          <!--#ifdef MP-->
           <xd-button
-            v-if="hasAccountLogin"
-            style="margin-top: 40rpx"
+            v-if="hasAuthLogin"
             :disabled="!panelIsChecked"
             type="primary"
-            radius="10rpx"
-            @click="doLoginAccount"
-          >账号登录</xd-button>
-          <view class="protocol">
-            <xd-form-checkbox
-              class="xd-form-checkbox"
-              v-model="panel_1_checked"
-              mode="default"
-              multiple
-              :localdata="[{value: 1, text: '请阅读并同意《隐私政策》《用户服务协议》'}]"
-            ></xd-form-checkbox>
+            :radius="btnRadius + 'rpx'"
+            @click="doWxMpLogin"
+            >
+              <!-- 快捷登录 -->
+              <xd-font-icon v-if="authLoginBtnIcon"
+                style="display: inline-flex;margin-right: 12rpx;"
+                :icon="authLoginBtnIcon"
+              ></xd-font-icon>
+              {{ authLoginBtnText }}
+            </xd-button>
+          <!-- #endif -->
+          <view class="login-pub">
+            <xd-button
+              v-if="hasAccountLogin"
+              :disabled="!panelIsChecked"
+              type="primary"
+              :radius="btnRadius + 'rpx'"
+              @click="doLoginAccount"
+              >
+                <!-- 账号登录 -->
+                <xd-font-icon v-if="accountLoginBtnIcon"
+                  style="display: inline-flex;margin-right: 12rpx;"
+                  :icon="accountLoginBtnIcon"
+                ></xd-font-icon>
+                {{ accountLoginBtnText }}
+              </xd-button>
           </view>
         </view>
+        <view class="protocol" :style="authAgreementBoxStyle">
+          <xd-form-checkbox
+            class="xd-form-checkbox"
+            v-model="panel_1_checked"
+            mode="default"
+            multiple
+            :localdata="[{ value: 1, text: '请阅读并同意《隐私政策》《用户服务协议》' },]"
+          >
+            <template slot="a1">
+              <view class="text-content" :style="agreeFont">
+                <template v-for="item in agreementTextElement">
+                  <text v-if="item === 'privacy'"
+                    @click.stop="handlePrivacy('privacy_privacy')"
+                    :style="privacyFont">《隐私政策》</text>
+                  <text v-else-if="item === 'service'"
+                    @click.stop="handlePrivacy('privacy_service')"
+                    :style="privacyFont">《用户服务协议》</text>
+                  <text v-else>{{ item }}</text>
+                </template>
+              </view>
+            </template>
+          </xd-form-checkbox>
+        </view>
       </view>
-      <view
-        v-if="showStep == 2"
-        class="panel-login-password"
-      >
-        <view class="phone-login-type">
+      <view v-if="showStep === 2" class="panel-login-password">
+        <view class="phone-login-type" :style="accountLoginTypeBoxStyle">
           <view
             v-if="phoneLogin"
             class="_item"
-            :class="{active:accountLoginType=='phone'}"
+            :class="{ active: accountLoginType === 'phone' }"
             @click="setAccountLoginType('phone')"
-          >验证码登录<text :style="{background: mainColor}"></text></view>
+            >验证码登录<text :style="{ background: mainColor }"></text
+          ></view>
           <view
             v-if="pwdLogin"
             class="_item"
-            :class="{active:accountLoginType=='pwd'}"
+            :class="{ active: accountLoginType === 'pwd' }"
             @click="setAccountLoginType('pwd')"
-          >密码登录<text :style="{background: mainColor}"></text></view>
+            >密码登录<text :style="{ background: mainColor }"></text
+          ></view>
         </view>
-        
-        <xd-form label-width="128"
-          style="margin-top: 40rpx;"
-          label-align="right"
-          content-align="left"
-          :border="true"
-        >
-          <xd-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 :style="loginFormStyle">
+          <xd-form
+            :label-align="labelAlign"
+            :labelPosition="labelPosition"
+            :border="true"
+            :key="formRenderKey"
+            paddingBetween="0"
+            :style="{
+              '--form-border-color': formBorderColor,
+              '--form-border-width': formBorderWidth + 'px',
+              '--label-font-size': ($rpxNum * parseInt(labelFont.fontSize)) + 'px',
+              '--label-font-color': labelFont.color,
+              '--label-font-weight': labelFont.fontWeight,
+              '--content-font-size': ($rpxNum * parseInt(contentFont.fontSize)) + 'px',
+              '--content-font-color': contentFont.color,
+              '--content-font-weight': contentFont.fontWeight,
+              '--placeholder-font-size': ($rpxNum * parseInt(placeholderFont.fontSize)) + 'px',
+              '--placeholder-font-color': placeholderFont.color,
+              '--placeholder-font-weight': placeholderFont.fontWeight,
+            }"
           >
-            <view class="flex align-center">
+            <xd-form-item class="form-item"
+              :class="[inputStyle]"
+              label="手机号"
+              :leftIcon="phoneIcon"
+              :labelWidth="labelWidth"
+              content-align="left">
               <xd-form-input
-                v-model="accountForm.verification_code"
-                placeholder="请输入验证码"
+                v-model="accountForm.phone_number"
+                :placeholder="phonePlaceholder"
               />
-              <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-item>
+            <xd-form-item
+              v-if="accountLoginType === 'phone'"
+              class="form-item"
+              :class="[inputStyle]"
+              label="验证码"
+              :leftIcon="codeIcon"
+              :labelWidth="labelWidth"
+              content-align="left"
+            >
+              <view class="flex align-center">
+                <xd-form-input
+                  v-model="accountForm.verification_code"
+                  :placeholder="codePlaceholder"
+                />
+                <view
+                  class="get_code"
+                  @click="reGetCode"
+                  :style="getCodeStyle"
+                  >{{ time ? time + "秒后获取" : "获取验证码" }}
+                </view>
+              </view>
+            </xd-form-item>
+            <xd-form-item
+              v-if="accountLoginType === 'pwd'"
+              class="form-item password-form-item"
+              :class="[inputStyle]"
+              label="密码"
+              :leftIcon="passwordIcon"
+              :labelWidth="labelWidth"
+              content-align="left"
+            >
+              <xd-form-input
+                type="password"
+                v-model="accountForm.password"
+                placeholder="请输入密码"
+              />
+            </xd-form-item>
+          </xd-form>
+        </view>
+
+        <view class="form-group" :style="btnWrapStyle">
+          <xd-button
+            style="flex: 1"
+            type="primary"
+            :radius="btnRadius + 'rpx'"
+            :bg-color="btnColor"
+            :disabled="!panelTwoIsChecked"
+            @click="doLoginForm"
+            >
+              <xd-font-icon v-if="phoneLoginBtnIcon"
+                style="display: inline-flex;margin-right: 12rpx;"
+                :icon="phoneLoginBtnIcon"
+              ></xd-font-icon>
+              {{ phoneLoginBtnText }}
+            </xd-button
           >
-            <xd-form-input
-              type="password"
-              v-model="accountForm.password"
-              placeholder="请输入密码"
-            />
-          </xd-form-item>
-        </xd-form>
-        <view class="form-group">
+        </view>
+        <view class="form-group" :style="agreementBoxStyle">
           <xd-form-checkbox
             class="xd-form-checkbox"
-            v-model="panel_1_checked"
+            v-model="panel_2_checked"
             mode="default"
             multiple
-            :localdata="[{value: 1, text: '登录即同意《隐私政策》《用户服务协议》'}]"
-          ></xd-form-checkbox>
-        </view>
-        <view class="form-group">
-          <xd-button
-            style="flex: 1;"
-            type="primary"
-            radius="10rpx"
-            @click="doLoginForm"
-          >登录</xd-button>
+            :localdata="[{ value: 1, text: '登录即同意《隐私政策》《用户服务协议》' },]"
+          >
+            <template slot="a1">
+              <view class="text-content" :style="agreeFont">
+                <template v-for="item in agreementTextElement">
+                  <text v-if="item === 'privacy'"
+                    @click.stop="handlePrivacy('privacy_privacy')"
+                    :style="privacyFont">《隐私政策》</text>
+                  <text v-else-if="item === 'service'"
+                    @click.stop="handlePrivacy('privacy_service')"
+                    :style="privacyFont">《用户服务协议》</text>
+                  <text v-else>{{ item }}</text>
+                </template>
+              </view>
+            </template>
+          </xd-form-checkbox>
         </view>
         <view
-          v-if="accountLoginType=='pwd'"
+          v-if="accountLoginType === 'pwd'"
           class="forget_password"
           @click="toValidPhone"
         >忘记密码</view>
-        <view
-          class="not_login"
-          :style="{color: mainColor}"
-          @click="toNotLoginHome"
-        >暂不登录，去逛逛</view>
       </view>
-      <view
-        v-if="showStep == 3"
-        class="panel-forget-password"
-      >
-        <view class="form-group">
-          <view style="font-size: 36rpx;">请输入手机号</view>
-          <view style="font-size:26rpx;color: #A6A6A6;">为了您的账号安全，请先验证手机号</view>
-        </view>
-        <xd-form
-          label-width="120"
-          style="margin-top: 40rpx;"
-          label-align="right"
-          content-align="left"
-          :border="true"
-        >
-          <xd-form-item
-            label="手机号"
-            content-align="left"
-          >
-            <xd-form-input
-              v-model="resetForm.phone_number"
-              placeholder="请输入11位手机号"
-            />
-          </xd-form-item>
-          <xd-form-item
-            label="验证码"
-            content-align="left"
-          >
-            <view class="flex align-center">
-              <xd-form-input
-                v-model="resetForm.verification_code"
-                placeholder="请输入验证码"
-              />
-              <view
-                class="get_code"
-                @click="reGetCode"
-		style="{color:mainColor}"
-              >{{time ? time + '秒后获取':'获取验证码'}}</view>
-            </view>
-          </xd-form-item>
-        </xd-form>
-        <view class="form-group">
-          <xd-button
-            type="primary"
-            radius="10rpx"
-            @click="toResetPassword"
-          >确定</xd-button>
-        </view>
-        <view class="forget_tip">
-          <view>亲爱的用户，为了您的账户安全请联系管理员，或拨打客服热线</view>
-          <view class="contact_phone">400-800-9503</view>
-          <xd-button
-            type="primary"
-            style="width: 360rpx;"
-          >知道了</xd-button>
-        </view>
+      <view  class="bottom_btn" :style="prod_bottom" v-if="isPreview === 'Y' || isDebugPreview">
+        <view
+          @click="dialogPreview = true"
+          :style="{
+            color: mainColor,
+            border: `1px solid ${mainColor}`
+          }"
+        >进入体验 ></view>
       </view>
-      <view
-        v-if="showStep == 4"
-        class="panel-reset-password"
+      <xd-dailog
+        v-if="dialogPreview"
+        title="体验码"
+        :show.sync="dialogPreview"
+        :cancel="false"
+        confirm-text="进入体验模式"
+        @onBtn="handlePreview"
+        @close="previewAccout=''"
       >
-        <view class="form-group">
-          <view style="font-size: 36rpx;">手机号{{resetForm.phone_number}}</view>
-          <view style="font-size:26rpx;color: #A6A6A6;">请输入新密码并牢记</view>
+        <view class="preview-login">
+          <input v-model="previewAccout" type="text" class="preview-login-input" placeholder="请输入体验码">
         </view>
-        <xd-form
-          label-width="220rpx"
-          style="margin-top: 40rpx;"
-          label-align="right"
-          content-align="left"
-          :border="true"
-        >
-          <xd-form-item
-            label="输入新密码"
-            content-align="left"
-          >
-            <xd-form-input
-              v-model="resetForm.password"
-              type="password"
-              placeholder="请输入新密码"
-            />
-          </xd-form-item>
-          <xd-form-item
-            label="确认新密码"
-            content-align="left"
-          >
-            <view class="flex align-center">
-              <xd-form-input
-                v-model="resetForm.confirm_password"
-                type="password"
-                placeholder="请再次输入新密码"
-              />
-            </view>
-          </xd-form-item>
-        </xd-form>
-        <view class="form-group">
-          <xd-button
-            type="primary"
-            radius="10rpx"
-            @click="doResetPassword"
-          >确定</xd-button>
-        </view>
-      </view>
+      </xd-dailog>
     </view>
   </view>
 </template>
 
 
+
 <script>
-  // TODO: h5授权地址、小程序授权获取用户信息、手机号登录（验证码、密码）、发送验证码、验证手机号、重新设置密码
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseLoginMixin from "./JfbBaseLoginMixin";
-  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 {getContainerPropsValue} from "@/utils/xd.base";
-  export default {
-    name: "JfbBaseLogin",
-    components: {
-      XdFontIcon,
-      XdButton,
-      XdFormCheckbox,
-      XdFormInput,
-      XdForm,
-      XdFormItem
-    },
-    mixins: [
-      JfbBaseLoginMixin
-    ],
-    data() {
-      return {
-        showStep: 1,
-        panel_1_checked: "",
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseLoginMixin from "./JfbBaseLoginMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import openDebuggerMixins from "@/mixins/openDebuggerMixins";
+import extsMixins from "@/mixins/extsMixins";
+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.vue";
+import { Base64 } from "js-base64";
+import { mapState } from "vuex";
+import getServiceUrl from "@/common/getServiceUrl";
+import privacyMixins from './privacyMixins'
+import {
+  AttrToTargetValues,
+  getContainerPropsValue,
+  getAllPath,
+  getDomainAllPath,
+  getLocalJumpOutSiteCallbackUrl,
+  isThirdLogin
+} from "@/utils/xd.base";
+
+export default {
+  // #ifdef MP-WEIXIN
+  options: { styleIsolation: 'shared' },
+  // #endif
+
+  name: "JfbBaseLogin",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdFormCheckbox,
+    XdFormInput,
+    XdForm,
+    XdFormItem,
+    XdDailog
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseLoginMixin, privacyMixins,openDebuggerMixins],
+  data() {
+    return {
+      //体验模式
+      dialogPreview: false,
+      previewAccout: '',
+      h5FastLoginName:'快捷登录',
+
+      showStep: 1,
+      panel_1_checked: "",
+      panel_2_checked: "",
+      password: "",
+      accountLoginType: "phone", //phone: 验证码登录   pwd: 密码登录
+      accountForm: {
+        phone_number: "", //15801505541
+        verification_code: "",
+        password: "", //123456
+      },
+      resetForm: {
+        phone_number: "",
+        verification_code: "",
         password: "",
-        //todo
-        accountLoginType: 'phone',    //phone: 验证码登录   pwd: 密码登录
-        accountForm: {
-          phone_number: '',
-          verification_code: '',
-          password: ""
-        },
-        resetForm: {
-          phone_number: "",
-          verification_code: "",
-          password: "",
-          confirm_password: ""
-        },
-        time: 0,
-        interval: null,
-
-        hasAuthLogin: false, //是否有授权登录
-        hasAccountLogin: false, //是否有账号登录 包含 验证码、密码登录
-        phoneLogin: null,
-        pwdLogin: null,
-        loginPlatform: {
-          "wx_pub": "微信公众号授权登录",
-          "wx_miniprogram": "微信小程序授权登录",
-          "phone_number": "手机号登录",
-          "account": "用户登录",
-          "dingding": "钉钉登录"
-        },
-        quickLogin: null
+        confirm_password: "",
+      },
+      time: 0,
+      interval: null,
+
+      hasAuthLogin: false, //是否有授权登录
+      hasAccountLogin: false, //是否有账号登录 包含 验证码、密码登录
+      phoneLogin: null,
+      pwdLogin: null,
+      loginPlatform: {
+        wx_pub: "微信公众号授权登录",
+        wx_miniprogram: "微信小程序授权登录",
+        phone_number: "手机号登录",
+        account: "用户登录",
+        dingding: "钉钉登录",
+      },
+      quickLogin: null,
+      redirect_url: "", //401回跳地址
+      callback_url: "", //面板配置登录完跳转地址
+      phone_number_login_url: "", //授权登录后的手机登录地址
+      phone_number_collect_url: "", //授权登录后的手机号手机地址
+      forget_pwd_url: "", //忘记密码跳转地址
+      error_callback_url:'', //快速授权失败访问地址
+      base: "",
+
+      logo: "",
+      partnerName: "",
+      logoTextColor: "",
+      isPreview:'N', //是否启用体验码模式
+      isDebugPreview: false,
+
+      isFastLoginStatus: false,
+      mpAuthPhoneUrl: "",
+
+      previewCurrent: 'auth', //当前预览调试模块，auth:授权登录  account:账号登录
+
+      //logo样式设置
+      logoWrapHeight: 480,
+      logoHeight: 180,
+      logoRadius: 0,
+      isShowSiteName: "Y",
+
+      //协议
+      agreementText: "",
+
+      //按钮
+      authLoginBtnText: "快捷登录",  //授权登录按钮文案
+      authLoginBtnIcon: "", //授权登录按钮图标
+      accountLoginBtnText: "账号登录", //账号登录按钮文案
+      accountLoginBtnIcon: "", //账号登录按钮图标
+      phoneLoginBtnText: "登录", //手机号登录按钮文案
+      phoneLoginBtnIcon: "", //手机号登录按钮图标
+      btnColor: "", //按钮颜色
+      btnRadius: 20, //按钮圆角
+      btnMargin: {},
+
+      phonePlaceholder: "", //手机号登录输入框占位符
+      codePlaceholder: "", //验证码登录输入框占位符
+      getCodeShowType: "text", //获取验证码展示方式
+
+      //表单样式
+      formRenderKey: "formRenderKey",
+      formBgColor: "", //表单背景颜色
+      labelAlign: "left", //表单label对齐方式
+      labelWidth: 160, //表单label宽度
+      labelPosition: "left", //表单label位置
+      formPadding: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      phoneIcon: "", //手机号登录输入框图标
+      codeIcon: "", //验证码登录输入框图标
+      passwordIcon: "", //密码登录输入框图标
+      inputStyle: "linear", //输入框样式 linear:线性  face: 面性
+      formBorderColor: "#F9F9F9", //
+      formBorderWidth: 1, //表单边框宽度
+      labelFont: {  //表单label字体
+        color: "#333",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      contentFont: {  //表单内容字体
+        color: "#333",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      placeholderFont: {
+        color: "#d4d4d4",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      getCodeFont: {
+        color: "#ff5a39",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      agreeFont: {},  //条款字体
+      privacyFont: {}, //隐私字体
+      agreementAlign: "center", //条款对齐方式
+      agreePadding: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }, //条款内边距
+      authAgreePadding: {}, //授权登录条款内边距
+      authBtnPadding: {}, //授权登录按钮内边距
+      showLogo: "Y", //是否显示logo
+      customLogoUrl: {}, //自定义logo地址
+      loginMenuMargin: {},
+    };
+  },
+  computed: {
+    ...mapState(["jfbAuthorize","siteInfo",'loginParams']),
+    panelIsChecked() {
+      return this.panel_1_checked.includes(1);
+    },
+    panelTwoIsChecked() {
+      return this.panel_2_checked.includes(1);
+    },
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+    logoStyle(){
+      return this.styleObjectToString({
+        height: this.logoHeight + 'rpx',
+        borderRadius: this.logoRadius + 'rpx',
+      })
+    },
+    loginFormStyle(){
+      let padding = `${this.checkValue(this.formPadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.formPadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.formPadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.formPadding.left, 20)}rpx`;
+
+      return this.styleObjectToString({
+        background: this.formBgColor,
+        padding: padding,
+      })
+    },
+    agreementBoxStyle(){
+      let padding = `${this.checkValue(this.agreePadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.agreePadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.agreePadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.agreePadding.left, 20)}rpx`;
+      return this.styleObjectToString({
+        padding: padding,
+      })
+    },
+    authAgreementBoxStyle(){
+      let padding = `${this.checkValue(this.authAgreePadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authAgreePadding.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authAgreePadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authAgreePadding.left, 20)}rpx`;
+      return this.styleObjectToString({
+        padding: padding,
+      })
+    },
+    authBtnBoxStyle(){
+      let padding = `${this.checkValue(this.authBtnPadding.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authBtnPadding.right, 40)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authBtnPadding.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.authBtnPadding.left, 40)}rpx`;
+      return this.styleObjectToString({
+        padding: padding,
+      })
+    },
+    btnWrapStyle(){
+      let padding = `${this.checkValue(this.btnMargin.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.btnMargin.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.btnMargin.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.btnMargin.left, 20)}rpx`;
+      return this.styleObjectToString({
+        padding: padding,
+      })
+    },
+    accountLoginTypeBoxStyle(){
+      let padding = `${this.checkValue(this.loginMenuMargin.top, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.loginMenuMargin.right, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.loginMenuMargin.bottom, 20)}rpx`;
+      padding = `${padding} ${this.checkValue(this.loginMenuMargin.left, 20)}rpx`;
+      return this.styleObjectToString({
+        padding: padding,
+      })
+    },
+    getCodeStyle(){
+      return this.styleObjectToString({
+        color: this.getCodeFont.color,
+        borderColor: this.getCodeShowType === 'button' ? this.getCodeFont.color : 'transparent',
+        fontSize: this.getCodeFont.fontSize,
+        fontWeight: this.getCodeFont.fontWeight,
+      })
+    },
+    agreementTextElement(){
+      let agree = this.agreementText;
+      console.log(agree, 'agreementTextElement')
+      if(!agree) return [];
+      let matches = agree.match(/\{\{(\w+)\}\}/g) || [];
+      const keys = matches.map(match => match.slice(2, -2));
+      let eleArr2 = agree.split(/{{\w+}}/);
+      let ele = [];
+      for(let i = 0;i<eleArr2.length;i++){
+        ele.push(eleArr2[i])
+        if(keys[i]) ele.push(keys[i])
       }
+      return ele.filter(i => i);
+    }
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
     },
-    computed: {
-      panelIsChecked(){
-        return this.panel_1_checked.includes(1);
+    "accountForm.verification_code"(value){
+      if (value && value.length >= 8 && value.length % 2 === 0) {
+        let start = value.slice(0, value.length / 2);
+        let end = value.slice(value.length / 2);
+        if (start === end) {
+          this.accountForm.verification_code = start;
+        }
       }
+    }
+  },
+
+  created() {
+    this.init(this.container);
+    this.base = this.jfbAuthorize.getBasePath(this);
+    this.site_logo = getServiceUrl(this.projectAttr["site_logo"]);
+    this.$xdLog.setProject('JfbBaseLogin', 'JfbBaseLogin.create.done');
+  },
+
+  methods: {
+    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}`
+      })
+    },
+
+    loginPreview(experience_code){
+      return new Promise((resolve,reject)=>{
+        jfbRootExec("loginExperience", {
+          vm: this,
+          data: {experience_code},
+        }).then(res=>{
+          resolve(res)
+        }).catch(err=>{
+          reject(err)
+        })
+      })
     },
-    watch: {
-      container(value) {
-        this.init(value)
+
+    async handlePreview(){
+      if(!this.previewAccout) {
+        this.$xdAlert({
+          content: '请输入体验码',
+          type:'error'
+        });
+        return;
+      }
+      this.$xdShowLoading({});
+      try{
+        const res = await this.loginPreview(this.previewAccout);
+        if(res){
+          this.jfbAuthorize.setAllToken(res);
+          this.jfbAuthorize.setCardToken(res['login_card_result'])
+        }
+        this.toHomeAfterLogin();
+        this.$xdHideLoading();
+      }catch (e){
+        this.$xdHideLoading();
       }
     },
 
-    created() {
-      this.init(this.container);
-      //todo
-      // this.p_getListProviders();
+    onJfbLoad(options) {
+      this.$xdLog.setProject('JfbBaseLogin', 'JfbBaseLogin.onJfbLoad.start')
+      this.redirect_url = options.redirect_url ? Base64.decode(options.redirect_url): '';
+      this.isDebugPreview = options['x-test'] === 'jfb-tiyan';
+      // #ifdef MP-WEIXIN
+      this.authWxMpListProviders();
+      // #endif
+
+      // #ifdef H5
+      try{ this.authH5ListProviders();}
+      catch (error) {
+        this.$xdLog.setProject('JfbBaseLogin', 'JfbBaseLogin.onJfbLoad.error');
+        this.$xdLog.setARMSError(error);
+      }
+      //#endif
     },
-    
-    methods: {
-      init(value) {
-        console.log("init: ", value);
-        console.log("content", value.component.props.content);
-      },
-      p_getListProviders(){
-        let providers = this.projectAttr.login_providers || '62fde99f2583a19c58fd937b,62fde9432583a19c58fd937a';
-        jfbRootExec("listSiteProvider", {
-          vm: this,
-          data: {
-            providers: providers,
-            callback_url: 'http://sandbox-editx.jufubao.cn/editx',
-            phone_number_login_url: 'http://sandbox-editx.jufubao.cn/editx',
-            phone_number_collect_url: 'http://sandbox-editx.jufubao.cn/editx'
-          }
-        }).then(res => {
-          if(res.quick_enabled){
-            this.hasAuthLogin = true;
-            this.quickLogin = res.quick;
+
+    /**
+     * @description 设置页面属性
+     */
+    init(value) {
+      let name, logo;
+      if (this.projectAttr["site_name"]) name = this.projectAttr["site_name"];
+      if (
+        this["siteInfo"] &&
+        this["siteInfo"]["mapping"] &&
+        this["siteInfo"]["mapping"]["site_name"]
+      )
+        name = this["siteInfo"]["mapping"]["site_name"];
+      if (this.projectAttr["site_logo"])
+        logo = getServiceUrl(this.projectAttr["site_logo"], "size3");
+      
+      this.partnerName = name || "聚福宝福利";
+      this.logoTextColor = getContainerPropsValue(value, "content.logoTextColor", "#333");
+      this.callback_url = getContainerPropsValue(value, "content.callback_url", {value: ''}).value;
+      this.phone_number_login_url = getContainerPropsValue(value, "content.phone_number_login_url", {value: ''}).value;
+      this.phone_number_collect_url = getContainerPropsValue(value, "content.phone_number_collect_url", {value: ''}).value;
+      this.forget_pwd_url = getContainerPropsValue(value, "content.forget_pwd_url", {value: ''}).value;
+      this.error_callback_url = getContainerPropsValue(value, "content.error_url", {value: ''}).value;
+      this.mpAuthPhoneUrl = getContainerPropsValue(value, "content.mpAuthPhoneUrl", {value: '/system/login/wxauthorize'}).value;
+      this.isPreview = getContainerPropsValue(value, "content.isPreview", 'N');
+      this.logoHeight = getContainerPropsValue(value, "content.logoHeight", '180');
+      this.logoRadius = getContainerPropsValue(value, "content.logoRadius", '0');
+      this.logoWrapHeight = getContainerPropsValue(value, "content.logoWrapHeight", '480');
+      this.isShowSiteName = getContainerPropsValue(value, "content.isShowSiteName", 'Y');
+      this.agreementText = getContainerPropsValue(value, "content.agreementText", '请阅读并同意{{privacy}}{{service}}');
+      this.authLoginBtnText = getContainerPropsValue(value, "content.authLoginBtnText", '快捷登录');
+      this.h5FastLoginName = this.authLoginBtnText;
+      this.authLoginBtnIcon = getContainerPropsValue(value, "content.authLoginBtnIcon", '');
+      this.accountLoginBtnText = getContainerPropsValue(value, "content.accountLoginBtnText", '账号登录');
+      this.accountLoginBtnIcon = getContainerPropsValue(value, "content.accountLoginBtnIcon", '');
+      this.phoneLoginBtnText = getContainerPropsValue(value, "content.phoneLoginBtnText", '登录');
+      this.phoneLoginBtnIcon = getContainerPropsValue(value, "content.phoneLoginBtnIcon", '');
+      this.btnColor = getContainerPropsValue(value, "content.btnColor", '');
+      this.btnRadius = getContainerPropsValue(value, "content.btnRadius", '20');
+      this.btnMargin = getContainerPropsValue(value, "content.btnMargin", {});
+      this.previewCurrent = getContainerPropsValue(value, "content.previewCurrent", 'auth');
+      this.phonePlaceholder = getContainerPropsValue(value, "content.phonePlaceholder", '请输入手机号');
+      this.codePlaceholder = getContainerPropsValue(value, "content.codePlaceholder", '请输入验证码');
+      this.getCodeShowType = getContainerPropsValue(value, "content.getCodeShowType", 'text');
+      this.formBgColor = getContainerPropsValue(value, "content.formBgColor", '#FFFFFF');
+      this.labelAlign = getContainerPropsValue(value, "content.labelAlign", 'left');
+      this.labelWidth = getContainerPropsValue(value, "content.labelWidth", '180');
+      this.labelPosition = getContainerPropsValue(value, "content.labelPosition", 'left');
+      this.formPadding = getContainerPropsValue(value, "content.formPadding", {top: 20, left: 20, right: 20, bottom: 20});
+      this.agreePadding = getContainerPropsValue(value, "content.agreePadding", {});
+      this.authAgreePadding = getContainerPropsValue(value, "content.authAgreePadding", {top: 20, left: 20, right: 20, bottom: 20});
+      this.authBtnPadding = getContainerPropsValue(value, "content.authBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+      this.phoneIcon = getContainerPropsValue(value, "content.phoneIcon", '');
+      this.codeIcon = getContainerPropsValue(value, "content.codeIcon", '');
+      this.passwordIcon = getContainerPropsValue(value, "content.passwordIcon", '');
+      this.inputStyle = getContainerPropsValue(value, "content.inputStyle", 'linear');
+      this.formBorderColor = getContainerPropsValue(value, "content.formBorderColor", '#F9F9F9');
+      this.formBorderWidth = getContainerPropsValue(value, "content.formBorderWidth", '1');
+      this.labelFont = getContainerPropsValue(value, "content.labelFont", {});
+      this.contentFont = getContainerPropsValue(value, "content.contentFont", {});
+      this.placeholderFont = getContainerPropsValue(value, "content.placeholderFont", {});
+      this.getCodeFont = getContainerPropsValue(value, "content.getCodeFont", {});
+      this.showLogo = getContainerPropsValue(value, "content.showLogo", 'Y');
+      this.customLogoUrl = getContainerPropsValue(value, "content.customLogoUrl", {});
+      this.loginMenuMargin = getContainerPropsValue(value, "content.loginMenuMargin", {});
+
+      if(this.customLogoUrl && this.customLogoUrl.path){
+        logo = this.customLogoUrl.path;
+      }
+      this.logo = logo || "//dummyimage.com/100x100";
+
+      let agreeFont = getContainerPropsValue(value, "content.agreeFont", {});
+      if(!agreeFont.color) {
+        agreeFont.color = '#666'
+      }
+      this.agreeFont = agreeFont;
+      let privacyFont = getContainerPropsValue(value, "content.privacyFont", {});
+      if(!privacyFont.color) {
+        privacyFont.color = this.mainColor
+      }
+      this.privacyFont = privacyFont;
+
+      this.agreementAlign = getContainerPropsValue(value, "content.agreementAlign", 'center');
+      console.log(this.customLogoUrl, 'this.customLogoUrl');
+      if(this.inputStyle === 'face'){
+        this.labelPosition = 'top';
+        this.labelAlign = 'left';
+      }
+      if(this.$configProject.isPreview){
+        if(this.previewCurrent === 'account') this.showStep = 2;
+        else this.showStep = 1;
+        this.formRenderKey = Date.now();
+      }
+    },
+    /**
+     * @description 获取到登录方式之后处理
+     */
+    handleAuthResult(res) {
+      if (res.quick_enabled) {
+        this.hasAuthLogin = true;
+        this.quickLogin = res.quick;
+
+        //工行处理
+        if(this.quickLogin.login_platform_code === 'icbc') {
+          this.h5FastLoginName = '工银e生活登录'
+        }
+      }
+      if (res.others.length > 0) {
+        this.hasAccountLogin = true;
+        res.others.forEach((item) => {
+          if (item.login_platform_code === "phone_number") {
+            this.phoneLogin = item;
+          } else if (item.login_platform_code === "account") {
+            this.pwdLogin = item;
           }
-          if(res.others.length > 0){
-            this.hasAccountLogin = true;
-            res.others.forEach(item => {
-              if(item.login_platform_code=="phone_number"){
-                this.phoneLogin = item;
-              }else if(item.login_platform_code == "account"){
-                this.pwdLogin = item;
+        });
+        if (!this.phoneLogin) this.accountLoginType = "pwd";
+      }
+    },
+
+    /**
+     * @description 微信获取登录方式
+     */
+    authWxMpListProviders() {
+      let providers = this.projectAttr["login_providers"] || [
+        "62fde99f2583a19c58fd937b",
+        "62fde9432583a19c58fd937a",
+      ];
+      let { redirect_url, callback_url } = this;
+
+      jfbRootExec("listSiteProvider", {
+        vm: this,
+        data: {
+          providers: providers.join(","),
+          callback_url: redirect_url || this.$settings.index,
+          phone_number_login_url: this.phone_number_login_url,
+          phone_number_collect_url: this.phone_number_collect_url,
+          error_callback_url: this.error_callback_url,
+        },
+      })
+        .then((res) => {
+          this.handleAuthResult(res);
+        })
+        .catch((error) => {
+          console.log(error);
+          this.$xdLog.setARMSError(error)
+        });
+    },
+
+    doWxMpLogin() {
+      this.$xdShowLoading({});
+      uni.login({
+        provider: "weixin",
+        success: (loginRes) => {
+          console.log("doWxMpLogin", loginRes);
+          jfbRootExec("loginThirdLogin", {
+            vm: this,
+            data: {
+              third_auth_code: loginRes.code,
+              provider_id: this.quickLogin.provider_id,
+            },
+          })
+            .then((res) => {
+              let { redirect_url, callback_url } = this;
+              //if (redirect_url) redirect_url = redirect_url;
+              let url = Base64.encodeURI(redirect_url || callback_url || this.settings.index);
+              //需要授权操作
+              if (res.auth_code) {
+                this.$xdUniHelper.navigateTo({
+                  url: `${this.mpAuthPhoneUrl}?auth_code=${res.auth_code}&provider_id=${this.quickLogin.provider_id}&url=${url}`,
+                });
+              }
+              //无需授权直接进行登录
+              else {
+                if (this.jfbAuthorize !== null) {
+                  this.jfbAuthorize.setAllToken(res["login_info"], () => {
+                    //需要收集手机号码
+                    if(res['is_collect_phone_number'] === 'Y'){
+                      this.$xdUniHelper.navigateTo({
+                        url: `${this.mpAuthPhoneUrl}?provider_id=${this.quickLogin.provider_id}&url=${url}`,
+                      });
+                    }
+                    else{
+                      this.toHomeAfterLogin();
+                    }
+                  });
+                }
               }
+              this.$xdHideLoading();
             })
-            if(!this.phoneLogin) this.accountLoginType = "pwd";
-          }
+            .catch((error) => {
+              this.$xdHideLoading();
+              console.error(error);
+            });
+        },
+        fail: (error) => {
+          console.error(error);
+          this.$xdHideLoading();
+        },
+      });
+    },
+
+    /**
+     * @description h5获取登录方式
+     */
+    authH5ListProviders() {
+      this.$xdLog.setProject('JfbBaseLogin', 'JfbBaseLogin.onJfbLoad.loading.')
+      let providers = this.projectAttr["login_providers"] || [
+        "62fde99f2583a19c58fd937b",
+        "62fde9432583a19c58fd937a",
+      ];
+
+      let { redirect_url, callback_url } = this;
+
+      redirect_url = redirect_url || callback_url || this.$settings.index;
+
+      //不同项目直接域名替换
+      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;
+      }
+
+
+      let params = {
+        providers: providers.join(","),
+        callback_url: redirect_url,
+        phone_number_login_url: location.origin + this.base + this.phone_number_login_url,
+        phone_number_collect_url: location.origin + this.base + this.phone_number_collect_url,
+        error_callback_url: location.origin + this.base + this.error_callback_url,
+      };
+
+      this.$xdLog.setProject('JfbBaseLogin', 'JfbBaseLogin.onJfbLoad.loading..');
+      jfbRootExec("listSiteProvider", {
+        vm: this,
+        data: params,
+      })
+        .then((res) => {
+          console.log('listSiteProvider',res)
+          this.handleAuthResult(res);
         })
-      },
-      reGetCode(){
-        if(this.time > 0) return;
-        const { phone_number } = this.accountForm;
+        .catch((error) => {
+          if (this.$xdUniHelper.checkVarType(error) === 'object') {
+            this.$xdLog.setARMSCustomError('list_site_provider_error', {...params, fn:'listSiteProvider', error})
+          } else {
+            this.$xdLog.setARMSError(error)
+          }
+        });
+    },
 
-        console.log("jfbRootExec: sendMsg");
-        jfbRootExec('sendMsg', {
-          vm: this,
-          data: {
-            phone_number
+    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: "login",
+        },
+      }).then((res) => {
+        this.$xdHideLoading();
+        this.time = 120;
+        this.interval = setInterval(() => {
+          this.time--;
+          if (this.time === 0) {
+            clearTimeout(this.interval);
           }
-        }).then(res => {
-          this.time = 120;
-          this.interval = setInterval(() => {
-            this.time--;
-            if(this.time == 0){
-              clearTimeout(this.interval);
-            }
-          }, 1000)
+        }, 1000);
+      }).catch((error) => {
+        this.$xdHideLoading();
+        console.error(error);
+        this.$xdLog.catch(error)
+      });
+    },
+
+    setAccountLoginType(type) {
+      this.accountLoginType = type;
+    },
+
+    /**
+     * @description 工行e生活处理
+     */
+    icbcLogin(loginParams){
+
+      //无三方用户登录信息
+      if(!loginParams) {
+        this.status = false;
+        console.warn(`无三方用户登录信息`);
+        throw new Error('无三方用户登录信息');
+      }
+
+      console.warn(`LoginParams.use: ${loginParams}`)
+      this.$xdShowLoading({});
+      jfbRootExec("userBaseLoginIcb", {
+        vm: this,
+        data:{
+          encrypted_params: loginParams,
+          provider_id: this.quickLogin.provider_id
+        },
+      })
+        .then(res=>{
+          this.$xdHideLoading();
+          this.$xdUniHelper.redirectTo({
+            url:  this.redirect_url || this.$settings.index,
+          },false, true);
+        })
+        .catch(err=>{
+          this.$xdHideLoading();
+          console.error(err);
         })
+    },
 
-      },
-      setAccountLoginType(type){
-        this.accountLoginType = type;
-      },
-      //h5授权登录
-      doLoginAuth(){
-        const { provider_id, login_platform_code, is_redirect, redirect_url } = this.quickLogin;
-        //授权地址
+    //h5授权登录
+    doLoginAuth() {
+      if(this.isFastLoginStatus) return;
+      this.isFastLoginStatus = true;
+
+      //工行处理
+      if(this.quickLogin && this.quickLogin.login_platform_code === 'icbc'){
+        window['ICBC_SDK']['merLogin']((res)=>{
+          console.warn(`get.ICBC_SDK：${res}`);
+          this.icbcLogin(res)
+        })
+        return;
+      }
+
+      //跳转到第三方进行授权
+      if(this.quickLogin.is_redirect === 'Y') {
+        const { redirect_url } = this.quickLogin;
         location.href = redirect_url;
-      },
-      //小程序授权登录
-      getuserinfo(e){
-        //获取用户信息
-        let {iv, encryptedData} = e.detail;
-        let raw_data = JSON.stringify({iv, encryptedData});
-        const { provider_id, login_platform_code, is_redirect, redirect_url } = this.quickLogin;
-        jfbRootExec('phoneLogin', {
+      }
+
+    },
+
+    //小程序授权登录
+    getuserinfo(e) {
+      //获取用户信息
+      let { iv, encryptedData } = e.detail;
+      let raw_data = JSON.stringify({ iv, encryptedData });
+      const { provider_id, login_platform_code, is_redirect, redirect_url } = this.quickLogin;
+      jfbRootExec("phoneLogin", {
+        vm: this,
+        data: {
+          raw_data,
+          provider_id,
+        },
+      })
+        .then(() => {
+          location.href = redirect_url;
+        })
+        .catch();
+      //首页地址
+      //确认授权登录信息 => 跳转回调地址 cbUrl
+    },
+
+    //账号登录 -> 跳转第二步
+    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: "我知道了",
+          styles: this.styles,
+        });
+        return;
+      }
+    },
+
+    //手机、验证码 | 密码登录  user form
+    doLoginForm() {
+      const { accountLoginType } = this;
+      const { phone_number, verification_code, password } = this.accountForm;
+      let err_tip = "";
+      if (!phone_number) err_tip = "手机号不能为空";
+      else if (accountLoginType === "phone" && !verification_code)
+        err_tip = "验证码不能为空";
+      else if (accountLoginType === "pwd" && !password)
+        err_tip = "密码不能为空";
+      if (err_tip) {
+        return uni.showToast({
+          title: err_tip,
+          icon: "none",
+        });
+      }
+
+      if (accountLoginType === "phone") {
+        //表单接口登录
+        this.$xdShowLoading({})
+        jfbRootExec("phoneLogin", {
           vm: this,
           data: {
-            raw_data,
-            provider_id
-          }
-        }).then(()=>{
-          location.href = redirect_url
-        }).catch()
-        //首页地址
-        //确认授权登录信息 => 跳转回调地址 cbUrl
-      },
-      //账号登录 -> 跳转第二步
-      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: '我知道了'
-          });
-          return;
-        }
-      },
-      //手机、验证码 | 密码登录  user form
-      doLoginForm(){
-        const { accountLoginType } = this;
-        const { phone_number, verification_code, password } = this.accountForm;
-        if(accountLoginType == "phone"){
-          //表单接口登录
-          jfbRootExec('phoneLogin', {
-            vm: this,
-            data: {
-              provider_id: this.phoneLogin.provider_id,
-              phone_number,
-              verification_code
-            },
-          }).then(res => {
-            // location.href = this.phoneLogin.redirect_url;
+            provider_id: this.phoneLogin.provider_id,
+            phone_number,
+            verification_code,
+          },
+        })
+          .then((res) => {
+            this.$xdHideLoading()
+            this.jfbAuthorize.setAllToken(res);
             this.toHomeAfterLogin();
           })
-        }else if(accountLoginType == "pwd"){
-          jfbRootExec("accountLogin", {
-            vm: this,
-            data: {
-              provider_id: this.pwdLogin.provider_id,
-              account_name: phone_number,
-              password: password
-            }
-          }).then(res => {
-            // location.href = this.pwdLogin.redirect_url;
+          .catch(error=>{
+            this.$xdHideLoading()
+            this.$xdLog.catch(error)
+          });
+      }
+      else if (accountLoginType === "pwd") {
+        this.$xdShowLoading({})
+        jfbRootExec("accountLogin", {
+          vm: this,
+          data: {
+            provider_id: this.pwdLogin.provider_id,
+            account_name: phone_number,
+            password: password,
+          },
+        })
+          .then((res) => {
+            this.$xdHideLoading()
+            this.jfbAuthorize.setAllToken(res);
             this.toHomeAfterLogin();
           })
-        }
+          .catch(error => {
+            this.$xdHideLoading()
+            this.$xdLog.catch(error)
+          });
+      }
+    },
 
-      },
-      toHomeAfterLogin(){
-        let {redirect_url} = this.$route.query;
-        if(redirect_url) redirect_url = decodeURIComponent(redirect_url);
-        redirect_url = redirect_url || this.settings.index;
-        this.$xdUniHelper.redirectTo({
-          url: redirect_url
-        })
-      },
-      
-      //暂不登录， 去逛逛
-      toNotLoginHome(){
-        //location.href = not_login_home_url;
-      },
-      //验证手机号通过 -> 去重新设置密码
-      toResetPassword(){
-        this.showStep = 4;
-        // const {verification_code, phone_number} = this.resetForm;
-        // jfbRootExec('verifyPhoneCode', {
-        //   vm: this,
-        //   data: {
-        //     verification_code,
-        //     phone_number
-        //   }
-        // }).then(res => {
-        //   this.showStep = 4;
-        // })
+    toHomeAfterLogin() {
+      let { redirect_url, callback_url } = this;
+      this.$xdUniHelper.redirectTo({
+        url: redirect_url || callback_url || this.settings.index,
+      });
+    },
 
-      },
-      //接口重设密码
-      doResetPassword(){
-        jfbRootExec("forgetPwd", {
-          vm: this,
-          data: this.resetForm
-        }).then(res => {
-          //重新设置成功
-        })
+    //暂不登录， 去逛逛
+    toNotLoginHome() {
+      //location.href = not_login_home_url;
+    },
 
-      },
-      //跳转验证手机号页面
-      toValidPhone(){
-        this.showStep = 3;
-      },
-      onJfbLoad(options) {
-        console.log('event.onJfbLoad');
-        this.p_getListProviders();
-      },
-      onJfbScroll(options) {
-        console.log('event.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);
-        if(this.showStep > 1) this.showStep--;
-      },
-    }
-  }
+    //跳转验证手机号页面
+    toValidPhone() {
+      this.$xdUniHelper.navigateTo({
+        url: this.forget_pwd_url,
+      });
+    },
 
+    onJfbBack(options) {
+      console.log("event.onJfbBack", options);
+      if (this.showStep > 1) this.showStep--;
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">
-   @import "./JfbBaseLoginLess.less";
+@import "./JfbBaseLoginLess.less";
 
-  .jfb-base-login {
-    border: 1px dashed rgba(0,0,0,0);
-    box-sizing: border-box;
+.jfb-base-login {
+  box-sizing: border-box;
 
+  &__body {
+    padding-bottom: 160rpx;
+    .xd-form-checkbox {
+      ::v-deep .checklist-content .checklist-text {
+        font-size: 26rpx !important;
+      }
+    }
+    .xd-form-checkbox {
+      ::v-deep .checklist-box {
+        margin: 0;
+        align-items: var(--agreement-align);
+      }
+    }
+    .xd-form-checkbox {
+      ::v-deep .checklist-group {
+        justify-content: center;
+      }
+    }
+    .xd-form-checkbox {
+      ::v-deep .checklist-text {
+        margin-left: unit(20,rpx) !important;
+      }
+    }
 
-    &__body{
-      .xd-form-checkbox{
-        /deep/ .checklist-content .checklist-text{
-          font-size: 26rpx !important;
+    .form-group {
+      padding: 40rpx 70rpx;
+    }
+    // #ifdef H5
+    .form-item {
+      ::v-deep &.uni-forms-item {
+        // padding-left: unit(30,rpx) !important;
+        .uni-input-input{
+          font-size: var(--content-font-size);
+          color: var(--content-font-color);
+          font-weight: var(--content-font-weight);
+        }
+        .label-text {
+          font-size: var(--label-font-size);
+          color: var(--label-font-color);
+          font-weight: var(--label-font-weight);
+        }
+        .uni-easyinput__placeholder-class{
+          font-size: var(--placeholder-font-size);
+          color: var(--placeholder-font-color);
+          font-weight: var(--placeholder-font-weight);
         }
       }
-      .form-group{
-        padding: 20rpx 70rpx;
-      }
-      .get_code{
-        color: @xd-base-color;
-        font-size: 24rpx;
+      &.linear{
+        ::v-deep &.uni-forms-item--border{
+          border-color: var(--form-border-color) !important;
+          border-width: var(--form-border-width) !important;
+        }
       }
-      .panel-login-auth{
-        .logo-wrap{
-          text-align: center;
-          image{
-            width: 240rpx;
-          }
+      &.face{
+        ::v-deep .uni-forms-item__content{
+          background: #F7F7F7;
+          border-radius: 16rpx;
+        }
+        ::v-deep &.uni-forms-item--border{
+          border: none;
         }
-        .login_types{
-          padding: 10rpx 50rpx;
 
-          .protocol{
-            font-size: 24rpx;
-            margin-top: 20rpx;
-          }
+      }
+    }
+    // #endif
+
+    // #ifdef MP
+    ::v-deep .uni-forms-item {
+      // padding-left: 30rpx !important;
+      .uni-input-input{
+        font-size: var(--content-font-size);
+        color: var(--content-font-color);
+        font-weight: var(--content-font-weight);
+      }
+      .label-text {
+        font-size: var(--label-font-size);
+        color: var(--label-font-color);
+        font-weight: var(--label-font-weight);
+      }
+      .uni-easyinput__placeholder-class{
+        font-size: var(--placeholder-font-size);
+        color: var(--placeholder-font-color);
+        font-weight: var(--placeholder-font-weight);
+      }
+    }
+    .linear{
+      ::v-deep .uni-forms-item--border{
+        border-top: none !important;
+        border-bottom: var(--form-border-width) solid var(--form-border-color) !important;
+      }
+    }
+    .face{
+      ::v-deep .uni-forms-item__content{
+        background: #F7F7F7;
+        border-radius: 16rpx;
+      }
+      ::v-deep .uni-forms-item--border{
+        border: none;
+      }
+    }
+    // #endif
+
+    .get_code {
+      color: @xd-base-color;
+      font-size: 24rpx;
+      margin-right: unit(20,rpx);
+      padding: 10rpx 24rpx;
+      border: 1px solid @xd-base-color;
+      border-radius: 40rpx;
+      white-space: nowrap;
+    }
+    .logo-wrap {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      image {
+        width: 180rpx;
+        height: 180rpx;
+      }
+      & > view {
+        font-size: unit(36,rpx);
+        font-weight: 600;
+        margin-top: 12rpx;
+      }
+    }
+    .panel-login-auth {
+      ::v-deep .uni-forms-item__label {
+        .label-text {
+          font-size: 26rpx;
+          color: #a6a6a6;
         }
-        
       }
-      .panel-login-password{
+      
+      .login_types {
+        padding: 10rpx 50rpx;
 
-        /deep/ .uni-forms-item__label{
-          .label-text{
-            font-size: 26rpx;
-            color: #A6A6A6;
-          }
+        .protocol {
+          font-size: 24rpx;
+          margin-top: 40rpx;
         }
-        /deep/ .uni-easyinput__placeholder-class{
+      }
+    }
+    .panel-login-password {
+      ::v-deep .uni-forms-item__label {
+        .label-text {
           font-size: 26rpx;
-          color: #D4D4D4;
+          color: #a6a6a6;
         }
-        .phone-login-type{
-          display: flex;
-          color: #808080;
-          font-size: 32rpx;
-          padding: 20rpx 70rpx;
-          align-items: center;
-          ._item{
-            margin: 0 30rpx;
-            position: relative;
-            line-height: 2;
-            &:first-child{
-              margin-left: 0;
-            }
+      }
+      ::v-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%);
-              }
+          &.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;
-          
-        }
+      }
+      .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;
-        }
+      .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{
+    }
+    .panel-forget-password {
+      ::v-deep .uni-forms-item__label {
+        .label-text {
           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;
-          }
+          color: #a6a6a6;
         }
       }
-      .panel-reset-password{
-        /deep/ .uni-forms-item__label{
-          width: 185rpx !important;
-          .label-text{
-            font-size: 26rpx;
-            color: #A6A6A6;
-            
-          }
+      ::v-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;
         }
-        /deep/ .uni-easyinput__placeholder-class{
+      }
+    }
+    .panel-reset-password {
+      ::v-deep .uni-forms-item__label {
+        width: 185rpx !important;
+        .label-text {
           font-size: 26rpx;
-          color: #D4D4D4;
+          color: #a6a6a6;
         }
       }
+      ::v-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;
+.login-pub {
+  margin-top: unit(40, rpx);
+}
+.bottom_btn {
+  position: fixed;
+  width: 100%;
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: unit(100, rpx);
+  background: #ffffff;
+
+  & > view {
+    height: unit(44, rpx);
+    line-height: unit(44, rpx);
+    width: unit(150, rpx);
+    text-align: center;
+    cursor: pointer;
+    font-size: unit(24, rpx);
+    border-radius: unit(12, rpx);
   }
-  .flex-sub{
-    flex: 1;
+}
+
+.preview-login {
+  padding: unit(40, rpx) 0;
+
+  &-input {
+    height: unit(70, rpx);
+    border-radius: unit(12, rpx);
+    padding: 0 unit(20, rpx);
+    text-align: left;
+    border: 1px solid #eee;
+    background: #F7F7F7;
+    color: #666;
+    transition: box-shadow 0.5s;
+    box-shadow: 0 0 0 rgba(0,0,0,0);
+
+    &:hover {
+      box-shadow: 0 0 unit(10, rpx) rgba(0,0,0,.1);
+    }
   }
-  .align-center{
-    align-items: center;
+}
+
+/* #ifdef MP-WEIXIN */
+::v-deep .xd-form-checkbox .checklist-group {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+.text-content {
+  width: 100%;
+  & > text {
+    font-size: 26rpx;
   }
+}
+/* #endif */
+
+
+
 </style>