ddcWechat/pages/rent/store/outBindCarList.vue

<template>
	<view :style="colorStyle">
		<view class="my-order">
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo'></text>
					<input type='text' v-model='searchKey' @confirm="inputConfirm" focus
						:placeholder='$t(`姓名/手机号/车辆编号`)' placeholder-class='placeholder' @input="setValue"></input>
				</view>
				<view class='bnt' @tap='searchBut'>{{$t(`搜索`)}}</view>
			</view>
			<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.content}}
							</view>
						</view>
					</view>
					<view class="machine ">
						<view class="acea-row row-left">
							<view class="image-list" v-for="ls in item.images">
								<image :src="ls" mode="scaleToFill"></image>
							</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-yellow" v-if="item.type==0">
								解绑
							</view>
							<view class="font-color-white" v-if="item.type==-1">
								换绑
							</view>
						</view>
						<view class="acea-row row-rightss">
							<view class="del-buttom" @click="del(item,ind)">
								撤销
							</view>
						</view>
						
					</view>
					<view v-if="item.status==0" class="text_blue tip ">
						申请中
					</view>
					<view v-if="item.status==1" class="text_greed tip">
						同意
					</view>
					<view v-if="item.status==1" class="text_red 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>
			<navigator url="./outBindCar">
				<view class="logOut cartcolor acea-row row-center-wrapper">{{$t(`车辆解绑/换绑`)}}</view>
			</navigator>
		</view>
		<!-- #ifndef MP -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		storeApply,
		delStoreApplyId
	} 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: '',
				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: {
			// 撤销申请
			del(item, index) {
				let that = this;
				if (!item.id) {
					return that.$util.Tips({
						title: that.$t(`缺少订单号无法取消订单`)
					})
				};
				uni.showModal({
					title: '提示',
					content: '是否撤销申请',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title:'提交中',
								mask:true
							})
							delStoreApplyId({
									id: item.id
								})
								.then(res => {
									uni.hideLoading()
									return that.$util.Tips({
											title: res.msg,
											icon: 'success'
										},
										function() {
											that.orderList.splice(index, 1);
											that.$set(that, 'orderList', that.orderList);
										}
									);
								})
								.catch(err => {
									uni.hideLoading()
									return that.$util.Tips({
										title: err
									});
								});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 回车查询
			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);
			},
			/**
			 * 获取订单列表
			 */
			getRentOrder: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = that.$t(`加载更多`);
				storeApply({
						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;
		padding-top: 126rpx;

		.item {
			position: relative;
			background-color: var(--view-theme-16);
			padding: 30rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			border: 2px solid #333333;

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

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

				.del-buttom {
					background-color: #FFFFFF;
					border-radius: 100rpx;
					color: #333;
					padding: 6rpx 20rpx;
					line-height: 1;
				}

				.image-list {
					width: 100rpx;
					height: 100rpx;
					border: 1px solid #333;
					background-color: #FFF;
					border-radius: 5rpx;
					margin-right: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.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;
		padding-bottom: 150rpx;

		.search {
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			z-index: 999;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-bottom: 30rpx;
			background-color: var(--view-theme);

			.bnt {
				width: 120rpx;
				text-align: center;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 30rpx;
				color: #FFFFFF;
			}

			.input {
				width: 598rpx;
				background-color: #f7f7f7;
				border-radius: 33rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
				height: 66rpx;

				input {
					width: 472rpx;
					font-size: 28rpx;
				}

				.placeholder {
					color: #999;
				}

				.iconfont {
					color: #555;
					font-size: 35rpx;
				}
			}
		}

		.header {
			height: 260rpx;
			padding: 0 30rpx;

			.picTxt {
				height: 190rpx;

				.text {
					color: rgba(255, 255, 255, 0.8);
					font-size: 26rpx;
					font-family: 'Guildford Pro';

					.name {
						font-size: 34rpx;
						font-weight: bold;
						color: #fff;
						margin-bottom: 20rpx;
					}

				}

				.pictrue {
					width: 122rpx;
					height: 109rpx;

					image {
						width: 100%;
						height: 100%;
					}

				}
			}
		}


	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;

		.pictrue {
			width: 414rpx;
			height: 336rpx;
			margin: 78rpx auto 56rpx auto;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
	}

	.cartcolor {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}
</style>