Merge branch 'sta'

src/api/card.js

@@ -3,3 +3,8 @@ import ajax from "./ajax";
 export const getCardData = async () =>
   ajax(`/Card/getCardData`);
   
+export const updateRemark = async (params) =>
+  ajax(`/card/updateRemark`, params, "POST");
+
+export const updateIsSend = async (params) =>
+  ajax(`/card/updateIsSend`, params, "POST");

src/api/index.js

@@ -100,4 +100,3 @@ export const getUserCateList = async () =>
 
 export const updateUserCate = async (params) =>
   ajax(`/UserCate/updateUserCate`, params, "POST");
-

src/utils/card2.js

@@ -96,9 +96,9 @@ function genCard1(ctx) {
     altText: vcard.altText,
     contents: {
       type: "carousel",
-      contents: _.map(vcard.cards, (card, cardIdx) =>
-        renderCard({ ...ctx, card, cardIdx })
-      ),
+      contents: vcard.cards
+      .filter(card => card.isSend === true)
+      .map((card, cardIdx) => renderCard({ ...ctx, card, cardIdx }))
     },
   };
 }

src/views/Card/Edit.vue

@@ -2,11 +2,11 @@
 import Footer from "@/components/Footer.vue";
 import FlexView from "@/components/FlexView.vue";
 
-import { ref, onMounted , watch, computed,  nextTick } from "vue";
+import { ref, onMounted, watch, computed, nextTick } from "vue";
 
 import { useCardStore } from '@/store/card'
 
-import { useRouter,useRoute } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 
 import axios from "axios";
 import _ from "lodash";
