0000803

src/views/Card/Edit.vue

@@ -2,7 +2,7 @@
 import Footer from "@/components/Footer.vue";
 import FlexView from "@/components/FlexView.vue";
 
-import { ref, reactive, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 import { useCardStore } from '@/store/card'
 
@@ -11,10 +11,8 @@ import { useRouter } from "vue-router";
 import axios from "axios";
 import _ from "lodash";
 
-import { showToast, showLoadingToast, showSuccessToast,showFailToast } from "vant";
+import { showToast, showLoadingToast, showSuccessToast, showFailToast } from "vant";
 
-import { Cropper } from "vue-advanced-cropper";
-import "vue-advanced-cropper/dist/style.css";
 import { onMounted } from "vue";
 
 const URL = window.URL || window.webkitURL;
@@ -33,18 +31,9 @@ const showDescSizePicker = ref(false);
 let flexRef = ref(null);
 
 const showMvPopup = () => {
-  console.log("test");
   showMovie.value = true;
 };
 
-const crop = ref({
-  show: false,
-  img: null,
-  outputType: "jpeg",
-  autoCrop: true,
-  autoCropWidth: 200,
-  autoCropHeight: 200,
-});
 
 // let state = reactive({
 //   imagePath: "",
@@ -79,6 +68,21 @@ const form = ref({
   },
 });
 
+const defaultTheme = {
+  bgColor: "#ffffff",
+  desc: "",
+  descColor: "#000000",
+  image: "",
+  // link: "",
+  title: "",
+  titleSize: "xl",
+  descSize: "sm",
+  titleColor: "#000000",
+  ratio: "4:3",
+  isShow: true
+}
+
+
 onMounted(() => {
   if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) {
     form.value = JSON.parse(cardStore.cusCard.cus_card);
@@ -191,9 +195,9 @@ const moveBtn = (type, index) => {
         form.value.json5.cards[form.value.page - 1].btns[index],
         form.value.json5.cards[form.value.page - 1].btns[index - 1],
       ] = [
-        form.value.json5.cards[form.value.page - 1].btns[index - 1],
+          form.value.json5.cards[form.value.page - 1].btns[index - 1],
-        form.value.json5.cards[form.value.page - 1].btns[index],
+          form.value.json5.cards[form.value.page - 1].btns[index],
-      ];
+        ];
     }
   } else {
     if (index + 1 !== form.value.json5.cards[form.value.page - 1].btns.length) {
@@ -201,45 +205,127 @@ const moveBtn = (type, index) => {
         form.value.json5.cards[form.value.page - 1].btns[index + 1],
         form.value.json5.cards[form.value.page - 1].btns[index],
       ] = [
-        form.value.json5.cards[form.value.page - 1].btns[index],
+          form.value.json5.cards[form.value.page - 1].btns[index],
-        form.value.json5.cards[form.value.page - 1].btns[index + 1],
+          form.value.json5.cards[form.value.page - 1].btns[index + 1],
-      ];
+        ];
     }
   }
 };
 
 const afterRead = async (file, name) => {
-  // crop.value.show = true
+  crop.value.show = true
-  // const ofile = file.file
+  const ofile = file.file
-  // crop.value.img = URL.createObjectURL(ofile);
+  crop.value.img = URL.createObjectURL(ofile);
+
+  // const imgFile = new FormData();
+  // imgFile.append("fileType", "IMAGE");
+  // imgFile.append("file", file.file);
+
+  // 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) {
+  //   form.value.json5.cards[form.value.page - 1].image = res.data.data;
+
+  //   showSuccessToast("上傳成功");
+  // } else {
+  //   showToast.fail("上傳失敗");
+  // }
 
-  const imgFile = new FormData();
+  // return;
-  imgFile.append("fileType", "IMAGE");
+};
-  imgFile.append("file", file.file);
 
-  showLoadingToast({
+// START: 圖片剪裁
-    duration: 0,
+// Author: Wayne
-    message: "圖片上傳中...",
+import { Cropper } from "vue-advanced-cropper";
-    forbidClick: true,
+import "vue-advanced-cropper/dist/style.css";
-  });
 
