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

石广澎

2025-11-17 8771da2ccf6f7c3fd2a8c89a1a0e230c6386db7f

 pages/pay/shuaKa/shuaKa.vue

New file
@@ -0,0 +1,673 @@
<template>
   <view>
      <view :class="join?'page1':'page'">
         <image class="logo1" :src="bankCardStyle.logo"></image>
         <view class="douyu-txt page-title">刷<text>{{info.bankCardName}}</text></view>
         <view class="douyu-txt page-title">最高可得{{info.totalDiscount/100}}元礼包</view>
         <view class="detils-title">刷{{info.bankCardName}}，累积笔数获礼包 <navigator class="detail"
               url="/pages/pay/shuaKa/introduce">详情
            </navigator>
         </view>
         <view v-if="join" class="step-box">
            <view class="step">
               <view class="step-title">本活动剩余<text>{{diffDay}}</text>天</view>
               <scroll-view :scroll-into-view="`step-item-${current-1}`" class="step-item-box"
                  scroll-with-animation scroll-x>
                  <view :id="`step-item-${i}`" class="jmy-flex step-item" v-for="(item,i) in milepost" :key="i">
                     <view @click="stepClick(i)" class="jmy-text-center">
                        <image class="step-icon"
                           :src="item.lackBrushCount>0?'/static/shuaka/pay-by-card-step.png':'/static/shuaka/pay-by-card-step-act.png'">
                        </image>
                        <view :class="['step-item-title',{'step-item-title-act':current==i}]">
                           {{item.nodeName}}
                        </view>
                     </view>
                     <view v-if="item.lackBrushCount==0&&item.curt&&i<milepost.length-1"
                        class="step-line step-line-cur"></view>
                     <view v-else-if="item.lackBrushCount>0&&i<milepost.length-1"
                        class="step-line step-line-next">
                     </view>
                     <view v-else-if="item.lackBrushCount==0&&i<milepost.length-1" class="step-line"></view>
                  </view>
               </scroll-view>
            </view>
            <swiper @change="bindchange" next-margin="62rpx" style="height: calc(100vh - 600rpx);" :current="current">
               <swiper-item v-for="(post,i) in milepost" :key="i">
                  <scroll-view scroll-y="true" style="height: calc(100% - 40rpx);">
                     <view class="coupon-box">
                        <view class="jmy-flex coupon-box-title">
                           <image src="/static/shuaka/coupon-title-left.png"></image>
                           <view v-if="post.lackBrushCount==0">你已获得以下优惠券</view>
                           <view v-else>
                              <view v-if="post.nodeNumOfMin-post.lackBrushCount">
                                 已刷{{post.nodeNumOfMin-post.lackBrushCount}}笔</view>
                              <view>再刷<text style="color: #D31F28;">{{post.lackBrushCount}}</text>笔可解锁以下优惠券
                              </view>
                           </view>

                           <image src="/static/shuaka/coupon-title-right.png"></image>
                        </view>
                        <view v-for="(item,i) in post.lackBrushCount==0?post.coupIdsMap:post.coupIds" :key="i"
                           :class="['coupon',post.lackBrushCount==0?'coupon-get':'coupon-lock' ]">
                           <view class="num">
                              <view>
                                 <text class="unit">￥</text>
                                 <text class="money">{{parseFloat(item.discount/100)}}</text>
                              </view>
                              <view class="condition">
                                 满{{parseFloat((item.threshold_value||item.thresholdValue)/100)}}元使用
                              </view>
                           </view>
                           <view class="info">
                              <view class="title">{{item.name}}</view>
                              <view v-if="item.validityDay" class="validity">
                                 有效期：领取后{{item.validityDay}}天</view>
                              <view v-else class="validity">
                                 有效期至：{{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}
                              </view>
                           </view>
                           <image v-if="post.lackBrushCount!=0" class="lock-icon"
                              src="/static/shuaka/pay-by-card-lock.png" mode=""></image>
                        </view>
                     </view>
                  </scroll-view>
               </swiper-item>
            </swiper>

            <!-- <view @click="checkNotice" :class="['notice',{'check':notice}]">通知我参与活动进展</view> -->
         </view>
         <image v-else @click="joinActivity" class="btn" src="/static/shuaka/pay-by-card-btn.png"></image>
      </view>
      <u-popup :show="popup" @close="popup=false;getDto()" mode="center" bgColor="transparent">
         <view class="popup">
            <view class="popup-title">恭喜获得</view>
            <view class="jmy-flex popup-sub-title">
               <image src="/static/shuaka/coupon-title-left.png"></image>
               <view>已获<text>{{couponIds.length}}</text>张优惠券</view>
               <image src="/static/shuaka/coupon-title-right.png"></image>
            </view>
            <scroll-view class="scroll-view" scroll-y>
               <view v-for="(item,i) in couponIds" :key="i" class="coupon1">
                  <view class="num">
                     <view>
                        <text class="unit">￥</text>
                        <text class="money">{{parseFloat(item.discount/100)}}</text>
                     </view>
                     <view class="condition">满{{parseFloat(item.threshold_value/100)}}元使用</view>
                  </view>
                  <view class="info">
                     <view class="title">{{item.name}}</view>
                     <view v-if="item.validityDay" class="validity">
                        有效期：领取后{{item.validityDay}}天</view>
                     <view v-else class="validity">
                        有效期至：{{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}</view>
                  </view>
               </view>
            </scroll-view>
            <navigator class="popup-btn jmy-flex" url="/pages/myCard/myCard">查看卡包</navigator>
         </view>
         <image @click="popup=false;getDto()" class="popup-close" src="/static/shuaka/popup-close.png"></image>
      </u-popup>
   </view>
</template>

<script>
   import {
      bankCardStyle,
   } from '@/common/api/index'
   import {
      activityInfo,
      signActivity,
      myBrushDetail
   } from '@/common/api/shuaka'
   export default {
      data() {
         return {
            brushCount: 0,
            bankCardStyle: {
               color: '',
               logo: ''
            }, //银行卡风格
            current: 0,
            join: false,
            notice: true,
            popup: false,
            couponList: [],
            couponIds: [],
            info: {
               bankCardName: '',
               totalDiscount: 0,
               milepost: []
            },
            milepost: [],
            diffDay: 0,
         };
      },
      onLoad() {
         //获取银行卡风格配置
         bankCardStyle().then(res => {
            try {
               res.logo = this.$utils.getGoodsImg(res.logo, '2')
            } catch (e) {
               //TODO handle the exception
               res.logo = ''
            }
            this.bankCardStyle = res
            // console.log(this.bankCardStyle);
         }).catch(() => {
            uni.hideLoading()
         })
         /* 活动详情 */
         activityInfo().then(res => {
            this.info = res
         })
         this.getDto()
      },
      methods: {
         getDto() {
            uni.showLoading()
            /* 参与信息 */
            myBrushDetail().then(res => {
               uni.hideLoading()
               if (res) {
                  this.diffDay = this.$utils.getDiffDay(res.taskStartTime, res.taskEndTime)
                  this.join = true
                  this.brushCount = Number(res.brushCount)
                  res.milePost.map((item, i) => {
                     if (item.lackBrushCount == 0) {
                        this.current = i
                     }
                  })
                  res.milePost[this.current].curt = true
                  if (res.milePost[this.current].lackBrushCount == 0) {
                     this.couponList = res.milePost[this.current].coupIdsMap
                  } else {
                     this.couponList = res.milePost[this.current].coupIds
                  }

                  this.milepost = res.milePost
               }
            }).catch(() => {
               uni.hideLoading()
            })
         },
         stepClick(i) {
            const cur = this.milepost[i]
            if (cur.lackBrushCount == 0) {
               this.couponList = cur.coupIdsMap
            } else {
               this.couponList = cur.coupIds
            }
            this.current = i
         },
         bindchange({
            detail: {
               current
            }
         }) {
            this.current = current
         },
         joinActivity() {
            signActivity().then(res => {
               if (res.isOk) {
                  if (this.couponIds) {
                     this.couponIds = res.couponIds
                     this.popup = true
                  } else {
                     this.join = true
                     uni.showToast({
                        icon: 'success',
                        title: '参与成功'
                     })
                  }
               } else {
                  uni.showToast({
                     icon: 'none',
                     title: res.reason
                  })
               }
            })
         },
         checkNotice() {
            this.notice = !this.notice
         },
         closePopup() {
            this.popup = !this.popup
         },
      }
   }
</script>

<style lang="scss" scoped>
   @font-face {
      font-family: "DOUYU";
      src: url("https://zhkj.jinmingyuan.com:8443/sftpxcx/jrstq/font/DOUYU.ttf");
   }

   .jmy-flex {
      display: flex;
      align-items: center;
   }

   .jmy-flex-nowrap {
      flex-wrap: nowrap;
   }

   .jmy-text-center {
      text-align: center;
   }


   .douyu-txt {
      font-family: "DOUYU";
   }

   .page {
      min-height: 100vh;
      background-image: url('~@/static/shuaka/pay-by-card-bg.png');
      background-position: center top;
      background-color: #FDEDDE;
      background-size: 100% auto;
      background-repeat: no-repeat;
   }

   .page1 {
      min-height: 100vh;
      background-image: url('~@/static/shuaka/pay-by-card-bg-top.png');
      background-position: center top;
      background-color: #F8F9F9;
      background-size: 100% auto;
      background-repeat: no-repeat;
   }

   .logo1 {
      box-sizing: border-box;
      padding: 10rpx;
      width: 90rpx;
      height: 90rpx;
      background-color: #ffffff;
      border-radius: 45rpx;
      margin: 30rpx 30rpx 0;
   }

   .page-title {
      font-size: 60rpx;
      font-weight: 400;
      color: #6670E7;
      text-align: center;
      line-height: 1.3;
   }

   .page-title text {
      color: #FB5B4A;
   }

   .detils-title {
      width: 590rpx;
      height: 65rpx;
      line-height: 65rpx;
      margin: 20rpx auto;
      background-image: url('~@/static/shuaka/pay-by-card-dto-ttitle-bg.png');
      background-size: cover;
      color: #6670E7;
      font-size: 25rpx;
      font-weight: 400;
      text-align: center;
   }

   .detail {
      display: inline-block;
      font-size: 28rpx;
      color: #FB5B4A;
      margin-left: 30rpx;
   }

   .detail::after {
      content: '';
      display: inline-block;
      width: 10rpx;
      height: 10rpx;
      border-top: 1rpx solid #FB5B4A;
      border-right: 1rpx solid #FB5B4A;
      transform: rotate(45deg);
      position: relative;
      bottom: 4rpx;
   }

   .demo {
      display: block;
      width: 683rpx;
      height: 708rpx;
      margin: auto;
   }

   .btn {
      position: fixed;
      bottom: 30rpx;
      bottom: calc(24rpx + constant(safe-area-inset-bottom));
      /* 兼容 iOS < 11.2 */
      bottom: calc(24rpx + env(safe-area-inset-bottom));
      /* 兼容 iOS >= 11.2 */
      left: 0;
      width: 703rpx;
      height: 137rpx;
   }

   .step-box {
      flex: 1;
      background-color: #F8F9F9;
      display: flex;
      flex-direction: column;
   }

   .step {
      background-color: #ffffff;
   }

   .step-title {
      font-size: 28rpx;
      color: #7B4324;
      font-weight: 500;
      text-align: center;
      padding: 20rpx;
   }

   .step-title text {
      color: #D31F28;
      font-weight: 700;
   }

   .step-icon {
      width: 70rpx;
      height: 70rpx;
   }

   .step-item-title {
      font-size: 22rpx;
      font-weight: 400;
      color: #7B4324;
   }

   .step-item-title-act {
      color: #FB5B4A;
   }

   .step-line {
      background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 100%);
      width: 117rpx;
      height: 4rpx;
      border-radius: 2rpx;
      position: relative;
      top: -20rpx;
   }

   .step-line-cur {
      background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 50%, #EFEFEF 51%, #EFEFEF 100%);
   }

   .step-line-next {
      background-image: linear-gradient(to right, #EFEFEF 0, #EFEFEF 100%);
   }

   .step-item-box {
      background-color: #ffffff;
      white-space: nowrap;
   }

   .step-item {
      display: inline-flex;
      padding-bottom: 20rpx;
   }

   .step-item-box .step-item:first-child {
      padding-left: 40rpx;
   }

   .step-item-box .step-item:last-child {
      padding-right: 40rpx;
   }

   .coupon-box {
      width: 652rpx;
      margin: 32rpx;
      border-radius: 10rpx;
      border: 1rpx solid rgba(255, 177, 166, 1);
      background: linear-gradient(180.4deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 249, 1) 100%);
   }

   .coupon-box-title {
      justify-content: center;
      text-align: center;
      margin: 20rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
   }

   .coupon-box-title image {
      width: 132rpx;
      height: 21rpx;
   }

   .coupon-box-title text {
      font-size: 28rpx;
      font-weight: 400;
      color: #333;
      margin: 0 10rpx;
   }

   .coupon {
      width: 598rpx;
      height: 180rpx;
      background-size: cover;
      margin: 20rpx auto;
      display: flex;
      align-items: center;
   }

   .lock-icon {
      width: 58rpx;
      height: 58rpx;
      margin-left: 15rpx;
   }

   .coupon-get {
      background-image: url('~@/static/shuaka/pay-by-card-coupon-get.png');
   }

   .coupon-lock {
      background-image: url('~@/static/shuaka/pay-by-card-coupon-lock.png');
   }

   .num {
      color: #D31F28;
      width: 150rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   .coupon-lock .num {
      color: #CBCBCB;
   }

   .unit {
      font-size: 36rpx;
      font-weight: 900;
   }

   .money {
      line-height: 1;
      font-size: 64rpx;
      font-weight: 900;
   }

   .condition {
      font-size: 20rpx;
      font-weight: 400;
   }

   .info {
      width: 360rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 10rpx;
   }

   .title {
      font-size: 26rpx;
      font-weight: 400;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      /* white-space:nowrap; */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .coupon-lock .title {
      opacity: 0.33;
   }

   .validity {
      margin-top: 15rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #999;
   }

   .coupon-lock .validity {
      opacity: 0.33;
   }

   .notice {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      line-height: 1;
      font-weight: 400;
      color: #333;
      margin-bottom: 40rpx;
   }

   .notice::before {
      box-sizing: border-box;
      display: inline-block;
      content: '';
      margin-right: 10rpx;
      width: 28rpx;
      height: 28rpx;
      border: 1px solid #999;
      border-radius: 4rpx;
      transition: all 0.3s;
   }

   .notice.check::before {
      border: none;
      background-image: url('~@/static/shuaka/notice-check.png');
      background-size: cover;
      transition: all 0.3s;
   }


   .popup {
      box-sizing: border-box;
      width: 632rpx;
      height: 935rpx;
      background-image: url('~@/static/shuaka/pay-by-card-modal-bg.png');
      background-size: cover;
      padding: 210rpx 40rpx 20rpx;
   }

   .popup-close {
      display: block;
      margin: 40rpx auto 0;
      width: 64rpx;
      height: 64rpx;
   }

   .popup-title {
      font-size: 42rpx;
      font-weight: 700;
      color: #F2281F;
      text-align: center;
      line-height: 1;
      margin-top: 20rpx;
   }

   .popup-sub-title {
      justify-content: center;
      margin: 20rpx 0 10rpx;
      color: #B36C44;
      font-size: 28rpx;
   }

   .popup-sub-title view {
      margin: 0 10rpx;
   }

   .popup-sub-title text {
      color: #D31F28;
   }

   .popup-sub-title image {
      width: 132rpx;
      height: 21rpx;
   }

   .popup-btn {
      margin: 20rpx auto 0;
      width: 478rpx;
      height: 88rpx;
      border-radius: 44rpx;
      background-color: rgba(238, 68, 82, 1);
      font-size: 36rpx;
      font-weight: 500;
      color: #fff;
      justify-content: center;
   }

   .scroll-view {
      height: 435rpx;
   }

   .coupon1 {
      width: 508rpx;
      height: 145rpx;
      background-image: url('~@/static/shuaka/pay-by-card-coupon.png');
      background-size: cover;
      margin: 20rpx auto;
      display: flex;
      align-items: center;
   }

   .coupon1 .num {
      height: 110rpx;
      border-right: 1rpx dashed #FA969A;
   }

   .coupon1 .unit {
      font-size: 24rpx;
   }

   .coupon1 .money {
      font-size: 50rpx;
   }

   .coupon1 .condition {
      font-size: 20rpx;
   }

   .coupon1 .title {
      text-align: left;
      font-size: 24rpx;
   }

   .coupon1 .validity {
      font-size: 20rpx;
   }
</style>