jufubao-base 1.0.197-beta3 → 1.0.197-beta4

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -170,116 +170,130 @@
             v-if="tabIndex === 1 && (cardList && cardList.length > 0)"
             class="jfb-base-card-entry__body-card"
           >
-            <view
-              v-for="(item,index) in cardList"
-              :data-index="item.card_number"
-              :data-idx="index"
-              :data-top="item.top"
-              class="card-list"
-              :key="item.card_number"
-              @click="toDetail(item)"
-              v-if="setCardItemShow(item,index)"
-              :style="{
-                background: item['theme']['color'],
-                backgroundSize: '100%',
-                height: subTabIndex !== 3 ? item.height + 'px' : '300rpx'
-              }"
-            >
-              <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
-                <view class="card-list__title">
-                  <view>
-                    <view>{{item['card_type_name']}}</view>
-                    <view v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
-                  </view>
-                </view>
-                <view class="card-list__content">
-                  <view>
-                    <text>券号：</text>
-                    <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
-                  </view>
-                  <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+            <template v-if="cardType==='default'">
+              <view
+                v-for="(item,index) in cardList"
+                :data-index="item.card_number"
+                :data-idx="index"
+                :data-top="item.top"
+                class="card-list"
+                :key="item.card_number"
+                @click="toDetail(item)"
+                v-if="setCardItemShow(item,index)"
+                :style="{
+                  background: item['theme']['color'],
+                  backgroundSize: '100%',
+                  height: subTabIndex !== 3 ? item.height + 'px' : '300rpx'
+                }"
+              >
+                <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+                  <view class="card-list__title">
                     <view>
-                      <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                      <view>{{item['card_type_name']}}</view>
+                      <view v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
                     </view>
-                    <view>点击查看</view>
                   </view>
-                </view>
-                <view class="card-list__date">
-                  <text>有效期：</text>
-                  <text>{{item.end_time}}</text>
-                </view>
-                <view class="card-list__yue">
-                  <text>余额：</text>
-                  <text>{{item.card_point}} {{ item.unit }}</text>
-                </view>
-                <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
-                  <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
-                </view>
-                <template v-if="subTabIndex === 1">
-                  <view class="card-list__entry" v-if="item.is_login==='N'&&force">
-                    <view
-                      @click.stop="handleBindLogin(item,item['entries'][0])"
-                      :style="{
-                        background: '#fff',
-                        color: item['theme']['color']}"
-                    >
-                      登录
+                  <view class="card-list__content">
+                    <view>
+                      <text>券号：</text>
+                      <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
+                    </view>
+                    <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+                      <view>
+                        <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                      </view>
+                      <view>点击查看</view>
                     </view>
                   </view>
-                  <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
-                    <view
-                      @click.stop="handleBindLogin(item,item['entries'][0])"
-                      :style="{color: item['theme']['color']}"
-                    >进入{{item['entries'][0]['entry_name']}}</view>
+                  <view class="card-list__date">
+                    <text>有效期：</text>
+                    <text>{{item.end_time}}</text>
+                  </view>
+                  <view class="card-list__yue">
+                    <text>余额：</text>
+                    <text>{{item.card_point}} {{ item.unit }}</text>
+                  </view>
+                  <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
+                    <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
                   </view>
-                  <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
-                  <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
-                    <view class="card-list__entrys-title">
-                      <view>可兑换权益</view>
-                      <view @click.stop="toDetail(item, false)">
-                        <text>查看详情</text>
-                        <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                  <template v-if="subTabIndex === 1">
+                    <view class="card-list__entry" v-if="item.is_login==='N'&&force">
+                      <view
+                        @click.stop="handleBindLogin(item,item['entries'][0])"
+                        :style="{
+                          background: '#fff',
+                          color: item['theme']['color']}"
+                      >
+                        登录
                       </view>
                     </view>
-                    <view class="card-list__entrys-list">
-                      <scroll-view scroll-x class="card-list__entrys-scroll">
-                        <view class="card-list__entrys-item">
-                          <view
-                            v-for="(entry,idx) in item.entries"
-                            :key="idx"
-                            @click.stop="handleBindLogin(item, entry)"
-                          >
-                            <view><image :src="entry.image_url"></image></view>
-                            <view>{{entry|cutstr}}</view>
-                            <view>
-                              <text>去兑换</text>
-                              <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                    <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
+                      <view
+                        @click.stop="handleBindLogin(item,item['entries'][0])"
+                        :style="{color: item['theme']['color']}"
+                      >进入{{item['entries'][0]['entry_name']}}</view>
+                    </view>
+                    <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
+                    <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
+                      <view class="card-list__entrys-title">
+                        <view>可兑换权益</view>
+                        <view @click.stop="toDetail(item, false)">
+                          <text>查看详情</text>
+                          <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                        </view>
+                      </view>
+                      <view class="card-list__entrys-list">
+                        <scroll-view scroll-x class="card-list__entrys-scroll">
+                          <view class="card-list__entrys-item">
+                            <view
+                              v-for="(entry,idx) in item.entries"
+                              :key="idx"
+                              @click.stop="handleBindLogin(item, entry)"
+                            >
+                              <view><image :src="entry.image_url"></image></view>
+                              <view>{{entry|cutstr}}</view>
+                              <view>
+                                <text>去兑换</text>
+                                <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                              </view>
                             </view>
                           </view>
