driverSchool/newPages/examinationAdd/index.vue

<template>
  <view class="page flex-col">
    <view class="group_1 flex-row">
      
      
    </view>
    <view class="group_2 flex-row">
      <image
        class="label_1"
        referrerpolicy="no-referrer"
        src="/static/lanhu_kaoshijieguo/FigmaDDSSlicePNGacf527a62cbe7351c6472edd8f5b2814.png"
      />
      <text class="text_1">考试结果</text>
      
    </view>
    <view class="group_4 flex-col">
      <view class="block_1 flex-row justify-between" @click="show = true">
        <text class="text_19">是否通过</text>
        <view class="image-text_1 flex-row justify-between">
          <!-- <text class="text-group_2">已通过</text> -->
		  
		  	<view>
		  		<u-picker v-model="process.examStatus"  :show="show" :columns="ifPassColumns" title="是否通过" @confirm="ifPassOnConfirm" @cancel="show = false">
				</u-picker>
				<text class="text-group_2">{{ selectedValue || '请选择' }}</text>
		  		<!-- <u-button @click="show = true"><text class="text-group_2">{{ selectedValue || '请选择' }}</text></u-button> -->
		  	</view>
		  
          <!-- <image
            class="thumbnail_2"
            referrerpolicy="no-referrer"
            src="/static/lanhu_kaoshijieguo/FigmaDDSSlicePNGe9aade9ef56a9cabc28f2f1b0555105b.png"
          /> -->
        </view>
      </view>
      <view class="text-wrapper_7 flex-row justify-between">
        <text class="text_4">分数</text>
		<view class="text_5_1 ">
		<u--input
		    placeholder="请输入分数"
		    border="none"
		    v-model="process.examScore"
			maxlength="3"
			inputAlign="right"
		  >分</u--input>
        </view>
      </view>
      <view class="text-wrapper_8 flex-row justify-between">
        <text class="text_20">时间</text>
		<view>
			<u-datetime-picker
			  :show="showTimePicker"
			  v-model="process.examTime"
			  mode="datetime"
			  @confirm="onConfirmExamTime"
			  @cancel="showTimePicker = false"
			></u-datetime-picker>
			<text class="text_3" @click="showTimePicker = true">{{ process.examTime ? formatDate(process.examTime) : '选择时间' }}</text>
			
				<!-- <u-button @click="showTimePicker = true">打开</u-button> -->
			</view>
        
		
      </view>
      <view class="text-wrapper_9 flex-row justify-between">
        <text class="text_6">姓名</text>
        <view class="text_5_1 ">
        <u--input
            placeholder="请输入姓名"
            border="none"
            v-model="process.name"
        	maxlength="3"
        	inputAlign="right"
          >分</u--input>
        </view>
      </view>
      <view class="text-wrapper_10 flex-row justify-between">
        <text class="text_8">考试类型</text>
        <text class="text_9">C1</text>
      </view>
      <view class="text-wrapper_11 flex-row justify-between" @click="subjectShow = true">
        <text class="text_10">考试科目</text>
		<view>
			<u-picker v-model="process.subject"  :show="subjectShow" :columns="subjectColumns" title="科目" @confirm="subjectOnConfirm" @cancel="subjectShow = false">
			</u-picker>
			<text class="text-group_2">{{ subjectValue || '请选择科目' }}</text>
			<!-- <u-button @click="show = true"><text class="text-group_2">{{ selectedValue || '请选择' }}</text></u-button> -->
		</view>
        <!-- <text class="text_11">科目二</text> -->
      </view>
      <!-- <view class="text-wrapper_12 flex-row justify-between">
        <text class="text_12">考试地址</text>
        <text class="text_13">山东省济南市历下区</text>
      </view>
      <view class="text-wrapper_13 flex-row justify-between">
        <text class="text_14">交通方式</text>
        <text class="text_15">公交车</text>
      </view> -->
    </view>
    <view class="group_5 flex-col">
      <text class="text_16">备注</text>
      <text class="text_17">
        备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息备注信息
      </text>
      <text class="text_18">图片</text>
      <view class="image-wrapper_4 flex-row justify-between">
        <image
          class="image_3"
          referrerpolicy="no-referrer"
          src="/static/lanhu_kaoshijieguo/FigmaDDSSlicePNG531b2664a25a7d42a43f00faa060acb1.png"
        />
        <image
          class="image_4"
          referrerpolicy="no-referrer"
          src="/static/lanhu_kaoshijieguo/FigmaDDSSlicePNG66b1c863f069a58fb4ff203ed443e5ad.png"
        />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
		show: false,
		showTimePicker: false,
		subjectShow: false,
		ifPassColumns: [['已通过', '未通过']],
		subjectColumns: [['科目一', '科目四' ]],
		selectedValue: '', 
		subjectValue: '',
		process: {
			name: null,
			userId: null,
			subject:null,
			courseType: null,
			examNum: null,
			examStatus: null,
			examScore: null,
			remark: null,
			examTime: null,
			images: null,
			
		},
      constants: {}
    };
  },
  methods: {
	  ifPassOnConfirm(value) {
	      console.log('选中的值:', value);
	      
	      const statusMap = {
	        '已通过': 1,
	        '未通过': 0
	      };
	  
	      // 更新数据
	      this.process.examStatus = statusMap[value.value[0]]; // 存储数值\
		  console.log('value[0]', value.value[0])
	      this.selectedValue = value.value[0]; // 存储文字，供页面显示
	      this.show = false; // 关闭弹窗
	  
	      console.log('examStatus:', this.process.examStatus);
		 console.log('process', this.process)
	    },
		
		subjectOnConfirm(value) {
		    console.log('选中的值:', value);
		    
		    const statusMap = {
		      '科目一': 1,
		      '科目四': 4
		    };
		
		    // 更新数据
		    this.process.subject = statusMap[value.value[0]]; // 存储数值\
				  console.log('value[0]', value.value[0])
		    this.subjectValue = value.value[0]; // 存储文字，供页面显示
		    this.subjectShow = false; // 关闭弹窗
		
		    console.log('subject:', this.process.subject);
				 console.log('process', this.process)
		  },
		  
		onConfirmExamTime(value) {
		    console.log("选中的时间:", value);
		    this.process.examTime = value; // 保存到 process.examTime
		    this.showTimePicker = false; // 关闭时间选择器
		  },
		  // 格式化时间戳的方法
		      formatDate(timestamp) {
		        const date = new Date(timestamp);
		        const year = date.getFullYear();
		        const month = String(date.getMonth() + 1).padStart(2, '0');
		        const day = String(date.getDate()).padStart(2, '0');
		        const hours = String(date.getHours()).padStart(2, '0');
		        const minutes = String(date.getMinutes()).padStart(2, '0');
		        return `${year}-${month}-${day} ${hours}:${minutes}`;
		      },

		
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';

</style>