jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBasePhoneLogin/JfbBasePhoneLogin.vue

@@ -0,0 +1,762 @@
+<template>
+  <view
+    class="jfb-base-phone-login"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-phone-login__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-phone-login__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view :style="{
+      '--agreement-align': agreementAlign
+    }" class="jfb-base-phone-login__body">
+      <view :style="loginFormStyle" class="panel-login-password">
+        <xd-form
+          :label-align="labelAlign"
+          :labelPosition="labelPosition"
+          :key="formRenderKey"
+          :border="true"
+          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,
+            'margin-top': '40rpx',
+          }"
+        >
+          <xd-form-item
+            v-if="isCollectUsername"
+            class="form-item"
+            :class="[inputStyle]"
+            :labelWidth="labelWidth"
+            label="姓名"
+            content-align="left"
+          >
+            <xd-form-input
+              v-model="accountForm.user_name"
+              placeholder="请输入姓名"
+            />
+          </xd-form-item>
+          <xd-form-item
+            class="form-item"
+            :class="[inputStyle]"
+            :leftIcon="phoneIcon"
+            :labelWidth="labelWidth"
+            label="手机号"
+            content-align="left"
+          >
+            <xd-form-input
+              v-model="accountForm.phone_number"
+              :placeholder="phonePlaceholder"
+            />
+          </xd-form-item>
+          <xd-form-item
+            class="form-item"
+            label="验证码"
+            content-align="left"
+            :class="[inputStyle]"
+            :leftIcon="codeIcon"
+            :labelWidth="labelWidth"
+          >
+            <view class="flex align-center">
+              <xd-form-input
+                v-model="accountForm.verification_code"
+                :placeholder="codePlaceholder"
+              />
+              <view class="get_code" @click="reGetCode" :style="getCodeStyle">{{
+                jfbTimeer ? jfbTimeer + "秒后获取" : "获取验证码"
+              }}</view>
+            </view>
+          </xd-form-item>
+        </xd-form>
+        <view class="form-group" :style="agreementBoxStyle">
+          <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">
+                <text>请阅读并同意</text>
+                <text
+                  @click.stop="handlePrivacy('privacy_privacy')"
+                  :style="privacyFont"
+                  >《隐私政策》</text
+                >
+                <text
+                  @click.stop="handlePrivacy('privacy_service')"
+                  :style="privacyFont"
+                  >《用户服务协议》</text
+                >
+              </view>
+            </template>
+          </xd-form-checkbox>
+        </view>
+        <view :style="btnWrapStyle" class="form-group">
+          <xd-button
+            :disabled="!panelIsChecked"
+            style="flex: 1"
+            type="primary"
+            :radius="btnRadius + 'rpx'"
+            @click="doLoginForm"
+            >登录</xd-button
+          >
+        </view>
+        <!-- <view
+          class="not_login"
+          :style="{color: mainColor}"
+          @click="toNotLoginHome"
+        >暂不登录，去逛逛</view> -->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBasePhoneLoginMixin from "./JfbBasePhoneLoginMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdFormItem from "@/components/XdFormItem/XdFormItem";
+import XdForm from "@/components/XdForm/XdForm";
+import XdFormInput from "@/components/XdFormInput/XdFormInput";
+import XdButton from "@/components/XdButton/XdButton";
+import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
+//#ifdef H5
+import cookie from "@/common/cookie";
+//#endif
+
+export default {
+  // #ifdef MP-WEIXIN
+  options: { styleIsolation: "shared" },
+  // #endif
+
+  name: "JfbBasePhoneLogin",
+  components: {
+    XdFontIcon,
+    XdForm,
+    XdFormItem,
+    XdFormInput,
+    XdButton,
+    XdFormCheckbox,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBasePhoneLoginMixin],
+  data() {
+    return {
+      panel_1_checked: "",
+      accountForm: {
+        phone_number: "",
+        verification_code: "",
+      },
+      jfbTimeer: 0,
+      interval: null,
+      auth_code: "",
+      provider_id: "",
+      callback_url: "",
+      isCollectUsername: false,
+
+      inputStyle: "linear", //输入框样式 linear:线性  face: 面性
+      formBorderColor: "#F9F9F9", //
+      formBorderWidth: 1, //表单边框宽度
+      formWrapBorderWidth: 1, //表单外边框宽度
+      formWrapBorderColor: "#F9F9F9", //表单外边框宽度
+      formShadowW: 0, //表单阴影宽度
+      formShadowColor: '#fff', //表单阴影颜色
+      formBorderRadius: 20, //表单圆角
+      formBgColor: "", //表单背景颜色
+      formPadding: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      formMargin: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      labelAlign: "left", //表单label对齐方式
+      labelPosition: "left", //表单label位置
+      labelWidth: 160, //表单label宽度
+      phoneIcon: "", //手机号登录输入框图标
+      codeIcon: "", //验证码登录输入框图标
+      passwordIcon: "", //密码登录输入框图标
+      labelFont: {
+        //表单label字体
+        color: "#333",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      placeholderFont: {
+        color: "#d4d4d4",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      contentFont: {
+        //表单内容字体
+        color: "#333",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      getCodeFont: {
+        color: "#ff5a39",
+        fontSize: "24rpx",
+        fontWeight: "normal",
+      },
+      getCodeShowType: "text", //获取验证码展示方式
+      btnMargin: {},
+      btnRadius: 20, //按钮圆角
+      agreeFont: {}, //条款字体
+      privacyFont: {}, //隐私字体
+      agreementAlign: "center", //条款对齐方式
+      agreePadding: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }, //条款内边距
+      formRenderKey: "formRenderKey",
+      jumpFont: {}, //跳过字体
+      jumpAlign: 'right'
+    };
+  },
+  computed: {
+    panelIsChecked() {
+      return this.panel_1_checked.includes(1);
+    },
+    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`;
+      let margin = `${this.checkValue(this.formMargin.top, 20)}rpx`;
+      margin = `${margin} ${this.checkValue(this.formMargin.right, 20)}rpx`;
+      margin = `${margin} ${this.checkValue(this.formMargin.bottom, 20)}rpx`;
+      margin = `${margin} ${this.checkValue(this.formMargin.left, 20)}rpx`;
+      let borderRadius = `${this.checkValue(this.formRadius, 20)}rpx`;
+      let border = `${this.formWrapBorderWidth}px solid ${this.formWrapBorderColor}`;
+      let boxShadow = `0 0 ${this.formShadowW}rpx ${this.formShadowColor}`
+
+      return this.styleObjectToString({
+        background: this.formBgColor,
+        padding: padding,
+        margin,
+        borderRadius,
+        border,
+        boxShadow
+      })
+    },
+    getCodeStyle() {
+      return this.styleObjectToString({
+        color: this.getCodeFont.color,
+        borderColor:
+          this.getCodeShowType === "button"
+            ? this.getCodeFont.color
+            : "transparent",
+        fontSize: this.getCodeFont.fontSize,
+        fontWeight: this.getCodeFont.fontWeight,
+      });
+    },
+    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,
+      });
+    },
+    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,
+      });
+    },
+  },
+  watch: {
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
+    },
+    "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);
+    // #ifdef H5
+    this.isCollectUsername = !!cookie.get("JFB-IS-COLLECT-NAME");
+    // #endif
+  },
+  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}`,
+      });
+    },
+
+    onJfbLoad(options) {
+      this.auth_code = options.auth_code;
+      this.provider_id = options.provider_id;
+      this.callback_url = options.callback_url;
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(value) {
+      this.inputStyle = getContainerPropsValue(
+        value,
+        "content.inputStyle",
+        "linear"
+      );
+      this.formBorderColor = getContainerPropsValue(
+        value,
+        "content.formBorderColor",
+        "#F9F9F9"
+      );
+      this.is_show_skip = getContainerPropsValue(
+        value,
+        "content.is_show_skip",
+        "Y"
+      );
+      this.formBorderWidth = getContainerPropsValue(
+        value,
+        "content.formBorderWidth",
+        "1"
+      );
+      this.formBgColor = getContainerPropsValue(
+        value,
+        "content.formBgColor",
+        "#FFFFFF"
+      );
+      this.formPadding = getContainerPropsValue(value, "content.formPadding", {
+        top: 20,
+        left: 20,
+        right: 20,
+        bottom: 20,
+      });
+      this.formMargin = getContainerPropsValue(value, "content.formMargin", {top: 0, left: 0, right: 0, bottom: 0});
+      this.formRadius = getContainerPropsValue(value, "content.formRadius", '0');
+      this.formWrapBorderColor = getContainerPropsValue(value, "content.formWrapBorderColor", '#F9F9F9');
+      this.formWrapBorderWidth = getContainerPropsValue(value, "content.formWrapBorderWidth", '0');
+      this.formShadowColor = getContainerPropsValue(value, "content.formShadowColor", '#F9F9F9');
+      this.formShadowW = getContainerPropsValue(value, "content.formShadowW", '0');
+      this.labelAlign = getContainerPropsValue(
+        value,
+        "content.labelAlign",
+        "left"
+      );
+      this.labelPosition = getContainerPropsValue(
+        value,
+        "content.labelPosition",
+        "left"
+      );
+      this.labelWidth = getContainerPropsValue(
+        value,
+        "content.labelWidth",
+        "180"
+      );
+      this.phoneIcon = getContainerPropsValue(value, "content.phoneIcon", "");
+      this.codeIcon = getContainerPropsValue(value, "content.codeIcon", "");
+      this.passwordIcon = getContainerPropsValue(
+        value,
+        "content.passwordIcon",
+        ""
+      );
+      this.labelFont = getContainerPropsValue(value, "content.labelFont", {});
+      this.placeholderFont = getContainerPropsValue(
+        value,
+        "content.placeholderFont",
+        {}
+      );
+      this.contentFont = getContainerPropsValue(
+        value,
+        "content.contentFont",
+        {}
+      );
+      this.getCodeFont = getContainerPropsValue(
+        value,
+        "content.getCodeFont",
+        {}
+      );
+      this.getCodeShowType = getContainerPropsValue(
+        value,
+        "content.getCodeShowType",
+        "text"
+      );
+      this.btnMargin = getContainerPropsValue(value, "content.btnMargin", {});
+      this.btnRadius = getContainerPropsValue(value, "content.btnRadius", "20");
+      this.phonePlaceholder = getContainerPropsValue(
+        value,
+        "content.phonePlaceholder",
+        "请输入手机号"
+      );
+      this.codePlaceholder = getContainerPropsValue(
+        value,
+        "content.codePlaceholder",
+        "请输入验证码"
+      );
+      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"
+      );
+      this.agreePadding = getContainerPropsValue(
+        value,
+        "content.agreePadding",
+        {}
+      );
+      if (this.inputStyle === "face") {
+        this.labelPosition = "top";
+        this.labelAlign = "left";
+      }
+      if (this.$configProject.isPreview) {
+        this.formRenderKey = Date.now();
+      }
+    },
+    reGetCode() {
+      this.$xdLog.setProject("get.code.handle", {
+        time: this.time,
+        jfbTimeer: this.jfbTimeer,
+      });
+      if (this.jfbTimeer > 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({});
+      console.log("jfbRootExec: sendMsg");
+      jfbRootExec("sendMsg", {
+        vm: this,
+        data: {
+          phone_number,
+          biz_name: "login",
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          this.jfbTimeer = 120;
+          this.interval = setInterval(() => {
+            this.jfbTimeer--;
+            if (this.jfbTimeer == 0) {
+              clearTimeout(this.interval);
+            }
+          }, 1000);
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    doLoginForm() {
+      const { auth_code, provider_id } = this;
+      const { phone_number, verification_code, user_name } = this.accountForm;
+      if (!phone_number || !verification_code){
+        return uni.showToast({ title: "手机号跟验证码不能为空", icon: "none" });
+      }
+      if(this.isCollectUsername && !user_name){
+        return uni.showToast({ title: "用户名不能为空", icon: "none" });
+      }
+      this.$xdShowLoading({});
+      jfbRootExec("phoneLogin", {
+        vm: this,
+        data: {
+          auth_code,
+          provider_id,
+          phone_number,
+          verification_code,
+          user_name
+        },
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          let { callback_url } = this;
+          if (callback_url) callback_url = decodeURIComponent(callback_url);
+          this.$xdUniHelper.redirectTo({
+            url: callback_url || this.settings.index,
+          });
+        })
+        .catch((error) => {
+          this.$xdHideLoading();
+          this.$xdLog.catch(error);
+        });
+    },
+    // 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) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBasePhoneLoginLess.less";
+
+.jfb-base-phone-login {
+  &__body {
+      // #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) !important;
+          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-color: var(--form-border-color) !important;
+          border-width: var(--form-border-width) !important;
+        }
+      }
+      &.face{
+        ::v-deep .uni-forms-item__content{
+          background: #F7F7F7;
+          border-radius: 16rpx;
+        }
+        ::v-deep &.uni-forms-item--border{
+          border: none;
+        }
+
+      }
+    }
+    // #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
+    .xd-form-checkbox {
+      /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 {
+      /deep/ .checklist-group {
+        justify-content: center;
+      }
+    }
+
+    .xd-form-checkbox {
+      /deep/ .checklist-text {
+        margin-left: unit(20, rpx) !important;
+      }
+    }
+
+    .form-group {
+      padding: 40rpx 70rpx;
+    }
+
+    .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;
+    }
+    .panel-login-password {
+      /deep/ .uni-forms-item__label {
+          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: 20rpx 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;
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+}
+.flex-sub {
+  flex: 1;
+}
+.align-center {
+  align-items: center;
+}
+/* #ifdef MP-WEIXIN */
+/deep/ .xd-form-checkbox .checklist-group {
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+.text-content {
+  width: 100%;
+  & > text {
+    font-size: 26rpx;
+  }
+}
+/* #endif */
+</style>