mcwl-pc/app/components/Payment.vue

<script setup lang="ts">
import { ref } from "vue";
import { X, RotateCcw } from "lucide-vue-next";
const userStore = useUserStore();

interface UserInfoType {
  nickName: string;
  avatar: string;
  brief: string;
  userId: number | string;
}
const userInfo = {
  nickName: userStore.userInfo?.nickName ?? "",
  avatar: userStore.userInfo?.avatar ?? "",
  brief: userStore.userInfo?.brief ?? "",
  userId: userStore.userInfo?.userId ?? "",
} as UserInfoType;

const isVisible = ref(false);
function onCloseModel() {
  isVisible.value = false;
}

const qrUrl = ref("你好达内的房东说房东扫烦恼的");


// 定义会员信息的接口
interface Member {
  id: number;
  title: string;
  price: number;
  originalPrice: number;
  desc: string;
}
const memberList = ref<Member[]>([])
const currentMember = ref<Member>({
    id: 1,
    title: "基础会员",
    price: 39,
    originalPrice: 50,
    desc: "次月续费¥39",
})
// 二维码是否过去
const bindTimeout = ref(false)

defineExpose({
  isVisible,
});
// 生命周期钩子
onMounted(() => {
  // initFormData()
});
</script>

<template>
  <n-modal
    v-model:show="isVisible"
    :preset="null"
    transform-origin="center"
    class="custom-modal"
  >
    <div class="bg-white rounded-xl w-200">
      <div
        class="p-4 flex justify-between rounded-t-xl h-14 bg-gradient-to-r from-[#fcf2da] to-[#f9db9f]"
      >
        <div class="flex items-center">
          <div>
            <img :src="userInfo.avatar" class="w-14 h-14 rounded-full mr-4" />
          </div>
          <div class="flex flex-col">
            <div class="text-[#814600] text-xl">
              {{ userInfo.nickName }}
            </div>
            <div class="text-[#6a6a6a] text-xs mt-1">您还不是会员</div>
          </div>
        </div>
        <div @click="onCloseModel">
          <component :is="X" class="h-[18px] w-[18px] text-[#61666d] cursor-pointer" />
        </div>
      </div>
      <div class="grid grid-cols-4 gap-1 mt-4 px-6">
        <div
          v-for="item in 4"
          :key="item"
          class="select-none h-44 border-1 border-solid border-[#e9e9e9] rounded-lg bg-[#f9f9f9] flex justify-between items-center flex-col p-4 box-border cursor-pointer"
        >
        <!-- bg-gradient-to-b from-[#fdf0dd] to-[#fef8ef] -->
        <!-- 1px solid #f7b252; -->
          <div class="text-[#814600] card-item">基本版本Vip连续包月</div>
          <div class="card-item">
            <span class="text-[#814600] text-[20px] mr-2">¥</span>
            <span class="text-[#814600] text-[36px] mr-2">39</span>
            <span class="text-gray-400 text-[20px] line-through">¥50</span>
          </div>
          <div class="card-item text-[#814600] w-7/10 text-center text-[12px]">
            次月续费¥39
          </div>
        </div>
      </div>
      <div class="mt-4 px-6">
        <div class="flex border-collapse ">
          <div class="member-item bg-[#fef9f8]">基础版VIP</div>
          <div class="member-item">每月15000点算力</div>
          <div class="member-item">20G存储空间</div>
          <div class="member-item">每月800次生图</div>
          <div class="member-item">2个生图任务并行</div>
          <div class="member-item">--</div>
        </div>
        <div class="flex border-collapse ">
          <div class="member-item bg-[#fef9f8]">专业版</div>
          <div class="member-item">每月35000点算力</div>
          <div class="member-item">50G存储空间</div>
          <div class="member-item">每月5000次生图</div>
          <div class="member-item">3个生图任务并行</div>
          <div class="member-item">可训练XL模型</div>
        </div>
      </div>
      <div class="px-6 mt-1 text-[#9d8c75] text-[12px]">
        会员每月算力和加速特权按下月下发, 有效期31天, 到期重置
      </div>
      <div class="flex justify-center items-center my-4">
        <div class="w-30 h-30 flex justify-center items-center relative">
          <n-qr-code :value="qrUrl" :size="80" class="p-0" />
          <div v-if="bindTimeout" class="absolute top-0 left-0 w-full h-full flex cursor-pointer flex-col justify-center items-center bg-opacity-50 bg-black text-white">
          请点击刷新<rotate-ccw/>
          </div>
        </div>
        <div class="flex justify-center ml-2 flex-col pb-[14px]">
            <div class="flex items-baseline">
              <div class="text-[#222] font-medium mr-1">支付</div>
              <div class="text-[#814600] mr-1">
                <span class="text-[16px] mr-1">¥</span>
                <span class="text-[40px]">39</span>
              </div>
              <div class="px-2 bg-gradient-to-r from-[#ffa700] to-[#ff006b] text-[#814600] text-white rounded-[4px] ml-1 text-[12px">已减¥11</div>
            </div>
            <div class="flex items-center mb-1">
               <img src="@/assets/img/alipay.png" class="mr-1"> 请扫码完成支付
            </div>
            <div class="text-[12px]">
                <span class="text-[#999]">
                    开通即代表同意
                </span>
                <span class="text-[#814600]">
                    《魔创未来会员协议》
                </span>
            </div>
          </div>
      </div>
      <div class="bg-[#fefaee] text-center text-[#AF7F1A] text-[12px] py-1 rounded-b-lg">需支付差价，计算规则为：专业版年包价格-剩余未下发基础版年包月数*基础版年包购买价格/12</div>
    </div>
  </n-modal>
</template>

<style lang="scss" scoped>
.member-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16.66%;
  height: 40px;
  border: 1px solid #f0f0f0;
  font-size: 12px;
  font-weight: 400;
  margin-right: -1px;
  margin-bottom: -1px;
}
</style>