jufubao-base 1.0.186-beta3 → 1.0.186

package/src/components/JfbBasePhoneCollect/JfbBasePhoneCollect.vue

@@ -16,66 +16,37 @@
       <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">
+    <view class="jfb-base-phone-collect__body">
+      <view class="panel-login-password">
         <xd-form
-          :label-align="labelAlign"
-          :labelPosition="labelPosition"
-          :key="formRenderKey"
+          label-width="128"
+          style="margin-top: 40rpx"
+          label-align="right"
+          content-align="left"
           :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 
-            class="form-item"
-            :class="[inputStyle]" 
-            :leftIcon="phoneIcon"
-            :labelWidth="labelWidth" 
-            label="手机号" 
-            content-align="left">
+          <xd-form-item label="手机号" content-align="left">
             <xd-form-input
               v-model="accountForm.phone_number"
-              :placeholder="phonePlaceholder"
+              placeholder="请输入11位手机号"
             />
           </xd-form-item>
-          <xd-form-item 
-            class="form-item"
-            label="验证码" 
-            content-align="left"
-            :class="[inputStyle]"
-            :leftIcon="codeIcon"
-            :labelWidth="labelWidth"
-          >
+          <xd-form-item label="验证码" content-align="left">
             <view class="flex align-center">
               <xd-form-input
                 v-model="accountForm.verification_code"
-                :placeholder="codePlaceholder"
+                placeholder="请输入验证码"
               />
               <view
                 class="get_code"
                 @click="reGetCode"
-                :style="getCodeStyle"
+                :style="{ color: mainColor }"
                 >{{ jfbTimeer ? jfbTimeer + "秒后获取" : "获取验证码" }}</view
               >
             </view>
           </xd-form-item>
         </xd-form>
-        <view class="form-group" :style="agreementBoxStyle">
+        <view class="form-group" style="padding-bottom: 0">
           <xd-form-checkbox
             class="xd-form-checkbox"
             v-model="panel_1_checked"
@@ -84,19 +55,19 @@
             :localdata="[{ value: 1, text: '登录即同意《隐私政策》《用户服务协议》' },]"
           >
             <template slot="a1">
-              <view class="text-content" :style="agreeFont">
+              <view class="text-content">
                 <text>请阅读并同意</text>
-                <text @click.stop="handlePrivacy('privacy_privacy')" :style="privacyFont">《隐私政策》</text>
-                <text @click.stop="handlePrivacy('privacy_service')" :style="privacyFont">《用户服务协议》</text>
+                <text @click.stop="handlePrivacy('privacy_privacy')" :style="{color: mainColor}">《隐私政策》</text>
+                <text @click.stop="handlePrivacy('privacy_service')" :style="{color: mainColor}">《用户服务协议》</text>
               </view>
             </template>
           </xd-form-checkbox>
         </view>
-        <view :style="btnWrapStyle" class="form-group">
+        <view class="form-group">
           <xd-button
             style="flex: 1"
             type="primary"
-            :radius="btnRadius + 'rpx'"
+            radius="10rpx"
             :disabled="!panelIsChecked"
             @click="doLoginForm"
             >登录</xd-button
@@ -105,13 +76,6 @@
         <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>
@@ -159,123 +123,12 @@ 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) {
@@ -312,61 +165,10 @@ export default {
      * @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');
+    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");
     },
     reGetCode() {
       this.$xdLog.setProject('get.code.handle', {
@@ -459,9 +261,8 @@ export default {
     }
 
     .xd-form-checkbox {
-      ::v-deep .checklist-box {
-        margin: 0;
-        align-items: var(--agreement-align);
+      /deep/ .checklist-box {
+        margin: 0 !important;
       }
     }
     .xd-form-checkbox {
@@ -483,11 +284,6 @@ 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 {
@@ -511,88 +307,12 @@ export default {
         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;
+        font-size: 24rpx;
+        color: #a6a6a6;
+        text-align: right;
+        margin: 20rpx 70rpx 0 0;
       }
     }
-    // #endif
   }
 }