jiangximiniprogramSchool/pages/recordEntry/operate/mySchedule/comp/mySchedulePopup.vue

<template>
	<view class="box">
		<view class="item">
			<view class="lab">我的场地</view>
			<view class="val" style="display: flex;" @click="showSite=true">
				<mySelect :value="form.siteName" placeholder="请选择您的场地"/>
				<u-icon name="arrow-down" :size="12" :color="'#ADADAD'" style="margin-left: 12rpx;"></u-icon>
			</view>
		</view>
		<view class="item">
			<view class="lab">科目类型</view>
			<view class="val">
				<myRadio :radioData="radioData1" :value="form.subject" @changeRadio="(val)=>{form.subject=val}"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">我的教练车</view>
			<view class="val">
				<myRadio :radioData="radioData2" :value="form.carNumber"  @changeRadio="(val)=>{form.carNumber=val}"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">可约人数</view>
			<view class="val">
				<myRadio :radioData="radioData3" :value="form.appointmentSumCount"  @changeRadio="(val)=>{form.appointmentSumCount=val}"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">开放范围</view>
			<view class="val">
				<myRadio :radioData="radioData4" :value="form.openRange"  @changeRadio="(val)=>{form.openRange=val}"/>
			</view>
		</view>
		<view class="btn_row">
			<view class="btnBorder btn" @click="confirmPopup(0)">取消</view>
			<view class="btnBg btn"  @click="confirmPopup(1)">确认</view>
		</view>
		
		<u-picker :show="showSite" :columns="siteColumns" keyName="name" @confirm="changeSite" @cancel="showSite=false" ></u-picker>
	</view>
</template>

<script>
	import { trainingSiteList } from '@/config/api.js'
	export default {
		data() {
			return {
				showSite: false,
				siteColumns: [],
				// scheduleClassCreateByTime
				radioData1: [
					{name: '不限', id: 0},
					{name: '科目二', id: 2},
					{name: '科目三', id: 3},
				],
				// 0：不限；2：科目二；3：科目三
				radioData2: [
					{name: '浙A66666学', id: '浙A66666学'},
					{name: '浙A66667学', id: '浙A66667学'},
				],
				radioData3: [
					{name: '1人', id: 1},
					{name: '2人', id: 2},
					{name: '3人', id: 3},
					{name: '4人', id: 4},
				],
				radioData4: [
					{name: '我的学员', id: 0},
					{name: '本校学员', id: 1}
				],//开放范围：0：自己的学员；1：绑定的驾校的学员
				form: {
					siteName: '',
					openRange: 0,
					appointmentSumCount: 1,
					carNumber: '浙A66666学',
					subject: 0
				}
			}
		},
		created() {
			this.trainingSiteListFn()
		},
		methods: {
			confirmPopup(val) {
				if(val==1&&!this.form.siteName) return this.$u.toast('请选择场地')
				this.$emit('confirmClass', val, this.form)
			},
			// 选择训练场地
			changeSite(val) {
				let item = val.value[0]
				this.form.address = item.address
				this.form.seq = item.seq
				this.form.area = item.area
				this.form.siteName = item.name
				this.form.siteId = item.id
				this.showSite = false
			},
			// 获取训练场地
			async trainingSiteListFn() {
				let obj = {
					pageNo: 1,
					pageSize: 100,
					schoolId: this.vuex_userInfo.user.schoolId
				}
				const {data: res} = await trainingSiteList(obj)
				this.siteColumns = [ res ]
				console.log(res)
			},
			changeRadio(e,val) {
				console.log(e)
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 28rpx;
		width: 638rpx;
	  .item {
	    .lab {
			font-size: 30rpx;
			margin-bottom: 38rpx;
	    }
	
	    .val {
			margin-bottom: 56rpx;
	     
	    }
	  }
	
	  .btn_row {
		  display: flex;
		  justify-content: space-between;
		  padding: 0 30rpx;
	    .btnBorder {
			
	    }
		.btn {width: 47%;}
	    .btnBg {
	
	    }
	  }
	}
</style>