charge-front/src/pages-charge/card/card.vue

<template>
  <view class="page pt-20 pr-40 pl-40">
    <view class="tab-list flex-align-end">
      <view class="fs-28 color-666 mt-20 w50" :class="mode===0?'active':''" @click="changeTab(0)">权益卡</view>
      <view class="fs-28 color-666 mt-20 w50" :class="mode===1?'active':''" @click="changeTab(1)">优惠券</view>
    </view>
    <view v-if="mode===0">
      <view
          class="item mt-20 "
          v-for="(item, index) in list"
          :class="item.status==0?'inactive':''"
          :key="index"
      >
        <image class="full-percent" src="/pages-charge/static/discount-bg.png"></image>
        <view class="absolute-full flex pt-8 pb-8">
          <view class="left flex-column flex-justify-center pl-48">

            <view class="flex-align-end">
              <view class="item-header__left">
                <image class="width-84" src="/pages-charge/static/discount-rights-card.png" mode="widthFix"></image>
                <view class="fs-48 lh-58 color-000 fw-500 ml-16">{{ item.discountAmount }}折
                </view>
                <view class="fs-26 color-999 ml-16" v-if="mode === 0"
                >用于充电服务费抵扣
                </view>
              </view>

              <view class="item-header__right flex-grow">
                <view class="item-status ml-10">{{ item.status == 0 ? '已失效' : '生效中' }}</view>
              </view>
            </view>


            <block>
              <view class="fs-26 color-999 mt-8"
                    @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
              <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
                <view class="flex-align-center" v-if="mode === 0">
                  <view class="fs-26 color-999 mt-24">权益余额：{{ ((item.rightsBalance || 0) / 100).toFixed(2) }}元
                    <text class="color-primary">详细规则</text>
                    <text class="fs-24 ml-4 color-primary">>></text>
                  </view>
                </view>
              </view>
            </block>
          </view>
          <!--          <view v-if="mode === 0" class="right width-80 flex-center">
                      <style-checkbox
                          :size="48"
                          :checked="checkIndex === index"
                          :iconsize="17"
                      ></style-checkbox>
                    </view>-->
          <!--          <view
                        v-if="mode === 1"
                        class="right flex-center"
                        :style="{
                      width: '210rpx',
                      borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
                    }"
                    >
                      <view class="btn flex-center fs-28" @click.stop="toCharge(index)"
                      >前往充值</view
                      >
                    </view>-->
        </view>
      </view>
    </view>


    <view v-else-if="mode===1">
      <view
          class="item mt-20"
          :class="item.usageStatus==1||item.status==0?'inactive':''"
          v-for="(item, index) in couponList"
          :key="index"
      >
        <!--        <image
                    class="full-percent"
                    src="/pages-charge/static/discount-bg.png"
                ></image>-->
        <view class="absolute-full flex pt-8 pb-8">
          <view class="left flex-column flex-justify-center pl-48">
            <view class="flex-align-end">
              <view class="item-header__left">

                <image
                    class="width-84"
                    src="/pages-charge/static/discount-coupon.png"
                    mode="widthFix"
                ></image>
                <view></view>
                <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-if="item.couponType=='FullDiscount'">
                  {{ ((item.discount || 0) / 100).toFixed(2) }}元
                </view>

                <view class="fs-48 lh-58 color-000 fw-500 ml-16" v-else>
                  {{ (item.discount / 10).toFixed(1) }}折
                </view>

                <view class="fs-26 color-999 ml-16">
                  {{ item.couponType == 'FullDiscount' ? '满减券' : '折扣券' }}：抵扣充电服务费
                </view>
              </view>


              <view class="item-header__right flex-grow">
                <view class="item-status ml-10" v-if="item.status==0">已失效</view>
                <view class="item-status ml-10" v-else>{{ item.usageStatus == 0 ? '未使用' : '已使用' }}</view>
              </view>


            </view>

            <block v-if="mode === 1">
              <view class="fs-26 color-999 mt-8"
                    @click.stop="to(`/pages-common/activity/activity?id=${item.activityId}`)">
                <view class="fs-26 color-999 mt-24">到期时间：{{ item.endTime }}</view>
                <view class="flex-align-center">
                  <view class="fs-26 color-999 mt-24">服务费门槛：{{ ((item.minServiceMoney || 0) / 100).toFixed(2) }}元
                    <text class="color-primary">详细规则</text>
                    <text class="fs-24 ml-4 color-primary">>></text>
                  </view>
                </view>
              </view>
            </block>
          </view>
          <!--          <view v-if="mode === 0" class="right width-80 flex-center">
                      <style-checkbox
                          :size="48"
                          :checked="checkIndex === index"
                          :iconsize="17"
                      ></style-checkbox>
                    </view>-->
          <!--          <view
                        v-if="mode === 1"
                        class="right flex-center"
                        :style="{
                      width: '210rpx',
                      borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
                    }"
                    >
                      <view class="btn flex-center fs-28"
                      >{{ item.discount }}折</view
                      >
                    </view>-->
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import {onPullDownRefresh, onShow} from "@dcloudio/uni-app";
import {ref} from "vue";
import {to} from "../../utils/navigate";
import {fetchRightsAndCoupons} from "@/api/user";

