aiarrive-h5/src/pages/about/orderlist/orderlist.vue

<template>
	<view class="orderlist-container">

		<view class="list-content">
			<view class="title">订单记录</view>
			<view class="list">
				<view class="list-item" v-for="(order, index) in orderList" :key="index">
					<view class="title">
						{{ order.description }}
					</view>
					<view class="item">
						订单金额：<span>￥{{ order.amount / 100 }}</span>
					</view>
					<view class="item">
						订单状态：<span>{{ PAY_STATUS[order.status] }}</span>
					</view>
					<view class="item">
						商户订单号：<span @click="handleCopy(order.outTradeNo)">{{ order.outTradeNo ? order.outTradeNo : '-'}}</span>
					</view>
					<view class="item">
						微信订单号：<span @click="handleCopy(order.wxOrderId)">{{ order.wxOrderId ? order.wxOrderId : '-'}}</span>
					</view>
					<view class="item">
						订单创建时间：<span>{{ dateFormat(order.createTime, 'yyyy-MM-dd hh:mm:ss') }}</span>
					</view>
				</view>
				<view class="list-item" v-if="!over" @click="loadMore">
					加载更多
				</view>
			</view>
			<view class="empty" v-if="orderList.length == 0 || isIOS">
				暂无订单
			</view>
		</view>
	</view>
</template>

<script>
	import { getOrders } from '@/api/index.js';
	import { PAY_STATUS, PAY_TYPE, PAY_TYPE_NAME } from '@/common/enum.js'
	import { mapState, mapMutations } from 'vuex'
	import { dateFormat } from '@/common/util.js'	
	import { curVersion } from '@/common/config.js'

	var app = getApp();
	export default {
		data() {
			return {
				PAY_STATUS,
				over: true,
				orderList: [
					// {
					// "id": 1, // 订单ID
					// "createTime": 1678199732898, // 下单时间
					// "type": "MONTHLY", // 订单类别
					// "status": "CANCELED", // 订单状态，CANCELED：已取消，INIT：等待支付，PAID：支付成功
					// "outTradeNo": "090c96d00a3947c4aec72587b2fd8453", // 商户订单号
					// "description": "AI降临派-包月", // 商品描述
					// "amount": 1, // 金额，单位（分）
					// "wxOrderId": "wxasdadf1213fesd21334", // 微信订单号，只有支付成功才会有
					// "successTime": 1678199732898 ,// 支付成功时间，只有支付成功才会有
					// }
				],
				page: 1,
				pageSize: 30,
				loaded: false,
				isIOS: app.globalData.isIOS
			};
		},
		onLoad() {
			if (!this.chatToken || curVersion !== this.version) {
				this.$store.dispatch('login').then(rst => {
					this.getOrderList()
				})
			} else {
				this.getOrderList()
			}
		},
		computed: {
			...mapState(['chatToken', 'version','userId', 'isVIP', 'expireTime'])
		},
		methods: {
			dateFormat,
			loadMore() {
				this.getOrderList();
			},
			async getOrderList() {
				if (this.isIOS) {
					this.loaded = true
					return
				}
				
				const res = await getOrders(this.page, this.pageSize)
				this.loaded = true
				if (res.code === 0 && res.data && res.data.list) {
					this.orderList = this.orderList.concat(res.data.list)
					this.over = res.data.list.length < this.pageSize
					this.page++
				}
			},
			handleCopy(str) {
				const that = this
				wx.setClipboardData({
					data: str, //这个是要复制的数据
					success (res) {
						wx.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.orderlist-container {
	padding: 20rpx 30rpx 40rpx;
	background-color: @mainBg;
	height: 100%;
	color: #EDEDED;
    overflow: auto;
	
	.list-content {
		.title {
			font-size: 32rpx;
			padding-bottom: 20rpx;
		}
		.list {
			.list-item {
				padding: 30rpx;
				border-radius: 8rpx;
				background-color: @lightBg;
				margin-bottom: 20rpx;
				.item {
					line-height: 1.6;
					span {
						color: @mainColor;
						&:active {
							color: lighten(@mainColor, 5%);
						}
					}
				}
			}
		}
		.empty {
			background-color: @lightBg;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 200rpx;
			border-radius: 8rpx;
			color: @fontColor;
		}
	}
}
</style>