jufubao-base 1.0.167 → 1.0.169-beta1

package/src/components/JfbBaseTfkCardBind/JfbBaseTfkCardBind.vue

@@ -13,31 +13,343 @@
       <view class="jfb-base-tfk-card-bind__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-tfk-card-bind__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-tfk-card-bind__body" :style="{
+      '--form-border-color': formBorderColor,
+      '--form-border-width': formBorderWidth + 'px',
+      '--form-input-padding': inputPadding + '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,
+      '--ticket-icon-size': ($rpxNum * parseInt(ticketIcon.fontSize)) + 'px',
+      '--password-icon-size': ($rpxNum * parseInt(passwordIcon.fontSize)) + 'px',
+      '--valid-icon-size': ($rpxNum * parseInt(validCodeIcon.fontSize)) + 'px',
+      '--digital-icon-size': ($rpxNum * parseInt(digitalCodeIcon.fontSize)) + 'px',
+      '--digital-border-radius': ($rpxNum * Number(digitalCodeRadius)) + 'px',
+      '--digital-border-color': digitalCodeColor
+    }">
+      <view class="menu_wrap" :style="menuBoxStyle">
+        <view class="menu_list">
+          <view class="menu_item">
+            <view class="menu_inner" :class="menuShowType"
+              :style="[menuType == 'ticket' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">实体券</view>
+          </view>
+          <view class="menu_item">
+            <view class="menu_inner" :class="menuShowType"
+              :style="[menuType == 'code' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">电子码</view>
+          </view>
+        </view>
+      </view>
+      <view v-if="menuType === 'ticket'" class="form_wrap" :style="cardFormStyle">
+        <template v-if="menuType === 'ticket'">
+          <xd-form :label-align="labelAlign"
+            :key="formRenderKey"
+            :labelPosition="labelPosition"
+            :border="true"
+            paddingBetween="0"
+          >
+            <xd-form-item
+              class="form-item ticket_item"
+              :class="[inputStyle]"
+              :label="labelShow ==='N'?'':'票券号码'"
+              :labelWidth="labelWidth"
+              :leftIcon="ticketIcon.icon"
+              :iconColor="ticketIcon.color"
+              content-align="left"
+            >
+              <view class="align-center">
+                <xd-form-input
+                  v-model="form.card_number"
+                  placeholder="请输入票券号"
+                />
+                <view>
+                  <xd-font-icon :icon="scanIcon.icon || 'iconsaoma'"
+                    :color="scanIcon.color"
+                    :style="{fontSize: scanIcon.fontSize}"
+                  ></xd-font-icon>
+                </view>
+              </view>
+            </xd-form-item>
+            <xd-form-item
+              class="form-item password_item"
+              :class="[inputStyle]"
+              :label="labelShow ==='N'?'':'票券密码'"
+              :labelWidth="labelWidth"
+              :leftIcon="passwordIcon.icon"
+              :iconColor="passwordIcon.color"
+              content-align="left"
+            >
+              <xd-form-input type="password" placeholder="请输入票券密码" v-model="form.card_password" />
+            </xd-form-item>
+            <xd-form-item
+              class="form-item valid_item"
+              :class="[inputStyle]"
+              style="border-top: none;"
+              :label="labelShow ==='N'?'':'验证号码'"
+              :labelWidth="labelWidth"
+              :leftIcon="validCodeIcon.icon"
+              :iconColor="validCodeIcon.color"
+              content-align="left"
+              lastBorder
+            >
+              <view class="align-center">
+                <xd-form-input
+                  v-model="form.valid_code"
+                  placeholder="请输入验证码"
+                />
+                <view class="form_valid_code">
+                  <image
+                    style="width: 100%;height:100%"
+                    :src="validImageAPIUrl + '?image_width=160&image_height=50&token='+ valid_token"
+                  />
+                </view>
+              </view>
+            </xd-form-item>
+          </xd-form>
+          <view :style="btnWrapStyle">
+            <xd-button type="primary"
+              :radius="btnRadius + 'rpx'"
+            >
+              <xd-font-icon :icon="btnIcon.icon"
+                style="display: inline-flex;margin-right: 12rpx;"
+                :color="btnIcon.color"
+                :style="{fontSize: btnIcon.fontSize}"
+              ></xd-font-icon>
+              确定
+            </xd-button>
+          </view>
+        </template>
+      </view>
+      <view v-else class="form_wrap" :style="digitalFormStyle">
+        <xd-form :key="formRenderKey"
+          label-align="left"
+          labelPosition="left"
+          :border="true"
+          paddingBetween="0"
+        >
+          <xd-form-item class="form-item digital_item"
+            label=""
+            :labelWidth="digitalCodeLabelWidth"
+            :leftIcon="digitalCodeIcon.icon"
+            :iconColor="digitalCodeIcon.color"
+            content-align="left"
+          >
+            <xd-form-input placeholder="请输入票券号" v-model="form.code" />
+          </xd-form-item>
+        </xd-form>
+        <view :style="digitalBtnWrapStyle">
+          <xd-button type="primary"
+            :radius="btnRadius + 'rpx'"
+          >
+            <xd-font-icon :icon="btnIcon.icon"
+              style="display: inline-flex;margin-right: 12rpx;"
+              :color="btnIcon.color"
+              :style="{fontSize: btnIcon.fontSize}"
+            ></xd-font-icon>
+            确定
+          </xd-button>
+        </view>
+      </view>
+      <view :style="tipBoxStyle" v-html="tips"></view>
     </view>
   </view>
 </template>
 
 <script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
