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
1 year ago
|
<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>
|