-  let res = await axios.post(
+const myCrop = ref(null);
-    `${import.meta.env.VITE_APP_API_URL}/card/uploadfile`,
-    imgFile,
-    {}
-  );
 
-  if (res.data.code == 200) {
+const crop = ref({
-    form.value.json5.cards[form.value.page - 1].image = res.data.data;
+  show: false,
+  img: null,
+  outputType: "jpeg",
+  autoCrop: true,
+  autoCropWidth: 200,
+  autoCropHeight: 200,
+});
 
-    showSuccessToast("上傳成功");
+const onCrop = () => {
-  } else {
+  const { canvas } = myCrop.value.getResult();
-    showToast.fail("上傳失敗");
+  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) {
+        form.value.json5.cards[form.value.page - 1].image = res.data.data;
+
+        showSuccessToast("上傳成功");
+      } else {
+        showFailToast("上傳失敗");
+      }
+    }, "image/jpeg");
   }
 
   return;
 };
 
+const onClose = () => {
+  crop.value.show = false;
+};
+
+const setRatio = (type) => {
+  switch (type) {
+    case 1:
+      form.value.json5.cards[form.value.page - 1].ratio = '4:3';
+      defaultTheme.ratio = '4:3'
+      break;
+    case 2:
+      form.value.json5.cards[form.value.page - 1].ratio = '1:1';
+      defaultTheme.ratio = '1:1'
+      break;
+    case 3:
+      form.value.json5.cards[form.value.page - 1].ratio = '4:5';
+      defaultTheme.ratio = '4:5'
+      break;
+    default:
+      break;
+  }
+}
+
+const ratioToNumber = computed(() => {
+  let ratioArr = form.value.json5.cards[form.value.page - 1].ratio.split(':')
+  return (parseInt(ratioArr[0]) / parseInt(ratioArr[1]))
+})
+
+// END: 圖片剪裁
+
 const handleDelete = () => {
   form.value.json5.cards[form.value.page - 1].image = "";
 };
