Skip to content

M
mt-education-mobile
Commit c4a41410 authored by 刘岩's avatar 刘岩
Browse files
Options

我的资料增加文件图片 

部分新建培训代码
parent f71dbb5b
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 29 deletions
src/api/test.js
View file @ c4a41410
......@@ -50,7 +50,8 @@ const api = {
deleteCourseDiscuss: '/bdiscuss/delete', // 删除评论
getMyInfo: '/user/queryMyInfo', // 获取当前登陆人信息 我的智学 个人中心
learning: '/BLesson/learning', // 判断是正在学该课程 643
queryCourse: '/BCourse/queryCourse' // 301 查询课程分类
queryCourse: '/BCourse/queryCourse', // 301 查询课程分类
imgUpload: process.env.VUE_APP_BASE_API2 + '/api/oss/v1/file/upload' // 美腾方面图片上传接口
}
export default api
......@@ -352,6 +353,14 @@ export const post = {
method: 'post',
params: params
})
},
// 新建培训 图片上传
postImgUpload: (params) => {
return axios({
url: api.imgUpload,
method: 'post',
params: params
})
}
}
......
src/assets/style/resetui.less
View file @ c4a41410
......@@ -270,6 +270,9 @@
color: #cccccc;
}
}
.form-data-field:active{
background: #ffffff !important;
}
.describe-field{
display: block;
.van-field__control{
......
src/components/MyInformation/labelMyInformation.vue
View file @ c4a41410
......@@ -111,6 +111,18 @@ export default {
case 'zip':
this.imgName = require('@assets/images/MyInformation/ZIP.png')
break
case 'docx':
this.imgName = require('@assets/images/MyInformation/DOCX.png')
break
case 'pptx':
this.imgName = require('@assets/images/MyInformation/PPTX.png')
break
case 'xlsx':
this.imgName = require('@assets/images/MyInformation/XLSX.png')
break
case 'rar':
this.imgName = require('@assets/images/MyInformation/RAR.png')
break
default:
this.imgName = require('@assets/images/MyInformation/未知.png')
break
......
src/components/addTrain/hSelector.vue
View file @ c4a41410
......@@ -122,6 +122,7 @@ export default {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: none;
}
.h-selector-container {
position: absolute;
......@@ -129,6 +130,7 @@ export default {
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
}
.h-selector-layer {
......
src/views/addTrain/index.vue
View file @ c4a41410
......@@ -19,7 +19,7 @@
v-model="formData.lessonName"
placeholder="请输入标题"
required
label-width="80px"
label-width="70px"
error-message=""
:border="false"
/>
......@@ -28,7 +28,7 @@
label="分类"
v-model="courseName"
placeholder="请选择分类"
label-width="80px"
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
......@@ -40,7 +40,7 @@
label="标签"
v-model="labelsName"
placeholder="请选择标签"
label-width="80px"
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
......@@ -53,7 +53,7 @@
v-model="formData.courseDescription"
type="textarea"
placeholder="在这里输入内容"
label-width="80px"
label-width="70px"
error-message=""
:border="false"
/>
......@@ -61,16 +61,18 @@
class="form-data-field last-field"
label="封面"
placeholder="建议尺寸205*116"
label-width="80px"
label-width="70px"
error-message=""
:readonly="true"
:border="false"
/>
<van-uploader
class="uploader"
v-model="formData.defaultUrl"
v-model="defaultUrl"
:max-count="1"
preview-size="102px"
:after-read="afterRead"
image-fit="contain"
/>
</div>
<p class="title">
......@@ -80,57 +82,93 @@
<van-field
class="form-data-field"
label="报名时间"
v-model="formData.applyStartDate"
placeholder="请选择时间"
label-width="80px"
required
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
:border="false"
/>
>
<template slot="input">
<input
class="input-date"
v-model="formData.applyStartDate"
placeholder="开始时间"
@click="DateClick('applyStartDate')"
readonly
>
<input
class="input-date"
v-model="formData.applyOverDate"
placeholder="结束时间"
@click="DateClick('applyOverDate')"
readonly
>
</template>
</van-field>
<van-field
class="form-data-field"
label="培训时间"
v-model="formData.trainStartDate"
placeholder="请选择时间"
label-width="80px"
required
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
:border="false"
/>
>
<template slot="input">
<input
class="input-date"
v-model="formData.trainStartDate"
placeholder="开始时间"
@click="DateClick('trainStartDate')"
readonly
>
<input
class="input-date"
v-model="formData.trainOverDate"
placeholder="结束时间"
@click="DateClick('trainOverDate')"
readonly
>
</template>
</van-field>
<van-field
class="form-data-field"
label="培训地点"
v-model="formData.trainAddress"
placeholder="请选择地点"
label-width="80px"
placeholder="请输入地点"
required
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
:border="false"
/>
<van-field
class="form-data-field"
label="人数上限"
v-model="formData.maxApplyPerson"
type="number"
placeholder="0即不能限制人数"
label-width="80px"
required
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
:border="false"
@input="numPerson"
/>
<van-field
class="form-data-field last-field"
label="签到时间"
v-model="formData.trainSignTime"
v-model="trainSignText"
placeholder="开始前30分钟可签到"
label-width="80px"
required
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
:border="false"
@click="signinClick"
/>
</div>
<p class="title">
......@@ -141,7 +179,7 @@
class="form-data-field last-field"
label="培训附件"
placeholder="已添加0个文件"
label-width="80px"
label-width="70px"
error-message=""
:readonly="true"
:border="false"
......@@ -164,7 +202,7 @@
class="form-data-field last-field"
label="可见范围"
v-model="formData.trainAddress"
label-width="80px"
label-width="70px"
error-message=""
:is-link="true"
:readonly="true"
......@@ -197,15 +235,48 @@
@arrowBack="arrowBack"
@complete="complete"
/>
<!--弹出层 日期 时间-->
<popup
v-model="datePopupIsShow"
position="bottom"
:style="{ height: '40%' }"
>
<van-datetime-picker
v-if="datePopupIsShow"
v-model="currentDate"
type="datetime"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
@confirm="dateConfirmClick"
@cancel="datePopupIsShow = false"
/>
</popup>
<!--签到时间 弹出层-->
<popup
v-model="signinShow"
position="bottom"
class="popup-sign-box"
>
<p class="sign-in-time" @click="choiceClick('5分钟')">5分钟</p>
<p class="sign-in-time" @click="choiceClick('10分钟')">10分钟</p>
<p class="sign-in-time" @click="choiceClick('15分钟')">15分钟</p>
<p class="sign-in-time" @click="choiceClick('20分钟')">20分钟</p>
<p class="sign-in-time" @click="choiceClick('25分钟')">25分钟</p>
<p class="sign-in-time" @click="choiceClick('30分钟')">30分钟</p>
<p class="sign-in-time cancel" @click="signinShow = false">取消</p>
</popup>
</nav-bar-view>
</template>
<script>
import NavBarView from '@layouts/NavBarView'
import {Field, Uploader, Popup} from 'vant'
import {Field, Uploader, Popup, DatetimePicker} from 'vant'
import {get, post} from '@/api/test'
import Linkage from '@/components/addTrain/linkage'
import LabelTrain from '@/components/addTrain/labelTrain'
import moment from 'moment'
import 'moment/locale/zh-cn'
export default {
name: 'AddTrain',
......@@ -215,7 +286,8 @@ export default {
vanUploader: Uploader,
Popup,
Linkage,
LabelTrain
LabelTrain,
vanDatetimePicker: DatetimePicker
},
data() {
return {
......@@ -227,18 +299,28 @@ export default {
courseId: '', // 分类ID
labels: '', // 标签 标签集合，使用','分隔
courseDescription: '', // 课程描述
defaultUrl: [], // 课程封面
defaultUrl: '', // 课程封面
applyStartDate: '', // 报名开始时间
applyOverDate: '', // 报名结束时间
trainStartDate: '', // 培训开始时间
trainOverDate: '', // 培训结束时间
trainAddress: '', // 培训地址
maxApplyPerson: '', // 最大报名人数
maxApplyPerson: 0, // 最大报名人数
trainSignTime: '' // 培训签到时间（培训开始前 分钟数）
},
courseName: '', // 分类名称
labelsName: '', // 标签名称
defaultUrl: [], // 课程封面
trainSignText: '', // 签到时间
isShow: false, // 分类弹窗
classification: [], // 分类数据
labelsShow: false // 标签页显示隐藏
labelsShow: false, // 标签页显示隐藏
datePopupIsShow: false, // 时间弹窗 显示隐藏
minDate: null, // 最小时间
maxDate: null, // 最大时间
currentDate: null, // 默认时间
type: '', // 当前所点击的时间 input
signinShow: false // 签到时间弹窗 显示隐藏
}
},
methods: {
......@@ -284,6 +366,131 @@ export default {
})
this.labelsName = labelsName.join(',')
this.formData.labels = labels.join(',')
},
// 选择图片成功后 方法
afterRead(fileBase) {
// 此时可以自行将文件上传至服务器
var arr = fileBase.content.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
const file = new File([u8arr], 'fileName', {type: mime})
// this.imgUpload(file)
console.log(file)
// 图片上传 请求
post.postImgUpload({
file: file,
bucket: 2,
path: 2
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
},
// 图片上传 请求
// async imgUpload(file) {
// console.log(file)
// const res = await post.postImgUpload({
// file: file,
// bucket: 2,
// path: 2
// })
// console.log(res)
// }
// 点击时间
// 点击 日期 时间 input
DateClick(type) {
this.type = type
this.minDate = new Date()
this.maxDate = new Date(2099, 1, 1)
this.currentDate = new Date()
// 判断是否有回显时间
if (this.formData[type] !== '') {
this.currentDate = new Date(this.formData[type])
}
switch (this.type) {
// 判断报名开始时间不得晚于报名结束时间
case 'applyStartDate':
if (this.formData.applyOverDate !== '') {
this.maxDate = new Date(this.formData.applyOverDate)
// this.currentDate = new Date(this.formData.applyStartDate)
}
break
// 判断报名结束时间不得早于报名开始时间
case 'applyOverDate':
if (this.formData.applyStartDate !== '') {
this.minDate = new Date(this.formData.applyStartDate)
}
break
// 判断培训开始时间不得晚于培训结束时间
case 'trainStartDate':
if (this.formData.trainOverDate !== '') {
this.maxDate = new Date(this.formData.trainOverDate)
}
break
// 判断培训结束时间不得早于培训开始时间
case 'trainOverDate':
if (this.formData.trainStartDate !== '') {
this.minDate = new Date(this.formData.trainStartDate)
}
break
}
this.datePopupIsShow = true
},
// 日期时间格式化
formatter(type, value) {
if (type === 'year') {
return `${value}年`
} else if (type === 'month') {
return `${value}月`
} else if (type === 'day') {
return `${value}日`
} else if (type === 'hour') {
return `${value}时`
} else if (type === 'minute') {
return `${value}分`
}
return value
},
// 点击 日期 时间 完成 按钮 事件
dateConfirmClick() {
this.datePopupIsShow = false
switch (this.type) {
case 'applyStartDate':
this.formData.applyStartDate = moment(this.currentDate.getTime()).format('YYYY/MM/DD HH:mm')
break
case 'applyOverDate':
this.formData.applyOverDate = moment(this.currentDate.getTime()).format('YYYY/MM/DD HH:mm')
break
case 'trainStartDate':
this.formData.trainStartDate = moment(this.currentDate.getTime()).format('YYYY/MM/DD HH:mm')
break
case 'trainOverDate':
this.formData.trainOverDate = moment(this.currentDate.getTime()).format('YYYY/MM/DD HH:mm')
break
}
},
// 验证人数不能小于0
numPerson(val) {
if (val < 0) {
this.formData.maxApplyPerson = 0
}
},
// 点击签到时间 事件
signinClick() {
this.signinShow = true
},
// 选择签到时间 事件
choiceClick(val) {
console.log(val)
this.trainSignText = val
this.formData.trainSignTime = val.split('分')[0]
this.signinShow = false
}
},
mounted() {
......@@ -307,6 +514,14 @@ export default {
}
.form-content{
background: #ffffff;
.form-data-field{
.input-date{
width: 120px;
display: inline-block;
font-size: 13px;
border: none;
}
}
}
.submit-btn{
width: 300px;
......@@ -321,5 +536,21 @@ export default {
border: none;
}
}
.popup-sign-box{
background: #f6f6f6;
.sign-in-time{
width: 100%;
height: 49px;
line-height: 49px;
margin: 0;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #e7e7e7;
background: #ffffff;
}
.cancel{
margin-top: 8px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment