WenWuGuanJia/answer_pages/gift/order.vue

<template>
	<view class="wrap">
		<u-navbar title="礼品订单" :placeholder="true" bgColor="rgba(255,255,255,0.3)" leftText="返回" :autoBack="true" titleStyle="font-weight:bold;color:#7a5831"></u-navbar>
		<view class="filter-box">
			<view class="b-item" v-for="(item, index) in groupList" :key="index" :class="[{ 'f-active': index == groupIndex }]" @click="onGroupSelect(index)">
				<view class="s-tit">{{ item.name }}</view>
			</view>
		</view>
		<view class="gift-list" v-if="state.items.length > 0">
			<view class="b-item" v-for="(item, index) in state.items" :key="index">
				<view class="b-head">
					<view class="s-order">订单编号：{{ item.number }}</view>
					<view class="s-status" :class="[stateStyle(item.status)]">{{ item.status_text }}</view>
				</view>
				<view class="b-gift" @click="onRecordDetail(item.id)">
					<view class="b-left">
						<image :src="item.gift_data.cover_url" mode="aspectFill"></image>
					</view>
					<view class="b-main">
						<view class="b-title">{{ item.gift_data.name }}</view>
						<view class="b-spec" v-if="item.gift_data.spec_data">
							<view class="s-tit">规格:</view>
							<view class="s-value">{{ item.gift_data.spec_data.name }}</view>
						</view>
						<view class="b-fund">
							<view class="s-worth" v-if="item.gift_data.order_worth">价值 {{ item.gift_data.order_worth }}元</view>
						</view>
					</view>
				</view>
				<view class="b-foot">
					<view class="s-time">兑换时间：{{ timeFormat(item.created_at) }}</view>
				</view>
				<view class="b-action">
					<view class="b-btn" @click="onRecordDetail(item.id)">订单详情</view>
				</view>
			</view>
		</view>
		<!-- 加载中 -->
		<load-more :loadingType="loadingType" :loadingText="loadingText" color="#888888"></load-more>
		<view class="navbar">
			<view class="b-action">
				<view class="s-home" @click="onHome()">回到奖品首页</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOrderList } from '@/service/api/gift.js';
import Util from '../../common/util';
// import mixinsCommon from '@/mixins/common.js';
// import mixinsAuth from '../../mixins/auth.js';
// import loadMore from '@/components/load-more/load-more.vue';
export default {
	// mixins: [mixinsCommon],
	data() {
		return {
			hasLoad: false,
			refreshTime: 0,
			groupIndex: 0,
			groupList: [
				{
					name: '全部',
					value: 0
				},
				{
					name: '待发货',
					value: 1
				},
				{
					name: '已发货',
					value: 2
				},
				{
					name: '已取消',
					value: 3
				}
			],
			state: {
				items: []
			},
			loadingType: 1,
			loadingText: ''
		};
	},
	onLoad(options) {
		this.loadOrderList(true);
	},
	onShow() {
		if (this.hasLoad) {
			const timestamp = Util.getTimestamp();
			if (timestamp - this.refreshTime >= 10) {
				this.refreshTime = timestamp;
				this.loadOrderList(true);
			}
		}
	},
	onReachBottom() {
		if (this.loadingType !== 1 && this.loadingType !== 2) {
			this.loadOrderList();
		}
	},
	computed: {
		stateStyle() {
			return (status) => {
				return {
					'f-wait': status === 1,
					'f-done': status === 2,
					'f-cancel': status === 3
				};
			};
		}
	},
	methods: {
		loadOrderList(refresh) {
			console.log('loadOrderList', refresh);
			if (refresh) {
				this.page = 1;
				this.state.items = [];
			} else {
				this.page++;
			}
			this.loadingType = 1;
			this.loadingText = '';
			getOrderList(this.groupList[this.groupIndex].value, this.page, 10).then(([err, res]) => {
				console.log('getList', err, res);
				this.loadingType = -1;
				this.hasLoad = true;
				if (!err) {
					if (res.items.length > 0) {
						this.state.items = [...this.state.items, ...res.items];
					} else {
						this.loadingType = 2;
						if (this.page == 1) {
							this.loadingText = '暂无订单';
						}
						this.page--; // 重置分页
					}
				} else {
					this.loadingType = 3;
				}
			});
		},
		onGroupSelect(index) {
			this.groupIndex = index;
			this.loadOrderList(true);
		},
		onRecordDetail(recordId) {
			uni.navigateTo({
				url: '/answer_pages/gift/order_detail?id=' + recordId
			});
		},
		onHome() {
			uni.navigateTo({
				url: '/answer_pages/gift/index'
			});
		}
	}
};
</script>

<style lang="scss">
// page {
// 	padding-bottom: env(safe-area-inset-bottom);
// 	background: $pq-bg-color;
// }

.wrap {
	padding-bottom: 50upx;
}

.filter-box {
	padding: 30upx 50upx 0 50upx;
	margin-bottom: 30upx;
	background: #fff;
	// border-bottom: 1upx solid #eee;
	display: flex;
	align-items: center;

	.b-item {
		margin: 0 40upx;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		padding-bottom: 6upx;

		&.f-active {
			padding-bottom: 0;
			border-bottom: 6upx solid #da5650;

			.s-tit {
				color: #da5650;
			}
		}

		.s-tit {
			color: #333;
		}
	}
}

.gift-list {
	.b-item {
		background: #fff;
		margin-bottom: 30upx;

		&:last-child {
			margin-bottom: 0;
		}

		.b-head {
			padding: 20upx 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #eee;

			.s-order {
				color: #666;
				font-size: 26upx;
			}

			.s-status {
				font-size: 28upx;

				&.f-wait {
					color: #ffc300;
				}

				&.f-done {
					color: #da5650;
				}

				&.f-cancel {
					color: #666;
				}
			}
		}

		.b-gift {
			padding: 30upx;
			display: flex;
			border-bottom: 1upx solid #eee;

			.b-left {
				width: 160upx;
				height: 160upx;

				image {
					width: 160upx;
					height: 160upx;
				}
			}

			.b-main {
				margin-left: 30upx;
				flex: 1;
				display: flex;
				flex-direction: column;

				.b-title {
					font-size: 28upx;
					color: #333;
				}

				.b-spec {
					margin-top: 20upx;
					display: flex;
					align-items: center;

					.s-tit {
						font-size: 24upx;
						color: #999;
					}

					.s-value {
						margin-left: 10upx;
						font-size: 24upx;
						color: #666;
					}
				}

				.b-fund {
					margin-top: 20upx;
					display: flex;
					align-items: baseline;

					.s-worth {
						font-size: 24upx;
						color: #999;
					}
				}
			}
		}

		.b-foot {
			padding: 20upx 30upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.s-time {
				color: #999;
				font-size: 26upx;
			}
		}

		.b-action {
			padding: 20upx 30upx 40upx 30upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.b-btn {
				padding: 0 20upx;
				border: 1upx solid #bbb;
				color: #666;
				font-size: 26upx;
				line-height: 60upx;
				height: 60upx;
				border-radius: 10upx;
			}
		}
	}
}

.navbar {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100upx;
	background: #fff;
	// border-top: 1upx solid #f6f6f6;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.b-action {
		flex: 1;
		.s-home {
			background: #da5650;
			height: 100upx;
			padding: 0 60upx;
			line-height: 100upx;
			font-size: 30upx;
			color: #fff;
			letter-spacing: 4upx;
			text-align: center;
		}
	}
}
</style>