@@ -54,6 +54,8 @@ const form = ref({
     titleSize: "xl",
     cards: [
       {
+        isSend: false,
+        aIsSend: false,
         bgColor: "#ffffff",
         desc: "",
         descColor: "#000000",
@@ -80,7 +82,9 @@ const defaultTheme = {
   descSize: "sm",
   titleColor: "#000000",
   ratio: "4:3",
-  isShow: true
+  isShow: true,
+  isSend: false,
+  aIsSend: false,
 }
 
 const userid = ref(route.query.user_id || null)
@@ -88,15 +92,15 @@ const userid = ref(route.query.user_id || null)
 onMounted(async () => {
 
   // 判斷query參數是否有userid
-  if(userid.value){
-        let res = await getCusCard( {userid: userid.value} )
+  if (userid.value) {
+    let res = await getCusCard({ userid: userid.value })
 
-        if(res.code===200){
-            if(res.data.cus_card && res.data.cus_card.length>0){
+    if (res.code === 200) {
+      if (res.data.cus_card && res.data.cus_card.length > 0) {
         form.value = JSON.parse(res.data.cus_card)
       }
     }
-  }else{
+  } else {
     if (cardStore.cusCard.cus_card && cardStore.cusCard.cus_card.length > 0) {
       form.value = JSON.parse(cardStore.cusCard.cus_card);
     }
@@ -232,6 +236,15 @@ const moveBtn = (type, index) => {
   }
 };
 
+const handleChangeIsSend = () => {
+  // 檢查form.json5.cards裏,isSend為true的數量是否大於10
+  let isSendCount = form.value.json5.cards.filter(card => card.isSend).length
+  if (isSendCount > 10) {
+    showFailToast('最多只能設定10張卡片為發送')
+    form.value.json5.cards[form.value.page - 1].isSend = false
+  }
+}
+
 const afterRead = async (file, name) => {
   crop.value.show = true
   const ofile = file.file
@@ -351,6 +364,7 @@ const handleDelete = () => {
 };
 
 const handlePreview = () => {
+  
   router.push({
     name: "CardPreview",
     state: { content: JSON.stringify(form.value) },
@@ -372,9 +386,9 @@ const onDescSizeConfirm = ({ selectedOptions }) => {
 const handleSubmit = async () => {
   let user_id;
 
-    if(!userid.value){
-        user_id= sessionStorage.getItem("uid");
-    }else{
+  if (!userid.value) {
+    user_id = sessionStorage.getItem("uid");
+  } else {
     user_id = userid.value;
   }
 
@@ -391,7 +405,7 @@ const handleSubmit = async () => {
     user_id: user_id,
   };
 
-  if(!userid.value){
+  if (!userid.value) {
     let res = cardStore.updateCusCard(cusCard);
     if (res) {
       showSuccessToast("建立成功");
@@ -400,7 +414,7 @@ const handleSubmit = async () => {
     }
     router.push("/card");
 
-  }else{
+  } else {
     let res = await updateCusCard(cusCard);
     if (res.code === 200) {
       showSuccessToast("建立成功");
@@ -413,9 +427,9 @@ const handleSubmit = async () => {
 };
 
 const goBack = () => {
-  if(!userid.value){
+  if (!userid.value) {
     router.push('/')
-  }else{
+  } else {
     router.push('/auth/getauth')
   }
 };
@@ -458,7 +472,8 @@ const goBack = () => {
               allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
               allowfullscreen></iframe>
           </van-popup>
-          <van-field v-model="userid" label="會員編號" name="" input-align="right" :placeholder="userid" readonly v-if="userid"/>
+          <van-field v-model="userid" label="會員編號" name="" input-align="right" :placeholder="userid" readonly
+            v-if="userid" />
           <van-field v-model="form.title" label="標題文字" name="" input-align="right" error-message-align="right"
             placeholder="請輸入您在名片切換時顯示的文字" :rules="[{ required: true, message: '標題文字必填' }]" />
           <van-field label="是否顯示於感應名片" class="longText" input-align="right">
@@ -476,11 +491,11 @@ const goBack = () => {
                 <ul class="nav nav-tabs">
                   <li class="nav-item" v-for="(card, index) in form.json5.cards" :key="index"
                     @click="form.page = index + 1">
-                    <button type="button" class="nav-link" :class="{ active: form.page === index + 1 }">
+                    <button type="button" class="nav-link" :class="{ active: form.page === index + 1,send: card.isSend === true && form.page !== index + 1 }">
                       {{ index + 1 }}
                     </button>
                   </li>
-                  <li class="nav-item" @click="addCard" v-if="form.json5.cards.length < 10">
+                  <li class="nav-item" @click="addCard">
                     <button type="button" class="nav-link">
                       <i class="fa fa-plus-circle"></i> 新增
                     </button>
@@ -504,6 +519,12 @@ const goBack = () => {
                     @click="delCard(form.page)"></van-button>
                 </template>
               </van-field>
+              <van-field label="是否發送" class="longText" input-align="right">
+                <template #input>
+                  <van-switch v-model="form.json5.cards[form.page - 1].isSend" size="18px" active-color="#345068"
+                    inactive-color="#888888" @change="handleChangeIsSend" />
+                </template>
+              </van-field>
 
               <van-field v-model="form.json5.cards[form.page - 1].bgColor" label="卡片底色" id="vcard-bgColor"
                 input-align="right" placeholder="請輸入卡片底色的色碼，如：#333333" :border="false"
@@ -542,12 +563,8 @@ const goBack = () => {
                 </template>
               </van-field>
 
-              <van-field
-                label="圖片網址連結"
-                v-model="form.json5.cards[form.page - 1].link"
-                :border="false"
-                placeholder="需輸入完整網址,http://..,https://..."
-              />
+              <van-field label="圖片網址連結" v-model="form.json5.cards[form.page - 1].link" :border="false"
+                placeholder="需輸入完整網址,http://..,https://..." />
 
               <van-divider :style="{
                 color: '#345068',
@@ -555,14 +572,15 @@ const goBack = () => {
                 padding: '0 16px',
               }"><strong>卡片標題</strong></van-divider>
 
-              <van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title" input-align="right"
-                placeholder="請填寫卡片標題文字" :rules="[{ required: true, message: '請填寫卡片標題文字' }]" />
+              <van-field v-model="form.json5.cards[form.page - 1].title" label="標題文字" id="vcard-title"
+                input-align="right" placeholder="請填寫卡片標題文字" :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-picker :columns="sizeColumns" @cancel="showTitleSizePicker = false"
+                  @confirm="onTitleSizeConfirm" />
               </van-popup>
 
               <van-field v-model="form.json5.cards[form.page - 1].titleColor" label="標題文字顏色" id="vcard-titleColor"
@@ -591,7 +609,8 @@ const goBack = () => {
               </van-popup>
 
               <van-field v-model="form.json5.cards[form.page - 1].descColor" label="說明文字顏色" id="vcard-descColor"
-                input-align="right" placeholder="請輸入說明文字的色碼，如：#333333" :rules="[{ required: true, message: '說明文字色碼必填' }]">
+                input-align="right" placeholder="請輸入說明文字的色碼，如：#333333"
+                :rules="[{ required: true, message: '說明文字色碼必填' }]">
                 <template #button>
                   <input v-model="form.json5.cards[form.page - 1].descColor" type="color" class="form-control-color" />
                 </template>
@@ -620,9 +639,11 @@ const goBack = () => {
                     <van-field :label="`控制按鈕 ${index + 1}`" :border="false" class="bg-transparent">
                       <template #button>
                         <van-button size="small" class="bg-transparent border-0" icon="arrow-up"
-                          @click="moveBtn(0, index)" v-if="form.json5.cards[form.page - 1].btns.length > 1"></van-button>
+                          @click="moveBtn(0, index)"
+                          v-if="form.json5.cards[form.page - 1].btns.length > 1"></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>
+                          @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>
@@ -692,9 +713,8 @@ const goBack = () => {
 </template>
 
 <style lang="less" scoped>
-
 .edit {
-  :deep(.van-van-field__control--min-height){
+  :deep(.van-van-field__control--min-height) {
     min-height: 100px;
   }
 
@@ -742,6 +762,12 @@ const goBack = () => {
       background-color: #4a677d;
       border-color: #4a677d #4a677d #4a677d;
     }
+
+    .nav-link.send {
+      background-color: #ccc;
+      border-color: #ccc #ccc #ccc;
+    }
+
   }
 
   .previewCnt {
@@ -812,5 +838,4 @@ const goBack = () => {
     background-color: #fff;
   }
 }
-
 </style>

src/views/Send/index.vue

@@ -7,6 +7,8 @@ import { onMounted, ref, computed, watch } from 'vue'
 
 import { getCard, getCusCard, getVipCard, updateSendCount, getFlexcard } from '@/api'
 
+import { updateRemark, updateIsSend } from '@/api/card.js'
+
 import { cardFactory } from '@/utils/card'
 
 import { genCard1 } from '@/utils/card2'
@@ -29,7 +31,10 @@ const state = ref({
   flexContent: {},
 })
 
-const activeName = ref('0');
+const activeName = ref('0')
+
+const is_send = ref(0)
+const remark = ref('')
 
 let flexRef = ref(null)
 
@@ -63,6 +68,10 @@ onMounted(async () => {
 watch(() => activeName.value, function (newVal, oldVal) {
   if (newVal !== oldVal) {
     showFlex(newVal)
+    if(parseInt(newVal) < 2){
+      is_send.value = 0
+      remark.value = ''
+    }
   }
 }, { immediate: true })
 
@@ -93,7 +102,7 @@ async function showFlex(id) {
             let data = res2.data;
             data.ad_image = imageUrl.value + data.ad_image;
             state.value.flexContent = genAdCard(JSON.parse(card), data);
-          }else{
+          } else {
             state.value.flexContent = JSON.parse(card)
           }
         }
@@ -133,6 +142,9 @@ async function showFlex(id) {
           flexRef.value.innerHTML = ''
           flex2html("flex", state.value.flexContent)
         }
+        is_send.value = res.is_send
+        remark.value = res.remark
+
         // if( card2Res.code === 200){
         //   if(card2Res.data.cus_card){
         //     state.flexContent = genCard1(JSON.parse(card2Res.data.cus_card))
@@ -147,6 +159,22 @@ async function showFlex(id) {
   }
 }
 
+const handleOnChange = async () => {
+  // 更新
+  let res = await updateIsSend({is_send:is_send.value,id:activeName.value})
+  if(res.code !== 200){
+    showToast('更新失敗')
+  }
+}
+
+const handleOnBlur = async () => {
+  // 更新
+  let res = await updateRemark({remark:remark.value,id:activeName.value})
+  if(res.code !== 200){
+    showToast('更新失敗')
+  }
+}
+
 const sendEcard = async () => {
   if (!liff.isLoggedIn()) {
     liff.login({ redirectUri: window.location.href })
@@ -154,7 +182,6 @@ const sendEcard = async () => {
   
   let content = JSON.parse(JSON.stringify(state.value.flexContent))
 
-  // console.log('content', JSON.stringify(state.value.flexContent))
   let res
 
   if (activeName.value === '0') {
@@ -164,8 +191,16 @@ const sendEcard = async () => {
         'text': '名片的文字、數字，都可連結，請多多指教！'
       }])
   } else {
+    if(is_send.value === 1){
+      res = await liff.shareTargetPicker([content,
+      {
+        'type': 'text',
+        'text': remark.value
+      }])
+    }else{
       res = await liff.shareTargetPicker([content])
     }
+  }
 
   if (res.status === 'success') {
     let result = await updateSendCount(userInfo.value.user_id)
@@ -266,6 +301,16 @@ const changeTpl = async (val) => {
     </div>
 
     <van-sticky position="bottom">
+      <div v-if="parseInt(activeName) > 1" style="padding-top: 20px;">
+        <van-cell-group inset>
+          <van-cell center title="是否發送">
+            <template #right-icon>
+              <van-switch :active-value="1" :inactive-value="0" v-model="is_send" @change="handleOnChange"/>
+            </template>
+          </van-cell>
+          <van-field v-model="remark" label="分享內容附帶說明" label-width="120" nplaceholder="" @blur="handleOnBlur"/>
+        </van-cell-group>
+      </div>
       <div class="bottomBtnCnt d-flex">
         <van-button block class="btn-skyBlue m-2" @click="sendEcard">
           <h6><i class="fa-solid fa-share-from-square"></i> 分享好友</h6>