@@ -280,10 +366,10 @@ const handleSubmit = async () => {
 
   let res = cardStore.updateCusCard(cusCard);
 
-  if(res){
+  if (res) {
     showSuccessToast("建立成功");
-  }else{
+  } else {
-    showFailToast("建立失敗");    
+    showFailToast("建立失敗");
   }
 
   // let res = await updateCusCard(cusCard);
@@ -300,24 +386,17 @@ const handleSubmit = async () => {
 
 <template>
   <div class="edit page">
-    <van-nav-bar
+    <van-nav-bar class="bg-skyBlue py-1" left-arrow @click-left="$router.push('/')">
-      class="bg-skyBlue py-1"
-      left-arrow
-      @click-left="$router.push('/')"
-      >
       <template #title>
         <h5 class="text-white mb-1"><strong>商務卡片設定</strong></h5>
       </template>
       <template #left>
         <h4>
-          <i
+          <i class="fa-solid fa-angle-left text-white" :style="{ opacity: 0.5 }"></i>
-          class="fa-solid fa-angle-left text-white"
-          :style="{ opacity: 0.5 }"
-          ></i>
         </h4>
       </template>
     </van-nav-bar>
-  
+
     <div class="content">
       <van-form @submit="handleSubmit">
         <van-cell-group inset>
@@ -328,58 +407,25 @@ const handleSubmit = async () => {
             </template>
             <template #extra>
               <!-- <van-button size="small" class="ml-1 btn-moBlue" icon="tv-o" hairline @click="$router.push('/card/video')">教學影片</van-button> -->
-              <van-button
+              <van-button size="small" class="ml-1 btn-skyBlue" icon="tv-o" hairline
-                size="small"
+                @click="showMovie = true">教學影片</van-button>
-                class="ml-1 btn-skyBlue"
+              <van-button size="small" class="ml-1 btn-skyBlue" icon="eye-o" hairline
-                icon="tv-o"
+                @click="handlePreview">名片預覽</van-button>
-                hairline
-                @click="showMovie = true"
-                >教學影片</van-button
-              >
-              <van-button
-                size="small"
-                class="ml-1 btn-skyBlue"
-                icon="eye-o"
-                hairline
-                @click="handlePreview"
-                >名片預覽</van-button
-              >
             </template>
           </van-cell>
 
           <van-popup v-model:show="showMovie" class="p-3" closeable>
-            <iframe
+            <iframe width="375" height="215" src="https://www.youtube.com/embed/fjZsQ0Rh6yk" title="Utel電子名片教學"
-              width="375"
-              height="215"
-              src="https://www.youtube.com/embed/fjZsQ0Rh6yk"
-              title="Utel電子名片教學"
               frameborder="0"
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
+              allowfullscreen></iframe>
-            ></iframe>
           </van-popup>
 
-          <van-field
+          <van-field v-model="form.title" label="標題文字" name="" input-align="right" error-message-align="right"
-            v-model="form.title"
+            placeholder="請輸入您在名片切換時顯示的文字" :rules="[{ required: true, message: '標題文字必填' }]" />
-            label="標題文字"
+          <van-field label="是否顯示於感應名片" class="longText" input-align="right">
-            name=""
-            input-align="right"
-            error-message-align="right"
-            placeholder="請輸入您在名片切換時顯示的文字"
-            :rules="[{ required: true, message: '標題文字必填' }]"
-          />
-          <van-field
-            label="是否顯示於感應名片"
-            class="longText"
-            input-align="right"
-          >
             <template #input>
-              <van-switch
+              <van-switch v-model="form.showNfc" size="18px" active-color="#345068" inactive-color="#888888" />
-                v-model="form.showNfc"
-                size="18px"
-                active-color="#345068"
-                inactive-color="#888888"
-              />
             </template>
           </van-field>
         </van-cell-group>
@@ -390,25 +436,13 @@ const handleSubmit = async () => {
 
               <div class="bg-lightPink px-2 pt-3">
                 <ul class="nav nav-tabs">
-                  <li
+                  <li class="nav-item" v-for="(card, index) in form.json5.cards" :key="index"
-                    class="nav-item"
+                    @click="form.page = index + 1">
-                    v-for="(card, index) in form.json5.cards"
+                    <button type="button" class="nav-link" :class="{ active: form.page === index + 1 }">
-                    :key="index"
-                    @click="form.page = index + 1"
-                  >
-                    <button
-                      type="button"
-                      class="nav-link"
-                      :class="{ active: form.page === index + 1 }"
-                    >
                       {{ index + 1 }}
                     </button>
                   </li>
-                  <li
+                  <li class="nav-item" @click="addCard" v-if="form.json5.cards.length < 10">
-                    class="nav-item"
-                    @click="addCard"
-                    v-if="form.json5.cards.length < 10"
-                  >
                     <button type="button" class="nav-link">
                       <i class="fa fa-plus-circle"></i> 新增
                     </button>
@@ -416,91 +450,43 @@ const handleSubmit = async () => {
                 </ul>
               </div>
 
-              <van-divider
+              <van-divider :style="{
-                :style="{
+                color: '#345068',
-                  color: '#345068',
+                borderColor: '#345068',
-                  borderColor: '#345068',
+                padding: '0 16px',
-                  padding: '0 16px',
+              }"><strong>卡片設定</strong></van-divider>
-                }"
+
-                ><strong>卡片設定</strong></van-divider
+              <van-field label="調整卡片順序" :border="false" v-if="form.json5.cards.length > 1">
-              >
-              
-              <van-field
-                label="調整卡片順序"
-                :border="false"
-                v-if="form.json5.cards.length > 1"
-              >
                 <template #button>
-                  <van-button
+                  <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow-left"
-                    size="small"
+                    @click="moveCard(0, form.page)">前移</van-button>
-                    class="ml-1 btn-skyBlue"
+                  <van-button size="small" class="ml-1 btn-skyBlue" icon="arrow"
-                    icon="arrow-left"
+                    @click="moveCard(1, form.page)">後移</van-button>
-                    @click="moveCard(0, form.page)"
+                  <van-button size="small" class="ml-1 btn-tomatoRed" icon="delete-o"
-                    >前移</van-button
+                    @click="delCard(form.page)"></van-button>
-                  >
-                  <van-button
-                    size="small"
-                    class="ml-1 btn-skyBlue"
-                    icon="arrow"
-                    @click="moveCard(1, form.page)"
-                    >後移</van-button
-                  >
-                  <van-button
-                    size="small"
-                    class="ml-1 btn-tomatoRed"
-                    icon="delete-o"
-                    @click="delCard(form.page)"
-                  ></van-button>
                 </template>
               </van-field>
 
-              <van-field
+              <van-field v-model="form.json5.cards[form.page - 1].bgColor" label="卡片底色" id="vcard-bgColor"
-                v-model="form.json5.cards[form.page - 1].bgColor"
+                input-align="right" placeholder="請輸入卡片底色的色碼，如：#333333" :border="false"
-                label="卡片底色"
+                :rules="[{ required: true, message: '卡片底色色碼必填' }]">
-                id="vcard-bgColor"
-                input-align="right"
-                placeholder="請輸入卡片底色的色碼，如：#333333"
-                :border="false"
-                :rules="[{ required: true, message: '卡片底色色碼必填' }]"
-              >
                 <template #button>
-                  <input
+                  <input v-model="form.json5.cards[form.page - 1].bgColor" type="color" class="form-control-color" />
-                    v-model="form.json5.cards[form.page - 1].bgColor"
-                    type="color"
-                    class="form-control-color"
-                  />
                 </template>
               </van-field>
 
-              <van-divider
+              <van-divider :style="{
-                :style="{
+                color: '#345068',
-                  color: '#345068',
+                borderColor: '#345068',
-                  borderColor: '#345068',
+                padding: '0 16px',
-                  padding: '0 16px',
+              }"><strong>內容圖片設定</strong></van-divider>
-                }"
+
-                ><strong>內容圖片設定</strong></van-divider
+              <van-field v-model="form.json5.cards[form.page - 1].ratio" :border="false">
-              >
-
-              <van-field
-                v-model="form.json5.cards[form.page - 1].ratio"
-                :border="false"
-              >
                 <template #input>
-                  <van-uploader
+                  <van-uploader :after-read="afterRead" :max-count="1" name="cardimage" @delete="handleDelete">
-                    :after-read="afterRead"
+                    <template v-if="form.json5.cards[form.page - 1].image.length > 0">
-                    :max-count="1"
-                    name="cardimage"
-                    @delete="handleDelete"
-                  >
-                    <template
-                      v-if="form.json5.cards[form.page - 1].image.length > 0"
-                    >
                       <div class="upload-main">
-                        <img
+                        <img class="upload-img" :src="form.json5.cards[form.page - 1].image" alt="" />
-                          class="upload-img"
-                          :src="form.json5.cards[form.page - 1].image"
-                          alt=""
-                        />
                         <p class="ml-3 px-2 py-1 text-white bg-moBlue rounded-pill">
                           <i class="fa-solid fa-arrow-up"></i> 點擊更換圖片
                         </p>
@@ -508,10 +494,7 @@ const handleSubmit = async () => {
                     </template>
                     <template v-else>
                       <div class="upload-main">
-                        <img
+                        <img class="upload-img" src="@/assets/images/upload.jpg" />
-                          class="upload-img"
-                          src="@/assets/images/upload.jpg"
-                        />
                         <p class="ml-3 px-2 py-1 text-white bg-skyBlue rounded-pill">
                           <i class="fa-solid fa-arrow-up"></i> 請上傳圖片
                         </p>
@@ -521,254 +504,106 @@ const handleSubmit = async () => {
                 </template>
               </van-field>
 
-              <van-field
+              <van-divider :style="{
-                v-model="form.json5.cards[form.page - 1].ratio"
+                color: '#345068',
-                label="圖片長寬比"
+                borderColor: '#345068',
-                id="vcard-ratio"
+                padding: '0 16px',
-                input-align="right"
+              }"><strong>卡片標題</strong></van-divider>
-                :border="false"
+
-                placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
+              <van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title" input-align="right"
-              />
+                placeholder="連結(需輸入完整網址,http://..,https://...)" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" />
-
+
-              <van-divider
+              <van-field v-model="form.json5.cards[form.page - 1].titleSize" is-link readonly label="標題文字大小"
-                :style="{
+                id="vcard-titleSize" input-align="right" placeholder="請輸入標題文字的色碼，如：#333333"
-                  color: '#345068',
+                @click="showTitleSizePicker = true" />
-                  borderColor: '#345068',
+              <van-popup v-model:show="showTitleSizePicker" round position="bottom">
-                  padding: '0 16px',
+                <van-picker :columns="sizeColumns" @cancel="showTitleSizePicker = false" @confirm="onTitleSizeConfirm" />
-                }"
-                ><strong>卡片標題</strong></van-divider
-              >
-
-              <van-field
-                v-model="form.json5.cards[form.page - 1].title"
-                label="標題文字"
-                id="vcard-title"
-                input-align="right"
-                placeholder="連結(需輸入完整網址,http://..,https://...)"
-                :rules="[{ required: true, message: '請填寫卡片標題文字' }]"
-              />
-
-              <van-field
-                v-model="form.json5.cards[form.page - 1].titleSize"
-                is-link
-                readonly
-                label="標題文字大小"
-                id="vcard-titleSize"
-                input-align="right"
-                placeholder="請輸入標題文字的色碼，如：#333333"
-                @click="showTitleSizePicker = true"
-              />
-              <van-popup
-                v-model:show="showTitleSizePicker"
-                round
-                position="bottom"
-              >
-                <van-picker
-                  :columns="sizeColumns"
-                  @cancel="showTitleSizePicker = false"
-                  @confirm="onTitleSizeConfirm"
-                />
               </van-popup>
 
-              <van-field
+              <van-field v-model="form.json5.cards[form.page - 1].titleColor" label="標題文字顏色" id="vcard-titleColor"
-                v-model="form.json5.cards[form.page - 1].titleColor"
+                input-align="right" placeholder="請輸入標題文字的色碼，如：#333333" :border="false"
-                label="標題文字顏色"
+                :rules="[{ required: true, message: '標題文字色碼必填' }]">
-                id="vcard-titleColor"
-                input-align="right"
-                placeholder="請輸入標題文字的色碼，如：#333333"
-                :border="false"
-                :rules="[{ required: true, message: '標題文字色碼必填' }]"
-              >
                 <template #button>
-                  <input
+                  <input v-model="form.json5.cards[form.page - 1].titleColor" type="color" class="form-control-color" />
-                    v-model="form.json5.cards[form.page - 1].titleColor"
-                    type="color"
-                    class="form-control-color"
-                  />
                 </template>
               </van-field>
 
-              <van-divider
+              <van-divider :style="{
-                :style="{
+                color: '#345068',
-                  color: '#345068',
+                borderColor: '#345068',
-                  borderColor: '#345068',
+                padding: '0 16px',
-                  padding: '0 16px',
+              }"><strong>卡片說明文字</strong></van-divider>
-                }"
+
-                ><strong>卡片說明文字</strong></van-divider
+              <van-field v-model="form.json5.cards[form.page - 1].desc" label="說明文字" label-align="top" id="vcard-desc"
-              >
+                type="textarea" maxlength="50" placeholder="請填寫卡片說明文字" show-word-limit
-
+                :rules="[{ required: true, message: '請填寫卡片說明文字' }]" />
-              <van-field
+
-                v-model="form.json5.cards[form.page - 1].desc"
+              <van-field v-model="form.json5.cards[form.page - 1].descSize" is-link readonly label="說明文字大小"
-                label="說明文字"
+                id="vcard-descSize" input-align="right" placeholder="請輸入說明文字的色碼，如：#333333"
-                label-align="top"
+                @click="showDescSizePicker = true" />
-                id="vcard-desc"
+              <van-popup v-model:show="showDescSizePicker" round position="bottom">
-                type="textarea"
+                <van-picker :columns="sizeColumns" @cancel="showDescSizePicker = false" @confirm="onDescSizeConfirm" />
-                maxlength="50"
-                placeholder="請填寫卡片說明文字"
-                show-word-limit
-                :rules="[{ required: true, message: '請填寫卡片說明文字' }]"
-              />
-
-              <van-field
-                v-model="form.json5.cards[form.page - 1].descSize"
-                is-link
-                readonly
-                label="說明文字大小"
-                id="vcard-descSize"
-                input-align="right"
-                placeholder="請輸入說明文字的色碼，如：#333333"
-                @click="showDescSizePicker = true"
-              />
-              <van-popup
-                v-model:show="showDescSizePicker"
-                round
-                position="bottom"
-              >
-                <van-picker
-                  :columns="sizeColumns"
-                  @cancel="showDescSizePicker = false"
-                  @confirm="onDescSizeConfirm"
-                />
               </van-popup>
 
