groupon-wx/pages/goods/leader_order_list/index.vue

<template>
	<view :style="colorStyle">
		<view class="my-order">
			<view class="header-group" style="padding-left: 20rpx;" >
				<view class="tabs">
					<u-tabs  :is-scroll="true" :list="navigationList" @change="statusClick()" lineColor="#B22338"
						:inactiveStyle="{ color: '#999999' }" :activeStyle="{ color: '#B22338', fontWeight: 'bold' }" 
						keyName="title"></u-tabs>
				</view>
			</view>

				<view class="list" v-for="(item, index) in orderList" :key="index">
					<view class="myclient_list">
						<view class="myclient_list_name">
							<view class="nl">
								{{item.mainTitle}}
							</view>
							<view class="status">
								{{item.grouponBizStateDesc}}
							</view>
						</view>
						<view class="myclient_list_content">
				
							<view class="phone">
								<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/日期@2x.png" />
								<text>
									团购日期:{{item.grouponStartTimeStr}} 至 {{item.grouponEndTimeStr}}
								</text>
							</view>
							<view class="time">
							<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
								<text>
									提货时间:{{item.takeStartTimeStr}} 至 {{item.takeEndTimeStr}}
								</text>
							</view>
						</view>
					</view>
					<view class="op-area">
						<button class="action-btn" @click="goOrderDetails(item.id, 1)">
							网点订单
						</button>
						<button class="action-btn" @click="goOrderDetails(item.id, 2)">
							全部订单
						</button>
					</view>
				
				</view>
			

			<view class="loadingicon acea-row row-center-wrapper" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" :title="$t(`暂无订单`)"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
		<payment :payMode="payMode" :pay_close="pay_close" @onChangeFun="onChangeFun" :order_id="pay_order_id"
			:totalPrice="totalPrice"></payment>
	</view>
</template>

<script>
import {
	getUserOrderPage,
	postUserOrderCancel,
	postUserOrderRefund
} from '@/api/home.js';
import {
	getCommanderOrder,
} from '@/api/order.js';
import {
	getUserInfo
} from '@/api/user.js';
import {
	openOrderSubscribe
} from '@/utils/SubscribeMessage.js';
import home from '@/components/home';
import payment from '@/components/payment';
import {
	toLogin
} from '@/libs/login.js';
import {
	mapGetters
} from 'vuex';
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
export default {
	components: {
		payment,
		home,
		emptyPage,
		// #ifdef MP
		authorize
		// #endif
	},
	mixins: [colors],
	data () {
		return {
			navigationList: [{
				title: '全部',
				id: 0,
				grouponState: 0,
			}
			, 
			{
				title: '待收货',
				id: 1,
				grouponState: 1,
			},
			{
				title: '待提货',
				id: 2,
				grouponState: 2,
			},
			{
				title: '已完成',
				id: 3,
				grouponState: 3,
			},
			{
				title: '售后',
				id: 4,
				grouponState: 4,
			},
		],
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: this.$t(`加载更多`), //提示语
			orderList: [], //订单数组
			grouponState: 0, //订单状态
			page: 1,
			limit: 5,
		};
	},
	computed: mapGetters(['isLogin']),
	onShow () {
		if (this.isLogin) {
			this.page = 1;
			this.orderList = []
			this.loadend = false;
			// this.onLoadFun();
			this.getCommanderOrderList()
		} else {
			toLogin();
		}
	},
	methods: {
		/**
		 * 事件回调
		 *
		 */
		onChangeFun: function (e) {
			let opt = e;
			let action = opt.action || null;
			let value = opt.value != undefined ? opt.value : null;
			action && this[action] && this[action](value);
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.status) this.orderStatus = options.status;
		},
	

		/**
		 * 去订单详情
		 */
		goOrderDetails: function (grouponId, queryType) {
			uni.navigateTo({
				url: '/pages/groupbuying/leader_order_details/index?grouponId=' + grouponId + '&queryType=' + queryType
			});
			// let that = this;
			// if (!order_id)
			// 	return that.$util.Tips({
			// 		title: that.$t(`缺少订单号无法查看订单详情`)
			// 	});
			// uni.showLoading({
			// 	title: that.$t(`正在加载中`)
			// });
			// openOrderSubscribe()
			// 	.then(() => {
			// 		uni.hideLoading();
			// 		uni.navigateTo({
			// 			url: '/pages/goods/order_details/index?order_id=' + order_id
			// 			// +'&order='+JSON.stringify(order)
			// 			// +'&goods='+encodeURIComponent(JSON.stringify(order.orderGoods))
			// 		})
			// 	})
			// 	.catch(err => {
			// 		uni.hideLoading();
			// 	});

		},
		/**
		 * 切换类型
		 */
		statusClick: function (status) {
			console.log("status ", status)
			if (status.grouponState == this.grouponState) return;
			this.grouponState = status.grouponState;
			this.loadend = false;
			this.page = 1;
			this.$set(this, 'orderList', []);
			this.getCommanderOrderList();
		},
		getCommanderOrderList() {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = that.$t(`加载更多`);
			getCommanderOrder({
				grouponState: that.grouponState,
				current: that.page,
				size: that.limit,
			}).then(res => {
				let list = res.data.records || [];
				let loadend = list.length < that.limit;
				that.orderList = that.$util.SplitArray(list, that.orderList);
				that.$set(that, 'orderList', that.orderList);
				that.loadend = loadend;
				that.loading = false;
				that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
				that.page = that.page + 1;
			}).catch(err => {
				that.loading = false;
				that.loadTitle = that.$t(`加载更多`);
			});
		},
		/**
		 * 获取订单列表
		 */
		getOrderList: function () {
			// let that = this;
			// if (that.loadend) return;
			// if (that.loading) return;
			// that.loading = true;
			// that.loadTitle = that.$t(`加载更多`);
			// getUserOrderPage({
			// 	userId: this.$store.state.app.uid,
			// 	current: that.page,
			// 	size: that.limit,
			// 	payFlag: this.orderStatus
			// })
			// 	.then(res => {
			// 		let list = res.data || [];
			// 		let loadend = list.length < that.limit;
			// 		that.orderList = that.$util.SplitArray(list, that.orderList);
			// 		that.$set(that, 'orderList', that.orderList);
			// 		that.loadend = loadend;
			// 		that.loading = false;
			// 		that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
			// 		that.page = that.page + 1;
			// 	})
			// 	.catch(err => {
			// 		that.loading = false;
			// 		that.loadTitle = that.$t(`加载更多`);
			// 	});
		},

	},
	onReachBottom: function () {
		this.getCommanderOrder();
	}
};
</script>

