jufubao-base 1.0.173 → 1.0.174-beta10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.173",
+  "version": "1.0.174-beta10",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseHeader/JfbBaseHeader.vue

@@ -53,6 +53,7 @@
             v-if="useSearch==='Y'"
             :placeholder="placeholder"
             class="search_input"
+            :value="keyword"
             @input="handleInput"
             @click="toSearch"
             :placeholder-style="'color:' + inputTextColor"
@@ -100,6 +101,8 @@
         timer: null,
         saveKey: 'xd_user_current_access_city', //用户选中城市存储key
         loaded: false,
+        keyword: "",
+
         //面板
         showLocation: "",
         showLocationKey: 'showLocationKey',
@@ -204,6 +207,7 @@
 
       },
       handleInput(e){
+        this.keyword = e.detail.value;
         if(this.timer) clearTimeout(this.timer);
         this.timer = setTimeout(() => {
           jfbRootFnExec(this, 'onCustomEvent')("baseHeader@search", e.detail.value);
@@ -242,6 +246,11 @@
         }
         this.$xdUniHelper.navigateBack();
       },
+      onJfbCustomEvent({action, data}){
+        if(action === 'baseTfkSearch@keyword'){
+          this.keyword = data;
+        }
+      }
     }
   }
 

package/src/components/JfbBaseLogin/Attr.js

@@ -16,6 +16,44 @@ export default {
           { label: '账号登录页', value: 'account' },
         ],
       },