-              <van-field
+              <van-field v-model="form.json5.cards[form.page - 1].descColor" label="說明文字顏色" id="vcard-descColor"
-                v-model="form.json5.cards[form.page - 1].descColor"
+                input-align="right" placeholder="請輸入說明文字的色碼，如：#333333" :rules="[{ required: true, message: '說明文字色碼必填' }]">
-                label="說明文字顏色"
-                id="vcard-descColor"
-                input-align="right"
-                placeholder="請輸入說明文字的色碼，如：#333333"
-                :rules="[{ required: true, message: '說明文字色碼必填' }]"
-              >
                 <template #button>
-                  <input
+                  <input v-model="form.json5.cards[form.page - 1].descColor" type="color" class="form-control-color" />
-                    v-model="form.json5.cards[form.page - 1].descColor"
-                    type="color"
-                    class="form-control-color"
-                  />
                 </template>
               </van-field>
 
-              <van-divider
+              <van-divider :style="{
-                :style="{
+                color: '#345068',
-                  color: '#345068',
+                borderColor: '#345068',
-                  borderColor: '#345068',
+                padding: '0 16px',
-                  padding: '0 16px',
+              }"><strong>按鈕連結設定</strong></van-divider>
-                }"
-                ><strong>按鈕連結設定</strong></van-divider
-              >
 
               <van-field label="新增按鈕" input-align="right" :border="false">
                 <template #button>
