oil-station/gasStation-uni/pagesMy/fleetInfo/index.vue

<template>
	<view class="content">
		<view class="container">
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>车队名称</view>
				<view class="dis">
					<input v-model="fleetInfo.fleetName" style="text-align: right;" placeholder="请输入"></input>
				</view>
			</view>
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>开户门店</view>
				<view class="dis" @click="show1=!show1">
					<text>{{storeName || '暂未选择'}}</text>
					<u-icon name="arrow-right" size="14"></u-icon>
				</view>
			</view>
			<view class="box-hang" @click="show = !show">
				<view class=""><span style="color: red;">*</span>开户类型</view>
				<view class="dis">
					<text>{{fleetInfo.cardType}}</text>
				</view>
			</view>
			<view class="box-hang" style="margin-top: 10px;">
				<view class=""><span style="color: red;">*</span>是否启用</view>
				<view class="dis">
					<u-switch v-model="fleetInfo.status" activeValue='qy' inactiveValue='jy' activeColor="#6DD400"
						inactiveColor="rgb(230, 230, 230)"></u-switch>
				</view>
			</view>
			<view class="box-hang">
				<view class=""><span style="color: red;">*</span>管理员</view>
				<view class="dis">
					<text>{{fleetInfo.fleetLeader}}</text>
					<!-- <image style="width: 24px;height: 24px;margin-left: 5px;" src="@/static/my/fleetRemove.png"></image> -->
				</view>
			</view>
			<!-- <view class="box-end">
				<image style="width: 15px;height: 15px;margin-right: 5px;margin-top: 6px;"
					src="@/static/my/fleetAdd.png"></image>
				<text>添加管理员</text>
			</view> -->

			<view class="but-sub" @click="submitFrom()">保存</view>

			<u-picker :show="show" :columns="columns" @cancel="cancel" @confirm="confirm" ></u-picker>
			<u-picker :show="show1" :columns="columns1" @cancel="cancel1" @confirm="confirm1"
				keyName="name"></u-picker>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request';
	export default {
		data() {
			return {
				title: '',
				List: [],
				pageNo: 1,
				pageSize: 10,
				totalPage: '',
				value: "xxxxxx",
				value1: true,
				show: false,
				columns: [
					['储值卡', '囤油卡']
				],
				show1: false,
				columns1: [],
				// 员工列表信息
				staffList: [],
				fleetInfo: {
					cardType: '储值卡',
					status: 'qy'
				},
				storeName: '',
				storeList: [],
				user: {},
				fleetId:''
			}
		},
		onPullDownRefresh() {
			//下拉刷新

		},
		onReachBottom() {
			// 触底加载
			if (this.pageNo >= this.totalPage) {} else {
				this.pageNo++

			}
		},
		onLoad(e) {
			if (e.fleetId){
				this.fleetId = e.fleetId
				this.getFleetInfo()
			}else{
				this.getUser()
				this.getStoreList(uni.getStorageSync('storeId'))
			}
		},
		onShow() {
			
		},
		components: {

		},
		methods: {
			getFleetInfo() {
				request({
					url: '/fleetInfo/' + this.fleetId,
					method: 'get',
				}).then(res => {
					if (res.code == 200) {
						this.fleetInfo = res.data
						this.getStoreList(res.data.storeId)
					}
				})
			},
			submitFrom(){
				if (!this.fleetInfo.fleetName){
					uni.showToast({
						title:"请输入车队名称",
						icon:'none'
					})
					return;
				}
				if (this.fleetInfo.id){
					request({
						url: '/fleetInfo',
						method: 'put',
						data:this.fleetInfo
					}).then(res => {
						uni.navigateTo({
							url:'/pagesHome/cardDetails/index?type=fleet&fleetId='+res.data
						})
					})
				}else{
					request({
						url: 'fleetInfo/addFleetInfo',
						method: 'post',
						data:this.fleetInfo
					}).then(res => {
						uni.navigateTo({
							url:'/pagesHome/cardDetails/index?type=fleet&fleetId='+res.data
						})
					})
				}
				
			},
			// 查询当前登录用户信息
			getUser() {
				request({
					url: 'business/userManager/user/getUser',
					method: 'get',
				}).then(res => {
					if (res.data) {
						this.user = res.data
						this.fleetInfo.fleetLeader = res.data.name
						this.fleetInfo.mobile = res.data.mobile
						this.fleetInfo.userId = res.data.id
					}
				})
			},
			getStoreList(storeId) {
				request({
					url: '/business/storeInformation/store/selectByStoreId',
					method: 'get',
					params: {
						chainStoreId: uni.getStorageSync("chainStoreId"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.storeList = res.data
						this.storeList.forEach(item => {
							if (item.id == storeId) {
								this.storeName = item.name
								this.fleetInfo.storeId = storeId
							}
						})
						this.columns1 = []
						this.columns1.push(this.storeList)
					}
				})
			},
			cancel1() {
				this.show1 = false
			},
			confirm1(e) {
				this.storeName = e.value[0].name
				this.fleetInfo.storeId = e.value[0].id
				this.show1 = false
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.fleetInfo.cardType = e.value[0]
				this.show = false
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		box-sizing: border-box;
		padding: 0px 15px;
		padding-top: 40px;
		z-index: 99999;

		.my-icons {
			width: 20px;

		}

		position: fixed;
		top: 0px;
	}

	.box-hang {
		background-color: white;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px 15px;
		border-bottom: 1px solid #f4f5f6;
	}

	.dis {
		color: #a69999;
	}

	.box-end {
		text-align: center;
		margin-top: 10px;
	}

	.but-sub {
		width: 305px;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		background-color: #FF9655;
		color: white;
		border-radius: 50px;
		text-align: center;
		position: absolute;
		bottom: 40px;
		left: 11%;
	}
</style>