完成一键登录和支付功能
This commit is contained in:
future
@@ -1,138 +1,271 @@
|
||||
<template>
|
||||
<view class="member-card-section">
|
||||
<view class="member-card-section__inner">
|
||||
<view class="member-card-section__head">
|
||||
<view class="member-card-section__head-inner">
|
||||
<text class="member-card-section__title">
|
||||
我的会员卡
|
||||
</text>
|
||||
<view
|
||||
class="member-card-section__link"
|
||||
hover-class="mi-tap--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap="$emit('view-all')"
|
||||
>
|
||||
<text
|
||||
class="member-card-section__link-text"
|
||||
>
|
||||
查看全部
|
||||
</text>
|
||||
<image class="member-card-section__link-arrow" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/chevronright12.png" mode="aspectFit" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-card-section__inner">
|
||||
<view class="member-card-section__head">
|
||||
<view class="member-card-section__head-inner">
|
||||
<text class="member-card-section__title">
|
||||
我的会员卡
|
||||
</text>
|
||||
<view
|
||||
class="member-card-preview"
|
||||
hover-class="mi-tap-card--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap="$emit('view-all')"
|
||||
class="member-card-section__count"
|
||||
>
|
||||
<view class="member-card-preview__inner">
|
||||
<view class="member-card-preview__head">
|
||||
<view class="member-card-preview__head-inner">
|
||||
<view
|
||||
class="member-card-preview__type-row"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-wrap"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-border"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-bg"
|
||||
></view>
|
||||
<view
|
||||
class="member-card-preview__icon-stroke"
|
||||
></view>
|
||||
</view>
|
||||
<image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
|
||||
</view>
|
||||
<text
|
||||
class="member-card-preview__name"
|
||||
>
|
||||
{{ cardInfo.name }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__tag"
|
||||
>
|
||||
<text class="member-card-preview__tag-text">
|
||||
{{ cardInfo.detailTag || '详情' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="member-card-preview__expire">
|
||||
{{ cardInfo.expireDate }}
|
||||
</text>
|
||||
<view class="member-card-preview__footer">
|
||||
<view class="member-card-preview__footer-inner">
|
||||
<view
|
||||
class="member-card-preview__days"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__days-num"
|
||||
>
|
||||
{{ cardInfo.remainingDays }}
|
||||
</text>
|
||||
<text
|
||||
class="member-card-preview__days-unit"
|
||||
>
|
||||
天剩余
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__renew"
|
||||
hover-class="mi-tap-btn--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="$emit('renew')"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__renew-text"
|
||||
>
|
||||
续费
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__purchase"
|
||||
hover-class="mi-tap-btn--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="$emit('purchase')"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__purchase-text"
|
||||
>
|
||||
购买新卡
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-card-tip">
|
||||
<view class="member-card-tip__inner">
|
||||
<view class="member-card-tip__content">
|
||||
<image class="member-card-tip__icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/clock1.png" mode="aspectFit" />
|
||||
<text
|
||||
class="member-card-tip__text"
|
||||
>
|
||||
{{ cardInfo.tip }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-card-tip__border"></view>
|
||||
<text class="member-card-section__count-num">{{ cardInfo.activeCount || 0 }}</text>
|
||||
<text class="member-card-section__count-text">张有效</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview"
|
||||
hover-class="mi-tap-card--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap="$emit('view-all')"
|
||||
>
|
||||
<view class="member-card-preview__inner">
|
||||
<view class="member-card-preview__head">
|
||||
<view class="member-card-preview__head-inner">
|
||||
<view
|
||||
class="member-card-preview__type-row"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-wrap"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-border"
|
||||
>
|
||||
<view
|
||||
class="member-card-preview__icon-bg"
|
||||
></view>
|
||||
<view
|
||||
class="member-card-preview__icon-stroke"
|
||||
></view>
|
||||
</view>
|
||||
<image class="member-card-preview__icon-line" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/Line_2_468.png" mode="aspectFill" />
|
||||
</view>
|
||||
<text
|
||||
class="member-card-preview__name"
|
||||
>
|
||||
{{ cardInfo.hasActiveCard ? cardInfo.name : '暂无会员卡' }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__tag"
|
||||
:class="getTagClass()"
|
||||
v-if="cardInfo.hasActiveCard"
|
||||
>
|
||||
<text class="member-card-preview__tag-text">
|
||||
{{ getTagText() }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="member-card-preview__expire" v-if="cardInfo.hasActiveCard && cardInfo.expireDate">
|
||||
有效期至 {{ cardInfo.expireDate }}
|
||||
</text>
|
||||
<view class="member-card-preview__footer">
|
||||
<view class="member-card-preview__footer-inner">
|
||||
<view
|
||||
class="member-card-preview__days"
|
||||
v-if="cardInfo.hasActiveCard"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__days-num"
|
||||
:class="getDaysClass()"
|
||||
>
|
||||
{{ getDisplayDays() }}
|
||||
</text>
|
||||
<text
|
||||
class="member-card-preview__days-unit"
|
||||
>
|
||||
{{ getDaysUnit() }}
|
||||
</text>
|
||||
</view>
|
||||
<view
|
||||
class="member-card-preview__purchase"
|
||||
hover-class="mi-tap-btn--hover"
|
||||
:hover-stay-time="150"
|
||||
@tap.stop="$emit('purchase')"
|
||||
>
|
||||
<text
|
||||
class="member-card-preview__purchase-text"
|
||||
>
|
||||
购买新卡
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
cardInfo: { type: Object, required: true }
|
||||
import { reactive, onMounted } from 'vue'
|
||||
import { getPrimaryMemberCard, getMyMemberCardsWithStatus } from '@/api/main.js'
|
||||
import { getMemberId } from '@/utils/request.js'
|
||||
|
||||
defineEmits(['view-all', 'purchase'])
|
||||
|
||||
const cardInfo = reactive({
|
||||
name: '',
|
||||
type: '',
|
||||
remainingTimes: 0,
|
||||
remainingDays: 0,
|
||||
expireDate: '',
|
||||
activeCount: 0,
|
||||
isExpiring: false,
|
||||
isExpired: false,
|
||||
isUsedUp: false,
|
||||
hasActiveCard: false
|
||||
})
|
||||
|
||||
defineEmits(['view-all', 'renew', 'purchase'])
|
||||
let isLoading = false
|
||||
|
||||
// 格式化日期
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return ''
|
||||
try {
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
return `${year}-${month}-${day}`
|
||||
} catch (e) {
|
||||
return dateStr
|
||||
}
|
||||
}
|
||||
|
||||
// 加载会员卡数据
|
||||
async function loadMemberCard() {
|
||||
if (isLoading) {
|
||||
console.log('[MemberInfoMemberCard] 正在加载中，跳过重复请求')
|
||||
return
|
||||
}
|
||||
isLoading = true
|
||||
try {
|
||||
// 使用统一的 getMemberId 方法获取会员ID
|
||||
const memberId = getMemberId()
|
||||
console.log('[MemberInfoMemberCard] memberId:', memberId)
|
||||
|
||||
if (!memberId) {
|
||||
console.log('[MemberInfoMemberCard] 未登录，无会员ID')
|
||||
return
|
||||
}
|
||||
|
||||
console.log('[MemberInfoMemberCard] 加载会员卡数据, memberId:', memberId)
|
||||
|
||||
// 并行获取主要会员卡和有效卡列表
|
||||
const [primaryCardRes, activeCardsRes] = await Promise.all([
|
||||
getPrimaryMemberCard(memberId),
|
||||
getMyMemberCardsWithStatus(memberId, 'active')
|
||||
])
|
||||
|
||||
console.log('[MemberInfoMemberCard] getPrimaryMemberCard 返回:', JSON.stringify(primaryCardRes, null, 2))
|
||||
console.log('[MemberInfoMemberCard] getMyMemberCardsWithStatus(active) 返回:', JSON.stringify(activeCardsRes, null, 2))
|
||||
|
||||
// 解析主要会员卡数据
|
||||
let displayCard = null
|
||||
if (primaryCardRes?.data) {
|
||||
displayCard = primaryCardRes.data
|
||||
} else if (primaryCardRes?.value) {
|
||||
displayCard = primaryCardRes.value
|
||||
} else if (primaryCardRes && typeof primaryCardRes === 'object') {
|
||||
displayCard = primaryCardRes
|
||||
}
|
||||
|
||||
// 计算有效会员卡数量（过滤储值卡）
|
||||
let activeCount = 0
|
||||
let allActiveCards = []
|
||||
if (activeCardsRes?.value) {
|
||||
allActiveCards = activeCardsRes.value
|
||||
} else if (Array.isArray(activeCardsRes)) {
|
||||
allActiveCards = activeCardsRes
|
||||
} else if (activeCardsRes?.data) {
|
||||
allActiveCards = Array.isArray(activeCardsRes.data) ? activeCardsRes.data : (activeCardsRes.data.value || [])
|
||||
}
|
||||
// 过滤储值卡
|
||||
allActiveCards = allActiveCards.filter(card => card.memberCardType !== 'STORED_VALUE_CARD')
|
||||
activeCount = allActiveCards.length
|
||||
|
||||
// 计算卡片状态
|
||||
let diffDays = 0
|
||||
let isExpiring = false
|
||||
let isExpired = false
|
||||
let isUsedUp = false
|
||||
let displayDays = 0
|
||||
|
||||
if (displayCard) {
|
||||
if (displayCard.status === 'USED_UP') {
|
||||
isUsedUp = true
|
||||
displayDays = displayCard.remainingTimes || 0
|
||||
} else if (displayCard.expireTime) {
|
||||
const expireTime = new Date(displayCard.expireTime)
|
||||
const now = new Date()
|
||||
diffDays = Math.ceil((expireTime - now) / (1000 * 60 * 60 * 24))
|
||||
isExpiring = diffDays > 0 && diffDays <= 3
|
||||
isExpired = diffDays <= 0
|
||||
displayDays = Math.abs(diffDays)
|
||||
}
|
||||
}
|
||||
console.log(displayCard)
|
||||
|
||||
// 更新数据
|
||||
cardInfo.name = displayCard?.memberCardName || '暂无会员卡'
|
||||
cardInfo.type = displayCard?.memberCardType || ''
|
||||
cardInfo.remainingTimes = displayCard?.remainingTimes || displayCard?.remainingAmount || 0
|
||||
cardInfo.remainingDays = displayDays
|
||||
cardInfo.expireDate = displayCard?.expireTime ? formatDate(displayCard.expireTime) : ''
|
||||
cardInfo.activeCount = activeCount
|
||||
cardInfo.isExpiring = isExpiring
|
||||
cardInfo.isExpired = isExpired
|
||||
cardInfo.isUsedUp = isUsedUp
|
||||
cardInfo.hasActiveCard = activeCount > 0
|
||||
|
||||
console.log('[MemberInfoMemberCard] 更新后的 cardInfo:', JSON.stringify(cardInfo, null, 2))
|
||||
} catch (e) {
|
||||
console.error('[MemberInfoMemberCard] 加载会员卡数据失败:', e)
|
||||
cardInfo.hasActiveCard = false
|
||||
} finally {
|
||||
isLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载数据
|
||||
onMounted(() => {
|
||||
console.log('[MemberInfoMemberCard] 组件已挂载，开始加载数据')
|
||||
loadMemberCard()
|
||||
})
|
||||
|
||||
function getTagClass() {
|
||||
if (cardInfo.isExpiring) return 'member-card-preview__tag--expiring'
|
||||
if (cardInfo.isExpired) return 'member-card-preview__tag--expired'
|
||||
if (cardInfo.isUsedUp) return 'member-card-preview__tag--expired'
|
||||
return 'member-card-preview__tag--active'
|
||||
}
|
||||
|
||||
function getTagText() {
|
||||
if (cardInfo.isUsedUp) return '已用完'
|
||||
if (cardInfo.isExpired) return '已失效'
|
||||
if (cardInfo.isExpiring) return '临期'
|
||||
return '有效'
|
||||
}
|
||||
|
||||
function getDaysClass() {
|
||||
if (cardInfo.isExpiring) return 'member-card-preview__days-num--expiring'
|
||||
if (cardInfo.isExpired) return 'member-card-preview__days-num--expired'
|
||||
if (cardInfo.isUsedUp) return 'member-card-preview__days-num--expired'
|
||||
return ''
|
||||
}
|
||||
|
||||
function getDisplayDays() {
|
||||
if (cardInfo.isUsedUp) return cardInfo.remainingTimes || 0
|
||||
return cardInfo.remainingDays || 0
|
||||
}
|
||||
|
||||
function getDaysUnit() {
|
||||
if (cardInfo.isUsedUp) return '次剩余'
|
||||
return '天剩余'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user