IHG/pages/my/myorders/orders.vue

<template>
	<view class="orders">
		<view class="nav">
			<!-- 搜索栏 -->
			<view class="navbox">
				<view class="search">
					<u-input 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 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)">
				<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.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">
						<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 class="home-bottom" 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 {
				//核销码
				check_qrcode: '', //二维码内容（扫码识别后需要访问的网址）
				// 搜索
				search: '',
				// 分段器标题
				items: ['全部', '待兑换', '待发货', '待收货', '已完成'],
				isActive: 0,
				// 组件uni-load-more
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
				// 订单列表
				orderList: [],
			}
		},
		onLoad(o) {
			if (o.isActive) {
				this.isActive = o.isActive
				this.getMyOrder(o.isActive)
			} else {
				this.getMyOrder()
			}
		},
		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
						})
					}

				})
			},


			// 获取订单列表
			getMyOrder(type) {
				this.$api.orders.getOrderList({
					page: 0,
					status: type || '',
					keyword: this.search
				}).then(res => {
					if (res.code == 0) {
						this.orderList = res.data.data
					}
				})
			},
			//菜单index切换
			checked(index) {
				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
					}
				})
			},
			// 跳转订单详情
			goOrderDetail(id) {
				uni.navigateTo({
					url: '/pages/my/myorders/orderDetail?id=' + id
				})
			},
			// 跳转积分兑换
			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()
			},
			// 保存图片
			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 {
		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>