+  import XdFormInput from "@/components/XdFormInput/XdFormInput";
+  import XdForm from "@/components/XdForm/XdForm";
+  import XdFormItem from "@/components/XdFormItem/XdFormItem";
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardBindMixin from "./JfbBaseTfkCardBindMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import { mapState } from "vuex";
   export default {
     name: "JfbBaseTfkCardBind",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdButton,
+      XdFormCheckbox,
+      XdFormInput,
+      XdFormItem,
+      XdForm,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardBindMixin
     ],
     data() {
       return {
-
+        menuType: "ticket", //ticket,code
+        form: {},
+        validImageAPIUrl: "",
+        valid_token: "",
+        formRenderKey: "formRenderKey",
+       
         //todo
+        tips: "",
+        labelWidth: 180,
+        labelAlign: "left",
+        labelPosition: "left",
+        inputStyle: "linear",  //输入框样式 linear:线性  face: 面性
+        formBorderColor: "#F9F9F9", //
+        formBorderWidth: 1, //表单边框宽度
+
+        formPadding: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        digitalFormMargin: {},
+        menuPadding: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        menuBtnPadding: {},
+       
+        passwordIcon: {},
+        validCodeIcon: {},
+        btnMargin: {},
+        btnRadius: 0,
+        tipBgColor: "",
+        tipPadding: {},
+        menuTabColor: {},
+        menuShowType: "text",
+        menuBorderWidth: 1,
+        labelShow: "Y",
+        inputPadding: "20",
+        labelFont: {  //表单label字体
+          color: "#333",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        contentFont: {  //表单内容字体
+          color: "#333",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        placeholderFont: {
+          color: "#d4d4d4",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        scanIcon: {},
+        ticketIcon: {},
+        btnIcon: {},
+        digitalCodeIcon: {},
+        digitalBtnMargin: {},
+        digitalCodeLabelWidth: "",
+        digitalCodeRadius: 0,
+        digitalCodeColor: "",
+      }
+    },
+    computed: {
+      ...mapState({
+        brandInfo: state => state.brandInfo
+      }),
+      cardFormStyle(){
+        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`;
+
+        return this.styleObjectToString({
+          // background: this.formBgColor,
+          padding: padding,
+        })
+      },
+      digitalFormStyle(){
+        let padding = `${this.checkValue(this.digitalFormMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      menuBoxStyle(){
+        let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          // background: this.formBgColor,
+          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,
+        })
+      },
+      digitalBtnWrapStyle(){
+        let padding = `${this.checkValue(this.digitalBtnMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      tipBoxStyle(){
+        let padding = `${this.checkValue(this.tipPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          background: this.tipBgColor,
+          padding: padding,
+        })
+      },
+      menuItemBoxStyle(){
+        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
+        })
+      },
+      menuItemStyle(){
+        let styleObj = {
+          color: this.menuTabColor['color'] || '#333',
+          background: this.menuTabColor['bgColor'] || '#fff',
+          fontSize: this.menuTabColor['fontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['fontWeight'] || 'normal',
+        }
+
+        return this.styleObjectToString(styleObj)
+      },
+      menuItemActiveStyle(){
+        let defaultTextColor = '#ff5a39';
+        let styleActiveObj = {
+          color: this.menuTabColor['actColor'] || defaultTextColor,
+          background: this.menuTabColor['actBgColor'] || '#fff',
+          fontSize: this.menuTabColor['actFontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
+        }
+        if(this.menuShowType === 'text'){
+          styleActiveObj['borderBottom'] = `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`;
+        }else{
+        }
+        return this.styleObjectToString(styleActiveObj)
       }
     },
     watch: {
@@ -48,32 +360,66 @@
     },
     created() {
       this.init(this.container);
-
+      this.validImageAPIUrl = this.brandInfo['api_host'] + '/common/v1/valid_code/image/show'
+      this.valid_token = this.$xdUniHelper.randomChar(20);
       //todo
     },
     methods: {
       onJfbLoad(options) {
 
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
-      init(container) {
+      init(value) {
+        this.previewCurrent = getContainerPropsValue(value, "content.previewCurrent", 'ticket');
+        this.tips = getContainerPropsValue(value, "content.tips", '');
+        this.formPadding = getContainerPropsValue(value, "content.formPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.digitalFormMargin = getContainerPropsValue(value, "content.digitalFormMargin", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuPadding = getContainerPropsValue(value, "content.menuPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuBtnPadding = getContainerPropsValue(value, "content.menuBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.labelAlign = getContainerPropsValue(value, "content.labelAlign", 'left');
+        this.labelPosition = getContainerPropsValue(value, "content.labelPosition", 'left');
+        this.labelWidth = getContainerPropsValue(value, "content.labelWidth", '180');
+        this.ticketIcon = getContainerPropsValue(value, "content.ticketIcon", {});
+        this.passwordIcon = getContainerPropsValue(value, "content.passwordIcon", {});
+        this.validCodeIcon = getContainerPropsValue(value, "content.validCodeIcon", {});
+        this.btnMargin = getContainerPropsValue(value, "content.btnMargin", {});
+        this.btnRadius = getContainerPropsValue(value, "content.btnRadius", 0);
+        this.tipBgColor = getContainerPropsValue(value, "content.tipBgColor", '#fff');
+        this.tipPadding = getContainerPropsValue(value, "content.tipPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuTabColor = getContainerPropsValue(value, "content.menuTabColor", {});
+        this.menuShowType = getContainerPropsValue(value, "content.menuShowType", 'text');
+        this.menuBorderWidth = getContainerPropsValue(value, "content.menuBorderWidth", 1);
+        this.inputStyle = getContainerPropsValue(value, "content.inputStyle", 'linear');
+        this.formBorderColor = getContainerPropsValue(value, "content.formBorderColor", '#F9F9F9');
+        this.formBorderWidth = getContainerPropsValue(value, "content.formBorderWidth", '1');
+        this.labelShow = getContainerPropsValue(value, "content.labelShow", true);
+        this.inputPadding = getContainerPropsValue(value, "content.inputPadding", 20);
+        this.labelFont = getContainerPropsValue(value, "content.labelFont", {});
+        this.contentFont = getContainerPropsValue(value, "content.contentFont", {});
+        this.placeholderFont = getContainerPropsValue(value, "content.placeholderFont", {});
+        this.scanIcon = getContainerPropsValue(value, "content.scanIcon", {});
+        this.btnIcon = getContainerPropsValue(value, "content.btnIcon", {});
+        this.digitalCodeIcon = getContainerPropsValue(value, "content.digitalCodeIcon", {});
+        this.digitalBtnMargin = getContainerPropsValue(value, "content.digitalBtnMargin", {});
+        this.digitalCodeLabelWidth = getContainerPropsValue(value, "content.digitalCodeLabelWidth", '100');
+        this.digitalCodeRadius = getContainerPropsValue(value, "content.digitalCodeRadius", '0');
+        this.digitalCodeColor = getContainerPropsValue(value, "content.digitalCodeColor", '#dddddd');
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        console.log(this.digitalCodeRadius, "digitalCodeRadius");
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        if(this.inputStyle === 'face'){
+          this.labelPosition = 'left';
+          this.labelAlign = 'left';
+        }
+        if(this.$configProject.isPreview){
+          this.menuType = this.previewCurrent;
+          this.formRenderKey = Date.now();
+        }
       },
+      
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
       },
@@ -102,10 +448,99 @@
 
 <style scoped lang="less">
   @import "./JfbBaseTfkCardBindLess.less";
+  .align-center{
+    display: flex;
+    align-items: center;
+  }
 
   .jfb-base-tfk-card-bind {
     &__body{
-
+      .form-item {
+        ::v-deep &.uni-forms-item {
+          .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-color: var(--form-border-color) !important;
+            border-width: var(--form-border-width) !important;
+          }
+        }
+        &.face{
+          ::v-deep .uni-forms-item__box{
+            background: #F7F7F7;
+            border-radius: 16rpx;
+            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{
+          ::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);
+          }
+        }
+      }
+      .menu_wrap{
+        .menu_list{
+          display: flex;
+          .menu_item{
+            flex: 1;
+            text-align: center;
+            
+            .menu_inner{
+              display: inline-block;
+              &.button{
+                border-radius: 50rpx;
+              }
+            }
+          }
+        }
+      }
+      .form_valid_code{
+        width: 160rpx;
+        height: 50rpx;
+        background: #DDD;
+        border-radius: 8rpx;
+        overflow: hidden;
+      }
     }
   }
 </style>

package/src/components/JfbBaseTfkCardDetail/Api.js

@@ -6,53 +6,14 @@
  */
 module.exports = [
   {
-    //设置方法名字当别忘记加上【模块名字】：Tfk
-    mapFnName: 'getTfkByIdFilmSquate',
-    title: '获取电影广场列表',
-    path: '/api/account/film/list-film-square',
+    mapFnName: 'getTfkCardDetail',
     isRule: false,
+    title: '获得绑定的卡详情',
+    prefix: 'detal',
+    path: '/card/v1/card-bind/get-bind-card',
     params: {
-      last_key: ['当前页', 'Number', '必选'],
-      page_size: ['每页数量', 'Number', '必选'],
+      card_number: ['卡号', 'String', '必选'],
     },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Tfk
-    mapFnName: 'updateTfkFilmPaiqiDate',
-    title: '更新排期',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-      cinema_id: ['影院id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Tfk
-    mapFnName: 'removeTfkFilmAddress',
-    title: '删除我的配送地址',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
-    disabled: true,
-  },
-  {
-    //设置方法名字当别忘记加上【模块名字】：Tfk
-    mapFnName: 'addTfkFilmcart',
-    title: '添加购物车',
-    path: '/api/account/film/paiqi-date',
-    isRule: false,
-    params: {
-      film_id: ['电影id', 'Number', '必选'],
-    },
-    isConsole: true,
     disabled: true,
   },
 ];