VAVABUY/pages/user/coupon.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="我的优惠券" fixed border> </Navbar>
      <view class="content">
        <view class="cont_tab">
          <Tab
            :active="tabActive"
            :tabList="tabList"
            @confirm="tabConfirm"
            keyName="text"
            size="28rpx"
          />
        </view>
        <view class="cont">
          <view class="item" v-for="(item, index) in detials" :key="index">
            <view class="item-left">
              <view class="item-left-top">
                <view class="type">
                  <trans _t="运费券" v-if="item.typetype == 1"></trans>
                  <trans _t="购物券" v-if="item.typetype == 2"></trans>
                </view>
                <view class="name">{{ item.title }}</view>
              </view>
              <view class="time"
                >{{ item.starttime }} - {{ item.endtime }}
              </view>
            </view>
            <view class="item-right">
              <view class="price">
                <text>{{ symbol.symbol }}</text>
                {{ Moneyhtml(item.money) }}
              </view>
              <view class="status">
                <trans _t="满" />
                {{ symbol.symbol + Moneyhtml(item.amount) }}
                <trans _t="可用" />
              </view>
              <view class="use-btn" @click="toShop">
                <trans _t="立即使用"></trans>
              </view>
            </view>
          </view>
          <view class="null_warp" v-if="!detials.length">
            <view class="null_text">{{ t("无数据") }}</view>
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import { computed, ref, nextTick } from "vue";
import { t } from "@/locale";
import Tab from "@/components/tabs.vue";
import { useSystemStore, useTabbarStore } from "@/store";
import { Moneyhtml, useGlobal, Toast } from "@/utils";
import { onShow } from "@dcloudio/uni-app";
import { SHOP_COUPON_LIST } from "@/api";

const useTabbar = useTabbarStore();
const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const tabActive = ref(0);
const tabList = [
  { text: "可使用", status: 0 },
  { text: "已使用", status: 2 },
  { text: "已过期", status: 3 },
];

const detials = ref([]);
const tabConfirm = (item, index) => {
  if (!item) return;
  tabActive.value = index;
  nextTick(() => {
    getData();
  });
};
const getData = async () => {
  try {
    const res = await SHOP_COUPON_LIST(tabActive.value);
    detials.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};
const toShop = () => {
  uni.navigateTo({ url: "/pages/index/products?channel=1" });
};
onShow(() => {
  nextTick(() => {
    getData();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    flex-grow: 1;
    height: calc(100vh - 44px);
    flex-direction: column;
    .flex();

    .cont_tab {
      background-color: var(--light);
      padding: 0 48rpx;
    }

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;
      padding: 24rpx;

      .item {
        .hor(space-between);
        margin-top: 16rpx;

        border-radius: 20rpx;
        box-shadow: 0px 8rpx 20rpx 0px var(--bor-color1);

        .item-left {
          .hor(space-between);
          flex-direction: column;
          padding: 24rpx 0 24rpx 24rpx;

          .item-left-top {
            .type {
              width: max-content;
              padding: 6rpx 16rpx;
              background: #eb3a68;
              color: var(--light);
              border-radius: 10rpx;
              .size(20rpx);
              text-align: center;
            }

            .name {
              color: var(--text);
              .size(28rpx);
              margin-top: 10rpx;
            }
          }

          .time {
            color: var(--text-02);
            .size(20rpx);
          }
        }

        .item-right {
          min-width: 240rpx;
          position: relative;
          text-align: center;
          background: linear-gradient(180deg, #e6704d 0%, #eb3e67 100%);
          border-radius: 0 20rpx 20rpx 0;
          padding: 24rpx;
          box-sizing: border-box;

          .price {
            color: var(--light);
            .size(44rpx);
            font-weight: 700;
            line-height: 44rpx;

            text {
              .size(28rpx);
            }
          }

          .status {
            color: var(--light);
            .size(24rpx);
            margin: 14rpx auto;
          }

          .use-btn {
            width: max-content;
            padding: 6rpx 10rpx;
            margin: 0 auto;
            background-color: var(--bg);
            color: #eb3a68;
            border-radius: 10rpx;
            .size(28rpx);
          }
        }
      }

      .null_warp {
        .null_text {
          min-height: 100rpx;
          .flex_center();
          .size(28rpx);
          color: #333;
        }
      }
    }
  }
}
</style>