316 lines
9.5 KiB
Vue
316 lines
9.5 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getUserBuyRecordDetail } from '../../../api/my-index'
|
||
import { navigateBack } from '../../../utils/router'
|
||
|
||
// 商品数据
|
||
const goods = ref({
|
||
id: 1001,
|
||
title: '简约纯棉T恤 2023夏季新款',
|
||
description:
|
||
'采用100%优质纯棉面料，亲肤透气，经典简约设计，多色可选，百搭时尚单品',
|
||
price: 89.99,
|
||
originalPrice: 129.99,
|
||
discount: 6.9,
|
||
stock: 256,
|
||
monthlySales: 1234,
|
||
totalSales: 8567,
|
||
isFavorite: false,
|
||
|
||
// 商品图片
|
||
images: [
|
||
'https://picsum.photos/seed/goods1/800/800',
|
||
'https://picsum.photos/seed/goods2/800/800',
|
||
'https://picsum.photos/seed/goods3/800/800',
|
||
'https://picsum.photos/seed/goods4/800/800'
|
||
],
|
||
|
||
// 商品标签
|
||
tags: ['纯棉', '透气', '简约', '百搭', '夏季'],
|
||
|
||
// 商品规格
|
||
specifications: [
|
||
{ key: '材质', value: '100%纯棉' },
|
||
{ key: '颜色', value: '白色/黑色/灰色/藏青' },
|
||
{ key: '尺码', value: 'S/M/L/XL/XXL' },
|
||
{ key: '厚度', value: '常规厚度' },
|
||
{ key: '袖长', value: '短袖' },
|
||
{ key: '领型', value: '圆领' },
|
||
{ key: '风格', value: '简约休闲' },
|
||
{ key: '适用人群', value: '男女通用' }
|
||
],
|
||
|
||
// 商品详情
|
||
features:
|
||
'采用精梳棉面料，柔软亲肤，透气性好，不易起球。简约设计，百搭各种风格，无论是休闲还是运动场合都能轻松驾驭。',
|
||
material:
|
||
'面料：100%精梳纯棉；里料：100%纯棉；洗涤建议：30°C以下水温，不可漂白，低温熨烫',
|
||
sizeInfo:
|
||
'S(肩宽44cm/胸围96cm/衣长68cm)、M(肩宽46cm/胸围100cm/衣长70cm)、L(肩宽48cm/胸围104cm/衣长72cm)、XL(肩宽50cm/胸围108cm/衣长74cm)、XXL(肩宽52cm/胸围112cm/衣长76cm)',
|
||
instructions:
|
||
'首次洗涤建议单独清洗，避免深色衣物褪色。自然晾干，避免暴晒。',
|
||
|
||
// 商品参数
|
||
parameters: [
|
||
{ key: '品牌', value: 'SimpleLife' },
|
||
{ key: '商品编号', value: 'SP20230615001' },
|
||
{ key: '产地', value: '中国浙江' },
|
||
{ key: '上市时间', value: '2023年6月' },
|
||
{ key: '适用季节', value: '夏季' },
|
||
{ key: '重量', value: '约0.25kg' },
|
||
{ key: '包装', value: 'OPP袋装' },
|
||
{ key: '质检', value: '已通过国家纺织品质量检验' }
|
||
],
|
||
// 富文本内容（示例）
|
||
detailContent: ''
|
||
})
|
||
|
||
const loading = ref(true)
|
||
const detailData = ref({})
|
||
|
||
// 预览图片
|
||
const previewImage = index => {
|
||
// detailData.imageGallery
|
||
uni.previewImage({
|
||
current: detailData.value.imageGallery[index],
|
||
urls: detailData.value.imageGallery,
|
||
indicator: 'number',
|
||
loop: true
|
||
})
|
||
}
|
||
|
||
const getData = async id => {
|
||
try {
|
||
loading.value = true
|
||
const res = await getUserBuyRecordDetail(id)
|
||
detailData.value = res.data
|
||
loading.value = false
|
||
} catch (error) {
|
||
console.log(error)
|
||
loading.value = false
|
||
navigateBack()
|
||
}
|
||
}
|
||
|
||
// 模拟加载数据
|
||
onLoad(e => {
|
||
getData(e.id)
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view v-if="!loading" class="goods-detail-page">
|
||
<!-- 商品图片轮播 -->
|
||
<swiper
|
||
class="goods-swiper"
|
||
:indicator-dots="true"
|
||
:autoplay="false"
|
||
:interval="3000"
|
||
:duration="500"
|
||
circular>
|
||
<swiper-item
|
||
v-for="(img, index) in detailData.imageGallery"
|
||
:key="index">
|
||
<image
|
||
:src="img"
|
||
class="swiper-image"
|
||
mode="aspectFit"
|
||
@tap="previewImage(index)" />
|
||
<!-- 图片指示器 -->
|
||
<view class="image-indicator">
|
||
<text class="indicator-text">
|
||
{{ index + 1
|
||
}}/{{ detailData.imageGallery.length }}
|
||
</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 商品基本信息卡片 -->
|
||
<view class="goods-info-card">
|
||
<!-- 价格和名称 -->
|
||
<view class="price-section">
|
||
<view class="current-price">
|
||
<text class="price-symbol"
|
||
>¥</text
|
||
>
|
||
<text
|
||
class="price-number"
|
||
>{{ detailData.payAmount }}</text
|
||
>
|
||
<text class="original-price">
|
||
¥{{ detailData.totalAmount }}
|
||
</text>
|
||
<!-- <view v-if="goods.discount" class="discount-tag">
|
||
<text class="discount-text">{{ goods.discount }}折</text>
|
||
</view> -->
|
||
</view>
|
||
<!-- <text class="goods-title">{{ goods.title }}</text> -->
|
||
</view>
|
||
|
||
<!-- 商品描述 -->
|
||
<text
|
||
class="goods-description"
|
||
>{{ detailData.productName }}</text
|
||
>
|
||
|
||
<!-- 商品标签 -->
|
||
<!-- <view class="tags-section">
|
||
<view class="tag-item" v-for="tag in goods.tags" :key="tag">
|
||
<text class="tag-text">{{ tag }}</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 商品规格信息卡片 -->
|
||
<view class="spec-card">
|
||
<view class="card-header">
|
||
<text class="card-title"
|
||
>商品参数</text
|
||
>
|
||
</view>
|
||
<view class="spec-list">
|
||
<view class="spec-item">
|
||
<text class="spec-key"
|
||
>订单号：</text
|
||
>
|
||
<text
|
||
class="spec-value"
|
||
>{{ detailData.orderNo }}</text
|
||
>
|
||
</view>
|
||
<view class="spec-item">
|
||
<text class="spec-key"
|
||
>提交时间：</text
|
||
>
|
||
<text
|
||
class="spec-value"
|
||
>{{ detailData.updateTime }}</text
|
||
>
|
||
</view>
|
||
<view class="spec-item">
|
||
<text class="spec-key"
|
||
>规格：</text
|
||
>
|
||
<text
|
||
class="spec-value"
|
||
>{{ detailData.specText }}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 库存和销量信息卡片 -->
|
||
<!-- <view class="info-card">
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<text class="info-label">库存</text>
|
||
<text class="info-value">{{ goods.stock }}件</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="info-item">
|
||
<text class="info-label">月销量</text>
|
||
<text class="info-value">{{ goods.monthlySales }}件</text>
|
||
</view>
|
||
<view class="divider"></view>
|
||
<view class="info-item">
|
||
<text class="info-label">累计销量</text>
|
||
<text class="info-value">{{ goods.totalSales }}件</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 商品详情描述 -->
|
||
<!-- <view class="detail-card">
|
||
<view class="card-header">
|
||
<text class="card-title">商品详情</text>
|
||
</view>
|
||
<view class="detail-content">
|
||
<rich-text :nodes="goods.detailContent"></rich-text>
|
||
|
||
<view v-if="!goods.detailContent" class="default-detail">
|
||
<view class="detail-section">
|
||
<text class="detail-title">产品特色</text>
|
||
<text class="detail-text">{{ goods.features }}</text>
|
||
</view>
|
||
<view class="detail-section">
|
||
<text class="detail-title">材质说明</text>
|
||
<text class="detail-text">{{ goods.material }}</text>
|
||
</view>
|
||
<view class="detail-section">
|
||
<text class="detail-title">尺寸信息</text>
|
||
<text class="detail-text">{{ goods.sizeInfo }}</text>
|
||
</view>
|
||
<view class="detail-section">
|
||
<text class="detail-title">使用说明</text>
|
||
<text class="detail-text">{{ goods.instructions }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 配送和售后信息 -->
|
||
<!-- <view class="service-card">
|
||
<view class="card-header">
|
||
<text class="card-title">服务保障</text>
|
||
</view>
|
||
<view class="service-list">
|
||
<view class="service-item">
|
||
<text class="service-icon">🚚</text>
|
||
<view class="service-info">
|
||
<text class="service-title">配送服务</text>
|
||
<text class="service-desc">全国包邮 · 48小时内发货</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-item">
|
||
<text class="service-icon">🔄</text>
|
||
<view class="service-info">
|
||
<text class="service-title">退换服务</text>
|
||
<text class="service-desc">
|
||
7天无理由退换货 · 质量问题包退
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-item">
|
||
<text class="service-icon">🛡️</text>
|
||
<view class="service-info">
|
||
<text class="service-title">品质保障</text>
|
||
<text class="service-desc">官方正品 · 假一赔十</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 商品参数表格 -->
|
||
<!-- <view class="params-card">
|
||
<view class="card-header">
|
||
<text class="card-title">商品参数</text>
|
||
</view>
|
||
<view class="params-table">
|
||
<view
|
||
class="param-row"
|
||
v-for="param in goods.parameters"
|
||
:key="param.key"
|
||
>
|
||
<text class="param-key">{{ param.key }}</text>
|
||
<text class="param-value">{{ param.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 底部装饰 -->
|
||
<view class="bottom-decor">
|
||
<view class="decor-line"></view>
|
||
<text class="end-text"
|
||
>商品详情展示完毕</text
|
||
>
|
||
<view class="decor-line"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './detail.scss';
|
||
</style>
|