163 lines
5.3 KiB
Vue
163 lines
5.3 KiB
Vue
<template>
|
||
<view class="product-detail-container">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
:title="navTitle"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="180rpx"
|
||
:border="false"
|
||
backgroundColor="#ffffff"
|
||
/>
|
||
|
||
<!-- 内容区 -->
|
||
<scroll-view scroll-y class="detail-scroll">
|
||
<!-- 商品主图轮播 -->
|
||
<view class="swiper-box">
|
||
<swiper class="detail-swiper" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="400">
|
||
<swiper-item v-for="(img, idx) in images" :key="idx">
|
||
<image class="swiper-image" :src="img" mode="aspectFit"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 标题与价格、销量 -->
|
||
<view class="summary">
|
||
<view class="title">{{ product.title }}</view>
|
||
<view class="price-row">
|
||
<text class="price">{{ product.price }}积分</text>
|
||
<text class="exchanged">已兑换{{ product.times }}件</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="divider"></view>
|
||
|
||
<!-- 温馨提示 -->
|
||
<view class="tips-section">
|
||
<view class="tips-title">温馨提示</view>
|
||
<view class="tip-item"><text class="num">1</text><text class="tip-text">商品一经兑换，消耗的积分恕不退还，请各位用户兑换前仔细阅读商品描述详情。</text></view>
|
||
<view class="tip-item"><text class="num">2</text><text class="tip-text">商品兑换后不接受退换货申请，虚拟商品请在商品有效期内及时兑换。</text></view>
|
||
<view class="tip-item"><text class="num">3</text><text class="tip-text">所有实物商品包邮，虚拟商品将发送相关信息到联系邮箱或手机。</text></view>
|
||
<view class="tip-item"><text class="num">4</text><text class="tip-text">实物商品兑换后2-4工作日内发放，虚拟商品兑换后1-3工作日内发送。</text></view>
|
||
</view>
|
||
|
||
<!-- 物品展示 -->
|
||
<view class="section-title">物品展示</view>
|
||
<view class="rich-wrapper">
|
||
<rich-text :nodes="product.content"></rich-text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部兑换按钮 -->
|
||
<view class="bottom-bar">
|
||
<view class="redeem-btn" @click="goExchange">在线兑换</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import goods_api from '@/api/goods_api'
|
||
import docUrl from '@/utils/docUrl'
|
||
|
||
const product = ref({ id: '', title: '', price: 0, times: 0, content: '' })
|
||
const images = ref([])
|
||
const navTitle = ref('商品详情')
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
|
||
const fetchDetail = async (id) => {
|
||
try {
|
||
const res = await goods_api.getGoodsDetail({ uuid: id })
|
||
if ((res.code === 200 || res.code === '200') && res.data) {
|
||
product.value = {
|
||
id,
|
||
title: res.data.name || '',
|
||
price: res.data.bonuspoints || 0,
|
||
times: res.data.times || 0,
|
||
content: res.data.content || ''
|
||
}
|
||
navTitle.value = (product.value.title || '').slice(0, 18)
|
||
const list = []
|
||
if (res.data.detial_imgpath) {
|
||
res.data.detial_imgpath.split(',').forEach(u => u && list.push(docUrl + u))
|
||
}
|
||
// if (res.data.img) list.push(docUrl + res.data.img)
|
||
images.value = list.length ? list : ['/static/product2.jpg']
|
||
} else {
|
||
uni.showToast({ title: res.message || '获取详情失败', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
console.error(e)
|
||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onLoad((opts) => {
|
||
if (opts && opts.id) fetchDetail(opts.id)
|
||
})
|
||
|
||
const goExchange = () => {
|
||
uni.navigateTo({
|
||
url: `/pages_goods/exchange/index?id=${product.value.id}&title=${encodeURIComponent(product.value.title)}&price=${product.value.price}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.product-detail-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.detail-scroll {
|
||
position: absolute;
|
||
top: 180rpx;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 100rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 主图轮播 */
|
||
.swiper-box { background: #fff; }
|
||
.detail-swiper { height: 480rpx; }
|
||
.swiper-image { width: 100%; height: 100%; }
|
||
|
||
/* 概要 */
|
||
.summary { background: #fff; padding: 24rpx; }
|
||
.title { font-size: 34rpx; color: #333; line-height: 1.6; }
|
||
.price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
|
||
.price { color: #e74c3c; font-size: 34rpx; font-weight: 700; }
|
||
.exchanged { color: #999; font-size: 24rpx; }
|
||
.divider { height: 16rpx; background: #f5f5f5; }
|
||
|
||
/* 温馨提示 */
|
||
.tips-section { background: #fff; padding: 24rpx; }
|
||
.tips-title { text-align: center; font-size: 36rpx; font-weight: 700; color: #333; margin-bottom: 16rpx; }
|
||
.tip-item { display: flex; align-items: flex-start; background: #f7f7f7; border-radius: 8rpx; padding: 20rpx; margin: 12rpx 0; }
|
||
.num { width: 36rpx; height: 36rpx; line-height: 36rpx; text-align: center; color: #888; background: #fff; border-radius: 50%; margin-right: 16rpx; border: 1rpx solid #ddd; }
|
||
.tip-text { color: #666; font-size: 26rpx; line-height: 1.6; flex: 1; }
|
||
|
||
.section-title { background: #fff; padding: 24rpx; font-size: 34rpx; font-weight: 700; color: #333; text-align: center; }
|
||
.rich-wrapper { background: #fff; padding: 24rpx; }
|
||
|
||
/* 底部按钮 */
|
||
.bottom-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #27c5b8;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.redeem-btn { color: #fff; font-size: 32rpx; font-weight: 700; }
|
||
</style>
|