dou_fire/pages/work/poorOrder.vue

<template>
	<view class="content">
		<block v-if="orders.length > 0">
			<view v-for="(item, index) in orders" :key="index" class="order-block">
				<view class="order-header">
					<view class="order-header-no nowrap">{{item.order_no}}</view>
					<view class="order-header-price nowrap">￥{{item.total}}</view>
				</view>
				<view class="order-content">
					<view class="order-content-item">
						<label>客户姓名</label>
						<view class="order-content-val nowrap">{{ item.user.nickname }}</view>
					</view>
					<view class="order-content-item">
						<label>客户电话</label>
						<view class="order-content-val nowrap">{{ item.user.username }}</view>
					</view>
					<view class="order-content-item">
						<label>服务包数量</label>
						<view class="order-content-val nowrap">×{{ item.services.length }}</view>
					</view>
					<view class="order-content-item">
						<label>已缴纳费</label>
						<view class="order-content-val nowrap">￥{{ item.paid }}</view>
					</view>
					<view class="order-content-item">
						<label>需补缴费</label>
						<view class="order-content-val nowrap">￥{{ item.price }}</view>
					</view>
					<view class="order-content-item">
						<label>创建时间</label>
						<view class="order-content-val nowrap">{{item.created_at}}</view>
					</view>
				</view>
				<view class="order-btns">
					<button class="order-left-btn" size="mini" @click="onCallPhone(item.user.username)">联系客户</button>
					<view class="order-right">
						<button size="mini" @click="$Router.push({name: 'Pay', params: {orderId: item.order_id, type: 'acting', paytype: 'diff'}})">补缴</button>
						<button size="mini" @click="$Router.push({name: 'OrderInfo', params: {orderId: item.order_id}})">查看</button>
					</view>
				</view>
			</view>
			<!-- 分页 -->
			<u-loadmore v-if="pagesShow" :status="status" />
		</block>
		<block v-else>
			<view class="null">
				<u-empty
					mode="order"
					icon="http://cdn.uviewui.com/uview/empty/order.png"
				>
				</u-empty>
			</view>
		</block>
	</view>
</template>

<script>
	import { ordersDiffs } from '@/apis/interfaces/order.js'
	export default {
		data() {
			return {
				orders		: [],
				// 分页
				page		: {
					current	: 1,
					has_more: false,
				},
				pagesShow	: false,
				status   	: ''
			}
		},
		created() {
			this.getList()
		},
		onShow() {
			// 是否处理当前列表状态
			let isOrderId = this.$store.getters.getOrderId
			if(isOrderId != null){
				this.removeListVal(isOrderId)
			}
		},
		methods:{
			// 联系客户
			onCallPhone(phone){
				uni.makePhoneCall({
					phoneNumber: phone,
					fail: err => {
						uni.showToast({
							title: '拨打电话失败，请检查您的应用权限[电话]保持允许状态',
							icon : 'none'
						})
					}
				})
			},
			// 获取订单列表
			getList(){
				ordersDiffs({
					page  : this.page.current
				}).then(res => {
					let { data, page } = res;
					let atList   	= page.current == 1 ? [] : this.orders
					
					this.orders 	= atList.concat(data)
					this.page  		= page
					this.pagesShow 	= false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 变更当前列表状态
			removeListVal(id){
				let ListArr 	= this.orders
				let ListIndex 	= ListArr.findIndex(val => val.order_id == id)
				if(ListIndex >= 0){
					this.orders.splice(ListIndex, 1)
				}
				this.$store.commit('setOrderId', null)
			},
		},
		onReachBottom() {
			this.pagesShow = true;
			if(this.page.has_more){
				this.status    = 'loading';
				this.page.current++
				this.getList()
				return
			}
			this.status    = 'nomore';
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 1rpx 0;
		box-sizing: border-box;
	}
	.null{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	// 订单模块
	.order-block{
		background-color: white;
		margin: 30rpx;
		border-radius: 20rpx;
		.order-header{
			display: flex;
			justify-content: space-between;
			border-bottom: solid 1rpx #f6f6f6;
			padding: 15rpx 30rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			&-no{
				color: gray;
				width: calc(100% - 200rpx);
			}
			&-price{
				font-weight: bold;
				color: red;
				width: 200rpx;
				text-align: right;
			}
		}
		.order-content{
			padding: 20rpx 30rpx;
			&-item{
				display: flex;
				justify-content: space-between;
				line-height: 70rpx;
				font-size: 30rpx;
				label{
					width: 200rpx;
					color: gray;
				}
				.order-content-val{
					width: calc(100% - 200rpx);
					text-align: right;
				}
				.order-content-type{
					text{
						margin-right: 30rpx;
						position: relative;
						display: inline-block;
						&::after{
							position: absolute;
							content: "/";
							width: 30rpx;
							text-align: center;
							font-size: 30rpx;
							top: 0;
							right: -30rpx;
						}
						&:last-child{
							margin-right: 0;
							&::after{
								display: none;
							}
						}
					}
				}
			}
		}
		.order-btns{
			display: flex;
			justify-content: space-between;
			border-top: solid 1rpx #f6f6f6;
			padding: 20rpx 30rpx;
			button[size="mini"]{
				margin: 0;
				padding: 0;
				height: 70rpx;
				line-height: 68rpx;
				border-radius: 40rpx;
				padding: 0 30rpx;
				font-size: 30rpx;
				background: white;
				color: $main-color;
				border:solid 1rpx $main-color;
				&::after{
					display: none;
				}
			}
			.order-right{
				button[size="mini"]{
					margin-left: 30rpx;
					background: $main-color;
					color: white;
				}
			}
		}
	}
</style>