IHG/pages/my/myorders/orders.vue

<template>
	<view class="orders">
		<view class="nav">
			<!-- 搜索栏 -->
			<view class="navbox">
				<view class="search">
					<u-input placeholderStyle='color:#999' placeholder="搜索" border='none' v-model='search' @input="searchText">
						<template slot="suffix" style='margin-right:40rpx;'>
							<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
								height="32rpx"></u-image>
						</template>
					</u-input>
				</view>
			</view>
			<!-- 分段器 -->
			<view class="segmented">
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in items" :key="index">
						<view :class="{'active':isActive == index}" @click="checked(index)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 占位 -->
		<view style="width: 100%;height: 220rpx;"></view>
		

		<view class="msg-null" v-if="orderList.length == 0 ">
			<image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
			<view class="msg-null-text">
				<text>暂无数据</text>
			</view>
		</view>

		<view style="background-color: #f9f9f9;" v-if="orderList.length > 0 ">
			<view class="card" v-for="(item,index) in orderList" :key="index" @click="goOrderDetail(item.id,item.status)">
				<view class="toptitle">
					<view>订单号：{{item.order_no}}</view>

					<view v-if="item.status == 1 && item.is_virtual == 0">待兑换</view>
					<view v-if="item.status == 2 && item.is_virtual == 0 && item.express_type == 1">待发货</view>
					<view v-if="item.status == 2 && item.is_virtual == 0 && item.express_type == 2">待核销</view>
					<view v-if="item.status == 3 && item.is_virtual == 0 && item.express_type == 1">待收货</view>
					<view v-if="item.status == 3 && item.is_virtual == 1">待核销</view>
					<view v-if="item.status == 3 && item.is_virtual == 0 && item.express_type == 2">待核销</view>
					<view v-if="item.status == 4 && item.is_virtual == 0 && item.express_type == 1">已完成</view>
					<view v-if="item.status == 4 && item.is_virtual == 1">已核销</view>
					<view v-if="item.status == 4 && item.is_virtual == 0 && item.express_type == 2">已核销</view>
				</view>
				<view class="shopCard">
					<image v-if="item.product_type != 3 " :src="JSON.parse(item.img_urls)[0]"></image>
					<image v-if="item.product_type == 3 " :src="item.img_urls"></image>

					<view style="margin-left: 24rpx;">
						<text class="name">{{item.product_name}}</text>
						<text class="tag" v-if="item.source_type == 3">{{item.attr_text}}  {{item.integral}}积分</text>						
					</view>
				</view>
				<view class="points">
					<text class="totalName" style="margin-right: 50rpx;">共{{item.product_num}}件</text>
					<text class="totalName" v-if="item.source_type == 3">共计:</text>
					<text class="totalContent" v-if="item.source_type == 3">{{item.integral}}积分</text>
				</view>
				<view class="btn">
					<view class="btnitem" @click.stop="openVFcode(item.check_qrcode)"
						v-if="item.status == 3 && item.is_virtual == 1">
						<text>核销码</text>
					</view>
					<view class="btnitem" @click.stop="openVFcode(item.check_qrcode)"
						v-if="item.status == 3 && item.is_virtual == 0&&item.express_type == 2">
						<text>核销码</text>
					</view>
					<view class="btnitem" @click.stop="openVFcode(item.check_qrcode)"
						v-if="item.status ==2 && item.is_virtual == 0&&item.express_type == 2">
						<text>核销码</text>
					</view>
					<!-- <view class="btnitem" v-if="item.status == 1">
						<text>取消</text>
					</view> -->
					<view class="btnitem" v-if="item.status == 1" @click.stop="exchangePrize(item.draw_record_id,item.is_virtual)">
						<text>兑换</text>
					</view>
					<view @click.stop="takeOver(item.id)" class="btnitem"
						v-if="item.status == 3 && item.is_virtual == 0 && item.express_type == 1">
						<text>确认收货</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 已经到底啦 -->
		<view style="margin-top: 88rpx;padding-bottom: 60rpx;" v-if="orderList.length > 0 ">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
		</view>

		<!-- 弹出层/核销码 -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="title"><text>核销码</text></view>
				<view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
				<view class="img">
					<image :src="check_qrcode"></image>
				</view>
				<view class="btn">
					<view class="cancel" @click="closeVFcode"><text>取消</text></view>
					<view class="download" @click="handleDownImg"><text>保存图片</text></view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import util from './../../../utils/util.js'
	export default {
		data() {
			return {
				//兑换是否过期
				isEnd:'',
				//核销码
				check_qrcode: '', //二维码内容（扫码识别后需要访问的网址）
				// 搜索
				search: '',
				// 分段器标题
				items: ['全部', '待兑换', '待发货', '待收货', '已完成'],
				isActive: 0,
				
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				// 订单列表
				orderList: [],
				// 分页
				page: 1,
				pagesize: 15,
				totalElements: '',
				allListItem: '',
				// 组件uni-load-more
				status: 'noMore',
			}
		},
		onLoad(o) {
			if (o.isActive) {
				this.isActive = o.isActive
				this.getMyOrder(o.isActive)
			} else {
				this.getMyOrder()
			}
			
			uni.$on('refreshPrizeData',()=>{
				this.isActive = 3
				this.getMyOrder(this.isActive )
			})
		},
		
		onUnload() {
			uni.$emit('refreshOrderNum');
		},
		
		// 触底加载
		onReachBottom() {
			// 触底的时候请求数据，即为上拉加载更多
			var allTotal = this.page * this.pagesize
			console.log(allTotal,'----allTotal');
			//this.page为加载次数，this.pagesize为每一次加载的数据条数
			if (allTotal < this.totalElements) {
				//this.totalElements为请求数据的总条数。只要现有条数小于总条数就就执行一下代码
				this.allListItem = false;
				this.page++;
				//加载次数递加
				this.status = "loading"
				this.$api.orders.getOrderList({ //请求更多数据列表
					page: this.page,
					status:this.isActive,
					keyword:this.search
				}).then(res => {
					let ret = [...this.orderList, ...res.data.data]
					this.orderList = ret
					console.log(ret)
				})
			} else {
				this.allListItem = true;
				console.log('已加载全部数据')
				this.status = "noMore"
			}
		},
		
		methods: {
			
			//确定收货
			takeOver(id) {
				uni.showLoading({
					title: '加载中'
				})
				this.$api.orders.confirmReceipt({
					order_id: id
				}).then(res => {
					if (res.code === 0) {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: '收货成功'
						})
						//重新拉数据
						this.getMyOrder(this.isActive)
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					}

				})
			},
			
			//判断兑换是否过期
			cancelTime(i, j) {
				let nowtime = new Date() //获取当前时间
				let endtime = new Date(j); //活动结束时间
				let lefttime = endtime.getTime() - nowtime.getTime() //距离结束时间的毫秒数
				if (lefttime < 0) {
					//兑换过期
					this.isEnd = true
				} 
			},

			// 获取订单列表
			getMyOrder(type) {
				this.$api.orders.getOrderList({
					page: 0,
					status: type || '',
					keyword: this.search
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.data
						this.totalElements = res.data.total
						this.pagesize = res.data.per_page		
					}
				})
			},
			//菜单index切换
			checked(index) {
				this.page = 1
				this.isActive = index
				this.getMyOrder(index)
			},
			// 搜索防抖
			searchText: util.debounce(function() {
				this.goSearch()
			}, 1000),
			// 搜索
			goSearch() {
				this.$api.orders.getOrderList({
					status: this.isActive,
					page: 1,
					keyword: this.search
				}).then(res => {
					console.log(res, "搜索活动项目列表")
					if (res.code == 0) {
						this.orderList = res.data.data
						this.totalElements = res.data.total
						this.pagesize = res.data.per_page
					}
				})
			},
			// 跳转订单详情
			goOrderDetail(id,status) {
				if(status == 1){
					console.log('待兑换');
				}else{
					uni.navigateTo({
						url: '/pages/my/myorders/orderDetail?id=' + id
					})
				}
				
			},
			
			//跳转奖品兑换
			exchangePrize(id,is_virtual){
				let isPhy = ''
				if(is_virtual == 0){
					isPhy = 1
					uni.navigateTo({
						url:`/pages/my/prize/exchangePrize?id=${id}&isPhy=${isPhy}`
					})
				}else{
					isPhy = 2
					uni.navigateTo({
						url:`/pages/my/prize/exchangePrize?id=${id}&isPhy=${isPhy}`
					})
				}
				
			},
			
			// // 跳转积分兑换
			// goIntegralExchange() {
			// 	uni.navigateTo({
			// 		url: '/pages/my/integral/integralOrder'
			// 	})
			// },
			// 打开弹出层
			openVFcode(check_qrcode) {
				console.log(check_qrcode, '----->check_qrcode');
				this.check_qrcode = check_qrcode
				this.$refs.popup.open()

			},
			// 关闭弹出层
			closeVFcode() {
				this.$refs.popup.close()
				this.getMyOrder(this.isActive )
				
				
			},
			// 保存图片
			handleDownImg() {
				uni.showLoading({
					title: "保存中..."
				})
				const that = this;
				uni.downloadFile({
					url: that.check_qrcode,
					success: res => {
						if (res.statusCode === 200) {
							uni.hideLoading()
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '已保存到相册',
										icon: 'success',
										duration: 2000
									})
									that.$refs.popup.close()
								},
								fail: function() {
									uni.showToast({
										title: '保存失败，请稍后重试',
										icon: 'none',
										duration: 2000
									})
								}
							});
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '下载失败',
								icon: 'none',
								duration: 2000
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	// flex布局居中对齐
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.orders {
		height: 100%;
		background: $pageColor;
	}

	.home-bottom {
		padding-top: 80rpx;
		background-color: #f9f9f9;
	}


	.msg-null {
		padding-top: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.msg-null-text {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333;
		}
	}



	::v-deep .segmented-control__text {
		font-size: 32rpx !important;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 500 !important;
		color: #666666 !important;

	}

	::v-deep .segmented-control__item--text {
		font-size: 32rpx !important;
		font-family: PingFang-SC-Heavy, PingFang-SC;
		font-weight: 800 !important;
		padding: 10rpx 0 !important;
		color: #D9A94D !important;
		border-radius: 4rpx !important;

	}



	.nav {
		position: fixed;
		top: 0;
		z-index: 999;
		height: 220rpx;
		width: 750rpx;
		background: $bgColor;

		.navbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;

			// 搜索
			.search {
				height: 124rpx;
				width: 690px;
				background-color: $bgColor;
				@include flexlayout;

				::v-deep .u-input {
					width: 690rpx !important;
					height: 68rpx !important;
					background: #F1F1F1;
					border-radius: 74rpx;
				}

				::v-deep .u-input__content__field-wrapper {
					padding-left: 36rpx;
				}

				::v-deep .u-input__content__field-wrapper__field {
					color: #999999 !important;
					font-size: 28rpx !important;
				}
			}
		}

		.segmented {
			margin-top: 18rpx;
			width: 750rpx;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			//菜单切换
			.tab_nav {
				width: 690rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang-SC-Heavy, PingFang-SC;

			}

			.tab_nav .navTitle {
				width: 128rpx;
				flex: none;
				height: 28rpx;
				font-size: 32rpx;
				color: #666;
				display: flex;
				align-items: center;
				justify-content: space-around;
				position: relative;
			}

			.active {
				color: #D9A94D;
				font-weight: bold;

				&::after {
					display: inline-block;
					content: '';
					width: 48rpx;
					height: 12rpx;
					background: linear-gradient(90deg, #F3D69F 0%, #D9A94D 100%);
					border-radius: 6px;
					position: absolute;
					bottom: -30rpx;
					left: 40rpx;
				}
			}
		}

	}

	.card {
		margin-top: 24rpx;
		background: $bgColor;
		border-radius: 16rpx;
		padding: 32rpx 28rpx 24rpx 28rpx;
		box-sizing: border-box;

		.toptitle {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #080F18;
		}

		.shopCard {
			margin-top: 28rpx;
			width: 694rpx;
			height: 164rpx;
			background: #F4F5F6;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			image {
				width: 132rpx;
				height: 132rpx;
				margin-left: 16rpx;
				display: inline-block;
				border-radius: 12rpx;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #080F18;
				display: block;
			}

			.tag {
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #666666;
			}
		}

		.points {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 30rpx;

			.totalName {
				font-size: 22rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #080F18;
				margin-right: 10rpx;
			}

			.totalContent {
				font-size: 30rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #080F18;
			}
		}

		.btn {
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-end;

			.btnitem {
				margin-left: 16rpx;
				width: 170rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2rpx solid #D0D0D0;

				@include flexlayout() text {
					font-size: 26rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #080F18;
				}
			}
		}

	}

	.pop {
		width: 640rpx;
		height: 764rpx;
		background: $bgColor;
		border-radius: 20rpx;
		padding-top: 64rpx;
		box-sizing: border-box;

		.title {
			@include flexlayout();
			margin-bottom: 24rpx;

			text {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.img {
			margin-top: 10rpx;
			margin-left: 48rpx;
			width: 544rpx;
			height: 468rpx;
			background: $bgColor;
			border-radius: 2rpx;
			@include flexlayout();

			image {
				width: 392rpx;
				height: 390rpx;
			}
		}

		.btn {
			margin-top: 40rpx;
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;

			.cancel {
				@include flexlayout();
				width: 50%;
				height: 100%;
				border-top: #E5E5E5 solid 1rpx;
				border-right: #E5E5E5 solid 1rpx;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.download {
				border-top: #E5E5E5 solid 1rpx;
				// border-left:#E5E5E5 solid 0.3rpx;
				@include flexlayout();
				height: 100%;
				width: 50%;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF7119;
				}
			}
		}
	}
</style>