jufubao-base 1.0.186 → 1.0.187-beta3

package/src/components/JfbBasePhoneCollect/JfbBasePhoneCollect.vue

@@ -16,37 +16,66 @@
       <view class="jfb-base-phone-collect__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-phone-collect__body">
-      <view class="panel-login-password">
+    <view :style="{
+      '--agreement-align': agreementAlign
+    }" class="jfb-base-phone-collect__body">
+      <view :style="loginFormStyle" class="panel-login-password">
         <xd-form
-          label-width="128"
-          style="margin-top: 40rpx"
-          label-align="right"
-          content-align="left"
+          :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 label="手机号" content-align="left">
+          <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="请输入11位手机号"
+              :placeholder="phonePlaceholder"
             />
           </xd-form-item>
-          <xd-form-item label="验证码" content-align="left">
+          <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="请输入验证码"
+                :placeholder="codePlaceholder"
               />
               <view
                 class="get_code"
                 @click="reGetCode"
-                :style="{ color: mainColor }"
+                :style="getCodeStyle"
                 >{{ jfbTimeer ? jfbTimeer + "秒后获取" : "获取验证码" }}</view
               >
             </view>
           </xd-form-item>
         </xd-form>
-        <view class="form-group" style="padding-bottom: 0">
+        <view class="form-group" :style="agreementBoxStyle">
           <xd-form-checkbox
             class="xd-form-checkbox"
             v-model="panel_1_checked"
@@ -55,19 +84,19 @@
             :localdata="[{ value: 1, text: '登录即同意《隐私政策》《用户服务协议》' },]"
           >
             <template slot="a1">
-              <view class="text-content">
+              <view class="text-content" :style="agreeFont">
                 <text>请阅读并同意</text>
-                <text @click.stop="handlePrivacy('privacy_privacy')" :style="{color: mainColor}">《隐私政策》</text>
-                <text @click.stop="handlePrivacy('privacy_service')" :style="{color: mainColor}">《用户服务协议》</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 class="form-group">
+        <view :style="btnWrapStyle" class="form-group">
           <xd-button
             style="flex: 1"
             type="primary"
-            radius="10rpx"
+            :radius="btnRadius + 'rpx'"
             :disabled="!panelIsChecked"
             @click="doLoginForm"
             >登录</xd-button
@@ -76,6 +105,13 @@
         <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>
@@ -123,12 +159,123 @@ export default {
       provider_id: "",
       callback_url: "",
       is_show_skip: "Y",
+
+      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) {
@@ -165,10 +312,61 @@ export default {
      * @description 监听事件变化
      * @param container {object} 业务组件对象自己
      */
-    init(container) {
-      //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-      //this.height = getContainerPropsValue(container, 'content.height', 10);
-      this.is_show_skip = getContainerPropsValue(container, 'content.is_show_skip', "Y");
+    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', {
@@ -261,8 +459,9 @@ export default {
     }
 
     .xd-form-checkbox {
-      /deep/ .checklist-box {
-        margin: 0 !important;
+      ::v-deep .checklist-box {
+        margin: 0;
+        align-items: var(--agreement-align);
       }
     }
     .xd-form-checkbox {
@@ -284,6 +483,11 @@ export default {
     .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 {
@@ -307,12 +511,88 @@ export default {
         color: #fe7a63;
       }
       .jump_collect{
-        font-size: 24rpx;
-        color: #a6a6a6;
-        text-align: right;
-        margin: 20rpx 70rpx 0 0;
+        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
   }
 }