You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
361 lines
9.1 KiB
361 lines
9.1 KiB
2 weeks ago
|
<template>
|
||
|
|
<view>
|
||
|
|
<view :class="[{'not-auth': !per}]">
|
||
|
|
<view class="filter">
|
||
|
|
<uni-search-bar class="search" radius="30" placeholder="请输入学校名称，商务经理，订单号" v-model="keyword" clearButton="auto" cancelButton="none" />
|
||
|
|
<view :class="['sort', sort]" @click="switchSort"></view>
|
||
|
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="popup = true"></uni-icons>
|
||
|
|
</view>
|
||
|
|
<ul class="tab">
|
||
|
|
<li v-for="(tab, i) in tabs" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<template v-if="list.length">
|
||
|
|
<view class="list">
|
||
|
|
<uni-swipe-action>
|
||
|
|
<uni-swipe-action-item
|
||
|
|
v-for="item in list"
|
||
|
|
:threshold="0"
|
||
|
|
:right-options="delOption"
|
||
|
|
@click="del(item)"
|
||
|
|
>
|
||
|
|
<view class="item" @click="toDetail(item)">
|
||
|
|
<view class="c-name">{{ item.orderNumber }}</view>
|
||
|
|
<view class="info">
|
||
|
|
<view class="left">
|
||
|
|
<view v-if="curTab" class="line">
|
||
|
|
<text class="name">商务经理：</text>
|
||
|
|
<text class="val">{{ item.businessManagerName }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<text class="name">客户名称：</text>
|
||
|
|
<text class="val">{{ item.customerName }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<text class="name">订单金额：</text>
|
||
|
|
<text class="val">{{ item.orderAmount }}元</text>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<text class="name">订单内容：</text>
|
||
|
|
<view class="val ell-wrap">
|
||
|
|
<view :class="{ell: !item.toggle}">{{ item.orderContent }}</view>
|
||
|
|
<view v-if="item.orderContent && item.orderContent.length > 14" class="toggle" @click.stop="toggle(item)">{{ item.toggle ? '收起' : '展开' }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="line">
|
||
|
|
<text class="name">下单日期：</text>
|
||
|
|
<text class="val">{{ item.createTime }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view :class="['type', 'type' + item.orderStatus]">
|
||
|
|
{{ filterData[0].data.find(e => e.value === item.orderStatus).title }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-swipe-action-item>
|
||
|
|
</uni-swipe-action>
|
||
|
|
</view>
|
||
|
|
<uni-load-more :status="status" />
|
||
|
|
</template>
|
||
|
|
<empty v-else></empty>
|
||
|
|
|
||
|
|
<uni-icons class="plus" type="plus-filled" size="60" color="#007eff" @click="$util.to('/order/orderDetail/orderDetail')"></uni-icons>
|
||
|
|
<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<notAuth v-if="!per"></notAuth>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { queryCustomer } from '@/apis/modules/client.js'
|
||
|
|
import { list, del } from '@/apis/modules/order.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
per: true, // 是否有权限
|
||
|
|
popup: false,
|
||
|
|
//筛选表单数据
|
||
|
|
filterData: [
|
||
|
|
{
|
||
|
|
children: false,//是否有子项
|
||
|
|
title: "订单状态",
|
||
|
|
key: "orderStatus", //键名 接收对象名字
|
||
|
|
keyValue: "value", //获取的值是哪个
|
||
|
|
isRadio: true, //是否单选 否则多选
|
||
|
|
data: [
|
||
|
|
{
|
||
|
|
title: "待发货",
|
||
|
|
value: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "已完成",
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "已取消",
|
||
|
|
value: 2
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
],
|
||
|
|
filterForm: {},
|
||
|
|
curTab: 0,
|
||
|
|
tabs: [
|
||
|
|
{
|
||
|
|
name: '我的订单',
|
||
|
|
id: 0
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '团队全部订单',
|
||
|
|
id: 1
|
||
|
|
}
|
||
|
|
],
|
||
|
|
reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
|
||
|
|
status: 'more', // 上拉加载状态 more|loading|noMore
|
||
|
|
searchTimer: null,
|
||
|
|
orderStatus: '',
|
||
|
|
sort: 'desc',
|
||
|
|
keyword: '',
|
||
|
|
list: [],
|
||
|
|
page: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
delOption: [{
|
||
|
|
text: '删除',
|
||
|
|
style: {
|
||
|
|
backgroundColor: '#F56C6C'
|
||
|
|
}
|
||
|
|
}],
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
keyword () {
|
||
|
|
clearTimeout(this.searchTimer)
|
||
|
|
this.searchTimer = setTimeout(() => {
|
||
|
|
this.initList()
|
||
|
|
}, 500)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 下拉刷新
|
||
|
|
onPullDownRefresh() {
|
||
|
|
this.initList()
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}, 1500)
|
||
|
|
},
|
||
|
|
// 上拉加载
|
||
|
|
onReachBottom() {
|
||
|
|
if (this.reachBottom >= 0) {
|
||
|
|
this.reachBottom = 1
|
||
|
|
this.status = 'loading'
|
||
|
|
this.getList()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.per = true
|
||
|
|
// 清除订单缓存
|
||
|
|
try {
|
||
|
|
uni.removeStorageSync('orderForm')
|
||
|
|
uni.removeStorageSync('courses')
|
||
|
|
} catch (e) {}
|
||
|
|
this.initRole()
|
||
|
|
this.$uma.trackEvent('order') // 友盟统计
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 初始化权限
|
||
|
|
initRole() {
|
||
|
|
const auth = uni.getStorageSync('auth')
|
||
|
|
if (!auth.includes('订单')) {
|
||
|
|
this.per = false
|
||
|
|
this.list = [
|
||
|
|
{
|
||
|
|
businessManagerName: '智信云',
|
||
|
|
customerName: '智信云师资培训班',
|
||
|
|
orderContent: 'python实训系统',
|
||
|
|
createTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
businessManagerName: '智信云智信云智信云',
|
||
|
|
customerName: '智信云师资培训班',
|
||
|
|
orderContent: 'python实训系统',
|
||
|
|
createTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
businessManagerName: '智信云智信云',
|
||
|
|
customerName: '智信云师资培训班',
|
||
|
|
orderContent: 'python系统',
|
||
|
|
createTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
businessManagerName: '智信云',
|
||
|
|
customerName: '智信云师资培训班智信云师资培训班',
|
||
|
|
orderContent: 'python实训系统,实训系统',
|
||
|
|
createTime: '2023-08-08'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
businessManagerName: '智信云',
|
||
|
|
customerName: '智信云师资培训班',
|
||
|
|
orderContent: 'python实训系统',
|
||
|
|
createTime: '2023-08-08'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
this.tabs = []
|
||
|
|
auth.includes('订单:我的订单') && this.tabs.push({
|
||
|
|
name: '我的订单',
|
||
|
|
id: 0
|
||
|
|
})
|
||
|
|
auth.includes('订单:团队全部订单') && this.tabs.push({
|
||
|
|
name: '团队全部订单',
|
||
|
|
id: 1
|
||
|
|
})
|
||
|
|
const len = this.tabs.length
|
||
|
|
// 只有一个的话，取第一个，而且不用显示tab
|
||
|
|
if (len === 1) {
|
||
|
|
this.curTab = this.tabs[0].id
|
||
|
|
this.tabs = []
|
||
|
|
}
|
||
|
|
this.per && this.initList()
|
||
|
|
},
|
||
|
|
getList() {
|
||
|
|
const data = {
|
||
|
|
businessManagerId: this.$util.getBmId(),
|
||
|
|
teamId: uni.getStorageSync('team').id,
|
||
|
|
keywords: this.keyword,
|
||
|
|
pageNum: this.page,
|
||
|
|
pageSize: this.pageSize,
|
||
|
|
sort: this.sort,
|
||
|
|
orderStatus: this.orderStatus,
|
||
|
|
type: this.curTab
|
||
|
|
}
|
||
|
|
uni.showLoading({
|
||
|
|
title: '加载中'
|
||
|
|
})
|
||
|
|
list(data).then(({ data }) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
|
||
|
|
const list = data.records
|
||
|
|
list.map(e => {
|
||
|
|
if (e.orderContent) e.toggle = e.orderContent.length < 14 // 超过了14个字才需要显示展开按钮
|
||
|
|
})
|
||
|
|
this.list = this.reachBottom > 0 ? [...this.list, ...list] : list
|
||
|
|
this.page++ // 每次获取了数据后page+1
|
||
|
|
const noMore = this.list.length === data.total // 是否加载完所有数据
|
||
|
|
this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
|
||
|
|
this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
|
||
|
|
}).catch(e => {
|
||
|
|
uni.hideLoading()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
initList() {
|
||
|
|
this.page = 1
|
||
|
|
this.reachBottom = 0
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
// 展开
|
||
|
|
toggle(item) {
|
||
|
|
item.toggle = !item.toggle
|
||
|
|
},
|
||
|
|
// 筛选确定回调
|
||
|
|
subFinsh(val) {
|
||
|
|
const { orderStatus } = val
|
||
|
|
this.orderStatus = orderStatus.length ? orderStatus[0] : ''
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// 排序
|
||
|
|
switchSort() {
|
||
|
|
this.sort = this.sort === 'desc' ? 'asc' : 'desc'
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// tab切换
|
||
|
|
tabChange(tab) {
|
||
|
|
this.curTab = tab.id
|
||
|
|
this.initList()
|
||
|
|
},
|
||
|
|
// 跳转详情
|
||
|
|
toDetail(item) {
|
||
|
|
this.$util.to(`/order/orderDetail/orderDetail?orderId=${item.orderId}&show=1`)
|
||
|
|
},
|
||
|
|
// 删除
|
||
|
|
del(e) {
|
||
|
|
const that = this
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确定要删除吗？',
|
||
|
|
success(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
del({
|
||
|
|
ids: [e.orderId]
|
||
|
|
}).then(res => {
|
||
|
|
that.$util.sucMsg('删除成功')
|
||
|
|
that.initList()
|
||
|
|
}).catch(res => {})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.list {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
.item {
|
||
|
|
width: 100%;
|
||
|
|
padding: 20rpx 40rpx;
|
||
|
|
border-bottom: 1px solid #f1f1f1;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
.c-name {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
}
|
||
|
|
.left {
|
||
|
|
max-width: 70%;
|
||
|
|
}
|
||
|
|
.line {
|
||
|
|
display: flex;
|
||
|
|
padding: 10rpx 0;
|
||
|
|
}
|
||
|
|
.name {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
.val {
|
||
|
|
max-width: 88%;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
.ell {
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.toggle {
|
||
|
|
margin-top: 10rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #0e92ef;
|
||
|
|
}
|
||
|
|
.type {
|
||
|
|
margin-left: 20rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #ff7b2d;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
.type1 {
|
||
|
|
color: #bdbdbd;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|