jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBasePhoneCollect/JfbBasePhoneCollect.vue

@@ -0,0 +1,644 @@
+<template>
+  <view
+    class="jfb-base-phone-collect"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-phone-collect__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-phone-collect__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view :style="{
+      '--agreement-align': agreementAlign
+    }" class="jfb-base-phone-collect__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
+            style="flex: 1"
+            type="primary"
+            :radius="btnRadius + 'rpx'"
+            :disabled="!panelIsChecked"
+            @click="doLoginForm"
+            >登录</xd-button
+          >
+        </view>
+        <view
+          v-if="is_show_skip === 'Y'"
+          class="jump_collect"
+          :style="{
+            '--font-size': ($rpxNum * parseInt(jumpFont.fontSize)) + 'px',
+            '--font-color': jumpFont.color,
+            '--font-weight': jumpFont.fontWeight,
+            '--line-height': ($rpxNum * parseInt(jumpFont.lineHeight)) + 'px',
+            '--text-align': jumpAlign
+          }"
+          @click="jumpCollect"
+        >跳过</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+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";
+import JfbBasePhoneCollectMixin from "./JfbBasePhoneCollectMixin";
+//#ifdef H5
+import cookie from "@/common/cookie";
+//#endif
+
+export default {
+  // #ifdef MP-WEIXIN
+  options: { styleIsolation: 'shared' },
+  // #endif
+
+  name: "JfbBasePhoneCollect",
+  components: {
+    XdFontIcon,
+    XdFormItem,
+    XdForm,
+    XdFormInput,
+    XdButton,
+    XdFormCheckbox,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBasePhoneCollectMixin],
+  data() {
+    return {
+      panel_1_checked: "",
+      accountForm: {
+        phone_number: "",
+        verification_code: "",
+      },
+      jfbTimeer: 0,
+      interval: null,
+      provider_id: "",
+      callback_url: "",
+      is_show_skip: "Y",
+      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.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();
+      }
+      let jumpFont = getContainerPropsValue(value, "content.jumpFont", {});
+      if(!jumpFont.color) {
+        jumpFont.color = '#a6a6a6'
+      }
+      this.jumpFont = jumpFont;
+      console.log(this.jumpFont,'this.jumpFont');
+      
+      this.jumpAlign = getContainerPropsValue(value, "content.jumpAlign", 'right');
+    },
+    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((err) => {
+        this.$xdHideLoading();
+        this.$xdLog.catch(err)
+      });
+    },
+    jumpCollect(){
+      let { callback_url } = this;
+      if (callback_url) callback_url = decodeURIComponent(callback_url);
+      this.$xdUniHelper.redirectTo({
+        url: callback_url || this.settings.index,
+      });
+    },
+    doLoginForm() {
+      const { 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("phoneCollect", {
+        vm: this,
+        data: {
+          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)
+      });
+    },
+
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBasePhoneCollectLess.less";
+
+.jfb-base-phone-collect {
+  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 {
+      ::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 {
+        .label-text {
+          font-size: 26rpx;
+          color: #a6a6a6;
+        }
+      }
+
+      /deep/ .uni-easyinput__placeholder-class {
+        font-size: 26rpx;
+        color: #d4d4d4;
+      }
+
+      .not_login {
+        position: fixed;
+        width: 100%;
+        text-align: center;
+        bottom: 100rpx;
+        font-size: 24rpx;
+        color: #fe7a63;
+      }
+      .jump_collect{
+        font-size: var(--font-size);
+        color: var(--font-color);
+        text-align: var(--text-align);
+        font-weight: var(--font-weight);
+        line-height: var(--line-height);
+        margin: 20rpx 70rpx 0 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);
+        }
+      }
+      &.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
+  }
+}
+
+.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>