jufubao-base 1.0.168 → 1.0.169-beta2

package/src/components/JfbBaseTfkCardDetail/JfbBaseTfkCardDetail.vue

@@ -14,30 +14,281 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-tfk-card-detail__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view v-if="curModule === 'main'">
+        <view class="card_wrap" :style="cardWrapBoxStyle">
+          <view class="ticket_card" :style="cardBoxStyle">
+            <view class="card_top">
+              <view class="card_point_name">
+                <view class="_point">
+                  <xd-unit
+                    :unitFontSize="24"
+                    :fontSize="40"
+                    :price="cardInfo.card_point"
+                    :isOld="false"
+                    :colorNew="cardFontColor"
+                    :unit="cardInfo.unit || ''"
+                  ></xd-unit>
+                </view>
+                <view class="_name">{{ cardInfo.card_type_name }}</view>
+              </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">
+              <view>ID：{{ cardInfo.card_number}}</view>
+              <view>{{ cardInfo.end_time }}到期</view>
+            </view>
+          </view>
+        </view>
+        <view class="business_login" :style="businessWrapBox">
+          <view v-if="showBusinessList === 'Y'">
+            <view class="bus_title">进入业务板块</view>
+            <view class="bus_list">
+              <view class="bus_item" v-for="(item, i) in businessList" :key="i"
+                :style="businessItemBox">
+                <view class="bus_img">
+                  <image :src="item.image_url" />
+                </view>
+                <view class="bus_name">{{item.entry_name}}</view>
+              </view>
+            </view>
+          </view>
+          <view v-else>
+            <xd-button type="primary">立即使用</xd-button>
+          </view>
+        </view>
+        <view class="list_col_wrap" :style="listColWrapBoxStyle">
+          <view class="list_item" :style="listColItemStyle">
+            <view class="list_title">使用规则</view>
+            <view class="list_icon">
+              <xd-font-icon icon="iconxiangyou_xian" size="24"></xd-font-icon>
+            </view>
+          </view>
+          <view class="list_item" :style="listColItemStyle">
+            <view class="list_title">提货码</view>
+            <view class="list_icon">
+              <xd-font-icon icon="iconxiangyou_xian" size="24"></xd-font-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view v-if="curModule === 'rule'">
+        <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'">
+        <view class="code_wrap" :style="codeDetailBoxStyle">
+          <view class="code_title">
+            <view><xd-font-icon :icon='payPreIcon || "iconsaoma1"' size="54"></xd-font-icon></view>
+            <view class="_title">向商家付款</view>
+          </view>
+          <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>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdUnit from "@/components/XdUnit/XdUnit";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardDetailMixin from "./JfbBaseTfkCardDetailMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from '@/common/getServiceUrl'
   export default {
     name: "JfbBaseTfkCardDetail",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdButton,
+      XdUnit,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardDetailMixin
     ],
     data() {
       return {
+        curModule: "main",
+        card_number: "",
+        cardInfo: {},
+        businessList: [],
+        timeStr: "",
+        timeer: null,
+        date: 2, //时间底数
+        time: 2, //时间幂指数
+        stopTimer: false, //停止轮询
 
+        cardRule: "",
+        showBusinessList: "Y",
         //todo
+        cardInfoMargin: {},
+        cardInfoPadding: {},
+        cardImageUrl: "",
+        cardHeight: 260,
+        cardRadius: 10,
+        bussPadding: {},
+        bussMargin: {},
+        bussTempMargin: {},
+        bussTempBgColor: "",
+        listColMargin: {},
+        listColPadding: {},
+        listColSpace: 0,
+        cardFontColor: "",
+        ruleDetailMargin: {},
+        ruleDetailPadding: {},
+        ruleDetailBgColor: "",
+        codeDetailMargin: {},
+        codeDetailPadding: {},
+        codeDetailBgColor: "",
+        qrcodeWidth: 300,
+        payPreIcon: "",
+        refreshIcon: "",
+        bussWidth: 100,
+      }
+    },
+    computed: {
+      cardWrapBoxStyle(){
+        let padding = `${this.checkValue(this.cardInfoMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoMargin.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      businessWrapBox(){
+        let margin = `${this.checkValue(this.bussTempMargin.top, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussTempMargin.right, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussTempMargin.bottom, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussTempMargin.left, 20)}rpx`;
+
+        let padding = `${this.checkValue(this.bussPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.bussPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.bussPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.bussPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          margin: margin,
+          padding: padding,
+          backgroundColor: this.bussTempBgColor,
+        })
+      },
+
+      businessItemBox(){
+        let margin = `${this.checkValue(this.bussMargin.top, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussMargin.right, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussMargin.bottom, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.bussMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          margin: margin,
+          width: this.bussWidth + 'rpx'
+        })
+      },
+      cardBoxStyle(){
+        let style = {};
+        if(this.cardImageUrl) style = {
+          backgroundImage: `url(${this.getCardBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        let padding = `${this.checkValue(this.cardInfoPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.cardInfoPadding.left, 20)}rpx`;
+        style = Object.assign(style, {
+          padding: padding,
+          height: this.cardHeight + 'rpx',
+          borderRadius: this.cardRadius + 'rpx',
+          color: this.cardFontColor,
+        })
+        return this.styleObjectToString(style)
+      },
+      getCardBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.cardImageUrl)) {
+            return getServiceUrl(this.cardImageUrl.url)
+          }
+        }
+        return bg
+      },
+      listColWrapBoxStyle(){
+        let margin = `${this.checkValue(this.listColMargin.top, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.listColMargin.right, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.listColMargin.bottom, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.listColMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          margin: margin,
+        })
+      },
+      listColItemStyle(){
+        let padding = `${this.checkValue(this.listColPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.listColPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.listColPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.listColPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding,
+          marginBottom: this.listColSpace + 'rpx',
+        })
+      },
+      ruleDetailBoxStyle(){
+        let padding = `${this.checkValue(this.ruleDetailPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.ruleDetailPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.ruleDetailPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.ruleDetailPadding.left, 20)}rpx`;
+        let margin = `${this.checkValue(this.ruleDetailMargin.top, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.ruleDetailMargin.right, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.ruleDetailMargin.bottom, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.ruleDetailMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          margin: margin,
+          padding: padding,
+          backgroundColor: this.ruleDetailBgColor,
+        })
+      },
+      codeDetailBoxStyle(){
+        let padding = `${this.checkValue(this.codeDetailPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.codeDetailPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.codeDetailPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.codeDetailPadding.left, 20)}rpx`;
+        let margin = `${this.checkValue(this.codeDetailMargin.top, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.codeDetailMargin.right, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.codeDetailMargin.bottom, 20)}rpx`;
+        margin = `${margin} ${this.checkValue(this.codeDetailMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          margin: margin,
+          padding: padding,
+          backgroundColor: this.codeDetailBgColor,
+        })
+      },
+      qrcodeBoxStyle(){
+
+        return this.styleObjectToString({
+          width: this.qrcodeWidth + 'rpx',
+          height: this.qrcodeWidth + 'rpx',
+        })
       }
     },
     watch: {
@@ -53,41 +304,130 @@
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.card_number = options.card_number;
+        this.getCardDetail();
+        this.getContent();
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
-      init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+      init(value) {
+        this.previewCurrent = getContainerPropsValue(value, 'content.previewCurrent', "main");
+        this.showBusinessList = getContainerPropsValue(value, 'content.showBusinessList', "Y");
+        this.cardInfoMargin = getContainerPropsValue(value, 'content.cardInfoMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.cardInfoPadding = getContainerPropsValue(value, 'content.cardInfoPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.cardImageUrl = getContainerPropsValue(value, 'content.cardImageUrl', '');
+        this.cardHeight = getContainerPropsValue(value, 'content.cardHeight', 260);
+        this.cardRadius = getContainerPropsValue(value, 'content.cardRadius', 16);
+        this.bussPadding = getContainerPropsValue(value, 'content.bussPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.bussMargin = getContainerPropsValue(value, 'content.bussMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.bussTempMargin = getContainerPropsValue(value, 'content.bussTempMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.bussTempBgColor = getContainerPropsValue(value, 'content.bussTempBgColor', '#fff');
+        this.listColMargin = getContainerPropsValue(value, 'content.listColMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.listColPadding = getContainerPropsValue(value, 'content.listColPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.listColSpace = getContainerPropsValue(value, 'content.listColSpace', 10);
+        this.cardFontColor = getContainerPropsValue(value, 'content.cardFontColor', '#333');
+        this.ruleDetailMargin = getContainerPropsValue(value, 'content.ruleDetailMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.ruleDetailPadding = getContainerPropsValue(value, 'content.ruleDetailPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.ruleDetailBgColor = getContainerPropsValue(value, 'content.ruleDetailBgColor', '#fff');
+        this.codeDetailMargin = getContainerPropsValue(value, 'content.codeDetailMargin', {top: 20, left: 20, right: 20, bottom: 20});
+        this.codeDetailPadding = getContainerPropsValue(value, 'content.codeDetailPadding', {top: 20, left: 20, right: 20, bottom: 20});
+        this.codeDetailBgColor = getContainerPropsValue(value, 'content.codeDetailBgColor', '#fff');
+        this.qrcodeWidth = getContainerPropsValue(value, 'content.qrcodeWidth', 300);
+        this.payPreIcon = getContainerPropsValue(value, 'content.payPreIcon', '');
+        this.refreshIcon = getContainerPropsValue(value, 'content.refreshIcon', '');
+        this.bussWidth = getContainerPropsValue(value, 'content.bussWidth', 100);
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        if(this.$configProject.isPreview){
+          this.curModule = this.previewCurrent;
+        }
       },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+      getCardDetail(){
+        jfbRootExec("getTfkCardDetail", {
+          vm: this,
+          data: {
+            card_number: this.card_number,
+            is_show_entry_settings: this.showBusinessList,
+          }
+        }).then(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秒";
+          }
+        })
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', 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);
+          });
+      },
+      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)
@@ -105,7 +445,141 @@
 
   .jfb-base-tfk-card-detail {
     &__body{
+      .ticket_card{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .card_top{
+          display: flex;
+          flex-direction: column;
+          .card_point_name{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            ._point{
+              font-size: 40rpx;
+              font-weight: bold;
+              ._unit{
+                font-size: 24rpx;
+                margin-left: 4rpx;
+              }
+            }
+            ._name{
+              font-size: 26rpx;
+            }
+          }
+          .card_deduct{
+            font-size: 26rpx;
+            background-color: rgba(255, 255, 255, 0.2);
+            display: inline-block;
+            padding: 8rpx 16rpx;
+            border-radius: 8rpx;
+          }
+        }
+        .card_bottom{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          font-weight: 400;
+        }
+      }
+      .business_login{
+        .bus_title{
+          text-align: center;
+        }
+        .bus_list{
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: 24rpx;
+          .bus_item{
+            margin: 0 10rpx;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .bus_img{
+              width: 76rpx;
+              height: 76rpx;
+              background-color: #DDD;
+              border-radius: 76rpx;
+              overflow: hidden;
+              image{
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .bus_name{
+              margin-top: 12rpx;
+              font-size: 24rpx;
+              color: #242424;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              width: 100%;
+              text-align: center;
+            }
+          }
+        }
+      }
+      .list_col_wrap{
+        margin: 40rpx 0;
+
+        .list_item{
+          display: flex;
+          align-items: center;
+          padding: 10rpx 24rpx;
+          background-color: #FFFFFF;
+          .list_title{
+            flex: 1;
+            font-size: 24rpx;
+            color: #333333;
+          }
+        }
+      }
 
+      .code_wrap{
+        display: flex;
+        flex-direction: column;
+        .code_title{
+          display: flex;
+          align-items: center;
+          ._title{
+            margin-left: 30rpx;
+          }
+        }
+        .barcode{
+          width: 100%;
+          margin-top: 32rpx;
+          image{
+            width: 100%;
+          }
+        }
+        .qrcode{
+          margin: 40rpx 24rpx;
+          align-self: center;
+          image{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .time_loop{
+          align-self: center;
+        }
+        .refresh_btn{
+          align-self: center;
+          border: 1px solid #999999;
+          border-radius: 50rpx;
+          width: 300rpx;
+          height: 80rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-top: 40rpx;
+          color: #999999;
+          .btn_icon{
+            margin-right: 16rpx;
+          }
+        }
+      }
     }
   }
 </style>