<template> <view class="content"> <view class="header"> <!-- 搜索--> <!-- <view class="searchBar"> <icon class="searchIcon" type="search" size="14"></icon> <input class="searchIpt" placeholder="搜索订单关键字..." confirm-type="search"/> </view> --> <view class="screenBar"> <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > <view class="screenItem" v-bind:class="{ active: current === item.current }" >{{ item.text }}</view> </view> </view> </view> <view class="orderList"> <view v-for="(order) in orderList" :key="order.pay_id" > <OrderCard :order="order" :current="current" ></OrderCard> </view> </view> <view class="footer">没有更多订单了,去商城看看吧~</view> </view> </template> <script> import OrderCard from "./components/OrderCard.vue"; import store from "@/store"; export default { components: { OrderCard: OrderCard }, data() { return { // 顶部筛选项 screenItems: [ { current: "10", text: "全部" }, { current: "0", text: "待付款" }, { current: "1", text: "待收货" }, { current: "2", text: "待评价" } // {current:"3",text:'已评价'}, // {current:"4",text:'退款'}, ], // 当前所在item 默认10-->全部 current: "10" }; }, onLoad: function(option) { // 获取订单列表 store.dispatch("myOrder/getList", { way: "" }); // 从user过来传的status,给current,以显示对应item this.current = option.status; }, computed: { orderList() { // console.log('orderList', this.$store.state.myOrder.orderList); return this.$store.state.myOrder.orderList; } }, methods: { // tab点击事件 onClickItem(e) { console.log("onClickItem", e); if (this.current !== e) { this.current = e; } } } }; </script> <style lang="scss"> .content { display: flex; flex-direction: column; align-items: center; background-color: #f7f6f6; min-height: 100vh; .header { background-color: #ffffff; width: 100%; // height: 232rpx; padding: 20rpx 40rpx 16rpx 40rpx; box-sizing: border-box; position: fixed; top: 0; left: 0; // .searchBar { // width: 670rpx; // display: flex; // justify-content: center; // align-items: center; // box-sizing: border-box; // padding: 0rpx 16rpx; // border: 1px solid #ff6b4a; // border-radius: 8rpx; // background-color: #ffffff; // } .screenBar { width: 670rpx; // height: 110rpx; height: 70rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #333333; font-size: 32rpx; } .screenItem { height: 50rpx; font-size: 32rpx; color: #333333; display: flex; justify-content: center; align-items: center; transition: all 0.2s; } .active { // font-size: 34rpx; color: #ec5d3b; } .searchIpt { height: 68rpx; width: 670rpx; padding: 16rpx; font-size: 28rpx; box-sizing: border-box; } } .orderList { // margin-top: 232rpx; margin-top: 132rpx; } .footer { font-size: 14px; color: #b8b8b8; margin: 40rpx 0; } } </style>