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

<template>
  <view class="page pt-20 pr-40 pl-40">
    <view class="fs-28 color-666 mt-20" v-if="mode === 0">充电优惠权益卡</view>
    <view
      class="item mt-20"
      v-for="(item, index) in list"
      v-if="mode >= 0"
      :key="index"
      @click="checkDiscount(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">
            <image
              class="width-92"
              src="/pages-charge/static/discount-coupon.png"
              mode="widthFix"
            ></image>
            <view class="fs-48 lh-58 color-000 fw-500 ml-16"
              >{{ item.discountFormat }}折</view
            >
            <view class="fs-26 color-999 ml-16" v-if="mode === 0"
              >充电服务费</view
            >
          </view>
          <view class="flex-align-center" v-if="mode === 0">
            <view class="fs-26 color-999 mt-24"
              >权益余额{{ item.rightsBalanceFormat }}元｜</view
            >
            <view class="fs-26 color-999 mt-24"
              >{{ item.endTimeFormat }}到期</view
            >
          </view>
          <block v-if="mode === 1">
            <view class="fs-26 color-999 mt-24">{{ item.rightsDesc }}</view>
            <view
              class="fs-26 color-999 mt-8"
              @click.stop="
                to(`/pages-common/activity/activity?id=${activity.id}`)
              "
            >
              <text>有效期{{ item.validity }}天，</text>
              <text class="color-primary">详细规则</text>
              <text class="fs-24 ml-4 color-primary">>></text>
            </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>
</template>

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

const mode = ref(-1);
const list = 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
  );
};

const setUserRecharge = (_list: any[]) => {
  _list.forEach((item: any) => {
    item.endTimeFormat = item.endTime.split(" ")[0];
    item.rightsBalanceFormat = Number(
      (Number(item.rightsBalance) / 100).toFixed(2)
    );
  });
  list.value = _list;
  mode.value = 0;
};

const checkDiscount = (index: number) => {
  checkIndex.value = index;
  getApp<any>().globalData.lastData.discount = {
    index,
  };
};

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;
    }
  }
});
onShow(() => {
  if (needRefresh.value) {
    needRefresh.value = false;
    uni.showLoading({
      title: "加载中",
    });
    fetchProfile().then((res) => {
      uni.hideLoading();
      if (res.userRechargeRightsList.length) {
        setUserRecharge(res.userRechargeRightsList);
        checkDiscount(0)
      }
    });
  }
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  width: 100%;
  background-color: #f6f7fa;
  .item {
    position: relative;
    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;
      }
    }
  }
}
</style>