<template> <view class="w-100 order-wrap"> <!-- tabBar --> <scroll-view class="tab-wrap w-100" scroll-x> <view class="tab-item mx-3" v-for="(item, index) in list" :key="index" :class="current_tab === index ? 'tab_active' : ''" @click="handleTab(index)" >{{item.name}}</view> </scroll-view> <view class="list-wrap"> <pull-list refresherEnabled > <view class="w-100 list-item"> <view class="w-100 item-inner"> <view class="w-100 mb-2"> <view class="flex j-between a-center"> <text class="order-item">time</text> <text class="order-status">status</text> </view> <view class="flex j-start a-center"> <image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image> <view class="goods-info flex-1 flex j-between flex-column"> <view class="title">title</view> <view class="desc">12</view> <view class="w-100 flex j-between a-center"> <text class="price">¥5555</text> <text class="desc">x1</text> </view> </view> </view> </view> <view class="w-100 mb-2"> <view class="flex j-between a-center"> <text class="order-item">time</text> <text class="order-status">status</text> </view> <view class="flex j-start a-center"> <image class="cover" src="/static/images/common/bg.png" mode="aspectFit"></image> <view class="goods-info flex-1 flex j-between flex-column"> <view class="title">title</view> <view class="desc">12</view> <view class="w-100 flex j-between a-center"> <text class="price">¥5555</text> <text class="desc">x1</text> </view> </view> </view> </view> </view> <view class="order-info"> <view class="w-100 flex j-end a-center mb-2"> <text class="mr-2">共<text class="primary">3</text>件</text> <text class="primary">¥333</text> </view> <view class="w-100 flex j-end a-center"> <view class="btn ml-2 cancle">取消订单</view> <view class="btn ml-2 pay">立即支付</view> </view> </view> </view> </pull-list> </view> </view> </template> <script> import pullList from '@/components/pull-list/index.vue' export default { data() { return { current_tab: 0, list: [ { name: '全部', data: [] }, { name: '待付款', data: [] }, { name: '待收货', data: [] }, { name: '已收货', data: [] }, { name: '退货退款', data: [] }, { name: '交易关闭', data: [] } ] } }, components: { pullList }, onLoad(options) { console.log(options) const { id } = options this.current_tab = Number(id) || 0 }, methods: { handleTab(idx) { if(idx === this.current_tab) return this.current_tab = idx } } } </script> <style lang="scss" scoped> .order-wrap { height: 100vh; .tab-wrap { height: 88rpx; white-space:nowrap; border-top: 1rpx solid $line; border-bottom: 1rpx solid $line; background-color: #fff; .tab-item { width: 198rpx; height: 88rpx; line-height: 88rpx; text-align: center; position: relative; display: inline-block; } .tab_active { color: $primary; font-weight: 600; &::after { display: inline-block; content: ""; position: absolute; left: 50%; bottom: 2rpx; transform: translateX(-50%); z-index: 5; width: 198rpx; height: 4rpx; background-color: $primary; } } } .list-wrap { width: 100%; height: calc(100vh - 98rpx); overflow: hidden; .list-item { margin-top: 20rpx; background-color: $white; .item-inner { @include borderBox(20rpx, 30rpx); border-bottom: 1rpx solid $line; .order-item { font-size: 24rpx; color: $desc; } .order-status { font-size: 24rpx; color: $primary; } .cover { flex: 0 0 160rpx; width: 160rpx; height: 160rpx; margin-right: 20rpx; } .goods-info { height: 160rpx; .title { @include text-ellipsis(2); } .desc { color: $desc; } .price { color: $primary; } } } .order-info { @include borderBox(20rpx, 30rpx); .primary { color: $primary; } .btn { @include borderBox(16rpx, 34rpx); border-radius: 8rpx; } .cancle { border: 1rpx solid $line; background-color: #fff; } .pay { color: #fff; background-color: $primary; } } } } } </style>