1281 lines
36 KiB
Vue
1281 lines
36 KiB
Vue
<template>
|
||
<view class="member-select-container">
|
||
<!-- 页面标题 -->
|
||
<view class="page-header">
|
||
<!-- <view class="header-title">会员等级选择</view> -->
|
||
<view class="header-subtitle">选择适合您的会员等级，享受更多权益</view>
|
||
</view>
|
||
|
||
<!-- 用户会员状态统一显示区域 -->
|
||
<view class="member-status-overview" v-if="showTabs">
|
||
<!-- 根据当前Tab显示对应的会员状态 - 已开通 -->
|
||
<view class="status-card" v-if="getCurrentTabMemberStatus().isVip">
|
||
<view class="status-card-header">
|
||
<text class="status-type">{{ getCurrentTabName() }}</text>
|
||
<text class="status-badge vip">已开通</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<!-- 小程序上书会员显示上书本数 -->
|
||
<view class="status-detail" v-if="getCurrentTabType() === 'xcx'">
|
||
<text class="detail-label">已上书本数：</text>
|
||
<text class="detail-value">{{ getCurrentTabMemberStatus().count }}本</text>
|
||
</view>
|
||
<view class="status-detail" v-if="getCurrentTabMemberStatus().expirationDateStr">
|
||
<text class="detail-label">到期时间：</text>
|
||
<text class="detail-value">{{ getCurrentTabMemberStatus().expirationDateStr }}</text>
|
||
</view>
|
||
<view class="status-detail" v-if="getCurrentTabMemberStatus().daysRemaining > 0">
|
||
<text class="detail-label">剩余天数：</text>
|
||
<text
|
||
class="detail-value remaining-days">{{ getCurrentTabMemberStatus().daysRemaining }}天</text>
|
||
</view>
|
||
<view class="status-detail" v-else-if="getCurrentTabMemberStatus().daysRemaining === 0">
|
||
<text class="detail-label expired">会员已到期</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 根据当前Tab显示对应的会员状态 - 已过期 -->
|
||
<view class="status-card expired-card"
|
||
v-if="!getCurrentTabMemberStatus().isVip && getCurrentTabMemberStatus().isExpired">
|
||
<view class="status-card-header">
|
||
<text class="status-type">{{ getCurrentTabName() }}</text>
|
||
<text class="status-badge expired">已到期</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<!-- 小程序上书会员显示上书本数 -->
|
||
<view class="status-detail" v-if="getCurrentTabType() === 'xcx'">
|
||
<text class="detail-label">已上书本数：</text>
|
||
<text class="detail-value">{{ getCurrentTabMemberStatus().count }}本</text>
|
||
</view>
|
||
<view class="status-detail" v-if="getCurrentTabMemberStatus().expirationDateStr">
|
||
<text class="detail-label">过期时间：</text>
|
||
<text class="detail-value">{{ getCurrentTabMemberStatus().expirationDateStr }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未开通当前Tab对应会员时的提示 -->
|
||
<view class="no-member-tip"
|
||
v-if="!getCurrentTabMemberStatus().isVip && !getCurrentTabMemberStatus().isExpired">
|
||
<text class="tip-text">您还未开通{{ getCurrentTabName() }}，选择下方套餐开始享受会员权益</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未显示Tab时显示所有已开通的会员状态 -->
|
||
<view class="member-status-overview" v-if="!showTabs">
|
||
<!-- 小程序上书会员状态 -->
|
||
<view class="status-card" v-if="userMemberStatus.xcx.isVip">
|
||
<view class="status-card-header">
|
||
<text class="status-type">小程序上书会员</text>
|
||
<text class="status-badge vip">已开通</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<view class="status-detail">
|
||
<text class="detail-label">已上书本数：</text>
|
||
<text class="detail-value">{{ userMemberStatus.xcx.count }}本</text>
|
||
</view>
|
||
<view class="status-detail" v-if="userMemberStatus.xcx.expirationDateStr">
|
||
<text class="detail-label">到期时间：</text>
|
||
<text class="detail-value">{{ userMemberStatus.xcx.expirationDateStr }}</text>
|
||
</view>
|
||
<view class="status-detail" v-if="userMemberStatus.xcx.daysRemaining > 0">
|
||
<text class="detail-label">剩余天数：</text>
|
||
<text class="detail-value remaining-days">{{ userMemberStatus.xcx.daysRemaining }}天</text>
|
||
</view>
|
||
<view class="status-detail" v-else-if="userMemberStatus.xcx.daysRemaining === 0">
|
||
<text class="detail-label expired">会员已到期</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 小程序上书会员过期状态 -->
|
||
<view class="status-card expired-card" v-if="!userMemberStatus.xcx.isVip && userMemberStatus.xcx.isExpired">
|
||
<view class="status-card-header">
|
||
<text class="status-type">小程序上书会员</text>
|
||
<text class="status-badge expired">已过期</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<view class="status-detail">
|
||
<text class="detail-label">已上书本数：</text>
|
||
<text class="detail-value">{{ userMemberStatus.xcx.count }}本</text>
|
||
</view>
|
||
<view class="status-detail" v-if="userMemberStatus.xcx.expirationDateStr">
|
||
<text class="detail-label">过期时间：</text>
|
||
<text class="detail-value">{{ userMemberStatus.xcx.expirationDateStr }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 孔网翻新会员状态 -->
|
||
<view class="status-card" v-if="userMemberStatus.kwfw.isVip">
|
||
<view class="status-card-header">
|
||
<text class="status-type">孔网翻新会员</text>
|
||
<text class="status-badge vip">已开通</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<view class="status-detail" v-if="userMemberStatus.kwfw.expirationDateStr">
|
||
<text class="detail-label">到期时间：</text>
|
||
<text class="detail-value">{{ userMemberStatus.kwfw.expirationDateStr }}</text>
|
||
</view>
|
||
<view class="status-detail" v-if="userMemberStatus.kwfw.daysRemaining > 0">
|
||
<text class="detail-label">剩余天数：</text>
|
||
<text class="detail-value remaining-days">{{ userMemberStatus.kwfw.daysRemaining }}天</text>
|
||
</view>
|
||
<view class="status-detail" v-else-if="userMemberStatus.kwfw.daysRemaining === 0">
|
||
<text class="detail-label expired">会员已到期</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 孔网翻新会员过期状态 -->
|
||
<view class="status-card expired-card"
|
||
v-if="!userMemberStatus.kwfw.isVip && userMemberStatus.kwfw.isExpired">
|
||
<view class="status-card-header">
|
||
<text class="status-type">孔网翻新会员</text>
|
||
<text class="status-badge expired">已过期</text>
|
||
</view>
|
||
<view class="status-card-content">
|
||
<view class="status-detail" v-if="userMemberStatus.kwfw.expirationDateStr">
|
||
<text class="detail-label">过期时间：</text>
|
||
<text class="detail-value">{{ userMemberStatus.kwfw.expirationDateStr }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 未开通任何会员时的提示 -->
|
||
<view class="no-member-tip"
|
||
v-if="!userMemberStatus.xcx.isVip && !userMemberStatus.kwfw.isVip && !userMemberStatus.xcx.isExpired && !userMemberStatus.kwfw.isExpired">
|
||
<text class="tip-text">您还未开通任何会员，选择下方套餐开始享受会员权益</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab切换 - 只在展示所有会员时显示 -->
|
||
<view class="tab-container" v-if="showTabs">
|
||
<view class="tab-list">
|
||
<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
|
||
:class="{ 'active': activeTabIndex === index }" @click="switchTab(index)">
|
||
{{ tab.name }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员卡片列表 -->
|
||
<view class="member-cards">
|
||
<view v-for="(item, index) in memberLevels" :key="index" class="member-card"
|
||
:class="{ 'selected': selectedIndex === index }" @click="selectMember(index)">
|
||
<!-- 会员卡片头部 -->
|
||
<view class="card-header" :style="{ backgroundColor: item.color || '#4A5CFF' }">
|
||
<view class="card-title">{{ item.name }}</view>
|
||
<view class="card-price">¥{{ item.price }}</view>
|
||
</view>
|
||
|
||
<!-- 会员卡片内容 -->
|
||
<view class="card-content">
|
||
<!-- 会员权益列表 -->
|
||
<view class="benefit-item" v-for="(benefit, bIndex) in item.benefits || defaultBenefits"
|
||
:key="bIndex">
|
||
<text class="benefit-icon">✓</text>
|
||
<text class="benefit-text">{{ benefit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择标记 -->
|
||
<view class="select-mark" v-if="selectedIndex === index">
|
||
<text class="select-icon">✓</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部支付按钮 -->
|
||
<view class="bottom-bar">
|
||
<view class="selected-info" v-if="selectedIndex !== -1">
|
||
<text class="selected-name">{{ memberLevels[selectedIndex] && memberLevels[selectedIndex].name }}</text>
|
||
<text
|
||
class="selected-price">¥{{ memberLevels[selectedIndex] && memberLevels[selectedIndex].price }}</text>
|
||
</view>
|
||
<view class="pay-button" :class="{ 'disabled': selectedIndex === -1 }" @click="handlePay">
|
||
立即支付
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
callWxPay,
|
||
checkPayStatus,
|
||
getMemberLevelList,
|
||
createKwfwMemberOrder,
|
||
updateKwfwMemberOrder,
|
||
updateUserBooksCountLimit,
|
||
getUserRecbusiness,
|
||
checkKwfwMemberStatus
|
||
} from '@/components/MemberBookCheck.js';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
memberLevels: [],
|
||
selectedIndex: -1,
|
||
isLoading: false,
|
||
defaultBenefits: [
|
||
'上传书籍数量增加',
|
||
'优先展示您的商品',
|
||
'专属客服服务',
|
||
'更多增值服务'
|
||
],
|
||
// 会员等级颜色配置
|
||
levelColors: [
|
||
'#4A5CFF', // 蓝色
|
||
'#FF7D3C', // 橙色
|
||
'#8A2BE2', // 紫色
|
||
'#FF4757', // 红色
|
||
'#2ED573' // 绿色
|
||
],
|
||
// Tab相关数据
|
||
showTabs: false, // 是否显示tab切换
|
||
activeTabIndex: 0, // 当前激活的tab索引
|
||
tabs: [{
|
||
name: '小程序上书会员',
|
||
type: 'xcx'
|
||
},
|
||
{
|
||
name: '孔网翻新会员',
|
||
type: 'kwfw'
|
||
}
|
||
],
|
||
// 存储所有会员数据
|
||
allMemberData: {
|
||
xcx: [], // 小程序上书会员数据
|
||
kwfw: [] // 孔网翻新会员数据
|
||
},
|
||
// 用户会员状态信息
|
||
userMemberStatus: {
|
||
xcx: {
|
||
isVip: false,
|
||
isExpired: false,
|
||
count: 0,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
},
|
||
kwfw: {
|
||
isVip: false,
|
||
isExpired: false,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
}
|
||
}
|
||
};
|
||
},
|
||
async onLoad(options) {
|
||
// 获取来源页面传递的参数
|
||
this.fromPage = options.from || '';
|
||
this.callback = options.callback || '';
|
||
this.memberType = options.type || ''; // 新增会员类型参数
|
||
|
||
// 加载会员等级数据和用户会员状态
|
||
await Promise.all([
|
||
this.loadMemberLevels(),
|
||
this.loadUserMemberStatus()
|
||
]);
|
||
},
|
||
|
||
async onShow() {
|
||
// 每次页面显示时刷新用户会员状态
|
||
await this.loadUserMemberStatus();
|
||
console.log('页面显示，会员状态已刷新:', this.userMemberStatus);
|
||
},
|
||
methods: {
|
||
// 加载会员等级数据
|
||
async loadMemberLevels() {
|
||
try {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
|
||
console.log('加载会员等级数据，来源:', this.fromPage, '类型:', this.memberType);
|
||
|
||
// 根据不同的入口来源展示不同的会员卡片
|
||
if (this.fromPage === 'memberCheck' && this.memberType === 'xcx') {
|
||
// 从checkMemberBooksCount进入，只显示小程序上书会员
|
||
this.showTabs = false;
|
||
await this.loadXcxMemberLevels();
|
||
} else if (this.fromPage === 'kwfw' && this.memberType === 'kwfw') {
|
||
// 从checkKwfwMember进入，只显示翻新会员
|
||
this.showTabs = false;
|
||
this.setKwfwMemberLevels();
|
||
} else {
|
||
// 从toMemberSelect进入或其他情况，显示所有会员卡片
|
||
this.showTabs = true;
|
||
await this.loadAllMemberLevels();
|
||
// 默认显示第一个tab的内容
|
||
this.switchTab(0);
|
||
}
|
||
} catch (error) {
|
||
console.error('加载会员等级数据失败:', error);
|
||
uni.showToast({
|
||
title: '加载会员价格失败',
|
||
icon: 'none'
|
||
});
|
||
|
||
// 加载失败时使用默认数据
|
||
this.setDefaultMemberLevels();
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
|
||
// 加载小程序上书会员等级数据
|
||
async loadXcxMemberLevels() {
|
||
try {
|
||
// 调用接口获取会员等级列表
|
||
const levelList = await getMemberLevelList();
|
||
console.log('获取到的会员等级列表:', levelList);
|
||
|
||
if (levelList && levelList.length > 0) {
|
||
// 清空原有的会员等级数据
|
||
this.memberLevels = [];
|
||
|
||
// 查找memberType为1的配置
|
||
const memberTypeConfig = levelList.find(item => item.memberType === 1);
|
||
const settledId = memberTypeConfig.id;
|
||
console.log('找到的memberType为1的配置:', memberTypeConfig);
|
||
|
||
if (memberTypeConfig && memberTypeConfig.constraintJson) {
|
||
let parsedConfig;
|
||
|
||
// 解析constraintJson数据
|
||
if (typeof memberTypeConfig.constraintJson === 'string') {
|
||
parsedConfig = JSON.parse(memberTypeConfig.constraintJson);
|
||
} else {
|
||
parsedConfig = memberTypeConfig.constraintJson;
|
||
}
|
||
|
||
console.log('解析后的配置:', parsedConfig);
|
||
|
||
// 确认数据中有miniapp字段
|
||
if (parsedConfig.miniapp) {
|
||
const miniapp = parsedConfig.miniapp;
|
||
console.log('miniapp数据:', miniapp);
|
||
|
||
// 创建月付会员卡
|
||
if (miniapp.month_fee) {
|
||
const monthFee = Number(miniapp.month_fee);
|
||
console.log("月费:", monthFee);
|
||
|
||
this.memberLevels.push({
|
||
id: settledId,
|
||
name: '月付会员 (点击开通)',
|
||
price: monthFee.toFixed(2),
|
||
originalPrice: monthFee * 100, // 转换为分
|
||
// price: '0.01',
|
||
// originalPrice: 1, // 以分为单位
|
||
color: this.levelColors[0],
|
||
unit: '月',
|
||
length: 1,
|
||
serviceName: 'xcx上书会员',
|
||
benefits: [
|
||
'每月上传书籍数量增加',
|
||
// '优先展示您的商品',
|
||
// '专属客服服务',
|
||
'月度VIP标识'
|
||
]
|
||
});
|
||
}
|
||
|
||
// 创建年付会员卡
|
||
if (miniapp.year_fee) {
|
||
const yearFee = Number(miniapp.year_fee);
|
||
console.log("年费:", yearFee);
|
||
|
||
this.memberLevels.push({
|
||
id: settledId,
|
||
name: '年度会员 (点击开通)',
|
||
price: yearFee.toFixed(2),
|
||
originalPrice: yearFee * 100, // 转换为分
|
||
color: this.levelColors[1],
|
||
unit: '月',
|
||
length: 12,
|
||
serviceName: 'xcx上书会员',
|
||
benefits: [
|
||
'无限制上传书籍数量',
|
||
// '优先展示您的商品',
|
||
// '24小时专属客服服务',
|
||
// '年度VIP专属标识',
|
||
'更多增值服务特权'
|
||
]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 如果没有获取到会员等级数据，显示默认的小程序上书会员数据
|
||
if (this.memberLevels.length === 0) {
|
||
this.setDefaultXcxMemberLevels();
|
||
}
|
||
} catch (error) {
|
||
console.error('加载小程序上书会员数据失败:', error);
|
||
this.setDefaultXcxMemberLevels();
|
||
}
|
||
},
|
||
|
||
// 加载所有会员等级数据（小程序上书会员 + 翻新会员）
|
||
async loadAllMemberLevels() {
|
||
try {
|
||
// 清空之前的数据
|
||
this.allMemberData.xcx = [];
|
||
this.allMemberData.kwfw = [];
|
||
|
||
// 加载小程序上书会员数据
|
||
await this.loadXcxMemberLevels();
|
||
// 将当前的memberLevels保存到xcx数据中
|
||
this.allMemberData.xcx = [...this.memberLevels];
|
||
|
||
// 加载翻新会员数据
|
||
this.setKwfwMemberLevels();
|
||
// 将当前的memberLevels保存到kwfw数据中
|
||
this.allMemberData.kwfw = [...this.memberLevels];
|
||
|
||
} catch (error) {
|
||
console.error('加载所有会员数据失败:', error);
|
||
this.setDefaultAllMemberLevels();
|
||
}
|
||
},
|
||
|
||
// 设置默认小程序上书会员等级数据
|
||
setDefaultXcxMemberLevels() {
|
||
this.memberLevels = [{
|
||
id: 1,
|
||
name: '月付会员 (点击开通)',
|
||
price: '39.90',
|
||
originalPrice: 3990, // 以分为单位
|
||
color: this.levelColors[0],
|
||
unit: '月',
|
||
length: 1,
|
||
sort: 1,
|
||
serviceName: 'xcx上书会员',
|
||
benefits: [
|
||
'每月上传书籍数量增加',
|
||
'优先展示您的商品',
|
||
'专属客服服务',
|
||
'月度VIP标识'
|
||
]
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '年度会员 (点击开通)',
|
||
price: '399.00',
|
||
originalPrice: 39900, // 以分为单位
|
||
color: this.levelColors[1],
|
||
unit: '月',
|
||
length: 12,
|
||
sort: 2,
|
||
serviceName: 'xcx上书会员',
|
||
benefits: [
|
||
'无限制上传书籍数量',
|
||
'优先展示您的商品',
|
||
'24小时专属客服服务',
|
||
'年度VIP专属标识',
|
||
'更多增值服务特权'
|
||
]
|
||
}
|
||
];
|
||
},
|
||
|
||
// 设置默认会员等级数据（兼容旧版本）
|
||
setDefaultMemberLevels() {
|
||
this.setDefaultXcxMemberLevels();
|
||
},
|
||
|
||
// 设置默认所有会员等级数据（小程序上书会员 + 翻新会员）
|
||
setDefaultAllMemberLevels() {
|
||
this.setDefaultXcxMemberLevels();
|
||
|
||
// 添加翻新会员
|
||
this.memberLevels.push({
|
||
id: 'kwfw',
|
||
name: '孔网翻新会员/月 (点击开通)',
|
||
price: '98.00',
|
||
originalPrice: 9800, // 以分为单位
|
||
color: this.levelColors[2], // 使用紫色
|
||
unit: '月',
|
||
length: 1,
|
||
sort: 1,
|
||
serviceName: 'xcx翻新会员',
|
||
benefits: [
|
||
'无限制使用孔网商品翻新功能',
|
||
'批量处理商品信息',
|
||
'优先获得新功能体验'
|
||
],
|
||
type: 'kwfw' // 标识为孔网翻新会员
|
||
});
|
||
},
|
||
|
||
// 设置孔网翻新会员等级数据
|
||
setKwfwMemberLevels() {
|
||
this.memberLevels = [{
|
||
id: 'kwfw',
|
||
name: '孔网翻新会员/月',
|
||
price: '98.00',
|
||
originalPrice: 9800, // 以分为单位
|
||
// price: '0.01',
|
||
// originalPrice: 1, // 以分为单位
|
||
color: this.levelColors[2], // 使用紫色
|
||
unit: '月',
|
||
length: 1,
|
||
sort: 1,
|
||
serviceName: 'xcx翻新会员',
|
||
benefits: [
|
||
'无限制使用孔网商品翻新功能',
|
||
'批量处理商品信息',
|
||
'优先获得新功能体验'
|
||
],
|
||
type: 'kwfw' // 标识为孔网翻新会员
|
||
}];
|
||
},
|
||
|
||
// 选择会员等级
|
||
selectMember(index) {
|
||
this.selectedIndex = index;
|
||
},
|
||
|
||
// 处理支付
|
||
async handlePay() {
|
||
if (this.selectedIndex === -1 || this.isLoading) {
|
||
return;
|
||
}
|
||
|
||
const selectedLevel = this.memberLevels[this.selectedIndex];
|
||
console.log('selectedLevel:', selectedLevel);
|
||
|
||
uni.showModal({
|
||
title: '确认支付',
|
||
content: `您选择了${selectedLevel.name}，需支付¥${selectedLevel.price}，确认继续吗？`,
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
this.isLoading = true;
|
||
|
||
uni.showLoading({
|
||
title: '发起支付...'
|
||
});
|
||
|
||
try {
|
||
// 如果是孔网翻新会员，使用特殊的支付处理逻辑
|
||
if (selectedLevel.type === 'kwfw') {
|
||
await this.handleKwfwMemberPay(selectedLevel);
|
||
} else {
|
||
// 普通会员支付逻辑
|
||
await this.handleNormalMemberPay(selectedLevel);
|
||
}
|
||
} catch (error) {
|
||
console.error('支付过程出错:', error);
|
||
uni.showToast({
|
||
title: '支付过程出错，请重试',
|
||
icon: 'none'
|
||
});
|
||
} finally {
|
||
uni.hideLoading();
|
||
this.isLoading = false;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 处理普通会员支付
|
||
async handleNormalMemberPay(selectedLevel) {
|
||
try {
|
||
const userId = uni.getStorageSync('userId')
|
||
// 第一步：支付前创建订单记录
|
||
const orderData = {
|
||
userId: userId,
|
||
memberType: 'normal',
|
||
amount: selectedLevel.price,
|
||
originalPrice: selectedLevel.originalPrice,
|
||
createTime: new Date().toISOString(),
|
||
unit: selectedLevel.unit,
|
||
length: selectedLevel.length,
|
||
serviceName: selectedLevel.serviceName,
|
||
};
|
||
|
||
console.log('支付前创建普通会员订单:', orderData);
|
||
const createResult = await createKwfwMemberOrder(orderData);
|
||
console.log('创建普通会员订单:', createResult);
|
||
|
||
if (!createResult.success) {
|
||
throw new Error('创建订单失败: ' + createResult.error);
|
||
}
|
||
|
||
// const orderId = createResult.orderId;
|
||
// console.log('普通会员订单创建成功，订单ID:', orderId);
|
||
|
||
// 第二步：发起支付
|
||
// 使用原始价格（分）进行支付
|
||
const originalPrice = selectedLevel.originalPrice;
|
||
|
||
// 获取会员等级ID
|
||
const settledId = selectedLevel.id;
|
||
// console.log('支付会员等级ID:', settledId);
|
||
console.log('订单id:', createResult.orderId.orderId);
|
||
const payResult = await callWxPay(originalPrice, settledId, 'normal', createResult.orderId
|
||
.orderId);
|
||
|
||
// console.log('支付结果:', payResult);
|
||
// console.log('订单更新结果:', updateResult);
|
||
|
||
// 调用更新用户书籍数量限制接口
|
||
// const userId = uni.getStorageSync('userId');
|
||
// const limitUpdateResult = await updateUserBooksCountLimit(payResult, orderId, userId, settledId);
|
||
// console.log('用户书籍数量限制更新结果:', limitUpdateResult);
|
||
|
||
// 孔网翻新会员的订单状态更新在 memberSelect.vue 中通过 updateKwfwMemberOrder 处理
|
||
// console.log('上书会员支付成功，订单状态将通过专用接口更新');
|
||
if (payResult.success) {
|
||
const updateResult = await updateKwfwMemberOrder(createResult.orderId.orderId, payResult, userId);
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success'
|
||
});
|
||
|
||
// 支付成功后的处理
|
||
setTimeout(() => {
|
||
// 如果有回调函数，调用它
|
||
const app = getApp();
|
||
if (app.memberSelectCallback) {
|
||
app.memberSelectCallback(true);
|
||
}
|
||
|
||
// 返回上一页
|
||
// uni.navigateBack();
|
||
uni.navigateTo({
|
||
url: '/pages/user/index'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付未完成',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('普通会员支付过程出错:', error);
|
||
uni.showToast({
|
||
title: '支付过程出错: ' + error.message,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
|
||
// 处理孔网翻新会员支付
|
||
async handleKwfwMemberPay(selectedLevel) {
|
||
// 导入孔网翻新会员订单相关函数
|
||
try {
|
||
const userId = uni.getStorageSync('userId')
|
||
// 第一步：支付前创建订单记录
|
||
const orderData = {
|
||
userId: userId,
|
||
memberType: 'kwfw',
|
||
amount: selectedLevel.price,
|
||
originalPrice: selectedLevel.originalPrice,
|
||
createTime: new Date().toISOString(),
|
||
unit: selectedLevel.unit,
|
||
length: selectedLevel.length,
|
||
serviceName: selectedLevel.serviceName,
|
||
sort: selectedLevel.sort,
|
||
};
|
||
|
||
console.log('支付前创建订单:', orderData);
|
||
const createResult = await createKwfwMemberOrder(orderData);
|
||
console.log('createResult:', createResult);
|
||
if (!createResult.success) {
|
||
throw new Error('创建订单失败: ' + createResult.error);
|
||
}
|
||
|
||
// orderId = createResult.orderId;
|
||
// console.log('订单创建成功，订单ID:', orderId);
|
||
|
||
// 第二步：发起支付
|
||
// 使用原始价格（分）进行支付
|
||
const originalPrice = selectedLevel.originalPrice;
|
||
|
||
// 孔网翻新会员使用特殊的ID标识
|
||
const settledId = 'kwfw_member';
|
||
console.log('支付孔网翻新会员ID:', settledId);
|
||
console.log('订单id:', createResult.orderId.orderId);
|
||
const payResult = await callWxPay(originalPrice, settledId, 'kwfw', createResult.orderId.orderId);
|
||
console.log('支付结果:', payResult);
|
||
|
||
|
||
|
||
// 孔网翻新会员的订单状态更新在 memberSelect.vue 中通过 updateKwfwMemberOrder 处理
|
||
if (payResult.success) {
|
||
await updateKwfwMemberOrder(createResult.orderId.orderId, payResult, userId);
|
||
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'success'
|
||
});
|
||
// 支付成功后的处理
|
||
setTimeout(() => {
|
||
// 如果有孔网翻新会员回调函数，调用它
|
||
const app = getApp();
|
||
if (app.kwfwMemberCallback) {
|
||
app.kwfwMemberCallback(true);
|
||
}
|
||
|
||
// 返回上一页
|
||
// uni.navigateBack();
|
||
uni.navigateTo({
|
||
url: '/pages/user/index'
|
||
});
|
||
}, 1500);
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付未完成',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('孔网翻新会员支付过程出错:', error);
|
||
uni.showToast({
|
||
title: '支付过程出错: ' + error.message,
|
||
icon: 'none',
|
||
duration: 3000
|
||
});
|
||
}
|
||
},
|
||
|
||
// Tab切换方法
|
||
switchTab(index) {
|
||
this.activeTabIndex = index;
|
||
this.selectedIndex = -1; // 重置选择状态
|
||
|
||
const tabType = this.tabs[index].type;
|
||
if (tabType === 'xcx') {
|
||
// 显示小程序上书会员
|
||
this.memberLevels = [...this.allMemberData.xcx];
|
||
} else if (tabType === 'kwfw') {
|
||
// 显示孔网翻新会员
|
||
this.memberLevels = [...this.allMemberData.kwfw];
|
||
}
|
||
},
|
||
|
||
// 时间戳转换为北京时间字符串
|
||
formatTimestamp(timestamp) {
|
||
if (!timestamp) return '';
|
||
|
||
const date = new Date(timestamp);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
||
return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
|
||
},
|
||
|
||
// 计算距离到期还有多少天
|
||
calculateDaysRemaining(timestamp) {
|
||
if (!timestamp) return 0;
|
||
|
||
const now = new Date().getTime();
|
||
const expiration = new Date(timestamp).getTime();
|
||
const diffTime = expiration - now;
|
||
|
||
if (diffTime <= 0) return 0;
|
||
|
||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||
},
|
||
|
||
// 获取用户小程序上书会员状态
|
||
async getUserXcxMemberStatus() {
|
||
try {
|
||
const userId = uni.getStorageSync('userId');
|
||
if (!userId) {
|
||
console.log('用户未登录');
|
||
return;
|
||
}
|
||
|
||
const response = await getUserRecbusiness(userId);
|
||
console.log('小程序上书会员状态响应:', response);
|
||
|
||
if (response && response.data) {
|
||
if (response.data.code === 200 && response.data.data) {
|
||
// 成功获取用户会员状态
|
||
const data = response.data.data;
|
||
|
||
// 判断是否过期：有expirationDate但isVip为false
|
||
const isExpired = !data.isVip && data.expirationDate;
|
||
|
||
this.userMemberStatus.xcx = {
|
||
isVip: data.isVip,
|
||
isExpired: isExpired,
|
||
count: data.count || 0,
|
||
expirationDate: data.expirationDate,
|
||
expirationDateStr: data.expirationDate ? this.formatTimestamp(data
|
||
.expirationDate) : '',
|
||
daysRemaining: data.expirationDate ? this.calculateDaysRemaining(data
|
||
.expirationDate) : 0
|
||
};
|
||
console.log('小程序上书会员状态更新成功:', this.userMemberStatus.xcx);
|
||
} else {
|
||
// 其他错误情况，设置为未开通状态
|
||
console.log('小程序上书会员：获取状态失败，设置为未开通状态', response);
|
||
this.userMemberStatus.xcx = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
count: 0,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
}
|
||
} else {
|
||
// 响应为空，设置为未开通状态
|
||
console.log('小程序上书会员：响应为空，设置为未开通状态');
|
||
this.userMemberStatus.xcx = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
count: 0,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
}
|
||
} catch (error) {
|
||
console.error('获取小程序上书会员状态失败:', error);
|
||
// 发生异常时也设置为未开通状态
|
||
this.userMemberStatus.xcx = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
count: 0,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
}
|
||
},
|
||
|
||
// 获取用户孔网翻新会员状态
|
||
async getUserKwfwMemberStatus() {
|
||
try {
|
||
const userId = uni.getStorageSync('userId');
|
||
if (!userId) {
|
||
console.log('用户未登录');
|
||
return;
|
||
}
|
||
|
||
const response = await checkKwfwMemberStatus(userId);
|
||
console.log('孔网翻新会员状态响应:', response);
|
||
|
||
if (response) {
|
||
if (response.data.code === 200 && response.data.data) {
|
||
// 用户存在，处理会员状态
|
||
const data = response.data.data;
|
||
|
||
// 判断是否过期：有expirationDate但isVip为false
|
||
const isExpired = !data.isVip && data.expirationDate;
|
||
|
||
this.userMemberStatus.kwfw = {
|
||
isVip: data.isVip || false,
|
||
isExpired: isExpired,
|
||
expirationDate: data.expirationDate,
|
||
expirationDateStr: data.expirationDate ? this.formatTimestamp(data
|
||
.expirationDate) : '',
|
||
daysRemaining: data.expirationDate ? this.calculateDaysRemaining(data
|
||
.expirationDate) : 0
|
||
};
|
||
} else if (response.data.code === 40001) {
|
||
// 用户未找到，设置为未开通状态
|
||
console.log('孔网翻新会员：用户未找到，设置为未开通状态');
|
||
this.userMemberStatus.kwfw = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
} else {
|
||
// 其他错误情况，也设置为未开通状态
|
||
console.log('孔网翻新会员：其他错误，设置为未开通状态', response);
|
||
this.userMemberStatus.kwfw = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('获取孔网翻新会员状态失败:', error);
|
||
// 发生异常时也设置为未开通状态
|
||
this.userMemberStatus.kwfw = {
|
||
isVip: false,
|
||
isExpired: false,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
}
|
||
},
|
||
|
||
// 获取所有用户会员状态
|
||
async loadUserMemberStatus() {
|
||
await Promise.all([
|
||
this.getUserXcxMemberStatus(),
|
||
this.getUserKwfwMemberStatus()
|
||
]);
|
||
},
|
||
|
||
// 根据会员卡片类型获取对应的用户会员状态
|
||
|
||
// 获取当前Tab的会员状态
|
||
getCurrentTabMemberStatus() {
|
||
const currentTabType = this.getCurrentTabType();
|
||
if (currentTabType === 'xcx' && this.userMemberStatus.xcx) {
|
||
return this.userMemberStatus.xcx;
|
||
} else if (currentTabType === 'kwfw' && this.userMemberStatus.kwfw) {
|
||
return this.userMemberStatus.kwfw;
|
||
}
|
||
return {
|
||
isVip: false,
|
||
isExpired: false,
|
||
count: 0,
|
||
expirationDate: null,
|
||
expirationDateStr: '',
|
||
daysRemaining: 0
|
||
};
|
||
},
|
||
|
||
// 获取当前Tab的类型
|
||
getCurrentTabType() {
|
||
if (this.showTabs && this.tabs && this.tabs[this.activeTabIndex] && this.tabs[this.activeTabIndex].type) {
|
||
return this.tabs[this.activeTabIndex].type;
|
||
}
|
||
return '';
|
||
},
|
||
|
||
// 获取当前Tab的名称
|
||
getCurrentTabName() {
|
||
if (this.showTabs && this.tabs && this.tabs[this.activeTabIndex] && this.tabs[this.activeTabIndex].name) {
|
||
return this.tabs[this.activeTabIndex].name;
|
||
}
|
||
return '会员';
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.member-select-container {
|
||
min-height: 100vh;
|
||
background-color: #f8f9fc;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.page-header {
|
||
margin-bottom: 40rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.header-subtitle {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 会员状态统一显示区域样式 */
|
||
.member-status-overview {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.status-card {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 16rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.15);
|
||
}
|
||
|
||
|
||
|
||
.status-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.status-type {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.status-badge.vip {
|
||
background-color: #FFD700;
|
||
color: #333;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-badge.expired {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
color: #FF6B6B;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
border: 1rpx solid #FF6B6B;
|
||
}
|
||
|
||
.status-card-content {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
border-radius: 12rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.status-detail {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.status-detail:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
.detail-label.expired {
|
||
color: #FF6B6B;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.detail-value.remaining-days {
|
||
color: #FFD700;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.no-member-tip {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
padding: 40rpx 30rpx;
|
||
text-align: center;
|
||
border: 2rpx dashed #ddd;
|
||
}
|
||
|
||
.tip-text {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.tab-container {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.tab-list {
|
||
display: flex;
|
||
background-color: #f5f5f5;
|
||
border-radius: 12rpx;
|
||
padding: 6rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
border-radius: 8rpx;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-item.active {
|
||
background-color: #fff;
|
||
color: #4A5CFF;
|
||
font-weight: bold;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.member-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.member-card {
|
||
background-color: #fff;
|
||
border-radius: 16rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.member-card.selected {
|
||
transform: scale(1.02);
|
||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.card-header {
|
||
padding: 30rpx;
|
||
color: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.card-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -40rpx;
|
||
top: -40rpx;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.card-price {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 30rpx;
|
||
}
|
||
|
||
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.benefit-item:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.benefit-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: #f0f5ff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #4A5CFF;
|
||
margin-right: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.benefit-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.select-mark {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.select-icon {
|
||
color: #4A5CFF;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bottom-bar {
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
border-radius: 16rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.selected-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.selected-name {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.selected-price {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #FF4757;
|
||
}
|
||
|
||
.pay-button {
|
||
background: linear-gradient(to right, #4A5CFF, #6979FF);
|
||
color: #fff;
|
||
padding: 20rpx 60rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
box-shadow: 0 10rpx 20rpx rgba(74, 92, 255, 0.3);
|
||
}
|
||
|
||
.pay-button.disabled {
|
||
background: linear-gradient(to right, #ccc, #ddd);
|
||
box-shadow: none;
|
||
opacity: 0.8;
|
||
}
|
||
</style> |