From cb230965324ca164efd494e3e102b6bafc25d816 Mon Sep 17 00:00:00 2001
From: "DESKTOP-8UQ1PPR\\09158" <kai326326@gmail.com>
Date: Mon, 13 Nov 2023 18:16:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=80=E9=83=A8=E8=AA=BF=E6=95=B4(=E6=9C=83?=
 =?UTF-8?q?=E5=93=A1=E7=AD=89=E7=B4=9A=E5=88=A4=E6=96=B7=E3=80=81form?=
 =?UTF-8?q?=E8=A1=A8=E9=81=9E=E4=BA=A4=E5=88=86=E9=96=8B=E3=80=81=E9=A6=96?=
 =?UTF-8?q?=E9=A0=81=E5=8F=8A=E5=95=86=E5=8B=99=E5=8D=A1=E6=8C=89=E9=88=95?=
 =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E6=9B=B4=E6=94=B9=E3=80=81preview=E9=A0=81?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/flex2html.css            |  4 +-
 src/assets/css/flex2html.css        |  4 +-
 src/assets/css/main.css             | 15 -----
 src/assets/sass/layout/_layout.scss | 16 +----
 src/components/Preview.vue          | 32 +++++++---
 src/views/Card/Edit.vue             | 97 +++++++++++++++++++++--------
 src/views/Home/index.vue            | 28 +++++----
 src/views/Member/index.vue          | 86 +++++++++++++++----------
 src/views/Send/index.vue            | 43 ++++++++++---
 9 files changed, 206 insertions(+), 119 deletions(-)

diff --git a/public/css/flex2html.css b/public/css/flex2html.css
index 998f133..f4c3e0e 100644
--- a/public/css/flex2html.css
+++ b/public/css/flex2html.css
@@ -45,9 +45,9 @@ strong {
   font-weight: bold;
 }
 .LySlider {
-  overflow: hidden;
+  /* overflow: hidden;
   overflow-x: scroll;
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; */
 }
 .LySlider::-webkit-scrollbar {
   display: none;
diff --git a/src/assets/css/flex2html.css b/src/assets/css/flex2html.css
index 7983220..717e39e 100644
--- a/src/assets/css/flex2html.css
+++ b/src/assets/css/flex2html.css
@@ -45,9 +45,9 @@ strong {
   font-weight: bold;
 }
 .LySlider {
-  overflow: hidden;
+  /* overflow: hidden;
   overflow-x: scroll;
-  -webkit-overflow-scrolling: touch;
+  -webkit-overflow-scrolling: touch; */
 }
 .LySlider::-webkit-scrollbar {
   display: none;
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index c05a4f9..8065886 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -692,21 +692,6 @@ 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 fb24e69..d179cf1 100644
--- a/src/assets/sass/layout/_layout.scss
+++ b/src/assets/sass/layout/_layout.scss
@@ -91,6 +91,7 @@
     }
 }
 
+
 /* =========================================  stage  ============================================= */
 
 .page{
@@ -140,21 +141,6 @@
     }
 }
 
-.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/components/Preview.vue b/src/components/Preview.vue
index f330436..0749ba6 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -1,9 +1,27 @@
 <template>
