jufubao-base 1.0.168 → 1.0.169-beta2

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>