feat：1.新增签证模块

      2.个人中心新增签证入口
fix : 2.优化 发布 copyLink 方法
      3.去除多余的打印

src/assets/img/visa/Calendar-thirty.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Calendar-thirty (&#230;&#151;&#165;&#229;&#142;&#134;)">
+<path id="Vector" d="M14.0007 1.33333H2.00065C1.63246 1.33333 1.33398 1.63181 1.33398 1.99999V14C1.33398 14.3682 1.63246 14.6667 2.00065 14.6667H14.0007C14.3688 14.6667 14.6673 14.3682 14.6673 14V1.99999C14.6673 1.63181 14.3688 1.33333 14.0007 1.33333Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M1.33398 4.66667H14.6673" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M1.33398 3.66667V7.66667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M14.666 3.66667V7.66667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" fill-rule="evenodd" clip-rule="evenodd" d="M9.33398 7.33333V12H12.0007V7.33333H9.33398Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M4 7.33333H6.66667V12H4" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M6.66602 9.66667H4.66602" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/Headset_one.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Headset-one (&#232;&#128;&#179;&#230;&#156;&#186;)">
+<path id="Vector" d="M18 16.5C20.2092 16.5 22 14.7092 22 12.5C22 10.2908 20.2092 8.5 18 8.5" stroke="#FA8446" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6 8.5C3.79086 8.5 2 10.2908 2 12.5C2 14.7092 3.79086 16.5 6 16.5" stroke="#FA8446" stroke-width="2" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 16.5V16.25V15V12.5V8.5C6 5.18629 8.6863 2.5 12 2.5C15.3137 2.5 18 5.18629 18 8.5V16.5C18 19.8137 15.3137 22.5 12 22.5" stroke="#FA8446" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/caret_down_small.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="caret-right-small">
+<path id="Union" d="M8.00033 5.32975L3.33366 9.99641L12.667 9.99641L8.00033 5.32975Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/caret_right_small.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="caret-right-small">
+<path id="Union" d="M7.99967 10.9999L12.6663 6.33325L3.33301 6.33325L7.99967 10.9999Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/consume.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Consume (&#230;&#182;&#136;&#232;&#180;&#185;)">
+<path id="Vector" d="M1.33398 4.66667C1.33398 4.29847 1.63246 4 2.00065 4H14.0007C14.3689 4 14.6673 4.29847 14.6673 4.66667V13.3333C14.6673 13.7015 14.3689 14 14.0007 14H2.00065C1.63246 14 1.33398 13.7015 1.33398 13.3333V4.66667Z" stroke="#666666" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6.33398 6.33334L8.00065 8.00001L9.66732 6.33334" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6 8.33334H10" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M6 10.3333H10" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M8 8.33334V11.6667" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M2.66602 2H13.3327" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/copy.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Copy (&#229;&#164;&#141;&#229;&#136;&#182;)">
+<path id="Vector" d="M4.33398 4.14387V2.60417C4.33398 2.0864 4.75372 1.66667 5.27148 1.66667H13.3965C13.9143 1.66667 14.334 2.0864 14.334 2.60417V10.7292C14.334 11.2469 13.9143 11.6667 13.3965 11.6667H11.8394" stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M10.7285 4.33333H2.60352C2.08575 4.33333 1.66602 4.75307 1.66602 5.27083V13.3958C1.66602 13.9136 2.08575 14.3333 2.60352 14.3333H10.7285C11.2463 14.3333 11.666 13.9136 11.666 13.3958V5.27083C11.666 4.75307 11.2463 4.33333 10.7285 4.33333Z" stroke="#333333" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/delete.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="delete">
+<path id="Union" d="M5.00065 0.666656H11.0007V2.66666H14.6673V3.99999H13.3147L12.9813 15.3333H3.01997L2.68664 3.99999H1.33398V2.66666H5.00065V0.666656ZM6.33398 2.66666H9.66732V1.99999H6.33398V2.66666ZM4.02055 3.99999L4.31466 14H11.6866L11.9808 3.99999H4.02055ZM8.66732 5.33332V12.6667H7.33398V5.33332H8.66732Z" fill="black" fill-opacity="0.9"/>
+</g>
+</svg>

src/assets/img/visa/dizhi.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#666666"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#666666"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/fire.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Endocrine (&#229;&#134;&#133;&#229;&#136;&#134;&#230;&#179;&#140;)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M7.71586 14.6667C10.4314 14.6667 13.3337 14.3369 13.3337 10.0601C13.3337 7.9881 12.8365 6.3014 11.8422 5C10.9134 6.55556 10.225 7.33333 9.77696 7.33333C9.10496 7.33333 9.77696 5.30356 8.99989 3.76379C8.48183 2.73731 7.56296 1.92715 6.24329 1.33333C6.42679 2.8123 6.38709 3.88513 6.12416 4.5518C5.72973 5.5518 2.38404 7.30333 2.68627 10.3116C2.9885 13.32 5.00033 14.6667 7.71586 14.6667Z" fill="#FF476A"/>
+<path id="Vector_2" d="M7.23587 8.00276C5.96761 9.15553 5.42704 10.2225 5.61424 11.2036C5.77537 12.0483 6.41624 12.4588 6.89897 12.5912C7.27321 12.6938 7.92117 12.7512 8.50014 12.2356C9.11341 11.6894 8.86904 10.9129 7.97974 9.95236C7.60461 9.54716 7.35664 8.8973 7.23587 8.00276Z" fill="white"/>
+</g>
+</svg>

src/assets/img/visa/location.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#666666"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#666666"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/lock.svg

@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#174;&#162;&#230;&#156;&#141;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M24.4632 13.14V12.4147C24.4632 8.79124 21.5987 5.90591 18.0016 5.90591C14.4044 5.90591 11.54 8.79124 11.54 12.4147V13.14H24.4632ZM9.54157 13.14V12.4147C9.54157 7.78473 13.3386 3.96 18.0016 3.96C22.6646 3.96 26.4616 7.78473 26.4616 12.4818V13.14H26.9599C29.3756 13.14 31.3216 15.0699 31.3216 17.4657V27.7143C31.3216 30.1101 29.3756 32.04 27.027 32.04H9.04335C6.62764 32.04 4.68164 30.1101 4.68164 27.7143V17.4657C4.68164 15.0699 6.62764 13.14 9.04335 13.14H9.54157ZM14.0047 23.6205C14.0047 25.298 15.337 26.64 17.0024 26.64H19.0008C20.6661 26.64 21.9984 25.298 21.9984 23.6205V21.6075C21.9984 19.9299 20.6661 18.5879 19.0008 18.5879H17.0024C15.337 18.5879 14.0047 19.9299 14.0047 21.6075V23.6205ZM16.0031 21.6075C16.0031 21.0706 16.4694 20.6009 17.0024 20.6009H19.0008C19.5337 20.6009 20 21.0706 20 21.6075V23.6205C20 24.1573 19.5337 24.627 19.0008 24.627H17.0024C16.4694 24.627 16.0031 24.1573 16.0031 23.6205V21.6075ZM6.69474 17.4657C6.69474 16.2013 7.76839 15.1365 9.04335 15.1365H26.9599C28.2349 15.1365 29.3085 16.2013 29.3085 17.4657V27.7143C29.3085 28.9787 28.2349 30.0435 26.9599 30.0435H9.04335C7.76839 30.0435 6.69474 28.9787 6.69474 27.7143V17.4657Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/online_order_payment.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#156;&#168;&#231;&#186;&#191;&#228;&#184;&#139;&#229;&#141;&#149;&#230;&#148;&#175;&#228;&#187;&#152;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M19.2255 24.9278H40.6152C41.4295 24.9278 42.0904 25.5914 42.0904 26.4091C42.0904 27.2269 41.4295 27.8905 40.6152 27.8905H19.2255C18.4112 27.8905 17.7503 27.2269 17.7503 26.4091C17.7503 25.5914 18.4112 24.9278 19.2255 24.9278ZM19.2255 33.0279H28.6665C29.4866 33.0279 30.1416 33.6916 30.1416 34.5093C30.1416 35.327 29.4807 35.9907 28.6665 35.9907H19.2255C18.4112 35.9907 17.7503 35.327 17.7503 34.5093C17.7503 33.6916 18.4112 33.0279 19.2255 33.0279ZM23.6745 18.4867H36.1662C37.6413 18.4867 38.8391 17.2779 38.8391 15.8025V11.6843C38.8391 10.2029 37.6413 9 36.1662 9H23.6745C22.1994 9 21.0016 10.2029 21.0016 11.6843V15.8025C21.0016 17.2839 22.1994 18.4867 23.6745 18.4867ZM35.8947 15.524H23.9519V11.9568H35.8947V15.524ZM45.8786 42.088C46.4568 41.5073 47.3891 41.5073 47.9674 42.088C48.5398 42.6628 48.5398 43.605 47.9674 44.1857L41.6124 50.5674C41.3233 50.8578 40.9457 51 40.568 51C40.1904 51 39.8127 50.8578 39.5236 50.5674L33.1686 44.1857C32.5904 43.605 32.5904 42.6687 33.1686 42.088C33.7469 41.5073 34.6792 41.5073 35.2575 42.088L39.0929 45.9396V34.2249C39.0929 33.4072 39.7537 32.7435 40.568 32.7435C41.3823 32.7435 42.0432 33.4072 42.0432 34.2249V45.9396L45.8786 42.088ZM46.0497 32.5302H49V17.112C49 14.5522 46.9289 12.4723 44.3798 12.4723H41.0106V15.4351H44.3798C45.3003 15.4351 46.0497 16.1876 46.0497 17.112V32.5302ZM15.3606 50.366H29.6106V47.3973H15.3606C14.5817 47.3973 13.9503 46.7159 13.9503 45.8804V16.958C13.9503 16.1225 14.5817 15.441 15.3606 15.441H18.5882V12.4783H15.3606C12.959 12.4783 11 14.487 11 16.958V45.8863C11 48.3572 12.959 50.366 15.3606 50.366Z" fill="#999999"/>
+</g>
+</svg>

src/assets/img/visa/orangeLocation.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dizhi.svg">
+<path id="Vector" d="M7.99555 1.06667C5.28435 1.06667 3.08888 3.19653 3.07715 5.84693C3.07715 6.79867 3.36035 7.7048 3.88595 8.4792L3.93742 8.55253L3.96728 8.60213L3.99182 8.63947C4.00835 8.66373 4.02595 8.68693 4.04568 8.70987L4.05795 8.7232L7.18568 12.3611C7.28601 12.4777 7.41038 12.5712 7.55025 12.6353C7.69012 12.6993 7.84219 12.7323 7.99603 12.7321C8.14986 12.7318 8.30182 12.6983 8.44148 12.6338C8.58115 12.5693 8.7052 12.4753 8.80515 12.3584L11.9158 8.72L11.8953 8.74267C11.926 8.71059 11.9539 8.67598 11.9787 8.6392L12.0027 8.6024C12.0126 8.58693 12.0318 8.5544 12.0313 8.55547C12.5827 7.7848 12.8921 6.8456 12.9035 5.85573C12.9035 3.2024 10.7022 1.06667 7.99555 1.06667ZM7.99555 2.13333C10.1201 2.13333 11.8369 3.79893 11.8369 5.84933C11.8297 6.60523 11.5897 7.34054 11.1497 7.9552L11.1035 8.02827L7.99422 11.6656L4.86622 8.02773L4.83608 7.97787L4.82062 7.9552C4.37945 7.34175 4.14265 6.60495 4.14382 5.84933C4.15315 3.79467 5.86541 2.13333 7.99555 2.13333Z" fill="#FF9300"/>
+<path id="Vector_2" d="M12.2474 11.1677C12.3633 11.1001 12.5005 11.0786 12.6315 11.1077C12.7626 11.1367 12.8778 11.214 12.9544 11.3243L12.9768 11.3595L14.1234 13.324C14.2152 13.4813 14.2653 13.6595 14.2687 13.8416C14.2721 14.0237 14.2289 14.2037 14.1431 14.3643C14.0572 14.525 13.9317 14.661 13.7784 14.7594C13.6251 14.8578 13.4492 14.9153 13.2674 14.9264L13.1962 14.9283L2.78929 14.8715C2.60789 14.8705 2.42974 14.8232 2.27169 14.7342C2.11364 14.6452 1.9809 14.5173 1.88603 14.3627C1.79115 14.2081 1.73728 14.0318 1.7295 13.8506C1.72172 13.6693 1.76028 13.4891 1.84155 13.3269L1.87489 13.2653L2.96769 11.4019C3.03719 11.2825 3.15027 11.1948 3.28313 11.1572C3.41599 11.1195 3.55827 11.1349 3.68004 11.2C3.80182 11.2651 3.89359 11.3749 3.93604 11.5063C3.9785 11.6377 3.96834 11.7805 3.90769 11.9045L3.88795 11.9413L2.79515 13.8048L13.2021 13.8616L12.0554 11.8971C11.9842 11.7749 11.9644 11.6294 12.0004 11.4926C12.0364 11.3559 12.1253 11.239 12.2474 11.1677Z" fill="#FF9300"/>
+<path id="Vector_3" d="M7.99954 3.81174C7.71936 3.81177 7.44192 3.86699 7.18307 3.97425C6.92422 4.08151 6.68904 4.23869 6.49094 4.43684C6.29284 4.63499 6.13571 4.87022 6.02852 5.12909C5.92133 5.38796 5.86618 5.66542 5.86621 5.9456C5.86625 6.22579 5.92147 6.50323 6.02872 6.76208C6.13598 7.02092 6.29317 7.25611 6.49132 7.45421C6.68946 7.65231 6.92469 7.80944 7.18356 7.91663C7.44244 8.02382 7.71989 8.07897 8.00008 8.07894C8.56594 8.07887 9.1086 7.85401 9.50868 7.45383C9.90876 7.05365 10.1335 6.51094 10.1334 5.94507C10.1333 5.3792 9.90848 4.83654 9.50831 4.43647C9.10813 4.03639 8.56541 3.81167 7.99954 3.81174ZM7.99954 4.8784C8.28251 4.87847 8.55386 4.99095 8.7539 5.19109C8.95394 5.39123 9.06628 5.66264 9.06621 5.9456C9.06614 6.22857 8.95366 6.49992 8.75352 6.69996C8.55339 6.9 8.28198 7.01234 7.99901 7.01227C7.71604 7.0122 7.44469 6.89972 7.24465 6.69958C7.04461 6.49945 6.93227 6.22804 6.93234 5.94507C6.93241 5.6621 7.04489 5.39075 7.24503 5.19071C7.44517 4.99067 7.71658 4.87833 7.99954 4.8784Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_online_order_payment.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#156;&#168;&#231;&#186;&#191;&#228;&#184;&#139;&#229;&#141;&#149;&#230;&#148;&#175;&#228;&#187;&#152;">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M19.2255 24.9278H40.6152C41.4295 24.9278 42.0904 25.5914 42.0904 26.4091C42.0904 27.2269 41.4295 27.8905 40.6152 27.8905H19.2255C18.4112 27.8905 17.7503 27.2269 17.7503 26.4091C17.7503 25.5914 18.4112 24.9278 19.2255 24.9278ZM19.2255 33.0279H28.6665C29.4866 33.0279 30.1416 33.6916 30.1416 34.5093C30.1416 35.327 29.4807 35.9907 28.6665 35.9907H19.2255C18.4112 35.9907 17.7503 35.327 17.7503 34.5093C17.7503 33.6916 18.4112 33.0279 19.2255 33.0279ZM23.6745 18.4867H36.1662C37.6413 18.4867 38.8391 17.2779 38.8391 15.8025V11.6843C38.8391 10.2029 37.6413 9 36.1662 9H23.6745C22.1994 9 21.0016 10.2029 21.0016 11.6843V15.8025C21.0016 17.2839 22.1994 18.4867 23.6745 18.4867ZM35.8947 15.524H23.9519V11.9568H35.8947V15.524ZM45.8786 42.088C46.4568 41.5073 47.3891 41.5073 47.9674 42.088C48.5398 42.6628 48.5398 43.605 47.9674 44.1857L41.6124 50.5674C41.3233 50.8578 40.9457 51 40.568 51C40.1904 51 39.8127 50.8578 39.5236 50.5674L33.1686 44.1857C32.5904 43.605 32.5904 42.6687 33.1686 42.088C33.7469 41.5073 34.6792 41.5073 35.2575 42.088L39.0929 45.9396V34.2249C39.0929 33.4072 39.7537 32.7435 40.568 32.7435C41.3823 32.7435 42.0432 33.4072 42.0432 34.2249V45.9396L45.8786 42.088ZM46.0497 32.5302H49V17.112C49 14.5522 46.9289 12.4723 44.3798 12.4723H41.0106V15.4351H44.3798C45.3003 15.4351 46.0497 16.1876 46.0497 17.112V32.5302ZM15.3606 50.366H29.6106V47.3973H15.3606C14.5817 47.3973 13.9503 46.7159 13.9503 45.8804V16.958C13.9503 16.1225 14.5817 15.441 15.3606 15.441H18.5882V12.4783H15.3606C12.959 12.4783 11 14.487 11 16.958V45.8863C11 48.3572 12.959 50.366 15.3606 50.366Z" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/orange_pay_arrow_left.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M8 12.5682L2.71689 7L8 1.43176L6.64156 1.16125e-06L-1.22392e-06 7L6.64155 14L8 12.5682Z" fill="#FF9300"/>
+<circle id="Ellipse 1" cx="11" cy="7" r="1" transform="rotate(-180 11 7)" fill="#FF9300"/>
+<circle id="Ellipse 2" cx="15" cy="7" r="1" transform="rotate(-180 15 7)" fill="#FF9300"/>
+<circle id="Ellipse 3" cx="19" cy="7" r="1" transform="rotate(-180 19 7)" fill="#FF9300"/>
+<circle id="Ellipse 4" cx="23" cy="7" r="1" transform="rotate(-180 23 7)" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_pay_arrow_right.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M16 1.43176L21.2831 7L16 12.5682L17.3584 14L24 7L17.3584 5.38077e-07L16 1.43176Z" fill="#FD9A00"/>
+<circle id="Ellipse 1" cx="13" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 2" cx="9" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 3" cx="5" cy="7" r="1" fill="#FD9A00"/>
+<circle id="Ellipse 4" cx="1" cy="7" r="1" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/orange_qianzheng_three.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="qianzheng-3.svg">
+<path id="Vector" d="M8.01563 10.624C5.91963 10.624 4.22363 8.928 4.22363 6.832C4.22363 4.736 5.91963 3.04 8.01563 3.04C10.1116 3.04 11.8076 4.736 11.8076 6.832C11.8076 8.928 10.0956 10.624 8.01563 10.624ZM6.84763 7.232V7.312C6.94363 8.72 7.45563 9.872 7.99963 9.872C8.25563 9.872 8.52763 9.584 8.75163 9.088C8.97563 8.608 9.10363 7.984 9.15163 7.296V7.2H6.95963L6.84763 7.232ZM9.93563 7.296C9.88763 8.048 9.74363 8.736 9.50363 9.296L9.39163 9.552L9.61563 9.408C10.3516 8.944 10.8636 8.176 10.9916 7.312L11.0076 7.216H9.91963L9.93563 7.296ZM5.02363 7.312C5.16763 8.176 5.66363 8.928 6.39963 9.392L6.63963 9.536L6.52763 9.28C6.28763 8.72 6.14363 8.032 6.09563 7.28V7.2H5.00763L5.02363 7.312ZM9.50363 4.368C9.74363 4.928 9.88763 5.616 9.93563 6.368V6.448H11.0236L11.0076 6.352C10.8636 5.488 10.3676 4.736 9.63163 4.256L9.39163 4.112L9.50363 4.368ZM8.01563 3.792C7.75963 3.792 7.48763 4.08 7.26363 4.576C7.03963 5.056 6.89563 5.68 6.86363 6.368V6.464H9.18363V6.368C9.07163 4.944 8.55963 3.792 8.01563 3.792ZM6.39963 4.256C5.66363 4.72 5.15163 5.488 5.02363 6.352L5.00763 6.448H6.09563V6.368C6.14363 5.616 6.28763 4.928 6.52763 4.368L6.63963 4.112L6.39963 4.256Z" fill="#FF9300"/>
+<path id="Vector_2" d="M12.4004 0.16H3.63243C2.41643 0.16 1.44043 1.152 1.44043 2.352V13.648C1.44043 14.864 2.41643 15.84 3.63243 15.84H12.4004C13.6164 15.84 14.5924 14.864 14.5924 13.648V2.352C14.5924 1.152 13.6004 0.16 12.4004 0.16ZM2.36843 2.352C2.36843 1.648 2.92843 1.088 3.63243 1.088H12.4004C13.1044 1.088 13.6644 1.648 13.6644 2.352V13.648C13.6644 14.352 13.1044 14.912 12.4004 14.912H3.63243C2.92843 14.912 2.36843 14.352 2.36843 13.648V2.352Z" fill="#FF9300"/>
+<path id="Vector_3" d="M4.96009 13.168H11.0561C11.3121 13.168 11.5201 12.96 11.5201 12.704C11.5201 12.448 11.3121 12.24 11.0561 12.24H4.96009C4.70409 12.24 4.49609 12.448 4.49609 12.704C4.49609 12.96 4.70409 13.168 4.96009 13.168Z" fill="#FF9300"/>
+</g>
+</svg>

src/assets/img/visa/orange_submit_visa_information.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#143;&#144;&#228;&#186;&#164;&#231;&#173;&#190;&#232;&#175;&#129;&#232;&#181;&#132;&#230;&#150;&#153;">
+<g id="Group 1294">
+<path id="Vector" d="M19.5746 28.6938H29.6249C30.3443 28.6938 30.9242 28.115 30.9242 27.4088C30.9242 26.6973 30.339 26.1239 29.6249 26.1239H19.5746C18.8552 26.1239 18.2754 26.7027 18.2754 27.4088C18.2754 28.1204 18.8606 28.6938 19.5746 28.6938ZM39.031 32.9628H19.5424C18.8445 32.9628 18.2754 33.5257 18.2754 34.2159V34.285C18.2754 34.9752 18.8445 35.5381 19.5424 35.5381H39.031C39.7289 35.5381 40.298 34.9752 40.298 34.285V34.2159C40.298 33.5257 39.7289 32.9628 39.031 32.9628ZM39.031 39.8071H19.5424C18.8445 39.8071 18.2754 40.3699 18.2754 41.0602V41.1292C18.2754 41.8195 18.8445 42.3823 19.5424 42.3823H39.031C39.7289 42.3823 40.298 41.8195 40.298 41.1292V41.0602C40.298 40.3646 39.7289 39.8071 39.031 39.8071Z" fill="#FD9A00"/>
+<path id="Vector_2" d="M48.9678 22.9062C48.9141 22.6142 48.7906 22.3805 48.5866 22.2L47.3786 21.0796L47.384 21.085C42.7884 16.8425 34.6171 9.42478 34.5312 9.34513C34.2574 9.09027 33.9407 9.03717 33.7259 9.02124L33.683 9.01593L33.64 9.02124H33.6239C33.5595 9.01062 33.4843 9.00531 33.4092 9.01062C28.1961 9.00531 13.9045 9 13.7756 9C12.2456 9 11 10.2319 11 11.7451V47.7876C11 49.5611 12.4549 51 14.2481 51H45.7519C47.5451 51 49 49.5611 49 47.7876V23.3788V23.2117L48.9678 22.9062ZM34.9446 13.2796C34.9446 13.1735 35.0198 13.131 35.052 13.1204C35.0681 13.115 35.0949 13.1044 35.1272 13.1044C35.1647 13.1044 35.2023 13.115 35.2453 13.1522L44.1574 21.2708C44.3131 21.4142 44.2648 21.5894 44.2433 21.6372C44.2218 21.685 44.1413 21.8496 43.9319 21.8496H35.5889C35.2345 21.8496 34.9446 21.5628 34.9446 21.2124V13.2796ZM46.3962 47.7876C46.3962 48.1381 46.1062 48.4248 45.7519 48.4248H14.2427C13.8884 48.4248 13.5985 48.1381 13.5985 47.7876V12.2124C13.5985 11.8619 13.8884 11.5752 14.2427 11.5752H32.1582C32.2549 11.5752 32.3354 11.6549 32.3354 11.7504V21.2124C32.3354 22.9858 33.7903 24.4248 35.5835 24.4248H46.2136C46.3103 24.4248 46.3908 24.5044 46.3908 24.6V47.7876H46.3962Z" fill="#FD9A00"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/orange_successful_checkout.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#136;&#144;&#229;&#138;&#159;&#229;&#135;&#186;&#231;&#173;&#190;">
+<path id="Vector" d="M36.6667 35.3333H23.3334C22.597 35.3333 22 35.9303 22 36.6666C22 37.403 22.597 38 23.3334 38H36.6667C37.4029 38 38 37.4031 38 36.6667C38 35.9303 37.403 35.3333 36.6667 35.3333ZM47.3334 18H42V12.6667C42 11.1939 40.8062 10 39.3334 10H20.6667C19.1939 10 18 11.1939 18 12.6667V18H12.6667C11.1939 18 10 19.1939 10 20.6667V34C10 35.4728 11.1939 36.6667 12.6667 36.6667H16.6667V47.3333C16.6667 48.806 17.8605 50 19.3334 50H40.6667C42.1395 50 43.3334 48.806 43.3334 47.3333V36.6667H47.3334C48.8062 36.6667 50 35.4728 50 34V20.6667C50 19.1939 48.8062 18 47.3334 18ZM20.6667 14C20.6667 13.2636 21.2636 12.6667 22 12.6667H38C38.7362 12.6667 39.3333 13.2636 39.3333 14V18H20.6667V14ZM40.6667 46C40.6667 46.7364 40.0696 47.3333 39.3334 47.3333H20.6667C19.9303 47.3333 19.3334 46.7364 19.3334 46V32.6667C19.3334 31.9303 19.9303 31.3334 20.6667 31.3334H39.3334C40.0696 31.3334 40.6667 31.9303 40.6667 32.6667V46ZM47.3334 32.6667C47.3334 33.4031 46.7363 34 46 34H43.3334V31.3333C43.3334 29.8605 42.1395 28.6666 40.6667 28.6666H19.3334C17.8605 28.6666 16.6667 29.8605 16.6667 31.3333V34H14C13.2636 34 12.6667 33.4031 12.6667 32.6667V22C12.6667 21.2636 13.2636 20.6667 14 20.6667H46C46.7363 20.6667 47.3333 21.2636 47.3333 22V32.6667H47.3334ZM43.3334 23.3333C42.597 23.3333 42 23.9303 42 24.6666C42 25.403 42.597 26 43.3334 26C44.0696 26 44.6667 25.4031 44.6667 24.6667C44.6667 23.9303 44.0696 23.3333 43.3334 23.3333ZM36.6667 40.6667H23.3334C22.597 40.6667 22 41.2636 22 42C22 42.7364 22.597 43.3333 23.3334 43.3333H36.6667C37.4029 43.3333 38 42.7364 38 42C38 41.2636 37.403 40.6667 36.6667 40.6667Z" fill="#FD9A00"/>
+</g>
+</svg>

src/assets/img/visa/pay_arrow_left.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M8 12.5682L2.71689 7L8 1.43176L6.64156 1.16125e-06L-1.22392e-06 7L6.64155 14L8 12.5682Z" fill="#D9D9D9"/>
+<circle id="Ellipse 1" cx="11" cy="7" r="1" transform="rotate(-180 11 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 2" cx="15" cy="7" r="1" transform="rotate(-180 15 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 3" cx="19" cy="7" r="1" transform="rotate(-180 19 7)" fill="#D9D9D9"/>
+<circle id="Ellipse 4" cx="23" cy="7" r="1" transform="rotate(-180 23 7)" fill="#D9D9D9"/>
+</g>
+</svg>

src/assets/img/visa/pay_arrow_right.svg

@@ -0,0 +1,9 @@
+<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#231;&#174;&#173;&#229;&#164;&#180;">
+<path id="Union" d="M16 1.43176L21.2831 7L16 12.5682L17.3584 14L24 7L17.3584 -4.15597e-07L16 1.43176Z" fill="#D9D9D9"/>
+<circle id="Ellipse 1" cx="13" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 2" cx="9" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 3" cx="5" cy="7" r="1" fill="#D9D9D9"/>
+<circle id="Ellipse 4" cx="1" cy="7" r="1" fill="#D9D9D9"/>
+</g>
+</svg>

src/assets/img/visa/people.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="People (&#228;&#186;&#186;&#229;&#145;&#152;)">
+<path id="Vector" d="M7.99935 6.66667C9.28802 6.66667 10.3327 5.622 10.3327 4.33333C10.3327 3.04467 9.28802 2 7.99935 2C6.71068 2 5.66602 3.04467 5.66602 4.33333C5.66602 5.622 6.71068 6.66667 7.99935 6.66667Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M2 13.6V14H14V13.6C14 12.1065 14 11.3598 13.7094 10.7894C13.4537 10.2876 13.0457 9.87964 12.544 9.62398C11.9735 9.33334 11.2268 9.33334 9.73333 9.33334H6.26667C4.7732 9.33334 4.02647 9.33334 3.45603 9.62398C2.95426 9.87964 2.54631 10.2876 2.29065 10.7894C2 11.3598 2 12.1065 2 13.6Z" stroke="#666666" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/assets/img/visa/professional_customer_service.svg

@@ -0,0 +1,10 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#229;&#174;&#162;&#230;&#156;&#141;">
+<g id="Group 1329">
+<path id="Vector" d="M7.80163 32.3571C7.23658 32.3571 6.78125 31.9017 6.78125 31.3367C6.78125 29.1204 9.39804 27.5185 14.0007 26.8766V26.5694C10.8792 24.1775 10.8792 19.7449 10.8792 17.0458C10.8792 12.5913 13.5015 9.93057 17.8903 9.93057H18.1262C22.5149 9.93057 25.1372 12.5913 25.1372 17.0458C25.1372 17.375 25.1317 17.7041 25.1262 18.0443C25.1098 18.6093 24.6489 19.0537 24.0784 19.0372C23.5134 19.0208 23.069 18.5545 23.0855 17.9894C23.0964 17.6712 23.0964 17.3585 23.0964 17.0458C23.0964 13.6775 21.4232 11.9713 18.1262 11.9713H17.8903C14.5932 11.9713 12.92 13.6775 12.92 17.0458C12.92 20.3045 13.123 23.6235 15.5697 25.1815C15.866 25.368 16.0415 25.6917 16.0415 26.0428V27.7818C16.0415 28.303 15.6465 28.7418 15.1308 28.7967C11.0329 29.2301 8.82202 30.4315 8.82202 31.3367C8.82202 31.8963 8.3612 32.3571 7.80163 32.3571Z" fill="#333333"/>
+<path id="Vector_2" d="M28.3137 32.3571C27.7487 32.3571 27.2933 31.9017 27.2933 31.3367C27.2933 30.426 25.0825 29.2301 20.9845 28.7967C20.4633 28.7418 20.0684 28.303 20.0684 27.7818V26.0373C20.0684 25.4722 20.5237 25.0169 21.0887 25.0169C21.6538 25.0169 22.1091 25.4722 22.1091 26.0373V26.8766C26.7118 27.513 29.3286 29.1204 29.3286 31.3367C29.3341 31.8963 28.8788 32.3571 28.3137 32.3571Z" fill="#333333"/>
+<path id="Vector_3" d="M21.2476 23.201C19.8433 23.201 18.7954 23.0584 18.768 23.0529C18.2633 22.8993 17.9616 22.3891 18.0713 21.868C18.1755 21.3523 18.6583 21.0122 19.1849 21.0615C21.7304 21.3413 25.6145 21.0999 26.2947 19.6846C26.5361 19.1799 27.145 18.9604 27.6552 19.2073C28.1654 19.4487 28.3794 20.0631 28.1325 20.5678C27.0682 22.7841 23.645 23.201 21.2476 23.201Z" fill="#333333"/>
+<path id="Vector_4" d="M30.2994 22.1313C29.7343 22.1313 29.279 21.676 29.279 21.1109V17.545L27.913 17.0568C27.507 16.9142 27.2327 16.5247 27.2327 16.0968C27.2327 10.9784 23.1128 6.80907 18.0493 6.80907C12.9858 6.80907 8.86584 10.9784 8.86584 16.0968C8.86584 16.4259 8.70675 16.7331 8.43794 16.9251L7.84546 17.3476V21.1109C7.84546 21.676 7.39012 22.1313 6.82507 22.1313C6.26002 22.1313 5.80469 21.676 5.80469 21.1109V16.8264C5.80469 16.4972 5.96378 16.19 6.23259 15.998L6.83604 15.5646C7.11583 9.5685 12.0367 4.77379 18.0493 4.77379C23.996 4.77379 28.8785 9.46426 29.2516 15.3726L30.6395 15.8663C31.0455 16.009 31.3198 16.3985 31.3198 16.8264V21.1109C31.3198 21.676 30.8644 22.1313 30.2994 22.1313Z" fill="#333333"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/qianzheng_three.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="qianzheng-3.svg">
+<path id="Vector" d="M8.01563 10.624C5.91963 10.624 4.22363 8.928 4.22363 6.832C4.22363 4.736 5.91963 3.04 8.01563 3.04C10.1116 3.04 11.8076 4.736 11.8076 6.832C11.8076 8.928 10.0956 10.624 8.01563 10.624ZM6.84763 7.232V7.312C6.94363 8.72 7.45563 9.872 7.99963 9.872C8.25563 9.872 8.52763 9.584 8.75163 9.088C8.97563 8.608 9.10363 7.984 9.15163 7.296V7.2H6.95963L6.84763 7.232ZM9.93563 7.296C9.88763 8.048 9.74363 8.736 9.50363 9.296L9.39163 9.552L9.61563 9.408C10.3516 8.944 10.8636 8.176 10.9916 7.312L11.0076 7.216H9.91963L9.93563 7.296ZM5.02363 7.312C5.16763 8.176 5.66363 8.928 6.39963 9.392L6.63963 9.536L6.52763 9.28C6.28763 8.72 6.14363 8.032 6.09563 7.28V7.2H5.00763L5.02363 7.312ZM9.50363 4.368C9.74363 4.928 9.88763 5.616 9.93563 6.368V6.448H11.0236L11.0076 6.352C10.8636 5.488 10.3676 4.736 9.63163 4.256L9.39163 4.112L9.50363 4.368ZM8.01563 3.792C7.75963 3.792 7.48763 4.08 7.26363 4.576C7.03963 5.056 6.89563 5.68 6.86363 6.368V6.464H9.18363V6.368C9.07163 4.944 8.55963 3.792 8.01563 3.792ZM6.39963 4.256C5.66363 4.72 5.15163 5.488 5.02363 6.352L5.00763 6.448H6.09563V6.368C6.14363 5.616 6.28763 4.928 6.52763 4.368L6.63963 4.112L6.39963 4.256Z" fill="#666666"/>
+<path id="Vector_2" d="M12.4004 0.16H3.63243C2.41643 0.16 1.44043 1.152 1.44043 2.352V13.648C1.44043 14.864 2.41643 15.84 3.63243 15.84H12.4004C13.6164 15.84 14.5924 14.864 14.5924 13.648V2.352C14.5924 1.152 13.6004 0.16 12.4004 0.16ZM2.36843 2.352C2.36843 1.648 2.92843 1.088 3.63243 1.088H12.4004C13.1044 1.088 13.6644 1.648 13.6644 2.352V13.648C13.6644 14.352 13.1044 14.912 12.4004 14.912H3.63243C2.92843 14.912 2.36843 14.352 2.36843 13.648V2.352Z" fill="#666666"/>
+<path id="Vector_3" d="M4.96009 13.168H11.0561C11.3121 13.168 11.5201 12.96 11.5201 12.704C11.5201 12.448 11.3121 12.24 11.0561 12.24H4.96009C4.70409 12.24 4.49609 12.448 4.49609 12.704C4.49609 12.96 4.70409 13.168 4.96009 13.168Z" fill="#666666"/>
+</g>
+</svg>

src/assets/img/visa/refund.svg

@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#233;&#128;&#128;&#230;&#172;&#190;">
+<path id="Vector" d="M18.0012 3.78C25.8527 3.78 32.2193 10.1466 32.2193 18.0002C32.2193 25.8518 25.8538 32.2184 18.0012 32.2184C17.965 32.2205 17.9287 32.2205 17.8926 32.2184C17.8567 32.2205 17.8207 32.2205 17.7849 32.2184H5.43375C5.21982 32.2177 5.01094 32.1533 4.83369 32.0335C4.65645 31.9137 4.51888 31.7439 4.43849 31.5457C4.3581 31.3474 4.33853 31.1297 4.38228 30.9203C4.42604 30.7109 4.53112 30.5192 4.68416 30.3698L9.85416 25.3419C9.95553 25.2433 10.0753 25.1657 10.2067 25.1134C10.3381 25.0611 10.4785 25.0352 10.6198 25.0372C10.7612 25.0392 10.9008 25.069 11.0307 25.1249C11.1606 25.1809 11.2781 25.2618 11.3767 25.3632C11.4753 25.4646 11.5529 25.5844 11.6052 25.7158C11.6575 25.8471 11.6834 25.9875 11.6814 26.1289C11.6794 26.2703 11.6496 26.4099 11.5937 26.5398C11.5377 26.6696 11.4568 26.7872 11.3554 26.8858L8.08475 30.065H17.7818C17.818 30.0628 17.8543 30.0628 17.8905 30.065C20.3781 30.0854 22.8111 29.3356 24.8557 27.9185C26.9003 26.5014 28.4565 24.4865 29.3107 22.1501C30.1649 19.8136 30.2753 17.2701 29.6268 14.8684C28.9784 12.4667 27.6027 10.3245 25.6886 8.73554C23.7745 7.14658 21.4157 6.18873 18.9357 5.99336C16.4557 5.798 13.976 6.37469 11.8368 7.64434C9.69747 8.91399 8.00338 10.8144 6.98685 13.0849C5.97032 15.3555 5.68114 17.8849 6.15897 20.3262C6.18598 20.4652 6.18535 20.6082 6.15711 20.7469C6.12887 20.8857 6.07359 21.0175 5.9944 21.1349C5.91522 21.2523 5.8137 21.3529 5.69562 21.431C5.57755 21.5092 5.44524 21.5633 5.30625 21.5903C5.16727 21.6173 5.02432 21.6167 4.88557 21.5884C4.74683 21.5602 4.615 21.5049 4.49763 21.4257C4.38025 21.3466 4.27962 21.245 4.20147 21.127C4.12333 21.0089 4.06921 20.8766 4.0422 20.7376C3.64064 18.6773 3.6997 16.5536 4.21518 14.5188C4.73065 12.484 5.68977 10.5884 7.02383 8.96778C8.35788 7.34716 10.0339 6.04164 11.9317 5.14476C13.8295 4.24787 15.9022 3.78182 18.0012 3.78Z" fill="#333333"/>
+<path id="Vector_2" d="M18.5153 27.54C18.8102 27.5376 19.0924 27.4183 19.3009 27.2078C19.5095 26.9973 19.6277 26.7125 19.63 26.4148V23.4868H22.6783C22.9683 23.478 23.2435 23.3556 23.4456 23.1454C23.6476 22.9353 23.7606 22.6539 23.7606 22.3611C23.7606 22.0682 23.6476 21.7869 23.4456 21.5767C23.2435 21.3666 22.9683 21.2441 22.6783 21.2354H19.63V19.2838H22.6041C22.8918 19.2715 23.1637 19.1474 23.363 18.9376C23.5623 18.7277 23.6736 18.4482 23.6736 18.1575C23.6736 17.8668 23.5623 17.5874 23.363 17.3775C23.1637 17.1677 22.8918 17.0436 22.6041 17.0313H19.62C19.6705 16.9946 19.7176 16.9533 19.7605 16.9078L23.4408 13.1928C23.6404 12.9798 23.7499 12.6965 23.7458 12.4033C23.7418 12.1101 23.6246 11.83 23.4191 11.6226C23.2137 11.4153 22.9362 11.297 22.6457 11.2929C22.3552 11.2888 22.0746 11.3992 21.8635 11.6007L18.5083 14.9895L14.9965 11.4447C14.7832 11.2531 14.5052 11.1514 14.2198 11.1606C13.9344 11.1698 13.6634 11.2892 13.4626 11.4942C13.2619 11.6991 13.1467 11.9741 13.1409 12.2622C13.135 12.5504 13.239 12.8298 13.4313 13.0429L17.1116 16.7578C17.237 16.8834 17.3896 16.9776 17.5581 17.0313H14.4246C14.1368 17.0436 13.8649 17.1676 13.6656 17.3775C13.4663 17.5873 13.3551 17.8668 13.3551 18.1575C13.3551 18.4482 13.4663 18.7277 13.6656 18.9375C13.8649 19.1474 14.1368 19.2714 14.4246 19.2837H17.3996V21.2354H14.5028C14.2127 21.244 13.9374 21.3664 13.7352 21.5766C13.5331 21.7868 13.42 22.0682 13.42 22.3611C13.42 22.654 13.5331 22.9355 13.7352 23.1456C13.9374 23.3558 14.2127 23.4782 14.5028 23.4868H17.3996V26.4138C17.4017 26.7118 17.5199 26.997 17.7287 27.2078C17.9375 27.4185 18.22 27.5379 18.5153 27.54ZM18.3116 17.0131L18.3437 17.09H18.2434C18.2665 17.09 18.2885 17.0597 18.3116 17.0131Z" fill="#333333"/>
+</g>
+</svg>

src/assets/img/visa/search.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 10">
+<g id="Search (&#230;&#144;&#156;&#231;&#180;&#162;)">
+<path id="Vector" d="M6.99998 12.6667C10.1296 12.6667 12.6666 10.1296 12.6666 7.00001C12.6666 3.87041 10.1296 1.33334 6.99998 1.33334C3.87038 1.33334 1.33331 3.87041 1.33331 7.00001C1.33331 10.1296 3.87038 12.6667 6.99998 12.6667Z" stroke="#333333" stroke-width="1.4" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.88567 4.78103C8.40311 4.29847 7.73644 4 7.00004 4C6.26367 4 5.59701 4.29847 5.11444 4.78103" stroke="#333333" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M11.0739 11.0739L13.9023 13.9023" stroke="#333333" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/submit_visa_information.svg

@@ -0,0 +1,8 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#143;&#144;&#228;&#186;&#164;&#231;&#173;&#190;&#232;&#175;&#129;&#232;&#181;&#132;&#230;&#150;&#153;">
+<g id="Group 1294">
+<path id="Vector" d="M19.5741 28.6938H29.6244C30.3438 28.6938 30.9237 28.1151 30.9237 27.4089C30.9237 26.6974 30.3385 26.1239 29.6244 26.1239H19.5741C18.8547 26.1239 18.2749 26.7027 18.2749 27.4089C18.2749 28.1204 18.8601 28.6938 19.5741 28.6938ZM39.0305 32.9628H19.5419C18.844 32.9628 18.2749 33.5257 18.2749 34.2159V34.285C18.2749 34.9752 18.844 35.5381 19.5419 35.5381H39.0305C39.7284 35.5381 40.2975 34.9752 40.2975 34.285V34.2159C40.2975 33.5257 39.7284 32.9628 39.0305 32.9628ZM39.0305 39.8071H19.5419C18.844 39.8071 18.2749 40.3699 18.2749 41.0602V41.1292C18.2749 41.8195 18.844 42.3823 19.5419 42.3823H39.0305C39.7284 42.3823 40.2975 41.8195 40.2975 41.1292V41.0602C40.2975 40.3646 39.7284 39.8071 39.0305 39.8071Z" fill="#999999"/>
+<path id="Vector_2" d="M48.9678 22.9062C48.9141 22.6142 48.7906 22.3805 48.5866 22.2L47.3786 21.0796L47.384 21.085C42.7884 16.8425 34.6171 9.42478 34.5312 9.34513C34.2574 9.09027 33.9407 9.03717 33.7259 9.02124L33.683 9.01593L33.64 9.02124H33.6239C33.5595 9.01062 33.4843 9.00531 33.4092 9.01062C28.1961 9.00531 13.9045 9 13.7756 9C12.2456 9 11 10.2319 11 11.7451V47.7876C11 49.5611 12.4549 51 14.2481 51H45.7519C47.5451 51 49 49.5611 49 47.7876V23.3788V23.2117L48.9678 22.9062ZM34.9446 13.2796C34.9446 13.1735 35.0198 13.131 35.052 13.1204C35.0681 13.115 35.0949 13.1044 35.1272 13.1044C35.1647 13.1044 35.2023 13.115 35.2453 13.1522L44.1574 21.2708C44.3131 21.4142 44.2648 21.5894 44.2433 21.6372C44.2218 21.685 44.1413 21.8496 43.9319 21.8496H35.5889C35.2345 21.8496 34.9446 21.5628 34.9446 21.2124V13.2796ZM46.3962 47.7876C46.3962 48.1381 46.1062 48.4248 45.7519 48.4248H14.2427C13.8884 48.4248 13.5985 48.1381 13.5985 47.7876V12.2124C13.5985 11.8619 13.8884 11.5752 14.2427 11.5752H32.1582C32.2549 11.5752 32.3354 11.6549 32.3354 11.7504V21.2124C32.3354 22.9858 33.7903 24.4248 35.5835 24.4248H46.2136C46.3103 24.4248 46.3908 24.5044 46.3908 24.6V47.7876H46.3962Z" fill="#999999"/>
+</g>
+</g>
+</svg>

src/assets/img/visa/successful_checkout.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#230;&#136;&#144;&#229;&#138;&#159;&#229;&#135;&#186;&#231;&#173;&#190;">
+<path id="Vector" d="M36.6667 35.3333H23.3334C22.597 35.3333 22 35.9303 22 36.6666C22 37.403 22.597 38 23.3334 38H36.6667C37.4029 38 38 37.4031 38 36.6667C38 35.9303 37.403 35.3333 36.6667 35.3333ZM47.3334 18H42V12.6667C42 11.1939 40.8062 10 39.3334 10H20.6667C19.1939 10 18 11.1939 18 12.6667V18H12.6667C11.1939 18 10 19.1939 10 20.6667V34C10 35.4728 11.1939 36.6667 12.6667 36.6667H16.6667V47.3333C16.6667 48.806 17.8605 50 19.3334 50H40.6667C42.1395 50 43.3334 48.806 43.3334 47.3333V36.6667H47.3334C48.8062 36.6667 50 35.4728 50 34V20.6667C50 19.1939 48.8062 18 47.3334 18ZM20.6667 14C20.6667 13.2636 21.2636 12.6667 22 12.6667H38C38.7362 12.6667 39.3333 13.2636 39.3333 14V18H20.6667V14ZM40.6667 46C40.6667 46.7364 40.0696 47.3333 39.3334 47.3333H20.6667C19.9303 47.3333 19.3334 46.7364 19.3334 46V32.6667C19.3334 31.9303 19.9303 31.3334 20.6667 31.3334H39.3334C40.0696 31.3334 40.6667 31.9303 40.6667 32.6667V46ZM47.3334 32.6667C47.3334 33.4031 46.7363 34 46 34H43.3334V31.3333C43.3334 29.8605 42.1395 28.6666 40.6667 28.6666H19.3334C17.8605 28.6666 16.6667 29.8605 16.6667 31.3333V34H14C13.2636 34 12.6667 33.4031 12.6667 32.6667V22C12.6667 21.2636 13.2636 20.6667 14 20.6667H46C46.7363 20.6667 47.3333 21.2636 47.3333 22V32.6667H47.3334ZM43.3334 23.3333C42.597 23.3333 42 23.9303 42 24.6666C42 25.403 42.597 26 43.3334 26C44.0696 26 44.6667 25.4031 44.6667 24.6667C44.6667 23.9303 44.0696 23.3333 43.3334 23.3333ZM36.6667 40.6667H23.3334C22.597 40.6667 22 41.2636 22 42C22 42.7364 22.597 43.3333 23.3334 43.3333H36.6667C37.4029 43.3333 38 42.7364 38 42C38 41.2636 37.403 40.6667 36.6667 40.6667Z" fill="#999999"/>
+</g>
+</svg>

src/assets/img/visa/three_left.svg

@@ -0,0 +1,7 @@
+<svg width="23" height="12" viewBox="0 0 23 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1383">
+<path id="Polygon 1" d="M18.5046 0.950028L15.4346 4.02004C14.2631 5.19161 14.2631 7.09108 15.4346 8.26265L18.5046 11.3326" stroke="#999999" stroke-linecap="round"/>
+<path id="Polygon 2" d="M12.2629 0.950028L9.19292 4.02004C8.02138 5.19161 8.02138 7.09108 9.19294 8.26265L12.2629 11.3326" stroke="#999999" stroke-linecap="round"/>
+<path id="Polygon 3" d="M6.14129 0.950028L3.07134 4.02004C1.89979 5.19161 1.8998 7.09108 3.07136 8.26265L6.14127 11.3326" stroke="#999999" stroke-linecap="round"/>
+</g>
+</svg>

src/assets/img/visa/visa_arrow_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729589518592" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5057" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M566.6 854.6l320-320 0.2-0.2c0.3-0.3 0.6-0.6 0.9-1 0.2-0.2 0.4-0.4 0.5-0.6 0.2-0.2 0.3-0.4 0.5-0.6 0.2-0.3 0.4-0.5 0.6-0.8 0.1-0.2 0.2-0.3 0.3-0.5l0.6-0.9c0.1-0.1 0.2-0.3 0.3-0.4l0.6-0.9c0.1-0.1 0.2-0.3 0.3-0.4 0.2-0.3 0.3-0.6 0.5-0.9 0.1-0.2 0.2-0.3 0.3-0.5 0.2-0.3 0.3-0.6 0.4-0.9l0.3-0.6c0.1-0.3 0.2-0.5 0.4-0.8 0.1-0.2 0.2-0.4 0.3-0.7 0.1-0.2 0.2-0.5 0.3-0.7 0.1-0.3 0.2-0.5 0.3-0.8 0.1-0.2 0.1-0.4 0.2-0.6l0.3-0.9c0.1-0.2 0.1-0.4 0.2-0.6 0.1-0.3 0.2-0.6 0.3-1 0-0.2 0.1-0.4 0.1-0.5 0.1-0.3 0.2-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0.1-0.3 0.1-0.7 0.2-1 0-0.2 0.1-0.4 0.1-0.6 0-0.3 0.1-0.6 0.1-0.9 0-0.3 0-0.6 0.1-0.9v-0.7c0.1-1.1 0.1-2.1 0-3.2v-0.7c0-0.3 0-0.6-0.1-0.9 0-0.3-0.1-0.6-0.1-0.9 0-0.2-0.1-0.4-0.1-0.6 0-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.6-0.1-0.3-0.1-0.7-0.2-1 0-0.2-0.1-0.4-0.1-0.5-0.1-0.3-0.2-0.6-0.3-1-0.1-0.2-0.1-0.4-0.2-0.6l-0.3-0.9c-0.1-0.2-0.1-0.4-0.2-0.6-0.1-0.3-0.2-0.5-0.3-0.8-0.1-0.2-0.2-0.5-0.3-0.7-0.1-0.2-0.2-0.4-0.3-0.7-0.1-0.3-0.2-0.5-0.4-0.8l-0.3-0.6c-0.1-0.3-0.3-0.6-0.4-0.8-0.1-0.2-0.2-0.3-0.3-0.5-0.2-0.3-0.3-0.6-0.5-0.9-0.1-0.1-0.2-0.3-0.3-0.4l-0.6-0.9c-0.1-0.1-0.2-0.3-0.3-0.4-0.2-0.3-0.4-0.6-0.6-0.8-0.1-0.2-0.3-0.3-0.4-0.5-0.2-0.2-0.4-0.5-0.6-0.7-0.2-0.2-0.4-0.4-0.5-0.6-0.2-0.2-0.3-0.4-0.5-0.6-0.4-0.4-0.7-0.8-1.1-1.2l-320-320c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l265.5 266H160c-17.7 0-32 14.3-32 32s14.3 32 32 32h626.7L521.4 809.4c-6.2 6.2-9.4 14.4-9.4 22.6s3.1 16.4 9.4 22.6c12.5 12.5 32.7 12.5 45.2 0z" p-id="5058"></path></svg>

src/components/CreateNote/Form.vue

@@ -188,7 +188,6 @@ const onConfirm = (date) => {
   let day = date?.getDate()
   month = month < 10 ? '0' + month : month
   day = day < 10 ? '0' + day : day
-
   departureTime.value = date ? `${year}-${month}-${day}` : ''
   showCalendar.value = false
 }

src/components/Profile/Notes/Published/index.vue

@@ -97,9 +97,9 @@ const shareToWeChat = (type) => {
 
 // 复制链接
 const copyLink = () => {
-  let protocol = location.protocol
-  let hostname = location.hostname
-  let url = `${protocol}//${hostname}/yj/${yjId.value}`
+  let origin = location.origin
+  let url = `${origin}/yj/${yjId.value}`
+
   navigator.clipboard.writeText(url).then(
     () => {
       showNotify({ type: 'success', message: '链接已复制' })
@@ -109,6 +109,7 @@ const copyLink = () => {
     }
   )
 }
+
 const finished = ref(false)
 const error = ref(false)
 const { loading, setLoading } = useLoading()

src/components/Visa/PayProcess.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 签证办理流程 -->
+  <div :class="`box-border   w-full rounded-xl ${props?.isFlag ? 'bg-[#FAFAFA] ' : 'bg-[#fff]'} `">
+    <h1 :class="`w-full text-sm ${props?.isFlag ? 'text-center pt-11' : ''}`">签证办理流程</h1>
+    <div
+      id="handlingProcedure"
+      class="relative box-border pl-10 pt-15 pr-23 flex flex-wrap items-center justify-between"
+    >
+      <div
+        v-for="(item, index) in PAY_PROCESS"
+        :key="index + new Date() + 'procedure'"
+        :class="`relative ${itemsWidth(index)}  mb-18 mr-13  flex flex-wrap justify-center items-start`"
+      >
+        <div class="w-full">
+          <div class="w-18 h-18 shrink-0 mx-auto">
+            <img
+              class="w-full h-full object-cover"
+              :src="state >= item?.state ? item?.iconOrange : item?.icon"
+              alt=""
+            />
+          </div>
+          <p
+            :class="`line-clamp-1 pt-8 text-center  text-sm font-blod leading-xl ${state >= item.state ? 'text-[#FD9A00]' : 'text-black-6'}`"
+          >
+            {{ item.itemTitle }}
+          </p>
+        </div>
+
+        <template v-if="index < 2">
+          <div
+            v-if="index !== PAY_PROCESS.length - 1"
+            class="w-23 h-13 absolute right-[-35.2px] bottom-2"
+          >
+            <img
+              class="w-full h-full object-cover"
+              v-if="state >= item.state"
+              :src="orange_pay_arrow_right"
+              alt=""
+            />
+            <img class="w-full h-full object-cover" v-else :src="pay_arrow_right" alt="" />
+          </div>
+        </template>
+        <template v-else-if="index > 2">
+          <div
+            v-if="index !== PAY_PROCESS.length - 1"
+            class="w-23 h-12 absolute right-[-35.2px] bottom-2"
+          >
+            <img
+              class="w-full h-full object-cover"
+              v-if="state >= item.state"
+              :src="orange_pay_arrow_left"
+              alt=""
+            />
+            <img class="w-full h-full object-cover" v-else :src="pay_arrow_left" alt="" />
+          </div>
+        </template>
+        <div
+          v-else-if="index == 2"
+          :class="`absolute -bottom-55 -right-23 w-26 h-64 border-[2px] border-dashed  ${state >= item.state ? 'border-[#FF9300]' : 'border-[#D9D9D9]'} rounded-r-[18px]  border-l-transparent`"
+        ></div>
+        <template v-else></template>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+// 未支付流程的图标
+import online_order_payment from '@/assets/img/visa/online_order_payment.svg' //
+import submit_visa_information from '@/assets/img/visa/submit_visa_information.svg' //
+import platform_preliminary_review from '@/assets/img/visa/platform_preliminary_review.svg' //
+import submit_to_the_embassy from '@/assets/img/visa/submit_to_the_embassy.svg'
+import successful_checkout from '@/assets/img/visa/successful_checkout.svg'
+import express_delivery from '@/assets/img/visa/express_delivery.svg'
+import orange_pay_arrow_right from '@/assets/img/visa/orange_pay_arrow_right.svg'
+import pay_arrow_right from '@/assets/img/visa/pay_arrow_right.svg'
+import pay_arrow_left from '@/assets/img/visa/pay_arrow_left.svg'
+import orange_pay_arrow_left from '@/assets/img/visa/orange_pay_arrow_left.svg'
+import orange_online_order_payment from '@/assets/img/visa/orange_online_order_payment.svg' //
+import orange_submit_visa_information from '@/assets/img/visa/orange_submit_visa_information.svg' //
+import orange_platform_preliminary_review from '@/assets/img/visa/orange_platform_preliminary_review.svg' //
+import orange_submit_to_the_embassy from '@/assets/img/visa/orange_submit_to_the_embassy.svg'
+import orange_successful_checkout from '@/assets/img/visa/orange_successful_checkout.svg'
+import orange_express_delivery from '@/assets/img/visa/orange_express_delivery.svg'
+
+// 支付流程的定义 PayProcess
+const PAY_PROCESS = [
+  {
+    icon: online_order_payment,
+    state: 0,
+    iconOrange: orange_online_order_payment,
+    itemTitle: '联系客服预审'
+  },
+  {
+    icon: submit_visa_information,
+    state: 0,
+    iconOrange: orange_submit_visa_information,
+    itemTitle: '提交签证资料'
+  },
+  {
+    icon: platform_preliminary_review,
+    state: 0,
+    iconOrange: orange_platform_preliminary_review,
+    itemTitle: '平台初审'
+  },
+
+  {
+    icon: express_delivery,
+    state: 2,
+    iconOrange: orange_express_delivery,
+    itemTitle: '使馆邮寄'
+  },
+  {
+    icon: successful_checkout,
+    state: 2,
+    iconOrange: orange_successful_checkout,
+    itemTitle: '成功出签'
+  },
+  {
+    icon: submit_to_the_embassy,
+    state: 1,
+    iconOrange: orange_submit_to_the_embassy,
+    itemTitle: '提交使馆'
+  }
+]
+
+const props = defineProps({
+  payState: {
+    type: Number,
+    required: false,
+    default: -1
+  },
+  isFlag: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+
+const state = computed(() => {
+  if (props?.payState === 3) {
+    return 0
+  } else {
+    return props?.payState
+  }
+})
+
+const itemsWidth = (index) => {
+  if (index == 2 || index == 5) {
+    return 'w-[18%]'
+  } else {
+    return 'w-[25%]'
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/login/index.client.vue

@@ -68,8 +68,8 @@
           @click="handleLogin"
           :loading="isSubmiting"
         >
-          登录</van-button
-        >
+          登录
+        </van-button>
       </van-form>
     </div>
 
@@ -92,129 +92,129 @@
 </template>
 
 <script setup>
-import { setIntervalImmediately } from "@/utils/index";
+import { setIntervalImmediately } from '@/utils/index'
 
 definePageMeta({
-  layout: false,
-});
+  layout: false
+})
 
-const route = useRoute();
+const route = useRoute()
 
-let captchaUUID = "";
-const defatultSecond = 60;
-const countryCode = ref("86");
-const captchaImage = ref("");
+let captchaUUID = ''
+const defatultSecond = 60
+const countryCode = ref('86')
+const captchaImage = ref('')
 
 const formData = reactive({
-  phoneNumber: "",
-  captchaCode: "",
-  smsCode: "",
-});
+  phoneNumber: '',
+  captchaCode: '',
+  smsCode: ''
+})
 
-const smsCountDown = ref(defatultSecond);
-const isCountDown = computed(() => smsCountDown.value < defatultSecond);
+const smsCountDown = ref(defatultSecond)
+const isCountDown = computed(() => smsCountDown.value < defatultSecond)
 
 const smsBtnText = computed(() => {
   if (isCountDown.value) {
-    return `重新获取(${smsCountDown.value})`;
+    return `重新获取(${smsCountDown.value})`
   } else {
-    return "获取验证码";
+    return '获取验证码'
   }
-});
+})
 const isLoginBtnDisabled = computed(() => {
   return (
     !formData.phoneNumber ||
     formData.captchaCode.trim().length != 4 ||
     formData.smsCode.trim().length != 4
-  );
-});
+  )
+})
 
 async function getCaptchaInfo() {
-  const { data } = await request("/website/web/captchaImage");
-  captchaUUID = data.uuid;
-  captchaImage.value = `data:image/jpg;base64,${data.img}`;
+  const { data } = await request('/website/web/captchaImage')
+  captchaUUID = data.uuid
+  captchaImage.value = `data:image/jpg;base64,${data.img}`
 }
 
 async function handleGetSmsCode() {
-  if (isCountDown.value) return;
+  if (isCountDown.value) return
   if (!formData.phoneNumber) {
-    showToast("请输入手机号");
-    return;
+    showToast('请输入手机号')
+    return
   }
   if (!formData.captchaCode) {
-    showToast("请输入图形验证码");
-    return;
+    showToast('请输入图形验证码')
+    return
   }
   try {
-    await request("/website/web/validateCaptchaAndSendSms", {
+    await request('/website/web/validateCaptchaAndSendSms', {
       query: {
         uuid: captchaUUID,
         countryCode: countryCode.value,
         code: formData.captchaCode,
-        phoneNumber: formData.phoneNumber,
-      },
-    });
-    startCountDown();
+        phoneNumber: formData.phoneNumber
+      }
+    })
+    startCountDown()
   } catch (error) {}
 }
 
 function startCountDown() {
-  smsCountDown.value = defatultSecond;
+  smsCountDown.value = defatultSecond
   const timer = setIntervalImmediately(() => {
-    smsCountDown.value--;
+    smsCountDown.value--
     if (smsCountDown.value <= 0) {
-      smsCountDown.value = defatultSecond;
-      clearInterval(timer);
+      smsCountDown.value = defatultSecond
+      clearInterval(timer)
     }
-  }, 1000);
+  }, 1000)
 }
 
