wangluohuoyun-app/pages/mine/fleet/bindingCarCaptain.vue

//绑定车队长
<template>
	<view class="center">
		<view class="fleetInfo">
			<view class="fleetInfo_name" v-if="fleetInfo.carCaptainName">{{fleetInfo.carCaptainName}}({{fleetInfo.carCaptainAccountNumber}})</view>
			<view class="fleetInfo_name" v-else>队长名称</view>
			<view class="fleetInfo_phone">{{fleetInfo.status?fleetInfo.status:"未绑定"}}</view>
		</view>
		<view class="btn_css" v-if="fleetInfo.status != '待确认'">
			<view class="btn_item" v-if="!fleetInfo.status||fleetInfo.status=='已拒绝'|| fleetInfo.status=='未绑定'">
				<u-button type="primary" text="去绑定" @click="operation"></u-button>
			</view>
			<view class="btn_item" v-else>
				<u-button type="primary" text="解绑" @click="leave"></u-button>
			</view>
			
		</view>
		<view class="red_char">
			注：绑定车队长后，运费将自动结算到车队长账户，不再对司机结算，如需对司机本人结算请先解绑车队长。
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="tipsShow" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#F5BA3C' @confirm="$u.throttle(confirmClick, 1000)" @close="cancelClick" @cancel="cancelClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				fleetInfo:{},
				tipsShow:false,
				alertTitle:"确定解绑车队长？"
			}
		},
		onLoad() {
			this.getInfo()
		},
		onShow() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			operation(){
				uni.$u.route('/pages/mine/fleet/addBinding');
				// uni.$u.route('/pages/mine/fleet/addBinding', {
				// 	data: JSON.stringify(this.dataDetails),
				// });
			},
			leave(){
				this.tipsShow = true
			},
			cancelClick(){
				this.tipsShow = false
			},
			confirmClick(){
				let that = this
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.tipsShow = false
				this.$request.baseRequest('post', '/hyBindCarCaptainInfo/api/unbinding', {id:this.fleetInfo.id}).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							that.getInfo()
							this.$refs.uToast.show({
								type: 'success',
								message: "解绑成功！",
								complete() {}
							})
						} else {
							uni.hideLoading()
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
			getInfo(){
				this.$request.baseRequest('get', '/hyBindCarCaptainInfo/getBindCarCaptain', {
					commonId:this.userInfo.id
				}).then(res => {
						if (res.code == 200) {
							if(res.data){
								this.fleetInfo = res.data
							}
						} else {
							uni.$u.toast(res.message);
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.$u.toast(res.message);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center{
		padding: 20rpx 30rpx;
		
	}
	.fleetInfo{
		display: flex;
		width: 100%;
		margin-top: 30rpx;
		.fleetInfo_name{
			width: 50%;
		}
		.fleetInfo_phone{
			width: 50%;
			text-align: right;
		}
	}
	.btn_css{
		display: flex;
		margin-top: 30rpx;
		.btn_item{
			width: 120rpx;
			margin-right: 20rpx;
		}
	}
	.red_char{
		color: #f05458;
		font-size: 28rpx;
		margin-top: 30rpx;
	}
</style>