diff --git a/TUIKit/components/TUIChat/message-input-toolbar/index.vue b/TUIKit/components/TUIChat/message-input-toolbar/index.vue index 243e102..bfd8c74 100644 --- a/TUIKit/components/TUIChat/message-input-toolbar/index.vue +++ b/TUIKit/components/TUIChat/message-input-toolbar/index.vue @@ -65,6 +65,9 @@ /> --> + + + - - + 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) + }) + + + + + diff --git a/pages/discover/order/index.scss b/pages/discover/order/index.scss new file mode 100644 index 0000000..9d28e8d --- /dev/null +++ b/pages/discover/order/index.scss @@ -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; + } +} + + diff --git a/pages/discover/order/index.vue b/pages/discover/order/index.vue index 70239a8..06d4eeb 100644 --- a/pages/discover/order/index.vue +++ b/pages/discover/order/index.vue @@ -1,11 +1,215 @@ - +