family-education/education_uni/subpkg/my/share/my_share_result_order.vue

<template>
	<view>
		<view style="padding: 0px 30px;margin-top: 5px;">
		<!-- 顶部对方已读和未读按钮 -->
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#6EB312"></uni-segmented-control>
		<!-- 发出的邀请列表 -->
		</view>
		<view v-show="current === 0">
			<view v-for="(Info,index) in OrderWithdraw" :key="index">
				<view class="invitationWrapper" @click="gotoDetail(Info.orderId)">
					<view class="invitationTitle">
						<view>
							<text>订单号</text>
							<text class="invitatinDetail">{{Info.orderId}}</text>
						</view>
					</view>

					<view class="invitationDateAndStatus">
						<text>日期</text>
						<text class="invitatinDetail">{{Info.datetime}}</text>
						<view class="invitationTitle">
							<text>状态</text>
							<text class="invitatinStatus" >{{Info.recoStatus}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current === 1">
			<view v-for="(Info,index) in OrderNotWithdraw" :key="index">
				<view class="invitationWrapper" @click="gotoDetail(Info.orderId)">
					<view class="invitationTitle">
						<view>
							<text>订单号</text>
							<text class="invitatinDetail">{{Info.orderId}}</text>
						</view>
					</view>

					<view class="invitationDateAndStatus">
						<text>日期</text>
						<text class="invitatinDetail">{{Info.datetime}}</text>
						<view class="invitationTitle">
							<text>状态</text>
							<text class="invitatinStatus" >{{Info.recoStatus}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				current: 1,
				items: ['已转出', '未转出'],
				OrderWithdraw: [],
				OrderNotWithdraw: []

			};
		},
		created() {
			// this.readYes()
			this.NotWithdraw()
		},
		methods: {
			async Withdraw() {
				const {
					data: result
				} = await uni.$http.get('/payment/order-info/list/recommendUidWithdraw')
				this.OrderWithdraw = result.data.list
				//console.log(this.OrderNotWithdraw)

			},
			async NotWithdraw() {
				const {
					data: result
				} = await uni.$http.get('/payment/order-info/list/recommendUidNotWithdraw')
				this.OrderNotWithdraw = result.data.list
				//console.log(this.OrderNotWithdraw)

			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/subpkg/my/share/my_share_result_order_detail?orderId=' + id
				})
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex
				}
				if (this.current === 1) {
					this.NotWithdraw()
				} 
				if (this.current === 0) {
					this.Withdraw()
				}
			}

		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
	page {
		padding: 20rpx;
		height: 100%;
		//background-color: #E2F0D9;
	}

	/* 顶部对方已读和未读按钮 */
	// .read {
	// 	display: flex;
	// 	justify-content: space-around;
	// }

	// .readDetail {
	// 	padding: 10rpx 20rpx;
	// 	border-radius: 30rpx;
	// 	background-color: #FFF2CC;
	// 	font-weight: bold;
	// }

	/* 列表样式 */
	.invitationWrapper {
		width: 93%;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		margin-left: 10rpx;
		font-size: 28rpx;
	}

	/* 邀请号和对方身份、邀请日期和对方状态 */
	.invitationTitle,
	.invitationDateAndStatus {
		display: flex;
		//align-items: center;
		justify-content: space-between;

		//position: relative;
	}

	/* 具体内容的样式 */
	.invitatinDetail,
	.invitatinStatus {
		margin-left: 20rpx;
		font-weight: bold;
	}

	.invitatinDetailOther {
		margin-left: 20rpx;
		font-weight: bold;
		font-size: 26rpx;
	}

	.invitatinStatus {
		color: red;
	}

	/* 邀请内容、邀请日期和对方状态 */
	.invitationContent {
		margin-top: 10rpx;
	}
</style>