66 lines
1.9 KiB
Vue
66 lines
1.9 KiB
Vue
<template>
|
||
<scroll-view class="page" scroll-y>
|
||
<view class="banner" v-if="detail.banner">
|
||
<image class="banner-img" :src="detail.banner" mode="widthFix" />
|
||
</view>
|
||
<view class="header">
|
||
<view class="title">{{ detail.name || detail.title || '-' }}</view>
|
||
<view class="meta">分类：{{ detail.category_name || '一番赏' }}</view>
|
||
<view class="meta" v-if="detail.price_draw !== undefined">抽选价：￥{{ detail.price_draw }}</view>
|
||
<view class="meta" v-if="detail.status !== undefined">状态：{{ statusText }}</view>
|
||
</view>
|
||
<view class="actions">
|
||
<button class="btn" @click="onPreviewBanner">查看图片</button>
|
||
<button class="btn primary" @click="onParticipate">立即参与</button>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getActivityDetail } from '../../api/appUser'
|
||
|
||
const detail = ref({})
|
||
|
||
function statusToText(s) {
|
||
if (s === 1) return '进行中'
|
||
if (s === 0) return '未开始'
|
||
if (s === 2) return '已结束'
|
||
return String(s || '')
|
||
}
|
||
|
||
const statusText = ref('')
|
||
|
||
async function fetchDetail(id) {
|
||
const data = await getActivityDetail(id)
|
||
detail.value = data || {}
|
||
statusText.value = statusToText(detail.value.status)
|
||
}
|
||
|
||
function onPreviewBanner() {
|
||
const url = detail.value.banner || ''
|
||
if (url) uni.previewImage({ urls: [url], current: url })
|
||
}
|
||
|
||
function onParticipate() {
|
||
uni.showToast({ title: '功能待接入', icon: 'none' })
|
||
}
|
||
|
||
onLoad((opts) => {
|
||
const id = (opts && opts.id) || ''
|
||
if (id) fetchDetail(id)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { height: 100vh }
|
||
.banner { padding: 24rpx }
|
||
.banner-img { width: 100% }
|
||
.header { padding: 0 24rpx }
|
||
.title { font-size: 36rpx; font-weight: 700 }
|
||
.meta { margin-top: 8rpx; font-size: 26rpx; color: #666 }
|
||
.actions { display: flex; padding: 24rpx; gap: 16rpx }
|
||
.btn { flex: 1 }
|
||
.primary { background-color: #007AFF; color: #fff }
|
||
</style> |