count-pass-app/subpages/driver/driverList.vue

<template>
	<view class="customer-list">
		<view class="list-wrap">
			<u-sticky bgColor="#fff" class="main-sticky">
				<view class="search-wrap">
					<view class="input-wrap">
						<view class="input">
							<u-search bgColor='#fff' :showAction='false'
								:placeholder="$t('base.common.inputPlaceholder')" @search="onGetVheicleList"
								@clear='onGetVheicleList' v-model="keyword">
							</u-search>
							<view class="search-btn" @click="onGetVheicleList">{{$t("customer_meter.search")}}</view>
						</view>
					</view>
				</view>
			</u-sticky>
			<template v-if="vehicleList.length">
				<u-swipe-action>
					<view class="business-card" v-for="(item, index) in vehicleList" :key="index">
						<u-swipe-action-item :options="options" @click="onVehicleChange($event,item)">
							<view class="business-card-info">
								<view class="info-line">
									<text class="lebel">{{item.driver}}{{' '+ (item.fleet?$t("driver.fleet")+"【"+item.fleet+"】":'')}}</text>
									<!-- <text class="info"> {{item.vehicle || ''}}【{{item.agriculturalVehicle=='1'?'农车用':'正常车'}}】</text> -->
									<text class="info"> {{item.vehicle || ''}}【{{$t("order.phone")+': '+item.phone}}】</text>
									
								</view>
								<view class="businessStatus-info">
									<u--image width="100rpx" height="88rpx"
										:src="item.fleet&&item.fleet!=''?'/subpages/static/czzn-img/state/fleet_vehicle.png':'/subpages/static/czzn-img/state/private-vehicle.png'">
									</u--image>
								</view>
							</view>
						</u-swipe-action-item>
					</view>
				</u-swipe-action>
			</template>
			<template v-else>
				<u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</template>
			<uni-fab ref="fab" horizontal="left" vertical="bottom" buttonColor="#3c9cff" @trigger="trigger"
				@fabClick="onClickRight" />
		</view>
	</view>
</template>

<script>
	import card from '../material/card.vue'
	import {
		getVehicleListByCondition,
		bindVehicle,
		deleteVehicle
	} from '../../api/driver'
	export default {
		data() {
			return {
				options: [{
						text: this.$t("base.button.delete"),
						name: "delete",
						style: {
							backgroundColor: '#f56c6c'
						}
					},
					// {
					// 	text: this.$t("base.button.update"),
					// 	name: "update",
					// 	style: {
					// 		backgroundColor: 'rgb(0, 122, 255)'
					// 	}
					// }
				],
				keyword: '',
				active: 0,
				value: '',
				vehicleList: [],
				topheight: 0,
			}
		},
		components: {
			card
		},
		onLoad() {
			this.getTopHeight()
		},
		onShow() {
			this.onGetVheicleList()
		},
		methods: {
			onVehicleChange(e, item) {
				console.log("事件、", e);
				var that = this;
				if (e.index == 0) {
					uni.showModal({
						// title: '提示',
						content: that.$t("driver.deleteVehcile"),
						showCancel: true,
						cancelText: that.$t("base.search.cancelText"),
						confirmText: that.$t("base.search.submitText"),
						success: function(r) {
							if (r.confirm) {
								deleteVehicle(item).then(res => {
									if (res.statusCode == 200) {
										if (uni.getStorageSync("currentVehicleInfo") && item.vehicle ==
											uni.getStorageSync("currentVehicleInfo").vehicle) {
											uni.removeStorageSync("currentVehicleInfo")
										}
										that.onGetVheicleList()
									}
								})
							}
						}
					})
				} else {
					if (uni.getStorageSync("currentVehicleInfo") && item.id ==
						uni.getStorageSync("currentVehicleInfo").id) {
						uni.removeStorageSync("currentVehicleInfo")
					}
					uni.navigateTo({
						url: `/subpages/driver/add?id=${item.id}`
					})
				}
			},
			onBindVehicle(item) {
				bindVehicle(item).then(res => {
					if (res.statusCode == 200) {
						this.onGetVheicleList();
					}
				})
			},
			//适配状态栏高度
			getTopHeight() {
				console.log('123');
				let that = this;
				uni.getSystemInfo({
					success: function(e) {
						//48为自定义导航栏高度，一般为44
						let topPx = e.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
						that.topheight = topPx // px转rpx，这里必须转化为rpx，不然适配失败

					},
				});
			},
			onGetVheicleList() {
				let data = {
					keyword: this.keyword || '',
				}
				getVehicleListByCondition(data).then(res => {
					if (res.statusCode == 200) {
						this.vehicleList = res.data.data
						if (this.vehicleList) {
							if (this.vehicleList.length == 1) {
								uni.setStorageSync("currentVehicleInfo", this.vehicleList[0]);
							} else {
								var vehicleInfo = this.vehicleList.filter(p => {
									return p.runFlag == 1
								});
								if (vehicleInfo) {
									uni.setStorageSync("currentVehicleInfo", vehicleInfo[0]);
								}
							}
						}
					}
				})
			},
			onClickRight() {
				uni.navigateTo({
					url: `/subpages/driver/add`
				})
			},
			changeTab(item) {
				this.active = item.index
			},
		}
	}
</script>
<style>
	/* #ifndef H5 */
	page {
		/* height: 100%; */
		background-color: #f2f2f2;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';
</style>