6.8
This commit is contained in:
119
pageE/order/Index.vue
Normal file
119
pageE/order/Index.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="order">
|
||||
<view>
|
||||
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color="#FF780F" :current="current" font-size="26" @change="tabsChange" height="88" :gutter="30"></u-tabs-swiper>
|
||||
</view>
|
||||
<swiper :current="swiperCurrent" @animationfinish="animationfinish">
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container" v-for="(item, index) in 4" :key="index">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item class="swiper-item">
|
||||
<scroll-view scroll-y style="height: 100%;">
|
||||
<view class="item-container">
|
||||
<OrderItem :current="current"></OrderItem>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import OrderItem from '@/components/mine/order-item/index'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
name: '全部'
|
||||
}, {
|
||||
name: '待支付'
|
||||
}, {
|
||||
name: '已取消'
|
||||
}, {
|
||||
name: '待收货'
|
||||
}, {
|
||||
name: '试穿试送'
|
||||
}, {
|
||||
name: '待评价'
|
||||
}, {
|
||||
name: '售后'
|
||||
}],
|
||||
current: 0,
|
||||
swiperCurrent: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
OrderItem
|
||||
},
|
||||
onLoad(option) {
|
||||
if(option.current) {
|
||||
this.current = Number(option.current);
|
||||
this.swiperCurrent = this.current;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tabsChange(index) {
|
||||
this.swiperCurrent = Number(index);
|
||||
},
|
||||
animationfinish(e) {
|
||||
let current = Number(e.detail.current);
|
||||
this.swiperCurrent = current;
|
||||
this.current = current;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.order {
|
||||
min-height: calc(100vh - var(--window-top));
|
||||
background-color: #ECECEC;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> uni-swiper {
|
||||
flex: 1;
|
||||
}
|
||||
.swiper-item {
|
||||
.item-container {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user