shoot-miniprograms/src/pages/be-vip.vue

<script setup>
import { ref } from "vue";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import SButton from "@/components/SButton.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import { createOrderAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);

const selectedVIP = ref(0);
const showModal = ref(false);

const onPay = async () => {
  if (!user.value.id) {
    showModal.value = true;
  } else if (config.value.vipMenus[selectedVIP.value]) {
    if (config.value.vipMenus[selectedVIP.value].id) {
      const result = await createOrderAPI(
        config.value.vipMenus[selectedVIP.value].id
      );
      uni.showToast({
        title: "创建成功",
        icon: "none",
      });
    }
  }
};
</script>

<template>
  <Container title="会员说明">
    <view v-if="user.id" class="header">
      <view>
        <Avatar :src="user.avatar" :size="35" />
        <text class="truncate">{{ user.nickName }}</text>
      </view>
      <text>5月5号到期</text>
    </view>
    <view class="container">
      <view class="content">
        <view class="title-bar">
          <view />
          <text>VIP 介绍</text>
        </view>
        <view>
          <text
            >射灵的的VIP服务是为了正式对战打造的专属特权，让您在激烈的射击运动中充分享受与同级别想着对战的乐趣；</text
          >
          <text
            >VIP的收取形式灵活多样，充分考虑到了不同用户的需求。我们提供按月收取的方式，每月仅需10元，即可轻松成为VIP会员，享受一个月的尊贵特权。这种方式适合那些希望先体验VIP服务，再决定是否长期投入的用户。您可以先购买一个月的VIP，亲身感受VIP带来的种种好处，如果觉得满意，再继续选择适合自己的购买方案。而对于那些已经确定会长期参与对战，希望持续享受VIP特权的用户，我们则推出了更为优惠的一年VIP套餐。一次性购买一年的VIP，仅需100元，平均每月不到9元，您就能全年畅享VIP的所有权益。这不仅为您节省了时间和精力，还为您带来了实实在在的经济优惠。
            一年的时间，足够您在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。</text
          >
          <text
            >VIP会员还将获得专属的客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可以随时联系我们的VIP专属客服团队、他们将为您提供</text
          >
        </view>
      </view>
      <view class="content">
        <view class="title-bar">
          <view />
          <text>成为射灵会员</text>
        </view>
        <view class="vip-items">
          <view
            v-for="(item, index) in config.vipMenus || []"
            :key="index"
            :style="{
              color: selectedVIP === index ? '#fff' : '#333333',
              borderColor: selectedVIP === index ? '#FF7D57' : '#eee',
              background:
                selectedVIP === index
                  ? '#FF7D57'
                  : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
            }"
            @click="() => (selectedVIP = index)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>
      <SButton :onClick="onPay">支付</SButton>
      <SModal :show="showModal" :onClose="() => (showModal = false)">
        <Signin :onClose="() => (showModal = false)" />
      </SModal>
    </view>
  </Container>
</template>

<style scoped>
.header {
  width: calc(100% - 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 15px;
  padding-top: 0;
  font-size: 14px;
}
.header > view {
  display: flex;
  align-items: center;
}
.header > view > text:last-child {
  margin-left: 10px;
  width: 120px;
  text-align: left;
}
.header > text:nth-child(2) {
  color: #fed847;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
  padding-top: 10px;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
}
.title-bar {
  width: 100%;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title-bar > view:first-child {
  width: 5px;
  height: 15px;
  border-radius: 10px;
  background-color: #fed847;
  margin-right: 10px;
}
.content > view:nth-child(2) {
  font-size: 14px;
  color: #333;
}
.content > view:nth-child(2) > text {
  display: block;
  margin-top: 10px;
  color: #000;
}
.vip-items {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 23.5%);
  padding: 10px;
  row-gap: 5%;
  column-gap: 2%;
}
.vip-items > view {
  border: 1px solid #eee;
  padding: 12px 0;
  border-radius: 10px;
  text-align: center;
}
</style>