-const isSubmiting = ref(false);
+const isSubmiting = ref(false)
 async function handleLogin() {
   try {
-    isSubmiting.value;
-    const { data } = await request("/website/web/doLoginBySms", {
-      method: "post",
+    isSubmiting.value
+    const { data } = await request('/website/web/doLoginBySms', {
+      method: 'post',
       body: {
         ...formData,
         loginMoblie: formData.phoneNumber,
-        countryCode: countryCode.value,
-      },
-    });
-    useAuthStore().setToken(data.tokenData);
-    useUserInfoStore().getUserInfo();
-    showSuccessToast("登录成功");
+        countryCode: countryCode.value
+      }
+    })
+    useAuthStore().setToken(data.tokenData)
+    useUserInfoStore().getUserInfo()
+    showSuccessToast('登录成功')
 
     await navigateTo({
-      path: route.query.redirect || "/",
+      path: route.query.redirect || '/',
       query: route.query,
-      replace: true,
-    });
+      replace: true
+    })
   } finally {
-    isSubmiting.value = false;
+    isSubmiting.value = false
   }
 }
 
 // 选择国家
 const countryCodeOption = reactive({
   show: false,
-  listMap: {},
-});
+  listMap: {}
+})
 async function getAllCountryCode() {
-  const { data } = await request("/website/web/list");
-  countryCodeOption.listMap = data;
+  const { data } = await request('/website/web/list')
+  countryCodeOption.listMap = data
 }
 
 function handleChangeCountryCode(country) {
-  console.log(country);
-  countryCodeOption.show = false;
-  countryCode.value = country.countryCode;
+  console.log(country)
+  countryCodeOption.show = false
+  countryCode.value = country.countryCode
 }
 
 onMounted(() => {
-  getCaptchaInfo();
-  getAllCountryCode();
-});
+  getCaptchaInfo()
+  getAllCountryCode()
+})
 </script>
 
 <style lang="scss" scoped></style>

src/pages/note-create/index.client.vue

@@ -611,7 +611,6 @@ const handleSelectImage = (index) => {
 
 onChange(async (files) => {
   if (!files.length) return
-  console.log(files[0], '222')
 
   const formData = new FormData()
   formData.append('uploadFile', files[0])
@@ -757,13 +756,11 @@ async function requestPublish() {
   let parmas = {}
   try {
     publishLoading.value = true
-    console.log(noteJson, 'noteJson')
 
     parmas = { ...noteJson }
     if (noteJson.endPlaceId) {
       parmas.endPlace = noteJson.endPlaceId
     }
-    console.log(parmas, 'parmas')
 
     await request('/website/tourism/publishTravelNotes/publishDraft', {
       method: 'post',

src/pages/profile/index.vue

@@ -14,11 +14,11 @@
             radius="37.5px"
           />
           <span class="text-2xl flex-1 break-all font-semibold">
-            {{ userInfo.showName }}</span
-          >
+            {{ userInfo.showName }}
+          </span>
         </NuxtLink>
         <div class="text-xl break-all font-semibold mt-15">
-          个性签名：{{ userInfo.personalSign || "暂未填写" }}
+          个性签名：{{ userInfo.personalSign || '暂未填写' }}
         </div>
       </div>
     </div>
@@ -40,38 +40,43 @@
 </template>
 
 <script setup>
-import defaultAvatar from "~/assets/img/default_avatar.png";
-import profile_travel_order from "~/assets/img/profile/profile_travel_order.png";
-import profile_labour_order from "~/assets/img/profile/profile_labour_order.png";
-import profile_travel_note from "~/assets/img/profile/profile_travel_note.png";
-import profile_colection from "~/assets/img/profile/profile_colection.png";
-import profile_car_order from "~/assets/img/profile/profile_car_order.png";
-import profile_visa_order from "~/assets/img/profile/profile_visa_order.png";
+import defaultAvatar from '~/assets/img/default_avatar.png'
+import profile_travel_order from '~/assets/img/profile/profile_travel_order.png'
+import profile_labour_order from '~/assets/img/profile/profile_labour_order.png'
+import profile_travel_note from '~/assets/img/profile/profile_travel_note.png'
+import profile_colection from '~/assets/img/profile/profile_colection.png'
+import profile_car_order from '~/assets/img/profile/profile_car_order.png'
+import profile_visa_order from '~/assets/img/profile/profile_visa_order.png'
 
-const userInfoStore = useUserInfoStore();
-const { userInfo } = storeToRefs(userInfoStore);
+const userInfoStore = useUserInfoStore()
+const { userInfo } = storeToRefs(userInfoStore)
 
 onMounted(() => {
-  userInfoStore.getUserInfo();
-});
+  userInfoStore.getUserInfo()
+})
 
 const menuData = [
   {
     icon: profile_travel_order,
-    label: "旅游订单",
-    to: "/profile/travel-orders",
+    label: '旅游订单',
+    to: '/profile/travel-orders'
   },
   {
     icon: profile_travel_note,
-    label: "我的游记",
-    to: "/profile/notes",
+    label: '我的游记',
+    to: '/profile/notes'
   },
   {
     icon: profile_colection,
-    label: "我的收藏",
-    to: "/profile/collection",
+    label: '我的收藏',
+    to: '/profile/collection'
   },
-];
+  {
+    icon: profile_visa_order,
+    label: '签证订单',
+    to: '/profile/visa-orders'
+  }
+]
 </script>
 
 <style lang="scss" scoped></style>

src/pages/profile/visa-order-details/[id].vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="w-full bg-white">
+    <div class="aspect-[375/211] h-211 overflow-hidden relative">
+      <img class="h-full w-full object-cover" :src="visaData?.img" alt="" />
+
+      <!-- <div
+        class="absolute z-1 top-0 left-0 w-full h-full flex justify-center items-center text-white"
+      >
+        <div class="h-61 w-full flex justify-center flex-wrap">
+          <h1 class="w-full h-31 text-center text-[31px] mb-6 leading-[31px] line-clamp-1">
+            {{ visaData?.countryCodeIdDictMap?.name }}
+          </h1>
+          <div class="w-73 h-4 border-t-[1px] border-white mb-9"></div>
+          <p class="w-full h-15 text-center text-sm leading-xl line-clamp-1">
+            {{ visaData?.countryCodeIdDictMap?.name }}
+          </p>
+        </div>
+      </div> -->
+    </div>
+
+    <div
+      style="z-index: 10"
+      class="w-full min-h-300 relative box-border rounded-t-[20px] bg-[#fff] -mt-15"
+    >
+      <div
+        class="flex justify-between box-border mb-15 py-10 px-16 items-center bg-[#FD9A00]/[0.08]"
+      >
+        <div class="flex text-xl text-black-3 font-semibold shrink-0 justify-between items-center">
+          <div class="w-3 h-22 bg-[#FA8446] rounded-r-[15px] mr-8"></div>
+          订单详情
+        </div>
+        <div class="text-base shrink-0 flex justify-start items-center">
+          <span class="text-black-6">订单编号</span>
+          <span class="mx-4 font-semibold text-black/[0.9]">
+            {{ orderData?.id }}
+          </span>
+          <div class="w-16 h-16 shrink-0" @click="copy(orderData?.id)">
+            <img class="w-full h-full object-cover" src="@/assets/img/visa/copy.svg" alt="" />
+          </div>
+        </div>
+      </div>
+      <div class="box-border w-full px-16 pb-20">
+        <!-- 签证办理流程 -->
+        <VisaPayProcess :isFlag="true" :payState="orderState"></VisaPayProcess>
+        <h1
+          :title="visaData?.visaTitle"
+          class="mb-20 mt-15 line-clamp-1 w-full text-4xl font-semibold leading-4xl text-[#444]"
+        >
+          {{ visaData?.visaTitle }}
+        </h1>
+        <div class="mb-19 flex items-center justify-start">
+          <div class="w-16 h-16 shrink-0">
+            <img
+              class="w-full h-full object-cover"
+              src="@/assets/img/visa/Calendar-thirty.svg"
+              alt=""
+            />
+          </div>
+          <span class="pl-8 text-sm font-normal leading-xl text-black-6">下单时间：</span>
+          <span class="text-base font-semibold leading-3xl text-black">
+            {{ orderData.createTime }}
+          </span>
+        </div>
+        <div class="mb-19 flex items-center justify-start">
+          <div class="w-16 h-16 shrink-0">
+            <img class="w-full h-full object-cover" src="@/assets/img/visa/people.svg" alt="" />
+          </div>
+          <span class="pl-8 text-sm font-normal leading-xl text-black-6">客服顾问</span>
+          <span class="pl-12 text-base font-semibold leading-3xl text-black">
+            {{ orderData?.counselorIdDictMap?.name }}
+          </span>
+        </div>
+        <div class="mb-21 flex items-center justify-start">
+          <div class="w-16 h-16 shrink-0">
+            <img class="w-full h-full object-cover" src="@/assets/img/visa/consume.svg" alt="" />
+          </div>
+          <span class="px-8 text-sm font-normal leading-xl text-black-6">支付状态：</span>
+          <div
+            :class="`w-53 h-20 text-center text-sm leading-3xl rounded-full text-[${colorList[orderData?.payState]}] bg-[${colorList[orderData?.payState]}]/[0.1]`"
+          >
+            {{ formatStatus(orderData?.payState) }}
+          </div>
+        </div>
+
+        <ul class="w-full">
+          <li
+            v-for="(item, index) in severList"
+            :key="index + 'severList'"
+            class="mb-12 box-border flex h-20 w-full items-center justify-between pr-6"
+          >
+            <span class="text-sm font-normal leading-3xl text-black-6">{{ item }}</span>
+            <span
+              v-if="severPrice.length > 0"
+              class="text-base font-semibold leading-3xl text-[#FF476A]"
+            >
+              ￥{{ severPrice[index] }}
+            </span>
+          </li>
+          <li
+            class="mb-12 box-border flex h-20 w-full items-center justify-between border-t-[1px] border-dashed pr-6 pt-26"
+          >
+            <span class="text-xl font-normal leading-3xl text-black">合计费用</span>
+            <span class="text-sm font-semibold leading-3xl font-semibold text-[#FF476A]">
+              ￥
+              <span class="text-5xl">{{ totalPrice ? totalPrice.toFixed(2) : '0.00' }}</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+
+      <div class="box-border w-full bg-[#FAFAFA] px-16 pt-20">
+        <h1 class="text-xl mb-15 font-semibold text-black">基本信息</h1>
+        <p
+          v-for="(item, index) in infoList"
+          :key="index + 'infoListOne'"
+          class="mb-11 w-full text-base leading-4xl"
+        >
+          <span class="inline-block w-65 font-normal text-black-6">{{ item }}</span>
+          <span class="font-semibold text-black/[0.9]">
+            {{ infoDataList[index] }}
+          </span>
+        </p>
+
+        <h1 class="text-xl pt-7 mb-15 font-semibold text-black">说明</h1>
+        <div class="text-sm font-normal leading-5xl text-black-6 pb-34">
+          1、 所有签证产品办理时间从商家收齐资料后开始计算，法定节假日及使馆休息日不算入办理时间；
+          <br />
+          2、 签证价格随使馆规定或汇率变化浮动，送签前遇使馆调整签证价格，商家将采取多退少补措施；
+          <br />
+          3、签证属于特殊商品，商家会按照使领馆的要求为客人准备最合适的送签材料，确保您的材料有最高出签可能，但是您所申请的签证是否成功，取决于使领馆对您资料的审核，若发生拒签，请申请人自然接受结果，同时放弃追究商家
+          任何责任；
+          <br />
+          4、 办理三天后不支持退款。
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useClipboard } from '@vueuse/core'
+
+const id = useRouteParam('id')
+// copy
+const { copy, isSupported } = useClipboard()
+
+// 订单数据
+const orderData = ref({})
+
+// 订单流程的状态
+const orderState = ref(0)
+
+// 订单数据
+const totalPrice = ref(0)
+
+// 签证数据
+const visaData = ref({})
+
+// 基本信息
+const infoList = ref([
+  '签证类型',
+  '有效期',
+  '入镜次数',
+  '可停留期',
+  '用户姓名',
+  '联系方式',
+  '身份证',
+  '联系地址'
+])
+
+// 服务信息
+const severList = ref(['订单', '服务费', '税务费'])
+
+// 服务得价格
+const severPrice = ref([])
+
+// 基本信息列表
+const infoDataList = ref([])
+
+const colorList = ['#FF9300', '#1BC467', '#FF476A']
+
+const orderStatusEnum = [
+  {
+    value: 0,
+    label: '未付款'
+  },
+  {
+    value: 1,
+    label: '已付款'
+  },
+  {
+    value: 2,
+    label: '已退款'
+  }
+]
+
+function formatStatus(status) {
+  return orderStatusEnum.find((item) => item.value == status)?.label
+}
+
+const isValue = (parmas) => {
+  return parmas ? parmas : ''
+}
+
+// 获取订单详情
+async function getVisaOrderDetails() {
+  try {
+    let url = `/website/tourism/visa/findOrderById?id=${id?.value}`
+
+    let {
+      data: { visa, order }
+    } = await request(url)
+
+    if (visa) visaData.value = visa
+
+    if (order) {
+      // order.createTime = order?.createTime?.split(' ')[0]
+      severPrice.value.push(
+        order?.orderPrice ? order?.orderPrice : '0.00',
+        order?.servicePrice ? order?.servicePrice : '0.00',
+        order?.price ? order?.price : '0.00'
+      )
+
+      totalPrice.value = order?.orderPrice * 1 + order?.servicePrice * 1 + order?.price * 1
+      orderState.value = order?.state
+      orderData.value = order
+    }
+
+    infoDataList.value = [
+      isValue(visa?.visaTypeIdDictMap?.name),
+      visa?.validity ? `${visa?.validity} 天` : '无限制',
+      visa?.entriesNum ? `${visa?.entriesNum} 次` : '无限制',
+      visa?.idleDays ? `${visa?.idleDays} 天` : '无限制',
+      isValue(order?.orderName),
+      isValue(order?.orderPhone),
+      isValue(order?.orderIdCard),
+      isValue(order?.orderAddress)
+    ]
+  } catch (error) {
+    if (error.state == 401) {
+      // location.href
+    }
+  } finally {
+    return
+  }
+}
+
+onMounted(() => {
+  getVisaOrderDetails()
+})
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-descriptions__body {
+  background-color: #fafafa; /* 设置背景色为白色 */
+}
+
+::v-deep .el-descriptions__label {
+  width: 100px; /* 设置背景色为白色 */
+}
+
+.orderHeader::before {
+  width: 3px;
+  height: 22px;
+  content: '';
+  background-color: #fa8446;
+  border-radius: 0 50% 50% 0;
+}
+</style>

src/pages/profile/visa-orders.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="w-full h-[100vh] bg-[#fff] box-border px-16 pt-11 pb-23">
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-list
+        v-if="orderList.length"
+        v-model:loading="loading"
+        v-model:error="error"
+        :finished="finished"
+        :immediate-check="false"
+        error-text="请求失败，点击重新加载"
+        finished-text=""
+        @load="handleCurrentChange"
+      >
+        <div
+          style="scrollbar-width: none"
+          v-for="item in orderList"
+          :key="item?.id"
+          class="scroll-box scrollbar-hide mb-16 box-border h-140 w-full overflow-hidden overflow-y-auto rounded-lg border bg-[#fff]"
+        >
+          <div
+            class="box-border flex h-32 w-full cursor-pointer items-center justify-between bg-[#F7F7F7] px-11"
+          >
+            <div class="flex justify-start items-center">
+              <span class="text-sm font-normal leading-xl text-black-3/[0.9]">
+                订单号:{{ item?.id }}
+              </span>
+              <div class="w-16 h-16 shrink-0 ml-8" @click="copyId(item?.id)">
+                <img
+                  @click="copyId(item?.id)"
+                  class="w-full h-full object-cover"
+                  src="@/assets/img/visa/copy.svg"
+                  alt=""
+                />
+              </div>
+            </div>
+            <div class="flex justify-start items-center">
+              <span class="mr-9 text-sm font-normal leading-xl text-black-9/[0.9]">
+                {{ item?.createTime?.split(' ')[0] }}
+              </span>
+              <div class="w-16 h-16 shrink-0" @click="doDeleteVisaOrder(item?.id)">
+                <img class="w-full h-full object-cover" src="@/assets/img/visa/delete.svg" alt="" />
+              </div>
+            </div>
+          </div>
+          <NuxtLink
+            class="h-105 w-full p-11 block box-border"
+            :to="'/profile/visa-order-details/' + item?.id"
+          >
+            <div class="flex items-center justify-between mb-13">
+              <div class="h-full shrink-0 w-60 overflow-hidden rounded-[4px]">
+                <img class="h-44 w-full object-cover" :src="item?.tourVisaVo?.img" alt="" />
+              </div>
+
+              <div
+                class="line-clamp-2 h-46 w-250 shrink-0 text-base font-normal leading-4xl text-black"
+              >
+                {{ item?.orderName }}
+              </div>
+            </div>
+
+            <div class="w-full flex justify-between items-center">
+              <div class="flex items-center">
+                <span class="text-sm pt-6 pr-8 font-[500] leading-3xl text-[#FF476A]">
+                  ￥
+                  <span class="text-3xl">{{ Number(item?.orderPrice).toFixed(2) }}</span>
+                </span>
+                <div
+                  :class="`w-53 h-20 text-center text-sm leading-3xl rounded-full ${colorLists[item?.payState].color} ${colorLists[item?.payState].textColor}`"
+                >
+                  {{ formatStatus(item?.payState) }}
+                </div>
+              </div>
+
+              <van-button
+                style="height: 24px"
+                plain
+                round
+                class="w-110"
+                type="warning"
+                icon-position="right"
+                color="#FF9300"
+                icon="arrow"
+              >
+                订单详情
+              </van-button>
+            </div>
+          </NuxtLink>
+        </div>
+      </van-list>
+      <Empty v-if="!orderList.length && loading" title="暂无订单" top="100" />
+    </van-pull-refresh>
+  </div>
+</template>
+<script setup>
+import { useClipboard } from '@vueuse/core'
+const userInfoStore = useUserInfoStore()
+const { userInfo } = storeToRefs(userInfoStore)
+
+onMounted(async () => {
+  await userInfoStore?.getUserInfo().catch((err) => {
+    if (err.status == 401) {
+      showToast({
+        message: '请先登录',
+        forbidClick: true,
+        duration: 0
+      })
+      // location.href = '/login'
+    }
+  })
+
+  if (userInfo.value.mobile) getVisaOrderList()
+})
+
+useSeoMeta({
+  title: `签证订单列表`
+})
+
+const finished = ref(false)
+const error = ref(false)
+const loading = ref(false)
+const refreshing = ref(false)
+watch(userInfo, () => {})
+
+// copy
+const { copy, isSupported } = useClipboard()
+// 订单的付款状态
+
+const pageNum = ref(1)
+
+const orderList = ref([])
+
+// const colorList = ['warning', 'success', 'danger']
+const colorLists = [
+  {
+    color: 'bg-[#FF9300]/[0.1]',
+    textColor: 'text-[#FF9300]'
+  },
+  {
+    color: 'bg-[#1BC467]/[0.1]',
+    textColor: 'text-[#1BC467]'
+  },
+  {
+    color: 'bg-[#FF476A]/[0.1]',
+    textColor: 'text-[#FF476A]'
+  }
+]
+
+const orderStatusEnum = [
+  {
+    value: 0,
+    label: '未付款'
+  },
+  {
+    value: 1,
+    label: '已付款'
+  },
+  {
+    value: 2,
+    label: '已退款'
+  }
+]
+
+function formatStatus(status) {
+  return orderStatusEnum.find((item) => item.value == status)?.label
+}
+
+// 复制订单号
+function copyId(itemId) {
+  if (itemId) {
+    copy(itemId)
+    showNotify({ type: 'success', message: '订单号已复制' })
+  } else {
+    showNotify({ message: '订单号复制失败' })
+  }
+}
+
+// 获取订单列表
+async function getVisaOrderList() {
+  try {
+    loading.value = true
+    let {
+      data: { dataList, totalCount }
+    } = await request(`/website/tourism/visa/findOrderPage`, {
+      query: {
+        pageNum: pageNum.value,
+        pageSize: 10,
+        phone: userInfo.value.mobile
+      }
+    })
+
+    if (dataList.length == 0) orderList.value = []
+
+    // 去重处理
+    if (Array.isArray(dataList) && orderList.value.length > totalCount)
+      orderList.value = Array.from(new Set([...orderList.value, ...dataList]))
+    // 去重处理合并处理
+    if (orderList.value.length < totalCount) orderList.value = orderList.value.concat(dataList)
+
+    loading.value = false
+    refreshing.value = false
+    if (orderList.value.length >= totalCount) {
+      finished.value = true
+    } else {
+      finished.value = false
+    }
+  } finally {
+    refreshing.value = false
+    loading.value = false
+  }
+}
+
+// 下拉刷新
+const onRefresh = () => {
+  refreshing.value = true
+  getVisaOrderList()
+}
+
+// 改变页数
+const handleCurrentChange = () => {
+  pageNum.value += 1
+  getVisaOrderList()
+}
+
+// 删除订单
+async function doDeleteVisaOrder(id) {
+  showConfirmDialog({
+    title: '提示',
+    message: '确认是否删除该订单?',
+    confirmButtonColor: '#FF9300'
+  })
+    .then(async () => {
+      try {
+        let url = `/website/tourism/visa/deleteOrderById?id=${id}`
+        let { success } = await request(url)
+
+        if (success) {
+          orderList.value = orderList.value.filter((note) => note.id !== id)
+          showSuccessToast('订单删除成功')
+          getVisaOrderList()
+        }
+      } finally {
+        return
+      }
+    })
+    .catch(() => {})
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/visa/article/[id].vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="w-full pt-11 bg-[#fff]">
+    <div
+      v-if="visaTypeList?.length > 0"
+      class="flex px-15 w-full flex-wrap items-center justify-between"
+    >
+      <div
+        v-for="(item, index) in visaTypeList"
+        :key="item?.id"
+        @click="goToDetailsPage(item)"
+        :class="`${visaArticleParmas?.id == item?.id ? 'border-[1px] border-[#FD9A00] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)]' : ''} relative mb-12 box-border h-60 w-165 mb-12 rounded-xl  active:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]`"
+        style="background: linear-gradient(90deg, #fff5eb 0%, #f9e5cd 100%)"
+      >
+        <h1 class="my-18 ml-16 h-24 text-xl font-semibold leading-24 text-[#FD9A00]">
+          {{ item?.title }}
+        </h1>
+
+        <img
+          :src="visaTypeImageList[index]"
+          alt=""
+          class="absolute left-0 top-0 z-[10] h-full w-full"
+        />
+      </div>
+    </div>
+    <!-- 右边文章的区域 -->
+
+    <Empty v-if="!visaArticleParmas && !loading" />
+    <div v-else class="box-border px-15 pb-29 w-full">
+      <div
+        v-if="visaArticleParmas?.title"
+        :title="`${visaArticleParmas?.title}的介绍`"
+        class="w-full cursor-pointer truncate text-ellipsis whitespace-nowrap text-nowrap text-[15px] font-[600] leading-[23px] text-black-3"
+      >
+        {{ visaArticleParmas?.title }}的介绍
+      </div>
+      <div class="h-31 w-full flex items-center border-b-[1px] text-sm font-[400] text-black-6">
+        发布于{{ visaArticleParmas?.updateTime }}
+      </div>
+
+      <div
+        class="box-border w-full text-[12px] pt-11"
+        id="content"
+        v-html="visaArticleParmas?.recommand"
+      ></div>
+    </div>
+    <Footer />
+
+    <van-back-top
+      bottom="30vh"
+      right="12px"
+      style="background-color: white; color: #ff9300"
+      class="w-56 h-56 text-[10px] font-semibold"
+    >
+      <div class="w-full border border-[#000]/[0] flex justify-center flex-wrap">
+        <van-icon name="back-top" size="19" color="#FF9300" />
+        <div>TOP</div>
+      </div>
+    </van-back-top>
+  </div>
+</template>
+<script setup>
+// 签证分类的图片
+import small_banner_icon1 from '@/assets/img/visa/small_banner1.png'
+import small_banner_icon2 from '@/assets/img/visa/small_banner2.png'
+import small_banner_icon3 from '@/assets/img/visa/small_banner3.png'
+import small_banner_icon4 from '@/assets/img/visa/small_banner4.png'
+
+const id = useRouteParam('id')
+const loading = ref(true)
+// 签证分类的图片数组
+const visaTypeImageList = [
+  small_banner_icon1,
+  small_banner_icon2,
+  small_banner_icon3,
+  small_banner_icon4
+]
+
+// 文章的参数
+let visaArticleParmas = ref(null)
+
+// // 获取签证的类型列表
+const visaTypeList = ref([])
+async function getVisaTypeList() {
+  loading.value = true
+  const { data } = await request(`/website/tourism/visa/getTypeList`)
+
+  if (Array.isArray(data)) {
+    visaTypeList.value = data
+    visaArticleParmas.value = data.filter((el) => el.id == id.value)[0]
+    document.title = `${visaArticleParmas.value?.title}详情`
+    loading.value = false
+  }
+}
+
+// 跳转签证详情页
+const goToDetailsPage = (parmas) => {
+  visaArticleParmas.value = parmas
+  document.title = `${parmas.title}详情`
+}
+
+onMounted(async () => {
+  getVisaTypeList()
+})
+</script>
+
+<style lang="scss" scoped></style>

src/pages/visa/details/[id].vue

@@ -0,0 +1,391 @@
+<template>
+  <div class="w-full bg-[#fff]">
+    <div class="aspect-[375/211] h-211 overflow-hidden relative">
+      <img class="h-full w-full object-cover" :src="visaData?.img" alt="" />
+
+      <!-- <div
+        class="absolute z-1 top-0 left-0 w-full h-full flex justify-center items-center text-white"
+      >
+        <div class="h-61 w-full flex justify-center flex-wrap">
+          <h1 class="w-full h-31 text-center text-[31px] mb-6 leading-[31px] line-clamp-1">
+            {{ visaData?.countryCodeIdDictMap?.name }}
+          </h1>
+          <div class="w-73 h-4 border-t-[1px] border-white mb-9"></div>
+          <p class="w-full h-15 text-center text-sm leading-xl line-clamp-1">
+            {{ visaData?.countryCodeIdDictMap?.name }}
+          </p>
+        </div>
+      </div> -->
+    </div>
+    <div
+      style="z-index: 10"
+      class="w-full min-h-300 relative box-border pt-17 rounded-t-[20px] bg-[#fff] px-16 pb-30 -mt-15"
+    >
+      <h1
+        :title="visaData?.visaTitle"
+        class="w-full line-clamp-1 mb-19 text-xl leading-5xl font-medium"
+      >
+        {{ visaData?.visaTitle }}
+      </h1>
+      <p
+        v-for="(item, index) in subList"
+        :key="'sub' + index"
+        class="w-full text-base font-normal leading-6xl line-clamp-1"
+      >
+        <span class="text-black-6">{{ item }}:</span>
+        <span class="pl-8 text-black-3">
+          {{ subListValues[index] }}
+        </span>
+      </p>
+      <div
+        class="mt-8 box-border h-115 w-full rounded-lg border p-11 mb-16"
+        style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
+      >
+        <div class="box-border flex h-16 w-full items-center justify-start mb-18">
+          <div class="w-16 h-16">
+            <img class="h-full w-full object-cover" src="@/assets/img/visa/visa_logo.svg" alt="" />
+          </div>
+          <span class="mx-4 text-sm font-normal text-black">出签成功率</span>
+          <span class="text-xl font-semibold leading-xl text-[#FA8446]">98.9%</span>
+        </div>
+        <div class="w-full flex flex-nowrap items-center justify-between">
+          <div
+            v-for="(item, index) in guaranteeList"
+            :key="'guaranteeList' + index"
+            :class="`box-border  h-68 ${index == 2 ? 'w-[31%]' : 'w-[30%]'} `"
+          >
+            <div class="w-full flex items-center mb-8">
+              <div class="w-16 h-16 shrink-0">
+                <img class="h-full w-full object-cover" :src="item?.icon" alt="" />
+              </div>
+              <h1 class="ml-4 text-base text-base text-black">{{ item?.title }}</h1>
+            </div>
+            <p
+              :title="item?.describe"
+              class="line-clamp-2 mb-3 text-center text-sm font-normal leading-xl text-black-9"
+            >
+              {{ item?.describe }}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex h-40 px-20 box-border w-full justify-bewteen rounded-t-lg bg-[#F7F7F7]">
+        <div
+          v-for="(item, index) in navList"
+          :key="'productNav' + index"
+          @click="navIndex = index"
+          :class="`mx-8 box-border flex h-full w-90 items-center justify-center text-xl   ${navIndex === index ? 'border-b-[2px] border-[#FA8446] font-semibold text-[#FA8446]' : 'font-normal text-black-6'}`"
+        >
+          {{ item }}
+        </div>
+      </div>
+
+      <div
+        v-if="navIndex === 0"
+        v-html="visaData?.dataText"
+        class="box-border w-full py-16 pb-100"
+      ></div>
+      <div v-if="navIndex === 1" class="box-border w-full py-16 pb-60">
+        <template v-for="(item, index) in argumentList" :key="index + 'need'">
+          <div
+            class="mb-12 box-border w-full border-b-[1px] pb-9 text-base font-semibold text-black"
+          >
+            {{ item?.title }}
+          </div>
+          <p v-if="index === 3" class="mb-30 text-base font-normal leading-3xl text-black-9">
+            {{ argumentListData[index] === 0 ? '需要' : item?.need }}
+          </p>
+          <p v-else class="mb-30 text-base font-normal leading-3xl text-black-9">
+            {{
+              isArgument(argumentListData[index])
+                ? `${argumentListData[index]}${item.unit}`
+                : item?.need
+            }}
+          </p>
+        </template>
+      </div>
+
+      <div v-if="navIndex === 2" class="box-border w-full py-16 pb-80">
+        <div
+          class="w-full pb-8 mb-15 border-b-[1px]"
+          v-for="(item, index) in metarialsLists"
+          :key="item.id"
+        >
+          <h1 class="line-clamp-1 w-fullw-full text-base pb-4 font-semibold text-black leading-5xl">
+            {{ index + 1 }}.{{ item.title }}
+          </h1>
+          <p class="w-full text-sm text-black-6 leading-3xl font-normal">
+            {{ item?.content ? item?.content : '无' }}
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="fixed bottom-0 left-0 z-50 bg-white box-brder w-full h-100 border-t-[1px] p-15 pb-38 flex justify-bewteen items-center"
+      style="box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.1)"
+    >
+      <p class="w-full">
+        <span class="truncate whitespace-nowrap text-nowrap text-base font-normal text-black/[0.9]">
+          合计费用:
+        </span>
+        <span class="text-sm font-normal text-[#FF476A]">
+          ¥
+          <span class="text-3xl font-semibold">
+            {{ visaData?.floorPrice ? visaData?.floorPrice : '????' }}
+          </span>
+          <!-- RMB -->
+          起
+        </span>
+      </p>
+
+      <van-button
+        @click="showVisaModal = !showVisaModal"
+        type="warring"
+        color="#FA8446"
+        round
+        class="box-border w-180 h-46 text-white shrink-0 rounded-full text-xl font-semibold"
+      >
+        联系顾问
+      </van-button>
+    </div>
+
+    <van-back-top
+      bottom="30vh"
+      right="12px"
+      style="background-color: white; color: #ff9300"
+      class="w-56 h-56 text-[10px] font-semibold"
+    >
+      <div class="w-full border border-[#000]/[0] flex justify-center flex-wrap">
+        <van-icon name="back-top" size="19" color="#FF9300" />
+        <div>TOP</div>
+      </div>
+    </van-back-top>
+
+    <van-dialog
+      :keyboard-enabled="false"
+      v-model:show="showVisaModal"
+      style="width: 80%; border-radius: 12px"
+    >
+      <template #title>
+        <div class="flex justify-between items-center border-b-[1px] px-15 pb-10">
+          <h1 class="text-[16px] font-semibold text-[#333]">顾问信息</h1>
+          <div class="w-31 h-31 shrink-0" @click="showVisaModal = false">
+            <img
+              class="w-full h-full object-cover"
+              src="~/assets/img/note-create/close.svg"
+              alt=""
+            />
+          </div>
+        </div>
+      </template>
+      <div class="box-border w-full h-256">
+        <div class="flex items-start justify-start pt-34 pl-24 pr-15 mb-22">
+          <div
+            class="box-border h-64 w-64 overflow-hidden rounded-full border-[2px] border-[#E2E2E2]"
+          >
+            <img class="h-full w-full object-cover" :src="consultantInfo?.counselorAvatar" alt="" />
+          </div>
+
+          <div class="ml-21 w-160 text-left">
+            <p class="line-clamp-1 text-base font-normal leading-5xl text-[#333]/[0.9]">
+              {{ consultantInfo?.counselorName }} ({{ consultantInfo?.levelDictMap?.name }})
+            </p>
+            <p class="line-clamp-1 text-sm font-normal leading-5xl text-black-9">
+              工作时间 {{ consultantInfo?.workingTime }}
+            </p>
+            <p
+              :title="phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone)"
+              class="line-clamp-1 text-xl font-semibold text-[#000]"
+            >
+              {{ phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone) }}
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <div class="ml-109">
+            <div class="h-94 w-94 overflow-hidden">
+              <img
+                class="h-full w-full object-cover"
+                :src="consultantInfo?.counselorWechat"
+                alt=""
+              />
+            </div>
+
+            <p class="text-sm pt-8 font-normal leading-base text-black-9">扫码添加 企业微信</p>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="w-full flex justify-center mb-19">
+          <van-button
+            @click="showVisaModal = false"
+            style="width: 120px; height: 40px"
+            color="#FF9300"
+            round
+            type="warning"
+          >
+            确认
+          </van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import lock from '@/assets/img/visa/lock.svg'
+import professional_customer_service from '@/assets/img/visa/professional_customer_service.svg'
+import refund from '@/assets/img/visa/refund.svg'
+
+const id = useRouteParam('id')
+
+// 被选中的下标
+let navIndex = ref(0)
+
+// 签证的信息
+let visaData = ref({})
+
+// 顾问的模态框
+let showVisaModal = ref(false)
+
+// 顾问信息
+let consultantInfo = ref({})
+
+// 基础材料的信息
+const metarialsLists = ref([])
+
+// 签证的信息列表
+const subListValues = ref([])
+
+// 签证的副列表
+const subList = reactive(['签证类型', '有效期', '可停留期', '入境次数', '办理时长'])
+
+const isValue = (parmas) => {
+  if (parmas !== null || parmas !== undefined || parmas !== '') {
+    return parmas
+  } else {
+    return ''
+  }
+}
+
+// 电话分段
+const phoneSection = (codeId, phone) => {
+  if (codeId && phone) {
+    return `+${codeId} ${phone?.slice(0, 3)} ${phone?.slice(3, 7)} ${phone?.slice(7, 11)}`
+  } else {
+    return ''
+  }
+}
+
+// 签证保障列表项
+const guaranteeList = reactive([
+  {
+    icon: lock,
+    title: '隐私保护',
+    describe: '全程独立操作，安全可靠'
+  },
+
+  {
+    icon: professional_customer_service,
+    title: '专业客服',
+    describe: '一对一客服帮您制定送签方案'
+  },
+  {
+    icon: refund,
+    title: '退款保证',
+    describe: '材料制作完成前，均可申请退款'
+  }
+])
+
+// 产品的nav
+const navList = reactive(['签证介绍', '签证参数', '基础材料'])
+
+// 产品参数
+const argumentList = reactive([
+  {
+    title: '签证有效期',
+    need: '无限制',
+    unit: '天'
+  },
+  {
+    title: '停留期',
+    need: '无限制',
+    unit: '天'
+  },
+  {
+    title: '入境次数',
+    need: '无限制',
+    unit: '次'
+  },
+  {
+    title: '是否面签',
+    need: '不需要',
+    unit: ''
+  }
+])
+
+const argumentListData = ref([])
+
+const isArgument = (param) => {
+  if (param > 0) {
+    return true
+  } else {
+    return false
+  }
+}
+// 获取签证详情
+async function getVisaDetails() {
+  try {
+    let url = `/website/tourism/visa/findByById?id=${id?.value}`
+
+    let {
+      data: { visa, counselor, metarialsList }
+    } = await request(url)
+
+    if (visa) {
+      subListValues.value = [
+        visa?.visaTypeIdDictMap?.name,
+        visa?.validity ? `${visa?.validity}天` : '无限制',
+        visa?.idleDays ? `${visa?.idleDays}天，使馆根据行程批复` : '无限制',
+        visa?.entriesNum ? `${visa?.entriesNum}次` : '无限制',
+        visa?.processingDays ? `收齐材料后${visa?.processingDays}个工作日` : ''
+      ]
+
+      argumentListData.value = [
+        visa?.validity,
+        visa?.idleDays,
+        visa?.entriesNum,
+        visa?.interviewFlag
+      ]
+      visaData.value = visa
+    }
+
+    if (counselor) {
+      consultantInfo.value = counselor
+      consultantInfo.value.workingTime = `${isValue(counselor.start)}:00 - ${isValue(counselor.end)}:00`
+    }
+
+    if (Array.isArray(metarialsList)) {
+      metarialsLists.value = metarialsList
+    }
+  } finally {
+    return
+  }
+}
+
+onMounted(() => {
+  if (id?.value) getVisaDetails()
+})
+
+useSeoMeta({
+  title: `签证详情`
+})
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-button {
+  padding: 8px 26px;
+}
+</style>

src/pages/visa/index.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="w-full h-full">
+    <div class="w-full px-16 h-40 mt-10 mx-auto">
+      <div class="flex h-40 w-full items-center justify-between rounded-full border bg-[#fff]">
+        <input
+          type="text"
+          v-model="searchString"
+          class="ml-5 w-[80%] h-full pl-10 text-sm"
+          placeholder="请输入要办理的签证居留的国家或地区名称"
+          @keydown.enter="navigateTovisaList({ searchString })"
+          style="outline: none; background: none"
+        />
+        <!-- @keydown.enter="navigateTovisaList({ searchString })" -->
+        <button
+          @click="navigateTovisaList({ searchString })"
+          class="h-full border flex justify-center items-center w-66 shrink-0 rounded-r-full"
+        >
+          <div style="color: white" class="w-16 h-16 shrink-0">
+            <img class="w-full h-full object-cover" src="~/assets/img/visa/search.svg" alt="" />
+          </div>
+        </button>
+      </div>
+    </div>
+    <div class="w-full pl-32 pb-10 text-left text-sm text-black-9">
+      *暂不支持公务员、军人办理签证
+    </div>
+
+    <div class="relative h-110 w-full pt-23">
+      <img
+        :src="banner_visa"
+        alt="banner_visa"
+        class="absolute left-0 top-0 z-[-100] h-full w-full"
+      />
+      <img
+        :src="banner_left"
+        alt="banner_left"
+        class="absolute left-0 top-0 z-[-80] h-full w-127"
+      />
+      <img
+        :src="banner_right"
+        alt="banner_right"
+        class="absolute right-0 top-0 -z-80 h-full w-127"
+      />
+
+      <!-- 签证的搜索区域 -->
+      <div class="mx-auto box-border flex w-190 flex-wrap items-center justify-center">
+        <h1 class="w-full text-center text-xl">签证居留</h1>
+
+        <h2 class="w-full pb-24 pt-4 px-15 text-black-6 text-center text-sm">
+          覆盖全球多个国家和地区，
+          <br />
+          提供全面便捷的一站式服务。
+        </h2>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center px-16 pt-16 justify-center bg-[#fff]">
+      <!-- 签证办理流程 -->
+
+      <VisaPayProcess></VisaPayProcess>
+      <!-- 签证类型 -->
+      <div class="flex w-full flex-wrap items-center justify-between">
+        <NuxtLink
+          v-for="(item, index) in visaTypeList"
+          :key="item?.id"
+          :to="`/visa/article/${item?.id}`"
+          class="relative mb-12 box-border h-60 w-165 rounded-lg hover:border-[1px] hover:border-[#FD9A00] hover:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)] active:border-[1px] active:border-[#FD9A00] active:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]"
+          style="background: linear-gradient(90deg, #fff5eb 0%, #f9e5cd 100%)"
+        >
+          <h1 class="my-18 ml-16 h-24 text-xl font-semibold leading-24 text-[#FD9A00]">
+            {{ item?.title }}
+          </h1>
+
+          <img
+            :src="visaTypeImageList[index]"
+            alt=""
+            class="absolute left-0 top-0 z-[10] h-full w-full"
+          />
+        </NuxtLink>
+      </div>
+
+      <!-- 热门目的地签证 -->
+      <div class="box-border w-full rounded-lg">
+        <h1
+          v-if="hotVisaList?.length > 0"
+          class="p-16 text-center text-base font-normal text-black-6"
+        >
+          热门签证
+        </h1>
+        <div class="flex flex-wrap items-start justify-between">
+          <NuxtLink
+            :to="`/visa/details/${item?.id}`"
+            v-for="(item, index) in hotVisaList?.slice(0, 8)"
+            :key="item.id"
+            :class="`mb-12 w-[48%] cursor-pointer overflow-hidden  rounded-xl bg-[#fff]`"
+          >
+            <div class="h-98 w-full overflow-hidden rounded-t-xl">
+              <img v-if="item?.img" :src="item?.img" alt="" class="h-full w-full" />
+            </div>
+
+            <div class="box-border border flex rounded-b-xl items-center justify-between p-8">
+              <span
+                :title="item?.countryCodeIdDictMap?.name"
+                class="w-42 line-clamp-1 text-base font-medium text-black-3"
+              >
+                {{ item?.countryCodeIdDictMap?.name }}
+              </span>
+
+              <div
+                :class="` shrink-0 line-clamp-1 px-4 h-20 text-center text-sm leading-3xl rounded-full text-[${formatStatus(item?.visaTypeIdDictMap?.id)}] bg-[${formatStatus(item?.visaTypeIdDictMap?.id)}]/[0.1]`"
+              >
+                {{ item?.visaTypeIdDictMap.name }}
+              </div>
+
+              <span class="shrink-0 line-clamp-1">
+                <span class="text-sm text-[#f0a020]">￥</span>
+                <span class="text-base text-[#f0a020]">{{ item?.floorPrice }}</span>
+                <span class="text-sm text-[#999]">起</span>
+              </span>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+    <h1
+      v-if="allVisaList.length > 0"
+      class="w-full pb-20 pt-8 font-normal text-center text-base text-black-6"
+    >
+      全球目的地签证
+    </h1>
+    <div
+      class="flex w-full items-center border-b-[1px] border-[#E7E7E7] border- mb-16 justify-between overflow-hidden"
+    >
+      <div
+        :class="`flex relative justify-center items-center box-border h-48 flex-1 cursor-pointer ${tabs_value === item?.id ? 'border-b-1 border-b-[#FD9A00] bg-[#fff] font-[600] font-semibold text-[#FD9A00]' : ' bg-[#fff] font-normal text-black-9'}  text-base `"
+        v-for="item in allVisaList"
+        :key="item?.id"
+        @click="changeTabs(item?.id)"
+      >
+        {{ item?.title }}
+        <div
+          v-if="tabs_value === item?.id"
+          class="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-3 bg-[#FF9300] rounded"
+        ></div>
+      </div>
+    </div>
+
+    <div class="w-full bg-[#fff] mb-30 pl-12">
+      <div class="box-border flex flex-wrap justify-start">
+        <Empty v-if="!chauAllCountryVisaData.length" title="暂无数据" top="50" />
+        <template v-for="(el, it) in chauAllCountryVisaData" :key="el?.id + el?.english_name">
+          <div
+            @click="navigateGlobalTovisaList({ countryCodeId: el?.country_code }, it)"
+            :class="`mb-12 mr-10 flex py-8 px-6 h-108 w-[22%] flex-wrap justify-between  rounded-[4px] ${globalActive == it ? 'bg-[#F5F7FA]' : ''} `"
+          >
+            <div class="h-48 mb-4 w-72 overflow-hidden border border-dotted border-[#E5E5E5]">
+              <img
+                v-if="el?.url !== ''"
+                class="h-full w-full rounded-[4px] object-cover"
+                :src="el?.url"
+                style="object-fit: contain"
+                alt=""
+              />
+              <img v-else class="h-full w-full rounded-[4px] object-cover" :src="UN" alt="" />
+            </div>
+            <div class="pl-2.5 box-border w-full">
+              <div
+                :title="el?.country"
+                :class="`h-[26px] w-full truncate text-ellipsis whitespace-nowrap text-base font-[400] leading-[20px]  ${globalActive == it ? 'text-[#FF9300]' : ''} `"
+              >
+                {{ el?.country }}
+              </div>
+
+              <div
+                :title="el?.english_name"
+                :class="`h-16 w-72 truncate text-ellipsis whitespace-nowrap text-sm font-[400] leading-sm   ${globalActive == it ? 'text-[#FF9300]' : 'text-black-9 '} `"
+              >
+                {{ el?.english_name }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <Footer />
+  </div>
+</template>
+<script setup>
+import banner_visa from '@/assets/img/visa/banner_visa.png'
+import banner_left from '@/assets/img/visa/banner_left.png'
+import banner_right from '@/assets/img/visa/banner_right.png'
+import search_svg from '~/assets/img/visa/search.svg'
+
+// 签证分类的图片
+import small_banner_icon1 from '@/assets/img/visa/small_banner1.png'
+import small_banner_icon2 from '@/assets/img/visa/small_banner2.png'
+import small_banner_icon3 from '@/assets/img/visa/small_banner3.png'
+import small_banner_icon4 from '@/assets/img/visa/small_banner4.png'
+
+//国家图片
+import UN from '@/assets/img/visa/UNImage.png'
+
+onMounted(() => {
+  getVisaTypeList()
+  getHotVisaList()
+  getAllVisaList()
+  getChauAllCountryVisaList()
+})
+
+const colorList = ['#FF9300', '#1BC467', '#FF476A', '#1BC467']
+// 签证的搜索
+const searchString = ref('')
+
+// 全球的tabs的下标
+const tabs_value = ref('1')
+
+// 全球签证触发的下标
+const globalActive = ref(null)
+
+// 顾问信息
+let consultantInfo = ref({})
+
+// 顾问的模态框
+let showVisaModal = ref(false)
+
+// 重新获取洲对应的国家
+watch(
+  tabs_value,
+  () => {
+    getChauAllCountryVisaList()
+  },
+  { deep: true }
+)
+
+// 跳转到签证的列表页
+const navigateTovisaList = (parmas) => {
+  // if (parmas.searchString) {
+  navigateTo({
+    path: '/visa/visaList',
+    query: {
+      ...parmas
+    }
+  })
+  // }
+}
+
+// 跳转到签证的列表页
+const navigateGlobalTovisaList = (parmas, index) => {
+  globalActive.value = index
+  navigateTo({
+    path: '/visa/visaList',
+    query: {
+      ...parmas
+    }
+  })
+}
+
+const visaTypeImageList = [
+  small_banner_icon1,
+  small_banner_icon2,
+  small_banner_icon3,
+  small_banner_icon4
+]
+
+const isValue = (parmas) => {
+  if (parmas !== null || parmas !== undefined || parmas !== '') {
+    return parmas
+  } else {
+    return ''
+  }
+}
+
+// tabs标题的切换
+const changeTabs = (newTabId) => {
+  tabs_value.value = newTabId
+}
+
+// 获取签证的类型列表
+const visaTypeList = ref([])
+async function getVisaTypeList() {
+  const { data } = await request(`/website/tourism/visa/getTypeList`)
+
+  if (Array.isArray(data)) visaTypeList.value = data
+}
+
+// 获取热门签证
+const hotVisaList = ref([])
+async function getHotVisaList() {
+  const { data } = await request('/website/tourism/visa/hotAddress')
+
+  if (Array.isArray(data)) hotVisaList.value = data
+}
+
+// 获取全球的签证目的地
+const allVisaList = ref([])
+async function getAllVisaList() {
+  const { data } = await request('/website/tourism/visa/interFind')
+
+  if (Array.isArray(data)) allVisaList.value = data
+}
+
+// 获取洲对应的国家的签证目的地
+
+const chauAllCountryVisaData = ref([])
+
+async function getChauAllCountryVisaList() {
+  let url = `/website/tourism/visa/findAllCountry?id=${tabs_value.value}`
+  let { data } = await request(url)
+
+  if (Array.isArray(data) && data?.length) {
+    chauAllCountryVisaData.value = data
+  } else {
+    chauAllCountryVisaData.value = []
+  }
+}
+
+function formatStatus(status) {
+  let index = visaTypeList.value?.findIndex((item) => item.id == status)
+  return colorList[index]
+}
+
+// 单独获取顾问得的二维码
+// const getCounselorQr = async () => {
+//   showVisaModal.value = !showVisaModal.value
+//   try {
+//     let url = `/website/tourism/visa/findWechatList`
+
+//     let { data } = await request(url)
+
+//     if (data) {
+//       consultantInfo.value = data
+//       consultantInfo.value.workingTime = `${isValue(data?.start)}:00 - ${isValue(data?.end)}:00`
+//     }
+//   } finally {
+//     return
+//   }
+// }
+</script>
+<style lang="scss" scoped>
+::v-deep .van-tabs__line {
+  background-color: #ff9300;
+}
+
+::v-deep .van-tab__text--ellipsis {
+  font-size: 16px;
+}
+</style>

src/pages/visa/visaList.vue

@@ -0,0 +1,636 @@
+<template>
+  <div>
+    <div class="sticky top-49 z-50 bg-white w-full">
+      <div class="w-full p-16">
+        <!-- 列表搜索 -->
+        <div class="flex h-40 w-full items-center justify-between rounded-full border bg-[#fff]">
+          <input
+            type="text"
+            v-model="searchString"
+            class="ml-5 w-[80%] pl-10 text-sm"
+            placeholder="输入要办理的签证居留的国家或地区名称"
+            style="outline: none; background: none"
+            @keydown.enter="search"
+          />
+          <button @click="search" class="h-full border w-46 shrink-0 rounded-r-full">
+            <van-icon size="16" :name="searchSvg" />
+          </button>
+        </div>
+      </div>
+
+      <van-dropdown-menu active-color="#FF9300" ref="visaDropDownMenuRef">
+        <van-dropdown-item
+          ref="itemTypeRef"
+          @open="showItemType = true"
+          @close="showItemType = false"
+          @closed="onVisaFilterClose"
+          v-model="checkedVisaType"
+        >
+          <template #title>
+            <div class="flex h-50 box-border py-12 justify-center items-center">
+              <van-icon v-if="showItemType" size="16" :name="orangeVisaTypeSvg" />
+              <van-icon v-else size="16" :name="visaTypeSvg" />
+              <span class="pl-4 text-base">{{ visaTypeTitle }}</span>
+            </div>
+          </template>
+          <van-cell
+            v-for="el in visaTypeList"
+            :key="el?.id"
+            :title="el.title"
+            @click="handleCheckedVisaTypeChange(el)"
+          >
+            <template #right-icon>
+              <van-radio-group v-model="checkedVisaType">
+                <van-radio
+                  checked-color="#FF9300"
+                  :name="el?.id"
+                  v-model="el.id"
+                  @click="handleCheckedVisaTypeChange(el)"
+                  shape="square"
+                ></van-radio>
+              </van-radio-group>
+            </template>
+          </van-cell>
+        </van-dropdown-item>
+
+        <van-dropdown-item
+          ref="itemLocationRef"
+          @open="showItemLocation = true"
+          @close="showItemLocation = false"
+          @closed="onVisaLocFilterClose"
+          v-model="checkedIssueVisaAddr"
+        >
+          <template #title>
+            <div class="flex h-50 box-border py-12 justify-center items-center">
+              <van-icon v-if="showItemLocation" size="16" :name="orangeLocationSvg" />
+              <van-icon v-else size="16" :name="locationSvg" />
+
+              <span class="pl-4 text-base">{{ visaLocationTitle }}</span>
+            </div>
+          </template>
+          <van-cell
+            v-for="item in countryCodeList"
+            :key="item?.id"
+            :title="item.name"
+            @click="handleCheckedCitiesChange(item)"
+          >
+            <template #right-icon>
+              <van-radio-group v-model="checkedIssueVisaAddr">
+                <van-radio
+                  checked-color="#FF9300"
+                  :name="item.code"
+                  v-model="item.code"
+                  @click="handleCheckedCitiesChange(item)"
+                  shape="square"
+                ></van-radio>
+              </van-radio-group>
+            </template>
+          </van-cell>
+        </van-dropdown-item>
+      </van-dropdown-menu>
+    </div>
+
+    <div class="w-full box-border px-16">
+      <!-- 每一项签证的展示  -->
+      <Empty v-if="!visaList?.length && !loading" title="暂无该签证数据" top="100" />
+      <!-- @load="getLoadList" -->
+      <van-list
+        v-else-if="visaList.length"
+        :finished="finished"
+        error-text="获取失败"
+        finished-text="-- 没有更多了 --"
+        :immediate-check="false"
+      >
+        <div
+          v-for="item in visaList"
+          :key="item?.id"
+          class="w-full min-h-160 box-border border rounded-lg mt-12 px-12 pt-15 pb-13 relative"
+          style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
+        >
+          <NuxtLink :to="'/visa/details/' + item?.id" @click.prevent class="w-full block">
+            <div class="flex w-full h-90 box-border justify-start mb-15">
+              <div class="w-110 h-80 rounded mr-12">
+                <img class="h-full w-full rounded object-cover" :src="item?.img" alt="" />
+              </div>
+
+              <div class="w-200">
+                <h1
+                  :title="item?.visaTitle"
+                  class="w-full h-24 mb-2 truncate whitespace-nowrap text-nowrap text-base font-semibold leading-5xl text-[#444]"
+                >
+                  {{ item?.visaTitle }}
+                </h1>
+
+                <p class="w-full leading-3xl font-normal text-sm truncate">
+                  <span class="text-black-9">签证类型：</span>
+                  <span :title="item?.visaTypeIdDictMap?.name" class="text-[#444]">
+                    {{ item?.visaTypeIdDictMap?.name }}
+                  </span>
+                </p>
+                <p
+                  v-if="item?.validity > 0"
+                  class="w-full truncate leading-3xl font-normal text-sm"
+                >
+                  <span class="text-black-9">有效期：</span>
+                  <span class="text-[#444]">
+                    {{ item?.validity ? `${item?.validity}天` : '无限制' }}
+                  </span>
+                </p>
+
+                <p
+                  v-if="item?.processingDays > 0"
+                  class="w-full font-normal truncate leading-3xl text-sm"
+                >
+                  <span class="text-black-9">出签周期：</span>
+                  <span class="text-[#444]">收齐材料后{{ item?.processingDays }}个工作日</span>
+                </p>
+              </div>
+            </div>
+
+            <div class="w-full box-border flex justify-between h-24 items-center">
+              <p class="block text-center text-sm font-normal text-[#FF476A] pt-3 m-0">
+                ¥
+                <span class="text-5xl font-semibold">
+                  {{ item?.floorPrice ? item?.floorPrice : '????' }}
+                </span>
+                RMB 起
+              </p>
+
+              <button
+                class="h-full border text-base px-13 shrink-0 border-black-9 rounded-full bg-white active:bg-black/[0.1]"
+              >
+                详情
+                <van-icon size="14" name="arrow" />
+              </button>
+            </div>
+          </NuxtLink>
+
+          <button
+            @click.stop="getVisaCounselorDetails(item.id)"
+            class="h-24 absolute bottom-15 right-97 z-20 border text-[#FD9A00] text-base px-13 shrink-0 border-[#FD9A00] rounded-full bg-white active:bg-[#FD9A00]/[0.1]"
+          >
+            联系顾问
+          </button>
+        </div>
+      </van-list>
+
+      <div
+        class="mb-20 mt-11 overflow-hidden box-border h-107 w-full rounded-lg border border-[#F5F5F5] flex"
+      >
+        <div
+          class="box-border flex h-full w-115 px-15 py-11 items-center justify-center border-r-[1px] border-r-[#F5F5F5]"
+          style="background: linear-gradient(180deg, #fff7eb 0%, #ffffff 100%)"
+        >
+          <div class="h-84 w-84 shrink-0">
+            <img
+              :src="rightTopCounselorData?.counselorWechat"
+              alt=""
+              class="h-full w-full object-cover"
+            />
+          </div>
+        </div>
+        <div
+          class="font-semibold h-full w-230 flex items-center justify-start text-base text-[#444]"
+        >
+          <div class="w-22 h-12 shrink-0 mx-20">
+            <img class="w-full h-full" src="@/assets/img/visa/three_left.svg" alt="" />
+          </div>
+          扫码联系 人工服务
+        </div>
+      </div>
+
+      <div class="z-[10] flex w-full mb-8 items-center text-xl font-semibold text-black-3">
+        <div class="w-16 h-16 shrink-0 mr-4">
+          <img class="w-full h-full object-cover" src="@/assets/img/visa/fire.svg" alt="" />
+        </div>
+        超值热卖
+      </div>
+
+      <div class="relative min-h-244 w-full rounded-lg border overflow-hidden mb-20">
+        <img
+          class="absolute left-0 top-0 z-0 h-67 w-full object-cover"
+          src="@/assets/img/visa/Rectangle.png"
+          alt=""
+        />
+        <div class="absolute left-0 top-0 z-1 box-border h-full w-full px-11">
+          <NuxtLink
+            v-for="item in hotList"
+            :key="item.id"
+            :to="'/t/' + item?.id"
+            class="my-15 flex h-60 w-full justify-between"
+          >
+            <div class="w-90 h-full shrink-0 overflow-hidden rounded-[4px]">
+              <img
+                class="h-full w-full object-cover"
+                :src="item.homeHotPicturesAfterConvert[0]"
+                alt=""
+              />
+            </div>
+
+            <div class="ml-15 box-border w-220">
+              <p
+                :title="`【热销纯玩】 ${item?.projectTitle}`"
+                class="h-38 text-sm line-clamp-2 leading-2xl"
+              >
+                【热销纯玩】{{ item?.projectTitle }}
+              </p>
+              <p class="text-right text-sm font-semibold leading-2xl text-black-9">
+                <span class="text-base text-[#FF476A]">
+                  ￥ {{ item?.price ? item?.price : '????' }} RMB
+                </span>
+                起
+              </p>
+            </div>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+    <van-back-top
+      bottom="30vh"
+      right="12px"
+      style="background-color: white; color: #ff9300"
+      class="w-56 h-56 text-[10px] font-semibold"
+    >
+      <div class="w-full border border-[#000]/[0] flex justify-center flex-wrap">
+        <van-icon name="back-top" size="19" color="#FF9300" />
+        <div>TOP</div>
+      </div>
+    </van-back-top>
+    <van-dialog
+      :keyboard-enabled="false"
+      v-model:show="showVisaModal"
+      style="width: 80%; border-radius: 12px"
+    >
+      <template #title>
+        <div class="flex justify-between items-center border-b-[1px] px-15 pb-10">
+          <h1 class="text-[16px] font-semibold text-[#333]">顾问信息</h1>
+          <div class="w-31 h-31 shrink-0" @click="showVisaModal = false">
+            <img
+              class="w-full h-full object-cover"
+              src="~/assets/img/note-create/close.svg"
+              alt=""
+            />
+          </div>
+        </div>
+      </template>
+      <div class="box-border w-full h-256">
+        <div class="flex items-start justify-start pt-34 pl-24 pr-15 mb-22">
+          <div
+            class="box-border h-64 w-64 overflow-hidden rounded-full border-[2px] border-[#E2E2E2]"
+          >
+            <img class="h-full w-full object-cover" :src="consultantInfo?.counselorAvatar" alt="" />
+          </div>
+
+          <div class="ml-21 w-160 text-left">
+            <p class="line-clamp-1 text-base font-normal leading-5xl text-[#333]/[0.9]">
+              {{ consultantInfo?.counselorName }} ({{ consultantInfo?.levelDictMap?.name }})
+            </p>
+            <p class="line-clamp-1 text-sm font-normal leading-5xl text-black-9">
+              工作时间 {{ consultantInfo?.workingTime }}
+            </p>
+            <p
+              :title="phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone)"
+              class="line-clamp-1 text-xl font-semibold text-[#000]"
+            >
+              {{ phoneSection(consultantInfo?.countryCodeId, consultantInfo?.counselorPhone) }}
+            </p>
+          </div>
+        </div>
+
+        <div>
+          <div class="ml-109">
+            <div class="h-94 w-94 overflow-hidden">
+              <img
+                class="h-full w-full object-cover"
+                :src="consultantInfo?.counselorWechat"
+                alt=""
+              />
+            </div>
+
+            <p class="text-sm pt-8 font-normal leading-base text-black-9">扫码添加 企业微信</p>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <div class="w-full flex justify-center mb-19">
+          <van-button
+            @click="showVisaModal = false"
+            style="width: 120px; height: 40px"
+            color="#FF9300"
+            round
+            type="warning"
+          >
+            确认
+          </van-button>
+        </div>
+      </template>
+    </van-dialog>
+  </div>
+</template>
+<script setup>
+import searchSvg from '@/assets/img/visa/search.svg'
+import visaTypeSvg from '@/assets/img/visa/qianzheng_three.svg'
+import orangeVisaTypeSvg from '@/assets/img/visa/orange_qianzheng_three.svg'
+import locationSvg from '@/assets/img/visa/location.svg'
+import orangeLocationSvg from '@/assets/img/visa/orangeLocation.svg'
+
+const route = useRoute()
+
+const UNLIMITED_TEXT = '不限'
+const TYPE_TEXT = '签证类型'
+const ADDRESS_TEXT = '出签地'
+
+const visaDropDownMenuRef = ref(null)
+
+const itemTypeRef = ref(null)
+const showItemType = ref(false)
+
+const itemLocationRef = ref(null)
+const showItemLocation = ref(false)
+
+const visaTypeTitle = ref(TYPE_TEXT)
+const visaLocationTitle = ref(ADDRESS_TEXT)
+// const activeIndex = ref('')
+// const activeIndex2 = ref('')
+
+// const visaTypeIndex = ref(0) //签证类型索引
+// const visaLocIndex = ref(0) //签证类型索引
+watch(showItemType.value, () => {}, { deep: true })
+
+// 监听签证类型筛选框收起
+function onVisaFilterClose() {
+  // visaTypeIndex.value = activeIndex.value
+}
+
+// 监听出签地筛选框收起
+function onVisaLocFilterClose() {
+  // visaLocIndex.value = activeIndex2.value
+}
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 1000,
+  searchString: computed(() => route.query?.searchString ?? ''),
+  countryCodeId: computed(() => route.query?.countryCodeId ?? '')
+})
+
+const loading = ref(false)
+const finished = ref(false)
+
+// 超值热卖的页数
+const pageNum = ref(1)
+
+// 顾问的模态框
+let showVisaModal = ref(false)
+
+// 签证列表
+const visaList = ref([])
+
+// 右上角签证顾问
+const rightTopCounselorData = ref({})
+
+// 出签地列表
+const countryCodeList = ref([])
+
+// 搜索得参数
+let searchString = ref('')
+
+// 选中的筛选类型
+let checkedVisaType = ref(0)
+
+// 选中的筛选出签地
+let checkedIssueVisaAddr = ref(0)
+
+// 顾问信息
+let consultantInfo = ref({})
+
+// 超值热卖
+let hotList = ref([])
+
+const isValue = (parmas) => {
+  if (parmas !== null || parmas !== undefined || parmas !== '') {
+    return parmas
+  } else {
+    return ''
+  }
+}
+
+// 搜索的方法
+function search() {
+  if (searchString.value) {
+    navigateTo({
+      path: '/visa/visaList',
+      query: {
+        searchString: searchString.value
+      }
+    })
+  } else {
+    navigateTo('/visa/visaList')
+  }
+}
+
+// 选择类型的筛选条件
+const handleCheckedVisaTypeChange = (parmas) => {
+  if (parmas.title == TYPE_TEXT) {
+    visaTypeTitle.value = TYPE_TEXT
+  } else {
+    visaTypeTitle.value = parmas.title
+  }
+  checkedVisaType.value = parmas.id
+  itemTypeRef.value.toggle()
+  showItemType.value = !showItemType.value
+  document.title = parmas.title
+  getVisaList()
+}
+
+// 电话分段
+const phoneSection = (codeId, phone) => {
+  if (codeId || phone) {
+    return `+${codeId} ${phone?.slice(0, 3)} ${phone?.slice(3, 7)} ${phone?.slice(7, 11)}`
+  }
+}
+
+// 出签地得选择筛选条件
+const handleCheckedCitiesChange = (parmas) => {
+  if (parmas.name == ADDRESS_TEXT) {
+    visaLocationTitle.value = ADDRESS_TEXT
+  } else {
+    visaLocationTitle.value = parmas.name
+  }
+
+  checkedIssueVisaAddr.value = parmas.code
+  itemLocationRef.value.toggle()
+  showItemLocation.value = !showItemLocation.value
+  document.title = parmas.name
+  getVisaList()
+}
+
+// 获取出签地列表
+async function getCountryCodeList() {
+  let url = `/website/tourism/visa/findCountryCodeList`
+
+  const { data } = await request(url)
+  data?.unshift({ name: UNLIMITED_TEXT, code: 0, id: '' })
+  if (Array.isArray(data)) countryCodeList.value = data
+}
+
+// 获取签证的类型列表
+const visaTypeList = ref([])
+async function getVisaTypeList() {
+  const { data } = await request(`/website/tourism/visa/getTypeList`)
+  data?.unshift({ title: UNLIMITED_TEXT, code: 0, id: 0 })
+  if (Array.isArray(data)) visaTypeList.value = data
+}
+
+// 获取签证列表
+async function getVisaList() {
+  try {
+    loading.value = true
+    let url = `/website/tourism/visa/list/page`
+    let data = {}
+
+    if (checkedVisaType.value != 0) {
+      data.visaTypeId = checkedVisaType.value
+    }
+
+    if (checkedIssueVisaAddr.value != 0) {
+      data.issueVisaCode = checkedIssueVisaAddr?.value
+    }
+
+    let {
+      data: { dataList, totalCount }
+    } = await request(url, {
+      query: {
+        ...queryParams,
+        ...data
+      }
+    })
+
+    if (Array.isArray(dataList) && dataList?.length) {
+      visaList.value = dataList
+    } else {
+      visaList.value = []
+    }
+    loading.value = false
+
+    if (totalCount <= visaList.value.length) {
+      finished.value = false
+    } else {
+      finished.value = false
+    }
+  } catch (err) {}
+}
+
+// 获取筛选签证列表
+async function getLoadList() {
+  queryParams.pageNum += 1
+  getVisaList()
+}
+
+//  获取签证顾问信息
+async function getVisaCounselorDetails(cid) {
+  // 阻止事件冒泡
+
+  showVisaModal.value = !showVisaModal.value
+  try {
+    let url = `/website/tourism/visa/findByById?id=${cid}`
+
+    let {
+      data: { visa, counselor }
+    } = await request(url)
+
+    if (counselor) {
+      counselor.countryCodeId = visa?.countryCodeId
+      counselor.workingTime =
+        counselor?.start > 0 && counselor?.end > 0
+          ? `${isValue(counselor?.start)}:00 - ${isValue(counselor?.end)}:00`
+          : ''
+      consultantInfo.value = counselor
+    }
+  } catch (error) {
+    return
+  }
+}
+
+// 签证列表单独获取顾问得的二维码
+const getCounselorQr = async () => {
+  let url = `/website/tourism/visa/findWechatList`
+
+  let { data } = await request(url)
+
+  if (data) rightTopCounselorData.value = data
+}
+
+// 获取超值热卖的接口
+async function getTourismProject() {
+  let url = `/website/tourism/project/list`
+  let data = `?pageNum=${pageNum.value}&pageSize=${3}&isHotspot=${1}`
+  let {
+    data: { dataList, totalCount }
+  } = await request(`${url}${data}`)
+
+  if (Array.isArray(dataList)) hotList.value = dataList
+}
+
+watch(
+  () => queryParams.pageNum,
+  () => getVisaList()
+)
+watch(searchString, (newValue, oldValue) => {
+  searchString.value = newValue
+  if (newValue) {
+    navigateTo({
+      path: '/visa/visaList',
+      query: {
+        searchString: searchString.value
+      }
+    })
+  } else {
+    navigateTo('/visa/visaList')
+  }
+})
+
+watch(
+  [() => route.query.searchString, () => route.query.countryCodeId],
+  () => {
+    queryParams.pageNum = 1
+    getVisaList()
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  // 获取出签地的信息
+  getCountryCodeList()
+  // 获取签证类型的列表
+  getVisaTypeList()
+
+  getTourismProject()
+
+  getCounselorQr()
+
+  // getCountryList()
+  getVisaList()
+})
+
+useSeoMeta({
+  title: '签证列表'
+})
+
+// 获取全部国家列表
+// const countryList = ref([])
+// // 选中的筛选类型
+// const moreCountryFlag = ref(false)
+// const checkedCountryType = ref([UNLIMITED_TEXT])
+// async function getCountryList() {
+//   const { data } = await request(`/website/tourism/visa/getCountryList`)
+//   // data?.unshift({ title: UNLIMITED_TEXT, code: UNLIMITED_TEXT, id: UNLIMITED_TEXT })
+//   // if (Array.isArray(data)) countryList.value = data
+// }
+</script>
+
+<style lang="scss" scoped>
+::v-deep .van-dialog__header {
+  padding-top: 10px;
+}
+</style>