添加订单
This commit is contained in:
bobobobo
@@ -1,11 +1,215 @@
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, reactive } from 'vue'
|
||||
import { navigateTo } from '@/utils/router'
|
||||
import { getUserBuyRecordList } from '../../../api/my-index'
|
||||
|
||||
// 响应式数据
|
||||
const paging = ref(null)
|
||||
const activeFilter = ref('') // -1表示全部
|
||||
const orders = ref([])
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
dataList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 15
|
||||
})
|
||||
|
||||
// 状态映射
|
||||
const statusMap = {
|
||||
0: { text: '待支付', color: 'status-wait-pay', bgColor: '#fff0f0' },
|
||||
1: { text: '已支付', color: 'status-paid', bgColor: '#f0f9ff' },
|
||||
2: { text: '已取消', color: 'status-cancelled', bgColor: '#f5f5f5' },
|
||||
3: { text: '已完成', color: 'status-completed', bgColor: '#f0fff0' },
|
||||
4: { text: '等待拼团', color: 'status-group', bgColor: '#fff5f0' },
|
||||
5: { text: '待发货', color: 'status-wait-ship', bgColor: '#f0f5ff' },
|
||||
6: { text: '已发货', color: 'status-shipped', bgColor: '#f0f5ff' },
|
||||
7: {
|
||||
text: '待收货',
|
||||
color: 'status-wait-receive',
|
||||
bgColor: '#f0f5ff'
|
||||
},
|
||||
8: { text: '已收货', color: 'status-received', bgColor: '#f0fff0' },
|
||||
9: { text: '已退款', color: 'status-refunded', bgColor: '#f5f5f5' }
|
||||
}
|
||||
|
||||
// 初始化加载订单数据
|
||||
const getList = async () => {
|
||||
try {
|
||||
const res = await getUserBuyRecordList({
|
||||
orderStatus: activeFilter.value,
|
||||
pageNum: formData.pageNum,
|
||||
pageSize: formData.pageSize
|
||||
})
|
||||
formData.dataList = res.rows
|
||||
paging.value.complete(res.rows)
|
||||
} catch (error) {
|
||||
paging.value.complete(false)
|
||||
}
|
||||
}
|
||||
|
||||
// 切换筛选状态
|
||||
const changeFilter = status => {
|
||||
formData.pageNum = 1
|
||||
activeFilter.value = status
|
||||
getList()
|
||||
}
|
||||
|
||||
// 跳转到订单详情
|
||||
const goToDetail = item => {
|
||||
navigateTo('/pages/discover/order/detail', { id: item.id })
|
||||
}
|
||||
|
||||
// 获取状态文本
|
||||
const getStatusText = status => {
|
||||
return statusMap[status]?.text || '未知状态'
|
||||
}
|
||||
|
||||
// 获取状态对应的CSS类
|
||||
const getStatusClass = status => {
|
||||
return statusMap[status]?.color || 'status-default'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>购买记录pages\discover\order\index.vue</view>
|
||||
<z-paging
|
||||
ref="paging"
|
||||
v-model="formData.dataList"
|
||||
:default-page-no="formData.pageNum"
|
||||
:default-page-size="formData.pageSize"
|
||||
safe-area-inset-bottom
|
||||
use-safe-area-placeholder
|
||||
:paging-style="{ 'background-color': '#f9f9f9' }"
|
||||
@query="getList"
|
||||
>
|
||||
<template #top>
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">我的购买记录</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单状态筛选（可选功能） -->
|
||||
<scroll-view
|
||||
class="status-filter"
|
||||
scroll-x="true"
|
||||
:show-scrollbar="false"
|
||||
>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === '' }"
|
||||
@tap="changeFilter('')"
|
||||
>
|
||||
全部订单
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 0 }"
|
||||
@tap="changeFilter(0)"
|
||||
>
|
||||
待支付
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 5 }"
|
||||
@tap="changeFilter(5)"
|
||||
>
|
||||
待发货
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 7 }"
|
||||
@tap="changeFilter(7)"
|
||||
>
|
||||
待收货
|
||||
</view>
|
||||
<view
|
||||
class="filter-item"
|
||||
:class="{ active: activeFilter === 3 }"
|
||||
@tap="changeFilter(3)"
|
||||
>
|
||||
已完成
|
||||
</view>
|
||||
</scroll-view>
|
||||
</template>
|
||||
<view class="order-list-page">
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list-container">
|
||||
<!-- 加载状态 -->
|
||||
<!-- <view v-if="loading" class="loading-container">
|
||||
<view class="loading-item" v-for="i in 3" :key="i">
|
||||
<view class="skeleton-image"></view>
|
||||
<view class="skeleton-text-container">
|
||||
<view class="skeleton-text-line short"></view>
|
||||
<view class="skeleton-text-line medium"></view>
|
||||
<view class="skeleton-text-line long"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<view class="order-list">
|
||||
<view
|
||||
class="order-card"
|
||||
v-for="item in formData.dataList"
|
||||
:key="item.id"
|
||||
@tap="goToDetail(item)"
|
||||
>
|
||||
<!-- 订单头部：订单号 + 状态 -->
|
||||
<view class="order-header">
|
||||
<view class="order-info">
|
||||
<text class="order-number">
|
||||
订单号: {{ item.orderNo }}
|
||||
</text>
|
||||
<text class="order-time">{{ item.updateTime }}</text>
|
||||
</view>
|
||||
<view class="order-status">
|
||||
<text
|
||||
class="status-label"
|
||||
:class="getStatusClass(item.orderStatus)"
|
||||
>
|
||||
{{ getStatusText(item.orderStatus) }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="goods-item">
|
||||
<image
|
||||
src="https://p2.itc.cn/images01/20230924/143c6d6ba2044b79b36eb3de4c92145d.jpeg"
|
||||
class="goods-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="goods-info">
|
||||
<text class="goods-name">{{ item.userName }}</text>
|
||||
<text class="goods-spec">默认规格</text>
|
||||
<view class="goods-price-info">
|
||||
<text class="goods-price">¥{{ item.unitPrice }}</text>
|
||||
<text class="goods-quantity">
|
||||
x1
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单统计信息 -->
|
||||
<view class="order-summary">
|
||||
<text class="total-quantity">共1件商品</text>
|
||||
<view class="price-section">
|
||||
<text class="total-label">合计:</text>
|
||||
<text class="total-price">¥{{ item.payAmount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部装饰线 -->
|
||||
<view class="card-footer">
|
||||
<view class="decorative-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</z-paging>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
@import './index.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user