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.
151 lines
3.8 KiB
151 lines
3.8 KiB
<template> |
|
<view class="order_container" style="height: 100%;overflow: hidden;"> |
|
<view :style="{height:`${titleStyle.height}px`}" class="order_title"> |
|
<text> 我的订单</text> |
|
</view> |
|
<!-- 列表 --> |
|
<view style="overflow: hidden;" class="order_list_container flex column"> |
|
<!-- 搜索框 --> |
|
<view class="order_list_header"> |
|
<!-- 输入框 --> |
|
<view class="flex"> |
|
<view class="order_list_header_input oneflex"> |
|
<uni-icons class="order_list_header_input_icon" type="search" size="20"></uni-icons> |
|
<input @confirm="seach" v-model="page.params.id" placeholder="输入订单号搜索" type="text"> |
|
<uni-icons v-if="page.params.id!==''" @click="page.params.id=''" type="clear" |
|
size="20"></uni-icons> |
|
</view> |
|
</view> |
|
<!-- 选项 --> |
|
<view class="order_list_option_list flex around"> |
|
<view @click="page.params.orderStatus =item.value;page.currentPage=1;getList() " |
|
v-for="(item,index) in options" :key="index" |
|
:class=" `order_list_option_list_item flex jc ac` + ( page.params.orderStatus==item.value?' select_order_list_option_list_item':'') "> |
|
{{item.label}} |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 列表 --> |
|
<view class="order_list"> |
|
<scroll-view @refresherrefresh='refresherrefresh' :refresher-enabled='true' |
|
:refresher-triggered='refresherTriggered' v-if="orderList.length" style="height: 100%;" |
|
scroll-y="true" @scrolltolower='scrolltolower'> |
|
<order-item :orderData='item' class="order_list_item" :listIndex='index' :index='index' |
|
v-for="(item,index) in orderList"></order-item> |
|
</scroll-view> |
|
<image class="qx" v-else src="../../static/qs.png" mode=""></image> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import order from '@/api/order.js' |
|
import orderItem from "@/components/orderItem/orderItem.vue" |
|
export default { |
|
components: { |
|
orderItem |
|
}, |
|
options: { |
|
styleIsolation: 'shared' |
|
}, |
|
data() { |
|
return { |
|
refresherTriggered: false, |
|
orderList: [], |
|
page: { |
|
"pageSize": 10, |
|
"currentPage": 1, |
|
"params": { |
|
"orderStatus": "", // 筛选条件-订单状态，注意这里传参是字符串，不是数值 |
|
'id': '' |
|
}, |
|
"sorted": {}, |
|
"columns": [], |
|
"totalCount": '', |
|
"totalPage": '' |
|
}, |
|
titleStyle: {}, |
|
options: [{ |
|
label: '全部', |
|
value: '' |
|
}, { |
|
label: '充电中', |
|
value: '2' |
|
}, { |
|
label: '停止中', |
|
value: '3' |
|
}, { |
|
label: '已结束', |
|
value: '4' |
|
}] |
|
} |
|
}, |
|
created() { |
|
this.init() |
|
}, |
|
onLoad() { |
|
this.onOrderUpdate() |
|
}, |
|
mounted() { |
|
|
|
}, |
|
methods: { |
|
onOrderUpdate() { |
|
uni.$on('orderUpdate', () => { |
|
this.seach() |
|
}) |
|
}, |
|
refresherrefresh() { |
|
this.refresherTriggered = true; |
|
this.seach() |
|
}, |
|
seach() { |
|
this.page.currentPage = 1; |
|
this.getList(); |
|
}, |
|
scrolltolower() { |
|
this.page.currentPage += 1; |
|
this.getList(); |
|
}, |
|
getList() { |
|
// debugger |
|
console.log(this.page,'this.page') |
|
order.getMobileByPage(this.page).then(res => { |
|
if (res.code == 20000) { |
|
if (this.page.currentPage !== 1) { |
|
this.orderList = this.orderList.concat(res.data.list) |
|
} else { |
|
this.orderList = res.data.list |
|
} |
|
} |
|
this.refresherTriggered = false |
|
}) |
|
}, |
|
init() { |
|
this.titleStyle = wx.getMenuButtonBoundingClientRect(); //获取高度 |
|
this.getList() |
|
} |
|
} |
|
} |
|
</script> |
|
<style> |
|
@keyframes charge { |
|
0% { |
|
background: linear-gradient(to right, rgba(79, 195, 197, 0.30), rgba(255, 255, 255, 0)) ; |
|
} |
|
50% { |
|
background-color: rgba(79, 195, 197, 0.30) ; |
|
} |
|
100% { |
|
background: linear-gradient(to right, rgba(79, 195, 197, 0.30), rgba(255, 255, 255, 0)) ; |
|
} |
|
} |
|
|
|
.charging { |
|
animation: charge 3s infinite linear; |
|
} |
|
</style> |
|
<style lang="scss" scoped> |
|
@import 'index.scss'; |
|
@import '../index/index.scss'; |
|
</style> |