206 lines
6.7 KiB
Vue
206 lines
6.7 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"
|
||
/> -->
|
||
<navBar :title="navTitle" />
|
||
<!-- 内容区 -->
|
||
<scroll-view scroll-y class="detail-scroll">
|
||
<!-- 商品主图轮播 -->
|
||
<view class="swiper-box">
|
||
<swiper class="detail-swiper" :indicator-dots="true" :autoplay="images.length > 1 ? true : false" :interval="5000" :duration="400" indicator-color="#ccc" indicator-active-color="#8B2316" :circular="true">
|
||
<swiper-item v-for="(img, idx) in images" :key="idx">
|
||
<image class="swiper-image" :src="img" mode="widthFix"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 标题与价格、销量 -->
|
||
<view class="summary">
|
||
<view class="title"><text v-if="product.type == 1">[包邮]</text>{{ product.title }}</view>
|
||
<view class="price-row">
|
||
<text class="price">{{ product.price }}积分</text>
|
||
<text class="exchanged" v-if="product.times > 0">已兑换{{ 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 class="bar" v-if="isUpan"></view>
|
||
<view class="redeem-btn" @click="goExchangeUpan" v-if="isUpan" :class="{'disabled': restNum <= 0}">福利兑换<text v-if="restNum > 0">剩余{{ restNum }}个</text></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'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
|
||
const product = ref({ id: '', title: '', price: 0, times: 0, content: '' })
|
||
const images = ref([])
|
||
const navTitle = ref('商品详情');
|
||
const isUpan = ref(false);
|
||
const restNum = ref(0);
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
const getUpanWelfareCount = async () => {
|
||
const res = await goods_api.getUpanWelfareCount()
|
||
if (res.code == 200) {
|
||
restNum.value=res.data;
|
||
};
|
||
}
|
||
const fetchDetail = async (id) => {
|
||
try {
|
||
const res = await goods_api.getGoodsDetail({ uuid: id })
|
||
if ((res.code === 200 || res.code === '200') && res.data) {
|
||
let content=res.data.content.replace(/\<img/gi, '<img class="richImg"');
|
||
product.value = {
|
||
id,
|
||
type: res.data.type,
|
||
title: res.data.name || '',
|
||
price: res.data.bonuspoints || 0,
|
||
times: res.data.times || 0,
|
||
content: content
|
||
|
||
}
|
||
if(res.data.name.indexOf('U盘') > -1 || res.data.name.indexOf('u盘') > -1){
|
||
isUpan.value = true;
|
||
getUpanWelfareCount();
|
||
};
|
||
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 goExchangeUpan = () => {
|
||
console.log(restNum.value);
|
||
if(restNum.value>0){
|
||
uni.navigateTo({
|
||
url: `/pages_app/buyUpan/buyUpan?restNum=${restNum.value}`
|
||
})
|
||
}
|
||
}
|
||
|
||
const goExchange = () => {
|
||
uni.navigateTo({
|
||
url: `/pages_goods/exchange/index?id=${product.value.id}&title=${encodeURIComponent(product.value.title)}&price=${product.value.price}&type=${product.value.type}×=${product.value.times}`
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.product-detail-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.detail-scroll {
|
||
position: absolute;
|
||
top: calc(var(--status-bar-height) + 44px);
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 100rpx;
|
||
background: #fff;
|
||
}
|
||
|
||
/* 主图轮播 */
|
||
.swiper-box { background: #fff; }
|
||
.detail-swiper { height: 440rpx; }
|
||
.swiper-image { width: 100%; height: 440rpx; }
|
||
|
||
/* 概要 */
|
||
.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;
|
||
}
|
||
.bottom-bar .bar{
|
||
height: 100rpx;
|
||
background-color: #f7f7f7;
|
||
width:2rpx;
|
||
}
|
||
.bottom-bar .redeem-btn{
|
||
height: 100rpx;
|
||
background-color: #27c5b8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff; font-size: 32rpx;flex:1;
|
||
}
|
||
.bottom-bar .redeem-btn.disabled{
|
||
background-color: #ccc;
|
||
}
|
||
.rich-wrapper >>> .richImg{
|
||
width: 100%!important;
|
||
}
|
||
</style>
|