259 lines
6.3 KiB
Vue
259 lines
6.3 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||
import Container from "@/components/Container.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import Signin from "@/components/Signin.vue";
|
||
import UserHeader from "@/components/UserHeader.vue";
|
||
import { createOrderAPI, getHomeData, getVIPDescAPI } from "@/apis";
|
||
import { formatTimestamp } from "@/util";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user, config } = storeToRefs(store);
|
||
const { updateUser } = store;
|
||
|
||
const selectedVIP = ref(0);
|
||
const showModal = ref(false);
|
||
const lastDate = ref(user.value.expiredAt);
|
||
const refreshing = ref(false);
|
||
const timer = ref(null);
|
||
const richContent = ref("");
|
||
|
||
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
|
||
);
|
||
if (!result.pay) return;
|
||
const params = result.pay.order.jsApi.params;
|
||
if (params) {
|
||
wx.requestPayment({
|
||
timeStamp: params.timeStamp, // 时间戳
|
||
nonceStr: params.nonceStr, // 随机字符串
|
||
package: params.package, // 统一下单接口返回的 prepay_id 参数值，格式：prepay_id=***
|
||
paySign: params.paySign, // 签名
|
||
signType: "RSA", // 签名类型，默认为RSA
|
||
async success(res) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
timer.value = setInterval(async () => {
|
||
refreshing.value = true;
|
||
const result = await getHomeData();
|
||
if (result.user.expiredAt > lastDate.value) {
|
||
refreshing.value = false;
|
||
if (result.user) updateUser(result.user);
|
||
clearInterval(timer.value);
|
||
}
|
||
}, 1000);
|
||
},
|
||
fail(res) {
|
||
console.log("pay error", res);
|
||
},
|
||
});
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(async () => {
|
||
const result = await getVIPDescAPI();
|
||
richContent.value = result.describe;
|
||
});
|
||
|
||
const toOrderPage = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/orders",
|
||
});
|
||
};
|
||
|
||
onBeforeUnmount(() => {
|
||
if (timer.value) clearInterval(timer.value);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="会员说明">
|
||
<view v-if="user.id" class="header">
|
||
<view>
|
||
<Avatar :src="user.avatar" :size="35" />
|
||
<text class="truncate">{{ user.nickName }}</text>
|
||
<image
|
||
class="user-name-image"
|
||
src="../static/vip1.png"
|
||
mode="widthFix"
|
||
/>
|
||
</view>
|
||
<block v-if="refreshing">
|
||
<image
|
||
src="../static/btn-loading.png"
|
||
mode="widthFix"
|
||
class="loading"
|
||
/>
|
||
</block>
|
||
<block v-else>
|
||
<text v-if="user.expiredAt">
|
||
{{ formatTimestamp(user.expiredAt) }} 到期
|
||
</text>
|
||
</block>
|
||
</view>
|
||
<view
|
||
class="container"
|
||
:style="{ height: !user.id ? 'calc(100% - 10px)' : 'calc(100% - 62px)' }"
|
||
>
|
||
<view class="content vip-content">
|
||
<view class="title-bar">
|
||
<view />
|
||
<text>VIP 介绍</text>
|
||
</view>
|
||
<view :style="{ marginTop: '10rpx' }">
|
||
<rich-text :nodes="richContent" />
|
||
</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>
|
||
<view class="my-orders" v-if="user.id">
|
||
<view @click="toOrderPage">
|
||
<text>我的订单</text>
|
||
<image src="../static/enter-arrow-blue.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<Signin :show="showModal" :onClose="() => (showModal = false)" />
|
||
</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 {
|
||
margin-left: 10px;
|
||
max-width: 120px;
|
||
text-align: left;
|
||
}
|
||
.header > view > image {
|
||
margin-left: 5px;
|
||
width: 20px;
|
||
}
|
||
.header > text:nth-child(2) {
|
||
color: #fed847;
|
||
}
|
||
.container {
|
||
width: 100%;
|
||
background-color: #f5f5f5;
|
||
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;
|
||
color: #000;
|
||
}
|
||
.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;
|
||
}
|
||
.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;
|
||
font-size: 27rpx;
|
||
}
|
||
.vip-content {
|
||
max-height: 62%;
|
||
}
|
||
.vip-content > view:nth-child(2) {
|
||
overflow: auto;
|
||
}
|
||
.vip-content > view:nth-child(2)::-webkit-scrollbar {
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
.my-orders {
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #39a8ff;
|
||
margin-top: 10px;
|
||
font-size: 13px;
|
||
}
|
||
.my-orders > view {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.my-orders > view > image {
|
||
width: 15px;
|
||
}
|
||
.loading {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-left: 10px;
|
||
transition: all 0.3s ease;
|
||
background-blend-mode: darken;
|
||
animation: rotate 2s linear infinite;
|
||
}
|
||
</style>
|