-                        </view>
-                      </scroll-view>
+                        </scroll-view>
+                      </view>
                     </view>
+                  </template>
+                  <view class="card-list__entry" v-else-if="subTabIndex===2">
+                    <view
+                      @click.stop="handleBindLogin(item,item['entries'][0])"
+                      :style="{color: item['theme']['color']}"
+                    >票券转换</view>
                   </view>
-                </template>
-                <view class="card-list__entry" v-else-if="subTabIndex===2">
-                  <view
-                    @click.stop="handleBindLogin(item,item['entries'][0])"
-                    :style="{color: item['theme']['color']}"
-                  >票券转换</view>
                 </view>
               </view>
-            </view>
-            <view
-              class="card-content-empty card-list"
-              :data-index="item.card_number"
-              :data-idx="index"
-              :data-top="item.top"
-              v-else
-              :style="{
-                height: item.height + 'px',
-                backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
-              }"
-            ></view>
+              <view
+                class="card-content-empty card-list"
+                :data-index="item.card_number"
+                :data-idx="index"
+                :data-top="item.top"
+                v-else
+                :style="{
+                  height: item.height + 'px',
+                  backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
+                }"
+              ></view>
+            </template>
+            <template v-if="cardType==='style2'">
+
+              <view v-for="(item,index) in cardList" :key="item.card_number">
+                <xd-card-new
+                  :item="item"
+                  :cardBgColor="cardBgColor"
+                  :cardFontColor="cardFontColor"
+                  @onLogin="handleBindLogin(item,item['entries'][0])"
+                  @onClick="toDetail(item)"
+                ></xd-card-new>
+              </view>
+            </template>
           </view>
           <view v-if="tabIndex===2&&(couponList&&couponList.length)">
             <view v-if="couponList.length" class="coupon_list">
@@ -425,6 +439,7 @@
 import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
 import XdButton from "@/components/XdButton/XdButton";
 import XdCardV2 from "@/components/XdCardV2/XdCardV2";
+import XdCardNew from "./XdCardNew.vue"
 import { jfbRootExec } from "@/utils/xd.event";
 import JfbBaseCardEntryMixin from "./JfbBaseCardEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
