【类 型】：feat
【原 因】： 【过 程】：订单页 tab标签 swiper容器 功能 和 ui 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
This commit is contained in:
parent
ac906db5d8
commit
3838ee7563
8
App.vue
8
App.vue
@ -66,6 +66,14 @@
|
||||
.animation {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
//占位 空符
|
||||
.extra-space1 {
|
||||
height: 400rpx;
|
||||
}
|
||||
//占位 空符
|
||||
.extra-space2 {
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.checkBox {
|
||||
weight: 40rpx;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-t-24 p-24 bg-w boxshadow">
|
||||
<view class="mealsBox rad8 flex column m-r-24 m-l-24 m-b-24 p-24 bg-w boxshadow">
|
||||
<view class="flex">
|
||||
<view class="flex3 ofh">
|
||||
<view class="fz24 fcb m-t-12">订单号：{{order.order_sn}}</view>
|
||||
|
||||
@ -14,9 +14,39 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- tabLine -->
|
||||
<view class="tabLineBox flex mac mc" :style="{ left: tabLineLeft + 'rpx' }">
|
||||
<view class="tabLineBox flex mac mc z-top" :style="{ left: tabLineLeft + 'rpx' }">
|
||||
<view class="tabLine rad8 bg-m"></view>
|
||||
</view>
|
||||
<!-- 订单页 swiper -->
|
||||
<swiper class="swiperClass m-t-12" :current="current" @animationfinish="animationfinish">
|
||||
<swiper-item class="swiperClass">
|
||||
<scroll-view scroll-y class="swiperClass">
|
||||
<view v-if="orderList_unpaid.length>0">
|
||||
<orderItem v-for="order in orderList_unpaid" :order=order :key="order.id"></orderItem>
|
||||
<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
|
||||
<view class="extra-space2"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view v-if="orderList_paid.length>0">
|
||||
<orderItem v-for="order in orderList_paid" :order=order :key="order.id"></orderItem>
|
||||
<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
|
||||
<view class="extra-space2"></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view v-if="orderList_refund.length>0">
|
||||
<orderItem v-for="order in orderList_refund" :order=order :key="order.id"></orderItem>
|
||||
<u-divider class="m-r-24 m-l-24" text="没有更多了" :hairline="true"></u-divider>
|
||||
<view class="extra-space2"></view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- tabbar -->
|
||||
<view>
|
||||
<tabbar></tabbar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -26,17 +56,43 @@
|
||||
return {
|
||||
tabList: ['待支付', '已付款', '退款售后'], // tab标签
|
||||
current: 0, //当前激活标签
|
||||
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
|
||||
tabLineLeft: 24 //tabLine 样式表的left值
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//未付款订单
|
||||
orderList_unpaid() {
|
||||
return this.$store.state.orderList.filter(item => item.main_status === '未付款')
|
||||
},
|
||||
//已付款 并且没有申请退款的订单
|
||||
orderList_paid(){
|
||||
return this.$store.state.orderList.filter(item => item.main_status === '已付款' && item.refund_status === '未申请')
|
||||
},
|
||||
//已经申请退款的订单
|
||||
orderList_refund(){
|
||||
return this.$store.state.orderList.filter(item => item.refund_status !== '未申请')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//点击tab标签时 设置current
|
||||
handlerTab(index) {
|
||||
this.current = index
|
||||
// 计算每个 tabLine 的left值
|
||||
const tabWidth = 200
|
||||
const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
|
||||
1) // 750是屏幕宽度，48是左右边距
|
||||
this.tabLineLeft = 24 + index * (tabWidth + spacing) // 计算新的 left 值
|
||||
},
|
||||
// swiper滑动结束，设置current
|
||||
animationfinish(e) {
|
||||
this.current = e.detail.current
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
current: {
|
||||
handler(val) {
|
||||
// 计算每个 tabLine 的left值
|
||||
const tabWidth = 200
|
||||
const spacing = (750 - tabWidth * this.tabList.length - 48) / (this.tabList.length -
|
||||
1) // 750是屏幕宽度，48是左右边距
|
||||
this.tabLineLeft = 24 + val * (tabWidth + spacing) // 计算新的 left 值
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -56,11 +112,15 @@
|
||||
width: 200rpx;
|
||||
height: 8rpx;
|
||||
position: absolute;
|
||||
transition: all .5s ease;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.tabLine {
|
||||
width: 70rpx;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.swiperClass {
|
||||
height: calc(100vh - 297rpx);
|
||||
}
|
||||
</style>
|
||||
@ -127,16 +127,6 @@
|
||||
this.$store.commit('setTabbarCurrent', 1)
|
||||
},
|
||||
watch: {
|
||||
// 'spuList': {
|
||||
// handler(newVal, oldVal) {
|
||||
// console.log("spuList 发生变化")
|
||||
// console.log("新值:", newVal)
|
||||
// console.log("旧值:", oldVal)
|
||||
// // 更新其他状态或执行其他操作
|
||||
// // this.someOtherFunction()
|
||||
// },
|
||||
// deep: true // 如果需要深度监视对象或数组的变化，则需要设置为true
|
||||
// }
|
||||
},
|
||||
computed: {
|
||||
//站点信息
|
||||
@ -349,14 +339,6 @@
|
||||
background-color: $uni-color-error;
|
||||
}
|
||||
|
||||
.extra-space1 {
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.extra-space2 {
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.cartBox {
|
||||
z-index: 10071;
|
||||
width: calc(100vw - 48rpx);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user