jufubao-base 1.0.169-beta1 → 1.0.169-beta3

package/package.json

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

package/src/components/JfbBaseTfkCardDetail/Api.js

@@ -16,4 +16,19 @@ module.exports = [
     },
     disabled: true,
   },
+  {
+    mapFnName: 'getListBaseNewsContent', //自定义方法名字（必选）
+    title: '获取内容',
+    path: '/cms/v1/news-content',
+    isRule: false,
+    params: {
+      scene: ['使用场景', 'String', '选填'],
+      container_id: ['插件ID', 'String', '必填'],
+      page_id: ['页面ID', 'String', '必填'],
+      page_size: ['记录条数', 'Number', '必填', 1],
+      code: ['业务线id', 'String', '选填'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
 ];

package/src/components/JfbBaseTfkCardDetail/Attr.js

@@ -38,10 +38,10 @@ export default {
         value: data.cardImageUrl || {},
         defaultValue: data.cardImageUrl || null,
         slot: true,
-        oneWidth: 350,
-        oneHeight: 137,
+        oneWidth: 355,
+        oneHeight: 170,
         elinputClassName: 'input40',
-        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        tipsformet: '上传格式:@imageType@不超过@size@MB.建议尺寸710*340',
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one',
         uploadType: 'aliyun',
@@ -50,6 +50,230 @@ export default {
         sort: true,
         maxlen: 100,
       },
+      {
+        label: "票券使用规则",
+        ele: 'xd-site-news',
+        valueKey: 'cardRule',
+        groupKey:'content',
+        value: data.cardRule || null,
+        className: 'input70',
+        setting: {
+          config: {
+            sort: true,
+            maxlen: 100,
+            action: 'aliyun',
+            size: 5,
+            tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+            uploadType: 'aliyun',
+            type: ['jpg', 'png', 'jpeg']
+          },
+        },
+        handleCustom({action, data}) {
+          if (data && data.params) {
+            //当一个插件中出现使用内容分类时候需要设置code值，在页面引用时候容器id + code进行拼接
+            //data.params = Object.assign({}, data.params, {code: 'g_test_id'});
+          }
+
+          //获取返回参数(场景类型名称为必填)
+          //获取返回参数(场景类型名称为必填)
+          let loading = { close(){}}
+
+          //获取显示内容
+          if (action === 'screen') {
+            XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_bucket_content_tip'})
+              .then(res => {
+                loading.close();
+                data.cb(res['list'])
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+              });
+
+          }
+
+          //获取返回参数(广告位高度必选项)
+          if (action === 'getNewsInfo') {
+            XdBus.getParentApi('cmsGetPublishEditxContent')(data.params)
+              .then(res => {
+                loading.close()
+                data.cb({list: res.list, selectId: res.selected})
+              })
+              .catch(error => {
+                loading.close()
+                console.error(error);
+              });
+          }
+
+          //获取产品业务线列表
+          if (action === 'namespace') {
+            XdBus.getParentApi('getOptionsNamespaces')({})
+              .then(res => {
+                loading.close()
+                data.cb(res['list'])
+              })
+              .catch(error => {
+                loading.close()
+                console.error(error);
+              });
+          }
+
+          //使用内容分类
+          if (action === 'cmsPublishEditxContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('cmsPublishEditxContent')(data.params)
+              .then(res => {
+                console.log('cmsPublishEditxContent', res)
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置列表
+          if (action === 'getListPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //位置创建
+          if (action === 'addPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('addNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置编辑
+          if (action === 'editPostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('updateNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //位置删除
+          if (action === 'deleltePostion') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('deleteNewsPosition')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //获取广告位内容列表
+          if (action === 'getListContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getListNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //广告内容创建
+          if (action === 'addContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('addNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容编辑
+          if (action === 'editContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('updateNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //广告内容删除
+          if (action === 'deleteContent') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('deleteNewsContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(true)
+              })
+              .catch(error => {
+                console.error(error);
+                loading.close();
+                data.cb(false)
+              });
+          }
+
+          //内容发布
+          if (action === 'publish') {
+            loading = XdBus.getParentApi('loading')({});
+            console.log('publish', data.params)
+            XdBus.getParentApi('cmsPublishContent')(data.params)
+              .then(res => {
+                loading.close();
+                data.cb(res)
+              })
+              .catch(error => {
+                loading.close();
+                console.error(error);
+              });
+          }
+
+          //通知页面进行刷新
+          if (action === 'update') {
+            loading = XdBus.getParentApi('loading')({});
+            XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+            loading.close()
+          }
+        },
+      },
       {
         label: "票券信息样式配置",
         ele: "title",

package/src/components/JfbBaseTfkCardDetail/JfbBaseTfkCardDetail.vue

@@ -31,8 +31,10 @@
                 </view>
                 <view class="_name">{{ cardInfo.card_type_name }}</view>
               </view>
-              <view>
-                <view class="card_deduct">购买其他物品可抵扣：78.21</view>
+              <view v-if="cardInfo.other_card_point && cardInfo.card_point_type !== 1">
+                <view class="card_deduct">
+                  购买其他物品可抵扣：{{ cardInfo.other_card_point }}
+                </view>
               </view>
             </view>
             <view class="card_bottom">
@@ -74,8 +76,10 @@
         </view>
       </view>
       <view v-if="curModule === 'rule'">
-        <view class="rule_wrap" :style="ruleDetailBoxStyle">
-          使用规则
+        <view v-if="cardRule" v-html="cardRule" class="rule_wrap" :style="ruleDetailBoxStyle">
+        </view>
+        <view v-else class="rule_wrap" :style="ruleDetailBoxStyle">
+          使用规则暂无
         </view>
       </view>
       <view v-if="curModule === 'pickup'">
@@ -84,10 +88,14 @@
             <view><xd-font-icon :icon='payPreIcon || "iconsaoma1"' size="54"></xd-font-icon></view>
             <view class="_title">向商家付款</view>
           </view>
-          <view class="barcode"></view>
-          <view class="qrcode" :style="qrcodeBoxStyle"></view>
-          <view class="time_loop">9分59秒后自动刷新</view>
-          <view class="refresh_btn">
+          <view class="barcode">
+            <image :src="cardInfo.barcode" mode="widthFix"></image>
+          </view>
+          <view class="qrcode" :style="qrcodeBoxStyle">
+            <image :src="cardInfo.card_qrcode"></image>
+          </view>
+          <view class="time_loop">{{ timeStr }}后自动刷新</view>
+          <view class="refresh_btn" @click="handleRefresh">
             <xd-font-icon class="btn_icon" :icon="refreshIcon"></xd-font-icon>
             刷新二维码
           </view>
@@ -123,7 +131,13 @@
         card_number: "",
         cardInfo: {},
         businessList: [],
+        timeStr: "",
+        timeer: null,
+        date: 2, //时间底数
+        time: 2, //时间幂指数
+        stopTimer: false, //停止轮询
 
+        cardRule: "",
         showBusinessList: "Y",
         //todo
         cardInfoMargin: {},
@@ -292,6 +306,7 @@
       onJfbLoad(options) {
         this.card_number = options.card_number;
         this.getCardDetail();
+        this.getContent();
       },
       /**
        * @description 监听事件变化
@@ -336,28 +351,83 @@
             is_show_entry_settings: this.showBusinessList,
           }
         }).then(res => {
-          this.cardInfo = res;
+          this.cardInfo = Object.assign({}, res, {
+            other_card_point: res.other_card_point ? this.$xdUniHelper.divisionFloatNumber(res.other_card_point, 100) : 0
+          });
           this.businessList = res.site_entry_settings.map(item => {
             item['image_url'] = getServiceUrl(item.image_url);
             return item;
           })
-
+          if(!this.$configProject.isPreview) {
+            this.setIntval(res.card_qrcode_expire);
+          }else{
+            this.timeStr = "08分10秒";
+          }
         })
       },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+      getContent() {
+        jfbRootExec("getListBaseNewsContent", {
+          vm: this,
+          data: {
+            page_id: this.pageAttr["page_id"], //页面ID
+            container_id: this.containerId, //组件ID
+            limit: 1,
+          },
+        })
+          .then((res) => {
+            if (res.list.length > 0) {
+              if(res.list && res.list.length > 0) {
+                this.cardRule = this.$xdUniHelper.filterHtml(res.list[0].content);
+              }
+              // this.noticeStatus = true;
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      handleRefresh(){
+        clearInterval(this.timeer);
+        this.getCardDetail();
+      },
+      setIntval(time){
+        this.timeer = setInterval(() => {
+          if (time === 0) {
+            this.timeStr = "00分00秒";
+            clearInterval(this.timeer);
+            if (!this.stopTimer) this.getCardDetail();
+          } else {
+            time--;
+            let f = Math.floor(time / 60);
+            f = f < 10 ? "0" + f : f;
+            let m = time % 60;
+            m = m < 10 ? "0" + m : m;
+            this.timeStr = `${f}分${m}秒`;
+          }
+        }, 1000);
+      },
+
+      onJfbUnload(){
+        this.timeStr = ""
+        if (this.timeer) {
+          clearInterval(this.timeer);
+        }
       },
       onJfbShow(options) {
-        console.log('event.onJfbShow', options)
+        this.onJfbLoad(options)
       },
       onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+        this.timeStr = ""
+        if (this.timeer) {
+          clearTimeout(this.timeer);
+        }
       },
       onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+        this.timeStr = ""
+        if (this.timeer) {
+          clearTimeout(this.timeer);
+        }
+        this.$xdUniHelper.navigateBack();
       },
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
@@ -477,16 +547,19 @@
           }
         }
         .barcode{
-          background-color: #EEE;
-          height: 100rpx;
+          width: 100%;
           margin-top: 32rpx;
+          image{
+            width: 100%;
+          }
         }
         .qrcode{
-          background-color: #EEE;
-          height: 100rpx;
-          width: 100rpx;
           margin: 40rpx 24rpx;
           align-self: center;
+          image{
+            width: 100%;
+            height: 100%;
+          }
         }
         .time_loop{
           align-self: center;

package/src/components/JfbBaseTfkCardDetail/Mock.js

@@ -15,11 +15,11 @@ module.exports = {
     card_qrcode_expire: 600,
     unit: "点",
     main_business_code_name: "",
-    other_card_point: 0,
+    other_card_point: 2480,
     is_exchange: "N",
     exchange_card_type_name: "福券",
     exchange_card_point: 86511,
-    card_point_type: 1,
+    card_point_type: 2,
     is_show_qrcode_logo: "Y",
     is_can_unbind: "Y",
     is_can_transfer: "Y",

package/src/components/JfbBaseTfkCardLogin/Attr.js

@@ -259,7 +259,7 @@ export default {
         oneWidth: 350,
         oneHeight: 137,
         elinputClassName: 'input40',
-        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        tipsformet: '上传格式:@imageType@不超过@size@MB.建议尺寸700*274',
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one',
         uploadType: 'aliyun',
@@ -524,6 +524,13 @@ export default {
         size: "small",
         groupKey: "style",
       },
+      {
+        label: "优惠券左侧背景色设置:",
+        ele: "xd-gradient-color",
+        valueKey: "couponLeftBgColor",
+        value: data.couponLeftBgColor || 'linear-gradient(180deg, #FFA852 0%, #FF5733 100%)',
+        groupKey:'style',
+      },
       {
         label: "圆角设置",
         ele: 'xd-site-select-list',

package/src/components/JfbBaseTfkCardLogin/JfbBaseTfkCardLogin.vue

@@ -120,37 +120,15 @@
         <!-- 优惠券 -->
         <template v-else >
           <view v-if="couponList.length" class="coupon_list">
-            <view class="coupon_item" v-for="(item, i) in couponList" :key="i" :style="couponItemBoxStyle">
-              <view class="coupon_left">
-                <view class="_point">200<text style="font-size: 24rpx;">点</text></view>
-                <view class="_rule">满100减40</view>
-              </view>
-              <view class="coupon_right" :style="couponRightItemBoxStyle">
-                <view class="cont_top" :style="{
-                  background: couponTitleBgColor
-                }">众福优选-众选全场通兑次票60档（上海）</view>
-                <view class="cont_main">
-                  <view class="cou_number">券号：923974909815654</view>
-                  <view class="cou_time">有效期：2023-09-09</view>
-                  <view class="cou_point">余额：120</view>
-                  <view class="cou_btn" :style="[couponBtnStyle, {
-                    padding: couponBtnPadding,
-                    borderRadius: couponBtnRadius + 'rpx'
-                  }]">去使用</view>
-                </view>
-                <view class="cont_bottom">
-                  <view class="switch_rule">
-                    <view>使用规则</view>
-                    <view>
-                      <xd-font-icon icon="iconxia_down" size="24"></xd-font-icon>
-                    </view>
-                  </view>
-                  <view class="expand_rule">
-                    这是一段文字规则描述，不知道又多长多长长...
-                  </view>
-                </view>
-              </view>
-            </view>
+            <xd-coupon-item v-for="(item, i) in couponList" :key="i"
+              :couponRadius="couponRadius"
+              :couponImageUrl="couponImageUrl"
+              :couponTitleBgColor="couponTitleBgColor"
+              :couponUseBtnPadding="couponUseBtnPadding"
+              :couponBtnRadius="couponBtnRadius"
+              :couponBtnTextStyle="couponBtnTextStyle"
+              :couponLeftBgColor="couponLeftBgColor"
+            ></xd-coupon-item>
             <view v-if="!hasCouponList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
           </view>
           <view v-else>
@@ -173,12 +151,14 @@
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from '@/common/getServiceUrl'
   import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+  import XdCouponItem from "./XdCouponItem";
   import Color from "color"
   export default {
     name: "JfbBaseTfkCardLogin",
     components: {
       XdFontIcon,
-      XdNoticeBar
+      XdNoticeBar,
+      XdCouponItem,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardLoginMixin
@@ -219,6 +199,7 @@
         couponBtnTextStyle: {}, //优惠券包登录按钮文字背景色设置
         couponUseBtnPadding: {},
         couponBtnRadius: 16,
+        couponLeftBgColor: "",
       }
     },
     computed: {
@@ -411,8 +392,9 @@
         this.couponBtnTextStyle = getContainerPropsValue(value, "content.couponBtnTextStyle", {});
         this.couponUseBtnPadding = getContainerPropsValue(value, "content.couponUseBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
         this.couponBtnRadius = getContainerPropsValue(value, "content.couponBtnRadius", 16);
+        this.couponLeftBgColor = getContainerPropsValue(value, "content.couponLeftBgColor", "");
 
-        console.log(this.couponTitleBgColor, 'couponTitleBgColor')
+        console.log(this.couponLeftBgColor, 'couponLeftBgColor')
 
         if(this.$configProject.isPreview){
           this.menuType = this.previewCurrent;
@@ -587,83 +569,7 @@
             }
           }
         }
-        .coupon_list{
-          .coupon_item{
-            display: flex;
-            margin: 20rpx 0;
-            border-radius: 16rpx;
-            background: #FFFFFF;
-            overflow: hidden;
-            .coupon_left{
-              color: #FFFFFF;
-              width: 170rpx;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              justify-content: center;
-              background: linear-gradient(180deg, #FFA852 0%, #FF5733 100%);
-
-              ._point{
-                font-size: 48rpx;
-              }
-              ._rule{
-                font-size: 24rpx;
-              }
-            }
-            .coupon_right{
-              flex: 1;
-              width: 530rpx;
-              .cont_top{
-                background: rgba(255, 87, 51, 0.1);
-                padding: 8rpx 40rpx;
-                font-size: 24rpx;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-              .cont_main{
-                position: relative;
-                padding: 28rpx 20rpx 28rpx 40rpx;
-                .cou_number{
-                  font-size: 32rpx;
-                  font-weight: bold;
-                }
-                .cou_time{
-                  font-size: 28rpx;
-                  margin: 16rpx 0;
-                }
-                .cou_point{
-                  font-size: 28rpx;
-                }
-                .cou_btn{
-                  position: absolute;
-                  padding: 10rpx 30rpx;
-                  background-color: #ddd;
-                  border-radius: 12rpx;
-                  right: 20rpx;
-                  bottom: 20rpx;
-                }
-              }
-              .cont_bottom{
-                background: #EEEEEE;
-                .switch_rule{
-                  display: flex;
-                  align-items: center;
-                  justify-content: space-between;
-                  padding: 12rpx 40rpx;
-                }
-                .expand_rule{
-                  padding: 12rpx 40rpx;
-                  font-size: 20rpx;
-                  overflow: hidden;
-                  white-space: nowrap;
-                  text-overflow: ellipsis;
-                  background-color: #F5F5F5;
-                }
-              }
-            }
-          }
-        }
+        .coupon_list{}
         .no_more_card{
           text-align: center;
           padding: 20rpx 0;

package/src/components/JfbBaseTfkCardLogin/XdCouponItem.vue

@@ -0,0 +1,219 @@
+<template>
+  <view class="xd-coupon_item" :style="couponItemBoxStyle">
+    <view class="coupon_left" :style="{
+      background: couponLeftBgColor
+    }">
+      <view class="_point">200<text style="font-size: 24rpx;">点</text></view>
+      <view class="_rule">满100减40</view>
+    </view>
+    <view class="coupon_right" :style="couponRightItemBoxStyle">
+      <view class="cont_top" :style="{
+        background: couponTitleBgColor
+      }">众福优选-众选全场通兑次票60档（上海）</view>
+      <view class="cont_main">
+        <view class="cou_number">券号：923974909815654</view>
+        <view class="cou_time">有效期：2023-09-09</view>
+        <view class="cou_point">余额：120</view>
+        <view class="cou_btn" :style="[couponBtnStyle, {
+          padding: couponBtnPadding,
+          borderRadius: couponBtnRadius + 'rpx'
+        }]">去使用</view>
+      </view>
+      <view class="cont_bottom">
+        <view class="switch_rule">
+          <view>使用规则</view>
+          <view>
+            <xd-font-icon icon="iconxia_down" size="24"></xd-font-icon>
+          </view>
+        </view>
+        <view class="expand_rule">
+          这是一段文字规则描述，不知道又多长多长长...
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import getServiceUrl from '@/common/getServiceUrl'
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  export default{
+    name: "XdCouponItem",
+    components: {
+      XdFontIcon
+    },
+    props: {
+      couponRadius: {
+        type: String,
+        default: "16"
+      },
+      couponLeftBgColor: {
+        type: String,
+        default: 'linear-gradient(180deg, #FFA852 0%, #FF5733 100%)'
+      },
+      couponImageUrl: {
+        type: Object | String
+      },
+      couponTitleBgColor: {
+        type: String,
+        default: "rgba(255, 87, 51, 0.1)"
+      },
+      couponUseBtnPadding: {
+        type: Object,
+        default(){
+          return {
+            top: 20,
+            right: 20,
+            bottom: 10,
+            left: 20
+          }
+        },
+      },
+      couponBtnRadius: {
+        type: String,
+        default: "16"
+      },
+      couponBtnTextStyle: {
+        type: Object,
+        default(){
+          return {
+            color: '#fff',
+            bgColor: '#ff5722',
+            fontSize: '30rpx',
+            fontWeight: 'normal'
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        
+      }
+    },
+    computed: {
+      couponItemBoxStyle(){
+        return this.styleObjectToString({
+          borderRadius: this.couponRadius + 'rpx',
+        })
+      },
+      couponBtnPadding(){
+        let padding = `${this.checkValue(this.couponUseBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.left, 20)}rpx`;
+        return padding;
+      },
+      couponBtnStyle(){
+        let styleObj = {
+          color: this.couponBtnTextStyle['color'] || '#333',
+          background: this.couponBtnTextStyle['bgColor'] || '#fff',
+          fontSize: this.couponBtnTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['fontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleObj)
+      },
+      couponRightItemBoxStyle(){
+        let image = {};
+        if(this.cardImageUrl) image = {
+          backgroundImage: `url(${this.getCouponBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        return this.styleObjectToString(image)
+      },
+      getCouponBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.couponImageUrl)) {
+            return getServiceUrl(this.couponImageUrl.url)
+          }
+        }
+        return bg
+      },
+    },
+    methods: {
+      checkValue(value, dValue = 0){
+        if(value === undefined || value === '' || value === null) return dValue;
+        return Number(value || 0);
+      },
+    }
+  }
+
+</script>
+<style lang="less" scoped>
+  .xd-coupon_item{
+    display: flex;
+    margin: 20rpx 0;
+    border-radius: 16rpx;
+    background: #FFFFFF;
+    overflow: hidden;
+    .coupon_left{
+      color: #FFFFFF;
+      width: 170rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      ._point{
+        font-size: 48rpx;
+      }
+      ._rule{
+        font-size: 24rpx;
+      }
+    }
+    .coupon_right{
+      flex: 1;
+      width: 530rpx;
+      .cont_top{
+        background: rgba(255, 87, 51, 0.1);
+        padding: 8rpx 40rpx;
+        font-size: 24rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .cont_main{
+        position: relative;
+        padding: 28rpx 20rpx 28rpx 40rpx;
+        .cou_number{
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+        .cou_time{
+          font-size: 28rpx;
+          margin: 16rpx 0;
+        }
+        .cou_point{
+          font-size: 28rpx;
+        }
+        .cou_btn{
+          position: absolute;
+          padding: 10rpx 30rpx;
+          background-color: #ddd;
+          border-radius: 12rpx;
+          right: 20rpx;
+          bottom: 20rpx;
+        }
+      }
+      .cont_bottom{
+        background: #EEEEEE;
+        .switch_rule{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12rpx 40rpx;
+        }
+        .expand_rule{
+          padding: 12rpx 40rpx;
+          font-size: 20rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+</style>