|
|
@@ -240,6 +240,8 @@ let course = reactive({
|
|
|
introduction: "", // 課程簡介
|
|
|
organizer: "", // 主辦單位
|
|
|
cover_img_file: "", // 課程圖片
|
|
|
+ work_imgs: "", // 作品集圖片
|
|
|
+ origin_work_imgs: "", // 原有作品集圖片(api回傳)
|
|
|
group_id: 2, // 學群編號(技藝)
|
|
|
group_sort: "", // 學群細分
|
|
|
special_class_list_name: "",
|
|
|
@@ -252,9 +254,18 @@ let course = reactive({
|
|
|
|
|
|
let classNameId = ref(null);
|
|
|
let courseLoading = ref(false);
|
|
|
-let coverImgLoading = ref(false);
|
|
|
let enCode = ref(null);
|
|
|
|
|
|
+// 封面圖片
|
|
|
+let coverImg = ref("");
|
|
|
+let coverImgUrl = ref("");
|
|
|
+let coverImgLoading = ref(false);
|
|
|
+
|
|
|
+// 作品集圖片
|
|
|
+let portfolioImg = ref([]);
|
|
|
+let portfolioImgUrl = ref([]);
|
|
|
+let portfolioImgLoading = ref(false);
|
|
|
+
|
|
|
// 取得課程
|
|
|
async function getCourse(id) {
|
|
|
classNameId.value = id;
|
|
|
@@ -268,13 +279,11 @@ async function getCourse(id) {
|
|
|
`${store.apiUrl}/api/get_class_name?class_name_id=${id}&access_token=${token}`
|
|
|
);
|
|
|
|
|
|
- // console.log('課程資料',response);
|
|
|
courses.list = response.data.classes;
|
|
|
console.log("課程資料", courses.list);
|
|
|
let coursesData = response.data.classes[0];
|
|
|
enCode.value = coursesData.encode;
|
|
|
console.log("coursesData", coursesData);
|
|
|
- // classNameId.value = coursesData.class_name_id;
|
|
|
|
|
|
// 存入課程資料
|
|
|
for (const key in coursesData) {
|
|
|
@@ -290,6 +299,21 @@ async function getCourse(id) {
|
|
|
coverImgLoading.value = false;
|
|
|
}, 1500);
|
|
|
}
|
|
|
+
|
|
|
+ if (coursesData["work_imgs"] !== "") {
|
|
|
+ course.origin_work_imgs = coursesData["work_imgs"];
|
|
|
+ portfolioImgLoading.value = true;
|
|
|
+ let workImgs = JSON.parse(coursesData["work_imgs"].replace(/'/g, '"'));
|
|
|
+
|
|
|
+ portfolioImgUrl.value = [];
|
|
|
+ workImgs.map((item) => {
|
|
|
+ portfolioImgUrl.value.push(`${store.imgUrl}/${item}`);
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ portfolioImgLoading.value = false;
|
|
|
+ }, 1500);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
console.log("最終 course", course);
|
|
|
@@ -310,13 +334,26 @@ async function saveCourse() {
|
|
|
delete course.access_token;
|
|
|
|
|
|
course["class_name_id"] = classNameId.value;
|
|
|
+
|
|
|
+ // 封面圖片
|
|
|
if (coverImg.value) {
|
|
|
course["cover_img_file"] = coverImg.value;
|
|
|
}
|
|
|
|
|
|
+ // 作品集圖片
|
|
|
+ if (portfolioImg.value.length) {
|
|
|
+ course.work_imgs = portfolioImg.value;
|
|
|
+ }
|
|
|
+
|
|
|
const formData = new FormData();
|
|
|
for (const key in course) {
|
|
|
- formData.append(key, course[key]);
|
|
|
+ if (key === "work_imgs") {
|
|
|
+ course.work_imgs.forEach((file) => {
|
|
|
+ formData.append("work_imgs", file);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData.append(key, course[key]);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
@@ -337,19 +374,20 @@ async function saveCourse() {
|
|
|
|
|
|
// 上傳圖片 Input
|
|
|
const coverImgRef = ref(null);
|
|
|
+const portfolioImgRef = ref(null);
|
|
|
|
|
|
const fileInputClick = (ref) => {
|
|
|
if (ref === "cover") {
|
|
|
if (coverImgRef.value) {
|
|
|
coverImgRef.value[0].click();
|
|
|
}
|
|
|
+ } else if (ref === "portfolio") {
|
|
|
+ if (portfolioImgRef.value) {
|
|
|
+ portfolioImgRef.value[0].click();
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-// 封面圖片
|
|
|
-let coverImg = ref("");
|
|
|
-let coverImgUrl = ref("");
|
|
|
-
|
|
|
const handleCoverImg = (event) => {
|
|
|
const file = event.target.files[0];
|
|
|
if (file) {
|
|
|
@@ -358,6 +396,25 @@ const handleCoverImg = (event) => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+const handlePortfolioImg = (files) => {
|
|
|
+ console.log("portfolioImg.value", portfolioImg.value);
|
|
|
+ console.log("files", files);
|
|
|
+ for (let index = 0; index < files.length; index++) {
|
|
|
+ const file = files[index];
|
|
|
+ console.log("file", file);
|
|
|
+ let url = URL.createObjectURL(file);
|
|
|
+ portfolioImgUrl.value.push(url);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+watch(portfolioImg, (newFiles) => {
|
|
|
+ console.log("newFiles", newFiles);
|
|
|
+ if (newFiles.length > 0) {
|
|
|
+ handlePortfolioImg(newFiles);
|
|
|
+ }
|
|
|
+ console.log("portfolioImg", portfolioImg.value);
|
|
|
+});
|
|
|
+
|
|
|
// 取得所有課堂
|
|
|
async function getAllSession(id) {
|
|
|
console.log("getAllSession id", id);
|
|
|
@@ -1678,6 +1735,61 @@ async function closeClass(id) {
|
|
|
/>
|
|
|
</div>
|
|
|
</v-col>
|
|
|
+
|
|
|
+ <v-col cols="12" class="me-auto">
|
|
|
+ <v-label class="d-block">
|
|
|
+ <p class="d-flex">
|
|
|
+ {{ t("form.portfolio_image") }}
|
|
|
+ <span class="mark">*</span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <v-file-input
|
|
|
+ multiple
|
|
|
+ v-model="portfolioImg"
|
|
|
+ id="portfolioImgRef"
|
|
|
+ ref="portfolioImgRef"
|
|
|
+ label="File input"
|
|
|
+ variant="outlined"
|
|
|
+ :placeholder="t('form.choose_image')"
|
|
|
+ @change="handlePortfolioImg"
|
|
|
+ style="display: none"
|
|
|
+ ></v-file-input>
|
|
|
+ </v-label>
|
|
|
+
|
|
|
+ <v-btn
|
|
|
+ @click="fileInputClick('portfolio')"
|
|
|
+ color="purple"
|
|
|
+ class="my-5"
|
|
|
+ >
|
|
|
+ {{ t("form.choose_image") }}
|
|
|
+ </v-btn>
|
|
|
+
|
|
|
+ <div class="step-01 image-preview">
|
|
|
+ <div
|
|
|
+ class="d-flex justify-center"
|
|
|
+ v-if="portfolioImgLoading"
|
|
|
+ >
|
|
|
+ <v-progress-circular
|
|
|
+ color="grey-lighten-4"
|
|
|
+ indeterminate
|
|
|
+ ></v-progress-circular>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-row
|
|
|
+ v-if="
|
|
|
+ portfolioImgUrl !== '' &&
|
|
|
+ !portfolioImgLoading
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <v-col
|
|
|
+ cols="6"
|
|
|
+ v-for="img in portfolioImgUrl"
|
|
|
+ >
|
|
|
+ <img :src="img" alt="上傳圖片預覽" />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
</v-row>
|
|
|
</v-card-text>
|
|
|
<v-card-actions class="d-flex justify-center">
|