-                  <van-button
+                  <van-button size="small" class="ml-1 btn-tomatoRed" icon="add-o" @click="addBtn(form.page)">
-                    size="small"
+                    <h6>新增按鈕</h6>
-                    class="ml-1 btn-tomatoRed"
+                  </van-button>
-                    icon="add-o"
+                  <van-button size="small" class="ml-1 btn-skyBlue" icon="share-o" @click="addShareBtn(form.page)">
-                    @click="addBtn(form.page)"
+                    <h6>新增分享按鈕</h6>
-                    ><h6>新增按鈕</h6></van-button
+                  </van-button>
-                  >
-                  <van-button
-                    size="small"
-                    class="ml-1 btn-skyBlue"
-                    icon="share-o"
-                    @click="addShareBtn(form.page)"
-                    ><h6>新增分享按鈕</h6></van-button
-                  >
                 </template>
               </van-field>
 
               <div class="cardCnt">
-                <div
+                <div class="card shadow" v-for="(btn, index) in form.json5.cards[form.page - 1].btns" :key="index">
-                  class="card shadow"
-                  v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
-                  :key="index"
-                >
                   <div class="card-header">
-                    <van-field
+                    <van-field :label="`控制按鈕 ${index + 1}`" :border="false" class="bg-transparent">
-                      :label="`控制按鈕 ${index + 1}`"
-                      :border="false"
-                      class="bg-transparent"
-                    >
                       <template #button>
