mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 13:26:45 +08:00
修改组件位置
This commit is contained in:
zhangsir
209
src/components/courserecommended/RecommendedCourse.vue
Normal file
209
src/components/courserecommended/RecommendedCourse.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<!-- 推荐课程抽屉 -->
|
||||
<a-drawer class="course-drawer" :visible="visible" width="80%" :title="title" @close="closeDrawer" :maskClosable="false">
|
||||
<div class="inp">
|
||||
<span class="red">* </span>
|
||||
<span>推荐标题：</span>
|
||||
<a-input v-model:value="state.sellName" show-count :maxlength="20" />
|
||||
</div>
|
||||
<div class="inp">
|
||||
<span class="red">* </span>
|
||||
<span>推荐组织：</span>
|
||||
<a-input v-model:value="state.sellForm"/>
|
||||
</div>
|
||||
<div class="inp inp2">
|
||||
<span class="red">* </span>
|
||||
<span>推荐理由：</span>
|
||||
<a-input v-model:value="state.sellIntro" show-count :maxlength="100" />
|
||||
</div>
|
||||
<div class="imgupload">
|
||||
<span class="red">* </span>
|
||||
<span>课程包封面图：</span>
|
||||
<div>
|
||||
<a-upload
|
||||
v-model:file-list="fileList"
|
||||
|
||||
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||
list-type="picture-card"
|
||||
@preview="handlePreview"
|
||||
>
|
||||
<div v-if="fileList.length < 1">
|
||||
<plus-outlined />
|
||||
<div style="margin-top: 8px">
|
||||
<img src="../../assets/images/taskpage/upload.png" alt="">
|
||||
<span>将文件拖到此处，或 点击上传
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</a-upload>
|
||||
<a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
|
||||
<img alt="example" style="width: 100%" :src="previewImage" />
|
||||
</a-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button1">
|
||||
<button class="btn2" @click="closeDrawer">取消</button>
|
||||
<a-button class="btn2" @click="handleNew">下一步</a-button>
|
||||
</div>
|
||||
<AddCourse v-model:visible="newNext" :title="添加在线课程"></AddCourse>
|
||||
</a-drawer>
|
||||
|
||||
<!-- 下一步添加学员 -->
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, computed, nextTick } from 'vue';
|
||||
import { Form, message } from "ant-design-vue";
|
||||
import { isTopList, downloadErrorRecords, UploadProps } from '@/api/case'
|
||||
import AddCourse from "@/components/courserecommended/AddCourse";
|
||||
import useDownload from '@/hooks/useDownload'
|
||||
const state = reactive({
|
||||
sellName:"", //推荐标题
|
||||
sellIntro:"", //推荐组织
|
||||
sellForm:"", //推荐理由
|
||||
})
|
||||
const newNext = ref(false);
|
||||
const handleNew = () => {
|
||||
if(!state.sellName){
|
||||
message.destroy();
|
||||
return message.warning("请输入推荐标题");
|
||||
}
|
||||
if(!state.sellIntro){
|
||||
message.destroy();
|
||||
return message.warning("请输入推荐组织");
|
||||
}
|
||||
if(!state.sellForm){
|
||||
message.destroy();
|
||||
return message.warning("请输入推荐理由");
|
||||
}
|
||||
newNext.value = true;
|
||||
};
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
// 取消抽屉
|
||||
const closeDrawer = async () => {
|
||||
state.sellName = ""
|
||||
state.sellIntro = ""
|
||||
state.sellForm = ""
|
||||
// resetFields()
|
||||
emit('update:visible', false)
|
||||
// await nextTick()
|
||||
// getTopList()
|
||||
}
|
||||
|
||||
function getBase64(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result);
|
||||
reader.onerror = error => reject(error);
|
||||
});
|
||||
}
|
||||
const previewVisible = ref(false);
|
||||
const previewImage = ref('');
|
||||
const previewTitle = ref('');
|
||||
|
||||
const fileList = ref([
|
||||
|
||||
]);
|
||||
|
||||
const handleCancel = () => {
|
||||
previewVisible.value = false;
|
||||
previewTitle.value = '';
|
||||
};
|
||||
const handlePreview = async (file) => {
|
||||
if (!file.url && !file.preview) {
|
||||
file.preview = (await getBase64(file.originFileObj));
|
||||
}
|
||||
previewImage.value = file.url || file.preview;
|
||||
previewVisible.value = true;
|
||||
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
|
||||
};
|
||||
|
||||
defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '推荐课程'
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.course-drawer{
|
||||
margin-bottom: 80px;
|
||||
.red{
|
||||
color: #d9001b;
|
||||
}
|
||||
.inp{
|
||||
display: flex;
|
||||
margin-left: 134px;
|
||||
margin-bottom: 55px;
|
||||
.ant-input{
|
||||
width: 510px;
|
||||
height: 31px;
|
||||
}
|
||||
.ant-input-affix-wrapper{
|
||||
width: 510px;
|
||||
height: 31px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.inp2 .ant-input-affix-wrapper{
|
||||
height: 80px;
|
||||
}
|
||||
.imgupload{
|
||||
margin-left: 134px;
|
||||
margin-bottom: 55px;
|
||||
:deep(.ant-upload.ant-upload-select-picture-card){
|
||||
width: 413px;
|
||||
height: 227px;
|
||||
margin-left: 80px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
:deep(.ant-upload-list-picture-card .ant-upload-list-item){
|
||||
width: 413px;
|
||||
height: 227px;
|
||||
margin-left: 80px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
.button1 {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
|
||||
.btn2 {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
padding: 2px 2px 2px 2px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #409eff;
|
||||
background-color: #409eff;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-left: 23px;
|
||||
&:hover{
|
||||
background-color: #66b1ff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user