lanan-app/pages/Detain/Detain.vue

<!-- 历史订单列表-->

<template>
	<view class="content">
		<view style="background: #317dfa">
			<VNavigationBar title="扣车管理"></VNavigationBar>
			<view class="search-box">
				<view class="s-input">
					<uni-icons type="search" color=" #999999" size="16"></uni-icons>
					<input type="text" v-model="licenseNum" placeholder="车牌号搜索">
					<uni-icons @click="licenseNum = ''" type="clear" color="#8E8E93"></uni-icons>
				</view>
				<view class="search-button" @click="getlist()">搜索</view>
			</view>
			<view class="top-tap">
				<!-- 	<view class="tap-box" :class="{'cc' : gindex == item.id }" v-for="(item,index) in arrtap" :key="index"
          @click="getindex(item.id)">
          <view style="margin-bottom: 4px;">{{item.text}}</view>
          <view class="gang" v-if="item.id == gindex"></view>
        </view> -->
				<view class="tap-box" :class="{'cc' : gindex == 9 }" @click="getindex(9)">
					<view style="margin-bottom: 4px;">扣车中 ({{one}}) </view>
					<view class="gang" v-if="9 == gindex"></view>
				</view>
				<view class="tap-box" :class="{'cc' : gindex == 3 }" @click="getindex(3)">
					<view style="margin-bottom: 4px;">已解扣 ({{two}}) </view>
					<view class="gang" v-if="3 == gindex"></view>
				</view>
			</view>
		</view>
		<view class="dil">
			<view class="ques" v-if="orderList.length== 0 ">
				<image src="../../static/quesheng.png" mode=""></image>
			</view>
			<view class="boxa-box" v-for="(item,index) in orderList" :key="index">
				<view class="boxa" :style="{borderRadius: gindex === 3 ? '10px 10px 0 0' : '10px'}">
					<view class="car-card-line">
						<view class="car-card-line">
							<view class="car-card">车牌号</view>
							<view class="hei-title">{{item.licenseNum || ''}}</view>
						</view>
						<view class="car-card-state"
							:class="8 == gindex ? 'state-blue' : 3 == gindex ? 'state-green' : 'state-red'">
							{{ 8 == gindex ? '已还车' : 3 == gindex ? '已解扣' : '扣车中' }}</view>
					</view>
					<view class="box-bs">
						<view class="zc">车主：{{item.connectionName || ''}}</view>
						<view class="zc">联系电话：{{item.connectionPhone || ''}}</view>
					</view>
					<view class="yihang">扣车时间：{{item.createTime || ''}}</view>
					<view class="yihang">扣车地点：{{item.rescuePosition || ''}}</view>

					<view class="yihang">取车地点：{{item.kcPosition || ''}}</view>
				</view>
				<view class="janniu" v-if="item.rescueStatus < 6" @click="dialogToggle(item.id)">
            <text>解扣</text>
				</view>
			</view>
			<!-- 		<view class="boxt" v-for="(item,index) in orderList" :key="index" @click="godetail(item.id)">
				<view class="boxt-left">
					<view class="left-lan">
						<view class="">{{item.rescueTypeStr}}</view>
					</view>
					<view class="text1">{{item.kcPosition}}</view>
					<view class="text1">
						<text>姓名：</text>
						<text style="font-weight: 400;">{{item.connectionName}}</text>
					</view>
					<view class="text1">
						<text>手机号：</text>
						<text style="font-weight: 400;">{{item.connectionPhone}}</text>
					</view>
					<view class="text1">
						<text>车牌号：</text>
						<text style="color: #207efe;"> {{item.licenseNum}}</text>
					</view>
					<view class="text1">
						<text>时间：</text>
						<text style="font-weight: 400;"> {{item.rescueTime}}</text>
					</view>


				</view>
				<view class="boxt-right">

					<view class="aniiu" v-if="gindex == 3">
						还车
					</view>
				</view>
			</view> -->


			<view style="width: 100%; height: 60px;"></view>
		</view>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认解扣吗" @confirm="dialogConfirm"></uni-popup-dialog>
    </uni-popup>
		<!-- <tabBar></tabBar> -->
	</view>
</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import request from '../../utils/request';
	import VNavigationBar from 'components/VNavigationBar.vue'
	export default {
		data() {
			return {
        msgType:'',
        jkid: '',
				one: 0,
				two: 0,
				three: 0,
				gindex: 9,
				orderList: [],
				licenseNum: '',
				rescueStatus: '',
				total: 0,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				arrtap: [{
						text: '扣车中',
						id: 9
					},
					{
						text: '已解扣',
						id: 3
					}
				],
				arrbox: []
			}
		},
		components: {
			tabBar,
			VNavigationBar
		},
		onLoad(option) {
			if (option.id) {
				this.gindex = option.id
			}
			this.getthree()
			this.getlist()
		},
		onReachBottom() {
			console.log('执行了');
			if (this.orderList.length >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++

				this.getlist()
			}
		},
		methods: {
      dialogToggle(id) {
        this.jkid = id
        this.$refs.alertDialog.open()
      },
      dialogConfirm(){
        console.log('ok');
        this.jiekou(this.jkid)
        this.getlist()
        this.$refs.alertDialog.close()

      },
      jiekou(id){
        let data = {
          rescueId:id,
        }
        request({
          url: '/app/rescueInfo/openKc',
          method: 'post',
          params:data
        }).then((res)=>{
          console.log('jie',res);
          if(res.code == 200 ){
            this.getlist()
          }
        })
      },
			getthree() {

				request({
					url: '/app/rescueInfo/getKcList',
					method: 'get',
					params: {
						connectionName: '',
						rescueStatus: 9,
						pageSize: 10,
						pageNum: 1,
					}
				}).then((res) => {
					if (res.code == 200) {
						this.one = res.total || 0
					}
				})
				request({
					url: '/app/rescueInfo/getKcList',
					method: 'get',
					params: {
						connectionName: '',
						rescueStatus: 3,
						pageSize: 10,
						pageNum: 1,
					}
				}).then((res) => {
					if (res.code == 200) {
						this.two = res.total || 0
					}

				})
			},
			godetail(id) {

			},
			getjiji(id) {
				request({
					url: '/app/rescueInfo/hcOpen',
					method: 'post',
					params: {
						rescueId: id
					}
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: "操作成功"
						})
						this.orderList = []
						this.getlist()
						this.getthree()
					}
				})
			},
			getlist() {
				let data = {
					connectionName: this.licenseNum,
					rescueStatus: this.gindex,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getKcList',
					method: 'get',
					params: data
				}).then((res) => {
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						} else {
							this.orderList = res.rows
						}
						this.totalPages = res.total
					}
				})
			},
			getback() {
				uni.navigateBack({
					delta: 1,
				})
			},
			getindex(index) {
				this.orderList = []
				this.gindex = index
				this.getlist()
			},
		}

	}