-    <van-nav-bar title="預覽:)" right-text="關閉" @click-right="$router.back()" />
-    <div class="flex-section">
-        <div class="table-responsive">
-            <div class="chatbox">
-                <div id="flex" ref="flexRef"></div>
+    <div class="preview page">
+        <van-nav-bar
+            class="bg-skyBlue py-1"
+            @click-left="$router.push('/card/edit')"
+        >
+            <template #title>
+                <h5 class="text-white mb-1"><strong>預覽</strong></h5>
+            </template>
+            <template #left>
+                <h4>
+                    <i
+                        class="fa-solid fa-angle-left text-white"
+                        :style="{ opacity: 0.5 }"
+                    ></i>
+                </h4>
+            </template>
+        </van-nav-bar>
+
+        <div class="flex-section">
+            <div class="table-responsive">
+                <div class="chatbox">
+                    <div id="flex" ref="flexRef"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -34,12 +52,12 @@ onDeactivated(() => {
 .flex-section {
     // color: white;
     // z-index: 99999;
-    background-color: #666;
+    background-color: #333;
 }
 
 
 .chatbox {
-    background-color: #666;
+    background-color: #333;
     margin-top: 10px;
     padding-top: 10px;
 }
diff --git a/src/views/Card/Edit.vue b/src/views/Card/Edit.vue
index 54d99a1..625ac4d 100644
--- a/src/views/Card/Edit.vue
+++ b/src/views/Card/Edit.vue
@@ -285,7 +285,7 @@ const handleSubmit = async () => {
   } else {
     showToast.fail("建立失敗");
   }
-  router.push("/");
+  router.push("/card/edit");
 };
 </script>
 
@@ -312,6 +312,7 @@ const handleSubmit = async () => {
 
       <div class="content">
         <van-cell-group inset class="">
+
           <van-cell class="bg-lightPink">
             <template #title>
               <h6 class="text-darkBlue"><strong>卡片設定</strong></h6>
@@ -332,7 +333,7 @@ const handleSubmit = async () => {
                 icon="eye-o"
                 hairline
                 @click="handlePreview"
-                >預覽</van-button
+                >名片預覽</van-button
               >
             </template>
           </van-cell>
@@ -377,6 +378,7 @@ const handleSubmit = async () => {
         <van-cell-group inset class="mt-3">
           <keep-alive>
             <div id="app">
+
               <!-- tab -->
               <div class="bg-lightPink px-2 pt-3">
                 <ul class="nav nav-tabs">
@@ -408,6 +410,15 @@ const handleSubmit = async () => {
               <!-- /tab -->
 
               <div class="py-2">
+                <van-divider
+                  :style="{
+                    color: '#345068',
+                    borderColor: '#345068',
+                    padding: '0 16px',
+                  }"
+                  ><strong>卡片設定</strong></van-divider
+                >
+                
                 <van-field
                   label="調整卡片順序"
                   :border="false"
@@ -437,23 +448,6 @@ const handleSubmit = async () => {
                   </template>
                 </van-field>
 
-                <van-divider
-                  :style="{
-                    color: '#345068',
-                    borderColor: '#345068',
-                    padding: '0 16px',
-                  }"
-                  ><strong>卡片設定</strong></van-divider
-                >
-
-                <van-field
-                  v-model="form.json5.cards[form.page - 1].ratio"
-                  label="卡片長寬比"
-                  id="vcard-ratio"
-                  input-align="right"
-                  placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
-                />
-
                 <van-field
                   v-model="form.json5.cards[form.page - 1].bgColor"
                   label="卡片底色"
@@ -526,6 +520,15 @@ const handleSubmit = async () => {
                   </template>
                 </van-field>
 
+                <van-field
+                  v-model="form.json5.cards[form.page - 1].ratio"
+                  label="圖片長寬比"
+                  id="vcard-ratio"
+                  input-align="right"
+                  :border="false"
+                  placeholder="請輸入圖片長寬比，比如：20:13、1:1、6:8"
+                />
+
                 <!-- <van-field 
                     v-model="form.json5.cards[form.page - 1].link"
                     label="圖片網址連結"
@@ -679,16 +682,13 @@ const handleSubmit = async () => {
                 </template>
               </van-field>
 
-              <div class="p-3">
+              <div class="cardCnt">
                 <div
-                  class="card shadow-sm"
+                  class="card shadow"
                   v-for="(btn, index) in form.json5.cards[form.page - 1].btns"
                   :key="index"
                 >
-                  <div
-                    class="card-header"
-                    :style="{ backgroundColor: btn.color }"
-                  >
+                  <div class="card-header">
                     <van-field
                       :label="`控制按鈕 ${index + 1}`"
                       :border="false"
@@ -816,4 +816,51 @@ const handleSubmit = async () => {
     width: 250px;
   }
 }
+
+
+.nav-tabs{
+  .nav-link{
+    color: #4a677d;
+    background-color: #fff;
+    border-color: transparent;
+    margin-right: 4px;
+  }
+  .nav-item.show .nav-link,
+  .nav-link.active { 
+      color: #fff;
+      background-color: #4a677d;
+      border-color: #4a677d #4a677d #4a677d;
+  }
+}
+
+.previewCnt{
+  display: flex;
+  justify-content: center;
+  padding: 15px 0;
+  background-color: #333;
+  .card{
+    width:300px;
+    border: none;
+    // transform: scale(0.75);
+    overflow: hidden;
+    .card-body{
+      padding: 15px;
+    }
+  }
+}
+
+.cardCnt{
+  padding: 15px;
+  .card{
+      margin-bottom: 20px;
+      .card-header{
+          padding: 0;        
+          background-color: #ddd ;
+          border: none;
+      }
+      .card-body{
+          padding:10px 0;
+      }
+  }
+}
 </style>
diff --git a/src/views/Home/index.vue b/src/views/Home/index.vue
index 9ff7f15..06beb52 100644
--- a/src/views/Home/index.vue
+++ b/src/views/Home/index.vue
@@ -254,11 +254,18 @@ const handleLogout = () => {
 
 <template>
   <div class="home page" v-cloak>
-    <van-nav-bar class="bg-darkBlue py-3">
+    <van-nav-bar
+      class="bg-darkBlue py-3"
+    >
       <template #title>
         <h4 class="text-white mb-1"><strong>UTEL電子名片系統</strong></h4>
         <a href="javascript:;"><h5 class="text-gray">歡迎來到會員中心</h5></a>
       </template>
+      <template #right>
+        <div class="btn btn-sm text-skyBlue" @click="handleLogout">
+          <h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4>
+        </div>    
+      </template>
     </van-nav-bar>
 
     <van-notice-bar
@@ -298,24 +305,21 @@ const handleLogout = () => {
         </div>
         <div class="right">
           <div class="btn btn-sm text-darkBlue" @click="doShare">
-            <h4><i class="fa fa-share-alt" aria-hidden="true"></i></h4>
-          </div>
-          <div class="btn btn-sm text-darkBlue" @click="handleLogout">
-            <h4><i class="fa fa-sign-out" aria-hidden="true"></i></h4>
-          </div>
+            <h4><i class="fa-solid fa-share-from-square"></i></h4>
+          </div>          
         </div>
       </div>
 
       <div class="recommend">
-        <div class="btn btn-outline-lightBlue" @click="router.push('/shop')">
+        <div class="btn btn-outline-lightBlue shadow-sm" @click="router.push('/shop')">
           <div class="img"><i class="fa-solid fa-cart-arrow-down"></i></div>
           <div class="text">立即開通</div>
         </div>
-        <div class="btn btn-outline-lightBlue" @click="goCardEdit">
+        <div class="btn btn-outline-lightBlue shadow-sm" @click="goCardEdit">
           <div class="img"><i class="fa-solid fa-id-card"></i></div>
           <div class="text">商務卡片</div>
         </div>
-        <div class="btn btn-outline-lightBlue">
+        <div class="btn btn-outline-lightBlue shadow-sm">
           <div class="img"><i class="fa-solid fa-address-book"></i></div>
           <div class="text">通訊錄</div>
         </div>
@@ -324,9 +328,9 @@ const handleLogout = () => {
 
     <div class="bwtFlex px-3 mb-2">
       <h5 class="font-weight-bold text-darkBlue">會員資料</h5>
-      <a href="javascript:;" @click="router.push('/member')"
-        ><h5><i class="fa fa-cog text-darkBlue" aria-hidden="true"></i></h5
-      ></a>
+      <a href="javascript:;" @click="router.push('/member')">
+        <h5><i class="fa-solid fa-sliders text-darkBlue"></i></h5>
+      </a>
     </div>
 
     <div class="content" v-if="userInfo">
diff --git a/src/views/Member/index.vue b/src/views/Member/index.vue
index dea5900..3e5c350 100644
--- a/src/views/Member/index.vue
+++ b/src/views/Member/index.vue
@@ -22,6 +22,7 @@ const store = useStore()
 const router = useRouter()
 
 const form = ref({addon:[]})
+const uInfoForm = ref({addon:[]})
 
 const genderChecked = ref()
 
@@ -163,6 +164,23 @@ const onSubmit = async () => {
     }
 };
 
+const userInfoSubmit = async (values) => {
+    showLoadingToast({
+      duration: 0,
+      message: '資料更新中...',
+      forbidClick: true,
+    });
+    console.log("test",values);
+    let res = await updateUserInfo(values)
+    if(res.code===200){
+        showSuccessToast('更新成功')
+        store.commit('user/setUserInfo',values) 
+        router.push('/member')
+    }else{
+        showToast.fail('更新失敗')
+    }
+};
+
 const searchChecked = ref(true);
 const searchOnUpdateValue = (newValue) => {
   showConfirmDialog({
@@ -190,7 +208,6 @@ const tab2TodoLists = ref([]);
 const tab2AddFriend = ref([]);
 onBeforeMount(async () => {
     let res = await searchConnection();
-    console.log(res);
     if(res.code===200){
       tab2list.value = res.data;
     }
@@ -234,7 +251,6 @@ const tab2OnSearch = () => {
 const tab3list = ref([]);
 onBeforeMount(async () => {
   let res = await setUserNfcTpl();
-  console.log(res);
   if(res.code===200){
     tab3list.value = res.data;
   }
@@ -266,9 +282,9 @@ onBeforeMount(async () => {
 
     <div class="content cnt0" v-show="tabActive === 0">      
         <van-cell-group inset>
-          <van-form @submit="onSubmit">
+          <van-form @submit="userInfoSubmit">
             <div class="text-center p-4">
-              <van-uploader :after-read="afterRead" :max-count="1" name="averter" class="mb-4">
+              <van-uploader :after-read="afterRead" :max-count="1" name="avatar" class="mb-4">
                 <div class="upload-main">
                   <img
                     class="upload-img avatar"
@@ -293,6 +309,7 @@ onBeforeMount(async () => {
                   rows="3"
                   type="textarea"
                   maxlength="100"
+                  name="mark"
                   placeholder="請輸入100字以內的簡介"
                   show-word-limit
                   :style="{border:'1px #e3e3e3 solid',borderRadius:'6px'}"
@@ -302,27 +319,27 @@ onBeforeMount(async () => {
             <van-field
               v-model="form.real_name"
               label="姓名"
-              name="pattern"
+              name="real_name"
               placeholder="請輸入您的姓名"
               :rules="[{ required: true, message: '姓名為必填' }]"
             />
             <van-field
               v-model="form.company"
               label="公司名稱"
-              name=""
+              name="company"
               placeholder="請輸入您的公司名稱"
               :rules="[{ required: true, message: '公司名稱必填' }]"
             />
             <van-field
               v-model="form.title"
               label="職稱"
-              name=""
+              name="title"
               placeholder="請輸入您的職稱"
             />
             <van-field
               v-model="form.phone"
               label="手機"
-              name=""
+              name="phone"
               type="tel"
               placeholder="Ex. 0900000001 不要有空格"
               :rules="[{ required: true, message: '手機號必填' },{ pattern: /\d{10}/ , message: '手機號格式錯誤' }]"
@@ -330,7 +347,7 @@ onBeforeMount(async () => {
             <van-field
               v-model="form.tel"
               label="市話"
-              name=""
+              name="tel"
               type="tel"
               placeholder="請輸入您的市話"
               :rules="[{ validator: validatorTel, message: '市話格式不正確,Ex. 02xxxx or 02-xxxx' }]"      
@@ -338,31 +355,31 @@ onBeforeMount(async () => {
             <van-field
               v-model="form.email"
               label="Email"
-              name=""
+              name="email"
               placeholder="請輸入您的Email"
               :rules="[{ required: true, message: 'Email必填' },{ pattern: /^([\w\.\-]){1,64}\@([\w\.\-]){1,64}/ , message: 'Email格式錯誤' }]"
             />
             <van-field
               v-model="form.address"
               label="住址"
-              name=""
+              name="address"
               placeholder="請輸入您的地址"
             />
             <van-field
               v-model="form.age"
               label="年齡"
-              name=""
+              name="age"
               placeholder="請輸入您的年齡"   
             />
-            <van-field name="radio" label="性別">
+            <van-field name="sex" label="性別">
               <template #input>
                 <van-radio-group
                   v-model="genderChecked" 
                   direction="horizontal"
                   checked-color="#345068"
                 >
-                  <van-radio name="1">男</van-radio>
-                  <van-radio name="2">女</van-radio>
+                  <van-radio name="0">男</van-radio>
+                  <van-radio name="1">女</van-radio>
                 </van-radio-group>
               </template>
             </van-field>
@@ -370,13 +387,13 @@ onBeforeMount(async () => {
             <van-field
               v-model="form.area"
               label="區域"
-              name=""
+              name="area"
               placeholder="請選擇縣市區域"
             />
             <van-field
               v-model="form.work"
               label="工作性質"
-              name=""
+              name="work"
               placeholder="請選擇工作性質"
             />            
 
@@ -418,15 +435,21 @@ onBeforeMount(async () => {
               label-align="top" 
             >
               <template #label>
-                <i class="fa-regular fa-gem text-darkBlue"></i> 一句話介紹自己
+                <i class="fa-solid fa-gem text-darkBlue"></i> 一句話介紹自己
               </template>
             </van-field>
+
+            <van-divider
+              :style="{
+                color: '#345068',
+                borderColor: '#345068',
+                padding: '0 16px',
+              }"
+              ><strong>資源共享</strong></van-divider
+            >
             
             <van-collapse v-model="resourceActive" accordion>
-              <van-collapse-item name="1">
-                <template #title>
-                  <i class="fa-regular fa-gem text-darkBlue"></i> 我能分享的資源
-                </template>
+              <van-collapse-item title="我能分享的資源" name="1">
                 <van-field  
                   v-model="form.supply"
                   rows="3"  
@@ -437,15 +460,13 @@ onBeforeMount(async () => {
                 />  
                 <van-field 
                   v-model="form.supply_link"
-                  name="pattern" 
+                  label="分享網址："
+                  name="" 
                   placeholder="分享網址" 
                   :rules="[{ validator: validatorUrl, message: '網址格式不正確,Ex. http://' }]"
                 />
               </van-collapse-item>
-              <van-collapse-item name="2">
-                <template #title>
-                  <i class="fa-regular fa-gem text-darkBlue"></i> 我需要的資源
-                </template>
+              <van-collapse-item title="我需要的資源" name="2">
                 <van-field  
                   v-model="form.demand"
                   rows="3" 
@@ -456,14 +477,12 @@ onBeforeMount(async () => {
                 />   
                 <van-field 
                   v-model="form.demand_link"
-                  name="pattern" 
+                  label="分享網址："
+                  name="" 
                   placeholder="需求連結" 
                 />      
               </van-collapse-item>
-              <van-collapse-item name="3">
-                <template #title>
-                  <i class="fa-regular fa-gem text-darkBlue"></i> 菁英交流資訊
-                </template>
+              <van-collapse-item title="菁英交流資訊" name="3">
                 <van-field  
                   v-model="form.exchange"
                   rows="3" 
@@ -474,7 +493,8 @@ onBeforeMount(async () => {
                 />  
                 <van-field 
                   v-model="form.exchange_link"
-                  name="pattern" 
+                  label="分享網址："
+                  name="" 
                   placeholder="需求連結" 
                 /> 
               </van-collapse-item>
diff --git a/src/views/Send/index.vue b/src/views/Send/index.vue
index 989988b..517a21a 100644
--- a/src/views/Send/index.vue
+++ b/src/views/Send/index.vue
@@ -35,7 +35,7 @@ onMounted(async () => {
   // console.log('liff',liff)
   await liff.init({ liffId: import.meta.env.VITE_APP_LINE_LIFF_ID });
 
-  if (userInfo.value.nc_type > 2) {
+  if (userInfo.value.level > 2) {
     let vipCardRes = await getVipCard({ userid: sessionStorage.getItem('uid') })
     state.value.vip_card = vipCardRes.data
   } else {
@@ -51,7 +51,7 @@ watch(() => activeName.value, function (newVal, oldVal) {
 }, { immediate: true })
 
 watch(() => userInfo.value.cus_card, function (newVal, oldVal) {
-  if (userInfo.value.nc_type > 1 && newVal.length > 0) {
+  if (userInfo.value.level > 1 && newVal.length > 0) {
     state.value.showCusCard = true
   }
 }, { immediate: true })
@@ -73,7 +73,7 @@ async function showFlex(id) {
       flex2html("flex", state.value.flexContent)
       break
     case '1':
-      if (userInfo.value.nc_type > 1) {
+      if (userInfo.value.level > 1) {
         let card2Res = await getCusCard({ userid: sessionStorage.getItem('uid') })
         if (card2Res.code === 200) {
           if (card2Res.data.cus_card) {
@@ -87,7 +87,7 @@ async function showFlex(id) {
       }
       break
     default:
-      if (userInfo.value.nc_type > 2) {
+      if (userInfo.value.level > 2) {
         // let vipCardRes = await getCusCard({userid: sessionStorage.getItem('uid')})
         let res = state.value.vip_card.find(item => { return item.id == id })
         if (res.type === 0) {
@@ -189,11 +189,38 @@ const changeTpl = (val) => {
 
 
     <div class="tab-section" v-cloak>
-      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.nc_type > 1">
-        <van-tab title="我的名片" name="0"/>
-        <van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/>
-        <van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/>
+      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="userInfo.level > 1">
+        <van-tab name="0">
+          <template #title>
+            <div class="tab_item">
+              <i class="fa-regular fa-id-card fa-2x mb-1"></i>
+              <p class="mb-3">我的名片</p>
+            </div>
+          </template>
+        </van-tab>
+
+        <van-tab name="1" v-if="state.showCusCard">
+          <template #title>
+            <div class="tab_item">
+              <i class="fa-solid fa-clipboard fa-2x mb-1"></i>
+              <p class="mb-3">{{state.card_title}}</p>
+            </div>
+          </template>
+        </van-tab>
+
+        <van-tab :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id">
+          <template #title>
+            <div class="tab_item">
+              <i class="fa-regular fa-file-lines fa-2x mb-1"></i>
+              <p class="mb-3">{{card.title}}</p> 
+            </div>
+          </template>
+        </van-tab>
+
+        <!-- <van-tab :title="state.card_title" name="1" v-if="state.showCusCard"/>
+        <van-tab :title="card.title" :name="card.id.toString()" v-for="card of state.vip_card" :key="card.id"/> -->
       </van-tabs>
+      
 
       <div class="flex-section">
         <div class="table-responsive">