<style scoped lang="scss">
.my-order .header {
	height: 220rpx;
	padding: 0 30rpx;
}

.my-order .header .picTxt {
	height: 160rpx;
}

.my-order .header .picTxt .text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 26rpx;
	font-family: 'Guildford Pro';
}

.my-order .header .picTxt .text .name {
	font-size: 34rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
	width: 122rpx;
	height: 109rpx;
}

.my-order .header .picTxt .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .nav {
	background-color: #F9F9F9;
	width: 100%;
	// height: 140rpx;
}

.my-order .nav .item {
	text-align: center;
	font-size: 26rpx;
	color: #282828;
	padding: 27rpx 0;
	border-bottom: 5rpx solid transparent;
}

.my-order .nav .item.on {
	/* #ifdef H5 || MP */
	font-weight: bold;
	/* #endif */
	/* #ifdef APP-PLUS */
	color: #000;
	/* #endif */
	border-color: var(--view-theme);
}

.my-order .nav .item .num {
	margin-top: 18rpx;
}

.list {
	width: 100%;
	background: white;
	margin: 14rpx auto 0 auto;
}

.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
}

.noCart .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .list .item .item-info .text .money .return {
	// color: var(--view-priceColor);
	margin-top: 10rpx;
	font-size: 24rpx;
}


.myclient_list {
	margin-top: 30rpx;
	padding: 30rpx;
	background: #FFFFFF;

	.myclient_list_name {
		margin-bottom: 15rpx;
		min-height: 44rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		line-height: 44rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.nv {
			flex-grow: 1;
		}

		.status {
			text-align: right;
			margin-left: 30rpx;
			color: #FEA800;
		}
	}

	.myclient_list_content {

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}

		.phone {
			margin-bottom: 15rpx;
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

		.time {
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}
	}
}

.all-products-body {
	background: white;

	.all-products-item {
		display: flex;
		margin-bottom: 20rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			margin-right: 20rpx;
			border: 2rpx solid #FFFFFF;
		}

		.all-products-item-content {
			flex-grow: 1;
			display: flex;
			flex-direction: column;


			.all-products-item-content-t {
				flex: 1;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				line-height: 40rpx;
			}

			.all-products-item-content-b {
				flex: 1;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;

				.red {
					display: block;
					font-size: 28rpx;
					font-weight: 500;
					color: #B22338 !important;
					margin-right: 10rpx;
				}

				.line-thr {
					display: block;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					text-decoration: line-through;
				}

				.count {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					margin-right: 30rpx;
				}
			}
		}
	}
}


.a-t {
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	height: 44rpx;
	margin-bottom: 20rpx;

}

.a-m {
	padding: 0 30rpx;

	.am1 {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.am1-1 {
			height: 40rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #111111;
			line-height: 40rpx;

		}

		.am1-2 {
			height: 36rpx;
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;
			line-height: 36rpx;

			image {
				margin-left: 30rpx;
				vertical-align: middle;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}

	.am2 {
		margin-bottom: 20rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 34rpx;
	}


}

.a-b {
	padding: 0 30rpx;
	width: 100%;
	background: #FFF7F8;
	border: 1px solid dashed #333333;
	height: 60rpx;
	line-height: 60rpx;
	display: flex;
	justify-content: space-between;

	.a-b1 {
		font-size: 20rpx;
		font-weight: 400;
		color: #666666;

		.red {
			font-size: 20rpx;
			font-weight: 500;
			color: #B22338;
		}
	}

	.a-b2 {
		image {
			vertical-align: middle;
			margin-right: 30rpx;
			margin-left: 30rpx;
			height: 34rpx;
			width: 34rpx;
		}
	}
}

.self-pickup-point {
	background: #FFF7F8;
	padding-top: 20rpx;
	margin: 0 30rpx;
}

.op-area {
	height: 120rpx;
	display: flex;
	justify-content: flex-end;
	line-height: 120rpx;
	padding: 20rpx 0;
	text-align: right;

	.action-btn {
		min-width: 200rpx;
		background: #FFF7F8;
		border-radius: 32rpx;
		border: 2rpx solid #B22338;
		margin-right: 30rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #B22338;
		line-height: 64rpx;
	}

	.info-btn {
		width: 200rpx;
		background: #F5F5F5;
		border-radius: 32rpx;
		margin-right: 30rpx;
		height: 64rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		line-height: 64rpx;
	}
	
	.text_13 {
	  overflow-wrap: break-word;
	  color: rgba(178, 35, 56, 1);
	  font-size: 12px;
	  font-weight: NaN;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 18px;
	  margin-right: 14px;
	}

}
</style>