6 changed files with 598 additions and 51 deletions
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '商品消费', |
||||
navigationBarBackgroundColor: '#fff', |
||||
navigationBarTextStyle: 'black', |
||||
backgroundColor: '#F2F3F5', |
||||
}) |
||||
@ -0,0 +1,138 @@
@@ -0,0 +1,138 @@
|
||||
.order_detail_page { |
||||
min-height: 100vh; |
||||
background-color: #F2F3F5; |
||||
padding: 30px; |
||||
padding-bottom: 150px; // 为底部按钮留出空间 |
||||
|
||||
// 商品卡片 |
||||
.goods_card { |
||||
background-color: #FFFFFF; |
||||
border-radius: 12px; |
||||
padding: 30px; |
||||
margin-bottom: 30px; |
||||
|
||||
.goods_item { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
|
||||
.goods_image { |
||||
width: 208px; |
||||
height: 208px; |
||||
border-radius: 8px; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.goods_info { |
||||
flex: 1; |
||||
margin-left: 30px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
|
||||
.goods_name { |
||||
font-size: 30px; |
||||
color: #000000; |
||||
line-height: 1.4; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.price_container { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin-top: 66px; |
||||
|
||||
.goods_price { |
||||
font-size: 30px; |
||||
color: #FF3A24; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.refund_btn { |
||||
padding: 10px 30px; |
||||
background: #F2F3F5; |
||||
border-radius: 25px; |
||||
|
||||
.refund_text { |
||||
font-size: 25px; |
||||
color: #666666; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 订单信息卡片 |
||||
.order_info_card { |
||||
background-color: #FFFFFF; |
||||
border-radius: 12px; |
||||
padding: 30px; |
||||
|
||||
.info_list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 20px; |
||||
|
||||
.info_row { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
|
||||
.info_label { |
||||
width: 180px; |
||||
font-size: 28px; |
||||
color: #333333; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.info_value { |
||||
flex: 1; |
||||
margin-left: 30px; |
||||
font-size: 28px; |
||||
color: #595959; |
||||
text-align: left; |
||||
word-break: break-all; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 虚线分隔 |
||||
.divider { |
||||
height: 1PX; |
||||
border-bottom: 1PX dashed #D3D8DE; |
||||
margin: 30px 0; |
||||
} |
||||
|
||||
// 联系商家 |
||||
.merchant_contact { |
||||
.contact_text { |
||||
font-size: 28px; |
||||
color: #333333; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 页脚支付按钮（仅未支付订单） |
||||
.footer { |
||||
position: fixed; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background-color: #FFFFFF; |
||||
padding: 30px; |
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); |
||||
|
||||
.pay_btn { |
||||
width: 100%; |
||||
height: 88px; |
||||
background: #03C175; |
||||
border-radius: 44px; |
||||
border: none; |
||||
font-weight: 500; |
||||
font-size: 33px; |
||||
color: #FFFFFF; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,199 @@
@@ -0,0 +1,199 @@
|
||||
/** |
||||
* 订单详情页（商品消费详情） |
||||
*/ |
||||
import { View, Text, Button } from '@tarojs/components' |
||||
import { useState } from 'react' |
||||
import Taro, { useLoad } from '@tarojs/taro' |
||||
import { Image } from '@taroify/core' |
||||
import './index.scss' |
||||
|
||||
// 商品信息接口
|
||||
interface GoodsItem { |
||||
id: string |
||||
image: string // 商品图片
|
||||
name: string // 商品名称
|
||||
price: number // 商品价格
|
||||
canRefund?: boolean // 是否可退款（仅已支付订单）
|
||||
} |
||||
|
||||
// 订单详情接口
|
||||
interface OrderDetail { |
||||
id: string |
||||
status: 'unpaid' | 'paid' // 未支付 | 已支付
|
||||
goods: GoodsItem[] // 商品列表
|
||||
storeName: string // 消费门店
|
||||
address: string // 地址
|
||||
orderNo: string // 订单号
|
||||
amount: number // 消费金额
|
||||
goodsCount: number // 商品数量
|
||||
merchantPhone: string // 联系商家电话
|
||||
|
||||
// 已支付订单额外字段
|
||||
paymentTime?: string // 支付时间
|
||||
paymentMethod?: string // 支付方式
|
||||
} |
||||
|
||||
const OrderDetail = () => { |
||||
const [pageType, setPageType] = useState<'unpaid' | 'paid'>('unpaid') |
||||
|
||||
// 模拟订单详情数据
|
||||
const [orderDetail] = useState<OrderDetail>({ |
||||
id: '1', |
||||
status: 'unpaid', |
||||
goods: [ |
||||
{ |
||||
id: '1', |
||||
image: 'https://img01.yzcdn.cn/vant/cat.jpeg', |
||||
name: '美汁源Minute Maid果粒橙 橙汁饮料 1.25l/瓶', |
||||
price: 12.50 |
||||
}, |
||||
{ |
||||
id: '2', |
||||
image: 'https://img01.yzcdn.cn/vant/cat.jpeg', |
||||
name: '可口可乐 迷你装 200ml/罐', |
||||
price: 3.00, |
||||
canRefund: true |
||||
} |
||||
], |
||||
storeName: 'XXX店', |
||||
address: 'XXX市XXXXXXXXXXX市XXXXXXXXXXX市XXXXXXXX', |
||||
orderNo: 'wjekwejrwkjsf1321445255', |
||||
amount: 15.50, |
||||
goodsCount: 2, |
||||
merchantPhone: '16688889999', |
||||
paymentTime: '2025-01-01 10:00:00', |
||||
paymentMethod: '微信支付' |
||||
}) |
||||
|
||||
useLoad(() => { |
||||
console.log('订单详情页面加载') |
||||
|
||||
// 从 URL 获取页面类型
|
||||
const router = Taro.getCurrentInstance().router |
||||
if (router?.params) { |
||||
const { status } = router.params |
||||
if (status === 'paid' || status === 'unpaid') { |
||||
setPageType(status as 'unpaid' | 'paid') |
||||
} |
||||
} |
||||
}) |
||||
|
||||
// 申请退款
|
||||
const handleRefund = (goodsId: string) => { |
||||
console.log('申请退款', goodsId) |
||||
Taro.showToast({ |
||||
title: '申请退款', |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
|
||||
// 立即支付
|
||||
const handlePay = () => { |
||||
console.log('立即支付') |
||||
Taro.showToast({ |
||||
title: '跳转支付', |
||||
icon: 'none' |
||||
}) |
||||
} |
||||
|
||||
// 联系商家
|
||||
const handleCallMerchant = () => { |
||||
Taro.makePhoneCall({ |
||||
phoneNumber: orderDetail.merchantPhone |
||||
}) |
||||
} |
||||
|
||||
return ( |
||||
<View className="order_detail_page"> |
||||
{/* 商品卡片 */} |
||||
<View className="goods_card"> |
||||
{orderDetail.goods.map((goods, index) => ( |
||||
<View key={goods.id} className="goods_item" style={{ marginTop: index > 0 ? '30px' : '0' }}> |
||||
<Image |
||||
className="goods_image" |
||||
src={goods.image} |
||||
mode="aspectFill" |
||||
width={208} |
||||
height={208} |
||||
/> |
||||
<View className="goods_info"> |
||||
<Text className="goods_name">{goods.name}</Text> |
||||
<View className="price_container"> |
||||
<Text className="goods_price">¥ {goods.price.toFixed(2)}</Text> |
||||
{/* 已支付订单且商品可退款时显示申请退款按钮 */} |
||||
{pageType === 'paid' && goods.canRefund && ( |
||||
<View className="refund_btn" onClick={() => handleRefund(goods.id)}> |
||||
<Text className="refund_text">申请退款</Text> |
||||
</View> |
||||
)} |
||||
</View> |
||||
</View> |
||||
</View> |
||||
))} |
||||
</View> |
||||
|
||||
{/* 订单信息卡片 */} |
||||
<View className="order_info_card"> |
||||
<View className="info_list"> |
||||
<View className="info_row"> |
||||
<Text className="info_label">消费门店</Text> |
||||
<Text className="info_value">{orderDetail.storeName}</Text> |
||||
</View> |
||||
<View className="info_row"> |
||||
<Text className="info_label">地址</Text> |
||||
<Text className="info_value">{orderDetail.address}</Text> |
||||
</View> |
||||
|
||||
{/* 已支付订单显示支付时间 */} |
||||
{pageType === 'paid' && orderDetail.paymentTime && ( |
||||
<View className="info_row"> |
||||
<Text className="info_label">支付时间</Text> |
||||
<Text className="info_value">{orderDetail.paymentTime}</Text> |
||||
</View> |
||||
)} |
||||
|
||||
<View className="info_row"> |
||||
<Text className="info_label">订单号</Text> |
||||
<Text className="info_value">{orderDetail.orderNo}</Text> |
||||
</View> |
||||
<View className="info_row"> |
||||
<Text className="info_label">消费金额</Text> |
||||
<Text className="info_value">{orderDetail.amount.toFixed(2)}元</Text> |
||||
</View> |
||||
|
||||
{/* 已支付订单显示支付方式 */} |
||||
{pageType === 'paid' && orderDetail.paymentMethod && ( |
||||
<View className="info_row"> |
||||
<Text className="info_label">支付方式</Text> |
||||
<Text className="info_value">{orderDetail.paymentMethod}</Text> |
||||
</View> |
||||
)} |
||||
|
||||
<View className="info_row"> |
||||
<Text className="info_label">商品数量</Text> |
||||
<Text className="info_value">{orderDetail.goodsCount}</Text> |
||||
</View> |
||||
</View> |
||||
|
||||
{/* 分隔线 */} |
||||
<View className="divider" /> |
||||
|
||||
{/* 联系商家 */} |
||||
<View className="merchant_contact" onClick={handleCallMerchant}> |
||||
<Text className="contact_text">联系商家：{orderDetail.merchantPhone}</Text> |
||||
</View> |
||||
</View> |
||||
|
||||
{/* 未支付订单显示支付按钮 */} |
||||
{pageType === 'unpaid' && ( |
||||
<View className="footer"> |
||||
<Button className="pay_btn" onClick={handlePay}> |
||||
立即支付 |
||||
</Button> |
||||
</View> |
||||
)} |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
export default OrderDetail |
||||
Loading…
Reference in new issue