From 16a6ae2c6a651acc2913094b2bfc606e94a8dffc Mon Sep 17 00:00:00 2001 From: bruce68410 Date: Sat, 11 Nov 2023 17:23:47 +0800 Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=8B=99=E5=8D=A1=E7=89=87ui=E4=BF=AE?= =?UTF-8?q?=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/main.css | 19 +- src/assets/sass/layout/_layout.scss | 23 +- src/views/Card/Edit.vue | 1070 ++++++++++----------------- src/views/Home/index.vue | 12 +- src/views/Member/index.vue | 8 +- src/views/Register/index.vue | 4 +- 6 files changed, 422 insertions(+), 714 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index ce5d091..c05a4f9 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -661,10 +661,12 @@ h1, h2, h3, h4, h5, h6 { align-items: center; } .upload-main .upload-img { + border: 1px #d8d8d8 solid; +} +.upload-main .upload-img.avatar { width: 100px; aspect-ratio: 1/1; border-radius: 50%; - border: 1px #d8d8d8 solid; } .cropper { @@ -690,6 +692,21 @@ h1, h2, h3, h4, h5, h6 { text-align: center; } +.card { + margin-bottom: 20px; +} +.card .card-header { + padding: 0; + background-color: #f85d5d; + border: none; +} +.card .card-header * { + color: #fff; +} +.card .card-body { + padding: 10px 0; +} + /* ========================================= other ============================================= */ .imgCnt { position: relative; diff --git a/src/assets/sass/layout/_layout.scss b/src/assets/sass/layout/_layout.scss index 3ee3198..fb24e69 100644 --- a/src/assets/sass/layout/_layout.scss +++ b/src/assets/sass/layout/_layout.scss @@ -108,10 +108,12 @@ justify-content: center; align-items: center; .upload-img{ - width: 100px; - aspect-ratio: 1/1; - border-radius: 50%; border:1px #d8d8d8 solid; + &.avatar{ + width: 100px; + aspect-ratio: 1/1; + border-radius: 50%; + } } } @@ -138,6 +140,21 @@ } } +.card{ + margin-bottom: 20px; + .card-header{ + padding: 0; + background-color: #f85d5d ; + border: none; + *{ + color: #fff ; + } + } + .card-body{ + padding:10px 0; + } +} + /* ========================================= other ============================================= */ .imgCnt{ diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue index 57316ef..9f5b9a1 100644 --- a/src/views/Card/Edit.vue +++ b/src/views/Card/Edit.vue @@ -24,10 +24,6 @@ import { showLoadingToast,showSuccessToast } from 'vant'; import { Cropper } from "vue-advanced-cropper"; import "vue-advanced-cropper/dist/style.css"; -import { genCard1 } from "@/utils/card2"; - -import { getCusCard } from "@/api"; - const URL = window.URL || window.webkitURL; export default defineComponent({ @@ -41,12 +37,20 @@ export default defineComponent({ const store = useStore(); const router = useRouter(); - const myCrop = ref(null); - const showNfc = ref(false); const showPreview = ref(false); + const showMovie = ref(false); + + const showTitleSizePicker = ref(false); + const showDescSizePicker = ref(false); + let flexRef = ref(null); + const showMvPopup = () => { + console.log('test'); + showMovie = true; + }; + const crop = ref({ show: false, img: null, @@ -88,64 +92,30 @@ export default defineComponent({ }, }); - const sizeArr = ref(['xxs','xs','sm','md','lg','xl','xxl','3xl','4xl','5xl']) - - // let res = await getCusCard({userid: sessionStorage.getItem('uid')}) - // if(res.code===200){ - // if(res.data.cus_card.length>0){ + const sizeColumns = ref([ + {text:'xxs',value:'xxs'}, + {text:'xs',value: 'xs'}, + {text:'sm',value: 'sm'}, + {text:'md',value: 'md'}, + {text:'lg',value: 'lg'}, + {text:'xl',value: 'xl'}, + {text:'xxl',value:'xxl'}, + {text:'3xl',value:'3xl'}, + {text:'4xl',value:'4xl'}, + {text:'5xl',value:'5xl'} + ]); + if ( store.state.user.userInfo.cus_card && store.state.user.userInfo.cus_card.length > 0 ) { state.form = JSON.parse(_.clone(store.state.user.userInfo.cus_card)); } - // } - // } watch(()=>state.form.title,(newVal)=>{ state.form.json5.altText = newVal }) - const onCrop = () => { - const { canvas } = myCrop.value.getResult(); - if (canvas) { - const imgFile = new FormData(); - canvas.toBlob(async (blob) => { - let ufile = new File([blob], "image.jpg"); - imgFile.append("fileType", "IMAGE"); - imgFile.append("file", ufile); - - crop.value.show = false; - - showLoadingToast({ - duration: 0, - message: "圖片上傳中...", - forbidClick: true, - }); - - let res = await axios.post( - `${import.meta.env.VITE_APP_API_URL}/card/uploadfile`, - imgFile, - {} - ); - - if (res.data.code == 200) { - state.form.json5.cards[state.form.page - 1].image = res.data.data; - - showSuccessToast("上傳成功"); - } else { - showToast.fail("上傳失敗"); - } - }, "image/jpeg"); - } - - return; - }; - - const onClose = () => { - crop.value.show = false; - }; - const addCard = () => { state.form.json5.cards.push({ bgColor: "#ffffff", @@ -221,7 +191,6 @@ export default defineComponent({ }; const delBtn = (index) => { - // console.log('index',state.json5.cards[state.page-1].btns) state.form.json5.cards[state.form.page - 1].btns.splice(index, 1); if (state.form.json5.cards[state.form.page - 1].btns.length === 0) { delete state.form.json5.cards[state.form.page - 1].btns; @@ -298,29 +267,17 @@ export default defineComponent({ }); }; - const changeSize = (type,size)=>{ - switch(type){ - case 'titleSize': - state.form.json5.cards[state.form.page - 1].titleSize = size; - break; - case 'descSize': - state.form.json5.cards[state.form.page - 1].descSize = size; - break; - default: - break; - } - return - } - - const handleSubmit = async () => { - if (!validateForm(state.form.json5.cards)) { - showToast("商務卡片欄位錯誤,紅色錯誤欄位請重新檢查!!"); - return; - } + const onTitleSizeConfirm = ({ selectedOptions }) => { + showTitleSizePicker.value = false; + state.form.json5.cards[state.form.page - 1].titleSize = selectedOptions[0].text; + }; - // console.log('json5',state.form.json5.cards); - // return; + const onDescSizeConfirm = ({ selectedOptions }) => { + showDescSizePicker.value = false; + state.form.json5.cards[state.form.page - 1].descSize = selectedOptions[0].text; + }; + const handleSubmit = async () => { let user_id = sessionStorage.getItem("uid"); showLoadingToast({ @@ -343,68 +300,17 @@ export default defineComponent({ } router.push("/"); }; - //檢查表單是否為空 - function validateForm(data) { - let pattern = /(https?:\/\/|line:\/\/|tel:|mailto:)\S+/; - - for (let [index, val] of data.entries()) { - // let rtn = Object.values(val).some((v) => { - // return v == "" || v == null; - // }); - let rtn = false - - for(let i in val){ - if(i !=='link' && (val[i] == "" || val[i] == null)){ - rtn = true - } - } - - if (rtn === true) { - state.form.page = index + 1; - return false; - } - - // if(!pattern.test(val.link)){ - // state.form.page = index+1 - // return false - // } - if(val.link){ - val.link = val.link.trim() - } - - if (val.btns && val.btns.length > 0) { - for (let btn of val.btns) { - let rtn = Object.values(btn).some((v) => { - return v == "" || v == null; - }); - - if (rtn === true) { - state.form.page = index + 1; - return false; - } - btn.link = btn.link.trim() - - if (!pattern.test(btn.link)) { - state.form.page = index + 1; - return false; - } - } - } - } - return true; - } - - function validateBtn(data) { - return false; - } return { ...toRefs(state), - sizeArr, + sizeColumns, showPreview, + showMovie, + showMvPopup, + showTitleSizePicker, + showDescSizePicker, flexRef, crop, - myCrop, addCard, delCard, moveCard, @@ -415,10 +321,9 @@ export default defineComponent({ afterRead, handlePreview, handleDelete, - changeSize, + onTitleSizeConfirm, + onDescSizeConfirm, handleSubmit, - onCrop, - onClose, }; }, }); @@ -426,58 +331,65 @@ export default defineComponent({