jufubao-base 1.0.169 → 1.0.171

package/src/components/JfbBaseTfkCardLogin/Mock.js

@@ -1,13 +1,193 @@
-'use strict';
+"use strict";
 
 module.exports = {
-  
-  getTfkByIdFilmSquate:{},
-  
-  updateTfkFilmPaiqiDate:{},
-  
-  removeTfkFilmAddress:{},
-  
-  addTfkFilmcart:{},
-  
-}
+  getTfkListCardBind: {
+    list: [
+      {
+        card_number: "171003500000707",
+        card_point: 1000,
+        card_type: "2146",
+        card_type_name: "一对一次卡",
+        unit: "次",
+        end_time: "2025-12-31",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "Y",
+        card_point_type: 1,
+        business_codes: [
+          "cake",
+          "movie",
+          "video",
+          "market",
+          "book",
+          "health",
+          "travel",
+          "play",
+          "small",
+          "supermarket",
+          "food"
+        ],
+        is_login: "Y",
+        consume_type: "1",
+        card_use_rule: "",
+        is_transfering: "Y"
+      },
+      {
+        card_number: "101001000008485",
+        card_point: 87385,
+        card_type: "27",
+        card_type_name: "聚福宝福",
+        unit: "点",
+        end_time: "2025-05-30",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: ["cake", "movie", "video", "market", "book"],
+        is_login: "N",
+        consume_type: "1",
+        card_use_rule: "",
+        is_transfering: "N"
+      },
+      {
+        card_number: "171003500000710",
+        card_point: 1000,
+        card_type: "2146",
+        card_type_name: "一对一次卡（2d抵扣45，3d2张兑换一张）",
+        unit: "次",
+        end_time: "2025-12-31",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "Y",
+        card_point_type: 1,
+        business_codes: [
+          "cake",
+          "movie",
+          "video",
+          "market",
+          "book",
+          "health",
+          "travel",
+          "play",
+          "small",
+          "supermarket",
+          "food"
+        ],
+        is_login: "N",
+        consume_type: "1",
+        card_use_rule: "",
+        is_transfering: "N"
+      },
+      {
+        card_number: "101001000007027",
+        card_point: 2356,
+        card_type: "2151",
+        card_type_name: "A加盟商福卡（12位）",
+        unit: "点",
+        end_time: "2025-06-30",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: [
+          "cake",
+          "movie",
+          "video",
+          "market",
+          "book",
+          "food",
+          "event12",
+          "event18",
+          "event26",
+          "event29",
+          "event32"
+        ],
+        is_login: "N",
+        consume_type: "1",
+        card_use_rule: "",
+        is_transfering: "N"
+      },
+      {
+        card_number: "10001000001170",
+        card_point: 5000,
+        card_type: "0",
+        card_type_name: "满50减50",
+        show_name: "满50减50",
+        unit: "点",
+        end_time: "2024-11-23",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: ["cake", "movie", "video", "market", "book"],
+        is_login: "N",
+        consume_type: "2",
+        card_use_rule: "满50减0",
+        is_transfering: "N"
+      },
+      {
+        card_number: "10001000001169",
+        card_point: 5000,
+        card_type: "0",
+        card_type_name: "满50减50",
+        show_name: "满50减50",
+        unit: "点",
+        end_time: "2024-11-23",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: ["cake", "movie", "video", "market", "book"],
+        is_login: "N",
+        consume_type: "2",
+        card_use_rule: "满50减0",
+        is_transfering: "N"
+      },
+      {
+        card_number: "10001000001168",
+        card_point: 5000,
+        card_type: "0",
+        card_type_name: "满50减50",
+        show_name: "满50减50",
+        unit: "点",
+        end_time: "2024-11-23",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: ["cake", "movie", "video", "market", "book"],
+        is_login: "N",
+        consume_type: "2",
+        card_use_rule: "满50减0",
+        is_transfering: "N"
+      },
+      {
+        card_number: "10001000001167",
+        card_point: 5000,
+        card_type: "0",
+        card_type_name: "满50减50",
+        show_name: "满50减50",
+        unit: "点",
+        end_time: "2024-11-23",
+        is_valid: "Y",
+        main_business_code_name: "",
+        other_card_point: 0,
+        is_exchange: "N",
+        card_point_type: 1,
+        business_codes: ["cake", "movie", "video", "market", "book"],
+        is_login: "N",
+        consume_type: "2",
+        card_use_rule: "满50减0",
+        is_transfering: "N"
+      },
+    ],
+    request_id: "413e08844fe1d1af"
+  }
+};