@@ -447,7 +462,8 @@ export default {
     XdButton,
     XdNoticeBar,
     XdCardV2,
-    CusCouponItem
+    CusCouponItem,
+    XdCardNew,
   },
   mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins, cardListMixins],
   computed: {
@@ -517,6 +533,7 @@ export default {
       showCardList: false,
       showIndex:false,
       isQrCode: false,
+      cardType: 'default',
 
       //活动
       dialogEvent: false,
@@ -557,7 +574,10 @@ export default {
           card_use_rule: '满50减1',
           is_transfering: 'N'
         },
-      ]
+      ],
+
+      cardBgColor: "",
+      cardFontColor: "",
     };
   },
   created() {
@@ -596,6 +616,7 @@ export default {
       this.isShowCode = getContainerPropsValue(container, "content.isShowCode", "Y");
       this.isShowCoupon = getContainerPropsValue(container, "content.isShowCoupon", "N");
       this.bindCard = getContainerPropsValue(container,"content.bindCard","1");
+      this.cardType = getContainerPropsValue(container,"content.cardType","default");
       //'wechat_mini_program|default'
       this.entryGroupId = getContainerPropsValue(container,"content.entryGroupId","default");
       this.couponBtnRadius = getContainerPropsValue(container, "content.couponBtnRadius", 16);
@@ -610,6 +631,8 @@ export default {
       this.couponRadius = getContainerPropsValue(container, "content.couponRadius", 16);
       this.couponLeftBgColor = getContainerPropsValue(container, "content.couponLeftBgColor", "linear-gradient(180deg, #FFA852 0%, #FF5733 100%)");
       this.couponImageUrl = getContainerPropsValue(container, "content.couponImageUrl", "");
+      this.cardBgColor = getContainerPropsValue(container, "content.cardBgColor", "");
+      this.cardFontColor = getContainerPropsValue(container, "content.cardFontColor", "");
       if(this.isPreview) {
         this.tabIndex = this.isShowCoupon==='Y'?2:1;
       }

package/src/components/JfbBaseCardEntry/XdCardNew.vue

@@ -0,0 +1,107 @@
+<!-- #小象风格 -->
+<template>
+  <view class="xd-card-new" :style="{
+    backgroundColor: cardBgColor,
+    color: cardFontColor
+  }" @click="onClick">
+    <view class="card-top">
+      <view class="card_name">{{item.card_type_name}}</view>
+      <view class="card_number">ID：{{ item.card_number }}</view>
+    </view>
+    <view class="card-center">
+      <view><text class="_b">{{item.card_point}}</text>{{item.unit}}</view>
+      <view>
+        <xd-button type="primary" size="small" @click.stop="doLogin">登录</xd-button>
+      </view>
+    </view>
+    <view class="card-bottom">
+      <view>有效期：{{item.end_time}}</view>
+      <view class="see_scope">查看使用范围</view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton.vue"
+  export default {
+    components: {
+      XdButton,
+    },
+    props: {
+      item: {
+        type: Object,
+        default () {
+          return {}
+        }
+      },
+      cardBgColor: {
+        type: String,
+      },
+      cardFontColor: {
+        type: String,
+      }
+    },
+    data(){
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    methods: {
+      doLogin(){
+        this.$emit('onLogin', this.item)
+      },
+      onClick(){
+        this.$emit('onClick')
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .xd-card-new{
+    background-color: #EEE;
+    margin-top: 20rpx;
+    border-radius: 10rpx;
+    padding: 20rpx;
+    .card-top{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 26rpx;
+      .card_name{
+        font-size: 24rpx;
+        font-weight: 400;
+      }
+      .card_number{
+        font-weight: 28rpx;
+        font-weight: 500;
+      }
+    }
+    .card-center{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 40rpx 0 40rpx 0;
+      font-size: 28rpx;
+      font-weight: 400;
+      ._b{
+        font-size: 48rpx;
+        margin-right: 4rpx;
+        font-weight: 700;
+      }
+    }
+    .card-bottom{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 24rpx;
+      font-weight: 500;
+      .see_scope{
+        font-weight: 400;
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseHeader/Attr.js

@@ -46,6 +46,18 @@ export default {
           {label: "不显示", value: "N"}
         ]
       },
+      {
+        label: "定位样式",
+        ele: "xd-radio",
+        valueKey: "searchBoxPosition",
+        value: data.searchBoxPosition || "out",
+        list: [
+          {label: "搜索框外", value: "out"},
+          {label: "搜索框内", value: "in"}
+        ],
+        groupKey:'content',
+        hidden: data.showLocation !== 'Y'
+      },
       {
         label: "是否显示站点信息",
         ele: "xd-radio",
@@ -77,6 +89,108 @@ export default {
         value: data.placeholder || '',
         className: "input80"
       },
+      {
+        label: '搜索框圆角',
+        ele: 'xd-site-select-list',
+        valueKey: 'searchBoxRadius',
+        value: data.searchBoxRadius || 30,
+        groupKey:'content',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+      {
+        label: "放大镜位置",
+        ele: "xd-radio",
+        valueKey: "searchIconPosition",
+        value: data.searchIconPosition || "right",
+        list: [
+          {label: "靠左", value: "left"},
+          {label: "靠右", value: "right"},
+          {label: "隐藏", value: "hidden"}
+        ],
+        groupKey:'content',
+      },
+      {
+        label: "右侧是否展示搜索",
+        ele: "xd-radio",
+        valueKey: "showSearchBtn",
+        value: data.showSearchBtn,
+        list: [
+          {label: "展示", value: "Y"},
+          {label: "隐藏", value: "N"}
+        ],
+        groupKey:'content',
+      },
+      {
+        label: "搜索位置",
+        ele: "xd-radio",
+        valueKey: "searchBtnPosition",
+        value: data.searchBtnPosition || "out",
+        list: [
+          {label: "搜索框内", value: "in"},
+          {label: "搜索框外", value: "out"}
+        ],
+        groupKey:'content',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "右侧搜索按钮文案自定义",
+        ele: "el-input",
+        placeholder: '请输入搜索按钮文案',
+        valueKey: "searchBtnText",
+        groupKey:'content',
+        value: data.searchBtnText || '',
+        className: "input80",
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮背景颜色",
+        ele: "xd-color",
+        placeholder: '请输入搜索按钮背景颜色',
+        valueKey: "searchBtnBgColor",
+        groupKey:'content',
+        value: data.searchBtnBgColor || '',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮文字颜色",
+        ele: "xd-color",
+        placeholder: '请输入搜索按钮文字颜色',
+        valueKey: "searchBtnTextColor",
+        groupKey:'content',
+        value: data.searchBtnTextColor || '',
+        hidden: data.showSearchBtn !== 'Y'
+      },
+      {
+        label: "搜索按钮圆角",
+        ele: 'xd-site-select-list',
+        valueKey: 'searchBtnRadius',
+        value: data.searchBtnRadius || 0,
+        groupKey:'content',
+        placeholder: '请选择内容圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({ action, data }) {
+          XdBus.getParentApi('getOptionsSettingList')({ setting_id: 'edtix_style_radius' })
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+        hidden: data.showSearchBtn !== 'Y'
+      },
       {
         label: '背景颜色:',
         ele: 'xd-color',