eaXing_app/pagesCenter/motorCade/motorCade.vue

<template>
	<view class="section">
		<view class=" padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>{{$t('index.Fleet_binding')}}</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item :required="true" :label="$t('index.Name_fleet')" label-width="150">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-tb-xs inputTop" @click="getName">
						{{motorName ? motorName : $t('index.select_team') }}
						<u-picker :show="show" :columns="listArr" keyName="label" @confirm="confirm" @cancel="cancel"
							:immediateChange='true'> </u-picker>
						<!-- <u-input border="none" :required="true" v-model.trim="licensePlate" placeholder="请输入车牌号"
							inputAlign='right'>
						</u-input> -->
					</view>
				</view>
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item :label="$t('index.In_charge')" disabled label-width="150">

							</u-form-item>
						</u-form>

					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="principal" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>

				<view class="flex justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item :label="$t('index.Contact_Information')" label-width="150">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="phone" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>
			</view>
		</view>
		<view class="confirm">
			<u-button @click="bound" shape='circle' type="primary">{{$t('index.Commit_binding')}}</u-button>
		</view>
		<u-modal :show="boundShow" :showCancelButton="true" @confirm="boundConfirm" :content="content"
			@cancel="boundCancel" :confirmText="$t('index.ok')">

		</u-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";
	import { useI18n } from 'vue-i18n'//zz
	 const { t } = useI18n()//zz
	const boundShow = ref(false)
	const content = ref()
	const listArr = reactive([])
	const show = ref(false)
	const motorName = ref()
	const motorId = ref()
	const principal = ref()
	const phone = ref()
	const initialName = ref()
	const heartInf = reactive([])


	onLoad(() => {
		getSelect()
	})
	onShow(() => {

	})
	watch(motorName, (newValue, oldValue) => {
		// console.log(motorName, 'motorName', heartInf[0]);
		if (oldValue != newValue && heartInf[0] != undefined) {
			let heart = heartInf[0].filter(item => {
				return item.teamName == newValue
			})
			principal.value = heart[0].principal
			phone.value = heart[0].contactWay
			motorId.value = heart[0].id
		}

	});
	const getList = () => { //初次进来请求的数据
		uni.$request({
			url: config.wxUrl_pay + "app-rest/account/getTeamAccount"
		}).then(res => {
			if (res.data.code == 200) {
				motorName.value = res.data.data.teamVO.teamName
				initialName.value = res.data.data.teamVO.teamName
				principal.value = res.data.data.teamVO.principal
				phone.value = res.data.data.teamVO.contactWay
			}
		}).catch(err => {
			uni.$u.toast(err)
		})
	}
	const confirm = (e) => {
		motorName.value = e.value[0].label
		motorId.value = e.value[0].value
		show.value = false
	}
	const cancel = () => {
		show.value = false
	}
	const getName = () => {
		show.value = true
	}
	const getSelect = () => {
		uni.$request({
			url: config.baseUrl + 'api/CarTeam/GetTeamList',
			method: 'POST'
		}).then(res => {
			let listCopy = JSON.parse(JSON.stringify(res.data.data))
			heartInf.push(listCopy)
			getList() //列表
			let arr = []
			listCopy.forEach(item => {
				arr.push({
					value: item.id,
					label: item.teamName
				})
			})
			listArr.push(arr)
		})
	}
	const bound = () => {
		if (initialName.value != motorName.value) {
			boundShow.value = true
			content.value = t('index.Are_you_sure')
		} else {
			uni.$u.toast(t('index.bound_select_fleet'));
		}
	}
	const boundConfirm = () => {
		boundShow.value = false
		let data = {
			"loginNo": uni.getStorageSync("userInfo").loginNo,
			"teamId": motorId.value,
			"bind": true
		}
		uni.$request({
			url: config.baseUrl + 'api/AppCustomer/BindTeam',
			method: 'POST',
			data: data
		}).then(res => {
			if (res.data.isSuccess) {
				//res.data.msg
				uni.$u.toast(t('index.Changed_fleet_information_successfully'));
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)
			} else {
				uni.$u.toast(t('index.Binding_failure'));
			}
		}).catch(err => {
			uni.$u.toast(t('index.Binding_failure'));
		})
	}
	const boundCancel = () => {
		boundShow.value = false
	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
		position: relative;
	}

	.confirm {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	}

	.textBlue {
		color: #4C91FF;
	}
</style>