-                        <van-button
+                        <van-button size="small" class="bg-transparent border-0" icon="arrow-up"
-                          size="small"
+                          @click="moveBtn(0, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
-                          class="bg-transparent border-0"
+                        <van-button size="small" class="bg-transparent border-0" icon="arrow-down"
-                          icon="arrow-up"
+                          @click="moveBtn(1, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
-                          @click="moveBtn(0, index)"
+                        <van-button size="small" class="bg-transparent border-0" icon="delete-o"
-                          v-if="form.json5.cards[form.page - 1].btns.length > 1"
+                          @click="delBtn(index)"></van-button>
-                        ></van-button>
-                        <van-button
-                          size="small"
-                          class="bg-transparent border-0"
-                          icon="arrow-down"
-                          @click="moveBtn(1, index)"
-                          v-if="form.json5.cards[form.page - 1].btns.length > 1"
-                        ></van-button>
-                        <van-button
-                          size="small"
-                          class="bg-transparent border-0"
-                          icon="delete-o"
-                          @click="delBtn(index)"
-                        ></van-button>
                       </template>
                     </van-field>
                   </div>
                   <div class="card-body">
-                    <van-field
+                    <van-field v-model="btn.text" :label="`按鈕 ${index + 1} 文字`" id="cardbtn-text-0" input-align="right"
-                      v-model="btn.text"
+                      placeholder="請填寫按鈕文字" :rules="[{ required: true, message: '請填寫按鈕文字' }]" />
-                      :label="`按鈕 ${index + 1} 文字`"
+
-                      id="cardbtn-text-0"
+                    <van-field v-model="btn.link" :label="`按鈕 ${index + 1} 連結`" id="cardbtn-link-0" input-align="right"
-                      input-align="right"
+                      type="url" placeholder="連結(需輸入完整網址,http://..,https://...)"
-                      placeholder="請填寫按鈕文字"
+                      :rules="[{ required: true, message: '請填寫按鈕連結' }]" />
-                      :rules="[{ required: true, message: '請填寫按鈕文字' }]"
+
-                    />
+                    <van-field v-model="btn.color" label="按鈕背景顏色" id="vcard-titleColor" input-align="right"
-
+                      placeholder="請輸入標題文字的色碼，如：#333333" :rules="[{ required: true, message: '標題文字色碼必填' }]">
-                    <van-field
-                      v-model="btn.link"
-                      :label="`按鈕 ${index + 1} 連結`"
-                      id="cardbtn-link-0"
-                      input-align="right"
-                      type="url"
-                      placeholder="連結(需輸入完整網址,http://..,https://...)"
-                      :rules="[{ required: true, message: '請填寫按鈕連結' }]"
-                    />
-
-                    <van-field
-                      v-model="btn.color"
-                      label="按鈕背景顏色"
-                      id="vcard-titleColor"
-                      input-align="right"
-                      placeholder="請輸入標題文字的色碼，如：#333333"
-                      :rules="[{ required: true, message: '標題文字色碼必填' }]"
-                    >
                       <template #button>
