liruiqiang
4 weeks ago
4 changed files with 442 additions and 227 deletions
-
388src/pagesOrder/list/components/OrderList.vue
-
243src/pagesOrder/list/list.vue
-
14src/services/order.ts
-
24src/types/order.d.ts
@ -0,0 +1,388 @@ |
|||||
|
<template> |
||||
|
<scroll-view |
||||
|
enable-back-to-top |
||||
|
scroll-y |
||||
|
class="orders" |
||||
|
refresher-enabled |
||||
|
:refresher-triggered="isTriggered" |
||||
|
@refresherrefresh="onRefresherrefresh" |
||||
|
@scrolltolower="getMemberOrderData" |
||||
|
> |
||||
|
<view class="card" v-for="order in orderList" :key="order.id"> |
||||
|
<!-- 订单信息 --> |
||||
|
<view class="status"> |
||||
|
<text class="date">{{ order.createTime }}</text> |
||||
|
<!-- 订单状态文字 --> |
||||
|
<text>{{ orderStateList[order.orderState].text }}</text> |
||||
|
<!-- 待评价/已完成/已取消 状态: 展示删除订单 --> |
||||
|
<text |
||||
|
v-if="order.orderState >= OrderState.DaiPingJia" |
||||
|
class="icon-delete" |
||||
|
@tap="onOrderDelete(order.id)" |
||||
|
></text> |
||||
|
</view> |
||||
|
<!-- 商品信息，点击商品跳转到订单详情，不是商品详情 --> |
||||
|
<navigator |
||||
|
v-for="item in order.skus" |
||||
|
:key="item.id" |
||||
|
class="goods" |
||||
|
:url="`/pagesOrder/detail/detail?id=${order.id}`" |
||||
|
hover-class="none" |
||||
|
> |
||||
|
<view class="cover"> |
||||
|
<image class="image" mode="aspectFit" :src="item.image"></image> |
||||
|
</view> |
||||
|
<view class="meta"> |
||||
|
<view class="name ellipsis">{{ item.name }}</view> |
||||
|
<view class="type">{{ item.attrsText }}</view> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
<!-- 支付信息 --> |
||||
|
<view class="payment"> |
||||
|
<text class="quantity">共{{ order.totalNum }}件商品</text> |
||||
|
<text>实付</text> |
||||
|
<text class="amount"> <text class="symbol">¥</text>{{ order.payMoney }}</text> |
||||
|
</view> |
||||
|
<!-- 订单操作按钮 --> |
||||
|
<view class="action"> |
||||
|
<!-- 待付款状态：显示去支付按钮 --> |
||||
|
<template v-if="order.orderState === OrderState.DaiFuKuan"> |
||||
|
<view class="button primary" @tap="onOrderPay(order.id)">去支付</view> |
||||
|
</template> |
||||
|
<template v-else> |
||||
|
<navigator |
||||
|
class="button secondary" |
||||
|
:url="`/pagesOrder/create/create?orderId=${order.id}`" |
||||
|
hover-class="none" |
||||
|
> |
||||
|
再次购买 |
||||
|
</navigator> |
||||
|
<!-- 待收货状态: 展示确认收货 --> |
||||
|
<view |
||||
|
v-if="order.orderState === OrderState.DaiShouHuo" |
||||
|
class="button primary" |
||||
|
@tap="onOrderConfirm(order.id)" |
||||
|
> |
||||
|
确认收货 |
||||
|
</view> |
||||
|
</template> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 底部提示文字 --> |
||||
|
<view class="loading-text" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"> |
||||
|
{{ isFinish ? '没有更多数据~' : '正在加载...' }} |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { OrderState, orderStateList } from '@/services/constants' |
||||
|
import { |
||||
|
putMemberOrderReceiptByIdAPI, |
||||
|
deleteMemberOrderAPI, |
||||
|
getMemberOrderAPI, |
||||
|
} from '@/services/order' |
||||
|
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay' |
||||
|
import type { OrderItem, OrderListParams } from '@/types/order' |
||||
|
import { onMounted, ref } from 'vue' |
||||
|
|
||||
|
// 获取屏幕边界到安全区域距离 |
||||
|
const { safeAreaInsets } = uni.getSystemInfoSync() |
||||
|
|
||||
|
// 定义 porps |
||||
|
const props = defineProps<{ |
||||
|
orderState: number |
||||
|
}>() |
||||
|
|
||||
|
// 请求参数 |
||||
|
const queryParams: Required<OrderListParams> = { |
||||
|
page: 1, |
||||
|
pageSize: 5, |
||||
|
orderState: props.orderState, |
||||
|
} |
||||
|
|
||||
|
// 获取订单列表 |
||||
|
const orderList = ref<OrderItem[]>([]) |
||||
|
// 是否加载中标记，用于防止滚动触底触发多次请求 |
||||
|
const isLoading = ref(false) |
||||
|
const getMemberOrderData = async () => { |
||||
|
// 如果数据出于加载中，退出函数 |
||||
|
if (isLoading.value) return |
||||
|
// 退出分页判断 |
||||
|
if (isFinish.value === true) { |
||||
|
return uni.showToast({ icon: 'none', title: '没有更多数据~' }) |
||||
|
} |
||||
|
// 发送请求前，标记为加载中 |
||||
|
isLoading.value = true |
||||
|
// 发送请求 |
||||
|
const res = await getMemberOrderAPI(queryParams) |
||||
|
// 发送请求后，重置标记 |
||||
|
isLoading.value = false |
||||
|
// 数组追加 |
||||
|
orderList.value.push(...res.result.items) |
||||
|
// 分页条件 |
||||
|
if (queryParams.page < res.result.pages) { |
||||
|
// 页码累加 |
||||
|
queryParams.page++ |
||||
|
} else { |
||||
|
// 分页已结束 |
||||
|
isFinish.value = true |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getMemberOrderData() |
||||
|
}) |
||||
|
|
||||
|
// 订单支付 |
||||
|
const onOrderPay = async (id: string) => { |
||||
|
if (import.meta.env.DEV) { |
||||
|
// 开发环境模拟支付 |
||||
|
await getPayMockAPI({ orderId: id }) |
||||
|
} else { |
||||
|
// #ifdef MP-WEIXIN |
||||
|
|
||||
|
// 正式环境支付：1.获取支付订单信息，2.调用微信支付API |
||||
|
// const res = await getPayWxPayMiniPayAPI({ orderId: id }) |
||||
|
// await wx.requestPayment(res.result) |
||||
|
|
||||
|
// 注意：因小程序上线后被恶意投诉：理由为支付 0.01 元后不发货，现调整为模拟支付 |
||||
|
await getPayMockAPI({ orderId: id }) |
||||
|
// #endif |
||||
|
} |
||||
|
// 成功提示 |
||||
|
uni.showToast({ title: '模拟支付成功' }) |
||||
|
// 模拟支付提示 |
||||
|
setTimeout(() => { |
||||
|
wx.showModal({ |
||||
|
title: '温馨提示', |
||||
|
content: '此交易是模拟支付，您并未付款，不会导致实际购买商品或服务', |
||||
|
confirmText: '知道了', |
||||
|
showCancel: false, |
||||
|
}) |
||||
|
}, 2000) |
||||
|
// 更新订单状态 |
||||
|
const order = orderList.value.find((v) => v.id === id) |
||||
|
order!.orderState = OrderState.DaiFaHuo |
||||
|
} |
||||
|
|
||||
|
// 确认收货 |
||||
|
const onOrderConfirm = (id: string) => { |
||||
|
uni.showModal({ |
||||
|
content: '为保障您的权益，请收到货并确认无误后，再确认收货', |
||||
|
confirmColor: '#27BA9B', |
||||
|
success: async (res) => { |
||||
|
if (res.confirm) { |
||||
|
await putMemberOrderReceiptByIdAPI(id) |
||||
|
uni.showToast({ icon: 'success', title: '确认收货成功' }) |
||||
|
// 确认成功，更新为待评价 |
||||
|
const order = orderList.value.find((v) => v.id === id) |
||||
|
order!.orderState = OrderState.DaiPingJia |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 删除订单 |
||||
|
const onOrderDelete = (id: string) => { |
||||
|
uni.showModal({ |
||||
|
content: '你确定要删除该订单？', |
||||
|
confirmColor: '#27BA9B', |
||||
|
success: async (res) => { |
||||
|
if (res.confirm) { |
||||
|
await deleteMemberOrderAPI({ ids: [id] }) |
||||
|
// 删除成功，界面中删除订单 |
||||
|
const index = orderList.value.findIndex((v) => v.id === id) |
||||
|
orderList.value.splice(index, 1) |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 是否分页结束 |
||||
|
const isFinish = ref(false) |
||||
|
// 是否触发下拉刷新 |
||||
|
const isTriggered = ref(false) |
||||
|
// 自定义下拉刷新被触发 |
||||
|
const onRefresherrefresh = async () => { |
||||
|
// 开始动画 |
||||
|
isTriggered.value = true |
||||
|
// 重置数据 |
||||
|
queryParams.page = 1 |
||||
|
orderList.value = [] |
||||
|
isFinish.value = false |
||||
|
// 加载数据 |
||||
|
await getMemberOrderData() |
||||
|
// 关闭动画 |
||||
|
isTriggered.value = false |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
// 订单列表 |
||||
|
.orders { |
||||
|
.card { |
||||
|
min-height: 100rpx; |
||||
|
padding: 20rpx; |
||||
|
margin: 20rpx 20rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
&:last-child { |
||||
|
padding-bottom: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
margin-bottom: 15rpx; |
||||
|
|
||||
|
.date { |
||||
|
color: #666; |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
color: #ff9240; |
||||
|
} |
||||
|
|
||||
|
.icon-delete { |
||||
|
line-height: 1; |
||||
|
margin-left: 10rpx; |
||||
|
padding-left: 10rpx; |
||||
|
border-left: 1rpx solid #e3e3e3; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.goods { |
||||
|
display: flex; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.cover { |
||||
|
width: 170rpx; |
||||
|
height: 170rpx; |
||||
|
margin-right: 20rpx; |
||||
|
border-radius: 10rpx; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
.image { |
||||
|
width: 170rpx; |
||||
|
height: 170rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.quantity { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
line-height: 1; |
||||
|
padding: 6rpx 4rpx 6rpx 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #fff; |
||||
|
border-radius: 10rpx 0 0 0; |
||||
|
background-color: rgba(0, 0, 0, 0.6); |
||||
|
} |
||||
|
|
||||
|
.meta { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
height: 80rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
.type { |
||||
|
line-height: 1.8; |
||||
|
padding: 0 15rpx; |
||||
|
margin-top: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
align-self: flex-start; |
||||
|
border-radius: 4rpx; |
||||
|
color: #888; |
||||
|
background-color: #f7f7f8; |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 22rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.payment { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
line-height: 1; |
||||
|
padding: 20rpx 0; |
||||
|
text-align: right; |
||||
|
color: #999; |
||||
|
font-size: 28rpx; |
||||
|
border-bottom: 1rpx solid #eee; |
||||
|
|
||||
|
.quantity { |
||||
|
font-size: 24rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.amount { |
||||
|
color: #444; |
||||
|
margin-left: 6rpx; |
||||
|
} |
||||
|
|
||||
|
.symbol { |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.action { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
padding-top: 20rpx; |
||||
|
|
||||
|
.button { |
||||
|
width: 180rpx; |
||||
|
height: 60rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-left: 20rpx; |
||||
|
border-radius: 60rpx; |
||||
|
border: 1rpx solid #ccc; |
||||
|
font-size: 26rpx; |
||||
|
color: #444; |
||||
|
} |
||||
|
|
||||
|
.secondary { |
||||
|
color: #27ba9b; |
||||
|
border-color: #27ba9b; |
||||
|
} |
||||
|
|
||||
|
.primary { |
||||
|
color: #fff; |
||||
|
background-color: #27ba9b; |
||||
|
border-color: #27ba9b; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.loading-text { |
||||
|
text-align: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
padding: 20rpx 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue