修复一些基础样式错误,增加了前端一番赏定时类型显示下单的限制
This commit is contained in:
parent
de1a80cc13
commit
f3c0ab6d8f
@ -34,8 +34,8 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="action-buttons">
|
<view class="action-buttons">
|
||||||
<button v-if="selectedItems.length === 0" class="btn-common btn-random" @tap="handleRandomOne">随机一发</button>
|
<button v-if="selectedItems.length === 0" class="btn-common btn-random" @tap="handleRandomOne" :disabled="disabled">随机一发</button>
|
||||||
<button v-else class="btn-common btn-buy" @tap="handleBuy">去支付</button>
|
<button v-else class="btn-common btn-buy" @tap="handleBuy" :disabled="disabled">去支付</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -59,7 +59,9 @@ import PaymentPopup from '@/components/PaymentPopup.vue'
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
activityId: { type: [String, Number], required: true },
|
activityId: { type: [String, Number], required: true },
|
||||||
issueId: { type: [String, Number], required: true },
|
issueId: { type: [String, Number], required: true },
|
||||||
pricePerDraw: { type: Number, default: 0 } // 单抽价格,用于计算总价
|
pricePerDraw: { type: Number, default: 0 },
|
||||||
|
disabled: { type: Boolean, default: false },
|
||||||
|
disabledText: { type: String, default: '' }
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['payment-success'])
|
const emit = defineEmits(['payment-success'])
|
||||||
@ -76,6 +78,9 @@ const totalAmount = computed(() => {
|
|||||||
return (selectedItems.value.length * props.pricePerDraw).toFixed(2)
|
return (selectedItems.value.length * props.pricePerDraw).toFixed(2)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const disabled = computed(() => !!props.disabled)
|
||||||
|
const disabledMessage = computed(() => props.disabledText || '暂不可下单')
|
||||||
|
|
||||||
watch(() => props.issueId, (newVal) => {
|
watch(() => props.issueId, (newVal) => {
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
loadChoices()
|
loadChoices()
|
||||||
@ -83,6 +88,12 @@ watch(() => props.issueId, (newVal) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
watch(() => props.disabled, (v) => {
|
||||||
|
if (v && paymentVisible.value) {
|
||||||
|
paymentVisible.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (props.issueId) {
|
if (props.issueId) {
|
||||||
loadChoices()
|
loadChoices()
|
||||||
@ -136,6 +147,10 @@ function isSelected(item) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleSelect(item) {
|
function handleSelect(item) {
|
||||||
|
if (disabled.value) {
|
||||||
|
uni.showToast({ title: disabledMessage.value, icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
if (item.status === 'sold' || item.is_sold) {
|
if (item.status === 'sold' || item.is_sold) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -149,12 +164,20 @@ function handleSelect(item) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleBuy() {
|
function handleBuy() {
|
||||||
|
if (disabled.value) {
|
||||||
|
uni.showToast({ title: disabledMessage.value, icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
if (selectedItems.value.length === 0) return
|
if (selectedItems.value.length === 0) return
|
||||||
paymentVisible.value = true
|
paymentVisible.value = true
|
||||||
fetchCoupons()
|
fetchCoupons()
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleRandomOne() {
|
function handleRandomOne() {
|
||||||
|
if (disabled.value) {
|
||||||
|
uni.showToast({ title: disabledMessage.value, icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
const available = choices.value.filter(item =>
|
const available = choices.value.filter(item =>
|
||||||
!item.is_sold && item.status !== 'sold' && !isSelected(item)
|
!item.is_sold && item.status !== 'sold' && !isSelected(item)
|
||||||
)
|
)
|
||||||
@ -201,6 +224,11 @@ async function fetchCoupons() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function onPaymentConfirm(paymentData) {
|
async function onPaymentConfirm(paymentData) {
|
||||||
|
if (disabled.value) {
|
||||||
|
paymentVisible.value = false
|
||||||
|
uni.showToast({ title: disabledMessage.value, icon: 'none' })
|
||||||
|
return
|
||||||
|
}
|
||||||
paymentVisible.value = false
|
paymentVisible.value = false
|
||||||
|
|
||||||
const selectedSlots = selectedItems.value.map(item => item.id || item.position)
|
const selectedSlots = selectedItems.value.map(item => item.id || item.position)
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
<!-- 顶部背景图(模糊处理) -->
|
<!-- 顶部背景图(模糊处理) -->
|
||||||
<view class="page-bg">
|
<view class="page-bg">
|
||||||
<image class="bg-image" :src="detail.banner" mode="aspectFill" />
|
<image class="bg-image" :src="coverUrl" mode="aspectFill" />
|
||||||
<view class="bg-mask"></view>
|
<view class="bg-mask"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -20,7 +20,7 @@
|
|||||||
|
|
||||||
<!-- 头部信息卡片 -->
|
<!-- 头部信息卡片 -->
|
||||||
<view class="header-card animate-enter">
|
<view class="header-card animate-enter">
|
||||||
<image class="header-cover" :src="detail.banner" mode="aspectFill" />
|
<image class="header-cover" :src="coverUrl" mode="aspectFill" />
|
||||||
<view class="header-info">
|
<view class="header-info">
|
||||||
<view class="header-title">{{ detail.name || detail.title || '一番赏活动' }}</view>
|
<view class="header-title">{{ detail.name || detail.title || '一番赏活动' }}</view>
|
||||||
<view class="header-price-row">
|
<view class="header-price-row">
|
||||||
@ -28,9 +28,13 @@
|
|||||||
<text class="price-num">{{ (Number(detail.price_draw || 0) / 100).toFixed(2) }}</text>
|
<text class="price-num">{{ (Number(detail.price_draw || 0) / 100).toFixed(2) }}</text>
|
||||||
<text class="price-unit">/发</text>
|
<text class="price-unit">/发</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="header-time-row" v-if="scheduledTimeText">
|
||||||
|
<text class="time-label">本期结束</text>
|
||||||
|
<text class="time-value">{{ scheduledTimeText }}</text>
|
||||||
|
</view>
|
||||||
<view class="header-tags">
|
<view class="header-tags">
|
||||||
<view class="tag-item">超高爆率</view>
|
<view class="tag-item">公开透明</view>
|
||||||
<view class="tag-item">公平公正</view>
|
<view class="tag-item">拒绝套路</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="header-actions">
|
<view class="header-actions">
|
||||||
@ -49,7 +53,7 @@
|
|||||||
<view class="section-container animate-enter stagger-1" v-if="currentIssueRewards.length > 0">
|
<view class="section-container animate-enter stagger-1" v-if="currentIssueRewards.length > 0">
|
||||||
<view class="section-header">
|
<view class="section-header">
|
||||||
<text class="section-title">赏品一览</text>
|
<text class="section-title">赏品一览</text>
|
||||||
<text class="section-more">查看全部 ></text>
|
<text class="section-more" @tap="openRewardsPopup">查看全部</text>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view class="preview-scroll" scroll-x>
|
<scroll-view class="preview-scroll" scroll-x>
|
||||||
<view class="preview-item" v-for="(item, idx) in currentIssueRewards" :key="idx">
|
<view class="preview-item" v-for="(item, idx) in currentIssueRewards" :key="idx">
|
||||||
@ -75,6 +79,10 @@
|
|||||||
<text class="arrow">▶</text>
|
<text class="arrow">▶</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="issue-block-tip" v-if="!isOrderAllowed">
|
||||||
|
<text class="issue-block-text">{{ orderBlockedReason }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 选号组件 -->
|
<!-- 选号组件 -->
|
||||||
<view class="selector-body" v-if="activityId && currentIssueId">
|
<view class="selector-body" v-if="activityId && currentIssueId">
|
||||||
@ -82,6 +90,8 @@
|
|||||||
:activity-id="activityId"
|
:activity-id="activityId"
|
||||||
:issue-id="currentIssueId"
|
:issue-id="currentIssueId"
|
||||||
:price-per-draw="Number(detail.price_draw || 0) / 100"
|
:price-per-draw="Number(detail.price_draw || 0) / 100"
|
||||||
|
:disabled="!isOrderAllowed"
|
||||||
|
:disabled-text="orderBlockedReason"
|
||||||
@payment-success="onPaymentSuccess"
|
@payment-success="onPaymentSuccess"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
@ -101,12 +111,35 @@
|
|||||||
<button class="overlay-close" @tap="closeFlip">关闭</button>
|
<button class="overlay-close" @tap="closeFlip">关闭</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view v-if="rewardsVisible" class="rewards-overlay" @touchmove.stop.prevent>
|
||||||
|
<view class="rewards-mask" @tap="closeRewardsPopup"></view>
|
||||||
|
<view class="rewards-panel" @tap.stop>
|
||||||
|
<view class="rewards-header">
|
||||||
|
<text class="rewards-title">{{ currentIssueTitle }} · 奖品与概率</text>
|
||||||
|
<text class="rewards-close" @tap="closeRewardsPopup">×</text>
|
||||||
|
</view>
|
||||||
|
<scroll-view scroll-y class="rewards-list">
|
||||||
|
<view v-for="(item, idx) in rewardsForPopup" :key="item.id || idx" class="rewards-item">
|
||||||
|
<image class="rewards-thumb" :src="item.image" mode="aspectFill" />
|
||||||
|
<view class="rewards-info">
|
||||||
|
<view class="rewards-name-row">
|
||||||
|
<text class="rewards-name">{{ item.title || '-' }}</text>
|
||||||
|
<view class="rewards-tag" v-if="item.boss">BOSS</view>
|
||||||
|
</view>
|
||||||
|
<text class="rewards-percent">概率 {{ formatPercent(item.percent) }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="!rewardsForPopup.length" class="rewards-empty">暂无奖品数据</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed } from 'vue'
|
||||||
import { onLoad } from '@dcloudio/uni-app'
|
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||||
import FlipGrid from '../../../components/FlipGrid.vue'
|
import FlipGrid from '../../../components/FlipGrid.vue'
|
||||||
import YifanSelector from '@/components/YifanSelector.vue'
|
import YifanSelector from '@/components/YifanSelector.vue'
|
||||||
import { getActivityDetail, getActivityIssues, getActivityIssueRewards, getActivityWinRecords } from '../../../api/appUser'
|
import { getActivityDetail, getActivityIssues, getActivityIssueRewards, getActivityWinRecords } from '../../../api/appUser'
|
||||||
@ -124,6 +157,7 @@ const drawLoading = ref(false)
|
|||||||
const points = ref(0)
|
const points = ref(0)
|
||||||
const flipRef = ref(null)
|
const flipRef = ref(null)
|
||||||
const showFlip = ref(false)
|
const showFlip = ref(false)
|
||||||
|
const rewardsVisible = ref(false)
|
||||||
const currentIssueRewards = computed(() => (currentIssueId.value && rewardsMap.value[currentIssueId.value]) ? rewardsMap.value[currentIssueId.value] : [])
|
const currentIssueRewards = computed(() => (currentIssueId.value && rewardsMap.value[currentIssueId.value]) ? rewardsMap.value[currentIssueId.value] : [])
|
||||||
const currentIssueTitle = computed(() => {
|
const currentIssueTitle = computed(() => {
|
||||||
const arr = issues.value || []
|
const arr = issues.value || []
|
||||||
@ -138,11 +172,93 @@ const currentIssueRemain = computed(() => {
|
|||||||
return cur && cur.remain !== undefined ? cur.remain : ''
|
return cur && cur.remain !== undefined ? cur.remain : ''
|
||||||
})
|
})
|
||||||
|
|
||||||
|
function formatDateTime(v) {
|
||||||
|
const s = String(v || '').trim()
|
||||||
|
if (!s) return ''
|
||||||
|
const d = new Date(s)
|
||||||
|
if (Number.isNaN(d.getTime())) return s
|
||||||
|
const y = d.getFullYear()
|
||||||
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||||||
|
const day = String(d.getDate()).padStart(2, '0')
|
||||||
|
const hh = String(d.getHours()).padStart(2, '0')
|
||||||
|
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||||
|
const ss = String(d.getSeconds()).padStart(2, '0')
|
||||||
|
return `${y}-${m}-${day} ${hh}:${mm}:${ss}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const scheduledTimeText = computed(() => formatDateTime(detail.value && (detail.value.scheduled_time || detail.value.scheduledTime)))
|
||||||
|
|
||||||
|
function parseTimeMs(v) {
|
||||||
|
if (v === undefined || v === null || v === '') return null
|
||||||
|
if (typeof v === 'number') {
|
||||||
|
if (!Number.isFinite(v)) return null
|
||||||
|
return v < 1e12 ? v * 1000 : v
|
||||||
|
}
|
||||||
|
const s = String(v).trim()
|
||||||
|
if (!s) return null
|
||||||
|
const asNum = Number(s)
|
||||||
|
if (Number.isFinite(asNum)) return asNum < 1e12 ? asNum * 1000 : asNum
|
||||||
|
const d = new Date(s)
|
||||||
|
if (Number.isNaN(d.getTime())) return null
|
||||||
|
return d.getTime()
|
||||||
|
}
|
||||||
|
|
||||||
|
const nowMs = ref(Date.now())
|
||||||
|
let nowTimer = null
|
||||||
|
function startNowTicker() {
|
||||||
|
stopNowTicker()
|
||||||
|
nowMs.value = Date.now()
|
||||||
|
nowTimer = setInterval(() => { nowMs.value = Date.now() }, 1000)
|
||||||
|
}
|
||||||
|
function stopNowTicker() {
|
||||||
|
if (nowTimer) {
|
||||||
|
clearInterval(nowTimer)
|
||||||
|
nowTimer = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const scheduledTimeMs = computed(() => parseTimeMs(detail.value && (detail.value.scheduled_time || detail.value.scheduledTime)))
|
||||||
|
const remainMs = computed(() => {
|
||||||
|
const end = scheduledTimeMs.value
|
||||||
|
if (!end) return null
|
||||||
|
return end - nowMs.value
|
||||||
|
})
|
||||||
|
const isOrderAllowed = computed(() => {
|
||||||
|
const ms = remainMs.value
|
||||||
|
if (ms === null) return true
|
||||||
|
return ms > 25000
|
||||||
|
})
|
||||||
|
const orderBlockedReason = computed(() => {
|
||||||
|
const ms = remainMs.value
|
||||||
|
if (ms === null) return ''
|
||||||
|
if (ms <= 0) return '本期已结束,暂不可下单'
|
||||||
|
if (ms <= 25000) return '距本期结束不足25秒,暂不可下单'
|
||||||
|
return ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const rewardsForPopup = computed(() => {
|
||||||
|
const arr = currentIssueRewards.value || []
|
||||||
|
return Array.isArray(arr) ? arr : []
|
||||||
|
})
|
||||||
|
|
||||||
|
function formatPercent(v) {
|
||||||
|
const n = Number(v)
|
||||||
|
if (!Number.isFinite(n)) return '0%'
|
||||||
|
return `${n}%`
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRewardsPopup() {
|
||||||
|
rewardsVisible.value = true
|
||||||
|
}
|
||||||
|
function closeRewardsPopup() {
|
||||||
|
rewardsVisible.value = false
|
||||||
|
}
|
||||||
|
|
||||||
// 显示规则
|
// 显示规则
|
||||||
function showRules() {
|
function showRules() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '活动规则',
|
title: '活动规则',
|
||||||
content: detail.value.rules || '1. 选择号码进行抽选\n2. 每个号码对应一个奖品\n3. 已售号码不可再选',
|
content: detail.value.rules || '1. 选择号码进行抽选\n2. 每个号码对应一个奖品\n3. 已售号码不可再选\n4.未满足开赏条件,将自动为所有参与用户退款,款项将原路返回',
|
||||||
showCancel: false
|
showCancel: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -165,6 +281,8 @@ async function fetchDetail(id) {
|
|||||||
const data = await getActivityDetail(id)
|
const data = await getActivityDetail(id)
|
||||||
detail.value = data || {}
|
detail.value = data || {}
|
||||||
statusText.value = statusToText(detail.value.status)
|
statusText.value = statusToText(detail.value.status)
|
||||||
|
const title = String(detail.value.name || detail.value.title || '一番赏')
|
||||||
|
try { uni.setNavigationBarTitle({ title }) } catch (_) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
function unwrap(list) {
|
function unwrap(list) {
|
||||||
@ -190,6 +308,8 @@ function cleanUrl(u) {
|
|||||||
if (m && m[0]) return m[0]
|
if (m && m[0]) return m[0]
|
||||||
return s.replace(/[`'\"]/g, '').trim()
|
return s.replace(/[`'\"]/g, '').trim()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const coverUrl = computed(() => cleanUrl(detail.value && (detail.value.image || detail.value.banner || '')))
|
||||||
function truthy(v) {
|
function truthy(v) {
|
||||||
if (typeof v === 'boolean') return v
|
if (typeof v === 'boolean') return v
|
||||||
const s = String(v || '').trim().toLowerCase()
|
const s = String(v || '').trim().toLowerCase()
|
||||||
@ -321,7 +441,7 @@ function nextIssue() {
|
|||||||
|
|
||||||
|
|
||||||
function onPreviewBanner() {
|
function onPreviewBanner() {
|
||||||
const url = detail.value.banner || ''
|
const url = coverUrl.value || ''
|
||||||
if (url) uni.previewImage({ urls: [url], current: url })
|
if (url) uni.previewImage({ urls: [url], current: url })
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -361,6 +481,7 @@ function onPaymentSuccess(payload) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onLoad((opts) => {
|
onLoad((opts) => {
|
||||||
|
startNowTicker()
|
||||||
const id = (opts && opts.id) || ''
|
const id = (opts && opts.id) || ''
|
||||||
if (id) {
|
if (id) {
|
||||||
activityId.value = id
|
activityId.value = id
|
||||||
@ -371,6 +492,10 @@ onLoad((opts) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
function closeFlip() { showFlip.value = false }
|
function closeFlip() { showFlip.value = false }
|
||||||
|
|
||||||
|
onUnload(() => {
|
||||||
|
stopNowTicker()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -495,8 +620,9 @@ function closeFlip() { showFlip.value = false }
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
height: 180rpx;
|
min-height: 180rpx;
|
||||||
|
padding: 6rpx 0;
|
||||||
}
|
}
|
||||||
.header-title {
|
.header-title {
|
||||||
font-size: $font-xl;
|
font-size: $font-xl;
|
||||||
@ -517,6 +643,23 @@ function closeFlip() { showFlip.value = false }
|
|||||||
.price-num { font-size: $font-xxl; font-weight: 900; margin: 0 4rpx; font-family: 'DIN Alternate', sans-serif; }
|
.price-num { font-size: $font-xxl; font-weight: 900; margin: 0 4rpx; font-family: 'DIN Alternate', sans-serif; }
|
||||||
.price-unit { font-size: $font-sm; color: $text-sub; margin-left: 4rpx; }
|
.price-unit { font-size: $font-sm; color: $text-sub; margin-left: 4rpx; }
|
||||||
|
|
||||||
|
.header-time-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
margin-bottom: $spacing-sm;
|
||||||
|
}
|
||||||
|
.time-label {
|
||||||
|
font-size: $font-xs;
|
||||||
|
color: $text-tertiary;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.time-value {
|
||||||
|
font-size: $font-sm;
|
||||||
|
color: $text-sub;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.header-tags {
|
.header-tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: $spacing-xs;
|
gap: $spacing-xs;
|
||||||
@ -737,6 +880,19 @@ function closeFlip() { showFlip.value = false }
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.issue-block-tip {
|
||||||
|
margin: -10rpx 0 20rpx;
|
||||||
|
padding: 16rpx 20rpx;
|
||||||
|
border-radius: $radius-md;
|
||||||
|
background: rgba($uni-color-warning, 0.08);
|
||||||
|
border: 1rpx solid rgba($uni-color-warning, 0.25);
|
||||||
|
}
|
||||||
|
.issue-block-text {
|
||||||
|
color: $uni-color-warning;
|
||||||
|
font-size: $font-sm;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.selector-body {
|
.selector-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
@ -800,4 +956,98 @@ function closeFlip() { showFlip.value = false }
|
|||||||
from { opacity: 0; transform: scale(0.9); }
|
from { opacity: 0; transform: scale(0.9); }
|
||||||
to { opacity: 1; transform: scale(1); }
|
to { opacity: 1; transform: scale(1); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rewards-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; }
|
||||||
|
.rewards-mask {
|
||||||
|
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
|
||||||
|
background: rgba(0,0,0,0.6);
|
||||||
|
backdrop-filter: blur(10rpx);
|
||||||
|
}
|
||||||
|
.rewards-panel {
|
||||||
|
position: absolute;
|
||||||
|
left: $spacing-lg;
|
||||||
|
right: $spacing-lg;
|
||||||
|
bottom: calc(env(safe-area-inset-bottom) + 24rpx);
|
||||||
|
max-height: 70vh;
|
||||||
|
background: rgba($bg-card, 0.95);
|
||||||
|
border-radius: $radius-xl;
|
||||||
|
box-shadow: $shadow-card;
|
||||||
|
border: 1rpx solid rgba(255,255,255,0.5);
|
||||||
|
overflow: hidden;
|
||||||
|
animation: slideUp 0.25s ease-out;
|
||||||
|
}
|
||||||
|
.rewards-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $spacing-lg;
|
||||||
|
border-bottom: 1rpx solid rgba(0,0,0,0.06);
|
||||||
|
}
|
||||||
|
.rewards-title {
|
||||||
|
font-size: $font-md;
|
||||||
|
font-weight: 800;
|
||||||
|
color: $text-main;
|
||||||
|
}
|
||||||
|
.rewards-close {
|
||||||
|
font-size: 48rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: $text-tertiary;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
.rewards-list {
|
||||||
|
max-height: 60vh;
|
||||||
|
padding: $spacing-lg;
|
||||||
|
}
|
||||||
|
.rewards-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: $spacing-md;
|
||||||
|
border-radius: $radius-lg;
|
||||||
|
background: rgba(255,255,255,0.75);
|
||||||
|
border: 1rpx solid rgba(0,0,0,0.03);
|
||||||
|
box-shadow: $shadow-xs;
|
||||||
|
margin-bottom: $spacing-md;
|
||||||
|
}
|
||||||
|
.rewards-thumb {
|
||||||
|
width: 96rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: $radius-md;
|
||||||
|
background: $bg-secondary;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-right: $spacing-md;
|
||||||
|
}
|
||||||
|
.rewards-info { flex: 1; min-width: 0; }
|
||||||
|
.rewards-name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.rewards-name {
|
||||||
|
font-size: $font-md;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $text-main;
|
||||||
|
@include text-ellipsis(1);
|
||||||
|
}
|
||||||
|
.rewards-tag {
|
||||||
|
font-size: $font-xs;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
background: $gradient-brand;
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
padding: 4rpx 10rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.rewards-percent {
|
||||||
|
font-size: $font-sm;
|
||||||
|
color: $text-sub;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.rewards-empty {
|
||||||
|
padding: 60rpx 0 20rpx;
|
||||||
|
text-align: center;
|
||||||
|
color: $text-tertiary;
|
||||||
|
font-size: $font-sm;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -589,7 +589,20 @@ export default {
|
|||||||
uni.navigateTo({ url: '/pages/address/index' })
|
uni.navigateTo({ url: '/pages/address/index' })
|
||||||
},
|
},
|
||||||
toHelp() {
|
toHelp() {
|
||||||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
uni.showActionSheet({
|
||||||
|
itemList: ['购买协议', '用户协议'],
|
||||||
|
success: (res) => {
|
||||||
|
const idx = Number(res && res.tapIndex)
|
||||||
|
if (idx === 0) {
|
||||||
|
uni.navigateTo({ url: '/pages/agreement/purchase' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (idx === 1) {
|
||||||
|
uni.navigateTo({ url: '/pages/agreement/user' })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
},
|
},
|
||||||
handleInvite() {
|
handleInvite() {
|
||||||
const code = this.getInviteCode()
|
const code = this.getInviteCode()
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user