12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747 |
- <script setup>
- import { ref, reactive, watch, computed, onMounted } from "vue";
- import { useMainStore } from "@/stores/store";
- // import { Loader } from "@googlemaps/js-api-loader";
- import VueDatePicker from "@vuepic/vue-datepicker";
- import "@vuepic/vue-datepicker/dist/main.css";
- import axios from "axios";
- import moment from "moment";
- import Navbar from "@/components/Navbar.vue";
- const store = useMainStore();
- const token = store.token;
- console.log("token", token);
- let step = ref(1);
- let stepTitle = ref("");
- let stepDescription = ref("");
- let loading = ref(false);
- const computedTitle = computed(() => {
- switch (step.value) {
- case 1:
- stepTitle.value = "Step1 選擇據點";
- stepDescription.value = "創建課程之前,請先選擇您的據點(上課地址)";
- break;
- case 2:
- stepTitle.value = "Step2 選擇工藝教育者";
- stepDescription.value =
- "開始打造屬於您的工藝履歷,讓學徒對你印象深刻吧!";
- break;
- case 3:
- stepTitle.value = "Step3 創建課程";
- stepDescription.value =
- "完整且清楚的課程建立,是連接工藝老師與學徒的重要橋梁!";
- break;
- case 4:
- stepTitle.value = "恭喜您完成創建課程!";
- stepDescription.value = "";
- break;
- }
- return { stepTitle: stepTitle.value, stepDescription: stepDescription.value };
- });
- let date = reactive({
- start_date: "", // 起始日期
- start_time: "", // 起始時間
- end_date: "", // 結束日期
- end_time: "", // 結束時間
- registration_start_date: "", // 報名起始日期
- registration_start_time: "", // 報名起始時間
- registration_end_date: "", // 報名截止日期
- registration_end_time: "", // 報名截止時間
- });
- const breadcrumbs = reactive([
- {
- title: "首頁",
- disabled: false,
- href: "/",
- },
- {
- title: "我要開課",
- disabled: false,
- href: "/setup-courses",
- },
- {
- title: "創建課程",
- disabled: true,
- },
- ]);
- // // Google Map
- // const states = reactive({
- // google: null,
- // map: null,
- // markers: null,
- // });
- // const initMap = async () => {
- // const loader = new Loader({
- // apiKey: "AIzaSyClxiB7zcQDyGaB1r3Ww_VQG950AtjVoAk",
- // version: "weekly",
- // libraries: ["places"],
- // language: "zh-TW",
- // });
- // states.google = await loader.load();
- // states.map = new states.google.maps.Map(document.getElementById("map"), {
- // center: { lat: 25.0425, lng: 121.5468 },
- // zoom: 11,
- // mapTypeControl: false,
- // fullscreenControl: false,
- // });
- // };
- // onMounted(async () => {
- // await initMap();
- // });
- let location = reactive({
- location_name: "",
- Lng: "",
- Lat: "",
- address: "",
- school_introduction: "",
- email: "",
- phone: "",
- access_token: token,
- });
- let locationId = ref("");
- // async function insertSchool() {
- // // 若已選擇據點則不需新增
- // if (schoolId.value !== "") {
- // locationId.value = schoolId.value;
- // return;
- // }
- // const formData = new FormData();
- // for (const key in location) {
- // formData.append(key, location[key]);
- // }
- // try {
- // const response = await axios.post(
- // "https://cmm.ai:8088/api/insert_school",
- // formData
- // );
- // locationId.value = response.data.location_id;
- // console.log("新增據點 response", response);
- // } catch (error) {
- // console.error(error);
- // }
- // }
- let resume = reactive({
- teacher_name: "", // 老師姓名
- work_type: "", // 工作性質
- experience: "", // 教學經驗
- expertise: "", // 專長工藝技能
- license: "", // 工藝相關證照
- media: "", // 社群媒體
- files: [], // 作品集
- introduction: "", // 老師介紹
- });
- let resumeList = ref([]);
- let resumeDialog = ref(false);
- // 新增工藝教育者履歷
- async function insertResume() {
- const validationResult = await resumeForm.value.validate();
- // 驗證表單
- if (validationResult.valid) {
- resumeList.value.push(JSON.parse(JSON.stringify(resume)));
- alert("新增成功!");
- resumeDialog.value = false;
- // 清空表單的值
- for (const key in resume) {
- if (resume.hasOwnProperty(key)) {
- resume[key] = "";
- }
- }
- } else {
- return;
- }
- }
- // let oldFile = "";
- // async function insertUserResume() {
- // if (portfolioImg.value.length) {
- // resume.files = portfolioImg.value;
- // }
- // const formData = new FormData();
- // for (const key in resume) {
- // if (key === "files") {
- // resume.files.forEach((file) => {
- // formData.append("files", file);
- // });
- // } else {
- // formData.append(key, resume[key]);
- // }
- // }
- // let token = store.token;
- // try {
- // const response = await axios.post(
- // `https://cmm.ai:8088/api/input_user_resume?access_token=${token}&old_file=${oldFile}`,
- // formData
- // );
- // console.log("新增履歷 response", response);
- // } catch (error) {
- // console.error(error);
- // }
- // }
- // 新增課程
- let course = reactive({
- name: "", // 課程名稱
- location_id: "", // 據點編號
- category: "", // 工藝類別
- introduction: "", // 課程簡介
- syllabus: "", // 課程章節(課綱)
- organizer: "", // 主辦單位
- cover_img_file: "", // 課程圖片
- group_id: 2, // 學群編號(技藝)
- group_sort: "", // 學群細分
- special_class_list_name: "",
- recommend: 0, // 是否推薦
- is_inner: 1, // 內課課程
- is_check: 0, // 審核結果
- teachers_resume: "", // 指派工藝教育者
- access_token: token,
- });
- // let syllabusData = reactive({
- // title: "",
- // content: "",
- // });
- let section = ref("");
- let sectionList = ref([]);
- function addSection() {
- sectionList.value.push(section.value);
- section.value = "";
- }
- watch(location, (data) => {
- course.organizer = data.location_name; // 據點名稱 = 主辦單位
- });
- let classNameId = ref("");
- async function insertClassName() {
- course.location_id = locationId.value;
- course.organizer = locationData.value.location_name;
- course.teachers_resume = JSON.stringify(assignTeachers.list);
- course.syllabus = JSON.stringify(sectionList.value);
- console.log("insertClassName", course);
- if (coverImg.value !== "") {
- course.cover_img_file = coverImg.value;
- }
- const formData = new FormData();
- for (const key in course) {
- formData.append(key, course[key]);
- }
- try {
- const response = await axios.post(
- "https://cmm.ai:8088/api/insert_class_name",
- formData
- );
- console.log("新增課程 response", response);
- classNameId.value = response.data.new_class_name_id;
- } catch (error) {
- console.error(error);
- }
- }
- // 新增場次
- let event = reactive({
- name_id: "", // 課程名稱編號(需先新增課程取得Id)
- event: "", // 場次名稱
- start_time: "", // 課程起始日
- end_time: "", // 課程結束日
- contact: "", // 聯絡資訊
- lecturer: "", // 課程講師
- location: "", // 教室名稱
- content: "", // 課程內容
- URL: "", // 外部連結
- people: "不拘", // 對象
- fee_method: "", // 課程價格
- fee_payment: "", // 收費方式
- registration_way: "", // 報名方式
- registration_start: "", // 報名起始日
- registration_end: "", // 報名截止日
- number_limit: "", // 課程名額
- remark: "", // 備註
- ATM_address: "", // 匯款帳號(銀行代碼+帳號)
- access_token: token,
- });
- let eventType = ref(""); // 課程類型
- let isOneDay = ref(true); // 是否為一日課程
- watch(eventType, (val) => {
- if (val === "週期課程(例:2023/10/1~2023/10/30 每週一三上課)") {
- isOneDay.value = false;
- } else {
- isOneDay.value = true;
- }
- });
- // 若為一日課程則起始日期 = 結束日期
- watch(date, (val) => {
- if (isOneDay.value && val.start_date) {
- date.end_date = val.start_date;
- }
- });
- let dateReminder = ref(false);
- let eventData = reactive({
- list: [],
- });
- let isRemit = ref(false); // 是否顯示匯款資訊欄位
- let bankCode = ref(""); // 銀行代碼
- let bankAccount = ref(""); // 銀行帳號
- watch(event, (data) => {
- if (data.fee_payment === "匯款") {
- isRemit.value = true;
- } else {
- isRemit.value = false;
- }
- });
- let eventFieldValidate = ref(false); // 驗證場次欄位
- function addEventData() {
- // insertSession(); // 測試
- console.log("event", event);
- let isSame = store.isSameDay(date.start_date, date.end_date);
- // 起始日期不可等於結束日期(週期課程)
- if (!isOneDay.value && isSame) {
- dateReminder.value = true;
- return;
- }
- dateReminder.value = false;
- eventForm.value.validate();
- // 檢查日期欄位
- for (const key in date) {
- if (!date[key]) {
- return;
- }
- }
- // 檢查必填欄位
- if (
- event.event === "" || // 場次名稱
- event.contact === "" || // 聯絡資訊
- event.lecturer === "" || // 課程講師
- event.people === "" || // 對象
- event.fee_method === "" || // 課程價格
- event.fee_payment === "" || // 收費方式
- event.number_limit === "" || // 課程名額
- eventType.value === "" // 課程類型
- ) {
- return;
- } else {
- eventFieldValidate.value = true;
- }
- // event.location = location.address;
- // console.log("location.address", location.address);
- console.log("event.location", event.location);
- // 處理時間格式
- event.start_time = store.mergeAndFormatDateTime(
- date.start_date,
- date.start_time
- );
- event.end_time = store.mergeAndFormatDateTime(date.end_date, date.end_time);
- event.registration_start = store.mergeAndFormatDateTime(
- date.registration_start_date,
- date.registration_start_time
- );
- event.registration_end = store.mergeAndFormatDateTime(
- date.registration_end_date,
- date.registration_end_time
- );
- if (isRemit && bankCode.value !== "" && bankAccount.value !== "") {
- event.ATM_address = `(${bankCode.value})-${bankAccount.value}`;
- }
- eventData.list.push(JSON.parse(JSON.stringify(event)));
- sessionsDialog.value = false;
- }
- function convertDateFormat(inputDateStr) {
- const inputDate = new Date(inputDateStr);
- const formattedDate = inputDate.toISOString();
- return formattedDate;
- }
- let eventId = ref(null);
- async function insertEvent() {
- console.log("insertEvent", event);
- if (classNameId.value !== "") {
- event.name_id = classNameId.value;
- }
- event.start_time = convertDateFormat(event.start_time);
- event.end_time = convertDateFormat(event.end_time);
- event.registration_start = convertDateFormat(event.registration_start);
- event.registration_end = convertDateFormat(event.registration_end);
- console.log("檢查日期格式", event);
- const formData = new FormData();
- for (const key in event) {
- formData.append(key, event[key]);
- }
- try {
- const response = await axios.post(
- "https://cmm.ai:8088/api/insert_event",
- formData
- );
- eventId.value = response.data.class_id;
- console.log("eventId.value", eventId.value);
- console.log("新增場次 response", response);
- } catch (error) {
- console.error(error);
- }
- }
- let errorEventField = ref(false);
- // 創建課程
- async function create() {
- console.log("course", course);
- loading.value = true;
- // 檢查必填欄位
- courseForm.value.validate();
- console.log("course", course);
- if (
- course.name === "" ||
- course.category === "" ||
- course.introduction === "" ||
- coverImg.value === ""
- ) {
- loading.value = false;
- errorField.value = true;
- setTimeout(() => {
- errorField.value = false;
- }, 3000);
- return;
- }
- // 課程時間(場次)尚未填寫完整
- if (!eventFieldValidate.value) {
- loading.value = false;
- errorEventField.value = true;
- setTimeout(() => {
- errorEventField.value = false;
- }, 3000);
- return;
- }
- locationId.value = assignLocationId.value; // 存據點 ID
- try {
- // await insertSchool(); // 新增據點
- // await insertUserResume(); // 新增履歷
- await insertClassName(); // 新增課程
- await insertEvent(); // 新增場次
- await insertSession(); // 新增課堂
- loading.value = false;
- step.value++;
- } catch (error) {
- console.error(error);
- loading.value = false;
- }
- }
- const getCoordinates = async () => {
- const geocoder = new states.google.maps.Geocoder();
- geocoder.geocode({ address: location.address }, (results, status) => {
- if (status === states.google.maps.GeocoderStatus.OK) {
- location.Lat = results[0].geometry.location.lat();
- location.Lng = results[0].geometry.location.lng();
- }
- // 將地圖中心設為取得的經緯度,並調整縮放等級
- // states.map.setCenter({ lat: location.Lat, lng: location.Lng });
- // states.map.setZoom(15);
- // 設定地址圖標
- // const marker = new google.maps.Marker({
- // position: { lat: location.Lat, lng: location.Lng },
- // map: states.map,
- // title: location.address,
- // icon: store.getImageUrl("map-icon/icon_house05.png"),
- // });
- });
- };
- // 上傳圖片 Input
- const portfolioImgRef = ref(null);
- const coverImgRef = ref(null);
- const fileInputClick = (ref) => {
- if (ref === "portfolio") {
- portfolioImgRef.value.click();
- } else if (ref === "cover") {
- coverImgRef.value.click();
- }
- };
- // 作品集圖片
- let portfolioImg = ref([]);
- let portfolioImgList = ref([]);
- const handlePortfolioImg = (files) => {
- console.log("files", files);
- // portfolioImgList.value = []; // 清空陣列
- for (let index = 0; index < files.length; index++) {
- const file = files[index];
- console.log("file", file);
- let url = URL.createObjectURL(file);
- portfolioImgList.value.push(url);
- console.log("portfolioImgList", portfolioImgList.value);
- }
- };
- watch(portfolioImg, (newFiles) => {
- if (newFiles.length > 0) {
- handlePortfolioImg(newFiles);
- }
- });
- // 封面圖片
- let coverImg = ref("");
- let coverImgUrl = ref("");
- const handleCoverImg = (event) => {
- const file = event.target.files[0];
- console.log("選擇檔案", file);
- if (file) {
- coverImg.value = file;
- coverImgUrl.value = URL.createObjectURL(file); // 設定圖片預覽 URL
- }
- };
- let sessionsDialog = ref(false);
- const requiredRule = (value) => !!value || "此欄位為必填";
- const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
- const selectedWeek = ref([0, 0, 0, 0, 0, 0, 0]); // 選擇星期
- const toggleSelected = (index) => {
- if (selectedWeek.value[index]) {
- selectedWeek.value[index] = 0;
- } else {
- selectedWeek.value[index] = 1;
- }
- };
- let session = reactive({
- class_event_id: null,
- week_day_str: "",
- start_week_time: "",
- end_week_time: "",
- });
- let sessionTime = reactive({
- start_week_time: [],
- end_week_time: [],
- });
- let sessionStartTimeList = ref(["", "", "", "", "", "", ""]);
- let sessionEndTimeList = ref(["", "", "", "", "", "", ""]);
- // 新增課堂
- async function insertSession() {
- console.log("isOneDay.value", isOneDay.value);
- const weekString = `[${selectedWeek.value.join(",")}]`;
- session.week_day_str = weekString;
- console.log("weekString", weekString);
- selectedWeek.value.map((item, index) => {
- if (item) {
- console.log("index", index);
- // 開始時間
- sessionStartTimeList.value[index] = `"${
- sessionTime.start_week_time[index].hours < 10 ? "0" : ""
- }${sessionTime.start_week_time[index].hours}:${
- sessionTime.start_week_time[index].minutes === 0
- ? "00"
- : sessionTime.start_week_time[index].minutes
- }:00"`;
- // 結束時間
- sessionEndTimeList.value[index] = `"${
- sessionTime.end_week_time[index].hours
- }:${
- sessionTime.end_week_time[index].minutes === 0
- ? "00"
- : sessionTime.end_week_time[index].minutes
- }:00"`;
- } else {
- sessionStartTimeList.value[index] = '""';
- sessionEndTimeList.value[index] = '""';
- }
- });
- session.start_week_time = `[${sessionStartTimeList.value}]`;
- session.end_week_time = `[${sessionEndTimeList.value}]`;
- session.class_event_id = eventId.value;
- // const formData = new FormData();
- // for (const key in session) {
- // formData.append(key, session[key]);
- // }
- let oneDayData = {
- class_event_id: session.class_event_id,
- start_time: event.start_time,
- end_time: event.end_time,
- content: "",
- };
- console.log("oneDayData", oneDayData);
- // const oneDayFormData = new FormData();
- // for (const key in oneDayData) {
- // formData.append(key, oneDayData[key]);
- // }
- try {
- if (isOneDay.value) {
- const oneDayFormData = new FormData();
- for (const key in oneDayData) {
- oneDayFormData.append(key, oneDayData[key]);
- }
- // 一日課程
- const response = await axios.post(
- "https://cmm.ai:8088/api/insert_session",
- oneDayFormData
- );
- console.log("新增課堂(一日) response", response);
- } else {
- const formData = new FormData();
- for (const key in session) {
- formData.append(key, session[key]);
- }
- // 週期課程
- const response = await axios.post(
- "https://cmm.ai:8088/api/auto_create_session",
- formData
- );
- console.log("新增課堂(週期) response", response);
- }
- // const response = await axios.post(
- // "https://cmm.ai:8088/api/auto_create_session",
- // formData
- // );
- // console.log("新增課堂 response", response);
- } catch (error) {
- console.error(error);
- }
- }
- let schoolSelect = reactive({
- list: [],
- });
- let schoolId = ref("");
- // 取得已有據點
- (async () => {
- let token = store.token;
- try {
- const response = await axios.get(
- `https://cmm.ai:8088/api/get_school?&access_token=${token}`
- );
- schoolSelect.list = response.data.schools;
- // 調整排序(未審核移到最後)
- schoolSelect.list.sort((a, b) => b.is_pass_proposal - a.is_pass_proposal);
- console.log("取得使用者據點", schoolSelect.list);
- } catch (error) {
- console.error(error);
- }
- })();
- // 監聽據點 Select
- watch(schoolId, (id) => {
- console.log("schoolId", id);
- // locationId.value = id;
- handleSchoolData(id);
- });
- let schools = reactive({
- list: [],
- });
- // 帶入據點資料
- async function handleSchoolData(id) {
- console.log("handleSchoolData", id);
- try {
- const response = await axios.get(
- `https://cmm.ai:8088/api/get_school?location_id=${id}`
- );
- schools.list = response.data.schools;
- console.log("取得已有據點", schools.list);
- for (const key in schools.list[0]) {
- if (location.hasOwnProperty(key) && schools.list[0][key] !== undefined) {
- location[key] = schools.list[0][key];
- }
- }
- } catch (error) {
- console.error(error);
- }
- }
- /* 據點 */
- let assignLocationId = ref(null);
- watch(assignLocationId, (val) => {
- console.log("assignLocationId", val);
- });
- let locationData = ref(null);
- // 存選擇的據點 ID
- function setLocationId(item) {
- console.log("setLocationId", item);
- locationData.value = item;
- console.log("locationData", locationData.value);
- if (item.is_pass_proposal === 1) {
- assignLocationId.value = item.location_id;
- }
- }
- const schoolForm = ref(null); // Step1 表單
- const resumeForm = ref(null); // Step2 表單
- const courseForm = ref(null); // Step3 表單
- const eventForm = ref(null); // Step4 表單
- let errorField = ref(false);
- function checkField(num) {
- console.log("checkField", num);
- // step.value++;
- if (num === 1) {
- console.log("assignLocationId", assignLocationId.value);
- if (!assignLocationId.value) {
- console.log("沒有");
- errorField.value = true;
- setTimeout(() => {
- errorField.value = false;
- }, 3000);
- return;
- } else {
- getSchool(assignLocationId.value); // 取得指定據點
- }
- } else if (num === 2) {
- if (!assignTeachers.list.length) {
- errorField.value = true;
- setTimeout(() => {
- errorField.value = false;
- }, 3000);
- return;
- }
- }
- step.value++;
- }
- let teachers = reactive({
- list: [],
- });
- // 取得指定據點底下的工藝教育者履歷
- async function getSchool(id) {
- console.log("getSchool", id);
- try {
- const response = await axios.get(
- `https://cmm.ai:8088/api/get_school?location_id=${id}`
- );
- console.log("取得據點", response);
- resumeList.value = JSON.parse(response.data.schools[0].teachers_list);
- console.log("resumeList.value", resumeList.value);
- } catch (error) {
- console.error(error);
- }
- }
- let teacherCheckbox = ref([]);
- let assignTeachers = reactive({
- list: [],
- });
- /* 指派工藝教育者 */
- async function assignTeacher(item, index) {
- console.log("item", item);
- console.log("index", index);
- // 檢查陣列中是否已存在相同資料
- let isDuplicate = assignTeachers.list.some(function (existingItem) {
- return (
- existingItem.teacher_name === item.teacher_name &&
- existingItem.subject === item.subject
- );
- });
- // 如無重複再新增
- if (!isDuplicate) {
- assignTeachers.list.push(item);
- teacherCheckbox.value[index] = true;
- console.log("teacherCheckbox", teacherCheckbox.value);
- } else {
- console.log("已存在");
- assignTeachers.list = assignTeachers.list.filter(
- (e) => e.teacher_name !== item.teacher_name
- );
- teacherCheckbox.value[index] = false;
- }
- console.log("assignTeachers.list", assignTeachers.list);
- }
- </script>
- <template>
- <Navbar />
- <v-container class="mb-16 pb-16">
- <v-breadcrumbs
- :items="breadcrumbs"
- divider="/"
- class="py-10"
- ></v-breadcrumbs>
- <v-card class="mx-auto pa-5 pa-sm-10">
- <v-card-title class="step-title">
- <h5>{{ computedTitle.stepTitle }}</h5>
- <p class="mt-5">{{ computedTitle.stepDescription }}</p>
- </v-card-title>
- <v-window v-model="step">
- <v-window-item :value="1">
- <v-card-text>
- <v-form
- ref="schoolForm"
- class="school-form"
- lazy-validation
- @submit.prevent
- >
- <router-link to="/setup-courses/proposal" class="proposal-link">
- <v-icon icon="mdi-plus-circle" class="me-2"></v-icon>
- 想建立新據點?請點此前往提案</router-link
- >
- <ul>
- <li v-for="(item, index) in schoolSelect.list" :key="index">
- <div
- class="d-flex justify-space-between"
- @click="setLocationId(item)"
- >
- <div class="d-flex flex-column">
- <span class="d-flex align-center">
- <label :for="item.location_id" class="me-3">{{
- item.location_name
- }}</label>
- <v-chip
- v-if="item.is_pass_proposal === 1"
- color="green"
- text-color="white"
- >
- 已審核
- </v-chip>
- <v-chip
- v-else-if="item.is_pass_proposal === 2"
- color="error"
- text-color="white"
- >
- 已駁回
- </v-chip>
- <v-chip v-else> 未審核 </v-chip>
- <!-- <small>{{ item.address }}</small> -->
- </span>
- <small class="mt-2 text-gray">{{ item.address }}</small>
- </div>
- <input
- :disabled="item.is_pass_proposal !== 1"
- v-model="assignLocationId"
- :true-value="item.location_id"
- type="checkbox"
- :id="item.location_id"
- />
- </div>
- </li>
- </ul>
- <!-- <div v-if="schoolSelect.list.length" class="mb-10 school-list">
- <v-label class="d-flex align-center w-100 overflow-visible">
- <p class="pe-3">已經有據點?</p>
- <v-select
- v-model="schoolId"
- label="請選擇據點"
- :items="schoolSelect.list"
- item-title="location_name"
- item-value="location_id"
- hide-details
- density="compact"
- variant="outlined"
- ></v-select>
- </v-label>
- </div>
- <v-row class="justify-space-evenly">
- <v-col cols="12" md="5" class="px-0">
- <v-label class="d-block">
- <p class="d-flex mb-5">
- 據點名稱<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="location.location_name"
- :rules="[requiredRule]"
- title="據點名稱"
- placeholder="可以是您的工作室或品牌名稱/教學單位/您的姓名"
- density="compact"
- variant="outlined"
- counter
- maxlength="60"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" md="5" class="px-0">
- <v-label class="d-block">
- <p class="d-flex mb-5">
- 據點地址<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="location.address"
- :rules="[requiredRule]"
- title="據點地址"
- density="compact"
- variant="outlined"
- placeholder="需在安全且便於學徒到達之地點開課"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" md="5" class="px-0">
- <v-label class="d-block">
- <p class="d-flex mb-5">
- 據點 Email<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="location.email"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- placeholder="請填寫 Email"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" md="5" class="px-0">
- <v-label class="d-block">
- <div class="d-flex">
- <p class="d-flex mb-5">
- 公開電話<span class="mark">*</span>
- </p>
- <span class="d-block ms-3 hint"
- >會顯示於課程介紹中,想了解課程資訊者聯繫用途
- </span>
- </div>
- <v-text-field
- v-model="location.phone"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- <span class="d-block hint"
- >會顯示於課程介紹中,想了解課程資訊者聯繫用途
- </span>
- </v-col>
- <v-col cols="12" md="11">
- <v-label class="d-block">
- <p class="d-flex mb-5">
- 據點簡介<span class="mark">*</span>
- </p>
- <v-textarea
- v-model="location.school_introduction"
- :rules="[requiredRule]"
- rows="5"
- variant="outlined"
- ></v-textarea>
- </v-label>
- </v-col>
- </v-row>
- <div class="d-flex flex-column justify-end ms-md-16 ps-md-5">
- <div
- class="map"
- id="map"
- style="width: 100%; height: 31.25em"
- ></div>
- <v-row>
- <v-col cols="12" md="6">
- <v-label class="d-flex align-center">
- <p class="pb-5 pe-3">經度</p>
- <v-text-field
- v-model="location.Lng"
- density="compact"
- variant="outlined"
- disabled
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" md="6" class="py-0 py-md-3">
- <v-label class="d-flex align-center">
- <p class="pb-5 pe-3">緯度</p>
- <v-text-field
- v-model="location.Lat"
- density="compact"
- variant="outlined"
- disabled
- ></v-text-field>
- </v-label>
- </v-col>
- </v-row>
- </div> -->
- </v-form>
- </v-card-text>
- </v-window-item>
- <v-window-item :value="2">
- <v-card-text class="resume-content">
- <button class="resume-btn">
- <p class="d-flex flex-column align-center">
- <v-icon icon="mdi-plus" size="x-large"></v-icon>
- 新增工藝教育者
- </p>
- <v-dialog v-model="resumeDialog" activator="parent" width="700">
- <v-card class="pa-5">
- <v-card-title>工藝教育者履歷</v-card-title>
- <v-card-text>
- <v-form ref="resumeForm" lazy-validation @submit.prevent>
- <v-row>
- <v-col cols="12">
- <v-label class="d-flex align-center">
- <p class="pb-5 pe-3">
- 老師姓名<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="resume.teacher_name"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <!-- <v-col cols="6"></v-col> -->
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 工作性質<span class="mark">*</span>
- </p>
- <v-radio-group v-model="resume.work_type" inline>
- <v-radio label="全職" value="全職"></v-radio>
- <v-radio
- label="兼職"
- value="兼職"
- class="ps-3"
- ></v-radio>
- </v-radio-group>
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label class="d-block">
- <p class="pb-5 pe-3">教學經驗</p>
- <v-radio-group v-model="resume.experience" inline>
- <v-radio label="0-5 年" value="0-5 年"></v-radio>
- <v-radio
- label="5-10 年"
- value="5-10 年"
- class="ps-3"
- ></v-radio>
- <v-radio
- label="10-20 年"
- value="10-20 年"
- class="ps-3"
- ></v-radio>
- <v-radio
- label="20 年以上"
- value="20 年以上"
- class="ps-3"
- ></v-radio>
- </v-radio-group>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 專長工藝技能<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="resume.expertise"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 工藝相關證照<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="resume.license"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- placeholder="若無工藝相關證照請填「無」"
- ></v-text-field>
- </v-label>
- <v-label class="d-block">
- <p class="d-flex">社群媒體</p>
- <span class="d-block py-3 hint"
- >工藝老師經營之網站或社群媒體,可貼網址</span
- >
- <v-text-field
- v-model="resume.media"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <!-- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex">講師作品集</p>
- <v-file-input
- multiple
- v-model="portfolioImg"
- ref="portfolioImgRef"
- label="File input"
- variant="outlined"
- placeholder="選擇相片上傳"
- @change="handlePortfolioImg"
- style="display: none"
- ></v-file-input>
- </v-label>
- <v-btn
- @click="fileInputClick('portfolio')"
- color="purple"
- class="my-5"
- >選擇相片上傳</v-btn
- >
- <v-row class="img-list">
- <v-col
- cols="4"
- v-for="(item, index) in 6"
- :key="index"
- >
- <div
- v-if="!portfolioImgList.length"
- class="item"
- ></div>
- <div
- v-else
- class="item"
- :style="{
- backgroundImage: `url('${portfolioImgList[index]}')`,
- }"
- ></div>
- </v-col>
- </v-row>
- </v-col> -->
- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex mb-5">
- 工藝教育者介紹<span class="mark">*</span>
- </p>
- <v-textarea
- v-model="resume.introduction"
- :rules="[
- (value) =>
- (value && value.length >= 50) ||
- '請至少輸入 50 個字元,以確保內容完整性',
- ]"
- rows="5"
- variant="outlined"
- hint="文字長度不得低於 50 個字元,最多 150 個字元"
- maxlength="150"
- counter
- ></v-textarea>
- </v-label>
- </v-col>
- </v-row>
- </v-form>
- </v-card-text>
- <v-card-actions class="justify-center">
- <v-spacer></v-spacer>
- <v-btn text="取消" @click="resumeDialog = false"></v-btn>
- <v-btn
- @click="insertResume()"
- color="purple"
- variant="flat"
- >
- 新增
- </v-btn>
- </v-card-actions>
- </v-card>
- </v-dialog>
- </button>
- <h6 data-v-bbf03f1f="" class="mt-10 table-title">工藝教育者履歷</h6>
- <div class="main-table">
- <!-- <h6 data-v-bbf03f1f="" class="table-title">工藝教育者履歷</h6> -->
- <table>
- <thead>
- <tr>
- <th>姓名</th>
- <th>工作性質</th>
- <th>教學經驗</th>
- <th>專長工藝技能</th>
- <th>工藝相關證照</th>
- <th>社群媒體</th>
- <th style="width: 30%">老師介紹</th>
- <th></th>
- <!-- <th width="15%">繳款資訊</th> -->
- </tr>
- </thead>
- <tbody v-if="resumeList.length">
- <!-- <tr v-if="!register.list.length">
- <p class="hint-item">
- 目前沒有報名紀錄喔!點擊開始探索您的專屬課程!
- </p>
- </tr> -->
- <tr
- v-for="(item, index) in resumeList"
- :key="index"
- @click="assignTeacher(item, index)"
- >
- <td>{{ item.teacher_name }}</td>
- <td>{{ item.work_type }}</td>
- <td>{{ item.experience }}</td>
- <td>{{ item.expertise }}</td>
- <td>{{ item.license }}</td>
- <td>{{ item.media }}</td>
- <td>
- <v-dialog width="600">
- <template v-slot:activator="{ props }">
- <v-btn
- v-bind="props"
- text="查看"
- variant="tonal"
- color="purple"
- rounded="xl"
- >
- </v-btn>
- </template>
- <template v-slot:default="{ isActive }">
- <v-card title="老師介紹" class="pa-3">
- <v-card-text
- style="letter-spacing: 1px; line-height: 1.5"
- >
- {{ item.introduction }}
- </v-card-text>
- <v-card-actions class="justify-end">
- <v-spacer></v-spacer>
- <v-btn
- text="關閉"
- @click="isActive.value = false"
- ></v-btn>
- </v-card-actions>
- </v-card>
- </template>
- </v-dialog>
- </td>
- <td>
- <input
- v-model="teacherCheckbox[index]"
- type="checkbox"
- class="me-5"
- />
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </v-card-text>
- <!-- <v-row align="center" justify="center" class="mt-10 mb-16">
- <v-col
- v-for="(item, index) in teachers.list"
- :key="item"
- cols="auto"
- >
- <v-card
- @click="assignTeacher(item, index)"
- class="mx-auto pa-3 teachers-card"
- width="330"
- >
- <v-card-item>
- <div>
- <div
- class="d-flex justify-space-between align-center mb-4 pe-1"
- >
- <h4>{{ item.teacher_name }}</h4>
- <input
- v-model="teacherCheckbox[index]"
- type="checkbox"
- name=""
- id=""
- />
- </div>
- <ul class="pt-4">
- <li>工作性質: {{ item.work_type }}</li>
- <li>工藝技能:{{ item.expertise }}</li>
- <li>工藝證照:{{ item.license }}</li>
- <li>教學經驗:{{ item.experience }}</li>
- </ul>
- </div>
- </v-card-item>
- </v-card>
- </v-col>
- </v-row> -->
- <!-- <v-card-text>
- <v-form ref="resumeForm" lazy-validation @submit.prevent>
- <v-row>
- <v-col cols="12" sm="6">
- <v-label class="d-flex align-center pb-3">
- <p class="pb-5 pe-3">老師姓名<span class="mark">*</span></p>
- <v-text-field
- v-model="resume.teacher_name"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="6"></v-col>
- <v-col cols="12" lg="3">
- <v-label class="d-block">
- <p class="pb-5 pe-3">工作性質<span class="mark">*</span></p>
- <v-radio-group v-model="resume.work_type" inline>
- <v-radio label="全職" value="全職"></v-radio>
- <v-radio label="兼職" value="兼職" class="ps-3"></v-radio>
- </v-radio-group>
- </v-label>
- </v-col>
- <v-col cols="12" lg="9">
- <v-label class="d-block">
- <p class="pb-5 pe-3">教學經驗</p>
- <v-radio-group v-model="resume.experience" inline>
- <v-radio label="0-5 年" value="0-5 年"></v-radio>
- <v-radio
- label="5-10 年"
- value="5-10 年"
- class="ps-3"
- ></v-radio>
- <v-radio
- label="10-20 年"
- value="10-20 年"
- class="ps-3"
- ></v-radio>
- <v-radio
- label="20 年以上"
- value="20 年以上"
- class="ps-3"
- ></v-radio>
- </v-radio-group>
- </v-label>
- </v-col>
- <v-col cols="12" md="6">
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 專長工藝技能<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="resume.expertise"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- <v-label class="d-block">
- <p class="pb-5 pe-3">工藝相關證照</p>
- <v-text-field
- v-model="resume.license"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- <v-label class="d-block">
- <p class="d-flex">社群媒體</p>
- <span class="d-block py-3 hint"
- >工藝老師經營之網站或社群媒體,可貼網址</span
- >
- <v-text-field
- v-model="resume.media"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" md="6">
- <v-label class="d-block">
- <p class="d-flex">講師作品集</p>
- <v-file-input
- multiple
- v-model="portfolioImg"
- ref="portfolioImgRef"
- label="File input"
- variant="outlined"
- placeholder="選擇相片上傳"
- @change="handlePortfolioImg"
- style="display: none"
- ></v-file-input>
- </v-label>
- <v-btn
- @click="fileInputClick('portfolio')"
- color="purple"
- class="my-5"
- >選擇相片上傳</v-btn
- >
- <v-row class="img-list">
- <v-col cols="4" v-for="(item, index) in 6" :key="index">
- <div v-if="!portfolioImgList.length" class="item"></div>
- <div
- v-else
- class="item"
- :style="{
- backgroundImage: `url('${portfolioImgList[index]}')`,
- }"
- ></div>
- </v-col>
- </v-row>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex mb-5">老師自我介紹</p>
- <v-textarea
- v-model="resume.introduction"
- rows="5"
- variant="outlined"
- ></v-textarea>
- </v-label>
- </v-col>
- </v-row>
- </v-form>
- </v-card-text> -->
- </v-window-item>
- <v-window-item :value="3">
- <v-card-text class="mb-7">
- <v-form ref="courseForm" lazy-validation @submit.prevent>
- <v-row class="justify-space-evenly">
- <v-col cols="12" md="6">
- <v-row>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 課程名稱<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="course.name"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">
- 工藝類別<span class="mark">*</span>
- </p>
- <v-select
- v-model="course.category"
- placeholder="請選擇類別"
- :items="[
- '樹藝',
- '漆藝',
- '藍染',
- '蠟雕',
- '竹工藝籃',
- '金工/飾品',
- '蠟燭/香氛/調香',
- '植栽/花藝',
- '插畫/繪畫/寫字',
- '皮件/皮革',
- '木工/竹藝',
- '陶藝/玻璃',
- '編織/羊毛氈/縫紉',
- '其他',
- ]"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-select>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">上課地點</p>
- <v-text-field
- v-model="locationData.address"
- label="自動帶入據點地址"
- density="compact"
- variant="outlined"
- disabled
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="pb-5 pe-3">主辦單位</p>
- <v-text-field
- v-model="locationData.location_name"
- label="自動帶入據點名稱"
- density="compact"
- variant="outlined"
- disabled
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex">
- 課程時間<span class="mark">*</span>
- </p>
- <v-dialog
- v-model="sessionsDialog"
- persistent
- width="800"
- >
- <template v-slot:activator="{ props }">
- <v-btn class="my-5" color="purple" v-bind="props">
- <v-icon icon="mdi-plus" class="me-1"></v-icon>
- 建立新場次
- </v-btn>
- </template>
- <v-card class="sessions-card pb-3">
- <!-- <v-card-title>
- <span class="d-block ps-10 py-5">建立新場次</span>
- </v-card-title> -->
- <v-card-text class="pa-8">
- <v-form
- ref="eventForm"
- lazy-validation
- @submit.prevent
- >
- <v-container class="py-0">
- <v-row>
- <v-col cols="12">
- <p class="text-h6 font-weight-bold my-3">
- 建立新場次
- </p>
- </v-col>
- <!-- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 起始日期<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.start_date"
- :min-date="new Date()"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- ></VueDatePicker>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 起始時間<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.start_time"
- time-picker
- />
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 結束日期<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.end_date"
- :min-date="new Date()"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- ></VueDatePicker>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 結束時間<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.end_time"
- time-picker
- />
- </v-col> -->
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 場次名稱<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="event.event"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 課程講師<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="event.lecturer"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 聯絡資訊<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="event.contact"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">課程教室</p>
- <v-text-field
- v-model="event.location"
- density="compact"
- variant="outlined"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 課程名額<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="event.number_limit"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- type="number"
- placeholder="請設定報名人數上限"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" sm="6" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 最低開課人數<span class="mark"
- >*</span
- >
- </p>
- <v-text-field
- density="compact"
- variant="outlined"
- type="number"
- placeholder="請輸入開課門檻人數"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 收費方式<span class="mark">*</span>
- </p>
- <v-select
- v-model="event.fee_payment"
- :items="['現場收費', '匯款']"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- outlined
- ></v-select>
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label
- v-if="isRemit"
- class="d-flex align-center py-2"
- >
- <p class="pb-5 pe-3">
- 匯款資訊<span class="mark">*</span>
- </p>
- <div class="d-flex w-100">
- <v-text-field
- v-model="bankCode"
- label="銀行代碼"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- style="width: 30%"
- class="me-3"
- ></v-text-field>
- <v-text-field
- v-model="bankAccount"
- label="匯款帳號 (10-16 碼)"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- style="width: 70%"
- ></v-text-field>
- </div>
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-5 pe-3">
- 課程價格<span class="mark">*</span>
- </p>
- <v-text-field
- v-model="event.fee_method"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- type="number"
- ></v-text-field>
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="pb-3 pe-3">
- 適合對象<span class="mark pb-4"
- >*</span
- >
- </p>
- <v-textarea
- rows="2"
- variant="outlined"
- placeholder="ex. 不拘、18-65 歲、大專院校工藝、美術、設計科系學生、從事木作相關之業者或個人工作室"
- :rules="[requiredRule]"
- ></v-textarea>
- <!-- <v-select
- v-model="event.people"
- :items="[
- '不拘',
- '7 歲以下',
- '7-18 歲',
- '18-65 歲',
- '65 歲以上',
- ]"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- outlined
- ></v-select> -->
- </v-label>
- </v-col>
- <v-col cols="12" class="py-0">
- <v-label class="d-flex align-center py-2">
- <p class="ps-8 pe-5">備註</p>
- <v-text-field
- v-model="event.remark"
- density="compact"
- variant="outlined"
- hide-details
- ></v-text-field>
- </v-label>
- </v-col>
- <v-divider class="my-10"></v-divider>
- <v-col cols="12" class="pt-0">
- <p class="text-h6 font-weight-bold mb-3">
- 課程時間
- </p>
- </v-col>
- <v-col
- cols="12"
- class="py-0 position-relative"
- >
- <v-label class="d-flex align-center pt-2">
- <p class="pb-3 pe-3">
- 課程類型<span class="mark pb-4"
- >*</span
- >
- </p>
- <v-select
- v-model="eventType"
- :items="[
- '一日課程(例:2023/10/1 週一上課)',
- '週期課程(例:2023/10/1~2023/10/30 每週一三上課)',
- ]"
- :rules="[requiredRule]"
- density="compact"
- variant="outlined"
- outlined
- ></v-select>
- </v-label>
- <!-- <small
- v-show="eventType !== ''"
- class="type-hint"
- >{{
- isOneDay
- ? "例:2023/10/2 週一上課"
- : "例:2023/10/1~2023/10/30 每週一三上課"
- }}</small
- > -->
- </v-col>
- <v-col
- v-if="!isOneDay"
- cols="12"
- class="d-flex py-0"
- >
- <p class="pt-1 pe-3">
- 重複週期<span class="mark pb-4">*</span>
- </p>
- <ul class="week-list">
- <li
- v-for="(item, index) in weekList"
- :key="index"
- @click="toggleSelected(index)"
- :class="{
- active: selectedWeek[index],
- }"
- class="d-flex"
- >
- <button class="item">
- {{ item }}
- </button>
- <div
- v-if="selectedWeek[index]"
- class="d-flex w-100 ms-5"
- >
- <VueDatePicker
- v-model="
- sessionTime.start_week_time[
- index
- ]
- "
- time-picker
- />
- <span
- class="d-flex align-center mx-2"
- >~</span
- >
- <VueDatePicker
- v-model="
- sessionTime.end_week_time[index]
- "
- time-picker
- />
- </div>
- </li>
- </ul>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 起始日期<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.start_date"
- :min-date="new Date()"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- ></VueDatePicker>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 起始時間<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.start_time"
- time-picker
- />
- </v-col>
- <v-col
- cols="12"
- sm="6"
- class="date-item position-relative"
- >
- <p class="mb-0 pe-3">
- 結束日期<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.end_date"
- :min-date="new Date()"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- :disabled="isOneDay"
- ></VueDatePicker>
- <span
- v-if="dateReminder"
- class="date-reminder text-error"
- >選擇週期課程時,起始日期與結束日期不可為同一天</span
- >
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 結束時間<span class="mark">*</span>
- </p>
- <VueDatePicker
- v-model="date.end_time"
- time-picker
- />
- </v-col>
- <!-- <v-col
- v-if="!isOneDay"
- cols="12"
- class="time-item pt-5 pb-7"
- >
- <p class="mb-0">
- 課程時間<span class="mark">*</span>
- </p>
- <div class="d-flex w-100">
- <VueDatePicker
- v-model="sessionTime.start_week_time"
- time-picker
- />
- <span class="d-flex align-center mx-2"
- >~</span
- >
- <VueDatePicker
- v-model="sessionTime.end_week_time"
- time-picker
- />
- </div>
- </v-col> -->
- <v-divider class="my-10"></v-divider>
- <v-col cols="12" class="pt-0">
- <p class="text-h6 font-weight-bold mb-3">
- 報名時間
- </p>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 報名日期<span class="mark pb-4">*</span>
- </p>
- <VueDatePicker
- v-model="date.registration_start_date"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- ></VueDatePicker>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 報名時間<span class="mark pb-4">*</span>
- </p>
- <VueDatePicker
- v-model="date.registration_start_time"
- time-picker
- />
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 報名截止<span class="mark pb-4">*</span>
- </p>
- <VueDatePicker
- v-model="date.registration_end_date"
- :enable-time-picker="false"
- :format="store.datePickerFormat"
- locale="cn"
- ></VueDatePicker>
- </v-col>
- <v-col cols="12" sm="6" class="date-item">
- <p class="mb-0 pe-3">
- 截止時間<span class="mark pb-4">*</span>
- </p>
- <VueDatePicker
- v-model="date.registration_end_time"
- time-picker
- />
- </v-col>
- </v-row>
- </v-container>
- </v-form>
- </v-card-text>
- <v-card-actions class="justify-center pt-10 pb-5">
- <v-btn
- color="gray"
- variant="tonal"
- class="me-3 px-10"
- @click="sessionsDialog = false"
- >
- 取消
- </v-btn>
- <v-btn
- color="purple"
- variant="flat"
- @click="addEventData()"
- class="px-10"
- >
- 新增
- </v-btn>
- </v-card-actions>
- </v-card>
- </v-dialog>
- <div v-if="eventData.list.length" class="main-table">
- <h6 class="table-title">場次資訊</h6>
- <table>
- <thead>
- <tr>
- <th>名稱</th>
- <th>日期</th>
- <th width="20%">課程講師</th>
- <th width="20%">收費方式</th>
- </tr>
- </thead>
- <tbody>
- <tr
- v-for="(item, index) in eventData.list"
- :key="index"
- >
- <td>{{ item.event }}</td>
- <td>
- {{
- moment(`${item.start_time}`).format(
- "YYYY/MM/DD"
- )
- }}
- <br />
- ~
- <br />
- {{
- moment(`${item.end_time}`).format(
- "YYYY/MM/DD"
- )
- }}
- </td>
- <td>{{ item.lecturer }}</td>
- <td>{{ item.fee_method }}</td>
- </tr>
- </tbody>
- </table>
- </div>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex">
- 課程簡介<span class="mark">*</span>
- </p>
- <small class="d-block text-gray my-2"
- >內容不得少於 100
- 個字元,且不得含有工藝無關之資訊</small
- >
- <v-textarea
- v-model="course.introduction"
- rows="5"
- variant="outlined"
- :rules="[
- (value) =>
- (value && value.length >= 100) ||
- '請至少輸入 100 個字元,以確保內容完整性',
- ]"
- counter
- ></v-textarea>
- </v-label>
- </v-col>
- <v-col cols="12">
- <v-label class="d-block">
- <div class="d-flex align-center">
- <p class="d-flex me-3">
- 課程內容 (課綱) <span class="mark">*</span>
- </p>
- <v-dialog width="500">
- <template v-slot:activator="{ props }">
- <v-btn
- v-bind="props"
- variant="outlined"
- color="purple"
- >查看範例
- </v-btn>
- </template>
- <template v-slot:default="{ isActive }">
- <v-card>
- <v-card-text>
- <div class="d-flex justify-end">
- <v-btn
- @click="isActive.value = false"
- icon="mdi-close"
- variant="text"
- ></v-btn>
- </div>
- <ul class="section-list pa-3">
- <li>章節 1 — 技法示範與研磨實作,上漆</li>
- <li>章節 2 — 研磨實作</li>
- <li>章節 3 — 推光、擦漆</li>
- <li>章節 4 — 作品總整理</li>
- </ul>
- </v-card-text>
- </v-card>
- </template>
- </v-dialog>
- </div>
- <!-- <v-row class="my-5">
- <v-col cols="6">
- <v-text-field
- v-model="syllabusData.title"
- density="compact"
- variant="outlined"
- hide-details
- placeholder="章節標題"
- ></v-text-field>
- </v-col>
- <v-col cols="6">
- <v-text-field
- v-model="syllabusData.content"
- density="compact"
- variant="outlined"
- hide-details
- placeholder="備註內容(非必填)"
- ></v-text-field>
- </v-col>
- </v-row> -->
- <div class="d-flex my-5">
- <div class="w-100">
- <v-text-field
- v-model="section"
- density="compact"
- variant="outlined"
- hide-details
- placeholder="章節標題"
- ></v-text-field>
- <!-- <v-textarea
- v-model="syllabusData.content"
- density="compact"
- variant="outlined"
- hide-details
- placeholder="章節內容"
- rows="3"
- counter
- ></v-textarea> -->
- </div>
- <v-btn
- color="purple"
- icon="mdi-plus"
- size="small"
- class="ms-5"
- @click="addSection()"
- ></v-btn>
- </div>
- <ul class="section-list">
- <li
- v-for="(item, index) in sectionList"
- :key="index"
- class="py-2"
- >
- <div
- class="d-flex align-center justify-space-between"
- >
- <p>章節 {{ index + 1 }} — {{ item }}</p>
- <v-btn
- color="error"
- icon="mdi-close"
- variant="text"
- size="small"
- @click="addSection()"
- ></v-btn>
- </div>
- </li>
- </ul>
- <!-- <ul>
- <li v-for="(item, index) in sectionList" :key="index">
- 章節 {{ index + 1 }} — {{ item }}
- </li>
- </ul> -->
- <!-- <v-textarea
- v-model="syllabusData.content"
- density="compact"
- variant="outlined"
- hide-details
- placeholder="備註內容(非必填)"
- rows="2"
- counter
- ></v-textarea> -->
- </v-label>
- </v-col>
- <!-- <v-col cols="12">
- <v-label class="d-block">
- <p class="d-flex">章節預覽:</p>
- </v-label>
- </v-col> -->
- <v-col cols="12" class="me-auto">
- <v-label class="d-block">
- <p class="d-flex">
- 上傳課程封面<span class="mark">*</span>
- </p>
- <v-file-input
- multiple
- v-model="coverImg"
- ref="coverImgRef"
- label="File input"
- variant="outlined"
- placeholder="選擇相片上傳"
- @change="handleCoverImg"
- style="display: none"
- ></v-file-input>
- </v-label>
- <v-btn
- @click="fileInputClick('cover')"
- color="purple"
- class="my-5"
- >選擇相片上傳</v-btn
- >
- <div class="step-01 image-preview">
- <img
- v-if="coverImg"
- :src="coverImgUrl"
- alt="上傳圖片預覽"
- />
- </div>
- <!-- <v-row class="img-list">
- <v-col cols="4" v-for="(item, index) in 6" :key="index">
- <div
- v-if="!portfolioImgList.length"
- class="item"
- ></div>
- <div
- v-else
- class="item"
- :style="{
- backgroundImage: `url('${portfolioImgList[index]}')`,
- }"
- ></div>
- </v-col>
- </v-row> -->
- </v-col>
- </v-row>
- </v-col>
- <v-col cols="12" md="6">
- <div class="notes-block">
- <p class="mb-5">課程審核標準:</p>
- <ul>
- <li>
- ◆
- 課程內容正確合宜,無錯誤與誇大不實、不含與課程無關的推銷廣告、內容無抄襲侵權、無涉及任何色情、血腥暴力、人身攻擊、歧視(包含性別、種族、性傾向等)。
- </li>
- <li>◆ 提供圖片需與課程內容相符。</li>
- <li>◆ 教學內容符合邏輯。</li>
- </ul>
- </div>
- </v-col>
- </v-row>
- </v-form>
- </v-card-text>
- </v-window-item>
- <v-window-item :value="4">
- <v-card-text class="mb-7 finish-step">
- <p>
- 請等待後台人員確認您的課程資訊 <br />
- 待您收到開課完成的 Email <br />
- 就可以前往
- <router-link to="/user/courses">【我的開課】</router-link>
- 觀看及修改您的
- </p>
- <ul>
- <li>(1) 據點資訊</li>
- <li>(2) 工藝教育者履歷</li>
- <li>(3) 課程清單</li>
- </ul>
- </v-card-text>
- </v-window-item>
- </v-window>
- <v-divider></v-divider>
- <v-card-actions
- class="justify-center flex-column flex-sm-row mt-5 mt-sm-7"
- >
- <v-btn
- v-if="step > 1 && step !== 4"
- color="gray"
- variant="outlined"
- size="large"
- @click="step--"
- class="px-7 me-7"
- >
- 上一步
- </v-btn>
- <v-spacer></v-spacer>
- <v-btn
- v-if="step < 3"
- color="purple"
- variant="flat"
- size="large"
- @click="checkField(step)"
- class="px-7"
- >
- 下一步
- </v-btn>
- <!-- <div
- v-if="errorField"
- class="d-flex align-center text-error mt-3 position-absolute"
- style="bottom: 15px"
- >
- <v-icon icon="mdi-alert"></v-icon>
- <span class="ms-2"> 尚有欄位未填寫 </span>
- </div> -->
- <v-btn
- v-if="step === 3"
- color="purple"
- variant="flat"
- size="large"
- @click="create()"
- :loading="loading"
- class="px-7"
- >
- 創建
- </v-btn>
- <div
- v-if="errorField"
- class="d-flex align-center text-error mt-3 position-absolute"
- style="bottom: 15px"
- >
- <v-icon icon="mdi-alert"></v-icon>
- <span class="ms-2"> 尚有欄位未填寫 </span>
- </div>
- <div
- v-if="errorEventField"
- class="d-flex align-center text-error mt-3 position-absolute"
- style="bottom: 15px"
- >
- <v-icon icon="mdi-alert"></v-icon>
- <span class="ms-2"> 尚未填寫課程時間 </span>
- </div>
- <v-btn
- v-if="step === 4"
- color="purple"
- variant="outlined"
- class="mb-5 mb-sm-0 me-sm-3"
- >
- <router-link to="/" class="px-7">回到首頁</router-link>
- </v-btn>
- <v-btn v-if="step === 4" color="purple" variant="flat">
- <router-link to="/user/courses" class="px-7"
- >前往開課專區</router-link
- >
- </v-btn>
- </v-card-actions>
- </v-card>
- </v-container>
- </template>
- <style lang="scss">
- .step-title {
- text-align: center;
- h5 {
- font-size: 1.75em;
- font-weight: 500;
- letter-spacing: 0.125em;
- @media (max-width: 600px) {
- font-size: 1em;
- }
- }
- p {
- font-size: 0.8em;
- font-weight: 400;
- letter-spacing: 0.0625em;
- color: #919191;
- white-space: normal;
- @media (max-width: 600px) {
- font-size: 0.7em;
- line-height: 1.5em;
- }
- }
- }
- .step-01 {
- &.image-preview {
- height: 17.8125em;
- }
- }
- .step-02 {
- &.image-preview {
- height: 14.6875em;
- }
- }
- .image-preview {
- img {
- height: 100%;
- object-fit: contain;
- }
- }
- .flex-grow-1 {
- display: none !important;
- }
- .img-list {
- .item {
- height: 10em;
- border-radius: 0.3125em;
- background-color: #ccc; // 預設灰底
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- @media (max-width: 960px) {
- height: 20vw;
- }
- }
- }
- .sessions-card {
- border-radius: 1.875em 0.3125em 0.3125em 1.875em !important;
- .v-label {
- p {
- // width: 5.9375em;
- text-align: end;
- line-height: 1.375em;
- @media (max-width: 600px) {
- width: 7.6875em;
- }
- }
- }
- }
- // .date-item {
- // display: flex;
- // margin-bottom: 0.625em;
- // p {
- // width: 7.125em;
- // display: flex;
- // align-items: center;
- // justify-content: end;
- // white-space: nowrap;
- // line-height: 1.375em;
- // @media (max-width: 600px) {
- // width: 7.8125em;
- // }
- // }
- // }
- .main-table {
- margin: 3.125em 0;
- .table-title {
- background-color: var(--purple);
- }
- table {
- thead {
- border-bottom: 0.125em solid var(--purple);
- tr {
- &:first-child:hover {
- background-color: #fff;
- }
- }
- }
- tbody {
- tr {
- &:hover {
- background-color: #f3f3f3;
- }
- }
- td {
- cursor: pointer;
- border-bottom: 0.0625em solid var(--purple);
- }
- }
- }
- }
- // .main-table {
- // thead {
- // tr {
- // &:first-child:hover {
- // background-color: #fff;
- // }
- // }
- // }
- // tr {
- // &:hover {
- // background-color: #f3f3f3;
- // }
- // }
- // td {
- // cursor: pointer;
- // }
- // }
- .finish-step {
- line-height: 3.125em !important;
- font-size: 1.375em;
- text-align: center;
- letter-spacing: 0.0625em;
- @media (max-width: 600px) {
- padding: 0;
- line-height: 2em;
- font-size: 1em;
- }
- }
- .type-hint {
- width: 100%;
- display: block;
- position: absolute;
- bottom: 0.0625em;
- left: 6.5625em;
- color: var(--gray);
- }
- // .week-list {
- // height: 70%;
- // align-items: center;
- // li {
- // margin: 0.9375em 0;
- // .item {
- // color: var(--purple);
- // padding: 0.625em;
- // border-radius: 6.25em;
- // border: 0.0625em solid var(--purple);
- // transition: all 0.3s;
- // &:hover {
- // color: #fff;
- // background-color: var(--purple);
- // }
- // }
- // &.active {
- // .item {
- // color: #fff;
- // background-color: var(--purple);
- // }
- // }
- // }
- // }
- .time-item {
- display: flex;
- align-items: center;
- p {
- width: 6.0625em;
- flex-wrap: nowrap;
- display: flex;
- white-space: nowrap;
- }
- }
- input[type="checkbox"] {
- // accent-color: var(--purple);
- transform: scale(1.5);
- }
- .school-form {
- max-width: 800px;
- margin: 50px auto 0;
- li {
- padding: 20px;
- border-bottom: 1px solid #eeeded;
- font-size: 1.2em;
- letter-spacing: 1px;
- cursor: pointer;
- &:last-child {
- border-bottom: none;
- }
- }
- .proposal-link {
- padding: 25px 20px;
- margin-bottom: 20px;
- display: flex;
- align-items: center;
- color: #fff;
- font-size: 1.15em;
- text-shadow: 1px 1px 2px #ababab;
- border-radius: 5px;
- background-color: var(--blue);
- transition: all 0.3s;
- letter-spacing: 2px;
- &:hover {
- opacity: 0.8;
- }
- }
- // width: 21.875em;
- // margin: auto;
- // @media (max-width: 600px) {
- // width: 100%;
- // }
- }
- .teachers-card {
- cursor: pointer;
- letter-spacing: 1px;
- h4 {
- font-size: 1.25em;
- }
- ul {
- border-top: 1px solid #ccc;
- li {
- margin-bottom: 10px;
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
- }
- .v-card .v-card-title {
- @media (max-width: 600px) {
- white-space: normal;
- line-height: 2em;
- }
- }
- </style>
|