233 lines
8.3 KiB
Vue
233 lines
8.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tabs">
|
||
<view
|
||
v-for="(item, index) in categoryList"
|
||
:key="index"
|
||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
||
@click="selectTab(index, item)"
|
||
>
|
||
{{ item.category_name }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view v-for="(category, catIndex) in categoryList" :key="catIndex">
|
||
<view v-if="selectedTab === catIndex">
|
||
<view v-for="(item, index) in orderData" :key="index">
|
||
<view class="contentList">
|
||
<!-- 订单头部信息 -->
|
||
<view class="order-header" @click="toDetails(item.status)">
|
||
<text>提交订单：{{ item.createTime }}</text>
|
||
<view
|
||
v-if="item.status == '已取消' || item.status == '已完成'"
|
||
class="status3"
|
||
>{{ item.status }}</view
|
||
>
|
||
<view v-else-if="item.status == '退款中'" class="status2">
|
||
<img
|
||
src="http://localhost:8080/refund.png"
|
||
/>
|
||
{{ item.status }}
|
||
</view>
|
||
<view v-else class="status">{{ item.status }}</view>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="goods-list" @click="toDetails(item.status)">
|
||
<view
|
||
v-for="(goods, goodsIndex) in item.goodsList"
|
||
:key="goodsIndex"
|
||
class="goods-item"
|
||
>
|
||
<image :src="goods.image" class="goods-img"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单底部信息 -->
|
||
<view class="order-footer">
|
||
<view class="order-footer-text" @click="toDetails(item.status)"
|
||
>共{{ item.totalCount }}件商品，共计
|
||
<text> {{ item.totalPrice }}</text>
|
||
</view>
|
||
<view>
|
||
<view class="btn-group" v-if="item.status === '待付款'">
|
||
<button class="cancel-btn" @click="cancelOrder">
|
||
取消订单
|
||
</button>
|
||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||
<button class="pay-btn" @click="goToPay">立即支付</button>
|
||
</view>
|
||
<view class="btn-group" v-if="item.status === '待发货'">
|
||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||
</view>
|
||
<view class="btn-group" v-if="item.status === '已取消'">
|
||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||
<button class="pay-btn" @click="cancelOrder">
|
||
再来一单
|
||
</button>
|
||
</view>
|
||
<view class="btn-group" v-if="item.status === '配送中'">
|
||
<button class="cancel-btn" @click="checkLogistics">
|
||
查看物流
|
||
</button>
|
||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||
<button class="pay-btn" @click="cancelOrder">
|
||
再来一单
|
||
</button>
|
||
</view>
|
||
<view class="btn-group" v-if="item.status === '已完成'">
|
||
<button class="cancel-btn" @click="orderEvaluate">
|
||
服务评价
|
||
</button>
|
||
<button class="yfd-btn" @click="cancelOrder">运费单</button>
|
||
<button class="pay-btn" @click="cancelOrder">
|
||
再来一单
|
||
</button>
|
||
</view>
|
||
<view class="btn-group" v-if="item.status === '退款中'">
|
||
<button class="pay-btn" @click="cancelOrder">
|
||
再来一单
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { picUrl, NavgateTo } from "../../../utils";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
categoryList: [
|
||
{ category_name: "全部" },
|
||
{ category_name: "待付款" },
|
||
{ category_name: "待发货" },
|
||
{ category_name: "配送中" },
|
||
{ category_name: "已完成" },
|
||
],
|
||
selectedTab: 0,
|
||
orderData: [
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "待付款",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 1,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "待发货",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 2,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "已取消",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 3,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "配送中",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 2,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "已完成",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 3,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
{
|
||
createTime: "2025-07-15 23:23:23",
|
||
status: "退款中",
|
||
goodsList: [
|
||
{ image: "http://localhost:8080/order_index1.png" },
|
||
{ image: "http://localhost:8080/order_index2.png" },
|
||
{ image: "http://localhost:8080/order_index3.png" },
|
||
{ image: "http://localhost:8080/order_index4.png" },
|
||
{ image: "http://localhost:8080/order_index5.png" },
|
||
],
|
||
totalCount: 3,
|
||
totalPrice: "¥4704.00",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
selectTab(index, item) {
|
||
this.selectedTab = index;
|
||
},
|
||
cancelOrder() {
|
||
// 取消订单逻辑
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要取消订单吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 调用取消订单API
|
||
}
|
||
},
|
||
});
|
||
},
|
||
goToPay() {
|
||
console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
|
||
},
|
||
toDetails(status) {
|
||
NavgateTo(`/packages/myOrders/orderDetails/index?status=${status}`);
|
||
},
|
||
|
||
checkLogistics() {
|
||
NavgateTo(`/packages/myOrders/logistics/index`);
|
||
},
|
||
|
||
orderEvaluate(){
|
||
NavgateTo(`/packages/myOrders/orderEvaluate/index`);
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |