|
|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
import { OrderState } from '@/services/constants'
|
|
|
|
|
import { orderStateList } from '@/services/constants'
|
|
|
|
|
import { putMemberOrderReceiptByIdAPI } from '@/services/order'
|
|
|
|
|
import { deleteMemberOrderAPI } from '@/services/order'
|
|
|
|
|
import { cancleOrderAPI } from '@/services/order'
|
|
|
|
|
import { getMemberOrderAPI } from '@/services/order'
|
|
|
|
|
import { getPayMockAPI, getPayWxPayMiniPayAPI } from '@/services/pay'
|
|
|
|
|
import type { OrderItem } from '@/types/order'
|
|
|
|
|
@ -25,15 +25,16 @@ const queryParams: Required<OrderListParams> = {
|
|
|
|
|
status: props.orderState,
|
|
|
|
|
location: {
|
|
|
|
|
latitude: 31.163973,
|
|
|
|
|
longitude: 121.404032
|
|
|
|
|
longitude: 121.404032,
|
|
|
|
|
},
|
|
|
|
|
id: memberStore.profile?.id,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取订单列表
|
|
|
|
|
const orderList = ref<OrderItem[]>([])
|
|
|
|
|
// 是否加载中标记，用于防止滚动触底触发多次请求
|
|
|
|
|
const isLoading = ref(false)
|
|
|
|
|
// 是否分页结束
|
|
|
|
|
const isFinish = ref(false)
|
|
|
|
|
const getMemberOrderData = async () => {
|
|
|
|
|
// 如果数据出于加载中，退出函数
|
|
|
|
|
if (isLoading.value) return
|
|
|
|
|
@ -47,6 +48,12 @@ const getMemberOrderData = async () => {
|
|
|
|
|
const res = await getMemberOrderAPI(queryParams)
|
|
|
|
|
// 发送请求后，重置标记
|
|
|
|
|
isLoading.value = false
|
|
|
|
|
res.data.list.forEach((e) => {
|
|
|
|
|
const str = e.appointmentTimeStart.slice(0, 10)
|
|
|
|
|
const start = e.appointmentTimeStart.slice(11, 13)
|
|
|
|
|
const end = e.appointmentTimeEnd.slice(11, 13)
|
|
|
|
|
e.appointmentTime = str + ' ' + start + end
|
|
|
|
|
})
|
|
|
|
|
// 数组追加
|
|
|
|
|
orderList.value.push(...res.data.list)
|
|
|
|
|
// 分页条件
|
|
|
|
|
@ -113,13 +120,13 @@ const onOrderConfirm = (id: string) => {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 删除订单
|
|
|
|
|
const onOrderDelete = (id: string) => {
|
|
|
|
|
const handleCancle = (id: string) => {
|
|
|
|
|
uni.showModal({
|
|
|
|
|
content: '你确定要删除该订单？',
|
|
|
|
|
content: '你确定要取消该订单？',
|
|
|
|
|
confirmColor: '#3775F6',
|
|
|
|
|
success: async (res) => {
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
await deleteMemberOrderAPI({ ids: [id] })
|
|
|
|
|
await cancleOrderAPI({ id })
|
|
|
|
|
// 删除成功，界面中删除订单
|
|
|
|
|
const index = orderList.value.findIndex((v) => v.id === id)
|
|
|
|
|
orderList.value.splice(index, 1)
|
|
|
|
|
@ -127,9 +134,9 @@ const onOrderDelete = (id: string) => {
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 是否分页结束
|
|
|
|
|
const isFinish = ref(false)
|
|
|
|
|
const handleDetail = (id) => {
|
|
|
|
|
uni.navigateTo({ url: `/pages/orderDetail/orderDetail?orderId=${id}` })
|
|
|
|
|
}
|
|
|
|
|
// 是否触发下拉刷新
|
|
|
|
|
const isTriggered = ref(false)
|
|
|
|
|
// 自定义下拉刷新被触发
|
|
|
|
|
@ -156,65 +163,17 @@ const onRefresherrefresh = async () => {
|
|
|
|
|
: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 class="item" v-for="item in orderList" :key="item.id">
|
|
|
|
|
<view class="hd" @click="handleDetail(item.id)">
|
|
|
|
|
<view class="num">订单编号：{{ item.orderNumber }}</view>
|
|
|
|
|
<view class="img"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
<view class="md" @click="handleDetail(item.id)"></view>
|
|
|
|
|
<view class="foot">
|
|
|
|
|
<view class="time"> 预约时间： {{ item.appointmentTime }}</view>
|
|
|
|
|
<view class="cancle" @click="handleCancle(item.id)">取消订单</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 底部提示文字 -->
|
|
|
|
|
@ -227,13 +186,36 @@ const onRefresherrefresh = async () => {
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
// 订单列表
|
|
|
|
|
.orders {
|
|
|
|
|
.card {
|
|
|
|
|
.item {
|
|
|
|
|
min-height: 100rpx;
|
|
|
|
|
padding: 20rpx;
|
|
|
|
|
margin: 20rpx 20rpx 0;
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
|
|
.hd {
|
|
|
|
|
padding: 10rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
.md {
|
|
|
|
|
padding: 10rpx;
|
|
|
|
|
min-height: 100rpx;
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
border-top: 2rpx solid #F2F2F2;
|
|
|
|
|
border-bottom: 2rpx solid #F2F2F2;
|
|
|
|
|
}
|
|
|
|
|
.foot {
|
|
|
|
|
padding: 10rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
.cancle {
|
|
|
|
|
border: 2rpx solid #F2F2F2;
|
|
|
|
|
padding: 8rpx 20rpx;
|
|
|
|
|
color: #0D0D26;
|
|
|
|
|
border-radius: 40rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&:last-child {
|
|
|
|
|
padding-bottom: 40rpx;
|
|
|
|
|
}
|
|
|
|
|
|
王文杰
8 months ago