const mode = ref(0);
const list = ref<any[]>([]);
const couponList = ref<any[]>([]);
const activity = ref();
const checkIndex = ref(-1);
const needRefresh = ref(false);

/*
const toCharge = (index: number) => {
  needRefresh.value = true;
  to(
    "/pages-user/wallet-recharge/wallet-recharge?back=1&value=" +
      list.value[index].amountMin
  );
};
*/

onPullDownRefresh(() => {
  loadData();
});

const changeTab = (tab: number) => {
  mode.value = tab;
}


/*
onLoad((options: any) => {
  if (getApp<any>().globalData.user) {
    if (getApp<any>().globalData.user.userRechargeRightsList.length) {
      setUserRecharge(getApp<any>().globalData.user.userRechargeRightsList);
      checkIndex.value = options.index ? Number(options.index) : 0;
    } else {
      const _activity = getApp<any>().globalData.user.activityList.find(
        (item: any) => item.id === options.id
      );
      _activity.rechargeRightsList.forEach((item: any) => {
        item.discountFormat = Number((Number(item.discount) / 10).toFixed(2));
      });
      list.value = _activity.rechargeRightsList;
      activity.value = _activity;
      mode.value = 1;
    }
  }
});
*/
const loadData = () => {
  uni.showLoading({
    title: "加载中",
  });
  fetchRightsAndCoupons().then((res) => {
    uni.stopPullDownRefresh();
    console.log(res)
    uni.hideLoading();
    let {userCouponList, userRechargeRightsList} = res;
    list.value = userRechargeRightsList;
    couponList.value = userCouponList;
  });
}

onShow(() => {
  loadData();


});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  width: 100%;
  background-color: #f6f7fa;

  .item {
    position: relative;
    min-height: 240rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background: #fff;

    .left {
      flex-grow: 1;
    }

    .right {
      flex-shrink: 0;

      .btn {
        border-radius: 8rpx;
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        width: 144rpx;
        height: 56rpx;
      }
    }
  }

  .tab-list {
    width: 100%;

    .w50 {
      width: 50%;
      text-align: center;
    }

    .active {
      color: var(--color-primary);
    }
  }
}

.item-status {
  font-size: 24rpx;
  padding: 0rpx 2rpx;
  color: var(--color-primary);
  border: 2rpx solid var(--color-primary);
  border-radius: 6rpx;

}

.item-header__left {
  display: inline-flex;
  align-items: flex-end;
}

.item-header__right {
  padding: 5rpx;
  display: flex;
  justify-content: flex-end;
}

.inactive {
  cursor: not-allowed;
  pointer-events: none;

  .item-status {
    font-size: 24rpx;
    padding: 0rpx 2rpx;
    color: #ccc !important;
    border: 2rpx solid #ccc;
    border-radius: 6rpx;

  }

  .color-primary {
    color: #ccc !important;
  }
}
</style>