很多页面
This commit is contained in:
haomingming
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="product-detail-container">
|
||||
<!-- 顶部导航栏 -->
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
:title="navTitle"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
: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: 140rpx;
|
||||
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>
|
||||
Reference in New Issue
Block a user