feat: 重新授权

2025-06-27 17:14:35 +08:00
parent fde001e7a1
commit 6a8cf54ccb
7 changed files with 288 additions and 9 deletions
--- 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`);
+};
--- 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) => {
--- 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();
  // }
 };
--- 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;
--- 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
@ -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>
--- 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
@ -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);
+  }
+}
--- 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: '小周',