NurseStationPersonAppletUl/pages/Orderlist/Orderlist.vue

<template>
	<view class="app">
		<view class="" v-if="total>0">
			<view class="item" v-for="(item,index) in orderlist" :key="index">
				<view class="name">
					<span>{{item.trainingOrderStatus=='WAIT_PAY'?'待付款':''}}
						{{item.trainingOrderStatus=='PAY'?'已付款':''}}
						{{item.trainingOrderStatus=='REFUNDED'?'已退款':''}}
						{{item.trainingOrderStatus=='CANCEL'?'已取消':''}}
					</span>
				</view>
				<view class="detailslist" @tap="goMyLearning(item)">
					<image :src="baseurl+item.trainingItemCoverUrl" mode=""></image>
					<view class="model">
						<span>{{item.trainingItemTitle}}</span>
						<span v-if="item.trainingItemPrice">￥{{item.trainingItemPrice}}</span>
						<span v-else>￥0</span>
					</view>
				</view>
				<view class="submit" @tap='goOrderdetails(item)' style="background-color: #4271B9;">
					去支付
				</view>
				<!-- v-if="item.trainingOrderStatus=='WAIT_PAY'" -->
			</view>
		</view>
		<view class="noorder" v-else>
			<u-empty mode="list" icon-size='220' text='暂无服务订单'></u-empty>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import baseurl from '@/api/baseurl.js'
	import {
		selectTrainingOrderItemList
	} from '@/api/Orderlist/index.js'
	export default {
		data() {
			return {
				baseurl: undefined,
				nurseStationPersonId: undefined,
				pageNum: 1,
				pageSize: 10,
				orderlist: [],
				total: 0,
			};
		},
		onShow() {},
		onLoad() {
			this.baseurl = baseurl
			const that = this
			const value = uni.getStorageSync('nursePersonId');
			if (value) {
				// that.nurseStationPersonId = value
				that.nurseStationPersonId = 61
				that.info();
			} else {}
		},
		methods: {
			//订单详情
			goOrderdetails(item) {
				uni.navigateTo({
					url: `/pages/Orderdetails/Orderdetails?list=${JSON.stringify(item)}`
				})
			},
			//我的学习
			goMyLearning(item) {
				uni.navigateTo({
					url: "/pages/MyLearning/MyLearning"
				})
			},
			//列表信息
			info() {
				selectTrainingOrderItemList(this.pageNum, this.pageSize, this.nurseStationPersonId)
					.then(res => {
						this.orderlist = res.rows
						this.total = res.total
					})
			},
		},
		onReachBottom() { //下滑加载
			if (this.list.length >= this.total) {} else {
				this.pageNum++
				selectTrainingOrderItemList(this.pageNum, this.pageSize, this.nurseStationPersonId)
					.then(res => {
						res.rows.forEach(e => {
							this.orderlist.push(e)
						})
					})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.pageNum = 1
			this.info();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.noorder {
			margin-top: 20%;
		}

		.item {
			width: 99%;
			background: #FFFFFF;
			box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			padding: 0 0 100rpx 0;
			margin: 20rpx auto;
			position: relative;

			.name {
				width: 95%;
				height: 90rpx;
				font-size: 30rpx;
				color: #969394;
				line-height: 90rpx;
				border-bottom: 1rpx solid #D8D4D4;
				margin: 0 auto;

				span {
					color: #4C7BC9;
					float: right;
				}

				image {
					width: 15rpx;
					height: 23rpx;
					padding-left: 25rpx;
				}
			}


			.detailslist {
				display: flex;

				image {
					width: 182rpx;
					height: 182rpx;
					margin: 20rpx 0 0 20rpx;
				}

				.model {
					width: 70%;
					margin: 30rpx 0 0 20rpx;

					span {
						font-size: 34rpx;
						color: #000000;
					}

					span:nth-child(1) {
						display: inline-block;
						width: 70%;
					}

					span:nth-child(2) {
						color: #969394;
						float: right;
						margin-right: 30rpx;
					}
				}
			}

			.submit {
				width: 25%;
				height: 68rpx;
				line-height: 68rpx;
				background: #4C7BC9;
				border-radius: 26rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				position: absolute;
				right: 2%;
			}
		}
	}
</style>