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

<template>
	<view class="order-list">
		<view class="list-wrap">
			<u-sticky bgColor="#fff" class="main-sticky">
				<view class="search-wrap">
					<view class="input-wrap">
						<view class="input search">
							<u-search bgColor='#fff' :showAction='false' :placeholder="$t('base.common.inputPlaceholder')"
								@search="searchList" @clear='searchList' v-model="form.keyword">
							</u-search>
							<view class="sx-btn" @click="searchList">{{ $t("customer_meter.search") }}</view>
						</view>
					</view>
				</view>
				<view class="tabs-box">
					<u-tabs lineWidth="40" :list="vehicleTypeList" :current="vehicleTypeActive"
						@change="onVehicleTypeChange" lineColor="#3275F5"
						:itemStyle="{ 'height': '90rpx', 'padding': '0 32rpx' }">
					</u-tabs>
				</view>
			</u-sticky>
			<template v-if="driverList.length">
				<u-swipe-action :autoClose="false">
					<view v-for="item in driverList" :key="item.id" class="business-card">
						<u-swipe-action-item :name="item.name" :options="item.vehicleType == 1 ? fleetOptions : vehicleOptions"
							@click="onVehicleChange($event, item)" :disabled="item.vehicleType == 1 && vehicleTypeActive == 0">
							<view class="business-card-info">
								<view class="info-line" v-if="item.vehicleType != 1">
									<text class="lebel">{{ item.driver || '' }} {{ item.vehicle || '' }} </text>
									<text class="info">【{{$t("order.phone")+': '+item.phone}}】</text>
								</view>
								<view class="info-line" v-if="item.vehicleType == 1">
									<text class="lebel">{{ item.driver || '' }} {{ item.vehicle || '' }}</text>
									<text class="info">{{ $t("driver.fleet") }} {{ item.fleetName || '' }}</text>
								</view>
								<view class="businessStatus-info">
									<u--image width="100rpx" height="88rpx"
										:src="item.vehicleType == 1 ? '/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>
				<view class="data-empty">
					<image src="/subpages/static/czzn-img/empty.png" mode="widthFix" style="width:100%" />
					<text class="empty-text">{{$t('base.common.noData')}}</text>
				</view>
			</template>
			<uni-fab ref="fab" horizontal="left" vertical="bottom" buttonColor="#3c9cff" @trigger="trigger"
				@fabClick="onClickRight" />
		</view>
	</view>
</template>

<script>
import {
	getDealerVehicleList,
	UpdateVehicleStatus,
	deleteVehicle,
} from '../../api/dealer'
export default {
	data() {
		return {
			vehicleOptions: [

				{
					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)'
					}
				},
			],
			fleetOptions: [{
				text: this.$t("base.button.delete"),
				name: "delete",
				style: {
					backgroundColor: '#f56c6c'
				}
			}],
			keyword: '',
			driverList: [],
			form: {
				keyword: "",
				vehicleType: "0",
				appUserType: "3"
			},
			vehicleTypeActive: 0,
			vehicleTypeList: [{
				name: this.$t('driver.vehicle'),
				vehicleTypeFlag: '0',
			},
			// {
			// 	name: this.$t('driver.fleet'),
			// 	vehicleTypeFlag: '1',
			// }
			],
		}
	},
	onShow() {
		this.getDriverList()
	},
	methods: {
		onVehicleChange(e, item) {
			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) {
									that.getDriverList()
								}
							})
						}
					}
				})
			} else {
				let data = {
					vehicleType: that.vehicleTypeActive,
					id: item.id,
					driver: item.driver,
					phone: item.phone != "" && item.phone != null ? item.phone : "",
					vehicle: item.vehicle,
					axle: item.axle,
					idCard:item.idCard || '',
					idCardImage:item.idCardImage || ''
				}
				let queryString = Object.keys(data).map(key => key + '=' + data[key]).join('&');
				uni.navigateTo({
					url: `/subpages/driver/dealerAddVehicle?${queryString}`
				})
			}
		},
		//跳转添加司机表单
		onClickRight() {
			uni.navigateTo({
				url: '/subpages/driver/dealerAddVehicle?vehicleType=' + this.vehicleTypeActive
			})
		},
		//搜索列表
		searchList() {
			this.getDriverList()
		},
		getDriverList() {
			var that = this;
			getDealerVehicleList(that.form).then(res => {
				if (res.statusCode == 200) {
					that.driverList = res.data.data
					console.log("获取到司机列表", that.driverList);
				}
			})
		},

		onVehicleTypeChange(item) {
			this.vehicleTypeActive = item.vehicleTypeFlag
			this.form.vehicleType = item.vehicleTypeFlag
			this.getDriverList()
		},
	}
}
</script>
<style>
/* #ifndef H5 */
page {
	/* height: 100%; */
	background-color: #f2f2f2;
}

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