lanan-repair/pages/orderList/orderList.vue

<template>
	<view class="container">
		<VNavigationBar titleColor="rgba(0,0,0,0.9)" leftTitle="true" backgroundColor="transparent" title="我的订单">
		</VNavigationBar>
		<view class="body">
			<view class="tabList">
				<view @click="changeTabFun(item.id)" v-for="(item, index) in tabList" :key="index" class="tabItem"
					:class="{actived: item.id === activeKey}">
					{{ item.title }}
					<view v-if="activeKey === item.id" class="activeLine"></view>
				</view>
			</view>
			<view class="orderList">
				<view v-for="(item, index) in orderList" :key="index" class="orderItem">
					<view class="line1">
						<view class="orderNo">
							订单编号：{{item.orderNo}}
						</view>
						<text class="orderStatus" :class="['status_' + item.status]">
							{{ getStatus(item.orderStatus) }}
						</text>
					</view>
					<view class="orderInfo">
						<image class="orderInfoIcon" src="" mode="aspectFit"></image>
						<text class="orderInfoText">{{ item.goodsTitle }}</text>
					</view>
					<view class="orderInfo">
						<image class="orderInfoIcon" src="" mode="aspectFit"></image>
						<text class="orderInfoText">{{ item.tenantName | 蓝安-中鑫之宝 }}</text>
					</view>
					<view class="line2">
						<view>
							共计
							<text class="orderAmountUnit">￥</text>
							<text class="orderAmount">{{item.payMoney}}</text>
						</view>
						<text>{{formatTimestamp(item.createTime)}}</text>
					</view>
					<view class="line3">
						<view @click="goPay(item)" class="showOrder" >支付</view>
						<view @click="gotoDetail(item)" class="showOrder" >查看订单</view>
						<view @click="gotoEvaluate(item)" class="evaluate" >评价订单</view>
					</view>
				</view>
				<canvas style="width:200px; height: 200px; z-index: 9999999;margin: 40px auto;"
										canvas-id="myQrcode"></canvas>
				 
			</view>
			
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" @change="popupChange">
				
					<view style="padding: 30rpx;border-radius:20rpx;width: 600rpx;background-color: #fff;display: flex;align-items: center;row-gap: 10rpx;flex-direction: column;">
					  <div>11{{imageUrl}}</div>
					  <img  style="width: 200px; height: 200px;"   :src="imageUrl" />  
					 
						
					  <view class="popup-title">长按扫一扫支付</view>
					</view>
			</uni-popup>
		
		</view>

		<tabBarVue msg="2"></tabBarVue>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import drawQrcode from 'weapp-qrcode';
	
	export default {
		components: {
			tabBarVue,
			VNavigationBar
		},
		data() {
			return {
				payShow:false,
				activeKey: 0,
				pageNum:1,
				totalPages:0,
				imageUrl:null,
				tabList: [{
						id: 0,
						title: '全部订单'
					},
					{
						id: 1,
						title: '维修中'
					},
					{
						id: 2,
						title: '待评价'
					},
				],
				orderList: [
				]
			}
		},
		onShow() {
			this.orderList = []
			this.getList()
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				this.getList()
			}
		},
		methods: {
			formatTimestamp(timestamp) {
			    // 将时间戳转换为Date对象
			    const date = new Date(timestamp);
			    // 获取年月日时分秒
			    const year = date.getFullYear();
			    const month = (date.getMonth() + 1).toString().padStart(2, '0');
			    const day = date.getDate().toString().padStart(2, '0');
			    const hours = date.getHours().toString().padStart(2, '0');
			    const minutes = date.getMinutes().toString().padStart(2, '0');
			    const seconds = date.getSeconds().toString().padStart(2, '0');
			    // 组合成日期时间字符串
			    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		  },
		  async	getList(){
				let data = {
					pageSize: 20,
					pageNo: this.pageNum
				}
				await request({
					url: '/order/page',
					method: 'get',
					params: data
				}).then((res) => {
					if (res.code == 200) {
						this.orderList = this.orderList.concat(res.rows)
						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}
				})
			},
			changeTabFun(id) {
				this.activeKey = id
			},
			getStatus(status) {
				switch (status) {
					case '0':
						return '待支付'
					case '1':
						return '已支付'
					default:
						break;
				}
			},
			async goPay(data){
				let that = this
				await request({
					url: '/pay/toPay',
					method: 'get',
					params: {orderId:data.id}
				}).then((res) => {
					
					this.$refs.popup.open()
					setTimeout(()=>{
						
						drawQrcode({
							width: 200,
							height: 200,
							canvasId: 'myQrcode',
							text: res.data.code_url
						})
					}, 60)
					setTimeout(()=>{
						that.convertToImage()
					
					}, 500)
			
				})
			},
	
			convertToImage() {  
	
				uni.canvasToTempFilePath({
			
				  canvasId: 'myQrcode',
				  success: function(res) {
					// 在H5平台下，tempFilePath 为 base64
					this.imageUrl = res.tempFilePath.replace(/[\r\n]/g, "")
					console.log(this.imageUrl,200);
				  }
				})  
			} ,
			popupChange({show}) {
				if (show) {
					
				}
			},
			gotoDetail() {
				uni.navigateTo({
					url: '/pages/orderDetail/orderDetail'
				})
			},
			gotoEvaluate() {
				uni.navigateTo({
					url: '/pages/orderDetail/evaluate'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		background: #F3F5F7;
		display: flex;
		flex-direction: column;
		color: #333333;

		.body {
			flex: 1;
			height: 0;
			padding: 24rpx 32rpx;
		}

		.tabList {
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			display: flex;
			align-items: center;
			padding: 0 40rpx;

			.tabItem {
				padding: 30rpx;
				flex: 1;
				text-align: center;
				position: relative;
				font-size: 24rpx;

				&.actived {
					color: #0174F6;
				}

				.activeLine {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 96rpx;
					height: 6rpx;
					background: #0174F6;
					border-radius: 4rpx 4rpx 0rpx 0rpx;
				}
			}
		}

		.orderList {
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;

			.orderItem {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
			}
			.line1 {
				margin-bottom: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				.orderNo {
					flex: 1;
					width: 0;
					font-weight: 500;
					color: #858BA0;
				}
				.status_1 {
					color: #0174F6;
				}
				.status_2 {
					color: #999999;
				}
			}
			.orderInfo {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				column-gap: 10rpx;
				.orderInfoIcon {
					width: 28rpx;
					height: 28rpx;
					background: #ddd;
				}
				.orderInfoText {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
			.line2 {
				margin: 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 12px;
				color: #858BA0;
				.orderAmountUnit {
					color: #F92C2C;
				}
				.orderAmount {
					color: #F92C2C;
					font-weight: bold;
					font-size: 40rpx;
				}
			}
			.line3 {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.showOrder, .evaluate {
					width: 172rpx;
					height: 60rpx;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 2rpx solid #0174F6;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #0174F6;
				}
				.evaluate {
					border: 1rpx solid #EEEEEE;
					color: #333333;
				}
			}
		}
	}
</style>