lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
main
Lufaneng 11 months ago
parent 265bda45d6
commit 9cd2a71df9
3 changed files with 305 additions and 4 deletions
Show Stats Download Patch File Download Diff File

7
pages.json
Unescape View File

@ -85,6 +85,13 @@
"navigationBarTitleText" : "编辑资料"
}
},
{
"path" : "order-detail/order-detail",
"style" :
{
"navigationBarTitleText" : "订单详情"
}
},
{
"path" : "recharge/recharge",
"style" :

5
pages/order/order.vue
Unescape View File

@ -85,7 +85,7 @@
<uv-button type="default" size="small" @click="deleteOrder(order)">
删除订单
</uv-button>
<uv-button type="primary" size="small" @click="viewOrderDetail(order)">
<uv-button type="primary" color="#3F70FF" size="small" @click="viewOrderDetail(order)">
查看详情
</uv-button>
</template>
@ -213,7 +213,7 @@
// 查看订单详情
const viewOrderDetail = (order) => {
uni.navigateTo({
url: `/pages/order-detail/order-detail?id=${order.id}`
url: `/pagesA/order-detail/order-detail?id=${order.id}`
})
}
@ -320,6 +320,7 @@
.container {
font-size: 14px;
min-height: 100vh;
padding-bottom: 50px;
background-color: #f8f8f8;
}

293
pagesA/order-detail/order-detail.vue
Unescape View File

@ -0,0 +1,293 @@
<template>
<view class="order-detail-page">
<!-- 顶部状态栏 -->
<view class="status-bar">
<text class="status-text">交易成功</text>
</view>
<!-- 主要内容区域 -->
<view class="content-container">
<!-- 用户信息卡片 -->
<view class="user-card">
<view class="user-info">
<image class="avatar" :src="orderDetail.userAvatar" mode="aspectFill"></image>
<view class="user-details">
<view class="user-name-row">
<text class="user-name">{{ orderDetail.userName }}</text>
<view class="vip-badge">
<text class="vip-text">V</text>
</view>
</view>
<text class="vip-expire">VIP有效时间：{{ orderDetail.vipExpireTime }}</text>
</view>
</view>
</view>
<!-- 订单详情 -->
<view class="order-info">
<view class="info-row">
<text class="label">订单编号：</text>
<text class="value">{{ orderDetail.orderNo }}</text>
<text class="copy-btn" @tap="copyOrderNo">复制</text>
</view>
<view class="info-row">
<text class="label">用户名称：</text>
<text class="value">{{ orderDetail.realName }}</text>
</view>
<view class="info-row">
<text class="label">用户ID：</text>
<text class="value">{{ orderDetail.userId }}</text>
</view>
<view class="info-row">
<text class="label">订单类型：</text>
<text class="value">{{ orderDetail.orderType }}</text>
</view>
<view class="info-row">
<text class="label">订单金额：</text>
<text class="value price">¥{{ orderDetail.originalAmount }}</text>
</view>
<view class="info-row">
<text class="label">折扣金额：</text>
<text class="value discount">-¥{{ orderDetail.discountAmount }}</text>
</view>
<view class="info-row">
<text class="label">实付金额：</text>
<text class="value price">¥{{ orderDetail.paidAmount }}</text>
</view>
<view class="info-row">
<text class="label">支付时间：</text>
<text class="value">{{ orderDetail.payTime }}</text>
</view>
</view>
<!-- 联系客服按钮 -->
<view class="contact-service">
<button class="service-btn" @tap="contactService">联系客服</button>
</view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
// 订单详情数据
const orderDetail = ref({
userAvatar: '/static/images/default-avatar.png',
userName: '尊敬的包年会员',
vipExpireTime: '2026/05/15',
orderNo: 'ORD20230515001',
realName: '张三',
userId: 'U12345678',
orderType: '线上交易 包年会员',
originalAmount: '1200.00',
discountAmount: '200.00',
paidAmount: '1000.00',
payTime: '2025-05-15 10:30'
})
onMounted(() => {
// 获取订单详情
getOrderDetail()
})
// 获取订单详情
const getOrderDetail = () => {
// 这里可以根据路由参数获取订单ID，然后调用API获取详情
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const orderId = currentPage.options.orderId
if (orderId) {
// 调用API获取订单详情
// fetchOrderDetail(orderId)
}
}
// 复制订单号
const copyOrderNo = () => {
uni.setClipboardData({
data: orderDetail.value.orderNo,
success: () => {
uni.showToast({
title: '订单号已复制',
icon: 'success'
})
}
})
}
// 联系客服
const contactService = () => {
// uni.showActionSheet({
// itemList: ['在线客服', '电话客服'],
// success: (res) => {
// if (res.tapIndex === 0) {
// // 跳转到在线客服页面
// uni.navigateTo({
// url: '/pages/customer-service/customer-service'
// })
// } else if (res.tapIndex === 1) {
// // 拨打客服电话
uni.makePhoneCall({
phoneNumber: '400-123-4567'
// })
// }
// }
})
}
</script>
<style lang="scss" scoped>
.order-detail-page {
min-height: 100vh;
background-color: #f8f8f8;;
}
.status-bar {
padding: 20px 10px 50px;
background: linear-gradient(180deg, #8B9DC3 0%, #DFE3EC 100%);
.status-text {
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
}
.content-container {
padding: 0 32rpx;
margin-top: -30px;
}
.user-card {
background: #FFFFFF;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 32rpx;
.user-info {
display: flex;
align-items: center;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
margin-right: 24rpx;
}
.user-details {
flex: 1;
.user-name-row {
display: flex;
align-items: center;
margin-bottom: 12rpx;
.user-name {
font-size: 36rpx;
font-weight: bold;
color: #333333;
margin-right: 16rpx;
}
.vip-badge {
width: 48rpx;
height: 48rpx;
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
.vip-text {
font-size: 24rpx;
font-weight: bold;
color: #FFFFFF;
}
}
}
.vip-expire {
font-size: 28rpx;
color: #999999;
}
}
}
}
.order-info {
background: #FFFFFF;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 60rpx;
.info-row {
display: flex;
align-items: center;
padding: 24rpx 0;
border-bottom: 1rpx solid #F5F5F5;
&:last-child {
border-bottom: none;
}
.label {
font-size: 32rpx;
color: #666666;
width: 180rpx;
}
.value {
flex: 1;
font-size: 32rpx;
color: #333333;
text-align: right;
&.price {
color: #333333;
font-weight: bold;
}
&.discount {
color: #FF4444;
}
}
.copy-btn {
font-size: 28rpx;
color: #4A90E2;
margin-left: 16rpx;
padding: 8rpx 16rpx;
border: 1rpx solid #4A90E2;
border-radius: 8rpx;
}
}
}
.contact-service {
padding: 0 32rpx 60rpx;
.service-btn {
width: 100%;
height: 96rpx;
background: #3F70FF;
border-radius: 48rpx;
border: none;
font-size: 36rpx;
font-weight: bold;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
}
</style>
Write Preview
Loading…
Cancel
Save