307 lines
6.6 KiB
Vue
307 lines
6.6 KiB
Vue
<script setup>
|
|
// 我的订单
|
|
import {
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onUnload,
|
|
onReachBottom,
|
|
onPullDownRefresh,
|
|
onPageScroll
|
|
} from '@dcloudio/uni-app';
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
// api
|
|
import api from '@/api/index.js';
|
|
// 订单方法
|
|
import order from '@/common/js/order.js'
|
|
// 顶部
|
|
import apex from '@/components/header/apex.vue'
|
|
// 顶部条件栏
|
|
import JyShopNavigation from '@/components/public/jy-shop-navigation'
|
|
// 订单
|
|
import orderItem from '@/components/shop/order/item.vue';
|
|
// 快递信息
|
|
import expressVue from '@/components/shop/order/express.vue';
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
|
|
// tabs
|
|
const tabs = reactive([{
|
|
id: '',
|
|
name: '全部'
|
|
},
|
|
{
|
|
id: 0,
|
|
name: '待付款'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '待发货'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '待收货'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '已收货'
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '已完成'
|
|
},
|
|
{
|
|
id: 9,
|
|
name: '已取消'
|
|
}
|
|
])
|
|
// 列表
|
|
const list = reactive({
|
|
status: '',
|
|
search: '',
|
|
data: [],
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
total: 0,
|
|
})
|
|
// 顶部导航背景颜色
|
|
const apexBgColor = ref('#ffffff00')
|
|
|
|
onLoad((options) => {
|
|
// this.params.currentTab = options.currentTab / 1
|
|
// 获取订单列表
|
|
getList()
|
|
// 开启监听
|
|
addListener()
|
|
})
|
|
|
|
onUnload(() => {
|
|
// 移除监听
|
|
removeListener()
|
|
})
|
|
|
|
onPageScroll((ev) => {
|
|
apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
// 获取更多列表
|
|
getMoreList()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
// 重载列表
|
|
refreshList()
|
|
})
|
|
|
|
// 开启监听
|
|
function addListener() {
|
|
uni.$on('updateOrderList', (data) => {
|
|
// 重载列表
|
|
refreshList()
|
|
})
|
|
}
|
|
|
|
// 移除监听
|
|
function removeListener() {
|
|
uni.$off('updateOrderList')
|
|
}
|
|
|
|
// 重载列表
|
|
function refreshList() {
|
|
list.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 获取更多列表
|
|
function getMoreList() {
|
|
if (list.data.length >= list.total) return
|
|
list.pageNum++
|
|
getList()
|
|
}
|
|
|
|
// 获取订单列表
|
|
function getList() {
|
|
api.shop.getOrderList({
|
|
query: {
|
|
searchStr: list.search,
|
|
status: list.status,
|
|
pageNum: list.pageNum,
|
|
pageSize: list.pageSize,
|
|
},
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
if (list.pageNum == 1) list.data.length = 0
|
|
list.data.push(...res.rows.map(item => {
|
|
// 状态
|
|
item.status = Number(item.status)
|
|
item.refundStatus = Number(item.refundStatus)
|
|
// 编辑订单状态文字
|
|
if (item.refundStatus != 0) {
|
|
item.status_text = {
|
|
'1': '售后中',
|
|
'3': '售后完成',
|
|
} [item.refundStatus]
|
|
} else {
|
|
item.status_text = {
|
|
'0': '待支付',
|
|
'1': '待发货',
|
|
'4': '待收货',
|
|
'5': '已收货',
|
|
'6': '已完成',
|
|
'9': '已取消',
|
|
} [item.status]
|
|
}
|
|
return item
|
|
}))
|
|
list.total = res.total
|
|
return
|
|
}
|
|
util.alert({
|
|
content: res.msg,
|
|
showCancel: false
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击订单列表项
|
|
* @param {Object} ev 订单列表项
|
|
*/
|
|
function handleItem(ev) {
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/shop/order/detail', {
|
|
orderId: ev.id,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击tab
|
|
* @param {Object} ev
|
|
*/
|
|
function itemClick(ev) {
|
|
list.status = ev.id
|
|
// 重载列表
|
|
refreshList()
|
|
}
|
|
|
|
/**
|
|
* 取消订单
|
|
* @param {Object} item 订单
|
|
*/
|
|
function handleCancel(item) {
|
|
order.orderCancel({
|
|
orderId: item.id,
|
|
}).then(res => {
|
|
// 重载列表
|
|
refreshList()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 确认收货
|
|
* @param {Object} item
|
|
*/
|
|
function handleReceived(item) {
|
|
order.orderReceived({
|
|
orderId: item.id,
|
|
}).then(res => {
|
|
// 重载列表
|
|
refreshList()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<apex :bgColor="apexBgColor" mode="flex">
|
|
<template #content>
|
|
<view class="search rows f1 mr30 plr20 bf8f8f8 br10">
|
|
<uni-icons type="search" color="#999" />
|
|
<input class="input ml20" v-model="list.search" type="text" placeholder="搜索内容" @confirm="refreshList" />
|
|
</view>
|
|
</template>
|
|
</apex>
|
|
|
|
<view class="app">
|
|
<view class="shopHeaderBg bgColor"></view>
|
|
|
|
<view class="f1 pr">
|
|
<JyShopNavigation :list="tabs" @tabItemClick="itemClick" />
|
|
</view>
|
|
|
|
<view class="product mlr20 pr">
|
|
<!-- 订单列表 -->
|
|
<view class="order">
|
|
<template v-for="(item,index) in list.data" :key="index">
|
|
<view class="mtb30">
|
|
<orderItem :item="item" mode="mine" @item="handleItem">
|
|
<!-- 操作按钮 -->
|
|
<template #menu="scope">
|
|
<view class="menu ptb20 df jcr" v-if="[0,1,4,5,6].includes(scope.item.status)">
|
|
<template v-if="scope.item.refundStatus == 1">
|
|
<view class="btn bar warmHollow plr30" @click.stop="handleCancel(scope.item)">
|
|
填写退货物流信息</view>
|
|
</template>
|
|
<template v-else-if="scope.item.status == 0">
|
|
<view class="btn bar closeHollow plr30" @click.stop="handleCancel(scope.item)">
|
|
取消订单</view>
|
|
<view class="btn bar warmHollow plr30" @click.stop="order.orderPay(item)">继续付款
|
|
</view>
|
|
</template>
|
|
<template v-else-if="scope.item.status == 1">
|
|
<view class="btn bar closeHollow plr30"
|
|
@click.stop="order.orderAfterSales(item)">申请退款</view>
|
|
<!-- <view class="btn bar warmHollow plr30">催发货</view> -->
|
|
</template>
|
|
<template v-else-if="scope.item.status == 4">
|
|
<view class="btn bar closeHollow plr30"
|
|
@click.stop="order.orderAfterSales(item)">申请退款</view>
|
|
<view class="btn bar closeHollow plr30" @click.stop="order.logistics(item)">查看物流
|
|
</view>
|
|
<view class="btn bar warmHollow plr30" @click.stop="handleReceived(item)">确认收货
|
|
</view>
|
|
</template>
|
|
<template v-else-if="scope.item.status == 5">
|
|
<view class="btn bar closeHollow plr30"
|
|
@click.stop="order.orderAfterSales(item)">申请退款</view>
|
|
<view class="btn bar warmHollow plr30">评价</view>
|
|
</template>
|
|
<template v-else-if="scope.item.status == 6">
|
|
<view class="btn bar closeHollow plr30">取消售后</view>
|
|
<view class="btn bar closeHollow plr30">钱款去向</view>
|
|
<view class="btn bar warmHollow plr30">平台介入</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
</orderItem>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 物流弹窗 -->
|
|
<expressVue ref="expressRef" />
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
// 搜索
|
|
.search {
|
|
height: 30px;
|
|
}
|
|
|
|
// 背景颜色
|
|
.bgColor {
|
|
height: 300rpx;
|
|
}
|
|
|
|
.menu {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
</style> |