-                        <input
+                        <input v-model="btn.color" type="color" class="colorCube" />
-                          v-model="btn.color"
-                          type="color"
-                          class="colorCube"
-                        />
                       </template>
                     </van-field>
 
-                    <van-field
+                    <van-field v-model="btn.btnHeight" label="按鈕大小" id="vcard-btnHeight" input-align="right"
-                      v-model="btn.btnHeight"
+                      :border="false" :rules="[{ required: true, message: '按鈕大小必填' }]">
-                      label="按鈕大小"
-                      id="vcard-btnHeight"
-                      input-align="right"
-                      :border="false"
-                      :rules="[{ required: true, message: '按鈕大小必填' }]"
-                    >
                       <template #input>
-                        <van-radio-group
+                        <van-radio-group direction="horizontal" v-model="btn.btnHeight" checked-color="#345068">
-                          direction="horizontal"
+                          <van-radio name="sm" @click="btn.btnHeight = 'sm'">sm</van-radio>
-                          v-model="btn.btnHeight"
+                          <van-radio name="md" @click="btn.btnHeight = 'md'">md</van-radio>
-                          checked-color="#345068"
-                        >
-                          <van-radio name="sm" @click="btn.btnHeight = 'sm'"
-                            >sm</van-radio
-                          >
-                          <van-radio name="md" @click="btn.btnHeight = 'md'"
-                            >md</van-radio
-                          >
                         </van-radio-group>
                       </template>
                     </van-field>
