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