361 lines
11 KiB
Vue
361 lines
11 KiB
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"
|
||
@click="handleBack()"
|
||
/>
|
||
<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.userName"
|
||
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>
|
||
<u--textarea class="text_17" v-model="process.remark" placeholder="请输入内容" count ></u--textarea>
|
||
<text class="text_18">图片</text>
|
||
<view class="image-wrapper_4 flex-row justify-between">
|
||
<u-upload
|
||
|
||
:fileList="displayFileList"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
multiple
|
||
:maxCount="2"
|
||
></u-upload>
|
||
<!-- <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 class="block_8 flex-col">
|
||
<view class="text-wrapper_8 flex-col" @click="saveData()">
|
||
<text class="text_19">确定</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import upload from '@/utils/upload.js'
|
||
import request from '@/utils/request.js'
|
||
import { getLocalUserInfo } from '../../utils/auth';
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
showTimePicker: false,
|
||
subjectShow: false,
|
||
ifPassColumns: [['已通过', '未通过']],
|
||
subjectColumns: [['科目一', '科目四' ]],
|
||
selectedValue: '',
|
||
subjectValue: '',
|
||
fileList: [],
|
||
imageUrl: this.$imagesUrl,
|
||
userInfo: [],
|
||
process: {
|
||
userName: null,
|
||
userId: null,
|
||
subject:null,
|
||
courseType: null,
|
||
examNum: null,
|
||
examStatus: null,
|
||
examScore: null,
|
||
remark: '',
|
||
examTime: null,
|
||
images: null,
|
||
tenantId: null,
|
||
|
||
},
|
||
constants: {}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.userInfo = getLocalUserInfo()
|
||
this.getUserOrderDetails()
|
||
},
|
||
computed: {
|
||
displayFileList() {
|
||
return this.fileList.map(item => {
|
||
// 如果 url 已经是完整路径（http/https），直接使用
|
||
if (item.url.startsWith('http')) {
|
||
return item;
|
||
}
|
||
|
||
// 否则拼接全局前缀（注意处理路径分隔符）
|
||
const prefix = this.$imagesUrl.endsWith('/') ? this.$imagesUrl : `${this.$imagesUrl}/`;
|
||
const fullUrl = item.url.startsWith('/')
|
||
? `${prefix}${item.url.slice(1)}` // 避免双斜杠（如 https://domain.com//path）
|
||
: `${prefix}${item.url}`; // 直接拼接（如 https://domain.com/path）
|
||
|
||
return {
|
||
...item,
|
||
url: fullUrl,
|
||
};
|
||
});
|
||
},
|
||
},
|
||
methods: {
|
||
handleBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
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}`;
|
||
},
|
||
|
||
// 删除图片
|
||
/* deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
if (event.name == '1') {
|
||
this.photoUrl.splice(event.index, 1)
|
||
}
|
||
if (event.name == '2') {
|
||
this.videoUr = null
|
||
}
|
||
|
||
}, */
|
||
deletePic(event) {
|
||
this.fileList.splice(event.index, 1); // 直接操作唯一的 fileList
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
let lists = [].concat(event.file); // 兼容单个和多个文件
|
||
let fileListLen = this.fileList.length;
|
||
|
||
for (let i = 0; i < lists.length; i++) {
|
||
try {
|
||
const resultUrl = await this.uploadFilePromise(lists[i].url); // 上传图片并获取 URL
|
||
let item = {
|
||
status: 'success',
|
||
url: resultUrl, // 服务器返回的 URL
|
||
};
|
||
this.fileList.splice(fileListLen, 0, item);
|
||
fileListLen++;
|
||
} catch (error) {
|
||
console.error('图片上传失败', error);
|
||
}
|
||
}
|
||
},
|
||
uploadFilePromise(filePath) {
|
||
console.log('图片地址', filePath)
|
||
return new Promise((resolve, reject) => {
|
||
upload({
|
||
url: '/app-api/small-upload/common/upload',
|
||
filePath: filePath,
|
||
}).then((res) => {
|
||
if (res.data && res.data.url) {
|
||
resolve(res.data.url); // 返回图片 URL
|
||
console.log('返回', res)
|
||
console.log('返回url', res.data.url)
|
||
} else {
|
||
reject(new Error('上传失败'));
|
||
}
|
||
}).catch(err => reject(err));
|
||
});
|
||
},
|
||
|
||
getUserOrderDetails() {
|
||
request({
|
||
url: '/app-api/small/drive/school-course-order/page',
|
||
method: 'GET',
|
||
params: {
|
||
userId: this.userId,
|
||
paymentStatus:'2',
|
||
ifEnd: 0,
|
||
},
|
||
tenantIdFlag : false
|
||
}).then(res => {
|
||
this.orderList = res.data.records;
|
||
console.log('订单信息',res.data)
|
||
|
||
});
|
||
},
|
||
|
||
saveData() {
|
||
this.process.userId = this.userInfo.id
|
||
this.process.tenantId = this.userInfo.tenantId
|
||
// 1. 拼接图片 URL
|
||
this.process.images = this.fileList?.map(item => item.url).join(',') || '';
|
||
console.log('process', this.process)
|
||
|
||
// 2. 校验必填字段（可选）
|
||
if (!this.process.userId || !this.process.subject) {
|
||
uni.showToast({ title: '用户ID和科目不能为空', icon: 'none' });
|
||
return;
|
||
}
|
||
|
||
request({
|
||
url: '/app-api/process/updateProcess',
|
||
method: 'PUT',
|
||
data: this.process,
|
||
}).then(res => {
|
||
if(res.code === 0){
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: '/newPages/examinationList/index'
|
||
});
|
||
}, 1500);
|
||
}else{
|
||
uni.showToast({ title: res.data?.message || '保存失败', icon: 'none' });
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang='scss'>
|
||
@import '../common/common.scss';
|
||
@import './assets/style/index.rpx.scss';
|
||
|
||
</style>
|