parent
a346cc0db3
commit
7bd7775908
23 changed files with 509 additions and 129 deletions
@ -0,0 +1,243 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<view class="filter"> |
||||||
|
<uni-search-bar class="search" radius="30" placeholder="请输入订单号、内容" v-model="keyword" clearButton="auto" cancelButton="none" /> |
||||||
|
<uni-icons class="icon" custom-prefix="iconfont" type="icon-filter" size="22" color="#007eff" @click="popup = true"></uni-icons> |
||||||
|
</view> |
||||||
|
|
||||||
|
<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.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> |
||||||
|
</template> |
||||||
|
<empty v-else></empty> |
||||||
|
|
||||||
|
<uni-icons class="plus" type="plus-filled" size="60" color="#007eff" @click="$util.to(`../orderDetail/orderDetail?customerId=${customerId}`)"></uni-icons> |
||||||
|
<filter-popup :data="filterData" :form.sync="filterForm" v-model="popup" title="全部筛选" height="1104rpx" @finsh="subFinsh"></filter-popup> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { orderList, del } from '@/apis/modules/order.js' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
customerId: '', |
||||||
|
customerName: '', |
||||||
|
popup: false, |
||||||
|
//筛选表单数据 |
||||||
|
filterData: [ |
||||||
|
{ |
||||||
|
children: false,//是否有子项 |
||||||
|
title: "订单状态", |
||||||
|
key: "orderStatus", //键名 接收对象名字 |
||||||
|
keyValue: "value", //获取的值是哪个 |
||||||
|
isRadio: true, //是否单选 否则多选 |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
title: "待发货", |
||||||
|
value: 0 |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "已完成", |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
], |
||||||
|
} |
||||||
|
], |
||||||
|
filterForm: {}, |
||||||
|
isFilter: 0, // 是否是在筛选。0->否,1->是 |
||||||
|
searchTimer: null, |
||||||
|
orderStatus: '', |
||||||
|
keyword: '', |
||||||
|
list: [], |
||||||
|
listAll: [], |
||||||
|
page: 1, |
||||||
|
pageSize: 10, |
||||||
|
delOption: [{ |
||||||
|
text: '删除', |
||||||
|
style: { |
||||||
|
backgroundColor: '#F56C6C' |
||||||
|
} |
||||||
|
}] |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
keyword () { |
||||||
|
clearTimeout(this.searchTimer) |
||||||
|
this.searchTimer = setTimeout(() => { |
||||||
|
this.filter() |
||||||
|
}, 500) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 下拉刷新 |
||||||
|
onPullDownRefresh() { |
||||||
|
this.getList() |
||||||
|
setTimeout(() => { |
||||||
|
uni.stopPullDownRefresh() |
||||||
|
}, 1500) |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
const pages = getCurrentPages() |
||||||
|
const { options } = pages[pages.length - 1] |
||||||
|
this.customerId = options.customerId |
||||||
|
this.customerName = options.name |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getList() { |
||||||
|
orderList({ |
||||||
|
cityId: '', |
||||||
|
customerName: this.customerName, |
||||||
|
orderStatus: this.orderStatus, |
||||||
|
orderType: '', |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10000, |
||||||
|
provinceId: '' |
||||||
|
}).then(({ orderPage }) => { |
||||||
|
const { orders } = orderPage |
||||||
|
this.list = orders |
||||||
|
this.listAll = orders |
||||||
|
}).catch(e => {}) |
||||||
|
}, |
||||||
|
// 展开 |
||||||
|
toggle(item) { |
||||||
|
item.toggle = !item.toggle |
||||||
|
}, |
||||||
|
// 筛选确定回调 |
||||||
|
subFinsh(val) { |
||||||
|
const { orderStatus } = val |
||||||
|
this.orderStatus = orderStatus.length ? orderStatus[0] : '' |
||||||
|
this.getList() |
||||||
|
}, |
||||||
|
// 筛选 |
||||||
|
filter() { |
||||||
|
const list = this.listAll |
||||||
|
const { keyword } = this |
||||||
|
this.list = list.filter(e => e.orderNumber.includes(keyword) || e.orderContent.includes(keyword)) |
||||||
|
}, |
||||||
|
// 跳转详情 |
||||||
|
toDetail(item) { |
||||||
|
this.$util.to(`../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.getList() |
||||||
|
}).catch(res => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.list { |
||||||
|
margin-top: 20rpx; |
||||||
|
background-color: #fff; |
||||||
|
.item { |
||||||
|
padding: 20rpx 40rpx; |
||||||
|
border-bottom: 1px solid #f1f1f1; |
||||||
|
} |
||||||
|
.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> |
||||||
|
After Width: | Height: | Size: 416 B |
Loading…
Reference in new issue