2025-10-24
我的订单修改
This commit is contained in:
@@ -14,77 +14,93 @@
|
||||
<u-tabs bg-color="#F5F8FF" :show-bar="false" :list="tabList" :is-scroll="false"
|
||||
v-model="currentTab"></u-tabs>
|
||||
<view class="menu-list">
|
||||
<view class="menu-item" :class="currentMenu==0?'active':''" @click="handleChangeMenu(0)">全部订单</view>
|
||||
<view class="menu-item" :class="currentMenu==1?'active':''" @click="handleChangeMenu(1)">待付款</view>
|
||||
<view class="menu-item" :class="currentMenu==2?'active':''" @click="handleChangeMenu(2)">待发货</view>
|
||||
<view class="menu-item" :class="currentMenu==3?'active':''" @click="handleChangeMenu(3)">待收货</view>
|
||||
<view class="menu-item" :class="currentMenu==4?'active':''" @click="handleChangeMenu(4)">退款/售后</view>
|
||||
<!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
|
||||
<view class="menu-item" :class="currentMenu==''?'active':''" @click="handleChangeMenu('')">全部订单</view>
|
||||
<view class="menu-item" :class="currentMenu=='pending'?'active':''"
|
||||
@click="handleChangeMenu('pending')">待发货</view>
|
||||
<view class="menu-item" :class="currentMenu=='pre_order'?'active':''"
|
||||
@click="handleChangeMenu('pre_order')">待支付</view>
|
||||
<view class="menu-item" :class="currentMenu=='shipped'?'active':''"
|
||||
@click="handleChangeMenu('shipped')">已发货</view>
|
||||
<view class="menu-item" :class="currentMenu=='completed'?'active':''"
|
||||
@click="handleChangeMenu('completed')">已完成</view>
|
||||
<view class="menu-item" :class="currentMenu=='cancelled'?'active':''"
|
||||
@click="handleChangeMenu('cancelled')">已取消</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y="true" class="scroll-view" :style="'height:'+scrollHeight+'px'" @scrolltolower="loadData">
|
||||
<view class="order-list" v-for="orderItem in orderList">
|
||||
<view class="u-m-l-20">订单号：{{orderItem.order_no}}</view>
|
||||
<view class="order-item" v-for="item in orderItem.items">
|
||||
<view class="item-left">
|
||||
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
|
||||
</image>
|
||||
<template v-if="currentTab==0">
|
||||
111
|
||||
</template>
|
||||
<template v-if="currentTab==1">
|
||||
<view class="order-list" v-for="orderItem in orderList">
|
||||
<view class="u-m-l-20">订单号：{{orderItem.order_no}}</view>
|
||||
<view class="order-item" v-for="item in orderItem.items">
|
||||
<view class="item-left">
|
||||
<image style="width: 100%;height: 100%;" :src="getImageUrl(item.image_url)" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<u-row>
|
||||
<u-col :span="10">
|
||||
<view>{{item.product_name}}</view>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||
{{item.rongdou_price}}
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
|
||||
{{item.points_price}}
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="2" text-align="right">
|
||||
<view>X{{item.quantity}}</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-right">
|
||||
<u-row>
|
||||
<u-col :span="10">
|
||||
<view>{{item.product_name}}</view>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||
{{item.rongdou_price}}
|
||||
</view>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
|
||||
{{item.points_price}}
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="2" text-align="right">
|
||||
<view>X{{item.quantity}}</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="operate-btns">
|
||||
<!-- 待发货 -->
|
||||
<template v-if="orderItem.status=='pending'">
|
||||
<view class="operate-btns">
|
||||
<!-- 待发货 -->
|
||||
<template v-if="orderItem.status=='pending'">
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handelCancel(orderItem)">取消订单</u-button>
|
||||
</template>
|
||||
<!-- 已支付 -->
|
||||
<!-- <template v-if="orderItem.status=='paid'">
|
||||
<u-button hover-class="none" class="operate-btn">取消订单</u-button>
|
||||
</template> -->
|
||||
<!-- 已发货 -->
|
||||
<template v-if="orderItem.status=='shipped'">
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handleReceive(orderItem)">确认收货</u-button>
|
||||
</template>
|
||||
<!-- 已取消 -->
|
||||
<!-- <template v-if="orderItem.status=='cancelled'">
|
||||
<u-button hover-class="none" class="operate-btn">查看详情</u-button>
|
||||
</template> -->
|
||||
<!-- 待支付 -->
|
||||
<template v-if="orderItem.status=='pre_order'">
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handelCancel(orderItem)">取消订单</u-button>
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handlePay(orderItem)">立即支付</u-button>
|
||||
</template>
|
||||
<!-- 完成 -->
|
||||
<!-- <template v-if="orderItem.status=='completed'">
|
||||
<u-button hover-class="none" class="operate-btn">评价</u-button>
|
||||
</template> -->
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handelCancel(orderItem)">取消订单</u-button>
|
||||
</template>
|
||||
<!-- 已支付 -->
|
||||
<!-- <template v-if="orderItem.status=='paid'">
|
||||
<u-button hover-class="none" class="operate-btn">取消订单</u-button>
|
||||
</template> -->
|
||||
<!-- 已发货 -->
|
||||
<template v-if="orderItem.status=='shipped'">
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handleReceive(orderItem)">确认收货</u-button>
|
||||
</template>
|
||||
<!-- 已取消 -->
|
||||
<!-- <template v-if="orderItem.status=='cancelled'">
|
||||
<u-button hover-class="none" class="operate-btn">查看详情</u-button>
|
||||
</template> -->
|
||||
<!-- 待支付 -->
|
||||
<template v-if="orderItem.status=='pre_order'">
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handelCancel(orderItem)">取消订单</u-button>
|
||||
<u-button hover-class="none" class="operate-btn" @click="handlePay(orderItem)">立即支付</u-button>
|
||||
</template>
|
||||
<!-- 完成 -->
|
||||
<!-- <template v-if="orderItem.status=='completed'">
|
||||
<u-button hover-class="none" class="operate-btn">评价</u-button>
|
||||
</template> -->
|
||||
<u-button hover-class="none" class="operate-btn"
|
||||
@click="handleOrderDetail(orderItem)">查看详情</u-button>
|
||||
@click="handleOrderDetail(orderItem)">查看详情</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
|
||||
<view class="box-view"></view>
|
||||
<u-loadmore margin-top="20" :status="loadStatus"></u-loadmore>
|
||||
<view class="box-view"></view>
|
||||
</template>
|
||||
<template v-if="currentTab==2">
|
||||
222
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
@@ -117,7 +133,6 @@
|
||||
<view class="info-item">
|
||||
<view class="info-name">订单状态</view>
|
||||
<!-- <view class="info-value">{{detailInfo.status}}</view> -->
|
||||
<!-- 'pending'：待发货,'paid','shipped'：已发货,'delivered','cancelled'：已取消,'pre_order'：预订单状态（未选择地址和支付方式）,'completed'：已收货 -->
|
||||
<u-tag v-if="detailInfo.status=='pending'" text="待发货"></u-tag>
|
||||
<u-tag v-if="detailInfo.status=='shipped'" text="已发货"></u-tag>
|
||||
<u-tag v-if="detailInfo.status=='cancelled'" text="已取消"></u-tag>
|
||||
@@ -164,14 +179,18 @@
|
||||
<view class="info-name">商品总计</view>
|
||||
<view class="info-value">
|
||||
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||
{{allPay}}
|
||||
{{detailInfo.total_rongdou}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-name">实付</view>
|
||||
<view class="info-value">
|
||||
<view class="info-value" v-if="detailInfo.real_rongdou">
|
||||
<image class="icon" src="/static/icon/rongdou.png" mode=""></image>
|
||||
{{detailInfo.total_rongdou}}
|
||||
{{detailInfo.real_rongdou}}
|
||||
</view>
|
||||
<view class="info-value" v-if="detailInfo.real_points">
|
||||
<image class="icon" src="/static/icon/jifen.png" mode=""></image>
|
||||
{{detailInfo.real_points}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -185,7 +204,8 @@
|
||||
ref,
|
||||
onMounted,
|
||||
getCurrentInstance,
|
||||
computed
|
||||
computed,
|
||||
watch
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad,
|
||||
@@ -225,7 +245,9 @@
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
|
||||
msgRef.value.show({
|
||||
title: '暂无功能，请期待~'
|
||||
})
|
||||
}
|
||||
|
||||
const tabList = ref([{
|
||||
@@ -235,11 +257,25 @@
|
||||
}, {
|
||||
name: '理财产品',
|
||||
}])
|
||||
const currentTab = ref(0)
|
||||
const currentTab = ref(1)
|
||||
const currentMenu = ref(0)
|
||||
|
||||
watch(currentTab, (val) => {
|
||||
if (val == 0 || val === 2) {
|
||||
msgRef.value.show({
|
||||
title: '暂无功能，请期待~'
|
||||
})
|
||||
currentTab.value = 1
|
||||
return
|
||||
}
|
||||
loadData()
|
||||
})
|
||||
|
||||
const handleChangeMenu = (val) => {
|
||||
currentMenu.value = val
|
||||
clearData()
|
||||
params.value.status = val
|
||||
loadData()
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
@@ -290,9 +326,9 @@
|
||||
// 详情
|
||||
const showDetail = ref(false)
|
||||
const detailInfo = ref({})
|
||||
const allPay = computed(()=>{
|
||||
const allPay = computed(() => {
|
||||
let data = 0
|
||||
detailInfo.value.items.forEach(item=>{
|
||||
detailInfo.value.items.forEach(item => {
|
||||
data += item.rongdou_price * item.quantity
|
||||
})
|
||||
return data
|
||||
@@ -308,22 +344,30 @@
|
||||
page: 1,
|
||||
limit: 10,
|
||||
search: '',
|
||||
status: ''
|
||||
})
|
||||
const loadStatus = ref('loadmore')
|
||||
const maxPage = ref(1)
|
||||
const orderList = ref([])
|
||||
|
||||
const loadData = () => {
|
||||
if (loadStatus.value == 'nomore') return
|
||||
mallAPI.getOrderList(params.value).then(res => {
|
||||
orderList.value = orderList.value.concat(res.data.orders)
|
||||
maxPage.value = res.data.pagination.pages
|
||||
params.value.page++
|
||||
console.log(orderList.value);
|
||||
if (maxPage.value < params.value.page) {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
})
|
||||
if (currentTab.value == 0) {
|
||||
// 项目订单
|
||||
} else if (currentTab.value == 1) {
|
||||
// 商品订单
|
||||
if (loadStatus.value == 'nomore') return
|
||||
mallAPI.getOrderList(params.value).then(res => {
|
||||
orderList.value = orderList.value.concat(res.data.orders)
|
||||
maxPage.value = res.data.pagination.pages
|
||||
params.value.page++
|
||||
if (maxPage.value < params.value.page) {
|
||||
loadStatus.value = 'nomore'
|
||||
}
|
||||
})
|
||||
} else if (currentTab.value == 2) {
|
||||
// 理财产品
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const clearData = () => {
|
||||
@@ -364,15 +408,16 @@
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
line-height: 100%;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 20rpx;
|
||||
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
.menu-item {
|
||||
background: #DFDFDF;
|
||||
border-radius: 12rpx;
|
||||
padding: 12rpx 20rpx;
|
||||
color: #676767;
|
||||
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
@@ -469,7 +514,7 @@
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
line-height: 100%;
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user