VAVABUY/pages/user/weal_center.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="福利中心" fixed border>
        <template #right>
          <view class="nav_right" @click.stop="openAgreement">
            <trans _t="福利规则" />
            <up-icon
              name="question-circle"
              size="32rpx"
              color="var(--red)"
              class="icon"
            ></up-icon>
          </view>
        </template>
      </Navbar>
      <view class="content">
        <view class="cont_tab">
          <Tab
            :active="tabActive"
            :tabList="tabList"
            @confirm="tabConfirm"
            keyName="text"
            size="28rpx"
          />
        </view>
        <view class="cont">
          <template v-if="tabActive == 0">
            <view class="item" v-for="(item, index) in detials" :key="index">
              <Blind_list :item="item" />
            </view>
          </template>
          <template v-else-if="tabActive == 1">
            <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>
          </template>
          <view class="null_warp" v-if="!detials.length">
            <view class="null_text">{{ t("无数据") }}</view>
          </view>
        </view>
      </view>
    </view>

    <SimpleAgreementModal ref="agreementModalRef" />
  </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 Blind_list from "./components/blind_list.vue";
import SimpleAgreementModal from "@/components/simpleAgreementModal";
import { useSystemStore, useTabbarStore } from "@/store";
import { Moneyhtml, useGlobal, Toast } from "@/utils";
import { onShow } from "@dcloudio/uni-app";
import { SHOP_COUPON_LIST, CONTENT_BOX_LISTS } from "@/api";

const useTabbar = useTabbarStore();
const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);
const tabActive = ref(0);
const tabList = [
  { text: "我的盲盒", status: 5 },
  { text: "我的折扣券", status: 0 },
];

const detials = ref([]);
const agreementModalRef = ref(null);

const tabConfirm = (item, index) => {
  if (!item) return;
  tabActive.value = index;
  nextTick(() => {
    getData();
  });
};
const getData = async () => {
  try {
    detials.value = [];
    const res = await (tabActive.value
      ? SHOP_COUPON_LIST(0)
      : CONTENT_BOX_LISTS());

    detials.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};
const toShop = () => {
  uni.navigateTo({ url: "/pages/index/products?channel=1" });
};
const openAgreement = () => {
  agreementModalRef.value && agreementModalRef.value.open("boxdes");
};

onShow(() => {
  nextTick(() => {
    getData();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;
  .nav_right {
    display: flex;
    color: var(--text);
    .size(28rpx);
    .icon {
      margin-left: 8rpx;
    }
  }
  .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>