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.
62 lines
1.4 KiB
62 lines
1.4 KiB
4 years ago
|
<template>
|
||
|
|
<view class="content my-bg">
|
||
|
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||
|
|
<block slot="backText">返回</block>
|
||
|
|
<block slot="content">加油记录</block>
|
||
|
|
</cu-custom>
|
||
|
|
<scroll-view scroll-x class="bg-white nav">
|
||
|
|
<view class="flex text-center">
|
||
|
|
<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in tabList" :key="index"
|
||
|
|
@tap="tabSelect" :data-id="index">
|
||
|
|
{{item}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
<view class="margin">
|
||
|
|
<OrderItem class="cu-list menu-avatar comment " v-for="(item,index) in tabList" :key="index" v-show="index==TabCur" :item="order" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import OrderItem from '@/components/order-item'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
OrderItem
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabList:[
|
||
|
|
'全部','待支付','已支付','退款'
|
||
|
|
],
|
||
|
|
TabCur: 0,
|
||
|
|
scrollLeft: 0,
|
||
|
|
order: {
|
||
|
|
istate: 0,
|
||
|
|
vol: 3,
|
||
|
|
oilName: '0#',
|
||
|
|
orderID: '15979997825872',
|
||
|
|
oilCode: '12396989',
|
||
|
|
oilSiteName: '疯疯疯加油站',
|
||
|
|
carNo: '皖A12354',
|
||
|
|
sourceType: 3,
|
||
|
|
realamount: 4.66,
|
||
|
|
credateDatetime: '2020-10-12 12:30:10'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabSelect(e) {
|
||
|
|
this.TabCur = e.currentTarget.dataset.id;
|
||
|
|
this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.content {
|
||
|
|
min-height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|