HNKDBOSS-WEB/hn-shop-uniapp/pages/order/index.vue

<template>
	<!-- 用户购买 - 订单 -->
	<view class="container" :style="appThemeStyle">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{native: true}" @down="downCallback"
			:up="upOption" @up="upCallback">
			<!-- tab栏 -->
			<u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2"
				@change="onChangeTab" />
			<!-- 订单列表 -->
			<view class="order-list">
				<!-- l-time-actvied  -待激活 -->
				<!-- l-time-complete -已经完成 -->
				<view class="order-item" :class="{
            'l-time-actvied': item.payordersfkt === 0 && item.payorderstatus == '已支付' && item.payorderlx === '新购',
            'l-time-complete': item.payordersfkt === 1 && item.payorderstatus == '已支付' && item.payorderlx === '新购',
            'l-xufei-order': item.payorderlx === '续费'
          }" v-for="(item, index) in list.data" :key="index">
					<view>
						<view class="item-top">
							<view class="item-top-left">
								<text class="order-time">{{ item.payordercreatedate }}</text>
							</view>
							<view class="item-top-right">
								<text class="state-text">{{ item.payorderstatus }}</text>
							</view>
						</view>

						<!-- 订单类型 -->
						<view class="order-total" style="text-align: left">
							<text v-if="item.payorderlx === '新购'"
								style="font-size: 30rpx; font-weight: 900; color: #fa2209">{{ item.payorderlx }}订单</text>
							<text v-if="item.payorderlx === '续费'"
								style="font-size: 30rpx; font-weight: 900; color: #4caf50">{{ item.payorderlx }}订单</text>
							<br />
							<text>产品：{{ item.payorderproductname }} - </text>
							<text>{{ item.payorderproductlimit }} </text>
							<text>{{ item.payorderproductlimittype }} </text> <br />
							<text>支付：{{ item.payorderpaytitle }}</text> <br />
							<text>企业码：{{ item.payorderqym }}</text> <br />
						</view>

						<!-- 订单合计 -->
						<view class="order-total" style="text-align: left">
							<text>共 1 件商品，总金额 </text>
							<text class="unit">￥</text>
							<text class="money">{{ item.payorderprice }}</text>
						</view>

						<!-- 实名激活状态弹窗 -->
						<view class="actvied-center" v-if="userInfoData.customersfrz === 0">
							<text class="actvied-t1">此订单已经完成支付，产品待激活，根据国家工信部实名制要求，请根据提示完成实名认证后激活此产品服务。</text>
						</view>

						<!-- 已实名 待绑定手机号码 状态弹窗 -->
						<view class="actvied-center" v-if="userInfoData.customersfrz === 1">
							<text class="actvied-t1">此订单已经完成支付，产品待激活，根据国家工信部实名制要求，请根据提示完成实名认证后激活此产品服务。</text>
						</view>

						<!-- 已经完成 -->
						<view class="complete-center">
							<text class="actvied-t1">此订单已经激活，请注意查收产品账户密码，信飞通会通过绑定的手机号码进行发送</text>
						</view>

						<!-- 续费资费 -->
						<view class="" v-if="item.payorderzfsfsx == 0 && item.payorderlx === '续费'">
							<text class="actvied-t1" style="color: #4caf50">当前资费到期后自动入账</text>
						</view>

						<!-- 订单号 -->
						<view class="order-total" style="text-align: left">
							<!-- <text class="order-time">账号状态：{{ item.payordersfkt ? '已经激活' : '待激活' }}</text><br /> -->
							<text class="order-time">订单号：{{ item.payorderproductid }}</text> <br />
						</view>

						<!-- 订单操作 -->
						<view class="order-handle">
							<view class="btn-group clearfix">
								<!-- 未支付的订单 -->
								<view v-if="userInfoData.customersfrz === 0" class="btn-item redbt actviedbt"
									@click="handleService('pages/user/activatorder/index', item)">立刻实名认证</view>
								<view v-if="userInfoData.customersfrz === 1" class="btn-item redbt actviedbt"
									@click="handleService('pages/user/activatorder/index', item)">立刻绑定手机号</view>
								<!-- <view class="btn-item" @click="onCancel(item.order_id)">申请取消</view> -->
								<view v-if="item.payorderstatus == '已支付'&&item.payordersfkt==1" class="btn-item redbt"
									@click="handleInvoice(item)">查看发票</view>
							</view>
						</view>
					</view>
				</view>

				<view style="width: 100%; height: 100rpx"> </view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		DeliveryStatusEnum,
		DeliveryTypeEnum,
		OrderStatusEnum,
		PayStatusEnum,
		ReceiptStatusEnum
	} from '@/common/enum/order'
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import * as OrderApi from '@/api/order'
	import * as AppApi from '@/api/app'
	import storage from '@/utils/storage'

	// 每页记录数量
	const pageSize = 15

	// tab栏数据
	const tabs = [{
			name: `全部`,
			value: 'all',
			key: ''
		},
		{
			name: `待支付`,
			value: 'payment',
			key: '待支付'
		},
		// {
		//   name: `待发货`,
		//   value: 'delivery'
		// },
		// {
		//   name: `待收货`,
		//   value: 'received'
		// },
		{
			name: `已支付`,
			value: 'comment',
			key: '已支付'
		}
	]

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				// 枚举类
				DeliveryStatusEnum,
				DeliveryTypeEnum,
				OrderStatusEnum,
				PayStatusEnum,
				ReceiptStatusEnum,
				userInfoData: {},
				// 当前页面参数
				options: {
					dataType: 'all'
				},
				// tab栏数据
				tabs,
				// 当前标签索引
				curTab: 0,
				// 订单列表数据
				list: getEmptyPaginateObj(),

				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无订单记录'
					}
				},
				// 控制onShow事件是否刷新订单列表
				canReset: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 初始化当前选中的标签
			this.initCurTab(options)
			// 注册全局事件订阅: 是否刷新订单列表
			uni.$on('syncRefresh', (canReset) => {
				this.canReset = canReset
			})
			// 用户信息
			this.userInfoData = storage.get('wx_userinfo')
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.onRefreshList()
			this.canReset = false
		},

		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
			// 卸载全局事件订阅
			uni.$off('syncRefresh')
		},

		methods: {
			// 初始化当前选中的标签
			initCurTab(options) {
				const app = this
				if (options.dataType) {
					const index = app.tabs.findIndex((item) => item.value == options.dataType)
					app.curTab = index > -1 ? index : 0
				}
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			async upCallback(page) {
				const app = this
				// 设置列表数据

				// 获取支付数据
				const params = {
					pageindex: page.num,
					rows: page.size,
					'payorderopenid.value': storage.get('wx_openid'),
					'payorderstatus.value': this.tabs[app.curTab].key || '',
					pagevalue: 299
				}
				const {
					Data: res
				} = await AppApi.getPalList(params)

				const curPageLen = res.Data.length
				const totalSize = res.Total
				app.mescroll.endBySize(curPageLen, totalSize)

				// const newList = app.initList({data: res.Data})
				app.list.data = getMoreListData({
					data: res.Data
				}, app.list, page.num)

				// app
				//   .getOrderList(page.num)
				//   .then((list) => {
				//     const curPageLen = list.data.length
				//     const totalSize = list.data.total
				//     app.mescroll.endBySize(curPageLen, totalSize)
				//   })
				//   .catch(() => app.mescroll.endErr())
			},

			// 获取订单列表
			getOrderList(pageNo = 1) {
				const app = this
				console.log('获取订单列表')
				// return new Promise((resolve, reject) => {
				//   OrderApi.list({dataType: app.getTabValue(), page: pageNo}, {load: false}).then((result) => {
				//     // 合并新数据
				//     const newList = app.initList(result.data.list)
				//     app.list.data = getMoreListData(newList, app.list, pageNo)
				//     resolve(newList)
				//   })
				// })
			},

			// 初始化订单列表数据
			initList(newList) {
				newList.data.forEach((item) => {
					item.total_num = 0
					item.goods.forEach((goods) => {
						item.total_num += goods.total_num
					})
				})
				return newList
			},

			// 获取当前标签项的值
			getTabValue() {
				return this.tabs[this.curTab].value
			},

			// 切换标签项
			onChangeTab(index) {
				const app = this
				// 设置当前选中的标签
				app.curTab = index
				// 刷新订单列表
				app.onRefreshList()
			},

			// 刷新订单列表
			onRefreshList() {
				console.log('刷新订单列表')
				this.list = getEmptyPaginateObj()
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 120)
			},

			// 取消订单
			onCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.cancel(orderId).then((result) => {
								// 显示成功信息
								app.$toast(result.message)
								// 刷新订单列表
								app.onRefreshList()
							})
						}
					}
				})
			},

			// 确认收货
			onReceipt(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认收到商品了吗？',
					success(o) {
						if (o.confirm) {
							OrderApi.receipt(orderId).then((result) => {
								// 显示成功信息
								app.$success(result.message)
								// 刷新订单列表
								app.onRefreshList()
							})
						}
					}
				})
			},

			// 跳转到服务页面
			handleService(url, item) {
				this.$navTo(url, {
					payorderid: item.payorderid,
					payordercustomerid: item.payordercustomerid
				})
			},

			// 跳转到发票界面
			handleInvoice(item) {
				this.$navTo('pages/invoice/index', {
					payorderid: item.payorderid
				})
			},

			// 点击去支付
			onPay(orderId) {
				this.$navTo('pages/checkout/cashier/index', {
					orderId
				})
			},

			// 跳转到订单详情页
			handleTargetDetail(orderId) {
				this.$navTo('pages/order/detail', {
					orderId
				})
			},

			// 跳转到订单评价页
			handleTargetComment(orderId) {
				this.$navTo('pages/order/comment/index', {
					orderId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xufeiorder {}

	.l-xufei-order {}

	// 待激活
	.actvied-center {
		display: none;
		color: #fa2209;
		margin-bottom: 10rpx;
	}

	.actviedbt {
		display: none;
	}

	.l-time-actvied {
		background: #fff2f2 !important;
		border: 1px solid #fa2209;

		.actvied-center {
			display: flex;
		}

		.actviedbt {
			display: block;
		}
	}

	// 已经激活
	.complete-center {
		display: none;
		color: #4caf50;
		margin-bottom: 10rpx;
	}

	.l-time-complete {
		border: 1px solid #4caf50;

		.complete-center {
			display: flex;
		}
	}

	.redbt {
		background: #fa2209;
		color: #fff !important;
		border: none !important;
	}

	// 项目内容
	.order-item {
		margin: 20rpx auto 20rpx auto;
		padding: 30rpx 30rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
	}

	// 项目顶部
	.item-top {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		margin-bottom: 40rpx;

		.order-time {
			color: #777;
		}

		.state-text {
			color: $main-bg;
		}
	}

	// 商品列表
	.goods-list {

		// 商品项
		.goods-item {
			display: flex;
			margin-bottom: 40rpx;

			// 商品图片
			.goods-image {
				width: 180rpx;
				height: 180rpx;

				.image {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			// 商品内容
			.goods-content {
				flex: 1;
				padding-left: 16rpx;
				padding-top: 16rpx;

				.goods-title {
					font-size: 26rpx;
					max-height: 76rpx;
				}

				.goods-props {
					margin-top: 14rpx;
					color: #ababab;
					font-size: 24rpx;
					overflow: hidden;

					.goods-props-item {
						padding: 4rpx 16rpx;
						border-radius: 12rpx;
						background-color: #fcfcfc;
					}
				}
			}

			// 交易信息
			.goods-trade {
				padding-top: 16rpx;
				width: 150rpx;
				text-align: right;
				color: $uni-text-color-grey;
				font-size: 26rpx;

				.goods-price {
					vertical-align: bottom;
					margin-bottom: 16rpx;

					.unit {
						margin-right: -2rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	// 订单合计
	.order-total {
		font-size: 26rpx;
		vertical-align: bottom;
		text-align: right;
		line-height: 50rpx;

		.unit {
			margin-left: 8rpx;
			margin-right: -2rpx;
			font-size: 26rpx;
		}

		.money {
			font-size: 28rpx;
		}
	}

	// 订单操作
	.order-handle {
		.btn-group {
			.btn-item {
				border-radius: 10rpx;
				padding: 8rpx 20rpx;
				margin-left: 15rpx;
				font-size: 26rpx;
				float: right;
				color: #383838;
				border: 1rpx solid #a8a8a8;

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

				&.active {
					color: $main-bg;
					border: 1rpx solid $main-bg;
				}
			}
		}
	}
</style>