+      {
+        label: "logo配置:",
+        ele: "title",
+        groupKey: "content",
+        size: "small"
+      },
+      {
+        label: "是否展示logo:",
+        ele: "xd-radio",
+        valueKey: "showLogo",
+        value: data.showLogo || "Y",
+        groupKey: "content",
+        list: [
+          { label: '展示', value: "Y" },
+          { label: '隐藏', value: "N" },
+        ],
+      },
+      {
+        label: '自定义Logo:',
+        ele: "xd-upload",
+        valueKey: 'customLogoUrl',
+        groupKey:'content',
+        value: data.customLogoUrl || {},
+        defaultValue: data.customLogoUrl || null,
+        slot: true,
+        oneWidth: 100,
+        oneHeight: 100,
+        elinputClassName: 'input40',
+        tipsformet: '上传格式:@imageType@不超过@size@MB.建议比例1:1',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 5,
+        action: 'action',
+        sort: true,
+        maxlen: 100,
+        hidden: data.showLogo !== "Y",
+      },
       {
         ele: 'title',
         label: '按钮内容配置',
@@ -597,7 +635,7 @@ export default {
         label: 'logo样式配置',
         size: 'small',
         groupKey: 'style',
-        hidden: data.previewCurrent !== "auth",
+        hidden: data.showLogo !== "Y",
       },
       {
         label: "logo区域高度:",
@@ -608,7 +646,7 @@ export default {
         groupKey:'style',
         placeholder: "请输入logo区域高度",
         className: 'input60',
-        hidden: data.previewCurrent !== "auth",
+        hidden: data.showLogo !== "Y",
       },
       {
         label: "logo图片高度:",
@@ -619,7 +657,7 @@ export default {
         groupKey:'style',
         placeholder: "请输入logo图片高度",
         className: 'input60',
-        hidden: data.previewCurrent !== "auth",
+        hidden: data.showLogo !== "Y",
       },
       {
         label: 'logo圆角设置:',
@@ -639,7 +677,7 @@ export default {
               console.error(error);
             });
         },
-        hidden: data.previewCurrent !== "auth",
+        hidden: data.showLogo !== "Y",
       },
       {
         ele: "title",
@@ -648,6 +686,25 @@ export default {
         groupKey: "style",
         hidden: data.previewCurrent !== "account",
       },
+      {
+        label: '登录方式菜单外边距:',
+        ele: "xd-margin-padding",
+        valueKey: 'loginMenuMargin',
+        value: data.loginMenuMargin || {
+          top: 40,
+          right: 70,
+          bottom: 40,
+          left: 70
+        },
+        setting: {
+          type: 'margin',
+        },
+        groupKey:'style',
+        placeholder: '请设置边距',
+        inline: false,
+        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">20</span>像素',
+        hidden: data.previewCurrent !== "account",
+      },
       {
         label: "输入框样式:",
         ele: 'xd-radio',

package/src/components/JfbBaseLogin/JfbBaseLogin.vue

@@ -19,13 +19,15 @@
     <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="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 class="login_types" :style="authBtnBoxStyle">
           <!--#ifdef H5-->
           <xd-button
@@ -100,7 +102,7 @@
         </view>
       </view>
       <view v-if="showStep === 2" class="panel-login-password">
-        <view class="phone-login-type">
+        <view class="phone-login-type" :style="accountLoginTypeBoxStyle">
           <view
             v-if="phoneLogin"
             class="_item"
@@ -116,7 +118,7 @@
             >密码登录<text :style="{ background: mainColor }"></text
           ></view>
         </view>
-        <view style="margin-top: 40rpx" :style="loginFormStyle">
+        <view :style="loginFormStyle">
           <xd-form
             :label-align="labelAlign"
             :labelPosition="labelPosition"
@@ -172,7 +174,7 @@
             </xd-form-item>
             <xd-form-item
               v-if="accountLoginType === 'pwd'"
-              class="form-item"
+              class="form-item password-form-item"
               :class="[inputStyle]"
               label="密码"
               :leftIcon="passwordIcon"
@@ -188,6 +190,23 @@
           </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
+          >
+        </view>
         <view class="form-group" :style="agreementBoxStyle">
           <xd-form-checkbox
             class="xd-form-checkbox"
@@ -211,23 +230,6 @@
             </template>
           </xd-form-checkbox>
         </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
-          >
-        </view>
         <view
           v-if="accountLoginType === 'pwd'"
           class="forget_password"
@@ -434,6 +436,9 @@ export default {
       }, //条款内边距
       authAgreePadding: {}, //授权登录条款内边距
       authBtnPadding: {}, //授权登录按钮内边距
+      showLogo: "Y", //是否显示logo
+      customLogoUrl: {}, //自定义logo地址
+      loginMenuMargin: {},
     };
   },
   computed: {
@@ -493,9 +498,18 @@ export default {
     },
     btnWrapStyle(){
       let padding = `${this.checkValue(this.btnMargin.top, 20)}rpx`;
-      padding = `${padding} ${this.checkValue(this.btnMargin.right, 40)}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, 40)}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,
       })
@@ -621,7 +635,7 @@ export default {
         name = this["siteInfo"]["mapping"]["site_name"];
       if (this.projectAttr["site_logo"])
         logo = getServiceUrl(this.projectAttr["site_logo"], "size3");
-      this.logo = logo || "//dummyimage.com/100x100";
+      
       this.partnerName = name || "聚福宝福利";
       this.logoTextColor = getContainerPropsValue(value, "content.logoTextColor", "#333");
       this.callback_url = getContainerPropsValue(value, "content.callback_url", {value: ''}).value;
@@ -668,6 +682,15 @@ export default {
       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'
@@ -680,7 +703,7 @@ export default {
       this.privacyFont = privacyFont;
 
       this.agreementAlign = getContainerPropsValue(value, "content.agreementAlign", 'center');
-      console.log(this.agreePadding, 'this.agreePadding');
+      console.log(this.customLogoUrl, 'this.customLogoUrl');
       if(this.inputStyle === 'face'){
         this.labelPosition = 'top';
         this.labelAlign = 'left';
@@ -1075,6 +1098,7 @@ export default {
   box-sizing: border-box;
 
   &__body {
+    padding-bottom: 160rpx;
     .xd-form-checkbox {
       ::v-deep .checklist-content .checklist-text {
         font-size: 26rpx !important;
@@ -1100,9 +1124,10 @@ export default {
     .form-group {
       padding: 40rpx 70rpx;
     }
+    // #ifdef H5
     .form-item {
       ::v-deep &.uni-forms-item {
-        padding-left: unit(30rpx) !important;
+        // padding-left: unit(30,rpx) !important;
         .uni-input-input{
           font-size: var(--content-font-size);
           color: var(--content-font-color);
@@ -1136,6 +1161,44 @@ export default {
 
       }
     }
+    // #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;
@@ -1143,6 +1206,22 @@ export default {
       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 {
@@ -1151,21 +1230,7 @@ export default {
           color: #a6a6a6;
         }
       }
-      .logo-wrap {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        image {
-          width: 180rpx;
-          height: 180rpx;
-          margin-bottom: unit(12,rpx);
-        }
-        view {
-          font-size: unit(36,rpx);
-          font-weight: 600;
-        }
-      }
+      
       .login_types {
         padding: 10rpx 50rpx;
 

package/src/components/JfbBaseNotice/JfbBaseNotice.vue

@@ -442,6 +442,9 @@
   @import "./JfbBaseNoticeLess.less";
 
   .jfb-base-notice {
+    position: relative;
+    z-index: 100;
+
     &__body{
       .content-list {
         display: flex;

package/src/components/JfbBaseTfkCardBind/JfbBaseTfkCardBind.vue

@@ -38,11 +38,11 @@
         <view class="menu_list">
           <view class="menu_item" @click="switchShowType('ticket')">
             <view class="menu_inner" :class="menuShowType"
-              :style="[menuType == 'ticket' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">实体券</view>
+              :style="menuType == 'ticket' ? menuItemActiveStyle : menuItemStyle">实体券</view>
           </view>
           <view class="menu_item" @click="switchShowType('code')">
             <view class="menu_inner" :class="menuShowType"
-              :style="[menuType == 'code' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">电子码</view>
+              :style="menuType == 'code' ? menuItemActiveStyle : menuItemStyle">电子码</view>
           </view>
         </view>
       </view>
@@ -67,8 +67,9 @@
                 <xd-form-input
                   v-model="form.card_number"
                   placeholder="请输入票券号"
+                  style="width: 100%;"
                 />
-                <view @click="doScanCode">
+                <view @click.stop="doScanCode" style="margin-left: 20rpx;">
                   <xd-font-icon :icon="scanIcon.icon || 'iconsaoma'"
                     :color="scanIcon.color"
                     :style="{fontSize: scanIcon.fontSize}"
@@ -102,8 +103,9 @@
                 <xd-form-input
                   v-model="form.valid_code"
                   placeholder="请输入验证码"
+                  style="width: 100%;"
                 />
-                <view class="form_valid_code">
+                <view class="form_valid_code" @click="switchValidToken">
                   <image
                     style="width: 100%;height:100%"
                     :src="validImageAPIUrl + '?image_width=160&image_height=50&token='+ valid_token"
@@ -178,6 +180,9 @@
   import extsMixins from "@/mixins/extsMixins";
   import { mapState } from "vuex";
   export default {
+    // #ifdef MP-WEIXIN
+    options: { styleIsolation: 'shared' },
+    // #endif
     name: "JfbBaseTfkCardBind",
     components: {
       XdFontIcon,
@@ -332,14 +337,12 @@
           fontSize: '24rpx',
         })
       },
-      menuItemBoxStyle(){
+      menuItemBoxPadding(){
         let padding = `${this.checkValue(this.menuBtnPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.menuBtnPadding.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.menuBtnPadding.bottom, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.menuBtnPadding.left, 20)}rpx`;
-        return this.styleObjectToString({
-          padding
-        })
+        return padding;
       },
       menuItemStyle(){
         let styleObj = {
@@ -347,6 +350,7 @@
           background: this.menuTabColor['bgColor'] || '#fff',
           fontSize: this.menuTabColor['fontSize'] || '30rpx',
           fontWeight: this.menuTabColor['fontWeight'] || 'normal',
+          padding: this.menuItemBoxPadding,
         }
 
         return this.styleObjectToString(styleObj)
@@ -358,6 +362,7 @@
           background: this.menuTabColor['actBgColor'] || '#fff',
           fontSize: this.menuTabColor['actFontSize'] || '30rpx',
           fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
+          padding: this.menuItemBoxPadding,
         }
         if(this.menuShowType === 'text'){
           styleActiveObj['borderBottom'] = `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`;
@@ -461,7 +466,7 @@
         }
       },
       toShowCouponDialog(){
-        if(this.info){
+        if(this.form.card_number){
           jfbRootFnExec(this, 'onCustomEvent')("@showBaseConDialog", {user_card_number: this.form.card_number})
         }
       },
@@ -478,6 +483,7 @@
         let path = this.getUrlCallback(this.my_card_url || this.backUrl);
         //有优惠券处理
         if(this.hasCon){
+          console.warn("绑定成功有优惠券处理");
           this.toShowCouponDialog();
           this.$bus.$on("onCloseConDialog",(container_id) => {
             if(container_id === this.hasCon){
@@ -526,18 +532,24 @@
           title: '请输入验证码',
           icon: "none"
         })
-        await this.checkValidToken();
+        this.$xdShowLoading({});
 
-        jfbRootExec("pwdCardBind", {
-          vm: this,
-          data: {
-            card_password: card_password,
-            card_number: card_number + "",
-            is_show_pop: "Y"
-          }
-        }).then(res => {
-          this.handlerAfterBindCard(res);
+        this.checkValidToken().then(() => {
+          jfbRootExec("pwdCardBind", {
+            vm: this,
+            data: {
+              card_password: card_password,
+              card_number: card_number + "",
+              is_show_pop: "Y"
+            }
+          }).then(res => {
+            this.$xdHideLoading();
+            this.handlerAfterBindCard(res);
+          })
+        }).catch(err => {
+          this.$xdHideLoading();
         })
+
       },
       //绑定电子码票券
       toBindCardDigital(){
@@ -671,6 +683,7 @@
 
   .jfb-base-tfk-card-bind {
     &__body{
+      // #ifdef H5
       .form-item {
         ::v-deep &.uni-forms-item {
           .is-required{
@@ -697,8 +710,6 @@
         }
         &.linear{
           ::v-deep &.uni-forms-item--border{
-            // border-color: var(--form-border-color) !important;
-            // border-width: var(--form-border-width) !important;
             border-top: none !important;
             border-bottom: var(--form-border-width) solid var(--form-border-color) !important;
           }
@@ -742,13 +753,83 @@
           ::v-deep .label-icon{
             font-size: var(--digital-icon-size) !important;
           }
-          ::v-deep .uni-forms-item__inner{
-            // padding-bottom: 0% !important;
-            // border: 1px solid var(--digital-border-color);
-            // border-radius: var(--digital-border-radius);
+        }
+      }
+      // #endif
+
+      // #ifdef MP
+      ::v-deep .uni-forms-item {
+        .is-required{
+          display: none;
+        }
+        .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);
+        }
+      }
+      ::v-deep .uni-forms-item--border{
+        padding: var(--form-input-padding) 0;
+      }
+      .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__box{
+          background: #F7F7F7;
+          border-radius: var(--form-border-radius);
+          padding-right: 20rpx;
+        }
+        ::v-deep .uni-forms-item--border{
+          border: none;
+        }
+      }
+      .ticket_item{
+        ::v-deep .label-icon{
+          font-size: var(--ticket-icon-size) !important;
+        }
+      }
+      .password_item{
+        ::v-deep .label-icon{
+          font-size: var(--password-icon-size) !important;
+        }
+      }
+      .valid_item{
+        ::v-deep .label-icon{
+          font-size: var(--valid-icon-size) !important;
+        }
+      }
+      .digital_item{
+        &.linear{
+          ::v-deep .uni-forms-item--border{
+            border-color: var(--digital-border-color) !important;
+          }
+        }
+        &.face{
+          ::v-deep .uni-forms-item__box{
+            border-radius: var(--digital-border-radius);
           }
         }
+        ::v-deep .label-icon{
+          font-size: var(--digital-icon-size) !important;
+        }
       }
+      // #endif
+
+
       .menu_wrap{
         .menu_list{
           display: flex;