From 6a8cf54ccb78130f678f953f10ce3239d91fa978 Mon Sep 17 00:00:00 2001
From: rd <>
Date: Fri, 27 Jun 2025 17:14:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=96=B0=E6=8E=88=E6=9D=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/all/propertyMarketing.ts              |   5 +
 .../components/account-table/index.vue        |  12 +-
 .../authorized-account-modal/index.vue        |  18 +-
 .../authorized-account-modal/style.scss       |   2 +-
 .../reauthorize-account-modal/index.vue       | 201 ++++++++++++++++++
 .../reauthorize-account-modal/style.scss      |  57 +++++
 .../media-account/account-manage/index.vue    |   2 +-
 7 files changed, 288 insertions(+), 9 deletions(-)
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss

diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 41ca7ca..bae28e9 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -116,3 +116,8 @@ export const pausePatchAccount = (id: string) => {
 export const startPatchAccount = (id: string) => {
   return Http.patch(`/v1/media-accounts/${id}/start`);
 };
+
+// 媒体账号-获取授权图片
+export const getAuthorizedImage = (id: string) => {
+  return Http.get(`/v1/media-accounts/${id}/authorized-image`);
+};
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
index a0d3d06..3530eaa 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@@ -83,6 +83,8 @@
       </div>
     </div>
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
+    <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @success="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
   </div>
 </template>
 
@@ -91,6 +93,8 @@ import { defineProps, ref, computed } from 'vue';
 import { STATUS_LIST, EnumStatus } from '../../constants';
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
+import ReauthorizeAccountModal from '../reauthorize-account-modal';
+import AuthorizedAccountModal from '../authorized-account-modal';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
 import icon2 from '@/assets/img/media-account/icon-xhs.png';
@@ -110,6 +114,8 @@ const props = defineProps({
 const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
 
 const pauseAccountPatchModalRef = ref(null);
+const reauthorizeAccountModalRef = ref(null);
+const authorizedAccountModalRef = ref(null);
 
 // 判断当前 item 是否被选中
 const isSelected = (item) => {
@@ -136,7 +142,11 @@ const openDelete = (item) => {
 
 const handleReauthorize = (item) => {
   const isUnauthorized = isUnauthorizedStatus(item.status);
-  console.log(isUnauthorized ? '去授权' : '重新授权');
+  if (isUnauthorized) {
+    authorizedAccountModalRef.value?.open(item.id);
+  } else {
+    reauthorizeAccountModalRef.value?.open(item.id);
+  }
 };
 
 const handlePause = (item) => {
diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
index c76a687..eaf6bd5 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@@ -6,8 +6,8 @@
   <a-modal
     v-model:visible="visible"
     width="480px"
-    title="添加账号"
-    modal-class="qrCode-modal"
+    title="授权账号"
+    modal-class="authorized-account-modal"
     :mask-closable="false"
     :footer="!isLoading"
     @close="close"
@@ -36,7 +36,7 @@
             <span class="ml-8px red-text">未识别到有效二维码。</span>
           </div>
           <div class="img-box">
-            <img src="" width="160" height="160" class="mb-16px" />
+            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
             <div v-if="isOverdue" class="mask">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
@@ -56,7 +56,7 @@
 
 <script setup>
 import { defineExpose, ref, onUnmounted } from 'vue';
-import { startPatchAccount } from '@/api/all/propertyMarketing';
+import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-warn.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@@ -70,6 +70,7 @@ const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
+const imgUrl = ref('');
 
 let progressTimer = null;
 
@@ -83,6 +84,7 @@ const confirmBtnText = computed(() => {
 
 const open = (accountId) => {
   id.value = accountId;
+  handleAuthorizedImage();
   visible.value = true;
 };
 const close = () => {
@@ -97,6 +99,12 @@ const close = () => {
   visible.value = false;
 };
 
+const handleAuthorizedImage = async () => {
+  const { code, data } = await getAuthorizedImage(id.value);
+  if (code === 200) {
+    imgUrl.value = data.url;
+  }
+};
 const startLoading = async () => {
   isLoading.value = true;
   progress.value = 0;
@@ -105,8 +113,6 @@ const startLoading = async () => {
   // if (code === 200) {
   //   isLoading.value = true;
   //   progress.value = 0;
-  //   elapsedSeconds = 0;
-  //   fakeStatusStartTime = 0;
   //   startFakeProgressPolling();
   // }
 };
diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
index 8fd370a..a476920 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
@@ -1,6 +1,6 @@
 @import '@/views/property-marketing/component.scss';
 
-.qrCode-modal {
+.authorized-account-modal {
   border-radius: 8px;
   .img-box {
     position: relative;
diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
new file mode 100644
index 0000000..ef84c93
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@@ -0,0 +1,201 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="500px"
+    title="重新授权"
+    modal-class="reauthorize-account-modal"
+    :mask-closable="false"
+    :footer="!isLoading"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <template v-if="isLoading">
+        <a-progress
+          :percent="progress"
+          color="#6D4CFE"
+          trackColor="#E6E6E8"
+          size="large"
+          :stroke-width="4"
+          type="circle"
+        />
+        <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
+      </template>
+      <template v-else-if="loadingStep === 1">
+        <div class="flex items-center mb-20px">
+          <img :src="icon4" width="16" height="16" class="mr-16px" />
+          <span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
+        </div>
+        <a-radio-group v-model="actionType" class="ml-32px">
+          <a-radio :value="1" class="mb-16px"
+            ><span class="s2"
+              >立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
+            ></a-radio
+          >
+          <a-radio :value="2" class="mb-16px"><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio>
+        </a-radio-group>
+      </template>
+      <template v-else-if="loadingStep === 2">
+        <div class="flex items-center mb-20px">
+          <img :src="icon4" width="16" height="16" class="mr-16px" />
+          <span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
+        </div>
+        <div class="w-100% pl-32px">
+          <div class="account-tip-box">
+            <p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
+            <p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <template v-if="isCompleted">
+          <img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
+          <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
+          <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
+        </template>
+        <template v-else>
+          <div class="flex items-center mb-16px">
+            <img :src="icon1" width="16" height="16" />
+            <span class="ml-8px red-text">未识别到有效二维码。</span>
+          </div>
+          <div class="img-box">
+            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+            <div v-if="isOverdue" class="mask">
+              <icon-refresh size="24" class="mb-13px" />
+              <p class="s1">二维码失效</p>
+              <p class="s1">请点击刷新</p>
+            </div>
+          </div>
+          <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+        </template>
+      </template>
+    </div>
+    <template #footer>
+      <a-button v-if="isCompleted || [1, 3].includes(actionType)" size="large" class="cancel-btn" @click="close"
+        >取消</a-button
+      >
+      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose, ref, onUnmounted } from 'vue';
+import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/media-account/icon-warn.png';
+import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
+import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
+import icon4 from '@/assets/img/media-account/icon-warn-1.png';
+
+const visible = ref(false);
+const isOverdue = ref(false);
+const isLoading = ref(false);
+const isCompleted = ref(false);
+const isSuccess = ref(false);
+const failReason = ref('');
+const progress = ref(0);
+const id = ref('');
+const imgUrl = ref('');
+const loadingStep = ref(0); // 1 | 2
+const actionType = ref(1);
+
+let progressTimer = null;
+
+const notCompleted = computed(() => {
+  return !isCompleted.value;
+});
+const confirmBtnText = computed(() => {
+  if (loadingStep.value === 1) return '确定';
+  if (loadingStep.value === 2) return '确定覆盖';
+
+  if (notCompleted.value) return '完成扫码';
+
+  return isSuccess.value ? '继续添加' : '重新扫码';
+});
+
+const open = (accountId) => {
+  id.value = accountId;
+  handleAuthorizedImage();
+  visible.value = true;
+};
+const close = () => {
+  isOverdue.value = false;
+  isLoading.value = false;
+  isCompleted.value = false;
+  isSuccess.value = false;
+  failReason.value = '';
+  progress.value = 0;
+  loadingStep.value = 0;
+  actionType.value = 1;
+  id.value = '';
+
+  visible.value = false;
+};
+
+const handleAuthorizedImage = async () => {
+  const { code, data } = await getAuthorizedImage(id.value);
+  if (code === 200) {
+    imgUrl.value = data.url;
+  }
+};
+const startLoading = async () => {
+  isLoading.value = true;
+  progress.value = 0;
+  startFakeProgressPolling();
+  // const { code } = await startPatchAccount(id.value);
+  // if (code === 200) {
+  //   isLoading.value = true;
+  //   progress.value = 0;
+  //   startFakeProgressPolling();
+  // }
+};
+
+const startFakeProgressPolling = () => {
+  clearFakeProgressTimer();
+  progressTimer = setInterval(() => {
+    if (progress.value < 0.99) {
+      const step = Math.random() * 0.04 + 0.01;
+      progress.value = Math.min(progress.value + step, 0.99);
+      progress.value = Number(progress.value.toFixed(2));
+    } else {
+      loadingStep.value = 2;
+      clearFakeProgressTimer();
+    }
+  }, 1000);
+};
+
+const clearFakeProgressTimer = () => {
+  if (progressTimer) {
+    clearInterval(progressTimer);
+    progressTimer = null;
+  }
+};
+
+const handleOk = () => {
+  if (loadingStep.value === 1) {
+    startLoading();
+    return;
+  }
+
+  if (notCompleted.value) {
+    loadingStep.value = 1;
+    return;
+  }
+};
+
+onUnmounted(() => {
+  clearFakeProgressTimer();
+});
+
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
new file mode 100644
index 0000000..40b1640
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
@@ -0,0 +1,57 @@
+@import '@/views/property-marketing/component.scss';
+
+.reauthorize-account-modal {
+  border-radius: 8px;
+  .img-box {
+    position: relative;
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.8;
+      background: #000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      .s1 {
+        color: var(--BG-White, #fff);
+        text-align: center;
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+    }
+  }
+  .s2 {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; 
+  }
+  .red-text {
+    overflow: hidden;
+    color: var(--Functional-Red-6, #f64b31);
+    text-overflow: ellipsis;
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .account-tip-box {
+    // margin-left: 32px;
+    width: 100%;
+    padding: 8px 0px 8px 12px;
+
+    border-radius: 4px;
+background: var(--BG-200, #F2F3F5);
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index fbf32f3..f21fdbe 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -178,7 +178,7 @@ const getData = async () => {
       name: '全球',
       account_id: 1,
       mobile: 1777777,
-      status: 3,
+      status: 0,
       platform: 0,
       operator: {
         name: '小周',