251 lines
5.7 KiB
Vue
251 lines
5.7 KiB
Vue
<script setup>
|
|
// 商家订单
|
|
import {
|
|
ref,
|
|
reactive,
|
|
computed,
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onPageScroll,
|
|
} from '@dcloudio/uni-app';
|
|
import {
|
|
useStore
|
|
} from 'vuex'
|
|
// 顶部
|
|
import apex from '@/components/header/apex.vue'
|
|
//顶部条件栏
|
|
import JyShopNavigation from '@/components/public/jy-shop-navigation'
|
|
// 订单列表项
|
|
import orderItem from '@/components/shop/order/item.vue';
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
//
|
|
import api from '@/api/index.js'
|
|
|
|
//
|
|
const store = useStore()
|
|
// tabs
|
|
const tabs = reactive([{
|
|
id: '',
|
|
name: '全部'
|
|
},
|
|
{
|
|
id: 0,
|
|
name: '待付款'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '待发货'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '待收货'
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '售后/退款'
|
|
}
|
|
])
|
|
// 当前tab下标
|
|
const tabIndex = ref(0)
|
|
// 列表
|
|
const list = reactive({
|
|
search: '',
|
|
status: '',
|
|
data: [],
|
|
pageSize: 10,
|
|
pageNum: 1,
|
|
total: 0,
|
|
})
|
|
// 顶部导航背景颜色
|
|
const apexBgColor = ref('#ffffff00')
|
|
// 用户信息
|
|
const userinfo = computed(() => store.state.userinfo)
|
|
|
|
onLoad((options) => {
|
|
// 获取商家订单列表
|
|
getList()
|
|
})
|
|
|
|
onPageScroll((ev) => {
|
|
apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
|
|
})
|
|
|
|
// 重载列表
|
|
function refreshList() {
|
|
list.pageNum = 1
|
|
getList()
|
|
}
|
|
|
|
// 获取更多列表
|
|
function getMoreList() {
|
|
if (list.data.length >= list.total) return
|
|
list.pageNum++
|
|
getList()
|
|
}
|
|
|
|
// 获取商家订单列表
|
|
function getList() {
|
|
api.shop.getShopOrderList({
|
|
query: {
|
|
merId: userinfo.value.merId,
|
|
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 = {
|
|
'0': '待审核',
|
|
'1': '商家拒绝',
|
|
'2': '退款中',
|
|
'3': '已退款',
|
|
'4': '用户退货',
|
|
'5': '商家待收货',
|
|
'6': '已撤销',
|
|
} [item.afterSaleStatus]
|
|
} 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) {
|
|
console.log('handleItem', ev)
|
|
return
|
|
uni.navigateTo({
|
|
url: util.setUrl('/pages/shop/order/detail')
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击tab
|
|
* @param {Object} ev
|
|
*/
|
|
function itemClick(ev) {
|
|
list.status = ev.id
|
|
// 重载列表
|
|
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" type="text" placeholder="搜索内容" />
|
|
</view>
|
|
</template>
|
|
</apex>
|
|
|
|
<view class="app">
|
|
<view class="shopHeaderBg bgColor"></view>
|
|
|
|
<!-- tab选项卡 -->
|
|
<view class="f1 pr">
|
|
<JyShopNavigation v-model="tabIndex" :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="shop" @item="handleItem">
|
|
<template #menu="scope">
|
|
<!-- 收货地址 -->
|
|
<view class="menu rows ptb20" v-if="[2,3,4,5,6].includes(scope.item.status)">
|
|
<view class="key fs0 c333">收货地址</view>
|
|
<view class="value f1 ml20">
|
|
<view class="c333 f28">收货地址</view>
|
|
<view class="mt10 c666 f24">
|
|
<text>姓名</text>
|
|
<text>1397897890</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 退款原因 -->
|
|
<view class="menu rows ptb20" v-if="[6].includes(scope.item.status)">
|
|
<view class="key fs0 c333">退款原因</view>
|
|
<view class="value f1 ml20">
|
|
<view class="c333 f28">不想要了</view>
|
|
<view class="imgList mt10 c666 f24">
|
|
<template v-for="(item,index) in 3" :key="index">
|
|
<image class="imgs wh80 br10" src="/static/logo.png"
|
|
mode="aspectFill" />
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<view class="menu ptb20 df jcr" v-if="[1,2,6].includes(scope.item.status)">
|
|
<template v-if="scope.item.status == 1">
|
|
<view class="btn bar warmHollow plr30">修改价格</view>
|
|
</template>
|
|
<template v-if="scope.item.status == 2">
|
|
<view class="btn bar warmHollow plr30">发货</view>
|
|
</template>
|
|
<template v-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>
|
|
<!-- <JyOrderCard v-for="(item, index) in 10" type="user_order"></JyOrderCard> -->
|
|
</view>
|
|
|
|
<!-- 填充 -->
|
|
<view class="fill" style="height: 30rpx;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
// 搜索
|
|
.search {
|
|
height: 30px;
|
|
}
|
|
|
|
// 背景颜色
|
|
.bgColor {
|
|
height: 300rpx;
|
|
}
|
|
|
|
.menu {
|
|
border-top: 2rpx solid #eee;
|
|
}
|
|
</style> |