feat(api): 新增多个API接口并优化配置

石广澎

2025-11-17 8771da2ccf6f7c3fd2a8c89a1a0e230c6386db7f

 components/bind-card-activity/bind-card-activity.vue

New file
@@ -0,0 +1,161 @@
<template>
   <view>
      <view class="bg-fff u-br-20 box">
         <image src="/static/bind-card-modal.png" class="top-bg"></image>
         <view class="title">绑卡成功</view>
         <view class="u-flex u-row-center u-m-t-40 u-m-b-30">
            <image class="title-bg" src="/static/title-left.png" mode=""></image>
            <view class="title-txt">已获<text>{{couponList.length}}</text>张优惠券</view>
            <image class="title-bg" src="/static/title-right.png" mode=""></image>
         </view>
         <view v-for="(item,i) in couponList" :key="i" class="coupon">
            <view class="num-box">
               <view v-if="item.discount_type==1"><text class="unit">￥</text><text class="money">{{item.discount / 100}}</text></view>
               <view v-else><text class="money">{{item.item.discount}}</text><text class="unit">折</text></view>
               <view v-if="item.threshold == 0" class="cont">无门槛</view>
               <view v-else class="cont">满{{item.threshold_value / 100}}元使用</view>
            </view>
            <view class="info-box">
               <view class="coupon-name">{{item.name}}</view>
               <view class="coupon-date">有效期至：{{$u.timeFormat(item.out_time, 'yyyy-mm-dd hh:MM')}}</view>
            </view>
         </view>
         <navigator open-type="navigateBack" class="btn">去使用</navigator>
      </view>
      <!-- <image @click="$emit('close')" class="close" src="/static/close-icon.png" mode=""></image> -->
   </view>

</template>

<script>
   export default {
      name: "bind-card-activity",
      props:{
         couponList:{
            type:Array,
            default: []
         }
      },
      data() {
         return {

         };
      }
   }
</script>

<style lang="scss" scoped>
   .box {
      background-image: linear-gradient(180deg, rgba(254, 254, 252, 1) 0%, rgba(253, 242, 225, 1) 100%);
      width: 600rpx;
      padding-bottom: 35rpx;
   }

   .top-bg {
      width: 628rpx;
      height: 385rpx;
      position: absolute;
      top: -225rpx;
      left: -16rpx;
   }

   .title {
      font-size: 36rpx;
      color: #C6774B;
      font-weight: bold;
      width: 337rpx;
      height: 76rpx;
      background-image: url(~@/static/bind-card-title.png);
      background-size: contain;
      text-align: center;
      line-height: 76rpx;
      position: relative;
      left: 141.5rpx;
   }

   .title-bg {
      width: 131rpx;
      height: 21rpx;
   }

   .title-txt {
      font-size: 28rpx;
      color: #B36C44;
   }

   .title-txt text {
      color: #D31F28;
   }

   .coupon {
      width: 508rpx;
      height: 145rpx;
      background-image: url(~@/static/coupon-bg2.png);
      background-size: 100% 100%;
      margin: 0 auto 10rpx;
      display: flex;
   }

   .num-box {
      width: 140rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .unit {
      font-size: 24rpx;
      font-weight: bold;
      color: #D31F28;
   }

   .money {
      font-size: 50rpx;
      font-weight: bold;
      color: #D31F28;
   }

   .cont {
      font-size: 20rpx;
      color: #D31F28;
   }

   .info-box {
      flex: 1;
      padding: 0 15rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .coupon-name {
      font-size: 24rpx;
      color: #333333;
   }

   .coupon-date {
      margin-top: 10rpx;
      font-size: 20rpx;
      color: #999;
   }

   .btn {
      width: 476rpx;
      height: 88rpx;
      border-radius: 44rpx;
      background-color: rgba(238, 68, 82, 1);
      margin: 30rpx auto 0;
      font-size: 36rpx;
      color: #fff;
      font-weight: bold;
      line-height: 88rpx;
      text-align: center;
   }
   .close{
      display: block;
      width: 64rpx;
      height: 64rpx;
      margin: 30rpx auto 0;
   }
</style>