345 lines
7.8 KiB
Vue
345 lines
7.8 KiB
Vue
<template>
|
||
<view class="container">
|
||
<z-paging ref="paging" v-model="dataList" @query="queryList">
|
||
<!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
|
||
<!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
|
||
<!--
|
||
<view slot="top">
|
||
|
||
</view> -->
|
||
|
||
<!-- 订单列表 -->
|
||
<wd-navbar title="订单" safeAreaInsetTop></wd-navbar>
|
||
<!-- 顶部导航栏 -->
|
||
<view class="nav-tabs">
|
||
<!-- 订单状态：0 - 待付款，1 - 已完成，2 - 已取消,示例值(2) -->
|
||
<view class="tab-item" :class="queryFrom.orderStatus === '' ? 'active' : ''" @click="changeStatus('')">全部</view>
|
||
<view class="tab-item" :class="queryFrom.orderStatus === 0 ? 'active' : ''" @click="changeStatus(0)">待付款</view>
|
||
<view class="tab-item" :class="queryFrom.orderStatus == 1 ? 'active' : ''" @click="changeStatus(1)">已完成</view>
|
||
<view class="tab-item" :class="queryFrom.orderStatus == 2 ? 'active' : ''" @click="changeStatus(2)">已取消</view>
|
||
</view>
|
||
<view class="order-list">
|
||
<!-- 订单项1 - 待付款 -->
|
||
<view class="order-item" v-for="(item, index) in dataList" :key="index">
|
||
<view class="order-header">
|
||
<text class="order-id">{{ item.orderNo }}</text>
|
||
<text class="order-status pending" v-if="item.orderStatus === 0">待付款</text>
|
||
<text class="order-status completed" v-if="item.orderStatus == 1">已完成</text>
|
||
</view>
|
||
|
||
<view class="order-content">
|
||
<image class="product-image" :src="item.goods.cover" mode="aspectFill"></image>
|
||
<view class="product-info">
|
||
<view class="product-name">
|
||
<view>{{ item.goods.name }}</view>
|
||
</view>
|
||
<view class="product-spec">
|
||
<view>{{ item.goods.specs }}</view>
|
||
<view class="product-count">×{{ item.goodsNum }}</view>
|
||
</view>
|
||
<view class="product-price">
|
||
<view style="font-size: 26rpx" v-if="item.deductionAmount">已抵扣金额：￥{{ item.deductionAmount }}</view>
|
||
<view v-else></view>
|
||
<text style="font-weight: bold">¥{{ item.payableAmount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-footer">
|
||
<view class="order-time">{{ timeFormat(item.createTime, 'yyyy-MM-dd hh:mm:ss') }}</view>
|
||
<view class="order-actions">
|
||
<!-- <view class="btn-cancel">取消订单</view> -->
|
||
<!-- <view class="btn-pay">去支付</view> -->
|
||
<view class="btn-buy-again" v-if="item.orderStatus == 1" @click="toGoods(item.goodsId)">再次购买</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="order-item">
|
||
<view class="order-header">
|
||
<text class="order-id">GMZST202506040001</text>
|
||
<text class="order-status completed">已完成</text>
|
||
</view>
|
||
|
||
<view class="order-content">
|
||
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
|
||
<view class="product-info">
|
||
<view class="product-name">方愈苗药皮毒清软膏</view>
|
||
<view class="product-spec">12支/箱</view>
|
||
</view>
|
||
<view class="product-count">×230000</view>
|
||
<view class="product-price">¥50w</view>
|
||
</view>
|
||
|
||
<view class="order-footer">
|
||
<view class="order-time">2025-10-09 19:43:57</view>
|
||
<view class="order-actions">
|
||
<view class="btn-reorder">再来一单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-item">
|
||
<view class="order-header">
|
||
<text class="order-id">GMZST202506040001</text>
|
||
<text class="order-status cancelled">已取消</text>
|
||
</view>
|
||
|
||
<view class="order-content">
|
||
<image class="product-image" src="/static/product.jpg" mode="aspectFill"></image>
|
||
<view class="product-info">
|
||
<view class="product-name">方愈苗药皮毒清软膏</view>
|
||
<view class="product-spec">12支/箱</view>
|
||
</view>
|
||
<view class="product-count">×320000</view>
|
||
<view class="product-price">¥10w</view>
|
||
</view>
|
||
|
||
<view class="order-footer">
|
||
<view class="order-time">2025-10-09 19:43:57</view>
|
||
<view class="order-actions">
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import api from '@/api/index';
|
||
import { ref } from 'vue';
|
||
import { timeFormat } from '@/utils/fun.js';
|
||
const paging = ref(null);
|
||
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
|
||
const dataList = ref([]);
|
||
|
||
const queryFrom = ref({
|
||
orderType: 1,
|
||
payStatus: '',
|
||
orderStatus: ''
|
||
});
|
||
|
||
const changeStatus = (e) => {
|
||
queryFrom.value.orderStatus = e;
|
||
paging.value.reload();
|
||
};
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
api.orderPage({ pageNo, pageSize, ...queryFrom.value })
|
||
.then((res: any) => {
|
||
paging.value.complete(res.list);
|
||
})
|
||
.catch((res) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
|
||
const toGoods = (e) => {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/goods?id=' + e
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.container {
|
||
padding: 0;
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 导航标签样式 */
|
||
.nav-tabs {
|
||
display: flex;
|
||
/* justify-content: space-around; */
|
||
background-color: #ffffff;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.tab-item {
|
||
font-size: 15px;
|
||
color: #999;
|
||
position: relative;
|
||
padding: 0 10px;
|
||
z-index: 9;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 12rpx;
|
||
background: #627c54;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
z-index: 5;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* 订单列表样式 */
|
||
.order-list {
|
||
padding: 10px;
|
||
}
|
||
|
||
.order-item {
|
||
background-color: #fff;
|
||
margin-bottom: 36rpx;
|
||
border-radius: 16rpx;
|
||
padding: 36rpx;
|
||
}
|
||
|
||
.order-header {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
padding-bottom: 24rpx;
|
||
color: #232323;
|
||
}
|
||
|
||
.order-id {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.order-status {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pending {
|
||
color: #ff5722;
|
||
}
|
||
|
||
.completed {
|
||
color: #4caf50;
|
||
}
|
||
|
||
.cancelled {
|
||
color: #f44336;
|
||
}
|
||
|
||
.order-content {
|
||
display: flex;
|
||
padding: 20rpx 0;
|
||
}
|
||
|
||
.product-image {
|
||
width: 150rpx;
|
||
height: 150rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 28rpx;
|
||
color: #232323;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.product-spec {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.product-count {
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
text-align: right;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 36rpx;
|
||
color: #ff3d3d;
|
||
/* font-weight: bold; */
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.order-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx 0 0;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.order-time {
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
}
|
||
|
||
.order-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.btn-cancel,
|
||
.btn-pay,
|
||
.btn-reorder,
|
||
.btn-buy-again {
|
||
width: 150rpx;
|
||
height: 56rpx;
|
||
border-radius: 28rpx;
|
||
/* border: 1rpx solid #999999; */
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.btn-cancel {
|
||
border: 1rpx solid #999999;
|
||
color: #999;
|
||
}
|
||
|
||
.btn-pay {
|
||
color: #ff6f00;
|
||
border: 1rpx solid #ff6f00;
|
||
}
|
||
|
||
.btn-reorder {
|
||
color: #ffffff;
|
||
background-color: #458f3b;
|
||
border: none;
|
||
}
|
||
|
||
.btn-buy-again {
|
||
color: #ffffff;
|
||
background-color: #f44336;
|
||
border: none;
|
||
}
|
||
|
||
.btn-cancel:active,
|
||
.btn-pay:active,
|
||
.btn-reorder:active,
|
||
.btn-buy-again:active {
|
||
opacity: 0.8;
|
||
}
|
||
</style>
|