06488f0237
功能: - Go后端 (Gin + GORM + PostgreSQL) - UniApp用户端 (iOS/Android/小程序) - DaisyUI5后台管理 - JWT认证 + 微信登录 - 盲选加权算法 - 会员系统 + 优惠券 - 打分评价 + 偏好学习
131 lines
2.8 KiB
Vue
131 lines
2.8 KiB
Vue
<template>
|
||
<view class="page-result">
|
||
<view class="result-header">
|
||
<text class="result-icon">🎉</text>
|
||
<text class="result-title">揭晓时刻!</text>
|
||
</view>
|
||
|
||
<view class="result-card card" v-if="result">
|
||
<text class="result-name">{{ result.package_name }}</text>
|
||
<text class="result-merchant">📍 {{ result.merchant_name }}</text>
|
||
<text class="result-desc">{{ result.description }}</text>
|
||
<text class="result-price">💰 ¥{{ result.price_range }}</text>
|
||
<text class="result-match">🎯 匹配度 {{ (result.match_score * 100).toFixed(0) }}%</text>
|
||
</view>
|
||
|
||
<view class="actions">
|
||
<button class="nav-btn" @click="startNav">📍 一键导航</button>
|
||
<button class="fav-btn" @click="collect">⭐ 收藏</button>
|
||
<button class="share-btn" @click="share">📤 分享</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useRoute } from '@dcloudio/uni-app'
|
||
import { blindApi } from '@/api/index.js'
|
||
|
||
const route = useRoute()
|
||
const result = ref(null)
|
||
|
||
onMounted(async () => {
|
||
const id = route.query.id
|
||
if (id) {
|
||
try {
|
||
result.value = await blindApi.getResult(id)
|
||
} catch(e) {}
|
||
}
|
||
})
|
||
|
||
function startNav() {
|
||
uni.openLocation({ latitude: 39.9042, longitude: 116.4074, name: result.value?.merchant_name })
|
||
}
|
||
|
||
function collect() {
|
||
uni.showToast({ title: '已收藏', icon: 'success' })
|
||
}
|
||
|
||
function share() {
|
||
uni.showToast({ title: '分享功能开发中', icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-result {
|
||
min-height: 100vh;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.result-header {
|
||
background: linear-gradient(135deg, #FFD700, #FF8C00);
|
||
padding: 80rpx 30rpx 50rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
.result-icon { font-size: 80rpx; display: block; }
|
||
.result-title { font-size: 36rpx; font-weight: 700; }
|
||
}
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin: 30rpx 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
|
||
text-align: center;
|
||
}
|
||
|
||
.result-name {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
display: block;
|
||
}
|
||
|
||
.result-merchant {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
display: block;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.result-desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.result-price {
|
||
font-size: 32rpx;
|
||
color: #FF6B35;
|
||
font-weight: 600;
|
||
display: block;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.result-match {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.actions {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
padding: 20rpx 24rpx;
|
||
}
|
||
|
||
.nav-btn, .fav-btn, .share-btn {
|
||
flex: 1;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
border: none;
|
||
}
|
||
|
||
.nav-btn { background: #4CAF50; color: #fff; }
|
||
.fav-btn { background: #fff; color: #FFD700; border: 2rpx solid #FFD700; }
|
||
.share-btn { background: #2196F3; color: #fff; }
|
||
</style>
|