添加订单
This commit is contained in:
bobobobo
@@ -65,6 +65,9 @@
|
||||
/> -->
|
||||
<!-- 红包 -->
|
||||
<RedEnvelope @onDialogPopupShowOrHide="handleSwiperDotShow" />
|
||||
|
||||
<!-- 直播按钮 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<!-- 语音通话 -->
|
||||
<CallView
|
||||
v-if="
|
||||
@@ -82,8 +85,6 @@
|
||||
type="1"
|
||||
@onDialogPopupShowOrHide="handleSwiperDotShow"
|
||||
/>
|
||||
<!-- 直播按钮 -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<LiveStream
|
||||
v-if="
|
||||
currentConversation?.type === TUIChatEngine.TYPES.CONV_GROUP
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
"description" : "融云实时音视频 SDK uni 原生插件",
|
||||
"platforms" : "Android,iOS",
|
||||
"url" : "https://ext.dcloud.net.cn/plugin?id=6372",
|
||||
"android_package_name" : "uni.app.UNI9EFDC69",
|
||||
"android_package_name" : "uni.app.UNI9EFDC69WWCC",
|
||||
"ios_bundle_id" : "",
|
||||
"isCloud" : true,
|
||||
"bought" : 1,
|
||||
@@ -133,7 +133,7 @@
|
||||
"description" : "融云即时通讯 SDK uni 原生插件V2",
|
||||
"platforms" : "Android,iOS",
|
||||
"url" : "https://ext.dcloud.net.cn/plugin?id=9227",
|
||||
"android_package_name" : "uni.app.UNI9EFDC69",
|
||||
"android_package_name" : "uni.app.UNI9EFDC69WWCC",
|
||||
"ios_bundle_id" : "",
|
||||
"isCloud" : true,
|
||||
"bought" : 1,
|
||||
|
||||
@@ -499,6 +499,13 @@
|
||||
"navigationBarTitleText": "购买记录",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/discover/order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "记录详情",
|
||||
"navigationBarBackgroundColor": "#ffffff"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
||||
378
pages/discover/order/detail.scss
Normal file
378
pages/discover/order/detail.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
.goods-detail-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f9fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
// 商品轮播图
|
||||
.goods-swiper {
|
||||
width: 100%;
|
||||
height: 750rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.swiper-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image-indicator {
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
right: 30rpx;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
|
||||
.indicator-text {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片通用样式
|
||||
.goods-info-card,
|
||||
.spec-card,
|
||||
.info-card,
|
||||
.detail-card,
|
||||
.service-card,
|
||||
.params-card {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
// 商品信息卡片
|
||||
.goods-info-card {
|
||||
margin-top: -40rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.price-section {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.current-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.price-symbol {
|
||||
font-size: 32rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.price-number {
|
||||
font-size: 48rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 700;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.discount-tag {
|
||||
background-color: #fff0f0;
|
||||
border-radius: 6rpx;
|
||||
padding: 4rpx 12rpx;
|
||||
|
||||
.discount-text {
|
||||
font-size: 22rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
font-size: 36rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-description {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 28rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tags-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
|
||||
.tag-item {
|
||||
background-color: #f0f9ff;
|
||||
border-radius: 8rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
|
||||
.tag-text {
|
||||
font-size: 24rpx;
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 规格卡片
|
||||
.spec-card {
|
||||
.card-header {
|
||||
margin-bottom: 24rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-list {
|
||||
.spec-item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx dashed #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.spec-key {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
min-width: 140rpx;
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 信息卡片
|
||||
.info-card {
|
||||
.info-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1rpx;
|
||||
height: 50rpx;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 详情卡片
|
||||
.detail-card {
|
||||
.detail-content {
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
|
||||
.default-detail {
|
||||
.detail-section {
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16rpx;
|
||||
padding-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 8rpx;
|
||||
height: 30rpx;
|
||||
background-color: #1890ff;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-text {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 服务卡片
|
||||
.service-card {
|
||||
.service-list {
|
||||
.service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 24rpx;
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.service-info {
|
||||
flex: 1;
|
||||
|
||||
.service-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 参数卡片
|
||||
.params-card {
|
||||
.params-table {
|
||||
.param-row {
|
||||
display: flex;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.param-key {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.param-value {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部装饰
|
||||
.bottom-decor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 60rpx 0 40rpx;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.decor-line {
|
||||
flex: 1;
|
||||
height: 1rpx;
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
.end-text {
|
||||
font-size: 24rpx;
|
||||
color: #ccc;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 富文本内容样式调整
|
||||
::v-deep .rich-text {
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
margin: 40rpx 0 20rpx;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
}
|
||||
284
pages/discover/order/detail.vue
Normal file
284
pages/discover/order/detail.vue
Normal file
@@ -0,0 +1,284 @@
|
||||
<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 => {
|
||||
uni.previewImage({
|
||||
current: goods.value.images[index],
|
||||
urls: goods.value.images,
|
||||
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 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 goods.images" :key="index">
|
||||
<image
|
||||
:src="img"
|
||||
class="swiper-image"
|
||||
mode="aspectFit"
|
||||
@tap="previewImage(index)"
|
||||
/>
|
||||
<!-- 图片指示器 -->
|
||||
<view class="image-indicator">
|
||||
<text class="indicator-text">
|
||||
{{ index + 1 }}/{{ goods.images.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">{{ goods.price.toFixed(2) }}</text>
|
||||
<text v-if="goods.originalPrice" class="original-price">
|
||||
¥{{ goods.originalPrice.toFixed(2) }}
|
||||
</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">{{ goods.description }}</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"
|
||||
v-for="spec in goods.specifications"
|
||||
:key="spec.key"
|
||||
>
|
||||
<text class="spec-key">{{ spec.key }}：</text>
|
||||
<text class="spec-value">{{ spec.value }}</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>
|
||||
317
pages/discover/order/index.scss
Normal file
317
pages/discover/order/index.scss
Normal file
@@ -0,0 +1,317 @@
|
||||
.order-list-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 页面标题
|
||||
.page-header {
|
||||
background-color: #ffffff;
|
||||
padding: 40rpx 32rpx 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
// 状态筛选
|
||||
.status-filter {
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 32rpx;
|
||||
background-color: #ffffff;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.filter-item {
|
||||
display: inline-block;
|
||||
padding: 12rpx 28rpx;
|
||||
margin-right: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 40rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 60rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单列表容器
|
||||
.order-list-container {
|
||||
flex: 1;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 加载骨架屏
|
||||
.loading-container {
|
||||
padding: 24rpx 0;
|
||||
|
||||
.loading-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
|
||||
.skeleton-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.skeleton-text-container {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.skeleton-text-line {
|
||||
height: 30rpx;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6rpx;
|
||||
|
||||
&.short {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&.long {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 订单列表
|
||||
.order-list {
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
// 订单卡片
|
||||
.order-card {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 24rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
|
||||
&:active {
|
||||
transform: translateY(-2rpx);
|
||||
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
// 订单头部
|
||||
.order-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 28rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.order-number {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.order-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.order-status {
|
||||
.status-label {
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 状态颜色定义
|
||||
.status-wait-pay {
|
||||
background-color: #fff0f0;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.status-paid {
|
||||
background-color: #f0f9ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #f0fff0;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-group {
|
||||
background-color: #fff5f0;
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.status-wait-ship {
|
||||
background-color: #f0f5ff;
|
||||
color: #2f54eb;
|
||||
}
|
||||
|
||||
.status-shipped {
|
||||
background-color: #f0f5ff;
|
||||
color: #2f54eb;
|
||||
}
|
||||
|
||||
.status-wait-receive {
|
||||
background-color: #f0f5ff;
|
||||
color: #2f54eb;
|
||||
}
|
||||
|
||||
.status-received {
|
||||
background-color: #f0fff0;
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.status-refunded {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品项
|
||||
.goods-item {
|
||||
display: flex;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.goods-image {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.goods-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-spec {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.goods-price-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.goods-price {
|
||||
font-size: 28rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.goods-quantity {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 订单统计
|
||||
.order-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 28rpx;
|
||||
padding-top: 24rpx;
|
||||
border-top: 1rpx solid #f5f5f5;
|
||||
|
||||
.total-quantity {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.price-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.total-label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 32rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 卡片底部装饰线
|
||||
.card-footer {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.decorative-line {
|
||||
height: 2rpx;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
#e6f7ff 20%,
|
||||
#e6f7ff 80%,
|
||||
transparent
|
||||
);
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,215 @@
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import { navigateTo } from '@/utils/router'
|
||||
import { getUserBuyRecordList } from '../../../api/my-index'
|
||||
|
||||
// 响应式数据
|
||||
const paging = ref(null)
|
||||
const activeFilter = ref('') // -1表示全部
|
||||
const orders = ref([])
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
dataList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 15
|
||||
})
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
0: { text: '待支付', color: 'status-wait-pay', bgColor: '#fff0f0' },
|
||||
1: { text: '已支付', color: 'status-paid', bgColor: '#f0f9ff' },
|
||||
2: { text: '已取消', color: 'status-cancelled', bgColor: '#f5f5f5' },
|
||||
3: { text: '已完成', color: 'status-completed', bgColor: '#f0fff0' },
|
||||
4: { text: '等待拼团', color: 'status-group', bgColor: '#fff5f0' },
|
||||
5: { text: '待发货', color: 'status-wait-ship', bgColor: '#f0f5ff' },
|
||||
6: { text: '已发货', color: 'status-shipped', bgColor: '#f0f5ff' },
|
||||
7: {
|
||||
text: '待收货',
|
||||
color: 'status-wait-receive',
|
||||
bgColor: '#f0f5ff'
|
||||
},
|
||||
8: { text: '已收货', color: 'status-received', bgColor: '#f0fff0' },
|
||||
9: { text: '已退款', color: 'status-refunded', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
// 初始化加载订单数据
|
||||
const getList = async () => {
|
||||
try {
|
||||
const res = await getUserBuyRecordList({
|
||||
orderStatus: activeFilter.value,
|
||||
pageNum: formData.pageNum,
|
||||
pageSize: formData.pageSize
|
||||
})
|
||||
formData.dataList = res.rows
|
||||
paging.value.complete(res.rows)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换筛选状态
|
||||
const changeFilter = status => {
|
||||
formData.pageNum = 1
|
||||
activeFilter.value = status
|
||||
getList()
|
||||
}
|
||||
|
||||
// 跳转到订单详情
|
||||
const goToDetail = item => {
|
||||
navigateTo('/pages/discover/order/detail', { id: item.id })
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = status => {
|
||||
return statusMap[status]?.text || '未知状态'
|
||||
}
|
||||
|
||||
// 获取状态对应的CSS类
|
||||
const getStatusClass = status => {
|
||||
return statusMap[status]?.color || 'status-default'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>购买记录pages\discover\order\index.vue</view>
|
||||
<z-paging
|
||||
ref="paging"
|
||||
v-model="formData.dataList"
|
||||
:default-page-no="formData.pageNum"
|
||||
:default-page-size="formData.pageSize"
|
||||
safe-area-inset-bottom
|
||||
use-safe-area-placeholder
|
||||
:paging-style="{ 'background-color': '#f9f9f9' }"
|
||||
@query="getList"
|
||||
>
|
||||
<template #top>
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">我的购买记录</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单状态筛选（可选功能） -->
|
||||
<scroll-view
|
||||
class="status-filter"
|
||||
scroll-x="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === '' }"
|
||||
@tap="changeFilter('')"
|
||||
>
|
||||
全部订单
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 0 }"
|
||||
@tap="changeFilter(0)"
|
||||
>
|
||||
待支付
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 5 }"
|
||||
@tap="changeFilter(5)"
|
||||
>
|
||||
待发货
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 7 }"
|
||||
@tap="changeFilter(7)"
|
||||
>
|
||||
待收货
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 3 }"
|
||||
@tap="changeFilter(3)"
|
||||
>
|
||||
已完成
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<view class="order-list-page">
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list-container">
|
||||
<!-- 加载状态 -->
|
||||
<!-- <view v-if="loading" class="loading-container">
|
||||
<view class="loading-item" v-for="i in 3" :key="i">
|
||||
<view class="skeleton-image"></view>
|
||||
<view class="skeleton-text-container">
|
||||
<view class="skeleton-text-line short"></view>
|
||||
<view class="skeleton-text-line medium"></view>
|
||||
<view class="skeleton-text-line long"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view
|
||||
class="order-card"
|
||||
v-for="item in formData.dataList"
|
||||
:key="item.id"
|
||||
@tap="goToDetail(item)"
|
||||
>
|
||||
<!-- 订单头部：订单号 + 状态 -->
|
||||
<view class="order-header">
|
||||
<view class="order-info">
|
||||
<text class="order-number">
|
||||
订单号: {{ item.orderNo }}
|
||||
</text>
|
||||
<text class="order-time">{{ item.updateTime }}</text>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<text
|
||||
class="status-label"
|
||||
:class="getStatusClass(item.orderStatus)"
|
||||
>
|
||||
{{ getStatusText(item.orderStatus) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-item">
|
||||
<image
|
||||
src="https://p2.itc.cn/images01/20230924/143c6d6ba2044b79b36eb3de4c92145d.jpeg"
|
||||
class="goods-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ item.userName }}</text>
|
||||
<text class="goods-spec">默认规格</text>
|
||||
<view class="goods-price-info">
|
||||
<text class="goods-price">¥{{ item.unitPrice }}</text>
|
||||
<text class="goods-quantity">
|
||||
x1
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单统计信息 -->
|
||||
<view class="order-summary">
|
||||
<text class="total-quantity">共1件商品</text>
|
||||
<view class="price-section">
|
||||
<text class="total-label">合计:</text>
|
||||
<text class="total-price">¥{{ item.payAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部装饰线 -->
|
||||
<view class="card-footer">
|
||||
<view class="decorative-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user