pet-front-order/pages/details/order.vue

<template>
	<view class="order-container">
		<view v-if="orderList.length>0">
			<view class="order-text-blod" style="margin: 0 0 14px 10px;">
				全部订单
			</view>
			<view class="order-item" v-for="(order,index) in orderList" :key="index">
				<view class="order-title">
					<text
						class="order-text-blod">{{order.orderItemList&&order.orderItemList[0]&&order.orderItemList[0].productName}}</text>
					<text style="font-size: 14px;color: #A94F20;">{{ getStatusName(order.status) }}</text>
				</view>
				<view class="order-content">
					<view class="order-title">
						<text class="order-text-normal">下单时间</text>
						<text class="order-text-normal" style="color: #999;">{{order.paymentTime}}</text>
					</view>
					<view class="order-title" style="margin-top: 14px;">
						<text class="order-text-normal">上门频率</text>
						<text class="order-text-normal" style="color: #999;">
							{{order.service.serviceFrequency =='once_a_day'?'一天一次':'一天两次'}}
						</text>
					</view>
<!-- 					<view class="order-title" style="margin-top: 14px;">
						<text class="order-text-normal">服务时间</text>
						<view>
							<view class="order-text-normal" style="color: #999;margin-bottom: 5px;"
								v-for="date in (order.service.serviceDate && getDateList(order.service.serviceDate))"
								:key="date">
								{{date}}
							</view>
						</view>
					</view> -->
				</view>
				<view class="order-price">
					<view class="order-text-blod">
						总价:
						<text style="font-size: 20px; color:#FF530A;">￥{{order.payAmount}}</text>
						<text style="color:#FF530A; font-size:14px"> 元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-else>
			暂无数据
		</view>

		<Kefu></Kefu>

	</view>
</template>

<script>
	import { getOpenIdKey } from '@/utils/auth';
	import Kefu from '../common/kefu.vue'
	import {
		getOrderList,
		getOpenId
	} from "@/api/system/user.js"
	export default {
		data() {
			return {
				prames: {
					status: '-1',
					page: 0,
					size: 20,
					openId: ''
				},
				orderList: [],
				openIdStr: '',
				totalPages: 1,
				statusLsit: [{
						value: -1,
						label: '全部'
					},
					{
						value: 1,
						label: '待派单'
					},
					{
						value: 2,
						label: '已派单'
					},
					{
						value: 3,
						label: '已完成'
					},
				]
			};
		},
		components:{
			Kefu
		},
		onLoad() {
			this.openIdStr = getOpenIdKey()
			// this.openIdStr = this.$globalData.openIdStr;
			this.getOrderData()
		},
		onReachBottom() {
			this.prames.page = this.prames.page + 1
			this.getOrderData()
		},
		onPullDownRefresh() {
			this.prames = {
				status: '-1',
				page: 0,
				size: 20,
				openId: ''
			}
			this.orderList = []
			this.getOrderData()
			// wx.stopPullDownRefresh() 
			//停止下拉刷新效果的api，如果发现进入刷新状态无法停止，可以用这个
		},
		methods: {
			getOrderData() {
				if (!this.openIdStr) {
					this.login()
				} else {
					if (this.prames.page < this.totalPages) {
						this.prames.openId = this.openIdStr
						getOrderList(this.prames).then(res => {
							if (res && res.content) {
								this.totalPages = res.totalPages
								this.orderList = [...this.orderList, ...res.content]
							}
							console.log(res);
						})
					} else {
						uni.showToast('暂无更多数据')
					}

				}

			},
			login() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						this.getOpenId(loginRes.code)
					},
					fail: function(error) {
						// 授权失败处理
						uni.showToast('授权失败，请授权后再试')
					}
				});
			},
			getOpenId(code) {
				getOpenId(code).then(res => {
					if (res.code == 200 && res.data) {
						this.openIdStr = JSON.parse(res.data).openId;
						this.$globalData.openIdStr = this.openIdStr;
						this.getOrderData()
					}
				})
			},
			getStatusName(status) {
				const currentStatus = this.statusLsit.find(item => item.value == status)
				if (currentStatus) {
					return currentStatus.label
				}
				return ''
			},
			getDateList(serviceDate) {
				return JSON.parse(serviceDate).sort()
			}
		},
	}
</script>

<style lang="scss">
	.order-container {
		padding: 14px 10px;
		background-color: #F5F5F7;
		height: 100vh;

		.order-item {
			border-radius: 8px;
			background: #FFF;
			padding: 18px 10px 14px;
			margin-bottom: 10px;

			.order-title {
				display: flex;
				justify-content: space-between;
			}

			.order-content {
				background-color: #FFFCF2;
				padding: 14px 16px;
				margin-top: 14px;
			}

			.order-price {
				margin-top: 14px;
				text-align: end;
			}
		}

		.order-text-blod {
			font-size: 16px;
			color: #333;
			font-weight: bold;
			line-height: 16px;
		}

		.order-text-normal {
			font-size: 16px;
			color: #333;
			line-height: 16px;
		}

		.no-data {
			color: #999;
			height: 60vh;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20px;
		}
	}
</style>