ddcWechat/pages/rent/sponsor/carList.vue

<template>
	<view :style="colorStyle">
		<view class="my-order">
			<view class="list">
				<view class="item" v-for="(item,ind) in orderList">
					<view class="acea-row">
						<view class="title line2">
							{{item.add_time}}
						</view>
					</view>
					<view class="machine ">
						<view class="acea-row row-between">
							<view class="it">
								出价：{{item.price}}
							</view>
							<view class="status">
								分红：{{item.dividend_price}}
							</view>
							<view class="status">
								已分红：{{item.paid_dividend}}
							</view>
						</view>
					</view>
					<view class="machine acea-row row-between-wrapper">

						<view class="acea-row row-left">
							<view class="it">
								编号：
							</view>
							<view class="code">
								{{item.machine_no}}

							</view>
						</view>
						<view class="acea-row row-rightss" v-if="item.plate_number">
							<view class="it">
								车牌号：
							</view>
							<view class="code">
								{{item.plate_number}}
							</view>
						</view>
						<view class="acea-row row-rightss">
							<view class="font-color-blue" v-if="item.store_binding==1">
								已绑定
							</view>
							<view class="font-color-white" v-else>
								未绑定
							</view>
						</view>
					</view>
					<view v-if="item.status==0" class="text_red tip ">
						待租
					</view>
					<view v-if="item.status==1" class="text_blue tip">
						进行中
					</view>
					<view v-if="item.status==1" class="text_greed tip">
						完成
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper font-color-white" v-if="orderList.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
				{{ loadTitle }}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage v-if="!loading" :title="$t(`暂无订单`)"></emptyPage>
				<view class="loadingicon acea-row row-center-wrapper">
					<text class="loading iconfont icon-jiazai font-color-white" :hidden="loading == false"></text>
				</view>
			</view>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		postSponsorCar,
	} from '@/api/rent.js';
	import home from '@/components/home';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import emptyPage from '@/components/emptyPage.vue';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			home,
			emptyPage,
		},
		mixins: [colors],
		data() {
			return {
				searchKey: '',
				onAll: -1, //是否全部
				available: -1, //是否欠费
				binding: -1, //是否绑定车辆
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: this.$t(`加载更多`), //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				page: 1,
				limit: 20,
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				// 保存当前订单数据
				actionOrder: {},
				payLoding: false, //判断是否支付中
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			if (this.isLogin) {
				this.page = 1;
				this.orderList = []
				this.loadend = false;
				this.getRentOrder();
			} else {
				toLogin();
			}
		},
		methods: {
			// 回车查询
			inputConfirm: function(event) {
				if (event.detail.value) {
					uni.hideKeyboard();
					this.searchBut(event.detail.value);
				}
			},
			// 查询
			searchBut() {
				this.loadend = false;
				this.page = 1;
				this.orderList = [];
				uni.showLoading({
					title: this.$t(`正在搜索中`)
				});
				this.getRentOrder();
				uni.hideLoading();
			},
			// 设置查询值
			setValue: function(event) {
				this.$set(this, 'searchKey', event.detail.value);
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == 2 || status == 3) {
					if ((status == 2 && this.binding == 0) || (status == 3 && this.binding == 1)) {
						return;
					}
					if (status == 2) {
						this.binding = 0;
					} else
					if (status == 3) {
						this.binding = 1;
					}
				}
				if (status == 0 || status == 1) {
					if (status == this.available) {
						return;
					}
					this.available = status;
				}
				if (status == -1) {
					if (status == this.onAll) {
						return;
					} else {
						this.onAll = status;
						this.binding = -1;
						this.available = -1;
					}
				} else {
					this.onAll = 1;
				}
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getRentOrder();
			},
			/**
			 * 获取订单列表
			 */
			getRentOrder: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				postSponsorCar({
						is_available: that.available,
						binding: that.binding,
						page: that.page,
						limit: that.limit,
						key: that.searchKey
					})
					.then(res => {
						let list = res.data.list || [];
						let loadend = list.length < that.limit;
						that.orderList = that.$util.SplitArray(list, that.orderList);
						that.$set(that, 'orderList', that.orderList);
						that.loadend = loadend;
						that.loading = false;
						that.loadTitle = loadend ? that.$t(`没有更多内容啦~`) : that.$t(`加载更多`);
						that.page = that.page + 1;
					})
					.catch(err => {
						that.loading = false;
						that.loadTitle = that.$t(`加载更多`);
					});
			},
		},
		onReachBottom: function() {
			this.getRentOrder();
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
	};
</script>

<style scoped lang="scss">
	.list {
		padding: 30rpx;
		.item {
			position: relative;
			background-color: var(--view-theme-16);
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.title {
				font-weight: bold;
				font-size: $uni-font-size-base;
				color: #fff;
			}

			.machine {
				font-size: $uni-font-size-sm;
				color: #999999;
				margin-top: 20rpx;

				.code {
					color: var(--view-priceColor);
					background-color: rgba(#75EFFA, 0.2);
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
				}
			}

			.img {
				width: 40rpx;
				height: 40rpx;
			}

			.tip {
				position: absolute;
				top: 0;
				right: 0;
				padding: 5rpx 20rpx;
				font-size: 20rpx;
				border-bottom-left-radius: 10rpx;

				&.text_greed {
					color: #49D8A8;
					background-color: rgba(#49D8A8, 0.2);
				}

				&.text_red {
					color: rgba(254, 92, 45, 1);
					background-color: rgba(rgba(254, 92, 45, 1), 0.2);
				}

				&.text_blue {
					color: #1db0fc;
					background-color: rgba(#1db0fc, 0.2);
				}
			}
		}
	}

	.my-order {
		background-color: var(--view-theme);
		min-height: 100vh;
	}

</style>