</script>

<style scoped lang="scss">
	.car-card-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.car-card {
		font-size: 15px;
		font-weight: bold;
		width: 70px;
		height: 28px;
		line-height: 28px;
		border-radius: 10px 0 10px 0;
		background: #edf3fe;
		color: #4487fa;
		text-align: center;
	}

	.car-card-state {
		font-size: 15px;
		width: 70px;
		height: 28px;
		line-height: 28px;
		text-align: center;
	}

	.state-blue {
		background: #edf3fe;
		color: #4487fa;
	}

	.state-red {
		background: #fbeced;
		color: #d63338;
	}

	.state-green {
		background: #edf7ec;
		color: #48be3a;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #f6f7fc;
		box-sizing: border-box;
		//padding-top: 45px;
	}

	.top-icon {
		box-sizing: border-box;
		width: 100%;

		padding: 5px 14px;
		background: #317dfa;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dil {
		background-color: #f6f7fc;
		box-sizing: border-box;
		padding: 15px 12px;
		height: calc(100% - 155px);
		overflow-y: auto;
	}

	.h-text {
		font-size: 14px;
		font-weight: 400;
		color: #ffffff;
	}

	.search-box {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.search-button {
		width: 15%;
		height: 30px;
		font-size: 14px;
		margin: 10px;
		line-height: 30px;
		text-align: center;
		color: #ffffff;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 15px;
	}

	.s-input {
		margin-left: 10px;
		width: 78%;
		height: 56rpx;
		background: #fff;
		border-radius: 50px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0px 10px;

		input {
			margin-left: 5px;
			flex: 1;
			width: 0;
			font-size: 14px;
			color: #999999;

		}
	}

	.top-tap {
		width: 100%;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 5px;
	}

	.tap-box {
		width: 50%;
		font-size: 15px;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
	}

	.gang {
		width: 80%;
		height: 3px;
		margin: 1px auto;
		border-radius: 12px;
		background: white;
	}

	.d-box {
		width: 100%;
		// height: 100px;
		background: white;
		border-radius: 10px;
		margin-bottom: 15px;
		box-sizing: border-box;
		padding: 8px;
		position: relative;
		overflow: hidden;
		padding-top: 30px;
	}

	.d-y-top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 20px;
		border-radius: 0px 0px 6px 0px;
		background-color: #339DFF;
		color: white;
		font-size: 12px;
		text-align: center;
	}

	.t-right {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.bq {
			width: 55px;
			height: 20px;
			background: #FFD7D7;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #FF4C4C;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.bq2 {
			width: 55px;
			height: 20px;
			background: #CDE2FF;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 400;
			color: #3289FF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.d-left {
		margin-left: 10px;
		display: flex;
		font-size: 16px;
		font-weight: bold;
		color: #666666;
		margin-bottom: 10px;
	}

	.t-left {
		margin-left: 10px;
		display: flex;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
		margin-bottom: 5px;
	}

	.x-left {
		margin-left: 10px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		font-weight: 400;
		color: #666666;
	}

	.cc {
		font-weight: bold;
	}

	.hong {
		font-size: 16px;
		font-weight: 400;
		color: #F85021;
	}

	.ques {
		margin: 0px auto;
		margin-top: 40px;
		width: 80%;

		image {
			width: 100%;
		}
	}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 80%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 20%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -110px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

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

	.aniiu {
		width: 55px;
		height: 55px;
		border-radius: 50%;
		background: #3289FF;
		color: white;
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: bold;
		justify-content: center;
	}

	.boxa-box {
		box-sizing: border-box;
		width: 95%;
		margin: 8px auto;
	}

	.boxa {
		background: #FFFFFF;
		padding: 15px;
		box-shadow: 0px 0px 8px -5px #888888;
	}

	.box-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10px auto;
	}

	.zc {
		font-size: 16px;
		font-weight: 400;
		color: #363636
	}

	.hei-title {
		margin-left: 10px;
		font-size: 18px;
		font-weight: 600;
		color: #363636;
	}

	.yihang {
		font-size: 16px;
		font-weight: 400;
		color: #363636;
		margin-top: 10px;
	}

	.right-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10px;
	}

	.janniu {
		width: 100%;
		height: 45px;
		background: #317cfa;
		border-radius: 0 0 10px 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 16px;
	}

	.ques {
		width: 90%;
		margin: 100px auto;

	}
</style>