diyici
This commit is contained in:
dt_2916866708
22
pages/order/charging/index.vue
Normal file
22
pages/order/charging/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
90
pages/order/index.scss
Normal file
90
pages/order/index.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
.order_container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.order_list_container{
|
||||
flex: 1;
|
||||
background: #FFFFFF;
|
||||
border-radius: 70rpx 70rpx 0rpx 0rpx;
|
||||
padding: 44rpx 0rpx;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 0;
|
||||
overflow: hidden;
|
||||
.order_list_header{
|
||||
padding: 0 31rpx;
|
||||
.switch{
|
||||
margin-left: 20rpx;
|
||||
text{
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.switch_logo{
|
||||
margin-right: 20rpx;
|
||||
width: 37.11rpx;
|
||||
height: 33rpx;
|
||||
}
|
||||
}
|
||||
// 输入框
|
||||
.order_list_header_input{
|
||||
background: #F7F7F7;
|
||||
border-radius: 81rpx ;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
padding: 10rpx 31rpx;
|
||||
.order_list_header_input_icon{
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
// 选项列表
|
||||
.order_list_option_list{
|
||||
font-size: 24rpx;
|
||||
margin-top: 41rpx;
|
||||
.order_list_option_list_item{
|
||||
width: 142rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
||||
border: 1rpx solid #121836;
|
||||
box-sizing: border-box;
|
||||
color: #121836;
|
||||
}
|
||||
.select_order_list_option_list_item{
|
||||
background-color: #0B1123;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_list{
|
||||
flex: 1;
|
||||
margin-top: 62rpx;
|
||||
overflow: hidden;
|
||||
::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}
|
||||
}
|
||||
}
|
||||
.order_title{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 32rpx;
|
||||
// padding-left: 31rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
text{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
}
|
||||
.order_title_logo{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
pages/order/index.vue
Normal file
151
pages/order/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user