package/src/components/JfbBaseTfkCardLogin/XdCouponItem.vue

@@ -0,0 +1,275 @@
+<template>
+  <view class="xd-coupon_item" :style="couponItemBoxStyle"
+    @click="toDetail">
+    <view class="coupon_left" :style="{
+      background: couponLeftBgColor
+    }">
+      <view class="_point">
+        <xd-unit
+          :unitFontSize="24"
+          :fontSize="48"
+          :price="item.card_point"
+          :isOld="false"
+          :unit="item.unit || ''"
+          :colorNew="'#ffffff'"
+        ></xd-unit>
+        <!-- <text style="font-size: 24rpx;">{{ item.unit }}</text> -->
+      </view>
+      <view class="_rule">{{ item.show_name }}</view>
+    </view>
+    <view class="coupon_right" :style="couponRightItemBoxStyle">
+      <view class="cont_top" :style="{
+        background: couponTitleBgColor
+      }">{{ item.card_type_name }}</view>
+      <view class="cont_main">
+        <view class="cou_number">券号：{{ item.card_number }}</view>
+        <view class="cou_time">有效期：{{ item.end_time }}</view>
+        <view class="cou_point">
+          余额：
+          <xd-unit
+            :unitFontSize="24"
+            :fontSize="28"
+            :price="item.card_point"
+            :isOld="false"
+            :unit="item.unit || ''"
+            :colorNew="'#333333'"
+          ></xd-unit>
+        </view>
+        <view class="cou_btn"
+          :style="[
+            item.is_login === 'Y' ? couponBtnActiveStyle : couponBtnStyle,
+            {
+              padding: couponBtnPadding,
+              borderRadius: couponBtnRadius + 'rpx'
+            }
+          ]"
+          @click.stop="goToUseCoupon"
+        >{{item.is_login === 'Y' ? '已登录' : '去使用'}}</view>
+      </view>
+      <view class="cont_bottom">
+        <view class="switch_rule" @click.stop="switchRule">
+          <view>使用规则</view>
+          <view>
+            <xd-font-icon v-if="!expand" icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-else icon="iconshang_up" size="24"></xd-font-icon>
+          </view>
+        </view>
+        <view v-if="expand" class="expand_rule">
+          {{ item.card_use_rule }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import getServiceUrl from '@/common/getServiceUrl'
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  export default{
+    name: "XdCouponItem",
+    components: {
+      XdFontIcon,
+      XdUnit
+    },
+    props: {
+      item:{
+        type: Object,
+      },
+      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 {
+        expand: false,
+      }
+    },
+    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)
+      },
+      couponBtnActiveStyle(){
+        return this.styleObjectToString({
+          color: this.couponBtnTextStyle['actColor'] || '#fff',
+          background: this.couponBtnTextStyle['actBgColor'] || '#ff5722',
+          fontSize: this.couponBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['actFontWeight'] || 'normal',
+        })
+      },
+      couponRightItemBoxStyle(){
+        let image = {};
+        if(this.couponImageUrl) image = {
+          backgroundImage: `url(${this.getCouponBgImage})`,
+          backgroundSize: 'cover',
+          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: {
+      switchRule(){
+        this.expand = !this.expand;
+      },
+      toDetail(){
+        this.$emit('toDetail', this.item);
+      },
+      goToUseCoupon(){
+        this.$emit('useCoupon', this.item);
+      },
+      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;
+        color: #333333;
+        .cou_number{
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+        .cou_time{
+          font-size: 28rpx;
+          margin: 16rpx 0;
+        }
+        .cou_point{
+          font-size: 28rpx;
+          display: flex;
+          align-items: center;
+        }
+        .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;
+          font-size: 24rpx;
+          color: #666666;
+        }
+        .expand_rule{
+          padding: 12rpx 40rpx;
+          font-size: 20rpx;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+</style>