@@ -787,12 +622,35 @@ const handleSubmit = async () => {
       </van-form>
     </div>
   </div>
+  <van-overlay :show="crop.show" @click="crop.show = false" />
+  <div class="cropper-section" v-if="crop.show">
+    <div class="crop-area">
+      <cropper class="cropper" ref="myCrop" :src="crop.img" :stencil-props="{
+        aspectRatio: ratioToNumber,
+      }" :auto-zoom="true" />
+    </div>
+    <div class="crop-btn">
+      <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
+        <button type="button" class="btn btn-outline-success" @click="setRatio(1)"
+          :class="{ active: form.json5.cards[form.page - 1].ratio == '4:3' }">橫向4:3</button>
+        <button type="button" class="btn btn-outline-success" @click="setRatio(2)"
+          :class="{ active: form.json5.cards[form.page - 1].ratio == '1:1' }">方形1:1</button>
+        <button type="button" class="btn btn-outline-success" @click="setRatio(3)"
+          :class="{ active: form.json5.cards[form.page - 1].ratio == '4:5' }">直向4:5</button>
+      </div>
+      <div>
+        <van-button type="primary" size="small" plain @click="onClose">取消</van-button>
+        <van-button type="success" size="small" plain @click="onCrop">剪裁</van-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped>
+.edit {
 
-.edit{
+  .colorCube,
-  .colorCube,.colorCube:valid {
+  .colorCube:valid {
     appearance: none;
     background: 0 0;
     border: 1px solid #ced4da;
@@ -800,13 +658,17 @@ const handleSubmit = async () => {
     padding: 0 2px;
     border-radius: 5px;
   }
+
   .flex-section {
     width: 100%;
   }
-  :deep(.van-field__control){
+
+  :deep(.van-field__control) {
     justify-content: center;
+
     .upload-main {
       flex-direction: column;
+
       .upload-img {
         margin: 5px 0;
         width: 250px;
@@ -816,51 +678,89 @@ const handleSubmit = async () => {
   }
 
 
-  .nav-tabs{
+  .nav-tabs {
-    .nav-link{
+    .nav-link {
       color: #4a677d;
       background-color: #fff;
       border-color: transparent;
       margin-right: 4px;
     }
+
     .nav-item.show .nav-link,
-    .nav-link.active { 
+    .nav-link.active {
-        color: #fff;
+      color: #fff;
-        background-color: #4a677d;
+      background-color: #4a677d;
-        border-color: #4a677d #4a677d #4a677d;
+      border-color: #4a677d #4a677d #4a677d;
     }
   }
 
-  .previewCnt{
+  .previewCnt {
     display: flex;
     justify-content: center;
     padding: 15px 0;
     background-color: #333;
-    .card{
+
-      width:300px;
+    .card {
+      width: 300px;
       border: none;
       // transform: scale(0.75);
       overflow: hidden;
-      .card-body{
+
+      .card-body {
         padding: 15px;
       }
     }
   }
 
-  .cardCnt{
+  .cardCnt {
     padding: 15px;
-    .card{
+
-        margin-bottom: 20px;
+    .card {
-        .card-header{
+      margin-bottom: 20px;
-            padding: 0;        
+
-            background-color: #ddd ;
+      .card-header {
-            border: none;
+        padding: 0;
-        }
+        background-color: #ddd;
-        .card-body{
+        border: none;
-            padding:10px 0;
+      }
-        }
+
+      .card-body {
+        padding: 10px 0;
+      }
     }
   }
 }
 
+.cropper {
+  height: 300px;
+  // width: 300px;
+  background: #ddd;
+}
+
+.cropper-section {
+  margin: 0 auto;
+  position: fixed;
+  text-align: center;
+  top: 50px;
+  //   left: 0;
+  height: 350px;
+  width: 100%;
+  max-width: 500px;
+  background: #ddd;
+  z-index: 8888;
+
+  .crop-area {
+    margin: 5 auto;
+    width: 100%;
+    height: 330px;
+  }
+
+  .crop-btn {
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    background-color: #fff;
+  }
+}
+
 </style>