purchase-let/pagesOrder/order/order.vue

133 lines
4.2 KiB
Vue

<template>
<view>
<up-sticky bgColor="#fff">
<view style="padding: 10rpx 20rpx 0 20rpx;">
<up-search shape="round" :actionStyle="{color: '#20b128'}" ></up-search>
</view>
<up-tabs :current="tabsActive" :list="tablist" lineColor="#20b128" :scrollable="false" :activeStyle=" { color: '#20b128', fontWeight: 'bold' }" @change="changeTab"></up-tabs>
</up-sticky>
<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
<!-- 全部 -->
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view v-if="true" class="list">
<good v-for="(item, index) in 10" :key="index" :type="0"></good>
</view>
<view v-else style="padding-top: 100rpx;">
<up-empty text="订单空空如也"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item>
<!-- 待付款 -->
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view v-if="true" class="list">
<good v-for="(item, index) in 10" :key="index" :type="1"></good>
</view>
<view v-else style="padding-top: 100rpx;">
<up-empty text="订单空空如也"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item>
<!-- 待收货 -->
<swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view v-if="true" class="list">
<good v-for="(item, index) in 10" :key="index" :type="2"></good>
</view>
<view v-else style="padding-top: 100rpx;">
<up-empty text="订单空空如也"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item>
<!-- 退款/售后 -->
<!-- <swiper-item class="swiper-item">
<scroll-view scroll-y style="height: 100%;width: 100%;">
<view class="page-box">
<view v-if="true" class="list">
<good v-for="(item, index) in 10" :key="index" :type="3"></good>
</view>
<view v-else style="padding-top: 100rpx;">
<up-empty text="订单空空如也"
icon="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/29955202404260944367594.png">
</up-empty>
</view>
<view style="width: 100%;height: 200rpx;"></view>
</view>
</scroll-view>
</swiper-item> -->
</swiper>
</view>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { ref } from 'vue';
import good from "./component/good.vue";
const tabsActive = ref(0)
const changeTab = ({index}) => {
tabsActive.value = index;
swiperCurrent.value = index;
}
const tablist = ref([
{ name: '全部' },
{ name: '待付款' },
{ name: '待收货' },
// { name: '退款/售后' },
]);
const swiperCurrent = ref(0);
const animationfinish = ({ detail: { current } }) => {
swiperCurrent.value = current;
tabsActive.value = current;
}
onLoad((options)=>{
if(options.type){
tabsActive.value = +options.type;
swiperCurrent.value = +options.type;
}
})
</script>
<style lang="scss">
.swiper-box {
flex: 1;
height: calc(100vh - var(--window-top) - 140rpx);
/* #ifdef H5 */
height: calc(100vh - 210rpx);
/* #endif */
width: 100%;
.swiper-item {
height: 100%;
// background-color: pink;
}
}
.page-box{
margin: 20rpx;
.list{
}
}
</style>