diff --git a/MIGRATION-VUE3.md b/MIGRATION-VUE3.md
index ca93350e6..90e37e3dd 100644
--- a/MIGRATION-VUE3.md
+++ b/MIGRATION-VUE3.md
@@ -9,7 +9,8 @@
 | 框架 | vue | ^3.5.35 |
 | 编译 | @vue/compiler-sfc | ^3.5.35 |
 | 路由 | vue-router | ^4.6.4 |
-| 状态 | vuex | ^4.1.0 |
+| 状态 | pinia | ^4.0.3（四端已全部从 vuex 迁移完成） |
+| 组件写法 | `<script setup>` | 四端 597 个组件已全部完成 Options API → 组合式 API 迁移；各端 eslint 已启用 `vue/component-api-style: ['warn', ['script-setup']]` 防止回退 |
 | UI | element-plus | ^2.14.1 |
 | 图标 | @element-plus/icons-vue | ^2.3.2 |
 | 请求 | axios | ^1.7.9 |
diff --git a/buyer/MIGRATION-VUE3.md b/buyer/MIGRATION-VUE3.md
index dc9071d11..591515da4 100644
--- a/buyer/MIGRATION-VUE3.md
+++ b/buyer/MIGRATION-VUE3.md
@@ -2,7 +2,7 @@
 
 ## 技术栈
 
-- Vue 3 + Vue Router 4 + Vuex 4
+- Vue 3 + Vue Router 4 + Pinia（vuex 已移除，见下文"组合式 API 迁移"）
 - Element Plus（替代 view-design / iView）
 - 保留 `$Message` / `$Modal` / `$Notice` 兼容层（`src/utils/message.js`）
 
@@ -29,6 +29,18 @@ yarn build
    - `mv-count-down` → 内置倒计时
    - 秒杀轮播 → 横向滚动列表
 
+## 组合式 API 迁移（2026-10 完成）
+
+全部 95 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，同时完成 vuex → pinia：
+
+- **状态管理**：`src/stores/app.js`（`useAppStore`：navList / cartNum / unreadMsg / logoImg / siteName / hotWordsList / category + 对应 setXxx actions）。原 `src/vuex/` 已删除，package.json 不再依赖 vuex。
+- **路由守卫**：`beforeRouteEnter` 无组合式等价物，5 个页面（`GoodsList` / `GoodsDetail` / `PointGoodsDetail` / `Cart` / `ShoppingCart`）保留普通 `<script>` 块存放 `export default { name, beforeRouteEnter }`——这是官方支持的合并写法，统计 Options API 残留时需排除。
+- **defineExpose**：以下组件的方法/状态被父组件通过模板 ref 调用，已显式暴露：`verify`（init / close）、`multiple-map`（open）、`addressManage`（show / hide）、`invoiceModal`（invoiceAvailable）。新增此类父子调用时必须加 `defineExpose`。
+- **模板 ref 与响应式变量同名会互相覆盖**：同名时模板 ref 统一改名 `xxxRef`（如 `formRef` / `verifyRef`）。
+- **mixin 已消除**：原 `components/mixes/talkIm.vue` 的 IM 客服逻辑已内联进 `Merchant.vue` 和 `goodsDetail/StoreSide.vue`，文件已删除。
+- **全局属性照旧**：模板中的 `$filters.*` / `linkTo` / `connectCs` / `$inputMaxLength` 是 `main.js` 注册的全局属性，`<script setup>` 下模板可直接使用；script 内使用 `$filters` 函数需从 `@/plugins/filters.js` 具名导入，`this.Cookies` 等同 `storage`（`@/plugins/storage`）。
+- **其余三端（seller / manager / im）仍为 Options API + vuex**，迁移时参照本端模式。
+
 ## 批量脚本
 
 - `scripts/migrate-iview-to-element.js` — iView → Element 模板替换
diff --git a/buyer/eslint.config.js b/buyer/eslint.config.js
index 7d3860573..8d26d6962 100644
--- a/buyer/eslint.config.js
+++ b/buyer/eslint.config.js
@@ -29,6 +29,8 @@ module.exports = [
       'vue/multi-word-component-names': 'off',
       // 存量代码大量使用与 HTML 保留名同名的组件（element-plus 图标 Search/View/Camera/Link 及全局注册的 empty/drawer 等），重命名成本高，暂不启用
       'vue/no-reserved-component-names': 'off',
+      // 全端已完成 Options API → <script setup> 迁移，防止新代码回退（路由守卫的普通 script 块等有意保留的除外，故用 warn）
+      'vue/component-api-style': ['warn', ['script-setup']],
     },
   },
 ]
diff --git a/buyer/package.json b/buyer/package.json
index e2507f7d2..8456b3b5c 100644
--- a/buyer/package.json
+++ b/buyer/package.json
@@ -21,6 +21,7 @@
     "element-plus": "^2.14.1",
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
+    "pinia": "^4.0.3",
     "psl": "^1.8.0",
     "qs": "^6.9.4",
     "sass": "^1.63.6",
@@ -28,8 +29,7 @@
     "uuid": "^8.3.2",
     "vue": "^3.5.35",
     "vue-qr": "^5.0.3",
-    "vue-router": "^4.6.4",
-    "vuex": "^4.1.0"
+    "vue-router": "^4.6.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.9",
@@ -41,6 +41,7 @@
     "globals": "^17.13.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.4",
+    "vue-eslint-parser": "^10.4.1",
     "webpack": "^5.95.0"
   },
   "browserslist": [
diff --git a/buyer/src/App.vue b/buyer/src/App.vue
index 37ad388b7..2545eb118 100644
--- a/buyer/src/App.vue
+++ b/buyer/src/App.vue
@@ -4,71 +4,78 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from "vue";
+import { useRoute } from "vue-router";
 import storage from "@/plugins/storage";
 import { getBaseSite, getThemeSetting } from "@/api/common.js";
 import { fetchAndApplyTheme } from "@/utils/theme";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "App",
-  mounted() {
-    this.init();
-  },
-  methods: {
-    applySiteInfo(data) {
-      const expirationTime = new Date().setHours(new Date().getHours() + 1);
-      storage.setItem("sitelogo_expiration_time", expirationTime);
-      storage.setItem("siteName", data.siteName);
-      storage.setItem("logoImg", data.buyerSideLogo);
-      storage.setItem("siteIcon", data.buyerSideIcon);
-      this.$store.commit("SET_SITENAME", data.siteName);
-      this.$store.commit("SET_LOGOIMG", data.buyerSideLogo);
-      if (this.$route.meta.title === undefined) {
-        window.document.title = data.siteName;
+defineOptions({ name: "App" });
+
+const route = useRoute();
+const appStore = useAppStore();
+
+function applySiteInfo(data) {
+  const expirationTime = new Date().setHours(new Date().getHours() + 1);
+  storage.setItem("sitelogo_expiration_time", expirationTime);
+  storage.setItem("siteName", data.siteName);
+  storage.setItem("logoImg", data.buyerSideLogo);
+  storage.setItem("siteIcon", data.buyerSideIcon);
+  appStore.setSiteName(data.siteName);
+  appStore.setLogoImg(data.buyerSideLogo);
+  if (route.meta.title === undefined) {
+    window.document.title = data.siteName;
+  }
+  let link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.type = "image/x-icon";
+  link.href = data.buyerSideIcon;
+  link.rel = "shortcut icon";
+  document.getElementsByTagName("head")[0].appendChild(link);
+}
+
+function init() {
+  const expirationTime = storage.getItem("sitelogo_expiration_time");
+  const cacheValid =
+    expirationTime && new Date() <= new Date(Number(expirationTime));
+  if (cacheValid) {
+    applySiteInfo({
+      siteName: storage.getItem("siteName"),
+      buyerSideLogo: storage.getItem("logoImg"),
+      buyerSideIcon: storage.getItem("siteIcon"),
+    });
+  }
+  getSite();
+  getTheme();
+}
+
+function getSite() {
+  getBaseSite().then((res) => {
+    if (res.success && res.result.settingValue) {
+      try {
+        const data = JSON.parse(res.result.settingValue);
+        applySiteInfo(data);
+      } catch {
+        // 站点配置解析失败时使用缓存
       }
-      let link =
-        document.querySelector("link[rel*='icon']") ||
-        document.createElement("link");
-      link.type = "image/x-icon";
-      link.href = data.buyerSideIcon;
-      link.rel = "shortcut icon";
-      document.getElementsByTagName("head")[0].appendChild(link);
-    },
-    init() {
-      const expirationTime = storage.getItem("sitelogo_expiration_time");
-      const cacheValid =
-        expirationTime && new Date() <= new Date(Number(expirationTime));
-      if (cacheValid) {
-        this.applySiteInfo({
-          siteName: storage.getItem("siteName"),
-          buyerSideLogo: storage.getItem("logoImg"),
-          buyerSideIcon: storage.getItem("siteIcon"),
-        });
-      }
-      this.getSite();
-      this.getTheme();
-    },
-    getSite() {
-      getBaseSite().then((res) => {
-        if (res.success && res.result.settingValue) {
-          try {
-            const data = JSON.parse(res.result.settingValue);
-            this.applySiteInfo(data);
-          } catch {
-            // 站点配置解析失败时使用缓存
-          }
-        }
-      }).catch((err) => {
-        console.warn('获取站点配置失败', err);
-      });
-    },
-    getTheme() {
-      fetchAndApplyTheme(getThemeSetting).catch((err) => {
-        console.warn('获取主题配置失败', err);
-      });
-    },
-  },
-};
+    }
+  }).catch((err) => {
+    console.warn('获取站点配置失败', err);
+  });
+}
+
+function getTheme() {
+  fetchAndApplyTheme(getThemeSetting).catch((err) => {
+    console.warn('获取主题配置失败', err);
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss">
 #app {
diff --git a/buyer/src/components/Search.vue b/buyer/src/components/Search.vue
index 3112284c6..38ad65737 100644
--- a/buyer/src/components/Search.vue
+++ b/buyer/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar" :class="{'small-search-box': useClass == 'fixed-show'}">
+  <div class="navbar" ref="rootRef" :class="{'small-search-box': useClass == 'fixed-show'}">
     <template v-if="useClass == 'fixed-show'">
       <div class="search search-embedded">
         <el-input
@@ -30,7 +30,7 @@
     <template v-else>
       <div class="container width_1200_auto flex flex-a-c">
         <img
-          :src="$store.state.logoImg"
+          :src="logoImg"
           v-if="showLogo"
           class="logo-img"
           alt=""
@@ -80,11 +80,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import storage from '@/plugins/storage.js'
 import { goodsList, hotWords } from '@/api/goods.js'
 import { Search as SearchIcon } from '@element-plus/icons-vue'
 import SearchSuggest from '@/components/SearchSuggest.vue'
+import { useAppStore } from '@/stores/app'
+
+defineOptions({ name: 'search' })
+
+const props = defineProps({
+  showTag: {
+    type: Boolean,
+    default: true
+  },
+  showLogo: {
+    type: Boolean,
+    default: true
+  },
+  storeId: {
+    type: String,
+    default: ""
+  },
+  hover: {
+    type: Boolean,
+    default: false
+  },
+  useClass: {
+    type: null,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['search'])
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
 
 const HISTORY_KEY = 'buyerSearchHistory'
 const HISTORY_LIMIT = 10
@@ -112,179 +146,166 @@ function parseHotWords(raw) {
   return raw.split(',').map((item) => item.trim()).filter(Boolean)
 }
 
-export default {
-  name: 'search',
-  components: { SearchIcon, SearchSuggest },
-  props: {
-    showTag: {
-      type: Boolean,
-      default: true
-    },
-    showLogo: {
-      type: Boolean,
-      default: true
-    },
-    storeId: {
-      type: String,
-      default: ""
-    },
-    hover: {
-      type: Boolean,
-      default: false
-    },
-    useClass:{
-      type:null,
-      default:''
-    }
-  },
-  data() {
-    return {
-      searchData: '',
-      history: [],
-      panelVisible: false,
-      suggestions: [],
-      suggesting: false,
-      suggestTimer: null,
-      suggestSeq: 0,
-    };
-  },
-  methods: {
-    selectTags(item) {
-      this.searchData = item;
-      this.search();
-    },
-    remember(keyword) {
-      const next = [keyword, ...this.history.filter((item) => item !== keyword)].slice(0, HISTORY_LIMIT)
-      this.history = next
-      localStorage.setItem(HISTORY_KEY, JSON.stringify(next))
-    },
-    clearHistory() {
-      this.history = []
-      localStorage.removeItem(HISTORY_KEY)
-    },
-    openPanel() {
-      this.panelVisible = true
-      if (this.trimmedKeyword) this.queueSuggest()
-    },
-    closePanel() {
-      this.panelVisible = false
-    },
-    onDocumentClick(event) {
-      if (this.$el && !this.$el.contains(event.target)) this.closePanel()
-    },
-    queueSuggest() {
-      this.panelVisible = true
-      clearTimeout(this.suggestTimer)
-      const keyword = this.trimmedKeyword
-      if (!keyword) {
-        this.suggestions = []
-        this.suggesting = false
-        return
-      }
-      this.suggesting = true
-      this.suggestTimer = setTimeout(() => this.fetchSuggest(keyword), 300)
-    },
-    fetchSuggest(keyword) {
-      const seq = ++this.suggestSeq
-      const params = { keyword, pageNumber: 1, pageSize: 8 }
-      if (this.storeId) params.storeId = this.storeId
-      goodsList(params).then((res) => {
-        if (seq !== this.suggestSeq || keyword !== this.trimmedKeyword) return
-        const records = res && res.success ? (res.result.records || []) : []
-        const seen = new Set()
-        const names = []
-        this.promotionTags.forEach((word) => {
-          if (word && String(word).toLowerCase().includes(keyword.toLowerCase()) && !seen.has(word)) {
-            seen.add(word)
-            names.push(word)
-          }
-        })
-        records.forEach((item) => {
-          const name = item && item.goodsName
-          if (name && !seen.has(name)) {
-            seen.add(name)
-            names.push(name)
-          }
-        })
-        this.suggestions = names.slice(0, 8)
-      }).catch(() => {
-        if (seq === this.suggestSeq) this.suggestions = []
-      }).finally(() => {
-        if (seq === this.suggestSeq) this.suggesting = false
-      })
-    },
-    search () {
-      const keyword = this.trimmedKeyword
-      this.searchData = keyword
-      this.closePanel()
-      if (keyword) this.remember(keyword)
-      const url = this.$route.path;
-      if(url == '/goodsList'){
-        this.$emit('search', keyword)
-      }else{
-        const pushData = {
-          path:'/goodsList',
-          query: { keyword },
-        }
-        if(this.storeId) pushData.query.storeId = this.storeId
+const rootRef = ref(null)
+const searchData = ref('')
+const history = ref([])
+const panelVisible = ref(false)
+const suggestions = ref([])
+const suggesting = ref(false)
+let suggestTimer = null
+let suggestSeq = 0
 
-        this.$router.push(pushData);
-      }
-    },
-    searchStore() {
-      this.$emit('search', this.trimmedKeyword)
-    },
-    applyHotWords(result) {
-      const list = parseHotWords(result)
-      this.$store.commit('SET_HOTWORDS', list)
-      storage.setItem('hotWordsList', JSON.stringify(list))
-    },
-    loadHotWords() {
-      hotWords({ count: 5 }).then((res) => {
-        if (res.success && res.result) this.applyHotWords(res.result)
-      }).catch(() => {
-        // 热词为可选数据，失败时沿用缓存或默认热词
-      })
-      storage.setItem('hotWordsReloadTime', new Date().getTime())
-    }
-  },
-  computed: {
-    trimmedKeyword() {
-      return (this.searchData || '').trim()
-    },
-    promotionTags() {
-      return parseHotWords(this.$store.state.hotWordsList)
-    },
-    showPanel() {
-      if (!this.panelVisible) return false
-      if (this.trimmedKeyword) return true
-      return this.history.length > 0 || this.promotionTags.length > 0
-    }
-  },
-  watch: {
-    '$route.query.keyword'(value) {
-      this.searchData = value || ''
-    }
-  },
-  created() {
-    this.searchData = this.$route.query.keyword || ''
-    this.history = readHistory()
+const logoImg = computed(() => appStore.logoImg)
 
-    if (!this.hover) {
-      const reloadTime = storage.getItem('hotWordsReloadTime')
-      const time = new Date().getTime() - 5 * 60 * 1000
-      if (!reloadTime || time > reloadTime) this.loadHotWords()
-    }
-  },
-  mounted() {
-    this.onDocumentClick = this.onDocumentClick.bind(this)
-    document.addEventListener('click', this.onDocumentClick)
-  },
-  beforeUnmount() {
-    clearTimeout(this.suggestTimer)
-    document.removeEventListener('click', this.onDocumentClick)
+const trimmedKeyword = computed(() => {
+  return (searchData.value || '').trim()
+})
+
+const promotionTags = computed(() => {
+  return parseHotWords(appStore.hotWordsList)
+})
+
+const showPanel = computed(() => {
+  if (!panelVisible.value) return false
+  if (trimmedKeyword.value) return true
+  return history.value.length > 0 || promotionTags.value.length > 0
+})
+
+watch(
+  () => route.query.keyword,
+  (value) => {
+    searchData.value = value || ''
   }
-};
+)
+
+function selectTags(item) {
+  searchData.value = item
+  search()
+}
+
+function remember(keyword) {
+  const next = [keyword, ...history.value.filter((item) => item !== keyword)].slice(0, HISTORY_LIMIT)
+  history.value = next
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(next))
+}
+
+function clearHistory() {
+  history.value = []
+  localStorage.removeItem(HISTORY_KEY)
+}
+
+function openPanel() {
+  panelVisible.value = true
+  if (trimmedKeyword.value) queueSuggest()
+}
+
+function closePanel() {
+  panelVisible.value = false
+}
+
+function onDocumentClick(event) {
+  if (rootRef.value && !rootRef.value.contains(event.target)) closePanel()
+}
+
+function queueSuggest() {
+  panelVisible.value = true
+  clearTimeout(suggestTimer)
+  const keyword = trimmedKeyword.value
+  if (!keyword) {
+    suggestions.value = []
+    suggesting.value = false
+    return
+  }
+  suggesting.value = true
+  suggestTimer = setTimeout(() => fetchSuggest(keyword), 300)
+}
+
+function fetchSuggest(keyword) {
+  const seq = ++suggestSeq
+  const params = { keyword, pageNumber: 1, pageSize: 8 }
+  if (props.storeId) params.storeId = props.storeId
+  goodsList(params).then((res) => {
+    if (seq !== suggestSeq || keyword !== trimmedKeyword.value) return
+    const records = res && res.success ? (res.result.records || []) : []
+    const seen = new Set()
+    const names = []
+    promotionTags.value.forEach((word) => {
+      if (word && String(word).toLowerCase().includes(keyword.toLowerCase()) && !seen.has(word)) {
+        seen.add(word)
+        names.push(word)
+      }
+    })
+    records.forEach((item) => {
+      const name = item && item.goodsName
+      if (name && !seen.has(name)) {
+        seen.add(name)
+        names.push(name)
+      }
+    })
+    suggestions.value = names.slice(0, 8)
+  }).catch(() => {
+    if (seq === suggestSeq) suggestions.value = []
+  }).finally(() => {
+    if (seq === suggestSeq) suggesting.value = false
+  })
+}
+
+function search() {
+  const keyword = trimmedKeyword.value
+  searchData.value = keyword
+  closePanel()
+  if (keyword) remember(keyword)
+  const url = route.path
+  if (url == '/goodsList') {
+    emit('search', keyword)
+  } else {
+    const pushData = {
+      path: '/goodsList',
+      query: { keyword },
+    }
+    if (props.storeId) pushData.query.storeId = props.storeId
+
+    router.push(pushData)
+  }
+}
+
+function searchStore() {
+  emit('search', trimmedKeyword.value)
+}
+
+function applyHotWords(result) {
+  const list = parseHotWords(result)
+  appStore.setHotWords(list)
+  storage.setItem('hotWordsList', JSON.stringify(list))
+}
+
+function loadHotWords() {
+  hotWords({ count: 5 }).then((res) => {
+    if (res.success && res.result) applyHotWords(res.result)
+  }).catch(() => {
+    // 热词为可选数据，失败时沿用缓存或默认热词
+  })
+  storage.setItem('hotWordsReloadTime', new Date().getTime())
+}
+
+// 初始化（原 created 钩子逻辑）
+searchData.value = route.query.keyword || ''
+history.value = readHistory()
+
+if (!props.hover) {
+  const reloadTime = storage.getItem('hotWordsReloadTime')
+  const time = new Date().getTime() - 5 * 60 * 1000
+  if (!reloadTime || time > reloadTime) loadHotWords()
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+})
+
+onUnmounted(() => {
+  clearTimeout(suggestTimer)
+  document.removeEventListener('click', onDocumentClick)
+})
 </script>
 <style scoped lang="scss">
 .navbar {
diff --git a/buyer/src/components/SearchSuggest.vue b/buyer/src/components/SearchSuggest.vue
index 6396cf107..5669f6586 100644
--- a/buyer/src/components/SearchSuggest.vue
+++ b/buyer/src/components/SearchSuggest.vue
@@ -45,32 +45,31 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "SearchSuggest",
-  props: {
-    keyword: { type: String, default: "" },
-    history: { type: Array, default: () => [] },
-    hotWords: { type: Array, default: () => [] },
-    suggestions: { type: Array, default: () => [] },
-    suggesting: { type: Boolean, default: false },
-  },
-  emits: ["pick", "clear"],
-  methods: {
-    parts(text) {
-      const value = String(text || "");
-      const key = this.keyword;
-      if (!key) return [{ text: value, hit: false }];
-      const index = value.toLowerCase().indexOf(key.toLowerCase());
-      if (index < 0) return [{ text: value, hit: false }];
-      return [
-        { text: value.slice(0, index), hit: false },
-        { text: value.slice(index, index + key.length), hit: true },
-        { text: value.slice(index + key.length), hit: false },
-      ].filter((part) => part.text);
-    },
-  },
-};
+<script setup>
+defineOptions({ name: "SearchSuggest" });
+
+const props = defineProps({
+  keyword: { type: String, default: "" },
+  history: { type: Array, default: () => [] },
+  hotWords: { type: Array, default: () => [] },
+  suggestions: { type: Array, default: () => [] },
+  suggesting: { type: Boolean, default: false },
+});
+
+defineEmits(["pick", "clear"]);
+
+function parts(text) {
+  const value = String(text || "");
+  const key = props.keyword;
+  if (!key) return [{ text: value, hit: false }];
+  const index = value.toLowerCase().indexOf(key.toLowerCase());
+  if (index < 0) return [{ text: value, hit: false }];
+  return [
+    { text: value.slice(0, index), hit: false },
+    { text: value.slice(index, index + key.length), hit: true },
+    { text: value.slice(index + key.length), hit: false },
+  ].filter((part) => part.text);
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/addressManage/index.vue b/buyer/src/components/addressManage/index.vue
index aa16d1718..7b7ba105c 100644
--- a/buyer/src/components/addressManage/index.vue
+++ b/buyer/src/components/addressManage/index.vue
@@ -3,7 +3,7 @@
     <el-dialog v-model="showAddr" width="800" title="收件人地址">
       <el-form
         :model="formData"
-        ref="form"
+        ref="formRef"
         label-position="left"
         label-width="100px"
         :rules="ruleInline"
@@ -13,7 +13,7 @@
         </el-form-item>
         <el-form-item label="收件地区" prop="address">
           {{ formData.address || '暂无地址' }}
-          <el-button type="primary" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
+          <el-button type="primary" style="margin-left: 10px;" size="small" @click="mapRef.open()">选择</el-button>
         </el-form-item>
         <el-form-item label="详细地址" prop="detail">
           <el-input v-model="formData.detail" style="width: 600px"></el-input>
@@ -39,11 +39,12 @@
         <el-button type="primary" class="mr_10" :loading="loading" @click="save">保存收货地址</el-button>
       </div></template>
     </el-dialog>
-    <multipleMap ref="map" @callback="getAddress"></multipleMap>
+    <multipleMap ref="mapRef" @callback="getAddress"></multipleMap>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { Message } from "@/utils/message";
 import multipleMap from "@/components/map/multiple-map";
 import {
@@ -51,122 +52,126 @@ import {
   editMemberAddress,
   getAddrDetail
 } from '@/api/address';
-export default {
-  name: 'addressManage',
-  props: {
-    id: { // 传入的地址id
-      defalut: '',
-      type: String
-    }
-  },
-  data () {
-    return {
-      showAddr: false, // 控制模态框显隐
-      formData: { // 表单数据
-        isDefault: false
-      },
-      ruleInline: { // 验证规则
-        name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
-        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
-        detail: [
-          { required: true, message: '请输入详细地址', trigger: 'blur' }
-        ],
-        mobile: [
-          { required: true, message: '手机号不能为空', trigger: 'blur' },
-          {
-            type: 'string',
-            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
-            message: '手机号格式出错',
-            trigger: 'blur'
-          }
-        ]
-      },
-      loading: false, // 提交的加载状态
-      mapMsg: {} // 地图信息
-    };
-  },
-  methods: {
-    save () { // 保存地址
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.formData));
-          params.consigneeAddressPath = params.address.replace(/\s/g, ',');
-          delete params.address;
-          this.loading = true;
-          if (this.id) {
-            editMemberAddress(params).then((res) => {
-              this.loading = false;
-              if (res.success) {
-                Message.success('编辑地址成功');
-                this.$emit('change', true);
-                this.hide();
-              }
-            }).catch(() => { this.loading = false; });
-          } else {
-            newMemberAddress(params).then((res) => {
-              this.loading = false;
-              if (res.success) {
-                Message.success('新增地址成功');
-                this.$emit('change', true);
-                this.hide();
-              }
-            }).catch(() => { this.loading = false; });
-          }
-        }
-      });
-    },
-    getAddrById (id) {
-      // 获取地址详情
-      getAddrDetail(id).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
-          this.formData = data;
-        }
-      });
-    },
-    getAddress (val) {
-       // 获取地图选择信息
-       if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-        this.formData['address'] = paths
-        this.formData['consigneeAddressIdPath'] = ids
-        const coord = val.data[val.data.length - 1].center.split(',')
-        this.formData.lat = coord[1]
-        this.formData.lon = coord[0]
-      }else{
-        this.formData["address"] = val.data.addr;
-        this.formData["consigneeAddressIdPath"] = val.data.addrId;
-        this.formData["detail"] = val.data.address;
-        this.formData.lat = val.data.position.lat;
-        this.formData.lon = val.data.position.lng;
-      }
 
-    },
-    show () { // 地址模态框显示
-      this.showAddr = true;
-    },
-    hide () { // 地址模态框隐藏
-      this.showAddr = false;
+defineOptions({ name: 'addressManage' });
+
+const props = defineProps({
+  id: { // 传入的地址id
+    defalut: '',
+    type: String
+  }
+});
+
+const emit = defineEmits(['change']);
+
+const showAddr = ref(false); // 控制模态框显隐
+const formData = ref({ // 表单数据
+  isDefault: false
+});
+const ruleInline = { // 验证规则
+  name: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
+  address: [{ required: true, message: '请输入地址', trigger: 'change' }],
+  detail: [
+    { required: true, message: '请输入详细地址', trigger: 'blur' }
+  ],
+  mobile: [
+    { required: true, message: '手机号不能为空', trigger: 'blur' },
+    {
+      type: 'string',
+      pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
+      message: '手机号格式出错',
+      trigger: 'blur'
     }
-  },
-  watch: {
-    id: { // 传入的地址id
-      handler: function (v) {
-        if (v) {
-          this.getAddrById(v);
-        } else {
-          this.formData = {isDefault: false}
-          this.$refs.form.resetFields();
-        }
+  ]
+};
+const loading = ref(false); // 提交的加载状态
+const mapMsg = ref({}); // 地图信息
+
+const formRef = ref(null);
+const mapRef = ref(null);
+
+function save () { // 保存地址
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(formData.value));
+      params.consigneeAddressPath = params.address.replace(/\s/g, ',');
+      delete params.address;
+      loading.value = true;
+      if (props.id) {
+        editMemberAddress(params).then((res) => {
+          loading.value = false;
+          if (res.success) {
+            Message.success('编辑地址成功');
+            emit('change', true);
+            hide();
+          }
+        }).catch(() => { loading.value = false; });
+      } else {
+        newMemberAddress(params).then((res) => {
+          loading.value = false;
+          if (res.success) {
+            Message.success('新增地址成功');
+            emit('change', true);
+            hide();
+          }
+        }).catch(() => { loading.value = false; });
       }
     }
-  },
-  components: {
-    multipleMap
+  });
+}
+
+function getAddrById (id) {
+  // 获取地址详情
+  getAddrDetail(id).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      data.address = res.result.consigneeAddressPath.replace(/,/g, ' ');
+      formData.value = data;
+    }
+  });
+}
+
+function getAddress (val) {
+   // 获取地图选择信息
+   if(val.type === 'select'){
+    const paths = val.data.map(item => item.name).join(',')
+    const ids = val.data.map(item => item.id).join(',')
+    formData.value['address'] = paths
+    formData.value['consigneeAddressIdPath'] = ids
+    const coord = val.data[val.data.length - 1].center.split(',')
+    formData.value.lat = coord[1]
+    formData.value.lon = coord[0]
+  }else{
+    formData.value["address"] = val.data.addr;
+    formData.value["consigneeAddressIdPath"] = val.data.addrId;
+    formData.value["detail"] = val.data.address;
+    formData.value.lat = val.data.position.lat;
+    formData.value.lon = val.data.position.lng;
   }
-};
+
+}
+
+function show () { // 地址模态框显示
+  showAddr.value = true;
+}
+
+function hide () { // 地址模态框隐藏
+  showAddr.value = false;
+}
+
+defineExpose({ show, hide });
+
+watch(
+  () => props.id, // 传入的地址id
+  (v) => {
+    if (v) {
+      getAddrById(v);
+    } else {
+      formData.value = {isDefault: false}
+      formRef.value.resetFields();
+    }
+  }
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/advertising/FixedTop.vue b/buyer/src/components/advertising/FixedTop.vue
index 7eed5e7a8..5e3c9c45f 100644
--- a/buyer/src/components/advertising/FixedTop.vue
+++ b/buyer/src/components/advertising/FixedTop.vue
@@ -5,22 +5,18 @@
     <el-icon :size="20" @click="show = false"><CircleClose /></el-icon>
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue';
 import { CircleClose } from '@element-plus/icons-vue';
-export default {
-  components: { CircleClose },
-  props: {
-    data: { // 传入的广告信息
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      show: true // 是否显示头部广告
-    }
+
+defineProps({
+  data: { // 传入的广告信息
+    type: Object,
+    default: null
   }
-};
+});
+
+const show = ref(true); // 是否显示头部广告
 </script>
 <style scoped lang="scss">
 .advertising {
diff --git a/buyer/src/components/card/index.vue b/buyer/src/components/card/index.vue
index 4db1316e9..7328a985b 100644
--- a/buyer/src/components/card/index.vue
+++ b/buyer/src/components/card/index.vue
@@ -26,57 +26,62 @@
   </el-card>
 </template>
 
-<script>
-export default {
-  name: "index",
-  props: {
-    _Tabs: {
-      type: null,
-      default: "",
-    },
-    _Title: {
-      type: null,
-      default: "卡片头部",
-    },
-    _More: {
-      type: null,
-      default: false,
-    },
-    _Size: {
-      type: Number,
-      default: 16,
-    },
-    _Src: {
-      type: null,
-      default: null,
-    },
-    _ActiveTab: {
-      type: Number,
-      default: 0,
-    },
+<script setup>
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "index" });
+
+const props = defineProps({
+  _Tabs: {
+    type: null,
+    default: "",
   },
-  data() {
-    return {
-      isActive: this._ActiveTab,
-    };
+  _Title: {
+    type: null,
+    default: "卡片头部",
   },
-  watch: {
-    _ActiveTab(val) {
-      this.isActive = val;
-    },
+  _More: {
+    type: null,
+    default: false,
   },
-  methods: {
-    callBack() {
-      if (this._Src) {
-        this.$router.push({ path: this._Src });
-      }
-    },
-    tabsChange(index) {
-      this.isActive = index;
-      this.$emit("_Change", index);
-    },
+  _Size: {
+    type: Number,
+    default: 16,
   },
-};
+  _Src: {
+    type: null,
+    default: null,
+  },
+  _ActiveTab: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["_Change"]);
+
+const router = useRouter();
+
+const isActive = ref(props._ActiveTab);
+
+watch(
+  () => props._ActiveTab,
+  (val) => {
+    isActive.value = val;
+  }
+);
+
+function callBack() {
+  if (props._Src) {
+    router.push({ path: props._Src });
+  }
+}
+
+function tabsChange(index) {
+  isActive.value = index;
+  emit("_Change", index);
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/drawer/Drawer.vue b/buyer/src/components/drawer/Drawer.vue
index 6363a0c76..6649dc5a8 100644
--- a/buyer/src/components/drawer/Drawer.vue
+++ b/buyer/src/components/drawer/Drawer.vue
@@ -78,227 +78,228 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { Message, Modal } from "@/utils/message";
 import { Delete } from '@element-plus/icons-vue';
 import {cartGoodsAll, delCartGoods, addCartGoods, cartCount} from '@/api/cart.js'
-import { getOrderList } from '@/api/order';
-import {couponList, receiveCoupon, tracksList, collectList, cancelCollect} from '@/api/member.js'
-export default {
-  components: { Delete },
-  name: 'Drawer',
-  props: {
-    title: {
-      default: '',
-      type: String
-    }
-  },
-  watch: {
-    title (val) {
-      switch (val) {
-        case '购物车':
-          this.getCartList()
-          break;
-        case '我的订单':
-          this.getOrderList()
-          break;
-        case '我的足迹':
-          this.getTracksList()
-          break;
-        case '优惠券':
-          this.getCouponList()
-          break;
-        case '我的收藏':
-          this.getCollectList()
-          break;
-      }
-    }
-  },
-  data () {
-    return {
-      loading: false, // 控制spin显隐
-      cartList: [], // 购物车列表
-      couponList: [], // 优惠券列表
-      orderList: [], // 订单列表
-      collectList: [], // 收藏列表
-      tracksList: [], // 足迹列表
-      orderStatusList: [ // 订单状态
-        {
-          name: '未付款',
-          status: 'UNPAID'
-        },
-        {
-          name: '已付款',
-          status: 'PAID'
-        },
-        {
-          name: '待发货',
-          status: 'UNDELIVERED'
-        },
-        {
-          name: '已发货',
-          status: 'DELIVERED'
-        },
-        {
-          name: '已完成',
-          status: 'COMPLETED'
-        },
-        {
-          name: '待核验',
-          status: 'TAKE'
-        },
-        {
-          name: '已取消',
-          status: 'CANCELLED'
-        }
-      ]
-    };
-  },
-  methods: {
-    getCartList () { // 获取购物车列表
-      this.loading = true
-      cartGoodsAll().then(res => {
-        this.loading = false
-        this.cartList = res.result.skuList
-      })
-    },
-    // 删除商品
-    delGoods (id) {
-      delCartGoods({ skuIds: id }).then((res) => {
-        if (res.success) {
-          Message.success('删除成功');
-          this.getCartList();
-          cartCount().then(res => {
-            this.$store.commit('SET_CARTNUM', res.result)
-            this.Cookies.setItem('cartNum', res.result)
-          })
-        } else {
-          Message.error(res.message);
-        }
-      });
-    },
-    filterOrderStatus (status) { // 获取订单状态中文
-      const ob = this.orderStatusList.filter(e => { return e.status === status });
-      return ob[0].name
-    },
-    receive (item) { // 领取优惠券
-      receiveCoupon(item.id).then(res => {
-        if (res.success) {
-          Modal.confirm({
-            title: '领取优惠券',
-            content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
-            okText: '我的优惠券',
-            cancelText: '立即使用',
-            onOk: () => {
-              this.$router.push('/home/Coupons')
-            },
-            onCancel: () => {
-              if (item.storeId !== '0') {
-                this.$router.push({path: '/merchant', query: {id: item.storeId}})
-              } else {
-                if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
-                  this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
-                } else {
-                  this.$router.push({path: '/goodsList'})
-                }
-              }
-            }
-          });
-        }
-      })
-    },
-    useScope (type, storeName) { // 判断优惠券使用范围
-      let shop = '平台';
-      let goods = '全部商品'
-      if (storeName !== 'platform') shop = storeName
-      switch (type) {
-        case 'ALL':
-          goods = '全部商品'
-          break;
-        case 'PORTION_GOODS':
-          goods = '部分商品'
-          break;
-        case 'PORTION_GOODS_CATEGORY':
-          goods = '部分分类商品'
-          break;
-      }
-      return `${shop}${goods}可用`
-    },
-    addToCart (id) { // 添加商品到购物车
-      const params = {
-        num: 1,
-        skuId: id
-      }
-      this.loading = true;
-      addCartGoods(params).then(res => {
-        this.loading = false;
-        if (res.success) {
-          Message.success('商品已成功添加到购物车')
-        } else {
-          Message.warning(res.message);
-        }
-      }).catch(() => { this.loading = false });
-    },
-    getCouponList () { // 获取优惠券列表
-      // this.loading = true;
-      const params = {
-        pageNumber: 1,
-        pageSize: 10
-      }
-      couponList(params).then(res => {
-        this.loading = false
-        if (res.success) {
-          this.couponList = res.result.records
-        }
-      }).catch(() => { this.loading = false })
-    },
-    getOrderList () { // 获取订单列表
-      this.loading = true
-      const params = {
-        pageNumber: 1,
-        pageSize: 10,
-        tag: 'ALL'
-      }
-      getOrderList(params).then(res => {
-        this.loading = false
-        if (res.success) {
-          this.orderList = res.result.records;
-        }
-      });
-    },
-    getCollectList () { // 获取收藏列表
-      const params = {
-        pageNumber: 1,
-        pageSize: 10,
-        type: 'GOODS'
-      }
-      this.loading = true
-      collectList(params).then(res => {
-        this.loading = false
-        this.collectList = res.result.records
-      })
-    },
-    cancelCollect (id) { // 取消商品收藏
-      cancelCollect('GOODS', id).then(res => {
-        if (res.success) {
-          Message.success('取消收藏成功')
-          this.getCollectList();
-        }
-      })
-    },
-    getTracksList () { // 获取足迹列表
-      const params = {
-        pageNumber: 1,
-        pageSize: 20
-      }
-      this.loading = true
-      tracksList(params).then(res => {
-        this.tracksList = res.result.records
-        this.loading = false
-      }).catch(() => { this.loading = false })
-    }
+import { getOrderList as fetchOrderList } from '@/api/order';
+import {couponList as fetchCouponList, receiveCoupon, tracksList as fetchTracksList, collectList as fetchCollectList, cancelCollect as apiCancelCollect} from '@/api/member.js'
+import storage from '@/plugins/storage.js'
+import { useAppStore } from '@/stores/app'
+
+defineOptions({ name: 'Drawer' })
+
+const props = defineProps({
+  title: {
+    default: '',
+    type: String
   }
-};
+})
+
+const router = useRouter()
+const appStore = useAppStore()
+
+const loading = ref(false) // 控制spin显隐
+const cartList = ref([]) // 购物车列表
+const couponList = ref([]) // 优惠券列表
+const orderList = ref([]) // 订单列表
+const collectList = ref([]) // 收藏列表
+const tracksList = ref([]) // 足迹列表
+const orderStatusList = ref([ // 订单状态
+  {
+    name: '未付款',
+    status: 'UNPAID'
+  },
+  {
+    name: '已付款',
+    status: 'PAID'
+  },
+  {
+    name: '待发货',
+    status: 'UNDELIVERED'
+  },
+  {
+    name: '已发货',
+    status: 'DELIVERED'
+  },
+  {
+    name: '已完成',
+    status: 'COMPLETED'
+  },
+  {
+    name: '待核验',
+    status: 'TAKE'
+  },
+  {
+    name: '已取消',
+    status: 'CANCELLED'
+  }
+])
+
+watch(() => props.title, (val) => {
+  switch (val) {
+    case '购物车':
+      getCartList()
+      break;
+    case '我的订单':
+      getOrderList()
+      break;
+    case '我的足迹':
+      getTracksList()
+      break;
+    case '优惠券':
+      getCouponList()
+      break;
+    case '我的收藏':
+      getCollectList()
+      break;
+  }
+})
+
+function getCartList () { // 获取购物车列表
+  loading.value = true
+  cartGoodsAll().then(res => {
+    loading.value = false
+    cartList.value = res.result.skuList
+  })
+}
+// 删除商品
+function delGoods (id) {
+  delCartGoods({ skuIds: id }).then((res) => {
+    if (res.success) {
+      Message.success('删除成功');
+      getCartList();
+      cartCount().then(res => {
+        appStore.setCartNum(res.result)
+        storage.setItem('cartNum', res.result)
+      })
+    } else {
+      Message.error(res.message);
+    }
+  });
+}
+function filterOrderStatus (status) { // 获取订单状态中文
+  const ob = orderStatusList.value.filter(e => { return e.status === status });
+  return ob[0].name
+}
+function receive (item) { // 领取优惠券
+  receiveCoupon(item.id).then(res => {
+    if (res.success) {
+      Modal.confirm({
+        title: '领取优惠券',
+        content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
+        okText: '我的优惠券',
+        cancelText: '立即使用',
+        onOk: () => {
+          router.push('/home/Coupons')
+        },
+        onCancel: () => {
+          if (item.storeId !== '0') {
+            router.push({path: '/merchant', query: {id: item.storeId}})
+          } else {
+            if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
+              router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
+            } else {
+              router.push({path: '/goodsList'})
+            }
+          }
+        }
+      });
+    }
+  })
+}
+function useScope (type, storeName) { // 判断优惠券使用范围
+  let shop = '平台';
+  let goods = '全部商品'
+  if (storeName !== 'platform') shop = storeName
+  switch (type) {
+    case 'ALL':
+      goods = '全部商品'
+      break;
+    case 'PORTION_GOODS':
+      goods = '部分商品'
+      break;
+    case 'PORTION_GOODS_CATEGORY':
+      goods = '部分分类商品'
+      break;
+  }
+  return `${shop}${goods}可用`
+}
+function addToCart (id) { // 添加商品到购物车
+  const params = {
+    num: 1,
+    skuId: id
+  }
+  loading.value = true;
+  addCartGoods(params).then(res => {
+    loading.value = false;
+    if (res.success) {
+      Message.success('商品已成功添加到购物车')
+    } else {
+      Message.warning(res.message);
+    }
+  }).catch(() => { loading.value = false });
+}
+function getCouponList () { // 获取优惠券列表
+  // loading.value = true;
+  const params = {
+    pageNumber: 1,
+    pageSize: 10
+  }
+  fetchCouponList(params).then(res => {
+    loading.value = false
+    if (res.success) {
+      couponList.value = res.result.records
+    }
+  }).catch(() => { loading.value = false })
+}
+function getOrderList () { // 获取订单列表
+  loading.value = true
+  const params = {
+    pageNumber: 1,
+    pageSize: 10,
+    tag: 'ALL'
+  }
+  fetchOrderList(params).then(res => {
+    loading.value = false
+    if (res.success) {
+      orderList.value = res.result.records;
+    }
+  });
+}
+function getCollectList () { // 获取收藏列表
+  const params = {
+    pageNumber: 1,
+    pageSize: 10,
+    type: 'GOODS'
+  }
+  loading.value = true
+  fetchCollectList(params).then(res => {
+    loading.value = false
+    collectList.value = res.result.records
+  })
+}
+function cancelCollect (id) { // 取消商品收藏
+  apiCancelCollect('GOODS', id).then(res => {
+    if (res.success) {
+      Message.success('取消收藏成功')
+      getCollectList();
+    }
+  })
+}
+function getTracksList () { // 获取足迹列表
+  const params = {
+    pageNumber: 1,
+    pageSize: 20
+  }
+  loading.value = true
+  fetchTracksList(params).then(res => {
+    tracksList.value = res.result.records
+    loading.value = false
+  }).catch(() => { loading.value = false })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/drawer/Main.vue b/buyer/src/components/drawer/Main.vue
index f847ff4ea..4b7e4ad7c 100644
--- a/buyer/src/components/drawer/Main.vue
+++ b/buyer/src/components/drawer/Main.vue
@@ -20,82 +20,82 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { Modal } from "@/utils/message";
-import Storage from '@/plugins/storage.js';
+import storage from '@/plugins/storage.js';
 import Configuration from './config';
 import drawerPage from './Drawer'
 import {cartCount} from '@/api/cart.js'
 import { resolveIcon } from '@/utils/iconMap'
-export default {
-  name: 'Main',
-  data () {
-    return {
-      resetConfig: Configuration, // 菜单项
-      handleDrawer: false, // 是否可展开
-      drawerData: '' // 菜单基础数据
-    }
-  },
-  components: {drawerPage},
-  computed: {
-    // 用户信息
-    userInfo () {
-      return Storage.getItem('userInfo');
-    },
-    // 购物车商品数量
-    cartNum () {
-      return this.$store.state.cartNum
-    }
-  },
-  methods: {
-    resolveIcon,
-    showCartNum (item) { // 获取购物车数量
-      if (this.userInfo && item.title === '购物车') {
-        this.getCartList()
-      }
-    },
-    clickBar (val) { // tabbar点击操作
-      if (!this.userInfo) {
-        Modal.confirm({
-          title: '请登录',
-          content: '请登录后执行此操作',
-          okText: '立即登录',
-          cancelText: '继续浏览',
-          onOk: () => {
-            this.$router.push({
-              path: '/login',
-              query: {
-                rePath: this.$route.path,
-                query: JSON.stringify(this.$route.query || {}),
-              },
-            });
-          }
+import { useAppStore } from '@/stores/app'
+
+defineOptions({ name: 'Main' })
+
+const route = useRoute()
+const router = useRouter()
+const appStore = useAppStore()
+
+const resetConfig = ref(Configuration) // 菜单项
+const handleDrawer = ref(false) // 是否可展开
+const drawerData = ref('') // 菜单基础数据
+
+// 用户信息
+const userInfo = computed(() => {
+  return storage.getItem('userInfo');
+})
+
+// 购物车商品数量
+const cartNum = computed(() => appStore.cartNum)
+
+function showCartNum (item) { // 获取购物车数量
+  if (userInfo.value && item.title === '购物车') {
+    getCartList()
+  }
+}
+
+function clickBar (val) { // tabbar点击操作
+  if (!userInfo.value) {
+    Modal.confirm({
+      title: '请登录',
+      content: '请登录后执行此操作',
+      okText: '立即登录',
+      cancelText: '继续浏览',
+      onOk: () => {
+        router.push({
+          path: '/login',
+          query: {
+            rePath: route.path,
+            query: JSON.stringify(route.query || {}),
+          },
         });
-      } else {
-        if (val.display) {
-          this.handleDrawer = true
-          this.drawerData = val
-        } else {
-          this.handleDrawer = false
-          switch (val.title) {
-            case '会员中心':
-              this.$router.push('/home')
-              break;
-            case '我的资产':
-              this.$router.push('/home/MoneyManagement')
-              break;
-          }
-        }
       }
-    },
-    getCartList () { // 获取购物车列表
-      cartCount().then(res => {
-        this.$store.commit('SET_CARTNUM', res.result)
-        this.Cookies.setItem('cartNum', res.result)
-      })
+    });
+  } else {
+    if (val.display) {
+      handleDrawer.value = true
+      drawerData.value = val
+    } else {
+      handleDrawer.value = false
+      switch (val.title) {
+        case '会员中心':
+          router.push('/home')
+          break;
+        case '我的资产':
+          router.push('/home/MoneyManagement')
+          break;
+      }
     }
   }
 }
+
+function getCartList () { // 获取购物车列表
+  cartCount().then(res => {
+    appStore.setCartNum(res.result)
+    storage.setItem('cartNum', res.result)
+  })
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/empty/Main.vue b/buyer/src/components/empty/Main.vue
index 65ca3a37e..591f32f53 100644
--- a/buyer/src/components/empty/Main.vue
+++ b/buyer/src/components/empty/Main.vue
@@ -11,20 +11,19 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Main',
-  props: {
-    _Title: { // 描述内容
-      type: null,
-      default: '暂无更多'
-    },
-    _Size: { // 图片大小
-      type: Number,
-      default: 150
-    }
+<script setup>
+defineOptions({ name: 'Main' })
+
+defineProps({
+  _Title: { // 描述内容
+    type: null,
+    default: '暂无更多'
+  },
+  _Size: { // 图片大小
+    type: Number,
+    default: 150
   }
-};
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/fixed/index.vue b/buyer/src/components/fixed/index.vue
index aa4cb442e..13d1d8431 100644
--- a/buyer/src/components/fixed/index.vue
+++ b/buyer/src/components/fixed/index.vue
@@ -8,107 +8,105 @@
     </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getIconUrl } from "@/assets/iconfont/iconMap";
 import storage from "@/plugins/storage.js";
 
-export default {
-  name: "fixed-index",
-  data(){
-    return{
-      iconList:[
-        {
-          icon:"user",
-          label:"会员中心",
-          path:"/home",
-          requireLogin: true,
-        },
-        {
-          icon:"carts",
-          label:"购物车",
-          path:"/cart",
-          requireLogin: true,
-        },
-        {
-          icon:"notification",
-          label:"消息",
-          path:"/home/MsgList",
-          requireLogin: true,
-        },
-        {
-          icon:"collage",
-          label:"收藏",
-          path:"/home/Favorites",
-          requireLogin: true,
-        },
-        {
-          icon:"back",
-          label:"顶部",
-          path:"back"
-        },
-      ],
-      isScrolling:false,
-      timeoutId:"",
+defineOptions({ name: "fixed-index" });
+
+const route = useRoute();
+const router = useRouter();
+
+const iconList = ref([
+  {
+    icon:"user",
+    label:"会员中心",
+    path:"/home",
+    requireLogin: true,
+  },
+  {
+    icon:"carts",
+    label:"购物车",
+    path:"/cart",
+    requireLogin: true,
+  },
+  {
+    icon:"notification",
+    label:"消息",
+    path:"/home/MsgList",
+    requireLogin: true,
+  },
+  {
+    icon:"collage",
+    label:"收藏",
+    path:"/home/Favorites",
+    requireLogin: true,
+  },
+  {
+    icon:"back",
+    label:"顶部",
+    path:"back"
+  },
+]);
+let isScrolling = false;
+let timeoutId = "";
+
+onMounted(() => {
+  // 添加滚轮事件监听器
+  window.addEventListener('wheel', function() {
+    if (isScrolling) {
+      // 如果页面正在滚动，则取消定时器并设置 isScrolling 为 false
+      window.cancelAnimationFrame(timeoutId);
+      isScrolling  = false;
     }
-  },
-  mounted() {
-    const vm = this
-    // 添加滚轮事件监听器
-    window.addEventListener('wheel', function() {
-      if (vm.isScrolling) {
-        // 如果页面正在滚动，则取消定时器并设置 isScrolling 为 false
-        window.cancelAnimationFrame(vm.timeoutId);
-        vm.isScrolling  = false;
-      }
-    });
+  });
 
 
-  },
-  methods:{
-    getIconUrl,
-    scrollToTop() {
-      const c = document.documentElement.scrollTop || document.body.scrollTop;
-      if (c > 0) {
-        this.timeoutId = window.requestAnimationFrame(this.scrollToTop);
-        window.scrollTo(0, c - c / 4);
-        this.isScrolling = true;
-      }else {
-        this.isScrolling = false;
-      }
-    },
-    isLoggedIn () {
-      const rawUserInfo = storage.getItem('userInfo');
-      if (rawUserInfo) {
-        try {
-          return !!JSON.parse(rawUserInfo).username;
-        } catch {
-          return false;
-        }
-      }
-      return !!storage.getItem('accessToken');
-    },
-    goLogin (rePath) {
-      this.$router.push({
-        path: '/login',
-        query: {
-          rePath,
-          query: JSON.stringify(this.$route.query || {}),
-        },
-      });
-    },
-    handleClickIcon (val) {
-      if (val.path === 'back') {
-        this.scrollToTop();
-        return;
-      }
-      if (val.requireLogin && !this.isLoggedIn()) {
-        this.goLogin(val.path);
-        return;
-      }
-      this.$router.push(val.path);
-    },
+});
+
+function scrollToTop() {
+  const c = document.documentElement.scrollTop || document.body.scrollTop;
+  if (c > 0) {
+    timeoutId = window.requestAnimationFrame(scrollToTop);
+    window.scrollTo(0, c - c / 4);
+    isScrolling = true;
+  }else {
+    isScrolling = false;
   }
 }
+function isLoggedIn () {
+  const rawUserInfo = storage.getItem('userInfo');
+  if (rawUserInfo) {
+    try {
+      return !!JSON.parse(rawUserInfo).username;
+    } catch {
+      return false;
+    }
+  }
+  return !!storage.getItem('accessToken');
+}
+function goLogin (rePath) {
+  router.push({
+    path: '/login',
+    query: {
+      rePath,
+      query: JSON.stringify(route.query || {}),
+    },
+  });
+}
+function handleClickIcon (val) {
+  if (val.path === 'back') {
+    scrollToTop();
+    return;
+  }
+  if (val.requireLogin && !isLoggedIn()) {
+    goLogin(val.path);
+    return;
+  }
+  router.push(val.path);
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/footer/Footer.vue b/buyer/src/components/footer/Footer.vue
index 03175e4b2..0f5c4add0 100644
--- a/buyer/src/components/footer/Footer.vue
+++ b/buyer/src/components/footer/Footer.vue
@@ -68,32 +68,29 @@
   </div>
 </template>
 
-<script>
-import config from '@/config';
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import config from '@/config'
 
-export default {
-  name: "Footer",
-  data() {
-    return {
-      config,
-      guideArr: [
-        // 导航链接
-        ["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
-        ["配送方式", "上门自提", "配送查询", "收取标准", "物流规则"],
-        ["支付方式", "在线支付", "公司转账", "余额支付", "积分支付"],
-        ["售后服务", "售后政策", "退款说明", "返修/退货", "取消订单"],
-      ],
-      moreLink: ["关于我们", "联系我们", "联系客服", "商家帮助", "隐私政策"], // 更多链接
-      year: new Date().getFullYear(), // 当前年份
-    };
-  },
-  methods: {
-    goArticle() {
-      // 跳转文章页
-      this.$router.push("/article");
-    },
-  },
-};
+defineOptions({ name: 'Footer' })
+
+const router = useRouter()
+
+const guideArr = ref([
+  // 导航链接
+  ["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
+  ["配送方式", "上门自提", "配送查询", "收取标准", "物流规则"],
+  ["支付方式", "在线支付", "公司转账", "余额支付", "积分支付"],
+  ["售后服务", "售后政策", "退款说明", "返修/退货", "取消订单"],
+])
+const moreLink = ref(["关于我们", "联系我们", "联系客服", "商家帮助", "隐私政策"]) // 更多链接
+const year = ref(new Date().getFullYear()) // 当前年份
+
+function goArticle() {
+  // 跳转文章页
+  router.push("/article")
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/goods/GoodsThumb.vue b/buyer/src/components/goods/GoodsThumb.vue
index 25879806a..05ad30b3b 100644
--- a/buyer/src/components/goods/GoodsThumb.vue
+++ b/buyer/src/components/goods/GoodsThumb.vue
@@ -1,78 +1,82 @@
 <template>
-  <div class="goods-thumb" :class="{ 'is-loaded': loaded, 'is-error': error }">
+  <div class="goods-thumb" ref="rootEl" :class="{ 'is-loaded': loaded, 'is-error': error }">
     <img v-if="currentSrc" :src="currentSrc" :alt="alt" @load="loaded = true" @error="onError" />
   </div>
 </template>
 
-<script>
-export default {
-  name: "GoodsThumb",
-  props: {
-    src: {
-      type: String,
-      default: "",
-    },
-    alt: {
-      type: String,
-      default: "",
-    },
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+defineOptions({ name: "GoodsThumb" });
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      currentSrc: "",
-      loaded: false,
-      error: false,
-      observer: null,
-    };
+  alt: {
+    type: String,
+    default: "",
   },
-  watch: {
-    src() {
-      this.observe();
+});
+
+const rootEl = ref(null);
+const currentSrc = ref("");
+const loaded = ref(false);
+const error = ref(false);
+let observer = null;
+
+watch(
+  () => props.src,
+  () => {
+    observe();
+  }
+);
+
+function disconnect() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+}
+
+function observe() {
+  disconnect();
+  currentSrc.value = "";
+  loaded.value = false;
+  error.value = false;
+  if (!props.src) {
+    error.value = true;
+    return;
+  }
+  if (typeof IntersectionObserver === "undefined") {
+    currentSrc.value = props.src;
+    return;
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) return;
+      currentSrc.value = props.src;
+      disconnect();
     },
-  },
-  mounted() {
-    this.observe();
-  },
-  beforeUnmount() {
-    this.disconnect();
-  },
-  methods: {
-    disconnect() {
-      if (this.observer) {
-        this.observer.disconnect();
-        this.observer = null;
-      }
-    },
-    observe() {
-      this.disconnect();
-      this.currentSrc = "";
-      this.loaded = false;
-      this.error = false;
-      if (!this.src) {
-        this.error = true;
-        return;
-      }
-      if (typeof IntersectionObserver === "undefined") {
-        this.currentSrc = this.src;
-        return;
-      }
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          if (!entries.some((entry) => entry.isIntersecting)) return;
-          this.currentSrc = this.src;
-          this.disconnect();
-        },
-        { rootMargin: "160px 0px" }
-      );
-      this.observer.observe(this.$el);
-    },
-    onError() {
-      this.error = true;
-      this.loaded = false;
-      this.currentSrc = "";
-    },
-  },
-};
+    { rootMargin: "160px 0px" }
+  );
+  observer.observe(rootEl.value);
+}
+
+function onError() {
+  error.value = true;
+  loaded.value = false;
+  currentSrc.value = "";
+}
+
+onMounted(() => {
+  observe();
+});
+
+onBeforeUnmount(() => {
+  disconnect();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/goodsDetail/Promotion.vue b/buyer/src/components/goodsDetail/Promotion.vue
index 16dc2b4f7..4ada46395 100644
--- a/buyer/src/components/goodsDetail/Promotion.vue
+++ b/buyer/src/components/goodsDetail/Promotion.vue
@@ -18,60 +18,57 @@
     </span>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref } from 'vue';
 import { AlarmClock } from '@element-plus/icons-vue';
-export default {
-  components: { AlarmClock },
-  props: {
-    time: { // 传入的初始时间
-      default: 1718977559428
-    },
-    type: { // 区分是在详情还是购物车调用
-      default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
-      type: String
-    }
+
+const props = defineProps({
+  time: { // 传入的初始时间
+    default: 1718977559428
   },
-  data () {
-    return {
-      end: '', // 结束状态
-      hours: '', // 小时
-      minutes: '', // 分钟
-      seconds: '', // 秒
-      interval: '' // 定时器
-    };
-  },
-  mounted () {
-    this.init()
-  },
-  methods: {
-    countDown (val) { // 倒计时方法
-      function addZero (i) {
-        return i < 10 ? '0' + i : i + '';
-      }
-      var nowtime = new Date();
-      var endtime = new Date(val);
-      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
-      var h = parseInt((lefttime / (60 * 60)) % 24);
-      var m = parseInt((lefttime / 60) % 60);
-      var s = parseInt(lefttime % 60);
-      h = addZero(h);
-      m = addZero(m);
-      s = addZero(s);
-      this.hours = h;
-      this.minutes = m
-      this.seconds = s;
-      if (lefttime <= 0) {
-        this.end = `活动已结束`;
-        clearInterval(this.interval)
-      }
-    },
-    init () { // 初始化
-      this.interval = setInterval(() => {
-        this.countDown(this.time);
-      }, 1000);
-    }
+  type: { // 区分是在详情还是购物车调用
+    default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
+    type: String
   }
-};
+});
+
+const end = ref(''); // 结束状态
+const hours = ref(''); // 小时
+const minutes = ref(''); // 分钟
+const seconds = ref(''); // 秒
+let interval = null; // 定时器
+
+function countDown (val) { // 倒计时方法
+  function addZero (i) {
+    return i < 10 ? '0' + i : i + '';
+  }
+  var nowtime = new Date();
+  var endtime = new Date(val);
+  var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
+  var h = parseInt((lefttime / (60 * 60)) % 24);
+  var m = parseInt((lefttime / 60) % 60);
+  var s = parseInt(lefttime % 60);
+  h = addZero(h);
+  m = addZero(m);
+  s = addZero(s);
+  hours.value = h;
+  minutes.value = m
+  seconds.value = s;
+  if (lefttime <= 0) {
+    end.value = `活动已结束`;
+    clearInterval(interval)
+  }
+}
+
+function init () { // 初始化
+  interval = setInterval(() => {
+    countDown(props.time);
+  }, 1000);
+}
+
+onMounted(() => {
+  init()
+});
 </script>
 <style scoped lang="scss">
 .cart-promotion{
diff --git a/buyer/src/components/goodsDetail/ShowGoods.vue b/buyer/src/components/goodsDetail/ShowGoods.vue
index 3d4d02d63..b4019d5bb 100644
--- a/buyer/src/components/goodsDetail/ShowGoods.vue
+++ b/buyer/src/components/goodsDetail/ShowGoods.vue
@@ -108,7 +108,7 @@
                   class="item-coupon"
                   v-for="(item, index) in promotionMap['COUPON'].slice(0, 6)"
                   :key="index"
-                  @click="receiveCoupon(item.id)"
+                  @click="handleReceiveCoupon(item.id)"
                 >
                   <span v-if="item.couponType == 'PRICE'"
                     >满{{ item.consumeThreshold }}减{{ item.price }}</span>
@@ -125,7 +125,7 @@
                       class="item-coupon"
                       v-for="(item, index) in promotionMap['COUPON'].slice(6, promotionMap['COUPON'].length)"
                       :key="index"
-                      @click="receiveCoupon(item.id)"
+                      @click="handleReceiveCoupon(item.id)"
                     >
                       <span v-if="item.couponType == 'PRICE'"
                         >满{{ item.consumeThreshold }}减{{ item.price }}</span>
@@ -318,11 +318,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import { StarFilled } from '@element-plus/icons-vue';
 import Promotion from "./Promotion.vue";
 import DPlayer from "dplayer";
+import storage from "@/plugins/storage.js";
 import {
   collectGoods,
   isCollection,
@@ -344,375 +347,389 @@ import {
   E_COUPON_CART_POINTS,
 } from "@/constants/goodsType";
 
-export default {
-  name: "ShowGoods",
-  props: {
-    // 商品数据
-    detail: {
-      type: Object,
-      default: null,
-    },
+defineOptions({ name: "ShowGoods" });
+
+const props = defineProps({
+  // 商品数据
+  detail: {
+    type: Object,
+    default: null,
   },
-  watch: {
-    detail: {
-      handler(val) {
-        this.skuDetail = val.data;
-        this.wholesaleList = val.wholesaleList;
-        this.syncCountWithQuantity();
-        this.promotion();
-        this.swiperGoodsImg();
-      },
-      deep: true,
-      immediate: true,
-    },
-    showGoodsVideo(val){
-      if(val){
-        this.initVideo();
+});
+
+const emit = defineEmits(["handleClickSku"]);
+
+const route = useRoute();
+const router = useRouter();
+
+const showGoodsVideo = ref(false);
+const goodsVideo = ref("");
+const wholesaleList = ref([]);
+const count = ref(1); // 商品数量
+const imgIndex = ref(0); // 展示图片下标
+const currentSelceted = ref([]); // 当前商品sku
+const imgList = ref([]); // 商品图片列表
+const skuDetail = ref({
+  specList: [],
+}); // sku详情
+const goodsSpecList = ref(props.detail.specs); // 商品spec
+const promotionMap = ref(createEmptyPromotionMap());
+const formatList = ref([]); // 选择商品品类的数组
+const loading = ref(false); // 立即购买loading
+const loading1 = ref(false); // 加入购物车loading
+const loadingPintuan = ref(false);
+const isCollected = ref(false); // 是否收藏
+const skuList = ref([]); // formatSku 中赋值（原 data 未声明）
+
+// startCheckout 通过字符串 key 操作对应 loading
+const loadings = { loading, loading1, loadingPintuan };
+
+const currentImg = computed(() => {
+  const item = imgList.value[imgIndex.value];
+  return item ? item.url || item : "";
+});
+
+const wholesalePrice = computed(() => {
+  return wholesaleList.value.length
+    ? wholesaleList.value.map((item) => {
+        return item.price;
+      })
+    : [];
+});
+
+const wholesaleNum = computed(() => {
+  return wholesaleList.value.length
+    ? wholesaleList.value.map((item) => {
+        return item.num;
+      })
+    : [];
+});
+
+/** 卡密商品：禁加购，仅立即购买；库存读 quantity（M-02 起支持促销） */
+const isECouponGoods = computed(() => {
+  return isECoupon(skuDetail.value.goodsType);
+});
+
+const displayStock = computed(() => {
+  if (isECouponGoods.value) {
+    return getECouponStock(skuDetail.value);
+  }
+  return Number(skuDetail.value.quantity) || 0;
+});
+
+const quantityMax = computed(() => {
+  if (isECouponGoods.value) {
+    return getECouponMaxBuyNum(skuDetail.value);
+  }
+  const qty = Number(skuDetail.value.quantity) || 0;
+  return qty > 0 ? qty : 1;
+});
+
+const isOutOfStock = computed(() => {
+  if (isECouponGoods.value) {
+    return getECouponStock(skuDetail.value) <= 0;
+  }
+  return (Number(skuDetail.value.quantity) || 0) <= 0;
+});
+
+watch(
+  () => props.detail,
+  (val) => {
+    skuDetail.value = val.data;
+    wholesaleList.value = val.wholesaleList;
+    syncCountWithQuantity();
+    promotion();
+    swiperGoodsImg();
+  },
+  { deep: true, immediate: true }
+);
+
+watch(showGoodsVideo, (val) => {
+  if (val) {
+    initVideo();
+  }
+});
+
+// 初始化video
+function initVideo() {
+  if (!goodsVideo.value) {
+    setTimeout(() => {
+      goodsVideo.value = new DPlayer({
+        container: document.getElementById('dplayer'),
+        video: {
+          url: skuDetail.value.goodsVideo,
+        },
+      });
+    }, 100);
+  }
+}
+
+function syncCountWithQuantity() {
+  const qty = isECouponGoods.value
+    ? getECouponStock(skuDetail.value)
+    : Number(skuDetail.value.quantity) || 0;
+  if (qty <= 0) {
+    count.value = 1;
+    return;
+  }
+  if (!isECouponGoods.value && wholesaleList.value && wholesaleList.value.length > 0) {
+    count.value = Math.min(Math.max(wholesaleList.value[0].num, 1), qty);
+    return;
+  }
+  const max = isECouponGoods.value ? getECouponMaxBuyNum(skuDetail.value) : qty;
+  if (count.value > max) {
+    count.value = max;
+  } else if (count.value < 1) {
+    count.value = 1;
+  }
+}
+
+function changeCount(val) {
+  if (wholesaleList.value && wholesaleList.value.length > 0) {
+    if (count.value <= wholesaleList.value[0].num) {
+      Message.warning("批发商品购买数量不能小于起批数量");
+      count.value = wholesaleList.value[0].num;
+    }
+  }
+}
+
+function select(index, value) {
+  // 选择规格
+  currentSelceted.value[index] = value;
+  let selectedSkuId = goodsSpecList.value.find((i) => {
+    let matched = true;
+    let specValues = i.specValues.filter((j) => j.specName !== "images");
+    for (let n = 0; n < specValues.length; n++) {
+      if (specValues[n].specValue !== currentSelceted.value[n]) {
+        matched = false;
+        return;
       }
     }
-  },
-  data() {
-    return {
-      playIcon,
-      showGoodsVideo:false,
-      goodsVideo:"",
-      wholesaleList: [],
-      count: 1, // 商品数量
-      imgIndex: 0, // 展示图片下标
-      currentSelceted: [], // 当前商品sku
-      imgList: [], // 商品图片列表
-      skuDetail: {
-        specList: [],
-      }, // sku详情
-      goodsSpecList: this.detail.specs, // 商品spec
-      promotionMap: createEmptyPromotionMap(),
-      formatList: [], // 选择商品品类的数组
-      loading: false, // 立即购买loading
-      loading1: false, // 加入购物车loading
-      loadingPintuan: false,
-      isCollected: false, // 是否收藏
-    };
-  },
-  components: { Promotion, StarFilled },
-  computed: {
-    currentImg() {
-      const item = this.imgList[this.imgIndex];
-      return item ? item.url || item : "";
-    },
-    wholesalePrice(key) {
-      return this.wholesaleList.length
-        ? this.wholesaleList.map((item) => {
-            return item.price;
-          })
-        : [];
-    },
-    wholesaleNum(key) {
-      return this.wholesaleList.length
-        ? this.wholesaleList.map((item) => {
-            return item.num;
-          })
-        : [];
-    },
-    /** 卡密商品：禁加购，仅立即购买；库存读 quantity（M-02 起支持促销） */
-    isECouponGoods() {
-      return isECoupon(this.skuDetail.goodsType);
-    },
-    displayStock() {
-      if (this.isECouponGoods) {
-        return getECouponStock(this.skuDetail);
-      }
-      return Number(this.skuDetail.quantity) || 0;
-    },
-    quantityMax() {
-      if (this.isECouponGoods) {
-        return getECouponMaxBuyNum(this.skuDetail);
-      }
-      const qty = Number(this.skuDetail.quantity) || 0;
-      return qty > 0 ? qty : 1;
-    },
-    isOutOfStock() {
-      if (this.isECouponGoods) {
-        return getECouponStock(this.skuDetail) <= 0;
-      }
-      return (Number(this.skuDetail.quantity) || 0) <= 0;
-    },
-  },
-  methods: {
-    eCouponAfterSaleHint,
-    // 初始化video
-    initVideo(){
-      if(!this.goodsVideo ){
-        setTimeout(()=>{
-        this.goodsVideo = new DPlayer({
-          container: document.getElementById('dplayer'),
-          video: {
-              url:this.skuDetail.goodsVideo,
-          },
-      });
-      },100)
-      }
+    if (matched) {
+      return i;
+    }
+  });
+  emit("handleClickSku", {
+    skuId: selectedSkuId.skuId,
+    goodsId: skuDetail.value.goodsId,
+  });
+}
 
-
-
-    },
-
-
-    syncCountWithQuantity() {
-      const qty = this.isECouponGoods
-        ? getECouponStock(this.skuDetail)
-        : Number(this.skuDetail.quantity) || 0;
-      if (qty <= 0) {
-        this.count = 1;
-        return;
-      }
-      if (!this.isECouponGoods && this.wholesaleList && this.wholesaleList.length > 0) {
-        this.count = Math.min(Math.max(this.wholesaleList[0].num, 1), qty);
-        return;
-      }
-      const max = this.isECouponGoods ? getECouponMaxBuyNum(this.skuDetail) : qty;
-      if (this.count > max) {
-        this.count = max;
-      } else if (this.count < 1) {
-        this.count = 1;
-      }
-    },
-    changeCount(val) {
-      if (this.wholesaleList && this.wholesaleList.length > 0) {
-        if (this.count <= this.wholesaleList[0].num) {
-          Message.warning("批发商品购买数量不能小于起批数量");
-          this.count = this.wholesaleList[0].num;
-        }
-      }
-    },
-    select(index, value) {
-      // 选择规格
-      this.currentSelceted[index] = value;
-      let selectedSkuId = this.goodsSpecList.find((i) => {
-        let matched = true;
-        let specValues = i.specValues.filter((j) => j.specName !== "images");
-        for (let n = 0; n < specValues.length; n++) {
-          if (specValues[n].specValue !== this.currentSelceted[n]) {
-            matched = false;
-            return;
-          }
-        }
-        if (matched) {
-          return i;
-        }
-      });
-      this.$emit("handleClickSku", {
-        skuId: selectedSkuId.skuId,
-        goodsId: this.skuDetail.goodsId,
-      });
-    },
-
-    addShoppingCartBtn() {
-      // FR-B-01：E_COUPON 禁止加购物车（后端亦返回 CARD_KEY_E_COUPON_CART_FORBIDDEN）
-      if (this.isECouponGoods) {
-        Message.warning("电子卡券请使用立即购买");
-        return;
-      }
-      // 添加购物车
-      const params = {
-        num: this.count,
-        skuId: this.skuDetail.id,
-      };
-      this.loading = true;
-      addCartGoods(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.$router.push({
-              path: "/shoppingCart",
-              query: {
-                skuId: this.skuDetail.id,
-                goodsId: this.skuDetail.goodsId,
-                thumbnail: this.skuDetail.thumbnail,
-                goodsName: this.skuDetail.goodsName,
-                count: this.count,
-              },
-            });
-          } else {
-            Message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    buyNow() {
-      this.startCheckout(E_COUPON_CART_BUY_NOW, "loading1");
-    },
-    pintuanBuy() {
-      this.startCheckout(E_COUPON_CART_PINTUAN, "loadingPintuan");
-    },
-    pointPay() {
-      this.startCheckout(E_COUPON_CART_POINTS, "loading");
-    },
-    startCheckout(action, loadingKey) {
-      const params = {
-        num: this.count,
-        skuId: this.skuDetail.id,
-        cartType: "BUY_NOW",
-      };
-      if (this.skuDetail.goodsType === "VIRTUAL_GOODS") {
-        params.cartType = "VIRTUAL";
-      } else if (this.isECouponGoods) {
-        params.cartType = resolveECouponCartType({
-          routeWay: this.$route.query.way,
-          action,
-        });
-      }
-      this[loadingKey] = true;
-      addCartGoods(params)
-        .then((res) => {
-          this[loadingKey] = false;
-          if (res.success) {
-            this.$router.push({
-              path: "/pay",
-              query: { way: params.cartType },
-            });
-          } else {
-            Message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          this[loadingKey] = false;
-        });
-    },
-    async collect() {
-      if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) {
-        this.$router.push({
-          path: "/login",
+function addShoppingCartBtn() {
+  // FR-B-01：E_COUPON 禁止加购物车（后端亦返回 CARD_KEY_E_COUPON_CART_FORBIDDEN）
+  if (isECouponGoods.value) {
+    Message.warning("电子卡券请使用立即购买");
+    return;
+  }
+  // 添加购物车
+  const params = {
+    num: count.value,
+    skuId: skuDetail.value.id,
+  };
+  loading.value = true;
+  addCartGoods(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        router.push({
+          path: "/shoppingCart",
           query: {
-            rePath: this.$route.path,
-            query: JSON.stringify(this.$route.query || {}),
+            skuId: skuDetail.value.id,
+            goodsId: skuDetail.value.goodsId,
+            thumbnail: skuDetail.value.thumbnail,
+            goodsName: skuDetail.value.goodsName,
+            count: count.value,
           },
         });
-        return;
-      }
-      // 收藏商品
-      if (this.isCollected) {
-        let cancel = await cancelCollect("GOODS", this.skuDetail.id);
-        if (cancel.success) {
-          Message.success("取消收藏成功");
-          this.isCollected = false;
-        }
       } else {
-        let collect = await collectGoods("GOODS", this.skuDetail.id);
-        if (collect.code === 200) {
-          this.isCollected = true;
-          Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
-        }
+        Message.warning(res.message);
       }
-    },
-    // 格式化数据
-    formatSku(list) {
-      let arr = [{}];
-      list.forEach((item, index) => {
-        item.specValues.forEach((spec, specIndex) => {
-          let name = spec.specName;
-          let values = {
-            value: spec.specValue,
-            quantity: item.quantity,
-          };
-          if (name === "images") {
-            return;
-          }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
 
-          arr.forEach((arrItem, arrIndex) => {
-            if (
-              arrItem.name === name &&
-              arrItem.values &&
-              !arrItem.values.find((i) => i.value === values.value)
-            ) {
-              arrItem.values.push(values);
-            }
+function buyNow() {
+  startCheckout(E_COUPON_CART_BUY_NOW, "loading1");
+}
 
-            let keys = arr.map((key) => {
-              return key.name;
-            });
-            if (!keys.includes(name)) {
-              arr.push({
-                name: name,
-                values: [values],
-              });
-            }
-          });
+function pintuanBuy() {
+  startCheckout(E_COUPON_CART_PINTUAN, "loadingPintuan");
+}
+
+function pointPay() {
+  startCheckout(E_COUPON_CART_POINTS, "loading");
+}
+
+function startCheckout(action, loadingKey) {
+  const params = {
+    num: count.value,
+    skuId: skuDetail.value.id,
+    cartType: "BUY_NOW",
+  };
+  if (skuDetail.value.goodsType === "VIRTUAL_GOODS") {
+    params.cartType = "VIRTUAL";
+  } else if (isECouponGoods.value) {
+    params.cartType = resolveECouponCartType({
+      routeWay: route.query.way,
+      action,
+    });
+  }
+  loadings[loadingKey].value = true;
+  addCartGoods(params)
+    .then((res) => {
+      loadings[loadingKey].value = false;
+      if (res.success) {
+        router.push({
+          path: "/pay",
+          query: { way: params.cartType },
         });
-      });
-      arr.shift();
-      this.formatList = arr;
-
-      let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
-      if (cur) {
-        cur.specValues
-          .filter((i) => i.specName !== "images")
-          .forEach((value, _index) => {
-            this.currentSelceted[_index] = value.specValue;
-          });
+      } else {
+        Message.warning(res.message);
       }
-      this.skuList = list;
-    },
-    receiveCoupon(id) {
-      // 领取优惠券
-      receiveCoupon(id).then((res) => {
-        if (res.success) {
-          Message.success("优惠券领取成功");
-        } else {
-          Message.warning(res.message);
-        }
-      });
-    },
-    promotion() {
-      this.promotionMap = createEmptyPromotionMap();
-      if (!this.detail || !this.detail.promotionMap) return false;
-      const keysArr = Object.keys(this.detail.promotionMap);
-      if (keysArr.length === 0) return false;
+    })
+    .catch(() => {
+      loadings[loadingKey].value = false;
+    });
+}
 
-      for (let i = 0; i < keysArr.length; i++) {
-        const key = keysArr[i].split("-")[0];
-        if (key === "COUPON") {
-          if (!Array.isArray(this.promotionMap.COUPON)) {
-            this.promotionMap.COUPON = [];
-          }
-          this.promotionMap.COUPON.push(this.detail.promotionMap[keysArr[i]]);
-        } else if (Object.prototype.hasOwnProperty.call(this.promotionMap, key)) {
-          this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
-        } else {
-          this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
-        }
-      }
-    },
-    // 相册里会混进规格 JSON，只留图片地址；没有相册时用主图
-    swiperGoodsImg() {
-      const source = this.skuDetail.goodsGalleryList || [];
-      const gallery = Array.from(source).filter((item) => {
-        if (typeof item !== "string") return false;
-        return item.indexOf('"url":') === -1 && item.indexOf('"status":') === -1;
-      });
-      if (gallery.length) {
-        this.imgList = gallery;
+async function collect() {
+  if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) {
+    router.push({
+      path: "/login",
+      query: {
+        rePath: route.path,
+        query: JSON.stringify(route.query || {}),
+      },
+    });
+    return;
+  }
+  // 收藏商品
+  if (isCollected.value) {
+    let cancel = await cancelCollect("GOODS", skuDetail.value.id);
+    if (cancel.success) {
+      Message.success("取消收藏成功");
+      isCollected.value = false;
+    }
+  } else {
+    let collect = await collectGoods("GOODS", skuDetail.value.id);
+    if (collect.code === 200) {
+      isCollected.value = true;
+      Message.success("收藏商品成功,可以前往个人中心我的收藏查看");
+    }
+  }
+}
+
+// 格式化数据
+function formatSku(list) {
+  let arr = [{}];
+  list.forEach((item, index) => {
+    item.specValues.forEach((spec, specIndex) => {
+      let name = spec.specName;
+      let values = {
+        value: spec.specValue,
+        quantity: item.quantity,
+      };
+      if (name === "images") {
         return;
       }
-      this.imgList = this.skuDetail.original ? [this.skuDetail.original] : [];
-    },
-  },
-  mounted() {
-    // 用户登录才会判断是否收藏（须同时有 token，避免残留 userInfo 触发 401 跳转登录）
-    if (this.Cookies.getItem("accessToken") && this.Cookies.getItem("userInfo")) {
-      isCollection("GOODS", this.skuDetail.id).then((res) => {
-        if (res.success && res.result) {
-          this.isCollected = true;
+
+      arr.forEach((arrItem, arrIndex) => {
+        if (
+          arrItem.name === name &&
+          arrItem.values &&
+          !arrItem.values.find((i) => i.value === values.value)
+        ) {
+          arrItem.values.push(values);
+        }
+
+        let keys = arr.map((key) => {
+          return key.name;
+        });
+        if (!keys.includes(name)) {
+          arr.push({
+            name: name,
+            values: [values],
+          });
         }
       });
-    }
+    });
+  });
+  arr.shift();
+  formatList.value = arr;
 
-    this.formatSku(this.goodsSpecList);
-    // this.promotion();
-    document.title = this.skuDetail.goodsName;
-  },
-};
+  let cur = list.filter((i) => i.skuId === route.query.skuId)[0];
+  if (cur) {
+    cur.specValues
+      .filter((i) => i.specName !== "images")
+      .forEach((value, _index) => {
+        currentSelceted.value[_index] = value.specValue;
+      });
+  }
+  skuList.value = list;
+}
+
+function handleReceiveCoupon(id) {
+  // 领取优惠券
+  receiveCoupon(id).then((res) => {
+    if (res.success) {
+      Message.success("优惠券领取成功");
+    } else {
+      Message.warning(res.message);
+    }
+  });
+}
+
+function promotion() {
+  promotionMap.value = createEmptyPromotionMap();
+  if (!props.detail || !props.detail.promotionMap) return false;
+  const keysArr = Object.keys(props.detail.promotionMap);
+  if (keysArr.length === 0) return false;
+
+  for (let i = 0; i < keysArr.length; i++) {
+    const key = keysArr[i].split("-")[0];
+    if (key === "COUPON") {
+      if (!Array.isArray(promotionMap.value.COUPON)) {
+        promotionMap.value.COUPON = [];
+      }
+      promotionMap.value.COUPON.push(props.detail.promotionMap[keysArr[i]]);
+    } else if (Object.prototype.hasOwnProperty.call(promotionMap.value, key)) {
+      promotionMap.value[key] = props.detail.promotionMap[keysArr[i]];
+    } else {
+      promotionMap.value[key] = props.detail.promotionMap[keysArr[i]];
+    }
+  }
+}
+
+// 相册里会混进规格 JSON，只留图片地址；没有相册时用主图
+function swiperGoodsImg() {
+  const source = skuDetail.value.goodsGalleryList || [];
+  const gallery = Array.from(source).filter((item) => {
+    if (typeof item !== "string") return false;
+    return item.indexOf('"url":') === -1 && item.indexOf('"status":') === -1;
+  });
+  if (gallery.length) {
+    imgList.value = gallery;
+    return;
+  }
+  imgList.value = skuDetail.value.original ? [skuDetail.value.original] : [];
+}
+
+onMounted(() => {
+  // 用户登录才会判断是否收藏（须同时有 token，避免残留 userInfo 触发 401 跳转登录）
+  if (storage.getItem("accessToken") && storage.getItem("userInfo")) {
+    isCollection("GOODS", skuDetail.value.id).then((res) => {
+      if (res.success && res.result) {
+        isCollected.value = true;
+      }
+    });
+  }
+
+  formatSku(goodsSpecList.value);
+  // promotion();
+  document.title = skuDetail.value.goodsName;
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
index 6c65dfa7d..4960a2e21 100644
--- a/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
+++ b/buyer/src/components/goodsDetail/ShowGoodsDetail.vue
@@ -132,160 +132,162 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
 import { Refresh } from '@element-plus/icons-vue';
 import { goodsComment, goodsCommentNum } from '@/api/member.js';
 import StoreSide from './StoreSide.vue';
 
-export default {
-  components: { Refresh, StoreSide },
-  name: 'ShowGoodsDetail',
-  props: {
-    detail: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      detailTabs: [
-        { name: 'intro', label: '商品介绍' },
-        { name: 'comment', label: '商品评价' },
-        { name: 'params', label: '商品参数' }
-      ],
-      activeDetailTab: 'intro',
-      anchorStuck: false,
-      lockScrollSpy: false,
-      scrollTimer: null,
-      commentList: [],
-      commentParams: {
-        pageNumber: 1,
-        pageSize: 10,
-        grade: '',
-        goodsId: ''
-      },
-      commentTypeNum: {},
-      commentTotal: 0
-    };
-  },
-  computed: {
-    skuDetail () {
-      return this.detail.data;
-    },
-    goodsParamsList () {
-      const list = this.detail && Array.isArray(this.detail.goodsParamsDTOList) ? this.detail.goodsParamsDTOList : [];
-      const flat = [];
+defineOptions({ name: 'ShowGoodsDetail' });
 
-      list.forEach((item) => {
-        if (!item) return;
-        if (Array.isArray(item.goodsParamsItemDTOList)) {
-          flat.push(...item.goodsParamsItemDTOList);
-        } else {
-          flat.push(item);
-        }
-      });
-
-      const cleaned = flat.filter((p) => p && (p.paramName || p.paramId));
-      const hasSort = cleaned.some((p) => p && p.sort !== undefined && p.sort !== null);
-      if (!hasSort) return cleaned;
-
-      return cleaned.slice().sort((a, b) => {
-        const sa = Number(a && a.sort) || 0;
-        const sb = Number(b && b.sort) || 0;
-        return sa - sb;
-      });
-    }
-  },
-  methods: {
-    getNavOffset () {
-      const nav = this.$refs.tabNav;
-      return (nav ? nav.offsetHeight : 52) + 8;
-    },
-    scrollToSection (name) {
-      const el = this.$refs[name];
-      if (!el) return;
-      this.activeDetailTab = name;
-      this.lockScrollSpy = true;
-      const top = el.getBoundingClientRect().top + window.pageYOffset - this.getNavOffset();
-      window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
-      const unlock = () => {
-        this.lockScrollSpy = false;
-        window.removeEventListener('scrollend', unlock);
-      };
-      window.addEventListener('scrollend', unlock);
-      window.clearTimeout(this.scrollTimer);
-      this.scrollTimer = window.setTimeout(unlock, 900);
-    },
-    handleScroll () {
-      const nav = this.$refs.tabNav;
-      if (nav) {
-        this.anchorStuck = nav.getBoundingClientRect().top <= 1;
-      }
-      if (this.lockScrollSpy) return;
-      const offset = this.getNavOffset() + 16;
-      let current = '';
-      this.detailTabs.forEach((tab) => {
-        const el = this.$refs[tab.name];
-        if (el && el.getBoundingClientRect().top <= offset) {
-          current = tab.name;
-        }
-      });
-      if (current) {
-        this.activeDetailTab = current;
-      }
-    },
-    changePageNum (val) {
-      this.commentParams.pageNumber = val;
-      this.getList();
-    },
-    changePageSize (val) {
-      this.commentParams.pageNumber = 1;
-      this.commentParams.pageSize = val;
-      this.getList();
-    },
-    getList () {
-      this.commentParams.goodsId = this.skuDetail.goodsId;
-      goodsComment(this.commentParams).then(res => {
-        if (res.success) {
-          this.commentList = res.result.records;
-          this.commentTotal = res.result.total;
-        }
-      });
-      goodsCommentNum(this.skuDetail.goodsId).then(res => {
-        if (res.success) {
-          this.commentTypeNum = res.result;
-        }
-      });
-    },
-    viewByGrade (grade) {
-      this.commentParams.grade = grade;
-      this.commentParams.pageNumber = 1;
-      this.getList();
-    },
-    previewImg (img, item) {
-      item.previewImg = img;
-      item.deg = item.deg || 0;
-    },
-    hidePreviewImg (item) {
-      item.previewImg = '';
-    },
-    rotatePreviewImg (type, item) {
-      const current = item.deg || 0;
-      item.deg = type ? current + 90 : current - 90;
-    }
-  },
-  mounted () {
-    window.addEventListener('scroll', this.handleScroll, { passive: true });
-    this.getList();
-    if (this.skuDetail.grade === null || this.skuDetail.grade === undefined) {
-      this.skuDetail.grade = 100;
-    }
-  },
-  beforeUnmount () {
-    window.removeEventListener('scroll', this.handleScroll);
-    window.clearTimeout(this.scrollTimer);
+const props = defineProps({
+  detail: {
+    type: Object,
+    default: null
   }
-};
+});
+
+const tabNav = ref(null);
+const intro = ref(null);
+const comment = ref(null);
+const params = ref(null);
+const sectionRefs = { intro, comment, params };
+
+const detailTabs = ref([
+  { name: 'intro', label: '商品介绍' },
+  { name: 'comment', label: '商品评价' },
+  { name: 'params', label: '商品参数' }
+]);
+const activeDetailTab = ref('intro');
+const anchorStuck = ref(false);
+const lockScrollSpy = ref(false);
+let scrollTimer = null;
+const commentList = ref([]);
+const commentParams = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  grade: '',
+  goodsId: ''
+});
+const commentTypeNum = ref({});
+const commentTotal = ref(0);
+
+const skuDetail = computed(() => {
+  return props.detail.data;
+});
+const goodsParamsList = computed(() => {
+  const list = props.detail && Array.isArray(props.detail.goodsParamsDTOList) ? props.detail.goodsParamsDTOList : [];
+  const flat = [];
+
+  list.forEach((item) => {
+    if (!item) return;
+    if (Array.isArray(item.goodsParamsItemDTOList)) {
+      flat.push(...item.goodsParamsItemDTOList);
+    } else {
+      flat.push(item);
+    }
+  });
+
+  const cleaned = flat.filter((p) => p && (p.paramName || p.paramId));
+  const hasSort = cleaned.some((p) => p && p.sort !== undefined && p.sort !== null);
+  if (!hasSort) return cleaned;
+
+  return cleaned.slice().sort((a, b) => {
+    const sa = Number(a && a.sort) || 0;
+    const sb = Number(b && b.sort) || 0;
+    return sa - sb;
+  });
+});
+
+function getNavOffset () {
+  const nav = tabNav.value;
+  return (nav ? nav.offsetHeight : 52) + 8;
+}
+function scrollToSection (name) {
+  const el = sectionRefs[name] && sectionRefs[name].value;
+  if (!el) return;
+  activeDetailTab.value = name;
+  lockScrollSpy.value = true;
+  const top = el.getBoundingClientRect().top + window.pageYOffset - getNavOffset();
+  window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
+  const unlock = () => {
+    lockScrollSpy.value = false;
+    window.removeEventListener('scrollend', unlock);
+  };
+  window.addEventListener('scrollend', unlock);
+  window.clearTimeout(scrollTimer);
+  scrollTimer = window.setTimeout(unlock, 900);
+}
+function handleScroll () {
+  const nav = tabNav.value;
+  if (nav) {
+    anchorStuck.value = nav.getBoundingClientRect().top <= 1;
+  }
+  if (lockScrollSpy.value) return;
+  const offset = getNavOffset() + 16;
+  let current = '';
+  detailTabs.value.forEach((tab) => {
+    const el = sectionRefs[tab.name] && sectionRefs[tab.name].value;
+    if (el && el.getBoundingClientRect().top <= offset) {
+      current = tab.name;
+    }
+  });
+  if (current) {
+    activeDetailTab.value = current;
+  }
+}
+function changePageNum (val) {
+  commentParams.pageNumber = val;
+  getList();
+}
+function changePageSize (val) {
+  commentParams.pageNumber = 1;
+  commentParams.pageSize = val;
+  getList();
+}
+function getList () {
+  commentParams.goodsId = skuDetail.value.goodsId;
+  goodsComment(commentParams).then(res => {
+    if (res.success) {
+      commentList.value = res.result.records;
+      commentTotal.value = res.result.total;
+    }
+  });
+  goodsCommentNum(skuDetail.value.goodsId).then(res => {
+    if (res.success) {
+      commentTypeNum.value = res.result;
+    }
+  });
+}
+function viewByGrade (grade) {
+  commentParams.grade = grade;
+  commentParams.pageNumber = 1;
+  getList();
+}
+function previewImg (img, item) {
+  item.previewImg = img;
+  item.deg = item.deg || 0;
+}
+function hidePreviewImg (item) {
+  item.previewImg = '';
+}
+function rotatePreviewImg (type, item) {
+  const current = item.deg || 0;
+  item.deg = type ? current + 90 : current - 90;
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll, { passive: true });
+  getList();
+  if (skuDetail.value.grade === null || skuDetail.value.grade === undefined) {
+    skuDetail.value.grade = 100;
+  }
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll);
+  window.clearTimeout(scrollTimer);
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/goodsDetail/StoreSide.vue b/buyer/src/components/goodsDetail/StoreSide.vue
index 205b88db7..5c8904fc1 100644
--- a/buyer/src/components/goodsDetail/StoreSide.vue
+++ b/buyer/src/components/goodsDetail/StoreSide.vue
@@ -65,149 +65,217 @@
   </aside>
 </template>
 
-<script>
-import { Message } from "@/utils/message";
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message, Modal } from "@/utils/message";
 import { goodsList } from "@/api/goods";
 import { getStoreById } from "@/api/shopentry";
 import { cancelStoreCollect, collectStore, isStoreCollection } from "@/api/member";
-import imTalk from "@/components/mixes/talkIm";
+import { getIMDetail } from "@/api/common";
+import { getMemberMsg } from "@/api/login";
+import storage from "@/plugins/storage.js";
 
-export default {
-  name: "StoreSide",
-  mixins: [imTalk],
-  props: {
-    storeId: {
-      type: [String, Number],
-      default: "",
-    },
-    goodsId: {
-      type: [String, Number],
-      default: "",
-    },
-    skuId: {
-      type: [String, Number],
-      default: "",
-    },
-    storeNameFallback: {
-      type: String,
-      default: "",
-    },
+defineOptions({ name: "StoreSide" });
+
+const props = defineProps({
+  storeId: {
+    type: [String, Number],
+    default: "",
   },
-  data() {
-    return {
-      store: {},
-      logoError: false,
-      collected: false,
-      recommends: [],
-    };
+  goodsId: {
+    type: [String, Number],
+    default: "",
   },
-  computed: {
-    storeName() {
-      return this.store.storeName || this.storeNameFallback || "店铺";
-    },
-    storeInitial() {
-      return this.storeName.slice(0, 1);
-    },
-    // 自营标记后端可能是 true、1 或 "1"
-    isSelfOperated() {
-      const flag = this.store.selfOperated;
-      return flag === true || flag === 1 || flag === "1";
-    },
+  skuId: {
+    type: [String, Number],
+    default: "",
   },
-  watch: {
-    storeId: {
-      immediate: true,
-      handler(id) {
-        if (!id) return;
-        this.logoError = false;
-        this.loadStore(id);
-        this.loadRecommend(id);
-        this.loadCollected(id);
+  storeNameFallback: {
+    type: String,
+    default: "",
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const store = ref({});
+const logoError = ref(false);
+const collected = ref(false);
+const recommends = ref([]);
+// 原 talkIm mixin 的 IM 链接
+const IMLink = ref("");
+
+const storeName = computed(() => {
+  return store.value.storeName || props.storeNameFallback || "店铺";
+});
+const storeInitial = computed(() => {
+  return storeName.value.slice(0, 1);
+});
+// 自营标记后端可能是 true、1 或 "1"
+const isSelfOperated = computed(() => {
+  const flag = store.value.selfOperated;
+  return flag === true || flag === 1 || flag === "1";
+});
+
+watch(
+  () => props.storeId,
+  (id) => {
+    if (!id) return;
+    logoError.value = false;
+    loadStore(id);
+    loadRecommend(id);
+    loadCollected(id);
+  },
+  { immediate: true }
+);
+
+// 没有评分或小于等于 0 时按满分展示
+function formatScore(value) {
+  const score = Number(value);
+  if (!Number.isFinite(score) || score <= 0) return "5.00";
+  return score.toFixed(2);
+}
+
+function loadStore(id) {
+  getStoreById(id).then((res) => {
+    if (res.success && res.result) store.value = res.result;
+  }).catch((err) => {
+    console.warn('获取店铺信息失败', err);
+  });
+}
+
+// 按销量取店内商品，去掉当前商品，最多 4 个
+function loadRecommend(id) {
+  goodsList({
+    storeId: id,
+    pageNumber: 1,
+    pageSize: 8,
+    sort: "buyCount",
+    order: "desc",
+  }).then((res) => {
+    const records = (res.success && res.result && res.result.records) || [];
+    recommends.value = records
+      .filter((item) => String(item.goodsId) !== String(props.goodsId))
+      .slice(0, 4);
+  }).catch(() => {
+    // 推荐商品为可选数据，加载失败时静默
+  });
+}
+
+// 同时有 token 和用户信息才查收藏，避免残留 userInfo 触发登录跳转
+function loadCollected(id) {
+  if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) return;
+  isStoreCollection("STORE", id).then((res) => {
+    if (res.success && res.result) collected.value = true;
+  }).catch(() => {
+    // 收藏状态为可选数据，失败时静默
+  });
+}
+
+function goStore() {
+  router.push({ path: "/merchant", query: { id: props.storeId } });
+}
+
+// 推荐商品新开详情页，店铺页仍在当前页打开
+function goGoods(item) {
+  const href = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId: item.id, goodsId: item.goodsId },
+  }).href;
+  window.open(href, "_blank");
+}
+
+// 原 talkIm mixin 的登录提示
+function promptLogin() {
+  Modal.confirm({
+    title: "温馨提示",
+    content: "请登录后执行此操作",
+    okText: "立即登录",
+    cancelText: "取消",
+    onOk: () => {
+      router.push({
+        path: "/login",
+        query: {
+          rePath: route.path,
+          query: JSON.stringify(route.query || {}),
+        },
+      });
+    },
+  });
+}
+
+// 获取im信息（原 talkIm mixin）
+async function getIMDetailMethods() {
+  let res = await getIMDetail();
+  if (res.success) {
+    IMLink.value = res.result;
+  }
+}
+
+// 跳转im客服（原 talkIm mixin；本组件无 storeMsg，mixin 的 storeMsg?.storeId 兜底恒为 undefined，等价于直接用传入的 id）
+async function IMService(id, goodsId, skuId) {
+  if (!storage.getItem("accessToken")) {
+    promptLogin();
+    return;
+  }
+
+  try {
+    await getIMDetailMethods();
+    const userInfo = await getMemberMsg();
+    if (!userInfo.success) {
+      promptLogin();
+      return;
+    }
+
+    const accessToken = storage.getItem("accessToken");
+    const storeId = id;
+    const baseUrl = `${IMLink.value}?token=${accessToken}&id=${storeId}`;
+
+    if (goodsId && skuId) {
+      window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
+    } else {
+      window.open(baseUrl);
+    }
+  } catch {
+    // token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
+    if (!storage.getItem("accessToken")) {
+      promptLogin();
+    }
+  }
+}
+
+function contact() {
+  IMService(props.storeId, props.goodsId, props.skuId);
+}
+
+// 未登录先去登录，并带回当前商品页
+async function toggleCollect() {
+  if (!storage.getItem("accessToken") || !storage.getItem("userInfo")) {
+    router.push({
+      path: "/login",
+      query: {
+        rePath: route.path,
+        query: JSON.stringify(route.query || {}),
       },
-    },
-  },
-  methods: {
-    // 没有评分或小于等于 0 时按满分展示
-    formatScore(value) {
-      const score = Number(value);
-      if (!Number.isFinite(score) || score <= 0) return "5.00";
-      return score.toFixed(2);
-    },
-    loadStore(id) {
-      getStoreById(id).then((res) => {
-        if (res.success && res.result) this.store = res.result;
-      }).catch((err) => {
-        console.warn('获取店铺信息失败', err);
-      });
-    },
-    // 按销量取店内商品，去掉当前商品，最多 4 个
-    loadRecommend(id) {
-      goodsList({
-        storeId: id,
-        pageNumber: 1,
-        pageSize: 8,
-        sort: "buyCount",
-        order: "desc",
-      }).then((res) => {
-        const records = (res.success && res.result && res.result.records) || [];
-        this.recommends = records
-          .filter((item) => String(item.goodsId) !== String(this.goodsId))
-          .slice(0, 4);
-      }).catch(() => {
-        // 推荐商品为可选数据，加载失败时静默
-      });
-    },
-    // 同时有 token 和用户信息才查收藏，避免残留 userInfo 触发登录跳转
-    loadCollected(id) {
-      if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) return;
-      isStoreCollection("STORE", id).then((res) => {
-        if (res.success && res.result) this.collected = true;
-      }).catch(() => {
-        // 收藏状态为可选数据，失败时静默
-      });
-    },
-    goStore() {
-      this.$router.push({ path: "/merchant", query: { id: this.storeId } });
-    },
-    // 推荐商品新开详情页，店铺页仍在当前页打开
-    goGoods(item) {
-      const href = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId: item.id, goodsId: item.goodsId },
-      }).href;
-      window.open(href, "_blank");
-    },
-    contact() {
-      this.IMService(this.storeId, this.goodsId, this.skuId);
-    },
-    // 未登录先去登录，并带回当前商品页
-    async toggleCollect() {
-      if (!this.Cookies.getItem("accessToken") || !this.Cookies.getItem("userInfo")) {
-        this.$router.push({
-          path: "/login",
-          query: {
-            rePath: this.$route.path,
-            query: JSON.stringify(this.$route.query || {}),
-          },
-        });
-        return;
-      }
-      if (this.collected) {
-        const cancel = await cancelStoreCollect("STORE", this.storeId);
-        if (cancel.success) {
-          this.collected = false;
-          Message.success("已取消收藏");
-        }
-        return;
-      }
-      const collect = await collectStore("STORE", this.storeId);
-      if (collect.code === 200) {
-        this.collected = true;
-        Message.success("收藏店铺成功，可以前往个人中心我的收藏查看");
-      }
-    },
-  },
-};
+    });
+    return;
+  }
+  if (collected.value) {
+    const cancel = await cancelStoreCollect("STORE", props.storeId);
+    if (cancel.success) {
+      collected.value = false;
+      Message.success("已取消收藏");
+    }
+    return;
+  }
+  const collect = await collectStore("STORE", props.storeId);
+  if (collect.code === 200) {
+    collected.value = true;
+    Message.success("收藏店铺成功，可以前往个人中心我的收藏查看");
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/header/Header.vue b/buyer/src/components/header/Header.vue
index c4a837da6..6e1260bb4 100644
--- a/buyer/src/components/header/Header.vue
+++ b/buyer/src/components/header/Header.vue
@@ -90,7 +90,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Modal } from "@/utils/message";
 import { ShoppingCart } from '@element-plus/icons-vue';
 import storage from '@/plugins/storage.js';
@@ -98,149 +100,145 @@ import {cartGoodsAll} from '@/api/cart.js';
 import {logout} from '@/api/account.js';
 import config from '@/config';
 import { refreshUnreadMessage } from '@/utils/unreadMessage';
+import { useAppStore } from '@/stores/app';
 
-export default {
-  components: { ShoppingCart },
-  name: 'M-Header',
-  created() {
-    if (storage.getItem('userInfo')) {
-      this.userInfo = JSON.parse(storage.getItem('userInfo'));
-      refreshUnreadMessage();
-    }
-  },
+defineOptions({ name: 'M-Header' });
 
-  data() {
-    return {
-      config,
-      userInfo: {}, // 用户信息
-      shoppingCart: [], // 购物车
-      cartLoading: false,
-      cartLoadedAt: 0,
-      cartCacheTime: 5000
-    };
-  },
-  computed: {
-    // 购物车商品数量
-    cartNum() {
-      return this.$store.state.cartNum;
-    },
-    unreadMsg() {
-      return Number(this.$store.state.unreadMsg) || 0;
-    },
-    unreadLabel() {
-      return this.unreadMsg > 99 ? '99+' : String(this.unreadMsg);
-    }
-  },
-  methods: {
-    goToPay() {
-      if (!this.userInfo.username) {
-        Modal.confirm({
-          title: '温馨提示',
-          content: '请登录后执行此操作',
-          okText: '立即登录',
-          cancelText: '取消',
-          onOk: () => {
-            this.$router.push({
-              path: '/login',
-              query: {
-                rePath: '/cart',
-                query: JSON.stringify(this.$route.query || {}),
-              },
-            });
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const userInfo = ref({}); // 用户信息
+const shoppingCart = ref([]); // 购物车
+const cartLoading = ref(false);
+const cartLoadedAt = ref(0);
+const cartCacheTime = ref(5000);
+
+// 购物车商品数量
+const cartNum = computed(() => appStore.cartNum);
+const unreadMsg = computed(() => appStore.unreadMsg);
+const unreadLabel = computed(() => {
+  return unreadMsg.value > 99 ? '99+' : String(unreadMsg.value);
+});
+
+if (storage.getItem('userInfo')) {
+  userInfo.value = JSON.parse(storage.getItem('userInfo'));
+  refreshUnreadMessage();
+}
+
+function goToPay() {
+  if (!userInfo.value.username) {
+    Modal.confirm({
+      title: '温馨提示',
+      content: '请登录后执行此操作',
+      okText: '立即登录',
+      cancelText: '取消',
+      onOk: () => {
+        router.push({
+          path: '/login',
+          query: {
+            rePath: '/cart',
+            query: JSON.stringify(route.query || {}),
           },
         });
-        return;
-      }
-      this.$router.push('/cart');
-    },
-    myInfo() { // 跳转会员中心
-      this.$router.push('/home');
-    },
-    signOutFun() { // 退出登录
-      logout().then(res => {
-        storage.removeItem('accessToken');
-        storage.removeItem('refreshToken');
-        storage.removeItem('userInfo');
-        storage.removeItem('cartNum');
-        this.$store.commit('SET_CARTNUM', 0)
-        this.$store.commit('SET_UNREAD_MSG', 0)
-        this.$router.push('/login');
-      });
-    },
-    goUserCenter(path) {
-      // 跳转我的订单，我的足迹、收藏等
-      if (this.userInfo.username) {
-        this.$router.push({path: path});
-      } else {
-        Modal.confirm({
-          title: '请登录',
-          content: '请登录后执行此操作',
-          okText: '立即登录',
-          cancelText: '继续浏览',
-          onOk: () => {
-            this.$router.push({
-              path: '/login',
-              query: {
-                rePath: this.$route.path,
-                query: JSON.stringify(this.$route.query || {}),
-              },
-            });
-          }
+      },
+    });
+    return;
+  }
+  router.push('/cart');
+}
+
+function myInfo() { // 跳转会员中心
+  router.push('/home');
+}
+
+function signOutFun() { // 退出登录
+  logout().then(res => {
+    storage.removeItem('accessToken');
+    storage.removeItem('refreshToken');
+    storage.removeItem('userInfo');
+    storage.removeItem('cartNum');
+    appStore.setCartNum(0)
+    appStore.setUnreadMsg(0)
+    router.push('/login');
+  });
+}
+
+function goUserCenter(path) {
+  // 跳转我的订单，我的足迹、收藏等
+  if (userInfo.value.username) {
+    router.push({path: path});
+  } else {
+    Modal.confirm({
+      title: '请登录',
+      content: '请登录后执行此操作',
+      okText: '立即登录',
+      cancelText: '继续浏览',
+      onOk: () => {
+        router.push({
+          path: '/login',
+          query: {
+            rePath: route.path,
+            query: JSON.stringify(route.query || {}),
+          },
         });
       }
-    },
-    shopEntry() {
-      if (storage.getItem('accessToken')) {
-        this.$router.push({
-          path: '/shopEntry',
-          query: { id: 1 },
-        });
-        return;
-      }
-      Modal.confirm({
-        title: '温馨提示',
-        content: '请登录后执行此操作',
-        okText: '立即登录',
-        cancelText: '取消',
-        onOk: () => {
-          this.$router.push({
-            path: '/login',
-            query: {
-              rePath: '/shopEntry',
-              query: JSON.stringify({ id: 1 }),
-            },
-          });
+    });
+  }
+}
+
+function shopEntry() {
+  if (storage.getItem('accessToken')) {
+    router.push({
+      path: '/shopEntry',
+      query: { id: 1 },
+    });
+    return;
+  }
+  Modal.confirm({
+    title: '温馨提示',
+    content: '请登录后执行此操作',
+    okText: '立即登录',
+    cancelText: '取消',
+    onOk: () => {
+      router.push({
+        path: '/login',
+        query: {
+          rePath: '/shopEntry',
+          query: JSON.stringify({ id: 1 }),
         },
       });
     },
-    handleCartDropdownVisible(visible) {
-      if (visible) {
-        this.getCartList();
-      }
-    },
-    getCartList() {
-      // 获取购物车列表
-      if (!this.userInfo.username || this.cartLoading) {
-        return;
-      }
-      const now = Date.now();
-      if (this.cartLoadedAt && now - this.cartLoadedAt < this.cartCacheTime) {
-        return;
-      }
-      this.cartLoadedAt = now;
-      this.cartLoading = true;
-      cartGoodsAll().then((res) => {
-        if (res.success) {
-          this.shoppingCart = (res.result && res.result.skuList) || [];
-          this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
-          this.Cookies.setItem('cartNum', this.shoppingCart.length);
-        }
-      }).finally(() => {
-        this.cartLoading = false;
-      });
-    }
+  });
+}
+
+function handleCartDropdownVisible(visible) {
+  if (visible) {
+    getCartList();
   }
-};
+}
+
+function getCartList() {
+  // 获取购物车列表
+  if (!userInfo.value.username || cartLoading.value) {
+    return;
+  }
+  const now = Date.now();
+  if (cartLoadedAt.value && now - cartLoadedAt.value < cartCacheTime.value) {
+    return;
+  }
+  cartLoadedAt.value = now;
+  cartLoading.value = true;
+  cartGoodsAll().then((res) => {
+    if (res.success) {
+      shoppingCart.value = (res.result && res.result.skuList) || [];
+      appStore.setCartNum(shoppingCart.value.length);
+      storage.setItem('cartNum', shoppingCart.value.length);
+    }
+  }).finally(() => {
+    cartLoading.value = false;
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/header/hoverSearch.vue b/buyer/src/components/header/hoverSearch.vue
index 41cf835ac..28dc29df5 100644
--- a/buyer/src/components/header/hoverSearch.vue
+++ b/buyer/src/components/header/hoverSearch.vue
@@ -24,44 +24,40 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import Search from '@/components/Search.vue'
 import cateNav from '@/components/nav/CateNav.vue'
 import { cartCount } from '@/api/cart.js'
 import storage from '@/plugins/storage.js'
 import { ShoppingCart } from '@element-plus/icons-vue'
+import { useAppStore } from '@/stores/app'
 
-export default {
-  components: { ShoppingCart, Search, cateNav },
-  data() {
-    return {
-      userInfo: {}
-    }
-  },
-  computed: {
-    cartNum() {
-      return this.$store.state.cartNum
-    }
-  },
-  methods: {
-    goCartList() {
-      this.$router.push('/cart')
-    },
-    getCartList() {
-      if (storage.getItem('userInfo')) {
-        cartCount().then((res) => {
-          this.$store.commit('SET_CARTNUM', res.result)
-          this.Cookies.setItem('cartNum', res.result)
-        })
-      }
-    }
-  },
-  mounted() {
-    if (storage.getItem('userInfo')) {
-      this.userInfo = JSON.parse(storage.getItem('userInfo'))
-    }
+const router = useRouter()
+const appStore = useAppStore()
+
+const userInfo = ref({})
+const cartNum = computed(() => appStore.cartNum)
+
+function goCartList() {
+  router.push('/cart')
+}
+
+function getCartList() {
+  if (storage.getItem('userInfo')) {
+    cartCount().then((res) => {
+      appStore.setCartNum(res.result)
+      storage.setItem('cartNum', res.result)
+    })
   }
 }
+
+onMounted(() => {
+  if (storage.getItem('userInfo')) {
+    userInfo.value = JSON.parse(storage.getItem('userInfo'))
+  }
+})
 </script>
 <style lang="scss" scoped>
 $side-col-width: 263.2px;
diff --git a/buyer/src/components/indexDecorate/ModelForm.vue b/buyer/src/components/indexDecorate/ModelForm.vue
index 832e6f3e1..1b59e3e8f 100644
--- a/buyer/src/components/indexDecorate/ModelForm.vue
+++ b/buyer/src/components/indexDecorate/ModelForm.vue
@@ -11,29 +11,25 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed } from 'vue';
 import ModelFormItem from './ModelFormItem.vue';
-export default {
-  name: 'modelForm',
-  components: {
-    ModelFormItem
-  },
-  props: ['data'],
-  computed: {
-    renderList() {
-      const list = this.data?.list || [];
-      return list.filter(
-        (el) => el && el.key && !this.isBuiltinModule(el.type)
-      );
-    }
-  },
-  methods: {
-    isBuiltinModule(type) {
-      // 顶部广告、快捷导航由 Index 页单独渲染
-      return type === 'topAdvert' || type === 'navBar';
-    }
-  }
-};
+
+defineOptions({ name: 'modelForm' });
+
+const props = defineProps(['data']);
+
+const renderList = computed(() => {
+  const list = props.data?.list || [];
+  return list.filter(
+    (el) => el && el.key && !isBuiltinModule(el.type)
+  );
+});
+
+function isBuiltinModule(type) {
+  // 顶部广告、快捷导航由 Index 页单独渲染
+  return type === 'topAdvert' || type === 'navBar';
+}
 </script>
 <style lang="scss" scoped>
 .model-form {
diff --git a/buyer/src/components/indexDecorate/ModelFormItem.vue b/buyer/src/components/indexDecorate/ModelFormItem.vue
index 665c5cabf..f1b2dc311 100644
--- a/buyer/src/components/indexDecorate/ModelFormItem.vue
+++ b/buyer/src/components/indexDecorate/ModelFormItem.vue
@@ -138,7 +138,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import ModelCarousel from "./modelList/Carousel.vue";
 import ModelCarousel1 from "./modelList/Carousel1.vue";
 import ModelCarousel2 from "./modelList/Carousel2.vue";
@@ -152,34 +153,15 @@ import goodsAndType from "./modelList/goodsAndType.vue";
 import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
 import mixModel from "./modelList/mixModel.vue";
 import forYour from "./modelList/forYour.vue";
-import decorateImg from "@/assets/images/decorate.png";
+import decorateImgUrl from "@/assets/images/decorate.png";
 
-export default {
-  name: "modelFormItem",
-  props: ["element", "select", "index", "data"],
-  components: {
-    ModelCarousel,
-    ModelCarousel1,
-    ModelCarousel2,
-    Recommend,
-    NewGoodsSort,
-    FirstPageAdvert,
-    NotEnough,
-    Seckill,
-    oneRowThreeColumns,
-    goodsAndType,
-    onlyGoodsModel,
-    mixModel,
-    forYour
-  },
-  data() {
-    return {
-      decorateImg,
-      showModal: false, // 控制模态框显隐
-      selected: {}, // 已选数据
-    };
-  },
-};
+defineOptions({ name: "modelFormItem" });
+
+defineProps(["element", "select", "index", "data"]);
+
+const decorateImg = ref(decorateImgUrl);
+const showModal = ref(false); // 控制模态框显隐
+const selected = ref({}); // 已选数据
 </script>
 <style lang="scss" scoped>
 .model-item {
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel.vue b/buyer/src/components/indexDecorate/modelList/Carousel.vue
index 5a171a9f1..45263fa02 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel.vue
@@ -82,151 +82,153 @@
   </div>
 </template>
 
-<script>
-
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Modal } from "@/utils/message";
 import storage from "@/plugins/storage";
 import config from "@/config";
 import defaultAvatar from "@/assets/images/default.png";
 import { getIconUrl } from "@/assets/iconfont/iconMap";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  computed: {
-    carouselList() {
-      return this.data?.options?.list || [];
-    },
-    displaySlides() {
-      return this.carouselList.filter((item) => item && item.img);
-    },
+
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const router = useRouter();
+
+const carouselList = computed(() => {
+  return props.data?.options?.list || [];
+});
+
+const displaySlides = computed(() => {
+  return carouselList.value.filter((item) => item && item.img);
+});
+
+const userInfo = ref({}); // 用户信息
+const entranceList = ref([
+  {
+    icon: "collage",
+    label: "宝贝收藏",
+    path: "/home/Favorites"
   },
-  data() {
-    return {
-      config,
-      defaultAvatar,
-      userInfo: {}, // 用户信息
-      entranceList: [
-        {
-          icon: "collage",
-          label: "宝贝收藏",
-          path: "/home/Favorites"
-        },
-        {
-          icon: "shop",
-          label: "收藏店铺",
-          path: "/home/Favorites?type=STORE"
-        },
-        {
-          icon: "carts",
-          label: "购物车",
-          path: "/cart"
-        },
-        {
-          icon: "story",
-          label: "我的足迹",
-          path: "/home/MyTracks"
-        },
-      ],
-      appendList: [
-        {
-          icon: "support",
-          label: "帮助中心",
-          path: "/article"
-        },
-        {
-          icon: "feedback",
-          label: "我的评论",
-          path: "/home/CommentList"
-        },
-        {
-          icon: "notice",
-          label: "收货地址",
-          path: "/home/MyAddress"
-        },
-        {
-          icon: "notification",
-          label: "我的消息",
-          path: "/home/MsgList"
-        },
-      ],
-      recentList: [
-        {
-          value: "0",
-          label: "购物车"
-        },
-        {
-          value: "0",
-          label: "待收货"
-        },
-        {
-          value: "0",
-          label: "待发货"
-        },
-        {
-          value: "0",
-          label: "待付款"
-        },
-      ],
-    };
+  {
+    icon: "shop",
+    label: "收藏店铺",
+    path: "/home/Favorites?type=STORE"
   },
-  methods: {
-    getIconUrl,
-    carouselItemKey(item, index) {
-      return item?.img || item?.url || `slide-${index}`;
-    },
-    resolveRoute(pathStr) {
-      if (!pathStr) return { path: "/" };
-      const [path, search] = pathStr.split("?");
-      if (!search) return { path };
-      return {
-        path,
-        query: Object.fromEntries(new URLSearchParams(search)),
-      };
-    },
-    isMemberRoute(location) {
-      const path = location.path && location.path.charAt(0) === "/" ? location.path : `/${location.path || ""}`;
-      return path === "/home" || path.startsWith("/home/") || path === "/cart";
-    },
-    normalizeLocation(location) {
-      if (!location.path || location.path.charAt(0) === "/") return location;
-      return { ...location, path: `/${location.path}` };
-    },
-    promptLoginThenNavigate(location) {
-      Modal.confirm({
-        title: "温馨提示",
-        content: "请登录后执行此操作",
-        okText: "立即登录",
-        cancelText: "取消",
-        onOk: () => {
-          this.$router.push({
-            path: "/login",
-            query: {
-              rePath: location.path,
-              query: JSON.stringify(location.query || {}),
-            },
-          });
+  {
+    icon: "carts",
+    label: "购物车",
+    path: "/cart"
+  },
+  {
+    icon: "story",
+    label: "我的足迹",
+    path: "/home/MyTracks"
+  },
+]);
+const appendList = ref([
+  {
+    icon: "support",
+    label: "帮助中心",
+    path: "/article"
+  },
+  {
+    icon: "feedback",
+    label: "我的评论",
+    path: "/home/CommentList"
+  },
+  {
+    icon: "notice",
+    label: "收货地址",
+    path: "/home/MyAddress"
+  },
+  {
+    icon: "notification",
+    label: "我的消息",
+    path: "/home/MsgList"
+  },
+]);
+const recentList = ref([
+  {
+    value: "0",
+    label: "购物车"
+  },
+  {
+    value: "0",
+    label: "待收货"
+  },
+  {
+    value: "0",
+    label: "待发货"
+  },
+  {
+    value: "0",
+    label: "待付款"
+  },
+]);
+
+function carouselItemKey(item, index) {
+  return item?.img || item?.url || `slide-${index}`;
+}
+
+function resolveRoute(pathStr) {
+  if (!pathStr) return { path: "/" };
+  const [path, search] = pathStr.split("?");
+  if (!search) return { path };
+  return {
+    path,
+    query: Object.fromEntries(new URLSearchParams(search)),
+  };
+}
+
+function isMemberRoute(location) {
+  const path = location.path && location.path.charAt(0) === "/" ? location.path : `/${location.path || ""}`;
+  return path === "/home" || path.startsWith("/home/") || path === "/cart";
+}
+
+function normalizeLocation(location) {
+  if (!location.path || location.path.charAt(0) === "/") return location;
+  return { ...location, path: `/${location.path}` };
+}
+
+function promptLoginThenNavigate(location) {
+  Modal.confirm({
+    title: "温馨提示",
+    content: "请登录后执行此操作",
+    okText: "立即登录",
+    cancelText: "取消",
+    onOk: () => {
+      router.push({
+        path: "/login",
+        query: {
+          rePath: location.path,
+          query: JSON.stringify(location.query || {}),
         },
       });
     },
-    goLogin() {
-      this.$router.push("/login");
-    },
-    // 快捷跳转中心
-    entryControl(val) {
-      const location = this.normalizeLocation(this.resolveRoute(val.path));
-      if (this.isMemberRoute(location) && !storage.getItem("userInfo")) {
-        this.promptLoginThenNavigate(location);
-        return;
-      }
-      this.$router.push(location);
-    },
-  },
-  mounted() {
-    if (storage.getItem("userInfo"))
-      this.userInfo = JSON.parse(storage.getItem("userInfo"));
+  });
+}
 
-  },
-};
+function goLogin() {
+  router.push("/login");
+}
+
+// 快捷跳转中心
+function entryControl(val) {
+  const location = normalizeLocation(resolveRoute(val.path));
+  if (isMemberRoute(location) && !storage.getItem("userInfo")) {
+    promptLoginThenNavigate(location);
+    return;
+  }
+  router.push(location);
+}
+
+onMounted(() => {
+  if (storage.getItem("userInfo"))
+    userInfo.value = JSON.parse(storage.getItem("userInfo"));
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel1.vue b/buyer/src/components/indexDecorate/modelList/Carousel1.vue
index e634d2b86..8b828f812 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel1.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel1.vue
@@ -17,28 +17,26 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'modelCarousel1',
-  props: ['data'],
-  data () {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      bgColor: '#fff' // 轮播背景色
-    };
-  },
-  mounted () {
-    this.bgColor = this.data.options.list[0].bgColor
-  },
-  methods: {
-    // 自动切换时改变背景色
-    autoChange (index) {
-      this.bgColor = this.data.options.list[index].bgColor
-    }
-  }
-};
+<script setup>
+import { onMounted, ref } from 'vue'
+
+defineOptions({ name: 'modelCarousel1' })
+
+const props = defineProps(['data'])
+
+const showModal = ref(false) // modal显隐
+const selected = ref(null) // 已选数据
+const picModelFlag = ref(false) // 选择图片modal
+const bgColor = ref('#fff') // 轮播背景色
+
+onMounted(() => {
+  bgColor.value = props.data.options.list[0].bgColor
+})
+
+// 自动切换时改变背景色
+function autoChange(index) {
+  bgColor.value = props.data.options.list[index].bgColor
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/Carousel2.vue b/buyer/src/components/indexDecorate/modelList/Carousel2.vue
index 511ca9317..0791c82db 100644
--- a/buyer/src/components/indexDecorate/modelList/Carousel2.vue
+++ b/buyer/src/components/indexDecorate/modelList/Carousel2.vue
@@ -55,49 +55,48 @@
   </div>
 </template>
 
-<script>
-
-import {articleList} from '@/api/common.js'
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { articleList as getArticleListApi } from '@/api/common.js'
 import storage from '@/plugins/storage';
 import { User } from '@element-plus/icons-vue';
 import config from '@/config';
-export default {
-  components: { User },
-  name: 'modelCarousel2',
-  props: ['data'],
-  data () {
-    return {
-      config,
-      userInfo: {}, // 用户信息
-      articleList: [], // 常见问题
-      params: { // 请求常见问题参数
-        pageNumber: 1,
-        pageSize: 10,
-        type: 'ANNOUNCEMENT',
-        sort: 'sort'
-      }
-    };
-  },
-  methods: {
-    getArticleList () { // 获取常见问题列表
-      articleList(this.params).then(res => {
-        if (res.success) {
-          this.articleList = res.result.records
-        }
-      })
-    },
-    goArticle (id) { // 跳转文章详情
-      this.$router.push({
-        path: '/article',
-        query: {id}
-      });
+
+defineOptions({ name: 'modelCarousel2' })
+
+defineProps(['data'])
+
+const router = useRouter()
+
+const userInfo = ref({}) // 用户信息
+const articleList = ref([]) // 常见问题
+const params = reactive({ // 请求常见问题参数
+  pageNumber: 1,
+  pageSize: 10,
+  type: 'ANNOUNCEMENT',
+  sort: 'sort'
+})
+
+function getArticleList () { // 获取常见问题列表
+  getArticleListApi(params).then(res => {
+    if (res.success) {
+      articleList.value = res.result.records
     }
-  },
-  mounted () {
-    if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
-    this.getArticleList()
-  }
-};
+  })
+}
+
+function goArticle (id) { // 跳转文章详情
+  router.push({
+    path: '/article',
+    query: {id}
+  });
+}
+
+onMounted(() => {
+  if (storage.getItem('userInfo')) userInfo.value = JSON.parse(storage.getItem('userInfo'));
+  getArticleList()
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/FirstPageAdvert.vue b/buyer/src/components/indexDecorate/modelList/FirstPageAdvert.vue
index 5d8461aa2..f9206547e 100644
--- a/buyer/src/components/indexDecorate/modelList/FirstPageAdvert.vue
+++ b/buyer/src/components/indexDecorate/modelList/FirstPageAdvert.vue
@@ -19,20 +19,17 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      options: this.data.options // 装修数据
-    };
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
   }
-};
+});
+
+const options = ref(props.data.options); // 装修数据
 </script>
 <style lang="scss" scoped>
 .first-page-advert {
diff --git a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue b/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
index b3032ca08..dac0d0ba5 100644
--- a/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
+++ b/buyer/src/components/indexDecorate/modelList/NewGoodsSort.vue
@@ -70,21 +70,17 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null
-    }
-  },
-  data () {
-    return {
-      options: this.data.options // 装修数据
-    };
-  },
-  methods: {}
-};
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null
+  }
+})
+
+const options = ref(props.data.options) // 装修数据
 </script>
 <style lang="scss" scoped>
 .new-goods {
diff --git a/buyer/src/components/indexDecorate/modelList/NotEnough.vue b/buyer/src/components/indexDecorate/modelList/NotEnough.vue
index 84fccf0f8..94c09215d 100644
--- a/buyer/src/components/indexDecorate/modelList/NotEnough.vue
+++ b/buyer/src/components/indexDecorate/modelList/NotEnough.vue
@@ -31,70 +31,80 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  mounted() {
-    window.addEventListener('scroll',this.handleScrollx,true)
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
   },
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      screenHeight:document.body.clientHeight,
-      scrollHieght:0,
-      topSearchShow: true, //展示 导航条
-      topIndex: 0, // 当前滚动条位置 （取整）
-      scrollTops: 0,
-      open:'',
-      currentIndex: 0, // 当前分类下标
-      conData: this.data, // 装修数据
-      showContent: true, // 是否展示内容
-    };
-  },
-  watch: {
-    data: function (val) {
-      this.conData = val;
-    },
-    conData: function (val) {
-      this.$emit("content", val);
-    },
-  },
-  methods: {
-    handleScrollx(){
-      // console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
-      // console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
-      // this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
-      // this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
-      //    this.topSearchShow = true; // 展示图钉
-      //     if(this.scrollTops < -660){ // 超过隐藏
-      //       this.topSearchShow = false;
-      // }
-    },
-     toguid(path,id){
-      var path =path;
-      var Id = id;
-      localStorage.setItem('toId',Id);
-      this.$router.push(path);
-    },
-    change(status){ //获取是否获取到图钉
-      this.open = status
-    },
-    gotoDemo(){ // 跳转到demo的位置
-    if(this.open){ // 获取到图钉之后在跳转当前位置
-       document.querySelector("#demo").scrollIntoView(true);
-    }
-      //scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素
-    },
-    changeCurr(index) {
-      // 选择分类
-      this.currentIndex = index;
-    },
-  },
-};
+});
+
+const emit = defineEmits(['content']);
+
+const router = useRouter();
+
+const obtain = ref(null);
+const screenHeight = ref(document.body.clientHeight);
+const scrollHieght = ref(0);
+const topSearchShow = ref(true); //展示 导航条
+const topIndex = ref(0); // 当前滚动条位置 （取整）
+const scrollTops = ref(0);
+const open = ref('');
+const currentIndex = ref(0); // 当前分类下标
+const conData = ref(props.data); // 装修数据
+const showContent = ref(true); // 是否展示内容
+
+watch(
+  () => props.data,
+  (val) => {
+    conData.value = val;
+  }
+);
+
+watch(conData, (val) => {
+  emit('content', val);
+});
+
+function handleScrollx() {
+  // console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
+  // console.log(obtain.value.getBoundingClientRect().top) //获取到距离顶部的距离
+  // scrollHieght.value = Number(window.pageYOffset);//获取到距离顶部的距离
+  // scrollTops.value = Number(obtain.value.getBoundingClientRect().top); // 获取到距离顶部的距离
+  //    topSearchShow.value = true; // 展示图钉
+  //     if(scrollTops.value < -660){ // 超过隐藏
+  //       topSearchShow.value = false;
+  // }
+}
+
+function toguid(path, id) {
+  var path = path;
+  var Id = id;
+  localStorage.setItem('toId', Id);
+  router.push(path);
+}
+
+function change(status) { //获取是否获取到图钉
+  open.value = status
+}
+
+function gotoDemo() { // 跳转到demo的位置
+  if (open.value) { // 获取到图钉之后在跳转当前位置
+    document.querySelector("#demo").scrollIntoView(true);
+  }
+  //scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素
+}
+
+function changeCurr(index) {
+  // 选择分类
+  currentIndex.value = index;
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', handleScrollx, true)
+});
 </script>
 <style lang="scss" scoped>
 .not-enough {
diff --git a/buyer/src/components/indexDecorate/modelList/Recommend.vue b/buyer/src/components/indexDecorate/modelList/Recommend.vue
index ebd5e4cdc..2e38f1c77 100644
--- a/buyer/src/components/indexDecorate/modelList/Recommend.vue
+++ b/buyer/src/components/indexDecorate/modelList/Recommend.vue
@@ -58,22 +58,18 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      msgLeft: this.data.options.contentLeft, // 左侧数据
-      msgRight: this.data.options.contentRight // 右侧数据
-    };
-  },
-  methods: {}
-};
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+const msgLeft = ref(props.data.options.contentLeft); // 左侧数据
+const msgRight = ref(props.data.options.contentRight); // 右侧数据
 </script>
 <style lang="scss" scoped>
 .recommend {
diff --git a/buyer/src/components/indexDecorate/modelList/Seckill.vue b/buyer/src/components/indexDecorate/modelList/Seckill.vue
index 1c9308650..b87c2f4c4 100644
--- a/buyer/src/components/indexDecorate/modelList/Seckill.vue
+++ b/buyer/src/components/indexDecorate/modelList/Seckill.vue
@@ -29,94 +29,97 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: Object,
-  },
-  data() {
-    return {
-      list: [],
-      goodsList: [],
-      actStatus: 0,
-      actName: "限时秒杀",
-      currIndex: 0,
-      currHour: "00",
-      diffSeconds: 0,
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-      interval: null,
-    };
-  },
-  watch: {
-    currIndex(val) {
-      clearInterval(this.interval);
-      this.interval = null;
-      this.countDown(val);
-      this.goodsList = this.list[val]?.seckillGoodsList || [];
-    },
-    diffSeconds(val) {
-      const hours = Math.floor(val / 3600);
-      const minutes = Math.floor(val / 60) % 60;
-      const seconds = val % 60;
-      this.hours = filteTime(hours);
-      this.minutes = filteTime(minutes);
-      this.seconds = filteTime(seconds);
-      if (val <= 0) {
-        clearInterval(this.interval);
-        this.interval = null;
-      }
-      function filteTime(time) {
-        return time < 10 ? "0" + time : time;
-      }
-    },
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  mounted() {
-    this.getListByDay();
-  },
-  methods: {
-    goToSeckill() {
-      this.$router.push("/seckill");
-    },
-    countDown(currIndex) {
-      const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-      const currTime = new Date().getTime();
-      let actTime = 0;
-      const nowHour = new Date().getHours();
-      if (this.list[currIndex].timeLine > nowHour) {
-        this.actStatus = 0;
-        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
-      } else if (this.list[currIndex].timeLine <= nowHour) {
-        this.actStatus = 1;
-        if (currIndex === this.list.length - 1) {
-          actTime = zeroTime + 24 * 3600 * 1000;
-        } else {
-          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
-        }
-      }
-      this.currHour = this.list[this.currIndex].timeLine;
-      this.diffSeconds = Math.floor((actTime - currTime) / 1000);
-      this.interval = setInterval(() => {
-        this.diffSeconds--;
-      }, 1000);
-    },
-    getListByDay() {
-      this.list = this.data?.options?.list || [];
-      if (!this.list.length) {
-        this.goodsList = [];
-        return;
-      }
-      this.goodsList = this.list[0]?.seckillGoodsList || [];
-      if (this.goodsList.length) {
-        this.countDown(this.currIndex);
-      }
-    },
-  },
-};
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
+
+const props = defineProps({
+  data: Object,
+});
+
+const router = useRouter();
+
+const list = ref([]);
+const goodsList = ref([]);
+const actStatus = ref(0);
+const actName = ref("限时秒杀");
+const currIndex = ref(0);
+const currHour = ref("00");
+const diffSeconds = ref(0);
+const hours = ref(0);
+const minutes = ref(0);
+const seconds = ref(0);
+const interval = ref(null);
+
+watch(currIndex, (val) => {
+  clearInterval(interval.value);
+  interval.value = null;
+  countDown(val);
+  goodsList.value = list.value[val]?.seckillGoodsList || [];
+});
+
+watch(diffSeconds, (val) => {
+  const h = Math.floor(val / 3600);
+  const m = Math.floor(val / 60) % 60;
+  const s = val % 60;
+  hours.value = filteTime(h);
+  minutes.value = filteTime(m);
+  seconds.value = filteTime(s);
+  if (val <= 0) {
+    clearInterval(interval.value);
+    interval.value = null;
+  }
+  function filteTime(time) {
+    return time < 10 ? "0" + time : time;
+  }
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value);
+});
+
+onMounted(() => {
+  getListByDay();
+});
+
+function goToSeckill() {
+  router.push("/seckill");
+}
+
+function countDown(index) {
+  const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+  const currTime = new Date().getTime();
+  let actTime = 0;
+  const nowHour = new Date().getHours();
+  if (list.value[index].timeLine > nowHour) {
+    actStatus.value = 0;
+    actTime = zeroTime + list.value[index].timeLine * 3600 * 1000;
+  } else if (list.value[index].timeLine <= nowHour) {
+    actStatus.value = 1;
+    if (index === list.value.length - 1) {
+      actTime = zeroTime + 24 * 3600 * 1000;
+    } else {
+      actTime = zeroTime + list.value[index + 1].timeLine * 3600 * 1000;
+    }
+  }
+  currHour.value = list.value[currIndex.value].timeLine;
+  diffSeconds.value = Math.floor((actTime - currTime) / 1000);
+  interval.value = setInterval(() => {
+    diffSeconds.value--;
+  }, 1000);
+}
+
+function getListByDay() {
+  list.value = props.data?.options?.list || [];
+  if (!list.value.length) {
+    goodsList.value = [];
+    return;
+  }
+  goodsList.value = list.value[0]?.seckillGoodsList || [];
+  if (goodsList.value.length) {
+    countDown(currIndex.value);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .seckill {
diff --git a/buyer/src/components/indexDecorate/modelList/forYour.vue b/buyer/src/components/indexDecorate/modelList/forYour.vue
index 2a267a20f..90a468947 100644
--- a/buyer/src/components/indexDecorate/modelList/forYour.vue
+++ b/buyer/src/components/indexDecorate/modelList/forYour.vue
@@ -44,24 +44,19 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "forYour",
-  data() {
-    return {
-      current: "",
-    };
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
+<script setup>
+import { ref } from 'vue'
 
-  mounted() {},
-  methods: {},
-};
+defineOptions({ name: 'forYour' })
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const current = ref('')
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/goodsAndType.vue b/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
index 39e52dc95..da05f8324 100644
--- a/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
+++ b/buyer/src/components/indexDecorate/modelList/goodsAndType.vue
@@ -43,31 +43,28 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "goods",
-  props: {
-    paramData: {
-      type: Object,
-      default: () => ({}),
-    },
+<script setup>
+import { onMounted, ref } from "vue";
+
+defineOptions({ name: "goods" });
+
+const props = defineProps({
+  paramData: {
+    type: Object,
+    default: () => ({}),
   },
-  data() {
-    return {
-      current: "",
-    };
-  },
-  watch: {},
-  mounted() {
-    this.current = this.paramData.options.labels[0].___index;
-  },
-  methods: {
-    // 筛选出当前分类下的商品
-    handleClickLabel(val, index) {
-      this.current = index;
-    },
-  },
-};
+});
+
+const current = ref("");
+
+onMounted(() => {
+  current.value = props.paramData.options.labels[0].___index;
+});
+
+// 筛选出当前分类下的商品
+function handleClickLabel(val, index) {
+  current.value = index;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/mixModel.vue b/buyer/src/components/indexDecorate/modelList/mixModel.vue
index fbceec3e9..4e9fa7b79 100644
--- a/buyer/src/components/indexDecorate/modelList/mixModel.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixModel.vue
@@ -11,29 +11,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import left from './mixs/mix-goods'
 import right from './mixs/mix-brand'
-export default {
-  name: "mixModel",
-  data() {
-    return {}
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  components: {
-    left,
-    right
-  },
-  mounted() {
 
-  },
-  methods: {}
-}
+defineOptions({ name: "mixModel" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
index 4b22f401e..7ec6902ff 100644
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-brand.vue
@@ -25,19 +25,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ArrowRight } from "@element-plus/icons-vue";
 
-export default {
-  name: "mix-brand",
-  components: { ArrowRight },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+defineOptions({ name: "mix-brand" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
index 1f5c648cd..6a29b65da 100644
--- a/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
+++ b/buyer/src/components/indexDecorate/modelList/mixs/mix-goods.vue
@@ -29,16 +29,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "mix-goods",
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+<script setup>
+defineOptions({ name: "mix-goods" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue b/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
index 18ca17d60..b9a8e82b8 100644
--- a/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
+++ b/buyer/src/components/indexDecorate/modelList/oneRowThreeColumns.vue
@@ -11,22 +11,15 @@
     </div>
 </template>
 
-<script>
-export default {
-  name: "oneRowThreeColumns",
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
+<script setup>
+defineOptions({ name: "oneRowThreeColumns" });
 
-    };
-  },
-  methods: {}
-}
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue b/buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
index 32396414c..049a4a43a 100644
--- a/buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
+++ b/buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue
@@ -21,35 +21,32 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { openLink } from "@/utils/buyerLogin";
 
-export default {
-  name: "onlyGoodsList",
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      flag:false,
-      tabIndex:0,
-      current: 0,
-      showModal: false,
-      selected: {}, // 已选数据
-      picModelFlag: false,
-    };
-  },
-  mounted(){
+defineOptions({ name: "onlyGoodsList" });
 
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  methods: {
-    handleClick(val){
-      this.linkTo(val.url)
-    },
-  },
-};
+});
+
+const router = useRouter();
+
+const flag = ref(false);
+const tabIndex = ref(0);
+const current = ref(0);
+const showModal = ref(false);
+const selected = ref({}); // 已选数据
+const picModelFlag = ref(false);
+
+function handleClick(val) {
+  openLink(val.url, router);
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/invoiceModal/index.vue b/buyer/src/components/invoiceModal/index.vue
index 633b0ff8c..592117680 100644
--- a/buyer/src/components/invoiceModal/index.vue
+++ b/buyer/src/components/invoiceModal/index.vue
@@ -5,7 +5,7 @@
         <span>发票信息</span>
       </p></template>
       <div class="nav-content">
-        <el-form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" label-width="118px">
+        <el-form :model="invoiceForm" ref="formRef" label-position="left" :rules="formRules" label-width="118px">
           <el-form-item label="发票类型">
             <el-radio-group v-model="invoice" type="button" button-style="solid" @change="onInvoiceKindChange">
               <el-radio :label="1">电子普通发票</el-radio>
@@ -86,210 +86,209 @@
       </div></el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, nextTick, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { receiptSelect } from '@/api/cart.js';
 import { mobile, email } from '@/plugins/RegExp.js';
 
-export default {
-  name: 'invoiceModal',
-  emits: ['change'],
-  data () {
+defineOptions({ name: 'invoiceModal' });
+
+const props = defineProps(['invoiceData']);
+
+const emit = defineEmits(['change']);
+
+const route = useRoute();
+
+const invoice = ref(1); // 1 电子普通发票 2 增值税专用发票
+const invoiceAvailable = ref(false);
+const loading = ref(false);
+const invoiceForm = ref({
+  receiptTitle: '',
+  personalName: '',
+  companyName: '',
+  taxpayerId: '',
+  receiptContent: '商品明细',
+  receiptPhone: '',
+  receiptEmail: '',
+  companyAddress: '',
+  companyPhone: '',
+  bankName: '',
+  bankAccount: ''
+});
+const type = ref(1);
+
+const formRef = ref(null);
+
+const formRules = computed(() => {
+  const receiptPhoneRules = [
+    { required: true, message: '请填写收票人手机', trigger: 'blur' },
+    { pattern: mobile, message: '请填写正确的手机号码', trigger: 'blur' }
+  ];
+  // 收票人邮箱可选：仅校验格式；提示文案须与手机区分，避免误用「请填写收票人手机」
+  const receiptEmailRules = [
+    {
+      validator (rule, val, cb) {
+        const s = val != null ? String(val).trim() : '';
+        if (!s) {
+          cb();
+          return;
+        }
+        if (!email.test(s)) {
+          cb(new Error('请填写正确的收票人邮箱'));
+          return;
+        }
+        cb();
+      },
+      trigger: 'blur'
+    }
+  ];
+
+  if (invoice.value === 2) {
     return {
-      invoice: 1, // 1 电子普通发票 2 增值税专用发票
-      invoiceAvailable: false,
-      loading: false,
-      invoiceForm: {
-        receiptTitle: '',
-        personalName: '',
-        companyName: '',
-        taxpayerId: '',
-        receiptContent: '商品明细',
-        receiptPhone: '',
-        receiptEmail: '',
-        companyAddress: '',
-        companyPhone: '',
-        bankName: '',
-        bankAccount: ''
-      },
-      type: 1
+      companyName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
+      taxpayerId: [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }],
+      companyAddress: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
+      companyPhone: [{ required: true, message: '请填写单位电话', trigger: 'blur' }],
+      bankName: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
+      bankAccount: [{ required: true, message: '请填写银行账号', trigger: 'blur' }],
+      receiptPhone: receiptPhoneRules,
+      receiptEmail: receiptEmailRules
     };
-  },
-  props: ['invoiceData'],
-  computed: {
-    formRules () {
-      const receiptPhoneRules = [
-        { required: true, message: '请填写收票人手机', trigger: 'blur' },
-        { pattern: mobile, message: '请填写正确的手机号码', trigger: 'blur' }
-      ];
-      // 收票人邮箱可选：仅校验格式；提示文案须与手机区分，避免误用「请填写收票人手机」
-      const receiptEmailRules = [
-        {
-          validator (rule, val, cb) {
-            const s = val != null ? String(val).trim() : '';
-            if (!s) {
-              cb();
-              return;
-            }
-            if (!email.test(s)) {
-              cb(new Error('请填写正确的收票人邮箱'));
-              return;
-            }
-            cb();
-          },
-          trigger: 'blur'
-        }
-      ];
-
-      if (this.invoice === 2) {
-        return {
-          companyName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
-          taxpayerId: [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }],
-          companyAddress: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
-          companyPhone: [{ required: true, message: '请填写单位电话', trigger: 'blur' }],
-          bankName: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
-          bankAccount: [{ required: true, message: '请填写银行账号', trigger: 'blur' }],
-          receiptPhone: receiptPhoneRules,
-          receiptEmail: receiptEmailRules
-        };
-      }
-
-      const rules = {
-        receiptPhone: receiptPhoneRules,
-        receiptEmail: receiptEmailRules
-      };
-      if (this.type === 1) {
-        rules.personalName = [{ required: true, message: '请填写个人名称', trigger: 'blur' }];
-      } else {
-        rules.companyName = [{ required: true, message: '请填写单位名称', trigger: 'blur' }];
-        rules.taxpayerId = [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }];
-      }
-      return rules;
-    }
-  },
-  watch: {
-    invoiceData: {
-      handler (val) {
-        if (!val) return;
-        this.invoiceForm = { ...this.invoiceForm, ...val };
-        if (!this.invoiceForm.receiptPhone) this.invoiceForm.receiptPhone = '';
-        if (!this.invoiceForm.receiptEmail) this.invoiceForm.receiptEmail = '';
-        if (!this.invoiceForm.receiptContent) this.invoiceForm.receiptContent = '商品明细';
-        if (!this.invoiceForm.companyAddress) this.invoiceForm.companyAddress = '';
-        if (!this.invoiceForm.companyPhone) this.invoiceForm.companyPhone = '';
-        if (!this.invoiceForm.bankName) this.invoiceForm.bankName = '';
-        if (!this.invoiceForm.bankAccount) this.invoiceForm.bankAccount = '';
-        if (!this.invoiceForm.personalName) this.invoiceForm.personalName = '';
-        if (!this.invoiceForm.companyName) this.invoiceForm.companyName = '';
-
-        const rt = val.receiptType;
-        if (rt === 2 || rt === '2' || val.invoiceKind === 'VAT_SPECIAL') {
-          this.invoice = 2;
-          this.type = 2;
-        } else {
-          this.invoice = 1;
-          if (val.taxpayerId) this.type = 2;
-          else this.type = 1;
-        }
-        // 兼容后端 receiptTitle 存「个人/单位」，实际名称在 personalName/companyName；旧数据名称可能只在 receiptTitle
-        const titleAsName = (t) => (t && t !== '个人' && t !== '单位' ? t : '');
-        if (this.invoice === 2) {
-          this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
-        } else if (this.type === 2) {
-          this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
-          this.invoiceForm.personalName = val.personalName || '';
-        } else {
-          this.invoiceForm.personalName = val.personalName || titleAsName(val.receiptTitle) || '';
-          this.invoiceForm.companyName = val.companyName || '';
-        }
-        if (this.invoice === 1) {
-          this.invoiceForm.companyAddress = '';
-          this.invoiceForm.companyPhone = '';
-          this.invoiceForm.bankName = '';
-          this.invoiceForm.bankAccount = '';
-        }
-        if (this.invoice === 2) {
-          this.invoiceForm.personalName = '';
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  methods: {
-    onHeaderTypeChange (val) {
-      if (this.invoice === 1 && val === 1 && this.invoiceForm.personalName === '个人') {
-        this.invoiceForm.personalName = '';
-      }
-      this.$nextTick(() => {
-        if (this.$refs.form) this.$refs.form.clearValidate();
-      });
-    },
-    onInvoiceKindChange (val) {
-      this.type = val === 2 ? 2 : 1;
-      this.invoiceForm = {
-        receiptTitle: '',
-        personalName: '',
-        companyName: '',
-        taxpayerId: '',
-        receiptContent: '商品明细',
-        receiptPhone: '',
-        receiptEmail: '',
-        companyAddress: '',
-        companyPhone: '',
-        bankName: '',
-        bankAccount: ''
-      };
-      this.$nextTick(() => {
-        if (this.$refs.form) this.$refs.form.clearValidate();
-      });
-    },
-
-    async save () {
-      if (this.invoice === 2) {
-        this.invoiceForm.receiptContent = '商品明细';
-      }
-
-      return await new Promise(resolve => {
-        this.$refs.form.validate(valid => resolve(valid));
-      });
-    },
-
-    async submit () {
-      if (!await this.save()) return;
-      this.loading = true;
-      const raw = JSON.parse(JSON.stringify(this.invoiceForm));
-      if (this.invoice === 1) {
-        delete raw.companyAddress;
-        delete raw.companyPhone;
-        delete raw.bankName;
-        delete raw.bankAccount;
-        delete raw.invoiceAddress;
-        if (this.type === 1) {
-          delete raw.taxpayerId;
-        }
-      } else {
-        delete raw.personalName;
-      }
-      const isCompanyTitle = this.invoice === 2 || this.type === 2;
-      const titleName = isCompanyTitle
-        ? (raw.companyName != null ? String(raw.companyName).trim() : '')
-        : (raw.personalName != null ? String(raw.personalName).trim() : '');
-      const submit = {
-        way: this.$route.query.way,
-        ...raw,
-        receiptType: this.invoice,
-        receiptTitle: isCompanyTitle ? '单位' : '个人',
-        personalName: isCompanyTitle ? '' : titleName,
-        companyName: isCompanyTitle ? titleName : ''
-      };
-      let receipt = await receiptSelect(submit);
-      if (receipt.success) {
-        this.$emit('change', true);
-      }
-      this.loading = false;
-    }
   }
-};
+
+  const rules = {
+    receiptPhone: receiptPhoneRules,
+    receiptEmail: receiptEmailRules
+  };
+  if (type.value === 1) {
+    rules.personalName = [{ required: true, message: '请填写个人名称', trigger: 'blur' }];
+  } else {
+    rules.companyName = [{ required: true, message: '请填写单位名称', trigger: 'blur' }];
+    rules.taxpayerId = [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }];
+  }
+  return rules;
+});
+
+watch(() => props.invoiceData, (val) => {
+  if (!val) return;
+  invoiceForm.value = { ...invoiceForm.value, ...val };
+  if (!invoiceForm.value.receiptPhone) invoiceForm.value.receiptPhone = '';
+  if (!invoiceForm.value.receiptEmail) invoiceForm.value.receiptEmail = '';
+  if (!invoiceForm.value.receiptContent) invoiceForm.value.receiptContent = '商品明细';
+  if (!invoiceForm.value.companyAddress) invoiceForm.value.companyAddress = '';
+  if (!invoiceForm.value.companyPhone) invoiceForm.value.companyPhone = '';
+  if (!invoiceForm.value.bankName) invoiceForm.value.bankName = '';
+  if (!invoiceForm.value.bankAccount) invoiceForm.value.bankAccount = '';
+  if (!invoiceForm.value.personalName) invoiceForm.value.personalName = '';
+  if (!invoiceForm.value.companyName) invoiceForm.value.companyName = '';
+
+  const rt = val.receiptType;
+  if (rt === 2 || rt === '2' || val.invoiceKind === 'VAT_SPECIAL') {
+    invoice.value = 2;
+    type.value = 2;
+  } else {
+    invoice.value = 1;
+    if (val.taxpayerId) type.value = 2;
+    else type.value = 1;
+  }
+  // 兼容后端 receiptTitle 存「个人/单位」，实际名称在 personalName/companyName；旧数据名称可能只在 receiptTitle
+  const titleAsName = (t) => (t && t !== '个人' && t !== '单位' ? t : '');
+  if (invoice.value === 2) {
+    invoiceForm.value.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
+  } else if (type.value === 2) {
+    invoiceForm.value.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
+    invoiceForm.value.personalName = val.personalName || '';
+  } else {
+    invoiceForm.value.personalName = val.personalName || titleAsName(val.receiptTitle) || '';
+    invoiceForm.value.companyName = val.companyName || '';
+  }
+  if (invoice.value === 1) {
+    invoiceForm.value.companyAddress = '';
+    invoiceForm.value.companyPhone = '';
+    invoiceForm.value.bankName = '';
+    invoiceForm.value.bankAccount = '';
+  }
+  if (invoice.value === 2) {
+    invoiceForm.value.personalName = '';
+  }
+}, { deep: true, immediate: true });
+
+function onHeaderTypeChange (val) {
+  if (invoice.value === 1 && val === 1 && invoiceForm.value.personalName === '个人') {
+    invoiceForm.value.personalName = '';
+  }
+  nextTick(() => {
+    if (formRef.value) formRef.value.clearValidate();
+  });
+}
+
+function onInvoiceKindChange (val) {
+  type.value = val === 2 ? 2 : 1;
+  invoiceForm.value = {
+    receiptTitle: '',
+    personalName: '',
+    companyName: '',
+    taxpayerId: '',
+    receiptContent: '商品明细',
+    receiptPhone: '',
+    receiptEmail: '',
+    companyAddress: '',
+    companyPhone: '',
+    bankName: '',
+    bankAccount: ''
+  };
+  nextTick(() => {
+    if (formRef.value) formRef.value.clearValidate();
+  });
+}
+
+async function save () {
+  if (invoice.value === 2) {
+    invoiceForm.value.receiptContent = '商品明细';
+  }
+
+  return await new Promise(resolve => {
+    formRef.value.validate(valid => resolve(valid));
+  });
+}
+
+async function submit () {
+  if (!await save()) return;
+  loading.value = true;
+  const raw = JSON.parse(JSON.stringify(invoiceForm.value));
+  if (invoice.value === 1) {
+    delete raw.companyAddress;
+    delete raw.companyPhone;
+    delete raw.bankName;
+    delete raw.bankAccount;
+    delete raw.invoiceAddress;
+    if (type.value === 1) {
+      delete raw.taxpayerId;
+    }
+  } else {
+    delete raw.personalName;
+  }
+  const isCompanyTitle = invoice.value === 2 || type.value === 2;
+  const titleName = isCompanyTitle
+    ? (raw.companyName != null ? String(raw.companyName).trim() : '')
+    : (raw.personalName != null ? String(raw.personalName).trim() : '');
+  const submit = {
+    way: route.query.way,
+    ...raw,
+    receiptType: invoice.value,
+    receiptTitle: isCompanyTitle ? '单位' : '个人',
+    personalName: isCompanyTitle ? '' : titleName,
+    companyName: isCompanyTitle ? titleName : ''
+  };
+  let receipt = await receiptSelect(submit);
+  if (receipt.success) {
+    emit('change', true);
+  }
+  loading.value = false;
+}
+
+defineExpose({ invoiceAvailable });
 </script>
 <style lang="scss" scoped>
 .inv-type {
diff --git a/buyer/src/components/map/index.vue b/buyer/src/components/map/index.vue
index f8e5bdff3..d30f9f764 100644
--- a/buyer/src/components/map/index.vue
+++ b/buyer/src/components/map/index.vue
@@ -18,135 +18,132 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import { Message } from "@/utils/message";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { handleRegion } from "@/api/address.js";
 import config from "@/config/index";
 
-export default {
-  name: "map",
-  data() {
-    return {
-      config,
-      showMap: false, // 地图显隐
-      mapSearch: "", // 地图搜索
-      map: null, // 初始化地图
-      autoComplete: null, // 初始化搜索方法
-      geocoder: null, // 初始化地理、坐标转化
-      positionPicker: null, // 地图拖拽选点
-      tips: [], //搜索关键字列表
-      addrContent: {}, // 回显地址信息
-      loading: false, // 加载状态
+defineOptions({ name: "map" });
+
+const emit = defineEmits(["getAddress"]);
+
+const showMap = ref(false); // 地图显隐
+const mapSearch = ref(""); // 地图搜索
+let map = null; // 初始化地图
+let autoComplete = null; // 初始化搜索方法
+let geocoder = null; // 初始化地理、坐标转化
+let positionPicker = null; // 地图拖拽选点
+const tips = ref([]); //搜索关键字列表
+const addrContent = ref({}); // 回显地址信息
+const loading = ref(false); // 加载状态
+
+watch(mapSearch, function (val) {
+  searchOfMap(val);
+});
+
+function ok() {
+
+  if (addrContent.value && addrContent.value.regeocode) {
+    const params = {
+      cityCode: addrContent.value.regeocode.addressComponent.citycode,
+      townName: addrContent.value.regeocode.addressComponent.township,
     };
-  },
-  watch: {
-    mapSearch: function (val) {
-      this.searchOfMap(val);
-    },
-  },
-  methods: {
-    ok() {
+    handleRegion(params).then((res) => {
+      if (res.success) {
+        addrContent.value.addr = res.result.name.replace(/,/g, " ");
+        addrContent.value.addrId = res.result.id;
+        loading.value = false;
 
-      if (this.addrContent && this.addrContent.regeocode) {
-        const params = {
-          cityCode: this.addrContent.regeocode.addressComponent.citycode,
-          townName: this.addrContent.regeocode.addressComponent.township,
-        };
-        handleRegion(params).then((res) => {
-          if (res.success) {
-            this.addrContent.addr = res.result.name.replace(/,/g, " ");
-            this.addrContent.addrId = res.result.id;
-            this.loading = false;
-
-            this.$emit("getAddress", this.addrContent);
-          }
-        });
-      } else {
-        Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+        emit("getAddress", addrContent.value);
       }
+    });
+  } else {
+    Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+  }
 
+}
+
+function init() {
+  AMapLoader.load({
+    key: config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: [
+      "AMap.ToolBar",
+      "AMap.Autocomplete",
+      "AMap.PlaceSearch",
+      "AMap.Geolocation",
+      "AMap.Geocoder",
+    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    AMapUI: {
+      // 是否加载 AMapUI，缺省不加载
+      version: "1.1", // AMapUI 缺省 1.1
+      plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
     },
-    init() {
-      AMapLoader.load({
-        key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [
-          "AMap.ToolBar",
-          "AMap.Autocomplete",
-          "AMap.PlaceSearch",
-          "AMap.Geolocation",
-          "AMap.Geocoder",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
-        },
-      })
-        .then((AMap) => {
-          let that = this;
-          this.map = new AMap.Map("map-container", {
-            zoom: 12,
-          });
-          that.map.addControl(new AMap.ToolBar());
-          that.map.addControl(new AMap.Autocomplete());
-          that.map.addControl(new AMap.PlaceSearch());
-          that.map.addControl(new AMap.Geocoder());
-
-          // 实例化Autocomplete
-          let autoOptions = {
-            city: "全国",
-          };
-          that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
-          that.geocoder = new AMap.Geocoder(autoOptions);
-
-          that.positionPicker = new AMapUI.PositionPicker({
-            // 拖拽选点
-            mode: "dragMap",
-            map: that.map,
-          });
-          that.positionPicker.start();
-          /**
-           *
-           * 所有回显数据，都在positionResult里面
-           * 需要字段可以查找
-           *
-           */
-          that.positionPicker.on("success", function (positionResult) {
-            that.addrContent = positionResult;
-          });
-        })
-        .catch((e) => {
-          console.warn('地图组件加载失败', e);
-        });
-    },
-    searchOfMap(val) {
-      // 地图搜索
-      let that = this;
-      this.autoComplete.search(val, function (status, result) {
-        // 搜索成功时，result即是对应的匹配数据
-        if (status == "complete" && result.info == "OK") {
-          that.tips = result.tips;
-        } else {
-          that.tips = [];
-        }
+  })
+    .then((AMap) => {
+      map = new AMap.Map("map-container", {
+        zoom: 12,
       });
-    },
-    selectAddr(location) {
-      // 选择坐标
-      if (!location) {
-        Message.warning("请选择正确点位");
-        return false;
-      }
-      const lnglat = [location.lng, location.lat];
-      this.positionPicker.start(lnglat);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      map.addControl(new AMap.ToolBar());
+      map.addControl(new AMap.Autocomplete());
+      map.addControl(new AMap.PlaceSearch());
+      map.addControl(new AMap.Geocoder());
+
+      // 实例化Autocomplete
+      let autoOptions = {
+        city: "全国",
+      };
+      autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
+      geocoder = new AMap.Geocoder(autoOptions);
+
+      positionPicker = new AMapUI.PositionPicker({
+        // 拖拽选点
+        mode: "dragMap",
+        map: map,
+      });
+      positionPicker.start();
+      /**
+       *
+       * 所有回显数据，都在positionResult里面
+       * 需要字段可以查找
+       *
+       */
+      positionPicker.on("success", function (positionResult) {
+        addrContent.value = positionResult;
+      });
+    })
+    .catch((e) => {
+      console.warn('地图组件加载失败', e);
+    });
+}
+
+function searchOfMap(val) {
+  // 地图搜索
+  autoComplete.search(val, function (status, result) {
+    // 搜索成功时，result即是对应的匹配数据
+    if (status == "complete" && result.info == "OK") {
+      tips.value = result.tips;
+    } else {
+      tips.value = [];
+    }
+  });
+}
+
+function selectAddr(location) {
+  // 选择坐标
+  if (!location) {
+    Message.warning("请选择正确点位");
+    return false;
+  }
+  const lnglat = [location.lng, location.lat];
+  positionPicker.start(lnglat);
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 #map-container {
diff --git a/buyer/src/components/map/multiple-map.vue b/buyer/src/components/map/multiple-map.vue
index 178971d72..3a2d09514 100644
--- a/buyer/src/components/map/multiple-map.vue
+++ b/buyer/src/components/map/multiple-map.vue
@@ -26,93 +26,90 @@
     </div></el-dialog>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { Message } from "@/utils/message";
 import { aMapSwitch } from '@/config/index'
 import mapping from "@/components/map/index.vue";
 import * as API_Setup from "@/api/common.js";
-export default {
-  components: { mapping },
-  data() {
-    return {
-      aMapSwitch,
-      enableMap: false,
-      mapDefault: "select",
-      data: {
-        province: [], //省
-        city: [], //市
-        area: [], //区
-        street: [], //街道
-      },
-      chiosend: [],
 
-    };
-  },
-  mounted() {
+const emit = defineEmits(['callback'])
 
-    this.chiosend = new Array(4).fill("");
+const enableMap = ref(false)
+const mapDefault = ref("select")
+const data = reactive({
+  province: [], //省
+  city: [], //市
+  area: [], //区
+  street: [], //街道
+})
+const chiosend = ref([])
 
-  },
-  methods: {
-    open() {
-      this.enableMap = true
-      this.init({ id: 0 }, 'province');
-    },
-    changeMap(val) {
-      this.mapDefault = val
+onMounted(() => {
+  chiosend.value = new Array(4).fill("");
+})
 
+function open() {
+  enableMap.value = true
+  init({ id: 0 }, 'province');
+}
 
-    },
-    init(val, level = 'province', index) {
-      if (level == 0) {
-        // 说明选择到了街道，将街道id存入数组
-        this.chiosend.splice(3, 1, val);
+defineExpose({ open })
+
+function changeMap(val) {
+  mapDefault.value = val
+}
+
+function init(val, level = 'province', index) {
+  if (level == 0) {
+    // 说明选择到了街道，将街道id存入数组
+    chiosend.value.splice(3, 1, val);
+  }
+  else {
+    API_Setup.getRegion(val.id).then((res) => {
+      if (res.result.length && val.id !== 0) {
+        chiosend.value[index] = val
       }
-      else {
-        API_Setup.getRegion(val.id).then((res) => {
-          if (res.result.length && val.id !== 0) {
-            this.chiosend[index] = val
-          }
-          else if(!res.result.length){
-            this.chiosend[index] = val
-          }
-          this.data[level] = res.result;
-          if (level == 'city') {
-            this.data.area = []
-            this.data.street = []
-            this.chiosend.splice(1, 3, "","","");
-          }
-          if (level == 'area') {
-            this.data.street = []
-            this.chiosend.splice(2, 2, "","");
-          }
-          if (level == 'street') {
-            this.chiosend.splice(3, 1, "");
-          }
-        });
+      else if (!res.result.length) {
+        chiosend.value[index] = val
       }
-    },
-    getAddress(center) {
-      this.$emit('callback', {
-        type: this.mapDefault,
-        data: center
-      })
-      this.enableMap = false;
-    },
-    // 选择完成
-    finished() {
-      if(!this.chiosend[0]){
-        Message.error("请选择地址")
-        return
+      data[level] = res.result;
+      if (level == 'city') {
+        data.area = []
+        data.street = []
+        chiosend.value.splice(1, 3, "", "", "");
       }
-      const params = this.chiosend.filter((item) => item!=="" && item.value !== "");
-      this.enableMap = false;
-      this.$emit('callback', {
-        type: this.mapDefault,
-        data: params
-      })
-    },
-  },
+      if (level == 'area') {
+        data.street = []
+        chiosend.value.splice(2, 2, "", "");
+      }
+      if (level == 'street') {
+        chiosend.value.splice(3, 1, "");
+      }
+    });
+  }
+}
+
+function getAddress(center) {
+  emit('callback', {
+    type: mapDefault.value,
+    data: center
+  })
+  enableMap.value = false;
+}
+
+// 选择完成
+function finished() {
+  if (!chiosend.value[0]) {
+    Message.error("请选择地址")
+    return
+  }
+  const params = chiosend.value.filter((item) => item !== "" && item.value !== "");
+  enableMap.value = false;
+  emit('callback', {
+    type: mapDefault.value,
+    data: params
+  })
 }
 </script>
 
diff --git a/buyer/src/components/map/region.vue b/buyer/src/components/map/region.vue
index 047fe39aa..71ebc37dd 100644
--- a/buyer/src/components/map/region.vue
+++ b/buyer/src/components/map/region.vue
@@ -9,143 +9,36 @@
     ></el-cascader>
   </div>
 </template>
-<script>
-import {getRegion} from '@/api/common.js';
-export default {
-  data () {
-    return {
-      data: [], // 地区数据
-      addr: [] // 已选数据
-    };
-  },
-  props: ['addressId'],
-  mounted () {},
-  methods: {
-    change (val, selectedData) { // 选择地区
-      /**
-       * @returns [regionId,region]
-       */
-      this.$emit('selected', [
-        val,
-        selectedData[selectedData.length - 1].__label.split('/')
-      ]);
-    },
-    loadData (item, callback) { // 加载数据
-      item.loading = true;
-      getRegion(item.value).then((res) => {
-        if (res.result.length <= 0) {
-          item.loading = false;
-        } else {
-          res.result.forEach((child) => {
-            item.loading = false;
+<script setup>
+import { ref, watch } from 'vue';
+import { getRegion } from '@/api/common.js';
 
-            let data = {
-              value: child.id,
-              label: child.name,
-              loading: false,
-              children: []
-            };
+const props = defineProps(['addressId']);
+const emit = defineEmits(['selected']);
 
-            if (child.level === 'street' || item.label === '香港特别行政区') {
-              item.children.push({
-                value: child.id,
-                label: child.name
-              });
-            } else {
-              item.children.push(data);
-            }
-          });
-          callback();
-        }
-      });
-    },
-    async init () { // 初始化地图数据
-      let data = await getRegion(0);
-      let arr = [];
-      data.result.forEach((item) => {
-        let obj;
-        // 台湾省做处理
-        if (item.name === '台湾省') {
-          obj = {
-            value: item.id,
-            label: item.name
-          };
-        } else {
-          obj = {
-            value: item.id,
-            label: item.name,
-            loading: false,
-            children: []
-          };
-        }
-        arr.push(obj);
-      });
-      this.data = arr;
-      console.warn('init');
-    },
-    async reviewData () {
-      // 数据回显
-      let addr = JSON.parse(JSON.stringify(this.addressId.split(',')));
-      let length = addr.length;
-      let data = await getRegion(0);
-      let arr0 = [];
-      let arr1 = [];
-      let arr2 = [];
-      // 第一级数据
-      data.result.forEach((item) => {
-        let obj;
-        // 台湾省做处理
-        if (item.name === '台湾省') {
-          obj = {
-            value: item.id,
-            label: item.name
-          };
-        } else {
-          obj = {
-            value: item.id,
-            label: item.name,
-            loading: false,
-            children: []
-          };
-        }
-        arr0.push(obj);
-      });
-      // 根据选择的数据来加载数据列表
-      if (length > 0) {
-        let children = await getRegion(addr[0]);
-        children = this.handleData(children.result);
-        arr0.forEach((e) => {
-          if (e.value === addr[0]) {
-            e.children = arr1 = children;
-          }
-        });
-      }
-      if (length > 1) {
-        let children = await getRegion(addr[1]);
-        children = this.handleData(children.result);
-        arr1.forEach((e) => {
-          if (e.value === addr[1]) {
-            e.children = arr2 = children;
-          }
-        });
-      }
-      if (length > 2) {
-        let children = await getRegion(addr[2]);
-        children = this.handleData(children.result);
-        arr2.forEach((e) => {
-          if (e.value === addr[2]) {
-            e.children = children;
-          }
-        });
-      }
-      this.data = arr0;
-      this.addr = addr;
-    },
-    handleData (data) {
-      // 处理接口数据
-      let item = [];
-      data.forEach((child) => {
-        let obj = {
+const data = ref([]); // 地区数据
+const addr = ref([]); // 已选数据
+
+function change (val, selectedData) { // 选择地区
+  /**
+   * @returns [regionId,region]
+   */
+  emit('selected', [
+    val,
+    selectedData[selectedData.length - 1].__label.split('/')
+  ]);
+}
+
+function loadData (item, callback) { // 加载数据
+  item.loading = true;
+  getRegion(item.value).then((res) => {
+    if (res.result.length <= 0) {
+      item.loading = false;
+    } else {
+      res.result.forEach((child) => {
+        item.loading = false;
+
+        let data = {
           value: child.id,
           label: child.name,
           loading: false,
@@ -153,30 +46,133 @@ export default {
         };
 
         if (child.level === 'street' || item.label === '香港特别行政区') {
-          item.push({
+          item.children.push({
             value: child.id,
             label: child.name
           });
         } else {
-          item.push(obj);
+          item.children.push(data);
         }
       });
-      return item;
+      callback();
     }
-  },
-  watch: {
-    addressId: {
-      handler: function (v) {
-        if (v) {
-          this.reviewData();
-        } else {
-          this.init();
-        }
-      },
-      immediate: true
+  });
+}
+
+async function init () { // 初始化地图数据
+  let res = await getRegion(0);
+  let arr = [];
+  res.result.forEach((item) => {
+    let obj;
+    // 台湾省做处理
+    if (item.name === '台湾省') {
+      obj = {
+        value: item.id,
+        label: item.name
+      };
+    } else {
+      obj = {
+        value: item.id,
+        label: item.name,
+        loading: false,
+        children: []
+      };
     }
+    arr.push(obj);
+  });
+  data.value = arr;
+  console.warn('init');
+}
+
+async function reviewData () {
+  // 数据回显
+  let addrArr = JSON.parse(JSON.stringify(props.addressId.split(',')));
+  let length = addrArr.length;
+  let res = await getRegion(0);
+  let arr0 = [];
+  let arr1 = [];
+  let arr2 = [];
+  // 第一级数据
+  res.result.forEach((item) => {
+    let obj;
+    // 台湾省做处理
+    if (item.name === '台湾省') {
+      obj = {
+        value: item.id,
+        label: item.name
+      };
+    } else {
+      obj = {
+        value: item.id,
+        label: item.name,
+        loading: false,
+        children: []
+      };
+    }
+    arr0.push(obj);
+  });
+  // 根据选择的数据来加载数据列表
+  if (length > 0) {
+    let children = await getRegion(addrArr[0]);
+    children = handleData(children.result);
+    arr0.forEach((e) => {
+      if (e.value === addrArr[0]) {
+        e.children = arr1 = children;
+      }
+    });
   }
-};
+  if (length > 1) {
+    let children = await getRegion(addrArr[1]);
+    children = handleData(children.result);
+    arr1.forEach((e) => {
+      if (e.value === addrArr[1]) {
+        e.children = arr2 = children;
+      }
+    });
+  }
+  if (length > 2) {
+    let children = await getRegion(addrArr[2]);
+    children = handleData(children.result);
+    arr2.forEach((e) => {
+      if (e.value === addrArr[2]) {
+        e.children = children;
+      }
+    });
+  }
+  data.value = arr0;
+  addr.value = addrArr;
+}
+
+function handleData (data) {
+  // 处理接口数据
+  let item = [];
+  data.forEach((child) => {
+    let obj = {
+      value: child.id,
+      label: child.name,
+      loading: false,
+      children: []
+    };
+
+    if (child.level === 'street' || item.label === '香港特别行政区') {
+      item.push({
+        value: child.id,
+        label: child.name
+      });
+    } else {
+      item.push(obj);
+    }
+  });
+  return item;
+}
+
+watch(() => props.addressId, (v) => {
+  if (v) {
+    reviewData();
+  } else {
+    init();
+  }
+}, { immediate: true });
 </script>
 <style scoped lang="scss">
 </style>
diff --git a/buyer/src/components/mixes/talkIm.vue b/buyer/src/components/mixes/talkIm.vue
deleted file mode 100644
index f15a3939d..000000000
--- a/buyer/src/components/mixes/talkIm.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-import { Modal } from "@/utils/message";
-import { getIMDetail } from "@/api/common";
-import Storage from "@/plugins/storage";
-import { getMemberMsg } from "@/api/login";
-export default {
-  data() {
-    return {
-      Storage,
-      IMLink: "",
-    };
-  },
-  methods: {
-    promptLogin() {
-      Modal.confirm({
-        title: "温馨提示",
-        content: "请登录后执行此操作",
-        okText: "立即登录",
-        cancelText: "取消",
-        onOk: () => {
-          this.$router.push({
-            path: "/login",
-            query: {
-              rePath: this.$route.path,
-              query: JSON.stringify(this.$route.query || {}),
-            },
-          });
-        },
-      });
-    },
-    // 跳转im客服
-    async IMService(id, goodsId, skuId) {
-      if (!Storage.getItem("accessToken")) {
-        this.promptLogin();
-        return;
-      }
-
-      try {
-        await this.getIMDetailMethods();
-        const userInfo = await getMemberMsg();
-        if (!userInfo.success) {
-          this.promptLogin();
-          return;
-        }
-
-        const accessToken = Storage.getItem("accessToken");
-        const storeId = id || this.storeMsg?.storeId;
-        const baseUrl = `${this.IMLink}?token=${accessToken}&id=${storeId}`;
-
-        if (goodsId && skuId) {
-          window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
-        } else {
-          window.open(baseUrl);
-        }
-      } catch {
-        // token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
-        if (!Storage.getItem("accessToken")) {
-          this.promptLogin();
-        }
-      }
-    },
-    // 获取im信息
-    async getIMDetailMethods() {
-      let res = await getIMDetail();
-      if (res.success) {
-        this.IMLink = res.result;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/buyer/src/components/nav/CateNav.vue b/buyer/src/components/nav/CateNav.vue
index aacecec32..7f82bb167 100644
--- a/buyer/src/components/nav/CateNav.vue
+++ b/buyer/src/components/nav/CateNav.vue
@@ -90,138 +90,143 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getCategory } from "@/api/goods";
 import storage from "@/plugins/storage.js";
 import { ArrowRight } from "@element-plus/icons-vue";
-export default {
-  components: { ArrowRight },
-  name: "GoodsListNav",
-  props: {
-    showAlways: {
-      // 总是显示下拉分类
-      default: false,
-      type: Boolean,
-    },
-    showNavBar: {
-      // 显示全部商品分类右侧导航条
-      default: true,
-      type: Boolean,
-    },
-    hover: {
-      default: false,
-      type: Boolean,
-    },
-    large: {
-      // 是否更高的高度
-      default: false,
-      type: Boolean,
-    },
-    opacity: {
-      // 是否背景透明
-      default: false,
-      type: Boolean,
-    },
-    useClass:{
-      type:null,
-      default:''
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "GoodsListNav" });
+
+const props = defineProps({
+  showAlways: {
+    // 总是显示下拉分类
+    default: false,
+    type: Boolean,
+  },
+  showNavBar: {
+    // 显示全部商品分类右侧导航条
+    default: true,
+    type: Boolean,
+  },
+  hover: {
+    default: false,
+    type: Boolean,
+  },
+  large: {
+    // 是否更高的高度
+    default: false,
+    type: Boolean,
+  },
+  opacity: {
+    // 是否背景透明
+    default: false,
+    type: Boolean,
+  },
+  useClass: {
+    type: null,
+    default: '',
+  },
+});
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const panel = ref(false); // 二级分类展示
+const panelIndex = ref(-1);
+const panelData = ref([]); // 二级分类数据
+const showFirstList = ref(false); // 始终展示一级列表
+const cateList = ref([]); // 商品分类
+
+// 导航列表
+const navList = computed(() => {
+  if (storage.getItem("navList")) {
+    return JSON.parse(storage.getItem("navList"));
+  }
+  return { list: [] };
+});
+
+function showFirstLists() {
+  showFirstList.value = true;
+  if (
+    localStorage.getItem("category") &&
+    localStorage.getItem("category_expiration_time")
+  ) {
+    // this.getCate();
+    // 如果缓存过期，则获取最新的信息
+    if (new Date() > localStorage.getItem("category_expiration_time")) {
+      getCate();
+      return;
     }
-  },
-  data() {
-    return {
-      panel: false, // 二级分类展示
-      panelIndex: -1,
-      panelData: [], // 二级分类数据
-      showFirstList: false, // 始终展示一级列表
-      cateList: [], // 商品分类
-    };
-  },
-  computed: {
-    navList() {
-      // 导航列表
-      if (storage.getItem("navList")) {
-        return JSON.parse(storage.getItem("navList"));
-      }
-      return { list: [] };
-    },
-  },
-  methods: {
-    showFirstLists(){
-      this.showFirstList = true;
-      if(
-      localStorage.getItem("category") &&
-      localStorage.getItem("category_expiration_time")
-    ) {
-      // this.getCate();
-      // 如果缓存过期，则获取最新的信息
-      if (new Date() > localStorage.getItem("category_expiration_time")) {
-        this.getCate();
-        return;
-      }
-      this.cateList = JSON.parse(localStorage.getItem("category"));
-      // Message.info(cateList)
-      }
-    },
-    getCate() {
-      // 获取分类数据
-      if (this.hover) return false;
-      getCategory(0).then((res) => {
-        if (res.success) {
-          this.cateList = res.result;
-          this.$store.commit("SET_CATEGORY", res.result);
-          // 过期时间
-          var expirationTime = new Date().setHours(new Date().getHours() + 1);
-          // 存放过期时间
-          localStorage.setItem("category_expiration_time", expirationTime);
-          // 存放分类信息
-          localStorage.setItem("category", JSON.stringify(res.result));
-        }
-      }).catch((err) => {
-        console.warn('获取分类失败', err);
-      });
-    },
-    showDetail(index) {
-      // 展示全部分类
-      this.panel = true;
-      this.panelIndex = index;
-      this.panelData = this.cateList[index].children;
-    },
-    closePanel() {
-      this.showFirstList = false;
-      this.panel = false;
-      this.panelIndex = -1;
-    },
-    goGoodsList(id, secondId, firstId) {
-      // 分类共有三级，传全部分类过去
-      const arr = [firstId, secondId, id];
-      if (!arr[1]) {
-        arr.splice(0, 2);
-      }
-      if (!arr[0]) {
-        arr.shift();
-      }
-      this.$router.push({
-        path: "/goodsList",
-        query: { categoryId: arr.toString() },
-      });
-    },
-  },
-  mounted() {
-    if (
-      localStorage.getItem("category") &&
-      localStorage.getItem("category_expiration_time")
-    ) {
-      // 如果缓存过期，则获取最新的信息
-      if (new Date() > localStorage.getItem("category_expiration_time")) {
-        this.getCate();
-        return;
-      }
-      this.cateList = JSON.parse(localStorage.getItem("category"));
-    } else {
-      this.getCate();
+    cateList.value = JSON.parse(localStorage.getItem("category"));
+    // Message.info(cateList)
+  }
+}
+
+function getCate() {
+  // 获取分类数据
+  if (props.hover) return false;
+  getCategory(0).then((res) => {
+    if (res.success) {
+      cateList.value = res.result;
+      appStore.setCategory(res.result);
+      // 过期时间
+      var expirationTime = new Date().setHours(new Date().getHours() + 1);
+      // 存放过期时间
+      localStorage.setItem("category_expiration_time", expirationTime);
+      // 存放分类信息
+      localStorage.setItem("category", JSON.stringify(res.result));
     }
-  },
-};
+  }).catch((err) => {
+    console.warn('获取分类失败', err);
+  });
+}
+
+function showDetail(index) {
+  // 展示全部分类
+  panel.value = true;
+  panelIndex.value = index;
+  panelData.value = cateList.value[index].children;
+}
+
+function closePanel() {
+  showFirstList.value = false;
+  panel.value = false;
+  panelIndex.value = -1;
+}
+
+function goGoodsList(id, secondId, firstId) {
+  // 分类共有三级，传全部分类过去
+  const arr = [firstId, secondId, id];
+  if (!arr[1]) {
+    arr.splice(0, 2);
+  }
+  if (!arr[0]) {
+    arr.shift();
+  }
+  router.push({
+    path: "/goodsList",
+    query: { categoryId: arr.toString() },
+  });
+}
+
+onMounted(() => {
+  if (
+    localStorage.getItem("category") &&
+    localStorage.getItem("category_expiration_time")
+  ) {
+    // 如果缓存过期，则获取最新的信息
+    if (new Date() > localStorage.getItem("category_expiration_time")) {
+      getCate();
+      return;
+    }
+    cateList.value = JSON.parse(localStorage.getItem("category"));
+  } else {
+    getCate();
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/nav/GoodsClassNav.vue b/buyer/src/components/nav/GoodsClassNav.vue
index c8db89564..45bb22a1b 100644
--- a/buyer/src/components/nav/GoodsClassNav.vue
+++ b/buyer/src/components/nav/GoodsClassNav.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="item-class-show">
+  <div class="item-class-show" ref="rootEl">
     <div class="head-bar">
       <!-- 有商品分类展示商品分类 -->
       <template v-if="$route.query.categoryId">
@@ -116,246 +116,253 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { ArrowDown, ArrowRight, ArrowUp, Close } from '@element-plus/icons-vue';
 import * as APIGoods from '@/api/goods';
-export default {
-  components: { ArrowDown, ArrowRight, ArrowUp, Close },
-  name: 'GoodsClassNav',
-  data () {
-    return {
-      tabBar: {
-        name: '',
-        children: [],
-        first: null,
-        second: null
-      },
-      showTagCount: 5, // 展示的搜索项数量
-      tagsContent: [
-        // 标签
-        {
-          key: '品牌',
-          more: false,
-          show: true,
-          values: []
-        }
-      ],
-      selectedItem: [], // 已选分类集合 顶部展示
-      brandIds: [], // 品牌id合集
-      params: {}, // 请求参数
-      rowOverflow: {} // 一行排不下时才显示更多
-    };
-  },
-  computed: {
-    cateList () { // 商品分类
-      return this.$store.state.category || []
-    }
-  },
-  watch: {
-    selectedItem: {
-      // 监听已选条件，来调用列表接口
-      handler (val) {
-        let classification = [];
-        this.params.brandId = ''
-        this.params.prop = ''
-        val.forEach((item) => {
-          if (item.type === '品牌') {
-            this.params.brandId = this.brandIds.join('@');
-          } else {
-            const nameArr = item.name.split('、');
-            nameArr.forEach((name) => {
-              classification.push(item.type + '_' + name);
-            });
-          }
-        });
-        this.params.prop = classification.join('@');
-        this.getFilterList(this.params);
-        this.$emit('getParams', this.params);
-      },
-      deep: true
-    },
-    '$route': { // 监听路由
-      handler (val, oVal) {
-        if (this.$route.query.categoryId) {
-          let cateId = this.$route.query.categoryId.split(',')
-          Object.assign(this.params, this.$route.query)
-          this.params.categoryId = cateId[cateId.length - 1]
-        } else {
-          Object.assign(this.params, this.$route.query)
-        }
-        this.getFilterList(this.params)
-        this.getNav()
-      },
-      deep: true
-    }
-  },
-  methods: {
-    getNav () { // 获取商品分类，分类下展示
-      if (!this.$route.query.categoryId) return
-      if (!this.cateList.length) { // 商品分类存储在localstorage，接口未调用成功前再次刷新数据
-        setTimeout(() => {
-          this.getNav()
-        }, 500)
-        return
-      }
-      const arr = this.$route.query.categoryId.split(',')
-      const source = this.cateList.find((e) => e.id === arr[0])
-      if (!source) return
-      const tabBar = {
-        id: source.id,
-        name: source.name,
-        parentId: source.parentId,
-        children: source.children || [],
-        first: null,
-        second: null,
-      }
-      if (arr.length > 1) {
-        tabBar.first = tabBar.children.find((e) => e.id === arr[1]) || null
-      }
-      if (arr.length > 2 && tabBar.first && tabBar.first.children) {
-        tabBar.second = tabBar.first.children.find((e) => e.id === arr[2]) || null
-      }
-      this.tabBar = tabBar
-    },
-    cateClick (item, index) { // 点选分类
-      switch (index) {
-        case 1:
-          this.$router.push({
-            path: '/goodsList',
-            query: {categoryId: item.id}
-          })
-          break;
-        case 2:
-          this.$router.push({
-            path: '/goodsList',
-            query: {categoryId: [item.parentId, item.id].toString()}
-          })
-          break;
-        case 3:
-          this.$router.push({
-            path: '/goodsList',
-            query: {categoryId: [this.tabBar.id, item.parentId, item.id].toString()}
-          })
-          break;
-      }
-    },
-    isGroupSelected (index) {
-      const group = this.tagsContent[index];
-      if (!group) return false;
-      return this.selectedItem.some((selected) => selected.type === group.key);
-    },
-    selectAll (index) {
-      const group = this.tagsContent[index];
-      if (!group) return;
-      const selectedIndex = this.selectedItem.findIndex((selected) => selected.type === group.key);
-      if (selectedIndex === -1) return;
-      this.cancelSelected(this.selectedItem[selectedIndex], selectedIndex);
-    },
-    selectBrand (item, index) {
-      const type = this.tagsContent[index].key;
-      if (this.selectedItem.some((selected) => selected.type === type)) {
-        return;
-      }
-      this.selectedItem.push({
-        type,
-        name: item
-      });
-      this.tagsContent[index].show = false;
-      if (index === 0) {
-        this.appendBrandIdsByNames([item]);
-      }
-    },
+import { useAppStore } from '@/stores/app';
 
-    cancelSelected (item, index) {
-      // 顶部栏 取消已选中的项
-      this.selectedItem.splice(index, 1);
+defineOptions({ name: 'GoodsClassNav' });
 
-      this.tagsContent.forEach((tag, index) => {
-        if (tag.key === item.type) {
-          tag.show = true;
-          tag.more = false;
-        }
-      });
-      if (item.type === '品牌') {
-        this.brandIds = [];
-      }
-    },
-    moreBrand (index) {
-      // 更多按钮
-      const flag = !this.tagsContent[index].more
-      this.tagsContent[index]['more'] = flag
-      this.$nextTick(() => this.measureRows())
-    },
-    measureRows () {
-      if (!this.$el) return
-      const next = {}
-      const brand = this.$el.querySelector('.brand ul')
-      if (brand && brand.offsetParent) {
-        next[0] = !!(this.tagsContent[0] && this.tagsContent[0].more) || brand.scrollHeight > brand.clientHeight + 1
-      }
-      this.$el.querySelectorAll('.other .list').forEach((list) => {
-        if (!list.offsetParent) return
-        const index = Number(list.dataset.index)
-        const tag = this.tagsContent[index]
-        next[index] = !!(tag && tag.more) || list.scrollHeight > list.clientHeight + 1
-      })
-      const prev = this.rowOverflow
-      const keys = new Set([...Object.keys(prev), ...Object.keys(next)])
-      const changed = [...keys].some((key) => !!prev[key] !== !!next[key])
-      if (changed) this.rowOverflow = next
-    },
-    appendBrandIdsByNames (names) {
-      const selectedNames = names || [];
-      const brands = this.tagsContent[0] && this.tagsContent[0].values ? this.tagsContent[0].values : [];
-      brands.forEach((val) => {
-        if (selectedNames.includes(val.name) && val.value && !this.brandIds.includes(val.value)) {
-          this.brandIds.push(val.value);
-        }
-      });
-    },
-    getFilterList (params) {
-      // 筛选、分类  列表
-      APIGoods.filterList(params).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          const hiddenKeys = new Set(this.selectedItem.map((item) => item.type));
-          this.tagsContent = [{
-            key: '品牌',
-            more: false,
-            show: !hiddenKeys.has('品牌'),
-            values: data.brands || []
-          }].concat(data.paramOptions || []);
-          this.tagsContent.forEach((item) => {
-            item.show = !hiddenKeys.has(item.key);
-            item.more = false;
-          });
-          this.$nextTick(() => this.measureRows())
-        }
-      });
-    },
-    // 展示更多搜索项
-    moreOptions () {
-      this.showTagCount = this.showTagCount === 5 ? 100 : 5
-      this.$nextTick(() => this.measureRows())
-    }
-  },
-  mounted () {
-    // 有分类id就根据id搜索
-    if (this.$route.query.categoryId) {
-      let cateId = this.$route.query.categoryId.split(',')
-      Object.assign(this.params, this.$route.query)
-      this.params.categoryId = cateId[cateId.length - 1]
+const emit = defineEmits(['getParams']);
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const tabBar = ref({
+  name: '',
+  children: [],
+  first: null,
+  second: null
+});
+const showTagCount = ref(5); // 展示的搜索项数量
+const tagsContent = ref([
+  // 标签
+  {
+    key: '品牌',
+    more: false,
+    show: true,
+    values: []
+  }
+]);
+const selectedItem = ref([]); // 已选分类集合 顶部展示
+const brandIds = ref([]); // 品牌id合集
+const params = reactive({}); // 请求参数
+const rowOverflow = ref({}); // 一行排不下时才显示更多
+const rootEl = ref(null); // 根元素，用于测量行溢出
+
+const cateList = computed(() => appStore.category || []); // 商品分类
+
+// 监听已选条件，来调用列表接口
+watch(selectedItem, (val) => {
+  let classification = [];
+  params.brandId = ''
+  params.prop = ''
+  val.forEach((item) => {
+    if (item.type === '品牌') {
+      params.brandId = brandIds.value.join('@');
     } else {
-      Object.assign(this.params, this.$route.query)
+      const nameArr = item.name.split('、');
+      nameArr.forEach((name) => {
+        classification.push(item.type + '_' + name);
+      });
     }
-    this.getFilterList(this.params);
-    this.getNav();
-    window.addEventListener('resize', this.measureRows)
-  },
-  beforeUnmount () {
-    window.removeEventListener('resize', this.measureRows)
+  });
+  params.prop = classification.join('@');
+  getFilterList(params);
+  emit('getParams', params);
+}, { deep: true });
+
+// 监听路由
+watch(() => route.query, () => {
+  if (route.query.categoryId) {
+    let cateId = route.query.categoryId.split(',')
+    Object.assign(params, route.query)
+    params.categoryId = cateId[cateId.length - 1]
+  } else {
+    Object.assign(params, route.query)
+  }
+  getFilterList(params)
+  getNav()
+}, { deep: true });
+
+function getNav () { // 获取商品分类，分类下展示
+  if (!route.query.categoryId) return
+  if (!cateList.value.length) { // 商品分类存储在localstorage，接口未调用成功前再次刷新数据
+    setTimeout(() => {
+      getNav()
+    }, 500)
+    return
+  }
+  const arr = route.query.categoryId.split(',')
+  const source = cateList.value.find((e) => e.id === arr[0])
+  if (!source) return
+  const newTabBar = {
+    id: source.id,
+    name: source.name,
+    parentId: source.parentId,
+    children: source.children || [],
+    first: null,
+    second: null,
+  }
+  if (arr.length > 1) {
+    newTabBar.first = newTabBar.children.find((e) => e.id === arr[1]) || null
+  }
+  if (arr.length > 2 && newTabBar.first && newTabBar.first.children) {
+    newTabBar.second = newTabBar.first.children.find((e) => e.id === arr[2]) || null
+  }
+  tabBar.value = newTabBar
+}
+
+function cateClick (item, index) { // 点选分类
+  switch (index) {
+    case 1:
+      router.push({
+        path: '/goodsList',
+        query: {categoryId: item.id}
+      })
+      break;
+    case 2:
+      router.push({
+        path: '/goodsList',
+        query: {categoryId: [item.parentId, item.id].toString()}
+      })
+      break;
+    case 3:
+      router.push({
+        path: '/goodsList',
+        query: {categoryId: [tabBar.value.id, item.parentId, item.id].toString()}
+      })
+      break;
   }
 }
+
+function isGroupSelected (index) {
+  const group = tagsContent.value[index];
+  if (!group) return false;
+  return selectedItem.value.some((selected) => selected.type === group.key);
+}
+
+function selectAll (index) {
+  const group = tagsContent.value[index];
+  if (!group) return;
+  const selectedIndex = selectedItem.value.findIndex((selected) => selected.type === group.key);
+  if (selectedIndex === -1) return;
+  cancelSelected(selectedItem.value[selectedIndex], selectedIndex);
+}
+
+function selectBrand (item, index) {
+  const type = tagsContent.value[index].key;
+  if (selectedItem.value.some((selected) => selected.type === type)) {
+    return;
+  }
+  selectedItem.value.push({
+    type,
+    name: item
+  });
+  tagsContent.value[index].show = false;
+  if (index === 0) {
+    appendBrandIdsByNames([item]);
+  }
+}
+
+function cancelSelected (item, index) {
+  // 顶部栏 取消已选中的项
+  selectedItem.value.splice(index, 1);
+
+  tagsContent.value.forEach((tag, index) => {
+    if (tag.key === item.type) {
+      tag.show = true;
+      tag.more = false;
+    }
+  });
+  if (item.type === '品牌') {
+    brandIds.value = [];
+  }
+}
+
+function moreBrand (index) {
+  // 更多按钮
+  const flag = !tagsContent.value[index].more
+  tagsContent.value[index]['more'] = flag
+  nextTick(() => measureRows())
+}
+
+function measureRows () {
+  if (!rootEl.value) return
+  const next = {}
+  const brand = rootEl.value.querySelector('.brand ul')
+  if (brand && brand.offsetParent) {
+    next[0] = !!(tagsContent.value[0] && tagsContent.value[0].more) || brand.scrollHeight > brand.clientHeight + 1
+  }
+  rootEl.value.querySelectorAll('.other .list').forEach((list) => {
+    if (!list.offsetParent) return
+    const index = Number(list.dataset.index)
+    const tag = tagsContent.value[index]
+    next[index] = !!(tag && tag.more) || list.scrollHeight > list.clientHeight + 1
+  })
+  const prev = rowOverflow.value
+  const keys = new Set([...Object.keys(prev), ...Object.keys(next)])
+  const changed = [...keys].some((key) => !!prev[key] !== !!next[key])
+  if (changed) rowOverflow.value = next
+}
+
+function appendBrandIdsByNames (names) {
+  const selectedNames = names || [];
+  const brands = tagsContent.value[0] && tagsContent.value[0].values ? tagsContent.value[0].values : [];
+  brands.forEach((val) => {
+    if (selectedNames.includes(val.name) && val.value && !brandIds.value.includes(val.value)) {
+      brandIds.value.push(val.value);
+    }
+  });
+}
+
+function getFilterList (params) {
+  // 筛选、分类  列表
+  APIGoods.filterList(params).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      const hiddenKeys = new Set(selectedItem.value.map((item) => item.type));
+      tagsContent.value = [{
+        key: '品牌',
+        more: false,
+        show: !hiddenKeys.has('品牌'),
+        values: data.brands || []
+      }].concat(data.paramOptions || []);
+      tagsContent.value.forEach((item) => {
+        item.show = !hiddenKeys.has(item.key);
+        item.more = false;
+      });
+      nextTick(() => measureRows())
+    }
+  });
+}
+
+// 展示更多搜索项
+function moreOptions () {
+  showTagCount.value = showTagCount.value === 5 ? 100 : 5
+  nextTick(() => measureRows())
+}
+
+onMounted(() => {
+  // 有分类id就根据id搜索
+  if (route.query.categoryId) {
+    let cateId = route.query.categoryId.split(',')
+    Object.assign(params, route.query)
+    params.categoryId = cateId[cateId.length - 1]
+  } else {
+    Object.assign(params, route.query)
+  }
+  getFilterList(params);
+  getNav();
+  window.addEventListener('resize', measureRows)
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', measureRows)
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/userCenter/Layout.vue b/buyer/src/components/userCenter/Layout.vue
index f6d6872a5..334d53b2b 100644
--- a/buyer/src/components/userCenter/Layout.vue
+++ b/buyer/src/components/userCenter/Layout.vue
@@ -27,49 +27,53 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "UserCenterLayout",
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-    activeTab: {
-      type: Number,
-      default: 0,
-    },
-    moreText: {
-      type: String,
-      default: "",
-    },
-    moreTo: {
-      type: [String, Object],
-      default: "",
-    },
+<script setup>
+import { computed, useSlots } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "UserCenterLayout" });
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
   },
-  emits: ["tab-change", "more"],
-  computed: {
-    showToolbar() {
-      return this.tabs.length || this.moreText || this.$slots.extra;
-    },
+  tabs: {
+    type: Array,
+    default: () => [],
   },
-  methods: {
-    handleMore() {
-      this.$emit("more");
-      if (!this.moreTo) return;
-      if (typeof this.moreTo === "string") {
-        this.$router.push(this.moreTo);
-      } else {
-        this.$router.push(this.moreTo);
-      }
-    },
+  activeTab: {
+    type: Number,
+    default: 0,
   },
-};
+  moreText: {
+    type: String,
+    default: "",
+  },
+  moreTo: {
+    type: [String, Object],
+    default: "",
+  },
+});
+
+const emit = defineEmits(["tab-change", "more"]);
+
+const router = useRouter();
+const slots = useSlots();
+
+const showToolbar = computed(() => {
+  return props.tabs.length || props.moreText || slots.extra;
+});
+
+function handleMore() {
+  emit("more");
+  if (!props.moreTo) return;
+  if (typeof props.moreTo === "string") {
+    router.push(props.moreTo);
+  } else {
+    router.push(props.moreTo);
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/components/verify/index.vue b/buyer/src/components/verify/index.vue
index 8938c4e85..7ccda3936 100644
--- a/buyer/src/components/verify/index.vue
+++ b/buyer/src/components/verify/index.vue
@@ -14,117 +14,112 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch } from 'vue';
 import { Message } from "@/utils/message";
 import { Refresh, ArrowRight } from '@element-plus/icons-vue';
 import { getVerifyImg, postVerifyImg } from './verify.js';
-export default {
-  components: { Refresh, ArrowRight },
-  props: {
-    // 传入数据，判断是登录、注册、修改密码
-    verifyType: {
-      defalut: 'LOGIN',
-      type: String
-    }
-  },
-  data () {
-    return {
-      show: false, // 验证码显隐
-      type: 'LOGIN', // 请求类型
-      data: { // 验证码数据
-        backImage: '',
-        slidingImage: '',
-        originalHeight: 150,
-        originalWidth: 300,
-        sliderWidth: 60,
-        sliderHeight: 60
-      },
-      distance: 0, // 拼图移动距离
-      flag: false, // 判断滑块是否按下
-      downX: 0, // 鼠标按下位置
-      bgColor: '#04ad11', // 滑动背景颜色
-      verifyText: '拖动滑块解锁' // 文字提示
-    };
-  },
-  methods: {
-    // 鼠标按下事件，开始拖动滑块
-    mouseDown (e) {
-      this.downX = e.clientX;
-      this.flag = true;
-    },
-    // 鼠标移动事件，计算距离
-    mouseMove (e) {
-      if (this.flag) {
-        let offset = e.clientX - this.downX;
 
-        if (offset > this.data.originalWidth - 43) {
-          this.distance = this.data.originalWidth - 43;
-        } else if (offset < 0) {
-          this.distance = 0;
-        } else {
-          this.distance = offset;
-        }
-      }
-    },
-    // 鼠标抬起事件，验证是否正确
-    mouseUp () {
-      if (!this.flag) return false;
-      this.flag = false;
-      let params = {
-        verificationEnums: this.type,
-        xPos: this.distance
-      };
-      postVerifyImg(params).then(res => {
-        if (res.success) {
-          if (res.result) {
-            this.bgColor = 'green';
-            this.verifyText = '解锁成功';
-            this.$emit('change', { status: true, distance: this.distance });
-          } else {
-            this.bgColor = 'red';
-            this.verifyText = '解锁失败';
-            let that = this;
-            setTimeout(() => {
-              that.init();
-            }, 1000);
-            this.$emit('change', { status: false, distance: this.distance });
-          }
-        } else {
-          this.init()
-        }
-        
-      }).catch(()=>{
-        this.init()
-      });
-    },
-    close () {
-      this.show = false;
-    },
-    init () { // 初始化数据
-      this.flag = false;
-      this.downX = 0;
-      this.distance = 0;
-      this.bgColor = '#04ad11';
-      this.verifyText = '拖动滑块解锁';
-      getVerifyImg(this.type).then(res => {
-        if (res.result) {
-          this.data = res.result;
-          this.show = true;
-        } else {
-          Message.warning('请求失败请重试！')
-        }
-      });
-    }
-  },
-  watch: {
-    verifyType: {
-      immediate: true,
-      handler: function (v) {
-        this.type = v;
-      }
+const props = defineProps({
+  // 传入数据，判断是登录、注册、修改密码
+  verifyType: {
+    defalut: 'LOGIN',
+    type: String
+  }
+});
+
+const emit = defineEmits(['change']);
+
+const show = ref(false); // 验证码显隐
+const type = ref('LOGIN'); // 请求类型
+const data = ref({ // 验证码数据
+  backImage: '',
+  slidingImage: '',
+  originalHeight: 150,
+  originalWidth: 300,
+  sliderWidth: 60,
+  sliderHeight: 60
+});
+const distance = ref(0); // 拼图移动距离
+const flag = ref(false); // 判断滑块是否按下
+const downX = ref(0); // 鼠标按下位置
+const bgColor = ref('#04ad11'); // 滑动背景颜色
+const verifyText = ref('拖动滑块解锁'); // 文字提示
+
+// 鼠标按下事件，开始拖动滑块
+function mouseDown (e) {
+  downX.value = e.clientX;
+  flag.value = true;
+}
+// 鼠标移动事件，计算距离
+function mouseMove (e) {
+  if (flag.value) {
+    let offset = e.clientX - downX.value;
+
+    if (offset > data.value.originalWidth - 43) {
+      distance.value = data.value.originalWidth - 43;
+    } else if (offset < 0) {
+      distance.value = 0;
+    } else {
+      distance.value = offset;
     }
   }
-};
+}
+// 鼠标抬起事件，验证是否正确
+function mouseUp () {
+  if (!flag.value) return false;
+  flag.value = false;
+  let params = {
+    verificationEnums: type.value,
+    xPos: distance.value
+  };
+  postVerifyImg(params).then(res => {
+    if (res.success) {
+      if (res.result) {
+        bgColor.value = 'green';
+        verifyText.value = '解锁成功';
+        emit('change', { status: true, distance: distance.value });
+      } else {
+        bgColor.value = 'red';
+        verifyText.value = '解锁失败';
+        setTimeout(() => {
+          init();
+        }, 1000);
+        emit('change', { status: false, distance: distance.value });
+      }
+    } else {
+      init()
+    }
+
+  }).catch(()=>{
+    init()
+  });
+}
+function close () {
+  show.value = false;
+}
+function init () { // 初始化数据
+  flag.value = false;
+  downX.value = 0;
+  distance.value = 0;
+  bgColor.value = '#04ad11';
+  verifyText.value = '拖动滑块解锁';
+  getVerifyImg(type.value).then(res => {
+    if (res.result) {
+      data.value = res.result;
+      show.value = true;
+    } else {
+      Message.warning('请求失败请重试！')
+    }
+  });
+}
+
+// 父组件通过 ref 调用 init/close
+defineExpose({ init, close });
+
+watch(() => props.verifyType, (v) => {
+  type.value = v;
+}, { immediate: true });
 </script>
 <style lang="scss" scoped>
 .verify-content{
diff --git a/buyer/src/main.js b/buyer/src/main.js
index 7c2842259..69999a271 100644
--- a/buyer/src/main.js
+++ b/buyer/src/main.js
@@ -1,10 +1,10 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import "core-js/stable";
 import "./assets/styles/global-layout.scss";
 import "./assets/styles/theme.less";
 import App from "./App.vue";
 import { router } from "./router/index";
-import store from "@/vuex/store";
 import { setupElementPlus } from "@/plugins/element";
 import { setupLegacyMessage } from "@/utils/message";
 import { registerGlobalComponents } from "@/components/global.js";
@@ -30,7 +30,7 @@ setupLegacyMessage(app);
 registerGlobalComponents(app);
 
 app.use(router);
-app.use(store);
+app.use(createPinia());
 
 app.config.globalProperties.$filters = filters;
 app.config.globalProperties.Cookies = storage;
diff --git a/buyer/src/pages/Cart.vue b/buyer/src/pages/Cart.vue
index 84ee1683e..3d0d97e34 100644
--- a/buyer/src/pages/Cart.vue
+++ b/buyer/src/pages/Cart.vue
@@ -4,7 +4,7 @@
     <!-- LOGO 搜索 -->
     <div class="width_1200 logo">
       <div>
-        <router-link to="/"><img :src="$store.state.logoImg" /></router-link>
+        <router-link to="/"><img :src="logoImg" /></router-link>
         <div>
           购物车(<span>{{ goodsTotal }}</span>)
         </div>
@@ -242,264 +242,266 @@
 </template>
 
 <script>
-import { Message, Modal } from "@/utils/message";
-import Promotion from "@/components/goodsDetail/Promotion";
-import * as APICart from "@/api/cart";
-import * as APIMember from "@/api/member";
-import { isECoupon } from "@/constants/goodsType";
 export default {
   name: "Cart",
   beforeRouteEnter(to, from, next) {
     window.scrollTo(0, 0);
     next();
   },
-  components: {
-    Promotion,
-  },
-  data() {
-    return {
-      couponAvailable: false, // 展示优惠券
-      stepIndex: 0, // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
-      goodsTotal: 0, // 商品数量
-      checkedNum: 0, // 选中数量
-      allChecked: false, // 全选
-      loading: false, // 加载状态
-      cartList: [], // 购物车列表
-      couponList: [], // 优惠券列表
-      priceDetailDTO: {}, // 价格明细
-      skuList: [], // sku列表
-    };
-  },
-  methods: {
-    // 跳转商品详情
-    goGoodsDetail(skuId, goodsId) {
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 跳转店铺首页
-    goShopPage(id) {
-      this.$router.push({
-        path: "/merchant",
-        query: { id },
-      });
-    },
-    // 同步购物车商品收藏状态
-    async syncCartCollectionStatus() {
-      if (!this.Cookies.getItem("userInfo") || !this.cartList.length) return;
-      const skuIds = [];
-      this.cartList.forEach((shop) => {
-        (shop.skuList || []).forEach((goods) => {
-          goods.isCollected = false;
-          if (goods.goodsSku && goods.goodsSku.id) {
-            skuIds.push(goods.goodsSku.id);
-          }
-        });
-      });
-      const uniqueSkuIds = [...new Set(skuIds)];
-      await Promise.all(
-        uniqueSkuIds.map(async (skuId) => {
-          try {
-            const res = await APIMember.isCollection("GOODS", skuId);
-            if (res.success && res.result) {
-              this.cartList.forEach((shop) => {
-                (shop.skuList || []).forEach((goods) => {
-                  if (goods.goodsSku && goods.goodsSku.id === skuId) {
-                    goods.isCollected = true;
-                  }
-                });
-              });
-            }
-          } catch (e) {
-            // 单个查询失败不影响其他商品
-          }
-        })
-      );
-      this.$forceUpdate();
-    },
-    // 收藏 / 取消收藏商品
-    handleCollect(goods) {
-      const skuId = goods.goodsSku && goods.goodsSku.id;
-      if (!skuId) return;
-      if (goods.isCollected) {
-        Modal.confirm({
-          title: "取消收藏",
-          content: "确定取消收藏该商品吗？",
-          onOk: () => {
-            return APIMember.cancelCollect("GOODS", skuId).then((res) => {
-              if (res.success) {
-                goods.isCollected = false;
-                Message.success("取消收藏成功");
-                this.$forceUpdate();
+};
+</script>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Message, Modal } from "@/utils/message";
+import Promotion from "@/components/goodsDetail/Promotion";
+import * as APICart from "@/api/cart";
+import * as APIMember from "@/api/member";
+import { isECoupon } from "@/constants/goodsType";
+import storage from "@/plugins/storage.js";
+import { useAppStore } from "@/stores/app";
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const logoImg = computed(() => appStore.logoImg);
+
+const couponAvailable = ref(false); // 展示优惠券
+const stepIndex = ref(0); // 当前处于哪一步，购物车==0，填写订单信息==1，成功提交订单==2
+const goodsTotal = ref(0); // 商品数量
+const checkedNum = ref(0); // 选中数量
+const allChecked = ref(false); // 全选
+const loading = ref(false); // 加载状态
+const cartList = ref([]); // 购物车列表
+const couponList = ref([]); // 优惠券列表
+const priceDetailDTO = ref({}); // 价格明细
+const skuList = ref([]); // sku列表
+
+// 跳转商品详情
+function goGoodsDetail(skuId, goodsId) {
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+// 跳转店铺首页
+function goShopPage(id) {
+  router.push({
+    path: "/merchant",
+    query: { id },
+  });
+}
+// 同步购物车商品收藏状态
+async function syncCartCollectionStatus() {
+  if (!storage.getItem("userInfo") || !cartList.value.length) return;
+  const skuIds = [];
+  cartList.value.forEach((shop) => {
+    (shop.skuList || []).forEach((goods) => {
+      goods.isCollected = false;
+      if (goods.goodsSku && goods.goodsSku.id) {
+        skuIds.push(goods.goodsSku.id);
+      }
+    });
+  });
+  const uniqueSkuIds = [...new Set(skuIds)];
+  await Promise.all(
+    uniqueSkuIds.map(async (skuId) => {
+      try {
+        const res = await APIMember.isCollection("GOODS", skuId);
+        if (res.success && res.result) {
+          cartList.value.forEach((shop) => {
+            (shop.skuList || []).forEach((goods) => {
+              if (goods.goodsSku && goods.goodsSku.id === skuId) {
+                goods.isCollected = true;
               }
             });
-          },
-          onCancel: () => {},
-        });
-        return;
-      }
-      Modal.confirm({
-        title: "收藏",
-        content: "商品收藏后可在个人中心我的收藏查看",
-        onOk: () => {
-          return APIMember.collectGoods("GOODS", skuId).then((res) => {
-            if (res.success) {
-              goods.isCollected = true;
-              Message.success("收藏商品成功");
-              this.$forceUpdate();
-            }
           });
-        },
-        onCancel: () => {},
-      });
-    },
-    // 删除商品
-    delGoods(id) {
-      const idArr = [];
-      if (!id) {
-        const list = this.cartList;
-        list.forEach((shop) => {
-          shop.skuList.forEach((goods) => {
-            if (goods.checked) {
-              idArr.push(goods.goodsSku.id);
-            }
-          });
-        });
-      } else {
-        idArr.push(id);
-      }
-      Modal.confirm({
-        title: "删除",
-        content: "确定要删除该商品吗？",
-        onOk: () => {
-          APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
-            if (res.success) {
-              Message.success("删除成功");
-              this.getCartList();
-            } else {
-              Message.error(res.message);
-            }
-          });
-        },
-      });
-    },
-    // 清空购物车
-    clearCart() {
-      Modal.confirm({
-        title: "提示",
-        content: "确定要清空购物车吗？清空后不可恢复",
-        onOk: () => {
-          APICart.clearCart().then((res) => {
-            if (res.success) {
-              Message.success("清空购物车成功");
-              this.getCartList();
-            } else {
-              Message.error(res.message);
-            }
-          });
-        },
-      });
-    },
-    // 跳转支付页面
-    pay() {
-      if (!this.checkedNum) {
-        Message.warning("请至少选择一件商品");
-        return;
-      }
-      const hasECoupon = this.cartList.some((shop) =>
-        (shop.skuList || []).some(
-          (goods) => goods.checked && isECoupon(goods.goodsSku && goods.goodsSku.goodsType)
-        )
-      );
-      if (hasECoupon) {
-        Message.warning("电子卡券请使用立即购买，不可通过购物车结算");
-        return;
-      }
-      this.$router.push({ path: "/pay", query: { way: "CART" } });
-    },
-    // 展示优惠券
-    showCoupon(storeId, index) {
-      this.couponAvailable = index;
-    },
-    // 设置购买数量
-    changeNum(val, id) {
-      if (val) {
-        APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
-          if (res.success) {
-            this.getCartList();
-          }
-        });
-      }
-    },
-    // 设置商品选中状态
-    async changeChecked(status, type, id) {
-      const check = status ? 1 : 0;
-      if (type === "all") {
-        // 全选
-        await APICart.setCheckedAll({ checked: check });
-      } else if (type === "shop") {
-        // 选中店铺所有商品
-        await APICart.setCheckedSeller({ checked: check, storeId: id });
-      } else {
-        // 单个商品
-        await APICart.setCheckedGoods({ checked: check, skuId: id });
-      }
-
-      this.getCartList();
-    },
-    // 领取优惠券
-    async receiveShopCoupon(item) {
-      let res = await APIMember.receiveCoupon(item.id);
-      if (res.success) {
-        item["disabled"] = true;
-        Message.success("领取成功");
-      } else {
-        Message.error(res.message);
-      }
-    },
-    // 购物车列表
-    async getCartList() {
-      this.loading = true;
-      try {
-        let res = await APICart.cartGoodsAll();
-        this.loading = false;
-        if (res.success) {
-          this.cartList = res.result.cartList;
-          this.priceDetailDTO = res.result.priceDetailDTO;
-          this.skuList = res.result.skuList;
-          this.checkedNum = 0;
-          let allChecked = true;
-          for (let k = 0; k < this.cartList.length; k++) {
-            let shop = this.cartList[k];
-            let list = await APIMember.couponList({ storeId: shop.storeId });
-            shop.couponList.push(...list.result.records);
-          }
-          for (let i = 0; i < this.skuList.length; i++) {
-            if (this.skuList[i].checked) {
-              this.checkedNum += this.skuList[i].num;
-            } else {
-              allChecked = false;
-            }
-          }
-          this.$forceUpdate();
-          this.allChecked = allChecked;
-          this.syncCartCollectionStatus();
         }
-      } catch (error) {
-        this.loading = false;
+      } catch (e) {
+        // 单个查询失败不影响其他商品
       }
-    },
-  },
-  mounted() {
-    this.getCartList();
-    APICart.cartCount().then((res) => {
-      // 购物车商品数量
-      if (res.success) this.goodsTotal = res.result;
+    })
+  );
+}
+// 收藏 / 取消收藏商品
+function handleCollect(goods) {
+  const skuId = goods.goodsSku && goods.goodsSku.id;
+  if (!skuId) return;
+  if (goods.isCollected) {
+    Modal.confirm({
+      title: "取消收藏",
+      content: "确定取消收藏该商品吗？",
+      onOk: () => {
+        return APIMember.cancelCollect("GOODS", skuId).then((res) => {
+          if (res.success) {
+            goods.isCollected = false;
+            Message.success("取消收藏成功");
+          }
+        });
+      },
+      onCancel: () => {},
     });
-  },
-};
+    return;
+  }
+  Modal.confirm({
+    title: "收藏",
+    content: "商品收藏后可在个人中心我的收藏查看",
+    onOk: () => {
+      return APIMember.collectGoods("GOODS", skuId).then((res) => {
+        if (res.success) {
+          goods.isCollected = true;
+          Message.success("收藏商品成功");
+        }
+      });
+    },
+    onCancel: () => {},
+  });
+}
+// 删除商品
+function delGoods(id) {
+  const idArr = [];
+  if (!id) {
+    const list = cartList.value;
+    list.forEach((shop) => {
+      shop.skuList.forEach((goods) => {
+        if (goods.checked) {
+          idArr.push(goods.goodsSku.id);
+        }
+      });
+    });
+  } else {
+    idArr.push(id);
+  }
+  Modal.confirm({
+    title: "删除",
+    content: "确定要删除该商品吗？",
+    onOk: () => {
+      APICart.delCartGoods({ skuIds: idArr.toString() }).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getCartList();
+        } else {
+          Message.error(res.message);
+        }
+      });
+    },
+  });
+}
+// 清空购物车
+function clearCart() {
+  Modal.confirm({
+    title: "提示",
+    content: "确定要清空购物车吗？清空后不可恢复",
+    onOk: () => {
+      APICart.clearCart().then((res) => {
+        if (res.success) {
+          Message.success("清空购物车成功");
+          getCartList();
+        } else {
+          Message.error(res.message);
+        }
+      });
+    },
+  });
+}
+// 跳转支付页面
+function pay() {
+  if (!checkedNum.value) {
+    Message.warning("请至少选择一件商品");
+    return;
+  }
+  const hasECoupon = cartList.value.some((shop) =>
+    (shop.skuList || []).some(
+      (goods) => goods.checked && isECoupon(goods.goodsSku && goods.goodsSku.goodsType)
+    )
+  );
+  if (hasECoupon) {
+    Message.warning("电子卡券请使用立即购买，不可通过购物车结算");
+    return;
+  }
+  router.push({ path: "/pay", query: { way: "CART" } });
+}
+// 展示优惠券
+function showCoupon(storeId, index) {
+  couponAvailable.value = index;
+}
+// 设置购买数量
+function changeNum(val, id) {
+  if (val) {
+    APICart.setCartGoodsNum({ skuId: id, num: val }).then((res) => {
+      if (res.success) {
+        getCartList();
+      }
+    });
+  }
+}
+// 设置商品选中状态
+async function changeChecked(status, type, id) {
+  const check = status ? 1 : 0;
+  if (type === "all") {
+    // 全选
+    await APICart.setCheckedAll({ checked: check });
+  } else if (type === "shop") {
+    // 选中店铺所有商品
+    await APICart.setCheckedSeller({ checked: check, storeId: id });
+  } else {
+    // 单个商品
+    await APICart.setCheckedGoods({ checked: check, skuId: id });
+  }
+
+  getCartList();
+}
+// 领取优惠券
+async function receiveShopCoupon(item) {
+  let res = await APIMember.receiveCoupon(item.id);
+  if (res.success) {
+    item["disabled"] = true;
+    Message.success("领取成功");
+  } else {
+    Message.error(res.message);
+  }
+}
+// 购物车列表
+async function getCartList() {
+  loading.value = true;
+  try {
+    let res = await APICart.cartGoodsAll();
+    loading.value = false;
+    if (res.success) {
+      cartList.value = res.result.cartList;
+      priceDetailDTO.value = res.result.priceDetailDTO;
+      skuList.value = res.result.skuList;
+      checkedNum.value = 0;
+      let allCheckedVal = true;
+      for (let k = 0; k < cartList.value.length; k++) {
+        let shop = cartList.value[k];
+        let list = await APIMember.couponList({ storeId: shop.storeId });
+        shop.couponList.push(...list.result.records);
+      }
+      for (let i = 0; i < skuList.value.length; i++) {
+        if (skuList.value[i].checked) {
+          checkedNum.value += skuList.value[i].num;
+        } else {
+          allCheckedVal = false;
+        }
+      }
+      allChecked.value = allCheckedVal;
+      syncCartCollectionStatus();
+    }
+  } catch (error) {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getCartList();
+  APICart.cartCount().then((res) => {
+    // 购物车商品数量
+    if (res.success) goodsTotal.value = res.result;
+  });
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/CouponCenter.vue b/buyer/src/pages/CouponCenter.vue
index 6180d1e6c..fa761a719 100644
--- a/buyer/src/pages/CouponCenter.vue
+++ b/buyer/src/pages/CouponCenter.vue
@@ -43,126 +43,126 @@
     <BaseFooter></BaseFooter>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Modal } from "@/utils/message";
 import storage from "@/plugins/storage";
 import { couponList, receiveCoupon } from "@/api/member.js";
-export default {
-  data() {
-    return {
-      list: [], // 优惠券列表
-      total: 0, // 优惠券总数
-      loading: false,
-      params: {
-        // 请求参数
-        getType: "FREE",
-        pageNumber: 1,
-        pageSize: 20,
-      },
-    };
-  },
-  methods: {
-    getList() {
-      if (this.loading) return;
-      this.loading = true;
-      couponList(this.params)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.list = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else {
-            this.list = [];
-            this.total = 0;
-          }
-        })
-        .catch(() => {
-          this.list = [];
-          this.total = 0;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    // 分页 改变页码
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.getList();
-    },
-    // 分页 改变每页数
-    changePageSize(val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList();
-    },
-    // 领取优惠券
-    receive(item) {
-      if (this.isFinished(item)) return;
-      const userInfo = storage.getItem("userInfo");
-      const isLogin = userInfo && JSON.parse(userInfo).username;
-      if (!isLogin) {
-        Modal.confirm({
-          title: "温馨提示",
-          content: "请登录后执行此操作",
-          okText: "立即登录",
-          cancelText: "取消",
-          onOk: () => {
-            this.$router.push({
-              path: "/login",
-              query: {
-                rePath: this.$route.path,
-                query: JSON.stringify(this.$route.query),
-              },
-            });
+
+const route = useRoute();
+const router = useRouter();
+
+const list = ref([]); // 优惠券列表
+const total = ref(0); // 优惠券总数
+const loading = ref(false);
+const params = reactive({
+  // 请求参数
+  getType: "FREE",
+  pageNumber: 1,
+  pageSize: 20,
+});
+
+function getList() {
+  if (loading.value) return;
+  loading.value = true;
+  couponList(params)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        list.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else {
+        list.value = [];
+        total.value = 0;
+      }
+    })
+    .catch(() => {
+      list.value = [];
+      total.value = 0;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+// 分页 改变页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getList();
+}
+// 分页 改变每页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
+}
+// 领取优惠券
+function receive(item) {
+  if (isFinished(item)) return;
+  const userInfo = storage.getItem("userInfo");
+  const isLogin = userInfo && JSON.parse(userInfo).username;
+  if (!isLogin) {
+    Modal.confirm({
+      title: "温馨提示",
+      content: "请登录后执行此操作",
+      okText: "立即登录",
+      cancelText: "取消",
+      onOk: () => {
+        router.push({
+          path: "/login",
+          query: {
+            rePath: route.path,
+            query: JSON.stringify(route.query),
           },
         });
-        return;
-      }
-      receiveCoupon(item.id)
-        .then((res) => {
-          if (!res || !res.success) return;
-          Modal.confirm({
-            title: "领取优惠券",
-            content: "优惠券领取成功，可到我的优惠券页面查看",
-            okText: "我的优惠券",
-            cancelText: "立即使用",
-            closable: true,
-            onOk: () => {
-              this.$router.push("/home/Coupons");
-            },
-            onCancel: () => {
-              this.$router.push({
-                path: "/goodsList",
-                query: { promotionsId: item.id, promotionType: "COUPON" },
-              });
-            },
+      },
+    });
+    return;
+  }
+  receiveCoupon(item.id)
+    .then((res) => {
+      if (!res || !res.success) return;
+      Modal.confirm({
+        title: "领取优惠券",
+        content: "优惠券领取成功，可到我的优惠券页面查看",
+        okText: "我的优惠券",
+        cancelText: "立即使用",
+        closable: true,
+        onOk: () => {
+          router.push("/home/Coupons");
+        },
+        onCancel: () => {
+          router.push({
+            path: "/goodsList",
+            query: { promotionsId: item.id, promotionType: "COUPON" },
           });
-        })
-        .catch((err) => {
-          console.warn('领取优惠券失败', err);
-        });
-    },
-    // 发行量已领完
-    isFinished(item) {
-      return Number(item.publishNum) > 0 && Number(item.receivedNum) >= Number(item.publishNum);
-    },
-    // 使用门槛文案
-    thresholdText(item) {
-      const threshold = Number(item.consumeThreshold);
-      if (!threshold) return "无使用门槛";
-      return `满${item.consumeThreshold}元可用`;
-    },
-    // 券范围。店铺名为 platform 时是平台通用券
-    scopeTag(type, storeName) {
-      if (type === "PORTION_GOODS") return "商品券";
-      if (type === "PORTION_GOODS_CATEGORY") return "分类券";
-      if (storeName && storeName !== "platform") return "店铺券";
-      return "通用券";
-    },
-  },
-  mounted() {
-    this.getList();
-  },
-};
+        },
+      });
+    })
+    .catch((err) => {
+      console.warn('领取优惠券失败', err);
+    });
+}
+// 发行量已领完
+function isFinished(item) {
+  return Number(item.publishNum) > 0 && Number(item.receivedNum) >= Number(item.publishNum);
+}
+// 使用门槛文案
+function thresholdText(item) {
+  const threshold = Number(item.consumeThreshold);
+  if (!threshold) return "无使用门槛";
+  return `满${item.consumeThreshold}元可用`;
+}
+// 券范围。店铺名为 platform 时是平台通用券
+function scopeTag(type, storeName) {
+  if (type === "PORTION_GOODS") return "商品券";
+  if (type === "PORTION_GOODS_CATEGORY") return "分类券";
+  if (storeName && storeName !== "platform") return "店铺券";
+  return "通用券";
+}
+
+onMounted(() => {
+  getList();
+});
 </script>
 <style lang="scss" scoped>
 @import "../assets/styles/coupon.scss";
diff --git a/buyer/src/pages/ForgetPassword.vue b/buyer/src/pages/ForgetPassword.vue
index a1020a0d3..06a46fb8e 100644
--- a/buyer/src/pages/ForgetPassword.vue
+++ b/buyer/src/pages/ForgetPassword.vue
@@ -4,7 +4,7 @@
     <!-- 顶部logo -->
     <div class="logo-box">
       <img
-        :src="$store.state.logoImg" width='150'
+        :src="logoImg" width='150'
         @click="$router.push('/')"
       />
       <div>修改密码</div>
@@ -12,7 +12,7 @@
     <div class="login-container">
         <!-- 验证手机号 -->
         <el-form
-          ref="formFirst"
+          ref="formFirstRef"
           :model="formFirst"
           :rules="ruleInline"
           style="width:300px;"
@@ -47,7 +47,7 @@
           </el-form-item>
         </el-form>
         <el-form
-          ref="form"
+          ref="formRef"
           :model="form"
           :rules="ruleInline"
           style="width:300px;"
@@ -79,7 +79,7 @@
         </el-form>
         <!-- 拼图验证码 -->
         <Verify
-          ref="verify"
+          ref="verifyRef"
           class="verify-con"
           :verifyType="verifyType"
           @change="verifyChange"
@@ -103,8 +103,9 @@
   </div>
 </template>
 
-<script>
-
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import * as RegExp from '@/plugins/RegExp.js';
 import { md5 } from '@/plugins/md5.js';
@@ -113,143 +114,148 @@ import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
 import { Lock, Iphone, Document } from '@element-plus/icons-vue';
 import config from '@/config';
-export default {
-  name: 'ForgetPassword',
-  components: { Verify, Lock, Iphone, Document },
-  data () {
-    return {
-      config,
-      loading: false, // 加载状态
-      loading1: false, // 第二步加载状态
-      formFirst: { // 手机验证码表单
-        // 注册表单
-        mobile: '',
-        code: ''
-      },
-      form: { // 密码
-        password: '',
-        oncePasd: ''
-      },
-      year: new Date().getFullYear(), // 当前年份
-      step: 0, // 步骤
-      ruleInline: {
-        // 验证规则
-        mobile: [
-          { required: true, message: '请输入手机号码' },
-          {
-            pattern: RegExp.mobile,
-            trigger: 'blur',
-            message: '请输入正确的手机号'
-          }
-        ],
-        code: [{ required: true, message: '请输入手机验证码' }],
-        password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
-      },
-      verifyStatus: false, // 图片验证状态
-      verifyType: 'FIND_USER', // 图片验证类型
-      codeMsg: '发送验证码', // 验证码文字
-      interval: '', // 定时器
-      time: 60 // 倒计时时间
-    };
-  },
-  methods: {
-    hideVerify() {
-      this.$refs.verify?.close?.();
-    },
-    // 提交短信验证码，修改密码
-    next () {
-      this.$refs.formFirst.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          let data = JSON.parse(JSON.stringify(this.formFirst));
-          apiLogin.validateCode(data).then((res) => {
-            this.loading = false;
-            if (res.success) {
-            //   Message.success('');
-              this.step = 1;
-            } else {
-              Message.warning(res.message);
-            }
-          }).catch(() => { this.loading = false; });
-        }
-      });
-    },
-    handleSubmit () { // 提交密码
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          let params = JSON.parse(JSON.stringify(this.form));
-          if (params.password !== params.oncePasd) {
-            Message.warning('两次输入密码不一致');
-            return;
-          };
-          params.mobile = this.formFirst.mobile;
-          params.password = md5(params.password);
-          delete params.oncePasd;
-          this.loading1 = true;
+import { useAppStore } from '@/stores/app';
 
-          apiLogin.resetPassword(params).then(res => {
-            this.loading1 = false;
-            if (res.success) {
-              Message.success('修改密码成功');
-              this.$router.push('login');
-            }
-          }).catch(() => { this.loading = false; });
-        };
-      });
-    },
-    sendCode () { // 发送验证码
-      if (this.time === 60) {
-        if (this.formFirst.mobile === '') {
-          Message.warning('请先填写手机号');
-          return;
-        }
-        if (!this.verifyStatus) {
-          Message.warning('请先完成安全验证');
-          return;
-        }
-        let params = {
-          mobile: this.formFirst.mobile,
-          verificationEnums: 'FIND_USER'
-        };
-        sendSms(params).then(res => {
-          if (res.success) {
-            Message.success('验证码发送成功');
-            let that = this;
-            this.interval = setInterval(() => {
-              that.time--;
-              if (that.time === 0) {
-                that.time = 60;
-                that.codeMsg = '重新发送';
-                that.verifyStatus = false;
-                clearInterval(that.interval);
-              } else {
-                that.codeMsg = that.time;
-              }
-            }, 1000);
-          } else {
-            Message.warning(res.message);
-          }
-        });
-      }
-    },
-    verifyChange (con) { // 验证通过
-      if (!con.status) return;
-      this.hideVerify();
-      this.verifyStatus = true;
-    },
-    verifyBtnClick () {
-      if (!this.verifyStatus) {
-        this.$refs.verify?.init();
-      }
+defineOptions({ name: 'ForgetPassword' });
+
+const router = useRouter();
+const appStore = useAppStore();
+const logoImg = computed(() => appStore.logoImg);
+
+const loading = ref(false); // 加载状态
+const loading1 = ref(false); // 第二步加载状态
+const formFirst = reactive({ // 手机验证码表单
+  // 注册表单
+  mobile: '',
+  code: ''
+});
+const form = reactive({ // 密码
+  password: '',
+  oncePasd: ''
+});
+const year = new Date().getFullYear(); // 当前年份
+const step = ref(0); // 步骤
+const ruleInline = {
+  // 验证规则
+  mobile: [
+    { required: true, message: '请输入手机号码' },
+    {
+      pattern: RegExp.mobile,
+      trigger: 'blur',
+      message: '请输入正确的手机号'
     }
-  },
-  mounted () {
-    document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
-    this.$refs.formFirst.resetFields();
-  },
-  watch: {
-  }
+  ],
+  code: [{ required: true, message: '请输入手机验证码' }],
+  password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
 };
+const verifyStatus = ref(false); // 图片验证状态
+const verifyType = ref('FIND_USER'); // 图片验证类型
+const codeMsg = ref('发送验证码'); // 验证码文字
+const interval = ref(''); // 定时器
+const time = ref(60); // 倒计时时间
+
+const formFirstRef = ref(null);
+const formRef = ref(null);
+const verifyRef = ref(null);
+
+function hideVerify() {
+  verifyRef.value?.close?.();
+}
+
+// 提交短信验证码，修改密码
+function next () {
+  formFirstRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      let data = JSON.parse(JSON.stringify(formFirst));
+      apiLogin.validateCode(data).then((res) => {
+        loading.value = false;
+        if (res.success) {
+        //   Message.success('');
+          step.value = 1;
+        } else {
+          Message.warning(res.message);
+        }
+      }).catch(() => { loading.value = false; });
+    }
+  });
+}
+
+function handleSubmit () { // 提交密码
+  formRef.value.validate(valid => {
+    if (valid) {
+      let params = JSON.parse(JSON.stringify(form));
+      if (params.password !== params.oncePasd) {
+        Message.warning('两次输入密码不一致');
+        return;
+      };
+      params.mobile = formFirst.mobile;
+      params.password = md5(params.password);
+      delete params.oncePasd;
+      loading1.value = true;
+
+      apiLogin.resetPassword(params).then(res => {
+        loading1.value = false;
+        if (res.success) {
+          Message.success('修改密码成功');
+          router.push('login');
+        }
+      }).catch(() => { loading.value = false; });
+    };
+  });
+}
+
+function sendCode () { // 发送验证码
+  if (time.value === 60) {
+    if (formFirst.mobile === '') {
+      Message.warning('请先填写手机号');
+      return;
+    }
+    if (!verifyStatus.value) {
+      Message.warning('请先完成安全验证');
+      return;
+    }
+    let params = {
+      mobile: formFirst.mobile,
+      verificationEnums: 'FIND_USER'
+    };
+    sendSms(params).then(res => {
+      if (res.success) {
+        Message.success('验证码发送成功');
+        interval.value = setInterval(() => {
+          time.value--;
+          if (time.value === 0) {
+            time.value = 60;
+            codeMsg.value = '重新发送';
+            verifyStatus.value = false;
+            clearInterval(interval.value);
+          } else {
+            codeMsg.value = time.value;
+          }
+        }, 1000);
+      } else {
+        Message.warning(res.message);
+      }
+    });
+  }
+}
+
+function verifyChange (con) { // 验证通过
+  if (!con.status) return;
+  hideVerify();
+  verifyStatus.value = true;
+}
+
+function verifyBtnClick () {
+  if (!verifyStatus.value) {
+    verifyRef.value?.init();
+  }
+}
+
+onMounted(() => {
+  document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
+  formFirstRef.value.resetFields();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/GoodsDetail.vue b/buyer/src/pages/GoodsDetail.vue
index dde6a3345..962ed0c67 100644
--- a/buyer/src/pages/GoodsDetail.vue
+++ b/buyer/src/pages/GoodsDetail.vue
@@ -30,120 +30,120 @@
 </template>
 
 <script>
-import { Message } from "@/utils/message";
-import Search from "@/components/Search";
-
-import ShowGoods from "@/components/goodsDetail/ShowGoods";
-import empty from "@/components/empty/Main";
-import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
-import { goodsSkuDetail } from "@/api/goods";
-import { getGoodsDistribution } from "@/api/member";
 export default {
   name: "GoodsDetail",
   beforeRouteEnter (to, from, next) {
     window.scrollTo(0, 0);
     next();
   },
-  created () {
-    this.getGoodsDetail();
-  },
-  data () {
-    return {
-      goodsMsg: {}, // 商品信息
-      isLoading: false, // 加载状态
-      categoryBar: [], // 分类
-      takeDownSale:false, // 是否下架
-
-    };
-  },
-  methods: {
-    // 跳转首页或商品页面
-    target(url){
-      this.$router.push({path: url})
-
-    },
-    // 点击规格
-    targetClickSku (val) {
-      this.getGoodsDetail(val);
-    },
-    // 获取商品详情
-    getGoodsDetail (val) {
-      this.isLoading = true;
-      const params = val || this.$route.query;
-
-      // 分销员id
-      let distributionId =
-        params && params.distributionId
-          ? params.distributionId
-          : this.Cookies.getItem("distributionId");
-      // 如果有分销信息
-      if (distributionId) {
-        // 先存储
-        this.Cookies.setItem("distributionId", params.distributionId);
-        let _this = this;
-        // 绑定关系
-        getGoodsDistribution(params.distributionId).then((res) => {
-          // 绑定成功，则清除关系
-          if (res.success) {
-            _this.Cookies.removeItem("distributionId");
-          }
-        });
-      }
-
-      goodsSkuDetail(params)
-        .then((res) => {
-          this.isLoading = false;
-          if (res.success) {
-
-            const result = res.result;
-            const cateName = res.result.categoryName;
-            const cateId = result.data.categoryPath.split(",");
-            const cateArr = [];
-            cateId.forEach((e, index) => {
-              // 插入分类id和name
-              cateArr.push({
-                id: e,
-                name: cateName ? cateName[index] : "",
-              });
-            });
-            this.categoryBar = cateArr;
-            this["goodsMsg"] = res.result;
-            if (!this.goodsMsg.data.intro) {
-              this.goodsMsg.data.intro = ''
-            }
-          } else {
-            Message.error(res.message);
-            this.isLoading = false
-          }
-        })
-        .catch((e) => {
-          this.isLoading = false
-          if(e.code === 11001){
-            this.takeDownSale = true
-          }
-        });
-    },
-    goGoodsList (currIndex) {
-      // 跳转商品列表
-      const arr = [];
-      this.categoryBar.forEach((e, index) => {
-        if (index <= currIndex) {
-          arr.push(e.id);
-        }
-      });
-      return {
-        path: "/goodsList",
-        query: { categoryId: arr.toString() },
-      };
-    },
-  },
-  watch: {},
-  components: { Search,
-    ShowGoods,
-    ShowGoodsDetail,
-    empty },
 };
 </script>
+
+<script setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message } from "@/utils/message";
+import storage from "@/plugins/storage.js";
+import Search from "@/components/Search";
+import ShowGoods from "@/components/goodsDetail/ShowGoods";
+import empty from "@/components/empty/Main";
+import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
+import { goodsSkuDetail } from "@/api/goods";
+import { getGoodsDistribution } from "@/api/member";
+
+const route = useRoute();
+const router = useRouter();
+
+const goodsMsg = ref({}); // 商品信息
+const isLoading = ref(false); // 加载状态
+const categoryBar = ref([]); // 分类
+const takeDownSale = ref(false); // 是否下架
+
+// 跳转首页或商品页面
+function target(url){
+  router.push({path: url})
+
+}
+
+// 点击规格
+function targetClickSku (val) {
+  getGoodsDetail(val);
+}
+
+// 获取商品详情
+function getGoodsDetail (val) {
+  isLoading.value = true;
+  const params = val || route.query;
+
+  // 分销员id
+  let distributionId =
+    params && params.distributionId
+      ? params.distributionId
+      : storage.getItem("distributionId");
+  // 如果有分销信息
+  if (distributionId) {
+    // 先存储
+    storage.setItem("distributionId", params.distributionId);
+    // 绑定关系
+    getGoodsDistribution(params.distributionId).then((res) => {
+      // 绑定成功，则清除关系
+      if (res.success) {
+        storage.removeItem("distributionId");
+      }
+    });
+  }
+
+  goodsSkuDetail(params)
+    .then((res) => {
+      isLoading.value = false;
+      if (res.success) {
+
+        const result = res.result;
+        const cateName = res.result.categoryName;
+        const cateId = result.data.categoryPath.split(",");
+        const cateArr = [];
+        cateId.forEach((e, index) => {
+          // 插入分类id和name
+          cateArr.push({
+            id: e,
+            name: cateName ? cateName[index] : "",
+          });
+        });
+        categoryBar.value = cateArr;
+        goodsMsg.value = res.result;
+        if (!goodsMsg.value.data.intro) {
+          goodsMsg.value.data.intro = ''
+        }
+      } else {
+        Message.error(res.message);
+        isLoading.value = false
+      }
+    })
+    .catch((e) => {
+      isLoading.value = false
+      if(e.code === 11001){
+        takeDownSale.value = true
+      }
+    });
+}
+
+function goGoodsList (currIndex) {
+  // 跳转商品列表
+  const arr = [];
+  categoryBar.value.forEach((e, index) => {
+    if (index <= currIndex) {
+      arr.push(e.id);
+    }
+  });
+  return {
+    path: "/goodsList",
+    query: { categoryId: arr.toString() },
+  };
+}
+
+// 初始化（原 created 钩子逻辑）
+getGoodsDetail();
+</script>
 <style scoped lang="scss">
 .goods-detail-page {
   background: #f5f5f5;
diff --git a/buyer/src/pages/GoodsList.vue b/buyer/src/pages/GoodsList.vue
index 26f3c01df..4c6375c55 100644
--- a/buyer/src/pages/GoodsList.vue
+++ b/buyer/src/pages/GoodsList.vue
@@ -104,199 +104,207 @@
 </template>
 
 <script>
-import { Message } from "@/utils/message";
-import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
-import GoodsClassNav from "@/components/nav/GoodsClassNav";
-import GoodsThumb from "@/components/goods/GoodsThumb.vue";
-import * as apiGoods from "@/api/goods";
 export default {
   name: "GoodsList",
   beforeRouteEnter(to, from, next) {
     window.scrollTo(0, 0);
     next();
   },
-  data() {
-    return {
-      sortIndex: 0, // 排序状态
-      priceSortIndex: 4,
-      sortPriceIndex: false, // 判断价格升序还是降序
-      searched: false,
-      recommendList: [],
-      goodsTool: [
-        // 排序类型
-        { title: "综合", en: "" },
-        { title: "销量", en: "buyCount" },
-        { title: "评论数", en: "commentNum" },
-        { title: "新品", en: "releaseTime" },
-      ],
-      goodsList: [], // 商品列表
-      loading: false, // 加载状态
-      total: 0, // 列表总数
-      params: {
-        // 请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        categoryId: "",
-      },
-    };
-  },
-  watch: {
-    $route() {
-      const { keyword, categoryId, promotionType, promotionsId } = this.$route.query;
-      if (categoryId) {
-        const cateId = categoryId.split(",");
-        Object.assign(this.params, this.$route.query);
-        this.params.categoryId = cateId[cateId.length - 1];
-      }
-      if (promotionType) {
-        this.params.promotionType = promotionType;
-      }
-      if (promotionsId) {
-        this.params.promotionsId = promotionsId;
-      }
-      if (keyword) {
-        // handleSearch 内部会调 getGoodsList，此处不再重复请求
-        this.handleSearch(keyword);
-      } else {
-        this.params.keyword = "";
-        this.getGoodsList();
-      }
-    },
-  },
-  computed: {
-    displayGoods() {
-      if (this.goodsList.length) return this.goodsList;
-      return this.searched && !this.loading ? this.recommendList : [];
-    },
-    emptyTitle() {
-      const keyword = this.params.keyword;
-      return keyword ? `没有找到与“${keyword}”相关的商品` : "暂无商品";
-    },
-  },
-  methods: {
-    // 搜索
-    handleSearch(key) {
-      this.params.keyword = key;
-      this.$route.query.keyword = key
-      this.params.pageNumber = 1;
-      this.getGoodsList();
-    },
-    orderBy(data, index) {
-      // 排序
-      this.sortIndex = index;
-      this.params.sort = data;
-      this.params.order = "desc";
-      if (data === "price") {
-        if (!this.sortPriceIndex) {
-          this.sortPriceIndex = "asc";
-        } else {
-          this.sortPriceIndex === "desc"
-            ? (this.sortPriceIndex = "asc")
-            : (this.sortPriceIndex = "desc");
-        }
-        this.params.order = this.sortPriceIndex;
-      } else {
-        this.sortPriceIndex = false;
-      }
-      this.getGoodsList();
-    },
-    formatGrade(grade) {
-      if (grade === null || grade === undefined || grade === "") {
-        return 100;
-      }
-      const num = Number(grade);
-      if (Number.isNaN(num)) {
-        return 100;
-      }
-      const fixed = Number(num.toFixed(1));
-      return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
-    },
-    goGoodsDetail(skuId, goodsId) {
-      const location = {
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      };
-      window.open(this.$router.resolve(location).href, "_blank");
-    },
-    goShopPage(id) {
-      if (!id) {
-        Message.warning("店铺信息不存在");
-        return;
-      }
-      this.$router.push({
-        path: "/merchant",
-        query: { id },
-      });
-    },
-    // 分页 修改页码
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.getGoodsList();
-    },
-    // 分页 修改页数
-    changePageSize(val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getGoodsList();
-    },
-
-    // 获取商品列表
-    getGoodsList() {
-      this.loading = true;
-      apiGoods
-        .goodsList(this.params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.goodsList = res.result.records || [];
-            this.total = res.result.total;
-            if (!this.goodsList.length) this.loadRecommend();
-          }
-        })
-        .catch(() => {
-          this.goodsList = [];
-        })
-        .finally(() => {
-          this.loading = false;
-          this.searched = true;
-        });
-    },
-    loadRecommend() {
-      if (this.recommendList.length) return;
-      apiGoods
-        .goodsList({ pageNumber: 1, pageSize: 10, sort: "buyCount", order: "desc" })
-        .then((res) => {
-          if (res.success) this.recommendList = res.result.records || [];
-        })
-        .catch(() => {
-          // 推荐列表为可选数据，加载失败不阻塞搜索页
-        });
-    },
-    getParams(val) {
-      // 筛选条件回显
-      Object.assign(this.params, val);
-      this.getGoodsList();
-    },
-  },
-  created() {
-    if (this.$route.query.categoryId) {
-      let cateId = this.$route.query.categoryId.split(",");
-      Object.assign(this.params, this.$route.query);
-      this.params.categoryId = cateId[cateId.length - 1];
-    } else {
-      Object.assign(this.params, this.$route.query);
-    }
-    this.getGoodsList();
-  },
-  components: {
-    GoodsClassNav,
-    GoodsThumb,
-    ArrowDown,
-    ArrowUp,
-  },
 };
 </script>
 
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message } from "@/utils/message";
+import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
+import GoodsClassNav from "@/components/nav/GoodsClassNav";
+import GoodsThumb from "@/components/goods/GoodsThumb.vue";
+import * as apiGoods from "@/api/goods";
+
+const route = useRoute();
+const router = useRouter();
+
+const sortIndex = ref(0); // 排序状态
+const priceSortIndex = ref(4);
+const sortPriceIndex = ref(false); // 判断价格升序还是降序
+const searched = ref(false);
+const recommendList = ref([]);
+// 排序类型
+const goodsTool = [
+  { title: "综合", en: "" },
+  { title: "销量", en: "buyCount" },
+  { title: "评论数", en: "commentNum" },
+  { title: "新品", en: "releaseTime" },
+];
+const goodsList = ref([]); // 商品列表
+const loading = ref(false); // 加载状态
+const total = ref(0); // 列表总数
+// 请求参数
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  categoryId: "",
+});
+
+const displayGoods = computed(() => {
+  if (goodsList.value.length) return goodsList.value;
+  return searched.value && !loading.value ? recommendList.value : [];
+});
+
+const emptyTitle = computed(() => {
+  const keyword = params.keyword;
+  return keyword ? `没有找到与“${keyword}”相关的商品` : "暂无商品";
+});
+
+watch(
+  () => route.query,
+  (query) => {
+    const { keyword, categoryId, promotionType, promotionsId } = query;
+    if (categoryId) {
+      const cateId = categoryId.split(",");
+      Object.assign(params, query);
+      params.categoryId = cateId[cateId.length - 1];
+    }
+    if (promotionType) {
+      params.promotionType = promotionType;
+    }
+    if (promotionsId) {
+      params.promotionsId = promotionsId;
+    }
+    if (keyword) {
+      // handleSearch 内部会调 getGoodsList，此处不再重复请求
+      handleSearch(keyword);
+    } else {
+      params.keyword = "";
+      getGoodsList();
+    }
+  }
+);
+
+// 搜索
+function handleSearch(key) {
+  params.keyword = key;
+  route.query.keyword = key;
+  params.pageNumber = 1;
+  getGoodsList();
+}
+
+// 排序
+function orderBy(data, index) {
+  sortIndex.value = index;
+  params.sort = data;
+  params.order = "desc";
+  if (data === "price") {
+    if (!sortPriceIndex.value) {
+      sortPriceIndex.value = "asc";
+    } else {
+      sortPriceIndex.value === "desc"
+        ? (sortPriceIndex.value = "asc")
+        : (sortPriceIndex.value = "desc");
+    }
+    params.order = sortPriceIndex.value;
+  } else {
+    sortPriceIndex.value = false;
+  }
+  getGoodsList();
+}
+
+function formatGrade(grade) {
+  if (grade === null || grade === undefined || grade === "") {
+    return 100;
+  }
+  const num = Number(grade);
+  if (Number.isNaN(num)) {
+    return 100;
+  }
+  const fixed = Number(num.toFixed(1));
+  return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
+}
+
+function goGoodsDetail(skuId, goodsId) {
+  const location = {
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  };
+  window.open(router.resolve(location).href, "_blank");
+}
+
+function goShopPage(id) {
+  if (!id) {
+    Message.warning("店铺信息不存在");
+    return;
+  }
+  router.push({
+    path: "/merchant",
+    query: { id },
+  });
+}
+
+// 分页 修改页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getGoodsList();
+}
+
+// 分页 修改页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getGoodsList();
+}
+
+// 获取商品列表
+function getGoodsList() {
+  loading.value = true;
+  apiGoods
+    .goodsList(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        goodsList.value = res.result.records || [];
+        total.value = res.result.total;
+        if (!goodsList.value.length) loadRecommend();
+      }
+    })
+    .catch(() => {
+      goodsList.value = [];
+    })
+    .finally(() => {
+      loading.value = false;
+      searched.value = true;
+    });
+}
+
+function loadRecommend() {
+  if (recommendList.value.length) return;
+  apiGoods
+    .goodsList({ pageNumber: 1, pageSize: 10, sort: "buyCount", order: "desc" })
+    .then((res) => {
+      if (res.success) recommendList.value = res.result.records || [];
+    })
+    .catch(() => {
+      // 推荐列表为可选数据，加载失败不阻塞搜索页
+    });
+}
+
+// 筛选条件回显
+function getParams(val) {
+  Object.assign(params, val);
+  getGoodsList();
+}
+
+// 初始化（原 created 钩子逻辑）
+if (route.query.categoryId) {
+  const cateId = route.query.categoryId.split(",");
+  Object.assign(params, route.query);
+  params.categoryId = cateId[cateId.length - 1];
+} else {
+  Object.assign(params, route.query);
+}
+getGoodsList();
+</script>
+
 <style scoped lang="scss">
 @import "../assets/styles/goodsList.scss";
 .cate-nav{
diff --git a/buyer/src/pages/Index.vue b/buyer/src/pages/Index.vue
index c4751ff75..59dccc1c3 100644
--- a/buyer/src/pages/Index.vue
+++ b/buyer/src/pages/Index.vue
@@ -32,7 +32,7 @@
     <div class="index-main">
       <!-- 商品分类 + 楼层装修（同一宽度容器，保证与分类栏左缘对齐） -->
       <cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
-      <model-form ref="modelForm" :data="modelForm"></model-form>
+      <model-form :data="modelFormData"></model-form>
     </div>
     <!-- 底部栏 -->
     <BaseFooter></BaseFooter>
@@ -41,184 +41,179 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, onUnmounted, ref } from "vue";
 import Search from '@/components/Search';
 import ModelForm from '@/components/indexDecorate/ModelForm';
 import HoverSearch from '@/components/header/hoverSearch';
 import fixedBar from '@/components/fixed/index';
 import storage from "@/plugins/storage";
-import { indexData,getAutoCoup } from '@/api/index.js';
-import {seckillByDay} from '@/api/promotion'
-export default {
-  name: 'Index',
-  mounted () {
-    this.getIndexData();
-    let that = this;
-    window.onscroll = function () {
-      let top = document.documentElement.scrollTop || document.body.scrollTop;
-      if (top > 300) {
-        that.topSearchShow = true;
-      } else {
-        that.topSearchShow = false;
-      }
-    };
-    if(storage.getItem('userInfo')){
-      this.getAutoCoup()
-    }
-  },
-  data () {
-    return {
-      autoCoupList:[],
-      showCpmodel:false,
-      modelForm: { list: [] }, // 楼层装修数据
-      topAdvert: {}, // 顶部广告
-      showNav: false, // 是否展示分类栏
-      topSearchShow: false, // 滚动后顶部搜索栏展示
-      carouselLarge: false, // 不同轮播分类尺寸
-      carouselOpacity: false // 不同轮播分类样式
-    };
-  },
-  props:{
-    pageData:{
-      type:null,
-      default:""
-    }
-  },
-  // created(){
+import { indexData, getAutoCoup } from '@/api/index.js';
+import { seckillByDay } from '@/api/promotion';
 
-  // },
-  methods: {
-    // 优惠券可用范围
-    useScope (type, storeName) {
-      let shop = '平台';
-      let goods = '全部商品'
-      if (storeName !== 'platform') shop = storeName
-      switch (type) {
-        case 'ALL':
-          goods = '全部商品'
-          break;
-        case 'PORTION_GOODS':
-          goods = '部分商品'
-          break;
-        case 'PORTION_GOODS_CATEGORY':
-          goods = '部分分类商品'
-          break;
+defineOptions({ name: "Index" });
+
+const props = defineProps({
+  pageData: {
+    type: null,
+    default: "",
+  },
+});
+
+const autoCoupList = ref([]);
+const showCpmodel = ref(false);
+const modelFormData = ref({ list: [] }); // 楼层装修数据
+const topAdvert = ref({}); // 顶部广告
+const showNav = ref(false); // 是否展示分类栏
+const topSearchShow = ref(false); // 滚动后顶部搜索栏展示
+const carouselLarge = ref(false); // 不同轮播分类尺寸
+const carouselOpacity = ref(false); // 不同轮播分类样式
+
+// 优惠券可用范围
+function useScope(type, storeName) {
+  let shop = '平台';
+  let goods = '全部商品';
+  if (storeName !== 'platform') shop = storeName;
+  switch (type) {
+    case 'ALL':
+      goods = '全部商品';
+      break;
+    case 'PORTION_GOODS':
+      goods = '部分商品';
+      break;
+    case 'PORTION_GOODS_CATEGORY':
+      goods = '部分分类商品';
+      break;
+  }
+  return `${shop}${goods}可用`;
+}
+
+function fetchAutoCoup() {
+  let data = new Date();
+  let datas = data.getDate();
+  let hours = data.getHours();
+  let flagCoup = storage.getItem('getTimes'); //缓存
+  if (flagCoup && flagCoup != undefined && flagCoup != null) {  //判断当前是否有缓存
+    if (Number(datas) > Number(flagCoup)) { //判断缓存是否小于当前天数
+      if (Number(hours) >= 6) { //超过或等于6时清楚缓存
+        storage.setItem('getTimes', datas); //存储缓存
+        getcps();
       }
-      return `${shop}${goods}可用`
-    },
-    getAutoCoup(){
-      let data = new Date()
-      let datas = data.getDate()
-      let hours = data.getHours()
-      let flagCoup = storage.getItem('getTimes') //缓存
-      if(flagCoup && flagCoup != undefined && flagCoup != null){  //判断当前是否有缓存
-        if(Number(datas) > Number(flagCoup)){ //判断缓存是否小于当前天数
-          if(Number(hours) >= 6){//超过或等于6时清楚缓存
-            storage.setItem('getTimes',datas)//存储缓存
-            this.getcps()
-          }
+    }
+  } else {
+    getcps();
+  }
+}
+
+function getcps() {
+  let data = new Date();
+  let datas = data.getDate();
+  getAutoCoup().then(res => { //调用自动发券
+    if (res.success) {
+      autoCoupList.value.push(...res.result);
+      let objs = {};
+      autoCoupList.value = autoCoupList.value.reduce((cur, next) => {
+        //对象去重
+        if (next.id != undefined) {
+          objs[next.id]
+            ? ""
+            : (objs[next.id] = true && cur.push(next));
         }
-      }else{
-        // window.localStorage.setItem('getTimes',datas)//存储缓存
-        this.getcps()
+        return cur;
+      }, []);
+      if (autoCoupList.value != '' && autoCoupList.value.length > 0) {
+        showCpmodel.value = true;
       }
-    },
-    getcps(){
-      let data = new Date()
-      let datas = data.getDate()
-      getAutoCoup().then(res=>{ //调用自动发券
-            if(res.success){
-              this.autoCoupList.push(...res.result);
-              let objs = {};
-              this.autoCoupList = this.autoCoupList.reduce((cur, next) => {
-                //对象去重
-                if (next.id != undefined) {
-                  objs[next.id]
-                    ? ""
-                    : (objs[next.id] = true && cur.push(next));
-                }
-                return cur;
-              }, []);
-              if(this.autoCoupList != '' && this.autoCoupList.length > 0){
-                this.showCpmodel = true;
-              }
-              storage.setItem('getTimes',datas)//存储缓存
-            }
-      }).catch((err) => {
-        console.warn('获取自动发券信息失败', err);
-      });
-    },
-    handleReachBottom(){
+      storage.setItem('getTimes', datas); //存储缓存
+    }
+  }).catch((err) => {
+    console.warn('获取自动发券信息失败', err);
+  });
+}
 
-    } ,
-    getIndexData () {
-      if(this.pageData){
-        this.parsePageData(JSON.stringify(this.pageData)).catch(() => {
+function handleReachBottom() {
+}
+
+function getIndexData() {
+  if (props.pageData) {
+    parsePageData(JSON.stringify(props.pageData)).catch(() => {
+      // 装修数据解析失败时保持默认空楼层
+    });
+  } else {
+    // 获取首页装修数据
+    indexData({ clientType: 'PC' }).then(async (res) => {
+      if (res.success && res.result?.pageData) {
+        try {
+          await parsePageData(res.result.pageData);
+        } catch {
           // 装修数据解析失败时保持默认空楼层
-        });
-      }
-      else{
-        // 获取首页装修数据
-        indexData({ clientType: 'PC' }).then(async (res) => {
-          if (res.success && res.result?.pageData) {
-            try {
-              await this.parsePageData(res.result.pageData);
-            } catch {
-              // 装修数据解析失败时保持默认空楼层
-            }
-          }
-        }).catch((err) => {
-          console.warn('获取首页装修数据失败', err);
-        });
-      }
-    },
-
-    async parsePageData(pageData){
-      const dataJson = typeof pageData === "string" ? JSON.parse(pageData) : pageData;
-      if (!dataJson?.list?.length) {
-        return;
-      }
-      // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
-      // 轮播图根据不同轮播，样式不同
-      for (let i = 0; i < dataJson.list.length; i++) {
-        let type = dataJson.list[i].type
-        if (type === 'carousel2') {
-          this.carouselLarge = true;
-        } else if (type === 'carousel1') {
-          this.carouselLarge = true
-          this.carouselOpacity = true
-        } else if (type === 'seckill') {
-          let seckill = await this.getListByDay()
-          dataJson.list[i].options.list = seckill
         }
       }
-      this.modelForm = dataJson;
-      if (dataJson.list[1]) {
-        storage.setItem('navList', dataJson.list[1])
-      }
-      this.showNav = true
-      if (dataJson.list[0]) {
-        this.topAdvert = dataJson.list[0];
-      }
-    },
+    }).catch((err) => {
+      console.warn('获取首页装修数据失败', err);
+    });
+  }
+}
 
-    async getListByDay () { // 当天秒杀活动
-      try {
-        const res = await seckillByDay()
-        if (res.success && res.result?.length) {
-          return res.result
-        }
-      } catch {
-        // 秒杀接口失败时不影响首页其他模块
-      }
-      return []
+async function parsePageData(pageData) {
+  const dataJson = typeof pageData === "string" ? JSON.parse(pageData) : pageData;
+  if (!dataJson?.list?.length) {
+    return;
+  }
+  // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
+  // 轮播图根据不同轮播，样式不同
+  for (let i = 0; i < dataJson.list.length; i++) {
+    let type = dataJson.list[i].type;
+    if (type === 'carousel2') {
+      carouselLarge.value = true;
+    } else if (type === 'carousel1') {
+      carouselLarge.value = true;
+      carouselOpacity.value = true;
+    } else if (type === 'seckill') {
+      let seckill = await getListByDay();
+      dataJson.list[i].options.list = seckill;
     }
-  },
-  components: { Search,
-    ModelForm,
-    HoverSearch,
-    fixedBar }
-};
+  }
+  modelFormData.value = dataJson;
+  if (dataJson.list[1]) {
+    storage.setItem('navList', dataJson.list[1]);
+  }
+  showNav.value = true;
+  if (dataJson.list[0]) {
+    topAdvert.value = dataJson.list[0];
+  }
+}
+
+async function getListByDay() { // 当天秒杀活动
+  try {
+    const res = await seckillByDay();
+    if (res.success && res.result?.length) {
+      return res.result;
+    }
+  } catch {
+    // 秒杀接口失败时不影响首页其他模块
+  }
+  return [];
+}
+
+function handleScroll() {
+  const top = document.documentElement.scrollTop || document.body.scrollTop;
+  topSearchShow.value = top > 300;
+}
+
+onMounted(() => {
+  getIndexData();
+  window.onscroll = handleScroll;
+  if (storage.getItem('userInfo')) {
+    fetchAutoCoup();
+  }
+});
+
+onUnmounted(() => {
+  if (window.onscroll === handleScroll) {
+    window.onscroll = null;
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/Login.vue b/buyer/src/pages/Login.vue
index 5be74b235..9b42bd430 100644
--- a/buyer/src/pages/Login.vue
+++ b/buyer/src/pages/Login.vue
@@ -3,7 +3,7 @@
     <!-- 顶部logo -->
     <div class="top-content" @click="hideVerify">
       <div class="logo-box">
-        <img :src="$store.state.logoImg" @click="$router.push('/')" />
+        <img :src="logoImg" @click="$router.push('/')" />
         <div>欢迎登录</div>
       </div>
     </div>
@@ -27,7 +27,7 @@
         <div>
           <div>
           <!-- 账号密码登录 -->
-          <el-form ref="formInline" :model="formData" :rules="ruleInline" v-show="type === true"
+          <el-form ref="formInlineRef" :model="formData" :rules="ruleInline" v-show="type === true"
                 @click.self="hideVerify">
             <el-form-item prop="username">
               <el-input type="text" v-model="formData.username" clearable placeholder="用户名">
@@ -44,7 +44,7 @@
             </el-form-item>
           </el-form>
           <!-- 验证码登录 -->
-          <el-form ref="formSms" :model="formSms" :rules="ruleInline" v-show="type === false"
+          <el-form ref="formSmsRef" :model="formSms" :rules="ruleInline" v-show="type === false"
                 @click.self="hideVerify">
             <el-form-item prop="mobile">
               <el-input type="text" v-model="formSms.mobile" clearable placeholder="手机号">
@@ -88,7 +88,7 @@
 
 
       <!-- 拼图验证码 -->
-      <verify ref="verify" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
+      <verify ref="verifyRef" class="verify-con" verifyType="LOGIN" @change="verifyChange"></verify>
     </div>
     <div class="foot">
       <div type="flex" justify="space-around" class="help">
@@ -105,8 +105,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Spin } from "@/utils/message";
 import * as RegExp from "@/plugins/RegExp.js";
 import { md5 } from "@/plugins/md5.js";
@@ -117,235 +119,240 @@ import storage from "@/plugins/storage.js";
 import verify from "@/components/verify";
 import { User, Lock, Document, Iphone } from "@element-plus/icons-vue";
 import config from "@/config";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "Login",
-  components: {
-    verify,
-    User,
-    Lock,
-    Document,
-    Iphone,
-  },
-  data() {
-    return {
-      config,
-      type: true, // true 账号登录  false 验证码登录
-      formData: {
-        // 登录表单
-        username: "",
-        password: "",
-      },
-      formSms: {
-        // 手机号登录
-        code: "",
-        mobile: "",
-      },
-      verifyStatus: false, // 是否图片验证通过
-      codeSent: false, // 是否已成功发送短信验证码
-      ruleInline: {
-        // 验证规则
-        username: [{required: true, message: "请输入用户名"}],
-        password: [
-          {required: true, message: "请输入密码"},
-          {type: "string", min: 6, message: "密码不能少于6位"},
-        ],
-        mobile: [
-          {required: true, message: "请输入手机号码"},
-          {
-            pattern: RegExp.mobile,
-            message: "请输入正确的手机号",
-          },
-        ],
-        code: [{required: true, message: "请输入手机验证码"}],
-      },
-      codeMsg: "发送验证码", // 验证码文字
-      interval: null, // 定时器
-      time: 60, // 倒计时
-      year: new Date().getFullYear(),
-    };
-  },
-  methods: {
-    hideVerify() {
-      this.$refs.verify?.close?.();
-    },
+defineOptions({ name: "Login" });
 
-    // 登录
-    handleSubmit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          if (this.type) {
-            this.$refs.verify?.init();
-          } else {
-            if (!this.codeSent) {
-              Message.warning("请先获取短信验证码");
-              return;
-            }
-            const data = JSON.parse(JSON.stringify(this.formSms));
-            apiLogin.smsLogin(data).then((res) => {
-              this.hideVerify();
-              if (res.success) {
-                Message.success("登录成功");
-                storage.setItem("accessToken", res.result.accessToken);
-                storage.setItem("refreshToken", res.result.refreshToken);
-                storage.setItem('getTimes',0)
-                apiLogin.getMemberMsg().then((res) => {
-                  if (res.success) {
-                    storage.setItem("userInfo", res.result);
-                    let query = this.$route.query;
-                    if (query.rePath) {
-                      this.$router.push({
-                        path: query.rePath,
-                        query: JSON.parse(query.query),
-                      });
-                    } else {
-                      this.$router.push("/");
-                    }
-                  }
-                });
-              } else {
-                Message.error(res.message);
-              }
-            }).catch((err) => {
-              console.warn('短信登录失败', err);
-            });
-          }
-        }
-      });
-    },
-    // 发送手机验证码
-    sendCode() {
-      if (this.time !== 60) return;
-      if (this.formSms.mobile === "") {
-        Message.warning("请先填写手机号");
-        return;
-      }
-      if (!RegExp.mobile.test(this.formSms.mobile)) {
-        Message.warning("请输入正确的手机号");
-        return;
-      }
-      this.$refs.verify?.init();
-    },
-    dispatchSms() {
-      sendSms({
-        mobile: this.formSms.mobile,
-        verificationEnums: "LOGIN",
-      }).then((res) => {
-        if (res.success) {
-          Message.success("验证码发送成功");
-          this.codeSent = true;
-          this.interval = setInterval(() => {
-            this.time--;
-            if (this.time === 0) {
-              this.time = 60;
-              this.codeMsg = "重新发送";
-              this.verifyStatus = false;
-              this.codeSent = false;
-              clearInterval(this.interval);
-            } else {
-              this.codeMsg = this.time;
-            }
-          }, 1000);
-        } else {
-          this.verifyStatus = false;
-          Message.warning(res.message);
-        }
-      }).catch(() => {
-        this.verifyStatus = false;
-      });
-    },
-    verifyChange(con) {
-      // 拼图验证码回显
-      if (!con.status) return;
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-      if (this.type === true) {
-        // 账号密码登录
-        let data = JSON.parse(JSON.stringify(this.formData));
-        data.password = md5(data.password);
-        this.hideVerify();
-        Spin.show();
-        apiLogin
-          .login(data)
-          .then((res) => {
-            if (res.success) {
-              this.loginSuccess(res.result.accessToken,res.result.refreshToken);
-            } else {
-              Spin.hide();
-              Message.error(res.message);
-            }
-          })
-          .catch(() => {
-            Spin.hide();
-          });
-      } else {
-        this.verifyStatus = true;
-        this.hideVerify();
-        this.dispatchSms();
-      }
-    },
-    handleWebLogin(type) {
-      // 第三方登录
-      webLogin(type);
-    },
-    loginSuccess(accessToken,refreshToken){
-      Message.success("登录成功");
-      storage.setItem("accessToken", accessToken);
-      storage.setItem("refreshToken", refreshToken);
-      apiLogin.getMemberMsg().then((res) => {
-        Spin.hide();
-        if (res.success) {
-          storage.setItem("userInfo", res.result);
-          let query = this.$route.query;
-          if (query.rePath) {
-            this.$router.push({
-              path: query.rePath,
-              query: JSON.parse(query.query),
-            });
-          } else {
-            this.$router.push("/");
-          }
-        }
-      });
-    },
+const logoImg = computed(() => appStore.logoImg);
 
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  mounted() {
-    let uuid = this.$route.query.state;
-    if (uuid) {
-      storage.setItem("uuid", uuid);
-      loginCallback(uuid).then((res) => {
-        if (res.success) {
-          this.loginSuccess(res.result.accessToken,res.result.refreshToken);
-        }
-      });
-    }
-  },
-  watch: {
-    type(v) {
-      if (v) {
-        this.$refs.formInline.resetFields();
-      } else {
-        this.$refs.formSms.resetFields();
-      }
-      this.verifyStatus = false;
-      this.codeSent = false;
-      this.hideVerify();
-      clearInterval(this.interval);
-      this.codeMsg = "发送验证码";
-      this.time = 60;
-    },
-    "formSms.mobile"() {
-      this.codeSent = false;
-      this.verifyStatus = false;
-      clearInterval(this.interval);
-      this.codeMsg = "发送验证码";
-      this.time = 60;
-    },
-  },
+const formInlineRef = ref(null);
+const formSmsRef = ref(null);
+const verifyRef = ref(null);
+const formRefs = {
+  formInline: formInlineRef,
+  formSms: formSmsRef,
 };
+
+const type = ref(true); // true 账号登录  false 验证码登录
+const formData = reactive({
+  // 登录表单
+  username: "",
+  password: "",
+});
+const formSms = reactive({
+  // 手机号登录
+  code: "",
+  mobile: "",
+});
+const verifyStatus = ref(false); // 是否图片验证通过
+const codeSent = ref(false); // 是否已成功发送短信验证码
+const ruleInline = {
+  // 验证规则
+  username: [{required: true, message: "请输入用户名"}],
+  password: [
+    {required: true, message: "请输入密码"},
+    {type: "string", min: 6, message: "密码不能少于6位"},
+  ],
+  mobile: [
+    {required: true, message: "请输入手机号码"},
+    {
+      pattern: RegExp.mobile,
+      message: "请输入正确的手机号",
+    },
+  ],
+  code: [{required: true, message: "请输入手机验证码"}],
+};
+const codeMsg = ref("发送验证码"); // 验证码文字
+const interval = ref(null); // 定时器
+const time = ref(60); // 倒计时
+const year = new Date().getFullYear();
+
+function hideVerify() {
+  verifyRef.value?.close?.();
+}
+
+// 登录
+function handleSubmit(name) {
+  formRefs[name].value.validate((valid) => {
+    if (valid) {
+      if (type.value) {
+        verifyRef.value?.init();
+      } else {
+        if (!codeSent.value) {
+          Message.warning("请先获取短信验证码");
+          return;
+        }
+        const data = JSON.parse(JSON.stringify(formSms));
+        apiLogin.smsLogin(data).then((res) => {
+          hideVerify();
+          if (res.success) {
+            Message.success("登录成功");
+            storage.setItem("accessToken", res.result.accessToken);
+            storage.setItem("refreshToken", res.result.refreshToken);
+            storage.setItem('getTimes',0)
+            apiLogin.getMemberMsg().then((res) => {
+              if (res.success) {
+                storage.setItem("userInfo", res.result);
+                let query = route.query;
+                if (query.rePath) {
+                  router.push({
+                    path: query.rePath,
+                    query: JSON.parse(query.query),
+                  });
+                } else {
+                  router.push("/");
+                }
+              }
+            });
+          } else {
+            Message.error(res.message);
+          }
+        }).catch((err) => {
+          console.warn('短信登录失败', err);
+        });
+      }
+    }
+  });
+}
+// 发送手机验证码
+function sendCode() {
+  if (time.value !== 60) return;
+  if (formSms.mobile === "") {
+    Message.warning("请先填写手机号");
+    return;
+  }
+  if (!RegExp.mobile.test(formSms.mobile)) {
+    Message.warning("请输入正确的手机号");
+    return;
+  }
+  verifyRef.value?.init();
+}
+function dispatchSms() {
+  sendSms({
+    mobile: formSms.mobile,
+    verificationEnums: "LOGIN",
+  }).then((res) => {
+    if (res.success) {
+      Message.success("验证码发送成功");
+      codeSent.value = true;
+      interval.value = setInterval(() => {
+        time.value--;
+        if (time.value === 0) {
+          time.value = 60;
+          codeMsg.value = "重新发送";
+          verifyStatus.value = false;
+          codeSent.value = false;
+          clearInterval(interval.value);
+        } else {
+          codeMsg.value = time.value;
+        }
+      }, 1000);
+    } else {
+      verifyStatus.value = false;
+      Message.warning(res.message);
+    }
+  }).catch(() => {
+    verifyStatus.value = false;
+  });
+}
+function verifyChange(con) {
+  // 拼图验证码回显
+  if (!con.status) return;
+
+  if (type.value === true) {
+    // 账号密码登录
+    let data = JSON.parse(JSON.stringify(formData));
+    data.password = md5(data.password);
+    hideVerify();
+    Spin.show();
+    apiLogin
+      .login(data)
+      .then((res) => {
+        if (res.success) {
+          loginSuccess(res.result.accessToken,res.result.refreshToken);
+        } else {
+          Spin.hide();
+          Message.error(res.message);
+        }
+      })
+      .catch(() => {
+        Spin.hide();
+      });
+  } else {
+    verifyStatus.value = true;
+    hideVerify();
+    dispatchSms();
+  }
+}
+function handleWebLogin(type) {
+  // 第三方登录
+  webLogin(type);
+}
+function loginSuccess(accessToken,refreshToken){
+  Message.success("登录成功");
+  storage.setItem("accessToken", accessToken);
+  storage.setItem("refreshToken", refreshToken);
+  apiLogin.getMemberMsg().then((res) => {
+    Spin.hide();
+    if (res.success) {
+      storage.setItem("userInfo", res.result);
+      let query = route.query;
+      if (query.rePath) {
+        router.push({
+          path: query.rePath,
+          query: JSON.parse(query.query),
+        });
+      } else {
+        router.push("/");
+      }
+    }
+  });
+}
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value);
+});
+
+onMounted(() => {
+  let uuid = route.query.state;
+  if (uuid) {
+    storage.setItem("uuid", uuid);
+    loginCallback(uuid).then((res) => {
+      if (res.success) {
+        loginSuccess(res.result.accessToken,res.result.refreshToken);
+      }
+    });
+  }
+});
+
+watch(type, (v) => {
+  if (v) {
+    formInlineRef.value.resetFields();
+  } else {
+    formSmsRef.value.resetFields();
+  }
+  verifyStatus.value = false;
+  codeSent.value = false;
+  hideVerify();
+  clearInterval(interval.value);
+  codeMsg.value = "发送验证码";
+  time.value = 60;
+});
+
+watch(
+  () => formSms.mobile,
+  () => {
+    codeSent.value = false;
+    verifyStatus.value = false;
+    clearInterval(interval.value);
+    codeMsg.value = "发送验证码";
+    time.value = 60;
+  }
+);
 </script>
 <style scoped lang="scss">
 .login {
diff --git a/buyer/src/pages/Merchant.vue b/buyer/src/pages/Merchant.vue
index 2114bc2c0..65c502e9e 100644
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -65,7 +65,7 @@
 
     <div v-if="showFloorView">
       <!-- 楼层装修部分 -->
-      <model-form ref="modelForm" :data="modelForm"></model-form>
+      <model-form ref="modelFormRef" :data="modelForm"></model-form>
     </div>
 
 
@@ -120,9 +120,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-import { Message } from "@/utils/message";
+import { reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { Message, Modal } from "@/utils/message";
 import { ArrowDown, StarFilled } from '@element-plus/icons-vue';
 import {getCateById, getDetailById} from "@/api/shopentry";
 import {
@@ -130,254 +132,325 @@ import {
   collectStore,
   isStoreCollection,
 } from "@/api/member";
-import {goodsList} from "@/api/goods";
+import {goodsList as goodsListApi} from "@/api/goods";
 import Search from "@/components/Search";
 import ModelForm from "@/components/indexDecorate/ModelForm";
 import storage from "@/plugins/storage";
 import {getFloorStoreData} from "@/api/index.js";
 import { seckillByDay } from "@/api/promotion";
-import imTalk from '@/components/mixes/talkIm'
+import { getIMDetail } from "@/api/common";
+import { getMemberMsg } from "@/api/login";
 
-export default {
-  name: "Merchant",
-  components: { Search, ModelForm, StarFilled, ArrowDown },
-  mixins: [imTalk],
-  data() {
-    return {
-      // 店铺装修的内容
-      modelForm: {list: []}, // 楼层装修数据
-      topAdvert: {}, // 顶部广告
-      showNav: false, // 是否展示分类栏
-      topSearchShow: false, // 滚动后顶部搜索栏展示
-      carouselLarge: false, // 不同轮播分类尺寸
-      carouselOpacity: false, // 不同轮播分类样式,
-      enablePageData: false, //是否显示楼层装修内容
-      basePageData: false, //基础店铺信息
-      showFloorView: false, // 是否展示楼层装修（有有效装修数据时为 true）
-      storeMsg: {}, // 店铺信息
-      cateList: [], // 店铺分裂
-      goodsList: [], // 商品列表
-      total: 0, // 商品数量
-      params: {
-        // 请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        keyword: "",
-        storeId: this.$route.query.id,
-        storeCatId: "",
-      },
-      cateName: "店铺推荐", // 分类名称
-      storeCollected: false, // 是否收藏
-    };
-  },
-  created() {
-    this.getStoreMsg();
-    window.onscroll = () => {
-      const top =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      this.topSearchShow = top > 300;
-    };
-  },
-  methods: {
-    isFloorEnabled() {
-      const pageShow = this.storeMsg && this.storeMsg.pageShow;
-      return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
-    },
-    loadStoreGoodsView() {
-      this.showFloorView = false;
-      this.getGoodsList();
-      this.getCateList();
-    },
-    getIndexData() {
-      getFloorStoreData({
-        clientType: "PC",
-        num: this.$route.query.id,
-        pageType: "STORE",
-      })
-        .then(async (res) => {
-          if (res.success && res.result?.pageData) {
-            try {
-              await this.parsePageData(res.result.pageData);
-              this.showFloorView = true;
-            } catch {
-              this.loadStoreGoodsView();
-            }
-          } else {
-            this.loadStoreGoodsView();
-          }
-        })
-        .catch(() => {
-          this.loadStoreGoodsView();
-        });
-    },
-    async parsePageData(pageData) {
-      const dataJson = JSON.parse(pageData);
-      for (let i = 0; i < dataJson.list.length; i++) {
-        const type = dataJson.list[i].type;
-        if (type === "carousel2") {
-          this.carouselLarge = true;
-        } else if (type === "carousel1") {
-          this.carouselLarge = true;
-          this.carouselOpacity = true;
-        } else if (type === "seckill") {
-          dataJson.list[i].options.list = await this.getListByDay();
+defineOptions({ name: "Merchant" });
+
+const route = useRoute();
+const router = useRouter();
+
+// 店铺装修的内容
+const modelForm = ref({list: []}); // 楼层装修数据
+const modelFormRef = ref(null);
+const topAdvert = ref({}); // 顶部广告
+const showNav = ref(false); // 是否展示分类栏
+const topSearchShow = ref(false); // 滚动后顶部搜索栏展示
+const carouselLarge = ref(false); // 不同轮播分类尺寸
+const carouselOpacity = ref(false); // 不同轮播分类样式,
+const enablePageData = ref(false); //是否显示楼层装修内容
+const basePageData = ref(false); //基础店铺信息
+const showFloorView = ref(false); // 是否展示楼层装修（有有效装修数据时为 true）
+const storeMsg = ref({}); // 店铺信息
+const cateList = ref([]); // 店铺分裂
+const goodsList = ref([]); // 商品列表
+const total = ref(0); // 商品数量
+const params = reactive({
+  // 请求参数
+  pageNumber: 1,
+  pageSize: 20,
+  keyword: "",
+  storeId: route.query.id,
+  storeCatId: "",
+});
+const cateName = ref("店铺推荐"); // 分类名称
+const storeCollected = ref(false); // 是否收藏
+// 原 talkIm mixin 的 IM 链接
+const IMLink = ref("");
+
+function isFloorEnabled() {
+  const pageShow = storeMsg.value && storeMsg.value.pageShow;
+  return pageShow === "1" || pageShow === 1 || pageShow === "OPEN" || pageShow === true;
+}
+
+function loadStoreGoodsView() {
+  showFloorView.value = false;
+  getGoodsList();
+  getCateList();
+}
+
+function getIndexData() {
+  getFloorStoreData({
+    clientType: "PC",
+    num: route.query.id,
+    pageType: "STORE",
+  })
+    .then(async (res) => {
+      if (res.success && res.result?.pageData) {
+        try {
+          await parsePageData(res.result.pageData);
+          showFloorView.value = true;
+        } catch {
+          loadStoreGoodsView();
         }
+      } else {
+        loadStoreGoodsView();
       }
-      this.modelForm = dataJson;
-      storage.setItem("navList", dataJson.list[1]);
-      this.showNav = true;
-      this.topAdvert = dataJson.list[0];
-    },
-    async getListByDay() {
-      const res = await seckillByDay();
-      if (res.success && res.result?.length) {
-        return res.result;
-      }
-      return [];
-    },
+    })
+    .catch(() => {
+      loadStoreGoodsView();
+    });
+}
 
+async function parsePageData(pageData) {
+  const dataJson = JSON.parse(pageData);
+  for (let i = 0; i < dataJson.list.length; i++) {
+    const type = dataJson.list[i].type;
+    if (type === "carousel2") {
+      carouselLarge.value = true;
+    } else if (type === "carousel1") {
+      carouselLarge.value = true;
+      carouselOpacity.value = true;
+    } else if (type === "seckill") {
+      dataJson.list[i].options.list = await getListByDay();
+    }
+  }
+  modelForm.value = dataJson;
+  storage.setItem("navList", dataJson.list[1]);
+  showNav.value = true;
+  topAdvert.value = dataJson.list[0];
+}
 
-    checkStoreCollectionStatus() {
-      const storeId = this.storeMsg && this.storeMsg.storeId;
-      if (!storeId || !this.Cookies.getItem("userInfo")) {
-        return;
+async function getListByDay() {
+  const res = await seckillByDay();
+  if (res.success && res.result?.length) {
+    return res.result;
+  }
+  return [];
+}
+
+function checkStoreCollectionStatus() {
+  const storeId = storeMsg.value && storeMsg.value.storeId;
+  if (!storeId || !storage.getItem("userInfo")) {
+    return;
+  }
+  isStoreCollection("STORE", storeId)
+    .then((res) => {
+      if (res.success && res.result) {
+        storeCollected.value = true;
       }
-      isStoreCollection("STORE", storeId)
-        .then((res) => {
-          if (res.success && res.result) {
-            this.storeCollected = true;
-          }
-        })
-        .catch(() => {
-          // 收藏状态查询失败不影响店铺页展示，静默处理
-        });
-    },
-    getStoreMsg() {
-      const storeId = this.$route.query.id;
-      if (!storeId) {
-        Message.warning("店铺不存在");
-        return;
-      }
-      getDetailById(storeId)
-        .then((res) => {
-          if (res.success && res.result) {
-            this.storeMsg = res.result;
-            document.title = this.storeMsg.storeName || "店铺";
-            this.checkStoreCollectionStatus();
-            if (this.isFloorEnabled()) {
-              this.getIndexData();
-            } else {
-              this.loadStoreGoodsView();
-            }
-          } else {
-            this.storeMsg = { storeId };
-            this.loadStoreGoodsView();
-          }
-        })
-        .catch(() => {
-          this.storeMsg = { storeId };
-          this.loadStoreGoodsView();
-        });
-    },
-    getCateList() {
-      // 店铺分类
-      getCateById(this.$route.query.id).then((res) => {
-        if (res.success) {
-          this.cateList = res.result;
-        }
-      });
-    },
-    getGoodsList() {
-      // 商品信息
-      goodsList(this.params)
-        .then((res) => {
-          if (res.success) {
-            this.goodsList = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch((err) => {
-          console.warn('获取商品列表失败', err);
-        });
-    },
-    goGoodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: {skuId, goodsId},
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    search(val) {
-      // 搜索本店商品
-      this.params.keyword = val;
-      this.getGoodsList();
-    },
-    searchByCate(cate) {
-      // 搜索同分类下商品
-      this.params.storeCatId = cate.id;
-      this.params.pageNumber = 1;
-      this.cateName = cate.labelName;
-      this.getGoodsList();
-    },
-    isCateActive(cate) {
-      if (!cate || !this.params.storeCatId) return false;
-      if (this.params.storeCatId === cate.id) return true;
-      return Array.isArray(cate.children) && cate.children.some((sec) => sec.id === this.params.storeCatId);
-    },
-    formatGrade(grade) {
-      if (grade === null || grade === undefined || grade === "") return 100;
-      const num = Number(grade);
-      if (Number.isNaN(num)) return 100;
-      const fixed = Number(num.toFixed(1));
-      return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
-    },
-    // 分页 修改页码
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.getGoodsList();
-    },
-    // 分页 修改页数
-    changePageSize(val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getGoodsList();
-    },
-    async collect() {
-      // 收藏店铺
-      const storeId = this.storeMsg && this.storeMsg.storeId;
-      if (!storeId) {
-        return;
-      }
-      if (!this.Cookies.getItem("userInfo")) {
-        Message.warning("请先登录");
-        this.$router.push("/login");
-        return;
-      }
-      try {
-        if (this.storeCollected) {
-          const cancel = await cancelStoreCollect("STORE", storeId);
-          if (cancel.success) {
-            Message.success("已取消收藏");
-            this.storeCollected = false;
-          }
+    })
+    .catch(() => {
+      // 收藏状态查询失败不影响店铺页展示，静默处理
+    });
+}
+
+function getStoreMsg() {
+  const storeId = route.query.id;
+  if (!storeId) {
+    Message.warning("店铺不存在");
+    return;
+  }
+  getDetailById(storeId)
+    .then((res) => {
+      if (res.success && res.result) {
+        storeMsg.value = res.result;
+        document.title = storeMsg.value.storeName || "店铺";
+        checkStoreCollectionStatus();
+        if (isFloorEnabled()) {
+          getIndexData();
         } else {
-          const collect = await collectStore("STORE", storeId);
-          if (collect.success || collect.code === 200) {
-            this.storeCollected = true;
-            Message.success(
-              "收藏店铺成功,可以前往个人中心我的收藏查看"
-            );
-          }
-        }
-      } catch (err) {
-        const msg = err?.message || err?.data?.message || "";
-        if (msg.includes("重复收藏")) {
-          this.storeCollected = true;
+          loadStoreGoodsView();
         }
+      } else {
+        storeMsg.value = { storeId };
+        loadStoreGoodsView();
       }
+    })
+    .catch(() => {
+      storeMsg.value = { storeId };
+      loadStoreGoodsView();
+    });
+}
+
+function getCateList() {
+  // 店铺分类
+  getCateById(route.query.id).then((res) => {
+    if (res.success) {
+      cateList.value = res.result;
+    }
+  });
+}
+
+function getGoodsList() {
+  // 商品信息
+  goodsListApi(params)
+    .then((res) => {
+      if (res.success) {
+        goodsList.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .catch((err) => {
+      console.warn('获取商品列表失败', err);
+    });
+}
+
+function goGoodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: {skuId, goodsId},
+  });
+  window.open(routeUrl.href, "_blank");
+}
+
+function search(val) {
+  // 搜索本店商品
+  params.keyword = val;
+  getGoodsList();
+}
+
+function searchByCate(cate) {
+  // 搜索同分类下商品
+  params.storeCatId = cate.id;
+  params.pageNumber = 1;
+  cateName.value = cate.labelName;
+  getGoodsList();
+}
+
+function isCateActive(cate) {
+  if (!cate || !params.storeCatId) return false;
+  if (params.storeCatId === cate.id) return true;
+  return Array.isArray(cate.children) && cate.children.some((sec) => sec.id === params.storeCatId);
+}
+
+function formatGrade(grade) {
+  if (grade === null || grade === undefined || grade === "") return 100;
+  const num = Number(grade);
+  if (Number.isNaN(num)) return 100;
+  const fixed = Number(num.toFixed(1));
+  return fixed % 1 === 0 ? fixed.toFixed(0) : String(fixed);
+}
+
+// 分页 修改页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getGoodsList();
+}
+
+// 分页 修改页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getGoodsList();
+}
+
+async function collect() {
+  // 收藏店铺
+  const storeId = storeMsg.value && storeMsg.value.storeId;
+  if (!storeId) {
+    return;
+  }
+  if (!storage.getItem("userInfo")) {
+    Message.warning("请先登录");
+    router.push("/login");
+    return;
+  }
+  try {
+    if (storeCollected.value) {
+      const cancel = await cancelStoreCollect("STORE", storeId);
+      if (cancel.success) {
+        Message.success("已取消收藏");
+        storeCollected.value = false;
+      }
+    } else {
+      const collect = await collectStore("STORE", storeId);
+      if (collect.success || collect.code === 200) {
+        storeCollected.value = true;
+        Message.success(
+          "收藏店铺成功,可以前往个人中心我的收藏查看"
+        );
+      }
+    }
+  } catch (err) {
+    const msg = err?.message || err?.data?.message || "";
+    if (msg.includes("重复收藏")) {
+      storeCollected.value = true;
+    }
+  }
+}
+
+// 原 talkIm mixin 的登录提示
+function promptLogin() {
+  Modal.confirm({
+    title: "温馨提示",
+    content: "请登录后执行此操作",
+    okText: "立即登录",
+    cancelText: "取消",
+    onOk: () => {
+      router.push({
+        path: "/login",
+        query: {
+          rePath: route.path,
+          query: JSON.stringify(route.query || {}),
+        },
+      });
     },
-  },
+  });
+}
+
+// 获取im信息（原 talkIm mixin）
+async function getIMDetailMethods() {
+  let res = await getIMDetail();
+  if (res.success) {
+    IMLink.value = res.result;
+  }
+}
+
+// 跳转im客服（原 talkIm mixin）
+async function IMService(id, goodsId, skuId) {
+  if (!storage.getItem("accessToken")) {
+    promptLogin();
+    return;
+  }
+
+  try {
+    await getIMDetailMethods();
+    const userInfo = await getMemberMsg();
+    if (!userInfo.success) {
+      promptLogin();
+      return;
+    }
+
+    const accessToken = storage.getItem("accessToken");
+    const storeId = id || storeMsg.value?.storeId;
+    const baseUrl = `${IMLink.value}?token=${accessToken}&id=${storeId}`;
+
+    if (goodsId && skuId) {
+      window.open(`${baseUrl}&goodsId=${goodsId}&skuId=${skuId}`);
+    } else {
+      window.open(baseUrl);
+    }
+  } catch {
+    // token 过期等场景由 request 拦截器处理；未登录时避免未捕获异常
+    if (!storage.getItem("accessToken")) {
+      promptLogin();
+    }
+  }
+}
+
+getStoreMsg();
+window.onscroll = () => {
+  const top =
+    document.documentElement.scrollTop || document.body.scrollTop;
+  topSearchShow.value = top > 300;
 };
 </script>
 
diff --git a/buyer/src/pages/NotFound.vue b/buyer/src/pages/NotFound.vue
index 29fa520b4..2f34e14b6 100644
--- a/buyer/src/pages/NotFound.vue
+++ b/buyer/src/pages/NotFound.vue
@@ -11,10 +11,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "NotFound",
-};
+<script setup>
+defineOptions({ name: "NotFound" });
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/ShoppingCart.vue b/buyer/src/pages/ShoppingCart.vue
index c4c9ddeae..3f4cc996b 100644
--- a/buyer/src/pages/ShoppingCart.vue
+++ b/buyer/src/pages/ShoppingCart.vue
@@ -45,23 +45,28 @@ export default {
     window.scrollTo(0, 0);
     next();
   },
-  data () {
-    return {
-      detail: {} // 商品详情
-    };
-  },
-  mounted () {
-    const { skuId, goodsId, thumbnail, goodsName } = this.$route.query;
-    this.detail = {
-      skuId,
-      goodsId,
-      thumbnail,
-      goodsName
-    };
-  }
 };
 </script>
 
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+
+const detail = ref({}); // 商品详情
+
+onMounted(() => {
+  const { skuId, goodsId, thumbnail, goodsName } = route.query;
+  detail.value = {
+    skuId,
+    goodsId,
+    thumbnail,
+    goodsName
+  };
+});
+</script>
+
 <style scoped lang="scss">
 /****************************加入购物车页面开始*****************************/
 .add-info-box-container{
diff --git a/buyer/src/pages/SignUp.vue b/buyer/src/pages/SignUp.vue
index 779e4afce..91b1cb46c 100644
--- a/buyer/src/pages/SignUp.vue
+++ b/buyer/src/pages/SignUp.vue
@@ -3,7 +3,7 @@
     <div class="top-content">
       <div class="top-inner">
         <div class="logo-box">
-          <img :src="$store.state.logoImg" @click="$router.push('/')" />
+          <img :src="logoImg" @click="$router.push('/')" />
           <div>欢迎注册</div>
         </div>
         <div class="to-login">已有账号？<a @click.stop="$router.push('login')">立即登录</a></div>
@@ -17,7 +17,7 @@
       />
       <div class="signup-card">
         <el-form
-          ref="formRegist"
+          ref="formRegistRef"
           :model="formRegist"
           :rules="ruleInline"
           class="signup-form"
@@ -91,8 +91,9 @@
   </div>
 </template>
 
-<script>
-
+<script setup>
+import { onMounted, reactive, ref, computed } from "vue";
+import { useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import * as RegExp from '@/plugins/RegExp.js';
 import { md5 } from '@/plugins/md5.js';
@@ -101,120 +102,126 @@ import { sendSms } from '@/api/common.js';
 import Verify from '@/components/verify';
 import { User, Lock, Iphone, Document } from '@element-plus/icons-vue';
 import config from '@/config';
-export default {
-  name: 'SignUp',
-  components: { Verify, User, Lock, Iphone, Document },
-  data () {
-    return {
-      config,
-      year: new Date().getFullYear(),
-      formRegist: {
-        // 注册表单
-        mobilePhone: '',
-        code: '',
-        username: '',
-        password: ''
-      },
-      ruleInline: {
-        // 验证规则
-        username: [{ required: true, message: '请输入用户名' }],
-        password: [
-          { required: true, message: '请输入密码' },
-          { type: 'string', min: 6, message: '密码不能少于6位' }
-        ],
-        mobilePhone: [
-          { required: true, message: '请输入手机号码' },
-          {
-            pattern: RegExp.mobile,
-            trigger: 'blur',
-            message: '请输入正确的手机号'
-          }
-        ],
-        code: [{ required: true, message: '请输入手机验证码' }]
-      },
-      verifyStatus: false, // 是否验证通过
-      verifyType: 'REGISTER', // 验证状态
-      codeMsg: '发送验证码', // 提示文字
-      interval: '', // 定时器
-      time: 60 // 倒计时
-    };
-  },
-  methods: {
-    hideVerify() {
-      this.$refs.verify?.close?.();
-    },
-    // 注册
-    handleRegist () {
-      this.$refs.formRegist.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-        const data = JSON.parse(JSON.stringify(this.formRegist));
-        data.password = md5(data.password);
-        apiLogin.regist(data).then((res) => {
-          if (res.success) {
-            Message.success('注册成功!');
-            this.$router.push('login');
-          } else {
-            Message.warning(res.message || '注册失败');
-          }
-        }).catch((err) => {
-          console.warn('注册请求失败', err);
-        });
-      }).catch(() => {
-        // 表单校验使用回调模式，此 catch 仅为兜底
-      });
-    },
-    // 发送短信验证码
-    sendCode () {
-      if (this.time !== 60) return;
-      if (this.formRegist.mobilePhone === '') {
-        Message.warning('请先填写手机号');
-        return;
-      }
-      if (!RegExp.mobile.test(this.formRegist.mobilePhone)) {
-        Message.warning('请输入正确的手机号');
-        return;
-      }
-      this.$refs.verify?.init();
-    },
-    dispatchSms () {
-      sendSms({
-        mobile: this.formRegist.mobilePhone,
-        verificationEnums: 'REGISTER'
-      }).then(res => {
-        if (res.success) {
-          Message.success('验证码发送成功');
-          this.interval = setInterval(() => {
-            this.time--;
-            if (this.time === 0) {
-              this.time = 60;
-              this.codeMsg = '重新发送';
-              this.verifyStatus = false;
-              clearInterval(this.interval);
-            } else {
-              this.codeMsg = this.time;
-            }
-          }, 1000);
-        } else {
-          this.verifyStatus = false;
-          Message.warning(res.message || '验证码发送失败');
-        }
-      }).catch(() => {
-        this.verifyStatus = false;
-      });
-    },
-    verifyChange (con) {
-      if (!con.status) return;
-      this.hideVerify();
-      this.verifyStatus = true;
-      this.dispatchSms();
+import { useAppStore } from '@/stores/app';
+
+defineOptions({ name: 'SignUp' });
+
+const router = useRouter();
+const appStore = useAppStore();
+const logoImg = computed(() => appStore.logoImg);
+
+const year = new Date().getFullYear();
+const formRegist = reactive({
+  // 注册表单
+  mobilePhone: '',
+  code: '',
+  username: '',
+  password: ''
+});
+const ruleInline = reactive({
+  // 验证规则
+  username: [{ required: true, message: '请输入用户名' }],
+  password: [
+    { required: true, message: '请输入密码' },
+    { type: 'string', min: 6, message: '密码不能少于6位' }
+  ],
+  mobilePhone: [
+    { required: true, message: '请输入手机号码' },
+    {
+      pattern: RegExp.mobile,
+      trigger: 'blur',
+      message: '请输入正确的手机号'
     }
-  },
-  mounted () {
-    this.$refs.formRegist.resetFields();
+  ],
+  code: [{ required: true, message: '请输入手机验证码' }]
+});
+const verifyStatus = ref(false); // 是否验证通过
+const verifyType = ref('REGISTER'); // 验证状态
+const codeMsg = ref('发送验证码'); // 提示文字
+const interval = ref(''); // 定时器
+const time = ref(60); // 倒计时
+
+const formRegistRef = ref(null);
+const verify = ref(null);
+
+function hideVerify() {
+  verify.value?.close?.();
+}
+
+// 注册
+function handleRegist () {
+  formRegistRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    const data = JSON.parse(JSON.stringify(formRegist));
+    data.password = md5(data.password);
+    apiLogin.regist(data).then((res) => {
+      if (res.success) {
+        Message.success('注册成功!');
+        router.push('login');
+      } else {
+        Message.warning(res.message || '注册失败');
+      }
+    }).catch((err) => {
+      console.warn('注册请求失败', err);
+    });
+  }).catch(() => {
+    // 表单校验使用回调模式，此 catch 仅为兜底
+  });
+}
+
+// 发送短信验证码
+function sendCode () {
+  if (time.value !== 60) return;
+  if (formRegist.mobilePhone === '') {
+    Message.warning('请先填写手机号');
+    return;
   }
-};
+  if (!RegExp.mobile.test(formRegist.mobilePhone)) {
+    Message.warning('请输入正确的手机号');
+    return;
+  }
+  verify.value?.init();
+}
+
+function dispatchSms () {
+  sendSms({
+    mobile: formRegist.mobilePhone,
+    verificationEnums: 'REGISTER'
+  }).then(res => {
+    if (res.success) {
+      Message.success('验证码发送成功');
+      interval.value = setInterval(() => {
+        time.value--;
+        if (time.value === 0) {
+          time.value = 60;
+          codeMsg.value = '重新发送';
+          verifyStatus.value = false;
+          clearInterval(interval.value);
+        } else {
+          codeMsg.value = time.value;
+        }
+      }, 1000);
+    } else {
+      verifyStatus.value = false;
+      Message.warning(res.message || '验证码发送失败');
+    }
+  }).catch(() => {
+    verifyStatus.value = false;
+  });
+}
+
+function verifyChange (con) {
+  if (!con.status) return;
+  hideVerify();
+  verifyStatus.value = true;
+  dispatchSms();
+}
+
+onMounted(() => {
+  formRegistRef.value.resetFields();
+});
 </script>
 <style scoped lang="scss">
 .sign-up {
diff --git a/buyer/src/pages/Topic.vue b/buyer/src/pages/Topic.vue
index fd8748761..6a54a57a5 100644
--- a/buyer/src/pages/Topic.vue
+++ b/buyer/src/pages/Topic.vue
@@ -4,33 +4,31 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import Index from './Index.vue'
 import { getTopicData } from '@/api/index'
-export default {
-  data() {
-    return {
-      pageData: ""
-    }
-  },
-  components: { Index },
-  mounted() {
-    // 接收id进行查询
-    const id = this.$route.query.id
-    this.init(id)
-  },
-  methods: {
-    async init(id) {
-      const res = await getTopicData(id)
-      if (res.success) {
-        // 直接复用首页就行
-        if (res.result.pageData) {
-          this.pageData = JSON.parse(res.result.pageData)
-        }
-      }
+
+const route = useRoute()
+
+const pageData = ref("")
+
+async function init(id) {
+  const res = await getTopicData(id)
+  if (res.success) {
+    // 直接复用首页就行
+    if (res.result.pageData) {
+      pageData.value = JSON.parse(res.result.pageData)
     }
   }
 }
+
+onMounted(() => {
+  // 接收id进行查询
+  const id = route.query.id
+  init(id)
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/buyer/src/pages/article/detail.vue b/buyer/src/pages/article/detail.vue
index c97a30283..db4ffafb1 100644
--- a/buyer/src/pages/article/detail.vue
+++ b/buyer/src/pages/article/detail.vue
@@ -10,35 +10,36 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { articleDetail } from "@/api/common.js";
 import config from "@/config/index";
-export default {
-  data() {
-    return {
-      config,
-      detail: "",
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    back() {
-      this.$router.push("/");
-    },
-    // 初始化文章
-    init() {
-      const id = this.$route.query.id;
 
-      articleDetail(id).then((res) => {
-        if (res.success) {
-          this.detail = res.result;
-        }
-      });
-    },
-  },
-};
+const route = useRoute();
+const router = useRouter();
+
+const configData = ref(config);
+const detail = ref("");
+
+function back() {
+  router.push("/");
+}
+
+// 初始化文章
+function init() {
+  const id = route.query.id;
+
+  articleDetail(id).then((res) => {
+    if (res.success) {
+      detail.value = res.result;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/buyer/src/pages/article/index.vue b/buyer/src/pages/article/index.vue
index 89d8d88da..438f0a545 100644
--- a/buyer/src/pages/article/index.vue
+++ b/buyer/src/pages/article/index.vue
@@ -48,87 +48,89 @@
   </div>
 </template>
 
-<script>
-import { articleCateList, articleDetail, articleList } from '@/api/common.js'
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { articleCateList, articleDetail, articleList as fetchArticleList } from '@/api/common.js'
 
-export default {
-  name: 'ArticleIndex',
-  data () {
-    return {
-      list: [],
-      detail: '',
-      articleList: [],
-      activeName: '1347456734864367616',
-      openName: [],
-      menuKey: 0,
-      params: {
-        pageNumber: 1,
-        pageSize: 100,
-        categoryId: '',
-        sort: 'sort'
-      },
-      showList: true
-    };
-  },
-  methods: {
-    onSelect (id) {
-      this.getList(id)
-      this.detail = ''
-      this.showList = true
-    },
-    getCateList () {
-      articleCateList().then(res => {
-        if (res.success) {
-          this.list = res.result || []
-          this.openName = []
-          if (this.$route.query.id && this.detail && this.detail.categoryId) {
-            this.activeName = this.detail.categoryId
-            this.list.forEach(e => {
-              const children = e.children || []
-              const hitParent = String(e.id) === String(this.activeName)
-              const hitChild = children.some(i => i && String(i.id) === String(this.activeName))
-              if ((hitParent || hitChild) && children.length) {
-                this.openName.push(String(e.id))
-              }
-            })
-          } else if (this.list[0] && this.list[0].id) {
-            this.activeName = this.list[0].id
-            if (this.list[0].children && this.list[0].children.length) {
-              this.openName.push(String(this.list[0].id))
-            }
-          }
-          this.menuKey++
-          if (this.activeName) {
-            this.getList(this.activeName)
+defineOptions({ name: 'ArticleIndex' })
+
+const route = useRoute()
+
+const list = ref([])
+const detail = ref('')
+const articleList = ref([])
+const activeName = ref('1347456734864367616')
+const openName = ref([])
+const menuKey = ref(0)
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 100,
+  categoryId: '',
+  sort: 'sort'
+})
+const showList = ref(true)
+
+function onSelect (id) {
+  getList(id)
+  detail.value = ''
+  showList.value = true
+}
+
+function getCateList () {
+  articleCateList().then(res => {
+    if (res.success) {
+      list.value = res.result || []
+      openName.value = []
+      if (route.query.id && detail.value && detail.value.categoryId) {
+        activeName.value = detail.value.categoryId
+        list.value.forEach(e => {
+          const children = e.children || []
+          const hitParent = String(e.id) === String(activeName.value)
+          const hitChild = children.some(i => i && String(i.id) === String(activeName.value))
+          if ((hitParent || hitChild) && children.length) {
+            openName.value.push(String(e.id))
           }
+        })
+      } else if (list.value[0] && list.value[0].id) {
+        activeName.value = list.value[0].id
+        if (list.value[0].children && list.value[0].children.length) {
+          openName.value.push(String(list.value[0].id))
         }
-      })
-    },
-    getList (id) {
-      this.params.categoryId = id
-      articleList(this.params).then(res => {
-        if (res.success) {
-          this.articleList = res.result.records
-        }
-      })
-    },
-    async getDetail (id) {
-      await articleDetail(id).then(res => {
-        if (res.success) {
-          this.detail = res.result
-          this.showList = false
-        }
-      })
+      }
+      menuKey.value++
+      if (activeName.value) {
+        getList(activeName.value)
+      }
     }
-  },
-  async mounted () {
-    const articleId = this.$route.query.id
-    if (articleId) {
-      await this.getDetail(articleId)
+  })
+}
+
+function getList (id) {
+  params.categoryId = id
+  fetchArticleList(params).then(res => {
+    if (res.success) {
+      articleList.value = res.result.records
     }
-    this.getCateList()
+  })
+}
+
+async function getDetail (id) {
+  await articleDetail(id).then(res => {
+    if (res.success) {
+      detail.value = res.result
+      showList.value = false
+    }
+  })
+}
+
+onMounted(async () => {
+  const articleId = route.query.id
+  if (articleId) {
+    await getDetail(articleId)
   }
-};
+  getCateList()
+})
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/Main.vue b/buyer/src/pages/home/Main.vue
index 7beefdf61..2756a5c6e 100644
--- a/buyer/src/pages/home/Main.vue
+++ b/buyer/src/pages/home/Main.vue
@@ -44,88 +44,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Bell } from "@element-plus/icons-vue";
 import storage from "@/plugins/storage";
 import { getOrderList } from "@/api/order";
 import { afterSaleList, getMembersWallet, memberCouponList } from "@/api/member";
 import { refreshUnreadMessage } from "@/utils/unreadMessage";
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "UserCenterHome" });
+
+const router = useRouter();
+const appStore = useAppStore();
 
 function totalOf(res) {
   return res && res.success ? Number(res.result && res.result.total) || 0 : 0;
 }
 
-export default {
-  name: "UserCenterHome",
-  components: { Bell },
-  data() {
-    return {
-      displayName: "会员",
-      waitPay: 0,
-      waitShip: 0,
-      waitReceive: 0,
-      afterSale: 0,
-      couponCount: 0,
-      balance: 0,
-    };
-  },
-  computed: {
-    unreadMsg() {
-      return Number(this.$store.state.unreadMsg) || 0;
-    },
-    unreadLabel() {
-      return this.unreadMsg > 99 ? "99+" : String(this.unreadMsg);
-    },
-    orderStats() {
-      return [
-        { key: "pay", label: "待付款", count: this.waitPay, action: () => this.goOrder("WAIT_PAY") },
-        { key: "ship", label: "待发货", count: this.waitShip, action: () => this.goOrder("WAIT_SHIP") },
-        { key: "receive", label: "待收货", count: this.waitReceive, action: () => this.goOrder("WAIT_USE") },
-        { key: "after", label: "售后", count: this.afterSale, action: () => this.go("AfterSale") },
-      ];
-    },
-  },
-  mounted() {
-    this.readUser();
-    this.loadSummary();
-  },
-  methods: {
-    readUser() {
-      try {
-        const raw = storage.getItem("userInfo");
-        const user = raw ? JSON.parse(raw) : {};
-        this.displayName = user.nickName || user.username || "会员";
-      } catch {
-        this.displayName = "会员";
-      }
-    },
-    loadSummary() {
-      const page = { pageNumber: 1, pageSize: 1 };
-      Promise.all([
-        getOrderList({ ...page, tag: "WAIT_PAY" }).catch(() => null),
-        getOrderList({ ...page, tag: "WAIT_SHIP" }).catch(() => null),
-        getOrderList({ ...page, tag: "WAIT_USE" }).catch(() => null),
-        afterSaleList({ ...page, sort: "createTime", order: "desc" }).catch(() => null),
-        memberCouponList({ ...page, memberCouponStatus: "NEW" }).catch(() => null),
-        getMembersWallet().catch(() => null),
-        refreshUnreadMessage(),
-      ]).then(([pay, ship, receive, afterSale, coupon, wallet]) => {
-        this.waitPay = totalOf(pay);
-        this.waitShip = totalOf(ship);
-        this.waitReceive = totalOf(receive);
-        this.afterSale = totalOf(afterSale);
-        this.couponCount = totalOf(coupon);
-        this.balance = wallet && wallet.success ? wallet.result.memberWallet || 0 : 0;
-      });
-    },
-    go(name) {
-      this.$router.push({ name });
-    },
-    goOrder(tag) {
-      this.$router.push({ name: "MyOrder", query: { tag } });
-    },
-  },
-};
+const displayName = ref("会员");
+const waitPay = ref(0);
+const waitShip = ref(0);
+const waitReceive = ref(0);
+const afterSale = ref(0);
+const couponCount = ref(0);
+const balance = ref(0);
+
+const unreadMsg = computed(() => appStore.unreadMsg);
+const unreadLabel = computed(() => (unreadMsg.value > 99 ? "99+" : String(unreadMsg.value)));
+const orderStats = computed(() => [
+  { key: "pay", label: "待付款", count: waitPay.value, action: () => goOrder("WAIT_PAY") },
+  { key: "ship", label: "待发货", count: waitShip.value, action: () => goOrder("WAIT_SHIP") },
+  { key: "receive", label: "待收货", count: waitReceive.value, action: () => goOrder("WAIT_USE") },
+  { key: "after", label: "售后", count: afterSale.value, action: () => go("AfterSale") },
+]);
+
+function readUser() {
+  try {
+    const raw = storage.getItem("userInfo");
+    const user = raw ? JSON.parse(raw) : {};
+    displayName.value = user.nickName || user.username || "会员";
+  } catch {
+    displayName.value = "会员";
+  }
+}
+
+function loadSummary() {
+  const page = { pageNumber: 1, pageSize: 1 };
+  Promise.all([
+    getOrderList({ ...page, tag: "WAIT_PAY" }).catch(() => null),
+    getOrderList({ ...page, tag: "WAIT_SHIP" }).catch(() => null),
+    getOrderList({ ...page, tag: "WAIT_USE" }).catch(() => null),
+    afterSaleList({ ...page, sort: "createTime", order: "desc" }).catch(() => null),
+    memberCouponList({ ...page, memberCouponStatus: "NEW" }).catch(() => null),
+    getMembersWallet().catch(() => null),
+    refreshUnreadMessage(),
+  ]).then(([pay, ship, receive, afterSaleRes, coupon, wallet]) => {
+    waitPay.value = totalOf(pay);
+    waitShip.value = totalOf(ship);
+    waitReceive.value = totalOf(receive);
+    afterSale.value = totalOf(afterSaleRes);
+    couponCount.value = totalOf(coupon);
+    balance.value = wallet && wallet.success ? wallet.result.memberWallet || 0 : 0;
+  });
+}
+
+function go(name) {
+  router.push({ name });
+}
+
+function goOrder(tag) {
+  router.push({ name: "MyOrder", query: { tag } });
+}
+
+onMounted(() => {
+  readUser();
+  loadSummary();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/AccountSafe.vue b/buyer/src/pages/home/memberCenter/AccountSafe.vue
index 4c5321536..51d765e7d 100644
--- a/buyer/src/pages/home/memberCenter/AccountSafe.vue
+++ b/buyer/src/pages/home/memberCenter/AccountSafe.vue
@@ -77,191 +77,187 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { Message, Modal } from "@/utils/message";
 import { Key, Link } from '@element-plus/icons-vue';
 // import { getPwdStatus } from '@/api/account';
 import storage from '@/plugins/storage'
 import { bindThirdAccount, getThirdAccountBindList, getWechatH5QrCode, unbindThirdAccount } from '@/api/login.js'
-export default {
-  components: { Key, Link },
-  name: 'AccountSafe',
-  data () {
-    return {
-      pwdStatus: '',
-      connectLoading: false,
-      bindModalVisible: false,
-      bindSubmitLoading: false,
-      connectBoundTypes: [],
-      thirdAccountTypes: [
-        { type: 'WECHAT', label: '微信' }
-      ],
-      qrCodeLoading: false,
-      qrCodeBase64: '',
-      bindForm: {
-        type: '',
-        typeLabel: '',
-        unionID: ''
-      }
-    }
-  },
-  computed: {
-    wechatConnect () {
-      return this.thirdAccountTypes[0]
-    },
-    qrCodeSrc () {
-      if (!this.qrCodeBase64) return ''
-      if (this.qrCodeBase64.startsWith('data:image')) return this.qrCodeBase64
-      return `data:image/png;base64,${this.qrCodeBase64}`
-    },
-    bindModalOkText () {
-      if (this.bindForm.type === 'WECHAT') return '我已完成绑定'
-      return '确定'
-    }
-  },
-  mounted () {
-    this.getPwdStatus()
-    this.refreshConnectBinds()
-  },
-  methods: {
-    // 设置支付密码
-    goModifyPwd () {
-      this.$router.push({name: 'ModifyPwd', query: { status: 2 }})
-    },
-    modifyPwd () { // 修改密码
-      this.$router.push({name: 'ModifyPwd', query: { status: 1 }})
-    },
-    // 获取密码状态
-    getPwdStatus () {},
-    // getPwdStatus () {
-    //   getPwdStatus().then(res => {
-    //     if (res) {
-    //       this.pwdStatus = '修改密码'
-    //     } else {
-    //       this.pwdStatus = '设置密码'
-    //     }
-    //   });
-    // }
-    isBound (type) {
-      return this.connectBoundTypes.includes(type)
-    },
-    refreshConnectBinds () {
-      this.connectLoading = true
-      return getThirdAccountBindList()
-        .then(res => {
-          if (res && res.success) {
-            this.connectBoundTypes = Array.isArray(res.result) ? res.result : []
-          }
-        })
-        .finally(() => {
-          this.connectLoading = false
-        })
-    },
-    openBindModal (item) {
-      this.bindForm.type = item.type
-      this.bindForm.typeLabel = item.label
-      this.bindForm.unionID = ''
-      this.qrCodeBase64 = ''
-      this.bindModalVisible = true
-      if (item.type === 'WECHAT') {
-        this.fetchWechatQrCode()
-      }
-    },
-    resetBindForm () {
-      this.bindForm.type = ''
-      this.bindForm.typeLabel = ''
-      this.bindForm.unionID = ''
-      this.qrCodeLoading = false
-      this.qrCodeBase64 = ''
-      this.bindSubmitLoading = false
-    },
-    fetchWechatQrCode () {
-      if (this.bindForm.type !== 'WECHAT') return
-      const rawUserInfo = storage.getItem('userInfo')
-      const userInfo = rawUserInfo ? JSON.parse(rawUserInfo) : null
-      const userId = userInfo && userInfo.id ? String(userInfo.id) : ''
-      if (!userId) {
-        this.qrCodeBase64 = ''
-        Message.error('未获取到当前用户ID，请重新登录后重试')
-        return
-      }
-      this.qrCodeLoading = true
-      getWechatH5QrCode({ scene: userId })
-        .then(res => {
-          if (res && res.success) {
-            this.qrCodeBase64 = res.result || ''
-            return
-          }
-          this.qrCodeBase64 = ''
-          Message.error((res && res.message) || '二维码获取失败')
-        })
-        .catch(() => {
-          this.qrCodeBase64 = ''
-        })
-        .finally(() => {
-          this.qrCodeLoading = false
-        })
-    },
-    submitBind () {
-      if (this.bindSubmitLoading) return
-      if (this.bindForm.type === 'WECHAT' && !this.bindForm.unionID) {
-        this.bindSubmitLoading = true
-        this.refreshConnectBinds()
-          .then(() => {
-            if (this.isBound(this.bindForm.type)) {
-              Message.success('绑定成功')
-              this.bindModalVisible = false
-              this.resetBindForm()
-              return
-            }
-            Message.warning('暂未检测到绑定，请扫码后重试')
-            this.$nextTick(() => {
-              this.bindModalVisible = true
-            })
-          })
-          .finally(() => {
-            this.bindSubmitLoading = false
-          })
-        return
-      }
-      if (!this.bindForm.type) {
-        Message.error('绑定类型不能为空')
-        return
-      }
-      if (!this.bindForm.unionID) {
-        Message.error('OpenID/UnionID 不能为空')
-        this.$nextTick(() => {
-          this.bindModalVisible = true
-        })
-        return
-      }
 
-      this.bindSubmitLoading = true
-      bindThirdAccount({ unionID: this.bindForm.unionID, type: this.bindForm.type })
-        .then(() => {
-          Message.success('绑定成功')
-          this.bindModalVisible = false
-          this.resetBindForm()
-          this.refreshConnectBinds()
-        })
-        .finally(() => {
-          this.bindSubmitLoading = false
-        })
-    },
-    confirmUnbind (item) {
-      Modal.confirm({
-        title: '解绑确认',
-        content: `<p>确定解绑 ${item.label} 吗？</p>`,
-        onOk: () => {
-          unbindThirdAccount({ type: item.type }).then(() => {
-            Message.success('解绑成功')
-            this.refreshConnectBinds()
-          })
-        }
-      })
-    }
+defineOptions({ name: 'AccountSafe' });
+
+const router = useRouter();
+
+const pwdStatus = ref('');
+const connectLoading = ref(false);
+const bindModalVisible = ref(false);
+const bindSubmitLoading = ref(false);
+const connectBoundTypes = ref([]);
+const thirdAccountTypes = ref([
+  { type: 'WECHAT', label: '微信' }
+]);
+const qrCodeLoading = ref(false);
+const qrCodeBase64 = ref('');
+const bindForm = reactive({
+  type: '',
+  typeLabel: '',
+  unionID: ''
+});
+
+const wechatConnect = computed(() => thirdAccountTypes.value[0]);
+const qrCodeSrc = computed(() => {
+  if (!qrCodeBase64.value) return ''
+  if (qrCodeBase64.value.startsWith('data:image')) return qrCodeBase64.value
+  return `data:image/png;base64,${qrCodeBase64.value}`
+});
+const bindModalOkText = computed(() => {
+  if (bindForm.type === 'WECHAT') return '我已完成绑定'
+  return '确定'
+});
+
+// 设置支付密码
+function goModifyPwd () {
+  router.push({name: 'ModifyPwd', query: { status: 2 }})
+}
+function modifyPwd () { // 修改密码
+  router.push({name: 'ModifyPwd', query: { status: 1 }})
+}
+// 获取密码状态
+function getPwdStatus () {}
+// function getPwdStatus () {
+//   getPwdStatus().then(res => {
+//     if (res) {
+//       pwdStatus.value = '修改密码'
+//     } else {
+//       pwdStatus.value = '设置密码'
+//     }
+//   });
+// }
+function isBound (type) {
+  return connectBoundTypes.value.includes(type)
+}
+function refreshConnectBinds () {
+  connectLoading.value = true
+  return getThirdAccountBindList()
+    .then(res => {
+      if (res && res.success) {
+        connectBoundTypes.value = Array.isArray(res.result) ? res.result : []
+      }
+    })
+    .finally(() => {
+      connectLoading.value = false
+    })
+}
+function openBindModal (item) {
+  bindForm.type = item.type
+  bindForm.typeLabel = item.label
+  bindForm.unionID = ''
+  qrCodeBase64.value = ''
+  bindModalVisible.value = true
+  if (item.type === 'WECHAT') {
+    fetchWechatQrCode()
   }
 }
+function resetBindForm () {
+  bindForm.type = ''
+  bindForm.typeLabel = ''
+  bindForm.unionID = ''
+  qrCodeLoading.value = false
+  qrCodeBase64.value = ''
+  bindSubmitLoading.value = false
+}
+function fetchWechatQrCode () {
+  if (bindForm.type !== 'WECHAT') return
+  const rawUserInfo = storage.getItem('userInfo')
+  const userInfo = rawUserInfo ? JSON.parse(rawUserInfo) : null
+  const userId = userInfo && userInfo.id ? String(userInfo.id) : ''
+  if (!userId) {
+    qrCodeBase64.value = ''
+    Message.error('未获取到当前用户ID，请重新登录后重试')
+    return
+  }
+  qrCodeLoading.value = true
+  getWechatH5QrCode({ scene: userId })
+    .then(res => {
+      if (res && res.success) {
+        qrCodeBase64.value = res.result || ''
+        return
+      }
+      qrCodeBase64.value = ''
+      Message.error((res && res.message) || '二维码获取失败')
+    })
+    .catch(() => {
+      qrCodeBase64.value = ''
+    })
+    .finally(() => {
+      qrCodeLoading.value = false
+    })
+}
+function submitBind () {
+  if (bindSubmitLoading.value) return
+  if (bindForm.type === 'WECHAT' && !bindForm.unionID) {
+    bindSubmitLoading.value = true
+    refreshConnectBinds()
+      .then(() => {
+        if (isBound(bindForm.type)) {
+          Message.success('绑定成功')
+          bindModalVisible.value = false
+          resetBindForm()
+          return
+        }
+        Message.warning('暂未检测到绑定，请扫码后重试')
+        nextTick(() => {
+          bindModalVisible.value = true
+        })
+      })
+      .finally(() => {
+        bindSubmitLoading.value = false
+      })
+    return
+  }
+  if (!bindForm.type) {
+    Message.error('绑定类型不能为空')
+    return
+  }
+  if (!bindForm.unionID) {
+    Message.error('OpenID/UnionID 不能为空')
+    nextTick(() => {
+      bindModalVisible.value = true
+    })
+    return
+  }
+
+  bindSubmitLoading.value = true
+  bindThirdAccount({ unionID: bindForm.unionID, type: bindForm.type })
+    .then(() => {
+      Message.success('绑定成功')
+      bindModalVisible.value = false
+      resetBindForm()
+      refreshConnectBinds()
+    })
+    .finally(() => {
+      bindSubmitLoading.value = false
+    })
+}
+function confirmUnbind (item) {
+  Modal.confirm({
+    title: '解绑确认',
+    content: `<p>确定解绑 ${item.label} 吗？</p>`,
+    onOk: () => {
+      unbindThirdAccount({ type: item.type }).then(() => {
+        Message.success('解绑成功')
+        refreshConnectBinds()
+      })
+    }
+  })
+}
+
+onMounted(() => {
+  getPwdStatus()
+  refreshConnectBinds()
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/CommentList.vue b/buyer/src/pages/home/memberCenter/CommentList.vue
index 83d3edf72..f239be54d 100644
--- a/buyer/src/pages/home/memberCenter/CommentList.vue
+++ b/buyer/src/pages/home/memberCenter/CommentList.vue
@@ -50,52 +50,55 @@
   </div>
 </template>
 
-<script>
-import {evolutionList} from '@/api/order.js';
-export default {
-  name: 'CommentList',
-  data () {
-    return {
-      commentWay: [`待评价`, `待追评`, `已评价`], // 评价分类
-      loading: false, // 加载状态
-      list: [], // 评价列表
-      total: 0, // 评价总数
-      params: { // 请求参数
-        pageNumber: 1,
-        pageSize: 20
-      }
-    };
-  },
-  mounted () {
-    this.getList()
-  },
-  methods: {
-    getList () { // 获取评价列表
-      evolutionList(this.params).then(res => {
-        if (res.success) {
-          const list = res.result.records;
-          list.forEach(element => {
-            element.descriptionScore = Number(element.descriptionScore)
-          });
-          this.list = list;
-          this.total = res.result.total
-        }
-      })
-    },
-    changePageNum (val) { // 修改页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize (val) { // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
-    },
-    evaluateDetail (id) { // 跳转评价详情
-      this.$router.push({path: '/home/evalDetail', query: { id }})
+<script setup>
+import { reactive, ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { evolutionList } from '@/api/order.js';
+
+defineOptions({ name: 'CommentList' });
+
+const router = useRouter();
+
+const commentWay = ref([`待评价`, `待追评`, `已评价`]); // 评价分类
+const loading = ref(false); // 加载状态
+const list = ref([]); // 评价列表
+const total = ref(0); // 评价总数
+const params = reactive({ // 请求参数
+  pageNumber: 1,
+  pageSize: 20
+});
+
+function getList () { // 获取评价列表
+  evolutionList(params).then(res => {
+    if (res.success) {
+      const records = res.result.records;
+      records.forEach(element => {
+        element.descriptionScore = Number(element.descriptionScore)
+      });
+      list.value = records;
+      total.value = res.result.total
     }
-  }
-};
+  })
+}
+
+function changePageNum (val) { // 修改页码
+  params.pageNumber = val;
+  getList()
+}
+
+function changePageSize (val) { // 修改页数
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList()
+}
+
+function evaluateDetail (id) { // 跳转评价详情
+  router.push({path: '/home/evalDetail', query: { id }})
+}
+
+onMounted(() => {
+  getList()
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/ComplainDetail.vue b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
index 3deb7a8ac..c3dfb2e0c 100644
--- a/buyer/src/pages/home/memberCenter/ComplainDetail.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainDetail.vue
@@ -129,75 +129,74 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import { View } from '@element-plus/icons-vue';
 import {getComplainDetail} from '@/api/member.js';
 import {communication} from '@/api/order';
-export default {
-  components: { View },
-  data () {
-    return {
-      detail: {}, // 评价详情
-      visible: false, // 图片预览
-      previewImage: '', // 预览图片地址
-      loading: false, // 加载状态
-      submitLoading: false, // 回复消息loading
-      // 状态
-      statusLabel: {
-        NO_APPLY: '未申请',
-        APPLYING: '申请中',
-        COMPLETE: '已完成',
-        EXPIRED: '已失效',
-        CANCEL: '已取消',
-        NEW: '待审核'
-      },
-      // 商家回复内容
-      params: {
-        content: '',
-        complainId: ''
-      }
-    }
-  },
-  methods: {
-    getDetail () { // 获取投诉详情
-      getComplainDetail(this.$route.query.id).then(res => {
-        if (res.success) this.detail = res.result
-      })
-    },
-    goGoodsDetail (skuId, goodsId) { // 跳转商品详情
-      let routerUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: {skuId, goodsId}
-      })
-      window.open(routerUrl.href, '_blank')
-    },
-    handleView (name) { // 预览图片
-      this.previewImage = name;
-      this.visible = true;
-    },
-    // 回复消息
-    handleSubmit () {
-      if (this.params.content === '') {
-        Message.error('请填写对话内容');
-        return;
-      }
-      this.submitLoading = true;
-      this.params.complainId = this.$route.query.id;
-      communication(this.params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          Message.success('对话成功');
-          this.params.content = '';
-          this.getDetail();
-        }
-      });
-    }
-  },
-  mounted () {
-    this.getDetail()
-  }
+
+const route = useRoute();
+const router = useRouter();
+
+const detail = ref({}); // 评价详情
+const visible = ref(false); // 图片预览
+const previewImage = ref(''); // 预览图片地址
+const loading = ref(false); // 加载状态
+const submitLoading = ref(false); // 回复消息loading
+// 状态
+const statusLabel = {
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  NEW: '待审核'
+};
+// 商家回复内容
+const params = reactive({
+  content: '',
+  complainId: ''
+});
+
+function getDetail () { // 获取投诉详情
+  getComplainDetail(route.query.id).then(res => {
+    if (res.success) detail.value = res.result
+  })
 }
+function goGoodsDetail (skuId, goodsId) { // 跳转商品详情
+  let routerUrl = router.resolve({
+    path: '/goodsDetail',
+    query: {skuId, goodsId}
+  })
+  window.open(routerUrl.href, '_blank')
+}
+function handleView (name) { // 预览图片
+  previewImage.value = name;
+  visible.value = true;
+}
+// 回复消息
+function handleSubmit () {
+  if (params.content === '') {
+    Message.error('请填写对话内容');
+    return;
+  }
+  submitLoading.value = true;
+  params.complainId = route.query.id;
+  communication(params).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+      Message.success('对话成功');
+      params.content = '';
+      getDetail();
+    }
+  });
+}
+
+onMounted(() => {
+  getDetail()
+})
 </script>
 <style lang="scss" scoped>
 .speak-way {
diff --git a/buyer/src/pages/home/memberCenter/ComplainList.vue b/buyer/src/pages/home/memberCenter/ComplainList.vue
index 3896d6022..c5d6fad5c 100644
--- a/buyer/src/pages/home/memberCenter/ComplainList.vue
+++ b/buyer/src/pages/home/memberCenter/ComplainList.vue
@@ -58,72 +58,75 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
-import {complainList, clearComplain} from '@/api/member.js';
-export default {
-  name: 'ComplainList',
-  data () {
-    return {
-      loading: false, // 加载状态
-      list: [], // 投诉列表
-      statusLabel: { // 投诉状态
-        NO_APPLY: '未申请',
-        APPLYING: '申请中',
-        COMPLETE: '已完成',
-        EXPIRED: '已失效',
-        CANCEL: '已取消',
-        NEW: '新订单'
-      },
-      total: 0, // 投诉总数
-      params: { // 请求参数
-        pageNumber: 1,
-        pageSize: 20
-      }
-    };
-  },
-  mounted () {
-    this.getList()
-  },
-  methods: {
-    getList () { // 获取投诉列表
-      complainList(this.params).then(res => {
+import { complainList, clearComplain } from '@/api/member.js';
+
+defineOptions({ name: 'ComplainList' });
+
+const router = useRouter();
+
+const loading = ref(false); // 加载状态
+const list = ref([]); // 投诉列表
+const statusLabel = { // 投诉状态
+  NO_APPLY: '未申请',
+  APPLYING: '申请中',
+  COMPLETE: '已完成',
+  EXPIRED: '已失效',
+  CANCEL: '已取消',
+  NEW: '新订单'
+};
+const total = ref(0); // 投诉总数
+const params = reactive({ // 请求参数
+  pageNumber: 1,
+  pageSize: 20
+});
+
+function getList() { // 获取投诉列表
+  complainList(params).then(res => {
+    if (res.success) {
+      list.value = res.result.records;
+      total.value = res.result.total
+    }
+  })
+}
+
+function changePageNum(val) { // 改变页码
+  params.pageNumber = val;
+  getList()
+}
+
+function changePageSize(val) { // 改变页数
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList()
+}
+
+function cancel(id) { // 取消投诉
+  Modal.confirm({
+    title: '取消投诉',
+    content: '确定取消投诉吗？',
+    onOk: () => {
+      clearComplain(id).then((res) => {
         if (res.success) {
-          const list = res.result.records;
-          this.list = list;
-          this.total = res.result.total
+          Message.success('取消投诉成功');
+          getList();
         }
-      })
-    },
-    changePageNum (val) { // 改变页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize (val) { // 改变页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
-    },
-    cancel (id) { // 取消投诉
-      Modal.confirm({
-        title: '取消投诉',
-        content: '确定取消投诉吗？',
-        onOk: () => {
-          clearComplain(id).then((res) => {
-            if (res.success) {
-              Message.success('取消投诉成功');
-              this.getList();
-            }
-          });
-        },
-        onCancel: () => { }
       });
     },
-    goDetail (id) { // 跳转投诉详情
-      this.$router.push({path: '/home/complainDetail', query: { id }})
-    }
-  }
-};
+    onCancel: () => { }
+  });
+}
+
+function goDetail(id) { // 跳转投诉详情
+  router.push({ path: '/home/complainDetail', query: { id } })
+}
+
+onMounted(() => {
+  getList()
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/Favorites.vue b/buyer/src/pages/home/memberCenter/Favorites.vue
index 442125b5b..cdc7ea16e 100644
--- a/buyer/src/pages/home/memberCenter/Favorites.vue
+++ b/buyer/src/pages/home/memberCenter/Favorites.vue
@@ -84,136 +84,144 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Modal } from "@/utils/message";
 import { collectList, cancelCollect, storeCollectList, cancelStoreCollect } from '@/api/member.js'
-export default {
-  name: 'Favorites',
-  props: {
-    homePage: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      favoriteWay: ['收藏商品', '收藏店铺'], // 收藏分类
-      list: [], // 收藏列表
-      total: 0, // 收藏总数
-      params: { // 请求参数
-        pageNumber: 1,
-        pageSize: 100,
-        type: this.$route.query.type || 'GOODS'
-      },
-      spinShow: false // 加载状态
-    };
-  },
-  computed: {
-    activeTabIndex() {
-      return this.params.type === 'STORE' ? 1 : 0;
-    },
-  },
 
-  methods: {
-    loadFavorites() {
-      if (this.params.type === 'STORE') {
-        this.getStoreList();
-      } else {
-        this.getList();
-      }
-    },
-    getList() { // 获取商品收藏列表
-      this.spinShow = true
-      collectList(this.params).then(res => {
-        if (res.success && res.result) {
-          this.list = res.result.records || [];
-        }
-      }).catch(() => {
-        this.list = [];
-      }).finally(() => {
-        this.spinShow = false
-      })
-    },
-    getStoreList() { // 获取店铺收藏列表
-      this.spinShow = true
-      storeCollectList(this.params).then(res => {
-        if (res.success && res.result) {
-          this.list = res.result.records || [];
-        }
-      }).catch(() => {
-        this.list = [];
-      }).finally(() => {
-        this.spinShow = false
-      })
-    },
-    change(index) { // tab栏切换
-      if (index === 0) { this.params.type = 'GOODS', this.getList() }
-      if (index === 1) { this.params.type = 'STORE', this.getStoreList() }
-    },
-    cancel(id) { // 取消收藏
-      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
-      Modal.confirm({
-        title: '取消收藏',
-        content: `确定取消收藏该${typeName}吗？`,
-        onOk: () => {
-          cancelCollect(this.params.type, id).then(res => {
-            if (res.success) {
-              this.getList();
-            }
-          })
-        }
-      });
-    },
-    cancelStore(id) { // 取消收藏
-      let typeName = this.params.type === 'GOODS' ? '商品' : '店铺'
-      Modal.confirm({
-        title: '取消收藏',
-        content: `确定取消收藏该${typeName}吗？`,
-        onOk: () => {
-          cancelStoreCollect(this.params.type, id).then(res => {
-            if (res.success) {
-              this.getStoreList();
-            }
-          })
-        }
-      });
-    },
-    openItem (item) {
-      if (this.params.type === 'STORE') {
-        this.goShop(item.id)
-        return
-      }
-      this.buynow(item.skuId, item.goodsId)
-    },
-    buynow(skuId, goodsId,storeId) { // 跳转详情
-      let url
-      if (this.params.type === 'STORE') {
-        url = this.$router.resolve({
-          path: '/merchant',
-          query: { 'id': storeId }
-        })
-      } else {
-        url = this.$router.resolve({
-          path: '/goodsDetail',
-          query: { skuId, goodsId }
-        })
+defineOptions({ name: 'Favorites' });
 
-      }
-      window.open(url.href, '_blank')
-
-    },
-    goShop(id) { // 跳转店铺页面
-      this.$router.push({
-        path: '/merchant',
-        query: { id }
-      })
-    }
-  },
-  mounted() {
-    if (this.homePage) this.params.pageSize = 5;
-    this.loadFavorites();
+const props = defineProps({
+  homePage: {
+    type: Boolean,
+    default: false
   }
-};
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const favoriteWay = ref(['收藏商品', '收藏店铺']); // 收藏分类
+const list = ref([]); // 收藏列表
+const total = ref(0); // 收藏总数
+const params = reactive({ // 请求参数
+  pageNumber: 1,
+  pageSize: 100,
+  type: route.query.type || 'GOODS'
+});
+const spinShow = ref(false); // 加载状态
+
+const activeTabIndex = computed(() => {
+  return params.type === 'STORE' ? 1 : 0;
+});
+
+function loadFavorites() {
+  if (params.type === 'STORE') {
+    getStoreList();
+  } else {
+    getList();
+  }
+}
+
+function getList() { // 获取商品收藏列表
+  spinShow.value = true
+  collectList(params).then(res => {
+    if (res.success && res.result) {
+      list.value = res.result.records || [];
+    }
+  }).catch(() => {
+    list.value = [];
+  }).finally(() => {
+    spinShow.value = false
+  })
+}
+
+function getStoreList() { // 获取店铺收藏列表
+  spinShow.value = true
+  storeCollectList(params).then(res => {
+    if (res.success && res.result) {
+      list.value = res.result.records || [];
+    }
+  }).catch(() => {
+    list.value = [];
+  }).finally(() => {
+    spinShow.value = false
+  })
+}
+
+function change(index) { // tab栏切换
+  if (index === 0) { params.type = 'GOODS', getList() }
+  if (index === 1) { params.type = 'STORE', getStoreList() }
+}
+
+function cancel(id) { // 取消收藏
+  let typeName = params.type === 'GOODS' ? '商品' : '店铺'
+  Modal.confirm({
+    title: '取消收藏',
+    content: `确定取消收藏该${typeName}吗？`,
+    onOk: () => {
+      cancelCollect(params.type, id).then(res => {
+        if (res.success) {
+          getList();
+        }
+      })
+    }
+  });
+}
+
+function cancelStore(id) { // 取消收藏
+  let typeName = params.type === 'GOODS' ? '商品' : '店铺'
+  Modal.confirm({
+    title: '取消收藏',
+    content: `确定取消收藏该${typeName}吗？`,
+    onOk: () => {
+      cancelStoreCollect(params.type, id).then(res => {
+        if (res.success) {
+          getStoreList();
+        }
+      })
+    }
+  });
+}
+
+function openItem (item) {
+  if (params.type === 'STORE') {
+    goShop(item.id)
+    return
+  }
+  buynow(item.skuId, item.goodsId)
+}
+
+function buynow(skuId, goodsId, storeId) { // 跳转详情
+  let url
+  if (params.type === 'STORE') {
+    url = router.resolve({
+      path: '/merchant',
+      query: { 'id': storeId }
+    })
+  } else {
+    url = router.resolve({
+      path: '/goodsDetail',
+      query: { skuId, goodsId }
+    })
+
+  }
+  window.open(url.href, '_blank')
+
+}
+
+function goShop(id) { // 跳转店铺页面
+  router.push({
+    path: '/merchant',
+    query: { id }
+  })
+}
+
+onMounted(() => {
+  if (props.homePage) params.pageSize = 5;
+  loadFavorites();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/MemberGrade.vue b/buyer/src/pages/home/memberCenter/MemberGrade.vue
index 0130a1fb4..0dcf4697b 100644
--- a/buyer/src/pages/home/memberCenter/MemberGrade.vue
+++ b/buyer/src/pages/home/memberCenter/MemberGrade.vue
@@ -74,206 +74,218 @@
 
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
 import { memberGradeCurrent, memberGradeList, memberGradeRules } from '@/api/member.js'
 
-export default {
-  name: 'MemberGrade',
-  data () {
-    return {
-      ruleList: [],
-      rulesLoading: false,
-      rulesDescription: '',
-      /** 接口返回 List MemberGradeDetailVO，每项 { grade, benefits } */
-      gradeDetails: [],
-      gradeList: [],
-      currentGrade: {},
-      currentExperience: 0,
-      currentGradeId: '',
-      selectedRuleKey: '',
-      activeGradeTab: 'rules',
-      logLoading: false,
-      gradeLoading: false,
-      params: {
-        pageNumber: 1,
-        pageSize: 20
-      },
-      experienceLogs: {}
-    }
-  },
-  computed: {
-    rulesMap () {
-      const map = {}
-      this.ruleList.forEach(item => {
-        map[item.ruleKey] = item.ruleName
-      })
-      return map
-    },
-    sortedGradeList () {
-      const list = Array.isArray(this.gradeList) ? this.gradeList.slice() : []
-      list.sort((a, b) => {
-        const sa = a && a.gradeSort != null ? Number(a.gradeSort) : 0
-        const sb = b && b.gradeSort != null ? Number(b.gradeSort) : 0
-        if (sa !== sb) return sa - sb
-        const ea = a && a.requiredExperience != null ? Number(a.requiredExperience) : 0
-        const eb = b && b.requiredExperience != null ? Number(b.requiredExperience) : 0
-        return ea - eb
-      })
-      return list
-    },
-    currentGradeIndex () {
-      if (!this.currentGradeId) return -1
-      return this.sortedGradeList.findIndex(g => g && g.id === this.currentGradeId)
-    },
-    nextGrade () {
-      const idx = this.currentGradeIndex
-      if (idx < 0) return null
-      return this.sortedGradeList[idx + 1] || null
-    },
-    diffExperience () {
-      if (!this.nextGrade || this.nextGrade.requiredExperience == null) return 0
-      const diff = Number(this.nextGrade.requiredExperience) - Number(this.currentExperience || 0)
-      return diff > 0 ? diff : 0
-    },
-    /** 当前等级在列表详情中对应的启用权益（顺序与后台 benefits 一致） */
-    currentGradeBenefits () {
-      const id = this.currentGradeId
-      if (!id || !Array.isArray(this.gradeDetails) || !this.gradeDetails.length) return []
-      const detail = this.gradeDetails.find(
-        (d) => d && d.grade && String(d.grade.id) === String(id)
-      )
-      const list = detail && Array.isArray(detail.benefits) ? detail.benefits : []
-      return list.filter((b) => b && b.benefitState === 'OPEN')
-    },
-  },
-  mounted () {
-    this.init()
-  },
-  methods: {
-    init () {
-      this.loadRules()
-      this.loadGradeList()
-      this.loadCurrent()
-    },
-    loadRules () {
-      this.rulesLoading = true
-      memberGradeRules()
-        .then(res => {
-          if (res && res.success) {
-            const items = res.result && Array.isArray(res.result.items) ? res.result.items : []
-            this.rulesDescription = (res.result && res.result.description) || ''
-            this.ruleList = items
-          }
-        })
-        .finally(() => {
-          this.rulesLoading = false
-        })
-    },
-    loadGradeList () {
-      this.gradeLoading = true
-      memberGradeList()
-        .then(res => {
-          if (res && res.success) {
-            const raw = Array.isArray(res.result) ? res.result : []
-            this.gradeDetails = raw
-              .map((item) => {
-                if (!item) return null
-                if (item.grade != null) {
-                  return {
-                    grade: item.grade,
-                    benefits: Array.isArray(item.benefits) ? item.benefits : []
-                  }
-                }
-                return { grade: item, benefits: [] }
-              })
-              .filter(Boolean)
-            this.gradeList = this.gradeDetails.map((d) => d.grade).filter(Boolean)
-          } else {
-            this.gradeDetails = []
-            this.gradeList = []
-          }
-        })
-        .finally(() => {
-          this.gradeLoading = false
-        })
-    },
-    loadCurrent () {
-      this.logLoading = true
-      const params = {
-        pageNumber: this.params.pageNumber,
-        pageSize: this.params.pageSize
+defineOptions({ name: 'MemberGrade' })
+
+const ruleList = ref([])
+const rulesLoading = ref(false)
+const rulesDescription = ref('')
+/** 接口返回 List MemberGradeDetailVO，每项 { grade, benefits } */
+const gradeDetails = ref([])
+const gradeList = ref([])
+const currentGrade = ref({})
+const currentExperience = ref(0)
+const currentGradeId = ref('')
+const selectedRuleKey = ref('')
+const activeGradeTab = ref('rules')
+const logLoading = ref(false)
+const gradeLoading = ref(false)
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20
+})
+const experienceLogs = ref({})
+
+const rulesMap = computed(() => {
+  const map = {}
+  ruleList.value.forEach(item => {
+    map[item.ruleKey] = item.ruleName
+  })
+  return map
+})
+
+const sortedGradeList = computed(() => {
+  const list = Array.isArray(gradeList.value) ? gradeList.value.slice() : []
+  list.sort((a, b) => {
+    const sa = a && a.gradeSort != null ? Number(a.gradeSort) : 0
+    const sb = b && b.gradeSort != null ? Number(b.gradeSort) : 0
+    if (sa !== sb) return sa - sb
+    const ea = a && a.requiredExperience != null ? Number(a.requiredExperience) : 0
+    const eb = b && b.requiredExperience != null ? Number(b.requiredExperience) : 0
+    return ea - eb
+  })
+  return list
+})
+
+const currentGradeIndex = computed(() => {
+  if (!currentGradeId.value) return -1
+  return sortedGradeList.value.findIndex(g => g && g.id === currentGradeId.value)
+})
+
+const nextGrade = computed(() => {
+  const idx = currentGradeIndex.value
+  if (idx < 0) return null
+  return sortedGradeList.value[idx + 1] || null
+})
+
+const diffExperience = computed(() => {
+  if (!nextGrade.value || nextGrade.value.requiredExperience == null) return 0
+  const diff = Number(nextGrade.value.requiredExperience) - Number(currentExperience.value || 0)
+  return diff > 0 ? diff : 0
+})
+
+/** 当前等级在列表详情中对应的启用权益（顺序与后台 benefits 一致） */
+const currentGradeBenefits = computed(() => {
+  const id = currentGradeId.value
+  if (!id || !Array.isArray(gradeDetails.value) || !gradeDetails.value.length) return []
+  const detail = gradeDetails.value.find(
+    (d) => d && d.grade && String(d.grade.id) === String(id)
+  )
+  const list = detail && Array.isArray(detail.benefits) ? detail.benefits : []
+  return list.filter((b) => b && b.benefitState === 'OPEN')
+})
+
+onMounted(() => {
+  init()
+})
+
+function init () {
+  loadRules()
+  loadGradeList()
+  loadCurrent()
+}
+
+function loadRules () {
+  rulesLoading.value = true
+  memberGradeRules()
+    .then(res => {
+      if (res && res.success) {
+        const items = res.result && Array.isArray(res.result.items) ? res.result.items : []
+        rulesDescription.value = (res.result && res.result.description) || ''
+        ruleList.value = items
       }
-      if (this.selectedRuleKey) params.ruleKey = this.selectedRuleKey
-      memberGradeCurrent(params)
-        .then(res => {
-          if (res && res.success && res.result) {
-            this.currentGrade = res.result.grade || {}
-            this.currentExperience = res.result.experience || 0
-            this.currentGradeId = res.result.gradeId || (this.currentGrade && this.currentGrade.id) || ''
-            this.experienceLogs = res.result.experienceLogs || {}
-          }
-        })
-        .finally(() => {
-          this.logLoading = false
-        })
-    },
-    selectRule (ruleKey) {
-      this.selectedRuleKey = ruleKey || ''
-      this.params.pageNumber = 1
-      this.loadCurrent()
-    },
-    changePage (val) {
-      this.params.pageNumber = val
-      this.loadCurrent()
-    },
-    changePageSize (val) {
-      this.params.pageSize = val
-      this.params.pageNumber = 1
-      this.loadCurrent()
-    },
-    getRuleName (ruleKey) {
-      if (!ruleKey) return '-'
-      return this.rulesMap[ruleKey] || ruleKey
-    },
-    getRuleDesc (ruleKey) {
-      const map = {
-        CONSUME: '客户消费1元可获取经验值，向下取整',
-        REGISTER: '会员注册成功后可获取经验值',
-        SIGN_IN: '客户每日签到后可获取的经验值',
-        COMMENT: '对已购买商品完成发表评价获取经验值；仅针对评论字数大于30字的评论进行发放',
-        SHARE: '会员分享商城页面可获取的经验值',
-        PROFILE: '完善个人基本信息可获得经验值，每个会员仅可获得一次',
-        FOLLOW_STORE: '关注店铺可获得经验值，每个客户ID同店铺仅第一次关注可进行获得',
-        BIND_WECHAT: '绑定微信成功后获得经验值，每个会员仅可获得一次',
-        ADD_ADDRESS: '添加收货地址可获得经验值，每个会员仅可获得一次',
-        SHARE_REGISTER: '仅被注册成功后可获得相应奖励经验值',
-        SHARE_BUY: '仅被购买成功后可获得相应奖励经验值'
+    })
+    .finally(() => {
+      rulesLoading.value = false
+    })
+}
+
+function loadGradeList () {
+  gradeLoading.value = true
+  memberGradeList()
+    .then(res => {
+      if (res && res.success) {
+        const raw = Array.isArray(res.result) ? res.result : []
+        gradeDetails.value = raw
+          .map((item) => {
+            if (!item) return null
+            if (item.grade != null) {
+              return {
+                grade: item.grade,
+                benefits: Array.isArray(item.benefits) ? item.benefits : []
+              }
+            }
+            return { grade: item, benefits: [] }
+          })
+          .filter(Boolean)
+        gradeList.value = gradeDetails.value.map((d) => d.grade).filter(Boolean)
+      } else {
+        gradeDetails.value = []
+        gradeList.value = []
       }
-      if (!ruleKey) return '-'
-      return map[ruleKey] || '-'
-    },
-    getLogDeltaRaw (row) {
-      if (!row) return 0
-      const candidate = row.variableExperience != null ? row.variableExperience : (row.changeExperience != null ? row.changeExperience : (row.experience != null ? row.experience : row.value))
-      if (candidate == null) return 0
-      const num = Number(candidate)
-      if (Number.isNaN(num)) return 0
-      if (row.type === 'DECREASE') return -Math.abs(num)
-      if (row.type === 'INCREASE') return Math.abs(num)
-      return num
-    },
-    getLogDeltaSign (row) {
-      const num = this.getLogDeltaRaw(row)
-      return num >= 0 ? '+' : '-'
-    },
-    getLogDeltaAbsValue (row) {
-      const num = this.getLogDeltaRaw(row)
-      return Math.abs(num)
-    },
-    getLogDeltaColor (row) {
-      return this.getLogDeltaRaw(row) >= 0 ? 'green' : 'red'
-    }
+    })
+    .finally(() => {
+      gradeLoading.value = false
+    })
+}
+
+function loadCurrent () {
+  logLoading.value = true
+  const reqParams = {
+    pageNumber: params.pageNumber,
+    pageSize: params.pageSize
   }
+  if (selectedRuleKey.value) reqParams.ruleKey = selectedRuleKey.value
+  memberGradeCurrent(reqParams)
+    .then(res => {
+      if (res && res.success && res.result) {
+        currentGrade.value = res.result.grade || {}
+        currentExperience.value = res.result.experience || 0
+        currentGradeId.value = res.result.gradeId || (currentGrade.value && currentGrade.value.id) || ''
+        experienceLogs.value = res.result.experienceLogs || {}
+      }
+    })
+    .finally(() => {
+      logLoading.value = false
+    })
+}
+
+function selectRule (ruleKey) {
+  selectedRuleKey.value = ruleKey || ''
+  params.pageNumber = 1
+  loadCurrent()
+}
+
+function changePage (val) {
+  params.pageNumber = val
+  loadCurrent()
+}
+
+function changePageSize (val) {
+  params.pageSize = val
+  params.pageNumber = 1
+  loadCurrent()
+}
+
+function getRuleName (ruleKey) {
+  if (!ruleKey) return '-'
+  return rulesMap.value[ruleKey] || ruleKey
+}
+
+function getRuleDesc (ruleKey) {
+  const map = {
+    CONSUME: '客户消费1元可获取经验值，向下取整',
+    REGISTER: '会员注册成功后可获取经验值',
+    SIGN_IN: '客户每日签到后可获取的经验值',
+    COMMENT: '对已购买商品完成发表评价获取经验值；仅针对评论字数大于30字的评论进行发放',
+    SHARE: '会员分享商城页面可获取的经验值',
+    PROFILE: '完善个人基本信息可获得经验值，每个会员仅可获得一次',
+    FOLLOW_STORE: '关注店铺可获得经验值，每个客户ID同店铺仅第一次关注可进行获得',
+    BIND_WECHAT: '绑定微信成功后获得经验值，每个会员仅可获得一次',
+    ADD_ADDRESS: '添加收货地址可获得经验值，每个会员仅可获得一次',
+    SHARE_REGISTER: '仅被注册成功后可获得相应奖励经验值',
+    SHARE_BUY: '仅被购买成功后可获得相应奖励经验值'
+  }
+  if (!ruleKey) return '-'
+  return map[ruleKey] || '-'
+}
+
+function getLogDeltaRaw (row) {
+  if (!row) return 0
+  const candidate = row.variableExperience != null ? row.variableExperience : (row.changeExperience != null ? row.changeExperience : (row.experience != null ? row.experience : row.value))
+  if (candidate == null) return 0
+  const num = Number(candidate)
+  if (Number.isNaN(num)) return 0
+  if (row.type === 'DECREASE') return -Math.abs(num)
+  if (row.type === 'INCREASE') return Math.abs(num)
+  return num
+}
+
+function getLogDeltaSign (row) {
+  const num = getLogDeltaRaw(row)
+  return num >= 0 ? '+' : '-'
+}
+
+function getLogDeltaAbsValue (row) {
+  const num = getLogDeltaRaw(row)
+  return Math.abs(num)
+}
+
+function getLogDeltaColor (row) {
+  return getLogDeltaRaw(row) >= 0 ? 'green' : 'red'
 }
 </script>
 
diff --git a/buyer/src/pages/home/memberCenter/ModifyPwd.vue b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
index dd1b27193..7ec1e7407 100644
--- a/buyer/src/pages/home/memberCenter/ModifyPwd.vue
+++ b/buyer/src/pages/home/memberCenter/ModifyPwd.vue
@@ -2,7 +2,7 @@
   <div class="wrapper">
     <UserCenterLayout>
     <!--  手机号验证  -->
-    <el-form ref="formData" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
+    <el-form ref="formDataRef" :model="formData" label-position="left" label-width="100px" :rules="ruleInLines"
           v-if="(status == 2 || status == 3) && !showPwd">
       <el-form-item label="手机号">
         <div class="phone">{{ displayMobile }}</div>
@@ -21,7 +21,7 @@
     </div>
 
     <!--  修改  -->
-    <el-form ref="formRegister" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
+    <el-form ref="formRegisterRef" :model="formRegister" :rules="ruleInline" label-width="80px" v-if="status == 1 && !showPwd">
       <el-form-item label="旧密码" prop="password">
         <el-input type="password" v-model="formRegister.password" clearable size="large" placeholder="请输入旧密码"
                  style="width: 300px"
@@ -49,7 +49,7 @@
       <el-button type="primary" class="ml_10" @click="handleRegist">修改</el-button>
     </div>
     <!-- 设置&修改的第二种情况   -->
-    <el-form ref="formDataUpdate" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
+    <el-form ref="formDataUpdateRef" :model="formDataUpdate" label-position="left" label-width="100px" :rules="ruleIn"
           v-if="showPwd">
       <el-form-item label="新密码" prop="newPassword">
         <el-input type="password" v-model="formDataUpdate.newPassword" clearable size="large" placeholder="请输入新密码"
@@ -73,7 +73,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import { Lock } from '@element-plus/icons-vue';
 import {
@@ -82,166 +84,171 @@ import {
 } from '@/api/account';
 import { getMemberMsg } from '@/api/login.js';
 import storage from '@/plugins/storage.js';
-import {md5} from '@/plugins/md5.js'
+import { md5 } from '@/plugins/md5.js'
+import { secrecyMobile } from '@/plugins/filters.js'
 
-export default {
-  components: { Lock },
-  name: 'modifyPwd',
-  data () {
-    return {
-      // 1为修改    2为设置     3为提交校验的下一步
-      status: '',
-      mobile: '',
-      showPwd: false, // 显示密码
-      formData: { // 验证表单
-        picture: '',
-        msg: ''
-      },
-      formDataUpdate: { // 直接输入新密码表单
-        newPassword: '',
-        againPassword: ''
-      },
-      formRegister: { // 第三步 新密码表单
-        password: '',
-        againPassword: '',
-        newPassword: ''
-      },
-      ruleInLines: { // 验证规则
-        picture: [
-          {required: true, message: '请输入图片验证码', trigger: 'blur'}
-        ],
-        msg: [
-          {required: true, message: '请输入短信验证码', trigger: 'blur'}
-        ]
-      },
-      ruleIn: { // 验证规则
-        newPassword: [
-          {required: true, message: '请输入新密码', trigger: 'blur'},
-          {type: 'string', min: 6, message: '密码不能少于6位'}
-        ],
-        againPassword: [
-          {required: true, message: '请输入新密码', trigger: 'blur'},
-          {type: 'string', min: 6, message: '密码不能少于6位'}
-        ]
-      },
-      ruleInline: { // 验证规则
-        password: [
-          {required: true, message: '请输入旧密码', trigger: 'blur'}
-        ],
-        newPassword: [
-          {required: true, message: '请输入新密码', trigger: 'blur'},
-          {type: 'string', min: 6, message: '密码不能少于6位'}
-        ],
-        againPassword: [
-          {required: true, message: '请确认新密码', trigger: 'blur'},
-          {type: 'string', min: 6, message: '密码不能少于6位'}
-        ]
-      }
-    }
-  },
-  computed: {
-    displayMobile () {
-      if (!this.mobile) return '未绑定手机号';
-      return this.$filters.secrecyMobile(this.mobile);
-    }
-  },
-  mounted () {
-    this.status = this.$route.query.status
-    this.loadMobile()
-  },
-  methods: {
-    loadMobile () {
-      const rawUserInfo = storage.getItem('userInfo');
-      if (rawUserInfo) {
-        try {
-          const userInfo = JSON.parse(rawUserInfo);
-          if (userInfo && userInfo.mobile) this.mobile = userInfo.mobile;
-        } catch {
-          // 缓存的用户信息解析失败时忽略，改走接口获取
-        }
-      }
-      if (!storage.getItem('accessToken')) return;
-      getMemberMsg().then(res => {
-        if (res.success && res.result) {
-          storage.setItem('userInfo', res.result);
-          this.mobile = res.result.mobile || '';
-        }
-      }).catch((err) => {
-        console.warn('获取会员信息失败', err);
-      });
-    },
-    normalizePwdError (message) {
-      if (!message) return '修改失败，请稍后重试';
-      if (String(message).includes('旧密码') || String(message).includes('密码不正确')) {
-        return '旧密码不正确';
-      }
-      return message;
-    },
-    // 修改
-    handleRegist () {
-      this.$refs['formRegister'].validate((valid) => {
-        if (valid) {
-          const {newPassword, againPassword, password} = this.formRegister
-          if (newPassword !== againPassword) {
-            Message.error({
-              content: '新密码和确认密码不一致'
-            });
-            return
-          }
-          const params = {newPassword, password}
-          params.newPassword = md5(newPassword)
-          params.password = md5(password)
-          editPwd(params).then(res => {
-            if (res.success && res.result) {
-              Message.success('修改密码成功');
-              this.$router.push('/home')
-            } else {
-              Message.error(this.normalizePwdError(res.message));
-            }
-          }).catch((err) => {
-            Message.error(this.normalizePwdError(err?.message || err?.data?.message));
-          });
-        }
-      })
-    },
-    // 提交验证
-    submitRegister () {
-      this.$refs['formData'].validate((valid) => {
-        if (valid) {
-          this.showPwd = true
-        }
-      })
-    },
-    // 设置密码
-    setPassword () {
-      this.$refs['formDataUpdate'].validate((valid) => {
-        if (valid) {
-          const {newPassword, againPassword} = this.formDataUpdate
-          if (newPassword === '') {
-            Message.error({
-              content: '请输入密码'
-            });
-            return
-          }
-          if (newPassword !== againPassword) {
-            Message.error({
-              content: '新密码和确认密码不一致'
-            });
-            return
-          }
-          const params = {password: newPassword}
-          params.password = md5(newPassword)
-          setPwd(params).then(res => {
-            if (res.message === 'success' && res.result) {
-              Message.success('支付密码设置成功');
-              this.$router.push('/home')
-            }
-          });
-        }
-      })
+defineOptions({ name: 'modifyPwd' });
+
+const route = useRoute();
+const router = useRouter();
+
+// 1为修改    2为设置     3为提交校验的下一步
+const status = ref('');
+const mobile = ref('');
+const showPwd = ref(false); // 显示密码
+const formData = reactive({ // 验证表单
+  picture: '',
+  msg: ''
+});
+const formDataUpdate = reactive({ // 直接输入新密码表单
+  newPassword: '',
+  againPassword: ''
+});
+const formRegister = reactive({ // 第三步 新密码表单
+  password: '',
+  againPassword: '',
+  newPassword: ''
+});
+const ruleInLines = { // 验证规则
+  picture: [
+    {required: true, message: '请输入图片验证码', trigger: 'blur'}
+  ],
+  msg: [
+    {required: true, message: '请输入短信验证码', trigger: 'blur'}
+  ]
+};
+const ruleIn = { // 验证规则
+  newPassword: [
+    {required: true, message: '请输入新密码', trigger: 'blur'},
+    {type: 'string', min: 6, message: '密码不能少于6位'}
+  ],
+  againPassword: [
+    {required: true, message: '请输入新密码', trigger: 'blur'},
+    {type: 'string', min: 6, message: '密码不能少于6位'}
+  ]
+};
+const ruleInline = { // 验证规则
+  password: [
+    {required: true, message: '请输入旧密码', trigger: 'blur'}
+  ],
+  newPassword: [
+    {required: true, message: '请输入新密码', trigger: 'blur'},
+    {type: 'string', min: 6, message: '密码不能少于6位'}
+  ],
+  againPassword: [
+    {required: true, message: '请确认新密码', trigger: 'blur'},
+    {type: 'string', min: 6, message: '密码不能少于6位'}
+  ]
+};
+
+const formDataRef = ref(null);
+const formRegisterRef = ref(null);
+const formDataUpdateRef = ref(null);
+
+const displayMobile = computed(() => {
+  if (!mobile.value) return '未绑定手机号';
+  return secrecyMobile(mobile.value);
+});
+
+function loadMobile () {
+  const rawUserInfo = storage.getItem('userInfo');
+  if (rawUserInfo) {
+    try {
+      const userInfo = JSON.parse(rawUserInfo);
+      if (userInfo && userInfo.mobile) mobile.value = userInfo.mobile;
+    } catch {
+      // 缓存的用户信息解析失败时忽略，改走接口获取
     }
   }
+  if (!storage.getItem('accessToken')) return;
+  getMemberMsg().then(res => {
+    if (res.success && res.result) {
+      storage.setItem('userInfo', res.result);
+      mobile.value = res.result.mobile || '';
+    }
+  }).catch((err) => {
+    console.warn('获取会员信息失败', err);
+  });
 }
+
+function normalizePwdError (message) {
+  if (!message) return '修改失败，请稍后重试';
+  if (String(message).includes('旧密码') || String(message).includes('密码不正确')) {
+    return '旧密码不正确';
+  }
+  return message;
+}
+
+// 修改
+function handleRegist () {
+  formRegisterRef.value.validate((valid) => {
+    if (valid) {
+      const {newPassword, againPassword, password} = formRegister
+      if (newPassword !== againPassword) {
+        Message.error({
+          content: '新密码和确认密码不一致'
+        });
+        return
+      }
+      const params = {newPassword, password}
+      params.newPassword = md5(newPassword)
+      params.password = md5(password)
+      editPwd(params).then(res => {
+        if (res.success && res.result) {
+          Message.success('修改密码成功');
+          router.push('/home')
+        } else {
+          Message.error(normalizePwdError(res.message));
+        }
+      }).catch((err) => {
+        Message.error(normalizePwdError(err?.message || err?.data?.message));
+      });
+    }
+  })
+}
+
+// 提交验证
+function submitRegister () {
+  formDataRef.value.validate((valid) => {
+    if (valid) {
+      showPwd.value = true
+    }
+  })
+}
+
+// 设置密码
+function setPassword () {
+  formDataUpdateRef.value.validate((valid) => {
+    if (valid) {
+      const {newPassword, againPassword} = formDataUpdate
+      if (newPassword === '') {
+        Message.error({
+          content: '请输入密码'
+        });
+        return
+      }
+      if (newPassword !== againPassword) {
+        Message.error({
+          content: '新密码和确认密码不一致'
+        });
+        return
+      }
+      const params = {password: newPassword}
+      params.password = md5(newPassword)
+      setPwd(params).then(res => {
+        if (res.message === 'success' && res.result) {
+          Message.success('支付密码设置成功');
+          router.push('/home')
+        }
+      });
+    }
+  })
+}
+
+onMounted(() => {
+  status.value = route.query.status
+  loadMobile()
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/memberCenter/Point.vue b/buyer/src/pages/home/memberCenter/Point.vue
index ba412fc1c..d6db34396 100644
--- a/buyer/src/pages/home/memberCenter/Point.vue
+++ b/buyer/src/pages/home/memberCenter/Point.vue
@@ -42,48 +42,47 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
-import {memberPoint, memberPointHistory} from '@/api/member.js'
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { memberPoint, memberPointHistory } from '@/api/member.js'
 
-export default {
-  name: 'Point',
-  data () {
-    return {
-      logData: {}, // 积分日志
-      pointObj: {}, // 积分明细
-      loading: false, // 请求接口加载框
-      params: { // 积分列表请求参数
-        pageNumber: 1,
-        pageSize: 20
-      },
-    }
-  },
-  mounted () {
-    this.getHistory()
-    this.getPoint()
-  },
-  methods: {
-    getHistory () { // 获取积分历史
-      memberPointHistory(this.params).then(res => {
-        this.logData = res.result;
-      })
-    },
-    getPoint () { // 获取积分详情
-      memberPoint().then(res => {
-        if (res.success) this.pointObj = res.result
-      })
-    },
-    changePage (val) { // 修改页码
-      this.params.pageNumber = val
-      this.getHistory()
-    },
-    changePageSize (val) { // 修改页数
-      this.params.pageSize = val
-      this.params.pageNumber = 1
-      this.getHistory()
-    }
-  }
+defineOptions({ name: "Point" });
+
+const logData = ref({}); // 积分日志
+const pointObj = ref({}); // 积分明细
+const loading = ref(false); // 请求接口加载框
+const params = reactive({ // 积分列表请求参数
+  pageNumber: 1,
+  pageSize: 20
+});
+
+function getHistory() { // 获取积分历史
+  memberPointHistory(params).then(res => {
+    logData.value = res.result;
+  })
 }
+
+function getPoint() { // 获取积分详情
+  memberPoint().then(res => {
+    if (res.success) pointObj.value = res.result
+  })
+}
+
+function changePage(val) { // 修改页码
+  params.pageNumber = val
+  getHistory()
+}
+
+function changePageSize(val) { // 修改页数
+  params.pageSize = val
+  params.pageNumber = 1
+  getHistory()
+}
+
+onMounted(() => {
+  getHistory()
+  getPoint()
+});
 </script>
 <style lang="scss" scoped>
 h3 {
diff --git a/buyer/src/pages/home/memberCenter/Profile.vue b/buyer/src/pages/home/memberCenter/Profile.vue
index a226a6c40..7d066b979 100644
--- a/buyer/src/pages/home/memberCenter/Profile.vue
+++ b/buyer/src/pages/home/memberCenter/Profile.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <UserCenterLayout>
-      <el-form class="profile-form" :model="formItem" :rules="rules" ref="form" label-width="72px" label-position="left">
+      <el-form class="profile-form" :model="formItem" :rules="rules" ref="formRef" label-width="72px" label-position="left">
         <el-form-item label="头像" class="avatar-form-item">
           <div class="avatar-upload">
             <el-avatar v-if="formItem.face" :src="formItem.face" :size="72" />
@@ -42,114 +42,115 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import { editMemberInfo } from '@/api/account.js';
 import { getMemberMsg } from '@/api/login.js';
 import { buyerUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage.js';
 import { User } from '@element-plus/icons-vue';
-export default {
-  components: { User },
-  name: 'Profile',
-  data () {
-    return {
-      rules: { // 验证规则
-        nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]
-      },
-      formItem: {}, // 表单数据
-      action: buyerUrl + '/buyer/common/upload/file', // 上传接口
-      accessToken: {} // 验证token
+
+defineOptions({ name: 'Profile' });
+
+const route = useRoute();
+const router = useRouter();
+
+const formRef = ref(null);
+
+const rules = { // 验证规则
+  nickName: [{required: true, message: '用户昵称不能为空'}, { max: 16, message: '用户昵称不能超过15个字符' }]
+};
+const formItem = ref({}); // 表单数据
+const action = buyerUrl + '/buyer/common/upload/file'; // 上传接口
+const accessToken = reactive({}); // 验证token
+
+onMounted(() => {
+  accessToken.accessToken = storage.getItem('accessToken');
+  loadUserInfo();
+});
+
+function loadUserInfo () {
+  const rawUserInfo = storage.getItem('userInfo');
+  if (rawUserInfo) {
+    applyUserInfo(JSON.parse(rawUserInfo));
+    return;
+  }
+  if (!storage.getItem('accessToken')) {
+    redirectToLogin();
+    return;
+  }
+  getMemberMsg().then(res => {
+    if (res.success && res.result) {
+      storage.setItem('userInfo', res.result);
+      applyUserInfo(res.result);
+    } else {
+      redirectToLogin();
     }
-  },
-  mounted () {
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    this.loadUserInfo();
-  },
-  methods: {
-    loadUserInfo () {
-      const rawUserInfo = storage.getItem('userInfo');
-      if (rawUserInfo) {
-        this.applyUserInfo(JSON.parse(rawUserInfo));
-        return;
+  }).catch(() => {
+    redirectToLogin();
+  });
+}
+function applyUserInfo (userInfo) {
+  formItem.value = { ...userInfo };
+  formItem.value.birthday = normalizeBirthday(formItem.value.birthday);
+}
+function redirectToLogin () {
+  router.push({
+    path: '/login',
+    query: {
+      rePath: route.path,
+      query: JSON.stringify(route.query || {}),
+    },
+  });
+}
+function normalizeBirthday (value) {
+  if (!value) return ''
+  if (value instanceof Date) return value
+  if (typeof value === 'number') return new Date(value)
+  if (typeof value === 'string') {
+    const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
+    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+    const d = new Date(value)
+    return isNaN(d.getTime()) ? '' : d
+  }
+  return ''
+}
+function formatBirthday (value) {
+  if (!value) return null
+  if (typeof value === 'string') {
+    const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
+    return m ? `${m[1]}-${m[2]}-${m[3]}` : null
+  }
+  const d = value instanceof Date ? value : new Date(value)
+  if (isNaN(d.getTime())) return null
+  const yyyy = d.getFullYear()
+  const mm = String(d.getMonth() + 1).padStart(2, '0')
+  const dd = String(d.getDate()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd}`
+}
+function save () { // 保存
+  formRef.value.validate(valid => {
+    if (valid) {
+      let params = {
+        birthday: formatBirthday(formItem.value.birthday),
+        face: formItem.value.face,
+        nickName: formItem.value.nickName,
+        sex: formItem.value.sex
       }
-      if (!storage.getItem('accessToken')) {
-        this.redirectToLogin();
-        return;
-      }
-      getMemberMsg().then(res => {
-        if (res.success && res.result) {
-          storage.setItem('userInfo', res.result);
-          this.applyUserInfo(res.result);
-        } else {
-          this.redirectToLogin();
-        }
-      }).catch(() => {
-        this.redirectToLogin();
-      });
-    },
-    applyUserInfo (userInfo) {
-      this.formItem = { ...userInfo };
-      this.formItem.birthday = this.normalizeBirthday(this.formItem.birthday);
-    },
-    redirectToLogin () {
-      this.$router.push({
-        path: '/login',
-        query: {
-          rePath: this.$route.path,
-          query: JSON.stringify(this.$route.query || {}),
-        },
-      });
-    },
-    normalizeBirthday (value) {
-      if (!value) return ''
-      if (value instanceof Date) return value
-      if (typeof value === 'number') return new Date(value)
-      if (typeof value === 'string') {
-        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
-        if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
-        const d = new Date(value)
-        return isNaN(d.getTime()) ? '' : d
-      }
-      return ''
-    },
-    formatBirthday (value) {
-      if (!value) return null
-      if (typeof value === 'string') {
-        const m = value.match(/^(\d{4})-(\d{2})-(\d{2})/)
-        return m ? `${m[1]}-${m[2]}-${m[3]}` : null
-      }
-      const d = value instanceof Date ? value : new Date(value)
-      if (isNaN(d.getTime())) return null
-      const yyyy = d.getFullYear()
-      const mm = String(d.getMonth() + 1).padStart(2, '0')
-      const dd = String(d.getDate()).padStart(2, '0')
-      return `${yyyy}-${mm}-${dd}`
-    },
-    save () { // 保存
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          let params = {
-            birthday: this.formatBirthday(this.formItem.birthday),
-            face: this.formItem.face,
-            nickName: this.formItem.nickName,
-            sex: this.formItem.sex
-          }
-          editMemberInfo(params).then(res => {
-            if (res.success) {
-              Message.success('修改个人资料成功')
-              storage.setItem('userInfo', res.result)
-              this.$router.go(0)
-            }
-          })
+      editMemberInfo(params).then(res => {
+        if (res.success) {
+          Message.success('修改个人资料成功')
+          storage.setItem('userInfo', res.result)
+          router.go(0)
         }
       })
-    },
-    handleSuccess (res, file) { // 上传成功
-      this.formItem['face'] = res.result
-    },
-  }
-
+    }
+  })
+}
+function handleSuccess (res, file) { // 上传成功
+  formItem.value['face'] = res.result
 }
 </script>
 
diff --git a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
index 718899c45..bffef669f 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/AddEval.vue
@@ -74,119 +74,125 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { addEvaluation } from '@/api/member.js';
 import { buyerUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
-export default {
-  components: { Camera, Delete, View },
-  data () {
-    return {
-      order: {}, // 订单详情
-      orderGoods: {}, // 订单商品
-      form: { // 评分展示
-        deliveryScore: 5,
-        serviceScore: 5,
-        descriptionScore: 5
-      }, // 表单
-      visible: false, // 图片预览
-      action: buyerUrl + '/buyer/common/upload/file', // 上传地址
-      accessToken: {}, // 验证token
-      previewImage: '', // 预览图片地址
-      loading: false, // 提交加载状态
-      // el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
-      rateThemeColors: ['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)']
+
+const route = useRoute();
+const router = useRouter();
+const instance = getCurrentInstance();
+
+const order = ref({}); // 订单详情
+const orderGoods = ref({}); // 订单商品
+const form = reactive({ // 评分展示
+  deliveryScore: 5,
+  serviceScore: 5,
+  descriptionScore: 5
+}); // 表单
+const visible = ref(false); // 图片预览
+const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
+const accessToken = reactive({}); // 验证token
+const previewImage = ref(''); // 预览图片地址
+const loading = ref(false); // 提交加载状态
+// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
+const rateThemeColors = ['var(--theme-color)', 'var(--theme-color)', 'var(--theme-color)'];
+
+function getOrderDetail () { // 获取订单详情
+  orderDetail(route.query.sn).then(res => {
+    order.value = res.result
+    orderGoods.value = res.result.orderItems[route.query.index]
+    orderGoods.value['grade'] = 'GOOD'
+    orderGoods.value.uploadList = []
+  })
+}
+
+function save () { // 保存评价
+  if (!form.serviceScore || !form.deliveryScore) {
+    Message.warning('物流服务评价不能为空')
+    return false;
+  }
+
+  if (!form.descriptionScore) {
+    Message.warning('描述评价不能为空')
+    return false;
+  }
+
+  if (!orderGoods.value.content || !String(orderGoods.value.content).trim()) {
+    Message.warning('评论内容不能为空')
+    return false;
+  }
+
+  loading.value = true;
+  let goods = orderGoods.value
+  let params = {
+    goodsId: goods.goodsId,
+    orderItemSn: goods.sn,
+    skuId: goods.skuId,
+    descriptionScore: form.descriptionScore,
+    serviceScore: form.serviceScore,
+    deliveryScore: form.deliveryScore,
+    grade: goods.grade,
+    content: goods.content.trim(),
+    images: goods.uploadList.length ? goods.uploadList.join(',') : ''
+  }
+  addEvaluation(params).then(res => {
+    loading.value = false
+    if (res.success) {
+      Message.success('评价成功')
+      router.push('/home/CommentList')
+    } else {
+      Message.error(res.message || '评价失败，请稍后重试')
     }
-  },
-  methods: {
-    getOrderDetail () { // 获取订单详情
-      orderDetail(this.$route.query.sn).then(res => {
-        this.order = res.result
-        this.orderGoods = res.result.orderItems[this.$route.query.index]
-        this.orderGoods['grade'] = 'GOOD'
-        this.orderGoods.uploadList = []
-      })
-    },
-    save () { // 保存评价
-      if (!this.form.serviceScore || !this.form.deliveryScore) {
-        Message.warning('物流服务评价不能为空')
-        return false;
-      }
+  }).catch((err) => {
+    loading.value = false;
+    Message.error(err?.message || '评价失败，请稍后重试')
+  })
+}
 
-      if (!this.form.descriptionScore) {
-        Message.warning('描述评价不能为空')
-        return false;
-      }
+function goGoodsDetail (skuId, goodsId) { // 跳转商品详情
+  let routerUrl = router.resolve({
+    path: '/goodsDetail',
+    query: {skuId, goodsId}
+  })
+  window.open(routerUrl.href, '_blank')
+}
 
-      if (!this.orderGoods.content || !String(this.orderGoods.content).trim()) {
-        Message.warning('评论内容不能为空')
-        return false;
-      }
+function handleView (name) { // 预览图片
+  previewImage.value = name;
+  visible.value = true;
+}
 
-      this.loading = true;
-      let goods = this.orderGoods
-      let params = {
-        goodsId: goods.goodsId,
-        orderItemSn: goods.sn,
-        skuId: goods.skuId,
-        descriptionScore: this.form.descriptionScore,
-        serviceScore: this.form.serviceScore,
-        deliveryScore: this.form.deliveryScore,
-        grade: goods.grade,
-        content: goods.content.trim(),
-        images: goods.uploadList.length ? goods.uploadList.join(',') : ''
-      }
-      addEvaluation(params).then(res => {
-        this.loading = false
-        if (res.success) {
-          Message.success('评价成功')
-          this.$router.push('/home/CommentList')
-        } else {
-          Message.error(res.message || '评价失败，请稍后重试')
-        }
-      }).catch((err) => {
-        this.loading = false;
-        Message.error(err?.message || '评价失败，请稍后重试')
-      })
-    },
-    goGoodsDetail (skuId, goodsId) { // 跳转商品详情
-      let routerUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: {skuId, goodsId}
-      })
-      window.open(routerUrl.href, '_blank')
-    },
-    handleView (name) { // 预览图片
-      this.previewImage = name;
-      this.visible = true;
-    },
-    handleRemove (index) { // 移除图片
-      this.orderGoods.uploadList.splice(index, 1)
-      this.$forceUpdate()
-    },
-    handleSuccess (res, file) { // 上传成功回调
-      this.orderGoods.uploadList.push(res.result)
-      this.$forceUpdate()
-    },
-    handleBeforeUpload () { // 上传之前钩子
-      const check = this.orderGoods.uploadList.length < 9;
-      if (!check) {
-        Notice.warning({
-          title: '最多可以上传九张图片'
-        });
-        return check;
-      }
-    }
-  },
-  mounted () {
-    window.scrollTo(0, 0)
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    this.getOrderDetail()
+function handleRemove (index) { // 移除图片
+  orderGoods.value.uploadList.splice(index, 1)
+  instance.proxy.$forceUpdate()
+}
+
+function handleSuccess (res, file) { // 上传成功回调
+  orderGoods.value.uploadList.push(res.result)
+  instance.proxy.$forceUpdate()
+}
+
+function handleBeforeUpload () { // 上传之前钩子
+  const check = orderGoods.value.uploadList.length < 9;
+  if (!check) {
+    Notice.warning({
+      title: '最多可以上传九张图片'
+    });
+    return check;
   }
 }
+
+onMounted(() => {
+  window.scrollTo(0, 0)
+  accessToken.accessToken = storage.getItem('accessToken');
+  getOrderDetail()
+})
 </script>
 <style lang="scss" scoped>
 .delivery-rate {
diff --git a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
index d3baa74e6..4c7509504 100644
--- a/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
+++ b/buyer/src/pages/home/memberCenter/evaluation/EvalDetail.vue
@@ -79,51 +79,50 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { evaluationDetail } from "@/api/member.js";
-export default {
-  data() {
-    return {
-      order: {}, // 订单详情
-      orderGoods: {}, // 订单商品
-      visible: false, // 图片预览
-      previewImage: "", // 预览图片链接
-      loading: false, // 加载状态
-      // el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
-      rateThemeColors: ["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"],
-    };
-  },
-  computed: {
-    gradeText () {
-      const map = { GOOD: '好评', MODERATE: '中评', WORSE: '差评' }
-      return map[this.orderGoods.grade] || '评价详情'
-    }
-  },
-  methods: {
-    getDetail() {
-      // 获取评价详情
-      evaluationDetail(this.$route.query.id).then((res) => {
-        if (res.success) this.orderGoods = res.result;
-      });
-    },
-    goGoodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routerUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routerUrl.href, "_blank");
-    },
-    handleView(name) {
-      // 预览图片
-      this.previewImage = name;
-      this.visible = true;
-    },
-  },
-  mounted() {
-    this.getDetail();
-  },
-};
+
+const route = useRoute();
+const router = useRouter();
+
+const order = ref({}); // 订单详情
+const orderGoods = ref({}); // 订单商品
+const visible = ref(false); // 图片预览
+const previewImage = ref(""); // 预览图片链接
+const loading = ref(false); // 加载状态
+// el-rate SVG 通过 colors 写入 fill-color，跟随平台主题色
+const rateThemeColors = ref(["var(--theme-color)", "var(--theme-color)", "var(--theme-color)"]);
+
+const gradeText = computed(() => {
+  const map = { GOOD: '好评', MODERATE: '中评', WORSE: '差评' }
+  return map[orderGoods.value.grade] || '评价详情'
+});
+
+function getDetail() {
+  // 获取评价详情
+  evaluationDetail(route.query.id).then((res) => {
+    if (res.success) orderGoods.value = res.result;
+  });
+}
+function goGoodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routerUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routerUrl.href, "_blank");
+}
+function handleView(name) {
+  // 预览图片
+  previewImage.value = name;
+  visible.value = true;
+}
+
+onMounted(() => {
+  getDetail();
+});
 </script>
 <style lang="scss" scoped>
 .add-eval {
diff --git a/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue b/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
index bbc6883d2..bab855916 100644
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgDetail.vue
@@ -22,86 +22,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { Message, Modal } from "@/utils/message";
 import { delMemberMsg, getMemberMessage, readMemberMsg } from '@/api/member.js';
 import { refreshUnreadMessage } from '@/utils/unreadMessage';
 
+defineOptions({ name: 'MsgDetail' });
+
+const route = useRoute();
+const router = useRouter();
+
 const CACHE_KEY = 'buyer-member-message';
 
-export default {
-  name: 'MsgDetail',
-  data () {
-    return {
-      detail: {},
-      loaded: false
-    }
-  },
-  mounted () {
-    this.loadDetail()
-  },
-  methods: {
-    loadDetail () {
-      const id = this.$route.query.id
-      if (!id) {
-        this.loaded = true
-        return
-      }
-      const cached = this.readCache(id)
-      if (cached) this.detail = cached
-      getMemberMessage(id).then(res => {
-        if (res && res.success && res.result && res.result.id) {
-          this.detail = res.result
-          sessionStorage.setItem(CACHE_KEY, JSON.stringify(res.result))
-        }
-      }).catch((err) => {
-        console.warn('获取消息详情失败', err)
-      }).finally(() => {
-        this.loaded = true
-        this.markRead()
-      })
-    },
-    readCache (id) {
-      try {
-        const raw = sessionStorage.getItem(CACHE_KEY)
-        if (!raw) return null
-        const message = JSON.parse(raw)
-        return message && String(message.id) === String(id) ? message : null
-      } catch (e) {
-        return null
-      }
-    },
-    markRead () {
-      if (!this.detail.id || this.detail.status !== 'UN_READY') return
-      readMemberMsg(this.detail.id).then(res => {
-        if (res && res.success) {
-          this.detail.status = 'ALREADY_READY'
-          refreshUnreadMessage()
-        }
-      }).catch(() => {
-        // 标记已读为尽力而为操作，失败可忽略
-      })
-    },
-    goBack () {
-      this.$router.push({ name: 'MsgList' })
-    },
-    removeMessage () {
-      Modal.confirm({
-        title: '确认删除',
-        content: '确认要删除此消息?',
-        loading: true,
-        onOk: () =>
-          delMemberMsg(this.detail.id).then((res) => {
-            if (res.success) {
-              Message.success('消息已成功放入回收站')
-              refreshUnreadMessage()
-              this.goBack()
-            }
-          })
-      })
+const detail = ref({});
+const loaded = ref(false);
+
+function loadDetail () {
+  const id = route.query.id
+  if (!id) {
+    loaded.value = true
+    return
+  }
+  const cached = readCache(id)
+  if (cached) detail.value = cached
+  getMemberMessage(id).then(res => {
+    if (res && res.success && res.result && res.result.id) {
+      detail.value = res.result
+      sessionStorage.setItem(CACHE_KEY, JSON.stringify(res.result))
     }
+  }).catch((err) => {
+    console.warn('获取消息详情失败', err)
+  }).finally(() => {
+    loaded.value = true
+    markRead()
+  })
+}
+
+function readCache (id) {
+  try {
+    const raw = sessionStorage.getItem(CACHE_KEY)
+    if (!raw) return null
+    const message = JSON.parse(raw)
+    return message && String(message.id) === String(id) ? message : null
+  } catch (e) {
+    return null
   }
 }
+
+function markRead () {
+  if (!detail.value.id || detail.value.status !== 'UN_READY') return
+  readMemberMsg(detail.value.id).then(res => {
+    if (res && res.success) {
+      detail.value.status = 'ALREADY_READY'
+      refreshUnreadMessage()
+    }
+  }).catch(() => {
+    // 标记已读为尽力而为操作，失败可忽略
+  })
+}
+
+function goBack () {
+  router.push({ name: 'MsgList' })
+}
+
+function removeMessage () {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确认要删除此消息?',
+    loading: true,
+    onOk: () =>
+      delMemberMsg(detail.value.id).then((res) => {
+        if (res.success) {
+          Message.success('消息已成功放入回收站')
+          refreshUnreadMessage()
+          goBack()
+        }
+      })
+  })
+}
+
+onMounted(() => {
+  loadDetail()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
index 8f6ba7dec..db9c996fd 100644
--- a/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
+++ b/buyer/src/pages/home/memberCenter/memberMsg/MsgList.vue
@@ -47,85 +47,85 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
 import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
-export default {
-  data() {
-    return {
-      messageData: {},
-      status: ['未读', '已读', '回收站'],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        status: 'UN_READY'
-      },
-    }
-  },
-  computed: {
-    activeStatusIndex () {
-      const map = ['UN_READY', 'ALREADY_READY', 'ALREADY_REMOVE'];
-      const index = map.indexOf(this.params.status);
-      return index > -1 ? index : 0;
-    }
-  },
-  methods: {
-    statusChange (index) {
-      if (index === 0) { this.params.status = 'UN_READY' }
-      if (index === 1) { this.params.status = 'ALREADY_READY' }
-      if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
-      this.params.pageNumber = 1
-      this.getList()
-    },
-    changePage (v) {
-      this.params.pageNumber = v;
-      this.getList();
-    },
-    changePageSize (v) {
-      this.params.pageNumber = 1
-      this.params.pageSize = v;
-      this.getList();
-    },
-    openDetail (row) {
-      sessionStorage.setItem('buyer-member-message', JSON.stringify(row))
-      this.$router.push({ name: 'MsgDetail', query: { id: row.id } })
-    },
-    getList () {
-      memberMsgList(this.params).then(res => {
-        if (res.success) {
-          this.messageData = res.result;
-          if (this.params.status === 'UN_READY') {
-            this.$store.commit('SET_UNREAD_MSG', Number(res.result.total) || 0);
-          }
-        }
-      })
-    },
-    setRead (id) {
-      readMemberMsg(id).then(res => {
-        if (res.success) {
-          this.getList()
-        }
-      })
-    },
-    removeMessage (id) {
-      Modal.confirm({
-        title: '确认删除',
-        content: '确认要删除此消息?',
-        loading: true,
-        onOk: () =>
-          delMemberMsg(id).then((res) => {
-            if (res.success) {
-              Message.success('消息已成功放入回收站');
-              this.getList();
-            }
-          }),
-      });
-    }
-  },
-  mounted () {
-    this.getList()
-  }
+import { useAppStore } from "@/stores/app";
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const messageData = ref({});
+const status = ref(['未读', '已读', '回收站']);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  status: 'UN_READY'
+});
+
+const activeStatusIndex = computed(() => {
+  const map = ['UN_READY', 'ALREADY_READY', 'ALREADY_REMOVE'];
+  const index = map.indexOf(params.status);
+  return index > -1 ? index : 0;
+});
+
+function statusChange (index) {
+  if (index === 0) { params.status = 'UN_READY' }
+  if (index === 1) { params.status = 'ALREADY_READY' }
+  if (index === 2) { params.status = 'ALREADY_REMOVE' }
+  params.pageNumber = 1
+  getList()
 }
+function changePage (v) {
+  params.pageNumber = v;
+  getList();
+}
+function changePageSize (v) {
+  params.pageNumber = 1
+  params.pageSize = v;
+  getList();
+}
+function openDetail (row) {
+  sessionStorage.setItem('buyer-member-message', JSON.stringify(row))
+  router.push({ name: 'MsgDetail', query: { id: row.id } })
+}
+function getList () {
+  memberMsgList(params).then(res => {
+    if (res.success) {
+      messageData.value = res.result;
+      if (params.status === 'UN_READY') {
+        appStore.setUnreadMsg(Number(res.result.total) || 0);
+      }
+    }
+  })
+}
+function setRead (id) {
+  readMemberMsg(id).then(res => {
+    if (res.success) {
+      getList()
+    }
+  })
+}
+function removeMessage (id) {
+  Modal.confirm({
+    title: '确认删除',
+    content: '确认要删除此消息?',
+    loading: true,
+    onOk: () =>
+      delMemberMsg(id).then((res) => {
+        if (res.success) {
+          Message.success('消息已成功放入回收站');
+          getList();
+        }
+      }),
+  });
+}
+
+onMounted(() => {
+  getList()
+})
 </script>
 <style lang="scss" scoped>
 .msg-table {
diff --git a/buyer/src/pages/home/orderCenter/AddAddress.vue b/buyer/src/pages/home/orderCenter/AddAddress.vue
index 372eb2e80..61ea559ca 100644
--- a/buyer/src/pages/home/orderCenter/AddAddress.vue
+++ b/buyer/src/pages/home/orderCenter/AddAddress.vue
@@ -2,14 +2,14 @@
   <div>
     <UserCenterLayout>
     <div class="add-box">
-      <el-form :model="formData" ref="form" label-position="left" label-width="100px" :rules="ruleInline">
+      <el-form :model="formData" ref="formRef" label-position="left" label-width="100px" :rules="ruleInline">
         <el-form-item label="收件人" prop="name">
           <el-input v-model="formData.name" placeholder="请输入收件人姓名" style="width: 600px"></el-input>
         </el-form-item>
         <el-form-item label="收件地区" prop="address">
           <span>{{ formData.address || '暂无地址' }}</span>
 
-          <el-button type="default" style="margin-left: 10px;" size="small" @click="$refs.map.open()">选择</el-button>
+          <el-button type="default" style="margin-left: 10px;" size="small" @click="mapRef.open()">选择</el-button>
         </el-form-item>
         <el-form-item label="详细地址" prop="detail">
           <el-input v-model="formData.detail" placeholder="请输入详细地址" style="width: 600px"></el-input>
@@ -32,11 +32,13 @@
     </div>
     </UserCenterLayout>
 
-    <multipleMap  ref="map" @callback="getAddress" />
+    <multipleMap  ref="mapRef" @callback="getAddress" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import multipleMap from "@/components/map/multiple-map";
 import * as RegExp from "@/plugins/RegExp.js";
 import {
@@ -44,108 +46,107 @@ import {
   editMemberAddress,
   getAddrDetail,
 } from "@/api/address";
-export default {
-  name: "AddAddress",
-  data() {
-    return {
-      formData: {
-        // 添加地址表单
-        isDefault: false,
-      },
-      ruleInline: {
-        // 验证规则
-        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
-        address: [{ required: true, message: "请输入地址", trigger: "change" }],
-        detail: [
-          { required: true, message: "请输入详细地址", trigger: "blur" },
-        ],
-        mobile: [
-          { required: true, message: "请输入手机号码" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-      },
-      loading: false, // 加载状态
-      mapMsg: {}, // 地图信息
-    };
-  },
-  methods: {
-    save() {
-      // 保存地址
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.formData));
-          params.consigneeAddressPath = params.address.replace(/\s/g, ",");
-          delete params.address;
-          this.loading = true;
-          if (this.$route.query.id) {
-            editMemberAddress(params)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  this.$router.push("/home/MyAddress");
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          } else {
-            newMemberAddress(params)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  this.$router.push("/home/MyAddress");
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          }
-        }
-      });
-    },
-    getAddrById(id) {
-      // 获取地址详情
-      getAddrDetail(id).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          data.address = res.result.consigneeAddressPath.replace(/,/g, " ");
-          this.formData = data;
-        }
-      });
-    },
-    getAddress(val) {
-      // 获取地图选择信息
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-        this.formData['address'] = paths
-        this.formData['consigneeAddressIdPath'] = ids
-        const coord = val.data[val.data.length - 1].center.split(',')
-        this.formData.lat = coord[1]
-        this.formData.lon = coord[0]
-      }else{
-        this.formData["address"] = val.data.addr;
-        this.formData["consigneeAddressIdPath"] = val.data.addrId;
-        this.formData["detail"] = val.data.address;
-        this.formData.lat = val.data.position.lat;
-        this.formData.lon = val.data.position.lng;
-      }
 
+defineOptions({ name: "AddAddress" });
 
+const route = useRoute();
+const router = useRouter();
+
+const formRef = ref(null);
+const mapRef = ref(null);
+
+const formData = ref({
+  // 添加地址表单
+  isDefault: false,
+});
+const ruleInline = {
+  // 验证规则
+  name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+  address: [{ required: true, message: "请输入地址", trigger: "change" }],
+  detail: [
+    { required: true, message: "请输入详细地址", trigger: "blur" },
+  ],
+  mobile: [
+    { required: true, message: "请输入手机号码" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
     },
-  },
-  mounted() {
-    const id = this.$route.query.id;
-    if (id) this.getAddrById(id);
-  },
-  components: {
-    multipleMap
-  },
+  ],
 };
+const loading = ref(false); // 加载状态
+const mapMsg = ref({}); // 地图信息
+
+// 保存地址
+function save() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(formData.value));
+      params.consigneeAddressPath = params.address.replace(/\s/g, ",");
+      delete params.address;
+      loading.value = true;
+      if (route.query.id) {
+        editMemberAddress(params)
+          .then((res) => {
+            loading.value = false;
+            if (res.success) {
+              router.push("/home/MyAddress");
+            }
+          })
+          .catch(() => {
+            loading.value = false;
+          });
+      } else {
+        newMemberAddress(params)
+          .then((res) => {
+            loading.value = false;
+            if (res.success) {
+              router.push("/home/MyAddress");
+            }
+          })
+          .catch(() => {
+            loading.value = false;
+          });
+      }
+    }
+  });
+}
+function getAddrById(id) {
+  // 获取地址详情
+  getAddrDetail(id).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      data.address = res.result.consigneeAddressPath.replace(/,/g, " ");
+      formData.value = data;
+    }
+  });
+}
+function getAddress(val) {
+  // 获取地图选择信息
+  if(val.type === 'select'){
+    const paths = val.data.map(item => item.name).join(',')
+    const ids = val.data.map(item => item.id).join(',')
+    formData.value['address'] = paths
+    formData.value['consigneeAddressIdPath'] = ids
+    const coord = val.data[val.data.length - 1].center.split(',')
+    formData.value.lat = coord[1]
+    formData.value.lon = coord[0]
+  }else{
+    formData.value["address"] = val.data.addr;
+    formData.value["consigneeAddressIdPath"] = val.data.addrId;
+    formData.value["detail"] = val.data.address;
+    formData.value.lat = val.data.position.lat;
+    formData.value.lon = val.data.position.lng;
+  }
+
+
+}
+
+onMounted(() => {
+  const id = route.query.id;
+  if (id) getAddrById(id);
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/orderCenter/AfterSale.vue b/buyer/src/pages/home/orderCenter/AfterSale.vue
index 3bde86ffc..a3ec487b0 100644
--- a/buyer/src/pages/home/orderCenter/AfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSale.vue
@@ -102,7 +102,7 @@
             </div>
           </div>
         </div>
-        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+        <el-form ref="formRef" :model="form" label-position="left" label-width="100px" :rules="rules">
           <el-form-item label="物流公司" prop="logisticsId">
             <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
               <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
@@ -131,170 +131,169 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
 import {afterSaleList, cancelAfterSale} from '@/api/member.js';
 import {afterSaleDelivery, getLogisticsCompany} from '@/api/order.js';
 import {afterSaleStatusList} from '../enumeration.js'
 
-export default {
-  name: 'AfterSale',
-  data() {
-    return {
-      orderList: [], // 订单列表
-      params: { // 请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        keywords: '',
-        sn: '',
-        sort: 'createTime',
-        order: 'desc'
-      },
-      // 状态数组
-      afterSaleStatusList,
-      total: 0, // 订单总数
-      spinShow: false, // 加载状态
-      companyList: [], // 物流公司列表
-      logisticsShow: false, // 物流信息modal
-      singleOrder: {}, // 单独的售后信息
-      form: { // 物流信息数据
-        afterSaleSn: '',
-        logisticsId: '',
-        logisticsNo: '',
-        mDeliverTime: ''
-      },
-      rules: { // 必填校验
-        logisticsId: [{required: true, message: '请选择物流公司'}],
-        logisticsNo: [{required: true, message: '请填写物流编号'}],
-        mDeliverTime: [{required: true, message: '请选择发货时间'}]
-      },
-      submitLoading: false, // 提交加载状态
-      changeWay: [
-        { name: '全部', status: '' },
-        { name: '申请中', status: 'APPLY' },
-        { name: '通过', status: 'PASS' },
-        { name: '完成售后', status: 'COMPLETE' },
-      ],
-      activeTab: 0,
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    goDetail(sn) { // 跳转售后详情
-      this.$router.push({
-        name: 'AfterSaleDetail',
-        query: {sn}
-      })
-    },
-    cancel(sn) { // 取消售后申请
-      Modal.confirm({
-        title: '取消',
-        content: '确定取消此次售后申请吗？',
-        onOk: () => {
-          cancelAfterSale(sn).then(res => {
-            if (res.success) {
-              Message.success('取消售后申请成功')
-              this.getList()
-            }
-          })
-        },
-        onCancel: () => {
-        }
-      });
-    },
-    goodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: {skuId, goodsId}
-      });
-      window.open(routeUrl.href, '_blank');
-    },
-    // 跳转店铺首页
-    shopPage(id) {
-      this.$router.push({
-        path: '/merchant',
-        query: {id: id}
-      });
-    },
-    change(index) {
-      this.activeTab = index
-      this.params.pageNumber = 1
-      const current = this.changeWay[index]
-      if (!current || !current.status) {
-        delete this.params.serviceStatus
-      } else {
-        this.params.serviceStatus = current.status
-      }
-      this.getList()
-    },
-    getList() { // 获取售后列表
-      this.spinShow = true;
-      let params = JSON.parse(JSON.stringify(this.params))
-      afterSaleList(params).then(res => {
-        this.spinShow = false
-        if (res.success) {
-          this.orderList = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    changePageNum(val) { // 修改页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize(val) { // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
-    },
-    filterOrderStatus(status) { // 获取订单状态中文
-      const ob = this.afterSaleStatusList.filter(e => {
-        return e.status === status
-      });
-      return ob && ob[0] ? ob[0].name : status
-    },
-    // 获取物流公司列表
-    getCompany() {
-      getLogisticsCompany().then(res => {
-        if (res.success) {
-          this.companyList = res.result
-        }
-      })
-    },
-    // 提交物流信息
-    submitDelivery() {
-      this.$refs.form?.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        afterSaleDelivery(this.form).then(res => {
-          if (res.success) {
-            this.logisticsShow = false;
-            Message.success('提交成功');
-            this.getList();
-          }
-          this.submitLoading = false;
-        }).catch(() => {
-          this.submitLoading = false;
-        });
-      });
-    },
-    // 提交物流modal
-    openModal(row) {
-      this.singleOrder = row;
-      this.logisticsShow = true;
-      if (!this.companyList.length) {
-        this.getCompany();
-      }
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-        this.form.afterSaleSn = row.sn;
-      });
-    }
-  }
+defineOptions({ name: 'AfterSale' });
+
+const router = useRouter();
+
+const formRef = ref(null);
+
+const orderList = ref([]); // 订单列表
+const params = reactive({ // 请求参数
+  pageNumber: 1,
+  pageSize: 20,
+  keywords: '',
+  sn: '',
+  sort: 'createTime',
+  order: 'desc'
+});
+const total = ref(0); // 订单总数
+const spinShow = ref(false); // 加载状态
+const companyList = ref([]); // 物流公司列表
+const logisticsShow = ref(false); // 物流信息modal
+const singleOrder = ref({}); // 单独的售后信息
+const form = reactive({ // 物流信息数据
+  afterSaleSn: '',
+  logisticsId: '',
+  logisticsNo: '',
+  mDeliverTime: ''
+});
+const rules = { // 必填校验
+  logisticsId: [{required: true, message: '请选择物流公司'}],
+  logisticsNo: [{required: true, message: '请填写物流编号'}],
+  mDeliverTime: [{required: true, message: '请选择发货时间'}]
 };
+const submitLoading = ref(false); // 提交加载状态
+const changeWay = [
+  { name: '全部', status: '' },
+  { name: '申请中', status: 'APPLY' },
+  { name: '通过', status: 'PASS' },
+  { name: '完成售后', status: 'COMPLETE' },
+];
+const activeTab = ref(0);
+
+function goDetail(sn) { // 跳转售后详情
+  router.push({
+    name: 'AfterSaleDetail',
+    query: {sn}
+  })
+}
+function cancel(sn) { // 取消售后申请
+  Modal.confirm({
+    title: '取消',
+    content: '确定取消此次售后申请吗？',
+    onOk: () => {
+      cancelAfterSale(sn).then(res => {
+        if (res.success) {
+          Message.success('取消售后申请成功')
+          getList()
+        }
+      })
+    },
+    onCancel: () => {
+    }
+  });
+}
+function goodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: '/goodsDetail',
+    query: {skuId, goodsId}
+  });
+  window.open(routeUrl.href, '_blank');
+}
+// 跳转店铺首页
+function shopPage(id) {
+  router.push({
+    path: '/merchant',
+    query: {id: id}
+  });
+}
+function change(index) {
+  activeTab.value = index
+  params.pageNumber = 1
+  const current = changeWay[index]
+  if (!current || !current.status) {
+    delete params.serviceStatus
+  } else {
+    params.serviceStatus = current.status
+  }
+  getList()
+}
+function getList() { // 获取售后列表
+  spinShow.value = true;
+  let paramsData = JSON.parse(JSON.stringify(params))
+  afterSaleList(paramsData).then(res => {
+    spinShow.value = false
+    if (res.success) {
+      orderList.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function changePageNum(val) { // 修改页码
+  params.pageNumber = val;
+  getList()
+}
+function changePageSize(val) { // 修改页数
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList()
+}
+function filterOrderStatus(status) { // 获取订单状态中文
+  const ob = afterSaleStatusList.filter(e => {
+    return e.status === status
+  });
+  return ob && ob[0] ? ob[0].name : status
+}
+// 获取物流公司列表
+function getCompany() {
+  getLogisticsCompany().then(res => {
+    if (res.success) {
+      companyList.value = res.result
+    }
+  })
+}
+// 提交物流信息
+function submitDelivery() {
+  formRef.value?.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    afterSaleDelivery(form).then(res => {
+      if (res.success) {
+        logisticsShow.value = false;
+        Message.success('提交成功');
+        getList();
+      }
+      submitLoading.value = false;
+    }).catch(() => {
+      submitLoading.value = false;
+    });
+  });
+}
+// 提交物流modal
+function openModal(row) {
+  singleOrder.value = row;
+  logisticsShow.value = true;
+  if (!companyList.value.length) {
+    getCompany();
+  }
+  nextTick(() => {
+    formRef.value?.resetFields();
+    form.afterSaleSn = row.sn;
+  });
+}
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
index d11a41447..402abc37c 100644
--- a/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
+++ b/buyer/src/pages/home/orderCenter/AfterSaleDetail.vue
@@ -106,7 +106,7 @@
         <span>提交物流信息</span>
       </p></template>
       <div>
-        <el-form ref="form" :model="form" label-position="left" label-width="100px" :rules="rules">
+        <el-form ref="formRef" :model="form" label-position="left" label-width="100px" :rules="rules">
           <el-form-item label="物流公司" prop="logisticsId">
             <el-select v-model="form.logisticsId" placeholder="请选择物流公司">
               <el-option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</el-option>
@@ -135,150 +135,151 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
 import { afterSaleDetail, afterSaleLog, afterSaleReason, cancelAfterSale } from '@/api/member.js';
 import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js';
 import { afterSaleStatusList } from '../enumeration.js'
-export default {
-  name: 'aftersale-detail',
-  data () {
-    return {
-      afterSale: {}, // 售后详情数据
-      logList: [], // 日志
-      reasonList: [], // 售后原因列表
-      afterSaleStatusList, // 售后状态列表
-      companyList: [], // 物流公司列表
-      logisticsShow: false, // 物流信息modal
-      form: { // 物流信息数据
-        afterSaleSn: '',
-        logisticsId: '',
-        logisticsNo: '',
-        mDeliverTime: ''
-      },
-      rules: { // 必填校验
-        logisticsId: [{ required: true, message: '请选择物流公司' }],
-        logisticsNo: [{ required: true, message: '请填写物流编号' }],
-        mDeliverTime: [{ required: true, message: '请选择发货时间' }]
-      },
-      submitLoading: false // 提交加载状态
-    };
-  },
-  computed: {
-    canSubmitLogistics () {
-      return this.afterSale.serviceStatus == 'PASS' && this.afterSale.serviceType != 'RETURN_MONEY'
-    },
-    canCancel () {
-      return this.afterSale.afterSaleAllowOperationVO && this.afterSale.afterSaleAllowOperationVO.cancel
-    }
-  },
-  methods: {
-    getDetail () { // 售后详情
-      afterSaleDetail(this.$route.query.sn).then(res => {
-        if (res.success) {
-          this.afterSale = res.result;
-          this.afterSale.serviceName = this.filterOrderStatus(this.afterSale.serviceStatus)
-          // 如果是原因id，则调接口查询原因中文释义
-          const pattern3 = new RegExp('[0-9]+');
-          if (pattern3.test(this.afterSale.reason)) {
-            this.getReason(this.afterSale.serviceType)
-          } else {
-            this.afterSale['reasonName'] = this.afterSale.reason
-          }
-        }
-      })
-    },
-    getReason (type) { // 获取售后原因
-      afterSaleReason(type).then(res => {
-        if (res.success) {
-          this.reasonList = res.result
-          this.reasonList.forEach(e => {
-            if (e.id === this.afterSale.reason) {
-              this.afterSale['reasonName'] = e.reason
-            }
-          })
-        }
-      })
-    },
-    getLog () { // 获取售后日志
-      afterSaleLog(this.$route.query.sn).then(res => {
-        this.logList = (res.result || []).slice().sort((a, b) => {
-          return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
-        })
-      })
-    },
-    logDesc (log) {
-      const operator = log.operatorName ? `操作人：${log.operatorName}` : ''
-      return [operator, log.createTime].filter(Boolean).join('  ')
-    },
-    shopPage (id) {
-      if (!id) return
-      this.$router.push({
-        path: '/merchant',
-        query: { id }
-      })
-    },
-    filterOrderStatus (status) { // 获取订单状态中文
-      const ob = this.afterSaleStatusList.filter(e => { return e.status === status });
-      if (ob.length) return ob[0].name
-    },
-    perviewImg (img) { // 查看图片
-      window.open(img, '_blank')
-    },
-    cancel (sn) { // 取消售后申请
-      Modal.confirm({
-        title: '取消',
-        content: '<p>确定取消此次售后申请吗？</p>',
-        onOk: () => {
-          cancelAfterSale(sn).then(res => {
-            if (res.success) {
-              Message.success('取消售后申请成功')
-              this.getDetail()
-            }
-          })
-        },
-        onCancel: () => {}
-      });
-    },
-    // 获取物流公司列表
-    getCompany () {
-      getLogisticsCompany().then(res => {
-        if (res.success) {
-          this.companyList = res.result
-        }
-      })
-    },
-    // 提交物流信息
-    submitDelivery () {
-      this.submitLoading = true
-      afterSaleDelivery(this.form).then(res => {
-        if (res.success) {
-          this.logisticsShow = false;
-          Message.success('提交成功')
-          this.getDetail()
-        }
-        this.submitLoading = false
-      }).catch(() => {
-        this.submitLoading = false
-      })
-    },
-    // 提交物流modal
-    openModal () {
-      this.logisticsShow = true;
-      if (!this.companyList.length) {
-        this.getCompany();
-      }
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-        this.form.afterSaleSn = this.afterSale.sn;
-      });
-    }
-  },
-  mounted () {
-    this.getDetail();
-    this.getLog()
-  }
+
+defineOptions({ name: 'aftersale-detail' });
+
+const route = useRoute();
+const router = useRouter();
+
+const afterSale = ref({}); // 售后详情数据
+const logList = ref([]); // 日志
+const reasonList = ref([]); // 售后原因列表
+const companyList = ref([]); // 物流公司列表
+const logisticsShow = ref(false); // 物流信息modal
+const form = reactive({ // 物流信息数据
+  afterSaleSn: '',
+  logisticsId: '',
+  logisticsNo: '',
+  mDeliverTime: ''
+});
+const rules = { // 必填校验
+  logisticsId: [{ required: true, message: '请选择物流公司' }],
+  logisticsNo: [{ required: true, message: '请填写物流编号' }],
+  mDeliverTime: [{ required: true, message: '请选择发货时间' }]
 };
+const submitLoading = ref(false); // 提交加载状态
+
+const formRef = ref(null);
+
+const canSubmitLogistics = computed(() => {
+  return afterSale.value.serviceStatus == 'PASS' && afterSale.value.serviceType != 'RETURN_MONEY'
+});
+const canCancel = computed(() => {
+  return afterSale.value.afterSaleAllowOperationVO && afterSale.value.afterSaleAllowOperationVO.cancel
+});
+
+function getDetail () { // 售后详情
+  afterSaleDetail(route.query.sn).then(res => {
+    if (res.success) {
+      afterSale.value = res.result;
+      afterSale.value.serviceName = filterOrderStatus(afterSale.value.serviceStatus)
+      // 如果是原因id，则调接口查询原因中文释义
+      const pattern3 = new RegExp('[0-9]+');
+      if (pattern3.test(afterSale.value.reason)) {
+        getReason(afterSale.value.serviceType)
+      } else {
+        afterSale.value['reasonName'] = afterSale.value.reason
+      }
+    }
+  })
+}
+function getReason (type) { // 获取售后原因
+  afterSaleReason(type).then(res => {
+    if (res.success) {
+      reasonList.value = res.result
+      reasonList.value.forEach(e => {
+        if (e.id === afterSale.value.reason) {
+          afterSale.value['reasonName'] = e.reason
+        }
+      })
+    }
+  })
+}
+function getLog () { // 获取售后日志
+  afterSaleLog(route.query.sn).then(res => {
+    logList.value = (res.result || []).slice().sort((a, b) => {
+      return new Date(a.createTime).getTime() - new Date(b.createTime).getTime()
+    })
+  })
+}
+function logDesc (log) {
+  const operator = log.operatorName ? `操作人：${log.operatorName}` : ''
+  return [operator, log.createTime].filter(Boolean).join('  ')
+}
+function shopPage (id) {
+  if (!id) return
+  router.push({
+    path: '/merchant',
+    query: { id }
+  })
+}
+function filterOrderStatus (status) { // 获取订单状态中文
+  const ob = afterSaleStatusList.filter(e => { return e.status === status });
+  if (ob.length) return ob[0].name
+}
+function perviewImg (img) { // 查看图片
+  window.open(img, '_blank')
+}
+function cancel (sn) { // 取消售后申请
+  Modal.confirm({
+    title: '取消',
+    content: '<p>确定取消此次售后申请吗？</p>',
+    onOk: () => {
+      cancelAfterSale(sn).then(res => {
+        if (res.success) {
+          Message.success('取消售后申请成功')
+          getDetail()
+        }
+      })
+    },
+    onCancel: () => {}
+  });
+}
+// 获取物流公司列表
+function getCompany () {
+  getLogisticsCompany().then(res => {
+    if (res.success) {
+      companyList.value = res.result
+    }
+  })
+}
+// 提交物流信息
+function submitDelivery () {
+  submitLoading.value = true
+  afterSaleDelivery(form).then(res => {
+    if (res.success) {
+      logisticsShow.value = false;
+      Message.success('提交成功')
+      getDetail()
+    }
+    submitLoading.value = false
+  }).catch(() => {
+    submitLoading.value = false
+  })
+}
+// 提交物流modal
+function openModal () {
+  logisticsShow.value = true;
+  if (!companyList.value.length) {
+    getCompany();
+  }
+  nextTick(() => {
+    formRef.value?.resetFields();
+    form.afterSaleSn = afterSale.value.sn;
+  });
+}
+
+onMounted(() => {
+  getDetail();
+  getLog()
+});
 </script>
 <style lang="scss" scoped>
 .order-detail {
diff --git a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
index 080c50713..90cd9c149 100644
--- a/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
+++ b/buyer/src/pages/home/orderCenter/ApplyAfterSale.vue
@@ -18,7 +18,7 @@
       <el-table-column prop="num" label="购买数量" />
     </el-table>
     <div>
-      <el-form :model="form" ref="form" class="mt_10" :rules="rules" label-width="80px">
+      <el-form :model="form" ref="formRef" class="mt_10" :rules="rules" label-width="80px">
         <el-form-item label="售后类别">
           <el-radio-group v-model="form.serviceType" @change="changeReason" type="button" button-style="solid">
             <el-radio v-if="info.returnGoods" label="RETURN_GOODS">退货</el-radio>
@@ -101,125 +101,125 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { afterSaleReason, afterSaleInfo, applyAfterSale } from '@/api/member.js'
 import { buyerUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
 import * as RegExp from '@/plugins/RegExp'
-export default {
-  components: { Camera, Delete, View },
-  data () {
-    const checkNum = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请填写提交数量'));
-      } else if (value > this.info.num) {
-        callback(new Error('提交数量不能大于购买数量'));
-      } else if (!RegExp.integer.test(value)) {
-        callback(new Error('提交数量必须为正整数'));
-      } else {
-        callback();
-      }
-    };
-    return {
-      goodsData: [], // 商品数据
-      reasonList: [], // 售后原因列表
-      info: {}, // 售后信息
-      form: { // 售后数据
-        serviceType: 'RETURN_GOODS',
-        num: 1
-      },
-      uploadList: [], // 上传列表
-      action: buyerUrl + '/buyer/common/upload/file', // 上传地址
-      accessToken: {}, // 验证token
-      visible: false, // 图片预览
-      previewImage: '', // 预览图片url
-      rules: { // 验证规则
-        num: [{ validator: checkNum }],
-        reason: [{ required: true, message: '请选择提交原因' }],
-        problemDesc: [{ required: true, message: '请输入问题描述' }],
-        bankAccountNumber: [
-          { required: true, message: '请输入银行卡号' },
-          {
-            type: 'string',
-            pattern: /^[0-9]\d*$/,
-            message: '请输入正确的银行卡号'
-          }
-        ],
-        bankAccountName: [{ required: true, message: '请输入银行开户名' }],
-        bankDepositName: [{ required: true, message: '请输入银行开户行' }]
-      }
+
+const route = useRoute();
+const router = useRouter();
+
+const formRef = ref(null);
+
+const goodsData = ref([]); // 商品数据
+const reasonList = ref([]); // 售后原因列表
+const info = ref({}); // 售后信息
+const form = reactive({ // 售后数据
+  serviceType: 'RETURN_GOODS',
+  num: 1
+});
+const uploadList = ref([]); // 上传列表
+const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
+const accessToken = reactive({}); // 验证token
+const visible = ref(false); // 图片预览
+const previewImage = ref(''); // 预览图片url
+
+const checkNum = (rule, value, callback) => {
+  if (value === '') {
+    callback(new Error('请填写提交数量'));
+  } else if (value > info.value.num) {
+    callback(new Error('提交数量不能大于购买数量'));
+  } else if (!RegExp.integer.test(value)) {
+    callback(new Error('提交数量必须为正整数'));
+  } else {
+    callback();
+  }
+};
+const rules = { // 验证规则
+  num: [{ validator: checkNum }],
+  reason: [{ required: true, message: '请选择提交原因' }],
+  problemDesc: [{ required: true, message: '请输入问题描述' }],
+  bankAccountNumber: [
+    { required: true, message: '请输入银行卡号' },
+    {
+      type: 'string',
+      pattern: /^[0-9]\d*$/,
+      message: '请输入正确的银行卡号'
     }
-  },
-  methods: {
-    getInfo () { // 获取售后信息
-      afterSaleInfo(this.$route.query.sn).then(res => {
+  ],
+  bankAccountName: [{ required: true, message: '请输入银行开户名' }],
+  bankDepositName: [{ required: true, message: '请输入银行开户行' }]
+};
+
+function getInfo () { // 获取售后信息
+  afterSaleInfo(route.query.sn).then(res => {
+    if (res.success) {
+      info.value = res.result
+      goodsData.value.push(res.result)
+      if (!info.value.returnGoods && info.value.returnMoney) {
+        form.serviceType = 'RETURN_MONEY'
+      }
+      getReason(form.serviceType)
+    }
+  })
+}
+function getReason (type) { // 获取售后原因
+  afterSaleReason(type).then(res => {
+    if (res.success) reasonList.value = res.result
+  })
+}
+function changeReason (type) { // 改变售后原因列表
+  form.reason = undefined
+  getReason(type)
+  nextTick(() => {
+    formRef.value?.clearValidate('reason')
+  })
+}
+function apply () { // 售后申请提交
+  formRef.value.validate(valid => {
+    if (valid) {
+      let params = Object.assign(info.value, form)
+      params.images = uploadList.value.toString()
+      params.orderItemSn = route.query.sn
+      params.reason = reasonList.value.find(item => item.id == params.reason).reason
+      applyAfterSale(params).then(res => {
         if (res.success) {
-          this.info = res.result
-          this.goodsData.push(res.result)
-          if (!this.info.returnGoods && this.info.returnMoney) {
-            this.form.serviceType = 'RETURN_MONEY'
-          }
-          this.getReason(this.form.serviceType)
+          Message.success('售后申请提交成功，请到售后订单查看！')
+          router.push({name: 'AfterSale'})
         }
       })
-    },
-    getReason (type) { // 获取售后原因
-      afterSaleReason(type).then(res => {
-        if (res.success) this.reasonList = res.result
-      })
-    },
-    changeReason (type) { // 改变售后原因列表
-      this.form.reason = undefined
-      this.getReason(type)
-      this.$nextTick(() => {
-        this.$refs.form?.clearValidate('reason')
-      })
-    },
-    apply () { // 售后申请提交
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          let params = Object.assign(this.info, this.form)
-          params.images = this.uploadList.toString()
-          params.orderItemSn = this.$route.query.sn
-          params.reason = this.reasonList.find(item => item.id == params.reason).reason
-          applyAfterSale(params).then(res => {
-            if (res.success) {
-              Message.success('售后申请提交成功，请到售后订单查看！')
-              this.$router.push({name: 'AfterSale'})
-            }
-          })
-        }
-      })
-    },
-    handleView (name) { // 预览图片
-      this.previewImage = name;
-      this.visible = true;
-    },
-    handleRemove (index) { // 移除图片
-      this.uploadList.splice(index, 1)
-      this.$forceUpdate()
-    },
-    handleSuccess (res, file) { // 上传成功回调
-      this.uploadList.push(res.result)
-      this.$forceUpdate()
-    },
-    handleBeforeUpload () { // 上传之前钩子函数
-      const check = this.uploadList.length < 6;
-      if (!check) {
-        Notice.warning({
-          title: '最多可以上传5张图片'
-        });
-        return check;
-      }
     }
-  },
-  mounted () {
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    this.getInfo()
+  })
+}
+function handleView (name) { // 预览图片
+  previewImage.value = name;
+  visible.value = true;
+}
+function handleRemove (index) { // 移除图片
+  uploadList.value.splice(index, 1)
+}
+function handleSuccess (res, file) { // 上传成功回调
+  uploadList.value.push(res.result)
+}
+function handleBeforeUpload () { // 上传之前钩子函数
+  const check = uploadList.value.length < 6;
+  if (!check) {
+    Notice.warning({
+      title: '最多可以上传5张图片'
+    });
+    return check;
   }
 }
+
+onMounted(() => {
+  accessToken.accessToken = storage.getItem('accessToken');
+  getInfo()
+});
 </script>
 <style lang="scss" scoped>
 
diff --git a/buyer/src/pages/home/orderCenter/Complain.vue b/buyer/src/pages/home/orderCenter/Complain.vue
index 99a81aab0..35120f75d 100644
--- a/buyer/src/pages/home/orderCenter/Complain.vue
+++ b/buyer/src/pages/home/orderCenter/Complain.vue
@@ -61,101 +61,107 @@
     </UserCenterLayout>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Notice } from "@/utils/message";
 import { Camera, Delete, View } from '@element-plus/icons-vue';
 import { orderDetail } from '@/api/order.js';
 import { afterSaleReason, handleComplain } from '@/api/member.js';
 import { buyerUrl } from '@/plugins/request.js';
 import storage from '@/plugins/storage';
-export default {
-  components: { Camera, Delete, View },
-  data () {
-    return {
-      order: {}, // 订单详情
-      orderGoods: {}, // 订单商品
-      form: { // 投诉表单
-        complainTopic: '',
-        content: ''
-      }, // 表单
-      visible: false, // 图片预览
-      action: buyerUrl + '/buyer/common/upload/file', // 上传地址
-      accessToken: {}, // 验证token
-      previewImage: '', // 图片地址
-      loading: false, // 加载状态
-      reasonList: [] // 投诉原因
+
+const route = useRoute();
+const router = useRouter();
+const instance = getCurrentInstance();
+
+const order = ref({}); // 订单详情
+const orderGoods = ref({}); // 订单商品
+const form = reactive({ // 投诉表单
+  complainTopic: '',
+  content: ''
+}); // 表单
+const visible = ref(false); // 图片预览
+const action = ref(buyerUrl + '/buyer/common/upload/file'); // 上传地址
+const accessToken = reactive({}); // 验证token
+const previewImage = ref(''); // 图片地址
+const loading = ref(false); // 加载状态
+const reasonList = ref([]); // 投诉原因
+
+function getOrderDetail() { // 获取订单详情
+  orderDetail(route.query.sn).then(res => {
+    order.value = res.result
+    orderGoods.value = res.result.orderItems[route.query.index]
+    orderGoods.value.uploadList = []
+  })
+  afterSaleReason('COMPLAIN').then(res => {
+    if (res.success) {
+      reasonList.value = res.result
+      form['complainTopic'] = res.result[0].reason
+      instance.proxy.$forceUpdate()
     }
-  },
-  methods: {
-    getOrderDetail () { // 获取订单详情
-      orderDetail(this.$route.query.sn).then(res => {
-        this.order = res.result
-        this.orderGoods = res.result.orderItems[this.$route.query.index]
-        this.orderGoods.uploadList = []
-      })
-      afterSaleReason('COMPLAIN').then(res => {
-        if (res.success) {
-          this.reasonList = res.result
-          this.form['complainTopic'] = res.result[0].reason
-          this.$forceUpdate()
-        }
-      })
-    },
-    save () { // 提交投诉信息
-      if (!this.form.content || !String(this.form.content).trim()) {
-        Message.warning('投诉内容不能为空')
-        return
-      }
-      let params = {
-        goodsId: this.orderGoods.goodsId,
-        complainTopic: this.form.complainTopic,
-        content: this.form.content,
-        images: this.orderGoods.uploadList.toString(),
-        orderSn: this.$route.query.sn,
-        skuId: this.orderGoods.skuId
-      }
-      handleComplain(params).then(res => {
-        if (res.success) {
-          Message.success('投诉申请已提交，感谢您的反馈')
-          this.$router.push({name: 'ComplainList'})
-        }
-      })
-    },
-    goGoodsDetail (skuId, goodsId) { // 跳转商品详情
-      let routerUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: {skuId, goodsId}
-      })
-      window.open(routerUrl.href, '_blank')
-    },
-    handleView (name) { // 预览图片
-      this.previewImage = name;
-      this.visible = true;
-    },
-    handleRemove (index) { // 移除图片
-      this.orderGoods.uploadList.splice(index, 1)
-      this.$forceUpdate()
-    },
-    handleSuccess (res, file) { // 上传成功回调
-      this.orderGoods.uploadList.push(res.result)
-      this.$forceUpdate()
-    },
-    handleBeforeUpload () { // 上传之前钩子函数
-      const check = this.orderGoods.uploadList.length < 6;
-      if (!check) {
-        Notice.warning({
-          title: '最多可以上传五张图片'
-        });
-        return check;
-      }
+  })
+}
+
+function save() { // 提交投诉信息
+  if (!form.content || !String(form.content).trim()) {
+    Message.warning('投诉内容不能为空')
+    return
+  }
+  let params = {
+    goodsId: orderGoods.value.goodsId,
+    complainTopic: form.complainTopic,
+    content: form.content,
+    images: orderGoods.value.uploadList.toString(),
+    orderSn: route.query.sn,
+    skuId: orderGoods.value.skuId
+  }
+  handleComplain(params).then(res => {
+    if (res.success) {
+      Message.success('投诉申请已提交，感谢您的反馈')
+      router.push({name: 'ComplainList'})
     }
-  },
-  mounted () {
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    this.getOrderDetail()
-    window.scrollTo(0, 0)
+  })
+}
+
+function goGoodsDetail(skuId, goodsId) { // 跳转商品详情
+  let routerUrl = router.resolve({
+    path: '/goodsDetail',
+    query: {skuId, goodsId}
+  })
+  window.open(routerUrl.href, '_blank')
+}
+
+function handleView(name) { // 预览图片
+  previewImage.value = name;
+  visible.value = true;
+}
+
+function handleRemove(index) { // 移除图片
+  orderGoods.value.uploadList.splice(index, 1)
+  instance.proxy.$forceUpdate()
+}
+
+function handleSuccess(res, file) { // 上传成功回调
+  orderGoods.value.uploadList.push(res.result)
+  instance.proxy.$forceUpdate()
+}
+
+function handleBeforeUpload() { // 上传之前钩子函数
+  const check = orderGoods.value.uploadList.length < 6;
+  if (!check) {
+    Notice.warning({
+      title: '最多可以上传五张图片'
+    });
+    return check;
   }
 }
+
+onMounted(() => {
+  accessToken.accessToken = storage.getItem('accessToken');
+  getOrderDetail()
+  window.scrollTo(0, 0)
+})
 </script>
 <style lang="scss" scoped>
 .delivery-rate {
diff --git a/buyer/src/pages/home/orderCenter/MyAddress.vue b/buyer/src/pages/home/orderCenter/MyAddress.vue
index a2f953870..7787ee517 100644
--- a/buyer/src/pages/home/orderCenter/MyAddress.vue
+++ b/buyer/src/pages/home/orderCenter/MyAddress.vue
@@ -35,59 +35,59 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
 import { Delete, Edit } from '@element-plus/icons-vue';
 import { memberAddress, delMemberAddress } from '@/api/address.js';
 
-export default {
-  components: { Delete, Edit },
-  name: 'MyAddress',
+defineOptions({ name: 'MyAddress' });
 
-  data () {
-    return {
-      list: [] // 地址列表
-    };
-  },
-  methods: {
-    add () {
-      this.$router.push('/home/addAddress');
-    },
-    edit (id) {
-      // 编辑地址
-      this.$router.push({ path: '/home/addAddress', query: { id: id } });
-    },
-    del (id) {
-      // 删除地址
-      Modal.confirm({
-        title: '提示',
-        content: '你确定删除这个收货地址',
-        onOk: () => {
-          delMemberAddress(id).then((res) => {
-            if (res.success) {
-              Message.success('删除成功');
-              this.getAddrList();
-            }
-          });
-        },
-        onCancel: () => {
-          Message.info('取消删除');
-        }
-      });
-    },
-    getAddrList () {
-      // 获取地址列表
-      memberAddress().then((res) => {
+const router = useRouter();
+
+const list = ref([]); // 地址列表
+
+function add () {
+  router.push('/home/addAddress');
+}
+
+// 编辑地址
+function edit (id) {
+  router.push({ path: '/home/addAddress', query: { id: id } });
+}
+
+// 删除地址
+function del (id) {
+  Modal.confirm({
+    title: '提示',
+    content: '你确定删除这个收货地址',
+    onOk: () => {
+      delMemberAddress(id).then((res) => {
         if (res.success) {
-          this.list = res.result.records;
+          Message.success('删除成功');
+          getAddrList();
         }
       });
+    },
+    onCancel: () => {
+      Message.info('取消删除');
     }
-  },
-  mounted () {
-    this.getAddrList();
-  }
-};
+  });
+}
+
+// 获取地址列表
+function getAddrList () {
+  memberAddress().then((res) => {
+    if (res.success) {
+      list.value = res.result.records;
+    }
+  });
+}
+
+onMounted(() => {
+  getAddrList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/orderCenter/MyOrder.vue b/buyer/src/pages/home/orderCenter/MyOrder.vue
index 6e90f1d51..eadb9befd 100644
--- a/buyer/src/pages/home/orderCenter/MyOrder.vue
+++ b/buyer/src/pages/home/orderCenter/MyOrder.vue
@@ -197,266 +197,264 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
-import { getOrderList, sureReceived, cancelOrder, delOrder } from '@/api/order';
+import { getOrderList, sureReceived, cancelOrder, delOrder as deleteOrder } from '@/api/order';
 import { afterSaleReason } from '@/api/member';
 import { orderStatusList, afterSaleStatusList } from '../enumeration.js'
-export default {
-  name: 'MyOrder',
-  props: {
-    homePage: { // 判断是否个人中心首页展示内容
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      orderList: [], // 订单列表
-      params: { // 请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        // orderStatus: 'ALL',
-        keywords: '',
-        tag: 'ALL'
-      },
-      cancelParams: { // 取消售后参数
-        orderSn: '',
-        reason: ''
-      },
-      // 状态数组
-      orderStatusList,
-      afterSaleStatusList,
-      changeWay: ['全部', '待付款', '待发货', '待收货/使用'],
-      activeOrderTab: 0,
-      total: 0, // 数据总数
-      spinShow: false, // 加载状态
-      afterSaleModal: false, // 选择售后商品模态框
-      afterSaleArr: [], // 售后商品列表
-      cancelAvail: false, // 取消订单modal控制
-      cancelReason: [] // 取消订单原因
-    };
-  },
-  mounted () {
-    if (this.homePage) this.params.pageSize = 5;
-    if (!this.homePage) this.applyRouteTag();
-    this.getList();
-  },
-  watch: {
-    '$route.query.tag' () {
-      if (this.homePage || this.$route.name !== 'MyOrder') return;
-      const next = this.$route.query.tag || 'ALL';
-      if (this.params.tag === next) return;
-      this.applyRouteTag();
-      this.getList();
-    }
-  },
-  methods: {
-    // 退款状态枚举
-    refundPriceList(status) {
-      switch (status) {
-        case 'ALL_REFUND':
-          return "全部退款";
-        case 'PART_REFUND':
-          return "部分退款";
-        case 'NO_REFUND':
-          return "";
-        case 'REFUNDING':
-          return "退款中";
-        default:
-          return "";
-      }
-    },
-    goodsDetail (skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: { skuId, goodsId }
-      });
-      window.open(routeUrl.href, '_blank');
-    },
-    orderTags () {
-      return ['ALL', 'WAIT_PAY', 'WAIT_SHIP', 'WAIT_USE'];
-    },
-    applyRouteTag () {
-      const tags = this.orderTags();
-      const tag = this.$route.query.tag;
-      const index = tags.indexOf(tag);
-      this.activeOrderTab = index > -1 ? index : 0;
-      this.params.tag = tags[this.activeOrderTab];
-      this.params.pageNumber = 1;
-    },
-    // 切换订单状态
-    change (index) {
-      this.activeOrderTab = index;
-      this.params.pageNumber = 1;
-      delete this.params.commentStatus;
-      const tags = this.orderTags();
-      this.params.tag = tags[index] || 'ALL';
-      const query = { ...this.$route.query };
-      if (index === 0) delete query.tag;
-      else query.tag = this.params.tag;
-      const current = this.$route.query.tag || 'ALL';
-      if (current !== this.params.tag) {
-        this.$router.replace({ name: 'MyOrder', query });
-      }
-      this.getList()
-    },
-    // 跳转店铺首页
-    shopPage (id) {
-      this.$router.push({
-        path: '/merchant',
-        query: { id: id }
-      });
-    },
-    orderDetail (sn) {
-      this.$router.push({ name: 'OrderDetail', query: {sn} });
-    },
-    goAfterSaleDetail (sn) {
-      this.$router.push({ name: 'AfterSaleDetail', query: { sn } });
-    },
-    received (sn) { // 确认收货
-      sureReceived(sn).then(res => {
-        if (res.success) {
-          Message.success('确认收货成功')
-          this.getList()
-        }
-      })
-    },
-    goPay (sn) { // 去支付
-      this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
-    },
-    applyAfterSale (goodsItem) { // 申请售后
-      let arr = []
-      goodsItem.forEach(e => {
-        if (e.afterSaleStatus === 'NOT_APPLIED'|| e.afterSaleStatus === 'PART_AFTER_SALE') {
-          arr.push(e)
-        }
-      });
-      if (arr.length === 1) {
-        this.$router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
-      } else {
-        this.afterSaleArr = arr;
-        this.afterSaleModal = true
-      }
-    },
-    // 申请售后
-    afterSaleSelect (item) {
-      this.$router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
-    },
-    complain (sn, goodsIndex) { // 投诉
-      this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
-    },
-    delOrder (sn) { // 删除订单
-      Modal.confirm({
-        title: '删除订单',
-        content: '<p>确认删除当前订单吗？</p>',
-        onOk: () => {
-          delOrder(sn).then(res => {
-            if (res.success) {
-              Message.success('删除成功');
-              this.getList()
-            }
-          })
-        },
-        onCancel: () => {}
-      });
-    },
-    getList () {
-      this.spinShow = true;
-      let params = JSON.parse(JSON.stringify(this.params))
-      if (params.orderStatus === 'ALL') {
-        delete params.orderStatus
-      }
-      getOrderList(params).then(res => {
-        this.spinShow = false
-        if (res.success) {
-          this.orderList = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    mapAfterSaleOrder (item) {
-      return {
-        ...item,
-        isAfterSale: true,
-        serviceSn: item.sn,
-        sn: item.orderSn,
-        orderStatus: item.serviceStatus,
-        flowPrice: item.applyRefundPrice,
-        orderItems: [
-          {
-            image: item.goodsImage,
-            name: item.goodsName,
-            skuId: item.skuId,
-            goodsId: item.goodsId,
-            goodsPrice: item.flowPrice,
-            num: item.num,
-          },
-        ],
-        allowOperationVO: {},
-      }
-    },
-    changePageNum (val) { // 修改页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize (val) { // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
-    },
-    handleCancelOrder (sn) {
-      // 取消订单
-      this.cancelParams.orderSn = sn;
-      afterSaleReason('CANCEL').then(res => {
-        if (res.success) {
-          this.cancelReason = res.result;
-          this.cancelAvail = true
-          this.cancelParams.reason = this.cancelReason[0].reason
-        }
-      })
-    },
-    sureCancel () { // 确定取消
-      cancelOrder(this.cancelParams).then(res => {
-        if (res.success) {
-          Message.success('取消订单成功')
-          this.getList()
-          this.cancelAvail = false
-        }
-      })
-    },
-    filterOrderStatus (status) { // 获取订单状态中文
-      const ob = this.orderStatusList.filter(e => { return e.status === status });
-      return ob && ob[0] ? ob[0].name : status
-    },
-    filterAfterSaleStatus (status) {
-      const ob = this.afterSaleStatusList.filter(e => e.status === status);
-      return ob && ob[0] ? ob[0].name : status
-    },
-    canAfterSale (order) {
-      if (order.isAfterSale || order.orderType === 'E_COUPON' || !order.groupAfterSaleStatus) {
-        return false
-      }
-      return order.groupAfterSaleStatus.includes('NOT_APPLIED') || order.groupAfterSaleStatus.includes('PART_AFTER_SALE')
-    },
-    paymentLabel (order) {
-      const map = {
-        WECHAT: '微信支付',
-        ALIPAY: '支付宝',
-        WALLET: '余额支付',
-        BANK_TRANSFER: '线下转账'
-      }
-      if (order.paymentMethod && map[order.paymentMethod]) {
-        return map[order.paymentMethod]
-      }
-      if (order.payStatus === 'UNPAID' || order.orderStatus === 'UNPAID') {
-        return '待支付'
-      }
-      return ''
-    }
+
+defineOptions({ name: 'MyOrder' });
+
+const props = defineProps({
+  homePage: { // 判断是否个人中心首页展示内容
+    type: Boolean,
+    default: false
   }
-};
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const orderList = ref([]); // 订单列表
+const params = reactive({ // 请求参数
+  pageNumber: 1,
+  pageSize: 20,
+  // orderStatus: 'ALL',
+  keywords: '',
+  tag: 'ALL'
+});
+const cancelParams = reactive({ // 取消售后参数
+  orderSn: '',
+  reason: ''
+});
+const changeWay = ref(['全部', '待付款', '待发货', '待收货/使用']);
+const activeOrderTab = ref(0);
+const total = ref(0); // 数据总数
+const spinShow = ref(false); // 加载状态
+const afterSaleModal = ref(false); // 选择售后商品模态框
+const afterSaleArr = ref([]); // 售后商品列表
+const cancelAvail = ref(false); // 取消订单modal控制
+const cancelReason = ref([]); // 取消订单原因
+
+// 退款状态枚举
+function refundPriceList(status) {
+  switch (status) {
+    case 'ALL_REFUND':
+      return "全部退款";
+    case 'PART_REFUND':
+      return "部分退款";
+    case 'NO_REFUND':
+      return "";
+    case 'REFUNDING':
+      return "退款中";
+    default:
+      return "";
+  }
+}
+function goodsDetail (skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: '/goodsDetail',
+    query: { skuId, goodsId }
+  });
+  window.open(routeUrl.href, '_blank');
+}
+function orderTags () {
+  return ['ALL', 'WAIT_PAY', 'WAIT_SHIP', 'WAIT_USE'];
+}
+function applyRouteTag () {
+  const tags = orderTags();
+  const tag = route.query.tag;
+  const index = tags.indexOf(tag);
+  activeOrderTab.value = index > -1 ? index : 0;
+  params.tag = tags[activeOrderTab.value];
+  params.pageNumber = 1;
+}
+// 切换订单状态
+function change (index) {
+  activeOrderTab.value = index;
+  params.pageNumber = 1;
+  delete params.commentStatus;
+  const tags = orderTags();
+  params.tag = tags[index] || 'ALL';
+  const query = { ...route.query };
+  if (index === 0) delete query.tag;
+  else query.tag = params.tag;
+  const current = route.query.tag || 'ALL';
+  if (current !== params.tag) {
+    router.replace({ name: 'MyOrder', query });
+  }
+  getList()
+}
+// 跳转店铺首页
+function shopPage (id) {
+  router.push({
+    path: '/merchant',
+    query: { id: id }
+  });
+}
+function orderDetail (sn) {
+  router.push({ name: 'OrderDetail', query: {sn} });
+}
+function goAfterSaleDetail (sn) {
+  router.push({ name: 'AfterSaleDetail', query: { sn } });
+}
+function received (sn) { // 确认收货
+  sureReceived(sn).then(res => {
+    if (res.success) {
+      Message.success('确认收货成功')
+      getList()
+    }
+  })
+}
+function goPay (sn) { // 去支付
+  router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
+}
+function applyAfterSale (goodsItem) { // 申请售后
+  let arr = []
+  goodsItem.forEach(e => {
+    if (e.afterSaleStatus === 'NOT_APPLIED'|| e.afterSaleStatus === 'PART_AFTER_SALE') {
+      arr.push(e)
+    }
+  });
+  if (arr.length === 1) {
+    router.push({name: 'ApplyAfterSale', query: {sn: arr[0].sn}})
+  } else {
+    afterSaleArr.value = arr;
+    afterSaleModal.value = true
+  }
+}
+// 申请售后
+function afterSaleSelect (item) {
+  router.push({name: 'ApplyAfterSale', query: {sn: item.sn}})
+}
+function complain (sn, goodsIndex) { // 投诉
+  router.push({name: 'Complain', query: {sn, index: goodsIndex}})
+}
+function delOrder (sn) { // 删除订单
+  Modal.confirm({
+    title: '删除订单',
+    content: '<p>确认删除当前订单吗？</p>',
+    onOk: () => {
+      deleteOrder(sn).then(res => {
+        if (res.success) {
+          Message.success('删除成功');
+          getList()
+        }
+      })
+    },
+    onCancel: () => {}
+  });
+}
+function getList () {
+  spinShow.value = true;
+  let _params = JSON.parse(JSON.stringify(params))
+  if (_params.orderStatus === 'ALL') {
+    delete _params.orderStatus
+  }
+  getOrderList(_params).then(res => {
+    spinShow.value = false
+    if (res.success) {
+      orderList.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function mapAfterSaleOrder (item) {
+  return {
+    ...item,
+    isAfterSale: true,
+    serviceSn: item.sn,
+    sn: item.orderSn,
+    orderStatus: item.serviceStatus,
+    flowPrice: item.applyRefundPrice,
+    orderItems: [
+      {
+        image: item.goodsImage,
+        name: item.goodsName,
+        skuId: item.skuId,
+        goodsId: item.goodsId,
+        goodsPrice: item.flowPrice,
+        num: item.num,
+      },
+    ],
+    allowOperationVO: {},
+  }
+}
+function changePageNum (val) { // 修改页码
+  params.pageNumber = val;
+  getList()
+}
+function changePageSize (val) { // 修改页数
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList()
+}
+function handleCancelOrder (sn) {
+  // 取消订单
+  cancelParams.orderSn = sn;
+  afterSaleReason('CANCEL').then(res => {
+    if (res.success) {
+      cancelReason.value = res.result;
+      cancelAvail.value = true
+      cancelParams.reason = cancelReason.value[0].reason
+    }
+  })
+}
+function sureCancel () { // 确定取消
+  cancelOrder(cancelParams).then(res => {
+    if (res.success) {
+      Message.success('取消订单成功')
+      getList()
+      cancelAvail.value = false
+    }
+  })
+}
+function filterOrderStatus (status) { // 获取订单状态中文
+  const ob = orderStatusList.filter(e => { return e.status === status });
+  return ob && ob[0] ? ob[0].name : status
+}
+function filterAfterSaleStatus (status) {
+  const ob = afterSaleStatusList.filter(e => e.status === status);
+  return ob && ob[0] ? ob[0].name : status
+}
+function canAfterSale (order) {
+  if (order.isAfterSale || order.orderType === 'E_COUPON' || !order.groupAfterSaleStatus) {
+    return false
+  }
+  return order.groupAfterSaleStatus.includes('NOT_APPLIED') || order.groupAfterSaleStatus.includes('PART_AFTER_SALE')
+}
+function paymentLabel (order) {
+  const map = {
+    WECHAT: '微信支付',
+    ALIPAY: '支付宝',
+    WALLET: '余额支付',
+    BANK_TRANSFER: '线下转账'
+  }
+  if (order.paymentMethod && map[order.paymentMethod]) {
+    return map[order.paymentMethod]
+  }
+  if (order.payStatus === 'UNPAID' || order.orderStatus === 'UNPAID') {
+    return '待支付'
+  }
+  return ''
+}
+
+watch(() => route.query.tag, () => {
+  if (props.homePage || route.name !== 'MyOrder') return;
+  const next = route.query.tag || 'ALL';
+  if (params.tag === next) return;
+  applyRouteTag();
+  getList();
+});
+
+onMounted(() => {
+  if (props.homePage) params.pageSize = 5;
+  if (!props.homePage) applyRouteTag();
+  getList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/orderCenter/OrderDetail.vue b/buyer/src/pages/home/orderCenter/OrderDetail.vue
index 98a048cd7..77e8230d8 100644
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -410,7 +410,9 @@
 
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import {
   orderDetail,
@@ -438,276 +440,278 @@ import {
  * 订单详情：E_COUPON 展示 orderItems[].cardKeys，屏蔽售后/物流（FR-B-03 / FR-B-04）。
  * 移动端已完成订单用 Dialog 查看卡密（原型 P-09 / D-01）。
  */
-export default {
-  name: "order-detail",
-  data() {
-    return {
-      order: {}, // 订单详情数据
-      progressList: [], // 订单流程
-      logistics: "", // 物流数据
-      cardKeyDialogVisible: false,
-      cancelParams: {
-        // 取消售后参数
-        orderSn: "",
-        reason: "",
-      },
-      cancelAvail: false, // 取消订单modal控制
-      cancelReason: [], // 取消订单原因
-      orderPackage: [],
-      packageTraceList: [],
-      logisticsModal: false,
-    };
-  },
-  computed: {
-    /** 电子卡券订单：无物流/核验码，卡密数据来自 API-B-01 orderItems[].cardKeys */
-    isECouponOrder() {
-      return checkECouponOrder(this.order?.order?.orderType);
-    },
-    isVirtualOrder() {
-      return this.order?.order?.orderType === "VIRTUAL";
-    },
-    isNonPhysicalOrder() {
-      return this.isVirtualOrder || this.isECouponOrder;
-    },
-    /** 是否展示卡密区块（仅当前订单 orderItems） */
-    hasCardKeySection() {
-      return orderHasCardKeySection({
-        orderItems: this.order.orderItems,
-        isECouponOrder: this.isECouponOrder,
-      });
-    },
-    cardKeyFulfillLines() {
-      return collectCardKeyFulfillLines(this.order.orderItems);
-    },
-    ecouponCardKeyRows() {
-      return flattenOrderCardKeys(this.order.orderItems, false);
-    },
-    /** 商家以无需配送方式发货（包裹 fulfillmentMode=NO_DELIVERY） */
-    isNoDeliveryOrder() {
-      return checkNoDeliveryOrder(this.orderPackage);
-    },
-    displayDeliveryMethodValue() {
-      if (this.isNoDeliveryOrder) return "无需配送";
-      return this.order?.deliveryMethodValue || "-";
-    },
-    noDeliveryPackages() {
-      return (this.orderPackage || []).filter(isNoDeliveryPackage);
-    },
-    noDeliveryRemark() {
-      const pkg = this.noDeliveryPackages.find((p) => p.deliveryRemark);
-      return pkg?.deliveryRemark || "";
-    },
-    noDeliveryShipTime() {
-      const pkg = this.noDeliveryPackages[0];
-      return pkg?.logisticsTime || "";
-    },
-  },
-  methods: {
-    isNoDeliveryPackage,
-    getFulfillmentModeLabel,
-    cardKeyFulfillAlertType,
-    resolveCardKeyFulfillMessage,
-    lineCardKeyRows(line) {
-      return line.cardKeys || [];
-    },
-    copyCardKey(row) {
-      const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
-      this.copyText(text);
-    },
-    copyAllCardKeys() {
-      const text = this.ecouponCardKeyRows
-        .map((row, i) => `${i + 1}. 卡号：${row.cardNo || ""}  卡密：${row.cardSecret || ""}`)
-        .join("\n");
-      this.copyText(text || "");
-    },
-    copyText(text) {
-      if (!text) return;
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(() => {
-          Message.success("已复制到剪贴板");
-        });
-      } else {
-        const ta = document.createElement("textarea");
-        ta.value = text;
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand("copy");
-        document.body.removeChild(ta);
-        Message.success("已复制到剪贴板");
+defineOptions({ name: "order-detail" });
+
+const route = useRoute();
+const router = useRouter();
+
+const order = ref({}); // 订单详情数据
+const progressList = ref([]); // 订单流程
+const logistics = ref(""); // 物流数据
+const cardKeyDialogVisible = ref(false);
+const cancelParams = reactive({
+  // 取消售后参数
+  orderSn: "",
+  reason: "",
+});
+const cancelAvail = ref(false); // 取消订单modal控制
+const cancelReason = ref([]); // 取消订单原因
+const orderPackage = ref([]);
+const packageTraceList = ref([]);
+const logisticsModal = ref(false);
+
+/** 电子卡券订单：无物流/核验码，卡密数据来自 API-B-01 orderItems[].cardKeys */
+const isECouponOrder = computed(() => checkECouponOrder(order.value?.order?.orderType));
+const isVirtualOrder = computed(() => order.value?.order?.orderType === "VIRTUAL");
+const isNonPhysicalOrder = computed(() => isVirtualOrder.value || isECouponOrder.value);
+/** 是否展示卡密区块（仅当前订单 orderItems） */
+const hasCardKeySection = computed(() =>
+  orderHasCardKeySection({
+    orderItems: order.value.orderItems,
+    isECouponOrder: isECouponOrder.value,
+  })
+);
+const cardKeyFulfillLines = computed(() => collectCardKeyFulfillLines(order.value.orderItems));
+const ecouponCardKeyRows = computed(() => flattenOrderCardKeys(order.value.orderItems, false));
+/** 商家以无需配送方式发货（包裹 fulfillmentMode=NO_DELIVERY） */
+const isNoDeliveryOrder = computed(() => checkNoDeliveryOrder(orderPackage.value));
+const displayDeliveryMethodValue = computed(() => {
+  if (isNoDeliveryOrder.value) return "无需配送";
+  return order.value?.deliveryMethodValue || "-";
+});
+const noDeliveryPackages = computed(() => (orderPackage.value || []).filter(isNoDeliveryPackage));
+const noDeliveryRemark = computed(() => {
+  const pkg = noDeliveryPackages.value.find((p) => p.deliveryRemark);
+  return pkg?.deliveryRemark || "";
+});
+const noDeliveryShipTime = computed(() => {
+  const pkg = noDeliveryPackages.value[0];
+  return pkg?.logisticsTime || "";
+});
+
+function lineCardKeyRows(line) {
+  return line.cardKeys || [];
+}
+
+function copyCardKey(row) {
+  const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
+  copyText(text);
+}
+
+function copyAllCardKeys() {
+  const text = ecouponCardKeyRows.value
+    .map((row, i) => `${i + 1}. 卡号：${row.cardNo || ""}  卡密：${row.cardSecret || ""}`)
+    .join("\n");
+  copyText(text || "");
+}
+
+function copyText(text) {
+  if (!text) return;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      Message.success("已复制到剪贴板");
+    });
+  } else {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    document.body.removeChild(ta);
+    Message.success("已复制到剪贴板");
+  }
+}
+
+function isVatSpecialReceipt(receipt) {
+  if (!receipt) return false;
+  const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+  if (rt === "2" || rt === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL") {
+    return true;
+  }
+  return false;
+}
+
+function isPersonalReceipt(receipt) {
+  return !isVatSpecialReceipt(receipt);
+}
+
+function formatReceiptType(receipt) {
+  if (!receipt) return "";
+  const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+  if (rt === "电子普通发票" || rt === "增值税专用发票") return rt;
+  return isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
+}
+
+function formatReceiptHeaderType(receipt) {
+  if (!receipt) return "";
+  if (isVatSpecialReceipt(receipt)) return "单位";
+  if (receipt.taxpayerId) return "单位";
+  return "个人";
+}
+
+function hasValidReceipt() {
+  const receipt = order.value && order.value.receipt;
+  if (!receipt) return false;
+  const content = receipt.receiptContent ? String(receipt.receiptContent).trim() : '';
+  const title = receipt.receiptTitle ? String(receipt.receiptTitle).trim() : '';
+  const taxpayerId = receipt.taxpayerId ? String(receipt.taxpayerId).trim() : '';
+  // 后端有时会返回占位 receipt（如 receiptContent=不开发票），这里过滤掉
+  if (content === '不开发票') return false;
+  return Boolean(content || title || taxpayerId);
+}
+
+function getInvoiceAddress(receipt) {
+  if (!receipt) return "";
+  return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
+}
+
+function viewReceiptInvoice(receipt) {
+  const invoiceAddress = getInvoiceAddress(receipt);
+  if (!invoiceAddress) {
+    Message.warning("暂无发票附件");
+    return;
+  }
+  window.open(invoiceAddress, "_blank");
+}
+
+function goodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+
+// 跳转店铺首页
+function shopPage(id) {
+  router.push({
+    path: "/merchant",
+    query: { id: id },
+  });
+}
+
+async function getDetail() {
+  // 获取订单详情
+  orderDetail(route.query.sn).then(async (res) => {
+    if (res.success) {
+      order.value = res.result;
+      const receiptId =
+        (res.result.order && res.result.order.receiptId) ||
+        res.result.receiptId ||
+        (res.result.receipt && res.result.receipt.id);
+      if (receiptId) {
+        const receiptRes = await receiptDetail(receiptId);
+        if (receiptRes && receiptRes.success && receiptRes.result) {
+          order.value["receipt"] = receiptRes.result;
+        }
       }
-    },
-    isVatSpecialReceipt (receipt) {
-      if (!receipt) return false;
-      const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
-      if (rt === "2" || rt === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL") {
-        return true;
+      progressList.value = (res.result.orderLogs || []).slice().sort((a, b) => {
+        return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
+      });
+      if (order.value.order.deliveryMethod === 'LOGISTICS') {
+        getOrderPackage(order.value.order.sn);
       }
-      return false;
-    },
-    isPersonalReceipt (receipt) {
-      return !this.isVatSpecialReceipt(receipt);
-    },
-    formatReceiptType (receipt) {
-      if (!receipt) return "";
-      const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
-      if (rt === "电子普通发票" || rt === "增值税专用发票") return rt;
-      return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
-    },
-    formatReceiptHeaderType (receipt) {
-      if (!receipt) return "";
-      if (this.isVatSpecialReceipt(receipt)) return "单位";
-      if (receipt.taxpayerId) return "单位";
-      return "个人";
-    },
-    hasValidReceipt () {
-      const receipt = this.order && this.order.receipt;
-      if (!receipt) return false;
-      const content = receipt.receiptContent ? String(receipt.receiptContent).trim() : '';
-      const title = receipt.receiptTitle ? String(receipt.receiptTitle).trim() : '';
-      const taxpayerId = receipt.taxpayerId ? String(receipt.taxpayerId).trim() : '';
-      // 后端有时会返回占位 receipt（如 receiptContent=不开发票），这里过滤掉
-      if (content === '不开发票') return false;
-      return Boolean(content || title || taxpayerId);
-    },
-    getInvoiceAddress (receipt) {
-      if (!receipt) return "";
-      return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
-    },
-    viewReceiptInvoice (receipt) {
-      const invoiceAddress = this.getInvoiceAddress(receipt);
-      if (!invoiceAddress) {
-        Message.warning("暂无发票附件");
-        return;
+    }
+  });
+}
+
+function getOrderPackage(sn) {
+  getPackage(sn).then(res => {
+    if (res.success) {
+      orderPackage.value = Array.isArray(res.result) ? res.result : [];
+      if (!orderPackage.value.length) {
+        traces();
       }
-      window.open(invoiceAddress, "_blank");
-    },
-    goodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 跳转店铺首页
-    shopPage(id) {
-      this.$router.push({
-        path: "/merchant",
-        query: { id: id },
-      });
-    },
-    async getDetail() {
-      // 获取订单详情
-      orderDetail(this.$route.query.sn).then(async (res) => {
-        if (res.success) {
-          this.order = res.result;
-          const receiptId =
-            (res.result.order && res.result.order.receiptId) ||
-            res.result.receiptId ||
-            (res.result.receipt && res.result.receipt.id);
-          if (receiptId) {
-            const receiptRes = await receiptDetail(receiptId);
-            if (receiptRes && receiptRes.success && receiptRes.result) {
-              this.order["receipt"] = receiptRes.result;
-            }
-          }
-          this.progressList = (res.result.orderLogs || []).slice().sort((a, b) => {
-            return new Date(a.createTime).getTime() - new Date(b.createTime).getTime();
-          });
-          if (this.order.order.deliveryMethod === 'LOGISTICS') {
-            this.getOrderPackage(this.order.order.sn);
-          }
-        }
-      });
-    },
-    getOrderPackage(sn) {
-      getPackage(sn).then(res => {
-        if (res.success) {
-          this.orderPackage = Array.isArray(res.result) ? res.result : [];
-          if (!this.orderPackage.length) {
-            this.traces();
-          }
-        } else {
-          this.traces();
-        }
-      }).catch(() => {
-        this.traces();
-      });
-    },
-    traces() {
-      // 物流信息
-      getTraces(this.$route.query.sn).then((res) => {
-        if (res.success) {
-          this.logistics = res.result;
-        }
-      });
-    },
-    logisticsList() {
-      this.logisticsModal = true;
-      this.packageTraceList = this.orderPackage;
-      // getTracesList(this.order.order.sn).then((res) => {
-      //   if (res.success && res.result != null) {
-      //     this.packageTraceList = res.result;
-      //   }
-      // });
-    },
-    received(sn) {
-      // 确认收货
-      sureReceived(sn).then((res) => {
-        if (res.success) {
-          Message.success("确认收货成功");
-          this.getDetail();
-        }
-      });
-    },
-    goPay(sn) {
-      // 去支付
-      this.$router.push({
-        path: "/payment",
-        query: { orderType: "ORDER", sn },
-      });
-    },
-    applyAfterSale(sn) {
-      // 申请售后
-      this.$router.push({ name: "ApplyAfterSale", query: { sn: sn } });
-    },
-    comment(sn, goodsIndex) {
-      // 评价
-      this.$router.push({
-        path: "/home/addEval",
-        query: { sn, index: goodsIndex },
-      });
-    },
-    complain(sn, goodsIndex) {
-      // 投诉
-      this.$router.push({ name: "Complain", query: { sn, index: goodsIndex } });
-    },
-    handleCancelOrder(sn) {
-      // 取消订单
-      this.cancelParams.orderSn = sn;
-      afterSaleReason("CANCEL").then((res) => {
-        if (res.success) {
-          this.cancelReason = res.result;
-          this.cancelAvail = true;
-          this.cancelParams.reason = this.cancelReason[0].reason;
-        }
-      });
-    },
-    sureCancel() {
-      // 确定取消
-      cancelOrder(this.cancelParams).then((res) => {
-        if (res.success) {
-          Message.success("取消订单成功");
-          this.getDetail();
-          this.cancelAvail = false;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.getDetail();
-  },
-};
+    } else {
+      traces();
+    }
+  }).catch(() => {
+    traces();
+  });
+}
+
+function traces() {
+  // 物流信息
+  getTraces(route.query.sn).then((res) => {
+    if (res.success) {
+      logistics.value = res.result;
+    }
+  });
+}
+
+function logisticsList() {
+  logisticsModal.value = true;
+  packageTraceList.value = orderPackage.value;
+  // getTracesList(this.order.order.sn).then((res) => {
+  //   if (res.success && res.result != null) {
+  //     this.packageTraceList = res.result;
+  //   }
+  // });
+}
+
+function received(sn) {
+  // 确认收货
+  sureReceived(sn).then((res) => {
+    if (res.success) {
+      Message.success("确认收货成功");
+      getDetail();
+    }
+  });
+}
+
+function goPay(sn) {
+  // 去支付
+  router.push({
+    path: "/payment",
+    query: { orderType: "ORDER", sn },
+  });
+}
+
+function applyAfterSale(sn) {
+  // 申请售后
+  router.push({ name: "ApplyAfterSale", query: { sn: sn } });
+}
+
+function comment(sn, goodsIndex) {
+  // 评价
+  router.push({
+    path: "/home/addEval",
+    query: { sn, index: goodsIndex },
+  });
+}
+
+function complain(sn, goodsIndex) {
+  // 投诉
+  router.push({ name: "Complain", query: { sn, index: goodsIndex } });
+}
+
+function handleCancelOrder(sn) {
+  // 取消订单
+  cancelParams.orderSn = sn;
+  afterSaleReason("CANCEL").then((res) => {
+    if (res.success) {
+      cancelReason.value = res.result;
+      cancelAvail.value = true;
+      cancelParams.reason = cancelReason.value[0].reason;
+    }
+  });
+}
+
+function sureCancel() {
+  // 确定取消
+  cancelOrder(cancelParams).then((res) => {
+    if (res.success) {
+      Message.success("取消订单成功");
+      getDetail();
+      cancelAvail.value = false;
+    }
+  });
+}
+
+onMounted(() => {
+  getDetail();
+});
 </script>
 <style lang="scss" scoped>
 .mb_10 {
diff --git a/buyer/src/pages/home/userCenter/Coupons.vue b/buyer/src/pages/home/userCenter/Coupons.vue
index 331d0bfef..bf06036ed 100644
--- a/buyer/src/pages/home/userCenter/Coupons.vue
+++ b/buyer/src/pages/home/userCenter/Coupons.vue
@@ -50,125 +50,128 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { memberCouponList } from "@/api/member.js";
-export default {
-  name: "Coupons",
-  data() {
-    return {
-      statusNameList: [
-        // 优惠券状态
-        "未使用",
-        "已使用",
-        "已过期",
-      ],
-      statusList: ["NEW", "USED", "EXPIRE"], // 优惠券状态
-      loading: false, // 列表加载状态
-      params: {
-        // 请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        memberCouponStatus: "NEW",
-      },
-      total: 0, // 优惠券总数
-      list: [], // 优惠券列表
-    };
-  },
-  computed: {
-    activeStatusIndex() {
-      const index = this.statusList.indexOf(this.params.memberCouponStatus);
-      return index > -1 ? index : 0;
-    },
-  },
-  methods: {
-    getList() {
-      // 获取优惠券列表
-      this.loading = true;
-      memberCouponList(this.params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.list = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-          this.list = [];
-          this.total = 0;
-        });
-    },
-    // 切换优惠券状态
-    change(index) {
-      this.params.memberCouponStatus = this.statusList[index];
-      this.params.pageNumber = 1;
-      this.getList();
-    },
-    go(item) {
-      // 根据使用条件跳转商品列表页面
-      if (this.params.memberCouponStatus !== "NEW") return;
 
-      this.$router.push({
-        path: "/goodsList",
-        query: { promotionsId: item.couponId, promotionType: "COUPON" },
-      });
-    },
+defineOptions({ name: "Coupons" });
 
-    changePageNum(val) {
-      // 分页改变页码
-      this.params.pageNumber = val;
-      this.getList();
-    },
+const router = useRouter();
 
-    changePageSize(val) {
-      // 分页改变页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList();
-    },
+const statusNameList = ref([
+  // 优惠券状态
+  "未使用",
+  "已使用",
+  "已过期",
+]);
+const statusList = ref(["NEW", "USED", "EXPIRE"]); // 优惠券状态
+const loading = ref(false); // 列表加载状态
+const params = reactive({
+  // 请求参数
+  pageNumber: 1,
+  pageSize: 20,
+  memberCouponStatus: "NEW",
+});
+const total = ref(0); // 优惠券总数
+const list = ref([]); // 优惠券列表
 
-    useScope(type, storeName) {
-      // 根据字段返回 优惠券适用范围
-      let shop = "平台";
-      let goods = "全部商品";
-      if (storeName !== "platform") shop = storeName;
-      switch (type) {
-        case "ALL":
-          goods = "全部商品";
-          break;
-        case "PORTION_GOODS":
-          goods = "部分商品";
-          break;
-        case "PORTION_GOODS_CATEGORY":
-          goods = "部分分类商品";
-          break;
+const activeStatusIndex = computed(() => {
+  const index = statusList.value.indexOf(params.memberCouponStatus);
+  return index > -1 ? index : 0;
+});
+
+// 获取优惠券列表
+function getList() {
+  loading.value = true;
+  memberCouponList(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        list.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      return `${shop}${goods}可用`;
-    },
-    formatValidity(item) {
-      const start = this.formatCouponTime(item && item.startTime);
-      const end = this.formatCouponTime(item && item.endTime);
-      if (start && end) return `${start} 至 ${end}`;
-      if (end) return `至 ${end}`;
-      if (start) return `${start} 起`;
-      return "长期有效";
-    },
-    formatCouponTime(value) {
-      if (!value) return "";
-      const text = String(value).trim();
-      if (/^\d{4}-\d{2}-\d{2}/.test(text)) {
-        return text.slice(0, 16);
-      }
-      const date = new Date(text);
-      if (Number.isNaN(date.getTime())) return text;
-      const pad = (n) => String(n).padStart(2, "0");
-      return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
-    },
-  },
-  mounted() {
-    this.getList();
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+      list.value = [];
+      total.value = 0;
+    });
+}
+
+// 切换优惠券状态
+function change(index) {
+  params.memberCouponStatus = statusList.value[index];
+  params.pageNumber = 1;
+  getList();
+}
+
+// 根据使用条件跳转商品列表页面
+function go(item) {
+  if (params.memberCouponStatus !== "NEW") return;
+
+  router.push({
+    path: "/goodsList",
+    query: { promotionsId: item.couponId, promotionType: "COUPON" },
+  });
+}
+
+// 分页改变页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getList();
+}
+
+// 分页改变页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
+}
+
+// 根据字段返回 优惠券适用范围
+function useScope(type, storeName) {
+  let shop = "平台";
+  let goods = "全部商品";
+  if (storeName !== "platform") shop = storeName;
+  switch (type) {
+    case "ALL":
+      goods = "全部商品";
+      break;
+    case "PORTION_GOODS":
+      goods = "部分商品";
+      break;
+    case "PORTION_GOODS_CATEGORY":
+      goods = "部分分类商品";
+      break;
+  }
+  return `${shop}${goods}可用`;
+}
+
+function formatValidity(item) {
+  const start = formatCouponTime(item && item.startTime);
+  const end = formatCouponTime(item && item.endTime);
+  if (start && end) return `${start} 至 ${end}`;
+  if (end) return `至 ${end}`;
+  if (start) return `${start} 起`;
+  return "长期有效";
+}
+
+function formatCouponTime(value) {
+  if (!value) return "";
+  const text = String(value).trim();
+  if (/^\d{4}-\d{2}-\d{2}/.test(text)) {
+    return text.slice(0, 16);
+  }
+  const date = new Date(text);
+  if (Number.isNaN(date.getTime())) return text;
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+onMounted(() => {
+  getList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/userCenter/MoneyManagement.vue b/buyer/src/pages/home/userCenter/MoneyManagement.vue
index 8b6203cf1..fbc3ce639 100644
--- a/buyer/src/pages/home/userCenter/MoneyManagement.vue
+++ b/buyer/src/pages/home/userCenter/MoneyManagement.vue
@@ -23,7 +23,7 @@
       </p></template>
       <div>
         <el-form
-          ref="formData"
+          ref="formDataRef"
           label-width="100px"
           :model="formData"
           :rules="formValidate"
@@ -47,7 +47,7 @@
       </p></template>
       <div>
         <el-form
-          ref="withdrawApplyFormData"
+          ref="withdrawApplyFormDataRef"
           label-width="120px"
           :model="withdrawApplyFormData"
           :rules="withdrawApplyFormValidate"
@@ -180,229 +180,230 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message } from "@/utils/message";
-import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge, withdrawalApply} from '@/api/member';
+import {getDepositLog, getMembersWallet, getRecharge, getWithdrawApply, recharge as apiRecharge, withdrawalApply as apiWithdrawalApply} from '@/api/member';
 import {withdrawalSettingVO} from "@/api/pay";
 import { Edit } from '@element-plus/icons-vue';
 
-export default {
-  name: 'MoneyManagement',
-  components: { Edit },
-  data() {
-    return {
-      activeWalletTab: "log",
-      frozenDeposit: 0, // 冻结余额
-      memberDeposit: 0, // 余额
+defineOptions({ name: 'MoneyManagement' });
 
-      modal: false, // 余额充值
-      withdrawApplyModal: false, // 提现申请
-      formData: {
-        // 充值金额
-        price: 1
-      },
-      // 提现金额
-      withdrawApplyFormData: {
-        price: 1,
-        minPrice: 1,
-        type: '',
-        realName: '',
-        connectNumber: '',
-      },
-      // 余额日志
-      walletForm: {
-        // 搜索框初始化对象
-        pageNumber: 1,
-        pageSize: 20
-      },
-      // 充值记录
-      rechargeForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20 // 页面大小
-      },
-      // 提现记录
-      withdrawApplyForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20 // 页面大小
-      },
-      // 提现申请校验
-      withdrawApplyFormValidate: {
-        price: [
-          {required: true, message: '请输入大于0小于9999的合法提现金额'},
-          {
-            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
-            message: '请输入大于0小于9999的合法提现金额',
-            trigger: 'change'
-          }
-        ],
-        realName: [
-          {required: true, message: '请输入真实姓名'},
-        ],
-        connectNumber: [
-          {required: true, message: '请输入第三方登录账号'},
-        ],
-      },
-      formValidate: {
-        price: [
-          {required: true, message: '请输入大于等于1小于9999的合法充值金额'},
-          {
-            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
-            message: '请输入大于等于1小于9999的合法充值金额',
-            trigger: 'change'
-          }
-        ]
-      },
-      logColumnsData: {},
-      rechargeListData: {},
-      withdrawApplyColumnsListData: {}
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    // 初始化数据
-    init() {
-      getMembersWallet().then((res) => {
-        this.frozenDeposit = res.result.memberFrozenWallet;
-        this.memberDeposit = res.result.memberWallet;
-      });
-      getDepositLog(this.walletForm).then((res) => {
+const router = useRouter();
+
+const formDataRef = ref(null);
+const withdrawApplyFormDataRef = ref(null);
+
+const activeWalletTab = ref("log");
+const frozenDeposit = ref(0); // 冻结余额
+const memberDeposit = ref(0); // 余额
+
+const modal = ref(false); // 余额充值
+const withdrawApplyModal = ref(false); // 提现申请
+const formData = reactive({
+  // 充值金额
+  price: 1
+});
+// 提现金额
+const withdrawApplyFormData = reactive({
+  price: 1,
+  minPrice: 1,
+  type: '',
+  realName: '',
+  connectNumber: '',
+});
+// 余额日志
+const walletForm = reactive({
+  // 搜索框初始化对象
+  pageNumber: 1,
+  pageSize: 20
+});
+// 充值记录
+const rechargeForm = reactive({
+  // 搜索框初始化对象
+  pageNumber: 1, // 当前页数
+  pageSize: 20 // 页面大小
+});
+// 提现记录
+const withdrawApplyForm = reactive({
+  // 搜索框初始化对象
+  pageNumber: 1, // 当前页数
+  pageSize: 20 // 页面大小
+});
+// 提现申请校验
+const withdrawApplyFormValidate = {
+  price: [
+    {required: true, message: '请输入大于0小于9999的合法提现金额'},
+    {
+      pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
+      message: '请输入大于0小于9999的合法提现金额',
+      trigger: 'change'
+    }
+  ],
+  realName: [
+    {required: true, message: '请输入真实姓名'},
+  ],
+  connectNumber: [
+    {required: true, message: '请输入第三方登录账号'},
+  ],
+};
+const formValidate = {
+  price: [
+    {required: true, message: '请输入大于等于1小于9999的合法充值金额'},
+    {
+      pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
+      message: '请输入大于等于1小于9999的合法充值金额',
+      trigger: 'change'
+    }
+  ]
+};
+const logColumnsData = ref({});
+const rechargeListData = ref({});
+const withdrawApplyColumnsListData = ref({});
+
+onMounted(() => {
+  init();
+});
+
+// 初始化数据
+function init() {
+  getMembersWallet().then((res) => {
+    frozenDeposit.value = res.result.memberFrozenWallet;
+    memberDeposit.value = res.result.memberWallet;
+  });
+  getDepositLog(walletForm).then((res) => {
+    if (res.message === 'success') {
+      logColumnsData.value = res.result;
+    }
+  });
+}
+function tabPaneChange(v) {
+  activeWalletTab.value = v;
+  if (v === 'recharge') {
+    getRechargeData();
+  }
+  if (v === 'log') {
+    init();
+  }
+  if (v === 'withdrawApply') {
+    getWithdrawApplyData();
+  }
+}
+// 充值记录
+function getRechargeData() {
+  getRecharge(rechargeForm).then((res) => {
+    if (res.message === 'success') {
+      rechargeListData.value = res.result;
+    }
+  });
+}
+// 提现记录
+function getWithdrawApplyData() {
+  getWithdrawApply(withdrawApplyForm).then((res) => {
+    if (res.message === 'success') {
+      withdrawApplyColumnsListData.value = res.result;
+    }
+  });
+}
+function rechargeStatusText (status) {
+  const map = { PAID: '已付款', UNPAID: '未付款', CANCEL: '已取消' }
+  return map[status] || status || '—'
+}
+function rechargeWayText (way) {
+  const map = { ALIPAY: '支付宝', WECHAT: '微信', BANK_TRANSFER: '线下转账' }
+  return map[way] || way || '—'
+}
+function withdrawStatusText (status) {
+  const map = {
+    APPLY: '申请中',
+    VIA_AUDITING: '审核通过',
+    SUCCESS: '提现成功',
+    ERROR: '提现失败'
+  }
+  return map[status] || '审核拒绝'
+}
+// 余额日志
+function changePage(v) {
+  walletForm.pageNumber = v;
+  init();
+}
+function changePageSize(v) {
+  walletForm.pageNumber = 1;
+  walletForm.pageSize = v;
+  init();
+}
+// 充值记录
+function rechargeChangePage(v) {
+  rechargeForm.pageNumber = v;
+  getRechargeData();
+}
+function rechargeChangePageSize(v) {
+  rechargeForm.pageNumber = 1;
+  rechargeForm.pageSize = v;
+  getRechargeData();
+}
+// 提现记录
+function withdrawChangePage(v) {
+  withdrawApplyForm.pageNumber = v;
+  getWithdrawApplyData();
+}
+function withdrawChangePageSize(v) {
+  withdrawApplyForm.pageNumber = 1;
+  withdrawApplyForm.pageSize = v;
+  getWithdrawApplyData();
+}
+// 弹出在线充值框
+function recharge() {
+  formData.price = 1;
+  modal.value = true;
+}
+// 在线充值
+function rechargePrice() {
+  formDataRef.value.validate((valid) => {
+    if (valid) {
+      apiRecharge(formData).then((res) => {
         if (res.message === 'success') {
-          this.logColumnsData = res.result;
-        }
-      });
-    },
-    tabPaneChange(v) {
-      this.activeWalletTab = v;
-      if (v === 'recharge') {
-        this.getRechargeData();
-      }
-      if (v === 'log') {
-        this.init();
-      }
-      if (v === 'withdrawApply') {
-        this.getWithdrawApplyData();
-      }
-    },
-    // 充值记录
-    getRechargeData() {
-      getRecharge(this.rechargeForm).then((res) => {
-        if (res.message === 'success') {
-          this.rechargeListData = res.result;
-        }
-      });
-    },
-    // 提现记录
-    getWithdrawApplyData() {
-      getWithdrawApply(this.withdrawApplyForm).then((res) => {
-        if (res.message === 'success') {
-          this.withdrawApplyColumnsListData = res.result;
-        }
-      });
-    },
-    rechargeStatusText (status) {
-      const map = { PAID: '已付款', UNPAID: '未付款', CANCEL: '已取消' }
-      return map[status] || status || '—'
-    },
-    rechargeWayText (way) {
-      const map = { ALIPAY: '支付宝', WECHAT: '微信', BANK_TRANSFER: '线下转账' }
-      return map[way] || way || '—'
-    },
-    withdrawStatusText (status) {
-      const map = {
-        APPLY: '申请中',
-        VIA_AUDITING: '审核通过',
-        SUCCESS: '提现成功',
-        ERROR: '提现失败'
-      }
-      return map[status] || '审核拒绝'
-    },
-    // 余额日志
-    changePage(v) {
-      this.walletForm.pageNumber = v;
-      this.init();
-    },
-    changePageSize(v) {
-      this.walletForm.pageNumber = 1;
-      this.walletForm.pageSize = v;
-      this.init();
-    },
-    // 充值记录
-    rechargeChangePage(v) {
-      this.rechargeForm.pageNumber = v;
-      this.getRechargeData();
-    },
-    rechargeChangePageSize(v) {
-      this.rechargeForm.pageNumber = 1;
-      this.rechargeForm.pageSize = v;
-      this.getRechargeData();
-    },
-    // 提现记录
-    withdrawChangePage(v) {
-      this.withdrawApplyForm.pageNumber = v;
-      this.getWithdrawApplyData();
-    },
-    withdrawChangePageSize(v) {
-      this.withdrawApplyForm.pageNumber = 1;
-      this.withdrawApplyForm.pageSize = v;
-      this.getWithdrawApplyData();
-    },
-    // 弹出在线充值框
-    recharge() {
-      this.formData.price = 1;
-      this.modal = true;
-    },
-    // 在线充值
-    rechargePrice() {
-      this.$refs['formData'].validate((valid) => {
-        if (valid) {
-          recharge(this.formData).then((res) => {
-            if (res.message === 'success') {
-              this.$router.push({
-                path: '/payment',
-                query: {orderType: 'RECHARGE', sn: res.result.rechargeSn}
-              });
-            }
-          });
-        }
-      });
-    },
-    // 申请提现弹出框
-    withdrawalApply() {
-      this.withdrawApplyModal = true;
-      this.withdrawApplyFormData.minPrice = 1;
-      this.withdrawApplyFormData.price = 1;
-      this.withdrawApplyFormData.type = '';
-      this.withdrawApplyFormData.realName = '';
-      this.withdrawApplyFormData.connectNumber = '';
-      withdrawalSettingVO().then((res) => {
-        if (res.code === 200) {
-          this.withdrawApplyFormData.minPrice = res.result.minPrice;
-          this.withdrawApplyFormData.type = res.result.type;
-          this.withdrawApplyFormData.price = 1;
-        }
-      });
-    },
-    // 提现
-    withdrawal() {
-      this.$refs['withdrawApplyFormData'].validate((valid) => {
-        if (valid) {
-          withdrawalApply(this.withdrawApplyFormData).then((res) => {
-            if (res && res.success) {
-              Message.success('提现申请成功，关注提现状态');
-              this.withdrawApplyModal = false;
-              this.init(); // 余额查询
-              this.getWithdrawApplyData(); // 提现记录
-            }
+          router.push({
+            path: '/payment',
+            query: {orderType: 'RECHARGE', sn: res.result.rechargeSn}
           });
         }
       });
     }
-  }
-};
+  });
+}
+// 申请提现弹出框
+function withdrawalApply() {
+  withdrawApplyModal.value = true;
+  withdrawApplyFormData.minPrice = 1;
+  withdrawApplyFormData.price = 1;
+  withdrawApplyFormData.type = '';
+  withdrawApplyFormData.realName = '';
+  withdrawApplyFormData.connectNumber = '';
+  withdrawalSettingVO().then((res) => {
+    if (res.code === 200) {
+      withdrawApplyFormData.minPrice = res.result.minPrice;
+      withdrawApplyFormData.type = res.result.type;
+      withdrawApplyFormData.price = 1;
+    }
+  });
+}
+// 提现
+function withdrawal() {
+  withdrawApplyFormDataRef.value.validate((valid) => {
+    if (valid) {
+      apiWithdrawalApply(withdrawApplyFormData).then((res) => {
+        if (res && res.success) {
+          Message.success('提现申请成功，关注提现状态');
+          withdrawApplyModal.value = false;
+          init(); // 余额查询
+          getWithdrawApplyData(); // 提现记录
+        }
+      });
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/buyer/src/pages/home/userCenter/MyGiftCards.vue b/buyer/src/pages/home/userCenter/MyGiftCards.vue
index 989dc08bc..8556acd10 100644
--- a/buyer/src/pages/home/userCenter/MyGiftCards.vue
+++ b/buyer/src/pages/home/userCenter/MyGiftCards.vue
@@ -4,7 +4,7 @@
 
     <div class="bind-section mb_20">
       <div class="section-title">兑换礼品卡</div>
-      <el-form ref="bindForm" :model="bindForm" :rules="bindRules" inline class="bind-form">
+      <el-form ref="bindFormRef" :model="bindForm" :rules="bindRules" inline class="bind-form">
         <el-form-item label="卡号" prop="cardNo" label-width="60px">
           <el-input v-model="bindForm.cardNo" placeholder="请输入卡号" maxlength="64" style="width: 220px" />
         </el-form-item>
@@ -92,7 +92,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import {
   getGiftCardCashMemberCardPage,
@@ -100,194 +102,201 @@ import {
   activateGiftCardCashMemberCard,
 } from "@/api/promotion.js";
 
-export default {
-  name: "MyGiftCards",
-  data() {
-    return {
-      statusTab: "AVAILABLE",
-      loading: false,
-      total: 0,
-      list: [],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        memberCardStatus: "AVAILABLE",
-      },
-      bindSubmitting: false,
-      bindForm: {
-        cardNo: "",
-        cardSecret: "",
-      },
-      bindRules: {
-        cardNo: [{ required: true, message: "请输入卡号", trigger: "blur" }],
-        cardSecret: [{ required: true, message: "请输入兑换码", trigger: "blur" }],
-      },
-      noticeModal: false,
-      serviceHotline: "12221111",
-      activatingId: "",
-    };
-  },
-  computed: {
-    primaryActionLabel() {
-      if (this.statusTab === "PENDING_ACTIVATION") {
-        return "激活自用";
-      }
-      if (this.statusTab === "AVAILABLE") {
-        return "去使用";
-      }
-      return "不可用";
-    },
-    primaryActionDisabled() {
-      return this.statusTab === "UNAVAILABLE";
-    },
-    pendingActivateLocked() {
-      return this.statusTab === "PENDING_ACTIVATION" && !!this.activatingId;
-    },
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    formatYuan(val) {
-      if (val == null || val === "") {
-        return "—";
-      }
-      const n = Number(val);
-      if (Number.isNaN(n)) {
-        return String(val);
-      }
-      return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
-    },
-    formatValidity(row) {
-      const t = row && row.expireTime;
-      if (!t) {
-        return "长期有效";
-      }
-      const d = new Date(t);
-      if (Number.isNaN(d.getTime())) {
-        return "长期有效";
-      }
-      if (d.getFullYear() >= 2099) {
-        return "长期有效";
-      }
-      const y = d.getFullYear();
-      const m = String(d.getMonth() + 1).padStart(2, "0");
-      const day = String(d.getDate()).padStart(2, "0");
-      return `${y}-${m}-${day} 到期`;
-    },
-    onStatusTab(name) {
-      this.statusTab = name;
-      this.params.memberCardStatus = name;
-      this.params.pageNumber = 1;
-      this.getList();
-    },
-    getList() {
-      this.loading = true;
-      const p = { ...this.params };
-      if (p.memberCardStatus) {
-        p.memberCardStatus = String(p.memberCardStatus);
-      }
-      getGiftCardCashMemberCardPage(p)
-        .then((res) => {
-          this.loading = false;
-          if (res.success && res.result) {
-            this.list = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    changePage(val) {
-      this.params.pageNumber = val;
-      this.getList();
-    },
-    changePageSize(val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList();
-    },
-    resetBindForm() {
-      this.bindForm = { cardNo: "", cardSecret: "" };
-      this.$nextTick(() => {
-        if (this.$refs.bindForm) {
-          this.$refs.bindForm.resetFields();
-        }
-      });
-    },
-    submitBind() {
-      this.$refs.bindForm.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-        this.bindSubmitting = true;
-        bindGiftCardCashMemberCard({
-          cardNo: String(this.bindForm.cardNo).trim(),
-          cardSecret: String(this.bindForm.cardSecret).trim(),
-        })
-          .then((res) => {
-            this.bindSubmitting = false;
-            if (res.success) {
-              Message.success(res.message || "兑换成功");
-              this.resetBindForm();
-              this.params.pageNumber = 1;
-              this.getList();
-            }
-          })
-          .catch(() => {
-            this.bindSubmitting = false;
-          });
-      });
-    },
-    onCardPrimaryAction(item) {
-      if (this.primaryActionDisabled) {
-        return;
-      }
-      if (this.statusTab === "PENDING_ACTIVATION") {
-        const memberCardId = this.resolveMemberCardId(item);
-        if (!memberCardId) {
-          Message.error("卡片信息异常，无法激活");
-          return;
-        }
-        this.activatingId = memberCardId;
-        activateGiftCardCashMemberCard(memberCardId)
-          .then((res) => {
-            if (res.success) {
-              Message.success(res.message || "激活成功");
-              this.getList();
-            }
-          })
-          .catch((err) => {
-            console.warn('激活礼品卡失败', err);
-          })
-          .finally(() => {
-            this.activatingId = "";
-          });
-        return;
-      }
-      if (this.statusTab === "AVAILABLE") {
-        this.$router.push({ path: "/goodsList" });
-      }
-    },
-    resolveMemberCardId(row) {
-      if (!row) {
-        return "";
-      }
-      return row.memberCardId != null && row.memberCardId !== ""
-        ? String(row.memberCardId)
-        : row.id != null && row.id !== ""
-          ? String(row.id)
-          : "";
-    },
-    isActivating(item) {
-      const id = this.resolveMemberCardId(item);
-      return !!this.activatingId && this.activatingId === id;
-    },
-  },
+defineOptions({ name: "MyGiftCards" });
+
+const router = useRouter();
+
+const statusTab = ref("AVAILABLE");
+const loading = ref(false);
+const total = ref(0);
+const list = ref([]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  memberCardStatus: "AVAILABLE",
+});
+const bindSubmitting = ref(false);
+const bindForm = ref({
+  cardNo: "",
+  cardSecret: "",
+});
+const bindRules = {
+  cardNo: [{ required: true, message: "请输入卡号", trigger: "blur" }],
+  cardSecret: [{ required: true, message: "请输入兑换码", trigger: "blur" }],
 };
+const noticeModal = ref(false);
+const serviceHotline = ref("12221111");
+const activatingId = ref("");
+const bindFormRef = ref(null);
+
+const primaryActionLabel = computed(() => {
+  if (statusTab.value === "PENDING_ACTIVATION") {
+    return "激活自用";
+  }
+  if (statusTab.value === "AVAILABLE") {
+    return "去使用";
+  }
+  return "不可用";
+});
+const primaryActionDisabled = computed(() => {
+  return statusTab.value === "UNAVAILABLE";
+});
+const pendingActivateLocked = computed(() => {
+  return statusTab.value === "PENDING_ACTIVATION" && !!activatingId.value;
+});
+
+onMounted(() => {
+  getList();
+});
+
+function formatYuan(val) {
+  if (val == null || val === "") {
+    return "—";
+  }
+  const n = Number(val);
+  if (Number.isNaN(n)) {
+    return String(val);
+  }
+  return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
+}
+
+function formatValidity(row) {
+  const t = row && row.expireTime;
+  if (!t) {
+    return "长期有效";
+  }
+  const d = new Date(t);
+  if (Number.isNaN(d.getTime())) {
+    return "长期有效";
+  }
+  if (d.getFullYear() >= 2099) {
+    return "长期有效";
+  }
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day} 到期`;
+}
+
+function onStatusTab(name) {
+  statusTab.value = name;
+  params.memberCardStatus = name;
+  params.pageNumber = 1;
+  getList();
+}
+
+function getList() {
+  loading.value = true;
+  const p = { ...params };
+  if (p.memberCardStatus) {
+    p.memberCardStatus = String(p.memberCardStatus);
+  }
+  getGiftCardCashMemberCardPage(p)
+    .then((res) => {
+      loading.value = false;
+      if (res.success && res.result) {
+        list.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function changePage(val) {
+  params.pageNumber = val;
+  getList();
+}
+
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
+}
+
+function resetBindForm() {
+  bindForm.value = { cardNo: "", cardSecret: "" };
+  nextTick(() => {
+    if (bindFormRef.value) {
+      bindFormRef.value.resetFields();
+    }
+  });
+}
+
+function submitBind() {
+  bindFormRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    bindSubmitting.value = true;
+    bindGiftCardCashMemberCard({
+      cardNo: String(bindForm.value.cardNo).trim(),
+      cardSecret: String(bindForm.value.cardSecret).trim(),
+    })
+      .then((res) => {
+        bindSubmitting.value = false;
+        if (res.success) {
+          Message.success(res.message || "兑换成功");
+          resetBindForm();
+          params.pageNumber = 1;
+          getList();
+        }
+      })
+      .catch(() => {
+        bindSubmitting.value = false;
+      });
+  });
+}
+
+function onCardPrimaryAction(item) {
+  if (primaryActionDisabled.value) {
+    return;
+  }
+  if (statusTab.value === "PENDING_ACTIVATION") {
+    const memberCardId = resolveMemberCardId(item);
+    if (!memberCardId) {
+      Message.error("卡片信息异常，无法激活");
+      return;
+    }
+    activatingId.value = memberCardId;
+    activateGiftCardCashMemberCard(memberCardId)
+      .then((res) => {
+        if (res.success) {
+          Message.success(res.message || "激活成功");
+          getList();
+        }
+      })
+      .catch((err) => {
+        console.warn('激活礼品卡失败', err);
+      })
+      .finally(() => {
+        activatingId.value = "";
+      });
+    return;
+  }
+  if (statusTab.value === "AVAILABLE") {
+    router.push({ path: "/goodsList" });
+  }
+}
+
+function resolveMemberCardId(row) {
+  if (!row) {
+    return "";
+  }
+  return row.memberCardId != null && row.memberCardId !== ""
+    ? String(row.memberCardId)
+    : row.id != null && row.id !== ""
+      ? String(row.id)
+      : "";
+}
+
+function isActivating(item) {
+  const id = resolveMemberCardId(item);
+  return !!activatingId.value && activatingId.value === id;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/home/userCenter/MyTracks.vue b/buyer/src/pages/home/userCenter/MyTracks.vue
index fe08bebcc..8d303f7dd 100644
--- a/buyer/src/pages/home/userCenter/MyTracks.vue
+++ b/buyer/src/pages/home/userCenter/MyTracks.vue
@@ -38,98 +38,103 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Message, Modal } from "@/utils/message";
 import { Delete } from '@element-plus/icons-vue';
 import { tracksList, clearTracks, clearTracksById } from "@/api/member";
-export default {
-  components: { Delete },
-  name: "MyTrack",
-  data() {
-    return {
-      list: [], // 我的足迹，商品列表
-      spinShow: false, // 控制loading是否加载
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        order: "desc",
-        sort: "updateTime",
-      },
-      total: 0,
-    };
-  },
-  mounted() {
-    this.getList();
-  },
-  methods: {
-    goodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 跳转店铺首页
-    shopPage(id) {
-      this.$router.push({
-        path: "/merchant",
-        query: { id: id },
-      });
-    },
-    clearAll() {
-      // 清除全部足迹
-      Modal.confirm({
-        title: "删除",
-        content: "<p>确定要删除全部足迹吗？</p>",
-        onOk: () => {
-          clearTracks().then((res) => {
-            if (res.success) {
-              Message.success("删除成功");
-              this.getList();
-            }
-          });
-        },
-        onCancel: () => {},
-      });
-    },
-    clearById(id) {
-      // 清除全部足迹
-      clearTracksById(id).then((res) => {
+
+defineOptions({ name: "MyTrack" });
+
+const router = useRouter();
+
+const list = ref([]); // 我的足迹，商品列表
+const spinShow = ref(false); // 控制loading是否加载
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  order: "desc",
+  sort: "updateTime",
+});
+const total = ref(0);
+
+function goodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+
+// 跳转店铺首页
+function shopPage(id) {
+  router.push({
+    path: "/merchant",
+    query: { id: id },
+  });
+}
+
+function clearAll() {
+  // 清除全部足迹
+  Modal.confirm({
+    title: "删除",
+    content: "<p>确定要删除全部足迹吗？</p>",
+    onOk: () => {
+      clearTracks().then((res) => {
         if (res.success) {
           Message.success("删除成功");
-          this.getList();
+          getList();
         }
       });
     },
-    changePageNum(val) {
-      // 修改页码
-      this.params.pageNumber = val;
-      this.getList();
-    },
-    changePageSize(val) {
-      // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList();
-    },
-    getList() {
-      // 获取足迹列表
-      this.spinShow = true;
-      tracksList(this.params).then((res) => {
-        this.spinShow = false;
-        if (res.success && res.result.records.length) {
-          this.list = res.result.records.filter(item =>{
-            return item != null
-          });
-          this.total = res.result.total
-        } else {
-          this.list = [];
-        }
+    onCancel: () => {},
+  });
+}
+
+function clearById(id) {
+  // 清除全部足迹
+  clearTracksById(id).then((res) => {
+    if (res.success) {
+      Message.success("删除成功");
+      getList();
+    }
+  });
+}
+
+function changePageNum(val) {
+  // 修改页码
+  params.pageNumber = val;
+  getList();
+}
+
+function changePageSize(val) {
+  // 修改页数
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
+}
+
+function getList() {
+  // 获取足迹列表
+  spinShow.value = true;
+  tracksList(params).then((res) => {
+    spinShow.value = false;
+    if (res.success && res.result.records.length) {
+      list.value = res.result.records.filter(item =>{
+        return item != null
       });
-    },
-  },
-};
+      total.value = res.result.total
+    } else {
+      list.value = [];
+    }
+  });
+}
+
+onMounted(() => {
+  getList();
+});
 </script>
 <style scoped lang="scss">
 .wrapper {
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index 34ef1a831..7b421aedb 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -4,7 +4,7 @@
     <!-- LOGO 步骤条 -->
     <div class="width_1200 logo">
       <div>
-        <router-link to="/"><img :src="$store.state.logoImg" /></router-link>
+        <router-link to="/"><img :src="logoImg" /></router-link>
         <div>结算页</div>
       </div>
       <div class="cart-steps">
@@ -317,7 +317,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message, Modal, Spin } from "@/utils/message";
 import { ArrowDown, ArrowUp, Check, Help } from '@element-plus/icons-vue';
 import invoiceModal from "@/components/invoiceModal";
@@ -337,638 +339,647 @@ import {
 import { getStoreAddress } from "@/api/shopentry.js"
 import { canUseCouponList } from "@/api/member.js";
 import { isECoupon, shouldSkipPaymentPage } from "@/constants/goodsType";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "Pay",
-  components: { invoiceModal, addressManage },
-  computed: {
-    hasInvoiceInfo() {
-      const title =
-        this.invoiceData.personalName ||
-        this.invoiceData.companyName ||
-        this.invoiceData.receiptTitle;
-      const content = this.invoiceData.receiptContent;
-      if (content && String(content).trim() === "不开发票") return false;
-      return Boolean(
-        (title && String(title).trim()) ||
-        (content && String(content).trim())
-      );
-    },
-    invoiceDisplayTitle() {
-      return (
-        this.invoiceData.personalName ||
-        this.invoiceData.companyName ||
-        this.invoiceData.receiptTitle ||
-        ""
-      );
-    },
-    giftCardDeductAmount() {
-      if (this.tradeGiftCardDeductTotal != null && Number(this.tradeGiftCardDeductTotal) > 0) {
-        return Number(this.tradeGiftCardDeductTotal);
-      }
-      const items = this.giftCardDeductItems || [];
-      let sum = 0;
-      items.forEach((it) => {
-        sum += Number(it.deductAmount || 0);
-      });
-      if (sum > 0) {
-        return sum;
-      }
-      const p = this.priceDetailDTO || {};
-      const n = Number(
-        p.giftCardPrice != null
-          ? p.giftCardPrice
-          : p.giftCardDiscountPrice != null
-            ? p.giftCardDiscountPrice
-            : p.memberCardPrice != null
-              ? p.memberCardPrice
-              : 0
-      );
-      return Number.isFinite(n) ? n : 0;
-    },
-    /** 电子卡券结算：免地址、隐藏发票；优惠券/礼品卡/促销明细可用（M-02） */
-    isECouponCheckout() {
-      return isECoupon(this.goodsType);
-    },
-    /** 虚拟型结算（核销虚拟 + 电子卡券）：均不需要收货地址 */
-    isVirtualLikeCheckout() {
-      return this.goodsType === "VIRTUAL_GOODS" || this.isECouponCheckout;
-    },
+defineOptions({ name: "Pay" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+const instance = getCurrentInstance();
+
+const logoImg = computed(() => appStore.logoImg);
+
+const invModal = ref(null);
+const address = ref(null);
+
+const selectedStoreAddress = ref('m');
+const selectMethod = ref('');
+const stepIndex = ref(1); // 顶部步骤条状态
+const invoiceAvailable = ref(false); // 发票编辑按钮
+const showEditBtn = ref(""); // 鼠标移入显示编辑按钮
+const orderMark = ref(""); // 订单备注
+const remarkEditing = ref({}); // 正在填写备注的店铺
+const goodsType = ref(""); // 商品类型
+const storeMoreAddr = ref(false);
+const invoiceData = ref({
+  // 发票数据
+  //receiptContent: "不开发票",
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 100
+});
+const shippingMethod = ref([]);
+const storeAddressList = ref([]);
+const shippingWay = [
+  {
+    value: "LOGISTICS",
+    label: "物流",
   },
-  data() {
-    return {
-      selectedStoreAddress: 'm',
-      selectMethod: '',
-      stepIndex: 1, // 顶部步骤条状态
-      invoiceAvailable: false, // 发票编辑按钮
-      showEditBtn: "", // 鼠标移入显示编辑按钮
-      orderMark: "", // 订单备注
-      remarkEditing: {}, // 正在填写备注的店铺
-      goodsType: "", // 商品类型
-      storeMoreAddr: false,
-      invoiceData: {
-        // 发票数据
-        //receiptContent: "不开发票",
-      },
-      searchForm: {
+  {
+    value: "SELF_PICK_UP",
+    label: "自提",
+  },
+];
+const selectedDeliverMethod = ref('LOGISTICS');
+const addressList = ref([]); // 地址列表
+const selectedAddress = ref({}); // 所选地址
+const goodsList = ref([]); // 商品列表
+const skuList = ref([]); // 商品sku列表
+const priceDetailDTO = ref({}); // 商品价格
+const totalNum = ref(0); // 购买数量
+const addrId = ref(""); // 编辑地址传入的id
+const moreAddr = ref(false); // 更多地址
+const canUseCouponNum = ref(0); // 可用优惠券数量
+const couponList = ref([]); // 可用优惠券列表
+const usedCouponId = ref([]); // 已使用优惠券id
+const selectedCoupon = ref({}); // 已选优惠券对象
+const storeId = ref(''); //店铺Id
+const giftCardList = ref([]); // TradeDTO.canUseGiftCards
+const giftCardNoticeModal = ref(false);
+const giftCardDeductItems = ref([]); // 已选礼品卡抵扣明细（TradeDTO.giftCardDeductItems）
+const tradeGiftCardDeductTotal = ref(null); // TradeDTO.giftCardDeductTotal
+const selectedGiftCardCredentialIds = ref([]); // 已选凭证 id，与 deductItems 同步
+// 各店铺备注输入框组件实例，key 为 remarkKey(shop)
+const remarkInputRefs = {};
+
+const hasInvoiceInfo = computed(() => {
+  const title =
+    invoiceData.value.personalName ||
+    invoiceData.value.companyName ||
+    invoiceData.value.receiptTitle;
+  const content = invoiceData.value.receiptContent;
+  if (content && String(content).trim() === "不开发票") return false;
+  return Boolean(
+    (title && String(title).trim()) ||
+    (content && String(content).trim())
+  );
+});
+const invoiceDisplayTitle = computed(() => {
+  return (
+    invoiceData.value.personalName ||
+    invoiceData.value.companyName ||
+    invoiceData.value.receiptTitle ||
+    ""
+  );
+});
+const giftCardDeductAmount = computed(() => {
+  if (tradeGiftCardDeductTotal.value != null && Number(tradeGiftCardDeductTotal.value) > 0) {
+    return Number(tradeGiftCardDeductTotal.value);
+  }
+  const items = giftCardDeductItems.value || [];
+  let sum = 0;
+  items.forEach((it) => {
+    sum += Number(it.deductAmount || 0);
+  });
+  if (sum > 0) {
+    return sum;
+  }
+  const p = priceDetailDTO.value || {};
+  const n = Number(
+    p.giftCardPrice != null
+      ? p.giftCardPrice
+      : p.giftCardDiscountPrice != null
+        ? p.giftCardDiscountPrice
+        : p.memberCardPrice != null
+          ? p.memberCardPrice
+          : 0
+  );
+  return Number.isFinite(n) ? n : 0;
+});
+/** 电子卡券结算：免地址、隐藏发票；优惠券/礼品卡/促销明细可用（M-02） */
+const isECouponCheckout = computed(() => {
+  return isECoupon(goodsType.value);
+});
+/** 虚拟型结算（核销虚拟 + 电子卡券）：均不需要收货地址 */
+const isVirtualLikeCheckout = computed(() => {
+  return goodsType.value === "VIRTUAL_GOODS" || isECouponCheckout.value;
+});
+
+onMounted(() => {
+  init();
+});
+
+// 初始化数据
+function init() {
+  getGoodsDetail();
+  getDistribution();
+}
+function goAddressManage() {
+  // 跳转地址管理页面
+  router.push("/home/MyAddress");
+}
+function getAddress() {
+  // 获取收货地址列表
+  memberAddress(searchForm).then((res) => {
+    if (res.success) {
+      addressList.value = res.result?.records || [];
+      addressList.value.forEach((e, index) => {
+        if (e.id === selectedAddress.value.id && index > 2) {
+          moreAddr.value = true;
+        }
+      });
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示，地址列表保持为空，可正常新增地址
+    console.warn("获取收货地址列表失败", err);
+  });
+}
+// 获取配送方式列表
+async function getDistribution() {
+  try {
+    let shopRes = await shippingMethodList({ way: route.query.way });
+    let shopList;
+    if (shopRes.success) {
+      shopList = shopRes.result || [];
+      let way = [];
+      shippingWay.forEach((item) => {
+        shopList.forEach((child) => {
+          if (item.value == child) {
+            way.push(item);
+          }
+        });
+      });
+      shippingMethod.value = way;
+    }
+  } catch (err) {
+    // 网络/登录异常已由 request 层统一提示，配送方式保持为空不影响页面其余模块
+    console.warn("获取配送方式列表失败", err);
+  }
+}
+
+async function getStoreAddressList() {
+  getStoreAddress(storeId.value, searchForm).then(res => {
+    if (res.success) {
+      storeAddressList.value = res.result?.records || []
+      storeAddressList.value.forEach((e, index) => {
+        if (e.id === selectedAddress.value.id && index > 2) {
+          storeMoreAddr.value = true;
+        }
+      });
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示，自提点列表保持为空
+    console.warn("获取自提点列表失败", err);
+  })
+}
+function getGoodsDetail() {
+  // 订单商品详情
+  Spin.show();
+  cartGoodsPay({ way: route.query.way })
+    .then((res) => {
+      Spin.hide();
+      if (res.success) {
+        const result = res.result || {};
+        if (
+          !result.checkedSkuList ||
+          result.checkedSkuList.length === 0
+        ) {
+          const firstSku = result.skuList?.[0];
+          if (firstSku) {
+            Modal.warning({
+              title: "购物车存在无效商品！",
+              content:
+                "[" +
+                (firstSku.goodsSku?.goodsName || "") +
+                "]" +
+                (firstSku.errorMessage || ""),
+            });
+          }
+          router.push({
+            path: "/cart",
+            replace: true,
+          });
+          return;
+        }
+        goodsList.value = result.cartList || [];
+        priceDetailDTO.value = result.priceDetailDTO || {};
+        skuList.value = result.skuList || [];
+        if (skuList.value[0]?.goodsSku) {
+          goodsType.value = skuList.value[0].goodsSku.goodsType;
+        }
+        storeId.value = goodsList.value[0]?.storeId || ''
+        if (result.receiptVO) {
+          invoiceData.value = result.receiptVO;
+        }
+        let notSupArea = result.notSupportFreight;
+        selectedCoupon.value = {};
+        const platformCouponId = result.platformCoupon?.memberCoupon?.id;
+        if (platformCouponId)
+          selectedCoupon.value[platformCouponId] = result.platformCoupon;
+        if (
+          result.storeCoupons &&
+          Object.keys(result.storeCoupons)[0]
+        ) {
+          let storeMemberCouponsId = Object.keys(
+            result.storeCoupons
+          )[0];
+          let storeCouponId =
+            result.storeCoupons[storeMemberCouponsId]?.memberCoupon?.id;
+          if (storeCouponId)
+            selectedCoupon.value[storeCouponId] =
+              result.storeCoupons[storeMemberCouponsId];
+        }
+        if (notSupArea) {
+          let content = [];
+          let title = "";
+          notSupArea.forEach((e) => {
+            title = e.errorMessage;
+            content.push(e.goodsSku?.goodsName || "");
+          });
+          Modal.warning({
+            title: "以下商品超出配送区域" || title,
+            content: content.toString(),
+          });
+        }
+        if (result.memberAddress) {
+          selectedAddress.value = result.memberAddress;
+        }
+        getAddress();
+        getStoreAddressList();
+        totalNum.value = 0;
+        for (let i = 0; i < skuList.value.length; i++) {
+          totalNum.value += skuList.value[i].num || 0;
+        }
+        usedCouponId.value = [];
+        couponList.value = result.canUseCoupons || [];
+        const couponKeys = Object.keys(selectedCoupon.value);
+        if (couponKeys.length) {
+          couponList.value.forEach((e) => {
+            if (
+              selectedCoupon.value[e.id] &&
+              e.id === selectedCoupon.value[e.id]?.memberCoupon?.id
+            ) {
+              usedCouponId.value.push(e.id);
+            }
+          });
+          nextTick(() => {
+            instance.proxy.$forceUpdate();
+          });
+        }
+        giftCardDeductItems.value = Array.isArray(result.giftCardDeductItems)
+          ? result.giftCardDeductItems
+          : [];
+        tradeGiftCardDeductTotal.value =
+          result.giftCardDeductTotal != null && result.giftCardDeductTotal !== ""
+            ? Number(result.giftCardDeductTotal)
+            : null;
+        giftCardList.value = Array.isArray(result.canUseGiftCards) ? result.canUseGiftCards : [];
+        syncGiftCardSelectionFromCart(result);
+      }
+    })
+    .catch((err) => {
+      Spin.hide();
+      // 网络/登录异常已由 request 层统一提示；这里兜底 404 与返回数据结构异常
+      if (!err?.data || err?.data?.message) {
+        Message.error(err?.data?.message || "结算数据加载失败，请稍后重试");
+      }
+      console.warn("获取结算数据失败", err);
+    });
+}
+function syncGiftCardSelectionFromCart(result) {
+  if (!result) {
+    selectedGiftCardCredentialIds.value = [];
+    return;
+  }
+  const selectedIds = result.selectedGiftCardIds;
+  if (Array.isArray(selectedIds) && selectedIds.length) {
+    selectedGiftCardCredentialIds.value = selectedIds
+      .map((id) => (id != null && id !== "" ? String(id) : ""))
+      .filter(Boolean);
+    return;
+  }
+  const items = Array.isArray(result.giftCardDeductItems) ? result.giftCardDeductItems : [];
+  if (items.length) {
+    selectedGiftCardCredentialIds.value = items
+      .map((it) => (it.credentialId != null && it.credentialId !== "" ? String(it.credentialId) : ""))
+      .filter(Boolean);
+    return;
+  }
+  const pd = result.priceDetailDTO || {};
+  const id =
+    result.selectedGiftCardCredentialId ||
+    result.usedGiftCardCredentialId ||
+    pd.selectedGiftCardCredentialId ||
+    pd.usedGiftCardCredentialId ||
+    (result.selectedGiftCard && (result.selectedGiftCard.id || result.selectedGiftCard.credentialId)) ||
+    (result.giftCardCashSelected && result.giftCardCashSelected.id) ||
+    null;
+  selectedGiftCardCredentialIds.value =
+    id != null && id !== "" ? [String(id)] : [];
+}
+function formatGiftFaceValue(val) {
+  if (val == null || val === "") {
+    return "—";
+  }
+  const n = Number(val);
+  if (Number.isNaN(n)) {
+    return String(val);
+  }
+  return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
+}
+function formatGiftExpire(row) {
+  const t = row && row.expireTime;
+  if (!t) {
+    return "长期有效";
+  }
+  const d = new Date(t);
+  if (Number.isNaN(d.getTime())) {
+    return "长期有效";
+  }
+  if (d.getFullYear() >= 2099) {
+    return "长期有效";
+  }
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day} 到期`;
+}
+function toggleGiftCard(item) {
+  if (!item || item.id == null || item.id === "") {
+    return;
+  }
+  if (isGiftCardSelected(item)) {
+    useGiftCard(item.id, false);
+  } else {
+    useGiftCard(item.id, true);
+  }
+}
+function isGiftCardSelected(item) {
+  if (!item || !selectedGiftCardCredentialIds.value.length) {
+    return false;
+  }
+  const id = item.id != null ? String(item.id) : "";
+  return id && selectedGiftCardCredentialIds.value.includes(id);
+}
+function useGiftCard(credentialId, used) {
+  const params = {
+    way: route.query.way,
+    used,
+  };
+  if (credentialId != null && credentialId !== "") {
+    params.credentialId = String(credentialId);
+  }
+  selectGiftCard(params).then((res) => {
+    if (res.success) {
+      init();
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("选择礼品卡失败", err);
+  });
+}
+function getCouponNum() {
+  // 获取可用优惠券数量
+  couponNum({ way: route.query.way }).then((res) => {
+    canUseCouponNum.value = res.result;
+    if (res.result) {
+      let storeArr = [];
+      let skuArr = [];
+      goodsList.value.forEach((e) => {
+        storeArr.push(e.storeId);
+        e.skuList?.forEach((i) => {
+          skuArr.push(i.goodsSku?.id);
+        });
+      });
+      let params = {
         pageNumber: 1,
-        pageSize: 100
-      },
-      shippingMethod: [],
-      storeAddressList: [],
-      shippingWay: [
-        {
-          value: "LOGISTICS",
-          label: "物流",
-        },
-        {
-          value: "SELF_PICK_UP",
-          label: "自提",
-        },
-      ],
-      selectedDeliverMethod: 'LOGISTICS',
-      addressList: [], // 地址列表
-      selectedAddress: {}, // 所选地址
-      goodsList: [], // 商品列表
-      priceDetailDTO: {}, // 商品价格
-      totalNum: 0, // 购买数量
-      addrId: "", // 编辑地址传入的id
-      moreAddr: false, // 更多地址
-      canUseCouponNum: 0, // 可用优惠券数量
-      couponList: [], // 可用优惠券列表
-      usedCouponId: [], // 已使用优惠券id
-      selectedCoupon: {}, // 已选优惠券对象
-      storeId: '', //店铺Id
-      giftCardList: [], // TradeDTO.canUseGiftCards
-      giftCardNoticeModal: false,
-      giftCardDeductItems: [], // 已选礼品卡抵扣明细（TradeDTO.giftCardDeductItems）
-      tradeGiftCardDeductTotal: null, // TradeDTO.giftCardDeductTotal
-      selectedGiftCardCredentialIds: [], // 已选凭证 id，与 deductItems 同步
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    // 初始化数据
-    init() {
-      this.getGoodsDetail();
-      this.getDistribution();
-    },
-    goAddressManage() {
-      // 跳转地址管理页面
-      this.$router.push("/home/MyAddress");
-    },
-    getAddress() {
-      // 获取收货地址列表
-      memberAddress(this.searchForm).then((res) => {
-        if (res.success) {
-          this.addressList = res.result?.records || [];
-          this.addressList.forEach((e, index) => {
-            if (e.id === this.selectedAddress.id && index > 2) {
-              this.moreAddr = true;
+        pageSize: 100,
+        memberCouponStatus: "NEW",
+        scopeId: skuArr.toString(),
+        storeId: storeArr.toString(),
+        totalPrice: priceDetailDTO.value.goodsPrice,
+      };
+      canUseCouponList(params).then((res) => {
+        // 可用优惠券列表
+        if (res.success) couponList.value = res.result?.records || [];
+        const couponKeys = Object.keys(selectedCoupon.value);
+        usedCouponId.value = [];
+        if (couponKeys.length) {
+          couponList.value.forEach((e) => {
+            if (e.id === selectedCoupon.value[couponKeys]?.memberCoupon?.id) {
+              usedCouponId.value.push(e.id);
             }
           });
+          nextTick(() => {
+            instance.proxy.$forceUpdate();
+          });
         }
       }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示，地址列表保持为空，可正常新增地址
-        console.warn("获取收货地址列表失败", err);
+        // 网络/登录异常已由 request 层统一提示
+        console.warn("获取可用优惠券列表失败", err);
+      });
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("获取可用优惠券数量失败", err);
+  });
+}
+function remarkKey(shop) {
+  return shop.storeId || shop.storeName;
+}
+function remarkInputRef(shop) {
+  return (el) => {
+    remarkInputRefs[remarkKey(shop)] = el;
+  };
+}
+function isRemarkOpen(shop) {
+  return !!remarkEditing.value[remarkKey(shop)];
+}
+function openRemark(shop) {
+  const key = remarkKey(shop);
+  remarkEditing.value = { ...remarkEditing.value, [key]: true };
+  nextTick(() => {
+    const input = remarkInputRefs[remarkKey(shop)];
+    const target = Array.isArray(input) ? input[0] : input;
+    target?.focus?.();
+  });
+}
+function closeRemark(shop) {
+  if (shop.remark) {
+    shop.remark = String(shop.remark).trim();
+  }
+  const key = remarkKey(shop);
+  remarkEditing.value = { ...remarkEditing.value, [key]: false };
+}
+function selectAddress(item) {
+  // 选择地址
+  let params = {
+    way: route.query.way,
+    shippingAddressId: item.id,
+  };
+  selectAddr(params).then((res) => {
+    if (res.success) {
+      Message.success("选择收货地址成功");
+      selectMethod.value = item;
+      getGoodsDetail();
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("选择收货地址失败", err);
+  });
+}
+function selectStoreAddress(item) {
+  // 选择自提地址
+  setStoreAddressId(item.id, route.query.way).then((res) => {
+    if (res.success) {
+      Message.success("选择自提地址成功");
+      selectedStoreAddress.value = item;
+      getGoodsDetail();
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("选择自提地址失败", err);
+  });
+}
+function selectDeliverMethod(item) {
+  let params = {
+    way: route.query.way,
+    shippingMethod: item.value,
+  };
+  setShipMethod(params).then((res) => {
+    if (res.success) {
+      selectedDeliverMethod.value = item.value;
+      getGoodsDetail();
+    }
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("切换配送方式失败", err);
+  });
+}
+function editAddress(id) {
+  // 编辑地址
+  addrId.value = id;
+  address.value.show();
+}
+function addrChange() {
+  // 添加，编辑地址回显
+  getAddress();
+}
+function delAddress(item) {
+  // 删除地址
+  Modal.confirm({
+    title: "提示",
+    content: "你确定删除这个收货地址",
+    onOk: () => {
+      delMemberAddress(item.id).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getAddress();
+        }
+      }).catch((err) => {
+        // 网络/登录异常已由 request 层统一提示
+        console.warn("删除收货地址失败", err);
       });
     },
-    // 获取配送方式列表
-    async getDistribution() {
-      try {
-        let shopRes = await shippingMethodList({ way: this.$route.query.way });
-        let shopList;
-        if (shopRes.success) {
-          shopList = shopRes.result || [];
-          let way = [];
-          this.shippingWay.forEach((item) => {
-            shopList.forEach((child) => {
-              if (item.value == child) {
-                way.push(item);
-              }
-            });
-          });
-          this.shippingMethod = way;
-        }
-      } catch (err) {
-        // 网络/登录异常已由 request 层统一提示，配送方式保持为空不影响页面其余模块
-        console.warn("获取配送方式列表失败", err);
-      }
-    },
+    onCancel: () => { },
+  });
+}
+function goGoodsDetail(skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+// 跳转店铺首页
+function goShopPage(id) {
+  router.push({
+    path: "/merchant",
+    query: { id: id },
+  });
+}
+function useCoupon(id, used) {
+  // 使用优惠券
+  let params = {
+    way: route.query.way,
+    memberCouponId: id,
+    used: used, // true 为使用， false为弃用
+  };
+  selectCoupon(params).then((res) => {
+    if (res.success) init();
+  }).catch((err) => {
+    // 网络/登录异常已由 request 层统一提示
+    console.warn("使用优惠券失败", err);
+  });
+}
+function editInvoice() {
+  // 编辑发票信息
+  invModal.value.invoiceAvailable = true;
+}
+function getInvMsg(item) {
+  // 获取发票信息
+  if (item) {
+    init();
+    invModal.value.invoiceAvailable = false;
+  }
+}
 
-    async getStoreAddressList() {
-      getStoreAddress(this.storeId,this.searchForm).then(res => {
-        if (res.success) {
-          this.storeAddressList = res.result?.records || []
-          this.storeAddressList.forEach((e, index) => {
-            if (e.id === this.selectedAddress.id && index > 2) {
-              this.storeMoreAddr = true;
-            }
-          });
+function pay() {
+  // 结算
+  const params = {
+    client: "PC",
+    remark: [],
+    way: route.query.way,
+  };
+  goodsList.value.forEach((e) => {
+    if (e.remark) {
+      params.remark.push({
+        remark: e.remark,
+        storeId: e.storeId,
+      });
+    }
+  });
+
+  if (!params.remark.length) delete params.remark;
+
+  Spin.show();
+  createTrade(params)
+    .then((res) => {
+      Spin.hide();
+      if (res.success) {
+        const way = params.way;
+        if (shouldSkipPaymentPage(res.result, way)) {
+          router.push("/payDone");
+          return;
         }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示，自提点列表保持为空
-        console.warn("获取自提点列表失败", err);
-      })
-    },
-    getGoodsDetail() {
-      // 订单商品详情
-      Spin.show();
-      cartGoodsPay({ way: this.$route.query.way })
-        .then((res) => {
-          Spin.hide();
-          if (res.success) {
-            const result = res.result || {};
-            if (
-              !result.checkedSkuList ||
-              result.checkedSkuList.length === 0
-            ) {
-              const firstSku = result.skuList?.[0];
-              if (firstSku) {
-                Modal.warning({
-                  title: "购物车存在无效商品！",
-                  content:
-                    "[" +
-                    (firstSku.goodsSku?.goodsName || "") +
-                    "]" +
-                    (firstSku.errorMessage || ""),
-                });
-              }
-              this.$router.push({
-                path: "/cart",
-                replace: true,
-              });
-              return;
-            }
-            this.goodsList = result.cartList || [];
-            this.priceDetailDTO = result.priceDetailDTO || {};
-            this.skuList = result.skuList || [];
-            if (this.skuList[0]?.goodsSku) {
-              this.goodsType = this.skuList[0].goodsSku.goodsType;
-            }
-            this.storeId = this.goodsList[0]?.storeId || ''
-            if (result.receiptVO) {
-              this.invoiceData = result.receiptVO;
-            }
-            let notSupArea = result.notSupportFreight;
-            this.selectedCoupon = {};
-            const platformCouponId = result.platformCoupon?.memberCoupon?.id;
-            if (platformCouponId)
-              this.selectedCoupon[platformCouponId] = result.platformCoupon;
-            if (
-              result.storeCoupons &&
-              Object.keys(result.storeCoupons)[0]
-            ) {
-              let storeMemberCouponsId = Object.keys(
-                result.storeCoupons
-              )[0];
-              let storeCouponId =
-                result.storeCoupons[storeMemberCouponsId]?.memberCoupon?.id;
-              if (storeCouponId)
-                this.selectedCoupon[storeCouponId] =
-                  result.storeCoupons[storeMemberCouponsId];
-            }
-            if (notSupArea) {
-              let content = [];
-              let title = "";
-              notSupArea.forEach((e) => {
-                title = e.errorMessage;
-                content.push(e.goodsSku?.goodsName || "");
-              });
-              Modal.warning({
-                title: "以下商品超出配送区域" || title,
-                content: content.toString(),
-              });
-            }
-            if (result.memberAddress) {
-              this.selectedAddress = result.memberAddress;
-            }
-            this.getAddress();
-            this.getStoreAddressList();
-            this.totalNum = 0;
-            for (let i = 0; i < this.skuList.length; i++) {
-              this.totalNum += this.skuList[i].num || 0;
-            }
-            this.usedCouponId = [];
-            this.couponList = result.canUseCoupons || [];
-            const couponKeys = Object.keys(this.selectedCoupon);
-            if (couponKeys.length) {
-              this.couponList.forEach((e) => {
-                if (
-                  this.selectedCoupon[e.id] &&
-                  e.id === this.selectedCoupon[e.id]?.memberCoupon?.id
-                ) {
-                  this.usedCouponId.push(e.id);
-                }
-              });
-              this.$nextTick(() => {
-                this.$forceUpdate();
-              });
-            }
-            this.giftCardDeductItems = Array.isArray(result.giftCardDeductItems)
-              ? result.giftCardDeductItems
-              : [];
-            this.tradeGiftCardDeductTotal =
-              result.giftCardDeductTotal != null && result.giftCardDeductTotal !== ""
-                ? Number(result.giftCardDeductTotal)
-                : null;
-            this.giftCardList = Array.isArray(result.canUseGiftCards) ? result.canUseGiftCards : [];
-            this.syncGiftCardSelectionFromCart(result);
-          }
-        })
-        .catch((err) => {
-          Spin.hide();
-          // 网络/登录异常已由 request 层统一提示；这里兜底 404 与返回数据结构异常
-          if (!err?.data || err?.data?.message) {
-            Message.error(err?.data?.message || "结算数据加载失败，请稍后重试");
-          }
-          console.warn("获取结算数据失败", err);
+        router.push({
+          path: "/payment",
+          query: { orderType: "TRADE", sn: res.result.sn },
         });
-    },
-    syncGiftCardSelectionFromCart(result) {
-      if (!result) {
-        this.selectedGiftCardCredentialIds = [];
-        return;
+      } else if (res.message) {
+        Message.warning(res.message);
       }
-      const selectedIds = result.selectedGiftCardIds;
-      if (Array.isArray(selectedIds) && selectedIds.length) {
-        this.selectedGiftCardCredentialIds = selectedIds
-          .map((id) => (id != null && id !== "" ? String(id) : ""))
-          .filter(Boolean);
-        return;
+    })
+    .catch((err) => {
+      Spin.hide();
+      // 网络错误已由 request 层统一提示，这里兜底 404 与返回结构异常等未被提示的错误
+      if (!err?.data || err?.data?.message) {
+        Message.error(err?.data?.message || err?.message || "提交订单失败，请稍后重试");
       }
-      const items = Array.isArray(result.giftCardDeductItems) ? result.giftCardDeductItems : [];
-      if (items.length) {
-        this.selectedGiftCardCredentialIds = items
-          .map((it) => (it.credentialId != null && it.credentialId !== "" ? String(it.credentialId) : ""))
-          .filter(Boolean);
-        return;
-      }
-      const pd = result.priceDetailDTO || {};
-      const id =
-        result.selectedGiftCardCredentialId ||
-        result.usedGiftCardCredentialId ||
-        pd.selectedGiftCardCredentialId ||
-        pd.usedGiftCardCredentialId ||
-        (result.selectedGiftCard && (result.selectedGiftCard.id || result.selectedGiftCard.credentialId)) ||
-        (result.giftCardCashSelected && result.giftCardCashSelected.id) ||
-        null;
-      this.selectedGiftCardCredentialIds =
-        id != null && id !== "" ? [String(id)] : [];
-    },
-    formatGiftFaceValue(val) {
-      if (val == null || val === "") {
-        return "—";
-      }
-      const n = Number(val);
-      if (Number.isNaN(n)) {
-        return String(val);
-      }
-      return Number.isInteger(n) ? String(n) : n.toFixed(2).replace(/\.?0+$/, "");
-    },
-    formatGiftExpire(row) {
-      const t = row && row.expireTime;
-      if (!t) {
-        return "长期有效";
-      }
-      const d = new Date(t);
-      if (Number.isNaN(d.getTime())) {
-        return "长期有效";
-      }
-      if (d.getFullYear() >= 2099) {
-        return "长期有效";
-      }
-      const y = d.getFullYear();
-      const m = String(d.getMonth() + 1).padStart(2, "0");
-      const day = String(d.getDate()).padStart(2, "0");
-      return `${y}-${m}-${day} 到期`;
-    },
-    toggleGiftCard(item) {
-      if (!item || item.id == null || item.id === "") {
-        return;
-      }
-      if (this.isGiftCardSelected(item)) {
-        this.useGiftCard(item.id, false);
-      } else {
-        this.useGiftCard(item.id, true);
-      }
-    },
-    isGiftCardSelected(item) {
-      if (!item || !this.selectedGiftCardCredentialIds.length) {
-        return false;
-      }
-      const id = item.id != null ? String(item.id) : "";
-      return id && this.selectedGiftCardCredentialIds.includes(id);
-    },
-    useGiftCard(credentialId, used) {
-      const params = {
-        way: this.$route.query.way,
-        used,
-      };
-      if (credentialId != null && credentialId !== "") {
-        params.credentialId = String(credentialId);
-      }
-      selectGiftCard(params).then((res) => {
-        if (res.success) {
-          this.init();
-        }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("选择礼品卡失败", err);
-      });
-    },
-    getCouponNum() {
-      // 获取可用优惠券数量
-      couponNum({ way: this.$route.query.way }).then((res) => {
-        this.canUseCouponNum = res.result;
-        if (res.result) {
-          let storeArr = [];
-          let skuArr = [];
-          this.goodsList.forEach((e) => {
-            storeArr.push(e.storeId);
-            e.skuList?.forEach((i) => {
-              skuArr.push(i.goodsSku?.id);
-            });
-          });
-          let params = {
-            pageNumber: 1,
-            pageSize: 100,
-            memberCouponStatus: "NEW",
-            scopeId: skuArr.toString(),
-            storeId: storeArr.toString(),
-            totalPrice: this.priceDetailDTO.goodsPrice,
-          };
-          canUseCouponList(params).then((res) => {
-            // 可用优惠券列表
-            if (res.success) this.couponList = res.result?.records || [];
-            const couponKeys = Object.keys(this.selectedCoupon);
-            this.usedCouponId = [];
-            if (couponKeys.length) {
-              this.couponList.forEach((e) => {
-                if (e.id === this.selectedCoupon[couponKeys]?.memberCoupon?.id) {
-                  this.usedCouponId.push(e.id);
-                }
-              });
-              this.$nextTick(() => {
-                this.$forceUpdate();
-              });
-            }
-          }).catch((err) => {
-            // 网络/登录异常已由 request 层统一提示
-            console.warn("获取可用优惠券列表失败", err);
-          });
-        }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("获取可用优惠券数量失败", err);
-      });
-    },
-    remarkKey(shop) {
-      return shop.storeId || shop.storeName;
-    },
-    remarkInputRef(shop) {
-      return "remarkInput" + this.remarkKey(shop);
-    },
-    isRemarkOpen(shop) {
-      return !!this.remarkEditing[this.remarkKey(shop)];
-    },
-    openRemark(shop) {
-      const key = this.remarkKey(shop);
-      this.remarkEditing = { ...this.remarkEditing, [key]: true };
-      this.$nextTick(() => {
-        const input = this.$refs[this.remarkInputRef(shop)];
-        const target = Array.isArray(input) ? input[0] : input;
-        target?.focus?.();
-      });
-    },
-    closeRemark(shop) {
-      if (shop.remark) {
-        shop.remark = String(shop.remark).trim();
-      }
-      const key = this.remarkKey(shop);
-      this.remarkEditing = { ...this.remarkEditing, [key]: false };
-    },
-    selectAddress(item) {
-      // 选择地址
-      let params = {
-        way: this.$route.query.way,
-        shippingAddressId: item.id,
-      };
-      selectAddr(params).then((res) => {
-        if (res.success) {
-          Message.success("选择收货地址成功");
-          this.selectMethod = item;
-          this.getGoodsDetail();
-        }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("选择收货地址失败", err);
-      });
-    },
-    selectStoreAddress(item) {
-      // 选择自提地址
-      setStoreAddressId(item.id,this.$route.query.way).then((res) => {
-        if (res.success) {
-          Message.success("选择自提地址成功");
-          this.selectedStoreAddress = item;
-          this.getGoodsDetail();
-        }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("选择自提地址失败", err);
-      });
-    },
-    selectDeliverMethod(item) {
-      let params = {
-        way: this.$route.query.way,
-        shippingMethod: item.value,
-      };
-      setShipMethod(params).then((res) => {
-        if (res.success) {
-          this.selectedDeliverMethod = item.value;
-          this.getGoodsDetail();
-        }
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("切换配送方式失败", err);
-      });
-    },
-    editAddress(id) {
-      // 编辑地址
-      this.addrId = id;
-      this.$refs.address.show();
-    },
-    addrChange() {
-      // 添加，编辑地址回显
-      this.getAddress();
-    },
-    delAddress(item) {
-      // 删除地址
-      Modal.confirm({
-        title: "提示",
-        content: "你确定删除这个收货地址",
-        onOk: () => {
-          delMemberAddress(item.id).then((res) => {
-            if (res.success) {
-              Message.success("删除成功");
-              this.getAddress();
-            }
-          }).catch((err) => {
-            // 网络/登录异常已由 request 层统一提示
-            console.warn("删除收货地址失败", err);
-          });
-        },
-        onCancel: () => { },
-      });
-    },
-    goGoodsDetail(skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 跳转店铺首页
-    goShopPage(id) {
-      this.$router.push({
-        path: "/merchant",
-        query: { id: id },
-      });
-    },
-    useCoupon(id, used) {
-      // 使用优惠券
-      let params = {
-        way: this.$route.query.way,
-        memberCouponId: id,
-        used: used, // true 为使用， false为弃用
-      };
-      selectCoupon(params).then((res) => {
-        if (res.success) this.init();
-      }).catch((err) => {
-        // 网络/登录异常已由 request 层统一提示
-        console.warn("使用优惠券失败", err);
-      });
-    },
-    editInvoice() {
-      // 编辑发票信息
-      this.$refs.invModal.invoiceAvailable = true;
-    },
-    getInvMsg(item) {
-      // 获取发票信息
-      if (item) {
-        this.init();
-        this.$refs.invModal.invoiceAvailable = false;
-      }
-    },
-
-    pay() {
-      // 结算
-      const params = {
-        client: "PC",
-        remark: [],
-        way: this.$route.query.way,
-      };
-      this.goodsList.forEach((e) => {
-        if (e.remark) {
-          params.remark.push({
-            remark: e.remark,
-            storeId: e.storeId,
-          });
-        }
-      });
-
-      if (!params.remark.length) delete params.remark;
-
-      Spin.show();
-      createTrade(params)
-        .then((res) => {
-          Spin.hide();
-          if (res.success) {
-            const way = params.way;
-            if (shouldSkipPaymentPage(res.result, way)) {
-              this.$router.push("/payDone");
-              return;
-            }
-            this.$router.push({
-              path: "/payment",
-              query: { orderType: "TRADE", sn: res.result.sn },
-            });
-          } else if (res.message) {
-            Message.warning(res.message);
-          }
-        })
-        .catch((err) => {
-          Spin.hide();
-          // 网络错误已由 request 层统一提示，这里兜底 404 与返回结构异常等未被提示的错误
-          if (!err?.data || err?.data?.message) {
-            Message.error(err?.data?.message || err?.message || "提交订单失败，请稍后重试");
-          }
-          console.warn("提交订单失败", err);
-        });
-    },
-    // 优惠券可用范围
-    useScope(type, storeName) {
-      let shop = "平台";
-      let goods = "全部商品";
-      if (storeName !== "platform") shop = storeName;
-      switch (type) {
-        case "ALL":
-          goods = "全部商品";
-          break;
-        case "PORTION_GOODS":
-          goods = "部分商品";
-          break;
-        case "PORTION_GOODS_CATEGORY":
-          goods = "部分分类商品";
-          break;
-      }
-      return `${shop}${goods}可用`;
-    },
-  },
-};
+      console.warn("提交订单失败", err);
+    });
+}
+// 优惠券可用范围
+function useScope(type, storeName) {
+  let shop = "平台";
+  let goods = "全部商品";
+  if (storeName !== "platform") shop = storeName;
+  switch (type) {
+    case "ALL":
+      goods = "全部商品";
+      break;
+    case "PORTION_GOODS":
+      goods = "部分商品";
+      break;
+    case "PORTION_GOODS_CATEGORY":
+      goods = "部分分类商品";
+      break;
+  }
+  return `${shop}${goods}可用`;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/payment/PayDone.vue b/buyer/src/pages/payment/PayDone.vue
index b88608aef..ad21ff62f 100644
--- a/buyer/src/pages/payment/PayDone.vue
+++ b/buyer/src/pages/payment/PayDone.vue
@@ -12,13 +12,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'PayDone',
-  mounted () {
-    document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
-  }
-};
+<script setup>
+import { onMounted } from "vue";
+
+defineOptions({ name: 'PayDone' });
+
+onMounted(() => {
+  document.querySelector('.pay-done').style.height = window.innerHeight + 'px'
+});
 </script>
 
 <style scoped lang='scss'>
diff --git a/buyer/src/pages/payment/PayMent.vue b/buyer/src/pages/payment/PayMent.vue
index d944e1810..37499e441 100644
--- a/buyer/src/pages/payment/PayMent.vue
+++ b/buyer/src/pages/payment/PayMent.vue
@@ -35,109 +35,108 @@
     <BaseFooter></BaseFooter>
   </div>
 </template>
-<script>
-
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { tradeDetail, pay } from '@/api/pay.js';
 import { Message, Modal } from "@/utils/message";
 
-export default {
-  data () {
-    return {
-      payDetail: {},
-      support: [],
-      walletValue: 0,
-      qrcode: '',
-      endTime: 0,
-      endText: '订单已超时取消',
-      isStart: false,
-      now: Date.now(),
-      countdownTimer: null,
-    };
-  },
-  computed: {
-    countdownText () {
-      if (!this.isStart || !this.endTime) return '';
-      const diff = this.endTime - this.now;
-      if (diff <= 0) return this.endText;
-      const days = Math.floor(diff / 86400000);
-      const hours = Math.floor((diff % 86400000) / 3600000);
-      const minutes = Math.floor((diff % 3600000) / 60000);
-      const seconds = Math.floor((diff % 60000) / 1000);
-      return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
-    },
-  },
-  methods: {
-    // 获取订单详情
-    getTradeDetail () {
-      const params = this.$route.query;
-      params.clientType = 'PC'
-      tradeDetail(params).then(res => {
-        if (res.success) {
-          this.payDetail = res.result;
-          this.endTime = this.payDetail.autoCancel
-          this.isStart = true
-          this.support = this.payDetail.support
-          this.walletValue = this.payDetail.walletValue
-          const price = Number(this.payDetail.price);
-          if (!Number.isNaN(price) && price <= 0) {
-            this.$router.replace('/payDone');
-          }
-        }
-      }).catch((err) => {
-        this.$router.push({name: 'MyOrder'});
-      });
-    },
-    // 支付
-    handlePay (way) {
-      // 余额支付则直接跳转
-      if (way === 'WALLET') {
-        // 如果待支付金额大于余额，则报错
-        if (this.payDetail.price > this.walletValue) {
-          Message.error('余额不足以支付当前订单，如需充值请前往会员中心');
-          return;
-        }
-      }
-      const params = this.$route.query;
-      params.paymentMethod = way;
-      params.paymentClient = 'NATIVE';
-      params.price = this.payDetail.price;
-      if (way === 'WALLET') {
-        Modal.confirm({
-          title: '支付确认',
-          content: '确认使用余额支付吗？',
-          onOk: () => {
-            return pay(params)
-              .then((res) => {
-                if (res.success) {
-                  Message.success(res.message || '支付成功');
-                  this.$router.push('/payDone');
-                } else {
-                  Message.warning(res.message || '支付失败');
-                }
-              })
-              .catch((err) => {
-                // 支付失败兜底：业务错误（如 CARD_KEY_STORE_SELL_FORBIDDEN）通常已由 axios 拦截器提示
-                if (err?.message && !err?.data?.message) {
-                  Message.error(err.message);
-                }
-              });
-          }
-        });
-      } else {
-        this.$router.push({path: '/qrpay', query: params});
+const route = useRoute();
+const router = useRouter();
+
+const payDetail = ref({});
+const support = ref([]);
+const walletValue = ref(0);
+const qrcode = ref('');
+const endTime = ref(0);
+const endText = ref('订单已超时取消');
+const isStart = ref(false);
+const now = ref(Date.now());
+let countdownTimer = null;
+
+const countdownText = computed(() => {
+  if (!isStart.value || !endTime.value) return '';
+  const diff = endTime.value - now.value;
+  if (diff <= 0) return endText.value;
+  const days = Math.floor(diff / 86400000);
+  const hours = Math.floor((diff % 86400000) / 3600000);
+  const minutes = Math.floor((diff % 3600000) / 60000);
+  const seconds = Math.floor((diff % 60000) / 1000);
+  return `${days}天${hours}小时${minutes}分钟${seconds}秒`;
+});
+
+// 获取订单详情
+function getTradeDetail() {
+  const params = route.query;
+  params.clientType = 'PC'
+  tradeDetail(params).then(res => {
+    if (res.success) {
+      payDetail.value = res.result;
+      endTime.value = payDetail.value.autoCancel
+      isStart.value = true
+      support.value = payDetail.value.support
+      walletValue.value = payDetail.value.walletValue
+      const price = Number(payDetail.value.price);
+      if (!Number.isNaN(price) && price <= 0) {
+        router.replace('/payDone');
       }
     }
-  },
-  mounted () {
-    this.getTradeDetail();
-    this.countdownTimer = setInterval(() => {
-      this.now = Date.now();
-    }, 1000);
-  },
-  beforeUnmount () {
-    if (this.countdownTimer) clearInterval(this.countdownTimer);
-  },
-};
+  }).catch((err) => {
+    router.push({name: 'MyOrder'});
+  });
+}
+
+// 支付
+function handlePay(way) {
+  // 余额支付则直接跳转
+  if (way === 'WALLET') {
+    // 如果待支付金额大于余额，则报错
+    if (payDetail.value.price > walletValue.value) {
+      Message.error('余额不足以支付当前订单，如需充值请前往会员中心');
+      return;
+    }
+  }
+  const params = route.query;
+  params.paymentMethod = way;
+  params.paymentClient = 'NATIVE';
+  params.price = payDetail.value.price;
+  if (way === 'WALLET') {
+    Modal.confirm({
+      title: '支付确认',
+      content: '确认使用余额支付吗？',
+      onOk: () => {
+        return pay(params)
+          .then((res) => {
+            if (res.success) {
+              Message.success(res.message || '支付成功');
+              router.push('/payDone');
+            } else {
+              Message.warning(res.message || '支付失败');
+            }
+          })
+          .catch((err) => {
+            // 支付失败兜底：业务错误（如 CARD_KEY_STORE_SELL_FORBIDDEN）通常已由 axios 拦截器提示
+            if (err?.message && !err?.data?.message) {
+              Message.error(err.message);
+            }
+          });
+      }
+    });
+  } else {
+    router.push({path: '/qrpay', query: params});
+  }
+}
+
+onMounted(() => {
+  getTradeDetail();
+  countdownTimer = setInterval(() => {
+    now.value = Date.now();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (countdownTimer) clearInterval(countdownTimer);
+});
 </script>
 <style scoped lang="scss">
 .head-left {
diff --git a/buyer/src/pages/payment/ThirdPay.vue b/buyer/src/pages/payment/ThirdPay.vue
index 5ccb9c2da..b1b4fd839 100644
--- a/buyer/src/pages/payment/ThirdPay.vue
+++ b/buyer/src/pages/payment/ThirdPay.vue
@@ -44,89 +44,91 @@
     <BaseFooter></BaseFooter>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import { Iphone } from '@element-plus/icons-vue';
 import vueQr from 'vue-qr';
 import { payCallback, pay } from '@/api/pay.js';
-export default {
-  components: { vueQr, Iphone },
-  data () {
-    return {
-      qrcode: '',
-      params: this.$route.query,
-      interval: null,
-      num: 0,
-      payLoading: false,
-      payError: '',
-    };
-  },
-  computed: {
-    payWayName () {
-      return this.params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信';
-    },
-  },
-  methods: {
-    formatPayError (rawMessage) {
-      const message = (rawMessage || '').trim();
-      if (!message || message === '支付业务异常，请稍后重试') {
-        return `${this.payWayName}支付暂不可用，请稍后重试或选择其他支付方式`;
+
+const route = useRoute();
+const router = useRouter();
+
+const qrcode = ref('');
+const params = ref(route.query);
+const num = ref(0);
+const payLoading = ref(false);
+const payError = ref('');
+let interval = null;
+
+const payWayName = computed(() => {
+  return params.value.paymentMethod === 'ALIPAY' ? '支付宝' : '微信';
+});
+
+function formatPayError (rawMessage) {
+  const message = (rawMessage || '').trim();
+  if (!message || message === '支付业务异常，请稍后重试') {
+    return `${payWayName.value}支付暂不可用，请稍后重试或选择其他支付方式`;
+  }
+  return message;
+}
+
+function clearPayPoll () {
+  if (interval) {
+    clearInterval(interval);
+    interval = null;
+  }
+}
+
+function handlePay () {
+  clearPayPoll();
+  const params = route.query;
+  payLoading.value = true;
+  payError.value = '';
+  qrcode.value = '';
+  pay(params, { skipMessage: true })
+    .then((res) => {
+      payLoading.value = false;
+      if (res.success && res.result) {
+        qrcode.value = res.result;
+        num.value = 0;
+        interval = setInterval(callback, 5000);
+        return;
       }
-      return message;
-    },
-    clearPayPoll () {
-      if (this.interval) {
-        clearInterval(this.interval);
-        this.interval = null;
-      }
-    },
-    handlePay () {
-      this.clearPayPoll();
-      const params = this.$route.query;
-      this.payLoading = true;
-      this.payError = '';
-      this.qrcode = '';
-      pay(params, { skipMessage: true })
-        .then((res) => {
-          this.payLoading = false;
-          if (res.success && res.result) {
-            this.qrcode = res.result;
-            this.num = 0;
-            this.interval = setInterval(this.callback, 5000);
-            return;
-          }
-          this.payError = this.formatPayError(res.message);
-          Message.error(this.payError);
-        })
-        .catch((err) => {
-          this.payLoading = false;
-          this.payError = this.formatPayError(err?.message || err?.data?.message);
-          Message.error(this.payError);
-        });
-    },
-    callback () {
-      this.num++;
-      if (this.num >= 7) {
-        this.clearPayPoll();
-      }
-      const params = JSON.parse(JSON.stringify(this.$route.query));
-      delete params.paymentMethod;
-      delete params.paymentClient;
-      payCallback(params).then((res) => {
-        if (res.result) {
-          this.clearPayPoll();
-          this.$router.push({ path: '/payDone', query: { orderType: this.$route.query.orderType } });
-        }
-      });
-    },
-  },
-  mounted () {
-    this.handlePay();
-  },
-  beforeUnmount () {
-    this.clearPayPoll();
-  },
-};
+      payError.value = formatPayError(res.message);
+      Message.error(payError.value);
+    })
+    .catch((err) => {
+      payLoading.value = false;
+      payError.value = formatPayError(err?.message || err?.data?.message);
+      Message.error(payError.value);
+    });
+}
+
+function callback () {
+  num.value++;
+  if (num.value >= 7) {
+    clearPayPoll();
+  }
+  const params = JSON.parse(JSON.stringify(route.query));
+  delete params.paymentMethod;
+  delete params.paymentClient;
+  payCallback(params).then((res) => {
+    if (res.result) {
+      clearPayPoll();
+      router.push({ path: '/payDone', query: { orderType: route.query.orderType } });
+    }
+  });
+}
+
+onMounted(() => {
+  handlePay();
+});
+
+onBeforeUnmount(() => {
+  clearPayPoll();
+});
 </script>
 <style scoped lang="scss">
 .head-left {
diff --git a/buyer/src/pages/promotion/PointGoodsDetail.vue b/buyer/src/pages/promotion/PointGoodsDetail.vue
index 8e5cbe924..f49ed51a9 100644
--- a/buyer/src/pages/promotion/PointGoodsDetail.vue
+++ b/buyer/src/pages/promotion/PointGoodsDetail.vue
@@ -93,6 +93,18 @@
 </template>
 
 <script>
+export default {
+  name: "PointGoodsDetail",
+  beforeRouteEnter(to, from, next) {
+    window.scrollTo(0, 0);
+    next();
+  },
+};
+</script>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Message } from "@/utils/message";
 import Search from "@/components/Search";
 import { addCartGoods } from "@/api/cart.js";
@@ -104,115 +116,109 @@ import {
   E_COUPON_CART_POINTS,
 } from "@/constants/goodsType";
 
-export default {
-  name: "PointGoodsDetail",
-  components: { Search },
-  beforeRouteEnter(to, from, next) {
-    window.scrollTo(0, 0);
-    next();
-  },
-  created() {
-    this.getGoodsDetail();
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleScroll);
-  },
-  data() {
-    return {
-      goodsMsg: {},
-      goodsSku: {},
-      isLoading: false,
-      onceFlag: true,
-      count: 1,
-      loading: false,
-    };
-  },
-  computed: {
-    isECouponSku() {
-      return isECoupon(this.goodsSku.goodsType);
-    },
-    displayStock() {
-      if (this.isECouponSku) {
-        return getECouponStock(this.goodsSku);
+const route = useRoute();
+const router = useRouter();
+
+const goodsMsg = ref({});
+const goodsSku = ref({});
+const isLoading = ref(false);
+const onceFlag = ref(true);
+const count = ref(1);
+const loading = ref(false);
+const itemIntroGoods = ref(null);
+
+const isECouponSku = computed(() => {
+  return isECoupon(goodsSku.value.goodsType);
+});
+const displayStock = computed(() => {
+  if (isECouponSku.value) {
+    return getECouponStock(goodsSku.value);
+  }
+  return Number(goodsSku.value.quantity) || 0;
+});
+const quantityMax = computed(() => {
+  if (isECouponSku.value) {
+    return getECouponMaxBuyNum(goodsSku.value);
+  }
+  const qty = Number(goodsSku.value.quantity) || 0;
+  return qty > 0 ? qty : 1;
+});
+const isOutOfStock = computed(() => {
+  return displayStock.value <= 0;
+});
+
+function getGoodsDetail() {
+  isLoading.value = true;
+  pointGoodsDetail(route.query.id)
+    .then((res) => {
+      isLoading.value = false;
+      if (res.success) {
+        goodsMsg.value = res.result;
+        goodsSku.value = res.result.goodsSku || {};
+        syncCountWithQuantity();
+      } else {
+        Message.error(res.message);
+        router.push("/");
       }
-      return Number(this.goodsSku.quantity) || 0;
-    },
-    quantityMax() {
-      if (this.isECouponSku) {
-        return getECouponMaxBuyNum(this.goodsSku);
+    })
+    .catch(() => {
+      router.push("/");
+    });
+}
+
+function syncCountWithQuantity() {
+  const max = quantityMax.value;
+  if (max <= 0) {
+    count.value = 1;
+    return;
+  }
+  if (count.value > max) count.value = max;
+  if (count.value < 1) count.value = 1;
+}
+
+function pointBuy() {
+  const params = {
+    num: count.value,
+    skuId: goodsMsg.value.skuId,
+    cartType: E_COUPON_CART_POINTS,
+  };
+  loading.value = true;
+  addCartGoods(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        router.push({ path: "/pay", query: { way: params.cartType } });
+      } else {
+        Message.warning(res.message);
       }
-      const qty = Number(this.goodsSku.quantity) || 0;
-      return qty > 0 ? qty : 1;
-    },
-    isOutOfStock() {
-      return this.displayStock <= 0;
-    },
-  },
-  methods: {
-    getGoodsDetail() {
-      this.isLoading = true;
-      pointGoodsDetail(this.$route.query.id)
-        .then((res) => {
-          this.isLoading = false;
-          if (res.success) {
-            this.goodsMsg = res.result;
-            this.goodsSku = res.result.goodsSku || {};
-            this.syncCountWithQuantity();
-          } else {
-            Message.error(res.message);
-            this.$router.push("/");
-          }
-        })
-        .catch(() => {
-          this.$router.push("/");
-        });
-    },
-    syncCountWithQuantity() {
-      const max = this.quantityMax;
-      if (max <= 0) {
-        this.count = 1;
-        return;
-      }
-      if (this.count > max) this.count = max;
-      if (this.count < 1) this.count = 1;
-    },
-    pointBuy() {
-      const params = {
-        num: this.count,
-        skuId: this.goodsMsg.skuId,
-        cartType: E_COUPON_CART_POINTS,
-      };
-      this.loading = true;
-      addCartGoods(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.$router.push({ path: "/pay", query: { way: params.cartType } });
-          } else {
-            Message.warning(res.message);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleScroll() {
-      if (this.onceFlag) {
-        this.$nextTick(() => {
-          this.changeHeight();
-        });
-        this.onceFlag = false;
-      }
-    },
-    changeHeight() {
-      const goodsDetailCon = document.querySelector(".item-intro");
-      if (!goodsDetailCon || !this.$refs.itemIntroGoods) return;
-      let heightCss = window.getComputedStyle(goodsDetailCon).height;
-      heightCss = parseInt(heightCss.substr(0, heightCss.length - 2), 10) + 89;
-      this.$refs.itemIntroGoods.style.height = heightCss + "px";
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function handleScroll() {
+  if (onceFlag.value) {
+    nextTick(() => {
+      changeHeight();
+    });
+    onceFlag.value = false;
+  }
+}
+
+function changeHeight() {
+  const goodsDetailCon = document.querySelector(".item-intro");
+  if (!goodsDetailCon || !itemIntroGoods.value) return;
+  let heightCss = window.getComputedStyle(goodsDetailCon).height;
+  heightCss = parseInt(heightCss.substr(0, heightCss.length - 2), 10) + 89;
+  itemIntroGoods.value.style.height = heightCss + "px";
+}
+
+getGoodsDetail();
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/pages/promotion/PointMall.vue b/buyer/src/pages/promotion/PointMall.vue
index 2e8f2a8ab..3a286e0ed 100644
--- a/buyer/src/pages/promotion/PointMall.vue
+++ b/buyer/src/pages/promotion/PointMall.vue
@@ -44,78 +44,92 @@
     <BaseFooter></BaseFooter>
   </div>
 </template>
-<script>
-import {pointGoods, pointGoodsCategory} from '@/api/promotion.js'
-export default {
-  data () {
-    return {
-      goodsList: [], // 积分商品列表
-      cateList: [{ // 商品分类
-        name: '全部分类',
-        id: 0
-      }], // 积分分类列表
-      params: { // 商品列表请求参数
-        pageNumber: 1,
-        pageSize: 20,
-        pointsGoodsCategoryId: ''
-      },
-      total: 0, // 商品总数
-      cateId: '' // 店铺分类id
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { pointGoods, pointGoodsCategory } from "@/api/promotion.js";
+
+const route = useRoute();
+const router = useRouter();
+
+const goodsList = ref([]); // 积分商品列表
+const cateList = ref([{ // 商品分类
+  name: "全部分类",
+  id: 0,
+}]); // 积分分类列表
+// 商品列表请求参数
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  pointsGoodsCategoryId: "",
+});
+const total = ref(0); // 商品总数
+const cateId = ref(""); // 店铺分类id
+
+onMounted(() => {
+  params.pointsGoodsCategoryId = route.query.categoryId || "";
+  cateId.value = route.query.categoryId || 0;
+  getList();
+  getCate();
+});
+
+/** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
+function itemThumbnail(item) {
+  return item?.goodsSku?.thumbnail || item?.thumbnail || "";
+}
+
+function itemGoodsName(item) {
+  return item?.goodsSku?.goodsName || item?.goodsName || "";
+}
+
+// 获取列表
+function getList() {
+  pointGoods(params).then((res) => {
+    if (res.success) {
+      goodsList.value = res.result.records;
+      total.value = res.result.total;
     }
-  },
-  mounted () {
-    this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
-    this.cateId = this.$route.query.categoryId || 0
-    this.getList()
-    this.getCate()
-  },
-  methods: {
-    /** 列表 API 返回 PointsGoods（thumbnail/goodsName 在顶层）；详情 API 才有 goodsSku */
-    itemThumbnail (item) {
-      return item?.goodsSku?.thumbnail || item?.thumbnail || ''
-    },
-    itemGoodsName (item) {
-      return item?.goodsSku?.goodsName || item?.goodsName || ''
-    },
-    getList () { // 获取列表
-      pointGoods(this.params).then(res => {
-        if (res.success) {
-          this.goodsList = res.result.records
-          this.total = res.result.total
-        }
-      })
-    },
-    getCate () { // 获取分类
-      pointGoodsCategory(this.params).then(res => {
-        if (res.success) {
-          this.cateList.push(...res.result.records)
-        }
-      })
-    },
-    selectCate (item) { // 选择商品分类
-      let cateId = item.value === 0 ? '' : item.value
-      this.params.pointsGoodsCategoryId = cateId
-      this.getList()
-      this.$router.push({query: {categoryId: cateId}})
-    },
-    goGoodsDetail (id) { // 跳转商品详情
-      this.$router.push({path: '/pointGoodsDetail', query: {id}})
-      // let routerUrl = this.$router.resolve({
-      //   path: '/pointGoodsDetail',
-      //   query: {id}
-      // })
-      // window.open(routerUrl.href, '_blank')
-    },
-    changePageNum (val) { // 修改页码
-      this.params.pageNumber = val;
-      this.getList()
-    },
-    changePageSize (val) { // 修改页数
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.getList()
+  });
+}
+
+// 获取分类
+function getCate() {
+  pointGoodsCategory(params).then((res) => {
+    if (res.success) {
+      cateList.value.push(...res.result.records);
     }
-  }
+  });
+}
+
+// 选择商品分类
+function selectCate(item) {
+  let cateId = item.value === 0 ? "" : item.value;
+  params.pointsGoodsCategoryId = cateId;
+  getList();
+  router.push({ query: { categoryId: cateId } });
+}
+
+// 跳转商品详情
+function goGoodsDetail(id) {
+  router.push({ path: "/pointGoodsDetail", query: { id } });
+  // let routerUrl = router.resolve({
+  //   path: '/pointGoodsDetail',
+  //   query: {id}
+  // })
+  // window.open(routerUrl.href, '_blank')
+}
+
+// 修改页码
+function changePageNum(val) {
+  params.pageNumber = val;
+  getList();
+}
+
+// 修改页数
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  getList();
 }
 </script>
 <style lang="scss" scoped>
diff --git a/buyer/src/pages/promotion/seckill.vue b/buyer/src/pages/promotion/seckill.vue
index 952eeeb7f..d59e2e25c 100644
--- a/buyer/src/pages/promotion/seckill.vue
+++ b/buyer/src/pages/promotion/seckill.vue
@@ -61,121 +61,127 @@
     <BaseFooter />
   </div>
 </template>
-<script>
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { seckillByDay } from "@/api/promotion";
-export default {
-  data () {
-    return {
-      list: [], // 秒杀时段列表
-      goodsList: [], // 商品列表
-      interval: null, // 定时器
-      currIndex: 0, // 当前时间段的下标
-      currTime: 0, // 当前显示的倒计时
-      diffSeconds: 0, // 倒计时时间戳
-      nowHour: new Date().getHours(), // 当前小时数
-    };
-  },
-  beforeUnmount () {
-    clearInterval(this.interval);
-  },
-  watch: {
-    currIndex (val) {
-      clearInterval(this.interval);
-      this.interval = null;
-      this.nowHour = new Date().getHours();
-      this.countDown(val);
-      this.goodsList = this.list[val].seckillGoodsList;
-    },
-    diffSeconds (val) {
-      const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
-      const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-      const seconds = val % 60;
-      this.currTime =
-        filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
-      if (val <= 0) {
-        clearInterval(this.interval);
-        this.interval = null;
-      }
-      function filteTime (time) {
-        if (time < 10) {
-          return "0" + time;
-        } else {
-          return time;
-        }
-      }
-    },
-  },
-  methods: {
-    getListByDay () {
-      // 当天秒杀活动
-      seckillByDay().then((res) => {
-        if (res.success) {
-          this.list = res.result;
-          this.goodsList = this.list[0].seckillGoodsList;
-          this.countDown(this.currIndex);
-        }
-      });
-    },
-    goGoodsDetail (skuId, goodsId) {
-      // 跳转商品详情
-      let routeUrl = this.$router.resolve({
-        path: "/goodsDetail",
-        query: { skuId, goodsId },
-      });
-      window.open(routeUrl.href, "_blank");
-    },
-    // 已售占比。没有库存时按售罄展示
-    salePercent (item) {
-      if (!item.quantity || item.quantity <= 0) return 100;
-      return Math.min(100, Math.ceil((item.salesNum / item.quantity) * 100));
-    },
-    // 场次已开始，且销量达到库存
-    isSoldOut (item) {
-      return this.nowHour >= this.list[this.currIndex].timeLine && item.quantity <= item.salesNum;
-    },
-    // 场次已开始且未售罄才可抢
-    canBuy (item) {
-      return this.nowHour >= this.list[this.currIndex].timeLine && !this.isSoldOut(item);
-    },
-    // 按钮文案：未开始 / 已售罄 / 立即抢购
-    buyText (item) {
-      if (this.nowHour < this.list[this.currIndex].timeLine) return "即将开始";
-      if (this.isSoldOut(item)) return "已售罄";
-      return "立即抢购";
-    },
-    countDown (currIndex) {
-      // 倒计时
-      // 0点时间戳
-      let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-      let currTime = new Date().getTime();
-      let actTime = 0;
-      let nowHour = new Date().getHours(); // 当前小时数
-      if (this.list[currIndex].timeLine > nowHour) {
-        // 活动未开始
-        actTime = zeroTime + this.list[currIndex].timeLine * 3600 * 1000;
-      } else if (this.list[currIndex].timeLine <= nowHour) {
-        // 活动进行中
-        if (currIndex === this.list.length - 1) {
-          // 如果是最后一个活动，直到24点结束
-          actTime = zeroTime + 24 * 3600 * 1000;
-        } else {
-          actTime = zeroTime + this.list[currIndex + 1].timeLine * 3600 * 1000;
-        }
-      }
-      this.diffSeconds = Math.floor((actTime - currTime) / 1000);
-      this.interval = setInterval(() => {
-        this.diffSeconds--;
-      }, 1000);
-    },
-  },
-  mounted () {
-    this.getListByDay();
-  },
-};
+
+const router = useRouter();
+
+const list = ref([]); // 秒杀时段列表
+const goodsList = ref([]); // 商品列表
+let interval = null; // 定时器
+const currIndex = ref(0); // 当前时间段的下标
+const currTime = ref(0); // 当前显示的倒计时
+const diffSeconds = ref(0); // 倒计时时间戳
+const nowHour = ref(new Date().getHours()); // 当前小时数
+
+watch(currIndex, (val) => {
+  clearInterval(interval);
+  interval = null;
+  nowHour.value = new Date().getHours();
+  countDown(val);
+  goodsList.value = list.value[val].seckillGoodsList;
+});
+
+watch(diffSeconds, (val) => {
+  const hours = Math.floor(val / 3600);
+  // 当前秒数 / 60，向下取整
+  // 获取到所有分钟数 3600 / 60 = 60分钟
+  // 对60取模，超过小时数的分钟数
+  const minutes = Math.floor(val / 60) % 60;
+  // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+  const seconds = val % 60;
+  currTime.value =
+    filteTime(hours) + ":" + filteTime(minutes) + ":" + filteTime(seconds);
+  if (val <= 0) {
+    clearInterval(interval);
+    interval = null;
+  }
+  function filteTime (time) {
+    if (time < 10) {
+      return "0" + time;
+    } else {
+      return time;
+    }
+  }
+});
+
+function getListByDay () {
+  // 当天秒杀活动
+  seckillByDay().then((res) => {
+    if (res.success) {
+      list.value = res.result;
+      goodsList.value = list.value[0].seckillGoodsList;
+      countDown(currIndex.value);
+    }
+  });
+}
+
+function goGoodsDetail (skuId, goodsId) {
+  // 跳转商品详情
+  let routeUrl = router.resolve({
+    path: "/goodsDetail",
+    query: { skuId, goodsId },
+  });
+  window.open(routeUrl.href, "_blank");
+}
+
+// 已售占比。没有库存时按售罄展示
+function salePercent (item) {
+  if (!item.quantity || item.quantity <= 0) return 100;
+  return Math.min(100, Math.ceil((item.salesNum / item.quantity) * 100));
+}
+
+// 场次已开始，且销量达到库存
+function isSoldOut (item) {
+  return nowHour.value >= list.value[currIndex.value].timeLine && item.quantity <= item.salesNum;
+}
+
+// 场次已开始且未售罄才可抢
+function canBuy (item) {
+  return nowHour.value >= list.value[currIndex.value].timeLine && !isSoldOut(item);
+}
+
+// 按钮文案：未开始 / 已售罄 / 立即抢购
+function buyText (item) {
+  if (nowHour.value < list.value[currIndex.value].timeLine) return "即将开始";
+  if (isSoldOut(item)) return "已售罄";
+  return "立即抢购";
+}
+
+function countDown (currIndex) {
+  // 倒计时
+  // 0点时间戳
+  let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+  let currTime = new Date().getTime();
+  let actTime = 0;
+  let nowHour = new Date().getHours(); // 当前小时数
+  if (list.value[currIndex].timeLine > nowHour) {
+    // 活动未开始
+    actTime = zeroTime + list.value[currIndex].timeLine * 3600 * 1000;
+  } else if (list.value[currIndex].timeLine <= nowHour) {
+    // 活动进行中
+    if (currIndex === list.value.length - 1) {
+      // 如果是最后一个活动，直到24点结束
+      actTime = zeroTime + 24 * 3600 * 1000;
+    } else {
+      actTime = zeroTime + list.value[currIndex + 1].timeLine * 3600 * 1000;
+    }
+  }
+  diffSeconds.value = Math.floor((actTime - currTime) / 1000);
+  interval = setInterval(() => {
+    diffSeconds.value--;
+  }, 1000);
+}
+
+onMounted(() => {
+  getListByDay();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
 </script>
 <style lang="scss" scoped>
 @import "../../assets/styles/goodsList.scss";
diff --git a/buyer/src/pages/shopEntry/FirstApply.vue b/buyer/src/pages/shopEntry/FirstApply.vue
index 4c73c734c..8998932f5 100644
--- a/buyer/src/pages/shopEntry/FirstApply.vue
+++ b/buyer/src/pages/shopEntry/FirstApply.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="company-msg">
     <el-form
-      ref="firstForm"
+      ref="firstFormRef"
       :model="form"
       :rules="rules"
       label-width="140px"
@@ -190,7 +190,8 @@
     <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
-<script>
+<script setup>
+import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import { Message, Notice } from "@/utils/message";
 import { Delete, View } from '@element-plus/icons-vue';
 import { applyFirst } from '@/api/shopentry';
@@ -200,261 +201,259 @@ import storage from '@/plugins/storage';
 import { buyerUrl } from '@/plugins/request.js';
 const FIRST_APPLY_DRAFT_KEY = 'shopEntryFirstDraft';
 
-export default {
-  components: { multipleMap, View, Delete },
-  emits: ['change'],
-  props: {
-    content: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  data () {
-    return {
-      action: buyerUrl + '/buyer/common/upload/file', // 上传地址
-      accessToken: {}, // 验证token
-      visible: false, // 预览图片
-      loading: false, // 加载状态
-
-      previewPicture: '', // 预览图片url
-      form: { // 表单数据
-        companyName: '',
-        companyAddressIdPath: '',
-        companyAddressPath: '',
-        companyAddress: '',
-        employeeNum: '',
-        companyPhone: '',
-        registeredCapital: '',
-        linkName: '',
-        linkPhone: '',
-        companyEmail: '',
-        licenseNum: '',
-        scope: '',
-        legalName: '',
-        legalId: '',
-        legalPhoto: [],
-        licencePhoto: []
-      },
-      rules: { // 验证规则
-        companyName: [{ required: true, message: '请填写公司信息' }],
-        companyAddressIdPath: [{ required: true, message: '请选择公司所在地' }],
-        companyAddress: [{ required: true, message: '请填写公司详细地址' }],
-        employeeNum: [
-          { required: true, message: '请填写公司员工总数' },
-          { pattern: RegExp.integer, message: '只能填写正整数' }
-        ],
-        registeredCapital: [
-          { required: true, message: '请填写公司注册资金' },
-          { pattern: RegExp.integer, message: '只能填写正整数' }
-        ],
-        linkName: [{ required: true, message: '请填写联系人姓名' }],
-        linkPhone: [
-          { required: true, message: '请填写联系人电话' },
-          { pattern: RegExp.mobile, message: '请填写正确的号码' }
-        ],
-        companyPhone: [
-          { required: true, message: '请填写公司电话' },
-          { pattern: RegExp.mobile, message: '请填写正确的号码' }
-        ],
-        companyEmail: [
-          { required: true, message: '请填写电子邮箱' },
-          { type: 'email', message: '请输入正确的邮箱' }
-        ],
-        licenseNum: [
-          { required: true, message: '请填写营业执照号' },
-          { pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
-        ],
-        scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
-        legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
-        licencePhoto: [{ required: true, message: '请上传营业执照' }],
-        legalName: [{ required: true, message: '请输入法人姓名' }],
-        legalId: [
-          { required: true, message: '请输入法人证件号' },
-          { pattern: RegExp.IDCard, message: '请输入正确的证件号' }
-        ]
-      },
-      uploadLoading1: false, // 上传loading
-      uploadLoading: false, // 上传loading
-      contentInitialized: false
-    };
-  },
-  methods: {
-    // 获取店铺地址
-    getAddress(val){
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-        this.form['companyAddressIdPath'] = ids
-        this.form['companyAddressPath'] = paths
-      }else{
-        this.form['companyAddressIdPath'] = val.data.addrId
-        this.form['companyAddressPath'] = val.data.addr
-      }
-    },
-
-    // 下一步
-    next () {
-      this.$refs.firstForm.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          let params = JSON.parse(JSON.stringify(this.form));
-          params.legalPhoto = this.form.legalPhoto.toString();
-          params.licencePhoto = this.normalizeLicencePhoto(this.form.licencePhoto);
-          applyFirst(params)
-            .then((res) => {
-              this.loading = false;
-              if (res.success) {
-                sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
-                this.$emit('change', 1);
-              }
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    },
-
-    // 上传之前
-    beforeUpload (file) {
-      this.uploadLoading = true;
-      if (this.form.licencePhoto.length >= 1) {
-        Message.warning('最多上传一张图片')
-        this.uploadLoading = false;
-        return false;
-      }
-      return this.validateUploadFile(file);
-    },
-    // 上传之前
-    beforeUpload1 (file) {
-      this.uploadLoading1 = true;
-      if (this.form.legalPhoto.length >= 2) {
-        Message.warning('最多上传两张图片')
-        this.uploadLoading1 = false;
-        return false;
-      }
-      return this.validateUploadFile(file);
-    },
-    validateUploadFile (file) {
-      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
-      const isAllowedType = allowedTypes.includes(file.type);
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isAllowedType) {
-        this.uploadLoading = false;
-        this.uploadLoading1 = false;
-        Message.warning('上传文件格式不正确');
-        return false;
-      }
-      if (!isLt2M) {
-        this.uploadLoading = false;
-        this.uploadLoading1 = false;
-        Message.warning('文件大小不能超过2M');
-        return false;
-      }
-      return true;
-    },
-    // 上传成功回调
-    handleSuccess (res, file) {
-      this.uploadLoading = false;
-      this.form.licencePhoto = [res.result];
-    },
-    // 上传成功回调
-    handleSuccess1 (res, file) {
-      this.uploadLoading1 = false;
-      this.form.legalPhoto.push(res.result);
-    },
-    // 上传失败
-    uploadErr () {
-      this.uploadLoading = false;
-      this.uploadLoading1 = false;
-    },
-    // 上传失败回调
-    handleFormatError (file) {
-      this.uploadLoading = false;
-      this.uploadLoading1 = false;
-      Notice.warning({
-        title: 'The file format is incorrect',
-        desc: '上传文件格式不正确'
-      });
-    },
-    // 上传大小限制
-    handleMaxSize (file) {
-      this.uploadLoading = false;
-      this.uploadLoading1 = false;
-      Notice.warning({
-        title: 'Exceeding file size limit',
-        desc: '文件大小不能超过2M'
-      });
-    },
-    // 图片查看
-    handleView (item) {
-      this.previewPicture = item;
-      this.visible = true;
-    },
-    // 删除图片
-    handleRemove (index, listName) {
-      this.form[listName].splice(index, 1);
-    },
-    normalizeLicencePhoto (value) {
-      if (Array.isArray(value)) {
-        return value.length ? value[0] : '';
-      }
-      return value ? String(value).split(',').filter(Boolean)[0] || '' : '';
-    },
-    initFormFromContent(content) {
-      if (!content || !Object.keys(content).length) return;
-      this.form = JSON.parse(JSON.stringify(content));
-      this.form.legalPhoto = content.legalPhoto
-        ? String(content.legalPhoto).split(',').filter(Boolean)
-        : [];
-      this.form.licencePhoto = content.licencePhoto
-        ? String(content.licencePhoto).split(',').filter(Boolean).slice(0, 1)
-        : [];
-      this.contentInitialized = true;
-    },
-    restoreDraft() {
-      const draft = sessionStorage.getItem(FIRST_APPLY_DRAFT_KEY);
-      if (!draft) return;
-      try {
-        const parsed = JSON.parse(draft);
-        this.form = {
-          legalPhoto: [],
-          licencePhoto: [],
-          ...parsed,
-        };
-        this.form.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
-        this.form.licencePhoto = Array.isArray(parsed.licencePhoto)
-          ? parsed.licencePhoto.slice(0, 1)
-          : [];
-      } catch (e) {
-        sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
-      }
-    },
-    saveDraft() {
-      sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(this.form));
-    }
-  },
-  watch: {
-    content: {
-      immediate: true,
-      handler(val) {
-        if (this.contentInitialized || !val || !Object.keys(val).length) return;
-        this.initFormFromContent(val);
-      }
-    }
-  },
-  mounted () {
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    if (Object.keys(this.content).length) {
-      this.initFormFromContent(this.content);
-    } else {
-      this.restoreDraft();
-    }
-  },
-  beforeUnmount() {
-    this.saveDraft();
+const emit = defineEmits(['change']);
+const props = defineProps({
+  content: {
+    default: () => ({}),
+    type: Object
   }
+});
+
+const firstFormRef = ref(null);
+const map = ref(null);
+
+const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
+const accessToken = reactive({}); // 验证token
+const visible = ref(false); // 预览图片
+const loading = ref(false); // 加载状态
+
+const previewPicture = ref(''); // 预览图片url
+const form = ref({ // 表单数据
+  companyName: '',
+  companyAddressIdPath: '',
+  companyAddressPath: '',
+  companyAddress: '',
+  employeeNum: '',
+  companyPhone: '',
+  registeredCapital: '',
+  linkName: '',
+  linkPhone: '',
+  companyEmail: '',
+  licenseNum: '',
+  scope: '',
+  legalName: '',
+  legalId: '',
+  legalPhoto: [],
+  licencePhoto: []
+});
+const rules = { // 验证规则
+  companyName: [{ required: true, message: '请填写公司信息' }],
+  companyAddressIdPath: [{ required: true, message: '请选择公司所在地' }],
+  companyAddress: [{ required: true, message: '请填写公司详细地址' }],
+  employeeNum: [
+    { required: true, message: '请填写公司员工总数' },
+    { pattern: RegExp.integer, message: '只能填写正整数' }
+  ],
+  registeredCapital: [
+    { required: true, message: '请填写公司注册资金' },
+    { pattern: RegExp.integer, message: '只能填写正整数' }
+  ],
+  linkName: [{ required: true, message: '请填写联系人姓名' }],
+  linkPhone: [
+    { required: true, message: '请填写联系人电话' },
+    { pattern: RegExp.mobile, message: '请填写正确的号码' }
+  ],
+  companyPhone: [
+    { required: true, message: '请填写公司电话' },
+    { pattern: RegExp.mobile, message: '请填写正确的号码' }
+  ],
+  companyEmail: [
+    { required: true, message: '请填写电子邮箱' },
+    { type: 'email', message: '请输入正确的邮箱' }
+  ],
+  licenseNum: [
+    { required: true, message: '请填写营业执照号' },
+    { pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
+  ],
+  scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
+  legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
+  licencePhoto: [{ required: true, message: '请上传营业执照' }],
+  legalName: [{ required: true, message: '请输入法人姓名' }],
+  legalId: [
+    { required: true, message: '请输入法人证件号' },
+    { pattern: RegExp.IDCard, message: '请输入正确的证件号' }
+  ]
 };
+const uploadLoading1 = ref(false); // 上传loading
+const uploadLoading = ref(false); // 上传loading
+const contentInitialized = ref(false);
+
+// 获取店铺地址
+function getAddress(val){
+  if(val.type === 'select'){
+    const paths = val.data.map(item => item.name).join(',')
+    const ids = val.data.map(item => item.id).join(',')
+    form.value['companyAddressIdPath'] = ids
+    form.value['companyAddressPath'] = paths
+  }else{
+    form.value['companyAddressIdPath'] = val.data.addrId
+    form.value['companyAddressPath'] = val.data.addr
+  }
+}
+
+// 下一步
+function next () {
+  firstFormRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      let params = JSON.parse(JSON.stringify(form.value));
+      params.legalPhoto = form.value.legalPhoto.toString();
+      params.licencePhoto = normalizeLicencePhoto(form.value.licencePhoto);
+      applyFirst(params)
+        .then((res) => {
+          loading.value = false;
+          if (res.success) {
+            sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
+            emit('change', 1);
+          }
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+// 上传之前
+function beforeUpload (file) {
+  uploadLoading.value = true;
+  if (form.value.licencePhoto.length >= 1) {
+    Message.warning('最多上传一张图片')
+    uploadLoading.value = false;
+    return false;
+  }
+  return validateUploadFile(file);
+}
+// 上传之前
+function beforeUpload1 (file) {
+  uploadLoading1.value = true;
+  if (form.value.legalPhoto.length >= 2) {
+    Message.warning('最多上传两张图片')
+    uploadLoading1.value = false;
+    return false;
+  }
+  return validateUploadFile(file);
+}
+function validateUploadFile (file) {
+  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+  const isAllowedType = allowedTypes.includes(file.type);
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isAllowedType) {
+    uploadLoading.value = false;
+    uploadLoading1.value = false;
+    Message.warning('上传文件格式不正确');
+    return false;
+  }
+  if (!isLt2M) {
+    uploadLoading.value = false;
+    uploadLoading1.value = false;
+    Message.warning('文件大小不能超过2M');
+    return false;
+  }
+  return true;
+}
+// 上传成功回调
+function handleSuccess (res, file) {
+  uploadLoading.value = false;
+  form.value.licencePhoto = [res.result];
+}
+// 上传成功回调
+function handleSuccess1 (res, file) {
+  uploadLoading1.value = false;
+  form.value.legalPhoto.push(res.result);
+}
+// 上传失败
+function uploadErr () {
+  uploadLoading.value = false;
+  uploadLoading1.value = false;
+}
+// 上传失败回调
+function handleFormatError (file) {
+  uploadLoading.value = false;
+  uploadLoading1.value = false;
+  Notice.warning({
+    title: 'The file format is incorrect',
+    desc: '上传文件格式不正确'
+  });
+}
+// 上传大小限制
+function handleMaxSize (file) {
+  uploadLoading.value = false;
+  uploadLoading1.value = false;
+  Notice.warning({
+    title: 'Exceeding file size limit',
+    desc: '文件大小不能超过2M'
+  });
+}
+// 图片查看
+function handleView (item) {
+  previewPicture.value = item;
+  visible.value = true;
+}
+// 删除图片
+function handleRemove (index, listName) {
+  form.value[listName].splice(index, 1);
+}
+function normalizeLicencePhoto (value) {
+  if (Array.isArray(value)) {
+    return value.length ? value[0] : '';
+  }
+  return value ? String(value).split(',').filter(Boolean)[0] || '' : '';
+}
+function initFormFromContent(content) {
+  if (!content || !Object.keys(content).length) return;
+  form.value = JSON.parse(JSON.stringify(content));
+  form.value.legalPhoto = content.legalPhoto
+    ? String(content.legalPhoto).split(',').filter(Boolean)
+    : [];
+  form.value.licencePhoto = content.licencePhoto
+    ? String(content.licencePhoto).split(',').filter(Boolean).slice(0, 1)
+    : [];
+  contentInitialized.value = true;
+}
+function restoreDraft() {
+  const draft = sessionStorage.getItem(FIRST_APPLY_DRAFT_KEY);
+  if (!draft) return;
+  try {
+    const parsed = JSON.parse(draft);
+    form.value = {
+      legalPhoto: [],
+      licencePhoto: [],
+      ...parsed,
+    };
+    form.value.legalPhoto = Array.isArray(parsed.legalPhoto) ? parsed.legalPhoto : [];
+    form.value.licencePhoto = Array.isArray(parsed.licencePhoto)
+      ? parsed.licencePhoto.slice(0, 1)
+      : [];
+  } catch (e) {
+    sessionStorage.removeItem(FIRST_APPLY_DRAFT_KEY);
+  }
+}
+function saveDraft() {
+  sessionStorage.setItem(FIRST_APPLY_DRAFT_KEY, JSON.stringify(form.value));
+}
+
+watch(
+  () => props.content,
+  (val) => {
+    if (contentInitialized.value || !val || !Object.keys(val).length) return;
+    initFormFromContent(val);
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  accessToken.accessToken = storage.getItem('accessToken');
+  if (Object.keys(props.content).length) {
+    initFormFromContent(props.content);
+  } else {
+    restoreDraft();
+  }
+});
+
+onBeforeUnmount(() => {
+  saveDraft();
+});
 </script>
 <style lang="scss" scoped>
 h4 {
diff --git a/buyer/src/pages/shopEntry/SecondApply.vue b/buyer/src/pages/shopEntry/SecondApply.vue
index 5c682e913..65ef90ab1 100644
--- a/buyer/src/pages/shopEntry/SecondApply.vue
+++ b/buyer/src/pages/shopEntry/SecondApply.vue
@@ -40,60 +40,58 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
 import { applySecond } from '@/api/shopentry';
-export default {
-  emits: ['change'],
-  props: {
-    content: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  data () {
-    return {
-      loading: false, // 加载状态
-      form: {}, // 表单数据
-      rules: { // 验证规则
-        settlementBankAccountName: [
-          { required: true, message: '请填写银行开户名称' }
-        ],
-        settlementBankAccountNum: [
-          { required: true, message: '请填写银行账号' }
-        ],
-        settlementBankBranchName: [
-          { required: true, message: '请填写开户银行支行名称' }
-        ],
-        settlementBankJointName: [
-          { required: true, message: '请填写支行联行号' }
-        ]
-      }
-    };
-  },
-  methods: {
-    // 下一步
-    next () {
-      this.$refs.secondForm.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          applySecond(this.form)
-            .then((res) => {
-              this.loading = false;
-              if (res.success) this.$emit('change', 2);
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    }
-  },
-  mounted () {
-    if (this.content && Object.keys(this.content).length) {
-      this.form = JSON.parse(JSON.stringify(this.content));
-    }
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+  content: {
+    default: () => ({}),
+    type: Object
   }
+});
+
+const secondForm = ref(null);
+const loading = ref(false); // 加载状态
+const form = reactive({}); // 表单数据
+const rules = { // 验证规则
+  settlementBankAccountName: [
+    { required: true, message: '请填写银行开户名称' }
+  ],
+  settlementBankAccountNum: [
+    { required: true, message: '请填写银行账号' }
+  ],
+  settlementBankBranchName: [
+    { required: true, message: '请填写开户银行支行名称' }
+  ],
+  settlementBankJointName: [
+    { required: true, message: '请填写支行联行号' }
+  ]
 };
+
+// 下一步
+function next() {
+  secondForm.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      applySecond(form)
+        .then((res) => {
+          loading.value = false;
+          if (res.success) emit('change', 2);
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+onMounted(() => {
+  if (props.content && Object.keys(props.content).length) {
+    Object.assign(form, JSON.parse(JSON.stringify(props.content)));
+  }
+});
 </script>
 <style lang="scss" scoped>
 h4 {
diff --git a/buyer/src/pages/shopEntry/ShopEntry.vue b/buyer/src/pages/shopEntry/ShopEntry.vue
index 3152d235d..24d631770 100644
--- a/buyer/src/pages/shopEntry/ShopEntry.vue
+++ b/buyer/src/pages/shopEntry/ShopEntry.vue
@@ -56,139 +56,134 @@
     </el-dialog>
   </div>
 </template>
-<script>
-
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { agreement, applyStatus } from "@/api/shopentry";
 import firstApply from "./FirstApply";
 import secondApply from "./SecondApply";
 import thirdApply from "./ThirdApply";
-export default {
-  components: {
-    firstApply,
-    secondApply,
-    thirdApply,
-  },
-  data() {
-    return {
-      currentIndex: 0, // 当前步骤
-      showAgreement: false, // 协议显示
-      agreementCon: "", // 协议内容
-      checked: false, // 选中协议
-      firstData: {}, // 第一步数据
-      secondData: {}, // 第二步数据
-      thirdData: {}, // 第三步数据
-      storeDisable: "", // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
-      initLoading: true,
-      agreementAccepted: false, // 是否已同意入驻协议
-    };
-  },
-  methods: {
-    confirmAgreement() {
-      this.agreementAccepted = true;
-      this.showAgreement = false;
-      sessionStorage.setItem("shopEntryAgreementAccepted", "1");
-    },
-    assignApplyData(data) {
-      const first = [
-        "companyAddressPath",
-        "companyAddress",
-        "companyAddressIdPath",
-        "companyEmail",
-        "companyName",
-        "employeeNum",
-        "companyPhone",
-        "legalId",
-        "legalName",
-        "licencePhoto",
-        "legalPhoto",
-        "licenseNum",
-        "linkName",
-        "linkPhone",
-        "registeredCapital",
-        "scope",
-      ];
-      const second = [
-        "settlementBankAccountName",
-        "settlementBankAccountNum",
-        "settlementBankBranchName",
-        "settlementBankJointName",
-      ];
-      const third = [
-        "goodsManagementCategory",
-        "storeCenter",
-        "storeDesc",
-        "storeLogo",
-        "storeName",
-        "storeAddressIdPath",
-        "storeAddressPath",
-        "storeAddressDetail",
-      ];
 
-      this.storeDisable = data.storeDisable || "";
-      Object.assign(this.firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
-      Object.assign(this.secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
-      Object.assign(this.thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
-    },
-    getArticle() {
-      // 入驻协议：库中无 STORE_REGISTER 文章时 result 为 null，不能直接读 content
-      agreement().then((res) => {
-        this.agreementCon = res.result?.content || "";
-      });
-    },
-    getData(status) {
-      applyStatus().then((res) => {
-        if (!res.success) {
-          return;
-        }
-        if (!res.result) {
-          if (status === "init" && !this.agreementAccepted) {
-            this.showAgreement = true;
-          }
-          return;
-        }
+const currentIndex = ref(0); // 当前步骤
+const showAgreement = ref(false); // 协议显示
+const agreementCon = ref(""); // 协议内容
+const checked = ref(false); // 选中协议
+const firstData = reactive({}); // 第一步数据
+const secondData = reactive({}); // 第二步数据
+const thirdData = reactive({}); // 第三步数据
+const storeDisable = ref(""); // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
+const initLoading = ref(true);
+const agreementAccepted = ref(false); // 是否已同意入驻协议
 
-        this.assignApplyData(res.result);
-        if (status === "init") {
-          this.agreementAccepted = true;
-          sessionStorage.setItem("shopEntryAgreementAccepted", "1");
-          if (this.storeDisable === "APPLY") {
-            this.currentIndex = 0;
-          } else {
-            this.currentIndex = 3;
-          }
-        }
-      }).finally(() => {
-        if (status === "init") {
-          this.initLoading = false;
-        }
-      });
-    },
-    refreshApplyData() {
-      return applyStatus().then((res) => {
-        if (res.success && res.result) {
-          this.assignApplyData(res.result);
-        }
-      }).catch((err) => {
-        console.warn('获取入驻申请状态失败', err);
-      });
-    },
-    // 下一步：先拉最新申请数据，再切步骤，避免第三步挂载后再改 content 触发校验
-    async nextPage(step) {
-      if (typeof step !== "number") return;
-      if (step > 0 && step <= 3) {
-        await this.refreshApplyData();
+function confirmAgreement() {
+  agreementAccepted.value = true;
+  showAgreement.value = false;
+  sessionStorage.setItem("shopEntryAgreementAccepted", "1");
+}
+
+function assignApplyData(data) {
+  const first = [
+    "companyAddressPath",
+    "companyAddress",
+    "companyAddressIdPath",
+    "companyEmail",
+    "companyName",
+    "employeeNum",
+    "companyPhone",
+    "legalId",
+    "legalName",
+    "licencePhoto",
+    "legalPhoto",
+    "licenseNum",
+    "linkName",
+    "linkPhone",
+    "registeredCapital",
+    "scope",
+  ];
+  const second = [
+    "settlementBankAccountName",
+    "settlementBankAccountNum",
+    "settlementBankBranchName",
+    "settlementBankJointName",
+  ];
+  const third = [
+    "goodsManagementCategory",
+    "storeCenter",
+    "storeDesc",
+    "storeLogo",
+    "storeName",
+    "storeAddressIdPath",
+    "storeAddressPath",
+    "storeAddressDetail",
+  ];
+
+  storeDisable.value = data.storeDisable || "";
+  Object.assign(firstData, Object.fromEntries(first.map((key) => [key, data[key]])));
+  Object.assign(secondData, Object.fromEntries(second.map((key) => [key, data[key]])));
+  Object.assign(thirdData, Object.fromEntries(third.map((key) => [key, data[key]])));
+}
+
+function getArticle() {
+  // 入驻协议：库中无 STORE_REGISTER 文章时 result 为 null，不能直接读 content
+  agreement().then((res) => {
+    agreementCon.value = res.result?.content || "";
+  });
+}
+
+function getData(status) {
+  applyStatus().then((res) => {
+    if (!res.success) {
+      return;
+    }
+    if (!res.result) {
+      if (status === "init" && !agreementAccepted.value) {
+        showAgreement.value = true;
       }
-      this.currentIndex = step;
-    },
-  },
-  created() {
-    this.agreementAccepted = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
-  },
-  mounted() {
-    this.getData("init");
-    this.getArticle();
-  },
-};
+      return;
+    }
+
+    assignApplyData(res.result);
+    if (status === "init") {
+      agreementAccepted.value = true;
+      sessionStorage.setItem("shopEntryAgreementAccepted", "1");
+      if (storeDisable.value === "APPLY") {
+        currentIndex.value = 0;
+      } else {
+        currentIndex.value = 3;
+      }
+    }
+  }).finally(() => {
+    if (status === "init") {
+      initLoading.value = false;
+    }
+  });
+}
+
+function refreshApplyData() {
+  return applyStatus().then((res) => {
+    if (res.success && res.result) {
+      assignApplyData(res.result);
+    }
+  }).catch((err) => {
+    console.warn('获取入驻申请状态失败', err);
+  });
+}
+
+// 下一步：先拉最新申请数据，再切步骤，避免第三步挂载后再改 content 触发校验
+async function nextPage(step) {
+  if (typeof step !== "number") return;
+  if (step > 0 && step <= 3) {
+    await refreshApplyData();
+  }
+  currentIndex.value = step;
+}
+
+// 初始化（原 created 钩子逻辑）
+agreementAccepted.value = sessionStorage.getItem("shopEntryAgreementAccepted") === "1";
+
+onMounted(() => {
+  getData("init");
+  getArticle();
+});
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/buyer/src/pages/shopEntry/ThirdApply.vue b/buyer/src/pages/shopEntry/ThirdApply.vue
index 4860df5ef..9da97a5bd 100644
--- a/buyer/src/pages/shopEntry/ThirdApply.vue
+++ b/buyer/src/pages/shopEntry/ThirdApply.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="person-msg">
-    <el-form ref="thirdForm" :model="form" :rules="rules" label-width="140px">
+    <el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px">
       <h4>基础信息</h4>
       <el-form-item prop="storeName" label="店铺名称">
         <el-input
@@ -92,7 +92,8 @@
     <multipleMap ref="map" @callback="getAddress" />
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { Message } from "@/utils/message";
 import { Delete, View } from '@element-plus/icons-vue';
 import { applyThird } from '@/api/shopentry';
@@ -105,188 +106,184 @@ import { buyerUrl } from '@/plugins/request.js';
 import multipleMap from "@/components/map/multiple-map";
 
 
-export default {
-  emits: ['change'],
-  props: {
-    content: {
-      default: () => ({}),
-      type: Object
-    }
-  },
-  components: { multipleMap, View, Delete },
-  data () {
-    return {
-      loading: false, // 加载状态
-      uploadLoading: false, // 上传加载状态
-      action: buyerUrl + '/buyer/common/upload/file', // 上传地址
-      accessToken: {}, // 验证token
-      previewPicture: '', // 预览图片
+const emit = defineEmits(['change']);
 
-      visible: false, // 图片预览
-      form: { // 表单数据
-        storeLogo: [],
-        goodsManagementCategory: [],
-        storeName: "",
-        storeAddressDetail: "",
-        storeDesc: "",
-        storeAddressIdPath: "",
-        storeAddressPath: "",
-        storeCenter: "",
-      },
-      rules: { // 验证规则
-        goodsManagementCategory: [
-          { required: true, message: '请选择店铺经营类目' }
-        ],
-        storeName: [{ required: true, message: '请填写店铺名称' }],
-        storeLogo: [{ required: true, message: '请上传店铺logo' }],
-        storeDesc: [{ required: true, message: '请填写店铺简介' }],
-        storeCenter: [{ required: true, message: '请选择店铺位置' }],
-        storeAddressIdPath: [{ required: true, message: '请选择店铺位置' }],
-        storeAddressDetail: [{ required: true, message: '请输入店铺详细地址' }]
-      },
-      categoryList: [] // 分类数据
-    };
-  },
-  methods: {
-    // 下一步
-    next () {
-      this.$refs.thirdForm.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          let params = JSON.parse(JSON.stringify(this.form));
-          params.storeLogo = this.form.storeLogo.toString();
-          params.goodsManagementCategory = this.form.goodsManagementCategory.toString();
-          applyThird(params)
-            .then((res) => {
-              this.loading = false;
-              if (res.success) this.$emit('change', 3);
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    },
-    // 上传之前
-    beforeUpload (file) {
-      this.uploadLoading = true;
-      if (this.form.storeLogo.length >= 1) {
-        Message.warning('最多上传一张图片')
-        this.uploadLoading = false;
-        return false;
-      }
-      return this.validateUploadFile(file);
-    },
-    validateUploadFile (file) {
-      const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
-      const isAllowedType = allowedTypes.includes(file.type);
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isAllowedType) {
-        this.uploadLoading = false;
-        Message.warning('上传文件格式不正确');
-        return false;
-      }
-      if (!isLt2M) {
-        this.uploadLoading = false;
-        Message.warning('文件大小不能超过2M');
-        return false;
-      }
-      return true;
-    },
-    // 上传成功回调
-    handleSuccess (res, file) {
-      this.uploadLoading = false;
-      this.form.storeLogo = [res.result];
-    },
-    // 上传失败
-    uploadErr () {
-      this.uploadLoading = false;
-    },
-    // 查看图片
-    handleView (item) {
-      this.previewPicture = item;
-      this.visible = true;
-    },
-    // 删除图片
-    handleRemove (index, listName) {
-      this.form[listName].splice(index, 1);
-    },
-    // 选择坐标回调
-    getAddress (val) {
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-        this.form["storeAddressPath"] = paths;
-        this.form["storeAddressIdPath"] = ids;
-        this.form.storeCenter = val.data[val.data.length - 1].center
-      }else{
-        this.form["storeAddressPath"] = val.data.addr;
-        this.form["storeAddressIdPath"] = val.data.addrId;
-        
-          this.form['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
-        ;
-      }
-    },
-    // 获取商品分类
-    getCategoryList () {
-      getCategory(0).then((res) => {
-        if (res.success) {
-          this.categoryList = res.result || [];
-          this.syncCategorySelection();
-        }
-      });
-    },
-    normalizeCategoryId (id) {
-      return id == null ? '' : String(id);
-    },
-    syncCategorySelection () {
-      if (!Array.isArray(this.form.goodsManagementCategory)) {
-        this.form.goodsManagementCategory = [];
-        return;
-      }
-      this.form.goodsManagementCategory = this.form.goodsManagementCategory.map(
-        (id) => this.normalizeCategoryId(id)
-      );
-    },
-    createEmptyForm () {
-      return {
-        storeLogo: [],
-        goodsManagementCategory: [],
-        storeName: "",
-        storeAddressDetail: "",
-        storeDesc: "",
-        storeAddressIdPath: "",
-        storeAddressPath: "",
-        storeCenter: "",
-      };
-    },
-    initFormFromContent (content) {
-      const src = content && Object.keys(content).length
-        ? JSON.parse(JSON.stringify(content))
-        : {};
-      this.form = {
-        ...this.createEmptyForm(),
-        ...src,
-      };
-      this.form.storeLogo = src.storeLogo
-        ? String(src.storeLogo).split(",").filter(Boolean)
-        : [];
-      this.form.goodsManagementCategory = src.goodsManagementCategory
-        ? String(src.goodsManagementCategory).split(",").filter(Boolean)
-        : [];
-      ["storeName", "storeAddressDetail", "storeDesc", "storeAddressIdPath", "storeAddressPath", "storeCenter"].forEach((key) => {
-        if (this.form[key] == null) this.form[key] = "";
-      });
-    },
-  },
-  created () {
-    this.initFormFromContent(this.content);
-  },
-  mounted () {
-    this.accessToken.accessToken = storage.getItem('accessToken');
-    this.getCategoryList();
+const props = defineProps({
+  content: {
+    default: () => ({}),
+    type: Object
   }
+});
+
+const thirdFormRef = ref(null);
+
+const loading = ref(false); // 加载状态
+const uploadLoading = ref(false); // 上传加载状态
+const action = buyerUrl + '/buyer/common/upload/file'; // 上传地址
+const accessToken = reactive({}); // 验证token
+const previewPicture = ref(''); // 预览图片
+
+const visible = ref(false); // 图片预览
+const form = ref({ // 表单数据
+  storeLogo: [],
+  goodsManagementCategory: [],
+  storeName: "",
+  storeAddressDetail: "",
+  storeDesc: "",
+  storeAddressIdPath: "",
+  storeAddressPath: "",
+  storeCenter: "",
+});
+const rules = { // 验证规则
+  goodsManagementCategory: [
+    { required: true, message: '请选择店铺经营类目' }
+  ],
+  storeName: [{ required: true, message: '请填写店铺名称' }],
+  storeLogo: [{ required: true, message: '请上传店铺logo' }],
+  storeDesc: [{ required: true, message: '请填写店铺简介' }],
+  storeCenter: [{ required: true, message: '请选择店铺位置' }],
+  storeAddressIdPath: [{ required: true, message: '请选择店铺位置' }],
+  storeAddressDetail: [{ required: true, message: '请输入店铺详细地址' }]
 };
+const categoryList = ref([]); // 分类数据
+
+// 下一步
+function next () {
+  thirdFormRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      let params = JSON.parse(JSON.stringify(form.value));
+      params.storeLogo = form.value.storeLogo.toString();
+      params.goodsManagementCategory = form.value.goodsManagementCategory.toString();
+      applyThird(params)
+        .then((res) => {
+          loading.value = false;
+          if (res.success) emit('change', 3);
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+// 上传之前
+function beforeUpload (file) {
+  uploadLoading.value = true;
+  if (form.value.storeLogo.length >= 1) {
+    Message.warning('最多上传一张图片')
+    uploadLoading.value = false;
+    return false;
+  }
+  return validateUploadFile(file);
+}
+function validateUploadFile (file) {
+  const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+  const isAllowedType = allowedTypes.includes(file.type);
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isAllowedType) {
+    uploadLoading.value = false;
+    Message.warning('上传文件格式不正确');
+    return false;
+  }
+  if (!isLt2M) {
+    uploadLoading.value = false;
+    Message.warning('文件大小不能超过2M');
+    return false;
+  }
+  return true;
+}
+// 上传成功回调
+function handleSuccess (res, file) {
+  uploadLoading.value = false;
+  form.value.storeLogo = [res.result];
+}
+// 上传失败
+function uploadErr () {
+  uploadLoading.value = false;
+}
+// 查看图片
+function handleView (item) {
+  previewPicture.value = item;
+  visible.value = true;
+}
+// 删除图片
+function handleRemove (index, listName) {
+  form.value[listName].splice(index, 1);
+}
+// 选择坐标回调
+function getAddress (val) {
+  if(val.type === 'select'){
+    const paths = val.data.map(item => item.name).join(',')
+    const ids = val.data.map(item => item.id).join(',')
+    form.value["storeAddressPath"] = paths;
+    form.value["storeAddressIdPath"] = ids;
+    form.value.storeCenter = val.data[val.data.length - 1].center
+  }else{
+    form.value["storeAddressPath"] = val.data.addr;
+    form.value["storeAddressIdPath"] = val.data.addrId;
+
+      form.value['storeCenter'] = val.data.position.lng + ',' + val.data.position.lat
+    ;
+  }
+}
+// 获取商品分类
+function getCategoryList () {
+  getCategory(0).then((res) => {
+    if (res.success) {
+      categoryList.value = res.result || [];
+      syncCategorySelection();
+    }
+  });
+}
+function normalizeCategoryId (id) {
+  return id == null ? '' : String(id);
+}
+function syncCategorySelection () {
+  if (!Array.isArray(form.value.goodsManagementCategory)) {
+    form.value.goodsManagementCategory = [];
+    return;
+  }
+  form.value.goodsManagementCategory = form.value.goodsManagementCategory.map(
+    (id) => normalizeCategoryId(id)
+  );
+}
+function createEmptyForm () {
+  return {
+    storeLogo: [],
+    goodsManagementCategory: [],
+    storeName: "",
+    storeAddressDetail: "",
+    storeDesc: "",
+    storeAddressIdPath: "",
+    storeAddressPath: "",
+    storeCenter: "",
+  };
+}
+function initFormFromContent (content) {
+  const src = content && Object.keys(content).length
+    ? JSON.parse(JSON.stringify(content))
+    : {};
+  form.value = {
+    ...createEmptyForm(),
+    ...src,
+  };
+  form.value.storeLogo = src.storeLogo
+    ? String(src.storeLogo).split(",").filter(Boolean)
+    : [];
+  form.value.goodsManagementCategory = src.goodsManagementCategory
+    ? String(src.goodsManagementCategory).split(",").filter(Boolean)
+    : [];
+  ["storeName", "storeAddressDetail", "storeDesc", "storeAddressIdPath", "storeAddressPath", "storeCenter"].forEach((key) => {
+    if (form.value[key] == null) form.value[key] = "";
+  });
+}
+
+initFormFromContent(props.content);
+
+onMounted(() => {
+  accessToken.accessToken = storage.getItem('accessToken');
+  getCategoryList();
+});
 </script>
 <style lang="scss" scoped>
 h4 {
diff --git a/buyer/src/pages/user/Home.vue b/buyer/src/pages/user/Home.vue
index 50f68540f..7cef54be0 100644
--- a/buyer/src/pages/user/Home.vue
+++ b/buyer/src/pages/user/Home.vue
@@ -55,7 +55,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onBeforeUnmount, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import {
   Bell,
   ChatDotRound,
@@ -78,6 +80,12 @@ import {
 import menuList from "./menu";
 import Storage from "@/plugins/storage.js";
 import { refreshUnreadMessage } from "@/utils/unreadMessage";
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "Home" });
+
+const router = useRouter();
+const appStore = useAppStore();
 
 const MENU_ICONS = {
   Bell,
@@ -99,44 +107,35 @@ const MENU_ICONS = {
   Warning,
 };
 
-export default {
-  components: { House, User },
-  name: "Home",
-  data() {
-    return {
-      menuList,
-    };
-  },
-  computed: {
-    userInfo() {
-      if (Storage.getItem("userInfo")) {
-        return JSON.parse(Storage.getItem("userInfo"));
-      }
-      return {};
-    },
-    unreadMsg() {
-      return Number(this.$store.state.unreadMsg) || 0;
-    },
-    unreadLabel() {
-      return this.unreadMsg > 99 ? "99+" : String(this.unreadMsg);
-    },
-  },
-  mounted() {
-    document.body.classList.add("buyer-user-center");
-    refreshUnreadMessage();
-  },
-  beforeUnmount() {
-    document.body.classList.remove("buyer-user-center");
-  },
-  methods: {
-    menuIcon(name) {
-      return MENU_ICONS[name] || Goods;
-    },
-    onSelect(name) {
-      this.$router.push({ name });
-    },
-  },
-};
+const userInfo = computed(() => {
+  if (Storage.getItem("userInfo")) {
+    return JSON.parse(Storage.getItem("userInfo"));
+  }
+  return {};
+});
+
+const unreadMsg = computed(() => appStore.unreadMsg);
+
+const unreadLabel = computed(() => {
+  return unreadMsg.value > 99 ? "99+" : String(unreadMsg.value);
+});
+
+function menuIcon(name) {
+  return MENU_ICONS[name] || Goods;
+}
+
+function onSelect(name) {
+  router.push({ name });
+}
+
+onMounted(() => {
+  document.body.classList.add("buyer-user-center");
+  refreshUnreadMessage();
+});
+
+onBeforeUnmount(() => {
+  document.body.classList.remove("buyer-user-center");
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/buyer/src/plugins/request.js b/buyer/src/plugins/request.js
index 6c546e328..d4a3ce8b3 100644
--- a/buyer/src/plugins/request.js
+++ b/buyer/src/plugins/request.js
@@ -3,7 +3,7 @@ import { ElLoading } from "element-plus";
 import { Message, Modal } from "@/utils/message";
 import Storage from "./storage";
 import { router } from "../router/index.js";
-import store from "../vuex/store";
+import { useAppStore } from "@/stores/app";
 import { handleRefreshToken } from "@/api/index";
 import { v4 as uuidv4 } from "uuid";
 
@@ -125,7 +125,7 @@ async function refresh(error) {
   Storage.removeItem("refreshToken");
   Storage.removeItem("userInfo");
   Storage.setItem("cartNum", 0);
-  store.commit("SET_CARTNUM", 0);
+  useAppStore().setCartNum(0);
   const currentRoute = router.currentRoute.value;
   Modal.confirm({
     title: "请登录",
diff --git a/buyer/src/stores/app.js b/buyer/src/stores/app.js
new file mode 100644
index 000000000..10b8b541c
--- /dev/null
+++ b/buyer/src/stores/app.js
@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+import storage from "@/plugins/storage.js";
+import defaultLogo from "@/assets/images/logo2.png";
+
+export const useAppStore = defineStore("app", {
+  state: () => ({
+    navList: [],
+    cartNum: storage.getItem("cartNum") || 0,
+    unreadMsg: 0,
+    logoImg: storage.getItem("logoImg") || defaultLogo,
+    siteName: storage.getItem("siteName") || "lilishop",
+    hotWordsList: storage.getItem("hotWordsList"),
+    category: (() => {
+      try {
+        const raw = localStorage.getItem("category");
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    })(),
+  }),
+  actions: {
+    setCategory(data) {
+      this.category = data;
+    },
+    setNavList(data) {
+      this.navList = data;
+    },
+    setCartNum(data) {
+      this.cartNum = data;
+    },
+    setUnreadMsg(data) {
+      this.unreadMsg = Number(data) || 0;
+    },
+    setHotWords(data) {
+      this.hotWordsList = data;
+    },
+    setLogoImg(data) {
+      this.logoImg = data;
+    },
+    setSiteName(data) {
+      this.siteName = data;
+    },
+  },
+});
diff --git a/buyer/src/utils/unreadMessage.js b/buyer/src/utils/unreadMessage.js
index 5510d8de6..1ac21d88a 100644
--- a/buyer/src/utils/unreadMessage.js
+++ b/buyer/src/utils/unreadMessage.js
@@ -1,11 +1,11 @@
-import store from "@/vuex/store";
+import { useAppStore } from "@/stores/app";
 import storage from "@/plugins/storage";
 import { memberMsgList } from "@/api/member";
 
 // 用未读消息总数刷新角标，只取 1 条记录
 export function refreshUnreadMessage() {
   if (!storage.getItem("userInfo")) {
-    store.commit("SET_UNREAD_MSG", 0);
+    useAppStore().setUnreadMsg(0);
     return Promise.resolve(0);
   }
   return memberMsgList({
@@ -15,10 +15,10 @@ export function refreshUnreadMessage() {
   })
     .then((res) => {
       const total = res && res.success ? Number(res.result && res.result.total) || 0 : 0;
-      store.commit("SET_UNREAD_MSG", total);
+      useAppStore().setUnreadMsg(total);
       return total;
     })
     .catch(() => {
-      return Number(store.state.unreadMsg) || 0;
+      return Number(useAppStore().unreadMsg) || 0;
     });
 }
diff --git a/buyer/src/vuex/actions.js b/buyer/src/vuex/actions.js
deleted file mode 100644
index 8b1378917..000000000
--- a/buyer/src/vuex/actions.js
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/buyer/src/vuex/getters.js b/buyer/src/vuex/getters.js
deleted file mode 100644
index e69de29bb..000000000
diff --git a/buyer/src/vuex/mutations.js b/buyer/src/vuex/mutations.js
deleted file mode 100644
index 430ec0ba7..000000000
--- a/buyer/src/vuex/mutations.js
+++ /dev/null
@@ -1,23 +0,0 @@
-
-// 全部商品分类
-export const SET_CATEGORY = (state, data) => {
-  state.category = data
-}
-export const SET_NAVLIST = (state, data) => {
-  state.navList = data
-}
-export const SET_CARTNUM = (state, data) => {
-  state.cartNum = data
-}
-export const SET_UNREAD_MSG = (state, data) => {
-  state.unreadMsg = Number(data) || 0
-}
-export const SET_HOTWORDS = (state, data) => {
-  state.hotWordsList = data
-}
-export const SET_LOGOIMG = (state, data) => {
-  state.logoImg = data
-}
-export const SET_SITENAME = (state, data) => {
-  state.siteName = data
-}
\ No newline at end of file
diff --git a/buyer/src/vuex/store.js b/buyer/src/vuex/store.js
deleted file mode 100644
index e9775d812..000000000
--- a/buyer/src/vuex/store.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { createStore } from "vuex";
-import * as actions from "./actions";
-import * as mutations from "./mutations";
-import storage from "@/plugins/storage.js";
-import defaultLogo from "@/assets/images/logo2.png";
-
-export default createStore({
-  state: {
-    navList: [],
-    cartNum: storage.getItem("cartNum") || 0,
-    unreadMsg: 0,
-    logoImg: storage.getItem("logoImg") || defaultLogo,
-    siteName: storage.getItem("siteName") || "lilishop",
-    hotWordsList: storage.getItem("hotWordsList"),
-    category: (() => {
-      try {
-        const raw = localStorage.getItem("category");
-        return raw ? JSON.parse(raw) : null;
-      } catch {
-        return null;
-      }
-    })(),
-  },
-  actions,
-  mutations,
-});
diff --git a/im/MIGRATION-VUE3.md b/im/MIGRATION-VUE3.md
index c66def98c..665233812 100644
--- a/im/MIGRATION-VUE3.md
+++ b/im/MIGRATION-VUE3.md
@@ -2,11 +2,21 @@
 
 ## 技术栈
 
-- Vue 3.5 + Vue Router 4 + Vuex 4
+- Vue 3.5 + Vue Router 4 + Pinia 4
 - Element Plus（替代 element-ui）
 - 自研右键菜单 `src/plugins/contextmenu.js`（替代 vue-contextmenujs）
 - `vue-virtual-scroller@3`、`vue-cropper@1.x`、`vue-prism-editor@2.0.0-alpha.2`
 
+## 组合式 API 迁移（2026-10 完成）
+
+全部 53 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，并完成 vuex → pinia：
+
+- **状态管理**：`src/stores/` 下 8 个 store（app/user/talk/notify/settings/emoticon/dialogue/note），对应原 vuex 根 state + 7 个模块；mutation 全部转为同名 SCREAMING_CASE action。原 `src/store/` 已删除。
+- **全局 mixin 保留**：`main.js` 的 `app.mixin(MainMixin)` 依然生效（对 `<script setup>` 组件同样注入），mixin 内部已改用 pinia。**注意**：mixin 经 `this` 回调组件成员时，`<script setup>` 的绑定不会出现在公共实例上——`views/message/index.vue` 采用了 ctx 桥接（`Object.defineProperties(instance.ctx, ...)`）方案，后续若有组件被全局 mixin 回调需用同样方案。
+- **socket 事件层**（`im-server/event/*`、`plugins/ws-socket.js`、`utils/talk.js` 等纯 JS）：vuex 引用全部改为函数内部 `useXxxStore()`。
+- **$user() 名片弹层**（`components/user/user-card/index.js`）：独立子 app 改用独立 `createPinia()`。
+- **app-bridge.js**：保留了 `$store.state.talks.items` 兼容门面（惰性 getter），供旧调用形态使用。
+
 ## 启动
 
 ```bash
diff --git a/im/package.json b/im/package.json
index e5c9ca2ec..3ed03e70e 100644
--- a/im/package.json
+++ b/im/package.json
@@ -20,6 +20,7 @@
     "js-audio-recorder": "^1.0.6",
     "js-base64": "^2.5.1",
     "nprogress": "^0.2.0",
+    "pinia": "^4.0.3",
     "prismjs": "^1.29.0",
     "qs": "^6.9.4",
     "svg-sprite-loader": "^5.0.0",
@@ -27,8 +28,7 @@
     "vue-cropper": "^1.1.1",
     "vue-prism-editor": "2.0.0-alpha.2",
     "vue-router": "^4.6.4",
-    "vue-virtual-scroller": "^3.0.4",
-    "vuex": "^4.1.0"
+    "vue-virtual-scroller": "^3.0.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^5.0.9",
@@ -58,7 +58,9 @@
     "parserOptions": {
       "parser": "babel-eslint"
     },
-    "rules": {}
+    "rules": {
+      "vue/component-api-style": ["warn", ["script-setup"]]
+    }
   },
   "browserslist": [
     "> 1%",
diff --git a/im/src/App.vue b/im/src/App.vue
index 78ad1dc21..223710b67 100644
--- a/im/src/App.vue
+++ b/im/src/App.vue
@@ -3,48 +3,42 @@
     <router-view v-if="showView" />
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import { setRefreshView } from "@/utils/app-bridge";
 
-export default {
-  name: 'App',
-  data () {
-    return {
-      // 用于点击当前页的router时，刷新当前页
-      showView: true,
-      beforeUnload: '',
-      Handler: ''
-    }
-  },
-  methods: {
-    // 刷新当前路由方法
-    refreshView () {
-      this.showView = false
-      this.$nextTick(() => (this.showView = true))
-    },
-    beforeunloadHandler () {
-      this.beforeUnload = new Date().getTime();
-    },
-    // 页面关闭后 重置btnHide
-    unloadHandler (e) {
-      this.Handler = new Date().getTime() - this.beforeUnload;
-      if (this.Handler <= 5) {
-        var storage = window.localStorage;
-        storage.clear()
-        localStorage.setItem('btnHide', 1)
-      }
-    },
-  },
+defineOptions({ name: 'App' });
 
-  mounted () {
-    setRefreshView(this.refreshView.bind(this));
-    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
-    window.addEventListener('unload', e => this.unloadHandler(e))
-  },
-  beforeUnmount () {
-    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
-    window.removeEventListener('unload', e => this.unloadHandler(e))
-  },
+// 用于点击当前页的router时，刷新当前页
+const showView = ref(true);
+let beforeUnload = '';
+let Handler = '';
 
+// 刷新当前路由方法
+function refreshView () {
+  showView.value = false
+  nextTick(() => (showView.value = true))
 }
+function beforeunloadHandler () {
+  beforeUnload = new Date().getTime();
+}
+// 页面关闭后 重置btnHide
+function unloadHandler (e) {
+  Handler = new Date().getTime() - beforeUnload;
+  if (Handler <= 5) {
+    var storage = window.localStorage;
+    storage.clear()
+    localStorage.setItem('btnHide', 1)
+  }
+}
+
+onMounted(() => {
+  setRefreshView(refreshView);
+  window.addEventListener('beforeunload', e => beforeunloadHandler(e))
+  window.addEventListener('unload', e => unloadHandler(e))
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', e => beforeunloadHandler(e))
+  window.removeEventListener('unload', e => unloadHandler(e))
+});
 </script>
diff --git a/im/src/components/chat/TalkCodeBlock.vue b/im/src/components/chat/TalkCodeBlock.vue
index 44b73b446..94695c971 100644
--- a/im/src/components/chat/TalkCodeBlock.vue
+++ b/im/src/components/chat/TalkCodeBlock.vue
@@ -42,171 +42,175 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
 import "prismjs/themes/prism-okaidia.css";
-export default {
-  name: "TalkCodeBlock",
-  components: {
-    PrismEditor,
-  },
-  props: {
-    loadCode: {
-      type: String,
-      default: "",
-    },
-    loadLang: {
-      type: String,
-      default: "",
-    },
-    editMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      language: "",
-      code: "",
-      options: [
-        {
-          value: "css",
-          label: "css",
-        },
-        {
-          value: "less",
-          label: "less",
-        },
-        {
-          value: "javascript",
-          label: "javascript",
-        },
-        {
-          value: "json",
-          label: "json",
-        },
-        {
-          value: "bash",
-          label: "bash",
-        },
-        {
-          value: "c",
-          label: "c",
-        },
-        {
-          value: "cil",
-          label: "cil",
-        },
-        {
-          value: "docker",
-          label: "docker",
-        },
-        {
-          value: "git",
-          label: "git",
-        },
-        {
-          value: "go",
-          label: "go",
-        },
-        {
-          value: "java",
-          label: "java",
-        },
-        {
-          value: "lua",
-          label: "lua",
-        },
-        {
-          value: "nginx",
-          label: "nginx",
-        },
-        {
-          value: "objectivec",
-          label: "objectivec",
-        },
-        {
-          value: "php",
-          label: "php",
-        },
-        {
-          value: "python",
-          label: "python",
-        },
-        {
-          value: "ruby",
-          label: "ruby",
-        },
-        {
-          value: "rust",
-          label: "rust",
-        },
-        {
-          value: "sql",
-          label: "sql",
-        },
-        {
-          value: "swift",
-          label: "swift",
-        },
-        {
-          value: "vim",
-          label: "vim",
-        },
-        {
-          value: "visual-basic",
-          label: "visual-basic",
-        },
-        {
-          value: "shell",
-          label: "shell",
-        },
-      ],
-      isFullScreen: false,
-    };
-  },
-  watch: {
-    loadCode(value) {
-      this.code = value;
-    },
-    loadLang(value) {
-      this.language = value;
-    },
-  },
-  created() {
-    this.code = this.loadCode;
-    this.language = this.loadLang;
-  },
-  methods: {
-    submit() {
-      if (!this.code) {
-        this.$message.error("代码块不能为空...");
-        return false;
-      }
+import { ElMessage } from "@/utils/message";
 
-      if (this.language == "") {
-        this.$message.error("请选择语言");
-        return false;
-      }
+defineOptions({ name: "TalkCodeBlock" });
 
-      if (this.code.length > 10000) {
-        this.$message.error("代码字数不能超过10000字！！！");
-        return false;
-      }
-      this.$emit("confirm", {
-        language: this.language,
-        code: this.code,
-      });
-    },
-    close() {
-      this.$emit("close");
-    },
-    codeChanged(code) {
-      this.code = code;
-    },
+const props = defineProps({
+  loadCode: {
+    type: String,
+    default: "",
   },
-};
+  loadLang: {
+    type: String,
+    default: "",
+  },
+  editMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["confirm", "close"]);
+
+const language = ref("");
+const code = ref("");
+const options = ref([
+  {
+    value: "css",
+    label: "css",
+  },
+  {
+    value: "less",
+    label: "less",
+  },
+  {
+    value: "javascript",
+    label: "javascript",
+  },
+  {
+    value: "json",
+    label: "json",
+  },
+  {
+    value: "bash",
+    label: "bash",
+  },
+  {
+    value: "c",
+    label: "c",
+  },
+  {
+    value: "cil",
+    label: "cil",
+  },
+  {
+    value: "docker",
+    label: "docker",
+  },
+  {
+    value: "git",
+    label: "git",
+  },
+  {
+    value: "go",
+    label: "go",
+  },
+  {
+    value: "java",
+    label: "java",
+  },
+  {
+    value: "lua",
+    label: "lua",
+  },
+  {
+    value: "nginx",
+    label: "nginx",
+  },
+  {
+    value: "objectivec",
+    label: "objectivec",
+  },
+  {
+    value: "php",
+    label: "php",
+  },
+  {
+    value: "python",
+    label: "python",
+  },
+  {
+    value: "ruby",
+    label: "ruby",
+  },
+  {
+    value: "rust",
+    label: "rust",
+  },
+  {
+    value: "sql",
+    label: "sql",
+  },
+  {
+    value: "swift",
+    label: "swift",
+  },
+  {
+    value: "vim",
+    label: "vim",
+  },
+  {
+    value: "visual-basic",
+    label: "visual-basic",
+  },
+  {
+    value: "shell",
+    label: "shell",
+  },
+]);
+const isFullScreen = ref(false);
+
+watch(
+  () => props.loadCode,
+  (value) => {
+    code.value = value;
+  }
+);
+watch(
+  () => props.loadLang,
+  (value) => {
+    language.value = value;
+  }
+);
+
+// created
+code.value = props.loadCode;
+language.value = props.loadLang;
+
+function submit() {
+  if (!code.value) {
+    ElMessage.error("代码块不能为空...");
+    return false;
+  }
+
+  if (language.value == "") {
+    ElMessage.error("请选择语言");
+    return false;
+  }
+
+  if (code.value.length > 10000) {
+    ElMessage.error("代码字数不能超过10000字！！！");
+    return false;
+  }
+  emit("confirm", {
+    language: language.value,
+    code: code.value,
+  });
+}
+
+function close() {
+  emit("close");
+}
+
+function codeChanged(val) {
+  code.value = val;
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/im/src/components/chat/TalkForwardRecord.vue b/im/src/components/chat/TalkForwardRecord.vue
index 821d63ab7..bea466add 100644
--- a/im/src/components/chat/TalkForwardRecord.vue
+++ b/im/src/components/chat/TalkForwardRecord.vue
@@ -77,48 +77,48 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
 import { ServeGetForwardRecords } from '@/api/chat'
 
-export default {
-  name: 'TalkForwardRecord',
-  data() {
-    return {
-      record_id: 0,
-      records: [],
-      loading: false,
-      isShow: false,
-    }
-  },
-  methods: {
-    open(record_id) {
-      if (record_id !== this.record_id) {
-        this.record_id = record_id
-        this.records = []
-        this.loadRecords()
-      }
+defineOptions({ name: 'TalkForwardRecord' })
 
-      this.isShow = true
-    },
-    close() {
-      this.isShow = false
-    },
-    loadRecords() {
-      this.loading = true
-      ServeGetForwardRecords({
-        record_id: this.record_id,
-      })
-        .then(res => {
-          if (res.code == 200) {
-            this.records = res.data.rows
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-  },
+const record_id = ref(0)
+const records = ref([])
+const loading = ref(false)
+const isShow = ref(false)
+
+// 由父组件通过 ref 调用（如 ForwardMessage），必须暴露
+const open = id => {
+  if (id !== record_id.value) {
+    record_id.value = id
+    records.value = []
+    loadRecords()
+  }
+
+  isShow.value = true
 }
+
+const close = () => {
+  isShow.value = false
+}
+
+const loadRecords = () => {
+  loading.value = true
+  ServeGetForwardRecords({
+    record_id: record_id.value,
+  })
+    .then(res => {
+      if (res.code == 200) {
+        records.value = res.data.rows
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+defineExpose({ open })
 </script>
 <style lang="less" scoped>
 .lum-dialog-mask {
diff --git a/im/src/components/chat/TalkSearchRecord.vue b/im/src/components/chat/TalkSearchRecord.vue
index 27197b213..5c8fcf842 100644
--- a/im/src/components/chat/TalkSearchRecord.vue
+++ b/im/src/components/chat/TalkSearchRecord.vue
@@ -211,190 +211,187 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ServeGetContacts } from "@/api/contacts";
 import { ServeFindTalkRecords } from "@/api/chat";
 import { formatSize as renderSize, download, imgZoom } from "@/utils/functions";
+import { ElNotification } from "@/utils/message";
+import { useUserStore } from "@/stores/user";
 
-export default {
-  name: "TalkSearchRecord",
-  props: {
-    params: {
-      type: Object,
-      default: () => {
-        return {
-          talk_type: 0,
-          receiver_id: 0,
-          title: "",
-        };
-      },
-    },
-  },
-  data() {
-    return {
-      fullscreen: false,
+defineOptions({ name: "TalkSearchRecord" });
 
-      user_id: this.$store.state.user.id,
-      title: "",
-
-      // 侧边栏相关信息
-      broadside: false,
-      contacts: {
-        show: "friends",
-        friends: [],
-        groups: [],
-      },
-
-      query: {
+const props = defineProps({
+  params: {
+    type: Object,
+    default: () => {
+      return {
         talk_type: 0,
         receiver_id: 0,
-        msg_type: 0,
-      },
-
-      // 用户聊天记录
-      records: {
-        record_id: 0,
-        items: [],
-        isEmpty: false,
-        loadStatus: 0,
-      },
-
-      showBox: 0,
-
-      tabType: [
-        { name: "全部", type: 0 },
-        { name: "文件", type: 2 },
-        { name: "会话记录", type: 3 },
-        { name: "代码块", type: 4 },
-        { name: "群投票", type: 5 },
-      ],
-
-      search: {
-        keyword: "", // 关键字查询
-        date: "", // 时间查询
-        page: 1, // 当前分页
-        totalPage: 50, // 总分页
-        items: [], // 数据列表
-        isShowDate: false,
-      },
-    };
-  },
-  mounted() {
-    this.title = this.params.title;
-    this.query = {
-      talk_type: this.params.talk_type,
-      receiver_id: this.params.receiver_id,
-      msg_type: 0,
-    };
-
-    this.loadChatRecord(0);
-  },
-  created() {
-    this.loadFriends();
-  },
-  methods: {
-    download,
-    renderSize,
-
-    // 获取图片信息
-    getImgStyle(url) {
-      return imgZoom(url, 200);
-    },
-
-    // 获取会话记录消息名称
-    getForwardTitle(item) {
-      let arr = [...new Set(item.map((v) => v.nickname))];
-      return arr.join("、") + "的会话记录";
-    },
-
-    // 获取好友列表
-    loadFriends() {
-      ServeGetContacts().then(({ code, data }) => {
-        if (code == 200) {
-          this.contacts.friends = data.map((item) => {
-            return {
-              id: item.id,
-              type: 1,
-              avatar: item.avatar,
-              name: item.friend_remark ? item.friend_remark : item.nickname,
-            };
-          });
-        }
-      });
-    },
-
-    // 左侧联系人菜单点击事件
-    triggerMenuItem(item) {
-      this.title = item.name;
-      this.query.talk_type = item.type;
-      this.query.receiver_id = item.id;
-      this.showBox = 0;
-
-      this.triggerLoadType(0);
-    },
-
-    // 加载历史记录
-    loadChatRecord() {
-      let data = {
-        talk_type: this.query.talk_type,
-        receiver_id: this.query.receiver_id,
-        record_id: this.records.record_id,
-        msg_type: this.query.msg_type,
+        title: "",
       };
-
-      if (this.records.loadStatus == 1) return;
-
-      this.records.loadStatus = 1;
-      ServeFindTalkRecords(data)
-        .then((res) => {
-          if (res.code != 200) return;
-
-          let records = data.record_id == 0 ? [] : this.records.items;
-
-          records.push(...res.data.rows);
-
-          this.records.items = records;
-          this.records.loadStatus =
-            res.data.rows.length < res.data.limit ? 2 : 0;
-
-          if (this.records.items.length == 0) {
-            this.records.isEmpty = true;
-          } else {
-            this.records.record_id =
-              this.records.items[this.records.items.length - 1].id;
-          }
-        })
-        .catch(() => {
-          this.records.loadStatus = 0;
-        });
-    },
-
-    triggerLoadType(type) {
-      this.records.record_id = 0;
-      this.query.msg_type = type;
-      this.records.isEmpty = false;
-      this.records.items = [];
-
-      this.loadChatRecord();
-    },
-
-    searchText() {
-      if (this.search.keyword == "") {
-        this.showBox = 0;
-        return false;
-      }
-
-      this.$notify.info({
-        title: "消息",
-        message: "查询功能正在开发中...",
-      });
-    },
-
-    triggerBroadside() {
-      this.broadside = !this.broadside;
     },
   },
-};
+});
+
+const emit = defineEmits(["close"]);
+
+const userStore = useUserStore();
+
+const fullscreen = ref(false);
+
+const user_id = ref(userStore.id);
+const title = ref("");
+
+// 侧边栏相关信息
+const broadside = ref(false);
+const contacts = reactive({
+  show: "friends",
+  friends: [],
+  groups: [],
+});
+
+const query = ref({
+  talk_type: 0,
+  receiver_id: 0,
+  msg_type: 0,
+});
+
+// 用户聊天记录
+const records = reactive({
+  record_id: 0,
+  items: [],
+  isEmpty: false,
+  loadStatus: 0,
+});
+
+const showBox = ref(0);
+
+const tabType = ref([
+  { name: "全部", type: 0 },
+  { name: "文件", type: 2 },
+  { name: "会话记录", type: 3 },
+  { name: "代码块", type: 4 },
+  { name: "群投票", type: 5 },
+]);
+
+const search = reactive({
+  keyword: "", // 关键字查询
+  date: "", // 时间查询
+  page: 1, // 当前分页
+  totalPage: 50, // 总分页
+  items: [], // 数据列表
+  isShowDate: false,
+});
+
+// 获取图片信息
+function getImgStyle(url) {
+  return imgZoom(url, 200);
+}
+
+// 获取会话记录消息名称
+function getForwardTitle(item) {
+  let arr = [...new Set(item.map((v) => v.nickname))];
+  return arr.join("、") + "的会话记录";
+}
+
+// 获取好友列表
+function loadFriends() {
+  ServeGetContacts().then(({ code, data }) => {
+    if (code == 200) {
+      contacts.friends = data.map((item) => {
+        return {
+          id: item.id,
+          type: 1,
+          avatar: item.avatar,
+          name: item.friend_remark ? item.friend_remark : item.nickname,
+        };
+      });
+    }
+  });
+}
+
+// 左侧联系人菜单点击事件
+function triggerMenuItem(item) {
+  title.value = item.name;
+  query.value.talk_type = item.type;
+  query.value.receiver_id = item.id;
+  showBox.value = 0;
+
+  triggerLoadType(0);
+}
+
+// 加载历史记录
+function loadChatRecord() {
+  let data = {
+    talk_type: query.value.talk_type,
+    receiver_id: query.value.receiver_id,
+    record_id: records.record_id,
+    msg_type: query.value.msg_type,
+  };
+
+  if (records.loadStatus == 1) return;
+
+  records.loadStatus = 1;
+  ServeFindTalkRecords(data)
+    .then((res) => {
+      if (res.code != 200) return;
+
+      let items = data.record_id == 0 ? [] : records.items;
+
+      items.push(...res.data.rows);
+
+      records.items = items;
+      records.loadStatus = res.data.rows.length < res.data.limit ? 2 : 0;
+
+      if (records.items.length == 0) {
+        records.isEmpty = true;
+      } else {
+        records.record_id = records.items[records.items.length - 1].id;
+      }
+    })
+    .catch(() => {
+      records.loadStatus = 0;
+    });
+}
+
+function triggerLoadType(type) {
+  records.record_id = 0;
+  query.value.msg_type = type;
+  records.isEmpty = false;
+  records.items = [];
+
+  loadChatRecord();
+}
+
+function searchText() {
+  if (search.keyword == "") {
+    showBox.value = 0;
+    return false;
+  }
+
+  ElNotification.info({
+    title: "消息",
+    message: "查询功能正在开发中...",
+  });
+}
+
+function triggerBroadside() {
+  broadside.value = !broadside.value;
+}
+
+loadFriends();
+
+onMounted(() => {
+  title.value = props.params.title;
+  query.value = {
+    talk_type: props.params.talk_type,
+    receiver_id: props.params.receiver_id,
+    msg_type: 0,
+  };
+
+  loadChatRecord(0);
+});
 </script>
 <style lang="less" scoped>
 :deep(.el-scrollbar__wrap ) {
diff --git a/im/src/components/chat/messaege/AudioMessage.vue b/im/src/components/chat/messaege/AudioMessage.vue
index 265271294..2c75ab05c 100644
--- a/im/src/components/chat/messaege/AudioMessage.vue
+++ b/im/src/components/chat/messaege/AudioMessage.vue
@@ -27,7 +27,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from "vue";
+
+defineOptions({ name: 'AudioMessage' });
+
+defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+});
+
 function formatSeconds(value) {
   var theTime = parseInt(value) // 秒
   var theTime1 = 0 // 分
@@ -59,64 +70,47 @@ function formatSeconds(value) {
   return result
 }
 
-export default {
-  name: 'AudioMessage',
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      loading: true,
-      isPlay: false,
-      duration: 0,
-      currentTime: 0,
-      progress: 0,
-    }
-  },
-  computed: {
-    getTotalDuration() {
-      return formatSeconds(this.duration)
-    },
-    getCurrDuration() {
-      return formatSeconds(this.currentTime)
-    },
-  },
-  methods: {
-    toPlay() {
-      if (this.loading) {
-        return
-      }
+const loading = ref(true)
+const isPlay = ref(false)
+const duration = ref(0)
+const currentTime = ref(0)
+const progress = ref(0)
 
-      let audio = this.$refs.audio
-      if (this.isPlay) {
-        audio.pause()
-      } else {
-        audio.play()
-      }
-      this.isPlay = !this.isPlay
-    },
+const audio = ref(null)
 
-    // 当目前的播放位置已更改时
-    timeupdate() {
-      let audio = this.$refs.audio
-      this.currentTime = audio.currentTime
-      this.progress = (audio.currentTime / audio.duration) * 100
-    },
+const getTotalDuration = computed(() => formatSeconds(duration.value))
+const getCurrDuration = computed(() => formatSeconds(currentTime.value))
 
-    // 当浏览器可以播放音频/视频时
-    canplay() {
-      this.duration = this.$refs.audio.duration
-      this.loading = false
-    },
+function toPlay() {
+  if (loading.value) {
+    return
+  }
 
-    // 当目前的播放列表已结束时
-    ended() {
-      this.isPlay = false
-    },
-  },
+  let audioEl = audio.value
+  if (isPlay.value) {
+    audioEl.pause()
+  } else {
+    audioEl.play()
+  }
+  isPlay.value = !isPlay.value
+}
+
+// 当目前的播放位置已更改时
+function timeupdate() {
+  let audioEl = audio.value
+  currentTime.value = audioEl.currentTime
+  progress.value = (audioEl.currentTime / audioEl.duration) * 100
+}
+
+// 当浏览器可以播放音频/视频时
+function canplay() {
+  duration.value = audio.value.duration
+  loading.value = false
+}
+
+// 当目前的播放列表已结束时
+function ended() {
+  isPlay.value = false
 }
 </script>
 <style scoped lang="less">
diff --git a/im/src/components/chat/messaege/CodeMessage.vue b/im/src/components/chat/messaege/CodeMessage.vue
index b0e5a93cf..b971d58c7 100644
--- a/im/src/components/chat/messaege/CodeMessage.vue
+++ b/im/src/components/chat/messaege/CodeMessage.vue
@@ -20,44 +20,40 @@
     <pre class="lum-scrollbar" v-html="formatCode(code, lang)" />
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
 import Prism from 'prismjs'
 import 'prismjs/themes/prism-okaidia.css'
 
-export default {
-  name: 'CodeMessage',
-  props: {
-    code: {
-      type: [String, Number],
-      default: '',
-    },
-    lang: {
-      type: String,
-      default: '',
-    },
-    maxwidth: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: 'CodeMessage' })
+
+const props = defineProps({
+  code: {
+    type: [String, Number],
+    default: '',
   },
-  data() {
-    return {
-      fullscreen: false,
-      lineNumber: 0,
-    }
+  lang: {
+    type: String,
+    default: '',
   },
-  created() {
-    this.lineNumber = this.code.split(/\n/).length
-  },
-  methods: {
-    formatCode(code, lang) {
-      try {
-        return Prism.highlight(code, Prism.languages[lang], lang) + '<br/>'
-      } catch (error) {
-        return code
-      }
-    },
+  maxwidth: {
+    type: Boolean,
+    default: false,
   },
+})
+
+const fullscreen = ref(false)
+const lineNumber = ref(0)
+
+// created
+lineNumber.value = props.code.split(/\n/).length
+
+function formatCode(code, lang) {
+  try {
+    return Prism.highlight(code, Prism.languages[lang], lang) + '<br/>'
+  } catch (error) {
+    return code
+  }
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/FileMessage.vue b/im/src/components/chat/messaege/FileMessage.vue
index 968e28853..844021a6a 100644
--- a/im/src/components/chat/messaege/FileMessage.vue
+++ b/im/src/components/chat/messaege/FileMessage.vue
@@ -16,39 +16,36 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
 import { formatSize, download } from '@/utils/functions'
-export default {
-  name: 'FileMessage',
-  props: {
-    file: {
-      type: Object,
-      required: true,
-    },
-    record_id: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
+
+defineOptions({ name: 'FileMessage' })
+
+const props = defineProps({
+  file: {
+    type: Object,
+    required: true,
   },
-  data() {
-    return {
-      file_id: 0,
-      ext: '',
-      fileName: '',
-      fileSize: '',
-    }
+  record_id: {
+    type: Number,
+    required: true,
+    default: 0,
   },
-  created() {
-    this.file_id = this.file.id
-    this.ext = this.file.file_suffix.toUpperCase()
-    this.fileName = this.file.original_name
-    this.fileSize = formatSize(this.file.file_size)
-  },
-  methods: {
-    download,
-  },
-}
+})
+
+const file_id = ref(0)
+const ext = ref('')
+const fileName = ref('')
+const fileSize = ref('')
+
+// 原 created 钩子
+file_id.value = props.file.id
+ext.value = props.file.file_suffix.toUpperCase()
+fileName.value = props.file.original_name
+fileSize.value = formatSize(props.file.file_size)
+
+// download 直接从 @/utils/functions 导入，模板中照用
 </script>
 <style lang="less" scoped>
 .file-message {
diff --git a/im/src/components/chat/messaege/ForwardMessage.vue b/im/src/components/chat/messaege/ForwardMessage.vue
index 3243cd548..18d0cafeb 100644
--- a/im/src/components/chat/messaege/ForwardMessage.vue
+++ b/im/src/components/chat/messaege/ForwardMessage.vue
@@ -17,48 +17,44 @@
     <talk-forward-record ref="forwardRecordsRef" />
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
 import TalkForwardRecord from '@/components/chat/TalkForwardRecord'
-export default {
-  name: 'ForwardMessage',
-  components: {
-    TalkForwardRecord,
-  },
-  props: {
-    forward: {
-      type: Object,
-      required: true,
-    },
-    record_id: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      title: '',
-      records: [],
-      num: 0,
-    }
-  },
-  methods: {
-    catForwardRecords() {
-      this.$refs.forwardRecordsRef.open(this.record_id)
-    },
-    getForwardTitle(list) {
-      let arr = [...new Set(list.map(v => v.nickname))]
-      return arr.join('、') + '的会话记录'
-    },
-  },
-  created() {
-    let forward = this.forward
 
-    this.num = forward.num
-    this.records = forward.list
-    this.title = this.getForwardTitle(this.records)
+defineOptions({ name: 'ForwardMessage' })
+
+const props = defineProps({
+  forward: {
+    type: Object,
+    required: true,
   },
+  record_id: {
+    type: Number,
+    required: true,
+    default: 0,
+  },
+})
+
+const forwardRecordsRef = ref(null)
+
+const title = ref('')
+const records = ref([])
+const num = ref(0)
+
+function catForwardRecords() {
+  forwardRecordsRef.value.open(props.record_id)
 }
+
+function getForwardTitle(list) {
+  let arr = [...new Set(list.map(v => v.nickname))]
+  return arr.join('、') + '的会话记录'
+}
+
+let forward = props.forward
+
+num.value = forward.num
+records.value = forward.list
+title.value = getForwardTitle(records.value)
 </script>
 <style lang="less" scoped>
 /* 会话记录消息 */
diff --git a/im/src/components/chat/messaege/FriendApplyMessage.vue b/im/src/components/chat/messaege/FriendApplyMessage.vue
index 4e2c83a82..791c1df2d 100644
--- a/im/src/components/chat/messaege/FriendApplyMessage.vue
+++ b/im/src/components/chat/messaege/FriendApplyMessage.vue
@@ -18,33 +18,30 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'FriendApplyMessage',
-  props: {
-    data: {
-      type: Object,
-      default() {
-        return {}
-      },
-    },
-  },
-  data() {
-    return {
-      avatar:
-        'http://im-img.gzydong.club/media/images/avatar/20210602/60b6f03598ed0104301.png',
-      nickname: '独特态度',
-      datetime: '05/09 12:13 分',
-      remarks: '编辑个签，展示我的独特态度 展示我的独特态度。',
-      apply_id: 0,
-    }
-  },
-  created() {},
-  methods: {
-    handle(type) {
-      alert(type)
+<script setup>
+import { ref } from 'vue'
+
+defineOptions({ name: 'FriendApplyMessage' })
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default() {
+      return {}
     },
   },
+})
+
+const avatar = ref(
+  'http://im-img.gzydong.club/media/images/avatar/20210602/60b6f03598ed0104301.png'
+)
+const nickname = ref('独特态度')
+const datetime = ref('05/09 12:13 分')
+const remarks = ref('编辑个签，展示我的独特态度 展示我的独特态度。')
+const apply_id = ref(0)
+
+function handle(type) {
+  alert(type)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/ImageMessage.vue b/im/src/components/chat/messaege/ImageMessage.vue
index 779f860e2..13ebe3ddd 100644
--- a/im/src/components/chat/messaege/ImageMessage.vue
+++ b/im/src/components/chat/messaege/ImageMessage.vue
@@ -16,21 +16,20 @@
     </el-image>
   </div>
 </template>
-<script>
+<script setup>
 import { imgZoom } from '@/utils/functions'
-export default {
-  name: 'ImageMessage',
-  props: {
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-  methods: {
-    getImgStyle(url) {
-      return imgZoom(url, 200)
-    },
+
+defineOptions({ name: 'ImageMessage' })
+
+defineProps({
+  src: {
+    type: String,
+    default: '',
   },
+})
+
+function getImgStyle(url) {
+  return imgZoom(url, 200)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/InviteMessage.vue b/im/src/components/chat/messaege/InviteMessage.vue
index 476b3eb17..452012fbf 100644
--- a/im/src/components/chat/messaege/InviteMessage.vue
+++ b/im/src/components/chat/messaege/InviteMessage.vue
@@ -20,20 +20,20 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'InviteMessage',
-  props: {
-    invite: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    toUser(user_id) {
-      this.$emit('cat', user_id)
-    },
+<script setup>
+defineOptions({ name: 'InviteMessage' })
+
+defineProps({
+  invite: {
+    type: Object,
+    required: true,
   },
+})
+
+const emit = defineEmits(['cat'])
+
+function toUser(user_id) {
+  emit('cat', user_id)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/LoginMessage.vue b/im/src/components/chat/messaege/LoginMessage.vue
index 3226b6435..7ab711739 100644
--- a/im/src/components/chat/messaege/LoginMessage.vue
+++ b/im/src/components/chat/messaege/LoginMessage.vue
@@ -10,76 +10,72 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { parseTime } from '@/utils/functions'
 
-export default {
-  name: 'LoginMessage',
-  props: {
-    detail: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      datetime: '',
-      ip: '',
-      address: '',
-      platform: '',
-      reason: '常用设备登录',
-    }
-  },
-  created() {
-    this.ip = this.detail.ip
-    this.datetime = parseTime(
-      this.detail.created_at,
-      '{y}年{m}月{d}日 {h}:{i}:{s}'
-    )
-    this.address = this.detail.address
-    this.reason = this.detail.reason
+defineOptions({ name: 'LoginMessage' })
 
-    this.platform =
-      this.getExploreName(this.detail.agent) +
-      ' / ' +
-      this.getExploreOs(this.detail.agent)
+const props = defineProps({
+  detail: {
+    type: Object,
+    required: true,
   },
-  methods: {
-    getExploreName(userAgent = '') {
-      if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
-        return 'Opera'
-      } else if (
-        userAgent.indexOf('compatible') > -1 &&
-        userAgent.indexOf('MSIE') > -1
-      ) {
-        return 'IE'
-      } else if (userAgent.indexOf('Edge') > -1) {
-        return 'Edge'
-      } else if (userAgent.indexOf('Firefox') > -1) {
-        return 'Firefox'
-      } else if (
-        userAgent.indexOf('Safari') > -1 &&
-        userAgent.indexOf('Chrome') == -1
-      ) {
-        return 'Safari'
-      } else if (
-        userAgent.indexOf('Chrome') > -1 &&
-        userAgent.indexOf('Safari') > -1
-      ) {
-        return 'Chrome'
-      } else {
-        return 'Unkonwn'
-      }
-    },
+})
 
-    getExploreOs(userAgent = '') {
-      if (userAgent.indexOf('Mac OS') > -1) {
-        return 'Mac OS'
-      } else {
-        return 'Windows'
-      }
-    },
-  },
+const datetime = ref('')
+const ip = ref('')
+const address = ref('')
+const platform = ref('')
+const reason = ref('常用设备登录')
+
+// 原 created 生命周期逻辑，setup 顶层直接执行
+ip.value = props.detail.ip
+datetime.value = parseTime(
+  props.detail.created_at,
+  '{y}年{m}月{d}日 {h}:{i}:{s}'
+)
+address.value = props.detail.address
+reason.value = props.detail.reason
+
+platform.value =
+  getExploreName(props.detail.agent) +
+  ' / ' +
+  getExploreOs(props.detail.agent)
+
+function getExploreName(userAgent = '') {
+  if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
+    return 'Opera'
+  } else if (
+    userAgent.indexOf('compatible') > -1 &&
+    userAgent.indexOf('MSIE') > -1
+  ) {
+    return 'IE'
+  } else if (userAgent.indexOf('Edge') > -1) {
+    return 'Edge'
+  } else if (userAgent.indexOf('Firefox') > -1) {
+    return 'Firefox'
+  } else if (
+    userAgent.indexOf('Safari') > -1 &&
+    userAgent.indexOf('Chrome') == -1
+  ) {
+    return 'Safari'
+  } else if (
+    userAgent.indexOf('Chrome') > -1 &&
+    userAgent.indexOf('Safari') > -1
+  ) {
+    return 'Chrome'
+  } else {
+    return 'Unkonwn'
+  }
+}
+
+function getExploreOs(userAgent = '') {
+  if (userAgent.indexOf('Mac OS') > -1) {
+    return 'Mac OS'
+  } else {
+    return 'Windows'
+  }
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/ReplyMessage.vue b/im/src/components/chat/messaege/ReplyMessage.vue
index d8fb65fca..4d935edc0 100644
--- a/im/src/components/chat/messaege/ReplyMessage.vue
+++ b/im/src/components/chat/messaege/ReplyMessage.vue
@@ -2,15 +2,10 @@
   <div class="reply-message">这是回复的消息[预留]</div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   name: 'ReplyMessage',
-  data() {
-    return {}
-  },
-  created() {},
-  methods: {},
-}
+})
 </script>
 <style lang="less" scoped>
 .reply-message {
diff --git a/im/src/components/chat/messaege/RevokeMessage.vue b/im/src/components/chat/messaege/RevokeMessage.vue
index 281bb6ca7..c4b6ac527 100644
--- a/im/src/components/chat/messaege/RevokeMessage.vue
+++ b/im/src/components/chat/messaege/RevokeMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="revoke-message">
     <div class="content">
-      <span v-if="$store.state.user.id == item.user_id">
+      <span v-if="userStore.id == item.user_id">
         你撤回了一条消息 | {{ sendTime(item.created_at) }}
       </span>
       <span v-else-if="item.talk_type == 1">
@@ -13,20 +13,21 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { useUserStore } from "@/stores/user";
 import { formatTime as sendTime } from "@/utils/functions";
 
-export default {
+defineOptions({
   name: "RevokeMessage",
-  props: {
-    item: {
-      type: Object,
-    },
+});
+
+const userStore = useUserStore();
+
+defineProps({
+  item: {
+    type: Object,
   },
-  methods: {
-    sendTime,
-  },
-};
+});
 </script>
 <style lang="less" scoped>
 .revoke-message {
diff --git a/im/src/components/chat/messaege/SystemTextMessage.vue b/im/src/components/chat/messaege/SystemTextMessage.vue
index dc31d4fc4..c3c846ab6 100644
--- a/im/src/components/chat/messaege/SystemTextMessage.vue
+++ b/im/src/components/chat/messaege/SystemTextMessage.vue
@@ -3,18 +3,14 @@
     <div class="content">{{ content }}</div>
   </div>
 </template>
-<script>
+<script setup>
 import { formatTime as sendTime } from '@/utils/functions'
 
-export default {
-  name: 'SystemTextMessage',
-  props: {
-    content: String,
-  },
-  methods: {
-    sendTime,
-  },
-}
+defineOptions({ name: 'SystemTextMessage' })
+
+defineProps({
+  content: String,
+})
 </script>
 <style lang="less" scoped>
 .system-text-message {
diff --git a/im/src/components/chat/messaege/TextMessage.vue b/im/src/components/chat/messaege/TextMessage.vue
index e00377ae4..b7130db11 100644
--- a/im/src/components/chat/messaege/TextMessage.vue
+++ b/im/src/components/chat/messaege/TextMessage.vue
@@ -8,44 +8,42 @@
     <pre v-html="html" />
   </div>
 </template>
-<script>
+<script setup>
+import { ref } from "vue";
 import { textReplaceLink } from "@/utils/functions";
 import { textReplaceEmoji } from "@/utils/emojis";
 
-export default {
+defineOptions({
   name: "TextMessage",
-  props: {
-    content: {
-      type: [String, Number],
-      default: "",
-    },
-    float: {
-      type: String,
-      default: "left",
-    },
-    fullWidth: {
-      type: Boolean,
-      default: true,
-    },
-    arrow: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data () {
-    return {
-      html: "",
-    };
-  },
-  created () {
-    const text = textReplaceLink(
-      this.content,
-      this.float == "right" ? "#ffffff" : "rgb(9 149 208)"
-    );
+});
 
-    this.html = textReplaceEmoji(text);
+const props = defineProps({
+  content: {
+    type: [String, Number],
+    default: "",
   },
-};
+  float: {
+    type: String,
+    default: "left",
+  },
+  fullWidth: {
+    type: Boolean,
+    default: true,
+  },
+  arrow: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const html = ref("");
+
+const text = textReplaceLink(
+  props.content,
+  props.float == "right" ? "#ffffff" : "rgb(9 149 208)"
+);
+
+html.value = textReplaceEmoji(text);
 </script>
 <style lang="less" scoped>
 @bg-left-color: #f5f5f5;
diff --git a/im/src/components/chat/messaege/UserCardMessage.vue b/im/src/components/chat/messaege/UserCardMessage.vue
index 740f7e084..635749d79 100644
--- a/im/src/components/chat/messaege/UserCardMessage.vue
+++ b/im/src/components/chat/messaege/UserCardMessage.vue
@@ -2,18 +2,7 @@
   <!-- 用户卡片消息 - 预留 -->
   <div></div>
 </template>
-
-<script>
-export default {
-  name: 'UserCardMessage',
-  components: {},
-  data() {
-    return {}
-  },
-  computed: {},
-  watch: {},
-  methods: {},
-  created() {},
-}
+<script setup>
+defineOptions({ name: 'UserCardMessage' })
 </script>
 <style lang="less" scoped></style>
diff --git a/im/src/components/chat/messaege/VideoMessage.vue b/im/src/components/chat/messaege/VideoMessage.vue
index c8d78dd0b..e9690526b 100644
--- a/im/src/components/chat/messaege/VideoMessage.vue
+++ b/im/src/components/chat/messaege/VideoMessage.vue
@@ -4,15 +4,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'VideoMessage',
-  components: {},
-  data() {
-    return {}
-  },
-  methods: {},
-  created() {},
-}
+<script setup>
+defineOptions({ name: 'VideoMessage' })
 </script>
 <style lang="less" scoped></style>
diff --git a/im/src/components/chat/messaege/VisitCardMessage.vue b/im/src/components/chat/messaege/VisitCardMessage.vue
index 5abcae272..aa152e067 100644
--- a/im/src/components/chat/messaege/VisitCardMessage.vue
+++ b/im/src/components/chat/messaege/VisitCardMessage.vue
@@ -20,27 +20,27 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  name: 'VisitCardMessage',
-  data() {
-    return {
-      userId: 0,
-      friendId: 0,
-      avatar:
-        'http://im-serve0.gzydong.club/static/image/sys-head/2019012107542668696.jpg',
-      sign:
-        '这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。',
-      nickname:
-        '氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳',
-    }
-  },
-  created() {},
-  methods: {
-    openVisitCard(user_id) {
-      this.$emit('openVisitCard', user_id)
-    },
-  },
+<script setup>
+import { ref } from "vue";
+
+defineOptions({ name: 'VisitCardMessage' });
+
+const emit = defineEmits(['openVisitCard']);
+
+const userId = ref(0);
+const friendId = ref(0);
+const avatar = ref(
+  'http://im-serve0.gzydong.club/static/image/sys-head/2019012107542668696.jpg'
+);
+const sign = ref(
+  '这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。'
+);
+const nickname = ref(
+  '氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳氨基酸纳'
+);
+
+function openVisitCard(user_id) {
+  emit('openVisitCard', user_id)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/chat/messaege/VoiceMessage.vue b/im/src/components/chat/messaege/VoiceMessage.vue
index fb3feb6fe..6169f4b3e 100644
--- a/im/src/components/chat/messaege/VoiceMessage.vue
+++ b/im/src/components/chat/messaege/VoiceMessage.vue
@@ -2,15 +2,9 @@
   <div class="voice-message"></div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   name: 'VoiceMessage',
-  components: {},
-  data() {
-    return {}
-  },
-  methods: {},
-  created() {},
-}
+})
 </script>
 <style lang="less" scoped></style>
diff --git a/im/src/components/chat/messaege/VoteMessage.vue b/im/src/components/chat/messaege/VoteMessage.vue
index 4175100a6..a83fc6dad 100644
--- a/im/src/components/chat/messaege/VoteMessage.vue
+++ b/im/src/components/chat/messaege/VoteMessage.vue
@@ -59,127 +59,128 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed } from "vue";
 import { ServeConfirmVoteHandle } from "@/api/chat";
+import { useUserStore } from "@/stores/user";
 
-export default {
-  name: "VoteMessage",
-  props: {
-    vote: {
-      type: Object,
-      required: true,
-    },
-    record_id: {
-      type: Number,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      answer_mode: 0,
-      title: "啊谁叫你打开你卡沙发那,那就是看、卡收纳是你",
-      radio_value: "",
-      options: [],
-      is_vote: false,
-      answer_num: 0,
-      answered_num: 0,
-      refresh: false,
-    };
-  },
-  computed: {
-    isUserVote() {
-      return this.options.some((iten) => {
-        return iten.is_checked;
-      });
-    },
-  },
-  created() {
-    let user_id = this.$store.state.user.id;
-    let { detail, statistics, vote_users } = this.vote;
+defineOptions({ name: "VoteMessage" });
 
-    this.answer_mode = detail.answer_mode;
-    this.answer_num = detail.answer_num;
-    this.answered_num = detail.answered_num;
+const props = defineProps({
+  vote: {
+    type: Object,
+    required: true,
+  },
+  record_id: {
+    type: Number,
+    required: true,
+  },
+});
 
-    detail.answer_option.forEach((item) => {
-      this.options.push({
-        value: item.key,
-        text: item.value,
-        is_checked: false,
-        num: 0,
-        progress: "00.0",
-      });
+const userStore = useUserStore();
+
+const answer_mode = ref(0);
+const title = ref("啊谁叫你打开你卡沙发那,那就是看、卡收纳是你");
+const radio_value = ref("");
+const options = ref([]);
+const is_vote = ref(false);
+const answer_num = ref(0);
+const answered_num = ref(0);
+const refresh = ref(false);
+
+const isUserVote = computed(() => {
+  return options.value.some((iten) => {
+    return iten.is_checked;
+  });
+});
+
+function loadRefresh() {
+  refresh.value = true;
+
+  setTimeout(() => {
+    refresh.value = false;
+  }, 500);
+}
+
+function updateStatistics(data) {
+  let count = data.count;
+  options.value.forEach((option) => {
+    option.num = data.options[option.value];
+
+    if (count > 0) {
+      option.progress = (data.options[option.value] / count) * 100;
+    }
+  });
+}
+
+function toSelect(option, index) {
+  if (answer_mode.value == 0) {
+    options.value.forEach((option) => {
+      option.is_checked = false;
     });
+  }
 
-    this.is_vote = vote_users.some((value) => {
-      return value == user_id;
+  options.value[index].is_checked = !option.is_checked;
+}
+
+function toSelect2(option) {
+  if (answer_mode.value == 0) {
+    options.value.forEach((item) => {
+      if (option.value == item.value) {
+        item.is_checked = option.is_checked;
+      } else {
+        item.is_checked = false;
+      }
     });
+  }
+}
 
-    this.updateStatistics(statistics);
-  },
-  methods: {
-    loadRefresh() {
-      this.refresh = true;
+function toVote() {
+  if (isUserVote.value == false) {
+    return false;
+  }
 
-      setTimeout(() => {
-        this.refresh = false;
-      }, 500);
-    },
-    updateStatistics(data) {
-      let count = data.count;
-      this.options.forEach((option) => {
-        option.num = data.options[option.value];
+  let items = [];
+  options.value.forEach((item) => {
+    if (item.is_checked) {
+      items.push(item.value);
+    }
+  });
 
-        if (count > 0) {
-          option.progress = (data.options[option.value] / count) * 100;
-        }
-      });
-    },
+  ServeConfirmVoteHandle({
+    record_id: props.record_id,
+    options: items.join(","),
+  }).then((res) => {
+    if (res.code == 200) {
+      is_vote.value = true;
+      updateStatistics(res.data);
+    }
+  });
+}
 
-    toSelect(option, index) {
-      if (this.answer_mode == 0) {
-        this.options.forEach((option) => {
-          option.is_checked = false;
-        });
-      }
+// 原 created() 生命周期逻辑
+let user_id = userStore.id;
+let { detail, statistics, vote_users } = props.vote;
 
-      this.options[index].is_checked = !option.is_checked;
-    },
-    toSelect2(option) {
-      if (this.answer_mode == 0) {
-        this.options.forEach((item) => {
-          if (option.value == item.value) {
-            item.is_checked = option.is_checked;
-          } else {
-            item.is_checked = false;
-          }
-        });
-      }
-    },
-    toVote() {
-      if (this.isUserVote == false) {
-        return false;
-      }
+answer_mode.value = detail.answer_mode;
+answer_num.value = detail.answer_num;
+answered_num.value = detail.answered_num;
 
-      let items = [];
-      this.options.forEach((item) => {
-        if (item.is_checked) {
-          items.push(item.value);
-        }
-      });
+detail.answer_option.forEach((item) => {
+  options.value.push({
+    value: item.key,
+    text: item.value,
+    is_checked: false,
+    num: 0,
+    progress: "00.0",
+  });
+});
 
-      ServeConfirmVoteHandle({
-        record_id: this.record_id,
-        options: items.join(","),
-      }).then((res) => {
-        if (res.code == 200) {
-          this.is_vote = true;
-          this.updateStatistics(res.data);
-        }
-      });
-    },
-  },
-};
+is_vote.value = vote_users.some((value) => {
+  return value == user_id;
+});
+
+updateStatistics(statistics);
 </script>
 <style lang="less" scoped>
 .vote-message {
diff --git a/im/src/components/chat/panel/OtherLink.vue b/im/src/components/chat/panel/OtherLink.vue
index 53a697881..75e3268ea 100644
--- a/im/src/components/chat/panel/OtherLink.vue
+++ b/im/src/components/chat/panel/OtherLink.vue
@@ -16,7 +16,9 @@
   </el-tabs>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import {
   ServeGetStoreDetail,
   ServeGetFootPrint,
@@ -29,255 +31,258 @@ import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
 import GoodsLink from "@/components/chat/panel/template/goodsLink.vue";
 import SocketInstance from "@/im-server/socket-instance";
-import { mapState, mapGetters } from "vuex";
+import { useTalkStore } from "@/stores/talk";
+import { useDialogueStore } from "@/stores/dialogue";
 import { getToken } from "@/utils/auth";
-import { isBuyerImMode } from "@/utils/im-mode";
+// 与 computed 属性同名，改用别名导入
+import { isBuyerImMode as isBuyerImModeFn } from "@/utils/im-mode";
 
 const SIDE_REQUEST_OPTIONS = { skipAuthDialog: true };
 
-export default {
-  components: {
-    StoreDetail,
-    FootPrint,
-    GoodsLink,
+const props = defineProps({
+  toUser: {
+    type: Object,
+    default: null,
   },
-  props: {
-    toUser: {
-      type: Object,
-      default: null,
-    },
-    id: {
-      type: String,
-      default: "",
-    },
-    goodsParams: {
-      type: Object,
-      default: null,
-    },
+  id: {
+    type: String,
+    default: "",
   },
-  computed: {
-    ...mapGetters(["talkItems"]),
-    ...mapState({
-      index_name: (state) => state.dialogue.index_name,
-    }),
-    isBuyerImMode() {
-      return isBuyerImMode(this.$route);
-    },
+  goodsParams: {
+    type: Object,
+    default: null,
   },
-  watch: {
-    toUser() {
-      this.syncStoreFlagCache();
-      this.resetSidePanelData();
-      if (this.toUser.storeFlag) {
-        this.getStoreDetail();
-      }
-      this.getFootPrint();
-      if (this.goodsParams && this.toUser.storeFlag) {
-        this.getGoodsDetail();
-      }
-    },
-  },
-  data() {
-    return {
-      activeName: "history",
-      storeInfo: {},
-      memberInfo: {},
-      footPrintParams: {
-        pageSize: 20,
-        pageNumber: 1,
-        memberId: "",
-        storeId: "",
-      },
-      goodsDetail: {},
-      footPrintList: [],
-      orderPrintList: [],
-    };
-  },
-  mounted() {
-    this.syncStoreFlagCache();
-    if (this.toUser.storeFlag) {
-      this.getStoreDetail();
+});
+
+const talkStore = useTalkStore();
+const dialogueStore = useDialogueStore();
+const route = useRoute();
+
+const activeName = ref("history");
+const storeInfo = ref({});
+const memberInfo = ref({});
+const footPrintParams = reactive({
+  pageSize: 20,
+  pageNumber: 1,
+  memberId: "",
+  storeId: "",
+});
+const goodsDetail = ref({});
+const footPrintList = ref([]);
+const orderPrintList = ref([]);
+
+const talkItems = computed(() => talkStore.talkItems);
+const index_name = computed(() => dialogueStore.index_name);
+const isBuyerImMode = computed(() => isBuyerImModeFn(route));
+
+watch(
+  () => props.toUser,
+  () => {
+    syncStoreFlagCache();
+    resetSidePanelData();
+    if (props.toUser.storeFlag) {
+      getStoreDetail();
     }
-    this.getFootPrint();
-    if (this.goodsParams && this.toUser.storeFlag) {
-      this.getGoodsDetail();
+    getFootPrint();
+    if (props.goodsParams && props.toUser.storeFlag) {
+      getGoodsDetail();
     }
-  },
-  methods: {
-    syncStoreFlagCache() {
-      localStorage.setItem(
-        "storeFlag",
-        this.isBuyerImMode ? "true" : "false"
-      );
-    },
-    resetSidePanelData() {
-      this.footPrintList = [];
-      this.orderPrintList = [];
-      this.footPrintParams.pageNumber = 1;
-    },
-    getStoreDetail() {
-      ServeGetStoreDetail(this.toUser.userId, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res.success) {
-            this.storeInfo = res.result;
-          }
-        })
-        .catch(() => {});
-    },
-    loadMoreFootPrint() {
-      this.footPrintParams.pageNumber++;
-      this.getFootPrint();
-    },
-    handleClick() {},
-    getGoodsDetail() {
-      if (!this.toUser.storeFlag) {
-        return;
+  }
+);
+
+onMounted(() => {
+  syncStoreFlagCache();
+  if (props.toUser.storeFlag) {
+    getStoreDetail();
+  }
+  getFootPrint();
+  if (props.goodsParams && props.toUser.storeFlag) {
+    getGoodsDetail();
+  }
+});
+
+function syncStoreFlagCache() {
+  localStorage.setItem(
+    "storeFlag",
+    isBuyerImMode.value ? "true" : "false"
+  );
+}
+
+function resetSidePanelData() {
+  footPrintList.value = [];
+  orderPrintList.value = [];
+  footPrintParams.pageNumber = 1;
+}
+
+function getStoreDetail() {
+  ServeGetStoreDetail(props.toUser.userId, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res.success) {
+        storeInfo.value = res.result;
       }
-      if (!this.goodsParams || !this.goodsParams.goodsId) {
-        return;
+    })
+    .catch(() => {});
+}
+
+function loadMoreFootPrint() {
+  footPrintParams.pageNumber++;
+  getFootPrint();
+}
+
+function handleClick() {}
+
+function getGoodsDetail() {
+  if (!props.toUser.storeFlag) {
+    return;
+  }
+  if (!props.goodsParams || !props.goodsParams.goodsId) {
+    return;
+  }
+  ServeGetGoodsDetail(props.goodsParams, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res.success) {
+        goodsDetail.value = res.result.data;
       }
-      ServeGetGoodsDetail(this.goodsParams, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res.success) {
-            this.goodsDetail = res.result.data;
-          }
-        })
-        .catch(() => {});
-    },
-    normalizeFootPrintRecords(records = []) {
-      const goodsId = this.goodsParams?.goodsId;
-      return records
-        .filter((item) => item != null)
-        .filter((item) => !goodsId || item.goodsId !== goodsId)
-        .map((item) => ({
-          ...item,
-          btnHide: localStorage.getItem(item.goodsId) ? 0 : 1,
-        }));
-    },
-    normalizeOrderRecords(records = []) {
-      return records.map((item) => ({
-        ...item,
-        btnHide: 1,
-      }));
-    },
-    getFootPrint() {
-      if (!getToken()) {
-        return;
+    })
+    .catch(() => {});
+}
+
+function normalizeFootPrintRecords(records = []) {
+  const goodsId = props.goodsParams?.goodsId;
+  return records
+    .filter((item) => item != null)
+    .filter((item) => !goodsId || item.goodsId !== goodsId)
+    .map((item) => ({
+      ...item,
+      btnHide: localStorage.getItem(item.goodsId) ? 0 : 1,
+    }));
+}
+
+function normalizeOrderRecords(records = []) {
+  return records.map((item) => ({
+    ...item,
+    btnHide: 1,
+  }));
+}
+
+function getFootPrint() {
+  if (!getToken()) {
+    return;
+  }
+  if (!props.toUser?.userId || !props.id) {
+    return;
+  }
+
+  if (isBuyerImMode.value) {
+    footPrintParams.memberId = props.id;
+    footPrintParams.storeId = props.toUser.userId;
+    fetchBuyerSideData();
+  } else {
+    footPrintParams.memberId = props.toUser.userId;
+    footPrintParams.storeId = props.id;
+    fetchStoreSideData();
+  }
+}
+
+function fetchBuyerSideData() {
+  ServeGetFootPrint(footPrintParams, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res?.result?.records) {
+        footPrintList.value.push(
+          ...normalizeFootPrintRecords(res.result.records)
+        );
       }
-      if (!this.toUser?.userId || !this.id) {
-        return;
+    })
+    .catch(() => {});
+
+  ServeGetOrderPrint(footPrintParams, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res?.code === 200 && res?.result?.records) {
+        orderPrintList.value.push(
+          ...normalizeOrderRecords(res.result.records)
+        );
       }
+    })
+    .catch(() => {});
+}
 
-      if (this.isBuyerImMode) {
-        this.footPrintParams.memberId = this.id;
-        this.footPrintParams.storeId = this.toUser.userId;
-        this.fetchBuyerSideData();
-      } else {
-        this.footPrintParams.memberId = this.toUser.userId;
-        this.footPrintParams.storeId = this.id;
-        this.fetchStoreSideData();
+function fetchStoreSideData() {
+  ServeStoreGetFootPrint(footPrintParams, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res?.result?.records) {
+        footPrintList.value.push(
+          ...normalizeFootPrintRecords(res.result.records)
+        );
       }
-    },
-    fetchBuyerSideData() {
-      ServeGetFootPrint(this.footPrintParams, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res?.result?.records) {
-            this.footPrintList.push(
-              ...this.normalizeFootPrintRecords(res.result.records)
-            );
-          }
-        })
-        .catch(() => {});
+    })
+    .catch(() => {});
 
-      ServeGetOrderPrint(this.footPrintParams, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res?.code === 200 && res?.result?.records) {
-            this.orderPrintList.push(
-              ...this.normalizeOrderRecords(res.result.records)
-            );
-          }
-        })
-        .catch(() => {});
-    },
-    fetchStoreSideData() {
-      ServeStoreGetFootPrint(this.footPrintParams, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res?.result?.records) {
-            this.footPrintList.push(
-              ...this.normalizeFootPrintRecords(res.result.records)
-            );
-          }
-        })
-        .catch(() => {});
-
-      ServeStoreGetOrderPrint(this.footPrintParams, SIDE_REQUEST_OPTIONS)
-        .then((res) => {
-          if (res?.code === 200 && res?.result?.records) {
-            this.orderPrintList.push(
-              ...this.normalizeOrderRecords(res.result.records)
-            );
-          }
-        })
-        .catch(() => {});
-    },
-
-    submitSendMessage(record, context, messageType) {
-      SocketInstance.emit("event_talk", record);
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: this.index_name,
-        draft_text: "",
-      });
-      const insterChat = {
-        createTime: this.formateDateAndTimeToString(new Date()),
-        fromUser: this.id,
-        toUser: record.to,
-        isRead: false,
-        messageType: messageType,
-        text: context,
-        float: "right",
-      };
-
-      this.$store.commit("PUSH_DIALOGUE", insterChat);
-      let el = document.getElementById("lumenChatPanel");
-      let isBottom =
-        Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
-
-      if (isBottom || record.to == this.id) {
-        this.$nextTick(() => {
-          el.scrollTop = el.scrollHeight;
-        });
-      } else {
-        this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
-          content: context,
-          nickname: record.name,
-        });
+  ServeStoreGetOrderPrint(footPrintParams, SIDE_REQUEST_OPTIONS)
+    .then((res) => {
+      if (res?.code === 200 && res?.result?.records) {
+        orderPrintList.value.push(
+          ...normalizeOrderRecords(res.result.records)
+        );
       }
-    },
+    })
+    .catch(() => {});
+}
 
-    formateDateAndTimeToString(date) {
-      var hours = date.getHours();
-      var mins = date.getMinutes();
-      var secs = date.getSeconds();
-      var msecs = date.getMilliseconds();
-      if (hours < 10) hours = "0" + hours;
-      if (mins < 10) mins = "0" + mins;
-      if (secs < 10) secs = "0" + secs;
-      if (msecs < 10) secs = "0" + msecs;
-      return (
-        this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
-      );
-    },
+function submitSendMessage(record, context, messageType) {
+  SocketInstance.emit("event_talk", record);
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: index_name.value,
+    draft_text: "",
+  });
+  const insterChat = {
+    createTime: formateDateAndTimeToString(new Date()),
+    fromUser: props.id,
+    toUser: record.to,
+    isRead: false,
+    messageType: messageType,
+    text: context,
+    float: "right",
+  };
 
-    formatDateToString(date) {
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1;
-      var day = date.getDate();
-      if (month < 10) month = "0" + month;
-      if (day < 10) day = "0" + day;
-      return year + "-" + month + "-" + day;
-    },
-  },
-};
+  dialogueStore.PUSH_DIALOGUE(insterChat);
+  let el = document.getElementById("lumenChatPanel");
+  let isBottom =
+    Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
+
+  if (isBottom || record.to == props.id) {
+    nextTick(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  } else {
+    talkStore.SET_TLAK_UNREAD_MESSAGE({
+      content: context,
+      nickname: record.name,
+    });
+  }
+}
+
+function formateDateAndTimeToString(date) {
+  var hours = date.getHours();
+  var mins = date.getMinutes();
+  var secs = date.getSeconds();
+  var msecs = date.getMilliseconds();
+  if (hours < 10) hours = "0" + hours;
+  if (mins < 10) mins = "0" + mins;
+  if (secs < 10) secs = "0" + secs;
+  if (msecs < 10) secs = "0" + msecs;
+  return (
+    formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
+  );
+}
+
+function formatDateToString(date) {
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  if (month < 10) month = "0" + month;
+  if (day < 10) day = "0" + day;
+  return year + "-" + month + "-" + day;
+}
 </script>
 
 <style scoped lang="less">
diff --git a/im/src/components/chat/panel/PanelHeader.vue b/im/src/components/chat/panel/PanelHeader.vue
index 3ec0e709a..cac97b313 100644
--- a/im/src/components/chat/panel/PanelHeader.vue
+++ b/im/src/components/chat/panel/PanelHeader.vue
@@ -39,75 +39,89 @@
     </div>
   </el-header>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: () => {
-        return {
-          talk_type: 0,
-          receiver_id: 0,
-          params: 0,
-          nickname: '',
-        }
-      },
-    },
-    online: {
-      type: Boolean,
-      default: false,
-    },
-    keyboard: {
-      type: [Boolean, Number],
-      default: false,
-    },
-  },
-  data() {
-    return {
-      params: {
+<script setup>
+import { reactive, ref, watch } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => {
+      return {
         talk_type: 0,
         receiver_id: 0,
         params: 0,
         nickname: '',
-      },
-      isOnline: false,
-      isKeyboard: false,
-      groupNum: 0,
-    }
-  },
-  created() {
-    this.setParamsData(this.data)
-    this.setOnlineStatus(this.online)
-  },
-  watch: {
-    data(value) {
-      this.setParamsData(value)
-    },
-    online(value) {
-      this.setOnlineStatus(value)
-    },
-    keyboard(value) {
-      this.isKeyboard = value
-      setTimeout(() => {
-        this.isKeyboard = false
-      }, 2000)
+      }
     },
   },
-  methods: {
-    setOnlineStatus(value) {
-      this.isOnline = value
-    },
-    setParamsData(object) {
-      Object.assign(this.params, object)
-    },
-    setGroupNum(value) {
-      this.groupNum = value
-    },
-    triggerEvent(event_name) {
-      this.$emit('event', event_name)
-    },
+  online: {
+    type: Boolean,
+    default: false,
   },
+  keyboard: {
+    type: [Boolean, Number],
+    default: false,
+  },
+})
+
+const emit = defineEmits(['event'])
+
+const params = reactive({
+  talk_type: 0,
+  receiver_id: 0,
+  params: 0,
+  nickname: '',
+})
+const isOnline = ref(false)
+const isKeyboard = ref(false)
+const groupNum = ref(0)
+
+// created 钩子
+setParamsData(props.data)
+setOnlineStatus(props.online)
+
+watch(
+  () => props.data,
+  (value) => {
+    setParamsData(value)
+  }
+)
+
+watch(
+  () => props.online,
+  (value) => {
+    setOnlineStatus(value)
+  }
+)
+
+watch(
+  () => props.keyboard,
+  (value) => {
+    isKeyboard.value = value
+    setTimeout(() => {
+      isKeyboard.value = false
+    }, 2000)
+  }
+)
+
+function setOnlineStatus(value) {
+  isOnline.value = value
 }
+
+function setParamsData(object) {
+  Object.assign(params, object)
+}
+
+function setGroupNum(value) {
+  groupNum.value = value
+}
+
+function triggerEvent(event_name) {
+  emit('event', event_name)
+}
+
+// 父组件 TalkPanel 通过 $refs.panelHeader.setGroupNum() 访问
+defineExpose({ setGroupNum })
 </script>
 <style lang="less" scoped>
 #panel-header {
diff --git a/im/src/components/chat/panel/PanelToolbar.vue b/im/src/components/chat/panel/PanelToolbar.vue
index aa5c577a8..d75b42f25 100644
--- a/im/src/components/chat/panel/PanelToolbar.vue
+++ b/im/src/components/chat/panel/PanelToolbar.vue
@@ -35,14 +35,14 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    value: {
-      default: 0,
-    },
+<script setup>
+defineProps({
+  value: {
+    default: 0,
   },
-}
+});
+
+defineEmits(["event"]);
 </script>
 <style lang="less" scoped>
 .multi-select {
diff --git a/im/src/components/chat/panel/TalkPanel.vue b/im/src/components/chat/panel/TalkPanel.vue
index 96734750c..d30a309a4 100644
--- a/im/src/components/chat/panel/TalkPanel.vue
+++ b/im/src/components/chat/panel/TalkPanel.vue
@@ -192,11 +192,18 @@
     <OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
   </div>
 </template>
-<script>
+<script setup>
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import { textReplaceLink } from "@/utils/functions";
 import { textReplaceEmoji, emojistwo } from "@/utils/emojis";
 import OtherLink from "@/components/chat/panel/OtherLink.vue";
-import { mapState, mapGetters } from "vuex";
 import TalkSearchRecord from "@/components/chat/TalkSearchRecord";
 import MeEditor from "@/components/editor/MeEditor";
 import PanelHeader from "./PanelHeader";
@@ -204,6 +211,12 @@ import PanelToolbar from "./PanelToolbar";
 import SocketInstance from "@/im-server/socket-instance";
 import { SvgMentionDown } from "@/core/icons";
 import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
+import { useUserStore } from "@/stores/user";
+import { useTalkStore } from "@/stores/talk";
+import { useNotifyStore } from "@/stores/notify";
+import { useSettingsStore } from "@/stores/settings";
+import { useDialogueStore } from "@/stores/dialogue";
+import { useEmoticonStore } from "@/stores/emoticon";
 
 import {
   ServeTalkRecords,
@@ -212,672 +225,667 @@ import {
   ServeRevokeRecords,
 } from "@/api/chat";
 
-export default {
-  name: "TalkEditorPanel",
-  components: {
-    MeEditor,
-    OtherLink,
-    TalkSearchRecord,
-    SvgMentionDown,
-    PanelToolbar,
-    PanelHeader,
-  },
-  props: {
-    // 对话相关参数
-    params: {
-      type: Object,
-      default: function () {
-        return {
-          // 消息来源（1：好友私信 2:群聊）
-          talk_type: 0,
-          // 消息接收者ID（好友ID或者群聊ID）
-          receiver_id: 0,
-          nickname: "",
-        };
-      },
-    },
-    goodsParams: {
-      type: Object,
-      default: null,
-    },
+defineOptions({ name: "TalkEditorPanel" });
 
-    // 用户是否在线
-    isOnline: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data () {
-    return {
-      // 记录加载相关参数
-      textReplaceEmoji,
-      emojistwo,
-      textReplaceLink,
-      loadRecord: {
-        status: 0,
-        minRecord: 0,
-        pageSize: 10,
-        pageNumber: 0,
-      },
-
-      // 多选相关操作
-      multiSelect: {
-        isOpen: false,
-        items: [],
-        mode: 0,
-      },
-
-      // 群组Box
-      group: {
-        panel: false,
-        notice: false,
-      },
-
-      // 键盘输入事件
-      keyboardEvent: {
-        isShow: false,
-        time: 0,
-      },
-
-      // 聊天记录管理器数据
-      findChatRecord: false,
-
-      // 置底按钮是否显示
-      tipsBoard: false,
-
-      // 防止并发请求导致 loading 状态错乱
-      recordsRequestId: 0,
-    };
-  },
-
-  computed: {
-    ...mapGetters(["talkItems"]),
-    ...mapState({
-      name: (state) => state.user.name,
-      face: (state) => state.user.face,
-      unreadMessage: (state) => state.talks.unreadMessage,
-      inputEvent: (state) => state.notify.inputEvent,
-      id: (state) => state.user.id,
-      records: (state) => state.dialogue.records,
-      index_name: (state) => state.dialogue.index_name,
-      toUser: (state) => state.user.toUser,
-    }),
-  },
-  watch: {
-    // 监听面板传递参数（含首次挂载）
-    params: {
-      handler () {
-        this.resetRecordState();
-        this.loadChatRecords();
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    parseTime,
-    sendTime: formatTime,
-
-    // 处理 Header 组件事件
-    handleHeaderEvent (event_name) {
-      switch (event_name) {
-        case "history":
-          this.findChatRecord = true;
-          break;
-        case "notice":
-          this.group.notice = true;
-          break;
-        case "setting":
-          this.group.panel = true;
-          break;
-      }
-    },
-    // linkTo(type,val){
-    //   if(type === 'GOODS'){
-    //     let routeUrl = this.$router.resolve({
-    //       path: '/goodsDetail',
-    //       query: { skuId:val.id, goodsId:val.goodsId }
-    //     });
-    //   window.open(routeUrl.href, '_blank');
-    //   }
-    // },
-    // #TODO 冗余代码
-
-    formatDateToString (date) {
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1;
-      var day = date.getDate();
-      if (month < 10) month = "0" + month;
-      if (day < 10) day = "0" + day;
-      return year + "-" + month + "-" + day;
-    },
-
-    /**
-     * 将unix时间戳转换为指定格式
-     * @param unix   时间戳【秒】
-     * @param format 转换格式
-     * @returns {*|string}
-     */
-    unixToDate (unix, format) {
-      if (!unix) return unix;
-      let _format = format || "yyyy-MM-dd hh:mm:ss";
-      const d = new Date(unix);
-      const o = {
-        "M+": d.getMonth() + 1,
-        "d+": d.getDate(),
-        "h+": d.getHours(),
-        "m+": d.getMinutes(),
-        "s+": d.getSeconds(),
-        "q+": Math.floor((d.getMonth() + 3) / 3),
-        S: d.getMilliseconds(),
+const props = defineProps({
+  // 对话相关参数
+  params: {
+    type: Object,
+    default: function () {
+      return {
+        // 消息来源（1：好友私信 2:群聊）
+        talk_type: 0,
+        // 消息接收者ID（好友ID或者群聊ID）
+        receiver_id: 0,
+        nickname: "",
       };
-      if (/(y+)/.test(_format))
-        _format = _format.replace(
-          RegExp.$1,
-          (d.getFullYear() + "").substr(4 - RegExp.$1.length)
-        );
-      for (const k in o)
-        if (new RegExp("(" + k + ")").test(_format))
-          _format = _format.replace(
-            RegExp.$1,
-            RegExp.$1.length === 1
-              ? o[k]
-              : ("00" + o[k]).substr(("" + o[k]).length)
-          );
-      return _format;
     },
+  },
+  goodsParams: {
+    type: Object,
+    default: null,
+  },
 
-    formateDateAndTimeToString (date) {
-      var hours = date.getHours();
-      var mins = date.getMinutes();
-      var secs = date.getSeconds();
-      var msecs = date.getMilliseconds();
-      if (hours < 10) hours = "0" + hours;
-      if (mins < 10) mins = "0" + mins;
-      if (secs < 10) secs = "0" + secs;
-      if (msecs < 10) secs = "0" + msecs;
-      return (
-        this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
+  // 用户是否在线
+  isOnline: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["close-talk"]);
+
+// 全局属性（$notify/$contacts/$user/$contextmenu）通过实例代理访问，行为与原 this.$xxx 一致
+const { proxy } = getCurrentInstance();
+
+const userStore = useUserStore();
+const talkStore = useTalkStore();
+const notifyStore = useNotifyStore();
+const settingsStore = useSettingsStore();
+const dialogueStore = useDialogueStore();
+const emoticonStore = useEmoticonStore();
+
+// 记录加载相关参数
+const loadRecord = reactive({
+  status: 0,
+  minRecord: 0,
+  pageSize: 10,
+  pageNumber: 0,
+});
+
+// 多选相关操作
+const multiSelect = ref({
+  isOpen: false,
+  items: [],
+  mode: 0,
+});
+
+// 群组Box
+const group = reactive({
+  panel: false,
+  notice: false,
+});
+
+// 键盘输入事件
+const keyboardEvent = reactive({
+  isShow: false,
+  time: 0,
+});
+
+// 聊天记录管理器数据
+const findChatRecord = ref(false);
+
+// 置底按钮是否显示
+const tipsBoard = ref(false);
+
+// 防止并发请求导致 loading 状态错乱
+let recordsRequestId = 0;
+
+// PanelHeader 组件实例（模板 ref="panelHeader"）
+const panelHeader = ref(null);
+
+const talkItems = computed(() => talkStore.talkItems);
+const name = computed(() => userStore.name);
+const face = computed(() => userStore.face);
+const unreadMessage = computed(() => talkStore.unreadMessage);
+const inputEvent = computed(() => notifyStore.inputEvent);
+const id = computed(() => userStore.id);
+const records = computed(() => dialogueStore.records);
+const index_name = computed(() => dialogueStore.index_name);
+const toUser = computed(() => userStore.toUser);
+
+const sendTime = formatTime;
+
+// 监听面板传递参数（含首次挂载）
+watch(
+  () => props.params,
+  () => {
+    resetRecordState();
+    loadChatRecords();
+  },
+  { immediate: true }
+);
+
+// 处理 Header 组件事件
+function handleHeaderEvent(event_name) {
+  switch (event_name) {
+    case "history":
+      findChatRecord.value = true;
+      break;
+    case "notice":
+      group.notice = true;
+      break;
+    case "setting":
+      group.panel = true;
+      break;
+  }
+}
+// linkTo(type,val){
+//   if(type === 'GOODS'){
+//     let routeUrl = this.$router.resolve({
+//       path: '/goodsDetail',
+//       query: { skuId:val.id, goodsId:val.goodsId }
+//     });
+//   window.open(routeUrl.href, '_blank');
+//   }
+// },
+// #TODO 冗余代码
+
+function formatDateToString(date) {
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  if (month < 10) month = "0" + month;
+  if (day < 10) day = "0" + day;
+  return year + "-" + month + "-" + day;
+}
+
+/**
+ * 将unix时间戳转换为指定格式
+ * @param unix   时间戳【秒】
+ * @param format 转换格式
+ * @returns {*|string}
+ */
+function unixToDate(unix, format) {
+  if (!unix) return unix;
+  let _format = format || "yyyy-MM-dd hh:mm:ss";
+  const d = new Date(unix);
+  const o = {
+    "M+": d.getMonth() + 1,
+    "d+": d.getDate(),
+    "h+": d.getHours(),
+    "m+": d.getMinutes(),
+    "s+": d.getSeconds(),
+    "q+": Math.floor((d.getMonth() + 3) / 3),
+    S: d.getMilliseconds(),
+  };
+  if (/(y+)/.test(_format))
+    _format = _format.replace(
+      RegExp.$1,
+      (d.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  for (const k in o)
+    if (new RegExp("(" + k + ")").test(_format))
+      _format = _format.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1
+          ? o[k]
+          : ("00" + o[k]).substr(("" + o[k]).length)
       );
-    },
-    // #冗余代码结束
+  return _format;
+}
 
-    // 重新发送消息
-    againSendMessage(val){
-     
-      this.submitSendMessage(val.text)
-    },
+function formateDateAndTimeToString(date) {
+  var hours = date.getHours();
+  var mins = date.getMinutes();
+  var secs = date.getSeconds();
+  var msecs = date.getMilliseconds();
+  if (hours < 10) hours = "0" + hours;
+  if (mins < 10) mins = "0" + mins;
+  if (secs < 10) secs = "0" + secs;
+  if (msecs < 10) secs = "0" + msecs;
+  return (
+    formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
+  );
+}
+// #冗余代码结束
 
-    // 回车键发送消息回调事件
-    submitSendMessage (content) {
-      const record = {
-        operation_type: "MESSAGE",
-        to: this.params.receiver_id,
-        from: this.id,
-        message_type: "MESSAGE",
-        context: content,
-        talk_id: this.params.talkId,
-      };
-      // if (record.messageType == 'MESSAGE"') {
-      //   record.text = this.textReplaceEmoji(record.content)
-      // }
-      SocketInstance.emit("event_talk", record);
+// 重新发送消息
+function againSendMessage(val) {
 
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: this.index_name,
-        draft_text: "",
-      });
+  submitSendMessage(val.text)
+}
 
-      /**
-       * 插入数据
-       */
-      const insterChat = {
-        createTime: this.formateDateAndTimeToString(new Date()),
-        fromUser: this.id,
-        toUser: record.to,
-        isRead: false,
-        messageType: "MESSAGE",
-        text: content,
-        float: "right",
-      };
-      // console.log("插入对话记录",'')
-      // 插入对话记录
-      this.$store.commit("PUSH_DIALOGUE", insterChat);
-      // 获取聊天面板元素节点
-      let el = document.getElementById("lumenChatPanel");
+// 回车键发送消息回调事件
+function submitSendMessage(content) {
+  const record = {
+    operation_type: "MESSAGE",
+    to: props.params.receiver_id,
+    from: id.value,
+    message_type: "MESSAGE",
+    context: content,
+    talk_id: props.params.talkId,
+  };
+  // if (record.messageType == 'MESSAGE"') {
+  //   record.text = textReplaceEmoji(record.content)
+  // }
+  SocketInstance.emit("event_talk", record);
 
-      // 判断的滚动条是否在底部
-      let isBottom =
-        Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: index_name.value,
+    draft_text: "",
+  });
 
-      if (isBottom || record.to == this.id) {
-        this.$nextTick(() => {
-          el.scrollTop = el.scrollHeight;
-        });
-      } else {
-        this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
-          content: content,
-          nickname: record.name,
-        });
-      }
-    },
+  /**
+   * 插入数据
+   */
+  const insterChat = {
+    createTime: formateDateAndTimeToString(new Date()),
+    fromUser: id.value,
+    toUser: record.to,
+    isRead: false,
+    messageType: "MESSAGE",
+    text: content,
+    float: "right",
+  };
+  // console.log("插入对话记录",'')
+  // 插入对话记录
+  dialogueStore.PUSH_DIALOGUE(insterChat);
+  // 获取聊天面板元素节点
+  let el = document.getElementById("lumenChatPanel");
 
-    // 推送编辑事件消息
-    onKeyboardEvent (text) {
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: this.index_name,
-        draft_text: text,
-      });
+  // 判断的滚动条是否在底部
+  let isBottom =
+    Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
 
-      // 判断当前对话是否属于私聊信息
-      if (this.params.talk_type == 2 || !this.isOnline) return;
-
-      // 判断是否推送键盘输入事件消息
-      if (!this.$store.state.settings.keyboardEventNotify) {
-        return false;
-      }
-
-      let time = new Date().getTime();
-      // 判断在两秒内是否已推送事件
-      if (this.keyboardEvent.time != 0 && time - this.keyboardEvent.time < 2000)
-        return;
-
-      this.keyboardEvent.time = time;
-
-      // 调用父类Websocket组件发送消息
-      SocketInstance.emit("event_keyboard", {
-        sender_id: this.id,
-        receiver_id: this.params.receiver_id,
-      });
-    },
-
-
-
-    resetRecordState () {
-      this.loadRecord.minRecord = 0;
-      this.loadRecord.pageNumber = 0;
-      this.tipsBoard = false;
-      this.multiSelect = {
-        isOpen: false,
-        items: [],
-        mode: 0,
-      };
-    },
-
-    // 加载用户聊天详情信息
-    loadChatRecords () {
-      if (!this.params.talkId) {
-        this.loadRecord.status = 2;
-        return;
-      }
-
-      const isFirstPage = this.loadRecord.pageNumber === 0;
-      if (isFirstPage) {
-        this.loadRecord.pageNumber = 1;
-      } else {
-        this.loadRecord.pageNumber = this.loadRecord.pageNumber + 1;
-      }
-
-      const user_id = this.id;
-      const data = {
-        pageNumber: this.loadRecord.pageNumber,
-        pageSize: this.loadRecord.pageSize,
-        talkId: this.params.talkId,
-      };
-      this.loadRecord.status = 0;
-
-      const requestId = ++this.recordsRequestId;
-      let el = document.getElementById('lumenChatPanel');
-      let scrollHeight = el ? el.scrollHeight : 0;
-
-      ServeTalkRecords(data).then((res) => {
-        if (requestId !== this.recordsRequestId) return;
-        if (res.code !== 200 || !Array.isArray(res.result)) {
-          this.loadRecord.status = 2;
-          return;
-        }
-        const records = res.result.map((item) => {
-          let key = new Date().getTime();
-          item.float = "center";
-          if (item.toUser > 0) {
-            item.float = item.fromUser == user_id ? "right" : "left";
-          }
-          if (item.messageType == 'GOODS') {
-            item.text = JSON.parse(item.text);
-          }
-          if (item.messageType == 'ORDER') {
-            item.text = JSON.parse(item.text);
-          }
-          return { ...item, [key]: key };
-        });
-        this.$store.commit("UNSHIFT_DIALOGUE", records);
-        this.loadRecord.status = records.length ? 1 : 2;
-        this.$nextTick(() => {
-          if (!el) return;
-          if (isFirstPage) {
-            el.scrollTop = el.scrollHeight;
-          } else {
-            el.scrollTop = el.scrollHeight - scrollHeight;
-          }
-        });
-      }).catch(() => {
-        if (requestId !== this.recordsRequestId) return;
-        this.loadRecord.status = 2;
-      });
-    },
-
-    // 多选处理方式
-    handleMultiMode (value) {
-      if (value == "close") {
-        this.closeMultiSelect();
-        return false;
-      }
-
-      if (this.multiSelect.items.length <= 1) {
-        return false;
-      }
-
-      if (value == "forward" || value == "merge_forward") {
-        this.multiSelect.mode = value == "forward" ? 1 : 2;
-        if (this.verifyMultiSelectType(3)) {
-          this.$notify({
-            title: "消息转发",
-            message: "会话记录不支持合并转发",
-          });
-          return false;
-        }
-
-        this.$contacts({
-          confirm: this.confirmSelectContacts,
-        });
-      } else if (value == "delete") {
-        this.multiSelect.mode = 3;
-
-        // 批量删除
-        let ids = this.multiSelect.items;
-        ServeRemoveRecords({
-          talk_type: this.params.talk_type,
-          receiver_id: this.params.receiver_id,
-          record_id: ids.join(","),
-        }).then((res) => {
-          if (res.code == 200) {
-            this.delRecords(ids).closeMultiSelect();
-          }
-        });
-      }
-    },
-
-    // 确认消息转发联系人事件
-    confirmSelectContacts (data) {
-      let user_ids = [];
-      let group_ids = [];
-      data.forEach((item) => {
-        if (item.type == 1) {
-          user_ids.push(item.id);
-        } else {
-          group_ids.push(item.id);
-        }
-      });
-
-      ServeForwardRecords({
-        forward_mode: this.multiSelect.mode,
-        talk_type: this.params.talk_type,
-        receiver_id: this.params.receiver_id,
-        records_ids: this.multiSelect.items,
-        receive_user_ids: user_ids,
-        receive_group_ids: group_ids,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.closeMultiSelect();
-          this.$notify({
-            title: "消息转发",
-            message: "消息转发成功...",
-            type: "success",
-          });
-        }
-      });
-    },
-
-    // 处理消息时间是否显示
-    compareTime (index, datetime) {
-      if (datetime == undefined) {
-        return false;
-      }
-      if (typeof datetime == "number") {
-        datetime = this.unixToDate(datetime, "yyyy-MM-dd hh:mm");
-      }
-
-      if (this.records[index].is_revoke == 1) {
-        return false;
-      }
-
-      datetime = datetime.replace(/-/g, "/");
-      let time = Math.floor(Date.parse(datetime) / 1000);
-      let currTime = Math.floor(new Date().getTime() / 1000);
-
-      // 当前时间5分钟内时间不显示
-      if (currTime - time < 300) return false;
-
-      // 判断是否是最后一条消息,最后一条消息默认显示时间
-      if (index == this.records.length - 1) {
-        return true;
-      }
-
-      let nextDate = this.records[index + 1].createTime.replace(/-/g, "/");
-
-      return !(
-        parseTime(new Date(datetime), "{y}-{m}-{d} {h}:{i}") ==
-        parseTime(new Date(nextDate), "{y}-{m}-{d} {h}:{i}")
-      );
-    },
-
-    // 查看好友用户信息
-    catFriendDetail (value) {
-      this.$user(value);
-    },
-
-    // 撤回消息
-    revokeRecords (index, item) {
-      ServeRevokeRecords({
-        record_id: item.id,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.$store.commit("UPDATE_DIALOGUE", { id: item.id, is_revoke: 1 });
-        }
-      });
-    },
-
-    // 删除消息
-    removeRecords (index, item) {
-      let receiver_id = item.receiver_id;
-      if (item.talk_type == 1 && item.user_id != this.id) {
-        receiver_id = item.user_id;
-      }
-
-      ServeRemoveRecords({
-        talk_type: item.talk_type,
-        receiver_id: receiver_id,
-        record_id: item.id.toString(),
-      }).then((res) => {
-        if (res.code == 200) {
-          this.$store.commit("DELETE_DIALOGUE", index);
-        }
-      });
-    },
-
-    // 从列表中删除记录
-    delRecords (arr) {
-      this.$store.commit("BATCH_DELETE_DIALOGUE", arr);
-      return this;
-    },
-
-    // 开启多选模式
-    openMultiSelect () {
-      this.multiSelect.isOpen = true;
-    },
-
-    // 关闭多选模式
-    closeMultiSelect () {
-      this.multiSelect.isOpen = false;
-      this.multiSelect.items = [];
-    },
-
-    // 判断记录是否选中
-    verifyMultiSelect (records_id) {
-      return this.multiSelect.items.indexOf(records_id) >= 0;
-    },
-
-    // 触发多选事件
-    triggerMultiSelect (records_id) {
-      let i = this.multiSelect.items.indexOf(records_id);
-      if (i >= 0) {
-        this.multiSelect.items.splice(i, 1);
-      } else {
-        if (this.multiSelect.items.length >= 30) {
-          this.$notify({
-            title: "温馨提示",
-            message: "批量操作最大支持30条数据...",
-          });
-          return false;
-        }
-        this.multiSelect.items.push(records_id);
-      }
-    },
-
-    // 验证是否存在选择的指定类型的消息
-    verifyMultiSelectType (type) {
-      return this.records.some((item) => {
-        return this.verifyMultiSelect(item.id) && item.messageType == type;
-      });
-    },
-
-    // 消息点击右键触发自定义菜单
-    onCopy (idx, item, event) {
-      let menus = [];
-      let content = "";
-      if (document.getElementById("copy_class_" + item.id)) {
-        content = document.getElementById("copy_class_" + item.id).innerText;
-      }
-
-      if (content) {
-        menus.push({
-          label: "复制",
-          icon: "el-icon-document-copy",
-          customClass: "cus-contextmenu-item",
-          onClick: () => {
-            copyTextToClipboard(content);
-          },
-        });
-      }
-
-      if (item.user_id == this.id) {
-        let time =
-          new Date().getTime() - Date.parse(item.createTime.replace(/-/g, "/"));
-        if (Math.floor(time / 1000 / 60) < 2) {
-          menus.push({
-            label: "撤回",
-            icon: "el-icon-s-flag",
-            customClass: "cus-contextmenu-item",
-            onClick: () => {
-              this.revokeRecords(idx, item);
-            },
-          });
-        }
-      }
-
-      menus.push({
-        label: "删除",
-        icon: "el-icon-delete",
-        customClass: "cus-contextmenu-item",
-        onClick: () => {
-          this.removeRecords(idx, item);
-        },
-      });
-
-      menus.push({
-        label: "引用",
-        icon: "el-icon-connection",
-        customClass: "cus-contextmenu-item",
-        onClick: () => { },
-      });
-
-      menus.push({
-        label: "多选",
-        icon: "el-icon-finished",
-        customClass: "cus-contextmenu-item",
-        onClick: () => {
-          this.openMultiSelect();
-        },
-      });
-
-      // 判断是否是图片消息
-      if (item.messageType == 2 && item.file.file_type == 1) {
-        menus.push({
-          label: "收藏",
-          icon: "el-icon-picture",
-          customClass: "cus-contextmenu-item",
-          onClick: () => {
-            this.$store.commit("SAVE_USER_EMOTICON", {
-              record_id: item.id,
-            });
-          },
-        });
-      }
-
-      this.$contextmenu({
-        items: menus,
-        event,
-        customClass: "cus-contextmenu",
-        zIndex: 3,
-        minWidth: 120,
-      });
-
-      this.closeMultiSelect();
-      event.preventDefault();
-    },
-
-    hideChatGroup () {
-      this.group.panel = false;
-    },
-
-    // 修改群聊免打扰状态
-    disturbChange (detail) {
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: `2_${this.params.receiver_id}`,
-        is_disturb: parseInt(detail.status),
-      });
-    },
-
-    // 退出群聊回调事件
-    quitGroupSuccess () {
-      this.$emit("close-talk");
-    },
-
-    // 同步群信息
-    syncGroupInfo (groupInfo) {
-      this.$refs.panelHeader.setGroupNum(groupInfo.members_num);
-    },
-
-    // 对话面板滚动事件
-    talkPanelScroll (e) {
-      if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
-        this.loadChatRecords();
-        return;
-      }
-
-      const height = e.target.scrollTop + e.target.clientHeight + 5;
-      this.tipsBoard = height < e.target.scrollHeight;
-      if (this.tipsBoard == false && this.unreadMessage.num > 0) {
-        this.$store.commit("CLEAR_TLAK_UNREAD_MESSAGE");
-      }
-    },
-
-    // 聊天版本滚动到底部
-    talkPanelScrollBottom () {
-      let el = document.getElementById("lumenChatPanel");
+  if (isBottom || record.to == id.value) {
+    nextTick(() => {
       el.scrollTop = el.scrollHeight;
+    });
+  } else {
+    talkStore.SET_TLAK_UNREAD_MESSAGE({
+      content: content,
+      nickname: record.name,
+    });
+  }
+}
+
+// 推送编辑事件消息
+function onKeyboardEvent(text) {
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: index_name.value,
+    draft_text: text,
+  });
+
+  // 判断当前对话是否属于私聊信息
+  if (props.params.talk_type == 2 || !props.isOnline) return;
+
+  // 判断是否推送键盘输入事件消息
+  if (!settingsStore.keyboardEventNotify) {
+    return false;
+  }
+
+  let time = new Date().getTime();
+  // 判断在两秒内是否已推送事件
+  if (keyboardEvent.time != 0 && time - keyboardEvent.time < 2000)
+    return;
+
+  keyboardEvent.time = time;
+
+  // 调用父类Websocket组件发送消息
+  SocketInstance.emit("event_keyboard", {
+    sender_id: id.value,
+    receiver_id: props.params.receiver_id,
+  });
+}
+
+
+
+function resetRecordState() {
+  loadRecord.minRecord = 0;
+  loadRecord.pageNumber = 0;
+  tipsBoard.value = false;
+  multiSelect.value = {
+    isOpen: false,
+    items: [],
+    mode: 0,
+  };
+}
+
+// 加载用户聊天详情信息
+function loadChatRecords() {
+  if (!props.params.talkId) {
+    loadRecord.status = 2;
+    return;
+  }
+
+  const isFirstPage = loadRecord.pageNumber === 0;
+  if (isFirstPage) {
+    loadRecord.pageNumber = 1;
+  } else {
+    loadRecord.pageNumber = loadRecord.pageNumber + 1;
+  }
+
+  const user_id = id.value;
+  const data = {
+    pageNumber: loadRecord.pageNumber,
+    pageSize: loadRecord.pageSize,
+    talkId: props.params.talkId,
+  };
+  loadRecord.status = 0;
+
+  const requestId = ++recordsRequestId;
+  let el = document.getElementById('lumenChatPanel');
+  let scrollHeight = el ? el.scrollHeight : 0;
+
+  ServeTalkRecords(data).then((res) => {
+    if (requestId !== recordsRequestId) return;
+    if (res.code !== 200 || !Array.isArray(res.result)) {
+      loadRecord.status = 2;
+      return;
+    }
+    const records = res.result.map((item) => {
+      let key = new Date().getTime();
+      item.float = "center";
+      if (item.toUser > 0) {
+        item.float = item.fromUser == user_id ? "right" : "left";
+      }
+      if (item.messageType == 'GOODS') {
+        item.text = JSON.parse(item.text);
+      }
+      if (item.messageType == 'ORDER') {
+        item.text = JSON.parse(item.text);
+      }
+      return { ...item, [key]: key };
+    });
+    dialogueStore.UNSHIFT_DIALOGUE(records);
+    loadRecord.status = records.length ? 1 : 2;
+    nextTick(() => {
+      if (!el) return;
+      if (isFirstPage) {
+        el.scrollTop = el.scrollHeight;
+      } else {
+        el.scrollTop = el.scrollHeight - scrollHeight;
+      }
+    });
+  }).catch(() => {
+    if (requestId !== recordsRequestId) return;
+    loadRecord.status = 2;
+  });
+}
+
+// 多选处理方式
+function handleMultiMode(value) {
+  if (value == "close") {
+    closeMultiSelect();
+    return false;
+  }
+
+  if (multiSelect.value.items.length <= 1) {
+    return false;
+  }
+
+  if (value == "forward" || value == "merge_forward") {
+    multiSelect.value.mode = value == "forward" ? 1 : 2;
+    if (verifyMultiSelectType(3)) {
+      proxy.$notify({
+        title: "消息转发",
+        message: "会话记录不支持合并转发",
+      });
+      return false;
+    }
+
+    proxy.$contacts({
+      confirm: confirmSelectContacts,
+    });
+  } else if (value == "delete") {
+    multiSelect.value.mode = 3;
+
+    // 批量删除
+    let ids = multiSelect.value.items;
+    ServeRemoveRecords({
+      talk_type: props.params.talk_type,
+      receiver_id: props.params.receiver_id,
+      record_id: ids.join(","),
+    }).then((res) => {
+      if (res.code == 200) {
+        delRecords(ids).closeMultiSelect();
+      }
+    });
+  }
+}
+
+// 确认消息转发联系人事件
+function confirmSelectContacts(data) {
+  let user_ids = [];
+  let group_ids = [];
+  data.forEach((item) => {
+    if (item.type == 1) {
+      user_ids.push(item.id);
+    } else {
+      group_ids.push(item.id);
+    }
+  });
+
+  ServeForwardRecords({
+    forward_mode: multiSelect.value.mode,
+    talk_type: props.params.talk_type,
+    receiver_id: props.params.receiver_id,
+    records_ids: multiSelect.value.items,
+    receive_user_ids: user_ids,
+    receive_group_ids: group_ids,
+  }).then((res) => {
+    if (res.code == 200) {
+      closeMultiSelect();
+      proxy.$notify({
+        title: "消息转发",
+        message: "消息转发成功...",
+        type: "success",
+      });
+    }
+  });
+}
+
+// 处理消息时间是否显示
+function compareTime(index, datetime) {
+  if (datetime == undefined) {
+    return false;
+  }
+  if (typeof datetime == "number") {
+    datetime = unixToDate(datetime, "yyyy-MM-dd hh:mm");
+  }
+
+  if (records.value[index].is_revoke == 1) {
+    return false;
+  }
+
+  datetime = datetime.replace(/-/g, "/");
+  let time = Math.floor(Date.parse(datetime) / 1000);
+  let currTime = Math.floor(new Date().getTime() / 1000);
+
+  // 当前时间5分钟内时间不显示
+  if (currTime - time < 300) return false;
+
+  // 判断是否是最后一条消息,最后一条消息默认显示时间
+  if (index == records.value.length - 1) {
+    return true;
+  }
+
+  let nextDate = records.value[index + 1].createTime.replace(/-/g, "/");
+
+  return !(
+    parseTime(new Date(datetime), "{y}-{m}-{d} {h}:{i}") ==
+    parseTime(new Date(nextDate), "{y}-{m}-{d} {h}:{i}")
+  );
+}
+
+// 查看好友用户信息
+function catFriendDetail(value) {
+  proxy.$user(value);
+}
+
+// 撤回消息
+function revokeRecords(index, item) {
+  ServeRevokeRecords({
+    record_id: item.id,
+  }).then((res) => {
+    if (res.code == 200) {
+      dialogueStore.UPDATE_DIALOGUE({ id: item.id, is_revoke: 1 });
+    }
+  });
+}
+
+// 删除消息
+function removeRecords(index, item) {
+  let receiver_id = item.receiver_id;
+  if (item.talk_type == 1 && item.user_id != id.value) {
+    receiver_id = item.user_id;
+  }
+
+  ServeRemoveRecords({
+    talk_type: item.talk_type,
+    receiver_id: receiver_id,
+    record_id: item.id.toString(),
+  }).then((res) => {
+    if (res.code == 200) {
+      dialogueStore.DELETE_DIALOGUE(index);
+    }
+  });
+}
+
+// 从列表中删除记录
+function delRecords(arr) {
+  dialogueStore.BATCH_DELETE_DIALOGUE(arr);
+  // 原代码 return this 供链式调用 closeMultiSelect
+  return { closeMultiSelect };
+}
+
+// 开启多选模式
+function openMultiSelect() {
+  multiSelect.value.isOpen = true;
+}
+
+// 关闭多选模式
+function closeMultiSelect() {
+  multiSelect.value.isOpen = false;
+  multiSelect.value.items = [];
+}
+
+// 判断记录是否选中
+function verifyMultiSelect(records_id) {
+  return multiSelect.value.items.indexOf(records_id) >= 0;
+}
+
+// 触发多选事件
+function triggerMultiSelect(records_id) {
+  let i = multiSelect.value.items.indexOf(records_id);
+  if (i >= 0) {
+    multiSelect.value.items.splice(i, 1);
+  } else {
+    if (multiSelect.value.items.length >= 30) {
+      proxy.$notify({
+        title: "温馨提示",
+        message: "批量操作最大支持30条数据...",
+      });
+      return false;
+    }
+    multiSelect.value.items.push(records_id);
+  }
+}
+
+// 验证是否存在选择的指定类型的消息
+function verifyMultiSelectType(type) {
+  return records.value.some((item) => {
+    return verifyMultiSelect(item.id) && item.messageType == type;
+  });
+}
+
+// 消息点击右键触发自定义菜单
+function onCopy(idx, item, event) {
+  let menus = [];
+  let content = "";
+  if (document.getElementById("copy_class_" + item.id)) {
+    content = document.getElementById("copy_class_" + item.id).innerText;
+  }
+
+  if (content) {
+    menus.push({
+      label: "复制",
+      icon: "el-icon-document-copy",
+      customClass: "cus-contextmenu-item",
+      onClick: () => {
+        copyTextToClipboard(content);
+      },
+    });
+  }
+
+  if (item.user_id == id.value) {
+    let time =
+      new Date().getTime() - Date.parse(item.createTime.replace(/-/g, "/"));
+    if (Math.floor(time / 1000 / 60) < 2) {
+      menus.push({
+        label: "撤回",
+        icon: "el-icon-s-flag",
+        customClass: "cus-contextmenu-item",
+        onClick: () => {
+          revokeRecords(idx, item);
+        },
+      });
+    }
+  }
+
+  menus.push({
+    label: "删除",
+    icon: "el-icon-delete",
+    customClass: "cus-contextmenu-item",
+    onClick: () => {
+      removeRecords(idx, item);
     },
-  },
-};
+  });
+
+  menus.push({
+    label: "引用",
+    icon: "el-icon-connection",
+    customClass: "cus-contextmenu-item",
+    onClick: () => { },
+  });
+
+  menus.push({
+    label: "多选",
+    icon: "el-icon-finished",
+    customClass: "cus-contextmenu-item",
+    onClick: () => {
+      openMultiSelect();
+    },
+  });
+
+  // 判断是否是图片消息
+  if (item.messageType == 2 && item.file.file_type == 1) {
+    menus.push({
+      label: "收藏",
+      icon: "el-icon-picture",
+      customClass: "cus-contextmenu-item",
+      onClick: () => {
+        emoticonStore.SAVE_USER_EMOTICON({
+          record_id: item.id,
+        });
+      },
+    });
+  }
+
+  proxy.$contextmenu({
+    items: menus,
+    event,
+    customClass: "cus-contextmenu",
+    zIndex: 3,
+    minWidth: 120,
+  });
+
+  closeMultiSelect();
+  event.preventDefault();
+}
+
+function hideChatGroup() {
+  group.panel = false;
+}
+
+// 修改群聊免打扰状态
+function disturbChange(detail) {
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: `2_${props.params.receiver_id}`,
+    is_disturb: parseInt(detail.status),
+  });
+}
+
+// 退出群聊回调事件
+function quitGroupSuccess() {
+  emit("close-talk");
+}
+
+// 同步群信息
+function syncGroupInfo(groupInfo) {
+  panelHeader.value.setGroupNum(groupInfo.members_num);
+}
+
+// 对话面板滚动事件
+function talkPanelScroll(e) {
+  if (e.target.scrollTop == 0 && loadRecord.status == 1) {
+    loadChatRecords();
+    return;
+  }
+
+  const height = e.target.scrollTop + e.target.clientHeight + 5;
+  tipsBoard.value = height < e.target.scrollHeight;
+  if (tipsBoard.value == false && unreadMessage.value.num > 0) {
+    talkStore.CLEAR_TLAK_UNREAD_MESSAGE();
+  }
+}
+
+// 聊天版本滚动到底部
+function talkPanelScrollBottom() {
+  let el = document.getElementById("lumenChatPanel");
+  el.scrollTop = el.scrollHeight;
+}
 </script>
 <style lang="less" scoped>
 .flex-a-c{
diff --git a/im/src/components/chat/panel/template/footPrint.vue b/im/src/components/chat/panel/template/footPrint.vue
index 62135c7a5..cf78c50a8 100644
--- a/im/src/components/chat/panel/template/footPrint.vue
+++ b/im/src/components/chat/panel/template/footPrint.vue
@@ -76,116 +76,115 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from "vuex";
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useTalkStore } from "@/stores/talk";
+import { useUserStore } from "@/stores/user";
 
-export default {
-  data () {
-    return {
-      noMoreList:{
-        'goods':{title:'暂无最近浏览',value:false},
-        'orders':{title:'暂无订单信息',value:false},
-      },
-      activeName: 'goods',
-      btnHide: undefined,
-      hide: true,
-      col: {
-        CANCELLED: 'danger',
-        PAID: 'danger',
-        TAKE: '',
-        COMPLETED: 'success',
-        DELIVERED: 'danger',
-        UNDELIVERED: 'warning',
-        UNPAID: '',
-        STAY_PICKED_UP: ''
-      },
-    }
-  },
-  computed: {
-    ...mapGetters(["talkItems"]),
-    ...mapState({
-      id: (state) => state.user.id,
-      toUser: (state) => state.user.toUser,
-    }),
-  },
-  methods: {
-    //跳转订单列表
+const talkStore = useTalkStore();
+const userStore = useUserStore();
 
-    scrollBottom (e) {
-      const { scrollTop, scrollHeight, clientHeight } = e.srcElement
-      if (scrollTop + clientHeight >= scrollHeight) {
-        this.$emit('loadMore')
-      }
-    },
-    loadMore () {
+const emit = defineEmits(["loadMore", "sendMessage"]);
 
-    },
-    // 发送消息回调事件
-    submitSendGoodsMessage (item) {
-      const context = {
-        id: item.id,
-        goodsId: item.goodsId,
-        thumbnail: item.thumbnail,
-        price: item.price,
-        goodsName: item.goodsName
-      }
-      const record = {
-        operation_type: "MESSAGE",
-        to: this.toUser.userId,
-        from: this.id,
-        message_type: "GOODS",
-        context: context,
-        talk_id: this.toUser.id,
-      };
-      this.$emit('sendMessage', record, context, 'GOODS');
-      localStorage.setItem(item.goodsId, 0)
-      item.btnHide = 0
-    },
-    // 发送订单列表
-    submitSendOrderMessage (item, index) {
-      console.log(item, 'item');
-    
-      const context = {
-        sn: item.sn,
-        groupImages: item.groupImages,
-        paymentTime: item.paymentTime,
-        groupName: item.groupName,
-        flowPrice: item.flowPrice,
-        orderItems:item.orderItems,
-        orderStatus: item.orderStatus
-      }
-      const record = {
-        operation_type: "MESSAGE",
-        to: this.toUser.userId,
-        from: this.id,
-        message_type: "ORDER",
-        context: context,
-        talk_id: this.toUser.id,
-      };
-      this.$emit('sendMessage', record, context, 'ORDER');
-      localStorage.setItem(item.goodsId, 0)
-      item.btnHide = 0
-    },
-    handleClick (tab, event) {
-      
-    }
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    list: {
-      type: Array,
-      default: () => [],
-    },
-    orderList: {
-      type: Array,
-      default: () => [],
-    },
+  orderList: {
+    type: Array,
+    default: () => [],
   },
-  mounted () {
-    //  state.user.toUser
-    // console.log(this.orderList, '  this.$store.state.user.toUser  this.$store.state.user.toUser  this.$store.state.user.toUser');
-    this.btnHide = localStorage.getItem('btnHide')
+});
+
+const noMoreList = ref({
+  'goods': { title: '暂无最近浏览', value: false },
+  'orders': { title: '暂无订单信息', value: false },
+});
+const activeName = ref('goods');
+const btnHide = ref(undefined);
+const hide = ref(true);
+const col = ref({
+  CANCELLED: 'danger',
+  PAID: 'danger',
+  TAKE: '',
+  COMPLETED: 'success',
+  DELIVERED: 'danger',
+  UNDELIVERED: 'warning',
+  UNPAID: '',
+  STAY_PICKED_UP: ''
+});
+
+const talkItems = computed(() => talkStore.talkItems);
+const id = computed(() => userStore.id);
+const toUser = computed(() => userStore.toUser);
+
+//跳转订单列表
+
+function scrollBottom (e) {
+  const { scrollTop, scrollHeight, clientHeight } = e.srcElement
+  if (scrollTop + clientHeight >= scrollHeight) {
+    emit('loadMore')
   }
 }
+function loadMore () {
+
+}
+// 发送消息回调事件
+function submitSendGoodsMessage (item) {
+  const context = {
+    id: item.id,
+    goodsId: item.goodsId,
+    thumbnail: item.thumbnail,
+    price: item.price,
+    goodsName: item.goodsName
+  }
+  const record = {
+    operation_type: "MESSAGE",
+    to: toUser.value.userId,
+    from: id.value,
+    message_type: "GOODS",
+    context: context,
+    talk_id: toUser.value.id,
+  };
+  emit('sendMessage', record, context, 'GOODS');
+  localStorage.setItem(item.goodsId, 0)
+  item.btnHide = 0
+}
+// 发送订单列表
+function submitSendOrderMessage (item, index) {
+  console.log(item, 'item');
+
+  const context = {
+    sn: item.sn,
+    groupImages: item.groupImages,
+    paymentTime: item.paymentTime,
+    groupName: item.groupName,
+    flowPrice: item.flowPrice,
+    orderItems:item.orderItems,
+    orderStatus: item.orderStatus
+  }
+  const record = {
+    operation_type: "MESSAGE",
+    to: toUser.value.userId,
+    from: id.value,
+    message_type: "ORDER",
+    context: context,
+    talk_id: toUser.value.id,
+  };
+  emit('sendMessage', record, context, 'ORDER');
+  localStorage.setItem(item.goodsId, 0)
+  item.btnHide = 0
+}
+function handleClick (tab, event) {
+
+}
+
+onMounted(() => {
+  //  state.user.toUser
+  // console.log(this.orderList, '  this.$store.state.user.toUser  this.$store.state.user.toUser  this.$store.state.user.toUser');
+  btnHide.value = localStorage.getItem('btnHide')
+});
 
 </script>
 
diff --git a/im/src/components/chat/panel/template/goodsLink.vue b/im/src/components/chat/panel/template/goodsLink.vue
index 72e1e1454..bd9930f1a 100644
--- a/im/src/components/chat/panel/template/goodsLink.vue
+++ b/im/src/components/chat/panel/template/goodsLink.vue
@@ -19,125 +19,124 @@
   </div>
 </template>
 
-<script>
-import { mapState, mapGetters } from "vuex";
+<script setup>
+import { computed, onMounted, nextTick, ref } from "vue";
 import SocketInstance from "@/im-server/socket-instance";
-export default {
-  data () {
-    return {
-      btnHide: undefined,
-      hide: true
-    }
+import { useUserStore } from "@/stores/user";
+import { useDialogueStore } from "@/stores/dialogue";
+import { useTalkStore } from "@/stores/talk";
+
+const userStore = useUserStore();
+const dialogueStore = useDialogueStore();
+const talkStore = useTalkStore();
+
+const props = defineProps({
+  goodsDetail: {
+    type: Object,
+    default: null,
   },
-  computed: {
-    ...mapGetters(["talkItems"]),
-    ...mapState({
-      id: (state) => state.user.id,
-      index_name: (state) => state.dialogue.index_name,
-      toUser: (state) => state.user.toUser,
-    }),
-  },
-  mounted () {
-    console.log(this.goodsDetail)
-    this.btnHide = localStorage.getItem('btnHide')
-  },
-  methods: {
-    toGoods () {
-      alert("toGoods")
-    },
-    toMessage () {
-      alert(JSON.stringify(this.toUser))
-      alert("toMessage")
-    },
-    // 回车键发送消息回调事件
-    submitSendMessage () {
-      console.log("发送");
-      const context = this.goodsDetail
-      const record = {
-        operation_type: "MESSAGE",
-        to: this.toUser.userId,
-        from: this.id,
-        message_type: "GOODS",
-        context: context,
-        talk_id: this.toUser.id,
-      };
-      SocketInstance.emit("event_talk", record);
+});
 
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: this.index_name,
-        draft_text: "",
-      });
+const btnHide = ref(undefined);
+const hide = ref(true);
+
+const talkItems = computed(() => talkStore.talkItems);
+const id = computed(() => userStore.id);
+const index_name = computed(() => dialogueStore.index_name);
+const toUser = computed(() => userStore.toUser);
+
+onMounted(() => {
+  console.log(props.goodsDetail)
+  btnHide.value = localStorage.getItem('btnHide')
+});
+
+function toGoods () {
+  alert("toGoods")
+}
+function toMessage () {
+  alert(JSON.stringify(toUser.value))
+  alert("toMessage")
+}
+// 回车键发送消息回调事件
+function submitSendMessage () {
+  console.log("发送");
+  const context = props.goodsDetail
+  const record = {
+    operation_type: "MESSAGE",
+    to: toUser.value.userId,
+    from: id.value,
+    message_type: "GOODS",
+    context: context,
+    talk_id: toUser.value.id,
+  };
+  SocketInstance.emit("event_talk", record);
+
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: index_name.value,
+    draft_text: "",
+  });
 
 
-      /**
-       * 插入数据
-       */
-      const insterChat = {
-        createTime: this.formateDateAndTimeToString(new Date()),
-        fromUser: this.id,
-        toUser: record.to,
-        isRead: false,
-        messageType: "GOODS",
-        text: context,
-        float: "right",
-      };
+  /**
+   * 插入数据
+   */
+  const insterChat = {
+    createTime: formateDateAndTimeToString(new Date()),
+    fromUser: id.value,
+    toUser: record.to,
+    isRead: false,
+    messageType: "GOODS",
+    text: context,
+    float: "right",
+  };
 
-      console.log("insterChat", insterChat);
-      // console.log("插入对话记录",'')
-      // 插入对话记录
-      this.$store.commit("PUSH_DIALOGUE", insterChat);
-      // 获取聊天面板元素节点
-      let el = document.getElementById("lumenChatPanel");
-      // 判断的滚动条是否在底部
-      let isBottom =
-        Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
+  console.log("insterChat", insterChat);
+  // console.log("插入对话记录",'')
+  // 插入对话记录
+  dialogueStore.PUSH_DIALOGUE(insterChat);
+  // 获取聊天面板元素节点
+  let el = document.getElementById("lumenChatPanel");
+  // 判断的滚动条是否在底部
+  let isBottom =
+    Math.ceil(el.scrollTop) + el.clientHeight >= el.scrollHeight;
 
-      if (isBottom || record.to == this.id) {
-        this.$nextTick(() => {
-          el.scrollTop = el.scrollHeight;
-        });
-      } else {
-        this.$store.commit("SET_TLAK_UNREAD_MESSAGE", {
-          content: content,
-          nickname: record.name,
-        });
-      }
-      // 发送后隐藏按钮  0：隐藏 1：显示
-      localStorage.setItem('btnHide', 0)
-      this.hide = false
-    },
-
-    formateDateAndTimeToString (date) {
-      var hours = date.getHours();
-      var mins = date.getMinutes();
-      var secs = date.getSeconds();
-      var msecs = date.getMilliseconds();
-      if (hours < 10) hours = "0" + hours;
-      if (mins < 10) mins = "0" + mins;
-      if (secs < 10) secs = "0" + secs;
-      if (msecs < 10) secs = "0" + msecs;
-      return (
-        this.formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
-      );
-    },
-
-    formatDateToString (date) {
-      var year = date.getFullYear();
-      var month = date.getMonth() + 1;
-      var day = date.getDate();
-      if (month < 10) month = "0" + month;
-      if (day < 10) day = "0" + day;
-      return year + "-" + month + "-" + day;
-    },
-  },
-  props: {
-    goodsDetail: {
-      type: Object,
-      default: null,
-    },
-  },
+  if (isBottom || record.to == id.value) {
+    nextTick(() => {
+      el.scrollTop = el.scrollHeight;
+    });
+  } else {
+    talkStore.SET_TLAK_UNREAD_MESSAGE({
+      content: content,
+      nickname: record.name,
+    });
+  }
+  // 发送后隐藏按钮  0：隐藏 1：显示
+  localStorage.setItem('btnHide', 0)
+  hide.value = false
 }
 
+function formateDateAndTimeToString (date) {
+  var hours = date.getHours();
+  var mins = date.getMinutes();
+  var secs = date.getSeconds();
+  var msecs = date.getMilliseconds();
+  if (hours < 10) hours = "0" + hours;
+  if (mins < 10) mins = "0" + mins;
+  if (secs < 10) secs = "0" + secs;
+  if (msecs < 10) secs = "0" + msecs;
+  return (
+    formatDateToString(date) + " " + hours + ":" + mins + ":" + secs
+  );
+}
+
+function formatDateToString (date) {
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  if (month < 10) month = "0" + month;
+  if (day < 10) day = "0" + day;
+  return year + "-" + month + "-" + day;
+}
 </script>
 
 <style scoped lang="less">
diff --git a/im/src/components/chat/panel/template/storeDetail.vue b/im/src/components/chat/panel/template/storeDetail.vue
index 6e9365220..a77f0a938 100644
--- a/im/src/components/chat/panel/template/storeDetail.vue
+++ b/im/src/components/chat/panel/template/storeDetail.vue
@@ -34,24 +34,18 @@
   </div>
 </template>
 
-<script>
-export default {
-  data () {
-    return {
-      value: null,
-      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
-    }
-  },
-  methods: {
-  },
-  props: {
-    storeInfo: {
-      type: Object,
-      default: null,
-    },
-  },
-}
+<script setup>
+import { ref } from "vue";
 
+defineProps({
+  storeInfo: {
+    type: Object,
+    default: null,
+  },
+});
+
+const value = ref(null);
+const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']);
 </script>
 
 <style scoped lang="less">
diff --git a/im/src/components/editor/MeEditor.vue b/im/src/components/editor/MeEditor.vue
index 7bdd7edf4..a70ca2825 100644
--- a/im/src/components/editor/MeEditor.vue
+++ b/im/src/components/editor/MeEditor.vue
@@ -77,7 +77,7 @@
     </el-container>
 
     <!-- 图片查看器 -->
-    <MeEditorImageView ref="imageViewer" v-model:show="imageViewer.isShow" :file="imageViewer.file"
+    <MeEditorImageView ref="imageViewerRef" v-model:show="imageViewer.isShow" :file="imageViewer.file"
       @confirm="confirmUploadImage" />
 
     <MeEditorRecorder v-if="recorder" @close="recorder = false" />
@@ -91,13 +91,14 @@
 
     <MeEditorVote v-if="vote.isShow" @close="
       () => {
-        this.vote.isShow = false;
+        vote.isShow = false;
       }
     " />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
 import MeEditorEmoticon from "./MeEditorEmoticon";
 import MeEditorFileManage from "./MeEditorFileManage";
 import MeEditorImageView from "./MeEditorImageView";
@@ -106,6 +107,8 @@ import MeEditorVote from "./MeEditorVote";
 import TalkCodeBlock from "@/components/chat/TalkCodeBlock";
 import { getPasteImgs, getDragPasteImg } from "@/utils/editor";
 import { findTalk } from "@/utils/talk";
+import { ElNotification } from "@/utils/message";
+import { useDialogueStore } from "@/stores/dialogue";
 
 import {
   ServeSendTalkCodeBlock,
@@ -113,233 +116,225 @@ import {
   ServeSendEmoticon,
 } from "@/api/chat";
 
-export default {
-  name: "MeEditor",
-  components: {
-    MeEditorEmoticon,
-    MeEditorFileManage,
-    MeEditorImageView,
-    TalkCodeBlock,
-    MeEditorRecorder,
-    MeEditorVote,
-  },
-  computed: {
-    talkUser () {
-      return this.$store.state.dialogue.index_name;
-    },
-    isGroupTalk () {
-      return this.$store.state.dialogue.talk_type == 2;
-    },
-  },
-  watch: {
-    talkUser (n_index_name) {
-      this.$refs.fileManageRef?.clear();
-      this.editorText = this.getDraftText(n_index_name);
-    },
-  },
-  data () {
-    return {
-      // 当前编辑的内容
-      editorText: "",
+defineOptions({ name: "MeEditor" });
 
-      // 图片查看器相关信息
-      imageViewer: {
-        isShow: false,
-        file: null,
-      },
+const emit = defineEmits(["keyboard-event", "send"]);
 
-      codeBlock: {
-        isShow: false,
-        editMode: true,
-      },
+const dialogueStore = useDialogueStore();
 
-      filesManager: {
-        isShow: false,
-      },
+const popoverEmoticon = ref(null);
+const restFile = ref(null);
+const restFile2 = ref(null);
+const textarea = ref(null);
+// 模板 ref 原名 imageViewer，与下方 imageViewer 数据同名，改名避免互相覆盖
+const imageViewerRef = ref(null);
+const fileManageRef = ref(null);
 
-      vote: {
-        isShow: false,
-      },
+const talkUser = computed(() => dialogueStore.index_name);
+const isGroupTalk = computed(() => dialogueStore.talk_type == 2);
 
-      // 录音器
-      recorder: false,
+// 当前编辑的内容
+const editorText = ref("");
 
-      // 上次发送消息的时间
-      sendtime: 0,
+// 图片查看器相关信息
+const imageViewer = reactive({
+  isShow: false,
+  file: null,
+});
 
-      // 发送间隔时间（默认1秒）
-      interval: 1000,
-    };
-  },
-  methods: {
-    // 读取对话编辑草稿信息 并赋值给当前富文本
-    getDraftText (index_name) {
-      return findTalk(index_name)?.draft_text || "";
-    },
+const codeBlock = reactive({
+  isShow: false,
+  editMode: true,
+});
 
-    //复制粘贴图片回调方法
-    pasteImage (e) {
-      let files = getPasteImgs(e);
-      if (files.length == 0) return;
+const filesManager = reactive({
+  isShow: false,
+});
 
-      this.openImageViewer(files[0]);
-    },
+const vote = reactive({
+  isShow: false,
+});
 
-    //拖拽上传图片回调方法
-    dragPasteImage (e) {
-      let files = getDragPasteImg(e);
-      if (files.length == 0) return;
+// 录音器
+const recorder = ref(false);
 
-      this.openImageViewer(files[0]);
-    },
+// 上次发送消息的时间
+const sendtime = ref(0);
 
-    inputEvent (e) {
-      this.$emit("keyboard-event", e.target.value);
-    },
+// 发送间隔时间（默认1秒）
+const interval = ref(1000);
 
-    // 键盘按下监听事件
-    keydownEvent (e) {
-      if (e.keyCode == 13 && this.editorText == "") {
+watch(talkUser, (n_index_name) => {
+  fileManageRef.value?.clear();
+  editorText.value = getDraftText(n_index_name);
+});
+
+// 读取对话编辑草稿信息 并赋值给当前富文本
+function getDraftText(index_name) {
+  return findTalk(index_name)?.draft_text || "";
+}
+
+//复制粘贴图片回调方法
+function pasteImage(e) {
+  let files = getPasteImgs(e);
+  if (files.length == 0) return;
+
+  openImageViewer(files[0]);
+}
+
+//拖拽上传图片回调方法
+function dragPasteImage(e) {
+  let files = getDragPasteImg(e);
+  if (files.length == 0) return;
+
+  openImageViewer(files[0]);
+}
+
+function inputEvent(e) {
+  emit("keyboard-event", e.target.value);
+}
+
+// 键盘按下监听事件
+function keydownEvent(e) {
+  if (e.keyCode == 13 && editorText.value == "") {
+    e.preventDefault();
+  }
+
+  // 回车发送消息
+  if (e.keyCode == 13 && e.shiftKey == false && editorText.value != "") {
+    let currentTime = new Date().getTime();
+
+    if (sendtime.value > 0) {
+      // 判断 1秒内只能发送一条消息
+      if (currentTime - sendtime.value < interval.value) {
         e.preventDefault();
-      }
-
-      // 回车发送消息
-      if (e.keyCode == 13 && e.shiftKey == false && this.editorText != "") {
-        let currentTime = new Date().getTime();
-
-        if (this.sendtime > 0) {
-          // 判断 1秒内只能发送一条消息
-          if (currentTime - this.sendtime < this.interval) {
-            e.preventDefault();
-            return false;
-          }
-        }
-
-        this.$emit("send", this.editorText);
-        this.editorText = "";
-        this.sendtime = currentTime;
-        e.preventDefault();
-      }
-    },
-
-    // 选择图片文件后回调方法
-    uploadImageChange (e) {
-      this.openImageViewer(e.target.files[0]);
-      this.$refs.restFile.value = null;
-    },
-
-    // 选择文件回调事件
-    uploadFileChange (e) {
-      let maxsize = 100 * 1024 * 1024;
-      if (e.target.files.length == 0) {
         return false;
       }
+    }
 
-      let file = e.target.files[0];
-      if (/\.(gif|jpg|jpeg|png|webp|GIF|JPG|PNG|WEBP)$/.test(file.name)) {
-        this.openImageViewer(file);
-        return;
-      }
+    emit("send", editorText.value);
+    editorText.value = "";
+    sendtime.value = currentTime;
+    e.preventDefault();
+  }
+}
 
-      if (file.size > maxsize) {
-        this.$notify.info({
-          title: "消息",
-          message: "上传文件不能大于100M",
-        });
-        return;
-      }
+// 选择图片文件后回调方法
+function uploadImageChange(e) {
+  openImageViewer(e.target.files[0]);
+  restFile.value.value = null;
+}
 
-      this.filesManager.isShow = true;
-      this.$refs.restFile2.value = null;
-      this.$refs.fileManageRef?.upload(file);
-    },
+// 选择文件回调事件
+function uploadFileChange(e) {
+  let maxsize = 100 * 1024 * 1024;
+  if (e.target.files.length == 0) {
+    return false;
+  }
 
-    // 打开图片查看器
-    openImageViewer (file) {
-      this.imageViewer.isShow = true;
-      this.imageViewer.file = file;
-    },
+  let file = e.target.files[0];
+  if (/\.(gif|jpg|jpeg|png|webp|GIF|JPG|PNG|WEBP)$/.test(file.name)) {
+    openImageViewer(file);
+    return;
+  }
 
-    // 代码块编辑器确认完成回调事件
-    confirmCodeBlock (data) {
-      const { talk_type, receiver_id } = this.$store.state.dialogue;
-      ServeSendTalkCodeBlock({
-        talk_type,
-        receiver_id,
-        code: data.code,
-        lang: data.language,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.codeBlock.isShow = false;
-        } else {
-          this.$notify({
-            title: "友情提示",
-            message: res.message,
-            type: "warning",
-          });
-        }
+  if (file.size > maxsize) {
+    ElNotification.info({
+      title: "消息",
+      message: "上传文件不能大于100M",
+    });
+    return;
+  }
+
+  filesManager.isShow = true;
+  restFile2.value.value = null;
+  fileManageRef.value?.upload(file);
+}
+
+// 打开图片查看器
+function openImageViewer(file) {
+  imageViewer.isShow = true;
+  imageViewer.file = file;
+}
+
+// 代码块编辑器确认完成回调事件
+function confirmCodeBlock(data) {
+  const { talk_type, receiver_id } = dialogueStore;
+  ServeSendTalkCodeBlock({
+    talk_type,
+    receiver_id,
+    code: data.code,
+    lang: data.language,
+  }).then((res) => {
+    if (res.code == 200) {
+      codeBlock.isShow = false;
+    } else {
+      ElNotification({
+        title: "友情提示",
+        message: res.message,
+        type: "warning",
       });
-    },
+    }
+  });
+}
 
-    // 确认上传图片消息回调事件
-    confirmUploadImage () {
-      let fileData = new FormData();
-      fileData.append("file", this.imageViewer.file);
+// 确认上传图片消息回调事件
+function confirmUploadImage() {
+  let fileData = new FormData();
+  fileData.append("file", imageViewer.file);
 
-      let ref = this.$refs.imageViewer;
+  let imageView = imageViewerRef.value;
 
-      ServeSendTalkImage(fileData)
-        .then((res) => {
-          ref.loading = false;
-          if (res.code == 200) {
-            ref.closeBox();
-          } else {
-            this.$notify({
-              title: "友情提示",
-              message: res.message,
-              type: "warning",
-            });
-          }
-        })
-        .finally(() => {
-          ref.loading = false;
-        });
-    },
-
-    // 选中表情包回调事件
-    selecteEmoticon (data) {
-      if (data.type == 1) {
-        let value = this.editorText;
-        let el = this.$refs.textarea;
-        let startPos = el.selectionStart;
-        let endPos = el.selectionEnd;
-        let newValue =
-          value.substring(0, startPos) +
-          data.value +
-          value.substring(endPos, value.length);
-
-        this.editorText = newValue;
-
-        if (el.setSelectionRange) {
-          setTimeout(() => {
-            let index = startPos + data.value.length;
-            el.setSelectionRange(index, index);
-            el.focus();
-          }, 0);
-        }
+  ServeSendTalkImage(fileData)
+    .then((res) => {
+      imageView.loading = false;
+      if (res.code == 200) {
+        imageView.closeBox();
       } else {
-        const { talk_type, receiver_id } = this.$store.state.dialogue;
-        ServeSendEmoticon({
-          talk_type,
-          receiver_id,
-          emoticon_id: data.value,
+        ElNotification({
+          title: "友情提示",
+          message: res.message,
+          type: "warning",
         });
       }
+    })
+    .finally(() => {
+      imageView.loading = false;
+    });
+}
 
-      this.$refs.popoverEmoticon.hide();
-    },
-  },
-};
+// 选中表情包回调事件
+function selecteEmoticon(data) {
+  if (data.type == 1) {
+    let value = editorText.value;
+    let el = textarea.value;
+    let startPos = el.selectionStart;
+    let endPos = el.selectionEnd;
+    let newValue =
+      value.substring(0, startPos) +
+      data.value +
+      value.substring(endPos, value.length);
+
+    editorText.value = newValue;
+
+    if (el.setSelectionRange) {
+      setTimeout(() => {
+        let index = startPos + data.value.length;
+        el.setSelectionRange(index, index);
+        el.focus();
+      }, 0);
+    }
+  } else {
+    const { talk_type, receiver_id } = dialogueStore;
+    ServeSendEmoticon({
+      talk_type,
+      receiver_id,
+      emoticon_id: data.value,
+    });
+  }
+
+  popoverEmoticon.value.hide();
+}
 </script>
 <style scoped lang="less">
 .editor-container {
diff --git a/im/src/components/editor/MeEditorEmoticon.vue b/im/src/components/editor/MeEditorEmoticon.vue
index 8a239fd83..80cee46df 100644
--- a/im/src/components/editor/MeEditorEmoticon.vue
+++ b/im/src/components/editor/MeEditorEmoticon.vue
@@ -41,7 +41,7 @@
           <div
             v-if="item.emoticon_id == 0"
             class="emoji-item custom-emoji"
-            @click="$refs.fileCustomEmoji.click()"
+            @click="fileCustomEmoji.click()"
           >
             <legacy-el-icon name="el-icon-picture" />
             <span>自定义</span>
@@ -93,96 +93,91 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from "vue";
 import MeEditorSystemEmoticon from "@/components/editor/MeEditorSystemEmoticon";
 import { emojiList as emoji } from "@/utils/emojis";
-import { mapState } from "vuex";
+import { useEmoticonStore } from "@/stores/emoticon";
 
-export default {
-  name: "MeEditorEmoticon",
-  components: {
-    MeEditorSystemEmoticon,
-  },
-  computed: {
-    ...mapState({
-      emojiItem: (state) => state.emoticon.items,
-    }),
-    showItems() {
-      let start = (this.page - 1) * this.pageSize;
-      let end = start + this.pageSize;
-      return this.emojiItem.slice(start, end);
-    },
-    pageTotal() {
-      return this.emojiItem.length / this.pageSize;
-    },
-  },
-  data() {
-    return {
-      emoji,
+defineOptions({ name: "MeEditorEmoticon" });
 
-      // 系统表情包套弹出窗
-      systemEmojiBox: false,
+const emit = defineEmits(["selected"]);
 
-      showEmoticonId: -1,
-      showTitle: "QQ表情/符号表情",
+const emoticonStore = useEmoticonStore();
 
-      page: 1,
-      pageSize: 13,
-    };
-  },
-  created() {
-    this.$store.commit("LOAD_USER_EMOTICON");
-  },
-  methods: {
-    // 表情包导航翻页
-    turnPage(type) {
-      if (type == 1) {
-        if (this.page == 1) return false;
-        this.page--;
-      } else {
-        if (this.page >= this.pageTotal) return false;
-        this.page++;
-      }
-    },
+const fileCustomEmoji = ref(null);
 
-    // 点击表情包导航
-    triggerItem(item) {
-      this.showEmoticonId = item.emoticon_id;
-      this.showTitle = item.name;
-    },
+// 系统表情包套弹出窗
+const systemEmojiBox = ref(false);
 
-    // 选中表情
-    clickEmoticon(emoji) {
-      this.callback({
-        type: 1,
-        value: emoji,
-      });
-    },
+const showEmoticonId = ref(-1);
+const showTitle = ref("QQ表情/符号表情");
 
-    // 发送图片表情包
-    clickImageEmoticon(item) {
-      this.callback({
-        type: 2,
-        value: item.media_id,
-      });
-    },
+const page = ref(1);
+const pageSize = ref(13);
 
-    callback(data) {
-      this.$emit("selected", data);
-    },
+const emojiItem = computed(() => emoticonStore.items);
 
-    // 自定义上传表情
-    customUploadEmoji(e) {
-      if (e.target.files.length == 0) {
-        return false;
-      }
+const showItems = computed(() => {
+  let start = (page.value - 1) * pageSize.value;
+  let end = start + pageSize.value;
+  return emojiItem.value.slice(start, end);
+});
 
-      this.$store.commit("UPLOAD_USER_EMOTICON", {
-        file: e.target.files[0],
-      });
-    },
-  },
-};
+const pageTotal = computed(() => {
+  return emojiItem.value.length / pageSize.value;
+});
+
+// 原 created 钩子
+emoticonStore.LOAD_USER_EMOTICON();
+
+// 表情包导航翻页
+function turnPage(type) {
+  if (type == 1) {
+    if (page.value == 1) return false;
+    page.value--;
+  } else {
+    if (page.value >= pageTotal.value) return false;
+    page.value++;
+  }
+}
+
+// 点击表情包导航
+function triggerItem(item) {
+  showEmoticonId.value = item.emoticon_id;
+  showTitle.value = item.name;
+}
+
+// 选中表情
+function clickEmoticon(emoji) {
+  callback({
+    type: 1,
+    value: emoji,
+  });
+}
+
+// 发送图片表情包
+function clickImageEmoticon(item) {
+  callback({
+    type: 2,
+    value: item.media_id,
+  });
+}
+
+function callback(data) {
+  emit("selected", data);
+}
+
+// 自定义上传表情
+function customUploadEmoji(e) {
+  if (e.target.files.length == 0) {
+    return false;
+  }
+
+  emoticonStore.UPLOAD_USER_EMOTICON({
+    file: e.target.files[0],
+  });
+}
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/im/src/components/editor/MeEditorFileManage.vue b/im/src/components/editor/MeEditorFileManage.vue
index a6960852a..c16a86f7f 100644
--- a/im/src/components/editor/MeEditorFileManage.vue
+++ b/im/src/components/editor/MeEditorFileManage.vue
@@ -77,179 +77,180 @@
   </el-container>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from 'vue'
+import { useDialogueStore } from '@/stores/dialogue'
 import { SvgNotData } from '@/core/icons'
 import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
 import { formatSize, getFileExt, parseTime } from '@/utils/functions'
 import { ServeSendTalkFile } from '@/api/chat'
 
-export default {
-  name: 'MeEditorFileManage',
-  emits: ['close', 'update:show'],
-  props: {
-    show: Boolean,
+defineOptions({ name: 'MeEditorFileManage' })
+
+const emit = defineEmits(['close', 'update:show'])
+
+defineProps({
+  show: Boolean,
+})
+
+const dialogueStore = useDialogueStore()
+
+const colors = ref([
+  {
+    color: '#f56c6c',
+    percentage: 20,
   },
-  components: {
-    SvgNotData,
+  {
+    color: '#e6a23c',
+    percentage: 40,
   },
-  data() {
-    return {
-      colors: [
-        {
-          color: '#f56c6c',
-          percentage: 20,
-        },
-        {
-          color: '#e6a23c',
-          percentage: 40,
-        },
-        {
-          color: '#5cb87a',
-          percentage: 60,
-        },
-        {
-          color: '#1989fa',
-          percentage: 80,
-        },
-        {
-          color: '#11ce65',
-          percentage: 100,
-        },
-      ],
-
-      items: [],
-    }
+  {
+    color: '#5cb87a',
+    percentage: 60,
   },
-  computed: {
-    total() {
-      return this.items.filter(item => {
-        return item.isDelete === false
-      }).length
-    },
-    successNum() {
-      return this.items.filter(item => {
-        return item.isDelete === false && item.status == 2
-      }).length
-    },
+  {
+    color: '#1989fa',
+    percentage: 80,
   },
-  methods: {
-    closeBox() {
-      this.$emit('update:show', false)
-      this.$emit('close', false)
-    },
-
-    upload(file) {
-      ServeFindFileSplitInfo({
-        file_name: file.name,
-        file_size: file.size,
-      }).then(res => {
-        if (res.code == 200) {
-          const { hash_name, split_size } = res.data
-
-          this.items.unshift({
-            hashName: hash_name,
-            originalFile: file,
-            filename: file.name,
-            status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常
-            progress: 0,
-            filesize: formatSize(file.size),
-            filetype: file.type || '未知',
-            datetime: parseTime(new Date(), '{m}-{d} {h}:{i}'),
-            ext: getFileExt(file.name),
-            forms: this.fileSlice(file, hash_name, split_size),
-            successNum: 0,
-            isDelete: false,
-          })
-
-          this.triggerUpload(hash_name)
-        }
-      })
-    },
-
-    // 处理拆分上传文件
-    fileSlice(file, hash, eachSize) {
-      const ext = getFileExt(file.name)
-      const splitNum = Math.ceil(file.size / eachSize) // 分片总数
-      const forms = []
-
-      // 处理每个分片的上传操作
-      for (let i = 0; i < splitNum; i++) {
-        let start = i * eachSize
-        let end = Math.min(file.size, start + eachSize)
-
-        // 构建表单
-        const form = new FormData()
-        form.append('file', file.slice(start, end))
-        form.append('name', file.name)
-        form.append('hash', hash)
-        form.append('ext', ext)
-        form.append('size', file.size)
-        form.append('split_index', i)
-        form.append('split_num', splitNum)
-        forms.push(form)
-      }
-
-      return forms
-    },
-
-    // 触发上传文件
-    triggerUpload(hashName) {
-      let $index = this.getFileIndex(hashName)
-      if ($index < 0 || this.items[$index].isDelte) {
-        return
-      }
-
-      let i = this.items[$index].successNum
-      let form = this.items[$index].forms[i]
-      let length = this.items[$index].forms.length
-      this.items[$index].status = 1
-      ServeFileSubareaUpload(form)
-        .then(res => {
-          if (res.code == 200) {
-            $index = this.getFileIndex(hashName)
-            this.items[$index].successNum++
-            this.items[$index].progress = Math.floor(
-              (this.items[$index].successNum / length) * 100
-            )
-            if (this.items[$index].successNum == length) {
-              this.items[$index].status = 2
-              if (res.data.is_file_merge) {
-                ServeSendTalkFile({
-                  hash_name: res.data.hash,
-                  receiver_id: this.$store.state.dialogue.receiver_id,
-                  talk_type: this.$store.state.dialogue.talk_type,
-                })
-              }
-            } else {
-              this.triggerUpload(hashName)
-            }
-          } else {
-            this.items[$index].status = 3
-          }
-        })
-        .catch(() => {
-          $index = this.getFileIndex(hashName)
-          this.items[$index].status = 3
-        })
-    },
-
-    // 获取分片文件数组索引
-    getFileIndex(hashName) {
-      return this.items.findIndex(item => {
-        return item.hashName === hashName
-      })
-    },
-
-    removeFile(hashName) {
-      let index = this.getFileIndex(hashName)
-      this.items[index].isDelete = true
-    },
-
-    clear() {
-      this.items = []
-    },
+  {
+    color: '#11ce65',
+    percentage: 100,
   },
+])
+
+const items = ref([])
+
+const total = computed(() => {
+  return items.value.filter(item => {
+    return item.isDelete === false
+  }).length
+})
+
+const successNum = computed(() => {
+  return items.value.filter(item => {
+    return item.isDelete === false && item.status == 2
+  }).length
+})
+
+function closeBox() {
+  emit('update:show', false)
+  emit('close', false)
 }
+
+function upload(file) {
+  ServeFindFileSplitInfo({
+    file_name: file.name,
+    file_size: file.size,
+  }).then(res => {
+    if (res.code == 200) {
+      const { hash_name, split_size } = res.data
+
+      items.value.unshift({
+        hashName: hash_name,
+        originalFile: file,
+        filename: file.name,
+        status: 0, // 文件上传状态 0:等待上传 1:上传中 2:上传完成 3:网络异常
+        progress: 0,
+        filesize: formatSize(file.size),
+        filetype: file.type || '未知',
+        datetime: parseTime(new Date(), '{m}-{d} {h}:{i}'),
+        ext: getFileExt(file.name),
+        forms: fileSlice(file, hash_name, split_size),
+        successNum: 0,
+        isDelete: false,
+      })
+
+      triggerUpload(hash_name)
+    }
+  })
+}
+
+// 处理拆分上传文件
+function fileSlice(file, hash, eachSize) {
+  const ext = getFileExt(file.name)
+  const splitNum = Math.ceil(file.size / eachSize) // 分片总数
+  const forms = []
+
+  // 处理每个分片的上传操作
+  for (let i = 0; i < splitNum; i++) {
+    let start = i * eachSize
+    let end = Math.min(file.size, start + eachSize)
+
+    // 构建表单
+    const form = new FormData()
+    form.append('file', file.slice(start, end))
+    form.append('name', file.name)
+    form.append('hash', hash)
+    form.append('ext', ext)
+    form.append('size', file.size)
+    form.append('split_index', i)
+    form.append('split_num', splitNum)
+    forms.push(form)
+  }
+
+  return forms
+}
+
+// 触发上传文件
+function triggerUpload(hashName) {
+  let $index = getFileIndex(hashName)
+  // 历史遗留：此处判断的是不存在的字段 isDelte（原样保留）
+  if ($index < 0 || items.value[$index].isDelte) {
+    return
+  }
+
+  let i = items.value[$index].successNum
+  let form = items.value[$index].forms[i]
+  let length = items.value[$index].forms.length
+  items.value[$index].status = 1
+  ServeFileSubareaUpload(form)
+    .then(res => {
+      if (res.code == 200) {
+        $index = getFileIndex(hashName)
+        items.value[$index].successNum++
+        items.value[$index].progress = Math.floor(
+          (items.value[$index].successNum / length) * 100
+        )
+        if (items.value[$index].successNum == length) {
+          items.value[$index].status = 2
+          if (res.data.is_file_merge) {
+            ServeSendTalkFile({
+              hash_name: res.data.hash,
+              receiver_id: dialogueStore.receiver_id,
+              talk_type: dialogueStore.talk_type,
+            })
+          }
+        } else {
+          triggerUpload(hashName)
+        }
+      } else {
+        items.value[$index].status = 3
+      }
+    })
+    .catch(() => {
+      $index = getFileIndex(hashName)
+      items.value[$index].status = 3
+    })
+}
+
+// 获取分片文件数组索引
+function getFileIndex(hashName) {
+  return items.value.findIndex(item => {
+    return item.hashName === hashName
+  })
+}
+
+function removeFile(hashName) {
+  let index = getFileIndex(hashName)
+  items.value[index].isDelete = true
+}
+
+function clear() {
+  items.value = []
+}
+
+// 父组件 MeEditor 通过 ref="fileManageRef" 调用 upload/clear
+defineExpose({ upload, clear })
 </script>
 <style lang="less" scoped>
 .container {
diff --git a/im/src/components/editor/MeEditorImageView.vue b/im/src/components/editor/MeEditorImageView.vue
index 313a10c34..d22c36e29 100644
--- a/im/src/components/editor/MeEditorImageView.vue
+++ b/im/src/components/editor/MeEditorImageView.vue
@@ -30,54 +30,57 @@
     </el-container>
   </div>
 </template>
-<script>
-export default {
-  name: 'MeEditorImageView',
-  emits: ['close', 'update:show', 'confirm'],
-  props: {
-    show: Boolean,
-    file: File,
-  },
-  watch: {
-    file(file) {
-      this.loadFile(file)
-    },
-  },
-  data() {
-    return {
-      src: '',
-      fileSize: '',
-      fileName: '',
-      loading: false,
-    }
-  },
-  methods: {
-    closeBox() {
-      if (this.loading) {
-        return false
-      }
+<script setup>
+import { ref, watch } from 'vue'
 
-      this.$emit('update:show', false)
-      this.$emit('close', false)
-    },
-    loadFile(file) {
-      let reader = new FileReader()
-      this.fileSize = Math.ceil(file.size / 1024)
-      this.fileName = file.name
-      reader.onload = () => {
-        this.src = reader.result
-      }
+defineOptions({ name: 'MeEditorImageView' })
 
-      reader.readAsDataURL(file)
-    },
+const emit = defineEmits(['close', 'update:show', 'confirm'])
+const props = defineProps({
+  show: Boolean,
+  file: File,
+})
 
-    // 确认按钮事件
-    uploadImage() {
-      this.loading = true
-      this.$emit('confirm')
-    },
-  },
+const src = ref('')
+const fileSize = ref('')
+const fileName = ref('')
+const loading = ref(false)
+
+watch(
+  () => props.file,
+  (file) => {
+    loadFile(file)
+  }
+)
+
+function closeBox() {
+  if (loading.value) {
+    return false
+  }
+
+  emit('update:show', false)
+  emit('close', false)
 }
+
+function loadFile(file) {
+  let reader = new FileReader()
+  fileSize.value = Math.ceil(file.size / 1024)
+  fileName.value = file.name
+  reader.onload = () => {
+    src.value = reader.result
+  }
+
+  reader.readAsDataURL(file)
+}
+
+// 确认按钮事件
+function uploadImage() {
+  loading.value = true
+  emit('confirm')
+}
+
+// 父组件通过 $refs.imageViewer 访问 loading / closeBox
+defineExpose({ loading, closeBox })
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/im/src/components/editor/MeEditorRecorder.vue b/im/src/components/editor/MeEditorRecorder.vue
index f313afe8b..baecd6cdd 100644
--- a/im/src/components/editor/MeEditorRecorder.vue
+++ b/im/src/components/editor/MeEditorRecorder.vue
@@ -140,168 +140,166 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onBeforeUnmount, ref } from 'vue'
 import Recorder from 'js-audio-recorder'
 
-export default {
+defineOptions({
   name: 'MeEditorRecorder',
-  data() {
-    return {
-      // 录音实例
-      recorder: null,
+})
 
-      // 录音时长
-      duration: 0,
+const emit = defineEmits(['close'])
 
-      // 播放时长
-      playTime: 0,
+// 录音实例
+let recorder = null
 
-      animation: false,
+// 录音时长
+const duration = ref(0)
 
-      // 当前状态
-      recorderStatus: 0, //0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 6:播放结束
+// 播放时长
+const playTime = ref(0)
 
-      playTimeout: null,
+const animation = ref(false)
+
+// 当前状态
+const recorderStatus = ref(0) //0:未开始录音 1:正在录音 2:暂停录音 3:结束录音 4:播放录音 5:停止播放 6:播放结束
+
+let playTimeout = null
+
+const datetime = computed(() => {
+  let hour = parseInt((duration.value / 60 / 60) % 24) //小时
+  let minute = parseInt((duration.value / 60) % 60) //分钟
+  let seconds = parseInt(duration.value % 60) //秒
+
+  if (hour < 10) hour = `0${hour}`
+  if (minute < 10) minute = `0${minute}`
+  if (seconds < 10) seconds = `0${seconds}`
+
+  return `${hour}:${minute}:${seconds}`
+})
+const formatPlayTime = computed(() => {
+  let hour = parseInt((playTime.value / 60 / 60) % 24) //小时
+  let minute = parseInt((playTime.value / 60) % 60) //分钟
+  let seconds = parseInt(playTime.value % 60) //秒
+
+  if (hour < 10) hour = `0${hour}`
+  if (minute < 10) minute = `0${minute}`
+  if (seconds < 10) seconds = `0${seconds}`
+
+  return `${hour}:${minute}:${seconds}`
+})
+
+onBeforeUnmount(() => {
+  if (recorder) {
+    destroyRecorder()
+  }
+})
+
+const closeBox = () => {
+  if (recorder == null) {
+    emit('close', false)
+    return
+  }
+
+  if (recorderStatus.value == 1) {
+    stopRecorder()
+  } else if (recorderStatus.value == 4) {
+    pausePlayRecorder()
+  }
+
+  // 销毁录音后关闭窗口
+  destroyRecorder(() => {
+    emit('close', false)
+  })
+}
+
+// 开始录音
+const startRecorder = () => {
+  // http://recorder.api.zhuyuntao.cn/Recorder/event.html
+  // https://blog.csdn.net/qq_41619796/article/details/107865602
+  recorder = new Recorder()
+  recorder.onprocess = d => {
+    d = parseInt(d)
+    duration.value = d
+  }
+
+  recorder.start().then(
+    () => {
+      recorderStatus.value = 1
+      animation.value = true
+    },
+    error => {
+      console.log(`${error.name} : ${error.message}`)
     }
-  },
-  computed: {
-    datetime() {
-      let hour = parseInt((this.duration / 60 / 60) % 24) //小时
-      let minute = parseInt((this.duration / 60) % 60) //分钟
-      let seconds = parseInt(this.duration % 60) //秒
-
-      if (hour < 10) hour = `0${hour}`
-      if (minute < 10) minute = `0${minute}`
-      if (seconds < 10) seconds = `0${seconds}`
-
-      return `${hour}:${minute}:${seconds}`
-    },
-    formatPlayTime() {
-      let hour = parseInt((this.playTime / 60 / 60) % 24) //小时
-      let minute = parseInt((this.playTime / 60) % 60) //分钟
-      let seconds = parseInt(this.playTime % 60) //秒
-
-      if (hour < 10) hour = `0${hour}`
-      if (minute < 10) minute = `0${minute}`
-      if (seconds < 10) seconds = `0${seconds}`
-
-      return `${hour}:${minute}:${seconds}`
-    },
-  },
-  beforeUnmount() {
-    if (this.recorder) {
-      this.destroyRecorder()
+  )
+}
+// 暂停录音
+const pauseRecorder = () => {
+  recorder.pause()
+  recorderStatus.value = 2
+  animation.value = false
+}
+// 继续录音
+const resumeRecorder = () => {
+  recorderStatus.value = 1
+  recorder.resume()
+  animation.value = true
+}
+// 结束录音
+const stopRecorder = () => {
+  recorderStatus.value = 3
+  recorder.stop()
+  animation.value = false
+}
+// 录音播放
+const playRecorder = () => {
+  recorderStatus.value = 4
+  recorder.play()
+  playTimeouts()
+  animation.value = true
+}
+// 暂停录音播放
+const pausePlayRecorder = () => {
+  recorderStatus.value = 5
+  recorder.pausePlay()
+  clearInterval(playTimeout)
+  animation.value = false
+}
+// 恢复录音播放
+const resumePlayRecorder = () => {
+  recorderStatus.value = 4
+  recorder.resumePlay()
+  playTimeouts()
+  animation.value = true
+}
+// 销毁录音
+const destroyRecorder = callBack => {
+  recorder.destroy().then(() => {
+    recorder = null
+    if (callBack) {
+      callBack()
     }
-  },
-  methods: {
-    closeBox() {
-      if (this.recorder == null) {
-        this.$emit('close', false)
-        return
-      }
+  })
+}
+// 获取录音文件大小（单位：字节）
+const recorderSize = () => {
+  return recorder.fileSize
+}
 
-      if (this.recorderStatus == 1) {
-        this.stopRecorder()
-      } else if (this.recorderStatus == 4) {
-        this.pausePlayRecorder()
-      }
+const playTimeouts = () => {
+  playTimeout = setInterval(() => {
+    let time = parseInt(recorder.getPlayTime())
+    playTime.value = time
+    if (time == duration.value) {
+      clearInterval(playTimeout)
+      animation.value = false
+      recorderStatus.value = 6
+    }
+  }, 100)
+}
 
-      // 销毁录音后关闭窗口
-      this.destroyRecorder(() => {
-        this.$emit('close', false)
-      })
-    },
-
-    // 开始录音
-    startRecorder() {
-      let _this = this
-      // http://recorder.api.zhuyuntao.cn/Recorder/event.html
-      // https://blog.csdn.net/qq_41619796/article/details/107865602
-      this.recorder = new Recorder()
-      this.recorder.onprocess = duration => {
-        duration = parseInt(duration)
-        _this.duration = duration
-      }
-
-      this.recorder.start().then(
-        () => {
-          this.recorderStatus = 1
-          this.animation = true
-        },
-        error => {
-          console.log(`${error.name} : ${error.message}`)
-        }
-      )
-    },
-    // 暂停录音
-    pauseRecorder() {
-      this.recorder.pause()
-      this.recorderStatus = 2
-      this.animation = false
-    },
-    // 继续录音
-    resumeRecorder() {
-      this.recorderStatus = 1
-      this.recorder.resume()
-      this.animation = true
-    },
-    // 结束录音
-    stopRecorder() {
-      this.recorderStatus = 3
-      this.recorder.stop()
-      this.animation = false
-    },
-    // 录音播放
-    playRecorder() {
-      this.recorderStatus = 4
-      this.recorder.play()
-      this.playTimeouts()
-      this.animation = true
-    },
-    // 暂停录音播放
-    pausePlayRecorder() {
-      this.recorderStatus = 5
-      this.recorder.pausePlay()
-      clearInterval(this.playTimeout)
-      this.animation = false
-    },
-    // 恢复录音播放
-    resumePlayRecorder() {
-      this.recorderStatus = 4
-      this.recorder.resumePlay()
-      this.playTimeouts()
-      this.animation = true
-    },
-    // 销毁录音
-    destroyRecorder(callBack) {
-      this.recorder.destroy().then(() => {
-        this.recorder = null
-        if (callBack) {
-          callBack()
-        }
-      })
-    },
-    // 获取录音文件大小（单位：字节）
-    recorderSize() {
-      return this.recorder.fileSize
-    },
-
-    playTimeouts() {
-      this.playTimeout = setInterval(() => {
-        let time = parseInt(this.recorder.getPlayTime())
-        this.playTime = time
-        if (time == this.duration) {
-          clearInterval(this.playTimeout)
-          this.animation = false
-          this.recorderStatus = 6
-        }
-      }, 100)
-    },
-
-    submit() {
-      alert('功能研发中,敬请期待...')
-    },
-  },
+const submit = () => {
+  alert('功能研发中,敬请期待...')
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/editor/MeEditorSystemEmoticon.vue b/im/src/components/editor/MeEditorSystemEmoticon.vue
index 0f3ba1616..0926c3cca 100644
--- a/im/src/components/editor/MeEditorSystemEmoticon.vue
+++ b/im/src/components/editor/MeEditorSystemEmoticon.vue
@@ -39,53 +39,52 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue'
 import { ServeFindSysEmoticon, ServeSetUserEmoticon } from '@/api/emoticon'
+import { useEmoticonStore } from '@/stores/emoticon'
 
-export default {
-  name: 'MeEditorSystemEmoticon',
-  data() {
-    return {
-      items: [],
-    }
-  },
-  created() {
-    this.loadSysEmoticon()
-  },
-  methods: {
-    closeBox() {
-      this.$emit('close')
-    },
+defineOptions({ name: 'MeEditorSystemEmoticon' })
 
-    // 获取系统表情包列表
-    loadSysEmoticon() {
-      ServeFindSysEmoticon().then(res => {
-        if (res.code == 200) {
-          this.items = res.data
-        }
-      })
-    },
+const emit = defineEmits(['close'])
 
-    setEmoticon(index, item, type) {
-      ServeSetUserEmoticon({
-        emoticon_id: item.id,
-        type: type,
-      }).then(res => {
-        if (res.code == 200) {
-          if (type == 1) {
-            this.items[index].status = 1
-            this.$store.commit('APPEND_SYS_EMOTICON', res.data)
-          } else {
-            this.items[index].status = 0
-            this.$store.commit('REMOVE_SYS_EMOTICON', {
-              emoticon_id: item.id,
-            })
-          }
-        }
-      })
-    },
-  },
+const emoticonStore = useEmoticonStore()
+
+const items = ref([])
+
+function closeBox() {
+  emit('close')
 }
+
+// 获取系统表情包列表
+function loadSysEmoticon() {
+  ServeFindSysEmoticon().then(res => {
+    if (res.code == 200) {
+      items.value = res.data
+    }
+  })
+}
+
+function setEmoticon(index, item, type) {
+  ServeSetUserEmoticon({
+    emoticon_id: item.id,
+    type: type,
+  }).then(res => {
+    if (res.code == 200) {
+      if (type == 1) {
+        items.value[index].status = 1
+        emoticonStore.APPEND_SYS_EMOTICON(res.data)
+      } else {
+        items.value[index].status = 0
+        emoticonStore.REMOVE_SYS_EMOTICON({
+          emoticon_id: item.id,
+        })
+      }
+    }
+  })
+}
+
+loadSysEmoticon()
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/im/src/components/editor/MeEditorVote.vue b/im/src/components/editor/MeEditorVote.vue
index 6c8c3bc3b..1d6cebbc2 100644
--- a/im/src/components/editor/MeEditorVote.vue
+++ b/im/src/components/editor/MeEditorVote.vue
@@ -69,95 +69,100 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, ref } from 'vue'
 import { ServeSendVote } from '@/api/chat'
+import { ElNotification } from '@/utils/message'
+import { useDialogueStore } from '@/stores/dialogue'
 
-export default {
+defineOptions({
   name: 'MeEditorVote',
-  props: {
-    group_id: {
-      type: [String, Number],
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      mode: 0,
-      title: '',
-      options: [
-        {
-          value: '',
-        },
-        {
-          value: '',
-        },
-        {
-          value: '',
-        },
-      ],
-    }
-  },
-  computed: {
-    isCheck() {
-      if (this.title == '') return true
+})
 
-      return this.options.some(option => option.value == '')
-    },
+const props = defineProps({
+  group_id: {
+    type: [String, Number],
+    default: 0,
   },
-  methods: {
-    submit() {
-      let items = []
-      const { receiver_id } = this.$store.state.dialogue
-      this.options.forEach(option => {
-        items.push(option.value)
-      })
+})
 
-      this.loading = true
+const emit = defineEmits(['close'])
 
-      ServeSendVote({
-        receiver_id,
-        mode: this.mode,
-        title: this.title,
-        options: items,
-      })
-        .then(res => {
-          if (res.code == 200) {
-            this.$emit('close')
-            this.$notify({
-              title: '友情提示',
-              message: '发起投票成功!',
-              type: 'success',
-            })
-          } else {
-            this.$notify({
-              title: '友情提示',
-              message: res.message,
-              type: 'warning',
-            })
-          }
+const dialogueStore = useDialogueStore()
+
+const loading = ref(false)
+const mode = ref(0)
+const title = ref('')
+const options = ref([
+  {
+    value: '',
+  },
+  {
+    value: '',
+  },
+  {
+    value: '',
+  },
+])
+
+const isCheck = computed(() => {
+  if (title.value == '') return true
+
+  return options.value.some(option => option.value == '')
+})
+
+function submit() {
+  let items = []
+  const { receiver_id } = dialogueStore
+  options.value.forEach(option => {
+    items.push(option.value)
+  })
+
+  loading.value = true
+
+  ServeSendVote({
+    receiver_id,
+    mode: mode.value,
+    title: title.value,
+    options: items,
+  })
+    .then(res => {
+      if (res.code == 200) {
+        emit('close')
+        ElNotification({
+          title: '友情提示',
+          message: '发起投票成功!',
+          type: 'success',
         })
-        .catch(() => {
-          this.loading = false
+      } else {
+        ElNotification({
+          title: '友情提示',
+          message: res.message,
+          type: 'warning',
         })
-    },
-    addOption() {
-      if (this.options.length >= 6) {
-        return false
       }
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
 
-      this.options.push({
-        value: '',
-      })
-    },
-    removeOption(index) {
-      if (this.options.length <= 2) {
-        return false
-      }
+function addOption() {
+  if (options.value.length >= 6) {
+    return false
+  }
 
-      this.options.splice(index, 1)
-    },
-  },
+  options.value.push({
+    value: '',
+  })
+}
+
+function removeOption(index) {
+  if (options.value.length <= 2) {
+    return false
+  }
+
+  options.value.splice(index, 1)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/face-null.vue b/im/src/components/face-null.vue
index f041cb819..2764ea287 100644
--- a/im/src/components/face-null.vue
+++ b/im/src/components/face-null.vue
@@ -2,17 +2,15 @@
     <img :src="'https://avatars.dicebear.com/api/initials/'+text+'.svg?fontSize=38'" alt=""/>
 </template>
 
-<script>
-    export default {
-        props:{
-            text:{
-                type:null,
-                default:''
-            }
+<script setup>
+    defineProps({
+        text:{
+            type:null,
+            default:''
         }
-    }
+    })
 </script>
 
 <style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+</style>
diff --git a/im/src/components/face.vue b/im/src/components/face.vue
index 2ef80ab36..8ccd8607b 100644
--- a/im/src/components/face.vue
+++ b/im/src/components/face.vue
@@ -2,19 +2,17 @@
     <img :src="text || 'https://avatars.dicebear.com/api/initials/'+name+'.svg?fontSize=38'" alt=""/>
 </template>
 
-<script>
-    export default {
-        props:{
-            text:{
-                type:null,
-                default:''
-            },
-            name:{
-                type:null,
-                default:''
-            },
-        }
-    }
+<script setup>
+    const props = defineProps({
+        text: {
+            type: null,
+            default: ''
+        },
+        name: {
+            type: null,
+            default: ''
+        },
+    });
 </script>
 
 <style lang="scss" scoped>
diff --git a/im/src/components/global/Empty.vue b/im/src/components/global/Empty.vue
index 5cd5ba4df..69fc52ac8 100644
--- a/im/src/components/global/Empty.vue
+++ b/im/src/components/global/Empty.vue
@@ -7,27 +7,23 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { noOncallImage } from "@/assets/images";
 
-export default {
+defineOptions({
   name: 'Empty',
-  props: {
-    text: {
-      type: String,
-      default: '数据为空...',
-    },
-    src: {
-      type: String,
-      default: noOncallImage,
-    },
+})
+
+defineProps({
+  text: {
+    type: String,
+    default: '数据为空...',
   },
-  data() {
-    return {}
+  src: {
+    type: String,
+    default: noOncallImage,
   },
-  created() {},
-  methods: {},
-}
+})
 </script>
 <style lang="less" scoped>
 .empty-content {
diff --git a/im/src/components/global/LegacyElIcon.vue b/im/src/components/global/LegacyElIcon.vue
index 9db0c0041..3979d742d 100644
--- a/im/src/components/global/LegacyElIcon.vue
+++ b/im/src/components/global/LegacyElIcon.vue
@@ -4,22 +4,21 @@
   </el-icon>
 </template>
 
-<script>
+<script setup>
+import { computed } from "vue";
 import { resolveLegacyIcon } from "@/core/legacy-icon-map";
 
-export default {
+defineOptions({
   name: "LegacyElIcon",
   inheritAttrs: false,
-  props: {
-    name: {
-      type: String,
-      default: "",
-    },
+});
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: "",
   },
-  computed: {
-    iconComponent() {
-      return resolveLegacyIcon(this.name);
-    },
-  },
-};
+});
+
+const iconComponent = computed(() => resolveLegacyIcon(props.name));
 </script>
diff --git a/im/src/components/global/Loading.vue b/im/src/components/global/Loading.vue
index 2cb1def57..13b48147a 100644
--- a/im/src/components/global/Loading.vue
+++ b/im/src/components/global/Loading.vue
@@ -12,16 +12,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Loading',
-  props: {
-    text: {
-      type: String,
-      default: '数据加载中 ...',
-    },
+<script setup>
+defineOptions({ name: 'Loading' })
+
+defineProps({
+  text: {
+    type: String,
+    default: '数据加载中 ...',
   },
-}
+})
 </script>
 <style lang="less" scoped>
 .loading-content {
diff --git a/im/src/components/layout/AbsModule.vue b/im/src/components/layout/AbsModule.vue
index e74552b8c..3d74f65b7 100644
--- a/im/src/components/layout/AbsModule.vue
+++ b/im/src/components/layout/AbsModule.vue
@@ -10,29 +10,24 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      isShow: false,
-    }
-  },
-  created() {
-    if (this.getNum() <= 2) {
-      setTimeout(() => {
-        this.isShow = true
-      }, 1000 * 60 * 2)
-    }
-  },
-  methods: {
-    getNum() {
-      return parseInt(sessionStorage.getItem('ABS_BOX')) || 0
-    },
-    close() {
-      sessionStorage.setItem('ABS_BOX', this.getNum() + 1)
-      this.isShow = false
-    },
-  },
+<script setup>
+import { ref } from "vue";
+
+const isShow = ref(false);
+
+const getNum = () => {
+  return parseInt(sessionStorage.getItem("ABS_BOX")) || 0;
+};
+
+const close = () => {
+  sessionStorage.setItem("ABS_BOX", getNum() + 1);
+  isShow.value = false;
+};
+
+if (getNum() <= 2) {
+  setTimeout(() => {
+    isShow.value = true;
+  }, 1000 * 60 * 2);
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/layout/AvatarCropper.vue b/im/src/components/layout/AvatarCropper.vue
index 98e111c0c..cc4c6e6db 100644
--- a/im/src/components/layout/AvatarCropper.vue
+++ b/im/src/components/layout/AvatarCropper.vue
@@ -89,113 +89,113 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive } from 'vue'
 import { VueCropper } from 'vue-cropper'
 import { ServeUploadFileStream } from '@/api/upload'
+import { ElMessage } from '@/utils/message'
 
-export default {
-  name: 'AvatarCropper',
-  components: {
-    VueCropper,
-  },
-  data() {
-    return {
-      cusPreviewsImg: '',
-      previews: {},
-      option: {
-        img: '',
-        size: 1,
-        full: false,
-        outputType: 'png',
-        canMove: true,
-        fixedBox: true,
-        original: false,
-        canMoveBox: true,
-        autoCrop: true,
-        // 只有自动截图开启 宽度高度才生效
-        autoCropWidth: 200,
-        autoCropHeight: 150,
-        centerBox: false,
-        high: true,
-      },
-      fixed: true,
-      fixedNumber: [1, 1],
+defineOptions({ name: 'AvatarCropper' })
+
+const emit = defineEmits(['close'])
+
+const cropper = ref(null)
+const fileInput = ref(null)
+
+const cusPreviewsImg = ref('')
+const previews = ref({})
+const option = reactive({
+  img: '',
+  size: 1,
+  full: false,
+  outputType: 'png',
+  canMove: true,
+  fixedBox: true,
+  original: false,
+  canMoveBox: true,
+  autoCrop: true,
+  // 只有自动截图开启 宽度高度才生效
+  autoCropWidth: 200,
+  autoCropHeight: 150,
+  centerBox: false,
+  high: true,
+})
+const fixed = ref(true)
+const fixedNumber = ref([1, 1])
+
+function clickUpload() {
+  fileInput.value.click()
+}
+function clearCrop() {
+  if (!cusPreviewsImg.value) return false
+  cropper.value.clearCrop()
+}
+function refreshCrop() {
+  if (!cusPreviewsImg.value) return false
+  cropper.value.refresh()
+}
+function rotateLeft() {
+  if (!cusPreviewsImg.value) return false
+  cropper.value.rotateLeft()
+}
+function rotateRight() {
+  if (!cusPreviewsImg.value) return false
+  cropper.value.rotateRight()
+}
+// 实时预览函数
+function realTime() {
+  cropper.value.getCropData(img => {
+    cusPreviewsImg.value = img
+  })
+}
+
+// 上传回调事件
+function uploadImg(e, num) {
+  let file = e.target.files[0]
+  if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
+    ElMessage('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
+    return false
+  }
+
+  let reader = new FileReader()
+  reader.onload = e => {
+    let data
+    if (typeof e.target.result === 'object') {
+      // 把Array Buffer转化为blob 如果是base64不需要
+      data = window.URL.createObjectURL(new Blob([e.target.result]))
+    } else {
+      data = e.target.result
     }
-  },
-  methods: {
-    clickUpload() {
-      this.$refs.fileInput.click()
-    },
-    clearCrop() {
-      if (!this.cusPreviewsImg) return false
-      this.$refs.cropper.clearCrop()
-    },
-    refreshCrop() {
-      if (!this.cusPreviewsImg) return false
-      this.$refs.cropper.refresh()
-    },
-    rotateLeft() {
-      if (!this.cusPreviewsImg) return false
-      this.$refs.cropper.rotateLeft()
-    },
-    rotateRight() {
-      if (!this.cusPreviewsImg) return false
-      this.$refs.cropper.rotateRight()
-    },
-    // 实时预览函数
-    realTime() {
-      this.$refs.cropper.getCropData(img => {
-        this.cusPreviewsImg = img
-      })
-    },
+    if (num === 1) {
+      option.img = data
+    } else if (num === 2) {
+      // 历史遗留 bug：example2 从未定义，原样保留（此分支实际不可达，num 恒为 1）
+      // eslint-disable-next-line no-undef
+      example2.img = data
+    }
+  }
+  // 转化为base64
+  // reader.readAsDataURL(file)
+  // 转化为blob
+  reader.readAsArrayBuffer(file)
+}
 
-    // 上传回调事件
-    uploadImg(e, num) {
-      let file = e.target.files[0]
-      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
-        this.$message('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
-        return false
+// 上传图片到服务器
+function uploadService() {
+  if (cusPreviewsImg.value == '') return
+  ServeUploadFileStream({
+    fileStream: cusPreviewsImg.value,
+  })
+    .then(res => {
+      if (res.code == 200) {
+        emit('close', 1, res.data.avatar)
+      } else {
+        ElMessage('文件上传失败,请稍后再试...')
       }
-
-      let reader = new FileReader()
-      reader.onload = e => {
-        let data
-        if (typeof e.target.result === 'object') {
-          // 把Array Buffer转化为blob 如果是base64不需要
-          data = window.URL.createObjectURL(new Blob([e.target.result]))
-        } else {
-          data = e.target.result
-        }
-        if (num === 1) {
-          this.option.img = data
-        } else if (num === 2) {
-          this.example2.img = data
-        }
-      }
-      // 转化为base64
-      // reader.readAsDataURL(file)
-      // 转化为blob
-      reader.readAsArrayBuffer(file)
-    },
-
-    // 上传图片到服务器
-    uploadService() {
-      if (this.cusPreviewsImg == '') return
-      ServeUploadFileStream({
-        fileStream: this.cusPreviewsImg,
-      })
-        .then(res => {
-          if (res.code == 200) {
-            this.$emit('close', 1, res.data.avatar)
-          } else {
-            this.$message('文件上传失败,请稍后再试...')
-          }
-        })
-        .catch(() => {
-          this.$message('文件上传失败,请稍后再试...')
-        })
-    },
-  },
+    })
+    .catch(() => {
+      ElMessage('文件上传失败,请稍后再试...')
+    })
 }
 </script>
 
diff --git a/im/src/components/layout/RewardModule.vue b/im/src/components/layout/RewardModule.vue
index 0e2b6ba53..24c633071 100644
--- a/im/src/components/layout/RewardModule.vue
+++ b/im/src/components/layout/RewardModule.vue
@@ -25,29 +25,25 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      isShow: false,
-    }
-  },
-  created() {
-    if (this.getNum() <= 3) {
-      setTimeout(() => {
-        this.isShow = true
-      }, 1000 * 30)
-    }
-  },
-  methods: {
-    getNum() {
-      return parseInt(localStorage.getItem('REWARD_BOX')) || 0
-    },
-    close() {
-      localStorage.setItem('REWARD_BOX', this.getNum() + 1)
-      this.isShow = false
-    },
-  },
+<script setup>
+import { ref } from 'vue'
+
+const isShow = ref(false)
+
+function getNum() {
+  return parseInt(localStorage.getItem('REWARD_BOX')) || 0
+}
+
+function close() {
+  localStorage.setItem('REWARD_BOX', getNum() + 1)
+  isShow.value = false
+}
+
+// created
+if (getNum() <= 3) {
+  setTimeout(() => {
+    isShow.value = true
+  }, 1000 * 30)
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/layout/SkinModule.vue b/im/src/components/layout/SkinModule.vue
index f25b6ff07..73b074be2 100644
--- a/im/src/components/layout/SkinModule.vue
+++ b/im/src/components/layout/SkinModule.vue
@@ -2,37 +2,31 @@
   <div></div>
 </template>
 
-<script>
+<script setup>
 // 待开发
-export default {
-  data() {
-    return {
-      skins: [
-        {
-          theme: '',
-          class: 'default',
-          text: '默认',
-        },
-        {
-          theme: '',
-          class: 'red',
-          text: '红色',
-        },
-        {
-          theme: '',
-          class: 'dark',
-          text: '暗黑',
-        },
-        {
-          theme: '',
-          class: 'blue',
-          text: '浅蓝',
-        },
-      ],
-    }
+import { ref } from "vue";
+
+const skins = ref([
+  {
+    theme: "",
+    class: "default",
+    text: "默认",
   },
-  created() {},
-  methods: {},
-}
+  {
+    theme: "",
+    class: "red",
+    text: "红色",
+  },
+  {
+    theme: "",
+    class: "dark",
+    text: "暗黑",
+  },
+  {
+    theme: "",
+    class: "blue",
+    text: "浅蓝",
+  },
+]);
 </script>
 <style lang="less" scoped></style>
diff --git a/im/src/components/layout/WelcomeModule.vue b/im/src/components/layout/WelcomeModule.vue
index cc9d3e798..032cd7e52 100644
--- a/im/src/components/layout/WelcomeModule.vue
+++ b/im/src/components/layout/WelcomeModule.vue
@@ -6,15 +6,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  components: {},
-  data () {
-    return {}
-  },
-  created () { },
-  methods: {},
-}
+<script setup>
 </script>
 <style lang="less" scoped>
 .welcome-box {
diff --git a/im/src/components/notify/FriendApplyNotify.vue b/im/src/components/notify/FriendApplyNotify.vue
index 300e7f8e7..2f50a7ff3 100644
--- a/im/src/components/notify/FriendApplyNotify.vue
+++ b/im/src/components/notify/FriendApplyNotify.vue
@@ -17,29 +17,23 @@
   </div>
 </template>
 
-<script>
-export default {
-  components: {},
-  props: {
-    params: {
-      type: Object,
-      default() {},
-    },
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  params: {
+    type: Object,
+    default() {},
   },
-  data() {
-    return {
-      avatar:
-        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-      talk_type: 1,
-      nickname: '阿萨纳斯卡',
-      content: '阿斯纳俺家你卡萨啊看看番按实际开发n',
-      datetime: '2021-06-18 23:15:12',
-    }
-  },
-  computed: {},
-  methods: {},
-  created() {},
-}
+})
+
+const avatar = ref(
+  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
+)
+const talk_type = ref(1)
+const nickname = ref('阿萨纳斯卡')
+const content = ref('阿斯纳俺家你卡萨啊看看番按实际开发n')
+const datetime = ref('2021-06-18 23:15:12')
 </script>
 <style lang="less" scoped>
 .notify-box {
diff --git a/im/src/components/notify/NewMessageNotify.vue b/im/src/components/notify/NewMessageNotify.vue
index adcbab153..b7267e3cf 100644
--- a/im/src/components/notify/NewMessageNotify.vue
+++ b/im/src/components/notify/NewMessageNotify.vue
@@ -19,43 +19,36 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { parseTime } from '@/utils/functions'
 
-export default {
-  components: {},
-  props: {
-    avatar: {
-      type: String,
-      default:
-        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
-    },
-    talk_type: {
-      type: Number,
-      default: 1,
-    },
-    nickname: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    datetime: {
-      type: String,
-      default: '',
-    },
+defineProps({
+  avatar: {
+    type: String,
+    default:
+      'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
   },
-  data() {
-    return {}
+  talk_type: {
+    type: Number,
+    default: 1,
   },
-  methods: {
-    formatTime(datetime) {
-      datetime = datetime || new Date()
-      return parseTime(datetime, '{m}/{d} {h}:{i} 分')
-    },
+  nickname: {
+    type: String,
+    default: '',
   },
+  content: {
+    type: String,
+    default: '',
+  },
+  datetime: {
+    type: String,
+    default: '',
+  },
+})
+
+const formatTime = (datetime) => {
+  datetime = datetime || new Date()
+  return parseTime(datetime, '{m}/{d} {h}:{i} 分')
 }
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/svg-icon/index.vue b/im/src/components/svg-icon/index.vue
index 2411c7400..45f2e2657 100644
--- a/im/src/components/svg-icon/index.vue
+++ b/im/src/components/svg-icon/index.vue
@@ -3,32 +3,33 @@
     <use :xlink:href="iconName" />
   </svg>
 </template>
-<script>
-export default {
-  name: 'svg-icon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true,
-    },
-    className: {
-      type: String,
-      default: '',
-    },
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'svg-icon' })
+
+const props = defineProps({
+  iconClass: {
+    type: String,
+    required: true,
   },
-  computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    },
+  className: {
+    type: String,
+    default: '',
   },
-}
+})
+
+const iconName = computed(() => {
+  return `#icon-${props.iconClass}`
+})
+
+const svgClass = computed(() => {
+  if (props.className) {
+    return 'svg-icon ' + props.className
+  } else {
+    return 'svg-icon'
+  }
+})
 </script>
 <style scoped>
 .svg-icon {
diff --git a/im/src/components/user/UserSearch.vue b/im/src/components/user/UserSearch.vue
index 896de74bc..bef1192cc 100644
--- a/im/src/components/user/UserSearch.vue
+++ b/im/src/components/user/UserSearch.vue
@@ -34,57 +34,55 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick, getCurrentInstance } from 'vue'
 import { ServeSearchContact } from '@/api/contacts'
 
-export default {
-  name: 'UserSearch',
-  data() {
-    return {
-      loading: false,
-      isShow: false,
-      mobile: '',
-      error: false,
-    }
-  },
-  methods: {
-    // 显示窗口
-    open() {
-      this.mobile = ''
-      this.isShow = true
-      this.$nextTick(() => {
-        document.getElementById('serach-mobile').focus()
-      })
-    },
+defineOptions({ name: 'UserSearch' })
 
-    // 关闭窗口
-    close() {
-      this.isShow = false
-    },
+const { proxy } = getCurrentInstance()
 
-    onSubmit() {
-      let { mobile } = this
+const loading = ref(false)
+const isShow = ref(false)
+const mobile = ref('')
+const error = ref(false)
 
-      if (mobile == '') return false
-
-      this.loading = true
-      ServeSearchContact({
-        mobile,
-      })
-        .then(res => {
-          if (res.code == 200) {
-            this.$user(res.data.id)
-            this.close()
-          } else {
-            this.error = true
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-  },
+// 显示窗口
+const open = () => {
+  mobile.value = ''
+  isShow.value = true
+  nextTick(() => {
+    document.getElementById('serach-mobile').focus()
+  })
 }
+
+// 关闭窗口
+const close = () => {
+  isShow.value = false
+}
+
+const onSubmit = () => {
+  if (mobile.value == '') return false
+
+  loading.value = true
+  ServeSearchContact({
+    mobile: mobile.value,
+  })
+    .then(res => {
+      if (res.code == 200) {
+        proxy.$user(res.data.id)
+        close()
+      } else {
+        error.value = true
+      }
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+// 父组件通过 ref 调用 open()（im/src/views/message/index.vue）
+defineExpose({ open, close })
 </script>
 <style lang="less" scoped>
 .lum-dialog-box {
diff --git a/im/src/components/user/user-card/UserCardDetail.vue b/im/src/components/user/user-card/UserCardDetail.vue
index d96a0ece4..7e9a36c7c 100644
--- a/im/src/components/user/user-card/UserCardDetail.vue
+++ b/im/src/components/user/user-card/UserCardDetail.vue
@@ -9,7 +9,7 @@
         <div class="user-header">
           <div class="avatar">
             <div class="avatar-box">
-              <img :src="detail.avatar" :onerror="$store.state.defaultAvatar" />
+              <img :src="detail.avatar" :onerror="appStore.defaultAvatar" />
             </div>
           </div>
           <div class="nickname">
@@ -121,136 +121,141 @@
     </el-container>
   </div>
 </template>
-<script>
+<script setup>
 // import { ServeSearchUser } from "@/api/user";
+import { reactive, ref } from "vue";
 import { ServeCreateContact, ServeEditContactRemark } from "@/api/contacts";
 import { toTalk } from "@/utils/talk";
 import { defaultUserBanner } from "@/assets/images";
+import { ElMessage } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "UserCardDetail",
-  props: {
-    user_id: {
-      type: Number,
-      default: 0,
-    },
+defineOptions({ name: "UserCardDetail" });
+
+const props = defineProps({
+  user_id: {
+    type: Number,
+    default: 0,
   },
-  data() {
-    return {
-      detail: {
-        mobile: "",
-        nickname: "",
-        avatar: "",
-        motto: "",
-        friend_status: 0,
-        friend_apply: 0,
-        nickname_remark: "",
-        bag: defaultUserBanner,
-        gender: 0,
-      },
+});
 
-      // 好友备注表单
-      editRemark: {
-        isShow: false,
-        text: "",
-      },
+const emit = defineEmits(["close", "changeRemark"]);
 
-      // 好友申请表单
-      apply: {
-        isShow: false,
-        text: "",
-      },
+const appStore = useAppStore();
 
-      contacts: false,
-    };
-  },
-  created() {
-    // this.loadUserDetail();
-  },
-  methods: {
-    formatGender(value) {
-      const arr = ["未知", "男", "女"];
-      return arr[value] || "未知";
-    },
-    formatMobile(value) {
-      if (!value) return "";
-      return (
-        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
-      );
-    },
-    close() {
-      if (this.contacts) return false;
+const detail = reactive({
+  mobile: "",
+  nickname: "",
+  avatar: "",
+  motto: "",
+  friend_status: 0,
+  friend_apply: 0,
+  nickname_remark: "",
+  bag: defaultUserBanner,
+  gender: 0,
+});
 
-      this.$emit("close");
-    },
+// 好友备注表单
+const editRemark = reactive({
+  isShow: false,
+  text: "",
+});
 
-    // 点击编辑备注信息
-    clickEditRemark() {
-      this.editRemark.isShow = true;
-      this.editRemark.text = this.detail.nickname_remark;
-    },
+// 好友申请表单
+const apply = reactive({
+  isShow: false,
+  text: "",
+});
 
-    // 获取用户信息
-    // loadUserDetail() {
-    //   ServeSearchUser({
-    //     user_id: this.user_id,
-    //   }).then((res) => {
-    //     if (res.code == 200) {
-    //       this.detail.user_id = res.data.id;
-    //       Object.assign(this.detail, res.data);
-    //     }
-    //   });
-    // },
+const contacts = ref(false);
 
-    // 发送添加好友申请
-    sendApply() {
-      if (this.apply.text == "") return;
-      ServeCreateContact({
-        friend_id: this.detail.user_id,
-        remark: this.apply.text,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.apply.isShow = false;
-          this.apply.text = "";
-          this.detail.friend_apply = 1;
-        } else {
-          this.$message.error("发送好友申请失败,请稍后再试...");
-        }
-      });
-    },
+// created() {
+//   loadUserDetail();
+// }
 
-    // 编辑好友备注信息
-    editRemarkSubmit() {
-      let data = {
-        friend_id: this.detail.user_id,
-        remarks: this.editRemark.text,
-      };
+const formatGender = (value) => {
+  const arr = ["未知", "男", "女"];
+  return arr[value] || "未知";
+};
 
-      if (data.remarks == this.detail.nickname_remark) {
-        this.editRemark.isShow = false;
-        return;
-      }
+const formatMobile = (value) => {
+  if (!value) return "";
+  return (
+    value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
+  );
+};
 
-      ServeEditContactRemark(data).then((res) => {
-        if (res.code == 200) {
-          this.editRemark.isShow = false;
-          this.detail.nickname_remark = data.remarks;
-          this.$emit("changeRemark", data);
-        }
-      });
-    },
+const close = () => {
+  if (contacts.value) return false;
 
-    // 隐藏申请表单
-    closeApply() {
-      this.apply.isShow = false;
-    },
+  emit("close");
+};
 
-    // 发送好友消息
-    sendMessage() {
-      this.close();
-      toTalk(1, this.user_id);
-    },
-  },
+// 点击编辑备注信息
+const clickEditRemark = () => {
+  editRemark.isShow = true;
+  editRemark.text = detail.nickname_remark;
+};
+
+// 获取用户信息
+// const loadUserDetail = () => {
+//   ServeSearchUser({
+//     user_id: props.user_id,
+//   }).then((res) => {
+//     if (res.code == 200) {
+//       detail.user_id = res.data.id;
+//       Object.assign(detail, res.data);
+//     }
+//   });
+// };
+
+// 发送添加好友申请
+const sendApply = () => {
+  if (apply.text == "") return;
+  ServeCreateContact({
+    friend_id: detail.user_id,
+    remark: apply.text,
+  }).then((res) => {
+    if (res.code == 200) {
+      apply.isShow = false;
+      apply.text = "";
+      detail.friend_apply = 1;
+    } else {
+      ElMessage.error("发送好友申请失败,请稍后再试...");
+    }
+  });
+};
+
+// 编辑好友备注信息
+const editRemarkSubmit = () => {
+  let data = {
+    friend_id: detail.user_id,
+    remarks: editRemark.text,
+  };
+
+  if (data.remarks == detail.nickname_remark) {
+    editRemark.isShow = false;
+    return;
+  }
+
+  ServeEditContactRemark(data).then((res) => {
+    if (res.code == 200) {
+      editRemark.isShow = false;
+      detail.nickname_remark = data.remarks;
+      emit("changeRemark", data);
+    }
+  });
+};
+
+// 隐藏申请表单
+const closeApply = () => {
+  apply.isShow = false;
+};
+
+// 发送好友消息
+const sendMessage = () => {
+  close();
+  toTalk(1, props.user_id);
 };
 </script>
 <style lang="less" scoped>
diff --git a/im/src/components/user/user-card/index.js b/im/src/components/user/user-card/index.js
index 2e4aaafb2..90bae6165 100644
--- a/im/src/components/user/user-card/index.js
+++ b/im/src/components/user/user-card/index.js
@@ -1,7 +1,7 @@
 import { createApp, h } from "vue";
 import UserCardDetail from "./UserCardDetail";
 import router from "@/router";
-import store from "@/store";
+import { createPinia } from "pinia";
 import { setupElementPlus } from "@/plugins/element";
 import { setupLegacyMessage } from "@/utils/message";
 import { registerDirectives } from "@/core/directives";
@@ -35,7 +35,7 @@ export default {
       cardApp.component("legacy-el-icon", LegacyElIcon);
       cardApp.config.globalProperties.$legacyIcon = resolveLegacyIcon;
       cardApp.use(router);
-      cardApp.use(store);
+      cardApp.use(createPinia());
       cardApp.mount(container);
     }
 
diff --git a/im/src/im-server/event/base.js b/im/src/im-server/event/base.js
index 43f12d5b7..f88c59517 100644
--- a/im/src/im-server/event/base.js
+++ b/im/src/im-server/event/base.js
@@ -1,4 +1,5 @@
-import store from "@/store";
+import { useUserStore } from "@/stores/user";
+import { useDialogueStore } from "@/stores/dialogue";
 import router from "@/router";
 import { ElNotification } from "element-plus";
 
@@ -10,20 +11,15 @@ class Base {
     this.$notify = ElNotification;
   }
 
-  getStoreInstance() {
-    return store;
-  }
-
   /**
    * 获取当前登录用户的ID
    */
   getAccountId() {
-    // console.log("store.state", store.state.user);
-    return store.state.user.id;
+    return useUserStore().id;
   }
 
   getTalkParams() {
-    let { talk_type, receiver_id, index_name } = store.state.dialogue;
+    let { talk_type, receiver_id, index_name } = useDialogueStore();
 
     return { talk_type, receiver_id, index_name };
   }
diff --git a/im/src/im-server/event/friend-apply.js b/im/src/im-server/event/friend-apply.js
index 50028e61f..a0c3a0679 100644
--- a/im/src/im-server/event/friend-apply.js
+++ b/im/src/im-server/event/friend-apply.js
@@ -1,5 +1,5 @@
 import Base from './base'
-import store from '@/store'
+import { useNotifyStore } from '@/stores/notify'
 import router from '@/router'
 
 /**
@@ -23,7 +23,7 @@ class FriendApply extends Base {
   }
 
   handle() {
-    store.commit('INCR_APPLY_NUM')
+    useNotifyStore().INCR_APPLY_NUM()
 
     this.$notify({
       title: '好友申请',
@@ -33,7 +33,7 @@ class FriendApply extends Base {
       type: 'info',
       customClass: 'pointer',
       onClick: function() {
-        store.commit('SET_APPLY_NUM', 0)
+        useNotifyStore().SET_APPLY_NUM(0)
         router.push({
           path: '/contacts/apply',
           query: { t: new Date().getTime() },
diff --git a/im/src/im-server/event/keyboard.js b/im/src/im-server/event/keyboard.js
index 257c26063..4802cd87f 100644
--- a/im/src/im-server/event/keyboard.js
+++ b/im/src/im-server/event/keyboard.js
@@ -1,4 +1,5 @@
 import Base from './base'
+import { useNotifyStore } from '@/stores/notify'
 
 /**
  * 键盘输入事件
@@ -38,9 +39,7 @@ class Keyboard extends Base {
       return false
     }
 
-    let store = this.getStoreInstance()
-
-    store.commit('UPDATE_KEYBOARD_EVENT')
+    useNotifyStore().UPDATE_KEYBOARD_EVENT()
   }
 }
 
diff --git a/im/src/im-server/event/login.js b/im/src/im-server/event/login.js
index 591918393..4e35d3395 100644
--- a/im/src/im-server/event/login.js
+++ b/im/src/im-server/event/login.js
@@ -1,4 +1,5 @@
 import Base from './base'
+import { useNotifyStore } from '@/stores/notify'
 
 /**
  * 好友状态事件
@@ -21,7 +22,7 @@ class Login extends Base {
   }
 
   handle() {
-    this.getStoreInstance().dispatch('ACT_UPDATE_FRIEND_STATUS', {
+    useNotifyStore().ACT_UPDATE_FRIEND_STATUS({
       status: this.resource.status,
       friend_id: parseInt(this.resource.user_id),
     })
diff --git a/im/src/im-server/event/revoke.js b/im/src/im-server/event/revoke.js
index 037dcfdd2..87ad02cf7 100644
--- a/im/src/im-server/event/revoke.js
+++ b/im/src/im-server/event/revoke.js
@@ -1,5 +1,5 @@
 import Base from './base'
-import store from '@/store'
+import { useDialogueStore } from '@/stores/dialogue'
 
 /**
  * 好友邀请消息处理
@@ -32,7 +32,7 @@ class Revoke extends Base {
       return false
     }
 
-    store.commit('UPDATE_DIALOGUE', {
+    useDialogueStore().UPDATE_DIALOGUE({
       id: this.resource.record_id,
       is_revoke: 1,
     })
diff --git a/im/src/im-server/event/talk.js b/im/src/im-server/event/talk.js
index bf8b98325..7faeb0070 100644
--- a/im/src/im-server/event/talk.js
+++ b/im/src/im-server/event/talk.js
@@ -5,6 +5,9 @@ import NewMessageNotify from "@/components/notify/NewMessageNotify";
 import { ServeClearTalkUnreadNum, ServeCreateTalkList } from "@/api/chat";
 import { formatTalkItem, findTalkIndex, toTalk } from "@/utils/talk";
 import { parseTime } from "@/utils/functions";
+import { useTalkStore } from "@/stores/talk";
+import { useNotifyStore } from "@/stores/notify";
+import { useDialogueStore } from "@/stores/dialogue";
 
 import mixin from '@/mixins/main-mixin'
 /**
@@ -44,9 +47,9 @@ class Talk extends Base {
 
     this.resource = resource;
 
-    // 判断发送者消息是否在当前用户列表中 
+    // 判断发送者消息是否在当前用户列表中
     const bridge = getAppBridge();
-    if (this.sender_id && !bridge.$store.state.talks.items.find(item => {
+    if (this.sender_id && !useTalkStore().items.find(item => {
       return item.userId == this.sender_id
     })) {
       bridge.loadUserSetting('update')
@@ -108,11 +111,10 @@ class Talk extends Base {
   }
 
   handle () {
-    let store = this.getStoreInstance();
     // console.log("触发handle");
     // 判断当前是否在聊天页面
     if (!this.isTalkPage()) {
-      store.commit("INCR_UNREAD_NUM");
+      useNotifyStore().INCR_UNREAD_NUM();
 
       // 判断消息是否来自于我自己，否则会提示消息通知
       return !this.isCurrSender() && this.showMessageNocice();
@@ -181,7 +183,7 @@ class Talk extends Base {
 
     ServeCreateTalkList(receiver_id).then(({ code, data }) => {
       if (code == 200) {
-        this.getStoreInstance().commit("PUSH_TALK_ITEM", formatTalkItem(data));
+        useTalkStore().PUSH_TALK_ITEM(formatTalkItem(data));
       }
     });
   }
@@ -190,13 +192,14 @@ class Talk extends Base {
    * 插入对话记录
    */
   insertTalkRecord () {
-    let store = this.getStoreInstance();
+    const talkStore = useTalkStore();
+    const dialogueStore = useDialogueStore();
     let record = this.resource;
     // console.log("插入谈话记录", record);
 
     record.float = this.getFloatType();
 
-    store.commit("PUSH_DIALOGUE", record);
+    dialogueStore.PUSH_DIALOGUE(record);
 
     // 获取聊天面板元素节点
     let el = document.getElementById("lumenChatPanel");
@@ -214,14 +217,14 @@ class Talk extends Base {
       });
     } else {
       // console.log("%c SET_TLAK_UNREAD_MESSAGE %c", "color:red");
-      store.commit("SET_TLAK_UNREAD_MESSAGE", {
+      talkStore.SET_TLAK_UNREAD_MESSAGE({
         content: this.getTalkText(),
         nickname: record.name,
       });
     }
     // console.log("%c 准备更新...UPDATE_TALK_ITEM ", "color:red");
 
-    store.commit("UPDATE_TALK_ITEM", {
+    talkStore.UPDATE_TALK_ITEM({
       index_name: this.getIndexName(),
       msg_text: this.getTalkText() || record.text,
       updated_at: parseTime(new Date()),
@@ -240,11 +243,9 @@ class Talk extends Base {
    * 更新对话列表记录
    */
   updateTalkItem () {
-    let store = this.getStoreInstance();
+    useNotifyStore().INCR_UNREAD_NUM();
 
-    store.commit("INCR_UNREAD_NUM");
-
-    store.commit("UPDATE_TALK_MESSAGE", {
+    useTalkStore().UPDATE_TALK_MESSAGE({
       index_name: this.getIndexName(),
       msg_text: this.getTalkText(),
       updated_at: parseTime(new Date()),
diff --git a/im/src/im-server/socket-instance.js b/im/src/im-server/socket-instance.js
index 6128329b7..346fc72df 100644
--- a/im/src/im-server/socket-instance.js
+++ b/im/src/im-server/socket-instance.js
@@ -1,4 +1,4 @@
-import store from "@/store";
+import { useAppStore } from "@/stores/app";
 import config from "@/config/config";
 import WsSocket from "@/plugins/ws-socket";
 import { getToken } from "@/utils/auth";
@@ -100,7 +100,7 @@ class SocketInstance {
    * @param {Boolean} status 连接状态
    */
   updateSocketStatus (status) {
-    store.commit("UPDATE_SOCKET_STATUS", status);
+    useAppStore().UPDATE_SOCKET_STATUS(status);
   }
 
   /**
diff --git a/im/src/main.js b/im/src/main.js
index f9b19a1fd..65afc6fd4 100644
--- a/im/src/main.js
+++ b/im/src/main.js
@@ -1,8 +1,8 @@
 import "core-js/stable";
 
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "@/App.vue";
-import store from "@/store";
 import router from "@/router";
 import MainMixin from "./mixins/main-mixin";
 import face from "@/components/face";
@@ -30,7 +30,7 @@ registerDirectives(app);
 registerGlobalComponents(app);
 registerIcons(app);
 
-app.use(store);
+app.use(createPinia());
 app.use(router);
 setupContextmenu(app);
 app.use(VueVirtualScroller);
diff --git a/im/src/mixins/main-mixin.js b/im/src/mixins/main-mixin.js
index 83b1bac20..d781d1e96 100644
--- a/im/src/mixins/main-mixin.js
+++ b/im/src/mixins/main-mixin.js
@@ -1,6 +1,8 @@
 import SocketInstance from "@/im-server/socket-instance";
 import { ServeGetUserSetting,ServeGetStoreSetting } from "@/api/user";
-import store from "@/store";
+import { useUserStore } from "@/stores/user";
+import { useTalkStore } from "@/stores/talk";
+import { useNotifyStore } from "@/stores/notify";
 import { ServeGetTalkList,ServeGetStoreTalkList } from "@/api/chat";
 import { formatTalkItem } from "@/utils/talk";
 export default {
@@ -23,7 +25,7 @@ export default {
         return ServeGetUserSetting().then(async ({ code, result }) => {
           // 如果result有值说明用户创建成功
           if (result) {
-            store.commit("UPDATE_USER_INFO", {
+            useUserStore().UPDATE_USER_INFO({
               id: result.id,
               face: result.face,
               name: result.nickName,
@@ -52,7 +54,7 @@ export default {
         //标识有值代表是店铺
         return ServeGetStoreSetting().then(async ({ code, result }) => {
           if (result) {
-            store.commit("UPDATE_USER_INFO", {
+            useUserStore().UPDATE_USER_INFO({
               id: result.id,
               face: result.storeLogo,
               name: result.storeName,
@@ -77,8 +79,8 @@ export default {
       ServeGetTalkList()
         .then(({ code, result }) => {
           if (code !== 200) return false;
-          store.commit("SET_UNREAD_NUM", 0);
-          store.commit("SET_TALK_ITEMS", {
+          useNotifyStore().SET_UNREAD_NUM(0);
+          useTalkStore().SET_TALK_ITEMS({
             items: result.map((item) => formatTalkItem(item)),
           });
           let index_name = sessionStorage.getItem("send_message_index_name");
@@ -97,8 +99,8 @@ export default {
       this.loadStatus = this.talkNum == 0 ? 0 : 1;
       return ServeGetStoreTalkList().then(({ code, result }) => {
         if (code !== 200 || !Array.isArray(result)) return false;
-        this.$store.commit("SET_UNREAD_NUM", 0);
-        this.$store.commit("SET_TALK_ITEMS", {
+        useNotifyStore().SET_UNREAD_NUM(0);
+        useTalkStore().SET_TALK_ITEMS({
           items: result.map((item) => formatTalkItem(item)),
         });
 
diff --git a/im/src/plugins/ws-socket.js b/im/src/plugins/ws-socket.js
index 9b70a0b44..d65b33208 100644
--- a/im/src/plugins/ws-socket.js
+++ b/im/src/plugins/ws-socket.js
@@ -1,6 +1,6 @@
 import { ElNotification, ElMessageBox } from "element-plus";
 let wsSignIn; // ws 是否是掉线状态
-import store from "@/store";
+import { useDialogueStore } from "@/stores/dialogue";
 class WsSocket {
   /**
    * Websocket 连接
@@ -81,7 +81,7 @@ class WsSocket {
      * 重连成功后关闭掉线提示，新增重连提示
      */
     if (wsSignIn) {
-      store.commit('SET_WS_STATUS',true);
+      useDialogueStore().SET_WS_STATUS(true);
       wsSignIn.close();
 
       ElNotification({
@@ -106,7 +106,7 @@ class WsSocket {
     connect.onclose = this.onClose.bind(this);
     this.connect = connect;
     
-    store.commit('SET_WS_STATUS',false);
+    useDialogueStore().SET_WS_STATUS(false);
   }
 
   /**
@@ -160,7 +160,7 @@ class WsSocket {
       duration: 0,
     });
     // 掉线更改消息状态
-    store.commit('SET_WS_STATUS',true);
+    useDialogueStore().SET_WS_STATUS(true);
     let reconnect = this.config.reconnect;
     if (reconnect.lockReconnect || reconnect.number == 0) {
       return;
diff --git a/im/src/store/getters.js b/im/src/store/getters.js
deleted file mode 100644
index c912f3bd1..000000000
--- a/im/src/store/getters.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const getters = {
-  // 用户登录状态
-  loginStatus: state => state.user.loginStatus,
-
-  // socket 连接状态
-  socketStatus: state => state.socketStatus,
-}
-
-export default getters
diff --git a/im/src/store/index.js b/im/src/store/index.js
deleted file mode 100644
index f3cda89e8..000000000
--- a/im/src/store/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { createStore } from "vuex";
-
-import user from "./modules/user";
-import talks from "./modules/talk";
-import notify from "./modules/notify";
-import settings from "./modules/settings";
-import emoticon from "./modules/emoticon";
-import dialogue from "./modules/dialogue";
-import note from "./modules/note";
-
-import state from "./state";
-import getters from "./getters";
-import mutations from "./mutations";
-
-const store = createStore({
-  modules: {
-    user,
-    notify,
-    talks,
-    settings,
-    emoticon,
-    dialogue,
-    note,
-  },
-  state,
-  getters,
-  mutations,
-});
-
-export default store;
diff --git a/im/src/store/modules/dialogue.js b/im/src/store/modules/dialogue.js
deleted file mode 100644
index 259612e31..000000000
--- a/im/src/store/modules/dialogue.js
+++ /dev/null
@@ -1,95 +0,0 @@
-export default {
-  state: {
-    // 对话来源[1:私聊;2:群聊]
-    talk_type: 0,
-
-    // 接收者ID
-    receiver_id: 0,
-
-    is_robot: 0,
-
-    // 聊天记录
-    records: [
-      {
-        id: "",
-        createTime: "",
-        toUser: "",
-        isRead: false,
-        messageType: "",
-        talkId: "",
-        text: "",
-        float: "",
-      },
-    ],
-    webSocketWithOut:false, // ws 是否是掉线 无输出状态
-    // 对话索引（聊天对话的唯一索引）
-    index_name: null,
-  },
-  mutations: {
-     // 设置ws状态
-     SET_WS_STATUS: (state,resource) =>{
-      state.webSocketWithOut = resource
-    },
-    // 更新对话
-    UPDATE_DIALOGUE_MESSAGE (state, resource) {
-      state.records = [];
-      state.talk_type = parseInt(resource.talk_type);
-      state.receiver_id = parseInt(resource.receiver_id);
-      state.is_robot = parseInt(resource.is_robot);
-
-      /**
-       * receiver_id 就是 好友id
-       * 比如 a 和 b 聊天  receiver_id = b的id
-       */
-      state.index_name = (resource.talk_type || 1) + "_" + resource.receiver_id;
-    },
-
-    // 数组头部压入对话记录1494593861786271744 1494593778193793024
-    UNSHIFT_DIALOGUE (state, records) {
-      // console.log("%c 数组头部压入对话记录", "color:green");
-      // console.log("state", state);
-      // console.log("records", records);
-      if (state.records.length > 0) {
-        state.records.unshift(...records);
-      } else {
-        state.records.push(...records);
-      }
-
-      // console.log("最后的数据",state.records)
-    },
-
-    // 推送对话记录
-    PUSH_DIALOGUE (state, record) {
-      record = {...record,webSocketStatus:state.webSocketWithOut}
-      console.log("推送对话",)
-      state.records.push(record);
-    },
-
-    // 更新对话记录
-    UPDATE_DIALOGUE (state, resource) {
-      for (let i in state.records) {
-        if (state.records[i].id === resource.id) {
-          Object.assign(state.records[i], resource);
-          break;
-        }
-      }
-    },
-
-    // 删除对话记录
-    DELETE_DIALOGUE (state, index) {
-      state.records.splice(index, 1);
-    },
-
-    BATCH_DELETE_DIALOGUE (state, ids) {
-      ids.forEach((record_id) => {
-        let index = state.records.findIndex((item) => item.id == record_id);
-        if (index >= 0) state.records.splice(index, 1);
-      });
-    },
-
-    // 数组头部压入对话记录
-    SET_DIALOGUE (state, records) {
-      state.records = records;
-    },
-  },
-};
diff --git a/im/src/store/modules/note.js b/im/src/store/modules/note.js
deleted file mode 100644
index cd9ee7694..000000000
--- a/im/src/store/modules/note.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const Note = {
-  state: {
-    tags: [],
-    class: [],
-  },
-  getters: {},
-  mutations: {
-    SET_NOTE_TAGS(state, tags) {
-      state.tags = tags
-    },
-
-    PUSH_NOTE_TAG(state, tag) {
-      state.tags.unshift(tag)
-    },
-  },
-}
-
-export default Note
diff --git a/im/src/store/modules/notify.js b/im/src/store/modules/notify.js
deleted file mode 100644
index 6fb769b09..000000000
--- a/im/src/store/modules/notify.js
+++ /dev/null
@@ -1,62 +0,0 @@
-export default {
-  state: {
-    // 聊天消息未读数
-    unreadNum: 0,
-
-    // 好友申请未读数
-    applyNum: 0,
-
-    // 好友键盘事件监听
-    inputEvent: 0,
-
-    // 好友登录状态监听
-    friendStatus: {
-      // 登录状态[0:下线;1:在线;]
-      status: 0,
-      // 好友ID
-      friend_id: 0,
-    },
-  },
-  mutations: {
-    // 消息未读数自增
-    INCR_UNREAD_NUM(state) {
-      console.log("触发消息未读")
-      state.unreadNum++
-    },
-
-    // 好友申请事件监听
-    INCR_APPLY_NUM(state) {
-      state.applyNum++
-    },
-
-    // 设置消息未读数
-    SET_UNREAD_NUM(state, value) {
-      state.unreadNum = value
-    },
-
-    // 好友申请事件监听
-    SET_APPLY_NUM(state, value) {
-      state.applyNum = value
-    },
-
-    // 自增好友键盘输入事件
-    UPDATE_KEYBOARD_EVENT(state) {
-      state.inputEvent++
-    },
-
-    // 更新好友登录状态
-    UPDATE_FRIEND_STATUS(state, value) {
-      state.friendStatus = value
-    },
-  },
-  actions: {
-    ACT_UPDATE_FRIEND_STATUS({ commit }, value) {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          commit('UPDATE_FRIEND_STATUS', value)
-          resolve()
-        }, 0)
-      })
-    },
-  },
-}
diff --git a/im/src/store/modules/settings.js b/im/src/store/modules/settings.js
deleted file mode 100644
index 49c120fd4..000000000
--- a/im/src/store/modules/settings.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  getToken,
-  getUserSettingCache,
-  setUserSettingCache,
-} from '@/utils/auth'
-
-let state = {
-  // 主题模式 true:全屏模式 false:居中模式
-  themeMode: true,
-
-  // 主题模式为居中模式下，body 的背景图片
-  themeBagImg: 'bag003',
-
-  // 主题颜色
-  themeColor: '',
-
-  // 消息提示音
-  notifyCueTone: true,
-
-  // 键盘输入事件消息推送开关
-  keyboardEventNotify: true,
-}
-
-if (getToken()) {
-  Object.assign(state, getUserSettingCache())
-}
-
-/**
- * 用户相关设置
- */
-const Settings = {
-  state,
-  mutations: {
-    // 设置主题模式
-    SET_THEME_MODE(state, mode) {
-      state.themeMode = mode
-      setUserSettingCache(state)
-    },
-
-    // 设置主题的背景图片
-    SET_THEME_BAGIMG(state, bagName) {
-      state.themeBagImg = bagName
-      setUserSettingCache(state)
-    },
-
-    // 主题颜色
-    SET_THEME_COLOR(state, color) {
-      state.themeColor = color
-      setUserSettingCache(state)
-    },
-
-    // 设置消息提示音状态
-    SET_NOTIFY_CUE_TONE(state, isTrue) {
-      state.notifyCueTone = isTrue
-      setUserSettingCache(state)
-    },
-
-    // 设置键盘输入事件消息推送状态
-    SET_KEYBOARD_EVENT_NOTIFY(state, isTrue) {
-      state.keyboardEventNotify = isTrue
-      setUserSettingCache(state)
-    },
-  },
-}
-
-export default Settings
diff --git a/im/src/store/modules/talk.js b/im/src/store/modules/talk.js
deleted file mode 100644
index b46153fa5..000000000
--- a/im/src/store/modules/talk.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { getSort, getMutipSort } from "@/utils/functions";
-import { formatTalkItem } from "@/utils/talk";
-import { ServeGetTalkList } from "@/api/chat";
-const Talk = {
-  state: {
-    // 用户对话列表
-    items: [],
-
-    // 最后一条消息
-    unreadMessage: {
-      num: 0,
-      nickname: "未知",
-      content: "...",
-    },
-
-    // 对话列表重载状态
-    heavyLoad: false,
-  },
-  getters: {
-    // 过滤所有置顶对话列表
-    topItems: (state) => {
-      return state.items.filter((item) => item.is_top == 1);
-    },
-    talkItems: (state) => {
-      return state.items.sort(
-        getMutipSort([getSort((a, b) => a.lastTalkTime > b.lastTalkTime)])
-      );
-    },
-    // 消息未读数总计
-    unreadNum: (state) => {
-      return state.items.reduce((total, item) => {
-        return total + parseInt(item.unread);
-      }, 0);
-    },
-    talkNum: (state) => state.items.length,
-  },
-  mutations: {
-   
-    // 设置对话列表
-    SET_TALK_ITEMS (state, resource) {
-      state.items = resource.items;
-    },
-
-    // 更新对话节点
-    UPDATE_TALK_ITEM (state, resource) {
-      // console.log("%c 更新对话节点", "color:#32c");
-      // console.log("state", state);
-      // console.log("resource", resource);
-
-      // console.log("%c 更新对话节点结束", "color:#32c",state.items);
-      let index = state.items.findIndex(
-        (item) => item.userId === resource.index_name.split("_")[1]
-      );
-      if (index >= 0) {
-        Object.assign(state.items[index], resource);
-      }
-    },
-
-    // 新增对话节点
-    PUSH_TALK_ITEM (state, resource) {
-      // console.log(state)
-      state.items.push(resource);
-    },
-
-    // 移除对话节点
-    REMOVE_TALK_ITEM (state, index_name) {
-      for (let i in state.items) {
-        if (state.items[i].index_name === index_name) {
-          state.items.splice(i, 1);
-          break;
-        }
-      }
-    },
-
-    // async getTalkList() {
-    //   let { code, result } = ServeGetTalkList();
-    //   if (code !== 200) return false;
-
-    //   store.commit("SET_TALK_ITEMS", {
-    //     items: result.map((item) => formatTalkItem(item)),
-    //   });
-    // },
-
-    // 更新对话消息
-    UPDATE_TALK_MESSAGE (state, resource) {
-      // console.log("%c 更新对话消息", "color:green");
-      // console.log("state", state);
-      // console.log("resource", resource);
-      // console.log("%c 更新对话结束", "color:green",state.items);
-
-      let enableGetTalkList = true
-      state.items.forEach(item => {
-        if (item.userId == resource.index_name.split("_")[1]) {
-          item.unread++;
-          item.msg_text = resource.msg_text;
-          item.lastTalkTime = resource.updated_at;
-          item.lastTalkMessage = resource.msg_text;
-          item.updated_at = resource.updated_at;
-          enableGetTalkList = false
-        }
-      })
-      // 循环如果当前用户不在对话记录列表中 就重新请求对话列表接口
-      enableGetTalkList ? this.commit('getTalkList') : ''
-    },
-
-    // 触发对话列表重新加载
-    TRIGGER_TALK_ITEMS_LOAD (state, status = false) {
-      state.heavyLoad = status;
-    },
-
-    SET_TLAK_UNREAD_MESSAGE (state, resource) {
-      state.unreadMessage.num++;
-      state.unreadMessage.nickname = resource.nickname;
-      state.unreadMessage.content = resource.content;
-    },
-
-    // 清除最后一条未读消息
-    CLEAR_TLAK_UNREAD_MESSAGE (state) {
-      state.unreadMessage = {
-        num: 0,
-        nickname: "未知",
-        content: "...",
-      };
-    },
-  },
-};
-
-export default Talk;
diff --git a/im/src/store/modules/user.js b/im/src/store/modules/user.js
deleted file mode 100644
index cb419250e..000000000
--- a/im/src/store/modules/user.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { setUserInfo, getUserInfo, getToken } from "@/utils/auth";
-import { defaultAvatar, defaultUserBanner } from "@/assets/images";
-
-// import { ServeLogout } from "@/api/user";
-
-let state = {
-  // 用户ID
-  id: 0,
-  // 用户昵称
-  name: "",
-  // 个性头像
-  face: defaultAvatar,
-  // 名片背景
-  visitCardBag: defaultUserBanner,
-  // 当前登录状态
-  loginStatus: false,
-  toUser:""
-};
-
-// 判断用户是否登录
-if (getToken()) {
-  let userInfo = getUserInfo();
-  state.name = userInfo.name;
-  state.id = userInfo.id;
-  state.face = userInfo.face ? userInfo.face : state.avatar;
-  state.loginStatus = true;
-}
-
-const User = {
-  state,
-  mutations: {
-    // 用户退出登录
-    USER_LOGOUT(state) {
-      state.id = 0;
-      state.face = "";
-      state.name = "";
-      state.loginStatus = false;
-    },
-
-    // 设置用户登录状态
-    UPDATE_LOGIN_STATUS(state) {
-      state.loginStatus = true;
-    },
-
-    // 更新用户信息
-    UPDATE_USER_INFO(state, data) {
-      for (const key in data) {
-        if (state.hasOwnProperty(key)) {
-          state[key] = data[key];
-        }
-      }
-
-      // 保存用户信息到缓存
-      setUserInfo({
-        id: state.id,
-        face: state.face,
-        name: state.name,
-      });
-    },
-  },
-  actions: {
-    // 退出登录处理操作
-    ACT_USER_LOGOUT({ commit }) {
-      commit("USER_LOGOUT");
-      // ServeLogout().finally(() => {
-      //   removeAll();
-      //   location.reload();
-      // });
-    },
-  },
-};
-
-export default User;
diff --git a/im/src/store/mutations.js b/im/src/store/mutations.js
deleted file mode 100644
index fac40256e..000000000
--- a/im/src/store/mutations.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// 根级别的 mutation
-const mutations = {
-  // 更新socket 连接状态
-  UPDATE_SOCKET_STATUS(state, status) {
-    state.socketStatus = status
-  },
-}
-
-export default mutations
diff --git a/im/src/store/state.js b/im/src/store/state.js
deleted file mode 100644
index 7538d2780..000000000
--- a/im/src/store/state.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { defaultAvatar } from "@/assets/images";
-
-// 根级别的 state
-const state = {
-  socketStatus: false,
-  website_name: process.env.VUE_APP_WEBSITE_NAME,
-  // 头像加载失败后的默认头像
-  defaultAvatar: "this.src='" + defaultAvatar + "'",
-}
-
-export default state
diff --git a/im/src/stores/app.js b/im/src/stores/app.js
new file mode 100644
index 000000000..cc690e26d
--- /dev/null
+++ b/im/src/stores/app.js
@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import { defaultAvatar } from "@/assets/images";
+import { useUserStore } from "./user";
+
+// 原 vuex 根级别 state/mutation/getter
+export const useAppStore = defineStore("app", {
+  state: () => ({
+    socketStatus: false,
+    website_name: process.env.VUE_APP_WEBSITE_NAME,
+    // 头像加载失败后的默认头像
+    defaultAvatar: "this.src='" + defaultAvatar + "'",
+  }),
+  getters: {
+    // 用户登录状态（跨模块读取 user store）
+    loginStatus: () => useUserStore().loginStatus,
+  },
+  actions: {
+    // 更新socket 连接状态
+    UPDATE_SOCKET_STATUS(status) {
+      this.socketStatus = status;
+    },
+  },
+});
diff --git a/im/src/stores/dialogue.js b/im/src/stores/dialogue.js
new file mode 100644
index 000000000..a029f54b0
--- /dev/null
+++ b/im/src/stores/dialogue.js
@@ -0,0 +1,94 @@
+import { defineStore } from "pinia";
+
+// 原 vuex dialogue 模块
+export const useDialogueStore = defineStore("dialogue", {
+  state: () => ({
+    // 对话来源[1:私聊;2:群聊]
+    talk_type: 0,
+
+    // 接收者ID
+    receiver_id: 0,
+
+    is_robot: 0,
+
+    // 聊天记录
+    records: [
+      {
+        id: "",
+        createTime: "",
+        toUser: "",
+        isRead: false,
+        messageType: "",
+        talkId: "",
+        text: "",
+        float: "",
+      },
+    ],
+    webSocketWithOut: false, // ws 是否是掉线 无输出状态
+    // 对话索引（聊天对话的唯一索引）
+    index_name: null,
+  }),
+  actions: {
+    // 设置ws状态
+    SET_WS_STATUS(resource) {
+      this.webSocketWithOut = resource;
+    },
+
+    // 更新对话
+    UPDATE_DIALOGUE_MESSAGE(resource) {
+      this.records = [];
+      this.talk_type = parseInt(resource.talk_type);
+      this.receiver_id = parseInt(resource.receiver_id);
+      this.is_robot = parseInt(resource.is_robot);
+
+      /**
+       * receiver_id 就是 好友id
+       * 比如 a 和 b 聊天  receiver_id = b的id
+       */
+      this.index_name = (resource.talk_type || 1) + "_" + resource.receiver_id;
+    },
+
+    // 数组头部压入对话记录
+    UNSHIFT_DIALOGUE(records) {
+      if (this.records.length > 0) {
+        this.records.unshift(...records);
+      } else {
+        this.records.push(...records);
+      }
+    },
+
+    // 推送对话记录
+    PUSH_DIALOGUE(record) {
+      record = { ...record, webSocketStatus: this.webSocketWithOut };
+      console.log("推送对话");
+      this.records.push(record);
+    },
+
+    // 更新对话记录
+    UPDATE_DIALOGUE(resource) {
+      for (let i in this.records) {
+        if (this.records[i].id === resource.id) {
+          Object.assign(this.records[i], resource);
+          break;
+        }
+      }
+    },
+
+    // 删除对话记录
+    DELETE_DIALOGUE(index) {
+      this.records.splice(index, 1);
+    },
+
+    BATCH_DELETE_DIALOGUE(ids) {
+      ids.forEach((record_id) => {
+        let index = this.records.findIndex((item) => item.id == record_id);
+        if (index >= 0) this.records.splice(index, 1);
+      });
+    },
+
+    // 数组头部压入对话记录
+    SET_DIALOGUE(records) {
+      this.records = records;
+    },
+  },
+});
diff --git a/im/src/store/modules/emoticon.js b/im/src/stores/emoticon.js
similarity index 67%
rename from im/src/store/modules/emoticon.js
rename to im/src/stores/emoticon.js
index f8868f914..d096f2d47 100644
--- a/im/src/store/modules/emoticon.js
+++ b/im/src/stores/emoticon.js
@@ -1,36 +1,36 @@
+import { defineStore } from "pinia";
 import { ServeFindUserEmoticon, ServeUploadEmoticon } from "@/api/emoticon";
-
 import { ServeCollectEmoticon } from "@/api/chat";
-
 import { ElNotification } from "element-plus";
 
-export default {
-  state: {
-    items: [
-    ],
-  },
-  mutations: {
+// 原 vuex emoticon 模块
+export const useEmoticonStore = defineStore("emoticon", {
+  state: () => ({
+    items: [],
+  }),
+  actions: {
     // 加载用户表情包
-    LOAD_USER_EMOTICON(state) {
+    LOAD_USER_EMOTICON() {
       // TODO 隐藏
       return;
+      // eslint-disable-next-line no-unreachable
       ServeFindUserEmoticon().then((res) => {
         if (res.code == 200) {
           const { collect_emoticon, sys_emoticon } = res.data;
 
-          state.items = state.items.slice(0, 2);
+          this.items = this.items.slice(0, 2);
 
           // 用户收藏的系统表情包
-          state.items[1].list = collect_emoticon;
+          this.items[1].list = collect_emoticon;
 
           // 用户添加的系统表情包
-          state.items.push(...sys_emoticon);
+          this.items.push(...sys_emoticon);
         }
       });
     },
 
     // 收藏用户表情包
-    SAVE_USER_EMOTICON(state, resoure) {
+    SAVE_USER_EMOTICON(resoure) {
       ServeCollectEmoticon({
         record_id: resoure.record_id,
       })
@@ -42,7 +42,7 @@ export default {
               type: "success",
             });
 
-            this.commit("LOAD_USER_EMOTICON");
+            this.LOAD_USER_EMOTICON();
           }
         })
         .catch(() => {
@@ -55,13 +55,13 @@ export default {
     },
 
     // 自定义上传用户表情包
-    UPLOAD_USER_EMOTICON(state, resoure) {
+    UPLOAD_USER_EMOTICON(resoure) {
       let fileData = new FormData();
       fileData.append("emoticon", resoure.file);
       ServeUploadEmoticon(fileData)
         .then((res) => {
           if (res.code == 200) {
-            state.items[1].list.push(res.data);
+            this.items[1].list.push(res.data);
           }
         })
         .catch(() => {
@@ -74,18 +74,18 @@ export default {
     },
 
     // 添加系统表情包
-    APPEND_SYS_EMOTICON(state, resoure) {
-      state.items.push(resoure);
+    APPEND_SYS_EMOTICON(resoure) {
+      this.items.push(resoure);
     },
 
     // 移除系统表情包
-    REMOVE_SYS_EMOTICON(state, resoure) {
-      for (let i in state.items) {
-        if (state.items[i].emoticon_id === resoure.emoticon_id) {
-          state.items.splice(i, 1);
+    REMOVE_SYS_EMOTICON(resoure) {
+      for (let i in this.items) {
+        if (this.items[i].emoticon_id === resoure.emoticon_id) {
+          this.items.splice(i, 1);
           break;
         }
       }
     },
   },
-};
+});
diff --git a/im/src/stores/note.js b/im/src/stores/note.js
new file mode 100644
index 000000000..687b5e022
--- /dev/null
+++ b/im/src/stores/note.js
@@ -0,0 +1,18 @@
+import { defineStore } from "pinia";
+
+// 原 vuex note 模块
+export const useNoteStore = defineStore("note", {
+  state: () => ({
+    tags: [],
+    class: [],
+  }),
+  actions: {
+    SET_NOTE_TAGS(tags) {
+      this.tags = tags;
+    },
+
+    PUSH_NOTE_TAG(tag) {
+      this.tags.unshift(tag);
+    },
+  },
+});
diff --git a/im/src/stores/notify.js b/im/src/stores/notify.js
new file mode 100644
index 000000000..c15dce6d9
--- /dev/null
+++ b/im/src/stores/notify.js
@@ -0,0 +1,65 @@
+import { defineStore } from "pinia";
+
+// 原 vuex notify 模块
+export const useNotifyStore = defineStore("notify", {
+  state: () => ({
+    // 聊天消息未读数
+    unreadNum: 0,
+
+    // 好友申请未读数
+    applyNum: 0,
+
+    // 好友键盘事件监听
+    inputEvent: 0,
+
+    // 好友登录状态监听
+    friendStatus: {
+      // 登录状态[0:下线;1:在线;]
+      status: 0,
+      // 好友ID
+      friend_id: 0,
+    },
+  }),
+  actions: {
+    // 消息未读数自增
+    INCR_UNREAD_NUM() {
+      console.log("触发消息未读");
+      this.unreadNum++;
+    },
+
+    // 好友申请事件监听
+    INCR_APPLY_NUM() {
+      this.applyNum++;
+    },
+
+    // 设置消息未读数
+    SET_UNREAD_NUM(value) {
+      this.unreadNum = value;
+    },
+
+    // 好友申请事件监听
+    SET_APPLY_NUM(value) {
+      this.applyNum = value;
+    },
+
+    // 自增好友键盘输入事件
+    UPDATE_KEYBOARD_EVENT() {
+      this.inputEvent++;
+    },
+
+    // 更新好友登录状态
+    UPDATE_FRIEND_STATUS(value) {
+      this.friendStatus = value;
+    },
+
+    // 原 vuex action ACT_UPDATE_FRIEND_STATUS
+    ACT_UPDATE_FRIEND_STATUS(value) {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          this.UPDATE_FRIEND_STATUS(value);
+          resolve();
+        }, 0);
+      });
+    },
+  },
+});
diff --git a/im/src/stores/settings.js b/im/src/stores/settings.js
new file mode 100644
index 000000000..7c80a7115
--- /dev/null
+++ b/im/src/stores/settings.js
@@ -0,0 +1,68 @@
+import { defineStore } from "pinia";
+import {
+  getToken,
+  getUserSettingCache,
+  setUserSettingCache,
+} from "@/utils/auth";
+
+// 模块加载时合并本地缓存的设置（与原 vuex settings 模块行为一致）
+function initState() {
+  const state = {
+    // 主题模式 true:全屏模式 false:居中模式
+    themeMode: true,
+
+    // 主题模式为居中模式下，body 的背景图片
+    themeBagImg: "bag003",
+
+    // 主题颜色
+    themeColor: "",
+
+    // 消息提示音
+    notifyCueTone: true,
+
+    // 键盘输入事件消息推送开关
+    keyboardEventNotify: true,
+  };
+  if (getToken()) {
+    Object.assign(state, getUserSettingCache());
+  }
+  return state;
+}
+
+/**
+ * 用户相关设置
+ */
+export const useSettingsStore = defineStore("settings", {
+  state: initState,
+  actions: {
+    // 设置主题模式
+    SET_THEME_MODE(mode) {
+      this.themeMode = mode;
+      setUserSettingCache(this.$state);
+    },
+
+    // 设置主题的背景图片
+    SET_THEME_BAGIMG(bagName) {
+      this.themeBagImg = bagName;
+      setUserSettingCache(this.$state);
+    },
+
+    // 主题颜色
+    SET_THEME_COLOR(color) {
+      this.themeColor = color;
+      setUserSettingCache(this.$state);
+    },
+
+    // 设置消息提示音状态
+    SET_NOTIFY_CUE_TONE(isTrue) {
+      this.notifyCueTone = isTrue;
+      setUserSettingCache(this.$state);
+    },
+
+    // 设置键盘输入事件消息推送状态
+    SET_KEYBOARD_EVENT_NOTIFY(isTrue) {
+      this.keyboardEventNotify = isTrue;
+      setUserSettingCache(this.$state);
+    },
+  },
+});
diff --git a/im/src/stores/talk.js b/im/src/stores/talk.js
new file mode 100644
index 000000000..d98634b15
--- /dev/null
+++ b/im/src/stores/talk.js
@@ -0,0 +1,111 @@
+import { defineStore } from "pinia";
+import { getSort, getMutipSort } from "@/utils/functions";
+
+// 原 vuex talks 模块
+export const useTalkStore = defineStore("talks", {
+  state: () => ({
+    // 用户对话列表
+    items: [],
+
+    // 最后一条消息
+    unreadMessage: {
+      num: 0,
+      nickname: "未知",
+      content: "...",
+    },
+
+    // 对话列表重载状态
+    heavyLoad: false,
+  }),
+  getters: {
+    // 过滤所有置顶对话列表
+    topItems: (state) => {
+      return state.items.filter((item) => item.is_top == 1);
+    },
+    // 原 vuex getter，注意：sort 会原地修改 items 数组（历史行为，原样保留）
+    talkItems: (state) => {
+      return state.items.sort(
+        getMutipSort([getSort((a, b) => a.lastTalkTime > b.lastTalkTime)])
+      );
+    },
+    // 消息未读数总计
+    unreadNum: (state) => {
+      return state.items.reduce((total, item) => {
+        return total + parseInt(item.unread);
+      }, 0);
+    },
+    talkNum: (state) => state.items.length,
+  },
+  actions: {
+    // 设置对话列表
+    SET_TALK_ITEMS(resource) {
+      this.items = resource.items;
+    },
+
+    // 更新对话节点
+    UPDATE_TALK_ITEM(resource) {
+      let index = this.items.findIndex(
+        (item) => item.userId === resource.index_name.split("_")[1]
+      );
+      if (index >= 0) {
+        Object.assign(this.items[index], resource);
+      }
+    },
+
+    // 新增对话节点
+    PUSH_TALK_ITEM(resource) {
+      this.items.push(resource);
+    },
+
+    // 移除对话节点
+    REMOVE_TALK_ITEM(index_name) {
+      for (let i in this.items) {
+        if (this.items[i].index_name === index_name) {
+          this.items.splice(i, 1);
+          break;
+        }
+      }
+    },
+
+    // 更新对话消息
+    UPDATE_TALK_MESSAGE(resource) {
+      let enableGetTalkList = true;
+      this.items.forEach((item) => {
+        if (item.userId == resource.index_name.split("_")[1]) {
+          item.unread++;
+          item.msg_text = resource.msg_text;
+          item.lastTalkTime = resource.updated_at;
+          item.lastTalkMessage = resource.msg_text;
+          item.updated_at = resource.updated_at;
+          enableGetTalkList = false;
+        }
+      });
+      // 循环如果当前用户不在对话记录列表中 就重新请求对话列表接口
+      // 原代码此处为 this.commit('getTalkList')，目标 action 早已被原作者注释删除，
+      // vuex 对未知 mutation 仅告警不中断，此处保留为空操作
+      if (enableGetTalkList) {
+        /* noop */
+      }
+    },
+
+    // 触发对话列表重新加载
+    TRIGGER_TALK_ITEMS_LOAD(status = false) {
+      this.heavyLoad = status;
+    },
+
+    SET_TLAK_UNREAD_MESSAGE(resource) {
+      this.unreadMessage.num++;
+      this.unreadMessage.nickname = resource.nickname;
+      this.unreadMessage.content = resource.content;
+    },
+
+    // 清除最后一条未读消息
+    CLEAR_TLAK_UNREAD_MESSAGE() {
+      this.unreadMessage = {
+        num: 0,
+        nickname: "未知",
+        content: "...",
+      };
+    },
+  },
+});
diff --git a/im/src/stores/user.js b/im/src/stores/user.js
new file mode 100644
index 000000000..abd694938
--- /dev/null
+++ b/im/src/stores/user.js
@@ -0,0 +1,68 @@
+import { defineStore } from "pinia";
+import { setUserInfo, getUserInfo, getToken } from "@/utils/auth";
+import { defaultAvatar, defaultUserBanner } from "@/assets/images";
+
+// 判断用户是否登录（模块加载时初始化，与原 vuex user 模块行为一致）
+function initState() {
+  const state = {
+    // 用户ID
+    id: 0,
+    // 用户昵称
+    name: "",
+    // 个性头像
+    face: defaultAvatar,
+    // 名片背景
+    visitCardBag: defaultUserBanner,
+    // 当前登录状态
+    loginStatus: false,
+    toUser: "",
+  };
+  if (getToken()) {
+    let userInfo = getUserInfo();
+    state.name = userInfo.name;
+    state.id = userInfo.id;
+    // 原代码如此：state.avatar 并不存在（恒为 undefined）
+    state.face = userInfo.face ? userInfo.face : state.avatar;
+    state.loginStatus = true;
+  }
+  return state;
+}
+
+export const useUserStore = defineStore("user", {
+  state: initState,
+  actions: {
+    // 用户退出登录
+    USER_LOGOUT() {
+      this.id = 0;
+      this.face = "";
+      this.name = "";
+      this.loginStatus = false;
+    },
+
+    // 设置用户登录状态
+    UPDATE_LOGIN_STATUS() {
+      this.loginStatus = true;
+    },
+
+    // 更新用户信息
+    UPDATE_USER_INFO(data) {
+      for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(this.$state, key)) {
+          this[key] = data[key];
+        }
+      }
+
+      // 保存用户信息到缓存
+      setUserInfo({
+        id: this.id,
+        face: this.face,
+        name: this.name,
+      });
+    },
+
+    // 退出登录处理操作（原 vuex action ACT_USER_LOGOUT）
+    ACT_USER_LOGOUT() {
+      this.USER_LOGOUT();
+    },
+  },
+});
diff --git a/im/src/utils/app-bridge.js b/im/src/utils/app-bridge.js
index 726dc3642..493830330 100644
--- a/im/src/utils/app-bridge.js
+++ b/im/src/utils/app-bridge.js
@@ -1,10 +1,22 @@
 import { h } from "vue";
-import store from "@/store";
 import router from "@/router";
 import MainMixin from "@/mixins/main-mixin";
+import { useTalkStore } from "@/stores/talk";
 
 let refreshViewFn = null;
 
+// vuex → pinia 兼容门面：外部（im-server/event/talk.js）仍以
+// $store.state.talks.items 的旧 vuex 形态访问，这里用惰性 getter 返回
+// 对应的 pinia store（store 实例上直接暴露 state 属性），
+// getter 内调用 useTalkStore() 以保证 pinia 已激活
+const store = {
+  get state() {
+    return {
+      talks: useTalkStore(),
+    };
+  },
+};
+
 const mixinCtx = {
   get $store() {
     return store;
diff --git a/im/src/utils/talk.js b/im/src/utils/talk.js
index 60235e5b1..3d589708d 100644
--- a/im/src/utils/talk.js
+++ b/im/src/utils/talk.js
@@ -1,4 +1,4 @@
-import store from "@/store";
+import { useTalkStore } from "@/stores/talk";
 import router from "@/router";
 import { parseTime } from "@/utils/functions";
 import { ServeCreateTalkList } from "@/api/chat";
@@ -11,7 +11,7 @@ const KEY_INDEX_NAME = "send_message_index_name";
  * @param {String} index_name
  */
 export function findTalkIndex (index_name) {
-  return store.state.talks.items.findIndex(
+  return useTalkStore().items.findIndex(
     (item) => item.index_name == index_name
   );
 }
@@ -22,7 +22,7 @@ export function findTalkIndex (index_name) {
  * @param {String} index_name
  */
 export function findTalk (index_name) {
-  return store.state.talks.items.find((item) => item.index_name == index_name);
+  return useTalkStore().items.find((item) => item.index_name == index_name);
 }
 
 /**
diff --git a/im/src/views/layout/MainLayout.vue b/im/src/views/layout/MainLayout.vue
index f582d434c..3d57a6fac 100644
--- a/im/src/views/layout/MainLayout.vue
+++ b/im/src/views/layout/MainLayout.vue
@@ -43,62 +43,66 @@
     </audio>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, watch } from "vue";
 import Face from '../../components/face'
-import { mapState } from "vuex";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
+import { useNotifyStore } from "@/stores/notify";
+import { useSettingsStore } from "@/stores/settings";
 import { ServeFindFriendApplyNum } from "@/api/contacts";
 
-export default {
-  components: { Face },
-  name: "MainLayout",
-  props: {
-    idx: {
-      type: Number,
-      default: 0,
-    },
+defineOptions({ name: "MainLayout" });
+
+defineProps({
+  idx: {
+    type: Number,
+    default: 0,
   },
-  computed: {
-    ...mapState({
-      face: (state) => state.user.face,
-      name: (state) => state.user.name,
-      id: (state) => state.user.id,
-      defaultAvatar: (state) => state.defaultAvatar,
-      socketStatus: (state) => state.socketStatus,
-      unreadNum: (state) => state.notify.unreadNum,
-      applyNum: (state) => state.notify.applyNum,
-      notifyCueTone: (state) => state.settings.notifyCueTone,
-      themeMode: (state) => state.settings.themeMode,
-      themeBagImg: (state) => state.settings.themeBagImg,
-    }),
-  },
-  watch: {
-    unreadNum (n, o) {
-      if (n > 0 && n > o && this.notifyCueTone) {
-        this.play();
-      }
-    },
-  },
-  created () {
-    this.setApplyNum();
-  },
-  methods: {
-    play () {
-      document
-        .querySelector("#audio")
-        .play()
-        .catch(() => {
-          console.error("消息提示音播放异常");
-        });
-    },
-    logout () {
-      this.$store.dispatch("ACT_USER_LOGOUT");
-    },
-    setApplyNum () {
-      // TODO 暂且return
-      return;
-    },
-  },
-};
+});
+
+const appStore = useAppStore();
+const userStore = useUserStore();
+const notifyStore = useNotifyStore();
+const settingsStore = useSettingsStore();
+
+const face = computed(() => userStore.face);
+const name = computed(() => userStore.name);
+const id = computed(() => userStore.id);
+const defaultAvatar = computed(() => appStore.defaultAvatar);
+const socketStatus = computed(() => appStore.socketStatus);
+const unreadNum = computed(() => notifyStore.unreadNum);
+const applyNum = computed(() => notifyStore.applyNum);
+const notifyCueTone = computed(() => settingsStore.notifyCueTone);
+const themeMode = computed(() => settingsStore.themeMode);
+const themeBagImg = computed(() => settingsStore.themeBagImg);
+
+watch(unreadNum, (n, o) => {
+  if (n > 0 && n > o && notifyCueTone.value) {
+    play();
+  }
+});
+
+// 原 created 钩子
+setApplyNum();
+
+function play () {
+  document
+    .querySelector("#audio")
+    .play()
+    .catch(() => {
+      console.error("消息提示音播放异常");
+    });
+}
+
+function logout () {
+  userStore.ACT_USER_LOGOUT();
+}
+
+function setApplyNum () {
+  // TODO 暂且return
+  return;
+}
 </script>
 <style lang="less" >
 .main-layout {
diff --git a/im/src/views/message/index.vue b/im/src/views/message/index.vue
index a3e1317af..816a46996 100644
--- a/im/src/views/message/index.vue
+++ b/im/src/views/message/index.vue
@@ -36,7 +36,7 @@
                     <span v-show="!item.face">
                       {{ (item.name ? item.name : item.name).substr(0, 1) }}
                     </span>
-                    <img v-show="item.face" :src="item.face" :onerror="$store.state.defaultAvatar" v-if="item.face" />
+                    <img v-show="item.face" :src="item.face" :onerror="defaultAvatar" v-if="item.face" />
                     <face-null :text="item.name" v-else></face-null>
                   </div>
                 </el-tooltip>
@@ -72,7 +72,7 @@
                     :prerender="10"
                   v-slot="{ item, index }"
                 >
-               
+
                   <div v-bind:key="item.id" class="talk-item pointer" :class="{ active: activeIndex == index }" @click="clickTab(item.userId, item, index)">
                     <div class="avatar-box">
                       <face :text="item.face" v-if="item.face"></face>
@@ -150,8 +150,16 @@
     <UserSearch ref="searchUsers" />
   </div>
 </template>
-<script>
-import { mapGetters, mapState } from "vuex";
+<script setup>
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from "vue";
+import { onBeforeRouteUpdate, useRoute } from "vue-router";
 import MainLayout from "@/views/layout/MainLayout";
 import WelcomeModule from "@/components/layout/WelcomeModule";
 import TalkPanel from "@/components/chat/panel/TalkPanel";
@@ -169,495 +177,550 @@ import { beautifyTime } from "@/utils/functions";
 import { formatTalkItem, findTalkIndex, getCacheIndexName } from "@/utils/talk";
 import { setToken } from "@/utils/auth";
 import { syncImTokenFromRoute } from "@/utils/im-mode";
+import { ElMessageBox, ElNotification } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
+import { useTalkStore } from "@/stores/talk";
+import { useNotifyStore } from "@/stores/notify";
+import { useDialogueStore } from "@/stores/dialogue";
 
 const title = document.title;
 
-export default {
-  name: "MessagePage",
-  components: {
-    MainLayout,
-    TalkPanel,
-    UserSearch,
-    OtherLink,
-    WelcomeModule,
-  },
-  data () {
-    return {
-      activeIndex: 9999999, //默认样式索引
-      subHeaderShadow: false,
-      launchGroupShow: false,
+defineOptions({ name: "MessagePage" });
 
-      // 对话面板的传递参数
-      params: {
-        talk_type: 0,
-        receiver_id: 0,
-        nickname: "",
-        clickFlag: true,
-      },
+const route = useRoute();
 
-      goodsParams: {
-        goodsId: '',
-        skuId: '',
-      },
+// 全局属性（$user/$contextmenu）与全局 mixin 方法（initialize/loadUserSetting）经实例代理访问
+const instance = getCurrentInstance();
+const { proxy } = instance;
 
-      // 查询关键词
-      input: "",
+const appStore = useAppStore();
+const userStore = useUserStore();
+const talkStore = useTalkStore();
+const notifyStore = useNotifyStore();
+const dialogueStore = useDialogueStore();
 
-      // header 工具菜单
-      subMenu: false,
+const searchUsers = ref(null);
 
-      // 对话消息列表加载状态[0:加载中;1:加载完成;2:加载失败;]
-      loadStatus: 0,
+const activeIndex = ref(9999999); //默认样式索引
+const subHeaderShadow = ref(false);
+const launchGroupShow = ref(false);
 
-      // 消息未读数计时器
-      interval: null,
-      userTalkItem: [],
-    };
-  },
-  computed: {
-    ...mapGetters(["topItems", "talkItems", "unreadNum", "talkNum"]),
-    ...mapState({
-      face: (state) => state.user.face,
-      name: (state) => state.user.name,
-      talks: (state) => state.talks.items,
-      id: (state) => state.user.id,
-      index_name: (state) => state.dialogue.index_name,
-      monitorFriendsStatus: (state) => state.notify.friendStatus,
-      myUnreadNum: (state) => state.notify.unreadNum,
-      toUser: (state) => state.user.toUser,
-    }),
-    // 计算置顶栏目的高度
-    subHeaderPx () {
-      const n = 7; // 一排能显示的用户数
-      const num = this.topItems.length;
-      let len = 60;
+// 对话面板的传递参数
+const params = ref({
+  talk_type: 0,
+  receiver_id: 0,
+  nickname: "",
+  clickFlag: true,
+});
 
-      if (num > n) {
-        len = (Math.floor(num / n) + (num % n > 0 ? 1 : 0)) * len;
-      }
+const goodsParams = ref({
+  goodsId: '',
+  skuId: '',
+});
 
-      return `${len}px`;
-    },
+// 查询关键词
+const input = ref("");
 
-    // 当前对话好友在线状态
-    isFriendOnline () {
-      let index = findTalkIndex(this.index_name);
-      return index >= 0 && this.talks[index].is_online == 1;
+// header 工具菜单
+const subMenu = ref(false);
+
+// 对话消息列表加载状态[0:加载中;1:加载完成;2:加载失败;]
+// 注意：不能命名为 loadStatus——全局 main-mixin 的 loadStoreChatList 会以
+// Options API 方式（this.loadStatus = ...）写入它，而 <script setup> 的同名绑定
+// 会被 Vue 公共代理拦截（dev 下直接拒绝写入）。故改用内部 ref，
+// 并以 loadStatus 为名桥接到 ctx，供模板（_ctx.loadStatus）与 mixin 读写。
+const loadStatusRef = ref(0);
+
+// 消息未读数计时器
+let interval = null;
+const userTalkItem = ref([]);
+
+// 原 vuex mapGetters(["topItems", "talkItems", "unreadNum", "talkNum"])
+const topItems = computed(() => talkStore.topItems);
+const talkItems = computed(() => talkStore.talkItems);
+const unreadNum = computed(() => talkStore.unreadNum);
+const talkNum = computed(() => talkStore.talkNum);
+
+// 原 vuex mapState
+const face = computed(() => userStore.face);
+const name = computed(() => userStore.name);
+const talks = computed(() => talkStore.items);
+const id = computed(() => userStore.id);
+const index_name = computed(() => dialogueStore.index_name);
+const monitorFriendsStatus = computed(() => notifyStore.friendStatus);
+const myUnreadNum = computed(() => notifyStore.unreadNum);
+const toUser = computed(() => userStore.toUser);
+
+// 原模板中的 $store.state.defaultAvatar（根级 state）
+const defaultAvatar = computed(() => appStore.defaultAvatar);
+
+// 计算置顶栏目的高度
+const subHeaderPx = computed(() => {
+  const n = 7; // 一排能显示的用户数
+  const num = topItems.value.length;
+  let len = 60;
+
+  if (num > n) {
+    len = (Math.floor(num / n) + (num % n > 0 ? 1 : 0)) * len;
+  }
+
+  return `${len}px`;
+});
+
+// 当前对话好友在线状态
+const isFriendOnline = computed(() => {
+  let index = findTalkIndex(index_name.value);
+  return index >= 0 && talks.value[index].is_online == 1;
+});
+
+// 全局 main-mixin 的方法（loadUserSetting/loadStoreChatList）以组件公共实例代理为
+// this 回调本组件：createTalk/loadChatList/clickTab、读 goodsParams/talkNum、
+// 读写 loadStatus。<script setup> 绑定对公共代理不可见，故桥接到 instance.ctx；
+// 同时 defineExpose 供外部通过 ref 访问。
+defineExpose({
+  createTalk,
+  loadChatList,
+  clickTab,
+  goodsParams,
+  talkNum,
+  loadStatus: loadStatusRef,
+});
+Object.defineProperties(instance.ctx, {
+  createTalk: { configurable: true, value: createTalk },
+  loadChatList: { configurable: true, value: loadChatList },
+  clickTab: { configurable: true, value: clickTab },
+  goodsParams: { configurable: true, get: () => goodsParams.value },
+  talkNum: { configurable: true, get: () => talkNum.value },
+  loadStatus: {
+    configurable: true,
+    get: () => loadStatusRef.value,
+    set: (v) => {
+      loadStatusRef.value = v;
     },
   },
-  watch: {
-    talkItems (val) {
-      if (val) this.userTalkItem = val;
-    },
-    // 搜索用户的时候 根据当前用户表进行模糊搜索
-    input (val, oldVal) {
-      console.log(val, oldVal);
-      if (val) {
-        let str = ["", ...val, ""].join(".*");
-        let reg = new RegExp(str);
-        this.userTalkItem = this.talkItems.filter((item) =>
-          reg.test(item.name)
+});
+
+// 初始化商品参数
+function initGoodsParams(query) {
+  goodsParams.value = {
+    goodsId: query.goodsId || '',
+    skuId: query.skuId || '',
+  };
+
+  console.log('初始化商品参数:', goodsParams.value);
+}
+
+//创建会话
+async function createTalk(id) {
+  await ServeCreateTalkList(id);
+
+  await loadChatList();
+}
+
+// header 功能栏隐藏事件
+function closeSubMenu() {
+  subMenu.value = false;
+}
+
+// 清除当前对话
+function clearTalk() {
+  params.value = {
+    talk_type: 0,
+    receiver_id: 0,
+    nickname: "",
+    clickFlag: true
+  };
+
+  dialogueStore.UPDATE_DIALOGUE_MESSAGE({
+    talk_type: 0,
+    receiver_id: 0,
+    is_robot: 0,
+  });
+}
+
+// 工具栏事件
+function triggerSubMenu(type) {
+  closeSubMenu();
+
+  if (type == 1) {
+    launchGroupShow.value = true;
+  } else {
+    searchUsers.value.open();
+  }
+}
+
+// 左侧会话列表滚动时，控制置顶栏阴影
+function onMenusScroll({ scrollTop }) {
+  subHeaderShadow.value = scrollTop > 0;
+}
+
+// 获取用户对话列表
+function loadChatList() {
+  loadStatusRef.value = talkNum.value == 0 ? 0 : 1;
+
+  return ServeGetTalkList()
+    .then(({ code, result }) => {
+      if (code !== 200 || !Array.isArray(result)) return false;
+      notifyStore.SET_UNREAD_NUM(0);
+      talkStore.SET_TALK_ITEMS({
+        items: result.map((item) => formatTalkItem(item)),
+      });
+
+      if (route.query.id) {
+        const targetId = route.query.id;
+        const takeIndex = talkItems.value.findIndex(
+          (take) => take.userId == targetId
         );
-      } else {
-        this.userTalkItem = this.talkItems;
+        const takeData = takeIndex >= 0 ? talkItems.value[takeIndex] : null;
+        if (takeData) {
+          clickTab(targetId, takeData, takeIndex);
+        }
       }
-    },
-    unreadNum (value) {
-      clearInterval(this.interval);
-      // console.log("%c 更新未读消息", "color:#32ccbc");
-      this.$store.commit("SET_UNREAD_NUM", value);
+    })
+    .catch(() => {})
+    .finally(() => {
+      loadStatusRef.value = 1;
+    });
+}
 
-      if (value > 0) {
-        this.interval = setInterval(() => {
-          document.title =
-            document.title == title ? `【新消息】${title}` : title;
-        }, 2000);
-      } else {
-        document.title = title;
-      }
-    },
+// 切换聊天栏目
+function clickTab(id, val, index) {
+  if (!id) return;
+  activeIndex.value = index;
+  let item =
+    talks.value.find((item) => {
+      return item.userId == id;
+    }) || val || {};
+  // 点击当前栏目存储当前用户的信息
+  userStore.toUser = val || item;
 
-    // 监听好友在线状态
-    monitorFriendsStatus (value) {
-      this.$store.commit("UPDATE_TALK_ITEM", {
-        index_name: `1_${value.friend_id}`,
-        is_online: value.status,
+  let nickname = item.name;
+  const talkId = item.id || val?.id;
+
+  if (!talkId) return;
+
+  params.value = {
+    talk_type: 1,
+    receiver_id: item.userId || id,
+    nickname,
+    is_robot: item.is_robot,
+    talkId,
+    clickFlag: true
+  };
+
+  // 更新信息
+  dialogueStore.UPDATE_DIALOGUE_MESSAGE({
+    talk_type: 1,
+    receiver_id: item.userId,
+    is_robot: item.is_robot,
+  });
+
+  nextTick(() => {
+    if (id == index_name.value.split("_")[1]) {
+      talkStore.UPDATE_TALK_ITEM({
+        userId: id,
+        index_name: "MESSAGE_" + index_name.value.split("_")[1],
+        unread: 0,
       });
-    },
-  },
+    }
+  });
+}
 
-  beforeRouteUpdate (to, from, next) {
-    syncImTokenFromRoute(to, setToken);
-    let index_name = getCacheIndexName();
-    if (index_name) this.clickTab(index_name);
-    // 更新商品参数
-    this.initGoodsParams(to.query);
-    next();
-  },
-  beforeCreate () {
-    syncImTokenFromRoute(this.$route, setToken);
-  },
-  async created () {
-    await this.initialize();
-    await this.loadUserSetting();    
-    // 初始化商品参数
-    this.initGoodsParams(this.$route.query);
-        /**
-     * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
-     * 所以创建会话 并请求用户列表
-     * 如果没有id说明当前商家登录 直接请求用户列表
-     */
+// 修改当前对话
+function changeTalk(index_name) {
+  console.log("修改当前对话", index_name);
+  sessionStorage.setItem("send_message_index_name", index_name);
+  loadChatList();
+}
 
-  },
+// 关闭当前对话及刷新对话列表
+function closeTalk() {
+  dialogueStore.UPDATE_DIALOGUE_MESSAGE({
+    talk_type: 0,
+    receiver_id: 0,
+    is_robot: 0,
+  });
 
-  beforeUnmount () {
-    document.title = title;
-    clearInterval(this.interval);
-    this.clearTalk();
-  },
-  methods: {
-    // 美化时间格式
-    beautifyTime,
+  loadChatList();
+}
 
-    // 初始化商品参数
-    initGoodsParams (query) {
-      this.goodsParams = {
-        goodsId: query.goodsId || '',
-        skuId: query.skuId || '',
-      };
-      
-      console.log('初始化商品参数:', this.goodsParams);
-    },
-
-    //创建会话
-    async createTalk (id) {
-      await ServeCreateTalkList(id);
-
-      await this.loadChatList();
-    },
-    // header 功能栏隐藏事件
-    closeSubMenu () {
-      this.subMenu = false;
-    },
-
-    // 清除当前对话
-    clearTalk () {
-      this.params = {
-        talk_type: 0,
-        receiver_id: 0,
-        nickname: "",
-        clickFlag: true
-      };
-
-      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
-        talk_type: 0,
-        receiver_id: 0,
-        is_robot: 0,
-      });
-    },
-
-    // 工具栏事件
-    triggerSubMenu (type) {
-      this.closeSubMenu();
-
-      if (type == 1) {
-        this.launchGroupShow = true;
-      } else {
-        this.$refs.searchUsers.open();
-      }
-    },
-
-    // 左侧会话列表滚动时，控制置顶栏阴影
-    onMenusScroll ({ scrollTop }) {
-      this.subHeaderShadow = scrollTop > 0;
-    },
-    // 获取用户对话列表
-    loadChatList () {
-      this.loadStatus = this.talkNum == 0 ? 0 : 1;
-
-      return ServeGetTalkList()
-        .then(({ code, result }) => {
-          if (code !== 200 || !Array.isArray(result)) return false;
-          this.$store.commit("SET_UNREAD_NUM", 0);
-          this.$store.commit("SET_TALK_ITEMS", {
-            items: result.map((item) => formatTalkItem(item)),
-          });
-
-          if (this.$route.query.id) {
-            const targetId = this.$route.query.id;
-            const takeIndex = this.talkItems.findIndex(
-              (take) => take.userId == targetId
-            );
-            const takeData = takeIndex >= 0 ? this.talkItems[takeIndex] : null;
-            if (takeData) {
-              this.clickTab(targetId, takeData, takeIndex);
-            }
-          }
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.loadStatus = 1;
-        });
-    },
-
-    // 切换聊天栏目
-    clickTab (id, val, index) {
-      if (!id) return;
-      this.activeIndex = index;
-      let item =
-        this.talks.find((item) => {
-          return item.userId == id;
-        }) || val || {};
-      // 点击当前栏目存储当前用户的信息
-      this.$store.state.user.toUser = val || item;
-
-      let nickname = item.name;
-      const talkId = item.id || val?.id;
-
-      if (!talkId) return;
-
-      this.params = {
-        talk_type: 1,
-        receiver_id: item.userId || id,
-        nickname,
-        is_robot: item.is_robot,
-        talkId,
-        clickFlag: true
-      };
-
-      // 更新信息
-      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
-        talk_type: 1,
-        receiver_id: item.userId,
-        is_robot: item.is_robot,
-      });
-
-      this.$nextTick(() => {
-        if (id == this.index_name.split("_")[1]) {
-          this.$store.commit("UPDATE_TALK_ITEM", {
-            userId: id,
-            index_name: "MESSAGE_" + this.index_name.split("_")[1],
-            unread: 0,
-          });
-        }
-      });
-    },
-    // 修改当前对话
-    changeTalk (index_name) {
-      console.log("修改当前对话", index_name);
-      sessionStorage.setItem("send_message_index_name", index_name);
-      this.loadChatList();
-    },
-    // 关闭当前对话及刷新对话列表
-    closeTalk () {
-      this.$store.commit("UPDATE_DIALOGUE_MESSAGE", {
-        talk_type: 0,
-        receiver_id: 0,
-        is_robot: 0,
-      });
-
-      this.loadChatList();
-    },
-    // 对话列表的右键自定义菜单
-    talkItemsMenu (item, event) {
-      let items = {
-        items: [
-          {
-            label: "好友信息",
-            icon: "el-icon-user",
-            disabled: item.talk_type == 2 || item.is_robot == 1,
-            onClick: () => {
-              this.$user(item.receiver_id);
-            },
-          },
-          {
-            label: "修改备注",
-            icon: "el-icon-edit-outline",
-            disabled: item.talk_type == 2 || item.is_robot == 1,
-            onClick: () => {
-              this.editFriendRemarks(item);
-            },
-          },
-          {
-            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
-            icon: "el-icon-top",
-            onClick: () => {
-              this.topChatItem(item);
-            },
-          },
-          {
-            label: item.is_disturb == 0 ? "消息免打扰" : "开启消息提示",
-            icon:
-              item.is_disturb == 0
-                ? "el-icon-close-notification"
-                : "el-icon-bell",
-            disabled: item.is_robot == 1,
-            onClick: () => {
-              this.setNotDisturb(item);
-            },
-          },
-          {
-            label: "移除会话",
-            icon: "el-icon-remove-outline",
-            divided: true,
-            onClick: () => {
-              this.delChatItem(item);
-            },
-          },
-          {
-            label: item.talk_type == 1 ? "删除好友" : "退出群聊",
-            icon: "el-icon-delete",
-            disabled: item.is_robot == 1,
-            onClick: () => {
-              let title = item.talk_type == 1 ? "删除好友" : "退出群聊";
-              this.$confirm(
-                `此操作将 <span style="color:red;font-size:16px;">${title}</span>, 是否继续?`,
-                "提示",
-                {
-                  confirmButtonText: "确定",
-                  cancelButtonText: "取消",
-                  type: "warning",
-                  center: true,
-                  dangerouslyUseHTMLString: true,
-                }
-              ).then(() => {
-                if (item.talk_type == 1) {
-                  this.removeFriend(item);
-                }
-              });
-            },
-          },
-        ],
-        event: event,
-        zIndex: 3,
-      };
-
-      this.$contextmenu(items);
-      return false;
-    },
-    // 置顶栏右键菜单栏
-    topItemsMenu (item, event) {
-      this.$contextmenu({
-        items: [
-          {
-            label: item.is_top == 0 ? "会话置顶" : "取消置顶",
-            icon: "el-icon-top",
-            onClick: () => {
-              this.topChatItem(item);
-            },
-          },
-        ],
-        event: event,
-        zIndex: 3,
-      });
-
-      return false;
-    },
-    // 会话列表置顶
-    topChatItem (item) {
-      ServeTopTalkList({
-        list_id: item.id,
-        type: item.is_top == 0 ? 1 : 2,
-      }).then(({ code }) => {
-        if (code == 200) {
-          this.$store.commit("UPDATE_TALK_ITEM", {
-            index_name: item.index_name,
-            is_top: item.is_top == 0 ? 1 : 0,
-          });
-        }
-      });
-    },
-    // 设置消息免打扰
-    setNotDisturb (item) {
-      ServeSetNotDisturb({
-        talk_type: item.talk_type,
-        receiver_id: item.receiver_id,
-        is_disturb: item.is_disturb == 0 ? 1 : 0,
-      }).then(({ code }) => {
-        if (code == 200) {
-          this.$store.commit("UPDATE_TALK_ITEM", {
-            index_name: item.index_name,
-            is_disturb: item.is_disturb == 0 ? 1 : 0,
-          });
-        }
-      });
-    },
-    // 移除会话列表
-    delChatItem (item) {
-      ServeDeleteTalkList({
-        list_id: item.id,
-      }).then(({ code }) => {
-        if (code == 200) {
-          this.clearTalk();
-          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
-        }
-      });
-    },
-    // 解除好友关系
-    removeFriend (item) {
-      ServeDeleteContact({
-        friend_id: item.receiver_id,
-      }).then(({ code }) => {
-        if (code == 200) {
-          if (this.index_name == item.index_name) {
-            this.clearTalk();
-          }
-
-          this.$store.commit("REMOVE_TALK_ITEM", item.index_name);
-        }
-      });
-    },
-    // 修改好友备注信息
-    editFriendRemarks (item) {
-      let title = `您正在设置【${item.name}】好友的备注信息`;
-
-      if (item.remark_name) {
-        title += `，当前备注为【${item.remark_name}】`;
-      }
-
-      this.$prompt(title, "修改备注", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        customClass: "border-radius0",
-        inputPlaceholder: "请设置好友备注信息",
-        inputValue: item.remark_name ? item.remark_name : item.name,
-        inputValidator (val) {
-          return val == null || val == "" ? "好友备注不能为空" : true;
+// 对话列表的右键自定义菜单
+function talkItemsMenu(item, event) {
+  let items = {
+    items: [
+      {
+        label: "好友信息",
+        icon: "el-icon-user",
+        disabled: item.talk_type == 2 || item.is_robot == 1,
+        onClick: () => {
+          proxy.$user(item.receiver_id);
         },
-      })
-        .then(({ value }) => {
-          if (value == item.remark_name) {
-            return false;
-          }
-
-          ServeEditContactRemark({
-            friend_id: item.receiver_id,
-            remarks: value,
-          }).then((res) => {
-            if (res.code == 200) {
-              this.$store.commit("UPDATE_TALK_ITEM", {
-                index_name: item.index_name,
-                remark_name: value,
-              });
-
-              this.$notify({
-                title: "成功",
-                message: "好友备注修改成功...",
-                type: "success",
-              });
-            } else {
-              this.$notify({
-                title: "消息",
-                message: "好友备注修改失败，请稍后再试...",
-                type: "warning",
-              });
+      },
+      {
+        label: "修改备注",
+        icon: "el-icon-edit-outline",
+        disabled: item.talk_type == 2 || item.is_robot == 1,
+        onClick: () => {
+          editFriendRemarks(item);
+        },
+      },
+      {
+        label: item.is_top == 0 ? "会话置顶" : "取消置顶",
+        icon: "el-icon-top",
+        onClick: () => {
+          topChatItem(item);
+        },
+      },
+      {
+        label: item.is_disturb == 0 ? "消息免打扰" : "开启消息提示",
+        icon:
+          item.is_disturb == 0
+            ? "el-icon-close-notification"
+            : "el-icon-bell",
+        disabled: item.is_robot == 1,
+        onClick: () => {
+          setNotDisturb(item);
+        },
+      },
+      {
+        label: "移除会话",
+        icon: "el-icon-remove-outline",
+        divided: true,
+        onClick: () => {
+          delChatItem(item);
+        },
+      },
+      {
+        label: item.talk_type == 1 ? "删除好友" : "退出群聊",
+        icon: "el-icon-delete",
+        disabled: item.is_robot == 1,
+        onClick: () => {
+          let title = item.talk_type == 1 ? "删除好友" : "退出群聊";
+          ElMessageBox.confirm(
+            `此操作将 <span style="color:red;font-size:16px;">${title}</span>, 是否继续?`,
+            "提示",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+              center: true,
+              dangerouslyUseHTMLString: true,
+            }
+          ).then(() => {
+            if (item.talk_type == 1) {
+              removeFriend(item);
             }
           });
-        })
-        .catch(() => { });
+        },
+      },
+    ],
+    event: event,
+    zIndex: 3,
+  };
+
+  proxy.$contextmenu(items);
+  return false;
+}
+
+// 置顶栏右键菜单栏
+function topItemsMenu(item, event) {
+  proxy.$contextmenu({
+    items: [
+      {
+        label: item.is_top == 0 ? "会话置顶" : "取消置顶",
+        icon: "el-icon-top",
+        onClick: () => {
+          topChatItem(item);
+        },
+      },
+    ],
+    event: event,
+    zIndex: 3,
+  });
+
+  return false;
+}
+
+// 会话列表置顶
+function topChatItem(item) {
+  ServeTopTalkList({
+    list_id: item.id,
+    type: item.is_top == 0 ? 1 : 2,
+  }).then(({ code }) => {
+    if (code == 200) {
+      talkStore.UPDATE_TALK_ITEM({
+        index_name: item.index_name,
+        is_top: item.is_top == 0 ? 1 : 0,
+      });
+    }
+  });
+}
+
+// 设置消息免打扰
+function setNotDisturb(item) {
+  ServeSetNotDisturb({
+    talk_type: item.talk_type,
+    receiver_id: item.receiver_id,
+    is_disturb: item.is_disturb == 0 ? 1 : 0,
+  }).then(({ code }) => {
+    if (code == 200) {
+      talkStore.UPDATE_TALK_ITEM({
+        index_name: item.index_name,
+        is_disturb: item.is_disturb == 0 ? 1 : 0,
+      });
+    }
+  });
+}
+
+// 移除会话列表
+function delChatItem(item) {
+  ServeDeleteTalkList({
+    list_id: item.id,
+  }).then(({ code }) => {
+    if (code == 200) {
+      clearTalk();
+      talkStore.REMOVE_TALK_ITEM(item.index_name);
+    }
+  });
+}
+
+// 解除好友关系
+function removeFriend(item) {
+  ServeDeleteContact({
+    friend_id: item.receiver_id,
+  }).then(({ code }) => {
+    if (code == 200) {
+      if (index_name.value == item.index_name) {
+        clearTalk();
+      }
+
+      talkStore.REMOVE_TALK_ITEM(item.index_name);
+    }
+  });
+}
+
+// 修改好友备注信息
+function editFriendRemarks(item) {
+  let title = `您正在设置【${item.name}】好友的备注信息`;
+
+  if (item.remark_name) {
+    title += `，当前备注为【${item.remark_name}】`;
+  }
+
+  ElMessageBox.prompt(title, "修改备注", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    customClass: "border-radius0",
+    inputPlaceholder: "请设置好友备注信息",
+    inputValue: item.remark_name ? item.remark_name : item.name,
+    inputValidator (val) {
+      return val == null || val == "" ? "好友备注不能为空" : true;
     },
-  },
-};
+  })
+    .then(({ value }) => {
+      if (value == item.remark_name) {
+        return false;
+      }
+
+      ServeEditContactRemark({
+        friend_id: item.receiver_id,
+        remarks: value,
+      }).then((res) => {
+        if (res.code == 200) {
+          talkStore.UPDATE_TALK_ITEM({
+            index_name: item.index_name,
+            remark_name: value,
+          });
+
+          ElNotification({
+            title: "成功",
+            message: "好友备注修改成功...",
+            type: "success",
+          });
+        } else {
+          ElNotification({
+            title: "消息",
+            message: "好友备注修改失败，请稍后再试...",
+            type: "warning",
+          });
+        }
+      });
+    })
+    .catch(() => { });
+}
+
+watch(talkItems, (val) => {
+  if (val) userTalkItem.value = val;
+});
+
+// 搜索用户的时候 根据当前用户表进行模糊搜索
+watch(input, (val, oldVal) => {
+  console.log(val, oldVal);
+  if (val) {
+    let str = ["", ...val, ""].join(".*");
+    let reg = new RegExp(str);
+    userTalkItem.value = talkItems.value.filter((item) =>
+      reg.test(item.name)
+    );
+  } else {
+    userTalkItem.value = talkItems.value;
+  }
+});
+
+watch(unreadNum, (value) => {
+  clearInterval(interval);
+  // console.log("%c 更新未读消息", "color:#32ccbc");
+  notifyStore.SET_UNREAD_NUM(value);
+
+  if (value > 0) {
+    interval = setInterval(() => {
+      document.title =
+        document.title == title ? `【新消息】${title}` : title;
+    }, 2000);
+  } else {
+    document.title = title;
+  }
+});
+
+// 监听好友在线状态
+watch(monitorFriendsStatus, (value) => {
+  talkStore.UPDATE_TALK_ITEM({
+    index_name: `1_${value.friend_id}`,
+    is_online: value.status,
+  });
+});
+
+onBeforeRouteUpdate((to, from, next) => {
+  syncImTokenFromRoute(to, setToken);
+  let index_name = getCacheIndexName();
+  if (index_name) clickTab(index_name);
+  // 更新商品参数
+  initGoodsParams(to.query);
+  next();
+});
+
+// 原 beforeCreate
+syncImTokenFromRoute(route, setToken);
+
+// 原 async created（保持 await 顺序，但用 IIFE 避免 setup 变为异步）
+(async () => {
+  await proxy.initialize();
+  await proxy.loadUserSetting();
+  // 初始化商品参数
+  initGoodsParams(route.query);
+  /**
+   * 如果说有id 说明是用户点击 “联系客服” 进入的该页面
+   * 所以创建会话 并请求用户列表
+   * 如果没有id说明当前商家登录 直接请求用户列表
+   */
+})();
+
+onBeforeUnmount(() => {
+  document.title = title;
+  clearInterval(interval);
+  clearTalk();
+});
 </script>
 <style lang="less" scoped>
 :deep(.el-scrollbar__wrap ) {
diff --git a/im/src/views/other/404.vue b/im/src/views/other/404.vue
index d8aa49b2a..486e1ffd8 100644
--- a/im/src/views/other/404.vue
+++ b/im/src/views/other/404.vue
@@ -16,39 +16,34 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
 import { SvgNotFount } from '@/core/icons'
 
-export default {
-  name: 'NotFoundPage',
-  components: {
-    SvgNotFount,
-  },
-  data() {
-    return {
-      second: 10,
-      setInterval: null,
-    }
-  },
-  created() {
-    this.setInterval = setInterval(() => {
-      this.second--
-      if (this.second == 0) {
-        clearInterval(this.setInterval)
-        this.toHome()
-      }
-    }, 1000)
-  },
-  beforeUnmount() {
-    clearInterval(this.setInterval)
-  },
-  methods: {
-    toHome() {
-      this.$router.push({
-        path: '/',
-      })
-    },
-  },
+defineOptions({ name: 'NotFoundPage' })
+
+const router = useRouter()
+
+const second = ref(10)
+let timer = null
+
+timer = setInterval(() => {
+  second.value--
+  if (second.value == 0) {
+    clearInterval(timer)
+    toHome()
+  }
+}, 1000)
+
+onBeforeUnmount(() => {
+  clearInterval(timer)
+})
+
+function toHome() {
+  router.push({
+    path: '/',
+  })
 }
 </script>
 <style lang="less" scoped>
diff --git a/manager/.eslintrc.js b/manager/.eslintrc.js
index c97750547..fb6221807 100644
--- a/manager/.eslintrc.js
+++ b/manager/.eslintrc.js
@@ -25,6 +25,8 @@ module.exports = {
     "vue/multiline-html-element-content-newline":"off",
     "vue/name-property-casing": ["error", "PascalCase"],
     "vue/no-v-html": "off",
+    // 全端已完成 Options API → <script setup> 迁移，防止新代码回退
+    'vue/component-api-style': ['warn', ['script-setup']],
     'accessor-pairs': 2,
     'arrow-spacing': [2, {
       'before': true,
diff --git a/manager/MIGRATION-VUE3.md b/manager/MIGRATION-VUE3.md
index 3bafde731..d1a48b361 100644
--- a/manager/MIGRATION-VUE3.md
+++ b/manager/MIGRATION-VUE3.md
@@ -2,11 +2,33 @@
 
 ## 已完成（P1–P3 骨架）
 
-- 依赖升级：`vue@3`、`vue-router@4`、`vuex@4`、`vue-i18n@9`、`element-plus`
-- 入口：`src/main.js`（`createApp`）
+- 依赖升级：`vue@3`、`vue-router@4`、`vue-i18n@9`、`element-plus`、`pinia@4`
+- 入口：`src/main.js`（`createApp` + `createPinia`）
 - 路由、动态路由、全局 `$Message` / `$Modal` / `$Notice`、`$filters`、`priceColorScheme`、`vue-qr@5`
 - TinyMCE：移除已弃用 `template` 插件
 
+## 组合式 API 迁移（2026-10 完成）
+
+全部 280 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，并完成 vuex → pinia：
+
+- **状态管理**：`src/stores/` 下 4 个 store（app/user/setting/dict）。app store 合并了原 vuex 根 state（`openStyleStore/openStoreId/notices`）+ 原 app 模块；mutation 全部转为同名 action，两个例外：`pageOpenedList` mutation 改名 `updateOpenedList`（避免与 state 同名）；`clearOtherTags` 改收路由 name 字符串（不再传组件实例 vm）。原 `src/store/` 已删除，package.json 不再依赖 vuex。
+- **util.js 去 vm 化**：`src/libs/util.js` 的 `openNewPage(name, argu, query)` / `initRouter()` / `initMenuData(data)` 已去掉 vm 首参，内部直接用 `useAppStore()`。
+- **defineExpose 清单**（被外部通过 ref 访问的组件，改其内部成员时注意保持暴露面）：
+  - `components/lili-dialog/index.vue`：`open` / `singleGoods` / `clearGoodsSelected` / `goodsData` / `goodsFlag` / `flag` / `close`
+  - `components/lili-dialog/goods-dialog.vue`：`type`
+  - `components/verify/index.vue`：`show` / `init`
+  - `components/lili/config-drawer.vue`：`open` / `close`
+  - `components/lili/department-tree-choose.vue`：`setData` / `clearSelect`
+  - `components/map/multiple-map.vue`：`open`
+  - `components/editor/index.vue`（Tinymce）：`getEditor` / `setContent` / `getContent`
+  - `sys/oss-manage/ossManage.vue`：`selectImage` / `fileType` / `changeFileType`
+  - `components/hotzone/index.vue`：`open` / `close`；`hotzone/components/Hotzone.vue`：`zones` / `addItem` / `eraseItem` / `isOverRange` / `overRange` / `changeItem`（被自定义指令经 `binding.instance` / `$parent` 访问）；`hotzone/components/Zone.vue`：`showModalFn` / `delItem` / `handlehideZone` / `changeInfo`
+  - `page-decoration/modelForm.vue`：`navList` / `topAdvert`
+  - `promotions/coupon/coupon.vue`：`check` / `getSelection` / `clearSelectAll`
+  - `live/components/LivePurchaseRecords.vue`：`refresh`
+- **i18n**：script 内 `this.$t` 统一改为 `i18n.global.t`（`@/locale`），模板 `$t` 不变。
+- **修复的编译级问题**：`page-decoration/wap/index.vue` 的 `function package()` 改名 `packageModel`（保留字）。
+
 ## P5 批量修复（Table / 过滤器）
 
 列表页 **60+** 已 `el-table`；过滤器已改为 `$filters.*`；全项目已无 `$set` / `$options.filters`。
diff --git a/manager/package.json b/manager/package.json
index b61e13c6f..3687b5d8f 100644
--- a/manager/package.json
+++ b/manager/package.json
@@ -24,6 +24,7 @@
     "hls.js": "^1.6.16",
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
+    "pinia": "^4.0.3",
     "sass": "^1.63.6",
     "sass-loader": "^10.4.1",
     "sockjs-client": "^1.4.0",
@@ -34,7 +35,6 @@
     "vue-qr": "^5.0.3",
     "vue-router": "^4.6.4",
     "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0",
     "xss": "^1.0.7"
   },
   "devDependencies": {
diff --git a/manager/src/App.vue b/manager/src/App.vue
index 4a592dc58..f212395f4 100644
--- a/manager/src/App.vue
+++ b/manager/src/App.vue
@@ -4,32 +4,39 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, onUpdated } from "vue";
+import { useRoute } from "vue-router";
 import Cookies from "js-cookie";
 import { getCategoryTree } from "@/api/goods.js";
 import util from "@/libs/util";
+import { getStore } from "@/libs/storage";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "App",
-  updated() {
-    if (!localStorage.getItem("category") && this.$route.path !== "/login") {
-      getCategoryTree(0).then((res) => {
-        if (res.success) {
-          localStorage.setItem("category", JSON.stringify(res.result));
-        }
-      });
-    }
-  },
-  mounted() {
-    const loggedIn = this.getStore("accessToken") || Cookies.get("userInfoManager");
-    if (loggedIn) {
-      util.bootstrapDynamicRoutesFromCache();
-      util.initRouter(this);
-      this.$store.commit("setOpenedList");
-      this.$store.commit("initCachePage");
-    }
-  },
-};
+defineOptions({ name: "App" });
+
+const route = useRoute();
+const appStore = useAppStore();
+
+onUpdated(() => {
+  if (!localStorage.getItem("category") && route.path !== "/login") {
+    getCategoryTree(0).then((res) => {
+      if (res.success) {
+        localStorage.setItem("category", JSON.stringify(res.result));
+      }
+    });
+  }
+});
+
+onMounted(() => {
+  const loggedIn = getStore("accessToken") || Cookies.get("userInfoManager");
+  if (loggedIn) {
+    util.bootstrapDynamicRoutesFromCache();
+    util.initRouter();
+    appStore.setOpenedList();
+    appStore.initCachePage();
+  }
+});
 </script>
 
 <style>
diff --git a/manager/src/components/affix-time.vue b/manager/src/components/affix-time.vue
index 7a0347a9e..ada0efc8c 100644
--- a/manager/src/components/affix-time.vue
+++ b/manager/src/components/affix-time.vue
@@ -46,120 +46,117 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getShopListData } from "@/api/shops.js";
 
-export default {
-  props: ["closeShop"],
-  data() {
-    return {
-      month: "",
-      selectedWay: {
-        title: "过去7天",
-        selected: true,
-        searchType: "LAST_SEVEN",
-      },
-      storeId: "",
-      dates: [],
-      params: {
-        pageNumber: 1,
-        pageSize: 100,
-        storeName: "",
-      },
-      dateList: [
-        { title: "今天", selected: false, searchType: "TODAY" },
-        { title: "昨天", selected: false, searchType: "YESTERDAY" },
-        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
-        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
-      ],
-      originDateList: [
-        { title: "今天", selected: false, searchType: "TODAY" },
-        { title: "昨天", selected: false, searchType: "YESTERDAY" },
-        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
-        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
-      ],
-      shopTotal: 0,
-      shopsData: [],
+defineProps(["closeShop"]);
+const emit = defineEmits(["selected"]);
+
+const month = ref("");
+const selectedWay = ref({
+  title: "过去7天",
+  selected: true,
+  searchType: "LAST_SEVEN",
+});
+const storeId = ref("");
+const dates = ref([]);
+const params = ref({
+  pageNumber: 1,
+  pageSize: 100,
+  storeName: "",
+});
+const dateList = ref([
+  { title: "今天", selected: false, searchType: "TODAY" },
+  { title: "昨天", selected: false, searchType: "YESTERDAY" },
+  { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+  { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
+]);
+const originDateList = ref([
+  { title: "今天", selected: false, searchType: "TODAY" },
+  { title: "昨天", selected: false, searchType: "YESTERDAY" },
+  { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+  { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
+]);
+const shopTotal = ref(0);
+const shopsData = ref([]);
+
+onMounted(() => {
+  getFiveYears();
+  getShopList();
+});
+
+function getShopList() {
+  getShopListData(params.value).then((res) => {
+    if (res.success) {
+      shopTotal.value = res.result.total;
+      shopsData.value = res.result.records || [];
+    }
+  });
+}
+function changeshop() {
+  selectedWay.value.storeId = storeId.value;
+  emit("selected", selectedWay.value);
+}
+function getFiveYears() {
+  const getYear = new Date().getFullYear();
+  const lastFiveYear = getYear - 5;
+  const maxMonth = new Date().getMonth() + 1;
+  const list = [];
+  for (let year = lastFiveYear; year <= getYear; year++) {
+    for (let month = 1; month <= 12; month++) {
+      if (year === getYear && month > maxMonth) {
+        continue;
+      }
+      list.push({ year, month });
+    }
+  }
+  dates.value = list.reverse();
+}
+function changeSelect(e) {
+  month.value = e;
+  if (month.value) {
+    dateList.value.forEach((res) => {
+      res.selected = false;
+    });
+    const parts = String(month.value).split("-");
+    selectedWay.value = {
+      ...selectedWay.value,
+      year: parts[0],
+      month: parts[1],
+      searchType: "",
+      storeId: storeId.value,
     };
-  },
-  mounted() {
-    this.getFiveYears();
-    this.getShopList();
-  },
-  methods: {
-    getShopList() {
-      getShopListData(this.params).then((res) => {
-        if (res.success) {
-          this.shopTotal = res.result.total;
-          this.shopsData = res.result.records || [];
-        }
-      });
-    },
-    changeshop() {
-      this.selectedWay.storeId = this.storeId;
-      this.$emit("selected", this.selectedWay);
-    },
-    getFiveYears() {
-      const getYear = new Date().getFullYear();
-      const lastFiveYear = getYear - 5;
-      const maxMonth = new Date().getMonth() + 1;
-      const dates = [];
-      for (let year = lastFiveYear; year <= getYear; year++) {
-        for (let month = 1; month <= 12; month++) {
-          if (year === getYear && month > maxMonth) {
-            continue;
-          }
-          dates.push({ year, month });
-        }
-      }
-      this.dates = dates.reverse();
-    },
-    changeSelect(e) {
-      this.month = e;
-      if (this.month) {
-        this.dateList.forEach((res) => {
-          res.selected = false;
-        });
-        const parts = String(this.month).split("-");
-        this.selectedWay = {
-          ...this.selectedWay,
-          year: parts[0],
-          month: parts[1],
-          searchType: "",
-          storeId: this.storeId,
-        };
-        this.$emit("selected", this.selectedWay);
-      } else {
-        const current =
-          this.dateList.find((item) => item.selected) ||
-          this.dateList.find((item) => item.title === this.selectedWay.title) ||
-          this.dateList.find((item) => item.searchType === "LAST_SEVEN");
-        this.clickBreadcrumb(current);
-      }
-    },
-    clickBreadcrumb(item) {
-      if (!item) return;
-      let currentIndex;
-      this.dateList.forEach((res, index) => {
-        res.selected = false;
-        if (res.title === item.title) {
-          currentIndex = index;
-        }
-      });
-      item.selected = true;
-      item.storeId = this.storeId;
-      this.month = "";
-      if (item.searchType === "") {
-        const origin = this.originDateList[currentIndex];
-        item.searchType = (origin && origin.searchType) || "LAST_SEVEN";
-      }
-      this.selectedWay = item;
-      this.selectedWay.year = new Date().getFullYear();
-      this.selectedWay.month = "";
-      this.$emit("selected", this.selectedWay);
-    },
-  },
-};
+    emit("selected", selectedWay.value);
+  } else {
+    const current =
+      dateList.value.find((item) => item.selected) ||
+      dateList.value.find((item) => item.title === selectedWay.value.title) ||
+      dateList.value.find((item) => item.searchType === "LAST_SEVEN");
+    clickBreadcrumb(current);
+  }
+}
+function clickBreadcrumb(item) {
+  if (!item) return;
+  let currentIndex;
+  dateList.value.forEach((res, index) => {
+    res.selected = false;
+    if (res.title === item.title) {
+      currentIndex = index;
+    }
+  });
+  item.selected = true;
+  item.storeId = storeId.value;
+  month.value = "";
+  if (item.searchType === "") {
+    const origin = originDateList.value[currentIndex];
+    item.searchType = (origin && origin.searchType) || "LAST_SEVEN";
+  }
+  selectedWay.value = item;
+  selectedWay.value.year = new Date().getFullYear();
+  selectedWay.value.month = "";
+  emit("selected", selectedWay.value);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/distribution/distribution-selector.vue b/manager/src/components/distribution/distribution-selector.vue
index d644697d0..b72f0508d 100644
--- a/manager/src/components/distribution/distribution-selector.vue
+++ b/manager/src/components/distribution/distribution-selector.vue
@@ -63,120 +63,120 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { getDistributionMemberPage } from "@/api/distribution";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "distributionSelector",
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    excludeId: {
-      type: String,
-      default: "",
-    },
+defineOptions({ name: "distributionSelector" });
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
   },
-  emits: ["update:modelValue", "confirm"],
-  data() {
-    return {
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        mobile: "",
-        nickname: "",
-      },
-      data: [],
-      total: 0,
-      selectedId: "",
-      selectedRow: null,
-    };
+  excludeId: {
+    type: String,
+    default: "",
   },
-  watch: {
-    modelValue(val) {
-      if (val) {
-        this.resetState();
-        this.getDataList();
+});
+const emit = defineEmits(["update:modelValue", "confirm"]);
+
+const loading = ref(false);
+// searchForm 在 resetState 中被整体替换，用 ref 而非 reactive
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  mobile: "",
+  nickname: "",
+});
+const data = ref([]);
+const total = ref(0);
+const selectedId = ref("");
+const selectedRow = ref(null);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      resetState();
+      getDataList();
+    }
+  }
+);
+
+function resetState() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 10,
+    mobile: "",
+    nickname: "",
+  };
+  selectedId.value = "";
+  selectedRow.value = null;
+}
+function buildParams() {
+  const params = {
+    pageNumber: searchForm.value.pageNumber,
+    pageSize: searchForm.value.pageSize,
+    distributionStatus: "PASS",
+  };
+  if (searchForm.value.mobile) params.mobile = searchForm.value.mobile;
+  if (searchForm.value.nickname) params.nickname = searchForm.value.nickname;
+  return params;
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionMemberPage(buildParams())
+    .then((res) => {
+      loading.value = false;
+      if (!res.success) return;
+      const result = res.result || {};
+      let records = result.records || [];
+      const beforeCount = records.length;
+      if (props.excludeId) {
+        records = records.filter((item) => item.id !== props.excludeId);
       }
-    },
-  },
-  methods: {
-    resetState() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 10,
-        mobile: "",
-        nickname: "",
-      };
-      this.selectedId = "";
-      this.selectedRow = null;
-    },
-    buildParams() {
-      const params = {
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-        distributionStatus: "PASS",
-      };
-      if (this.searchForm.mobile) params.mobile = this.searchForm.mobile;
-      if (this.searchForm.nickname) params.nickname = this.searchForm.nickname;
-      return params;
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionMemberPage(this.buildParams())
-        .then((res) => {
-          this.loading = false;
-          if (!res.success) return;
-          const result = res.result || {};
-          let records = result.records || [];
-          const beforeCount = records.length;
-          if (this.excludeId) {
-            records = records.filter((item) => item.id !== this.excludeId);
-          }
-          this.data = records;
-          const excludedCount = beforeCount - records.length;
-          this.total = Math.max(0, (result.total || 0) - excludedCount);
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleRowClick(row) {
-      if (!row) return;
-      this.selectedRow = row;
-      this.selectedId = row.id;
-    },
-    handleCurrentChange(row) {
-      if (!row) return;
-      this.selectedRow = row;
-      this.selectedId = row.id;
-    },
-    handleRadioChange(row) {
-      this.selectedRow = row;
-    },
-    handleClose() {
-      this.$emit("update:modelValue", false);
-    },
-    handleConfirm() {
-      if (!this.selectedRow) {
-        this.$Message.warning("请选择分销员");
-        return;
-      }
-      this.$emit("confirm", this.selectedRow);
-      this.handleClose();
-    },
-  },
-};
+      data.value = records;
+      const excludedCount = beforeCount - records.length;
+      total.value = Math.max(0, (result.total || 0) - excludedCount);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleRowClick(row) {
+  if (!row) return;
+  selectedRow.value = row;
+  selectedId.value = row.id;
+}
+function handleCurrentChange(row) {
+  if (!row) return;
+  selectedRow.value = row;
+  selectedId.value = row.id;
+}
+function handleRadioChange(row) {
+  selectedRow.value = row;
+}
+function handleClose() {
+  emit("update:modelValue", false);
+}
+function handleConfirm() {
+  if (!selectedRow.value) {
+    Message.warning("请选择分销员");
+    return;
+  }
+  emit("confirm", selectedRow.value);
+  handleClose();
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/components/editor/index.vue b/manager/src/components/editor/index.vue
index 1ca77c581..4ba4d43c0 100644
--- a/manager/src/components/editor/index.vue
+++ b/manager/src/components/editor/index.vue
@@ -8,132 +8,142 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "vue";
 import { initEditor } from "@/components/editor/config";
 import uploadImage from "@/components/editor/upload-image.vue";
-export default {
-  components:{uploadImage},
-  name: "Tinymce",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    height:{
-      type:String,
-      default:'500px'
-    }
-  },
-  computed: {
-    editorContent() {
-      return this.modelValue ?? this.value ?? "";
-    },
-  },
-  data() {
-    return {
-      // 引入编辑器的配置
-      initEditor,
-      hasChange: false, // 标记内容是否有更改
-      hasInit: false, // 标记编辑器是否已初始化
-      tinymceId:
-        "tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""), // 生成唯一的编辑器 ID
-      fullscreen: false, // 标记编辑器是否处于全屏模式
-      toolbar: [], // 工具栏配置
-      content: "", // 编辑器内容
-    };
-  },
-  created() {
-    this.init();
-  },
-  watch: {
-    editorContent: {
-      handler(val) {
-        if (!this.hasChange && this.hasInit) {
-          // 当内容有更改且编辑器已初始化时，更新编辑器的内容
-          this.$nextTick(() => {
-            const editor = window.tinymce?.get(this.tinymceId);
-            if (editor) editor.setContent(val || "");
-          });
-        }
-      },
-    },
-  },
-  methods: {
-    emitContent(content) {
-      this.$emit("update:modelValue", content);
-      this.$emit("input", content);
-    },
-    // 数据返回并给富文本框插入图片
-    insertImage(arr){
-      arr.forEach(v => window.tinymce.get(this.tinymceId).insertContent(`<img  src="${v}" >`))
-    },
-    init() {
-      // 初始化编辑器
-      this.initTinymce();
-    },
-    initTinymce() {
-      const _this = this;
-      window.tinymce.init({
-        selector: `#${this.tinymceId}`,
-        convert_urls: false,
-        init_instance_callback: (editor) => {
-          if (_this.editorContent) {
-            // 如果有初始值，则设置编辑器的内容为初始值
-            _this.$nextTick(() => editor.setContent(_this.editorContent));
-          }
-          _this.hasInit = true;
-          // 监听编辑器内容的变化
-          editor.on("NodeChange Change KeyUp  SetContent", () => {
-            _this.hasChange = true;
-            // Vue3 v-model 使用 update:modelValue，同时保留 input 兼容旧用法
-            _this.emitContent(editor.getContent());
-          });
-        },
-        setup(editor) {
-          // 监听全屏状态变化
-          editor.on("FullscreenStateChanged", (e) => {
-            _this.fullscreen = e.state;
-          });
-        },
-        ..._this.initEditor,
 
-        height:this.height
+defineOptions({ name: "Tinymce" });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
+});
+const emit = defineEmits(["update:modelValue", "input"]);
+
+// 引入编辑器的配置（data 中的 initEditor 与 import 同名，直接使用 import）
+const hasChange = ref(false); // 标记内容是否有更改
+const hasInit = ref(false); // 标记编辑器是否已初始化
+const tinymceId =
+  "tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""); // 生成唯一的编辑器 ID
+const fullscreen = ref(false); // 标记编辑器是否处于全屏模式
+const toolbar = ref([]); // 工具栏配置
+const content = ref(""); // 编辑器内容
+
+const editorContent = computed(() => {
+  return props.modelValue ?? props.value ?? "";
+});
+
+watch(editorContent, (val) => {
+  if (!hasChange.value && hasInit.value) {
+    // 当内容有更改且编辑器已初始化时，更新编辑器的内容
+    nextTick(() => {
+      const editor = window.tinymce?.get(tinymceId);
+      if (editor) editor.setContent(val || "");
+    });
+  }
+});
+
+function emitContent(content) {
+  emit("update:modelValue", content);
+  emit("input", content);
+}
+// 数据返回并给富文本框插入图片
+function insertImage(arr) {
+  arr.forEach((v) =>
+    window.tinymce.get(tinymceId).insertContent(`<img  src="${v}" >`)
+  );
+}
+function init() {
+  // 初始化编辑器
+  initTinymce();
+}
+function initTinymce() {
+  window.tinymce.init({
+    selector: `#${tinymceId}`,
+    convert_urls: false,
+    init_instance_callback: (editor) => {
+      if (editorContent.value) {
+        // 如果有初始值，则设置编辑器的内容为初始值
+        nextTick(() => editor.setContent(editorContent.value));
+      }
+      hasInit.value = true;
+      // 监听编辑器内容的变化
+      editor.on("NodeChange Change KeyUp  SetContent", () => {
+        hasChange.value = true;
+        // Vue3 v-model 使用 update:modelValue，同时保留 input 兼容旧用法
+        emitContent(editor.getContent());
       });
     },
-    setContent(value) {
-      // 设置编辑器的内容
-      window.tinymce.get(this.tinymceId).setContent(value);
+    setup(editor) {
+      // 监听全屏状态变化
+      editor.on("FullscreenStateChanged", (e) => {
+        fullscreen.value = e.state;
+      });
     },
-    getContent() {
-      // 获取编辑器的内容
-     return  window.tinymce.get(this.tinymceId).getContent();
-    },
-    destroyTinymce() {
-      const tinymce = window.tinymce.get(this.tinymceId);
+    ...initEditor,
 
-      if (tinymce) {
-        // 销毁编辑器实例
-        tinymce.destroy();
-      }
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  activated() {
-    if (window.tinymce) {
-      this.initTinymce();
-    }
-  },
-  deactivated() {
-    this.destroyTinymce();
-  },
-  unmounted() {
-    this.destroyTinymce();
-  },
-};
+    height: props.height,
+  });
+}
+function getEditor() {
+  // 获取 tinymce 实例（原组件无此方法，为对齐 seller 版暴露能力而新增）
+  return window.tinymce?.get(tinymceId);
+}
+function setContent(value) {
+  // 设置编辑器的内容
+  window.tinymce.get(tinymceId).setContent(value);
+}
+function getContent() {
+  // 获取编辑器的内容
+  return window.tinymce.get(tinymceId).getContent();
+}
+function destroyTinymce() {
+  const tinymce = window.tinymce.get(tinymceId);
+
+  if (tinymce) {
+    // 销毁编辑器实例
+    tinymce.destroy();
+  }
+}
+
+// created 钩子：顶层直接执行（保留原 created + mounted 双重 init 的历史行为）
+init();
+
+onMounted(() => {
+  init();
+});
+onActivated(() => {
+  if (window.tinymce) {
+    initTinymce();
+  }
+});
+onDeactivated(() => {
+  destroyTinymce();
+});
+onUnmounted(() => {
+  destroyTinymce();
+});
+
+// 父组件通过 ref 调用：articleList 使用 getContent；setContent/getEditor 对齐 seller 版暴露能力
+defineExpose({ getEditor, setContent, getContent });
 </script>
diff --git a/manager/src/components/editor/upload-image.vue b/manager/src/components/editor/upload-image.vue
index 35c97c743..d7c06122e 100644
--- a/manager/src/components/editor/upload-image.vue
+++ b/manager/src/components/editor/upload-image.vue
@@ -32,7 +32,7 @@
         </vuedraggable>
         <div class="upload-box">
           <el-upload
-            ref="upload"
+            ref="uploadRef"
             :action="uploadFileUrl"
             :headers="accessToken"
             :show-file-list="false"
@@ -64,7 +64,7 @@
       @closed="resetOssSelection"
     >
       <OssManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="showOssManager"
         :hide-select-footer="true"
@@ -84,123 +84,120 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
 import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
 import { uploadFile } from "@/libs/axios";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import OssManage from "@/views/sys/oss-manage/ossManage.vue";
 
-export default {
-  name: "upload-image",
-  components: {
-    OssManage,
-    vuedraggable,
-    Delete,
-    Plus,
-    ZoomIn,
-  },
-  data() {
-    return {
-      show: false,
-      uploadFileUrl: uploadFile,
-      accessToken: {},
-      showOssManager: false,
-      images: [],
-      selectedImage: [],
-      viewImage: false,
-      previewUrl: "",
-    };
-  },
-  mounted() {
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
-  },
-  methods: {
-    draggableItemKey(item) {
-      return item?.url || item;
-    },
-    handleClickUploadImage() {
-      this.show = true;
-    },
-    handleView(url) {
-      this.previewUrl = url;
-      this.viewImage = true;
-    },
-    callback() {
-      const formatImages = this.images.map((item) => item.url);
-      this.$emit("callback", formatImages);
-      this.show = false;
-    },
-    handleRemoveGoodsPicture(__index) {
-      this.images.splice(__index, 1);
-    },
-    handleBeforeUpload(file) {
-      const okType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
-      if (!okType) {
-        this.$Message.warning("文件 " + file.name + " 的格式不正确，请选择 jpg/jpeg/png");
-        return false;
-      }
-      if (file.size / 1024 / 1024 > 10) {
-        this.$Message.warning("图片大小不能超过10MB");
-        return false;
-      }
-      return true;
-    },
-    handleSuccessGoodsPicture(res) {
-      const url = res?.result ?? res?.data?.result;
-      if (url) {
-        this.images.push({ url });
-      } else {
-        this.$Message.error(res?.message || "上传失败");
-      }
-    },
-    handleUploadError(err) {
-      this.$Message.error(err?.message || String(err));
-    },
-    confirmUrls() {
-      this.applySelectedImages();
-      this.showOssManager = false;
-    },
-    cancelOssImport() {
-      this.selectedImage = [];
-      this.showOssManager = false;
-    },
-    resetOssSelection() {
-      this.selectedImage = [];
-    },
-    handleOssSelected(list) {
-      this.selectedImage = Array.isArray(list) ? list : [];
-    },
-    parseOssSelectionUrl(item) {
-      if (!item) {
-        return "";
-      }
-      if (typeof item === "string") {
-        const index = item.indexOf(",");
-        return index >= 0 ? item.slice(index + 1) : item;
-      }
-      return item.url || "";
-    },
-    applySelectedImages() {
-      (this.selectedImage || []).forEach((item) => {
-        const url = this.parseOssSelectionUrl(item);
-        if (url) {
-          this.images.push({ url });
-        }
-      });
-    },
-    importOSS() {
-      this.selectedImage = [];
-      this.showOssManager = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "upload-image" });
+
+const emit = defineEmits(["callback"]);
+
+const show = ref(false);
+const uploadFileUrl = uploadFile;
+const accessToken = ref({});
+const showOssManager = ref(false);
+const images = ref([]);
+const selectedImage = ref([]);
+const viewImage = ref(false);
+const previewUrl = ref("");
+
+// 模板 ref：upload/ossManage 原名与顶层变量无冲突，但统一改名避免与后续变量互相覆盖
+const uploadRef = ref(null);
+const ossManageRef = ref(null);
+
+onMounted(() => {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+});
+
+function draggableItemKey(item) {
+  return item?.url || item;
+}
+function handleClickUploadImage() {
+  show.value = true;
+}
+function handleView(url) {
+  previewUrl.value = url;
+  viewImage.value = true;
+}
+function callback() {
+  const formatImages = images.value.map((item) => item.url);
+  emit("callback", formatImages);
+  show.value = false;
+}
+function handleRemoveGoodsPicture(__index) {
+  images.value.splice(__index, 1);
+}
+function handleBeforeUpload(file) {
+  const okType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
+  if (!okType) {
+    Message.warning("文件 " + file.name + " 的格式不正确，请选择 jpg/jpeg/png");
+    return false;
+  }
+  if (file.size / 1024 / 1024 > 10) {
+    Message.warning("图片大小不能超过10MB");
+    return false;
+  }
+  return true;
+}
+function handleSuccessGoodsPicture(res) {
+  const url = res?.result ?? res?.data?.result;
+  if (url) {
+    images.value.push({ url });
+  } else {
+    Message.error(res?.message || "上传失败");
+  }
+}
+function handleUploadError(err) {
+  Message.error(err?.message || String(err));
+}
+function confirmUrls() {
+  applySelectedImages();
+  showOssManager.value = false;
+}
+function cancelOssImport() {
+  selectedImage.value = [];
+  showOssManager.value = false;
+}
+function resetOssSelection() {
+  selectedImage.value = [];
+}
+function handleOssSelected(list) {
+  selectedImage.value = Array.isArray(list) ? list : [];
+}
+function parseOssSelectionUrl(item) {
+  if (!item) {
+    return "";
+  }
+  if (typeof item === "string") {
+    const index = item.indexOf(",");
+    return index >= 0 ? item.slice(index + 1) : item;
+  }
+  return item.url || "";
+}
+function applySelectedImages() {
+  (selectedImage.value || []).forEach((item) => {
+    const url = parseOssSelectionUrl(item);
+    if (url) {
+      images.value.push({ url });
+    }
+  });
+}
+function importOSS() {
+  selectedImage.value = [];
+  showOssManager.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/components/hotzone/components/Hotzone.vue b/manager/src/components/hotzone/components/Hotzone.vue
index c4e2d9a7e..0e47c48ad 100644
--- a/manager/src/components/hotzone/components/Hotzone.vue
+++ b/manager/src/components/hotzone/components/Hotzone.vue
@@ -10,7 +10,7 @@
             :key="index"
             :index="index"
             :setting="zone"
-            :ref="`zone${index}`"
+            :ref="(el) => setZoneRef(el, index)"
             @delItem="removeItem($event)"
             @changeInfo="changeInfo($event)"
           ></zone>
@@ -62,160 +62,188 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, getCurrentInstance } from "vue";
 import Zone from "./Zone";
-import addItem from "../directives/addItem";
+import vAddItem from "../directives/addItem";
 
-export default {
-  name: "HotZone",
-  data() {
-    return {
-      zones: [],
-    };
+defineOptions({ name: "HotZone" });
+
+const props = defineProps({
+  image: {
+    type: String,
+    required: true,
   },
-  props: {
-    image: {
-      type: String,
-      required: true,
-    },
-    zonesInit: {
-      type: Array,
-      default: () => [],
-    },
-    max: {
-      type: Number,
-    },
+  zonesInit: {
+    type: Array,
+    default: () => [],
   },
-  mounted() {
-    this.zones = this.zonesInit.concat();
+  max: {
+    type: Number,
   },
-  methods: {
-    async addHotzone() {
-      let perInfo = {
-        topPer: 0.15,
-        leftPer: 0.3,
-        widthPer: 0.2,
-        heightPer: 0.2,
-        img: "",
-        link: "",
-        type: "",
-        title: "",
-      };
-      let images = await this.getImageSize(this.image);
-      if (images) {
-        if (images.height >= 1000) {
-          perInfo.heightPer = this.convertNumberToDecimal(images.height) / (images.height / 1000);
-        } else {
-          perInfo.heightPer = this.convertNumberToDecimal(images.height);
-        }
-        perInfo.widthPer = this.convertNumberToDecimal(images.width) / 2;
-      }
-      this.addItem(perInfo);
-    },
-    convertNumberToDecimal(num) {
-      if (num >= 10000) {
-        return num / 100000;
-      } else if (num >= 1000) {
-        return num / 10000;
-      } else if (num >= 100) {
-        return num / 1000;
-      } else if (num >= 10) {
-        return num / 100;
-      }
-    },
-    getImageSize(url) {
-      return new Promise(function (resolve, reject) {
-        let image = new Image();
-        image.onload = function () {
-          resolve({
-            width: image.width,
-            height: image.height,
-          });
-        };
-        image.onerror = function () {
-          reject(new Error("error"));
-        };
-        image.src = url;
+});
+const emit = defineEmits([
+  "choose",
+  "erase",
+  "overRange",
+  "remove",
+  "add",
+  "change",
+]);
+
+const zones = ref([]);
+const zoneRefs = ref([]);
+const instance = getCurrentInstance();
+
+onMounted(() => {
+  zones.value = props.zonesInit.concat();
+});
+
+// v-for 内的动态 ref：按 index 收集 Zone 组件实例
+function setZoneRef(el, index) {
+  if (el) zoneRefs.value[index] = el;
+}
+
+async function addHotzone() {
+  let perInfo = {
+    topPer: 0.15,
+    leftPer: 0.3,
+    widthPer: 0.2,
+    heightPer: 0.2,
+    img: "",
+    link: "",
+    type: "",
+    title: "",
+  };
+  let images = await getImageSize(props.image);
+  if (images) {
+    if (images.height >= 1000) {
+      perInfo.heightPer = convertNumberToDecimal(images.height) / (images.height / 1000);
+    } else {
+      perInfo.heightPer = convertNumberToDecimal(images.height);
+    }
+    perInfo.widthPer = convertNumberToDecimal(images.width) / 2;
+  }
+  addItem(perInfo);
+}
+
+function convertNumberToDecimal(num) {
+  if (num >= 10000) {
+    return num / 100000;
+  } else if (num >= 1000) {
+    return num / 10000;
+  } else if (num >= 100) {
+    return num / 1000;
+  } else if (num >= 10) {
+    return num / 100;
+  }
+}
+
+function getImageSize(url) {
+  return new Promise(function (resolve, reject) {
+    let image = new Image();
+    image.onload = function () {
+      resolve({
+        width: image.width,
+        height: image.height,
       });
-    },
-    editZone(index) {
-      this.$refs[`zone${index}`][0].showModalFn(index);
-    },
-    delZone(index) {
-      this.$refs[`zone${index}`][0].delItem(index);
-    },
-    showZoneText(zone) {
-      switch (zone.type) {
-        case "goods":
-          return `商品：${zone.goodsName}`;
-        case "category":
-          return `分类：${zone.name}`;
-        case "shops":
-          return `店铺：${zone.storeName}`;
-        case "pages":
-          return `文章：${zone.title}`;
-        case "marketing":
-          return `促销活动商品：${zone.goodsName}`;
-        case "other":
-          return `${zone.title}`;
-        case "special":
-          return `专题：${zone.title}`;
-        default:
-          return "请选择跳转链接";
-      }
-    },
-    changeInfo(res) {
-      let { info, index, zoneInfo } = res;
-      info = { ...zoneInfo, ...info };
-      // 改变热区并发送change通知
-      Object.assign(this.zones[index], info);
-      this.hasChange("changeInfo");
-      this.$forceUpdate();
-    },
-    addItem(setting) {
-      this.zones.push(setting);
-      this.$emit("choose");
-      // this.hasChange()  不应该发送通知，mouseup判定成功才应该发
-      // this.$emit('add', setting)
-    },
-    eraseItem(index = this.zones.length - 1) {
-      this.zones.splice(index, 1);
-      this.$emit("erase", index);
-    },
-    isOverRange() {
-      let { max, zones } = this;
+    };
+    image.onerror = function () {
+      reject(new Error("error"));
+    };
+    image.src = url;
+  });
+}
 
-      return max && zones.length > max;
-    },
-    overRange() {
-      const index = this.zones.length - 1;
+function editZone(index) {
+  zoneRefs.value[index].showModalFn(index);
+}
 
-      this.zones.splice(index, 1);
-      this.$emit("overRange", index);
-    },
-    removeItem(index = this.zones.length - 1) {
-      this.zones.splice(index, 1);
-      this.hasChange("removeItem");
-      this.$emit("remove", index);
-    },
-    changeItem(info, isAdd) {
-      const index = this.zones.length - 1;
-      // 改变热区并发送change通知
-      Object.assign(this.zones[index], info);
-      this.hasChange("changeItem");
-      isAdd && this.$emit("add", this.zones[index]);
-    },
-    hasChange(from) {
-      this.$emit("change", this.zones);
-    },
-  },
-  directives: {
-    addItem,
-  },
-  components: {
-    Zone,
-  },
-};
+function delZone(index) {
+  zoneRefs.value[index].delItem(index);
+}
+
+function showZoneText(zone) {
+  switch (zone.type) {
+    case "goods":
+      return `商品：${zone.goodsName}`;
+    case "category":
+      return `分类：${zone.name}`;
+    case "shops":
+      return `店铺：${zone.storeName}`;
+    case "pages":
+      return `文章：${zone.title}`;
+    case "marketing":
+      return `促销活动商品：${zone.goodsName}`;
+    case "other":
+      return `${zone.title}`;
+    case "special":
+      return `专题：${zone.title}`;
+    default:
+      return "请选择跳转链接";
+  }
+}
+
+function changeInfo(res) {
+  let { info, index, zoneInfo } = res;
+  info = { ...zoneInfo, ...info };
+  // 改变热区并发送change通知
+  Object.assign(zones.value[index], info);
+  hasChange("changeInfo");
+  instance.proxy.$forceUpdate();
+}
+
+function addItem(setting) {
+  zones.value.push(setting);
+  emit("choose");
+  // this.hasChange()  不应该发送通知，mouseup判定成功才应该发
+  // this.$emit('add', setting)
+}
+
+function eraseItem(index = zones.value.length - 1) {
+  zones.value.splice(index, 1);
+  emit("erase", index);
+}
+
+function isOverRange() {
+  return props.max && zones.value.length > props.max;
+}
+
+function overRange() {
+  const index = zones.value.length - 1;
+
+  zones.value.splice(index, 1);
+  emit("overRange", index);
+}
+
+function removeItem(index = zones.value.length - 1) {
+  zones.value.splice(index, 1);
+  hasChange("removeItem");
+  emit("remove", index);
+}
+
+function changeItem(info, isAdd) {
+  const index = zones.value.length - 1;
+  // 改变热区并发送change通知
+  Object.assign(zones.value[index], info);
+  hasChange("changeItem");
+  isAdd && emit("add", zones.value[index]);
+}
+
+function hasChange(from) {
+  emit("change", zones.value);
+}
+
+// v-add-item 指令通过 binding.instance 调用以下方法/读取 zones；
+// Zone 的 v-drag-item / v-change-size 指令通过 ctx.$parent.zones 读取 zones
+defineExpose({
+  zones,
+  addItem,
+  eraseItem,
+  isOverRange,
+  overRange,
+  changeItem,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/components/hotzone/components/Zone.vue b/manager/src/components/hotzone/components/Zone.vue
index 5433d0410..65d2101f3 100644
--- a/manager/src/components/hotzone/components/Zone.vue
+++ b/manager/src/components/hotzone/components/Zone.vue
@@ -86,171 +86,177 @@
         @callback="callbackSelected"
         :isComponent="true"
         :initialize="picModelFlag"
-        ref="ossManage"
+        ref="ossManageRef"
       />
       <template #footer />
     </el-dialog>
   </li>
 </template>
 
-<script>
-import changeSize from "../directives/changeSize";
-import dragItem from "../directives/dragItem";
+<script setup>
+import { ref, reactive, watch, nextTick, onMounted } from "vue";
+import vChangeSize from "../directives/changeSize";
+import vDragItem from "../directives/dragItem";
 import ossManage from "@/views/sys/oss-manage/ossManage";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "Zone",
-  components: {
-    ossManage,
-  },
+defineOptions({ name: "Zone" });
 
-  data() {
-    return {
-      zoneTop: "",
-      zoneLeft: "",
-      zoneWidth: "",
-      zoneHeight: "",
-      hideZone: false,
-      tooSmall: false,
-      showModal: false,
-      picModelFlag: false,
-      currentIndex: 0,
-      currentShowIndex: -1,
-      zoneForm: {
-        img: "",
-        link: "",
-        type: "",
-      },
-    };
-  },
-  props: ["index", "setting"],
-  mounted() {
-    this.setZoneInfo(this.setting);
-  },
-  methods: {
-    setZoneInfo(val) {
-      this.zoneTop = this.getZoneStyle(val.topPer);
-      this.zoneLeft = this.getZoneStyle(val.leftPer);
-      this.zoneWidth = this.getZoneStyle(val.widthPer);
-      this.zoneHeight = this.getZoneStyle(val.heightPer);
-      this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01;
-      this.zoneForm.link = val.link;
-      this.settingZone(val);
-    },
-    handlehideZone(isHide = true) {
-      if (this.hideZone === isHide) {
-        return;
-      }
+const props = defineProps(["index", "setting"]);
+const emit = defineEmits(["changeInfo", "delItem"]);
 
-      this.hideZone = isHide;
-    },
-    changeInfo(info = {}) {
-      const { index } = this;
+const zoneTop = ref("");
+const zoneLeft = ref("");
+const zoneWidth = ref("");
+const zoneHeight = ref("");
+const hideZone = ref(false);
+const tooSmall = ref(false);
+const showModal = ref(false);
+const picModelFlag = ref(false);
+const currentIndex = ref(0);
+const currentShowIndex = ref(-1);
+const zoneForm = reactive({
+  img: "",
+  link: "",
+  type: "",
+});
 
-      this.$emit("changeInfo", {
-        info,
-        index,
-        zoneInfo: this.zoneForm,
-      });
-    },
-    showModalFn(index) {
-      this.showModal = true;
-      this.currentIndex = index;
-    },
-    // 选择图片
-    handleSelectImg() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(item) {
-      this.picModelFlag = false;
-      this.zoneForm.img = item.url;
-    },
+// 未在原 data 中声明、直接挂载在 this 上的遗留字段（仅赋值，未被读取）
+let selectedNav;
 
-    // 调起选择链接弹窗
-    handleSelectLink(item, index) {
-      if (item) this.selectedNav = item;
-      this.$refs.liliDialog.open("link");
-    },
-    // 已选链接
-    selectedLink(val) {
-      this.zoneForm.link = this.$filters.formatLinkType(val);
-      this.settingZone(val);
-      this.changeInfo(this.zoneForm);
-    },
-    settingZone(val) {
-      this.zoneForm.type = val.___type || val.type;
-      this.zoneForm.title = val.title;
-      if(val.pageType == "special"){
-          this.zoneForm.id = val.id;
-          this.zoneForm.pageType = val.pageType
-          this.zoneForm.type = val.pageType
-          this.zoneForm.title = val.name
-        }
-      switch (val.___type) {
-        case "goods":
-          this.zoneForm.id = val.id;
-          this.zoneForm.goodsId = val.goodsId;
-          this.zoneForm.goodsName = val.goodsName;
-          break;
-        case "category":
-          this.zoneForm.id = val.allId;
-          this.zoneForm.name = val.name;
-          break;
-        case "shops":
-          this.zoneForm.id = val.id;
-          this.zoneForm.storeName = val.storeName;
-          break;
-        case "pages":
-          this.zoneForm.id = val.id;
-          this.zoneForm.___path = val.___path;
-          this.zoneForm.title = val.title;
-          break;
-        case "marketing":
-          this.zoneForm.id = val.id;
-          this.zoneForm.goodsId = val.goodsId;
-          this.zoneForm.goodsName = val.goodsName;
-          break;
-        default:
-          break;
-      }
-    },
-    saveZone() {
-      this.showModal = false;
-      this.changeInfo(this.zoneForm);
-    },
-    cancelZone() {
-      this.showModal = false;
-    },
-    delZone() {
-      this.delItem(this.currentIndex);
-    },
-    delItem(index) {
-      this.$emit("delItem", index);
-    },
-    getZoneStyle(val) {
-      return `${(val || 0) * 100}%`;
-    },
-  },
+const liliDialog = ref(null);
+// 模板 ref 与 import 组件同名会互相覆盖，故改名 ossManageRef
+const ossManageRef = ref(null);
 
-  watch: {
-    setting: {
-      handler: function (val) {
-        this.setZoneInfo(val);
-      },
-      deep: true,
-    },
+onMounted(() => {
+  setZoneInfo(props.setting);
+});
+
+function setZoneInfo(val) {
+  zoneTop.value = getZoneStyle(val.topPer);
+  zoneLeft.value = getZoneStyle(val.leftPer);
+  zoneWidth.value = getZoneStyle(val.widthPer);
+  zoneHeight.value = getZoneStyle(val.heightPer);
+  tooSmall.value = val.widthPer < 0.01 && val.heightPer < 0.01;
+  zoneForm.link = val.link;
+  settingZone(val);
+}
+function handlehideZone(isHide = true) {
+  if (hideZone.value === isHide) {
+    return;
+  }
+
+  hideZone.value = isHide;
+}
+function changeInfo(info = {}) {
+  const index = props.index;
+
+  emit("changeInfo", {
+    info,
+    index,
+    zoneInfo: zoneForm,
+  });
+}
+function showModalFn(index) {
+  showModal.value = true;
+  currentIndex.value = index;
+}
+// 选择图片
+function handleSelectImg() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(item) {
+  picModelFlag.value = false;
+  zoneForm.img = item.url;
+}
+
+// 调起选择链接弹窗
+function handleSelectLink(item, index) {
+  if (item) selectedNav = item;
+  liliDialog.value.open("link");
+}
+// 已选链接
+function selectedLink(val) {
+  zoneForm.link = formatLinkType(val);
+  settingZone(val);
+  changeInfo(zoneForm);
+}
+function settingZone(val) {
+  zoneForm.type = val.___type || val.type;
+  zoneForm.title = val.title;
+  if(val.pageType == "special"){
+      zoneForm.id = val.id;
+      zoneForm.pageType = val.pageType
+      zoneForm.type = val.pageType
+      zoneForm.title = val.name
+    }
+  switch (val.___type) {
+    case "goods":
+      zoneForm.id = val.id;
+      zoneForm.goodsId = val.goodsId;
+      zoneForm.goodsName = val.goodsName;
+      break;
+    case "category":
+      zoneForm.id = val.allId;
+      zoneForm.name = val.name;
+      break;
+    case "shops":
+      zoneForm.id = val.id;
+      zoneForm.storeName = val.storeName;
+      break;
+    case "pages":
+      zoneForm.id = val.id;
+      zoneForm.___path = val.___path;
+      zoneForm.title = val.title;
+      break;
+    case "marketing":
+      zoneForm.id = val.id;
+      zoneForm.goodsId = val.goodsId;
+      zoneForm.goodsName = val.goodsName;
+      break;
+    default:
+      break;
+  }
+}
+function saveZone() {
+  showModal.value = false;
+  changeInfo(zoneForm);
+}
+function cancelZone() {
+  showModal.value = false;
+}
+function delZone() {
+  delItem(currentIndex.value);
+}
+function delItem(index) {
+  emit("delItem", index);
+}
+function getZoneStyle(val) {
+  return `${(val || 0) * 100}%`;
+}
+
+watch(
+  () => props.setting,
+  (val) => {
+    setZoneInfo(val);
   },
-  directives: {
-    changeSize,
-    dragItem,
-  },
-};
+  { deep: true }
+);
+
+// 外部访问：父组件 Hotzone.vue 通过 $refs 调用 showModalFn/delItem；
+// 自定义指令 changeSize/dragItem 通过 binding.instance 调用 handlehideZone/changeInfo
+defineExpose({
+  showModalFn,
+  delItem,
+  handlehideZone,
+  changeInfo,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/components/hotzone/index.vue b/manager/src/components/hotzone/index.vue
index 7dffdc604..041b65fbf 100644
--- a/manager/src/components/hotzone/index.vue
+++ b/manager/src/components/hotzone/index.vue
@@ -10,7 +10,7 @@
   >
     <template v-if="flag && hotzoneRes">
       <hotzone
-        ref="hotzone"
+        ref="hotzoneRef"
         @change="changeHotzone"
         :zonesInit="hotzoneRes.zoneInfo"
         :image="hotzoneRes.img"
@@ -22,47 +22,50 @@
     </template>
   </el-dialog>
 </template>
-<script>
+<script setup>
+import { ref } from "vue";
 import hotzone from "./components/Hotzone.vue";
 
-export default {
-  components: {
-    hotzone,
-  },
-  data() {
-    return {
-      flag: false,
-      hotzoneRes: null,
-    };
-  },
-  methods: {
-    changeHotzone(info) {
-      if (this.hotzoneRes) {
-        this.hotzoneRes.zoneInfo = info;
-      }
-      this.$emit("changeZone", info);
-    },
-    clickClose() {
-      this.flag = false;
-      this.hotzoneRes = null;
-      this.$emit("closeFlag", false);
-    },
-    clickOK() {
-      this.clickClose();
-    },
-    open(val) {
-      this.hotzoneRes = val || null;
-      if (this.hotzoneRes && !this.hotzoneRes.zoneInfo) {
-        this.hotzoneRes.zoneInfo = [];
-      }
-      this.flag = true;
-    },
-    close() {
-      this.flag = false;
-      this.hotzoneRes = null;
-    },
-  },
-};
+const emit = defineEmits(["changeZone", "closeFlag"]);
+
+const flag = ref(false);
+const hotzoneRes = ref(null);
+
+// hotzoneRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const hotzoneRef = ref(null);
+
+function changeHotzone(info) {
+  if (hotzoneRes.value) {
+    hotzoneRes.value.zoneInfo = info;
+  }
+  emit("changeZone", info);
+}
+
+function clickClose() {
+  flag.value = false;
+  hotzoneRes.value = null;
+  emit("closeFlag", false);
+}
+
+function clickOK() {
+  clickClose();
+}
+
+function open(val) {
+  hotzoneRes.value = val || null;
+  if (hotzoneRes.value && !hotzoneRes.value.zoneInfo) {
+    hotzoneRes.value.zoneInfo = [];
+  }
+  flag.value = true;
+}
+
+function close() {
+  flag.value = false;
+  hotzoneRes.value = null;
+}
+
+// decorate.vue 通过 hotzoneRef.value.open(val) 调用
+defineExpose({ open, close });
 </script>
 <style scoped lang="scss">
 :deep(.el-dialog) {
diff --git a/manager/src/components/lili-dialog/goods-dialog.vue b/manager/src/components/lili-dialog/goods-dialog.vue
index c88aa2922..b49dc4f12 100644
--- a/manager/src/components/lili-dialog/goods-dialog.vue
+++ b/manager/src/components/lili-dialog/goods-dialog.vue
@@ -84,165 +84,165 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
 import * as API_Goods from "@/api/goods";
 import { goodsTypeLabel, goodsTypeTagType } from "@/constants/goodsType";
-export default {
-  props: {
-    selectedWay: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      type: "multiple",
-      selectedList: [],
-      skuList: [],
-      total: 0,
-      goodsParams: {
-        pageNumber: 1,
-        pageSize: 15,
-        order: "desc",
-        goodsName: "",
-        sn: "",
-        categoryPath: "",
-        marketEnable: "UPPER",
-        authFlag: "PASS",
-        sort: "createTime",
-      },
-      category: [],
-      goodsData: [],
-      empty: false,
-      loading: false,
-    };
-  },
-  watch: {
-    category(val) {
-      this.goodsParams.categoryPath = val && val.length ? val[2] : "";
-    },
-    selectedWay: {
-      handler(val) {
-        this.selectedList = Array.isArray(val) ? val.slice() : [];
-      },
-      deep: true,
-      immediate: true,
-    },
-    "goodsParams.categoryPath": {
-      handler() {
-        this.goodsData = [];
-        this.goodsParams.pageNumber = 1;
-        this.getQueryGoodsList();
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    goodsTypeLabel,
-    goodsTypeTagType,
-    onSearchGoods() {
-      this.goodsData = [];
-      this.goodsParams.pageNumber = 1;
-      this.getQueryGoodsList();
-    },
-    changePageSize(v) {
-      this.goodsParams.pageNumber = v;
-      this.getQueryGoodsList();
-    },
-    getQueryGoodsList() {
-      this.loading = true;
-      API_Goods.getGoodsSkuData(this.goodsParams)
-        .then((res) => {
-          this.initGoods(res);
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    initGoods(res) {
-      const records = res?.result?.records || [];
-      if (records.length) {
-        records.forEach((item) => {
-          item.selected = false;
-          item.___type = "goods";
-          this.selectedList.forEach((e) => {
-            if (e.id && e.id === item.id) {
-              item.selected = true;
-            }
-          });
-        });
-        this.total = res.result.total || 0;
-        this.goodsData = records;
-        this.empty = false;
-      } else {
-        this.goodsData = [];
-        this.empty = true;
-      }
-    },
-    emitSelected(list) {
-      this.selectedList = list;
-      this.$emit("selected", this.selectedList);
-    },
-    init() {
-      API_Goods.getGoodsSkuData(this.goodsParams).then((res) => {
-        this.initGoods(res);
-      });
-      API_Goods.getCategoryTree({ deleteFlag: false }).then((res) => {
-        if (res.success) {
-          this.deepGroup(res.result);
-        }
-      });
-    },
-    deepGroup(val) {
-      val.forEach((item) => {
-        let childWay = [];
-        if (item.children) {
-          item.children.forEach((child) => {
-            if (child.children) {
-              child.children.forEach((grandson, index, arr) => {
-                arr[index] = {
-                  value: grandson.id,
-                  label: grandson.name,
-                };
-              });
-            }
-            childWay.push({
-              value: child.id,
-              label: child.name,
-              children: child.children,
-            });
-          });
-        }
-        this.skuList.push({
-          value: item.id,
-          label: item.name,
-          children: childWay,
-        });
-      });
-    },
-    checkedGoods(val) {
-      if (this.type !== "multiple") {
-        this.goodsData.forEach((item) => {
-          item.selected = false;
-        });
-        val.selected = true;
-        this.emitSelected([val]);
-        return;
-      }
 
-      if (!val.selected) {
-        val.selected = true;
-        this.emitSelected([...this.selectedList, val]);
-      } else {
-        val.selected = false;
-        this.emitSelected(this.selectedList.filter((item) => item.id !== val.id));
-      }
-    },
+const props = defineProps({
+  selectedWay: {
+    type: Array,
+    default: () => [],
   },
-};
+});
+const emit = defineEmits(["selected"]);
+
+const type = ref("multiple");
+const selectedList = ref([]);
+const skuList = ref([]);
+const total = ref(0);
+const goodsParams = reactive({
+  pageNumber: 1,
+  pageSize: 15,
+  order: "desc",
+  goodsName: "",
+  sn: "",
+  categoryPath: "",
+  marketEnable: "UPPER",
+  authFlag: "PASS",
+  sort: "createTime",
+});
+const category = ref([]);
+const goodsData = ref([]);
+const empty = ref(false);
+const loading = ref(false);
+
+watch(category, (val) => {
+  goodsParams.categoryPath = val && val.length ? val[2] : "";
+});
+watch(
+  () => props.selectedWay,
+  (val) => {
+    selectedList.value = Array.isArray(val) ? val.slice() : [];
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => goodsParams.categoryPath,
+  () => {
+    goodsData.value = [];
+    goodsParams.pageNumber = 1;
+    getQueryGoodsList();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  init();
+});
+
+function onSearchGoods() {
+  goodsData.value = [];
+  goodsParams.pageNumber = 1;
+  getQueryGoodsList();
+}
+function changePageSize(v) {
+  goodsParams.pageNumber = v;
+  getQueryGoodsList();
+}
+function getQueryGoodsList() {
+  loading.value = true;
+  API_Goods.getGoodsSkuData(goodsParams)
+    .then((res) => {
+      initGoods(res);
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function initGoods(res) {
+  const records = res?.result?.records || [];
+  if (records.length) {
+    records.forEach((item) => {
+      item.selected = false;
+      item.___type = "goods";
+      selectedList.value.forEach((e) => {
+        if (e.id && e.id === item.id) {
+          item.selected = true;
+        }
+      });
+    });
+    total.value = res.result.total || 0;
+    goodsData.value = records;
+    empty.value = false;
+  } else {
+    goodsData.value = [];
+    empty.value = true;
+  }
+}
+function emitSelected(list) {
+  selectedList.value = list;
+  emit("selected", selectedList.value);
+}
+function init() {
+  API_Goods.getGoodsSkuData(goodsParams).then((res) => {
+    initGoods(res);
+  });
+  API_Goods.getCategoryTree({ deleteFlag: false }).then((res) => {
+    if (res.success) {
+      deepGroup(res.result);
+    }
+  });
+}
+function deepGroup(val) {
+  val.forEach((item) => {
+    let childWay = [];
+    if (item.children) {
+      item.children.forEach((child) => {
+        if (child.children) {
+          child.children.forEach((grandson, index, arr) => {
+            arr[index] = {
+              value: grandson.id,
+              label: grandson.name,
+            };
+          });
+        }
+        childWay.push({
+          value: child.id,
+          label: child.name,
+          children: child.children,
+        });
+      });
+    }
+    skuList.value.push({
+      value: item.id,
+      label: item.name,
+      children: childWay,
+    });
+  });
+}
+function checkedGoods(val) {
+  if (type.value !== "multiple") {
+    goodsData.value.forEach((item) => {
+      item.selected = false;
+    });
+    val.selected = true;
+    emitSelected([val]);
+    return;
+  }
+
+  if (!val.selected) {
+    val.selected = true;
+    emitSelected([...selectedList.value, val]);
+  } else {
+    val.selected = false;
+    emitSelected(selectedList.value.filter((item) => item.id !== val.id));
+  }
+}
+
+// 父组件 lili-dialog/index.vue 通过 $refs.goodsDialog.type = "single" 切换单选；
+// expose 的 ref 外部读写等价于原 data 字段
+defineExpose({ type });
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/components/lili-dialog/index.vue b/manager/src/components/lili-dialog/index.vue
index 21252942c..3bd07e8a7 100644
--- a/manager/src/components/lili-dialog/index.vue
+++ b/manager/src/components/lili-dialog/index.vue
@@ -17,7 +17,7 @@
           }
         "
         v-if="goodsFlag"
-        ref="goodsDialog"
+        ref="goodsDialogRef"
         :selectedWay="goodsData"
       />
       <linkDialog
@@ -36,68 +36,82 @@
     </template>
   </el-dialog>
 </template>
-<script>
+<script setup>
+import { ref } from "vue";
 import goodsDialog from "./goods-dialog";
 import linkDialog from "./link-dialog";
-export default {
-  components: {
-    goodsDialog,
-    linkDialog,
-  },
-  data() {
-    return {
-      goodsFlag: false, // 是否商品选择器
-      goodsData: [], //选择的商品
-      linkData: "", //选择的链接
-      flag: false, // modal显隐
-    };
-  },
-  methods: {
-    clearGoodsSelected(){
-      this.goodsData = []
-    },
-    // 关闭弹窗
-    clickClose() {
-      this.flag = false;
-      this.goodsFlag = false;
-      this.$emit("closeFlag", false);
-    },
-    // 单选商品
-    singleGoods() {
-      var timer = setInterval(() => {
-        if (this.$refs.goodsDialog) {
-          this.$refs.goodsDialog.type = "single";
-          clearInterval(timer);
-        }
-      }, 100);
-    },
-    // 点击确认
-    clickOK() {
-      if (this.goodsFlag) {
-        this.$emit("selectedGoodsData", this.goodsData);
-      } else {
-        this.$emit("selectedLink", this.linkData);
-      }
-      this.clickClose();
-    },
-    // 打开组件方法
-    open(type, mutiple) {
-      this.flag = true;
-      if (type == "goods") {
-        this.goodsFlag = true;
-        if (mutiple) {
-          this.singleGoods();
-        }
-      } else {
-        this.goodsFlag = false;
-      }
-    },
-    // 关闭组件
-    close() {
-      this.flag = false;
-    },
-  },
-};
+
+const emit = defineEmits(["closeFlag", "selectedGoodsData", "selectedLink"]);
+
+const goodsFlag = ref(false); // 是否商品选择器
+const goodsData = ref([]); //选择的商品
+const linkData = ref(""); //选择的链接
+const flag = ref(false); // modal显隐
+
+// 模板 ref：原 ref="goodsDialog" 与 import 的组件同名，改名避免互相覆盖
+const goodsDialogRef = ref(null);
+
+function clearGoodsSelected() {
+  goodsData.value = [];
+}
+// 关闭弹窗
+function clickClose() {
+  flag.value = false;
+  goodsFlag.value = false;
+  emit("closeFlag", false);
+}
+// 单选商品
+function singleGoods() {
+  var timer = setInterval(() => {
+    if (goodsDialogRef.value) {
+      goodsDialogRef.value.type = "single";
+      clearInterval(timer);
+    }
+  }, 100);
+}
+// 点击确认
+function clickOK() {
+  if (goodsFlag.value) {
+    emit("selectedGoodsData", goodsData.value);
+  } else {
+    emit("selectedLink", linkData.value);
+  }
+  clickClose();
+}
+// 打开组件方法
+function open(type, mutiple) {
+  flag.value = true;
+  if (type == "goods") {
+    goodsFlag.value = true;
+    if (mutiple) {
+      singleGoods();
+    }
+  } else {
+    goodsFlag.value = false;
+  }
+}
+// 关闭组件
+function close() {
+  flag.value = false;
+}
+
+// 外部通过 ref 访问的成员（grep manager/src 全量确认）：
+// - open：page-decoration 各 modelList、modelForm/modelFormItem、hotzone/Zone、wap/advertising、alertAdvertising 等打开弹窗（goods/link）
+// - singleGoods：modelList/forYour.vue、mixModel.vue 直接调用
+// - clearGoodsSelected：wap/decorate.vue、modelList/goodsAndType.vue 调用
+// - goodsData：modelList/newGoodsSort.vue、notEnough.vue 回写已选商品
+// - goodsFlag：wap/decorate.vue 直接写入
+// - flag：wap/decorate.vue 直接写入 true 打开弹窗
+// - close：未被 grep 到外部调用，原 Options API 实例天然暴露，保守保留
+defineExpose({
+  open,
+  close,
+  singleGoods,
+  clearGoodsSelected,
+  goodsData,
+  goodsFlag,
+  flag,
+});
 </script>
 <style scoped lang="scss">
 :deep(.el-dialog__body) {
diff --git a/manager/src/components/lili-dialog/link-dialog.vue b/manager/src/components/lili-dialog/link-dialog.vue
index 997e607f3..b8b565421 100644
--- a/manager/src/components/lili-dialog/link-dialog.vue
+++ b/manager/src/components/lili-dialog/link-dialog.vue
@@ -8,7 +8,7 @@
         :key="i"
       >
         <component
-          ref="lili-component"
+          ref="liliComponentRef"
           :is="templateWay[item.name]"
           @selected="
             (val) => {
@@ -20,94 +20,85 @@
     </el-tabs>
   </div>
 </template>
-<script>
-import wap from "./wap.js";
+<script setup>
+import { nextTick, onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import wapList from "./wap.js";
 import goodsDialog from "./goods-dialog";
 import templateWay from "./template/index";
-export default {
-  components: {
-    goodsDialog
+
+const emit = defineEmits(["selectedLink"]);
+
+const route = useRoute();
+
+const changed = ref(""); // 变更模板
+const selected = ref(0); // 已选数据
+const selectedLink = ref(""); //选中的链接
+// wap 为共享的模块级数组，保持原 data 引用同一数组的行为
+const wap = ref(wapList); // tab标签
+const activeTab = ref(wapList[0]?.title || "");
+// v-for 内模板 ref 收集为数组；原名 lili-component 含连字符，改名并同步 script
+const liliComponentRef = ref([]);
+
+watch(
+  changed,
+  (val) => {
+    emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
   },
-  setup() {
-    return { templateWay };
-  },
-  data() {
-    return {
-      changed: "", // 变更模板
-      selected: 0, // 已选数据
-      selectedLink: "", //选中的链接
-      wap, // tab标签
-      activeTab: wap[0]?.title || "",
-    };
-  },
-  watch: {
-    changed: {
-      handler(val) {
-        this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
-      },
-      deep: true
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    if (liliComponentRef.value?.[0]) {
+      liliComponentRef.value[0].type = "single"; //商品页面设置成为单选
     }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
-    });
-    let url  = window.location.href
-    if(url.indexOf('/floorList/renovation') != -1){
-      //此处去重防止移动楼层多次点击push 太多数据
-      let obj = {};
-            this.wap = this.wap.reduce((cur, next) => {
-              //对象去重
-              if (next.title != undefined) {
-                obj[next.title]
-                  ? ""
-                  : (obj[next.title] = true && cur.push(next));
-              }
-              return cur;
-      }, []);
-      if (this.$route.path !== '/floorList/main') {
-        this.wap.forEach((items, indexs) => {
-          if (items.title == '活动') {
-            this.wap.splice(indexs, 1)
-          }
-        })
+  });
+  let url = window.location.href;
+  if (url.indexOf("/floorList/renovation") != -1) {
+    //此处去重防止移动楼层多次点击push 太多数据
+    let obj = {};
+    wap.value = wap.value.reduce((cur, next) => {
+      //对象去重
+      if (next.title != undefined) {
+        obj[next.title]
+          ? ""
+          : (obj[next.title] = true && cur.push(next));
       }
-    }else{
-      this.wap.push( {
-        title: "活动",
-        url: "3",
-        name: "marketing"
-      })
-      let obj = {};
-            this.wap = this.wap.reduce((cur, next) => {
-              //对象去重
-              if (next.title != undefined) {
-                obj[next.title]
-                  ? ""
-                  : (obj[next.title] = true && cur.push(next));
-              }
-              return cur;
-      }, []);
+      return cur;
+    }, []);
+    if (route.path !== "/floorList/main") {
+      wap.value.forEach((items, indexs) => {
+        if (items.title == "活动") {
+          wap.value.splice(indexs, 1);
+        }
+      });
     }
-    this.wap.forEach((item) => {
-      if (item) {
-        item.selected = false;
-      }
+  } else {
+    wap.value.push({
+      title: "活动",
+      url: "3",
+      name: "marketing",
     });
-  },
-  methods: {
-    // isVisible(item) {
-    //   const type = this.$route.query.pagetype;
-    //   if (type == "INDEX" && [ "discover"].includes(item.name)) {
-    //     return false;
-    //   }else if(type == "DISCOVER" && item.name == 'special'){
-    //     return false;
-    //   }else{
-    //     return true
-    //   }
-    // },
+    let obj = {};
+    wap.value = wap.value.reduce((cur, next) => {
+      //对象去重
+      if (next.title != undefined) {
+        obj[next.title]
+          ? ""
+          : (obj[next.title] = true && cur.push(next));
+      }
+      return cur;
+    }, []);
   }
-};
+  wap.value.forEach((item) => {
+    if (item) {
+      item.selected = false;
+    }
+  });
+});
+
+// 无 defineExpose：grep manager/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/components/lili-dialog/template/category.vue b/manager/src/components/lili-dialog/template/category.vue
index eb8fd8b31..752036896 100644
--- a/manager/src/components/lili-dialog/template/category.vue
+++ b/manager/src/components/lili-dialog/template/category.vue
@@ -22,94 +22,94 @@
   </div>
 
 </template>
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getCategoryTree } from "@/api/goods.js";
 
-export default {
-  data() {
-    return {
-      parentIndex: '', // 分类父级下标
-      secondIndex: '', // 分类二级下标
-      thirdIndex: '', // 分类三级下标
-      categoryList: [], // 分类列表一级数据
-      secondLevel: [], // 分类列表二级数据
-      thirdLevel: [], // 分类列表三级数据
-      selectedData: "", // 已选分类数据
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    loadCategoryFromCache() {
-      try {
-        const raw = localStorage.getItem("category");
-        if (!raw) {
-          return null;
-        }
-        const parsed = JSON.parse(raw);
-        return Array.isArray(parsed) ? parsed : null;
-      } catch {
-        return null;
-      }
-    },
-    applyCategoryList(category) {
-      if (!Array.isArray(category)) {
-        this.categoryList = [];
-        return;
-      }
-      category.forEach((item) => {
-        item.___type = "category";
-      });
-      this.categoryList = category;
-    },
-    // 点击一级
-    handleClickChild(item, index) {
-      this.parentIndex = index;
-      this.secondLevel = item.children || [];
-      item.___type = "category";
-      item.allId = item.id;
+const emit = defineEmits(["selected"]);
 
-      this.secondIndex = '';
-      this.thirdIndex = '';
-      this.thirdLevel = []
-      this.$emit("selected", [item]);
-      // 点击第一级的时候默认显示第二级第一个
-      // this.handleClickSecondChild(item.children, 0);
-    },
-    // 点击二级
-    handleClickSecondChild(second, index) {
-      second.___type = "category";
-      second.allId = `${second.parentId},${second.id}`
+// 无 defineExpose：grep manager/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关；
+//   decorate.vue 等仅通过 @selected → selectedLink 事件交互）
+const parentIndex = ref(''); // 分类父级下标
+const secondIndex = ref(''); // 分类二级下标
+const thirdIndex = ref(''); // 分类三级下标
+const categoryList = ref([]); // 分类列表一级数据
+const secondLevel = ref([]); // 分类列表二级数据
+const thirdLevel = ref([]); // 分类列表三级数据
+const selectedData = ref(""); // 已选分类数据
 
-      this.secondIndex = index;
-      this.thirdLevel = second.children || [];
-      this.thirdIndex = '';
-      this.$emit("selected", [second]);
-      // this.handleClickthirdChild(second.children[0], 0);
-    },
-    // 点击三级
-    handleClickthirdChild(item, index) {
-      item.___type = "category";
-      item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
-      this.$emit("selected", [item]);
-      this.thirdIndex = index;
-    },
-    init() {
-      const cached = this.loadCategoryFromCache();
-      if (cached) {
-        this.applyCategoryList(cached);
-        return;
-      }
-      getCategoryTree().then((res) => {
-        if (res.success && Array.isArray(res.result)) {
-          localStorage.setItem("category", JSON.stringify(res.result));
-          this.applyCategoryList(res.result);
-        }
-      });
-    },
-  },
-};
+function loadCategoryFromCache() {
+  try {
+    const raw = localStorage.getItem("category");
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function applyCategoryList(category) {
+  if (!Array.isArray(category)) {
+    categoryList.value = [];
+    return;
+  }
+  category.forEach((item) => {
+    item.___type = "category";
+  });
+  categoryList.value = category;
+}
+// 点击一级
+function handleClickChild(item, index) {
+  parentIndex.value = index;
+  secondLevel.value = item.children || [];
+  item.___type = "category";
+  item.allId = item.id;
+
+  secondIndex.value = '';
+  thirdIndex.value = '';
+  thirdLevel.value = []
+  emit("selected", [item]);
+  // 点击第一级的时候默认显示第二级第一个
+  // handleClickSecondChild(item.children, 0);
+}
+// 点击二级
+function handleClickSecondChild(second, index) {
+  second.___type = "category";
+  second.allId = `${second.parentId},${second.id}`
+
+  secondIndex.value = index;
+  thirdLevel.value = second.children || [];
+  thirdIndex.value = '';
+  emit("selected", [second]);
+  // handleClickthirdChild(second.children[0], 0);
+}
+// 点击三级
+function handleClickthirdChild(item, index) {
+  item.___type = "category";
+  item.allId = `${categoryList.value[parentIndex.value].id},${item.parentId},${item.id}`
+  emit("selected", [item]);
+  thirdIndex.value = index;
+}
+function init() {
+  const cached = loadCategoryFromCache();
+  if (cached) {
+    applyCategoryList(cached);
+    return;
+  }
+  getCategoryTree().then((res) => {
+    if (res.success && Array.isArray(res.result)) {
+      localStorage.setItem("category", JSON.stringify(res.result));
+      applyCategoryList(res.result);
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .list {
diff --git a/manager/src/components/lili-dialog/template/marketing.vue b/manager/src/components/lili-dialog/template/marketing.vue
index 4794b2c5c..27456ee7e 100644
--- a/manager/src/components/lili-dialog/template/marketing.vue
+++ b/manager/src/components/lili-dialog/template/marketing.vue
@@ -68,99 +68,95 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
 import { getAllPromotion } from "@/api/promotion";
 
-export default {
-  data() {
-    return {
-      totals: "",
-      loading: true,
-      promotionList: "",
-      selectedIndex: 0,
-      promotions: "",
-      index: 999,
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      showPromotionList: [],
-    };
+const emit = defineEmits(["selected"]);
+
+const totals = ref("");
+const loading = ref(true);
+const promotionList = ref("");
+const selectedIndex = ref(0);
+const promotions = ref("");
+const index = ref(999);
+const params = ref({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const showPromotionList = ref([]);
+
+const isSeckillMode = computed(() => {
+  return promotions.value === "SECKILL";
+});
+
+watch(
+  params,
+  () => {
+    index.value = 999;
+    typeOption(promotions.value) && typeOption(promotions.value).methodsed();
   },
-  computed: {
-    isSeckillMode() {
-      return this.promotions === "SECKILL";
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    params: {
-      handler() {
-        this.index = 999;
-        this.typeOption(this.promotions) && this.typeOption(this.promotions).methodsed();
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    seckillStatusText(v) {
-      if (v === "APPLY") return "申请";
-      if (v === "PASS") return "通过";
-      return "拒绝";
-    },
-    sortGoods(type) {
-      this.loading = false;
-      this.showPromotionList = this.promotionList[type];
-    },
-    typeOption(type) {
-      switch (type) {
-        case "FULL_DISCOUNT":
-          return { title: "满减", methodsed: () => { this.showPromotionList = []; this.sortGoods("FULL_DISCOUNT"); } };
-        case "PINTUAN":
-          return { title: "拼团", methodsed: () => { this.showPromotionList = []; this.sortGoods("PINTUAN"); } };
-        case "KANJIA":
-          return { title: "砍价", methodsed: () => { this.showPromotionList = []; this.sortGoods("KANJIA"); } };
-        case "SECKILL":
-          return { title: "秒杀", methodsed: () => { this.showPromotionList = []; this.sortGoods("SECKILL"); } };
-        case "POINTS_GOODS":
-          return { title: "积分商品", methodsed: () => { this.showPromotionList = []; this.sortGoods("POINTS_GOODS"); } };
-        default:
-          return {};
-      }
-    },
-    selectedPromotion(val) {
-      val.row.___type = "marketing";
-      val.row.___promotion = this.promotions;
-      this.$emit("selected", [val.row]);
-      this.index = val.index;
-    },
-    async init() {
-      const res = await getAllPromotion();
-      if (res.success) {
-        this.loading = false;
-        this.getPromotion(res);
-      } else {
-        this.loading = false;
-      }
-    },
-    getPromotion(res) {
-      if (res.result) {
-        this.promotionList = res.result;
-        delete this.promotionList.COUPON;
-        Object.keys(res.result)[0] && this.typeOption(Object.keys(res.result)[0]).methodsed();
-        this.promotions = Object.keys(res.result)[0];
-      }
-    },
-    clickPromotion(val, i) {
-      this.promotions = val;
-      this.selectedIndex = i;
-      this.params.pageNumber = 1;
-      this.typeOption(val) && this.typeOption(val).methodsed(this.promotionList[val].id);
-    },
-  },
-};
+  { deep: true }
+);
+
+function seckillStatusText(v) {
+  if (v === "APPLY") return "申请";
+  if (v === "PASS") return "通过";
+  return "拒绝";
+}
+function sortGoods(type) {
+  loading.value = false;
+  showPromotionList.value = promotionList.value[type];
+}
+function typeOption(type) {
+  switch (type) {
+    case "FULL_DISCOUNT":
+      return { title: "满减", methodsed: () => { showPromotionList.value = []; sortGoods("FULL_DISCOUNT"); } };
+    case "PINTUAN":
+      return { title: "拼团", methodsed: () => { showPromotionList.value = []; sortGoods("PINTUAN"); } };
+    case "KANJIA":
+      return { title: "砍价", methodsed: () => { showPromotionList.value = []; sortGoods("KANJIA"); } };
+    case "SECKILL":
+      return { title: "秒杀", methodsed: () => { showPromotionList.value = []; sortGoods("SECKILL"); } };
+    case "POINTS_GOODS":
+      return { title: "积分商品", methodsed: () => { showPromotionList.value = []; sortGoods("POINTS_GOODS"); } };
+    default:
+      return {};
+  }
+}
+function selectedPromotion(val) {
+  val.row.___type = "marketing";
+  val.row.___promotion = promotions.value;
+  emit("selected", [val.row]);
+  index.value = val.index;
+}
+async function init() {
+  const res = await getAllPromotion();
+  if (res.success) {
+    loading.value = false;
+    getPromotion(res);
+  } else {
+    loading.value = false;
+  }
+}
+function getPromotion(res) {
+  if (res.result) {
+    promotionList.value = res.result;
+    delete promotionList.value.COUPON;
+    Object.keys(res.result)[0] && typeOption(Object.keys(res.result)[0]).methodsed();
+    promotions.value = Object.keys(res.result)[0];
+  }
+}
+function clickPromotion(val, i) {
+  promotions.value = val;
+  selectedIndex.value = i;
+  params.value.pageNumber = 1;
+  typeOption(val) && typeOption(val).methodsed(promotionList.value[val].id);
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .link-text {
diff --git a/manager/src/components/lili-dialog/template/other.vue b/manager/src/components/lili-dialog/template/other.vue
index 422d89c50..6a584ad6f 100644
--- a/manager/src/components/lili-dialog/template/other.vue
+++ b/manager/src/components/lili-dialog/template/other.vue
@@ -33,8 +33,9 @@
     </el-row>
   </div>
 </template>
-<script>
-import { markRaw } from "vue";
+<script setup>
+import { markRaw, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   House,
   ShoppingCart,
@@ -50,61 +51,61 @@ import {
   Link,
 } from "@element-plus/icons-vue";
 
-export default {
-  data() {
-    return {
-      linkList: [
-        { title: "首页", icon: markRaw(House), ___type: "home" },
-        { title: "购物车", icon: markRaw(ShoppingCart), ___type: "cart" },
-        { title: "收藏商品", icon: markRaw(Star), ___type: "collection" },
-        { title: "我的订单", icon: markRaw(Document), ___type: "order" },
-        { title: "个人中心", icon: markRaw(User), ___type: "user" },
-        { title: "拼团频道", icon: markRaw(Promotion), ___type: "group" },
-        { title: "秒杀频道", icon: markRaw(Promotion), ___type: "seckill" },
-        { title: "领券中心", icon: markRaw(PriceTag), ___type: "coupon" },
-        { title: "签到", icon: markRaw(Sunny), ___type: "sign" },
-        { title: "小程序直播", icon: markRaw(VideoCamera), ___type: "live" },
-        { title: "砍价", icon: markRaw(Share), ___type: "kanjia" },
-        { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
-      ],
-      linkItem: {
-        title: "外部链接",
-        icon: markRaw(Link),
-        ___type: "link",
-        url: "",
-      },
-      linkVisible: true,
-      selectedIndex: 9999999,
-    };
-  },
-  created() {
-    const urls = window.location.href;
-    if (urls.indexOf("/floorList/renovation") != -1) {
-      this.linkList = this.linkList.filter(
-        (item) =>
-          item.title !== "砍价" &&
-          item.title !== "小程序直播" &&
-          item.title !== "积分商城"
-      );
-      this.linkVisible = true;
-    } else {
-      this.linkVisible = false;
-    }
-  },
-  methods: {
-    showLinkItem(item) {
-      return (
-        (item.title !== "拼团频道" && item.title !== "签到") ||
-        this.$route.name !== "renovation"
-      );
-    },
-    handleLink(val, index) {
-      val = { ...val, ___type: "other" };
-      this.selectedIndex = index;
-      this.$emit("selected", [val]);
-    },
-  },
-};
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+
+const linkList = ref([
+  { title: "首页", icon: markRaw(House), ___type: "home" },
+  { title: "购物车", icon: markRaw(ShoppingCart), ___type: "cart" },
+  { title: "收藏商品", icon: markRaw(Star), ___type: "collection" },
+  { title: "我的订单", icon: markRaw(Document), ___type: "order" },
+  { title: "个人中心", icon: markRaw(User), ___type: "user" },
+  { title: "拼团频道", icon: markRaw(Promotion), ___type: "group" },
+  { title: "秒杀频道", icon: markRaw(Promotion), ___type: "seckill" },
+  { title: "领券中心", icon: markRaw(PriceTag), ___type: "coupon" },
+  { title: "签到", icon: markRaw(Sunny), ___type: "sign" },
+  { title: "小程序直播", icon: markRaw(VideoCamera), ___type: "live" },
+  { title: "砍价", icon: markRaw(Share), ___type: "kanjia" },
+  { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
+]);
+const linkItem = ref({
+  title: "外部链接",
+  icon: markRaw(Link),
+  ___type: "link",
+  url: "",
+});
+const linkVisible = ref(true);
+const selectedIndex = ref(9999999);
+
+// 原 created 钩子
+const urls = window.location.href;
+if (urls.indexOf("/floorList/renovation") != -1) {
+  linkList.value = linkList.value.filter(
+    (item) =>
+      item.title !== "砍价" &&
+      item.title !== "小程序直播" &&
+      item.title !== "积分商城"
+  );
+  linkVisible.value = true;
+} else {
+  linkVisible.value = false;
+}
+
+function showLinkItem(item) {
+  return (
+    (item.title !== "拼团频道" && item.title !== "签到") ||
+    route.name !== "renovation"
+  );
+}
+function handleLink(val, index) {
+  val = { ...val, ___type: "other" };
+  selectedIndex.value = index;
+  emit("selected", [val]);
+}
+
+// 无 defineExpose：grep manager/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关）
 </script>
 <style lang="scss" scoped>
 @import "../style.scss";
diff --git a/manager/src/components/lili-dialog/template/pages.vue b/manager/src/components/lili-dialog/template/pages.vue
index 1f10ed074..d0a0a49e5 100644
--- a/manager/src/components/lili-dialog/template/pages.vue
+++ b/manager/src/components/lili-dialog/template/pages.vue
@@ -12,25 +12,20 @@
 
   </div>
 </template>
-<script>
+<script setup>
 import Article from "@/views/page/article-manage/articleList.vue";
-export default {
-  components: {
-    Article,
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    callbackArticle(val) {
-      val.___type = "pages";
 
-      val.___path = "/pages/passport/article";
+const emit = defineEmits(["selected"]);
 
-      this.$emit("selected", [val]);
-    },
-  },
-};
+// 无 defineExpose：grep manager/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关）
+function callbackArticle(val) {
+  val.___type = "pages";
+
+  val.___path = "/pages/passport/article";
+
+  emit("selected", [val]);
+}
 </script>
 <style lang="scss" scoped>
 :deep(.el-card__body) {
diff --git a/manager/src/components/lili-dialog/template/shops.vue b/manager/src/components/lili-dialog/template/shops.vue
index 09d976ab9..fb0b800ac 100644
--- a/manager/src/components/lili-dialog/template/shops.vue
+++ b/manager/src/components/lili-dialog/template/shops.vue
@@ -56,53 +56,56 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive } from "vue";
 import { getShopListData } from "@/api/shops.js";
-export default {
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      params: {
-        pageNumber: 1,
-        pageSize: 12,
-        storeDisable: "OPEN",
-        storeName: "",
-      },
-      shopsData: [],
-      selected: 9999999999,
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    resetSearch() {
-      this.shopsData = [];
-      this.params.pageNumber = 1;
-      this.init();
-    },
-    changePageSize(v) {
-      this.params.pageNumber = v;
-      this.init();
-    },
-    init() {
-      this.loading = true;
-      getShopListData(this.params).then((res) => {
-        if (res.success) {
-          this.total = res.result.total;
-          this.shopsData = res.result.records;
-        }
-        this.loading = false;
-      });
-    },
-    clickShop(val, i) {
-      this.selected = i;
-      val = { ...val, ___type: "shops" };
-      this.$emit("selected", [val]);
-    },
-  },
-};
+
+const emit = defineEmits(["selected"]);
+
+const loading = ref(false);
+const total = ref(0);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 12,
+  storeDisable: "OPEN",
+  storeName: "",
+});
+const shopsData = ref([]);
+const selected = ref(9999999999);
+
+// 无 defineExpose：grep manager/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关）
+
+// created
+init();
+
+function resetSearch() {
+  shopsData.value = [];
+  params.pageNumber = 1;
+  init();
+}
+
+function changePageSize(v) {
+  params.pageNumber = v;
+  init();
+}
+
+function init() {
+  loading.value = true;
+  getShopListData(params).then((res) => {
+    if (res.success) {
+      total.value = res.result.total;
+      shopsData.value = res.result.records;
+    }
+    loading.value = false;
+  });
+}
+
+function clickShop(val, i) {
+  selected.value = i;
+  val = { ...val, ___type: "shops" };
+  emit("selected", [val]);
+}
 </script>
 <style lang="scss" scoped>
 @import "../style.scss";
diff --git a/manager/src/components/lili-dialog/template/special.vue b/manager/src/components/lili-dialog/template/special.vue
index 2ebe670a2..b87958eb6 100644
--- a/manager/src/components/lili-dialog/template/special.vue
+++ b/manager/src/components/lili-dialog/template/special.vue
@@ -34,56 +34,57 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getHomeList } from "@/api/other.js";
-export default {
-  data() {
-    return {
-      loading: true,
-      index: 999,
-      data: [],
-      params: {
-        sort: "createTime",
-        order: "desc",
-        pageClientType: "H5",
-        pageNumber: 1,
-        pageSize: 20,
-        pageType: "SPECIAL",
-      },
-      total: 0,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    selectRow(row, idx) {
-      this.index = idx;
-      const payload = { ...row, pageType: "special", ___type: "special" };
-      this.$emit("selected", [payload]);
-    },
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.init();
-    },
-    changePageSize(val) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = val;
-      this.init();
-    },
-    async init() {
-      this.params.pageClientType = this.$route.name === "renovation" ? "PC" : "H5";
-      const res = await getHomeList(this.params);
-      if (res.success) {
-        this.loading = false;
-        this.data = res.result.records;
-        this.total = res.result.total;
-      } else {
-        this.loading = false;
-      }
-    },
-  },
-};
+
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+
+const loading = ref(true);
+const index = ref(999);
+const data = ref([]);
+const params = reactive({
+  sort: "createTime",
+  order: "desc",
+  pageClientType: "H5",
+  pageNumber: 1,
+  pageSize: 20,
+  pageType: "SPECIAL",
+});
+const total = ref(0);
+
+function selectRow(row, idx) {
+  index.value = idx;
+  const payload = { ...row, pageType: "special", ___type: "special" };
+  emit("selected", [payload]);
+}
+function changePageNum(val) {
+  params.pageNumber = val;
+  init();
+}
+function changePageSize(val) {
+  params.pageNumber = 1;
+  params.pageSize = val;
+  init();
+}
+async function init() {
+  params.pageClientType = route.name === "renovation" ? "PC" : "H5";
+  const res = await getHomeList(params);
+  if (res.success) {
+    loading.value = false;
+    data.value = res.result.records;
+    total.value = res.result.total;
+  } else {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 img {
diff --git a/manager/src/components/lili/circle-loading.vue b/manager/src/components/lili/circle-loading.vue
index d2d3675f7..209af5cb0 100644
--- a/manager/src/components/lili/circle-loading.vue
+++ b/manager/src/components/lili/circle-loading.vue
@@ -6,13 +6,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Loading } from "@element-plus/icons-vue";
 
-export default {
-  name: "circleLoading",
-  components: { Loading },
-};
+defineOptions({ name: "circleLoading" });
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/lili/config-drawer.vue b/manager/src/components/lili/config-drawer.vue
index a8c927d19..736f590a9 100644
--- a/manager/src/components/lili/config-drawer.vue
+++ b/manager/src/components/lili/config-drawer.vue
@@ -6,23 +6,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "configDrawer",
-  data() {
-    return {
-      drawer: false,
-    };
-  },
-  methods: {
-    open() {
-      this.drawer = true;
-    },
-    close() {
-      this.drawer = false;
-    },
-  },
-};
+<script setup>
+import { ref } from "vue";
+
+defineOptions({ name: "configDrawer" });
+
+const drawer = ref(false);
+
+function open() {
+  drawer.value = true;
+}
+
+function close() {
+  drawer.value = false;
+}
+
+defineExpose({ open, close });
 </script>
 
 <style scoped>
diff --git a/manager/src/components/lili/department-choose.vue b/manager/src/components/lili/department-choose.vue
index d104f9107..ee15ca745 100644
--- a/manager/src/components/lili/department-choose.vue
+++ b/manager/src/components/lili/department-choose.vue
@@ -13,56 +13,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { initDepartment } from "@/api/index";
 
-export default {
-  name: "departmentChoose",
-  data() {
-    return {
-      selectDep: [],
-      department: [],
-      cascaderProps: {
-        value: "value",
-        label: "label",
-        children: "children",
-        checkStrictly: true,
-        emitPath: true,
-      },
-    };
-  },
-  methods: {
-    initDepartmentData() {
-      initDepartment().then((res) => {
-        if (res.success) {
-          const arr = res.result;
-          this.filterData(arr);
-          this.department = arr;
-        }
-      });
-    },
-    handleChangeDep(value) {
-      let departmentId = "";
-      if (value && value.length > 0) {
-        departmentId = value[value.length - 1];
-      }
-      this.$emit("on-change", departmentId);
-    },
-    clearSelect() {
-      this.selectDep = [];
-    },
-    filterData(data) {
-      data.forEach((e) => {
-        e.value = e.id;
-        e.label = e.title;
-        if (e.children) {
-          this.filterData(e.children);
-        }
-      });
-    },
-  },
-  created() {
-    this.initDepartmentData();
-  },
-};
+defineOptions({ name: "departmentChoose" });
+
+const emit = defineEmits(["on-change"]);
+
+const selectDep = ref([]);
+const department = ref([]);
+const cascaderProps = ref({
+  value: "value",
+  label: "label",
+  children: "children",
+  checkStrictly: true,
+  emitPath: true,
+});
+
+function initDepartmentData() {
+  initDepartment().then((res) => {
+    if (res.success) {
+      const arr = res.result;
+      filterData(arr);
+      department.value = arr;
+    }
+  });
+}
+function handleChangeDep(value) {
+  let departmentId = "";
+  if (value && value.length > 0) {
+    departmentId = value[value.length - 1];
+  }
+  emit("on-change", departmentId);
+}
+function clearSelect() {
+  selectDep.value = [];
+}
+function filterData(data) {
+  data.forEach((e) => {
+    e.value = e.id;
+    e.label = e.title;
+    if (e.children) {
+      filterData(e.children);
+    }
+  });
+}
+
+initDepartmentData();
+
+// userManage.vue 通过 depRef 引用本组件（当前未实际调用方法），作为公共组件 API 保留
+defineExpose({ clearSelect, selectDep });
 </script>
diff --git a/manager/src/components/lili/department-tree-choose.vue b/manager/src/components/lili/department-tree-choose.vue
index 023abf1b7..37ef29e01 100644
--- a/manager/src/components/lili/department-tree-choose.vue
+++ b/manager/src/components/lili/department-tree-choose.vue
@@ -35,101 +35,100 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { initDepartment } from "@/api/index";
 
-export default {
-  name: "departmentTreeChoose",
-  props: {
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    placeholder: {
-      type: String,
-      default: "点击选择部门",
-    },
+defineOptions({ name: "departmentTreeChoose" });
+
+const props = defineProps({
+  multiple: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      depLoading: false,
-      departmentTitle: "",
-      searchKey: "",
-      dataDep: [],
-      cloneDep: [],
-      departmentId: [],
-      treeProps: {
-        label: "title",
-        children: "children",
-      },
-    };
+  clearable: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    initDepartmentData() {
-      this.depLoading = true;
-      initDepartment()
-        .then((res) => {
-          if (res.success) {
-            this.dataDep = res.result;
-            this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
-          }
-        })
-        .finally(() => {
-          this.depLoading = false;
-        });
-    },
-    searchDep() {
-      if (this.searchKey) {
-        this.dataDep = this.cloneDep.filter(
-          (item) => item.title.indexOf(this.searchKey) > -1
-        );
-      } else {
-        this.dataDep = JSON.parse(JSON.stringify(this.cloneDep));
-      }
-    },
-    selectTree(node) {
-      if (!node) {
-        this.$emit("on-change", null);
-        this.departmentId = "";
-        this.departmentTitle = "";
-        return;
-      }
-      this.departmentId = node.id;
-      this.departmentTitle = node.title;
-      this.$emit("on-change", {
-        departmentId: this.departmentId,
-        departmentTitle: this.departmentTitle,
-      });
-    },
-    clearSelect() {
-      this.departmentId = [];
-      this.departmentTitle = "";
-      this.initDepartmentData();
-      if (this.multiple) {
-        this.$emit("on-change", []);
-      } else {
-        this.$emit("on-change", "");
-      }
-      this.$emit("on-clear");
-    },
-    setData(ids, title) {
-      this.departmentTitle = title;
-      if (this.multiple) {
-        this.departmentId = ids;
-      } else {
-        this.departmentId = [];
-        this.departmentId.push(ids);
-      }
-    },
-  },
-  created() {
-    this.initDepartmentData();
+  placeholder: {
+    type: String,
+    default: "点击选择部门",
   },
+});
+const emit = defineEmits(["on-change", "on-clear"]);
+
+const depLoading = ref(false);
+const departmentTitle = ref("");
+const searchKey = ref("");
+const dataDep = ref([]);
+const cloneDep = ref([]);
+const departmentId = ref([]);
+const treeProps = {
+  label: "title",
+  children: "children",
 };
+
+function initDepartmentData() {
+  depLoading.value = true;
+  initDepartment()
+    .then((res) => {
+      if (res.success) {
+        dataDep.value = res.result;
+        cloneDep.value = JSON.parse(JSON.stringify(dataDep.value));
+      }
+    })
+    .finally(() => {
+      depLoading.value = false;
+    });
+}
+function searchDep() {
+  if (searchKey.value) {
+    dataDep.value = cloneDep.value.filter(
+      (item) => item.title.indexOf(searchKey.value) > -1
+    );
+  } else {
+    dataDep.value = JSON.parse(JSON.stringify(cloneDep.value));
+  }
+}
+function selectTree(node) {
+  if (!node) {
+    emit("on-change", null);
+    departmentId.value = "";
+    departmentTitle.value = "";
+    return;
+  }
+  departmentId.value = node.id;
+  departmentTitle.value = node.title;
+  emit("on-change", {
+    departmentId: departmentId.value,
+    departmentTitle: departmentTitle.value,
+  });
+}
+function clearSelect() {
+  departmentId.value = [];
+  departmentTitle.value = "";
+  initDepartmentData();
+  if (props.multiple) {
+    emit("on-change", []);
+  } else {
+    emit("on-change", "");
+  }
+  emit("on-clear");
+}
+function setData(ids, title) {
+  departmentTitle.value = title;
+  if (props.multiple) {
+    departmentId.value = ids;
+  } else {
+    departmentId.value = [];
+    departmentId.value.push(ids);
+  }
+}
+
+initDepartmentData();
+
+// 父组件（userManage）通过 ref 调用 setData / clearSelect
+defineExpose({ setData, clearSelect });
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/lili/set-password.vue b/manager/src/components/lili/set-password.vue
index ac57ea25f..fdbd4c081 100644
--- a/manager/src/components/lili/set-password.vue
+++ b/manager/src/components/lili/set-password.vue
@@ -29,99 +29,105 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "setPassword",
-  props: {
-    modelValue: String,
-    value: String,
-    size: String,
-    placeholder: {
-      type: String,
-      default: "请输入密码，长度为6-20个字符",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: {
-      type: Number,
-      default: 20,
-    },
+<script setup>
+import { ref, watch } from "vue";
+
+defineOptions({ name: "setPassword" });
+
+const props = defineProps({
+  modelValue: String,
+  value: String,
+  size: String,
+  placeholder: {
+    type: String,
+    default: "请输入密码，长度为6-20个字符",
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  data() {
-    return {
-      currentValue: this.modelValue ?? this.value ?? "",
-      tipStyle: "password-tip-none",
-      strengthValue: 0,
-      progressStatus: "",
-      strength: "无",
-      grade: 0,
-    };
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue(val) {
-      this.setCurrentValue(val);
-    },
-    value(val) {
-      this.setCurrentValue(val);
-    },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    checkStrengthValue(v) {
-      let grade = 0;
-      if (/\d/.test(v)) grade++;
-      if (/[a-z]/.test(v)) grade++;
-      if (/[A-Z]/.test(v)) grade++;
-      if (/\W/.test(v)) grade++;
-      if (v.length >= 10) grade++;
-      this.grade = grade;
-      return grade;
-    },
-    strengthChange() {
-      if (!this.currentValue) {
-        this.tipStyle = "password-tip-none";
-        this.strength = "无";
-        this.strengthValue = 0;
-        return;
-      }
-      const grade = this.checkStrengthValue(this.currentValue);
-      if (grade <= 1) {
-        this.progressStatus = "exception";
-        this.tipStyle = "password-tip-weak";
-        this.strength = "弱";
-        this.strengthValue = 33;
-      } else if (grade >= 2 && grade <= 4) {
-        this.progressStatus = "";
-        this.tipStyle = "password-tip-middle";
-        this.strength = "中";
-        this.strengthValue = 66;
-      } else {
-        this.progressStatus = "success";
-        this.tipStyle = "password-tip-strong";
-        this.strength = "强";
-        this.strengthValue = 100;
-      }
-    },
-    handleChange() {
-      this.strengthChange();
-      this.$emit("update:modelValue", this.currentValue);
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.currentValue = value ?? "";
-      this.strengthChange();
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
+  maxlength: {
+    type: Number,
+    default: 20,
   },
-};
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+
+const currentValue = ref(props.modelValue ?? props.value ?? "");
+const tipStyle = ref("password-tip-none");
+const strengthValue = ref(0);
+const progressStatus = ref("");
+const strength = ref("无");
+const grade = ref(0);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+
+function checkStrengthValue(v) {
+  // 局部变量原名 grade 与顶层 ref 同名，改名避免遮蔽
+  let g = 0;
+  if (/\d/.test(v)) g++;
+  if (/[a-z]/.test(v)) g++;
+  if (/[A-Z]/.test(v)) g++;
+  if (/\W/.test(v)) g++;
+  if (v.length >= 10) g++;
+  grade.value = g;
+  return g;
+}
+
+function strengthChange() {
+  if (!currentValue.value) {
+    tipStyle.value = "password-tip-none";
+    strength.value = "无";
+    strengthValue.value = 0;
+    return;
+  }
+  const grade = checkStrengthValue(currentValue.value);
+  if (grade <= 1) {
+    progressStatus.value = "exception";
+    tipStyle.value = "password-tip-weak";
+    strength.value = "弱";
+    strengthValue.value = 33;
+  } else if (grade >= 2 && grade <= 4) {
+    progressStatus.value = "";
+    tipStyle.value = "password-tip-middle";
+    strength.value = "中";
+    strengthValue.value = 66;
+  } else {
+    progressStatus.value = "success";
+    tipStyle.value = "password-tip-strong";
+    strength.value = "强";
+    strengthValue.value = 100;
+  }
+}
+
+function handleChange() {
+  strengthChange();
+  emit("update:modelValue", currentValue.value);
+  emit("input", currentValue.value);
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
+
+function setCurrentValue(value) {
+  if (value === currentValue.value) return;
+  currentValue.value = value ?? "";
+  strengthChange();
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/lili/upload-pic-input.vue b/manager/src/components/lili/upload-pic-input.vue
index 7485ce069..9d5787057 100644
--- a/manager/src/components/lili/upload-pic-input.vue
+++ b/manager/src/components/lili/upload-pic-input.vue
@@ -60,7 +60,7 @@
       @closed="resetPicModal"
     >
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModalFlag"
         :max-select="1"
@@ -70,110 +70,112 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, ref, useAttrs, watch } from "vue";
 import { View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/api/index";
+import { getStore } from "@/libs/storage";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
-export default {
-  name: "uploadPicInput",
-  components: {
-    ossManage,
-    View,
+defineOptions({ name: "uploadPicInput" });
+
+const props = defineProps({
+  modelValue: String,
+  value: String,
+  size: {
+    default: "default",
+    type: String,
   },
-  props: {
-    modelValue: String,
-    value: String,
-    size: {
-      default: "default",
-      type: String,
-    },
-    placeholder: {
-      type: String,
-      default: "图片链接",
-    },
-    showInput: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: Number,
+  placeholder: {
+    type: String,
+    default: "图片链接",
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  data() {
-    return {
-      accessToken: {},
-      currentValue: this.modelValue ?? this.value ?? "",
-      viewImage: false,
-      uploadFileUrl: uploadFile,
-      picModalFlag: false,
-      selectedFormBtnName: "",
-      picIndex: "",
-    };
+  showInput: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    handleCLickImg(val, index) {
-      this.picModalFlag = true;
-      this.selectedFormBtnName = val;
-      this.picIndex = index;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    handleOssCallback(item) {
-      this.picModalFlag = false;
-      if (!item?.url) return;
-      this.currentValue = item.url;
-      this.picIndex = "";
-      this.emitValue(this.currentValue);
-    },
-    resetPicModal() {
-      this.selectedFormBtnName = "";
-      this.picIndex = "";
-    },
-    init() {
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-    },
-    emitValue(val) {
-      this.$emit("update:modelValue", val);
-      this.$emit("input", val);
-      this.$emit("on-change", val);
-    },
-    handleChange() {
-      this.emitValue(this.currentValue);
-      this.$attrs.rollback && this.$attrs.rollback();
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) {
-        return;
-      }
-      this.currentValue = value ?? "";
-      this.emitValue(this.currentValue);
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue(val) {
-      this.setCurrentValue(val);
-    },
-    value(val) {
-      this.setCurrentValue(val);
-    },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  created() {
-    this.init();
-  },
-};
+  maxlength: Number,
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+const attrs = useAttrs();
+
+const accessToken = ref({});
+const currentValue = ref(props.modelValue ?? props.value ?? "");
+const viewImage = ref(false);
+const uploadFileUrl = ref(uploadFile);
+const picModalFlag = ref(false);
+const selectedFormBtnName = ref("");
+const picIndex = ref("");
+
+// 模板 ref：ossManage 与 import 组件同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleCLickImg(val, index) {
+  picModalFlag.value = true;
+  selectedFormBtnName.value = val;
+  picIndex.value = index;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function handleOssCallback(item) {
+  picModalFlag.value = false;
+  if (!item?.url) return;
+  currentValue.value = item.url;
+  picIndex.value = "";
+  emitValue(currentValue.value);
+}
+function resetPicModal() {
+  selectedFormBtnName.value = "";
+  picIndex.value = "";
+}
+function init() {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+}
+function emitValue(val) {
+  emit("update:modelValue", val);
+  emit("input", val);
+  emit("on-change", val);
+}
+function handleChange() {
+  emitValue(currentValue.value);
+  attrs.rollback && attrs.rollback();
+}
+function setCurrentValue(value) {
+  if (value === currentValue.value) {
+    return;
+  }
+  currentValue.value = value ?? "";
+  emitValue(currentValue.value);
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+
+// 原 created 钩子
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/lili/upload-pic-thumb.vue b/manager/src/components/lili/upload-pic-thumb.vue
index 1493fd320..278870e7c 100644
--- a/manager/src/components/lili/upload-pic-thumb.vue
+++ b/manager/src/components/lili/upload-pic-thumb.vue
@@ -75,167 +75,167 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
 import { Camera, Delete, View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/api/index";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import vuedraggable from "vuedraggable";
 
-export default {
-  name: "uploadPicThumb",
-  components: {
-    vuedraggable,
-    Camera,
-    Delete,
-    View,
+defineOptions({ name: "uploadPicThumb" });
+
+const props = defineProps({
+  modelValue: { type: null },
+  value: { type: null },
+  draggable: {
+    type: Boolean,
+    default: true,
   },
-  props: {
-    modelValue: { type: null },
-    value: { type: null },
-    draggable: {
-      type: Boolean,
-      default: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-    limit: {
-      type: Number,
-      default: 10,
-    },
+  multiple: {
+    type: Boolean,
+    default: true,
   },
-  emits: ["update:modelValue", "input", "on-change", "uploadchange"],
-  data() {
-    return {
-      accessToken: {},
-      uploadFileUrl: uploadFile,
-      uploadList: [],
-      viewImage: false,
-      imgUrl: "",
-    };
+  limit: {
+    type: Number,
+    default: 10,
   },
-  computed: {
-    bindValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value;
-    },
-  },
-  methods: {
-    draggableItemKey(item) {
-      return item.url || item.uid || item.name;
-    },
-    onEnd() {
-      this.returnValue();
-    },
-    init() {
-      this.setData(this.bindValue, true);
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-    },
-    handleView(imgUrl) {
-      this.imgUrl = imgUrl;
-      this.viewImage = true;
-    },
-    handleRemove(file) {
-      this.uploadList = this.uploadList.filter((i) => i.url !== file.url);
-      this.returnValue();
-    },
-    handleSuccess(res, file) {
-      if (res.success) {
-        file.url = res.result;
-        if (!this.multiple && this.uploadList.length > 0) {
-          this.uploadList.splice(0, 1);
-        }
-        this.uploadList.push(file);
-        this.returnValue();
-      } else {
-        this.$Message.error(res.message);
-      }
-    },
-    handleError(error) {
-      this.$Message.error(error.toString());
-    },
-    handleBeforeUpload(file) {
-      const okType = ["image/jpeg", "image/png", "image/gif", "image/jpg"].includes(file.type);
-      if (!okType) {
-        this.$Message.warning("请选择 .jpg .jpeg .png .gif 格式图片");
-        return false;
-      }
-      if (file.size / 1024 > 1024) {
-        this.$Message.warning("所选文件大小过大，不能超过 1M");
-        return false;
-      }
-      if (this.multiple && this.uploadList.length >= this.limit) {
-        this.$Message.warning("最多只能上传" + this.limit + "张图片");
-        return false;
-      }
-      return true;
-    },
-    emitValue(val) {
-      this.$emit("update:modelValue", val);
-      this.$emit("input", val);
-      this.$emit("on-change", val);
-    },
-    returnValue() {
-      if (!this.uploadList || this.uploadList.length < 1) {
-        const empty = this.multiple ? [] : "";
-        this.emitValue(empty);
-        return;
-      }
-      if (!this.multiple) {
-        this.emitValue(this.uploadList[0].url);
-      } else {
-        this.emitValue(this.uploadList.map((e) => e.url));
-      }
-    },
-    setData(v, init) {
-      if (typeof v == "string") {
-        if (this.multiple) {
-          this.$Message.warning("多张上传仅支持数组数据类型");
-          return;
-        }
-        if (!v) {
-          return;
-        }
-        this.uploadList = [{ url: v, status: "finished" }];
-        this.$emit("uploadchange", v);
-        this.emitValue(v);
-      } else if (typeof v == "object" && v) {
-        if (!this.multiple) {
-          this.$Message.warning("单张上传仅支持字符串数据类型");
-          return;
-        }
-        this.uploadList = [];
-        const list = v.length > this.limit ? v.slice(0, this.limit) : v;
-        if (v.length > this.limit) {
-          this.$Message.warning("最多只能上传" + this.limit + "张图片");
-        }
-        list.forEach((e) => {
-          this.uploadList.push({
-            status: "finished",
-            ...(typeof e === "string" ? { url: e } : e),
-          });
-        });
-        if (init) {
-          this.emitValue(list);
-        } else {
-          this.$emit("on-change", list);
-        }
-      }
-    },
-  },
-  watch: {
-    modelValue(val) {
-      this.setData(val);
-    },
-    value(val) {
-      this.setData(val);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change", "uploadchange"]);
+
+const accessToken = ref({});
+const uploadFileUrl = uploadFile;
+const uploadList = ref([]);
+const viewImage = ref(false);
+const imgUrl = ref("");
+
+// el-upload 模板 ref
+const upload = ref(null);
+
+const bindValue = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setData(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setData(val);
+  }
+);
+
+function draggableItemKey(item) {
+  return item.url || item.uid || item.name;
+}
+function onEnd() {
+  returnValue();
+}
+function init() {
+  setData(bindValue.value, true);
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+}
+function handleView(url) {
+  imgUrl.value = url;
+  viewImage.value = true;
+}
+function handleRemove(file) {
+  uploadList.value = uploadList.value.filter((i) => i.url !== file.url);
+  returnValue();
+}
+function handleSuccess(res, file) {
+  if (res.success) {
+    file.url = res.result;
+    if (!props.multiple && uploadList.value.length > 0) {
+      uploadList.value.splice(0, 1);
+    }
+    uploadList.value.push(file);
+    returnValue();
+  } else {
+    Message.error(res.message);
+  }
+}
+function handleError(error) {
+  Message.error(error.toString());
+}
+function handleBeforeUpload(file) {
+  const okType = ["image/jpeg", "image/png", "image/gif", "image/jpg"].includes(file.type);
+  if (!okType) {
+    Message.warning("请选择 .jpg .jpeg .png .gif 格式图片");
+    return false;
+  }
+  if (file.size / 1024 > 1024) {
+    Message.warning("所选文件大小过大，不能超过 1M");
+    return false;
+  }
+  if (props.multiple && uploadList.value.length >= props.limit) {
+    Message.warning("最多只能上传" + props.limit + "张图片");
+    return false;
+  }
+  return true;
+}
+function emitValue(val) {
+  emit("update:modelValue", val);
+  emit("input", val);
+  emit("on-change", val);
+}
+function returnValue() {
+  if (!uploadList.value || uploadList.value.length < 1) {
+    const empty = props.multiple ? [] : "";
+    emitValue(empty);
+    return;
+  }
+  if (!props.multiple) {
+    emitValue(uploadList.value[0].url);
+  } else {
+    emitValue(uploadList.value.map((e) => e.url));
+  }
+}
+function setData(v, init) {
+  if (typeof v == "string") {
+    if (props.multiple) {
+      Message.warning("多张上传仅支持数组数据类型");
+      return;
+    }
+    if (!v) {
+      return;
+    }
+    uploadList.value = [{ url: v, status: "finished" }];
+    emit("uploadchange", v);
+    emitValue(v);
+  } else if (typeof v == "object" && v) {
+    if (!props.multiple) {
+      Message.warning("单张上传仅支持字符串数据类型");
+      return;
+    }
+    uploadList.value = [];
+    const list = v.length > props.limit ? v.slice(0, props.limit) : v;
+    if (v.length > props.limit) {
+      Message.warning("最多只能上传" + props.limit + "张图片");
+    }
+    list.forEach((e) => {
+      uploadList.value.push({
+        status: "finished",
+        ...(typeof e === "string" ? { url: e } : e),
+      });
+    });
+    if (init) {
+      emitValue(list);
+    } else {
+      emit("on-change", list);
+    }
+  }
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/map/index.vue b/manager/src/components/map/index.vue
index ffe21d16a..d693cf39b 100644
--- a/manager/src/components/map/index.vue
+++ b/manager/src/components/map/index.vue
@@ -19,132 +19,129 @@
 
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { getRegion } from "@/api/common.js";
 import config from "@/config/index";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "map",
-  data() {
-    return {
-      config,
-      showMap: false, // 地图显隐
-      mapSearch: "", // 地图搜索
-      map: null, // 初始化地图
-      autoComplete: null, // 初始化搜索方法
-      geocoder: null, // 初始化地理、坐标转化
-      positionPicker: null, // 地图拖拽选点
-      tips: [], //搜索关键字列表
-      addrContent: {}, // 回显地址信息
-      loading: false, // 加载状态
+defineOptions({ name: "map" });
+
+const emit = defineEmits(["getAddress"]);
+
+const showMap = ref(false); // 地图显隐
+const mapSearch = ref(""); // 地图搜索
+const map = ref(null); // 初始化地图
+const autoComplete = ref(null); // 初始化搜索方法
+const geocoder = ref(null); // 初始化地理、坐标转化
+const positionPicker = ref(null); // 地图拖拽选点
+const tips = ref([]); //搜索关键字列表
+const addrContent = ref({}); // 回显地址信息
+const loading = ref(false); // 加载状态
+
+watch(mapSearch, (val) => {
+  searchOfMap(val);
+});
+
+function ok() {
+
+  if (addrContent.value && addrContent.value.regeocode) {
+    const params = {
+      cityCode: addrContent.value.regeocode.addressComponent.citycode,
+      townName: addrContent.value.regeocode.addressComponent.township,
     };
-  },
-  watch: {
-    mapSearch: function (val) {
-      this.searchOfMap(val);
-    },
-  },
-  methods: {
-    ok() {
+    getRegion(params).then((res) => {
+      if (res.success) {
+        addrContent.value.addr = res.result.name.replace(/,/g, " ");
+        addrContent.value.addrId = res.result.id;
+        loading.value = false;
 
-      if (this.addrContent && this.addrContent.regeocode) {
-        const params = {
-          cityCode: this.addrContent.regeocode.addressComponent.citycode,
-          townName: this.addrContent.regeocode.addressComponent.township,
-        };
-        getRegion(params).then((res) => {
-          if (res.success) {
-            this.addrContent.addr = res.result.name.replace(/,/g, " ");
-            this.addrContent.addrId = res.result.id;
-            this.loading = false;
-
-            this.$emit("getAddress", this.addrContent);
-          }
-        });
-      } else {
-        this.$Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+        emit("getAddress", addrContent.value);
       }
+    });
+  } else {
+    Message.error('未获取到坐标信息！请查看高德API配置是否正确')
+  }
 
+}
+function init() {
+  AMapLoader.load({
+    key: config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: [
+      "AMap.ToolBar",
+      "AMap.Autocomplete",
+      "AMap.PlaceSearch",
+      "AMap.Geolocation",
+      "AMap.Geocoder",
+    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    AMapUI: {
+      // 是否加载 AMapUI，缺省不加载
+      version: "1.1", // AMapUI 缺省 1.1
+      plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
     },
-    init() {
-      AMapLoader.load({
-        key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [
-          "AMap.ToolBar",
-          "AMap.Autocomplete",
-          "AMap.PlaceSearch",
-          "AMap.Geolocation",
-          "AMap.Geocoder",
-        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-        AMapUI: {
-          // 是否加载 AMapUI，缺省不加载
-          version: "1.1", // AMapUI 缺省 1.1
-          plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
-        },
-      })
-        .then((AMap) => {
-          let that = this;
-          this.map = new AMap.Map("map-container", {
-            zoom: 12,
-          });
-          that.map.addControl(new AMap.ToolBar());
-          that.map.addControl(new AMap.Autocomplete());
-          that.map.addControl(new AMap.PlaceSearch());
-          that.map.addControl(new AMap.Geocoder());
-
-          // 实例化Autocomplete
-          let autoOptions = {
-            city: "全国",
-          };
-          that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
-          that.geocoder = new AMap.Geocoder(autoOptions);
-
-          that.positionPicker = new AMapUI.PositionPicker({
-            // 拖拽选点
-            mode: "dragMap",
-            map: that.map,
-          });
-          that.positionPicker.start();
-          /**
-           *
-           * 所有回显数据，都在positionResult里面
-           * 需要字段可以查找
-           *
-           */
-          that.positionPicker.on("success", function (positionResult) {
-            that.addrContent = positionResult;
-          });
-        })
-        .catch((e) => { });
-    },
-    searchOfMap(val) {
-      // 地图搜索
-      let that = this;
-      this.autoComplete.search(val, function (status, result) {
-        // 搜索成功时，result即是对应的匹配数据
-        if (status == "complete" && result.info == "OK") {
-          that.tips = result.tips;
-        } else {
-          that.tips = [];
-        }
+  })
+    .then((AMap) => {
+      map.value = new AMap.Map("map-container", {
+        zoom: 12,
       });
-    },
-    selectAddr(location) {
-      // 选择坐标
-      if (!location) {
-        this.$Message.warning("请选择正确点位");
-        return false;
-      }
-      const lnglat = [location.lng, location.lat];
-      this.positionPicker.start(lnglat);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      map.value.addControl(new AMap.ToolBar());
+      map.value.addControl(new AMap.Autocomplete());
+      map.value.addControl(new AMap.PlaceSearch());
+      map.value.addControl(new AMap.Geocoder());
+
+      // 实例化Autocomplete
+      let autoOptions = {
+        city: "全国",
+      };
+      autoComplete.value = new AMap.Autocomplete(autoOptions); // 搜索
+      geocoder.value = new AMap.Geocoder(autoOptions);
+
+      positionPicker.value = new AMapUI.PositionPicker({
+        // 拖拽选点
+        mode: "dragMap",
+        map: map.value,
+      });
+      positionPicker.value.start();
+      /**
+       *
+       * 所有回显数据，都在positionResult里面
+       * 需要字段可以查找
+       *
+       */
+      positionPicker.value.on("success", function (positionResult) {
+        addrContent.value = positionResult;
+      });
+    })
+    .catch((e) => { });
+}
+function searchOfMap(val) {
+  // 地图搜索
+  autoComplete.value.search(val, function (status, result) {
+    // 搜索成功时，result即是对应的匹配数据
+    if (status == "complete" && result.info == "OK") {
+      tips.value = result.tips;
+    } else {
+      tips.value = [];
+    }
+  });
+}
+function selectAddr(location) {
+  // 选择坐标
+  if (!location) {
+    Message.warning("请选择正确点位");
+    return false;
+  }
+  const lnglat = [location.lng, location.lat];
+  positionPicker.value.start(lnglat);
+}
+
+onMounted(() => {
+  init();
+});
+
+// 唯一引用方 multiple-map.vue 通过 ref 引用本组件但从不访问任何成员（仅监听 getAddress 事件），无需暴露成员
 </script>
 <style lang="scss" scoped>
 #map-container {
diff --git a/manager/src/components/map/multiple-map.vue b/manager/src/components/map/multiple-map.vue
index 6ad98e0e1..0533f608a 100644
--- a/manager/src/components/map/multiple-map.vue
+++ b/manager/src/components/map/multiple-map.vue
@@ -40,85 +40,87 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { aMapSwitch } from "@/config/index";
 import mapping from "@/components/map/index.vue";
 import * as API_Setup from "@/api/common.js";
+import { Message } from "@/utils/message";
 
-export default {
-  components: { mapping },
-  data() {
-    return {
-      aMapSwitch,
-      enableMap: false,
-      mapDefault: "select",
-      data: {
-        province: [],
-        city: [],
-        area: [],
-        street: [],
-      },
-      chiosend: [],
-    };
-  },
-  mounted() {
-    this.chiosend = new Array(4).fill("");
-  },
-  methods: {
-    open() {
-      this.enableMap = true;
-      this.init({ id: 0 }, "province");
-    },
-    changeMap(val) {
-      this.mapDefault = val;
-    },
-    init(val, level = "province", index) {
-      if (level == 0) {
-        this.chiosend.splice(3, 1, val);
-      } else {
-        API_Setup.getChildRegion(val.id).then((res) => {
-          if (res.result.length && val.id !== 0) {
-            this.chiosend[index] = val;
-          } else if (!res.result.length) {
-            this.chiosend[index] = val;
-          }
-          this.data[level] = res.result;
-          if (level == "city") {
-            this.data.area = [];
-            this.data.street = [];
-            this.chiosend.splice(1, 3, "", "", "");
-          }
-          if (level == "area") {
-            this.data.street = [];
-            this.chiosend.splice(2, 2, "", "");
-          }
-          if (level == "street") {
-            this.chiosend.splice(3, 1, "");
-          }
-        });
+const emit = defineEmits(["callback"]);
+
+const enableMap = ref(false);
+const mapDefault = ref("select");
+const data = reactive({
+  province: [],
+  city: [],
+  area: [],
+  street: [],
+});
+const chiosend = ref([]);
+
+// 模板 ref，对应高德地图子组件
+const map = ref(null);
+
+onMounted(() => {
+  chiosend.value = new Array(4).fill("");
+});
+
+function open() {
+  enableMap.value = true;
+  init({ id: 0 }, "province");
+}
+function changeMap(val) {
+  mapDefault.value = val;
+}
+function init(val, level = "province", index) {
+  if (level == 0) {
+    chiosend.value.splice(3, 1, val);
+  } else {
+    API_Setup.getChildRegion(val.id).then((res) => {
+      if (res.result.length && val.id !== 0) {
+        chiosend.value[index] = val;
+      } else if (!res.result.length) {
+        chiosend.value[index] = val;
       }
-    },
-    getAddress(center) {
-      this.$emit("callback", {
-        type: this.mapDefault,
-        data: center,
-      });
-      this.enableMap = false;
-    },
-    finished() {
-      if (!this.chiosend[0]) {
-        this.$Message.error("请选择地址");
-        return;
+      data[level] = res.result;
+      if (level == "city") {
+        data.area = [];
+        data.street = [];
+        chiosend.value.splice(1, 3, "", "", "");
       }
-      const params = this.chiosend.filter((item) => item !== "" && item.value !== "");
-      this.enableMap = false;
-      this.$emit("callback", {
-        type: this.mapDefault,
-        data: params,
-      });
-    },
-  },
-};
+      if (level == "area") {
+        data.street = [];
+        chiosend.value.splice(2, 2, "", "");
+      }
+      if (level == "street") {
+        chiosend.value.splice(3, 1, "");
+      }
+    });
+  }
+}
+function getAddress(center) {
+  emit("callback", {
+    type: mapDefault.value,
+    data: center,
+  });
+  enableMap.value = false;
+}
+function finished() {
+  if (!chiosend.value[0]) {
+    Message.error("请选择地址");
+    return;
+  }
+  const params = chiosend.value.filter((item) => item !== "" && item.value !== "");
+  enableMap.value = false;
+  emit("callback", {
+    type: mapDefault.value,
+    data: params,
+  });
+}
+
+// 父组件（member/index、memberRecycle、memberDetail、orderDetail、shopOperation）通过 ref 调用 open() 打开弹窗
+defineExpose({ open });
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/components/price-color-scheme.vue b/manager/src/components/price-color-scheme.vue
index e30d15249..f49daf8bd 100644
--- a/manager/src/components/price-color-scheme.vue
+++ b/manager/src/components/price-color-scheme.vue
@@ -5,54 +5,56 @@
   </span>
 </template>
 
-<script>
+<script setup>
+import { computed, getCurrentInstance } from "vue";
 import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "priceColorScheme",
-  props: {
-    value: {
-      default: 0,
-      validator(val) {
-        return (
-          val === null ||
-          val === undefined ||
-          typeof val === "number" ||
-          typeof val === "string"
-        );
-      },
-    },
-    unit: {
-      type: String,
-      default: "￥",
-    },
-    dot: {
-      type: String,
-      default: "",
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    customStyle: {
-      type: Object,
-      default: () => ({}),
+defineOptions({ name: "priceColorScheme" });
+
+const props = defineProps({
+  value: {
+    default: 0,
+    validator(val) {
+      return (
+        val === null ||
+        val === undefined ||
+        typeof val === "number" ||
+        typeof val === "string"
+      );
     },
   },
-  computed: {
-    displayText() {
-      const val = this.value;
-      if (val === null || val === undefined || val === "" || val === "null") {
-        return `${this.unit || "￥"}0.00`;
-      }
-      return unitPrice(val, this.unit);
-    },
-    priceStyle() {
-      const resolvedColor = this.color || this.$mainColor || "";
-      return resolvedColor
-        ? { color: resolvedColor, ...this.customStyle }
-        : { ...this.customStyle };
-    },
+  unit: {
+    type: String,
+    default: "￥",
   },
-};
+  dot: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  customStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// $mainColor 为 main.js 注册的全局属性
+const { proxy } = getCurrentInstance();
+
+const displayText = computed(() => {
+  const val = props.value;
+  if (val === null || val === undefined || val === "" || val === "null") {
+    return `${props.unit || "￥"}0.00`;
+  }
+  return unitPrice(val, props.unit);
+});
+const priceStyle = computed(() => {
+  const resolvedColor = props.color || proxy.$mainColor || "";
+  return resolvedColor
+    ? { color: resolvedColor, ...props.customStyle }
+    : { ...props.customStyle };
+});
 </script>
diff --git a/manager/src/components/region.vue b/manager/src/components/region.vue
index efec77c3a..629eba02e 100644
--- a/manager/src/components/region.vue
+++ b/manager/src/components/region.vue
@@ -10,140 +10,140 @@
     />
   </div>
 </template>
-<script>
+<script setup>
+import { computed, ref, watch } from "vue";
 import { getChildRegion } from "@/api/common.js";
 
-export default {
-  props: ["addressId"],
-  data() {
-    return {
-      data: [],
-      addr: [],
-    };
-  },
-  computed: {
-    cascaderProps() {
-      return {
-        value: "value",
-        label: "label",
-        lazy: true,
-        lazyLoad: this.loadData,
-      };
-    },
-  },
-  methods: {
-    change(val) {
-      if (!val || !val.length) {
-        this.$emit("selected", [[], []]);
-        return;
-      }
-      const labels = this.resolveLabels(val);
-      this.$emit("selected", [val, labels]);
-    },
-    resolveLabels(values) {
-      const labels = [];
-      let options = this.data;
-      for (const v of values) {
-        const node = options.find((item) => item.value === v);
-        if (!node) break;
-        labels.push(node.label);
-        options = node.children || [];
-      }
-      return labels;
-    },
-    loadData(node, resolve) {
-      const parentId = node.level === 0 ? 0 : node.value;
-      getChildRegion(parentId).then((res) => {
-        if (!res.result || res.result.length <= 0) {
-          resolve([]);
-          return;
-        }
-        const nodes = res.result.map((child) => {
-          const isLeaf =
-            child.level === "street" ||
-            node.label === "香港特别行政区" ||
-            child.name === "台湾省";
-          return {
-            value: child.id,
-            label: child.name,
-            leaf: isLeaf,
-          };
-        });
-        resolve(nodes);
-      });
-    },
-    async init() {
-      const data = await getChildRegion(0);
-      this.data = data.result.map((item) => ({
-        value: item.id,
-        label: item.name,
-        leaf: item.name === "台湾省",
-      }));
-    },
-    async reviewData() {
-      const addr = JSON.parse(JSON.stringify(this.addressId.split(",")));
-      const length = addr.length;
-      const root = await getChildRegion(0);
-      const arr0 = root.result.map((item) => ({
-        value: item.id,
-        label: item.name,
-        leaf: item.name === "台湾省",
-        children: [],
-      }));
+const props = defineProps(["addressId"]);
+const emit = defineEmits(["selected"]);
 
-      if (length > 0) {
-        const children = await getChildRegion(addr[0]);
-        const arr1 = this.handleData(children.result);
-        arr0.forEach((e) => {
-          if (e.value === addr[0]) {
-            e.children = arr1;
-          }
-        });
-      }
-      if (length > 1) {
-        let arr1 = arr0.find((e) => e.value === addr[0])?.children || [];
-        const children = await getChildRegion(addr[1]);
-        const arr2 = this.handleData(children.result);
-        arr1.forEach((e) => {
-          if (e.value === addr[1]) {
-            e.children = arr2;
-          }
-        });
-      }
-      if (length > 2) {
-        const arr1 = arr0.find((e) => e.value === addr[0])?.children || [];
-        const arr2 = arr1.find((e) => e.value === addr[1])?.children || [];
-        const children = await getChildRegion(addr[2]);
-        const arr3 = this.handleData(children.result);
-        arr2.forEach((e) => {
-          if (e.value === addr[2]) {
-            e.children = arr3;
-          }
-        });
-      }
-      this.data = arr0;
-      this.addr = addr;
-    },
-    handleData(data) {
-      return data.map((child) => ({
+const data = ref([]);
+const addr = ref([]);
+
+const cascaderProps = computed(() => {
+  return {
+    value: "value",
+    label: "label",
+    lazy: true,
+    lazyLoad: loadData,
+  };
+});
+
+function change(val) {
+  if (!val || !val.length) {
+    emit("selected", [[], []]);
+    return;
+  }
+  const labels = resolveLabels(val);
+  emit("selected", [val, labels]);
+}
+
+function resolveLabels(values) {
+  const labels = [];
+  let options = data.value;
+  for (const v of values) {
+    const node = options.find((item) => item.value === v);
+    if (!node) break;
+    labels.push(node.label);
+    options = node.children || [];
+  }
+  return labels;
+}
+
+function loadData(node, resolve) {
+  const parentId = node.level === 0 ? 0 : node.value;
+  getChildRegion(parentId).then((res) => {
+    if (!res.result || res.result.length <= 0) {
+      resolve([]);
+      return;
+    }
+    const nodes = res.result.map((child) => {
+      const isLeaf =
+        child.level === "street" ||
+        node.label === "香港特别行政区" ||
+        child.name === "台湾省";
+      return {
         value: child.id,
         label: child.name,
-        leaf: child.level === "street",
-        children: child.level === "street" ? undefined : [],
-      }));
-    },
+        leaf: isLeaf,
+      };
+    });
+    resolve(nodes);
+  });
+}
+
+async function init() {
+  const res = await getChildRegion(0);
+  data.value = res.result.map((item) => ({
+    value: item.id,
+    label: item.name,
+    leaf: item.name === "台湾省",
+  }));
+}
+
+async function reviewData() {
+  const addrArr = JSON.parse(JSON.stringify(props.addressId.split(",")));
+  const length = addrArr.length;
+  const root = await getChildRegion(0);
+  const arr0 = root.result.map((item) => ({
+    value: item.id,
+    label: item.name,
+    leaf: item.name === "台湾省",
+    children: [],
+  }));
+
+  if (length > 0) {
+    const children = await getChildRegion(addrArr[0]);
+    const arr1 = handleData(children.result);
+    arr0.forEach((e) => {
+      if (e.value === addrArr[0]) {
+        e.children = arr1;
+      }
+    });
+  }
+  if (length > 1) {
+    let arr1 = arr0.find((e) => e.value === addrArr[0])?.children || [];
+    const children = await getChildRegion(addrArr[1]);
+    const arr2 = handleData(children.result);
+    arr1.forEach((e) => {
+      if (e.value === addrArr[1]) {
+        e.children = arr2;
+      }
+    });
+  }
+  if (length > 2) {
+    const arr1 = arr0.find((e) => e.value === addrArr[0])?.children || [];
+    const arr2 = arr1.find((e) => e.value === addrArr[1])?.children || [];
+    const children = await getChildRegion(addrArr[2]);
+    const arr3 = handleData(children.result);
+    arr2.forEach((e) => {
+      if (e.value === addrArr[2]) {
+        e.children = arr3;
+      }
+    });
+  }
+  data.value = arr0;
+  addr.value = addrArr;
+}
+
+function handleData(list) {
+  return list.map((child) => ({
+    value: child.id,
+    label: child.name,
+    leaf: child.level === "street",
+    children: child.level === "street" ? undefined : [],
+  }));
+}
+
+watch(
+  () => props.addressId,
+  (v) => {
+    if (v) {
+      reviewData();
+    } else {
+      init();
+    }
   },
-  watch: {
-    addressId: {
-      handler(v) {
-        if (v) {
-          this.reviewData();
-        } else {
-          this.init();
-        }
-      },
-      immediate: true,
-    },
-  },
-};
+  { immediate: true }
+);
 </script>
diff --git a/manager/src/components/verify/index.vue b/manager/src/components/verify/index.vue
index 2e4f1fcf9..bb7b8c8f6 100644
--- a/manager/src/components/verify/index.vue
+++ b/manager/src/components/verify/index.vue
@@ -37,107 +37,106 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { Refresh, DArrowRight } from "@element-plus/icons-vue";
 import { getVerifyImg, postVerifyImg } from "./verify.js";
+import { Message } from "@/utils/message";
 
-export default {
-  components: { Refresh, DArrowRight },
-  props: {
-    verifyType: {
-      default: "LOGIN",
-      type: String,
-    },
+const props = defineProps({
+  verifyType: {
+    default: "LOGIN",
+    type: String,
   },
-  data() {
-    return {
-      show: false,
-      type: "LOGIN",
-      data: {
-        backImage: "",
-        slidingImage: "",
-        originalHeight: 150,
-        originalWidth: 300,
-        sliderWidth: 60,
-        sliderHeight: 60,
-      },
-      distance: 0,
-      flag: false,
-      downX: 0,
-      bgColor: "#04ad11",
-      verifyText: "拖动滑块解锁",
-    };
+});
+const emit = defineEmits(["change"]);
+
+const show = ref(false);
+const type = ref("LOGIN");
+const data = ref({
+  backImage: "",
+  slidingImage: "",
+  originalHeight: 150,
+  originalWidth: 300,
+  sliderWidth: 60,
+  sliderHeight: 60,
+});
+const distance = ref(0);
+const flag = ref(false);
+const downX = ref(0);
+const bgColor = ref("#04ad11");
+const verifyText = ref("拖动滑块解锁");
+
+watch(
+  () => props.verifyType,
+  (v) => {
+    type.value = v;
   },
-  methods: {
-    mouseDown(e) {
-      this.downX = e.clientX;
-      this.flag = true;
-    },
-    mouseMove(e) {
-      if (this.flag) {
-        const offset = e.clientX - this.downX;
-        if (offset > this.data.originalWidth - 43) {
-          this.distance = this.data.originalWidth - 43;
-        } else if (offset < 0) {
-          this.distance = 0;
-        } else {
-          this.distance = offset;
-        }
-      }
-    },
-    mouseUp() {
-      if (!this.flag) return false;
-      this.flag = false;
-      const params = {
-        verificationEnums: this.type,
-        xPos: this.distance,
-      };
-      postVerifyImg(params)
-        .then((res) => {
-          if (res.success) {
-            if (res.result) {
-              this.bgColor = "green";
-              this.verifyText = "解锁成功";
-              this.$emit("change", { status: true, distance: this.distance });
-            } else {
-              this.bgColor = "red";
-              this.verifyText = "解锁失败";
-              setTimeout(() => this.init(), 1000);
-              this.$emit("change", { status: false, distance: this.distance });
-            }
-          } else {
-            this.init();
-          }
-        })
-        .catch(() => {
-          this.init();
-        });
-    },
-    init() {
-      this.flag = false;
-      this.downX = 0;
-      this.distance = 0;
-      this.bgColor = "#04ad11";
-      this.verifyText = "拖动滑块解锁";
-      getVerifyImg(this.type).then((res) => {
+  { immediate: true }
+);
+
+function mouseDown(e) {
+  downX.value = e.clientX;
+  flag.value = true;
+}
+function mouseMove(e) {
+  if (flag.value) {
+    const offset = e.clientX - downX.value;
+    if (offset > data.value.originalWidth - 43) {
+      distance.value = data.value.originalWidth - 43;
+    } else if (offset < 0) {
+      distance.value = 0;
+    } else {
+      distance.value = offset;
+    }
+  }
+}
+function mouseUp() {
+  if (!flag.value) return false;
+  flag.value = false;
+  const params = {
+    verificationEnums: type.value,
+    xPos: distance.value,
+  };
+  postVerifyImg(params)
+    .then((res) => {
+      if (res.success) {
         if (res.result) {
-          this.data = res.result;
-          this.show = true;
+          bgColor.value = "green";
+          verifyText.value = "解锁成功";
+          emit("change", { status: true, distance: distance.value });
         } else {
-          this.$Message.warning("请求失败请重试！");
+          bgColor.value = "red";
+          verifyText.value = "解锁失败";
+          setTimeout(() => init(), 1000);
+          emit("change", { status: false, distance: distance.value });
         }
-      });
-    },
-  },
-  watch: {
-    verifyType: {
-      immediate: true,
-      handler(v) {
-        this.type = v;
-      },
-    },
-  },
-};
+      } else {
+        init();
+      }
+    })
+    .catch(() => {
+      init();
+    });
+}
+function init() {
+  flag.value = false;
+  downX.value = 0;
+  distance.value = 0;
+  bgColor.value = "#04ad11";
+  verifyText.value = "拖动滑块解锁";
+  getVerifyImg(type.value).then((res) => {
+    if (res.result) {
+      data.value = res.result;
+      show.value = true;
+    } else {
+      Message.warning("请求失败请重试！");
+    }
+  });
+}
+
+// login.vue 通过 verifyRef.value.show = false 关闭、verifyRef.value.init() 打开
+defineExpose({ show, init });
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/libs/util.js b/manager/src/libs/util.js
index 601519252..6db29f7c6 100644
--- a/manager/src/libs/util.js
+++ b/manager/src/libs/util.js
@@ -1,5 +1,6 @@
-import lazyLoading from "./lazyLoading.js";
+import lazyLoading from "./lazyLoading.js";
 import { getRouter } from "./router-holder";
+import { useAppStore } from "@/stores/app";
 import Cookies from "js-cookie";
 
 let util = {};
@@ -176,22 +177,21 @@ util.oneOf = function(ele, targetArr) {
 };
 
 // 打开新的页面
-util.openNewPage = function(vm, name, argu, query) {
-  if (!vm.$store) {
-    return;
-  }
-  let pageOpenedList = vm.$store.state.app.pageOpenedList;
-  const currentPath = vm.$route ? vm.$route.path : "";
+util.openNewPage = function(name, argu, query) {
+  const appStore = useAppStore();
+  let pageOpenedList = appStore.pageOpenedList;
+  const router = getRouter();
+  const currentPath = router ? router.currentRoute.value.path : "";
   const openedIndex = util.findOpenedPageIndex(pageOpenedList, name, currentPath);
   if (openedIndex >= 0) {
-    vm.$store.commit("pageOpenedList", {
+    appStore.updateOpenedList({
       index: openedIndex,
       argu: argu,
       query: query
     });
     return;
   }
-  let tag = vm.$store.state.app.tagsList.filter(item => {
+  let tag = appStore.tagsList.filter(item => {
     if (item.children) {
       return name == item.children[0].name;
     } else {
@@ -200,7 +200,7 @@ util.openNewPage = function(vm, name, argu, query) {
   });
   tag = tag[0];
   if (!tag) {
-    tag = vm.$store.state.app.tagsList.find((item) => {
+    tag = appStore.tagsList.find((item) => {
       const candidate = item.children ? item.children[0] : item;
       return util.isSameRoutePage(candidate, { name, path: currentPath });
     });
@@ -217,7 +217,7 @@ util.openNewPage = function(vm, name, argu, query) {
     if (query) {
       tagObj.query = query;
     }
-    vm.$store.commit("increateTag", tagObj);
+    appStore.increateTag(tagObj);
   }
 };
 
@@ -245,8 +245,9 @@ util.toDefaultPage = function(routers, name, route, next) {
   }
 };
 
-util.initRouter = function(vm) {
+util.initRouter = function() {
   // 初始化路由
+  const appStore = useAppStore();
   const constRoutes = [];
   const otherRoutes = [];
 
@@ -267,7 +268,7 @@ util.initRouter = function(vm) {
     // 未登录
     return;
   }
-  if (!vm.$store.state.app.added) {
+  if (!appStore.added) {
     // 第一次加载 读取数据
     // 加载菜单
     import("@/api/index").then(({ getCurrentPermissionList }) => {
@@ -293,26 +294,25 @@ util.initRouter = function(vm) {
       }
       util.initAllMenuData(constRoutes, menuData);
       util.registerDynamicRoutes(menuData);
-      vm.$store.commit(
-        "updateAppRouter",
+      appStore.updateAppRouter(
         constRoutes.filter((item) => item.children && item.children.length > 0)
       );
-      util.initMenuData(vm, menuData);
+      util.initMenuData(menuData);
       // 缓存数据 修改加载标识
       window.localStorage.setItem("menuData", JSON.stringify(menuData));
-      vm.$store.commit("setAdded", true);
+      appStore.setAdded(true);
       });
     });
   } else {
     // 读取缓存数据
     let data = window.localStorage.getItem("menuData");
     if (!data) {
-      vm.$store.commit("setAdded", false);
+      appStore.setAdded(false);
       return;
     }
     let menuData = JSON.parse(data);
     util.registerDynamicRoutes(menuData);
-    util.initMenuData(vm, menuData);
+    util.initMenuData(menuData);
   }
 };
 
@@ -330,7 +330,8 @@ util.initAllMenuData = function(constRoutes, data) {
 };
 
 // 生成菜单格式数据
-util.initMenuData = function(vm, data) {
+util.initMenuData = function(data) {
+  const appStore = useAppStore();
   const menuRoutes = [];
   let menuData = data;
   // 顶部菜单 —— 首页固定置顶
@@ -345,26 +346,26 @@ util.initMenuData = function(vm, data) {
   if (navList.length < 1) {
     return;
   }
-  // 存入vuex
-  vm.$store.commit("setNavList", navList);
+  // 存入pinia
+  appStore.setNavList(navList);
   let currNav = window.localStorage.getItem("currNav");
   if (currNav) {
     // 读取缓存title
     for (var item of navList) {
       if (item.name == currNav) {
-        vm.$store.commit("setCurrNavTitle", item.title);
+        appStore.setCurrNavTitle(item.title);
         break;
       }
     }
   } else {
     // 默认首页
     currNav = 'home_index';
-    vm.$store.commit("setCurrNavTitle", '首页');
+    appStore.setCurrNavTitle('首页');
   }
-  vm.$store.commit("setCurrNav", currNav);
+  appStore.setCurrNav(currNav);
   // 首页不需要二级菜单
   if (currNav === 'home_index') {
-    vm.$store.commit("updateMenulist", []);
+    appStore.updateMenulist([]);
     return;
   }
   for (let item of menuData) {
@@ -376,20 +377,19 @@ util.initMenuData = function(vm, data) {
   }
   util.initRouterNode(menuRoutes, menuData);
   // 刷新界面菜单
-  vm.$store.commit(
-    "updateMenulist",
+  appStore.updateMenulist(
     menuRoutes.filter(item => item.children.length > 0)
   );
 
   let tagsList = [];
-  vm.$store.state.app.routers.map(item => {
+  appStore.routers.map(item => {
     if (item.children.length <= 1) {
       tagsList.push(item.children[0]);
     } else {
       tagsList.push(...item.children);
     }
   });
-  vm.$store.commit("setTagsList", tagsList);
+  appStore.setTagsList(tagsList);
 };
 
 // 生成路由节点
diff --git a/manager/src/main.js b/manager/src/main.js
index c0fe3429c..f90eed1ff 100644
--- a/manager/src/main.js
+++ b/manager/src/main.js
@@ -1,10 +1,10 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import "core-js/stable";
 import "./styles/theme.less";
 import "@/styles/common.scss";
 import App from "./App.vue";
 import { router } from "./router/index";
-import store from "./store";
 import i18n from "@/locale";
 import { setupElementPlus } from "@/plugins/element";
 import { setupLegacyMessage } from "@/utils/message";
@@ -46,7 +46,7 @@ setupLegacyMessage(app);
 installVueQr(app);
 
 app.use(router);
-app.use(store);
+app.use(createPinia());
 app.use(i18n);
 
 app.component("liliDialog", liliDialog);
diff --git a/manager/src/router/index.js b/manager/src/router/index.js
index e996481bd..4c6c73203 100644
--- a/manager/src/router/index.js
+++ b/manager/src/router/index.js
@@ -4,7 +4,6 @@ import "nprogress/nprogress.css";
 import Util from "../libs/util";
 import { setRouter } from "../libs/router-holder";
 import Cookies from "js-cookie";
-import store from "@/store";
 import { routers } from "./router";
 
 NProgress.configure({ showSpinner: false });
@@ -43,7 +42,7 @@ router.beforeEach((to, from, next) => {
 });
 
 router.afterEach((to) => {
-  Util.openNewPage({ $store: store }, to.name, to.params, to.query);
+  Util.openNewPage(to.name, to.params, to.query);
   NProgress.done();
   window.scrollTo(0, 0);
 });
diff --git a/manager/src/store/index.js b/manager/src/store/index.js
deleted file mode 100644
index 2aeef30ae..000000000
--- a/manager/src/store/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createStore } from "vuex";
-import app from "./modules/app";
-import setting from "./modules/setting";
-import user from "./modules/user";
-import dict from "./modules/dict";
-
-const store = createStore({
-  state: {
-    openStyleStore: "",
-    openStoreId: "",
-    notices: "",
-  },
-  mutations: {},
-  actions: {},
-  modules: {
-    app,
-    user,
-    setting,
-    dict,
-  },
-});
-
-export default store;
diff --git a/manager/src/store/modules/app.js b/manager/src/store/modules/app.js
deleted file mode 100644
index a75d5f3e2..000000000
--- a/manager/src/store/modules/app.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import {
-  otherRouter
-} from '@/router/router';
-import {
-  router
-} from '@/router/index';
-import Util from '@/libs/util';
-import i18n from '@/locale';
-
-const app = {
-  state: {
-    styleStore: "", // 移动端楼层装修中选择风格存储
-    added: false, // 加载路由标识
-    navList: [], // 顶部菜单
-    currNav: "", // 当前顶部菜单name
-    currNavTitle: "", // 当前顶部菜单标题
-    cachePage: [],
-    lang: '',
-    pageOpenedList: [{ // 打开过的页面，顶部历史菜单项
-      title: '首页',
-      path: '',
-      name: 'home_index'
-    }],
-    hotWords:[], //今日热词数据
-    // 面包屑数组 左侧菜单
-    menuList: [],
-    tagsList: [...otherRouter.children], //这块是面包屑的内容不能删除
-    routers: [otherRouter],
-    messageCount: 0,
-    // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
-    dontCache: ['test', 'test']
-  },
-  mutations: {
-    // 动态添加主界面路由，需要缓存
-    updateAppRouter(state, routes) {
-      state.routers.push(...routes);
-      // 实际 addRoute 在 util.registerDynamicRoutes 中完成
-    },
-    updateDefaultRouter(state, routes) {
-      // 兼容旧调用，404 由 registerDynamicRoutes 注册
-    },
-    setAdded(state, v) {
-      state.added = v;
-    },
-    setNavList(state, list) {
-      state.navList = list;
-    },
-    setCurrNav(state, v) {
-      state.currNav = v;
-    },
-    setCurrNavTitle(state, v) {
-      state.currNavTitle = v;
-    },
-    setTagsList(state, list) {
-      state.tagsList.push(...list);
-    },
-    updateMenulist(state, routes) {
-      state.menuList = routes;
-    },
-    closePage(state, name) {
-      state.cachePage.forEach((item, index) => {
-        if (item == name) {
-          state.cachePage.splice(index, 1);
-        }
-      });
-    },
-    initCachePage(state) {
-      if (localStorage.cachePage) {
-        state.cachePage = JSON.parse(localStorage.cachePage);
-      }
-    },
-    removeTag(state, name) {
-      state.pageOpenedList.map((item, index) => {
-        if (item.name == name) {
-          state.pageOpenedList.splice(index, 1);
-        }
-      });
-    },
-    pageOpenedList(state, get) {
-      let openedPage = state.pageOpenedList[get.index];
-      if (get.argu) {
-        openedPage.argu = get.argu;
-      }
-      if (get.query) {
-        openedPage.query = get.query;
-      }
-      state.pageOpenedList.splice(get.index, 1, openedPage);
-      localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
-    },
-    clearAllTags(state) {
-      state.pageOpenedList.splice(1);
-      state.cachePage.length = 0;
-      localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
-    },
-    clearOtherTags(state, vm) {
-      let currentName = vm.$route.name;
-      let currentIndex = 0;
-      state.pageOpenedList.forEach((item, index) => {
-        if (item.name == currentName) {
-          currentIndex = index;
-        }
-      });
-      if (currentIndex == 0) {
-        state.pageOpenedList.splice(1);
-      } else {
-        state.pageOpenedList.splice(currentIndex + 1);
-        state.pageOpenedList.splice(1, currentIndex - 1);
-      }
-      let newCachepage = state.cachePage.filter(item => {
-        return item == currentName;
-      });
-      state.cachePage = newCachepage;
-      localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
-    },
-    setOpenedList(state) {
-      state.pageOpenedList = localStorage.pageOpenedList ? JSON.parse(localStorage.pageOpenedList) : [otherRouter.children[0]];
-    },
-    setAvatarPath(state, path) {
-      localStorage.avatorImgPath = path;
-    },
-    switchLang(state, lang) {
-      state.lang = lang;
-      localStorage.lang = lang;
-      i18n.global.locale = lang;
-    },
-    setMessageCount(state, count) {
-      state.messageCount = count;
-    },
-    increateTag(state, tagObj) {
-      if (!Util.oneOf(tagObj.name, state.dontCache)) {
-        state.cachePage.push(tagObj.name);
-        localStorage.cachePage = JSON.stringify(state.cachePage);
-      }
-      state.pageOpenedList.push(tagObj);
-      localStorage.pageOpenedList = JSON.stringify(state.pageOpenedList);
-    }
-  }
-};
-
-export default app;
diff --git a/manager/src/store/modules/dict.js b/manager/src/store/modules/dict.js
deleted file mode 100644
index 13580af30..000000000
--- a/manager/src/store/modules/dict.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const dict = {
-    state: {
-        // 经常需要读取的数据字典
-        sex: [],
-        messageType: [],
-        priority: [],
-        leaveType: []
-    },
-    mutations: {
-        // 设置值的改变方法
-        setSex(state, list) {
-            state.sex = list;
-        },
-        setMessageType(state, list) {
-            state.messageType = list;
-        },
-        setPriority(state, list) {
-            state.priority = list;
-        },
-        setLeaveType(state, list) {
-            state.leaveType = list;
-        },
-    }
-};
-
-export default dict;
diff --git a/manager/src/store/modules/setting.js b/manager/src/store/modules/setting.js
deleted file mode 100644
index 7fa2ee0d3..000000000
--- a/manager/src/store/modules/setting.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import config from "@/config";
-
-const { setting } = config;
-
-const localSetting = window.localStorage.getItem('admin-setting')
-const settingData = {
-  state: {
-    setting:localSetting ? JSON.parse(localSetting) : setting,
-  },
-  mutations: {
-    updateSetting(state, data) {
-      state.setting = data;
-    },
-  },
-};
-
-export default settingData;
diff --git a/manager/src/store/modules/user.js b/manager/src/store/modules/user.js
deleted file mode 100644
index e1e2f8083..000000000
--- a/manager/src/store/modules/user.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Cookies from 'js-cookie';
-import util from '@/libs/util';
-
-const user = {
-    state: {},
-    mutations: {
-        logout () {
-            util.clearDynamicRoutes();
-            Cookies.remove('userInfoManager');
-            localStorage.clear();
-        }
-    }
-};
-
-export default user;
diff --git a/manager/src/stores/app.js b/manager/src/stores/app.js
new file mode 100644
index 000000000..003912d07
--- /dev/null
+++ b/manager/src/stores/app.js
@@ -0,0 +1,146 @@
+import { defineStore } from "pinia";
+import { otherRouter } from "@/router/router";
+import i18n from "@/locale";
+
+// 原 vuex app 模块 + 根 state（openStyleStore/openStoreId/notices）合并
+// mutation 全部转为同名 action；两个例外：
+// - pageOpenedList mutation 与 state 同名，改名 updateOpenedList
+// - clearOtherTags 原接收组件实例 vm，改为直接接收当前路由名 currentName
+export const useAppStore = defineStore("app", {
+  state: () => ({
+    // 原根 state
+    openStyleStore: "",
+    openStoreId: "",
+    notices: "",
+    // 原 app 模块
+    styleStore: "", // 移动端楼层装修中选择风格存储
+    added: false, // 加载路由标识
+    navList: [], // 顶部菜单
+    currNav: "", // 当前顶部菜单name
+    currNavTitle: "", // 当前顶部菜单标题
+    cachePage: [],
+    lang: "",
+    pageOpenedList: [
+      {
+        // 打开过的页面，顶部历史菜单项
+        title: "首页",
+        path: "",
+        name: "home_index",
+      },
+    ],
+    hotWords: [], //今日热词数据
+    // 面包屑数组 左侧菜单
+    menuList: [],
+    tagsList: [...otherRouter.children], //这块是面包屑的内容不能删除
+    routers: [otherRouter],
+    messageCount: 0,
+    // 在这里定义你不想要缓存的页面的name属性值(参见路由配置router.js)
+    dontCache: ["test", "test"],
+  }),
+  actions: {
+    // 动态添加主界面路由，需要缓存
+    updateAppRouter(routes) {
+      this.routers.push(...routes);
+      // 实际 addRoute 在 util.registerDynamicRoutes 中完成
+    },
+    updateDefaultRouter(routes) {
+      // 兼容旧调用，404 由 registerDynamicRoutes 注册
+    },
+    setAdded(v) {
+      this.added = v;
+    },
+    setNavList(list) {
+      this.navList = list;
+    },
+    setCurrNav(v) {
+      this.currNav = v;
+    },
+    setCurrNavTitle(v) {
+      this.currNavTitle = v;
+    },
+    setTagsList(list) {
+      this.tagsList.push(...list);
+    },
+    updateMenulist(routes) {
+      this.menuList = routes;
+    },
+    closePage(name) {
+      this.cachePage.forEach((item, index) => {
+        if (item == name) {
+          this.cachePage.splice(index, 1);
+        }
+      });
+    },
+    initCachePage() {
+      if (localStorage.cachePage) {
+        this.cachePage = JSON.parse(localStorage.cachePage);
+      }
+    },
+    removeTag(name) {
+      this.pageOpenedList.map((item, index) => {
+        if (item.name == name) {
+          this.pageOpenedList.splice(index, 1);
+        }
+      });
+    },
+    updateOpenedList(get) {
+      let openedPage = this.pageOpenedList[get.index];
+      if (get.argu) {
+        openedPage.argu = get.argu;
+      }
+      if (get.query) {
+        openedPage.query = get.query;
+      }
+      this.pageOpenedList.splice(get.index, 1, openedPage);
+      localStorage.pageOpenedList = JSON.stringify(this.pageOpenedList);
+    },
+    clearAllTags() {
+      this.pageOpenedList.splice(1);
+      this.cachePage.length = 0;
+      localStorage.pageOpenedList = JSON.stringify(this.pageOpenedList);
+    },
+    clearOtherTags(currentName) {
+      let currentIndex = 0;
+      this.pageOpenedList.forEach((item, index) => {
+        if (item.name == currentName) {
+          currentIndex = index;
+        }
+      });
+      if (currentIndex == 0) {
+        this.pageOpenedList.splice(1);
+      } else {
+        this.pageOpenedList.splice(currentIndex + 1);
+        this.pageOpenedList.splice(1, currentIndex - 1);
+      }
+      let newCachepage = this.cachePage.filter((item) => {
+        return item == currentName;
+      });
+      this.cachePage = newCachepage;
+      localStorage.pageOpenedList = JSON.stringify(this.pageOpenedList);
+    },
+    setOpenedList() {
+      this.pageOpenedList = localStorage.pageOpenedList
+        ? JSON.parse(localStorage.pageOpenedList)
+        : [otherRouter.children[0]];
+    },
+    setAvatarPath(path) {
+      localStorage.avatorImgPath = path;
+    },
+    switchLang(lang) {
+      this.lang = lang;
+      localStorage.lang = lang;
+      i18n.global.locale = lang;
+    },
+    setMessageCount(count) {
+      this.messageCount = count;
+    },
+    increateTag(tagObj) {
+      if (this.dontCache.indexOf(tagObj.name) < 0) {
+        this.cachePage.push(tagObj.name);
+        localStorage.cachePage = JSON.stringify(this.cachePage);
+      }
+      this.pageOpenedList.push(tagObj);
+      localStorage.pageOpenedList = JSON.stringify(this.pageOpenedList);
+    },
+  },
+});
diff --git a/manager/src/stores/dict.js b/manager/src/stores/dict.js
new file mode 100644
index 000000000..c97cb8a90
--- /dev/null
+++ b/manager/src/stores/dict.js
@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+export const useDictStore = defineStore("dict", {
+  state: () => ({
+    // 经常需要读取的数据字典
+    sex: [],
+    messageType: [],
+    priority: [],
+    leaveType: [],
+  }),
+  actions: {
+    // 设置值的改变方法
+    setSex(list) {
+      this.sex = list;
+    },
+    setMessageType(list) {
+      this.messageType = list;
+    },
+    setPriority(list) {
+      this.priority = list;
+    },
+    setLeaveType(list) {
+      this.leaveType = list;
+    },
+  },
+});
diff --git a/manager/src/stores/setting.js b/manager/src/stores/setting.js
new file mode 100644
index 000000000..2c2fb3d17
--- /dev/null
+++ b/manager/src/stores/setting.js
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import config from "@/config";
+
+const { setting } = config;
+
+const localSetting = window.localStorage.getItem("admin-setting");
+
+export const useSettingStore = defineStore("setting", {
+  state: () => ({
+    setting: localSetting ? JSON.parse(localSetting) : setting,
+  }),
+  actions: {
+    updateSetting(data) {
+      this.setting = data;
+    },
+  },
+});
diff --git a/manager/src/stores/user.js b/manager/src/stores/user.js
new file mode 100644
index 000000000..e67dfcb41
--- /dev/null
+++ b/manager/src/stores/user.js
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia";
+import Cookies from "js-cookie";
+import util from "@/libs/util";
+
+export const useUserStore = defineStore("user", {
+  actions: {
+    logout() {
+      util.clearDynamicRoutes();
+      Cookies.remove("userInfoManager");
+      localStorage.clear();
+    },
+  },
+});
diff --git a/manager/src/views/Main.vue b/manager/src/views/Main.vue
index 79c1b402d..358f4948b 100644
--- a/manager/src/views/Main.vue
+++ b/manager/src/views/Main.vue
@@ -76,7 +76,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { UserFilled } from "@element-plus/icons-vue";
 import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu.vue";
 import tagsPageOpened from "./main-parts/tags-page-opened.vue";
@@ -87,123 +89,108 @@ import util from "@/libs/util.js";
 import { getNoticePage, logout } from "@/api/index";
 import config from "@/config/index.js";
 import defaultLogo from "@/assets/logo.png";
+import { setStore } from "@/libs/storage";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
+import { useSettingStore } from "@/stores/setting";
 
-export default {
-  components: {
-    UserFilled,
-    shrinkableMenu,
-    tagsPageOpened,
-    messageTip,
-    circleLoading,
-  },
-  data() {
-    return {
-      config,
-      sliceNum: 5,
-      userInfo: "",
-      tipsMessage: "",
-      defaultLogo,
-      domainLogo: "",
-    };
-  },
-  computed: {
-    setting() {
-      return this.$store.state.setting.setting;
-    },
-    loading() {
-      return this.$store.state.app.loading;
-    },
-    menuList() {
-      return this.$store.state.app.menuList || [];
-    },
-    pageTagsList() {
-      return this.$store.state.app.pageOpenedList;
-    },
-    avatarPath() {
-      return localStorage.avatorImgPath;
-    },
-  },
-  methods: {
-    init() {
-      const userInfo = JSON.parse(Cookies.get("userInfoManager"));
-      this.userInfo = userInfo;
-      this.checkTag(this.$route.name);
-      this.domainLogo = localStorage.getItem("icon") || this.defaultLogo;
-      const link =
-        document.querySelector("link[rel*='icon']") ||
-        document.createElement("link");
-      link.type = "image/x-icon";
-      link.href = localStorage.getItem("domainIcon");
-      link.rel = "shortcut icon";
-      document.getElementsByTagName("head")[0].appendChild(link);
-      window.document.title = localStorage.getItem("title") + " - 运营后台";
-      getNoticePage({}).then((res) => {
-        if (res.success) {
-          this.tipsMessage = res.result;
-          this.$store.state.notices = res.result;
-        }
-      });
-    },
-    handleClickUserDropdown(name) {
-      if (name === "personalCenter") {
-        util.openNewPage(this, "personal-center");
-        this.$router.push({ name: "personal-center" });
-      } else if (name === "changePass") {
-        util.openNewPage(this, "change-password");
-        this.$router.push({ name: "change_password" });
-      } else if (name === "loginOut") {
-        logout().then(() => {
-          this.$store.commit("logout", this);
-          this.$store.commit("setAdded", false);
-          this.setStore("accessToken", "");
-          this.setStore("refreshToken", "");
-          this.$router.push({ path: "/login" });
-        });
-      }
-    },
-    checkTag(name) {
-      const openpageHasTag = util.findOpenedPageIndex(
-        this.pageTagsList,
-        name,
-        this.$route.path
-      ) >= 0;
-      if (!openpageHasTag) {
-        util.openNewPage(
-          this,
-          name,
-          this.$route.params || {},
-          this.$route.query || {}
-        );
-      }
-    },
-    resize() {
-      const currWidth = document.body.clientWidth;
-      const count = currWidth / 300;
-      this.sliceNum = count > 6 ? 6 : count;
-    },
-    onLogoError(e) {
-      if (e?.target && e.target.src !== this.defaultLogo) {
-        e.target.src = this.defaultLogo;
-      }
-    },
-  },
-  watch: {
-    $route(to) {
-      this.checkTag(to.name);
-      localStorage.currentPageName = to.name;
-    },
-  },
-  mounted() {
-    this.init();
-    this.resize();
-    window.addEventListener("resize", this.resize);
-    this.$store.commit("setOpenedList");
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.resize);
-  },
-  created() {
-    this.$store.commit("setOpenedList");
-  },
-};
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingStore = useSettingStore();
+
+const sliceNum = ref(5);
+const userInfo = ref("");
+const tipsMessage = ref("");
+const domainLogo = ref("");
+
+const setting = computed(() => settingStore.setting);
+const loading = computed(() => appStore.loading);
+const menuList = computed(() => appStore.menuList || []);
+const pageTagsList = computed(() => appStore.pageOpenedList);
+const avatarPath = computed(() => localStorage.avatorImgPath);
+
+function init() {
+  const userInfoData = JSON.parse(Cookies.get("userInfoManager"));
+  userInfo.value = userInfoData;
+  checkTag(route.name);
+  domainLogo.value = localStorage.getItem("icon") || defaultLogo;
+  const link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.type = "image/x-icon";
+  link.href = localStorage.getItem("domainIcon");
+  link.rel = "shortcut icon";
+  document.getElementsByTagName("head")[0].appendChild(link);
+  window.document.title = localStorage.getItem("title") + " - 运营后台";
+  getNoticePage({}).then((res) => {
+    if (res.success) {
+      tipsMessage.value = res.result;
+      appStore.notices = res.result;
+    }
+  });
+}
+
+function handleClickUserDropdown(name) {
+  if (name === "personalCenter") {
+    util.openNewPage("personal-center");
+    router.push({ name: "personal-center" });
+  } else if (name === "changePass") {
+    util.openNewPage("change-password");
+    router.push({ name: "change_password" });
+  } else if (name === "loginOut") {
+    logout().then(() => {
+      userStore.logout();
+      appStore.setAdded(false);
+      setStore("accessToken", "");
+      setStore("refreshToken", "");
+      router.push({ path: "/login" });
+    });
+  }
+}
+
+function checkTag(name) {
+  const openpageHasTag = util.findOpenedPageIndex(
+    pageTagsList.value,
+    name,
+    route.path
+  ) >= 0;
+  if (!openpageHasTag) {
+    util.openNewPage(name, route.params || {}, route.query || {});
+  }
+}
+
+function resize() {
+  const currWidth = document.body.clientWidth;
+  const count = currWidth / 300;
+  sliceNum.value = count > 6 ? 6 : count;
+}
+
+function onLogoError(e) {
+  if (e?.target && e.target.src !== defaultLogo) {
+    e.target.src = defaultLogo;
+  }
+}
+
+watch(
+  () => route.name,
+  (name) => {
+    checkTag(name);
+    localStorage.currentPageName = name;
+  }
+);
+
+appStore.setOpenedList();
+
+onMounted(() => {
+  init();
+  resize();
+  window.addEventListener("resize", resize);
+  appStore.setOpenedList();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", resize);
+});
 </script>
diff --git a/manager/src/views/appointment/orderSettings.vue b/manager/src/views/appointment/orderSettings.vue
index 655c3f57a..9f36ac3f6 100644
--- a/manager/src/views/appointment/orderSettings.vue
+++ b/manager/src/views/appointment/orderSettings.vue
@@ -19,52 +19,48 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getAppointmentOrderSettings, saveAppointmentOrderSettings } from "@/api/appointment";
 import { ElMessage } from "element-plus";
 
-export default {
-  name: "appointmentOrderSettings",
-  data() {
-    return {
-      loading: false,
-      saving: false,
-      form: {
-        serviceStartRemindMemberHours: 2,
-        inStoreNoShowAutoCompleteHours: 24,
-      },
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      getAppointmentOrderSettings()
-        .then((res) => {
-          if (res.success && res.result) {
-            this.form = { ...this.form, ...res.result };
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSave() {
-      this.saving = true;
-      saveAppointmentOrderSettings(this.form)
-        .then((res) => {
-          if (res.success) {
-            ElMessage.success("保存成功");
-          }
-        })
-        .finally(() => {
-          this.saving = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "appointmentOrderSettings" });
+
+const loading = ref(false);
+const saving = ref(false);
+const form = ref({
+  serviceStartRemindMemberHours: 2,
+  inStoreNoShowAutoCompleteHours: 24,
+});
+
+onMounted(() => {
+  loadData();
+});
+
+function loadData() {
+  loading.value = true;
+  getAppointmentOrderSettings()
+    .then((res) => {
+      if (res.success && res.result) {
+        form.value = { ...form.value, ...res.result };
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSave() {
+  saving.value = true;
+  saveAppointmentOrderSettings(form.value)
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("保存成功");
+      }
+    })
+    .finally(() => {
+      saving.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/appointment/workOrderList.vue b/manager/src/views/appointment/workOrderList.vue
index 36e04fcaa..eb4fe6a52 100644
--- a/manager/src/views/appointment/workOrderList.vue
+++ b/manager/src/views/appointment/workOrderList.vue
@@ -43,9 +43,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getManagerWorkOrderPage } from "@/api/appointment";
 
+defineOptions({ name: "managerAppointmentWorkOrders" });
+
+const route = useRoute();
+
 const STATUS_OPTIONS = [
   { label: "未完成", value: "OPEN" },
   { label: "待领取", value: "PENDING_CLAIM" },
@@ -57,52 +63,45 @@ const STATUS_OPTIONS = [
   { label: "逾期未到店", value: "NO_SHOW" },
 ];
 
-export default {
-  name: "managerAppointmentWorkOrders",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      statusOptions: STATUS_OPTIONS,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        orderSn: "",
-        workOrderSn: "",
-        serviceStatus: "",
-      },
-    };
-  },
-  mounted() {
-    const status = this.$route.query.serviceStatus;
-    if (status) {
-      this.searchForm.serviceStatus = status;
-    }
-    this.getData();
-  },
-  methods: {
-    statusText(value) {
-      const found = STATUS_OPTIONS.find((item) => item.value === value);
-      return found ? found.label : value || "—";
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      getManagerWorkOrderPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result?.records || [];
-            this.total = res.result?.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const statusOptions = ref(STATUS_OPTIONS);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  orderSn: "",
+  workOrderSn: "",
+  serviceStatus: "",
+});
+
+onMounted(() => {
+  const status = route.query.serviceStatus;
+  if (status) {
+    searchForm.value.serviceStatus = status;
+  }
+  getData();
+});
+
+function statusText(value) {
+  const found = STATUS_OPTIONS.find((item) => item.value === value);
+  return found ? found.label : value || "—";
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getData();
+}
+function getData() {
+  loading.value = true;
+  getManagerWorkOrderPage(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result?.records || [];
+        total.value = res.result?.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
diff --git a/manager/src/views/change-password/change-password.vue b/manager/src/views/change-password/change-password.vue
index d6c4f8aa8..f5a3c9178 100644
--- a/manager/src/views/change-password/change-password.vue
+++ b/manager/src/views/change-password/change-password.vue
@@ -3,7 +3,7 @@
     <el-card class="change-pass">
       <template #header>修改密码</template>
       <el-form
-        ref="editPasswordForm"
+        ref="editPasswordFormRef"
         :model="editPasswordForm"
         label-width="100px"
         label-position="right"
@@ -39,80 +39,83 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import SetPassword from "@/components/lili/set-password";
 import { changePass } from "@/api/index";
 import { ElMessageBox } from "element-plus";
+import { md5 } from "@/utils/md5.js";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
 
-export default {
-  name: "change-password",
-  components: {
-    SetPassword,
-  },
-  data() {
-    const valideRePassword = (rule, value, callback) => {
-      if (value !== this.editPasswordForm.newPassword) {
-        callback(new Error("两次输入密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      savePassLoading: false,
-      editPasswordForm: {
-        oldPassword: "",
-        newPassword: "",
-        rePassword: "",
-      },
-      strength: "",
-      passwordValidate: {
-        oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-        newPassword: [
-          { required: true, message: "请输入新密码", trigger: "blur" },
-          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
-          { max: 32, message: "最多输入32个字符", trigger: "blur" },
-        ],
-        rePassword: [
-          { required: true, message: "请再次输入新密码", trigger: "blur" },
-          { validator: valideRePassword, trigger: "blur" },
-        ],
-      },
-    };
-  },
-  methods: {
-    changeInputPass(v, grade, strength) {
-      this.strength = strength;
-    },
-    saveEditPass() {
-      const params = {
-        password: this.md5(this.editPasswordForm.oldPassword),
-        newPassword: this.md5(this.editPasswordForm.newPassword),
-        passStrength: this.md5(this.strength),
-      };
-      this.$refs.editPasswordForm.validate((valid) => {
-        if (!valid) return;
-        this.savePassLoading = true;
-        changePass(params).then((res) => {
-          this.savePassLoading = false;
-          if (res.success) {
-            ElMessageBox.alert("修改密码成功，需重新登录", "修改密码成功", {
-              confirmButtonText: "确定",
-              callback: () => {
-                this.$store.commit("logout", this);
-                this.$router.push({ name: "login" });
-              },
-            });
-          }
-        });
-      });
-    },
-    cancelEditPass() {
-      this.$store.commit("removeTag", "change_password");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      const list = this.$store.state.app.pageOpenedList;
-      const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
-      this.$router.push({ name: lastPageName });
-    },
-  },
+defineOptions({ name: "change-password" });
+
+const router = useRouter();
+const appStore = useAppStore();
+const userStore = useUserStore();
+
+const editPasswordFormRef = ref(null);
+const savePassLoading = ref(false);
+const editPasswordForm = reactive({
+  oldPassword: "",
+  newPassword: "",
+  rePassword: "",
+});
+const strength = ref("");
+const valideRePassword = (rule, value, callback) => {
+  if (value !== editPasswordForm.newPassword) {
+    callback(new Error("两次输入密码不一致"));
+  } else {
+    callback();
+  }
 };
+const passwordValidate = {
+  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+  newPassword: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 6, message: "请至少输入6个字符", trigger: "blur" },
+    { max: 32, message: "最多输入32个字符", trigger: "blur" },
+  ],
+  rePassword: [
+    { required: true, message: "请再次输入新密码", trigger: "blur" },
+    { validator: valideRePassword, trigger: "blur" },
+  ],
+};
+
+function changeInputPass(v, grade, strengthVal) {
+  strength.value = strengthVal;
+}
+
+function saveEditPass() {
+  const params = {
+    password: md5(editPasswordForm.oldPassword),
+    newPassword: md5(editPasswordForm.newPassword),
+    passStrength: md5(strength.value),
+  };
+  editPasswordFormRef.value.validate((valid) => {
+    if (!valid) return;
+    savePassLoading.value = true;
+    changePass(params).then((res) => {
+      savePassLoading.value = false;
+      if (res.success) {
+        ElMessageBox.alert("修改密码成功，需重新登录", "修改密码成功", {
+          confirmButtonText: "确定",
+          callback: () => {
+            userStore.logout();
+            router.push({ name: "login" });
+          },
+        });
+      }
+    });
+  });
+}
+
+function cancelEditPass() {
+  appStore.removeTag("change_password");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  const list = appStore.pageOpenedList;
+  const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
+  router.push({ name: lastPageName });
+}
 </script>
diff --git a/manager/src/views/custom-words/index.vue b/manager/src/views/custom-words/index.vue
index 04f7aa0b9..b0133bafe 100644
--- a/manager/src/views/custom-words/index.vue
+++ b/manager/src/views/custom-words/index.vue
@@ -51,7 +51,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="自定义分词" prop="name">
           <el-input v-model="form.name" clearable style="width: 100%" />
         </el-form-item>
@@ -64,7 +64,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import {
   getCustomWordsPage,
   delCustom,
@@ -72,160 +73,161 @@ import {
   updateCustomWords,
 } from "@/api/index";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "custom-words",
-  data() {
-    return {
-      loading: true,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        words: "",
-      },
-      form: {
-        name: "",
-      },
-      formValidate: {
-        name: [regular.REQUIRED, regular.VARCHAR20],
-      },
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    getDataList() {
-      this.loading = true;
-      getCustomWordsPage(this.searchForm)
-        .then((res) => {
+defineOptions({ name: "custom-words" });
+
+const table = ref(null);
+const formRef = ref(null);
+
+const loading = ref(true);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  words: "",
+});
+const form = ref({
+  name: "",
+});
+const formValidate = reactive({
+  name: [regular.REQUIRED, regular.VARCHAR20],
+});
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+// 未在 data 声明、detail() 中直接挂到 this 上的字段
+let id;
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function getDataList() {
+  loading.value = true;
+  getCustomWordsPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalType.value == 0) {
+        delete form.value.id;
+        insertCustomWords(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
-        })
-        .finally(() => {
-          this.loading = false;
         });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType == 0) {
-            delete this.form.id;
-            insertCustomWords(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            this.form.id = this.id;
-            updateCustomWords(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
+      } else {
+        form.value.id = id;
+        updateCustomWords(form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
+        });
+      }
+    }
+  });
+}
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加";
+  form.value = {};
+  formRef.value?.resetFields();
+  modalVisible.value = true;
+}
+function detail(v) {
+  modalType.value = 1;
+  id = v.id;
+  modalTitle.value = "修改";
+  modalVisible.value = true;
+  form.value.name = v.name;
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      delCustom(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加";
-      this.form = {};
-      this.$refs.form?.resetFields();
-      this.modalVisible = true;
-    },
-    detail(v) {
-      this.modalType = 1;
-      this.id = v.id;
-      this.modalTitle = "修改";
-      this.modalVisible = true;
-      this.form.name = v.name;
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          delCustom(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      delCustom(ids).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          delCustom(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/distribution/distribution.vue b/manager/src/views/distribution/distribution.vue
index b343b52f6..ce6098708 100644
--- a/manager/src/views/distribution/distribution.vue
+++ b/manager/src/views/distribution/distribution.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="100px"
@@ -420,7 +420,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   auditDistribution,
   batchUpdateDistributionGrade,
@@ -436,469 +438,478 @@ import {
   updateDistributionMember,
 } from "@/api/distribution";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+
+defineOptions({ name: "distribution" });
 
 const MOBILE_PATTERN = /^1[3-9]\d{9}$/;
 
-export default {
-  name: "distribution",
-  data() {
-    return {
-      loading: true,
-      currentDistributionStatus: "ALL",
-      joinTimeRange: [],
-      gradeOptions: [],
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        id: "",
-        mobile: "",
-        inviterMobile: "",
-        gradeId: "",
-        nickname: "",
-      },
-      data: [],
-      total: 0,
-      detailVisible: false,
-      detailLoading: false,
-      detail: null,
-      editVisible: false,
-      editLoading: false,
-      editForm: {
-        id: "",
-        mobile: "",
-        nickname: "",
-        inviterMobile: "",
-        gradeId: "",
-      },
-      editRules: {
-        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
-        gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
-      },
-      createVisible: false,
-      createLoading: false,
-      createForm: {
-        nickname: "",
-        mobile: "",
-        inviterMobile: "",
-        gradeId: "",
-      },
-      createRules: {
-        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
-        mobile: [
-          { required: true, message: "请输入手机号", trigger: "blur" },
-          { pattern: MOBILE_PATTERN, message: "手机号格式有误", trigger: "blur" },
-        ],
-        gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
-      },
-      selectedRows: [],
-      batchGradeVisible: false,
-      batchGradeLoading: false,
-      exportLoading: false,
-      templateLoading: false,
-      importVisible: false,
-      importLoading: false,
-      importFile: null,
-      importFileName: "",
-      batchGradeForm: {
-        gradeId: "",
-      },
-      batchGradeRules: {
-        gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
-      },
-    };
-  },
-  mounted() {
-    this.loadGradeOptions();
-    this.applyRouteQuery();
-    this.getDataList();
-  },
-  watch: {
-    $route() {
-      this.applyRouteQuery();
-      this.getDataList();
+const route = useRoute();
+const router = useRouter();
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+const editFormRef = ref(null);
+const createFormRef = ref(null);
+const batchGradeFormRef = ref(null);
+
+const loading = ref(true);
+const currentDistributionStatus = ref("ALL");
+const joinTimeRange = ref([]);
+const gradeOptions = ref([]);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  id: "",
+  mobile: "",
+  inviterMobile: "",
+  gradeId: "",
+  nickname: "",
+});
+const data = ref([]);
+const total = ref(0);
+const detailVisible = ref(false);
+const detailLoading = ref(false);
+const detail = ref(null);
+const editVisible = ref(false);
+const editLoading = ref(false);
+const editForm = ref({
+  id: "",
+  mobile: "",
+  nickname: "",
+  inviterMobile: "",
+  gradeId: "",
+});
+const editRules = {
+  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+  gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
+};
+const createVisible = ref(false);
+const createLoading = ref(false);
+const createForm = ref({
+  nickname: "",
+  mobile: "",
+  inviterMobile: "",
+  gradeId: "",
+});
+const createRules = {
+  nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+  mobile: [
+    { required: true, message: "请输入手机号", trigger: "blur" },
+    { pattern: MOBILE_PATTERN, message: "手机号格式有误", trigger: "blur" },
+  ],
+  gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
+};
+const selectedRows = ref([]);
+const batchGradeVisible = ref(false);
+const batchGradeLoading = ref(false);
+const exportLoading = ref(false);
+const templateLoading = ref(false);
+const importVisible = ref(false);
+const importLoading = ref(false);
+const importFile = ref(null);
+const importFileName = ref("");
+const batchGradeForm = reactive({
+  gradeId: "",
+});
+const batchGradeRules = {
+  gradeId: [{ required: true, message: "请选择分销等级", trigger: "change" }],
+};
+
+watch(
+  () => route.query,
+  () => {
+    applyRouteQuery();
+    getDataList();
+  }
+);
+
+function applyRouteQuery() {
+  const query = route.query || {};
+  searchForm.inviterMobile = query.inviterMobile ? String(query.inviterMobile) : "";
+}
+function openCustomerRelationPage() {
+  if (!detail.value) return;
+  const resolved = router.resolve({
+    path: "/distributionCustomerRelation",
+    query: {
+      distributionId: detail.value.id,
+      distributionMobile: detail.value.mobile || "",
     },
-  },
-  methods: {
-    applyRouteQuery() {
-      const query = this.$route.query || {};
-      this.searchForm.inviterMobile = query.inviterMobile ? String(query.inviterMobile) : "";
+  });
+  window.open(resolved.href, "_blank");
+}
+function openInviteeDistributionPage() {
+  if (!detail.value) return;
+  const resolved = router.resolve({
+    path: "/distribution",
+    query: {
+      inviterMobile: detail.value.mobile || "",
     },
-    openCustomerRelationPage() {
-      if (!this.detail) return;
-      const route = this.$router.resolve({
-        path: "/distributionCustomerRelation",
-        query: {
-          distributionId: this.detail.id,
-          distributionMobile: this.detail.mobile || "",
-        },
-      });
-      window.open(route.href, "_blank");
-    },
-    openInviteeDistributionPage() {
-      if (!this.detail) return;
-      const route = this.$router.resolve({
-        path: "/distribution",
-        query: {
-          inviterMobile: this.detail.mobile || "",
-        },
-      });
-      window.open(route.href, "_blank");
-    },
-    loadGradeOptions() {
-      getDistributionGrades().then((res) => {
+  });
+  window.open(resolved.href, "_blank");
+}
+function loadGradeOptions() {
+  getDistributionGrades().then((res) => {
+    if (res.success) {
+      gradeOptions.value = (res.result || []).slice().sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+    }
+  });
+}
+function statusLabel(status) {
+  const map = {
+    PASS: "审核通过",
+    APPLY: "待审核",
+    RETREAT: "已清退",
+    REFUSE: "审核拒绝",
+  };
+  return map[status] || status || "-";
+}
+function formatMoney(value) {
+  const num = Number(value);
+  if (Number.isNaN(num)) return "0.00";
+  return num.toFixed(2);
+}
+function onStatusTabChange() {
+  searchForm.pageNumber = 1;
+  clearSelectAll();
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  clearSelectAll();
+  getDataList();
+}
+function changeSelect(selection) {
+  selectedRows.value = selection || [];
+}
+function clearSelectAll() {
+  selectedRows.value = [];
+  table.value?.clearSelection();
+}
+function openBatchGrade() {
+  if (!selectedRows.value.length) {
+    Message.warning("请先选择分销员");
+    return;
+  }
+  batchGradeForm.gradeId = "";
+  batchGradeVisible.value = true;
+}
+function resetBatchGradeForm() {
+  batchGradeLoading.value = false;
+  batchGradeForm.gradeId = "";
+  batchGradeFormRef.value?.clearValidate();
+}
+function submitBatchGrade() {
+  batchGradeFormRef.value.validate((valid) => {
+    if (!valid) return;
+    batchGradeLoading.value = true;
+    batchUpdateDistributionGrade({
+      ids: selectedRows.value.map((item) => item.id),
+      gradeId: batchGradeForm.gradeId,
+    })
+      .then((res) => {
+        batchGradeLoading.value = false;
         if (res.success) {
-          this.gradeOptions = (res.result || []).slice().sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+          Message.success("设置成功");
+          batchGradeVisible.value = false;
+          clearSelectAll();
+          getDataList();
+        }
+      })
+      .catch(() => {
+        batchGradeLoading.value = false;
+      });
+  });
+}
+function handleExport() {
+  exportLoading.value = true;
+  const params = buildParams();
+  delete params.pageNumber;
+  delete params.pageSize;
+  exportDistributionMembers(params)
+    .then((blob) => {
+      if (blob && blob.type && blob.type.includes("application/json")) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          try {
+            const result = JSON.parse(reader.result);
+            Message.error(result.message || "导出失败");
+          } catch (e) {
+            Message.error("导出失败");
+          }
+        };
+        reader.readAsText(blob);
+        return;
+      }
+      downloadBlob(blob, `分销员列表_${Date.now()}.xlsx`);
+      Message.success("导出成功");
+    })
+    .catch(() => {
+      Message.error("导出失败");
+    })
+    .finally(() => {
+      exportLoading.value = false;
+    });
+}
+function downloadImportTemplate() {
+  templateLoading.value = true;
+  downloadDistributionImportTemplate()
+    .then((blob) => {
+      downloadBlob(blob, "分销员批量导入模板.xlsx");
+      Message.success("模板已下载");
+    })
+    .catch(() => {
+      Message.error("模板下载失败");
+    })
+    .finally(() => {
+      templateLoading.value = false;
+    });
+}
+function openImportDialog() {
+  importVisible.value = true;
+}
+function resetImportDialog() {
+  importLoading.value = false;
+  importFile.value = null;
+  importFileName.value = "";
+}
+function onImportBeforeUpload(file) {
+  importFile.value = file;
+  importFileName.value = file.name;
+  return false;
+}
+function submitImport() {
+  if (!importFile.value) {
+    Message.warning("请先选择文件");
+    return;
+  }
+  const fd = new FormData();
+  fd.append("file", importFile.value);
+  importLoading.value = true;
+  importDistributionMembers(fd)
+    .then((res) => {
+      importLoading.value = false;
+      if (res.success) {
+        const result = res.result || {};
+        Message.success(
+          `导入完成：成功 ${result.successCount || 0} 条，失败 ${result.failCount || 0} 条`
+        );
+        importVisible.value = false;
+        getDataList();
+      }
+    })
+    .catch(() => {
+      importLoading.value = false;
+    });
+}
+function goImportRecord() {
+  router.push({
+    path: "/distributionImportRecord",
+  });
+}
+function buildParams() {
+  const params = {
+    pageNumber: searchForm.pageNumber,
+    pageSize: searchForm.pageSize,
+  };
+  if (currentDistributionStatus.value && currentDistributionStatus.value !== "ALL") {
+    params.distributionStatus = currentDistributionStatus.value;
+  }
+  if (searchForm.id) params.id = searchForm.id.trim();
+  if (searchForm.mobile) params.mobile = searchForm.mobile;
+  if (searchForm.inviterMobile) params.inviterMobile = searchForm.inviterMobile;
+  if (searchForm.gradeId) params.gradeId = searchForm.gradeId;
+  if (searchForm.nickname) params.nickname = searchForm.nickname;
+  if (joinTimeRange.value && joinTimeRange.value[0] && joinTimeRange.value[1]) {
+    const startTime = new Date(joinTimeRange.value[0]).getTime();
+    const endTime = new Date(joinTimeRange.value[1]).getTime();
+    params.joinTimeStart = unixToDate(startTime / 1000);
+    params.joinTimeEnd = unixToDate(endTime / 1000);
+  }
+  return params;
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionMemberPage(buildParams())
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function openDetail(row) {
+  detailVisible.value = true;
+  detailLoading.value = true;
+  detail.value = null;
+  getDistributionMemberDetail(row.id)
+    .then((res) => {
+      detailLoading.value = false;
+      if (res.success) {
+        detail.value = res.result;
+      }
+    })
+    .catch(() => {
+      detailLoading.value = false;
+    });
+}
+function openCreate() {
+  createForm.value = {
+    nickname: "",
+    mobile: "",
+    inviterMobile: "",
+    gradeId: "",
+  };
+  createVisible.value = true;
+}
+function resetCreateForm() {
+  createLoading.value = false;
+  createForm.value = {
+    nickname: "",
+    mobile: "",
+    inviterMobile: "",
+    gradeId: "",
+  };
+  createFormRef.value?.clearValidate();
+}
+function submitCreate() {
+  createFormRef.value.validate((valid) => {
+    if (!valid) return;
+    createLoading.value = true;
+    createDistributionMember({
+      nickname: createForm.value.nickname,
+      mobile: createForm.value.mobile,
+      inviterMobile: createForm.value.inviterMobile || "",
+      gradeId: createForm.value.gradeId,
+    })
+      .then((res) => {
+        createLoading.value = false;
+        if (res.success) {
+          Message.success("新增成功");
+          createVisible.value = false;
+          getDataList();
+        }
+      })
+      .catch(() => {
+        createLoading.value = false;
+      });
+  });
+}
+function openEdit(row) {
+  editForm.value = {
+    id: row.id,
+    mobile: row.mobile || "",
+    nickname: row.nickname || "",
+    inviterMobile: row.inviterMobile || "",
+    gradeId: resolveGradeOptionId(row.gradeId),
+  };
+  editVisible.value = true;
+}
+function resolveGradeOptionId(gradeRef) {
+  if (!gradeRef || !gradeOptions.value.length) return gradeRef || "";
+  const direct = gradeOptions.value.find((item) => item.id === gradeRef);
+  if (direct) return direct.id;
+  const bySort = gradeOptions.value.find((item) => String(item.sortOrder) === String(gradeRef));
+  return bySort ? bySort.id : gradeRef;
+}
+function resetEditForm() {
+  editLoading.value = false;
+  editForm.value = {
+    id: "",
+    mobile: "",
+    nickname: "",
+    inviterMobile: "",
+    gradeId: "",
+  };
+  editFormRef.value?.clearValidate();
+}
+function submitEdit() {
+  editFormRef.value.validate((valid) => {
+    if (!valid) return;
+    editLoading.value = true;
+    updateDistributionMember(editForm.value.id, {
+      nickname: editForm.value.nickname,
+      inviterMobile: editForm.value.inviterMobile || "",
+      gradeId: editForm.value.gradeId,
+    })
+      .then((res) => {
+        editLoading.value = false;
+        if (res.success) {
+          Message.success("保存成功");
+          editVisible.value = false;
+          getDataList();
+        }
+      })
+      .catch(() => {
+        editLoading.value = false;
+      });
+  });
+}
+function audit(row, status) {
+  const text = status === "PASS" ? "通过" : "拒绝";
+  Modal.confirm({
+    title: "审核确认",
+    content: `确认${text}该分销员申请？`,
+    loading: true,
+    onOk: () => {
+      auditDistribution(row.id, { status }).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    statusLabel(status) {
-      const map = {
-        PASS: "审核通过",
-        APPLY: "待审核",
-        RETREAT: "已清退",
-        REFUSE: "审核拒绝",
-      };
-      return map[status] || status || "-";
-    },
-    formatMoney(value) {
-      const num = Number(value);
-      if (Number.isNaN(num)) return "0.00";
-      return num.toFixed(2);
-    },
-    onStatusTabChange() {
-      this.searchForm.pageNumber = 1;
-      this.clearSelectAll();
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.clearSelectAll();
-      this.getDataList();
-    },
-    changeSelect(selection) {
-      this.selectedRows = selection || [];
-    },
-    clearSelectAll() {
-      this.selectedRows = [];
-      this.$refs.table?.clearSelection();
-    },
-    openBatchGrade() {
-      if (!this.selectedRows.length) {
-        this.$Message.warning("请先选择分销员");
-        return;
-      }
-      this.batchGradeForm.gradeId = "";
-      this.batchGradeVisible = true;
-    },
-    resetBatchGradeForm() {
-      this.batchGradeLoading = false;
-      this.batchGradeForm.gradeId = "";
-      this.$refs.batchGradeFormRef?.clearValidate();
-    },
-    submitBatchGrade() {
-      this.$refs.batchGradeFormRef.validate((valid) => {
-        if (!valid) return;
-        this.batchGradeLoading = true;
-        batchUpdateDistributionGrade({
-          ids: this.selectedRows.map((item) => item.id),
-          gradeId: this.batchGradeForm.gradeId,
-        })
-          .then((res) => {
-            this.batchGradeLoading = false;
-            if (res.success) {
-              this.$Message.success("设置成功");
-              this.batchGradeVisible = false;
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          })
-          .catch(() => {
-            this.batchGradeLoading = false;
-          });
+  });
+}
+function retreat(row) {
+  Modal.confirm({
+    title: "清退确认",
+    content: "确认清退该分销员？清退后将停止后续计佣。",
+    onOk: () => {
+      retreatDistribution(row.id).then((res) => {
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-    handleExport() {
-      this.exportLoading = true;
-      const params = this.buildParams();
-      delete params.pageNumber;
-      delete params.pageSize;
-      exportDistributionMembers(params)
-        .then((blob) => {
-          if (blob && blob.type && blob.type.includes("application/json")) {
-            const reader = new FileReader();
-            reader.onload = () => {
-              try {
-                const result = JSON.parse(reader.result);
-                this.$Message.error(result.message || "导出失败");
-              } catch (e) {
-                this.$Message.error("导出失败");
-              }
-            };
-            reader.readAsText(blob);
-            return;
-          }
-          downloadBlob(blob, `分销员列表_${Date.now()}.xlsx`);
-          this.$Message.success("导出成功");
-        })
-        .catch(() => {
-          this.$Message.error("导出失败");
-        })
-        .finally(() => {
-          this.exportLoading = false;
-        });
-    },
-    downloadImportTemplate() {
-      this.templateLoading = true;
-      downloadDistributionImportTemplate()
-        .then((blob) => {
-          downloadBlob(blob, "分销员批量导入模板.xlsx");
-          this.$Message.success("模板已下载");
-        })
-        .catch(() => {
-          this.$Message.error("模板下载失败");
-        })
-        .finally(() => {
-          this.templateLoading = false;
-        });
-    },
-    openImportDialog() {
-      this.importVisible = true;
-    },
-    resetImportDialog() {
-      this.importLoading = false;
-      this.importFile = null;
-      this.importFileName = "";
-    },
-    onImportBeforeUpload(file) {
-      this.importFile = file;
-      this.importFileName = file.name;
-      return false;
-    },
-    submitImport() {
-      if (!this.importFile) {
-        this.$Message.warning("请先选择文件");
-        return;
-      }
-      const fd = new FormData();
-      fd.append("file", this.importFile);
-      this.importLoading = true;
-      importDistributionMembers(fd)
-        .then((res) => {
-          this.importLoading = false;
-          if (res.success) {
-            const result = res.result || {};
-            this.$Message.success(
-              `导入完成：成功 ${result.successCount || 0} 条，失败 ${result.failCount || 0} 条`
-            );
-            this.importVisible = false;
-            this.getDataList();
-          }
-        })
-        .catch(() => {
-          this.importLoading = false;
-        });
-    },
-    goImportRecord() {
-      this.$router.push({
-        path: "/distributionImportRecord",
+  });
+}
+function resume(row) {
+  Modal.confirm({
+    title: "恢复确认",
+    content: "确认恢复该分销员？",
+    onOk: () => {
+      resumeDistribution(row.id).then((res) => {
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-    buildParams() {
-      const params = {
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-      };
-      if (this.currentDistributionStatus && this.currentDistributionStatus !== "ALL") {
-        params.distributionStatus = this.currentDistributionStatus;
-      }
-      if (this.searchForm.id) params.id = this.searchForm.id.trim();
-      if (this.searchForm.mobile) params.mobile = this.searchForm.mobile;
-      if (this.searchForm.inviterMobile) params.inviterMobile = this.searchForm.inviterMobile;
-      if (this.searchForm.gradeId) params.gradeId = this.searchForm.gradeId;
-      if (this.searchForm.nickname) params.nickname = this.searchForm.nickname;
-      if (this.joinTimeRange && this.joinTimeRange[0] && this.joinTimeRange[1]) {
-        const startTime = new Date(this.joinTimeRange[0]).getTime();
-        const endTime = new Date(this.joinTimeRange[1]).getTime();
-        params.joinTimeStart = this.$filters.unixToDate(startTime / 1000);
-        params.joinTimeEnd = this.$filters.unixToDate(endTime / 1000);
-      }
-      return params;
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionMemberPage(this.buildParams())
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    openDetail(row) {
-      this.detailVisible = true;
-      this.detailLoading = true;
-      this.detail = null;
-      getDistributionMemberDetail(row.id)
-        .then((res) => {
-          this.detailLoading = false;
-          if (res.success) {
-            this.detail = res.result;
-          }
-        })
-        .catch(() => {
-          this.detailLoading = false;
-        });
-    },
-    openCreate() {
-      this.createForm = {
-        nickname: "",
-        mobile: "",
-        inviterMobile: "",
-        gradeId: "",
-      };
-      this.createVisible = true;
-    },
-    resetCreateForm() {
-      this.createLoading = false;
-      this.createForm = {
-        nickname: "",
-        mobile: "",
-        inviterMobile: "",
-        gradeId: "",
-      };
-      this.$refs.createFormRef?.clearValidate();
-    },
-    submitCreate() {
-      this.$refs.createFormRef.validate((valid) => {
-        if (!valid) return;
-        this.createLoading = true;
-        createDistributionMember({
-          nickname: this.createForm.nickname,
-          mobile: this.createForm.mobile,
-          inviterMobile: this.createForm.inviterMobile || "",
-          gradeId: this.createForm.gradeId,
-        })
-          .then((res) => {
-            this.createLoading = false;
-            if (res.success) {
-              this.$Message.success("新增成功");
-              this.createVisible = false;
-              this.getDataList();
-            }
-          })
-          .catch(() => {
-            this.createLoading = false;
-          });
-      });
-    },
-    openEdit(row) {
-      this.editForm = {
-        id: row.id,
-        mobile: row.mobile || "",
-        nickname: row.nickname || "",
-        inviterMobile: row.inviterMobile || "",
-        gradeId: this.resolveGradeOptionId(row.gradeId),
-      };
-      this.editVisible = true;
-    },
-    resolveGradeOptionId(gradeRef) {
-      if (!gradeRef || !this.gradeOptions.length) return gradeRef || "";
-      const direct = this.gradeOptions.find((item) => item.id === gradeRef);
-      if (direct) return direct.id;
-      const bySort = this.gradeOptions.find((item) => String(item.sortOrder) === String(gradeRef));
-      return bySort ? bySort.id : gradeRef;
-    },
-    resetEditForm() {
-      this.editLoading = false;
-      this.editForm = {
-        id: "",
-        mobile: "",
-        nickname: "",
-        inviterMobile: "",
-        gradeId: "",
-      };
-      this.$refs.editFormRef?.clearValidate();
-    },
-    submitEdit() {
-      this.$refs.editFormRef.validate((valid) => {
-        if (!valid) return;
-        this.editLoading = true;
-        updateDistributionMember(this.editForm.id, {
-          nickname: this.editForm.nickname,
-          inviterMobile: this.editForm.inviterMobile || "",
-          gradeId: this.editForm.gradeId,
-        })
-          .then((res) => {
-            this.editLoading = false;
-            if (res.success) {
-              this.$Message.success("保存成功");
-              this.editVisible = false;
-              this.getDataList();
-            }
-          })
-          .catch(() => {
-            this.editLoading = false;
-          });
-      });
-    },
-    audit(row, status) {
-      const text = status === "PASS" ? "通过" : "拒绝";
-      this.$Modal.confirm({
-        title: "审核确认",
-        content: `确认${text}该分销员申请？`,
-        loading: true,
-        onOk: () => {
-          auditDistribution(row.id, { status }).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    retreat(row) {
-      this.$Modal.confirm({
-        title: "清退确认",
-        content: "确认清退该分销员？清退后将停止后续计佣。",
-        onOk: () => {
-          retreatDistribution(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    resume(row) {
-      this.$Modal.confirm({
-        title: "恢复确认",
-        content: "确认恢复该分销员？",
-        onOk: () => {
-          resumeDistribution(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-};
+  });
+}
+
+onMounted(() => {
+  loadGradeOptions();
+  applyRouteQuery();
+  getDataList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/distribution/distributionCash.vue b/manager/src/views/distribution/distributionCash.vue
index a0228fcca..ee1897a1f 100644
--- a/manager/src/views/distribution/distributionCash.vue
+++ b/manager/src/views/distribution/distributionCash.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         class="search-form"
         @keyup.enter="handleSearch"
@@ -173,144 +173,147 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "distributionCash",
-  data() {
-    return {
-      tabStatus: "",
-      applyCount: 0,
-      loading: true,
-      drawerVisible: false,
-      drawerTitle: "",
-      result: "VIA_AUDITING",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      handleStatus: "edit",
-      form: {
-        sn: "",
-        distributionId: "",
-        distributionName: "",
-        price: "",
-        name: "",
-        settlementBankAccountName: "",
-        settlementBankAccountNum: "",
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  computed: {
-    applyCountLabel() {
-      return this.applyCount > 0 ? `待处理(${this.applyCount})` : "待处理";
-    },
-  },
-  methods: {
-    init() {
-      this.getDataList();
-      this.loadApplyCount();
-    },
-    loadApplyCount() {
-      getDistributionCash({
-        distributionCashStatus: "APPLY",
-        pageSize: 1,
-        pageNumber: 1,
-      }).then((res) => {
-        if (res.success) {
-          this.applyCount = res.result.total || 0;
-        }
-      });
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      if (this.tabStatus) {
-        params.distributionCashStatus = this.tabStatus;
-      }
-      getDistributionCash(params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    handleTabChange(name) {
-      this.tabStatus = name;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSubmit() {
-      let result = this.result == "VIA_AUDITING" ? "通过" : "拒绝";
-      this.$Modal.confirm({
-        title: "确认审核",
-        content: "您确认要审核" + result + "么?",
-        loading: true,
-        onOk: () => {
-          auditDistributionCash(this.form.id, { result: this.result }).then((res) => {
-            if (res.success) {
-              this.$Modal.remove();
-              this.$Message.success("审核成功");
-              this.drawerVisible = false;
-              this.getDataList();
-              this.loadApplyCount();
-            } else {
-              this.$Modal.remove();
-            }
-          });
-        },
-      });
-    },
-    edit(v) {
-      this.drawerTitle = "审核";
-      this.handleStatus = "edit";
-      this.result = "VIA_AUDITING";
-      const data = {};
-      for (let attr in v) {
-        data[attr] = v[attr] === null ? "" : v[attr];
-      }
-      this.form = data;
-      this.drawerVisible = true;
-    },
-    view(v) {
-      this.drawerTitle = "查看";
-      this.handleStatus = "view";
-      const data = {};
-      for (let attr in v) {
-        data[attr] = v[attr] === null ? "" : v[attr];
-      }
-      this.form = data;
-      this.drawerVisible = true;
-    },
-  },
-  mounted() {
-    // 处理路由参数，自动跳转到指定标签页
-    const tabStatus = this.$route.query.tabStatus;
-    if (tabStatus) {
-      this.tabStatus = tabStatus;
+defineOptions({ name: "distributionCash" });
+
+const route = useRoute();
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const tabStatus = ref("");
+const applyCount = ref(0);
+const loading = ref(true);
+const drawerVisible = ref(false);
+const drawerTitle = ref("");
+const result = ref("VIA_AUDITING");
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const handleStatus = ref("edit");
+const form = ref({
+  sn: "",
+  distributionId: "",
+  distributionName: "",
+  price: "",
+  name: "",
+  settlementBankAccountName: "",
+  settlementBankAccountNum: "",
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+const applyCountLabel = computed(() => {
+  return applyCount.value > 0 ? `待处理(${applyCount.value})` : "待处理";
+});
+
+function init() {
+  getDataList();
+  loadApplyCount();
+}
+function loadApplyCount() {
+  getDistributionCash({
+    distributionCashStatus: "APPLY",
+    pageSize: 1,
+    pageNumber: 1,
+  }).then((res) => {
+    if (res.success) {
+      applyCount.value = res.result.total || 0;
     }
-    this.init();
-  },
-};
+  });
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  const params = { ...searchForm.value };
+  if (tabStatus.value) {
+    params.distributionCashStatus = tabStatus.value;
+  }
+  getDistributionCash(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function handleTabChange(name) {
+  tabStatus.value = name;
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleSubmit() {
+  let resultText = result.value == "VIA_AUDITING" ? "通过" : "拒绝";
+  Modal.confirm({
+    title: "确认审核",
+    content: "您确认要审核" + resultText + "么?",
+    loading: true,
+    onOk: () => {
+      auditDistributionCash(form.value.id, { result: result.value }).then((res) => {
+        if (res.success) {
+          Modal.remove();
+          Message.success("审核成功");
+          drawerVisible.value = false;
+          getDataList();
+          loadApplyCount();
+        } else {
+          Modal.remove();
+        }
+      });
+    },
+  });
+}
+function edit(v) {
+  drawerTitle.value = "审核";
+  handleStatus.value = "edit";
+  result.value = "VIA_AUDITING";
+  const formData = {};
+  for (let attr in v) {
+    formData[attr] = v[attr] === null ? "" : v[attr];
+  }
+  form.value = formData;
+  drawerVisible.value = true;
+}
+function view(v) {
+  drawerTitle.value = "查看";
+  handleStatus.value = "view";
+  const formData = {};
+  for (let attr in v) {
+    formData[attr] = v[attr] === null ? "" : v[attr];
+  }
+  form.value = formData;
+  drawerVisible.value = true;
+}
+
+onMounted(() => {
+  // 处理路由参数，自动跳转到指定标签页
+  const queryTabStatus = route.query.tabStatus;
+  if (queryTabStatus) {
+    tabStatus.value = queryTabStatus;
+  }
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .ops a {
diff --git a/manager/src/views/distribution/distributionCustomer.vue b/manager/src/views/distribution/distributionCustomer.vue
new file mode 100644
index 000000000..1f40feba6
--- /dev/null
+++ b/manager/src/views/distribution/distributionCustomer.vue
@@ -0,0 +1,359 @@
+<template>
+  <div class="search">
+    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
+      <el-tab-pane label="客户绑定" name="customer">
+        <el-card>
+          <el-form ref="searchFormRef" :model="searchForm" inline class="search-form" @keyup.enter="handleSearch">
+            <el-form-item label="客户昵称">
+              <el-input v-model="searchForm.memberName" clearable placeholder="客户昵称" style="width: 180px" />
+            </el-form-item>
+            <el-form-item label="手机号">
+              <el-input v-model="searchForm.memberMobile" clearable placeholder="手机号" style="width: 180px" />
+            </el-form-item>
+            <el-form-item label="分销员">
+              <el-input v-model="searchForm.distributionName" clearable placeholder="分销员名称" style="width: 180px" />
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select v-model="searchForm.status" clearable style="width: 120px">
+                <el-option v-for="item in bindStatusList" :key="item.value" :value="item.value" :label="item.label" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="来源">
+              <el-select v-model="searchForm.bindSource" clearable style="width: 140px">
+                <el-option v-for="item in bindSourceList" :key="item.value" :value="item.value" :label="item.label" />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card>
+          <el-table v-loading="loading" border :data="data" class="mt_10">
+            <el-table-column prop="memberName" label="客户昵称" min-width="120" />
+            <el-table-column prop="memberMobile" label="手机号" min-width="120" />
+            <el-table-column prop="distributionName" label="归属分销员" min-width="120" />
+            <el-table-column label="绑定来源" min-width="100">
+              <template #default="{ row }">{{ bindSourceLabel(row.bindSource) }}</template>
+            </el-table-column>
+            <el-table-column label="绑定类型" min-width="90">
+              <template #default="{ row }">
+                {{ row.bindType === 'PERMANENT' ? '永久' : '短期' }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="bindStartTime" label="绑定时间" min-width="160" />
+            <el-table-column prop="bindExpireTime" label="到期时间" min-width="160" />
+            <el-table-column label="保护期剩余" min-width="100">
+              <template #default="{ row }">
+                <span v-if="row.protectRemainDays != null">{{ row.protectRemainDays }} 天</span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="90">
+              <template #default="{ row }">
+                <el-tag v-if="row.status === 'ACTIVE'" type="success">有效</el-tag>
+                <el-tag v-else type="info">已过期</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="160" fixed="right" align="center">
+              <template #default="{ row }">
+                <a class="link-text" @click="openRebind(row)">换绑</a>
+                <span class="split">|</span>
+                <a class="link-text" @click="viewMemberLog(row)">日志</a>
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="mt_10 page padding-row" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="searchForm.pageNumber"
+              v-model:page-size="searchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @current-change="getDataList"
+              @size-change="handlePageSizeChange"
+            />
+          </div>
+        </el-card>
+      </el-tab-pane>
+
+      <el-tab-pane label="绑定日志" name="log">
+        <el-card>
+          <el-form ref="logSearchFormRef" :model="logSearchForm" inline class="search-form" @keyup.enter="handleLogSearch">
+            <el-form-item label="客户昵称">
+              <el-input v-model="logSearchForm.memberName" clearable placeholder="客户昵称" style="width: 180px" />
+            </el-form-item>
+            <el-form-item label="变更类型">
+              <el-select v-model="logSearchForm.changeType" clearable style="width: 140px">
+                <el-option v-for="item in bindChangeTypeList" :key="item.value" :value="item.value" :label="item.label" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="时间">
+              <el-date-picker
+                v-model="logDateRange"
+                type="daterange"
+                value-format="YYYY-MM-DD"
+                start-placeholder="开始"
+                end-placeholder="结束"
+                style="width: 240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="handleLogSearch">搜索</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+
+        <el-card>
+          <el-table v-loading="logLoading" border :data="logData" class="mt_10">
+            <el-table-column prop="createTime" label="时间" min-width="160" />
+            <el-table-column prop="memberName" label="客户" min-width="100" />
+            <el-table-column prop="fromDistributionName" label="原分销员" min-width="110" />
+            <el-table-column prop="toDistributionName" label="新分销员" min-width="110" />
+            <el-table-column label="变更类型" min-width="100">
+              <template #default="{ row }">{{ bindChangeTypeLabel(row.changeType) }}</template>
+            </el-table-column>
+            <el-table-column prop="operatorType" label="操作方" width="90" />
+            <el-table-column prop="remark" label="备注" min-width="160" show-overflow-tooltip />
+          </el-table>
+          <div class="mt_10 page padding-row" style="display: flex; justify-content: flex-end">
+            <el-pagination
+              v-model:current-page="logSearchForm.pageNumber"
+              v-model:page-size="logSearchForm.pageSize"
+              :page-sizes="[20, 50, 100]"
+              :total="logTotal"
+              layout="total, sizes, prev, pager, next, jumper"
+              @current-change="getLogList"
+              @size-change="handleLogPageSizeChange"
+            />
+          </div>
+        </el-card>
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog v-model="rebindVisible" title="手动换绑" width="520px">
+      <el-form ref="rebindFormRef" :model="rebindForm" :rules="rebindRules" label-width="100px">
+        <el-form-item label="客户">
+          <el-input :model-value="rebindForm.memberLabel" disabled />
+        </el-form-item>
+        <el-form-item label="新分销员" prop="distributionId">
+          <el-select
+            v-model="rebindForm.distributionId"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="输入分销员名称搜索"
+            :remote-method="searchDistributor"
+            :loading="distributorLoading"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="item in distributorOptions"
+              :key="item.id"
+              :label="item.memberName"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="rebindForm.remark" type="textarea" :rows="3" maxlength="200" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="rebindVisible = false">取消</el-button>
+        <el-button type="primary" :loading="rebindSubmitting" @click="submitRebind">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import {
+  getDistributionCustomerPage,
+  getDistributionBindLogPage,
+  getDistributionListData,
+  rebindDistributionCustomer,
+} from "@/api/distribution";
+import { bindStatusList, bindSourceList, bindChangeTypeList } from "./dataJson";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "distributionCustomer" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"/"logSearchForm"，与 data 同名会互相覆盖，改名为 searchFormRef/logSearchFormRef）
+const searchFormRef = ref(null);
+const logSearchFormRef = ref(null);
+const rebindFormRef = ref(null);
+
+const activeTab = ref("customer");
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "bindStartTime",
+  order: "desc",
+  memberName: "",
+  memberMobile: "",
+  distributionName: "",
+  status: "",
+  bindSource: "",
+});
+const logLoading = ref(false);
+const logData = ref([]);
+const logTotal = ref(0);
+const logDateRange = ref([]);
+const logSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  memberName: "",
+  memberId: "",
+  changeType: "",
+  startDate: "",
+  endDate: "",
+});
+const rebindVisible = ref(false);
+const rebindSubmitting = ref(false);
+const distributorLoading = ref(false);
+const distributorOptions = ref([]);
+const rebindForm = ref({
+  memberId: "",
+  memberLabel: "",
+  distributionId: "",
+  remark: "",
+});
+const rebindRules = {
+  distributionId: [{ required: true, message: "请选择分销员", trigger: "change" }],
+};
+
+function bindSourceLabel(value) {
+  const item = bindSourceList.find((i) => i.value === value);
+  return item ? item.label : value;
+}
+function bindChangeTypeLabel(value) {
+  const item = bindChangeTypeList.find((i) => i.value === value);
+  return item ? item.label : value;
+}
+function handleTabChange(name) {
+  if (name === "log" && logData.value.length === 0) {
+    getLogList();
+  }
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handlePageSizeChange() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionCustomerPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function handleLogSearch() {
+  logSearchForm.pageNumber = 1;
+  if (logDateRange.value && logDateRange.value.length === 2) {
+    logSearchForm.startDate = logDateRange.value[0];
+    logSearchForm.endDate = logDateRange.value[1];
+  } else {
+    logSearchForm.startDate = "";
+    logSearchForm.endDate = "";
+  }
+  getLogList();
+}
+function handleLogPageSizeChange() {
+  logSearchForm.pageNumber = 1;
+  getLogList();
+}
+function getLogList() {
+  logLoading.value = true;
+  getDistributionBindLogPage(logSearchForm).then((res) => {
+    logLoading.value = false;
+    if (res.success) {
+      logData.value = res.result.records;
+      logTotal.value = res.result.total;
+    }
+  });
+}
+function openRebind(row) {
+  rebindForm.value = {
+    memberId: row.memberId,
+    memberLabel: `${row.memberName || ""}${row.memberMobile ? " / " + row.memberMobile : ""}`,
+    distributionId: "",
+    remark: "",
+  };
+  distributorOptions.value = [];
+  rebindVisible.value = true;
+}
+function searchDistributor(query) {
+  if (!query) {
+    distributorOptions.value = [];
+    return;
+  }
+  distributorLoading.value = true;
+  getDistributionListData({
+    memberName: query,
+    distributionStatus: "PASS",
+    pageNumber: 1,
+    pageSize: 20,
+  }).then((res) => {
+    distributorLoading.value = false;
+    if (res.success) {
+      distributorOptions.value = (res.result.records || []).filter((item) => item.id !== rebindForm.value.distributionId);
+    }
+  });
+}
+function submitRebind() {
+  rebindFormRef.value.validate((valid) => {
+    if (!valid) return;
+    rebindSubmitting.value = true;
+    rebindDistributionCustomer({
+      memberId: rebindForm.value.memberId,
+      distributionId: rebindForm.value.distributionId,
+      remark: rebindForm.value.remark,
+    }).then((res) => {
+      rebindSubmitting.value = false;
+      if (res.success) {
+        Message.success("换绑成功");
+        rebindVisible.value = false;
+        getDataList();
+      }
+    }).catch(() => {
+      rebindSubmitting.value = false;
+    });
+  });
+}
+function viewMemberLog(row) {
+  activeTab.value = "log";
+  logSearchForm.memberId = row.memberId;
+  logSearchForm.memberName = "";
+  logSearchForm.pageNumber = 1;
+  getLogList();
+}
+
+onMounted(() => {
+  getDataList();
+});
+</script>
+
+<style lang="scss" scoped>
+.link-text {
+  color: #2d8cf0;
+  cursor: pointer;
+}
+.split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+</style>
diff --git a/manager/src/views/distribution/distributionCustomerRelation.vue b/manager/src/views/distribution/distributionCustomerRelation.vue
index e0d2a080e..2cbc2f30c 100644
--- a/manager/src/views/distribution/distributionCustomerRelation.vue
+++ b/manager/src/views/distribution/distributionCustomerRelation.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="110px"
@@ -250,7 +250,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="rebindForm" :model="rebindForm" :rules="rebindRules" label-width="110px">
+      <el-form ref="rebindFormRef" :model="rebindForm" :rules="rebindRules" label-width="110px">
         <el-form-item label="客户">
           <span>{{ rebindForm.memberNickname || rebindForm.memberMobile || rebindForm.memberId }}</span>
         </el-form-item>
@@ -288,7 +288,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="unbindForm" :model="unbindForm" label-width="110px">
+      <el-form ref="unbindFormRef" :model="unbindForm" label-width="110px">
         <el-form-item label="客户">
           <span>{{ unbindForm.memberNickname || unbindForm.memberMobile || unbindForm.memberId }}</span>
         </el-form-item>
@@ -304,7 +304,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import {
   getCustomerRelationDetail,
   getCustomerRelationLogs,
@@ -315,259 +317,260 @@ import {
 import { relationEffectiveList, hasDeadlineList } from "./dataJson.js";
 import DistributionSelector from "@/components/distribution/distribution-selector.vue";
 import { QuestionFilled } from "@element-plus/icons-vue";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "distributionCustomerRelation",
-  components: { QuestionFilled, DistributionSelector },
-  data() {
-    return {
-      relationEffectiveList,
-      hasDeadlineList,
-      bindTimeRange: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        memberMobile: "",
-        distributionMobile: "",
-        distributionId: "",
-        relationEffective: "",
-        hasDeadline: "",
-      },
-      data: [],
-      total: 0,
-      detailVisible: false,
-      detailLoading: false,
-      detail: null,
-      logVisible: false,
-      logLoading: false,
-      logList: [],
-      logTarget: null,
-      rebindVisible: false,
-      distributorSelectorVisible: false,
-      unbindVisible: false,
-      rebindLoading: false,
-      unbindLoading: false,
-      rebindForm: {
-        memberId: "",
-        memberNickname: "",
-        memberMobile: "",
-        currentDistributionId: "",
-        distributionId: "",
-        distributionNickname: "",
-        distributionMobile: "",
-        reason: "",
-      },
-      unbindForm: {
-        memberId: "",
-        memberNickname: "",
-        memberMobile: "",
-        reason: "",
-      },
-      rebindRules: {
-        distributionId: [{
-          required: true,
-          message: "请选择分销员",
-          trigger: "change",
-        }],
-      },
-    };
-  },
-  computed: {
-    selectedDistributorLabel() {
-      if (!this.rebindForm.distributionId) return "";
-      const name = this.rebindForm.distributionNickname || "-";
-      const mobile = this.rebindForm.distributionMobile || "-";
-      return `${name}（${mobile}）`;
-    },
-  },
-  mounted() {
-    this.applyRouteQuery();
-    this.getDataList();
-  },
-  watch: {
-    $route() {
-      this.applyRouteQuery();
-      this.getDataList();
-    },
-  },
-  methods: {
-    applyRouteQuery() {
-      const query = this.$route.query || {};
-      this.searchForm.distributionId = query.distributionId ? String(query.distributionId) : "";
-      this.searchForm.distributionMobile = query.distributionMobile ? String(query.distributionMobile) : "";
-    },
-    formatInvalidTime(row) {
-      return row?.invalidTime || "-";
-    },
-    formatDetailInvalidTime(detail) {
-      if (!detail || this.isRelationEffective(detail)) return "-";
-      return detail.invalidTime || "-";
-    },
-    formatDetailInvalidReason(detail) {
-      if (!detail || this.isRelationEffective(detail)) return "-";
-      return detail.invalidReason || "客户关系失效";
-    },
-    isRelationEffective(row) {
-      if (!row) return false;
-      if (row.relationEffective === true) return true;
-      if (row.relationEffective === false) return false;
-      return !["EXPIRED", "UNBOUND"].includes(row.relationStatus);
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      if (!params.memberMobile) delete params.memberMobile;
-      if (!params.distributionMobile) delete params.distributionMobile;
-      if (!params.distributionId) delete params.distributionId;
-      if (params.relationEffective === "" || params.relationEffective === null || params.relationEffective === undefined) {
-        delete params.relationEffective;
-      } else {
-        params.relationEffective = params.relationEffective === true || params.relationEffective === "true";
+defineOptions({ name: "distributionCustomerRelation" });
+
+const route = useRoute();
+
+const searchFormRef = ref(null);
+const rebindFormRef = ref(null);
+const unbindFormRef = ref(null);
+
+const bindTimeRange = ref([]);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  memberMobile: "",
+  distributionMobile: "",
+  distributionId: "",
+  relationEffective: "",
+  hasDeadline: "",
+});
+const data = ref([]);
+const total = ref(0);
+const detailVisible = ref(false);
+const detailLoading = ref(false);
+const detail = ref(null);
+const logVisible = ref(false);
+const logLoading = ref(false);
+const logList = ref([]);
+const logTarget = ref(null);
+const rebindVisible = ref(false);
+const distributorSelectorVisible = ref(false);
+const unbindVisible = ref(false);
+const rebindLoading = ref(false);
+const unbindLoading = ref(false);
+const rebindForm = ref({
+  memberId: "",
+  memberNickname: "",
+  memberMobile: "",
+  currentDistributionId: "",
+  distributionId: "",
+  distributionNickname: "",
+  distributionMobile: "",
+  reason: "",
+});
+const unbindForm = ref({
+  memberId: "",
+  memberNickname: "",
+  memberMobile: "",
+  reason: "",
+});
+const rebindRules = reactive({
+  distributionId: [{
+    required: true,
+    message: "请选择分销员",
+    trigger: "change",
+  }],
+});
+
+const selectedDistributorLabel = computed(() => {
+  if (!rebindForm.value.distributionId) return "";
+  const name = rebindForm.value.distributionNickname || "-";
+  const mobile = rebindForm.value.distributionMobile || "-";
+  return `${name}（${mobile}）`;
+});
+
+watch(
+  () => route.query,
+  () => {
+    applyRouteQuery();
+    getDataList();
+  }
+);
+
+onMounted(() => {
+  applyRouteQuery();
+  getDataList();
+});
+
+function applyRouteQuery() {
+  const query = route.query || {};
+  searchForm.distributionId = query.distributionId ? String(query.distributionId) : "";
+  searchForm.distributionMobile = query.distributionMobile ? String(query.distributionMobile) : "";
+}
+function formatInvalidTime(row) {
+  return row?.invalidTime || "-";
+}
+function formatDetailInvalidTime(detail) {
+  if (!detail || isRelationEffective(detail)) return "-";
+  return detail.invalidTime || "-";
+}
+function formatDetailInvalidReason(detail) {
+  if (!detail || isRelationEffective(detail)) return "-";
+  return detail.invalidReason || "客户关系失效";
+}
+function isRelationEffective(row) {
+  if (!row) return false;
+  if (row.relationEffective === true) return true;
+  if (row.relationEffective === false) return false;
+  return !["EXPIRED", "UNBOUND"].includes(row.relationStatus);
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  const params = { ...searchForm };
+  if (!params.memberMobile) delete params.memberMobile;
+  if (!params.distributionMobile) delete params.distributionMobile;
+  if (!params.distributionId) delete params.distributionId;
+  if (params.relationEffective === "" || params.relationEffective === null || params.relationEffective === undefined) {
+    delete params.relationEffective;
+  } else {
+    params.relationEffective = params.relationEffective === true || params.relationEffective === "true";
+  }
+  if (params.hasDeadline === "" || params.hasDeadline === null || params.hasDeadline === undefined) {
+    delete params.hasDeadline;
+  } else {
+    params.hasDeadline = params.hasDeadline === true || params.hasDeadline === "true";
+  }
+  if (bindTimeRange.value && bindTimeRange.value[0] && bindTimeRange.value[1]) {
+    const startTime = new Date(bindTimeRange.value[0]).getTime();
+    const endTime = new Date(bindTimeRange.value[1]).getTime();
+    params.bindTimeStart = unixToDate(startTime / 1000);
+    params.bindTimeEnd = unixToDate(endTime / 1000);
+  }
+  getCustomerRelations(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function openDetail(row) {
+  detailVisible.value = true;
+  detailLoading.value = true;
+  detail.value = null;
+  getCustomerRelationDetail(row.id).then((res) => {
+    detailLoading.value = false;
+    if (res.success) {
+      detail.value = res.result;
+    }
+  }).catch(() => {
+    detailLoading.value = false;
+  });
+}
+function openLogs(row) {
+  logVisible.value = true;
+  logTarget.value = row;
+  logLoading.value = true;
+  logList.value = [];
+  getCustomerRelationLogs(row.id).then((res) => {
+    logLoading.value = false;
+    if (res.success) {
+      logList.value = res.result || [];
+    }
+  }).catch(() => {
+    logLoading.value = false;
+  });
+}
+function formatDistributorCell(nickname, mobile, id) {
+  if ((!nickname || nickname === "-") && !id) return "-";
+  const name = nickname && nickname !== "-" ? nickname : id;
+  if (mobile) return `${name}\n${mobile}`;
+  return name;
+}
+function openRebind(row) {
+  rebindForm.value = {
+    memberId: row.memberId,
+    memberNickname: row.memberNickname,
+    memberMobile: row.memberMobile,
+    currentDistributionId: row.distributionId || "",
+    distributionId: "",
+    distributionNickname: "",
+    distributionMobile: "",
+    reason: "",
+  };
+  rebindVisible.value = true;
+}
+function onDistributorSelected(row) {
+  rebindForm.value.distributionId = row.id;
+  rebindForm.value.distributionNickname = row.nickname;
+  rebindForm.value.distributionMobile = row.mobile;
+  nextTick(() => {
+    rebindFormRef.value?.validateField("distributionId");
+  });
+}
+function clearSelectedDistributor() {
+  rebindForm.value.distributionId = "";
+  rebindForm.value.distributionNickname = "";
+  rebindForm.value.distributionMobile = "";
+  nextTick(() => {
+    rebindFormRef.value?.validateField("distributionId");
+  });
+}
+function openUnbind(row) {
+  unbindForm.value = {
+    memberId: row.memberId,
+    memberNickname: row.memberNickname,
+    memberMobile: row.memberMobile,
+    reason: "",
+  };
+  unbindVisible.value = true;
+}
+function submitRebind() {
+  rebindFormRef.value.validate((valid) => {
+    if (!valid) return;
+    if (rebindForm.value.distributionId === rebindForm.value.currentDistributionId) {
+      Message.warning("新分销员不能与当前分销员相同");
+      return;
+    }
+    rebindLoading.value = true;
+    rebindCustomerRelation({
+      memberId: rebindForm.value.memberId,
+      distributionId: rebindForm.value.distributionId,
+      reason: rebindForm.value.reason,
+    }).then((res) => {
+      rebindLoading.value = false;
+      if (res.success) {
+        Message.success("操作成功");
+        rebindVisible.value = false;
+        getDataList();
       }
-      if (params.hasDeadline === "" || params.hasDeadline === null || params.hasDeadline === undefined) {
-        delete params.hasDeadline;
-      } else {
-        params.hasDeadline = params.hasDeadline === true || params.hasDeadline === "true";
-      }
-      if (this.bindTimeRange && this.bindTimeRange[0] && this.bindTimeRange[1]) {
-        const startTime = new Date(this.bindTimeRange[0]).getTime();
-        const endTime = new Date(this.bindTimeRange[1]).getTime();
-        params.bindTimeStart = this.$filters.unixToDate(startTime / 1000);
-        params.bindTimeEnd = this.$filters.unixToDate(endTime / 1000);
-      }
-      getCustomerRelations(params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    openDetail(row) {
-      this.detailVisible = true;
-      this.detailLoading = true;
-      this.detail = null;
-      getCustomerRelationDetail(row.id).then((res) => {
-        this.detailLoading = false;
-        if (res.success) {
-          this.detail = res.result;
-        }
-      }).catch(() => {
-        this.detailLoading = false;
-      });
-    },
-    openLogs(row) {
-      this.logVisible = true;
-      this.logTarget = row;
-      this.logLoading = true;
-      this.logList = [];
-      getCustomerRelationLogs(row.id).then((res) => {
-        this.logLoading = false;
-        if (res.success) {
-          this.logList = res.result || [];
-        }
-      }).catch(() => {
-        this.logLoading = false;
-      });
-    },
-    formatDistributorCell(nickname, mobile, id) {
-      if ((!nickname || nickname === "-") && !id) return "-";
-      const name = nickname && nickname !== "-" ? nickname : id;
-      if (mobile) return `${name}\n${mobile}`;
-      return name;
-    },
-    openRebind(row) {
-      this.rebindForm = {
-        memberId: row.memberId,
-        memberNickname: row.memberNickname,
-        memberMobile: row.memberMobile,
-        currentDistributionId: row.distributionId || "",
-        distributionId: "",
-        distributionNickname: "",
-        distributionMobile: "",
-        reason: "",
-      };
-      this.rebindVisible = true;
-    },
-    onDistributorSelected(row) {
-      this.rebindForm.distributionId = row.id;
-      this.rebindForm.distributionNickname = row.nickname;
-      this.rebindForm.distributionMobile = row.mobile;
-      this.$nextTick(() => {
-        this.$refs.rebindForm?.validateField("distributionId");
-      });
-    },
-    clearSelectedDistributor() {
-      this.rebindForm.distributionId = "";
-      this.rebindForm.distributionNickname = "";
-      this.rebindForm.distributionMobile = "";
-      this.$nextTick(() => {
-        this.$refs.rebindForm?.validateField("distributionId");
-      });
-    },
-    openUnbind(row) {
-      this.unbindForm = {
-        memberId: row.memberId,
-        memberNickname: row.memberNickname,
-        memberMobile: row.memberMobile,
-        reason: "",
-      };
-      this.unbindVisible = true;
-    },
-    submitRebind() {
-      this.$refs.rebindForm.validate((valid) => {
-        if (!valid) return;
-        if (this.rebindForm.distributionId === this.rebindForm.currentDistributionId) {
-          this.$Message.warning("新分销员不能与当前分销员相同");
-          return;
-        }
-        this.rebindLoading = true;
-        rebindCustomerRelation({
-          memberId: this.rebindForm.memberId,
-          distributionId: this.rebindForm.distributionId,
-          reason: this.rebindForm.reason,
-        }).then((res) => {
-          this.rebindLoading = false;
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.rebindVisible = false;
-            this.getDataList();
-          }
-        }).catch(() => {
-          this.rebindLoading = false;
-        });
-      });
-    },
-    submitUnbind() {
-      this.unbindLoading = true;
-      unbindCustomerRelation({
-        memberId: this.unbindForm.memberId,
-        reason: this.unbindForm.reason,
-      }).then((res) => {
-        this.unbindLoading = false;
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.unbindVisible = false;
-          this.getDataList();
-        }
-      }).catch(() => {
-        this.unbindLoading = false;
-      });
-    },
-  },
-};
+    }).catch(() => {
+      rebindLoading.value = false;
+    });
+  });
+}
+function submitUnbind() {
+  unbindLoading.value = true;
+  unbindCustomerRelation({
+    memberId: unbindForm.value.memberId,
+    reason: unbindForm.value.reason,
+  }).then((res) => {
+    unbindLoading.value = false;
+    if (res.success) {
+      Message.success("操作成功");
+      unbindVisible.value = false;
+      getDataList();
+    }
+  }).catch(() => {
+    unbindLoading.value = false;
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/distribution/distributionGoods.vue b/manager/src/views/distribution/distributionGoods.vue
index ced0fb663..b9b8b1bfc 100644
--- a/manager/src/views/distribution/distributionGoods.vue
+++ b/manager/src/views/distribution/distributionGoods.vue
@@ -2,7 +2,7 @@
   <div>
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -189,206 +189,206 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, onMounted } from "vue";
 import { auditDistributionGoods, delDistributionGoods, getDistributionGoods } from "@/api/distribution";
 import { getBrandListData, getCategoryTree } from "@/api/goods";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "distributionGoods",
-  data() {
-    return {
-      loading: true,
-      currentAuthStatus: "ALL",
-      auditModalVisible: false,
-      auditLoading: false,
-      auditTargetIds: [],
-      auditForm: {
-        authStatus: "PASS",
-        authRemark: "",
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        goodsName: "",
-        storeName: "",
-        categoryId: "",
-        brandId: "",
-        authStatus: "",
-      },
-      categoryList: [],
-      categoryProps: {
-        value: "id",
-        label: "name",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      brandList: [],
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  computed: {
-    hasPendingAuditSelection() {
-      return this.selectList.some((item) => item.authStatus === "TOBEAUDITED");
-    },
-  },
-  methods: {
-    authStatusText(value) {
-      if (value === "TOBEAUDITED") return "待审核";
-      if (value === "REFUSE") return "审核未通过";
-      return "已审核";
-    },
-    authStatusTagType(value) {
-      if (value === "TOBEAUDITED") return "warning";
-      if (value === "REFUSE") return "danger";
-      return "success";
-    },
-    onAuthStatusChange(name) {
-      this.searchForm.authStatus = name === "ALL" ? "" : name;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    openAudit(row) {
-      this.auditTargetIds = [row.id];
-      this.auditForm = { authStatus: "PASS", authRemark: "" };
-      this.auditModalVisible = true;
-    },
-    openBatchAudit() {
-      const pendingRows = this.selectList.filter((item) => item.authStatus === "TOBEAUDITED");
-      if (!pendingRows.length) {
-        this.$Message.warning("请选择待审核的分销商品");
-        return;
+defineOptions({ name: "distributionGoods" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const currentAuthStatus = ref("ALL");
+const auditModalVisible = ref(false);
+const auditLoading = ref(false);
+const auditTargetIds = ref([]);
+const auditForm = ref({
+  authStatus: "PASS",
+  authRemark: "",
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  goodsName: "",
+  storeName: "",
+  categoryId: "",
+  brandId: "",
+  authStatus: "",
+});
+const categoryList = ref([]);
+const categoryProps = reactive({
+  value: "id",
+  label: "name",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
+});
+const brandList = ref([]);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+
+const hasPendingAuditSelection = computed(() =>
+  selectList.value.some((item) => item.authStatus === "TOBEAUDITED")
+);
+
+function authStatusText(value) {
+  if (value === "TOBEAUDITED") return "待审核";
+  if (value === "REFUSE") return "审核未通过";
+  return "已审核";
+}
+function authStatusTagType(value) {
+  if (value === "TOBEAUDITED") return "warning";
+  if (value === "REFUSE") return "danger";
+  return "success";
+}
+function onAuthStatusChange(name) {
+  searchForm.authStatus = name === "ALL" ? "" : name;
+  searchForm.pageNumber = 1;
+  getDataList();
+  clearSelectAll();
+}
+function openAudit(row) {
+  auditTargetIds.value = [row.id];
+  auditForm.value = { authStatus: "PASS", authRemark: "" };
+  auditModalVisible.value = true;
+}
+function openBatchAudit() {
+  const pendingRows = selectList.value.filter((item) => item.authStatus === "TOBEAUDITED");
+  if (!pendingRows.length) {
+    Message.warning("请选择待审核的分销商品");
+    return;
+  }
+  auditTargetIds.value = pendingRows.map((item) => item.id);
+  auditForm.value = { authStatus: "PASS", authRemark: "" };
+  auditModalVisible.value = true;
+}
+function submitAudit() {
+  if (auditForm.value.authStatus === "REFUSE" && !auditForm.value.authRemark.trim()) {
+    Message.warning("请填写驳回原因");
+    return;
+  }
+  auditLoading.value = true;
+  auditDistributionGoods({
+    ids: auditTargetIds.value,
+    authStatus: auditForm.value.authStatus,
+    authRemark: auditForm.value.authRemark.trim(),
+  })
+    .then((res) => {
+      if (res.success) {
+        Message.success("审核成功");
+        auditModalVisible.value = false;
+        clearSelectAll();
+        getDataList();
       }
-      this.auditTargetIds = pendingRows.map((item) => item.id);
-      this.auditForm = { authStatus: "PASS", authRemark: "" };
-      this.auditModalVisible = true;
-    },
-    submitAudit() {
-      if (this.auditForm.authStatus === "REFUSE" && !this.auditForm.authRemark.trim()) {
-        this.$Message.warning("请填写驳回原因");
-        return;
+    })
+    .finally(() => {
+      auditLoading.value = false;
+    });
+}
+function goodsTypeText(value) {
+  if (value === "PHYSICAL_GOODS") return "实物商品";
+  if (value === "VIRTUAL_GOODS") return "虚拟商品";
+  if (value === "E_COUPON") return "电子卡券";
+  return "-";
+}
+function init() {
+  loadFilterOptions();
+  getDataList();
+}
+function loadFilterOptions() {
+  getCategoryTree().then((res) => {
+    if (res.success) {
+      categoryList.value = res.result || [];
+    }
+  });
+  getBrandListData().then((res) => {
+    brandList.value = Array.isArray(res) ? res : res.result || [];
+  });
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionGoods(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      this.auditLoading = true;
-      auditDistributionGoods({
-        ids: this.auditTargetIds,
-        authStatus: this.auditForm.authStatus,
-        authRemark: this.auditForm.authRemark.trim(),
-      })
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("审核成功");
-            this.auditModalVisible = false;
-            this.clearSelectAll();
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.auditLoading = false;
-        });
-    },
-    goodsTypeText(value) {
-      if (value === "PHYSICAL_GOODS") return "实物商品";
-      if (value === "VIRTUAL_GOODS") return "虚拟商品";
-      if (value === "E_COUPON") return "电子卡券";
-      return "-";
-    },
-    init() {
-      this.loadFilterOptions();
-      this.getDataList();
-    },
-    loadFilterOptions() {
-      getCategoryTree().then((res) => {
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认下架",
+    content: "您确认要下架么?",
+    loading: true,
+    onOk: () => {
+      delDistributionGoods(v.id).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.categoryList = res.result || [];
+          Message.success("下架成功");
+          getDataList();
         }
       });
-      getBrandListData().then((res) => {
-        this.brandList = Array.isArray(res) ? res : res.result || [];
+    },
+  });
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要下架的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认下架",
+    content: "您确认要下架所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      const ids = selectList.value.map((item) => item.id);
+      delDistributionGoods(ids.toString()).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("下架成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionGoods(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架么?",
-        loading: true,
-        onOk: () => {
-          delDistributionGoods(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          const ids = this.selectList.map((item) => item.id);
-          delDistributionGoods(ids.toString()).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/distribution/distributionGrade.vue b/manager/src/views/distribution/distributionGrade.vue
index 49801165c..ce046d4fc 100644
--- a/manager/src/views/distribution/distributionGrade.vue
+++ b/manager/src/views/distribution/distributionGrade.vue
@@ -108,12 +108,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import {
   getDistributionGrades,
   saveAllDistributionGrades,
   deleteDistributionGrade,
 } from "@/api/distribution";
+import { Message, Modal } from "@/utils/message";
+
+defineOptions({ name: "distributionGrade" });
 
 const MAX_GRADE_COUNT = 5;
 const GRADE_VALUE_OPTIONS = [1, 2, 3, 4, 5];
@@ -154,252 +158,244 @@ const buildDefaultRow = (sortOrder = null) => {
   };
 };
 
-export default {
-  name: "distributionGrade",
-  data() {
-    return {
-      loading: true,
-      saveLoading: false,
-      data: [],
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    normalizeRow(row, index) {
-      const normalized = {
-        ...buildDefaultRow(row.sortOrder),
-        ...row,
-        enableSalesCondition: row.enableSalesCondition !== false,
-        enableCommissionCondition: row.enableCommissionCondition !== false,
-        enableInviteCondition: row.enableInviteCondition !== false,
-        goodsCommissionRate: toPercent(row.goodsCommissionRate),
-        inviteCommissionRate: toPercent(row.inviteCommissionRate),
-        _key: row._key || row.id || `grade_${index}_${Date.now()}`,
-      };
-      if (this.isBaseGrade(normalized)) {
-        normalized.enableSalesCondition = false;
-        normalized.enableCommissionCondition = false;
-        normalized.enableInviteCondition = false;
-        if (!normalized.gradeName || !normalized.gradeName.trim()) {
-          normalized.gradeName = BASE_GRADE_NAME;
-        }
+const loading = ref(true);
+const saveLoading = ref(false);
+const data = ref([]);
+
+function normalizeRow(row, index) {
+  const normalized = {
+    ...buildDefaultRow(row.sortOrder),
+    ...row,
+    enableSalesCondition: row.enableSalesCondition !== false,
+    enableCommissionCondition: row.enableCommissionCondition !== false,
+    enableInviteCondition: row.enableInviteCondition !== false,
+    goodsCommissionRate: toPercent(row.goodsCommissionRate),
+    inviteCommissionRate: toPercent(row.inviteCommissionRate),
+    _key: row._key || row.id || `grade_${index}_${Date.now()}`,
+  };
+  if (isBaseGrade(normalized)) {
+    normalized.enableSalesCondition = false;
+    normalized.enableCommissionCondition = false;
+    normalized.enableInviteCondition = false;
+    if (!normalized.gradeName || !normalized.gradeName.trim()) {
+      normalized.gradeName = BASE_GRADE_NAME;
+    }
+  }
+  return normalized;
+}
+function isBaseGrade(row) {
+  return row && row.sortOrder === BASE_GRADE_VALUE;
+}
+function getSortedRows() {
+  return data.value.slice().sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+}
+function getGradeLabel(row) {
+  return row.gradeName && row.gradeName.trim() ? row.gradeName.trim() : `等级值${row.sortOrder}`;
+}
+function getNextGradeValue() {
+  const used = new Set(data.value.map((item) => item.sortOrder));
+  return GRADE_VALUE_OPTIONS.find((value) => value !== BASE_GRADE_VALUE && !used.has(value)) || null;
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionGrades().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = (res.result || [])
+        .slice()
+        .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
+        .map((item, index) => normalizeRow(item, index));
+    }
+  });
+}
+function addRow() {
+  if (data.value.length >= MAX_GRADE_COUNT) {
+    Message.warning("最多添加5个分销等级");
+    return;
+  }
+  const nextGradeValue = getNextGradeValue();
+  if (!nextGradeValue) {
+    Message.warning("等级值1-5已全部使用");
+    return;
+  }
+  data.value.push(buildDefaultRow(nextGradeValue));
+}
+function validateGradeProgression() {
+  const rows = getSortedRows();
+  for (let i = 1; i < rows.length; i++) {
+    const lower = rows[i - 1];
+    const higher = rows[i];
+    const lowerLabel = getGradeLabel(lower);
+    const higherLabel = getGradeLabel(higher);
+    if (lower.enableSalesCondition) {
+      if (!higher.enableSalesCondition) {
+        Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的销售额升级条件`);
+        return false;
       }
-      return normalized;
-    },
-    isBaseGrade(row) {
-      return row && row.sortOrder === BASE_GRADE_VALUE;
-    },
-    getSortedRows() {
-      return this.data.slice().sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
-    },
-    getGradeLabel(row) {
-      return row.gradeName && row.gradeName.trim() ? row.gradeName.trim() : `等级值${row.sortOrder}`;
-    },
-    getNextGradeValue() {
-      const used = new Set(this.data.map((item) => item.sortOrder));
-      return GRADE_VALUE_OPTIONS.find((value) => value !== BASE_GRADE_VALUE && !used.has(value)) || null;
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionGrades().then((res) => {
-        this.loading = false;
+      if (Number(higher.salesThreshold || 0) < Number(lower.salesThreshold || 0)) {
+        Message.warning(`${higherLabel}销售额阈值不能小于${lowerLabel}`);
+        return false;
+      }
+    }
+    if (lower.enableCommissionCondition) {
+      if (!higher.enableCommissionCondition) {
+        Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的收益额升级条件`);
+        return false;
+      }
+      if (Number(higher.commissionThreshold || 0) < Number(lower.commissionThreshold || 0)) {
+        Message.warning(`${higherLabel}收益额阈值不能小于${lowerLabel}`);
+        return false;
+      }
+    }
+    if (lower.enableInviteCondition) {
+      if (!higher.enableInviteCondition) {
+        Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的邀请人数升级条件`);
+        return false;
+      }
+      if (Number(higher.inviteThreshold || 0) < Number(lower.inviteThreshold || 0)) {
+        Message.warning(`${higherLabel}邀请人数阈值不能小于${lowerLabel}`);
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function validateRows() {
+  if (!data.value.length) {
+    Message.warning("请至少添加一个分销等级");
+    return false;
+  }
+  const usedValues = [];
+  for (let i = 0; i < data.value.length; i++) {
+    const row = data.value[i];
+    if (!row.sortOrder) {
+      Message.warning(`请填写第${i + 1}行等级值`);
+      return false;
+    }
+    if (usedValues.includes(row.sortOrder)) {
+      Message.warning("等级值不能重复");
+      return false;
+    }
+    usedValues.push(row.sortOrder);
+    if (!row.gradeName || !row.gradeName.trim()) {
+      Message.warning(`请填写第${i + 1}行等级名`);
+      return false;
+    }
+    if (isBaseGrade(row)) {
+      continue;
+    }
+    if (!row.enableSalesCondition && !row.enableCommissionCondition && !row.enableInviteCondition) {
+      Message.warning(`第${i + 1}行请至少启用一项升级规则`);
+      return false;
+    }
+    const rowLabel = getGradeLabel(row);
+    if (row.enableSalesCondition && Number(row.salesThreshold || 0) <= 0) {
+      Message.warning(`${rowLabel}销售额必须大于0`);
+      return false;
+    }
+    if (row.enableCommissionCondition && Number(row.commissionThreshold || 0) <= 0) {
+      Message.warning(`${rowLabel}收益额必须大于0`);
+      return false;
+    }
+    if (row.enableInviteCondition && Number(row.inviteThreshold || 0) <= 0) {
+      Message.warning(`${rowLabel}邀请人数必须大于0`);
+      return false;
+    }
+  }
+  return validateGradeProgression() && validateCrossRates();
+}
+function validateCrossRates() {
+  let maxGoods = 0;
+  let maxInvite = 0;
+  for (const row of data.value) {
+    maxGoods = Math.max(maxGoods, Number(row.goodsCommissionRate || 0));
+    maxInvite = Math.max(maxInvite, Number(row.inviteCommissionRate || 0));
+  }
+  if (maxGoods + maxInvite > 100) {
+    Message.warning(
+      `所有等级中最高佣金比例（${maxGoods}%）与最高邀请奖励（${maxInvite}%）之和不能超过100%`
+    );
+    return false;
+  }
+  for (const row of data.value) {
+    const goods = Number(row.goodsCommissionRate || 0);
+    const invite = Number(row.inviteCommissionRate || 0);
+    if (goods + invite > 100) {
+      Message.warning(`${getGradeLabel(row)}的佣金比例与邀请奖励之和不能超过100%`);
+      return false;
+    }
+  }
+  return true;
+}
+function buildPayload(row) {
+  const base = isBaseGrade(row);
+  return {
+    id: row.id || undefined,
+    gradeName: row.gradeName.trim(),
+    sortOrder: row.sortOrder,
+    salesThreshold: row.salesThreshold,
+    commissionThreshold: row.commissionThreshold,
+    inviteThreshold: row.inviteThreshold,
+    enableSalesCondition: base ? false : row.enableSalesCondition,
+    enableCommissionCondition: base ? false : row.enableCommissionCondition,
+    enableInviteCondition: base ? false : row.enableInviteCondition,
+    goodsCommissionRate: toFraction(row.goodsCommissionRate),
+    inviteCommissionRate: toFraction(row.inviteCommissionRate),
+  };
+}
+async function saveAll() {
+  if (!validateRows()) {
+    return;
+  }
+  saveLoading.value = true;
+  try {
+    const payload = getSortedRows().map((row) => buildPayload(row));
+    const res = await saveAllDistributionGrades(payload);
+    if (res.success) {
+      Message.success("保存成功");
+      getDataList();
+    }
+  } catch (e) {
+    // request layer handles error message
+  } finally {
+    saveLoading.value = false;
+  }
+}
+function remove(row, index) {
+  if (isBaseGrade(row)) {
+    Message.warning("默认分销等级不能删除");
+    return;
+  }
+  const name = row.gradeName || `等级值${row.sortOrder || ""}`;
+  if (!row.id) {
+    Modal.confirm({
+      title: "确认删除",
+      content: `您确认要删除 ${name} 吗？`,
+      onOk: () => {
+        data.value.splice(index, 1);
+      },
+    });
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: `您确认要删除 ${name} 吗？`,
+    loading: true,
+    onOk: () => {
+      deleteDistributionGrade(row.id).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.data = (res.result || [])
-            .slice()
-            .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
-            .map((item, index) => this.normalizeRow(item, index));
+          Message.success("删除成功");
+          getDataList();
         }
       });
     },
-    addRow() {
-      if (this.data.length >= MAX_GRADE_COUNT) {
-        this.$Message.warning("最多添加5个分销等级");
-        return;
-      }
-      const nextGradeValue = this.getNextGradeValue();
-      if (!nextGradeValue) {
-        this.$Message.warning("等级值1-5已全部使用");
-        return;
-      }
-      this.data.push(buildDefaultRow(nextGradeValue));
-    },
-    validateGradeProgression() {
-      const rows = this.getSortedRows();
-      for (let i = 1; i < rows.length; i++) {
-        const lower = rows[i - 1];
-        const higher = rows[i];
-        const lowerLabel = this.getGradeLabel(lower);
-        const higherLabel = this.getGradeLabel(higher);
-        if (lower.enableSalesCondition) {
-          if (!higher.enableSalesCondition) {
-            this.$Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的销售额升级条件`);
-            return false;
-          }
-          if (Number(higher.salesThreshold || 0) < Number(lower.salesThreshold || 0)) {
-            this.$Message.warning(`${higherLabel}销售额阈值不能小于${lowerLabel}`);
-            return false;
-          }
-        }
-        if (lower.enableCommissionCondition) {
-          if (!higher.enableCommissionCondition) {
-            this.$Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的收益额升级条件`);
-            return false;
-          }
-          if (Number(higher.commissionThreshold || 0) < Number(lower.commissionThreshold || 0)) {
-            this.$Message.warning(`${higherLabel}收益额阈值不能小于${lowerLabel}`);
-            return false;
-          }
-        }
-        if (lower.enableInviteCondition) {
-          if (!higher.enableInviteCondition) {
-            this.$Message.warning(`${higherLabel}必须启用${lowerLabel}已启用的邀请人数升级条件`);
-            return false;
-          }
-          if (Number(higher.inviteThreshold || 0) < Number(lower.inviteThreshold || 0)) {
-            this.$Message.warning(`${higherLabel}邀请人数阈值不能小于${lowerLabel}`);
-            return false;
-          }
-        }
-      }
-      return true;
-    },
-    validateRows() {
-      if (!this.data.length) {
-        this.$Message.warning("请至少添加一个分销等级");
-        return false;
-      }
-      const usedValues = [];
-      for (let i = 0; i < this.data.length; i++) {
-        const row = this.data[i];
-        if (!row.sortOrder) {
-          this.$Message.warning(`请填写第${i + 1}行等级值`);
-          return false;
-        }
-        if (usedValues.includes(row.sortOrder)) {
-          this.$Message.warning("等级值不能重复");
-          return false;
-        }
-        usedValues.push(row.sortOrder);
-        if (!row.gradeName || !row.gradeName.trim()) {
-          this.$Message.warning(`请填写第${i + 1}行等级名`);
-          return false;
-        }
-        if (this.isBaseGrade(row)) {
-          continue;
-        }
-        if (!row.enableSalesCondition && !row.enableCommissionCondition && !row.enableInviteCondition) {
-          this.$Message.warning(`第${i + 1}行请至少启用一项升级规则`);
-          return false;
-        }
-        const rowLabel = this.getGradeLabel(row);
-        if (row.enableSalesCondition && Number(row.salesThreshold || 0) <= 0) {
-          this.$Message.warning(`${rowLabel}销售额必须大于0`);
-          return false;
-        }
-        if (row.enableCommissionCondition && Number(row.commissionThreshold || 0) <= 0) {
-          this.$Message.warning(`${rowLabel}收益额必须大于0`);
-          return false;
-        }
-        if (row.enableInviteCondition && Number(row.inviteThreshold || 0) <= 0) {
-          this.$Message.warning(`${rowLabel}邀请人数必须大于0`);
-          return false;
-        }
-      }
-      return this.validateGradeProgression() && this.validateCrossRates();
-    },
-    validateCrossRates() {
-      let maxGoods = 0;
-      let maxInvite = 0;
-      for (const row of this.data) {
-        maxGoods = Math.max(maxGoods, Number(row.goodsCommissionRate || 0));
-        maxInvite = Math.max(maxInvite, Number(row.inviteCommissionRate || 0));
-      }
-      if (maxGoods + maxInvite > 100) {
-        this.$Message.warning(
-          `所有等级中最高佣金比例（${maxGoods}%）与最高邀请奖励（${maxInvite}%）之和不能超过100%`
-        );
-        return false;
-      }
-      for (const row of this.data) {
-        const goods = Number(row.goodsCommissionRate || 0);
-        const invite = Number(row.inviteCommissionRate || 0);
-        if (goods + invite > 100) {
-          this.$Message.warning(`${this.getGradeLabel(row)}的佣金比例与邀请奖励之和不能超过100%`);
-          return false;
-        }
-      }
-      return true;
-    },
-    buildPayload(row) {
-      const isBaseGrade = this.isBaseGrade(row);
-      return {
-        id: row.id || undefined,
-        gradeName: row.gradeName.trim(),
-        sortOrder: row.sortOrder,
-        salesThreshold: row.salesThreshold,
-        commissionThreshold: row.commissionThreshold,
-        inviteThreshold: row.inviteThreshold,
-        enableSalesCondition: isBaseGrade ? false : row.enableSalesCondition,
-        enableCommissionCondition: isBaseGrade ? false : row.enableCommissionCondition,
-        enableInviteCondition: isBaseGrade ? false : row.enableInviteCondition,
-        goodsCommissionRate: toFraction(row.goodsCommissionRate),
-        inviteCommissionRate: toFraction(row.inviteCommissionRate),
-      };
-    },
-    async saveAll() {
-      if (!this.validateRows()) {
-        return;
-      }
-      this.saveLoading = true;
-      try {
-        const payload = this.getSortedRows().map((row) => this.buildPayload(row));
-        const res = await saveAllDistributionGrades(payload);
-        if (res.success) {
-          this.$Message.success("保存成功");
-          this.getDataList();
-        }
-      } catch (e) {
-        // request layer handles error message
-      } finally {
-        this.saveLoading = false;
-      }
-    },
-    remove(row, index) {
-      if (this.isBaseGrade(row)) {
-        this.$Message.warning("默认分销等级不能删除");
-        return;
-      }
-      const name = row.gradeName || `等级值${row.sortOrder || ""}`;
-      if (!row.id) {
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: `您确认要删除 ${name} 吗？`,
-          onOk: () => {
-            this.data.splice(index, 1);
-          },
-        });
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: `您确认要删除 ${name} 吗？`,
-        loading: true,
-        onOk: () => {
-          deleteDistributionGrade(row.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-};
-</script>
+  });
+}
+
+onMounted(() => {
+  getDataList();
+});</script>
 
 <style scoped lang="scss">
 .grade-footer {
diff --git a/manager/src/views/distribution/distributionGradeHistory.vue b/manager/src/views/distribution/distributionGradeHistory.vue
index aa9e23d29..1835d898b 100644
--- a/manager/src/views/distribution/distributionGradeHistory.vue
+++ b/manager/src/views/distribution/distributionGradeHistory.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="110px"
@@ -101,115 +101,114 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { getDistributionGradeHistoryPage, getDistributionGrades } from "@/api/distribution";
 
-export default {
-  name: "distributionGradeHistory",
-  data() {
-    return {
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        memberName: "",
-        distributionMobile: "",
-        gradeId: "",
-        upgradeTimeStart: "",
-        upgradeTimeEnd: "",
-      },
-      upgradeTimeRange: [],
-      gradeOptions: [],
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.loadGradeOptions();
-    this.getDataList();
-  },
-  methods: {
-    loadGradeOptions() {
-      getDistributionGrades()
-        .then((res) => {
-          if (!res.success) {
-            return;
-          }
-          this.gradeOptions = (res.result || [])
-            .slice()
-            .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
-            .map((item) => ({
-              value: String(item.sortOrder),
-              label: item.gradeName || `等级值${item.sortOrder}`,
-            }));
-        });
-    },
-    formatGrade(name, gradeId) {
-      if (name) {
-        return name;
+defineOptions({ name: "distributionGradeHistory" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+
+const loading = ref(false);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  memberName: "",
+  distributionMobile: "",
+  gradeId: "",
+  upgradeTimeStart: "",
+  upgradeTimeEnd: "",
+});
+const upgradeTimeRange = ref([]);
+const gradeOptions = ref([]);
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  loadGradeOptions();
+  getDataList();
+});
+
+function loadGradeOptions() {
+  getDistributionGrades()
+    .then((res) => {
+      if (!res.success) {
+        return;
       }
-      if (gradeId) {
-        return `等级值${gradeId}`;
+      gradeOptions.value = (res.result || [])
+        .slice()
+        .sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0))
+        .map((item) => ({
+          value: String(item.sortOrder),
+          label: item.gradeName || `等级值${item.sortOrder}`,
+        }));
+    });
+}
+function formatGrade(name, gradeId) {
+  if (name) {
+    return name;
+  }
+  if (gradeId) {
+    return `等级值${gradeId}`;
+  }
+  return "-";
+}
+function formatRate(value) {
+  const num = Number(value);
+  if (!Number.isFinite(num)) {
+    return "-";
+  }
+  return `${(num * 100).toFixed(2).replace(/\.?0+$/, "") || "0"}%`;
+}
+function applyUpgradeTimeRange() {
+  if (upgradeTimeRange.value && upgradeTimeRange.value.length === 2) {
+    searchForm.value.upgradeTimeStart = `${upgradeTimeRange.value[0]} 00:00:00`;
+    searchForm.value.upgradeTimeEnd = `${upgradeTimeRange.value[1]} 23:59:59`;
+  } else {
+    searchForm.value.upgradeTimeStart = "";
+    searchForm.value.upgradeTimeEnd = "";
+  }
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    memberName: "",
+    distributionMobile: "",
+    gradeId: "",
+    upgradeTimeStart: "",
+    upgradeTimeEnd: "",
+  };
+  upgradeTimeRange.value = [];
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  applyUpgradeTimeRange();
+  loading.value = true;
+  getDistributionGradeHistoryPage(searchForm.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      return "-";
-    },
-    formatRate(value) {
-      const num = Number(value);
-      if (!Number.isFinite(num)) {
-        return "-";
-      }
-      return `${(num * 100).toFixed(2).replace(/\.?0+$/, "") || "0"}%`;
-    },
-    applyUpgradeTimeRange() {
-      if (this.upgradeTimeRange && this.upgradeTimeRange.length === 2) {
-        this.searchForm.upgradeTimeStart = `${this.upgradeTimeRange[0]} 00:00:00`;
-        this.searchForm.upgradeTimeEnd = `${this.upgradeTimeRange[1]} 23:59:59`;
-      } else {
-        this.searchForm.upgradeTimeStart = "";
-        this.searchForm.upgradeTimeEnd = "";
-      }
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        memberName: "",
-        distributionMobile: "",
-        gradeId: "",
-        upgradeTimeStart: "",
-        upgradeTimeEnd: "",
-      };
-      this.upgradeTimeRange = [];
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.applyUpgradeTimeRange();
-      this.loading = true;
-      getDistributionGradeHistoryPage(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/distribution/distributionImportRecord.vue b/manager/src/views/distribution/distributionImportRecord.vue
index 4f5618392..c7911bd59 100644
--- a/manager/src/views/distribution/distributionImportRecord.vue
+++ b/manager/src/views/distribution/distributionImportRecord.vue
@@ -43,85 +43,82 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import {
   downloadDistributionImportFailItems,
   getDistributionImportBatches,
 } from "@/api/distribution";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "distributionImportRecord",
-  data() {
-    return {
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    statusLabel(status) {
-      const map = {
-        PROCESSING: "处理中",
-        DONE: "已完成",
-        FAILED: "失败",
-      };
-      return map[status] || status || "-";
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionImportBatches(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
+defineOptions({ name: "distributionImportRecord" });
+
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  getDataList();
+});
+
+function statusLabel(status) {
+  const map = {
+    PROCESSING: "处理中",
+    DONE: "已完成",
+    FAILED: "失败",
+  };
+  return map[status] || status || "-";
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getDistributionImportBatches(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function downloadFailList(row) {
+  if (!row || !row.failCount) return;
+  downloadDistributionImportFailItems(row.id)
+    .then((blob) => {
+      if (blob && blob.type && blob.type.includes("application/json")) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          try {
+            const result = JSON.parse(reader.result);
+            Message.error(result.message || "下载失败");
+          } catch (e) {
+            Message.error("下载失败");
           }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    downloadFailList(row) {
-      if (!row || !row.failCount) return;
-      downloadDistributionImportFailItems(row.id)
-        .then((blob) => {
-          if (blob && blob.type && blob.type.includes("application/json")) {
-            const reader = new FileReader();
-            reader.onload = () => {
-              try {
-                const result = JSON.parse(reader.result);
-                this.$Message.error(result.message || "下载失败");
-              } catch (e) {
-                this.$Message.error("下载失败");
-              }
-            };
-            reader.readAsText(blob);
-            return;
-          }
-          downloadBlob(blob, `分销员导入失败列表_${row.id}.xlsx`);
-          this.$Message.success("下载成功");
-        })
-        .catch(() => {
-          this.$Message.error("下载失败");
-        });
-    },
-  },
-};
+        };
+        reader.readAsText(blob);
+        return;
+      }
+      downloadBlob(blob, `分销员导入失败列表_${row.id}.xlsx`);
+      Message.success("下载成功");
+    })
+    .catch(() => {
+      Message.error("下载失败");
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/distribution/distributionOrder.vue b/manager/src/views/distribution/distributionOrder.vue
index 6c263e09c..ee1f3f865 100644
--- a/manager/src/views/distribution/distributionOrder.vue
+++ b/manager/src/views/distribution/distributionOrder.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -159,135 +159,140 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { getDistributionOrder } from "@/api/distribution";
 import { orderStatusList } from "./dataJson";
 import { getShopListData } from "@/api/shops";
+import { unixToDate, unitPrice } from "@/utils/filters";
 
-export default {
-  name: "distributionOrder",
-  data() {
-    return {
-      timeRange: [],
-      orderStatusList,
-      shopList: [],
-      distributionId: this.$route.query.id,
-      currentStatus: "ALL",
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        distributionOrderStatus: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  watch: {
-    $route(e) {
-      this.distributionId = e.query.id ? e.query.id : undefined;
-      this.getDataList();
-    },
-  },
-  methods: {
-    init() {
-      this.getDataList();
-      this.getShopList();
-    },
-    onStatusTabChange(name) {
-      this.currentStatus = name;
-      this.searchForm.distributionOrderStatus = name === "ALL" ? "" : name;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      if (this.distributionId) {
-        this.searchForm.distributionId = this.distributionId;
-      } else {
-        delete this.searchForm.distributionId;
-      }
-      this.loading = true;
-      if (this.timeRange && this.timeRange[0] && this.timeRange[1]) {
-        const startTime = new Date(this.timeRange[0]).getTime();
-        const endTime = new Date(this.timeRange[1]).getTime();
-        this.searchForm.startTime = this.$filters.unixToDate(startTime / 1000);
-        this.searchForm.endTime = this.$filters.unixToDate(endTime / 1000);
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getDistributionOrder(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getShopList(val) {
-      const params = {
-        pageNumber: 1,
-        pageSize: 20,
-        storeName: val || "",
-      };
-      getShopListData(params).then((res) => {
-        this.shopList = res.result.records;
-      });
-    },
-    searchChange(val) {
-      this.getShopList(val);
-    },
-    filterStatus(status) {
-      const arr = [
-        { status: "NO_COMPLETED", title: "未完成" },
-        { status: "COMPLETE", title: "完成" },
-        { status: "REFUND", title: "退款" },
-      ];
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].status === status) {
-          return arr[i].title;
-        }
-      }
-      return "未完成";
-    },
-    filterStatusTagType(status) {
-      const arr = [
-        { status: "NO_COMPLETED", type: "warning" },
-        { status: "COMPLETE", type: "success" },
-        { status: "REFUND", type: "danger" },
-      ];
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].status === status) {
-          return arr[i].type;
-        }
-      }
-      return "warning";
-    },
-    formatCommission(amount) {
-      if (amount === null || amount === undefined || amount === "") {
-        return "-";
-      }
-      return this.$filters.unitPrice(amount, "￥");
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "distributionOrder" });
+
+const route = useRoute();
+
+// 模板 el-form / el-table 的 ref（原 ref="searchForm" 与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const timeRange = ref([]);
+const shopList = ref([]);
+const distributionId = ref(route.query.id);
+const currentStatus = ref("ALL");
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  distributionOrderStatus: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+watch(
+  () => route.query,
+  (query) => {
+    distributionId.value = query.id ? query.id : undefined;
+    getDataList();
+  }
+);
+
+function init() {
+  getDataList();
+  getShopList();
+}
+function onStatusTabChange(name) {
+  currentStatus.value = name;
+  searchForm.distributionOrderStatus = name === "ALL" ? "" : name;
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  if (distributionId.value) {
+    searchForm.distributionId = distributionId.value;
+  } else {
+    delete searchForm.distributionId;
+  }
+  loading.value = true;
+  if (timeRange.value && timeRange.value[0] && timeRange.value[1]) {
+    const startTime = new Date(timeRange.value[0]).getTime();
+    const endTime = new Date(timeRange.value[1]).getTime();
+    searchForm.startTime = unixToDate(startTime / 1000);
+    searchForm.endTime = unixToDate(endTime / 1000);
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getDistributionOrder(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getShopList(val) {
+  const params = {
+    pageNumber: 1,
+    pageSize: 20,
+    storeName: val || "",
+  };
+  getShopListData(params).then((res) => {
+    shopList.value = res.result.records;
+  });
+}
+function searchChange(val) {
+  getShopList(val);
+}
+function filterStatus(status) {
+  const arr = [
+    { status: "NO_COMPLETED", title: "未完成" },
+    { status: "COMPLETE", title: "完成" },
+    { status: "REFUND", title: "退款" },
+  ];
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].status === status) {
+      return arr[i].title;
+    }
+  }
+  return "未完成";
+}
+function filterStatusTagType(status) {
+  const arr = [
+    { status: "NO_COMPLETED", type: "warning" },
+    { status: "COMPLETE", type: "success" },
+    { status: "REFUND", type: "danger" },
+  ];
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].status === status) {
+      return arr[i].type;
+    }
+  }
+  return "warning";
+}
+function formatCommission(amount) {
+  if (amount === null || amount === undefined || amount === "") {
+    return "-";
+  }
+  return unitPrice(amount, "￥");
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/distribution/distributionRecruit.vue b/manager/src/views/distribution/distributionRecruit.vue
index 1d2289c7c..4994fe080 100644
--- a/manager/src/views/distribution/distributionRecruit.vue
+++ b/manager/src/views/distribution/distributionRecruit.vue
@@ -177,19 +177,23 @@
         <el-button type="primary" :loading="planSaveLoading" @click="savePlan">保存</el-button>
       </el-form-item>
     </el-form>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData" />
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import {
   getCurrentRecruitPlan,
   saveRecruitPlan,
 } from "@/api/distribution";
+import { Message } from "@/utils/message";
 import uploadPicInput from "@/components/lili/upload-pic-input";
-import tinymec from "@/components/editor/index.vue";
+import editor from "@/components/editor/index.vue";
 import skuSelect from "@/components/lili-dialog";
 
+defineOptions({ name: "distributionRecruit" });
+
 const MAX_RECRUIT_FIELDS = 5;
 
 const FIELD_TYPE_OPTIONS = [
@@ -231,228 +235,239 @@ const buildDefaultField = () => ({
   placeholder: "",
 });
 
-export default {
-  name: "distributionRecruit",
-  components: { uploadPicInput, editor: tinymec, skuSelect },
-  data() {
-    return {
-      planSaveLoading: false,
-      editorReady: true,
-      planForm: buildDefaultPlan(),
-      recruitFields: [],
-      recruitGoodsList: [],
-      fieldTypeOptions: FIELD_TYPE_OPTIONS,
-    };
-  },
-  mounted() {
-    this.loadPlan();
-  },
-  watch: {
-    "planForm.applyMode"(value) {
-      if (value !== "MANUAL") {
-        this.planForm.requireApplyInfo = false;
-        this.recruitFields = [];
-      }
-    },
-    "planForm.requireApplyInfo"(value) {
-      if (!value) {
-        this.recruitFields = [];
-      }
-    },
-    "planForm.joinConditionType"(value) {
-      if (value !== "CONDITIONAL") {
-        this.planForm.requirePurchaseGoods = false;
-        this.planForm.requireSelfPurchaseAmount = false;
-        this.planForm.requireConsumeCount = false;
-        this.recruitGoodsList = [];
-      }
-    },
-    "planForm.requirePurchaseGoods"(value) {
-      if (!value) {
-        this.recruitGoodsList = [];
-      }
-    },
-    "planForm.requireSelfPurchaseAmount"(value) {
-      if (value && (!this.planForm.minSelfPurchaseAmount || this.planForm.minSelfPurchaseAmount < 0.01)) {
-        this.planForm.minSelfPurchaseAmount = 0.01;
-      }
-    },
-    "planForm.requireConsumeCount"(value) {
-      if (value && (!this.planForm.minConsumeCount || this.planForm.minConsumeCount < 1)) {
-        this.planForm.minConsumeCount = 1;
-      }
-    },
-  },
-  methods: {
-    normalizeFields(fields) {
-      if (!fields || !fields.length) {
-        return [];
-      }
-      return fields.map((item, index) => ({
-        ...buildDefaultField(),
-        ...item,
-        _key: item._key || item.id || `field_${index}_${Date.now()}`,
-        required: item.required !== false,
-      }));
-    },
-    addRecruitField() {
-      if (this.recruitFields.length >= MAX_RECRUIT_FIELDS) {
-        this.$Message.warning("最多添加5个字段");
-        return;
-      }
-      this.recruitFields.push(buildDefaultField());
-    },
-    removeRecruitField(index) {
-      this.recruitFields.splice(index, 1);
-    },
-    validateRecruitFields() {
-      if (!this.planForm.requireApplyInfo) {
-        return true;
-      }
-      if (!this.recruitFields.length) {
-        this.$Message.warning("请至少添加一个申请字段");
-        return false;
-      }
-      for (let i = 0; i < this.recruitFields.length; i++) {
-        const field = this.recruitFields[i];
-        if (!field.fieldName || !field.fieldName.trim()) {
-          this.$Message.warning(`请填写字段${i + 1}名称`);
-          return false;
+const skuSelectRef = ref(null);
+
+const planSaveLoading = ref(false);
+const editorReady = ref(true);
+const planForm = ref(buildDefaultPlan());
+const recruitFields = ref([]);
+const recruitGoodsList = ref([]);
+const fieldTypeOptions = ref(FIELD_TYPE_OPTIONS);
+
+onMounted(() => {
+  loadPlan();
+});
+
+watch(
+  () => planForm.value.applyMode,
+  (value) => {
+    if (value !== "MANUAL") {
+      planForm.value.requireApplyInfo = false;
+      recruitFields.value = [];
+    }
+  }
+);
+watch(
+  () => planForm.value.requireApplyInfo,
+  (value) => {
+    if (!value) {
+      recruitFields.value = [];
+    }
+  }
+);
+watch(
+  () => planForm.value.joinConditionType,
+  (value) => {
+    if (value !== "CONDITIONAL") {
+      planForm.value.requirePurchaseGoods = false;
+      planForm.value.requireSelfPurchaseAmount = false;
+      planForm.value.requireConsumeCount = false;
+      recruitGoodsList.value = [];
+    }
+  }
+);
+watch(
+  () => planForm.value.requirePurchaseGoods,
+  (value) => {
+    if (!value) {
+      recruitGoodsList.value = [];
+    }
+  }
+);
+watch(
+  () => planForm.value.requireSelfPurchaseAmount,
+  (value) => {
+    if (value && (!planForm.value.minSelfPurchaseAmount || planForm.value.minSelfPurchaseAmount < 0.01)) {
+      planForm.value.minSelfPurchaseAmount = 0.01;
+    }
+  }
+);
+watch(
+  () => planForm.value.requireConsumeCount,
+  (value) => {
+    if (value && (!planForm.value.minConsumeCount || planForm.value.minConsumeCount < 1)) {
+      planForm.value.minConsumeCount = 1;
+    }
+  }
+);
+
+function normalizeFields(fields) {
+  if (!fields || !fields.length) {
+    return [];
+  }
+  return fields.map((item, index) => ({
+    ...buildDefaultField(),
+    ...item,
+    _key: item._key || item.id || `field_${index}_${Date.now()}`,
+    required: item.required !== false,
+  }));
+}
+function addRecruitField() {
+  if (recruitFields.value.length >= MAX_RECRUIT_FIELDS) {
+    Message.warning("最多添加5个字段");
+    return;
+  }
+  recruitFields.value.push(buildDefaultField());
+}
+function removeRecruitField(index) {
+  recruitFields.value.splice(index, 1);
+}
+function validateRecruitFields() {
+  if (!planForm.value.requireApplyInfo) {
+    return true;
+  }
+  if (!recruitFields.value.length) {
+    Message.warning("请至少添加一个申请字段");
+    return false;
+  }
+  for (let i = 0; i < recruitFields.value.length; i++) {
+    const field = recruitFields.value[i];
+    if (!field.fieldName || !field.fieldName.trim()) {
+      Message.warning(`请填写字段${i + 1}名称`);
+      return false;
+    }
+  }
+  return true;
+}
+function validateJoinConditions() {
+  if (planForm.value.joinConditionType !== "CONDITIONAL") {
+    return true;
+  }
+  const {
+    requirePurchaseGoods,
+    requireSelfPurchaseAmount,
+    requireConsumeCount,
+  } = planForm.value;
+  if (!requirePurchaseGoods && !requireSelfPurchaseAmount && !requireConsumeCount) {
+    Message.warning("请至少选择一个加入条件");
+    return false;
+  }
+  if (requirePurchaseGoods && !recruitGoodsList.value.length) {
+    Message.warning("请选择指定商品");
+    return false;
+  }
+  if (requireSelfPurchaseAmount && planForm.value.minSelfPurchaseAmount < 0.01) {
+    Message.warning("自购金额最低设置为0.01元");
+    return false;
+  }
+  if (requireConsumeCount && planForm.value.minConsumeCount < 1) {
+    Message.warning("消费笔数最低设置为1笔");
+    return false;
+  }
+  return true;
+}
+function openGoodsSelect() {
+  skuSelectRef.value.open("goods");
+  const data = recruitGoodsList.value.map((item) => ({
+    id: item.skuId,
+    goodsId: item.goodsId,
+    goodsName: item.goodsName,
+    sn: item.sn,
+    simpleSpecs: item.simpleSpecs,
+    price: item.price,
+    quantity: item.quantity,
+    small: item.thumbnail,
+  }));
+  skuSelectRef.value.goodsData = data;
+}
+function selectedGoodsData(items) {
+  recruitGoodsList.value = (items || []).map((item) => ({
+    skuId: item.id,
+    goodsId: item.goodsId,
+    goodsName: item.goodsName,
+    sn: item.sn || "",
+    simpleSpecs: item.simpleSpecs || "",
+    price: item.price,
+    quantity: item.quantity,
+    thumbnail: item.small || item.thumbnail || "",
+  }));
+}
+function removeRecruitGoods(index) {
+  recruitGoodsList.value.splice(index, 1);
+}
+function buildSavePayload() {
+  const fields = planForm.value.requireApplyInfo
+    ? recruitFields.value.map((field, index) => ({
+        id: field.id,
+        fieldName: field.fieldName.trim(),
+        fieldType: field.fieldType,
+        required: field.required !== false,
+        placeholder: field.placeholder || "",
+        sortOrder: index,
+      }))
+    : [];
+  return {
+    ...planForm.value,
+    id: planForm.value.id || undefined,
+    publishStatus: true,
+    posterEnabled: !!(planForm.value.posterBackground && planForm.value.posterBackground.trim()),
+    recruitGoods: planForm.value.requirePurchaseGoods
+      ? recruitGoodsList.value.map((item) => ({
+          goodsId: item.goodsId,
+          skuId: item.skuId,
+          goodsName: item.goodsName,
+          sn: item.sn,
+          simpleSpecs: item.simpleSpecs,
+          thumbnail: item.thumbnail,
+          price: item.price,
+        }))
+      : [],
+    goodsIds: planForm.value.requirePurchaseGoods
+      ? recruitGoodsList.value.map((item) => item.goodsId)
+      : [],
+    fields,
+  };
+}
+function applyPlanResult(result) {
+  planForm.value = { ...buildDefaultPlan(), ...result };
+  recruitFields.value = normalizeFields(result.fields);
+  recruitGoodsList.value = (result.recruitGoods || []).map((item) => ({
+    goodsId: item.goodsId,
+    skuId: item.skuId,
+    goodsName: item.goodsName,
+    sn: item.sn || "",
+    simpleSpecs: item.simpleSpecs || "",
+    thumbnail: item.thumbnail,
+    price: item.price,
+  }));
+}
+function loadPlan() {
+  getCurrentRecruitPlan().then((res) => {
+    if (res.success && res.result) {
+      applyPlanResult(res.result);
+    }
+  });
+}
+function savePlan() {
+  if (!validateRecruitFields() || !validateJoinConditions()) {
+    return;
+  }
+  planSaveLoading.value = true;
+  saveRecruitPlan(buildSavePayload())
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+        if (res.result) {
+          applyPlanResult(res.result);
+        } else {
+          loadPlan();
         }
       }
-      return true;
-    },
-    validateJoinConditions() {
-      if (this.planForm.joinConditionType !== "CONDITIONAL") {
-        return true;
-      }
-      const {
-        requirePurchaseGoods,
-        requireSelfPurchaseAmount,
-        requireConsumeCount,
-      } = this.planForm;
-      if (!requirePurchaseGoods && !requireSelfPurchaseAmount && !requireConsumeCount) {
-        this.$Message.warning("请至少选择一个加入条件");
-        return false;
-      }
-      if (requirePurchaseGoods && !this.recruitGoodsList.length) {
-        this.$Message.warning("请选择指定商品");
-        return false;
-      }
-      if (requireSelfPurchaseAmount && this.planForm.minSelfPurchaseAmount < 0.01) {
-        this.$Message.warning("自购金额最低设置为0.01元");
-        return false;
-      }
-      if (requireConsumeCount && this.planForm.minConsumeCount < 1) {
-        this.$Message.warning("消费笔数最低设置为1笔");
-        return false;
-      }
-      return true;
-    },
-    openGoodsSelect() {
-      this.$refs.skuSelect.open("goods");
-      const data = this.recruitGoodsList.map((item) => ({
-        id: item.skuId,
-        goodsId: item.goodsId,
-        goodsName: item.goodsName,
-        sn: item.sn,
-        simpleSpecs: item.simpleSpecs,
-        price: item.price,
-        quantity: item.quantity,
-        small: item.thumbnail,
-      }));
-      this.$refs.skuSelect.goodsData = data;
-    },
-    selectedGoodsData(items) {
-      this.recruitGoodsList = (items || []).map((item) => ({
-        skuId: item.id,
-        goodsId: item.goodsId,
-        goodsName: item.goodsName,
-        sn: item.sn || "",
-        simpleSpecs: item.simpleSpecs || "",
-        price: item.price,
-        quantity: item.quantity,
-        thumbnail: item.small || item.thumbnail || "",
-      }));
-    },
-    removeRecruitGoods(index) {
-      this.recruitGoodsList.splice(index, 1);
-    },
-    buildSavePayload() {
-      const fields = this.planForm.requireApplyInfo
-        ? this.recruitFields.map((field, index) => ({
-            id: field.id,
-            fieldName: field.fieldName.trim(),
-            fieldType: field.fieldType,
-            required: field.required !== false,
-            placeholder: field.placeholder || "",
-            sortOrder: index,
-          }))
-        : [];
-      return {
-        ...this.planForm,
-        id: this.planForm.id || undefined,
-        publishStatus: true,
-        posterEnabled: !!(this.planForm.posterBackground && this.planForm.posterBackground.trim()),
-        recruitGoods: this.planForm.requirePurchaseGoods
-          ? this.recruitGoodsList.map((item) => ({
-              goodsId: item.goodsId,
-              skuId: item.skuId,
-              goodsName: item.goodsName,
-              sn: item.sn,
-              simpleSpecs: item.simpleSpecs,
-              thumbnail: item.thumbnail,
-              price: item.price,
-            }))
-          : [],
-        goodsIds: this.planForm.requirePurchaseGoods
-          ? this.recruitGoodsList.map((item) => item.goodsId)
-          : [],
-        fields,
-      };
-    },
-    applyPlanResult(result) {
-      this.planForm = { ...buildDefaultPlan(), ...result };
-      this.recruitFields = this.normalizeFields(result.fields);
-      this.recruitGoodsList = (result.recruitGoods || []).map((item) => ({
-        goodsId: item.goodsId,
-        skuId: item.skuId,
-        goodsName: item.goodsName,
-        sn: item.sn || "",
-        simpleSpecs: item.simpleSpecs || "",
-        thumbnail: item.thumbnail,
-        price: item.price,
-      }));
-    },
-    loadPlan() {
-      getCurrentRecruitPlan().then((res) => {
-        if (res.success && res.result) {
-          this.applyPlanResult(res.result);
-        }
-      });
-    },
-    savePlan() {
-      if (!this.validateRecruitFields() || !this.validateJoinConditions()) {
-        return;
-      }
-      this.planSaveLoading = true;
-      saveRecruitPlan(this.buildSavePayload())
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功");
-            if (res.result) {
-              this.applyPlanResult(res.result);
-            } else {
-              this.loadPlan();
-            }
-          }
-        })
-        .finally(() => {
-          this.planSaveLoading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      planSaveLoading.value = false;
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/distribution/distributionRecruitSetting.vue b/manager/src/views/distribution/distributionRecruitSetting.vue
new file mode 100644
index 000000000..9d0d3b109
--- /dev/null
+++ b/manager/src/views/distribution/distributionRecruitSetting.vue
@@ -0,0 +1,91 @@
+<template>
+  <div style="background-color: #fff">
+    <el-form ref="formRef" :model="form" label-width="160px" style="padding: 10px">
+      <el-divider content-position="left">招募计划</el-divider>
+      <el-form-item label="开启招募">
+        <el-switch v-model="form.recruitOpen" />
+      </el-form-item>
+      <el-form-item label="申请方式">
+        <el-radio-group v-model="form.applyMode">
+          <el-radio value="MANUAL_APPLY">手动申请</el-radio>
+          <el-radio value="AUTO_APPLY_WHEN_QUALIFIED">满足条件自动申请</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="审核方式">
+        <el-radio-group v-model="form.auditMode">
+          <el-radio value="MANUAL_AUDIT">人工审核</el-radio>
+          <el-radio value="AUTO_AUDIT">自动审核</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="开启加入门槛">
+        <el-switch v-model="form.thresholdEnabled" />
+      </el-form-item>
+      <template v-if="form.thresholdEnabled">
+        <el-form-item label="门槛组合">
+          <el-radio-group v-model="form.thresholdMatch">
+            <el-radio value="ALL">需同时满足</el-radio>
+            <el-radio value="ANY">满足其一</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="最低消费金额">
+          <el-input-number v-model="form.consumeAmountMin" :min="0" :precision="2" />
+        </el-form-item>
+        <el-form-item label="最低消费笔数">
+          <el-input-number v-model="form.consumeCountMin" :min="0" />
+        </el-form-item>
+        <el-form-item label="需购买指定商品">
+          <el-switch v-model="form.requireBuyGoods" />
+        </el-form-item>
+      </template>
+      <el-form-item label="招募页标题">
+        <el-input v-model="form.recruitPageTitle" />
+      </el-form-item>
+      <el-form-item label="招募页说明">
+        <el-input v-model="form.recruitPageDesc" type="textarea" />
+      </el-form-item>
+      <el-form-item label="展示招募入口">
+        <el-switch v-model="form.showRecruitEntry" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submit">保存</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { setSetting, getSetting } from "@/api/index";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "distributionRecruitSetting" });
+
+const formRef = ref(null);
+const form = ref({
+  recruitOpen: true,
+  applyMode: "MANUAL_APPLY",
+  auditMode: "MANUAL_AUDIT",
+  thresholdEnabled: false,
+  thresholdMatch: "ALL",
+  consumeAmountMin: 0,
+  consumeCountMin: 0,
+  requireBuyGoods: false,
+  recruitPageTitle: "成为分销员",
+  recruitPageDesc: "分享商品赚取佣金",
+  showRecruitEntry: true,
+});
+
+onMounted(() => {
+  getSetting("DISTRIBUTION_RECRUIT_SETTING").then((res) => {
+    if (res.success && res.result) {
+      form.value = { ...form.value, ...res.result };
+    }
+  });
+});
+
+function submit() {
+  setSetting("DISTRIBUTION_RECRUIT_SETTING", form.value).then((res) => {
+    if (res.success) Message.success("保存成功");
+  });
+}
+</script>
diff --git a/manager/src/views/distribution/distributionSetting.vue b/manager/src/views/distribution/distributionSetting.vue
index 2e8754a13..e326327f4 100644
--- a/manager/src/views/distribution/distributionSetting.vue
+++ b/manager/src/views/distribution/distributionSetting.vue
@@ -4,7 +4,7 @@
       <el-tabs v-model="activeTab" class="setting-tabs">
         <el-tab-pane label="基础设置" name="base">
           <el-form
-            ref="form"
+            ref="formRef"
             :model="form"
             :rules="formRule"
             label-width="180px"
@@ -69,7 +69,7 @@
 
         <el-tab-pane label="客户关系" name="customer">
           <el-form
-            ref="customerForm"
+            ref="customerFormRef"
             :model="customerForm"
             label-width="180px"
             label-position="right"
@@ -116,7 +116,7 @@
 
         <el-tab-pane label="结算方案" name="settlement">
           <el-form
-            ref="settlementForm"
+            ref="settlementFormRef"
             :model="settlementForm"
             label-width="180px"
             label-position="right"
@@ -234,7 +234,7 @@
 
         <el-tab-pane label="商品分销设置" name="featured">
           <el-form
-            ref="featuredForm"
+            ref="featuredFormRef"
             :model="featuredForm"
             label-width="220px"
             label-position="right"
@@ -428,7 +428,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, watch, onMounted, nextTick } from "vue";
 import { setSetting, getSetting } from "@/api/index";
 import {
   getDistributionCustomerSetting,
@@ -445,6 +446,7 @@ import {
 } from "@/api/distribution";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import { regular } from "@/utils";
+import { Message } from "@/utils/message";
 
 const DEFAULT_FORM = {
   isOpen: true,
@@ -485,430 +487,426 @@ const DEFAULT_SORT_OPTIONS = [
   { value: "LATEST_LISTING", label: "商品上架越晚越靠前" },
 ];
 
-export default {
-  name: "distributionSetting",
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      activeTab: "base",
-      saving: {
-        base: false,
-        customer: false,
-        settlement: false,
-        featured: false,
-        poster: false,
-        inviteCard: false,
-      },
-      form: { ...DEFAULT_FORM },
-      formRule: {
-        isOpen: [regular.REQUIRED],
-        distributorName: [regular.REQUIRED, regular.VARCHAR20],
-      },
-      customerForm: {
-        bindMode: "SHORT_TERM",
-        permanentBindMode: "PAID_WITHIN_DAYS",
-        permanentPaidDays: 1,
-        shortTermBindDays: 7,
-      },
-      settlementForm: {
-        selfPurchaseCommissionMode: "SELF",
-      },
-      posterForm: { ...DEFAULT_POSTER_FORM },
-      inviteCardForm: { ...DEFAULT_INVITE_CARD_FORM },
-      featuredForm: { ...DEFAULT_FEATURED_FORM },
-      defaultSortOptions: DEFAULT_SORT_OPTIONS,
-      featuredCustomGoods: [],
-      featuredPickerVisible: false,
-      featuredPickerLoading: false,
-      featuredPickerList: [],
-      featuredPickerTotal: 0,
-      featuredPickerDraft: [],
-      featuredPickerSelection: [],
-      syncingFeaturedPickerSelection: false,
-      featuredPickerSearch: {
-        goodsName: "",
-        authStatus: "PASS",
-        pageNumber: 1,
-        pageSize: 20,
-      },
+defineOptions({ name: "distributionSetting" });
+
+const formRef = ref(null);
+const featuredPickerTable = ref(null);
+
+const activeTab = ref("base");
+const saving = reactive({
+  base: false,
+  customer: false,
+  settlement: false,
+  featured: false,
+  poster: false,
+  inviteCard: false,
+});
+const form = ref({ ...DEFAULT_FORM });
+const formRule = reactive({
+  isOpen: [regular.REQUIRED],
+  distributorName: [regular.REQUIRED, regular.VARCHAR20],
+});
+const customerForm = ref({
+  bindMode: "SHORT_TERM",
+  permanentBindMode: "PAID_WITHIN_DAYS",
+  permanentPaidDays: 1,
+  shortTermBindDays: 7,
+});
+const settlementForm = ref({
+  selfPurchaseCommissionMode: "SELF",
+});
+const posterForm = ref({ ...DEFAULT_POSTER_FORM });
+const inviteCardForm = ref({ ...DEFAULT_INVITE_CARD_FORM });
+const featuredForm = ref({ ...DEFAULT_FEATURED_FORM });
+const defaultSortOptions = ref(DEFAULT_SORT_OPTIONS);
+const featuredCustomGoods = ref([]);
+const featuredPickerVisible = ref(false);
+const featuredPickerLoading = ref(false);
+const featuredPickerList = ref([]);
+const featuredPickerTotal = ref(0);
+const featuredPickerDraft = ref([]);
+const featuredPickerSelection = ref([]);
+const syncingFeaturedPickerSelection = ref(false);
+const featuredPickerSearch = reactive({
+  goodsName: "",
+  authStatus: "PASS",
+  pageNumber: 1,
+  pageSize: 20,
+});
+
+const featuredGoodsLimit = computed(() => {
+  return featuredForm.value.displayCount === 10 ? 10 : 5;
+});
+const featuredGoodsOverLimit = computed(() => {
+  return featuredForm.value.sourceMode === "CUSTOM" && featuredCustomGoods.value.length > featuredGoodsLimit.value;
+});
+const featuredDisplayCountDesc = computed(() => {
+  if (featuredForm.value.sourceMode === "CUSTOM") {
+    return `最多选择 ${featuredGoodsLimit.value} 个，分销员端按顺序展示。`;
+  }
+  return `分销员端展示前 ${featuredGoodsLimit.value} 个。`;
+});
+
+watch(
+  () => customerForm.value.permanentBindMode,
+  (value) => {
+    if (value === "PAID_WITHIN_DAYS") {
+      normalizePermanentPaidDays();
+    }
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  loadBaseSetting();
+  loadFeaturedSetting();
+  loadPosterSetting();
+  loadInviteCardSetting();
+  loadCustomerSetting();
+  loadSettlementSetting();
+}
+function loadBaseSetting() {
+  getSetting("DISTRIBUTION_SETTING").then((res) => {
+    if (!res.success || !res.result) {
+      return;
+    }
+    const result = res.result;
+    form.value = {
+      ...DEFAULT_FORM,
+      ...result,
+      distributorName: result.distributorName || "分销员",
+      parentAttributionMode: result.parentAttributionMode || DEFAULT_FORM.parentAttributionMode,
     };
-  },
-  computed: {
-    featuredGoodsLimit() {
-      return this.featuredForm.displayCount === 10 ? 10 : 5;
-    },
-    featuredGoodsOverLimit() {
-      return this.featuredForm.sourceMode === "CUSTOM" && this.featuredCustomGoods.length > this.featuredGoodsLimit;
-    },
-    featuredDisplayCountDesc() {
-      if (this.featuredForm.sourceMode === "CUSTOM") {
-        return `最多选择 ${this.featuredGoodsLimit} 个，分销员端按顺序展示。`;
+  });
+}
+function loadPosterSetting() {
+  getDistributionPromotionPosterSetting().then((res) => {
+    if (!res.success || !res.result) {
+      return;
+    }
+    const result = res.result;
+    posterForm.value = {
+      ...DEFAULT_POSTER_FORM,
+      memberInfoVisible: result.memberInfoVisible !== false,
+      backgroundImage: result.backgroundImage || "",
+      slogan: result.slogan || DEFAULT_POSTER_FORM.slogan,
+      textColor: result.textColor || DEFAULT_POSTER_FORM.textColor,
+    };
+  });
+}
+function submitPoster() {
+  const slogan = (posterForm.value.slogan || "").trim();
+  if (!slogan) {
+    Message.warning("请填写推荐语");
+    return;
+  }
+  saving.poster = true;
+  putDistributionPromotionPosterSetting({
+    memberInfoVisible: posterForm.value.memberInfoVisible,
+    backgroundImage: (posterForm.value.backgroundImage || "").trim(),
+    slogan,
+    textColor: posterForm.value.textColor || DEFAULT_POSTER_FORM.textColor,
+  })
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        loadPosterSetting();
       }
-      return `分销员端展示前 ${this.featuredGoodsLimit} 个。`;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    "customerForm.permanentBindMode"(value) {
-      if (value === "PAID_WITHIN_DAYS") {
-        this.normalizePermanentPaidDays();
+    })
+    .finally(() => {
+      saving.poster = false;
+    });
+}
+function loadInviteCardSetting() {
+  getDistributionInviteCardSetting().then((res) => {
+    if (!res.success || !res.result) {
+      return;
+    }
+    const result = res.result;
+    inviteCardForm.value = {
+      ...DEFAULT_INVITE_CARD_FORM,
+      memberInfoVisible: result.memberInfoVisible !== false,
+      backgroundImage: result.backgroundImage || "",
+      slogan: result.slogan || DEFAULT_INVITE_CARD_FORM.slogan,
+      textColor: result.textColor || DEFAULT_INVITE_CARD_FORM.textColor,
+    };
+  });
+}
+function submitInviteCard() {
+  const slogan = (inviteCardForm.value.slogan || "").trim();
+  if (!slogan) {
+    Message.warning("请填写推荐语");
+    return;
+  }
+  saving.inviteCard = true;
+  putDistributionInviteCardSetting({
+    memberInfoVisible: inviteCardForm.value.memberInfoVisible,
+    backgroundImage: (inviteCardForm.value.backgroundImage || "").trim(),
+    slogan,
+    textColor: inviteCardForm.value.textColor || DEFAULT_INVITE_CARD_FORM.textColor,
+  })
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        loadInviteCardSetting();
       }
-    },
-  },
-  methods: {
-    init() {
-      this.loadBaseSetting();
-      this.loadFeaturedSetting();
-      this.loadPosterSetting();
-      this.loadInviteCardSetting();
-      this.loadCustomerSetting();
-      this.loadSettlementSetting();
-    },
-    loadBaseSetting() {
-      getSetting("DISTRIBUTION_SETTING").then((res) => {
-        if (!res.success || !res.result) {
-          return;
-        }
-        const result = res.result;
-        this.form = {
-          ...DEFAULT_FORM,
-          ...result,
-          distributorName: result.distributorName || "分销员",
-          parentAttributionMode: result.parentAttributionMode || DEFAULT_FORM.parentAttributionMode,
-        };
+    })
+    .finally(() => {
+      saving.inviteCard = false;
+    });
+}
+function loadFeaturedSetting() {
+  getDistributionFeaturedGoodsSetting().then((res) => {
+    if (!res.success || !res.result) {
+      return;
+    }
+    const result = res.result;
+    featuredForm.value = {
+      ...DEFAULT_FEATURED_FORM,
+      defaultSort: result.defaultSort || DEFAULT_FEATURED_FORM.defaultSort,
+      defaultShareText: result.defaultShareText || "",
+      centerVisible: !!result.centerVisible,
+      showSales: !!result.showSales,
+      sourceMode: result.sourceMode || DEFAULT_FEATURED_FORM.sourceMode,
+      matchRule: result.matchRule || DEFAULT_FEATURED_FORM.matchRule,
+      displayCount: result.displayCount === 10 ? 10 : 5,
+    };
+    featuredCustomGoods.value = Array.isArray(result.customGoods) ? [...result.customGoods] : [];
+  });
+}
+function loadCustomerSetting() {
+  getDistributionCustomerSetting().then((res) => {
+    if (res.success && res.result) {
+      customerForm.value = { ...customerForm.value, ...res.result };
+      normalizePermanentPaidDays();
+    }
+  });
+}
+function normalizePermanentPaidDays() {
+  const days = Number(customerForm.value.permanentPaidDays);
+  if (!Number.isFinite(days) || days < 1) {
+    customerForm.value.permanentPaidDays = 1;
+  } else {
+    customerForm.value.permanentPaidDays = Math.floor(days);
+  }
+}
+function onPermanentPaidDaysChange(value) {
+  if (value == null || value < 1) {
+    customerForm.value.permanentPaidDays = 1;
+  }
+}
+function loadSettlementSetting() {
+  getDistributionSettlementSetting().then((res) => {
+    if (res.success && res.result) {
+      settlementForm.value = { ...settlementForm.value, ...res.result };
+    }
+  });
+}
+function openFeaturedGoodsPicker() {
+  featuredPickerDraft.value = featuredCustomGoods.value.map((item) => ({ ...item }));
+  featuredPickerVisible.value = true;
+}
+function loadFeaturedPickerGoods() {
+  featuredPickerLoading.value = true;
+  syncingFeaturedPickerSelection.value = true;
+  getDistributionGoods({ ...featuredPickerSearch })
+    .then((res) => {
+      if (res.success) {
+        featuredPickerList.value = res.result?.records || [];
+        featuredPickerTotal.value = res.result?.total || 0;
+      }
+    })
+    .finally(() => {
+      featuredPickerLoading.value = false;
+      nextTick(() => {
+        syncFeaturedPickerSelection();
+        nextTick(() => {
+          syncingFeaturedPickerSelection.value = false;
+        });
       });
-    },
-    loadPosterSetting() {
-      getDistributionPromotionPosterSetting().then((res) => {
-        if (!res.success || !res.result) {
-          return;
-        }
-        const result = res.result;
-        this.posterForm = {
-          ...DEFAULT_POSTER_FORM,
-          memberInfoVisible: result.memberInfoVisible !== false,
-          backgroundImage: result.backgroundImage || "",
-          slogan: result.slogan || DEFAULT_POSTER_FORM.slogan,
-          textColor: result.textColor || DEFAULT_POSTER_FORM.textColor,
-        };
-      });
-    },
-    submitPoster() {
-      const slogan = (this.posterForm.slogan || "").trim();
-      if (!slogan) {
-        this.$Message.warning("请填写推荐语");
-        return;
+    });
+}
+function syncFeaturedPickerSelection() {
+  const table = featuredPickerTable.value;
+  if (!table) {
+    return;
+  }
+  const selectedSkuIds = new Set(
+    featuredPickerDraft.value.map((item) => item.skuId).filter(Boolean)
+  );
+  table.clearSelection();
+  featuredPickerList.value.forEach((row) => {
+    if (row.skuId && selectedSkuIds.has(row.skuId)) {
+      table.toggleRowSelection(row, true);
+    }
+  });
+}
+function searchFeaturedPickerGoods() {
+  featuredPickerSearch.pageNumber = 1;
+  loadFeaturedPickerGoods();
+}
+function onFeaturedPickerPageSizeChange() {
+  featuredPickerSearch.pageNumber = 1;
+  loadFeaturedPickerGoods();
+}
+function onFeaturedPickerSelectionChange(selection) {
+  if (syncingFeaturedPickerSelection.value) {
+    return;
+  }
+  const selectedSkuIds = new Set((selection || []).map((item) => item.skuId).filter(Boolean));
+  const currentPageSkuIds = new Set(featuredPickerList.value.map((item) => item.skuId).filter(Boolean));
+  const remaining = featuredPickerDraft.value.filter((item) => {
+    if (!currentPageSkuIds.has(item.skuId)) {
+      return true;
+    }
+    return selectedSkuIds.has(item.skuId);
+  });
+  const remainingSkuIds = new Set(remaining.map((item) => item.skuId));
+  const added = [];
+  (selection || []).forEach((item) => {
+    if (!item.skuId || remainingSkuIds.has(item.skuId)) {
+      return;
+    }
+    remainingSkuIds.add(item.skuId);
+    added.push(toFeaturedGoodsItem(item));
+  });
+  featuredPickerDraft.value = [...remaining, ...added];
+  featuredPickerSelection.value = selection || [];
+}
+function toFeaturedGoodsItem(item) {
+  return {
+    id: item.id,
+    goodsId: item.goodsId,
+    skuId: item.skuId,
+    goodsName: item.goodsName,
+    specs: item.specs,
+    thumbnail: item.thumbnail,
+    price: item.price,
+    commission: item.commission,
+    storeName: item.storeName,
+  };
+}
+function featuredGoodsLimitMessage() {
+  const limit = featuredGoodsLimit.value;
+  return `主推商品数量为${limit}时，最多选择${limit}个自定义商品`;
+}
+function confirmFeaturedPicker() {
+  const next = featuredPickerDraft.value.filter((item) => item.skuId);
+  if (!next.length) {
+    Message.warning("请至少选择一个分销商品");
+    return;
+  }
+  const limit = featuredGoodsLimit.value;
+  if (next.length > limit) {
+    Message.warning(featuredGoodsLimitMessage());
+    return;
+  }
+  featuredCustomGoods.value = next;
+  featuredPickerVisible.value = false;
+  featuredPickerSelection.value = [];
+}
+function removeFeaturedGoods(index) {
+  featuredCustomGoods.value.splice(index, 1);
+}
+function buildFeaturedPayload() {
+  return {
+    defaultSort: featuredForm.value.defaultSort,
+    defaultShareText: (featuredForm.value.defaultShareText || "").trim(),
+    centerVisible: featuredForm.value.centerVisible,
+    showSales: featuredForm.value.showSales,
+    sourceMode: featuredForm.value.sourceMode,
+    matchRule: featuredForm.value.matchRule,
+    displayCount: featuredForm.value.displayCount === 10 ? 10 : 5,
+    skuIds:
+      featuredForm.value.sourceMode === "CUSTOM"
+        ? featuredCustomGoods.value.map((item) => item.skuId).filter(Boolean)
+        : undefined,
+  };
+}
+function submitFeatured() {
+  if (featuredForm.value.sourceMode === "CUSTOM" && !featuredCustomGoods.value.length) {
+    Message.warning("请至少选择一个自定义主推商品");
+    return;
+  }
+  if (featuredGoodsOverLimit.value) {
+    Message.warning(featuredGoodsLimitMessage());
+    return;
+  }
+  saving.featured = true;
+  putDistributionFeaturedGoodsSetting(buildFeaturedPayload())
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        loadFeaturedSetting();
       }
-      this.saving.poster = true;
-      putDistributionPromotionPosterSetting({
-        memberInfoVisible: this.posterForm.memberInfoVisible,
-        backgroundImage: (this.posterForm.backgroundImage || "").trim(),
-        slogan,
-        textColor: this.posterForm.textColor || DEFAULT_POSTER_FORM.textColor,
+    })
+    .finally(() => {
+      saving.featured = false;
+    });
+}
+function buildBasePayload() {
+  return {
+    isOpen: form.value.isOpen,
+    distributorName: (form.value.distributorName || "分销员").trim(),
+    upgradeConditionVisible: form.value.upgradeConditionVisible,
+    parentDistributorVisible: form.value.parentDistributorVisible,
+    parentAttributionMode: form.value.parentAttributionMode,
+  };
+}
+function submitBase() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    saving.base = true;
+    setSetting("DISTRIBUTION_SETTING", buildBasePayload())
+      .then((res) => {
+        if (res.success) {
+          Message.success("操作成功");
+          loadBaseSetting();
+        }
       })
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.loadPosterSetting();
-          }
-        })
-        .finally(() => {
-          this.saving.poster = false;
-        });
-    },
-    loadInviteCardSetting() {
-      getDistributionInviteCardSetting().then((res) => {
-        if (!res.success || !res.result) {
-          return;
-        }
-        const result = res.result;
-        this.inviteCardForm = {
-          ...DEFAULT_INVITE_CARD_FORM,
-          memberInfoVisible: result.memberInfoVisible !== false,
-          backgroundImage: result.backgroundImage || "",
-          slogan: result.slogan || DEFAULT_INVITE_CARD_FORM.slogan,
-          textColor: result.textColor || DEFAULT_INVITE_CARD_FORM.textColor,
-        };
+      .finally(() => {
+        saving.base = false;
       });
-    },
-    submitInviteCard() {
-      const slogan = (this.inviteCardForm.slogan || "").trim();
-      if (!slogan) {
-        this.$Message.warning("请填写推荐语");
-        return;
+  });
+}
+function submitCustomer() {
+  normalizePermanentPaidDays();
+  if (
+    customerForm.value.bindMode === "PERMANENT" &&
+    customerForm.value.permanentBindMode === "PAID_WITHIN_DAYS" &&
+    customerForm.value.permanentPaidDays < 1
+  ) {
+    Message.warning("永久锁客支付天数不能低于1天");
+    return;
+  }
+  saving.customer = true;
+  putDistributionCustomerSetting(customerForm.value)
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        loadCustomerSetting();
       }
-      this.saving.inviteCard = true;
-      putDistributionInviteCardSetting({
-        memberInfoVisible: this.inviteCardForm.memberInfoVisible,
-        backgroundImage: (this.inviteCardForm.backgroundImage || "").trim(),
-        slogan,
-        textColor: this.inviteCardForm.textColor || DEFAULT_INVITE_CARD_FORM.textColor,
-      })
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.loadInviteCardSetting();
-          }
-        })
-        .finally(() => {
-          this.saving.inviteCard = false;
-        });
-    },
-    loadFeaturedSetting() {
-      getDistributionFeaturedGoodsSetting().then((res) => {
-        if (!res.success || !res.result) {
-          return;
-        }
-        const result = res.result;
-        this.featuredForm = {
-          ...DEFAULT_FEATURED_FORM,
-          defaultSort: result.defaultSort || DEFAULT_FEATURED_FORM.defaultSort,
-          defaultShareText: result.defaultShareText || "",
-          centerVisible: !!result.centerVisible,
-          showSales: !!result.showSales,
-          sourceMode: result.sourceMode || DEFAULT_FEATURED_FORM.sourceMode,
-          matchRule: result.matchRule || DEFAULT_FEATURED_FORM.matchRule,
-          displayCount: result.displayCount === 10 ? 10 : 5,
-        };
-        this.featuredCustomGoods = Array.isArray(result.customGoods) ? [...result.customGoods] : [];
-      });
-    },
-    loadCustomerSetting() {
-      getDistributionCustomerSetting().then((res) => {
-        if (res.success && res.result) {
-          this.customerForm = { ...this.customerForm, ...res.result };
-          this.normalizePermanentPaidDays();
-        }
-      });
-    },
-    normalizePermanentPaidDays() {
-      const days = Number(this.customerForm.permanentPaidDays);
-      if (!Number.isFinite(days) || days < 1) {
-        this.customerForm.permanentPaidDays = 1;
-      } else {
-        this.customerForm.permanentPaidDays = Math.floor(days);
+    })
+    .finally(() => {
+      saving.customer = false;
+    });
+}
+function submitSettlement() {
+  saving.settlement = true;
+  putDistributionSettlementSetting(settlementForm.value)
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        loadSettlementSetting();
       }
-    },
-    onPermanentPaidDaysChange(value) {
-      if (value == null || value < 1) {
-        this.customerForm.permanentPaidDays = 1;
-      }
-    },
-    loadSettlementSetting() {
-      getDistributionSettlementSetting().then((res) => {
-        if (res.success && res.result) {
-          this.settlementForm = { ...this.settlementForm, ...res.result };
-        }
-      });
-    },
-    openFeaturedGoodsPicker() {
-      this.featuredPickerDraft = this.featuredCustomGoods.map((item) => ({ ...item }));
-      this.featuredPickerVisible = true;
-    },
-    loadFeaturedPickerGoods() {
-      this.featuredPickerLoading = true;
-      this.syncingFeaturedPickerSelection = true;
-      getDistributionGoods({ ...this.featuredPickerSearch })
-        .then((res) => {
-          if (res.success) {
-            this.featuredPickerList = res.result?.records || [];
-            this.featuredPickerTotal = res.result?.total || 0;
-          }
-        })
-        .finally(() => {
-          this.featuredPickerLoading = false;
-          this.$nextTick(() => {
-            this.syncFeaturedPickerSelection();
-            this.$nextTick(() => {
-              this.syncingFeaturedPickerSelection = false;
-            });
-          });
-        });
-    },
-    syncFeaturedPickerSelection() {
-      const table = this.$refs.featuredPickerTable;
-      if (!table) {
-        return;
-      }
-      const selectedSkuIds = new Set(
-        this.featuredPickerDraft.map((item) => item.skuId).filter(Boolean)
-      );
-      table.clearSelection();
-      this.featuredPickerList.forEach((row) => {
-        if (row.skuId && selectedSkuIds.has(row.skuId)) {
-          table.toggleRowSelection(row, true);
-        }
-      });
-    },
-    searchFeaturedPickerGoods() {
-      this.featuredPickerSearch.pageNumber = 1;
-      this.loadFeaturedPickerGoods();
-    },
-    onFeaturedPickerPageSizeChange() {
-      this.featuredPickerSearch.pageNumber = 1;
-      this.loadFeaturedPickerGoods();
-    },
-    onFeaturedPickerSelectionChange(selection) {
-      if (this.syncingFeaturedPickerSelection) {
-        return;
-      }
-      const selectedSkuIds = new Set((selection || []).map((item) => item.skuId).filter(Boolean));
-      const currentPageSkuIds = new Set(this.featuredPickerList.map((item) => item.skuId).filter(Boolean));
-      const remaining = this.featuredPickerDraft.filter((item) => {
-        if (!currentPageSkuIds.has(item.skuId)) {
-          return true;
-        }
-        return selectedSkuIds.has(item.skuId);
-      });
-      const remainingSkuIds = new Set(remaining.map((item) => item.skuId));
-      const added = [];
-      (selection || []).forEach((item) => {
-        if (!item.skuId || remainingSkuIds.has(item.skuId)) {
-          return;
-        }
-        remainingSkuIds.add(item.skuId);
-        added.push(this.toFeaturedGoodsItem(item));
-      });
-      this.featuredPickerDraft = [...remaining, ...added];
-      this.featuredPickerSelection = selection || [];
-    },
-    toFeaturedGoodsItem(item) {
-      return {
-        id: item.id,
-        goodsId: item.goodsId,
-        skuId: item.skuId,
-        goodsName: item.goodsName,
-        specs: item.specs,
-        thumbnail: item.thumbnail,
-        price: item.price,
-        commission: item.commission,
-        storeName: item.storeName,
-      };
-    },
-    featuredGoodsLimitMessage() {
-      const limit = this.featuredGoodsLimit;
-      return `主推商品数量为${limit}时，最多选择${limit}个自定义商品`;
-    },
-    confirmFeaturedPicker() {
-      const next = this.featuredPickerDraft.filter((item) => item.skuId);
-      if (!next.length) {
-        this.$Message.warning("请至少选择一个分销商品");
-        return;
-      }
-      const limit = this.featuredGoodsLimit;
-      if (next.length > limit) {
-        this.$Message.warning(this.featuredGoodsLimitMessage());
-        return;
-      }
-      this.featuredCustomGoods = next;
-      this.featuredPickerVisible = false;
-      this.featuredPickerSelection = [];
-    },
-    removeFeaturedGoods(index) {
-      this.featuredCustomGoods.splice(index, 1);
-    },
-    buildFeaturedPayload() {
-      return {
-        defaultSort: this.featuredForm.defaultSort,
-        defaultShareText: (this.featuredForm.defaultShareText || "").trim(),
-        centerVisible: this.featuredForm.centerVisible,
-        showSales: this.featuredForm.showSales,
-        sourceMode: this.featuredForm.sourceMode,
-        matchRule: this.featuredForm.matchRule,
-        displayCount: this.featuredForm.displayCount === 10 ? 10 : 5,
-        skuIds:
-          this.featuredForm.sourceMode === "CUSTOM"
-            ? this.featuredCustomGoods.map((item) => item.skuId).filter(Boolean)
-            : undefined,
-      };
-    },
-    submitFeatured() {
-      if (this.featuredForm.sourceMode === "CUSTOM" && !this.featuredCustomGoods.length) {
-        this.$Message.warning("请至少选择一个自定义主推商品");
-        return;
-      }
-      if (this.featuredGoodsOverLimit) {
-        this.$Message.warning(this.featuredGoodsLimitMessage());
-        return;
-      }
-      this.saving.featured = true;
-      putDistributionFeaturedGoodsSetting(this.buildFeaturedPayload())
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.loadFeaturedSetting();
-          }
-        })
-        .finally(() => {
-          this.saving.featured = false;
-        });
-    },
-    buildBasePayload() {
-      return {
-        isOpen: this.form.isOpen,
-        distributorName: (this.form.distributorName || "分销员").trim(),
-        upgradeConditionVisible: this.form.upgradeConditionVisible,
-        parentDistributorVisible: this.form.parentDistributorVisible,
-        parentAttributionMode: this.form.parentAttributionMode,
-      };
-    },
-    submitBase() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.saving.base = true;
-        setSetting("DISTRIBUTION_SETTING", this.buildBasePayload())
-          .then((res) => {
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.loadBaseSetting();
-            }
-          })
-          .finally(() => {
-            this.saving.base = false;
-          });
-      });
-    },
-    submitCustomer() {
-      this.normalizePermanentPaidDays();
-      if (
-        this.customerForm.bindMode === "PERMANENT" &&
-        this.customerForm.permanentBindMode === "PAID_WITHIN_DAYS" &&
-        this.customerForm.permanentPaidDays < 1
-      ) {
-        this.$Message.warning("永久锁客支付天数不能低于1天");
-        return;
-      }
-      this.saving.customer = true;
-      putDistributionCustomerSetting(this.customerForm)
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.loadCustomerSetting();
-          }
-        })
-        .finally(() => {
-          this.saving.customer = false;
-        });
-    },
-    submitSettlement() {
-      this.saving.settlement = true;
-      putDistributionSettlementSetting(this.settlementForm)
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.loadSettlementSetting();
-          }
-        })
-        .finally(() => {
-          this.saving.settlement = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      saving.settlement = false;
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/error-page/403.vue b/manager/src/views/error-page/403.vue
index dc816f3e1..815a8ca4d 100644
--- a/manager/src/views/error-page/403.vue
+++ b/manager/src/views/error-page/403.vue
@@ -17,20 +17,21 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error403",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error403" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/error-page/404.vue b/manager/src/views/error-page/404.vue
index 7b34d24b7..30b2dee29 100644
--- a/manager/src/views/error-page/404.vue
+++ b/manager/src/views/error-page/404.vue
@@ -17,20 +17,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error404",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error404" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/error-page/500.vue b/manager/src/views/error-page/500.vue
index 0d9769e7d..25c2f7962 100644
--- a/manager/src/views/error-page/500.vue
+++ b/manager/src/views/error-page/500.vue
@@ -17,20 +17,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error500",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error500" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/external-link/index.vue b/manager/src/views/external-link/index.vue
index 92bdf6a9d..c9885fb00 100644
--- a/manager/src/views/external-link/index.vue
+++ b/manager/src/views/external-link/index.vue
@@ -4,22 +4,23 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "ExternalLink",
-  data() {
-    return {
-      link: this.$router.currentRoute.name,
-    };
-  },
-  mounted() {
-    let iframe = document.getElementById("ifram");
-    const deviceWidth = document.body.clientWidth;
-    const deviceHeight = document.body.clientHeight;
-    iframe.style.width = deviceWidth + "px";
-    iframe.style.height = deviceHeight + "px";
-  }
-};
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "ExternalLink" });
+
+const router = useRouter();
+
+const link = ref(router.currentRoute.name);
+
+onMounted(() => {
+  let iframe = document.getElementById("ifram");
+  const deviceWidth = document.body.clientWidth;
+  const deviceHeight = document.body.clientHeight;
+  iframe.style.width = deviceWidth + "px";
+  iframe.style.height = deviceHeight + "px";
+});
 </script>
 <style lang="scss" scoped>
 
diff --git a/manager/src/views/finance/payment-method.vue b/manager/src/views/finance/payment-method.vue
index 941856a89..5a820fa40 100644
--- a/manager/src/views/finance/payment-method.vue
+++ b/manager/src/views/finance/payment-method.vue
@@ -24,39 +24,39 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-payment-method",
-  data() {
-    return { loading: false, dateRange: [], data: [] };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    buildParams() {
-      const p = {};
-      if (this.dateRange?.length === 2) {
-        p.startDate = this.dateRange[0];
-        p.endDate = this.dateRange[1];
-      }
-      return p;
-    },
-    loadData() {
-      this.loading = true;
-      API_Finance.getPaymentMethodReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) this.data = res.result || [];
-      });
-    },
-    handleExport() {
-      API_Finance.exportPaymentMethodReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "支付方式汇总.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-payment-method" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const data = ref([]);
+
+onMounted(() => {
+  loadData();
+});
+
+function buildParams() {
+  const p = {};
+  if (dateRange.value?.length === 2) {
+    p.startDate = dateRange.value[0];
+    p.endDate = dateRange.value[1];
+  }
+  return p;
+}
+function loadData() {
+  loading.value = true;
+  API_Finance.getPaymentMethodReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) data.value = res.result || [];
+  });
+}
+function handleExport() {
+  API_Finance.exportPaymentMethodReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "支付方式汇总.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/finance/platform-report.vue b/manager/src/views/finance/platform-report.vue
index 0d9d4c36c..18dd1c6fb 100644
--- a/manager/src/views/finance/platform-report.vue
+++ b/manager/src/views/finance/platform-report.vue
@@ -39,44 +39,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-platform-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      params: { granularity: "DAY" },
-      data: [],
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startDate = this.dateRange[0];
-        p.endDate = this.dateRange[1];
-      }
-      return p;
-    },
-    loadData() {
-      this.loading = true;
-      API_Finance.getPlatformReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) this.data = res.result || [];
-      });
-    },
-    handleExport() {
-      API_Finance.exportPlatformReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "平台经营报表.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-platform-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const params = ref({ granularity: "DAY" });
+const data = ref([]);
+
+onMounted(() => {
+  loadData();
+});
+
+function buildParams() {
+  const p = { ...params.value };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startDate = dateRange.value[0];
+    p.endDate = dateRange.value[1];
+  }
+  return p;
+}
+function loadData() {
+  loading.value = true;
+  API_Finance.getPlatformReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) data.value = res.result || [];
+  });
+}
+function handleExport() {
+  API_Finance.exportPlatformReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "平台经营报表.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/finance/refundLog.vue b/manager/src/views/finance/refundLog.vue
index 2fa58e78f..175036a98 100644
--- a/manager/src/views/finance/refundLog.vue
+++ b/manager/src/views/finance/refundLog.vue
@@ -34,44 +34,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-refund-log",
-  data() {
-    return {
-      loading: false,
-      searchForm: { pageNumber: 1, pageSize: 20, orderSn: "" },
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Finance.refundLogPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    handleExport() {
-      const { pageNumber, pageSize, ...rest } = this.searchForm;
-      API_Finance.exportRefundFlow(rest).then((blob) => {
-        downloadBlob(blob, "退款流水.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-refund-log" });
+
+const loading = ref(false);
+const searchForm = reactive({ pageNumber: 1, pageSize: 20, orderSn: "" });
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  getDataList();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Finance.refundLogPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function handleExport() {
+  const { pageNumber, pageSize, ...rest } = searchForm;
+  API_Finance.exportRefundFlow(rest).then((blob) => {
+    downloadBlob(blob, "退款流水.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/finance/settlement-ledger.vue b/manager/src/views/finance/settlement-ledger.vue
index a0b9d4df5..d088de079 100644
--- a/manager/src/views/finance/settlement-ledger.vue
+++ b/manager/src/views/finance/settlement-ledger.vue
@@ -16,31 +16,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-settlement-ledger",
-  data() {
-    return { loading: false, data: [] };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      API_Finance.getSettlementLedger({}).then((res) => {
-        this.loading = false;
-        if (res.success) this.data = res.result || [];
-      });
-    },
-    handleExport() {
-      API_Finance.exportSettlementLedger({}).then((blob) => {
-        downloadBlob(blob, "结算台账.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-settlement-ledger" });
+
+const loading = ref(false);
+const data = ref([]);
+
+onMounted(() => {
+  loadData();
+});
+
+function loadData() {
+  loading.value = true;
+  API_Finance.getSettlementLedger({}).then((res) => {
+    loading.value = false;
+    if (res.success) data.value = res.result || [];
+  });
+}
+function handleExport() {
+  API_Finance.exportSettlementLedger({}).then((blob) => {
+    downloadBlob(blob, "结算台账.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/finance/store-settlement.vue b/manager/src/views/finance/store-settlement.vue
index fd4387062..f0820cf5c 100644
--- a/manager/src/views/finance/store-settlement.vue
+++ b/manager/src/views/finance/store-settlement.vue
@@ -26,39 +26,39 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-store-settlement",
-  data() {
-    return { loading: false, dateRange: [], data: [] };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    buildParams() {
-      const p = {};
-      if (this.dateRange?.length === 2) {
-        p.startDate = this.dateRange[0];
-        p.endDate = this.dateRange[1];
-      }
-      return p;
-    },
-    loadData() {
-      this.loading = true;
-      API_Finance.getStoreSettlementReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) this.data = res.result || [];
-      });
-    },
-    handleExport() {
-      API_Finance.exportStoreSettlementReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "店铺结算汇总.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-store-settlement" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const data = ref([]);
+
+onMounted(() => {
+  loadData();
+});
+
+function buildParams() {
+  const p = {};
+  if (dateRange.value?.length === 2) {
+    p.startDate = dateRange.value[0];
+    p.endDate = dateRange.value[1];
+  }
+  return p;
+}
+function loadData() {
+  loading.value = true;
+  API_Finance.getStoreSettlementReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) data.value = res.result || [];
+  });
+}
+function handleExport() {
+  API_Finance.exportStoreSettlementReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "店铺结算汇总.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/finance/walletLog.vue b/manager/src/views/finance/walletLog.vue
index f8c9966b3..561841623 100644
--- a/manager/src/views/finance/walletLog.vue
+++ b/manager/src/views/finance/walletLog.vue
@@ -36,59 +36,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { getRequest } from "@/libs/axios";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "finance-wallet-log",
-  data() {
-    return {
-      loading: false,
-      searchForm: { memberName: "" },
-      dateRange: [],
-      pageNumber: 1,
-      pageSize: 20,
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    handleSearch() {
-      this.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      const params = {
-        pageNumber: this.pageNumber,
-        pageSize: this.pageSize,
-        memberName: this.searchForm.memberName,
-      };
-      getRequest("/wallet/log", params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      }).catch(() => {
-        this.loading = false;
-      });
-    },
-    handleExport() {
-      const params = { memberName: this.searchForm.memberName };
-      if (this.dateRange?.length === 2) {
-        params.startDate = this.dateRange[0];
-        params.endDate = this.dateRange[1];
-      }
-      API_Finance.exportWalletLog(params).then((blob) => {
-        downloadBlob(blob, "钱包流水.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "finance-wallet-log" });
+
+const loading = ref(false);
+const searchForm = reactive({ memberName: "" });
+const dateRange = ref([]);
+const pageNumber = ref(1);
+const pageSize = ref(20);
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  getDataList();
+});
+
+function handleSearch() {
+  pageNumber.value = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  const params = {
+    pageNumber: pageNumber.value,
+    pageSize: pageSize.value,
+    memberName: searchForm.memberName,
+  };
+  getRequest("/wallet/log", params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+function handleExport() {
+  const params = { memberName: searchForm.memberName };
+  if (dateRange.value?.length === 2) {
+    params.startDate = dateRange.value[0];
+    params.endDate = dateRange.value[1];
+  }
+  API_Finance.exportWalletLog(params).then((blob) => {
+    downloadBlob(blob, "钱包流水.xlsx");
+  });
+}
 </script>
diff --git a/manager/src/views/goods-unit/index.vue b/manager/src/views/goods-unit/index.vue
index afdf4c774..3bfc7168f 100644
--- a/manager/src/views/goods-unit/index.vue
+++ b/manager/src/views/goods-unit/index.vue
@@ -52,7 +52,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="计量单位" prop="name">
           <el-input v-model="form.name" clearable style="width: 100%" />
         </el-form-item>
@@ -65,7 +65,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import {
   addGoodsUnit,
   getGoodsUnitPage,
@@ -73,161 +74,163 @@ import {
   delGoodsUnit,
 } from "@/api/index";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "goods-unit",
-  data() {
-    return {
-      loading: true,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        name: "",
-      },
-      form: {
-        name: "",
-      },
-      formValidate: {
-        name: [regular.REQUIRED, regular.VARCHAR5],
-      },
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    getDataList() {
-      this.loading = true;
-      getGoodsUnitPage(this.searchForm)
-        .then((res) => {
+defineOptions({ name: "goods-unit" });
+
+const loading = ref(true);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  name: "",
+});
+const form = ref({
+  name: "",
+});
+const formValidate = reactive({
+  name: [regular.REQUIRED, regular.VARCHAR5],
+});
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+
+const table = ref(null);
+const formRef = ref(null);
+
+// 未在 data 中声明、原代码直接挂载到 this 上的字段
+let id = null;
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function getDataList() {
+  loading.value = true;
+  getGoodsUnitPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalTitle.value == "添加") {
+        if (data.value.find((item) => item.name == form.value.name)) {
+          Message.error("请勿添加重复计量单位!");
+          submitLoading.value = false;
+          return;
+        }
+        delete form.value.id;
+        addGoodsUnit(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
-        })
-        .finally(() => {
-          this.loading = false;
         });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalTitle == "添加") {
-            if (this.data.find((item) => item.name == this.form.name)) {
-              this.$Message.error("请勿添加重复计量单位!");
-              this.submitLoading = false;
-              return;
-            }
-            delete this.form.id;
-            addGoodsUnit(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            updateGoodsUnit(this.id, this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
+      } else {
+        updateGoodsUnit(id, form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
+        });
+      }
+    }
+  });
+}
+function add() {
+  modalTitle.value = "添加";
+  form.value = {};
+  formRef.value?.resetFields();
+  modalVisible.value = true;
+}
+function edit(v) {
+  id = v.id;
+  modalTitle.value = "修改";
+  modalVisible.value = true;
+  form.value.name = v.name;
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      delGoodsUnit(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    add() {
-      this.modalTitle = "添加";
-      this.form = {};
-      this.$refs.form?.resetFields();
-      this.modalVisible = true;
-    },
-    edit(v) {
-      this.id = v.id;
-      this.modalTitle = "修改";
-      this.modalVisible = true;
-      this.form.name = v.name;
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          delGoodsUnit(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      delGoodsUnit(ids).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          delGoodsUnit(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/goods/goods-info/goods.vue b/manager/src/views/goods/goods-info/goods.vue
index 3d2347127..ca92a3716 100644
--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/manager/src/views/goods/goods-info/goods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -216,7 +216,7 @@
     </el-card>
 
     <el-dialog v-model="modalVisible" title="下架操作" width="500px" :close-on-click-modal="false">
-      <el-form ref="underForm" :model="underForm" label-width="100px">
+      <el-form ref="underFormRef" :model="underForm" label-width="100px">
         <el-form-item label="下架原因" prop="reason">
           <el-input v-model="underForm.reason" clearable />
         </el-form-item>
@@ -255,7 +255,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="batchAuditForm" :model="batchAuditForm" label-width="100px">
+      <el-form ref="batchAuditFormRef" :model="batchAuditForm" label-width="100px">
         <el-form-item label="审核结果" prop="auth_flag">
           <el-radio-group v-model="batchAuditForm.auth_flag">
             <el-radio :value="1">审核通过</el-radio>
@@ -278,7 +278,7 @@
     </el-dialog>
 
     <el-dialog v-model="goodsGroupFlag" title="批量设置商品分组" width="420px">
-      <el-form ref="goodsGroupForm" :model="goodsGroupForm" :rules="goodsGroupRule" label-width="90px">
+      <el-form ref="goodsGroupFormRef" :model="goodsGroupForm" :rules="goodsGroupRule" label-width="90px">
         <el-form-item label="商品分组" prop="groupId">
           <el-select v-model="goodsGroupForm.groupId" clearable filterable style="width: 240px">
             <el-option
@@ -298,7 +298,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
 import {
   getGoodsListData,
   getGoodsNumerData,
@@ -310,421 +311,423 @@ import {
 } from "@/api/goods";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unitPrice, customRouterPush } from "@/utils/filters";
-export default {
-  name: "goods",
-  data() {
-    return {
-      id: "", //要操作的id
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
-      searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
-        groupId: "",
-      },
-      underForm: {
-        // 下架原因
-        reason: "",
-      },
-      goodsAuditForm: {
-        // 商品审核表单
-        auth_flag: 1,
-      },
-      auditModalVisible: false, // 审核弹框显示状态
-      auditSubmitLoading: false,
-      currentAuditGoods: null, // 当前审核的商品
-      submitLoading: false, // 添加或编辑提交状态
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      currentStatus: "ALL",
-      goodsNumerData: {},
-      selectedRows: [], // 选中的行数据
-      selectAll: false, // 全选状态
-      batchAuditModalVisible: false, // 批量审核弹框显示状态
-      batchAuditSubmitLoading: false,
-      batchAuditForm: {
-        auth_flag: 1,
-        reason: ''
-      },
-      goodsGroupFlag: false,
-      goodsGroupLoading: false,
-      goodsGroupList: [],
-      goodsGroupForm: {
-        groupId: ""
-      },
-      goodsGroupRule: {
-        groupId: [{ required: true, message: "请选择商品分组", trigger: "change" }]
-      }
+
+defineOptions({ name: "goods" });
+
+// 模板 ref（searchFormRef/underFormRef/batchAuditFormRef/goodsGroupFormRef 因与 data 同名改为 xxxRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+const underFormRef = ref(null);
+const auditForm = ref(null);
+const batchAuditFormRef = ref(null);
+const goodsGroupFormRef = ref(null);
+
+const id = ref(""); //要操作的id
+const loading = ref(true); // 表单加载状态
+const modalVisible = ref(false); // 添加或编辑显示
+const searchForm = reactive({
+  // 搜索框初始化对象
+  pageNumber: 1, // 当前页数
+  pageSize: 20, // 页面大小
+  sort: "create_time", // 默认排序字段
+  order: "desc", // 默认排序方式
+  groupId: "",
+});
+const underForm = reactive({
+  // 下架原因
+  reason: "",
+});
+const goodsAuditForm = reactive({
+  // 商品审核表单
+  auth_flag: 1,
+});
+const auditModalVisible = ref(false); // 审核弹框显示状态
+const auditSubmitLoading = ref(false);
+const currentAuditGoods = ref(null); // 当前审核的商品
+const submitLoading = ref(false); // 添加或编辑提交状态
+const data = ref([]); // 表单数据
+const total = ref(0); // 表单数据总数
+const currentStatus = ref("ALL");
+const goodsNumerData = ref({});
+const selectedRows = ref([]); // 选中的行数据
+const selectAll = ref(false); // 全选状态
+const batchAuditModalVisible = ref(false); // 批量审核弹框显示状态
+const batchAuditSubmitLoading = ref(false);
+const batchAuditForm = ref({
+  auth_flag: 1,
+  reason: ''
+});
+const goodsGroupFlag = ref(false);
+const goodsGroupLoading = ref(false);
+const goodsGroupList = ref([]);
+const goodsGroupForm = ref({
+  groupId: ""
+});
+const goodsGroupRule = reactive({
+  groupId: [{ required: true, message: "请选择商品分组", trigger: "change" }]
+});
+
+const goodsStatusWithCount = computed(() => {
+  return [
+    {title: '全部', value: 'ALL'},
+    {title: `出售中${goodsNumerData.value.upperGoodsNum ? '(' + goodsNumerData.value.upperGoodsNum + ')' : ''}`, value: 'UPPER'},
+    {title: `仓库中${goodsNumerData.value.downGoodsNum ? '(' + goodsNumerData.value.downGoodsNum + ')' : ''}`, value: 'DOWN'},
+    {title: `待审核${goodsNumerData.value.auditGoodsNum ? '(' + goodsNumerData.value.auditGoodsNum + ')' : ''}`, value: 'TOBEAUDITED'},
+    {title: `审核未通过${goodsNumerData.value.refuseGoodsNum ? '(' + goodsNumerData.value.refuseGoodsNum + ')' : ''}`, value: 'REFUSE'}
+  ];
+});
+
+function clearTableSelection() {
+  table.value?.clearSelection?.();
+}
+function onStatusTabClick(tab) {
+  const status = tab.paneName ?? tab.props?.name;
+  goodsStatusClick(status);
+}
+function salesModelText(v) {
+  if (v === "RETAIL") return "零售";
+  if (v === "WHOLESALE") return "批发";
+  return "其他类型";
+}
+function goodsTypeText(v) {
+  if (v === "PHYSICAL_GOODS") return "实物商品";
+  if (v === "VIRTUAL_GOODS") return "虚拟商品";
+  if (v === "E_COUPON") return "电子卡券"; // 卡密商品
+  if (v === "APPOINTMENT_GOODS") return "预约商品";
+  return v || "—";
+}
+function marketEnableText(v) {
+  if (v === "DOWN") return "下架";
+  if (v === "UPPER") return "上架";
+  return "";
+}
+function authFlagText(v) {
+  if (v === "TOBEAUDITED") return "待审核";
+  if (v === "PASS") return "通过";
+  if (v === "REFUSE") return "拒绝";
+  return "";
+}
+// 初始化数据
+function init() {
+  getDataList();
+  getNumberData();
+  loadGoodsGroupList();
+}
+// 分页 改变页码
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+// 分页 改变页数
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+// 搜索
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+  getNumberData();
+}
+// 获取数据
+function getDataList() {
+  loading.value = true;
+  getGoodsListData(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getNumberData() {
+  // 创建一个不包含goodsStatus字段的搜索参数
+  const { goodsStatus, ...searchParams } = searchForm;
+  getGoodsNumerData(searchParams).then((res) => {
+    if (res.success) {
+      goodsNumerData.value = res.result;
+    }
+  })
+}
+// 编辑
+function edit(v) {
+  id.value = v.id;
+  if (v.underMessage) {
+    underForm.reason = v.underMessage;
+  } else {
+    underForm.reason = "";
+  }
+  modalVisible.value = true;
+}
+// 下架
+function lower() {
+  const reason = underForm.reason ? underForm.reason.trim() : "";
+  if (!reason) {
+    ElMessage.error("下架原因不能为空");
+    return;
+  }
+  let params = {
+    goodsId: id.value,
+    reason
+  };
+  lowGoods(params).then((res) => {
+    if (res.success) {
+      ElMessage.success("操作成功");
+      modalVisible.value = false;
+      getDataList();
+      getNumberData(); // 添加这行
+    }
+  });
+}
+// 上架
+function upper(v) {
+  ElMessageBox.confirm("您确认要上架 " + v.goodsName + " ?", "确认上架", { type: "warning" }).then(() => {
+    let params = {
+      goodsId: v.id
     };
-  },
-  computed: {
-    goodsStatusWithCount() {
-      return [
-        {title: '全部', value: 'ALL'},
-        {title: `出售中${this.goodsNumerData.upperGoodsNum ? '(' + this.goodsNumerData.upperGoodsNum + ')' : ''}`, value: 'UPPER'},
-        {title: `仓库中${this.goodsNumerData.downGoodsNum ? '(' + this.goodsNumerData.downGoodsNum + ')' : ''}`, value: 'DOWN'},
-        {title: `待审核${this.goodsNumerData.auditGoodsNum ? '(' + this.goodsNumerData.auditGoodsNum + ')' : ''}`, value: 'TOBEAUDITED'},
-        {title: `审核未通过${this.goodsNumerData.refuseGoodsNum ? '(' + this.goodsNumerData.refuseGoodsNum + ')' : ''}`, value: 'REFUSE'}
-      ];
+    return upGoods(params).then((res) => {
+      if (res.success) {
+        ElMessage.success("上架成功");
+        getDataList();
+        getNumberData(); // 添加这行
+      }
+    });
+  }).catch(() => {});
+}
+
+//查看商品详情
+function showDetail(v) {
+  customRouterPush({
+    name: "goods-detail",
+    query: { id: v.id },
+  });
+}
+
+// 商品状态筛选
+function goodsStatusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined || name === null) {
+    delete searchForm.goodsStatus;
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.goodsStatus = name;
+    currentStatus.value = name;
+  }
+  selectedRows.value = [];
+  clearTableSelection();
+  getDataList();
+}
+function examine(v, authFlag) {
+  // 审核商品
+  let examine = "通过";
+  goodsAuditForm.authFlag = "PASS";
+  if (authFlag != 1) {
+    examine = "拒绝";
+    goodsAuditForm.authFlag = "REFUSE";
+  }
+
+  ElMessageBox.confirm("您确认要审核" + examine + " " + v.goodsName + " ?", "确认审核", { type: "warning" }).then(() => {
+    goodsAuditForm.goodsIds=v.id;
+    let formData = new FormData();
+    formData.append('goodsIds', v.id);
+    formData.append('authFlag', goodsAuditForm.authFlag);
+
+    return authGoods(formData).then((res) => {
+      if (res.success) {
+        ElMessage.success("审核成功");
+        getDataList();
+        getNumberData();
+      }
+    });
+  }).catch(() => {});
+}
+
+// 打开审核弹框
+function openAuditModal(goods) {
+  currentAuditGoods.value = goods;
+  goodsAuditForm.auth_flag = 1;
+  goodsAuditForm.reason = '';
+  auditSubmitLoading.value = false;
+  auditModalVisible.value = true;
+}
+
+// 提交审核
+function submitAudit() {
+  if (!currentAuditGoods.value) {
+    return;
+  }
+  auditSubmitLoading.value = true;
+  const formData = new FormData();
+  formData.append('goodsIds', currentAuditGoods.value.id);
+  formData.append('authFlag', goodsAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
+  authGoods(formData).then((res) => {
+    if (res.success) {
+      ElMessage.success('审核成功');
+      auditModalVisible.value = false;
+      getDataList();
+      getNumberData();
     }
-  },
-  methods: {
-    unitPrice,
-    clearTableSelection() {
-      this.$refs.table?.clearSelection?.();
-    },
-    onStatusTabClick(tab) {
-      const status = tab.paneName ?? tab.props?.name;
-      this.goodsStatusClick(status);
-    },
-    salesModelText(v) {
-      if (v === "RETAIL") return "零售";
-      if (v === "WHOLESALE") return "批发";
-      return "其他类型";
-    },
-    goodsTypeText(v) {
-      if (v === "PHYSICAL_GOODS") return "实物商品";
-      if (v === "VIRTUAL_GOODS") return "虚拟商品";
-      if (v === "E_COUPON") return "电子卡券"; // 卡密商品
-      if (v === "APPOINTMENT_GOODS") return "预约商品";
-      return v || "—";
-    },
-    marketEnableText(v) {
-      if (v === "DOWN") return "下架";
-      if (v === "UPPER") return "上架";
-      return "";
-    },
-    authFlagText(v) {
-      if (v === "TOBEAUDITED") return "待审核";
-      if (v === "PASS") return "通过";
-      if (v === "REFUSE") return "拒绝";
-      return "";
-    },
-    // 初始化数据
-    init() {
-      this.getDataList();
-      this.getNumberData();
-      this.loadGoodsGroupList();
-    },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    // 搜索
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getNumberData();
-    },
-    // 获取数据
-    getDataList() {
-      this.loading = true;
-      getGoodsListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getNumberData() {
-      // 创建一个不包含goodsStatus字段的搜索参数
-      const { goodsStatus, ...searchParams } = this.searchForm;
-      getGoodsNumerData(searchParams).then((res) => {
-        if (res.success) {
-          this.goodsNumerData = res.result;
-        }
-      })
-    },
-    // 编辑
-    edit(v) {
-      this.id = v.id;
-      if (v.underMessage) {
-        this.underForm.reason = v.underMessage;
-      } else {
-        this.underForm.reason = "";
+  }).finally(() => {
+    auditSubmitLoading.value = false;
+  });
+}
+
+function onSelectionChange(selection) {
+  selectedRows.value = selection;
+}
+
+// 批量上架
+function batchUpper() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要上架的商品');
+    return;
+  }
+
+  const goodsNames = selectedRows.value.map(item => item.goodsName).join('、');
+  ElMessageBox.confirm(`您确认要上架以下商品吗？\n${goodsNames}`, "确认批量上架", { type: "warning" }).then(() => {
+    const goodsIds = selectedRows.value.map(item => item.id);
+    const params = {
+      goodsId: goodsIds
+    };
+
+    return upGoods(params).then((res) => {
+      if (res.success) {
+        ElMessage.success('批量上架成功');
+        selectedRows.value = [];
+        selectAll.value = false;
+        getDataList();
+        getNumberData();
       }
-      this.modalVisible = true;
-    },
-    // 下架
-    lower() {
-      const reason = this.underForm.reason ? this.underForm.reason.trim() : "";
-      if (!reason) {
-        ElMessage.error("下架原因不能为空");
-        return;
+    });
+  }).catch(() => {});
+}
+
+// 批量下架
+function batchLower() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要下架的商品');
+    return;
+  }
+
+  const goodsNames = selectedRows.value.map(item => item.goodsName).join('、');
+  ElMessageBox.confirm(`您确认要下架以下商品吗？\n${goodsNames}`, "确认批量下架", { type: "warning" }).then(() => {
+    const goodsIds = selectedRows.value.map(item => item.id);
+    const params = {
+      goodsId: goodsIds,
+      reason: '批量下架操作'
+    };
+
+    return lowGoods(params).then((res) => {
+      if (res.success) {
+        ElMessage.success('批量下架成功');
+        selectedRows.value = [];
+        selectAll.value = false;
+        getDataList();
+        getNumberData();
       }
-      let params = {
-        goodsId: this.id,
-        reason
-      };
-      lowGoods(params).then((res) => {
-        if (res.success) {
-          ElMessage.success("操作成功");
-          this.modalVisible = false;
-          this.getDataList();
-          this.getNumberData(); // 添加这行
-        }
-      });
-    },
-    // 上架
-    upper(v) {
-      ElMessageBox.confirm("您确认要上架 " + v.goodsName + " ?", "确认上架", { type: "warning" }).then(() => {
-        let params = {
-          goodsId: v.id
-        };
-        return upGoods(params).then((res) => {
-          if (res.success) {
-            ElMessage.success("上架成功");
-            this.getDataList();
-            this.getNumberData(); // 添加这行
-          }
-        });
-      }).catch(() => {});
-    },
+    });
+  }).catch(() => {});
+}
 
-    //查看商品详情
-    showDetail(v) {
-      customRouterPush({
-        name: "goods-detail",
-        query: { id: v.id },
-      });
-    },
+// 批量审核
+function batchAudit() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要审核的商品');
+    return;
+  }
 
-    // 商品状态筛选
-    goodsStatusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined || name === null) {
-        delete this.searchForm.goodsStatus;
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.goodsStatus = name;
-        this.currentStatus = name;
-      }
-      this.selectedRows = [];
-      this.clearTableSelection();
-      this.getDataList();
-    },
-    examine(v, authFlag) {
-      // 审核商品
-      let examine = "通过";
-      this.goodsAuditForm.authFlag = "PASS";
-      if (authFlag != 1) {
-        examine = "拒绝";
-        this.goodsAuditForm.authFlag = "REFUSE";
-      }
+  // 重置批量审核表单
+  batchAuditForm.value = {
+    auth_flag: 1,
+    reason: ''
+  };
+  batchAuditModalVisible.value = true;
+}
 
-      ElMessageBox.confirm("您确认要审核" + examine + " " + v.goodsName + " ?", "确认审核", { type: "warning" }).then(() => {
-        this.goodsAuditForm.goodsIds=v.id;
-        let formData = new FormData();
-        formData.append('goodsIds', v.id);
-        formData.append('authFlag', this.goodsAuditForm.authFlag);
+// 提交批量审核
+function submitBatchAudit() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning('请先选择要审核的商品');
+    return;
+  }
 
-        return authGoods(formData).then((res) => {
-          if (res.success) {
-            ElMessage.success("审核成功");
-            this.getDataList();
-            this.getNumberData();
-          }
-        });
-      }).catch(() => {});
-    },
+  // 如果是拒绝审核，必须填写原因
+  if (batchAuditForm.value.auth_flag === 2 && !batchAuditForm.value.reason.trim()) {
+    ElMessage.warning('审核拒绝时必须填写拒绝原因');
+    return;
+  }
 
-    // 打开审核弹框
-    openAuditModal(goods) {
-      this.currentAuditGoods = goods;
-      this.goodsAuditForm.auth_flag = 1;
-      this.goodsAuditForm.reason = '';
-      this.auditSubmitLoading = false;
-      this.auditModalVisible = true;
-    },
+  const actionText = batchAuditForm.value.auth_flag === 1 ? '通过' : '拒绝';
+  const goodsIds = selectedRows.value.map(item => item.id);
+  const formData = new FormData();
+  formData.append('goodsIds', goodsIds.join(','));
+  formData.append('authFlag', batchAuditForm.value.auth_flag === 1 ? 'PASS' : 'REFUSE');
+  if (batchAuditForm.value.reason) {
+    formData.append('reason', batchAuditForm.value.reason);
+  }
 
-    // 提交审核
-    submitAudit() {
-      if (!this.currentAuditGoods) {
-        return;
-      }
-      this.auditSubmitLoading = true;
-      const formData = new FormData();
-      formData.append('goodsIds', this.currentAuditGoods.id);
-      formData.append('authFlag', this.goodsAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
-      authGoods(formData).then((res) => {
-        if (res.success) {
-          ElMessage.success('审核成功');
-          this.auditModalVisible = false;
-          this.getDataList();
-          this.getNumberData();
-        }
-      }).finally(() => {
-        this.auditSubmitLoading = false;
-      });
-    },
-
-    onSelectionChange(selection) {
-      this.selectedRows = selection;
-    },
-
-    // 批量上架
-    batchUpper() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning('请先选择要上架的商品');
-        return;
-      }
-
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
-      ElMessageBox.confirm(`您确认要上架以下商品吗？\n${goodsNames}`, "确认批量上架", { type: "warning" }).then(() => {
-        const goodsIds = this.selectedRows.map(item => item.id);
-        const params = {
-          goodsId: goodsIds
-        };
-
-        return upGoods(params).then((res) => {
-          if (res.success) {
-            ElMessage.success('批量上架成功');
-            this.selectedRows = [];
-            this.selectAll = false;
-            this.getDataList();
-            this.getNumberData();
-          }
-        });
-      }).catch(() => {});
-    },
-
-    // 批量下架
-    batchLower() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning('请先选择要下架的商品');
-        return;
-      }
-
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
-      ElMessageBox.confirm(`您确认要下架以下商品吗？\n${goodsNames}`, "确认批量下架", { type: "warning" }).then(() => {
-        const goodsIds = this.selectedRows.map(item => item.id);
-        const params = {
-          goodsId: goodsIds,
-          reason: '批量下架操作'
-        };
-
-        return lowGoods(params).then((res) => {
-          if (res.success) {
-            ElMessage.success('批量下架成功');
-            this.selectedRows = [];
-            this.selectAll = false;
-            this.getDataList();
-            this.getNumberData();
-          }
-        });
-      }).catch(() => {});
-    },
-
-    // 批量审核
-    batchAudit() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning('请先选择要审核的商品');
-        return;
-      }
-
-      // 重置批量审核表单
-      this.batchAuditForm = {
-        auth_flag: 1,
-        reason: ''
-      };
-      this.batchAuditModalVisible = true;
-    },
-
-    // 提交批量审核
-    submitBatchAudit() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning('请先选择要审核的商品');
-        return;
-      }
-
-      // 如果是拒绝审核，必须填写原因
-      if (this.batchAuditForm.auth_flag === 2 && !this.batchAuditForm.reason.trim()) {
-        ElMessage.warning('审核拒绝时必须填写拒绝原因');
-        return;
-      }
-
-      const actionText = this.batchAuditForm.auth_flag === 1 ? '通过' : '拒绝';
-      const goodsIds = this.selectedRows.map(item => item.id);
-      const formData = new FormData();
-      formData.append('goodsIds', goodsIds.join(','));
-      formData.append('authFlag', this.batchAuditForm.auth_flag === 1 ? 'PASS' : 'REFUSE');
-      if (this.batchAuditForm.reason) {
-        formData.append('reason', this.batchAuditForm.reason);
-      }
-
-      this.batchAuditSubmitLoading = true;
-      authGoods(formData).then((res) => {
-        if (res.success) {
-          ElMessage.success(`批量审核${actionText}成功`);
-          this.selectedRows = [];
-          this.selectAll = false;
-          this.batchAuditModalVisible = false;
-          this.clearTableSelection();
-          this.getDataList();
-          this.getNumberData();
-        }
-      }).finally(() => {
-        this.batchAuditSubmitLoading = false;
-      });
-    },
-    loadGoodsGroupList() {
-      getGoodsGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
-        if (res && res.success && res.result) {
-          this.goodsGroupList = res.result.records || [];
-        }
-      });
-    },
-    openSetGoodsGroup() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning("请先选择商品");
-        return;
-      }
-      this.goodsGroupFlag = true;
-      this.goodsGroupLoading = false;
-      this.goodsGroupForm = { groupId: "" };
-      this.$nextTick(() => {
-        if (this.$refs.goodsGroupForm) this.$refs.goodsGroupForm.resetFields();
-      });
-      this.loadGoodsGroupList();
-    },
-    submitSetGoodsGroup() {
-      this.$refs.goodsGroupForm.validate((valid) => {
-        if (!valid) return;
-        const goodsIds = this.selectedRows.map((item) => item.id);
-        this.goodsGroupLoading = true;
-        addGoodsGroupItems(this.goodsGroupForm.groupId, goodsIds).then((res) => {
-          this.goodsGroupLoading = false;
-          if (res && res.success) {
-            ElMessage.success("设置成功");
-            this.goodsGroupFlag = false;
-            this.selectedRows = [];
-            this.selectAll = false;
-            this.clearTableSelection();
-            this.getDataList();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
-        }).catch(() => {
-          this.goodsGroupLoading = false;
-          ElMessage.error("设置失败，请检查权限或后端接口");
-        });
-      });
+  batchAuditSubmitLoading.value = true;
+  authGoods(formData).then((res) => {
+    if (res.success) {
+      ElMessage.success(`批量审核${actionText}成功`);
+      selectedRows.value = [];
+      selectAll.value = false;
+      batchAuditModalVisible.value = false;
+      clearTableSelection();
+      getDataList();
+      getNumberData();
     }
-  },
-  mounted() {
-    this.init();
-  },
-};
+  }).finally(() => {
+    batchAuditSubmitLoading.value = false;
+  });
+}
+function loadGoodsGroupList() {
+  getGoodsGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+    if (res && res.success && res.result) {
+      goodsGroupList.value = res.result.records || [];
+    }
+  });
+}
+function openSetGoodsGroup() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning("请先选择商品");
+    return;
+  }
+  goodsGroupFlag.value = true;
+  goodsGroupLoading.value = false;
+  goodsGroupForm.value = { groupId: "" };
+  nextTick(() => {
+    if (goodsGroupFormRef.value) goodsGroupFormRef.value.resetFields();
+  });
+  loadGoodsGroupList();
+}
+function submitSetGoodsGroup() {
+  goodsGroupFormRef.value.validate((valid) => {
+    if (!valid) return;
+    const goodsIds = selectedRows.value.map((item) => item.id);
+    goodsGroupLoading.value = true;
+    addGoodsGroupItems(goodsGroupForm.value.groupId, goodsIds).then((res) => {
+      goodsGroupLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("设置成功");
+        goodsGroupFlag.value = false;
+        selectedRows.value = [];
+        selectAll.value = false;
+        clearTableSelection();
+        getDataList();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      }
+    }).catch(() => {
+      goodsGroupLoading.value = false;
+      ElMessage.error("设置失败，请检查权限或后端接口");
+    });
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 // Tab组件样式
diff --git a/manager/src/views/goods/goods-info/goodsApply.vue b/manager/src/views/goods/goods-info/goodsApply.vue
index dfaa8e16e..6bf3aefa6 100644
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/manager/src/views/goods/goods-info/goodsApply.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -87,104 +87,103 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { authGoods, getAuthGoodsListData } from "@/api/goods";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unitPrice, customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "goodsApply",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      },
-      goodsAuditForm: {
-        auth_flag: 1,
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    unitPrice,
-    authFlagText(v) {
-      const map = {
-        TOBEAUDITED: "待审核",
-        PASS: "审核通过",
-        REFUSE: "审核拒绝",
-      };
-      return map[v] || v || "-";
-    },
-    authFlagTagType(v) {
-      const map = {
-        TOBEAUDITED: "warning",
-        PASS: "success",
-        REFUSE: "danger",
-      };
-      return map[v] || "info";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      this.searchForm.authFlag = 0;
-      getAuthGoodsListData(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    examine(v, authFlag) {
-      const examine = authFlag === 1 ? "通过" : "拒绝";
-      this.goodsAuditForm.authFlag = authFlag === 1 ? "PASS" : "REFUSE";
-      ElMessageBox.confirm(`您确认要审核${examine} ${v.goodsName} ?`, "确认审核", { type: "warning" }).then(() => {
-        const formData = new FormData();
-        formData.append("goodsIds", v.id);
-        formData.append("authFlag", this.goodsAuditForm.authFlag);
-        return authGoods(formData).then((res) => {
-          if (res.success) {
-            ElMessage.success("审核成功");
-            this.getDataList();
-          }
-        });
-      }).catch(() => {});
-    },
-    showDetail(v) {
-      customRouterPush({
-        name: "goods-detail",
-        query: { id: v.id },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "goodsApply" });
+
+// 模板中 el-form 的 ref 与数据 searchForm 同名，避免相互覆盖改名
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+});
+const goodsAuditForm = ref({
+  auth_flag: 1,
+});
+const data = ref([]);
+const total = ref(0);
+
+function authFlagText(v) {
+  const map = {
+    TOBEAUDITED: "待审核",
+    PASS: "审核通过",
+    REFUSE: "审核拒绝",
+  };
+  return map[v] || v || "-";
+}
+function authFlagTagType(v) {
+  const map = {
+    TOBEAUDITED: "warning",
+    PASS: "success",
+    REFUSE: "danger",
+  };
+  return map[v] || "info";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  searchForm.value.authFlag = 0;
+  getAuthGoodsListData(searchForm.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function examine(v, authFlag) {
+  const examine = authFlag === 1 ? "通过" : "拒绝";
+  goodsAuditForm.value.authFlag = authFlag === 1 ? "PASS" : "REFUSE";
+  ElMessageBox.confirm(`您确认要审核${examine} ${v.goodsName} ?`, "确认审核", { type: "warning" }).then(() => {
+    const formData = new FormData();
+    formData.append("goodsIds", v.id);
+    formData.append("authFlag", goodsAuditForm.value.authFlag);
+    return authGoods(formData).then((res) => {
+      if (res.success) {
+        ElMessage.success("审核成功");
+        getDataList();
+      }
+    });
+  }).catch(() => {});
+}
+function showDetail(v) {
+  customRouterPush({
+    name: "goods-detail",
+    query: { id: v.id },
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/goods/goods-info/goodsDetail.vue b/manager/src/views/goods/goods-info/goodsDetail.vue
index 662334cff..308102866 100644
--- a/manager/src/views/goods/goods-info/goodsDetail.vue
+++ b/manager/src/views/goods/goods-info/goodsDetail.vue
@@ -376,307 +376,304 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { View } from "@element-plus/icons-vue";
 import { authGoods, getBrandListData, getGoodsDetail } from "@/api/goods";
 import { ElMessage } from "element-plus";
 
-export default {
-  name: "goodsDetail",
-  components: { View },
-  data() {
-    return {
-      loading: false,
-      goods: {},
-      brandList: [],
-      previewGoodsPicture: "",
-      goodsPictureVisible: false,
-      wholesaleData: [],
-      skuData: [],
-      activeTab: "basic",
-      slotCapacityVisible: false,
-      currentSlotCapacities: [],
-      goodsAuditForm: {
-        auth_flag: 1,
-      },
-      auditModalVisible: false,
-      auditSubmitLoading: false,
-    };
-  },
-  computed: {
-    isAppointmentGoods() {
-      return this.goods.goodsType === "APPOINTMENT_GOODS";
-    },
-    needsLogistics() {
-      return this.goods.goodsType === "PHYSICAL_GOODS";
-    },
-    salesModelDisplayText() {
-      const type = this.goods.goodsType;
-      const model = this.goods.salesModel;
-      if (type === "APPOINTMENT_GOODS") return "预约型";
-      if (type === "E_COUPON") return "电子卡券";
-      if (type === "VIRTUAL_GOODS") return "虚拟型";
-      if (model === "WHOLESALE") return "批发型";
-      if (model === "RETAIL") return "零售型";
-      return model || "—";
-    },
-    sectionTabs() {
-      const tabs = [
-        { name: "basic", label: "基础信息" },
-        { name: "media", label: "图文信息" },
-      ];
-      if (this.isAppointmentGoods) {
-        tabs.push({ name: "appointment", label: "预约规则" });
-      }
-      tabs.push(
-        { name: "price", label: "价格库存" },
-        { name: "other", label: "其他信息" },
-      );
-      return tabs;
-    },
-    categoryText() {
-      const names = this.goods.categoryName;
-      if (!names || !names.length) return "—";
-      return names.join(" > ");
-    },
-    /** 兼容扁平列表与历史嵌套分组两种 params 结构 */
-    displayGoodsParams() {
-      let list = this.goods.goodsParamsDTOList;
-      if ((!Array.isArray(list) || !list.length) && this.goods.params) {
-        list = this.parseParamsJson(this.goods.params);
-      }
-      if (!Array.isArray(list) || !list.length) return [];
-      const flat = [];
-      list.forEach((item) => {
-        if (Array.isArray(item?.goodsParamsItemDTOList) && item.goodsParamsItemDTOList.length) {
-          item.goodsParamsItemDTOList.forEach((child) => {
-            if (child?.paramName) flat.push(child);
-          });
-        } else if (item?.paramName) {
-          flat.push(item);
-        }
+defineOptions({ name: "goodsDetail" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const goods = ref({});
+const brandList = ref([]);
+const previewGoodsPicture = ref("");
+const goodsPictureVisible = ref(false);
+const wholesaleData = ref([]);
+const skuData = ref([]);
+const activeTab = ref("basic");
+const slotCapacityVisible = ref(false);
+const currentSlotCapacities = ref([]);
+const goodsAuditForm = reactive({
+  auth_flag: 1,
+});
+const auditModalVisible = ref(false);
+const auditSubmitLoading = ref(false);
+
+const isAppointmentGoods = computed(() => {
+  return goods.value.goodsType === "APPOINTMENT_GOODS";
+});
+const needsLogistics = computed(() => {
+  return goods.value.goodsType === "PHYSICAL_GOODS";
+});
+const salesModelDisplayText = computed(() => {
+  const type = goods.value.goodsType;
+  const model = goods.value.salesModel;
+  if (type === "APPOINTMENT_GOODS") return "预约型";
+  if (type === "E_COUPON") return "电子卡券";
+  if (type === "VIRTUAL_GOODS") return "虚拟型";
+  if (model === "WHOLESALE") return "批发型";
+  if (model === "RETAIL") return "零售型";
+  return model || "—";
+});
+const sectionTabs = computed(() => {
+  const tabs = [
+    { name: "basic", label: "基础信息" },
+    { name: "media", label: "图文信息" },
+  ];
+  if (isAppointmentGoods.value) {
+    tabs.push({ name: "appointment", label: "预约规则" });
+  }
+  tabs.push(
+    { name: "price", label: "价格库存" },
+    { name: "other", label: "其他信息" },
+  );
+  return tabs;
+});
+const categoryText = computed(() => {
+  const names = goods.value.categoryName;
+  if (!names || !names.length) return "—";
+  return names.join(" > ");
+});
+/** 兼容扁平列表与历史嵌套分组两种 params 结构 */
+const displayGoodsParams = computed(() => {
+  let list = goods.value.goodsParamsDTOList;
+  if ((!Array.isArray(list) || !list.length) && goods.value.params) {
+    list = parseParamsJson(goods.value.params);
+  }
+  if (!Array.isArray(list) || !list.length) return [];
+  const flat = [];
+  list.forEach((item) => {
+    if (Array.isArray(item?.goodsParamsItemDTOList) && item.goodsParamsItemDTOList.length) {
+      item.goodsParamsItemDTOList.forEach((child) => {
+        if (child?.paramName) flat.push(child);
       });
-      return flat;
-    },
-    appointmentSettings() {
-      return this.goods.appointmentSettings || null;
-    },
-    appointmentSlotTemplate() {
-      return this.goods.appointmentSlotTemplate || null;
-    },
-    appointmentSlots() {
-      return this.appointmentSlotTemplate?.slots || [];
-    },
-    bookableDateText() {
-      const s = this.appointmentSettings;
-      if (!s) return "—";
-      if (s.bookableDateMode === "CUSTOM") {
-        const parts = [];
-        if (s.bookableCustomStartDate && s.bookableCustomEndDate) {
-          parts.push(`${s.bookableCustomStartDate} ~ ${s.bookableCustomEndDate}`);
-        }
-        const weekdays = this.formatWeekdays(s.bookableWeekdays);
-        if (weekdays) parts.push(weekdays);
-        return parts.length ? parts.join("；") : "自定义";
+    } else if (item?.paramName) {
+      flat.push(item);
+    }
+  });
+  return flat;
+});
+const appointmentSettings = computed(() => {
+  return goods.value.appointmentSettings || null;
+});
+const appointmentSlotTemplate = computed(() => {
+  return goods.value.appointmentSlotTemplate || null;
+});
+const appointmentSlots = computed(() => {
+  return appointmentSlotTemplate.value?.slots || [];
+});
+const bookableDateText = computed(() => {
+  const s = appointmentSettings.value;
+  if (!s) return "—";
+  if (s.bookableDateMode === "CUSTOM") {
+    const parts = [];
+    if (s.bookableCustomStartDate && s.bookableCustomEndDate) {
+      parts.push(`${s.bookableCustomStartDate} ~ ${s.bookableCustomEndDate}`);
+    }
+    const weekdays = formatWeekdays(s.bookableWeekdays);
+    if (weekdays) parts.push(weekdays);
+    return parts.length ? parts.join("；") : "自定义";
+  }
+  if (s.bookableDateMode === "EVERY_DAY") return "每天";
+  return "—";
+});
+const bookableDaysText = computed(() => {
+  const s = appointmentSettings.value;
+  if (!s || s.bookableDays == null) return "—";
+  return `对用户展示 ${s.bookableDays} 天内的可预约日期`;
+});
+const advanceBookingText = computed(() => {
+  const s = appointmentSettings.value;
+  if (!s) return "—";
+  if (s.advanceMode === "NONE") return "无需提前预约";
+  if (s.advanceMode === "REQUIRE_HOURS" && s.advanceHours != null) {
+    return `需提前 ${s.advanceHours} 小时进行预约`;
+  }
+  return "—";
+});
+const cancelRuleText = computed(() => {
+  const s = appointmentSettings.value;
+  if (!s) return "—";
+  if (s.cancelMode === "NOT_ALLOWED") return "不允许取消";
+  if (s.cancelMode === "ALLOW_BEFORE_HOURS" && s.cancelAheadHours != null) {
+    return `服务开始 ${s.cancelAheadHours} 小时之前，允许取消并自动退款`;
+  }
+  return "—";
+});
+const formSubmitText = computed(() => {
+  const s = appointmentSettings.value;
+  if (!s) return "—";
+  if (s.formSubmitMode === "PER_APPOINTMENT") return "每个预约提交一次";
+  if (s.formSubmitMode === "PER_ORDER") return "每单提交一次";
+  return "—";
+});
+
+onMounted(() => {
+  loadBrandList();
+  initGoods(route.query.id);
+});
+
+function sectionNo(name) {
+  const index = sectionTabs.value.findIndex((tab) => tab.name === name);
+  return index >= 0 ? index + 1 : "";
+}
+function parseParamsJson(paramsJson) {
+  if (!paramsJson) return [];
+  try {
+    const array = JSON.parse(paramsJson);
+    if (!Array.isArray(array)) return [];
+    const items = [];
+    array.forEach((element) => {
+      if (Array.isArray(element?.goodsParamsItemDTOList)) {
+        items.push(...element.goodsParamsItemDTOList);
+      } else if (element?.paramName) {
+        items.push(element);
       }
-      if (s.bookableDateMode === "EVERY_DAY") return "每天";
-      return "—";
-    },
-    bookableDaysText() {
-      const s = this.appointmentSettings;
-      if (!s || s.bookableDays == null) return "—";
-      return `对用户展示 ${s.bookableDays} 天内的可预约日期`;
-    },
-    advanceBookingText() {
-      const s = this.appointmentSettings;
-      if (!s) return "—";
-      if (s.advanceMode === "NONE") return "无需提前预约";
-      if (s.advanceMode === "REQUIRE_HOURS" && s.advanceHours != null) {
-        return `需提前 ${s.advanceHours} 小时进行预约`;
-      }
-      return "—";
-    },
-    cancelRuleText() {
-      const s = this.appointmentSettings;
-      if (!s) return "—";
-      if (s.cancelMode === "NOT_ALLOWED") return "不允许取消";
-      if (s.cancelMode === "ALLOW_BEFORE_HOURS" && s.cancelAheadHours != null) {
-        return `服务开始 ${s.cancelAheadHours} 小时之前，允许取消并自动退款`;
-      }
-      return "—";
-    },
-    formSubmitText() {
-      const s = this.appointmentSettings;
-      if (!s) return "—";
-      if (s.formSubmitMode === "PER_APPOINTMENT") return "每个预约提交一次";
-      if (s.formSubmitMode === "PER_ORDER") return "每单提交一次";
-      return "—";
-    },
-  },
-  mounted() {
-    this.loadBrandList();
-    this.initGoods(this.$route.query.id);
-  },
-  methods: {
-    sectionNo(name) {
-      const index = this.sectionTabs.findIndex((tab) => tab.name === name);
-      return index >= 0 ? index + 1 : "";
-    },
-    parseParamsJson(paramsJson) {
-      if (!paramsJson) return [];
-      try {
-        const array = JSON.parse(paramsJson);
-        if (!Array.isArray(array)) return [];
-        const items = [];
-        array.forEach((element) => {
-          if (Array.isArray(element?.goodsParamsItemDTOList)) {
-            items.push(...element.goodsParamsItemDTOList);
-          } else if (element?.paramName) {
-            items.push(element);
-          }
-        });
-        return items;
-      } catch {
-        return [];
-      }
-    },
-    jumpToTab(name) {
-      this.activeTab = name;
-      this.$nextTick(() => {
-        const el = document.getElementById(`goods-section-${name}`);
-        el?.scrollIntoView({ behavior: "smooth", block: "start" });
-      });
-    },
-    loadBrandList() {
-      getBrandListData().then((res) => {
-        this.brandList = Array.isArray(res) ? res : res?.result || [];
-      });
-    },
-    initGoods(id) {
-      if (!id) return;
-      this.loading = true;
-      getGoodsDetail(id)
-        .then((res) => {
-          if (!res?.success) return;
-          this.goods = res.result || {};
-          this.skuData = (res.result?.skuList || []).map((sku) => ({
-            id: sku.id,
-            specs: sku.simpleSpecs || sku.goodsName,
-            sn: sku.sn,
-            weight: sku.weight,
-            price: sku.price,
-            image: sku.goodsGalleryList,
-            quantity: sku.quantity,
-            slotCapacities: sku.slotCapacities,
-          }));
-          this.wholesaleData = res.result?.wholesaleList || [];
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    brandText(brandId) {
-      if (!brandId || brandId === "0") return "—";
-      const brand = this.brandList.find((item) => String(item.id) === String(brandId));
-      return brand?.name || brandId;
-    },
-    goodsTypeText(v) {
-      if (v === "PHYSICAL_GOODS") return "实物商品";
-      if (v === "VIRTUAL_GOODS") return "虚拟商品";
-      if (v === "E_COUPON") return "电子卡券";
-      if (v === "APPOINTMENT_GOODS") return "预约商品";
-      return v || "—";
-    },
-    normalizeSlotCapacities(caps) {
-      if (!Array.isArray(caps) || !caps.length) return [];
-      return caps.map((item) => ({
-        startTime: item.startTime || "",
-        endTime: item.endTime || "",
-        capacity: item.slotCapacity ?? item.capacity ?? 0,
+    });
+    return items;
+  } catch {
+    return [];
+  }
+}
+function jumpToTab(name) {
+  activeTab.value = name;
+  nextTick(() => {
+    const el = document.getElementById(`goods-section-${name}`);
+    el?.scrollIntoView({ behavior: "smooth", block: "start" });
+  });
+}
+function loadBrandList() {
+  getBrandListData().then((res) => {
+    brandList.value = Array.isArray(res) ? res : res?.result || [];
+  });
+}
+function initGoods(id) {
+  if (!id) return;
+  loading.value = true;
+  getGoodsDetail(id)
+    .then((res) => {
+      if (!res?.success) return;
+      goods.value = res.result || {};
+      skuData.value = (res.result?.skuList || []).map((sku) => ({
+        id: sku.id,
+        specs: sku.simpleSpecs || sku.goodsName,
+        sn: sku.sn,
+        weight: sku.weight,
+        price: sku.price,
+        image: sku.goodsGalleryList,
+        quantity: sku.quantity,
+        slotCapacities: sku.slotCapacities,
       }));
-    },
-    hasSlotCapacities(row) {
-      return this.slotCapacityCount(row) > 0;
-    },
-    slotCapacityCount(row) {
-      return this.normalizeSlotCapacities(row?.slotCapacities).length;
-    },
-    openSlotCapacityDialog(row) {
-      this.currentSlotCapacities = this.normalizeSlotCapacities(row?.slotCapacities);
-      this.slotCapacityVisible = true;
-    },
-    formatSlotCapacity(capacity) {
-      const value = Number(capacity);
-      if (!value) return "不限制";
-      return String(value);
-    },
-    marketEnableText(v) {
-      if (v === "UPPER") return "上架";
-      if (v === "DOWN") return "下架";
-      return "—";
-    },
-    authFlagText(v) {
-      if (v === "TOBEAUDITED") return "待审核";
-      if (v === "PASS") return "通过";
-      if (v === "REFUSE") return "拒绝";
-      return v || "—";
-    },
-    authFlagTagType(v) {
-      if (v === "PASS") return "success";
-      if (v === "TOBEAUDITED") return "warning";
-      if (v === "REFUSE") return "danger";
-      return "info";
-    },
-    formatServiceModes(modes) {
-      if (!modes || !modes.length) return "—";
-      const map = {
-        IN_STORE: "到店服务",
-        ON_SITE: "上门服务",
-      };
-      return modes.map((m) => map[m] || m).join("、");
-    },
-    formatWeekdays(weekdays) {
-      if (!Array.isArray(weekdays) || !weekdays.length) return "";
-      const map = {
-        1: "周一",
-        2: "周二",
-        3: "周三",
-        4: "周四",
-        5: "周五",
-        6: "周六",
-        7: "周日",
-      };
-      return weekdays.map((d) => map[d] || d).join("、");
-    },
-    handleViewGoodsPicture(url) {
-      this.previewGoodsPicture = url;
-      this.goodsPictureVisible = true;
-    },
-    openAuditModal() {
-      this.goodsAuditForm.auth_flag = 1;
-      this.auditSubmitLoading = false;
-      this.auditModalVisible = true;
-    },
-    submitAudit() {
-      if (!this.goods.id) return;
-      this.auditSubmitLoading = true;
-      const formData = new FormData();
-      formData.append("goodsIds", this.goods.id);
-      formData.append("authFlag", this.goodsAuditForm.auth_flag === 1 ? "PASS" : "REFUSE");
-      authGoods(formData)
-        .then((res) => {
-          if (res.success) {
-            ElMessage.success("审核成功");
-            this.auditModalVisible = false;
-            this.initGoods(this.goods.id);
-          }
-        })
-        .finally(() => {
-          this.auditSubmitLoading = false;
-        });
-    },
-  },
-};
+      wholesaleData.value = res.result?.wholesaleList || [];
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function brandText(brandId) {
+  if (!brandId || brandId === "0") return "—";
+  const brand = brandList.value.find((item) => String(item.id) === String(brandId));
+  return brand?.name || brandId;
+}
+function goodsTypeText(v) {
+  if (v === "PHYSICAL_GOODS") return "实物商品";
+  if (v === "VIRTUAL_GOODS") return "虚拟商品";
+  if (v === "E_COUPON") return "电子卡券";
+  if (v === "APPOINTMENT_GOODS") return "预约商品";
+  return v || "—";
+}
+function normalizeSlotCapacities(caps) {
+  if (!Array.isArray(caps) || !caps.length) return [];
+  return caps.map((item) => ({
+    startTime: item.startTime || "",
+    endTime: item.endTime || "",
+    capacity: item.slotCapacity ?? item.capacity ?? 0,
+  }));
+}
+function hasSlotCapacities(row) {
+  return slotCapacityCount(row) > 0;
+}
+function slotCapacityCount(row) {
+  return normalizeSlotCapacities(row?.slotCapacities).length;
+}
+function openSlotCapacityDialog(row) {
+  currentSlotCapacities.value = normalizeSlotCapacities(row?.slotCapacities);
+  slotCapacityVisible.value = true;
+}
+function formatSlotCapacity(capacity) {
+  const value = Number(capacity);
+  if (!value) return "不限制";
+  return String(value);
+}
+function marketEnableText(v) {
+  if (v === "UPPER") return "上架";
+  if (v === "DOWN") return "下架";
+  return "—";
+}
+function authFlagText(v) {
+  if (v === "TOBEAUDITED") return "待审核";
+  if (v === "PASS") return "通过";
+  if (v === "REFUSE") return "拒绝";
+  return v || "—";
+}
+function authFlagTagType(v) {
+  if (v === "PASS") return "success";
+  if (v === "TOBEAUDITED") return "warning";
+  if (v === "REFUSE") return "danger";
+  return "info";
+}
+function formatServiceModes(modes) {
+  if (!modes || !modes.length) return "—";
+  const map = {
+    IN_STORE: "到店服务",
+    ON_SITE: "上门服务",
+  };
+  return modes.map((m) => map[m] || m).join("、");
+}
+function formatWeekdays(weekdays) {
+  if (!Array.isArray(weekdays) || !weekdays.length) return "";
+  const map = {
+    1: "周一",
+    2: "周二",
+    3: "周三",
+    4: "周四",
+    5: "周五",
+    6: "周六",
+    7: "周日",
+  };
+  return weekdays.map((d) => map[d] || d).join("、");
+}
+function handleViewGoodsPicture(url) {
+  previewGoodsPicture.value = url;
+  goodsPictureVisible.value = true;
+}
+function openAuditModal() {
+  goodsAuditForm.auth_flag = 1;
+  auditSubmitLoading.value = false;
+  auditModalVisible.value = true;
+}
+function submitAudit() {
+  if (!goods.value.id) return;
+  auditSubmitLoading.value = true;
+  const formData = new FormData();
+  formData.append("goodsIds", goods.value.id);
+  formData.append("authFlag", goodsAuditForm.auth_flag === 1 ? "PASS" : "REFUSE");
+  authGoods(formData)
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("审核成功");
+        auditModalVisible.value = false;
+        initGoods(goods.value.id);
+      }
+    })
+    .finally(() => {
+      auditSubmitLoading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/goods/goods-manage/brand.vue b/manager/src/views/goods/goods-manage/brand.vue
index 5e8d77bdc..827535d14 100644
--- a/manager/src/views/goods/goods-manage/brand.vue
+++ b/manager/src/views/goods/goods-manage/brand.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -87,7 +87,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="品牌名称" prop="name">
           <el-input v-model="form.name" clearable style="width: 100%" />
         </el-form-item>
@@ -110,7 +110,7 @@
 
     <el-dialog v-model="picModelFlag" width="1200px" :show-close="true">
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModelFlag"
         @callback="callbackSelected"
@@ -146,13 +146,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted, getCurrentInstance } from "vue";
 import {
   getManagerBrandPage,
   addBrand,
   updateBrand,
   disableBrand,
-  delBrand,
+  delBrand as delBrandApi,
   getCategoryTree,
   getBrandCategoryListData,
   saveBrandCategory,
@@ -162,222 +163,234 @@ import { regular } from "@/utils";
 import { ElMessage, ElMessageBox } from "element-plus";
 import defaultPic from "@/assets/default.png";
 
-export default {
-  name: "brand",
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      defaultPic,
-      loading: true,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      picModelFlag: false,
-      categoryModalVisible: false,
-      categoryModalTitle: "关联分类",
-      categoryTreeLoading: false,
-      categoryTreeData: [],
-      categoryTreeKey: 0,
-      categorySubmitLoading: false,
-      currentBrandId: "",
-      selectedCategoryIds: [],
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      },
-      form: {
-        name: "",
-        logo: "",
-        deleteFlag: "",
-      },
-      formValidate: {
-        name: [regular.REQUIRED, regular.VARCHAR20],
-        logo: [regular.REQUIRED, regular.URL200],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    openLogoPicker() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      this.form.logo = val.url;
-    },
-    buildCategoryTreeNodes(list) {
-      if (!Array.isArray(list) || list.length === 0) return [];
-      return list.map((item) => ({
-        id: item.id,
-        title: item.name,
-        children: this.buildCategoryTreeNodes(item.children || []),
-      }));
-    },
-    async openCategoryModal(row) {
-      this.currentBrandId = row.id;
-      this.categoryModalTitle = "关联分类 - " + (row.name || "");
-      this.categoryModalVisible = true;
-      this.categoryTreeLoading = true;
-      this.categoryTreeKey += 1;
-      this.categoryTreeData = [];
-      this.selectedCategoryIds = [];
-      try {
-        const [treeRes, bindRes] = await Promise.all([
-          getCategoryTree(),
-          getBrandCategoryListData(row.id),
-        ]);
-        const selectedIds = Array.isArray(bindRes?.result)
-          ? bindRes.result
-              .map((x) => (typeof x === "string" ? x : x && x.id))
-              .filter(Boolean)
-          : [];
-        this.selectedCategoryIds = selectedIds;
-        this.categoryTreeData =
-          treeRes && treeRes.success
-            ? this.buildCategoryTreeNodes(treeRes.result || [])
-            : [];
-      } finally {
-        this.categoryTreeLoading = false;
+defineOptions({ name: "brand" });
+
+const { proxy } = getCurrentInstance();
+
+const loading = ref(true);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const picModelFlag = ref(false);
+const categoryModalVisible = ref(false);
+const categoryModalTitle = ref("关联分类");
+const categoryTreeLoading = ref(false);
+const categoryTreeData = ref([]);
+const categoryTreeKey = ref(0);
+const categorySubmitLoading = ref(false);
+const currentBrandId = ref("");
+const selectedCategoryIds = ref([]);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+});
+const form = ref({
+  name: "",
+  logo: "",
+  deleteFlag: "",
+});
+const formValidate = reactive({
+  name: [regular.REQUIRED, regular.VARCHAR20],
+  logo: [regular.REQUIRED, regular.URL200],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+const searchFormRef = ref(null);
+const formRef = ref(null);
+const ossManageRef = ref(null);
+
+function openLogoPicker() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  form.value.logo = val.url;
+}
+
+function buildCategoryTreeNodes(list) {
+  if (!Array.isArray(list) || list.length === 0) return [];
+  return list.map((item) => ({
+    id: item.id,
+    title: item.name,
+    children: buildCategoryTreeNodes(item.children || []),
+  }));
+}
+
+async function openCategoryModal(row) {
+  currentBrandId.value = row.id;
+  categoryModalTitle.value = "关联分类 - " + (row.name || "");
+  categoryModalVisible.value = true;
+  categoryTreeLoading.value = true;
+  categoryTreeKey.value += 1;
+  categoryTreeData.value = [];
+  selectedCategoryIds.value = [];
+  try {
+    const [treeRes, bindRes] = await Promise.all([
+      getCategoryTree(),
+      getBrandCategoryListData(row.id),
+    ]);
+    const selectedIds = Array.isArray(bindRes?.result)
+      ? bindRes.result
+          .map((x) => (typeof x === "string" ? x : x && x.id))
+          .filter(Boolean)
+      : [];
+    selectedCategoryIds.value = selectedIds;
+    categoryTreeData.value =
+      treeRes && treeRes.success
+        ? buildCategoryTreeNodes(treeRes.result || [])
+        : [];
+  } finally {
+    categoryTreeLoading.value = false;
+  }
+}
+
+function onCategoryTreeCheckChange(_data, checkedInfo) {
+  selectedCategoryIds.value = checkedInfo?.checkedKeys || [];
+}
+
+function submitBrandCategory() {
+  if (!currentBrandId.value) return;
+  categorySubmitLoading.value = true;
+  saveBrandCategory(
+    currentBrandId.value,
+    (selectedCategoryIds.value || []).map((id) => String(id))
+  )
+    .then((res) => {
+      categorySubmitLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("操作成功");
+        categoryModalVisible.value = false;
       }
-    },
-    onCategoryTreeCheckChange(_data, checkedInfo) {
-      this.selectedCategoryIds = checkedInfo?.checkedKeys || [];
-    },
-    submitBrandCategory() {
-      if (!this.currentBrandId) return;
-      this.categorySubmitLoading = true;
-      saveBrandCategory(
-        this.currentBrandId,
-        (this.selectedCategoryIds || []).map((id) => String(id))
-      )
-        .then((res) => {
-          this.categorySubmitLoading = false;
-          if (res && res.success) {
-            ElMessage.success("操作成功");
-            this.categoryModalVisible = false;
-          }
-        })
-        .catch(() => {
-          this.categorySubmitLoading = false;
-        });
-    },
-    handleStatusSwitchChange(row, checked) {
-      const disable = !checked;
-      ElMessageBox.confirm(
-        "您确认要" + (disable ? "禁用" : "启用") + "品牌 " + row.name + " ?",
-        disable ? "确认禁用" : "确认启用",
-        { type: "warning" }
-      ).then(() => {
-        return disableBrand(row.id, { disable }).then((res) => {
+    })
+    .catch(() => {
+      categorySubmitLoading.value = false;
+    });
+}
+
+function handleStatusSwitchChange(row, checked) {
+  const disable = !checked;
+  ElMessageBox.confirm(
+    "您确认要" + (disable ? "禁用" : "启用") + "品牌 " + row.name + " ?",
+    disable ? "确认禁用" : "确认启用",
+    { type: "warning" }
+  ).then(() => {
+    return disableBrand(row.id, { disable }).then((res) => {
+      if (res.success) {
+        ElMessage.success("操作成功");
+      }
+      getDataList();
+    });
+  }).catch(() => {
+    nextTick(() => proxy.$forceUpdate());
+  });
+}
+
+function delBrand(row) {
+  ElMessageBox.confirm("您确认要删除 " + row.name + " ?", "确认删除", { type: "warning" }).then(() => {
+    return delBrandApi(row.id).then((res) => {
+      if (res.success) {
+        ElMessage.success("品牌删除成功!");
+        getDataList();
+      }
+    });
+  }).catch(() => {});
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getManagerBrandPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalType.value === 0) {
+        delete form.value.id;
+        addBrand(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
             ElMessage.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
-          this.getDataList();
         });
-      }).catch(() => {
-        this.$nextTick(() => this.$forceUpdate());
-      });
-    },
-    delBrand(row) {
-      ElMessageBox.confirm("您确认要删除 " + row.name + " ?", "确认删除", { type: "warning" }).then(() => {
-        return delBrand(row.id).then((res) => {
+      } else {
+        updateBrand(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            ElMessage.success("品牌删除成功!");
-            this.getDataList();
+            ElMessage.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
         });
-      }).catch(() => {});
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getManagerBrandPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            delete this.form.id;
-            addBrand(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            updateBrand(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加";
-      this.$refs.form?.resetFields();
-      delete this.form.id;
-      this.modalVisible = true;
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑";
-      this.$refs.form?.resetFields();
-      for (const attr in v) {
-        if (v[attr] === null) {
-          v[attr] = "";
-        }
       }
-      const str = JSON.stringify(v);
-      const data = JSON.parse(str);
-      this.form = data;
-      this.modalVisible = true;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加";
+  formRef.value?.resetFields();
+  delete form.value.id;
+  modalVisible.value = true;
+}
+
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑";
+  formRef.value?.resetFields();
+  for (const attr in v) {
+    if (v[attr] === null) {
+      v[attr] = "";
+    }
+  }
+  const str = JSON.stringify(v);
+  const data = JSON.parse(str);
+  form.value = data;
+  modalVisible.value = true;
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/goods/goods-manage/category.vue b/manager/src/views/goods/goods-manage/category.vue
index 63de120c8..c39c73c8a 100644
--- a/manager/src/views/goods/goods-manage/category.vue
+++ b/manager/src/views/goods/goods-manage/category.vue
@@ -62,7 +62,7 @@
         :close-on-click-modal="false"
         destroy-on-close
       >
-        <el-form ref="form" :model="formAdd" label-width="110px" :rules="formValidate">
+        <el-form ref="formRef" :model="formAdd" label-width="110px" :rules="formValidate">
           <el-form-item v-if="showParent" label="上级分类" prop="parentId">
             {{ parentTitle }}
             <el-input v-model="formAdd.parentId" style="display: none" />
@@ -106,7 +106,7 @@
         width="500px"
         :close-on-click-modal="false"
       >
-        <el-form ref="brandForm" :model="brandForm" label-width="100px">
+        <el-form ref="brandFormRef" :model="brandForm" label-width="100px">
           <el-select v-model="brandForm.categoryBrands" filterable multiple style="width: 100%">
             <el-option v-for="item in brandWay" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
@@ -120,7 +120,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import {
   delCategory,
   disableCategory,
@@ -128,241 +129,249 @@ import {
   getCategoryBrandListData,
   getCategoryTree,
   insertCategory,
-  saveCategoryBrand,
+  saveCategoryBrand as apiSaveCategoryBrand,
   updateCategory,
 } from "@/api/goods";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import { regular } from "@/utils";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "goods-category",
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      submitLoading: false,
-      categoryList: [],
-      loading: false,
-      brands: [],
-      categoryId: "",
-      modalType: 0,
-      modalVisible: false,
-      modalBrandVisible: false,
-      modalTitle: "",
-      showParent: false,
-      parentTitle: "",
-      modalBrandTitle: "",
-      formAdd: {
-        parentId: "",
-        name: "",
-        image: "",
-        sortOrder: 0,
-        deleteFlag: false,
-        commissionRate: 0,
-        level: 0,
-      },
-      brandForm: {
-        categoryBrands: [],
-      },
-      brandWay: [],
-      formValidate: {
-        commissionRate: [regular.REQUIRED, regular.INTEGER],
-        name: [regular.REQUIRED, regular.VARCHAR20],
-        sortOrder: [regular.REQUIRED, regular.INTEGER],
-      },
-      tableData: [],
-    };
-  },
-  methods: {
-    normalizeCategoryTree(list) {
-      if (!Array.isArray(list) || list.length === 0) return;
-      list.forEach((item) => {
-        if (!item || typeof item !== "object") return;
-        if (item.deleteFlag === 0) item.deleteFlag = false;
-        else if (item.deleteFlag === 1) item.deleteFlag = true;
-        else item.deleteFlag = !!item.deleteFlag;
-        if (Array.isArray(item.children) && item.children.length) {
-          this.normalizeCategoryTree(item.children);
-        }
-      });
-    },
-    onStatusSwitchChange(row, nextDeleteFlag) {
-      const previousDeleteFlag = !nextDeleteFlag;
-      const isClosing = nextDeleteFlag === true;
-      ElMessageBox.confirm(
-        `您是否要${isClosing ? "关闭" : "开启"}当前分类 ${row.name} 及其子分类?`,
-        isClosing ? "确认关闭" : "确认开启",
-        { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
-      ).then(() => {
-        row._statusLoading = true;
-        return disableCategory(row.id, { enableOperations: isClosing ? true : 0 }).then((res) => {
-          row._statusLoading = false;
-          if (res && res.success) {
-            ElMessage.success("操作成功");
-            this.getAllList();
-            return;
-          }
-          row.deleteFlag = previousDeleteFlag;
-        });
-      }).catch(() => {
-        row.deleteFlag = previousDeleteFlag;
-      });
-    },
-    init() {
-      this.getAllList();
-      this.getBrandList();
-    },
-    getBrandList() {
-      getBrandListData().then((res) => {
-        this.brandWay = res;
-      });
-    },
-    brandOperation(v) {
-      getCategoryBrandListData(v.id).then((res) => {
-        this.categoryId = v.id;
-        this.modalBrandTitle = "品牌关联";
-        this.brandForm.categoryBrands = res.result.map((item) => item.id);
-        this.modalBrandVisible = true;
-      });
-    },
-    saveCategoryBrand() {
-      saveCategoryBrand(this.categoryId, this.brandForm).then((res) => {
-        this.submitLoading = false;
+defineOptions({ name: "goods-category" });
+
+const submitLoading = ref(false);
+const categoryList = ref([]);
+const loading = ref(false);
+const brands = ref([]);
+const categoryId = ref("");
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalBrandVisible = ref(false);
+const modalTitle = ref("");
+const showParent = ref(false);
+const parentTitle = ref("");
+const modalBrandTitle = ref("");
+const formAdd = reactive({
+  parentId: "",
+  name: "",
+  image: "",
+  sortOrder: 0,
+  deleteFlag: false,
+  commissionRate: 0,
+  level: 0,
+});
+const brandForm = reactive({
+  categoryBrands: [],
+});
+const brandWay = ref([]);
+const formValidate = reactive({
+  commissionRate: [regular.REQUIRED, regular.INTEGER],
+  name: [regular.REQUIRED, regular.VARCHAR20],
+  sortOrder: [regular.REQUIRED, regular.INTEGER],
+});
+const tableData = ref([]);
+
+const formRef = ref(null);
+const brandFormRef = ref(null);
+
+function normalizeCategoryTree(list) {
+  if (!Array.isArray(list) || list.length === 0) return;
+  list.forEach((item) => {
+    if (!item || typeof item !== "object") return;
+    if (item.deleteFlag === 0) item.deleteFlag = false;
+    else if (item.deleteFlag === 1) item.deleteFlag = true;
+    else item.deleteFlag = !!item.deleteFlag;
+    if (Array.isArray(item.children) && item.children.length) {
+      normalizeCategoryTree(item.children);
+    }
+  });
+}
+
+function onStatusSwitchChange(row, nextDeleteFlag) {
+  const previousDeleteFlag = !nextDeleteFlag;
+  const isClosing = nextDeleteFlag === true;
+  ElMessageBox.confirm(
+    `您是否要${isClosing ? "关闭" : "开启"}当前分类 ${row.name} 及其子分类?`,
+    isClosing ? "确认关闭" : "确认开启",
+    { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
+  ).then(() => {
+    row._statusLoading = true;
+    return disableCategory(row.id, { enableOperations: isClosing ? true : 0 }).then((res) => {
+      row._statusLoading = false;
+      if (res && res.success) {
+        ElMessage.success("操作成功");
+        getAllList();
+        return;
+      }
+      row.deleteFlag = previousDeleteFlag;
+    });
+  }).catch(() => {
+    row.deleteFlag = previousDeleteFlag;
+  });
+}
+
+function init() {
+  getAllList();
+  getBrandList();
+}
+
+function getBrandList() {
+  getBrandListData().then((res) => {
+    brandWay.value = res;
+  });
+}
+
+function brandOperation(v) {
+  getCategoryBrandListData(v.id).then((res) => {
+    categoryId.value = v.id;
+    modalBrandTitle.value = "品牌关联";
+    brandForm.categoryBrands = res.result.map((item) => item.id);
+    modalBrandVisible.value = true;
+  });
+}
+
+function saveCategoryBrand() {
+  apiSaveCategoryBrand(categoryId.value, brandForm).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+      ElMessage.success("操作成功");
+      modalBrandVisible.value = false;
+    }
+  });
+}
+
+function addChildren(v) {
+  modalType.value = 0;
+  modalTitle.value = "添加子分类";
+  parentTitle.value = v.name;
+  formAdd.level = Number(v.level) + 1;
+  formAdd.commissionRate = v.commissionRate;
+  showParent.value = true;
+  delete formAdd.id;
+  formAdd.parentId = v.id;
+  modalVisible.value = true;
+}
+
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑";
+  formAdd.id = v.id;
+  formAdd.name = v.name;
+  formAdd.level = v.level;
+  formAdd.parentId = v.parentId;
+  formAdd.sortOrder = v.sortOrder;
+  formAdd.commissionRate = v.commissionRate;
+  formAdd.deleteFlag = v.deleteFlag;
+  formAdd.image = v.image;
+  showParent.value = false;
+  modalVisible.value = true;
+}
+
+function addParent() {
+  modalType.value = 0;
+  modalTitle.value = "添加一级分类";
+  parentTitle.value = "顶级分类";
+  showParent.value = true;
+  formRef.value?.resetFields();
+  delete formAdd.id;
+  formAdd.parentId = 0;
+  formAdd.level = 0;
+  modalVisible.value = true;
+}
+
+function Submit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    if (modalType.value === 0) {
+      delete formAdd.id;
+      insertCategory(formAdd).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          ElMessage.success("操作成功");
-          this.modalBrandVisible = false;
+          ElMessage.success("添加成功");
+          getAllList();
+          modalVisible.value = false;
+          formRef.value.resetFields();
         }
       });
-    },
-    addChildren(v) {
-      this.modalType = 0;
-      this.modalTitle = "添加子分类";
-      this.parentTitle = v.name;
-      this.formAdd.level = Number(v.level) + 1;
-      this.formAdd.commissionRate = v.commissionRate;
-      this.showParent = true;
-      delete this.formAdd.id;
-      this.formAdd.parentId = v.id;
-      this.modalVisible = true;
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑";
-      this.formAdd.id = v.id;
-      this.formAdd.name = v.name;
-      this.formAdd.level = v.level;
-      this.formAdd.parentId = v.parentId;
-      this.formAdd.sortOrder = v.sortOrder;
-      this.formAdd.commissionRate = v.commissionRate;
-      this.formAdd.deleteFlag = v.deleteFlag;
-      this.formAdd.image = v.image;
-      this.showParent = false;
-      this.modalVisible = true;
-    },
-    addParent() {
-      this.modalType = 0;
-      this.modalTitle = "添加一级分类";
-      this.parentTitle = "顶级分类";
-      this.showParent = true;
-      this.$refs.form?.resetFields();
-      delete this.formAdd.id;
-      this.formAdd.parentId = 0;
-      this.formAdd.level = 0;
-      this.modalVisible = true;
-    },
-    Submit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        if (this.modalType === 0) {
-          delete this.formAdd.id;
-          insertCategory(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("添加成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.$refs.form.resetFields();
-            }
-          });
-        } else {
-          updateCategory(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("修改成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.$refs.form.resetFields();
-            }
-          });
+    } else {
+      updateCategory(formAdd).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("修改成功");
+          getAllList();
+          modalVisible.value = false;
+          formRef.value.resetFields();
         }
       });
-    },
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
-        return delCategory(v.id).then((res) => {
-          if (res.success) {
-            ElMessage.success("操作成功");
-            this.getAllList();
-          }
-        });
-      }).catch(() => {});
-    },
-    getAllList() {
-      this.loading = true;
-      getCategoryTree()
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            localStorage.setItem("category", JSON.stringify(res.result));
-            this.normalizeCategoryTree(res.result);
-            this.categoryList = JSON.parse(JSON.stringify(res.result));
-            this.tableData = JSON.parse(JSON.stringify(res.result));
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    enable(v) {
-      ElMessageBox.confirm(
-        "您是否要启用当前分类 " + v.name + " 及其子分类?",
-        "确认启用",
-        { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
-      ).then(() => {
-        return disableCategory(v.id, { enableOperations: 0 }).then((res) => {
-          if (res.success) {
-            ElMessage.success("操作成功");
-            this.getAllList();
-          }
-        });
-      }).catch(() => {
-        this.getAllList();
-      });
-    },
-    disable(v) {
-      ElMessageBox.confirm(
-        "您是否要禁用当前分类 " + v.name + " 及其子分类?",
-        "确认禁用",
-        { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
-      ).then(() => {
-        return disableCategory(v.id, { enableOperations: true }).then((res) => {
-          if (res.success) {
-            ElMessage.success("操作成功");
-            this.getAllList();
-          }
-        });
-      }).catch(() => {
-        this.getAllList();
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
+    return delCategory(v.id).then((res) => {
+      if (res.success) {
+        ElMessage.success("操作成功");
+        getAllList();
+      }
+    });
+  }).catch(() => {});
+}
+
+function getAllList() {
+  loading.value = true;
+  getCategoryTree()
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        localStorage.setItem("category", JSON.stringify(res.result));
+        normalizeCategoryTree(res.result);
+        categoryList.value = JSON.parse(JSON.stringify(res.result));
+        tableData.value = JSON.parse(JSON.stringify(res.result));
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function enable(v) {
+  ElMessageBox.confirm(
+    "您是否要启用当前分类 " + v.name + " 及其子分类?",
+    "确认启用",
+    { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
+  ).then(() => {
+    return disableCategory(v.id, { enableOperations: 0 }).then((res) => {
+      if (res.success) {
+        ElMessage.success("操作成功");
+        getAllList();
+      }
+    });
+  }).catch(() => {
+    getAllList();
+  });
+}
+
+function disable(v) {
+  ElMessageBox.confirm(
+    "您是否要禁用当前分类 " + v.name + " 及其子分类?",
+    "确认禁用",
+    { type: "warning", confirmButtonText: "是", cancelButtonText: "否" }
+  ).then(() => {
+    return disableCategory(v.id, { enableOperations: true }).then((res) => {
+      if (res.success) {
+        ElMessage.success("操作成功");
+        getAllList();
+      }
+    });
+  }).catch(() => {
+    getAllList();
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/goods/goods-manage/parameter-edit.vue b/manager/src/views/goods/goods-manage/parameter-edit.vue
index ece22608a..e47fd1c17 100644
--- a/manager/src/views/goods/goods-manage/parameter-edit.vue
+++ b/manager/src/views/goods/goods-manage/parameter-edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="参数名称" prop="paramName">
           <el-input v-model="form.paramName" clearable style="width: 520px" />
         </el-form-item>
@@ -92,7 +92,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getCategoryTree,
   getGoodsParamsDetail,
@@ -102,6 +104,11 @@ import {
 import { regular } from "@/utils";
 import { ElMessage } from "element-plus";
 
+defineOptions({ name: "parameterEdit" });
+
+const route = useRoute();
+const router = useRouter();
+
 const getOptionText = (value) => {
   if (value && typeof value === "object") return value.value;
   return value;
@@ -213,228 +220,228 @@ const buildFormState = (source, parameterId) => {
   return formState;
 };
 
-export default {
-  name: "parameterEdit",
-  data() {
-    return {
-      submitLoading: false,
-      modalType: 0,
-      categoryModalVisible: false,
-      categoryModalTitle: "关联分类",
-      categoryTreeLoading: false,
-      categoryTreeData: [],
-      categoryTreeSource: [],
-      categoryIdNameMap: {},
-      categoryTreeKey: 0,
-      selectedCategoryIds: [],
-      form: {
-        paramName: "",
-        options: [{ value: "" }],
-        required: 0,
-        isIndex: 0,
-        sort: 0,
-        categoryIds: [],
-      },
-      formValidate: {
-        paramName: [regular.REQUIRED, regular.VARCHAR5],
-        options: [{ required: true, validator: validateOptions, trigger: "change" }],
-        required: [{ required: true, validator: validateRadioRequired("请选择是否必填"), trigger: "change" }],
-        isIndex: [{ required: true, validator: validateRadioRequired("请选择是否索引"), trigger: "change" }],
-        sort: [regular.REQUIRED, regular.INTEGER],
-        categoryIds: [
-          {
-            type: "array",
-            required: true,
-            min: 1,
-            message: "请选择关联分类",
-            trigger: "change",
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    id() {
-      return this.$route.query && this.$route.query.id ? String(this.$route.query.id) : "";
+const formRef = ref(null);
+const categoryTree = ref(null);
+
+const submitLoading = ref(false);
+const modalType = ref(0);
+const categoryModalVisible = ref(false);
+const categoryModalTitle = ref("关联分类");
+const categoryTreeLoading = ref(false);
+const categoryTreeData = ref([]);
+const categoryTreeSource = ref([]);
+const categoryIdNameMap = ref({});
+const categoryTreeKey = ref(0);
+const selectedCategoryIds = ref([]);
+const form = ref({
+  paramName: "",
+  options: [{ value: "" }],
+  required: 0,
+  isIndex: 0,
+  sort: 0,
+  categoryIds: [],
+});
+const formValidate = reactive({
+  paramName: [regular.REQUIRED, regular.VARCHAR5],
+  options: [{ required: true, validator: validateOptions, trigger: "change" }],
+  required: [{ required: true, validator: validateRadioRequired("请选择是否必填"), trigger: "change" }],
+  isIndex: [{ required: true, validator: validateRadioRequired("请选择是否索引"), trigger: "change" }],
+  sort: [regular.REQUIRED, regular.INTEGER],
+  categoryIds: [
+    {
+      type: "array",
+      required: true,
+      min: 1,
+      message: "请选择关联分类",
+      trigger: "change",
     },
-    selectedCategoryNamesText() {
-      if (!Array.isArray(this.categoryTreeSource) || this.categoryTreeSource.length === 0) return "";
-      const selectedSet = new Set(toStringArray(this.selectedCategoryIds));
-      const isSelected = (node) => {
-        if (!node) return false;
-        const nodeId = node.id !== undefined && node.id !== null ? String(node.id) : "";
-        if (nodeId && selectedSet.has(nodeId)) return true;
-        const children = Array.isArray(node.children) ? node.children : [];
-        if (children.length === 0) return false;
-        return children.every(isSelected);
-      };
-      const collect = (node, out) => {
-        if (!node) return;
-        if (isSelected(node)) {
-          if (node.name) out.push(node.name);
-          return;
-        }
-        const children = Array.isArray(node.children) ? node.children : [];
-        children.forEach((c) => collect(c, out));
-      };
-      const names = [];
-      this.categoryTreeSource.forEach((n) => collect(n, names));
-      return names.join("，");
-    },
-  },
-  watch: {
-    "form.required"(val) {
-      const n = normalize01(val, 0);
-      if (val !== n) this.form.required = n;
-    },
-    "form.isIndex"(val) {
-      const n = normalize01(val, 0);
-      if (val !== n) this.form.isIndex = n;
-    },
-  },
-  methods: {
-    back() {
-      this.$router.push({ name: "goods-parameter" });
-    },
-    syncCategoryIds(ids) {
-      const categoryIds = toStringArray(ids);
-      this.selectedCategoryIds = categoryIds;
-      if (!this.form) this.form = {};
-      this.form.categoryIds = categoryIds;
-    },
-    touchOptionsValidate() {
-      this.$nextTick(() => {
-        const form = this.$refs.form;
-        if (form && typeof form.validateField === "function") {
-          // validateField rejects on failure; catch to avoid dev-server [object Object] overlay
-          form.validateField("options", () => {});
-        }
-      });
-    },
-    addOptionRow() {
-      if (!Array.isArray(this.form.options)) this.form.options = [];
-      this.form.options.push({ value: "" });
-    },
-    removeOptionRow(index) {
-      if (!Array.isArray(this.form.options)) this.form.options = [];
-      this.form.options.splice(index, 1);
-      this.touchOptionsValidate();
-    },
-    buildCategoryTreeNodes(list) {
-      if (!Array.isArray(list) || list.length === 0) return [];
-      return list.map((item) => ({
-        id: item.id,
-        title: item.name,
-        children: this.buildCategoryTreeNodes(item.children || []),
-      }));
-    },
-    async loadDetail(parameterId) {
-      if (!parameterId) return;
-      const res = await getGoodsParamsDetail(parameterId).catch(() => null);
-      if (!(res && res.success && res.result)) return;
-      const dto = res.result;
-      this.form = buildFormState(dto, parameterId);
-      this.selectedCategoryIds = [...this.form.categoryIds];
-    },
-    async openCategoryModal() {
-      this.categoryModalVisible = true;
-      this.categoryTreeLoading = true;
-      this.categoryTreeKey += 1;
+  ],
+});
+
+const id = computed(() =>
+  route.query && route.query.id ? String(route.query.id) : ""
+);
+const selectedCategoryNamesText = computed(() => {
+  if (!Array.isArray(categoryTreeSource.value) || categoryTreeSource.value.length === 0) return "";
+  const selectedSet = new Set(toStringArray(selectedCategoryIds.value));
+  const isSelected = (node) => {
+    if (!node) return false;
+    const nodeId = node.id !== undefined && node.id !== null ? String(node.id) : "";
+    if (nodeId && selectedSet.has(nodeId)) return true;
+    const children = Array.isArray(node.children) ? node.children : [];
+    if (children.length === 0) return false;
+    return children.every(isSelected);
+  };
+  const collect = (node, out) => {
+    if (!node) return;
+    if (isSelected(node)) {
+      if (node.name) out.push(node.name);
+      return;
+    }
+    const children = Array.isArray(node.children) ? node.children : [];
+    children.forEach((c) => collect(c, out));
+  };
+  const names = [];
+  categoryTreeSource.value.forEach((n) => collect(n, names));
+  return names.join("，");
+});
+
+watch(
+  () => form.value.required,
+  (val) => {
+    const n = normalize01(val, 0);
+    if (val !== n) form.value.required = n;
+  }
+);
+watch(
+  () => form.value.isIndex,
+  (val) => {
+    const n = normalize01(val, 0);
+    if (val !== n) form.value.isIndex = n;
+  }
+);
+
+function back() {
+  router.push({ name: "goods-parameter" });
+}
+function syncCategoryIds(ids) {
+  const categoryIds = toStringArray(ids);
+  selectedCategoryIds.value = categoryIds;
+  if (!form.value) form.value = {};
+  form.value.categoryIds = categoryIds;
+}
+function touchOptionsValidate() {
+  nextTick(() => {
+    const formEl = formRef.value;
+    if (formEl && typeof formEl.validateField === "function") {
+      // validateField rejects on failure; catch to avoid dev-server [object Object] overlay
+      formEl.validateField("options", () => {});
+    }
+  });
+}
+function addOptionRow() {
+  if (!Array.isArray(form.value.options)) form.value.options = [];
+  form.value.options.push({ value: "" });
+}
+function removeOptionRow(index) {
+  if (!Array.isArray(form.value.options)) form.value.options = [];
+  form.value.options.splice(index, 1);
+  touchOptionsValidate();
+}
+function buildCategoryTreeNodes(list) {
+  if (!Array.isArray(list) || list.length === 0) return [];
+  return list.map((item) => ({
+    id: item.id,
+    title: item.name,
+    children: buildCategoryTreeNodes(item.children || []),
+  }));
+}
+async function loadDetail(parameterId) {
+  if (!parameterId) return;
+  const res = await getGoodsParamsDetail(parameterId).catch(() => null);
+  if (!(res && res.success && res.result)) return;
+  const dto = res.result;
+  form.value = buildFormState(dto, parameterId);
+  selectedCategoryIds.value = [...form.value.categoryIds];
+}
+async function openCategoryModal() {
+  categoryModalVisible.value = true;
+  categoryTreeLoading.value = true;
+  categoryTreeKey.value += 1;
+  try {
+    if (!Array.isArray(categoryTreeSource.value) || categoryTreeSource.value.length === 0) {
+      const treeRes = await getCategoryTree();
+      categoryTreeSource.value = treeRes && treeRes.success ? treeRes.result || [] : [];
+      const map = {};
+      buildCategoryIdNameMap(categoryTreeSource.value, map);
+      categoryIdNameMap.value = map;
+    }
+    categoryTreeData.value = buildCategoryTreeNodes(categoryTreeSource.value || []);
+  } finally {
+    categoryTreeLoading.value = false;
+  }
+}
+function onCategoryTreeCheckChange(_data, checkedInfo) {
+  syncCategoryIds(checkedInfo?.checkedKeys || []);
+  nextTick(() => {
+    const formEl = formRef.value;
+    if (formEl && typeof formEl.validateField === "function") {
+      formEl.validateField("categoryIds", () => {});
+    }
+  });
+}
+function initForm() {
+  if (id.value) {
+    modalType.value = 1;
+    const cached = window.sessionStorage.getItem(cacheKey(id.value));
+    if (cached) {
       try {
-        if (!Array.isArray(this.categoryTreeSource) || this.categoryTreeSource.length === 0) {
-          const treeRes = await getCategoryTree();
-          this.categoryTreeSource = treeRes && treeRes.success ? treeRes.result || [] : [];
-          const map = {};
-          buildCategoryIdNameMap(this.categoryTreeSource, map);
-          this.categoryIdNameMap = map;
-        }
-        this.categoryTreeData = this.buildCategoryTreeNodes(this.categoryTreeSource || []);
-      } finally {
-        this.categoryTreeLoading = false;
+        const row = JSON.parse(cached);
+        form.value = buildFormState(row, row.id);
+        selectedCategoryIds.value = [...form.value.categoryIds];
+      } catch (e) {
+        modalType.value = 0;
       }
-    },
-    onCategoryTreeCheckChange(_data, checkedInfo) {
-      this.syncCategoryIds(checkedInfo?.checkedKeys || []);
-      this.$nextTick(() => {
-        const form = this.$refs.form;
-        if (form && typeof form.validateField === "function") {
-          form.validateField("categoryIds", () => {});
-        }
-      });
-    },
-    initForm() {
-      if (this.id) {
-        this.modalType = 1;
-        const cached = window.sessionStorage.getItem(cacheKey(this.id));
-        if (cached) {
-          try {
-            const row = JSON.parse(cached);
-            this.form = buildFormState(row, row.id);
-            this.selectedCategoryIds = [...this.form.categoryIds];
-          } catch (e) {
-            this.modalType = 0;
-          }
-        }
-        this.loadDetail(String(this.id));
-      } else {
-        this.modalType = 0;
-        if (!Array.isArray(this.form.options) || this.form.options.length === 0) {
-          this.form.options = [{ value: "" }];
-        }
-        this.syncCategoryIds([]);
-      }
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        const options = normalizeOptions(this.form.options);
-        const categoryIds = toStringArray(this.form.categoryIds);
-        const payload = {
-          ...this.form,
-          options: options.join(","),
-          required: Number(this.form.required),
-          isIndex: Number(this.form.isIndex),
-          sort: Number(this.form.sort || 0),
-          categoryParameterList: categoryIds.map((categoryId) => ({ categoryId })),
-        };
-        if (this.modalType === 0) {
-          delete payload.id;
-          insertGoodsParams(buildSpringFormPayload(payload))
-            .then((res) => {
-              if (!(res && res.success)) return;
-              ElMessage.success("操作成功");
-              this.back();
-            })
-            .finally(() => {
-              this.submitLoading = false;
-            });
-        } else {
-          updateGoodsParams(buildSpringFormPayload(payload))
-            .then((res) => {
-              if (!(res && res.success)) return;
-              ElMessage.success("操作成功");
-              this.back();
-            })
-            .finally(() => {
-              this.submitLoading = false;
-            });
-        }
-      });
-    },
-  },
-  mounted() {
-    getCategoryTree().then((res) => {
-      if (res && res.success) {
-        this.categoryTreeSource = res.result || [];
-        const map = {};
-        buildCategoryIdNameMap(this.categoryTreeSource, map);
-        this.categoryIdNameMap = map;
-      }
-    });
-    this.initForm();
-  },
-};
+    }
+    loadDetail(String(id.value));
+  } else {
+    modalType.value = 0;
+    if (!Array.isArray(form.value.options) || form.value.options.length === 0) {
+      form.value.options = [{ value: "" }];
+    }
+    syncCategoryIds([]);
+  }
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    const options = normalizeOptions(form.value.options);
+    const categoryIds = toStringArray(form.value.categoryIds);
+    const payload = {
+      ...form.value,
+      options: options.join(","),
+      required: Number(form.value.required),
+      isIndex: Number(form.value.isIndex),
+      sort: Number(form.value.sort || 0),
+      categoryParameterList: categoryIds.map((categoryId) => ({ categoryId })),
+    };
+    if (modalType.value === 0) {
+      delete payload.id;
+      insertGoodsParams(buildSpringFormPayload(payload))
+        .then((res) => {
+          if (!(res && res.success)) return;
+          ElMessage.success("操作成功");
+          back();
+        })
+        .finally(() => {
+          submitLoading.value = false;
+        });
+    } else {
+      updateGoodsParams(buildSpringFormPayload(payload))
+        .then((res) => {
+          if (!(res && res.success)) return;
+          ElMessage.success("操作成功");
+          back();
+        })
+        .finally(() => {
+          submitLoading.value = false;
+        });
+    }
+  });
+}
+
+onMounted(() => {
+  getCategoryTree().then((res) => {
+    if (res && res.success) {
+      categoryTreeSource.value = res.result || [];
+      const map = {};
+      buildCategoryIdNameMap(categoryTreeSource.value, map);
+      categoryIdNameMap.value = map;
+    }
+  });
+  initForm();
+});
 </script>
 
 <style lang="scss">
diff --git a/manager/src/views/goods/goods-manage/parameter.vue b/manager/src/views/goods/goods-manage/parameter.vue
index b9c147ec5..8dd87e279 100644
--- a/manager/src/views/goods/goods-manage/parameter.vue
+++ b/manager/src/views/goods/goods-manage/parameter.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -27,7 +27,7 @@
       <div class="operation padding-row">
         <el-button type="primary" @click="goAdd">添加</el-button>
       </div>
-      <el-table v-loading="loading" border :data="data" ref="table" style="width: 100%">
+      <el-table v-loading="loading" border :data="data" ref="tableRef" style="width: 100%">
         <el-table-column prop="paramName" label="参数名称" width="300" />
         <el-table-column prop="options" label="参数值" min-width="260" show-overflow-tooltip />
         <el-table-column label="必填" width="300" align="center">
@@ -65,83 +65,93 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { deleteParams, getGoodsParamsPage } from "@/api/goods";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "categoryParams",
-  data() {
-    return {
-      submitLoading: false,
-      loading: true,
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        paramName: "",
-      },
-      data: [],
-    };
-  },
-  methods: {
-    isTruthyFlag(val) {
-      return val === 1 || val === "1" || val === true;
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getGoodsParamsPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res && res.success) {
-          this.data = (res.result && res.result.records) || [];
-          this.total = (res.result && res.result.total) || 0;
-        }
-      });
-    },
-    goAdd() {
-      this.$router.push({ name: "goods-parameter-edit" });
-    },
-    goEdit(row) {
-      if (!row || !row.id) return;
-      try {
-        window.sessionStorage.setItem(`goods-parameter-edit:${row.id}`, JSON.stringify(row));
-      } catch (e) {}
-      this.$router.push({ name: "goods-parameter-edit", query: { id: row.id } });
-    },
-    remove(row) {
-      ElMessageBox.confirm("您确认要删除 " + (row.paramName || "") + " ?", "确认删除", { type: "warning" }).then(() => {
-        return deleteParams(row.id).then((res) => {
-          if (res && res.success) {
-            ElMessage.success("删除成功");
-            this.getDataList();
-          }
-        });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "categoryParams" });
+
+const router = useRouter();
+
+const submitLoading = ref(false);
+const loading = ref(true);
+const total = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  paramName: "",
+});
+const data = ref([]);
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+function isTruthyFlag(val) {
+  return val === 1 || val === "1" || val === true;
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getGoodsParamsPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res && res.success) {
+      data.value = (res.result && res.result.records) || [];
+      total.value = (res.result && res.result.total) || 0;
+    }
+  });
+}
+
+function goAdd() {
+  router.push({ name: "goods-parameter-edit" });
+}
+
+function goEdit(row) {
+  if (!row || !row.id) return;
+  try {
+    window.sessionStorage.setItem(`goods-parameter-edit:${row.id}`, JSON.stringify(row));
+  } catch (e) {}
+  router.push({ name: "goods-parameter-edit", query: { id: row.id } });
+}
+
+function remove(row) {
+  ElMessageBox.confirm("您确认要删除 " + (row.paramName || "") + " ?", "确认删除", { type: "warning" }).then(() => {
+    return deleteParams(row.id).then((res) => {
+      if (res && res.success) {
+        ElMessage.success("删除成功");
+        getDataList();
+      }
+    });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss">
 .link-text {
diff --git a/manager/src/views/goods/goods-review/index.vue b/manager/src/views/goods/goods-review/index.vue
index a9fe44ef6..53527324f 100644
--- a/manager/src/views/goods/goods-review/index.vue
+++ b/manager/src/views/goods/goods-review/index.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -170,145 +170,144 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
 import * as API_Member from "@/api/member";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "goods-review",
-  data() {
-    return {
-      infoData: {},
-      infoFlag: false,
-      infoTitle: "",
-      currentReviewId: "",
-      detailStatusReady: false,
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        goodsName: "",
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    gradeTagType(grade) {
-      if (grade === "GOOD") return "success";
-      if (grade === "MODERATE") return "warning";
-      return "danger";
-    },
-    gradeText(grade) {
-      if (grade === "GOOD") return "好评";
-      if (grade === "MODERATE") return "中评";
-      return "差评";
-    },
-    changeSwitchView(status) {
-      if (!this.detailStatusReady || !this.currentReviewId) {
-        return;
+defineOptions({ name: "goods-review" });
+
+// 模板中的 el-form ref（原 ref="searchForm"，为避免与数据 searchForm 同名互相覆盖而改名），script 内未使用
+const searchFormRef = ref(null);
+
+const infoData = ref({});
+const infoFlag = ref(false);
+const infoTitle = ref("");
+const currentReviewId = ref("");
+const detailStatusReady = ref(false);
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  goodsName: "",
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+function gradeTagType(grade) {
+  if (grade === "GOOD") return "success";
+  if (grade === "MODERATE") return "warning";
+  return "danger";
+}
+function gradeText(grade) {
+  if (grade === "GOOD") return "好评";
+  if (grade === "MODERATE") return "中评";
+  return "差评";
+}
+function changeSwitchView(status) {
+  if (!detailStatusReady.value || !currentReviewId.value) {
+    return;
+  }
+  API_Member.updateMemberReview(currentReviewId.value, { status }).then((res) => {
+    if (res.success) {
+      ElMessage.success("修改成功!");
+      getDataList();
+    }
+  });
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function changeSwitch(row) {
+  if (!row || !row.id) {
+    return;
+  }
+  API_Member.updateMemberReview(row.id, { status: row.status }).then((res) => {
+    if (res.success) {
+      getDataList();
+    }
+  });
+}
+function updateTop(v) {
+  const top = !v.top;
+  API_Member.updateMemberReviewTop(v.id, { top }).then((res) => {
+    if (res.success) {
+      data.value = data.value.map((item) => {
+        if (item.goodsId !== v.goodsId) {
+          return item;
+        }
+        return {
+          ...item,
+          top: item.id === v.id ? top : false,
+        };
+      });
+      ElMessage.success(top ? "置顶成功!" : "取消置顶成功!");
+      init();
+    }
+  });
+}
+function getDataList() {
+  loading.value = true;
+  API_Member.getMemberReview(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      API_Member.updateMemberReview(this.currentReviewId, { status }).then((res) => {
-        if (res.success) {
-          ElMessage.success("修改成功!");
-          this.getDataList();
-        }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function info(v) {
+  currentReviewId.value = v.id;
+  detailStatusReady.value = false;
+  infoData.value = {};
+  infoFlag.value = true;
+  infoTitle.value = `用户${v.memberName}的评价详情`;
+  API_Member.getMemberInfoReview(v.id).then((res) => {
+    if (res.result) {
+      infoData.value = res.result;
+      nextTick(() => {
+        detailStatusReady.value = true;
       });
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSwitch(row) {
-      if (!row || !row.id) {
-        return;
-      }
-      API_Member.updateMemberReview(row.id, { status: row.status }).then((res) => {
-        if (res.success) {
-          this.getDataList();
-        }
-      });
-    },
-    updateTop(v) {
-      const top = !v.top;
-      API_Member.updateMemberReviewTop(v.id, { top }).then((res) => {
-        if (res.success) {
-          this.data = this.data.map((item) => {
-            if (item.goodsId !== v.goodsId) {
-              return item;
-            }
-            return {
-              ...item,
-              top: item.id === v.id ? top : false,
-            };
-          });
-          ElMessage.success(top ? "置顶成功!" : "取消置顶成功!");
-          this.init();
-        }
-      });
-    },
-    getDataList() {
-      this.loading = true;
-      API_Member.getMemberReview(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    info(v) {
-      this.currentReviewId = v.id;
-      this.detailStatusReady = false;
-      this.infoData = {};
-      this.infoFlag = true;
-      this.infoTitle = `用户${v.memberName}的评价详情`;
-      API_Member.getMemberInfoReview(v.id).then((res) => {
-        if (res.result) {
-          this.infoData = res.result;
-          this.$nextTick(() => {
-            this.detailStatusReady = true;
-          });
-        }
-      });
-    },
-    onInfoDialogClosed() {
-      this.detailStatusReady = false;
-      this.currentReviewId = "";
-      this.infoData = {};
-    },
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除客户" + v.memberName + "的评论?", "确认删除", { type: "warning" }).then(() => {
-        return API_Member.delMemberReview(v.id).then(() => {
-          ElMessage.success("修改成功");
-          this.init();
-        });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+function onInfoDialogClosed() {
+  detailStatusReady.value = false;
+  currentReviewId.value = "";
+  infoData.value = {};
+}
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除客户" + v.memberName + "的评论?", "确认删除", { type: "warning" }).then(() => {
+    return API_Member.delMemberReview(v.id).then(() => {
+      ElMessage.success("修改成功");
+      init();
+    });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/goods/group/index.vue b/manager/src/views/goods/group/index.vue
index 94aa8184f..cd34556b8 100644
--- a/manager/src/views/goods/group/index.vue
+++ b/manager/src/views/goods/group/index.vue
@@ -36,7 +36,7 @@
     </el-card>
 
     <el-dialog v-model="addFlag" title="添加商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
-      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="90px">
+      <el-form ref="addFormRef" :model="formAdd" :rules="rulesAdd" label-width="90px">
         <el-form-item label="分组名称" prop="groupName" style="width: 90%">
           <el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
         </el-form-item>
@@ -51,7 +51,7 @@
     </el-dialog>
 
     <el-dialog v-model="editFlag" title="编辑商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
-      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="90px">
+      <el-form ref="editFormRef" :model="formEdit" :rules="rulesEdit" label-width="90px">
         <el-input v-model="formEdit.id" style="display: none" />
         <el-form-item label="分组名称" prop="groupName" style="width: 90%">
           <el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
@@ -68,166 +68,173 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted } from "vue";
 import * as API_Goods from "@/api/goods.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "goodsGroup",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-      addFlag: false,
-      editFlag: false,
-      submitAddLoading: false,
-      submitEditLoading: false,
-      formAdd: {
-        groupName: "",
-        description: "",
-      },
-      formEdit: {
-        id: "",
-        groupName: "",
-        description: "",
-      },
-      rulesAdd: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-      rulesEdit: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.getData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      API_Goods.getGoodsGroupByPage(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-          ElMessage.error("加载商品分组失败");
-        });
-    },
-    openAdd() {
-      this.addFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.addForm) this.$refs.addForm.resetFields();
-        this.formAdd = { groupName: "", description: "" };
+defineOptions({ name: "goodsGroup" });
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+const addFlag = ref(false);
+const editFlag = ref(false);
+const submitAddLoading = ref(false);
+const submitEditLoading = ref(false);
+const formAdd = ref({
+  groupName: "",
+  description: "",
+});
+const formEdit = ref({
+  id: "",
+  groupName: "",
+  description: "",
+});
+const rulesAdd = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+const rulesEdit = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+
+const addFormRef = ref(null);
+const editFormRef = ref(null);
+
+function init() {
+  getData();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getData();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getData();
+}
+
+function getData() {
+  loading.value = true;
+  API_Goods.getGoodsGroupByPage(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+      ElMessage.error("加载商品分组失败");
+    });
+}
+
+function openAdd() {
+  addFlag.value = true;
+  nextTick(() => {
+    if (addFormRef.value) addFormRef.value.resetFields();
+    formAdd.value = { groupName: "", description: "" };
+  });
+}
+
+function submitAdd() {
+  addFormRef.value.validate((valid) => {
+    if (!valid) return;
+    submitAddLoading.value = true;
+    API_Goods.addGoodsGroup(formAdd.value)
+      .then((res) => {
+        submitAddLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("添加成功");
+          addFlag.value = false;
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        submitAddLoading.value = false;
+        ElMessage.error("添加失败，请检查权限或后端接口");
       });
-    },
-    submitAdd() {
-      this.$refs.addForm.validate((valid) => {
-        if (!valid) return;
-        this.submitAddLoading = true;
-        API_Goods.addGoodsGroup(this.formAdd)
-          .then((res) => {
-            this.submitAddLoading = false;
-            if (res && res.success) {
-              ElMessage.success("添加成功");
-              this.addFlag = false;
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            this.submitAddLoading = false;
-            ElMessage.error("添加失败，请检查权限或后端接口");
-          });
+  });
+}
+
+function openEdit(row) {
+  editFlag.value = true;
+  submitEditLoading.value = false;
+  API_Goods.getGoodsGroup(row.id)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        formEdit.value = {
+          id: res.result.id,
+          groupName: res.result.groupName || "",
+          description: res.result.description || "",
+        };
+      } else {
+        formEdit.value = {
+          id: row.id,
+          groupName: row.groupName || "",
+          description: row.description || "",
+        };
+      }
+    })
+    .catch(() => {
+      ElMessage.error("获取分组详情失败");
+    });
+}
+
+function submitEdit() {
+  editFormRef.value.validate((valid) => {
+    if (!valid) return;
+    submitEditLoading.value = true;
+    const { id, groupName, description } = formEdit.value;
+    API_Goods.updateGoodsGroup(id, { id, groupName, description })
+      .then((res) => {
+        submitEditLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("修改成功");
+          editFlag.value = false;
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        submitEditLoading.value = false;
+        ElMessage.error("修改失败，请检查权限或后端接口");
       });
-    },
-    openEdit(row) {
-      this.editFlag = true;
-      this.submitEditLoading = false;
-      API_Goods.getGoodsGroup(row.id)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.formEdit = {
-              id: res.result.id,
-              groupName: res.result.groupName || "",
-              description: res.result.description || "",
-            };
-          } else {
-            this.formEdit = {
-              id: row.id,
-              groupName: row.groupName || "",
-              description: row.description || "",
-            };
-          }
-        })
-        .catch(() => {
-          ElMessage.error("获取分组详情失败");
-        });
-    },
-    submitEdit() {
-      this.$refs.editForm.validate((valid) => {
-        if (!valid) return;
-        this.submitEditLoading = true;
-        const { id, groupName, description } = this.formEdit;
-        API_Goods.updateGoodsGroup(id, { id, groupName, description })
-          .then((res) => {
-            this.submitEditLoading = false;
-            if (res && res.success) {
-              ElMessage.success("修改成功");
-              this.editFlag = false;
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            this.submitEditLoading = false;
-            ElMessage.error("修改失败，请检查权限或后端接口");
-          });
+  });
+}
+
+function remove(row) {
+  ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
+    return API_Goods.deleteGoodsGroup(row.id)
+      .then((res) => {
+        if (res && res.success) {
+          ElMessage.success("删除成功");
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        ElMessage.error("删除失败，请检查权限或后端接口");
       });
-    },
-    remove(row) {
-      ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
-        return API_Goods.deleteGoodsGroup(row.id)
-          .then((res) => {
-            if (res && res.success) {
-              ElMessage.success("删除成功");
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            ElMessage.error("删除失败，请检查权限或后端接口");
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/goods/virtual-sales/index.vue b/manager/src/views/goods/virtual-sales/index.vue
index 4a6bed415..01cabe2f8 100644
--- a/manager/src/views/goods/virtual-sales/index.vue
+++ b/manager/src/views/goods/virtual-sales/index.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -68,7 +68,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         :data="data"
         class="mt_10"
@@ -208,7 +208,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import {
   batchUpdateGoodsSkuVirtualSales,
   getGoodsSkuData,
@@ -225,223 +226,222 @@ const VIRTUAL_SALES_FIELDS = [
   "salesVolume",
 ];
 
-export default {
-  name: "goodsVirtualSales",
-  data() {
-    return {
-      loading: true,
-      editModalVisible: false,
-      modalSubmitting: false,
-      modalMode: "single",
-      currentSku: null,
-      currentIndex: -1,
-      selectedRows: [],
-      editForm: {
-        virtualSales: 0,
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        goodsName: "",
-        goodsId: "",
-        sn: "",
-        storeName: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        goodsName: "",
-        goodsId: "",
-        sn: "",
-        storeName: "",
-      };
-      this.getDataList();
-    },
-    changeSort({ prop, order }) {
-      if (!order) {
-        this.searchForm.sort = "create_time";
-        this.searchForm.order = "desc";
-      } else {
-        this.searchForm.sort = prop;
-        this.searchForm.order = order === "ascending" ? "asc" : "desc";
-      }
-      this.getDataList();
-    },
-    handleSelectionChange(selection) {
-      this.selectedRows = selection;
-    },
-    getDataList() {
-      this.loading = true;
-      getGoodsSkuData(this.searchForm)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.data = (res.result.records || []).map((item) => ({
-              ...item,
-              virtualSalesInput: this.getVirtualSalesValue(item),
-              saving: false,
-            }));
-            this.total = res.result.total || 0;
-            this.selectedRows = [];
-          } else {
-            this.data = [];
-            this.total = 0;
-            this.selectedRows = [];
-            ElMessage.error((res && res.message) || "加载规格列表失败");
-          }
-        })
-        .catch(() => {
-          this.data = [];
-          this.total = 0;
-          this.selectedRows = [];
-          ElMessage.error("加载规格列表失败");
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    getVirtualSalesValue(row) {
-      const field = VIRTUAL_SALES_FIELDS.find(
-        (item) => row[item] !== undefined && row[item] !== null && row[item] !== ""
-      );
-      return field ? Number(row[field]) || 0 : 0;
-    },
-    openVirtualSalesModal(row, index) {
-      this.modalMode = "single";
-      this.currentSku = { ...row };
-      this.currentIndex = index;
-      this.editForm.virtualSales = this.getVirtualSalesValue(row);
-      this.editModalVisible = true;
-    },
-    openBatchVirtualSalesModal() {
-      if (!this.selectedRows.length) {
-        ElMessage.warning("请先选择要设置的商品规格");
-        return;
-      }
-      this.modalMode = "batch";
-      this.currentSku = null;
-      this.currentIndex = -1;
-      this.editForm.virtualSales = 0;
-      this.editModalVisible = true;
-    },
-    handleCancelVirtualSales() {
-      if (this.modalSubmitting) return;
-      this.resetVirtualSalesModal();
-    },
-    resetVirtualSalesModal() {
-      this.editModalVisible = false;
-      this.modalMode = "single";
-      this.currentSku = null;
-      this.currentIndex = -1;
-      this.editForm.virtualSales = 0;
-    },
-    handleSubmitVirtualSales() {
-      const virtualSales = Number(this.editForm.virtualSales);
-      if (!Number.isInteger(virtualSales) || virtualSales < 0) {
-        ElMessage.warning("请输入大于等于 0 的整数虚拟销量");
-        return;
-      }
-      if (this.modalMode === "batch") {
-        this.handleBatchSubmitVirtualSales(virtualSales);
-        return;
-      }
-      if (!this.currentSku || this.currentIndex < 0) return;
+defineOptions({ name: "goodsVirtualSales" });
 
-      const currentIndex = this.currentIndex;
-      const currentSkuId = this.currentSku.id;
-      this.modalSubmitting = true;
-      if (this.data[currentIndex]) {
-        this.data[currentIndex].saving = true;
+// 模板 ref（避免与同名数据字段冲突而改名）
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const loading = ref(true);
+const editModalVisible = ref(false);
+const modalSubmitting = ref(false);
+const modalMode = ref("single");
+const currentSku = ref(null);
+const currentIndex = ref(-1);
+const selectedRows = ref([]);
+const editForm = reactive({
+  virtualSales: 0,
+});
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  goodsName: "",
+  goodsId: "",
+  sn: "",
+  storeName: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+    goodsName: "",
+    goodsId: "",
+    sn: "",
+    storeName: "",
+  };
+  getDataList();
+}
+function changeSort({ prop, order }) {
+  if (!order) {
+    searchForm.value.sort = "create_time";
+    searchForm.value.order = "desc";
+  } else {
+    searchForm.value.sort = prop;
+    searchForm.value.order = order === "ascending" ? "asc" : "desc";
+  }
+  getDataList();
+}
+function handleSelectionChange(selection) {
+  selectedRows.value = selection;
+}
+function getDataList() {
+  loading.value = true;
+  getGoodsSkuData(searchForm.value)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        data.value = (res.result.records || []).map((item) => ({
+          ...item,
+          virtualSalesInput: getVirtualSalesValue(item),
+          saving: false,
+        }));
+        total.value = res.result.total || 0;
+        selectedRows.value = [];
+      } else {
+        data.value = [];
+        total.value = 0;
+        selectedRows.value = [];
+        ElMessage.error((res && res.message) || "加载规格列表失败");
       }
-      updateGoodsSkuVirtualSales(currentSkuId, { virtualSales })
-        .then((res) => {
-          if (res && res.success) {
-            if (this.data[currentIndex]) {
-              this.data[currentIndex].virtualSales = virtualSales;
-              this.data[currentIndex].virtualSalesInput = virtualSales;
-            }
-            ElMessage.success("虚拟销量设置成功");
-            this.resetVirtualSalesModal();
-          } else {
-            ElMessage.error((res && res.message) || "规格虚拟销量设置失败");
-          }
-        })
-        .catch(() => {
-          ElMessage.error("规格虚拟销量设置失败");
-        })
-        .finally(() => {
-          if (this.data[currentIndex]) {
-            this.data[currentIndex].saving = false;
-          }
-          this.modalSubmitting = false;
-        });
-    },
-    handleBatchSubmitVirtualSales(virtualSales) {
-      const skuIds = this.selectedRows.map((item) => item.id).filter(Boolean);
-      if (!skuIds.length) {
-        ElMessage.warning("请先选择要设置的商品规格");
-        return;
+    })
+    .catch(() => {
+      data.value = [];
+      total.value = 0;
+      selectedRows.value = [];
+      ElMessage.error("加载规格列表失败");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function getVirtualSalesValue(row) {
+  const field = VIRTUAL_SALES_FIELDS.find(
+    (item) => row[item] !== undefined && row[item] !== null && row[item] !== ""
+  );
+  return field ? Number(row[field]) || 0 : 0;
+}
+function openVirtualSalesModal(row, index) {
+  modalMode.value = "single";
+  currentSku.value = { ...row };
+  currentIndex.value = index;
+  editForm.virtualSales = getVirtualSalesValue(row);
+  editModalVisible.value = true;
+}
+function openBatchVirtualSalesModal() {
+  if (!selectedRows.value.length) {
+    ElMessage.warning("请先选择要设置的商品规格");
+    return;
+  }
+  modalMode.value = "batch";
+  currentSku.value = null;
+  currentIndex.value = -1;
+  editForm.virtualSales = 0;
+  editModalVisible.value = true;
+}
+function handleCancelVirtualSales() {
+  if (modalSubmitting.value) return;
+  resetVirtualSalesModal();
+}
+function resetVirtualSalesModal() {
+  editModalVisible.value = false;
+  modalMode.value = "single";
+  currentSku.value = null;
+  currentIndex.value = -1;
+  editForm.virtualSales = 0;
+}
+function handleSubmitVirtualSales() {
+  const virtualSales = Number(editForm.virtualSales);
+  if (!Number.isInteger(virtualSales) || virtualSales < 0) {
+    ElMessage.warning("请输入大于等于 0 的整数虚拟销量");
+    return;
+  }
+  if (modalMode.value === "batch") {
+    handleBatchSubmitVirtualSales(virtualSales);
+    return;
+  }
+  if (!currentSku.value || currentIndex.value < 0) return;
+
+  const curIndex = currentIndex.value;
+  const currentSkuId = currentSku.value.id;
+  modalSubmitting.value = true;
+  if (data.value[curIndex]) {
+    data.value[curIndex].saving = true;
+  }
+  updateGoodsSkuVirtualSales(currentSkuId, { virtualSales })
+    .then((res) => {
+      if (res && res.success) {
+        if (data.value[curIndex]) {
+          data.value[curIndex].virtualSales = virtualSales;
+          data.value[curIndex].virtualSalesInput = virtualSales;
+        }
+        ElMessage.success("虚拟销量设置成功");
+        resetVirtualSalesModal();
+      } else {
+        ElMessage.error((res && res.message) || "规格虚拟销量设置失败");
       }
-      this.modalSubmitting = true;
-      batchUpdateGoodsSkuVirtualSales({ skuIds, virtualSales })
-        .then((res) => {
-          if (res && res.success) {
-            this.data = this.data.map((item) => {
-              if (!skuIds.includes(item.id)) return item;
-              return {
-                ...item,
-                virtualSales,
-                virtualSalesInput: virtualSales,
-              };
-            });
-            this.selectedRows = [];
-            this.$refs.table?.clearSelection();
-            ElMessage.success("虚拟销量设置成功");
-            this.resetVirtualSalesModal();
-          } else {
-            ElMessage.error((res && res.message) || "虚拟销量设置失败");
-          }
-        })
-        .catch(() => {
-          ElMessage.error("虚拟销量设置失败");
-        })
-        .finally(() => {
-          this.modalSubmitting = false;
+    })
+    .catch(() => {
+      ElMessage.error("规格虚拟销量设置失败");
+    })
+    .finally(() => {
+      if (data.value[curIndex]) {
+        data.value[curIndex].saving = false;
+      }
+      modalSubmitting.value = false;
+    });
+}
+function handleBatchSubmitVirtualSales(virtualSales) {
+  const skuIds = selectedRows.value.map((item) => item.id).filter(Boolean);
+  if (!skuIds.length) {
+    ElMessage.warning("请先选择要设置的商品规格");
+    return;
+  }
+  modalSubmitting.value = true;
+  batchUpdateGoodsSkuVirtualSales({ skuIds, virtualSales })
+    .then((res) => {
+      if (res && res.success) {
+        data.value = data.value.map((item) => {
+          if (!skuIds.includes(item.id)) return item;
+          return {
+            ...item,
+            virtualSales,
+            virtualSalesInput: virtualSales,
+          };
         });
-    },
-    getTotalSales(row) {
-      return (Number(row.buyCount) || 0) + (Number(row.virtualSalesInput) || 0);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+        selectedRows.value = [];
+        tableRef.value?.clearSelection();
+        ElMessage.success("虚拟销量设置成功");
+        resetVirtualSalesModal();
+      } else {
+        ElMessage.error((res && res.message) || "虚拟销量设置失败");
+      }
+    })
+    .catch(() => {
+      ElMessage.error("虚拟销量设置失败");
+    })
+    .finally(() => {
+      modalSubmitting.value = false;
+    });
+}
+function getTotalSales(row) {
+  return (Number(row.buyCount) || 0) + (Number(row.virtualSalesInput) || 0);
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/home/home.vue b/manager/src/views/home/home.vue
index 5f1876c45..30557203c 100644
--- a/manager/src/views/home/home.vue
+++ b/manager/src/views/home/home.vue
@@ -48,37 +48,37 @@
       <h4>今日待办</h4>
       <div class="todo-list flex">
         <div class="todo-item" @click="navigateTo('applyGoods')">
-          <div class="counts">{{ $store.state.notices.goods || 0 }}</div>
+          <div class="counts">{{ notices.goods || 0 }}</div>
           <div>待审核商品</div>
         </div>
         <div class="todo-item" @click="navigateTo('shopAuth')">
-          <div class="counts">{{ $store.state.notices.store || 0 }}</div>
+          <div class="counts">{{ notices.store || 0 }}</div>
           <div>待审核店铺</div>
         </div>
         <div class="todo-item" @click="navigateTo('orderComplaint')">
-          <div class="counts">{{ $store.state.notices.complain || 0 }}</div>
+          <div class="counts">{{ notices.complain || 0 }}</div>
           <div>待审核投诉</div>
         </div>
         <div class="todo-item" @click="navigateTo('afterSaleOrder')">
-          <div class="counts">{{ $store.state.notices.refund || 0 }}</div>
+          <div class="counts">{{ notices.refund || 0 }}</div>
           <div>待审核售后</div>
         </div>
         <div class="todo-item" @click="goDistributionCash">
           <div class="counts">
-            {{ $store.state.notices.distributionCash || 0 }}
+            {{ notices.distributionCash || 0 }}
           </div>
           <div>待审核分销提现</div>
         </div>
         <div class="todo-item" @click="navigateTo('accountStatementBill')">
-          <div class="counts">{{ $store.state.notices.waitPayBill || 0 }}</div>
+          <div class="counts">{{ notices.waitPayBill || 0 }}</div>
           <div>待审核分账</div>
         </div>
         <div class="todo-item" @click="goAppointmentWorkOrders">
-          <div class="counts">{{ $store.state.notices.appointmentWorkOrder || 0 }}</div>
+          <div class="counts">{{ notices.appointmentWorkOrder || 0 }}</div>
           <div>未完成预约工单</div>
         </div>
         <div class="todo-item" @click="goProcurementAudit">
-          <div class="counts">{{ $store.state.notices.procurementAudit || 0 }}</div>
+          <div class="counts">{{ notices.procurementAudit || 0 }}</div>
           <div>待审核采购单</div>
         </div>
       </div>
@@ -237,353 +237,372 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Picture, User, List, DataLine } from "@element-plus/icons-vue";
 import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import * as API_Member from "@/api/member";
-export default {
-  name: "home",
-  components: { Picture, User, List, DataLine },
+import { useAppStore } from "@/stores/app";
 
-  data() {
-    return {
-      topHotGoodsData: [], //热卖商品集合
-      topHotShopsData: [], //热卖店铺集合
-      awaitTodoData: "", //今日待办集合
-      homeData: "", // 首页数据
-      pvChart: "", // 流量统计
-      orderChart: "", // 订单统计
-      historyMemberChart: "", // 最近会员流量统计
-      rangeKey: "LAST_SEVEN",
-      rangeMonth: "",
-      rangeOptions: [
-        { title: "今天", searchType: "TODAY" },
-        { title: "昨天", searchType: "YESTERDAY" },
-        { title: "过去7天", searchType: "LAST_SEVEN" },
-        { title: "过去30天", searchType: "LAST_THIRTY" },
-      ],
-    };
-  },
-  computed: {
-    recentMonths() {
-      const list = [];
-      const now = new Date();
-      for (let i = 0; i < 12; i += 1) {
-        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        list.push({
-          value: `${year}-${month}`,
-          label: `${year}年${month}月`,
+defineOptions({ name: "home" });
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const topHotGoodsData = ref([]); //热卖商品集合
+const topHotShopsData = ref([]); //热卖店铺集合
+const awaitTodoData = ref(""); //今日待办集合
+const homeData = ref(""); // 首页数据
+const pvChart = ref(""); // 流量统计
+const orderChart = ref(""); // 订单统计
+const historyMemberChart = ref(""); // 最近会员流量统计
+const rangeKey = ref("LAST_SEVEN");
+const rangeMonth = ref("");
+const rangeOptions = ref([
+  { title: "今天", searchType: "TODAY" },
+  { title: "昨天", searchType: "YESTERDAY" },
+  { title: "过去7天", searchType: "LAST_SEVEN" },
+  { title: "过去30天", searchType: "LAST_THIRTY" },
+]);
+
+// 原代码未在 data 声明、直接挂 this 的字段，补声明为普通变量
+let orderChartData = []; // 订单图表数据
+let data = []; // 浏览量图表数据
+let chartList = []; // 历史在线人数图表数据
+
+const notices = computed(() => appStore.notices || {});
+
+const recentMonths = computed(() => {
+  const list = [];
+  const now = new Date();
+  for (let i = 0; i < 12; i += 1) {
+    const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    list.push({
+      value: `${year}-${month}`,
+      label: `${year}年${month}月`,
+    });
+  }
+  return list;
+});
+
+const rangeTitle = computed(() => {
+  if (rangeMonth.value) {
+    const found = recentMonths.value.find((item) => item.value === rangeMonth.value);
+    return found ? found.label : rangeMonth.value;
+  }
+  const found = rangeOptions.value.find((item) => item.searchType === rangeKey.value);
+  return found ? found.title : "过去7天";
+});
+
+// 路由跳转
+function navigateTo(name) {
+  router.push({
+    name,
+  });
+}
+
+// 跳转到分销提现，并打开待处理标签页
+function goDistributionCash() {
+  router.push({
+    name: 'distributionCash',
+    query: { tabStatus: 'APPLY' }
+  });
+}
+
+function goAppointmentWorkOrders() {
+  router.push({
+    name: "manager-appointment-work-orders",
+    query: { serviceStatus: "OPEN" },
+  });
+}
+
+function goProcurementAudit() {
+  router.push({
+    name: "manager-procurement-order-list",
+    query: { status: "SUBMITTED" },
+  });
+}
+
+function rangeQuery() {
+  if (rangeMonth.value) {
+    const [year, month] = rangeMonth.value.split("-");
+    return { year, month };
+  }
+  return { searchType: rangeKey.value || "LAST_SEVEN" };
+}
+
+function changeRange(item) {
+  rangeMonth.value = "";
+  rangeKey.value = item.searchType;
+  reloadRange();
+}
+
+function changeMonth(value) {
+  rangeMonth.value = value || "";
+  if (!rangeMonth.value) {
+    rangeKey.value = "LAST_SEVEN";
+  }
+  reloadRange();
+}
+
+function reloadRange() {
+  toHotGoods();
+  topHotShops();
+  getPvChart();
+  initOrderChartList();
+}
+
+// top10热卖商品
+async function toHotGoods() {
+  let res = await hotGoods(rangeQuery());
+  topHotGoodsData.value = res.success ? res.result || [] : [];
+}
+
+// top10热卖店铺
+async function topHotShops() {
+  let res = await hotShops(rangeQuery());
+  topHotShopsData.value = res.success ? res.result || [] : [];
+}
+
+// 今日待办
+async function awaitTodo() {
+  let res = await getNoticePage();
+  res.success ? (awaitTodoData.value = res.result) : "";
+}
+
+//首页统计数据
+async function getHomeData() {
+  let res = await homeStatistics();
+  if (res.success) {
+    const price = res.result.todayOrderPrice;
+    const amount = price === null || price === undefined || price === "" || price === "null"
+      ? 0
+      : Number(price);
+    res.result.todayOrderPrice = Number.isNaN(amount) ? 0 : amount;
+    homeData.value = res.result;
+  }
+}
+
+// 实例化订单图表
+async function initOrderChartList() {
+  orderChart.value ? orderChart.value.clear() : ''
+  const res = await API_Goods.getOrderChart(rangeQuery());
+  if (res.success) {
+    orderChartData = res.result || [];
+
+    if (!orderChart.value) {
+      orderChart.value = new Chart({
+        container: "orderChart",
+        autoFit: true,
+        height: 500,
+        padding: [70, 70, 70, 70],
+      });
+    }
+
+    initOrderChart(); //订单表
+  }
+}
+
+// 订单表
+function initOrderChart() {
+  let chartData = orderChartData || [];
+
+  chartData.forEach((item) => {
+    const time = item.createTime ? String(item.createTime) : "";
+    item.createTime = time.includes(" ") ? time.split(" ")[0] : time;
+    item.title = "交易额";
+  });
+  orderChart.value.data(chartData);
+
+  orderChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
+
+  orderChart.value
+    .line()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("smooth");
+
+  orderChart.value
+    .point()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  orderChart.value.area().position("createTime*price").color("title").shape("smooth");
+
+  orderChart.value.render();
+}
+
+// 浏览量统计图
+function initPvChart() {
+  let uv = [];
+  let pv = [];
+  const rows = Array.isArray(data) ? data : [];
+  rows.forEach((item) => {
+    uv.push({
+      date: item.date,
+      uvNum: item.uvNum,
+      title: "访客数UV",
+      pv: item.uvNum,
+    });
+
+    pv.push({
+      date: item.date,
+      pvNum: item.pvNum,
+      pv: item.pvNum,
+      title: "浏览量PV",
+    });
+  });
+
+  let chartData = [...uv, ...pv];
+
+  pvChart.value.data(chartData);
+
+  pvChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
+
+  pvChart.value
+    .line()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("smooth");
+
+  pvChart.value
+    .point()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  pvChart.value.area().position("date*pv").color("title").shape("smooth");
+
+  pvChart.value.render();
+}
+
+// 浏览量
+async function getPvChart() {
+  pvChart.value ? pvChart.value.clear() : ''
+  API_Member.getStatisticsList(rangeQuery()).then((res) => {
+    if (res.result) {
+      data = res.result || [];
+
+      if (!pvChart.value) {
+        pvChart.value = new Chart({
+          container: "pvChart",
+          autoFit: true,
+          height: 500,
+          padding: [70, 70, 70, 70],
         });
       }
-      return list;
-    },
-    rangeTitle() {
-      if (this.rangeMonth) {
-        const found = this.recentMonths.find((item) => item.value === this.rangeMonth);
-        return found ? found.label : this.rangeMonth;
-      }
-      const found = this.rangeOptions.find((item) => item.searchType === this.rangeKey);
-      return found ? found.title : "过去7天";
-    },
-  },
-  methods: {
-    // 路由跳转
-    navigateTo(name) {
-      this.$router.push({
-        name,
+      initPvChart();
+    }
+  });
+}
+
+// 实例化会员流量图表
+async function initHistoryMemberChartList() {
+  historyMemberChart.value ? historyMemberChart.value.clear() : ''
+  const res = await API_Member.historyMemberChartList();
+  if (res.success) {
+    chartList = res.result;
+
+    if (!historyMemberChart.value) {
+      historyMemberChart.value = new Chart({
+        container: "historyMemberChart",
+        autoFit: true,
+        height: 500,
+        padding: [70, 70, 70, 70],
       });
-    },
-    // 跳转到分销提现，并打开待处理标签页
-    goDistributionCash() {
-      this.$router.push({
-        name: 'distributionCash',
-        query: { tabStatus: 'APPLY' }
-      });
-    },
-    goAppointmentWorkOrders() {
-      this.$router.push({
-        name: "manager-appointment-work-orders",
-        query: { serviceStatus: "OPEN" },
-      });
-    },
-    goProcurementAudit() {
-      this.$router.push({
-        name: "manager-procurement-order-list",
-        query: { status: "SUBMITTED" },
-      });
-    },
-    rangeQuery() {
-      if (this.rangeMonth) {
-        const [year, month] = this.rangeMonth.split("-");
-        return { year, month };
-      }
-      return { searchType: this.rangeKey || "LAST_SEVEN" };
-    },
-    changeRange(item) {
-      this.rangeMonth = "";
-      this.rangeKey = item.searchType;
-      this.reloadRange();
-    },
-    changeMonth(value) {
-      this.rangeMonth = value || "";
-      if (!this.rangeMonth) {
-        this.rangeKey = "LAST_SEVEN";
-      }
-      this.reloadRange();
-    },
-    reloadRange() {
-      this.toHotGoods();
-      this.topHotShops();
-      this.getPvChart();
-      this.initOrderChartList();
-    },
-    // top10热卖商品
-    async toHotGoods() {
-      let res = await hotGoods(this.rangeQuery());
-      this.topHotGoodsData = res.success ? res.result || [] : [];
-    },
+    }
 
-    // top10热卖店铺
-    async topHotShops() {
-      let res = await hotShops(this.rangeQuery());
-      this.topHotShopsData = res.success ? res.result || [] : [];
-    },
-    // 今日待办
-    async awaitTodo() {
-      let res = await getNoticePage();
-      res.success ? (this.awaitTodoData = res.result) : "";
-    },
+    initHistoryMemberChart();
+  }
+}
 
-    //首页统计数据
-    async getHomeData() {
-      let res = await homeStatistics();
-      if (res.success) {
-        const price = res.result.todayOrderPrice;
-        const amount = price === null || price === undefined || price === "" || price === "null"
-          ? 0
-          : Number(price);
-        res.result.todayOrderPrice = Number.isNaN(amount) ? 0 : amount;
-        this.homeData = res.result;
-      }
-    },
+// 历史在线人数
+function initHistoryMemberChart() {
+  // 默认已经加载 legend-filter 交互
+  let chartData = chartList;
+  let num = [];
+  let lastNum = [];
+  chartData.forEach((item) => {
+    num.push({
+      date: item.date.substring(5),
+      title: "最近48小时",
+      num: item.num,
+      res: item.num,
+    });
 
-    // 实例化订单图表
-    async initOrderChartList() {
-      this.orderChart ? this.orderChart.clear() : ''
-      const res = await API_Goods.getOrderChart(this.rangeQuery());
-      if (res.success) {
-        this.orderChartData = res.result || [];
+    lastNum.push({
+      date: item.date.substring(5),
+      title: "上一周期",
+      lastNum: item.lastNum || 0,
+      res: item.lastNum || 0,
+    });
+  });
+  let params = [...num, ...lastNum];
+  historyMemberChart.value.data(params);
 
-        if (!this.orderChart) {
-          this.orderChart = new Chart({
-            container: "orderChart",
-            autoFit: true,
-            height: 500,
-            padding: [70, 70, 70, 70],
-          });
-        }
+  historyMemberChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
 
-        this.initOrderChart(); //订单表
-      }
-    },
+  historyMemberChart.value
+    .line()
+    .position("date*res")
+    .color("title")
+    .label("res")
+    .shape("smooth");
+  historyMemberChart.value
+    .point()
+    .position("date*res")
+    .color("title")
+    .label("res")
+    .shape("circle");
 
-    // 订单表
-    initOrderChart() {
-      let data = this.orderChartData || [];
+  historyMemberChart.value
+    .area()
+    .position("date*res")
+    .color("title")
+    .shape("smooth");
 
-      data.forEach((item) => {
-        const time = item.createTime ? String(item.createTime) : "";
-        item.createTime = time.includes(" ") ? time.split(" ")[0] : time;
-        item.title = "交易额";
-      });
-      this.orderChart.data(data);
+  historyMemberChart.value.render();
+}
 
-      this.orderChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
+// 初始化信息
+function init() {
+  toHotGoods();
+  topHotShops();
+  awaitTodo();
+  getHomeData();
+  getPvChart();
+  initOrderChartList();
+  initHistoryMemberChartList();
+}
 
-      this.orderChart
-        .line()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("smooth");
-
-      this.orderChart
-        .point()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-        this.orderChart.area().position("createTime*price").color("title").shape("smooth");
-
-      this.orderChart.render();
-    },
-
-    // 浏览量统计图
-    initPvChart() {
-      let uv = [];
-      let pv = [];
-      const rows = Array.isArray(this.data) ? this.data : [];
-      rows.forEach((item) => {
-        uv.push({
-          date: item.date,
-          uvNum: item.uvNum,
-          title: "访客数UV",
-          pv: item.uvNum,
-        });
-
-        pv.push({
-          date: item.date,
-          pvNum: item.pvNum,
-          pv: item.pvNum,
-          title: "浏览量PV",
-        });
-      });
-
-      let data = [...uv, ...pv];
-
-      this.pvChart.data(data);
-
-      this.pvChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
-
-      this.pvChart
-        .line()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("smooth");
-
-      this.pvChart
-        .point()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-      this.pvChart.area().position("date*pv").color("title").shape("smooth");
-
-      this.pvChart.render();
-    },
-
-    // 浏览量
-    async getPvChart() {
-      this.pvChart ? this.pvChart.clear() : ''
-      API_Member.getStatisticsList(this.rangeQuery()).then((res) => {
-        if (res.result) {
-          this.data = res.result || [];
-
-          if (!this.pvChart) {
-            this.pvChart = new Chart({
-              container: "pvChart",
-              autoFit: true,
-              height: 500,
-              padding: [70, 70, 70, 70],
-            });
-          }
-          this.initPvChart();
-        }
-      });
-    },
-    // 实例化会员流量图表
-    async initHistoryMemberChartList() {
-      this.historyMemberChart ? this.historyMemberChart.clear() : ''
-      const res = await API_Member.historyMemberChartList();
-      if (res.success) {
-        this.chartList = res.result;
-
-        if (!this.historyMemberChart) {
-          this.historyMemberChart = new Chart({
-            container: "historyMemberChart",
-            autoFit: true,
-            height: 500,
-            padding: [70, 70, 70, 70],
-          });
-        }
-
-        this.initHistoryMemberChart();
-      }
-    },
-    // 历史在线人数
-    initHistoryMemberChart() {
-      // 默认已经加载 legend-filter 交互
-      let data = this.chartList;
-      let num = [];
-      let lastNum = [];
-      data.forEach((item) => {
-        num.push({
-          date: item.date.substring(5),
-          title: "最近48小时",
-          num: item.num,
-          res: item.num,
-        });
-
-        lastNum.push({
-          date: item.date.substring(5),
-          title: "上一周期",
-          lastNum: item.lastNum || 0,
-          res: item.lastNum || 0,
-        });
-      });
-      let params = [...num, ...lastNum];
-      this.historyMemberChart.data(params);
-
-      this.historyMemberChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
-
-      this.historyMemberChart
-        .line()
-        .position("date*res")
-        .color("title")
-        .label("res")
-        .shape("smooth");
-      this.historyMemberChart
-        .point()
-        .position("date*res")
-        .color("title")
-        .label("res")
-        .shape("circle");
-
-      this.historyMemberChart
-        .area()
-        .position("date*res")
-        .color("title")
-        .shape("smooth");
-
-      this.historyMemberChart.render();
-    },
-    // 初始化信息
-    init() {
-      this.toHotGoods();
-      this.topHotShops();
-      this.awaitTodo();
-      this.getHomeData();
-      this.getPvChart();
-      this.initOrderChartList();
-      this.initHistoryMemberChartList();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 @import "./home.scss";
diff --git a/manager/src/views/live/add.vue b/manager/src/views/live/add.vue
index f41f71f08..332402d59 100644
--- a/manager/src/views/live/add.vue
+++ b/manager/src/views/live/add.vue
@@ -4,7 +4,7 @@
       <template #header>
         <span class="page-title">创建直播</span>
       </template>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="live-form">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="live-form">
         <el-form-item label="直播标题" prop="title">
           <el-input
             v-model="form.title"
@@ -68,7 +68,7 @@
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModelFlag"
         @callback="callbackSelected"
@@ -77,11 +77,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Picture } from "@element-plus/icons-vue";
 import { createLive } from "@/api/live";
+import { Message } from "@/utils/message";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
+defineOptions({ name: "live-add" });
+
 function getCharLength(str) {
   if (!str) return 0;
   let len = 0;
@@ -98,88 +103,85 @@ function buildEndTime(startTime, hours = 24) {
   return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
 }
 
-export default {
-  name: "live-add",
-  components: { Picture, ossManage },
-  data() {
-    const validateTitle = (rule, value, callback) => {
-      const len = getCharLength(value);
-      if (len < 6) {
-        callback(new Error("直播间名字最短3个汉字"));
-        return;
-      }
-      if (len > 34) {
-        callback(new Error("直播间名字最长17个汉字"));
-        return;
-      }
-      callback();
-    };
-    return {
-      picModelFlag: false,
-      submitting: false,
-      form: {
-        title: "",
-        displayMode: "0",
-        startTime: "",
-        coverImg: "",
-        liveIntroduce: "",
-      },
-      rules: {
-        title: [
-          { required: true, message: "请输入直播标题", trigger: "blur" },
-          { validator: validateTitle, trigger: "blur" },
-        ],
-        displayMode: [{ required: true, message: "请选择显示模式", trigger: "change" }],
-        startTime: [{ required: true, message: "请选择直播开始时间", trigger: "change" }],
-        coverImg: [{ required: true, message: "请上传直播封面", trigger: "change" }],
-      },
-    };
-  },
-  methods: {
-    openCoverPicker() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (val?.url) {
-        this.form.coverImg = val.url;
-        this.$refs.form?.validateField("coverImg");
-      }
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitting = true;
-        createLive({
-          title: this.form.title,
-          displayMode: this.form.displayMode,
-          coverImg: this.form.coverImg,
-          startTime: this.form.startTime,
-          endTime: buildEndTime(this.form.startTime),
-          liveIntroduce: this.form.liveIntroduce,
-        })
-          .then((res) => {
-            this.submitting = false;
-            if (res.success) {
-              this.$Message.success("创建成功");
-              this.$router.push({ path: "/live-list" });
-            }
-          })
-          .catch(() => {
-            this.submitting = false;
-          });
-      });
-    },
-    handleBack() {
-      this.$router.push({ path: "/live-list" });
-    },
-  },
+const router = useRouter();
+
+const formRef = ref(null);
+const ossManageRef = ref(null);
+
+const picModelFlag = ref(false);
+const submitting = ref(false);
+const form = reactive({
+  title: "",
+  displayMode: "0",
+  startTime: "",
+  coverImg: "",
+  liveIntroduce: "",
+});
+
+const validateTitle = (rule, value, callback) => {
+  const len = getCharLength(value);
+  if (len < 6) {
+    callback(new Error("直播间名字最短3个汉字"));
+    return;
+  }
+  if (len > 34) {
+    callback(new Error("直播间名字最长17个汉字"));
+    return;
+  }
+  callback();
 };
+const rules = {
+  title: [
+    { required: true, message: "请输入直播标题", trigger: "blur" },
+    { validator: validateTitle, trigger: "blur" },
+  ],
+  displayMode: [{ required: true, message: "请选择显示模式", trigger: "change" }],
+  startTime: [{ required: true, message: "请选择直播开始时间", trigger: "change" }],
+  coverImg: [{ required: true, message: "请上传直播封面", trigger: "change" }],
+};
+
+function openCoverPicker() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (val?.url) {
+    form.coverImg = val.url;
+    formRef.value?.validateField("coverImg");
+  }
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitting.value = true;
+    createLive({
+      title: form.title,
+      displayMode: form.displayMode,
+      coverImg: form.coverImg,
+      startTime: form.startTime,
+      endTime: buildEndTime(form.startTime),
+      liveIntroduce: form.liveIntroduce,
+    })
+      .then((res) => {
+        submitting.value = false;
+        if (res.success) {
+          Message.success("创建成功");
+          router.push({ path: "/live-list" });
+        }
+      })
+      .catch(() => {
+        submitting.value = false;
+      });
+  });
+}
+function handleBack() {
+  router.push({ path: "/live-list" });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/components/CommentReview.vue b/manager/src/views/live/components/CommentReview.vue
index 85f102f4a..37820c384 100644
--- a/manager/src/views/live/components/CommentReview.vue
+++ b/manager/src/views/live/components/CommentReview.vue
@@ -193,7 +193,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted } from "vue";
 import { Refresh } from "@element-plus/icons-vue";
 import {
   authLiveMessage,
@@ -204,243 +205,261 @@ import {
   queryLiveMessagePage,
   unblockUser,
 } from "@/api/live";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "CommentReview",
-  components: { Refresh },
-  props: {
-    liveId: {
-      type: String,
-      required: true,
-    },
-    embedded: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "CommentReview" });
+
+const props = defineProps({
+  liveId: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      activeTab: "message",
-      searchKeyword: "",
-      messageLoading: false,
-      userLoading: false,
-      blockLoading: false,
-      messageList: [],
-      userList: [],
-      blockList: [],
-      messagePagination: {
-        pageNumber: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      userPagination: {
-        pageNumber: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      blockPagination: {
-        pageNumber: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      blockDialogVisible: false,
-      blockTarget: null,
-      blockReason: "",
-      blockSubmitting: false,
-    };
+  embedded: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    liveId() {
-      this.loadMessages();
-    },
-  },
-  mounted() {
-    this.loadMessages();
-  },
-  methods: {
-    formatTime(time) {
-      if (!time) return "-";
-      return this.$filters.unixToDate(time);
-    },
-    authStatusText(status) {
-      const map = { PASS: "已通过", REFUSE: "已拒绝", TOBEAUDITED: "待审核" };
-      return map[status] || status || "待审核";
-    },
-    authStatusTagType(status) {
-      const map = { PASS: "success", REFUSE: "danger", TOBEAUDITED: "warning" };
-      return map[status] || "info";
-    },
-    canPassAuth(row) {
-      const status = row?.authStatus;
-      return status === "TOBEAUDITED" || status === "REFUSE" || !status;
-    },
-    canRejectAuth(row) {
-      const status = row?.authStatus;
-      return status === "TOBEAUDITED" || status === "PASS" || !status;
-    },
-    parsePageResult(res) {
-      if (!res) return { records: [], total: 0 };
-      if (res.records) {
-        return { records: res.records || [], total: res.total || 0 };
+});
+
+const activeTab = ref("message");
+const searchKeyword = ref("");
+const messageLoading = ref(false);
+const userLoading = ref(false);
+const blockLoading = ref(false);
+const messageList = ref([]);
+const userList = ref([]);
+const blockList = ref([]);
+const messagePagination = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  total: 0,
+});
+const userPagination = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  total: 0,
+});
+const blockPagination = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  total: 0,
+});
+const blockDialogVisible = ref(false);
+const blockTarget = ref(null);
+const blockReason = ref("");
+const blockSubmitting = ref(false);
+
+watch(
+  () => props.liveId,
+  () => {
+    loadMessages();
+  }
+);
+
+function formatTime(time) {
+  if (!time) return "-";
+  return unixToDate(time);
+}
+
+function authStatusText(status) {
+  const map = { PASS: "已通过", REFUSE: "已拒绝", TOBEAUDITED: "待审核" };
+  return map[status] || status || "待审核";
+}
+
+function authStatusTagType(status) {
+  const map = { PASS: "success", REFUSE: "danger", TOBEAUDITED: "warning" };
+  return map[status] || "info";
+}
+
+function canPassAuth(row) {
+  const status = row?.authStatus;
+  return status === "TOBEAUDITED" || status === "REFUSE" || !status;
+}
+
+function canRejectAuth(row) {
+  const status = row?.authStatus;
+  return status === "TOBEAUDITED" || status === "PASS" || !status;
+}
+
+function parsePageResult(res) {
+  if (!res) return { records: [], total: 0 };
+  if (res.records) {
+    return { records: res.records || [], total: res.total || 0 };
+  }
+  if (res.result?.records) {
+    return { records: res.result.records || [], total: res.result.total || 0 };
+  }
+  if (res.success && res.result) {
+    return { records: res.result.records || [], total: res.result.total || 0 };
+  }
+  return { records: [], total: 0 };
+}
+
+function onTabChange(tab) {
+  if (tab === "message") loadMessages();
+  if (tab === "user") loadUsers();
+  if (tab === "block") loadBlocks();
+}
+
+function loadMessages() {
+  if (!props.liveId) return;
+  messageLoading.value = true;
+  const params = {
+    liveStreamId: props.liveId,
+    pageNumber: messagePagination.pageNumber,
+    pageSize: messagePagination.pageSize,
+  };
+  if (searchKeyword.value?.trim()) {
+    params.keyword = searchKeyword.value.trim();
+  }
+  queryLiveMessagePage(params)
+    .then((res) => {
+      messageLoading.value = false;
+      if (res.success) {
+        const page = parsePageResult(res);
+        messageList.value = page.records;
+        messagePagination.total = page.total;
       }
-      if (res.result?.records) {
-        return { records: res.result.records || [], total: res.result.total || 0 };
+    })
+    .catch(() => {
+      messageLoading.value = false;
+    });
+}
+
+function loadUsers() {
+  if (!props.liveId) return;
+  userLoading.value = true;
+  liveUserList({
+    liveRoomId: props.liveId,
+    pageNumber: userPagination.pageNumber,
+    pageSize: userPagination.pageSize,
+  })
+    .then((res) => {
+      userLoading.value = false;
+      if (res.success) {
+        userList.value = res.result?.records || [];
+        userPagination.total = res.result?.total || 0;
       }
-      if (res.success && res.result) {
-        return { records: res.result.records || [], total: res.result.total || 0 };
+    })
+    .catch(() => {
+      userLoading.value = false;
+    });
+}
+
+function loadBlocks() {
+  if (!props.liveId) return;
+  blockLoading.value = true;
+  getLiveBlockPage({
+    liveRoomId: props.liveId,
+    pageNumber: blockPagination.pageNumber,
+    pageSize: blockPagination.pageSize,
+  })
+    .then((res) => {
+      blockLoading.value = false;
+      const page = parsePageResult(res);
+      blockList.value = page.records;
+      blockPagination.total = page.total;
+    })
+    .catch(() => {
+      blockLoading.value = false;
+    });
+}
+
+function handleAuth(record, authStatus) {
+  authLiveMessage({
+    ...record,
+    authStatus,
+  }).then((res) => {
+    if (res.success) {
+      Message.success("操作成功");
+      loadMessages();
+    }
+  });
+}
+
+function handleToggleMute(record) {
+  const muteFlag = !record.muteFlag;
+  editLiveUserMute({
+    liveUserid: record.id,
+    muteFlag,
+  }).then((res) => {
+    if (res.success) {
+      Message.success(muteFlag ? "已禁言" : "已解除禁言");
+      loadUsers();
+    }
+  });
+}
+
+function handleBlock(record) {
+  blockTarget.value = record;
+  blockReason.value = "";
+  blockDialogVisible.value = true;
+}
+
+function confirmBlock() {
+  if (!blockReason.value?.trim()) {
+    Message.warning("请输入拉黑原因");
+    return;
+  }
+  blockSubmitting.value = true;
+  blockUser({
+    liveRoomId: props.liveId,
+    userId: blockTarget.value?.userId || blockTarget.value?.id,
+    reason: blockReason.value.trim(),
+  })
+    .then((res) => {
+      blockSubmitting.value = false;
+      if (res.success) {
+        Message.success("拉黑成功");
+        blockDialogVisible.value = false;
+        loadUsers();
+        loadBlocks();
       }
-      return { records: [], total: 0 };
-    },
-    onTabChange(tab) {
-      if (tab === "message") this.loadMessages();
-      if (tab === "user") this.loadUsers();
-      if (tab === "block") this.loadBlocks();
-    },
-    loadMessages() {
-      if (!this.liveId) return;
-      this.messageLoading = true;
-      const params = {
-        liveStreamId: this.liveId,
-        pageNumber: this.messagePagination.pageNumber,
-        pageSize: this.messagePagination.pageSize,
-      };
-      if (this.searchKeyword?.trim()) {
-        params.keyword = this.searchKeyword.trim();
-      }
-      queryLiveMessagePage(params)
-        .then((res) => {
-          this.messageLoading = false;
-          if (res.success) {
-            const page = this.parsePageResult(res);
-            this.messageList = page.records;
-            this.messagePagination.total = page.total;
-          }
-        })
-        .catch(() => {
-          this.messageLoading = false;
-        });
-    },
-    loadUsers() {
-      if (!this.liveId) return;
-      this.userLoading = true;
-      liveUserList({
-        liveRoomId: this.liveId,
-        pageNumber: this.userPagination.pageNumber,
-        pageSize: this.userPagination.pageSize,
-      })
-        .then((res) => {
-          this.userLoading = false;
-          if (res.success) {
-            this.userList = res.result?.records || [];
-            this.userPagination.total = res.result?.total || 0;
-          }
-        })
-        .catch(() => {
-          this.userLoading = false;
-        });
-    },
-    loadBlocks() {
-      if (!this.liveId) return;
-      this.blockLoading = true;
-      getLiveBlockPage({
-        liveRoomId: this.liveId,
-        pageNumber: this.blockPagination.pageNumber,
-        pageSize: this.blockPagination.pageSize,
-      })
-        .then((res) => {
-          this.blockLoading = false;
-          const page = this.parsePageResult(res);
-          this.blockList = page.records;
-          this.blockPagination.total = page.total;
-        })
-        .catch(() => {
-          this.blockLoading = false;
-        });
-    },
-    handleAuth(record, authStatus) {
-      authLiveMessage({
-        ...record,
-        authStatus,
-      }).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.loadMessages();
-        }
-      });
-    },
-    handleToggleMute(record) {
-      const muteFlag = !record.muteFlag;
-      editLiveUserMute({
-        liveUserid: record.id,
-        muteFlag,
-      }).then((res) => {
-        if (res.success) {
-          this.$Message.success(muteFlag ? "已禁言" : "已解除禁言");
-          this.loadUsers();
-        }
-      });
-    },
-    handleBlock(record) {
-      this.blockTarget = record;
-      this.blockReason = "";
-      this.blockDialogVisible = true;
-    },
-    confirmBlock() {
-      if (!this.blockReason?.trim()) {
-        this.$Message.warning("请输入拉黑原因");
-        return;
-      }
-      this.blockSubmitting = true;
-      blockUser({
-        liveRoomId: this.liveId,
-        userId: this.blockTarget?.userId || this.blockTarget?.id,
-        reason: this.blockReason.trim(),
-      })
-        .then((res) => {
-          this.blockSubmitting = false;
-          if (res.success) {
-            this.$Message.success("拉黑成功");
-            this.blockDialogVisible = false;
-            this.loadUsers();
-            this.loadBlocks();
-          }
-        })
-        .catch(() => {
-          this.blockSubmitting = false;
-        });
-    },
-    handleUnblock(record) {
-      unblockUser({
-        liveRoomId: this.liveId,
-        userId: record.userId || record.id,
-      }).then((res) => {
-        if (res.success) {
-          this.$Message.success("已解除拉黑");
-          this.loadBlocks();
-        }
-      });
-    },
-    onMessagePageSizeChange() {
-      this.messagePagination.pageNumber = 1;
-      this.loadMessages();
-    },
-    onUserPageSizeChange() {
-      this.userPagination.pageNumber = 1;
-      this.loadUsers();
-    },
-    onBlockPageSizeChange() {
-      this.blockPagination.pageNumber = 1;
-      this.loadBlocks();
-    },
-    handleSearch() {
-      this.messagePagination.pageNumber = 1;
-      this.loadMessages();
-    },
-    handleRefresh() {
-      this.loadMessages();
-    },
-  },
-};
+    })
+    .catch(() => {
+      blockSubmitting.value = false;
+    });
+}
+
+function handleUnblock(record) {
+  unblockUser({
+    liveRoomId: props.liveId,
+    userId: record.userId || record.id,
+  }).then((res) => {
+    if (res.success) {
+      Message.success("已解除拉黑");
+      loadBlocks();
+    }
+  });
+}
+
+function onMessagePageSizeChange() {
+  messagePagination.pageNumber = 1;
+  loadMessages();
+}
+
+function onUserPageSizeChange() {
+  userPagination.pageNumber = 1;
+  loadUsers();
+}
+
+function onBlockPageSizeChange() {
+  blockPagination.pageNumber = 1;
+  loadBlocks();
+}
+
+function handleSearch() {
+  messagePagination.pageNumber = 1;
+  loadMessages();
+}
+
+function handleRefresh() {
+  loadMessages();
+}
+
+onMounted(() => {
+  loadMessages();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/components/Coupon.vue b/manager/src/views/live/components/Coupon.vue
index 844d619f6..cce5783df 100644
--- a/manager/src/views/live/components/Coupon.vue
+++ b/manager/src/views/live/components/Coupon.vue
@@ -105,7 +105,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
 import {
   cancelRecommendLiveCoupon,
   getLiveCouponList,
@@ -114,189 +115,192 @@ import {
   setRecommendLiveCoupon,
 } from "@/api/live";
 import { getPlatformCouponList } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "LiveCoupon",
-  props: {
-    liveId: {
-      type: String,
-      required: true,
-    },
-    liveRoomName: {
-      type: String,
-      default: "",
-    },
+defineOptions({ name: "LiveCoupon" });
+
+const props = defineProps({
+  liveId: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      loading: false,
-      couponList: [],
-      selectedIds: [],
-      pickerVisible: false,
-      pickerLoading: false,
-      pickerSubmitting: false,
-      pickerList: [],
-      pickerTotal: 0,
-      pickerSelected: [],
-      pickerSearch: {
-        pageNumber: 1,
-        pageSize: 10,
-        couponName: "",
-        promotionStatus: "START",
-        sort: "create_time",
-        order: "desc",
-      },
-    };
+  liveRoomName: {
+    type: String,
+    default: "",
   },
-  watch: {
-    liveId() {
-      this.loadCoupons();
-    },
-  },
-  mounted() {
-    this.loadCoupons();
-  },
-  methods: {
-    formatPrice(price) {
-      return this.$filters.unitPrice(price, "￥");
-    },
-    promotionStatusText(status) {
-      const map = { NEW: "未开始", START: "已开始", END: "已结束", CLOSE: "已关闭" };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = { NEW: "info", START: "success", END: "warning", CLOSE: "danger" };
-      return map[status] || "info";
-    },
-    loadCoupons() {
-      if (!this.liveId) return;
-      this.loading = true;
-      getLiveCouponList(this.liveId)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.couponList = res.result || [];
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleSelectionChange(rows) {
-      this.selectedIds = (rows || []).map((r) => r.id);
-    },
-    openCouponSelector() {
-      this.pickerVisible = true;
-      this.pickerSelected = [];
-      this.pickerSearch.pageNumber = 1;
-      this.loadPickerCoupons();
-    },
-    loadPickerCoupons() {
-      this.pickerLoading = true;
-      getPlatformCouponList(this.pickerSearch)
-        .then((res) => {
-          this.pickerLoading = false;
-          if (res.success) {
-            this.pickerList = res.result?.records || [];
-            this.pickerTotal = res.result?.total || 0;
-          }
-        })
-        .catch(() => {
-          this.pickerLoading = false;
-        });
-    },
-    onPickerPageSizeChange() {
-      this.pickerSearch.pageNumber = 1;
-      this.loadPickerCoupons();
-    },
-    handlePickerSelectionChange(rows) {
-      this.pickerSelected = rows || [];
-    },
-    buildLiveCouponPayload(item) {
-      return {
-        couponId: item.id,
-        couponPrice: Number(item.price ?? 0),
-        couponName: item.couponName || "",
-        liveRoomId: this.liveId,
-        liveRoomName: this.liveRoomName || "",
-        hideFlag: false,
-        recommend: false,
-      };
-    },
-    confirmPicker() {
-      if (!this.pickerSelected.length) {
-        this.$Message.warning("请选择优惠券");
-        return;
+});
+
+const table = ref(null);
+const pickerTable = ref(null);
+
+const loading = ref(false);
+const couponList = ref([]);
+const selectedIds = ref([]);
+const pickerVisible = ref(false);
+const pickerLoading = ref(false);
+const pickerSubmitting = ref(false);
+const pickerList = ref([]);
+const pickerTotal = ref(0);
+const pickerSelected = ref([]);
+const pickerSearch = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  couponName: "",
+  promotionStatus: "START",
+  sort: "create_time",
+  order: "desc",
+});
+
+watch(
+  () => props.liveId,
+  () => {
+    loadCoupons();
+  }
+);
+
+onMounted(() => {
+  loadCoupons();
+});
+
+function formatPrice(price) {
+  return unitPrice(price, "￥");
+}
+function promotionStatusText(status) {
+  const map = { NEW: "未开始", START: "已开始", END: "已结束", CLOSE: "已关闭" };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = { NEW: "info", START: "success", END: "warning", CLOSE: "danger" };
+  return map[status] || "info";
+}
+function loadCoupons() {
+  if (!props.liveId) return;
+  loading.value = true;
+  getLiveCouponList(props.liveId)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        couponList.value = res.result || [];
       }
-      const existingCouponIds = new Set(this.couponList.map((c) => String(c.couponId)));
-      const payload = this.pickerSelected
-        .filter((item) => !existingCouponIds.has(String(item.id)))
-        .map((item) => this.buildLiveCouponPayload(item));
-      if (!payload.length) {
-        this.$Message.warning("所选优惠券均已添加");
-        return;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function handleSelectionChange(rows) {
+  selectedIds.value = (rows || []).map((r) => r.id);
+}
+function openCouponSelector() {
+  pickerVisible.value = true;
+  pickerSelected.value = [];
+  pickerSearch.pageNumber = 1;
+  loadPickerCoupons();
+}
+function loadPickerCoupons() {
+  pickerLoading.value = true;
+  getPlatformCouponList(pickerSearch)
+    .then((res) => {
+      pickerLoading.value = false;
+      if (res.success) {
+        pickerList.value = res.result?.records || [];
+        pickerTotal.value = res.result?.total || 0;
       }
-      this.pickerSubmitting = true;
-      saveBatchLiveCoupon(payload)
-        .then((res) => {
-          this.pickerSubmitting = false;
-          if (res.success) {
-            this.$Message.success("添加成功");
-            this.pickerVisible = false;
-            this.loadCoupons();
-          }
-        })
-        .catch(() => {
-          this.pickerSubmitting = false;
-        });
-    },
-    handleRemove(record) {
-      this.$Modal.confirm({
-        title: "确认移除",
-        content: "确定要移除该优惠券吗？",
-        onOk: () => {
-          return removeBatchLiveCoupon([record.id]).then((res) => {
-            if (res.success) {
-              this.$Message.success("移除成功");
-              this.loadCoupons();
-            }
-          });
-        },
-      });
-    },
-    handleBatchRemove() {
-      this.$Modal.confirm({
-        title: "确认批量移除",
-        content: `确定要移除选中的 ${this.selectedIds.length} 个优惠券吗？`,
-        onOk: () => {
-          return removeBatchLiveCoupon(this.selectedIds).then((res) => {
-            if (res.success) {
-              this.$Message.success("移除成功");
-              this.selectedIds = [];
-              this.loadCoupons();
-            }
-          });
-        },
-      });
-    },
-    handleRecommend(record) {
-      setRecommendLiveCoupon(record.id).then((res) => {
+    })
+    .catch(() => {
+      pickerLoading.value = false;
+    });
+}
+function onPickerPageSizeChange() {
+  pickerSearch.pageNumber = 1;
+  loadPickerCoupons();
+}
+function handlePickerSelectionChange(rows) {
+  pickerSelected.value = rows || [];
+}
+function buildLiveCouponPayload(item) {
+  return {
+    couponId: item.id,
+    couponPrice: Number(item.price ?? 0),
+    couponName: item.couponName || "",
+    liveRoomId: props.liveId,
+    liveRoomName: props.liveRoomName || "",
+    hideFlag: false,
+    recommend: false,
+  };
+}
+function confirmPicker() {
+  if (!pickerSelected.value.length) {
+    Message.warning("请选择优惠券");
+    return;
+  }
+  const existingCouponIds = new Set(couponList.value.map((c) => String(c.couponId)));
+  const payload = pickerSelected.value
+    .filter((item) => !existingCouponIds.has(String(item.id)))
+    .map((item) => buildLiveCouponPayload(item));
+  if (!payload.length) {
+    Message.warning("所选优惠券均已添加");
+    return;
+  }
+  pickerSubmitting.value = true;
+  saveBatchLiveCoupon(payload)
+    .then((res) => {
+      pickerSubmitting.value = false;
+      if (res.success) {
+        Message.success("添加成功");
+        pickerVisible.value = false;
+        loadCoupons();
+      }
+    })
+    .catch(() => {
+      pickerSubmitting.value = false;
+    });
+}
+function handleRemove(record) {
+  Modal.confirm({
+    title: "确认移除",
+    content: "确定要移除该优惠券吗？",
+    onOk: () => {
+      return removeBatchLiveCoupon([record.id]).then((res) => {
         if (res.success) {
-          this.$Message.success("已设为推荐");
-          this.loadCoupons();
+          Message.success("移除成功");
+          loadCoupons();
         }
       });
     },
-    handleCancelRecommend(record) {
-      cancelRecommendLiveCoupon(record.id).then((res) => {
+  });
+}
+function handleBatchRemove() {
+  Modal.confirm({
+    title: "确认批量移除",
+    content: `确定要移除选中的 ${selectedIds.value.length} 个优惠券吗？`,
+    onOk: () => {
+      return removeBatchLiveCoupon(selectedIds.value).then((res) => {
         if (res.success) {
-          this.$Message.success("已取消推荐");
-          this.loadCoupons();
+          Message.success("移除成功");
+          selectedIds.value = [];
+          loadCoupons();
         }
       });
     },
-  },
-};
+  });
+}
+function handleRecommend(record) {
+  setRecommendLiveCoupon(record.id).then((res) => {
+    if (res.success) {
+      Message.success("已设为推荐");
+      loadCoupons();
+    }
+  });
+}
+function handleCancelRecommend(record) {
+  cancelRecommendLiveCoupon(record.id).then((res) => {
+    if (res.success) {
+      Message.success("已取消推荐");
+      loadCoupons();
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/components/LiveChatPanel.vue b/manager/src/views/live/components/LiveChatPanel.vue
index 508fbea08..ba68676ed 100644
--- a/manager/src/views/live/components/LiveChatPanel.vue
+++ b/manager/src/views/live/components/LiveChatPanel.vue
@@ -30,136 +30,155 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onBeforeUnmount, ref, toRef, watch } from "vue";
 import Cookies from "js-cookie";
-import { toRef } from "vue";
 import { useChat } from "../composables/useChat";
 import { resolveImConfigFromDetail } from "../composables/useLiveSetting";
 
-export default {
+defineOptions({
   name: "LiveChatPanel",
-  props: {
-    liveId: {
-      type: String,
-      required: true,
-    },
-    liveDetail: {
-      type: Object,
-      default: () => ({}),
-    },
-    active: {
-      type: Boolean,
-      default: true,
-    },
+});
+
+const props = defineProps({
+  liveId: {
+    type: String,
+    required: true,
   },
-  setup(props) {
-    let userInfo = {};
-    try {
-      userInfo = JSON.parse(Cookies.get("userInfoManager") || "{}");
-    } catch {
-      userInfo = {};
+  liveDetail: {
+    type: Object,
+    default: () => ({}),
+  },
+  active: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+let userInfo = {};
+try {
+  userInfo = JSON.parse(Cookies.get("userInfoManager") || "{}");
+} catch {
+  userInfo = {};
+}
+
+const {
+  messageList,
+  chatListRef,
+  bottomAnchorRef,
+  unreadCount,
+  isLoadingHistory,
+  initError,
+  initTencentIm,
+  scrollToBottomAndClearUnread,
+  onScroll,
+  setGroupID,
+  cleanup,
+} = useChat(toRef(props, "liveId"), userInfo, toRef(props, "liveDetail"));
+
+const initializing = ref(false);
+const chatInited = ref(false);
+
+/** 腾讯云 IM 群组：优先后端字段，否则用直播间 ID（与旧版中控台一致） */
+const imGroupId = computed(() => {
+  return props.liveDetail?.imGroupId || props.liveDetail?.groupId || props.liveId || "";
+});
+const imSdkAppId = computed(() => {
+  return resolveImConfigFromDetail(props.liveDetail).sdkAppId;
+});
+const canInitChat = computed(() => {
+  const { sdkAppId, secretKey, userSig } = resolveImConfigFromDetail(props.liveDetail);
+  return !!(imGroupId.value && sdkAppId && (userSig || secretKey));
+});
+
+watch(
+  canInitChat,
+  (ready) => {
+    if (!ready) return;
+    setGroupID(imGroupId.value);
+    if (props.active) {
+      bootstrapChat();
     }
+  },
+  { immediate: true }
+);
 
-    return useChat(toRef(props, "liveId"), userInfo, toRef(props, "liveDetail"));
-  },
-  data() {
-    return {
-      initializing: false,
-      chatInited: false,
-    };
-  },
-  computed: {
-    /** 腾讯云 IM 群组：优先后端字段，否则用直播间 ID（与旧版中控台一致） */
-    imGroupId() {
-      return this.liveDetail?.imGroupId || this.liveDetail?.groupId || this.liveId || "";
-    },
-    imSdkAppId() {
-      return resolveImConfigFromDetail(this.liveDetail).sdkAppId;
-    },
-    canInitChat() {
-      const { sdkAppId, secretKey, userSig } = resolveImConfigFromDetail(this.liveDetail);
-      return !!(this.imGroupId && sdkAppId && (userSig || secretKey));
-    },
-  },
-  watch: {
-    canInitChat: {
-      immediate: true,
-      handler(ready) {
-        if (!ready) return;
-        this.setGroupID(this.imGroupId);
-        if (this.active) {
-          this.bootstrapChat();
-        }
-      },
-    },
-    imGroupId(id) {
-      if (!id) return;
-      this.setGroupID(id);
-    },
-    active(val) {
-      if (val && this.canInitChat && !this.chatInited) {
-        this.bootstrapChat();
-      }
-    },
-    liveId() {
-      this.chatInited = false;
-      this.cleanup();
-      if (this.active && this.canInitChat) {
-        this.bootstrapChat();
-      }
-    },
-    liveDetail: {
-      deep: true,
-      handler(detail, oldDetail) {
-        const nextConfig = resolveImConfigFromDetail(detail);
-        const prevConfig = resolveImConfigFromDetail(oldDetail);
-        if (
-          nextConfig.sdkAppId &&
-          (nextConfig.sdkAppId !== prevConfig.sdkAppId ||
-            nextConfig.secretKey !== prevConfig.secretKey ||
-            nextConfig.userSig !== prevConfig.userSig)
-        ) {
-          this.chatInited = false;
-          this.cleanup();
-          if (this.active && this.canInitChat) {
-            this.bootstrapChat();
-          }
-        }
-      },
-    },
-  },
-  beforeUnmount() {
-    this.cleanup();
-  },
-  methods: {
-    async bootstrapChat() {
-      if (!this.liveId || this.chatInited || this.initializing || !this.canInitChat) {
-        return;
-      }
+watch(imGroupId, (id) => {
+  if (!id) return;
+  setGroupID(id);
+});
 
-      const groupId = this.imGroupId;
-      if (!groupId) {
-        this.initError = "缺少直播间 ID，无法初始化聊天";
-        return;
-      }
-      this.setGroupID(groupId);
+watch(
+  () => props.active,
+  (val) => {
+    if (val && canInitChat.value && !chatInited.value) {
+      bootstrapChat();
+    }
+  }
+);
 
-      this.initializing = true;
-      try {
-        await this.initTencentIm();
-        if (!this.initError) {
-          this.chatInited = true;
-        }
-      } catch (error) {
-        console.error("初始化直播聊天失败:", error);
-        this.initError = "聊天初始化失败，请刷新重试";
-        this.chatInited = false;
-      } finally {
-        this.initializing = false;
+watch(
+  () => props.liveId,
+  () => {
+    chatInited.value = false;
+    cleanup();
+    if (props.active && canInitChat.value) {
+      bootstrapChat();
+    }
+  }
+);
+
+watch(
+  () => props.liveDetail,
+  (detail, oldDetail) => {
+    const nextConfig = resolveImConfigFromDetail(detail);
+    const prevConfig = resolveImConfigFromDetail(oldDetail);
+    if (
+      nextConfig.sdkAppId &&
+      (nextConfig.sdkAppId !== prevConfig.sdkAppId ||
+        nextConfig.secretKey !== prevConfig.secretKey ||
+        nextConfig.userSig !== prevConfig.userSig)
+    ) {
+      chatInited.value = false;
+      cleanup();
+      if (props.active && canInitChat.value) {
+        bootstrapChat();
       }
-    },
+    }
   },
-};
+  { deep: true }
+);
+
+onBeforeUnmount(() => {
+  cleanup();
+});
+
+async function bootstrapChat() {
+  if (!props.liveId || chatInited.value || initializing.value || !canInitChat.value) {
+    return;
+  }
+
+  const groupId = imGroupId.value;
+  if (!groupId) {
+    initError.value = "缺少直播间 ID，无法初始化聊天";
+    return;
+  }
+  setGroupID(groupId);
+
+  initializing.value = true;
+  try {
+    await initTencentIm();
+    if (!initError.value) {
+      chatInited.value = true;
+    }
+  } catch (error) {
+    console.error("初始化直播聊天失败:", error);
+    initError.value = "聊天初始化失败，请刷新重试";
+    chatInited.value = false;
+  } finally {
+    initializing.value = false;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/components/LiveGoods.vue b/manager/src/views/live/components/LiveGoods.vue
index ece6a8e7a..f620c3a9a 100644
--- a/manager/src/views/live/components/LiveGoods.vue
+++ b/manager/src/views/live/components/LiveGoods.vue
@@ -76,7 +76,7 @@
     </div>
     <el-empty v-if="!loading && !goodsList.length" description="暂无直播商品" />
 
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData" />
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData" />
 
     <el-dialog v-model="popularityVisible" title="设置商品热度" width="400px">
       <el-form label-width="80px">
@@ -92,7 +92,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
 import {
   cancelRecommendLiveGoods,
   getLiveGoodsList,
@@ -104,193 +105,208 @@ import {
   setRecommendLiveGoods,
 } from "@/api/live";
 import skuSelect from "@/components/lili-dialog";
+import { Message, Modal } from "@/utils/message";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "LiveGoods",
-  components: { skuSelect },
-  props: {
-    liveId: {
-      type: String,
-      required: true,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "LiveGoods" });
+
+const props = defineProps({
+  liveId: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      loading: false,
-      goodsList: [],
-      selectedIds: [],
-      popularityVisible: false,
-      currentGoods: null,
-      popularityForm: {
-        popularity: 0,
-      },
-    };
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    liveId() {
-      this.loadGoods();
-    },
-  },
-  mounted() {
-    this.loadGoods();
-  },
-  methods: {
-    formatPrice(price) {
-      return this.$filters.unitPrice(price, "￥");
-    },
-    isSellOut(row) {
-      return !!row.soldOutFlag;
-    },
-    buildLiveGoodsPayload(item) {
-      const price = Number(item.price ?? 0);
-      const originPrice = Number(
-        item.originPrice ?? item.cost ?? item.originalPrice ?? price
-      );
-      return {
-        liveRoomId: this.liveId,
-        goodsId: item.goodsId,
-        skuId: item.id || item.skuId,
-        goodsName: item.goodsName || "",
-        stock: String(item.quantity ?? item.stock ?? ""),
-        price,
-        thumbnail: item.thumbnail || "",
-        salesCount: Number(item.salesCount ?? item.buyCount ?? 0),
-        storeId: item.storeId || "",
-        storeName: item.storeName || "",
-        originPrice,
-        sellPoint: item.sellPoint || item.sellingPoint || "",
-        popularity: 0,
-        hideFlag: false,
-        canBuyFlag: true,
-        soldOutFlag: false,
-        recommend: false,
-      };
-    },
-    loadGoods() {
-      if (!this.liveId) return;
-      this.loading = true;
-      getLiveGoodsList(this.liveId)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.goodsList = res.result || [];
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    openChooseGoods() {
-      this.$refs.skuSelect.open("goods");
-      const data = JSON.parse(JSON.stringify(this.goodsList));
-      data.forEach((e) => {
-        if (e.skuId) e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    selectedGoodsData(selected) {
-      if (!selected?.length) return;
-      const existingSkuIds = new Set(this.goodsList.map((g) => String(g.skuId)));
-      const payload = selected
-        .filter((item) => !existingSkuIds.has(String(item.id || item.skuId)))
-        .map((item) => this.buildLiveGoodsPayload(item));
-      if (!payload.length) {
-        this.$Message.warning("所选商品均已添加");
-        return;
+});
+
+const loading = ref(false);
+const goodsList = ref([]);
+const selectedIds = ref([]);
+const popularityVisible = ref(false);
+const currentGoods = ref(null);
+const popularityForm = reactive({
+  popularity: 0,
+});
+
+// 模板 ref：原 ref="skuSelect" 与 import 的组件同名，改名避免互相覆盖
+const skuSelectRef = ref(null);
+
+watch(
+  () => props.liveId,
+  () => {
+    loadGoods();
+  }
+);
+
+function formatPrice(price) {
+  return unitPrice(price, "￥");
+}
+
+function isSellOut(row) {
+  return !!row.soldOutFlag;
+}
+
+function buildLiveGoodsPayload(item) {
+  const price = Number(item.price ?? 0);
+  const originPrice = Number(
+    item.originPrice ?? item.cost ?? item.originalPrice ?? price
+  );
+  return {
+    liveRoomId: props.liveId,
+    goodsId: item.goodsId,
+    skuId: item.id || item.skuId,
+    goodsName: item.goodsName || "",
+    stock: String(item.quantity ?? item.stock ?? ""),
+    price,
+    thumbnail: item.thumbnail || "",
+    salesCount: Number(item.salesCount ?? item.buyCount ?? 0),
+    storeId: item.storeId || "",
+    storeName: item.storeName || "",
+    originPrice,
+    sellPoint: item.sellPoint || item.sellingPoint || "",
+    popularity: 0,
+    hideFlag: false,
+    canBuyFlag: true,
+    soldOutFlag: false,
+    recommend: false,
+  };
+}
+
+function loadGoods() {
+  if (!props.liveId) return;
+  loading.value = true;
+  getLiveGoodsList(props.liveId)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        goodsList.value = res.result || [];
       }
-      saveBatchLiveGoods(payload).then((res) => {
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function openChooseGoods() {
+  skuSelectRef.value.open("goods");
+  const data = JSON.parse(JSON.stringify(goodsList.value));
+  data.forEach((e) => {
+    if (e.skuId) e.id = e.skuId;
+  });
+  skuSelectRef.value.goodsData = data;
+}
+
+function selectedGoodsData(selected) {
+  if (!selected?.length) return;
+  const existingSkuIds = new Set(goodsList.value.map((g) => String(g.skuId)));
+  const payload = selected
+    .filter((item) => !existingSkuIds.has(String(item.id || item.skuId)))
+    .map((item) => buildLiveGoodsPayload(item));
+  if (!payload.length) {
+    Message.warning("所选商品均已添加");
+    return;
+  }
+  saveBatchLiveGoods(payload).then((res) => {
+    if (res.success) {
+      Message.success("添加成功");
+      loadGoods();
+    }
+  });
+}
+
+function handleSelectionChange(rows) {
+  selectedIds.value = (rows || []).map((r) => r.id);
+}
+
+function handleRemove(record) {
+  Modal.confirm({
+    title: "确认移除",
+    content: "确定要移除该商品吗？",
+    onOk: () => {
+      return removeBatchLiveGoods([record.id]).then((res) => {
         if (res.success) {
-          this.$Message.success("添加成功");
-          this.loadGoods();
+          Message.success("移除成功");
+          loadGoods();
         }
       });
     },
-    handleSelectionChange(rows) {
-      this.selectedIds = (rows || []).map((r) => r.id);
-    },
-    handleRemove(record) {
-      this.$Modal.confirm({
-        title: "确认移除",
-        content: "确定要移除该商品吗？",
-        onOk: () => {
-          return removeBatchLiveGoods([record.id]).then((res) => {
-            if (res.success) {
-              this.$Message.success("移除成功");
-              this.loadGoods();
-            }
-          });
-        },
-      });
-    },
-    handleBatchRemove() {
-      this.$Modal.confirm({
-        title: "确认批量移除",
-        content: `确定要移除选中的 ${this.selectedIds.length} 个商品吗？`,
-        onOk: () => {
-          return removeBatchLiveGoods(this.selectedIds).then((res) => {
-            if (res.success) {
-              this.$Message.success("移除成功");
-              this.selectedIds = [];
-              this.loadGoods();
-            }
-          });
-        },
-      });
-    },
-    handleRecommend(record) {
-      setRecommendLiveGoods(record.id).then((res) => {
+  });
+}
+
+function handleBatchRemove() {
+  Modal.confirm({
+    title: "确认批量移除",
+    content: `确定要移除选中的 ${selectedIds.value.length} 个商品吗？`,
+    onOk: () => {
+      return removeBatchLiveGoods(selectedIds.value).then((res) => {
         if (res.success) {
-          this.$Message.success("已设为推荐");
-          this.loadGoods();
+          Message.success("移除成功");
+          selectedIds.value = [];
+          loadGoods();
         }
       });
     },
-    handleCancelRecommend(record) {
-      cancelRecommendLiveGoods(record.id).then((res) => {
-        if (res.success) {
-          this.$Message.success("已取消推荐");
-          this.loadGoods();
-        }
-      });
-    },
-    handleToggleSoldOut(record) {
-      const soldOutFlag = !this.isSellOut(record);
-      setLiveGoodsSoldOut(record.id, soldOutFlag).then((res) => {
-        if (res.success) {
-          this.$Message.success(soldOutFlag ? "已设为售罄" : "已取消售罄");
-          this.loadGoods();
-        }
-      });
-    },
-    openPopularityModal(record) {
-      this.currentGoods = record;
-      getLiveGoodsPopularity(record.id, this.liveId).then((res) => {
-        this.popularityForm.popularity = res.success
-          ? res.result?.popularity ?? record.popularity ?? 0
-          : record.popularity ?? 0;
-        this.popularityVisible = true;
-      });
-    },
-    handleSavePopularity() {
-      if (!this.currentGoods) return;
-      setLiveGoodsPopularity(
-        this.currentGoods.id,
-        this.liveId,
-        this.popularityForm.popularity
-      ).then((res) => {
-        if (res.success) {
-          this.$Message.success("热度设置成功");
-          this.popularityVisible = false;
-          this.loadGoods();
-        }
-      });
-    },
-  },
-};
+  });
+}
+
+function handleRecommend(record) {
+  setRecommendLiveGoods(record.id).then((res) => {
+    if (res.success) {
+      Message.success("已设为推荐");
+      loadGoods();
+    }
+  });
+}
+
+function handleCancelRecommend(record) {
+  cancelRecommendLiveGoods(record.id).then((res) => {
+    if (res.success) {
+      Message.success("已取消推荐");
+      loadGoods();
+    }
+  });
+}
+
+function handleToggleSoldOut(record) {
+  const soldOutFlag = !isSellOut(record);
+  setLiveGoodsSoldOut(record.id, soldOutFlag).then((res) => {
+    if (res.success) {
+      Message.success(soldOutFlag ? "已设为售罄" : "已取消售罄");
+      loadGoods();
+    }
+  });
+}
+
+function openPopularityModal(record) {
+  currentGoods.value = record;
+  getLiveGoodsPopularity(record.id, props.liveId).then((res) => {
+    popularityForm.popularity = res.success
+      ? res.result?.popularity ?? record.popularity ?? 0
+      : record.popularity ?? 0;
+    popularityVisible.value = true;
+  });
+}
+
+function handleSavePopularity() {
+  if (!currentGoods.value) return;
+  setLiveGoodsPopularity(
+    currentGoods.value.id,
+    props.liveId,
+    popularityForm.popularity
+  ).then((res) => {
+    if (res.success) {
+      Message.success("热度设置成功");
+      popularityVisible.value = false;
+      loadGoods();
+    }
+  });
+}
+
+onMounted(() => {
+  loadGoods();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/components/LivePurchaseRecords.vue b/manager/src/views/live/components/LivePurchaseRecords.vue
index ac2374f97..bb7681b00 100644
--- a/manager/src/views/live/components/LivePurchaseRecords.vue
+++ b/manager/src/views/live/components/LivePurchaseRecords.vue
@@ -76,142 +76,144 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
 import { DocumentCopy } from "@element-plus/icons-vue";
 import { queryLiveOrderPage } from "@/api/live";
+import { Message } from "@/utils/message";
+import { unixToDate, unitPrice } from "@/utils/filters";
 
-export default {
-  name: "LivePurchaseRecords",
-  components: { DocumentCopy },
-  props: {
-    liveId: {
-      type: String,
-      required: true,
-    },
+defineOptions({ name: "LivePurchaseRecords" });
+
+const props = defineProps({
+  liveId: {
+    type: String,
+    required: true,
   },
-  data() {
-    return {
-      loading: false,
-      orderList: [],
-      pagination: {
-        pageNumber: 1,
-        pageSize: 5,
-        total: 0,
+});
+
+const loading = ref(false);
+const orderList = ref([]);
+const pagination = reactive({
+  pageNumber: 1,
+  pageSize: 5,
+  total: 0,
+});
+
+watch(
+  () => props.liveId,
+  () => {
+    pagination.pageNumber = 1;
+    loadData();
+  }
+);
+
+onMounted(() => {
+  loadData();
+});
+
+function refresh() {
+  loadData();
+}
+function formatTime(time) {
+  if (!time) return "-";
+  if (typeof time === "string" && time.includes("-")) return time;
+  const ts = typeof time === "number" ? (time > 1e12 ? time / 1000 : time) : time;
+  return unixToDate(ts);
+}
+function formatPrice(val) {
+  return unitPrice(val, "￥");
+}
+function getOrderItems(order) {
+  if (order.orderItems?.length) return order.orderItems;
+  if (order.groupGoodsId) {
+    return [
+      {
+        image: order.groupImages,
+        name: order.groupName,
+        goodsPrice: order.groupGoodsPrice,
+        num: order.groupNum,
       },
-    };
-  },
-  watch: {
-    liveId() {
-      this.pagination.pageNumber = 1;
-      this.loadData();
-    },
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    refresh() {
-      this.loadData();
-    },
-    formatTime(time) {
-      if (!time) return "-";
-      if (typeof time === "string" && time.includes("-")) return time;
-      const ts = typeof time === "number" ? (time > 1e12 ? time / 1000 : time) : time;
-      return this.$filters.unixToDate(ts);
-    },
-    formatPrice(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    getOrderItems(order) {
-      if (order.orderItems?.length) return order.orderItems;
-      if (order.groupGoodsId) {
-        return [
-          {
-            image: order.groupImages,
-            name: order.groupName,
-            goodsPrice: order.groupGoodsPrice,
-            num: order.groupNum,
-          },
-        ];
+    ];
+  }
+  return [];
+}
+function clientTypeText(v) {
+  const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
+  return map[v] || v || "-";
+}
+function clientTypeDotClass(v) {
+  const map = { H5: "warning", PC: "primary", WECHAT_MP: "success", APP: "info" };
+  return map[v] || "info";
+}
+function orderPromotionText(v) {
+  const map = {
+    NORMAL: "普通订单",
+    PINTUAN: "拼团订单",
+    GIFT: "赠品订单",
+    POINTS: "积分订单",
+    KANJIA: "砍价订单",
+  };
+  return map[v] || v || "-";
+}
+function orderStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    STAY_PICKED_UP: "待自提",
+    PARTS_DELIVERED: "部分发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已取消",
+  };
+  return map[v] || v || "-";
+}
+function orderStatusDotClass(v) {
+  const map = {
+    UNPAID: "danger",
+    PAID: "primary",
+    UNDELIVERED: "info",
+    STAY_PICKED_UP: "info",
+    PARTS_DELIVERED: "warning",
+    DELIVERED: "warning",
+    COMPLETED: "success",
+    TAKE: "warning",
+    CANCELLED: "danger",
+  };
+  return map[v] || "info";
+}
+function copySn(sn) {
+  if (!sn) return;
+  navigator.clipboard.writeText(sn);
+  Message.success("订单编号已复制");
+}
+function onPageSizeChange() {
+  pagination.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  if (!props.liveId) return;
+  loading.value = true;
+  queryLiveOrderPage({
+    liveRoomId: props.liveId,
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
+  })
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        orderList.value = res.result?.records || [];
+        pagination.total = res.result?.total || 0;
       }
-      return [];
-    },
-    clientTypeText(v) {
-      const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
-      return map[v] || v || "-";
-    },
-    clientTypeDotClass(v) {
-      const map = { H5: "warning", PC: "primary", WECHAT_MP: "success", APP: "info" };
-      return map[v] || "info";
-    },
-    orderPromotionText(v) {
-      const map = {
-        NORMAL: "普通订单",
-        PINTUAN: "拼团订单",
-        GIFT: "赠品订单",
-        POINTS: "积分订单",
-        KANJIA: "砍价订单",
-      };
-      return map[v] || v || "-";
-    },
-    orderStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        STAY_PICKED_UP: "待自提",
-        PARTS_DELIVERED: "部分发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已取消",
-      };
-      return map[v] || v || "-";
-    },
-    orderStatusDotClass(v) {
-      const map = {
-        UNPAID: "danger",
-        PAID: "primary",
-        UNDELIVERED: "info",
-        STAY_PICKED_UP: "info",
-        PARTS_DELIVERED: "warning",
-        DELIVERED: "warning",
-        COMPLETED: "success",
-        TAKE: "warning",
-        CANCELLED: "danger",
-      };
-      return map[v] || "info";
-    },
-    copySn(sn) {
-      if (!sn) return;
-      navigator.clipboard.writeText(sn);
-      this.$Message.success("订单编号已复制");
-    },
-    onPageSizeChange() {
-      this.pagination.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      if (!this.liveId) return;
-      this.loading = true;
-      queryLiveOrderPage({
-        liveRoomId: this.liveId,
-        pageNumber: this.pagination.pageNumber,
-        pageSize: this.pagination.pageSize,
-      })
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.orderList = res.result?.records || [];
-            this.pagination.total = res.result?.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+defineExpose({ refresh });
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/control-panel.vue b/manager/src/views/live/control-panel.vue
index 06c9f69f3..490773c0d 100644
--- a/manager/src/views/live/control-panel.vue
+++ b/manager/src/views/live/control-panel.vue
@@ -238,7 +238,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import {
   endLive,
   getLiveInfo,
@@ -248,450 +250,450 @@ import {
 } from "@/api/live";
 import config from "@/config";
 import { DocumentCopy, Refresh } from "@element-plus/icons-vue";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 import CommentReview from "./components/CommentReview.vue";
 import Coupon from "./components/Coupon.vue";
 import LiveChatPanel from "./components/LiveChatPanel.vue";
 import LiveGoods from "./components/LiveGoods.vue";
 import LivePurchaseRecords from "./components/LivePurchaseRecords.vue";
 
-export default {
-  name: "live-control-panel",
-  components: { CommentReview, Coupon, LiveChatPanel, LiveGoods, LivePurchaseRecords, DocumentCopy, Refresh },
-  data() {
-    return {
-      loading: false,
-      liveId: "",
-      videoUrl: "",
-      wapUrl: "",
-      aspectRatio: "16:9",
-      chatTab: "chat",
-      statsTab: "general",
-      manageTab: "comment",
-      liveDetail: {},
-      orderStats: {},
-      onlineUserList: [],
-      onlineLoading: false,
-      onlinePagination: {
-        pageNumber: 1,
-        pageSize: 10,
-        total: 0,
-      },
-      nowTick: Date.now(),
-      durationTimer: null,
-      pollTimer: null,
-      hlsHttpFallbackUsed: false,
-      lastHlsPullUrl: "",
-    };
-  },
-  created() {
-    this.hlsInstance = null;
-    this.hlsVideoElement = null;
-    this._hlsVideoClickHandler = null;
-  },
-  computed: {
-    liveStatus() {
-      return this.liveDetail.liveStatus || this.liveDetail.status || "";
-    },
-    isLiving() {
-      return this.liveStatus === "LIVING";
-    },
-    shouldPlayStream() {
-      return this.isLiving && !!this.videoUrl;
-    },
-    showPlayerCover() {
-      return !this.shouldPlayStream;
-    },
-    cumulativeViewers() {
-      return Number(this.liveDetail.actualViewNumber ?? 0);
-    },
-    currentViewers() {
-      return this.cumulativeViewers;
-    },
-    commentPeopleNumber() {
-      return Number(this.liveDetail.commentPeopleNumber ?? 0);
-    },
-    interactionRate() {
-      if (!this.cumulativeViewers) return "0.00%";
-      return `${((this.commentPeopleNumber / this.cumulativeViewers) * 100).toFixed(2)}%`;
-    },
-    dealConversionRate() {
-      if (!this.cumulativeViewers) return "0%";
-      const dealCount = Number(this.orderStats.dealUserCount ?? 0);
-      return `${((dealCount / this.cumulativeViewers) * 100).toFixed(0)}%`;
-    },
-    liveDuration() {
-      void this.nowTick;
-      const startMs = this.parseDateTime(this.liveDetail.startTime);
-      if (!startMs || Date.now() < startMs) return "00:00:00";
-      let endMs = Date.now();
-      if (this.liveStatus === "ENDED") {
-        const endTimeMs = this.parseDateTime(this.liveDetail.endTime);
-        if (endTimeMs && endTimeMs > startMs) {
-          endMs = endTimeMs;
-        }
+defineOptions({ name: "live-control-panel" });
+
+const route = useRoute();
+
+const purchaseRecords = ref(null);
+const hlsContainer = ref(null);
+
+const loading = ref(false);
+const liveId = ref("");
+const videoUrl = ref("");
+const wapUrl = ref("");
+const aspectRatio = ref("16:9");
+const chatTab = ref("chat");
+const statsTab = ref("general");
+const manageTab = ref("comment");
+const liveDetail = ref({});
+const orderStats = ref({});
+const onlineUserList = ref([]);
+const onlineLoading = ref(false);
+const onlinePagination = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  total: 0,
+});
+const nowTick = ref(Date.now());
+const durationTimer = ref(null);
+const pollTimer = ref(null);
+const hlsHttpFallbackUsed = ref(false);
+const lastHlsPullUrl = ref("");
+
+// 原 created 中直接挂到 this 上的字段（未在 data 声明），保持非响应式
+let hlsInstance = null;
+let hlsVideoElement = null;
+let _hlsVideoClickHandler = null;
+
+const liveStatus = computed(() => {
+  return liveDetail.value.liveStatus || liveDetail.value.status || "";
+});
+const isLiving = computed(() => {
+  return liveStatus.value === "LIVING";
+});
+const shouldPlayStream = computed(() => {
+  return isLiving.value && !!videoUrl.value;
+});
+const showPlayerCover = computed(() => {
+  return !shouldPlayStream.value;
+});
+const cumulativeViewers = computed(() => {
+  return Number(liveDetail.value.actualViewNumber ?? 0);
+});
+const currentViewers = computed(() => {
+  return cumulativeViewers.value;
+});
+const commentPeopleNumber = computed(() => {
+  return Number(liveDetail.value.commentPeopleNumber ?? 0);
+});
+const interactionRate = computed(() => {
+  if (!cumulativeViewers.value) return "0.00%";
+  return `${((commentPeopleNumber.value / cumulativeViewers.value) * 100).toFixed(2)}%`;
+});
+const dealConversionRate = computed(() => {
+  if (!cumulativeViewers.value) return "0%";
+  const dealCount = Number(orderStats.value.dealUserCount ?? 0);
+  return `${((dealCount / cumulativeViewers.value) * 100).toFixed(0)}%`;
+});
+const liveDuration = computed(() => {
+  void nowTick.value;
+  const startMs = parseDateTime(liveDetail.value.startTime);
+  if (!startMs || Date.now() < startMs) return "00:00:00";
+  let endMs = Date.now();
+  if (liveStatus.value === "ENDED") {
+    const endTimeMs = parseDateTime(liveDetail.value.endTime);
+    if (endTimeMs && endTimeMs > startMs) {
+      endMs = endTimeMs;
+    }
+  }
+  return formatDuration(endMs - startMs);
+});
+
+watch(videoUrl, () => {
+  syncH5Player();
+});
+watch(isLiving, () => {
+  syncH5Player();
+  if (isLiving.value) {
+    startPolling();
+  } else {
+    stopPolling();
+  }
+});
+watch(aspectRatio, () => {
+  lastHlsPullUrl.value = "";
+  nextTick(() => syncH5Player());
+});
+watch(chatTab, (tab) => {
+  if (tab === "online") loadOnlineUsers();
+});
+watch(statsTab, (tab) => {
+  if (tab === "purchase") purchaseRecords.value?.refresh();
+});
+
+onMounted(() => {
+  liveId.value = String(route.query.id || "");
+  if (!liveId.value) {
+    Message.error("缺少直播ID");
+    return;
+  }
+  refreshAll();
+  startDurationTimer();
+});
+
+onBeforeUnmount(() => {
+  destroyH5HlsPlayer();
+  stopPolling();
+  stopDurationTimer();
+});
+
+function parseDateTime(value) {
+  if (!value) return null;
+  if (typeof value === "string" && value.includes("-")) {
+    return new Date(value.replace(/-/g, "/")).getTime();
+  }
+  if (typeof value === "number") {
+    return value > 1e12 ? value : value * 1000;
+  }
+  return null;
+}
+function formatDuration(ms) {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+}
+function startDurationTimer() {
+  stopDurationTimer();
+  durationTimer.value = setInterval(() => {
+    nowTick.value = Date.now();
+  }, 1000);
+}
+function stopDurationTimer() {
+  if (durationTimer.value) {
+    clearInterval(durationTimer.value);
+    durationTimer.value = null;
+  }
+}
+function formatTime(time) {
+  if (!time) return "-";
+  if (typeof time === "string" && time.includes("-")) return time;
+  const ts = typeof time === "number" ? (time > 1e12 ? time / 1000 : time) : time;
+  return unixToDate(ts);
+}
+function formatAmount(val) {
+  return Number(val || 0).toFixed(2);
+}
+function liveStatusText(status) {
+  const map = { NEW: "未开始", LIVING: "直播中", PAUSED: "已暂停", ENDED: "已结束" };
+  return map[status] || "未知";
+}
+function liveStatusTagType(status) {
+  const map = { NEW: "info", LIVING: "success", PAUSED: "warning", ENDED: "warning" };
+  return map[status] || "info";
+}
+function startPolling() {
+  stopPolling();
+  if (!isLiving.value) return;
+  pollTimer.value = setInterval(() => {
+    loadDetail(false);
+  }, 5000);
+}
+function stopPolling() {
+  if (pollTimer.value) {
+    clearInterval(pollTimer.value);
+    pollTimer.value = null;
+  }
+}
+function refreshAll() {
+  loadDetail();
+  loadOrderStats();
+  purchaseRecords.value?.refresh();
+  if (chatTab.value === "online") loadOnlineUsers();
+}
+function buildHlsPlayUrl(url, useHttpFallback = false) {
+  if (!url) return "";
+  const httpUrl =
+    useHttpFallback && url.startsWith("https://")
+      ? url.replace("https://", "http://")
+      : url;
+  return httpUrl.replace(".flv", ".m3u8");
+}
+function syncH5Player(retry = 0) {
+  const shouldPlay = shouldPlayStream.value;
+  if (!shouldPlay) {
+    destroyH5HlsPlayer();
+    lastHlsPullUrl.value = "";
+    return;
+  }
+  if (
+    videoUrl.value === lastHlsPullUrl.value &&
+    hlsInstance &&
+    hlsVideoElement &&
+    !hlsVideoElement.paused
+  ) {
+    return;
+  }
+  if (videoUrl.value === lastHlsPullUrl.value && hlsInstance) {
+    ensureH5VideoPlaying(hlsVideoElement);
+    return;
+  }
+  lastHlsPullUrl.value = videoUrl.value;
+  hlsHttpFallbackUsed.value = false;
+  nextTick(() => {
+    const container = hlsContainer.value;
+    if (!container) {
+      if (retry < 8) {
+        setTimeout(() => syncH5Player(retry + 1), 80);
       }
-      return this.formatDuration(endMs - startMs);
-    },
-  },
-  watch: {
-    videoUrl() {
-      this.syncH5Player();
-    },
-    isLiving() {
-      this.syncH5Player();
-      if (this.isLiving) {
-        this.startPolling();
-      } else {
-        this.stopPolling();
-      }
-    },
-    aspectRatio() {
-      this.lastHlsPullUrl = "";
-      this.$nextTick(() => this.syncH5Player());
-    },
-    chatTab(tab) {
-      if (tab === "online") this.loadOnlineUsers();
-    },
-    statsTab(tab) {
-      if (tab === "purchase") this.$refs.purchaseRecords?.refresh();
-    },
-  },
-  mounted() {
-    this.liveId = String(this.$route.query.id || "");
-    if (!this.liveId) {
-      this.$Message.error("缺少直播ID");
       return;
     }
-    this.refreshAll();
-    this.startDurationTimer();
-  },
-  beforeUnmount() {
-    this.destroyH5HlsPlayer();
-    this.stopPolling();
-    this.stopDurationTimer();
-  },
-  methods: {
-    parseDateTime(value) {
-      if (!value) return null;
-      if (typeof value === "string" && value.includes("-")) {
-        return new Date(value.replace(/-/g, "/")).getTime();
-      }
-      if (typeof value === "number") {
-        return value > 1e12 ? value : value * 1000;
-      }
-      return null;
-    },
-    formatDuration(ms) {
-      const totalSeconds = Math.max(0, Math.floor(ms / 1000));
-      const hours = Math.floor(totalSeconds / 3600);
-      const minutes = Math.floor((totalSeconds % 3600) / 60);
-      const seconds = totalSeconds % 60;
-      const pad = (n) => String(n).padStart(2, "0");
-      return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-    },
-    startDurationTimer() {
-      this.stopDurationTimer();
-      this.durationTimer = setInterval(() => {
-        this.nowTick = Date.now();
-      }, 1000);
-    },
-    stopDurationTimer() {
-      if (this.durationTimer) {
-        clearInterval(this.durationTimer);
-        this.durationTimer = null;
-      }
-    },
-    formatTime(time) {
-      if (!time) return "-";
-      if (typeof time === "string" && time.includes("-")) return time;
-      const ts = typeof time === "number" ? (time > 1e12 ? time / 1000 : time) : time;
-      return this.$filters.unixToDate(ts);
-    },
-    formatAmount(val) {
-      return Number(val || 0).toFixed(2);
-    },
-    liveStatusText(status) {
-      const map = { NEW: "未开始", LIVING: "直播中", PAUSED: "已暂停", ENDED: "已结束" };
-      return map[status] || "未知";
-    },
-    liveStatusTagType(status) {
-      const map = { NEW: "info", LIVING: "success", PAUSED: "warning", ENDED: "warning" };
-      return map[status] || "info";
-    },
-    startPolling() {
-      this.stopPolling();
-      if (!this.isLiving) return;
-      this.pollTimer = setInterval(() => {
-        this.loadDetail(false);
-      }, 5000);
-    },
-    stopPolling() {
-      if (this.pollTimer) {
-        clearInterval(this.pollTimer);
-        this.pollTimer = null;
-      }
-    },
-    refreshAll() {
-      this.loadDetail();
-      this.loadOrderStats();
-      this.$refs.purchaseRecords?.refresh();
-      if (this.chatTab === "online") this.loadOnlineUsers();
-    },
-    buildHlsPlayUrl(url, useHttpFallback = false) {
-      if (!url) return "";
-      const httpUrl =
-        useHttpFallback && url.startsWith("https://")
-          ? url.replace("https://", "http://")
-          : url;
-      return httpUrl.replace(".flv", ".m3u8");
-    },
-    syncH5Player(retry = 0) {
-      const shouldPlay = this.shouldPlayStream;
-      if (!shouldPlay) {
-        this.destroyH5HlsPlayer();
-        this.lastHlsPullUrl = "";
-        return;
-      }
-      if (
-        this.videoUrl === this.lastHlsPullUrl &&
-        this.hlsInstance &&
-        this.hlsVideoElement &&
-        !this.hlsVideoElement.paused
-      ) {
-        return;
-      }
-      if (this.videoUrl === this.lastHlsPullUrl && this.hlsInstance) {
-        this.ensureH5VideoPlaying(this.hlsVideoElement);
-        return;
-      }
-      this.lastHlsPullUrl = this.videoUrl;
-      this.hlsHttpFallbackUsed = false;
-      this.$nextTick(() => {
-        const container = this.$refs.hlsContainer;
-        if (!container) {
-          if (retry < 8) {
-            setTimeout(() => this.syncH5Player(retry + 1), 80);
+    initH5HlsPlayer();
+  });
+}
+function ensureH5VideoPlaying(video) {
+  if (!video) return Promise.resolve();
+  const tryPlay = (muted) => {
+    video.muted = muted;
+    return video.play().catch(() => Promise.reject());
+  };
+  return tryPlay(false)
+    .catch(() => tryPlay(true))
+    .catch(() => {
+      console.warn("[HLS] 自动播放被阻止，请点击画面播放");
+    });
+}
+async function initH5HlsPlayer(useHttpFallback = false) {
+  const originalUrl = videoUrl.value;
+  const container = hlsContainer.value;
+  if (!originalUrl || !container) return;
+
+  const url = buildHlsPlayUrl(originalUrl, useHttpFallback);
+  destroyH5HlsPlayer();
+
+  const video = document.createElement("video");
+  video.style.cssText = "width:100%;height:100%;object-fit:cover;background:#000;";
+  video.autoplay = true;
+  video.muted = true;
+  video.defaultMuted = true;
+  video.playsInline = true;
+  video.setAttribute("autoplay", "");
+  video.setAttribute("muted", "");
+  video.setAttribute("playsinline", "");
+  video.setAttribute("webkit-playsinline", "");
+  video.controls = false;
+
+  const onVideoClick = () => {
+    if (video.muted) {
+      video.muted = false;
+    }
+    video.play().catch(() => {});
+  };
+  video.addEventListener("click", onVideoClick);
+  container.appendChild(video);
+  hlsVideoElement = video;
+  _hlsVideoClickHandler = onVideoClick;
+
+  const onReadyPlay = () => {
+    ensureH5VideoPlaying(video);
+  };
+
+  let Hls = null;
+  try {
+    const hlsModule = await import("hls.js");
+    Hls = hlsModule.default;
+  } catch (error) {
+    console.error("[HLS] 加载播放器失败:", error);
+    Message.error("直播播放器加载失败，请刷新页面重试");
+    return;
+  }
+
+  if (Hls.isSupported()) {
+    const hls = new Hls({
+      enableWorker: true,
+      lowLatencyMode: true,
+      liveSyncDurationCount: 3,
+      liveMaxLatencyDurationCount: 6,
+      maxBufferLength: 10,
+      maxMaxBufferLength: 30,
+    });
+    hlsInstance = hls;
+    hls.on(Hls.Events.MEDIA_ATTACHED, onReadyPlay);
+    hls.on(Hls.Events.MANIFEST_PARSED, onReadyPlay);
+    hls.attachMedia(video);
+    hls.loadSource(url);
+    hls.on(Hls.Events.ERROR, (_event, data) => {
+      if (!data.fatal) return;
+      switch (data.type) {
+        case Hls.ErrorTypes.NETWORK_ERROR:
+          if (!hlsHttpFallbackUsed.value && originalUrl.startsWith("https://")) {
+            console.warn("[HLS] HTTPS 加载失败，尝试 HTTP 降级...");
+            hlsHttpFallbackUsed.value = true;
+            destroyH5HlsPlayer();
+            nextTick(() => initH5HlsPlayer(true));
+          } else {
+            console.error("[HLS] 网络错误，尝试重连...");
+            hls.startLoad();
           }
-          return;
-        }
-        this.initH5HlsPlayer();
-      });
-    },
-    ensureH5VideoPlaying(video) {
-      if (!video) return Promise.resolve();
-      const tryPlay = (muted) => {
-        video.muted = muted;
-        return video.play().catch(() => Promise.reject());
-      };
-      return tryPlay(false)
-        .catch(() => tryPlay(true))
-        .catch(() => {
-          console.warn("[HLS] 自动播放被阻止，请点击画面播放");
-        });
-    },
-    async initH5HlsPlayer(useHttpFallback = false) {
-      const originalUrl = this.videoUrl;
-      const container = this.$refs.hlsContainer;
-      if (!originalUrl || !container) return;
-
-      const url = this.buildHlsPlayUrl(originalUrl, useHttpFallback);
-      this.destroyH5HlsPlayer();
-
-      const video = document.createElement("video");
-      video.style.cssText = "width:100%;height:100%;object-fit:cover;background:#000;";
-      video.autoplay = true;
-      video.muted = true;
-      video.defaultMuted = true;
-      video.playsInline = true;
-      video.setAttribute("autoplay", "");
-      video.setAttribute("muted", "");
-      video.setAttribute("playsinline", "");
-      video.setAttribute("webkit-playsinline", "");
-      video.controls = false;
-
-      const onVideoClick = () => {
-        if (video.muted) {
-          video.muted = false;
-        }
-        video.play().catch(() => {});
-      };
-      video.addEventListener("click", onVideoClick);
-      container.appendChild(video);
-      this.hlsVideoElement = video;
-      this._hlsVideoClickHandler = onVideoClick;
-
-      const onReadyPlay = () => {
-        this.ensureH5VideoPlaying(video);
-      };
-
-      let Hls = null;
-      try {
-        const hlsModule = await import("hls.js");
-        Hls = hlsModule.default;
-      } catch (error) {
-        console.error("[HLS] 加载播放器失败:", error);
-        this.$Message.error("直播播放器加载失败，请刷新页面重试");
-        return;
+          break;
+        case Hls.ErrorTypes.MEDIA_ERROR:
+          console.error("[HLS] 媒体错误，尝试恢复...");
+          hls.recoverMediaError();
+          break;
+        default:
+          console.error("[HLS] 致命错误:", data);
+          destroyH5HlsPlayer();
+          Message.error("直播加载失败");
+          break;
       }
-
-      if (Hls.isSupported()) {
-        const hls = new Hls({
-          enableWorker: true,
-          lowLatencyMode: true,
-          liveSyncDurationCount: 3,
-          liveMaxLatencyDurationCount: 6,
-          maxBufferLength: 10,
-          maxMaxBufferLength: 30,
-        });
-        this.hlsInstance = hls;
-        hls.on(Hls.Events.MEDIA_ATTACHED, onReadyPlay);
-        hls.on(Hls.Events.MANIFEST_PARSED, onReadyPlay);
-        hls.attachMedia(video);
-        hls.loadSource(url);
-        hls.on(Hls.Events.ERROR, (_event, data) => {
-          if (!data.fatal) return;
-          switch (data.type) {
-            case Hls.ErrorTypes.NETWORK_ERROR:
-              if (!this.hlsHttpFallbackUsed && originalUrl.startsWith("https://")) {
-                console.warn("[HLS] HTTPS 加载失败，尝试 HTTP 降级...");
-                this.hlsHttpFallbackUsed = true;
-                this.destroyH5HlsPlayer();
-                this.$nextTick(() => this.initH5HlsPlayer(true));
-              } else {
-                console.error("[HLS] 网络错误，尝试重连...");
-                hls.startLoad();
-              }
-              break;
-            case Hls.ErrorTypes.MEDIA_ERROR:
-              console.error("[HLS] 媒体错误，尝试恢复...");
-              hls.recoverMediaError();
-              break;
-            default:
-              console.error("[HLS] 致命错误:", data);
-              this.destroyH5HlsPlayer();
-              this.$Message.error("直播加载失败");
-              break;
-          }
-        });
-      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
-        video.src = url;
-        video.addEventListener("loadedmetadata", onReadyPlay);
-        video.addEventListener("canplay", onReadyPlay);
-      } else {
-        this.$Message.error("当前浏览器不支持 HLS 播放");
+    });
+  } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    video.src = url;
+    video.addEventListener("loadedmetadata", onReadyPlay);
+    video.addEventListener("canplay", onReadyPlay);
+  } else {
+    Message.error("当前浏览器不支持 HLS 播放");
+  }
+}
+function destroyH5HlsPlayer() {
+  if (hlsInstance) {
+    hlsInstance.destroy();
+    hlsInstance = null;
+  }
+  if (hlsVideoElement) {
+    if (_hlsVideoClickHandler) {
+      hlsVideoElement.removeEventListener("click", _hlsVideoClickHandler);
+      _hlsVideoClickHandler = null;
+    }
+    hlsVideoElement.remove();
+    hlsVideoElement = null;
+  }
+  const container = hlsContainer.value;
+  if (container) {
+    container.innerHTML = "";
+  }
+}
+function loadDetail(showLoading = true) {
+  if (showLoading) loading.value = true;
+  getLiveInfo(liveId.value)
+    .then((res) => {
+      if (showLoading) loading.value = false;
+      if (res.success) {
+        const data = res.result || {};
+        liveDetail.value = data;
+        videoUrl.value = data.pullStreamUrl || data.streamUrl || "";
+        syncH5Player();
       }
-    },
-    destroyH5HlsPlayer() {
-      if (this.hlsInstance) {
-        this.hlsInstance.destroy();
-        this.hlsInstance = null;
+    })
+    .catch(() => {
+      if (showLoading) loading.value = false;
+    });
+}
+function loadOrderStats() {
+  getLiveOrderStatistics(liveId.value).then((res) => {
+    if (res.success) {
+      orderStats.value = res.result || {};
+    }
+  });
+}
+function loadOnlineUsers() {
+  onlineLoading.value = true;
+  liveUserList({
+    liveRoomId: liveId.value,
+    pageNumber: onlinePagination.pageNumber,
+    pageSize: onlinePagination.pageSize,
+  })
+    .then((res) => {
+      onlineLoading.value = false;
+      if (res.success) {
+        onlineUserList.value = res.result?.records || [];
+        onlinePagination.total = res.result?.total || 0;
       }
-      if (this.hlsVideoElement) {
-        if (this._hlsVideoClickHandler) {
-          this.hlsVideoElement.removeEventListener("click", this._hlsVideoClickHandler);
-          this._hlsVideoClickHandler = null;
-        }
-        this.hlsVideoElement.remove();
-        this.hlsVideoElement = null;
-      }
-      const container = this.$refs.hlsContainer;
-      if (container) {
-        container.innerHTML = "";
-      }
-    },
-    loadDetail(showLoading = true) {
-      if (showLoading) this.loading = true;
-      getLiveInfo(this.liveId)
-        .then((res) => {
-          if (showLoading) this.loading = false;
-          if (res.success) {
-            const data = res.result || {};
-            this.liveDetail = data;
-            this.videoUrl = data.pullStreamUrl || data.streamUrl || "";
-            this.syncH5Player();
-          }
-        })
-        .catch(() => {
-          if (showLoading) this.loading = false;
-        });
-    },
-    loadOrderStats() {
-      getLiveOrderStatistics(this.liveId).then((res) => {
+    })
+    .catch(() => {
+      onlineLoading.value = false;
+    });
+}
+function buildShareUrl() {
+  const base = (wapUrl.value || BASE?.WAP_URL || config.website || "").replace(/\/?$/, "/");
+  return `${base}pages/promotion/live/room?id=${liveId.value}`;
+}
+function handleShare() {
+  const url = buildShareUrl();
+  if (!url) {
+    Message.warning("未配置移动端地址");
+    return;
+  }
+  copyText(url, "分享链接");
+}
+function copyText(text, label = "内容") {
+  if (!text) {
+    Message.warning(`${label}为空，无法复制`);
+    return;
+  }
+  navigator.clipboard.writeText(text);
+  Message.success(`${label}已复制`);
+}
+function handleStart() {
+  Modal.confirm({
+    title: "确认开播",
+    content: "确定要开始该直播吗？",
+    onOk: () => {
+      return startLive(liveId.value).then((res) => {
         if (res.success) {
-          this.orderStats = res.result || {};
+          Message.success("开播成功");
+          refreshAll();
         }
       });
     },
-    loadOnlineUsers() {
-      this.onlineLoading = true;
-      liveUserList({
-        liveRoomId: this.liveId,
-        pageNumber: this.onlinePagination.pageNumber,
-        pageSize: this.onlinePagination.pageSize,
-      })
-        .then((res) => {
-          this.onlineLoading = false;
-          if (res.success) {
-            this.onlineUserList = res.result?.records || [];
-            this.onlinePagination.total = res.result?.total || 0;
-          }
-        })
-        .catch(() => {
-          this.onlineLoading = false;
-        });
-    },
-    buildShareUrl() {
-      const base = (this.wapUrl || BASE?.WAP_URL || config.website || "").replace(/\/?$/, "/");
-      return `${base}pages/promotion/live/room?id=${this.liveId}`;
-    },
-    handleShare() {
-      const url = this.buildShareUrl();
-      if (!url) {
-        this.$Message.warning("未配置移动端地址");
-        return;
-      }
-      this.copyText(url, "分享链接");
-    },
-    copyText(text, label = "内容") {
-      if (!text) {
-        this.$Message.warning(`${label}为空，无法复制`);
-        return;
-      }
-      navigator.clipboard.writeText(text);
-      this.$Message.success(`${label}已复制`);
-    },
-    handleStart() {
-      this.$Modal.confirm({
-        title: "确认开播",
-        content: "确定要开始该直播吗？",
-        onOk: () => {
-          return startLive(this.liveId).then((res) => {
-            if (res.success) {
-              this.$Message.success("开播成功");
-              this.refreshAll();
-            }
-          });
-        },
+  });
+}
+function handleEnd() {
+  Modal.confirm({
+    title: "确认结束",
+    content: "确定要结束该直播吗？",
+    onOk: () => {
+      return endLive(liveId.value).then((res) => {
+        if (res.success) {
+          Message.success("直播已结束");
+          destroyH5HlsPlayer();
+          stopPolling();
+          refreshAll();
+        }
       });
     },
-    handleEnd() {
-      this.$Modal.confirm({
-        title: "确认结束",
-        content: "确定要结束该直播吗？",
-        onOk: () => {
-          return endLive(this.liveId).then((res) => {
-            if (res.success) {
-              this.$Message.success("直播已结束");
-              this.destroyH5HlsPlayer();
-              this.stopPolling();
-              this.refreshAll();
-            }
-          });
-        },
-      });
-    },
-  },
-};
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/detail.vue b/manager/src/views/live/detail.vue
index da9cdeba8..8b15e4c16 100644
--- a/manager/src/views/live/detail.vue
+++ b/manager/src/views/live/detail.vue
@@ -42,66 +42,66 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getLiveInfo } from "@/api/live";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 import LiveGoods from "./components/LiveGoods.vue";
 
-export default {
-  name: "live-detail",
-  components: { LiveGoods },
-  data() {
-    return {
-      loading: false,
-      liveId: "",
-      detail: {},
-    };
-  },
-  computed: {
-    liveStatus() {
-      return this.detail.liveStatus || this.detail.status || "";
-    },
-  },
-  mounted() {
-    this.liveId = String(this.$route.query.id || "");
-    if (!this.liveId) {
-      this.$Message.error("缺少直播ID");
-      this.handleBack();
-      return;
-    }
-    this.loadDetail();
-  },
-  methods: {
-    formatTime(time) {
-      if (!time) return "-";
-      return this.$filters.unixToDate(time);
-    },
-    liveStatusText(status) {
-      const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
-      return map[status] || "未知";
-    },
-    liveStatusTagType(status) {
-      const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
-      return map[status] || "info";
-    },
-    loadDetail() {
-      this.loading = true;
-      getLiveInfo(this.liveId)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.detail = res.result || {};
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-          this.handleBack();
-        });
-    },
-    handleBack() {
-      this.$router.push({ path: "/live-list" });
-    },
-  },
-};
+defineOptions({ name: "live-detail" });
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const liveId = ref("");
+const detail = ref({});
+
+const liveStatus = computed(() => {
+  return detail.value.liveStatus || detail.value.status || "";
+});
+
+onMounted(() => {
+  liveId.value = String(route.query.id || "");
+  if (!liveId.value) {
+    Message.error("缺少直播ID");
+    handleBack();
+    return;
+  }
+  loadDetail();
+});
+
+function formatTime(time) {
+  if (!time) return "-";
+  return unixToDate(time);
+}
+function liveStatusText(status) {
+  const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
+  return map[status] || "未知";
+}
+function liveStatusTagType(status) {
+  const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
+  return map[status] || "info";
+}
+function loadDetail() {
+  loading.value = true;
+  getLiveInfo(liveId.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        detail.value = res.result || {};
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+      handleBack();
+    });
+}
+function handleBack() {
+  router.push({ path: "/live-list" });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/edit.vue b/manager/src/views/live/edit.vue
index 2562020b7..8dd9b9f24 100644
--- a/manager/src/views/live/edit.vue
+++ b/manager/src/views/live/edit.vue
@@ -4,7 +4,7 @@
       <template #header>
         <span class="page-title">编辑直播</span>
       </template>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="live-form">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="live-form">
         <el-form-item v-if="form.liveStatus !== 'NEW'" label="直播状态">
           <el-tag :type="liveStatusTagType(form.liveStatus)">{{ liveStatusText(form.liveStatus) }}</el-tag>
         </el-form-item>
@@ -81,7 +81,7 @@
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModelFlag"
         @callback="callbackSelected"
@@ -90,11 +90,22 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { Picture } from "@element-plus/icons-vue";
 import { getLiveInfo, updateLive } from "@/api/live";
+import { Message } from "@/utils/message";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
+defineOptions({ name: "live-edit" });
+
+const route = useRoute();
+const router = useRouter();
+
+const formRef = ref(null);
+const ossManageRef = ref(null);
+
 function getCharLength(str) {
   if (!str) return 0;
   let len = 0;
@@ -130,133 +141,126 @@ function formatDateTime(value) {
   return String(value);
 }
 
-export default {
-  name: "live-edit",
-  components: { Picture, ossManage },
-  data() {
-    const validateTitle = (rule, value, callback) => {
-      const len = getCharLength(value);
-      if (len < 6) {
-        callback(new Error("直播间名字最短3个汉字"));
-        return;
-      }
-      if (len > 34) {
-        callback(new Error("直播间名字最长17个汉字"));
-        return;
-      }
-      callback();
-    };
-    return {
-      picModelFlag: false,
-      loading: false,
-      submitting: false,
-      liveId: "",
-      endTime: "",
-      form: {
-        title: "",
-        displayMode: "0",
-        startTime: "",
-        coverImg: "",
-        liveIntroduce: "",
-        liveStatus: "NEW",
-      },
-      rules: {
-        title: [
-          { required: true, message: "请输入直播标题", trigger: "blur" },
-          { validator: validateTitle, trigger: "blur" },
-        ],
-        displayMode: [{ required: true, message: "请选择显示模式", trigger: "change" }],
-        startTime: [{ required: true, message: "请选择直播开始时间", trigger: "change" }],
-        coverImg: [{ required: true, message: "请上传直播封面", trigger: "change" }],
-      },
-    };
-  },
-  mounted() {
-    this.liveId = String(this.$route.query.id || "");
-    if (!this.liveId) {
-      this.$Message.error("缺少直播ID");
-      this.handleBack();
-      return;
-    }
-    this.loadDetail();
-  },
-  methods: {
-    liveStatusText(status) {
-      const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
-      return map[status] || "未知";
-    },
-    liveStatusTagType(status) {
-      const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
-      return map[status] || "info";
-    },
-    openCoverPicker() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (val?.url) {
-        this.form.coverImg = val.url;
-        this.$refs.form?.validateField("coverImg");
-      }
-    },
-    loadDetail() {
-      this.loading = true;
-      getLiveInfo(this.liveId)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            const data = res.result || {};
-            this.form.title = data.title || "";
-            this.form.displayMode = normalizeDisplayMode(data.displayMode);
-            this.form.coverImg = data.coverImg || "";
-            this.form.liveIntroduce = data.liveIntroduce || "";
-            this.form.liveStatus = data.liveStatus || data.status || "NEW";
-            this.endTime = formatDateTime(data.endTime);
-            this.form.startTime = formatDateTime(data.startTime);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        let endTime = this.endTime;
-        if (!endTime || endTime <= this.form.startTime) {
-          endTime = buildEndTime(this.form.startTime);
-        }
-        this.submitting = true;
-        updateLive(this.liveId, {
-          title: this.form.title,
-          displayMode: this.form.displayMode,
-          coverImg: this.form.coverImg,
-          startTime: this.form.startTime,
-          endTime,
-          liveIntroduce: this.form.liveIntroduce,
-        })
-          .then((res) => {
-            this.submitting = false;
-            if (res.success) {
-              this.$Message.success("保存成功");
-              this.$router.push({ path: "/live-list" });
-            }
-          })
-          .catch(() => {
-            this.submitting = false;
-          });
-      });
-    },
-    handleBack() {
-      this.$router.push({ path: "/live-list" });
-    },
-  },
+const validateTitle = (rule, value, callback) => {
+  const len = getCharLength(value);
+  if (len < 6) {
+    callback(new Error("直播间名字最短3个汉字"));
+    return;
+  }
+  if (len > 34) {
+    callback(new Error("直播间名字最长17个汉字"));
+    return;
+  }
+  callback();
 };
+
+const picModelFlag = ref(false);
+const loading = ref(false);
+const submitting = ref(false);
+const liveId = ref("");
+const endTime = ref("");
+const form = reactive({
+  title: "",
+  displayMode: "0",
+  startTime: "",
+  coverImg: "",
+  liveIntroduce: "",
+  liveStatus: "NEW",
+});
+const rules = reactive({
+  title: [
+    { required: true, message: "请输入直播标题", trigger: "blur" },
+    { validator: validateTitle, trigger: "blur" },
+  ],
+  displayMode: [{ required: true, message: "请选择显示模式", trigger: "change" }],
+  startTime: [{ required: true, message: "请选择直播开始时间", trigger: "change" }],
+  coverImg: [{ required: true, message: "请上传直播封面", trigger: "change" }],
+});
+
+onMounted(() => {
+  liveId.value = String(route.query.id || "");
+  if (!liveId.value) {
+    Message.error("缺少直播ID");
+    handleBack();
+    return;
+  }
+  loadDetail();
+});
+
+function liveStatusText(status) {
+  const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
+  return map[status] || "未知";
+}
+function liveStatusTagType(status) {
+  const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
+  return map[status] || "info";
+}
+function openCoverPicker() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (val?.url) {
+    form.coverImg = val.url;
+    formRef.value?.validateField("coverImg");
+  }
+}
+function loadDetail() {
+  loading.value = true;
+  getLiveInfo(liveId.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        const data = res.result || {};
+        form.title = data.title || "";
+        form.displayMode = normalizeDisplayMode(data.displayMode);
+        form.coverImg = data.coverImg || "";
+        form.liveIntroduce = data.liveIntroduce || "";
+        form.liveStatus = data.liveStatus || data.status || "NEW";
+        endTime.value = formatDateTime(data.endTime);
+        form.startTime = formatDateTime(data.startTime);
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    let endTimeVal = endTime.value;
+    if (!endTimeVal || endTimeVal <= form.startTime) {
+      endTimeVal = buildEndTime(form.startTime);
+    }
+    submitting.value = true;
+    updateLive(liveId.value, {
+      title: form.title,
+      displayMode: form.displayMode,
+      coverImg: form.coverImg,
+      startTime: form.startTime,
+      endTime: endTimeVal,
+      liveIntroduce: form.liveIntroduce,
+    })
+      .then((res) => {
+        submitting.value = false;
+        if (res.success) {
+          Message.success("保存成功");
+          router.push({ path: "/live-list" });
+        }
+      })
+      .catch(() => {
+        submitting.value = false;
+      });
+  });
+}
+function handleBack() {
+  router.push({ path: "/live-list" });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/live/list.vue b/manager/src/views/live/list.vue
index 2b8210b28..7643e3034 100644
--- a/manager/src/views/live/list.vue
+++ b/manager/src/views/live/list.vue
@@ -2,7 +2,7 @@
   <div class="live-list search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="90px"
@@ -135,202 +135,206 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { queryLivePage, startLive, endLive } from "@/api/live";
 import { getSetting } from "@/api/index";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 import config from "@/config";
 
-export default {
-  name: "live-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      activeStatus: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        title: "",
-        storeName: "",
-      },
-      shareVisible: false,
-      shareTitle: "",
-      shareH5Url: "",
-      wapUrl: "",
-    };
-  },
-  mounted() {
-    this.loadWapSetting();
-    this.getData();
-  },
-  methods: {
-    formatTime(time) {
-      if (!time) return "-";
-      return this.$filters.unixToDate(time);
-    },
-    liveStatusText(status) {
-      const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
-      return map[status] || "未知";
-    },
-    liveStatusTagType(status) {
-      const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
-      return map[status] || "info";
-    },
-    buildParams() {
-      const params = {
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-      };
-      if (this.searchForm.title) params.title = this.searchForm.title;
-      if (this.searchForm.storeName) params.storeName = this.searchForm.storeName;
-      if (this.activeStatus) params.liveStatus = this.activeStatus;
-      return params;
-    },
-    getData() {
-      this.loading = true;
-      queryLivePage(this.buildParams())
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result?.records || [];
-            this.total = res.result?.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleReset() {
-      this.searchForm.title = "";
-      this.searchForm.storeName = "";
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleTabChange() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleAdd() {
-      this.$router.push({ path: "/live-add" });
-    },
-    handleView(row) {
-      this.$router.push({ path: "/live-manage-detail", query: { id: row.id } });
-    },
-    handleEdit(row) {
-      this.$router.push({ path: "/live-edit", query: { id: row.id } });
-    },
-    handleControl(row) {
-      const route = this.$router.resolve({
-        path: "/live-control-panel",
-        query: { id: row.id },
-      });
-      window.open(route.href, "_blank");
-    },
-    buildH5ShareUrl(liveId) {
-      const base = (this.wapUrl || BASE?.WAP_URL || config.website || "").replace(/\/?$/, "/");
-      return `${base}pages/promotion/live/room?id=${liveId}`;
-    },
-    handleShare(row) {
-      this.shareTitle = row.title || "";
-      this.shareH5Url = this.buildH5ShareUrl(row.id);
-      this.shareVisible = true;
-    },
-    copyShareUrl() {
-      if (!this.shareH5Url) return;
-      this.copyText(this.shareH5Url);
-    },
-    copyText(text) {
-      const onSuccess = () => this.$Message.success("链接已复制");
-      const onFail = () => this.$Message.error("复制失败，请手动复制");
+defineOptions({ name: "live-list" });
 
-      if (navigator.clipboard?.writeText) {
-        navigator.clipboard
-          .writeText(text)
-          .then(onSuccess)
-          .catch(() => {
-            this.copyTextFallback(text) ? onSuccess() : onFail();
-          });
-        return;
-      }
+const router = useRouter();
 
-      this.copyTextFallback(text) ? onSuccess() : onFail();
-    },
-    copyTextFallback(text) {
-      const textArea = document.createElement("textarea");
-      textArea.value = text;
-      textArea.style.position = "fixed";
-      textArea.style.left = "-9999px";
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      let ok = false;
-      try {
-        ok = document.execCommand("copy");
-      } catch (e) {
-        ok = false;
+const searchFormRef = ref(null);
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const activeStatus = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  title: "",
+  storeName: "",
+});
+const shareVisible = ref(false);
+const shareTitle = ref("");
+const shareH5Url = ref("");
+const wapUrl = ref("");
+
+onMounted(() => {
+  loadWapSetting();
+  getData();
+});
+
+function formatTime(time) {
+  if (!time) return "-";
+  return unixToDate(time);
+}
+function liveStatusText(status) {
+  const map = { NEW: "未开始", LIVING: "直播中", ENDED: "已结束" };
+  return map[status] || "未知";
+}
+function liveStatusTagType(status) {
+  const map = { NEW: "info", LIVING: "success", ENDED: "warning" };
+  return map[status] || "info";
+}
+function buildParams() {
+  const params = {
+    pageNumber: searchForm.pageNumber,
+    pageSize: searchForm.pageSize,
+  };
+  if (searchForm.title) params.title = searchForm.title;
+  if (searchForm.storeName) params.storeName = searchForm.storeName;
+  if (activeStatus.value) params.liveStatus = activeStatus.value;
+  return params;
+}
+function getData() {
+  loading.value = true;
+  queryLivePage(buildParams())
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result?.records || [];
+        total.value = res.result?.total || 0;
       }
-      document.body.removeChild(textArea);
-      return ok;
-    },
-    handleStart(row) {
-      if (row.liveStatus === "LIVING") {
-        this.$Message.warning("直播间已在直播中");
-        return;
-      }
-      if (row.liveStatus === "ENDED") {
-        this.$Message.warning("直播已结束，无法开播");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认开播",
-        content: "确定要开始该直播吗？",
-        onOk: () => {
-          return startLive(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("开播成功");
-              this.getData();
-            }
-          });
-        },
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+function handleReset() {
+  searchForm.title = "";
+  searchForm.storeName = "";
+  searchForm.pageNumber = 1;
+  getData();
+}
+function handleTabChange() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+function handleAdd() {
+  router.push({ path: "/live-add" });
+}
+function handleView(row) {
+  router.push({ path: "/live-manage-detail", query: { id: row.id } });
+}
+function handleEdit(row) {
+  router.push({ path: "/live-edit", query: { id: row.id } });
+}
+function handleControl(row) {
+  const route = router.resolve({
+    path: "/live-control-panel",
+    query: { id: row.id },
+  });
+  window.open(route.href, "_blank");
+}
+function buildH5ShareUrl(liveId) {
+  // 历史遗留：BASE 未定义，wapUrl 为空时会抛 ReferenceError，保持原样
+  const base = (wapUrl.value || BASE?.WAP_URL || config.website || "").replace(/\/?$/, "/");
+  return `${base}pages/promotion/live/room?id=${liveId}`;
+}
+function handleShare(row) {
+  shareTitle.value = row.title || "";
+  shareH5Url.value = buildH5ShareUrl(row.id);
+  shareVisible.value = true;
+}
+function copyShareUrl() {
+  if (!shareH5Url.value) return;
+  copyText(shareH5Url.value);
+}
+function copyText(text) {
+  const onSuccess = () => Message.success("链接已复制");
+  const onFail = () => Message.error("复制失败，请手动复制");
+
+  if (navigator.clipboard?.writeText) {
+    navigator.clipboard
+      .writeText(text)
+      .then(onSuccess)
+      .catch(() => {
+        copyTextFallback(text) ? onSuccess() : onFail();
+      });
+    return;
+  }
+
+  copyTextFallback(text) ? onSuccess() : onFail();
+}
+function copyTextFallback(text) {
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  textArea.style.position = "fixed";
+  textArea.style.left = "-9999px";
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  let ok = false;
+  try {
+    ok = document.execCommand("copy");
+  } catch (e) {
+    ok = false;
+  }
+  document.body.removeChild(textArea);
+  return ok;
+}
+function handleStart(row) {
+  if (row.liveStatus === "LIVING") {
+    Message.warning("直播间已在直播中");
+    return;
+  }
+  if (row.liveStatus === "ENDED") {
+    Message.warning("直播已结束，无法开播");
+    return;
+  }
+  Modal.confirm({
+    title: "确认开播",
+    content: "确定要开始该直播吗？",
+    onOk: () => {
+      return startLive(row.id).then((res) => {
+        if (res.success) {
+          Message.success("开播成功");
+          getData();
+        }
       });
     },
-    handleEnd(row) {
-      if (row.liveStatus !== "LIVING") {
-        this.$Message.warning("仅直播中的直播间可以结束");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认结束",
-        content: "确定要结束该直播吗？",
-        onOk: () => {
-          return endLive(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("直播已结束");
-              this.getData();
-            }
-          });
-        },
+  });
+}
+function handleEnd(row) {
+  if (row.liveStatus !== "LIVING") {
+    Message.warning("仅直播中的直播间可以结束");
+    return;
+  }
+  Modal.confirm({
+    title: "确认结束",
+    content: "确定要结束该直播吗？",
+    onOk: () => {
+      return endLive(row.id).then((res) => {
+        if (res.success) {
+          Message.success("直播已结束");
+          getData();
+        }
       });
     },
-    loadWapSetting() {
-      getSetting("BASE_SETTING")
-        .then((res) => {
-          if (res.success && res.result?.buyerDomain) {
-            this.wapUrl = res.result.buyerDomain;
-          }
-        });
-    },
-  },
-};
+  });
+}
+function loadWapSetting() {
+  getSetting("BASE_SETTING")
+    .then((res) => {
+      if (res.success && res.result?.buyerDomain) {
+        wapUrl.value = res.result.buyerDomain;
+      }
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/login.vue b/manager/src/views/login.vue
index a9ea8d723..7b2a3e827 100644
--- a/manager/src/views/login.vue
+++ b/manager/src/views/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login" @click="$refs.verify.show = false">
+  <div class="login" @click="hideVerify">
     <div class="login-brand">
       <div class="brand-inner">
         <p class="brand-name">LILISHOP</p>
@@ -24,7 +24,7 @@
         </div>
 
         <el-form
-          ref="usernameLoginForm"
+          ref="usernameLoginFormRef"
           :model="form"
           :rules="rules"
           class="form"
@@ -70,7 +70,7 @@
         </el-button>
 
         <verify
-          ref="verify"
+          ref="verifyRef"
           class="verify-con"
           verifyType="LOGIN"
           @change="verifyChange"
@@ -81,7 +81,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { User, Lock } from "@element-plus/icons-vue";
 import { login, userInfo } from "@/api/index";
 import Cookies from "js-cookie";
@@ -89,82 +91,79 @@ import Header from "@/views/main-parts/header";
 import Footer from "@/views/main-parts/footer";
 import util from "@/libs/util.js";
 import verify from "@/components/verify";
+import { setStore } from "@/libs/storage";
+import { md5 } from "@/utils/md5.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  components: {
-    Header,
-    Footer,
-    verify,
-    User,
-    Lock,
-  },
-  data() {
-    return {
-      year: new Date().getFullYear(),
-      loading: false,
-      form: {
-        username: "",
-        password: "",
-        mobile: "",
-        code: "",
-      },
-      rules: {
-        username: [
-          { required: true, message: "账号不能为空", trigger: "blur" },
-        ],
-        password: [
-          { required: true, message: "密码不能为空", trigger: "blur" },
-        ],
-      },
-    };
-  },
-  methods: {
-    afterLogin(res) {
-      const accessToken = res.result.accessToken;
-      const refreshToken = res.result.refreshToken;
-      this.setStore("accessToken", accessToken);
-      this.setStore("refreshToken", refreshToken);
-      userInfo().then((res) => {
-        if (res.success) {
-          Cookies.set("userInfoManager", JSON.stringify(res.result));
-          this.$store.commit("setAvatarPath", res.result.avatar);
-          util.initRouter(this);
-          this.$store.commit("setOpenedList");
-          this.$store.commit("initCachePage");
-          this.$router.push({ name: "home_index" });
-        } else {
-          this.loading = false;
-        }
-      });
-    },
-    submitLogin() {
-      this.$refs.usernameLoginForm.validate((valid) => {
-        if (valid) {
-          this.$refs.verify.init();
-        }
-      });
-    },
-    verifyChange(con) {
-      if (!con.status) return;
-      this.loading = true;
-      const fd = new FormData();
-      fd.append("username", this.form.username);
-      fd.append("password", this.md5(this.form.password));
-      login(fd)
-        .then((res) => {
-          if (res && res.success) {
-            this.afterLogin(res);
-          } else {
-            this.loading = false;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-      this.$refs.verify.show = false;
-    },
-  },
+const router = useRouter();
+const appStore = useAppStore();
+
+const year = ref(new Date().getFullYear());
+const loading = ref(false);
+const form = reactive({
+  username: "",
+  password: "",
+  mobile: "",
+  code: "",
+});
+const rules = {
+  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
+  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
 };
+
+const usernameLoginFormRef = ref(null);
+const verifyRef = ref(null);
+
+function hideVerify() {
+  verifyRef.value.show = false;
+}
+
+function afterLogin(res) {
+  const accessToken = res.result.accessToken;
+  const refreshToken = res.result.refreshToken;
+  setStore("accessToken", accessToken);
+  setStore("refreshToken", refreshToken);
+  userInfo().then((res) => {
+    if (res.success) {
+      Cookies.set("userInfoManager", JSON.stringify(res.result));
+      appStore.setAvatarPath(res.result.avatar);
+      util.initRouter();
+      appStore.setOpenedList();
+      appStore.initCachePage();
+      router.push({ name: "home_index" });
+    } else {
+      loading.value = false;
+    }
+  });
+}
+
+function submitLogin() {
+  usernameLoginFormRef.value.validate((valid) => {
+    if (valid) {
+      verifyRef.value.init();
+    }
+  });
+}
+
+function verifyChange(con) {
+  if (!con.status) return;
+  loading.value = true;
+  const fd = new FormData();
+  fd.append("username", form.username);
+  fd.append("password", md5(form.password));
+  login(fd)
+    .then((res) => {
+      if (res && res.success) {
+        afterLogin(res);
+      } else {
+        loading.value = false;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+  verifyRef.value.show = false;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/logistics/index.vue b/manager/src/views/logistics/index.vue
index f4486cb44..0e5cc8277 100644
--- a/manager/src/views/logistics/index.vue
+++ b/manager/src/views/logistics/index.vue
@@ -59,7 +59,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" :rules="formValidate" label-width="120px">
+      <el-form ref="formRef" :model="form" :rules="formValidate" label-width="120px">
         <el-form-item label="物流公司名称" prop="name">
           <el-input v-model="form.name" clearable style="width: 100%" />
         </el-form-item>
@@ -97,13 +97,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
 import {
   getLogisticsPage,
   updateLogistics,
   addLogistics,
   delLogistics,
 } from "@/api/logistics";
+import { Message, Modal } from "@/utils/message";
+
+defineOptions({ name: "logistics" });
 
 const defaultForm = () => ({
   name: "",
@@ -114,156 +118,152 @@ const defaultForm = () => ({
 
 const normalizeStandBy = (value) => (value === true || value === "true" ? "true" : "false");
 
-export default {
-  name: "logistics",
-  data() {
-    return {
-      loading: true,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        name: "",
-      },
-      form: defaultForm(),
-      formValidate: {
-        name: [
-          {
-            required: true,
-            message: "请输入物流公司名称",
-            trigger: "blur",
-          },
-        ],
-        code: [
-          {
-            required: true,
-            message: "请输入物流公司编码",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-      id: "",
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getLogisticsPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          const data = res.result.records;
-          data.forEach((e) => {
-            e.switch = e.disabled === "OPEN";
-            e.standBy = normalizeStandBy(e.standBy);
-          });
-          this.data = data;
-          this.total = res.result.total;
-        }
-      });
-    },
-    changeSwitch(row) {
-      updateLogistics(row.id, {
-        name: row.name,
-        code: row.code,
-        standBy: normalizeStandBy(row.standBy),
-        disabled: row.disabled === "CLOSE" ? "OPEN" : "CLOSE",
-      }).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getDataList();
-        } else {
-          row.switch = !row.switch;
-        }
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
+const table = ref(null);
+const formRef = ref(null);
 
-        if (this.modalTitle === "添加") {
-          const payload = {
-            name: this.form.name,
-            code: this.form.code,
-            disabled: this.form.disabled,
-            standBy: normalizeStandBy(this.form.standBy),
-            formItems: this.form.formItems,
-          };
-          addLogistics(payload).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        } else {
-          updateLogistics(this.id, {
-            ...this.form,
-            standBy: normalizeStandBy(this.form.standBy),
-          }).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
+const loading = ref(true);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  name: "",
+});
+const form = ref(defaultForm());
+const formValidate = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入物流公司名称",
+      trigger: "blur",
+    },
+  ],
+  code: [
+    {
+      required: true,
+      message: "请输入物流公司编码",
+      trigger: "blur",
+    },
+  ],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const id = ref("");
+
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getLogisticsPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      const records = res.result.records;
+      records.forEach((e) => {
+        e.switch = e.disabled === "OPEN";
+        e.standBy = normalizeStandBy(e.standBy);
+      });
+      data.value = records;
+      total.value = res.result.total;
+    }
+  });
+}
+function changeSwitch(row) {
+  updateLogistics(row.id, {
+    name: row.name,
+    code: row.code,
+    standBy: normalizeStandBy(row.standBy),
+    disabled: row.disabled === "CLOSE" ? "OPEN" : "CLOSE",
+  }).then((res) => {
+    if (res.success) {
+      Message.success("操作成功");
+      getDataList();
+    } else {
+      row.switch = !row.switch;
+    }
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+
+    if (modalTitle.value === "添加") {
+      const payload = {
+        name: form.value.name,
+        code: form.value.code,
+        disabled: form.value.disabled,
+        standBy: normalizeStandBy(form.value.standBy),
+        formItems: form.value.formItems,
+      };
+      addLogistics(payload).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    } else {
+      updateLogistics(id.value, {
+        ...form.value,
+        standBy: normalizeStandBy(form.value.standBy),
+      }).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+function add() {
+  modalTitle.value = "添加";
+  form.value = defaultForm();
+  nextTick(() => {
+    formRef.value?.resetFields();
+  });
+  modalVisible.value = true;
+}
+function detail(v) {
+  id.value = v.id;
+  modalTitle.value = "修改";
+  form.value = {
+    name: v.name,
+    code: v.code,
+    standBy: normalizeStandBy(v.standBy),
+    disabled: v.disabled,
+  };
+  modalVisible.value = true;
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    onOk: () => {
+      return delLogistics(v.id).then((res) => {
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    add() {
-      this.modalTitle = "添加";
-      this.form = defaultForm();
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-      });
-      this.modalVisible = true;
-    },
-    detail(v) {
-      this.id = v.id;
-      this.modalTitle = "修改";
-      this.form = {
-        name: v.name,
-        code: v.code,
-        standBy: normalizeStandBy(v.standBy),
-        disabled: v.disabled,
-      };
-      this.modalVisible = true;
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        onOk: () => {
-          return delLogistics(v.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/main-parts/footer.vue b/manager/src/views/main-parts/footer.vue
index f404a0fb5..d4b2f5880 100644
--- a/manager/src/views/main-parts/footer.vue
+++ b/manager/src/views/main-parts/footer.vue
@@ -12,17 +12,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import config from "@/config/index";
 
-export default {
-  data() {
-    return {
-      config,
-      year: new Date().getFullYear(),
-    };
-  },
-};
+const year = ref(new Date().getFullYear());
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/main-parts/header.vue b/manager/src/views/main-parts/header.vue
index 712043226..9c01e45b2 100644
--- a/manager/src/views/main-parts/header.vue
+++ b/manager/src/views/main-parts/header.vue
@@ -6,50 +6,46 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { getBaseSite } from "@/api/common.js";
 
-export default {
-  data() {
-    return {
-      domainLogo: "",
-    };
-  },
-  methods: {
-    applyFavicon(href) {
-      if (!href) return;
-      let link =
-        document.querySelector("link[rel*='icon']") ||
-        document.createElement("link");
-      link.type = "image/x-icon";
-      link.href = href;
-      link.rel = "shortcut icon";
-      document.getElementsByTagName("head")[0].appendChild(link);
-    },
-    getSite() {
-      getBaseSite().then((res) => {
-        if (res.success && res.result && res.result.settingValue) {
-          const { domainLogo, domainIcon, siteName } = JSON.parse(
-            res.result.settingValue
-          );
-          this.domainLogo = domainLogo || "";
-          const expirationTime = new Date().setHours(new Date().getHours() + 1);
-          localStorage.setItem("icontitle_expiration_time", expirationTime);
-          localStorage.setItem("icon", domainLogo || "");
-          localStorage.setItem("domainIcon", domainIcon || "");
-          localStorage.setItem("title", siteName || "");
-          this.applyFavicon(domainIcon || domainLogo);
-          if (siteName) {
-            window.document.title = siteName + " - 运营后台";
-          }
-        }
-      });
-    },
-  },
-  mounted() {
-    this.getSite();
-  },
-};
+const domainLogo = ref("");
+
+function applyFavicon(href) {
+  if (!href) return;
+  let link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.type = "image/x-icon";
+  link.href = href;
+  link.rel = "shortcut icon";
+  document.getElementsByTagName("head")[0].appendChild(link);
+}
+
+function getSite() {
+  getBaseSite().then((res) => {
+    if (res.success && res.result && res.result.settingValue) {
+      const { domainLogo: logo, domainIcon, siteName } = JSON.parse(
+        res.result.settingValue
+      );
+      domainLogo.value = logo || "";
+      const expirationTime = new Date().setHours(new Date().getHours() + 1);
+      localStorage.setItem("icontitle_expiration_time", expirationTime);
+      localStorage.setItem("icon", logo || "");
+      localStorage.setItem("domainIcon", domainIcon || "");
+      localStorage.setItem("title", siteName || "");
+      applyFavicon(domainIcon || logo);
+      if (siteName) {
+        window.document.title = siteName + " - 运营后台";
+      }
+    }
+  });
+}
+
+onMounted(() => {
+  getSite();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/main-parts/lang-switch.vue b/manager/src/views/main-parts/lang-switch.vue
index a5ddf6510..8241b5eab 100644
--- a/manager/src/views/main-parts/lang-switch.vue
+++ b/manager/src/views/main-parts/lang-switch.vue
@@ -12,19 +12,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Platform } from "@element-plus/icons-vue";
+import i18n from "@/locale";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "langSwitch",
-  components: { Platform },
-  methods: {
-    langChange(v) {
-      this.$i18n.locale = v;
-      this.$store.commit("switchLang", v);
-    },
-  },
-};
+defineOptions({ name: "langSwitch" });
+
+const appStore = useAppStore();
+
+function langChange(v) {
+  i18n.global.locale = v;
+  appStore.switchLang(v);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/main-parts/message-tip.vue b/manager/src/views/main-parts/message-tip.vue
index 11c294ab0..610de41ee 100644
--- a/manager/src/views/main-parts/message-tip.vue
+++ b/manager/src/views/main-parts/message-tip.vue
@@ -40,42 +40,42 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
 import { ArrowDown } from "@element-plus/icons-vue";
 
-export default {
-  name: "messageTip",
-  components: { ArrowDown },
-  props: {
-    res: {
-      type: Object,
-      default: () => ({}),
-    },
+defineOptions({ name: "messageTip" });
+
+const props = defineProps({
+  res: {
+    type: Object,
+    default: () => ({}),
   },
-  computed: {
-    value() {
-      let count = 0;
-      const r = this.res || {};
-      Object.keys(r).forEach((k) => {
-        if (r[k]) count += r[k];
-      });
-      return count;
-    },
-  },
-  methods: {
-    navigateTo(name) {
-      if (name === "manager-appointment-work-orders") {
-        this.$router.push({ name, query: { serviceStatus: "OPEN" } });
-        return;
-      }
-      if (name === "manager-procurement-order-list") {
-        this.$router.push({ name, query: { status: "SUBMITTED" } });
-        return;
-      }
-      this.$router.push({ name });
-    },
-  },
-};
+});
+
+const router = useRouter();
+
+const value = computed(() => {
+  let count = 0;
+  const r = props.res || {};
+  Object.keys(r).forEach((k) => {
+    if (r[k]) count += r[k];
+  });
+  return count;
+});
+
+function navigateTo(name) {
+  if (name === "manager-appointment-work-orders") {
+    router.push({ name, query: { serviceStatus: "OPEN" } });
+    return;
+  }
+  if (name === "manager-procurement-order-list") {
+    router.push({ name, query: { status: "SUBMITTED" } });
+    return;
+  }
+  router.push({ name });
+}
 </script>
 
 <style scoped>
@@ -109,4 +109,3 @@ export default {
   transform: translateY(-50%) translateX(50%);
 }
 </style>
-
diff --git a/manager/src/views/main-parts/page-breadcrumb.vue b/manager/src/views/main-parts/page-breadcrumb.vue
index 99b1af8ba..8de2a8fcb 100644
--- a/manager/src/views/main-parts/page-breadcrumb.vue
+++ b/manager/src/views/main-parts/page-breadcrumb.vue
@@ -18,8 +18,17 @@
   </el-breadcrumb>
 </template>
 
-<script>
+<script setup>
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { otherRouter } from "@/router/router";
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "pageBreadcrumb" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
 const stripLayout = (name) => (name || "").replace(/__layout$/, "");
 
@@ -61,105 +70,101 @@ const findFirstLeaf = (group) => {
   return stripLayout(first?.name) || null;
 };
 
-export default {
-  name: "pageBreadcrumb",
-  computed: {
-    items() {
-      const route = this.$route;
-      if (!route || !route.name || route.name === "home_index") {
-        return [{ title: "首页" }];
-      }
-      return this.buildChain(stripLayout(route.name));
-    },
-  },
-  methods: {
-    go(target) {
-      if (!target || !target.name) return;
-      if (this.$route.name === target.name) return;
-      this.$router.push(target);
-    },
-    findInMenu(name) {
-      const menuList = this.$store.state.app.menuList || [];
-      for (const grp of menuList) {
-        for (const child of grp.children || []) {
-          if (stripLayout(child.name) === name) {
-            return { group: grp, child };
-          }
-        }
-      }
-      return null;
-    },
-    routerEntry(name) {
-      if (Array.isArray(otherRouter.children)) {
-        return otherRouter.children.find((c) => c.name === name);
-      }
-      return null;
-    },
-    topItem() {
-      const navList = this.$store.state.app.navList || [];
-      const menuList = this.$store.state.app.menuList || [];
-      const currNavTitle = this.$store.state.app.currNavTitle;
-      const firstName =
-        this.$route.meta && this.$route.meta.firstRouterName;
+const items = computed(() => {
+  if (!route || !route.name || route.name === "home_index") {
+    return [{ title: "首页" }];
+  }
+  return buildChain(stripLayout(route.name));
+});
 
-      let topTitle = currNavTitle;
-      if (firstName) {
-        const top = navList.find((n) => n.name === firstName);
-        if (top) topTitle = top.title;
+function go(target) {
+  if (!target || !target.name) return;
+  if (route.name === target.name) return;
+  router.push(target);
+}
+
+function findInMenu(name) {
+  const menuList = appStore.menuList || [];
+  for (const grp of menuList) {
+    for (const child of grp.children || []) {
+      if (stripLayout(child.name) === name) {
+        return { group: grp, child };
       }
-      if (!topTitle) return null;
+    }
+  }
+  return null;
+}
 
-      let target = null;
-      if (menuList && menuList.length) {
-        const leafName = findFirstLeaf(menuList[0]);
-        if (leafName) target = { name: leafName };
-      }
-      return { title: topTitle, target };
-    },
-    buildChain(name, depth = 0) {
-      if (depth > 6) return [];
+function routerEntry(name) {
+  if (Array.isArray(otherRouter.children)) {
+    return otherRouter.children.find((c) => c.name === name);
+  }
+  return null;
+}
 
-      const inMenu = this.findInMenu(name);
-      if (inMenu) {
-        const list = [];
-        const top = this.topItem();
-        if (top) list.push(top);
-        const groupLeaf = findFirstLeaf(inMenu.group);
-        list.push({
-          title: inMenu.group.title,
-          target: groupLeaf ? { name: groupLeaf } : null,
-        });
-        list.push({ title: inMenu.child.title });
-        return list;
-      }
+function topItem() {
+  const navList = appStore.navList || [];
+  const menuList = appStore.menuList || [];
+  const currNavTitle = appStore.currNavTitle;
+  const firstName = route.meta && route.meta.firstRouterName;
 
-      const parentName = PARENT_MAP[name];
-      const entry = this.routerEntry(name);
-      const selfTitle = entry?.title
-        ? entry.title
-        : (this.$route.meta && this.$route.meta.title
-            ? String(this.$route.meta.title).replace(/\s*-\s*.+$/, "")
-            : "");
+  let topTitle = currNavTitle;
+  if (firstName) {
+    const top = navList.find((n) => n.name === firstName);
+    if (top) topTitle = top.title;
+  }
+  if (!topTitle) return null;
 
-      if (parentName) {
-        const parentChain = this.buildChain(parentName, depth + 1).map(
-          (it, idx, arr) =>
-            idx === arr.length - 1
-              ? { title: it.title, target: { name: parentName } }
-              : it
-        );
-        if (selfTitle) parentChain.push({ title: selfTitle });
-        return parentChain;
-      }
+  let target = null;
+  if (menuList && menuList.length) {
+    const leafName = findFirstLeaf(menuList[0]);
+    if (leafName) target = { name: leafName };
+  }
+  return { title: topTitle, target };
+}
 
-      const list = [];
-      const top = this.topItem();
-      if (top) list.push(top);
-      if (selfTitle) list.push({ title: selfTitle });
-      return list;
-    },
-  },
-};
+function buildChain(name, depth = 0) {
+  if (depth > 6) return [];
+
+  const inMenu = findInMenu(name);
+  if (inMenu) {
+    const list = [];
+    const top = topItem();
+    if (top) list.push(top);
+    const groupLeaf = findFirstLeaf(inMenu.group);
+    list.push({
+      title: inMenu.group.title,
+      target: groupLeaf ? { name: groupLeaf } : null,
+    });
+    list.push({ title: inMenu.child.title });
+    return list;
+  }
+
+  const parentName = PARENT_MAP[name];
+  const entry = routerEntry(name);
+  const selfTitle = entry?.title
+    ? entry.title
+    : (route.meta && route.meta.title
+        ? String(route.meta.title).replace(/\s*-\s*.+$/, "")
+        : "");
+
+  if (parentName) {
+    const parentChain = buildChain(parentName, depth + 1).map(
+      (it, idx, arr) =>
+        idx === arr.length - 1
+          ? { title: it.title, target: { name: parentName } }
+          : it
+    );
+    if (selfTitle) parentChain.push({ title: selfTitle });
+    return parentChain;
+  }
+
+  const list = [];
+  const top = topItem();
+  if (top) list.push(top);
+  if (selfTitle) list.push({ title: selfTitle });
+  return list;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue b/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
index de4e3c7be..79e75cc3a 100644
--- a/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
+++ b/manager/src/views/main-parts/shrinkable-menu/shrinkable-menu.vue
@@ -31,88 +31,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/stores/app";
+import { setStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import util from "@/libs/util.js";
 
-export default {
-  name: "shrinkableMenu",
-  computed: {
-    menuList() {
-      return this.$store.state.app.menuList;
-    },
-    navList() {
-      return this.$store.state.app.navList;
-    },
-    currNav() {
-      return this.$store.state.app.currNav;
-    },
-    activeMenuName() {
-      const route = this.$route;
-      const routePath = util.normalizeRoutePath(route.path);
-      for (const item of this.menuList) {
-        for (const menu of item.children || []) {
-          const menuPath = util.normalizeRoutePath(menu.path);
-          if (menu.name === route.name || (menuPath && menuPath === routePath)) {
-            return menu.name;
-          }
-        }
+defineOptions({ name: "shrinkableMenu" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const menuList = computed(() => appStore.menuList);
+const navList = computed(() => appStore.navList);
+const currNav = computed(() => appStore.currNav);
+const activeMenuName = computed(() => {
+  const routePath = util.normalizeRoutePath(route.path);
+  for (const item of menuList.value) {
+    for (const menu of item.children || []) {
+      const menuPath = util.normalizeRoutePath(menu.path);
+      if (menu.name === route.name || (menuPath && menuPath === routePath)) {
+        return menu.name;
       }
-      return route.name;
-    },
-  },
-  watch: {
-    $route(val) {
-      if (
-        val.meta.firstRouterName &&
-        val.meta.firstRouterName !== this.currNav
-      ) {
-        this.selectNav(val.meta.firstRouterName);
+    }
+  }
+  return route.name;
+});
+
+watch(
+  () => route.fullPath,
+  () => {
+    if (
+      route.meta.firstRouterName &&
+      route.meta.firstRouterName !== currNav.value
+    ) {
+      selectNav(route.meta.firstRouterName);
+    }
+  }
+);
+
+const changeMenu = (name) => {
+  if (!name) return;
+  if (router.hasRoute(name)) {
+    router.push({ name });
+    return;
+  }
+  const menu = findMenuByName(name);
+  if (menu?.path) {
+    const path = menu.path.startsWith("/") ? menu.path : `/${menu.path}`;
+    router.push({ path });
+    return;
+  }
+  util.initRouter();
+  nextTick(() => {
+    if (router.hasRoute(name)) {
+      router.push({ name });
+    } else {
+      Message.warning("菜单路由未就绪，请刷新页面后重试");
+    }
+  });
+};
+
+const findMenuByName = (name) => {
+  for (const item of menuList.value) {
+    for (const menu of item.children || []) {
+      if (menu.name === name) {
+        return menu;
       }
-    },
-  },
-  methods: {
-    changeMenu(name) {
-      if (!name) return;
-      if (this.$router.hasRoute(name)) {
-        this.$router.push({ name });
-        return;
-      }
-      const menu = this.findMenuByName(name);
-      if (menu?.path) {
-        const path = menu.path.startsWith("/") ? menu.path : `/${menu.path}`;
-        this.$router.push({ path });
-        return;
-      }
-      util.initRouter(this);
-      this.$nextTick(() => {
-        if (this.$router.hasRoute(name)) {
-          this.$router.push({ name });
-        } else {
-          this.$Message.warning("菜单路由未就绪，请刷新页面后重试");
-        }
-      });
-    },
-    findMenuByName(name) {
-      for (const item of this.menuList) {
-        for (const menu of item.children || []) {
-          if (menu.name === name) {
-            return menu;
-          }
-        }
-      }
-      return null;
-    },
-    selectNav(name) {
-      this.$store.commit("setCurrNav", name);
-      this.setStore("currNav", name);
-      if (name === 'home_index') {
-        this.$store.commit("updateMenulist", []);
-        this.$router.push({ name: 'home_index' });
-        return;
-      }
-      util.initRouter(this);
-    },
-  },
+    }
+  }
+  return null;
+};
+
+const selectNav = (name) => {
+  appStore.setCurrNav(name);
+  setStore("currNav", name);
+  if (name === 'home_index') {
+    appStore.updateMenulist([]);
+    router.push({ name: 'home_index' });
+    return;
+  }
+  util.initRouter();
 };
 </script>
 
diff --git a/manager/src/views/main-parts/tags-page-opened.vue b/manager/src/views/main-parts/tags-page-opened.vue
index cd16d54ba..dd13a78b6 100644
--- a/manager/src/views/main-parts/tags-page-opened.vue
+++ b/manager/src/views/main-parts/tags-page-opened.vue
@@ -41,160 +41,179 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, onBeforeUnmount } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useAppStore } from "@/stores/app";
 import util from "@/libs/util.js";
 
-export default {
-  name: "tagsPageOpened",
-  props: {
-    pageTagsList: Array,
-    beforePush: {
-      type: Function,
-      default: () => true,
-    },
-  },
-  data() {
-    return {
-      currentPageName: this.$route.name,
-      tagBodyLeft: 0,
-      visible: false,
-      contextMenuLeft: 0,
-      contextMenuTop: 0,
-      actionList: {
-        others: "关闭其他",
-        clearAll: "关闭所有",
-      },
-    };
-  },
-  methods: {
-    isActive(item) {
-      const target = item.children ? item.children[0] : item;
-      return util.isSameRoutePage(target, {
-        name: this.currentPageName,
-        path: this.$route.path,
-      });
-    },
-    tagType(item) {
-      return this.isActive(item) ? "primary" : "info";
-    },
-    itemTitle(item) {
-      if (typeof item.title === "object") {
-        return this.$t(item.title.i18n);
-      }
-      return item.title;
-    },
-    closePage(event, name) {
-      let pageOpenedList = this.$store.state.app.pageOpenedList;
-      let lastPageObj = pageOpenedList[0];
-      if (this.currentPageName === name) {
-        const len = pageOpenedList.length;
-        for (let i = 1; i < len; i++) {
-          if (pageOpenedList[i].name === name) {
-            lastPageObj =
-              i < len - 1 ? pageOpenedList[i + 1] : pageOpenedList[i - 1];
-            break;
-          }
-        }
-      } else if (event && event.target) {
-        const tagWidth = event.target.parentNode?.offsetWidth || 0;
-        this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
-      }
-      this.$store.commit("removeTag", name);
-      this.$store.commit("closePage", name);
-      pageOpenedList = this.$store.state.app.pageOpenedList;
-      localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
-      if (this.currentPageName === name) {
-        this.linkTo(lastPageObj);
-      }
-    },
-    linkTo(item) {
-      const target = item.children ? item.children[0] : item;
-      if (util.isSameRoutePage(target, this.$route)) return;
-      if (!this.beforePush(item)) return;
+defineOptions({ name: "tagsPageOpened" });
 
-      const routerObj = { name: item.name };
-      if (item.argu) routerObj.params = item.argu;
-      if (item.query) routerObj.query = item.query;
+const props = defineProps({
+  pageTagsList: Array,
+  beforePush: {
+    type: Function,
+    default: () => true,
+  },
+});
 
-      if (item.name && this.$router.hasRoute(item.name)) {
-        this.$router.push(routerObj);
-        return;
-      }
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const appStore = useAppStore();
 
-      const path = target.path || item.path;
-      if (path) {
-        this.$router.push({
-          path: path.startsWith("/") ? path : `/${path}`,
-          query: item.query,
-        });
-      }
-    },
-    handlescroll(e) {
-      const type = e.type;
-      let delta = 0;
-      if (type === "DOMMouseScroll" || type === "mousewheel") {
-        delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
-      }
-      let left = 0;
-      if (delta > 0) {
-        left = Math.min(0, this.tagBodyLeft + delta);
-      } else if (
-        this.$refs.scrollCon.offsetWidth - 100 <
-        this.$refs.scrollBody.offsetWidth
-      ) {
-        if (
-          this.tagBodyLeft <
-          -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)
-        ) {
-          left = this.tagBodyLeft;
-        } else {
-          left = Math.max(
-            this.tagBodyLeft + delta,
-            this.$refs.scrollCon.offsetWidth -
-              this.$refs.scrollBody.offsetWidth -
-              100
-          );
-        }
-      } else {
-        this.tagBodyLeft = 0;
-      }
-      this.tagBodyLeft = left;
-    },
-    handleTagsOption(type) {
-      if (type === "clearAll") {
-        this.$store.commit("clearAllTags");
-        this.$router.push({ name: "home_index" });
-      } else {
-        this.$store.commit("clearOtherTags", this);
-      }
-      this.tagBodyLeft = 0;
-    },
-    contextMenu(item, e) {
-      this.visible = true;
-      const offsetLeft = this.$el.getBoundingClientRect().left;
-      this.contextMenuLeft = e.clientX - offsetLeft + 10;
-      this.contextMenuTop = e.clientY - 64;
-    },
-    closeMenu() {
-      this.visible = false;
-    },
-  },
-  watch: {
-    $route(to) {
-      this.currentPageName = to.name;
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener("click", this.closeMenu);
-      } else {
-        document.body.removeEventListener("click", this.closeMenu);
-      }
-    },
-  },
-  beforeUnmount() {
-    document.body.removeEventListener("click", this.closeMenu);
-  },
+const currentPageName = ref(route.name);
+const tagBodyLeft = ref(0);
+const visible = ref(false);
+const contextMenuLeft = ref(0);
+const contextMenuTop = ref(0);
+const actionList = {
+  others: "关闭其他",
+  clearAll: "关闭所有",
 };
+
+const scrollCon = ref(null);
+const scrollBody = ref(null);
+
+const isActive = (item) => {
+  const target = item.children ? item.children[0] : item;
+  return util.isSameRoutePage(target, {
+    name: currentPageName.value,
+    path: route.path,
+  });
+};
+
+const tagType = (item) => {
+  return isActive(item) ? "primary" : "info";
+};
+
+const itemTitle = (item) => {
+  if (typeof item.title === "object") {
+    return t(item.title.i18n);
+  }
+  return item.title;
+};
+
+const closePage = (event, name) => {
+  let pageOpenedList = appStore.pageOpenedList;
+  let lastPageObj = pageOpenedList[0];
+  if (currentPageName.value === name) {
+    const len = pageOpenedList.length;
+    for (let i = 1; i < len; i++) {
+      if (pageOpenedList[i].name === name) {
+        lastPageObj =
+          i < len - 1 ? pageOpenedList[i + 1] : pageOpenedList[i - 1];
+        break;
+      }
+    }
+  } else if (event && event.target) {
+    const tagWidth = event.target.parentNode?.offsetWidth || 0;
+    tagBodyLeft.value = Math.min(tagBodyLeft.value + tagWidth, 0);
+  }
+  appStore.removeTag(name);
+  appStore.closePage(name);
+  pageOpenedList = appStore.pageOpenedList;
+  localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
+  if (currentPageName.value === name) {
+    linkTo(lastPageObj);
+  }
+};
+
+const linkTo = (item) => {
+  const target = item.children ? item.children[0] : item;
+  if (util.isSameRoutePage(target, route)) return;
+  if (!props.beforePush(item)) return;
+
+  const routerObj = { name: item.name };
+  if (item.argu) routerObj.params = item.argu;
+  if (item.query) routerObj.query = item.query;
+
+  if (item.name && router.hasRoute(item.name)) {
+    router.push(routerObj);
+    return;
+  }
+
+  const path = target.path || item.path;
+  if (path) {
+    router.push({
+      path: path.startsWith("/") ? path : `/${path}`,
+      query: item.query,
+    });
+  }
+};
+
+const handlescroll = (e) => {
+  const type = e.type;
+  let delta = 0;
+  if (type === "DOMMouseScroll" || type === "mousewheel") {
+    delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
+  }
+  let left = 0;
+  if (delta > 0) {
+    left = Math.min(0, tagBodyLeft.value + delta);
+  } else if (
+    scrollCon.value.offsetWidth - 100 <
+    scrollBody.value.offsetWidth
+  ) {
+    if (
+      tagBodyLeft.value <
+      -(scrollBody.value.offsetWidth - scrollCon.value.offsetWidth + 100)
+    ) {
+      left = tagBodyLeft.value;
+    } else {
+      left = Math.max(
+        tagBodyLeft.value + delta,
+        scrollCon.value.offsetWidth -
+          scrollBody.value.offsetWidth -
+          100
+      );
+    }
+  } else {
+    tagBodyLeft.value = 0;
+  }
+  tagBodyLeft.value = left;
+};
+
+const handleTagsOption = (type) => {
+  if (type === "clearAll") {
+    appStore.clearAllTags();
+    router.push({ name: "home_index" });
+  } else {
+    appStore.clearOtherTags(route.name);
+  }
+  tagBodyLeft.value = 0;
+};
+
+const contextMenu = (item, e) => {
+  visible.value = true;
+  const offsetLeft = scrollCon.value.getBoundingClientRect().left;
+  contextMenuLeft.value = e.clientX - offsetLeft + 10;
+  contextMenuTop.value = e.clientY - 64;
+};
+
+const closeMenu = () => {
+  visible.value = false;
+};
+
+watch(
+  () => route.name,
+  (name) => {
+    currentPageName.value = name;
+  }
+);
+
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener("click", closeMenu);
+  } else {
+    document.body.removeEventListener("click", closeMenu);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.body.removeEventListener("click", closeMenu);
+});
 </script>
 
 <style lang="scss">
diff --git a/manager/src/views/member/advance/recharge.vue b/manager/src/views/member/advance/recharge.vue
index 16ba69724..59283da41 100644
--- a/manager/src/views/member/advance/recharge.vue
+++ b/manager/src/views/member/advance/recharge.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -90,74 +90,74 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { getUserRecharge } from "@/api/member";
 
-export default {
-  name: "recharge",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        memberName: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    rechargeWayText(way) {
-      if (way === "ALIPAY") return "支付宝";
-      if (way === "WECHAT") return "微信";
-      if (way === "BANK_TRANSFER") return "线下转账";
-      return "";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      getUserRecharge(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "recharge" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  memberName: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+
+function rechargeWayText(way) {
+  if (way === "ALIPAY") return "支付宝";
+  if (way === "WECHAT") return "微信";
+  if (way === "BANK_TRANSFER") return "线下转账";
+  return "";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  getUserRecharge(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/member/advance/walletLog.vue b/manager/src/views/member/advance/walletLog.vue
index 13d7e9179..7b6905d4a 100644
--- a/manager/src/views/member/advance/walletLog.vue
+++ b/manager/src/views/member/advance/walletLog.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -85,75 +85,75 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { getUserWallet } from "@/api/member";
 
-export default {
-  name: "walletLog",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        memberName: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    serviceTypeText(type) {
-      if (type === "WALLET_WITHDRAWAL") return "余额提现";
-      if (type === "WALLET_PAY") return "余额支付";
-      if (type === "WALLET_REFUND") return "余额退款";
-      if (type === "WALLET_RECHARGE") return "余额充值";
-      return "佣金提成";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      getUserWallet(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "walletLog" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  memberName: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+
+function serviceTypeText(type) {
+  if (type === "WALLET_WITHDRAWAL") return "余额提现";
+  if (type === "WALLET_PAY") return "余额支付";
+  if (type === "WALLET_REFUND") return "余额退款";
+  if (type === "WALLET_RECHARGE") return "余额充值";
+  return "佣金提成";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  getUserWallet(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/member/advance/withdrawApply.vue b/manager/src/views/member/advance/withdrawApply.vue
index 39d28a2e9..47fa7ca69 100644
--- a/manager/src/views/member/advance/withdrawApply.vue
+++ b/manager/src/views/member/advance/withdrawApply.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -169,168 +169,169 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { getUserWithdrawApply, withdrawApply } from "@/api/member";
 import { ElMessage } from "element-plus";
 
-export default {
-  name: "withdrawApply",
-  data() {
-    return {
-      modalTitle: "",
-      loading: true,
-      audit: "",
-      roleModalVisible: false,
-      queryModalVisible: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        memberName: "",
-        applyStatus: "",
-      },
-      selectDate: null,
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      showList: {},
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    paramTypeFilter(val) {
-      if (val === "APPLY") return "申请中";
-      if (val === "VIA_AUDITING") return "审核通过(提现成功)";
-      if (val === "WAIT_USER_CONFIRM") return "用户确认";
-      if (val === "FAIL_AUDITING") return "审核拒绝";
-      if (val === "SUCCESS") return "提现成功";
-      if (val === "ERROR") return "提现失败";
-      return "未知状态";
-    },
-    applyStatusText(status) {
-      if (status === "APPLY") return "申请中";
-      if (status === "VIA_AUDITING") return "审核通过";
-      if (status === "WAIT_USER_CONFIRM") return "用户确认";
-      if (status === "SUCCESS") return "提现成功";
-      if (status === "ERROR") return "提现失败";
-      return "审核拒绝";
-    },
-    applyStatusTagType(status) {
-      if (status === "APPLY") return "warning";
-      if (status === "VIA_AUDITING") return "success";
-      if (status === "WAIT_USER_CONFIRM") return "warning";
-      if (status === "SUCCESS") return "primary";
-      if (status === "ERROR") return "primary";
-      return "danger";
-    },
-    openAudit(row) {
-      this.showList = { ...row };
-      this.audit = "";
-      this.roleModalVisible = true;
-    },
-    openQuery(row) {
-      this.showList = { ...row };
-      this.modalTitle = "查看";
-      this.queryModalVisible = true;
-    },
-    submitRole(res) {
-      const params = {};
-      params.applyId = this.showList.id;
-      params.result = res;
-      params.remark = this.audit;
-      if (res === false && params.remark === "") {
-        ElMessage.error("审核备注不能为空");
-        return;
+defineOptions({ name: "withdrawApply" });
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+// 模板 el-table 的 ref
+const table = ref(null);
+
+const modalTitle = ref("");
+const loading = ref(true);
+const audit = ref("");
+const roleModalVisible = ref(false);
+const queryModalVisible = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  memberName: "",
+  applyStatus: "",
+});
+const selectDate = ref(null);
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const showList = ref({});
+const data = ref([]);
+const total = ref(0);
+
+function paramTypeFilter(val) {
+  if (val === "APPLY") return "申请中";
+  if (val === "VIA_AUDITING") return "审核通过(提现成功)";
+  if (val === "WAIT_USER_CONFIRM") return "用户确认";
+  if (val === "FAIL_AUDITING") return "审核拒绝";
+  if (val === "SUCCESS") return "提现成功";
+  if (val === "ERROR") return "提现失败";
+  return "未知状态";
+}
+function applyStatusText(status) {
+  if (status === "APPLY") return "申请中";
+  if (status === "VIA_AUDITING") return "审核通过";
+  if (status === "WAIT_USER_CONFIRM") return "用户确认";
+  if (status === "SUCCESS") return "提现成功";
+  if (status === "ERROR") return "提现失败";
+  return "审核拒绝";
+}
+function applyStatusTagType(status) {
+  if (status === "APPLY") return "warning";
+  if (status === "VIA_AUDITING") return "success";
+  if (status === "WAIT_USER_CONFIRM") return "warning";
+  if (status === "SUCCESS") return "primary";
+  if (status === "ERROR") return "primary";
+  return "danger";
+}
+function openAudit(row) {
+  showList.value = { ...row };
+  audit.value = "";
+  roleModalVisible.value = true;
+}
+function openQuery(row) {
+  showList.value = { ...row };
+  modalTitle.value = "查看";
+  queryModalVisible.value = true;
+}
+function submitRole(res) {
+  const params = {};
+  params.applyId = showList.value.id;
+  params.result = res;
+  params.remark = audit.value;
+  if (res === false && params.remark === "") {
+    ElMessage.error("审核备注不能为空");
+    return;
+  }
+  submitLoading.value = true;
+  withdrawApply(params)
+    .then((result) => {
+      const success = result === true || (result && result.success === true);
+      if (success) {
+        ElMessage.success("操作成功");
+        roleModalVisible.value = false;
+        queryModalVisible.value = false;
+        audit.value = "";
+        showList.value = {};
+        getDataList();
       }
-      this.submitLoading = true;
-      withdrawApply(params)
-        .then((result) => {
-          const success = result === true || (result && result.success === true);
-          if (success) {
-            ElMessage.success("操作成功");
-            this.roleModalVisible = false;
-            this.queryModalVisible = false;
-            this.audit = "";
-            this.showList = {};
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    handleReset() {
-      this.$refs.searchForm.resetFields();
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.selectDate = null;
-      this.searchForm.startDate = "";
-      this.searchForm.endDate = "";
-      this.searchForm.memberName = "";
-      this.getDataList();
-    },
-    changeSort(e) {
-      this.searchForm.sort = e.prop || e.key;
-      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      if (!e.order) {
-        this.searchForm.order = "";
-      }
-      this.getDataList();
-    },
-    clearSelectAll() {
-      if (this.$refs.table) {
-        this.$refs.table.clearSelection();
-      }
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      getUserWithdrawApply(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function handleReset() {
+  searchFormRef.value.resetFields();
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  selectDate.value = null;
+  searchForm.startDate = "";
+  searchForm.endDate = "";
+  searchForm.memberName = "";
+  getDataList();
+}
+function changeSort(e) {
+  searchForm.sort = e.prop || e.key;
+  searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  if (!e.order) {
+    searchForm.order = "";
+  }
+  getDataList();
+}
+function clearSelectAll() {
+  if (table.value) {
+    table.value.clearSelection();
+  }
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  getUserWithdrawApply(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .ops a {
diff --git a/manager/src/views/member/benefit/index.vue b/manager/src/views/member/benefit/index.vue
index bd39749cf..265663afa 100644
--- a/manager/src/views/member/benefit/index.vue
+++ b/manager/src/views/member/benefit/index.vue
@@ -343,7 +343,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, nextTick, onMounted } from "vue";
 import * as API_Member from "@/api/member.js";
 import { getPlatformCoupon } from "@/api/promotion";
 import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
@@ -351,6 +352,8 @@ import couponTemplate from "@/views/promotions/coupon/coupon.vue";
 import uploadPicInput from "@/components/lili/upload-pic-input.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 
+defineOptions({ name: "memberBenefit" });
+
 const GIFT_POINT = "GIFT_POINT";
 const COUPON_PACKAGE = "COUPON_PACKAGE";
 
@@ -368,496 +371,490 @@ const buildDefaultForm = () => ({
   couponPackageRows: [],
 });
 
-export default {
-  name: "memberBenefit",
-  components: {
-    uploadPicInput,
-    couponTemplate,
-  },
-  data() {
-    return {
-      benefitTypeOptions: [],
-      loading: false,
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
+// 模板 ref（couponPicker 为优惠券选择组件，addForm/editForm 为表单）
+const couponPicker = ref(null);
+const addForm = ref(null);
+const editForm = ref(null);
+// 动态 ref 映射表（原 this.$refs[refName]）
+const formRefs = { addForm, editForm };
+
+const benefitTypeOptions = ref([]);
+const loading = ref(false);
+const total = ref(0);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const addFlag = ref(false);
+const editFlag = ref(false);
+const submitAddLoading = ref(false);
+const submitEditLoading = ref(false);
+const formAdd = ref(buildDefaultForm());
+const formEdit = ref(buildDefaultForm());
+const couponPickerVisible = ref(false);
+const couponPickerWhich = ref("add");
+
+// 动态表单映射表（原 this[formKey]）
+const formMap = { formAdd, formEdit };
+
+const rulesAdd = computed(() => buildFormRules("add"));
+const rulesEdit = computed(() => buildFormRules("edit"));
+const couponPickerSelectedList = computed(() => {
+  const form = couponPickerWhich.value === "add" ? formAdd.value : formEdit.value;
+  return (form.couponPackageRows || []).map((r) => ({
+    id: r.couponId,
+    couponName: r.couponName || "",
+  }));
+});
+
+function benefitTypeLabel(v) {
+  if (!v) return "-";
+  const opt = benefitTypeOptions.value.find((o) => o.value === v);
+  return opt ? opt.description : v;
+}
+function touchFormField(refName, field) {
+  nextTick(() => {
+    const ref = formRefs[refName]?.value;
+    if (ref && typeof ref.validateField === "function") {
+      // validateField rejects on failure; catch to avoid dev-server [object Object] overlay
+      ref.validateField(field, () => {});
+    }
+  });
+}
+function onCouponQuantityChange(which, index, val) {
+  const formKey = which === "add" ? "formAdd" : "formEdit";
+  const refName = which === "add" ? "addForm" : "editForm";
+  formMap[formKey].value.couponPackageRows[index].quantity = val;
+  touchFormField(refName, "couponPackageRows");
+}
+function buildFormRules(which) {
+  const formKey = which === "add" ? "formAdd" : "formEdit";
+  return {
+    benefitType: [{ required: true, message: "请选择权益类型", trigger: "change" }],
+    benefitName: [{ required: true, message: "请输入权益名称", trigger: "blur" }],
+    benefitLogo: [{ required: true, message: "请配置权益LOGO", trigger: "change" }],
+    benefitSort: [{ required: true, type: "number", message: "请输入排序", trigger: "change" }],
+    benefitState: [{ required: true, message: "请选择启用状态", trigger: "change" }],
+    giftPoint: [
+      {
+        validator: (rule, value, callback) => {
+          const form = formMap[formKey].value;
+          validateGiftPoint(form, value, callback);
+        },
+        trigger: ["change", "blur"],
       },
-      data: [],
-      addFlag: false,
-      editFlag: false,
-      submitAddLoading: false,
-      submitEditLoading: false,
-      formAdd: buildDefaultForm(),
-      formEdit: buildDefaultForm(),
-      couponPickerVisible: false,
-      couponPickerWhich: "add",
-    };
-  },
-  computed: {
-    rulesAdd() {
-      return this.buildFormRules("add");
-    },
-    rulesEdit() {
-      return this.buildFormRules("edit");
-    },
-    couponPickerSelectedList() {
-      const form = this.couponPickerWhich === "add" ? this.formAdd : this.formEdit;
-      return (form.couponPackageRows || []).map((r) => ({
-        id: r.couponId,
-        couponName: r.couponName || "",
+    ],
+    couponPackageRows: [
+      {
+        validator: (rule, value, callback) => {
+          const form = formMap[formKey].value;
+          validateCouponPackage(form, callback);
+        },
+        trigger: "change",
+      },
+    ],
+  };
+}
+function validateGiftPoint(form, value, callback) {
+  if (form.benefitType !== GIFT_POINT) return callback();
+  if (value === null || value === undefined || value === "") {
+    return callback(new Error("请输入赠送积分"));
+  }
+  const n = Number(value);
+  if (Number.isNaN(n) || n < 0 || n > 99999) {
+    return callback(new Error("赠送积分范围为 0-99999"));
+  }
+  callback();
+}
+function validateCouponPackage(form, callback) {
+  if (form.benefitType !== COUPON_PACKAGE) return callback();
+  const rows = form.couponPackageRows || [];
+  if (!rows.length) {
+    return callback(new Error("请添加至少一张优惠券"));
+  }
+  for (let i = 0; i < rows.length; i++) {
+    const q = Number(rows[i].quantity);
+    if (Number.isNaN(q) || q < 1 || q > 10) {
+      return callback(new Error("每张券赠送张数需在 1～10 之间"));
+    }
+  }
+  callback();
+}
+function formatCouponFace(row) {
+  if (!row) return "-";
+  if (row.price !== undefined && row.price !== null && row.price !== "") {
+    return `¥${row.price}`;
+  }
+  if (row.couponDiscount !== undefined && row.couponDiscount !== null && row.couponDiscount !== "") {
+    return `${row.couponDiscount}折`;
+  }
+  return "-";
+}
+function formatCouponValidity(row) {
+  return formatPromotionCouponValidityHtml(row);
+}
+function buildCouponDisplayRow(detail, quantity) {
+  const qty = Math.min(10, Math.max(1, Number(quantity) || 1));
+  return {
+    couponId: detail.id,
+    quantity: qty,
+    couponName: detail.couponName || "",
+    faceValueLabel: formatCouponFace(detail),
+    validRange: formatCouponValidity(detail),
+  };
+}
+function buildBenefitConfigString(slice) {
+  const { benefitType, giftPoint, couponPackageRows } = slice;
+  if (benefitType === GIFT_POINT) {
+    return JSON.stringify({ giftPoint: Number(giftPoint) });
+  }
+  if (benefitType === COUPON_PACKAGE) {
+    const coupons = (couponPackageRows || []).map((r) => ({
+      couponId: String(r.couponId),
+      quantity: Math.min(10, Math.max(1, Number(r.quantity) || 1)),
+    }));
+    return JSON.stringify({ coupons });
+  }
+  return "";
+}
+function parseGiftPointFromConfig(benefitType, benefitConfigStr) {
+  if (benefitType !== GIFT_POINT || !benefitConfigStr) return null;
+  try {
+    const o = JSON.parse(benefitConfigStr);
+    if (o && typeof o.giftPoint !== "undefined") {
+      const n = Number(o.giftPoint);
+      return Number.isNaN(n) ? null : n;
+    }
+  } catch (e) {
+    /* ignore */
+  }
+  return null;
+}
+function onAddBenefitTypeChange(val) {
+  if (val !== GIFT_POINT) {
+    formAdd.value.giftPoint = null;
+  }
+  if (val !== COUPON_PACKAGE) {
+    formAdd.value.couponPackageRows = [];
+  }
+  if (addForm.value && val !== GIFT_POINT) {
+    touchFormField("addForm", "giftPoint");
+  }
+  if (addForm.value && val !== COUPON_PACKAGE) {
+    touchFormField("addForm", "couponPackageRows");
+  }
+}
+function onEditBenefitTypeChange(val) {
+  if (val !== GIFT_POINT) {
+    formEdit.value.giftPoint = null;
+  }
+  if (val !== COUPON_PACKAGE) {
+    formEdit.value.couponPackageRows = [];
+  }
+  if (editForm.value && val !== GIFT_POINT) {
+    touchFormField("editForm", "giftPoint");
+  }
+  if (editForm.value && val !== COUPON_PACKAGE) {
+    touchFormField("editForm", "couponPackageRows");
+  }
+}
+function parseCouponsFromConfig(str) {
+  if (!str) return [];
+  try {
+    const o = JSON.parse(str);
+    if (o && Array.isArray(o.coupons)) {
+      return o.coupons.map((c) => ({
+        couponId: c.couponId,
+        quantity: c.quantity,
       }));
-    },
-  },
-  methods: {
-    benefitTypeLabel(v) {
-      if (!v) return "-";
-      const opt = this.benefitTypeOptions.find((o) => o.value === v);
-      return opt ? opt.description : v;
-    },
-    touchFormField(refName, field) {
-      this.$nextTick(() => {
-        const ref = this.$refs[refName];
-        if (ref && typeof ref.validateField === "function") {
-          // validateField rejects on failure; catch to avoid dev-server [object Object] overlay
-          ref.validateField(field, () => {});
-        }
+    }
+  } catch (e) {
+    /* ignore */
+  }
+  return [];
+}
+function normalizeCouponFaceFromDetail(item) {
+  let face = formatCouponFace(item);
+  if (face !== "-") return face;
+  const raw = item.faceValueText;
+  if (raw == null || raw === "") return "-";
+  return String(raw)
+    .replace(/^减免现金\s*/, "")
+    .replace(/^减免\s*/, "")
+    .trim() || "-";
+}
+function mapCouponItemsToPackageRows(items) {
+  if (!Array.isArray(items)) return [];
+  return items.map((item) => {
+    const face = normalizeCouponFaceFromDetail(item);
+    const validHtml = item.validityText
+      ? String(item.validityText).replace(/\n/g, "<br/>")
+      : "-";
+    return {
+      couponId: item.couponId,
+      quantity: Math.min(10, Math.max(1, Number(item.quantity) || 1)),
+      couponName: item.couponName || "",
+      faceValueLabel: face,
+      validRange: validHtml,
+    };
+  });
+}
+async function hydrateCouponRowsForEdit(snippets) {
+  const rows = [];
+  for (const s of snippets) {
+    const cid = s.couponId;
+    const qty = s.quantity;
+    try {
+      const res = await getPlatformCoupon(cid);
+      if (res && res.success && res.result) {
+        rows.push(buildCouponDisplayRow(res.result, qty));
+      } else {
+        rows.push({
+          couponId: cid,
+          quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
+          couponName: String(cid),
+          faceValueLabel: "-",
+          validRange: "-",
+        });
+      }
+    } catch (e) {
+      rows.push({
+        couponId: cid,
+        quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
+        couponName: String(cid),
+        faceValueLabel: "-",
+        validRange: "-",
       });
-    },
-    onCouponQuantityChange(which, index, val) {
-      const formKey = which === "add" ? "formAdd" : "formEdit";
-      const refName = which === "add" ? "addForm" : "editForm";
-      this[formKey].couponPackageRows[index].quantity = val;
-      this.touchFormField(refName, "couponPackageRows");
-    },
-    buildFormRules(which) {
-      const formKey = which === "add" ? "formAdd" : "formEdit";
-      return {
-        benefitType: [{ required: true, message: "请选择权益类型", trigger: "change" }],
-        benefitName: [{ required: true, message: "请输入权益名称", trigger: "blur" }],
-        benefitLogo: [{ required: true, message: "请配置权益LOGO", trigger: "change" }],
-        benefitSort: [{ required: true, type: "number", message: "请输入排序", trigger: "change" }],
-        benefitState: [{ required: true, message: "请选择启用状态", trigger: "change" }],
-        giftPoint: [
-          {
-            validator: (rule, value, callback) => {
-              const form = this[formKey];
-              this.validateGiftPoint(form, value, callback);
-            },
-            trigger: ["change", "blur"],
-          },
-        ],
-        couponPackageRows: [
-          {
-            validator: (rule, value, callback) => {
-              const form = this[formKey];
-              this.validateCouponPackage(form, callback);
-            },
-            trigger: "change",
-          },
-        ],
+    }
+  }
+  formEdit.value.couponPackageRows = rows;
+}
+function handleCouponPickerClose() {
+  couponPickerVisible.value = false;
+}
+function openCouponPicker(which) {
+  couponPickerWhich.value = which;
+  couponPickerVisible.value = true;
+}
+function confirmCouponPicker() {
+  const list = couponPicker.value?.getSelection?.() || [];
+  if (!list.length) {
+    ElMessage.warning("请至少选择一张优惠券");
+    return;
+  }
+  onCouponTemplateSelected(list);
+  couponPickerVisible.value = false;
+}
+function onCouponTemplateSelected(selectedRows) {
+  const which = couponPickerWhich.value;
+  const form = which === "add" ? formAdd.value : formEdit.value;
+  const refName = which === "add" ? "addForm" : "editForm";
+  const list = selectedRows || [];
+  const rows = list.map((row) => {
+    const existing = (form.couponPackageRows || []).find((r) => String(r.couponId) === String(row.id));
+    const qty = existing ? existing.quantity : 1;
+    return buildCouponDisplayRow(row, qty);
+  });
+  form.couponPackageRows = rows;
+  touchFormField(refName, "couponPackageRows");
+}
+function removeCouponRow(which, index) {
+  const form = which === "add" ? formAdd.value : formEdit.value;
+  const refName = which === "add" ? "addForm" : "editForm";
+  form.couponPackageRows.splice(index, 1);
+  touchFormField(refName, "couponPackageRows");
+}
+function init() {
+  loadBenefitTypes();
+  getData();
+}
+function loadBenefitTypes() {
+  API_Member.getMemberBenefitTypes().then((res) => {
+    if (res && res.success && Array.isArray(res.result)) {
+      benefitTypeOptions.value = res.result;
+    } else {
+      benefitTypeOptions.value = [];
+    }
+  });
+}
+function changePage(page) {
+  searchForm.value.pageNumber = page;
+  getData();
+}
+function changePageSize(size) {
+  searchForm.value.pageSize = size;
+  searchForm.value.pageNumber = 1;
+  getData();
+}
+function getData() {
+  loading.value = true;
+  const params = { ...searchForm.value };
+  API_Member.getMemberBenefitByPage(params).then((res) => {
+    loading.value = false;
+    if (res && res.success && res.result) {
+      data.value = Array.isArray(res.result.records) ? res.result.records : [];
+      total.value = Number(res.result.total) || 0;
+    } else {
+      data.value = [];
+      total.value = 0;
+    }
+  });
+}
+function openAdd() {
+  addFlag.value = true;
+  submitAddLoading.value = false;
+  nextTick(() => {
+    if (addForm.value) addForm.value.resetFields();
+    formAdd.value = buildDefaultForm();
+  });
+}
+function submitAdd() {
+  if (!addForm.value) {
+    ElMessage.warning("表单未就绪，请稍后重试");
+    return;
+  }
+  addForm.value.validate((valid) => {
+    if (!valid) return;
+    submitAddLoading.value = true;
+    const { giftPoint, couponPackageRows, ...rest } = formAdd.value;
+    const payload = {
+      ...rest,
+      benefitConfig: buildBenefitConfigString({
+        benefitType: formAdd.value.benefitType,
+        giftPoint,
+        couponPackageRows,
+      }),
+    };
+    API_Member.addMemberBenefit(payload).then((res) => {
+      submitAddLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("添加成功");
+        addFlag.value = false;
+        getData();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      } else {
+        ElMessage.error("添加失败");
+      }
+    }).catch(() => {
+      submitAddLoading.value = false;
+      ElMessage.error("网络异常，请稍后重试");
+    });
+  });
+}
+function openEdit(row) {
+  editFlag.value = true;
+  submitEditLoading.value = false;
+  nextTick(() => {
+    if (editForm.value) editForm.value.resetFields();
+  });
+  API_Member.getMemberBenefit(row.id).then((res) => {
+    if (res && res.success && res.result) {
+      const raw = res.result;
+      const detail = raw.benefit != null ? raw.benefit : raw;
+      const couponItems = raw.couponItems;
+      const bt = detail.benefitType || "";
+      const parsed = parseGiftPointFromConfig(bt, detail.benefitConfig || "");
+      const couponSnippets = parseCouponsFromConfig(detail.benefitConfig || "");
+
+      let couponRows = [];
+      if (bt === COUPON_PACKAGE && Array.isArray(couponItems) && couponItems.length) {
+        couponRows = mapCouponItemsToPackageRows(couponItems);
+      }
+
+      formEdit.value = {
+        id: detail.id || row.id || "",
+        benefitName: detail.benefitName || "",
+        benefitCode: detail.benefitCode || "",
+        benefitType: bt,
+        benefitLogo: detail.benefitLogo || "",
+        benefitDesc: detail.benefitDesc || "",
+        benefitSort: Number(detail.benefitSort) > 0 ? Number(detail.benefitSort) : 1,
+        benefitState: detail.benefitState || "OPEN",
+        benefitConfig: detail.benefitConfig || "",
+        giftPoint: bt === GIFT_POINT ? (parsed !== null ? parsed : null) : null,
+        couponPackageRows: couponRows,
       };
-    },
-    validateGiftPoint(form, value, callback) {
-      if (form.benefitType !== GIFT_POINT) return callback();
-      if (value === null || value === undefined || value === "") {
-        return callback(new Error("请输入赠送积分"));
+
+      if (bt === COUPON_PACKAGE && couponRows.length === 0 && couponSnippets.length) {
+        hydrateCouponRowsForEdit(couponSnippets);
       }
-      const n = Number(value);
-      if (Number.isNaN(n) || n < 0 || n > 99999) {
-        return callback(new Error("赠送积分范围为 0-99999"));
+    }
+  });
+}
+function submitEdit() {
+  if (!editForm.value) {
+    ElMessage.warning("表单未就绪，请稍后重试");
+    return;
+  }
+  editForm.value.validate((valid) => {
+    if (!valid) return;
+    submitEditLoading.value = true;
+    const { id, giftPoint, couponPackageRows, ...rest } = formEdit.value;
+    const payload = {
+      ...rest,
+      benefitConfig: buildBenefitConfigString({
+        benefitType: formEdit.value.benefitType,
+        giftPoint,
+        couponPackageRows,
+      }),
+    };
+    API_Member.updateMemberBenefit(id, payload).then((res) => {
+      submitEditLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("修改成功");
+        editFlag.value = false;
+        getData();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      } else {
+        ElMessage.error("修改失败");
       }
-      callback();
-    },
-    validateCouponPackage(form, callback) {
-      if (form.benefitType !== COUPON_PACKAGE) return callback();
-      const rows = form.couponPackageRows || [];
-      if (!rows.length) {
-        return callback(new Error("请添加至少一张优惠券"));
-      }
-      for (let i = 0; i < rows.length; i++) {
-        const q = Number(rows[i].quantity);
-        if (Number.isNaN(q) || q < 1 || q > 10) {
-          return callback(new Error("每张券赠送张数需在 1～10 之间"));
-        }
-      }
-      callback();
-    },
-    formatCouponFace(row) {
-      if (!row) return "-";
-      if (row.price !== undefined && row.price !== null && row.price !== "") {
-        return `¥${row.price}`;
-      }
-      if (row.couponDiscount !== undefined && row.couponDiscount !== null && row.couponDiscount !== "") {
-        return `${row.couponDiscount}折`;
-      }
-      return "-";
-    },
-    formatCouponValidity(row) {
-      return formatPromotionCouponValidityHtml(row);
-    },
-    buildCouponDisplayRow(detail, quantity) {
-      const qty = Math.min(10, Math.max(1, Number(quantity) || 1));
-      return {
-        couponId: detail.id,
-        quantity: qty,
-        couponName: detail.couponName || "",
-        faceValueLabel: this.formatCouponFace(detail),
-        validRange: this.formatCouponValidity(detail),
-      };
-    },
-    buildBenefitConfigString(slice) {
-      const { benefitType, giftPoint, couponPackageRows } = slice;
-      if (benefitType === GIFT_POINT) {
-        return JSON.stringify({ giftPoint: Number(giftPoint) });
-      }
-      if (benefitType === COUPON_PACKAGE) {
-        const coupons = (couponPackageRows || []).map((r) => ({
-          couponId: String(r.couponId),
-          quantity: Math.min(10, Math.max(1, Number(r.quantity) || 1)),
-        }));
-        return JSON.stringify({ coupons });
-      }
-      return "";
-    },
-    parseGiftPointFromConfig(benefitType, benefitConfigStr) {
-      if (benefitType !== GIFT_POINT || !benefitConfigStr) return null;
-      try {
-        const o = JSON.parse(benefitConfigStr);
-        if (o && typeof o.giftPoint !== "undefined") {
-          const n = Number(o.giftPoint);
-          return Number.isNaN(n) ? null : n;
-        }
-      } catch (e) {
-        /* ignore */
-      }
-      return null;
-    },
-    onAddBenefitTypeChange(val) {
-      if (val !== GIFT_POINT) {
-        this.formAdd.giftPoint = null;
-      }
-      if (val !== COUPON_PACKAGE) {
-        this.formAdd.couponPackageRows = [];
-      }
-      if (this.$refs.addForm && val !== GIFT_POINT) {
-        this.touchFormField("addForm", "giftPoint");
-      }
-      if (this.$refs.addForm && val !== COUPON_PACKAGE) {
-        this.touchFormField("addForm", "couponPackageRows");
-      }
-    },
-    onEditBenefitTypeChange(val) {
-      if (val !== GIFT_POINT) {
-        this.formEdit.giftPoint = null;
-      }
-      if (val !== COUPON_PACKAGE) {
-        this.formEdit.couponPackageRows = [];
-      }
-      if (this.$refs.editForm && val !== GIFT_POINT) {
-        this.touchFormField("editForm", "giftPoint");
-      }
-      if (this.$refs.editForm && val !== COUPON_PACKAGE) {
-        this.touchFormField("editForm", "couponPackageRows");
-      }
-    },
-    parseCouponsFromConfig(str) {
-      if (!str) return [];
-      try {
-        const o = JSON.parse(str);
-        if (o && Array.isArray(o.coupons)) {
-          return o.coupons.map((c) => ({
-            couponId: c.couponId,
-            quantity: c.quantity,
-          }));
-        }
-      } catch (e) {
-        /* ignore */
-      }
-      return [];
-    },
-    normalizeCouponFaceFromDetail(item) {
-      let face = this.formatCouponFace(item);
-      if (face !== "-") return face;
-      const raw = item.faceValueText;
-      if (raw == null || raw === "") return "-";
-      return String(raw)
-        .replace(/^减免现金\s*/, "")
-        .replace(/^减免\s*/, "")
-        .trim() || "-";
-    },
-    mapCouponItemsToPackageRows(items) {
-      if (!Array.isArray(items)) return [];
-      return items.map((item) => {
-        const face = this.normalizeCouponFaceFromDetail(item);
-        const validHtml = item.validityText
-          ? String(item.validityText).replace(/\n/g, "<br/>")
-          : "-";
-        return {
-          couponId: item.couponId,
-          quantity: Math.min(10, Math.max(1, Number(item.quantity) || 1)),
-          couponName: item.couponName || "",
-          faceValueLabel: face,
-          validRange: validHtml,
-        };
-      });
-    },
-    async hydrateCouponRowsForEdit(snippets) {
-      const rows = [];
-      for (const s of snippets) {
-        const cid = s.couponId;
-        const qty = s.quantity;
-        try {
-          const res = await getPlatformCoupon(cid);
-          if (res && res.success && res.result) {
-            rows.push(this.buildCouponDisplayRow(res.result, qty));
-          } else {
-            rows.push({
-              couponId: cid,
-              quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
-              couponName: String(cid),
-              faceValueLabel: "-",
-              validRange: "-",
-            });
-          }
-        } catch (e) {
-          rows.push({
-            couponId: cid,
-            quantity: Math.min(10, Math.max(1, Number(qty) || 1)),
-            couponName: String(cid),
-            faceValueLabel: "-",
-            validRange: "-",
-          });
-        }
-      }
-      this.formEdit.couponPackageRows = rows;
-    },
-    handleCouponPickerClose() {
-      this.couponPickerVisible = false;
-    },
-    openCouponPicker(which) {
-      this.couponPickerWhich = which;
-      this.couponPickerVisible = true;
-    },
-    confirmCouponPicker() {
-      const list = this.$refs.couponPicker?.getSelection?.() || [];
-      if (!list.length) {
-        ElMessage.warning("请至少选择一张优惠券");
-        return;
-      }
-      this.onCouponTemplateSelected(list);
-      this.couponPickerVisible = false;
-    },
-    onCouponTemplateSelected(selectedRows) {
-      const which = this.couponPickerWhich;
-      const form = which === "add" ? this.formAdd : this.formEdit;
-      const refName = which === "add" ? "addForm" : "editForm";
-      const list = selectedRows || [];
-      const rows = list.map((row) => {
-        const existing = (form.couponPackageRows || []).find((r) => String(r.couponId) === String(row.id));
-        const qty = existing ? existing.quantity : 1;
-        return this.buildCouponDisplayRow(row, qty);
-      });
-      form.couponPackageRows = rows;
-      this.touchFormField(refName, "couponPackageRows");
-    },
-    removeCouponRow(which, index) {
-      const form = which === "add" ? this.formAdd : this.formEdit;
-      const refName = which === "add" ? "addForm" : "editForm";
-      form.couponPackageRows.splice(index, 1);
-      this.touchFormField(refName, "couponPackageRows");
-    },
-    init() {
-      this.loadBenefitTypes();
-      this.getData();
-    },
-    loadBenefitTypes() {
-      API_Member.getMemberBenefitTypes().then((res) => {
-        if (res && res.success && Array.isArray(res.result)) {
-          this.benefitTypeOptions = res.result;
+    }).catch(() => {
+      submitEditLoading.value = false;
+      ElMessage.error("网络异常，请稍后重试");
+    });
+  });
+}
+function onBenefitStateSwitch(row, checked) {
+  const nextState = checked ? "OPEN" : "CLOSE";
+  const prevState = row.benefitState;
+  if (nextState === prevState) return;
+  const text = checked ? "开启" : "关闭";
+  ElMessageBox.confirm(`确定${text}该客户权益？`, "提示", { type: "warning" }).then(() => {
+    row._benefitStateLoading = true;
+    return API_Member.updateMemberBenefitState(row.id, nextState)
+      .then((res) => {
+        row._benefitStateLoading = false;
+        if (res && res.success) {
+          ElMessage.success(`${text}成功`);
+          row.benefitState = nextState;
         } else {
-          this.benefitTypeOptions = [];
+          getData();
         }
+      })
+      .catch(() => {
+        row._benefitStateLoading = false;
       });
-    },
-    changePage(page) {
-      this.searchForm.pageNumber = page;
-      this.getData();
-    },
-    changePageSize(size) {
-      this.searchForm.pageSize = size;
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      API_Member.getMemberBenefitByPage(params).then((res) => {
-        this.loading = false;
-        if (res && res.success && res.result) {
-          this.data = Array.isArray(res.result.records) ? res.result.records : [];
-          this.total = Number(res.result.total) || 0;
-        } else {
-          this.data = [];
-          this.total = 0;
-        }
-      });
-    },
-    openAdd() {
-      this.addFlag = true;
-      this.submitAddLoading = false;
-      this.$nextTick(() => {
-        if (this.$refs.addForm) this.$refs.addForm.resetFields();
-        this.formAdd = buildDefaultForm();
-      });
-    },
-    submitAdd() {
-      if (!this.$refs.addForm) {
-        ElMessage.warning("表单未就绪，请稍后重试");
-        return;
+  }).catch(() => {});
+}
+function remove(row) {
+  ElMessageBox.confirm("确定删除该客户权益？", "提示", { type: "warning" }).then(() => {
+    API_Member.deleteMemberBenefit(row.id).then((res) => {
+      if (res && res.success) {
+        ElMessage.success("删除成功");
+        getData();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
       }
-      this.$refs.addForm.validate((valid) => {
-        if (!valid) return;
-        this.submitAddLoading = true;
-        const { giftPoint, couponPackageRows, ...rest } = this.formAdd;
-        const payload = {
-          ...rest,
-          benefitConfig: this.buildBenefitConfigString({
-            benefitType: this.formAdd.benefitType,
-            giftPoint,
-            couponPackageRows,
-          }),
-        };
-        API_Member.addMemberBenefit(payload).then((res) => {
-          this.submitAddLoading = false;
-          if (res && res.success) {
-            ElMessage.success("添加成功");
-            this.addFlag = false;
-            this.getData();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          } else {
-            ElMessage.error("添加失败");
-          }
-        }).catch(() => {
-          this.submitAddLoading = false;
-          ElMessage.error("网络异常，请稍后重试");
-        });
-      });
-    },
-    openEdit(row) {
-      this.editFlag = true;
-      this.submitEditLoading = false;
-      this.$nextTick(() => {
-        if (this.$refs.editForm) this.$refs.editForm.resetFields();
-      });
-      API_Member.getMemberBenefit(row.id).then((res) => {
-        if (res && res.success && res.result) {
-          const raw = res.result;
-          const detail = raw.benefit != null ? raw.benefit : raw;
-          const couponItems = raw.couponItems;
-          const bt = detail.benefitType || "";
-          const parsed = this.parseGiftPointFromConfig(bt, detail.benefitConfig || "");
-          const couponSnippets = this.parseCouponsFromConfig(detail.benefitConfig || "");
+    });
+  }).catch(() => {});
+}
 
-          let couponRows = [];
-          if (bt === COUPON_PACKAGE && Array.isArray(couponItems) && couponItems.length) {
-            couponRows = this.mapCouponItemsToPackageRows(couponItems);
-          }
-
-          this.formEdit = {
-            id: detail.id || row.id || "",
-            benefitName: detail.benefitName || "",
-            benefitCode: detail.benefitCode || "",
-            benefitType: bt,
-            benefitLogo: detail.benefitLogo || "",
-            benefitDesc: detail.benefitDesc || "",
-            benefitSort: Number(detail.benefitSort) > 0 ? Number(detail.benefitSort) : 1,
-            benefitState: detail.benefitState || "OPEN",
-            benefitConfig: detail.benefitConfig || "",
-            giftPoint: bt === GIFT_POINT ? (parsed !== null ? parsed : null) : null,
-            couponPackageRows: couponRows,
-          };
-
-          if (bt === COUPON_PACKAGE && couponRows.length === 0 && couponSnippets.length) {
-            this.hydrateCouponRowsForEdit(couponSnippets);
-          }
-        }
-      });
-    },
-    submitEdit() {
-      if (!this.$refs.editForm) {
-        ElMessage.warning("表单未就绪，请稍后重试");
-        return;
-      }
-      this.$refs.editForm.validate((valid) => {
-        if (!valid) return;
-        this.submitEditLoading = true;
-        const { id, giftPoint, couponPackageRows, ...rest } = this.formEdit;
-        const payload = {
-          ...rest,
-          benefitConfig: this.buildBenefitConfigString({
-            benefitType: this.formEdit.benefitType,
-            giftPoint,
-            couponPackageRows,
-          }),
-        };
-        API_Member.updateMemberBenefit(id, payload).then((res) => {
-          this.submitEditLoading = false;
-          if (res && res.success) {
-            ElMessage.success("修改成功");
-            this.editFlag = false;
-            this.getData();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          } else {
-            ElMessage.error("修改失败");
-          }
-        }).catch(() => {
-          this.submitEditLoading = false;
-          ElMessage.error("网络异常，请稍后重试");
-        });
-      });
-    },
-    onBenefitStateSwitch(row, checked) {
-      const nextState = checked ? "OPEN" : "CLOSE";
-      const prevState = row.benefitState;
-      if (nextState === prevState) return;
-      const text = checked ? "开启" : "关闭";
-      ElMessageBox.confirm(`确定${text}该客户权益？`, "提示", { type: "warning" }).then(() => {
-        row._benefitStateLoading = true;
-        return API_Member.updateMemberBenefitState(row.id, nextState)
-          .then((res) => {
-            row._benefitStateLoading = false;
-            if (res && res.success) {
-              ElMessage.success(`${text}成功`);
-              row.benefitState = nextState;
-            } else {
-              this.getData();
-            }
-          })
-          .catch(() => {
-            row._benefitStateLoading = false;
-          });
-      }).catch(() => {});
-    },
-    remove(row) {
-      ElMessageBox.confirm("确定删除该客户权益？", "提示", { type: "warning" }).then(() => {
-        API_Member.deleteMemberBenefit(row.id).then((res) => {
-          if (res && res.success) {
-            ElMessage.success("删除成功");
-            this.getData();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
-        });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/member/grade/experience-log.vue b/manager/src/views/member/grade/experience-log.vue
index 107f2c5cd..c705ad647 100644
--- a/manager/src/views/member/grade/experience-log.vue
+++ b/manager/src/views/member/grade/experience-log.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="90px"
@@ -78,7 +78,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Member from "@/api/member";
 
 const RULE_OPTIONS = [
@@ -95,79 +96,76 @@ const RULE_OPTIONS = [
   { value: "SHARE_BUY", label: "分享购买" },
 ];
 
-export default {
-  name: "memberGradeExperienceLog",
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      data: [],
-      ruleOptions: RULE_OPTIONS,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        memberMobile: "",
-        ruleKey: "",
-      },
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    formatExperienceValue(row) {
-      const v = row.value ?? row.variableExperience ?? row.experience ?? row.variableValue;
-      return v == null ? "-" : v;
-    },
-    formatMaxValue(row) {
-      const v = row.maxValue ?? row.maxExperience ?? row.limitValue;
-      return v == null ? "-" : v;
-    },
-    findRuleName(ruleKey) {
-      const hit = this.ruleOptions.find((item) => item.value === ruleKey);
-      return hit ? hit.label : "";
-    },
-    init() {
-      this.getData();
-    },
-    buildParams() {
-      const params = {
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-      };
-      if (this.searchForm.memberMobile) params.mobile = this.searchForm.memberMobile;
-      if (this.searchForm.ruleKey) params.ruleKey = this.searchForm.ruleKey;
-      return params;
-    },
-    getData() {
-      this.loading = true;
-      API_Member.getMemberExperienceByPage(this.buildParams())
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else {
-            this.data = [];
-            this.total = 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-  },
-};
+defineOptions({ name: "memberGradeExperienceLog" });
+
+const searchFormRef = ref(null);
+
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const ruleOptions = RULE_OPTIONS;
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  memberMobile: "",
+  ruleKey: "",
+});
+
+onMounted(() => {
+  init();
+});
+
+function formatExperienceValue(row) {
+  const v = row.value ?? row.variableExperience ?? row.experience ?? row.variableValue;
+  return v == null ? "-" : v;
+}
+function formatMaxValue(row) {
+  const v = row.maxValue ?? row.maxExperience ?? row.limitValue;
+  return v == null ? "-" : v;
+}
+function findRuleName(ruleKey) {
+  const hit = ruleOptions.find((item) => item.value === ruleKey);
+  return hit ? hit.label : "";
+}
+function init() {
+  getData();
+}
+function buildParams() {
+  const params = {
+    pageNumber: searchForm.pageNumber,
+    pageSize: searchForm.pageSize,
+  };
+  if (searchForm.memberMobile) params.mobile = searchForm.memberMobile;
+  if (searchForm.ruleKey) params.ruleKey = searchForm.ruleKey;
+  return params;
+}
+function getData() {
+  loading.value = true;
+  API_Member.getMemberExperienceByPage(buildParams())
+    .then((res) => {
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else {
+        data.value = [];
+        total.value = 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getData();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getData();
+}
 </script>
diff --git a/manager/src/views/member/grade/experience-setting.vue b/manager/src/views/member/grade/experience-setting.vue
index f611757ef..1d9f7a403 100644
--- a/manager/src/views/member/grade/experience-setting.vue
+++ b/manager/src/views/member/grade/experience-setting.vue
@@ -237,10 +237,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { getSetting, setSetting } from "@/api/index";
 import { ElMessage } from "element-plus";
 
+defineOptions({ name: "memberGradeExperienceSetting" });
+
 const RULE_OPTIONS = [
   { ruleKey: "CONSUME", ruleName: "消费" },
   { ruleKey: "REGISTER", ruleName: "注册" },
@@ -268,176 +271,169 @@ const defaultForm = () => ({
   description: "",
 });
 
-export default {
-  name: "memberGradeExperienceSetting",
-  data() {
-    return {
-      loading: false,
-      submitLoading: false,
-      form: defaultForm(),
+const loading = ref(false);
+const submitLoading = ref(false);
+const form = ref(defaultForm());
+
+function formatInputValue(v) {
+  return v == null ? "" : String(v);
+}
+function getRawInputValue(v) {
+  return v && v.target ? v.target.value : v;
+}
+function updateRuleEnabled(index, enabled) {
+  const item = form.value.items[index] || {};
+  form.value.items[index] = {
+    ...item,
+    enabled: !!enabled,
+  };
+}
+function updateRuleValue(index, v) {
+  const raw = getRawInputValue(v);
+  const next = Number(raw);
+  const item = form.value.items[index] || {};
+  form.value.items[index] = {
+    ...item,
+    value: Number.isFinite(next) ? next : null,
+  };
+}
+function commitRuleValue(index) {
+  const item = form.value.items[index] || {};
+  const next = Number(item.value);
+  let value = 1;
+  if (Number.isFinite(next)) {
+    if (next < 1) value = 1;
+    else if (next > 100) value = 100;
+    else value = Math.floor(next);
+  }
+  form.value.items[index] = {
+    ...item,
+    value,
+  };
+}
+function updateRuleMaxValue(index, v) {
+  const raw = getRawInputValue(v);
+  const item = form.value.items[index] || {};
+  if (raw == null || raw === "") {
+    form.value.items[index] = {
+      ...item,
+      maxValue: null,
     };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    formatInputValue(v) {
-      return v == null ? "" : String(v);
-    },
-    getRawInputValue(v) {
-      return v && v.target ? v.target.value : v;
-    },
-    updateRuleEnabled(index, enabled) {
-      const item = this.form.items[index] || {};
-      this.form.items[index] = {
-        ...item,
-        enabled: !!enabled,
-      };
-    },
-    updateRuleValue(index, v) {
-      const raw = this.getRawInputValue(v);
-      const next = Number(raw);
-      const item = this.form.items[index] || {};
-      this.form.items[index] = {
-        ...item,
-        value: Number.isFinite(next) ? next : null,
-      };
-    },
-    commitRuleValue(index) {
-      const item = this.form.items[index] || {};
-      const next = Number(item.value);
-      let value = 1;
-      if (Number.isFinite(next)) {
-        if (next < 1) value = 1;
-        else if (next > 100) value = 100;
-        else value = Math.floor(next);
-      }
-      this.form.items[index] = {
-        ...item,
-        value,
-      };
-    },
-    updateRuleMaxValue(index, v) {
-      const raw = this.getRawInputValue(v);
-      const item = this.form.items[index] || {};
-      if (raw == null || raw === "") {
-        this.form.items[index] = {
-          ...item,
-          maxValue: null,
-        };
-        return;
-      }
-      const next = Number(raw);
-      this.form.items[index] = {
-        ...item,
-        maxValue: Number.isFinite(next) ? next : null,
-      };
-    },
-    commitRuleMaxValue(index) {
-      const item = this.form.items[index] || {};
-      if (item.maxValue == null || item.maxValue === "") {
-        this.form.items[index] = {
-          ...item,
-          maxValue: null,
-        };
-        return;
-      }
-      const next = Number(item.maxValue);
-      this.form.items[index] = {
-        ...item,
-        maxValue: Number.isFinite(next) && next >= 1 ? Math.floor(next) : null,
-      };
-    },
-    normalizeConfig(val) {
-      if (!val) return {};
-      if (typeof val === "string") {
-        try {
-          return JSON.parse(val);
-        } catch (e) {
-          return {};
-        }
-      }
-      if (typeof val === "object") return val;
+    return;
+  }
+  const next = Number(raw);
+  form.value.items[index] = {
+    ...item,
+    maxValue: Number.isFinite(next) ? next : null,
+  };
+}
+function commitRuleMaxValue(index) {
+  const item = form.value.items[index] || {};
+  if (item.maxValue == null || item.maxValue === "") {
+    form.value.items[index] = {
+      ...item,
+      maxValue: null,
+    };
+    return;
+  }
+  const next = Number(item.maxValue);
+  form.value.items[index] = {
+    ...item,
+    maxValue: Number.isFinite(next) && next >= 1 ? Math.floor(next) : null,
+  };
+}
+function normalizeConfig(val) {
+  if (!val) return {};
+  if (typeof val === "string") {
+    try {
+      return JSON.parse(val);
+    } catch (e) {
       return {};
-    },
-    normalizeItems(items) {
-      const map = {};
-      if (Array.isArray(items)) {
-        items.forEach((item) => {
-          if (!item || !item.ruleKey) return;
-          map[item.ruleKey] = item;
-        });
-      }
-      return RULE_OPTIONS.map((rule) => {
-        const hit = map[rule.ruleKey] || {};
-        return {
-          ruleKey: rule.ruleKey,
-          ruleName: hit.ruleName || rule.ruleName,
-          enabled: !!hit.enabled,
-          value: Number(hit.value) > 0 ? Number(hit.value) : 1,
-          maxValue: hit.maxValue == null || hit.maxValue === "" ? null : Number(hit.maxValue),
+    }
+  }
+  if (typeof val === "object") return val;
+  return {};
+}
+function normalizeItems(items) {
+  const map = {};
+  if (Array.isArray(items)) {
+    items.forEach((item) => {
+      if (!item || !item.ruleKey) return;
+      map[item.ruleKey] = item;
+    });
+  }
+  return RULE_OPTIONS.map((rule) => {
+    const hit = map[rule.ruleKey] || {};
+    return {
+      ruleKey: rule.ruleKey,
+      ruleName: hit.ruleName || rule.ruleName,
+      enabled: !!hit.enabled,
+      value: Number(hit.value) > 0 ? Number(hit.value) : 1,
+      maxValue: hit.maxValue == null || hit.maxValue === "" ? null : Number(hit.maxValue),
+    };
+  });
+}
+function loadData() {
+  loading.value = true;
+  getSetting("EXPERIENCE_SETTING")
+    .then((res) => {
+      if (res && res.success) {
+        const cfg = normalizeConfig(res.result);
+        form.value = {
+          items: normalizeItems(cfg.items),
+          description: cfg.description || "",
         };
-      });
-    },
-    loadData() {
-      this.loading = true;
-      getSetting("EXPERIENCE_SETTING")
-        .then((res) => {
-          if (res && res.success) {
-            const cfg = this.normalizeConfig(res.result);
-            this.form = {
-              items: this.normalizeItems(cfg.items),
-              description: cfg.description || "",
-            };
-          } else {
-            this.form = defaultForm();
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    validateForm() {
-      const invalid = this.form.items.find((item) => {
-        const v = Number(item.value);
-        if (!Number.isInteger(v) || v < 1 || v > 100) return true;
-        if (item.maxValue != null && item.maxValue !== "") {
-          const m = Number(item.maxValue);
-          if (!Number.isInteger(m) || m < 1) return true;
-        }
-        return false;
-      });
-      if (invalid) {
-        ElMessage.error("请检查经验值配置，经验值范围为1-100，限额需为正整数");
-        return false;
+      } else {
+        form.value = defaultForm();
       }
-      return true;
-    },
-    submit() {
-      if (!this.validateForm()) return;
-      const payload = {
-        items: this.form.items.map((item) => ({
-          ruleKey: item.ruleKey,
-          ruleName: item.ruleName,
-          enabled: !!item.enabled,
-          value: Number(item.value),
-          maxValue: item.maxValue == null || item.maxValue === "" ? null : Number(item.maxValue),
-        })),
-        description: this.form.description || "",
-      };
-      this.submitLoading = true;
-      setSetting("EXPERIENCE_SETTING", payload)
-        .then((res) => {
-          if (res && res.success) {
-            ElMessage.success("保存成功");
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function validateForm() {
+  const invalid = form.value.items.find((item) => {
+    const v = Number(item.value);
+    if (!Number.isInteger(v) || v < 1 || v > 100) return true;
+    if (item.maxValue != null && item.maxValue !== "") {
+      const m = Number(item.maxValue);
+      if (!Number.isInteger(m) || m < 1) return true;
+    }
+    return false;
+  });
+  if (invalid) {
+    ElMessage.error("请检查经验值配置，经验值范围为1-100，限额需为正整数");
+    return false;
+  }
+  return true;
+}
+function submit() {
+  if (!validateForm()) return;
+  const payload = {
+    items: form.value.items.map((item) => ({
+      ruleKey: item.ruleKey,
+      ruleName: item.ruleName,
+      enabled: !!item.enabled,
+      value: Number(item.value),
+      maxValue: item.maxValue == null || item.maxValue === "" ? null : Number(item.maxValue),
+    })),
+    description: form.value.description || "",
+  };
+  submitLoading.value = true;
+  setSetting("EXPERIENCE_SETTING", payload)
+    .then((res) => {
+      if (res && res.success) {
+        ElMessage.success("保存成功");
+      }
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+
+onMounted(() => {
+  loadData();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/member/grade/index.vue b/manager/src/views/member/grade/index.vue
index 892226372..12d0e79ac 100644
--- a/manager/src/views/member/grade/index.vue
+++ b/manager/src/views/member/grade/index.vue
@@ -178,11 +178,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick, onMounted } from "vue";
 import * as API_Member from "@/api/member.js";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import { ElMessage, ElMessageBox } from "element-plus";
 
+defineOptions({ name: "memberGrade" });
+
 const buildDefaultForm = () => ({
   id: "",
   gradeName: "",
@@ -209,254 +212,248 @@ function syncOrderedBenefitIds(prevOrder, selected) {
   return out;
 }
 
-export default {
-  name: "memberGrade",
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      loading: true,
-      data: [],
-      addFlag: false,
-      editFlag: false,
-      submitAddLoading: false,
-      submitEditLoading: false,
-      formAdd: buildDefaultForm(),
-      formEdit: buildDefaultForm(),
-      addBenefitOrder: [],
-      editBenefitOrder: [],
-      benefitOptions: [],
-      benefitTypeOptions: [],
-      benefitOptionsLoading: false,
-      editDetailLoading: false,
-      rules: {
-        gradeName: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
-        gradeImage: [{ required: true, message: "请上传等级图标", trigger: "change" }],
-        requiredExperience: [{ required: true, type: "number", message: "请输入所需经验值", trigger: "change" }],
-        gradeSort: [{ required: true, type: "number", message: "请输入等级排序", trigger: "change" }],
-        gradeState: [{ required: true, message: "请选择等级开关", trigger: "change" }],
-      },
-    };
-  },
-  methods: {
-    benefitOptionLabel(b) {
-      if (!b) return "";
-      const name = b.benefitName || String(b.id);
-      const opt = this.benefitTypeOptions.find((o) => o.value === b.benefitType);
-      const typeText = opt ? opt.description : b.benefitType || "";
-      return typeText ? `${name}（${typeText}）` : name;
-    },
-    onAddBenefitIdsChange(val) {
-      this.addBenefitOrder = syncOrderedBenefitIds(this.addBenefitOrder, val);
-    },
-    onEditBenefitIdsChange(val) {
-      this.editBenefitOrder = syncOrderedBenefitIds(this.editBenefitOrder, val);
-    },
-    loadBenefitTypes() {
-      API_Member.getMemberBenefitTypes().then((res) => {
-        if (res && res.success && Array.isArray(res.result)) {
-          this.benefitTypeOptions = res.result;
-        } else {
-          this.benefitTypeOptions = [];
-        }
-      });
-    },
-    loadBenefitOptions() {
-      this.benefitOptionsLoading = true;
-      const pageSize = 500;
-      const fetchPage = (pageNumber) =>
-        API_Member.getMemberBenefitByPage({ pageNumber, pageSize, sort: "benefitSort", order: "asc" });
-      return fetchPage(1)
-        .then((res) => {
-          if (!(res && res.success && res.result)) {
-            this.benefitOptions = [];
-            return;
-          }
-          const records = Array.isArray(res.result.records) ? res.result.records : [];
-          const total = Number(res.result.total) || records.length;
-          let all = records.slice();
-          if (total > pageSize) {
-            const pages = Math.ceil(total / pageSize);
-            const rest = [];
-            for (let p = 2; p <= pages; p++) {
-              rest.push(fetchPage(p));
-            }
-            return Promise.all(rest).then((results) => {
-              results.forEach((r) => {
-                if (r && r.success && r.result && Array.isArray(r.result.records)) {
-                  all = all.concat(r.result.records);
-                }
-              });
-              this.benefitOptions = all;
-            });
-          }
-          this.benefitOptions = all;
-        })
-        .catch(() => {
-          this.benefitOptions = [];
-        })
-        .finally(() => {
-          this.benefitOptionsLoading = false;
-        });
-    },
-    parseBenefitIdsFromString(str) {
-      return String(str || "")
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean);
-    },
-    fillEditFormFromGrade(grade, benefitsOrderedIds) {
-      this.formEdit = {
-        id: grade.id || "",
-        gradeName: grade.gradeName || "",
-        isDefault: grade.isDefault === true,
-        gradeImage: grade.gradeImage || "",
-        gradeBackground: grade.gradeBackground || "",
-        gradeFontColor: grade.gradeFontColor || "",
-        requiredExperience: Number(grade.requiredExperience) > 0 ? Number(grade.requiredExperience) : 1,
-        gradeSort: Number(grade.gradeSort) > 0 ? Number(grade.gradeSort) : 1,
-        gradeState: grade.gradeState || "OPEN",
-        benefitIds: grade.benefitIds || "",
-      };
-      this.editBenefitOrder = (benefitsOrderedIds || []).map((id) => String(id));
-    },
-    init() {
-      this.getData();
-      this.loadBenefitTypes();
-      this.loadBenefitOptions();
-    },
-    getData() {
-      this.loading = true;
-      API_Member.getMemberGradeByPage().then((res) => {
-        this.loading = false;
-        if (res && res.success) {
-          this.data = Array.isArray(res.result) ? res.result : [];
-        }
-      });
-    },
-    openAdd() {
-      this.addFlag = true;
-      this.submitAddLoading = false;
-      if (!this.benefitOptions.length && !this.benefitOptionsLoading) {
-        this.loadBenefitOptions();
+// 模板 el-form 的 ref（ref="addForm" / ref="editForm"）
+const addForm = ref(null);
+const editForm = ref(null);
+
+const loading = ref(true);
+const data = ref([]);
+const addFlag = ref(false);
+const editFlag = ref(false);
+const submitAddLoading = ref(false);
+const submitEditLoading = ref(false);
+const formAdd = ref(buildDefaultForm());
+const formEdit = ref(buildDefaultForm());
+const addBenefitOrder = ref([]);
+const editBenefitOrder = ref([]);
+const benefitOptions = ref([]);
+const benefitTypeOptions = ref([]);
+const benefitOptionsLoading = ref(false);
+const editDetailLoading = ref(false);
+const rules = ref({
+  gradeName: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
+  gradeImage: [{ required: true, message: "请上传等级图标", trigger: "change" }],
+  requiredExperience: [{ required: true, type: "number", message: "请输入所需经验值", trigger: "change" }],
+  gradeSort: [{ required: true, type: "number", message: "请输入等级排序", trigger: "change" }],
+  gradeState: [{ required: true, message: "请选择等级开关", trigger: "change" }],
+});
+
+function benefitOptionLabel(b) {
+  if (!b) return "";
+  const name = b.benefitName || String(b.id);
+  const opt = benefitTypeOptions.value.find((o) => o.value === b.benefitType);
+  const typeText = opt ? opt.description : b.benefitType || "";
+  return typeText ? `${name}（${typeText}）` : name;
+}
+function onAddBenefitIdsChange(val) {
+  addBenefitOrder.value = syncOrderedBenefitIds(addBenefitOrder.value, val);
+}
+function onEditBenefitIdsChange(val) {
+  editBenefitOrder.value = syncOrderedBenefitIds(editBenefitOrder.value, val);
+}
+function loadBenefitTypes() {
+  API_Member.getMemberBenefitTypes().then((res) => {
+    if (res && res.success && Array.isArray(res.result)) {
+      benefitTypeOptions.value = res.result;
+    } else {
+      benefitTypeOptions.value = [];
+    }
+  });
+}
+function loadBenefitOptions() {
+  benefitOptionsLoading.value = true;
+  const pageSize = 500;
+  const fetchPage = (pageNumber) =>
+    API_Member.getMemberBenefitByPage({ pageNumber, pageSize, sort: "benefitSort", order: "asc" });
+  return fetchPage(1)
+    .then((res) => {
+      if (!(res && res.success && res.result)) {
+        benefitOptions.value = [];
+        return;
       }
-      this.$nextTick(() => {
-        if (this.$refs.addForm) this.$refs.addForm.resetFields();
-        this.formAdd = buildDefaultForm();
-        this.addBenefitOrder = [];
-      });
-    },
-    submitAdd() {
-      this.$refs.addForm.validate((valid) => {
-        if (!valid) return;
-        this.submitAddLoading = true;
-        const { benefitIds: _omit, ...rest } = this.formAdd;
-        const payload = {
-          ...rest,
-          benefitIds: (this.addBenefitOrder || []).join(","),
-        };
-        API_Member.addMemberGrade(payload).then((res) => {
-          this.submitAddLoading = false;
-          if (res && res.success) {
-            ElMessage.success("添加成功");
-            this.addFlag = false;
-            this.getData();
-          }
-        });
-      });
-    },
-    openEdit(row) {
-      this.editFlag = true;
-      this.submitEditLoading = false;
-      this.editDetailLoading = true;
-      if (!this.benefitOptions.length && !this.benefitOptionsLoading) {
-        this.loadBenefitOptions();
-      }
-      this.$nextTick(() => {
-        if (this.$refs.editForm) this.$refs.editForm.resetFields();
-      });
-      API_Member.getMemberGrade(row.id)
-        .then((res) => {
-          this.editDetailLoading = false;
-          if (res && res.success && res.result) {
-            const raw = res.result;
-            const grade = raw.grade != null ? raw.grade : raw;
-            const benefits = Array.isArray(raw.benefits) ? raw.benefits : [];
-            const orderedIds = benefits.length
-              ? benefits.map((b) => b.id).filter((id) => id != null && id !== "")
-              : String(grade.benefitIds || "")
-                  .split(",")
-                  .map((s) => s.trim())
-                  .filter(Boolean);
-            this.fillEditFormFromGrade(grade, orderedIds);
-          } else {
-            this.fillEditFormFromGrade(row, this.parseBenefitIdsFromString(row.benefitIds));
-          }
-        })
-        .catch(() => {
-          this.editDetailLoading = false;
-          this.fillEditFormFromGrade(row, this.parseBenefitIdsFromString(row.benefitIds));
-        });
-    },
-    submitEdit() {
-      this.$refs.editForm.validate((valid) => {
-        if (!valid) return;
-        this.submitEditLoading = true;
-        const { id, benefitIds: _omit, ...rest } = this.formEdit;
-        const payload = {
-          ...rest,
-          benefitIds: (this.editBenefitOrder || []).join(","),
-        };
-        API_Member.updateMemberGrade(id, payload).then((res) => {
-          this.submitEditLoading = false;
-          if (res && res.success) {
-            ElMessage.success("修改成功");
-            this.editFlag = false;
-            this.getData();
-          }
-        });
-      });
-    },
-    onGradeStateSwitch(row, checked) {
-      const nextState = checked ? "OPEN" : "CLOSE";
-      const prevState = row.gradeState;
-      if (nextState === prevState) return;
-      const text = checked ? "开启" : "关闭";
-      ElMessageBox.confirm(`确定${text}该客户等级？`, "提示", { type: "warning" }).then(() => {
-        row._gradeStateLoading = true;
-        return API_Member.updateMemberGradeState(row.id, nextState)
-          .then((res) => {
-            row._gradeStateLoading = false;
-            if (res && res.success) {
-              ElMessage.success(`${text}成功`);
-              row.gradeState = nextState;
-            } else {
-              this.getData();
+      const records = Array.isArray(res.result.records) ? res.result.records : [];
+      const total = Number(res.result.total) || records.length;
+      let all = records.slice();
+      if (total > pageSize) {
+        const pages = Math.ceil(total / pageSize);
+        const rest = [];
+        for (let p = 2; p <= pages; p++) {
+          rest.push(fetchPage(p));
+        }
+        return Promise.all(rest).then((results) => {
+          results.forEach((r) => {
+            if (r && r.success && r.result && Array.isArray(r.result.records)) {
+              all = all.concat(r.result.records);
             }
-          })
-          .catch(() => {
-            row._gradeStateLoading = false;
           });
-      }).catch(() => {});
-    },
-    remove(row) {
-      ElMessageBox.confirm("确定删除该客户等级？", "提示", { type: "warning" }).then(() => {
-        API_Member.deleteMemberGrade(row.id).then((res) => {
-          if (res && res.success) {
-            ElMessage.success("删除成功");
-            this.getData();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
+          benefitOptions.value = all;
         });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      }
+      benefitOptions.value = all;
+    })
+    .catch(() => {
+      benefitOptions.value = [];
+    })
+    .finally(() => {
+      benefitOptionsLoading.value = false;
+    });
+}
+function parseBenefitIdsFromString(str) {
+  return String(str || "")
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+function fillEditFormFromGrade(grade, benefitsOrderedIds) {
+  formEdit.value = {
+    id: grade.id || "",
+    gradeName: grade.gradeName || "",
+    isDefault: grade.isDefault === true,
+    gradeImage: grade.gradeImage || "",
+    gradeBackground: grade.gradeBackground || "",
+    gradeFontColor: grade.gradeFontColor || "",
+    requiredExperience: Number(grade.requiredExperience) > 0 ? Number(grade.requiredExperience) : 1,
+    gradeSort: Number(grade.gradeSort) > 0 ? Number(grade.gradeSort) : 1,
+    gradeState: grade.gradeState || "OPEN",
+    benefitIds: grade.benefitIds || "",
+  };
+  editBenefitOrder.value = (benefitsOrderedIds || []).map((id) => String(id));
+}
+function init() {
+  getData();
+  loadBenefitTypes();
+  loadBenefitOptions();
+}
+function getData() {
+  loading.value = true;
+  API_Member.getMemberGradeByPage().then((res) => {
+    loading.value = false;
+    if (res && res.success) {
+      data.value = Array.isArray(res.result) ? res.result : [];
+    }
+  });
+}
+function openAdd() {
+  addFlag.value = true;
+  submitAddLoading.value = false;
+  if (!benefitOptions.value.length && !benefitOptionsLoading.value) {
+    loadBenefitOptions();
+  }
+  nextTick(() => {
+    if (addForm.value) addForm.value.resetFields();
+    formAdd.value = buildDefaultForm();
+    addBenefitOrder.value = [];
+  });
+}
+function submitAdd() {
+  addForm.value.validate((valid) => {
+    if (!valid) return;
+    submitAddLoading.value = true;
+    const { benefitIds: _omit, ...rest } = formAdd.value;
+    const payload = {
+      ...rest,
+      benefitIds: (addBenefitOrder.value || []).join(","),
+    };
+    API_Member.addMemberGrade(payload).then((res) => {
+      submitAddLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("添加成功");
+        addFlag.value = false;
+        getData();
+      }
+    });
+  });
+}
+function openEdit(row) {
+  editFlag.value = true;
+  submitEditLoading.value = false;
+  editDetailLoading.value = true;
+  if (!benefitOptions.value.length && !benefitOptionsLoading.value) {
+    loadBenefitOptions();
+  }
+  nextTick(() => {
+    if (editForm.value) editForm.value.resetFields();
+  });
+  API_Member.getMemberGrade(row.id)
+    .then((res) => {
+      editDetailLoading.value = false;
+      if (res && res.success && res.result) {
+        const raw = res.result;
+        const grade = raw.grade != null ? raw.grade : raw;
+        const benefits = Array.isArray(raw.benefits) ? raw.benefits : [];
+        const orderedIds = benefits.length
+          ? benefits.map((b) => b.id).filter((id) => id != null && id !== "")
+          : String(grade.benefitIds || "")
+              .split(",")
+              .map((s) => s.trim())
+              .filter(Boolean);
+        fillEditFormFromGrade(grade, orderedIds);
+      } else {
+        fillEditFormFromGrade(row, parseBenefitIdsFromString(row.benefitIds));
+      }
+    })
+    .catch(() => {
+      editDetailLoading.value = false;
+      fillEditFormFromGrade(row, parseBenefitIdsFromString(row.benefitIds));
+    });
+}
+function submitEdit() {
+  editForm.value.validate((valid) => {
+    if (!valid) return;
+    submitEditLoading.value = true;
+    const { id, benefitIds: _omit, ...rest } = formEdit.value;
+    const payload = {
+      ...rest,
+      benefitIds: (editBenefitOrder.value || []).join(","),
+    };
+    API_Member.updateMemberGrade(id, payload).then((res) => {
+      submitEditLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("修改成功");
+        editFlag.value = false;
+        getData();
+      }
+    });
+  });
+}
+function onGradeStateSwitch(row, checked) {
+  const nextState = checked ? "OPEN" : "CLOSE";
+  const prevState = row.gradeState;
+  if (nextState === prevState) return;
+  const text = checked ? "开启" : "关闭";
+  ElMessageBox.confirm(`确定${text}该客户等级？`, "提示", { type: "warning" }).then(() => {
+    row._gradeStateLoading = true;
+    return API_Member.updateMemberGradeState(row.id, nextState)
+      .then((res) => {
+        row._gradeStateLoading = false;
+        if (res && res.success) {
+          ElMessage.success(`${text}成功`);
+          row.gradeState = nextState;
+        } else {
+          getData();
+        }
+      })
+      .catch(() => {
+        row._gradeStateLoading = false;
+      });
+  }).catch(() => {});
+}
+function remove(row) {
+  ElMessageBox.confirm("确定删除该客户等级？", "提示", { type: "warning" }).then(() => {
+    API_Member.deleteMemberGrade(row.id).then((res) => {
+      if (res && res.success) {
+        ElMessage.success("删除成功");
+        getData();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      }
+    });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style scoped>
 .ops a {
diff --git a/manager/src/views/member/group/index.vue b/manager/src/views/member/group/index.vue
index eb856890f..08f355906 100644
--- a/manager/src/views/member/group/index.vue
+++ b/manager/src/views/member/group/index.vue
@@ -70,137 +70,136 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
 import * as API_Member from "@/api/member.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "memberGroup",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-      addFlag: false,
-      editFlag: false,
-      submitAddLoading: false,
-      submitEditLoading: false,
-      formAdd: {
-        groupName: "",
-        description: "",
-      },
-      formEdit: {
-        id: "",
-        groupName: "",
-        description: "",
-      },
-      rulesAdd: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-      rulesEdit: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.getData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      API_Member.getMemberGroupByPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res && res.success && res.result) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    openAdd() {
-      this.addFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.addForm) this.$refs.addForm.resetFields();
-        this.formAdd = { groupName: "", description: "" };
-      });
-    },
-    submitAdd() {
-      this.$refs.addForm.validate((valid) => {
-        if (!valid) return;
-        this.submitAddLoading = true;
-        API_Member.addMemberGroup(this.formAdd).then((res) => {
-          this.submitAddLoading = false;
-          if (res && res.success) {
-            ElMessage.success("添加成功");
-            this.addFlag = false;
-            this.getData();
-          }
-        });
-      });
-    },
-    openEdit(row) {
-      this.editFlag = true;
-      this.submitEditLoading = false;
-      API_Member.getMemberGroup(row.id).then((res) => {
-        if (res && res.success && res.result) {
-          this.formEdit = {
-            id: res.result.id,
-            groupName: res.result.groupName || "",
-            description: res.result.description || "",
-          };
-        } else {
-          this.formEdit = {
-            id: row.id,
-            groupName: row.groupName || "",
-            description: row.description || "",
-          };
-        }
-      });
-    },
-    submitEdit() {
-      this.$refs.editForm.validate((valid) => {
-        if (!valid) return;
-        this.submitEditLoading = true;
-        const { id, groupName, description } = this.formEdit;
-        API_Member.updateMemberGroup(id, { groupName, description }).then((res) => {
-          this.submitEditLoading = false;
-          if (res && res.success) {
-            ElMessage.success("修改成功");
-            this.editFlag = false;
-            this.getData();
-          }
-        });
-      });
-    },
-    remove(row) {
-      ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
-        API_Member.deleteMemberGroup(row.id).then((res) => {
-          if (res && res.success) {
-            ElMessage.success("删除成功");
-            this.getData();
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
-        });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "memberGroup" });
+
+const addForm = ref(null);
+const editForm = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+const addFlag = ref(false);
+const editFlag = ref(false);
+const submitAddLoading = ref(false);
+const submitEditLoading = ref(false);
+const formAdd = ref({
+  groupName: "",
+  description: "",
+});
+const formEdit = ref({
+  id: "",
+  groupName: "",
+  description: "",
+});
+const rulesAdd = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+const rulesEdit = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+
+function init() {
+  getData();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getData();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getData();
+}
+function getData() {
+  loading.value = true;
+  API_Member.getMemberGroupByPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res && res.success && res.result) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function openAdd() {
+  addFlag.value = true;
+  nextTick(() => {
+    if (addForm.value) addForm.value.resetFields();
+    formAdd.value = { groupName: "", description: "" };
+  });
+}
+function submitAdd() {
+  addForm.value.validate((valid) => {
+    if (!valid) return;
+    submitAddLoading.value = true;
+    API_Member.addMemberGroup(formAdd.value).then((res) => {
+      submitAddLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("添加成功");
+        addFlag.value = false;
+        getData();
+      }
+    });
+  });
+}
+function openEdit(row) {
+  editFlag.value = true;
+  submitEditLoading.value = false;
+  API_Member.getMemberGroup(row.id).then((res) => {
+    if (res && res.success && res.result) {
+      formEdit.value = {
+        id: res.result.id,
+        groupName: res.result.groupName || "",
+        description: res.result.description || "",
+      };
+    } else {
+      formEdit.value = {
+        id: row.id,
+        groupName: row.groupName || "",
+        description: row.description || "",
+      };
+    }
+  });
+}
+function submitEdit() {
+  editForm.value.validate((valid) => {
+    if (!valid) return;
+    submitEditLoading.value = true;
+    const { id, groupName, description } = formEdit.value;
+    API_Member.updateMemberGroup(id, { groupName, description }).then((res) => {
+      submitEditLoading.value = false;
+      if (res && res.success) {
+        ElMessage.success("修改成功");
+        editFlag.value = false;
+        getData();
+      }
+    });
+  });
+}
+function remove(row) {
+  ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
+    API_Member.deleteMemberGroup(row.id).then((res) => {
+      if (res && res.success) {
+        ElMessage.success("删除成功");
+        getData();
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      }
+    });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/member/list/index.vue b/manager/src/views/member/list/index.vue
index acec676f2..1b2827a91 100644
--- a/manager/src/views/member/list/index.vue
+++ b/manager/src/views/member/list/index.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -168,7 +168,7 @@
 
     <el-dialog v-model="addFlag" title="添加会员" width="500px" destroy-on-close class="add-member-dialog">
       <el-form
-        ref="addMemberForm"
+        ref="addMemberFormRef"
         :model="addMemberForm"
         :rules="addRule"
         label-width="100px"
@@ -210,7 +210,7 @@
     </el-dialog>
 
     <el-dialog v-model="descFlag" :title="descTitle" width="500px" destroy-on-close>
-      <el-form ref="form" :model="form" :rules="ruleValidate" label-width="80px">
+      <el-form ref="formRef" :model="form" :rules="ruleValidate" label-width="80px">
         <el-input v-model="form.id" style="display: none" />
         <el-form-item label="头像">
           <img :src="form.face || defaultPic" class="face" />
@@ -251,7 +251,7 @@
     </el-dialog>
 
     <el-dialog v-model="walletIncreaseFlag" title="增加余额" width="420px" destroy-on-close>
-      <el-form ref="walletIncreaseForm" :model="walletIncreaseForm" :rules="walletIncreaseRule" label-width="90px">
+      <el-form ref="walletIncreaseFormRef" :model="walletIncreaseForm" :rules="walletIncreaseRule" label-width="90px">
         <el-form-item label="充值金额" prop="rechargeMoney">
           <el-input-number v-model="walletIncreaseForm.rechargeMoney" :min="0.01" :precision="2" style="width: 240px" />
         </el-form-item>
@@ -263,7 +263,7 @@
     </el-dialog>
 
     <el-dialog v-model="memberPointFlag" title="修改积分" width="420px" destroy-on-close>
-      <el-form ref="memberPointForm" :model="memberPointForm" :rules="memberPointRule" label-width="90px">
+      <el-form ref="memberPointFormRef" :model="memberPointForm" :rules="memberPointRule" label-width="90px">
         <el-form-item label="类型" prop="type">
           <el-radio-group v-model="memberPointForm.type">
             <el-radio-button value="INCREASE">增加</el-radio-button>
@@ -281,7 +281,7 @@
     </el-dialog>
 
     <el-dialog v-model="memberGroupFlag" title="设定会员分组" width="420px" destroy-on-close>
-      <el-form ref="memberGroupForm" :model="memberGroupForm" :rules="memberGroupRule" label-width="90px">
+      <el-form ref="memberGroupFormRef" :model="memberGroupForm" :rules="memberGroupRule" label-width="90px">
         <el-form-item label="会员分组" prop="groupId">
           <el-select v-model="memberGroupForm.groupId" clearable filterable style="width: 240px">
             <el-option
@@ -300,13 +300,14 @@
     </el-dialog>
 
     <el-dialog v-model="picModelFlag" width="1200px">
-      <ossManage ref="ossManage" @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" />
+      <ossManage ref="ossManageRef" @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" />
     </el-dialog>
     <multipleMap ref="map" @callback="selectedRegion" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, nextTick, onMounted } from "vue";
 import { ArrowDown } from "@element-plus/icons-vue";
 import multipleMap from "@/components/map/multiple-map";
 import * as API_Member from "@/api/member.js";
@@ -314,451 +315,456 @@ import ossManage from "@/views/sys/oss-manage/ossManage";
 import * as RegExp from "@/libs/RegExp.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { customRouterPush } from "@/utils/filters";
+import { md5 } from "@/utils/md5.js";
 import defaultPic from "@/assets/default.png";
 
-export default {
-  name: "member",
-  components: {
-    multipleMap,
-    ossManage,
-    ArrowDown,
+defineOptions({ name: "member" });
+
+const props = defineProps({
+  selectedMember: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    selectedMember: {
-      type: Boolean,
-      default: false,
-    },
-    selectedList: {
-      type: null,
-      default: () => [],
-    },
-    checkboxSelect: {
-      type: Boolean,
-      default: false,
-    },
+  selectedList: {
+    type: null,
+    default: () => [],
   },
-  data() {
-    return {
-      defaultPic,
-      descTitle: "",
-      descFlag: false,
-      loading: true,
-      addFlag: false,
-      addMemberForm: {
-        mobile: "",
-        username: "",
-        password: "",
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        order: "desc",
-        id: "",
-        username: "",
-        mobile: "",
-        disabled: "OPEN",
-        groupId: "",
-      },
-      picModelFlag: false,
-      form: {},
-      walletIncreaseFlag: false,
-      walletIncreaseLoading: false,
-      walletIncreaseForm: {
-        memberId: "",
-        rechargeMoney: null,
-      },
-      walletIncreaseRule: {
-        rechargeMoney: [
-          { required: true, type: "number", message: "请输入充值金额", trigger: "change" },
-          {
-            validator: (rule, value, callback) => {
-              if (typeof value !== "number" || value <= 0) {
-                callback(new Error("充值金额必须大于0"));
-                return;
-              }
-              callback();
-            },
-            trigger: "change",
-          },
-        ],
-      },
-      memberPointFlag: false,
-      memberPointLoading: false,
-      memberPointForm: {
-        memberId: "",
-        point: null,
-        type: "INCREASE",
-      },
-      selectedRows: [],
-      memberGroupFlag: false,
-      memberGroupLoading: false,
-      memberGroupForm: {
-        groupId: "",
-      },
-      memberGroupRule: {
-        groupId: [{ required: true, message: "请选择会员分组", trigger: "change" }],
-      },
-      memberGroupList: [],
-      memberGradeList: [],
-      memberPointRule: {
-        type: [{ required: true, message: "请选择类型", trigger: "change" }],
-        point: [
-          { required: true, type: "number", message: "请输入积分", trigger: "change" },
-          {
-            validator: (rule, value, callback) => {
-              if (typeof value !== "number" || value <= 0) {
-                callback(new Error("积分必须大于0"));
-                return;
-              }
-              callback();
-            },
-            trigger: "change",
-          },
-        ],
-      },
-      addRule: {
-        mobile: [
-          { required: true, message: "请输入手机号码" },
-          { pattern: RegExp.mobile, message: "请输入正确的手机号" },
-        ],
-        username: [{ required: true, message: "请输入客户名称" }],
-        password: [{ required: true, message: "请输入密码" }],
-      },
-      ruleValidate: {},
-      data: [],
-      total: 0,
-      selectMember: [],
-    };
+  checkboxSelect: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    selectedList: {
-      handler(val) {
-        this.selectMember = JSON.parse(JSON.stringify(val));
-        this.init(this.data);
+});
+const emit = defineEmits(["callback"]);
+
+// 模板 el-form/el-table 的模板 ref（原 ref="searchForm"/"addMemberForm"/"form" 等与 data 同名会互相覆盖，
+// 改名为 xxxRef；ossManage 与 import 同名，改名 ossManageRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+const addMemberFormRef = ref(null);
+const formRef = ref(null);
+const walletIncreaseFormRef = ref(null);
+const memberPointFormRef = ref(null);
+const memberGroupFormRef = ref(null);
+const ossManageRef = ref(null);
+
+const descTitle = ref("");
+const descFlag = ref(false);
+const loading = ref(true);
+const addFlag = ref(false);
+const addMemberForm = ref({
+  mobile: "",
+  username: "",
+  password: "",
+});
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  order: "desc",
+  id: "",
+  username: "",
+  mobile: "",
+  disabled: "OPEN",
+  groupId: "",
+});
+const picModelFlag = ref(false);
+const form = ref({});
+const walletIncreaseFlag = ref(false);
+const walletIncreaseLoading = ref(false);
+const walletIncreaseForm = ref({
+  memberId: "",
+  rechargeMoney: null,
+});
+const walletIncreaseRule = ref({
+  rechargeMoney: [
+    { required: true, type: "number", message: "请输入充值金额", trigger: "change" },
+    {
+      validator: (rule, value, callback) => {
+        if (typeof value !== "number" || value <= 0) {
+          callback(new Error("充值金额必须大于0"));
+          return;
+        }
+        callback();
       },
-      deep: true,
-      immediate: true,
+      trigger: "change",
     },
+  ],
+});
+const memberPointFlag = ref(false);
+const memberPointLoading = ref(false);
+const memberPointForm = ref({
+  memberId: "",
+  point: null,
+  type: "INCREASE",
+});
+const selectedRows = ref([]);
+const memberGroupFlag = ref(false);
+const memberGroupLoading = ref(false);
+const memberGroupForm = ref({
+  groupId: "",
+});
+const memberGroupRule = ref({
+  groupId: [{ required: true, message: "请选择会员分组", trigger: "change" }],
+});
+const memberGroupList = ref([]);
+const memberGradeList = ref([]);
+const memberPointRule = ref({
+  type: [{ required: true, message: "请选择类型", trigger: "change" }],
+  point: [
+    { required: true, type: "number", message: "请输入积分", trigger: "change" },
+    {
+      validator: (rule, value, callback) => {
+        if (typeof value !== "number" || value <= 0) {
+          callback(new Error("积分必须大于0"));
+          return;
+        }
+        callback();
+      },
+      trigger: "change",
+    },
+  ],
+});
+const addRule = ref({
+  mobile: [
+    { required: true, message: "请输入手机号码" },
+    { pattern: RegExp.mobile, message: "请输入正确的手机号" },
+  ],
+  username: [{ required: true, message: "请输入客户名称" }],
+  password: [{ required: true, message: "请输入密码" }],
+});
+const ruleValidate = ref({});
+const data = ref([]);
+const total = ref(0);
+const selectMember = ref([]);
+
+watch(
+  () => props.selectedList,
+  (val) => {
+    selectMember.value = JSON.parse(JSON.stringify(val));
+    init(data.value);
   },
-  methods: {
-    handleMoreCommand(name, row) {
-      if (name === "edit") this.editPerm(row);
-      if (name === "disabled") this.disabled(row);
-      if (name === "increaseWallet") this.openWalletIncrease(row);
-      if (name === "updatePoint") this.openMemberPoint(row);
-    },
-    onSelectionChange(selection) {
-      if (this.selectedMember && this.checkboxSelect) {
-        this.selectMember = selection || [];
-        return;
+  { deep: true, immediate: true }
+);
+
+function handleMoreCommand(name, row) {
+  if (name === "edit") editPerm(row);
+  if (name === "disabled") disabled(row);
+  if (name === "increaseWallet") openWalletIncrease(row);
+  if (name === "updatePoint") openMemberPoint(row);
+}
+function onSelectionChange(selection) {
+  if (props.selectedMember && props.checkboxSelect) {
+    selectMember.value = selection || [];
+    return;
+  }
+  selectedRows.value = selection || [];
+}
+function getSelection() {
+  return selectMember.value || [];
+}
+function syncTableSelection() {
+  if (!props.selectedMember || !props.checkboxSelect) {
+    return;
+  }
+  nextTick(() => {
+    clearSelection();
+    data.value.forEach((row) => {
+      if (selectMember.value.some((member) => member.id === row.id)) {
+        table.value?.toggleRowSelection(row, true);
       }
-      this.selectedRows = selection || [];
-    },
-    getSelection() {
-      return this.selectMember || [];
-    },
-    syncTableSelection() {
-      if (!this.selectedMember || !this.checkboxSelect) {
-        return;
+    });
+  });
+}
+function openSetMemberGroup() {
+  memberGroupFlag.value = true;
+  memberGroupLoading.value = false;
+  memberGroupForm.value = { groupId: "" };
+  nextTick(() => {
+    if (memberGroupFormRef.value) memberGroupFormRef.value.resetFields();
+  });
+  loadMemberGroupList();
+}
+function loadMemberGroupList() {
+  API_Member.getMemberGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+    if (res && res.success && res.result) {
+      memberGroupList.value = res.result.records || [];
+    }
+  });
+}
+function loadMemberGradeList() {
+  API_Member.getMemberGradeByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+    if (res && res.success && res.result) {
+      memberGradeList.value = res.result || [];
+    }
+  });
+}
+function clearSelection() {
+  table.value?.clearSelection();
+}
+function submitSetMemberGroup() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning("请先选择会员");
+    return;
+  }
+  memberGroupFormRef.value.validate((valid) => {
+    if (!valid) return;
+    const memberIds = selectedRows.value.map((item) => item.id);
+    const groupId = memberGroupForm.value.groupId;
+    memberGroupLoading.value = true;
+    Promise.all(
+      memberIds.map((memberId) => API_Member.setMemberUserGroups(memberId, [groupId]))
+    )
+      .then((results) => {
+        memberGroupLoading.value = false;
+        const failed = results.find((res) => !res || !res.success);
+        if (failed) {
+          ElMessage.error(failed.message || "设置失败");
+          return;
+        }
+        ElMessage.success("设置成功");
+        memberGroupFlag.value = false;
+        selectedRows.value = [];
+        clearSelection();
+        getData();
+      })
+      .catch(() => {
+        memberGroupLoading.value = false;
+        ElMessage.error("设置失败，请稍后重试");
+      });
+  });
+}
+function callback(val) {
+  selectMember.value.forEach((item) => {
+    item.___selected = false;
+  });
+  val.___selected = !val.___selected;
+  let findUser = selectMember.value.find((item) => item.id == val.id);
+  if (!findUser) {
+    selectMember.value.push(val);
+  } else {
+    selectMember.value.map((item, index) => {
+      if (item.id == findUser.id) {
+        selectMember.value.splice(index, 1);
       }
-      this.$nextTick(() => {
-        this.clearSelection();
-        this.data.forEach((row) => {
-          if (this.selectMember.some((member) => member.id === row.id)) {
-            this.$refs.table?.toggleRowSelection(row, true);
-          }
-        });
-      });
-    },
-    openSetMemberGroup() {
-      this.memberGroupFlag = true;
-      this.memberGroupLoading = false;
-      this.memberGroupForm = { groupId: "" };
-      this.$nextTick(() => {
-        if (this.$refs.memberGroupForm) this.$refs.memberGroupForm.resetFields();
-      });
-      this.loadMemberGroupList();
-    },
-    loadMemberGroupList() {
-      API_Member.getMemberGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
-        if (res && res.success && res.result) {
-          this.memberGroupList = res.result.records || [];
+    });
+  }
+  emit("callback", val);
+}
+function init(list) {
+  list.forEach((item) => {
+    if (selectMember.value.length != 0) {
+      selectMember.value.forEach((member) => {
+        if (member.id == item.id) {
+          item.___selected = true;
         }
       });
-    },
-    loadMemberGradeList() {
-      API_Member.getMemberGradeByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
-        if (res && res.success && res.result) {
-          this.memberGradeList = res.result || [];
+    } else {
+      item.___selected = false;
+    }
+  });
+  data.value = list;
+}
+function changePage() {
+  getData();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getData();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getData();
+}
+function editPerm(val) {
+  descTitle.value = `查看用户 ${val.username}`;
+  descFlag.value = true;
+  getMemberInfo(val.id);
+}
+function addMember() {
+  addMemberForm.value = {
+    mobile: "",
+    username: "",
+    password: "",
+  };
+  addFlag.value = true;
+  nextTick(() => {
+    addMemberFormRef.value?.clearValidate();
+  });
+}
+function getMemberInfo(id) {
+  API_Member.getMemberInfoData(id).then((res) => {
+    if (res.result) {
+      form.value = res.result;
+    }
+  });
+}
+function getData() {
+  loading.value = true;
+  if (!props.selectedMember) {
+    selectedRows.value = [];
+    clearSelection();
+  }
+  API_Member.getMemberListData(searchForm.value).then((res) => {
+    if (res.result.records) {
+      loading.value = false;
+      init(res.result.records);
+      total.value = res.result.total;
+      syncTableSelection();
+    }
+  });
+}
+function openPicSelector() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  form.value.face = val.url;
+}
+function addMemberSubmit() {
+  addMemberForm.value.password = md5(addMemberForm.value.password);
+  addMemberFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Member.addMember(addMemberForm.value).then((res) => {
+        if (res.result) {
+          addMemberFormRef.value.resetFields();
+          getData();
+          ElMessage.success("添加成功！");
+          addFlag.value = false;
         }
       });
-    },
-    clearSelection() {
-      this.$refs.table?.clearSelection();
-    },
-    submitSetMemberGroup() {
-      if (this.selectedRows.length === 0) {
-        ElMessage.warning("请先选择会员");
-        return;
+    }
+  });
+}
+function selectedRegion(val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+    const ids = val.data.map((item) => item.id).join(",");
+    form.value.region = paths;
+    form.value.regionId = ids;
+  } else {
+    form.value.region = val.data.addr;
+    form.value.regionId = val.data.addrId;
+  }
+}
+function detail(row) {
+  customRouterPush({ name: "member-detail", query: { id: row.id } });
+}
+function disabled(v) {
+  let params = {
+    memberIds: [v.id],
+    disabled: false,
+  };
+  ElMessageBox.confirm("确认禁用此会员？", "提示", { type: "warning" }).then(() => {
+    API_Member.updateMemberStatus(params).then((res) => {
+      if (res.success) {
+        ElMessage.success("禁用成功");
+        getData();
       }
-      this.$refs.memberGroupForm.validate((valid) => {
-        if (!valid) return;
-        const memberIds = this.selectedRows.map((item) => item.id);
-        const groupId = this.memberGroupForm.groupId;
-        this.memberGroupLoading = true;
-        Promise.all(
-          memberIds.map((memberId) => API_Member.setMemberUserGroups(memberId, [groupId]))
-        )
-          .then((results) => {
-            this.memberGroupLoading = false;
-            const failed = results.find((res) => !res || !res.success);
-            if (failed) {
-              ElMessage.error(failed.message || "设置失败");
-              return;
-            }
-            ElMessage.success("设置成功");
-            this.memberGroupFlag = false;
-            this.selectedRows = [];
-            this.clearSelection();
-            this.getData();
-          })
-          .catch(() => {
-            this.memberGroupLoading = false;
-            ElMessage.error("设置失败，请稍后重试");
-          });
-      });
-    },
-    callback(val) {
-      this.selectMember.forEach((item) => {
-        item.___selected = false;
-      });
-      val.___selected = !val.___selected;
-      let findUser = this.selectMember.find((item) => item.id == val.id);
-      if (!findUser) {
-        this.selectMember.push(val);
-      } else {
-        this.selectMember.map((item, index) => {
-          if (item.id == findUser.id) {
-            this.selectMember.splice(index, 1);
-          }
-        });
-      }
-      this.$emit("callback", val);
-    },
-    init(data) {
-      data.forEach((item) => {
-        if (this.selectMember.length != 0) {
-          this.selectMember.forEach((member) => {
-            if (member.id == item.id) {
-              item.___selected = true;
-            }
-          });
+    });
+  }).catch(() => {});
+}
+function openWalletIncrease(row) {
+  walletIncreaseLoading.value = false;
+  walletIncreaseForm.value = { memberId: row.id, rechargeMoney: null };
+  walletIncreaseFlag.value = true;
+  nextTick(() => {
+    walletIncreaseFormRef.value && walletIncreaseFormRef.value.resetFields();
+  });
+}
+function submitWalletIncrease() {
+  walletIncreaseFormRef.value.validate((valid) => {
+    if (!valid) return;
+    walletIncreaseLoading.value = true;
+    API_Member.increaseMemberWallet({
+      memberId: walletIncreaseForm.value.memberId,
+      rechargeMoney: walletIncreaseForm.value.rechargeMoney,
+    })
+      .then((res) => {
+        if (res && res.success) {
+          ElMessage.success("充值成功");
+          walletIncreaseFlag.value = false;
+          getData();
         } else {
-          item.___selected = false;
+          ElMessage.error((res && res.message) || "充值失败");
         }
+      })
+      .finally(() => {
+        walletIncreaseLoading.value = false;
       });
-      this.data = data;
-    },
-    changePage() {
-      this.getData();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getData();
-    },
-    editPerm(val) {
-      this.descTitle = `查看用户 ${val.username}`;
-      this.descFlag = true;
-      this.getMemberInfo(val.id);
-    },
-    addMember() {
-      this.addMemberForm = {
-        mobile: "",
-        username: "",
-        password: "",
-      };
-      this.addFlag = true;
-      this.$nextTick(() => {
-        this.$refs.addMemberForm?.clearValidate();
-      });
-    },
-    getMemberInfo(id) {
-      API_Member.getMemberInfoData(id).then((res) => {
-        if (res.result) {
-          this.form = res.result;
+  });
+}
+function openMemberPoint(row) {
+  memberPointLoading.value = false;
+  memberPointForm.value = { memberId: row.id, point: null, type: "INCREASE" };
+  memberPointFlag.value = true;
+  nextTick(() => {
+    memberPointFormRef.value && memberPointFormRef.value.resetFields();
+  });
+}
+function submitMemberPoint() {
+  memberPointFormRef.value.validate((valid) => {
+    if (!valid) return;
+    memberPointLoading.value = true;
+    API_Member.updateMemberPoint({
+      memberId: memberPointForm.value.memberId,
+      point: memberPointForm.value.point,
+      type: memberPointForm.value.type,
+    })
+      .then((res) => {
+        if (res && res.success) {
+          ElMessage.success("修改成功");
+          memberPointFlag.value = false;
+          getData();
+        } else {
+          ElMessage.error((res && res.message) || "修改失败");
         }
+      })
+      .finally(() => {
+        memberPointLoading.value = false;
       });
-    },
-    getData() {
-      this.loading = true;
-      if (!this.selectedMember) {
-        this.selectedRows = [];
-        this.clearSelection();
-      }
-      API_Member.getMemberListData(this.searchForm).then((res) => {
-        if (res.result.records) {
-          this.loading = false;
-          this.init(res.result.records);
-          this.total = res.result.total;
-          this.syncTableSelection();
-        }
-      });
-    },
-    openPicSelector() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      this.form.face = val.url;
-    },
-    addMemberSubmit() {
-      this.addMemberForm.password = this.md5(this.addMemberForm.password);
-      this.$refs.addMemberForm.validate((valid) => {
-        if (valid) {
-          API_Member.addMember(this.addMemberForm).then((res) => {
-            if (res.result) {
-              this.$refs.addMemberForm.resetFields();
-              this.getData();
-              ElMessage.success("添加成功！");
-              this.addFlag = false;
-            }
-          });
-        }
-      });
-    },
-    selectedRegion(val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-        const ids = val.data.map((item) => item.id).join(",");
-        this.form.region = paths;
-        this.form.regionId = ids;
-      } else {
-        this.form.region = val.data.addr;
-        this.form.regionId = val.data.addrId;
-      }
-    },
-    detail(row) {
-      customRouterPush({ name: "member-detail", query: { id: row.id } });
-    },
-    disabled(v) {
-      let params = {
-        memberIds: [v.id],
-        disabled: false,
-      };
-      ElMessageBox.confirm("确认禁用此会员？", "提示", { type: "warning" }).then(() => {
-        API_Member.updateMemberStatus(params).then((res) => {
-          if (res.success) {
-            ElMessage.success("禁用成功");
-            this.getData();
-          }
-        });
-      }).catch(() => {});
-    },
-    openWalletIncrease(row) {
-      this.walletIncreaseLoading = false;
-      this.walletIncreaseForm = { memberId: row.id, rechargeMoney: null };
-      this.walletIncreaseFlag = true;
-      this.$nextTick(() => {
-        this.$refs.walletIncreaseForm && this.$refs.walletIncreaseForm.resetFields();
-      });
-    },
-    submitWalletIncrease() {
-      this.$refs.walletIncreaseForm.validate((valid) => {
-        if (!valid) return;
-        this.walletIncreaseLoading = true;
-        API_Member.increaseMemberWallet({
-          memberId: this.walletIncreaseForm.memberId,
-          rechargeMoney: this.walletIncreaseForm.rechargeMoney,
-        })
-          .then((res) => {
-            if (res && res.success) {
-              ElMessage.success("充值成功");
-              this.walletIncreaseFlag = false;
-              this.getData();
-            } else {
-              ElMessage.error((res && res.message) || "充值失败");
-            }
-          })
-          .finally(() => {
-            this.walletIncreaseLoading = false;
-          });
-      });
-    },
-    openMemberPoint(row) {
-      this.memberPointLoading = false;
-      this.memberPointForm = { memberId: row.id, point: null, type: "INCREASE" };
-      this.memberPointFlag = true;
-      this.$nextTick(() => {
-        this.$refs.memberPointForm && this.$refs.memberPointForm.resetFields();
-      });
-    },
-    submitMemberPoint() {
-      this.$refs.memberPointForm.validate((valid) => {
-        if (!valid) return;
-        this.memberPointLoading = true;
-        API_Member.updateMemberPoint({
-          memberId: this.memberPointForm.memberId,
-          point: this.memberPointForm.point,
-          type: this.memberPointForm.type,
-        })
-          .then((res) => {
-            if (res && res.success) {
-              ElMessage.success("修改成功");
-              this.memberPointFlag = false;
-              this.getData();
-            } else {
-              ElMessage.error((res && res.message) || "修改失败");
-            }
-          })
-          .finally(() => {
-            this.memberPointLoading = false;
-          });
-      });
-    },
-    handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword, id, regionId, region } = this.form;
-      let time = new Date(this.form.birthday);
-      let birthday =
-        this.form.birthday === undefined
-          ? ""
-          : time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
-      let submit = {
-        regionId,
-        region,
-        nickName,
-        sex,
-        birthday,
-        face,
-        id,
-      };
-      if (newPassword) {
-        submit.password = this.md5(newPassword);
-      }
-      API_Member.updateMember(submit).then((res) => {
-        if (res.result) {
-          ElMessage.success("修改成功！");
-          this.descFlag = false;
-          this.getData();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.getData();
-    this.loadMemberGroupList();
-    this.loadMemberGradeList();
-  },
-};
+  });
+}
+function handleSubmitModal() {
+  const { nickName, sex, username, face, newPassword, id, regionId, region } = form.value;
+  let time = new Date(form.value.birthday);
+  let birthday =
+    form.value.birthday === undefined
+      ? ""
+      : time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
+  let submit = {
+    regionId,
+    region,
+    nickName,
+    sex,
+    birthday,
+    face,
+    id,
+  };
+  if (newPassword) {
+    submit.password = md5(newPassword);
+  }
+  API_Member.updateMember(submit).then((res) => {
+    if (res.result) {
+      ElMessage.success("修改成功！");
+      descFlag.value = false;
+      getData();
+    }
+  });
+}
+
+onMounted(() => {
+  getData();
+  loadMemberGroupList();
+  loadMemberGradeList();
+});
+
+// 外部通过 ref 调用（promotions/coupon-activity/coupon-publish.vue 的 memberLayoutRef.getSelection()）
+defineExpose({ getSelection });
 </script>
 <style lang="scss" scoped>
 .face {
diff --git a/manager/src/views/member/list/memberDetail.vue b/manager/src/views/member/list/memberDetail.vue
index 7560adccb..66dc9aa5b 100644
--- a/manager/src/views/member/list/memberDetail.vue
+++ b/manager/src/views/member/list/memberDetail.vue
@@ -379,7 +379,7 @@
       width="500px"
       :close-on-click-modal="false"
     >
-      <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressFormValidate">
+      <el-form ref="addressFormRef" :model="addressForm" label-width="100px" :rules="addressFormValidate">
         <el-form-item label="收货人姓名" prop="name">
           <el-input v-model="addressForm.name" maxlength="8" clearable style="width: 80%" />
         </el-form-item>
@@ -388,7 +388,7 @@
         </el-form-item>
         <el-form-item label="收货人地址" prop="consigneeAddressPath">
           <span>{{ addressForm.consigneeAddressPath || "暂无地址" }}</span>
-          <el-button style="margin-left: 10px" @click="$refs.map.open()">选择</el-button>
+          <el-button style="margin-left: 10px" @click="map.open()">选择</el-button>
         </el-form-item>
         <el-form-item label="详细地址" prop="detail">
           <el-input v-model="addressForm.detail" maxlength="35" clearable style="width: 80%" />
@@ -412,7 +412,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import multipleMap from "@/components/map/multiple-map";
@@ -420,374 +422,373 @@ import * as RegExp from "@/libs/RegExp.js";
 import * as API_Order from "@/api/order.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  name: "memberDetail",
-  components: {
-    ossManage,
-    multipleMap,
-  },
-  data() {
-    return {
-      id: "",
-      activeTab: "point",
-      loading: true,
-      addressLoading: false,
-      memberInfo: {},
-      memberWalletInfo: {},
-      addressModalTitle: "",
-      addressModalVisible: false,
-      addressForm: {
-        id: "",
-        isDefault: 0,
-        consigneeAddressPath: "",
-        consigneeAddressIdPath: "",
-      },
-      selectDate: null,
-      submitLoading: false,
-      addressFormValidate: {
-        name: [{ required: true, message: "收货人姓名不能为空" }],
-        mobile: [
-          { required: true, message: "请输入收货人手机号码" },
-          {
-            pattern: RegExp.mobile,
-            message: "请输入正确的手机号",
-          },
-        ],
-        consigneeAddressPath: [{ required: true, message: "收货人地址不能为空" }],
-        detail: [{ required: true, message: "收货人详细地址不能为空" }],
-      },
-      pointData: [],
-      pointTotal: 0,
-      pointSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      orderData: [],
-      orderTotal: 0,
-      orderSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        payStatus: "",
-        orderSn: "",
-        orderType: "",
-      },
-      addressData: [],
-      addressTotal: 0,
-      addressSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      walletSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      walletData: [],
-      walletTotal: 0,
-      receiptRecordSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      receiptRecordData: [],
-      receiptRecordTotal: 0,
-    };
-  },
-  methods: {
-    orderTypeText(v) {
-      const map = {
-        NORMAL: "普通订单",
-        VIRTUAL: "虚拟订单",
-        GIFT: "赠品订单",
-        PINTUAN: "拼团订单",
-      };
-      return map[v] || v || "";
-    },
-    clientTypeText(v) {
-      const map = {
-        H5: "移动端",
-        PC: "PC端",
-        WECHAT_MP: "小程序端",
-        APP: "移动应用端",
-      };
-      return map[v] || v || "";
-    },
-    orderStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已关闭",
-      };
-      return map[v] || v || "";
-    },
-    payStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-      };
-      return map[v] || v || "";
-    },
-    groupAfterSaleStatusText(v) {
-      const map = {
-        NEW: "未申请",
-        NOT_APPLIED: "未申请",
-        ALREADY_APPLIED: "已申请",
-        EXPIRED: "已失效",
-      };
-      return map[v] || v || "";
-    },
-    groupComplainStatusText(v) {
-      const map = {
-        NEW: "未申请",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "取消投诉",
-      };
-      return map[v] || v || "";
-    },
-    walletServiceTypeText(type) {
-      if (type === "WALLET_WITHDRAWAL") return "余额提现";
-      if (type === "WALLET_PAY") return "余额支付";
-      if (type === "WALLET_REFUND") return "余额退款";
-      if (type === "WALLET_RECHARGE") return "余额充值";
-      return "佣金提成";
-    },
-    init() {
-      this.getMemberInfo();
-      this.getPointData();
-    },
-    memberInfoChange(v) {
-      if (v == "point") {
-        this.getPointData();
-      }
-      if (v == "address") {
-        this.$nextTick(() => {
-          this.getAddressData();
-        });
-      }
-      if (v == "order") {
-        this.getOrderData();
-      }
-      if (v == "wallet") {
-        this.getMemberWalletData();
-        this.getDepositLogData();
-      }
-      if (v == "receipt") {
-        this.getReceiptRecordData();
-      }
-    },
-    getMemberInfo() {
-      API_Member.getMemberInfoData(this.id).then((res) => {
-        this.memberInfo = res.result;
-      });
-    },
-    memberStatusChange(v) {
-      let params = {
-        memberIds: [this.id],
-        disabled: v,
-      };
-      API_Member.updateMemberStatus(params).then((res) => {});
-    },
-    getMemberWalletData() {
-      this.loading = true;
-      let params = {
-        memberId: this.id,
-      };
-      API_Member.getMemberWallet(params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.memberWalletInfo = res.result;
-        }
-      });
-      this.loading = false;
-    },
-    getDepositLogData() {
-      this.loading = true;
-      this.walletSearchForm.memberId = this.id;
-      API_Member.getUserWallet(this.walletSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.walletData = res.result.records;
-          this.walletTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    getReceiptRecordData() {
-      this.loading = true;
-      this.receiptRecordSearchForm.pageNumber = 1;
-      this.receiptRecordSearchForm.pageSize = 20;
-      this.receiptRecordSearchForm.memberId = this.id;
-      API_Order.getReceiptPage(this.receiptRecordSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.receiptRecordData = res.result.records;
-          this.receiptRecordTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    getOrderData() {
-      this.loading = true;
-      this.orderSearchForm.pageNumber = 1;
-      this.orderSearchForm.pageSize = 20;
-      this.orderSearchForm.memberId = this.id;
-      API_Order.getOrderList(this.orderSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.orderData = res.result.records;
-          this.orderTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    orderDetail(v) {
-      this.$router.push({
-        name: "order-detail",
-        query: { sn: v },
-      });
-    },
-    getPointData() {
-      this.loading = true;
-      this.pointSearchForm.memberId = this.id;
-      API_Member.getHistoryPointData(this.pointSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.pointData = res.result.records;
-          this.pointTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    addressSubmit() {
-      this.addressForm.memberId = this.id;
-      this.$refs.addressForm.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let submit = JSON.parse(JSON.stringify(this.addressForm));
-          submit.isDefault ? (submit.isDefault = true) : (submit.isDefault = false);
-          if (submit.id != "") {
-            API_Member.editMemberAddress(submit).then((res) => {
-              this.submitLoading = false;
-              if (res && res.success) {
-                ElMessage.success("修改成功");
-                this.addressModalVisible = false;
-                this.getAddressData();
-              }
-            });
-          } else {
-            API_Member.addMemberAddress(submit).then((res) => {
-              this.submitLoading = false;
-              if (res && res.success) {
-                ElMessage.success("添加成功");
-                this.addressModalVisible = false;
-                this.getAddressData();
-              }
-            });
-          }
-        }
-      });
-    },
-    getAddress(val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-        const ids = val.data.map((item) => item.id).join(",");
+defineOptions({ name: "memberDetail" });
 
-        this.addressForm.consigneeAddressPath = paths;
-        this.addressForm.consigneeAddressIdPath = ids;
+const route = useRoute();
+const router = useRouter();
 
-        const coord = val.data[val.data.length - 1].center.split(",");
-        this.addressForm.lat = coord[1];
-        this.addressForm.lon = coord[0];
-      } else {
-        this.addressForm.consigneeAddressPath = val.data.addr;
-        this.addressForm.consigneeAddressIdPath = val.data.addrId;
-        this.addressForm.lat = val.data.position.lat;
-        this.addressForm.lon = val.data.position.lng;
-      }
+// 模板 el-form 的 ref（原 ref="addressForm"，与 data 同名会互相覆盖，改名为 addressFormRef）
+const addressFormRef = ref(null);
+// 模板 multipleMap 的 ref（ref="map"）
+const map = ref(null);
+
+const id = ref("");
+const activeTab = ref("point");
+const loading = ref(true);
+const addressLoading = ref(false);
+const memberInfo = ref({});
+const memberWalletInfo = ref({});
+const addressModalTitle = ref("");
+const addressModalVisible = ref(false);
+const addressForm = reactive({
+  id: "",
+  isDefault: 0,
+  consigneeAddressPath: "",
+  consigneeAddressIdPath: "",
+});
+const selectDate = ref(null);
+const submitLoading = ref(false);
+const addressFormValidate = reactive({
+  name: [{ required: true, message: "收货人姓名不能为空" }],
+  mobile: [
+    { required: true, message: "请输入收货人手机号码" },
+    {
+      pattern: RegExp.mobile,
+      message: "请输入正确的手机号",
     },
-    memberAddressRemove(v) {
-      ElMessageBox.confirm("确定要删除此收货地址？", "删除", { type: "warning" }).then(() => {
-        API_Member.removeMemberAddress(v.id).then((res) => {
-          if (res.success) {
-            ElMessage.success("删除成功");
-            this.getAddressData();
+  ],
+  consigneeAddressPath: [{ required: true, message: "收货人地址不能为空" }],
+  detail: [{ required: true, message: "收货人详细地址不能为空" }],
+});
+const pointData = ref([]);
+const pointTotal = ref(0);
+const pointSearchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const orderData = ref([]);
+const orderTotal = ref(0);
+const orderSearchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  payStatus: "",
+  orderSn: "",
+  orderType: "",
+});
+const addressData = ref([]);
+const addressTotal = ref(0);
+const addressSearchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const walletSearchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const walletData = ref([]);
+const walletTotal = ref(0);
+const receiptRecordSearchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const receiptRecordData = ref([]);
+const receiptRecordTotal = ref(0);
+
+function orderTypeText(v) {
+  const map = {
+    NORMAL: "普通订单",
+    VIRTUAL: "虚拟订单",
+    GIFT: "赠品订单",
+    PINTUAN: "拼团订单",
+  };
+  return map[v] || v || "";
+}
+function clientTypeText(v) {
+  const map = {
+    H5: "移动端",
+    PC: "PC端",
+    WECHAT_MP: "小程序端",
+    APP: "移动应用端",
+  };
+  return map[v] || v || "";
+}
+function orderStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已关闭",
+  };
+  return map[v] || v || "";
+}
+function payStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+  };
+  return map[v] || v || "";
+}
+function groupAfterSaleStatusText(v) {
+  const map = {
+    NEW: "未申请",
+    NOT_APPLIED: "未申请",
+    ALREADY_APPLIED: "已申请",
+    EXPIRED: "已失效",
+  };
+  return map[v] || v || "";
+}
+function groupComplainStatusText(v) {
+  const map = {
+    NEW: "未申请",
+    NO_APPLY: "未申请",
+    APPLYING: "申请中",
+    COMPLETE: "已完成",
+    EXPIRED: "已失效",
+    CANCEL: "取消投诉",
+  };
+  return map[v] || v || "";
+}
+function walletServiceTypeText(type) {
+  if (type === "WALLET_WITHDRAWAL") return "余额提现";
+  if (type === "WALLET_PAY") return "余额支付";
+  if (type === "WALLET_REFUND") return "余额退款";
+  if (type === "WALLET_RECHARGE") return "余额充值";
+  return "佣金提成";
+}
+function init() {
+  getMemberInfo();
+  getPointData();
+}
+function memberInfoChange(v) {
+  if (v == "point") {
+    getPointData();
+  }
+  if (v == "address") {
+    nextTick(() => {
+      getAddressData();
+    });
+  }
+  if (v == "order") {
+    getOrderData();
+  }
+  if (v == "wallet") {
+    getMemberWalletData();
+    getDepositLogData();
+  }
+  if (v == "receipt") {
+    getReceiptRecordData();
+  }
+}
+function getMemberInfo() {
+  API_Member.getMemberInfoData(id.value).then((res) => {
+    memberInfo.value = res.result;
+  });
+}
+function memberStatusChange(v) {
+  let params = {
+    memberIds: [id.value],
+    disabled: v,
+  };
+  API_Member.updateMemberStatus(params).then((res) => {});
+}
+function getMemberWalletData() {
+  loading.value = true;
+  let params = {
+    memberId: id.value,
+  };
+  API_Member.getMemberWallet(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      memberWalletInfo.value = res.result;
+    }
+  });
+  loading.value = false;
+}
+function getDepositLogData() {
+  loading.value = true;
+  walletSearchForm.value.memberId = id.value;
+  API_Member.getUserWallet(walletSearchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      walletData.value = res.result.records;
+      walletTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function getReceiptRecordData() {
+  loading.value = true;
+  receiptRecordSearchForm.value.pageNumber = 1;
+  receiptRecordSearchForm.value.pageSize = 20;
+  receiptRecordSearchForm.value.memberId = id.value;
+  API_Order.getReceiptPage(receiptRecordSearchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      receiptRecordData.value = res.result.records;
+      receiptRecordTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function getOrderData() {
+  loading.value = true;
+  orderSearchForm.value.pageNumber = 1;
+  orderSearchForm.value.pageSize = 20;
+  orderSearchForm.value.memberId = id.value;
+  API_Order.getOrderList(orderSearchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      orderData.value = res.result.records;
+      orderTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function orderDetail(v) {
+  router.push({
+    name: "order-detail",
+    query: { sn: v },
+  });
+}
+function getPointData() {
+  loading.value = true;
+  pointSearchForm.value.memberId = id.value;
+  API_Member.getHistoryPointData(pointSearchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      pointData.value = res.result.records;
+      pointTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function addressSubmit() {
+  addressForm.memberId = id.value;
+  addressFormRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      let submit = JSON.parse(JSON.stringify(addressForm));
+      submit.isDefault ? (submit.isDefault = true) : (submit.isDefault = false);
+      if (submit.id != "") {
+        API_Member.editMemberAddress(submit).then((res) => {
+          submitLoading.value = false;
+          if (res && res.success) {
+            ElMessage.success("修改成功");
+            addressModalVisible.value = false;
+            getAddressData();
           }
         });
-      }).catch(() => {});
-    },
-    getAddressData() {
-      this.addressLoading = true;
-      API_Member.getMemberAddressData(this.id, this.addressSearchForm)
-        .then((res) => {
-          if (res.success) {
-            this.addressData = res.result.records;
-            this.addressTotal = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.addressLoading = false;
-        });
-    },
-    pointChangePage(v) {
-      this.pointSearchForm.pageNumber = v;
-      this.getPointData();
-    },
-    pointChangePageSize(v) {
-      this.pointSearchForm.pageNumber = 1;
-      this.pointSearchForm.pageSize = v;
-      this.getPointData();
-    },
-    addressChangePage(v) {
-      this.addressSearchForm.pageNumber = v;
-      this.getAddressData();
-    },
-    addressChangePageSize(v) {
-      this.addressSearchForm.pageNumber = 1;
-      this.addressSearchForm.pageSize = v;
-      this.getAddressData();
-    },
-    walletChangePage(v) {
-      this.walletSearchForm.pageNumber = v;
-      this.getDepositLogData();
-    },
-    walletChangePageSize(v) {
-      this.walletSearchForm.pageNumber = 1;
-      this.walletSearchForm.pageSize = v;
-      this.getDepositLogData();
-    },
-    orderChangePage(v) {
-      this.orderSearchForm.pageNumber = v;
-      this.getOrderData();
-    },
-    orderChangePageSize(v) {
-      this.orderSearchForm.pageNumber = 1;
-      this.orderSearchForm.pageSize = v;
-      this.getOrderData();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.orderSearchForm.startDate = v[0];
-        this.orderSearchForm.endDate = v[1];
       } else {
-        delete this.orderSearchForm.startDate;
-        delete this.orderSearchForm.endDate;
+        API_Member.addMemberAddress(submit).then((res) => {
+          submitLoading.value = false;
+          if (res && res.success) {
+            ElMessage.success("添加成功");
+            addressModalVisible.value = false;
+            getAddressData();
+          }
+        });
       }
-    },
-  },
-  mounted() {
-    this.id = this.$route.query.id;
-    this.init();
-  },
-};
+    }
+  });
+}
+function getAddress(val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+    const ids = val.data.map((item) => item.id).join(",");
+
+    addressForm.consigneeAddressPath = paths;
+    addressForm.consigneeAddressIdPath = ids;
+
+    const coord = val.data[val.data.length - 1].center.split(",");
+    addressForm.lat = coord[1];
+    addressForm.lon = coord[0];
+  } else {
+    addressForm.consigneeAddressPath = val.data.addr;
+    addressForm.consigneeAddressIdPath = val.data.addrId;
+    addressForm.lat = val.data.position.lat;
+    addressForm.lon = val.data.position.lng;
+  }
+}
+function memberAddressRemove(v) {
+  ElMessageBox.confirm("确定要删除此收货地址？", "删除", { type: "warning" }).then(() => {
+    API_Member.removeMemberAddress(v.id).then((res) => {
+      if (res.success) {
+        ElMessage.success("删除成功");
+        getAddressData();
+      }
+    });
+  }).catch(() => {});
+}
+function getAddressData() {
+  addressLoading.value = true;
+  API_Member.getMemberAddressData(id.value, addressSearchForm.value)
+    .then((res) => {
+      if (res.success) {
+        addressData.value = res.result.records;
+        addressTotal.value = res.result.total;
+      }
+    })
+    .finally(() => {
+      addressLoading.value = false;
+    });
+}
+function pointChangePage(v) {
+  pointSearchForm.value.pageNumber = v;
+  getPointData();
+}
+function pointChangePageSize(v) {
+  pointSearchForm.value.pageNumber = 1;
+  pointSearchForm.value.pageSize = v;
+  getPointData();
+}
+function addressChangePage(v) {
+  addressSearchForm.value.pageNumber = v;
+  getAddressData();
+}
+function addressChangePageSize(v) {
+  addressSearchForm.value.pageNumber = 1;
+  addressSearchForm.value.pageSize = v;
+  getAddressData();
+}
+function walletChangePage(v) {
+  walletSearchForm.value.pageNumber = v;
+  getDepositLogData();
+}
+function walletChangePageSize(v) {
+  walletSearchForm.value.pageNumber = 1;
+  walletSearchForm.value.pageSize = v;
+  getDepositLogData();
+}
+function orderChangePage(v) {
+  orderSearchForm.value.pageNumber = v;
+  getOrderData();
+}
+function orderChangePageSize(v) {
+  orderSearchForm.value.pageNumber = 1;
+  orderSearchForm.value.pageSize = v;
+  getOrderData();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    orderSearchForm.value.startDate = v[0];
+    orderSearchForm.value.endDate = v[1];
+  } else {
+    delete orderSearchForm.value.startDate;
+    delete orderSearchForm.value.endDate;
+  }
+}
+
+onMounted(() => {
+  id.value = route.query.id;
+  init();
+});
 </script>
 <style lang="scss" scoped>
 @import "memberDetail.scss";
diff --git a/manager/src/views/member/list/memberRecycle.vue b/manager/src/views/member/list/memberRecycle.vue
index d0659d629..9ad0748fa 100644
--- a/manager/src/views/member/list/memberRecycle.vue
+++ b/manager/src/views/member/list/memberRecycle.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -96,7 +96,7 @@
     </el-card>
 
     <el-dialog v-model="descFlag" :title="descTitle" width="500px" destroy-on-close>
-      <el-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width="80px">
+      <el-form ref="formValidateRef" :model="formValidate" :rules="ruleValidate" label-width="80px">
         <el-form-item label="头像">
           <img :src="formValidate.face" class="face" />
           <el-button
@@ -143,7 +143,7 @@
 
     <el-dialog v-model="picModelFlag" width="1200px">
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         @callback="callbackSelected"
         :isComponent="true"
         :initialize="picModelFlag"
@@ -153,152 +153,156 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick, onMounted } from "vue";
 import * as API_Member from "@/api/member.js";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import multipleMap from "@/components/map/multiple-map";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { customRouterPush } from "@/utils/filters";
+import { md5 } from "@/utils/md5.js";
 
-export default {
-  name: "memberRecycle",
-  components: {
-    ossManage,
-    multipleMap,
-  },
-  data() {
-    return {
-      selectedMember: false,
-      descTitle: "",
-      descFlag: false,
-      openSearch: true,
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        order: "desc",
-        id: "",
-        username: "",
-        mobile: "",
-        disabled: "CLOSE",
-      },
-      picModelFlag: false,
-      formValidate: {},
-      ruleValidate: {},
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    callback(val) {
-      this.$emit("callback", val);
-    },
-    init() {
-      this.getData();
-    },
-    changePage() {
-      this.getData();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getData();
-    },
-    editPerm(val) {
-      this.descTitle = `查看用户 ${val.username}`;
-      this.descFlag = true;
-      this.getMemberInfo(val.id);
-    },
-    getMemberInfo(id) {
-      API_Member.getMemberInfoData(id).then((res) => {
-        if (res.result) {
-          this.formValidate = res.result;
-        }
-      });
-    },
-    getData() {
-      this.loading = true;
-      API_Member.getMemberListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    openPicSelector() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      this.formValidate.face = val.url;
-    },
-    selectedRegion(val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-        const ids = val.data.map((item) => item.id).join(",");
-        this.formValidate.region = paths;
-        this.formValidate.regionId = ids;
-      } else {
-        this.formValidate.region = val.data.addr;
-        this.formValidate.regionId = val.data.addrId;
+defineOptions({ name: "memberRecycle" });
+
+const emit = defineEmits(["callback"]);
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+// 模板编辑弹窗 el-form 的 ref（原 ref="formValidate"，与 data 同名会互相覆盖，改名为 formValidateRef）
+const formValidateRef = ref(null);
+// 模板 ossManage 组件的 ref（原 ref="ossManage"，与组件 import 同名会冲突，改名为 ossManageRef）
+const ossManageRef = ref(null);
+
+const selectedMember = ref(false);
+const descTitle = ref("");
+const descFlag = ref(false);
+const openSearch = ref(true);
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  order: "desc",
+  id: "",
+  username: "",
+  mobile: "",
+  disabled: "CLOSE",
+});
+const picModelFlag = ref(false);
+const formValidate = ref({});
+const ruleValidate = ref({});
+const data = ref([]);
+const total = ref(0);
+
+function callback(val) {
+  emit("callback", val);
+}
+function init() {
+  getData();
+}
+function changePage() {
+  getData();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getData();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getData();
+}
+function editPerm(val) {
+  descTitle.value = `查看用户 ${val.username}`;
+  descFlag.value = true;
+  getMemberInfo(val.id);
+}
+function getMemberInfo(id) {
+  API_Member.getMemberInfoData(id).then((res) => {
+    if (res.result) {
+      formValidate.value = res.result;
+    }
+  });
+}
+function getData() {
+  loading.value = true;
+  API_Member.getMemberListData(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function openPicSelector() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  formValidate.value.face = val.url;
+}
+function selectedRegion(val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+    const ids = val.data.map((item) => item.id).join(",");
+    formValidate.value.region = paths;
+    formValidate.value.regionId = ids;
+  } else {
+    formValidate.value.region = val.data.addr;
+    formValidate.value.regionId = val.data.addrId;
+  }
+}
+function detail(row) {
+  customRouterPush({ name: "member-detail", query: { id: row.id } });
+}
+function enable(v) {
+  let params = {
+    memberIds: [v.id],
+    disabled: true,
+  };
+  ElMessageBox.confirm("确定启用此会员？", "提示", { type: "warning" }).then(() => {
+    API_Member.updateMemberStatus(params).then((res) => {
+      if (res.success) {
+        ElMessage.success("启用成功");
+        getData();
       }
-    },
-    detail(row) {
-      customRouterPush({ name: "member-detail", query: { id: row.id } });
-    },
-    enable(v) {
-      let params = {
-        memberIds: [v.id],
-        disabled: true,
-      };
-      ElMessageBox.confirm("确定启用此会员？", "提示", { type: "warning" }).then(() => {
-        API_Member.updateMemberStatus(params).then((res) => {
-          if (res.success) {
-            ElMessage.success("启用成功");
-            this.getData();
-          }
-        });
-      }).catch(() => {});
-    },
-    handleSubmitModal() {
-      const { nickName, sex, username, face, newPassword, id, regionId, region } = this.formValidate;
-      let time = new Date(this.formValidate.birthday);
-      let birthday = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
-      let submit = {
-        regionId: regionId,
-        region: region,
-        nickName,
-        sex,
-        birthday,
-        face: face || "",
-        id,
-      };
-      if (newPassword) {
-        submit.password = this.md5(newPassword);
-      }
-      API_Member.updateMember(submit).then((res) => {
-        if (res.result) {
-          ElMessage.success("修改成功！");
-          this.descFlag = false;
-          this.init();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    });
+  }).catch(() => {});
+}
+function handleSubmitModal() {
+  const { nickName, sex, username, face, newPassword, id, regionId, region } = formValidate.value;
+  let time = new Date(formValidate.value.birthday);
+  let birthday = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
+  let submit = {
+    regionId: regionId,
+    region: region,
+    nickName,
+    sex,
+    birthday,
+    face: face || "",
+    id,
+  };
+  if (newPassword) {
+    // 原 this.md5 为 main.js 注册的全局属性，改为具名导入（同 login.vue / userManage.vue）
+    submit.password = md5(newPassword);
+  }
+  API_Member.updateMember(submit).then((res) => {
+    if (res.result) {
+      ElMessage.success("修改成功！");
+      descFlag.value = false;
+      init();
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .face {
diff --git a/manager/src/views/member/message-manage/weChatMessageManager.vue b/manager/src/views/member/message-manage/weChatMessageManager.vue
index 995981652..84ddb32be 100644
--- a/manager/src/views/member/message-manage/weChatMessageManager.vue
+++ b/manager/src/views/member/message-manage/weChatMessageManager.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-dialog v-model="wechatModal" title="微信设置" width="530px">
-      <el-form ref="wechatFormData" :model="wechatFormData" label-width="100px">
+      <el-form ref="wechatFormRef" :model="wechatFormData" label-width="100px">
         <el-form-item v-if="tab === 'WECHAT'" label="模板名称">
           <el-input v-model="wechatFormData.name" maxlength="9" disabled />
         </el-form-item>
@@ -105,171 +105,169 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import {
   wechatMessageSync,
-  getWechatMessagePage,
+  getWechatMessagePage as fetchWechatMessagePage,
   editWechatMessageTemplate,
   delWechatMessageTemplate,
   wechatMPMessageSync,
-  getWechatMPMessagePage,
+  getWechatMPMessagePage as fetchWechatMPMessagePage,
   editWechatMPMessageTemplate,
   delWechatMPMessageTemplate,
 } from "@/api/setting";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  title: "wechat-message-manage",
-  data() {
-    return {
-      wechatModal: false,
-      wechatFormData: {},
-      wechatMPFormData: {},
-      tab: "WECHAT",
-      searchForm: { type: "WECHAT" },
-      loading: true,
-      id: "",
-      weChatSearchForm: { pageNumber: 1, pageSize: 20 },
-      weChatMPSearchForm: { pageNumber: 1, pageSize: 20 },
-      weChatData: [],
-      weChatMPData: [],
-      weChatTotal: 0,
-      weChatMPTotal: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.type = this.tab;
-      if (this.tab === "WECHAT") {
-        this.weChatSearchForm.pageNumber = v;
-        this.getWechatMessagePage();
-      } else {
-        this.weChatMPSearchForm.pageNumber = v;
-        this.getWechatMPMessagePage();
-      }
-    },
-    changePageSize(v) {
-      this.searchForm.type = this.tab;
-      if (this.tab === "WECHAT") {
-        this.weChatSearchForm.pageSize = v;
-        this.getWechatMessagePage();
-      } else {
-        this.weChatMPSearchForm.pageSize = v;
-        this.getWechatMPMessagePage();
-      }
-    },
-    wechatSettingAlert(v) {
-      this.wechatFormData = v;
-      this.id = v.id;
-      this.wechatModal = true;
-    },
-    weChatSync(mp) {
-      ElMessageBox.confirm("确认要初始化微信小程序消息订阅?", "提示", { type: "warning" }).then(() => {
-        if (mp === "mp") {
-          wechatMPMessageSync().then((res) => {
-            if (res.success) {
-              ElMessage.success("微信小程序消息订阅初始化");
-              this.getWechatMPMessagePage();
-            }
-          });
-        } else {
-          wechatMessageSync().then((res) => {
-            if (res.success) {
-              ElMessage.success("微信消息模板初始化成功");
-              this.getWechatMessagePage();
-            }
-          });
-        }
-      }).catch(() => {});
-    },
-    wechatFormDataEdit() {
-      this.$refs.wechatFormData.validate((valid) => {
-        if (valid) {
-          if (!this.wechatFormData.updateTime) {
-            this.wechatFormData.updateTime = "";
-          }
-          editWechatMessageTemplate(this.id, this.wechatFormData).then((res) => {
-            if (res.message === "success") {
-              ElMessage.success("微信模板修改成功");
-              this.wechatModal = false;
-              this.getWechatMessagePage();
-            }
-          });
-        }
-      });
-    },
-    wechatMPFormDataEdit() {
-      this.$refs.wechatFormData.validate((valid) => {
-        if (valid) {
-          editWechatMPMessageTemplate(this.id, this.wechatMPFormData).then((res) => {
-            if (res.message === "success") {
-              ElMessage.success("微信消息订阅模板修改成功");
-              this.wechatModal = false;
-              this.getWechatMPMessagePage();
-            }
-          });
-        }
-      });
-    },
-    delWeChat(v) {
-      ElMessageBox.confirm("确定删除此模板?", "提示", { type: "warning" }).then(() => {
-        if (this.tab === "WECHAT") {
-          delWechatMessageTemplate(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("微信模板删除成功");
-              this.getWechatMessagePage();
-            }
-          });
-        } else {
-          delWechatMPMessageTemplate(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("微信消息订阅删除成功");
-              this.getWechatMPMessagePage();
-            }
-          });
-        }
-      }).catch(() => {});
-    },
-    getDataList() {
-      this.getWechatMessagePage();
-    },
-    getWechatMessagePage() {
-      this.loading = true;
-      getWechatMessagePage(this.weChatSearchForm).then((res) => {
-        this.loading = false;
+defineOptions({ title: "wechat-message-manage" });
+
+const wechatFormRef = ref(null);
+
+const wechatModal = ref(false);
+const wechatFormData = ref({});
+const wechatMPFormData = ref({});
+const tab = ref("WECHAT");
+const searchForm = reactive({ type: "WECHAT" });
+const loading = ref(true);
+const id = ref("");
+const weChatSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
+const weChatMPSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
+const weChatData = ref([]);
+const weChatMPData = ref([]);
+const weChatTotal = ref(0);
+const weChatMPTotal = ref(0);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.type = tab.value;
+  if (tab.value === "WECHAT") {
+    weChatSearchForm.pageNumber = v;
+    getWechatMessagePage();
+  } else {
+    weChatMPSearchForm.pageNumber = v;
+    getWechatMPMessagePage();
+  }
+}
+function changePageSize(v) {
+  searchForm.type = tab.value;
+  if (tab.value === "WECHAT") {
+    weChatSearchForm.pageSize = v;
+    getWechatMessagePage();
+  } else {
+    weChatMPSearchForm.pageSize = v;
+    getWechatMPMessagePage();
+  }
+}
+function wechatSettingAlert(v) {
+  wechatFormData.value = v;
+  id.value = v.id;
+  wechatModal.value = true;
+}
+function weChatSync(mp) {
+  ElMessageBox.confirm("确认要初始化微信小程序消息订阅?", "提示", { type: "warning" }).then(() => {
+    if (mp === "mp") {
+      wechatMPMessageSync().then((res) => {
         if (res.success) {
-          this.weChatData = res.result.records;
-          this.weChatTotal = res.result.total;
+          ElMessage.success("微信小程序消息订阅初始化");
+          getWechatMPMessagePage();
         }
       });
-    },
-    getWechatMPMessagePage() {
-      this.loading = true;
-      getWechatMPMessagePage(this.weChatMPSearchForm).then((res) => {
-        this.loading = false;
+    } else {
+      wechatMessageSync().then((res) => {
         if (res.success) {
-          this.weChatMPData = res.result.records;
-          this.weChatMPTotal = res.result.total;
+          ElMessage.success("微信消息模板初始化成功");
+          getWechatMessagePage();
         }
       });
-    },
-    tabPaneChange(tab) {
-      const v = tab.paneName || this.tab;
-      this.searchForm.type = v;
-      if (v === "WECHAT") {
-        this.getWechatMessagePage();
-      } else if (v === "WECHATMP") {
-        this.getWechatMPMessagePage();
+    }
+  }).catch(() => {});
+}
+function wechatFormDataEdit() {
+  wechatFormRef.value.validate((valid) => {
+    if (valid) {
+      if (!wechatFormData.value.updateTime) {
+        wechatFormData.value.updateTime = "";
       }
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      editWechatMessageTemplate(id.value, wechatFormData.value).then((res) => {
+        if (res.message === "success") {
+          ElMessage.success("微信模板修改成功");
+          wechatModal.value = false;
+          getWechatMessagePage();
+        }
+      });
+    }
+  });
+}
+function wechatMPFormDataEdit() {
+  wechatFormRef.value.validate((valid) => {
+    if (valid) {
+      editWechatMPMessageTemplate(id.value, wechatMPFormData.value).then((res) => {
+        if (res.message === "success") {
+          ElMessage.success("微信消息订阅模板修改成功");
+          wechatModal.value = false;
+          getWechatMPMessagePage();
+        }
+      });
+    }
+  });
+}
+function delWeChat(v) {
+  ElMessageBox.confirm("确定删除此模板?", "提示", { type: "warning" }).then(() => {
+    if (tab.value === "WECHAT") {
+      delWechatMessageTemplate(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("微信模板删除成功");
+          getWechatMessagePage();
+        }
+      });
+    } else {
+      delWechatMPMessageTemplate(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("微信消息订阅删除成功");
+          getWechatMPMessagePage();
+        }
+      });
+    }
+  }).catch(() => {});
+}
+function getDataList() {
+  getWechatMessagePage();
+}
+function getWechatMessagePage() {
+  loading.value = true;
+  fetchWechatMessagePage(weChatSearchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      weChatData.value = res.result.records;
+      weChatTotal.value = res.result.total;
+    }
+  });
+}
+function getWechatMPMessagePage() {
+  loading.value = true;
+  fetchWechatMPMessagePage(weChatMPSearchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      weChatMPData.value = res.result.records;
+      weChatMPTotal.value = res.result.total;
+    }
+  });
+}
+function tabPaneChange(tabPane) {
+  const v = tabPane.paneName || tab.value;
+  searchForm.type = v;
+  if (v === "WECHAT") {
+    getWechatMessagePage();
+  } else if (v === "WECHATMP") {
+    getWechatMPMessagePage();
+  }
+}
 </script>
 <style scoped>
 .link-text {
diff --git a/manager/src/views/member/point/point.vue b/manager/src/views/member/point/point.vue
index 061a5a5e1..f1d5724c0 100644
--- a/manager/src/views/member/point/point.vue
+++ b/manager/src/views/member/point/point.vue
@@ -19,7 +19,7 @@
         <el-tab-pane label="积分列表" name="pointList">
           <el-card class="point-content-card">
             <el-form
-              ref="memberSearchForm"
+              ref="memberSearchFormRef"
               :model="memberSearchForm"
               inline
               label-width="70px"
@@ -131,7 +131,7 @@
         <el-tab-pane label="积分增减记录" name="pointChangeRecord">
           <el-card class="point-content-card">
             <el-form
-              ref="searchForm"
+              ref="searchFormRef"
               :model="searchForm"
               inline
               label-width="70px"
@@ -203,132 +203,135 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Member from "@/api/member.js";
 import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "point",
-  data() {
-    return {
-      activeTab: "pointList",
-      loading: true,
-      memberLoading: false,
-      pointsStatistics: {
-        totalPoint: 0,
-        unUsedPoint: 0,
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      memberSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        nickName: "",
-        username: "",
-        disabled: "",
-        minPoint: null,
-        maxPoint: null,
-      },
-      data: [],
-      memberData: [],
-      memberTotal: 0,
-      total: 0,
-    };
-  },
-  methods: {
-    callback(val) {
-      this.$emit("callback", val);
-    },
-    detail(row) {
-      customRouterPush({ name: "member-detail", query: { id: row.id } });
-    },
-    init() {
-      this.getStatistics();
-      this.getMemberList();
-      this.getData();
-    },
-    getStatistics() {
-      API_Member.queryMemberPointsStatistics().then((res) => {
-        if (res && res.success && res.result) {
-          this.pointsStatistics = {
-            totalPoint: res.result.totalPoint || 0,
-            unUsedPoint: res.result.unUsedPoint || 0,
-          };
-        }
-      });
-    },
-    formatNumber(value) {
-      const numericValue = Number(value || 0);
-      if (!Number.isFinite(numericValue)) return "0";
-      return numericValue.toLocaleString();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getData();
-    },
-    handleMemberSearch() {
-      this.memberSearchForm.pageNumber = 1;
-      this.getMemberList();
-    },
-    changeMemberPage(v) {
-      this.memberSearchForm.pageNumber = v;
-      this.getMemberList();
-    },
-    changeMemberPageSize(v) {
-      this.memberSearchForm.pageNumber = 1;
-      this.memberSearchForm.pageSize = v;
-      this.getMemberList();
-    },
-    getMemberList() {
-      this.memberLoading = true;
-      const params = {
-        pageNumber: this.memberSearchForm.pageNumber,
-        pageSize: this.memberSearchForm.pageSize,
-        nickName: this.memberSearchForm.nickName || undefined,
-        username: this.memberSearchForm.username || undefined,
-        disabled: this.memberSearchForm.disabled || undefined,
-        minPoint: this.memberSearchForm.minPoint,
-        maxPoint: this.memberSearchForm.maxPoint,
+defineOptions({ name: "point" });
+
+const emit = defineEmits(["callback"]);
+
+// 模板 ref，script 内未使用
+const memberSearchFormRef = ref(null);
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const activeTab = ref("pointList");
+const loading = ref(true);
+const memberLoading = ref(false);
+const pointsStatistics = ref({
+  totalPoint: 0,
+  unUsedPoint: 0,
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const memberSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  nickName: "",
+  username: "",
+  disabled: "",
+  minPoint: null,
+  maxPoint: null,
+});
+const data = ref([]);
+const memberData = ref([]);
+const memberTotal = ref(0);
+const total = ref(0);
+
+function callback(val) {
+  emit("callback", val);
+}
+function detail(row) {
+  customRouterPush({ name: "member-detail", query: { id: row.id } });
+}
+function init() {
+  getStatistics();
+  getMemberList();
+  getData();
+}
+function getStatistics() {
+  API_Member.queryMemberPointsStatistics().then((res) => {
+    if (res && res.success && res.result) {
+      pointsStatistics.value = {
+        totalPoint: res.result.totalPoint || 0,
+        unUsedPoint: res.result.unUsedPoint || 0,
       };
-      API_Member.getMemberListData(params)
-        .then((res) => {
-          this.memberLoading = false;
-          if (res && res.success && res.result && res.result.records) {
-            this.memberData = res.result.records;
-            this.memberTotal = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.memberLoading = false;
-        });
-    },
-    getData() {
-      this.loading = true;
-      API_Member.getHistoryPointData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+function formatNumber(value) {
+  const numericValue = Number(value || 0);
+  if (!Number.isFinite(numericValue)) return "0";
+  return numericValue.toLocaleString();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getData();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getData();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getData();
+}
+function handleMemberSearch() {
+  memberSearchForm.pageNumber = 1;
+  getMemberList();
+}
+function changeMemberPage(v) {
+  memberSearchForm.pageNumber = v;
+  getMemberList();
+}
+function changeMemberPageSize(v) {
+  memberSearchForm.pageNumber = 1;
+  memberSearchForm.pageSize = v;
+  getMemberList();
+}
+function getMemberList() {
+  memberLoading.value = true;
+  const params = {
+    pageNumber: memberSearchForm.pageNumber,
+    pageSize: memberSearchForm.pageSize,
+    nickName: memberSearchForm.nickName || undefined,
+    username: memberSearchForm.username || undefined,
+    disabled: memberSearchForm.disabled || undefined,
+    minPoint: memberSearchForm.minPoint,
+    maxPoint: memberSearchForm.maxPoint,
+  };
+  API_Member.getMemberListData(params)
+    .then((res) => {
+      memberLoading.value = false;
+      if (res && res.success && res.result && res.result.records) {
+        memberData.value = res.result.records;
+        memberTotal.value = res.result.total;
+      }
+    })
+    .catch(() => {
+      memberLoading.value = false;
+    });
+}
+function getData() {
+  loading.value = true;
+  API_Member.getHistoryPointData(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .points-statistics-card {
diff --git a/manager/src/views/order/after-order/afterSale.vue b/manager/src/views/order/after-order/afterSale.vue
index 0659b5ece..11b442aa6 100644
--- a/manager/src/views/order/after-order/afterSale.vue
+++ b/manager/src/views/order/after-order/afterSale.vue
@@ -55,7 +55,7 @@
     </el-card>
 
     <el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="售后原因" prop="reason">
           <el-input v-model="form.reason" maxlength="20" clearable style="width: 100%" />
         </el-form-item>
@@ -67,116 +67,113 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { ElMessage, ElMessageBox } from "element-plus";
 
-export default {
-  data() {
-    return {
-      activeTab: "RETURN_MONEY",
-      modalVisible: false,
-      modalTitle: "",
-      loading: true,
-      submitLoading: false,
-      form: { reason: "" },
-      formValidate: {
-        reason: [{ required: true, message: "请输入售后原因", trigger: "blur" }],
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        serviceType: "RETURN_MONEY",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    onTabClick(tab) {
-      this.handleClickType(tab.paneName);
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleClickType(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.searchForm.serviceType = v;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getAfterSaleReasonPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    add() {
-      this.form.reason = "";
-      this.modalVisible = true;
-      this.modalTitle = "添加售后原因";
-    },
-    edit(v) {
-      this.form.reason = v.reason;
-      this.form.id = v.id;
-      this.modalVisible = true;
-      this.modalTitle = "修改售后原因";
-    },
-    handleSubmit() {
-      this.form.serviceType = this.searchForm.serviceType;
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalTitle == "添加售后原因") {
-            delete this.form.id;
-            API_Order.addAfterSaleReason(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("添加成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            API_Order.editAfterSaleReason(this.form.id, this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("修改成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    remove(v) {
-      ElMessageBox.confirm("确认要删除此售后原因?", "确认删除", { type: "warning" }).then(() => {
-        API_Order.delAfterSaleReason(v.id).then((res) => {
+const activeTab = ref("RETURN_MONEY");
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const loading = ref(true);
+const submitLoading = ref(false);
+const form = reactive({ reason: "" });
+const formValidate = reactive({
+  reason: [{ required: true, message: "请输入售后原因", trigger: "blur" }],
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  serviceType: "RETURN_MONEY",
+});
+const data = ref([]);
+const total = ref(0);
+
+const formRef = ref(null);
+
+function onTabClick(tab) {
+  handleClickType(tab.paneName);
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleClickType(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  searchForm.serviceType = v;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getAfterSaleReasonPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function add() {
+  form.reason = "";
+  modalVisible.value = true;
+  modalTitle.value = "添加售后原因";
+}
+function edit(v) {
+  form.reason = v.reason;
+  form.id = v.id;
+  modalVisible.value = true;
+  modalTitle.value = "修改售后原因";
+}
+function handleSubmit() {
+  form.serviceType = searchForm.serviceType;
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalTitle.value == "添加售后原因") {
+        delete form.id;
+        API_Order.addAfterSaleReason(form).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            ElMessage.success("售后原因已删除");
-            this.getDataList();
+            ElMessage.success("添加成功");
+            getDataList();
+            modalVisible.value = false;
           }
         });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.getDataList();
-  },
-};
+      } else {
+        API_Order.editAfterSaleReason(form.id, form).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            ElMessage.success("修改成功");
+            getDataList();
+            modalVisible.value = false;
+          }
+        });
+      }
+    }
+  });
+}
+function remove(v) {
+  ElMessageBox.confirm("确认要删除此售后原因?", "确认删除", { type: "warning" }).then(() => {
+    API_Order.delAfterSaleReason(v.id).then((res) => {
+      if (res.success) {
+        ElMessage.success("售后原因已删除");
+        getDataList();
+      }
+    });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  getDataList();
+});
 </script>
 <style scoped>
 .link-text {
diff --git a/manager/src/views/order/after-order/afterSaleOrder.vue b/manager/src/views/order/after-order/afterSaleOrder.vue
index 5784dc2fc..e8ce1a9e5 100644
--- a/manager/src/views/order/after-order/afterSaleOrder.vue
+++ b/manager/src/views/order/after-order/afterSaleOrder.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -167,194 +167,193 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { unitPrice, customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "after-sale-order",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        orderSn: "",
-        memberName: "",
-        serviceStatus: "",
-        storeName: "",
-        sn: "",
-        keywords: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      currentStatus: "",
-      afterSaleNumData: {},
-    };
-  },
-  computed: {
-    serviceStatusWithCount() {
-      return [
-        { title: "全部", value: "" },
-        {
-          title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
-          value: "APPLY",
-        },
-        {
-          title: `通过售后${this.afterSaleNumData.passNum ? "(" + this.afterSaleNumData.passNum + ")" : ""}`,
-          value: "PASS",
-        },
-        {
-          title: `拒绝售后${this.afterSaleNumData.refuseNum ? "(" + this.afterSaleNumData.refuseNum + ")" : ""}`,
-          value: "REFUSE",
-        },
-        {
-          title: `待收货${this.afterSaleNumData.buyerReturnNum ? "(" + this.afterSaleNumData.buyerReturnNum + ")" : ""}`,
-          value: "BUYER_RETURN",
-        },
-        {
-          title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? "(" + this.afterSaleNumData.sellerConfirmNum + ")" : ""}`,
-          value: "SELLER_CONFIRM",
-        },
-        {
-          title: `完成售后${this.afterSaleNumData.completeNum ? "(" + this.afterSaleNumData.completeNum + ")" : ""}`,
-          value: "COMPLETE",
-        },
-        {
-          title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? "(" + this.afterSaleNumData.sellerTerminationNum + ")" : ""}`,
-          value: "SELLER_TERMINATION",
-        },
-        {
-          title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? "(" + this.afterSaleNumData.buyerCancelNum + ")" : ""}`,
-          value: "BUYER_CANCEL",
-        },
-        {
-          title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? "(" + this.afterSaleNumData.waitRefundNum + ")" : ""}`,
-          value: "WAIT_REFUND",
-        },
-      ];
+defineOptions({ name: "after-sale-order" });
+
+// 模板 ref（模板 ref="searchForm" 与 data 同名，改名 searchFormRef 避免互相覆盖）
+const searchFormRef = ref(null);
+// 模板 ref="table"
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  orderSn: "",
+  memberName: "",
+  serviceStatus: "",
+  storeName: "",
+  sn: "",
+  keywords: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const currentStatus = ref("");
+const afterSaleNumData = ref({});
+
+const serviceStatusWithCount = computed(() => {
+  return [
+    { title: "全部", value: "" },
+    {
+      title: `申请售后${afterSaleNumData.value.applyNum ? "(" + afterSaleNumData.value.applyNum + ")" : ""}`,
+      value: "APPLY",
     },
-  },
-  methods: {
-    unitPrice,
-    serviceTypeText(type) {
-      const map = {
-        RETURN_MONEY: "退款",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-      };
-      return map[type] || type || "-";
+    {
+      title: `通过售后${afterSaleNumData.value.passNum ? "(" + afterSaleNumData.value.passNum + ")" : ""}`,
+      value: "PASS",
     },
-    serviceTypeTagType(type) {
-      const map = {
-        RETURN_MONEY: "primary",
-        RETURN_GOODS: "warning",
-        EXCHANGE_GOODS: "success",
-      };
-      return map[type] || "info";
+    {
+      title: `拒绝售后${afterSaleNumData.value.refuseNum ? "(" + afterSaleNumData.value.refuseNum + ")" : ""}`,
+      value: "REFUSE",
     },
-    serviceStatusText(status) {
-      const map = {
-        APPLY: "申请中",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CANCEL: "买家取消售后",
-        COMPLETE: "完成售后",
-        WAIT_REFUND: "待平台退款",
-      };
-      return map[status] || status || "-";
+    {
+      title: `待收货${afterSaleNumData.value.buyerReturnNum ? "(" + afterSaleNumData.value.buyerReturnNum + ")" : ""}`,
+      value: "BUYER_RETURN",
     },
-    serviceStatusTagType(status) {
-      const map = {
-        APPLY: "primary",
-        PASS: "info",
-        REFUSE: "warning",
-        BUYER_RETURN: "warning",
-        SELLER_CONFIRM: "",
-        SELLER_TERMINATION: "success",
-        BUYER_CANCEL: "danger",
-        COMPLETE: "success",
-        WAIT_REFUND: "primary",
-      };
-      return map[status] || "info";
+    {
+      title: `确认收货${afterSaleNumData.value.sellerConfirmNum ? "(" + afterSaleNumData.value.sellerConfirmNum + ")" : ""}`,
+      value: "SELLER_CONFIRM",
     },
-    init() {
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `完成售后${afterSaleNumData.value.completeNum ? "(" + afterSaleNumData.value.completeNum + ")" : ""}`,
+      value: "COMPLETE",
     },
-    changePage() {
-      this.getDataList();
+    {
+      title: `卖家终止售后${afterSaleNumData.value.sellerTerminationNum ? "(" + afterSaleNumData.value.sellerTerminationNum + ")" : ""}`,
+      value: "SELLER_TERMINATION",
     },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
+    {
+      title: `买家取消售后${afterSaleNumData.value.buyerCancelNum ? "(" + afterSaleNumData.value.buyerCancelNum + ")" : ""}`,
+      value: "BUYER_CANCEL",
     },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `等待平台退款${afterSaleNumData.value.waitRefundNum ? "(" + afterSaleNumData.value.waitRefundNum + ")" : ""}`,
+      value: "WAIT_REFUND",
     },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getAfterSaleNumData() {
-      const { serviceStatus, ...searchParams } = this.searchForm;
-      API_Order.getAfterSaleNumVO(searchParams).then((res) => {
-        if (res.success) {
-          this.afterSaleNumData = res.result;
-        }
-      });
-    },
-    detail(v) {
-      const sn = v.sn;
-      customRouterPush({
-        name: "after-order-detail",
-        query: { sn: sn },
-      });
-    },
-    onStatusTabClick(tab) {
-      this.serviceStatusClick(tab.paneName);
-    },
-    serviceStatusClick(item) {
-      this.currentStatus = item;
-      if (item === "" || item === undefined) {
-        delete this.searchForm.serviceStatus;
-      } else {
-        this.searchForm.serviceStatus = item;
-      }
-      this.getDataList();
-      this.getAfterSaleNumData();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  ];
+});
+
+function serviceTypeText(type) {
+  const map = {
+    RETURN_MONEY: "退款",
+    RETURN_GOODS: "退货",
+    EXCHANGE_GOODS: "换货",
+  };
+  return map[type] || type || "-";
+}
+function serviceTypeTagType(type) {
+  const map = {
+    RETURN_MONEY: "primary",
+    RETURN_GOODS: "warning",
+    EXCHANGE_GOODS: "success",
+  };
+  return map[type] || "info";
+}
+function serviceStatusText(status) {
+  const map = {
+    APPLY: "申请中",
+    PASS: "通过售后",
+    REFUSE: "拒绝售后",
+    BUYER_RETURN: "买家退货，待卖家收货",
+    SELLER_CONFIRM: "卖家确认收货",
+    SELLER_TERMINATION: "卖家终止售后",
+    BUYER_CANCEL: "买家取消售后",
+    COMPLETE: "完成售后",
+    WAIT_REFUND: "待平台退款",
+  };
+  return map[status] || status || "-";
+}
+function serviceStatusTagType(status) {
+  const map = {
+    APPLY: "primary",
+    PASS: "info",
+    REFUSE: "warning",
+    BUYER_RETURN: "warning",
+    SELLER_CONFIRM: "",
+    SELLER_TERMINATION: "success",
+    BUYER_CANCEL: "danger",
+    COMPLETE: "success",
+    WAIT_REFUND: "primary",
+  };
+  return map[status] || "info";
+}
+function init() {
+  getDataList();
+  getAfterSaleNumData();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+  getAfterSaleNumData();
+}
+function selectDateRange(v) {
+  if (v) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getAfterSaleOrderPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getAfterSaleNumData() {
+  const { serviceStatus, ...searchParams } = searchForm;
+  API_Order.getAfterSaleNumVO(searchParams).then((res) => {
+    if (res.success) {
+      afterSaleNumData.value = res.result;
+    }
+  });
+}
+function detail(v) {
+  const sn = v.sn;
+  customRouterPush({
+    name: "after-order-detail",
+    query: { sn: sn },
+  });
+}
+function onStatusTabClick(tab) {
+  serviceStatusClick(tab.paneName);
+}
+function serviceStatusClick(item) {
+  currentStatus.value = item;
+  if (item === "" || item === undefined) {
+    delete searchForm.serviceStatus;
+  } else {
+    searchForm.serviceStatus = item;
+  }
+  getDataList();
+  getAfterSaleNumData();
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/order/after-order/afterSaleOrderDetail.vue b/manager/src/views/order/after-order/afterSaleOrderDetail.vue
index 56fa153b4..0a9e113fa 100644
--- a/manager/src/views/order/after-order/afterSaleOrderDetail.vue
+++ b/manager/src/views/order/after-order/afterSaleOrderDetail.vue
@@ -332,185 +332,184 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
 import vueQr from "vue-qr";
 import { ElMessage, ElMessageBox } from "element-plus";
-export default {
-  components: {
-    "vue-qr": vueQr,
-  },
-  name: "orderDetail",
-  data() {
-    return {
-      sn: "", // 订单号
-      logisticsModal: false, //查询物流模态框
 
-      logisticsInfo: {}, //物流信息
-      afterSaleInfo: {}, // 售后信息
-      afterSaleImage: [], //会员申诉图片
-      submitLoading: false, // 添加或编辑提交状态
-      storeMsg: {}, // 商家地址信息
-      //商家处理意见
-      params: {
-        serviceStatus: "PASS",
-        remark: "",
-      },
-      //平台退款
-      refundPriceForm: {
-        remark: "",
-      },
-      afterSaleStatusList: [
-        // 售后状态列表
-        {
-          name: "申请中",
-          status: "APPLY",
-        },
-        {
-          name: "通过售后",
-          status: "PASS",
-        },
-        {
-          name: "拒绝售后",
-          status: "REFUSE",
-        },
-        {
-          name: "买家退货，待卖家收货",
-          status: "BUYER_RETURN",
-        },
-        {
-          name: "卖家确认收货",
-          status: "SELLER_CONFIRM",
-        },
-        {
-          name: "卖家终止售后",
-          status: "SELLER_TERMINATION",
-        },
-        {
-          name: "买家取消售后",
-          status: "BUYER_CANCEL",
-        },
-        {
-          name: "完成售后",
-          status: "COMPLETE",
-        },
-        {
-          name: "待平台退款",
-          status: "WAIT_REFUND",
-        },
-      ],
-    };
+defineOptions({ name: "orderDetail" });
+
+const route = useRoute();
+
+const sn = ref(""); // 订单号
+const logisticsModal = ref(false); //查询物流模态框
+
+const logisticsInfo = ref({}); //物流信息
+const afterSaleInfo = ref({}); // 售后信息
+const afterSaleImage = ref([]); //会员申诉图片
+const submitLoading = ref(false); // 添加或编辑提交状态
+const storeMsg = ref({}); // 商家地址信息
+// 原代码未在 data 声明、直接挂 this 上的字段，补声明避免 ReferenceError
+let loading = false;
+//商家处理意见
+const params = reactive({
+  serviceStatus: "PASS",
+  remark: "",
+});
+//平台退款
+const refundPriceForm = reactive({
+  remark: "",
+});
+const afterSaleStatusList = ref([
+  // 售后状态列表
+  {
+    name: "申请中",
+    status: "APPLY",
   },
-  methods: {
-    // 获取售后详情
-    getDetail() {
-      this.loading = true;
-      API_Order.getAfterSaleOrderDetail(this.sn).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.afterSaleInfo = res.result;
-          this.afterSaleInfo.showDelivery = this.showDelivery(
-            this.afterSaleInfo.serviceStatus
-          );
-          this.afterSaleInfo.serviceName = this.filterOrderStatus(
-            this.afterSaleInfo.serviceStatus
-          );
-          this.afterSaleImage = (res.result.afterSaleImage || "").split(",");
-          //退货地址去掉逗号
-          if (this.afterSaleInfo.mconsigneeAddressPath)
-            this.afterSaleInfo.mconsigneeAddressPath = this.afterSaleInfo.mconsigneeAddressPath.replaceAll(
+  {
+    name: "通过售后",
+    status: "PASS",
+  },
+  {
+    name: "拒绝售后",
+    status: "REFUSE",
+  },
+  {
+    name: "买家退货，待卖家收货",
+    status: "BUYER_RETURN",
+  },
+  {
+    name: "卖家确认收货",
+    status: "SELLER_CONFIRM",
+  },
+  {
+    name: "卖家终止售后",
+    status: "SELLER_TERMINATION",
+  },
+  {
+    name: "买家取消售后",
+    status: "BUYER_CANCEL",
+  },
+  {
+    name: "完成售后",
+    status: "COMPLETE",
+  },
+  {
+    name: "待平台退款",
+    status: "WAIT_REFUND",
+  },
+]);
+
+// 获取售后详情
+function getDetail() {
+  loading = true;
+  API_Order.getAfterSaleOrderDetail(sn.value).then((res) => {
+    loading = false;
+    if (res.success) {
+      afterSaleInfo.value = res.result;
+      afterSaleInfo.value.showDelivery = showDelivery(
+        afterSaleInfo.value.serviceStatus
+      );
+      afterSaleInfo.value.serviceName = filterOrderStatus(
+        afterSaleInfo.value.serviceStatus
+      );
+      afterSaleImage.value = (res.result.afterSaleImage || "").split(",");
+      //退货地址去掉逗号
+      if (afterSaleInfo.value.mconsigneeAddressPath)
+        afterSaleInfo.value.mconsigneeAddressPath = afterSaleInfo.value.mconsigneeAddressPath.replaceAll(
+          ",",
+          " "
+        );
+
+      params.actualRefundPrice = afterSaleInfo.value.applyRefundPrice;
+      // 如果显示物流信息，展示商家地址
+      if (afterSaleInfo.value.showDelivery) {
+        API_Order.storeAddress(sn.value).then((resu) => {
+          if (resu.success) {
+            const obj = resu.result;
+            obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
               ",",
-              " "
+              ""
             );
-
-          this.params.actualRefundPrice = this.afterSaleInfo.applyRefundPrice;
-          // 如果显示物流信息，展示商家地址
-          if (this.afterSaleInfo.showDelivery) {
-            API_Order.storeAddress(this.sn).then((resu) => {
-              if (resu.success) {
-                const obj = resu.result;
-                obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
-                  ",",
-                  ""
-                );
-                this.storeMsg = obj;
-              }
-            });
-          }
-        }
-      });
-    },
-    //平台退款
-    refundPriceSubmit() {
-      if (this.refundPriceForm.remark == "") {
-        ElMessage.error("请输入退款备注");
-        return;
-      }
-      ElMessageBox.confirm("请确认退款？", "确认退款", { type: "warning" }).then(() => {
-        API_Order.refundPrice(this.sn, this.refundPriceForm).then((res) => {
-          if (res.success) {
-            ElMessage.success("收款成功");
-            this.getDetail();
+            storeMsg.value = obj;
           }
         });
-      }).catch(() => {});
-    },
-    //查询物流
-    logisticsSeller() {
-      this.logisticsModal = true;
-      API_Order.getAfterSaleTraces(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.logisticsInfo = res.result;
-        }
-      });
-    },
-    //关闭物流弹出框
-    logisticsClose() {
-      this.logisticsModal = false;
-    },
-    //回复
-    handleSubmit() {
-      if (this.params.remark == "") {
-        ElMessage.error("请输入备注信息");
-        return;
       }
-      if (this.params.actualRefundPrice == "") {
-        ElMessage.error("请输入退款金额");
-        return;
+    }
+  });
+}
+//平台退款
+function refundPriceSubmit() {
+  if (refundPriceForm.remark == "") {
+    ElMessage.error("请输入退款备注");
+    return;
+  }
+  ElMessageBox.confirm("请确认退款？", "确认退款", { type: "warning" }).then(() => {
+    API_Order.refundPrice(sn.value, refundPriceForm).then((res) => {
+      if (res.success) {
+        ElMessage.success("收款成功");
+        getDetail();
       }
-      API_Order.afterSaleSellerReview(this.sn, this.params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          ElMessage.success("审核成功");
-          this.params.remark = "";
-          this.getDetail();
-        }
-      });
-    },
-    filterOrderStatus(status) {
-      // 获取订单状态中文
-      const ob = this.afterSaleStatusList.filter((e) => {
-        return e.status === status;
-      });
-      return ob.length > 0 ? ob[0].name : status;
-    },
-    // 根据订单状态判断是否显示物流信息
-    showDelivery(status) {
-      let flag = false;
-      this.afterSaleStatusList.forEach((e, index) => {
-        // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
-        if (e.status === status && index >= 3 && index !== 6) {
-          flag = true;
-        }
-      });
-      return flag;
-    },
-  },
-  mounted() {
-    this.sn = this.$route.query.sn;
-    this.getDetail();
-  },
-};
+    });
+  }).catch(() => {});
+}
+//查询物流
+function logisticsSeller() {
+  logisticsModal.value = true;
+  API_Order.getAfterSaleTraces(sn.value).then((res) => {
+    if (res.success && res.result != null) {
+      logisticsInfo.value = res.result;
+    }
+  });
+}
+//关闭物流弹出框
+function logisticsClose() {
+  logisticsModal.value = false;
+}
+//回复
+function handleSubmit() {
+  if (params.remark == "") {
+    ElMessage.error("请输入备注信息");
+    return;
+  }
+  if (params.actualRefundPrice == "") {
+    ElMessage.error("请输入退款金额");
+    return;
+  }
+  API_Order.afterSaleSellerReview(sn.value, params).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+      ElMessage.success("审核成功");
+      params.remark = "";
+      getDetail();
+    }
+  });
+}
+function filterOrderStatus(status) {
+  // 获取订单状态中文
+  const ob = afterSaleStatusList.value.filter((e) => {
+    return e.status === status;
+  });
+  return ob.length > 0 ? ob[0].name : status;
+}
+// 根据订单状态判断是否显示物流信息
+function showDelivery(status) {
+  let flag = false;
+  afterSaleStatusList.value.forEach((e, index) => {
+    // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
+    if (e.status === status && index >= 3 && index !== 6) {
+      flag = true;
+    }
+  });
+  return flag;
+}
+
+onMounted(() => {
+  sn.value = route.query.sn;
+  getDetail();
+});
 </script>
 <style lang="scss">
 .main-content {
diff --git a/manager/src/views/order/after-order/orderComplaint.vue b/manager/src/views/order/after-order/orderComplaint.vue
index 84996aad8..7e82595c5 100644
--- a/manager/src/views/order/after-order/orderComplaint.vue
+++ b/manager/src/views/order/after-order/orderComplaint.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -104,97 +104,100 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
 import vueQr from "vue-qr";
 import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "orderComplaint",
-  components: { vueQr },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  watch: {
-    $route() {
-      this.getDataList();
-    },
-  },
-  methods: {
-    complainStatusText(v) {
-      const map = {
-        NEW: "新投诉",
-        CANCEL: "已撤销",
-        WAIT_APPEAL: "待申诉",
-        COMMUNICATION: "对话中",
-        WAIT_ARBITRATION: "等待仲裁",
-        COMPLETE: "已完成",
-      };
-      return map[v] || v || "-";
-    },
-    complainStatusTagType(v) {
-      const map = {
-        NEW: "primary",
-        CANCEL: "info",
-        WAIT_APPEAL: "warning",
-        COMMUNICATION: "warning",
-        WAIT_ARBITRATION: "",
-        COMPLETE: "success",
-      };
-      return map[v] || "info";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getOrderComplain(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    detail(v) {
-      customRouterPush({
-        name: "order-complaint-detail",
-        query: { id: v.id },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "orderComplaint" });
+
+const route = useRoute();
+
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+watch(
+  () => route.query,
+  () => {
+    getDataList();
+  }
+);
+
+function complainStatusText(v) {
+  const map = {
+    NEW: "新投诉",
+    CANCEL: "已撤销",
+    WAIT_APPEAL: "待申诉",
+    COMMUNICATION: "对话中",
+    WAIT_ARBITRATION: "等待仲裁",
+    COMPLETE: "已完成",
+  };
+  return map[v] || v || "-";
+}
+function complainStatusTagType(v) {
+  const map = {
+    NEW: "primary",
+    CANCEL: "info",
+    WAIT_APPEAL: "warning",
+    COMMUNICATION: "warning",
+    WAIT_ARBITRATION: "",
+    COMPLETE: "success",
+  };
+  return map[v] || "info";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getOrderComplain(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function detail(v) {
+  customRouterPush({
+    name: "order-complaint-detail",
+    query: { id: v.id },
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/order/after-order/orderComplaintDetail.vue b/manager/src/views/order/after-order/orderComplaintDetail.vue
index a117c658f..f0c026752 100644
--- a/manager/src/views/order/after-order/orderComplaintDetail.vue
+++ b/manager/src/views/order/after-order/orderComplaintDetail.vue
@@ -203,140 +203,141 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_Order from "@/api/order";
 import { ElMessage } from "element-plus";
 import { unitPrice } from "@/utils/filters";
 
+defineOptions({ name: "orderComplaintDetail" });
+
+const route = useRoute();
+const router = useRouter();
+
 const emptyComplaint = () => ({
   id: "",
   orderComplaintCommunications: [],
 });
 
-export default {
-  name: "orderComplaintDetail",
-  data() {
-    return {
-      loading: false,
-      id: "",
-      complaintInfo: emptyComplaint(),
-      images: [],
-      appealImages: [],
-      submitLoading: false,
-      params: {
-        content: "",
-        complainId: "",
-      },
-      arbitrationParams: {
-        arbitrationResult: "",
-      },
-      arbitrationResultShow: false,
-    };
-  },
-  methods: {
-    unitPrice,
-    complainStatusText(v) {
-      const map = {
-        NEW: "新投诉",
-        CANCEL: "已撤销",
-        WAIT_APPEAL: "待申诉",
-        COMMUNICATION: "对话中",
-        WAIT_ARBITRATION: "等待仲裁",
-        COMPLETE: "已完成",
-      };
-      return map[v] || v || "-";
-    },
-    handleStoreComplaint() {
-      API_Order.storeComplain({
-        complainStatus: "WAIT_APPEAL",
-        complainId: this.complaintInfo.id,
-      }).then((res) => {
-        if (res.success) {
-          ElMessage.success("操作成功");
-          this.getDetail();
-        }
-      });
-    },
-    getDetail() {
-      if (!this.id) return;
-      this.loading = true;
-      API_Order.getOrderComplainDetail(this.id)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.complaintInfo = res.result || emptyComplaint();
-            this.images = (res.result.images || "")
-              .split(",")
-              .map((s) => s.trim())
-              .filter(Boolean);
-            this.appealImages = (res.result.appealImages || "")
-              .split(",")
-              .map((s) => s.trim())
-              .filter(Boolean);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    returnDataList() {
-      this.$router.push({ name: "orderComplaint" });
-    },
-    arbitrationHandle() {
-      this.arbitrationResultShow = true;
-    },
-    arbitrationHandleSubmit() {
-      if (!this.arbitrationParams.arbitrationResult) {
-        ElMessage.error("请填写仲裁内容");
-        return;
+const loading = ref(false);
+const id = ref("");
+const complaintInfo = ref(emptyComplaint());
+const images = ref([]);
+const appealImages = ref([]);
+const submitLoading = ref(false);
+const params = reactive({
+  content: "",
+  complainId: "",
+});
+const arbitrationParams = reactive({
+  arbitrationResult: "",
+});
+const arbitrationResultShow = ref(false);
+
+function complainStatusText(v) {
+  const map = {
+    NEW: "新投诉",
+    CANCEL: "已撤销",
+    WAIT_APPEAL: "待申诉",
+    COMMUNICATION: "对话中",
+    WAIT_ARBITRATION: "等待仲裁",
+    COMPLETE: "已完成",
+  };
+  return map[v] || v || "-";
+}
+function handleStoreComplaint() {
+  API_Order.storeComplain({
+    complainStatus: "WAIT_APPEAL",
+    complainId: complaintInfo.value.id,
+  }).then((res) => {
+    if (res.success) {
+      ElMessage.success("操作成功");
+      getDetail();
+    }
+  });
+}
+function getDetail() {
+  if (!id.value) return;
+  loading.value = true;
+  API_Order.getOrderComplainDetail(id.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        complaintInfo.value = res.result || emptyComplaint();
+        images.value = (res.result.images || "")
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+        appealImages.value = (res.result.appealImages || "")
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
       }
-      this.submitLoading = true;
-      API_Order.orderComplete(this.id, this.arbitrationParams)
-        .then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            ElMessage.success("仲裁成功");
-            this.arbitrationParams.arbitrationResult = "";
-            this.arbitrationResultShow = false;
-            this.getDetail();
-          }
-        })
-        .catch(() => {
-          this.submitLoading = false;
-        });
-    },
-    handleSubmit() {
-      if (!this.params.content) {
-        ElMessage.error("请填写对话内容");
-        return;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function returnDataList() {
+  router.push({ name: "orderComplaint" });
+}
+function arbitrationHandle() {
+  arbitrationResultShow.value = true;
+}
+function arbitrationHandleSubmit() {
+  if (!arbitrationParams.arbitrationResult) {
+    ElMessage.error("请填写仲裁内容");
+    return;
+  }
+  submitLoading.value = true;
+  API_Order.orderComplete(id.value, arbitrationParams)
+    .then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        ElMessage.success("仲裁成功");
+        arbitrationParams.arbitrationResult = "";
+        arbitrationResultShow.value = false;
+        getDetail();
       }
-      this.submitLoading = true;
-      this.params.complainId = this.id;
-      API_Order.addOrderCommunication(this.params)
-        .then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            ElMessage.success("对话成功");
-            this.params.content = "";
-            this.getDetail();
-          }
-        })
-        .catch(() => {
-          this.submitLoading = false;
-        });
-    },
-  },
-  mounted() {
-    this.id = this.$route.query.id;
-    this.getDetail();
-  },
-  watch: {
-    "$route.query.id"(val) {
-      this.id = val;
-      this.getDetail();
-    },
-  },
-};
+    })
+    .catch(() => {
+      submitLoading.value = false;
+    });
+}
+function handleSubmit() {
+  if (!params.content) {
+    ElMessage.error("请填写对话内容");
+    return;
+  }
+  submitLoading.value = true;
+  params.complainId = id.value;
+  API_Order.addOrderCommunication(params)
+    .then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        ElMessage.success("对话成功");
+        params.content = "";
+        getDetail();
+      }
+    })
+    .catch(() => {
+      submitLoading.value = false;
+    });
+}
+
+onMounted(() => {
+  id.value = route.query.id;
+  getDetail();
+});
+
+watch(
+  () => route.query.id,
+  (val) => {
+    id.value = val;
+    getDetail();
+  }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/order/flow/paymentLog.vue b/manager/src/views/order/flow/paymentLog.vue
index b91681d90..476b1db34 100644
--- a/manager/src/views/order/flow/paymentLog.vue
+++ b/manager/src/views/order/flow/paymentLog.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -111,62 +111,60 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
 
-export default {
-  name: "paymentLog",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        sn: "",
-        payStatus: "",
-        startDate: "",
-        endDate: "",
-      },
-      times: [],
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeDate(val) {
-      this.searchForm.startDate = val[0];
-      this.searchForm.endDate = val[1];
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.paymentLog(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "paymentLog" });
+
+const searchFormRef = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  sn: "",
+  payStatus: "",
+  startDate: "",
+  endDate: "",
+});
+const times = ref([]);
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function changeDate(val) {
+  searchForm.startDate = val[0];
+  searchForm.endDate = val[1];
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.paymentLog(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/order/flow/refundLog.vue b/manager/src/views/order/flow/refundLog.vue
index 30aec4652..e25fb40a5 100644
--- a/manager/src/views/order/flow/refundLog.vue
+++ b/manager/src/views/order/flow/refundLog.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -108,71 +108,68 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "refundLog",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        orderSn: "",
-        isRefund: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    unitPrice,
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v && v[0] && v[1]) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.refundLog(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "refundLog" });
+
+const searchFormRef = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  orderSn: "",
+  isRefund: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v && v[0] && v[1]) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.refundLog(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/order/order/fictitiousOrderList.vue b/manager/src/views/order/order/fictitiousOrderList.vue
index 0f83a7940..835eabf4a 100644
--- a/manager/src/views/order/order/fictitiousOrderList.vue
+++ b/manager/src/views/order/order/fictitiousOrderList.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -57,7 +57,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -126,107 +126,106 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "fictitiousOrderList",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "",
-        order: "",
-        startDate: "",
-        endDate: "",
-        orderType: "VIRTUAL",
-        orderSn: "",
-        buyerName: "",
-        orderStatus: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      orderStatus: [
-        { title: "全部", value: "" },
-        { title: "未付款", value: "UNPAID" },
-        { title: "已付款", value: "PAID" },
-        { title: "待核验", value: "TAKE" },
-        { title: "已完成", value: "COMPLETED" },
-        { title: "已关闭", value: "CANCELLED" },
-      ],
-      currentStatus: "",
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSort(e) {
-      this.searchForm.sort = e.prop;
-      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
+defineOptions({ name: "fictitiousOrderList" });
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "",
+  order: "",
+  startDate: "",
+  endDate: "",
+  orderType: "VIRTUAL",
+  orderSn: "",
+  buyerName: "",
+  orderStatus: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const orderStatus = ref([
+  { title: "全部", value: "" },
+  { title: "未付款", value: "UNPAID" },
+  { title: "已付款", value: "PAID" },
+  { title: "待核验", value: "TAKE" },
+  { title: "已完成", value: "COMPLETED" },
+  { title: "已关闭", value: "CANCELLED" },
+]);
+const currentStatus = ref("");
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function changeSort(e) {
+  searchForm.sort = e.prop;
+  searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getOrderList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function confirmPrice(v) {
+  ElMessageBox.confirm("您确定要收款吗？", "确认收款", { type: "warning" }).then(() => {
+    API_Order.orderPay(v.sn).then((res) => {
+      if (res.success) {
+        ElMessage.success("收款成功");
+        getDataList();
       }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getOrderList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    confirmPrice(v) {
-      ElMessageBox.confirm("您确定要收款吗？", "确认收款", { type: "warning" }).then(() => {
-        API_Order.orderPay(v.sn).then((res) => {
-          if (res.success) {
-            ElMessage.success("收款成功");
-            this.getDataList();
-          }
-        });
-      }).catch(() => {});
-    },
-    detail(v) {
-      let sn = v.sn;
-      customRouterPush({
-        name: "order-detail",
-        query: { sn: sn, orderType: v.orderType },
-      });
-    },
-    onStatusTabClick(tab) {
-      const item = tab.paneName;
-      this.currentStatus = item;
-      this.searchForm.orderStatus = item;
-      this.getDataList();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    });
+  }).catch(() => {});
+}
+function detail(v) {
+  let sn = v.sn;
+  customRouterPush({
+    name: "order-detail",
+    query: { sn: sn, orderType: v.orderType },
+  });
+}
+function onStatusTabClick(tab) {
+  const item = tab.paneName;
+  currentStatus.value = item;
+  searchForm.orderStatus = item;
+  getDataList();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/order/order/orderDetail.vue b/manager/src/views/order/order/orderDetail.vue
index 319a71bb0..c5b853572 100644
--- a/manager/src/views/order/order/orderDetail.vue
+++ b/manager/src/views/order/order/orderDetail.vue
@@ -357,7 +357,7 @@
     </div>
 
     <el-dialog v-model="modal" title="修改金额" width="530px">
-      <el-form ref="modifyPriceForm" :model="modifyPriceForm" label-width="70px" :rules="modifyPriceValidate" @submit.prevent>
+      <el-form ref="modifyPriceFormRef" :model="modifyPriceForm" label-width="70px" :rules="modifyPriceValidate" @submit.prevent>
         <el-form-item label="订单金额" prop="price">
           <el-input-number v-model="modifyPriceForm.price" :min="0" :max="999999" style="width: 120px" />
           <span class="ml_10">元</span>
@@ -370,7 +370,7 @@
     </el-dialog>
 
     <el-dialog v-model="orderCancelModal" title="订单取消" width="530px">
-      <el-form ref="orderCancelForm" :model="orderCancelForm" label-width="100px" :rules="orderCancelValidate">
+      <el-form ref="orderCancelFormRef" :model="orderCancelForm" label-width="100px" :rules="orderCancelValidate">
         <el-form-item label="取消原因" prop="reason">
           <el-input v-model="orderCancelForm.reason" type="textarea" :rows="3" placeholder="请输入取消原因" />
         </el-form-item>
@@ -382,7 +382,7 @@
     </el-dialog>
 
     <el-dialog v-model="addressModal" title="修改收件信息" width="530px">
-      <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressRule">
+      <el-form ref="addressFormRef" :model="addressForm" label-width="100px" :rules="addressRule">
         <el-form-item label="收件人" prop="consigneeName">
           <el-input v-model="addressForm.consigneeName" maxlength="20" />
         </el-form-item>
@@ -518,7 +518,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_Order from "@/api/order";
 import { platformRefund, noShowRefund, getAppointmentOrderDetail } from "@/api/appointment";
 import * as RegExp from "@/libs/RegExp.js";
@@ -529,457 +531,456 @@ import { printElement } from "@/utils/print";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unitPrice, clientTypeWay } from "@/utils/filters";
 import { formatCardKeyStatus } from "@/constants/cardKey";
-export default {
-  name: "orderList",
-  components: {
 
-    multipleMap,
-    "vue-qr": vueQr,
+defineOptions({ name: "orderList" });
+
+const route = useRoute();
+const router = useRouter();
+
+// 模板 ref（与表单 data 同名的改为 xxxRef，避免互相覆盖）
+const modifyPriceFormRef = ref(null);
+const orderCancelFormRef = ref(null);
+const addressFormRef = ref(null);
+const map = ref(null);
+
+const typeList = ref([]);
+const showPrices = ref(false);
+const printHiddenFlag = ref(false);//隐藏信息
+const loading = ref(false); //加载表格
+
+const addr = ref(""); //地区
+let regionId = ""; // 原代码未在 data 声明直接挂 this 的历史遗留字段
+
+
+const orderLogInfo = ref([]); //订单日志数据
+const orderLogModal = ref(false); //弹出调整价格框
+const checkedLogistics = ref([]); //选中的物流公司集合
+const allowOperation = ref({}); //订单可才做选项
+const sn = ref(""); //订单编号
+const orderInfo = ref({
+  order: {
+    priceDetailDTO: {},
   },
-  computed: {
-    /** 电子卡券订单：无物流区，卡密来自 orderItems[].cardKeys */
-    isECouponOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      return t === "E_COUPON" || this.$route.query.orderType === "E_COUPON";
+});
+const appointmentExt = ref({});
+const modal = ref(false); //弹出调整价格框
+const searchForm = reactive({
+  pageNumber: 1, // 当前页数
+  pageSize: 100, // 页面大小
+  orderSn: "", //订单sn
+});
+//调整价格表单
+const modifyPriceForm = reactive({
+  price: 0,
+});
+//订单取消表单
+const orderCancelForm = reactive({
+  reason: "",
+});
+//弹出订单取消框
+const orderCancelModal = ref(false);
+//订单发货
+const orderDeliveryForm = reactive({
+  logisticsNo: "", //发货单号
+  logisticsId: "", //物流公司
+});
+//验证要调整的订单金额
+const modifyPriceValidate = {
+  reason: [
+    { required: true, message: "请输入大于0小于99999的合法金额" },
+    {
+      pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
+      message: "请输入大于0小于9999的合法金额",
+      trigger: "change",
     },
-    isVirtualOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      return t === "VIRTUAL" || this.$route.query.orderType === "VIRTUAL";
-    },
-    isNonPhysicalOrder() {
-      return this.isVirtualOrder || this.isECouponOrder || this.isAppointmentOrder;
-    },
-    isAppointmentOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      return t === "APPOINTMENT" || this.$route.query.orderType === "APPOINTMENT";
-    },
-    appointmentSlotText() {
-      const v = this.appointmentExt || {};
-      if (!v.slotDate) return "";
-      const date = String(v.slotDate).slice(0, 10);
-      const slot = v.slotStartTime && v.slotEndTime ? `${v.slotStartTime}-${v.slotEndTime}` : "";
-      return [date, slot].filter(Boolean).join(" ");
-    },
-    appointmentFormGroups() {
-      return this.parseFormAnswerGroups(this.appointmentExt?.formAnswerJson);
-    },
-    canPlatformRefund() {
-      const order = this.orderInfo?.order;
-      return order && order.payStatus === "PAID" && order.orderStatus !== "CANCELLED";
-    },
-    canNoShowRefund() {
-      return this.canPlatformRefund;
-    },
-    ecouponCardKeyDelivered() {
-      return (this.data || []).some((item) => item.cardKeyDelivered);
-    },
-    ecouponCardKeyRows() {
-      const rows = [];
-      (this.data || []).forEach((item) => {
-        (item.cardKeys || []).forEach((ck) => {
-          rows.push({ ...ck });
-        });
-      });
-      return rows;
-    },
-  },
-  data () {
-    return {
-      typeList: [],
-      showPrices: false,
-      printHiddenFlag: false,//隐藏信息
-      loading: false, //加载表格
-
-      addr: "", //地区
-
-
-      orderLogInfo: [], //订单日志数据
-      orderLogModal: false, //弹出调整价格框
-      checkedLogistics: [], //选中的物流公司集合
-      allowOperation: {}, //订单可才做选项
-      sn: "", //订单编号
-      orderInfo: {
-        order: {
-          priceDetailDTO: {},
-        },
-      },
-      appointmentExt: {},
-      modal: false, //弹出调整价格框
-      searchForm: {
-        pageNumber: 1, // 当前页数
-        pageSize: 100, // 页面大小
-        orderSn: "", //订单sn
-      },
-      //调整价格表单
-      modifyPriceForm: {
-        price: 0,
-      },
-      //订单取消表单
-      orderCancelForm: {
-        reason: "",
-      },
-      //弹出订单取消框
-      orderCancelModal: false,
-      //订单发货
-      orderDeliveryForm: {
-        logisticsNo: "", //发货单号
-        logisticsId: "", //物流公司
-      },
-      //验证要调整的订单金额
-      modifyPriceValidate: {
-        reason: [
-          { required: true, message: "请输入大于0小于99999的合法金额" },
-          {
-            pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
-            message: "请输入大于0小于9999的合法金额",
-            trigger: "change",
-          },
-        ],
-      },
-
-      //验证取消订单原因
-      orderCancelValidate: {
-        reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
-      },
-      addressModal: false, //弹出修改收件信息框
-      printModal: false,
-      platformRefundModal: false,
-      noShowRefundModal: false,
-      refundLoading: false,
-      platformRefundForm: {
-        refundType: "UNSERVED",
-        refundAmount: 0,
-        reason: "",
-      },
-      noShowRefundForm: {
-        refundAmount: 0,
-        reason: "",
-      },
-      //收件地址表单
-      addressForm: {
-        consigneeName: "",
-        consigneeMobile: "",
-        consigneeDetail: "",
-        consigneeAddressPath: "",
-        consigneeAddressIdPath: "",
-      },
-      orderDeliverFormValidate: {
-        logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
-        logisticsId: [{ required: true, message: "请选择物流公司", trigger: "blur" }],
-      },
-      addressRule: {
-        consigneeName: [
-          { required: true, message: "收货人姓名不能为空", trigger: "blur" },
-        ],
-        consigneeMobile: [
-          { required: true, message: "联系方式不能为空", trigger: "blur" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-        consigneeDetail: [
-          { required: true, message: "详细地址不能为空", trigger: "blur" },
-        ],
-      },
-
-      data: [], // 表单数据
-    };
-  },
-  watch: {
-    $route (to, from) {
-      this.$router.go(0);
-    },
-  },
-  methods: {
-    unitPrice,
-    clientTypeWay,
-    formatCardKeyStatus,
-    copyCardKey(row) {
-      const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(() => {
-          ElMessage.success("已复制到剪贴板");
-        });
-      } else {
-        const ta = document.createElement("textarea");
-        ta.value = text;
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand("copy");
-        document.body.removeChild(ta);
-        ElMessage.success("已复制到剪贴板");
-      }
-    },
-    getPromotionText(row) {
-      let resultText = "";
-      if (row && row.promotionType) {
-        const type = row.promotionType.split(",");
-        if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
-        if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
-        if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
-        if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
-        if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
-      }
-      return resultText === "" ? "未参与" : resultText;
-    },
-    gotoHomes () {
-      return false
-    },
-
-    //确认收款
-    confirmPrice () {
-      ElMessageBox.confirm(
-        "您确定要收款吗？线下收款涉及库存变更，需异步进行，等待约一分钟刷新列表查看",
-        "提示",
-        { type: "warning" }
-      ).then(() => {
-        API_Order.orderPay(this.sn).then((res) => {
-          if (res.success) {
-            ElMessage.success("收款成功");
-            this.getDataList();
-          }
-        });
-      }).catch(() => {});
-    },
-    getOrderPrice () {
-      if (this.showPrices) {
-        this.showPrices = false
-      } else if (!this.showPrices) {
-        this.showPrices = true
-      }
-    },
-    getContentPrice () {
-      for (let i = 0; i < this.typeList.length; i++) {
-        for (let j = i + 1; j < this.typeList.length; j++) {
-          if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
-            this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
-            this.typeList.splice(j, 1)
-          }
-        }
-      }
-      if (this.typeList.length >= 3) {
-        this.getContentPrice()
-      }
-    },
-    // 获取订单详情
-    getDataList () {
-      this.loading = true;
-      API_Order.orderDetail(this.sn).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.orderInfo = res.result;
-          this.allowOperation = res.result.allowOperationVO;
-          this.data = res.result.orderItems;
-          this.typeList = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
-          this.getContentPrice()
-          this.getOrderPrice()
-          if (this.isAppointmentOrder) {
-            this.loadAppointmentExt();
-          }
-        }
-      });
-    },
-    loadAppointmentExt() {
-      getAppointmentOrderDetail(this.sn)
-        .then((res) => {
-          if (res.success) {
-            this.appointmentExt = res.result || {};
-          }
-        })
-        .catch(() => {
-          this.appointmentExt = {};
-        });
-    },
-    parseFormAnswerGroups(formAnswerJson) {
-      if (!formAnswerJson) return [];
-      let data = formAnswerJson;
-      if (typeof data === "string") {
-        try {
-          data = JSON.parse(data);
-        } catch (e) {
-          return [];
-        }
-      }
-      const fields = Array.isArray(data?.fields) ? data.fields : [];
-      const answers = Array.isArray(data?.answers) ? data.answers : [];
-      return answers
-        .map((group) => {
-          const map = group && typeof group === "object" && !Array.isArray(group) ? group : {};
-          const source = fields.length
-            ? fields
-            : Object.keys(map).map((key) => ({ fieldKey: key, fieldLabel: key }));
-          return source
-            .map((field) => ({
-              fieldKey: field.fieldKey,
-              fieldLabel: field.fieldLabel || field.fieldKey,
-              value: map[field.fieldKey] ?? "",
-            }))
-            .filter((row) => row.value !== "" && row.value != null);
-        })
-        .filter((rows) => rows.length);
-    },
-    modifyPrice () {
-      //默认要修改的金额为订单总金额
-      this.modifyPriceForm.price = this.orderInfo.order.flowPrice;
-      this.modal = true;
-    },
-    //修改订单金额提交
-    modifyPriceSubmit () {
-      this.$refs.modifyPriceForm.validate((valid) => {
-        if (valid) {
-          API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
-            if (res.success) {
-              ElMessage.success("修改订单金额成功");
-              this.modal = false;
-              this.getDataList();
-            }
-          });
-        }
-      });
-    },
-    // 选中的地址
-    selectedRegion (val) {
-      if(val.type === 'select'){
-        const paths = val.data.map(item => item.name).join(',')
-        const ids = val.data.map(item => item.id).join(',')
-        this.addr = paths;
-        this.regionId = ids;
-      }
-      else{
-        this.addr = val.data.addr;
-        this.regionId = val.data.addrId;
-      }
-
-    },
-    //订单取消
-    orderCancel () {
-      this.orderCancelModal = true;
-    },
-    //订单取消提交
-    orderCancelSubmit () {
-      this.$refs.orderCancelForm.validate((valid) => {
-        if (valid) {
-          API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => {
-            if (res.success) {
-              ElMessage.success("取消成功");
-              this.getDataList();
-            }
-            this.orderCancelModal = false;
-          });
-        }
-      });
-    },
-    openPlatformRefund() {
-      this.platformRefundForm = {
-        refundType: "UNSERVED",
-        refundAmount: this.orderInfo?.order?.flowPrice || 0,
-        reason: "",
-      };
-      this.platformRefundModal = true;
-    },
-    submitPlatformRefund() {
-      if (!this.platformRefundForm.reason) {
-        ElMessage.warning("请填写退款原因");
-        return;
-      }
-      this.refundLoading = true;
-      platformRefund(this.sn, this.platformRefundForm)
-        .then((res) => {
-          if (res.success) {
-            ElMessage.success("退款成功");
-            this.platformRefundModal = false;
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.refundLoading = false;
-        });
-    },
-    openNoShowRefund() {
-      this.noShowRefundForm = {
-        refundAmount: this.orderInfo?.order?.flowPrice || 0,
-        reason: "",
-      };
-      this.noShowRefundModal = true;
-    },
-    submitNoShowRefund() {
-      if (!this.noShowRefundForm.reason) {
-        ElMessage.warning("请填写退款原因");
-        return;
-      }
-      this.refundLoading = true;
-      noShowRefund(this.sn, this.noShowRefundForm)
-        .then((res) => {
-          if (res.success) {
-            ElMessage.success("退款成功");
-            this.noShowRefundModal = false;
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.refundLoading = false;
-        });
-    },
-    //订单日志
-    orderLog () {
-      this.orderLogModal = true;
-    },
-    //订单日志取消
-    handelCancel () {
-      this.orderLogModal = false;
-    },
-    //打印发货单
-    printOrder () {
-      this.printModal = true;
-    },
-    printHiddenInfo () {
-      this.printHiddenFlag = !this.printHiddenFlag;
-    },
-    printCancel () {
-      // this.printHiddenFlag = false;
-    },
-    handlePrintInvoice () {
-      printElement("printInfo", "发货单");
-    },
-    //弹出修改收货地址框
-    editAddress () {
-      this.addressModal = true;
-      this.addr = this.orderInfo.order.consigneeAddressPath;
-      this.regionId = this.orderInfo.order.consigneeAddressIdPath;
-      this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
-      this.addressForm.consigneeMobile = this.orderInfo.order.consigneeMobile;
-      this.addressForm.consigneeDetail = this.orderInfo.order.consigneeDetail;
-      this.addressForm.consigneeAddressPath = this.orderInfo.order.consigneeAddressPath;
-      this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
-    },
-    //修改收货地址
-    editAddressSubmit () {
-      if (this.regionId == "") {
-        ElMessage.error("请选择地址");
-        return;
-      }
-      this.addressForm.consigneeAddressPath = this.addr;
-      this.addressForm.consigneeAddressIdPath = this.regionId;
-      this.$refs.addressForm.validate((valid) => {
-        if (valid) {
-          API_Order.editOrderConsignee(this.sn, this.addressForm).then((res) => {
-            if (res.success) {
-              ElMessage.success("收货地址修改成功");
-              this.addressModal = false;
-              this.getDataList();
-            }
-          });
-        }
-      });
-    },
-  },
-  mounted () {
-    this.sn = this.$route.query.sn;
-    this.getDataList();
-  },
+  ],
 };
+
+//验证取消订单原因
+const orderCancelValidate = {
+  reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
+};
+const addressModal = ref(false); //弹出修改收件信息框
+const printModal = ref(false);
+const platformRefundModal = ref(false);
+const noShowRefundModal = ref(false);
+const refundLoading = ref(false);
+const platformRefundForm = ref({
+  refundType: "UNSERVED",
+  refundAmount: 0,
+  reason: "",
+});
+const noShowRefundForm = ref({
+  refundAmount: 0,
+  reason: "",
+});
+//收件地址表单
+const addressForm = reactive({
+  consigneeName: "",
+  consigneeMobile: "",
+  consigneeDetail: "",
+  consigneeAddressPath: "",
+  consigneeAddressIdPath: "",
+});
+const orderDeliverFormValidate = {
+  logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
+  logisticsId: [{ required: true, message: "请选择物流公司", trigger: "blur" }],
+};
+const addressRule = {
+  consigneeName: [
+    { required: true, message: "收货人姓名不能为空", trigger: "blur" },
+  ],
+  consigneeMobile: [
+    { required: true, message: "联系方式不能为空", trigger: "blur" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
+    },
+  ],
+  consigneeDetail: [
+    { required: true, message: "详细地址不能为空", trigger: "blur" },
+  ],
+};
+
+const data = ref([]); // 表单数据
+
+/** 电子卡券订单：无物流区，卡密来自 orderItems[].cardKeys */
+const isECouponOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  return t === "E_COUPON" || route.query.orderType === "E_COUPON";
+});
+const isVirtualOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  return t === "VIRTUAL" || route.query.orderType === "VIRTUAL";
+});
+const isNonPhysicalOrder = computed(() => {
+  return isVirtualOrder.value || isECouponOrder.value || isAppointmentOrder.value;
+});
+const isAppointmentOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  return t === "APPOINTMENT" || route.query.orderType === "APPOINTMENT";
+});
+const appointmentSlotText = computed(() => {
+  const v = appointmentExt.value || {};
+  if (!v.slotDate) return "";
+  const date = String(v.slotDate).slice(0, 10);
+  const slot = v.slotStartTime && v.slotEndTime ? `${v.slotStartTime}-${v.slotEndTime}` : "";
+  return [date, slot].filter(Boolean).join(" ");
+});
+const appointmentFormGroups = computed(() => {
+  return parseFormAnswerGroups(appointmentExt.value?.formAnswerJson);
+});
+const canPlatformRefund = computed(() => {
+  const order = orderInfo.value?.order;
+  return order && order.payStatus === "PAID" && order.orderStatus !== "CANCELLED";
+});
+const canNoShowRefund = computed(() => {
+  return canPlatformRefund.value;
+});
+const ecouponCardKeyDelivered = computed(() => {
+  return (data.value || []).some((item) => item.cardKeyDelivered);
+});
+const ecouponCardKeyRows = computed(() => {
+  const rows = [];
+  (data.value || []).forEach((item) => {
+    (item.cardKeys || []).forEach((ck) => {
+      rows.push({ ...ck });
+    });
+  });
+  return rows;
+});
+
+watch(
+  () => route.query,
+  (to, from) => {
+    router.go(0);
+  }
+);
+
+onMounted(() => {
+  sn.value = route.query.sn;
+  getDataList();
+});
+
+function copyCardKey(row) {
+  const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      ElMessage.success("已复制到剪贴板");
+    });
+  } else {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    document.body.removeChild(ta);
+    ElMessage.success("已复制到剪贴板");
+  }
+}
+function getPromotionText(row) {
+  let resultText = "";
+  if (row && row.promotionType) {
+    const type = row.promotionType.split(",");
+    if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
+    if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
+    if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
+    if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
+    if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
+  }
+  return resultText === "" ? "未参与" : resultText;
+}
+function gotoHomes () {
+  return false
+}
+
+//确认收款
+function confirmPrice () {
+  ElMessageBox.confirm(
+    "您确定要收款吗？线下收款涉及库存变更，需异步进行，等待约一分钟刷新列表查看",
+    "提示",
+    { type: "warning" }
+  ).then(() => {
+    API_Order.orderPay(sn.value).then((res) => {
+      if (res.success) {
+        ElMessage.success("收款成功");
+        getDataList();
+      }
+    });
+  }).catch(() => {});
+}
+function getOrderPrice () {
+  if (showPrices.value) {
+    showPrices.value = false
+  } else if (!showPrices.value) {
+    showPrices.value = true
+  }
+}
+function getContentPrice () {
+  for (let i = 0; i < typeList.value.length; i++) {
+    for (let j = i + 1; j < typeList.value.length; j++) {
+      if (typeList.value[i].promotionId === typeList.value[j].promotionId) {
+        typeList.value[i].discountPrice = typeList.value[i].discountPrice + typeList.value[j].discountPrice
+        typeList.value.splice(j, 1)
+      }
+    }
+  }
+  if (typeList.value.length >= 3) {
+    getContentPrice()
+  }
+}
+// 获取订单详情
+function getDataList () {
+  loading.value = true;
+  API_Order.orderDetail(sn.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      orderInfo.value = res.result;
+      allowOperation.value = res.result.allowOperationVO;
+      data.value = res.result.orderItems;
+      typeList.value = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
+      getContentPrice()
+      getOrderPrice()
+      if (isAppointmentOrder.value) {
+        loadAppointmentExt();
+      }
+    }
+  });
+}
+function loadAppointmentExt() {
+  getAppointmentOrderDetail(sn.value)
+    .then((res) => {
+      if (res.success) {
+        appointmentExt.value = res.result || {};
+      }
+    })
+    .catch(() => {
+      appointmentExt.value = {};
+    });
+}
+function parseFormAnswerGroups(formAnswerJson) {
+  if (!formAnswerJson) return [];
+  let data = formAnswerJson;
+  if (typeof data === "string") {
+    try {
+      data = JSON.parse(data);
+    } catch (e) {
+      return [];
+    }
+  }
+  const fields = Array.isArray(data?.fields) ? data.fields : [];
+  const answers = Array.isArray(data?.answers) ? data.answers : [];
+  return answers
+    .map((group) => {
+      const map = group && typeof group === "object" && !Array.isArray(group) ? group : {};
+      const source = fields.length
+        ? fields
+        : Object.keys(map).map((key) => ({ fieldKey: key, fieldLabel: key }));
+      return source
+        .map((field) => ({
+          fieldKey: field.fieldKey,
+          fieldLabel: field.fieldLabel || field.fieldKey,
+          value: map[field.fieldKey] ?? "",
+        }))
+        .filter((row) => row.value !== "" && row.value != null);
+    })
+    .filter((rows) => rows.length);
+}
+function modifyPrice () {
+  //默认要修改的金额为订单总金额
+  modifyPriceForm.price = orderInfo.value.order.flowPrice;
+  modal.value = true;
+}
+//修改订单金额提交
+function modifyPriceSubmit () {
+  modifyPriceFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.updateOrderPrice(sn.value, modifyPriceForm).then((res) => {
+        if (res.success) {
+          ElMessage.success("修改订单金额成功");
+          modal.value = false;
+          getDataList();
+        }
+      });
+    }
+  });
+}
+// 选中的地址
+function selectedRegion (val) {
+  if(val.type === 'select'){
+    const paths = val.data.map(item => item.name).join(',')
+    const ids = val.data.map(item => item.id).join(',')
+    addr.value = paths;
+    regionId = ids;
+  }
+  else{
+    addr.value = val.data.addr;
+    regionId = val.data.addrId;
+  }
+
+}
+//订单取消
+function orderCancel () {
+  orderCancelModal.value = true;
+}
+//订单取消提交
+function orderCancelSubmit () {
+  orderCancelFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.orderCancel(sn.value, orderCancelForm).then((res) => {
+        if (res.success) {
+          ElMessage.success("取消成功");
+          getDataList();
+        }
+        orderCancelModal.value = false;
+      });
+    }
+  });
+}
+function openPlatformRefund() {
+  platformRefundForm.value = {
+    refundType: "UNSERVED",
+    refundAmount: orderInfo.value?.order?.flowPrice || 0,
+    reason: "",
+  };
+  platformRefundModal.value = true;
+}
+function submitPlatformRefund() {
+  if (!platformRefundForm.value.reason) {
+    ElMessage.warning("请填写退款原因");
+    return;
+  }
+  refundLoading.value = true;
+  platformRefund(sn.value, platformRefundForm.value)
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("退款成功");
+        platformRefundModal.value = false;
+        getDataList();
+      }
+    })
+    .finally(() => {
+      refundLoading.value = false;
+    });
+}
+function openNoShowRefund() {
+  noShowRefundForm.value = {
+    refundAmount: orderInfo.value?.order?.flowPrice || 0,
+    reason: "",
+  };
+  noShowRefundModal.value = true;
+}
+function submitNoShowRefund() {
+  if (!noShowRefundForm.value.reason) {
+    ElMessage.warning("请填写退款原因");
+    return;
+  }
+  refundLoading.value = true;
+  noShowRefund(sn.value, noShowRefundForm.value)
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("退款成功");
+        noShowRefundModal.value = false;
+        getDataList();
+      }
+    })
+    .finally(() => {
+      refundLoading.value = false;
+    });
+}
+//订单日志
+function orderLog () {
+  orderLogModal.value = true;
+}
+//订单日志取消
+function handelCancel () {
+  orderLogModal.value = false;
+}
+//打印发货单
+function printOrder () {
+  printModal.value = true;
+}
+function printHiddenInfo () {
+  printHiddenFlag.value = !printHiddenFlag.value;
+}
+function printCancel () {
+  // printHiddenFlag.value = false;
+}
+function handlePrintInvoice () {
+  printElement("printInfo", "发货单");
+}
+//弹出修改收货地址框
+function editAddress () {
+  addressModal.value = true;
+  addr.value = orderInfo.value.order.consigneeAddressPath;
+  regionId = orderInfo.value.order.consigneeAddressIdPath;
+  addressForm.consigneeName = orderInfo.value.order.consigneeName;
+  addressForm.consigneeMobile = orderInfo.value.order.consigneeMobile;
+  addressForm.consigneeDetail = orderInfo.value.order.consigneeDetail;
+  addressForm.consigneeAddressPath = orderInfo.value.order.consigneeAddressPath;
+  addressForm.consigneeAddressIdPath = orderInfo.value.order.consigneeAddressIdPath;
+}
+//修改收货地址
+function editAddressSubmit () {
+  if (regionId == "") {
+    ElMessage.error("请选择地址");
+    return;
+  }
+  addressForm.consigneeAddressPath = addr.value;
+  addressForm.consigneeAddressIdPath = regionId;
+  addressFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.editOrderConsignee(sn.value, addressForm).then((res) => {
+        if (res.success) {
+          ElMessage.success("收货地址修改成功");
+          addressModal.value = false;
+          getDataList();
+        }
+      });
+    }
+  });
+}
 </script>
 <style lang="scss">
 .lineH30 {
diff --git a/manager/src/views/order/order/orderList.vue b/manager/src/views/order/order/orderList.vue
index 5f3897666..e82a409ef 100644
--- a/manager/src/views/order/order/orderList.vue
+++ b/manager/src/views/order/order/orderList.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         label-width="70px"
         class="search-form order-search-form"
@@ -74,7 +74,7 @@
         <el-button type="warning" class="export" :loading="exporting" @click="exportOrder">导出订单</el-button>
       </div>
 
-      <el-table v-loading="loading" :data="data" ref="table" class="mt_10" style="width: 100%">
+      <el-table v-loading="loading" :data="data" ref="tableRef" class="mt_10" style="width: 100%">
         <el-table-column prop="sn" label="订单号" min-width="200" show-overflow-tooltip />
         <el-table-column label="商品" min-width="280">
           <template #default="{ row }">
@@ -149,7 +149,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unitPrice, customRouterPush } from "@/utils/filters";
@@ -229,264 +230,260 @@ function readSavedQuery() {
   }
 }
 
-export default {
-  name: "orderList",
-  data() {
-    return {
-      loading: true,
-      exporting: false,
-      pageSizes: PAGE_SIZES,
-      promotionOptions: PROMOTION_OPTIONS,
-      orderTypeOptions: ORDER_TYPE_OPTIONS,
-      paymentOptions: PAYMENT_OPTIONS,
-      searchForm: emptySearchForm(),
-      selectDate: null,
-      data: [],
-      total: 0,
-      orderNumData: {},
-      currentStatus: "ALL",
-    };
-  },
-  computed: {
-    orderStatusWithCount() {
-      const count = (value) => (value ? `(${value})` : "");
-      return [
-        { title: "全部", value: "ALL" },
-        { title: `未付款${count(this.orderNumData.waitPayNum)}`, value: "UNPAID" },
-        { title: `已付款${count(this.orderNumData.waitDeliveryNum)}`, value: "PAID" },
-        { title: `待发货${count(this.orderNumData.waitShipNum)}`, value: "UNDELIVERED" },
-        { title: `部分发货${count(this.orderNumData.partsDeliveredNumNum)}`, value: "PARTS_DELIVERED" },
-        { title: `待收货${count(this.orderNumData.deliveredNum)}`, value: "DELIVERED" },
-        { title: `待核验${count(this.orderNumData.waitCheckNum)}`, value: "TAKE" },
-        { title: `待自提${count(this.orderNumData.waitSelfPickNum)}`, value: "STAY_PICKED_UP" },
-        { title: `已完成${count(this.orderNumData.finishNum)}`, value: "COMPLETED" },
-        { title: `已关闭${count(this.orderNumData.closeNum)}`, value: "CANCELLED" },
-      ];
-    },
-  },
-  methods: {
-    unitPrice,
-    onStatusTabClick(tab) {
-      this.orderStatusClick(tab.paneName);
-    },
-    orderGoods(row) {
-      const items = row && row.orderItems;
-      return items && items.length ? items : [];
-    },
-    clientTypeText(v) {
-      const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
-      return map[v] || v || "—";
-    },
-    orderTypeText(v) {
-      const found = ORDER_TYPE_OPTIONS.find((item) => item.value === v);
-      return found ? found.label : v || "—";
-    },
-    orderPromotionText(v) {
-      const found = PROMOTION_OPTIONS.find((item) => item.value === v);
-      return found ? found.label : v || "—";
-    },
-    orderPromotionTagType(v) {
-      const map = {
-        NORMAL: "primary",
-        PINTUAN: "danger",
-        GIFT: "success",
-        POINTS: "info",
-        KANJIA: "warning",
-      };
-      return map[v] || "info";
-    },
-    deliveryMethodText(v) {
-      const map = {
-        SELF_PICK_UP: "自提",
-        LOCAL_TOWN_DELIVERY: "同城配送",
-        LOGISTICS: "物流",
-        VIRTUAL: "虚拟发货",
-      };
-      return map[v] || v || "—";
-    },
-    paymentMethodText(v) {
-      const map = {
-        NOT_ACTUALLY_PAID: "—",
-        WECHAT: "微信支付",
-        ALIPAY: "支付宝",
-        WALLET: "余额支付",
-        BANK_TRANSFER: "线下转账",
-      };
-      return map[v] || v || "—";
-    },
-    orderStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        STAY_PICKED_UP: "待自提",
-        PARTS_DELIVERED: "部分发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已关闭",
-      };
-      return map[v] || v || "—";
-    },
-    orderStatusTagType(v) {
-      const map = {
-        UNPAID: "danger",
-        PAID: "primary",
-        UNDELIVERED: "info",
-        STAY_PICKED_UP: "info",
-        PARTS_DELIVERED: "warning",
-        DELIVERED: "warning",
-        COMPLETED: "success",
-        TAKE: "warning",
-        CANCELLED: "danger",
-      };
-      return map[v] || "info";
-    },
-    rememberQuery() {
-      sessionStorage.setItem(
-        QUERY_KEY,
-        JSON.stringify({
-          searchForm: this.searchForm,
-          selectDate: this.selectDate,
-          currentStatus: this.currentStatus,
-        })
+defineOptions({ name: "orderList" });
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const loading = ref(true);
+const exporting = ref(false);
+const pageSizes = ref(PAGE_SIZES);
+const promotionOptions = ref(PROMOTION_OPTIONS);
+const orderTypeOptions = ref(ORDER_TYPE_OPTIONS);
+const paymentOptions = ref(PAYMENT_OPTIONS);
+const searchForm = ref(emptySearchForm());
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const orderNumData = ref({});
+const currentStatus = ref("ALL");
+
+const orderStatusWithCount = computed(() => {
+  const count = (value) => (value ? `(${value})` : "");
+  return [
+    { title: "全部", value: "ALL" },
+    { title: `未付款${count(orderNumData.value.waitPayNum)}`, value: "UNPAID" },
+    { title: `已付款${count(orderNumData.value.waitDeliveryNum)}`, value: "PAID" },
+    { title: `待发货${count(orderNumData.value.waitShipNum)}`, value: "UNDELIVERED" },
+    { title: `部分发货${count(orderNumData.value.partsDeliveredNumNum)}`, value: "PARTS_DELIVERED" },
+    { title: `待收货${count(orderNumData.value.deliveredNum)}`, value: "DELIVERED" },
+    { title: `待核验${count(orderNumData.value.waitCheckNum)}`, value: "TAKE" },
+    { title: `待自提${count(orderNumData.value.waitSelfPickNum)}`, value: "STAY_PICKED_UP" },
+    { title: `已完成${count(orderNumData.value.finishNum)}`, value: "COMPLETED" },
+    { title: `已关闭${count(orderNumData.value.closeNum)}`, value: "CANCELLED" },
+  ];
+});
+
+function onStatusTabClick(tab) {
+  orderStatusClick(tab.paneName);
+}
+function orderGoods(row) {
+  const items = row && row.orderItems;
+  return items && items.length ? items : [];
+}
+function clientTypeText(v) {
+  const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
+  return map[v] || v || "—";
+}
+function orderTypeText(v) {
+  const found = ORDER_TYPE_OPTIONS.find((item) => item.value === v);
+  return found ? found.label : v || "—";
+}
+function orderPromotionText(v) {
+  const found = PROMOTION_OPTIONS.find((item) => item.value === v);
+  return found ? found.label : v || "—";
+}
+function orderPromotionTagType(v) {
+  const map = {
+    NORMAL: "primary",
+    PINTUAN: "danger",
+    GIFT: "success",
+    POINTS: "info",
+    KANJIA: "warning",
+  };
+  return map[v] || "info";
+}
+function deliveryMethodText(v) {
+  const map = {
+    SELF_PICK_UP: "自提",
+    LOCAL_TOWN_DELIVERY: "同城配送",
+    LOGISTICS: "物流",
+    VIRTUAL: "虚拟发货",
+  };
+  return map[v] || v || "—";
+}
+function paymentMethodText(v) {
+  const map = {
+    NOT_ACTUALLY_PAID: "—",
+    WECHAT: "微信支付",
+    ALIPAY: "支付宝",
+    WALLET: "余额支付",
+    BANK_TRANSFER: "线下转账",
+  };
+  return map[v] || v || "—";
+}
+function orderStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    STAY_PICKED_UP: "待自提",
+    PARTS_DELIVERED: "部分发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已关闭",
+  };
+  return map[v] || v || "—";
+}
+function orderStatusTagType(v) {
+  const map = {
+    UNPAID: "danger",
+    PAID: "primary",
+    UNDELIVERED: "info",
+    STAY_PICKED_UP: "info",
+    PARTS_DELIVERED: "warning",
+    DELIVERED: "warning",
+    COMPLETED: "success",
+    TAKE: "warning",
+    CANCELLED: "danger",
+  };
+  return map[v] || "info";
+}
+function rememberQuery() {
+  sessionStorage.setItem(
+    QUERY_KEY,
+    JSON.stringify({
+      searchForm: searchForm.value,
+      selectDate: selectDate.value,
+      currentStatus: currentStatus.value,
+    })
+  );
+}
+function restoreQuery() {
+  const saved = readSavedQuery();
+  if (!saved) return;
+  searchForm.value = saved.searchForm;
+  selectDate.value = saved.selectDate;
+  currentStatus.value = saved.currentStatus;
+}
+function init() {
+  getDataList();
+  getOrderNumData();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+  getOrderNumData();
+}
+function handleReset() {
+  const pageSize = searchForm.value.pageSize;
+  searchForm.value = emptySearchForm(pageSize);
+  selectDate.value = null;
+  currentStatus.value = "ALL";
+  sessionStorage.removeItem(QUERY_KEY);
+  init();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.value.startDate = v[0];
+    searchForm.value.endDate = v[1];
+  } else {
+    searchForm.value.startDate = "";
+    searchForm.value.endDate = "";
+  }
+}
+function countParams() {
+  const params = { ...searchForm.value };
+  delete params.orderStatus;
+  delete params.pageNumber;
+  delete params.pageSize;
+  delete params.sort;
+  delete params.order;
+  return params;
+}
+function getDataList() {
+  loading.value = true;
+  rememberQuery();
+  API_Order.getOrderList(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function detail(v) {
+  customRouterPush({
+    name: "order-detail",
+    query: { sn: v.sn },
+  });
+}
+async function exportOrder() {
+  if (!searchForm.value.startDate || !searchForm.value.endDate) {
+    try {
+      await ElMessageBox.confirm(
+        "未选择下单时间，将按当前筛选条件导出全部匹配订单。",
+        "导出订单",
+        { type: "warning", confirmButtonText: "继续导出", cancelButtonText: "取消" }
       );
-    },
-    restoreQuery() {
-      const saved = readSavedQuery();
-      if (!saved) return;
-      this.searchForm = saved.searchForm;
-      this.selectDate = saved.selectDate;
-      this.currentStatus = saved.currentStatus;
-    },
-    init() {
-      this.getDataList();
-      this.getOrderNumData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-      this.getOrderNumData();
-    },
-    handleReset() {
-      const pageSize = this.searchForm.pageSize;
-      this.searchForm = emptySearchForm(pageSize);
-      this.selectDate = null;
-      this.currentStatus = "ALL";
-      sessionStorage.removeItem(QUERY_KEY);
-      this.init();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    countParams() {
-      const params = { ...this.searchForm };
-      delete params.orderStatus;
-      delete params.pageNumber;
-      delete params.pageSize;
-      delete params.sort;
-      delete params.order;
-      return params;
-    },
-    getDataList() {
-      this.loading = true;
-      this.rememberQuery();
-      API_Order.getOrderList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    detail(v) {
-      customRouterPush({
-        name: "order-detail",
-        query: { sn: v.sn },
+    } catch (e) {
+      return;
+    }
+  }
+  exporting.value = true;
+  API_Order.exportOrder(searchForm.value)
+    .then((res) => {
+      const blob = new Blob([res], {
+        type: "application/vnd.ms-excel;charset=utf-8",
       });
-    },
-    async exportOrder() {
-      if (!this.searchForm.startDate || !this.searchForm.endDate) {
-        try {
-          await ElMessageBox.confirm(
-            "未选择下单时间，将按当前筛选条件导出全部匹配订单。",
-            "导出订单",
-            { type: "warning", confirmButtonText: "继续导出", cancelButtonText: "取消" }
-          );
-        } catch (e) {
-          return;
-        }
+      const link = document.createElement("a");
+      link.download = "订单列表.xlsx";
+      link.style.display = "none";
+      link.href = URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click();
+      URL.revokeObjectURL(link.href);
+      document.body.removeChild(link);
+    })
+    .catch(() => {
+      ElMessage.error("导出失败");
+    })
+    .finally(() => {
+      exporting.value = false;
+    });
+}
+function orderStatusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined) {
+    searchForm.value.orderStatus = "";
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.value.orderStatus = name;
+    currentStatus.value = name;
+  }
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function getOrderNumData() {
+  API_Order.getOrderNum(countParams())
+    .then((res) => {
+      if (res.success) {
+        orderNumData.value = res.result;
       }
-      this.exporting = true;
-      API_Order.exportOrder(this.searchForm)
-        .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=utf-8",
-          });
-          const link = document.createElement("a");
-          link.download = "订单列表.xlsx";
-          link.style.display = "none";
-          link.href = URL.createObjectURL(blob);
-          document.body.appendChild(link);
-          link.click();
-          URL.revokeObjectURL(link.href);
-          document.body.removeChild(link);
-        })
-        .catch(() => {
-          ElMessage.error("导出失败");
-        })
-        .finally(() => {
-          this.exporting = false;
-        });
-    },
-    orderStatusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined) {
-        this.searchForm.orderStatus = "";
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.orderStatus = name;
-        this.currentStatus = name;
-      }
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getOrderNumData() {
-      API_Order.getOrderNum(this.countParams())
-        .then((res) => {
-          if (res.success) {
-            this.orderNumData = res.result;
-          }
-        })
-        .catch(() => {
-          this.orderNumData = {};
-        });
-    },
-  },
-  created() {
-    this.restoreQuery();
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .catch(() => {
+      orderNumData.value = {};
+    });
+}
+
+// created
+restoreQuery();
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page-decoration/floorList.vue b/manager/src/views/page-decoration/floorList.vue
index aadcfa821..66a830818 100644
--- a/manager/src/views/page-decoration/floorList.vue
+++ b/manager/src/views/page-decoration/floorList.vue
@@ -82,159 +82,162 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import * as API_floor from "@/api/other.js";
-export default {
-  name: "floorList",
-  data() {
-    return {
-      showModal: false,
-      total: 0,
-      formData: {
-        status: false,
-        name: "",
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        pageType: "INDEX",
-        pageClientType: "PC",
-      },
-      loading: false,
-      pageTypes: [
-        { type: "INDEX", title: "首页" },
-        { type: "SPECIAL", title: "专题" },
-      ],
-      list: [],
-    };
-  },
-  mounted() {
-    this.getTemplateList();
-  },
-  methods: {
-    newTemplate() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const data = this.formData;
-          data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
-          delete data.status;
-          (data.pageType = this.searchForm.pageType),
-            (data.pageClientType = "PC");
-          if (data.id) {
-            API_floor.updateHome(data.id, data).then((res) => {
-              this.$Message.success("编辑模板成功");
-              this.showModal = false;
-              this.getTemplateList();
-            });
-          } else {
-            API_floor.setHomeSetup(data).then((res) => {
-              this.$Message.success("新建模板成功");
-              this.showModal = false;
-              this.getTemplateList();
-            });
-          }
-        } else {
-          this.loading = false;
-        }
-      });
-    },
+import { Message, Modal } from "@/utils/message";
 
-    handleTabChange(type) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageType = type;
-      this.getTemplateList();
-    },
+defineOptions({ name: "floorList" });
 
-    createTemp() {
-      this.$refs.form?.resetFields();
-      this.formData = { status: false, name: "" };
-      this.showModal = true;
-    },
+const router = useRouter();
 
-    Template(item) {
-      item.status = item.pageShow;
-      this.formData = { ...item };
-      this.showModal = true;
-    },
+const showModal = ref(false);
+const total = ref(0);
+const formData = ref({
+  status: false,
+  name: "",
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  pageType: "INDEX",
+  pageClientType: "PC",
+});
+const loading = ref(false);
+const pageTypes = ref([
+  { type: "INDEX", title: "首页" },
+  { type: "SPECIAL", title: "专题" },
+]);
+const list = ref([]);
 
-    decorate(val) {
-      const data = { id: val.id, pageShow: val.pageShow, pageType: this.searchForm.pageType };
+const form = ref(null);
 
-      this.$router.push({
-        name: "renovation",
-        query: data,
-      });
-    },
+onMounted(() => {
+  getTemplateList();
+});
 
-    changePageNum(val) {
-      this.searchForm.pageNumber = val;
-      this.getTemplateList();
-    },
-    changePageSize(val) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = val;
-      this.getTemplateList();
-    },
-    getTemplateList() {
-      this.loading = true;
-      API_floor.getHomeList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.total = res.result.total;
-          this.list = res.result.records;
-          this.list.forEach((e) => {
-            if (e.pageShow === "OPEN") {
-              e.pageShow = true;
-            } else {
-              e.pageShow = false;
-            }
-          });
-        }
-      });
-    },
-
-    beforeRelease(row) {
-      if (row.pageShow) {
-        this.$Message.warning(
-          this.total === 1
-            ? "当前为唯一页面，无法关闭"
-            : "请直接开启其他页面，当前页面会自动关闭"
-        );
-        return false;
-      }
-      return new Promise((resolve, reject) => {
-        API_floor.releasePageHome(row.id).then((res) => {
-          if (res && res.success) {
-            this.$Message.success("发布模板成功");
-            resolve(true);
-            this.getTemplateList();
-          } else {
-            reject(new Error("release failed"));
-          }
-        }).catch(() => {
-          reject(new Error("release failed"));
+function newTemplate() {
+  form.value.validate((valid) => {
+    if (valid) {
+      const data = formData.value;
+      data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
+      delete data.status;
+      (data.pageType = searchForm.pageType),
+        (data.pageClientType = "PC");
+      if (data.id) {
+        API_floor.updateHome(data.id, data).then((res) => {
+          Message.success("编辑模板成功");
+          showModal.value = false;
+          getTemplateList();
         });
-      });
-    },
-    confirmDel(id) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "删除此模板？",
-        onOk: () => this.delTemplate(id),
-      });
-    },
-    delTemplate(id) {
-      API_floor.removePageHome(id).then((res) => {
-        if (res.success) {
-          this.$Message.success("删除模板成功");
-          this.getTemplateList();
+      } else {
+        API_floor.setHomeSetup(data).then((res) => {
+          Message.success("新建模板成功");
+          showModal.value = false;
+          getTemplateList();
+        });
+      }
+    } else {
+      loading.value = false;
+    }
+  });
+}
+
+function handleTabChange(type) {
+  searchForm.pageNumber = 1;
+  searchForm.pageType = type;
+  getTemplateList();
+}
+
+function createTemp() {
+  form.value?.resetFields();
+  formData.value = { status: false, name: "" };
+  showModal.value = true;
+}
+
+function Template(item) {
+  item.status = item.pageShow;
+  formData.value = { ...item };
+  showModal.value = true;
+}
+
+function decorate(val) {
+  const data = { id: val.id, pageShow: val.pageShow, pageType: searchForm.pageType };
+
+  router.push({
+    name: "renovation",
+    query: data,
+  });
+}
+
+function changePageNum(val) {
+  searchForm.pageNumber = val;
+  getTemplateList();
+}
+function changePageSize(val) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = val;
+  getTemplateList();
+}
+function getTemplateList() {
+  loading.value = true;
+  API_floor.getHomeList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      total.value = res.result.total;
+      list.value = res.result.records;
+      list.value.forEach((e) => {
+        if (e.pageShow === "OPEN") {
+          e.pageShow = true;
+        } else {
+          e.pageShow = false;
         }
       });
-    },
-  },
-};
+    }
+  });
+}
+
+function beforeRelease(row) {
+  if (row.pageShow) {
+    Message.warning(
+      total.value === 1
+        ? "当前为唯一页面，无法关闭"
+        : "请直接开启其他页面，当前页面会自动关闭"
+    );
+    return false;
+  }
+  return new Promise((resolve, reject) => {
+    API_floor.releasePageHome(row.id).then((res) => {
+      if (res && res.success) {
+        Message.success("发布模板成功");
+        resolve(true);
+        getTemplateList();
+      } else {
+        reject(new Error("release failed"));
+      }
+    }).catch(() => {
+      reject(new Error("release failed"));
+    });
+  });
+}
+function confirmDel(id) {
+  Modal.confirm({
+    title: "提示",
+    content: "删除此模板？",
+    onOk: () => delTemplate(id),
+  });
+}
+function delTemplate(id) {
+  API_floor.removePageHome(id).then((res) => {
+    if (res.success) {
+      Message.success("删除模板成功");
+      getTemplateList();
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page-decoration/modelForm.vue b/manager/src/views/page-decoration/modelForm.vue
index 705668d77..a711475aa 100644
--- a/manager/src/views/page-decoration/modelForm.vue
+++ b/manager/src/views/page-decoration/modelForm.vue
@@ -141,162 +141,174 @@
         <el-button type="primary" @click="handleConfirmNavModal">确定</el-button>
       </template>
     </el-dialog>
-    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <liliDialog ref="liliDialogRef" @selectedLink="selectedLink"></liliDialog>
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick, onMounted } from "vue";
 import { ShoppingCart } from "@element-plus/icons-vue";
 import Draggable from "vuedraggable";
 import ModelFormItem from "./modelFormItem.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import logoImg from "@/assets/logo.png";
-export default {
-  name: "modelForm",
-  components: {
-    Draggable,
-    ModelFormItem,
-    ossManage,
-    ShoppingCart,
-  },
-  props: ["data"],
-  data() {
-    return {
-      logoImg,
-      picModelFlag: false,
-      showModal: false,
-      showModalNav: false,
-      navListBackup: null,
-      draftTopAdvert: null,
-      selectedNav: null,
-      promotionTags: ["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"],
-      topAdvert: {
-        type: "topAdvert",
-        img: "",
-        url: "",
-        bgColor: "#de000d",
-        size: "1200*80",
-      },
-      currentIndex: 0,
-      navList: {
-        type: "navBar",
-        list: [
-          { name: "秒杀", url: "", title: "" },
-          { name: "闪购", url: "", title: "" },
-          { name: "优惠券", url: "", title: "" },
-          { name: "拍卖", url: "", title: "" },
-          { name: "服装城", url: "", title: "" },
-        ],
-      },
-    };
-  },
-  mounted() {
-    document.body.ondrop = function (event) {
-      let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
-      if (isFirefox) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-  },
-  methods: {
-    getModelItemKey(element) {
-      return element.model || element.key || element.type;
+import { formatLinkType } from "@/utils/filters";
+
+defineOptions({ name: "modelForm" });
+
+const props = defineProps(["data"]);
+
+const picModelFlag = ref(false);
+const showModal = ref(false);
+const showModalNav = ref(false);
+const navListBackup = ref(null);
+const draftTopAdvert = ref(null);
+const selectedNav = ref(null);
+const promotionTags = ref(["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"]);
+const topAdvert = ref({
+  type: "topAdvert",
+  img: "",
+  url: "",
+  bgColor: "#de000d",
+  size: "1200*80",
+});
+const currentIndex = ref(0);
+const navList = ref({
+  type: "navBar",
+  list: [
+    { name: "秒杀", url: "", title: "" },
+    { name: "闪购", url: "", title: "" },
+    { name: "优惠券", url: "", title: "" },
+    { name: "拍卖", url: "", title: "" },
+    { name: "服装城", url: "", title: "" },
+  ],
+});
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+// 父组件 renovation.vue 通过 $refs.modelForm 读取并整体赋值 navList / topAdvert
+defineExpose({ navList, topAdvert });
+
+onMounted(() => {
+  document.body.ondrop = function (event) {
+    let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+    if (isFirefox) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+});
+
+function getModelItemKey(element) {
+  return element.model || element.key || element.type;
+}
+
+function handleSelectLink(item, index) {
+  if (item) selectedNav.value = item;
+  liliDialogRef.value.open("link");
+  currentIndex.value = index;
+}
+
+function selectedLink(val) {
+  if (showModalNav.value) {
+    selectedNav.value.url = formatLinkType(val);
+    selectedNav.value.type = val.___type === "other" && val.url === "" ? "link" : "other";
+    navList.value.list[currentIndex.value].title = val.title;
+  } else if (showModal.value && draftTopAdvert.value) {
+    draftTopAdvert.value.url = formatLinkType(val);
+    draftTopAdvert.value.type = val.___type === "other" && val.url === "" ? "link" : "other";
+  }
+}
+
+function handleDelNav(index) {
+  navList.value.list.splice(index, 1);
+}
+
+function handleAddNav() {
+  navList.value.list.push({ name: "", url: "", title: "" });
+}
+
+function handleMoveEnd({ newIndex, oldIndex }) {}
+
+function handleModel(type) {
+  if (type == "topAdvert") {
+    draftTopAdvert.value = JSON.parse(JSON.stringify(topAdvert.value));
+    showModal.value = true;
+  } else {
+    navListBackup.value = JSON.parse(JSON.stringify(navList.value));
+    showModalNav.value = true;
+  }
+}
+
+function handleCancelTopAdvertModal() {
+  draftTopAdvert.value = null;
+  showModal.value = false;
+}
+
+function handleConfirmTopAdvertModal() {
+  if (draftTopAdvert.value) {
+    Object.assign(topAdvert.value, JSON.parse(JSON.stringify(draftTopAdvert.value)));
+  }
+  draftTopAdvert.value = null;
+  showModal.value = false;
+}
+
+function handleCancelNavModal() {
+  showModalNav.value = false;
+}
+
+function handleConfirmNavModal() {
+  navListBackup.value = null;
+  showModalNav.value = false;
+}
+
+function handleNavDialogClose() {
+  if (navListBackup.value) {
+    navList.value = JSON.parse(JSON.stringify(navListBackup.value));
+    navListBackup.value = null;
+  }
+}
+
+function handleSelectImg() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function callbackSelected(item) {
+  picModelFlag.value = false;
+  if (!item?.url || !draftTopAdvert.value) return;
+  draftTopAdvert.value.img = item.url;
+}
+
+function handleModelAdd(evt) {
+  const newIndex = evt.newIndex;
+  const current = props.data.list[newIndex];
+  if (!current || current.key) {
+    return;
+  }
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  props.data.list[newIndex] = {
+    ...JSON.parse(JSON.stringify(current)),
+    options: {
+      ...current.options,
     },
-    handleSelectLink(item, index) {
-      if (item) this.selectedNav = item;
-      this.$refs.liliDialog.open("link");
-      this.currentIndex = index;
-    },
-    selectedLink(val) {
-      if (this.showModalNav) {
-        this.selectedNav.url = this.$filters.formatLinkType(val);
-        this.selectedNav.type = val.___type === "other" && val.url === "" ? "link" : "other";
-        this.navList.list[this.currentIndex].title = val.title;
-      } else if (this.showModal && this.draftTopAdvert) {
-        this.draftTopAdvert.url = this.$filters.formatLinkType(val);
-        this.draftTopAdvert.type = val.___type === "other" && val.url === "" ? "link" : "other";
-      }
-    },
-    handleDelNav(index) {
-      this.navList.list.splice(index, 1);
-    },
-    handleAddNav() {
-      this.navList.list.push({ name: "", url: "", title: "" });
-    },
-    handleMoveEnd({ newIndex, oldIndex }) {},
-    handleModel(type) {
-      if (type == "topAdvert") {
-        this.draftTopAdvert = JSON.parse(JSON.stringify(this.topAdvert));
-        this.showModal = true;
-      } else {
-        this.navListBackup = JSON.parse(JSON.stringify(this.navList));
-        this.showModalNav = true;
-      }
-    },
-    handleCancelTopAdvertModal() {
-      this.draftTopAdvert = null;
-      this.showModal = false;
-    },
-    handleConfirmTopAdvertModal() {
-      if (this.draftTopAdvert) {
-        Object.assign(this.topAdvert, JSON.parse(JSON.stringify(this.draftTopAdvert)));
-      }
-      this.draftTopAdvert = null;
-      this.showModal = false;
-    },
-    handleCancelNavModal() {
-      this.showModalNav = false;
-    },
-    handleConfirmNavModal() {
-      this.navListBackup = null;
-      this.showModalNav = false;
-    },
-    handleNavDialogClose() {
-      if (this.navListBackup) {
-        this.navList = JSON.parse(JSON.stringify(this.navListBackup));
-        this.navListBackup = null;
-      }
-    },
-    handleSelectImg() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(item) {
-      this.picModelFlag = false;
-      if (!item?.url || !this.draftTopAdvert) return;
-      this.draftTopAdvert.img = item.url;
-    },
-    handleModelAdd(evt) {
-      const newIndex = evt.newIndex;
-      const current = this.data.list[newIndex];
-      if (!current || current.key) {
-        return;
-      }
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      this.data.list[newIndex] = {
-        ...JSON.parse(JSON.stringify(current)),
-        options: {
-          ...current.options,
-        },
-        key,
-        model: current.type + "_" + key,
-      };
-    },
-  },
-};
+    key,
+    model: current.type + "_" + key,
+  };
+}
 </script>
 <style lang="scss" scoped>
 @import "./modelList/setup-box.scss";
diff --git a/manager/src/views/page-decoration/modelFormItem.vue b/manager/src/views/page-decoration/modelFormItem.vue
index 86ce70ddd..09a546340 100644
--- a/manager/src/views/page-decoration/modelFormItem.vue
+++ b/manager/src/views/page-decoration/modelFormItem.vue
@@ -250,7 +250,7 @@
       </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <liliDialog ref="liliDialogRef" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
@@ -258,13 +258,14 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ModelCarousel from "./modelList/carousel.vue";
 import ModelCarousel1 from "./modelList/carousel1.vue";
 import ModelCarousel2 from "./modelList/carousel2.vue";
@@ -283,98 +284,82 @@ import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
 import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
 import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 import discountAdvertBg from "@/assets/nav/decorate.png";
-export default {
-  name: "modelFormItem",
-  props: ["element", "select", "index", "data"],
-  components: {
-    ModelCarousel,
-    ModelCarousel1,
-    ModelCarousel2,
-    Recommend,
-    NewGoodsSort,
-    FirstPageAdvert,
-    NotEnough,
-    Seckill,
-    goodsType,
-    ossManage,
-    oneRowThreeColumns,
-    "seckill-only-album":seckillOnlyAlbum,
-    onlyGoodsModel,
-    mixModel,
-    forYour
-  },
-  data() {
-    return {
-      discountAdvertBg,
-      showModal: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确认后写回的原数据
-      picModelFlag: false, // 图片选择器
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 编辑模块
-    handleSelectModel(item) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      this.showModal = true;
-    },
-    // 删除模块
-    handleModelDelete() {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "<p>确定删除当前模块吗？</p>",
-        onOk: () => {
-          this.$nextTick(() => {
-            this.data.list.splice(this.index, 1);
-          });
-        },
-      });
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    // 确定选择链接
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
+import { Modal } from "@/utils/message";
+import { formatLinkType } from "@/utils/filters";
 
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
+defineOptions({ name: "modelFormItem" });
+
+const props = defineProps(["element", "select", "index", "data"]);
+
+const showModal = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确认后写回的原数据
+const picModelFlag = ref(false); // 图片选择器
+
+// 模板 ref，与 import 同名会互相覆盖，故加 Ref 后缀
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 编辑模块
+function handleSelectModel(item) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  showModal.value = true;
+}
+// 删除模块
+function handleModelDelete() {
+  Modal.confirm({
+    title: "提示",
+    content: "<p>确定删除当前模块吗？</p>",
+    onOk: () => {
+      nextTick(() => {
+        props.data.list.splice(props.index, 1);
       });
     },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-  },
-};
+  });
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+}
+// 确定选择链接
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./modelList/setup-box.scss";
diff --git a/manager/src/views/page-decoration/modelList/carousel.vue b/manager/src/views/page-decoration/modelList/carousel.vue
index 64baa6432..3cdd945c5 100644
--- a/manager/src/views/page-decoration/modelList/carousel.vue
+++ b/manager/src/views/page-decoration/modelList/carousel.vue
@@ -125,93 +125,91 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      draftList: [], // 弹窗编辑草稿
-      picModelFlag: false, // 选择图片modal
-      userInfo: {},
-      articleList: [
-        { title: "促销计算规则" },
-        { title: "商家申请开店" },
-        { title: "商家账号注册" },
-        { title: "促销计算规则" },
-      ],
-    };
-  },
+import { formatLinkType } from "@/utils/filters";
 
-  methods: {
-    cloneList(list) {
-      return JSON.parse(JSON.stringify(list || []));
-    },
-    handleSelectModel() {
-      this.draftList = this.cloneList(this.data.options.list);
-      this.showModal = true;
-    },
-    handleCancelModal() {
-      this.draftList = [];
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      this.data.options.list.splice(
-        0,
-        this.data.options.list.length,
-        ...this.cloneList(this.draftList)
-      );
-      this.draftList = [];
-      this.showModal = false;
-    },
-    // 添加轮播图
-    handleAdd() {
-      this.draftList.push({ img: "", url: "", type: "" });
-    },
-    handleSelectLink(item) {
-      // 选择链接
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      if (!item?.url) return;
-      this.selected.img = item.url;
-    },
-    handleDel(index) {
-      this.draftList.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择图片
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const draftList = ref([]); // 弹窗编辑草稿
+const picModelFlag = ref(false); // 选择图片modal
+const userInfo = ref({});
+const articleList = ref([
+  { title: "促销计算规则" },
+  { title: "商家申请开店" },
+  { title: "商家账号注册" },
+  { title: "促销计算规则" },
+]);
+
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+function cloneList(list) {
+  return JSON.parse(JSON.stringify(list || []));
+}
+function handleSelectModel() {
+  draftList.value = cloneList(props.data.options.list);
+  showModal.value = true;
+}
+function handleCancelModal() {
+  draftList.value = [];
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  props.data.options.list.splice(
+    0,
+    props.data.options.list.length,
+    ...cloneList(draftList.value)
+  );
+  draftList.value = [];
+  showModal.value = false;
+}
+// 添加轮播图
+function handleAdd() {
+  draftList.value.push({ img: "", url: "", type: "" });
+}
+function handleSelectLink(item) {
+  // 选择链接
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+function callbackSelected(item) {
+  // 选择图片回调
+  picModelFlag.value = false;
+  if (!item?.url) return;
+  selected.value.img = item.url;
+}
+function handleDel(index) {
+  draftList.value.splice(index, 1);
+}
+function selectedLink(val) {
+  // 选择链接回调
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择图片
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/carousel1.vue b/manager/src/views/page-decoration/modelList/carousel1.vue
index 2f0d0e9ab..0610dc99e 100644
--- a/manager/src/views/page-decoration/modelList/carousel1.vue
+++ b/manager/src/views/page-decoration/modelList/carousel1.vue
@@ -84,77 +84,81 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManageRef" />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, nextTick, getCurrentInstance } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
+import { formatLinkType } from "@/utils/filters";
+
+defineOptions({
   name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      bgColor: "#fff", // 轮播背景色
-    };
-  },
-  mounted() {
-    this.bgColor = this.data.options.list[0].bgColor;
-  },
-  methods: {
-    handleSelectModel() {
-      // 编辑模块
-      this.showModal = true;
-    },
-    // 自动切换时改变背景色
-    autoChange(oVal, val) {
-      this.bgColor = this.data.options.list[val].bgColor;
-    },
-    // 添加轮播图片和链接
-    handleAdd() {
-      this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
-      this.$forceUpdate();
-    },
-    // 打开选择链接modal
-    handleSelectLink(item) {
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      if (!item?.url) return;
-      this.selected.img = item.url;
-    },
-    // 删除图片
-    handleDel(index) {
-      this.data.options.list.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 打开选择图片modal
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+});
+
+const props = defineProps(["data"]);
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const picModelFlag = ref(false); // 选择图片modal
+const bgColor = ref("#fff"); // 轮播背景色
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+onMounted(() => {
+  bgColor.value = props.data.options.list[0].bgColor;
+});
+
+function handleSelectModel() {
+  // 编辑模块
+  showModal.value = true;
+}
+// 自动切换时改变背景色
+function autoChange(oVal, val) {
+  bgColor.value = props.data.options.list[val].bgColor;
+}
+// 添加轮播图片和链接
+function handleAdd() {
+  props.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
+  proxy.$forceUpdate();
+}
+// 打开选择链接modal
+function handleSelectLink(item) {
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+function callbackSelected(item) {
+  // 选择图片回调
+  picModelFlag.value = false;
+  if (!item?.url) return;
+  selected.value.img = item.url;
+}
+// 删除图片
+function handleDel(index) {
+  props.data.options.list.splice(index, 1);
+}
+function selectedLink(val) {
+  // 选择链接回调
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 打开选择图片modal
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/carousel2.vue b/manager/src/views/page-decoration/modelList/carousel2.vue
index b46e4135d..1b684a6b8 100644
--- a/manager/src/views/page-decoration/modelList/carousel2.vue
+++ b/manager/src/views/page-decoration/modelList/carousel2.vue
@@ -204,89 +204,89 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManageRef" />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, getCurrentInstance } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      userInfo: {},
-      articleList: [
-        { title: "促销计算规则" },
-        { title: "商家申请开店" },
-        { title: "商家账号注册" },
-        { title: "促销计算规则" },
-      ],
-    };
-  },
+import { formatLinkType } from "@/utils/filters";
 
-  methods: {
-    handleSelectModel() {
-      // 编辑模块
-      this.showModal = true;
-    },
-    // 添加轮播
-    handleAdd() {
-      this.data.options.list.push({ img: "", url: "" });
-      this.$forceUpdate();
-    },
-    // 添加图片组
-    handleAddGroup() {
-      this.data.options.listRight.push([
-        { img: "", url: "" },
-        { img: "", url: "" },
-        { img: "", url: "" },
-      ]);
-    },
-    // 删除图片组
-    handleTabRemove(index) {
-      this.data.options.listRight.splice(index, 1);
-    },
-    // 打开图片链接
-    handleSelectLink(item) {
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      if (!item?.url) return;
-      this.selected.img = item.url;
-    },
-    // 删除图片
-    handleDel(index) {
-      this.data.options.list.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 打开选择图片modal
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const picModelFlag = ref(false); // 选择图片modal
+const userInfo = reactive({});
+const articleList = ref([
+  { title: "促销计算规则" },
+  { title: "商家申请开店" },
+  { title: "商家账号注册" },
+  { title: "促销计算规则" },
+]);
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleSelectModel() {
+  // 编辑模块
+  showModal.value = true;
+}
+// 添加轮播
+function handleAdd() {
+  props.data.options.list.push({ img: "", url: "" });
+  proxy.$forceUpdate();
+}
+// 添加图片组
+function handleAddGroup() {
+  props.data.options.listRight.push([
+    { img: "", url: "" },
+    { img: "", url: "" },
+    { img: "", url: "" },
+  ]);
+}
+// 删除图片组
+function handleTabRemove(index) {
+  props.data.options.listRight.splice(index, 1);
+}
+// 打开图片链接
+function handleSelectLink(item) {
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+function callbackSelected(item) {
+  // 选择图片回调
+  picModelFlag.value = false;
+  if (!item?.url) return;
+  selected.value.img = item.url;
+}
+// 删除图片
+function handleDel(index) {
+  props.data.options.list.splice(index, 1);
+}
+function selectedLink(val) {
+  // 选择链接回调
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 打开选择图片modal
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/firstPageAdvert.vue b/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
index 9021f9806..426cf241c 100644
--- a/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
+++ b/manager/src/views/page-decoration/modelList/firstPageAdvert.vue
@@ -105,7 +105,7 @@
       </template>
     </el-dialog>
     <!-- 选择商品。链接 -->
-    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <liliDialog ref="liliDialogRef" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
@@ -113,80 +113,79 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
+import { formatLinkType } from "@/utils/filters";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
   },
-  components: { ossManage },
-  data() {
-    return {
-      options: this.data.options, // 当前类型数据
-      showModal: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确认后写回的原数据
-      picModelFlag: false, // 图片选择器
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 打开装修modal
-    handleSelectModel(item) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      this.showModal = true;
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-  },
-};
+});
+
+const options = ref(props.data.options); // 当前类型数据
+const showModal = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确认后写回的原数据
+const picModelFlag = ref(false); // 图片选择器
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 打开装修modal
+function handleSelectModel(item) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  showModal.value = true;
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/manager/src/views/page-decoration/modelList/forYour.vue b/manager/src/views/page-decoration/modelList/forYour.vue
index 147cb1263..3372e35e6 100644
--- a/manager/src/views/page-decoration/modelList/forYour.vue
+++ b/manager/src/views/page-decoration/modelList/forYour.vue
@@ -174,117 +174,115 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
+defineOptions({
   name: "forYour",
-  data() {
-    return {
-      showModal: false,
-      draftOptions: null,
-      picModelFlag: false,
-      selectedData: "", //选中的数据
-      goodsIndex: 0, // 商品索引
-      defaultCallbackImageType: "",
-    };
-  },
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
-  },
-  components: {
-    ossManage,
-  },
-  mounted() {
-   },
-  methods: {
-    cloneOptions(options) {
-      return JSON.parse(JSON.stringify(options || {}));
-    },
-    handleSelectImg(type, index) {
-      this.defaultCallbackImageType = type;
-      this.goodsIndex = index;
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
+});
 
-    handleSelectGoods(val, index) {
-      this.$refs.liliDialog.open("goods");
-      this.$refs.liliDialog.singleGoods();
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    handleSelectLink(val, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.selectedData = val;
-
-      this.goodsIndex = index;
-    },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url || !this.draftOptions) return;
-      if (this.defaultCallbackImageType == "image") {
-        this.draftOptions.data.image.src = val.url;
-      } else {
-        this.draftOptions.data[this.defaultCallbackImageType][
-          this.goodsIndex
-        ].img = val.url;
-      }
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.draftOptions) return;
-      const item = this.draftOptions.data.hot.list[this.goodsIndex];
-      item.img = val[0].thumbnail;
-      item.title = val[0].goodsName;
-      item.price = val[0].price;
-      item.url = this.$filters.formatLinkType(val[0]);
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.draftOptions) return;
-      if (this.selectedData == "image") {
-        this.draftOptions.data.image.url = this.$filters.formatLinkType(val);
-      } else {
-        this.draftOptions.data.list[this.goodsIndex].url =
-          this.$filters.formatLinkType(val);
-      }
-    },
-    handleSelectModel() {
-      this.draftOptions = this.cloneOptions(this.data.options);
-      this.showModal = true;
-    },
-    handleCancelModal() {
-      this.draftOptions = null;
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.draftOptions) {
-        const saved = this.cloneOptions(this.draftOptions);
-        this.data.options.title = saved.title;
-        this.data.options.data = saved.data;
-      }
-      this.draftOptions = null;
-      this.showModal = false;
-    },
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
   },
-};
+});
+
+const showModal = ref(false);
+const draftOptions = ref(null);
+const picModelFlag = ref(false);
+const selectedData = ref(""); //选中的数据
+const goodsIndex = ref(0); // 商品索引
+const defaultCallbackImageType = ref("");
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function cloneOptions(options) {
+  return JSON.parse(JSON.stringify(options || {}));
+}
+function handleSelectImg(type, index) {
+  defaultCallbackImageType.value = type;
+  goodsIndex.value = index;
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function handleSelectGoods(val, index) {
+  liliDialog.value.open("goods");
+  liliDialog.value.singleGoods();
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+function handleSelectLink(val, index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+  selectedData.value = val;
+
+  goodsIndex.value = index;
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url || !draftOptions.value) return;
+  if (defaultCallbackImageType.value == "image") {
+    draftOptions.value.data.image.src = val.url;
+  } else {
+    draftOptions.value.data[defaultCallbackImageType.value][
+      goodsIndex.value
+    ].img = val.url;
+  }
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !draftOptions.value) return;
+  const item = draftOptions.value.data.hot.list[goodsIndex.value];
+  item.img = val[0].thumbnail;
+  item.title = val[0].goodsName;
+  item.price = val[0].price;
+  item.url = formatLinkType(val[0]);
+}
+// 选择链接回调
+function selectedLink(val) {
+  if (!draftOptions.value) return;
+  if (selectedData.value == "image") {
+    draftOptions.value.data.image.url = formatLinkType(val);
+  } else {
+    draftOptions.value.data.list[goodsIndex.value].url =
+      formatLinkType(val);
+  }
+}
+function handleSelectModel() {
+  draftOptions.value = cloneOptions(props.data.options);
+  showModal.value = true;
+}
+function handleCancelModal() {
+  draftOptions.value = null;
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (draftOptions.value) {
+    const saved = cloneOptions(draftOptions.value);
+    props.data.options.title = saved.title;
+    props.data.options.data = saved.data;
+  }
+  draftOptions.value = null;
+  showModal.value = false;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/goodsAndType.vue b/manager/src/views/page-decoration/modelList/goodsAndType.vue
index cec3c8f50..b8fc1f639 100644
--- a/manager/src/views/page-decoration/modelList/goodsAndType.vue
+++ b/manager/src/views/page-decoration/modelList/goodsAndType.vue
@@ -127,137 +127,132 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "goods",
+defineOptions({ name: "goods" });
 
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
   },
-  data() {
-    return {
-      tabIndex: 0,
-      current: 0,
-      showModal: false,
-      draftOptions: null,
-      tabCurrentlyIndex: 0, // 选项卡索引
-    };
-  },
-  mounted(){
-    this.tabIndex = this.data.options.labels[0].___index
-  },
-  methods: {
-    cloneOptions(options) {
-      return JSON.parse(JSON.stringify(options || {}));
-    },
-    /**
-     * 算出最大的index 然后索引叠加
-     */
-    handleTabsAdd() {
-      if (!this.draftOptions) return;
-      const findAllIndex = this.draftOptions.labels.map((item) => item.___index);
-      const max = Math.max.apply(null, findAllIndex);
+});
 
-      this.draftOptions.labels.push({
-        label: "标签" + (max + 1),
-        ___index: max + 1,
-      });
-    },
-    // 删除标签
-    handleContextMenuDelete(item, index) {
-      if (!this.draftOptions) return;
-      this.draftOptions.list = this.draftOptions.list.filter(
-        (lab) => lab.___index != item.___index
-      );
-      this.draftOptions.labels.splice(index, 1);
-    },
-    // 删除商品
-    delGoods(val) {
-      if (!this.draftOptions) return;
-      this.draftOptions.list.forEach((item, i) => {
-        if (
-          item.title == val.title &&
-          item.___index == this.tabCurrentlyIndex
-        ) {
-          this.draftOptions.list.splice(i, 1);
-        }
-      });
-    },
-    // 切换选项卡
-    handleClickTab(name) {
-      this.tabCurrentlyIndex = name.paneName ?? name;
-    },
-    // 添加当前选项卡中的商品
-    addCurrentGoods() {
-      this.$refs.liliDialog.clearGoodsSelected();
-      this.$refs.liliDialog.open("goods");
-    },
-    // 编辑模块
-    handleSelectModel() {
-      this.draftOptions = this.cloneOptions({
-        title: this.data.options.title,
-        labels: this.data.options.labels,
-        list: this.data.options.list,
-      });
-      this.tabCurrentlyIndex = this.draftOptions.labels[0]?.___index ?? 0;
-      this.tabIndex = String(this.tabCurrentlyIndex);
-      this.showModal = true;
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.draftOptions) return;
-      val.forEach((item) => {
-        this.draftOptions.list.push({
-          img: item.thumbnail,
-          price: item.price,
-          title: item.goodsName,
-          desc: "",
-          url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
-          ___index: this.tabCurrentlyIndex,
-        });
-      });
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.draftOptions?.list?.length) return;
-      const item = this.draftOptions.list[this.current];
-      if (!item) return;
-      item.url = this.$filters.formatLinkType(val);
-      item.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectLink(index) {
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-    handleCancelModal() {
-      this.draftOptions = null;
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.draftOptions) {
-        const saved = this.cloneOptions(this.draftOptions);
-        this.data.options.title = saved.title;
-        this.data.options.labels.splice(
-          0,
-          this.data.options.labels.length,
-          ...saved.labels
-        );
-        this.data.options.list.splice(
-          0,
-          this.data.options.list.length,
-          ...saved.list
-        );
-      }
-      this.draftOptions = null;
-      this.showModal = false;
-    },
-  },
-};
+const tabIndex = ref(0);
+const current = ref(0);
+const showModal = ref(false);
+const draftOptions = ref(null);
+const tabCurrentlyIndex = ref(0); // 选项卡索引
+
+const liliDialog = ref(null);
+
+onMounted(() => {
+  tabIndex.value = props.data.options.labels[0].___index;
+});
+
+function cloneOptions(options) {
+  return JSON.parse(JSON.stringify(options || {}));
+}
+/**
+ * 算出最大的index 然后索引叠加
+ */
+function handleTabsAdd() {
+  if (!draftOptions.value) return;
+  const findAllIndex = draftOptions.value.labels.map((item) => item.___index);
+  const max = Math.max.apply(null, findAllIndex);
+
+  draftOptions.value.labels.push({
+    label: "标签" + (max + 1),
+    ___index: max + 1,
+  });
+}
+// 删除标签
+function handleContextMenuDelete(item, index) {
+  if (!draftOptions.value) return;
+  draftOptions.value.list = draftOptions.value.list.filter(
+    (lab) => lab.___index != item.___index
+  );
+  draftOptions.value.labels.splice(index, 1);
+}
+// 删除商品
+function delGoods(val) {
+  if (!draftOptions.value) return;
+  draftOptions.value.list.forEach((item, i) => {
+    if (item.title == val.title && item.___index == tabCurrentlyIndex.value) {
+      draftOptions.value.list.splice(i, 1);
+    }
+  });
+}
+// 切换选项卡
+function handleClickTab(name) {
+  tabCurrentlyIndex.value = name.paneName ?? name;
+}
+// 添加当前选项卡中的商品
+function addCurrentGoods() {
+  liliDialog.value.clearGoodsSelected();
+  liliDialog.value.open("goods");
+}
+// 编辑模块
+function handleSelectModel() {
+  draftOptions.value = cloneOptions({
+    title: props.data.options.title,
+    labels: props.data.options.labels,
+    list: props.data.options.list,
+  });
+  tabCurrentlyIndex.value = draftOptions.value.labels[0]?.___index ?? 0;
+  tabIndex.value = String(tabCurrentlyIndex.value);
+  showModal.value = true;
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !draftOptions.value) return;
+  val.forEach((item) => {
+    draftOptions.value.list.push({
+      img: item.thumbnail,
+      price: item.price,
+      title: item.goodsName,
+      desc: "",
+      url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+      ___index: tabCurrentlyIndex.value,
+    });
+  });
+}
+// 选择链接回调
+function selectedLink(val) {
+  if (!draftOptions.value?.list?.length) return;
+  const item = draftOptions.value.list[current.value];
+  if (!item) return;
+  item.url = formatLinkType(val);
+  item.type = val.___type === "other" && val.url === "" ? "link" : "other";
+}
+function handleSelectLink(index) {
+  liliDialog.value.open("link");
+  current.value = index;
+}
+function handleCancelModal() {
+  draftOptions.value = null;
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (draftOptions.value) {
+    const saved = cloneOptions(draftOptions.value);
+    props.data.options.title = saved.title;
+    props.data.options.labels.splice(
+      0,
+      props.data.options.labels.length,
+      ...saved.labels
+    );
+    props.data.options.list.splice(
+      0,
+      props.data.options.list.length,
+      ...saved.list
+    );
+  }
+  draftOptions.value = null;
+  showModal.value = false;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/mixModel.vue b/manager/src/views/page-decoration/modelList/mixModel.vue
index a35e2301b..872f04051 100644
--- a/manager/src/views/page-decoration/modelList/mixModel.vue
+++ b/manager/src/views/page-decoration/modelList/mixModel.vue
@@ -138,7 +138,7 @@
 
     <!-- 选择商品。链接 -->
     <liliDialog
-      ref="liliDialog"
+      ref="liliDialogRef"
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
@@ -150,119 +150,121 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import left from "./mixs/mix-goods";
 import right from "./mixs/mix-brand";
 import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "mixModel",
-  data() {
-    return {
-      showModal: false,
-      current: null, // 当前编辑的模块草稿
-      picModelFlag: false,
-      selectedData: "", //选中的数据
-      goodsIndex: 0, // 商品索引
-      align: "",
-      defaultCallbackImageType: "",
-    };
-  },
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
-  },
-  components: {
-    left,
-    right,
-    ossManage,
-  },
-  mounted() {},
-  methods: {
-    cloneModule(module) {
-      return JSON.parse(JSON.stringify(module || {}));
-    },
-    handleSelectImg(type, index) {
-      this.defaultCallbackImageType = type;
-      this.goodsIndex = index;
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
+defineOptions({ name: "mixModel" });
 
-    handleSelectGoods(val, index) {
-      this.$refs.liliDialog.open("goods");
-      this.$refs.liliDialog.singleGoods();
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    handleSelectLink(val, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url || !this.current) return;
-      if (this.defaultCallbackImageType == "default") {
-        this.current.data.image.src = val.url;
-      } else {
-        this.current.data.list[this.goodsIndex].img = val.url;
-      }
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.current) return;
-      const goods = val[0];
-      const item = this.current.data.list[this.goodsIndex];
-      item.img = goods.thumbnail;
-      item.title = goods.goodsName;
-      item.price = goods.price;
-      item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.current) return;
-      const formattedUrl = this.$filters.formatLinkType(val);
-      if (this.selectedData != "list") {
-        this.current.data[this.selectedData].url = formattedUrl;
-      }
-      if (this.selectedData == "list") {
-        this.current.data.list[this.goodsIndex].url = formattedUrl;
-      }
-    },
-    handleSelectModel(align) {
-      this.align = align;
-      this.current = this.cloneModule(this.data.options[align]);
-      this.showModal = true;
-    },
-    handleCancelModal() {
-      this.current = null;
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.current && this.align) {
-        this.data.options[this.align] = this.cloneModule(this.current);
-      }
-      this.current = null;
-      this.showModal = false;
-    },
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {},
   },
-};
+});
+
+const showModal = ref(false);
+const current = ref(null); // 当前编辑的模块草稿
+const picModelFlag = ref(false);
+const selectedData = ref(""); //选中的数据
+const goodsIndex = ref(0); // 商品索引
+const align = ref("");
+const defaultCallbackImageType = ref("");
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+function cloneModule(module) {
+  return JSON.parse(JSON.stringify(module || {}));
+}
+
+function handleSelectImg(type, index) {
+  defaultCallbackImageType.value = type;
+  goodsIndex.value = index;
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function handleSelectGoods(val, index) {
+  liliDialogRef.value.open("goods");
+  liliDialogRef.value.singleGoods();
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+
+function handleSelectLink(val, index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url || !current.value) return;
+  if (defaultCallbackImageType.value == "default") {
+    current.value.data.image.src = val.url;
+  } else {
+    current.value.data.list[goodsIndex.value].img = val.url;
+  }
+}
+
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !current.value) return;
+  const goods = val[0];
+  const item = current.value.data.list[goodsIndex.value];
+  item.img = goods.thumbnail;
+  item.title = goods.goodsName;
+  item.price = goods.price;
+  item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+
+// 选择链接回调
+function selectedLink(val) {
+  if (!current.value) return;
+  const formattedUrl = formatLinkType(val);
+  if (selectedData.value != "list") {
+    current.value.data[selectedData.value].url = formattedUrl;
+  }
+  if (selectedData.value == "list") {
+    current.value.data.list[goodsIndex.value].url = formattedUrl;
+  }
+}
+
+function handleSelectModel(type) {
+  align.value = type;
+  current.value = cloneModule(props.data.options[type]);
+  showModal.value = true;
+}
+
+function handleCancelModal() {
+  current.value = null;
+  showModal.value = false;
+}
+
+function handleConfirmModal() {
+  if (current.value && align.value) {
+    props.data.options[align.value] = cloneModule(current.value);
+  }
+  current.value = null;
+  showModal.value = false;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
index 5eef86944..c0e16cf5b 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-brand.vue
@@ -24,19 +24,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ArrowRight } from "@element-plus/icons-vue";
 
-export default {
-  name: "mix-brand",
-  components: { ArrowRight },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+defineOptions({ name: "mix-brand" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
index 14791f7cc..aeca6b70c 100644
--- a/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
+++ b/manager/src/views/page-decoration/modelList/mixs/mix-goods.vue
@@ -28,16 +28,17 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   name: "mix-goods",
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+});
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/newGoodsSort.vue b/manager/src/views/page-decoration/modelList/newGoodsSort.vue
index 98d404ad0..a24723b2a 100644
--- a/manager/src/views/page-decoration/modelList/newGoodsSort.vue
+++ b/manager/src/views/page-decoration/modelList/newGoodsSort.vue
@@ -242,125 +242,123 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
+import { formatLinkType } from "@/utils/filters";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
   },
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      options: this.data.options, // 当前数据
-      showModal: false, // modal显隐
-      showModal1: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确认后写回的原数据
-      picModelFlag: false, // 选择图片modal
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 装修modal
-    handleSelectModel(item, type) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      if (type) {
-        this.showModal1 = true;
-      } else {
-        this.showModal = true;
-      }
-    },
-    handleSelectLink() {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    handleSelectGoods(item) {
-      if (item) {
-        this.editTarget = item;
-        this.selected = this.cloneItem(item);
-      }
-      this.$refs.liliDialog.open("goods", "single");
-      setTimeout(() => {
-        this.$refs.liliDialog.goodsData = [this.selected];
-      }, 500);
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.selected) return;
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.selected) return;
-      const goods = val[0];
-      this.selected.img = goods.thumbnail;
-      this.selected.price = goods.price;
-      this.selected.name = goods.goodsName;
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-      if (this.editTarget && !this.showModal && !this.showModal1) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-        this.editTarget = null;
-        this.selected = {};
-      }
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleCancelModal1() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-    handleConfirmModal1() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-  },
-};
+});
+
+const options = ref(props.data.options); // 当前数据
+const showModal = ref(false); // modal显隐
+const showModal1 = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确认后写回的原数据
+const picModelFlag = ref(false); // 选择图片modal
+
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 装修modal
+function handleSelectModel(item, type) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  if (type) {
+    showModal1.value = true;
+  } else {
+    showModal.value = true;
+  }
+}
+function handleSelectLink() {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+}
+function handleSelectGoods(item) {
+  if (item) {
+    editTarget.value = item;
+    selected.value = cloneItem(item);
+  }
+  liliDialog.value.open("goods", "single");
+  setTimeout(() => {
+    liliDialog.value.goodsData = [selected.value];
+  }, 500);
+}
+// 选择链接回调
+function selectedLink(val) {
+  if (!selected.value) return;
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !selected.value) return;
+  const goods = val[0];
+  selected.value.img = goods.thumbnail;
+  selected.value.price = goods.price;
+  selected.value.name = goods.goodsName;
+  selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+  if (editTarget.value && !showModal.value && !showModal1.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+    editTarget.value = null;
+    selected.value = {};
+  }
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleCancelModal1() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
+function handleConfirmModal1() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/manager/src/views/page-decoration/modelList/notEnough.vue b/manager/src/views/page-decoration/modelList/notEnough.vue
index a04ba5e4f..2597b2e16 100644
--- a/manager/src/views/page-decoration/modelList/notEnough.vue
+++ b/manager/src/views/page-decoration/modelList/notEnough.vue
@@ -96,118 +96,116 @@
         ></liliDialog>
     </div>
 </template>
-<script>
-export default {
-    props:{
-        data:{
-            type: Object,
-            default: null
-        }
-    },
-    data() {
-        return {
-            currentIndex:0,
-            conData:this.data,
-            selected:{},
-            editTarget: null,
-            showModal:false,
-            showGoodsModal: false,
-            showContent:true,
-            draftNavList: [],
-            draftGoodsList: [],
-        }
-    },
-    watch:{
-        data:function(val){
-            this.conData = val
-        },
-        conData:function(val){
-            this.$emit('content',val)
-        }
-    },
-    methods:{
-        cloneList(list) {
-            return JSON.parse(JSON.stringify(list || []));
-        },
-        cloneItem(item) {
-            return JSON.parse(JSON.stringify(item || {}));
-        },
-        changeCurr(index){
-            this.currentIndex = index;
-        },
-        handleSelectModel () {
-            this.draftNavList = this.cloneList(this.conData.options.navList);
-            this.draftGoodsList = this.cloneList(this.conData.options.list);
-            this.showModal = true;
-        },
-        handleSelectGoods(item) {
-            this.editTarget = item;
-            this.selected = this.cloneItem(item);
-            this.showGoodsModal = true;
-        },
-        handleOpenGoodsPicker() {
-            this.$refs.liliDialog.open('goods', 'single');
-            setTimeout(() => {
-                this.$refs.liliDialog.goodsData = [this.selected];
-            }, 500);
-        },
-        selectedGoodsData(val){
-            if (!val?.length) return;
-            const goods = val[0];
-            this.selected.img = goods.thumbnail;
-            this.selected.price = goods.price;
-            this.selected.name = goods.goodsName;
-            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-        },
-        handleDelNav(index){
-            this.draftNavList.splice(index,1);
-            this.draftGoodsList.splice(index,1);
-        },
-        handleAddNav(){
-            this.draftNavList.push({ title:'', desc:'' });
-            this.draftGoodsList.push([
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-            ]);
-        },
-        handleCancelModal() {
-            this.draftNavList = [];
-            this.draftGoodsList = [];
-            this.showModal = false;
-        },
-        handleConfirmModal() {
-            this.conData.options.navList = this.cloneList(this.draftNavList);
-            this.conData.options.list = this.cloneList(this.draftGoodsList);
-            this.draftNavList = [];
-            this.draftGoodsList = [];
-            this.showContent = false;
-            this.$nextTick(() => {
-                this.showContent = true;
-            });
-            this.showModal = false;
-        },
-        handleCancelGoodsModal() {
-            this.editTarget = null;
-            this.selected = {};
-            this.showGoodsModal = false;
-        },
-        handleConfirmGoodsModal() {
-            if (this.editTarget) {
-                Object.assign(this.editTarget, this.cloneItem(this.selected));
-            }
-            this.editTarget = null;
-            this.selected = {};
-            this.showGoodsModal = false;
-        },
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+const props = defineProps({
+    data:{
+        type: Object,
+        default: null
     }
+});
+const emit = defineEmits(['content']);
+
+const currentIndex = ref(0);
+const conData = ref(props.data);
+const selected = ref({});
+const editTarget = ref(null);
+const showModal = ref(false);
+const showGoodsModal = ref(false);
+const showContent = ref(true);
+const draftNavList = ref([]);
+const draftGoodsList = ref([]);
+
+const liliDialog = ref(null);
+
+watch(() => props.data, function(val){
+    conData.value = val
+});
+watch(conData, function(val){
+    emit('content', val)
+});
+
+function cloneList(list) {
+    return JSON.parse(JSON.stringify(list || []));
+}
+function cloneItem(item) {
+    return JSON.parse(JSON.stringify(item || {}));
+}
+function changeCurr(index){
+    currentIndex.value = index;
+}
+function handleSelectModel () {
+    draftNavList.value = cloneList(conData.value.options.navList);
+    draftGoodsList.value = cloneList(conData.value.options.list);
+    showModal.value = true;
+}
+function handleSelectGoods(item) {
+    editTarget.value = item;
+    selected.value = cloneItem(item);
+    showGoodsModal.value = true;
+}
+function handleOpenGoodsPicker() {
+    liliDialog.value.open('goods', 'single');
+    setTimeout(() => {
+        liliDialog.value.goodsData = [selected.value];
+    }, 500);
+}
+function selectedGoodsData(val){
+    if (!val?.length) return;
+    const goods = val[0];
+    selected.value.img = goods.thumbnail;
+    selected.value.price = goods.price;
+    selected.value.name = goods.goodsName;
+    selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+function handleDelNav(index){
+    draftNavList.value.splice(index,1);
+    draftGoodsList.value.splice(index,1);
+}
+function handleAddNav(){
+    draftNavList.value.push({ title:'', desc:'' });
+    draftGoodsList.value.push([
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+    ]);
+}
+function handleCancelModal() {
+    draftNavList.value = [];
+    draftGoodsList.value = [];
+    showModal.value = false;
+}
+function handleConfirmModal() {
+    conData.value.options.navList = cloneList(draftNavList.value);
+    conData.value.options.list = cloneList(draftGoodsList.value);
+    draftNavList.value = [];
+    draftGoodsList.value = [];
+    showContent.value = false;
+    nextTick(() => {
+        showContent.value = true;
+    });
+    showModal.value = false;
+}
+function handleCancelGoodsModal() {
+    editTarget.value = null;
+    selected.value = {};
+    showGoodsModal.value = false;
+}
+function handleConfirmGoodsModal() {
+    if (editTarget.value) {
+        Object.assign(editTarget.value, cloneItem(selected.value));
+    }
+    editTarget.value = null;
+    selected.value = {};
+    showGoodsModal.value = false;
 }
 </script>
 <style lang="scss" scoped>
diff --git a/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue b/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
index 499a5cff4..0f28ae453 100644
--- a/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
+++ b/manager/src/views/page-decoration/modelList/oneRowThreeColumns.vue
@@ -49,7 +49,7 @@
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
-      ref="liliDialog"
+      ref="liliDialogRef"
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
@@ -60,89 +60,89 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "oneRowThreeColumns",
-  components:{ossManage},
-  props: {
-    data: {
-      type: Object,
-      default: {}
-    }
-  },
-  data () {
-    return {
-      showModal:false,
-      draftList: [],
-      picModelFlag:false,
-      current:0,
-    };
-  },
-  methods: {
-    cloneList(list) {
-      return JSON.parse(JSON.stringify(list || []));
-    },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.draftList[this.current].img = val.url;
-    },
-    // 编辑模块
-    handleSelectModel() {
-      this.draftList = this.cloneList(this.data.options.list);
-      this.showModal = true;
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      const goods = val[0];
-      if (!goods) return;
-      const item = this.draftList[this.current];
-      item.img = goods.thumbnail;
-      item.price = goods.price;
-      item.name = goods.goodsName;
-      item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      const item = this.draftList[this.current];
-      item.url = this.$filters.formatLinkType(val);
-      item.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectLink(index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-    handleSelectImg(index){
-      // 选择图片
-      this.current = index;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    handleCancelModal() {
-      this.draftList = [];
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      const saved = this.cloneList(this.draftList);
-      this.data.options.list.splice(0, this.data.options.list.length, ...saved);
-      this.draftList = [];
-      this.showModal = false;
-    },
+import { formatLinkType } from "@/utils/filters";
+
+defineOptions({ name: "oneRowThreeColumns" });
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
   }
+});
+
+const showModal = ref(false);
+const draftList = ref([]);
+const picModelFlag = ref(false);
+const current = ref(0);
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+function cloneList(list) {
+  return JSON.parse(JSON.stringify(list || []));
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  draftList.value[current.value].img = val.url;
+}
+// 编辑模块
+function handleSelectModel() {
+  draftList.value = cloneList(props.data.options.list);
+  showModal.value = true;
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  const goods = val[0];
+  if (!goods) return;
+  const item = draftList.value[current.value];
+  item.img = goods.thumbnail;
+  item.price = goods.price;
+  item.name = goods.goodsName;
+  item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+// 选择链接回调
+function selectedLink(val) {
+  const item = draftList.value[current.value];
+  item.url = formatLinkType(val);
+  item.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+function handleSelectLink(index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+  current.value = index;
+}
+function handleSelectImg(index) {
+  // 选择图片
+  current.value = index;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function handleCancelModal() {
+  draftList.value = [];
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  const saved = cloneList(draftList.value);
+  props.data.options.list.splice(0, props.data.options.list.length, ...saved);
+  draftList.value = [];
+  showModal.value = false;
 }
 </script>
 
diff --git a/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue b/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
index c1281bb04..278e286ce 100644
--- a/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
+++ b/manager/src/views/page-decoration/modelList/onlyGoodsModel.vue
@@ -80,92 +80,97 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "onlyGoodsList",
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
-  },
-  data() {
-    return {
-      current: 0,
-      showModal: false,
-      draftList: [],
-    };
-  },
-  mounted(){
+defineOptions({ name: "onlyGoodsList" });
 
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  methods: {
-    cloneList(list) {
-      return JSON.parse(JSON.stringify(list || []));
-    },
-    // 删除商品
-    delGoods(val, i) {
-      this.draftList.splice(i, 1);
-    },
-    // 添加当前选项卡中的商品
-    addCurrentGoods() {
-      this.$refs.liliDialog.open("goods");
-    },
-    // 编辑模块
-    handleSelectModel() {
-      this.draftList = this.cloneList(this.data.options.list);
-      this.showModal = true;
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.draftList) return;
-      val.forEach((item) => {
-        if (this.isGoodsInDraftList(item)) return;
-        this.draftList.push({
-          img: item.thumbnail,
-          price: item.price,
-          title: item.goodsName,
-          desc: "",
-          skuId: item.id,
-          goodsId: item.goodsId,
-          url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
-        });
-      });
-    },
-    isGoodsInDraftList(goods) {
-      const targetUrl = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-      return this.draftList.some(
-        (draft) =>
-          (draft.skuId && String(draft.skuId) === String(goods.id)) ||
-          (draft.url && draft.url === targetUrl)
-      );
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.draftList?.length) return;
-      const item = this.draftList[this.current];
-      item.url = this.$filters.formatLinkType(val);
-      item.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectLink(index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-    handleCancelModal() {
-      this.draftList = [];
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      const saved = this.cloneList(this.draftList);
-      this.data.options.list.splice(0, this.data.options.list.length, ...saved);
-      this.draftList = [];
-      this.showModal = false;
-    },
-  },
-};
+});
+
+const current = ref(0);
+const showModal = ref(false);
+const draftList = ref([]);
+
+const liliDialog = ref(null);
+
+function cloneList(list) {
+  return JSON.parse(JSON.stringify(list || []));
+}
+
+// 删除商品
+function delGoods(val, i) {
+  draftList.value.splice(i, 1);
+}
+
+// 添加当前选项卡中的商品
+function addCurrentGoods() {
+  liliDialog.value.open("goods");
+}
+
+// 编辑模块
+function handleSelectModel() {
+  draftList.value = cloneList(props.data.options.list);
+  showModal.value = true;
+}
+
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !draftList.value) return;
+  val.forEach((item) => {
+    if (isGoodsInDraftList(item)) return;
+    draftList.value.push({
+      img: item.thumbnail,
+      price: item.price,
+      title: item.goodsName,
+      desc: "",
+      skuId: item.id,
+      goodsId: item.goodsId,
+      url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+    });
+  });
+}
+
+function isGoodsInDraftList(goods) {
+  const targetUrl = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+  return draftList.value.some(
+    (draft) =>
+      (draft.skuId && String(draft.skuId) === String(goods.id)) ||
+      (draft.url && draft.url === targetUrl)
+  );
+}
+
+// 选择链接回调
+function selectedLink(val) {
+  if (!draftList.value?.length) return;
+  const item = draftList.value[current.value];
+  item.url = formatLinkType(val);
+  item.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+
+function handleSelectLink(index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+  current.value = index;
+}
+
+function handleCancelModal() {
+  draftList.value = [];
+  showModal.value = false;
+}
+
+function handleConfirmModal() {
+  const saved = cloneList(draftList.value);
+  props.data.options.list.splice(0, props.data.options.list.length, ...saved);
+  draftList.value = [];
+  showModal.value = false;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/modelList/recommend.vue b/manager/src/views/page-decoration/modelList/recommend.vue
index bf653cd95..424b0636d 100644
--- a/manager/src/views/page-decoration/modelList/recommend.vue
+++ b/manager/src/views/page-decoration/modelList/recommend.vue
@@ -227,113 +227,111 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: {},
-    },
+import { formatLinkType } from "@/utils/filters";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}, // 历史遗留：对象默认值未用工厂函数，原样保留
   },
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      msgLeft: this.data.options.contentLeft, // 左侧数据
-      msgRight: this.data.options.contentRight, // 右侧数据
-      showModal: false, // modal显隐
-      showModal1: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确认后写回的原数据
-      picModelFlag: false, // 图片选择
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 编辑
-    handleSelectModel(item, type) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      if (type) {
-        this.showModal1 = true;
-      } else {
-        this.showModal = true;
-      }
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    handleSelectGoods(item) {
-      // 调起选择商品
-      this.$refs.liliDialog.open("goods", "single");
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      let goods = val[0];
-      this.selected.img = goods.thumbnail;
-      this.selected.price = goods.price;
-      this.selected.name = goods.goodsName;
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleCancelModal1() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-    handleConfirmModal1() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-  },
-};
+});
+
+const msgLeft = ref(props.data.options.contentLeft); // 左侧数据
+const msgRight = ref(props.data.options.contentRight); // 右侧数据
+const showModal = ref(false); // modal显隐
+const showModal1 = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确认后写回的原数据
+const picModelFlag = ref(false); // 图片选择
+
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 编辑
+function handleSelectModel(item, type) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  if (type) {
+    showModal1.value = true;
+  } else {
+    showModal.value = true;
+  }
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+}
+function handleSelectGoods(item) {
+  // 调起选择商品
+  liliDialog.value.open("goods", "single");
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  let goods = val[0];
+  selected.value.img = goods.thumbnail;
+  selected.value.price = goods.price;
+  selected.value.name = goods.goodsName;
+  selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleCancelModal1() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
+function handleConfirmModal1() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/manager/src/views/page-decoration/modelList/seckill-only-album.vue b/manager/src/views/page-decoration/modelList/seckill-only-album.vue
index d66de3b71..47e73c310 100644
--- a/manager/src/views/page-decoration/modelList/seckill-only-album.vue
+++ b/manager/src/views/page-decoration/modelList/seckill-only-album.vue
@@ -35,103 +35,100 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      options: this.data.options, // 当前数据
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
-      actName: "限时秒杀",
-      currHour: "00", // 当前秒杀场
-      diffSeconds: 0, // 倒地时
-      hours: "00", // 小时
-      minutes: "00", // 分钟
-      seconds: "00", // 秒
-      interval: undefined, // 定时器
-    };
-  },
-  watch: {
-    diffSeconds(val) {
-      const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
-      const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-      const seconds = val % 60;
-      this.hours = hours < 10 ? "0" + hours : hours;
-      this.minutes = minutes < 10 ? "0" + minutes : minutes;
-      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 
-      if (val === 0) {
-        clearInterval(this.interval);
-        this.hours = 0;
-        this.minutes = 0;
-        this.seconds = 0;
-        this.countDown(this.options.list);
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+const options = ref(props.data.options); // 当前数据
+const actStatus = ref(0); // 0 未开始  1 进行中   2 已结束
+const actName = ref("限时秒杀");
+const currHour = ref("00"); // 当前秒杀场
+const diffSeconds = ref(0); // 倒地时
+const hours = ref("00"); // 小时
+const minutes = ref("00"); // 分钟
+const seconds = ref("00"); // 秒
+const interval = ref(undefined); // 定时器
+
+watch(diffSeconds, (val) => {
+  const hours = Math.floor(val / 3600);
+  // 当前秒数 / 60，向下取整
+  // 获取到所有分钟数 3600 / 60 = 60分钟
+  // 对60取模，超过小时数的分钟数
+  const minutes = Math.floor(val / 60) % 60;
+  // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+  const seconds = val % 60;
+  hours.value = hours < 10 ? "0" + hours : hours;
+  minutes.value = minutes < 10 ? "0" + minutes : minutes;
+  seconds.value = seconds < 10 ? "0" + seconds : seconds;
+
+  if (val === 0) {
+    clearInterval(interval.value);
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    countDown(options.value.list);
+  }
+});
+
+onMounted(() => {
+  countDown(options.value.list);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value);
+});
+
+// 倒计时
+function countDown(list) {
+  /**
+   * 默认倒计时两小时
+   * 如果没有开始，则显示未开始
+   * 进行中显示倒计时
+   * 今天的秒杀结束则显示已结束
+   */
+  let nowHour = new Date().getHours();
+  if (nowHour < Number(list[0].time)) {
+    // 活动未开始
+    currHour.value = list[0].time;
+    actStatus.value = 0;
+  } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+    // 活动已结束
+    actStatus.value = 2;
+    currHour.value = list[list.length - 1].time;
+  } else {
+    // 活动进行中
+    actStatus.value = 1;
+    for (let i = 0; i < list.length; i++) {
+      if (nowHour == Number(list[i].time)) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-  mounted() {
-    this.countDown(this.options.list);
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    // 倒计时
-    countDown(list) {
-      /**
-       * 默认倒计时两小时
-       * 如果没有开始，则显示未开始
-       * 进行中显示倒计时
-       * 今天的秒杀结束则显示已结束
-       */
-      let nowHour = new Date().getHours();
-      if (nowHour < Number(list[0].time)) {
-        // 活动未开始
-        this.currHour = list[0].time;
-        this.actStatus = 0;
-      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
-        // 活动已结束
-        this.actStatus = 2;
-        this.currHour = list[list.length - 1].time;
-      } else {
-        // 活动进行中
-        this.actStatus = 1;
-        for (let i = 0; i < list.length; i++) {
-          if (nowHour == Number(list[i].time)) {
-            this.currHour = list[i].time;
-          }
-          if (
-            nowHour > Number(list[i].time) &&
-            nowHour < Number(list[i].time + 2)
-          ) {
-            this.currHour = list[i].time;
-          }
-        }
-        // 当前0点时间戳
-        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-        // 活动倒计时
-        this.diffSeconds = Math.floor(
-          (zeroTime +
-            3600 * 1000 * (this.currHour + 2) -
-            new Date().getTime()) /
-          1000
-        );
-        this.interval = setInterval(() => {
-          this.diffSeconds--;
-        }, 1000);
+      if (
+        nowHour > Number(list[i].time) &&
+        nowHour < Number(list[i].time + 2)
+      ) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-};
+    }
+    // 当前0点时间戳
+    let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+    // 活动倒计时
+    diffSeconds.value = Math.floor(
+      (zeroTime +
+        3600 * 1000 * (currHour.value + 2) -
+        new Date().getTime()) /
+      1000
+    );
+    interval.value = setInterval(() => {
+      diffSeconds.value--;
+    }, 1000);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .seckill {
diff --git a/manager/src/views/page-decoration/modelList/seckill.vue b/manager/src/views/page-decoration/modelList/seckill.vue
index bbc9682a6..2c03d2311 100644
--- a/manager/src/views/page-decoration/modelList/seckill.vue
+++ b/manager/src/views/page-decoration/modelList/seckill.vue
@@ -35,103 +35,100 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      options: this.data.options, // 当前数据
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
-      actName: "限时秒杀",
-      currHour: "00", // 当前秒杀场
-      diffSeconds: 0, // 倒地时
-      hours: "00", // 小时
-      minutes: "00", // 分钟
-      seconds: "00", // 秒
-      interval: undefined, // 定时器
-    };
-  },
-  watch: {
-    diffSeconds(val) {
-      const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
-      const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-      const seconds = val % 60;
-      this.hours = hours < 10 ? "0" + hours : hours;
-      this.minutes = minutes < 10 ? "0" + minutes : minutes;
-      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 
-      if (val === 0) {
-        clearInterval(this.interval);
-        this.hours = 0;
-        this.minutes = 0;
-        this.seconds = 0;
-        this.countDown(this.options.list);
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+const options = ref(props.data.options); // 当前数据
+const actStatus = ref(0); // 0 未开始  1 进行中   2 已结束
+const actName = ref("限时秒杀");
+const currHour = ref("00"); // 当前秒杀场
+const diffSeconds = ref(0); // 倒地时
+const hours = ref("00"); // 小时
+const minutes = ref("00"); // 分钟
+const seconds = ref("00"); // 秒
+const interval = ref(undefined); // 定时器
+
+watch(diffSeconds, (val) => {
+  const h = Math.floor(val / 3600);
+  // 当前秒数 / 60，向下取整
+  // 获取到所有分钟数 3600 / 60 = 60分钟
+  // 对60取模，超过小时数的分钟数
+  const m = Math.floor(val / 60) % 60;
+  // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+  const s = val % 60;
+  hours.value = h < 10 ? "0" + h : h;
+  minutes.value = m < 10 ? "0" + m : m;
+  seconds.value = s < 10 ? "0" + s : s;
+
+  if (val === 0) {
+    clearInterval(interval.value);
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    countDown(options.value.list);
+  }
+});
+
+onMounted(() => {
+  countDown(options.value.list);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value);
+});
+
+// 倒计时
+function countDown(list) {
+  /**
+   * 默认倒计时两小时
+   * 如果没有开始，则显示未开始
+   * 进行中显示倒计时
+   * 今天的秒杀结束则显示已结束
+   */
+  let nowHour = new Date().getHours();
+  if (nowHour < Number(list[0].time)) {
+    // 活动未开始
+    currHour.value = list[0].time;
+    actStatus.value = 0;
+  } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+    // 活动已结束
+    actStatus.value = 2;
+    currHour.value = list[list.length - 1].time;
+  } else {
+    // 活动进行中
+    actStatus.value = 1;
+    for (let i = 0; i < list.length; i++) {
+      if (nowHour == Number(list[i].time)) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-  mounted() {
-    this.countDown(this.options.list);
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    // 倒计时
-    countDown(list) {
-      /**
-       * 默认倒计时两小时
-       * 如果没有开始，则显示未开始
-       * 进行中显示倒计时
-       * 今天的秒杀结束则显示已结束
-       */
-      let nowHour = new Date().getHours();
-      if (nowHour < Number(list[0].time)) {
-        // 活动未开始
-        this.currHour = list[0].time;
-        this.actStatus = 0;
-      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
-        // 活动已结束
-        this.actStatus = 2;
-        this.currHour = list[list.length - 1].time;
-      } else {
-        // 活动进行中
-        this.actStatus = 1;
-        for (let i = 0; i < list.length; i++) {
-          if (nowHour == Number(list[i].time)) {
-            this.currHour = list[i].time;
-          }
-          if (
-            nowHour > Number(list[i].time) &&
-            nowHour < Number(list[i].time + 2)
-          ) {
-            this.currHour = list[i].time;
-          }
-        }
-        // 当前0点时间戳
-        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-        // 活动倒计时
-        this.diffSeconds = Math.floor(
-          (zeroTime +
-            3600 * 1000 * (this.currHour + 2) -
-            new Date().getTime()) /
-            1000
-        );
-        this.interval = setInterval(() => {
-          this.diffSeconds--;
-        }, 1000);
+      if (
+        nowHour > Number(list[i].time) &&
+        nowHour < Number(list[i].time + 2)
+      ) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-};
+    }
+    // 当前0点时间戳
+    let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+    // 活动倒计时
+    diffSeconds.value = Math.floor(
+      (zeroTime +
+        3600 * 1000 * (currHour.value + 2) -
+        new Date().getTime()) /
+        1000
+    );
+    interval.value = setInterval(() => {
+      diffSeconds.value--;
+    }, 1000);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .seckill {
diff --git a/manager/src/views/page-decoration/renovation.vue b/manager/src/views/page-decoration/renovation.vue
index 322592ddc..591fc1d1f 100644
--- a/manager/src/views/page-decoration/renovation.vue
+++ b/manager/src/views/page-decoration/renovation.vue
@@ -21,7 +21,7 @@
       </draggable>
     </div>
     <div class="show-content">
-      <model-form ref="modelForm" :data="modelForm"></model-form>
+      <model-form ref="modelFormRef" :data="modelForm"></model-form>
     </div>
     <div class="btn-bar" :class="{'top':isHiddenBar}">
       <el-button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</el-button>
@@ -31,139 +31,138 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { Picture } from "@element-plus/icons-vue";
 import { modelData } from "./modelConfig";
 import Draggable from "vuedraggable";
 import ModelForm from "./modelForm.vue";
 import * as API_floor from "@/api/other.js";
-export default {
-  components: {
-    Draggable,
-    ModelForm,
-    Picture,
-  },
-  mounted() {
-    const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
-    this.isHiddenBar = setting.isUseTabsRouter
-     const cache = this.getStore('managerPCPageCache')
-    this.hasCache = !!cache;
-      if(cache){
-        this.$Modal.confirm({
-        title: '提示',
-        content: '获取到本地有缓存数据，是否使用缓存数据？',
-        okText: '使用',
-        cancelText: '取消',
-        onOk: () => {
-          this.applyPageData(cache);
-        }
-      });
+import { Message, Modal } from "@/utils/message";
+import { getStore, setStore } from "@/libs/storage";
+
+const route = useRoute();
+
+const hasCache = ref(false);
+// modelData 为 import 常量，模板中直接使用
+const modelForm = ref({ list: [] });
+const submitLoading = ref(false);
+const isHiddenBar = ref(true);
+
+// modelFormRef：模板 ref 与 data 的 modelForm 同名会互相覆盖，改名避免冲突
+const modelFormRef = ref(null);
+
+onMounted(() => {
+  const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
+  isHiddenBar.value = setting.isUseTabsRouter
+   const cache = getStore('managerPCPageCache')
+  hasCache.value = !!cache;
+    if(cache){
+      Modal.confirm({
+      title: '提示',
+      content: '获取到本地有缓存数据，是否使用缓存数据？',
+      okText: '使用',
+      cancelText: '取消',
+      onOk: () => {
+        applyPageData(cache);
+      }
+    });
+  }
+  getTemplateItem(route.query.id);
+});
+
+function getModelKey(model) {
+  return model.type || model.name;
+}
+function cloneModel(model) {
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  const cloned = JSON.parse(JSON.stringify(model));
+  return {
+    ...cloned,
+    key,
+    model: cloned.type + "_" + key,
+  };
+}
+function clearCache(){
+  setStore('managerPCPageCache', '')
+  Message.success('清除成功')
+}
+function witeLocalStore(){
+  const data ={...modelForm.value}
+  data.list.unshift(modelFormRef.value.navList);
+  data.list.unshift(modelFormRef.value.topAdvert);
+  setStore('managerPCPageCache', data)
+  Message.success('写入成功')
+}
+function saveTemplate() {
+  submitTemplate(route.query.pageShow ? 'OPEN' : 'CLOSE')
+}
+function submitTemplate(pageShow) {
+  submitLoading.value = true
+  const form = JSON.parse(JSON.stringify(modelForm.value))
+  form.list.unshift(modelFormRef.value.navList);
+  form.list.unshift(modelFormRef.value.topAdvert);
+  const data = {
+    id: route.query.id,
+    pageData: JSON.stringify(form),
+    pageShow: route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
+    pageClientType: 'PC',
+  };
+  API_floor.updateHome(route.query.id, data).then((res) => {
+    submitLoading.value = false
+    if (res.success) {
+      Message.success("保存模板成功");
     }
-    this.getTemplateItem(this.$route.query.id);
-  },
-  data() {
-    return {
-      hasCache:false,
-      modelData,
-      modelForm: { list: [] },
-      submitLoading: false,
-      isHiddenBar:true,
-    };
-  },
-  methods: {
-    getModelKey(model) {
-      return model.type || model.name;
-    },
-    cloneModel(model) {
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      const cloned = JSON.parse(JSON.stringify(model));
-      return {
-        ...cloned,
-        key,
-        model: cloned.type + "_" + key,
-      };
-    },
-    clearCache(){
-      this.setStore('managerPCPageCache', '')
-      this.$Message.success('清除成功')
-    },
-    witeLocalStore(){
-      const data ={...this.modelForm}
-      data.list.unshift(this.$refs.modelForm.navList);
-      data.list.unshift(this.$refs.modelForm.topAdvert);
-      this.setStore('managerPCPageCache', data)
-      this.$Message.success('写入成功')
-    },
-    saveTemplate() {
-      this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
-    },
-    submitTemplate(pageShow) {
-      this.submitLoading = true
-      const modelForm = JSON.parse(JSON.stringify(this.modelForm))
-      modelForm.list.unshift(this.$refs.modelForm.navList);
-      modelForm.list.unshift(this.$refs.modelForm.topAdvert);
-      const data = {
-        id: this.$route.query.id,
-        pageData: JSON.stringify(modelForm),
-        pageShow: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
-        pageClientType: 'PC',
-      };
-      API_floor.updateHome(this.$route.query.id, data).then((res) => {
-        this.submitLoading = false
-        if (res.success) {
-          this.$Message.success("保存模板成功");
-        }
-      });
-    },
-    resetTemplate() {
-      this.getTemplateItem(this.$route.query.id);
-    },
-    applyPageData(raw) {
-      const empty = { list: [] };
-      if (raw == null || raw === "") {
-        this.modelForm = empty;
-        return;
-      }
-      let pageData = raw;
-      if (typeof raw === "string") {
-        try {
-          pageData = JSON.parse(raw);
-        } catch {
-          this.modelForm = empty;
-          return;
-        }
-      }
-      const list = Array.isArray(pageData)
-        ? pageData
-        : Array.isArray(pageData?.list)
-          ? pageData.list
-          : [];
-      const form = Array.isArray(pageData) ? { list } : { ...pageData, list };
-      if (list[0]?.type === "topAdvert") {
-        this.$refs.modelForm.topAdvert = list[0];
-        if (list[1]) {
-          this.$refs.modelForm.navList = list[1];
-        }
-        this.modelForm = { ...form, list: list.slice(2) };
-        return;
-      }
-      this.modelForm = { ...form, list };
-    },
-    getTemplateItem(id) {
-      API_floor.getHomeData(id).then((res) => {
-        if (res.success) {
-          this.applyPageData(res.result?.pageData);
-        }
-      });
-    },
-  },
-  watch: {
-    modelForm: {
-      deep: true,
-      handler: function (val) {},
-    },
-  },
-};
+  });
+}
+function resetTemplate() {
+  getTemplateItem(route.query.id);
+}
+function applyPageData(raw) {
+  const empty = { list: [] };
+  if (raw == null || raw === "") {
+    modelForm.value = empty;
+    return;
+  }
+  let pageData = raw;
+  if (typeof raw === "string") {
+    try {
+      pageData = JSON.parse(raw);
+    } catch {
+      modelForm.value = empty;
+      return;
+    }
+  }
+  const list = Array.isArray(pageData)
+    ? pageData
+    : Array.isArray(pageData?.list)
+      ? pageData.list
+      : [];
+  const form = Array.isArray(pageData) ? { list } : { ...pageData, list };
+  if (list[0]?.type === "topAdvert") {
+    modelFormRef.value.topAdvert = list[0];
+    if (list[1]) {
+      modelFormRef.value.navList = list[1];
+    }
+    modelForm.value = { ...form, list: list.slice(2) };
+    return;
+  }
+  modelForm.value = { ...form, list };
+}
+function getTemplateItem(id) {
+  API_floor.getHomeData(id).then((res) => {
+    if (res.success) {
+      applyPageData(res.result?.pageData);
+    }
+  });
+}
+
+watch(
+  modelForm,
+  function (val) {},
+  { deep: true }
+);
 </script>
 <style lang="scss" scoped>
 .renovation {
diff --git a/manager/src/views/page-decoration/theme-setting.vue b/manager/src/views/page-decoration/theme-setting.vue
index 84c826bb5..78cd5dcfa 100644
--- a/manager/src/views/page-decoration/theme-setting.vue
+++ b/manager/src/views/page-decoration/theme-setting.vue
@@ -222,9 +222,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
 import { getSetting, setSetting } from "@/api/index";
 import { QuestionFilled } from "@element-plus/icons-vue";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "theme-setting" });
 
 const SETTING_KEY = "THEME_SETTING";
 
@@ -242,111 +246,103 @@ const PRESET_THEMES = [
   { themeColor: "#000000", aiderLightColor: "#434343", paleColor: "#F5F5F5" },
 ];
 
-export default {
-  name: "theme-setting",
-  components: { QuestionFilled },
-  data() {
-    return {
-      loading: false,
-      saveLoading: false,
-      presetThemes: PRESET_THEMES,
-      form: {
-        mode: "custom",
-        themeColor: "#ff3c2a",
-        aiderLightColor: "#ff9f28",
-      },
-    };
-  },
-  computed: {
-    // 与移动端一致：提交订单等按钮为 主题色(91deg)→辅助色 渐变
-    // 见 lilishop-uniapp/pages/order/fillorder.vue .tabbar-right
-    gradient() {
-      return `linear-gradient(91deg, ${this.form.themeColor} 1%, ${this.form.aiderLightColor} 99%)`;
-    },
-    // 与移动端 --theme-primary-10 一致：主题色 10% 透明度浅底
-    tint() {
-      const hex = this.form.themeColor.replace("#", "");
-      if (hex.length !== 6) return "rgba(0,0,0,0.04)";
-      const r = parseInt(hex.slice(0, 2), 16);
-      const g = parseInt(hex.slice(2, 4), 16);
-      const b = parseInt(hex.slice(4, 6), 16);
-      return `rgba(${r}, ${g}, ${b}, 0.1)`;
-    },
-    // 标签 / 规格选中态：主题色文字 + 主题色描边 + 10% 浅底
-    tagStyle() {
-      return {
-        color: this.form.themeColor,
-        borderColor: this.form.themeColor,
-        background: this.tint,
-      };
-    },
-    // 小标签（满减/券/自营）：白底 + 主题色描边
-    outlineTagStyle() {
-      return {
-        color: this.form.themeColor,
-        borderColor: this.form.themeColor,
-        background: "#fff",
-      };
-    },
-  },
-  mounted() {
-    this.loadSetting();
-  },
-  methods: {
-    isActivePreset(item) {
-      return (
-        this.form.themeColor.toLowerCase() === item.themeColor.toLowerCase() &&
-        this.form.aiderLightColor.toLowerCase() === item.aiderLightColor.toLowerCase()
-      );
-    },
-    selectPreset(item) {
-      this.form.themeColor = item.themeColor;
-      this.form.aiderLightColor = item.aiderLightColor;
-    },
-    loadSetting() {
-      this.loading = true;
-      getSetting(SETTING_KEY)
-        .then((res) => {
-          if (res.success && res.result) {
-            const data = res.result;
-            this.form = {
-              mode: data.mode || "custom",
-              themeColor: data.themeColor || this.form.themeColor,
-              aiderLightColor: data.aiderLightColor || this.form.aiderLightColor,
-            };
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    submit() {
-      if (!this.form.themeColor || !this.form.aiderLightColor) {
-        this.$Message.error("请选择主题色和辅助色");
-        return;
+const loading = ref(false);
+const saveLoading = ref(false);
+const presetThemes = ref(PRESET_THEMES);
+// form 在 loadSetting 中被整体替换，使用 ref
+const form = ref({
+  mode: "custom",
+  themeColor: "#ff3c2a",
+  aiderLightColor: "#ff9f28",
+});
+
+// 与移动端一致：提交订单等按钮为 主题色(91deg)→辅助色 渐变
+// 见 lilishop-uniapp/pages/order/fillorder.vue .tabbar-right
+const gradient = computed(() => {
+  return `linear-gradient(91deg, ${form.value.themeColor} 1%, ${form.value.aiderLightColor} 99%)`;
+});
+// 与移动端 --theme-primary-10 一致：主题色 10% 透明度浅底
+const tint = computed(() => {
+  const hex = form.value.themeColor.replace("#", "");
+  if (hex.length !== 6) return "rgba(0,0,0,0.04)";
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, 0.1)`;
+});
+// 标签 / 规格选中态：主题色文字 + 主题色描边 + 10% 浅底
+const tagStyle = computed(() => {
+  return {
+    color: form.value.themeColor,
+    borderColor: form.value.themeColor,
+    background: tint.value,
+  };
+});
+// 小标签（满减/券/自营）：白底 + 主题色描边
+const outlineTagStyle = computed(() => {
+  return {
+    color: form.value.themeColor,
+    borderColor: form.value.themeColor,
+    background: "#fff",
+  };
+});
+
+onMounted(() => {
+  loadSetting();
+});
+
+function isActivePreset(item) {
+  return (
+    form.value.themeColor.toLowerCase() === item.themeColor.toLowerCase() &&
+    form.value.aiderLightColor.toLowerCase() === item.aiderLightColor.toLowerCase()
+  );
+}
+function selectPreset(item) {
+  form.value.themeColor = item.themeColor;
+  form.value.aiderLightColor = item.aiderLightColor;
+}
+function loadSetting() {
+  loading.value = true;
+  getSetting(SETTING_KEY)
+    .then((res) => {
+      if (res.success && res.result) {
+        const data = res.result;
+        form.value = {
+          mode: data.mode || "custom",
+          themeColor: data.themeColor || form.value.themeColor,
+          aiderLightColor: data.aiderLightColor || form.value.aiderLightColor,
+        };
       }
-      this.saveLoading = true;
-      // lightColor（价格文字、进度条高亮）与主题色保持一致
-      const payload = {
-        mode: this.form.mode,
-        themeColor: this.form.themeColor,
-        lightColor: this.form.themeColor,
-        aiderLightColor: this.form.aiderLightColor,
-      };
-      setSetting(SETTING_KEY, payload)
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功");
-          } else {
-            this.$Message.error("保存失败");
-          }
-        })
-        .finally(() => {
-          this.saveLoading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function submit() {
+  if (!form.value.themeColor || !form.value.aiderLightColor) {
+    Message.error("请选择主题色和辅助色");
+    return;
+  }
+  saveLoading.value = true;
+  // lightColor（价格文字、进度条高亮）与主题色保持一致
+  const payload = {
+    mode: form.value.mode,
+    themeColor: form.value.themeColor,
+    lightColor: form.value.themeColor,
+    aiderLightColor: form.value.aiderLightColor,
+  };
+  setSetting(SETTING_KEY, payload)
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+      } else {
+        Message.error("保存失败");
+      }
+    })
+    .finally(() => {
+      saveLoading.value = false;
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/wap/advertising.vue b/manager/src/views/page-decoration/wap/advertising.vue
index 64b4b1034..018adff60 100644
--- a/manager/src/views/page-decoration/wap/advertising.vue
+++ b/manager/src/views/page-decoration/wap/advertising.vue
@@ -82,90 +82,91 @@
         <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
       <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+         <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManageRef" />
       </el-dialog>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted, nextTick } from "vue";
+import { useRoute } from "vue-router";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import * as API_Other from "@/api/other.js";
-export default {
-   components: {
-    ossManage,
-  },
-  data() {
-    return {
-      result:"",
-      picModelFlag: false, //图片选择器
-      type: "full", // 是否全屏
+import { useAppStore } from "@/stores/app";
 
-      //全屏广告
-      advertising: [
-         {
-          img:
-            "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
-          size: "750*1624",
-        },
-      ],
-      selectedLinks: {},
-      linkType: "", // 选择类型
-    };
-  },
-   watch: {
-    advertising: {
-      handler(val) {
-        this.$store.state.openStyleStore = val;
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.openPage();
-  },
-  methods: {
-    openPage() {
-      const alertType = this.$route.query.pagetype;
-      const pageType = {
-        INDEX: "INDEX",
-        ALERT: "OPEN_SCREEN_PAGE",
-        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
-      }[alertType ? alertType : "INDEX"];
+const route = useRoute();
+const appStore = useAppStore();
 
-      API_Other.getOpenHomeData(pageType).then((res) => {
-        this.$store.state.openStoreId = res.result.id;
-        if (res.result.pageData) {
-          this.advertising = [JSON.parse(res.result.pageData)];
-        }
-        this.result = res.result
-      });
-    },
-    // 点击链接
-    clickLink(item) {
-      this.$refs.liliDialog.open('link')
-    },
-    // 回调选择的链接
-    selectedLink(val) {
-      this.selectedLinks.url = val;
+const result = ref("");
+const picModelFlag = ref(false); //图片选择器
+const type = ref("full"); // 是否全屏
 
-      this.advertising[0].config = val;
-    },
-    // 点击选择照片
-    handleClickFile() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    }, // 图片选择器回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.advertising[0].img = val.url;
+//全屏广告
+const advertising = ref([
+  {
+    img:
+      "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
+    size: "750*1624",
+  },
+]);
+const selectedLinks = reactive({});
+const linkType = ref(""); // 选择类型
+
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+watch(
+  advertising,
+  (val) => {
+    appStore.openStyleStore = val;
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  openPage();
+});
+
+function openPage() {
+  const alertType = route.query.pagetype;
+  const pageType = {
+    INDEX: "INDEX",
+    ALERT: "OPEN_SCREEN_PAGE",
+    OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+  }[alertType ? alertType : "INDEX"];
+
+  API_Other.getOpenHomeData(pageType).then((res) => {
+    appStore.openStoreId = res.result.id;
+    if (res.result.pageData) {
+      advertising.value = [JSON.parse(res.result.pageData)];
     }
-  },
-};
+    result.value = res.result
+  });
+}
+// 点击链接
+function clickLink(item) {
+  liliDialog.value.open('link')
+}
+// 回调选择的链接
+function selectedLink(val) {
+  selectedLinks.url = val;
+
+  advertising.value[0].config = val;
+}
+// 点击选择照片
+function handleClickFile() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+} // 图片选择器回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  advertising.value[0].img = val.url;
+}
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/views/page-decoration/wap/alertAdvertising.vue b/manager/src/views/page-decoration/wap/alertAdvertising.vue
index b0cac7320..fb884fa38 100644
--- a/manager/src/views/page-decoration/wap/alertAdvertising.vue
+++ b/manager/src/views/page-decoration/wap/alertAdvertising.vue
@@ -85,104 +85,110 @@
         ></liliDialog>
       </div>
       <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" ref="ossManageRef" />
     </el-dialog>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, watch, nextTick, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import * as API_Other from "@/api/other.js";
-export default {
-   components: {
-    ossManage,
+import { useAppStore } from "@/stores/app";
+
+const route = useRoute();
+const appStore = useAppStore();
+
+const result = ref("");
+const picModelFlag = ref(false); //图片选择器
+const type = ref("full"); // 展示方式
+//全屏广告
+const advertising = ref([
+  {
+    img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
+    size: "612*836",
   },
-  data() {
-    return {
-      result:"",
-      picModelFlag: false, //图片选择器
-      type: "full", // 展示方式
-      //全屏广告
-      advertising: [
-        {
-          img:
-            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
-          size: "612*836",
-        },
-      ],
-      linkType: "", // 选择类型
-      selectedLinks: {},
+]);
+const linkType = ref(""); // 选择类型
+const selectedLinks = reactive({});
+
+const liliDialog = ref(null);
+// files：v-for 文件输入框 ref，脚本内未直接读取（changeFile 通过 document.getElementById 取值）
+const files = ref([]);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+watch(
+  advertising,
+  (val) => {
+    appStore.openStyleStore = val;
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  openPage();
+});
+
+// 回调选择的链接
+function selectedLink(val) {
+  selectedLinks.url = val;
+
+  advertising.value[0].config = val;
+}
+
+function openPage() {
+  const alertType = route.query.pagetype;
+  const pageType = {
+    INDEX: "INDEX",
+    ALERT: "OPEN_SCREEN_PAGE",
+    OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+  }[alertType ? alertType : "INDEX"];
+
+  API_Other.getOpenHomeData(pageType).then((res) => {
+    appStore.openStoreId = res.result.id;
+    if (res.result.pageData) {
+      advertising.value = [JSON.parse(res.result.pageData)];
+    }
+    result.value = res.result;
+  });
+}
+
+// 图片选择器回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  advertising.value[0].img = val.url;
+}
+
+// 点击选择图片
+function handleClickFile(item, index) {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+// 点击链接
+function clickLink(item) {
+  liliDialog.value.open("link");
+}
+
+//点击图片解析成base64
+function changeFile(item, index) {
+  const file = document.getElementById("files" + index).files[0];
+  if (file == void 0) return false;
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  nextTick((res) => {
+    reader.onload = (e) => {
+      item.img = e.target.result;
     };
-  },
-
-  watch: {
-    advertising: {
-      handler(val) {
-        this.$store.state.openStyleStore = val;
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.openPage();
-  },
-  methods: {
-    // 回调选择的链接
-    selectedLink(val) {
-      this.selectedLinks.url = val;
-
-      this.advertising[0].config = val;
-    },
-    openPage() {
-      const alertType = this.$route.query.pagetype;
-      const pageType = {
-        INDEX: "INDEX",
-        ALERT: "OPEN_SCREEN_PAGE",
-        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
-      }[alertType ? alertType : "INDEX"];
-
-      API_Other.getOpenHomeData(pageType).then((res) => {
-        this.$store.state.openStoreId = res.result.id;
-        if (res.result.pageData) {
-          this.advertising = [JSON.parse(res.result.pageData)];
-        }
-        this.result = res.result
-      });
-    },
-    // 图片选择器回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.advertising[0].img = val.url;
-    },
-    // 点击选择图片
-    handleClickFile(item, index) {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 点击链接
-    clickLink(item) {
-      this.$refs.liliDialog.open('link')
-    },
-    //点击图片解析成base64
-    changeFile(item, index) {
-      const file = document.getElementById("files" + index).files[0];
-      if (file == void 0) return false;
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
-    },
-
-  },
-};
+  });
+}
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/views/page-decoration/wap/decorate.vue b/manager/src/views/page-decoration/wap/decorate.vue
index 08dc33d49..d0680f646 100644
--- a/manager/src/views/page-decoration/wap/decorate.vue
+++ b/manager/src/views/page-decoration/wap/decorate.vue
@@ -524,7 +524,7 @@
       </template>
     </el-dialog>
 
-    <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
+    <hotzone ref="hotzoneRef" @changeZone="changeZone"></hotzone>
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
@@ -532,13 +532,15 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, nextTick } from "vue";
 import { CircleClose } from "@element-plus/icons-vue";
+import { Message } from "@/utils/message";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
 import hotzone from "@/components/hotzone";
@@ -548,316 +550,307 @@ import VideoConfig from "./video-config";
 import alignTextLeft from "@/assets/align-text-left.png";
 import alignTextCenter from "@/assets/align-text-center.png";
 import alignTextRight from "@/assets/align-text-right.png";
-export default {
-  components: {
-    ossManage,
-    hotzone,
-    categoryTemplate,
-    CircleClose,
-    VideoConfig,
-  },
-  data() {
+
+const props = defineProps(["res"]);
+const emit = defineEmits(["handleDrawer"]);
+
+// alignTextLeft/alignTextCenter/alignTextRight、ways(选择链接的类型)、modelData(装修数据) 为 import 常量，模板中直接使用
+const picModelFlag = ref(false); //图片选择器
+const linkType = ref("goods"); // dialog弹窗口类型
+const styleFlag = ref(false); //广告魔方开关
+const textAlign = ref(
+  props.res.options.list[0] ? props.res.options.list[0].textAlign : "center"
+); //文字对齐方式
+const promotionsFlag = ref(false); //广告魔方开关
+const selectedLinkIndex = ref(""); //选择链接的索引
+const selectedGoods = ref(""); // 已选商品
+const selectedLinks = ref(""); // 已选链接
+const modelList = ref(""); // 装修列表
+const enableSelectCategory = ref(false); //商品是否绑定分类
+const pendingCategory = ref(null); // 选择分类弹窗草稿
+const goodsSelectedIndex = ref(0); //绑定商品分类的索引
+const pictureField = ref("img"); //图片选择器回写的字段
+
+// hotzoneRef/ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const hotzoneRef = ref(null);
+const ossManageRef = ref(null);
+
+watch(
+  () => props.res,
+  (val) => {},
+  { deep: true }
+);
+
+// 选择分类（弹窗内暂存，确定后写回）
+function onCategorySelected(val) {
+  pendingCategory.value = val;
+}
+function handleCancelCategoryModal() {
+  pendingCategory.value = null;
+  enableSelectCategory.value = false;
+}
+function handleConfirmCategoryModal() {
+  if (pendingCategory.value?.length) {
+    confirmCategory(pendingCategory.value);
+  }
+  pendingCategory.value = null;
+  enableSelectCategory.value = false;
+}
+function confirmCategory(val) {
+  let data = {
+    ...props.res.options.list[0].titleWay[goodsSelectedIndex.value],
+  };
+  let callback = {
+    id: val[0].id,
+    name: val[0].name,
+    categoryIdWay: val[0].id,
+  };
+  data = {
+    ...data,
+    bindCategory: callback,
+  };
+  props.res.options.list[0].listWay = props.res.options.list[0].listWay.filter(
+    (item) => {
+      return item.___index != goodsSelectedIndex.value;
+    }
+  );
+  props.res.options.list[0].titleWay[goodsSelectedIndex.value] = data;
+}
+// 商品排序
+function slotGoods(list, key, val) {
+  const newVal = [];
+  let newValIndex = 0;
+  // 给当前点击的商品分组
+  list.forEach((item, index) => {
+    if (item.___index == key) {
+      newVal.push(item);
+    }
+  });
+  // 获得当前点击商品的索引
+  newVal.forEach((item, index) => {
+    if (item.id == val.id) {
+      newValIndex = index;
+    }
+  });
+  // 进行商品排序
+  upData(newVal, newValIndex);
+  if (list.length == newVal.length) {
+    list = newVal;
+  } else {
+    let newList;
+    newVal.forEach((item, index) => {
+      newList = list.filter((child) => {
+        return child.id != item.id && child.___index != key;
+      });
+    });
+    list = [...newList, ...newVal];
+  }
+
+  props.res.options.list[0]["listWay"] = list;
+}
+
+// 轮播图排序
+function slotBanner(val, key, index, down) {
+  if (down == "down") {
+    downData(val.options.list, index);
+  } else {
+    upData(val.options.list, index);
+  }
+}
+function upData(arr, index) {
+  let newArr = [];
+  if (arr.length > 1 && index !== 0) {
+    newArr = swapItems(arr, index, index - 1);
+  }
+  return newArr;
+}
+function swapItems(arr, index1, index2) {
+  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+  return arr;
+}
+function downData(arr, index) {
+  let newArr = [];
+  if (arr.length > 1 && index !== arr.length - 1) {
+    newArr = swapItems(arr, index, index + 1);
+  }
+  return newArr;
+}
+// 改变横纵切换title内容
+function changeDirection(val, data) {
+  if (val == "horizontal") {
+    const props = { ...data };
+    data.title = [];
+    data.title.push(props.title[0]);
+  }
+}
+// 选择风格
+function selectStyle() {
+  styleFlag.value = !styleFlag.value;
+}
+function selectPromotions() {
+  promotionsFlag.value = !promotionsFlag.value;
+}
+// 回调选择的链接
+function selectedLink(val) {
+  selectedLinks.value.zoneInfo = [];
+  delete val.selected;
+  delete val.intro;
+  delete val.mobileIntro;
+  selectedLinks.value.url = val;
+}
+// 回调的商品信息
+function selectedGoodsData(val) {
+  if (!val) return false;
+  let data = val.map((item) => {
+    delete item.selected;
+    delete item.intro;
+    delete item.mobileIntro;
     return {
-      alignTextLeft,
-      alignTextCenter,
-      alignTextRight,
-      ways, // 选择链接的类型
-      picModelFlag: false, //图片选择器
-      linkType: "goods", // dialog弹窗口类型
-      styleFlag: false, //广告魔方开关
-      textAlign: this.res.options.list[0]
-        ? this.res.options.list[0].textAlign
-        : "center", //文字对齐方式
-      promotionsFlag: false, //广告魔方开关
-      selectedLinkIndex: "", //选择链接的索引
-      modelData, // 装修数据
-      selectedGoods: "", // 已选商品
-      selectedLinks: "", // 已选链接
-      modelList: "", // 装修列表
-      enableSelectCategory: false, //商品是否绑定分类
-      pendingCategory: null, // 选择分类弹窗草稿
-      goodsSelectedIndex: 0, //绑定商品分类的索引
-      pictureField: "img", //图片选择器回写的字段
+      img: item.thumbnail,
+      title: item.goodsName,
+      type: selectedGoods.value.title,
+      ___index: selectedGoods.value.___index,
+      ...item,
     };
-  },
-  watch: {
-    res: {
-      handler: (val) => {},
-      deep: true,
-    },
-  },
-  props: ["res"],
-  methods: {
-    // 选择分类（弹窗内暂存，确定后写回）
-    onCategorySelected(val) {
-      this.pendingCategory = val;
-    },
-    handleCancelCategoryModal() {
-      this.pendingCategory = null;
-      this.enableSelectCategory = false;
-    },
-    handleConfirmCategoryModal() {
-      if (this.pendingCategory?.length) {
-        this.confirmCategory(this.pendingCategory);
-      }
-      this.pendingCategory = null;
-      this.enableSelectCategory = false;
-    },
-    confirmCategory(val) {
-      let data = {
-        ...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
-      };
-      let callback = {
-        id: val[0].id,
-        name: val[0].name,
-        categoryIdWay: val[0].id,
-      };
-      data = {
-        ...data,
-        bindCategory: callback,
-      };
-      this.res.options.list[0].listWay =
-        this.res.options.list[0].listWay.filter((item) => {
-          return item.___index != this.goodsSelectedIndex;
-        });
-      this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data;
-    },
-    // 商品排序
-    slotGoods(list, key, val) {
-      const newVal = [];
-      let newValIndex = 0;
-      // 给当前点击的商品分组
-      list.forEach((item, index) => {
-        if (item.___index == key) {
-          newVal.push(item);
-        }
-      });
-      // 获得当前点击商品的索引
-      newVal.forEach((item, index) => {
-        if (item.id == val.id) {
-          newValIndex = index;
-        }
-      });
-      // 进行商品排序
-      this.upData(newVal, newValIndex);
-      if (list.length == newVal.length) {
-        list = newVal;
-      } else {
-        let newList;
-        newVal.forEach((item, index) => {
-          newList = list.filter((child) => {
-            return child.id != item.id && child.___index != key;
-          });
-        });
-        list = [...newList, ...newVal];
-      }
+  });
+  props.res.options.list[0].listWay.push(...data);
+  // 清除已经绑定的分类
+  props.res.options.list[0].titleWay[goodsSelectedIndex.value].bindCategory =
+    "";
+  linkType.value = "";
+}
+// 绑定商品
+function bindGoodsId(val, index) {
+  selectedGoods.value = val;
+  goodsSelectedIndex.value = index;
+  liliDialogFlag(true);
+}
+// 绑定分类
+function bindGoodsCategory(index, key) {
+  pendingCategory.value = null;
+  enableSelectCategory.value = true;
+  goodsSelectedIndex.value = index;
+}
+// 点击抽屉
+function clickDrawer(item, index) {
+  emit("handleDrawer", item);
+  styleFlag.value = false;
+  promotionsFlag.value = false;
+}
+// 打开图片选择器
+function liliDialogFlag(flag) {
+  liliDialog.value.clearGoodsSelected();
+  liliDialog.value.goodsFlag = flag;
+  liliDialog.value.flag = true;
+}
 
-      this.res.options.list[0]["listWay"] = list;
-    },
-
-    // 轮播图排序
-    slotBanner(val, key, index, down) {
-      if (down == "down") {
-        this.downData(val.options.list, index);
-      } else {
-        this.upData(val.options.list, index);
-      }
-    },
-    upData(arr, index) {
-      let newArr = [];
-      if (arr.length > 1 && index !== 0) {
-        newArr = this.swapItems(arr, index, index - 1);
-      }
-      return newArr;
-    },
-    swapItems(arr, index1, index2) {
-      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
-      return arr;
-    },
-    downData(arr, index) {
-      let newArr = [];
-      if (arr.length > 1 && index !== arr.length - 1) {
-        newArr = this.swapItems(arr, index, index + 1);
-      }
-      return newArr;
-    },
-    // 改变横纵切换title内容
-    changeDirection(val, data) {
-      if (val == "horizontal") {
-        const props = { ...data };
-        data.title = [];
-        data.title.push(props.title[0]);
-      }
-    },
-    // 选择风格
-    selectStyle() {
-      this.styleFlag = !this.styleFlag;
-    },
-    selectPromotions() {
-      this.promotionsFlag = !this.promotionsFlag;
-    },
-    // 回调选择的链接
-    selectedLink(val) {
-      this.selectedLinks.zoneInfo = [];
-      delete val.selected;
-      delete val.intro;
-      delete val.mobileIntro;
-      this.selectedLinks.url = val;
-    },
-    // 回调的商品信息
-    selectedGoodsData(val) {
-      if (!val) return false;
-      let data = val.map((item) => {
-        delete item.selected;
-        delete item.intro;
-        delete item.mobileIntro;
-        return {
-          img: item.thumbnail,
-          title: item.goodsName,
-          type: this.selectedGoods.title,
-          ___index: this.selectedGoods.___index,
-          ...item,
-        };
+function changeTextAlign(val) {
+  props.res.options.list[0].textAlign = val;
+  textAlign.value = val;
+}
+// 点击链接赋值一个唯一值，并将当前选择的模块赋值
+function clickLink(val, index, oval) {
+  selectedLinks.value = val;
+  if (val.model === "hotzone") {
+    if (!val.zoneInfo) {
+      val.zoneInfo = [];
+    }
+    hotzoneRef.value.open(val);
+  } else {
+    liliDialogFlag(false);
+  }
+}
+function addZone(zoneInfo) {
+  selectedLinks.value.zoneInfo.push(zoneInfo);
+}
+function changeZone(zoneInfo) {
+  selectedLinks.value.zoneInfo = zoneInfo;
+}
+//点击图片解析成base64
+function changeFile(item, index) {
+  const file = document.getElementById("files" + index).files[0];
+  if (file == void 0) return false;
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  nextTick((res) => {
+    reader.onload = (e) => {
+      item.img = e.target.result;
+    };
+  });
+}
+//添加设置
+function addDecorate(type, data) {
+  if (type === "notice") {
+    if (data.options.list[0].direction == "vertical") {
+      props.res.options.list[0].title.push({
+        content: "",
       });
-      this.res.options.list[0].listWay.push(...data);
-      // 清除已经绑定的分类
-      this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory =
-        "";
-      this.linkType = "";
-    },
-    // 绑定商品
-    bindGoodsId(val, index) {
-      this.selectedGoods = val;
-      this.goodsSelectedIndex = index;
-      this.liliDialogFlag(true);
-    },
-    // 绑定分类
-    bindGoodsCategory(index, key) {
-      this.pendingCategory = null;
-      this.enableSelectCategory = true;
-      this.goodsSelectedIndex = index;
-    },
-    // 点击抽屉
-    clickDrawer(item, index) {
-      this.$emit("handleDrawer", item);
-      this.styleFlag = false;
-      this.promotionsFlag = false;
-    },
-    // 打开图片选择器
-    liliDialogFlag(flag) {
-      this.$refs.liliDialog.clearGoodsSelected();
-      this.$refs.liliDialog.goodsFlag = flag;
-      this.$refs.liliDialog.flag = true;
-    },
-
-    changeTextAlign(val) {
-      this.res.options.list[0].textAlign = val;
-      this.textAlign = val;
-    },
-    // 点击链接赋值一个唯一值，并将当前选择的模块赋值
-    clickLink(val, index, oval) {
-      this.selectedLinks = val;
-      if (val.model === "hotzone") {
-        if (!val.zoneInfo) {
-          val.zoneInfo = [];
-        }
-        this.$refs.hotzone.open(val);
-      } else {
-        this.liliDialogFlag(false);
-      }
-    },
-    addZone(zoneInfo) {
-      this.selectedLinks.zoneInfo.push(zoneInfo);
-    },
-    changeZone(zoneInfo) {
-      this.selectedLinks.zoneInfo = zoneInfo;
-    },
-    //点击图片解析成base64
-    changeFile(item, index) {
-      const file = document.getElementById("files" + index).files[0];
-      if (file == void 0) return false;
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
-    },
-    //添加设置
-    addDecorate(type, data) {
-      if (type === "notice") {
-        if (data.options.list[0].direction == "vertical") {
-          this.res.options.list[0].title.push({
-            content: "",
-          });
-        } else {
-          this.$Message.error("仅纵向支持多添加");
-        }
-      } else {
-        let way = {
-          img: "https://picsum.photos/id/264/200/200",
-          title: "标题",
-          link: "",
-          url: "",
-          size: this.res.options.list[0] ? this.res.options.list[0].size : "",
-          model: "link",
-        };
-        this.res.options.list.push(way);
-      }
-    },
-    addHotPoint() {
-      let way = {
-        img: "https://picsum.photos/id/264/200/200",
-        text: "标题",
-        link: "",
-        url: "",
-      };
-      this.res.options.list[0].points.push(way);
-    },
-    // 图片选择器回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      if (this.pictureField === "bgImage") {
-        if (!this.selectedGoods.style) {
-          this.selectedGoods.style = {};
-        }
-        this.selectedGoods.style.bgImage = val.url;
-        return;
-      }
-      this.selectedGoods[this.pictureField] = val.url;
-    },
-    // 点击选择图片
-    handleClickFile(item, index, field = "img") {
-      this.pictureField = field;
-      this.selectedGoods = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        const oss = this.$refs.ossManage;
-        if (!oss) return;
-        oss.selectImage = true;
-        if (field === "videoUrl") {
-          oss.fileType = "video";
-        } else {
-          oss.fileType = "pic";
-        }
-        oss.changeFileType();
-      });
-    },
-    removeNotice(index) {
-      this.$nextTick(() => {
-        this.res.options.list[0].title.splice(index, 1);
-      });
-    },
-    // 关闭
-    closeDecorate(index) {
-      this.$nextTick(() => {
-        this.res.options.list.splice(index, 1);
-      });
-    },
-  },
-};
+    } else {
+      Message.error("仅纵向支持多添加");
+    }
+  } else {
+    let way = {
+      img: "https://picsum.photos/id/264/200/200",
+      title: "标题",
+      link: "",
+      url: "",
+      size: props.res.options.list[0] ? props.res.options.list[0].size : "",
+      model: "link",
+    };
+    props.res.options.list.push(way);
+  }
+}
+function addHotPoint() {
+  let way = {
+    img: "https://picsum.photos/id/264/200/200",
+    text: "标题",
+    link: "",
+    url: "",
+  };
+  props.res.options.list[0].points.push(way);
+}
+// 图片选择器回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  if (pictureField.value === "bgImage") {
+    if (!selectedGoods.value.style) {
+      selectedGoods.value.style = {};
+    }
+    selectedGoods.value.style.bgImage = val.url;
+    return;
+  }
+  selectedGoods.value[pictureField.value] = val.url;
+}
+// 点击选择图片
+function handleClickFile(item, index, field = "img") {
+  pictureField.value = field;
+  selectedGoods.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    const oss = ossManageRef.value;
+    if (!oss) return;
+    oss.selectImage = true;
+    if (field === "videoUrl") {
+      oss.fileType = "video";
+    } else {
+      oss.fileType = "pic";
+    }
+    oss.changeFileType();
+  });
+}
+function removeNotice(index) {
+  nextTick(() => {
+    props.res.options.list[0].title.splice(index, 1);
+  });
+}
+// 关闭
+function closeDecorate(index) {
+  nextTick(() => {
+    props.res.options.list.splice(index, 1);
+  });
+}
 </script>
 <style scoped lang="scss">
 @import "./decorate.scss";
diff --git a/manager/src/views/page-decoration/wap/index.vue b/manager/src/views/page-decoration/wap/index.vue
index 51285717a..7e4d0a464 100644
--- a/manager/src/views/page-decoration/wap/index.vue
+++ b/manager/src/views/page-decoration/wap/index.vue
@@ -72,7 +72,9 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, nextTick, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { CircleClose } from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
@@ -80,218 +82,212 @@ import { modelData } from "./config";
 import decorate from "./decorate";
 import * as API_Other from "@/api/other";
 import * as API_Promotions from "@/api/promotion";
-export default {
-  components: {
-    Draggable,
-    decorate,
-    CircleClose,
-  },
-  data() {
-    return {
-      templates, // 模板类型
-      modelData, // 装修模型
-      qrcode: "", // 二维码
-      selected: 0, // 已选下标
-      contentData: {
-        // 总数据
-        list: [],
-      },
-      decorateData: "", // 装修数据
-      decoratePromotionsData: "", // 装修数据
-    };
-  },
-  watch: {
-    contentData: {
-      handler(val) {
-        this.$store.state.styleStore = val;
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.init();
+import { getStore } from "@/libs/storage";
+import { Message, Modal } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
+
+const route = useRoute();
+const appStore = useAppStore();
+
+const qrcode = ref(""); // 二维码
+const selected = ref(0); // 已选下标
+const contentData = ref({
+  // 总数据
+  list: [],
+});
+const decorateData = ref(""); // 装修数据
+const decoratePromotionsData = ref(""); // 装修数据
+
+watch(
+  contentData,
+  (val) => {
+    appStore.styleStore = val;
   },
+  { deep: true }
+);
 
-  methods: {
-    getModelKey(model) {
-      return model.type || model.name;
-    },
-    getContentItemKey(element) {
-      return element.key || element.model || element.type;
-    },
-    cloneModel(model) {
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      const cloned = JSON.parse(JSON.stringify(model));
-      return {
-        ...cloned,
-        key,
-        model: cloned.type + "_" + key,
-      };
-    },
-    // 初始化数据
-    init() {
-      // 先读缓存，如果缓存有值则读缓存。
-      const cache = this.getStore('managerMobilePageCache')
-        if(cache){
-          this.$Modal.confirm({
-          title: '提示',
-          content: '获取到本地有缓存数据，是否使用缓存数据？',
-          okText: '使用',
-          cancelText: '取消',
-          onOk: () => {
-            const data = JSON.parse(cache);
-            this.contentData = data;
-          }
-        });
+onMounted(() => {
+  init();
+});
 
-        }
-      if (!this.$route.query.id) return false;
+function getModelKey(model) {
+  return model.type || model.name;
+}
+function getContentItemKey(element) {
+  return element.key || element.model || element.type;
+}
+function cloneModel(model) {
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  const cloned = JSON.parse(JSON.stringify(model));
+  return {
+    ...cloned,
+    key,
+    model: cloned.type + "_" + key,
+  };
+}
+// 初始化数据
+function init() {
+  // 先读缓存，如果缓存有值则读缓存。
+  const cache = getStore('managerMobilePageCache')
+    if(cache){
+      Modal.confirm({
+      title: '提示',
+      content: '获取到本地有缓存数据，是否使用缓存数据？',
+      okText: '使用',
+      cancelText: '取消',
+      onOk: () => {
+        const data = JSON.parse(cache);
+        contentData.value = data;
+      }
+    });
 
-      API_Other.getHomeData(this.$route.query.id).then((res) => {
-        this.contentData = JSON.parse(res.result.pageData);
+    }
+  if (!route.query.id) return false;
 
-        this.handleComponent(this.contentData.list[0], 0);
-      });
+  API_Other.getHomeData(route.query.id).then((res) => {
+    contentData.value = JSON.parse(res.result.pageData);
 
-    },
+    handleComponent(contentData.value.list[0], 0);
+  });
 
-    // 中间组件拖动，右侧数据绑定不变
-    handleContentlEnd(evt) {
-      const { newIndex } = evt;
-      this.handleComponent(this.contentData.list[newIndex], newIndex);
-    },
+}
 
-    // 关闭楼层装修
-    closeComponent(index) {
-      this.$nextTick(() => {
-        this.decorateData = "";
+// 中间组件拖动，右侧数据绑定不变
+function handleContentlEnd(evt) {
+  const { newIndex } = evt;
+  handleComponent(contentData.value.list[newIndex], newIndex);
+}
 
-        // 如果当前楼层不为一
-        if (this.contentData.list.length > 1) {
-          // 如果当前最底层 给下一层赋值
+// 关闭楼层装修
+function closeComponent(index) {
+  nextTick(() => {
+    decorateData.value = "";
 
-          if (index - 1 == -1) {
-            this.handleComponent(this.contentData.list[index], index);
-          } else {
-            // 如果不是最底层给上一层赋值
-            this.handleComponent(this.contentData.list[index - 1], index - 1);
-          }
-          this.contentData.list.splice(index, 1);
-        } else {
-          this.contentData.list.splice(index, 1);
-        }
-      });
-    },
+    // 如果当前楼层不为一
+    if (contentData.value.list.length > 1) {
+      // 如果当前最底层 给下一层赋值
 
-    // 点击楼层装修
-    handleComponent(val, index) {
-      this.selected = index;
-      this["decorateData"] = val;
-    },
-    // 右侧栏回调
-    handleDrawer(val) {
-      let newIndex = this.selected;
-      if (val.promotionsType) {
-        if (this.contentData.list[newIndex].options.list.length >= 2) {
-          this.$Message.error("最多只能展示两个活动");
+      if (index - 1 == -1) {
+        handleComponent(contentData.value.list[index], index);
+      } else {
+        // 如果不是最底层给上一层赋值
+        handleComponent(contentData.value.list[index - 1], index - 1);
+      }
+      contentData.value.list.splice(index, 1);
+    } else {
+      contentData.value.list.splice(index, 1);
+    }
+  });
+}
+
+// 点击楼层装修
+function handleComponent(val, index) {
+  selected.value = index;
+  decorateData.value = val;
+}
+// 右侧栏回调
+function handleDrawer(val) {
+  let newIndex = selected.value;
+  if (val.promotionsType) {
+    if (contentData.value.list[newIndex].options.list.length >= 2) {
+      Message.error("最多只能展示两个活动");
+      return;
+    }
+    if (val.promotionsType === "LIVE") {
+      API_Promotions.getLiveList({
+        status: "START",
+        pageSize: 1,
+        pageNumber: 1,
+      }).then((listRes) => {
+        const records = listRes.result?.records || [];
+        if (!listRes.success || records.length === 0) {
+          Message.warning("暂无进行中的直播活动");
           return;
         }
-        if (val.promotionsType === "LIVE") {
-          API_Promotions.getLiveList({
-            status: "START",
-            pageSize: 1,
-            pageNumber: 1,
-          }).then((listRes) => {
-            const records = listRes.result?.records || [];
-            if (!listRes.success || records.length === 0) {
-              this.$Message.warning("暂无进行中的直播活动");
-              return;
-            }
-            API_Promotions.getLiveInfo(records[0].id).then((infoRes) => {
-              if (infoRes.success) {
-                this.contentData.list[newIndex].options.list.push({
-                  type: val.promotionsType,
-                  title: val.name,
-                  title1: val.subName,
-                  color1: val.subColor,
-                  bk_color: val.subBkColor,
-                  data: infoRes.result.commodityList
-                    ? infoRes.result.commodityList.splice(0, 2)
-                    : [],
-                });
-              }
+        API_Promotions.getLiveInfo(records[0].id).then((infoRes) => {
+          if (infoRes.success) {
+            contentData.value.list[newIndex].options.list.push({
+              type: val.promotionsType,
+              title: val.name,
+              title1: val.subName,
+              color1: val.subColor,
+              bk_color: val.subBkColor,
+              data: infoRes.result.commodityList
+                ? infoRes.result.commodityList.splice(0, 2)
+                : [],
             });
-          });
-        } else {
-          API_Promotions.getAllPromotion().then((res) => {
-            let exist = this.contentData.list[newIndex].options.list.find(
-              (i) => i.type === val.promotionsType
-            );
+          }
+        });
+      });
+    } else {
+      API_Promotions.getAllPromotion().then((res) => {
+        let exist = contentData.value.list[newIndex].options.list.find(
+          (i) => i.type === val.promotionsType
+        );
 
-            if (res.success && !exist) {
-              this.contentData.list[newIndex].options.list.push({
-                data: res.result[val.promotionsType]
-                  ? res.result[val.promotionsType].splice(0, 2)
-                  : [],
-                type: val.promotionsType,
-                title1: val.subName,
-                color1: val.subColor,
-                bk_color: val.subBkColor,
-                title: val.name,
-              });
-            }
+        if (res.success && !exist) {
+          contentData.value.list[newIndex].options.list.push({
+            data: res.result[val.promotionsType]
+              ? res.result[val.promotionsType].splice(0, 2)
+              : [],
+            type: val.promotionsType,
+            title1: val.subName,
+            color1: val.subColor,
+            bk_color: val.subBkColor,
+            title: val.name,
           });
         }
-        this.contentData.list[newIndex] = {
-          ...val,
-          options: {
-            ...this.contentData.list[newIndex].options,
-          },
-          model: val.type,
-        };
-      } else {
-        this.decorateData = "";
+      });
+    }
+    contentData.value.list[newIndex] = {
+      ...val,
+      options: {
+        ...contentData.value.list[newIndex].options,
+      },
+      model: val.type,
+    };
+  } else {
+    decorateData.value = "";
 
-        this.contentData.list[newIndex] = {
-          ...val,
-          options: {
-            ...val.options,
-          },
-          model: val.type,
-        };
-        this.contentData.list = JSON.parse(
-          JSON.stringify(this.contentData.list)
-        );
-        this["decorateData"] = this.contentData.list[newIndex];
-      }
-    },
+    contentData.value.list[newIndex] = {
+      ...val,
+      options: {
+        ...val.options,
+      },
+      model: val.type,
+    };
+    contentData.value.list = JSON.parse(
+      JSON.stringify(contentData.value.list)
+    );
+    decorateData.value = contentData.value.list[newIndex];
+  }
+}
 
-    // 封装拖拽参数
-    package(val, newIndex) {
-      this.contentData.list[newIndex] = "";
-      val = JSON.parse(JSON.stringify(val));
-      const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      this.contentData.list[newIndex] = {
-        ...val,
-        options: {
-          ...val.options,
-        },
-        key,
-        model: val.model || val.type + "_" + key,
-      };
+// 封装拖拽参数
+// 原名 package 是 ESM 严格模式保留字，改名 packageModel
+function packageModel(val, newIndex) {
+  contentData.value.list[newIndex] = "";
+  val = JSON.parse(JSON.stringify(val));
+  const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  contentData.value.list[newIndex] = {
+    ...val,
+    options: {
+      ...val.options,
     },
-    // 拖动
-    handleContentlAdd(evt) {
-      const { newIndex } = evt;
+    key,
+    model: val.model || val.type + "_" + key,
+  };
+}
+// 拖动
+function handleContentlAdd(evt) {
+  const { newIndex } = evt;
 
-      this.package(this.contentData.list[newIndex], newIndex);
-      this.handleComponent(this.contentData.list[newIndex], newIndex);
-    },
-    handleMove() {
-      return true;
-    },
-  },
-};
+  packageModel(contentData.value.list[newIndex], newIndex);
+  handleComponent(contentData.value.list[newIndex], newIndex);
+}
+function handleMove() {
+  return true;
+}
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/views/page-decoration/wap/main.vue b/manager/src/views/page-decoration/wap/main.vue
index 9b3ea6377..b71d9326c 100644
--- a/manager/src/views/page-decoration/wap/main.vue
+++ b/manager/src/views/page-decoration/wap/main.vue
@@ -6,37 +6,32 @@
     <component :is="layout[name]"></component>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import layout from "./index";
 import navbar from "./navbar";
-export default {
-  components: {
-    navbar
-  },
 
-  data() {
-    return {
-      layout, // 装修模块
-      name: "index", // 装修的页面
-      pagetype: "INDEX",
-    };
-  },
-  mounted() {
-    if (this.$route.query.pagetype == "ALERT") {
-      this.name = "alertAdvertising";
-    }
-    if (this.$route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
-      this.name = "advertising";
-    }
-    this.pagetype = this.$route.query.pagetype;
-  },
-  methods: {
-    selected(val) {
-      // 顶部栏点击切换
-      this.name = val;
-    }
+const route = useRoute();
+
+// layout 为 import 常量（装修模块），模板中直接使用
+const name = ref("index"); // 装修的页面
+const pagetype = ref("INDEX");
+
+onMounted(() => {
+  if (route.query.pagetype == "ALERT") {
+    name.value = "alertAdvertising";
   }
-};
+  if (route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
+    name.value = "advertising";
+  }
+  pagetype.value = route.query.pagetype;
+});
+
+// 顶部栏点击切换
+function selected(val) {
+  name.value = val;
+}
 </script>
 <style scoped lang="scss">
 .box {
diff --git a/manager/src/views/page-decoration/wap/navbar.vue b/manager/src/views/page-decoration/wap/navbar.vue
index 965688f5a..398d4b971 100644
--- a/manager/src/views/page-decoration/wap/navbar.vue
+++ b/manager/src/views/page-decoration/wap/navbar.vue
@@ -56,218 +56,223 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_Other from "@/api/other.js";
+import { getStore, setStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  props: ["pagetype"],
-  data() {
-    return {
-      hasCache:false, // 是否有缓存
-      progress: true, // 展示进度
-      num: 20, // 提交进度
-      saveDialog: false, // 加载状态
-      way: [
-        // 装修tab栏切换
-        {
-          title: "首页",
-          name: "index",
-          selected: true,
-        },
-        {
-          title: "全屏广告",
-          name: "advertising",
-          selected: false,
-        },
-        {
-          title: "弹窗广告",
-          name: "ALERT",
-          selected: false,
-        },
-      ],
+const props = defineProps(["pagetype"]);
+const emit = defineEmits(["selected"]);
 
-      submitWay: {
-        // 表单信息
-        pageShow: this.$route.query.type || false,
-        name: this.$route.query.name || "模板名称",
-        pageClientType: "H5"
-      }
-    };
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const hasCache = ref(false); // 是否有缓存
+const progress = ref(true); // 展示进度
+const num = ref(20); // 提交进度
+const saveDialog = ref(false); // 加载状态
+const way = ref([
+  // 装修tab栏切换
+  {
+    title: "首页",
+    name: "index",
+    selected: true,
   },
-  watch: {
-    pagetype: {
-      handler(val) {
-        this.way.length = 0;
-        if (val == "INDEX") {
-          this.way.push({ title: "首页", name: "index", selected: true });
-        } else if (val == "SPECIAL") {
-          this.way.push({ title: "专题", name: "special", selected: true });
-        } else if (val == "ALERT") {
-          this.way.push({ title: "开屏广告", name: "alert", selected: true });
-        }else if (val == "OPEN_SCREEN_ANIMATION") {
-          this.way.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
-        }
-      },
-      immediate: true,
-    },
+  {
+    title: "全屏广告",
+    name: "advertising",
+    selected: false,
   },
-  mounted() {
-    this.hasCache = this.getStore('managerMobilePageCache') ? true : false;
+  {
+    title: "弹窗广告",
+    name: "ALERT",
+    selected: false,
   },
-  methods: {
-    clearCache(){
-      this.setStore('managerMobilePageCache','');
-      this.$Message.success('清空成功')
-    },
-    // 将楼层装修的内容写入到本地缓存中
-    witeLocalStore(){
-      this.setStore('managerMobilePageCache', this.$store.state.styleStore)
-      this.$Message.success('写入成功')
-    },
+]);
 
-    clickBtn(val) {
-      this.way.forEach((item, index) => {
-        item.selected = false;
-      });
-      val.selected = true;
-      this.$emit("selected", val.name);
-    },
+const submitWay = reactive({
+  // 表单信息
+  pageShow: route.query.type || false,
+  name: route.query.name || "模板名称",
+  pageClientType: "H5"
+});
 
-    /**
-     * 加载，并保存模板
-     */
-    handleSpinShow() {
-      this.saveDialog = true;
-    },
-
-    // 填写是否发布，模板名称之后保存
-    save() {
-       if (
-        this.$store.state.styleStore == void 0 &&
-        (this.$route.query.pagetype && this.$route.query.pagetype != 'ALERT' &&  this.$route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
-      ) {
-        this.$Message.error("请装修楼层");
-        return false;
-      }
-
-      this.submitWay?.pageShow === true
-        ? (this.submitWay.pageShow = "OPEN")
-        : (this.submitWay.pageShow = "CLOSE");
-
-      this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
-      this.submitWay.pageType = "INDEX";
-      this.submitWay.pageType =  this.$route.query.pagetype ||  "INDEX";
-      // this.submitWay.pageType = this.pagetype;
-
-      if (this.$route.query.pagetype == 'ALERT' || this.$route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
-        this.update(this.submitWay);
-      } else {
-        this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
-      }
-
-      // this.$route.query.id ? this.update() : this.submit(this.submitWay);
-    },
-
-    // 更新
-    updateHome() {
-      this.progress = false;
-      API_Other.updateHome(this.$route.query.id, {
-        pageData: JSON.stringify(this.$store.state.styleStore),
-        name: this.submitWay.name,
-        pageShow: this.submitWay.pageShow,
-        pageType: this.submitWay.pageType,
-        pageClientType: "H5",
-      })
-        .then(res => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("修改成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.saveDialog = false;
-            this.$Message.error("修改失败，请稍后重试");
-          }
-        });
-    },
-
-
-    // 更新
-    update(submitWay) {
-      if (this.$store.state.openStyleStore == void 0) {
-        this.$Message.error("请装修楼层!");
-        return false;
-      }
-      this.progress = false;
-
-      let id = this.$route.query.id;
-      const pagetype = this.$route.query.pagetype;
-      const pageType = {
-        INDEX: "INDEX",
-        ALERT: "OPEN_SCREEN_PAGE",
-        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
-      }[pagetype ? pagetype : "INDEX"];
-
-      if (pagetype) {
-        submitWay.pageData = JSON.stringify(
-          this.$store.state.openStyleStore[0]
-        );
-        submitWay.pageType = pageType;
-        id = this.$store.state.openStoreId;
-      }
-
-      API_Other.updateHome(id, submitWay)
-        .then((res) => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("修改成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.saveDialog = false;
-            this.$Message.error("修改失败，请稍后重试");
-          }
-        });
-    },
-
-
-
-    // 返回查询数据页面
-    goBack() {
-      this.$router.go(-1);
-    },
-
-    // 保存
-    submit(submitWay) {
-      this.progress = false;
-      API_Other.setHomeSetup(submitWay)
-        .then(res => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("保存成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.progress = true;
-            this.saveDialog = false;
-            this.$Message.error("保存失败，请稍后重试");
-          }
-        });
+watch(
+  () => props.pagetype,
+  (val) => {
+    way.value.length = 0;
+    if (val == "INDEX") {
+      way.value.push({ title: "首页", name: "index", selected: true });
+    } else if (val == "SPECIAL") {
+      way.value.push({ title: "专题", name: "special", selected: true });
+    } else if (val == "ALERT") {
+      way.value.push({ title: "开屏广告", name: "alert", selected: true });
+    }else if (val == "OPEN_SCREEN_ANIMATION") {
+      way.value.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
     }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  hasCache.value = getStore('managerMobilePageCache') ? true : false;
+});
+
+function clearCache(){
+  setStore('managerMobilePageCache','');
+  Message.success('清空成功')
+}
+// 将楼层装修的内容写入到本地缓存中
+function witeLocalStore(){
+  setStore('managerMobilePageCache', appStore.styleStore)
+  Message.success('写入成功')
+}
+
+function clickBtn(val) {
+  way.value.forEach((item, index) => {
+    item.selected = false;
+  });
+  val.selected = true;
+  emit("selected", val.name);
+}
+
+/**
+ * 加载，并保存模板
+ */
+function handleSpinShow() {
+  saveDialog.value = true;
+}
+
+// 填写是否发布，模板名称之后保存
+function save() {
+   if (
+    appStore.styleStore == void 0 &&
+    (route.query.pagetype && route.query.pagetype != 'ALERT' &&  route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
+  ) {
+    Message.error("请装修楼层");
+    return false;
   }
-};
+
+  submitWay?.pageShow === true
+    ? (submitWay.pageShow = "OPEN")
+    : (submitWay.pageShow = "CLOSE");
+
+  submitWay.pageData = JSON.stringify(appStore.styleStore);
+  submitWay.pageType = "INDEX";
+  submitWay.pageType =  route.query.pagetype ||  "INDEX";
+  // submitWay.pageType = props.pagetype;
+
+  if (route.query.pagetype == 'ALERT' || route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
+    update(submitWay);
+  } else {
+    route.query.id ? updateHome() : submit(submitWay);
+  }
+
+  // route.query.id ? update() : submit(submitWay);
+}
+
+// 更新
+function updateHome() {
+  progress.value = false;
+  API_Other.updateHome(route.query.id, {
+    pageData: JSON.stringify(appStore.styleStore),
+    name: submitWay.name,
+    pageShow: submitWay.pageShow,
+    pageType: submitWay.pageType,
+    pageClientType: "H5",
+  })
+    .then(res => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("修改成功");
+          goBack();
+        }, 1000);
+      } else {
+        saveDialog.value = false;
+        Message.error("修改失败，请稍后重试");
+      }
+    });
+}
+
+
+// 更新
+function update(submitWay) {
+  if (appStore.openStyleStore == void 0) {
+    Message.error("请装修楼层!");
+    return false;
+  }
+  progress.value = false;
+
+  let id = route.query.id;
+  const pagetype = route.query.pagetype;
+  const pageType = {
+    INDEX: "INDEX",
+    ALERT: "OPEN_SCREEN_PAGE",
+    OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+  }[pagetype ? pagetype : "INDEX"];
+
+  if (pagetype) {
+    submitWay.pageData = JSON.stringify(
+      appStore.openStyleStore[0]
+    );
+    submitWay.pageType = pageType;
+    id = appStore.openStoreId;
+  }
+
+  API_Other.updateHome(id, submitWay)
+    .then((res) => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("修改成功");
+          goBack();
+        }, 1000);
+      } else {
+        saveDialog.value = false;
+        Message.error("修改失败，请稍后重试");
+      }
+    });
+}
+
+
+
+// 返回查询数据页面
+function goBack() {
+  router.go(-1);
+}
+
+// 保存
+function submit(submitWay) {
+  progress.value = false;
+  API_Other.setHomeSetup(submitWay)
+    .then(res => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("保存成功");
+          goBack();
+        }, 1000);
+      } else {
+        progress.value = true;
+        saveDialog.value = false;
+        Message.error("保存失败，请稍后重试");
+      }
+    });
+}
 </script>
 <style scoped lang="scss">
 .model-item {
diff --git a/manager/src/views/page-decoration/wap/template/tpl_banner.vue b/manager/src/views/page-decoration/wap/template/tpl_banner.vue
index 7ab182c4d..284850210 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_banner.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_banner.vue
@@ -9,11 +9,10 @@
     </el-carousel>
   </div>
 </template>
-<script>
-export default {
-  title: "导航栏",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "导航栏" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_flex_five.vue b/manager/src/views/page-decoration/wap/template/tpl_flex_five.vue
index eba7ea0c0..c17cde869 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_flex_five.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_five.vue
@@ -9,11 +9,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "五列单行图片模块",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "五列单行图片模块" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_flex_four.vue b/manager/src/views/page-decoration/wap/template/tpl_flex_four.vue
index e31dc7e2d..60de667fe 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_flex_four.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_four.vue
@@ -8,12 +8,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "四列单行图片模块",
-  props: ["res"],
+<script setup>
+defineOptions({ title: "四列单行图片模块" });
 
-};
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue b/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue
index a53fcc417..7c910d398 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue
@@ -5,10 +5,8 @@
         </div>
     </div>
 </template>
-<script>
-export default {
-    props: ['res']
-}
+<script setup>
+defineProps(['res'])
 </script>
 <style lang="scss" scoped>
 @import './tpl.scss';
diff --git a/manager/src/views/page-decoration/wap/template/tpl_flex_three.vue b/manager/src/views/page-decoration/wap/template/tpl_flex_three.vue
index f6e8744ff..c2ff11e8c 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_flex_three.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_three.vue
@@ -7,11 +7,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "三列单行图片模块",
-  props: ["res"],
-};
+});
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_flex_two.vue b/manager/src/views/page-decoration/wap/template/tpl_flex_two.vue
index 5cb0ae6b5..477cb0fb4 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_flex_two.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_two.vue
@@ -10,11 +10,10 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  title: "两张横图",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "两张横图" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_goods.vue b/manager/src/views/page-decoration/wap/template/tpl_goods.vue
index 1fb20bef1..aadaa4766 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_goods.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_goods.vue
@@ -39,59 +39,53 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, reactive, watch } from "vue";
 import { CircleClose } from "@element-plus/icons-vue";
-export default {
-  components: { CircleClose },
-  data() {
-    return {
-      selected: {
-        index: 0,
-        val: "",
-      },
-    };
+
+const props = defineProps(["res"]);
+
+const selected = reactive({
+  index: 0,
+  val: "",
+});
+
+const goodsBlock = computed(() => props.res?.list?.[0] || null);
+
+watch(
+  goodsBlock,
+  (val) => {
+    if (!val) {
+      return;
+    }
+    const firstGoods = (val.listWay || []).find(Boolean);
+    if (firstGoods) {
+      selected.val = firstGoods.type;
+    } else if (val.titleWay?.[0]?.title) {
+      selected.val = val.titleWay[0].title;
+    }
   },
-  props: ["res"],
-  computed: {
-    goodsBlock() {
-      return this.res?.list?.[0] || null;
-    },
-  },
-  watch: {
-    goodsBlock: {
-      handler(val) {
-        if (!val) {
-          return;
-        }
-        const firstGoods = (val.listWay || []).find(Boolean);
-        if (firstGoods) {
-          this.selected.val = firstGoods.type;
-        } else if (val.titleWay?.[0]?.title) {
-          this.selected.val = val.titleWay[0].title;
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    isGoodsVisible(item) {
-      if (!item) {
-        return false;
-      }
-      if (item.___index != undefined) {
-        return this.selected.index == item.___index;
-      }
-      return this.selected.val == item.type;
-    },
-    closeGoods(val, index) {
-      this.goodsBlock.listWay.splice(index, 1);
-    },
-    handleClickTitle(val, index) {
-      this.selected.index = index;
-      this.selected.val = val.title;
-    },
-  },
-};
+  { immediate: true }
+);
+
+function isGoodsVisible(item) {
+  if (!item) {
+    return false;
+  }
+  if (item.___index != undefined) {
+    return selected.index == item.___index;
+  }
+  return selected.val == item.type;
+}
+
+function closeGoods(val, index) {
+  goodsBlock.value.listWay.splice(index, 1);
+}
+
+function handleClickTitle(val, index) {
+  selected.index = index;
+  selected.val = val.title;
+}
 </script>
 <style lang="scss" scoped>
 .layout {
diff --git a/manager/src/views/page-decoration/wap/template/tpl_group.vue b/manager/src/views/page-decoration/wap/template/tpl_group.vue
index c3abd5917..b25f24294 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_group.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_group.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue b/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue
index 4f490165a..83d1cfffa 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_hot_area.vue
@@ -6,20 +6,14 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import hotzone from "@/components/hotzone";
 
-export default {
-  components: {
-    hotzone,
-  },
-  props: ["res"],
-  methods: {
-    changeHotzone(info) {
-      this.res.list[0].zoneInfo = info;
-    },
-  },
-};
+const props = defineProps(["res"]);
+
+function changeHotzone(info) {
+  props.res.list[0].zoneInfo = info;
+}
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_integral.vue b/manager/src/views/page-decoration/wap/template/tpl_integral.vue
index 53eb17a6b..0979feae1 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_integral.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_integral.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_left_one_right_two.vue b/manager/src/views/page-decoration/wap/template/tpl_left_one_right_two.vue
index 07ee3c05b..6724fa334 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_left_one_right_two.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_left_one_right_two.vue
@@ -15,11 +15,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "左一右二",
-  props: ["res"]
-};
+<script setup>
+defineOptions({ title: "左一右二" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_left_two_right_one.vue b/manager/src/views/page-decoration/wap/template/tpl_left_two_right_one.vue
index a7adb4088..a65ac4e2c 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_left_two_right_one.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_left_two_right_one.vue
@@ -15,11 +15,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "左二右一",
-  props: ["res"]
-};
+<script setup>
+defineOptions({ title: "左二右一" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_menu.vue b/manager/src/views/page-decoration/wap/template/tpl_menu.vue
index 1e942c32e..fd58704bb 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_menu.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_menu.vue
@@ -10,10 +10,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"],
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_notice.vue b/manager/src/views/page-decoration/wap/template/tpl_notice.vue
index 6b4128505..418a5c89c 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_notice.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_notice.vue
@@ -9,28 +9,27 @@
   </div>
 </template>
 
-<script>
-  export default {
-    title: "公告",
-    props: ["res"],
-    data() {
-      return {
-        index: 0,
-        context:  "",
+<script setup>
+  import { ref, onMounted } from "vue";
+
+  defineOptions({ title: "公告" });
+  const props = defineProps(["res"]);
+
+  const index = ref(0);
+  const context = ref("");
+
+  onMounted(() => {
+    context.value = props.res.list[0].title[index.value].context;
+    // 历史遗留：定时器未在卸载时清理，保持原行为
+    setInterval(() => {
+      context.value = props.res.list[0].title[index.value].context;
+      if (index.value < props.res.list[0].title.length - 1) {
+        index.value++;
+      } else {
+        index.value = 0;
       }
-    },
-    mounted() {
-      this.context = this.res.list[0].title[this.index].context;
-      setInterval(() => {
-        this.context = this.res.list[0].title[this.index].context;
-        if (this.index < this.res.list[0].title.length - 1) {
-          this.index++;
-        } else {
-          this.index = 0;
-        }
-      }, 3000);
-    },
-  };
+    }, 3000);
+  });
 </script>
 <style lang="scss" scoped>
   @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_promotion_detail.vue b/manager/src/views/page-decoration/wap/template/tpl_promotion_detail.vue
index 05d4bd6d3..b4dd75478 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_promotion_detail.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_promotion_detail.vue
@@ -49,10 +49,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"],
-};
+<script setup>
+const props = defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_promotions.vue b/manager/src/views/page-decoration/wap/template/tpl_promotions.vue
index 391596eb0..4eb9ade29 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_promotions.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_promotions.vue
@@ -5,11 +5,11 @@
     </div>
   </div>
 </template>
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "两张横图",
-  props: ["res"],
-};
+});
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_search.vue b/manager/src/views/page-decoration/wap/template/tpl_search.vue
index 5be127fa3..34a89f875 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_search.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_search.vue
@@ -5,12 +5,10 @@
         </div>
     </div>
 </template>
-<script>
+<script setup>
 import { Search } from "@element-plus/icons-vue";
-export default {
-    components: { Search },
-    props: ['res']
-}
+
+defineProps(['res']);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_spike.vue b/manager/src/views/page-decoration/wap/template/tpl_spike.vue
index c3abd5917..b25f24294 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_spike.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_spike.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_text_picture.vue b/manager/src/views/page-decoration/wap/template/tpl_text_picture.vue
index add2784f1..c475421c6 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_text_picture.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_text_picture.vue
@@ -32,11 +32,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "文字图片模板",
-  props: ["res"]
-};
+});
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_title.vue b/manager/src/views/page-decoration/wap/template/tpl_title.vue
index 7286f2ce4..955ba7500 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_title.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_title.vue
@@ -25,11 +25,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "标题栏",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "标题栏" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_top_one_bottom_two.vue b/manager/src/views/page-decoration/wap/template/tpl_top_one_bottom_two.vue
index 3eae5ffcd..10e6cb1dd 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_top_one_bottom_two.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_top_one_bottom_two.vue
@@ -15,11 +15,9 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "上一下二",
-  props: ["res"]
-};
+<script setup>
+defineOptions({ title: "上一下二" });
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_top_two_bottom_one.vue b/manager/src/views/page-decoration/wap/template/tpl_top_two_bottom_one.vue
index e87321621..d3dbb27af 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_top_two_bottom_one.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_top_two_bottom_one.vue
@@ -14,11 +14,10 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "上二下一",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "上二下一" });
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/manager/src/views/page-decoration/wap/template/tpl_video.vue b/manager/src/views/page-decoration/wap/template/tpl_video.vue
index 50800035b..201a849c1 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_video.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_video.vue
@@ -28,7 +28,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed } from "vue";
 import {
   ensureVideoItem,
   getVideoWrapperStyle,
@@ -36,25 +37,16 @@ import {
   getAspectPadding,
 } from "../video-style";
 
-export default {
-  props: ["res"],
-  computed: {
-    item() {
-      const data = this.res.list[0] || {};
-      ensureVideoItem(data);
-      return data;
-    },
-    wrapperStyle() {
-      return getVideoWrapperStyle(this.item);
-    },
-    boxStyle() {
-      return getVideoBoxStyle(this.item);
-    },
-    aspectPadding() {
-      return getAspectPadding(this.item.aspectRatio);
-    },
-  },
-};
+const props = defineProps(["res"]);
+
+const item = computed(() => {
+  const data = props.res.list[0] || {};
+  ensureVideoItem(data);
+  return data;
+});
+const wrapperStyle = computed(() => getVideoWrapperStyle(item.value));
+const boxStyle = computed(() => getVideoBoxStyle(item.value));
+const aspectPadding = computed(() => getAspectPadding(item.value.aspectRatio));
 </script>
 <style lang="scss" scoped>
 .layout {
diff --git a/manager/src/views/page-decoration/wap/template/tpl_view_list.vue b/manager/src/views/page-decoration/wap/template/tpl_view_list.vue
index acd4568ef..a0dc2eb16 100644
--- a/manager/src/views/page-decoration/wap/template/tpl_view_list.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_view_list.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="layout">请选择风格</div>
 </template>
-<script>
-export default {
-}
+<script setup>
 </script>
 <style scoped lang="scss">
 @import './tpl.scss';
diff --git a/manager/src/views/page-decoration/wap/video-config.vue b/manager/src/views/page-decoration/wap/video-config.vue
index 106c3f684..e6ff3ca34 100644
--- a/manager/src/views/page-decoration/wap/video-config.vue
+++ b/manager/src/views/page-decoration/wap/video-config.vue
@@ -260,44 +260,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { Plus } from "@element-plus/icons-vue";
 import { ensureVideoItem } from "./video-style";
 
-export default {
-  name: "VideoConfig",
-  components: { Plus },
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
+defineOptions({ name: "VideoConfig" });
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
   },
-  emits: ["select-file"],
-  data() {
-    return {
-      activeTab: "content",
-    };
+});
+
+defineEmits(["select-file"]);
+
+const activeTab = ref("content");
+
+ensureVideoItem(props.item);
+
+watch(
+  () => props.item,
+  (val) => {
+    if (val) ensureVideoItem(val);
   },
-  created() {
-    ensureVideoItem(this.item);
-  },
-  watch: {
-    item: {
-      handler(val) {
-        if (val) ensureVideoItem(val);
-      },
-      immediate: true,
-      deep: true,
-    },
-  },
-  methods: {
-    resetBgColors() {
-      this.item.style.bgColorStart = "#F5F5F5";
-      this.item.style.bgColorEnd = "#F5F5F5";
-    },
-  },
-};
+  { immediate: true, deep: true }
+);
+
+function resetBgColors() {
+  props.item.style.bgColorStart = "#F5F5F5";
+  props.item.style.bgColorEnd = "#F5F5F5";
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/page-decoration/wap/wapList.vue b/manager/src/views/page-decoration/wap/wapList.vue
index c9828fbf5..da2b5025c 100644
--- a/manager/src/views/page-decoration/wap/wapList.vue
+++ b/manager/src/views/page-decoration/wap/wapList.vue
@@ -56,136 +56,136 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import * as API_Other from "@/api/other.js";
-export default {
-  data() {
-    return {
-      loading: false,
-      pageTypes: [
-        { type: "INDEX", title: "首页" },
-        { type: "SPECIAL", title: "专题" },
-      ],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        pageType: "INDEX",
-        pageClientType: "H5",
-      },
-      total: 0,
-      list: [],
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    handleTabChange(val) {
-      if (val == "ALERT") {
-        this.$router.push({
-          path: "/floorList/main",
-          query: { pagetype: val },
-        });
-        return;
-      }
-      if (val == "OPEN_SCREEN_ANIMATION") {
-        this.$router.push({
-          path: "/floorList/main",
-          query: { pagetype: val },
-        });
-        return;
-      }
-      this.params.pageNumber = 1;
-      this.params.pageType = val;
-      this.init();
-    },
+import { Message, Modal } from "@/utils/message";
 
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.init();
-    },
-    beforeRelease(row) {
-      if (row.pageShow) {
-        this.$Message.warning(
-          this.total === 1
-            ? "当前为唯一页面，无法关闭"
-            : "请直接开启其他页面，当前页面会自动关闭"
-        );
-        return false;
+const router = useRouter();
+
+const loading = ref(false);
+const pageTypes = ref([
+  { type: "INDEX", title: "首页" },
+  { type: "SPECIAL", title: "专题" },
+]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  pageType: "INDEX",
+  pageClientType: "H5",
+});
+const total = ref(0);
+const list = ref([]);
+
+onMounted(() => {
+  init();
+});
+
+function handleTabChange(val) {
+  if (val == "ALERT") {
+    router.push({
+      path: "/floorList/main",
+      query: { pagetype: val },
+    });
+    return;
+  }
+  if (val == "OPEN_SCREEN_ANIMATION") {
+    router.push({
+      path: "/floorList/main",
+      query: { pagetype: val },
+    });
+    return;
+  }
+  params.pageNumber = 1;
+  params.pageType = val;
+  init();
+}
+
+function changePageNum(val) {
+  params.pageNumber = val;
+  init();
+}
+function beforeRelease(row) {
+  if (row.pageShow) {
+    Message.warning(
+      total.value === 1
+        ? "当前为唯一页面，无法关闭"
+        : "请直接开启其他页面，当前页面会自动关闭"
+    );
+    return false;
+  }
+  return new Promise((resolve, reject) => {
+    API_Other.releasePageHome(row.id).then((res) => {
+      if (res && res.success) {
+        Message.success("发布成功");
+        resolve(true);
+        init();
+      } else {
+        reject(new Error("release failed"));
       }
-      return new Promise((resolve, reject) => {
-        API_Other.releasePageHome(row.id).then((res) => {
-          if (res && res.success) {
-            this.$Message.success("发布成功");
-            resolve(true);
-            this.init();
-          } else {
-            reject(new Error("release failed"));
-          }
-        }).catch(() => {
-          reject(new Error("release failed"));
-        });
-      });
+    }).catch(() => {
+      reject(new Error("release failed"));
+    });
+  });
+}
+function init() {
+  loading.value = true;
+  API_Other.getHomeList(params).then((res) => {
+    loading.value = false;
+    if (!res.result) return false;
+    res.result.records.forEach((item) => {
+      if (item.pageShow == "OPEN") {
+        item.pageShow = true;
+      } else {
+        item.pageShow = false;
+      }
+    });
+    list.value = res.result.records;
+    total.value = res.result.total;
+  });
+}
+function handleEdit(val) {
+  router.push({
+    path: "/floorList/main",
+    query: {
+      id: val.id,
+      name: val.name,
+      type: val.pageShow,
+      pagetype: params.pageType,
     },
-    init() {
-      this.loading = true;
-      API_Other.getHomeList(this.params).then((res) => {
-        this.loading = false;
-        if (!res.result) return false;
-        res.result.records.forEach((item) => {
-          if (item.pageShow == "OPEN") {
-            item.pageShow = true;
-          } else {
-            item.pageShow = false;
-          }
-        });
-        this.list = res.result.records;
-        this.total = res.result.total;
-      });
-    },
-    handleEdit(val) {
-      this.$router.push({
-        path: "/floorList/main",
-        query: {
-          id: val.id,
-          name: val.name,
-          type: val.pageShow,
-          pagetype: this.params.pageType,
-        },
-      });
-    },
-    handleAdd() {
-      this.$router.push({
-        path: "/floorList/main",
-        query: { pagetype: this.params.pageType },
-      });
-    },
-    changePageSize(v) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = v;
-      this.init();
-    },
-    confirmDel(row) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "删除此模板？",
-        onOk: () => this.handleDel(row),
-      });
-    },
-    handleDel(val) {
-      this.loading = true;
-      API_Other.removePageHome(val.id).then((res) => {
-        this.loading = false;
-        if (res.result) {
-          this.init();
-          this.$Message.success("删除成功");
-        }
-      });
-    },
-  },
-};
+  });
+}
+function handleAdd() {
+  router.push({
+    path: "/floorList/main",
+    query: { pagetype: params.pageType },
+  });
+}
+function changePageSize(v) {
+  params.pageNumber = 1;
+  params.pageSize = v;
+  init();
+}
+function confirmDel(row) {
+  Modal.confirm({
+    title: "提示",
+    content: "删除此模板？",
+    onOk: () => handleDel(row),
+  });
+}
+function handleDel(val) {
+  loading.value = true;
+  API_Other.removePageHome(val.id).then((res) => {
+    loading.value = false;
+    if (res.result) {
+      init();
+      Message.success("删除成功");
+    }
+  });
+}
 </script>
 <style scoped lang="scss">
 .page-type-tabs {
diff --git a/manager/src/views/page/article-manage/ArticleCategory.vue b/manager/src/views/page/article-manage/ArticleCategory.vue
index e6616eb66..d56d49d5d 100644
--- a/manager/src/views/page/article-manage/ArticleCategory.vue
+++ b/manager/src/views/page/article-manage/ArticleCategory.vue
@@ -39,7 +39,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="formAdd" label-width="100px" :rules="formValidate">
         <el-form-item v-if="showParent" label="上级分类" prop="parentId">
           {{ parentTitle }}
           <el-input v-model="formAdd.parentId" style="display: none" />
@@ -59,137 +59,137 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { saveArticleCategory, getArticleCategory, delArticleCategory, updateArticleCategory } from "@/api/pages";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "lili-components",
-  data() {
-    return {
-      submitLoading: false,
-      loading: false,
-      expandLevel: 1,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      showParent: false,
-      parentTitle: "",
-      formAdd: {
-        parentId: "",
-        sort: 1,
-        level: 0,
-        articleCategoryName: "",
-      },
-      formValidate: {
-        articleCategoryName: [regular.REQUIRED],
-        sort: [regular.REQUIRED, regular.INTEGER],
-      },
-      tableData: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getAllList();
-    },
-    addChildren(v) {
-      this.modalType = 0;
-      this.modalTitle = "添加子分类";
-      this.formAdd.articleCategoryName = "";
-      this.parentTitle = v.articleCategoryName;
-      this.formAdd.level = Number(v.level) + 1;
-      this.showParent = true;
-      delete this.formAdd.id;
-      this.formAdd.parentId = v.id;
-      this.modalVisible = true;
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑";
-      this.formAdd.id = v.id;
-      this.formAdd.articleCategoryName = v.articleCategoryName;
-      this.formAdd.level = v.level;
-      this.formAdd.parentId = v.parentId;
-      this.formAdd.sort = v.sort;
-      this.showParent = false;
-      this.modalVisible = true;
-    },
-    addParent() {
-      this.modalType = 0;
-      this.modalTitle = "添加一级分类";
-      this.parentTitle = "顶级分类";
-      this.showParent = true;
-      this.$refs.form?.resetFields();
-      delete this.formAdd.id;
-      this.formAdd.parentId = 0;
-      this.modalVisible = true;
-    },
-    Submit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        if (this.modalType === 0) {
-          delete this.formAdd.id;
-          saveArticleCategory(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("添加成功");
-              this.formAdd = {
-                parentId: "",
-                sort: 1,
-                level: 0,
-                articleCategoryName: "",
-              };
-            }
-            this.getAllList();
-            this.modalVisible = false;
-          });
-        } else {
-          updateArticleCategory(this.formAdd, this.formAdd.id).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-            }
-            this.getAllList();
-            this.modalVisible = false;
-            this.$refs.form.resetFields();
-          });
+defineOptions({ name: "lili-components" });
+
+const submitLoading = ref(false);
+const loading = ref(false);
+const expandLevel = ref(1);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const showParent = ref(false);
+const parentTitle = ref("");
+const formAdd = ref({
+  parentId: "",
+  sort: 1,
+  level: 0,
+  articleCategoryName: "",
+});
+const formValidate = ref({
+  articleCategoryName: [regular.REQUIRED],
+  sort: [regular.REQUIRED, regular.INTEGER],
+});
+const tableData = ref([]);
+
+// 模板 el-form 的 ref（原 ref="form"，避免与顶层变量重名，改名为 formRef）
+const formRef = ref(null);
+
+function init() {
+  getAllList();
+}
+function addChildren(v) {
+  modalType.value = 0;
+  modalTitle.value = "添加子分类";
+  formAdd.value.articleCategoryName = "";
+  parentTitle.value = v.articleCategoryName;
+  formAdd.value.level = Number(v.level) + 1;
+  showParent.value = true;
+  delete formAdd.value.id;
+  formAdd.value.parentId = v.id;
+  modalVisible.value = true;
+}
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑";
+  formAdd.value.id = v.id;
+  formAdd.value.articleCategoryName = v.articleCategoryName;
+  formAdd.value.level = v.level;
+  formAdd.value.parentId = v.parentId;
+  formAdd.value.sort = v.sort;
+  showParent.value = false;
+  modalVisible.value = true;
+}
+function addParent() {
+  modalType.value = 0;
+  modalTitle.value = "添加一级分类";
+  parentTitle.value = "顶级分类";
+  showParent.value = true;
+  formRef.value?.resetFields();
+  delete formAdd.value.id;
+  formAdd.value.parentId = 0;
+  modalVisible.value = true;
+}
+function Submit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    if (modalType.value === 0) {
+      delete formAdd.value.id;
+      saveArticleCategory(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("添加成功");
+          formAdd.value = {
+            parentId: "",
+            sort: 1,
+            level: 0,
+            articleCategoryName: "",
+          };
+        }
+        getAllList();
+        modalVisible.value = false;
+      });
+    } else {
+      updateArticleCategory(formAdd.value, formAdd.value.id).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+        }
+        getAllList();
+        modalVisible.value = false;
+        formRef.value.resetFields();
+      });
+    }
+  });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.articleCategoryName + " ?",
+    loading: true,
+    onOk: () => {
+      delArticleCategory(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getAllList();
         }
       });
     },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.articleCategoryName + " ?",
-        loading: true,
-        onOk: () => {
-          delArticleCategory(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getAllList();
-            }
-          });
-        },
-      });
-    },
-    getAllList() {
-      this.loading = true;
-      getArticleCategory()
-        .then((res) => {
-          if (res.success) {
-            this.tableData = res.result || [];
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+function getAllList() {
+  loading.value = true;
+  getArticleCategory()
+    .then((res) => {
+      if (res.success) {
+        tableData.value = res.result || [];
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue b/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
index 15c055355..74860995a 100644
--- a/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
+++ b/manager/src/views/page/article-manage/HOTWORDS_HISTORY.vue
@@ -22,84 +22,81 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { Chart } from "@antv/g2";
 import { getHotWordsHistory } from "@/api/index";
 import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "HOTWORDS_HISTORY",
-  data() {
-    return {
-      params: {
-        date: "",
-      },
-      hotWordsChart: null,
-      hotWordsData: [],
-      endMonth: null,
-    };
-  },
-  created() {
-    const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
-    this.params.date = this.$filters.unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
-  },
-  methods: {
-    disabledDate(date) {
-      if (this.endMonth) {
-        const endDate = this.getDate(this.endMonth);
-        return (date && date > endDate) || date > new Date();
-      }
-      return date && date > new Date();
+defineOptions({ name: "HOTWORDS_HISTORY" });
+
+const params = ref({
+  date: "",
+});
+const hotWordsChart = ref(null);
+const hotWordsData = ref([]);
+const endMonth = ref(null);
+
+// 原 created
+const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
+params.value.date = unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
+
+function disabledDate(date) {
+  if (endMonth.value) {
+    const endDate = getDate(endMonth.value);
+    return (date && date > endDate) || date > new Date();
+  }
+  return date && date > new Date();
+}
+function getDate(monthStr) {
+  const [year, month] = monthStr.split("-");
+  return new Date(year, month, 0);
+}
+async function search(val) {
+  if (val) {
+    params.value.date = val;
+  }
+  const res = await getHotWordsHistory(params.value);
+  if (res.success) {
+    hotWordsData.value = res.result || [];
+    if (hotWordsChart.value) {
+      hotWordsChart.value.changeData(hotWordsData.value);
+      hotWordsChart.value.render();
+    }
+    if (!hotWordsData.value.length) {
+      Message.error("暂无数据");
+    }
+  }
+}
+function init() {
+  const chart = new Chart({
+    container: "container",
+    autoFit: true,
+    height: 500,
+    padding: [50, 20, 50, 20],
+  });
+  chart.scale("score", {
+    alias: "搜索次数",
+  });
+  chart.axis("keywords", {
+    tickLine: {
+      alignTick: false,
     },
-    getDate(monthStr) {
-      const [year, month] = monthStr.split("-");
-      return new Date(year, month, 0);
-    },
-    async search(val) {
-      if (val) {
-        this.params.date = val;
-      }
-      const res = await getHotWordsHistory(this.params);
-      if (res.success) {
-        this.hotWordsData = res.result || [];
-        if (this.hotWordsChart) {
-          this.hotWordsChart.changeData(this.hotWordsData);
-          this.hotWordsChart.render();
-        }
-        if (!this.hotWordsData.length) {
-          Message.error("暂无数据");
-        }
-      }
-    },
-    init() {
-      const chart = new Chart({
-        container: "container",
-        autoFit: true,
-        height: 500,
-        padding: [50, 20, 50, 20],
-      });
-      chart.scale("score", {
-        alias: "搜索次数",
-      });
-      chart.axis("keywords", {
-        tickLine: {
-          alignTick: false,
-        },
-      });
-      chart.axis("score", false);
-      chart.tooltip({
-        showMarkers: false,
-      });
-      chart.interval().position("keywords*score").color("#f59b99");
-      chart.interaction("element-active");
-      this.hotWordsChart = chart;
-      this.search();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+  chart.axis("score", false);
+  chart.tooltip({
+    showMarkers: false,
+  });
+  chart.interval().position("keywords*score").color("#f59b99");
+  chart.interaction("element-active");
+  hotWordsChart.value = chart;
+  search();
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue b/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
index d8ba1c8e7..661937c24 100644
--- a/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
+++ b/manager/src/views/page/article-manage/HOTWORDS_TODAY.vue
@@ -29,7 +29,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="热词" prop="keywords">
           <el-input v-model="form.keywords" clearable style="width: 100%" />
         </el-form-item>
@@ -45,86 +45,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import { getHotWords, setHotWords, deleteHotWords } from "@/api/index";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "HOTWORDS_TODAY",
-  components: { Close },
-  data() {
-    return {
-      submitLoading: false,
-      modalTitle: "",
-      loading: true,
-      modalVisible: false,
-      form: {
-        keywords: "",
-        point: 0,
-      },
-      data: [],
-      formValidate: {
-        keywords: [regular.REQUIRED, regular.VARCHAR20],
-        point: [regular.REQUIRED, regular.NUMBER],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getHotWords().then((res) => {
-        this.loading = false;
+defineOptions({ name: "HOTWORDS_TODAY" });
+
+const formRef = ref(null);
+
+const submitLoading = ref(false);
+const modalTitle = ref("");
+const loading = ref(true);
+const modalVisible = ref(false);
+const form = ref({
+  keywords: "",
+  point: 0,
+});
+const data = ref([]);
+const formValidate = reactive({
+  keywords: [regular.REQUIRED, regular.VARCHAR20],
+  point: [regular.REQUIRED, regular.NUMBER],
+});
+
+function init() {
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getHotWords().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result;
+    }
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      setHotWords(form.value).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          this.data = res.result;
+          Message.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+function add(words) {
+  modalTitle.value = "设置热词";
+  form.value.keywords = words || "";
+  form.value.point = 1;
+  modalVisible.value = true;
+}
+function deleteWords(words) {
+  Modal.confirm({
+    title: "是否确定删除热词",
+    content: "您确定要删除此热词吗？",
+    okText: "确定",
+    cancelText: "取消",
+    onOk: () => {
+      deleteHotWords({ words }).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getDataList();
         }
       });
     },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          setHotWords(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    add(words) {
-      this.modalTitle = "设置热词";
-      this.form.keywords = words || "";
-      this.form.point = 1;
-      this.modalVisible = true;
-    },
-    deleteWords(words) {
-      this.$Modal.confirm({
-        title: "是否确定删除热词",
-        content: "您确定要删除此热词吗？",
-        okText: "确定",
-        cancelText: "取消",
-        onOk: () => {
-          deleteHotWords({ words }).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/HOTWORD_SETTING.vue b/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
index e2fa83347..b49e36f49 100644
--- a/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
+++ b/manager/src/views/page/article-manage/HOTWORD_SETTING.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <el-form
-      ref="formValidate"
+      ref="formValidateRef"
       label-width="150px"
       label-position="right"
       :model="formValidate"
@@ -42,68 +42,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { setSetting } from "@/api/index";
+import { Message } from "@/utils/message";
 
-export default {
-  props: ["res", "type"],
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: {
-        saveNum: 1,
-        hotWordsSettingItems: [
-          {
-            keywords: "",
-            score: 1,
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    addSetItem() {
-      if (this.formValidate.hotWordsSettingItems.length >= 5) {
-        this.$Message.error("最多5个热词项");
-      } else {
-        this.formValidate.hotWordsSettingItems.push({
-          keywords: "",
-          score: 1,
-        });
-      }
+const props = defineProps(["res", "type"]);
+
+const formValidateRef = ref(null);
+// 动态 $refs[name] 查找的映射表
+const formRefs = { formValidate: formValidateRef };
+
+const ruleValidate = ref({});
+const formValidate = ref({
+  saveNum: 1,
+  hotWordsSettingItems: [
+    {
+      keywords: "",
+      score: 1,
     },
-    submit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.setupSetting();
-        } else {
-          this.$Message.error("请正确填写内容!");
-        }
-      });
-    },
-    setupSetting() {
-      setSetting(this.type || "HOT_WORDS", this.formValidate).then((res) => {
-        if (res.success) {
-          this.$Message.success("保存成功!");
-        } else {
-          this.$Message.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      if (!this.res) {
-        return;
-      }
-      const parsed = typeof this.res === "string" ? JSON.parse(this.res) : this.res;
-      if (parsed.hotWordsSettingItems) {
-        this.formValidate = { ...parsed };
-      }
-    },
-  },
-};
+  ],
+});
+
+init();
+
+function addSetItem() {
+  if (formValidate.value.hotWordsSettingItems.length >= 5) {
+    Message.error("最多5个热词项");
+  } else {
+    formValidate.value.hotWordsSettingItems.push({
+      keywords: "",
+      score: 1,
+    });
+  }
+}
+function submit(name) {
+  formRefs[name].value.validate((valid) => {
+    if (valid) {
+      setupSetting();
+    } else {
+      Message.error("请正确填写内容!");
+    }
+  });
+}
+function setupSetting() {
+  setSetting(props.type || "HOT_WORDS", formValidate.value).then((res) => {
+    if (res.success) {
+      Message.success("保存成功!");
+    } else {
+      Message.error("保存失败!");
+    }
+  });
+}
+function init() {
+  if (!props.res) {
+    return;
+  }
+  const parsed = typeof props.res === "string" ? JSON.parse(props.res) : props.res;
+  if (parsed.hotWordsSettingItems) {
+    formValidate.value = { ...parsed };
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/articleList.vue b/manager/src/views/page/article-manage/articleList.vue
index 651f4627a..540bcf7e6 100644
--- a/manager/src/views/page/article-manage/articleList.vue
+++ b/manager/src/views/page/article-manage/articleList.vue
@@ -15,7 +15,7 @@
     <div class="article-page__main">
       <el-card class="article-detail">
           <el-form
-            ref="searchForm"
+            ref="searchFormRef"
             :model="searchForm"
             inline
             label-width="70px"
@@ -100,7 +100,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="文章标题" prop="title">
           <el-input v-model="form.title" clearable style="width: 40%" />
         </el-form-item>
@@ -144,7 +144,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch, nextTick, onMounted } from "vue";
 import {
   getArticleCategory,
   saveArticle,
@@ -156,6 +157,7 @@ import {
 } from "@/api/pages";
 import tinymec from "@/components/editor/index.vue";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
 const validateArticleContent = (rule, value, callback) => {
   const html = String(value || "").trim();
@@ -175,280 +177,281 @@ const validateArticleContent = (rule, value, callback) => {
   callback();
 };
 
-export default {
-  components: {
-    tinymec,
+defineProps({
+  selected: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    selected: {
-      type: Boolean,
-      default: false,
-    },
+});
+const emit = defineEmits(["callbacked"]);
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+// 模板 el-form 的 ref（原 ref="form"，与 data 同名会互相覆盖，改名为 formRef）
+const formRef = ref(null);
+const editor = ref(null);
+
+const selectedIndex = ref(99999);
+const loading = ref(true);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const treeDataDefault = ref([]);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  categoryId: "",
+});
+const searchTreeValue = ref("");
+const form = ref({
+  openStatus: false,
+  title: "",
+  categoryId: "",
+  sort: 1,
+  content: "",
+  id: "",
+});
+const formValidate = ref({
+  title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
+  categoryId: [{ required: true, message: "请选择文章分类", trigger: "change" }],
+  sort: [regular.REQUIRED, regular.INTEGER],
+  content: [{ required: true, validator: validateArticleContent, trigger: "change" }],
+});
+const list = ref([]);
+const treeValue = ref("");
+const treeData = ref([]);
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+watch(
+  () => searchForm.value.categoryId,
+  () => {
+    handleSearch();
   },
-  data() {
-    return {
-      selectedIndex: 99999,
-      loading: true,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      treeDataDefault: [],
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        categoryId: "",
-      },
-      searchTreeValue: "",
-      form: {
-        openStatus: false,
-        title: "",
-        categoryId: "",
-        sort: 1,
-        content: "",
-        id: "",
-      },
-      formValidate: {
-        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
-        categoryId: [{ required: true, message: "请选择文章分类", trigger: "change" }],
-        sort: [regular.REQUIRED, regular.INTEGER],
-        content: [{ required: true, validator: validateArticleContent, trigger: "change" }],
-      },
-      list: [],
-      treeValue: "",
-      treeData: [],
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
+  { deep: true }
+);
+watch(
+  () => searchForm.value.title,
+  () => {
+    handleSearch();
   },
-  watch: {
-    "searchForm.categoryId": {
-      handler() {
-        this.handleSearch();
-      },
-      deep: true,
-    },
-    "searchForm.title": {
-      handler() {
-        this.handleSearch();
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    getDefaultForm() {
-      return {
-        openStatus: false,
-        title: "",
-        categoryId: "",
-        sort: 1,
-        content: "",
-      };
-    },
-    init() {
-      this.getDataList();
-      this.getAllList(0);
-    },
-    selectRow(row, index) {
-      this.selectedIndex = index;
-      this.$emit("callbacked", row);
-    },
-    handleCateChange(data) {
-      if (!data) return;
-      const { value, title } = data;
-      this.searchForm.categoryId =
-        value === "0" || value === 0 ? "" : value;
-      this.searchTreeValue = title;
-    },
-    changeSwitch(v) {
-      const params = { status: v.openStatus };
-      updateArticleStatus(v.id, params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-        }
+  { deep: true }
+);
+
+function getDefaultForm() {
+  return {
+    openStatus: false,
+    title: "",
+    categoryId: "",
+    sort: 1,
+    content: "",
+  };
+}
+function init() {
+  getDataList();
+  getAllList(0);
+}
+function selectRow(row, index) {
+  selectedIndex.value = index;
+  emit("callbacked", row);
+}
+function handleCateChange(data) {
+  if (!data) return;
+  const { value, title } = data;
+  searchForm.value.categoryId =
+    value === "0" || value === 0 ? "" : value;
+  searchTreeValue.value = title;
+}
+function changeSwitch(v) {
+  const params = { status: v.openStatus };
+  updateArticleStatus(v.id, params).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+    }
+  });
+}
+function handleCategoryChange(value) {
+  form.value.categoryId = value;
+  const findTitle = (nodes, id) => {
+    for (const node of nodes || []) {
+      if (node.value === id) return node.title;
+      const childTitle = findTitle(node.children, id);
+      if (childTitle) return childTitle;
+    }
+    return "";
+  };
+  treeValue.value = findTitle(treeDataDefault.value, value);
+}
+function handleCheckChange(data) {
+  let value = "";
+  let title = "";
+  list.value = [];
+  data.forEach((item) => {
+    value += `${item.value},`;
+    title += `${item.title},`;
+  });
+  value = value.substring(0, value.length - 1);
+  title = title.substring(0, title.length - 1);
+  list.value.push({ value, title });
+  form.value.categoryId = value;
+  treeValue.value = title;
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function getAllList(parent_id) {
+  loading.value = true;
+  getArticleCategory(parent_id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      treeData.value = getTree(res.result);
+      treeDataDefault.value = getTree(res.result);
+      treeData.value.unshift({
+        title: "全部",
+        level: 0,
+        children: [],
+        id: "0",
+        categoryId: 0,
+        value: "0",
       });
-    },
-    handleCategoryChange(value) {
-      this.form.categoryId = value;
-      const findTitle = (nodes, id) => {
-        for (const node of nodes || []) {
-          if (node.value === id) return node.title;
-          const childTitle = findTitle(node.children, id);
-          if (childTitle) return childTitle;
-        }
-        return "";
-      };
-      this.treeValue = findTitle(this.treeDataDefault, value);
-    },
-    handleCheckChange(data) {
-      let value = "";
-      let title = "";
-      this.list = [];
-      data.forEach((item) => {
-        value += `${item.value},`;
-        title += `${item.title},`;
-      });
-      value = value.substring(0, value.length - 1);
-      title = title.substring(0, title.length - 1);
-      this.list.push({ value, title });
-      this.form.categoryId = value;
-      this.treeValue = title;
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getAllList(parent_id) {
-      this.loading = true;
-      getArticleCategory(parent_id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.treeData = this.getTree(res.result);
-          this.treeDataDefault = this.getTree(res.result);
-          this.treeData.unshift({
-            title: "全部",
-            level: 0,
-            children: [],
-            id: "0",
-            categoryId: 0,
-            value: "0",
-          });
-        }
-      });
-    },
-    getTree(tree = []) {
-      const arr = [];
-      if (!!tree && tree.length !== 0) {
-        tree.forEach((item) => {
-          const obj = {};
-          obj.title = item.articleCategoryName;
-          obj.value = item.id;
-          obj.attr = item.articleCategoryName;
-          obj.children = this.getTree(item.children);
-          arr.push(obj);
-        });
+    }
+  });
+}
+function getTree(tree = []) {
+  const arr = [];
+  if (!!tree && tree.length !== 0) {
+    tree.forEach((item) => {
+      const obj = {};
+      obj.title = item.articleCategoryName;
+      obj.value = item.id;
+      obj.attr = item.articleCategoryName;
+      obj.children = getTree(item.children);
+      arr.push(obj);
+    });
+  }
+  return arr;
+}
+function buildArticleSearchParams() {
+  const params = { ...searchForm.value };
+  const categoryId = params.categoryId;
+  if (
+    categoryId === "" ||
+    categoryId === null ||
+    categoryId === undefined ||
+    categoryId === 0 ||
+    categoryId === "0"
+  ) {
+    delete params.categoryId;
+  }
+  return params;
+}
+function getDataList(val) {
+  if (val) form.value = {};
+  loading.value = true;
+  getArticle(buildArticleSearchParams())
+    .then((res) => {
+      if (res.success) {
+        total.value = res.result.total;
+        data.value = res.result.records?.length ? res.result.records : [];
       }
-      return arr;
-    },
-    buildArticleSearchParams() {
-      const params = { ...this.searchForm };
-      const categoryId = params.categoryId;
-      if (
-        categoryId === "" ||
-        categoryId === null ||
-        categoryId === undefined ||
-        categoryId === 0 ||
-        categoryId === "0"
-      ) {
-        delete params.categoryId;
-      }
-      return params;
-    },
-    getDataList(val) {
-      if (val) this.form = {};
-      this.loading = true;
-      getArticle(this.buildArticleSearchParams())
-        .then((res) => {
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSubmit() {
+  if (editor.value?.getContent) {
+    form.value.content = editor.value.getContent();
+  }
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalType.value === 0) {
+        delete form.value.id;
+        saveArticle(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            this.total = res.result.total;
-            this.data = res.result.records?.length ? res.result.records : [];
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
-        })
-        .finally(() => {
-          this.loading = false;
         });
-    },
-    handleSubmit() {
-      if (this.$refs.editor?.getContent) {
-        this.form.content = this.$refs.editor.getContent();
-      }
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            delete this.form.id;
-            saveArticle(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            updateArticle(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
+      } else {
+        updateArticle(form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
+        });
+      }
+    }
+  });
+}
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加文章";
+  treeValue.value = "";
+  form.value = getDefaultForm();
+  modalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.clearValidate?.();
+  });
+}
+function edit(data) {
+  modalType.value = 1;
+  modalTitle.value = "编辑文章";
+  treeValue.value = "";
+  form.value = getDefaultForm();
+  seeArticle(data.id).then((res) => {
+    if (res.result) {
+      modalVisible.value = true;
+      form.value.categoryId = res.result.categoryId;
+      treeValue.value = data.articleCategoryName;
+      form.value.id = data.id;
+      form.value.content = res.result.content;
+      form.value.title = res.result.title;
+      form.value.sort = res.result.sort;
+      form.value.openStatus = res.result.openStatus;
+    }
+  });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除么?",
+    loading: true,
+    onOk: () => {
+      delArticle(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加文章";
-      this.treeValue = "";
-      this.form = this.getDefaultForm();
-      this.modalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.clearValidate?.();
-      });
-    },
-    edit(data) {
-      this.modalType = 1;
-      this.modalTitle = "编辑文章";
-      this.treeValue = "";
-      this.form = this.getDefaultForm();
-      seeArticle(data.id).then((res) => {
-        if (res.result) {
-          this.modalVisible = true;
-          this.form.categoryId = res.result.categoryId;
-          this.treeValue = data.articleCategoryName;
-          this.form.id = data.id;
-          this.form.content = res.result.content;
-          this.form.title = res.result.title;
-          this.form.sort = res.result.sort;
-          this.form.openStatus = res.result.openStatus;
-        }
-      });
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除么?",
-        loading: true,
-        onOk: () => {
-          delArticle(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/hotWords.vue b/manager/src/views/page/article-manage/hotWords.vue
index e5d016b6b..0bc7c7e7f 100644
--- a/manager/src/views/page/article-manage/hotWords.vue
+++ b/manager/src/views/page/article-manage/hotWords.vue
@@ -20,32 +20,22 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import todayHotWords from "./template/todayHotWords";
 import historyHotWords from "./template/historyHotWords";
 import setupHotWords from "./template/setupHotWords";
 import statisticsHotWords from "./template/statisticsHotWords";
 
-export default {
-  name: "hotWords",
-  components: {
-    todayHotWords,
-    historyHotWords,
-    setupHotWords,
-    statisticsHotWords,
-  },
-  data() {
-    return {
-      templatesWay: [
-        { template: "todayHotWords", label: "今日热词" },
-        { template: "historyHotWords", label: "历史热词" },
-        { template: "statisticsHotWords", label: "热词统计" },
-        { template: "setupHotWords", label: "设置热词" },
-      ],
-      currentTemplate: "todayHotWords",
-    };
-  },
-};
+defineOptions({ name: "hotWords" });
+
+const templatesWay = ref([
+  { template: "todayHotWords", label: "今日热词" },
+  { template: "historyHotWords", label: "历史热词" },
+  { template: "statisticsHotWords", label: "热词统计" },
+  { template: "setupHotWords", label: "设置热词" },
+]);
+const currentTemplate = ref("todayHotWords");
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/manager/src/views/page/article-manage/template/historyHotWords.vue b/manager/src/views/page/article-manage/template/historyHotWords.vue
index 129a8fa9d..beb83c0a5 100644
--- a/manager/src/views/page/article-manage/template/historyHotWords.vue
+++ b/manager/src/views/page/article-manage/template/historyHotWords.vue
@@ -22,81 +22,76 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { Chart } from "@antv/g2";
 import { getHotWordsHistory } from "@/api/index";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  data() {
-    return {
-      params: {
-        date: "",
-      },
-      hotWordsChart: null,
-      hotWordsData: [],
-      hasData: true,
-      endMonth: null,
-    };
-  },
-  created() {
-    const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
-    this.params.date = this.$filters.unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
-  },
-  methods: {
-    disabledDate(date) {
-      if (this.endMonth) {
-        const endDate = this.getDate(this.endMonth);
-        return (date && date > endDate) || date > new Date();
-      }
-      return date && date > new Date();
+const params = reactive({
+  date: "",
+});
+const hotWordsChart = ref(null);
+const hotWordsData = ref([]);
+const hasData = ref(true);
+const endMonth = ref(null);
+
+const yesterday = new Date(Date.now() - 24 * 60 * 60 * 1000);
+params.date = unixToDate(Math.floor(yesterday.getTime() / 1000), "yyyy-MM-dd");
+
+function disabledDate(date) {
+  if (endMonth.value) {
+    const endDate = getDate(endMonth.value);
+    return (date && date > endDate) || date > new Date();
+  }
+  return date && date > new Date();
+}
+function getDate(monthStr) {
+  const [year, month] = monthStr.split("-");
+  return new Date(year, month, 0);
+}
+async function search(val) {
+  if (val) {
+    params.date = val;
+  }
+  const res = await getHotWordsHistory(params);
+  if (res.success) {
+    hotWordsData.value = res.result || [];
+    hasData.value = hotWordsData.value.length > 0;
+    if (hasData.value && hotWordsChart.value) {
+      hotWordsChart.value.changeData(hotWordsData.value);
+      hotWordsChart.value.render();
+    }
+  }
+}
+function init() {
+  const chart = new Chart({
+    container: "container",
+    autoFit: true,
+    height: 500,
+    padding: [50, 20, 50, 20],
+  });
+  chart.scale("score", {
+    alias: "搜索次数",
+  });
+  chart.axis("keywords", {
+    tickLine: {
+      alignTick: false,
     },
-    getDate(monthStr) {
-      const [year, month] = monthStr.split("-");
-      return new Date(year, month, 0);
-    },
-    async search(val) {
-      if (val) {
-        this.params.date = val;
-      }
-      const res = await getHotWordsHistory(this.params);
-      if (res.success) {
-        this.hotWordsData = res.result || [];
-        this.hasData = this.hotWordsData.length > 0;
-        if (this.hasData && this.hotWordsChart) {
-          this.hotWordsChart.changeData(this.hotWordsData);
-          this.hotWordsChart.render();
-        }
-      }
-    },
-    init() {
-      const chart = new Chart({
-        container: "container",
-        autoFit: true,
-        height: 500,
-        padding: [50, 20, 50, 20],
-      });
-      chart.scale("score", {
-        alias: "搜索次数",
-      });
-      chart.axis("keywords", {
-        tickLine: {
-          alignTick: false,
-        },
-      });
-      chart.axis("score", false);
-      chart.tooltip({
-        showMarkers: false,
-      });
-      chart.interval().position("keywords*score").color("#f59b99");
-      chart.interaction("element-active");
-      this.hotWordsChart = chart;
-      this.search();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+  chart.axis("score", false);
+  chart.tooltip({
+    showMarkers: false,
+  });
+  chart.interval().position("keywords*score").color("#f59b99");
+  chart.interaction("element-active");
+  hotWordsChart.value = chart;
+  search();
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/template/setupHotWords.vue b/manager/src/views/page/article-manage/template/setupHotWords.vue
index 4a42c22fe..1b0bc36cb 100644
--- a/manager/src/views/page/article-manage/template/setupHotWords.vue
+++ b/manager/src/views/page/article-manage/template/setupHotWords.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <el-form
-      ref="formValidate"
+      ref="formRef"
       label-width="150px"
       label-position="right"
       :model="formValidate"
@@ -49,65 +49,60 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { setSetting, getSetting } from "@/api/index";
+import { Message } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: {
-        saveNum: 1,
-        hotWordsSettingItems: [
-          {
-            keywords: "",
-            score: 1,
-          },
-        ],
-      },
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    addSetItem() {
-      if (this.formValidate.hotWordsSettingItems.length >= 5) {
-        this.$Message.error("最多5个热词项");
-      } else {
-        this.formValidate.hotWordsSettingItems.push({
-          keywords: "",
-          score: 1,
-        });
-      }
+const formRef = ref(null);
+const ruleValidate = ref({});
+const formValidate = ref({
+  saveNum: 1,
+  hotWordsSettingItems: [
+    {
+      keywords: "",
+      score: 1,
     },
-    submit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.setupSetting();
-        } else {
-          this.$Message.error("请正确填写内容!");
-        }
-      });
-    },
-    setupSetting() {
-      setSetting("HOT_WORDS", this.formValidate).then((res) => {
-        if (res.success) {
-          this.$Message.success("保存成功!");
-        } else {
-          this.$Message.error("保存失败!");
-        }
-        this.init();
-      });
-    },
-    async init() {
-      const res = await getSetting("HOT_WORDS");
-      if (res.success && res.result) {
-        this.formValidate = res.result;
-      }
-    },
-  },
-};
+  ],
+});
+
+init();
+
+function addSetItem() {
+  if (formValidate.value.hotWordsSettingItems.length >= 5) {
+    Message.error("最多5个热词项");
+  } else {
+    formValidate.value.hotWordsSettingItems.push({
+      keywords: "",
+      score: 1,
+    });
+  }
+}
+function submit(name) {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      setupSetting();
+    } else {
+      Message.error("请正确填写内容!");
+    }
+  });
+}
+function setupSetting() {
+  setSetting("HOT_WORDS", formValidate.value).then((res) => {
+    if (res.success) {
+      Message.success("保存成功!");
+    } else {
+      Message.error("保存失败!");
+    }
+    init();
+  });
+}
+async function init() {
+  const res = await getSetting("HOT_WORDS");
+  if (res.success && res.result) {
+    formValidate.value = res.result;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/template/statisticsHotWords.vue b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
index de1ab9b67..e467eb528 100644
--- a/manager/src/views/page/article-manage/template/statisticsHotWords.vue
+++ b/manager/src/views/page/article-manage/template/statisticsHotWords.vue
@@ -22,91 +22,88 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, shallowRef, watch, onMounted } from "vue";
 import { Chart } from "@antv/g2";
 import { getHotWordsStatistics } from "@/api/index";
 import affixTime from "@/components/affix-time";
 
-export default {
-  components: {
-    affixTime,
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  top: 50,
+});
+// G2 Chart 实例不做深度响应式（避免 Proxy 包装破坏图表内部状态）
+const hotWordsChart = shallowRef("");
+const hotWordsData = ref([]);
+const hasData = ref(true);
+
+// 历史遗留：原 watch 监听的 year 从未在 data 中声明，此处补齐声明以保留监听行为
+const year = ref("");
+
+watch(
+  params,
+  () => {
+    search();
   },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        top: 50,
+  { deep: true, immediate: true }
+);
+watch(year, (val) => {
+  params.value.year = new Date(val).getFullYear();
+});
+
+function clickBreadcrumb(val) {
+  params.value = { ...params.value, ...val };
+}
+
+async function search() {
+  const res = await getHotWordsStatistics(params.value);
+  if (res.success) {
+    hotWordsData.value = res.result || [];
+    hasData.value = hotWordsData.value.length > 0;
+    if (!hasData.value) {
+      return;
+    }
+    if (!hotWordsChart.value) {
+      hotWordsChart.value = new Chart({
+        container: "container",
+        autoFit: true,
+        height: 500,
+        padding: [50, 20, 50, 20],
+      });
+    }
+    init();
+  }
+}
+
+function init() {
+  if (hotWordsChart.value) {
+    hotWordsChart.value.data(hotWordsData.value);
+    hotWordsChart.value.scale("score", {
+      alias: "搜索次数",
+    });
+
+    hotWordsChart.value.axis("keywords", {
+      tickLine: {
+        alignTick: false,
       },
-      hotWordsChart: "",
-      hotWordsData: [],
-      hasData: true,
-    };
-  },
-  watch: {
-    params: {
-      handler() {
-        this.search();
-      },
-      deep: true,
-      immediate: true,
-    },
-    year(val) {
-      this.params.year = new Date(val).getFullYear();
-    },
-  },
-  methods: {
-    clickBreadcrumb(val) {
-      this.params = { ...this.params, ...val };
-    },
-    async search() {
-      const res = await getHotWordsStatistics(this.params);
-      if (res.success) {
-        this.hotWordsData = res.result || [];
-        this.hasData = this.hotWordsData.length > 0;
-        if (!this.hasData) {
-          return;
-        }
-        if (!this.hotWordsChart) {
-          this.hotWordsChart = new Chart({
-            container: "container",
-            autoFit: true,
-            height: 500,
-            padding: [50, 20, 50, 20],
-          });
-        }
-        this.init();
-      }
-    },
-    init() {
-      if (this.hotWordsChart) {
-        this.hotWordsChart.data(this.hotWordsData);
-        this.hotWordsChart.scale("score", {
-          alias: "搜索次数",
-        });
+    });
+    hotWordsChart.value.axis("score", false);
 
-        this.hotWordsChart.axis("keywords", {
-          tickLine: {
-            alignTick: false,
-          },
-        });
-        this.hotWordsChart.axis("score", false);
+    hotWordsChart.value.tooltip({
+      showMarkers: false,
+    });
+    hotWordsChart.value.interval().position("keywords*score").color("#409EFF");
+    hotWordsChart.value.interaction("element-active");
 
-        this.hotWordsChart.tooltip({
-          showMarkers: false,
-        });
-        this.hotWordsChart.interval().position("keywords*score").color("#409EFF");
-        this.hotWordsChart.interaction("element-active");
+    hotWordsChart.value.render();
+  }
+}
 
-        this.hotWordsChart.render();
-      }
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/article-manage/template/todayHotWords.vue b/manager/src/views/page/article-manage/template/todayHotWords.vue
index e752e2a42..48a8ec482 100644
--- a/manager/src/views/page/article-manage/template/todayHotWords.vue
+++ b/manager/src/views/page/article-manage/template/todayHotWords.vue
@@ -33,7 +33,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="热词" prop="keywords">
           <el-input v-model="form.keywords" clearable style="width: 100%" />
         </el-form-item>
@@ -49,85 +49,91 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getHotWords, setHotWords, deleteHotWords } from "@/api/index";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "todayHotWords",
-  data() {
-    return {
-      submitLoading: false,
-      modalTitle: "",
-      loading: true,
-      modalVisible: false,
-      form: {
-        keywords: "",
-        point: 0,
-      },
-      data: [],
-      formValidate: {
-        keywords: [regular.REQUIRED, regular.VARCHAR20],
-        point: [regular.REQUIRED, regular.NUMBER],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getHotWords().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result;
-          this.$store.state.app.hotWords = this.data;
-        }
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          setHotWords(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    add(words) {
-      this.modalTitle = "设置热词";
-      this.form.keywords = words || "";
-      this.form.point = 1;
-      this.modalVisible = true;
-    },
-    deleteWords(words) {
-      this.$Modal.confirm({
-        title: "是否确定删除热词",
-        content: "您确定要删除此热词吗？",
-        okText: "确定",
-        cancelText: "取消",
-        onOk: () => {
-          deleteHotWords({ words }).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
+defineOptions({ name: "todayHotWords" });
+
+const appStore = useAppStore();
+
+const submitLoading = ref(false);
+const modalTitle = ref("");
+const loading = ref(true);
+const modalVisible = ref(false);
+const form = reactive({
+  keywords: "",
+  point: 0,
+});
+const data = ref([]);
+const formValidate = {
+  keywords: [regular.REQUIRED, regular.VARCHAR20],
+  point: [regular.REQUIRED, regular.NUMBER],
 };
+
+const formRef = ref(null);
+
+function init() {
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getHotWords().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result;
+      appStore.hotWords = data.value;
+    }
+  });
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      setHotWords(form).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+
+function add(words) {
+  modalTitle.value = "设置热词";
+  form.keywords = words || "";
+  form.point = 1;
+  modalVisible.value = true;
+}
+
+function deleteWords(words) {
+  Modal.confirm({
+    title: "是否确定删除热词",
+    content: "您确定要删除此热词吗？",
+    okText: "确定",
+    cancelText: "取消",
+    onOk: () => {
+      deleteHotWords({ words }).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getDataList();
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/page/feedback/feedback.vue b/manager/src/views/page/feedback/feedback.vue
index dccf410d5..7b6d35d5a 100644
--- a/manager/src/views/page/feedback/feedback.vue
+++ b/manager/src/views/page/feedback/feedback.vue
@@ -88,61 +88,61 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { getMemberFeedback, getMemberFeedbackDetail } from "@/api/other";
 
-export default {
-  name: "feedback",
-  data() {
-    return {
-      loading: true,
-      form: {},
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      detailVisible: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getFeedback();
-    },
-    changePage() {
-      this.getFeedback();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getFeedback();
-    },
-    getFeedback() {
-      this.loading = true;
-      getMemberFeedback(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    detail(v) {
-      getMemberFeedbackDetail(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.form = res.result;
-          this.detailVisible = true;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "feedback" });
+
+// 模板 el-table / el-form 的模板 ref（对应原 $refs.table / $refs.formValidate）
+const table = ref(null);
+const formValidate = ref(null);
+
+const loading = ref(true);
+const form = ref({});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const detailVisible = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getFeedback();
+}
+function changePage() {
+  getFeedback();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getFeedback();
+}
+function getFeedback() {
+  loading.value = true;
+  getMemberFeedback(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function detail(v) {
+  getMemberFeedbackDetail(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      form.value = res.result;
+      detailVisible.value = true;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .ops a {
diff --git a/manager/src/views/personal-center/personal-center.vue b/manager/src/views/personal-center/personal-center.vue
index b068cc5f1..e573ffb7b 100644
--- a/manager/src/views/personal-center/personal-center.vue
+++ b/manager/src/views/personal-center/personal-center.vue
@@ -12,7 +12,7 @@
           <div class="title">{{ currMenu }}</div>
           <div>
             <div v-show="currMenu=='基本信息'">
-              <el-form ref="userForm" :model="userForm" label-width="90px" label-position="left">
+              <el-form ref="userFormRef" :model="userForm" label-width="90px" label-position="left">
                 <el-form-item label="用户头像：">
                   <upload-pic-thumb
                     v-model="userForm.avatar"
@@ -55,78 +55,81 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   userInfoEdit,
 } from "@/api/index";
 import uploadPicThumb from "@/components/lili/upload-pic-thumb";
 import Cookies from "js-cookie";
 import util from "@/libs/util";
+import { Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  components: {
-    uploadPicThumb
-  },
-  name: "personal-enter",
-  data() {
-    return {
-      activeName: "基本信息", // 激活的tab
-      userForm: { // 用户信息
-        avatar: "",
-        nickname: ""
-      },
-      saveLoading:false,//loading 状态
-      currMenu: "基本信息" // 当前菜单
-    };
-  },
-  methods: {
-    // 初始化数据
-    init() {
-      let v = JSON.parse(Cookies.get("userInfoManager"));
-      // 转换null为""
-      for (let attr in v) {
-        if (v[attr] == null) {
-          v[attr] = "";
-        }
-      }
-      let userInfo = JSON.parse(JSON.stringify(v));
-      this.userForm = userInfo;
-    },
-    // 跳转修改密码页面
-    changePassword() {
-      util.openNewPage(this, "change-password");
-      this.$router.push({
-        name: "change_password"
-      });
-    },
-    // 左侧菜单点击
-    changeMenu(v) {
-      this.currMenu = v;
-    },
-    // 保存
-    saveEdit() {
-      this.saveLoading = true;
-      let params = this.userForm;
-      userInfoEdit(params).then(res => {
-        this.saveLoading = false;
-        if (res.success) {
-          this.$Message.success("保存成功");
-          // 更新用户信息
-          Cookies.set("userInfoManager", JSON.stringify(this.userForm));
-          // 更新头像
-          this.$store.commit("setAvatarPath", this.userForm.avatar);
-          setTimeout(()=>{
-            this.$router.go(0)
-          },500)
+defineOptions({ name: "personal-enter" });
 
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
+const router = useRouter();
+const appStore = useAppStore();
+
+const userFormRef = ref(null);
+const activeName = ref("基本信息"); // 激活的tab
+const userForm = ref({ // 用户信息
+  avatar: "",
+  nickname: ""
+});
+const saveLoading = ref(false); //loading 状态
+const currMenu = ref("基本信息"); // 当前菜单
+
+// 初始化数据
+function init() {
+  let v = JSON.parse(Cookies.get("userInfoManager"));
+  // 转换null为""
+  for (let attr in v) {
+    if (v[attr] == null) {
+      v[attr] = "";
+    }
   }
-};
+  let userInfo = JSON.parse(JSON.stringify(v));
+  userForm.value = userInfo;
+}
+
+// 跳转修改密码页面
+function changePassword() {
+  util.openNewPage("change-password");
+  router.push({
+    name: "change_password"
+  });
+}
+
+// 左侧菜单点击
+function changeMenu(v) {
+  currMenu.value = v;
+}
+
+// 保存
+function saveEdit() {
+  saveLoading.value = true;
+  let params = userForm.value;
+  userInfoEdit(params).then(res => {
+    saveLoading.value = false;
+    if (res.success) {
+      Message.success("保存成功");
+      // 更新用户信息
+      Cookies.set("userInfoManager", JSON.stringify(userForm.value));
+      // 更新头像
+      appStore.setAvatarPath(userForm.value.avatar);
+      setTimeout(()=>{
+        router.go(0)
+      },500)
+
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
   .own-space {
diff --git a/manager/src/views/privacy-content/index.vue b/manager/src/views/privacy-content/index.vue
index 1e36cfbe5..9f30199fe 100644
--- a/manager/src/views/privacy-content/index.vue
+++ b/manager/src/views/privacy-content/index.vue
@@ -33,14 +33,14 @@
     >
       <el-row :gutter="16">
         <el-col :span="16">
-          <el-form ref="form" :model="form.article" label-width="100px">
+          <el-form ref="formRef" :model="form.article" label-width="100px">
             <el-form-item label="文章标题" prop="title">
               <el-input v-model="form.article.title" clearable style="width: 40%" />
             </el-form-item>
             <el-form-item class="form-item-view-el" label="文章内容" prop="content">
               <editor
                 v-if="modalVisible"
-                ref="editor"
+                ref="editorRef"
                 open-xss
                 v-model="form.article.content"
               />
@@ -64,140 +64,146 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { getArticleCategory, updatePrivacy, getPrivacy } from "@/api/pages";
-import tinymec from "@/components/editor/index.vue";
+import editor from "@/components/editor/index.vue";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "privacy",
-  components: {
-    editor: tinymec,
+defineOptions({ name: "privacy" });
+
+defineProps({
+  selected: {
+    type: Boolean,
+    default: false,
   },
-  props: {
-    selected: {
-      type: Boolean,
-      default: false,
-    },
+});
+
+const loading = ref(false);
+const modalVisible = ref(false);
+const treeDataDefault = ref([]);
+const list = ref([]);
+const treeValue = ref("");
+const treeData = ref([]);
+const submitLoading = ref(false);
+const modalTitle = ref("");
+const currindex = ref("");
+const form = reactive({
+  type: "",
+  article: {
+    openStatus: false,
+    title: "",
+    categoryId: "",
+    sort: 1,
+    content: "",
+    type: "",
   },
-  data() {
-    return {
-      loading: false,
-      modalVisible: false,
-      treeDataDefault: [],
-      list: [],
-      treeValue: "",
-      treeData: [],
-      submitLoading: false,
-      modalTitle: "",
-      currindex: "",
-      form: {
-        type: "",
-        article: {
-          openStatus: false,
-          title: "",
-          categoryId: "",
-          sort: 1,
-          content: "",
-          type: "",
-        },
-        id: "",
-      },
-      data: [
-        { name: "店铺入驻协议", type: "STORE_REGISTER" },
-        { name: "用户协议", type: "USER_AGREEMENT" },
-        { name: "证照信息", type: "LICENSE_INFORMATION" },
-        { name: "关于我们", type: "ABOUT" },
-        { name: "隐私策略", type: "PRIVACY_POLICY" },
-      ],
-    };
-  },
-  methods: {
-    init() {
-      this.getAllList(0);
-    },
-    handleCheckChange(data) {
-      let value = "";
-      let title = "";
-      this.list = [];
-      data.forEach((item) => {
-        value += `${item.value},`;
-        title += `${item.title},`;
+  id: "",
+});
+const data = ref([
+  { name: "店铺入驻协议", type: "STORE_REGISTER" },
+  { name: "用户协议", type: "USER_AGREEMENT" },
+  { name: "证照信息", type: "LICENSE_INFORMATION" },
+  { name: "关于我们", type: "ABOUT" },
+  { name: "隐私策略", type: "PRIVACY_POLICY" },
+]);
+
+// 原代码未在 data 中声明，直接在 edit() 中挂载到 this 上
+let modalType = 0;
+
+const formRef = ref(null);
+const editorRef = ref(null);
+
+function init() {
+  getAllList(0);
+}
+
+function handleCheckChange(data) {
+  let value = "";
+  let title = "";
+  list.value = [];
+  data.forEach((item) => {
+    value += `${item.value},`;
+    title += `${item.title},`;
+  });
+  value = value.substring(0, value.length - 1);
+  title = title.substring(0, title.length - 1);
+  list.value.push({ value, title });
+  form.article.categoryId = value;
+}
+
+function getAllList(parent_id) {
+  loading.value = true;
+  getArticleCategory(parent_id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      treeData.value = getTree(res.result);
+      treeDataDefault.value = getTree(res.result);
+      treeData.value.unshift({
+        title: "全部",
+        level: 0,
+        children: [],
+        id: "0",
+        categoryId: 0,
       });
-      value = value.substring(0, value.length - 1);
-      title = title.substring(0, title.length - 1);
-      this.list.push({ value, title });
-      this.form.article.categoryId = value;
-    },
-    getAllList(parent_id) {
-      this.loading = true;
-      getArticleCategory(parent_id).then((res) => {
-        this.loading = false;
+    }
+  });
+}
+
+function getTree(tree = []) {
+  const arr = [];
+  if (!!tree && tree.length !== 0) {
+    tree.forEach((item) => {
+      const obj = {};
+      obj.title = item.articleCategoryName;
+      obj.value = item.id;
+      obj.attr = item.articleCategoryName;
+      obj.children = getTree(item.children);
+      arr.push(obj);
+    });
+  }
+  return arr;
+}
+
+function edit(data) {
+  modalType = 1;
+  modalTitle.value = "编辑协议";
+  form.article = { content: "" };
+  formRef.value?.resetFields();
+  loading.value = true;
+  getPrivacy(data.type).then((res) => {
+    loading.value = false;
+    modalVisible.value = true;
+    form.article.categoryId = res.result.categoryId;
+    form.id = res.result.id;
+    form.article.content = res.result.content;
+    form.article.title = res.result.title;
+    form.article.sort = res.result.sort;
+    form.article.openStatus = res.result.openStatus;
+    form.article.type = res.result.type;
+    form.type = res.result.type;
+  });
+  loading.value = false;
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      updatePrivacy(form.id, form.type, form.article).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          this.treeData = this.getTree(res.result);
-          this.treeDataDefault = this.getTree(res.result);
-          this.treeData.unshift({
-            title: "全部",
-            level: 0,
-            children: [],
-            id: "0",
-            categoryId: 0,
-          });
+          Message.success("操作成功");
+          modalVisible.value = false;
         }
       });
-    },
-    getTree(tree = []) {
-      const arr = [];
-      if (!!tree && tree.length !== 0) {
-        tree.forEach((item) => {
-          const obj = {};
-          obj.title = item.articleCategoryName;
-          obj.value = item.id;
-          obj.attr = item.articleCategoryName;
-          obj.children = this.getTree(item.children);
-          arr.push(obj);
-        });
-      }
-      return arr;
-    },
-    edit(data) {
-      this.modalType = 1;
-      this.modalTitle = "编辑协议";
-      this.form.article = { content: "" };
-      this.$refs.form?.resetFields();
-      this.loading = true;
-      getPrivacy(data.type).then((res) => {
-        this.loading = false;
-        this.modalVisible = true;
-        this.form.article.categoryId = res.result.categoryId;
-        this.form.id = res.result.id;
-        this.form.article.content = res.result.content;
-        this.form.article.title = res.result.title;
-        this.form.article.sort = res.result.sort;
-        this.form.article.openStatus = res.result.openStatus;
-        this.form.article.type = res.result.type;
-        this.form.type = res.result.type;
-      });
-      this.loading = false;
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          updatePrivacy(this.form.id, this.form.type, this.form.article).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/procurement/damage-report/detail.vue b/manager/src/views/procurement/damage-report/detail.vue
index f9ea35d53..d1af5abf6 100644
--- a/manager/src/views/procurement/damage-report/detail.vue
+++ b/manager/src/views/procurement/damage-report/detail.vue
@@ -40,28 +40,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getDamageReportDetail, getDamageReportItems } from "@/api/procurement";
 import { damageStatusText, damageStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-damage-report-detail",
-  data() {
-    return { detail: {}, items: [] };
-  },
-  mounted() {
-    const id = this.$route.query.id;
-    if (id) {
-      getDamageReportDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
-      getDamageReportItems(id).then((res) => {
-        if (res.success) this.items = res.result || [];
-      });
-    }
-  },
-  methods: { damageStatusText, damageStatusTag, formatMoney },
-};
+defineOptions({ name: "manager-damage-report-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const items = ref([]);
+
+onMounted(() => {
+  const id = route.query.id;
+  if (id) {
+    getDamageReportDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+    getDamageReportItems(id).then((res) => {
+      if (res.success) items.value = res.result || [];
+    });
+  }
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/procurement/damage-report/list.vue b/manager/src/views/procurement/damage-report/list.vue
index 6088b720c..8cc4ba08d 100644
--- a/manager/src/views/procurement/damage-report/list.vue
+++ b/manager/src/views/procurement/damage-report/list.vue
@@ -48,48 +48,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getDamageReportPage } from "@/api/procurement";
 import { DAMAGE_STATUS, damageStatusText, damageStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-damage-report-list",
-  data() {
-    return {
-      DAMAGE_STATUS,
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, storeId: "", status: "" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    damageStatusText,
-    damageStatusTag,
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getDamageReportPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-damage-report-detail", query: { id: row.id } });
-    },
-  },
-};
+defineOptions({ name: "manager-damage-report-list" });
+
+const router = useRouter();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({ pageNumber: 1, pageSize: 10, storeId: "", status: "" });
+
+onMounted(() => {
+  getDataList();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getDamageReportPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function goDetail(row) {
+  router.push({ name: "manager-damage-report-detail", query: { id: row.id } });
+}
 </script>
diff --git a/manager/src/views/procurement/inbound/detail.vue b/manager/src/views/procurement/inbound/detail.vue
index 80eeaf7e8..47c658274 100644
--- a/manager/src/views/procurement/inbound/detail.vue
+++ b/manager/src/views/procurement/inbound/detail.vue
@@ -27,36 +27,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getProcurementInboundDetail, getProcurementInboundItems } from "@/api/procurement";
 import { formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-inbound-detail",
-  data() {
-    return { detail: {}, items: [] };
-  },
-  computed: {
-    totalInboundQuantity() {
-      return (this.items || []).reduce(
-        (sum, item) => sum + (Number(item.inboundQuantity) || 0),
-        0
-      );
-    },
-  },
-  mounted() {
-    const id = this.$route.query.id;
-    if (id) {
-      getProcurementInboundDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
-      getProcurementInboundItems(id).then((res) => {
-        if (res.success) this.items = res.result || [];
-      });
-    }
-  },
-  methods: { formatMoney },
-};
+defineOptions({ name: "manager-procurement-inbound-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const items = ref([]);
+
+const totalInboundQuantity = computed(() => {
+  return (items.value || []).reduce(
+    (sum, item) => sum + (Number(item.inboundQuantity) || 0),
+    0
+  );
+});
+
+onMounted(() => {
+  const id = route.query.id;
+  if (id) {
+    getProcurementInboundDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+    getProcurementInboundItems(id).then((res) => {
+      if (res.success) items.value = res.result || [];
+    });
+  }
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/procurement/inbound/list.vue b/manager/src/views/procurement/inbound/list.vue
index 0ac883207..ef0551820 100644
--- a/manager/src/views/procurement/inbound/list.vue
+++ b/manager/src/views/procurement/inbound/list.vue
@@ -39,45 +39,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getProcurementInboundPage } from "@/api/procurement";
 import { formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-inbound-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, inboundSn: "" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getProcurementInboundPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-procurement-inbound-detail", query: { id: row.id } });
-    },
-  },
-};
+defineOptions({ name: "manager-procurement-inbound-list" });
+
+const router = useRouter();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({ pageNumber: 1, pageSize: 10, inboundSn: "" });
+
+onMounted(() => {
+  getDataList();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getProcurementInboundPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function goDetail(row) {
+  router.push({ name: "manager-procurement-inbound-detail", query: { id: row.id } });
+}
 </script>
diff --git a/manager/src/views/procurement/inventory-count/detail.vue b/manager/src/views/procurement/inventory-count/detail.vue
index 1890d9b91..2966ebdef 100644
--- a/manager/src/views/procurement/inventory-count/detail.vue
+++ b/manager/src/views/procurement/inventory-count/detail.vue
@@ -35,56 +35,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getInventoryCountItemsPage, exportInventoryCountItems } from "@/api/procurement";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "manager-inventory-count-detail",
-  data() {
-    return {
-      loading: false,
-      exporting: false,
-      data: [],
-      total: 0,
-      sn: "",
-      searchForm: { pageNumber: 1, pageSize: 20 },
-    };
-  },
-  mounted() {
-    this.sn = this.$route.query.sn || "";
-    this.getDataList();
-  },
-  methods: {
-    getDataList() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.loading = true;
-      getInventoryCountItemsPage(id, this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleExport() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.exporting = true;
-      exportInventoryCountItems(id)
-        .then((blob) => {
-          downloadBlob(blob, `盘点单_${this.sn || id}.xlsx`);
-        })
-        .finally(() => {
-          this.exporting = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "manager-inventory-count-detail" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const exporting = ref(false);
+const data = ref([]);
+const total = ref(0);
+const sn = ref("");
+const searchForm = reactive({ pageNumber: 1, pageSize: 20 });
+
+onMounted(() => {
+  sn.value = route.query.sn || "";
+  getDataList();
+});
+
+function getDataList() {
+  const id = route.query.id;
+  if (!id) return;
+  loading.value = true;
+  getInventoryCountItemsPage(id, searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleExport() {
+  const id = route.query.id;
+  if (!id) return;
+  exporting.value = true;
+  exportInventoryCountItems(id)
+    .then((blob) => {
+      downloadBlob(blob, `盘点单_${sn.value || id}.xlsx`);
+    })
+    .finally(() => {
+      exporting.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/procurement/inventory-count/list.vue b/manager/src/views/procurement/inventory-count/list.vue
index 7a9652f1c..c151c5a96 100644
--- a/manager/src/views/procurement/inventory-count/list.vue
+++ b/manager/src/views/procurement/inventory-count/list.vue
@@ -28,39 +28,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getInventoryCountPage } from "@/api/procurement";
 
-export default {
-  name: "manager-inventory-count-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10 },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    getDataList() {
-      this.loading = true;
-      getInventoryCountPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-inventory-count-detail", query: { id: row.id, sn: row.sn } });
-    },
-  },
-};
+defineOptions({ name: "manager-inventory-count-list" });
+
+const router = useRouter();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = ref({ pageNumber: 1, pageSize: 10 });
+
+onMounted(() => {
+  getDataList();
+});
+
+function getDataList() {
+  loading.value = true;
+  getInventoryCountPage(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function goDetail(row) {
+  router.push({ name: "manager-inventory-count-detail", query: { id: row.id, sn: row.sn } });
+}
 </script>
diff --git a/manager/src/views/procurement/purchase-order/detail.vue b/manager/src/views/procurement/purchase-order/detail.vue
index aef4a8bd3..8c28469d5 100644
--- a/manager/src/views/procurement/purchase-order/detail.vue
+++ b/manager/src/views/procurement/purchase-order/detail.vue
@@ -41,36 +41,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getProcurementOrderDetail, getStockReasonPage } from "@/api/procurement";
 import { procurementStatusText, procurementStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-order-detail",
-  data() {
-    return { detail: {}, reasonOptions: [] };
-  },
-  computed: {
-    stockReasonText() {
-      const reason = this.reasonOptions.find((item) => item.id === this.detail.stockReasonId);
-      return reason ? reason.reason : "-";
-    },
-  },
-  mounted() {
-    getStockReasonPage({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
-      if (res.success) {
-        this.reasonOptions = res.result.records || [];
-      }
-    });
-    const id = this.$route.query.id;
-    if (id) {
-      getProcurementOrderDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
+defineOptions({ name: "manager-procurement-order-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const reasonOptions = ref([]);
+
+const stockReasonText = computed(() => {
+  const reason = reasonOptions.value.find((item) => item.id === detail.value.stockReasonId);
+  return reason ? reason.reason : "-";
+});
+
+onMounted(() => {
+  getStockReasonPage({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
+    if (res.success) {
+      reasonOptions.value = res.result.records || [];
     }
-  },
-  methods: { procurementStatusText, procurementStatusTag, formatMoney },
-};
+  });
+  const id = route.query.id;
+  if (id) {
+    getProcurementOrderDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+  }
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/procurement/purchase-order/list.vue b/manager/src/views/procurement/purchase-order/list.vue
index b173beab9..cace567c4 100644
--- a/manager/src/views/procurement/purchase-order/list.vue
+++ b/manager/src/views/procurement/purchase-order/list.vue
@@ -53,52 +53,48 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getProcurementOrderPage } from "@/api/procurement";
 import { PROCUREMENT_STATUS, procurementStatusText, procurementStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-order-list",
-  data() {
-    return {
-      PROCUREMENT_STATUS,
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, orderSn: "", goodsName: "", status: "" },
-    };
-  },
-  mounted() {
-    const status = this.$route.query.status;
-    if (status) {
-      this.searchForm.status = status;
-    }
-    this.getDataList();
-  },
-  methods: {
-    procurementStatusText,
-    procurementStatusTag,
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getProcurementOrderPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-procurement-order-detail", query: { id: row.id } });
-    },
-  },
-};
+defineOptions({ name: "manager-procurement-order-list" });
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({ pageNumber: 1, pageSize: 10, orderSn: "", goodsName: "", status: "" });
+
+onMounted(() => {
+  const status = route.query.status;
+  if (status) {
+    searchForm.status = status;
+  }
+  getDataList();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getProcurementOrderPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function goDetail(row) {
+  router.push({ name: "manager-procurement-order-detail", query: { id: row.id } });
+}
 </script>
diff --git a/manager/src/views/procurement/reason/reasonManage.vue b/manager/src/views/procurement/reason/reasonManage.vue
index c913134a2..05c0a33a9 100644
--- a/manager/src/views/procurement/reason/reasonManage.vue
+++ b/manager/src/views/procurement/reason/reasonManage.vue
@@ -67,7 +67,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import {
   getStockReasonPage,
   addStockReason,
@@ -75,90 +76,92 @@ import {
   deleteStockReason,
 } from "@/api/procurement";
 import { stockReasonCategoryText } from "../constants";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "manager-stock-reason-manage",
-  data() {
-    return {
-      loading: false,
-      submitLoading: false,
-      modalVisible: false,
-      modalTitle: "添加原因",
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, reason: "", category: "" },
-      form: { id: "", reason: "", category: "INBOUND" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    stockReasonCategoryText,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getStockReasonPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    openAdd() {
-      this.modalTitle = "添加原因";
-      this.form = { id: "", reason: "", category: "INBOUND" };
-      this.modalVisible = true;
-    },
-    openEdit(row) {
-      this.modalTitle = "编辑原因";
-      this.form = { id: row.id, reason: row.reason, category: row.category };
-      this.modalVisible = true;
-    },
-    handleSubmit() {
-      if (!this.form.reason || !this.form.category) {
-        this.$Message.warning("请填写完整信息");
-        return;
+defineOptions({ name: "manager-stock-reason-manage" });
+
+const loading = ref(false);
+const submitLoading = ref(false);
+const modalVisible = ref(false);
+const modalTitle = ref("添加原因");
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({ pageNumber: 1, pageSize: 10, reason: "", category: "" });
+const form = ref({ id: "", reason: "", category: "INBOUND" });
+
+const formRef = ref(null);
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getStockReasonPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      this.submitLoading = true;
-      const req = this.form.id
-        ? updateStockReason(this.form)
-        : addStockReason({ reason: this.form.reason, category: this.form.category });
-      req
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功");
-            this.modalVisible = false;
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-    handleDelete(row) {
-      this.$Modal.confirm({
-        title: "删除确认",
-        content: `确认删除原因「${row.reason}」？`,
-        onOk: () => {
-          deleteStockReason(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function openAdd() {
+  modalTitle.value = "添加原因";
+  form.value = { id: "", reason: "", category: "INBOUND" };
+  modalVisible.value = true;
+}
+
+function openEdit(row) {
+  modalTitle.value = "编辑原因";
+  form.value = { id: row.id, reason: row.reason, category: row.category };
+  modalVisible.value = true;
+}
+
+function handleSubmit() {
+  if (!form.value.reason || !form.value.category) {
+    Message.warning("请填写完整信息");
+    return;
+  }
+  submitLoading.value = true;
+  const req = form.value.id
+    ? updateStockReason(form.value)
+    : addStockReason({ reason: form.value.reason, category: form.value.category });
+  req
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+        modalVisible.value = false;
+        getDataList();
+      }
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+
+function handleDelete(row) {
+  Modal.confirm({
+    title: "删除确认",
+    content: `确认删除原因「${row.reason}」？`,
+    onOk: () => {
+      deleteStockReason(row.id).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getDataList();
+        }
       });
     },
-  },
-};
+  });
+}
+
+onMounted(() => {
+  getDataList();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/coupon-activity/coupon-info.vue b/manager/src/views/promotions/coupon-activity/coupon-info.vue
index b7f33eeea..bdccb195b 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-info.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-info.vue
@@ -74,41 +74,45 @@
   </div>
 </template>
 
-<script>
-import { getCouponActivity } from "@/api/promotion";
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getCouponActivity as apiGetCouponActivity } from "@/api/promotion";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "coupon-activity-info",
-  data() {
-    return {
-      id: this.$route.query.id,
-      couponActivity: {},
-      couponData: [],
-      memberData: [],
-    };
-  },
-  mounted() {
-    this.getCouponActivity();
-  },
-  methods: {
-    couponTypeText(v) {
-      if (v === "DISCOUNT") return "打折";
-      if (v === "PRICE") return "减免现金";
-      return "未知";
-    },
-    getCouponActivity() {
-      getCouponActivity(this.id).then((res) => {
-        this.couponActivity = res.result;
-        this.couponData = this.couponActivity.couponActivityItems;
-        this.memberData = JSON.parse(this.couponActivity.activityScopeInfo);
-      });
-    },
-    back() {
-      this.$store.commit("removeTag", "coupon-activity");
-      this.$router.go(-1);
-    },
-  },
-};
+defineOptions({ name: "coupon-activity-info" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const id = route.query.id;
+const couponActivity = ref({});
+const couponData = ref([]);
+const memberData = ref([]);
+
+onMounted(() => {
+  getCouponActivity();
+});
+
+function couponTypeText(v) {
+  if (v === "DISCOUNT") return "打折";
+  if (v === "PRICE") return "减免现金";
+  return "未知";
+}
+
+function getCouponActivity() {
+  apiGetCouponActivity(id).then((res) => {
+    couponActivity.value = res.result;
+    couponData.value = couponActivity.value.couponActivityItems;
+    memberData.value = JSON.parse(couponActivity.value.activityScopeInfo);
+  });
+}
+
+function back() {
+  appStore.removeTag("coupon-activity");
+  router.go(-1);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/coupon-activity/coupon-publish.vue b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
index 3d8a70aff..f7e4c185a 100644
--- a/manager/src/views/promotions/coupon-activity/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon-publish.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>活动信息</h4>
           <div class="form-item-view">
@@ -141,7 +141,7 @@
     >
       <couponTemplate
         v-if="showCouponSelect"
-        ref="couponPicker"
+        ref="couponPickerRef"
         manualConfirm
         :selectedList="tempCouponList"
         getType="ACTIVITY"
@@ -156,7 +156,7 @@
     <el-dialog v-model="checkUserList" width="1200px" title="选择会员" destroy-on-close>
       <userList
         v-if="checkUserList"
-        ref="memberLayout"
+        ref="memberLayoutRef"
         :selectedMember="true"
         :checkboxSelect="true"
         :selectedList="memberSelectSnapshot"
@@ -169,195 +169,211 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive } from "vue";
+import { useRouter } from "vue-router";
 import couponTemplate from "@/views/promotions/coupon/coupon";
 import userList from "@/views/member/list/index";
 import { saveActivityCoupon } from "@/api/promotion";
+import { useAppStore } from "@/stores/app";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "add-coupon-activity",
-  components: {
-    couponTemplate,
-    userList,
+defineOptions({ name: "add-coupon-activity" });
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const options = reactive({
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
-  data() {
+});
+const showCouponSelect = ref(false);
+const tempCouponList = ref([]);
+const checkUserList = ref(false);
+const memberSelectSnapshot = ref([]);
+const selectedMember = ref([]);
+const form = reactive({
+  promotionName: "",
+  activityScope: "ALL",
+  couponActivityType: "REGISTERED",
+  rangeTime: [],
+  startTime: "",
+  endTime: "",
+  memberDTOS: [],
+  couponActivityItems: [],
+  couponFrequencyEnum: "",
+});
+const submitLoading = ref(false);
+const selectCouponList = ref([]);
+const formRule = reactive({
+  promotionName: [{ required: true, message: "活动名称不能为空" }],
+  rangeTime: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!value || !Array.isArray(value) || value.length !== 2 || !value[0] || !value[1]) {
+          callback(new Error("请选择活动有效期"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change",
+    },
+  ],
+  description: [{ required: true, message: "请输入范围描述" }],
+});
+
+// 模板 ref 与 data 同名陷阱：form/couponPicker/memberLayout 改名加 Ref 后缀
+const formRef = ref(null);
+const couponPickerRef = ref(null);
+const memberLayoutRef = ref(null);
+
+function scopeTypeText(type) {
+  const map = {
+    ALL: "全品类",
+    PORTION_GOODS_CATEGORY: "商品分类",
+    PORTION_SHOP_CATEGORY: "店铺分类",
+    PORTION_GOODS: "指定商品",
+  };
+  return map[type] || "未知";
+}
+
+function scopeTypeTagType(type) {
+  const map = {
+    ALL: "info",
+    PORTION_GOODS_CATEGORY: "warning",
+    PORTION_SHOP_CATEGORY: "warning",
+    PORTION_GOODS: "primary",
+  };
+  return map[type] || "danger";
+}
+
+function cancelMemberSelect() {
+  checkUserList.value = false;
+}
+
+function confirmMemberSelect() {
+  const list = memberLayoutRef.value?.getSelection?.() || [];
+  selectedMember.value = list;
+  reSelectMember();
+  checkUserList.value = false;
+}
+
+function delUser(index) {
+  selectedMember.value.splice(index, 1);
+  reSelectMember();
+}
+
+function reSelectMember() {
+  form.memberDTOS = selectedMember.value.map((item) => {
     return {
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-      showCouponSelect: false,
-      tempCouponList: [],
-      checkUserList: false,
-      memberSelectSnapshot: [],
-      selectedMember: [],
-      form: {
-        promotionName: "",
-        activityScope: "ALL",
-        couponActivityType: "REGISTERED",
-        rangeTime: [],
-        startTime: "",
-        endTime: "",
-        memberDTOS: [],
-        couponActivityItems: [],
-        couponFrequencyEnum: "",
-      },
-      submitLoading: false,
-      selectCouponList: [],
-      formRule: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        rangeTime: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!value || !Array.isArray(value) || value.length !== 2 || !value[0] || !value[1]) {
-                callback(new Error("请选择活动有效期"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ],
-        description: [{ required: true, message: "请输入范围描述" }],
-      },
+      nickName: item.nickName,
+      id: item.id,
     };
-  },
-  methods: {
-    scopeTypeText(type) {
-      const map = {
-        ALL: "全品类",
-        PORTION_GOODS_CATEGORY: "商品分类",
-        PORTION_SHOP_CATEGORY: "店铺分类",
-        PORTION_GOODS: "指定商品",
-      };
-      return map[type] || "未知";
-    },
-    scopeTypeTagType(type) {
-      const map = {
-        ALL: "info",
-        PORTION_GOODS_CATEGORY: "warning",
-        PORTION_SHOP_CATEGORY: "warning",
-        PORTION_GOODS: "primary",
-      };
-      return map[type] || "danger";
-    },
-    cancelMemberSelect() {
-      this.checkUserList = false;
-    },
-    confirmMemberSelect() {
-      const list = this.$refs.memberLayout?.getSelection?.() || [];
-      this.selectedMember = list;
-      this.reSelectMember();
-      this.checkUserList = false;
-    },
-    delUser(index) {
-      this.selectedMember.splice(index, 1);
-      this.reSelectMember();
-    },
-    reSelectMember() {
-      this.form.memberDTOS = this.selectedMember.map((item) => {
-        return {
-          nickName: item.nickName,
-          id: item.id,
-        };
-      });
-    },
-    cancelCouponSelect() {
-      this.showCouponSelect = false;
-    },
-    confirmCouponSelect() {
-      const list = this.$refs.couponPicker?.getSelection?.() || [];
-      if (!list.length) {
-        this.$Message.warning("请至少选择一张优惠券");
-        return;
-      }
-      this.selectCouponList = list;
-      this.reSelectCoupon();
-      this.showCouponSelect = false;
-    },
-    delCoupon(index) {
-      this.selectCouponList.splice(index, 1);
-      this.reSelectCoupon();
-    },
-    reSelectCoupon() {
-      this.form.couponActivityItems = this.selectCouponList.map((item) => {
-        const existing = this.form.couponActivityItems.find(
-          (entry) => entry.couponId === item.id
-        );
-        return {
-          num: existing ? existing.num : 1,
-          couponId: item.id,
-        };
-      });
-    },
-    addVip() {
-      this.memberSelectSnapshot = JSON.parse(JSON.stringify(this.selectedMember));
-      this.checkUserList = true;
-    },
-    showSelector() {
-      this.tempCouponList = [...this.selectCouponList];
-      this.showCouponSelect = true;
-    },
-    handleSubmit() {
-      // 自动发券只能全用户发送：如有自动发券且非全用户，提示并强制切换
-      if (
-        this.form.couponActivityType === "AUTO_COUPON" &&
-        this.form.activityScope !== "ALL"
-      ) {
-        this.$Message.info("自动发券只能全用户发送");
-        this.form.couponActivityType = "SPECIFY";
-        this.form.activityScope = "ALL";
-        return;
+  });
+}
+
+function cancelCouponSelect() {
+  showCouponSelect.value = false;
+}
+
+function confirmCouponSelect() {
+  const list = couponPickerRef.value?.getSelection?.() || [];
+  if (!list.length) {
+    Message.warning("请至少选择一张优惠券");
+    return;
+  }
+  selectCouponList.value = list;
+  reSelectCoupon();
+  showCouponSelect.value = false;
+}
+
+function delCoupon(index) {
+  selectCouponList.value.splice(index, 1);
+  reSelectCoupon();
+}
+
+function reSelectCoupon() {
+  form.couponActivityItems = selectCouponList.value.map((item) => {
+    const existing = form.couponActivityItems.find(
+      (entry) => entry.couponId === item.id
+    );
+    return {
+      num: existing ? existing.num : 1,
+      couponId: item.id,
+    };
+  });
+}
+
+function addVip() {
+  memberSelectSnapshot.value = JSON.parse(JSON.stringify(selectedMember.value));
+  checkUserList.value = true;
+}
+
+function showSelector() {
+  tempCouponList.value = [...selectCouponList.value];
+  showCouponSelect.value = true;
+}
+
+function handleSubmit() {
+  // 自动发券只能全用户发送：如有自动发券且非全用户，提示并强制切换
+  if (
+    form.couponActivityType === "AUTO_COUPON" &&
+    form.activityScope !== "ALL"
+  ) {
+    Message.info("自动发券只能全用户发送");
+    form.couponActivityType = "SPECIFY";
+    form.activityScope = "ALL";
+    return;
+  }
+
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+
+    if (!form.couponActivityItems.length) {
+      Message.warning("请至少选择一张优惠券");
+      return;
+    }
+
+    if (
+      form.couponActivityType === "SPECIFY" &&
+      form.activityScope === "DESIGNATED" &&
+      !form.memberDTOS.length
+    ) {
+      Message.warning("请选择会员");
+      return;
+    }
+
+    // 统一取时间逻辑
+    const [start, end] = form.rangeTime;
+    const startDate = start instanceof Date ? start : new Date(start);
+    const endDate = end instanceof Date ? end : new Date(end);
+    form.startTime = unixToDate(startDate.getTime() / 1000);
+    form.endTime = unixToDate(endDate.getTime() / 1000);
+
+    const params = JSON.parse(JSON.stringify(form));
+    delete params.rangeTime;
+    delete params.id;
+    submitLoading.value = true;
+    saveActivityCoupon(params).then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        Message.success("优惠券活动创建成功");
+        closeCurrentPage();
       }
+    });
+  });
+}
 
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-
-        if (!this.form.couponActivityItems.length) {
-          this.$Message.warning("请至少选择一张优惠券");
-          return;
-        }
-
-        if (
-          this.form.couponActivityType === "SPECIFY" &&
-          this.form.activityScope === "DESIGNATED" &&
-          !this.form.memberDTOS.length
-        ) {
-          this.$Message.warning("请选择会员");
-          return;
-        }
-
-        // 统一取时间逻辑
-        const [start, end] = this.form.rangeTime;
-        const startDate = start instanceof Date ? start : new Date(start);
-        const endDate = end instanceof Date ? end : new Date(end);
-        this.form.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
-        this.form.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
-
-        const params = JSON.parse(JSON.stringify(this.form));
-        delete params.rangeTime;
-        delete params.id;
-        this.submitLoading = true;
-        saveActivityCoupon(params).then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success("优惠券活动创建成功");
-            this.closeCurrentPage();
-          }
-        });
-      });
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-platform-coupon");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-  },
-};
+function closeCurrentPage() {
+  appStore.removeTag("add-platform-coupon");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/coupon-activity/coupon.vue b/manager/src/views/promotions/coupon-activity/coupon.vue
index 77df042aa..4b8027372 100644
--- a/manager/src/views/promotions/coupon-activity/coupon.vue
+++ b/manager/src/views/promotions/coupon-activity/coupon.vue
@@ -72,145 +72,146 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getCouponActivityList, closeActivity } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "coupon-activity",
-  props: {
-    checked: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "coupon-activity" });
+
+defineProps({
+  checked: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-      selectDate: [],
-    };
-  },
-  methods: {
-    activityTypeText(type) {
-      const map = {
-        REGISTERED: "注册赠券",
-        AUTO_COUPON: "自动发券",
-      };
-      return map[type] || "精确发券";
-    },
-    activityScopeText(scope) {
-      return scope === "DESIGNATED" ? "指定会员" : "全部会员";
-    },
-    couponFrequencyText(freq) {
-      const map = {
-        DAY: "每日",
-        WEEK: "每周",
-        MONTH: "每月",
-      };
-      return map[freq] || "/";
-    },
-    formatActivityTime(row) {
-      if (row.startTime && row.endTime) {
-        return `${row.startTime}<br/>${row.endTime}`;
+});
+
+const router = useRouter();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+const selectDate = ref([]);
+
+function activityTypeText(type) {
+  const map = {
+    REGISTERED: "注册赠券",
+    AUTO_COUPON: "自动发券",
+  };
+  return map[type] || "精确发券";
+}
+function activityScopeText(scope) {
+  return scope === "DESIGNATED" ? "指定会员" : "全部会员";
+}
+function couponFrequencyText(freq) {
+  const map = {
+    DAY: "每日",
+    WEEK: "每周",
+    MONTH: "每月",
+  };
+  return map[freq] || "/";
+}
+function formatActivityTime(row) {
+  if (row.startTime && row.endTime) {
+    return `${row.startTime}<br/>${row.endTime}`;
+  }
+  return "/";
+}
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function add() {
+  router.push({ name: "add-coupon-activity" });
+}
+function info(v) {
+  router.push({ name: "coupon-activity-info", query: { id: v.id } });
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getCouponActivityList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      return "/";
-    },
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    add() {
-      this.$router.push({ name: "add-coupon-activity" });
-    },
-    info(v) {
-      this.$router.push({ name: "coupon-activity-info", query: { id: v.id } });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getCouponActivityList(this.searchForm)
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function edit(v) {
+  router.push({ name: "edit-platform-coupon", query: { id: v.id } });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "确认要关闭此优惠券活动么?关闭活动只能重新创建",
+    loading: true,
+    onOk: () => {
+      closeActivity(v.id)
         .then((res) => {
           if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
+            Message.success("优惠券活动已关闭");
+            getDataList();
           }
+          Modal.remove();
         })
-        .finally(() => {
-          this.loading = false;
+        .catch(() => {
+          Modal.remove();
         });
     },
-    edit(v) {
-      this.$router.push({ name: "edit-platform-coupon", query: { id: v.id } });
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "确认要关闭此优惠券活动么?关闭活动只能重新创建",
-        loading: true,
-        onOk: () => {
-          closeActivity(v.id)
-            .then((res) => {
-              if (res.success) {
-                this.$Message.success("优惠券活动已关闭");
-                this.getDataList();
-              }
-              this.$Modal.remove();
-            })
-            .catch(() => {
-              this.$Modal.remove();
-            });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/coupon/coupon-publish.vue b/manager/src/views/promotions/coupon/coupon-publish.vue
index fbf7431a5..bce00161e 100644
--- a/manager/src/views/promotions/coupon/coupon-publish.vue
+++ b/manager/src/views/promotions/coupon/coupon-publish.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
@@ -226,11 +226,13 @@
         </div>
       </el-form>
     </el-card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   savePlatformCoupon,
   getPlatformCoupon,
@@ -238,342 +240,348 @@ import {
 } from "@/api/promotion";
 import { getCategoryTree } from "@/api/goods";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
 import skuSelect from "@/components/lili-dialog";
 
-export default {
-  name: "edit-platform-coupon",
-  components: {
-    skuSelect,
-  },
-  watch: {
-    "form.getType": {
-      handler(val) {
-        if (val == "FREE") {
-          this.rangeTimeType = 1;
-        } else {
-          this.rangeTimeType = 0;
-        }
-        if (this.rangeTimeType == 0) {
-          delete this.formRule.rangeTime;
-        }
-      },
-      deep: true,
-    },
-    $route(e) {
-      this.id = e.query.id;
-      if (this.id) {
-        this.getCoupon();
-      } else {
-        this.$refs.form.resetFields();
-      }
-    },
-  },
-  data() {
-    const checkPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("面额不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("面额设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    const checkWeight = (rule, value, callback) => {
-      if (!value && typeof value !== "number") {
-        callback(new Error("消费门槛不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("消费门槛设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      disabled: this.$route.query.onlyView,
-      rangeTimeType: 1,
-      modalType: 0,
-      form: {
-        storeCommission: 0,
-        publishNum: 0,
-        scopeType: "ALL",
-        couponLimitNum: 1,
-        couponType: "PRICE",
-        couponName: "",
-        promotionName: "",
-        getType: "FREE",
-        promotionGoodsList: [],
-        scopeIdGoods: [],
-        rangeDayType: "",
-        effectiveDays: 1,
-      },
-      id: this.$route.query.id,
-      submitLoading: false,
-      selectedGoods: [],
-      goodsCategoryList: [],
-      formRule: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        couponName: [{ required: true, message: "优惠券名称不能为空" }],
-        price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
-        rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
-        consumeThreshold: [
-          { required: true, message: "请输入消费门槛" },
-          { validator: checkWeight },
-        ],
-        couponDiscount: [
-          { required: true, message: "请输入折扣" },
-          {
-            pattern: regular.discount,
-            message: "请输入0-10的数字,可有一位小数",
-          },
-        ],
-        storeCommission: [
-          { required: true, message: "请输入店铺承担比例" },
-          { pattern: regular.rate, message: "请输入0-100的正整数" },
-        ],
-        publishNum: [
-          { required: true, message: "请输入发放数量" },
-          { pattern: regular.Integer, message: "请输入正整数" },
-        ],
-        couponLimitNum: [
-          { required: true, message: "领取限制不能为空" },
-          { pattern: regular.Integer, message: "请输入正整数" },
-        ],
-        description: [{ required: true, message: "请输入范围描述" }],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    await this.getCagetoryList();
-    if (this.id) {
-      this.getCoupon();
-      this.modalType = 1;
-    }
-  },
-  methods: {
-    getCoupon() {
-      getPlatformCoupon(this.id).then((res) => {
-        let data = res.result;
-        if (!data.promotionGoodsList) data.promotionGoodsList = [];
-        this.rangeTimeType = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
-        if (data.scopeType == "PORTION_GOODS_CATEGORY") {
-          let prevCascader = data.scopeId.split(",");
-          function next(params, prev) {
-            for (let i = 0; i < params.length; i++) {
-              const item = params[i];
-              if (item.children) {
-                next(item.children, [...prev, item]);
-              } else {
-                if (prevCascader.includes(item.id)) {
-                  prevCascader = prevCascader.map((key) => {
-                    if (key === item.id) {
-                      let result = prev.map((item) => item.id);
-                      return [...result, item.id];
-                    } else {
-                      return key;
-                    }
-                  });
-                } else {
-                  i === params.length - 1 && (prev = []);
-                }
-              }
-            }
-          }
+defineOptions({ name: "edit-platform-coupon" });
 
-          next(this.goodsCategoryList, []);
-          data.scopeIdGoods = prevCascader;
-        }
-        data.rangeTime = [];
-        if (data.startTime && data.endTime) {
-          data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
-        }
-        this.form = data;
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-          if (this.rangeTimeType == 1) {
-            params.rangeDayType = "FIXEDTIME";
-            const rangeTime = this.form.rangeTime;
-            const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
-            const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
-            params.startTime = this.$filters.unixToDate(start.getTime() / 1000);
-            params.endTime = this.$filters.unixToDate(end.getTime() / 1000);
-            delete params.effectiveDays;
-          } else {
-            params.rangeDayType = "DYNAMICTIME";
-            delete params.rangeTime;
-          }
+const formRef = ref(null);
+const skuSelectRef = ref(null);
 
-          let scopeId = [];
+const checkPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("面额不能为空"));
+  } else if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("面额设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+const checkWeight = (rule, value, callback) => {
+  if (!value && typeof value !== "number") {
+    callback(new Error("消费门槛不能为空"));
+  } else if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("消费门槛设置超过上限值"));
+  } else {
+    callback();
+  }
+};
 
-          if (
-            params.scopeType == "PORTION_GOODS" &&
-            (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
-          ) {
-            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
-            return;
-          }
-
-          if (
-            params.scopeType == "PORTION_GOODS_CATEGORY" &&
-            (!params.scopeIdGoods || params.scopeIdGoods.length == 0)
-          ) {
-            this.$Modal.warning({ title: "提示", content: "请选择商品分类" });
-            return;
-          }
-
-          if (params.scopeType == "PORTION_GOODS") {
-            params.promotionGoodsList.forEach((item) => {
-              scopeId.push(item.skuId);
-            });
-            params.scopeId = scopeId.toString();
-          } else if (params.scopeType == "ALL") {
-            delete params.promotionGoodsList;
-          } else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
-            scopeId = this.filterCategoryId(params.scopeIdGoods, []);
-            params.scopeId = scopeId.toString();
-            delete params.promotionGoodsList;
-          }
-          delete params.scopeIdGoods;
-
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            delete params.id;
-
-            savePlatformCoupon(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("优惠券发送成功");
-                this.closeCurrentPage();
-              }
-            });
-          } else {
-            delete params.consumeLimit;
-            delete params.updateTime;
-
-            editPlatformCoupon(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("优惠券修改成功");
-                this.closeCurrentPage();
-              }
-            });
-          }
-        }
-      });
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-platform-coupon");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    openSkuList() {
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    changeSelect(e) {
-      this.selectedGoods = e;
-    },
-    delSelectGoods() {
-      if (this.selectedGoods.length <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选商品吗?",
-        onOk: () => {
-          let ids = [];
-          this.selectedGoods.forEach(function (e) {
-            ids.push(e.skuId);
-          });
-
-          this.form.promotionGoodsList = this.form.promotionGoodsList.filter((item) => {
-            return !ids.includes(item.skuId);
-          });
-        },
-      });
-    },
-    delGoods(index) {
-      this.form.promotionGoodsList.splice(index, 1);
-    },
-    selectedGoodsData(item) {
-      let list = [];
-      item.forEach((e) => {
-        list.push({
-          goodsName: e.goodsName,
-          price: e.price,
-          originalPrice: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          storeName: e.storeName,
-          skuId: e.id,
-          categoryPath: e.categoryPath,
-          thumbnail: e.small,
-          goodsType: e.goodsType,
-          goodsId: e.goodsId,
-          originPrice: e.price,
-        });
-      });
-      this.form.promotionGoodsList = list;
-    },
-    async getCagetoryList() {
-      let data = await getCategoryTree();
-      this.goodsCategoryList = data.result;
-      this.goodsCategoryList = this.goodsCategoryList.map((item) => {
-        if (item.children) {
-          item.children = item.children.map((child) => {
-            if (child.children) {
-              child.children = child.children.map((son) => {
-                return {
-                  value: son.id,
-                  label: son.name,
-                };
-              });
-              return {
-                value: child.id,
-                label: child.name,
-                children: child.children,
-              };
-            } else {
-              return {
-                value: child.id,
-                label: child.name,
-              };
-            }
-          });
-        }
-        return { value: item.id, label: item.name, children: item.children };
-      });
-    },
-    filterCategoryId(list, idArr) {
-      list.forEach((e) => {
-        if (e instanceof Array) {
-          this.filterCategoryId(e, idArr);
-        } else {
-          if (!idArr.includes(e)) idArr.push(e);
-        }
-      });
-      return idArr;
+const disabled = ref(route.query.onlyView);
+const rangeTimeType = ref(1);
+const modalType = ref(0);
+const form = ref({
+  storeCommission: 0,
+  publishNum: 0,
+  scopeType: "ALL",
+  couponLimitNum: 1,
+  couponType: "PRICE",
+  couponName: "",
+  promotionName: "",
+  getType: "FREE",
+  promotionGoodsList: [],
+  scopeIdGoods: [],
+  rangeDayType: "",
+  effectiveDays: 1,
+});
+const id = ref(route.query.id);
+const submitLoading = ref(false);
+const selectedGoods = ref([]);
+const goodsCategoryList = ref([]);
+const formRule = reactive({
+  promotionName: [{ required: true, message: "活动名称不能为空" }],
+  couponName: [{ required: true, message: "优惠券名称不能为空" }],
+  price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
+  rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
+  consumeThreshold: [
+    { required: true, message: "请输入消费门槛" },
+    { validator: checkWeight },
+  ],
+  couponDiscount: [
+    { required: true, message: "请输入折扣" },
+    {
+      pattern: regular.discount,
+      message: "请输入0-10的数字,可有一位小数",
     },
+  ],
+  storeCommission: [
+    { required: true, message: "请输入店铺承担比例" },
+    { pattern: regular.rate, message: "请输入0-100的正整数" },
+  ],
+  publishNum: [
+    { required: true, message: "请输入发放数量" },
+    { pattern: regular.Integer, message: "请输入正整数" },
+  ],
+  couponLimitNum: [
+    { required: true, message: "领取限制不能为空" },
+    { pattern: regular.Integer, message: "请输入正整数" },
+  ],
+  description: [{ required: true, message: "请输入范围描述" }],
+});
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+watch(
+  () => form.value.getType,
+  (val) => {
+    if (val == "FREE") {
+      rangeTimeType.value = 1;
+    } else {
+      rangeTimeType.value = 0;
+    }
+    if (rangeTimeType.value == 0) {
+      delete formRule.rangeTime;
+    }
+  },
+  { deep: true }
+);
+watch(
+  () => route.query,
+  (e) => {
+    id.value = e.id;
+    if (id.value) {
+      getCoupon();
+    } else {
+      formRef.value.resetFields();
+    }
+  }
+);
+
+onMounted(async () => {
+  await getCagetoryList();
+  if (id.value) {
+    getCoupon();
+    modalType.value = 1;
+  }
+});
+
+function getCoupon() {
+  getPlatformCoupon(id.value).then((res) => {
+    let data = res.result;
+    if (!data.promotionGoodsList) data.promotionGoodsList = [];
+    rangeTimeType.value = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
+    if (data.scopeType == "PORTION_GOODS_CATEGORY") {
+      let prevCascader = data.scopeId.split(",");
+      function next(params, prev) {
+        for (let i = 0; i < params.length; i++) {
+          const item = params[i];
+          if (item.children) {
+            next(item.children, [...prev, item]);
+          } else {
+            if (prevCascader.includes(item.id)) {
+              prevCascader = prevCascader.map((key) => {
+                if (key === item.id) {
+                  let result = prev.map((item) => item.id);
+                  return [...result, item.id];
+                } else {
+                  return key;
+                }
+              });
+            } else {
+              i === params.length - 1 && (prev = []);
+            }
+          }
+        }
+      }
+
+      next(goodsCategoryList.value, []);
+      data.scopeIdGoods = prevCascader;
+    }
+    data.rangeTime = [];
+    if (data.startTime && data.endTime) {
+      data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+    }
+    form.value = data;
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(form.value));
+      params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
+
+      if (rangeTimeType.value == 1) {
+        params.rangeDayType = "FIXEDTIME";
+        const rangeTime = form.value.rangeTime;
+        const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
+        const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
+        params.startTime = unixToDate(start.getTime() / 1000);
+        params.endTime = unixToDate(end.getTime() / 1000);
+        delete params.effectiveDays;
+      } else {
+        params.rangeDayType = "DYNAMICTIME";
+        delete params.rangeTime;
+      }
+
+      let scopeId = [];
+
+      if (
+        params.scopeType == "PORTION_GOODS" &&
+        (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
+      ) {
+        Modal.warning({ title: "提示", content: "请选择指定商品" });
+        return;
+      }
+
+      if (
+        params.scopeType == "PORTION_GOODS_CATEGORY" &&
+        (!params.scopeIdGoods || params.scopeIdGoods.length == 0)
+      ) {
+        Modal.warning({ title: "提示", content: "请选择商品分类" });
+        return;
+      }
+
+      if (params.scopeType == "PORTION_GOODS") {
+        params.promotionGoodsList.forEach((item) => {
+          scopeId.push(item.skuId);
+        });
+        params.scopeId = scopeId.toString();
+      } else if (params.scopeType == "ALL") {
+        delete params.promotionGoodsList;
+      } else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
+        scopeId = filterCategoryId(params.scopeIdGoods, []);
+        params.scopeId = scopeId.toString();
+        delete params.promotionGoodsList;
+      }
+      delete params.scopeIdGoods;
+
+      submitLoading.value = true;
+      if (modalType.value === 0) {
+        delete params.id;
+
+        savePlatformCoupon(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("优惠券发送成功");
+            closeCurrentPage();
+          }
+        });
+      } else {
+        delete params.consumeLimit;
+        delete params.updateTime;
+
+        editPlatformCoupon(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("优惠券修改成功");
+            closeCurrentPage();
+          }
+        });
+      }
+    }
+  });
+}
+function closeCurrentPage() {
+  appStore.removeTag("add-platform-coupon");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+function openSkuList() {
+  skuSelectRef.value.open("goods");
+  let data = JSON.parse(JSON.stringify(form.value.promotionGoodsList));
+  data.forEach((e) => {
+    e.id = e.skuId;
+  });
+  skuSelectRef.value.goodsData = data;
+}
+function changeSelect(e) {
+  selectedGoods.value = e;
+}
+function delSelectGoods() {
+  if (selectedGoods.value.length <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选商品吗?",
+    onOk: () => {
+      let ids = [];
+      selectedGoods.value.forEach(function (e) {
+        ids.push(e.skuId);
+      });
+
+      form.value.promotionGoodsList = form.value.promotionGoodsList.filter((item) => {
+        return !ids.includes(item.skuId);
+      });
+    },
+  });
+}
+function delGoods(index) {
+  form.value.promotionGoodsList.splice(index, 1);
+}
+function selectedGoodsData(item) {
+  let list = [];
+  item.forEach((e) => {
+    list.push({
+      goodsName: e.goodsName,
+      price: e.price,
+      originalPrice: e.price,
+      quantity: e.quantity,
+      storeId: e.storeId,
+      storeName: e.storeName,
+      skuId: e.id,
+      categoryPath: e.categoryPath,
+      thumbnail: e.small,
+      goodsType: e.goodsType,
+      goodsId: e.goodsId,
+      originPrice: e.price,
+    });
+  });
+  form.value.promotionGoodsList = list;
+}
+async function getCagetoryList() {
+  let data = await getCategoryTree();
+  goodsCategoryList.value = data.result;
+  goodsCategoryList.value = goodsCategoryList.value.map((item) => {
+    if (item.children) {
+      item.children = item.children.map((child) => {
+        if (child.children) {
+          child.children = child.children.map((son) => {
+            return {
+              value: son.id,
+              label: son.name,
+            };
+          });
+          return {
+            value: child.id,
+            label: child.name,
+            children: child.children,
+          };
+        } else {
+          return {
+            value: child.id,
+            label: child.name,
+          };
+        }
+      });
+    }
+    return { value: item.id, label: item.name, children: item.children };
+  });
+}
+function filterCategoryId(list, idArr) {
+  list.forEach((e) => {
+    if (e instanceof Array) {
+      filterCategoryId(e, idArr);
+    } else {
+      if (!idArr.includes(e)) idArr.push(e);
+    }
+  });
+  return idArr;
+}
 </script>
 
 <style lang="scss" scpoed>
diff --git a/manager/src/views/promotions/coupon/coupon-receive.vue b/manager/src/views/promotions/coupon/coupon-receive.vue
index 81c34b6df..ff7d7fcc1 100644
--- a/manager/src/views/promotions/coupon/coupon-receive.vue
+++ b/manager/src/views/promotions/coupon/coupon-receive.vue
@@ -3,7 +3,7 @@
     <el-button style="margin-bottom: 10px" @click="back()">返回</el-button>
 
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="90px" class="search-form mb_10">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="90px" class="search-form mb_10">
         <el-form-item label="优惠券名称" prop="couponName">
           <el-input
             v-model="searchForm.couponName"
@@ -54,7 +54,7 @@
     <el-card>
       <el-table
         v-if="refreshTable"
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -149,94 +149,115 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getCouponReceiveList } from "@/api/promotion";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "coupon-recevie",
-  props: {
-    promotionStatus: {
-      type: String,
-      default: "",
-    },
+defineOptions({ name: "coupon-recevie" });
+
+const props = defineProps({
+  promotionStatus: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        getType: "",
-        couponId: this.$route.query.couponId,
-      },
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-      refreshTable: true,
-      selectDate: [],
-    };
-  },
-  watch: {
-    $route(e) {
-      this.searchForm.couponId = e.query.couponId;
-      if (this.couponId) {
-        this.getDataList();
-      } else {
-        this.$refs.searchForm?.resetFields();
-      }
-    },
-  },
-  methods: {
-    back() {
-      this.$store.commit("removeTag", "coupon-receive");
-      this.$router.go(-1);
-    },
-    check() {
-      this.$emit("selected", this.selectList);
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-      if (this.getType === "ACTIVITY") this.check();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getCouponReceiveList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+});
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  getType: "",
+  couponId: route.query.couponId,
+});
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+const refreshTable = ref(true);
+const selectDate = ref([]);
+
+// 历史遗留：原代码读取未定义属性 this.couponId，恒为 falsy，原样保留
+let couponId;
+// 历史遗留：原代码读取未定义属性 this.getType，恒为 falsy，原样保留
+let getType;
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+watch(
+  () => route.query,
+  (e) => {
+    searchForm.couponId = e.couponId;
+    if (couponId) {
+      getDataList();
+    } else {
+      searchFormRef.value?.resetFields();
+    }
+  }
+);
+
+function back() {
+  appStore.removeTag("coupon-receive");
+  router.go(-1);
+}
+
+function check() {
+  emit("selected", selectList.value);
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+  if (getType === "ACTIVITY") check();
+}
+
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = selectDate.value[0].getTime();
+    searchForm.endTime = selectDate.value[1].getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getCouponReceiveList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/promotions/coupon/coupon.vue b/manager/src/views/promotions/coupon/coupon.vue
index 889257317..f990837cc 100644
--- a/manager/src/views/promotions/coupon/coupon.vue
+++ b/manager/src/views/promotions/coupon/coupon.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="90px"
@@ -200,356 +200,364 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, nextTick, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getPlatformCouponList,
   updatePlatformCouponStatus,
   deletePlatformCoupon,
 } from "@/api/promotion";
 import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "coupon",
-  props: {
-    getType: {
-      type: String,
-      default: "",
-    },
-    promotionStatus: {
-      type: String,
-      default: "",
-    },
-    selectedList: {
-      type: Array,
-      default: () => [],
-    },
-    manualConfirm: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "coupon" });
+
+const props = defineProps({
+  getType: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        getType: "",
-        promotionStatus: "",
-        couponName: "",
-      },
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-      selectDate: [],
-      showActionColumn: true,
-      showStatusColumn: true,
-      isSyncingSelection: false,
-    };
+  promotionStatus: {
+    type: String,
+    default: "",
   },
-  computed: {
-    getTypeFilterOptions() {
-      const all = [
-        { label: "免费获取", value: "FREE" },
-        { label: "活动获取", value: "ACTIVITY" },
-      ];
-      if (this.getType) {
-        return all.filter((item) => item.value === this.getType);
+  selectedList: {
+    type: Array,
+    default: () => [],
+  },
+  manualConfirm: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+const router = useRouter();
+
+// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  getType: "",
+  promotionStatus: "",
+  couponName: "",
+});
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+const selectDate = ref([]);
+const showActionColumn = ref(true);
+const showStatusColumn = ref(true);
+const isSyncingSelection = ref(false);
+
+const getTypeFilterOptions = computed(() => {
+  const all = [
+    { label: "免费获取", value: "FREE" },
+    { label: "活动获取", value: "ACTIVITY" },
+  ];
+  if (props.getType) {
+    return all.filter((item) => item.value === props.getType);
+  }
+  return all;
+});
+const promotionStatusFilterOptions = computed(() => {
+  const all = [
+    { label: "未开始", value: "NEW" },
+    { label: "已开始/上架", value: "START" },
+    { label: "已结束/下架", value: "END" },
+    { label: "紧急关闭/作废", value: "CLOSE" },
+  ];
+  if (props.promotionStatus) {
+    return all.filter((item) => item.value === props.promotionStatus);
+  }
+  return all;
+});
+const isGetTypeFilterLocked = computed(() => !!props.getType);
+const isPromotionStatusFilterLocked = computed(() => !!props.promotionStatus);
+
+watch(
+  () => route.fullPath,
+  (fullPath) => {
+    if (fullPath == "/promotions/manager-coupon") {
+      init();
+    }
+  }
+);
+watch(
+  () => props.selectedList,
+  (val) => {
+    if (isSyncingSelection.value) return;
+    if (isSameSelection(val, selectList.value)) return;
+    nextTick(() => {
+      syncTableSelection(val);
+    });
+  },
+  { deep: true }
+);
+
+function formatActivityTime(row) {
+  return formatPromotionCouponValidityHtml(row);
+}
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function scopeTypeText(type) {
+  const map = {
+    ALL: "全品类",
+    PORTION_GOODS_CATEGORY: "商品分类",
+    PORTION_SHOP_CATEGORY: "店铺分类",
+    PORTION_GOODS: "指定商品",
+  };
+  return map[type] || "未知";
+}
+function scopeTypeTagType(type) {
+  const map = {
+    ALL: "info",
+    PORTION_GOODS_CATEGORY: "warning",
+    PORTION_SHOP_CATEGORY: "warning",
+    PORTION_GOODS: "primary",
+  };
+  return map[type] || "danger";
+}
+function getTypeText(type) {
+  const map = {
+    FREE: "免费获取",
+    ACTIVITY: "活动获取",
+    INSIDE: "内购",
+    IGAME: "游戏人生",
+  };
+  return map[type] || "未知";
+}
+function getTypeTagType(type) {
+  const map = {
+    FREE: "danger",
+    ACTIVITY: "warning",
+    INSIDE: "success",
+    IGAME: "success",
+  };
+  return map[type] || "";
+}
+function couponTypeText(type) {
+  const map = {
+    DISCOUNT: "打折",
+    PRICE: "减免现金",
+  };
+  return map[type] || "未知";
+}
+function couponTypeTagType(type) {
+  const map = {
+    DISCOUNT: "primary",
+    PRICE: "info",
+  };
+  return map[type] || "";
+}
+function isSameSelection(next, current) {
+  const a = next || [];
+  const b = current || [];
+  if (a.length !== b.length) return false;
+  const nextIds = a.map((item) => item.id).sort().join(",");
+  const currentIds = b.map((item) => item.id).sort().join(",");
+  return nextIds === currentIds;
+}
+function syncTableSelection(selected) {
+  const tableEl = table.value;
+  if (!tableEl) return;
+  const nextList = selected ? [...selected] : [];
+  isSyncingSelection.value = true;
+  tableEl.clearSelection();
+  if (nextList.length) {
+    data.value.forEach((row) => {
+      if (nextList.some((item) => item.id === row.id)) {
+        tableEl.toggleRowSelection(row, true);
       }
-      return all;
-    },
-    promotionStatusFilterOptions() {
-      const all = [
-        { label: "未开始", value: "NEW" },
-        { label: "已开始/上架", value: "START" },
-        { label: "已结束/下架", value: "END" },
-        { label: "紧急关闭/作废", value: "CLOSE" },
-      ];
-      if (this.promotionStatus) {
-        return all.filter((item) => item.value === this.promotionStatus);
-      }
-      return all;
-    },
-    isGetTypeFilterLocked() {
-      return !!this.getType;
-    },
-    isPromotionStatusFilterLocked() {
-      return !!this.promotionStatus;
-    },
-  },
-  watch: {
-    $route(to) {
-      if (to.fullPath == "/promotions/manager-coupon") {
-        this.init();
-      }
-    },
-    selectedList: {
-      handler(val) {
-        if (this.isSyncingSelection) return;
-        if (this.isSameSelection(val, this.selectList)) return;
-        this.$nextTick(() => {
-          this.syncTableSelection(val);
-        });
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    formatActivityTime(row) {
-      return formatPromotionCouponValidityHtml(row);
-    },
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    scopeTypeText(type) {
-      const map = {
-        ALL: "全品类",
-        PORTION_GOODS_CATEGORY: "商品分类",
-        PORTION_SHOP_CATEGORY: "店铺分类",
-        PORTION_GOODS: "指定商品",
-      };
-      return map[type] || "未知";
-    },
-    scopeTypeTagType(type) {
-      const map = {
-        ALL: "info",
-        PORTION_GOODS_CATEGORY: "warning",
-        PORTION_SHOP_CATEGORY: "warning",
-        PORTION_GOODS: "primary",
-      };
-      return map[type] || "danger";
-    },
-    getTypeText(type) {
-      const map = {
-        FREE: "免费获取",
-        ACTIVITY: "活动获取",
-        INSIDE: "内购",
-        IGAME: "游戏人生",
-      };
-      return map[type] || "未知";
-    },
-    getTypeTagType(type) {
-      const map = {
-        FREE: "danger",
-        ACTIVITY: "warning",
-        INSIDE: "success",
-        IGAME: "success",
-      };
-      return map[type] || "";
-    },
-    couponTypeText(type) {
-      const map = {
-        DISCOUNT: "打折",
-        PRICE: "减免现金",
-      };
-      return map[type] || "未知";
-    },
-    couponTypeTagType(type) {
-      const map = {
-        DISCOUNT: "primary",
-        PRICE: "info",
-      };
-      return map[type] || "";
-    },
-    isSameSelection(next, current) {
-      const a = next || [];
-      const b = current || [];
-      if (a.length !== b.length) return false;
-      const nextIds = a.map((item) => item.id).sort().join(",");
-      const currentIds = b.map((item) => item.id).sort().join(",");
-      return nextIds === currentIds;
-    },
-    syncTableSelection(selected) {
-      const table = this.$refs.table;
-      if (!table) return;
-      const nextList = selected ? [...selected] : [];
-      this.isSyncingSelection = true;
-      table.clearSelection();
-      if (nextList.length) {
-        this.data.forEach((row) => {
-          if (nextList.some((item) => item.id === row.id)) {
-            table.toggleRowSelection(row, true);
+    });
+  }
+  selectList.value = nextList;
+  selectCount.value = nextList.length;
+  nextTick(() => {
+    nextTick(() => {
+      isSyncingSelection.value = false;
+    });
+  });
+}
+function check() {
+  emit("selected", selectList.value);
+}
+function getSelection() {
+  return [...selectList.value];
+}
+function receivePage(id) {
+  if (id) {
+    router.push({ name: "coupon-receive", query: { couponId: id } });
+  } else {
+    router.push({ name: "coupon-receive" });
+  }
+}
+function init() {
+  getDataList();
+}
+function add() {
+  router.push({ name: "add-platform-coupon" });
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  if (isSyncingSelection.value) return;
+  selectList.value = e;
+  selectCount.value = e.length;
+  if (props.getType === "ACTIVITY" && !props.manualConfirm) check();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.value.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.value.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.value.startTime = null;
+    searchForm.value.endTime = null;
+  }
+  getPlatformCouponList(searchForm.value)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+        nextTick(() => {
+          if (props.selectedList.length) {
+            syncTableSelection(props.selectedList);
           }
         });
       }
-      this.selectList = nextList;
-      this.selectCount = nextList.length;
-      this.$nextTick(() => {
-        this.$nextTick(() => {
-          this.isSyncingSelection = false;
-        });
-      });
-    },
-    check() {
-      this.$emit("selected", this.selectList);
-    },
-    getSelection() {
-      return [...this.selectList];
-    },
-    receivePage(id) {
-      if (id) {
-        this.$router.push({ name: "coupon-receive", query: { couponId: id } });
-      } else {
-        this.$router.push({ name: "coupon-receive" });
-      }
-    },
-    init() {
-      this.getDataList();
-    },
-    add() {
-      this.$router.push({ name: "add-platform-coupon" });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      if (this.isSyncingSelection) return;
-      this.selectList = e;
-      this.selectCount = e.length;
-      if (this.getType === "ACTIVITY" && !this.manualConfirm) this.check();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getPlatformCouponList(this.searchForm)
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function see(v, only) {
+  const data = only ? { onlyView: true, id: v.id } : { id: v.id };
+  router.push({ name: "edit-platform-coupon", query: data });
+}
+function close(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "确认要关闭此优惠券么?",
+    loading: true,
+    onOk: () => {
+      updatePlatformCouponStatus({
+        couponIds: v.id,
+        effectiveDays: 0,
+      })
         .then((res) => {
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-            this.$nextTick(() => {
-              if (this.selectedList.length) {
-                this.syncTableSelection(this.selectedList);
-              }
-            });
+          Modal.remove();
+          if (res.success) {
+            Message.success("优惠券已关闭");
+            getDataList();
           }
         })
-        .finally(() => {
-          this.loading = false;
+        .catch(() => {
+          Modal.remove();
         });
     },
-    see(v, only) {
-      const data = only ? { onlyView: true, id: v.id } : { id: v.id };
-      this.$router.push({ name: "edit-platform-coupon", query: data });
+  });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "确认要删除此优惠券么?",
+    loading: true,
+    onOk: () => {
+      deletePlatformCoupon(v.id)
+        .then((res) => {
+          Modal.remove();
+          if (res.success) {
+            Message.success("优惠券已删除");
+            getDataList();
+          }
+        })
+        .catch(() => {
+          Modal.remove();
+        });
     },
-    close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "确认要关闭此优惠券么?",
-        loading: true,
-        onOk: () => {
-          updatePlatformCouponStatus({
-            couponIds: v.id,
-            effectiveDays: 0,
-          })
-            .then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("优惠券已关闭");
-                this.getDataList();
-              }
-            })
-            .catch(() => {
-              this.$Modal.remove();
-            });
-        },
+  });
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要下架的优惠券");
+    return;
+  }
+  Modal.confirm({
+    title: "确认下架",
+    content: "您确认要下架所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      const ids = selectList.value.map((e) => e.id);
+      updatePlatformCouponStatus({
+        couponIds: ids.toString(),
+        promotionStatus: "CLOSE",
+      }).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("下架成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "确认要删除此优惠券么?",
-        loading: true,
-        onOk: () => {
-          deletePlatformCoupon(v.id)
-            .then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("优惠券已删除");
-                this.getDataList();
-              }
-            })
-            .catch(() => {
-              this.$Modal.remove();
-            });
-        },
-      });
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的优惠券");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          const ids = this.selectList.map((e) => e.id);
-          updatePlatformCouponStatus({
-            couponIds: ids.toString(),
-            promotionStatus: "CLOSE",
-          }).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    if (this.getType) {
-      this.searchForm.getType = this.getType;
-      this.showActionColumn = false;
-    }
-    if (this.promotionStatus) {
-      this.searchForm.promotionStatus = this.promotionStatus;
-      this.showStatusColumn = false;
-    }
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  if (props.getType) {
+    searchForm.value.getType = props.getType;
+    showActionColumn.value = false;
+  }
+  if (props.promotionStatus) {
+    searchForm.value.promotionStatus = props.promotionStatus;
+    showStatusColumn.value = false;
+  }
+  init();
+});
+
+// 外部通过 ref 调用（member/benefit/index.vue、coupon-activity/coupon-publish.vue）
+defineExpose({ check, getSelection, clearSelectAll });
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/flash-discount/flash-discount.vue b/manager/src/views/promotions/flash-discount/flash-discount.vue
index b7391dbe4..53d51d86b 100644
--- a/manager/src/views/promotions/flash-discount/flash-discount.vue
+++ b/manager/src/views/promotions/flash-discount/flash-discount.vue
@@ -18,19 +18,22 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getFlashDiscountList } from "@/api/promotion.js";
-export default {
-  data() { return { loading: false, rows: [], total: 0, query: { pageNumber: 1, pageSize: 20 } }; },
-  mounted() { this.load(); },
-  methods: {
-    load() {
-      this.loading = true;
-      getFlashDiscountList(this.query).then((res) => {
-        this.loading = false;
-        if (res.success) { this.rows = res.result.records; this.total = res.result.total; }
-      });
-    },
-  },
-};
+
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const query = ref({ pageNumber: 1, pageSize: 20 });
+
+onMounted(() => { load(); });
+
+function load() {
+  loading.value = true;
+  getFlashDiscountList(query.value).then((res) => {
+    loading.value = false;
+    if (res.success) { rows.value = res.result.records; total.value = res.result.total; }
+  });
+}
 </script>
diff --git a/manager/src/views/promotions/full-discount/full-discount-detail.vue b/manager/src/views/promotions/full-discount/full-discount-detail.vue
index 6aa432fdf..d0988494b 100644
--- a/manager/src/views/promotions/full-discount/full-discount-detail.vue
+++ b/manager/src/views/promotions/full-discount/full-discount-detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px">
+      <el-form ref="formRef" :model="form" label-width="120px">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
@@ -203,97 +203,95 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getPlatformCouponList, getFullDiscountById } from "@/api/promotion";
 import { getGoodsSkuData } from "@/api/goods";
 import vueQr from "vue-qr";
-export default {
-  name: "add-full-discount",
-  components: {
-    "vue-qr": vueQr,
-  },
-  data() {
-    return {
-      form: {
-        discountType: "fullMinusFlag",
-        scopeType: "ALL",
-        promotionGoodsList: [],
-      },
-      id: this.$route.query.id,
-      couponList: [],
-      giftList: [],
-      giftLoading: false,
-      couponLoading: false,
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    if (this.id) {
-      this.getDetail();
-    }
-    this.getCouponList();
-    this.getGiftList();
-  },
-  methods: {
-    getDetail() {
-      getFullDiscountById(this.id).then((res) => {
-        let data = res.result;
-        if (!data.scopeType === "ALL") {
-          data.promotionGoodsList = [];
-        }
-        if (data.fullMinusFlag) {
-          data.discountType = "fullMinusFlag";
-          delete data.fullMinusFlag;
-        } else {
-          data.discountType = "fullMinusFlag";
-          delete data.fullRateFlag;
-        }
-        data.rangeTime = [];
-        data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
 
-        this.form = data;
-      });
-    },
-    getCouponList(query) {
-      let params = {
-        pageSize: 20,
-        pageNumber: 1,
-        getType: "ACTIVITY",
-        storeId: "",
-        couponName: query,
-        promotionStatus: "START",
-      };
-      this.couponLoading = true;
-      getPlatformCouponList(params).then((res) => {
-        this.couponLoading = false;
-        if (res.success) {
-          this.couponList = res.result.records;
-        }
-      });
-    },
-    getGiftList(query) {
-      let params = {
-        pageSize: 20,
-        pageNumber: 1,
-        id: query === this.form.giftId ? this.form.giftId : null,
-        goodsName: query === this.form.giftId ? null : query,
-        marketEnable: "UPPER",
-        authFlag: "PASS"
-      };
-      this.giftLoading = true;
-      getGoodsSkuData(params).then((res) => {
-        this.giftLoading = false;
-        if (res.success) {
-          this.giftList = res.result.records;
-        }
-      });
-    },
+defineOptions({ name: "add-full-discount" });
+
+const route = useRoute();
+
+const formRef = ref(null);
+const form = ref({
+  discountType: "fullMinusFlag",
+  scopeType: "ALL",
+  promotionGoodsList: [],
+});
+const id = ref(route.query.id);
+const couponList = ref([]);
+const giftList = ref([]);
+const giftLoading = ref(false);
+const couponLoading = ref(false);
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+onMounted(async () => {
+  if (id.value) {
+    getDetail();
+  }
+  getCouponList();
+  getGiftList();
+});
+
+function getDetail() {
+  getFullDiscountById(id.value).then((res) => {
+    let data = res.result;
+    if (!data.scopeType === "ALL") {
+      data.promotionGoodsList = [];
+    }
+    if (data.fullMinusFlag) {
+      data.discountType = "fullMinusFlag";
+      delete data.fullMinusFlag;
+    } else {
+      data.discountType = "fullMinusFlag";
+      delete data.fullRateFlag;
+    }
+    data.rangeTime = [];
+    data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+
+    form.value = data;
+  });
+}
+function getCouponList(query) {
+  let params = {
+    pageSize: 20,
+    pageNumber: 1,
+    getType: "ACTIVITY",
+    storeId: "",
+    couponName: query,
+    promotionStatus: "START",
+  };
+  couponLoading.value = true;
+  getPlatformCouponList(params).then((res) => {
+    couponLoading.value = false;
+    if (res.success) {
+      couponList.value = res.result.records;
+    }
+  });
+}
+function getGiftList(query) {
+  let params = {
+    pageSize: 20,
+    pageNumber: 1,
+    id: query === form.value.giftId ? form.value.giftId : null,
+    goodsName: query === form.value.giftId ? null : query,
+    marketEnable: "UPPER",
+    authFlag: "PASS"
+  };
+  giftLoading.value = true;
+  getGoodsSkuData(params).then((res) => {
+    giftLoading.value = false;
+    if (res.success) {
+      giftList.value = res.result.records;
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/full-discount/full-discount.vue b/manager/src/views/promotions/full-discount/full-discount.vue
index cf184fb1a..d3a9fa1d7 100644
--- a/manager/src/views/promotions/full-discount/full-discount.vue
+++ b/manager/src/views/promotions/full-discount/full-discount.vue
@@ -2,7 +2,7 @@
   <div class="search full-cut">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -48,7 +48,7 @@
 
     <el-card>
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -100,103 +100,106 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      selectDate: [],
-      total: 0,
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    openOrClose(row) {
-      let name = "开启";
-      if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
-        name = "关闭";
-        this.$Modal.confirm({
-          title: "提示",
-          content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
-          loading: true,
-          onOk: () => {
-            updateFullDiscount(row.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success(`${name}成功`);
-                this.getDataList();
-              }
-            });
-          },
+const router = useRouter();
+
+// 模板 ref（script 未使用，仅避免与 data 同名互相覆盖）
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const selectDate = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function openOrClose(row) {
+  let name = "开启";
+  if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
+    name = "关闭";
+    Modal.confirm({
+      title: "提示",
+      content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
+      loading: true,
+      onOk: () => {
+        updateFullDiscount(row.id).then((res) => {
+          Modal.remove();
+          if (res.success) {
+            Message.success(`${name}成功`);
+            getDataList();
+          }
         });
-      }
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getFullDiscountList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    view(row) {
-      this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      },
+    });
+  }
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = selectDate.value[0].getTime();
+    searchForm.endTime = selectDate.value[1].getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getFullDiscountList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function view(row) {
+  router.push({ name: "full-discount-detail", query: { id: row.id } });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
index a1cfda201..5eaf281f3 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity-add.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card v-loading="detailLoading">
-      <el-form ref="form" :model="form" label-width="130px" :rules="onlyView ? {} : formRule">
+      <el-form ref="formRef" :model="form" label-width="130px" :rules="onlyView ? {} : formRule">
         <div class="base-info-item">
           <h4>{{ pageTitle }}</h4>
           <div class="form-item-view gift-card-activity-form">
@@ -102,219 +102,226 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, computed, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   saveGiftCardCashActivity,
   getGiftCardCashActivity,
   updateGiftCardCashActivity,
 } from "@/api/promotion";
 import { regular } from "@/utils";
+import { unixToDate } from "@/utils/filters";
+import { Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "addGiftCardCashActivity",
-  data() {
-    const checkFaceValue = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("面额不能为空"));
-      }
-      if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("面额设置超过上限值"));
-      } else if (parseFloat(value) < 0.01) {
-        callback(new Error("面值必须大于 0"));
-      } else {
-        callback();
-      }
-    };
-    const validateStock = (rule, value, callback) => {
-      if (value === null || value === undefined || value === "") {
-        callback(new Error("请填写总库存"));
-        return;
-      }
-      if (Number(value) < 1) {
-        callback(new Error("活动库存至少为 1"));
-        return;
-      }
-      callback();
-    };
-    return {
-      detailLoading: false,
-      submitLoading: false,
-      form: {
-        giftCardName: "",
-        cardType: "CASH",
-        faceValue: "",
-        stockTotal: null,
-        validityType: "LONG_TERM",
-        validEndTime: null,
-        validMonthsAfterActivate: null,
-      },
-      formRule: {
-        giftCardName: [
-          { required: true, message: "活动名称不能为空", trigger: "blur" },
-          { type: "string", max: 64, message: "活动名称过长", trigger: "blur" },
-        ],
-        faceValue: [{ required: true, message: "请输入面额" }, { validator: checkFaceValue }],
-        stockTotal: [{ required: true, validator: validateStock, trigger: "blur" }],
-      },
-    };
-  },
-  computed: {
-    onlyView() {
-      const q = this.$route.query.onlyView;
-      return q === "true" || q === true;
-    },
-    isEditMode() {
-      return !!this.$route.query.id && !this.onlyView;
-    },
-    pageTitle() {
-      if (this.onlyView) {
-        return "查看礼品卡";
-      }
-      if (this.isEditMode) {
-        return "编辑礼品卡";
-      }
-      return "添加礼品卡";
-    },
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      this.loadDetail(this.$route.query.id);
+defineOptions({ name: "addGiftCardCashActivity" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const checkFaceValue = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("面额不能为空"));
+  }
+  if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("面额设置超过上限值"));
+  } else if (parseFloat(value) < 0.01) {
+    callback(new Error("面值必须大于 0"));
+  } else {
+    callback();
+  }
+};
+const validateStock = (rule, value, callback) => {
+  if (value === null || value === undefined || value === "") {
+    callback(new Error("请填写总库存"));
+    return;
+  }
+  if (Number(value) < 1) {
+    callback(new Error("活动库存至少为 1"));
+    return;
+  }
+  callback();
+};
+
+const detailLoading = ref(false);
+const submitLoading = ref(false);
+const form = reactive({
+  giftCardName: "",
+  cardType: "CASH",
+  faceValue: "",
+  stockTotal: null,
+  validityType: "LONG_TERM",
+  validEndTime: null,
+  validMonthsAfterActivate: null,
+});
+const formRule = {
+  giftCardName: [
+    { required: true, message: "活动名称不能为空", trigger: "blur" },
+    { type: "string", max: 64, message: "活动名称过长", trigger: "blur" },
+  ],
+  faceValue: [{ required: true, message: "请输入面额" }, { validator: checkFaceValue }],
+  stockTotal: [{ required: true, validator: validateStock, trigger: "blur" }],
+};
+
+const formRef = ref(null);
+
+const onlyView = computed(() => {
+  const q = route.query.onlyView;
+  return q === "true" || q === true;
+});
+const isEditMode = computed(() => {
+  return !!route.query.id && !onlyView.value;
+});
+const pageTitle = computed(() => {
+  if (onlyView.value) {
+    return "查看礼品卡";
+  }
+  if (isEditMode.value) {
+    return "编辑礼品卡";
+  }
+  return "添加礼品卡";
+});
+
+onMounted(() => {
+  if (route.query.id) {
+    loadDetail(route.query.id);
+  }
+});
+
+watch(
+  () => form.validityType,
+  (v) => {
+    if (v !== "FIXED_UNTIL") {
+      form.validEndTime = null;
     }
-  },
-  watch: {
-    "form.validityType"(v) {
-      if (v !== "FIXED_UNTIL") {
-        this.form.validEndTime = null;
-      }
-      if (v !== "AFTER_ACTIVATE_MONTHS") {
-        this.form.validMonthsAfterActivate = null;
-      }
-    },
-    "$route.query.id"(id) {
-      if (id) {
-        this.loadDetail(id);
-      }
-    },
-  },
-  methods: {
-    parseDetailDate(val) {
-      if (!val) {
-        return null;
-      }
-      if (val instanceof Date) {
-        return val;
-      }
-      const d = new Date(val);
-      return Number.isNaN(d.getTime()) ? null : d;
-    },
-    loadDetail(id) {
-      this.detailLoading = true;
-      getGiftCardCashActivity(id)
-        .then((res) => {
-          this.detailLoading = false;
-          if (!res.success || !res.result) {
-            return;
-          }
-          const d = res.result;
-          this.form.giftCardName = d.giftCardName || "";
-          this.form.cardType = d.cardType || "CASH";
-          this.form.faceValue =
-            d.faceValue !== null && d.faceValue !== undefined ? String(d.faceValue) : "";
-          this.form.stockTotal =
-            d.stockTotal !== null && d.stockTotal !== undefined ? d.stockTotal : null;
-          this.form.validityType = d.validityType || "LONG_TERM";
-          const endDate = this.parseDetailDate(d.validEndTime);
-          this.form.validEndTime = endDate
-            ? this.$filters.unixToDate(endDate.getTime() / 1000)
-            : null;
-          this.form.validMonthsAfterActivate =
-            d.validMonthsAfterActivate !== null &&
-            d.validMonthsAfterActivate !== undefined &&
-            d.validMonthsAfterActivate !== ""
-              ? d.validMonthsAfterActivate
-              : null;
-        })
-        .catch(() => {
-          this.detailLoading = false;
-        });
-    },
-    closeCurrentPage() {
-      const name = this.$route.name;
-      if (name) {
-        this.$store.commit("removeTag", name);
-      }
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    validateByValidityType() {
-      const t = this.form.validityType;
-      if (t === "FIXED_UNTIL") {
-        if (!this.form.validEndTime) {
-          this.$Message.warning("请选择结束时间");
-          return false;
-        }
-      }
-      if (t === "AFTER_ACTIVATE_MONTHS") {
-        const m = this.form.validMonthsAfterActivate;
-        if (m === null || m === undefined || m === "" || Number(m) < 1 || Number(m) > 99) {
-          this.$Message.warning("请输入1-99的整数");
-          return false;
-        }
-      }
-      return true;
-    },
-    buildPayload() {
-      const payload = {
-        giftCardName: (this.form.giftCardName || "").trim(),
-        cardType: this.form.cardType || "CASH",
-        faceValue: parseFloat(this.form.faceValue),
-        validityType: this.form.validityType || "LONG_TERM",
-        stockTotal: this.form.stockTotal,
-      };
-      if (payload.validityType === "FIXED_UNTIL") {
-        const endDate = new Date(this.form.validEndTime);
-        payload.validEndTime = Number.isNaN(endDate.getTime())
-          ? this.form.validEndTime
-          : endDate.getTime();
-      }
-      if (payload.validityType === "AFTER_ACTIVATE_MONTHS") {
-        payload.validMonthsAfterActivate = this.form.validMonthsAfterActivate;
-      }
-      return payload;
-    },
-    handleSubmit() {
-      if (this.onlyView) {
+    if (v !== "AFTER_ACTIVATE_MONTHS") {
+      form.validMonthsAfterActivate = null;
+    }
+  }
+);
+watch(
+  () => route.query.id,
+  (id) => {
+    if (id) {
+      loadDetail(id);
+    }
+  }
+);
+
+const parseDetailDate = (val) => {
+  if (!val) {
+    return null;
+  }
+  if (val instanceof Date) {
+    return val;
+  }
+  const d = new Date(val);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+const loadDetail = (id) => {
+  detailLoading.value = true;
+  getGiftCardCashActivity(id)
+    .then((res) => {
+      detailLoading.value = false;
+      if (!res.success || !res.result) {
         return;
       }
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return;
+      const d = res.result;
+      form.giftCardName = d.giftCardName || "";
+      form.cardType = d.cardType || "CASH";
+      form.faceValue =
+        d.faceValue !== null && d.faceValue !== undefined ? String(d.faceValue) : "";
+      form.stockTotal =
+        d.stockTotal !== null && d.stockTotal !== undefined ? d.stockTotal : null;
+      form.validityType = d.validityType || "LONG_TERM";
+      const endDate = parseDetailDate(d.validEndTime);
+      form.validEndTime = endDate ? unixToDate(endDate.getTime() / 1000) : null;
+      form.validMonthsAfterActivate =
+        d.validMonthsAfterActivate !== null &&
+        d.validMonthsAfterActivate !== undefined &&
+        d.validMonthsAfterActivate !== ""
+          ? d.validMonthsAfterActivate
+          : null;
+    })
+    .catch(() => {
+      detailLoading.value = false;
+    });
+};
+const closeCurrentPage = () => {
+  const name = route.name;
+  if (name) {
+    appStore.removeTag(name);
+  }
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+};
+const validateByValidityType = () => {
+  const t = form.validityType;
+  if (t === "FIXED_UNTIL") {
+    if (!form.validEndTime) {
+      Message.warning("请选择结束时间");
+      return false;
+    }
+  }
+  if (t === "AFTER_ACTIVATE_MONTHS") {
+    const m = form.validMonthsAfterActivate;
+    if (m === null || m === undefined || m === "" || Number(m) < 1 || Number(m) > 99) {
+      Message.warning("请输入1-99的整数");
+      return false;
+    }
+  }
+  return true;
+};
+const buildPayload = () => {
+  const payload = {
+    giftCardName: (form.giftCardName || "").trim(),
+    cardType: form.cardType || "CASH",
+    faceValue: parseFloat(form.faceValue),
+    validityType: form.validityType || "LONG_TERM",
+    stockTotal: form.stockTotal,
+  };
+  if (payload.validityType === "FIXED_UNTIL") {
+    const endDate = new Date(form.validEndTime);
+    payload.validEndTime = Number.isNaN(endDate.getTime())
+      ? form.validEndTime
+      : endDate.getTime();
+  }
+  if (payload.validityType === "AFTER_ACTIVATE_MONTHS") {
+    payload.validMonthsAfterActivate = form.validMonthsAfterActivate;
+  }
+  return payload;
+};
+const handleSubmit = () => {
+  if (onlyView.value) {
+    return;
+  }
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    if (!validateByValidityType()) {
+      return;
+    }
+    submitLoading.value = true;
+    const req = isEditMode.value
+      ? updateGiftCardCashActivity(route.query.id, buildPayload())
+      : saveGiftCardCashActivity(buildPayload());
+    req
+      .then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success(isEditMode.value ? "礼品卡活动已更新" : "礼品卡活动创建成功");
+          closeCurrentPage();
         }
-        if (!this.validateByValidityType()) {
-          return;
-        }
-        this.submitLoading = true;
-        const req = this.isEditMode
-          ? updateGiftCardCashActivity(this.$route.query.id, this.buildPayload())
-          : saveGiftCardCashActivity(this.buildPayload());
-        req
-          .then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success(
-                this.isEditMode ? "礼品卡活动已更新" : "礼品卡活动创建成功"
-              );
-              this.closeCurrentPage();
-            }
-          })
-          .catch(() => {
-            this.submitLoading = false;
-          });
+      })
+      .catch(() => {
+        submitLoading.value = false;
       });
-    },
-  },
+  });
 };
 </script>
 
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
index 470795d28..6b0ae90ed 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-activity.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="100px"
@@ -132,7 +132,7 @@
       destroy-on-close
       @closed="onBatchCreateClosed"
     >
-      <el-form ref="batchForm" :model="batchForm" :rules="batchFormRule" label-width="100px">
+      <el-form ref="batchFormRef" :model="batchForm" :rules="batchFormRule" label-width="100px">
         <el-form-item label="礼品卡名称">
           <span>{{ batchCtx.giftCardName || "-" }}</span>
         </el-form-item>
@@ -225,404 +225,405 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   getGiftCardCashActivityPage,
   giftCardCashBatchCreate,
   downloadGiftCardCashIssueTemplate,
   giftCardCashIssueImportByActivity,
 } from "@/api/promotion";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "GiftCardCashActivity",
-  data() {
-    return {
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        giftCardName: "",
-      },
-      data: [],
-      total: 0,
-      batchCreateVisible: false,
-      batchCreateSubmitting: false,
-      batchCtx: {
-        id: "",
-        giftCardName: "",
-        faceValue: null,
-        remainingStock: null,
-        headroom: null,
-      },
-      batchForm: {
-        quantity: null,
-        batchRemark: "",
-      },
-      batchFormRule: {},
-      batchIssueVisible: false,
-      issueTemplateDownloading: false,
-      issueImportSubmitting: false,
-      issueCtx: {
-        id: "",
-        giftCardName: "",
-      },
-      issueFile: null,
-      issueFileName: "",
-    };
-  },
-  computed: {
-    batchQuantityMax() {
-      const cap = 10000;
-      const h = this.batchCtx.headroom;
-      if (h !== null && h !== undefined && h !== "" && Number(h) >= 1) {
-        return Math.min(cap, Number(h));
-      }
-      return cap;
-    },
-  },
-  created() {
-    this.batchFormRule = {
-      quantity: [{ validator: this.validateBatchQuantity, trigger: "change" }],
-      batchRemark: [{ type: "string", max: 64, message: "备注过长", trigger: "blur" }],
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    cardTypeText(type) {
-      const map = { CASH: "现金卡", PICKUP: "提货卡" };
-      return map[type] || type || "-";
-    },
-    validateBatchQuantity(rule, value, callback) {
-      if (value === null || value === undefined || value === "") {
-        callback(new Error("请填写制卡张数"));
-        return;
-      }
-      const n = Number(value);
-      if (Number.isNaN(n) || n < 1) {
-        callback(new Error("制卡张数至少为 1"));
-        return;
-      }
-      const maxQ = this.batchQuantityMax;
-      if (n > maxQ) {
-        callback(new Error(`制卡张数不能超过 ${maxQ}（可制卡上限与单次上限）`));
-        return;
-      }
-      if (n > 10000) {
-        callback(new Error("单次制卡不超过 10000 张"));
-        return;
-      }
-      callback();
-    },
-    fmtInt(n) {
-      if (n === null || n === undefined || n === "") {
-        return "-";
-      }
-      return n;
-    },
-    isFixedValidityExpired(row) {
-      if (!row || !row.validityType || row.validEndTime == null || row.validEndTime === "") {
-        return false;
-      }
-      const type = String(row.validityType).toUpperCase();
-      const fixedEndTypes = [
-        "FIXED_UNTIL",
-        "FIXED_END",
-        "FIXED",
-        "BY_END_TIME",
-        "FIXED_DATE",
-      ];
-      if (!fixedEndTypes.includes(type)) {
-        return false;
-      }
-      const end = new Date(row.validEndTime);
-      if (Number.isNaN(end.getTime())) {
-        return false;
-      }
-      return end.getTime() < Date.now();
-    },
-    formatValidity(row) {
-      if (!row || !row.validityType) {
-        return "-";
-      }
-      const type = String(row.validityType).toUpperCase();
-      if (type === "LONG_TERM") {
-        return "长期有效";
-      }
-      if (type === "FIXED_UNTIL") {
-        return row.validEndTime ? String(row.validEndTime) : "固定到期";
-      }
-      if (type === "AFTER_ACTIVATE_MONTHS") {
-        const m = row.validMonthsAfterActivate;
-        return m != null && m !== "" ? `激活后${m}个月有效` : "激活后按月";
-      }
-      if (
-        type === "FIXED_END" ||
-        type === "FIXED" ||
-        type === "BY_END_TIME" ||
-        type === "FIXED_DATE"
-      ) {
-        return row.validEndTime ? String(row.validEndTime) : type;
-      }
-      if (
-        type === "AFTER_ACTIVATE" ||
-        type === "MONTHS_AFTER_ACTIVATE" ||
-        type === "RELATIVE"
-      ) {
-        const m = row.validMonthsAfterActivate;
-        return m != null && m !== "" ? `激活后${m}个月有效` : type;
-      }
-      const parts = [row.validityType];
-      if (row.validEndTime) {
-        parts.push(String(row.validEndTime));
-      }
-      if (row.validMonthsAfterActivate != null && row.validMonthsAfterActivate !== "") {
-        parts.push(`激活后${row.validMonthsAfterActivate}个月`);
-      }
-      return parts.join(" ");
-    },
-    addActivity() {
-      this.$router.push({ name: "add-gift-card-cash-activity" });
-    },
-    goEdit(row) {
-      if (!this.canEdit(row)) {
-        return;
-      }
-      this.$router.push({
-        name: "edit-gift-card-cash-activity",
-        query: { id: row.id },
-      });
-    },
-    goView(row) {
-      this.$router.push({
-        name: "edit-gift-card-cash-activity",
-        query: { id: row.id, onlyView: "true" },
-      });
-    },
-    goRecords(row) {
-      this.$router.push({
-        name: "gift-card-cash-records",
-        query: {
-          activityId: row.id,
-          giftCardName: row.giftCardName || "",
-        },
-      });
-    },
-    getRemainingStock(row) {
-      if (!row || row.remainingStock === null || row.remainingStock === undefined || row.remainingStock === "") {
-        return 0;
-      }
-      const n = Number(row.remainingStock);
-      if (Number.isNaN(n)) {
-        return 0;
-      }
-      return Math.max(0, Math.floor(n));
-    },
-    hasRemainingStock(row) {
-      return this.getRemainingStock(row) >= 1;
-    },
-    canEdit(row) {
-      return this.hasRemainingStock(row);
-    },
-    getBatchCreateHeadroom(row) {
-      return this.getRemainingStock(row);
-    },
-    canBatchCreate(row) {
-      return this.hasRemainingStock(row);
-    },
-    getBatchIssuePool(row) {
-      return this.getRemainingStock(row);
-    },
-    canBatchIssue(row) {
-      if (this.isFixedValidityExpired(row)) {
-        return false;
-      }
-      return this.hasRemainingStock(row);
-    },
-    openBatchIssue(row) {
-      if (!this.canBatchIssue(row)) {
-        return;
-      }
-      this.issueCtx = {
-        id: row.id,
-        giftCardName: row.giftCardName,
-      };
-      this.issueFile = null;
-      this.issueFileName = "";
-      this.batchIssueVisible = true;
-    },
-    onBatchIssueClosed() {
-      this.issueFile = null;
-      this.issueFileName = "";
-    },
-    downloadIssueTemplate() {
-      this.issueTemplateDownloading = true;
-      downloadGiftCardCashIssueTemplate()
-        .then((res) => {
-          this.issueTemplateDownloading = false;
-          if (!res) {
-            return;
-          }
-          if (res instanceof Blob && res.type && res.type.indexOf("json") !== -1) {
-            const reader = new FileReader();
-            reader.onload = () => {
-              try {
-                const j = JSON.parse(reader.result);
-                if (j && j.message) {
-                  this.$Message.error(j.message);
-                } else {
-                  this.$Message.error("模板下载失败");
-                }
-              } catch (e) {
-                this.$Message.error("模板下载失败");
-              }
-            };
-            reader.readAsText(res);
-            return;
-          }
-          const blob =
-            res instanceof Blob
-              ? res
-              : new Blob([res], {
-                  type:
-                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
-                });
-          const name = "批量发卡模板.xlsx";
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = name;
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else if (navigator.msSaveBlob) {
-            navigator.msSaveBlob(blob, name);
-          }
-          this.$Message.success("模板已开始下载");
-        })
-        .catch(() => {
-          this.issueTemplateDownloading = false;
-        });
-    },
-    onIssueImportBeforeUpload(file) {
-      this.issueFile = file;
-      this.issueFileName = file.name;
-      return false;
-    },
-    submitIssueImport() {
-      if (!this.issueCtx.id) {
-        return;
-      }
-      if (!this.issueFile) {
-        this.$Message.warning("请先选择要上传的 Excel 文件");
-        return;
-      }
-      const fd = new FormData();
-      fd.append("file", this.issueFile);
-      this.issueImportSubmitting = true;
-      giftCardCashIssueImportByActivity(this.issueCtx.id, fd)
-        .then((res) => {
-          this.issueImportSubmitting = false;
-          if (res && res.success) {
-            this.$Message.success(
-              res.result ? `发卡任务已提交，发卡批次号：${res.result}` : "发卡任务已提交"
-            );
-            this.batchIssueVisible = false;
-            this.issueFile = null;
-            this.issueFileName = "";
-            this.getDataList();
-          }
-        })
-        .catch(() => {
-          this.issueImportSubmitting = false;
-        });
-    },
-    openBatchCreate(row) {
-      if (!this.canBatchCreate(row)) {
-        return;
-      }
-      const headroom = this.getBatchCreateHeadroom(row);
-      this.batchCtx = {
-        id: row.id,
-        giftCardName: row.giftCardName,
-        faceValue: row.faceValue,
-        remainingStock: row.remainingStock,
-        headroom,
-      };
-      this.batchForm.quantity = null;
-      this.batchForm.batchRemark = "";
-      this.batchCreateVisible = true;
-    },
-    onBatchCreateClosed() {
-      this.$refs.batchForm?.resetFields();
-    },
-    submitBatchCreate() {
-      if (!this.$refs.batchForm) {
-        return;
-      }
-      this.$refs.batchForm.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-        const q = this.batchForm.quantity;
-        const payload = { quantity: q };
-        const remark = (this.batchForm.batchRemark || "").trim();
-        if (remark) {
-          payload.batchRemark = remark;
-        }
-        this.batchCreateSubmitting = true;
-        giftCardCashBatchCreate(this.batchCtx.id, payload)
-          .then((res) => {
-            this.batchCreateSubmitting = false;
-            if (res.success) {
-              this.$Message.success(
-                res.result ? `制卡成功，批次号：${res.result}` : "制卡成功"
-              );
-              this.batchCreateVisible = false;
-              this.getDataList();
-            }
-          })
-          .catch(() => {
-            this.batchCreateSubmitting = false;
-          });
-      });
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      if (!params.giftCardName) {
-        delete params.giftCardName;
-      }
-      getGiftCardCashActivityPage(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-  },
+defineOptions({ name: "GiftCardCashActivity" });
+
+const router = useRouter();
+
+const searchFormRef = ref(null);
+const batchFormRef = ref(null);
+
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  giftCardName: "",
+});
+const data = ref([]);
+const total = ref(0);
+const batchCreateVisible = ref(false);
+const batchCreateSubmitting = ref(false);
+const batchCtx = ref({
+  id: "",
+  giftCardName: "",
+  faceValue: null,
+  remainingStock: null,
+  headroom: null,
+});
+const batchForm = reactive({
+  quantity: null,
+  batchRemark: "",
+});
+const batchFormRule = ref({});
+const batchIssueVisible = ref(false);
+const issueTemplateDownloading = ref(false);
+const issueImportSubmitting = ref(false);
+const issueCtx = ref({
+  id: "",
+  giftCardName: "",
+});
+const issueFile = ref(null);
+const issueFileName = ref("");
+
+const batchQuantityMax = computed(() => {
+  const cap = 10000;
+  const h = batchCtx.value.headroom;
+  if (h !== null && h !== undefined && h !== "" && Number(h) >= 1) {
+    return Math.min(cap, Number(h));
+  }
+  return cap;
+});
+
+batchFormRule.value = {
+  quantity: [{ validator: validateBatchQuantity, trigger: "change" }],
+  batchRemark: [{ type: "string", max: 64, message: "备注过长", trigger: "blur" }],
 };
+
+onMounted(() => {
+  getDataList();
+});
+
+function cardTypeText(type) {
+  const map = { CASH: "现金卡", PICKUP: "提货卡" };
+  return map[type] || type || "-";
+}
+function validateBatchQuantity(rule, value, callback) {
+  if (value === null || value === undefined || value === "") {
+    callback(new Error("请填写制卡张数"));
+    return;
+  }
+  const n = Number(value);
+  if (Number.isNaN(n) || n < 1) {
+    callback(new Error("制卡张数至少为 1"));
+    return;
+  }
+  const maxQ = batchQuantityMax.value;
+  if (n > maxQ) {
+    callback(new Error(`制卡张数不能超过 ${maxQ}（可制卡上限与单次上限）`));
+    return;
+  }
+  if (n > 10000) {
+    callback(new Error("单次制卡不超过 10000 张"));
+    return;
+  }
+  callback();
+}
+function fmtInt(n) {
+  if (n === null || n === undefined || n === "") {
+    return "-";
+  }
+  return n;
+}
+function isFixedValidityExpired(row) {
+  if (!row || !row.validityType || row.validEndTime == null || row.validEndTime === "") {
+    return false;
+  }
+  const type = String(row.validityType).toUpperCase();
+  const fixedEndTypes = [
+    "FIXED_UNTIL",
+    "FIXED_END",
+    "FIXED",
+    "BY_END_TIME",
+    "FIXED_DATE",
+  ];
+  if (!fixedEndTypes.includes(type)) {
+    return false;
+  }
+  const end = new Date(row.validEndTime);
+  if (Number.isNaN(end.getTime())) {
+    return false;
+  }
+  return end.getTime() < Date.now();
+}
+function formatValidity(row) {
+  if (!row || !row.validityType) {
+    return "-";
+  }
+  const type = String(row.validityType).toUpperCase();
+  if (type === "LONG_TERM") {
+    return "长期有效";
+  }
+  if (type === "FIXED_UNTIL") {
+    return row.validEndTime ? String(row.validEndTime) : "固定到期";
+  }
+  if (type === "AFTER_ACTIVATE_MONTHS") {
+    const m = row.validMonthsAfterActivate;
+    return m != null && m !== "" ? `激活后${m}个月有效` : "激活后按月";
+  }
+  if (
+    type === "FIXED_END" ||
+    type === "FIXED" ||
+    type === "BY_END_TIME" ||
+    type === "FIXED_DATE"
+  ) {
+    return row.validEndTime ? String(row.validEndTime) : type;
+  }
+  if (
+    type === "AFTER_ACTIVATE" ||
+    type === "MONTHS_AFTER_ACTIVATE" ||
+    type === "RELATIVE"
+  ) {
+    const m = row.validMonthsAfterActivate;
+    return m != null && m !== "" ? `激活后${m}个月有效` : type;
+  }
+  const parts = [row.validityType];
+  if (row.validEndTime) {
+    parts.push(String(row.validEndTime));
+  }
+  if (row.validMonthsAfterActivate != null && row.validMonthsAfterActivate !== "") {
+    parts.push(`激活后${row.validMonthsAfterActivate}个月`);
+  }
+  return parts.join(" ");
+}
+function addActivity() {
+  router.push({ name: "add-gift-card-cash-activity" });
+}
+function goEdit(row) {
+  if (!canEdit(row)) {
+    return;
+  }
+  router.push({
+    name: "edit-gift-card-cash-activity",
+    query: { id: row.id },
+  });
+}
+function goView(row) {
+  router.push({
+    name: "edit-gift-card-cash-activity",
+    query: { id: row.id, onlyView: "true" },
+  });
+}
+function goRecords(row) {
+  router.push({
+    name: "gift-card-cash-records",
+    query: {
+      activityId: row.id,
+      giftCardName: row.giftCardName || "",
+    },
+  });
+}
+function getRemainingStock(row) {
+  if (!row || row.remainingStock === null || row.remainingStock === undefined || row.remainingStock === "") {
+    return 0;
+  }
+  const n = Number(row.remainingStock);
+  if (Number.isNaN(n)) {
+    return 0;
+  }
+  return Math.max(0, Math.floor(n));
+}
+function hasRemainingStock(row) {
+  return getRemainingStock(row) >= 1;
+}
+function canEdit(row) {
+  return hasRemainingStock(row);
+}
+function getBatchCreateHeadroom(row) {
+  return getRemainingStock(row);
+}
+function canBatchCreate(row) {
+  return hasRemainingStock(row);
+}
+function getBatchIssuePool(row) {
+  return getRemainingStock(row);
+}
+function canBatchIssue(row) {
+  if (isFixedValidityExpired(row)) {
+    return false;
+  }
+  return hasRemainingStock(row);
+}
+function openBatchIssue(row) {
+  if (!canBatchIssue(row)) {
+    return;
+  }
+  issueCtx.value = {
+    id: row.id,
+    giftCardName: row.giftCardName,
+  };
+  issueFile.value = null;
+  issueFileName.value = "";
+  batchIssueVisible.value = true;
+}
+function onBatchIssueClosed() {
+  issueFile.value = null;
+  issueFileName.value = "";
+}
+function downloadIssueTemplate() {
+  issueTemplateDownloading.value = true;
+  downloadGiftCardCashIssueTemplate()
+    .then((res) => {
+      issueTemplateDownloading.value = false;
+      if (!res) {
+        return;
+      }
+      if (res instanceof Blob && res.type && res.type.indexOf("json") !== -1) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          try {
+            const j = JSON.parse(reader.result);
+            if (j && j.message) {
+              Message.error(j.message);
+            } else {
+              Message.error("模板下载失败");
+            }
+          } catch (e) {
+            Message.error("模板下载失败");
+          }
+        };
+        reader.readAsText(res);
+        return;
+      }
+      const blob =
+        res instanceof Blob
+          ? res
+          : new Blob([res], {
+              type:
+                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+            });
+      const name = "批量发卡模板.xlsx";
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = name;
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
+      } else if (navigator.msSaveBlob) {
+        navigator.msSaveBlob(blob, name);
+      }
+      Message.success("模板已开始下载");
+    })
+    .catch(() => {
+      issueTemplateDownloading.value = false;
+    });
+}
+function onIssueImportBeforeUpload(file) {
+  issueFile.value = file;
+  issueFileName.value = file.name;
+  return false;
+}
+function submitIssueImport() {
+  if (!issueCtx.value.id) {
+    return;
+  }
+  if (!issueFile.value) {
+    Message.warning("请先选择要上传的 Excel 文件");
+    return;
+  }
+  const fd = new FormData();
+  fd.append("file", issueFile.value);
+  issueImportSubmitting.value = true;
+  giftCardCashIssueImportByActivity(issueCtx.value.id, fd)
+    .then((res) => {
+      issueImportSubmitting.value = false;
+      if (res && res.success) {
+        Message.success(
+          res.result ? `发卡任务已提交，发卡批次号：${res.result}` : "发卡任务已提交"
+        );
+        batchIssueVisible.value = false;
+        issueFile.value = null;
+        issueFileName.value = "";
+        getDataList();
+      }
+    })
+    .catch(() => {
+      issueImportSubmitting.value = false;
+    });
+}
+function openBatchCreate(row) {
+  if (!canBatchCreate(row)) {
+    return;
+  }
+  const headroom = getBatchCreateHeadroom(row);
+  batchCtx.value = {
+    id: row.id,
+    giftCardName: row.giftCardName,
+    faceValue: row.faceValue,
+    remainingStock: row.remainingStock,
+    headroom,
+  };
+  batchForm.quantity = null;
+  batchForm.batchRemark = "";
+  batchCreateVisible.value = true;
+}
+function onBatchCreateClosed() {
+  batchFormRef.value?.resetFields();
+}
+function submitBatchCreate() {
+  if (!batchFormRef.value) {
+    return;
+  }
+  batchFormRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    const q = batchForm.quantity;
+    const payload = { quantity: q };
+    const remark = (batchForm.batchRemark || "").trim();
+    if (remark) {
+      payload.batchRemark = remark;
+    }
+    batchCreateSubmitting.value = true;
+    giftCardCashBatchCreate(batchCtx.value.id, payload)
+      .then((res) => {
+        batchCreateSubmitting.value = false;
+        if (res.success) {
+          Message.success(
+            res.result ? `制卡成功，批次号：${res.result}` : "制卡成功"
+          );
+          batchCreateVisible.value = false;
+          getDataList();
+        }
+      })
+      .catch(() => {
+        batchCreateSubmitting.value = false;
+      });
+  });
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  const params = { ...searchForm };
+  if (!params.giftCardName) {
+    delete params.giftCardName;
+  }
+  getGiftCardCashActivityPage(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
index 623333d39..28615a254 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-batch-credentials.vue
@@ -25,7 +25,7 @@
           >
             {{ t.label }}</span>
         </div>
-        <el-form ref="searchForm" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
+        <el-form ref="searchFormRef" :model="searchForm" inline class="search-form mb_10 gcc-filter-form">
           <el-form-item label="卡号" prop="cardNo" label-width="60px">
             <el-input
               v-model="searchForm.cardNo"
@@ -160,8 +160,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getGiftCardCashCredentialPage } from "@/api/promotion";
+import { unitPrice } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
 const STATUS_LABEL = {
   UNISSUED: "未兑换",
@@ -183,283 +191,286 @@ const ISSUE_STATUS_LABEL = {
   SUCCESS: "发卡成功",
 };
 
-export default {
-  name: "GiftCardCashBatchCredentials",
-  data() {
-    return {
-      activityId: "",
-      createBatchId: "",
-      issueBatchId: "",
-      giftCardName: "",
-      batchRemark: "",
-      lifecycleTab: "all",
-      statusTabList: [
-        { key: "all", label: "全部", status: "" },
-        { key: "unredeemed", label: "未兑换", status: "UNISSUED" },
-        { key: "unactivated", label: "未激活", status: "UNACTIVATED" },
-        { key: "activated", label: "已激活", status: "BOUND" },
-        { key: "cancelled", label: "已销卡", status: "VOIDED" },
-        { key: "expired", label: "已过期", status: "EXPIRED" },
-      ],
-      redeemDateRange: [],
-      activateDateRange: [],
-      loading: false,
-      total: 0,
-      data: [],
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        cardNo: "",
-        redeemMemberField: "nickName",
-        redeemMemberKeyword: "",
-        activateMemberField: "nickName",
-        activateMemberKeyword: "",
-      },
-    };
-  },
-  computed: {
-    isIssueBatchMode() {
-      return !!this.issueBatchId;
-    },
-    hasBatchId() {
-      return !!(this.createBatchId || this.issueBatchId);
-    },
-    batchTypeLabel() {
-      return this.isIssueBatchMode ? "发卡批次" : "制卡批次";
-    },
-    batchSourceLabel() {
-      return this.isIssueBatchMode ? "发卡记录" : "制卡记录";
-    },
-    batchIdDisplay() {
-      return this.isIssueBatchMode ? this.issueBatchId : this.createBatchId;
-    },
-  },
-  mounted() {
-    this.initFromRoute();
-    if (this.activityId && this.hasBatchId) {
-      this.loadList();
+defineOptions({ name: "GiftCardCashBatchCredentials" });
+
+const activityId = ref("");
+const createBatchId = ref("");
+const issueBatchId = ref("");
+const giftCardName = ref("");
+const batchRemark = ref("");
+const lifecycleTab = ref("all");
+const statusTabList = ref([
+  { key: "all", label: "全部", status: "" },
+  { key: "unredeemed", label: "未兑换", status: "UNISSUED" },
+  { key: "unactivated", label: "未激活", status: "UNACTIVATED" },
+  { key: "activated", label: "已激活", status: "BOUND" },
+  { key: "cancelled", label: "已销卡", status: "VOIDED" },
+  { key: "expired", label: "已过期", status: "EXPIRED" },
+]);
+const redeemDateRange = ref([]);
+const activateDateRange = ref([]);
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  cardNo: "",
+  redeemMemberField: "nickName",
+  redeemMemberKeyword: "",
+  activateMemberField: "nickName",
+  activateMemberKeyword: "",
+});
+const searchFormRef = ref(null);
+
+const isIssueBatchMode = computed(() => {
+  return !!issueBatchId.value;
+});
+const hasBatchId = computed(() => {
+  return !!(createBatchId.value || issueBatchId.value);
+});
+const batchTypeLabel = computed(() => {
+  return isIssueBatchMode.value ? "发卡批次" : "制卡批次";
+});
+const batchSourceLabel = computed(() => {
+  return isIssueBatchMode.value ? "发卡记录" : "制卡记录";
+});
+const batchIdDisplay = computed(() => {
+  return isIssueBatchMode.value ? issueBatchId.value : createBatchId.value;
+});
+
+onMounted(() => {
+  initFromRoute();
+  if (activityId.value && hasBatchId.value) {
+    loadList();
+  }
+});
+
+watch(
+  () => route.query.createBatchId,
+  () => {
+    onRouteQueryChange();
+  }
+);
+watch(
+  () => route.query.issueBatchId,
+  () => {
+    onRouteQueryChange();
+  }
+);
+watch(
+  () => route.query.activityId,
+  () => {
+    onRouteQueryChange();
+  }
+);
+
+function formatPrice(value) {
+  if (value === null || value === undefined || value === "") {
+    return "—";
+  }
+  return unitPrice(value, "￥");
+}
+function formatStatus(status) {
+  return STATUS_LABEL[status] || status || "—";
+}
+function formatIssueStatus(status) {
+  return ISSUE_STATUS_LABEL[status] || status || "—";
+}
+function formatIssueBatchId(row) {
+  const id = row.issueBatchId ?? issueBatchId.value;
+  return id != null && id !== "" ? String(id) : "—";
+}
+function formatActivationTime(row) {
+  const t = row.activationTime || row.activateTime || row.bindTime;
+  return t != null && t !== "" ? String(t) : "—";
+}
+function onRouteQueryChange() {
+  initFromRoute();
+  if (activityId.value && hasBatchId.value) {
+    searchForm.pageNumber = 1;
+    loadList();
+  }
+}
+function initFromRoute() {
+  const q = route.query || {};
+  activityId.value = (q.activityId && String(q.activityId)) || "";
+  createBatchId.value = (q.createBatchId && String(q.createBatchId)) || "";
+  issueBatchId.value = (q.issueBatchId && String(q.issueBatchId)) || "";
+  giftCardName.value = (q.giftCardName && String(q.giftCardName)) || "";
+  batchRemark.value = (q.batchRemark && String(q.batchRemark)) || "";
+}
+function closePage() {
+  appStore.removeTag("gift-card-cash-batch-credentials");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+function formatMemberText(name, mobile) {
+  const n = name != null && name !== "" ? String(name) : "";
+  const m = mobile != null && mobile !== "" ? String(mobile) : "";
+  if (n && m) {
+    return `${n} / ${m}`;
+  }
+  return n || m || "—";
+}
+function formatIssueMember(row) {
+  return formatMemberText(
+    row.issueMemberNickName ||
+      row.issueMemberName ||
+      row.exchangeMemberNickName ||
+      row.exchangeMemberName ||
+      row.memberNickName,
+    row.issueMemberMobile || row.exchangeMemberMobile || row.memberMobile
+  );
+}
+function formatActivationMember(row) {
+  return formatMemberText(
+    row.activationMemberNickName ||
+      row.activationMemberName ||
+      row.activateMemberNickName ||
+      row.activateMemberName,
+    row.activationMemberMobile || row.activateMemberMobile
+  );
+}
+function onLifecycleTab(key) {
+  if (lifecycleTab.value === key) {
+    return;
+  }
+  lifecycleTab.value = key;
+  searchForm.pageNumber = 1;
+  loadList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  loadList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  loadList();
+}
+function formatDayStart(d) {
+  if (!d) {
+    return "";
+  }
+  const x = d instanceof Date ? d : new Date(d);
+  if (Number.isNaN(x.getTime())) {
+    return "";
+  }
+  const y = x.getFullYear();
+  const m = String(x.getMonth() + 1).padStart(2, "0");
+  const day = String(x.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day} 00:00:00`;
+}
+function formatDayEnd(d) {
+  if (!d) {
+    return "";
+  }
+  const x = d instanceof Date ? d : new Date(d);
+  if (Number.isNaN(x.getTime())) {
+    return "";
+  }
+  const y = x.getFullYear();
+  const m = String(x.getMonth() + 1).padStart(2, "0");
+  const day = String(x.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day} 23:59:59`;
+}
+function appendMemberSearch(params, kind, field, keyword) {
+  const kw = (keyword || "").trim();
+  if (!kw) {
+    return;
+  }
+  if (kind === "exchange") {
+    if (field === "mobile") {
+      params.exchangeMemberMobile = kw;
+    } else {
+      params.exchangeMemberNickName = kw;
     }
-  },
-  watch: {
-    "$route.query.createBatchId"() {
-      this.onRouteQueryChange();
-    },
-    "$route.query.issueBatchId"() {
-      this.onRouteQueryChange();
-    },
-    "$route.query.activityId"() {
-      this.onRouteQueryChange();
-    },
-  },
-  methods: {
-    formatPrice(value) {
-      if (value === null || value === undefined || value === "") {
-        return "—";
+  } else if (field === "mobile") {
+    params.activationMemberMobile = kw;
+  } else {
+    params.activationMemberNickName = kw;
+  }
+}
+function appendDateRange(params, kind, range) {
+  if (!range || !range[0] || !range[1]) {
+    return;
+  }
+  const start = formatDayStart(range[0]);
+  const end = formatDayEnd(range[1]);
+  if (kind === "exchange") {
+    if (start) {
+      params.exchangeTimeStart = start;
+    }
+    if (end) {
+      params.exchangeTimeEnd = end;
+    }
+  } else {
+    if (start) {
+      params.activationTimeStart = start;
+    }
+    if (end) {
+      params.activationTimeEnd = end;
+    }
+  }
+}
+function loadList() {
+  if (!activityId.value || !hasBatchId.value) {
+    return;
+  }
+  loading.value = true;
+  const params = {
+    activityId: activityId.value,
+    pageNumber: searchForm.pageNumber,
+    pageSize: searchForm.pageSize,
+    sort: searchForm.sort,
+    order: searchForm.order,
+  };
+  if (isIssueBatchMode.value) {
+    params.issueBatchId = issueBatchId.value;
+  } else {
+    params.createBatchId = createBatchId.value;
+  }
+  const tabCfg = statusTabList.value.find((t) => t.key === lifecycleTab.value);
+  if (tabCfg && tabCfg.status) {
+    params.status = tabCfg.status;
+  }
+  const cardNo = (searchForm.cardNo || "").trim();
+  if (cardNo) {
+    params.cardNo = cardNo;
+  }
+  appendMemberSearch(
+    params,
+    "exchange",
+    searchForm.redeemMemberField,
+    searchForm.redeemMemberKeyword
+  );
+  appendMemberSearch(
+    params,
+    "activation",
+    searchForm.activateMemberField,
+    searchForm.activateMemberKeyword
+  );
+  appendDateRange(params, "exchange", redeemDateRange.value);
+  appendDateRange(params, "activation", activateDateRange.value);
+  getGiftCardCashCredentialPage(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      return this.$filters.unitPrice(value, "￥");
-    },
-    formatStatus(status) {
-      return STATUS_LABEL[status] || status || "—";
-    },
-    formatIssueStatus(status) {
-      return ISSUE_STATUS_LABEL[status] || status || "—";
-    },
-    formatIssueBatchId(row) {
-      const id = row.issueBatchId ?? this.issueBatchId;
-      return id != null && id !== "" ? String(id) : "—";
-    },
-    formatActivationTime(row) {
-      const t = row.activationTime || row.activateTime || row.bindTime;
-      return t != null && t !== "" ? String(t) : "—";
-    },
-    onRouteQueryChange() {
-      this.initFromRoute();
-      if (this.activityId && this.hasBatchId) {
-        this.searchForm.pageNumber = 1;
-        this.loadList();
-      }
-    },
-    initFromRoute() {
-      const q = this.$route.query || {};
-      this.activityId = (q.activityId && String(q.activityId)) || "";
-      this.createBatchId = (q.createBatchId && String(q.createBatchId)) || "";
-      this.issueBatchId = (q.issueBatchId && String(q.issueBatchId)) || "";
-      this.giftCardName = (q.giftCardName && String(q.giftCardName)) || "";
-      this.batchRemark = (q.batchRemark && String(q.batchRemark)) || "";
-    },
-    closePage() {
-      this.$store.commit("removeTag", "gift-card-cash-batch-credentials");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    formatMemberText(name, mobile) {
-      const n = name != null && name !== "" ? String(name) : "";
-      const m = mobile != null && mobile !== "" ? String(mobile) : "";
-      if (n && m) {
-        return `${n} / ${m}`;
-      }
-      return n || m || "—";
-    },
-    formatIssueMember(row) {
-      return this.formatMemberText(
-        row.issueMemberNickName ||
-          row.issueMemberName ||
-          row.exchangeMemberNickName ||
-          row.exchangeMemberName ||
-          row.memberNickName,
-        row.issueMemberMobile || row.exchangeMemberMobile || row.memberMobile
-      );
-    },
-    formatActivationMember(row) {
-      return this.formatMemberText(
-        row.activationMemberNickName ||
-          row.activationMemberName ||
-          row.activateMemberNickName ||
-          row.activateMemberName,
-        row.activationMemberMobile || row.activateMemberMobile
-      );
-    },
-    onLifecycleTab(key) {
-      if (this.lifecycleTab === key) {
-        return;
-      }
-      this.lifecycleTab = key;
-      this.searchForm.pageNumber = 1;
-      this.loadList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.loadList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.loadList();
-    },
-    formatDayStart(d) {
-      if (!d) {
-        return "";
-      }
-      const x = d instanceof Date ? d : new Date(d);
-      if (Number.isNaN(x.getTime())) {
-        return "";
-      }
-      const y = x.getFullYear();
-      const m = String(x.getMonth() + 1).padStart(2, "0");
-      const day = String(x.getDate()).padStart(2, "0");
-      return `${y}-${m}-${day} 00:00:00`;
-    },
-    formatDayEnd(d) {
-      if (!d) {
-        return "";
-      }
-      const x = d instanceof Date ? d : new Date(d);
-      if (Number.isNaN(x.getTime())) {
-        return "";
-      }
-      const y = x.getFullYear();
-      const m = String(x.getMonth() + 1).padStart(2, "0");
-      const day = String(x.getDate()).padStart(2, "0");
-      return `${y}-${m}-${day} 23:59:59`;
-    },
-    appendMemberSearch(params, kind, field, keyword) {
-      const kw = (keyword || "").trim();
-      if (!kw) {
-        return;
-      }
-      if (kind === "exchange") {
-        if (field === "mobile") {
-          params.exchangeMemberMobile = kw;
-        } else {
-          params.exchangeMemberNickName = kw;
-        }
-      } else if (field === "mobile") {
-        params.activationMemberMobile = kw;
-      } else {
-        params.activationMemberNickName = kw;
-      }
-    },
-    appendDateRange(params, kind, range) {
-      if (!range || !range[0] || !range[1]) {
-        return;
-      }
-      const start = this.formatDayStart(range[0]);
-      const end = this.formatDayEnd(range[1]);
-      if (kind === "exchange") {
-        if (start) {
-          params.exchangeTimeStart = start;
-        }
-        if (end) {
-          params.exchangeTimeEnd = end;
-        }
-      } else {
-        if (start) {
-          params.activationTimeStart = start;
-        }
-        if (end) {
-          params.activationTimeEnd = end;
-        }
-      }
-    },
-    loadList() {
-      if (!this.activityId || !this.hasBatchId) {
-        return;
-      }
-      this.loading = true;
-      const params = {
-        activityId: this.activityId,
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-        sort: this.searchForm.sort,
-        order: this.searchForm.order,
-      };
-      if (this.isIssueBatchMode) {
-        params.issueBatchId = this.issueBatchId;
-      } else {
-        params.createBatchId = this.createBatchId;
-      }
-      const tabCfg = this.statusTabList.find((t) => t.key === this.lifecycleTab);
-      if (tabCfg && tabCfg.status) {
-        params.status = tabCfg.status;
-      }
-      const cardNo = (this.searchForm.cardNo || "").trim();
-      if (cardNo) {
-        params.cardNo = cardNo;
-      }
-      this.appendMemberSearch(
-        params,
-        "exchange",
-        this.searchForm.redeemMemberField,
-        this.searchForm.redeemMemberKeyword
-      );
-      this.appendMemberSearch(
-        params,
-        "activation",
-        this.searchForm.activateMemberField,
-        this.searchForm.activateMemberKeyword
-      );
-      this.appendDateRange(params, "exchange", this.redeemDateRange);
-      this.appendDateRange(params, "activation", this.activateDateRange);
-      getGiftCardCashCredentialPage(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue b/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
index d9712d7bd..b287a40ec 100644
--- a/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
+++ b/manager/src/views/promotions/gift-card-cash/gift-card-cash-records.vue
@@ -350,403 +350,441 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getGiftCardCashCreateBatchPage,
   getGiftCardCashIssueBatchPage,
   getGiftCardCashUsageRecordPage,
 } from "@/api/promotion";
+import config from "@/config";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "GiftCardCashRecords",
-  data() {
-    return {
-      activeTab: "createBatch",
-      activityId: "",
-      giftCardName: "",
-      createLoading: false,
-      createTotal: 0,
-      createData: [],
-      createSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        cardNo: "",
-        createBatchId: "",
-        giftCardName: "",
-        createUserName: "",
-        createTimeRange: [],
-        expireTimeRange: [],
-      },
-      issueLoading: false,
-      issueTotal: 0,
-      issueData: [],
-      issueSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        cardNo: "",
-        issueBatchId: "",
-        giftCardName: "",
-        issueUserName: "",
-        createTimeRange: [],
-        expireTimeRange: [],
-      },
-      usageLoading: false,
-      usageTotal: 0,
-      usageData: [],
-      usageSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        orderSn: "",
-        memberName: "",
-        cardNo: "",
-        transactionType: "",
-        transactionTimeRange: [],
-      },
-    };
-  },
-  mounted() {
-    this.initFromRoute();
-    if (this.activityId) {
-      this.loadCreateBatchList();
+defineOptions({ name: "GiftCardCashRecords" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const activeTab = ref("createBatch");
+const activityId = ref("");
+const giftCardName = ref("");
+const createLoading = ref(false);
+const createTotal = ref(0);
+const createData = ref([]);
+const createSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  cardNo: "",
+  createBatchId: "",
+  giftCardName: "",
+  createUserName: "",
+  createTimeRange: [],
+  expireTimeRange: [],
+});
+const issueLoading = ref(false);
+const issueTotal = ref(0);
+const issueData = ref([]);
+const issueSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  cardNo: "",
+  issueBatchId: "",
+  giftCardName: "",
+  issueUserName: "",
+  createTimeRange: [],
+  expireTimeRange: [],
+});
+const usageLoading = ref(false);
+const usageTotal = ref(0);
+const usageData = ref([]);
+const usageSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  orderSn: "",
+  memberName: "",
+  cardNo: "",
+  transactionType: "",
+  transactionTimeRange: [],
+});
+
+function hasValue(v) {
+  return v !== null && v !== undefined && v !== "";
+}
+
+function formatText(v) {
+  return hasValue(v) ? String(v) : "-";
+}
+
+function formatCreateBatchId(row) {
+  const id = row.createBatchId ?? row.id;
+  return formatText(id);
+}
+
+function formatIssueBatchId(row) {
+  const id = row.issueBatchId ?? row.id;
+  return formatText(id);
+}
+
+function formatGiftCardName(name) {
+  return formatText(name ?? giftCardName.value);
+}
+
+function formatQuantity(v) {
+  return hasValue(v) ? String(v) : "-";
+}
+
+function formatExpireTime(v) {
+  return hasValue(v) ? String(v) : "长期有效";
+}
+
+function formatUsageGiftCardName(row) {
+  return row.giftCardName || giftCardName.value || "-";
+}
+
+function formatUsageFaceValue(row) {
+  const faceValue = row.faceValue;
+  return hasValue(faceValue) ? String(faceValue) : "-";
+}
+
+function formatTransactionTime(row) {
+  const t = row.transactionTime || row.createTime;
+  return formatText(t);
+}
+
+function initFromRoute() {
+  activityId.value = (route.query.activityId && String(route.query.activityId)) || "";
+  giftCardName.value = (route.query.giftCardName && String(route.query.giftCardName)) || "";
+}
+
+function closePage() {
+  appStore.removeTag("gift-card-cash-records");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+function goBatchCredentials(row) {
+  const batchId = row.createBatchId != null && row.createBatchId !== "" ? row.createBatchId : row.id;
+  router.push({
+    name: "gift-card-cash-batch-credentials",
+    query: {
+      activityId: activityId.value,
+      createBatchId: batchId,
+      giftCardName: row.giftCardName || giftCardName.value || "",
+      batchRemark: row.batchRemark || "",
+    },
+  });
+}
+
+function goIssueBatchCredentials(row) {
+  const batchId = row.issueBatchId != null && row.issueBatchId !== "" ? row.issueBatchId : row.id;
+  router.push({
+    name: "gift-card-cash-batch-credentials",
+    query: {
+      activityId: activityId.value,
+      issueBatchId: batchId,
+      giftCardName: row.giftCardName || giftCardName.value || "",
+    },
+  });
+}
+
+function goOrderDetail(orderSn) {
+  router.push({
+    name: "order-detail",
+    query: { sn: orderSn },
+  });
+}
+
+function onTabClick(tab) {
+  const name = tab.paneName;
+  if (name === "createBatch" && activityId.value) {
+    loadCreateBatchList();
+  }
+  if (name === "issue" && activityId.value) {
+    loadIssueBatchList();
+  }
+  if (name === "usage" && activityId.value) {
+    loadUsageRecordList();
+  }
+}
+
+function handleCreateSearch() {
+  createSearchForm.pageNumber = 1;
+  loadCreateBatchList();
+}
+
+function toApiDateTimeBoundary(val, endOfDay) {
+  const dt = val instanceof Date ? val : new Date(val);
+  if (Number.isNaN(dt.getTime())) {
+    return null;
+  }
+  const y = dt.getFullYear();
+  const m = String(dt.getMonth() + 1).padStart(2, "0");
+  const d = String(dt.getDate()).padStart(2, "0");
+  return endOfDay ? `${y}-${m}-${d} 23:59:59` : `${y}-${m}-${d} 00:00:00`;
+}
+
+function appendDateRangeToParams(params, range, startKey, endKey) {
+  if (!Array.isArray(range) || range.length < 2 || !range[0] || !range[1]) {
+    return;
+  }
+  const start = toApiDateTimeBoundary(range[0], false);
+  const end = toApiDateTimeBoundary(range[1], true);
+  if (start) {
+    params[startKey] = start;
+  }
+  if (end) {
+    params[endKey] = end;
+  }
+}
+
+function appendTrimmedParam(params, key, value) {
+  const text = (value || "").trim();
+  if (text) {
+    params[key] = text;
+  }
+}
+
+function createChangePage(v) {
+  createSearchForm.pageNumber = v;
+  loadCreateBatchList();
+}
+
+function createChangePageSize(v) {
+  createSearchForm.pageNumber = 1;
+  createSearchForm.pageSize = v;
+  loadCreateBatchList();
+}
+
+function loadCreateBatchList() {
+  if (!activityId.value) {
+    return;
+  }
+  createLoading.value = true;
+  const params = {
+    activityId: activityId.value,
+    pageNumber: createSearchForm.pageNumber,
+    pageSize: createSearchForm.pageSize,
+    sort: createSearchForm.sort,
+    order: createSearchForm.order,
+  };
+  const cardNo = (createSearchForm.cardNo || "").trim();
+  if (cardNo) {
+    params.cardNo = cardNo;
+  }
+  const createBatchId = (createSearchForm.createBatchId || "").trim();
+  if (createBatchId) {
+    params.createBatchId = createBatchId;
+  }
+  const giftCardNameParam = (createSearchForm.giftCardName || "").trim();
+  if (giftCardNameParam) {
+    params.giftCardName = giftCardNameParam;
+  }
+  const createUserName = (createSearchForm.createUserName || "").trim();
+  if (createUserName) {
+    params.createUserName = createUserName;
+  }
+  appendDateRangeToParams(
+    params,
+    createSearchForm.createTimeRange,
+    "createTimeStart",
+    "createTimeEnd"
+  );
+  appendDateRangeToParams(
+    params,
+    createSearchForm.expireTimeRange,
+    "expireTimeStart",
+    "expireTimeEnd"
+  );
+  getGiftCardCashCreateBatchPage(params)
+    .then((res) => {
+      createLoading.value = false;
+      if (res.success && res.result) {
+        createData.value = res.result.records || [];
+        createTotal.value = res.result.total || 0;
+      }
+    })
+    .catch(() => {
+      createLoading.value = false;
+    });
+}
+
+function issueChangePage(v) {
+  issueSearchForm.pageNumber = v;
+  loadIssueBatchList();
+}
+
+function issueChangePageSize(v) {
+  issueSearchForm.pageNumber = 1;
+  issueSearchForm.pageSize = v;
+  loadIssueBatchList();
+}
+
+function handleIssueSearch() {
+  issueSearchForm.pageNumber = 1;
+  loadIssueBatchList();
+}
+
+function loadIssueBatchList() {
+  if (!activityId.value) {
+    return;
+  }
+  issueLoading.value = true;
+  const params = {
+    activityId: activityId.value,
+    pageNumber: issueSearchForm.pageNumber,
+    pageSize: issueSearchForm.pageSize,
+    sort: issueSearchForm.sort,
+    order: issueSearchForm.order,
+  };
+  ["cardNo", "issueBatchId", "giftCardName", "issueUserName"].forEach((key) => {
+    appendTrimmedParam(params, key, issueSearchForm[key]);
+  });
+  appendDateRangeToParams(
+    params,
+    issueSearchForm.createTimeRange,
+    "createTimeStart",
+    "createTimeEnd"
+  );
+  appendDateRangeToParams(
+    params,
+    issueSearchForm.expireTimeRange,
+    "expireTimeStart",
+    "expireTimeEnd"
+  );
+  getGiftCardCashIssueBatchPage(params)
+    .then((res) => {
+      issueLoading.value = false;
+      if (res.success && res.result) {
+        const r = res.result;
+        issueData.value = r.records || r.list || r.recordsList || [];
+        issueTotal.value = r.total != null ? r.total : r.totalCount || 0;
+      }
+    })
+    .catch(() => {
+      issueLoading.value = false;
+    });
+}
+
+function handleUsageSearch() {
+  usageSearchForm.pageNumber = 1;
+  loadUsageRecordList();
+}
+
+function usageChangePage(v) {
+  usageSearchForm.pageNumber = v;
+  loadUsageRecordList();
+}
+
+function usageChangePageSize(v) {
+  usageSearchForm.pageNumber = 1;
+  usageSearchForm.pageSize = v;
+  loadUsageRecordList();
+}
+
+function formatUsageFlowType(type) {
+  const map = {
+    INCREASE: "增加",
+    DECREASE: "减少",
+  };
+  return map[type] || type || "-";
+}
+
+function formatUsageBizType(type) {
+  const map = {
+    ORDER_DEDUCT: "订单抵扣",
+    ORDER_REFUND: "订单退款",
+    ORDER_CANCEL: "订单取消",
+    CARD_ACTIVATE: "卡激活",
+  };
+  return map[type] || type || "-";
+}
+
+function getUsageAmountDisplay(row) {
+  const raw =
+    row.changeAmount != null && row.changeAmount !== "" ? row.changeAmount : row.deductAmount;
+  if (raw === null || raw === undefined || raw === "") {
+    return null;
+  }
+  const num = Number(raw);
+  if (Number.isNaN(num)) {
+    return null;
+  }
+  const txType = row.transactionType || row.bizType;
+  let color = config.mainColor;
+  if (txType === "ORDER_DEDUCT") {
+    color = "red";
+  } else if (txType === "ORDER_REFUND") {
+    color = "green";
+  }
+  return { amount: Math.abs(num), color };
+}
+
+function loadUsageRecordList() {
+  if (!activityId.value) {
+    return;
+  }
+  usageLoading.value = true;
+  const params = {
+    pageNumber: usageSearchForm.pageNumber,
+    pageSize: usageSearchForm.pageSize,
+    sort: usageSearchForm.sort,
+    order: usageSearchForm.order,
+  };
+  ["orderSn", "memberName", "cardNo", "transactionType"].forEach((key) => {
+    appendTrimmedParam(params, key, usageSearchForm[key]);
+  });
+  appendDateRangeToParams(
+    params,
+    usageSearchForm.transactionTimeRange,
+    "transactionTimeStart",
+    "transactionTimeEnd"
+  );
+  getGiftCardCashUsageRecordPage(params)
+    .then((res) => {
+      usageLoading.value = false;
+      if (res.success && res.result) {
+        const r = res.result;
+        usageData.value = r.records || r.list || [];
+        usageTotal.value = r.total != null ? r.total : r.totalCount || 0;
+      }
+    })
+    .catch(() => {
+      usageLoading.value = false;
+    });
+}
+
+onMounted(() => {
+  initFromRoute();
+  if (activityId.value) {
+    loadCreateBatchList();
+  }
+});
+
+watch(
+  () => route.query.activityId,
+  (id) => {
+    initFromRoute();
+    if (id && activeTab.value === "createBatch") {
+      loadCreateBatchList();
     }
-  },
-  watch: {
-    "$route.query.activityId"(id) {
-      this.initFromRoute();
-      if (id && this.activeTab === "createBatch") {
-        this.loadCreateBatchList();
-      }
-      if (id && this.activeTab === "issue") {
-        this.issueSearchForm.pageNumber = 1;
-        this.loadIssueBatchList();
-      }
-      if (id && this.activeTab === "usage") {
-        this.usageSearchForm.pageNumber = 1;
-        this.loadUsageRecordList();
-      }
-    },
-  },
-  methods: {
-    hasValue(v) {
-      return v !== null && v !== undefined && v !== "";
-    },
-    formatText(v) {
-      return this.hasValue(v) ? String(v) : "-";
-    },
-    formatCreateBatchId(row) {
-      const id = row.createBatchId ?? row.id;
-      return this.formatText(id);
-    },
-    formatIssueBatchId(row) {
-      const id = row.issueBatchId ?? row.id;
-      return this.formatText(id);
-    },
-    formatGiftCardName(name) {
-      return this.formatText(name ?? this.giftCardName);
-    },
-    formatQuantity(v) {
-      return this.hasValue(v) ? String(v) : "-";
-    },
-    formatExpireTime(v) {
-      return this.hasValue(v) ? String(v) : "长期有效";
-    },
-    formatUsageGiftCardName(row) {
-      return row.giftCardName || this.giftCardName || "-";
-    },
-    formatUsageFaceValue(row) {
-      const faceValue = row.faceValue;
-      return this.hasValue(faceValue) ? String(faceValue) : "-";
-    },
-    formatTransactionTime(row) {
-      const t = row.transactionTime || row.createTime;
-      return this.formatText(t);
-    },
-    initFromRoute() {
-      this.activityId = (this.$route.query.activityId && String(this.$route.query.activityId)) || "";
-      this.giftCardName = (this.$route.query.giftCardName && String(this.$route.query.giftCardName)) || "";
-    },
-    closePage() {
-      this.$store.commit("removeTag", "gift-card-cash-records");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    goBatchCredentials(row) {
-      const batchId = row.createBatchId != null && row.createBatchId !== "" ? row.createBatchId : row.id;
-      this.$router.push({
-        name: "gift-card-cash-batch-credentials",
-        query: {
-          activityId: this.activityId,
-          createBatchId: batchId,
-          giftCardName: row.giftCardName || this.giftCardName || "",
-          batchRemark: row.batchRemark || "",
-        },
-      });
-    },
-    goIssueBatchCredentials(row) {
-      const batchId = row.issueBatchId != null && row.issueBatchId !== "" ? row.issueBatchId : row.id;
-      this.$router.push({
-        name: "gift-card-cash-batch-credentials",
-        query: {
-          activityId: this.activityId,
-          issueBatchId: batchId,
-          giftCardName: row.giftCardName || this.giftCardName || "",
-        },
-      });
-    },
-    goOrderDetail(orderSn) {
-      this.$router.push({
-        name: "order-detail",
-        query: { sn: orderSn },
-      });
-    },
-    onTabClick(tab) {
-      const name = tab.paneName;
-      if (name === "createBatch" && this.activityId) {
-        this.loadCreateBatchList();
-      }
-      if (name === "issue" && this.activityId) {
-        this.loadIssueBatchList();
-      }
-      if (name === "usage" && this.activityId) {
-        this.loadUsageRecordList();
-      }
-    },
-    handleCreateSearch() {
-      this.createSearchForm.pageNumber = 1;
-      this.loadCreateBatchList();
-    },
-    toApiDateTimeBoundary(val, endOfDay) {
-      const dt = val instanceof Date ? val : new Date(val);
-      if (Number.isNaN(dt.getTime())) {
-        return null;
-      }
-      const y = dt.getFullYear();
-      const m = String(dt.getMonth() + 1).padStart(2, "0");
-      const d = String(dt.getDate()).padStart(2, "0");
-      return endOfDay ? `${y}-${m}-${d} 23:59:59` : `${y}-${m}-${d} 00:00:00`;
-    },
-    appendDateRangeToParams(params, range, startKey, endKey) {
-      if (!Array.isArray(range) || range.length < 2 || !range[0] || !range[1]) {
-        return;
-      }
-      const start = this.toApiDateTimeBoundary(range[0], false);
-      const end = this.toApiDateTimeBoundary(range[1], true);
-      if (start) {
-        params[startKey] = start;
-      }
-      if (end) {
-        params[endKey] = end;
-      }
-    },
-    appendTrimmedParam(params, key, value) {
-      const text = (value || "").trim();
-      if (text) {
-        params[key] = text;
-      }
-    },
-    createChangePage(v) {
-      this.createSearchForm.pageNumber = v;
-      this.loadCreateBatchList();
-    },
-    createChangePageSize(v) {
-      this.createSearchForm.pageNumber = 1;
-      this.createSearchForm.pageSize = v;
-      this.loadCreateBatchList();
-    },
-    loadCreateBatchList() {
-      if (!this.activityId) {
-        return;
-      }
-      this.createLoading = true;
-      const params = {
-        activityId: this.activityId,
-        pageNumber: this.createSearchForm.pageNumber,
-        pageSize: this.createSearchForm.pageSize,
-        sort: this.createSearchForm.sort,
-        order: this.createSearchForm.order,
-      };
-      const cardNo = (this.createSearchForm.cardNo || "").trim();
-      if (cardNo) {
-        params.cardNo = cardNo;
-      }
-      const createBatchId = (this.createSearchForm.createBatchId || "").trim();
-      if (createBatchId) {
-        params.createBatchId = createBatchId;
-      }
-      const giftCardName = (this.createSearchForm.giftCardName || "").trim();
-      if (giftCardName) {
-        params.giftCardName = giftCardName;
-      }
-      const createUserName = (this.createSearchForm.createUserName || "").trim();
-      if (createUserName) {
-        params.createUserName = createUserName;
-      }
-      this.appendDateRangeToParams(
-        params,
-        this.createSearchForm.createTimeRange,
-        "createTimeStart",
-        "createTimeEnd"
-      );
-      this.appendDateRangeToParams(
-        params,
-        this.createSearchForm.expireTimeRange,
-        "expireTimeStart",
-        "expireTimeEnd"
-      );
-      getGiftCardCashCreateBatchPage(params)
-        .then((res) => {
-          this.createLoading = false;
-          if (res.success && res.result) {
-            this.createData = res.result.records || [];
-            this.createTotal = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.createLoading = false;
-        });
-    },
-    issueChangePage(v) {
-      this.issueSearchForm.pageNumber = v;
-      this.loadIssueBatchList();
-    },
-    issueChangePageSize(v) {
-      this.issueSearchForm.pageNumber = 1;
-      this.issueSearchForm.pageSize = v;
-      this.loadIssueBatchList();
-    },
-    handleIssueSearch() {
-      this.issueSearchForm.pageNumber = 1;
-      this.loadIssueBatchList();
-    },
-    loadIssueBatchList() {
-      if (!this.activityId) {
-        return;
-      }
-      this.issueLoading = true;
-      const params = {
-        activityId: this.activityId,
-        pageNumber: this.issueSearchForm.pageNumber,
-        pageSize: this.issueSearchForm.pageSize,
-        sort: this.issueSearchForm.sort,
-        order: this.issueSearchForm.order,
-      };
-      ["cardNo", "issueBatchId", "giftCardName", "issueUserName"].forEach((key) => {
-        this.appendTrimmedParam(params, key, this.issueSearchForm[key]);
-      });
-      this.appendDateRangeToParams(
-        params,
-        this.issueSearchForm.createTimeRange,
-        "createTimeStart",
-        "createTimeEnd"
-      );
-      this.appendDateRangeToParams(
-        params,
-        this.issueSearchForm.expireTimeRange,
-        "expireTimeStart",
-        "expireTimeEnd"
-      );
-      getGiftCardCashIssueBatchPage(params)
-        .then((res) => {
-          this.issueLoading = false;
-          if (res.success && res.result) {
-            const r = res.result;
-            this.issueData = r.records || r.list || r.recordsList || [];
-            this.issueTotal = r.total != null ? r.total : r.totalCount || 0;
-          }
-        })
-        .catch(() => {
-          this.issueLoading = false;
-        });
-    },
-    handleUsageSearch() {
-      this.usageSearchForm.pageNumber = 1;
-      this.loadUsageRecordList();
-    },
-    usageChangePage(v) {
-      this.usageSearchForm.pageNumber = v;
-      this.loadUsageRecordList();
-    },
-    usageChangePageSize(v) {
-      this.usageSearchForm.pageNumber = 1;
-      this.usageSearchForm.pageSize = v;
-      this.loadUsageRecordList();
-    },
-    formatUsageFlowType(type) {
-      const map = {
-        INCREASE: "增加",
-        DECREASE: "减少",
-      };
-      return map[type] || type || "-";
-    },
-    formatUsageBizType(type) {
-      const map = {
-        ORDER_DEDUCT: "订单抵扣",
-        ORDER_REFUND: "订单退款",
-        ORDER_CANCEL: "订单取消",
-        CARD_ACTIVATE: "卡激活",
-      };
-      return map[type] || type || "-";
-    },
-    getUsageAmountDisplay(row) {
-      const raw =
-        row.changeAmount != null && row.changeAmount !== "" ? row.changeAmount : row.deductAmount;
-      if (raw === null || raw === undefined || raw === "") {
-        return null;
-      }
-      const num = Number(raw);
-      if (Number.isNaN(num)) {
-        return null;
-      }
-      const txType = row.transactionType || row.bizType;
-      let color = this.$mainColor;
-      if (txType === "ORDER_DEDUCT") {
-        color = "red";
-      } else if (txType === "ORDER_REFUND") {
-        color = "green";
-      }
-      return { amount: Math.abs(num), color };
-    },
-    loadUsageRecordList() {
-      if (!this.activityId) {
-        return;
-      }
-      this.usageLoading = true;
-      const params = {
-        pageNumber: this.usageSearchForm.pageNumber,
-        pageSize: this.usageSearchForm.pageSize,
-        sort: this.usageSearchForm.sort,
-        order: this.usageSearchForm.order,
-      };
-      ["orderSn", "memberName", "cardNo", "transactionType"].forEach((key) => {
-        this.appendTrimmedParam(params, key, this.usageSearchForm[key]);
-      });
-      this.appendDateRangeToParams(
-        params,
-        this.usageSearchForm.transactionTimeRange,
-        "transactionTimeStart",
-        "transactionTimeEnd"
-      );
-      getGiftCardCashUsageRecordPage(params)
-        .then((res) => {
-          this.usageLoading = false;
-          if (res.success && res.result) {
-            const r = res.result;
-            this.usageData = r.records || r.list || [];
-            this.usageTotal = r.total != null ? r.total : r.totalCount || 0;
-          }
-        })
-        .catch(() => {
-          this.usageLoading = false;
-        });
-    },
-  },
-};
+    if (id && activeTab.value === "issue") {
+      issueSearchForm.pageNumber = 1;
+      loadIssueBatchList();
+    }
+    if (id && activeTab.value === "usage") {
+      usageSearchForm.pageNumber = 1;
+      loadUsageRecordList();
+    }
+  }
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
index 5731fd558..3ce517fd9 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-add-goods.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <div class="form-item-view">
             <h4>商品信息</h4>
@@ -97,205 +97,216 @@
         </div>
       </el-form>
     </el-card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { saveKanJiaActivityGoods } from "@/api/promotion";
 import { regular } from "@/utils";
 import skuSelect from "@/components/lili-dialog";
 import { isECoupon } from "@/constants/goodsType";
+import { Message as $Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "add-kanjia-activity-goods",
-  components: {
-    skuSelect,
-  },
-  data() {
-    return {
-      modalType: 0,
-      form: {
-        promotionGoodsList: [],
-        rangeTime: [],
-      },
-      id: this.$route.query.id,
-      submitLoading: false,
-      selectedGoods: [],
-      promotionGoodsList: [],
-      formRule: {
-        promotionGoodsList: [
-          {
-            type: "array",
-            required: true,
-            min: 1,
-            message: "请至少选择一个商品",
-            trigger: "change",
-          },
-        ],
-        rangeTime: [
-          {
-            type: "array",
-            required: true,
-            message: "请选择活动时间",
-            trigger: "change",
-          },
-        ],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    if (this.id) {
-      this.getCoupon();
-      this.modalType = 1;
-    }
-  },
-  methods: {
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-        if (!this.form.promotionGoodsList.length) {
-          this.$Message.warning("请至少选择一个商品");
-          return;
-        }
+defineOptions({ name: "add-kanjia-activity-goods" });
 
-        const params = JSON.parse(JSON.stringify(this.form));
-        const [start, end] = this.form.rangeTime || [];
-        const startDate = start instanceof Date ? start : new Date(start);
-        const endDate = end instanceof Date ? end : new Date(end);
-        params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
-        params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
-        delete params.rangeTime;
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-        let checkResult = true;
-        this.form.promotionGoodsList.forEach((res) => {
-          const eCoupon = isECoupon(res.goodsType);
-          if (res.stock <= 0 || res.stock > res.quantity) {
-            checkResult = false;
-            this.$Message.error("活动库存不能为0且不能超过商品库存");
-            return;
-          }
-
-          if (!regular.money.test(res.settlementPrice)) {
-            checkResult = false;
-            this.$Message.error("结算价格金额格式不正确");
-            return;
-          }
-          if (
-            (eCoupon ? res.settlementPrice < 0 : res.settlementPrice <= 0) ||
-            res.settlementPrice > res.price
-          ) {
-            checkResult = false;
-            this.$Message.error(
-              eCoupon
-                ? "结算价格不能小于0且不能超过商品价格"
-                : "结算价格金额不能为0且不能超过商品价格"
-            );
-            return;
-          }
-          if (!regular.money.test(res.highestPrice)) {
-            checkResult = false;
-            this.$Message.error("最高可砍金额格式错误");
-            return;
-          }
-          if (res.highestPrice <= 0 || res.highestPrice > res.price) {
-            checkResult = false;
-            this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
-            return;
-          }
-          if (!regular.money.test(res.lowestPrice)) {
-            checkResult = false;
-            this.$Message.error("最低可砍金额格式错误");
-            return;
-          }
-          if (res.lowestPrice < 0 || (!eCoupon && res.lowestPrice <= 0) || res.lowestPrice > res.price) {
-            checkResult = false;
-            this.$Message.error(eCoupon ? "最低可砍金额不能小于0" : "最低可砍金额不能为0");
-            return;
-          }
-          if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
-            checkResult = false;
-            this.$Message.error("最低砍价金额不能大于最高砍价金额");
-            return;
-          }
-        });
-
-        if (!checkResult) {
-          return;
-        }
-        this.submitLoading = true;
-        saveKanJiaActivityGoods(params).then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success(
-              this.modalType === 1 ? "砍价活动修改成功" : "砍价活动添加成功"
-            );
-            this.closeCurrentPage();
-          }
-        });
-      });
+const modalType = ref(0);
+const form = reactive({
+  promotionGoodsList: [],
+  rangeTime: [],
+});
+const id = ref(route.query.id);
+const submitLoading = ref(false);
+const selectedGoods = ref([]);
+const promotionGoodsList = ref([]);
+const formRule = {
+  promotionGoodsList: [
+    {
+      type: "array",
+      required: true,
+      min: 1,
+      message: "请至少选择一个商品",
+      trigger: "change",
     },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-kan-jia-goods");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    openSkuList() {
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    changeSelect(e) {
-      this.selectedGoods = e;
-    },
-    delGoods(index) {
-      this.form.promotionGoodsList.splice(index, 1);
-      this.touchPromotionGoodsValidate();
-    },
-    touchPromotionGoodsValidate() {
-      this.$nextTick(() => {
-        const form = this.$refs.form;
-        if (form && typeof form.validateField === "function") {
-          form.validateField("promotionGoodsList", () => {});
-        }
-      });
-    },
-    selectedGoodsData(item) {
-      let list = [];
-      item.forEach((e) => {
-        list.push({
-          settlementPrice: e.settlementPrice || 0,
-          purchasePrice: 0,
-          lowestPrice: e.lowestPrice || 0,
-          highestPrice: e.highestPrice || 0,
-          stock: e.stock || 0,
-          goodsName: e.goodsName,
-          price: e.price,
-          originalPrice: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          storeName: e.storeName,
-          skuId: e.id,
-          goodsId: e.goodsId,
-          thumbnail: e.thumbnail || "",
-          goodsType: e.goodsType,
-        });
-      });
-      this.form.promotionGoodsList = list;
-      this.touchPromotionGoodsValidate();
+  ],
+  rangeTime: [
+    {
+      type: "array",
+      required: true,
+      message: "请选择活动时间",
+      trigger: "change",
     },
+  ],
+};
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+const formRef = ref(null);
+const skuSelectRef = ref(null);
+
+onMounted(async () => {
+  if (id.value) {
+    // 历史遗留：原代码调用了未定义的 getCoupon 方法，此处原样保留
+    getCoupon();
+    modalType.value = 1;
+  }
+});
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    if (!form.promotionGoodsList.length) {
+      $Message.warning("请至少选择一个商品");
+      return;
+    }
+
+    const params = JSON.parse(JSON.stringify(form));
+    const [start, end] = form.rangeTime || [];
+    const startDate = start instanceof Date ? start : new Date(start);
+    const endDate = end instanceof Date ? end : new Date(end);
+    params.startTime = unixToDate(startDate.getTime() / 1000);
+    params.endTime = unixToDate(endDate.getTime() / 1000);
+    delete params.rangeTime;
+
+    let checkResult = true;
+    form.promotionGoodsList.forEach((res) => {
+      const eCoupon = isECoupon(res.goodsType);
+      if (res.stock <= 0 || res.stock > res.quantity) {
+        checkResult = false;
+        $Message.error("活动库存不能为0且不能超过商品库存");
+        return;
+      }
+
+      if (!regular.money.test(res.settlementPrice)) {
+        checkResult = false;
+        $Message.error("结算价格金额格式不正确");
+        return;
+      }
+      if (
+        (eCoupon ? res.settlementPrice < 0 : res.settlementPrice <= 0) ||
+        res.settlementPrice > res.price
+      ) {
+        checkResult = false;
+        $Message.error(
+          eCoupon
+            ? "结算价格不能小于0且不能超过商品价格"
+            : "结算价格金额不能为0且不能超过商品价格"
+        );
+        return;
+      }
+      if (!regular.money.test(res.highestPrice)) {
+        checkResult = false;
+        $Message.error("最高可砍金额格式错误");
+        return;
+      }
+      if (res.highestPrice <= 0 || res.highestPrice > res.price) {
+        checkResult = false;
+        $Message.error("最高可砍金额不能为0且不能超过商品价格");
+        return;
+      }
+      if (!regular.money.test(res.lowestPrice)) {
+        checkResult = false;
+        $Message.error("最低可砍金额格式错误");
+        return;
+      }
+      if (res.lowestPrice < 0 || (!eCoupon && res.lowestPrice <= 0) || res.lowestPrice > res.price) {
+        checkResult = false;
+        $Message.error(eCoupon ? "最低可砍金额不能小于0" : "最低可砍金额不能为0");
+        return;
+      }
+      if (parseInt(res.lowestPrice) > parseInt(res.highestPrice)) {
+        checkResult = false;
+        $Message.error("最低砍价金额不能大于最高砍价金额");
+        return;
+      }
+    });
+
+    if (!checkResult) {
+      return;
+    }
+    submitLoading.value = true;
+    saveKanJiaActivityGoods(params).then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        $Message.success(
+          modalType.value === 1 ? "砍价活动修改成功" : "砍价活动添加成功"
+        );
+        closeCurrentPage();
+      }
+    });
+  });
+}
+
+function closeCurrentPage() {
+  appStore.removeTag("add-kan-jia-goods");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+function openSkuList() {
+  skuSelectRef.value.open("goods");
+  let data = JSON.parse(JSON.stringify(form.promotionGoodsList));
+  data.forEach((e) => {
+    e.id = e.skuId;
+  });
+  skuSelectRef.value.goodsData = data;
+}
+
+function changeSelect(e) {
+  selectedGoods.value = e;
+}
+
+function delGoods(index) {
+  form.promotionGoodsList.splice(index, 1);
+  touchPromotionGoodsValidate();
+}
+
+function touchPromotionGoodsValidate() {
+  nextTick(() => {
+    const form = formRef.value;
+    if (form && typeof form.validateField === "function") {
+      form.validateField("promotionGoodsList", () => {});
+    }
+  });
+}
+
+function selectedGoodsData(item) {
+  let list = [];
+  item.forEach((e) => {
+    list.push({
+      settlementPrice: e.settlementPrice || 0,
+      purchasePrice: 0,
+      lowestPrice: e.lowestPrice || 0,
+      highestPrice: e.highestPrice || 0,
+      stock: e.stock || 0,
+      goodsName: e.goodsName,
+      price: e.price,
+      originalPrice: e.price,
+      quantity: e.quantity,
+      storeId: e.storeId,
+      storeName: e.storeName,
+      skuId: e.id,
+      goodsId: e.goodsId,
+      thumbnail: e.thumbnail || "",
+      goodsType: e.goodsType,
+    });
+  });
+  form.promotionGoodsList = list;
+  touchPromotionGoodsValidate();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
index ad4328472..225ba6cd3 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-edit-goods.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <div class="form-item-view">
             <h4>商品信息</h4>
@@ -87,183 +87,192 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getKanJiaActivityGoodsById, editKanJiaActivityGoods } from "@/api/promotion";
 import { regular } from "@/utils";
 import { isECoupon } from "@/constants/goodsType";
+import { Message as $Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "editKanjiaActivityGoods",
-  data() {
-    const checkSettlementPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("结算金额不能为空"));
-      }
-      if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("结算金额设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    const checkLowestPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("最低可砍金额不能为空"));
-      }
-      if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("最低可砍金额设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    const checkHighestPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("最高可砍金额不能为空"));
-      }
-      if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("最高可砍金额设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      modalType: 0,
-      form: {
-        purchasePrice: 0,
-        goodsSku: {},
-        rangeTime: [],
-      },
-      id: this.$route.query.id,
-      onlyView: this.$route.query.onlyView,
-      submitLoading: false,
-      formRule: {
-        settlementPrice: [
-          { required: true, message: "请输入结算金额" },
-          { validator: checkSettlementPrice },
-        ],
-        lowestPrice: [
-          { required: true, message: "请输入最低可砍金额" },
-          { validator: checkLowestPrice },
-        ],
-        highestPrice: [
-          { required: true, message: "请输入最高可砍金额" },
-          { validator: checkHighestPrice },
-        ],
-        rangeTime: [
-          {
-            type: "array",
-            required: true,
-            message: "请选择活动时间",
-            trigger: "change",
-          },
-        ],
-        stock: [{ required: true, message: "请输入活动库存" }],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    if (this.id) {
-      this.getKanJiaActivityGoods();
-      this.modalType = 1;
-    }
-  },
-  methods: {
-    getKanJiaActivityGoods() {
-      getKanJiaActivityGoodsById(this.id).then((res) => {
-        this.form = res.result;
-        this.form.rangeTime = [res.result.startTime, res.result.endTime];
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) {
-          return;
-        }
-        const params = JSON.parse(JSON.stringify(this.form));
-        const [start, end] = this.form.rangeTime || [];
-        if (!start || !end) {
-          this.$Message.error("请选择活动时间");
-          return;
-        }
-        const startDate = start instanceof Date ? start : new Date(start);
-        const endDate = end instanceof Date ? end : new Date(end);
-        params.startTime = this.$filters.unixToDate(startDate.getTime() / 1000);
-        params.endTime = this.$filters.unixToDate(endDate.getTime() / 1000);
-        delete params.rangeTime;
-
-        const eCoupon = isECoupon(params.goodsType || params.goodsSku?.goodsType);
-
-        if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
-          this.$Message.error("活动库存不能为0且不能超过商品库存");
-          return;
-        }
-        if (!regular.money.test(params.settlementPrice)) {
-          this.$Message.error("结算价格金额格式不正确");
-          return;
-        }
-        if (
-          (eCoupon ? params.settlementPrice < 0 : params.settlementPrice <= 0) ||
-          params.settlementPrice > params.price
-        ) {
-          this.$Message.error(
-            eCoupon
-              ? "结算价格不能小于0且不能超过商品价格"
-              : "结算价格金额不能为0且不能超过商品价格"
-          );
-          return;
-        }
-        if (!regular.money.test(params.highestPrice)) {
-          this.$Message.error("最高可砍金额格式错误");
-          return;
-        }
-        if (params.highestPrice <= 0 || params.highestPrice > params.price) {
-          this.$Message.error("最高可砍金额不能为0且不能超过商品价格");
-          return;
-        }
-        if (!regular.money.test(params.lowestPrice)) {
-          this.$Message.error("最低可砍金额格式错误");
-          return;
-        }
-        if (
-          params.lowestPrice < 0 ||
-          (!eCoupon && params.lowestPrice <= 0) ||
-          params.lowestPrice > params.price
-        ) {
-          this.$Message.error(eCoupon ? "最低可砍金额不能小于0" : "最低可砍金额不能为0");
-          return;
-        }
-        if (params.lowestPrice > params.highestPrice) {
-          this.$Message.error("最低砍价金额不能大于最高砍价金额");
-          return;
-        }
-
-        this.submitLoading = true;
-        editKanJiaActivityGoods(params).then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success("砍价活动修改成功");
-            this.closeCurrentPage();
-          }
-        });
-      });
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-kan-jia-goods");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
+defineOptions({ name: "editKanjiaActivityGoods" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const checkSettlementPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("结算金额不能为空"));
+  }
+  if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("结算金额设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+const checkLowestPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("最低可砍金额不能为空"));
+  }
+  if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("最低可砍金额设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+const checkHighestPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("最高可砍金额不能为空"));
+  }
+  if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("最高可砍金额设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+
+const modalType = ref(0);
+const form = ref({
+  purchasePrice: 0,
+  goodsSku: {},
+  rangeTime: [],
+});
+const id = route.query.id;
+const onlyView = route.query.onlyView;
+const submitLoading = ref(false);
+const formRule = {
+  settlementPrice: [
+    { required: true, message: "请输入结算金额" },
+    { validator: checkSettlementPrice },
+  ],
+  lowestPrice: [
+    { required: true, message: "请输入最低可砍金额" },
+    { validator: checkLowestPrice },
+  ],
+  highestPrice: [
+    { required: true, message: "请输入最高可砍金额" },
+    { validator: checkHighestPrice },
+  ],
+  rangeTime: [
+    {
+      type: "array",
+      required: true,
+      message: "请选择活动时间",
+      trigger: "change",
     },
+  ],
+  stock: [{ required: true, message: "请输入活动库存" }],
+};
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+const formRef = ref(null);
+
+onMounted(async () => {
+  if (id) {
+    getKanJiaActivityGoods();
+    modalType.value = 1;
+  }
+});
+
+function getKanJiaActivityGoods() {
+  getKanJiaActivityGoodsById(id).then((res) => {
+    form.value = res.result;
+    form.value.rangeTime = [res.result.startTime, res.result.endTime];
+  });
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) {
+      return;
+    }
+    const params = JSON.parse(JSON.stringify(form.value));
+    const [start, end] = form.value.rangeTime || [];
+    if (!start || !end) {
+      $Message.error("请选择活动时间");
+      return;
+    }
+    const startDate = start instanceof Date ? start : new Date(start);
+    const endDate = end instanceof Date ? end : new Date(end);
+    params.startTime = unixToDate(startDate.getTime() / 1000);
+    params.endTime = unixToDate(endDate.getTime() / 1000);
+    delete params.rangeTime;
+
+    const eCoupon = isECoupon(params.goodsType || params.goodsSku?.goodsType);
+
+    if (params.stock <= 0 || params.stock > params.goodsSku.quantity) {
+      $Message.error("活动库存不能为0且不能超过商品库存");
+      return;
+    }
+    if (!regular.money.test(params.settlementPrice)) {
+      $Message.error("结算价格金额格式不正确");
+      return;
+    }
+    if (
+      (eCoupon ? params.settlementPrice < 0 : params.settlementPrice <= 0) ||
+      params.settlementPrice > params.price
+    ) {
+      $Message.error(
+        eCoupon
+          ? "结算价格不能小于0且不能超过商品价格"
+          : "结算价格金额不能为0且不能超过商品价格"
+      );
+      return;
+    }
+    if (!regular.money.test(params.highestPrice)) {
+      $Message.error("最高可砍金额格式错误");
+      return;
+    }
+    if (params.highestPrice <= 0 || params.highestPrice > params.price) {
+      $Message.error("最高可砍金额不能为0且不能超过商品价格");
+      return;
+    }
+    if (!regular.money.test(params.lowestPrice)) {
+      $Message.error("最低可砍金额格式错误");
+      return;
+    }
+    if (
+      params.lowestPrice < 0 ||
+      (!eCoupon && params.lowestPrice <= 0) ||
+      params.lowestPrice > params.price
+    ) {
+      $Message.error(eCoupon ? "最低可砍金额不能小于0" : "最低可砍金额不能为0");
+      return;
+    }
+    if (params.lowestPrice > params.highestPrice) {
+      $Message.error("最低砍价金额不能大于最高砍价金额");
+      return;
+    }
+
+    submitLoading.value = true;
+    editKanJiaActivityGoods(params).then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        $Message.success("砍价活动修改成功");
+        closeCurrentPage();
+      }
+    });
+  });
+}
+
+function closeCurrentPage() {
+  appStore.removeTag("add-kan-jia-goods");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue b/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
index 9d2500622..c33739fe1 100644
--- a/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
+++ b/manager/src/views/promotions/kanjia/kanjia-activity-goods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -52,7 +52,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -144,137 +144,146 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getKanJiaGoodsList, delKanJiaGoods } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "kanjia-activity-goods",
-  data() {
-    return {
-      selectDate: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        goodsName: "",
-        promotionStatus: "",
-      },
-      data: [],
-      total: 0,
-      selectList: [],
-      selectCoupon: [],
-    };
-  },
-  watch: {
-    $route(to) {
-      if (to.fullPath == "/promotions/manager-coupon") {
-        this.init();
+defineOptions({ name: "kanjia-activity-goods" });
+
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+const router = useRouter();
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const selectDate = ref([]);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  goodsName: "",
+  promotionStatus: "",
+});
+const data = ref([]);
+const total = ref(0);
+const selectList = ref([]);
+const selectCoupon = ref([]);
+
+watch(
+  () => route.fullPath,
+  (to) => {
+    // 历史遗留：该路径与本页（砍价商品）路由不符，原样保留
+    if (to == "/promotions/manager-coupon") {
+      init();
+    }
+  }
+);
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function check() {
+  emit("selected", selectCoupon.value);
+}
+function init() {
+  getDataList();
+}
+function add() {
+  router.push({ name: "add-kanJia-activity-goods" });
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function changeSort({ prop, order }) {
+  if (!order) {
+    searchForm.sort = "createTime";
+    searchForm.order = "desc";
+  } else {
+    searchForm.sort = prop;
+    searchForm.order = order === "ascending" ? "asc" : "desc";
+  }
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getKanJiaGoodsList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-    },
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    check() {
-      this.$emit("selected", this.selectCoupon);
-    },
-    init() {
-      this.getDataList();
-    },
-    add() {
-      this.$router.push({ name: "add-kanJia-activity-goods" });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSort({ prop, order }) {
-      if (!order) {
-        this.searchForm.sort = "createTime";
-        this.searchForm.order = "desc";
-      } else {
-        this.searchForm.sort = prop;
-        this.searchForm.order = order === "ascending" ? "asc" : "desc";
-      }
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getKanJiaGoodsList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    edit(v, type) {
-      const data = { id: v.id };
-      if (type) data.onlyView = true;
-      this.$router.push({
-        name: "edit-kanJia-activity-goods",
-        query: data,
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function edit(v, type) {
+  const params = { id: v.id };
+  if (type) params.onlyView = true;
+  router.push({
+    name: "edit-kanJia-activity-goods",
+    query: params,
+  });
+}
+function delAll(row) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "确认需要删除此砍价商品",
+    loading: true,
+    onOk: () => {
+      delKanJiaGoods(row.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("删除成功");
+          getDataList();
+        }
       });
     },
-    delAll(row) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "确认需要删除此砍价商品",
-        loading: true,
-        onOk: () => {
-          delKanJiaGoods(row.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/live/live-detail.vue b/manager/src/views/promotions/live/live-detail.vue
index b38cfdd57..1b037ff1e 100644
--- a/manager/src/views/promotions/live/live-detail.vue
+++ b/manager/src/views/promotions/live/live-detail.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form :model="liveForm" ref="liveForm" :rules="liveRulesForm" label-width="120px">
+      <el-form :model="liveForm" ref="liveFormRef" :rules="liveRulesForm" label-width="120px">
         <el-form-item label="直播标题" prop="name">
           <div class="form-field-block">
             <el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
@@ -124,69 +124,80 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getLiveInfo } from "@/api/promotion";
+import { Notice } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { getStore } from "@/libs/storage";
 
-export default {
-  data() {
-    return {
-      imageVisible: false,
-      imageSrc: "",
-      liveForm: {
-        name: "",
-        anchorName: "",
-        anchorWechat: "",
-        feedsImg: "",
-        coverImg: "",
-        shareImg: "",
-        startTime: "",
-      },
-      times: [],
-      liveData: [],
-      commodityList: "",
-    };
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      this.getLiveDetail();
+const route = useRoute();
+
+// 同名陷阱：模板表单 ref 原名 liveForm 与 data 冲突，改为 liveFormRef（原代码未在 script 中使用该 ref）
+const liveFormRef = ref(null);
+
+const imageVisible = ref(false);
+const imageSrc = ref("");
+const liveForm = reactive({
+  name: "",
+  anchorName: "",
+  anchorWechat: "",
+  feedsImg: "",
+  coverImg: "",
+  shareImg: "",
+  startTime: "",
+});
+const times = ref([]);
+const liveData = ref([]);
+const commodityList = ref("");
+// 历史遗留：模板引用了 liveRulesForm，但原 Options API 中从未声明/赋值（:rules 实际为 undefined）
+let liveRulesForm;
+// 历史遗留：模板 @change 引用的 handleChangeTime 与保存按钮的 createLives 在原代码中均未定义
+let handleChangeTime;
+let createLives;
+// 历史遗留：accessToken、liveStatus 未在 data 声明，原代码直接挂到 this 上且从未读取
+let accessToken;
+let liveStatus;
+
+onMounted(() => {
+  if (route.query.id) {
+    getLiveDetail();
+  }
+  accessToken = {
+    accessToken: getStore("accessToken"),
+  };
+});
+
+function handleView(src) {
+  imageVisible.value = true;
+  imageSrc.value = src;
+}
+function handleMaxSize(file) {
+  Notice.warning({
+    title: "文件大小过大",
+    desc: "所选文件大小过大, 不得超过 1M.",
+  });
+}
+async function getLiveDetail() {
+  let result = await getLiveInfo(route.query.id);
+
+  if (result.success) {
+    let data = result.result;
+    for (let key in data) {
+      liveForm[key] = data[key];
     }
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
-  },
 
-  methods: {
-    handleView(src) {
-      this.imageVisible = true;
-      this.imageSrc = src;
-    },
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc: "所选文件大小过大, 不得超过 1M.",
-      });
-    },
-    async getLiveDetail() {
-      let result = await getLiveInfo(this.$route.query.id);
+    liveData.value = data.commodityList;
+    commodityList.value = data.commodityList;
 
-      if (result.success) {
-        let data = result.result;
-        for (let key in data) {
-          this.liveForm[key] = data[key];
-        }
-
-        this.liveData = data.commodityList;
-        this.commodityList = data.commodityList;
-
-        this.times = [
-          this.$filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
-          this.$filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
-        ];
-        this.liveStatus = data.status;
-      }
-    },
-  },
-};
+    times.value = [
+      unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
+      unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
+    ];
+    liveStatus = data.status;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/live/live.vue b/manager/src/views/promotions/live/live.vue
index fa9ce3022..918b840ab 100644
--- a/manager/src/views/promotions/live/live.vue
+++ b/manager/src/views/promotions/live/live.vue
@@ -67,65 +67,63 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { getLiveList, whetherStar } from "@/api/promotion.js";
 
-export default {
-  data() {
-    return {
-      total: 0,
-      searchForm: {
-        pageSize: 20,
-        pageNumber: 1,
-        status: "NEW",
-      },
-      tabs: [
-        { title: "直播中", status: "START" },
-        { title: "未开始", status: "NEW" },
-        { title: "已结束", status: "END" },
-      ],
-      liveData: [],
-    };
+const router = useRouter();
+
+const total = ref(0);
+const searchForm = reactive({
+  pageSize: 20,
+  pageNumber: 1,
+  status: "NEW",
+});
+const tabs = ref([
+  { title: "直播中", status: "START" },
+  { title: "未开始", status: "NEW" },
+  { title: "已结束", status: "END" },
+]);
+const liveData = ref([]);
+
+watch(
+  () => searchForm.status,
+  () => {
+    liveData.value = [];
+    getStoreLives();
   },
-  watch: {
-    "searchForm.status": {
-      handler() {
-        this.liveData = [];
-        this.getStoreLives();
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.getStoreLives();
-  },
-  methods: {
-    async star(val, index) {
-      let switched = this.liveData[index].recommend;
-      await whetherStar({ id: val.id, recommend: switched });
-      this.getStoreLives();
-    },
-    changePageSize() {
-      this.getStoreLives();
-    },
-    changePageNumber() {
-      this.getStoreLives();
-    },
-    async getStoreLives() {
-      let result = await getLiveList(this.searchForm);
-      if (result.success) {
-        this.liveData = result.result.records;
-        this.total = result.result.total;
-      }
-    },
-    getLiveDetail(val) {
-      this.$router.push({
-        path: "/live-detail",
-        query: { ...val, liveStatus: this.searchForm.status },
-      });
-    },
-  },
-};
+  { deep: true }
+);
+
+onMounted(() => {
+  getStoreLives();
+});
+
+async function star(val, index) {
+  let switched = liveData.value[index].recommend;
+  await whetherStar({ id: val.id, recommend: switched });
+  getStoreLives();
+}
+function changePageSize() {
+  getStoreLives();
+}
+function changePageNumber() {
+  getStoreLives();
+}
+async function getStoreLives() {
+  let result = await getLiveList(searchForm);
+  if (result.success) {
+    liveData.value = result.result.records;
+    total.value = result.result.total;
+  }
+}
+function getLiveDetail(val) {
+  router.push({
+    path: "/live-detail",
+    query: { ...val, liveStatus: searchForm.status },
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue b/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue
index a72c1ba09..40df3dee5 100644
--- a/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue
+++ b/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue
@@ -20,19 +20,22 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getNthItemDiscountList } from "@/api/promotion.js";
-export default {
-  data() { return { loading: false, rows: [], total: 0, query: { pageNumber: 1, pageSize: 20 } }; },
-  mounted() { this.load(); },
-  methods: {
-    load() {
-      this.loading = true;
-      getNthItemDiscountList(this.query).then((res) => {
-        this.loading = false;
-        if (res.success) { this.rows = res.result.records; this.total = res.result.total; }
-      });
-    },
-  },
-};
+
+const loading = ref(false);
+const rows = ref([]);
+const total = ref(0);
+const query = reactive({ pageNumber: 1, pageSize: 20 });
+
+function load() {
+  loading.value = true;
+  getNthItemDiscountList(query).then((res) => {
+    loading.value = false;
+    if (res.success) { rows.value = res.result.records; total.value = res.result.total; }
+  });
+}
+
+onMounted(load);
 </script>
diff --git a/manager/src/views/promotions/pintuan/pintuan-goods.vue b/manager/src/views/promotions/pintuan/pintuan-goods.vue
index 19bae4cc3..7842ff1e4 100644
--- a/manager/src/views/promotions/pintuan/pintuan-goods.vue
+++ b/manager/src/views/promotions/pintuan/pintuan-goods.vue
@@ -77,75 +77,72 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getPintuanGoodsList, getPintuanDetail } from "@/api/promotion.js";
 import vueQr from "vue-qr";
 
-export default {
-  components: { vueQr },
-  data() {
-    return {
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-      goodsData: [],
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-      this.getPintuanMsg();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      this.searchForm.pintuanId = this.$route.query.id;
-      getPintuanGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.goodsData = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getPintuanMsg() {
-      getPintuanDetail(this.$route.query.id).then((res) => {
-        if (res.success) this.data.push(res.result);
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+const route = useRoute();
+
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+const goodsData = ref([]);
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+  getPintuanMsg();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  searchForm.pintuanId = route.query.id;
+  getPintuanGoodsList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      goodsData.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getPintuanMsg() {
+  getPintuanDetail(route.query.id).then((res) => {
+    if (res.success) data.value.push(res.result);
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/pintuan/pintuan.vue b/manager/src/views/promotions/pintuan/pintuan.vue
index 450c3b868..fc85269f4 100644
--- a/manager/src/views/promotions/pintuan/pintuan.vue
+++ b/manager/src/views/promotions/pintuan/pintuan.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -100,107 +100,109 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getPintuanList, updatePintuanStatus } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "pintuan",
-  data() {
-    return {
-      selectDate: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        promotionName: "",
-        promotionStatus: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
+defineOptions({ name: "pintuan" });
+
+const router = useRouter();
+
+const searchFormRef = ref(null);
+
+const selectDate = ref([]);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  promotionName: "",
+  promotionStatus: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getPintuanList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      getPintuanList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    view(v) {
-      this.$router.push({ name: "pintuan-goods", query: { id: v.id } });
-    },
-    close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "您确认要关闭此拼团活动?",
-        loading: true,
-        onOk: () => {
-          updatePintuanStatus(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function view(v) {
+  router.push({ name: "pintuan-goods", query: { id: v.id } });
+}
+function close(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "您确认要关闭此拼团活动?",
+    loading: true,
+    onOk: () => {
+      updatePintuanStatus(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/points-goods-category/points-goods-category.vue b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
index 4fec1d20e..403d5bd37 100644
--- a/manager/src/views/promotions/points-goods-category/points-goods-category.vue
+++ b/manager/src/views/promotions/points-goods-category/points-goods-category.vue
@@ -49,7 +49,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="formAdd" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="formAdd" label-width="100px" :rules="formValidate">
         <el-form-item label="分类名称" prop="name">
           <el-input v-model="formAdd.name" clearable />
         </el-form-item>
@@ -65,13 +65,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
 import {
   getPointsGoodsCategoryList,
   addPointsGoodsCategory,
   updatePointsGoodsCategory,
   deletePointsGoodsCategoryById,
 } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
+
+defineOptions({ name: "pointsGoodsCategory" });
 
 const buildDefaultFormAdd = () => ({
   parentId: 0,
@@ -81,135 +85,130 @@ const buildDefaultFormAdd = () => ({
   sortOrder: 1,
 });
 
-export default {
-  name: "pointsGoodsCategory",
-  data() {
-    return {
-      submitLoading: false,
-      loading: false,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "sortOrder",
-        order: "asc",
-      },
-      formAdd: buildDefaultFormAdd(),
-      formValidate: {
-        name: [{ required: true, message: "商品分类名称不能为空", trigger: "blur" }],
-      },
-      tableData: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getAllList();
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑";
-      this.formAdd = {
-        ...buildDefaultFormAdd(),
-        id: v.id,
-        name: v.name,
-        sortOrder: v.sortOrder,
-      };
-      this.modalVisible = true;
-    },
-    addParent() {
-      this.modalType = 0;
-      this.modalTitle = "添加积分商品分类";
-      this.formAdd = buildDefaultFormAdd();
-      this.modalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.clearValidate();
+const formRef = ref(null);
+
+const submitLoading = ref(false);
+const loading = ref(false);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "sortOrder",
+  order: "asc",
+});
+const formAdd = ref(buildDefaultFormAdd());
+const formValidate = reactive({
+  name: [{ required: true, message: "商品分类名称不能为空", trigger: "blur" }],
+});
+const tableData = ref([]);
+const total = ref(0);
+
+function init() {
+  getAllList();
+}
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑";
+  formAdd.value = {
+    ...buildDefaultFormAdd(),
+    id: v.id,
+    name: v.name,
+    sortOrder: v.sortOrder,
+  };
+  modalVisible.value = true;
+}
+function addParent() {
+  modalType.value = 0;
+  modalTitle.value = "添加积分商品分类";
+  formAdd.value = buildDefaultFormAdd();
+  modalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.clearValidate();
+  });
+}
+function Submit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    if (modalType.value === 0) {
+      delete formAdd.value.id;
+      addPointsGoodsCategory(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("添加成功");
+          getAllList();
+          modalVisible.value = false;
+          formAdd.value = buildDefaultFormAdd();
+        }
       });
-    },
-    Submit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        if (this.modalType === 0) {
-          delete this.formAdd.id;
-          addPointsGoodsCategory(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("添加成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.formAdd = buildDefaultFormAdd();
-            }
-          });
-        } else {
-          updatePointsGoodsCategory(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.formAdd = buildDefaultFormAdd();
-            }
-          });
+    } else {
+      updatePointsGoodsCategory(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+          getAllList();
+          modalVisible.value = false;
+          formAdd.value = buildDefaultFormAdd();
+        }
+      });
+    }
+  });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      deletePointsGoodsCategoryById(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getAllList();
         }
       });
     },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          deletePointsGoodsCategoryById(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getAllList();
+  });
+}
+function getAllList() {
+  loading.value = true;
+  getPointsGoodsCategoryList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        const records = res.result.records || [];
+        const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
+        const sortRecursively = (list = []) => {
+          list.sort(sortFn);
+          list.forEach((item) => {
+            if (Array.isArray(item.children) && item.children.length) {
+              sortRecursively(item.children);
             }
           });
-        },
-      });
-    },
-    getAllList() {
-      this.loading = true;
-      getPointsGoodsCategoryList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            const records = res.result.records || [];
-            const sortFn = (a, b) => (a.sortOrder || 0) - (b.sortOrder || 0);
-            const sortRecursively = (list = []) => {
-              list.sort(sortFn);
-              list.forEach((item) => {
-                if (Array.isArray(item.children) && item.children.length) {
-                  sortRecursively(item.children);
-                }
-              });
-              return list;
-            };
-            this.tableData = sortRecursively(records);
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getAllList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getAllList();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+          return list;
+        };
+        tableData.value = sortRecursively(records);
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getAllList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getAllList();
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/points-goods/points-goods-add.vue b/manager/src/views/promotions/points-goods/points-goods-add.vue
index 72fcd1519..30caac001 100644
--- a/manager/src/views/promotions/points-goods/points-goods-add.vue
+++ b/manager/src/views/promotions/points-goods/points-goods-add.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <el-card>
-      <el-form ref="form" :model="form" :rules="formRule" label-width="120px">
+      <el-form ref="formRef" :model="form" :rules="formRule" label-width="120px">
         <div class="base-info-item">
           <div class="form-item-view">
             <el-form-item style="width: 100%">
@@ -115,164 +115,174 @@
         </div>
       </el-form>
     </el-card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { addPointsGoods, getPointsGoodsCategoryList } from "@/api/promotion";
 import skuSelect from "@/components/lili-dialog";
 import { isECoupon, goodsTypeLabel } from "@/constants/goodsType";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "addPoinsGoods",
-  components: {
-    skuSelect,
-  },
-  data() {
-    return {
-      form: {
-        rangeTime: null,
-        promotionGoodsList: [],
-      },
-      showTable: true,
-      promotionGoodsList: [],
-      categoryList: [],
-      submitLoading: false,
-      selectedGoods: [],
-      formRule: {
-        rangeTime: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!value || !Array.isArray(value) || value.length < 2 || !value[0] || !value[1]) {
-                callback(new Error("请选择活动时间"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    await this.getCategory();
-  },
-  methods: {
-    goodsTypeLabel,
-    async getCategory() {
-      let res = await getPointsGoodsCategoryList();
-      this.categoryList = res.result.records;
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        let params = this.promotionGoodsList;
-        if (!params || params.length === 0) {
-          this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
-          return;
-        }
-        for (const row of params) {
-          const stock = Number(row.quantity) || 0;
-          if (isECoupon(row.goodsType) && Number(row.activeStock) > stock) {
-            this.$Message.error(`【${row.goodsName}】活动库存不能超过卡池库存（${stock}）`);
-            return;
-          }
-        }
-        this.form.startTime = this.form.rangeTime[0];
-        this.form.endTime = this.form.rangeTime[1];
-        const start = this.$filters.unixToDate(this.form.startTime / 1000);
-        const end = this.$filters.unixToDate(this.form.endTime / 1000);
+defineOptions({ name: "addPoinsGoods" });
 
-        this.submitLoading = true;
-        params = params.map((j) => {
-          j.startTime = start;
-          j.endTime = end;
-          return j;
-        });
-        addPointsGoods(params).then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success("积分商品创建成功");
-            this.closeCurrentPage();
-          }
-        });
-      });
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-points-goods");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    changeCategory(categoryId, index) {
-      const item = this.categoryList.find((c) => c.id === categoryId);
-      this.promotionGoodsList[index].pointsGoodsCategoryName = item ? item.name : "";
-    },
-    changeSelect(e) {
-      this.selectedGoods = e;
-    },
-    delSelectGoods() {
-      if (this.selectedGoods.length <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选商品吗?",
-        onOk: () => {
-          let ids = [];
-          this.selectedGoods.forEach(function (e) {
-            ids.push(e.skuId);
-          });
-          this.promotionGoodsList = this.promotionGoodsList.filter((item) => {
-            return !ids.includes(item.skuId);
-          });
-        },
-      });
-    },
-    delGoods(index) {
-      this.promotionGoodsList.splice(index, 1);
-    },
-    openSkuList() {
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    selectedGoodsData(item) {
-      let list = [];
-      item.forEach((e) => {
-        const obj = {
-          settlementPrice: e.settlementPrice || e.price,
-          pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0,
-          pointsGoodsCategoryName: e.pointsGoodsCategoryName || "",
-          activeStock: e.activeStock || 1,
-          points: e.points || 1,
-          skuId: e.id,
-          goodsId: e.goodsId,
-          originalPrice: e.price || 0,
-          thumbnail: e.thumbnail || "",
-          goodsName: e.goodsName || "",
-          quantity: e.quantity || "",
-          storeName: e.storeName || "",
-          price: e.price || "",
-          goodsType: e.goodsType,
-        };
-        list.push(obj);
-      });
-      this.promotionGoodsList = list;
+const router = useRouter();
+const appStore = useAppStore();
+
+const formRef = ref(null);
+const skuSelectRef = ref(null);
+
+const form = reactive({
+  rangeTime: null,
+  promotionGoodsList: [],
+});
+const showTable = ref(true);
+const promotionGoodsList = ref([]);
+const categoryList = ref([]);
+const submitLoading = ref(false);
+const selectedGoods = ref([]);
+const formRule = {
+  rangeTime: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!value || !Array.isArray(value) || value.length < 2 || !value[0] || !value[1]) {
+          callback(new Error("请选择活动时间"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "change",
     },
+  ],
+};
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+onMounted(async () => {
+  await getCategory();
+});
+
+async function getCategory() {
+  let res = await getPointsGoodsCategoryList();
+  categoryList.value = res.result.records;
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    let params = promotionGoodsList.value;
+    if (!params || params.length === 0) {
+      Modal.warning({ title: "提示", content: "请选择指定商品" });
+      return;
+    }
+    for (const row of params) {
+      const stock = Number(row.quantity) || 0;
+      if (isECoupon(row.goodsType) && Number(row.activeStock) > stock) {
+        Message.error(`【${row.goodsName}】活动库存不能超过卡池库存（${stock}）`);
+        return;
+      }
+    }
+    form.startTime = form.rangeTime[0];
+    form.endTime = form.rangeTime[1];
+    const start = unixToDate(form.startTime / 1000);
+    const end = unixToDate(form.endTime / 1000);
+
+    submitLoading.value = true;
+    params = params.map((j) => {
+      j.startTime = start;
+      j.endTime = end;
+      return j;
+    });
+    addPointsGoods(params).then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        Message.success("积分商品创建成功");
+        closeCurrentPage();
+      }
+    });
+  });
+}
+
+function closeCurrentPage() {
+  appStore.removeTag("add-points-goods");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+function changeCategory(categoryId, index) {
+  const item = categoryList.value.find((c) => c.id === categoryId);
+  promotionGoodsList.value[index].pointsGoodsCategoryName = item ? item.name : "";
+}
+
+function changeSelect(e) {
+  selectedGoods.value = e;
+}
+
+function delSelectGoods() {
+  if (selectedGoods.value.length <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选商品吗?",
+    onOk: () => {
+      let ids = [];
+      selectedGoods.value.forEach(function (e) {
+        ids.push(e.skuId);
+      });
+      promotionGoodsList.value = promotionGoodsList.value.filter((item) => {
+        return !ids.includes(item.skuId);
+      });
+    },
+  });
+}
+
+function delGoods(index) {
+  promotionGoodsList.value.splice(index, 1);
+}
+
+function openSkuList() {
+  skuSelectRef.value.open("goods");
+  let data = JSON.parse(JSON.stringify(promotionGoodsList.value));
+  data.forEach((e) => {
+    e.id = e.skuId;
+  });
+  skuSelectRef.value.goodsData = data;
+}
+
+function selectedGoodsData(item) {
+  let list = [];
+  item.forEach((e) => {
+    const obj = {
+      settlementPrice: e.settlementPrice || e.price,
+      pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0,
+      pointsGoodsCategoryName: e.pointsGoodsCategoryName || "",
+      activeStock: e.activeStock || 1,
+      points: e.points || 1,
+      skuId: e.id,
+      goodsId: e.goodsId,
+      originalPrice: e.price || 0,
+      thumbnail: e.thumbnail || "",
+      goodsName: e.goodsName || "",
+      quantity: e.quantity || "",
+      storeName: e.storeName || "",
+      price: e.price || "",
+      goodsType: e.goodsType,
+    };
+    list.push(obj);
+  });
+  promotionGoodsList.value = list;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/points-goods/points-goods-edit.vue b/manager/src/views/promotions/points-goods/points-goods-edit.vue
index 314a54801..cdce81b9a 100644
--- a/manager/src/views/promotions/points-goods/points-goods-edit.vue
+++ b/manager/src/views/promotions/points-goods/points-goods-edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>积分商品信息</h4>
           <div class="form-item-view">
@@ -82,107 +82,117 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   updatePointsGoods,
   getPointsGoodsById,
   getPointsGoodsCategoryList,
 } from "@/api/promotion";
+import { Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "editPointsGoods",
-  data() {
-    return {
-      pointsGoodsCategoryId: "",
-      pointsGoodsCategoryName: "",
-      form: {
-        promotionName: "",
-        applyEndTime: "",
-        startTime: "",
-        seckillPeriod: [],
-        seckillRule: "",
-        goodsSku: {},
-        promotionStatus: "NEW",
-        rangeTime: [],
-      },
-      categoryList: [],
-      id: this.$route.query.id,
-      submitLoading: false,
-      formRule: {
-        settlementPrice: [{ required: true, message: "请填写结算价格" }],
-        pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
-        points: [{ required: true, message: "请填写兑换积分" }],
-        activeStock: [{ required: true, message: "请填写库存" }],
-      },
-    };
-  },
-  async mounted() {
-    await this.getCategory();
-    if (this.id) {
-      this.getData();
-    }
-  },
-  methods: {
-    disabledDate(date) {
-      return date && date.getTime() < Date.now() - 86400000;
-    },
-    changeCategory(id) {
-      const item = this.categoryList.find((c) => c.id === id);
-      this.pointsGoodsCategoryId = id;
-      this.pointsGoodsCategoryName = item ? item.name : "";
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "edit-points-goods");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    getData() {
-      getPointsGoodsById(this.id).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          this.form = data;
-          data.rangeTime = [];
-          if (data.startTime && data.endTime) {
-            data.rangeTime = [data.startTime, data.endTime];
-          }
-          if (data.pointsGoodsCategoryId) {
-            this.changeCategory(data.pointsGoodsCategoryId);
-          }
-        }
-      });
-    },
-    async getCategory() {
-      const res = await getPointsGoodsCategoryList();
-      this.categoryList = res.result.records;
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.rangeTime || this.form.rangeTime.length !== 2) {
-            this.$Message.error("请选择活动时间");
-            return;
-          }
-          this.form.startTime = this.form.rangeTime[0];
-          this.form.endTime = this.form.rangeTime[1];
-          this.submitLoading = true;
-          const params = {
-            ...this.form,
-            pointsGoodsCategoryId: this.pointsGoodsCategoryId || this.form.pointsGoodsCategoryId,
-            pointsGoodsCategoryName:
-              this.pointsGoodsCategoryName || this.form.pointsGoodsCategoryName,
-          };
-          updatePointsGoods(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("积分商品修改成功");
-              this.closeCurrentPage();
-            }
-          });
-        }
-      });
-    },
-  },
+defineOptions({ name: "editPointsGoods" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const pointsGoodsCategoryId = ref("");
+const pointsGoodsCategoryName = ref("");
+const form = ref({
+  promotionName: "",
+  applyEndTime: "",
+  startTime: "",
+  seckillPeriod: [],
+  seckillRule: "",
+  goodsSku: {},
+  promotionStatus: "NEW",
+  rangeTime: [],
+});
+const categoryList = ref([]);
+const id = route.query.id;
+const submitLoading = ref(false);
+const formRule = {
+  settlementPrice: [{ required: true, message: "请填写结算价格" }],
+  pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }],
+  points: [{ required: true, message: "请填写兑换积分" }],
+  activeStock: [{ required: true, message: "请填写库存" }],
 };
+
+const formRef = ref(null);
+
+onMounted(async () => {
+  await getCategory();
+  if (id) {
+    getData();
+  }
+});
+
+function disabledDate(date) {
+  return date && date.getTime() < Date.now() - 86400000;
+}
+
+function changeCategory(id) {
+  const item = categoryList.value.find((c) => c.id === id);
+  pointsGoodsCategoryId.value = id;
+  pointsGoodsCategoryName.value = item ? item.name : "";
+}
+
+function closeCurrentPage() {
+  appStore.removeTag("edit-points-goods");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+function getData() {
+  getPointsGoodsById(id).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      form.value = data;
+      data.rangeTime = [];
+      if (data.startTime && data.endTime) {
+        data.rangeTime = [data.startTime, data.endTime];
+      }
+      if (data.pointsGoodsCategoryId) {
+        changeCategory(data.pointsGoodsCategoryId);
+      }
+    }
+  });
+}
+
+async function getCategory() {
+  const res = await getPointsGoodsCategoryList();
+  categoryList.value = res.result.records;
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!form.value.rangeTime || form.value.rangeTime.length !== 2) {
+        Message.error("请选择活动时间");
+        return;
+      }
+      form.value.startTime = form.value.rangeTime[0];
+      form.value.endTime = form.value.rangeTime[1];
+      submitLoading.value = true;
+      const params = {
+        ...form.value,
+        pointsGoodsCategoryId: pointsGoodsCategoryId.value || form.value.pointsGoodsCategoryId,
+        pointsGoodsCategoryName:
+          pointsGoodsCategoryName.value || form.value.pointsGoodsCategoryName,
+      };
+      updatePointsGoods(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("积分商品修改成功");
+          closeCurrentPage();
+        }
+      });
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/points-goods/points-goods.vue b/manager/src/views/promotions/points-goods/points-goods.vue
index 1e80a3fd7..1a4aeb2f7 100644
--- a/manager/src/views/promotions/points-goods/points-goods.vue
+++ b/manager/src/views/promotions/points-goods/points-goods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -62,7 +62,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -155,138 +155,142 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   getPointsGoodsList,
   editPointsGoodsStatus,
   deletePointsGoodsStatus,
 } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "pointsGoods",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      statusList: [
-        { label: "未开始", value: "NEW" },
-        { label: "已开始", value: "START" },
-        { label: "已结束", value: "END" },
-        { label: "已关闭", value: "CLOSE" },
-      ],
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    addPointsGoods() {
-      this.$router.push({ name: "add-points-goods" });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      if (this.searchForm.pointsS) {
-        this.searchForm.points =
-          this.searchForm.pointsS + "_" + (this.searchForm.pointsE ? this.searchForm.pointsE : "");
+defineOptions({ name: "pointsGoods" });
+
+const router = useRouter();
+
+// 模板 ref，与 data 字段同名会互相覆盖，改为 searchFormRef / tableRef
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const statusList = ref([
+  { label: "未开始", value: "NEW" },
+  { label: "已开始", value: "START" },
+  { label: "已结束", value: "END" },
+  { label: "已关闭", value: "CLOSE" },
+]);
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  init();
+});
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function addPointsGoods() {
+  router.push({ name: "add-points-goods" });
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  if (searchForm.pointsS) {
+    searchForm.points =
+      searchForm.pointsS + "_" + (searchForm.pointsE ? searchForm.pointsE : "");
+  }
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getPointsGoodsList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getPointsGoodsList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    edit(id) {
-      this.$router.push({ name: "edit-points-goods", query: { id } });
-    },
-    statusChanged(id, status, startTime, endTime) {
-      let text = "";
-      let params = {};
-      if (status == "START") {
-        text = "开启";
-        params = { startTime, endTime };
-      } else if (status == "CLOSE") {
-        text = "关闭";
-      }
-      this.$Modal.confirm({
-        title: "确认" + text,
-        content: "您确认要" + text + "此积分商品?",
-        loading: true,
-        onOk: () => {
-          editPointsGoodsStatus(id, params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success(text + "成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function edit(id) {
+  router.push({ name: "edit-points-goods", query: { id } });
+}
+function statusChanged(id, status, startTime, endTime) {
+  let text = "";
+  let params = {};
+  if (status == "START") {
+    text = "开启";
+    params = { startTime, endTime };
+  } else if (status == "CLOSE") {
+    text = "关闭";
+  }
+  Modal.confirm({
+    title: "确认" + text,
+    content: "您确认要" + text + "此积分商品?",
+    loading: true,
+    onOk: () => {
+      editPointsGoodsStatus(id, params).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success(text + "成功");
+          getDataList();
+        }
       });
     },
-    close(id) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除此积分商品?",
-        loading: true,
-        onOk: () => {
-          deletePointsGoodsStatus(id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function close(id) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除此积分商品?",
+    loading: true,
+    onOk: () => {
+      deletePointsGoodsStatus(id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/promotions/seckill/seckill-add.vue b/manager/src/views/promotions/seckill/seckill-add.vue
index efafa5e96..355cd42f3 100644
--- a/manager/src/views/promotions/seckill/seckill-add.vue
+++ b/manager/src/views/promotions/seckill/seckill-add.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
@@ -73,93 +73,104 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { updateSeckill, seckillDetail } from "@/api/promotion";
+import { unixToDate } from "@/utils/filters";
+import { Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "addSeckill",
-  data() {
-    return {
-      form: {
-        promotionName: "",
-        applyEndTime: "",
-        startTime: "",
-        seckillPeriod: [],
-        seckillRule: "",
-        promotionStatus: "NEW",
-      },
-      id: this.$route.query.id,
-      periodTime: null,
-      showAddPeriod: false,
-      submitLoading: false,
-      formRule: {
-        promotionName: [{ required: true, message: "请填写活动名称" }],
-        applyEndTime: [{ required: true, message: "请填写报名截止时间" }],
-        seckillPeriod: [{ required: true, message: "请填写抢购时间段" }],
-        startTime: [{ required: true, message: "请填写活动开始时间" }],
-        seckillRule: [{ required: true, message: "请输入申请规则" }],
-      },
-    };
-  },
-  mounted() {
-    if (this.id) {
-      this.getData();
-    }
-  },
-  methods: {
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "manager-seckill-add");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    getData() {
-      seckillDetail(this.id).then((res) => {
-        if (res.success) {
-          const data = res.result;
-          data.seckillPeriod = res.result.hours.split(",");
-          this.form = data;
-        }
-      });
-    },
-    addPeriod() {
-      this.addPeriodTime();
-      this.showAddPeriod = true;
-    },
-    addPeriodTime() {
-      this.showAddPeriod = false;
-      if (this.periodTime !== null && !this.form.seckillPeriod.includes(this.periodTime)) {
-        this.form.seckillPeriod.push(this.periodTime);
-      }
-    },
-    removePeriodTime(name) {
-      this.form.seckillPeriod = this.form.seckillPeriod.filter((i) => i !== name);
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          this.form.hours = this.form.seckillPeriod.toString();
-          delete this.form.createTime;
-          delete this.form.updateTime;
-          delete this.form.endTime;
-          delete this.form.seckillApplyList;
-          const params = { ...this.form };
-          const startTs = new Date(this.form.startTime).getTime();
-          const applyTs = new Date(this.form.applyEndTime).getTime();
-          params.startTime = this.$filters.unixToDate(startTs / 1000);
-          params.applyEndTime = this.$filters.unixToDate(applyTs / 1000);
-          updateSeckill(params).then((res) => {
-            this.submitLoading = false;
-            if (res && res.success) {
-              this.$Message.success("编辑成功");
-              this.closeCurrentPage();
-            }
-          });
-        }
-      });
-    },
-  },
+defineOptions({ name: "addSeckill" });
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const form = ref({
+  promotionName: "",
+  applyEndTime: "",
+  startTime: "",
+  seckillPeriod: [],
+  seckillRule: "",
+  promotionStatus: "NEW",
+});
+const id = route.query.id;
+const periodTime = ref(null);
+const showAddPeriod = ref(false);
+const submitLoading = ref(false);
+const formRule = {
+  promotionName: [{ required: true, message: "请填写活动名称" }],
+  applyEndTime: [{ required: true, message: "请填写报名截止时间" }],
+  seckillPeriod: [{ required: true, message: "请填写抢购时间段" }],
+  startTime: [{ required: true, message: "请填写活动开始时间" }],
+  seckillRule: [{ required: true, message: "请输入申请规则" }],
 };
+
+const formRef = ref(null);
+
+onMounted(() => {
+  if (id) {
+    getData();
+  }
+});
+
+function closeCurrentPage() {
+  appStore.removeTag("manager-seckill-add");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+function getData() {
+  seckillDetail(id).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      data.seckillPeriod = res.result.hours.split(",");
+      form.value = data;
+    }
+  });
+}
+
+function addPeriod() {
+  addPeriodTime();
+  showAddPeriod.value = true;
+}
+
+function addPeriodTime() {
+  showAddPeriod.value = false;
+  if (periodTime.value !== null && !form.value.seckillPeriod.includes(periodTime.value)) {
+    form.value.seckillPeriod.push(periodTime.value);
+  }
+}
+
+function removePeriodTime(name) {
+  form.value.seckillPeriod = form.value.seckillPeriod.filter((i) => i !== name);
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      form.value.hours = form.value.seckillPeriod.toString();
+      delete form.value.createTime;
+      delete form.value.updateTime;
+      delete form.value.endTime;
+      delete form.value.seckillApplyList;
+      const params = { ...form.value };
+      const startTs = new Date(form.value.startTime).getTime();
+      const applyTs = new Date(form.value.applyEndTime).getTime();
+      params.startTime = unixToDate(startTs / 1000);
+      params.applyEndTime = unixToDate(applyTs / 1000);
+      updateSeckill(params).then((res) => {
+        submitLoading.value = false;
+        if (res && res.success) {
+          Message.success("编辑成功");
+          closeCurrentPage();
+        }
+      });
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/seckill/seckill-goods.vue b/manager/src/views/promotions/seckill/seckill-goods.vue
index cc9e2cfdd..552413df1 100644
--- a/manager/src/views/promotions/seckill/seckill-goods.vue
+++ b/manager/src/views/promotions/seckill/seckill-goods.vue
@@ -80,110 +80,110 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   seckillGoodsList,
   seckillDetail,
   delSeckillGoods,
 } from "@/api/promotion.js";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  data() {
-    return {
-      promotionStatus: "",
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      total: 0,
-      data: [],
-      goodsList: [],
-    };
-  },
-  methods: {
-    seckillStatusText(status) {
-      const map = {
-        NEW: "新建",
-        START: "开始",
-        END: "结束",
-        CLOSE: "废弃",
+const route = useRoute();
+
+const promotionStatus = ref("");
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const total = ref(0);
+const data = ref([]);
+const goodsList = ref([]);
+
+function seckillStatusText(status) {
+  const map = {
+    NEW: "新建",
+    START: "开始",
+    END: "结束",
+    CLOSE: "废弃",
+  };
+  return map[status] || status || "-";
+}
+function seckillStatusTagType(status) {
+  const map = {
+    NEW: "danger",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getSeckillMsg();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  searchForm.seckillId = route.query.id;
+  seckillGoodsList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success && res.result) {
+      goodsList.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getSeckillMsg() {
+  seckillDetail(route.query.id).then((res) => {
+    if (res.success && res.result) {
+      data.value = [];
+      data.value.push(res.result);
+      promotionStatus.value = res.result.promotionStatus;
+      getDataList();
+    }
+  });
+}
+function delGoods(index, row) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除该商品吗?删除后不可恢复",
+    onOk: () => {
+      const params = {
+        seckillId: row.seckillId,
+        id: row.id,
       };
-      return map[status] || status || "-";
-    },
-    seckillStatusTagType(status) {
-      const map = {
-        NEW: "danger",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getSeckillMsg();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      this.searchForm.seckillId = this.$route.query.id;
-      seckillGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success && res.result) {
-          this.goodsList = res.result.records;
-          this.total = res.result.total;
+      delSeckillGoods(params).then((res) => {
+        if (res.success) {
+          goodsList.value.splice(index, 1);
+          Message.success("删除成功！");
         }
       });
     },
-    getSeckillMsg() {
-      seckillDetail(this.$route.query.id).then((res) => {
-        if (res.success && res.result) {
-          this.data = [];
-          this.data.push(res.result);
-          this.promotionStatus = res.result.promotionStatus;
-          this.getDataList();
-        }
-      });
-    },
-    delGoods(index, row) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除该商品吗?删除后不可恢复",
-        onOk: () => {
-          const params = {
-            seckillId: row.seckillId,
-            id: row.id,
-          };
-          delSeckillGoods(params).then((res) => {
-            if (res.success) {
-              this.goodsList.splice(index, 1);
-              this.$Message.success("删除成功！");
-            }
-          });
-        },
-      });
-    },
-    unixDate(time) {
-      return this.$filters.unixToDate(new Date(time) / 1000);
-    },
-    unixHours(item) {
-      const hourArr = item.split(",");
-      for (let i = 0; i < hourArr.length; i++) {
-        hourArr[i] += ":00";
-      }
-      return hourArr;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+function unixDate(time) {
+  return unixToDate(new Date(time) / 1000);
+}
+function unixHours(item) {
+  const hourArr = item.split(",");
+  for (let i = 0; i < hourArr.length; i++) {
+    hourArr[i] += ":00";
+  }
+  return hourArr;
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/promotions/seckill/seckill-setup.vue b/manager/src/views/promotions/seckill/seckill-setup.vue
index b866ef098..77423ddbb 100644
--- a/manager/src/views/promotions/seckill/seckill-setup.vue
+++ b/manager/src/views/promotions/seckill/seckill-setup.vue
@@ -35,70 +35,75 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getSetting, setSetting } from "@/api/index";
-export default {
-  data() {
-    return {
-      templateShow: false,
-      submitLoading: false,
-      times: [],
-      form: {
-        seckillRule: "",
-      },
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "manager-seckill-add");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    async handleSubmit() {
-      const hours = this.times
-        .filter((item) => item.check)
-        .map((item) => item.time)
-        .join(",");
-      const result = await setSetting("SECKILL_SETTING", {
-        seckillRule: this.form.seckillRule,
-        hours,
-      });
-      if (result.success) {
-        this.$Message.success("设置成功!");
-        this.init();
-      }
-    },
-    async init() {
-      const result = await getSetting("SECKILL_SETTING");
-      if (result.success) {
-        this.templateShow = true;
-        this.form.seckillRule = result.result.seckillRule;
-        this.times = [];
-        for (let i = 0; i < 24; i++) {
-          let matched = false;
-          if (result.result.hours) {
-            const way = result.result.hours.split(",");
-            way.forEach((hours) => {
-              if (hours == i) {
-                this.times.push({ time: i, check: true });
-                matched = true;
-              }
-            });
+import { Message as $Message } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
+
+const router = useRouter();
+const appStore = useAppStore();
+
+const templateShow = ref(false);
+const submitLoading = ref(false);
+const times = ref([]);
+const form = reactive({
+  seckillRule: "",
+});
+
+onMounted(() => {
+  init();
+});
+
+function closeCurrentPage() {
+  appStore.removeTag("manager-seckill-add");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+
+async function handleSubmit() {
+  const hours = times.value
+    .filter((item) => item.check)
+    .map((item) => item.time)
+    .join(",");
+  const result = await setSetting("SECKILL_SETTING", {
+    seckillRule: form.seckillRule,
+    hours,
+  });
+  if (result.success) {
+    $Message.success("设置成功!");
+    init();
+  }
+}
+
+async function init() {
+  const result = await getSetting("SECKILL_SETTING");
+  if (result.success) {
+    templateShow.value = true;
+    form.seckillRule = result.result.seckillRule;
+    times.value = [];
+    for (let i = 0; i < 24; i++) {
+      let matched = false;
+      if (result.result.hours) {
+        const way = result.result.hours.split(",");
+        way.forEach((hours) => {
+          if (hours == i) {
+            times.value.push({ time: i, check: true });
+            matched = true;
           }
-          if (!matched) {
-            this.times.push({ time: i, check: false });
-          }
-        }
+        });
       }
-    },
-    handleClickTime(val) {
-      val.check = !val.check;
-    },
-  },
-};
+      if (!matched) {
+        times.value.push({ time: i, check: false });
+      }
+    }
+  }
+}
+
+function handleClickTime(val) {
+  val.check = !val.check;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/promotions/seckill/seckill.vue b/manager/src/views/promotions/seckill/seckill.vue
index a1304d887..b8d53e10c 100644
--- a/manager/src/views/promotions/seckill/seckill.vue
+++ b/manager/src/views/promotions/seckill/seckill.vue
@@ -2,7 +2,7 @@
   <div class="search seckill">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -131,125 +131,125 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getSeckillList, delSeckill, updateSeckillStatus } from "@/api/promotion";
+import { Message, Modal } from "@/utils/message";
 import setupSeckill from "@/views/promotions/seckill/seckill-setup";
 
-export default {
-  name: "seckill",
-  components: {
-    setupSeckill,
-  },
-  data() {
-    return {
-      activeTab: "list",
-      selectDate: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    edit(v) {
-      this.$router.push({ name: "manager-seckill-add", query: { id: v.id } });
-    },
-    manage(v) {
-      this.$router.push({ name: "seckill-goods", query: { id: v.id } });
-    },
-    off(v) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "您确定要下架该活动吗？",
-        onOk: () => {
-          updateSeckillStatus(v.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.getDataList();
-            }
-          });
-        },
+defineOptions({ name: "seckill" });
+
+const router = useRouter();
+
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const activeTab = ref("list");
+const selectDate = ref([]);
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+}
+function edit(v) {
+  router.push({ name: "manager-seckill-add", query: { id: v.id } });
+}
+function manage(v) {
+  router.push({ name: "seckill-goods", query: { id: v.id } });
+}
+function off(v) {
+  Modal.confirm({
+    title: "提示",
+    content: "您确定要下架该活动吗？",
+    onOk: () => {
+      updateSeckillStatus(v.id).then((res) => {
+        if (res.success) {
+          Message.success("下架成功");
+          getDataList();
+        }
       });
     },
-    expire(v) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "您确定要作废该活动吗？",
-        onOk: () => {
-          delSeckill(v.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("作废成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function expire(v) {
+  Modal.confirm({
+    title: "提示",
+    content: "您确定要作废该活动吗？",
+    onOk: () => {
+      delSeckill(v.id).then((res) => {
+        if (res.success) {
+          Message.success("作废成功");
+          getDataList();
+        }
       });
     },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
+  });
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.value.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.value.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.value.startTime = null;
+    searchForm.value.endTime = null;
+  }
+  getSeckillList(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      getSeckillList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/region/index.vue b/manager/src/views/region/index.vue
index aba61964c..69946fa23 100644
--- a/manager/src/views/region/index.vue
+++ b/manager/src/views/region/index.vue
@@ -34,100 +34,100 @@
   </el-card>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage } from "element-plus";
+import { Message, Modal } from "@/utils/message";
 import { getChildRegion, asyncRegion } from "@/api/index";
 
-export default {
-  data() {
-    return {
-      loading: false,
-      asyncLoading: false,
-      num: 10,
-      tableData: [],
-      levelMap: {
-        country: "国家",
-        province: "省份",
-        city: "市",
-        district: "区县",
-        street: "街道",
-      },
-    };
-  },
-  mounted() {
-    this.loadRoot();
-  },
-  methods: {
-    isLeafRegion(child, parentName = "") {
-      return (
-        child.level === "street" ||
-        child.name === "台湾省" ||
-        parentName === "香港特别行政区" ||
-        parentName === "澳门特别行政区"
-      );
-    },
-    mapRegionRow(child, parentName = "") {
-      return {
-        ...child,
-        cityCode: child.cityCode === "null" ? "" : child.cityCode,
-        hasChildren: !this.isLeafRegion(child, parentName),
-      };
-    },
-    loadRoot() {
-      this.loading = true;
-      getChildRegion(0)
-        .then((res) => {
-          this.tableData = (res.result || []).map((item) => this.mapRegionRow(item));
-        })
-        .finally(() => {
-          this.loading = false;
+const loading = ref(false);
+const asyncLoading = ref(false);
+const num = ref(10);
+const tableData = ref([]);
+const levelMap = reactive({
+  country: "国家",
+  province: "省份",
+  city: "市",
+  district: "区县",
+  street: "街道",
+});
+
+function isLeafRegion(child, parentName = "") {
+  return (
+    child.level === "street" ||
+    child.name === "台湾省" ||
+    parentName === "香港特别行政区" ||
+    parentName === "澳门特别行政区"
+  );
+}
+
+function mapRegionRow(child, parentName = "") {
+  return {
+    ...child,
+    cityCode: child.cityCode === "null" ? "" : child.cityCode,
+    hasChildren: !isLeafRegion(child, parentName),
+  };
+}
+
+function loadRoot() {
+  loading.value = true;
+  getChildRegion(0)
+    .then((res) => {
+      tableData.value = (res.result || []).map((item) => mapRegionRow(item));
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function loadChildren(row, _treeNode, resolve) {
+  getChildRegion(row.id).then((res) => {
+    if (!res.result?.length) {
+      resolve([]);
+      return;
+    }
+    resolve(res.result.map((child) => mapRegionRow(child, row.name)));
+  });
+}
+
+function handleAsyncRegion() {
+  num.value = 10;
+  Modal.confirm({
+    title: "确定更新？",
+    content: "更新后店铺以及用户地区绑定数据将全部错乱",
+    onOk: () => {
+      asyncLoading.value = true;
+      let messageInstance = null;
+      const showCountdown = () => {
+        if (messageInstance) messageInstance.close();
+        messageInstance = ElMessage.info({
+          message: `地区数据将在 ${num.value} 秒后更新`,
+          duration: 0,
+          showClose: true,
         });
+      };
+      showCountdown();
+      const number = setInterval(() => {
+        num.value--;
+        showCountdown();
+      }, 1000);
+      setTimeout(() => {
+        clearInterval(number);
+        if (messageInstance) messageInstance.close();
+        ElMessage.closeAll();
+        asyncRegion().then(() => {
+          asyncLoading.value = false;
+          Message.success("地区数据正在更新中！");
+          loadRoot();
+        });
+      }, 10000);
     },
-    loadChildren(row, _treeNode, resolve) {
-      getChildRegion(row.id).then((res) => {
-        if (!res.result?.length) {
-          resolve([]);
-          return;
-        }
-        resolve(res.result.map((child) => this.mapRegionRow(child, row.name)));
-      });
-    },
-    handleAsyncRegion() {
-      this.num = 10;
-      this.$Modal.confirm({
-        title: "确定更新？",
-        content: "更新后店铺以及用户地区绑定数据将全部错乱",
-        onOk: () => {
-          this.asyncLoading = true;
-          let messageInstance = null;
-          const showCountdown = () => {
-            if (messageInstance) messageInstance.close();
-            messageInstance = ElMessage.info({
-              message: `地区数据将在 ${this.num} 秒后更新`,
-              duration: 0,
-              showClose: true,
-            });
-          };
-          showCountdown();
-          const number = setInterval(() => {
-            this.num--;
-            showCountdown();
-          }, 1000);
-          setTimeout(() => {
-            clearInterval(number);
-            if (messageInstance) messageInstance.close();
-            ElMessage.closeAll();
-            asyncRegion().then(() => {
-              this.asyncLoading = false;
-              this.$Message.success("地区数据正在更新中！");
-              this.loadRoot();
-            });
-          }, 10000);
-        },
-      });
-    },
-  },
-};
+  });
+}
+
+onMounted(() => {
+  loadRoot();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/seller/bill/accountStatementBill.vue b/manager/src/views/seller/bill/accountStatementBill.vue
index b5e66b92d..174b32688 100644
--- a/manager/src/views/seller/bill/accountStatementBill.vue
+++ b/manager/src/views/seller/bill/accountStatementBill.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
         <el-form-item label="账单编号" prop="sn">
           <el-input v-model="searchForm.sn" placeholder="请输入账单编号" clearable style="width: 240px" />
         </el-form-item>
@@ -77,118 +77,122 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import * as API_Shop from "@/api/shops";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "bill",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      selectDate: null,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    billStatusText(v) {
-      const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
-      return map[v] || "已付款";
-    },
-    billStatusTagType(v) {
-      const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
-      return map[v] || "success";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.searchForm.startTime) {
-        this.searchForm.startTime = this.$filters.unixToDate(this.searchForm.startTime / 1000);
-      }
-      if (this.searchForm.endTime) {
-        this.searchForm.endTime = this.$filters.unixToDate(this.searchForm.endTime / 1000);
-      }
-      this.searchForm.billStatus = "CHECK";
-      API_Shop.getBuyBillPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    detail(v) {
-      this.$router.push({
-        name: "bill-detail",
-        query: { id: v.id },
-      });
-    },
-    handleExportList() {
-      const params = { ...this.searchForm };
-      delete params.billStatus;
-      API_Finance.exportBillList(params).then((blob) => {
-        downloadBlob(blob, "结算单列表.xlsx");
-      });
-    },
-    handleBatchDownload() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("请先选择结算单");
-        return;
-      }
-      const billIds = this.selectList.map((item) => item.id);
-      API_Finance.batchDownloadBills(billIds).then((blob) => {
-        downloadBlob(blob, "结算单批量下载.zip");
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "bill" });
+
+const router = useRouter();
+
+const searchFormRef = ref(null);
+const table = ref(null);
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const selectDate = ref(null);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+
+function billStatusText(v) {
+  const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
+  return map[v] || "已付款";
+}
+function billStatusTagType(v) {
+  const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
+  return map[v] || "success";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  if (searchForm.startTime) {
+    searchForm.startTime = unixToDate(searchForm.startTime / 1000);
+  }
+  if (searchForm.endTime) {
+    searchForm.endTime = unixToDate(searchForm.endTime / 1000);
+  }
+  searchForm.billStatus = "CHECK";
+  API_Shop.getBuyBillPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function detail(v) {
+  router.push({
+    name: "bill-detail",
+    query: { id: v.id },
+  });
+}
+function handleExportList() {
+  const params = { ...searchForm };
+  delete params.billStatus;
+  API_Finance.exportBillList(params).then((blob) => {
+    downloadBlob(blob, "结算单列表.xlsx");
+  });
+}
+function handleBatchDownload() {
+  if (selectCount.value <= 0) {
+    Message.warning("请先选择结算单");
+    return;
+  }
+  const billIds = selectList.value.map((item) => item.id);
+  API_Finance.batchDownloadBills(billIds).then((blob) => {
+    downloadBlob(blob, "结算单批量下载.zip");
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .link-text {
diff --git a/manager/src/views/seller/bill/bill-detail.vue b/manager/src/views/seller/bill/bill-detail.vue
index 2a096a19b..81c582fc0 100644
--- a/manager/src/views/seller/bill/bill-detail.vue
+++ b/manager/src/views/seller/bill/bill-detail.vue
@@ -292,235 +292,235 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import * as filters from "@/utils/filters";
 import * as API_Shop from "@/api/shops";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "bill-detail",
-  data() {
-    return {
-      activeTab: "order",
-      loading: false,
-      billData: [
-        {
-          billPrice: 0,
-          orderPrice: 0,
-          siteCouponCommission: 0,
-          pointSettlementPrice: 0,
-          kanjiaSettlementPrice: 0,
-          giftCardSubsidy: 0,
-          distributionCommission: 0,
-          commissionPrice: 0,
-          refundPrice: 0,
-          siteCouponRefundCommission: 0,
-          pointRefundSettlementPrice: 0,
-          kanjiaRefundSettlementPrice: 0,
-          giftCardRefundSubsidy: 0,
-          distributionRefundCommission: 0,
-          refundCommissionPrice: 0,
-        },
-      ],
-      data: [
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-      ],
-      id: "",
-      bill: {},
-      orderData: [],
-      orderParam: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "id",
-        order: "desc",
-        startDate: null,
-        endDate: null,
-      },
-      orderTotal: 0,
-      refundTotal: 0,
-      billStatusList: [
-        { status: "OUT", value: "已出账", title: "生成账单" },
-        { status: "CHECK", value: "已对账", title: "商家对账" },
-        { status: "PAY", value: "已付款", title: "平台付款" },
-        { status: "COMPLETE", value: "已完成", title: "结算完成" },
-      ],
-      billStatusStep: [],
-    };
+defineOptions({ name: "bill-detail" });
+
+const route = useRoute();
+
+const activeTab = ref("order");
+const loading = ref(false);
+const billData = ref([
+  {
+    billPrice: 0,
+    orderPrice: 0,
+    siteCouponCommission: 0,
+    pointSettlementPrice: 0,
+    kanjiaSettlementPrice: 0,
+    giftCardSubsidy: 0,
+    distributionCommission: 0,
+    commissionPrice: 0,
+    refundPrice: 0,
+    siteCouponRefundCommission: 0,
+    pointRefundSettlementPrice: 0,
+    kanjiaRefundSettlementPrice: 0,
+    giftCardRefundSubsidy: 0,
+    distributionRefundCommission: 0,
+    refundCommissionPrice: 0,
   },
-  methods: {
-    formatPrice(value) {
-      return this.$filters.unitPrice(value, "￥");
-    },
-    negate(value) {
-      return 0 - value;
-    },
-    isPayFlow(row) {
-      return row.flowType === "PAY";
-    },
-    orderSubsidyTotal(row) {
-      return (
-        row.pointSettlementPrice + row.kanjiaSettlementPrice + row.siteCouponCommission
-      );
-    },
-    orderSubsidyDisplay(row) {
-      if (row.pointSettlementPrice == 0) {
-        return "-";
-      }
-      return this.orderSubsidyTotal(row);
-    },
-    orderCommissionDisplay(row) {
-      return row.commissionPrice == 0 ? "-" : row.commissionPrice;
-    },
-    orderDistributionRebateDisplay(row) {
-      return row.distributionRebate == 0 ? "-" : row.distributionRebate;
-    },
-    orderExpenseTotal(row) {
-      return row.commissionPrice + row.distributionRebate;
-    },
-    getBillStatusStep() {
-      this.billStatusStep = [];
-      let current = "";
-      let myCur = false;
-      let myIdx = 0;
-      this.billStatusList.map((item, index) => {
-        if (item.status === this.bill.billStatus) {
-          myCur = true;
-          myIdx = index;
-          current = "";
-        } else if (!myCur) {
-          current = "";
-        } else if (myIdx + 1 === index) {
-          current = "current";
-        } else {
-          current = "future";
-        }
-        this.billStatusStep.push({ ...item, className: current });
-      });
-      if (this.bill.billStatus === "COMPLETE") {
-        this.billStatusStep[this.billStatusStep.length - 1].className = "current";
-      }
-    },
-    orderChangePage(v) {
-      this.orderParam.pageNumber = v;
-      this.getOrder();
-    },
-    orderChangePageSize(v) {
-      this.orderParam.pageNumber = 1;
-      this.orderParam.pageSize = v;
-      this.getOrder();
-    },
-    pass() {
-      this.$Modal.confirm({
-        title: "结算单付款",
-        content: "确定结算单已付款?",
-        loading: true,
-        onOk: () => {
-          API_Shop.pay(this.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success(res.message);
-              this.init();
-            }
-          });
-        },
-      });
-    },
-    download() {
-      API_Shop.downloadBill(this.id)
-        .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-          });
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = "结算单-" + this.id + ".xlsx";
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else {
-            navigator.msSaveBlob(blob, "结算单-" + this.id + ".xlsx");
-          }
-        });
-    },
-    init() {
-      this.id = this.$route.query.id;
-      this.getDetail();
-    },
-    getDetail() {
-      API_Shop.getBuyBillDetail(this.id).then((res) => {
+]);
+const data = ref([
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+]);
+const id = ref("");
+const bill = ref({});
+const orderData = ref([]);
+const orderParam = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "id",
+  order: "desc",
+  startDate: null,
+  endDate: null,
+});
+const orderTotal = ref(0);
+const refundTotal = ref(0);
+const billStatusList = ref([
+  { status: "OUT", value: "已出账", title: "生成账单" },
+  { status: "CHECK", value: "已对账", title: "商家对账" },
+  { status: "PAY", value: "已付款", title: "平台付款" },
+  { status: "COMPLETE", value: "已完成", title: "结算完成" },
+]);
+const billStatusStep = ref([]);
+
+function formatPrice(value) {
+  return filters.unitPrice(value, "￥");
+}
+function negate(value) {
+  return 0 - value;
+}
+function isPayFlow(row) {
+  return row.flowType === "PAY";
+}
+function orderSubsidyTotal(row) {
+  return (
+    row.pointSettlementPrice + row.kanjiaSettlementPrice + row.siteCouponCommission
+  );
+}
+function orderSubsidyDisplay(row) {
+  if (row.pointSettlementPrice == 0) {
+    return "-";
+  }
+  return orderSubsidyTotal(row);
+}
+function orderCommissionDisplay(row) {
+  return row.commissionPrice == 0 ? "-" : row.commissionPrice;
+}
+function orderDistributionRebateDisplay(row) {
+  return row.distributionRebate == 0 ? "-" : row.distributionRebate;
+}
+function orderExpenseTotal(row) {
+  return row.commissionPrice + row.distributionRebate;
+}
+function getBillStatusStep() {
+  billStatusStep.value = [];
+  let current = "";
+  let myCur = false;
+  let myIdx = 0;
+  billStatusList.value.map((item, index) => {
+    if (item.status === bill.value.billStatus) {
+      myCur = true;
+      myIdx = index;
+      current = "";
+    } else if (!myCur) {
+      current = "";
+    } else if (myIdx + 1 === index) {
+      current = "current";
+    } else {
+      current = "future";
+    }
+    billStatusStep.value.push({ ...item, className: current });
+  });
+  if (bill.value.billStatus === "COMPLETE") {
+    billStatusStep.value[billStatusStep.value.length - 1].className = "current";
+  }
+}
+function orderChangePage(v) {
+  orderParam.pageNumber = v;
+  getOrder();
+}
+function orderChangePageSize(v) {
+  orderParam.pageNumber = 1;
+  orderParam.pageSize = v;
+  getOrder();
+}
+function pass() {
+  Modal.confirm({
+    title: "结算单付款",
+    content: "确定结算单已付款?",
+    loading: true,
+    onOk: () => {
+      API_Shop.pay(id.value).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.bill = res.result;
-          this.initTable();
-          this.orderParam.startDate = this.bill.startTime;
-          this.orderParam.endDate = this.bill.endTime;
-          this.getOrder();
-          this.getBillStatusStep();
+          Message.success(res.message);
+          init();
         }
       });
     },
-    initTable() {
-      const bill = this.bill;
-      const money = (val) => (val === null || val === undefined || val === "" ? 0 : val);
-
-      this.data[0].name = "结算单状态";
-      this.data[0].value = filters.unixSellerBillStatus(bill.billStatus);
-      this.data[1].name = "结算单号";
-      this.data[1].value = bill.sn;
-      this.data[2].name = "店铺名称";
-      this.data[2].value = bill.storeName;
-      this.data[3].name = "起止日期";
-      this.data[3].value = bill.startTime + "~" + bill.endTime;
-      this.data[4].name = "银行开户名";
-      this.data[4].value = bill.bankAccountName;
-      this.data[5].name = "银行账号";
-      this.data[5].value = bill.bankAccountNumber;
-      this.data[6].name = "开户行支行名称";
-      this.data[6].value = bill.bankName;
-      this.data[7].name = "支行联行号";
-      this.data[7].value = bill.bankCode;
-      this.data[8].name = "支付时间";
-      this.data[8].value = bill.payTime === null ? "未付款" : bill.payTime;
-
-      this.billData[0].billPrice = money(this.bill.billPrice);
-      this.billData[0].orderPrice = money(this.bill.orderPrice);
-      this.billData[0].siteCouponCommission = money(this.bill.siteCouponCommission);
-      this.billData[0].pointSettlementPrice = money(this.bill.pointSettlementPrice);
-      this.billData[0].kanjiaSettlementPrice = money(this.bill.kanjiaSettlementPrice);
-      this.billData[0].giftCardSubsidy = money(this.bill.giftCardSubsidy);
-      this.billData[0].distributionCommission = money(this.bill.distributionCommission);
-      this.billData[0].commissionPrice = money(this.bill.commissionPrice);
-      this.billData[0].refundPrice = money(this.bill.refundPrice);
-      this.billData[0].siteCouponRefundCommission = money(this.bill.siteCouponRefundCommission);
-      this.billData[0].pointRefundSettlementPrice = money(this.bill.pointRefundSettlementPrice);
-      this.billData[0].kanjiaRefundSettlementPrice = money(this.bill.kanjiaRefundSettlementPrice);
-      this.billData[0].giftCardRefundSubsidy = money(this.bill.giftCardRefundSubsidy);
-      this.billData[0].distributionRefundCommission = money(this.bill.distributionRefundCommission);
-      this.billData[0].refundCommissionPrice = money(this.bill.refundCommissionPrice);
-    },
-    getOrder() {
-      API_Shop.getStoreFlow(this.id, this.orderParam).then((res) => {
-        if (res.result) {
-          this.orderData = res.result.records;
-          this.orderTotal = res.result.total;
-        }
+  });
+}
+function download() {
+  API_Shop.downloadBill(id.value)
+    .then((res) => {
+      const blob = new Blob([res], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
       });
-      this.orderTotal = this.orderData.length;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = "结算单-" + id.value + ".xlsx";
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
+      } else {
+        navigator.msSaveBlob(blob, "结算单-" + id.value + ".xlsx");
+      }
+    });
+}
+function init() {
+  id.value = route.query.id;
+  getDetail();
+}
+function getDetail() {
+  API_Shop.getBuyBillDetail(id.value).then((res) => {
+    if (res.success) {
+      bill.value = res.result;
+      initTable();
+      orderParam.startDate = bill.value.startTime;
+      orderParam.endDate = bill.value.endTime;
+      getOrder();
+      getBillStatusStep();
+    }
+  });
+}
+function initTable() {
+  const billValue = bill.value;
+  const money = (val) => (val === null || val === undefined || val === "" ? 0 : val);
+
+  data.value[0].name = "结算单状态";
+  data.value[0].value = filters.unixSellerBillStatus(billValue.billStatus);
+  data.value[1].name = "结算单号";
+  data.value[1].value = billValue.sn;
+  data.value[2].name = "店铺名称";
+  data.value[2].value = billValue.storeName;
+  data.value[3].name = "起止日期";
+  data.value[3].value = billValue.startTime + "~" + billValue.endTime;
+  data.value[4].name = "银行开户名";
+  data.value[4].value = billValue.bankAccountName;
+  data.value[5].name = "银行账号";
+  data.value[5].value = billValue.bankAccountNumber;
+  data.value[6].name = "开户行支行名称";
+  data.value[6].value = billValue.bankName;
+  data.value[7].name = "支行联行号";
+  data.value[7].value = billValue.bankCode;
+  data.value[8].name = "支付时间";
+  data.value[8].value = billValue.payTime === null ? "未付款" : billValue.payTime;
+
+  billData.value[0].billPrice = money(billValue.billPrice);
+  billData.value[0].orderPrice = money(billValue.orderPrice);
+  billData.value[0].siteCouponCommission = money(billValue.siteCouponCommission);
+  billData.value[0].pointSettlementPrice = money(billValue.pointSettlementPrice);
+  billData.value[0].kanjiaSettlementPrice = money(billValue.kanjiaSettlementPrice);
+  billData.value[0].giftCardSubsidy = money(billValue.giftCardSubsidy);
+  billData.value[0].distributionCommission = money(billValue.distributionCommission);
+  billData.value[0].commissionPrice = money(billValue.commissionPrice);
+  billData.value[0].refundPrice = money(billValue.refundPrice);
+  billData.value[0].siteCouponRefundCommission = money(billValue.siteCouponRefundCommission);
+  billData.value[0].pointRefundSettlementPrice = money(billValue.pointRefundSettlementPrice);
+  billData.value[0].kanjiaRefundSettlementPrice = money(billValue.kanjiaRefundSettlementPrice);
+  billData.value[0].giftCardRefundSubsidy = money(billValue.giftCardRefundSubsidy);
+  billData.value[0].distributionRefundCommission = money(billValue.distributionRefundCommission);
+  billData.value[0].refundCommissionPrice = money(billValue.refundCommissionPrice);
+}
+function getOrder() {
+  API_Shop.getStoreFlow(id.value, orderParam).then((res) => {
+    if (res.result) {
+      orderData.value = res.result.records;
+      orderTotal.value = res.result.total;
+    }
+  });
+  orderTotal.value = orderData.value.length;
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/seller/bill/bill.vue b/manager/src/views/seller/bill/bill.vue
index eb1b0785d..8f9de7fa1 100644
--- a/manager/src/views/seller/bill/bill.vue
+++ b/manager/src/views/seller/bill/bill.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -56,7 +56,7 @@
         <el-button :disabled="selectCount === 0" @click="handleBatchDownload">批量下载</el-button>
       </div>
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -106,159 +106,176 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import * as API_Shop from "@/api/shops";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { customRouterPush } from "@/utils/filters";
+import { Message, Modal } from "@/utils/message";
+import { deleteRequest } from "@/libs/axios";
 
-export default {
-  name: "bill",
-  data() {
-    return {
-      loading: true,
-      selectDate: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      activeStatus: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        sn: "",
-        storeName: "",
-        billStatus: "",
-        startDate: null,
-        endDate: null,
-      },
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    billStatusText(v) {
-      const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
-      return map[v] || v;
-    },
-    billStatusTagType(v) {
-      const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
-      return map[v] || "success";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    handleStatusChange(name) {
-      this.searchForm.billStatus = name;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startDate = this.selectDate[0];
-        this.searchForm.endDate = this.selectDate[1];
-      } else {
-        this.searchForm.startDate = null;
-        this.searchForm.endDate = null;
-      }
-      this.getDataList();
-    },
-    handleReset() {
-      this.selectDate = [];
-      this.searchForm.sn = "";
-      this.searchForm.storeName = "";
-      this.searchForm.startDate = null;
-      this.searchForm.endDate = null;
-      this.handleSearch();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Shop.getBuyBillPage(this.searchForm).then((res) => {
-        this.loading = false;
+defineOptions({ name: "bill" });
+
+const loading = ref(true);
+const selectDate = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const activeStatus = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  sn: "",
+  storeName: "",
+  billStatus: "",
+  startDate: null,
+  endDate: null,
+});
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+
+// 模板 ref（原 script 未使用 $refs，仅保留占位避免模板 ref 与响应式数据同名互相覆盖）
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+function billStatusText(v) {
+  const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
+  return map[v] || v;
+}
+
+function billStatusTagType(v) {
+  const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
+  return map[v] || "success";
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+
+function handleStatusChange(name) {
+  searchForm.billStatus = name;
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startDate = selectDate.value[0];
+    searchForm.endDate = selectDate.value[1];
+  } else {
+    searchForm.startDate = null;
+    searchForm.endDate = null;
+  }
+  getDataList();
+}
+
+function handleReset() {
+  selectDate.value = [];
+  searchForm.sn = "";
+  searchForm.storeName = "";
+  searchForm.startDate = null;
+  searchForm.endDate = null;
+  handleSearch();
+}
+
+function getDataList() {
+  loading.value = true;
+  API_Shop.getBuyBillPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function detail(v) {
+  customRouterPush({
+    name: "bill-detail",
+    query: { id: v.id },
+  });
+}
+
+function handleExportList() {
+  API_Finance.exportBillList({ ...searchForm }).then((blob) => {
+    downloadBlob(blob, "结算单列表.xlsx");
+  });
+}
+
+function handleBatchDownload() {
+  if (selectCount.value <= 0) {
+    Message.warning("请先选择结算单");
+    return;
+  }
+  const billIds = selectList.value.map((item) => item.id);
+  API_Finance.batchDownloadBills(billIds).then((blob) => {
+    downloadBlob(blob, "结算单批量下载.zip");
+  });
+}
+
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      deleteRequest("/bill/delByIds/" + v.id).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    detail(v) {
-      this.$filters.customRouterPush({
-        name: "bill-detail",
-        query: { id: v.id },
+  });
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteRequest("/bill/delByIds/" + ids).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-    handleExportList() {
-      API_Finance.exportBillList({ ...this.searchForm }).then((blob) => {
-        downloadBlob(blob, "结算单列表.xlsx");
-      });
-    },
-    handleBatchDownload() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("请先选择结算单");
-        return;
-      }
-      const billIds = this.selectList.map((item) => item.id);
-      API_Finance.batchDownloadBills(billIds).then((blob) => {
-        downloadBlob(blob, "结算单批量下载.zip");
-      });
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          this.deleteRequest("/bill/delByIds/" + v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          this.deleteRequest("/bill/delByIds/" + ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/seller/shop/shopAuditList.vue b/manager/src/views/seller/shop/shopAuditList.vue
index 7bdb17f70..f6ea65216 100644
--- a/manager/src/views/seller/shop/shopAuditList.vue
+++ b/manager/src/views/seller/shop/shopAuditList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
         <el-form-item label="会员名称" prop="memberName">
           <el-input
             v-model="searchForm.memberName"
@@ -88,69 +88,80 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getShopListData } from "@/api/shops";
 
-export default {
-  name: "shop",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    callback(val) {
-      this.$emit("callback", val);
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      this.searchForm.storeDisable = "APPLYING";
-      getShopListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    edit(v) {
-      this.$router.push({ path: "/shop-operation", query: { shopId: v.id } });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "shop" });
+
+const emit = defineEmits(["callback"]);
+
+const router = useRouter();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+
+const searchFormRef = ref(null);
+const table = ref(null);
+
+function callback(val) {
+  emit("callback", val);
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function selectDateRange(v) {
+  if (v) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  }
+}
+
+function getDataList() {
+  loading.value = true;
+  searchForm.storeDisable = "APPLYING";
+  getShopListData(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function edit(v) {
+  router.push({ path: "/shop-operation", query: { shopId: v.id } });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/seller/shop/shopDetail.vue b/manager/src/views/seller/shop/shopDetail.vue
index 841d9d9d2..ffc2602ee 100644
--- a/manager/src/views/seller/shop/shopDetail.vue
+++ b/manager/src/views/seller/shop/shopDetail.vue
@@ -130,7 +130,7 @@
 
         <el-tab-pane label="店员列表" name="clerk">
           <el-form
-            ref="clerkSearchForm"
+            ref="clerkSearchFormRef"
             :model="clerkSearchForm"
             inline
             label-width="70px"
@@ -198,7 +198,7 @@
         </el-tab-pane>
 
         <el-tab-pane label="订单列表" name="order" style="min-height: 200px">
-          <el-form ref="searchForm" :model="orderSearchForm" inline label-width="70px" class="search-form">
+          <el-form ref="searchFormRef" :model="orderSearchForm" inline label-width="70px" class="search-form">
             <el-form-item label="订单号" prop="orderSn">
               <el-input
                 v-model="orderSearchForm.orderSn"
@@ -326,7 +326,7 @@
 
         <el-tab-pane label="售后列表" name="afterSale">
           <el-form
-            ref="afterSaleSearchForm"
+            ref="afterSaleSearchFormRef"
             :model="afterSaleSearchForm"
             inline
             label-width="70px"
@@ -478,323 +478,324 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { getCategoryTree } from "@/api/goods";
 import * as API_Store from "@/api/shops.js";
 import * as API_Order from "@/api/order.js";
+import { Message } from "@/utils/message";
 
 const isValid = (v) => v !== null && v !== undefined && v !== "" && v !== "null";
 
-export default {
-  name: "member",
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      id: "",
-      activeTab: "basic",
-      categories: [],
-      loading: true,
-      storeInfo: {},
-      storeEnabled: false,
-      storeStatusChanging: false,
-      checkAllGroup: [],
-      orderSelectDate: null,
-      afterSaleSelectDate: null,
-      orderData: [],
-      orderTotal: 0,
-      orderSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        payStatus: "",
-        orderSn: "",
-        orderType: "",
-      },
-      afterSaleData: [],
-      afterSaleTotal: 0,
-      afterSaleSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      clerkData: [],
-      clerkTotal: 0,
-      clerkLoading: false,
-      clerkSearchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        clerkName: "",
-        mobile: "",
-      },
-    };
-  },
-  computed: {
-    displayCategories() {
-      if (!this.categories?.length || !this.checkAllGroup?.length) {
-        return [];
-      }
-      const selected = new Set(this.checkAllGroup.map(String));
-      return this.categories.filter(
-        (item) => item?.id != null && selected.has(String(item.id))
-      );
-    },
-    storeAddress() {
-      const path = isValid(this.storeInfo.storeAddressPath) ? this.storeInfo.storeAddressPath : "";
-      const detail = isValid(this.storeInfo.storeAddressDetail) ? this.storeInfo.storeAddressDetail : "";
-      return path || detail ? `${path} ${detail}`.trim() : "暂未完善";
-    },
-    returnAddress() {
-      const s = this.storeInfo;
-      const consignee = [s.salesConsigneeName, s.salesConsigneeMobile].filter(isValid).join(" ");
-      const addr = [s.salesConsigneeAddressPath, s.salesConsigneeDetail].filter(isValid).join(" ");
-      const text = `${consignee} ${addr}`.trim();
-      return text || "暂未完善";
-    },
-    companyAddress() {
-      const s = this.storeInfo;
-      if (!isValid(s.companyAddressPath) && !isValid(s.companyAddress)) {
-        return "暂未完善";
-      }
-      return `${isValid(s.companyAddressPath) ? s.companyAddressPath : ""} ${
-        isValid(s.companyAddress) ? s.companyAddress : ""
-      }`.trim();
-    },
-    settlementCycles() {
-      if (!this.storeInfo.settlementCycle) {
-        return [];
-      }
-      return this.storeInfo.settlementCycle.split(",").filter(Boolean);
-    },
-  },
-  methods: {
-    blankFilter(v) {
-      return isValid(v) ? v : "-";
-    },
-    orderTypeText(v) {
-      const map = {
-        NORMAL: "普通订单",
-        VIRTUAL: "虚拟订单",
-        E_COUPON: "电子卡券订单",
-        APPOINTMENT: "预约服务订单",
-      };
-      return map[v] || v || "";
-    },
-    clientTypeText(v) {
-      const map = {
-        H5: "移动端",
-        PC: "PC端",
-        WECHAT_MP: "小程序端",
-        APP: "移动应用端",
-      };
-      return map[v] || v || "";
-    },
-    orderStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已关闭",
-      };
-      return map[v] || v || "";
-    },
-    payStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-      };
-      return map[v] || v || "";
-    },
-    groupAfterSaleStatusText(v) {
-      const map = {
-        NEW: "未申请",
-        NOT_APPLIED: "未申请",
-        ALREADY_APPLIED: "已申请",
-        EXPIRED: "已失效",
-      };
-      return map[v] || v || "";
-    },
-    groupComplainStatusText(v) {
-      const map = {
-        NEW: "未申请",
-        NO_APPLY: "未申请",
-        APPLYING: "申请中",
-        COMPLETE: "已完成",
-        EXPIRED: "已失效",
-        CANCEL: "取消投诉",
-      };
-      return map[v] || v || "";
-    },
-    serviceTypeText(type) {
-      const map = {
-        RETURN_MONEY: "退款",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-      };
-      return map[type] || type || "";
-    },
-    serviceStatusText(status) {
-      const map = {
-        APPLY: "申请中",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_RE_DELIVERY: "商家换货/补发",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CONFIRM: "买家确认收货",
-        BUYER_CANCEL: "买家取消售后",
-        COMPLETE: "完成售后",
-        WAIT_REFUND: "待平台退款",
-      };
-      return map[status] || status || "";
-    },
-    init() {
-      this.getStoreInfo();
-      this.getCategories();
-    },
-    storeInfoChange(v) {
-      if (v == "order") {
-        this.getOrderData();
-      }
-      if (v == "afterSale") {
-        this.getAfterSaleData();
-      }
-      if (v == "clerk") {
-        this.getClerkData();
-      }
-    },
-    getStoreInfo() {
-      API_Store.getShopDetailData(this.id).then((res) => {
-        this.storeInfo = res.result;
-        this.storeEnabled = this.storeInfo.storeDisable === "OPEN";
-        if (this.storeInfo.goodsManagementCategory != null) {
-          this.checkAllGroup = this.storeInfo.goodsManagementCategory
-            .split(",")
-            .filter(Boolean);
-        }
-        this.storeInfo.legalPhoto = (this.storeInfo.legalPhoto || "")
-          .split(",")
-          .filter(Boolean);
-      });
-    },
-    shopStatusChange(v) {
-      this.storeStatusChanging = true;
-      const request = v ? API_Store.enableBrand(this.id) : API_Store.disableShop(this.id);
-      request
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.getStoreInfo();
-          } else {
-            this.storeEnabled = !v;
-          }
-        })
-        .catch(() => {
-          this.storeEnabled = !v;
-        })
-        .finally(() => {
-          this.storeStatusChanging = false;
-        });
-    },
-    getOrderData() {
-      this.loading = true;
-      this.orderSearchForm.storeId = this.id;
-      API_Order.getOrderList(this.orderSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.orderData = res.result.records;
-          this.orderTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    getAfterSaleData() {
-      this.loading = true;
-      this.afterSaleSearchForm.storeId = this.id;
-      API_Order.getAfterSaleOrderPage(this.afterSaleSearchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.afterSaleData = res.result.records;
-          this.afterSaleTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    getCategories() {
-      getCategoryTree().then((res) => {
-        if (res.success) {
-          this.categories = res.result;
-        }
-      });
-    },
-    afterSaleChangePage(v) {
-      this.afterSaleSearchForm.pageNumber = v;
-      this.getAfterSaleData();
-    },
-    afterSaleChangePageSize(v) {
-      this.afterSaleSearchForm.pageSize = v;
-      this.afterSaleSearchForm.pageNumber = 1;
-      this.getAfterSaleData();
-    },
-    getClerkData() {
-      this.clerkLoading = true;
-      API_Store.getShopClerkPage(this.id, this.clerkSearchForm)
-        .then((res) => {
-          if (res.success) {
-            this.clerkData = res.result.records;
-            this.clerkTotal = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.clerkLoading = false;
-        });
-    },
-    clerkChangePage(v) {
-      this.clerkSearchForm.pageNumber = v;
-      this.getClerkData();
-    },
-    clerkChangePageSize(v) {
-      this.clerkSearchForm.pageSize = v;
-      this.clerkSearchForm.pageNumber = 1;
-      this.getClerkData();
-    },
-    orderChangePage(v) {
-      this.orderSearchForm.pageNumber = v;
-      this.getOrderData();
-    },
-    orderChangePageSize(v) {
-      this.orderSearchForm.pageSize = v;
-      this.orderSearchForm.pageNumber = 1;
-      this.getOrderData();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.orderSearchForm.startDate = v[0];
-        this.orderSearchForm.endDate = v[1];
+defineOptions({ name: "member" });
+
+const route = useRoute();
+
+const id = ref("");
+const activeTab = ref("basic");
+const categories = ref([]);
+const loading = ref(true);
+const storeInfo = ref({});
+const storeEnabled = ref(false);
+const storeStatusChanging = ref(false);
+const checkAllGroup = ref([]);
+const orderSelectDate = ref(null);
+const afterSaleSelectDate = ref(null);
+const orderData = ref([]);
+const orderTotal = ref(0);
+const orderSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  payStatus: "",
+  orderSn: "",
+  orderType: "",
+});
+const afterSaleData = ref([]);
+const afterSaleTotal = ref(0);
+const afterSaleSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const clerkData = ref([]);
+const clerkTotal = ref(0);
+const clerkLoading = ref(false);
+const clerkSearchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  clerkName: "",
+  mobile: "",
+});
+
+// 模板 ref（原 Options API 中未在 script 使用，保留）
+const clerkSearchFormRef = ref(null);
+const searchFormRef = ref(null);
+const afterSaleSearchFormRef = ref(null);
+
+const displayCategories = computed(() => {
+  if (!categories.value?.length || !checkAllGroup.value?.length) {
+    return [];
+  }
+  const selected = new Set(checkAllGroup.value.map(String));
+  return categories.value.filter(
+    (item) => item?.id != null && selected.has(String(item.id))
+  );
+});
+const storeAddress = computed(() => {
+  const path = isValid(storeInfo.value.storeAddressPath) ? storeInfo.value.storeAddressPath : "";
+  const detail = isValid(storeInfo.value.storeAddressDetail) ? storeInfo.value.storeAddressDetail : "";
+  return path || detail ? `${path} ${detail}`.trim() : "暂未完善";
+});
+const returnAddress = computed(() => {
+  const s = storeInfo.value;
+  const consignee = [s.salesConsigneeName, s.salesConsigneeMobile].filter(isValid).join(" ");
+  const addr = [s.salesConsigneeAddressPath, s.salesConsigneeDetail].filter(isValid).join(" ");
+  const text = `${consignee} ${addr}`.trim();
+  return text || "暂未完善";
+});
+const companyAddress = computed(() => {
+  const s = storeInfo.value;
+  if (!isValid(s.companyAddressPath) && !isValid(s.companyAddress)) {
+    return "暂未完善";
+  }
+  return `${isValid(s.companyAddressPath) ? s.companyAddressPath : ""} ${
+    isValid(s.companyAddress) ? s.companyAddress : ""
+  }`.trim();
+});
+const settlementCycles = computed(() => {
+  if (!storeInfo.value.settlementCycle) {
+    return [];
+  }
+  return storeInfo.value.settlementCycle.split(",").filter(Boolean);
+});
+
+function blankFilter(v) {
+  return isValid(v) ? v : "-";
+}
+function orderTypeText(v) {
+  const map = {
+    NORMAL: "普通订单",
+    VIRTUAL: "虚拟订单",
+    E_COUPON: "电子卡券订单",
+    APPOINTMENT: "预约服务订单",
+  };
+  return map[v] || v || "";
+}
+function clientTypeText(v) {
+  const map = {
+    H5: "移动端",
+    PC: "PC端",
+    WECHAT_MP: "小程序端",
+    APP: "移动应用端",
+  };
+  return map[v] || v || "";
+}
+function orderStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已关闭",
+  };
+  return map[v] || v || "";
+}
+function payStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+  };
+  return map[v] || v || "";
+}
+function groupAfterSaleStatusText(v) {
+  const map = {
+    NEW: "未申请",
+    NOT_APPLIED: "未申请",
+    ALREADY_APPLIED: "已申请",
+    EXPIRED: "已失效",
+  };
+  return map[v] || v || "";
+}
+function groupComplainStatusText(v) {
+  const map = {
+    NEW: "未申请",
+    NO_APPLY: "未申请",
+    APPLYING: "申请中",
+    COMPLETE: "已完成",
+    EXPIRED: "已失效",
+    CANCEL: "取消投诉",
+  };
+  return map[v] || v || "";
+}
+function serviceTypeText(type) {
+  const map = {
+    RETURN_MONEY: "退款",
+    RETURN_GOODS: "退货",
+    EXCHANGE_GOODS: "换货",
+  };
+  return map[type] || type || "";
+}
+function serviceStatusText(status) {
+  const map = {
+    APPLY: "申请中",
+    PASS: "通过售后",
+    REFUSE: "拒绝售后",
+    BUYER_RETURN: "买家退货，待卖家收货",
+    SELLER_RE_DELIVERY: "商家换货/补发",
+    SELLER_CONFIRM: "卖家确认收货",
+    SELLER_TERMINATION: "卖家终止售后",
+    BUYER_CONFIRM: "买家确认收货",
+    BUYER_CANCEL: "买家取消售后",
+    COMPLETE: "完成售后",
+    WAIT_REFUND: "待平台退款",
+  };
+  return map[status] || status || "";
+}
+function init() {
+  getStoreInfo();
+  getCategories();
+}
+function storeInfoChange(v) {
+  if (v == "order") {
+    getOrderData();
+  }
+  if (v == "afterSale") {
+    getAfterSaleData();
+  }
+  if (v == "clerk") {
+    getClerkData();
+  }
+}
+function getStoreInfo() {
+  API_Store.getShopDetailData(id.value).then((res) => {
+    storeInfo.value = res.result;
+    storeEnabled.value = storeInfo.value.storeDisable === "OPEN";
+    if (storeInfo.value.goodsManagementCategory != null) {
+      checkAllGroup.value = storeInfo.value.goodsManagementCategory
+        .split(",")
+        .filter(Boolean);
+    }
+    storeInfo.value.legalPhoto = (storeInfo.value.legalPhoto || "")
+      .split(",")
+      .filter(Boolean);
+  });
+}
+function shopStatusChange(v) {
+  storeStatusChanging.value = true;
+  const request = v ? API_Store.enableBrand(id.value) : API_Store.disableShop(id.value);
+  request
+    .then((res) => {
+      if (res.success) {
+        Message.success("操作成功");
+        getStoreInfo();
       } else {
-        this.orderSearchForm.startDate = "";
-        this.orderSearchForm.endDate = "";
+        storeEnabled.value = !v;
       }
-    },
-    selectAfterSaleDateRange(v) {
-      if (v && v.length === 2) {
-        this.afterSaleSearchForm.startDate = v[0];
-        this.afterSaleSearchForm.endDate = v[1];
-      } else {
-        this.afterSaleSearchForm.startDate = "";
-        this.afterSaleSearchForm.endDate = "";
+    })
+    .catch(() => {
+      storeEnabled.value = !v;
+    })
+    .finally(() => {
+      storeStatusChanging.value = false;
+    });
+}
+function getOrderData() {
+  loading.value = true;
+  orderSearchForm.storeId = id.value;
+  API_Order.getOrderList(orderSearchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      orderData.value = res.result.records;
+      orderTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function getAfterSaleData() {
+  loading.value = true;
+  afterSaleSearchForm.storeId = id.value;
+  API_Order.getAfterSaleOrderPage(afterSaleSearchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      afterSaleData.value = res.result.records;
+      afterSaleTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function getCategories() {
+  getCategoryTree().then((res) => {
+    if (res.success) {
+      categories.value = res.result;
+    }
+  });
+}
+function afterSaleChangePage(v) {
+  afterSaleSearchForm.pageNumber = v;
+  getAfterSaleData();
+}
+function afterSaleChangePageSize(v) {
+  afterSaleSearchForm.pageSize = v;
+  afterSaleSearchForm.pageNumber = 1;
+  getAfterSaleData();
+}
+function getClerkData() {
+  clerkLoading.value = true;
+  API_Store.getShopClerkPage(id.value, clerkSearchForm)
+    .then((res) => {
+      if (res.success) {
+        clerkData.value = res.result.records;
+        clerkTotal.value = res.result.total;
       }
-    },
-  },
-  mounted() {
-    this.id = this.$route.query.id;
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      clerkLoading.value = false;
+    });
+}
+function clerkChangePage(v) {
+  clerkSearchForm.pageNumber = v;
+  getClerkData();
+}
+function clerkChangePageSize(v) {
+  clerkSearchForm.pageSize = v;
+  clerkSearchForm.pageNumber = 1;
+  getClerkData();
+}
+function orderChangePage(v) {
+  orderSearchForm.pageNumber = v;
+  getOrderData();
+}
+function orderChangePageSize(v) {
+  orderSearchForm.pageSize = v;
+  orderSearchForm.pageNumber = 1;
+  getOrderData();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    orderSearchForm.startDate = v[0];
+    orderSearchForm.endDate = v[1];
+  } else {
+    orderSearchForm.startDate = "";
+    orderSearchForm.endDate = "";
+  }
+}
+function selectAfterSaleDateRange(v) {
+  if (v && v.length === 2) {
+    afterSaleSearchForm.startDate = v[0];
+    afterSaleSearchForm.endDate = v[1];
+  } else {
+    afterSaleSearchForm.startDate = "";
+    afterSaleSearchForm.endDate = "";
+  }
+}
+
+onMounted(() => {
+  id.value = route.query.id;
+  init();
+});
 </script>
 <style lang="scss" scoped>
 @import "shopDetail.scss";
diff --git a/manager/src/views/seller/shop/shopList.vue b/manager/src/views/seller/shop/shopList.vue
index 26b89e7b4..c7d8a56ce 100644
--- a/manager/src/views/seller/shop/shopList.vue
+++ b/manager/src/views/seller/shop/shopList.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -57,7 +57,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -133,154 +133,173 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getShopListData, disableShop, enableBrand, shopAudit } from "@/api/shops";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "shop",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      selectedShop: false,
-    };
-  },
-  methods: {
-    storeDisableText(v) {
-      const map = {
-        OPEN: "开启中",
-        CLOSED: "已关闭",
-        APPLY: "申请中",
-        APPLYING: "审核中",
-        REFUSED: "审核拒绝",
-      };
-      return map[v] || v || "-";
-    },
-    callback(val) {
-      this.$emit("callback", val);
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
+defineOptions({ name: "shop" });
+
+const emit = defineEmits(["callback"]);
+
+const router = useRouter();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const selectedShop = ref(false);
+
+// 模板 ref（原 ref="searchForm" / ref="table"，script 内未使用，仅改名避免与 data 同名覆盖）
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+function storeDisableText(v) {
+  const map = {
+    OPEN: "开启中",
+    CLOSED: "已关闭",
+    APPLY: "申请中",
+    APPLYING: "审核中",
+    REFUSED: "审核拒绝",
+  };
+  return map[v] || v || "-";
+}
+
+function callback(val) {
+  emit("callback", val);
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+
+function getDataList() {
+  loading.value = true;
+  getShopListData(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-    },
-    getDataList() {
-      this.loading = true;
-      getShopListData(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    add() {
-      this.$router.push({ path: "/shop-operation" });
-    },
-    edit(v) {
-      this.$router.push({ path: "/shop-operation", query: { shopId: v.id } });
-    },
-    disable(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "您确认要关闭店铺 " + v.storeName + " ?",
-        loading: true,
-        onOk: () => {
-          disableShop(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function add() {
+  router.push({ path: "/shop-operation" });
+}
+
+function edit(v) {
+  router.push({ path: "/shop-operation", query: { shopId: v.id } });
+}
+
+function disable(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "您确认要关闭店铺 " + v.storeName + " ?",
+    loading: true,
+    onOk: () => {
+      disableShop(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-    detail(row) {
-      this.$router.push({ name: "shop-detail", query: { id: row.id } });
-    },
-    audit(v) {
-      this.$Modal.confirm({
-        title: "审核店铺",
-        content: "您确认要审核通过店铺 " + v.storeName + " ?",
-        okText: "通过",
-        cancelText: "驳回",
-        loading: true,
-        onOk: () => {
-          shopAudit(v.id, 0).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
-        onCancel: () => {
-          shopAudit(v.id, 1).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+
+function detail(row) {
+  router.push({ name: "shop-detail", query: { id: row.id } });
+}
+
+function audit(v) {
+  Modal.confirm({
+    title: "审核店铺",
+    content: "您确认要审核通过店铺 " + v.storeName + " ?",
+    okText: "通过",
+    cancelText: "驳回",
+    loading: true,
+    onOk: () => {
+      shopAudit(v.id, 0).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-    enable(v) {
-      this.$Modal.confirm({
-        title: "确认开启",
-        content: "您确认要开启店铺 " + v.storeName + " ?",
-        loading: true,
-        onOk: () => {
-          enableBrand(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+    onCancel: () => {
+      shopAudit(v.id, 1).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
       });
     },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+function enable(v) {
+  Modal.confirm({
+    title: "确认开启",
+    content: "您确认要开启店铺 " + v.storeName + " ?",
+    loading: true,
+    onOk: () => {
+      enableBrand(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/seller/shop/shopOperation.vue b/manager/src/views/seller/shop/shopOperation.vue
index 396c07519..eaa2a3080 100644
--- a/manager/src/views/seller/shop/shopOperation.vue
+++ b/manager/src/views/seller/shop/shopOperation.vue
@@ -9,7 +9,7 @@
         >审核</el-button
       >
       <el-form
-        ref="shopForm"
+        ref="shopFormRef"
         :model="shopForm"
         label-width="130px"
         label-position="right"
@@ -358,7 +358,7 @@
         @callback="callbackSelected"
         :isComponent="true"
         :initialize="picModelFlag"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
 
@@ -373,7 +373,7 @@
         v-if="memberModalFlag"
         :selectedMember="true"
         @callback="callbackMember"
-        ref="memberLayout"
+        ref="memberLayoutRef"
       />
     </el-dialog>
 
@@ -398,425 +398,426 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import memberLayout from "@/views/member/list/index";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { getCategoryTree } from "@/api/goods";
 import { shopDetail, shopAdd, shopEdit, getShopByMemberId, shopAudit } from "@/api/shops";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import multipleMap from "@/components/map/multiple-map";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "shop-operation",
-  components: {
-    uploadPicInput,
-    ossManage,
-    memberLayout,
-    multipleMap,
-  },
+defineOptions({ name: "shop-operation" });
 
-  data() {
-    return {
-      shopId: this.$route.query.shopId, // 店铺id
-      isRead: false, // 是否只读，只有在店铺通过审核才可修改
-      selectedFormBtnName: "", // 点击图片绑定form
-      loading: false,
-      auditModel: false,
-      auditModalLoading: false,
-      picModelFlag: false, // 图片选择器
-      address: "", // 地址
-      returnAddress: "", // 退货地址
-      memberModalFlag: false, // 商家账号
-      settlementShow: false, // 是否展示结算日输入框
-      addSettlementConfirmBtn: false, // 添加结算日确认按钮
-      addSettlementBtn: true, // 添加结算日按钮
-      day: 1, //结算日
-      tabName: "base", // tab栏name值
-      tabNameList: ["base", "entry", "category", "settlement"], // tab栏name值数组
-      shopValidate: {
-        // 表单验证规则
-        memberName: [{ required: true, message: "会员不能为空" }],
-        storeAddressPath: [{ required: true, message: "店铺地址不能为空" }],
-        storeName: [{ required: true, message: "店铺名称不能为空" }],
-        companyAddress: [{ required: true, message: "公司地址不能为空" }],
-        storeAddressDetail: [{ required: true, message: "店铺详细地址不能为空" }],
-        storeDesc: [{ required: true, message: "店铺简介不能为空" }],
-        storeCenter: [{ required: true, message: "店铺未定位" }],
-        companyName: [{ required: true, message: "公司名称不能为空" }],
-        companyPhone: [{ required: true, message: "公司电话不能为空" }],
-        employeeNum: [
-          {
-            required: true,
-            type: "number",
-            message: "员工总数不能为空",
-            trigger: "blur",
-          },
-        ],
-        companyAddressIdPath: [{ required: true, message: "请选择公司地址" }],
-        registeredCapital: [
-          {
-            required: true,
-            type: "number",
-            message: "注册资金不能为空",
-            trigger: "blur",
-          },
-        ],
-        linkName: [{ required: true, message: "联系人姓名不能为空" }],
-        linkPhone: [
-          { required: true, message: "联系人手机号不能为空" },
-          {
-            type: "string",
-            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
-            message: "手机号格式出错",
-            trigger: "blur",
-          },
-        ],
-        companyEmail: [
-          { required: true, message: "邮箱不能为空" },
-          { type: "email", message: "邮箱格式错误" },
-        ],
-        licenseNum: [{ required: true, message: "营业执照号不能为空" }],
-        scope: [{ required: true, message: "法定经营范围不能为空" }],
-        licencePhoto: [{ required: true, message: "营业执照电子版不能为空" }],
-        legalName: [{ required: true, message: "法人姓名不能为空" }],
-        legalId: [{ required: true, message: "法人证件号不能为空" }],
-        settlementBankAccountName: [{ required: true, message: "银行开户名不能为空" }],
-        settlementBankAccountNum: [{ required: true, message: "银行账号不能为空" }],
-        settlementBankBranchName: [{ required: true, message: "银行支行名称不能为空" }],
-        settlementBankJointName: [{ required: true, message: "支行联行号不能为空" }],
+const route = useRoute();
+const router = useRouter();
 
-        salesConsigneeMobile: [
-          {
-            type: "string",
-            pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
-            message: "手机号格式出错",
-            trigger: "blur",
-          },
-        ],
-      },
-      indeterminate: true, // 复选框全选样式
-      checkAll: false, // 全选
-      checkAllGroup: [], // 全选数组
-      submitLoading: false, // 添加或编辑提交状态
-      settlementCycle: [], // 结算日
-      shopForm: {
-        // 店铺数据
-        storeAddressPath: "",
+const shopFormRef = ref(null);
+const ossManageRef = ref(null);
+const memberLayoutRef = ref(null);
+const map = ref(null);
 
-        settlementCycle: "",
-        selfOperated: "false",
-        memberName: "",
-        companyName: "",
-        addressPath: "",
-        addressIdPath: "",
-        companyAddressPath: "",
-        companyAddressIdPath: "",
-        companyAddress: "",
-        companyEmail: "",
-        employeeNum: 1,
-        registeredCapital: 1,
-        linkName: "",
-        linkPhone: "",
-        licenseNum: "",
-        scope: "",
-        licencePhoto: "",
-        legalName: "",
-        legalId: "",
-        legalPhoto: ["", ""],
-        companyPhone: "",
-        settlementBankAccountName: "",
-        settlementBankAccountNum: "",
-        settlementBankBranchName: "",
-        settlementBankJointName: "",
-        businesses: "",
-        storeName: "",
-        storeLogo: "",
-        storeDesc: "",
-        ddCode: "",
-      },
-      categories: [], // 分类
-
-      infoResult: {}, // 店铺详情
-      picIndex: "", // 存储身份证图片下标，方便赋值
-      currentAddress: "", //当前选中的地址
-    };
-  },
-  methods: {
-    // 选择地址
-    handleClickAddress(val) {
-      this.currentAddress = val;
-      this.$refs.map.open();
+const shopId = ref(route.query.shopId); // 店铺id
+const isRead = ref(false); // 是否只读，只有在店铺通过审核才可修改
+const selectedFormBtnName = ref(""); // 点击图片绑定form
+const loading = ref(false);
+const auditModel = ref(false);
+const auditModalLoading = ref(false);
+const picModelFlag = ref(false); // 图片选择器
+const address = ref(""); // 地址
+const returnAddress = ref(""); // 退货地址
+const memberModalFlag = ref(false); // 商家账号
+const settlementShow = ref(false); // 是否展示结算日输入框
+const addSettlementConfirmBtn = ref(false); // 添加结算日确认按钮
+const addSettlementBtn = ref(true); // 添加结算日按钮
+const day = ref(1); //结算日
+const tabName = ref("base"); // tab栏name值
+const tabNameList = ref(["base", "entry", "category", "settlement"]); // tab栏name值数组
+const shopValidate = reactive({
+  // 表单验证规则
+  memberName: [{ required: true, message: "会员不能为空" }],
+  storeAddressPath: [{ required: true, message: "店铺地址不能为空" }],
+  storeName: [{ required: true, message: "店铺名称不能为空" }],
+  companyAddress: [{ required: true, message: "公司地址不能为空" }],
+  storeAddressDetail: [{ required: true, message: "店铺详细地址不能为空" }],
+  storeDesc: [{ required: true, message: "店铺简介不能为空" }],
+  storeCenter: [{ required: true, message: "店铺未定位" }],
+  companyName: [{ required: true, message: "公司名称不能为空" }],
+  companyPhone: [{ required: true, message: "公司电话不能为空" }],
+  employeeNum: [
+    {
+      required: true,
+      type: "number",
+      message: "员工总数不能为空",
+      trigger: "blur",
     },
-    // 选择会员的回调
-    callbackMember(val) {
-      if (val) {
-        //选择会员后需要检验此会员是否开过店铺
-        getShopByMemberId(val.id).then((res) => {
+  ],
+  companyAddressIdPath: [{ required: true, message: "请选择公司地址" }],
+  registeredCapital: [
+    {
+      required: true,
+      type: "number",
+      message: "注册资金不能为空",
+      trigger: "blur",
+    },
+  ],
+  linkName: [{ required: true, message: "联系人姓名不能为空" }],
+  linkPhone: [
+    { required: true, message: "联系人手机号不能为空" },
+    {
+      type: "string",
+      pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
+      message: "手机号格式出错",
+      trigger: "blur",
+    },
+  ],
+  companyEmail: [
+    { required: true, message: "邮箱不能为空" },
+    { type: "email", message: "邮箱格式错误" },
+  ],
+  licenseNum: [{ required: true, message: "营业执照号不能为空" }],
+  scope: [{ required: true, message: "法定经营范围不能为空" }],
+  licencePhoto: [{ required: true, message: "营业执照电子版不能为空" }],
+  legalName: [{ required: true, message: "法人姓名不能为空" }],
+  legalId: [{ required: true, message: "法人证件号不能为空" }],
+  settlementBankAccountName: [{ required: true, message: "银行开户名不能为空" }],
+  settlementBankAccountNum: [{ required: true, message: "银行账号不能为空" }],
+  settlementBankBranchName: [{ required: true, message: "银行支行名称不能为空" }],
+  settlementBankJointName: [{ required: true, message: "支行联行号不能为空" }],
+
+  salesConsigneeMobile: [
+    {
+      type: "string",
+      pattern: /^1[3|4|5|6|7|8][0-9]{9}$/,
+      message: "手机号格式出错",
+      trigger: "blur",
+    },
+  ],
+});
+const indeterminate = ref(true); // 复选框全选样式
+const checkAll = ref(false); // 全选
+const checkAllGroup = ref([]); // 全选数组
+const submitLoading = ref(false); // 添加或编辑提交状态
+const settlementCycle = ref([]); // 结算日
+const shopForm = ref({
+  // 店铺数据
+  storeAddressPath: "",
+
+  settlementCycle: "",
+  selfOperated: "false",
+  memberName: "",
+  companyName: "",
+  addressPath: "",
+  addressIdPath: "",
+  companyAddressPath: "",
+  companyAddressIdPath: "",
+  companyAddress: "",
+  companyEmail: "",
+  employeeNum: 1,
+  registeredCapital: 1,
+  linkName: "",
+  linkPhone: "",
+  licenseNum: "",
+  scope: "",
+  licencePhoto: "",
+  legalName: "",
+  legalId: "",
+  legalPhoto: ["", ""],
+  companyPhone: "",
+  settlementBankAccountName: "",
+  settlementBankAccountNum: "",
+  settlementBankBranchName: "",
+  settlementBankJointName: "",
+  businesses: "",
+  storeName: "",
+  storeLogo: "",
+  storeDesc: "",
+  ddCode: "",
+});
+const categories = ref([]); // 分类
+
+const infoResult = ref({}); // 店铺详情
+const picIndex = ref(""); // 存储身份证图片下标，方便赋值
+const currentAddress = ref(""); //当前选中的地址
+
+// 历史遗留：regionClick 中未在 data 声明、直接挂到 this 上的字段
+let showRegion = false;
+let regionId = "";
+
+// 选择地址
+function handleClickAddress(val) {
+  currentAddress.value = val;
+  map.value.open();
+}
+// 选择会员的回调
+function callbackMember(val) {
+  if (val) {
+    //选择会员后需要检验此会员是否开过店铺
+    getShopByMemberId(val.id).then((res) => {
+      if (res.success) {
+        if (res.result != null) {
+          Message.error("当前会员已经拥有店铺");
+        } else {
+          shopForm.value.memberId = val.id;
+          shopForm.value.memberName = val.username;
+        }
+        memberModalFlag.value = false;
+      }
+    });
+  }
+}
+
+//选择会员
+function selectMember() {
+  memberModalFlag.value = true;
+}
+
+//修改地址
+function regionClick() {
+  showRegion = true;
+  regionId = "";
+}
+//删除所选择的结算日
+function removesettlementCycle(name) {
+  settlementCycle.value = settlementCycle.value.filter((i) => i !== name);
+}
+//确认添加方法
+function addsettlementCycle() {
+  settlementShow.value = true;
+  addSettlementConfirmBtn.value = true;
+  addSettlementBtn.value = false;
+}
+//添加结算日
+function addsettlementCycleConfirm() {
+  if (!day.value) {
+    Message.warning("请输入正确的结算日，1-31的整数");
+    return;
+  }
+  if (settlementCycle.value.includes(day.value)) {
+    Message.warning("已有该结算日，不能重复输入");
+    return;
+  }
+  settlementCycle.value.push(day.value);
+  addSettlementConfirmBtn.value = false;
+  addSettlementBtn.value = true;
+  settlementShow.value = false;
+  day.value = 1;
+}
+// 选择公司地址
+function selectedRegion(val) {
+  shopForm.value.companyAddressIdPath = val[0].toString();
+  shopForm.value.companyAddressPath = val[1].toString().replace(/\s/g, "");
+}
+// 选择退货收件地址
+function selectedConsigneeRegion(val) {
+  shopForm.value.salesConsigneeAddressId = val[0].toString();
+  shopForm.value.salesConsigneeAddressPath = val[1].toString().replace(/\s/g, "");
+}
+// 选择图片modal
+function handleCLickImg(val, index) {
+  picModelFlag.value = true;
+  selectedFormBtnName.value = val;
+  picIndex.value = index;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 图片回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (picIndex.value === 0 || picIndex.value === 1) {
+    shopForm.value[selectedFormBtnName.value][picIndex.value] = val.url;
+  } else {
+    shopForm.value[selectedFormBtnName.value] = val.url;
+  }
+  picIndex.value = "";
+}
+// 初始化数据
+function init() {
+  getCategories();
+  if (shopId.value) {
+    getShopDetail();
+  }
+}
+function next() {
+  // 下一步
+  let index = tabNameList.value.indexOf(tabName.value) + 1;
+  tabName.value = tabNameList.value[index];
+}
+function prev() {
+  // 上一步
+  let index = tabNameList.value.indexOf(tabName.value) - 1;
+  tabName.value = tabNameList.value[index];
+}
+// 获取店铺详情
+function getShopDetail() {
+  shopDetail(shopId.value).then((res) => {
+    if (res.success) {
+      infoResult.value = res.result;
+      shopForm.value = res.result;
+      shopForm.value.selfOperated
+        ? (shopForm.value.selfOperated = "true")
+        : (shopForm.value.selfOperated = "false");
+
+      checkAllGroup.value = shopForm.value.goodsManagementCategory.split(",");
+      if (shopForm.value.settlementCycle) {
+        settlementCycle.value = shopForm.value.settlementCycle.split(",");
+      }
+      shopForm.value.legalPhoto = shopForm.value.legalPhoto.split(",");
+
+      address.value = shopForm.value.companyAddressIdPath;
+      returnAddress.value = shopForm.value.salesConsigneeAddressId;
+    }
+  });
+}
+// 保存
+function save() {
+  shopFormRef.value.validate((valid) => {
+    //校验结算日是否已经确认完成
+    if (settlementShow.value) {
+      Message.error("请确认当前所填结算日信息");
+      return;
+    }
+    //校验经营类目
+    if (checkAllGroup.value == "") {
+      Message.error("请选择店铺经营类目");
+      tabName.value = "category";
+      return;
+    }
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(shopForm.value));
+      //处理经营类目，结算日
+      params.goodsManagementCategory = checkAllGroup.value;
+      params.settlementCycle = settlementCycle.value;
+      if (shopId.value) {
+        delete params.memberId;
+        shopEdit(shopId.value, filterFun(params)).then((res) => {
           if (res.success) {
-            if (res.result != null) {
-              this.$Message.error("当前会员已经拥有店铺");
-            } else {
-              this.shopForm.memberId = val.id;
-              this.shopForm.memberName = val.username;
-            }
-            this.memberModalFlag = false;
+            Message.success("编辑成功");
+            router.push({ name: "shopList" });
           }
         });
-      }
-    },
-
-    //选择会员
-    selectMember() {
-      this.memberModalFlag = true;
-    },
-
-    //修改地址
-    regionClick() {
-      this.showRegion = true;
-      this.regionId = "";
-    },
-    //删除所选择的结算日
-    removesettlementCycle(name) {
-      this.settlementCycle = this.settlementCycle.filter((i) => i !== name);
-    },
-    //确认添加方法
-    addsettlementCycle() {
-      this.settlementShow = true;
-      this.addSettlementConfirmBtn = true;
-      this.addSettlementBtn = false;
-    },
-    //添加结算日
-    addsettlementCycleConfirm() {
-      if (!this.day) {
-        this.$Message.warning("请输入正确的结算日，1-31的整数");
-        return;
-      }
-      if (this.settlementCycle.includes(this.day)) {
-        this.$Message.warning("已有该结算日，不能重复输入");
-        return;
-      }
-      this.settlementCycle.push(this.day);
-      this.addSettlementConfirmBtn = false;
-      this.addSettlementBtn = true;
-      this.settlementShow = false;
-      this.day = 1;
-    },
-    // 选择公司地址
-    selectedRegion(val) {
-      this.shopForm.companyAddressIdPath = val[0].toString();
-      this.shopForm.companyAddressPath = val[1].toString().replace(/\s/g, "");
-    },
-    // 选择退货收件地址
-    selectedConsigneeRegion(val) {
-      this.shopForm.salesConsigneeAddressId = val[0].toString();
-      this.shopForm.salesConsigneeAddressPath = val[1].toString().replace(/\s/g, "");
-    },
-    // 选择图片modal
-    handleCLickImg(val, index) {
-      this.picModelFlag = true;
-      this.selectedFormBtnName = val;
-      this.picIndex = index;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 图片回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (this.picIndex === 0 || this.picIndex === 1) {
-        this.shopForm[this.selectedFormBtnName][this.picIndex] = val.url;
       } else {
-        this.shopForm[this.selectedFormBtnName] = val.url;
-      }
-      this.picIndex = "";
-    },
-    // 初始化数据
-    init() {
-      this.getCategories();
-      if (this.shopId) {
-        this.getShopDetail();
-      }
-    },
-    next() {
-      // 下一步
-      let index = this.tabNameList.indexOf(this.tabName) + 1;
-      this.tabName = this.tabNameList[index];
-    },
-    prev() {
-      // 上一步
-      let index = this.tabNameList.indexOf(this.tabName) - 1;
-      this.tabName = this.tabNameList[index];
-    },
-    // 获取店铺详情
-    getShopDetail() {
-      shopDetail(this.shopId).then((res) => {
-        if (res.success) {
-          this.infoResult = res.result;
-          this.shopForm = res.result;
-          this.shopForm.selfOperated
-            ? (this.shopForm.selfOperated = "true")
-            : (this.shopForm.selfOperated = "false");
-
-          this.checkAllGroup = this.shopForm.goodsManagementCategory.split(",");
-          if (this.shopForm.settlementCycle) {
-            this.settlementCycle = this.shopForm.settlementCycle.split(",");
-          }
-          this.shopForm.legalPhoto = this.shopForm.legalPhoto.split(",");
-
-          this.address = this.shopForm.companyAddressIdPath;
-          this.returnAddress = this.shopForm.salesConsigneeAddressId;
-        }
-      });
-    },
-    // 保存
-    save() {
-      this.$refs.shopForm.validate((valid) => {
-        //校验结算日是否已经确认完成
-        if (this.settlementShow) {
-          this.$Message.error("请确认当前所填结算日信息");
+        //添加店铺单独需要检验的参数
+        if (params.memberName == "") {
+          Message.error("请选择开店的会员");
           return;
         }
-        //校验经营类目
-        if (this.checkAllGroup == "") {
-          this.$Message.error("请选择店铺经营类目");
-          this.tabName = "category";
-          return;
-        }
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.shopForm));
-          //处理经营类目，结算日
-          params.goodsManagementCategory = this.checkAllGroup;
-          params.settlementCycle = this.settlementCycle;
-          if (this.shopId) {
-            delete params.memberId;
-            shopEdit(this.shopId, this.filterFun(params)).then((res) => {
-              if (res.success) {
-                this.$Message.success("编辑成功");
-                this.$router.push({ name: "shopList" });
-              }
-            });
-          } else {
-            //添加店铺单独需要检验的参数
-            if (params.memberName == "") {
-              this.$Message.error("请选择开店的会员");
-              return;
-            }
-            shopAdd(this.filterFun(params)).then((resp) => {
-              if (resp.success) {
-                this.$Message.success("添加成功");
-                this.shopForm = {};
-                this.$router.push({ name: "shopList" });
-              }
-            });
-          }
-        }
-      });
-    },
-    // 筛选值为空的参数
-    filterFun(params) {
-      Object.entries(params).map((value) => {
-        if (!value[1] || value[1] === "" || value[1] === "null") {
-          delete params[value[0]];
-        }
-      });
-      return params;
-    },
-    // 点击定位获取店铺地址
-    getAddress(val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-
-        const ids = val.data.map((item) => item.id).join(",");
-
-        if (this.currentAddress === "storeAddressPath") {
-          this.shopForm.storeAddressPath = paths;
-          this.shopForm.storeAddressIdPath = ids;
-
-          this.shopForm.center = val.data[val.data.length - 1].center;
-        } else if (this.currentAddress === "salesConsigneeAddressPath") {
-          this.shopForm.salesConsigneeAddressPath = paths;
-          this.shopForm.salesConsigneeAddressId = ids;
-        } else if (this.currentAddress === "companyAddressPath") {
-          this.shopForm.companyAddressPath = paths;
-          this.shopForm.companyAddressIdPath = ids;
-        }
-      } else {
-        if (this.currentAddress === "storeAddressPath") {
-          this.shopForm.storeCenter = val.data.position.lng + "," + val.data.position.lat;
-          this.shopForm.storeAddressPath = val.data.addr;
-          this.shopForm.storeAddressIdPath = val.data.addrId;
-        } else if (this.currentAddress === "salesConsigneeAddressPath") {
-          this.shopForm.salesConsigneeAddressPath = val.data.addr;
-          this.shopForm.salesConsigneeAddressId = val.data.addrId;
-        } else if (this.currentAddress === "companyAddressPath") {
-          this.shopForm.companyAddressPath = val.data.addr;
-          this.shopForm.companyAddressIdPath = val.data.addrId;
-        }
-      }
-    },
-    // 全部选中
-    handleCheckAll(checked) {
-      this.indeterminate = false;
-      if (checked) {
-        const checkAllDate = [];
-        this.categories.forEach((i) => checkAllDate.push(String(i.id)));
-        this.checkAllGroup = checkAllDate;
-      } else {
-        this.checkAllGroup = [];
-      }
-    },
-    // 经营类目的选择
-    checkAllGroupChange(data) {
-      if (data.length === this.categories.length) {
-        this.indeterminate = false;
-        this.checkAll = true;
-      } else if (data.length > 0) {
-        this.indeterminate = true;
-        this.checkAll = false;
-      } else {
-        this.indeterminate = false;
-        this.checkAll = false;
-      }
-    },
-    // 获取所有分类
-    getCategories() {
-      getCategoryTree().then((res) => {
-        if (res.success) {
-          this.categories = res.result;
-        }
-      });
-    },
-    auditHandler() {
-      this.auditModel = true;
-    },
-    // 审核店铺
-    audit(operation) {
-      let id = this.$route.query.shopId;
-      if (operation === "PASS") {
-        shopAudit(id, 0).then((res) => {
-          this.auditModel = false;
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.$router.push({ name: "shopAuth" });
-          }
-        });
-      } else {
-        shopAudit(id, 1).then((res) => {
-          this.auditModel = false;
-          if (res.success) {
-            this.$Message.success("操作成功");
-            this.$router.push({ name: "shopAuth" });
+        shopAdd(filterFun(params)).then((resp) => {
+          if (resp.success) {
+            Message.success("添加成功");
+            shopForm.value = {};
+            router.push({ name: "shopList" });
           }
         });
       }
-    },
-  },
-  created() {
-    this.init();
-  },
-};
+    }
+  });
+}
+// 筛选值为空的参数
+function filterFun(params) {
+  Object.entries(params).map((value) => {
+    if (!value[1] || value[1] === "" || value[1] === "null") {
+      delete params[value[0]];
+    }
+  });
+  return params;
+}
+// 点击定位获取店铺地址
+function getAddress(val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+
+    const ids = val.data.map((item) => item.id).join(",");
+
+    if (currentAddress.value === "storeAddressPath") {
+      shopForm.value.storeAddressPath = paths;
+      shopForm.value.storeAddressIdPath = ids;
+
+      shopForm.value.center = val.data[val.data.length - 1].center;
+    } else if (currentAddress.value === "salesConsigneeAddressPath") {
+      shopForm.value.salesConsigneeAddressPath = paths;
+      shopForm.value.salesConsigneeAddressId = ids;
+    } else if (currentAddress.value === "companyAddressPath") {
+      shopForm.value.companyAddressPath = paths;
+      shopForm.value.companyAddressIdPath = ids;
+    }
+  } else {
+    if (currentAddress.value === "storeAddressPath") {
+      shopForm.value.storeCenter = val.data.position.lng + "," + val.data.position.lat;
+      shopForm.value.storeAddressPath = val.data.addr;
+      shopForm.value.storeAddressIdPath = val.data.addrId;
+    } else if (currentAddress.value === "salesConsigneeAddressPath") {
+      shopForm.value.salesConsigneeAddressPath = val.data.addr;
+      shopForm.value.salesConsigneeAddressId = val.data.addrId;
+    } else if (currentAddress.value === "companyAddressPath") {
+      shopForm.value.companyAddressPath = val.data.addr;
+      shopForm.value.companyAddressIdPath = val.data.addrId;
+    }
+  }
+}
+// 全部选中
+function handleCheckAll(checked) {
+  indeterminate.value = false;
+  if (checked) {
+    const checkAllDate = [];
+    categories.value.forEach((i) => checkAllDate.push(String(i.id)));
+    checkAllGroup.value = checkAllDate;
+  } else {
+    checkAllGroup.value = [];
+  }
+}
+// 经营类目的选择
+function checkAllGroupChange(data) {
+  if (data.length === categories.value.length) {
+    indeterminate.value = false;
+    checkAll.value = true;
+  } else if (data.length > 0) {
+    indeterminate.value = true;
+    checkAll.value = false;
+  } else {
+    indeterminate.value = false;
+    checkAll.value = false;
+  }
+}
+// 获取所有分类
+function getCategories() {
+  getCategoryTree().then((res) => {
+    if (res.success) {
+      categories.value = res.result;
+    }
+  });
+}
+function auditHandler() {
+  auditModel.value = true;
+}
+// 审核店铺
+function audit(operation) {
+  let id = route.query.shopId;
+  if (operation === "PASS") {
+    shopAudit(id, 0).then((res) => {
+      auditModel.value = false;
+      if (res.success) {
+        Message.success("操作成功");
+        router.push({ name: "shopAuth" });
+      }
+    });
+  } else {
+    shopAudit(id, 1).then((res) => {
+      auditModel.value = false;
+      if (res.success) {
+        Message.success("操作成功");
+        router.push({ name: "shopAuth" });
+      }
+    });
+  }
+}
+
+init();
 </script>
 <style lang="scss" scoped>
 .selectedMember {
diff --git a/manager/src/views/sensitive-words/index.vue b/manager/src/views/sensitive-words/index.vue
index 75f4cb9a2..0e949d836 100644
--- a/manager/src/views/sensitive-words/index.vue
+++ b/manager/src/views/sensitive-words/index.vue
@@ -52,7 +52,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="敏感词" prop="sensitiveWord">
           <el-input v-model="form.sensitiveWord" clearable style="width: 100%" />
         </el-form-item>
@@ -65,172 +65,174 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import {
   getSensitiveWordsPage,
   delSensitive,
   insertSensitiveWords,
   updateSensitiveWords,
 } from "@/api/index";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "sensitive-words",
-  data() {
-    return {
-      loading: true,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        sensitiveWord: "",
-      },
-      form: {
-        sensitiveWord: "",
-      },
-      formValidate: {
-        sensitiveWord: [
-          {
-            required: true,
-            message: "请输入敏感词",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
+defineOptions({ name: "sensitive-words" });
+
+const loading = ref(true);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  sensitiveWord: "",
+});
+const form = ref({
+  sensitiveWord: "",
+});
+const formValidate = reactive({
+  sensitiveWord: [
+    {
+      required: true,
+      message: "请输入敏感词",
+      trigger: "blur",
     },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    getDataList() {
-      this.loading = true;
-      getSensitiveWordsPage(this.searchForm)
-        .then((res) => {
+  ],
+});
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+// 补充声明：原代码未在 data 声明，直接挂载 this 上
+let id = null;
+
+const table = ref(null);
+const formRef = ref(null);
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function getDataList() {
+  loading.value = true;
+  getSensitiveWordsPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalType.value == 0) {
+        delete form.value.id;
+        insertSensitiveWords(form.value).then((res) => {
+          submitLoading.value = false;
           if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
-        })
-        .finally(() => {
-          this.loading = false;
         });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType == 0) {
-            delete this.form.id;
-            insertSensitiveWords(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            updateSensitiveWords(this.id, this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
+      } else {
+        updateSensitiveWords(id, form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getDataList();
+            modalVisible.value = false;
           }
+        });
+      }
+    }
+  });
+}
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加";
+  form.value = {};
+  formRef.value?.resetFields();
+  modalVisible.value = true;
+}
+function detail(v) {
+  modalType.value = 1;
+  id = v.id;
+  modalTitle.value = "修改";
+  modalVisible.value = true;
+  form.value.sensitiveWord = v.sensitiveWord;
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.sensitiveWord + " ?",
+    loading: true,
+    onOk: () => {
+      delSensitive(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getDataList();
         }
       });
     },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加";
-      this.form = {};
-      this.$refs.form?.resetFields();
-      this.modalVisible = true;
-    },
-    detail(v) {
-      this.modalType = 1;
-      this.id = v.id;
-      this.modalTitle = "修改";
-      this.modalVisible = true;
-      this.form.sensitiveWord = v.sensitiveWord;
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.sensitiveWord + " ?",
-        loading: true,
-        onOk: () => {
-          delSensitive(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      delSensitive(ids).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          delSensitive(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/statistics/data-report.vue b/manager/src/views/statistics/data-report.vue
index 9acf4b298..f45f814b6 100644
--- a/manager/src/views/statistics/data-report.vue
+++ b/manager/src/views/statistics/data-report.vue
@@ -26,8 +26,9 @@
   </div>
 </template>
 
-<script>
-import { markRaw } from "vue";
+<script setup>
+import { markRaw, ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   ArrowRight,
   DataAnalysis,
@@ -36,6 +37,8 @@ import {
   TrendCharts,
 } from "@element-plus/icons-vue";
 
+defineOptions({ name: "data-report" });
+
 const REPORT_MODULES = [
   {
     name: "storePerformanceReport",
@@ -63,26 +66,13 @@ const REPORT_MODULES = [
   },
 ];
 
-export default {
-  name: "data-report",
-  components: {
-    ArrowRight,
-    TrendCharts,
-    DataAnalysis,
-    Document,
-    Goods,
-  },
-  data() {
-    return {
-      modules: REPORT_MODULES,
-    };
-  },
-  methods: {
-    goReport(name) {
-      this.$router.push({ name });
-    },
-  },
-};
+const router = useRouter();
+
+const modules = ref(REPORT_MODULES);
+
+function goReport(name) {
+  router.push({ name });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/deposit.vue b/manager/src/views/statistics/deposit.vue
index e9d7fca28..42efa39dd 100644
--- a/manager/src/views/statistics/deposit.vue
+++ b/manager/src/views/statistics/deposit.vue
@@ -17,122 +17,120 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, reactive } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { Chart } from "@antv/g2";
 
-export default {
-  data() {
+const charts = reactive({
+  balanceChart: null,
+  timesChart: null,
+  amountChart: null,
+});
+
+onMounted(() => {
+  loadData();
+});
+
+onBeforeUnmount(() => {
+  destroyCharts();
+});
+
+function destroyCharts() {
+  ["balanceChart", "timesChart", "amountChart"].forEach((key) => {
+    if (charts[key]) {
+      charts[key].destroy();
+      charts[key] = null;
+    }
+  });
+}
+function withProportion(list) {
+  const rows = list || [];
+  const total = rows.reduce((sum, item) => sum + (Number(item.memberNum) || 0), 0);
+  return rows.map((item) => {
+    const num = Number(item.memberNum) || 0;
+    const proportion = total > 0 ? Math.round((num / total) * 10000) / 100 : 0;
     return {
-      balanceChart: null,
-      timesChart: null,
-      amountChart: null,
+      label: item.label,
+      memberNum: num,
+      proportion,
     };
-  },
-  mounted() {
-    this.loadData();
-  },
-  beforeUnmount() {
-    this.destroyCharts();
-  },
-  methods: {
-    destroyCharts() {
-      ["balanceChart", "timesChart", "amountChart"].forEach((key) => {
-        if (this[key]) {
-          this[key].destroy();
-          this[key] = null;
-        }
-      });
-    },
-    withProportion(list) {
-      const rows = list || [];
-      const total = rows.reduce((sum, item) => sum + (Number(item.memberNum) || 0), 0);
-      return rows.map((item) => {
-        const num = Number(item.memberNum) || 0;
-        const proportion = total > 0 ? Math.round((num / total) * 10000) / 100 : 0;
-        return {
-          label: item.label,
-          memberNum: num,
-          proportion,
-        };
-      });
-    },
-    renderBarChart(chartKey, containerId, data, xTitle) {
-      if (this[chartKey]) {
-        this[chartKey].destroy();
-        this[chartKey] = null;
-      }
-      this.$nextTick(() => {
-        const chart = new Chart({
-          container: containerId,
-          autoFit: true,
-          height: 320,
-          padding: [40, 40, 50, 60],
-        });
-        chart.data(data || []);
-        chart.scale("memberNum", {
-          nice: true,
-          min: 0,
-          alias: "客户数",
-        });
-        chart.axis("label", {
-          title: {
-            text: xTitle,
-          },
-        });
-        chart.tooltip({
-          showMarkers: false,
-          shared: true,
-        });
-        chart
-          .interval()
-          .position("label*memberNum")
-          .color("#409EFF")
-          .label("memberNum", {
-            offset: 8,
-          })
-          .tooltip("label*memberNum*proportion", (label, memberNum, proportion) => ({
-            name: label,
-            value: `${memberNum}人（${proportion}%）`,
-          }));
-        chart.interaction("active-region");
-        chart.render();
-        this[chartKey] = chart;
-      });
-    },
-    async loadData() {
-      const [balanceRes, timesRes, amountRes] = await Promise.all([
-        API_Statistics.getDepositBalanceDistribution(),
-        API_Statistics.getDepositRechargeTimesDistribution(),
-        API_Statistics.getDepositRechargeAmountDistribution(),
-      ]);
-      if (balanceRes && balanceRes.success) {
-        this.renderBarChart(
-          "balanceChart",
-          "depositBalanceChart",
-          this.withProportion(balanceRes.result || []),
-          "余额区间(元)"
-        );
-      }
-      if (timesRes && timesRes.success) {
-        this.renderBarChart(
-          "timesChart",
-          "depositTimesChart",
-          this.withProportion(timesRes.result || []),
-          "充值次数区间"
-        );
-      }
-      if (amountRes && amountRes.success) {
-        this.renderBarChart(
-          "amountChart",
-          "depositAmountChart",
-          this.withProportion(amountRes.result || []),
-          "累计充值金额区间(元)"
-        );
-      }
-    },
-  },
-};
+  });
+}
+function renderBarChart(chartKey, containerId, data, xTitle) {
+  if (charts[chartKey]) {
+    charts[chartKey].destroy();
+    charts[chartKey] = null;
+  }
+  nextTick(() => {
+    const chart = new Chart({
+      container: containerId,
+      autoFit: true,
+      height: 320,
+      padding: [40, 40, 50, 60],
+    });
+    chart.data(data || []);
+    chart.scale("memberNum", {
+      nice: true,
+      min: 0,
+      alias: "客户数",
+    });
+    chart.axis("label", {
+      title: {
+        text: xTitle,
+      },
+    });
+    chart.tooltip({
+      showMarkers: false,
+      shared: true,
+    });
+    chart
+      .interval()
+      .position("label*memberNum")
+      .color("#409EFF")
+      .label("memberNum", {
+        offset: 8,
+      })
+      .tooltip("label*memberNum*proportion", (label, memberNum, proportion) => ({
+        name: label,
+        value: `${memberNum}人（${proportion}%）`,
+      }));
+    chart.interaction("active-region");
+    chart.render();
+    charts[chartKey] = chart;
+  });
+}
+async function loadData() {
+  const [balanceRes, timesRes, amountRes] = await Promise.all([
+    API_Statistics.getDepositBalanceDistribution(),
+    API_Statistics.getDepositRechargeTimesDistribution(),
+    API_Statistics.getDepositRechargeAmountDistribution(),
+  ]);
+  if (balanceRes && balanceRes.success) {
+    renderBarChart(
+      "balanceChart",
+      "depositBalanceChart",
+      withProportion(balanceRes.result || []),
+      "余额区间(元)"
+    );
+  }
+  if (timesRes && timesRes.success) {
+    renderBarChart(
+      "timesChart",
+      "depositTimesChart",
+      withProportion(timesRes.result || []),
+      "充值次数区间"
+    );
+  }
+  if (amountRes && amountRes.success) {
+    renderBarChart(
+      "amountChart",
+      "depositAmountChart",
+      withProportion(amountRes.result || []),
+      "累计充值金额区间(元)"
+    );
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/distribution.vue b/manager/src/views/statistics/distribution.vue
index 4c1880c88..fb43601d8 100644
--- a/manager/src/views/statistics/distribution.vue
+++ b/manager/src/views/statistics/distribution.vue
@@ -163,7 +163,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import {
   getDistributionOverviewV2,
@@ -173,151 +174,142 @@ import {
 import affixTime from "@/components/affix-time";
 import { QuestionFilled } from "@element-plus/icons-vue";
 
-export default {
-  components: { affixTime, QuestionFilled },
-  data() {
-    return {
-      activeTab: "overview",
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        storeId: "",
-      },
-      overview: {},
-      overviewV2: {},
-      distributorRank: [],
-      goodsRank: [],
-      behaviorData: [],
-      behaviorTotal: 0,
-      behaviorLoading: false,
-      behaviorPage: { pageNumber: 1, pageSize: 20 },
-      goodsData: [],
-      goodsTotal: 0,
-      goodsLoading: false,
-      goodsPage: { pageNumber: 1, pageSize: 20 },
-      metricDefs: [
-        { key: "distributorNum", label: "分销员数", tip: "已通过审核的分销员数量" },
-        { key: "applyNum", label: "待审核分销员", tip: "申请中待审核的分销员数量" },
-        { key: "distributionOrderNum", label: "分销订单数", tip: "周期内分销订单笔数" },
-        { key: "distributionOrderAmount", label: "分销订单金额", isMoney: true, tip: "周期内分销订单佣金合计" },
-        { key: "settledCommission", label: "已结算佣金", isMoney: true, tip: "周期内已完成结算的佣金" },
-        { key: "pendingCommission", label: "待结算佣金", isMoney: true, tip: "周期内待结算的佣金" },
-        { key: "cashAmount", label: "提现金额", isMoney: true, tip: "周期内分销员提现金额" },
-      ],
-      todayMetricDefs: [
-        { key: "todayNewDistributorCount", label: "今日新增分销员" },
-        { key: "todayNewSubDistributorCount", label: "今日新增下级分销员" },
-        { key: "todaySalesAmount", label: "今日分销员销售额", isMoney: true },
-        { key: "todayPaidCustomerCount", label: "今日成交客户数" },
-        { key: "todayCommissionAmount", label: "今日支出佣金", isMoney: true },
-      ],
-      totalMetricDefs: [
-        { key: "totalDistributorCount", label: "累计分销员数" },
-        { key: "totalSubDistributorCount", label: "累计下级分销员数" },
-        { key: "totalSalesAmount", label: "累计分销员销售额", isMoney: true },
-        { key: "totalPaidCustomerCount", label: "累计成交客户数" },
-        { key: "totalShareVisitorCount", label: "商品分享引流" },
-        { key: "totalCommissionAmount", label: "累计支出佣金", isMoney: true },
-      ],
-    };
+const activeTab = ref("overview");
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  storeId: "",
+});
+const overview = ref({});
+const overviewV2 = ref({});
+const distributorRank = ref([]);
+const goodsRank = ref([]);
+const behaviorData = ref([]);
+const behaviorTotal = ref(0);
+const behaviorLoading = ref(false);
+const behaviorPage = ref({ pageNumber: 1, pageSize: 20 });
+const goodsData = ref([]);
+const goodsTotal = ref(0);
+const goodsLoading = ref(false);
+const goodsPage = ref({ pageNumber: 1, pageSize: 20 });
+const metricDefs = ref([
+  { key: "distributorNum", label: "分销员数", tip: "已通过审核的分销员数量" },
+  { key: "applyNum", label: "待审核分销员", tip: "申请中待审核的分销员数量" },
+  { key: "distributionOrderNum", label: "分销订单数", tip: "周期内分销订单笔数" },
+  { key: "distributionOrderAmount", label: "分销订单金额", isMoney: true, tip: "周期内分销订单佣金合计" },
+  { key: "settledCommission", label: "已结算佣金", isMoney: true, tip: "周期内已完成结算的佣金" },
+  { key: "pendingCommission", label: "待结算佣金", isMoney: true, tip: "周期内待结算的佣金" },
+  { key: "cashAmount", label: "提现金额", isMoney: true, tip: "周期内分销员提现金额" },
+]);
+const todayMetricDefs = ref([
+  { key: "todayNewDistributorCount", label: "今日新增分销员" },
+  { key: "todayNewSubDistributorCount", label: "今日新增下级分销员" },
+  { key: "todaySalesAmount", label: "今日分销员销售额", isMoney: true },
+  { key: "todayPaidCustomerCount", label: "今日成交客户数" },
+  { key: "todayCommissionAmount", label: "今日支出佣金", isMoney: true },
+]);
+const totalMetricDefs = ref([
+  { key: "totalDistributorCount", label: "累计分销员数" },
+  { key: "totalSubDistributorCount", label: "累计下级分销员数" },
+  { key: "totalSalesAmount", label: "累计分销员销售额", isMoney: true },
+  { key: "totalPaidCustomerCount", label: "累计成交客户数" },
+  { key: "totalShareVisitorCount", label: "商品分享引流" },
+  { key: "totalCommissionAmount", label: "累计支出佣金", isMoney: true },
+]);
+
+watch(
+  params,
+  () => {
+    loadOverviewData();
+    if (activeTab.value === "behavior") {
+      loadBehavior();
+    } else if (activeTab.value === "goods") {
+      loadGoods();
+    }
   },
-  watch: {
-    params: {
-      handler() {
-        this.loadOverviewData();
-        if (this.activeTab === "behavior") {
-          this.loadBehavior();
-        } else if (this.activeTab === "goods") {
-          this.loadGoods();
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    clickBreadcrumb(item) {
-      this.params = {
-        searchType: item.searchType || "",
-        year: item.year || "",
-        month: item.month || "",
-        storeId: item.storeId || "",
-      };
-    },
-    onTabChange(name) {
-      if (name === "behavior") {
-        this.loadBehavior();
-      } else if (name === "goods") {
-        this.loadGoods();
-      }
-    },
-    formatNumber(val) {
-      if (val == null || val === "") return 0;
-      const num = Number(val);
-      return Number.isNaN(num) ? 0 : Math.round(num);
-    },
-    formatRate(val) {
-      if (val == null || val === "") return "-";
-      return `${(Number(val) * 100).toFixed(2)}%`;
-    },
-    async loadOverviewData() {
-      const query = { ...this.params };
-      const [overviewRes, distributorRes, goodsRes, overviewV2Res] = await Promise.all([
-        API_Statistics.getDistributionOverview(query),
-        API_Statistics.getDistributionRankDistributor(query),
-        API_Statistics.getDistributionRankGoods(query),
-        getDistributionOverviewV2(),
-      ]);
-      if (overviewRes && overviewRes.success) {
-        this.overview = overviewRes.result || {};
-      }
-      if (distributorRes && distributorRes.success) {
-        this.distributorRank = distributorRes.result || [];
-      }
-      if (goodsRes && goodsRes.success) {
-        this.goodsRank = goodsRes.result || [];
-      }
-      if (overviewV2Res && overviewV2Res.success) {
-        this.overviewV2 = overviewV2Res.result || {};
-      }
-    },
-    loadBehavior() {
-      this.behaviorLoading = true;
-      getDistributionBehaviorV2({
-        pageNumber: this.behaviorPage.pageNumber,
-        pageSize: this.behaviorPage.pageSize,
-      }).then((res) => {
-        this.behaviorLoading = false;
-        if (res.success) {
-          this.behaviorData = res.result.records || [];
-          this.behaviorTotal = res.result.total || 0;
-        }
-      });
-    },
-    onBehaviorSizeChange() {
-      this.behaviorPage.pageNumber = 1;
-      this.loadBehavior();
-    },
-    loadGoods() {
-      this.goodsLoading = true;
-      getDistributionGoodsV2({
-        pageNumber: this.goodsPage.pageNumber,
-        pageSize: this.goodsPage.pageSize,
-      }).then((res) => {
-        this.goodsLoading = false;
-        if (res.success) {
-          this.goodsData = res.result.records || [];
-          this.goodsTotal = res.result.total || 0;
-        }
-      });
-    },
-    onGoodsSizeChange() {
-      this.goodsPage.pageNumber = 1;
-      this.loadGoods();
-    },
-  },
-};
+  { deep: true, immediate: true }
+);
+
+function clickBreadcrumb(item) {
+  params.value = {
+    searchType: item.searchType || "",
+    year: item.year || "",
+    month: item.month || "",
+    storeId: item.storeId || "",
+  };
+}
+function onTabChange(name) {
+  if (name === "behavior") {
+    loadBehavior();
+  } else if (name === "goods") {
+    loadGoods();
+  }
+}
+function formatNumber(val) {
+  if (val == null || val === "") return 0;
+  const num = Number(val);
+  return Number.isNaN(num) ? 0 : Math.round(num);
+}
+function formatRate(val) {
+  if (val == null || val === "") return "-";
+  return `${(Number(val) * 100).toFixed(2)}%`;
+}
+async function loadOverviewData() {
+  const query = { ...params.value };
+  const [overviewRes, distributorRes, goodsRes, overviewV2Res] = await Promise.all([
+    API_Statistics.getDistributionOverview(query),
+    API_Statistics.getDistributionRankDistributor(query),
+    API_Statistics.getDistributionRankGoods(query),
+    getDistributionOverviewV2(),
+  ]);
+  if (overviewRes && overviewRes.success) {
+    overview.value = overviewRes.result || {};
+  }
+  if (distributorRes && distributorRes.success) {
+    distributorRank.value = distributorRes.result || [];
+  }
+  if (goodsRes && goodsRes.success) {
+    goodsRank.value = goodsRes.result || [];
+  }
+  if (overviewV2Res && overviewV2Res.success) {
+    overviewV2.value = overviewV2Res.result || {};
+  }
+}
+function loadBehavior() {
+  behaviorLoading.value = true;
+  getDistributionBehaviorV2({
+    pageNumber: behaviorPage.value.pageNumber,
+    pageSize: behaviorPage.value.pageSize,
+  }).then((res) => {
+    behaviorLoading.value = false;
+    if (res.success) {
+      behaviorData.value = res.result.records || [];
+      behaviorTotal.value = res.result.total || 0;
+    }
+  });
+}
+function onBehaviorSizeChange() {
+  behaviorPage.value.pageNumber = 1;
+  loadBehavior();
+}
+function loadGoods() {
+  goodsLoading.value = true;
+  getDistributionGoodsV2({
+    pageNumber: goodsPage.value.pageNumber,
+    pageSize: goodsPage.value.pageSize,
+  }).then((res) => {
+    goodsLoading.value = false;
+    if (res.success) {
+      goodsData.value = res.result.records || [];
+      goodsTotal.value = res.result.total || 0;
+    }
+  });
+}
+function onGoodsSizeChange() {
+  goodsPage.value.pageNumber = 1;
+  loadGoods();
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/goods-comparison.vue b/manager/src/views/statistics/goods-comparison.vue
index 39daf1c79..fc2cda188 100644
--- a/manager/src/views/statistics/goods-comparison.vue
+++ b/manager/src/views/statistics/goods-comparison.vue
@@ -136,11 +136,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { getBrandListData, getCategoryTree } from "@/api/goods";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
+
+defineOptions({ name: "goods-comparison-report" });
 
 const CLIENT_TYPE_OPTIONS = [
   { label: "移动端", value: "H5" },
@@ -150,122 +154,115 @@ const CLIENT_TYPE_OPTIONS = [
   { label: "未知", value: "UNKNOWN" },
 ];
 
-export default {
-  name: "goods-comparison-report",
-  data() {
-    return {
-      loading: false,
-      dateType: "DAY",
-      queryDate: "",
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        storeId: "",
-        categoryId: "",
-        brandId: "",
-        clientType: "",
-        keyword: "",
-        sortType: "PRICE",
-      },
-      categoryList: [],
-      categoryProps: { value: "id", label: "name", children: "children", checkStrictly: true, emitPath: false },
-      brandList: [],
-      clientTypeOptions: CLIENT_TYPE_OPTIONS,
-      data: [],
-      total: 0,
-      shops: [],
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadOptions();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const today = new Date();
-      this.queryDate = this.formatDay(today);
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDay(date) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return `${y}-${m}-${d}`;
-    },
-    onDateTypeChange() {
-      if (this.dateType === "DAY" && !this.queryDate) {
-        this.queryDate = this.formatDay(new Date());
-      }
-    },
-    loadOptions() {
-      getCategoryTree().then((res) => {
-        if (res.success) this.categoryList = res.result || [];
-      });
-      getBrandListData().then((res) => {
-        if (res.success) this.brandList = res.result || [];
-      });
-      getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
-        if (res.success) this.shops = res.result.records || [];
-      });
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    buildParams() {
-      const p = { ...this.params, reportDateType: this.dateType };
-      if (this.dateType === "DAY") {
-        if (this.queryDate) {
-          p.queryDate = `${this.queryDate} 00:00:00`;
-        }
-      } else if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getGoodsComparisonReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportGoodsComparisonReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "商品同比环比报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-    rateClass(rate) {
-      if (!rate) return "";
-      if (rate.startsWith("+")) return "trend-up";
-      if (rate.startsWith("-") && rate !== "0%") return "trend-down";
-      return "";
-    },
-  },
-};
+const loading = ref(false);
+const dateType = ref("DAY");
+const queryDate = ref("");
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  storeId: "",
+  categoryId: "",
+  brandId: "",
+  clientType: "",
+  keyword: "",
+  sortType: "PRICE",
+});
+const categoryList = ref([]);
+const categoryProps = ref({ value: "id", label: "name", children: "children", checkStrictly: true, emitPath: false });
+const brandList = ref([]);
+const clientTypeOptions = ref(CLIENT_TYPE_OPTIONS);
+const data = ref([]);
+const total = ref(0);
+const shops = ref([]);
+
+onMounted(() => {
+  initDefaultRange();
+  loadOptions();
+  loadData();
+});
+
+function initDefaultRange() {
+  const today = new Date();
+  queryDate.value = formatDay(today);
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDay(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function onDateTypeChange() {
+  if (dateType.value === "DAY" && !queryDate.value) {
+    queryDate.value = formatDay(new Date());
+  }
+}
+function loadOptions() {
+  getCategoryTree().then((res) => {
+    if (res.success) categoryList.value = res.result || [];
+  });
+  getBrandListData().then((res) => {
+    if (res.success) brandList.value = res.result || [];
+  });
+  getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
+    if (res.success) shops.value = res.result.records || [];
+  });
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function buildParams() {
+  const p = { ...params, reportDateType: dateType.value };
+  if (dateType.value === "DAY") {
+    if (queryDate.value) {
+      p.queryDate = `${queryDate.value} 00:00:00`;
+    }
+  } else if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getGoodsComparisonReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportGoodsComparisonReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "商品同比环比报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
+function rateClass(rate) {
+  if (!rate) return "";
+  if (rate.startsWith("+")) return "trend-up";
+  if (rate.startsWith("-") && rate !== "0%") return "trend-down";
+  return "";
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/statistics/goods-sales-summary.vue b/manager/src/views/statistics/goods-sales-summary.vue
index c1eae8741..2f280bd98 100644
--- a/manager/src/views/statistics/goods-sales-summary.vue
+++ b/manager/src/views/statistics/goods-sales-summary.vue
@@ -80,81 +80,86 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
+import * as filters from "@/utils/filters";
 
-export default {
-  name: "goods-sales-summary-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: { pageNumber: 1, pageSize: 20, storeId: "", keyword: "", sortType: "PRICE" },
-      data: [],
-      total: 0,
-      shops: [],
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadShops();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    loadShops() {
-      getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
-        if (res.success) this.shops = res.result.records || [];
-      });
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getGoodsSalesSummaryReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportGoodsSalesSummaryReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "商品销售汇总报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-  },
-};
+defineOptions({ name: "goods-sales-summary-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({ pageNumber: 1, pageSize: 20, storeId: "", keyword: "", sortType: "PRICE" });
+const data = ref([]);
+const total = ref(0);
+const shops = ref([]);
+
+onMounted(() => {
+  initDefaultRange();
+  loadShops();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+
+function loadShops() {
+  getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
+    if (res.success) shops.value = res.result.records || [];
+  });
+}
+
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+
+function loadData() {
+  loading.value = true;
+  API_Statistics.getGoodsSalesSummaryReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+
+function handleExport() {
+  API_Statistics.exportGoodsSalesSummaryReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "商品销售汇总报表.xlsx");
+  });
+}
+
+function formatMoney(val) {
+  return filters.unitPrice(val, "￥");
+}
+
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
 </script>
diff --git a/manager/src/views/statistics/goods.vue b/manager/src/views/statistics/goods.vue
index 70113c804..2368c58c9 100644
--- a/manager/src/views/statistics/goods.vue
+++ b/manager/src/views/statistics/goods.vue
@@ -77,150 +77,146 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import affixTime from "@/components/affix-time";
 import { QuestionFilled } from "@element-plus/icons-vue";
 
-export default {
-  components: { affixTime, QuestionFilled },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        storeId: "",
-      },
-      overview: {},
-      refundRank: [],
-      salesRank: [],
-      categoryRank: [],
-      metricDefs: [
-        {
-          key: "netSalesAmount",
-          label: "商品净销售金额",
-          isCount: false,
-          tip: "商品净销售金额=商品销售金额-商品退款金额（扣除退款，不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "salePriceAmount",
-          label: "商品售价金额",
-          isCount: false,
-          tip: "商品售价金额=商品净销售金额+商品优惠金额，统计时间范围内销售商品折前金额（扣除退款，不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "discountAmount",
-          label: "商品优惠金额",
-          isCount: false,
-          tip: "统计时间范围内，商品销售时的优惠金额（扣除退款，不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "salesAmount",
-          label: "商品销售金额",
-          isCount: false,
-          tip: "统计时间范围内，商品折扣后支付金额（不扣除退款，不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "refundAmount",
-          label: "商品退款金额",
-          isCount: false,
-          tip: "统计时间范围内，商品成功退款金额（不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "netSalesNum",
-          label: "商品净销售数量",
-          isCount: true,
-          tip: "商品净销售数量=商品销售数量-商品退货数量（含退款，不包含储值充值、商品返现，运费）",
-        },
-        {
-          key: "salesNum",
-          label: "商品销售数量",
-          isCount: true,
-          tip: "按客户支付完成时间统计的订单商品销售数量（包含商品下单，不包含储值充值）",
-        },
-        {
-          key: "refundNum",
-          label: "商品退货数量",
-          isCount: true,
-          tip: "按商家同意退款时间统计的退款单商品退货数量（不包含储值退款、商品返现，运费）",
-        },
-      ],
-    };
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  storeId: "",
+});
+const overview = ref({});
+const refundRank = ref([]);
+const salesRank = ref([]);
+const categoryRank = ref([]);
+const metricDefs = ref([
+  {
+    key: "netSalesAmount",
+    label: "商品净销售金额",
+    isCount: false,
+    tip: "商品净销售金额=商品销售金额-商品退款金额（扣除退款，不包含储值充值、商品返现，运费）",
   },
-  computed: {
-    metricList() {
-      return this.metricDefs.map((def) => ({
-        ...def,
-        metric: this.overview[def.key] || {},
-      }));
-    },
+  {
+    key: "salePriceAmount",
+    label: "商品售价金额",
+    isCount: false,
+    tip: "商品售价金额=商品净销售金额+商品优惠金额，统计时间范围内销售商品折前金额（扣除退款，不包含储值充值、商品返现，运费）",
   },
-  watch: {
-    params: {
-      handler() {
-        this.loadData();
-      },
-      deep: true,
-      immediate: true,
-    },
+  {
+    key: "discountAmount",
+    label: "商品优惠金额",
+    isCount: false,
+    tip: "统计时间范围内，商品销售时的优惠金额（扣除退款，不包含储值充值、商品返现，运费）",
   },
-  methods: {
-    clickBreadcrumb(item) {
-      this.params = {
-        searchType: item.searchType || "",
-        year: item.year || "",
-        month: item.month || "",
-        storeId: item.storeId || "",
-        startTime: item.startTime || "",
-        endTime: item.endTime || "",
-      };
-    },
-    metricCurrent(metric) {
-      if (!metric || metric.current == null) return 0;
-      return Number(metric.current) || 0;
-    },
-    formatCount(metric) {
-      return Math.round(this.metricCurrent(metric));
-    },
-    rateText(metric) {
-      if (!metric || !metric.rate) return "0%";
-      return metric.rate;
-    },
-    rateClass(metric) {
-      const trend = metric && metric.trend;
-      if (trend === "UP") return "up";
-      if (trend === "DOWN") return "down";
-      return "flat";
-    },
-    async loadData() {
-      const query = { ...this.params };
-      const categoryQuery = { ...query, type: "PRICE" };
-      const [overviewRes, refundRes, salesRes, categoryRes] = await Promise.all([
-        API_Statistics.getGoodsOverview(query),
-        API_Statistics.getGoodsRefundRank(query),
-        API_Statistics.getGoodsSalesRank(query),
-        API_Statistics.getGoodsCategoryRank(categoryQuery),
-      ]);
-      if (overviewRes && overviewRes.success) {
-        this.overview = overviewRes.result || {};
-      }
-      if (refundRes && refundRes.success) {
-        this.refundRank = refundRes.result || [];
-      }
-      if (salesRes && salesRes.success) {
-        this.salesRank = salesRes.result || [];
-      }
-      if (categoryRes && categoryRes.success) {
-        const list = categoryRes.result || [];
-        this.categoryRank = list.map((item, index) => ({
-          ...item,
-          rank: index + 1,
-        }));
-      }
-    },
+  {
+    key: "salesAmount",
+    label: "商品销售金额",
+    isCount: false,
+    tip: "统计时间范围内，商品折扣后支付金额（不扣除退款，不包含储值充值、商品返现，运费）",
   },
-};
+  {
+    key: "refundAmount",
+    label: "商品退款金额",
+    isCount: false,
+    tip: "统计时间范围内，商品成功退款金额（不包含储值充值、商品返现，运费）",
+  },
+  {
+    key: "netSalesNum",
+    label: "商品净销售数量",
+    isCount: true,
+    tip: "商品净销售数量=商品销售数量-商品退货数量（含退款，不包含储值充值、商品返现，运费）",
+  },
+  {
+    key: "salesNum",
+    label: "商品销售数量",
+    isCount: true,
+    tip: "按客户支付完成时间统计的订单商品销售数量（包含商品下单，不包含储值充值）",
+  },
+  {
+    key: "refundNum",
+    label: "商品退货数量",
+    isCount: true,
+    tip: "按商家同意退款时间统计的退款单商品退货数量（不包含储值退款、商品返现，运费）",
+  },
+]);
+
+const metricList = computed(() =>
+  metricDefs.value.map((def) => ({
+    ...def,
+    metric: overview.value[def.key] || {},
+  }))
+);
+
+watch(
+  params,
+  () => {
+    loadData();
+  },
+  { deep: true, immediate: true }
+);
+
+function clickBreadcrumb(item) {
+  params.value = {
+    searchType: item.searchType || "",
+    year: item.year || "",
+    month: item.month || "",
+    storeId: item.storeId || "",
+    startTime: item.startTime || "",
+    endTime: item.endTime || "",
+  };
+}
+
+function metricCurrent(metric) {
+  if (!metric || metric.current == null) return 0;
+  return Number(metric.current) || 0;
+}
+
+function formatCount(metric) {
+  return Math.round(metricCurrent(metric));
+}
+
+function rateText(metric) {
+  if (!metric || !metric.rate) return "0%";
+  return metric.rate;
+}
+
+function rateClass(metric) {
+  const trend = metric && metric.trend;
+  if (trend === "UP") return "up";
+  if (trend === "DOWN") return "down";
+  return "flat";
+}
+
+async function loadData() {
+  const query = { ...params.value };
+  const categoryQuery = { ...query, type: "PRICE" };
+  const [overviewRes, refundRes, salesRes, categoryRes] = await Promise.all([
+    API_Statistics.getGoodsOverview(query),
+    API_Statistics.getGoodsRefundRank(query),
+    API_Statistics.getGoodsSalesRank(query),
+    API_Statistics.getGoodsCategoryRank(categoryQuery),
+  ]);
+  if (overviewRes && overviewRes.success) {
+    overview.value = overviewRes.result || {};
+  }
+  if (refundRes && refundRes.success) {
+    refundRank.value = refundRes.result || [];
+  }
+  if (salesRes && salesRes.success) {
+    salesRank.value = salesRes.result || [];
+  }
+  if (categoryRes && categoryRes.success) {
+    const list = categoryRes.result || [];
+    categoryRank.value = list.map((item, index) => ({
+      ...item,
+      rank: index + 1,
+    }));
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/marketing.vue b/manager/src/views/statistics/marketing.vue
index a7199ab6a..c7d497f45 100644
--- a/manager/src/views/statistics/marketing.vue
+++ b/manager/src/views/statistics/marketing.vue
@@ -40,88 +40,80 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import affixTime from "@/components/affix-time";
 import { QuestionFilled } from "@element-plus/icons-vue";
 
-export default {
-  components: { affixTime, QuestionFilled },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        storeId: "",
-      },
-      overview: {},
-      activityMetrics: [
-        { key: "couponActiveNum", label: "进行中优惠券" },
-        { key: "seckillActiveNum", label: "进行中秒杀" },
-        { key: "pintuanActiveNum", label: "进行中拼团" },
-        { key: "fullDiscountActiveNum", label: "进行中满减" },
-        { key: "kanjiaActiveNum", label: "进行中砍价商品" },
-        { key: "pointsGoodsActiveNum", label: "进行中积分商品" },
-      ],
-      couponMetrics: [
-        {
-          key: "couponPublishNum",
-          label: "优惠券发放量",
-          tip: "优惠券配置的累计发放数量",
-        },
-        {
-          key: "couponReceivedNum",
-          label: "优惠券领取量",
-          tip: "客户已领取的优惠券数量",
-        },
-        {
-          key: "couponUsedNum",
-          label: "优惠券核销量",
-          tip: "客户已使用的优惠券数量",
-        },
-        {
-          key: "discountAmount",
-          label: "活动优惠总额",
-          isMoney: true,
-          tip: "统计周期内订单产生的优惠金额合计",
-        },
-      ],
-    };
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  storeId: "",
+});
+const overview = ref({});
+const activityMetrics = ref([
+  { key: "couponActiveNum", label: "进行中优惠券" },
+  { key: "seckillActiveNum", label: "进行中秒杀" },
+  { key: "pintuanActiveNum", label: "进行中拼团" },
+  { key: "fullDiscountActiveNum", label: "进行中满减" },
+  { key: "kanjiaActiveNum", label: "进行中砍价商品" },
+  { key: "pointsGoodsActiveNum", label: "进行中积分商品" },
+]);
+const couponMetrics = ref([
+  {
+    key: "couponPublishNum",
+    label: "优惠券发放量",
+    tip: "优惠券配置的累计发放数量",
   },
-  watch: {
-    params: {
-      handler() {
-        this.loadData();
-      },
-      deep: true,
-      immediate: true,
-    },
+  {
+    key: "couponReceivedNum",
+    label: "优惠券领取量",
+    tip: "客户已领取的优惠券数量",
   },
-  methods: {
-    clickBreadcrumb(item) {
-      this.params = {
-        searchType: item.searchType || "",
-        year: item.year || "",
-        month: item.month || "",
-        storeId: item.storeId || "",
-        startTime: item.startTime || "",
-        endTime: item.endTime || "",
-      };
-    },
-    formatNumber(val) {
-      if (val == null || val === "") return 0;
-      const num = Number(val);
-      return Number.isNaN(num) ? 0 : Math.round(num);
-    },
-    async loadData() {
-      const res = await API_Statistics.getMarketingOverview({ ...this.params });
-      if (res && res.success) {
-        this.overview = res.result || {};
-      }
-    },
+  {
+    key: "couponUsedNum",
+    label: "优惠券核销量",
+    tip: "客户已使用的优惠券数量",
   },
-};
+  {
+    key: "discountAmount",
+    label: "活动优惠总额",
+    isMoney: true,
+    tip: "统计周期内订单产生的优惠金额合计",
+  },
+]);
+
+watch(
+  params,
+  () => {
+    loadData();
+  },
+  { deep: true, immediate: true }
+);
+
+function clickBreadcrumb(item) {
+  params.value = {
+    searchType: item.searchType || "",
+    year: item.year || "",
+    month: item.month || "",
+    storeId: item.storeId || "",
+    startTime: item.startTime || "",
+    endTime: item.endTime || "",
+  };
+}
+function formatNumber(val) {
+  if (val == null || val === "") return 0;
+  const num = Number(val);
+  return Number.isNaN(num) ? 0 : Math.round(num);
+}
+async function loadData() {
+  const res = await API_Statistics.getMarketingOverview({ ...params.value });
+  if (res && res.success) {
+    overview.value = res.result || {};
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/member.vue b/manager/src/views/statistics/member.vue
index da8ebdab4..5c1b67798 100644
--- a/manager/src/views/statistics/member.vue
+++ b/manager/src/views/statistics/member.vue
@@ -94,223 +94,226 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import affixTime from "@/components/affix-time";
 import { QuestionFilled } from "@element-plus/icons-vue";
 import { Chart } from "@antv/g2";
 
-export default {
-  components: { affixTime, QuestionFilled },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        storeId: "",
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  storeId: "",
+});
+const overview = ref({});
+const analysis = ref({});
+const genderList = ref([]);
+const regionList = ref([]);
+const trendChart = ref(null);
+const metricDefs = ref([
+  {
+    key: "totalMemberNum",
+    label: "累积会员数",
+    isMoney: false,
+    tip: "累积会员数：合计会员数量",
+  },
+  {
+    key: "newMemberNum",
+    label: "新增会员数",
+    isMoney: false,
+    tip: "新增会员数：周期内新增的会员数量",
+  },
+  {
+    key: "payMemberNum",
+    label: "支付会员数",
+    isMoney: false,
+    tip: "支付会员数：周期内支付的会员数量",
+  },
+  {
+    key: "rechargeMemberNum",
+    label: "储值会员数",
+    isMoney: false,
+    tip: "储值会员数：周期内充值的会员数量",
+  },
+  {
+    key: "payAmount",
+    label: "会员支付金额",
+    isMoney: true,
+    tip: "会员支付金额：周期内会员支付的金额，四舍五入保留2位小数",
+  },
+  {
+    key: "payOrderNum",
+    label: "会员支付订单数",
+    isMoney: false,
+    tip: "会员支付订单数：周期内会员支付的订单数量",
+  },
+  {
+    key: "customerPrice",
+    label: "会员客单价",
+    isMoney: true,
+    tip: "会员客单价：周期内支付金额/支付人数，四舍五入保留2位小数",
+  },
+]);
+
+const metricList = computed(() =>
+  metricDefs.value.map((def) => ({
+    ...def,
+    metric: overview.value[def.key] || {},
+  }))
+);
+
+watch(
+  params,
+  () => {
+    loadData();
+  },
+  { deep: true }
+);
+
+onMounted(() => {
+  loadData();
+});
+
+onBeforeUnmount(() => {
+  if (trendChart.value) {
+    trendChart.value.destroy();
+    trendChart.value = null;
+  }
+});
+
+function clickBreadcrumb(item) {
+  params.value = {
+    ...params.value,
+    searchType: item.searchType || "",
+    year: item.year || "",
+    month: item.month || "",
+    storeId: item.storeId || "",
+    startTime: item.startTime || "",
+    endTime: item.endTime || "",
+  };
+}
+
+function metricCurrent(metric) {
+  if (!metric || metric.current == null) return 0;
+  return Number(metric.current) || 0;
+}
+
+function formatCount(metric) {
+  return Math.round(metricCurrent(metric));
+}
+
+function rateText(metric) {
+  if (!metric || !metric.rate) return "0%";
+  return metric.rate;
+}
+
+function rateClass(metric) {
+  const trend = metric && metric.trend;
+  if (trend === "UP") return "up";
+  if (trend === "DOWN") return "down";
+  return "flat";
+}
+
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  const num = Number(val);
+  if (Number.isNaN(num)) return val;
+  return `${num}%`;
+}
+
+function sexText(sex) {
+  if (sex === 1 || sex === "1") return "男";
+  if (sex === 0 || sex === "0") return "女";
+  return "未知";
+}
+
+function formatTrendDate(val) {
+  if (!val) return "";
+  if (typeof val === "string") return val.slice(0, 10);
+  const d = new Date(val);
+  if (Number.isNaN(d.getTime())) return String(val);
+  const m = `${d.getMonth() + 1}`.padStart(2, "0");
+  const day = `${d.getDate()}`.padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+
+function renderTrendChart(list) {
+  const chartData = (list || []).map((item) => ({
+    date: formatTrendDate(item.date),
+    newlyAdded: Number(item.newlyAdded) || 0,
+    title: "新增会员数",
+  }));
+  if (trendChart.value) {
+    trendChart.value.destroy();
+    trendChart.value = null;
+  }
+  nextTick(() => {
+    const container = document.getElementById("memberTrendChart");
+    if (!container) return;
+    trendChart.value = new Chart({
+      container: "memberTrendChart",
+      autoFit: true,
+      height: 360,
+      padding: [40, 40, 50, 50],
+    });
+    trendChart.value.data(chartData);
+    trendChart.value.scale({
+      newlyAdded: {
+        nice: true,
+        min: 0,
       },
-      overview: {},
-      analysis: {},
-      genderList: [],
-      regionList: [],
-      trendChart: null,
-      metricDefs: [
-        {
-          key: "totalMemberNum",
-          label: "累积会员数",
-          isMoney: false,
-          tip: "累积会员数：合计会员数量",
-        },
-        {
-          key: "newMemberNum",
-          label: "新增会员数",
-          isMoney: false,
-          tip: "新增会员数：周期内新增的会员数量",
-        },
-        {
-          key: "payMemberNum",
-          label: "支付会员数",
-          isMoney: false,
-          tip: "支付会员数：周期内支付的会员数量",
-        },
-        {
-          key: "rechargeMemberNum",
-          label: "储值会员数",
-          isMoney: false,
-          tip: "储值会员数：周期内充值的会员数量",
-        },
-        {
-          key: "payAmount",
-          label: "会员支付金额",
-          isMoney: true,
-          tip: "会员支付金额：周期内会员支付的金额，四舍五入保留2位小数",
-        },
-        {
-          key: "payOrderNum",
-          label: "会员支付订单数",
-          isMoney: false,
-          tip: "会员支付订单数：周期内会员支付的订单数量",
-        },
-        {
-          key: "customerPrice",
-          label: "会员客单价",
-          isMoney: true,
-          tip: "会员客单价：周期内支付金额/支付人数，四舍五入保留2位小数",
-        },
-      ],
-    };
-  },
-  computed: {
-    metricList() {
-      return this.metricDefs.map((def) => ({
-        ...def,
-        metric: this.overview[def.key] || {},
-      }));
-    },
-  },
-  watch: {
-    params: {
-      handler() {
-        this.loadData();
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.loadData();
-  },
-  beforeUnmount() {
-    if (this.trendChart) {
-      this.trendChart.destroy();
-      this.trendChart = null;
-    }
-  },
-  methods: {
-    clickBreadcrumb(item) {
-      this.params = {
-        ...this.params,
-        searchType: item.searchType || "",
-        year: item.year || "",
-        month: item.month || "",
-        storeId: item.storeId || "",
-        startTime: item.startTime || "",
-        endTime: item.endTime || "",
-      };
-    },
-    metricCurrent(metric) {
-      if (!metric || metric.current == null) return 0;
-      return Number(metric.current) || 0;
-    },
-    formatCount(metric) {
-      return Math.round(this.metricCurrent(metric));
-    },
-    rateText(metric) {
-      if (!metric || !metric.rate) return "0%";
-      return metric.rate;
-    },
-    rateClass(metric) {
-      const trend = metric && metric.trend;
-      if (trend === "UP") return "up";
-      if (trend === "DOWN") return "down";
-      return "flat";
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      const num = Number(val);
-      if (Number.isNaN(num)) return val;
-      return `${num}%`;
-    },
-    sexText(sex) {
-      if (sex === 1 || sex === "1") return "男";
-      if (sex === 0 || sex === "0") return "女";
-      return "未知";
-    },
-    formatTrendDate(val) {
-      if (!val) return "";
-      if (typeof val === "string") return val.slice(0, 10);
-      const d = new Date(val);
-      if (Number.isNaN(d.getTime())) return String(val);
-      const m = `${d.getMonth() + 1}`.padStart(2, "0");
-      const day = `${d.getDate()}`.padStart(2, "0");
-      return `${d.getFullYear()}-${m}-${day}`;
-    },
-    renderTrendChart(list) {
-      const chartData = (list || []).map((item) => ({
-        date: this.formatTrendDate(item.date),
-        newlyAdded: Number(item.newlyAdded) || 0,
-        title: "新增会员数",
-      }));
-      if (this.trendChart) {
-        this.trendChart.destroy();
-        this.trendChart = null;
-      }
-      this.$nextTick(() => {
-        const container = document.getElementById("memberTrendChart");
-        if (!container) return;
-        this.trendChart = new Chart({
-          container: "memberTrendChart",
-          autoFit: true,
-          height: 360,
-          padding: [40, 40, 50, 50],
-        });
-        this.trendChart.data(chartData);
-        this.trendChart.scale({
-          newlyAdded: {
-            nice: true,
-            min: 0,
-          },
-        });
-        this.trendChart.tooltip({
-          showCrosshairs: true,
-          shared: true,
-        });
-        this.trendChart
-          .line()
-          .position("date*newlyAdded")
-          .color("title")
-          .shape("smooth");
-        this.trendChart
-          .point()
-          .position("date*newlyAdded")
-          .color("title")
-          .shape("circle")
-          .style({
-            stroke: "#fff",
-            lineWidth: 1,
-          });
-        this.trendChart.render();
+    });
+    trendChart.value.tooltip({
+      showCrosshairs: true,
+      shared: true,
+    });
+    trendChart.value
+      .line()
+      .position("date*newlyAdded")
+      .color("title")
+      .shape("smooth");
+    trendChart.value
+      .point()
+      .position("date*newlyAdded")
+      .color("title")
+      .shape("circle")
+      .style({
+        stroke: "#fff",
+        lineWidth: 1,
       });
-    },
-    async loadData() {
-      const query = { ...this.params };
-      const [overviewRes, analysisRes, genderRes, regionRes, trendRes] = (
-        await Promise.allSettled([
-          API_Statistics.getMemberOverview(query),
-          API_Statistics.getMemberAnalysis(query),
-          API_Statistics.getMemberGenderDistribution(),
-          API_Statistics.getMemberRegionDistribution(),
-          API_Statistics.getMemberNewTrend(query),
-        ])
-      ).map((r) => (r.status === "fulfilled" ? r.value : null));
-      if (overviewRes && overviewRes.success) {
-        this.overview = overviewRes.result || {};
-      }
-      if (analysisRes && analysisRes.success) {
-        this.analysis = analysisRes.result || {};
-      }
-      if (genderRes && genderRes.success) {
-        this.genderList = genderRes.result || [];
-      }
-      if (regionRes && regionRes.success) {
-        this.regionList = regionRes.result || [];
-      }
-      if (trendRes && trendRes.success) {
-        this.renderTrendChart(trendRes.result || []);
-      }
-    },
-  },
-};
+    trendChart.value.render();
+  });
+}
+
+async function loadData() {
+  const query = { ...params.value };
+  const [overviewRes, analysisRes, genderRes, regionRes, trendRes] = (
+    await Promise.allSettled([
+      API_Statistics.getMemberOverview(query),
+      API_Statistics.getMemberAnalysis(query),
+      API_Statistics.getMemberGenderDistribution(),
+      API_Statistics.getMemberRegionDistribution(),
+      API_Statistics.getMemberNewTrend(query),
+    ])
+  ).map((r) => (r.status === "fulfilled" ? r.value : null));
+  if (overviewRes && overviewRes.success) {
+    overview.value = overviewRes.result || {};
+  }
+  if (analysisRes && analysisRes.success) {
+    analysis.value = analysisRes.result || {};
+  }
+  if (genderRes && genderRes.success) {
+    genderList.value = genderRes.result || [];
+  }
+  if (regionRes && regionRes.success) {
+    regionList.value = regionRes.result || [];
+  }
+  if (trendRes && trendRes.success) {
+    renderTrendChart(trendRes.result || []);
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/order.vue b/manager/src/views/statistics/order.vue
index c1bdb237e..51c89d073 100644
--- a/manager/src/views/statistics/order.vue
+++ b/manager/src/views/statistics/order.vue
@@ -257,273 +257,269 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import * as API_Goods from "@/api/goods";
 import { Chart } from "@antv/g2";
 import orderRow from "./order/orderDetail";
 import refundRow from "./order/refundOrder";
 import affixTime from "@/components/affix-time";
 
-export default {
-  components: { orderRow, refundRow, affixTime },
+const router = useRouter();
 
-  data() {
-    return {
-      orderOrRefund: "order", // order | refund
-      total: 0, // 总数
-      // 订单状态
-      orderStatusList: {
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
+const orderOrRefund = ref("order"); // order | refund
+const total = ref(0); // 总数
+// 订单状态
+const orderStatusList = ref({
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
 
-      serviceTypeList: {
-        // 服务类型
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceStatusList: {
-        // 服务状态
-        APPLY: "申请售后",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_RE_DELIVERY: "商家换货/补发",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CONFIRM: "买家确认收货",
-        BUYER_CANCEL: "买家取消售后",
-        WAIT_REFUND: "等待平台退款",
-        COMPLETE: "完成售后",
-      },
-      //
+const serviceTypeList = ref({
+  // 服务类型
+  CANCEL: "取消",
+  RETURN_GOODS: "退货",
+  EXCHANGE_GOODS: "换货",
+  RETURN_MONEY: "退款",
+});
+const serviceStatusList = ref({
+  // 服务状态
+  APPLY: "申请售后",
+  PASS: "通过售后",
+  REFUSE: "拒绝售后",
+  BUYER_RETURN: "买家退货，待卖家收货",
+  SELLER_RE_DELIVERY: "商家换货/补发",
+  SELLER_CONFIRM: "卖家确认收货",
+  SELLER_TERMINATION: "卖家终止售后",
+  BUYER_CONFIRM: "买家确认收货",
+  BUYER_CANCEL: "买家取消售后",
+  WAIT_REFUND: "等待平台退款",
+  COMPLETE: "完成售后",
+});
+//
 
-      data: [],
+const data = ref([]);
 
-      // 交易概况
-      transactionList: [
-        {
-          label: "转换",
-          value: "",
-        },
-        {
-          label: "订单",
-          value: "",
-        },
-        {
-          label: "退单",
-          value: "",
-        },
-      ],
-
-      chartList: [], // 绘制订单图表数据
-      orderChart: "", //订单图表
-
-      overViewList: {}, // 绘制订单统计概览
-      overViewChart: "", //订单订单统计概览图标
-
-      // 时间
-      dateList: [
-        {
-          title: "今天",
-          selected: false,
-          value: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          value: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          value: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          value: "LAST_THIRTY",
-        },
-      ],
-      // 订单传参
-      orderParams: {
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        year: "",
-        shopId: "",
-        memberId: "",
-      },
-      // 订单概念
-      overViewParams: {
-        month: "",
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: "",
-        year: "",
-      },
-      defaultParams: {
-        month: "",
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: "",
-        year: "",
-      },
-      // 退单订单
-      refundParams: {
-        pageNumber: 1,
-        pageSize: 20,
-        searchType: "LAST_SEVEN",
-        storeId: "",
-        year: "",
-      },
-      showRecords:false,
-
-      //
-      //
-    };
+// 交易概况
+const transactionList = ref([
+  {
+    label: "转换",
+    value: "",
   },
-  watch: {
-    refundParams: {
-      handler(val) {
-        this.getOrderList();
-      },
-      deep: true,
-      immediate: true,
-    },
-    orderOrRefund() {
-      this.showRecords = false;
-      this.refundParams.pageNumber = 1;
-      this.getOrderList();
-    },
-    orderParams: {
-      handler() {
-        this.initOrderChartList();
-      },
-      deep: true,
-    },
-    overViewParams: {
-      handler() {
-        this.initOrderOverViewList();
-      },
-      deep: true,
-    },
+  {
+    label: "订单",
+    value: "",
   },
-  methods: {
-    goDetail(row) {
-      const sn = row.sn;
-      const path = this.orderOrRefund === "order" ? "order-detail" : "after-order-detail";
-      this.$router.push({ path, query: { sn } });
-    },
-    // 订单图
-    initOrderChart() {
-      // 默认已经加载 legend-filter 交互
-      let data = this.chartList;
+  {
+    label: "退单",
+    value: "",
+  },
+]);
 
-      data.forEach((item) => {
-        item.createTime = item.createTime.split(" ")[0];
-        item.title = "交易额";
+const chartList = ref([]); // 绘制订单图表数据
+const orderChart = ref(""); //订单图表
+
+const overViewList = ref({}); // 绘制订单统计概览
+const overViewChart = ref(""); //订单订单统计概览图标
+
+// 时间
+const dateList = ref([
+  {
+    title: "今天",
+    selected: false,
+    value: "TODAY",
+  },
+  {
+    title: "昨天",
+    selected: false,
+    value: "YESTERDAY",
+  },
+  {
+    title: "过去7天",
+    selected: true,
+    value: "LAST_SEVEN",
+  },
+  {
+    title: "过去30天",
+    selected: false,
+    value: "LAST_THIRTY",
+  },
+]);
+// 订单传参
+const orderParams = ref({
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  year: "",
+  shopId: "",
+  memberId: "",
+});
+// 订单概念
+const overViewParams = ref({
+  month: "",
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  storeId: "",
+  year: "",
+});
+const defaultParams = ref({
+  month: "",
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  storeId: "",
+  year: "",
+});
+// 退单订单
+const refundParams = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  searchType: "LAST_SEVEN",
+  storeId: "",
+  year: "",
+});
+const showRecords = ref(false);
+
+//
+//
+
+watch(
+  refundParams,
+  (val) => {
+    getOrderList();
+  },
+  { deep: true, immediate: true }
+);
+watch(orderOrRefund, () => {
+  showRecords.value = false;
+  refundParams.value.pageNumber = 1;
+  getOrderList();
+});
+watch(
+  orderParams,
+  () => {
+    initOrderChartList();
+  },
+  { deep: true }
+);
+watch(
+  overViewParams,
+  () => {
+    initOrderOverViewList();
+  },
+  { deep: true }
+);
+
+function goDetail(row) {
+  const sn = row.sn;
+  const path = orderOrRefund.value === "order" ? "order-detail" : "after-order-detail";
+  router.push({ path, query: { sn } });
+}
+// 订单图
+function initOrderChart() {
+  // 默认已经加载 legend-filter 交互
+  let data = chartList.value;
+
+  data.forEach((item) => {
+    item.createTime = item.createTime.split(" ")[0];
+    item.title = "交易额";
+  });
+  orderChart.value.data(data);
+
+  orderChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
+
+  orderChart.value
+    .line()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("smooth");
+
+  orderChart.value
+    .point()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  orderChart.value.area().position("createTime*price").color("title").shape("smooth");
+
+  orderChart.value.render();
+}
+
+function clickBreadcrumb(item, index) {
+  let callback = JSON.parse(JSON.stringify(item));
+  orderParams.value = callback;
+
+  overViewParams.value = callback;
+  refundParams.value = callback;
+  refundParams.value.pageNumber = 1;
+  refundParams.value.pageSize = 20;
+}
+
+// 实例化订单概览
+async function initOrderOverViewList() {
+  const res = await API_Goods.getOrderOverView(overViewParams.value);
+  if (res.success) {
+    overViewList.value = res.result;
+  }
+}
+// 实例化订单图表
+async function initOrderChartList(name) {
+  orderChart.value ? orderChart.value.clear() : "";
+  const res = await API_Goods.getOrderChart(orderParams.value);
+  if (res.success) {
+    chartList.value = res.result;
+
+    if (!orderChart.value) {
+      const container = document.getElementById("orderChart");
+      if (!container) return;
+      orderChart.value = new Chart({
+        container: "orderChart",
+        autoFit: true,
+        height: 500,
+        padding: [70, 70, 70, 70],
       });
-      this.orderChart.data(data);
+    }
 
-      this.orderChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
+    initOrderChart(); //订单表
+  }
+}
+// 统计相关订单统计
+async function getOrderList() {
+  let res;
+  if (orderOrRefund.value === "order") {
+    // 订单
+    res = await API_Goods.statisticsOrderList(refundParams.value);
+  } else {
+    // 退单
+    res = await API_Goods.statisticsOrderRefundList(refundParams.value);
+  }
+  if (res.success) {
+    showRecords.value = true;
+    data.value = res.result.records;
+    total.value = res.result.total;
+  }
+}
 
-      this.orderChart
-        .line()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("smooth");
+// 实例化初始值
+function initBaseParams() {
+  let data = new Date();
+  getOrderList();
+  orderParams.value.year = data.getFullYear();
+  overViewParams.value.year = data.getFullYear();
+}
 
-      this.orderChart
-        .point()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-         this.orderChart.area().position("createTime*price").color("title").shape("smooth");
-
-      this.orderChart.render();
-    },
-
-    clickBreadcrumb(item, index) {
-      let callback = JSON.parse(JSON.stringify(item));
-      this.orderParams = callback;
-
-      this.overViewParams = callback;
-      this.refundParams = callback;
-      this.refundParams.pageNumber = 1
-      this.refundParams.pageSize = 20
-    },
-
-    // 实例化订单概览
-    async initOrderOverViewList() {
-      const res = await API_Goods.getOrderOverView(this.overViewParams);
-      if (res.success) {
-        this.overViewList = res.result;
-      }
-    },
-    // 实例化订单图表
-    async initOrderChartList(name) {
-      this.orderChart ? this.orderChart.clear() : ''
-      const res = await API_Goods.getOrderChart(this.orderParams);
-      if (res.success) {
-        this.chartList = res.result;
-
-        if (!this.orderChart) {
-          const container = document.getElementById("orderChart");
-          if (!container) return;
-          this.orderChart = new Chart({
-            container: "orderChart",
-            autoFit: true,
-            height: 500,
-            padding: [70, 70, 70, 70],
-          });
-        }
-
-        this.initOrderChart(); //订单表
-      }
-    },
-    // 统计相关订单统计
-    async getOrderList() {
-      let res;
-      if (this.orderOrRefund === "order") {
-        // 订单
-        res = await API_Goods.statisticsOrderList(this.refundParams);
-      } else {
-        // 退单
-        res = await API_Goods.statisticsOrderRefundList(this.refundParams);
-      }
-      if (res.success) {
-        this.showRecords = true;
-        this.data = res.result.records;
-        this.total = res.result.total;
-      }
-    },
-
-    // 实例化初始值
-    initBaseParams() {
-      let data = new Date();
-      this.getOrderList();
-      this.orderParams.year = data.getFullYear();
-      this.overViewParams.year = data.getFullYear();
-    },
-  },
-
-  mounted() {
-    this.initBaseParams();
-  },
-};
+onMounted(() => {
+  initBaseParams();
+});
 </script>
 <style scoped lang="scss">
 .active {
diff --git a/manager/src/views/statistics/order/orderDetail.vue b/manager/src/views/statistics/order/orderDetail.vue
index 0adb6f186..1f85ddfcb 100644
--- a/manager/src/views/statistics/order/orderDetail.vue
+++ b/manager/src/views/statistics/order/orderDetail.vue
@@ -81,32 +81,31 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      orderStatusList: {
-        // 订单状态
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
-    };
-  },
-  props: ["res"],
-  methods: {
-    handleClickGoods(id) {
-      this.$router.push({
-        query: { id },
-        path: "/goods/goods-info/goodsDetail",
-      });
-    },
-  },
-};
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+defineProps(["res"]);
+
+// 订单状态
+const orderStatusList = ref({
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
+
+function handleClickGoods(id) {
+  router.push({
+    query: { id },
+    path: "/goods/goods-info/goodsDetail",
+  });
+}
 </script>
 <style lang="scss" scoped>
 .shop {
diff --git a/manager/src/views/statistics/order/refundOrder.vue b/manager/src/views/statistics/order/refundOrder.vue
index d16a7db18..f1b3eab84 100644
--- a/manager/src/views/statistics/order/refundOrder.vue
+++ b/manager/src/views/statistics/order/refundOrder.vue
@@ -75,51 +75,50 @@
 
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      orderStatusList: { // 订单状态
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
-      // 售后类型
-      serviceTypeList: {
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceStatusList: {
-        APPLY: "申请售后",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_RE_DELIVERY: "商家换货/补发",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CONFIRM: "买家确认收货",
-        BUYER_CANCEL: "买家取消售后",
-        WAIT_REFUND: "等待平台退款",
-        COMPLETE: "完成售后",
-      },
-    };
-  },
-  props: ["res"],
-  methods: {
-    handleClickGoods(id) {
-      this.$router.push({
-        query: { id },
-        path: "/goods/goods-info/goodsDetail",
-      });
-    },
-  }
-};
+<script setup>
+import { reactive } from "vue";
+import { useRouter } from "vue-router";
+
+defineProps(["res"]);
+
+const router = useRouter();
+
+const orderStatusList = reactive({ // 订单状态
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
+// 售后类型
+const serviceTypeList = reactive({
+  CANCEL: "取消",
+  RETURN_GOODS: "退货",
+  EXCHANGE_GOODS: "换货",
+  RETURN_MONEY: "退款",
+});
+const serviceStatusList = reactive({
+  APPLY: "申请售后",
+  PASS: "通过售后",
+  REFUSE: "拒绝售后",
+  BUYER_RETURN: "买家退货，待卖家收货",
+  SELLER_RE_DELIVERY: "商家换货/补发",
+  SELLER_CONFIRM: "卖家确认收货",
+  SELLER_TERMINATION: "卖家终止售后",
+  BUYER_CONFIRM: "买家确认收货",
+  BUYER_CANCEL: "买家取消售后",
+  WAIT_REFUND: "等待平台退款",
+  COMPLETE: "完成售后",
+});
+
+function handleClickGoods(id) {
+  router.push({
+    query: { id },
+    path: "/goods/goods-info/goodsDetail",
+  });
+}
 </script>
 <style lang="scss" scoped>
 .shop {
diff --git a/manager/src/views/statistics/overview.vue b/manager/src/views/statistics/overview.vue
index d8fc4a5b3..0e77d1f75 100644
--- a/manager/src/views/statistics/overview.vue
+++ b/manager/src/views/statistics/overview.vue
@@ -129,138 +129,135 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import affixTime from "@/components/affix-time";
 import { QuestionFilled } from "@element-plus/icons-vue";
 
-export default {
-  components: { affixTime, QuestionFilled },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        storeId: "",
-      },
-      overview: {},
-      sourceList: [],
-      composition: {},
-      metricDefs: [
-        {
-          key: "income",
-          label: "营业收入",
-          isCount: false,
-          tip: "营业收入：订单扣除退款折扣后金额（不含储值充值）",
-        },
-        {
-          key: "turnover",
-          label: "营业额",
-          isCount: false,
-          tip: "营业额：营业额=营业收入+优惠金额，订单扣除退款折扣前金额（不含储值充值）",
-        },
-        {
-          key: "discount",
-          label: "优惠金额",
-          isCount: false,
-          tip: "优惠金额：订单的优惠金额（扣除退款，不含储值充值）",
-        },
-        {
-          key: "incomeNoStoreValue",
-          label: "营业收入不含充值",
-          isCount: false,
-          tip: "营业收入不含储值金额：订单扣除退款折扣后金额（不含储值充值）",
-        },
-        {
-          key: "payOrderNum",
-          label: "支付订单数",
-          isCount: true,
-          tip: "支付订单数：按客户支付完成时间统计的成功付款的订单数（不含退款、储值充值）",
-        },
-        {
-          key: "recharge",
-          label: "新增充值金额",
-          isCount: false,
-          tip: "新增充值金额：按客户支付完成时间统计的客户储值充值本金金额",
-        },
-        {
-          key: "rechargeUse",
-          label: "使用充值金额",
-          isCount: false,
-          tip: "使用储值支付本金金额：统计时间范围内，支付和退款成功的订单中，使用储值支付且扣除退款的金额",
-        },
-      ],
-    };
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  storeId: "",
+});
+const overview = ref({});
+const sourceList = ref([]);
+const composition = ref({});
+const metricDefs = ref([
+  {
+    key: "income",
+    label: "营业收入",
+    isCount: false,
+    tip: "营业收入：订单扣除退款折扣后金额（不含储值充值）",
   },
-  computed: {
-    metricList() {
-      return this.metricDefs.map((def) => ({
-        ...def,
-        metric: this.overview[def.key] || {},
-      }));
-    },
+  {
+    key: "turnover",
+    label: "营业额",
+    isCount: false,
+    tip: "营业额：营业额=营业收入+优惠金额，订单扣除退款折扣前金额（不含储值充值）",
   },
-  watch: {
-    params: {
-      handler() {
-        this.loadData();
-      },
-      deep: true,
-      immediate: true,
-    },
+  {
+    key: "discount",
+    label: "优惠金额",
+    isCount: false,
+    tip: "优惠金额：订单的优惠金额（扣除退款，不含储值充值）",
   },
-  methods: {
-    clickBreadcrumb(item) {
-      this.params = {
-        searchType: item.searchType || "",
-        year: item.year || "",
-        month: item.month || "",
-        storeId: item.storeId || "",
-      };
-    },
-    metricCurrent(metric) {
-      if (!metric || metric.current == null) return 0;
-      return Number(metric.current) || 0;
-    },
-    formatCount(metric) {
-      return Math.round(this.metricCurrent(metric));
-    },
-    rateText(metric) {
-      if (!metric || !metric.rate) return "0%";
-      return metric.rate;
-    },
-    rateClass(metric) {
-      const trend = metric && metric.trend;
-      if (trend === "UP") return "up";
-      if (trend === "DOWN") return "down";
-      return "flat";
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      const num = Number(val);
-      if (Number.isNaN(num)) return val;
-      return `${num}%`;
-    },
-    async loadData() {
-      const query = { ...this.params };
-      const [overviewRes, sourceRes, compositionRes] = await Promise.all([
-        API_Statistics.getBusinessOverview(query),
-        API_Statistics.getBusinessSource(query),
-        API_Statistics.getBusinessComposition(query),
-      ]);
-      if (overviewRes && overviewRes.success) {
-        this.overview = overviewRes.result || {};
-      }
-      if (sourceRes && sourceRes.success) {
-        this.sourceList = sourceRes.result || [];
-      }
-      if (compositionRes && compositionRes.success) {
-        this.composition = compositionRes.result || {};
-      }
-    },
+  {
+    key: "incomeNoStoreValue",
+    label: "营业收入不含充值",
+    isCount: false,
+    tip: "营业收入不含储值金额：订单扣除退款折扣后金额（不含储值充值）",
   },
-};
+  {
+    key: "payOrderNum",
+    label: "支付订单数",
+    isCount: true,
+    tip: "支付订单数：按客户支付完成时间统计的成功付款的订单数（不含退款、储值充值）",
+  },
+  {
+    key: "recharge",
+    label: "新增充值金额",
+    isCount: false,
+    tip: "新增充值金额：按客户支付完成时间统计的客户储值充值本金金额",
+  },
+  {
+    key: "rechargeUse",
+    label: "使用充值金额",
+    isCount: false,
+    tip: "使用储值支付本金金额：统计时间范围内，支付和退款成功的订单中，使用储值支付且扣除退款的金额",
+  },
+]);
+
+const metricList = computed(() => {
+  return metricDefs.value.map((def) => ({
+    ...def,
+    metric: overview.value[def.key] || {},
+  }));
+});
+
+watch(
+  params,
+  () => {
+    loadData();
+  },
+  { deep: true, immediate: true }
+);
+
+function clickBreadcrumb(item) {
+  params.value = {
+    searchType: item.searchType || "",
+    year: item.year || "",
+    month: item.month || "",
+    storeId: item.storeId || "",
+  };
+}
+
+function metricCurrent(metric) {
+  if (!metric || metric.current == null) return 0;
+  return Number(metric.current) || 0;
+}
+
+function formatCount(metric) {
+  return Math.round(metricCurrent(metric));
+}
+
+function rateText(metric) {
+  if (!metric || !metric.rate) return "0%";
+  return metric.rate;
+}
+
+function rateClass(metric) {
+  const trend = metric && metric.trend;
+  if (trend === "UP") return "up";
+  if (trend === "DOWN") return "down";
+  return "flat";
+}
+
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  const num = Number(val);
+  if (Number.isNaN(num)) return val;
+  return `${num}%`;
+}
+
+async function loadData() {
+  const query = { ...params.value };
+  const [overviewRes, sourceRes, compositionRes] = await Promise.all([
+    API_Statistics.getBusinessOverview(query),
+    API_Statistics.getBusinessSource(query),
+    API_Statistics.getBusinessComposition(query),
+  ]);
+  if (overviewRes && overviewRes.success) {
+    overview.value = overviewRes.result || {};
+  }
+  if (sourceRes && sourceRes.success) {
+    sourceList.value = sourceRes.result || [];
+  }
+  if (compositionRes && compositionRes.success) {
+    composition.value = compositionRes.result || {};
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/points.vue b/manager/src/views/statistics/points.vue
index 361a295f5..bdc5df4c2 100644
--- a/manager/src/views/statistics/points.vue
+++ b/manager/src/views/statistics/points.vue
@@ -70,89 +70,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { QuestionFilled } from "@element-plus/icons-vue";
 
-export default {
-  components: { QuestionFilled },
-  data() {
-    return {
-      overview: {},
-      distributionList: [],
-      sourceList: [],
-      identityList: [],
-      metricDefs: [
-        {
-          key: "totalIssued",
-          label: "累积发放积分",
-          isRate: false,
-          tip: "累积发放积分：历史累计发放给客户的积分总数",
-        },
-        {
-          key: "availablePoint",
-          label: "可用积分",
-          isRate: false,
-          tip: "可用积分：当前客户账户中尚未消耗的积分总和",
-        },
-        {
-          key: "usedPoint",
-          label: "累积消耗积分",
-          isRate: false,
-          tip: "累积消耗积分：历史累计已消耗的积分",
-        },
-        {
-          key: "usedRate",
-          label: "积分消耗率",
-          isRate: true,
-          tip: "积分消耗率：累积消耗积分 / 累积发放积分",
-        },
-      ],
-    };
+const overview = ref({});
+const distributionList = ref([]);
+const sourceList = ref([]);
+const identityList = ref([]);
+const metricDefs = ref([
+  {
+    key: "totalIssued",
+    label: "累积发放积分",
+    isRate: false,
+    tip: "累积发放积分：历史累计发放给客户的积分总数",
   },
-  computed: {
-    metricList() {
-      return this.metricDefs;
-    },
+  {
+    key: "availablePoint",
+    label: "可用积分",
+    isRate: false,
+    tip: "可用积分：当前客户账户中尚未消耗的积分总和",
   },
-  mounted() {
-    this.loadData();
+  {
+    key: "usedPoint",
+    label: "累积消耗积分",
+    isRate: false,
+    tip: "累积消耗积分：历史累计已消耗的积分",
   },
-  methods: {
-    formatNumber(val) {
-      if (val == null || val === "") return 0;
-      const num = Number(val);
-      if (Number.isNaN(num)) return val;
-      return Math.round(num * 100) / 100;
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      const num = Number(val);
-      if (Number.isNaN(num)) return val;
-      return `${num}%`;
-    },
-    async loadData() {
-      const [overviewRes, distributionRes, sourceRes, identityRes] = await Promise.all([
-        API_Statistics.getPointsOverview(),
-        API_Statistics.getPointsDistribution(),
-        API_Statistics.getPointsSourceDistribution(),
-        API_Statistics.getPointsIdentityStat(),
-      ]);
-      if (overviewRes && overviewRes.success) {
-        this.overview = overviewRes.result || {};
-      }
-      if (distributionRes && distributionRes.success) {
-        this.distributionList = distributionRes.result || [];
-      }
-      if (sourceRes && sourceRes.success) {
-        this.sourceList = sourceRes.result || [];
-      }
-      if (identityRes && identityRes.success) {
-        this.identityList = identityRes.result || [];
-      }
-    },
+  {
+    key: "usedRate",
+    label: "积分消耗率",
+    isRate: true,
+    tip: "积分消耗率：累积消耗积分 / 累积发放积分",
   },
-};
+]);
+
+const metricList = computed(() => {
+  return metricDefs.value;
+});
+
+onMounted(() => {
+  loadData();
+});
+
+function formatNumber(val) {
+  if (val == null || val === "") return 0;
+  const num = Number(val);
+  if (Number.isNaN(num)) return val;
+  return Math.round(num * 100) / 100;
+}
+
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  const num = Number(val);
+  if (Number.isNaN(num)) return val;
+  return `${num}%`;
+}
+
+async function loadData() {
+  const [overviewRes, distributionRes, sourceRes, identityRes] = await Promise.all([
+    API_Statistics.getPointsOverview(),
+    API_Statistics.getPointsDistribution(),
+    API_Statistics.getPointsSourceDistribution(),
+    API_Statistics.getPointsIdentityStat(),
+  ]);
+  if (overviewRes && overviewRes.success) {
+    overview.value = overviewRes.result || {};
+  }
+  if (distributionRes && distributionRes.success) {
+    distributionList.value = distributionRes.result || [];
+  }
+  if (sourceRes && sourceRes.success) {
+    sourceList.value = sourceRes.result || [];
+  }
+  if (identityRes && identityRes.success) {
+    identityList.value = identityRes.result || [];
+  }
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/statistics/sales-order-detail.vue b/manager/src/views/statistics/sales-order-detail.vue
index faba35164..37ad6525b 100644
--- a/manager/src/views/statistics/sales-order-detail.vue
+++ b/manager/src/views/statistics/sales-order-detail.vue
@@ -72,94 +72,91 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "sales-order-detail-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        storeId: "",
-        orderSn: "",
-        memberName: "",
-        keyword: "",
-      },
-      data: [],
-      total: 0,
-      shops: [],
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadShops();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    loadShops() {
-      getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
-        if (res.success) this.shops = res.result.records || [];
-      });
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getSalesOrderDetailReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportSalesOrderDetailReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "销售订单明细报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    clientTypeText(val) {
-      const map = {
-        H5: "移动端",
-        PC: "PC端",
-        WECHAT_MP: "小程序",
-        APP: "移动应用端",
-        UNKNOWN: "未知",
-      };
-      return map[val] || val || "";
-    },
-  },
-};
+defineOptions({ name: "sales-order-detail-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  storeId: "",
+  orderSn: "",
+  memberName: "",
+  keyword: "",
+});
+const data = ref([]);
+const total = ref(0);
+const shops = ref([]);
+
+onMounted(() => {
+  initDefaultRange();
+  loadShops();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function loadShops() {
+  getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
+    if (res.success) shops.value = res.result.records || [];
+  });
+}
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getSalesOrderDetailReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportSalesOrderDetailReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "销售订单明细报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function clientTypeText(val) {
+  const map = {
+    H5: "移动端",
+    PC: "PC端",
+    WECHAT_MP: "小程序",
+    APP: "移动应用端",
+    UNKNOWN: "未知",
+  };
+  return map[val] || val || "";
+}
 </script>
diff --git a/manager/src/views/statistics/store-performance.vue b/manager/src/views/statistics/store-performance.vue
index ab727783f..54dd6c1f9 100644
--- a/manager/src/views/statistics/store-performance.vue
+++ b/manager/src/views/statistics/store-performance.vue
@@ -90,89 +90,86 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "store-performance-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: { pageNumber: 1, pageSize: 20, storeId: "" },
-      data: [],
-      total: 0,
-      shops: [],
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadShops();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    loadShops() {
-      getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
-        if (res.success) this.shops = res.result.records || [];
-      });
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getStorePerformanceReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportStorePerformanceReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "店铺业绩报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-    rateClass(rate) {
-      if (!rate) return "";
-      if (rate.startsWith("+")) return "trend-up";
-      if (rate.startsWith("-") && rate !== "0%") return "trend-down";
-      return "";
-    },
-  },
-};
+defineOptions({ name: "store-performance-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({ pageNumber: 1, pageSize: 20, storeId: "" });
+const data = ref([]);
+const total = ref(0);
+const shops = ref([]);
+
+onMounted(() => {
+  initDefaultRange();
+  loadShops();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function loadShops() {
+  getShopListData({ pageNumber: 1, pageSize: 200 }).then((res) => {
+    if (res.success) shops.value = res.result.records || [];
+  });
+}
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getStorePerformanceReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportStorePerformanceReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "店铺业绩报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
+function rateClass(rate) {
+  if (!rate) return "";
+  if (rate.startsWith("+")) return "trend-up";
+  if (rate.startsWith("-") && rate !== "0%") return "trend-down";
+  return "";
+}
 </script>
 
 <style scoped>
diff --git a/manager/src/views/statistics/traffic.vue b/manager/src/views/statistics/traffic.vue
index 21c69653a..33095aa48 100644
--- a/manager/src/views/statistics/traffic.vue
+++ b/manager/src/views/statistics/traffic.vue
@@ -40,122 +40,118 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import affixTime from "@/components/affix-time";
 import * as API_Member from "@/api/member";
 import { Chart } from "@antv/g2";
 
-export default {
-  components: { affixTime },
+const uvs = ref(0);
+const pvs = ref(0);
+// G2 图表实例（原 data 中初始化为 ""）
+const orderChart = ref("");
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+});
+const data = ref([]);
 
-  data() {
-    return {
-      uvs: 0,
-      pvs: 0,
-      orderChart: "",
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-      },
-      data: [],
-    };
+watch(
+  params,
+  () => {
+    uvs.value = 0;
+    pvs.value = 0;
+    init();
   },
-  watch: {
-    params: {
-      handler() {
-        this.uvs = 0;
-        this.pvs = 0;
-        this.init();
-      },
-      deep: true,
+  { deep: true }
+);
+
+function initChart() {
+  const uv = [];
+  const pv = [];
+
+  data.value.forEach((item) => {
+    uv.push({
+      date: item.date,
+      uvNum: item.uvNum,
+      title: "访客数UV",
+      pv: item.uvNum,
+    });
+    pv.push({
+      date: item.date,
+      pvNum: item.pvNum,
+      pv: item.pvNum,
+      title: "浏览量PV",
+    });
+  });
+
+  const chartData = [...uv, ...pv];
+
+  orderChart.value.data(chartData);
+  orderChart.value.scale({
+    activeQuantity: {
+      range: [0, 1],
+      nice: true,
     },
-  },
-  methods: {
-    initChart() {
-      const uv = [];
-      const pv = [];
+  });
+  orderChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
 
-      this.data.forEach((item) => {
-        uv.push({
-          date: item.date,
-          uvNum: item.uvNum,
-          title: "访客数UV",
-          pv: item.uvNum,
+  orderChart.value
+    .line()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("smooth");
+
+  orderChart.value
+    .point()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  orderChart.value.area().position("date*pv").color("title").shape("smooth");
+
+  orderChart.value.render();
+}
+
+function clickBreadcrumb(item) {
+  params.value = JSON.parse(JSON.stringify(item));
+}
+
+function init() {
+  orderChart.value ? orderChart.value.clear() : "";
+  API_Member.getStatisticsList(params.value).then((res) => {
+    if (res.result) {
+      data.value = res.result;
+      res.result.forEach((item) => {
+        uvs.value += item.uvNum;
+        pvs.value += item.pvNum;
+      });
+
+      if (!orderChart.value) {
+        orderChart.value = new Chart({
+          container: "orderChart",
+          autoFit: true,
+          height: 500,
+          padding: [70, 70, 70, 70],
         });
-        pv.push({
-          date: item.date,
-          pvNum: item.pvNum,
-          pv: item.pvNum,
-          title: "浏览量PV",
-        });
-      });
+      }
+      initChart();
+    }
+  });
+}
 
-      const chartData = [...uv, ...pv];
-
-      this.orderChart.data(chartData);
-      this.orderChart.scale({
-        activeQuantity: {
-          range: [0, 1],
-          nice: true,
-        },
-      });
-      this.orderChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
-
-      this.orderChart
-        .line()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("smooth");
-
-      this.orderChart
-        .point()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-      this.orderChart.area().position("date*pv").color("title").shape("smooth");
-
-      this.orderChart.render();
-    },
-    clickBreadcrumb(item) {
-      this.params = JSON.parse(JSON.stringify(item));
-    },
-    init() {
-      this.orderChart ? this.orderChart.clear() : "";
-      API_Member.getStatisticsList(this.params).then((res) => {
-        if (res.result) {
-          this.data = res.result;
-          res.result.forEach((item) => {
-            this.uvs += item.uvNum;
-            this.pvs += item.pvNum;
-          });
-
-          if (!this.orderChart) {
-            this.orderChart = new Chart({
-              container: "orderChart",
-              autoFit: true,
-              height: 500,
-              padding: [70, 70, 70, 70],
-            });
-          }
-          this.initChart();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 <style scoped lang="scss">
 .table {
diff --git a/manager/src/views/sys/app-version/appVersion.vue b/manager/src/views/sys/app-version/appVersion.vue
index 8da4aaf0c..9d053ac08 100644
--- a/manager/src/views/sys/app-version/appVersion.vue
+++ b/manager/src/views/sys/app-version/appVersion.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -72,7 +72,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="版本名称" prop="versionName">
           <el-input v-model="form.versionName" maxlength="15" clearable style="width: 40%" />
         </el-form-item>
@@ -163,147 +163,154 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unixToDate } from "@/utils/filters";
 import * as API_Setting from "@/api/setting";
 
-export default {
-  name: "appVersion",
-  data() {
-    return {
-      queryModalVisible: false,
-      queryModalTitle: "查看更新信息",
-      loading: true,
-      modalVisible: false,
-      modalTitle: "",
-      modalType: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        type: "",
-      },
-      form: {
-        versionName: "",
-        version: "",
-        forceUpdate: 1,
-        type: "IOS",
-        downloadUrl: "",
-        content: "",
-        versionUpdateDate: "",
-      },
-      versionUpdateDate: "",
-      formValidate: {
-        version: [{ required: true, message: "版本号不能为空", trigger: "blur" }],
-        versionName: [{ required: true, message: "版本名称不能为空", trigger: "blur" }],
-        downloadUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
-        versionUpdateDate: [{ required: true, message: "更新时间不能为空" }],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getData();
-    },
-    changePage() {
-      this.getData();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      API_Setting.appVersionPage(this.searchForm).then((res) => {
-        this.loading = false;
+defineOptions({ name: "appVersion" });
+
+const queryModalVisible = ref(false);
+const queryModalTitle = ref("查看更新信息");
+const loading = ref(true);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const modalType = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  type: "",
+});
+const form = ref({
+  versionName: "",
+  version: "",
+  forceUpdate: 1,
+  type: "IOS",
+  downloadUrl: "",
+  content: "",
+  versionUpdateDate: "",
+});
+const versionUpdateDate = ref("");
+const formValidate = reactive({
+  version: [{ required: true, message: "版本号不能为空", trigger: "blur" }],
+  versionName: [{ required: true, message: "版本名称不能为空", trigger: "blur" }],
+  downloadUrl: [{ required: true, message: "下载地址不能为空", trigger: "blur" }],
+  versionUpdateDate: [{ required: true, message: "更新时间不能为空" }],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+const formRef = ref(null);
+
+function init() {
+  getData();
+}
+
+function changePage() {
+  getData();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getData();
+}
+
+function getData() {
+  loading.value = true;
+  API_Setting.appVersionPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function addAppVersion() {
+  modalVisible.value = true;
+  modalTitle.value = "添加APP版本信息";
+  modalType.value = 0;
+  const versionUpdateDate = unixToDate(new Date() / 1000);
+  form.value = {
+    forceUpdate: 0,
+    type: "IOS",
+    versionUpdateDate: versionUpdateDate,
+    content: " ",
+  };
+}
+
+function editAppVersion(v) {
+  modalVisible.value = true;
+  modalTitle.value = "修改APP版本信息";
+  modalType.value = 1;
+  v.forceUpdate ? (v.forceUpdate = 1) : (v.forceUpdate = 0);
+  form.value = v;
+}
+
+function saveAppVersion() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (JSON.stringify(form.value.versionUpdateDate).includes("T")) {
+        const versionUpdateDate = unixToDate(
+          form.value.versionUpdateDate / 1000
+        );
+        form.value.versionUpdateDate = versionUpdateDate;
+        form.value.updateTime = versionUpdateDate;
+      }
+      if (modalType.value == 0) {
+        delete form.value.id;
+        API_Setting.addVersion(form.value).then((res) => {
+          submitLoading.value = false;
+          if (res && res.success) {
+            ElMessage.success("添加成功");
+            modalVisible.value = false;
+            getData();
+          }
+        });
+      } else {
+        API_Setting.editVersion(form.value, form.value.id).then((res) => {
+          submitLoading.value = false;
+          if (res && res.success) {
+            ElMessage.success("修改成功");
+            modalVisible.value = false;
+            getData();
+          }
+        });
+      }
+    }
+  });
+}
+
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除么?", "确认删除", { type: "warning" }).then(() => {
+      API_Setting.deleteVersion(v.id).then((res) => {
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          ElMessage.success("删除成功");
+          getData();
         }
       });
-    },
-    addAppVersion() {
-      this.modalVisible = true;
-      this.modalTitle = "添加APP版本信息";
-      this.modalType = 0;
-      const versionUpdateDate = unixToDate(new Date() / 1000);
-      this.form = {
-        forceUpdate: 0,
-        type: "IOS",
-        versionUpdateDate: versionUpdateDate,
-        content: " ",
-      };
-    },
-    editAppVersion(v) {
-      this.modalVisible = true;
-      this.modalTitle = "修改APP版本信息";
-      this.modalType = 1;
-      v.forceUpdate ? (v.forceUpdate = 1) : (v.forceUpdate = 0);
-      this.form = v;
-    },
-    saveAppVersion() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (JSON.stringify(this.form.versionUpdateDate).includes("T")) {
-            const versionUpdateDate = unixToDate(
-              this.form.versionUpdateDate / 1000
-            );
-            this.form.versionUpdateDate = versionUpdateDate;
-            this.form.updateTime = versionUpdateDate;
-          }
-          if (this.modalType == 0) {
-            delete this.form.id;
-            API_Setting.addVersion(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res && res.success) {
-                ElMessage.success("添加成功");
-                this.modalVisible = false;
-                this.getData();
-              }
-            });
-          } else {
-            API_Setting.editVersion(this.form, this.form.id).then((res) => {
-              this.submitLoading = false;
-              if (res && res.success) {
-                ElMessage.success("修改成功");
-                this.modalVisible = false;
-                this.getData();
-              }
-            });
-          }
-        }
-      });
-    },
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除么?", "确认删除", { type: "warning" }).then(() => {
-          API_Setting.deleteVersion(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.getData();
-            }
-          });
-      }).catch(() => {});
-    },
-    detail(v) {
-      this.queryModalVisible = true;
-      this.form = JSON.parse(JSON.stringify(v));
-      this.versionUpdateDate = this.form.versionUpdateDate;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  }).catch(() => {});
+}
+
+function detail(v) {
+  queryModalVisible.value = true;
+  form.value = JSON.parse(JSON.stringify(v));
+  versionUpdateDate.value = form.value.versionUpdateDate;
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .search-form {
diff --git a/manager/src/views/sys/department-manage/departmentManage.vue b/manager/src/views/sys/department-manage/departmentManage.vue
index 4bd1a59ef..f32b67dc4 100644
--- a/manager/src/views/sys/department-manage/departmentManage.vue
+++ b/manager/src/views/sys/department-manage/departmentManage.vue
@@ -37,7 +37,7 @@
           </div>
         </el-col>
         <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
             <el-form-item label="部门名称" prop="title">
               <el-input v-model="form.title" />
             </el-form-item>
@@ -84,7 +84,7 @@
       width="500px"
       :close-on-click-modal="false"
     >
-      <el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
+      <el-form ref="formAddRef" :model="formAdd" label-width="85px" :rules="formValidate">
         <div v-if="showParent">
           <el-form-item label="上级部门：">{{ form.title }}</el-form-item>
         </div>
@@ -105,7 +105,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
   initDepartment,
@@ -117,258 +118,271 @@ import {
   updateDepartmentRole,
 } from "@/api/index";
 
-export default {
-  name: "department-manage",
-  data() {
-    return {
-      loading: true,
-      maxHeight: "500px",
-      strict: true,
-      userLoading: false,
-      loadingEdit: false,
-      modalVisible: false,
-      selectList: [],
-      selectCount: 0,
-      showParent: false,
-      modalTitle: "",
-      editTitle: "",
-      selectedRole: [],
-      searchKey: "",
-      currentNodeKey: null,
-      treeProps: {
-        label: "title",
-        children: "children",
-        isLeaf: "isLeaf",
-      },
-      form: {
-        id: "",
-        title: "",
-        parentId: "",
-        parentTitle: "",
-        sortOrder: 0,
-        status: 0,
-      },
-      formAdd: {},
-      formValidate: {
-        title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
-        sortOrder: [
-          {
-            required: true,
-            type: "number",
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-      dataEdit: [],
-      users: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getParentList();
+defineOptions({ name: "department-manage" });
+
+const loading = ref(true);
+const maxHeight = ref("500px");
+const strict = ref(true);
+const userLoading = ref(false);
+const loadingEdit = ref(false);
+const modalVisible = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const showParent = ref(false);
+const modalTitle = ref("");
+const editTitle = ref("");
+const selectedRole = ref([]);
+const searchKey = ref("");
+const currentNodeKey = ref(null);
+const treeProps = reactive({
+  label: "title",
+  children: "children",
+  isLeaf: "isLeaf",
+});
+const form = ref({
+  id: "",
+  title: "",
+  parentId: "",
+  parentTitle: "",
+  sortOrder: 0,
+  status: 0,
+});
+const formAdd = ref({});
+const formValidate = reactive({
+  title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+  sortOrder: [
+    {
+      required: true,
+      type: "number",
+      message: "排序值不能为空",
+      trigger: "blur",
     },
-    getParentList() {
-      this.loading = true;
-      initDepartment().then((res) => {
-        this.loading = false;
+  ],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const dataEdit = ref([]);
+const users = ref([]);
+
+const treeRef = ref(null);
+const formRef = ref(null);
+const formAddRef = ref(null);
+
+function init() {
+  getParentList();
+}
+
+function getParentList() {
+  loading.value = true;
+  initDepartment().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      const list = Array.isArray(res.result) ? res.result : [];
+      data.value = bubbleSort(normalizeDepartmentTree(list));
+    }
+  });
+}
+
+function normalizeDepartmentTree(list) {
+  return list.map((item) => {
+    const node = { ...item };
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      node.children = normalizeDepartmentTree(node.children);
+    } else {
+      delete node.children;
+    }
+    return node;
+  });
+}
+
+function onNodeClick(data) {
+  if (!data) {
+    cancelSelect();
+    return;
+  }
+  const row = JSON.parse(JSON.stringify(data));
+  for (const attr in row) {
+    if (row[attr] == null) {
+      row[attr] = "";
+    }
+  }
+  editTitle.value = row.title;
+  currentNodeKey.value = row.id;
+  userLoading.value = true;
+
+  getUserByDepartmentId(row.id).then((res) => {
+    const way = [];
+    res.result &&
+      res.result.forEach((item) => {
+        way.push(item.roleId);
+      });
+    selectedRole.value = way;
+  });
+
+  getRoleList({
+    pageNumber: 1,
+    pageSize: 10000,
+  }).then((res) => {
+    userLoading.value = false;
+    if (res.success) {
+      users.value = res.result.records;
+      form.value = row;
+    }
+  });
+}
+
+function onCheckChange(_data, { checkedNodes }) {
+  selectList.value = checkedNodes;
+  selectCount.value = checkedNodes.length;
+}
+
+function bubbleSort(array) {
+  if (!Array.isArray(array)) return [];
+  const len = array.length;
+  if (len < 2) return array;
+  for (let i = 0; i < len; i++) {
+    for (let j = 0; j < i; j++) {
+      if (array[j].sortOrder > array[i].sortOrder) {
+        const temp = array[j];
+        array[j] = array[i];
+        array[i] = temp;
+      }
+    }
+  }
+  return array;
+}
+
+function cancelSelect() {
+  treeRef.value?.setCurrentKey(null);
+  currentNodeKey.value = null;
+  formRef.value.resetFields();
+  delete form.value.id;
+  editTitle.value = "";
+  selectedRole.value = [];
+}
+
+function selectTreeEdit(v) {
+  if (v.length > 0) {
+    for (const attr in v[0]) {
+      if (v[0][attr] == null) {
+        v[0][attr] = "";
+      }
+    }
+    const data = JSON.parse(JSON.stringify(v[0]));
+    form.value.parentId = data.id;
+    form.value.parentTitle = data.title;
+  }
+}
+
+function cancelAdd() {
+  modalVisible.value = false;
+}
+
+function handleReset() {
+  formRef.value.resetFields();
+  form.value.status = 0;
+}
+
+function submitEdit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!form.value.id) {
+        ElMessage.warning("请先点击选择要修改的部门");
+        return;
+      }
+      const roleWay = [];
+      selectedRole.value.forEach((item) => {
+        roleWay.push({
+          departmentId: form.value.id,
+          roleId: item,
+        });
+      });
+
+      Promise.all([
+        editDepartment(form.value.id, form.value),
+        updateDepartmentRole(form.value.id, roleWay),
+      ]).then((res) => {
+        submitLoading.value = false;
+        if (res[0].success) {
+          ElMessage.success("编辑成功");
+          init();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+
+function submitAdd() {
+  formAddRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      addDepartment(formAdd.value).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          const list = Array.isArray(res.result) ? res.result : [];
-          this.data = this.bubbleSort(this.normalizeDepartmentTree(list));
+          ElMessage.success("添加成功");
+          init();
+          modalVisible.value = false;
         }
       });
-    },
-    normalizeDepartmentTree(list) {
-      return list.map((item) => {
-        const node = { ...item };
-        if (Array.isArray(node.children) && node.children.length > 0) {
-          node.children = this.normalizeDepartmentTree(node.children);
-        } else {
-          delete node.children;
-        }
-        return node;
-      });
-    },
-    onNodeClick(data) {
-      if (!data) {
-        this.cancelSelect();
-        return;
-      }
-      const row = JSON.parse(JSON.stringify(data));
-      for (const attr in row) {
-        if (row[attr] == null) {
-          row[attr] = "";
-        }
-      }
-      this.editTitle = row.title;
-      this.currentNodeKey = row.id;
-      this.userLoading = true;
+    }
+  });
+}
 
-      getUserByDepartmentId(row.id).then((res) => {
-        const way = [];
-        res.result &&
-          res.result.forEach((item) => {
-            way.push(item.roleId);
-          });
-        this.selectedRole = way;
-      });
+function add() {
+  if (form.value.id == "" || form.value.id == null) {
+    ElMessage.warning("请先点击选择一个部门");
+    return;
+  }
+  modalTitle.value = "添加子部门";
+  showParent.value = true;
+  formAdd.value = {
+    parentId: form.value.id,
+    sortOrder: 0,
+    status: 0,
+  };
+  modalVisible.value = true;
+}
 
-      getRoleList({
-        pageNumber: 1,
-        pageSize: 10000,
-      }).then((res) => {
-        this.userLoading = false;
+function addRoot() {
+  modalTitle.value = "添加一级部门";
+  showParent.value = false;
+  formAdd.value = {
+    parentId: 0,
+    sortOrder: 0,
+    status: 0,
+  };
+  modalVisible.value = true;
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未勾选要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 条数据及其下级所有数据?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteDepartment(ids).then((res) => {
         if (res.success) {
-          this.users = res.result.records;
-          this.form = row;
+          ElMessage.success("删除成功");
+          selectList.value = [];
+          selectCount.value = 0;
+          cancelSelect();
+          init();
         }
       });
-    },
-    onCheckChange(_data, { checkedNodes }) {
-      this.selectList = checkedNodes;
-      this.selectCount = checkedNodes.length;
-    },
-    bubbleSort(array) {
-      if (!Array.isArray(array)) return [];
-      const len = array.length;
-      if (len < 2) return array;
-      for (let i = 0; i < len; i++) {
-        for (let j = 0; j < i; j++) {
-          if (array[j].sortOrder > array[i].sortOrder) {
-            const temp = array[j];
-            array[j] = array[i];
-            array[i] = temp;
-          }
-        }
-      }
-      return array;
-    },
-    cancelSelect() {
-      this.$refs.treeRef?.setCurrentKey(null);
-      this.currentNodeKey = null;
-      this.$refs.form.resetFields();
-      delete this.form.id;
-      this.editTitle = "";
-      this.selectedRole = [];
-    },
-    selectTreeEdit(v) {
-      if (v.length > 0) {
-        for (const attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
-          }
-        }
-        const data = JSON.parse(JSON.stringify(v[0]));
-        this.form.parentId = data.id;
-        this.form.parentTitle = data.title;
-      }
-    },
-    cancelAdd() {
-      this.modalVisible = false;
-    },
-    handleReset() {
-      this.$refs.form.resetFields();
-      this.form.status = 0;
-    },
-    submitEdit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.id) {
-            ElMessage.warning("请先点击选择要修改的部门");
-            return;
-          }
-          const roleWay = [];
-          this.selectedRole.forEach((item) => {
-            roleWay.push({
-              departmentId: this.form.id,
-              roleId: item,
-            });
-          });
+  }).catch(() => {});
+}
 
-          Promise.all([
-            editDepartment(this.form.id, this.form),
-            updateDepartmentRole(this.form.id, roleWay),
-          ]).then((res) => {
-            this.submitLoading = false;
-            if (res[0].success) {
-              ElMessage.success("编辑成功");
-              this.init();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    submitAdd() {
-      this.$refs.formAdd.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          addDepartment(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("添加成功");
-              this.init();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    add() {
-      if (this.form.id == "" || this.form.id == null) {
-        ElMessage.warning("请先点击选择一个部门");
-        return;
-      }
-      this.modalTitle = "添加子部门";
-      this.showParent = true;
-      this.formAdd = {
-        parentId: this.form.id,
-        sortOrder: 0,
-        status: 0,
-      };
-      this.modalVisible = true;
-    },
-    addRoot() {
-      this.modalTitle = "添加一级部门";
-      this.showParent = false;
-      this.formAdd = {
-        parentId: 0,
-        sortOrder: 0,
-        status: 0,
-      };
-      this.modalVisible = true;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未勾选要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteDepartment(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.selectList = [];
-              this.selectCount = 0;
-              this.cancelSelect();
-              this.init();
-            }
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    const height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
-};
+onMounted(() => {
+  const height = document.documentElement.clientHeight;
+  maxHeight.value = Number(height - 287) + "px";
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/log-manage/logManage.vue b/manager/src/views/sys/log-manage/logManage.vue
index c24d9afae..db33a8a06 100644
--- a/manager/src/views/sys/log-manage/logManage.vue
+++ b/manager/src/views/sys/log-manage/logManage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
         <el-form-item label="搜索日志" prop="searchKey">
           <el-input v-model="searchForm.searchKey" placeholder="请输入搜索日志内容" clearable style="width: 240px" />
         </el-form-item>
@@ -31,7 +31,7 @@
         v-loading="loading"
         border
         :data="data"
-        ref="table"
+        ref="tableRef"
         style="width: 100%"
       >
         <el-table-column prop="name" label="操作名称" min-width="100" fixed="left" show-overflow-tooltip />
@@ -66,80 +66,79 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { unixToDate } from "@/utils/filters";
 import { getLogListData } from "@/api/index";
 
-export default {
-  name: "log-manage",
-  data() {
-    return {
-      loading: true,
-      selectDate: null,
-      searchForm: {
-        type: 1,
-        searchKey: "",
-        operatorName: "",
-        pageNumber: 1,
-        pageSize: 20,
-        startDate: "",
-        endDate: "",
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    unixToDate,
-    init() {
-      this.getLogList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getLogList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getLogList();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      if (this.selectDate && this.selectDate.length === 2) {
-        this.searchForm.startDate = this.selectDate[0];
-        this.searchForm.endDate = this.selectDate[1];
-      }
-      this.getLogList();
-    },
-    getLogList() {
-      this.loading = true;
-      getLogListData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res && res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        } else {
-          this.data = [];
-          this.total = 0;
-          ElMessage.error((res && res.message) || "日志查询失败");
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "log-manage" });
+
+const loading = ref(true);
+const selectDate = ref(null);
+const searchForm = reactive({
+  type: 1,
+  searchKey: "",
+  operatorName: "",
+  pageNumber: 1,
+  pageSize: 20,
+  startDate: "",
+  endDate: "",
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+// 模板 ref：searchForm 与 reactive 数据同名，改名避免互相覆盖；table 未被 script 使用，仅为保留模板 ref 声明
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+function init() {
+  getLogList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getLogList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getLogList();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  if (selectDate.value && selectDate.value.length === 2) {
+    searchForm.startDate = selectDate.value[0];
+    searchForm.endDate = selectDate.value[1];
+  }
+  getLogList();
+}
+function getLogList() {
+  loading.value = true;
+  getLogListData(searchForm).then((res) => {
+    loading.value = false;
+    if (res && res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    } else {
+      data.value = [];
+      total.value = 0;
+      ElMessage.error((res && res.message) || "日志查询失败");
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/sys/menu-manage/menu.vue b/manager/src/views/sys/menu-manage/menu.vue
index 44bf5d43b..2381f0859 100644
--- a/manager/src/views/sys/menu-manage/menu.vue
+++ b/manager/src/views/sys/menu-manage/menu.vue
@@ -68,7 +68,7 @@
           </div>
         </el-col>
         <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="110px" :rules="formValidate">
             <el-form-item label="类型" prop="type">
               <div v-show="form.level == 0">
                 <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
@@ -140,7 +140,7 @@
       :close-on-click-modal="false"
       class="menu-manage-dialog"
     >
-      <el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
+      <el-form ref="formAddRef" :model="formAdd" label-width="100px" :rules="formValidate">
         <div v-if="showParent">
           <el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
         </div>
@@ -186,7 +186,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
 import {
@@ -197,340 +198,350 @@ import {
   searchPermission,
 } from "@/api/index";
 import util from "@/libs/util.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "menu-manage",
-  components: {
-    Menu,
-    List,
-    ArrowDown,
-  },
-  data() {
-    return {
-      loading: true,
-      strict: true,
-      maxHeight: "500px",
-      expandLevel: 1,
-      menuModalVisible: false,
-      selectList: [],
-      selectCount: 0,
-      showParent: false,
-      searchKey: "",
-      parentTitle: "",
-      editTitle: "",
-      modalTitle: "",
-      expandedKeys: [],
-      currentNodeKey: null,
-      treeKey: 0,
-      treeProps: {
-        label: "title",
-        children: "children",
-      },
-      form: {
-        id: "",
-        title: "",
-        name: "",
-        path: "",
-        frontRoute: "",
-        parentId: "",
-        sortOrder: 0,
-        level: 0,
-        permission: "",
-      },
-      formAdd: {},
-      formValidate: {
-        title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
-        name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
-        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
-        frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
-        sortOrder: [
-          {
-            required: true,
-            type: "number",
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getAllList();
+defineOptions({ name: "menu-manage" });
+
+const appStore = useAppStore();
+
+const loading = ref(true);
+const strict = ref(true);
+const maxHeight = ref("500px");
+const expandLevel = ref(1);
+const menuModalVisible = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const showParent = ref(false);
+const searchKey = ref("");
+const parentTitle = ref("");
+const editTitle = ref("");
+const modalTitle = ref("");
+const expandedKeys = ref([]);
+const currentNodeKey = ref(null);
+const treeKey = ref(0);
+const treeProps = reactive({
+  label: "title",
+  children: "children",
+});
+const form = ref({
+  id: "",
+  title: "",
+  name: "",
+  path: "",
+  frontRoute: "",
+  parentId: "",
+  sortOrder: 0,
+  level: 0,
+  permission: "",
+});
+const formAdd = ref({});
+const formValidate = reactive({
+  title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
+  name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
+  path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
+  frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
+  sortOrder: [
+    {
+      required: true,
+      type: "number",
+      message: "排序值不能为空",
+      trigger: "blur",
     },
-    collectExpandedKeys(nodes, keys = []) {
-      if (!nodes) return keys;
-      nodes.forEach((node) => {
-        if (node.expand === true) {
-          keys.push(node.id);
-        }
-        if (node.children && node.children.length > 0) {
-          this.collectExpandedKeys(node.children, keys);
+  ],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+
+const treeRef = ref(null);
+const formRef = ref(null);
+const formAddRef = ref(null);
+
+function init() {
+  getAllList();
+}
+
+function collectExpandedKeys(nodes, keys = []) {
+  if (!nodes) return keys;
+  nodes.forEach((node) => {
+    if (node.expand === true) {
+      keys.push(node.id);
+    }
+    if (node.children && node.children.length > 0) {
+      collectExpandedKeys(node.children, keys);
+    }
+  });
+  return keys;
+}
+
+function handleDropdown(name) {
+  if (name == "expandOne") {
+    expandLevel.value = 1;
+    getAllList();
+  } else if (name == "expandTwo") {
+    expandLevel.value = 2;
+    getAllList();
+  } else if (name == "expandThree") {
+    expandLevel.value = 3;
+    getAllList();
+  }
+  if (name == "expandAll") {
+    expandLevel.value = 4;
+    getAllList();
+  } else if (name == "refresh") {
+    getAllList();
+  }
+}
+
+function getAllList() {
+  loading.value = true;
+  getAllPermissionList().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      const level = expandLevel.value;
+      res.result.forEach(function (e) {
+        if (level == 1) {
+          if (e.level == 0) {
+            e.expand = false;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = false;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 2) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = false;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 3) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = true;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 4) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = true;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = true;
+                  }
+                });
+              }
+            });
+          }
         }
       });
-      return keys;
-    },
-    handleDropdown(name) {
-      if (name == "expandOne") {
-        this.expandLevel = 1;
-        this.getAllList();
-      } else if (name == "expandTwo") {
-        this.expandLevel = 2;
-        this.getAllList();
-      } else if (name == "expandThree") {
-        this.expandLevel = 3;
-        this.getAllList();
+      data.value = res.result;
+      expandedKeys.value = collectExpandedKeys(res.result);
+      treeKey.value += 1;
+    }
+  });
+}
+
+function onNodeClick(nodeData) {
+  if (nodeData) {
+    const menu = JSON.parse(JSON.stringify(nodeData));
+    form.value = menu;
+    editTitle.value = menu.title;
+    currentNodeKey.value = menu.id;
+  } else {
+    cancelEdit();
+  }
+}
+
+function onCheckChange(_data, { checkedNodes }) {
+  selectList.value = checkedNodes;
+  selectCount.value = checkedNodes.length;
+}
+
+function search() {
+  if (searchKey.value) {
+    loading.value = true;
+    searchPermission({ title: searchKey.value }).then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result;
+        expandedKeys.value = [];
+        treeKey.value += 1;
       }
-      if (name == "expandAll") {
-        this.expandLevel = 4;
-        this.getAllList();
-      } else if (name == "refresh") {
-        this.getAllList();
+    });
+  } else {
+    getAllList();
+  }
+}
+
+function cancelEdit() {
+  treeRef.value?.setCurrentKey(null);
+  currentNodeKey.value = null;
+  formRef.value.resetFields();
+  form.value.id = "";
+  editTitle.value = "";
+}
+
+function handleReset() {
+  formRef.value.resetFields();
+  form.value.frontRoute = "";
+}
+
+function submitEdit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!form.value.id) {
+        ElMessage.warning("请先点击选择要修改的菜单节点");
+        return;
       }
-    },
-    getAllList() {
-      this.loading = true;
-      getAllPermissionList().then((res) => {
-        this.loading = false;
+      submitLoading.value = true;
+      if (form.value.sortOrder == null) {
+        form.value.sortOrder = 0;
+      }
+      delete form.value.icon;
+      delete form.value.frontComponent;
+      delete form.value.buttonType;
+      delete form.value.updateTime;
+      delete form.value.selected;
+      delete form.value.description;
+      delete form.value.children;
+
+      editPermission(form.value).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          const expandLevel = this.expandLevel;
-          res.result.forEach(function (e) {
-            if (expandLevel == 1) {
-              if (e.level == 0) {
-                e.expand = false;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 2) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 3) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 4) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = true;
-                      }
-                    });
-                  }
-                });
-              }
-            }
-          });
-          this.data = res.result;
-          this.expandedKeys = this.collectExpandedKeys(res.result);
-          this.treeKey += 1;
+          ElMessage.success("编辑成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          init();
+          menuModalVisible.value = false;
         }
       });
-    },
-    onNodeClick(data) {
-      if (data) {
-        const menu = JSON.parse(JSON.stringify(data));
-        this.form = menu;
-        this.editTitle = menu.title;
-        this.currentNodeKey = menu.id;
-      } else {
-        this.cancelEdit();
-      }
-    },
-    onCheckChange(_data, { checkedNodes }) {
-      this.selectList = checkedNodes;
-      this.selectCount = checkedNodes.length;
-    },
-    search() {
-      if (this.searchKey) {
-        this.loading = true;
-        searchPermission({ title: this.searchKey }).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result;
-            this.expandedKeys = [];
-            this.treeKey += 1;
-          }
-        });
-      } else {
-        this.getAllList();
-      }
-    },
-    cancelEdit() {
-      this.$refs.treeRef?.setCurrentKey(null);
-      this.currentNodeKey = null;
-      this.$refs.form.resetFields();
-      this.form.id = "";
-      this.editTitle = "";
-    },
-    handleReset() {
-      this.$refs.form.resetFields();
-      this.form.frontRoute = "";
-    },
-    submitEdit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.id) {
-            ElMessage.warning("请先点击选择要修改的菜单节点");
-            return;
-          }
-          this.submitLoading = true;
-          if (this.form.sortOrder == null) {
-            this.form.sortOrder = 0;
-          }
-          delete this.form.icon;
-          delete this.form.frontComponent;
-          delete this.form.buttonType;
-          delete this.form.updateTime;
-          delete this.form.selected;
-          delete this.form.description;
-          delete this.form.children;
+    }
+  });
+}
 
-          editPermission(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("编辑成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    submitAdd() {
-      this.$refs.formAdd.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
+function submitAdd() {
+  formAddRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
 
-          addPermission(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("添加成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
+      addPermission(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("添加成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          init();
+          menuModalVisible.value = false;
         }
       });
-    },
-    addMenu() {
-      if (!this.form.id) {
-        ElMessage.warning("请先点击选择一个菜单权限节点");
-        return;
-      }
-      this.parentTitle = this.form.title;
-      this.modalTitle = "添加子节点";
-      this.showParent = true;
-      if (this.form.level == 2) {
-        ElMessageBox.alert("仅支持2级菜单目录", "抱歉，不能添加啦", { type: "warning" });
-        return;
-      }
-      this.formAdd = {
-        parentId: this.form.id,
-        level: Number(this.form.level) + 1,
-        sortOrder: 0,
-        permission: "",
-      };
-      if (this.form.level == 0) {
-        this.formAdd.path = "/";
-        this.formAdd.frontRoute = "Main";
-      }
-      this.menuModalVisible = true;
-    },
-    addRootMenu() {
-      this.modalTitle = "添加顶级菜单";
-      this.showParent = false;
-      this.formAdd = {
-        level: 0,
-        sortOrder: 0,
-      };
-      this.menuModalVisible = true;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未勾选要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 条数据?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deletePermission(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.selectList = [];
-              this.selectCount = 0;
-              this.cancelEdit();
-              this.init();
-            }
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    const height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
-};
+    }
+  });
+}
+
+function addMenu() {
+  if (!form.value.id) {
+    ElMessage.warning("请先点击选择一个菜单权限节点");
+    return;
+  }
+  parentTitle.value = form.value.title;
+  modalTitle.value = "添加子节点";
+  showParent.value = true;
+  if (form.value.level == 2) {
+    ElMessageBox.alert("仅支持2级菜单目录", "抱歉，不能添加啦", { type: "warning" });
+    return;
+  }
+  formAdd.value = {
+    parentId: form.value.id,
+    level: Number(form.value.level) + 1,
+    sortOrder: 0,
+    permission: "",
+  };
+  if (form.value.level == 0) {
+    formAdd.value.path = "/";
+    formAdd.value.frontRoute = "Main";
+  }
+  menuModalVisible.value = true;
+}
+
+function addRootMenu() {
+  modalTitle.value = "添加顶级菜单";
+  showParent.value = false;
+  formAdd.value = {
+    level: 0,
+    sortOrder: 0,
+  };
+  menuModalVisible.value = true;
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未勾选要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 条数据?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deletePermission(ids).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          selectList.value = [];
+          selectCount.value = 0;
+          cancelEdit();
+          init();
+        }
+      });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  const height = document.documentElement.clientHeight;
+  maxHeight.value = Number(height - 287) + "px";
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/menu-manage/menuManage.vue b/manager/src/views/sys/menu-manage/menuManage.vue
index dfa0cb201..634609c66 100644
--- a/manager/src/views/sys/menu-manage/menuManage.vue
+++ b/manager/src/views/sys/menu-manage/menuManage.vue
@@ -9,19 +9,10 @@
   </el-tabs>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import managerMenu from "./menu";
 import storeMenu from "./storeMenu";
 
-export default {
-  components: {
-    managerMenu,
-    storeMenu,
-  },
-  data() {
-    return {
-      activeTab: "platform",
-    };
-  },
-};
+const activeTab = ref("platform");
 </script>
diff --git a/manager/src/views/sys/menu-manage/storeMenu.vue b/manager/src/views/sys/menu-manage/storeMenu.vue
index a335f78ad..b353defbc 100644
--- a/manager/src/views/sys/menu-manage/storeMenu.vue
+++ b/manager/src/views/sys/menu-manage/storeMenu.vue
@@ -68,7 +68,7 @@
           </div>
         </el-col>
         <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <el-form ref="form" :model="form" label-width="110px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="110px" :rules="formValidate">
             <el-form-item label="类型" prop="type">
               <div v-show="form.level == 0">
                 <el-icon :size="16" style="margin-right: 5px"><Menu /></el-icon>
@@ -140,7 +140,7 @@
       :close-on-click-modal="false"
       class="menu-manage-dialog"
     >
-      <el-form ref="formAdd" :model="formAdd" label-width="100px" :rules="formValidate">
+      <el-form ref="formAddRef" :model="formAdd" label-width="100px" :rules="formValidate">
         <div v-if="showParent">
           <el-form-item label="上级节点：">{{ parentTitle }}</el-form-item>
         </div>
@@ -186,7 +186,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Menu, List, ArrowDown } from "@element-plus/icons-vue";
 import {
@@ -197,340 +198,337 @@ import {
   searchStorePermission,
 } from "@/api/index";
 import util from "@/libs/util.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "store-menu-manage",
-  components: {
-    Menu,
-    List,
-    ArrowDown,
-  },
-  data() {
-    return {
-      loading: true,
-      strict: true,
-      maxHeight: "500px",
-      expandLevel: 1,
-      menuModalVisible: false,
-      selectList: [],
-      selectCount: 0,
-      showParent: false,
-      searchKey: "",
-      parentTitle: "",
-      editTitle: "",
-      modalTitle: "",
-      expandedKeys: [],
-      currentNodeKey: null,
-      treeKey: 0,
-      treeProps: {
-        label: "title",
-        children: "children",
-      },
-      form: {
-        id: "",
-        title: "",
-        name: "",
-        path: "",
-        frontRoute: "",
-        parentId: "",
-        sortOrder: 0,
-        level: 0,
-        permission: "",
-      },
-      formAdd: {},
-      formValidate: {
-        title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
-        name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
-        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
-        frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
-        sortOrder: [
-          {
-            required: true,
-            type: "number",
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getAllList();
+defineOptions({ name: "store-menu-manage" });
+
+const appStore = useAppStore();
+
+const loading = ref(true);
+const strict = ref(true);
+const maxHeight = ref("500px");
+const expandLevel = ref(1);
+const menuModalVisible = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const showParent = ref(false);
+const searchKey = ref("");
+const parentTitle = ref("");
+const editTitle = ref("");
+const modalTitle = ref("");
+const expandedKeys = ref([]);
+const currentNodeKey = ref(null);
+const treeKey = ref(0);
+const treeProps = reactive({
+  label: "title",
+  children: "children",
+});
+const form = ref({
+  id: "",
+  title: "",
+  name: "",
+  path: "",
+  frontRoute: "",
+  parentId: "",
+  sortOrder: 0,
+  level: 0,
+  permission: "",
+});
+const formAdd = ref({});
+const formValidate = reactive({
+  title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
+  name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
+  path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
+  frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
+  sortOrder: [
+    {
+      required: true,
+      type: "number",
+      message: "排序值不能为空",
+      trigger: "blur",
     },
-    collectExpandedKeys(nodes, keys = []) {
-      if (!nodes) return keys;
-      nodes.forEach((node) => {
-        if (node.expand === true) {
-          keys.push(node.id);
-        }
-        if (node.children && node.children.length > 0) {
-          this.collectExpandedKeys(node.children, keys);
+  ],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+
+const treeRef = ref(null);
+const formRef = ref(null);
+const formAddRef = ref(null);
+
+function init() {
+  getAllList();
+}
+function collectExpandedKeys(nodes, keys = []) {
+  if (!nodes) return keys;
+  nodes.forEach((node) => {
+    if (node.expand === true) {
+      keys.push(node.id);
+    }
+    if (node.children && node.children.length > 0) {
+      collectExpandedKeys(node.children, keys);
+    }
+  });
+  return keys;
+}
+function handleDropdown(name) {
+  if (name == "expandOne") {
+    expandLevel.value = 1;
+    getAllList();
+  } else if (name == "expandTwo") {
+    expandLevel.value = 2;
+    getAllList();
+  } else if (name == "expandThree") {
+    expandLevel.value = 3;
+    getAllList();
+  }
+  if (name == "expandAll") {
+    expandLevel.value = 4;
+    getAllList();
+  } else if (name == "refresh") {
+    getAllList();
+  }
+}
+function getAllList() {
+  loading.value = true;
+  getStoreAllPermissionList().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      const level = expandLevel.value;
+      res.result.forEach(function (e) {
+        if (level == 1) {
+          if (e.level == 0) {
+            e.expand = false;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = false;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 2) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = false;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 3) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = true;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = false;
+                  }
+                });
+              }
+            });
+          }
+        } else if (level == 4) {
+          if (e.level == 0) {
+            e.expand = true;
+          }
+          if (e.children && e.children.length > 0) {
+            e.children.forEach(function (c) {
+              if (c.level == 1) {
+                c.expand = true;
+              }
+              if (c.children && c.children.length > 0) {
+                c.children.forEach(function (b) {
+                  if (b.level == 2) {
+                    b.expand = true;
+                  }
+                });
+              }
+            });
+          }
         }
       });
-      return keys;
-    },
-    handleDropdown(name) {
-      if (name == "expandOne") {
-        this.expandLevel = 1;
-        this.getAllList();
-      } else if (name == "expandTwo") {
-        this.expandLevel = 2;
-        this.getAllList();
-      } else if (name == "expandThree") {
-        this.expandLevel = 3;
-        this.getAllList();
+      data.value = res.result;
+      expandedKeys.value = collectExpandedKeys(res.result);
+      treeKey.value += 1;
+    }
+  });
+}
+function onNodeClick(nodeData) {
+  if (nodeData) {
+    const menu = JSON.parse(JSON.stringify(nodeData));
+    form.value = menu;
+    editTitle.value = menu.title;
+    currentNodeKey.value = menu.id;
+  } else {
+    cancelEdit();
+  }
+}
+function onCheckChange(_data, { checkedNodes }) {
+  selectList.value = checkedNodes;
+  selectCount.value = checkedNodes.length;
+}
+function search() {
+  if (searchKey.value) {
+    loading.value = true;
+    searchStorePermission({ title: searchKey.value }).then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result;
+        expandedKeys.value = [];
+        treeKey.value += 1;
       }
-      if (name == "expandAll") {
-        this.expandLevel = 4;
-        this.getAllList();
-      } else if (name == "refresh") {
-        this.getAllList();
+    });
+  } else {
+    getAllList();
+  }
+}
+function cancelEdit() {
+  treeRef.value?.setCurrentKey(null);
+  currentNodeKey.value = null;
+  formRef.value.resetFields();
+  form.value.id = "";
+  editTitle.value = "";
+}
+function handleReset() {
+  formRef.value.resetFields();
+  form.value.frontRoute = "";
+}
+function submitEdit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!form.value.id) {
+        ElMessage.warning("请先点击选择要修改的菜单节点");
+        return;
       }
-    },
-    getAllList() {
-      this.loading = true;
-      getStoreAllPermissionList().then((res) => {
-        this.loading = false;
+      submitLoading.value = true;
+      if (form.value.sortOrder == null) {
+        form.value.sortOrder = 0;
+      }
+      delete form.value.icon;
+      delete form.value.frontComponent;
+      delete form.value.buttonType;
+      delete form.value.updateTime;
+      delete form.value.selected;
+      delete form.value.description;
+      delete form.value.children;
+
+      editStorePermission(form.value).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          const expandLevel = this.expandLevel;
-          res.result.forEach(function (e) {
-            if (expandLevel == 1) {
-              if (e.level == 0) {
-                e.expand = false;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 2) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 3) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 4) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = true;
-                      }
-                    });
-                  }
-                });
-              }
-            }
-          });
-          this.data = res.result;
-          this.expandedKeys = this.collectExpandedKeys(res.result);
-          this.treeKey += 1;
+          ElMessage.success("编辑成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          init();
+          menuModalVisible.value = false;
         }
       });
-    },
-    onNodeClick(data) {
-      if (data) {
-        const menu = JSON.parse(JSON.stringify(data));
-        this.form = menu;
-        this.editTitle = menu.title;
-        this.currentNodeKey = menu.id;
-      } else {
-        this.cancelEdit();
-      }
-    },
-    onCheckChange(_data, { checkedNodes }) {
-      this.selectList = checkedNodes;
-      this.selectCount = checkedNodes.length;
-    },
-    search() {
-      if (this.searchKey) {
-        this.loading = true;
-        searchStorePermission({ title: this.searchKey }).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result;
-            this.expandedKeys = [];
-            this.treeKey += 1;
-          }
-        });
-      } else {
-        this.getAllList();
-      }
-    },
-    cancelEdit() {
-      this.$refs.treeRef?.setCurrentKey(null);
-      this.currentNodeKey = null;
-      this.$refs.form.resetFields();
-      this.form.id = "";
-      this.editTitle = "";
-    },
-    handleReset() {
-      this.$refs.form.resetFields();
-      this.form.frontRoute = "";
-    },
-    submitEdit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.id) {
-            ElMessage.warning("请先点击选择要修改的菜单节点");
-            return;
-          }
-          this.submitLoading = true;
-          if (this.form.sortOrder == null) {
-            this.form.sortOrder = 0;
-          }
-          delete this.form.icon;
-          delete this.form.frontComponent;
-          delete this.form.buttonType;
-          delete this.form.updateTime;
-          delete this.form.selected;
-          delete this.form.description;
-          delete this.form.children;
+    }
+  });
+}
+function submitAdd() {
+  formAddRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
 
-          editStorePermission(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("编辑成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
+      addStorePermission(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("添加成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          init();
+          menuModalVisible.value = false;
         }
       });
-    },
-    submitAdd() {
-      this.$refs.formAdd.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
+    }
+  });
+}
+function addMenu() {
+  if (!form.value.id) {
+    ElMessage.warning("请先点击选择一个菜单权限节点");
+    return;
+  }
+  parentTitle.value = form.value.title;
+  modalTitle.value = "添加子节点";
+  showParent.value = true;
+  if (form.value.level == 2) {
+    ElMessageBox.alert("仅支持2级菜单目录", "抱歉，不能添加啦", { type: "warning" });
+    return;
+  }
+  formAdd.value = {
+    parentId: form.value.id,
+    level: Number(form.value.level) + 1,
+    sortOrder: 0,
+    permission: "",
+  };
+  if (form.value.level == 0) {
+    formAdd.value.path = "/";
+    formAdd.value.frontRoute = "Main";
+  }
+  menuModalVisible.value = true;
+}
+function addRootMenu() {
+  modalTitle.value = "添加顶级菜单";
+  showParent.value = false;
+  formAdd.value = {
+    level: 0,
+    sortOrder: 0,
+  };
+  menuModalVisible.value = true;
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未勾选要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 条数据?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteStorePermission(ids).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+          appStore.setAdded(false);
+          util.initRouter();
+          selectList.value = [];
+          selectCount.value = 0;
+          cancelEdit();
+          init();
+        }
+      });
+  }).catch(() => {});
+}
 
-          addStorePermission(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("添加成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    addMenu() {
-      if (!this.form.id) {
-        ElMessage.warning("请先点击选择一个菜单权限节点");
-        return;
-      }
-      this.parentTitle = this.form.title;
-      this.modalTitle = "添加子节点";
-      this.showParent = true;
-      if (this.form.level == 2) {
-        ElMessageBox.alert("仅支持2级菜单目录", "抱歉，不能添加啦", { type: "warning" });
-        return;
-      }
-      this.formAdd = {
-        parentId: this.form.id,
-        level: Number(this.form.level) + 1,
-        sortOrder: 0,
-        permission: "",
-      };
-      if (this.form.level == 0) {
-        this.formAdd.path = "/";
-        this.formAdd.frontRoute = "Main";
-      }
-      this.menuModalVisible = true;
-    },
-    addRootMenu() {
-      this.modalTitle = "添加顶级菜单";
-      this.showParent = false;
-      this.formAdd = {
-        level: 0,
-        sortOrder: 0,
-      };
-      this.menuModalVisible = true;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未勾选要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 条数据?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteStorePermission(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.selectList = [];
-              this.selectCount = 0;
-              this.cancelEdit();
-              this.init();
-            }
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    const height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
-};
+onMounted(() => {
+  const height = document.documentElement.clientHeight;
+  maxHeight.value = Number(height - 287) + "px";
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/message/messageTemplate.vue b/manager/src/views/sys/message/messageTemplate.vue
index 33d7451f3..0ba020517 100644
--- a/manager/src/views/sys/message/messageTemplate.vue
+++ b/manager/src/views/sys/message/messageTemplate.vue
@@ -218,243 +218,239 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { ElMessage } from "element-plus";
 import * as API_Setting from "@/api/setting.js";
 
-export default {
-  name: "messageTemplate",
-  data() {
-    return {
-      loading: false,
-      activeTab: "member",
-      syncOaLoading: false,
-      syncMpLoading: false,
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      memberRows: [],
-      currentRow: {},
-      noticeDetailText: "",
-      noticeModalVisible: false,
-      oaModalVisible: false,
-      mpModalVisible: false,
-      emailModalVisible: false,
-      emailDetailText: "",
-    };
-  },
-  methods: {
-    isOpen(status) {
-      return String(status || "").toUpperCase() === "OPEN";
-    },
-    wechatEnableToOpenClose(enable) {
-      if (enable === true || enable === "true" || enable === 1) return "OPEN";
-      return "CLOSE";
-    },
-    toOpenClose(flag) {
-      return flag ? "OPEN" : "CLOSE";
-    },
-    safeText(v) {
-      return v === undefined || v === null ? "" : String(v);
-    },
-    pickByKeys(obj, keys) {
-      for (let i = 0; i < keys.length; i++) {
-        const val = obj ? obj[keys[i]] : "";
-        if (val !== undefined && val !== null && val !== "") return val;
-      }
-      return "";
-    },
-    formatOaContent(item) {
-      if (!item) return "";
-      const first = this.pickByKeys(item, ["first", "title", "name"]);
-      const remark = this.pickByKeys(item, ["remark", "content"]);
-      const keywords = Array.isArray(item.keywords)
-        ? item.keywords.map((k) => this.pickByKeys(k, ["name", "value", "label"])).filter(Boolean).join(" / ")
-        : this.safeText(item.keywordsText || "");
-      return [first, keywords, remark].filter(Boolean).join("\n");
-    },
-    formatMpContent(item) {
-      if (!item) return "";
-      const keywordsText = this.safeText(item.keywordsText);
-      if (keywordsText) return keywordsText;
-      if (Array.isArray(item.keywords)) {
-        return item.keywords.map((k) => this.pickByKeys(k, ["name", "value", "label"])).filter(Boolean).join(" / ");
-      }
-      return this.safeText(item.content);
-    },
-    async loadMemberPage() {
-      this.loading = true;
-      try {
-        const res = await API_Setting.getMessageTemplateAggregatePage(this.searchForm);
-        if (!(res && res.success && res.result)) {
-          this.memberRows = [];
-          this.total = 0;
-          ElMessage.error((res && res.message) || "加载消息模板失败");
-          return;
-        }
-        const records = res.result.records || [];
-        this.total = res.result.total || 0;
-        this.memberRows = records.map((agg, idx) => {
-          const item = { ...(agg.notice || {}) };
-          const oa = agg.wechatOa;
-          const mp = agg.wechatMp;
-          return {
-            ...item,
-            emailStatus: item.emailStatus || "CLOSE",
-            emailContent: item.emailContent || "",
-            index: (this.searchForm.pageNumber - 1) * this.searchForm.pageSize + idx + 1,
-            oaId: oa ? oa.id : "",
-            oaName: oa ? this.pickByKeys(oa, ["name", "templateName", "title"]) : "",
-            oaCode: oa ? this.pickByKeys(oa, ["code", "templateId"]) : "",
-            oaStatus: oa ? this.wechatEnableToOpenClose(oa.enable) : "",
-            oaRaw: oa || null,
-            oaContent: this.formatOaContent(oa),
-            mpId: mp ? mp.id : "",
-            mpName: mp ? this.pickByKeys(mp, ["name", "templateName", "title"]) : "",
-            mpTemplateId: mp ? this.pickByKeys(mp, ["templateId"]) : "",
-            mpCode: mp ? this.pickByKeys(mp, ["code"]) : "",
-            mpStatus: mp ? this.wechatEnableToOpenClose(mp.enable) : "",
-            mpRaw: mp || null,
-            mpContent: this.formatMpContent(mp),
-          };
-        });
-      } finally {
-        this.loading = false;
-      }
-    },
-    reloadCurrent() {
-      if (this.activeTab === "member") this.loadMemberPage();
-    },
-    async syncOaTemplates() {
-      this.syncOaLoading = true;
-      try {
-        const res = await API_Setting.wechatMessageSync();
-        if (res && res.success) {
-          await this.loadMemberPage();
-          ElMessage.success("服务号模板同步成功");
-        } else {
-          ElMessage.error((res && res.message) || "服务号模板同步失败");
-        }
-      } finally {
-        this.syncOaLoading = false;
-      }
-    },
-    async syncMpTemplates() {
-      this.syncMpLoading = true;
-      try {
-        const res = await API_Setting.wechatMPMessageSync();
-        if (res && res.success) {
-          await this.loadMemberPage();
-          ElMessage.success("小程序模板同步成功");
-        } else {
-          ElMessage.error((res && res.message) || "小程序模板同步失败");
-        }
-      } finally {
-        this.syncMpLoading = false;
-      }
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.loadMemberPage();
-    },
-    async openNoticeModal(row) {
-      this.currentRow = { ...row };
-      this.noticeDetailText = row.noticeContent || "";
-      this.noticeModalVisible = true;
-      const res = await API_Setting.getNoticeMessageDetail(row.id);
-      if (res && res.success && res.result) {
-        const d = res.result;
-        this.noticeDetailText = [d.noticeTitle, d.noticeContent].filter(Boolean).join("\n");
-      }
-    },
-    openOaModal(row) {
-      this.currentRow = { ...row };
-      this.oaModalVisible = true;
-    },
-    openMpModal(row) {
-      this.currentRow = { ...row };
-      this.mpModalVisible = true;
-    },
-    async openEmailModal(row) {
-      this.currentRow = { ...row };
-      const fallback = row.emailContent || row.noticeContent || "";
-      this.emailDetailText = row.noticeTitle ? [row.noticeTitle, fallback].filter(Boolean).join("\n") : fallback;
-      this.emailModalVisible = true;
-      const res = await API_Setting.getNoticeMessageDetail(row.id);
-      if (res && res.success && res.result) {
-        const d = res.result;
-        if (d.emailContent) {
-          this.emailDetailText = d.emailContent;
-        } else {
-          this.emailDetailText = [d.noticeTitle, d.noticeContent].filter(Boolean).join("\n");
-        }
-      }
-    },
-    updateRowStatus(row, key, val) {
-      const idx = this.memberRows.findIndex((x) => x.id === row.id);
-      if (idx >= 0) this.memberRows[idx][key] = val;
-      if (this.currentRow && this.currentRow.id === row.id) this.currentRow[key] = val;
-    },
-    async toggleNoticeChannel(v, row) {
-      const old = row.noticeStatus;
-      this.updateRowStatus(row, "noticeStatus", this.toOpenClose(v));
-      const res = await API_Setting.updateMessageStatus(row.id, this.toOpenClose(v));
-      if (!(res && res.success)) {
-        this.updateRowStatus(row, "noticeStatus", old);
-        ElMessage.error((res && res.message) || "站内信开关更新失败");
-      } else {
-        ElMessage.success("站内信开关更新成功");
-      }
-    },
-    async toggleOaChannel(v, row) {
-      if (!row.oaId) return;
-      const old = row.oaStatus;
-      this.updateRowStatus(row, "oaStatus", this.toOpenClose(v));
-      const params = { id: row.oaId, enable: v };
-      try {
-        const res = await API_Setting.editWechatMessageTemplate(row.oaId, params);
-        if (!(res && res.success)) {
-          this.updateRowStatus(row, "oaStatus", old);
-          ElMessage.error((res && res.message) || "服务号开关更新失败");
-        } else {
-          ElMessage.success("服务号开关更新成功");
-        }
-      } catch (e) {
-        this.updateRowStatus(row, "oaStatus", old);
-        ElMessage.error((e && e.message) || "服务号开关更新失败");
-      }
-    },
-    async toggleMpChannel(v, row) {
-      if (!row.mpId) return;
-      const old = row.mpStatus;
-      this.updateRowStatus(row, "mpStatus", this.toOpenClose(v));
-      const params = { id: row.mpId, enable: v };
-      const res = await API_Setting.editWechatMPMessageTemplate(row.mpId, params);
-      if (!(res && res.success)) {
-        this.updateRowStatus(row, "mpStatus", old);
-        ElMessage.error((res && res.message) || "小程序开关更新失败");
-      } else {
-        ElMessage.success("小程序开关更新成功");
-      }
-    },
-    async toggleEmailChannel(v, row) {
-      const old = row.emailStatus || "CLOSE";
-      this.updateRowStatus(row, "emailStatus", this.toOpenClose(v));
-      const res = await API_Setting.updateNoticeMessageEmailStatus(row.id, this.toOpenClose(v));
-      if (!(res && res.success)) {
-        this.updateRowStatus(row, "emailStatus", old);
-        ElMessage.error((res && res.message) || "邮箱开关更新失败");
-      } else {
-        ElMessage.success("邮箱开关更新成功");
-      }
-    },
-  },
-  mounted() {
-    this.loadMemberPage();
-  },
-};
+defineOptions({ name: "messageTemplate" });
+
+const loading = ref(false);
+const activeTab = ref("member");
+const syncOaLoading = ref(false);
+const syncMpLoading = ref(false);
+const total = ref(0);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const memberRows = ref([]);
+const currentRow = ref({});
+const noticeDetailText = ref("");
+const noticeModalVisible = ref(false);
+const oaModalVisible = ref(false);
+const mpModalVisible = ref(false);
+const emailModalVisible = ref(false);
+const emailDetailText = ref("");
+
+function isOpen(status) {
+  return String(status || "").toUpperCase() === "OPEN";
+}
+function wechatEnableToOpenClose(enable) {
+  if (enable === true || enable === "true" || enable === 1) return "OPEN";
+  return "CLOSE";
+}
+function toOpenClose(flag) {
+  return flag ? "OPEN" : "CLOSE";
+}
+function safeText(v) {
+  return v === undefined || v === null ? "" : String(v);
+}
+function pickByKeys(obj, keys) {
+  for (let i = 0; i < keys.length; i++) {
+    const val = obj ? obj[keys[i]] : "";
+    if (val !== undefined && val !== null && val !== "") return val;
+  }
+  return "";
+}
+function formatOaContent(item) {
+  if (!item) return "";
+  const first = pickByKeys(item, ["first", "title", "name"]);
+  const remark = pickByKeys(item, ["remark", "content"]);
+  const keywords = Array.isArray(item.keywords)
+    ? item.keywords.map((k) => pickByKeys(k, ["name", "value", "label"])).filter(Boolean).join(" / ")
+    : safeText(item.keywordsText || "");
+  return [first, keywords, remark].filter(Boolean).join("\n");
+}
+function formatMpContent(item) {
+  if (!item) return "";
+  const keywordsText = safeText(item.keywordsText);
+  if (keywordsText) return keywordsText;
+  if (Array.isArray(item.keywords)) {
+    return item.keywords.map((k) => pickByKeys(k, ["name", "value", "label"])).filter(Boolean).join(" / ");
+  }
+  return safeText(item.content);
+}
+async function loadMemberPage() {
+  loading.value = true;
+  try {
+    const res = await API_Setting.getMessageTemplateAggregatePage(searchForm.value);
+    if (!(res && res.success && res.result)) {
+      memberRows.value = [];
+      total.value = 0;
+      ElMessage.error((res && res.message) || "加载消息模板失败");
+      return;
+    }
+    const records = res.result.records || [];
+    total.value = res.result.total || 0;
+    memberRows.value = records.map((agg, idx) => {
+      const item = { ...(agg.notice || {}) };
+      const oa = agg.wechatOa;
+      const mp = agg.wechatMp;
+      return {
+        ...item,
+        emailStatus: item.emailStatus || "CLOSE",
+        emailContent: item.emailContent || "",
+        index: (searchForm.value.pageNumber - 1) * searchForm.value.pageSize + idx + 1,
+        oaId: oa ? oa.id : "",
+        oaName: oa ? pickByKeys(oa, ["name", "templateName", "title"]) : "",
+        oaCode: oa ? pickByKeys(oa, ["code", "templateId"]) : "",
+        oaStatus: oa ? wechatEnableToOpenClose(oa.enable) : "",
+        oaRaw: oa || null,
+        oaContent: formatOaContent(oa),
+        mpId: mp ? mp.id : "",
+        mpName: mp ? pickByKeys(mp, ["name", "templateName", "title"]) : "",
+        mpTemplateId: mp ? pickByKeys(mp, ["templateId"]) : "",
+        mpCode: mp ? pickByKeys(mp, ["code"]) : "",
+        mpStatus: mp ? wechatEnableToOpenClose(mp.enable) : "",
+        mpRaw: mp || null,
+        mpContent: formatMpContent(mp),
+      };
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+function reloadCurrent() {
+  if (activeTab.value === "member") loadMemberPage();
+}
+async function syncOaTemplates() {
+  syncOaLoading.value = true;
+  try {
+    const res = await API_Setting.wechatMessageSync();
+    if (res && res.success) {
+      await loadMemberPage();
+      ElMessage.success("服务号模板同步成功");
+    } else {
+      ElMessage.error((res && res.message) || "服务号模板同步失败");
+    }
+  } finally {
+    syncOaLoading.value = false;
+  }
+}
+async function syncMpTemplates() {
+  syncMpLoading.value = true;
+  try {
+    const res = await API_Setting.wechatMPMessageSync();
+    if (res && res.success) {
+      await loadMemberPage();
+      ElMessage.success("小程序模板同步成功");
+    } else {
+      ElMessage.error((res && res.message) || "小程序模板同步失败");
+    }
+  } finally {
+    syncMpLoading.value = false;
+  }
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  loadMemberPage();
+}
+async function openNoticeModal(row) {
+  currentRow.value = { ...row };
+  noticeDetailText.value = row.noticeContent || "";
+  noticeModalVisible.value = true;
+  const res = await API_Setting.getNoticeMessageDetail(row.id);
+  if (res && res.success && res.result) {
+    const d = res.result;
+    noticeDetailText.value = [d.noticeTitle, d.noticeContent].filter(Boolean).join("\n");
+  }
+}
+function openOaModal(row) {
+  currentRow.value = { ...row };
+  oaModalVisible.value = true;
+}
+function openMpModal(row) {
+  currentRow.value = { ...row };
+  mpModalVisible.value = true;
+}
+async function openEmailModal(row) {
+  currentRow.value = { ...row };
+  const fallback = row.emailContent || row.noticeContent || "";
+  emailDetailText.value = row.noticeTitle ? [row.noticeTitle, fallback].filter(Boolean).join("\n") : fallback;
+  emailModalVisible.value = true;
+  const res = await API_Setting.getNoticeMessageDetail(row.id);
+  if (res && res.success && res.result) {
+    const d = res.result;
+    if (d.emailContent) {
+      emailDetailText.value = d.emailContent;
+    } else {
+      emailDetailText.value = [d.noticeTitle, d.noticeContent].filter(Boolean).join("\n");
+    }
+  }
+}
+function updateRowStatus(row, key, val) {
+  const idx = memberRows.value.findIndex((x) => x.id === row.id);
+  if (idx >= 0) memberRows.value[idx][key] = val;
+  if (currentRow.value && currentRow.value.id === row.id) currentRow.value[key] = val;
+}
+async function toggleNoticeChannel(v, row) {
+  const old = row.noticeStatus;
+  updateRowStatus(row, "noticeStatus", toOpenClose(v));
+  const res = await API_Setting.updateMessageStatus(row.id, toOpenClose(v));
+  if (!(res && res.success)) {
+    updateRowStatus(row, "noticeStatus", old);
+    ElMessage.error((res && res.message) || "站内信开关更新失败");
+  } else {
+    ElMessage.success("站内信开关更新成功");
+  }
+}
+async function toggleOaChannel(v, row) {
+  if (!row.oaId) return;
+  const old = row.oaStatus;
+  updateRowStatus(row, "oaStatus", toOpenClose(v));
+  const params = { id: row.oaId, enable: v };
+  try {
+    const res = await API_Setting.editWechatMessageTemplate(row.oaId, params);
+    if (!(res && res.success)) {
+      updateRowStatus(row, "oaStatus", old);
+      ElMessage.error((res && res.message) || "服务号开关更新失败");
+    } else {
+      ElMessage.success("服务号开关更新成功");
+    }
+  } catch (e) {
+    updateRowStatus(row, "oaStatus", old);
+    ElMessage.error((e && e.message) || "服务号开关更新失败");
+  }
+}
+async function toggleMpChannel(v, row) {
+  if (!row.mpId) return;
+  const old = row.mpStatus;
+  updateRowStatus(row, "mpStatus", toOpenClose(v));
+  const params = { id: row.mpId, enable: v };
+  const res = await API_Setting.editWechatMPMessageTemplate(row.mpId, params);
+  if (!(res && res.success)) {
+    updateRowStatus(row, "mpStatus", old);
+    ElMessage.error((res && res.message) || "小程序开关更新失败");
+  } else {
+    ElMessage.success("小程序开关更新成功");
+  }
+}
+async function toggleEmailChannel(v, row) {
+  const old = row.emailStatus || "CLOSE";
+  updateRowStatus(row, "emailStatus", toOpenClose(v));
+  const res = await API_Setting.updateNoticeMessageEmailStatus(row.id, toOpenClose(v));
+  if (!(res && res.success)) {
+    updateRowStatus(row, "emailStatus", old);
+    ElMessage.error((res && res.message) || "邮箱开关更新失败");
+  } else {
+    ElMessage.success("邮箱开关更新成功");
+  }
+}
+
+onMounted(() => {
+  loadMemberPage();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/message/noticeMessageTemplate.vue b/manager/src/views/sys/message/noticeMessageTemplate.vue
index ab13e678e..4321517db 100644
--- a/manager/src/views/sys/message/noticeMessageTemplate.vue
+++ b/manager/src/views/sys/message/noticeMessageTemplate.vue
@@ -5,7 +5,7 @@
         <el-card>
           <el-tabs v-model="activeTab" @tab-change="paneChange">
             <el-tab-pane label="站内信列表" name="MESSAGE">
-              <el-form ref="searchForm" :model="searchMessageForm" inline label-width="70px" class="search-form">
+              <el-form ref="searchFormRef" :model="searchMessageForm" inline label-width="70px" class="search-form">
                 <el-form-item label="消息标题" prop="title">
                   <el-input
                     v-model="searchMessageForm.title"
@@ -135,7 +135,7 @@
           </div>
         </div>
         <div class="send-form">
-          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
             <el-form-item label="通知节点" prop="noticeNode">
               <el-input v-model="form.noticeNode" clearable maxlength="20" disabled style="width: 90%" />
             </el-form-item>
@@ -169,7 +169,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="messageSendForm" :model="messageSendForm" label-width="100px" :rules="messageFormValidate">
+      <el-form ref="messageSendFormRef" :model="messageSendForm" label-width="100px" :rules="messageFormValidate">
         <el-form-item label="消息标题" prop="title">
           <el-input v-model="messageSendForm.title" maxlength="15" clearable style="width: 70%" />
         </el-form-item>
@@ -353,7 +353,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import * as API_Setting from "@/api/setting.js";
 import * as API_Other from "@/api/other.js";
@@ -361,364 +362,361 @@ import * as API_Shop from "@/api/shops.js";
 import userList from "@/views/member/list/index";
 import { regular } from "@/utils";
 
-export default {
-  name: "noticeMessageTemplate",
-  components: {
-    userList,
-  },
-  data() {
-    return {
-      activeTab: "MESSAGE",
-      checkUserList: false,
-      memberSelectSnapshot: [],
-      selectedMember: [],
-      loading: true,
-      modalVisible: false,
-      modalTitle: "",
-      messageModalVisible: false,
-      messageModalTitle: "",
-      messageDetailModalVisible: false,
-      shopShow: false,
-      memberShow: false,
-      shopList: [],
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      messageFormValidate: {
-        title: [regular.REQUIRED, regular.VARCHAR20],
-        content: [regular.REQUIRED, regular.VARCHAR255],
-      },
-      searchMessageForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      searchShopMessageForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      searchMemberMessageForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      form: {
-        noticeNode: "",
-        noticeTitle: "",
-      },
-      messageSendForm: {
-        messageRange: "ALL",
-        messageClient: "member",
-        userIds: [],
-        userNames: [],
-      },
-      formValidate: {
-        noticeNode: [{ required: true, message: "请输入通知节点", trigger: "blur" }],
-        noticeTitle: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
-        noticeContent: [{ required: true, message: "请输通知内容", trigger: "blur" }],
-      },
-      submitLoading: false,
-      noticeData: [],
-      noticeDataTotal: 0,
-      messageData: [],
-      messageDataTotal: 0,
-      shopMessageData: [],
-      shopMessageDataTotal: 0,
-      memberMessageData: [],
-      memberMessageDataTotal: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getMessage();
-    },
-    callbackSelectUser(val) {
-      let findUser = this.selectedMember.find((item) => item.id === val.id);
-      if (!findUser) {
-        this.selectedMember.push(val);
-      } else {
-        this.selectedMember.map((item, index) => {
-          if (item.id === findUser.id) {
-            this.selectedMember.splice(index, 1);
-          }
-        });
-      }
-      this.reSelectMember();
-    },
-    delUser(index) {
-      this.selectedMember.splice(index, 1);
-      this.reSelectMember();
-    },
-    reSelectMember() {
-      this.form.memberDTOS = this.selectedMember.map((item) => ({
-        nickName: item.nickName,
-        id: item.id,
-      }));
-    },
-    getShopList() {
-      this.loading = true;
-      API_Shop.getShopList().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.shopList = res.result;
-        }
-      });
-      this.loading = false;
-    },
-    addVip() {
-      this.memberSelectSnapshot = JSON.parse(JSON.stringify(this.selectedMember));
-      this.checkUserList = true;
-    },
-    cancelMemberSelect() {
-      this.selectedMember = JSON.parse(JSON.stringify(this.memberSelectSnapshot));
-      this.reSelectMember();
-      this.checkUserList = false;
-    },
-    confirmMemberSelect() {
-      this.reSelectMember();
-      this.checkUserList = false;
-    },
-    paneChange(v) {
-      if (v == "SETTING") {
-        this.getNoticeMessage();
-      }
-      if (v == "MESSAGE") {
-        this.getMessage();
-      }
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getNoticeMessage();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getNoticeMessage();
-    },
-    handleSearch() {
-      this.searchMessageForm.pageNumber = 1;
-      this.getMessage();
-    },
-    messageChangePageSize(v) {
-      this.searchMessageForm.pageSize = v;
-      this.searchMessageForm.pageNumber = 1;
-      this.getMessage();
-    },
-    messageChangePage(v) {
-      this.searchMessageForm.pageNumber = v;
-      this.getMessage();
-    },
-    memberMessageChangePageSize(v) {
-      this.searchMemberMessageForm.pageSize = v;
-      this.searchMemberMessageForm.pageNumber = 1;
-      this.messageDetail();
-    },
-    memberMessageChangePage(v) {
-      this.searchMemberMessageForm.pageNumber = v;
-      this.messageDetail();
-    },
-    memberMessageChangeSort(e) {
-      this.searchMemberMessageForm.sort = e.prop;
-      this.searchMemberMessageForm.order =
-        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      this.messageDetail();
-    },
-    shopMessageChangePageSize(v) {
-      this.searchShopMessageForm.pageSize = v;
-      this.messageDetail();
-    },
-    shopMessageChangePage(v) {
-      this.searchShopMessageForm.pageNumber = v;
-      this.messageDetail();
-    },
-    shopMessageChangeSort(e) {
-      this.searchShopMessageForm.sort = e.prop;
-      this.searchShopMessageForm.order =
-        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      this.messageDetail();
-    },
-    onShopIdsChange(ids) {
-      this.messageSendForm.userIds = ids || [];
-      this.messageSendForm.userNames = (ids || []).map((id) => {
-        const shop = this.shopList.find((s) => s.id === id);
-        return shop ? shop.storeName : "";
-      });
-    },
-    removeMessage(id) {
-      ElMessageBox.confirm("您确认删除此站内信 ?", "确认删除", { type: "warning" }).then(() => {
-          API_Setting.deleteMessage(id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-            }
-            this.getMessage();
-          });
-      }).catch(() => {});
-    },
-    sendMessage() {
-      this.messageModalVisible = true;
-      this.messageModalTitle = "发送站内信";
-      this.shopShow = false;
-      this.memberShow = false;
-      this.selectedMember = [];
-      this.messageSendForm = {
-        messageRange: "ALL",
-        messageClient: "member",
-        content: "",
-        title: "",
-        userIds: [],
-        userNames: [],
-      };
-    },
-    sendMessageSubmit() {
-      let userIds = [];
-      let userNames = [];
-      if (this.messageSendForm.messageClient == "member" && this.messageSendForm.messageRange == "MEMBER") {
-        this.selectedMember.forEach(function (item) {
-          userIds.push(item.id);
-          userNames.push(item.username);
-        });
-        this.messageSendForm.userIds = userIds;
-        this.messageSendForm.userNames = userNames;
-      }
+defineOptions({ name: "noticeMessageTemplate" });
 
-      if (this.messageSendForm.userIds.length <= 0 && this.messageSendForm.messageRange == "APPOINT") {
-        ElMessage.error("请选择发送对象");
-        return;
-      }
-      this.$refs["messageSendForm"].validate((valid) => {
-        if (valid) {
-          API_Other.sendMessage(this.messageSendForm).then((res) => {
-            this.loading = false;
-            if (res.success) {
-              ElMessage.success("发送成功");
-              this.messageModalVisible = false;
-              this.getMessage();
-            }
-          });
-          this.loading = false;
-        }
-      });
-    },
-    selectObject() {
-      this.messageSendForm.messageRange = "ALL";
-      this.shopShow = false;
-      this.memberShow = false;
-    },
-    selectShop(v) {
-      if (v == "APPOINT") {
-        this.getShopList();
-        this.shopShow = true;
-        this.memberShow = false;
-      }
-      if (v == "ALL") {
-        this.shopShow = false;
-        this.memberShow = false;
-      }
-      if (v == "MEMBER") {
-        this.shopShow = false;
-        this.memberShow = true;
-        this.selectedMember = [];
-      }
-    },
-    getMessage() {
-      this.loading = true;
-      API_Other.getMessagePage(this.searchMessageForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.messageData = res.result.records;
-          this.messageDataTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    getNoticeMessage() {
-      this.loading = true;
-      API_Setting.getNoticeMessageData(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.noticeData = res.result.records;
-          this.noticeDataTotal = res.result.total;
-        }
-      });
-      this.loading = false;
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          let params = {
-            noticeContent: this.form.noticeContent,
-            noticeTitle: this.form.noticeTitle,
-          };
-          API_Setting.editNoticeMessage(this.form.id, params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("修改成功");
-              this.modalVisible = false;
-              this.getNoticeMessage();
-            }
-          });
-        }
-      });
-    },
-    messageDetail() {
-      if (this.messageSendForm.messageClient == "member") {
-        API_Other.getMemberMessage(this.searchMemberMessageForm).then((res) => {
-          if (res.success) {
-            this.memberMessageData = res.result.records;
-            this.memberMessageDataTotal = res.result.total;
-          }
-        });
-      } else {
-        API_Other.getShopMessage(this.searchShopMessageForm).then((res) => {
-          if (res.success) {
-            this.shopMessageData = res.result.records;
-            this.shopMessageDataTotal = res.result.total;
-          }
-        });
-      }
-    },
-    detail(v) {
-      this.messageSendForm = v;
-      if (this.messageSendForm.messageClient == "member") {
-        this.searchMemberMessageForm.messageId = v.id;
-      } else {
-        this.searchShopMessageForm.messageId = v.id;
-      }
-      this.messageDetail();
-      this.messageDetailModalVisible = true;
-      this.modalTitle = "消息详情";
-    },
-    edit(v) {
-      API_Setting.getNoticeMessageDetail(v.id).then((res) => {
-        if (res.success) {
-          this.modalTitle = "编辑通知类推送";
-          this.modalVisible = true;
-          this.form = res.result;
-        }
-      });
-    },
-    disable(v) {
-      API_Setting.updateMessageStatus(v.id, "CLOSE").then((res) => {
-        if (res.success) {
-          ElMessage.success("禁用成功");
-          this.getNoticeMessage();
-        }
-      });
-    },
-    enable(v) {
-      API_Setting.updateMessageStatus(v.id, "OPEN").then((res) => {
-        if (res.success) {
-          ElMessage.success("启用成功");
-          this.getNoticeMessage();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
+const activeTab = ref("MESSAGE");
+const checkUserList = ref(false);
+const memberSelectSnapshot = ref([]);
+const selectedMember = ref([]);
+const loading = ref(true);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const messageModalVisible = ref(false);
+const messageModalTitle = ref("");
+const messageDetailModalVisible = ref(false);
+const shopShow = ref(false);
+const memberShow = ref(false);
+const shopList = ref([]);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const messageFormValidate = {
+  title: [regular.REQUIRED, regular.VARCHAR20],
+  content: [regular.REQUIRED, regular.VARCHAR255],
 };
+const searchMessageForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const searchShopMessageForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const searchMemberMessageForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const form = ref({
+  noticeNode: "",
+  noticeTitle: "",
+});
+const messageSendForm = ref({
+  messageRange: "ALL",
+  messageClient: "member",
+  userIds: [],
+  userNames: [],
+});
+const formValidate = {
+  noticeNode: [{ required: true, message: "请输入通知节点", trigger: "blur" }],
+  noticeTitle: [{ required: true, message: "请输入通知标题", trigger: "blur" }],
+  noticeContent: [{ required: true, message: "请输通知内容", trigger: "blur" }],
+};
+const submitLoading = ref(false);
+const noticeData = ref([]);
+const noticeDataTotal = ref(0);
+const messageData = ref([]);
+const messageDataTotal = ref(0);
+const shopMessageData = ref([]);
+const shopMessageDataTotal = ref(0);
+const memberMessageData = ref([]);
+const memberMessageDataTotal = ref(0);
+
+// 模板 ref 与 data 重名（searchForm/form/messageSendForm），改名避免互相覆盖
+const searchFormRef = ref(null);
+const formRef = ref(null);
+const messageSendFormRef = ref(null);
+
+function init() {
+  getMessage();
+}
+function callbackSelectUser(val) {
+  let findUser = selectedMember.value.find((item) => item.id === val.id);
+  if (!findUser) {
+    selectedMember.value.push(val);
+  } else {
+    selectedMember.value.map((item, index) => {
+      if (item.id === findUser.id) {
+        selectedMember.value.splice(index, 1);
+      }
+    });
+  }
+  reSelectMember();
+}
+function delUser(index) {
+  selectedMember.value.splice(index, 1);
+  reSelectMember();
+}
+function reSelectMember() {
+  form.value.memberDTOS = selectedMember.value.map((item) => ({
+    nickName: item.nickName,
+    id: item.id,
+  }));
+}
+function getShopList() {
+  loading.value = true;
+  API_Shop.getShopList().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      shopList.value = res.result;
+    }
+  });
+  loading.value = false;
+}
+function addVip() {
+  memberSelectSnapshot.value = JSON.parse(JSON.stringify(selectedMember.value));
+  checkUserList.value = true;
+}
+function cancelMemberSelect() {
+  selectedMember.value = JSON.parse(JSON.stringify(memberSelectSnapshot.value));
+  reSelectMember();
+  checkUserList.value = false;
+}
+function confirmMemberSelect() {
+  reSelectMember();
+  checkUserList.value = false;
+}
+function paneChange(v) {
+  if (v == "SETTING") {
+    getNoticeMessage();
+  }
+  if (v == "MESSAGE") {
+    getMessage();
+  }
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getNoticeMessage();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getNoticeMessage();
+}
+function handleSearch() {
+  searchMessageForm.pageNumber = 1;
+  getMessage();
+}
+function messageChangePageSize(v) {
+  searchMessageForm.pageSize = v;
+  searchMessageForm.pageNumber = 1;
+  getMessage();
+}
+function messageChangePage(v) {
+  searchMessageForm.pageNumber = v;
+  getMessage();
+}
+function memberMessageChangePageSize(v) {
+  searchMemberMessageForm.pageSize = v;
+  searchMemberMessageForm.pageNumber = 1;
+  messageDetail();
+}
+function memberMessageChangePage(v) {
+  searchMemberMessageForm.pageNumber = v;
+  messageDetail();
+}
+function memberMessageChangeSort(e) {
+  searchMemberMessageForm.sort = e.prop;
+  searchMemberMessageForm.order =
+    e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  messageDetail();
+}
+function shopMessageChangePageSize(v) {
+  searchShopMessageForm.pageSize = v;
+  messageDetail();
+}
+function shopMessageChangePage(v) {
+  searchShopMessageForm.pageNumber = v;
+  messageDetail();
+}
+function shopMessageChangeSort(e) {
+  searchShopMessageForm.sort = e.prop;
+  searchShopMessageForm.order =
+    e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  messageDetail();
+}
+function onShopIdsChange(ids) {
+  messageSendForm.value.userIds = ids || [];
+  messageSendForm.value.userNames = (ids || []).map((id) => {
+    const shop = shopList.value.find((s) => s.id === id);
+    return shop ? shop.storeName : "";
+  });
+}
+function removeMessage(id) {
+  ElMessageBox.confirm("您确认删除此站内信 ?", "确认删除", { type: "warning" }).then(() => {
+      API_Setting.deleteMessage(id).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+        }
+        getMessage();
+      });
+  }).catch(() => {});
+}
+function sendMessage() {
+  messageModalVisible.value = true;
+  messageModalTitle.value = "发送站内信";
+  shopShow.value = false;
+  memberShow.value = false;
+  selectedMember.value = [];
+  messageSendForm.value = {
+    messageRange: "ALL",
+    messageClient: "member",
+    content: "",
+    title: "",
+    userIds: [],
+    userNames: [],
+  };
+}
+function sendMessageSubmit() {
+  let userIds = [];
+  let userNames = [];
+  if (messageSendForm.value.messageClient == "member" && messageSendForm.value.messageRange == "MEMBER") {
+    selectedMember.value.forEach(function (item) {
+      userIds.push(item.id);
+      userNames.push(item.username);
+    });
+    messageSendForm.value.userIds = userIds;
+    messageSendForm.value.userNames = userNames;
+  }
+
+  if (messageSendForm.value.userIds.length <= 0 && messageSendForm.value.messageRange == "APPOINT") {
+    ElMessage.error("请选择发送对象");
+    return;
+  }
+  messageSendFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Other.sendMessage(messageSendForm.value).then((res) => {
+        loading.value = false;
+        if (res.success) {
+          ElMessage.success("发送成功");
+          messageModalVisible.value = false;
+          getMessage();
+        }
+      });
+      loading.value = false;
+    }
+  });
+}
+function selectObject() {
+  messageSendForm.value.messageRange = "ALL";
+  shopShow.value = false;
+  memberShow.value = false;
+}
+function selectShop(v) {
+  if (v == "APPOINT") {
+    getShopList();
+    shopShow.value = true;
+    memberShow.value = false;
+  }
+  if (v == "ALL") {
+    shopShow.value = false;
+    memberShow.value = false;
+  }
+  if (v == "MEMBER") {
+    shopShow.value = false;
+    memberShow.value = true;
+    selectedMember.value = [];
+  }
+}
+function getMessage() {
+  loading.value = true;
+  API_Other.getMessagePage(searchMessageForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      messageData.value = res.result.records;
+      messageDataTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function getNoticeMessage() {
+  loading.value = true;
+  API_Setting.getNoticeMessageData(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      noticeData.value = res.result.records;
+      noticeDataTotal.value = res.result.total;
+    }
+  });
+  loading.value = false;
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      let params = {
+        noticeContent: form.value.noticeContent,
+        noticeTitle: form.value.noticeTitle,
+      };
+      API_Setting.editNoticeMessage(form.value.id, params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("修改成功");
+          modalVisible.value = false;
+          getNoticeMessage();
+        }
+      });
+    }
+  });
+}
+function messageDetail() {
+  if (messageSendForm.value.messageClient == "member") {
+    API_Other.getMemberMessage(searchMemberMessageForm).then((res) => {
+      if (res.success) {
+        memberMessageData.value = res.result.records;
+        memberMessageDataTotal.value = res.result.total;
+      }
+    });
+  } else {
+    API_Other.getShopMessage(searchShopMessageForm).then((res) => {
+      if (res.success) {
+        shopMessageData.value = res.result.records;
+        shopMessageDataTotal.value = res.result.total;
+      }
+    });
+  }
+}
+function detail(v) {
+  messageSendForm.value = v;
+  if (messageSendForm.value.messageClient == "member") {
+    searchMemberMessageForm.messageId = v.id;
+  } else {
+    searchShopMessageForm.messageId = v.id;
+  }
+  messageDetail();
+  messageDetailModalVisible.value = true;
+  modalTitle.value = "消息详情";
+}
+function edit(v) {
+  API_Setting.getNoticeMessageDetail(v.id).then((res) => {
+    if (res.success) {
+      modalTitle.value = "编辑通知类推送";
+      modalVisible.value = true;
+      form.value = res.result;
+    }
+  });
+}
+function disable(v) {
+  API_Setting.updateMessageStatus(v.id, "CLOSE").then((res) => {
+    if (res.success) {
+      ElMessage.success("禁用成功");
+      getNoticeMessage();
+    }
+  });
+}
+function enable(v) {
+  API_Setting.updateMessageStatus(v.id, "OPEN").then((res) => {
+    if (res.success) {
+      ElMessage.success("启用成功");
+      getNoticeMessage();
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss">
diff --git a/manager/src/views/sys/message/sms.vue b/manager/src/views/sys/message/sms.vue
index 98002393b..a22230d2e 100644
--- a/manager/src/views/sys/message/sms.vue
+++ b/manager/src/views/sys/message/sms.vue
@@ -150,7 +150,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="templateForm" :model="templateForm" label-width="100px" :rules="templateFormValidate">
+      <el-form ref="templateFormRef" :model="templateForm" label-width="100px" :rules="templateFormValidate">
         <el-form-item label="模板名称" prop="templateName">
           <el-input v-model="templateForm.templateName" maxlength="30" clearable placeholder="请输入模板名称，不超过30字符" />
         </el-form-item>
@@ -192,7 +192,7 @@
         <div class="left-show" v-html="smsContent"></div>
         <div class="sms">效果预览</div>
         <div class="send-form">
-          <el-form ref="smsForm" :model="smsForm" label-width="100px" :rules="smsFormValidate">
+          <el-form ref="smsFormRef" :model="smsForm" label-width="100px" :rules="smsFormValidate">
             <el-form-item label="短信签名" prop="signName">
               <el-select v-model="smsForm.signName" style="width: 35%" @change="selectSmsSign">
                 <el-option
@@ -286,389 +286,391 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import * as API_Setting from "@/api/setting.js";
 import * as API_Member from "@/api/member.js";
 
-export default {
-  name: "sms",
-  data() {
-    return {
-      activeTab: "LIST",
-      loading: false,
-      customSms: false,
-      alreadyCheck: [],
-      alreadyCheckShow: [],
-      memberPage: 0,
-      members: [],
-      smsTemplateContent: "",
-      memberNum: 0,
-      smsContent: "<div class='sms'>效果预览</div>",
-      smsTemplates: [],
-      smsSigns: [],
-      sendSmsModal: false,
-      sendSmsModalTitle: "短信发送",
-      modalType: 0,
-      templateModalVisible: false,
-      templateModalTitle: "",
-      templateForm: {},
-      submitLoading: false,
-      signSearchForm: { pageNumber: 1, pageSize: 20 },
-      templateSearchForm: { pageNumber: 1, pageSize: 20 },
-      memberSearchFrom: { disabled: "OPEN" },
-      memberSearchParam: {
-        pageNumber: 1,
-        pageSize: 8,
-        disabled: "OPEN",
-      },
-      smsSearchForm: {
-        sort: "createTime",
-        order: "desc",
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      smsForm: {
-        smsName: "",
-        signName: "",
-        context: "",
-        smsRange: "1",
-        num: 0,
-        messageCode: "",
-      },
-      smsFormValidate: {
-        signName: [{ required: true, message: "请选择短信签名", trigger: "change" }],
-        messageCode: [{ required: true, message: "请选择短信模板", trigger: "change" }],
-      },
-      templateFormValidate: {
-        templateName: [{ required: true, message: "请输入短信模板名称", trigger: "blur" }],
-        templateContent: [{ required: true, message: "请输入短信模板内容", trigger: "blur" }],
-        remark: [{ required: true, message: "请输入短信模板申请说明", trigger: "blur" }],
-      },
-      smsData: [],
-      smsTotal: 0,
-      templateData: [],
-      templateTotal: 0,
-      signData: [],
-      signTotal: 0,
-      memberLoadingMore: false,
-    };
-  },
-  methods: {
-    templateStatusText(status) {
-      const map = { 0: "审核中", 1: "审核通过", 2: "审核失败" };
-      return map[status] ?? map[String(status)] ?? "-";
-    },
-    init() {
-      this.getSms();
-      this.getMemberNum();
-    },
-    getMemberNum() {
-      API_Member.getMemberNum(this.memberSearchFrom).then((res) => {
+defineOptions({ name: "sms" });
+
+const router = useRouter();
+
+const activeTab = ref("LIST");
+const loading = ref(false);
+const customSms = ref(false);
+const alreadyCheck = ref([]);
+const alreadyCheckShow = ref([]);
+const memberPage = ref(0);
+const members = ref([]);
+const smsTemplateContent = ref("");
+const memberNum = ref(0);
+const smsContent = ref("<div class='sms'>效果预览</div>");
+const smsTemplates = ref([]);
+const smsSigns = ref([]);
+const sendSmsModal = ref(false);
+const sendSmsModalTitle = ref("短信发送");
+const modalType = ref(0);
+const templateModalVisible = ref(false);
+const templateModalTitle = ref("");
+const templateForm = ref({});
+const submitLoading = ref(false);
+const signSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
+const templateSearchForm = reactive({ pageNumber: 1, pageSize: 20 });
+const memberSearchFrom = reactive({ disabled: "OPEN" });
+const memberSearchParam = reactive({
+  pageNumber: 1,
+  pageSize: 8,
+  disabled: "OPEN",
+});
+const smsSearchForm = reactive({
+  sort: "createTime",
+  order: "desc",
+  pageNumber: 1,
+  pageSize: 20,
+});
+const smsForm = ref({
+  smsName: "",
+  signName: "",
+  context: "",
+  smsRange: "1",
+  num: 0,
+  messageCode: "",
+});
+const smsFormValidate = reactive({
+  signName: [{ required: true, message: "请选择短信签名", trigger: "change" }],
+  messageCode: [{ required: true, message: "请选择短信模板", trigger: "change" }],
+});
+const templateFormValidate = reactive({
+  templateName: [{ required: true, message: "请输入短信模板名称", trigger: "blur" }],
+  templateContent: [{ required: true, message: "请输入短信模板内容", trigger: "blur" }],
+  remark: [{ required: true, message: "请输入短信模板申请说明", trigger: "blur" }],
+});
+const smsData = ref([]);
+const smsTotal = ref(0);
+const templateData = ref([]);
+const templateTotal = ref(0);
+const signData = ref([]);
+const signTotal = ref(0);
+const memberLoadingMore = ref(false);
+
+const smsFormRef = ref(null);
+const templateFormRef = ref(null);
+
+function templateStatusText(status) {
+  const map = { 0: "审核中", 1: "审核通过", 2: "审核失败" };
+  return map[status] ?? map[String(status)] ?? "-";
+}
+function init() {
+  getSms();
+  getMemberNum();
+}
+function getMemberNum() {
+  API_Member.getMemberNum(memberSearchFrom).then((res) => {
+    if (res.success) {
+      memberNum.value = res.result;
+      smsForm.value.num = memberNum.value;
+    }
+  });
+}
+function alreadyCheckClose(val, index) {
+  alreadyCheck.value.splice(index, 1);
+  alreadyCheckShow.value.splice(index, 1);
+  members.value.forEach((item) => {
+    if (item.____selected && item.mobile == val.mobile) {
+      item.____selected = false;
+    }
+  });
+  smsForm.value.num--;
+  memberNum.value--;
+}
+function detail() {}
+function smsRangeChange(v) {
+  memberNum.value = 0;
+  smsForm.value.num = 0;
+  if (v == 1) {
+    alreadyCheck.value = [];
+    alreadyCheckShow.value = [];
+    customSms.value = false;
+    getMemberNum();
+  }
+  if (v == 2) {
+    customSms.value = true;
+    members.value = [];
+    memberSearchParam.pageNumber = 1;
+    getMembers();
+  }
+}
+function memberSearch() {
+  memberSearchParam.pageNumber = 1;
+  members.value = [];
+  getMembers();
+}
+function moveMember(index, item) {
+  if (!item.mobile) {
+    ElMessage.error("当前用户暂无手机号绑定");
+    return false;
+  }
+  item.____selected = true;
+  if (alreadyCheck.value.length == 0) {
+    alreadyCheck.value.push(item.mobile);
+    alreadyCheckShow.value.push(item);
+    smsForm.value.num++;
+    memberNum.value++;
+  } else {
+    const result = alreadyCheck.value.indexOf(item.mobile);
+    if (result < 0) {
+      smsForm.value.num++;
+      memberNum.value++;
+      alreadyCheck.value.push(item.mobile);
+      alreadyCheckShow.value.push(item);
+    }
+  }
+}
+function onMemberScroll({ scrollTop }) {
+  const wrap = document.querySelector(".member-scroll .el-scrollbar__wrap");
+  if (!wrap || memberLoadingMore.value) return;
+  const nearBottom = scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
+  if (nearBottom && memberPage.value != memberSearchParam.pageNumber) {
+    memberLoadingMore.value = true;
+    memberSearchParam.pageNumber++;
+    getMembers(true);
+  }
+}
+function getMembers(append = false) {
+  API_Member.getMemberListData(memberSearchParam).then((res) => {
+    memberLoadingMore.value = false;
+    if (res.success) {
+      res.result.records.forEach((item) => {
+        item.____selected = false;
+        members.value.push(item);
+      });
+      memberPage.value = res.result.pages;
+    }
+  });
+}
+function sendBatchSmsModal() {
+  templateSearchForm.templateStatus = 1;
+  API_Setting.getSmsTemplatePage(templateSearchForm).then((res) => {
+    if (res.success) {
+      smsTemplates.value = res.result.records;
+    }
+  });
+  signSearchForm.signStatus = 1;
+  API_Setting.getSmsSignPage(signSearchForm).then((res) => {
+    if (res.success) {
+      smsSigns.value = res.result.records;
+    }
+  });
+  smsContent.value = "<div class='sms'>效果预览</div>";
+  alreadyCheck.value = [];
+  alreadyCheckShow.value = [];
+  smsTemplateContent.value = "效果预览";
+  smsForm.value = {
+    smsName: "",
+    signName: "",
+    context: "",
+    smsRange: "1",
+    num: 0,
+    messageCode: "",
+  };
+  getMemberNum();
+  sendSmsModal.value = true;
+}
+function paneChange(name) {
+  if (name == "TEMPLATE") {
+    getSmsTemplate();
+  }
+  if (name == "SIGN") {
+    getSmsSign();
+  }
+}
+function selectSmsSign(v) {
+  if (v != undefined) {
+    smsContent.value = "<div class='sms'>【" + v + "】" + " " + smsTemplateContent.value + "</div>";
+  } else {
+    smsContent.value = "<div class='sms'>效果预览" + smsTemplateContent.value + "</div>";
+  }
+}
+function selectSmsTemplate() {
+  smsTemplates.value.forEach((e) => {
+    if (smsForm.value.messageCode == e.templateCode) {
+      smsTemplateContent.value = e.templateContent;
+      smsForm.value.smsName = e.templateName;
+    }
+  });
+  if (smsForm.value.signName) {
+    smsContent.value =
+      "<div class='sms'>【" + smsForm.value.signName + "】" + smsTemplateContent.value + "</div>";
+  } else {
+    smsContent.value = "<div class='sms'>" + smsTemplateContent.value + "</div>";
+  }
+  smsForm.value.context = smsTemplateContent.value;
+}
+function deleteSmsTemplate(v) {
+  ElMessageBox.confirm("您确认要删除此短信模板？", "确认删除", { type: "warning" }).then(() => {
+      API_Setting.deleteSmsTemplatePage({ templateCode: v.templateCode }).then((res) => {
         if (res.success) {
-          this.memberNum = res.result;
-          this.smsForm.num = this.memberNum;
+          ElMessage.success("删除成功");
+          getSmsTemplate();
         }
       });
-    },
-    alreadyCheckClose(val, index) {
-      this.alreadyCheck.splice(index, 1);
-      this.alreadyCheckShow.splice(index, 1);
-      this.members.forEach((item) => {
-        if (item.____selected && item.mobile == val.mobile) {
-          item.____selected = false;
-        }
-      });
-      this.smsForm.num--;
-      this.memberNum--;
-    },
-    detail() {},
-    smsRangeChange(v) {
-      this.memberNum = 0;
-      this.smsForm.num = 0;
-      if (v == 1) {
-        this.alreadyCheck = [];
-        this.alreadyCheckShow = [];
-        this.customSms = false;
-        this.getMemberNum();
+  }).catch(() => {});
+}
+function sendSms() {
+  smsFormRef.value.validate((valid) => {
+    if (!valid) return;
+    smsForm.value.mobile = alreadyCheck.value;
+    API_Setting.sendSms(smsForm.value).then((res) => {
+      if (res.success) {
+        ElMessage.success("发送成功");
+        getSms();
+        sendSmsModal.value = false;
       }
-      if (v == 2) {
-        this.customSms = true;
-        this.members = [];
-        this.memberSearchParam.pageNumber = 1;
-        this.getMembers();
-      }
-    },
-    memberSearch() {
-      this.memberSearchParam.pageNumber = 1;
-      this.members = [];
-      this.getMembers();
-    },
-    moveMember(index, item) {
-      if (!item.mobile) {
-        ElMessage.error("当前用户暂无手机号绑定");
-        return false;
-      }
-      item.____selected = true;
-      if (this.alreadyCheck.length == 0) {
-        this.alreadyCheck.push(item.mobile);
-        this.alreadyCheckShow.push(item);
-        this.smsForm.num++;
-        this.memberNum++;
-      } else {
-        const result = this.alreadyCheck.indexOf(item.mobile);
-        if (result < 0) {
-          this.smsForm.num++;
-          this.memberNum++;
-          this.alreadyCheck.push(item.mobile);
-          this.alreadyCheckShow.push(item);
-        }
-      }
-    },
-    onMemberScroll({ scrollTop }) {
-      const wrap = document.querySelector(".member-scroll .el-scrollbar__wrap");
-      if (!wrap || this.memberLoadingMore) return;
-      const nearBottom = scrollTop + wrap.clientHeight >= wrap.scrollHeight - 20;
-      if (nearBottom && this.memberPage != this.memberSearchParam.pageNumber) {
-        this.memberLoadingMore = true;
-        this.memberSearchParam.pageNumber++;
-        this.getMembers(true);
-      }
-    },
-    getMembers(append = false) {
-      API_Member.getMemberListData(this.memberSearchParam).then((res) => {
-        this.memberLoadingMore = false;
+    });
+  });
+}
+function addSign() {
+  router.push({ name: "add-sms-sign" });
+}
+function addTemplate() {
+  templateModalVisible.value = true;
+  templateModalTitle.value = "添加短信模板";
+  templateForm.value = {};
+  modalType.value = 0;
+}
+function editTemplate(v) {
+  templateModalVisible.value = true;
+  templateModalTitle.value = "修改短信模板";
+  templateForm.value = { ...v };
+  modalType.value = 1;
+}
+function syncSign() {
+  loading.value = true;
+  API_Setting.syncSign().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      ElMessage.success("同步成功");
+      getSmsSign();
+    }
+  });
+}
+function templateSubmit() {
+  templateFormRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    const req =
+      modalType.value == 0
+        ? API_Setting.addSmsTemplatePage(templateForm.value)
+        : API_Setting.editSmsTemplatePage(templateForm.value);
+    req
+      .then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          res.result.records.forEach((item) => {
-            item.____selected = false;
-            this.members.push(item);
-          });
-          this.memberPage = res.result.pages;
+          ElMessage.success(modalType.value == 0 ? "添加成功" : "修改成功");
+          templateModalVisible.value = false;
+          getSmsTemplate();
         }
+      })
+      .catch(() => {
+        submitLoading.value = false;
       });
-    },
-    sendBatchSmsModal() {
-      this.templateSearchForm.templateStatus = 1;
-      API_Setting.getSmsTemplatePage(this.templateSearchForm).then((res) => {
+  });
+}
+function deleteSmsSign(v) {
+  ElMessageBox.confirm("您确认要删除此短信签名？", "确认删除", { type: "warning" }).then(() => {
+      API_Setting.deleteSign(v.id).then((res) => {
         if (res.success) {
-          this.smsTemplates = res.result.records;
+          ElMessage.success("删除成功");
+          getSmsSign();
         }
       });
-      this.signSearchForm.signStatus = 1;
-      API_Setting.getSmsSignPage(this.signSearchForm).then((res) => {
-        if (res.success) {
-          this.smsSigns = res.result.records;
-        }
-      });
-      this.smsContent = "<div class='sms'>效果预览</div>";
-      this.alreadyCheck = [];
-      this.alreadyCheckShow = [];
-      this.smsTemplateContent = "效果预览";
-      this.smsForm = {
-        smsName: "",
-        signName: "",
-        context: "",
-        smsRange: "1",
-        num: 0,
-        messageCode: "",
-      };
-      this.getMemberNum();
-      this.sendSmsModal = true;
-    },
-    paneChange(name) {
-      if (name == "TEMPLATE") {
-        this.getSmsTemplate();
+  }).catch(() => {});
+}
+function syncTemplate() {
+  loading.value = true;
+  API_Setting.syncTemplate().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      ElMessage.success("同步成功");
+      getSmsTemplate();
+    }
+  });
+}
+function smsChangePage(v) {
+  smsSearchForm.pageNumber = v;
+  getSms();
+}
+function smsChangePageSize(v) {
+  smsSearchForm.pageNumber = 1;
+  smsSearchForm.pageSize = v;
+  getSms();
+}
+function templateChangePage(v) {
+  templateSearchForm.pageNumber = v;
+  getSmsTemplate();
+}
+function templateChangePageSize(v) {
+  templateSearchForm.pageNumber = 1;
+  templateSearchForm.pageSize = v;
+  getSmsTemplate();
+}
+function getSmsTemplate() {
+  loading.value = true;
+  API_Setting.getSmsTemplatePage(templateSearchForm)
+    .then((res) => {
+      if (res.success) {
+        templateData.value = res.result.records;
+        templateTotal.value = res.result.total;
       }
-      if (name == "SIGN") {
-        this.getSmsSign();
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function getSms() {
+  loading.value = true;
+  API_Setting.getSmsPage(smsSearchForm)
+    .then((res) => {
+      if (res.success) {
+        smsData.value = res.result.records;
+        smsTotal.value = res.result.total;
       }
-    },
-    selectSmsSign(v) {
-      if (v != undefined) {
-        this.smsContent = "<div class='sms'>【" + v + "】" + " " + this.smsTemplateContent + "</div>";
-      } else {
-        this.smsContent = "<div class='sms'>效果预览" + this.smsTemplateContent + "</div>";
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function signChangePage(v) {
+  signSearchForm.pageNumber = v;
+  getSmsSign();
+}
+function signChangePageSize(v) {
+  signSearchForm.pageNumber = 1;
+  signSearchForm.pageSize = v;
+  getSmsSign();
+}
+function editSign(v) {
+  router.push({ name: "add-sms-sign", query: { id: v.id } });
+}
+function getSmsSign() {
+  loading.value = true;
+  API_Setting.getSmsSignPage(signSearchForm)
+    .then((res) => {
+      if (res.success) {
+        signData.value = res.result.records;
+        signTotal.value = res.result.total;
       }
-    },
-    selectSmsTemplate() {
-      this.smsTemplates.forEach((e) => {
-        if (this.smsForm.messageCode == e.templateCode) {
-          this.smsTemplateContent = e.templateContent;
-          this.smsForm.smsName = e.templateName;
-        }
-      });
-      if (this.smsForm.signName) {
-        this.smsContent =
-          "<div class='sms'>【" + this.smsForm.signName + "】" + this.smsTemplateContent + "</div>";
-      } else {
-        this.smsContent = "<div class='sms'>" + this.smsTemplateContent + "</div>";
-      }
-      this.smsForm.context = this.smsTemplateContent;
-    },
-    deleteSmsTemplate(v) {
-      ElMessageBox.confirm("您确认要删除此短信模板？", "确认删除", { type: "warning" }).then(() => {
-          API_Setting.deleteSmsTemplatePage({ templateCode: v.templateCode }).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.getSmsTemplate();
-            }
-          });
-      }).catch(() => {});
-    },
-    sendSms() {
-      this.$refs.smsForm.validate((valid) => {
-        if (!valid) return;
-        this.smsForm.mobile = this.alreadyCheck;
-        API_Setting.sendSms(this.smsForm).then((res) => {
-          if (res.success) {
-            ElMessage.success("发送成功");
-            this.getSms();
-            this.sendSmsModal = false;
-          }
-        });
-      });
-    },
-    addSign() {
-      this.$router.push({ name: "add-sms-sign" });
-    },
-    addTemplate() {
-      this.templateModalVisible = true;
-      this.templateModalTitle = "添加短信模板";
-      this.templateForm = {};
-      this.modalType = 0;
-    },
-    editTemplate(v) {
-      this.templateModalVisible = true;
-      this.templateModalTitle = "修改短信模板";
-      this.templateForm = { ...v };
-      this.modalType = 1;
-    },
-    syncSign() {
-      this.loading = true;
-      API_Setting.syncSign().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          ElMessage.success("同步成功");
-          this.getSmsSign();
-        }
-      });
-    },
-    templateSubmit() {
-      this.$refs.templateForm.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        const req =
-          this.modalType == 0
-            ? API_Setting.addSmsTemplatePage(this.templateForm)
-            : API_Setting.editSmsTemplatePage(this.templateForm);
-        req
-          .then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success(this.modalType == 0 ? "添加成功" : "修改成功");
-              this.templateModalVisible = false;
-              this.getSmsTemplate();
-            }
-          })
-          .catch(() => {
-            this.submitLoading = false;
-          });
-      });
-    },
-    deleteSmsSign(v) {
-      ElMessageBox.confirm("您确认要删除此短信签名？", "确认删除", { type: "warning" }).then(() => {
-          API_Setting.deleteSign(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.getSmsSign();
-            }
-          });
-      }).catch(() => {});
-    },
-    syncTemplate() {
-      this.loading = true;
-      API_Setting.syncTemplate().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          ElMessage.success("同步成功");
-          this.getSmsTemplate();
-        }
-      });
-    },
-    smsChangePage(v) {
-      this.smsSearchForm.pageNumber = v;
-      this.getSms();
-    },
-    smsChangePageSize(v) {
-      this.smsSearchForm.pageNumber = 1;
-      this.smsSearchForm.pageSize = v;
-      this.getSms();
-    },
-    templateChangePage(v) {
-      this.templateSearchForm.pageNumber = v;
-      this.getSmsTemplate();
-    },
-    templateChangePageSize(v) {
-      this.templateSearchForm.pageNumber = 1;
-      this.templateSearchForm.pageSize = v;
-      this.getSmsTemplate();
-    },
-    getSmsTemplate() {
-      this.loading = true;
-      API_Setting.getSmsTemplatePage(this.templateSearchForm)
-        .then((res) => {
-          if (res.success) {
-            this.templateData = res.result.records;
-            this.templateTotal = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    getSms() {
-      this.loading = true;
-      API_Setting.getSmsPage(this.smsSearchForm)
-        .then((res) => {
-          if (res.success) {
-            this.smsData = res.result.records;
-            this.smsTotal = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    signChangePage(v) {
-      this.signSearchForm.pageNumber = v;
-      this.getSmsSign();
-    },
-    signChangePageSize(v) {
-      this.signSearchForm.pageNumber = 1;
-      this.signSearchForm.pageSize = v;
-      this.getSmsSign();
-    },
-    editSign(v) {
-      this.$router.push({ name: "add-sms-sign", query: { id: v.id } });
-    },
-    getSmsSign() {
-      this.loading = true;
-      API_Setting.getSmsSignPage(this.signSearchForm)
-        .then((res) => {
-          if (res.success) {
-            this.signData = res.result.records;
-            this.signTotal = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss">
diff --git a/manager/src/views/sys/message/smsSign.vue b/manager/src/views/sys/message/smsSign.vue
index f627a343b..1a3f5cc9c 100644
--- a/manager/src/views/sys/message/smsSign.vue
+++ b/manager/src/views/sys/message/smsSign.vue
@@ -2,7 +2,7 @@
   <el-card>
     <div style="margin-top: 0">
       <div class="sign-name">{{ id ? "修改签名" : "新增签名" }}</div>
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="签名" prop="signName">
           <el-input
             v-model="form.signName"
@@ -60,95 +60,96 @@
   </el-card>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import * as API_Setting from "@/api/setting.js";
 import uploadPicThumb from "@/components/lili/upload-pic-thumb";
 
-export default {
-  name: "smsSign",
-  components: {
-    uploadPicThumb,
-  },
-  data() {
-    return {
-      id: 0,
-      form: {
-        signName: "",
-        businessLicense: "",
-        license: "",
-        signSource: "",
-        remark: "",
-      },
-      loading: false,
-      formValidate: {
-        signName: [{ required: true, message: "签名名称不能为空", trigger: "blur" }],
-        remark: [{ required: true, message: "申请说明不能为空", trigger: "blur" }],
-        businessLicense: [{ required: true, message: " ", trigger: "blur" }],
-      },
-      submitLoading: false,
-    };
-  },
-  methods: {
-    init() {
-      this.id = this.$route.query.id;
-      if (this.id != undefined) {
-        this.getSmsSignDetail();
+defineOptions({ name: "smsSign" });
+
+const route = useRoute();
+const router = useRouter();
+
+const id = ref(0);
+const form = ref({
+  signName: "",
+  businessLicense: "",
+  license: "",
+  signSource: "",
+  remark: "",
+});
+const loading = ref(false);
+const formValidate = reactive({
+  signName: [{ required: true, message: "签名名称不能为空", trigger: "blur" }],
+  remark: [{ required: true, message: "申请说明不能为空", trigger: "blur" }],
+  businessLicense: [{ required: true, message: " ", trigger: "blur" }],
+});
+const submitLoading = ref(false);
+
+const formRef = ref(null);
+
+function init() {
+  id.value = route.query.id;
+  if (id.value != undefined) {
+    getSmsSignDetail();
+  }
+}
+
+function addSignSubmit() {
+  if (form.value.businessLicense == "" || form.value.license == "") {
+    ElMessage.error("请完善证件信息");
+    return;
+  }
+  if (form.value.signSource === "" || form.value.signSource === null || form.value.signSource === undefined) {
+    ElMessage.error("请选择签名来源");
+    return;
+  }
+  formRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      if (id.value == undefined) {
+        API_Setting.addSmsSign(form.value)
+          .then((res) => {
+            loading.value = false;
+            if (res.success) {
+              ElMessage.success("添加成功");
+              router.back();
+            }
+          })
+          .catch(() => {
+            loading.value = false;
+          });
+      } else {
+        API_Setting.editSmsSign(form.value)
+          .then((res) => {
+            loading.value = false;
+            if (res.success) {
+              ElMessage.success("修改成功");
+              router.back();
+            }
+          })
+          .catch(() => {
+            loading.value = false;
+          });
       }
-    },
-    addSignSubmit() {
-      if (this.form.businessLicense == "" || this.form.license == "") {
-        ElMessage.error("请完善证件信息");
-        return;
-      }
-      if (this.form.signSource === "" || this.form.signSource === null || this.form.signSource === undefined) {
-        ElMessage.error("请选择签名来源");
-        return;
-      }
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          if (this.id == undefined) {
-            API_Setting.addSmsSign(this.form)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  ElMessage.success("添加成功");
-                  this.$router.back();
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          } else {
-            API_Setting.editSmsSign(this.form)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  ElMessage.success("修改成功");
-                  this.$router.back();
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          }
-        }
-      });
-    },
-    getSmsSignDetail() {
-      API_Setting.smsSignDetail(this.id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.form = res.result;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+
+function getSmsSignDetail() {
+  API_Setting.smsSignDetail(id.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      form.value = res.result;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/oss-manage/ossManage.vue b/manager/src/views/sys/oss-manage/ossManage.vue
index d47af2f36..4be43024f 100644
--- a/manager/src/views/sys/oss-manage/ossManage.vue
+++ b/manager/src/views/sys/oss-manage/ossManage.vue
@@ -189,7 +189,7 @@
                     <div>
                       <el-upload
                         v-if="canUploadImages"
-                        ref="up"
+                        ref="upRef"
                         :action="managerApiUrl + '/manager/common/upload/file'"
                         :data="uploadData"
                         :headers="accessToken"
@@ -290,7 +290,7 @@
       width="500px"
       destroy-on-close
     >
-      <el-form ref="form" label-width="95px" :model="form" :rules="formValidate">
+      <el-form ref="formRef" label-width="95px" :model="form" :rules="formValidate">
         <el-form-item label="原文件名" prop="name">
           <el-input v-model="form.name" />
         </el-form-item>
@@ -355,7 +355,7 @@
       destroy-on-close
     >
       <el-form
-        ref="formValidate"
+        ref="formValidateRef"
         label-width="80px"
         :model="groupFormValidate"
         :rules="groupRuleValidate"
@@ -373,6 +373,19 @@
 </template>
 
 <script>
+// DPlayer 实例：原为模块级变量（多实例共享），保持原有作用域
+let dp;
+</script>
+
+<script setup>
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Delete, Download, View, Document } from "@element-plus/icons-vue";
 import {
@@ -388,1142 +401,1156 @@ import DPlayer from "dplayer";
 import {managerApiUrl} from "@/libs/axios";
 import config from "@/config/index";
 import playIcon from "@/assets/play.png";
+import { getStore } from "@/libs/storage";
 
-let dp;
-export default {
-  name: "oss-manage",
-  components: { Delete, Download, View, Document },
-  props: {
-    isComponent: {
-      default: false,
-      type: Boolean,
-    },
-    choose: {
-      type: String,
-      default: ""
-    },
-    initialize: {
-      type: Boolean,
-      default: false,
-    },
-    maxSelect: {
-      type: Number,
-      default: 0,
-    },
-    hideSelectFooter: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "oss-manage" });
+
+const props = defineProps({
+  isComponent: {
+    default: false,
+    type: Boolean,
   },
-  data() {
-    return {
-      managerApiUrl, // 上传文件路径
-      config, // api地址
-      fileDirectoryId: "",
-      groupFormValidate: {
-        id: "",
-        level: 0,
-        parentId: "0",
-        directoryName: "",
-      },
-      groupRuleValidate: {
-        directoryName: [
-          {
-            required: true,
-            message: "请输入分组名称",
-            trigger: "blur",
+  choose: {
+    type: String,
+    default: ""
+  },
+  initialize: {
+    type: Boolean,
+    default: false,
+  },
+  maxSelect: {
+    type: Number,
+    default: 0,
+  },
+  hideSelectFooter: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["callback", "selected"]);
+
+// $forceUpdate 依赖组件实例
+const { proxy } = getCurrentInstance();
+
+// managerApiUrl 上传文件路径、config api地址：原 data 中直接引用 import，模板直接使用 import 绑定
+const fileDirectoryId = ref("");
+const groupFormValidate = ref({
+  id: "",
+  level: 0,
+  parentId: "0",
+  directoryName: "",
+});
+const groupRuleValidate = {
+  directoryName: [
+    {
+      required: true,
+      message: "请输入分组名称",
+      trigger: "blur",
+    },
+  ],
+};
+const enableGroup = ref(false); // 是否展示分组
+const selectImage = ref(false); //是否是选择
+const accessToken = ref({}); // 上传token鉴权
+const loading = ref(false); // 表单加载状态
+const fileType = ref("pic"); // 兼容外部调用：pic / video
+const showType = ref("list"); // 展示类型
+const modalVisible = ref(false); // 添加或编辑显示
+const uploadVisible = ref(false); // 上传展示
+const videoVisible = ref(false); // 视频预览
+const picVisible = ref(false); // 图片预览
+const fileVisible = ref(false); // 文件预览
+const picTitle = ref(""); // 图片 title
+const videoTitle = ref(""); // 视频 title
+const fileTitle = ref(""); // 文件 title
+const pendingVideoUrl = ref(""); // 待播放视频地址
+const modalTitle = ref(""); // 添加或编辑标题
+const activeRoleTab = ref("MANAGER");
+const activeCategoryTab = ref("IMAGE");
+const searchForm = reactive({
+  // 搜索框对应data对象
+  name: "",
+  fileKey: "",
+  fileType: "",
+  fileCategory: "IMAGE",
+  userEnums: "MANAGER",
+  pageNumber: 1, // 当前页数
+  pageSize: 20, // 页面大小
+  sort: "createTime", // 默认排序字段
+  order: "desc", // 默认排序方式
+});
+const oldKey = ref(""); // 请求参数
+const form = ref({
+  // 表单
+  name: "",
+  fileKey: "",
+});
+const file = ref({}); // 文件数据
+// 表单验证规则
+const formValidate = {
+  name: [{required: true, message: "不能为空", trigger: "blur"}],
+  fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+};
+const submitLoading = ref(false); // 添加或编辑提交状态
+const selectList = ref([]); // 多选数据
+const selectCount = ref(0); // 多选计数
+const totalSize = ref(""); // 文件大小统计
+const columns = ref([
+  // 表头
+  {
+    type: "selection",
+    width: 60,
+    align: "center",
+  },
+  {
+    title: "缩略图(点击预览)",
+    key: "url",
+    width: 300,
+    align: "center",
+    render: (h, params) => {
+      if (isImageFile(params.row)) {
+        return h("img", {
+          attrs: {
+            src: params.row.url || "",
+            alt: "加载图片失败",
           },
-        ],
-      },
-      enableGroup: false, // 是否展示分组
-      selectImage: false, //是否是选择
-      accessToken: {}, // 上传token鉴权
-      loading: false, // 表单加载状态
-      fileType: "pic", // 兼容外部调用：pic / video
-      showType: "list", // 展示类型
-      modalVisible: false, // 添加或编辑显示
-      uploadVisible: false, // 上传展示
-      videoVisible: false, // 视频预览
-      picVisible: false, // 图片预览
-      fileVisible: false, // 文件预览
-      picTitle: "", // 图片 title
-      videoTitle: "", // 视频 title
-      fileTitle: "", // 文件 title
-      pendingVideoUrl: "", // 待播放视频地址
-      modalTitle: "", // 添加或编辑标题
-      activeRoleTab: "MANAGER",
-      activeCategoryTab: "IMAGE",
-      searchForm: {
-        // 搜索框对应data对象
-        name: "",
-        fileKey: "",
-        fileType: "",
-        fileCategory: "IMAGE",
-        userEnums: "MANAGER",
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-      },
-      oldKey: "", // 请求参数
-      form: {
-        // 表单
-        name: "",
-        fileKey: "",
-      },
-      file: {}, // 文件数据
-      // 表单验证规则
-      formValidate: {
-        name: [{required: true, message: "不能为空", trigger: "blur"}],
-        fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      totalSize: "", // 文件大小统计
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "缩略图(点击预览)",
-          key: "url",
-          width: 300,
-          align: "center",
-          render: (h, params) => {
-            if (this.isImageFile(params.row)) {
-              return h("img", {
-                attrs: {
-                  src: params.row.url || "",
-                  alt: "加载图片失败",
-                },
-                style: {
-                  cursor: "pointer",
-                  width: "80px",
-                  height: "60px",
-                  margin: "10px 0",
-                  "object-fit": "contain",
-                },
-                on: {
-                  click: () => {
-                    this.showPic(params.row);
-                  },
-                },
-              });
-            } else if (this.isVideoFile(params.row)) {
-              // 如果视频文件大小超过5MB不予加载video
-              if (params.row.fileSize < 1024 * 1024 * 5) {
-                return h(
-                  "video",
-                  {
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  },
-                  [
-                    h("source", {
-                      attrs: {
-                        src: params.row.url,
-                      },
-                    }),
-                  ]
-                );
-              } else {
-                return h("img", {
-                  attrs: {
-                    src: playIcon,
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showVideo(params.row);
-                    },
-                  },
-                });
-              }
-            } else {
-              return h("span", "非多媒体类型");
-            }
+          style: {
+            cursor: "pointer",
+            width: "80px",
+            height: "60px",
+            margin: "10px 0",
+            "object-fit": "contain",
           },
-        },
-        {
-          title: "文件类型",
-          key: "fileType",
-          width: 115,
-          className: this.selectImage == true ? "none" : "",
-        },
-        {
-          title: "文件大小",
-          key: "fileSize",
-          width: 115,
-          sortable: true,
-          className: this.selectImage == true ? "none" : "",
-          render: (h, params) => {
-            let m =
-              ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-            return h("span", m);
-          },
-        },
-        {
-          title: "上传者",
-          key: "createBy",
-          width: 200,
-          render: (h, params) => {
-            let m = "";
-            if (params.row.userEnums == "MANAGER") {
-              m = "[管理员]";
-            } else if (params.row.userEnums == "STORE") {
-              m = "[商家]";
-            } else if (params.row.userEnums == "CUSTOMER") {
-              m = "[客服]";
-            } else {
-              m = "[用户]";
-            }
-            m += params.row.createBy;
-            return h("span", m);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          // width: 300,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                    display: this.selectImage === true ? "inline-block" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedParams(params.row);
-                    },
-                  },
-                },
-                "选择"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                    display: this.selectImage === true ? "inline-block" : "none",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                  on: {
-                    click: () => {
-                      this.download(params.row);
-                    },
-                  },
-                },
-                "下载"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      viewColumns: [
-        {
-          title: "缩略图(点击预览)",
-          key: "url",
-          // width: 150,
-          align: "center",
-          render: (h, params) => {
-            if (this.isImageFile(params.row)) {
-              return h("img", {
-                attrs: {
-                  src: params.row.url || "",
-                  alt: "加载图片失败",
-                },
-                style: {
-                  cursor: "pointer",
-                  width: "80px",
-                  height: "60px",
-                  margin: "10px 0",
-                  "object-fit": "contain",
-                },
-                on: {
-                  click: () => {
-                    this.showPic(params.row);
-                  },
-                },
-              });
-            } else if (this.isVideoFile(params.row)) {
-              // 如果视频文件大小超过5MB不予加载video
-              if (params.row.fileSize < 1024 * 1024 * 5) {
-                return h(
-                  "video",
-                  {
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  },
-                  [
-                    h("source", {
-                      attrs: {
-                        src: params.row.url,
-                      },
-                    }),
-                  ]
-                );
-              } else {
-                return h("img", {
-                  attrs: {
-                    src: playIcon,
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showVideo(params.row);
-                    },
-                  },
-                });
-              }
-            } else {
-              return h("span", "非多媒体类型");
-            }
-          },
-        },
-        {
-          title: "上传者",
-          key: "createBy",
-          width: 120,
-          sortable: true,
-          render: (h, params) => {
-            let m = "";
-            if (params.row.userEnums == "MANAGER") {
-              m = "[管理员]";
-            } else if (params.row.userEnums == "STORE") {
-              m = "[商家]";
-            } else if (params.row.userEnums == "CUSTOMER") {
-              m = "[客服]";
-            } else {
-              m = "[用户]";
-            }
-            m += params.row.createBy;
-            return h("span", m);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 300,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "Button",
-                {
-                  props: {
-                    type: "default",
-                    size: "small",
-                  },
-                  style: {
-                    marginRight: "5px",
-                    display:
-                      this.selectImage === true ? "inline-block" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedParams(params.row);
-                    },
-                  },
-                },
-                "选择"
-              )
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      pageSizeOpts: [5, 10, 20], // 页码展示项
-      list: [], // 列表
-      //树结构
-      treeData: [],
-      treeDataDefault: [],
-      treeRenderKey: 0,
-      selectedGroupData: "",
-      insertOrUpdate: "insert",
-      groupLoading: false,
-      // 图片列表
-      selectedOss: [],
-      myData: [
-        {
-          title: 'parent 1',
-          expand: true,
-          render: (h, {root, node, data}) => {
-            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
-              h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-              h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                [h("Button", {
-                  ...this.buttonProps,
-                  icon: 'ios-add',
-                  type: 'primary',
-                  style: {width: '64px'},
-                  onClick: () => {
-                    this.append(data)
-                  }
-                })
-                ])
-            ]);
-          },
-          children: [
-            {
-              title: 'child 1-1',
-              expand: true,
-              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+          on: {
+            click: () => {
+              showPic(params.row);
             },
+          },
+        });
+      } else if (isVideoFile(params.row)) {
+        // 如果视频文件大小超过5MB不予加载video
+        if (params.row.fileSize < 1024 * 1024 * 5) {
+          return h(
+            "video",
             {
-              title: 'child 1-2',
-              expand: true,
-              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
-            }
-          ]
+              style: {
+                cursor: "pointer",
+                width: "80px",
+                height: "60px",
+                margin: "10px 0",
+                "object-fit": "contain",
+              },
+              on: {
+                click: () => {
+                  showVideo(params.row);
+                },
+              },
+            },
+            [
+              h("source", {
+                attrs: {
+                  src: params.row.url,
+                },
+              }),
+            ]
+          );
+        } else {
+          return h("img", {
+            attrs: {
+              src: playIcon,
+            },
+            style: {
+              cursor: "pointer",
+              width: "80px",
+              height: "60px",
+              margin: "10px 0",
+              "object-fit": "contain",
+            },
+            on: {
+              click: () => {
+                showVideo(params.row);
+              },
+            },
+          });
         }
-      ],
-      buttonProps: {type: 'default', size: 'small',},
-    };
-  },
-  watch: {
-    selectImage(val) {
-      if (val) {
-        if (this.isComponent) {
-          this.activeRoleTab = "MANAGER";
-          this.searchForm.userEnums = "MANAGER";
-          this.init();
-        } else if (!this.data.length) {
-          this.init();
-        }
-      }
-    },
-    choose(val) {
-      if (val) this.selectImage = val
-    },
-    selectedOss(val) {
-      if (val && val.length && !(this.isComponent && this.selectImage)) {
-        this.$emit("callback", { url: val[val.length - 1].split(",")[1] });
-      }
-    },
-    // 初始化监听 是否清空所选图片
-    initialize(val) {
-      if (val && this.isComponent) {
-        this.selectedOss = [];
-        this.activeRoleTab = "MANAGER";
-        this.searchForm.userEnums = "MANAGER";
-        delete this.searchForm.fileDirectoryId;
-        this.selectedGroupData = "";
+      } else {
+        return h("span", "非多媒体类型");
       }
     },
   },
-  computed: {
-    canShowGroups() {
-      return this.activeRoleTab === "MANAGER";
-    },
-    canUploadImages() {
-      return this.activeRoleTab === "MANAGER";
-    },
-    uploadButtonText() {
-      const textMap = {
-        IMAGE: "上传图片",
-        VIDEO: "上传视频",
-        FILE: "上传文件",
-      };
-      return textMap[this.activeCategoryTab] || "上传图片";
-    },
-    uploadData() {
-      const data = {
-        userEnums: this.activeRoleTab,
-        directoryType: this.activeRoleTab,
-      };
-      const directoryId = this.searchForm.fileDirectoryId;
-      if (directoryId && directoryId !== "0") {
-        data.directoryPath = directoryId;
-      }
-      return data;
+  {
+    title: "文件类型",
+    key: "fileType",
+    width: 115,
+    className: selectImage.value == true ? "none" : "",
+  },
+  {
+    title: "文件大小",
+    key: "fileSize",
+    width: 115,
+    sortable: true,
+    className: selectImage.value == true ? "none" : "",
+    render: (h, params) => {
+      let m =
+        ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      return h("span", m);
     },
   },
-
-  methods: {
-    beforeUpload(file) {
-      if (!this.canUploadImages) {
-        ElMessage.warning("仅管理员模块支持上传图片");
-        return false;
-      }
-      const maxSize = 20480 * 1024;
-      if (file && file.size > maxSize) {
-        this.handleMaxSize(file);
-        return false;
-      }
-      return true;
-    },
-    handleTreeNodeClick(data) {
-      if (data) {
-        this.handleCateChange([data]);
-      }
-    },
-    onTreeDropdownCommand(cmd, data) {
-      this.selectedGroupData = data;
-      if (cmd === "edit") {
-        this.handleContextMenuEdit(null, null, data);
-      } else if (cmd === "delete") {
-        this.handleContextMenuDelete();
-      }
-    },
-    onMouseOver(item, index) {
-      this.data[index].isShowPreview = true;
-      this.$forceUpdate();
-    },
-    onMouseOut(item, index) {
-      this.data[index].isShowPreview = false;
-    },
-    handleRoleTabChange(name) {
-      this.activeRoleTab = name;
-      this.searchForm.pageNumber = 1;
-      this.searchForm.userEnums = name;
-      delete this.searchForm.fileDirectoryId;
-      this.selectedGroupData = "";
-      this.groupFormValidate.id = "";
-      this.groupFormValidate.level = 0;
-      this.selectedOss = [];
-      this.updateTreeDataByRole();
-      this.getDataList();
-    },
-    handleCategoryTabChange(name) {
-      this.activeCategoryTab = name;
-      this.searchForm.fileCategory = name;
-      this.searchForm.fileType = "";
-      this.searchForm.pageNumber = 1;
-      if (this.showType === "list") {
-        this.searchForm.pageSize = 20;
+  {
+    title: "上传者",
+    key: "createBy",
+    width: 200,
+    render: (h, params) => {
+      let m = "";
+      if (params.row.userEnums == "MANAGER") {
+        m = "[管理员]";
+      } else if (params.row.userEnums == "STORE") {
+        m = "[商家]";
+      } else if (params.row.userEnums == "CUSTOMER") {
+        m = "[客服]";
       } else {
-        this.searchForm.pageSize = 12;
+        m = "[用户]";
       }
-      this.getDataList();
+      m += params.row.createBy;
+      return h("span", m);
     },
-    updateTreeDataByRole() {
-      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
-      this.treeData = [
-        {
-          title: "全部图片",
-          label: "全部分类",
-          value: "0",
-          type: this.activeRoleTab,
-          level: 0,
-          children: [],
-          id: "0",
-          categoryId: 0,
-        },
-        ...currentTree,
-      ];
-      this.treeRenderKey += 1;
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    fixed: "right",
+    // width: 300,
+    render: (h, params) => {
+      return h("div", [
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              marginRight: "5px",
+              display: selectImage.value === true ? "inline-block" : "none",
+            },
+            on: {
+              click: () => {
+                selectedParams(params.row);
+              },
+            },
+          },
+          "选择"
+        ),
+        h(
+          "span",
+          {
+            style: {
+              margin: "0 8px",
+              color: "#dcdee2",
+              display: selectImage.value === true ? "inline-block" : "none",
+            },
+          },
+          "|"
+        ),
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              marginRight: "5px",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+            on: {
+              click: () => {
+                download(params.row);
+              },
+            },
+          },
+          "下载"
+        ),
+        h(
+          "span",
+          {
+            style: {
+              margin: "0 8px",
+              color: "#dcdee2",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+          },
+          "|"
+        ),
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+            on: {
+              click: () => {
+                remove(params.row);
+              },
+            },
+          },
+          "删除"
+        ),
+      ]);
     },
-    filterTreeByRole(tree = [], role) {
-      if (!tree || !tree.length) return [];
-      return tree
-        .filter((item) => item.type === role)
-        .map((item) => ({
-          ...item,
-          children: [],
-        }));
-    },
-    // 复选框值改变时触发
-    selectOssChange(e) {
-      if (this.maxSelect === 1 && e.length > 1) {
-        const last = e[e.length - 1];
-        this.selectedOss = [last];
-        e = [last];
-      }
-      if (e) {
-        this.selectList = e.map(item => {
-          return {id: item.split(',')[0]}
+  },
+]);
+const viewColumns = ref([
+  {
+    title: "缩略图(点击预览)",
+    key: "url",
+    // width: 150,
+    align: "center",
+    render: (h, params) => {
+      if (isImageFile(params.row)) {
+        return h("img", {
+          attrs: {
+            src: params.row.url || "",
+            alt: "加载图片失败",
+          },
+          style: {
+            cursor: "pointer",
+            width: "80px",
+            height: "60px",
+            margin: "10px 0",
+            "object-fit": "contain",
+          },
+          on: {
+            click: () => {
+              showPic(params.row);
+            },
+          },
         });
-        this.selectCount = e.length;
-        // let size = 0;
-        // e.forEach((item) => {size += item.fileSize * 1.0;});
-        // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.$emit("selected", e);
-      }
-    },
-    handleCardClick(item, event) {
-      if (!(this.isComponent && this.selectImage)) return;
-      if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
-        return;
-      }
-      const key = `${item.id},${item.url}`;
-      let next;
-      if (this.maxSelect === 1) {
-        next = this.selectedOss.includes(key) ? [] : [key];
-      } else if (this.selectedOss.includes(key)) {
-        next = this.selectedOss.filter((k) => k !== key);
-      } else {
-        next = [...this.selectedOss, key];
-      }
-      this.selectedOss = next;
-      this.selectOssChange(next);
-    },
-    // 页码改变时回调
-    pageChange(value) {
-      this.selectedOss = [];
-      this.searchForm.pageNumber = value;
-      this.getDataList();
-    },
-    // 自定义tree节点显示内容和交互
-    renderContent(h, {root, node, data}) {
-      if (data.value === '0') {
-        return h('span', {style: {display: 'inline-block', width: '100%'}},
-          [
-            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
-          ]
-        );
-      } else {
-        return h('span', {style: {display: 'inline-block', width: '100%'}},
-          [
-            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}},
-              [
-                h("Dropdown", {style: {marginLeft: "4px"}},
-                  [
-                    h("Icon", {
-                      props: {type: 'ios-more', size: "20",},
-                      style: {display: 'inline-block'},
-                      on: {
-                        click: () => {
-                        }
-                      }
-                    }),
-                    h("DropdownMenu", {
-                      slot: "list"
-                    }, [
-                      h("DropdownItem", {
-                        nativeOn: {
-                          click: () => {
-                            this.handleContextMenuEdit(root, node, data)
-                          }
-                        }
-                      }, "编辑"),
-                      h("DropdownItem", {
-                        nativeOn: {
-                          click: () => {
-                            this.handleContextMenuDelete()
-                          }
-                        }
-                      }, "删除"),
-                    ])
-                  ]),
-              ])
-          ]
-        );
-      }
-
-    },
-
-
-    handleContextMenu(val) {
-      this.selectedGroupData = val;
-    },
-    // 编辑分组
-    handleContextMenuEdit(root, node, data) {
-      this.insertOrUpdate = "update";
-      this.enableGroup = true;
-      this.groupFormValidate.id = data.value;
-      this.groupFormValidate.directoryName = data.title || data.label;
-      this.groupFormValidate.level = 0;
-      this.groupFormValidate.parentId = "0";
-    },
-    // 删除分组
-    async handleContextMenuDelete(val) {
-      ElMessageBox.confirm("是否删除该分组", "提示", { type: "warning" }).then(async () => {
-          const res = await delFileDirectory(this.selectedGroupData.value);
-          if (res.success) {
-            ElMessage.success("删除成功!");
-            this.getDataList();
-            this.getAllList();
-          }
-      }).catch(() => {});
-    },
-    async submitAddGroup() {
-      this.$refs["formValidate"].validate(async (valid) => {
-        if (valid) {
-          let res;
-          const params = {
-            directoryName: this.groupFormValidate.directoryName,
-            level: 0,
-            parentId: "0",
-            directoryType: this.activeRoleTab,
-          };
-          if (this.insertOrUpdate === "insert") {
-            res = await addFileDirectory(params);
-          } else {
-            params.id = this.groupFormValidate.id;
-            res = await updateFileDirectory(params);
-          }
-
-          if (res.success) {
-            ElMessage.success("操作成功!");
-            this.enableGroup = false;
-            this.getAllList();
-          }
-          } else {
-          ElMessage.error("请填写完整信息!");
-        }
-      });
-    },
-    handleClickAddGroup() {
-      this.insertOrUpdate = "insert";
-      this.groupFormValidate = {
-        id: "",
-        level: 0,
-        parentId: "0",
-        directoryName: "",
-      };
-      this.enableGroup = true;
-    },
-    copyFileUrl(row) {
-      const textArea = document.createElement("textarea");
-      textArea.value = row.url;
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      try {
-        document.execCommand("copy");
-        ElMessage.success("复制成功");
-      } catch (err) {
-        console.error("Unable to copy to clipboard", err);
-      }
-      document.body.removeChild(textArea);
-    },
-
-    // 获取全部文件目录
-    getAllList(parent_id) {
-      this.loading = true;
-      getFileDirectory(parent_id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.treeDataDefault = this.getTree(res.result);
-          this.updateTreeDataByRole();
-        }
-      });
-    },
-    // 文件目录分类格式化：仅展示一级分组
-    getTree(tree = []) {
-      const flat = [];
-      const walk = (nodes) => {
-        if (!nodes || !nodes.length) return;
-        nodes.forEach((item) => {
-          flat.push({
-            title: item.directoryName,
-            value: item.id,
-            type: item.directoryType,
-            label: item.directoryName,
-            level: 0,
-            expand: false,
-            selected: false,
-            contextmenu: false,
-            parentId: "0",
-            children: [],
+      } else if (isVideoFile(params.row)) {
+        // 如果视频文件大小超过5MB不予加载video
+        if (params.row.fileSize < 1024 * 1024 * 5) {
+          return h(
+            "video",
+            {
+              style: {
+                cursor: "pointer",
+                width: "80px",
+                height: "60px",
+                margin: "10px 0",
+                "object-fit": "contain",
+              },
+              on: {
+                click: () => {
+                  showVideo(params.row);
+                },
+              },
+            },
+            [
+              h("source", {
+                attrs: {
+                  src: params.row.url,
+                },
+              }),
+            ]
+          );
+        } else {
+          return h("img", {
+            attrs: {
+              src: playIcon,
+            },
+            style: {
+              cursor: "pointer",
+              width: "80px",
+              height: "60px",
+              margin: "10px 0",
+              "object-fit": "contain",
+            },
+            on: {
+              click: () => {
+                showVideo(params.row);
+              },
+            },
           });
-          if (item.children && item.children.length) {
-            walk(item.children);
-          }
-        });
-      };
-      walk(tree);
-      return flat;
-    },
-
-    // 选择分类回调
-    handleCateChange(data) {
-      if (data) {
-        this.selectedGroupData = data[0];
-        let {value, type, level} = data[0];
-        this.list.push({value, type, level});
-        this.searchForm.fileDirectoryId = value;
-        if (value === "0" || value === 0) {
-          delete this.searchForm.fileDirectoryId;
         }
-        this.searchForm.userEnums = type || this.activeRoleTab;
-        this.getDataList();
-        this.selectedOss = [];
-      }
-    },
-    /**
-     * 选择
-     */
-    selectedParams(val) {
-      this.$emit("callback", val);
-    },
-    handleSelectConfirm() {
-      if (!this.selectedOss.length) {
-        ElMessage.warning("请选择图片");
-        return;
-      }
-      const last = this.selectedOss[this.selectedOss.length - 1];
-      this.$emit("callback", { url: last.split(",")[1] });
-    },
-    handleSelectCancel() {
-      this.selectedOss = [];
-      this.$emit("callback", { url: "" });
-    },
-    // 初始化数据
-    init() {
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-      this.searchForm.userEnums = this.activeRoleTab;
-      this.searchForm.fileCategory = this.activeCategoryTab;
-      this.getDataList();
-      this.getAllList();
-    },
-    // 查看大图
-    showPic(v) {
-      this.prepareFileMeta(v);
-      this.picTitle = v.name || "图片预览";
-      this.picVisible = true;
-    },
-    // 查看文件（PDF 等）
-    showFile(v) {
-      this.prepareFileMeta(v);
-      this.fileTitle = v.name || "文件预览";
-      this.fileVisible = true;
-    },
-    // 查看视频
-    showVideo(v) {
-      this.prepareFileMeta(v);
-      this.videoTitle = v.name || "视频预览";
-      this.pendingVideoUrl = v.url;
-      this.videoVisible = true;
-    },
-    initDPlayer() {
-      const container = this.$refs.dplayerRef;
-      if (!container || !this.pendingVideoUrl) return;
-      if (dp) {
-        dp.destroy();
-        dp = null;
-      }
-      dp = new DPlayer({
-        container,
-        screenshot: true,
-        video: {
-          url: this.pendingVideoUrl,
-        },
-      });
-    },
-    // 关闭视频
-    closeVideo() {
-      if (dp) {
-        dp.destroy();
-        dp = null;
-      }
-      this.pendingVideoUrl = "";
-    },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    // 排序
-    changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order == "normal") {
-        this.searchForm.order = "";
-      }
-      this.getDataList();
-    },
-    // 起止时间筛选已移除
-    // 改变查看方式
-    changeShowType() {
-      this.searchForm.pageNumber = 1;
-      if (this.showType == "list") {
-        this.searchForm.pageSize = 20;
       } else {
-        this.searchForm.pageSize = 12;
+        return h("span", "非多媒体类型");
       }
-      this.getDataList();
     },
-    // 获取列表数据
-    getDataList(type = null) {
-      if (this.showType == "list") {
-        this.pageSizeOpts = [10, 20, 50];
+  },
+  {
+    title: "上传者",
+    key: "createBy",
+    width: 120,
+    sortable: true,
+    render: (h, params) => {
+      let m = "";
+      if (params.row.userEnums == "MANAGER") {
+        m = "[管理员]";
+      } else if (params.row.userEnums == "STORE") {
+        m = "[商家]";
+      } else if (params.row.userEnums == "CUSTOMER") {
+        m = "[客服]";
       } else {
-        this.pageSizeOpts = [12, 24, 48];
+        m = "[用户]";
       }
-      this.loading = true;
-      getFileListData(this.searchForm)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else {
-            this.data = [];
-            this.total = 0;
-          }
-        })
-        .catch(() => {
-          this.data = [];
-          this.total = 0;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
+      m += params.row.createBy;
+      return h("span", m);
     },
-    // 兼容外部按场景切换分类（如装修选图/选视频）
-    changeFileType() {
-      const categoryMap = {
-        pic: "IMAGE",
-        video: "VIDEO",
-        file: "FILE",
-        all: "IMAGE",
-      };
-      const category = categoryMap[this.fileType] || "IMAGE";
-      this.activeCategoryTab = category;
-      this.handleCategoryTabChange(category);
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    fixed: "right",
+    width: 300,
+    render: (h, params) => {
+      return h("div", [
+        h(
+          "Button",
+          {
+            props: {
+              type: "default",
+              size: "small",
+            },
+            style: {
+              marginRight: "5px",
+              display:
+                selectImage.value === true ? "inline-block" : "none",
+            },
+            on: {
+              click: () => {
+                selectedParams(params.row);
+              },
+            },
+          },
+          "选择"
+        )
+      ]);
     },
-    isImageFile(row) {
-      return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
-    },
-    isVideoFile(row) {
-      return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
-    },
-    isPdfFile(row) {
-      return (
-        row?.fileType === "application/pdf" ||
-        (row?.name && row.name.toLowerCase().endsWith(".pdf"))
-      );
-    },
-    previewFile(item) {
-      if (this.isVideoFile(item)) {
-        this.showVideo(item);
-      } else if (this.isImageFile(item)) {
-        this.showPic(item);
-      } else {
-        this.showFile(item);
-      }
-    },
-    prepareFileMeta(v) {
-      this.file = v;
-      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-    },
-    // 上传文件超过大小限制
-    handleMaxSize() {
-      ElMessage.warning("所选文件大小过大，不得超过 20MB");
-    },
-    // 上传成功回调
-    handleSuccess(res, file) {
-      if (!this.canUploadImages) {
-        ElMessage.warning("仅管理员模块支持上传图片");
-        return;
-      }
-      if (res.success) {
-        ElMessage.success("上传文件 " + file.name + " 成功");
-        this.getDataList();
-      } else {
-        ElMessage.error(res.message);
-      }
-    },
-    // 上传失败回调
-    handleError(error, file, fileList) {
-      ElMessage.error(error.toString());
-    },
-    // 清空上传文件
-    clearFiles() {
-      this.$refs.up.clearFiles();
-    },
-    // 取消修改文件名
-    handleCancel() {
-      this.modalVisible = false;
-    },
-    // 下载文件
-    download(v) {
-      window.open(
-        v.url + "?attname=&response-content-type=application/octet-stream"
-      );
-    },
-    // 批量删除文件
-    removeAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未选择要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 个文件?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteFile(ids).then((res) => {
-            if (res.success) {
-              this.selectedOss = [];
-              // this.clearSelectAll();
-              this.init();
-              ElMessage.success("批量删除文件成功");
-            }
-          });
-      }).catch(() => {});
-    },
-    // 单个删除文件
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除文件 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
-          deleteFile(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除文件 " + v.name + " 成功");
-              this.getDataList();
+  },
+]);
+const data = ref([]); // 表单数据
+const total = ref(0); // 表单数据总数
+const pageSizeOpts = ref([5, 10, 20]); // 页码展示项
+const list = ref([]); // 列表
+//树结构
+const treeData = ref([]);
+const treeDataDefault = ref([]);
+const treeRenderKey = ref(0);
+const selectedGroupData = ref("");
+const insertOrUpdate = ref("insert");
+const groupLoading = ref(false);
+// 图片列表
+const selectedOss = ref([]);
+const buttonProps = {type: 'default', size: 'small',};
+// 历史遗留死代码：模板未使用 myData，其 render 中的 append 从未定义，原样保留
+const myData = ref([
+  {
+    title: 'parent 1',
+    expand: true,
+    render: (h, {root, node, data}) => {
+      return h('span', {style: {display: 'inline-block', width: '100%'}}, [
+        h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
+          [h("Button", {
+            ...buttonProps,
+            icon: 'ios-add',
+            type: 'primary',
+            style: {width: '64px'},
+            onClick: () => {
+              // eslint-disable-next-line no-undef -- 历史遗留：append 从未定义，原样保留
+              append(data)
             }
           })
-      }).catch(() => {});
+          ])
+      ]);
     },
-    // 提交修改文件名
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let params = {
-            id: this.form.id,
-            key: this.oldKey,
-            newKey: this.form.fileKey,
-            newName: this.form.name,
-          };
-          renameFile(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    // 修改文件名modal
-    rename(v) {
-      this.modalTitle = "编辑文件名";
-      // 转换null为""
-      for (let attr in v) {
-        if (v[attr] == null) {
-          v[attr] = "";
-        }
+    children: [
+      {
+        title: 'child 1-1',
+        expand: true,
+        children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+      },
+      {
+        title: 'child 1-2',
+        expand: true,
+        children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
       }
-      let str = JSON.stringify(v);
-      let data = JSON.parse(str);
-      this.form = data;
-      this.oldKey = data.fileKey;
-      this.modalVisible = true;
-    },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-      this.totalSize = "";
-    },
-    // 选中回调
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-      let size = 0;
-      e.forEach((item) => {
-        size += item.fileSize * 1.0;
-      });
-      this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-      this.$emit("selected", e)
-    },
-  },
-  mounted() {
-    if (!this.isComponent) {
-      // 是组件的话，初始化不调用接口
-      this.init();
-    } else {
-      this.searchForm.pageSize = 18; // 页面大小
+    ]
+  }
+]);
+
+// 模板 ref：up/form/formValidate 与顶层变量重名，改名避免互相覆盖
+const upRef = ref(null);
+const formRef = ref(null);
+const formValidateRef = ref(null);
+const dplayerRef = ref(null);
+// 历史遗留：模板中不存在 ref="table"，clearSelectAll 调用会报错，原样保留
+const tableRef = ref(null);
+
+watch(selectImage, (val) => {
+  if (val) {
+    if (props.isComponent) {
+      activeRoleTab.value = "MANAGER";
+      searchForm.userEnums = "MANAGER";
+      init();
+    } else if (!data.value.length) {
+      init();
     }
-  },
-};
+  }
+});
+watch(
+  () => props.choose,
+  (val) => {
+    if (val) selectImage.value = val;
+  }
+);
+watch(selectedOss, (val) => {
+  if (val && val.length && !(props.isComponent && selectImage.value)) {
+    emit("callback", { url: val[val.length - 1].split(",")[1] });
+  }
+});
+// 初始化监听 是否清空所选图片
+watch(
+  () => props.initialize,
+  (val) => {
+    if (val && props.isComponent) {
+      selectedOss.value = [];
+      activeRoleTab.value = "MANAGER";
+      searchForm.userEnums = "MANAGER";
+      delete searchForm.fileDirectoryId;
+      selectedGroupData.value = "";
+    }
+  }
+);
+
+const canShowGroups = computed(() => {
+  return activeRoleTab.value === "MANAGER";
+});
+const canUploadImages = computed(() => {
+  return activeRoleTab.value === "MANAGER";
+});
+const uploadButtonText = computed(() => {
+  const textMap = {
+    IMAGE: "上传图片",
+    VIDEO: "上传视频",
+    FILE: "上传文件",
+  };
+  return textMap[activeCategoryTab.value] || "上传图片";
+});
+const uploadData = computed(() => {
+  const data = {
+    userEnums: activeRoleTab.value,
+    directoryType: activeRoleTab.value,
+  };
+  const directoryId = searchForm.fileDirectoryId;
+  if (directoryId && directoryId !== "0") {
+    data.directoryPath = directoryId;
+  }
+  return data;
+});
+
+function beforeUpload(file) {
+  if (!canUploadImages.value) {
+    ElMessage.warning("仅管理员模块支持上传图片");
+    return false;
+  }
+  const maxSize = 20480 * 1024;
+  if (file && file.size > maxSize) {
+    handleMaxSize(file);
+    return false;
+  }
+  return true;
+}
+function handleTreeNodeClick(data) {
+  if (data) {
+    handleCateChange([data]);
+  }
+}
+function onTreeDropdownCommand(cmd, data) {
+  selectedGroupData.value = data;
+  if (cmd === "edit") {
+    handleContextMenuEdit(null, null, data);
+  } else if (cmd === "delete") {
+    handleContextMenuDelete();
+  }
+}
+function onMouseOver(item, index) {
+  data.value[index].isShowPreview = true;
+  proxy.$forceUpdate();
+}
+function onMouseOut(item, index) {
+  data.value[index].isShowPreview = false;
+}
+function handleRoleTabChange(name) {
+  activeRoleTab.value = name;
+  searchForm.pageNumber = 1;
+  searchForm.userEnums = name;
+  delete searchForm.fileDirectoryId;
+  selectedGroupData.value = "";
+  groupFormValidate.value.id = "";
+  groupFormValidate.value.level = 0;
+  selectedOss.value = [];
+  updateTreeDataByRole();
+  getDataList();
+}
+function handleCategoryTabChange(name) {
+  activeCategoryTab.value = name;
+  searchForm.fileCategory = name;
+  searchForm.fileType = "";
+  searchForm.pageNumber = 1;
+  if (showType.value === "list") {
+    searchForm.pageSize = 20;
+  } else {
+    searchForm.pageSize = 12;
+  }
+  getDataList();
+}
+function updateTreeDataByRole() {
+  const currentTree = filterTreeByRole(treeDataDefault.value, activeRoleTab.value);
+  treeData.value = [
+    {
+      title: "全部图片",
+      label: "全部分类",
+      value: "0",
+      type: activeRoleTab.value,
+      level: 0,
+      children: [],
+      id: "0",
+      categoryId: 0,
+    },
+    ...currentTree,
+  ];
+  treeRenderKey.value += 1;
+}
+function filterTreeByRole(tree = [], role) {
+  if (!tree || !tree.length) return [];
+  return tree
+    .filter((item) => item.type === role)
+    .map((item) => ({
+      ...item,
+      children: [],
+    }));
+}
+// 复选框值改变时触发
+function selectOssChange(e) {
+  if (props.maxSelect === 1 && e.length > 1) {
+    const last = e[e.length - 1];
+    selectedOss.value = [last];
+    e = [last];
+  }
+  if (e) {
+    selectList.value = e.map(item => {
+      return {id: item.split(',')[0]}
+    });
+    selectCount.value = e.length;
+    // let size = 0;
+    // e.forEach((item) => {size += item.fileSize * 1.0;});
+    // totalSize.value = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+    emit("selected", e);
+  }
+}
+function handleCardClick(item, event) {
+  if (!(props.isComponent && selectImage.value)) return;
+  if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
+    return;
+  }
+  const key = `${item.id},${item.url}`;
+  let next;
+  if (props.maxSelect === 1) {
+    next = selectedOss.value.includes(key) ? [] : [key];
+  } else if (selectedOss.value.includes(key)) {
+    next = selectedOss.value.filter((k) => k !== key);
+  } else {
+    next = [...selectedOss.value, key];
+  }
+  selectedOss.value = next;
+  selectOssChange(next);
+}
+// 页码改变时回调
+function pageChange(value) {
+  selectedOss.value = [];
+  searchForm.pageNumber = value;
+  getDataList();
+}
+// 自定义tree节点显示内容和交互
+function renderContent(h, {root, node, data}) {
+  if (data.value === '0') {
+    return h('span', {style: {display: 'inline-block', width: '100%'}},
+      [
+        h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
+      ]
+    );
+  } else {
+    return h('span', {style: {display: 'inline-block', width: '100%'}},
+      [
+        h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}},
+          [
+            h("Dropdown", {style: {marginLeft: "4px"}},
+              [
+                h("Icon", {
+                  props: {type: 'ios-more', size: "20",},
+                  style: {display: 'inline-block'},
+                  on: {
+                    click: () => {
+                    }
+                  }
+                }),
+                h("DropdownMenu", {
+                  slot: "list"
+                }, [
+                  h("DropdownItem", {
+                    nativeOn: {
+                      click: () => {
+                        handleContextMenuEdit(root, node, data)
+                      }
+                    }
+                  }, "编辑"),
+                  h("DropdownItem", {
+                    nativeOn: {
+                      click: () => {
+                        handleContextMenuDelete()
+                      }
+                    }
+                  }, "删除"),
+                ])
+              ]),
+          ])
+      ]
+    );
+  }
+
+}
+
+
+function handleContextMenu(val) {
+  selectedGroupData.value = val;
+}
+// 编辑分组
+function handleContextMenuEdit(root, node, data) {
+  insertOrUpdate.value = "update";
+  enableGroup.value = true;
+  groupFormValidate.value.id = data.value;
+  groupFormValidate.value.directoryName = data.title || data.label;
+  groupFormValidate.value.level = 0;
+  groupFormValidate.value.parentId = "0";
+}
+// 删除分组
+async function handleContextMenuDelete(val) {
+  ElMessageBox.confirm("是否删除该分组", "提示", { type: "warning" }).then(async () => {
+      const res = await delFileDirectory(selectedGroupData.value.value);
+      if (res.success) {
+        ElMessage.success("删除成功!");
+        getDataList();
+        getAllList();
+      }
+  }).catch(() => {});
+}
+async function submitAddGroup() {
+  formValidateRef.value.validate(async (valid) => {
+    if (valid) {
+      let res;
+      const params = {
+        directoryName: groupFormValidate.value.directoryName,
+        level: 0,
+        parentId: "0",
+        directoryType: activeRoleTab.value,
+      };
+      if (insertOrUpdate.value === "insert") {
+        res = await addFileDirectory(params);
+      } else {
+        params.id = groupFormValidate.value.id;
+        res = await updateFileDirectory(params);
+      }
+
+      if (res.success) {
+        ElMessage.success("操作成功!");
+        enableGroup.value = false;
+        getAllList();
+      }
+      } else {
+      ElMessage.error("请填写完整信息!");
+    }
+  });
+}
+function handleClickAddGroup() {
+  insertOrUpdate.value = "insert";
+  groupFormValidate.value = {
+    id: "",
+    level: 0,
+    parentId: "0",
+    directoryName: "",
+  };
+  enableGroup.value = true;
+}
+function copyFileUrl(row) {
+  const textArea = document.createElement("textarea");
+  textArea.value = row.url;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    ElMessage.success("复制成功");
+  } catch (err) {
+    console.error("Unable to copy to clipboard", err);
+  }
+  document.body.removeChild(textArea);
+}
+
+// 获取全部文件目录
+function getAllList(parent_id) {
+  loading.value = true;
+  getFileDirectory(parent_id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      treeDataDefault.value = getTree(res.result);
+      updateTreeDataByRole();
+    }
+  });
+}
+// 文件目录分类格式化：仅展示一级分组
+function getTree(tree = []) {
+  const flat = [];
+  const walk = (nodes) => {
+    if (!nodes || !nodes.length) return;
+    nodes.forEach((item) => {
+      flat.push({
+        title: item.directoryName,
+        value: item.id,
+        type: item.directoryType,
+        label: item.directoryName,
+        level: 0,
+        expand: false,
+        selected: false,
+        contextmenu: false,
+        parentId: "0",
+        children: [],
+      });
+      if (item.children && item.children.length) {
+        walk(item.children);
+      }
+    });
+  };
+  walk(tree);
+  return flat;
+}
+
+// 选择分类回调
+function handleCateChange(data) {
+  if (data) {
+    selectedGroupData.value = data[0];
+    let {value, type, level} = data[0];
+    list.value.push({value, type, level});
+    searchForm.fileDirectoryId = value;
+    if (value === "0" || value === 0) {
+      delete searchForm.fileDirectoryId;
+    }
+    searchForm.userEnums = type || activeRoleTab.value;
+    getDataList();
+    selectedOss.value = [];
+  }
+}
+/**
+ * 选择
+ */
+function selectedParams(val) {
+  emit("callback", val);
+}
+function handleSelectConfirm() {
+  if (!selectedOss.value.length) {
+    ElMessage.warning("请选择图片");
+    return;
+  }
+  const last = selectedOss.value[selectedOss.value.length - 1];
+  emit("callback", { url: last.split(",")[1] });
+}
+function handleSelectCancel() {
+  selectedOss.value = [];
+  emit("callback", { url: "" });
+}
+// 初始化数据
+function init() {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+  searchForm.userEnums = activeRoleTab.value;
+  searchForm.fileCategory = activeCategoryTab.value;
+  getDataList();
+  getAllList();
+}
+// 查看大图
+function showPic(v) {
+  prepareFileMeta(v);
+  picTitle.value = v.name || "图片预览";
+  picVisible.value = true;
+}
+// 查看文件（PDF 等）
+function showFile(v) {
+  prepareFileMeta(v);
+  fileTitle.value = v.name || "文件预览";
+  fileVisible.value = true;
+}
+// 查看视频
+function showVideo(v) {
+  prepareFileMeta(v);
+  videoTitle.value = v.name || "视频预览";
+  pendingVideoUrl.value = v.url;
+  videoVisible.value = true;
+}
+function initDPlayer() {
+  const container = dplayerRef.value;
+  if (!container || !pendingVideoUrl.value) return;
+  if (dp) {
+    dp.destroy();
+    dp = null;
+  }
+  dp = new DPlayer({
+    container,
+    screenshot: true,
+    video: {
+      url: pendingVideoUrl.value,
+    },
+  });
+}
+// 关闭视频
+function closeVideo() {
+  if (dp) {
+    dp.destroy();
+    dp = null;
+  }
+  pendingVideoUrl.value = "";
+}
+// 分页 改变页码
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+// 分页 改变页数
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+// 排序
+function changeSort(e) {
+  searchForm.sort = e.key;
+  searchForm.order = e.order;
+  if (e.order == "normal") {
+    searchForm.order = "";
+  }
+  getDataList();
+}
+// 起止时间筛选已移除
+// 改变查看方式
+function changeShowType() {
+  searchForm.pageNumber = 1;
+  if (showType.value == "list") {
+    searchForm.pageSize = 20;
+  } else {
+    searchForm.pageSize = 12;
+  }
+  getDataList();
+}
+// 获取列表数据
+function getDataList(type = null) {
+  if (showType.value == "list") {
+    pageSizeOpts.value = [10, 20, 50];
+  } else {
+    pageSizeOpts.value = [12, 24, 48];
+  }
+  loading.value = true;
+  getFileListData(searchForm)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else {
+        data.value = [];
+        total.value = 0;
+      }
+    })
+    .catch(() => {
+      data.value = [];
+      total.value = 0;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+// 兼容外部按场景切换分类（如装修选图/选视频）
+function changeFileType() {
+  const categoryMap = {
+    pic: "IMAGE",
+    video: "VIDEO",
+    file: "FILE",
+    all: "IMAGE",
+  };
+  const category = categoryMap[fileType.value] || "IMAGE";
+  activeCategoryTab.value = category;
+  handleCategoryTabChange(category);
+}
+function isImageFile(row) {
+  return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
+}
+function isVideoFile(row) {
+  return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
+}
+function isPdfFile(row) {
+  return (
+    row?.fileType === "application/pdf" ||
+    (row?.name && row.name.toLowerCase().endsWith(".pdf"))
+  );
+}
+function previewFile(item) {
+  if (isVideoFile(item)) {
+    showVideo(item);
+  } else if (isImageFile(item)) {
+    showPic(item);
+  } else {
+    showFile(item);
+  }
+}
+function prepareFileMeta(v) {
+  file.value = v;
+  file.value.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+}
+// 上传文件超过大小限制
+function handleMaxSize() {
+  ElMessage.warning("所选文件大小过大，不得超过 20MB");
+}
+// 上传成功回调
+function handleSuccess(res, file) {
+  if (!canUploadImages.value) {
+    ElMessage.warning("仅管理员模块支持上传图片");
+    return;
+  }
+  if (res.success) {
+    ElMessage.success("上传文件 " + file.name + " 成功");
+    getDataList();
+  } else {
+    ElMessage.error(res.message);
+  }
+}
+// 上传失败回调
+function handleError(error, file, fileList) {
+  ElMessage.error(error.toString());
+}
+// 清空上传文件
+function clearFiles() {
+  upRef.value.clearFiles();
+}
+// 取消修改文件名
+function handleCancel() {
+  modalVisible.value = false;
+}
+// 下载文件
+function download(v) {
+  window.open(
+    v.url + "?attname=&response-content-type=application/octet-stream"
+  );
+}
+// 批量删除文件
+function removeAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未选择要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 个文件?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteFile(ids).then((res) => {
+        if (res.success) {
+          selectedOss.value = [];
+          // clearSelectAll();
+          init();
+          ElMessage.success("批量删除文件成功");
+        }
+      });
+  }).catch(() => {});
+}
+// 单个删除文件
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除文件 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
+      deleteFile(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除文件 " + v.name + " 成功");
+          getDataList();
+        }
+      })
+  }).catch(() => {});
+}
+// 提交修改文件名
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      let params = {
+        id: form.value.id,
+        key: oldKey.value,
+        newKey: form.value.fileKey,
+        newName: form.value.name,
+      };
+      renameFile(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+// 修改文件名modal
+function rename(v) {
+  modalTitle.value = "编辑文件名";
+  // 转换null为""
+  for (let attr in v) {
+    if (v[attr] == null) {
+      v[attr] = "";
+    }
+  }
+  let str = JSON.stringify(v);
+  let data = JSON.parse(str);
+  form.value = data;
+  oldKey.value = data.fileKey;
+  modalVisible.value = true;
+}
+// 清除选中状态
+function clearSelectAll() {
+  tableRef.value.selectAll(false);
+  totalSize.value = "";
+}
+// 选中回调
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+  let size = 0;
+  e.forEach((item) => {
+    size += item.fileSize * 1.0;
+  });
+  totalSize.value = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+  emit("selected", e)
+}
+
+onMounted(() => {
+  if (!props.isComponent) {
+    // 是组件的话，初始化不调用接口
+    init();
+  } else {
+    searchForm.pageSize = 18; // 页面大小
+  }
+});
+
+// 父组件通过 ref 设置 selectImage 开启选图模式；decorate.vue 还会写 fileType 并调用 changeFileType
+defineExpose({ selectImage, fileType, changeFileType });
 </script>
diff --git a/manager/src/views/sys/role-manage/roleManage.vue b/manager/src/views/sys/role-manage/roleManage.vue
index cd8fee99f..39ebebf61 100644
--- a/manager/src/views/sys/role-manage/roleManage.vue
+++ b/manager/src/views/sys/role-manage/roleManage.vue
@@ -7,7 +7,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -56,7 +56,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
+      <el-form ref="roleFormRef" :model="roleForm" label-width="80px" :rules="roleFormValidate">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="roleForm.name" />
         </el-form-item>
@@ -81,7 +81,7 @@
     >
       <div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
         <el-tree
-          ref="permTree"
+          ref="permTreeRef"
           :key="permTreeKey"
           :data="permData"
           :props="{ label: 'title', children: 'children', disabled: 'disabled' }"
@@ -147,12 +147,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
-  getRoleList,
+  getRoleList as fetchRoleList,
   getAllPermissionList,
-  addRole,
+  addRole as addRoleReq,
   editRole,
   deleteRole,
   loadDepartment,
@@ -160,354 +161,355 @@ import {
   saveRoleMenu,
 } from "@/api/index";
 import util from "@/libs/util.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "role-manage",
-  data() {
-    return {
-      superModelLoading: false,
-      selectIsSuperModel: false,
-      rolePermsWay: [],
-      openLevel: "0",
-      loading: true,
-      treeLoading: true,
-      depTreeLoading: true,
-      submitPermLoading: false,
-      submitDepLoading: false,
-      sortColumn: "",
-      sortType: "desc",
-      modalType: 0,
-      roleModalVisible: false,
-      permModalVisible: false,
-      depModalVisible: false,
-      modalTitle: "",
-      roleForm: {
-        name: "",
-        description: "",
-      },
-      roleFormValidate: {
-        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-      },
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      pageNumber: 1,
-      pageSize: 20,
-      total: 0,
-      permData: [],
-      editRolePermId: "",
-      selectAllFlag: false,
-      depData: [],
-      dataType: 0,
-      editDepartments: [],
-      saveRoleWay: [],
-      permTreeKey: 0,
-      permCheckedKeys: [],
-      permExpandedKeys: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getRoleList();
-      this.getPermList();
-    },
-    changePage() {
-      this.getRoleList();
-      this.clearSelectAll();
-    },
-    changePageSize() {
-      this.pageNumber = 1;
-      this.getRoleList();
-    },
-    changeSort(e) {
-      this.sortColumn = e.prop;
-      this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      if (!e.order) {
-        this.sortType = "";
+defineOptions({ name: "role-manage" });
+
+const appStore = useAppStore();
+
+const tableRef = ref(null);
+const roleFormRef = ref(null);
+const permTreeRef = ref(null);
+
+const superModelLoading = ref(false);
+const selectIsSuperModel = ref(false);
+const rolePermsWay = ref([]);
+const openLevel = ref("0");
+const loading = ref(true);
+const treeLoading = ref(true);
+const depTreeLoading = ref(true);
+const submitPermLoading = ref(false);
+const submitDepLoading = ref(false);
+const sortColumn = ref("");
+const sortType = ref("desc");
+const modalType = ref(0);
+const roleModalVisible = ref(false);
+const permModalVisible = ref(false);
+const depModalVisible = ref(false);
+const modalTitle = ref("");
+const roleForm = ref({
+  name: "",
+  description: "",
+});
+const roleFormValidate = {
+  name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+};
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const pageNumber = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+const permData = ref([]);
+const editRolePermId = ref("");
+const selectAllFlag = ref(false);
+const depData = ref([]);
+const dataType = ref(0);
+const editDepartments = ref([]);
+const saveRoleWay = ref([]);
+const permTreeKey = ref(0);
+const permCheckedKeys = ref([]);
+const permExpandedKeys = ref([]);
+
+function init() {
+  getRoleList();
+  getPermList();
+}
+function changePage() {
+  getRoleList();
+  clearSelectAll();
+}
+function changePageSize() {
+  pageNumber.value = 1;
+  getRoleList();
+}
+function changeSort(e) {
+  sortColumn.value = e.prop;
+  sortType.value = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  if (!e.order) {
+    sortType.value = "";
+  }
+  getRoleList();
+}
+function setRole(val) {
+  let enable;
+  val == "onlyView" ? (enable = 0) : (enable = 1);
+  saveRoleWay.value.map((item) => {
+    item.isSuper = enable;
+  });
+}
+function getRoleList() {
+  loading.value = true;
+  let params = {
+    pageNumber: pageNumber.value,
+    pageSize: pageSize.value,
+    sort: sortColumn.value,
+    order: sortType.value,
+  };
+  fetchRoleList(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getPermList() {
+  treeLoading.value = true;
+  getAllPermissionList().then((res) => {
+    if (res.success) {
+      deleteDisableNode(res.result);
+      permData.value = res.result;
+    }
+    treeLoading.value = false;
+  });
+}
+function deleteDisableNode(permData) {
+  permData.forEach(function (e) {
+    if (e.status == -1) {
+      e.title = "[已禁用] " + e.title;
+      e.disabled = true;
+    }
+    if (e.children && e.children.length > 0) {
+      deleteDisableNode(e.children);
+    }
+  });
+}
+function submitRole() {
+  roleFormRef.value.validate((valid) => {
+    if (valid) {
+      if (modalType.value == 0) {
+        submitLoading.value = true;
+        addRoleReq(roleForm.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            ElMessage.success("操作成功");
+            getRoleList();
+            roleModalVisible.value = false;
+          }
+        });
+      } else {
+        submitLoading.value = true;
+        roleForm.value.roleId = roleForm.value.id;
+        editRole(roleForm.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            ElMessage.success("操作成功");
+            getRoleList();
+            roleModalVisible.value = false;
+          }
+        });
       }
-      this.getRoleList();
-    },
-    setRole(val) {
-      let enable;
-      val == "onlyView" ? (enable = 0) : (enable = 1);
-      this.saveRoleWay.map((item) => {
-        item.isSuper = enable;
-      });
-    },
-    getRoleList() {
-      this.loading = true;
-      let params = {
-        pageNumber: this.pageNumber,
-        pageSize: this.pageSize,
-        sort: this.sortColumn,
-        order: this.sortType,
-      };
-      getRoleList(params).then((res) => {
-        this.loading = false;
+    }
+  });
+}
+function addRole() {
+  modalType.value = 0;
+  modalTitle.value = "添加角色";
+  roleForm.value = {
+    name: "",
+    description: "",
+  };
+  roleModalVisible.value = true;
+  nextTick(() => {
+    roleFormRef.value?.resetFields();
+    roleFormRef.value?.clearValidate();
+  });
+}
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑角色";
+  for (let attr in v) {
+    if (v[attr] == null) {
+      v[attr] = "";
+    }
+  }
+  const roleInfo = JSON.parse(JSON.stringify(v));
+  roleForm.value = roleInfo;
+  roleModalVisible.value = true;
+  nextTick(() => {
+    roleFormRef.value?.clearValidate();
+  });
+}
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除角色 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
+      deleteRole(v.id).then((res) => {
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          ElMessage.success("删除成功");
+          getRoleList();
         }
       });
-    },
-    getPermList() {
-      this.treeLoading = true;
-      getAllPermissionList().then((res) => {
-        if (res.success) {
-          this.deleteDisableNode(res.result);
-          this.permData = res.result;
-        }
-        this.treeLoading = false;
+  }).catch(() => {});
+}
+function clearSelectAll() {
+  tableRef.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未选择要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 条数据?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
       });
-    },
-    deleteDisableNode(permData) {
-      let that = this;
-      permData.forEach(function (e) {
+      ids = ids.substring(0, ids.length - 1);
+      deleteRole(ids).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+          clearSelectAll();
+          getRoleList();
+        }
+      });
+  }).catch(() => {});
+}
+async function editPerm(v) {
+  permData.value.map((item) => {
+    item.children.length != 0
+      ? item.children.map((child) => {
+          child.children.length != 0
+            ? child.children.map((kid) => {
+                delete kid.isSuper;
+              })
+            : "";
+          delete child.isSuper;
+        })
+      : "";
+    delete item.isSuper;
+  });
+
+  if (treeLoading.value) {
+    ElMessage.warning("菜单权限数据加载中，请稍后点击查看");
+    return;
+  }
+  editRolePermId.value = v.id;
+  modalTitle.value = "分配 " + v.name + " 的菜单权限";
+  let rolePerms;
+  let res = await selectRoleMenu(v.id);
+  if (res.result) {
+    rolePerms = res.result;
+    rolePermsWay.value = res.result;
+  }
+  permCheckedKeys.value = collectCheckedKeys(permData.value, rolePerms);
+  permExpandedKeys.value = computeExpandedKeys(openLevel.value);
+  permTreeKey.value += 1;
+  permModalVisible.value = true;
+}
+function collectCheckedKeys(permData, rolePerms) {
+  const keys = [];
+  const walk = (nodes) => {
+    nodes.forEach((p) => {
+      if (hasPerm(p, rolePerms) && p.status != -1) {
+        if (p.children && p.children.length === 0) {
+          keys.push(p.id);
+        }
+      }
+      if (p.children && p.children.length > 0) {
+        walk(p.children);
+      }
+    });
+  };
+  walk(permData);
+  return keys;
+}
+function hasPerm(p, rolePerms) {
+  if (!rolePerms) return false;
+  let flag = false;
+  for (let i = 0; i < rolePerms.length; i++) {
+    if (p.id == rolePerms[i].menuId) {
+      p.isSuper = rolePerms[i].isSuper;
+      flag = true;
+      break;
+    }
+  }
+  return flag;
+}
+function submitPermEdit() {
+  saveRoleWay.value = [];
+  selectIsSuperModel.value = true;
+  const tree = permTreeRef.value;
+  const selectedNodes = [
+    ...tree.getCheckedNodes(false, true),
+  ];
+  let way = [];
+  selectedNodes.forEach((e) => {
+    let perm = {
+      title: e.title,
+      isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
+      menuId: e.id,
+      roleId: editRolePermId.value,
+    };
+    way.push(perm);
+    saveRoleWay.value = way;
+  });
+}
+function saveRole() {
+  superModelLoading.value = true;
+  saveRoleMenu(editRolePermId.value, saveRoleWay.value).then((res) => {
+    superModelLoading.value = false;
+    if (res.success) {
+      ElMessage.success("操作成功");
+      appStore.setAdded(false);
+      util.initRouter();
+      getRoleList();
+      permModalVisible.value = false;
+      selectIsSuperModel.value = false;
+    }
+  });
+}
+function loadData(item, callback) {
+  loadDepartment(item.id, { openDataFilter: false }).then((res) => {
+    if (res.success) {
+      res.result.forEach(function (e) {
+        e.checked = false;
+        if (e.isParent) {
+          e.loading = false;
+          e.children = [];
+        }
         if (e.status == -1) {
           e.title = "[已禁用] " + e.title;
           e.disabled = true;
         }
-        if (e.children && e.children.length > 0) {
-          that.deleteDisableNode(e.children);
-        }
       });
-    },
-    submitRole() {
-      this.$refs.roleForm.validate((valid) => {
-        if (valid) {
-          if (this.modalType == 0) {
-            this.submitLoading = true;
-            addRole(this.roleForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getRoleList();
-                this.roleModalVisible = false;
-              }
-            });
-          } else {
-            this.submitLoading = true;
-            this.roleForm.roleId = this.roleForm.id;
-            editRole(this.roleForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getRoleList();
-                this.roleModalVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    addRole() {
-      this.modalType = 0;
-      this.modalTitle = "添加角色";
-      this.roleForm = {
-        name: "",
-        description: "",
-      };
-      this.roleModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.roleForm?.resetFields();
-        this.$refs.roleForm?.clearValidate();
-      });
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑角色";
-      for (let attr in v) {
-        if (v[attr] == null) {
-          v[attr] = "";
-        }
+      callback(res.result);
+    }
+  });
+}
+function computeExpandedKeys(level) {
+  const keys = [];
+  const walk = (nodes, depth) => {
+    nodes.forEach((n) => {
+      if (level === "0") {
+        keys.push(n.id);
+      } else if (level === "2" && depth < 1) {
+        keys.push(n.id);
+      } else if (level === "3" && depth < 2) {
+        keys.push(n.id);
       }
-      const roleInfo = JSON.parse(JSON.stringify(v));
-      this.roleForm = roleInfo;
-      this.roleModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.roleForm?.clearValidate();
-      });
-    },
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除角色 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
-          deleteRole(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.getRoleList();
-            }
-          });
-      }).catch(() => {});
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未选择要删除的数据");
-        return;
+      if (n.children && n.children.length) {
+        walk(n.children, depth + 1);
       }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 条数据?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteRole(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.clearSelectAll();
-              this.getRoleList();
-            }
-          });
-      }).catch(() => {});
-    },
-    async editPerm(v) {
-      this.permData.map((item) => {
-        item.children.length != 0
-          ? item.children.map((child) => {
-              child.children.length != 0
-                ? child.children.map((kid) => {
-                    delete kid.isSuper;
-                  })
-                : "";
-              delete child.isSuper;
-            })
-          : "";
-        delete item.isSuper;
-      });
+    });
+  };
+  if (level !== "1") {
+    walk(permData.value, 0);
+  }
+  return keys;
+}
+function changeOpen(v) {
+  permExpandedKeys.value = computeExpandedKeys(v);
+  permTreeKey.value += 1;
+}
 
-      if (this.treeLoading) {
-        ElMessage.warning("菜单权限数据加载中，请稍后点击查看");
-        return;
-      }
-      this.editRolePermId = v.id;
-      this.modalTitle = "分配 " + v.name + " 的菜单权限";
-      let rolePerms;
-      let res = await selectRoleMenu(v.id);
-      if (res.result) {
-        rolePerms = res.result;
-        this.rolePermsWay = res.result;
-      }
-      this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
-      this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
-      this.permTreeKey += 1;
-      this.permModalVisible = true;
-    },
-    collectCheckedKeys(permData, rolePerms) {
-      const keys = [];
-      const walk = (nodes) => {
-        nodes.forEach((p) => {
-          if (this.hasPerm(p, rolePerms) && p.status != -1) {
-            if (p.children && p.children.length === 0) {
-              keys.push(p.id);
-            }
-          }
-          if (p.children && p.children.length > 0) {
-            walk(p.children);
-          }
-        });
-      };
-      walk(permData);
-      return keys;
-    },
-    hasPerm(p, rolePerms) {
-      if (!rolePerms) return false;
-      let flag = false;
-      for (let i = 0; i < rolePerms.length; i++) {
-        if (p.id == rolePerms[i].menuId) {
-          p.isSuper = rolePerms[i].isSuper;
-          flag = true;
-          break;
-        }
-      }
-      return flag;
-    },
-    submitPermEdit() {
-      this.saveRoleWay = [];
-      this.selectIsSuperModel = true;
-      const tree = this.$refs.permTree;
-      const selectedNodes = [
-        ...tree.getCheckedNodes(false, true),
-      ];
-      let way = [];
-      selectedNodes.forEach((e) => {
-        let perm = {
-          title: e.title,
-          isSuper: e.isSuper ? (e.isSuper = 1) : (e.isSuper = 0) || 0,
-          menuId: e.id,
-          roleId: this.editRolePermId,
-        };
-        way.push(perm);
-        this.saveRoleWay = way;
-      });
-    },
-    saveRole() {
-      this.superModelLoading = true;
-      saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
-        this.superModelLoading = false;
-        if (res.success) {
-          ElMessage.success("操作成功");
-          this.$store.commit("setAdded", false);
-          util.initRouter(this);
-          this.getRoleList();
-          this.permModalVisible = false;
-          this.selectIsSuperModel = false;
-        }
-      });
-    },
-    loadData(item, callback) {
-      loadDepartment(item.id, { openDataFilter: false }).then((res) => {
-        if (res.success) {
-          res.result.forEach(function (e) {
-            e.checked = false;
-            if (e.isParent) {
-              e.loading = false;
-              e.children = [];
-            }
-            if (e.status == -1) {
-              e.title = "[已禁用] " + e.title;
-              e.disabled = true;
-            }
-          });
-          callback(res.result);
-        }
-      });
-    },
-    computeExpandedKeys(level) {
-      const keys = [];
-      const walk = (nodes, depth) => {
-        nodes.forEach((n) => {
-          if (level === "0") {
-            keys.push(n.id);
-          } else if (level === "2" && depth < 1) {
-            keys.push(n.id);
-          } else if (level === "3" && depth < 2) {
-            keys.push(n.id);
-          }
-          if (n.children && n.children.length) {
-            walk(n.children, depth + 1);
-          }
-        });
-      };
-      if (level !== "1") {
-        walk(this.permData, 0);
-      }
-      return keys;
-    },
-    changeOpen(v) {
-      this.permExpandedKeys = this.computeExpandedKeys(v);
-      this.permTreeKey += 1;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .role-list {
diff --git a/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue b/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
index f6e91effe..e89363586 100644
--- a/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/CONNECT_SETTING.vue
@@ -6,7 +6,7 @@
           <el-divider content-position="left">登录设置</el-divider>
           <div class="form-list">
             <el-form
-              ref="formValidate"
+              ref="formValidateRef"
               label-width="140px"
               label-position="right"
               :model="formValidate"
@@ -31,60 +31,61 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: {
-        pc: "",
-        wap: "",
-        callbackUrl: "",
-      },
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      this.formValidate = { ...setting };
-      Object.keys(this.formValidate).forEach((item) => {
-        if (item.indexOf("pId") < 0) {
-          this.ruleValidate[item] = [
-            {
-              required: true,
-              message: "请填写必填项",
-              trigger: "blur",
-            },
-          ];
-        }
-      });
-    },
-  },
-};
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = reactive({});
+const formValidate = ref({
+  pc: "",
+  wap: "",
+  callbackUrl: "",
+});
+// 模板 ref（原与 data 字段 formValidate 同名，改名避免互相覆盖）
+const formValidateRef = ref(null);
+
+const { proxy } = getCurrentInstance();
+
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  formValidate.value = { ...setting };
+  Object.keys(formValidate.value).forEach((item) => {
+    if (item.indexOf("pId") < 0) {
+      ruleValidate[item] = [
+        {
+          required: true,
+          message: "请填写必填项",
+          trigger: "blur",
+        },
+      ];
+    }
+  });
+}
+
+// submit 为对外暴露的公共方法（供父组件通过 ref 调用）
+defineExpose({ submit });
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue b/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
index 757784e24..95446b9a9 100644
--- a/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/QQ_CONNECT.vue
@@ -21,7 +21,7 @@
             <div class="pay-list">
               <el-form
                 style="width: 100%"
-                ref="formValidate"
+                ref="formValidateRef"
                 :model="formValidate"
                 :rules="ruleValidate"
                 label-width="80px"
@@ -41,7 +41,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
@@ -51,54 +52,53 @@ const DEFAULT_QQ_CONNECT_ITEMS = [
   { clientType: "H5", appId: "", appKey: "" },
 ];
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      way: {
-        APP: "移动应用端",
-        H5: "移动端",
-        WECHAT_MP: "小程序端",
-        PC: "PC端",
-      },
-      formValidate: {},
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, {
-        qqConnectSettingItemList: this.formValidate,
-      }).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-          } else {
-          ElMessage.error("保存失败!");
-          }
-      });
-    },
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      const items = setting.qqConnectSettingItemList;
-      this.formValidate =
-        Array.isArray(items) && items.length ? items : DEFAULT_QQ_CONNECT_ITEMS;
-      this.ruleValidate = {
-        appId: [{ required: true, message: "请填写必填项", trigger: "blur" }],
-        appKey: [{ required: true, message: "请填写必填项", trigger: "blur" }],
-      };
-    },
-  },
+const props = defineProps(["res", "type"]);
+
+// handleSubmit 通过组件实例的 $refs 查询表单
+const { proxy } = getCurrentInstance();
+
+const ruleValidate = ref({});
+const way = {
+  APP: "移动应用端",
+  H5: "移动端",
+  WECHAT_MP: "小程序端",
+  PC: "PC端",
 };
+const formValidate = ref({});
+
+// 模板 ref 原名 formValidate，与 data 字段重名会互相覆盖，改名避免冲突
+const formValidateRef = ref(null);
+
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, {
+    qqConnectSettingItemList: formValidate.value,
+  }).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+      } else {
+      ElMessage.error("保存失败!");
+      }
+  });
+}
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  const items = setting.qqConnectSettingItemList;
+  formValidate.value =
+    Array.isArray(items) && items.length ? items : DEFAULT_QQ_CONNECT_ITEMS;
+  ruleValidate.value = {
+    appId: [{ required: true, message: "请填写必填项", trigger: "blur" }],
+    appKey: [{ required: true, message: "请填写必填项", trigger: "blur" }],
+  };
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue b/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
index bb7c9ffab..74e1fe332 100644
--- a/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
+++ b/manager/src/views/sys/setting-manage/authLogin/WECHAT_CONNECT.vue
@@ -21,7 +21,7 @@
             <div class="pay-list">
               <el-form
                 style="width: 100%"
-                ref="formValidate"
+                ref="formValidateRef"
                 :model="formValidate"
                 :rules="ruleValidate"
                 label-width="100px"
@@ -41,7 +41,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
@@ -53,54 +54,51 @@ const DEFAULT_WECHAT_CONNECT_ITEMS = [
   { clientType: "WECHAT_MP", appId: "", appSecret: "" },
 ];
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      way: {
-        APP: "APP",
-        H5: "手机网页（微商城）",
-        WECHAT_MP: "微信小程序",
-        PC: "WEB网页",
-      },
-      formValidate: {},
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, {
-        wechatConnectSettingItems: this.formValidate,
-      }).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-          } else {
-          ElMessage.error("保存失败!");
-          }
-      });
-    },
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      const items = setting.wechatConnectSettingItems;
-      this.formValidate =
-        Array.isArray(items) && items.length ? items : DEFAULT_WECHAT_CONNECT_ITEMS;
-      this.ruleValidate = {
-        appId: [{ required: true, message: "请填写必填项", trigger: "blur" }],
-        appSecret: [{ required: true, message: "请填写必填项", trigger: "blur" }],
-      };
-    },
-  },
-};
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = ref({});
+const way = reactive({
+  APP: "APP",
+  H5: "手机网页（微商城）",
+  WECHAT_MP: "微信小程序",
+  PC: "WEB网页",
+});
+const formValidate = ref({});
+
+const formValidateRef = ref(null);
+
+function submit(name) {
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+
+function setupSetting() {
+  setSetting(props.type, {
+    wechatConnectSettingItems: formValidate.value,
+  }).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+      } else {
+      ElMessage.error("保存失败!");
+      }
+  });
+}
+
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  const items = setting.wechatConnectSettingItems;
+  formValidate.value =
+    Array.isArray(items) && items.length ? items : DEFAULT_WECHAT_CONNECT_ITEMS;
+  ruleValidate.value = {
+    appId: [{ required: true, message: "请填写必填项", trigger: "blur" }],
+    appSecret: [{ required: true, message: "请填写必填项", trigger: "blur" }],
+  };
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue b/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
index a750ee69b..69d8063ae 100644
--- a/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
+++ b/manager/src/views/sys/setting-manage/pay/ALIPAY_PAYMENT.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="160px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="160px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="appId" prop="appId">
         <el-input maxlength="300" class="w200" v-model="formValidate.appId" />
       </el-form-item>
@@ -26,62 +26,60 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
-export default {
-  data() {
-    return {
-      ruleValidate: {}, // 验证规则
-      formValidate: { // 表单数据
-        accessKeyId: "",
-        accessKeySecret: "",
-        bucketName: "",
-        picLocation: "",
-        endPoint: "",
-        callbackUrl:"",
+
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = reactive({}); // 验证规则
+const formValidate = ref({ // 表单数据
+  accessKeyId: "",
+  accessKeySecret: "",
+  bucketName: "",
+  picLocation: "",
+  endPoint: "",
+  callbackUrl: "",
+});
+// 模板 ref：formValidate 与顶层变量重名，改名避免互相覆盖
+const formValidateRef = ref(null);
+
+function submit(name) {
+  // handleSubmit 通过 that.$refs[name] 取表单实例，此处以同名映射传入
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+// 保存设置
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+// 实例化数据
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  formValidate.value = { ...setting };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    // 保存设置
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    // 实例化数据
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      this.formValidate = { ...setting };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
index 44438d88b..010b600ae 100644
--- a/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
+++ b/manager/src/views/sys/setting-manage/pay/PAYMENT_SUPPORT.vue
@@ -37,7 +37,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
@@ -50,70 +51,66 @@ const DEFAULT_PAYMENT_SUPPORT_ITEMS = [
   { client: "WECHAT_MP", supports: [] },
 ];
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      way: {
-        APP: "移动应用端",
-        H5: "移动端",
-        WECHAT_MP: "小程序端",
-        PC: "PC端",
-      },
-      formValidate: [],
-      payWay: {
-        ALIPAY: "支付宝支付",
-        WECHAT: "微信支付",
-        WALLET: "余额支付",
-      },
-      supportForm: "",
-      checkSupport: {},
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    handleChangePayType(val) {
-      ElMessageBox.confirm("您是否修改此项？", "修改支付设置", { type: "warning" }).then(() => {
-        this.setupSetting();
-      }).catch(() => {
-        this.formValidate = JSON.parse(JSON.stringify(this.checkSupport));
-      });
-    },
-    setupSetting() {
-      setSetting(this.type, { paymentSupportItems: this.formValidate }).then((res) => {
-        if (res.success) {
-          this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      const items = setting.paymentSupportItems;
-      this.formValidate =
-        Array.isArray(items) && items.length ? items : DEFAULT_PAYMENT_SUPPORT_ITEMS;
-      this.checkSupport = JSON.parse(JSON.stringify(this.formValidate));
+const props = defineProps(["res", "type"]);
 
-      getPaymentSupportForm().then((res) => {
-        if (res.success && res.result) {
-          this.supportForm = res.result;
-        }
-      });
-    },
-  },
+// validate.js 未去 vm 化，handleSubmit 仍需组件实例读取 $refs
+const { proxy } = getCurrentInstance();
+
+const ruleValidate = ref({});
+const way = {
+  APP: "移动应用端",
+  H5: "移动端",
+  WECHAT_MP: "小程序端",
+  PC: "PC端",
 };
+const formValidate = ref([]);
+const payWay = {
+  ALIPAY: "支付宝支付",
+  WECHAT: "微信支付",
+  WALLET: "余额支付",
+};
+const supportForm = ref("");
+const checkSupport = ref({});
+
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function handleChangePayType(val) {
+  ElMessageBox.confirm("您是否修改此项？", "修改支付设置", { type: "warning" }).then(() => {
+    setupSetting();
+  }).catch(() => {
+    formValidate.value = JSON.parse(JSON.stringify(checkSupport.value));
+  });
+}
+function setupSetting() {
+  setSetting(props.type, { paymentSupportItems: formValidate.value }).then((res) => {
+    if (res.success) {
+      checkSupport.value = JSON.parse(JSON.stringify(formValidate.value));
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  const items = setting.paymentSupportItems;
+  formValidate.value =
+    Array.isArray(items) && items.length ? items : DEFAULT_PAYMENT_SUPPORT_ITEMS;
+  checkSupport.value = JSON.parse(JSON.stringify(formValidate.value));
+
+  getPaymentSupportForm().then((res) => {
+    if (res.success && res.result) {
+      supportForm.value = res.result;
+    }
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue b/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
index a143b5419..74ab8e99b 100644
--- a/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
+++ b/manager/src/views/sys/setting-manage/pay/WECHAT_PAYMENT.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <el-form
-      ref="formValidate"
+      ref="formValidateRef"
       label-width="150px"
       label-position="right"
       :model="formValidate"
@@ -35,6 +35,7 @@
         <el-input v-model="formValidate.apiclientKey" :rows="6" maxlength="2500" show-word-limit type="textarea" placeholder="Enter something..." />
       </el-form-item>
       <el-form-item label="加签方式" prop="publicType">
+        <!-- 历史遗留：handlePublicTypeChange 从未定义，原样保留 -->
         <el-radio-group v-model="formValidate.publicType" @change="handlePublicTypeChange">
           <el-radio-button value="CERT">平台证书</el-radio-button>
           <el-radio-button value="KEY">微信支付公钥</el-radio-button>
@@ -57,58 +58,59 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "../setting/validate";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {}, // 验证规则
-      formValidate: {}, // 表单数据
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    // 保存设置
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    // 实例化数据
-    init() {
-      const setting = JSON.parse(this.res || "{}");
-      this.formValidate = { ...setting };
-      Object.keys(this.formValidate).forEach((item) => {
-        if (item.indexOf("pId") < 0) {
-          this.ruleValidate[item] = [
-            {
-              required: true,
-              message: "请填写必填项",
-              trigger: "blur",
-            },
-          ];
-        }
-      });
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = reactive({}); // 验证规则
+const formValidate = ref({}); // 表单数据
+
+// 模板 ref 与 data 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+
+function submit(name) {
+  // handleSubmit 依赖 vm.$refs，传入表单 ref 映射保持原有行为
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+
+// 保存设置
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
     }
-  },
-};
+  });
+}
+
+// 实例化数据
+function init() {
+  const setting = JSON.parse(props.res || "{}");
+  formValidate.value = { ...setting };
+  Object.keys(formValidate.value).forEach((item) => {
+    if (item.indexOf("pId") < 0) {
+      ruleValidate[item] = [
+        {
+          required: true,
+          message: "请填写必填项",
+          trigger: "blur",
+        },
+      ];
+    }
+  });
+}
+
+// created
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/platformSetting.vue b/manager/src/views/sys/setting-manage/platformSetting.vue
index 81a3c1fa1..287d319e7 100644
--- a/manager/src/views/sys/setting-manage/platformSetting.vue
+++ b/manager/src/views/sys/setting-manage/platformSetting.vue
@@ -129,435 +129,446 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import { getParams, editParams } from "@/api/platform.js";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 import { regular } from "@/utils";
 
-export default {
-  name: "setting-manage",
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      tabName: "base",
-      loading: false,
-      saveLoading: false,
-      base: {
-        siteName: "",
-        icp: "",
-        logo: "",
-        sellerLogo: "",
-      },
-      point: {
-        register: "",
-        login: "",
-        money: "",
-      },
-      order: {
-        autoCancel: "",
-        autoReceive: "",
-        autoComplete: "",
-      },
-      goods: {
-        goodsCheck: "OPEN",
-        smallPictureWidth: "",
-        smallPictureHeight: "",
-        abbreviationPictureWidth: "",
-        abbreviationPictureHeight: "",
-        originalPictureWidth: "",
-        originalPictureHeight: "",
-      },
-      baseValidate: {
-        siteName: [{ required: true, message: "不能为空", trigger: "blur" }],
-        icp: [{ required: true, message: "不能为空", trigger: "blur" }],
-        logo: [{ required: true, message: "不能为空", trigger: "blur" }],
-        sellerLogo: [{ required: true, message: "不能为空", trigger: "blur" }],
-      },
-      pointValidate: {
-        register: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        login: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        money: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-      },
-      orderValidate: {
-        autoCancel: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        autoReceive: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        autoComplete: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-      },
-      goodsValidate: {
-        smallPictureWidth: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        smallPictureHeight: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        abbreviationPictureWidth: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        abbreviationPictureHeight: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        originalPictureWidth: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-        originalPictureHeight: [
-          {
-            required: true,
-            validator: (rule, value, callback) => {
-              if (!regular.integer.test(value)) {
-                callback(new Error("请输入正整数，且不为零！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.initBase();
-      this.initPoint();
-      this.initOrder();
-      this.initGoods();
-      this.initWechat();
-      this.initQQ();
-      this.initWeibo();
-      this.initAlipay();
-    },
-    initBase() {
-      this.loading = true;
-      getParams("base").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.base = res.result;
-          }
-        }
-      });
-    },
-    initPoint() {
-      this.loading = true;
-      getParams("point").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.point = res.result;
-          }
-        }
-      });
-    },
-    initOrder() {
-      this.loading = true;
-      getParams("order").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.order = res.result;
-          }
-        }
-      });
-    },
-    initGoods() {
-      this.loading = true;
-      getParams("goods").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.goods = res.result;
-          }
-        }
-      });
-    },
-    initWeibo() {
-      this.loading = true;
-      getParams("weibo").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.weibo = res.result;
-          }
-        }
-      });
-    },
-    initWechat() {
-      this.loading = true;
-      getParams("wechat").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.wechat = res.result;
-          }
-        }
-      });
-    },
-    initQQ() {
-      this.loading = true;
-      getParams("qq").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.qq = res.result;
-          }
-        }
-      });
-    },
-    initAlipay() {
-      this.loading = true;
-      getParams("alipay").then((res) => {
-        if (res.success) {
-          this.loading = false;
-          if (res.result) {
-            this.alipay = res.result;
-          }
-        }
-      });
-    },
-    saveBase() {
-      this.$refs.baseForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.base.id = "base";
-          editParams(this.base, "base").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    savePoint() {
-      this.$refs.pointForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.point.id = "point";
-          editParams(this.point, "point").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveOrder() {
-      this.$refs.orderForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.order.id = "order";
-          editParams(this.order, "order").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveGoods() {
-      this.$refs.goodsForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.goods.id = "goods";
-          editParams(this.goods, "goods").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveWechat() {
-      this.$refs.wechatForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.wechat.id = "wechat";
-          editParams(this.wechat, "wechat").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveQQ() {
-      this.$refs.qqForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.qq.id = "qq";
-          editParams(this.qq, "qq").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveWeibo() {
-      this.$refs.wechatForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.weibo.id = "weibo";
-          editParams(this.weibo, "weibo").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-    saveAlipay() {
-      this.$refs.alipayForm.validate((valid) => {
-        if (valid) {
-          this.saveLoading = true;
-          this.alipay.id = "alipay";
-          editParams(this.alipay, "alipay").then((res) => {
-            this.saveLoading = false;
-            if (res.success) {
-              ElMessage.success("保存成功");
-            }
-          });
-        }
-      });
-    },
-  },
-  mounted() {
-    const name = this.$route.query.name;
-    if (name) {
-      this.tabName = name;
-    }
-    this.init();
-  },
+defineOptions({ name: "setting-manage" });
+
+const route = useRoute();
+
+const tabName = ref("base");
+const loading = ref(false);
+const saveLoading = ref(false);
+const base = ref({
+  siteName: "",
+  icp: "",
+  logo: "",
+  sellerLogo: "",
+});
+const point = ref({
+  register: "",
+  login: "",
+  money: "",
+});
+const order = ref({
+  autoCancel: "",
+  autoReceive: "",
+  autoComplete: "",
+});
+const goods = ref({
+  goodsCheck: "OPEN",
+  smallPictureWidth: "",
+  smallPictureHeight: "",
+  abbreviationPictureWidth: "",
+  abbreviationPictureHeight: "",
+  originalPictureWidth: "",
+  originalPictureHeight: "",
+});
+// 历史遗留：wechat/qq/weibo/alipay 未在 data 中声明，直接挂 this，且模板中无对应表单项
+let wechat;
+let qq;
+let weibo;
+let alipay;
+const baseValidate = {
+  siteName: [{ required: true, message: "不能为空", trigger: "blur" }],
+  icp: [{ required: true, message: "不能为空", trigger: "blur" }],
+  logo: [{ required: true, message: "不能为空", trigger: "blur" }],
+  sellerLogo: [{ required: true, message: "不能为空", trigger: "blur" }],
 };
+const pointValidate = {
+  register: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  login: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  money: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+const orderValidate = {
+  autoCancel: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  autoReceive: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  autoComplete: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+const goodsValidate = {
+  smallPictureWidth: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  smallPictureHeight: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  abbreviationPictureWidth: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  abbreviationPictureHeight: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  originalPictureWidth: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+  originalPictureHeight: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!regular.integer.test(value)) {
+          callback(new Error("请输入正整数，且不为零！"));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur",
+    },
+  ],
+};
+
+const baseForm = ref(null);
+const pointForm = ref(null);
+const orderForm = ref(null);
+const goodsForm = ref(null);
+// 历史遗留：以下表单 ref 在模板中不存在，对应 save 方法也从未被模板调用
+const wechatForm = ref(null);
+const qqForm = ref(null);
+const alipayForm = ref(null);
+
+function init() {
+  initBase();
+  initPoint();
+  initOrder();
+  initGoods();
+  initWechat();
+  initQQ();
+  initWeibo();
+  initAlipay();
+}
+function initBase() {
+  loading.value = true;
+  getParams("base").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        base.value = res.result;
+      }
+    }
+  });
+}
+function initPoint() {
+  loading.value = true;
+  getParams("point").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        point.value = res.result;
+      }
+    }
+  });
+}
+function initOrder() {
+  loading.value = true;
+  getParams("order").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        order.value = res.result;
+      }
+    }
+  });
+}
+function initGoods() {
+  loading.value = true;
+  getParams("goods").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        goods.value = res.result;
+      }
+    }
+  });
+}
+function initWeibo() {
+  loading.value = true;
+  getParams("weibo").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        weibo = res.result;
+      }
+    }
+  });
+}
+function initWechat() {
+  loading.value = true;
+  getParams("wechat").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        wechat = res.result;
+      }
+    }
+  });
+}
+function initQQ() {
+  loading.value = true;
+  getParams("qq").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        qq = res.result;
+      }
+    }
+  });
+}
+function initAlipay() {
+  loading.value = true;
+  getParams("alipay").then((res) => {
+    if (res.success) {
+      loading.value = false;
+      if (res.result) {
+        alipay = res.result;
+      }
+    }
+  });
+}
+function saveBase() {
+  baseForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      base.value.id = "base";
+      editParams(base.value, "base").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function savePoint() {
+  pointForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      point.value.id = "point";
+      editParams(point.value, "point").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveOrder() {
+  orderForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      order.value.id = "order";
+      editParams(order.value, "order").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveGoods() {
+  goodsForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      goods.value.id = "goods";
+      editParams(goods.value, "goods").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveWechat() {
+  wechatForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      wechat.id = "wechat";
+      editParams(wechat, "wechat").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveQQ() {
+  qqForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      qq.id = "qq";
+      editParams(qq, "qq").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveWeibo() {
+  // 历史遗留 bug：此处校验的是 wechatForm 而非 weiboForm，原样保留
+  wechatForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      weibo.id = "weibo";
+      editParams(weibo, "weibo").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+function saveAlipay() {
+  alipayForm.value.validate((valid) => {
+    if (valid) {
+      saveLoading.value = true;
+      alipay.id = "alipay";
+      editParams(alipay, "alipay").then((res) => {
+        saveLoading.value = false;
+        if (res.success) {
+          ElMessage.success("保存成功");
+        }
+      });
+    }
+  });
+}
+
+onMounted(() => {
+  const name = route.query.name;
+  if (name) {
+    tabName.value = name;
+  }
+  init();
+});
 </script>
diff --git a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
index a010652e8..9d3f7795f 100644
--- a/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/BASE_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="站点名称" prop="siteName">
         <el-input style="width:200px;" v-model="formValidate.siteName" />
         <span class="desc">配置买家端站点名称</span>
@@ -65,7 +65,7 @@
         <el-input v-model="formValidate.staticPageWapAddress" />
       </el-form-item>
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close :show-close="true">
@@ -73,96 +73,97 @@
         @callback="callbackSelected"
         :isComponent="true"
         :initialize="picModelFlag"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, reactive, nextTick, getCurrentInstance } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
+import { setStore } from "@/libs/storage";
 import { handleSubmit } from "./validate";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  title: "基础设置",
-  props: {
-    res: {
-      type: null,
-      default: "",
-    },
-    type: "",
+
+defineOptions({ title: "基础设置" });
+
+const props = defineProps({
+  res: {
+    type: null,
+    default: "",
   },
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      picModelFlag: false,
-      formValidate: {
-        buyerSideLogo: "",
-        domainLogo: "",
-        icp: "",
-        storeSideLogo: "",
-        siteName: "",
-        staticPageAddress: "",
-        staticPageWapAddress: "",
+  type: "",
+});
+
+// validate.js 的 handleSubmit 仍接收组件实例读取 $refs
+const { proxy } = getCurrentInstance();
+
+const picModelFlag = ref(false);
+const formValidate = ref({
+  buyerSideLogo: "",
+  domainLogo: "",
+  icp: "",
+  storeSideLogo: "",
+  siteName: "",
+  staticPageAddress: "",
+  staticPageWapAddress: "",
+});
+const selected = ref("");
+const ruleValidate = reactive({});
+const result = ref("");
+
+// 模板 ref：formValidate/ossManage 与顶层变量重名，改名避免互相覆盖
+const formValidateRef = ref(null);
+const ossManageRef = ref(null);
+
+function onClickImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  formValidate.value[selected.value] = val.url;
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+      localStorage.setItem("icon", formValidate.value.domainLogo);
+      window.document.title = formValidate.value.siteName + " - 运营后台";
+      setStore("title", formValidate.value.siteName);
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  formValidate.value = { ...result.value };
+  Object.keys(result.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-      selected: "",
-      ruleValidate: {},
-      result: "",
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    onClickImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      this.formValidate[this.selected] = val.url;
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-          localStorage.setItem("icon", this.formValidate.domainLogo);
-          window.document.title = this.formValidate.siteName + " - 运营后台";
-          this.setStore("title", this.formValidate.siteName);
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      this.formValidate = { ...this.result };
-      Object.keys(this.result).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+    ];
+  });
+}
+
+init();
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
index 4be0625d3..a7f078a1f 100644
--- a/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/GOODS_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="商品审核" prop="goodsCheck">
         <el-radio-group v-model="formValidate.goodsCheck">
           <el-radio-button value="true">开启</el-radio-button>
@@ -58,76 +58,78 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
-export default {
-  props: ["res", "type"],
-  data() {
-    return {
-      formValidate: {
-        goodsCheck: 1,
-        smallPictureHeight: "0",
-        smallPictureWidth: "0",
-        abbreviationPictureWidth: "0",
-        abbreviationPictureHeight: "0",
-        originalPictureWidth: "0",
-        originalPictureHeight: "0",
+
+const props = defineProps(["res", "type"]);
+
+// 表单数据（init 中整体替换）
+const formValidate = ref({
+  goodsCheck: 1,
+  smallPictureHeight: "0",
+  smallPictureWidth: "0",
+  abbreviationPictureWidth: "0",
+  abbreviationPictureHeight: "0",
+  originalPictureWidth: "0",
+  originalPictureHeight: "0",
+});
+// 校验规则（只做属性合并）
+const ruleValidate = reactive({});
+const result = ref("");
+
+// 模板 ref 与 data 变量 formValidate 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+// 动态 ref 映射表（模板中以字符串名称调用 submit）
+const refsMap = { formValidate: formValidateRef };
+
+function submit(name) {
+  refsMap[name].value.validate((valid) => {
+    if (valid) {
+      setupSetting();
+    } else {
+      ElMessage.error("请正确填写内容!");
+    }
+  });
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  Object.keys(result.value).map((item) => {
+    result.value[item] += "";
+  });
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-      ruleValidate: {},
-      result: "",
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.setupSetting();
-        } else {
-          ElMessage.error("请正确填写内容!");
-        }
-      });
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      Object.keys(this.result).map((item) => {
-        this.result[item] += "";
-      });
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              if (value < 0) {
-                callback(new Error("不能输入负数！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ];
-      });
-    },
-  },
-};
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0) {
+            callback(new Error("不能输入负数！"));
+          } else {
+            callback();
+          }
+        },
+        trigger: "change",
+      },
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue b/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
index 1d8a5fd1e..c909aa0f7 100644
--- a/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/IM_SETTING.vue
@@ -1,72 +1,75 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="云IM地址" prop="httpUrl">
         <el-input v-model="formValidate.httpUrl"/>
         <span class="desc">配置买家端联系客服以及商家端登录客服跳转的路径</span>
       </el-form-item>
 
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
-import {setSetting} from "@/api/index";
-import {handleSubmit} from "./validate";
+import { setSetting } from "@/api/index";
+import { handleSubmit } from "./validate";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {}, // 验证规则
-      formValidate: { // 表单数据
-        httpUrl: ""
+const props = defineProps(["res", "type"]);
+
+// handleSubmit(that, name) 通过 that.$refs[name] 取表单实例
+const { proxy } = getCurrentInstance();
+
+// 只做属性合并的成组对象
+const ruleValidate = reactive({}); // 验证规则
+const formValidate = ref({ // 表单数据
+  httpUrl: ""
+});
+const result = ref("");
+
+// 模板 ref 与 data 同名会互相覆盖，改名 formValidateRef 并同步改 script
+const formValidateRef = ref(null);
+
+// 保存
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+
+// 保存设置
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+
+// 实例化数据
+function init() {
+  result.value = JSON.parse(props.res);
+
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-      result:"",
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    // 保存
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    // 保存设置
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    // 实例化数据
-    init() {
-      this.result = JSON.parse(this.res);
+    ];
+  });
+}
 
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue b/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
index 4cd384e28..e5bc08edb 100644
--- a/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/LIVE_SETTING.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <el-form
-      ref="formValidate"
+      ref="formValidateRef"
       label-width="180px"
       label-position="right"
       :model="formValidate"
@@ -51,13 +51,14 @@
       </el-form-item>
 
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 
@@ -77,62 +78,61 @@ const DEFAULT_FORM = {
 
 const OPTIONAL_FIELDS = ["mpPushDomain", "callBackUrl"];
 
-export default {
-  props: ["res", "type"],
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: { ...DEFAULT_FORM },
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    init() {
-      const result = this.res ? JSON.parse(this.res) : {};
-      this.formValidate = { ...DEFAULT_FORM };
-      Object.keys(DEFAULT_FORM).forEach((field) => {
-        if (result[field] != null && result[field] !== undefined) {
-          this.formValidate[field] = result[field];
-        }
-      });
-      this.ruleValidate = {};
-      Object.keys(DEFAULT_FORM).forEach((item) => {
-        if (OPTIONAL_FIELDS.includes(item)) return;
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-    submit(name) {
-      this.$refs[name].validate((valid) => {
-        if (valid) {
-          this.setupSetting();
-        } else {
-          ElMessage.error("请正确填写内容!");
-        }
-      });
-    },
-    setupSetting() {
-      const payload = { ...DEFAULT_FORM };
-      Object.keys(DEFAULT_FORM).forEach((field) => {
-        payload[field] = this.formValidate[field] ?? "";
-      });
-      setSetting(this.type, payload).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-  },
-};
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = ref({});
+const formValidate = ref({ ...DEFAULT_FORM });
+
+// 模板 ref 与 data 字段同名陷阱：模板 ref 改名为 formValidateRef，通过映射表支持 submit(name) 动态取值
+const formValidateRef = ref(null);
+const formRefs = { formValidateRef };
+
+function init() {
+  const result = props.res ? JSON.parse(props.res) : {};
+  formValidate.value = { ...DEFAULT_FORM };
+  Object.keys(DEFAULT_FORM).forEach((field) => {
+    if (result[field] != null && result[field] !== undefined) {
+      formValidate.value[field] = result[field];
+    }
+  });
+  ruleValidate.value = {};
+  Object.keys(DEFAULT_FORM).forEach((item) => {
+    if (OPTIONAL_FIELDS.includes(item)) return;
+    ruleValidate.value[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
+      },
+    ];
+  });
+}
+
+function submit(name) {
+  formRefs[name].value.validate((valid) => {
+    if (valid) {
+      setupSetting();
+    } else {
+      ElMessage.error("请正确填写内容!");
+    }
+  });
+}
+
+function setupSetting() {
+  const payload = { ...DEFAULT_FORM };
+  Object.keys(DEFAULT_FORM).forEach((field) => {
+    payload[field] = formValidate.value[field] ?? "";
+  });
+  setSetting(props.type, payload).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
index bc35563c3..e3012df13 100644
--- a/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="平台 " prop="endPoint">
         <el-radio-group v-model="formValidate.type">
           <el-radio-button value="KDNIAO">快递鸟</el-radio-button>
@@ -47,61 +47,59 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "./validate";
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      result: "",
-      formValidate: {
-        type: "",
-        kdniaoEbusinessID: "",
-        kdniaoAppKey: "",
-        requestType: "",
-        kuaidi100Customer: "",
-        kuaidi100Key: "",
+
+const props = defineProps(["res", "type"]);
+
+const ruleValidate = reactive({});
+const result = ref("");
+const formValidate = ref({
+  type: "",
+  kdniaoEbusinessID: "",
+  kdniaoAppKey: "",
+  requestType: "",
+  kuaidi100Customer: "",
+  kuaidi100Key: "",
+});
+// 模板 ref 与 data 字段 formValidate 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+
+function submit(name) {
+  // validate.js 的 handleSubmit 依赖 that.$refs[name] 结构，构造兼容对象传入
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue b/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
index 1f11d4b70..d9b56333b 100644
--- a/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/ORDER_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="订单自动取消" prop="autoCancel">
         <el-input type="number" v-model="formValidate.autoCancel">
           <template #append>分</template>
@@ -35,78 +35,79 @@
       </el-form-item>
 
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "./validate";
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: {
-        autoCancel: "",
-        autoEvaluation: "",
-        autoReceive: "",
-        closeAfterSale: "",
-        closeComplaint: "",
+
+const props = defineProps(["res", "type"]);
+
+// handleSubmit(that, name) 通过 that.$refs[name] 取表单实例
+const { proxy } = getCurrentInstance();
+
+const ruleValidate = reactive({});
+const formValidate = ref({
+  autoCancel: "",
+  autoEvaluation: "",
+  autoReceive: "",
+  closeAfterSale: "",
+  closeComplaint: "",
+});
+const result = ref("");
+
+// 模板 ref 与 data 同名会互相覆盖，改名 formValidateRef 并同步改 script
+const formValidateRef = ref(null);
+
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  Object.keys(result.value).map((item) => {
+    result.value[item] += "";
+  });
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-      result: "",
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      Object.keys(this.result).map((item) => {
-        this.result[item] += "";
-      });
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              if (value < 0) {
-                callback(new Error("不能输入负数！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ];
-      });
-    },
-  },
-};
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0) {
+            callback(new Error("不能输入负数！"));
+          } else {
+            callback();
+          }
+        },
+        trigger: "change",
+      },
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
index 1beb46d4b..435bf0b7e 100644
--- a/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/OSS_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
 
       <el-form-item label="平台" >
         <el-radio-group v-model="formValidate.type">
@@ -81,79 +81,78 @@
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import {setSetting} from "@/api/index";
 import {handleSubmit} from "./validate";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {}, // 验证规则
-      formValidate: { // 表单数据
-        type: "",
-        aliyunOSSAccessKeyId: "",
-        aliyunOSSAccessKeySecret: "",
-        aliyunOSSBucketName: "",
-        aliyunOSSEndPoint: "",
-        m_endpoint: "",
-        m_accessKey: "",
-        m_secretKey: "",
-        m_bucketName: "",
-        m_frontUrl: "",
-        huaweicloudOBSAccessKey: "",
-        huaweicloudOBSSecretKey: "",
-        huaweicloudOBSEndPoint: "",
-        huaweicloudOBSBucketName: "",
-        tencentCOSSecretId: "",
-        tencentCOSSecretKey: "",
-        tencentCOSRegion: "",
-        tencentCOSBucket: "",
-        tencentCOSEndPoint: "",
-      },
-      result:""
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    // 保存
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    // 保存设置
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    // 实例化数据
-    init() {
-      this.result = JSON.parse(this.res);
+const props = defineProps(["res", "type"]);
 
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+const ruleValidate = reactive({}); // 验证规则
+const formValidate = ref({ // 表单数据
+  type: "",
+  aliyunOSSAccessKeyId: "",
+  aliyunOSSAccessKeySecret: "",
+  aliyunOSSBucketName: "",
+  aliyunOSSEndPoint: "",
+  m_endpoint: "",
+  m_accessKey: "",
+  m_secretKey: "",
+  m_bucketName: "",
+  m_frontUrl: "",
+  huaweicloudOBSAccessKey: "",
+  huaweicloudOBSSecretKey: "",
+  huaweicloudOBSEndPoint: "",
+  huaweicloudOBSBucketName: "",
+  tencentCOSSecretId: "",
+  tencentCOSSecretKey: "",
+  tencentCOSRegion: "",
+  tencentCOSBucket: "",
+  tencentCOSEndPoint: "",
+});
+const result = ref("");
+
+// 模板 ref：与 data 的 formValidate 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+
+// 保存
+function submit(name) {
+  // handleSubmit 依赖 vm.$refs，构造 $refs 映射保持其签名与行为不变
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+// 保存设置
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+// 实例化数据
+function init() {
+  result.value = JSON.parse(props.res);
+
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
+      },
+    ];
+  });
+}
+
+// 原 created 钩子
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
index a1e3052cd..575701d6a 100644
--- a/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/POINT_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="消费1元赠送积分" prop="consumer">
         <el-input type="number" v-model="formValidate.consumer">
           <template #append>积分</template>
@@ -51,87 +51,85 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "./validate";
 
-export default {
-  data() {
-    return {
-      ruleValidate: {},
-      formValidate: {},
-      result: "",
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    delSign(item, index) {
-      this.formValidate.pointSettingItems.splice(index, 1);
-    },
-    addSign() {
-      if (this.formValidate.pointSettingItems.length >= 4) {
-        ElMessage.error("最多设置4项签到设置",
-        );
-        return false;
-      }
-      this.formValidate.pointSettingItems.push({
-        point: "0",
-        day: this.formValidate.pointSettingItems.length,
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      Object.keys(this.result).map((item) => {
-        if (item == "pointSettingItems") {
-          return false;
-        }
-        this.result[item] += "";
-      });
+const props = defineProps(["res", "type"]);
 
-      this.formValidate = { ...this.result };
+const ruleValidate = reactive({});
+const formValidate = ref({});
+const result = ref("");
 
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              if (value < 0) {
-                callback(new Error("不能输入负数！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ];
-      });
-    },
-  },
-};
+// 模板 ref 与 data 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+
+function submit(name) {
+  // validate.js 的 handleSubmit 未去 vm 化，仍按 that.$refs[name] 取值，此处用表单 ref 构造同构对象
+  handleSubmit({ $refs: { [name]: formValidateRef.value } }, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function delSign(item, index) {
+  formValidate.value.pointSettingItems.splice(index, 1);
+}
+function addSign() {
+  if (formValidate.value.pointSettingItems.length >= 4) {
+    ElMessage.error("最多设置4项签到设置",
+    );
+    return false;
+  }
+  formValidate.value.pointSettingItems.push({
+    point: "0",
+    day: formValidate.value.pointSettingItems.length,
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  Object.keys(result.value).map((item) => {
+    if (item == "pointSettingItems") {
+      return false;
+    }
+    result.value[item] += "";
+  });
+
+  formValidate.value = { ...result.value };
+
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0) {
+            callback(new Error("不能输入负数！"));
+          } else {
+            callback();
+          }
+        },
+        trigger: "change",
+      },
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
index b41da257c..561f17980 100644
--- a/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/SMS_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="是否测试模式" prop="isTestModel">
         <el-radio-group v-model="formValidate.isTestModel">
           <el-radio-button value="true">开启</el-radio-button>
@@ -71,88 +71,87 @@
       </el-form-item>
 
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
 
       </div>
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import {setSetting} from "@/api/index";
 import {handleSubmit} from "./validate";
 
-export default {
-  data() {
-    return {
-      result: "",
-      ruleValidate: {}, // 验证规则
-      formValidate: { // 表单数据
-        isTestModel:1,
-        loginTemplateCode:"",
-        registerTemplateCode:"",
-        findPasswordTemplateCode:"",
-        walletPasswordTemplateCode:"",
-        payPasswordTemplateCode:"",
-        accessKeyId: "",
-        regionId: "",
-        picLocation: "",
-        accessSecret: "",
-        tencentSecretId: "",
-        tencentSecretKey: "",
-        tencentSdkAppId: "",
-        tencentSignName: "",
-        huaweiAppKey: "",
-        huaweiAppSecret: "",
-        huaweiSender: "",
-        huaweiSignature: "",
+const props = defineProps(["res", "type"]);
+
+// handleSubmit 通过 vm.$refs 访问表单实例
+const { proxy } = getCurrentInstance();
+
+const result = ref("");
+const ruleValidate = reactive({}); // 验证规则
+const formValidate = ref({ // 表单数据
+  isTestModel:1,
+  loginTemplateCode:"",
+  registerTemplateCode:"",
+  findPasswordTemplateCode:"",
+  walletPasswordTemplateCode:"",
+  payPasswordTemplateCode:"",
+  accessKeyId: "",
+  regionId: "",
+  picLocation: "",
+  accessSecret: "",
+  tencentSecretId: "",
+  tencentSecretKey: "",
+  tencentSdkAppId: "",
+  tencentSignName: "",
+  huaweiAppKey: "",
+  huaweiAppSecret: "",
+  huaweiSender: "",
+  huaweiSignature: "",
+});
+// 表单实例：原模板 ref="formValidate" 与 data 同名会互相覆盖，改名 formValidateRef
+const formValidateRef = ref(null);
+
+// 保存
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+// 保存设置
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+// 实例化数据
+function init() {
+  result.value = JSON.parse(props.res);
+
+  Object.keys(result.value).map((item) => {
+    result.value[item] += "";
+  });
+
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
       },
-    };
-  },
-  props: ["res", "type"],
-  created() {
-    this.init();
-  },
-  methods: {
-    // 保存
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    // 保存设置
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    // 实例化数据
-    init() {
-      this.result = JSON.parse(this.res);
+    ];
+  });
+}
 
-      Object.keys(this.result).map((item) => {
-        this.result[item] += "";
-      });
-
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-        ];
-      });
-    },
-  },
-};
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
index 5ccf840b2..7ee17cad4 100644
--- a/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
+++ b/manager/src/views/sys/setting-manage/setting/WITHDRAWAL_SETTING.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="layout">
-    <el-form ref="formValidate" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
+    <el-form ref="formValidateRef" label-width="150px" label-position="right" :model="formValidate" :rules="ruleValidate">
       <el-form-item label="提现审核是否开启">
         <el-switch v-model="formValidate.apply" active-text="开" inactive-text="关" />
       </el-form-item>
@@ -21,73 +21,76 @@
       </el-form-item>
 
       <div class="label-btns">
-        <el-button type="primary" @click="submit('formValidate')">保存</el-button>
+        <el-button type="primary" @click="submit('formValidateRef')">保存</el-button>
       </div>
     </el-form>
   </div>
 </template>
-<script>
+<script setup>
+import { getCurrentInstance, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import { setSetting } from "@/api/index";
 import { handleSubmit } from "./validate";
-export default {
-  data() {
-    return {
-      result: "",
-      ruleValidate: {},
-      formValidate: {},
-      switchTitle: "提现审核是否开启",
-    };
-  },
-  created() {
-    this.init();
-  },
-  props: ["res", "type"],
-  methods: {
-    submit(name) {
-      handleSubmit(this, name)
-        .then(() => {
-          this.setupSetting();
-        })
-        .catch(() => {});
-    },
-    setupSetting() {
-      setSetting(this.type, this.formValidate).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-      });
-    },
-    init() {
-      this.result = JSON.parse(this.res);
-      Object.keys(this.result).map((item) => {
-        this.result[item] += "";
-      });
-      this.formValidate = { ...this.result };
-      Object.keys(this.formValidate).forEach((item) => {
-        this.ruleValidate[item] = [
-          {
-            required: true,
-            message: "请填写必填项",
-            trigger: "blur",
-          },
-          {
-            validator: (rule, value, callback) => {
-              if (value < 0) {
-                callback(new Error("不能输入负数！"));
-              } else {
-                callback();
-              }
-            },
-            trigger: "change",
-          },
-        ];
-      });
-    },
-  },
-};
+
+const props = defineProps(["res", "type"]);
+
+// handleSubmit(that, name) 通过 that.$refs[name] 取表单实例
+const { proxy } = getCurrentInstance();
+
+const result = ref("");
+// 只做属性合并的成组对象
+const ruleValidate = reactive({});
+const formValidate = ref({});
+// 历史遗留：声明后未在模板使用，原样保留
+const switchTitle = ref("提现审核是否开启");
+
+// 模板 ref 与 data 同名会互相覆盖，改名 formValidateRef 并同步改 script
+const formValidateRef = ref(null);
+
+function submit(name) {
+  handleSubmit(proxy, name)
+    .then(() => {
+      setupSetting();
+    })
+    .catch(() => {});
+}
+function setupSetting() {
+  setSetting(props.type, formValidate.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+  });
+}
+function init() {
+  result.value = JSON.parse(props.res);
+  Object.keys(result.value).map((item) => {
+    result.value[item] += "";
+  });
+  formValidate.value = { ...result.value };
+  Object.keys(formValidate.value).forEach((item) => {
+    ruleValidate[item] = [
+      {
+        required: true,
+        message: "请填写必填项",
+        trigger: "blur",
+      },
+      {
+        validator: (rule, value, callback) => {
+          if (value < 0) {
+            callback(new Error("不能输入负数！"));
+          } else {
+            callback();
+          }
+        },
+        trigger: "change",
+      },
+    ];
+  });
+}
+
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/manager/src/views/sys/setting-manage/settingManage.vue b/manager/src/views/sys/setting-manage/settingManage.vue
index b1f3b8c49..e01c12359 100644
--- a/manager/src/views/sys/setting-manage/settingManage.vue
+++ b/manager/src/views/sys/setting-manage/settingManage.vue
@@ -18,159 +18,157 @@
     </el-tabs>
   </el-card>
 </template>
-<script>
+<script setup>
+import { ref, watch, nextTick, onMounted } from "vue";
+import { useRoute } from "vue-router";
 import { getSetting } from "@/api/index.js";
 import templateSetting from "./template";
 
-export default {
-  data() {
-    return {
-      templateSetting, // 设置模板
-      selected: "", // 已选
-      settingData: "", // 模板数据
-      show: true, // 是否显示
-      setting: [
-        //基础配置
-        {
-          type: "BASE_SETTING",
-          name: "基础配置",
-        },
-        //商品设置
-        {
-          type: "GOODS_SETTING",
-          name: "商品设置",
-        },
-        //订单配置
-        {
-          type: "ORDER_SETTING",
-          name: "订单配置",
-        },
-        //积分设置
-        { type: "POINT_SETTING", name: "积分设置" },
-        {
-          type: "WITHDRAWAL_SETTING",
-          name: "提现设置",
-        },
-        //  快递查询设置
-        {
-          type: "LOGISTICS_SETTING",
-          name: "快递查询设置",
-        },
-        //静态资源配置
-        {
-          type: "OSS_SETTING",
-          name: "静态资源配置",
-        },
-        //短信配置
-        {
-          type: "SMS_SETTING",
-          name: "短信配置",
-        },
-        //阿里短信配置
-        {
-          type: "IM_SETTING",
-          name: "客服设置",
-        },
-        {
-          type: "LIVE_SETTING",
-          name: "直播设置",
-        },
-      ],
-      authLogin: [
-        // 登录设置
-        { type: "CONNECT_SETTING", name: "登录设置" },
-        // 微信设置
-        { type: "WECHAT_CONNECT", name: "微信设置" },
-        // QQ设置
-        { type: "QQ_CONNECT", name: "QQ设置" },
-      ],
-      pay: [
-        //支付宝支付设置
-        { type: "PAYMENT_SUPPORT", name: "支付开启/关闭" },
-        //支付宝支付设置
-        { type: "ALIPAY_PAYMENT", name: "支付宝支付设置" },
-        //微信支付设置
-        { type: "WECHAT_PAYMENT", name: "微信支付设置" },
-      ],
-      tabWay: [], // tab数据
-      settingRequestSeq: 0,
-    };
-  },
+const route = useRoute();
 
-  watch: {
-    $route(to, from) {
-      this.selected = "";
-      this.show = false;
-      this.getSettingData(this.selected);
-      this.$nextTick(() => {
-        this.show = true;
-      });
-    },
+const selected = ref(""); // 已选
+const settingData = ref(""); // 模板数据
+const show = ref(true); // 是否显示
+const setting = ref([
+  //基础配置
+  {
+    type: "BASE_SETTING",
+    name: "基础配置",
   },
-  mounted() {
-    this.clickTab(this.selected);
+  //商品设置
+  {
+    type: "GOODS_SETTING",
+    name: "商品设置",
   },
-  methods: {
-    // tab切换
-    clickTab(name) {
-      this.selected = name;
-      this.getSettingData(name);
-    },
-    resolveTabWay() {
-      const tabMap = {
-        setting: this.setting,
-        authLogin: this.authLogin,
-        pay: this.pay,
-      };
-      this.tabWay = tabMap[this.$route.name] || [];
-    },
-    normalizeSettingResult(res) {
-      if (!res || res.result == null) {
-        return {};
-      }
-      const raw = res.result;
-      if (typeof raw === "string") {
-        try {
-          return JSON.parse(raw);
-        } catch (e) {
-          return {};
-        }
-      }
-      if (typeof raw === "object") {
-        return raw;
-      }
+  //订单配置
+  {
+    type: "ORDER_SETTING",
+    name: "订单配置",
+  },
+  //积分设置
+  { type: "POINT_SETTING", name: "积分设置" },
+  {
+    type: "WITHDRAWAL_SETTING",
+    name: "提现设置",
+  },
+  //  快递查询设置
+  {
+    type: "LOGISTICS_SETTING",
+    name: "快递查询设置",
+  },
+  //静态资源配置
+  {
+    type: "OSS_SETTING",
+    name: "静态资源配置",
+  },
+  //短信配置
+  {
+    type: "SMS_SETTING",
+    name: "短信配置",
+  },
+  //阿里短信配置
+  {
+    type: "IM_SETTING",
+    name: "客服设置",
+  },
+  {
+    type: "LIVE_SETTING",
+    name: "直播设置",
+  },
+]);
+const authLogin = ref([
+  // 登录设置
+  { type: "CONNECT_SETTING", name: "登录设置" },
+  // 微信设置
+  { type: "WECHAT_CONNECT", name: "微信设置" },
+  // QQ设置
+  { type: "QQ_CONNECT", name: "QQ设置" },
+]);
+const pay = ref([
+  //支付宝支付设置
+  { type: "PAYMENT_SUPPORT", name: "支付开启/关闭" },
+  //支付宝支付设置
+  { type: "ALIPAY_PAYMENT", name: "支付宝支付设置" },
+  //微信支付设置
+  { type: "WECHAT_PAYMENT", name: "微信支付设置" },
+]);
+const tabWay = ref([]); // tab数据
+const settingRequestSeq = ref(0);
+
+watch(route, (to, from) => {
+  selected.value = "";
+  show.value = false;
+  getSettingData(selected.value);
+  nextTick(() => {
+    show.value = true;
+  });
+});
+
+onMounted(() => {
+  clickTab(selected.value);
+});
+
+// tab切换
+function clickTab(name) {
+  selected.value = name;
+  getSettingData(name);
+}
+
+function resolveTabWay() {
+  const tabMap = {
+    setting: setting.value,
+    authLogin: authLogin.value,
+    pay: pay.value,
+  };
+  tabWay.value = tabMap[route.name] || [];
+}
+
+function normalizeSettingResult(res) {
+  if (!res || res.result == null) {
+    return {};
+  }
+  const raw = res.result;
+  if (typeof raw === "string") {
+    try {
+      return JSON.parse(raw);
+    } catch (e) {
       return {};
-    },
-    /**
-     * 进入页面请求第一个配置
-     */
-    getSettingData(name) {
-      this.settingData = "";
-      this.resolveTabWay();
+    }
+  }
+  if (typeof raw === "object") {
+    return raw;
+  }
+  return {};
+}
 
-      if (!name) {
-        if (!this.tabWay.length) {
-          return;
-        }
-        name = this.tabWay[0].type;
-        this.selected = name;
+/**
+ * 进入页面请求第一个配置
+ */
+function getSettingData(name) {
+  settingData.value = "";
+  resolveTabWay();
+
+  if (!name) {
+    if (!tabWay.value.length) {
+      return;
+    }
+    name = tabWay.value[0].type;
+    selected.value = name;
+  }
+
+  const requestId = ++settingRequestSeq.value;
+  getSetting(name)
+    .then((res) => {
+      if (requestId !== settingRequestSeq.value) {
+        return;
       }
-
-      const requestId = ++this.settingRequestSeq;
-      getSetting(name)
-        .then((res) => {
-          if (requestId !== this.settingRequestSeq) {
-            return;
-          }
-          this.settingData = JSON.stringify(this.normalizeSettingResult(res));
-        })
-        .catch(() => {
-          if (requestId !== this.settingRequestSeq) {
-            return;
-          }
-          this.settingData = "{}";
-        });
-    },
-  },
-};
+      settingData.value = JSON.stringify(normalizeSettingResult(res));
+    })
+    .catch(() => {
+      if (requestId !== settingRequestSeq.value) {
+        return;
+      }
+      settingData.value = "{}";
+    });
+}
 </script>
diff --git a/manager/src/views/sys/setting-manage/smsSettingManage.vue b/manager/src/views/sys/setting-manage/smsSettingManage.vue
index d34a07fb0..48d7c1fe7 100644
--- a/manager/src/views/sys/setting-manage/smsSettingManage.vue
+++ b/manager/src/views/sys/setting-manage/smsSettingManage.vue
@@ -12,7 +12,7 @@
       </div>
     </div>
     <el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="accessKeyId" prop="addressName">
           <el-input v-model="form.accessKeyId" clearable style="width: 100%" />
         </el-form-item>
@@ -30,56 +30,58 @@
     </el-dialog>
   </el-card>
 </template>
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { ElMessage } from "element-plus";
 import { getSetting, setSetting } from "@/api/index.js";
 import template from "./template";
-export default {
-  name: "smsSettingManage",
-  components: {
-    template,
-  },
 
-  data() {
-    return {
-      submitLoading: false,
-      template,
-      selected: "",
-      settingData: "",
-      modalTitle: "设置",
-      modalVisible: false,
-      form: {},
-    };
-  },
-  methods: {
-    init() {
-      settingInfo("SMS_SETTING");
-    },
-    saveSetting() {
-      setSetting("SMS_SETTING", this.form).then((res) => {
-        if (res.success) {
-          ElMessage.success("保存成功!");
-        } else {
-          ElMessage.error("保存失败!");
-        }
-        this.modalVisible = false;
-      });
-    },
-    settingInfo(v) {
-      alert();
-      this.selected = v;
-      getSetting(v).then((res) => {
-        if (res.result) {
-          this.modalVisible = true;
-          this.form = res;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({
+  name: "smsSettingManage",
+});
+
+// 模板 ref，原名 form，与 data 的 form 同名冲突，改为 formRef
+const formRef = ref(null);
+
+const submitLoading = ref(false);
+// data 中原有的 template 字段即上方 import 的模块本身，顶层导入已可直接访问，不再重复声明
+const selected = ref("");
+const settingData = ref("");
+const modalTitle = ref("设置");
+const modalVisible = ref(false);
+const form = ref({});
+
+function init() {
+  // 原 Options API 中此处未加 this，运行时会抛 ReferenceError（历史遗留 bug）；
+  // 转换为 script setup 后同名顶层函数可直接解析，代码按原样保留
+  settingInfo("SMS_SETTING");
+}
+
+function saveSetting() {
+  setSetting("SMS_SETTING", form.value).then((res) => {
+    if (res.success) {
+      ElMessage.success("保存成功!");
+    } else {
+      ElMessage.error("保存失败!");
+    }
+    modalVisible.value = false;
+  });
+}
+
+function settingInfo(v) {
+  alert();
+  selected.value = v;
+  getSetting(v).then((res) => {
+    if (res.result) {
+      modalVisible.value = true;
+      form.value = res;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss">
 .sms-setting-card {
diff --git a/manager/src/views/sys/slider/slider.vue b/manager/src/views/sys/slider/slider.vue
index 85c80eec5..9197a2fa1 100644
--- a/manager/src/views/sys/slider/slider.vue
+++ b/manager/src/views/sys/slider/slider.vue
@@ -72,7 +72,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="form" :model="form" :rules="formValidate" label-width="100px">
+      <el-form ref="formRef" :model="form" :rules="formValidate" label-width="100px">
         <el-form-item label="名称" prop="name">
           <el-input
             v-model="form.name"
@@ -101,7 +101,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import * as API_Setting from "@/api/setting";
 import uploadPicInput from "@/components/lili/upload-pic-input";
@@ -112,133 +113,133 @@ const defaultForm = () => ({
   type: "RESOURCE",
 });
 
-export default {
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      modalVisible: false,
-      modalTitle: "",
-      loading: true,
-      modalType: 0,
-      submitLoading: false,
-      form: defaultForm(),
-      formValidate: {
-        name: [
-          {
-            required: true,
-            message: "请输入名称",
-            trigger: "blur",
-          },
-        ],
-        resource: [
-          {
-            required: true,
-            message: "请上传图片",
-            trigger: "blur",
-          },
-        ],
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        type: "RESOURCE",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    changePage() {
-      this.getDataList();
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const loading = ref(true);
+const modalType = ref(0);
+const submitLoading = ref(false);
+const form = ref(defaultForm());
+const formValidate = reactive({
+  name: [
+    {
+      required: true,
+      message: "请输入名称",
+      trigger: "blur",
     },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
+  ],
+  resource: [
+    {
+      required: true,
+      message: "请上传图片",
+      trigger: "blur",
     },
-    handleClickType(tab) {
-      this.searchForm.type = tab.paneName;
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Setting.verificationPage(this.searchForm).then((res) => {
-        this.loading = false;
+  ],
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  type: "RESOURCE",
+});
+const data = ref([]);
+const total = ref(0);
+
+const formRef = ref(null);
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleClickType(tab) {
+  searchForm.type = tab.paneName;
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  API_Setting.verificationPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function add() {
+  form.value = defaultForm();
+  form.value.type = searchForm.type;
+  modalType.value = 0;
+  modalTitle.value = "添加验证码源";
+  modalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.resetFields();
+  });
+}
+
+function edit(v) {
+  form.value = {
+    id: v.id,
+    name: v.name,
+    resource: v.resource,
+    type: v.type,
+  };
+  modalType.value = 1;
+  modalVisible.value = true;
+  modalTitle.value = "修改验证码源";
+}
+
+function handleSubmit() {
+  form.value.type = searchForm.type;
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    if (modalType.value === 0) {
+      const payload = { ...form.value };
+      delete payload.id;
+      API_Setting.addVerification(payload).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          ElMessage.success("添加成功");
+          getDataList();
+          modalVisible.value = false;
         }
       });
-    },
-    add() {
-      this.form = defaultForm();
-      this.form.type = this.searchForm.type;
-      this.modalType = 0;
-      this.modalTitle = "添加验证码源";
-      this.modalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-      });
-    },
-    edit(v) {
-      this.form = {
-        id: v.id,
-        name: v.name,
-        resource: v.resource,
-        type: v.type,
-      };
-      this.modalType = 1;
-      this.modalVisible = true;
-      this.modalTitle = "修改验证码源";
-    },
-    handleSubmit() {
-      this.form.type = this.searchForm.type;
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        if (this.modalType === 0) {
-          const payload = { ...this.form };
-          delete payload.id;
-          API_Setting.addVerification(payload).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("添加成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        } else {
-          API_Setting.editVerification(this.form.id, this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("修改成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
+    } else {
+      API_Setting.editVerification(form.value.id, form.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("修改成功");
+          getDataList();
+          modalVisible.value = false;
         }
       });
-    },
-    remove(v) {
-      ElMessageBox.confirm("确认要删除此验证码源?", "确认删除", { type: "warning" }).then(() => {
-          return API_Setting.delVerification(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("验证码源已删除");
-              this.getDataList();
-            }
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.getDataList();
-  },
-};
+    }
+  });
+}
+
+function remove(v) {
+  ElMessageBox.confirm("确认要删除此验证码源?", "确认删除", { type: "warning" }).then(() => {
+      return API_Setting.delVerification(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("验证码源已删除");
+          getDataList();
+        }
+      });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  getDataList();
+});
 </script>
 
 <style scoped>
diff --git a/manager/src/views/sys/timed-task/index.vue b/manager/src/views/sys/timed-task/index.vue
index c6842e5ba..fcfba8213 100644
--- a/manager/src/views/sys/timed-task/index.vue
+++ b/manager/src/views/sys/timed-task/index.vue
@@ -27,65 +27,61 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { getTimedTaskList, triggerTimedTask } from "@/api/timedTask.js";
 
-export default {
-  name: "timed-task-manage",
-  data() {
-    return {
-      loading: false,
-      activeTab: "每日任务",
-      taskList: [],
-    };
-  },
-  computed: {
-    currentTasks() {
-      return this.taskList.filter((t) => t.group === this.activeTab);
-    },
-  },
-  methods: {
-    init() {
-      this.loading = true;
-      getTimedTaskList()
+defineOptions({ name: "timed-task-manage" });
+
+const loading = ref(false);
+const activeTab = ref("每日任务");
+const taskList = ref([]);
+
+const currentTasks = computed(() => {
+  return taskList.value.filter((t) => t.group === activeTab.value);
+});
+
+function init() {
+  loading.value = true;
+  getTimedTaskList()
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        taskList.value = res.result.map((t) => ({ ...t, triggering: false }));
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function handleTrigger(row) {
+  ElMessageBox.confirm(`确认要手动触发 "${row.name}" 吗？`, "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      row.triggering = true;
+      triggerTimedTask(row.id)
         .then((res) => {
-          this.loading = false;
+          row.triggering = false;
           if (res.success) {
-            this.taskList = res.result.map((t) => ({ ...t, triggering: false }));
+            ElMessage.success(`"${row.name}" 已触发执行`);
+          } else {
+            ElMessage.error(res.message || "触发失败");
           }
         })
         .catch(() => {
-          this.loading = false;
+          row.triggering = false;
+          ElMessage.error("触发失败");
         });
-    },
-    handleTrigger(row) {
-      ElMessageBox.confirm(`确认要手动触发 "${row.name}" 吗？`, "提示", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          row.triggering = true;
-          triggerTimedTask(row.id)
-            .then((res) => {
-              row.triggering = false;
-              if (res.success) {
-                ElMessage.success(`"${row.name}" 已触发执行`);
-              } else {
-                ElMessage.error(res.message || "触发失败");
-              }
-            })
-            .catch(() => {
-              row.triggering = false;
-              ElMessage.error("触发失败");
-            });
-        })
-        .catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/manager/src/views/sys/user-manage/userManage.vue b/manager/src/views/sys/user-manage/userManage.vue
index 15ee451e4..ebbfcc3ae 100644
--- a/manager/src/views/sys/user-manage/userManage.vue
+++ b/manager/src/views/sys/user-manage/userManage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
         <el-form-item label="用户名">
           <el-input
             v-model="searchForm.username"
@@ -19,7 +19,7 @@
           />
         </el-form-item>
         <el-form-item label="部门">
-          <department-choose @on-change="handleSelectDep" style="width: 240px" ref="dep" />
+          <department-choose @on-change="handleSelectDep" style="width: 240px" ref="depRef" />
         </el-form-item>
         <el-form-item>
           <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
@@ -35,7 +35,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -100,7 +100,7 @@
       destroy-on-close
       class="user-manage-dialog"
     >
-      <el-form ref="form" :model="form" label-width="70px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="70px" :rules="formValidate">
         <el-form-item label="用户名" prop="username">
           <el-input v-model="form.username" autocomplete="off" />
         </el-form-item>
@@ -120,7 +120,7 @@
           <upload-pic-input v-model="form.avatar" />
         </el-form-item>
         <el-form-item label="所属部门">
-          <department-tree-choose @on-change="handleSelectDepTree" ref="depTree" />
+          <department-tree-choose @on-change="handleSelectDepTree" ref="depTreeRef" />
         </el-form-item>
         <el-form-item label="角色" prop="roles">
           <el-select v-model="form.roles" multiple style="width: 100%">
@@ -136,7 +136,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
   getUserListData,
@@ -148,304 +149,321 @@ import {
   resetPassword,
 } from "@/api/index";
 import { validateMobile } from "@/libs/validate";
+import { md5 } from "@/utils/md5.js";
 import departmentChoose from "@/components/lili/department-choose";
 import departmentTreeChoose from "@/components/lili/department-tree-choose";
 import uploadPicInput from "@/components/lili/upload-pic-input";
 
-export default {
-  name: "user-manage",
-  components: {
-    departmentChoose,
-    departmentTreeChoose,
-    uploadPicInput,
-  },
-  data() {
-    return {
-      loading: true,
-      selectCount: 0,
-      selectList: [],
-      searchForm: {
-        username: "",
-        departmentId: "",
-        mobile: "",
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      modalType: 0,
-      userModalVisible: false,
-      modalTitle: "",
-      form: {
-        username: "",
-        nickName: "",
-        password: "",
-        mobile: "",
-        email: "",
-        avatar: "",
-        description: "",
-        roles: [],
-        departmentId: 0,
-        departmentTitle: "",
-      },
-      roleList: [],
-      errorPass: "",
-      formValidate: {
-        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
-        mobile: [
-          { required: true, message: "手机号不能为空", trigger: "blur" },
-          { validator: validateMobile, trigger: "blur" },
-        ],
-        email: [
-          { required: true, message: "请输入邮箱地址" },
-          { type: "email", message: "邮箱格式不正确" },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getUserList();
-    },
-    handleSelectDepTree(v) {
-      if (v) {
-        this.form.departmentId = v.departmentId;
-        this.form.departmentTitle = v.departmentTitle;
-      } else {
-        this.form.departmentId = 0;
-        this.form.departmentTitle = "";
-      }
-    },
-    handleSelectDep(v) {
-      this.searchForm.departmentId = v;
-    },
-    changePage() {
-      this.getUserList();
-      this.clearSelectAll();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getUserList();
-    },
-    getUserList() {
-      this.loading = true;
-      getUserListData(this.searchForm).then((res) => {
-        this.loading = false;
+defineOptions({ name: "user-manage" });
+
+const loading = ref(true);
+const selectCount = ref(0);
+const selectList = ref([]);
+// 未在 data 声明、原直接挂在 this 上的字段
+let exportData = [];
+const searchForm = reactive({
+  username: "",
+  departmentId: "",
+  mobile: "",
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const modalType = ref(0);
+const userModalVisible = ref(false);
+const modalTitle = ref("");
+const form = ref({
+  username: "",
+  nickName: "",
+  password: "",
+  mobile: "",
+  email: "",
+  avatar: "",
+  description: "",
+  roles: [],
+  departmentId: 0,
+  departmentTitle: "",
+});
+const roleList = ref([]);
+const errorPass = ref("");
+const formValidate = reactive({
+  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
+  mobile: [
+    { required: true, message: "手机号不能为空", trigger: "blur" },
+    { validator: validateMobile, trigger: "blur" },
+  ],
+  email: [
+    { required: true, message: "请输入邮箱地址" },
+    { type: "email", message: "邮箱格式不正确" },
+  ],
+});
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+const searchFormRef = ref(null);
+const depRef = ref(null);
+const tableRef = ref(null);
+const formRef = ref(null);
+const depTreeRef = ref(null);
+
+function init() {
+  getUserList();
+}
+
+function handleSelectDepTree(v) {
+  if (v) {
+    form.value.departmentId = v.departmentId;
+    form.value.departmentTitle = v.departmentTitle;
+  } else {
+    form.value.departmentId = 0;
+    form.value.departmentTitle = "";
+  }
+}
+
+function handleSelectDep(v) {
+  searchForm.departmentId = v;
+}
+
+function changePage() {
+  getUserList();
+  clearSelectAll();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getUserList();
+}
+
+function getUserList() {
+  loading.value = true;
+  getUserListData(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getUserList();
+}
+
+function changeSort(e) {
+  searchForm.sort = e.prop;
+  searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  if (!e.order) {
+    searchForm.order = "";
+  }
+  getUserList();
+}
+
+function getRoleList() {
+  let params = {
+    pageSize: 100,
+  };
+  getAllRoleList(params).then((res) => {
+    if (res.success) {
+      roleList.value = res.result.records;
+    }
+  });
+}
+
+function resetPass() {
+  if (selectCount.value == 0) {
+    ElMessage.warning("请选中数据后重试!");
+    return;
+  }
+  ElMessageBox.confirm("您确认要重置所选的 " + selectCount.value + " 条用户数据密码为【123456】?", "确认重置", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      resetPassword(ids).then((res) => {
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          ElMessage.success("操作成功");
+          clearSelectAll();
+          getUserList();
         }
       });
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getUserList();
-    },
-    changeSort(e) {
-      this.searchForm.sort = e.prop;
-      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      if (!e.order) {
-        this.searchForm.order = "";
-      }
-      this.getUserList();
-    },
-    getRoleList() {
-      let params = {
-        pageSize: 100,
-      };
-      getAllRoleList(params).then((res) => {
-        if (res.success) {
-          this.roleList = res.result.records;
+  }).catch(() => {});
+}
+
+function submitUser() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (modalType.value == 0) {
+        if (form.value.password == "" || form.value.password == undefined) {
+          errorPass.value = "密码不能为空";
+          return;
         }
-      });
-    },
-    resetPass() {
-      if (this.selectCount == 0) {
-        ElMessage.warning("请选中数据后重试!");
-        return;
-      }
-      ElMessageBox.confirm("您确认要重置所选的 " + this.selectCount + " 条用户数据密码为【123456】?", "确认重置", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          resetPassword(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("操作成功");
-              this.clearSelectAll();
-              this.getUserList();
-            }
-          });
-      }).catch(() => {});
-    },
-    submitUser() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (this.modalType == 0) {
-            if (this.form.password == "" || this.form.password == undefined) {
-              this.errorPass = "密码不能为空";
-              return;
-            }
-            if (this.form.password.length < 6) {
-              this.errorPass = "密码长度不得少于6位";
-              return;
-            }
-            if (Array.isArray(this.form.roles) && this.form.roles.length > 9) {
-              ElMessage.warning("角色最多选择9个");
-              return;
-            }
-            const params = {
-              username: this.form.username,
-              password: this.md5(this.form.password),
-              nickName: this.form.nickName,
-              mobile: this.form.mobile,
-              email: this.form.email,
-              avatar: this.form.avatar,
-              description: this.form.description,
-              departmentId: this.form.departmentId,
-              roles: this.form.roles,
-            };
-            this.errorPass = "";
-            this.submitLoading = true;
-            addUser(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getUserList();
-                this.userModalVisible = false;
-              }
-            });
-          } else {
-            this.submitLoading = true;
-            editOtherUser(this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                ElMessage.success("操作成功");
-                this.getUserList();
-                this.userModalVisible = false;
-              }
-            });
+        if (form.value.password.length < 6) {
+          errorPass.value = "密码长度不得少于6位";
+          return;
+        }
+        if (Array.isArray(form.value.roles) && form.value.roles.length > 9) {
+          ElMessage.warning("角色最多选择9个");
+          return;
+        }
+        const params = {
+          username: form.value.username,
+          password: md5(form.value.password),
+          nickName: form.value.nickName,
+          mobile: form.value.mobile,
+          email: form.value.email,
+          avatar: form.value.avatar,
+          description: form.value.description,
+          departmentId: form.value.departmentId,
+          roles: form.value.roles,
+        };
+        errorPass.value = "";
+        submitLoading.value = true;
+        addUser(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            ElMessage.success("操作成功");
+            getUserList();
+            userModalVisible.value = false;
+          }
+        });
+      } else {
+        submitLoading.value = true;
+        editOtherUser(form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            ElMessage.success("操作成功");
+            getUserList();
+            userModalVisible.value = false;
           }
-        }
-      });
-    },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加用户";
-      this.form = {
-        username: "",
-        nickName: "",
-        password: "",
-        mobile: "",
-        email: "",
-        avatar: "",
-        description: "",
-        roles: [],
-        departmentId: 0,
-        departmentTitle: "",
-      };
-      this.userModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-        this.$refs.depTree?.setData("", "");
-      });
-    },
-    edit(v) {
-      this.form = JSON.parse(JSON.stringify(v));
-      this.modalType = 1;
-      this.modalTitle = "编辑用户";
-      for (let attr in this.form) {
-        if (this.form[attr] == null) {
-          this.form[attr] = "";
-        }
-      }
-      const departmentId = this.form.departmentId;
-      const departmentTitle = this.form.departmentTitle;
-      let selectRolesId = [];
-      if (this.form.roles) {
-        this.form.roles.forEach(function (e) {
-          selectRolesId.push(e.id);
         });
       }
-      this.form.roles = selectRolesId;
-      this.userModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-        this.$refs.depTree?.setData(departmentId, departmentTitle);
+    }
+  });
+}
+
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加用户";
+  form.value = {
+    username: "",
+    nickName: "",
+    password: "",
+    mobile: "",
+    email: "",
+    avatar: "",
+    description: "",
+    roles: [],
+    departmentId: 0,
+    departmentTitle: "",
+  };
+  userModalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.resetFields();
+    depTreeRef.value?.setData("", "");
+  });
+}
+
+function edit(v) {
+  form.value = JSON.parse(JSON.stringify(v));
+  modalType.value = 1;
+  modalTitle.value = "编辑用户";
+  for (let attr in form.value) {
+    if (form.value[attr] == null) {
+      form.value[attr] = "";
+    }
+  }
+  const departmentId = form.value.departmentId;
+  const departmentTitle = form.value.departmentTitle;
+  let selectRolesId = [];
+  if (form.value.roles) {
+    form.value.roles.forEach(function (e) {
+      selectRolesId.push(e.id);
+    });
+  }
+  form.value.roles = selectRolesId;
+  userModalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.resetFields();
+    depTreeRef.value?.setData(departmentId, departmentTitle);
+  });
+}
+
+function enable(v) {
+  let params = { status: true };
+  ElMessageBox.confirm("您确认要启用用户 " + v.username + " ?", "确认启用", { type: "warning" }).then(() => {
+      enableUser(v.id, params).then((res) => {
+        if (res.success) {
+          ElMessage.success("操作成功");
+          getUserList();
+        }
       });
-    },
-    enable(v) {
-      let params = { status: true };
-      ElMessageBox.confirm("您确认要启用用户 " + v.username + " ?", "确认启用", { type: "warning" }).then(() => {
-          enableUser(v.id, params).then((res) => {
-            if (res.success) {
-              ElMessage.success("操作成功");
-              this.getUserList();
-            }
-          });
-      }).catch(() => {});
-    },
-    disable(v) {
-      let params = { status: false };
-      ElMessageBox.confirm("您确认要禁用用户 " + v.username + " ?", "确认禁用", { type: "warning" }).then(() => {
-          enableUser(v.id, params).then((res) => {
-            if (res.success) {
-              ElMessage.success("操作成功");
-              this.getUserList();
-            }
-          });
-      }).catch(() => {});
-    },
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除用户 " + v.username + " ?", "确认删除", { type: "warning" }).then(() => {
-          deleteUser(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.getUserList();
-            }
-          });
-      }).catch(() => {});
-    },
-    showSelect(e) {
-      this.exportData = e;
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未选择要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 条数据?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteUser(ids).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除成功");
-              this.clearSelectAll();
-              this.getUserList();
-            }
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-    this.getRoleList();
-  },
-};
+  }).catch(() => {});
+}
+
+function disable(v) {
+  let params = { status: false };
+  ElMessageBox.confirm("您确认要禁用用户 " + v.username + " ?", "确认禁用", { type: "warning" }).then(() => {
+      enableUser(v.id, params).then((res) => {
+        if (res.success) {
+          ElMessage.success("操作成功");
+          getUserList();
+        }
+      });
+  }).catch(() => {});
+}
+
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除用户 " + v.username + " ?", "确认删除", { type: "warning" }).then(() => {
+      deleteUser(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+          getUserList();
+        }
+      });
+  }).catch(() => {});
+}
+
+function showSelect(e) {
+  exportData = e;
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+
+function clearSelectAll() {
+  tableRef.value?.clearSelection();
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未选择要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 条数据?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteUser(ids).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除成功");
+          clearSelectAll();
+          getUserList();
+        }
+      });
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+  getRoleList();
+});
 </script>
 <style scoped>
 .ops a {
diff --git a/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue b/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
index b71bc435c..0efe7478e 100644
--- a/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsCategoryTab.vue
@@ -31,45 +31,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
 import { getWxChannelsThirdCategory } from "@/api/index";
 
-export default {
-  name: "WxChannelsCategoryTab",
-  data() {
-    return {
-      forceRefresh: false,
-      loading: false,
-      data: [],
-    };
-  },
-  mounted() {
-    this.loadThirdCategories();
-  },
-  methods: {
-    qualificationLabel(val) {
-      const map = { 0: "不需要", 1: "必填", 2: "选填" };
-      return map[val] || "-";
-    },
-    qualificationTagType(val) {
-      if (val === 1) return "danger";
-      if (val === 2) return "warning";
-      return "success";
-    },
-    loadThirdCategories() {
-      this.loading = true;
-      getWxChannelsThirdCategory({ forceRefresh: !!this.forceRefresh })
-        .then((res) => {
-          if (res && res.success) {
-            this.data = Array.isArray(res.result) ? res.result : [];
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "WxChannelsCategoryTab" });
+
+const forceRefresh = ref(false);
+const loading = ref(false);
+const data = ref([]);
+
+function qualificationLabel(val) {
+  const map = { 0: "不需要", 1: "必填", 2: "选填" };
+  return map[val] || "-";
+}
+
+function qualificationTagType(val) {
+  if (val === 1) return "danger";
+  if (val === 2) return "warning";
+  return "success";
+}
+
+function loadThirdCategories() {
+  loading.value = true;
+  getWxChannelsThirdCategory({ forceRefresh: !!forceRefresh.value })
+    .then((res) => {
+      if (res && res.success) {
+        data.value = Array.isArray(res.result) ? res.result : [];
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+onMounted(() => {
+  loadThirdCategories();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue b/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
index e4bde9ea0..2d707bdb4 100644
--- a/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsGoodsTab.vue
@@ -58,68 +58,64 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getWxChannelsGoodsPage } from "@/api/index";
 
-export default {
-  name: "WxChannelsGoodsTab",
-  data() {
-    return {
-      statusList: [
-        { label: "已通过", value: "APPROVED" },
-        { label: "审核中", value: "PENDING" },
-        { label: "已拒绝", value: "REJECTED" },
-      ],
-      loading: false,
-      total: 0,
-      data: [],
-      searchForm: {
-        goodsName: "",
-        status: "",
-        pageNumber: 1,
-        pageSize: 20,
-      },
-    };
-  },
-  mounted() {
-    this.loadPage();
-  },
-  methods: {
-    statusLabel(val) {
-      const map = { APPROVED: "已通过", PENDING: "审核中", REJECTED: "已拒绝" };
-      return map[val] || val || "-";
-    },
-    statusTagType(val) {
-      const map = { APPROVED: "success", PENDING: "warning", REJECTED: "danger" };
-      return map[val] || "info";
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    changePage(pageNumber) {
-      this.searchForm.pageNumber = pageNumber;
-      this.loadPage();
-    },
-    changePageSize(pageSize) {
-      this.searchForm.pageSize = pageSize;
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    loadPage() {
-      this.loading = true;
-      getWxChannelsGoodsPage({ ...this.searchForm })
-        .then((res) => {
-          if (res && res.success) {
-            const page = res.result || {};
-            this.data = Array.isArray(page.records) ? page.records : [];
-            this.total = Number(page.total || 0);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "WxChannelsGoodsTab" });
+
+const statusList = ref([
+  { label: "已通过", value: "APPROVED" },
+  { label: "审核中", value: "PENDING" },
+  { label: "已拒绝", value: "REJECTED" },
+]);
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const searchForm = reactive({
+  goodsName: "",
+  status: "",
+  pageNumber: 1,
+  pageSize: 20,
+});
+
+function statusLabel(val) {
+  const map = { APPROVED: "已通过", PENDING: "审核中", REJECTED: "已拒绝" };
+  return map[val] || val || "-";
+}
+function statusTagType(val) {
+  const map = { APPROVED: "success", PENDING: "warning", REJECTED: "danger" };
+  return map[val] || "info";
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function changePage(pageNumber) {
+  searchForm.pageNumber = pageNumber;
+  loadPage();
+}
+function changePageSize(pageSize) {
+  searchForm.pageSize = pageSize;
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function loadPage() {
+  loading.value = true;
+  getWxChannelsGoodsPage({ ...searchForm })
+    .then((res) => {
+      if (res && res.success) {
+        const page = res.result || {};
+        data.value = Array.isArray(page.records) ? page.records : [];
+        total.value = Number(page.total || 0);
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+onMounted(() => {
+  loadPage();
+});
 </script>
diff --git a/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue b/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
index e64768cb1..5be83d133 100644
--- a/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsOrderTab.vue
@@ -70,88 +70,84 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getWxChannelsOrderPage } from "@/api/index";
 
-export default {
-  name: "WxChannelsOrderTab",
-  data() {
-    return {
-      sceneList: [
-        { label: "直播", value: "LIVE" },
-        { label: "橱窗", value: "WINDOW" },
-      ],
-      loading: false,
-      total: 0,
-      data: [],
-      selectDate: null,
-      searchForm: {
-        channelOrderSn: "",
-        memberNickName: "",
-        goodsName: "",
-        status: "",
-        scene: "",
-        startTime: null,
-        endTime: null,
-        pageNumber: 1,
-        pageSize: 20,
-      },
-    };
-  },
-  mounted() {
-    this.loadPage();
-  },
-  methods: {
-    sceneLabel(val) {
-      const map = { LIVE: "直播", WINDOW: "橱窗" };
-      return map[val] || val || "-";
-    },
-    sceneTagType(val) {
-      const map = { LIVE: "warning", WINDOW: "" };
-      return map[val] || "info";
-    },
-    selectDateRange(v) {
-      if (!v || v.length !== 2) {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-        return;
+defineOptions({ name: "WxChannelsOrderTab" });
+
+const sceneList = ref([
+  { label: "直播", value: "LIVE" },
+  { label: "橱窗", value: "WINDOW" },
+]);
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const selectDate = ref(null);
+const searchForm = reactive({
+  channelOrderSn: "",
+  memberNickName: "",
+  goodsName: "",
+  status: "",
+  scene: "",
+  startTime: null,
+  endTime: null,
+  pageNumber: 1,
+  pageSize: 20,
+});
+
+onMounted(() => {
+  loadPage();
+});
+
+function sceneLabel(val) {
+  const map = { LIVE: "直播", WINDOW: "橱窗" };
+  return map[val] || val || "-";
+}
+function sceneTagType(val) {
+  const map = { LIVE: "warning", WINDOW: "" };
+  return map[val] || "info";
+}
+function selectDateRange(v) {
+  if (!v || v.length !== 2) {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+    return;
+  }
+  const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+  const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
+  searchForm.startTime = Number.isFinite(start) ? start : null;
+  searchForm.endTime = Number.isFinite(end) ? end : null;
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function changePage(pageNumber) {
+  searchForm.pageNumber = pageNumber;
+  loadPage();
+}
+function changePageSize(pageSize) {
+  searchForm.pageSize = pageSize;
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function loadPage() {
+  loading.value = true;
+  const params = { ...searchForm };
+  Object.keys(params).forEach((k) => {
+    if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
+  });
+  getWxChannelsOrderPage(params)
+    .then((res) => {
+      if (res && res.success) {
+        const page = res.result || {};
+        data.value = Array.isArray(page.records) ? page.records : [];
+        total.value = Number(page.total || 0);
       }
-      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
-      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
-      this.searchForm.startTime = Number.isFinite(start) ? start : null;
-      this.searchForm.endTime = Number.isFinite(end) ? end : null;
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    changePage(pageNumber) {
-      this.searchForm.pageNumber = pageNumber;
-      this.loadPage();
-    },
-    changePageSize(pageSize) {
-      this.searchForm.pageSize = pageSize;
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    loadPage() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      Object.keys(params).forEach((k) => {
-        if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
-      });
-      getWxChannelsOrderPage(params)
-        .then((res) => {
-          if (res && res.success) {
-            const page = res.result || {};
-            this.data = Array.isArray(page.records) ? page.records : [];
-            this.total = Number(page.total || 0);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
diff --git a/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue b/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
index 7e86136d4..2674a8d85 100644
--- a/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsOverviewTab.vue
@@ -74,66 +74,64 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getWxChannelsOverviewSummary } from "@/api/index";
 
-export default {
-  name: "WxChannelsOverviewTab",
-  data() {
-    return {
-      loading: false,
-      selectDate: null,
-      searchForm: {
-        startTime: null,
-        endTime: null,
-      },
-      summary: {
-        totalSales: 0,
-        liveSales: 0,
-        windowSales: 0,
-        totalRefund: 0,
-        liveRefund: 0,
-        windowRefund: 0,
-      },
-    };
-  },
-  mounted() {
-    this.loadSummary();
-  },
-  methods: {
-    selectDateRange(v) {
-      if (!v || v.length !== 2) {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-        return;
+defineOptions({ name: "WxChannelsOverviewTab" });
+
+const loading = ref(false);
+const selectDate = ref(null);
+const searchForm = reactive({
+  startTime: null,
+  endTime: null,
+});
+const summary = reactive({
+  totalSales: 0,
+  liveSales: 0,
+  windowSales: 0,
+  totalRefund: 0,
+  liveRefund: 0,
+  windowRefund: 0,
+});
+
+onMounted(() => {
+  loadSummary();
+});
+
+function selectDateRange(v) {
+  if (!v || v.length !== 2) {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+    return;
+  }
+  const [startStr, endStr] = v;
+  const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
+  const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
+  searchForm.startTime = Number.isFinite(start) ? start : null;
+  searchForm.endTime = Number.isFinite(end) ? end : null;
+}
+
+function handleSearch() {
+  loadSummary();
+}
+
+function loadSummary() {
+  loading.value = true;
+  const params = { ...searchForm };
+  Object.keys(params).forEach((k) => {
+    if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
+  });
+  getWxChannelsOverviewSummary(params)
+    .then((res) => {
+      if (res && res.success) {
+        Object.assign(summary, res.result || {});
       }
-      const [startStr, endStr] = v;
-      const start = startStr ? new Date(`${startStr}T00:00:00`).getTime() : null;
-      const end = endStr ? new Date(`${endStr}T23:59:59`).getTime() : null;
-      this.searchForm.startTime = Number.isFinite(start) ? start : null;
-      this.searchForm.endTime = Number.isFinite(end) ? end : null;
-    },
-    handleSearch() {
-      this.loadSummary();
-    },
-    loadSummary() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      Object.keys(params).forEach((k) => {
-        if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
-      });
-      getWxChannelsOverviewSummary(params)
-        .then((res) => {
-          if (res && res.success) {
-            this.summary = { ...this.summary, ...(res.result || {}) };
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue b/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
index e9ad2c0ab..6a07c998f 100644
--- a/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsRefundTab.vue
@@ -72,89 +72,85 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getWxChannelsRefundPage } from "@/api/index";
 
-export default {
-  name: "WxChannelsRefundTab",
-  data() {
-    return {
-      sceneList: [
-        { label: "直播", value: "LIVE" },
-        { label: "橱窗", value: "WINDOW" },
-      ],
-      loading: false,
-      total: 0,
-      data: [],
-      selectDate: null,
-      searchForm: {
-        channelRefundSn: "",
-        channelOrderSn: "",
-        memberNickName: "",
-        goodsName: "",
-        status: "",
-        scene: "",
-        startTime: null,
-        endTime: null,
-        pageNumber: 1,
-        pageSize: 20,
-      },
-    };
-  },
-  mounted() {
-    this.loadPage();
-  },
-  methods: {
-    sceneLabel(val) {
-      const map = { LIVE: "直播", WINDOW: "橱窗" };
-      return map[val] || val || "-";
-    },
-    sceneTagType(val) {
-      const map = { LIVE: "warning", WINDOW: "" };
-      return map[val] || "info";
-    },
-    selectDateRange(v) {
-      if (!v || v.length !== 2) {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-        return;
+defineOptions({ name: "WxChannelsRefundTab" });
+
+const sceneList = ref([
+  { label: "直播", value: "LIVE" },
+  { label: "橱窗", value: "WINDOW" },
+]);
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const selectDate = ref(null);
+const searchForm = reactive({
+  channelRefundSn: "",
+  channelOrderSn: "",
+  memberNickName: "",
+  goodsName: "",
+  status: "",
+  scene: "",
+  startTime: null,
+  endTime: null,
+  pageNumber: 1,
+  pageSize: 20,
+});
+
+onMounted(() => {
+  loadPage();
+});
+
+function sceneLabel(val) {
+  const map = { LIVE: "直播", WINDOW: "橱窗" };
+  return map[val] || val || "-";
+}
+function sceneTagType(val) {
+  const map = { LIVE: "warning", WINDOW: "" };
+  return map[val] || "info";
+}
+function selectDateRange(v) {
+  if (!v || v.length !== 2) {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+    return;
+  }
+  const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
+  const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
+  searchForm.startTime = Number.isFinite(start) ? start : null;
+  searchForm.endTime = Number.isFinite(end) ? end : null;
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function changePage(pageNumber) {
+  searchForm.pageNumber = pageNumber;
+  loadPage();
+}
+function changePageSize(pageSize) {
+  searchForm.pageSize = pageSize;
+  searchForm.pageNumber = 1;
+  loadPage();
+}
+function loadPage() {
+  loading.value = true;
+  const params = { ...searchForm };
+  Object.keys(params).forEach((k) => {
+    if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
+  });
+  getWxChannelsRefundPage(params)
+    .then((res) => {
+      if (res && res.success) {
+        const page = res.result || {};
+        data.value = Array.isArray(page.records) ? page.records : [];
+        total.value = Number(page.total || 0);
       }
-      const start = v[0] ? new Date(`${v[0]}T00:00:00`).getTime() : null;
-      const end = v[1] ? new Date(`${v[1]}T23:59:59`).getTime() : null;
-      this.searchForm.startTime = Number.isFinite(start) ? start : null;
-      this.searchForm.endTime = Number.isFinite(end) ? end : null;
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    changePage(pageNumber) {
-      this.searchForm.pageNumber = pageNumber;
-      this.loadPage();
-    },
-    changePageSize(pageSize) {
-      this.searchForm.pageSize = pageSize;
-      this.searchForm.pageNumber = 1;
-      this.loadPage();
-    },
-    loadPage() {
-      this.loading = true;
-      const params = { ...this.searchForm };
-      Object.keys(params).forEach((k) => {
-        if (params[k] === null || params[k] === "" || params[k] === undefined) delete params[k];
-      });
-      getWxChannelsRefundPage(params)
-        .then((res) => {
-          if (res && res.success) {
-            const page = res.result || {};
-            this.data = Array.isArray(page.records) ? page.records : [];
-            this.total = Number(page.total || 0);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
diff --git a/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue b/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
index 048b43f7b..204fdd866 100644
--- a/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
+++ b/manager/src/views/wx-channel/components/WxChannelsSettingTab.vue
@@ -28,8 +28,12 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getSetting, setSetting } from "@/api/index";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "WxChannelsSettingTab" });
 
 const defaultConfig = () => ({
   appId: "",
@@ -38,71 +42,67 @@ const defaultConfig = () => ({
   tokenUrl: "",
 });
 
-export default {
-  name: "WxChannelsSettingTab",
-  data() {
-    return {
-      loading: false,
-      submitLoading: false,
-      configObject: defaultConfig(),
-    };
-  },
-  mounted() {
-    this.reloadConfig();
-  },
-  methods: {
-    normalizeConfig(val) {
-      if (!val) return {};
-      if (typeof val === "string") {
-        try {
-          return JSON.parse(val);
-        } catch (e) {
-          return {};
-        }
-      }
-      if (typeof val === "object") return val;
+const loading = ref(false);
+const submitLoading = ref(false);
+const configObject = ref(defaultConfig());
+
+function normalizeConfig(val) {
+  if (!val) return {};
+  if (typeof val === "string") {
+    try {
+      return JSON.parse(val);
+    } catch (e) {
       return {};
-    },
-    pickConfigFields(val) {
-      const next = defaultConfig();
-      if (!val || typeof val !== "object") return next;
-      Object.keys(next).forEach((k) => {
-        if (val[k] !== undefined && val[k] !== null) {
-          next[k] = val[k];
-        }
-      });
-      return next;
-    },
-    reloadConfig() {
-      this.loading = true;
-      getSetting("WX_CHANNELS")
-        .then((res) => {
-          if (res && res.success) {
-            const raw = this.normalizeConfig(res.result);
-            this.configObject = this.pickConfigFields(raw);
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    submit() {
-      this.submitLoading = true;
-      setSetting("WX_CHANNELS", this.configObject)
-        .then((res) => {
-          if (res && res.success) {
-            this.$Message.success("保存成功");
-            this.reloadConfig();
-          } else {
-            this.$Message.error("保存失败");
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-  },
-};
+    }
+  }
+  if (typeof val === "object") return val;
+  return {};
+}
+
+function pickConfigFields(val) {
+  const next = defaultConfig();
+  if (!val || typeof val !== "object") return next;
+  Object.keys(next).forEach((k) => {
+    if (val[k] !== undefined && val[k] !== null) {
+      next[k] = val[k];
+    }
+  });
+  return next;
+}
+
+function reloadConfig() {
+  loading.value = true;
+  getSetting("WX_CHANNELS")
+    .then((res) => {
+      if (res && res.success) {
+        const raw = normalizeConfig(res.result);
+        configObject.value = pickConfigFields(raw);
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function submit() {
+  submitLoading.value = true;
+  setSetting("WX_CHANNELS", configObject.value)
+    .then((res) => {
+      if (res && res.success) {
+        Message.success("保存成功");
+        reloadConfig();
+      } else {
+        Message.error("保存失败");
+      }
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+
+onMounted(() => {
+  reloadConfig();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/manager/src/views/wx-channel/wxChannel.vue b/manager/src/views/wx-channel/wxChannel.vue
index f10211f35..3ebaabb77 100644
--- a/manager/src/views/wx-channel/wxChannel.vue
+++ b/manager/src/views/wx-channel/wxChannel.vue
@@ -23,7 +23,8 @@
   </el-card>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import WxChannelsSettingTab from "./components/WxChannelsSettingTab.vue";
 import WxChannelsCategoryTab from "./components/WxChannelsCategoryTab.vue";
 import WxChannelsGoodsTab from "./components/WxChannelsGoodsTab.vue";
@@ -31,20 +32,7 @@ import WxChannelsOrderTab from "./components/WxChannelsOrderTab.vue";
 import WxChannelsOverviewTab from "./components/WxChannelsOverviewTab.vue";
 import WxChannelsRefundTab from "./components/WxChannelsRefundTab.vue";
 
-export default {
-  name: "wx-channel",
-  components: {
-    WxChannelsSettingTab,
-    WxChannelsCategoryTab,
-    WxChannelsGoodsTab,
-    WxChannelsOrderTab,
-    WxChannelsOverviewTab,
-    WxChannelsRefundTab,
-  },
-  data() {
-    return {
-      selectedTab: "WX_CHANNELS",
-    };
-  },
-};
+defineOptions({ name: "wx-channel" });
+
+const selectedTab = ref("WX_CHANNELS");
 </script>
diff --git a/seller/MIGRATION-VUE3.md b/seller/MIGRATION-VUE3.md
index da8710594..af535a836 100644
--- a/seller/MIGRATION-VUE3.md
+++ b/seller/MIGRATION-VUE3.md
@@ -2,14 +2,36 @@
 
 ## 已完成
 
-- 依赖升级：`vue@3`、`vue-router@4`、`vuex@4`、`element-plus`、`vue-lazyload@3`
-- 入口：`src/main.js`（`createApp`）
+- 依赖升级：`vue@3`、`vue-router@4`、`element-plus`、`vue-lazyload@3`、`pinia@4`
+- 入口：`src/main.js`（`createApp` + `createPinia`）
 - 路由、动态路由、全局 `$Message` / `$Modal` / `$Notice`、`$filters`
 - 移除 `view-design`，`axios` 已改用 `@/utils/message`
 - 页面装修模块从 manager 同步（`shop/wap`、`shop/modelList` 等）
 - 订单、促销、分销、统计等业务页从 manager 迁移并适配商家 API
 - `yarn run build` 编译通过
 
+## 组合式 API 迁移（2026-10 完成）
+
+全部 169 个 `.vue` 组件已从 Options API 转换为 `<script setup>`，并完成 vuex → pinia：
+
+- **状态管理**：`src/stores/` 下 4 个 store（`app` / `user` / `setting` / `dict`），原 `src/store/`（vuex）已删除，package.json 不再依赖 vuex。原 mutation 全部转为同名 action，两个例外：`storeOpenedList` mutation 改名 `updateOpenedList`（避免与 state 同名）；`clearOtherTags` 改收路由 name 字符串（不再传组件实例 vm）。
+- **util.js 去 vm 化**：`src/libs/util.js` 所有函数的 `vm` 首参已删除，内部直接用 `useAppStore()`。调用方式从 `util.openNewPage(this, name)` 变为 `util.openNewPage(name)`。
+- **defineExpose 清单**（被外部通过 ref 访问的公共组件，改动其内部成员时注意保持暴露面）：
+  - `lili-dialog/index.vue`：`open` / `goodsData` / `goodsFlag` / `flag` / `clearGoodsSelected` / `singleGoods`
+  - `lili-dialog/goods-dialog.vue`：`type`
+  - `sys/oss-manage/ossManage.vue`：`selectImage`
+  - `my-components/verify/index.vue`：`show` / `init`
+  - `my-components/map/multiple-map.vue`：`open`
+  - `lili-components/editor/index.vue`（Tinymce）：`getEditor` / `setContent` / `getContent`
+  - `my-components/lili/department-tree-choose.vue`：`setData` / `clearSelect`
+  - `lili-components/multiple-region.vue`：`clear` / `open`
+  - `main-components/config-drawer.vue`：`open` / `close`
+  - `shop/hotzone/index.vue`：`open` / `close`；`shop/hotzone/components/Zone.vue`：`showModalFn` / `delItem`；`shop/hotzone/components/Hotzone.vue`：`addItem` / `isOverRange` / `overRange` / `changeItem` / `eraseItem` / `zones`（被自定义指令经 `binding.instance` 访问）
+  - `shop/modelForm.vue`：`navList` / `topAdvert`；`goods-seller/goodsOperation.vue`：`activestep`；`goods-seller/goodsOperationFirst.vue`：`selectGoodsType`；`goods-seller/components/AppointmentPublishPanel.vue`：全部 20 个方法
+- **保留 `export default` 普通 script 块的文件**（统计 Options API 残留时需排除）：`shop/wap/template/` 下 3 个 `tpl_*` 组件（保留自定义 `title` 选项）。
+- **修复的历史笔误**：多处 `this.$message`（小写）修正为 `Message`（全局只注册了 `$Message`，原写法运行时会抛 TypeError）——appointment 模块 4 处、goods.vue 1 处等。
+- **其余两端（manager / im）仍为 Options API + vuex**，迁移时参照本端与 buyer 端模式。
+
 ## 本地运行
 
 ```bash
diff --git a/seller/eslint.config.js b/seller/eslint.config.js
index dfdc32276..13265b199 100644
--- a/seller/eslint.config.js
+++ b/seller/eslint.config.js
@@ -47,6 +47,8 @@ module.exports = [
       'vue/no-reserved-component-names': 'off',
       // 存量 49 处直接改 prop，先告警，逐步治理
       'vue/no-mutating-props': 'warn',
+      // 全端已完成 Options API → <script setup> 迁移，防止新代码回退（tpl_* 装修模板的自定义选项普通 script 块等有意保留的除外，故用 warn）
+      'vue/component-api-style': ['warn', ['script-setup']],
     },
   },
   {
diff --git a/seller/package.json b/seller/package.json
index 7d22dbaab..2184b5d7b 100644
--- a/seller/package.json
+++ b/seller/package.json
@@ -24,6 +24,7 @@
     "element-plus": "^2.14.1",
     "js-cookie": "^2.2.1",
     "nprogress": "^0.2.0",
+    "pinia": "^4.0.3",
     "sass": "^1.63.6",
     "sass-loader": "^10.4.1",
     "swiper": "^6.3.5",
@@ -33,7 +34,6 @@
     "vue-qr": "^5.0.3",
     "vue-router": "^4.6.4",
     "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0",
     "xss": "^1.0.7"
   },
   "devDependencies": {
diff --git a/seller/src/App.vue b/seller/src/App.vue
index 014cb8cb2..56c6fe7e5 100644
--- a/seller/src/App.vue
+++ b/seller/src/App.vue
@@ -4,33 +4,36 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from "vue";
 import Cookies from "js-cookie";
 import util from "@/libs/util";
+import { getStore } from "@/libs/storage";
 import { getCategoryTree } from "@/api/goods.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "App",
-  mounted() {
-    const loggedIn =
-      this.getStore("accessToken") || Cookies.get("userInfoSeller");
-    if (loggedIn) {
-      util.bootstrapDynamicRoutesFromCache();
-      util.initRouter(this);
-      this.$store.commit("setOpenedList");
-      this.$store.commit("initCachepage");
-      if (!localStorage.getItem("category")) {
-        getCategoryTree()
-          .then((res) => {
-            if (res.success && Array.isArray(res.result)) {
-              localStorage.setItem("category", JSON.stringify(res.result));
-            }
-          })
-          .catch(() => {});
-      }
+defineOptions({ name: "App" });
+
+const appStore = useAppStore();
+
+onMounted(() => {
+  const loggedIn = getStore("accessToken") || Cookies.get("userInfoSeller");
+  if (loggedIn) {
+    util.bootstrapDynamicRoutesFromCache();
+    util.initRouter();
+    appStore.setOpenedList();
+    appStore.initCachepage();
+    if (!localStorage.getItem("category")) {
+      getCategoryTree()
+        .then((res) => {
+          if (res.success && Array.isArray(res.result)) {
+            localStorage.setItem("category", JSON.stringify(res.result));
+          }
+        })
+        .catch(() => {});
     }
-  },
-};
+  }
+});
 </script>
 
 <style>
diff --git a/seller/src/components/lili/set-password.vue b/seller/src/components/lili/set-password.vue
index ac57ea25f..fdbd4c081 100644
--- a/seller/src/components/lili/set-password.vue
+++ b/seller/src/components/lili/set-password.vue
@@ -29,99 +29,105 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "setPassword",
-  props: {
-    modelValue: String,
-    value: String,
-    size: String,
-    placeholder: {
-      type: String,
-      default: "请输入密码，长度为6-20个字符",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: {
-      type: Number,
-      default: 20,
-    },
+<script setup>
+import { ref, watch } from "vue";
+
+defineOptions({ name: "setPassword" });
+
+const props = defineProps({
+  modelValue: String,
+  value: String,
+  size: String,
+  placeholder: {
+    type: String,
+    default: "请输入密码，长度为6-20个字符",
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  data() {
-    return {
-      currentValue: this.modelValue ?? this.value ?? "",
-      tipStyle: "password-tip-none",
-      strengthValue: 0,
-      progressStatus: "",
-      strength: "无",
-      grade: 0,
-    };
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue(val) {
-      this.setCurrentValue(val);
-    },
-    value(val) {
-      this.setCurrentValue(val);
-    },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    checkStrengthValue(v) {
-      let grade = 0;
-      if (/\d/.test(v)) grade++;
-      if (/[a-z]/.test(v)) grade++;
-      if (/[A-Z]/.test(v)) grade++;
-      if (/\W/.test(v)) grade++;
-      if (v.length >= 10) grade++;
-      this.grade = grade;
-      return grade;
-    },
-    strengthChange() {
-      if (!this.currentValue) {
-        this.tipStyle = "password-tip-none";
-        this.strength = "无";
-        this.strengthValue = 0;
-        return;
-      }
-      const grade = this.checkStrengthValue(this.currentValue);
-      if (grade <= 1) {
-        this.progressStatus = "exception";
-        this.tipStyle = "password-tip-weak";
-        this.strength = "弱";
-        this.strengthValue = 33;
-      } else if (grade >= 2 && grade <= 4) {
-        this.progressStatus = "";
-        this.tipStyle = "password-tip-middle";
-        this.strength = "中";
-        this.strengthValue = 66;
-      } else {
-        this.progressStatus = "success";
-        this.tipStyle = "password-tip-strong";
-        this.strength = "强";
-        this.strengthValue = 100;
-      }
-    },
-    handleChange() {
-      this.strengthChange();
-      this.$emit("update:modelValue", this.currentValue);
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.currentValue = value ?? "";
-      this.strengthChange();
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
+  maxlength: {
+    type: Number,
+    default: 20,
   },
-};
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+
+const currentValue = ref(props.modelValue ?? props.value ?? "");
+const tipStyle = ref("password-tip-none");
+const strengthValue = ref(0);
+const progressStatus = ref("");
+const strength = ref("无");
+const grade = ref(0);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+
+function checkStrengthValue(v) {
+  // 局部变量原名 grade 与顶层 ref 同名，改名避免遮蔽
+  let g = 0;
+  if (/\d/.test(v)) g++;
+  if (/[a-z]/.test(v)) g++;
+  if (/[A-Z]/.test(v)) g++;
+  if (/\W/.test(v)) g++;
+  if (v.length >= 10) g++;
+  grade.value = g;
+  return g;
+}
+
+function strengthChange() {
+  if (!currentValue.value) {
+    tipStyle.value = "password-tip-none";
+    strength.value = "无";
+    strengthValue.value = 0;
+    return;
+  }
+  const grade = checkStrengthValue(currentValue.value);
+  if (grade <= 1) {
+    progressStatus.value = "exception";
+    tipStyle.value = "password-tip-weak";
+    strength.value = "弱";
+    strengthValue.value = 33;
+  } else if (grade >= 2 && grade <= 4) {
+    progressStatus.value = "";
+    tipStyle.value = "password-tip-middle";
+    strength.value = "中";
+    strengthValue.value = 66;
+  } else {
+    progressStatus.value = "success";
+    tipStyle.value = "password-tip-strong";
+    strength.value = "强";
+    strengthValue.value = 100;
+  }
+}
+
+function handleChange() {
+  strengthChange();
+  emit("update:modelValue", currentValue.value);
+  emit("input", currentValue.value);
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
+
+function setCurrentValue(value) {
+  if (value === currentValue.value) return;
+  currentValue.value = value ?? "";
+  strengthChange();
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/components/price-color-scheme.vue b/seller/src/components/price-color-scheme.vue
index e30d15249..f49daf8bd 100644
--- a/seller/src/components/price-color-scheme.vue
+++ b/seller/src/components/price-color-scheme.vue
@@ -5,54 +5,56 @@
   </span>
 </template>
 
-<script>
+<script setup>
+import { computed, getCurrentInstance } from "vue";
 import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "priceColorScheme",
-  props: {
-    value: {
-      default: 0,
-      validator(val) {
-        return (
-          val === null ||
-          val === undefined ||
-          typeof val === "number" ||
-          typeof val === "string"
-        );
-      },
-    },
-    unit: {
-      type: String,
-      default: "￥",
-    },
-    dot: {
-      type: String,
-      default: "",
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    customStyle: {
-      type: Object,
-      default: () => ({}),
+defineOptions({ name: "priceColorScheme" });
+
+const props = defineProps({
+  value: {
+    default: 0,
+    validator(val) {
+      return (
+        val === null ||
+        val === undefined ||
+        typeof val === "number" ||
+        typeof val === "string"
+      );
     },
   },
-  computed: {
-    displayText() {
-      const val = this.value;
-      if (val === null || val === undefined || val === "" || val === "null") {
-        return `${this.unit || "￥"}0.00`;
-      }
-      return unitPrice(val, this.unit);
-    },
-    priceStyle() {
-      const resolvedColor = this.color || this.$mainColor || "";
-      return resolvedColor
-        ? { color: resolvedColor, ...this.customStyle }
-        : { ...this.customStyle };
-    },
+  unit: {
+    type: String,
+    default: "￥",
   },
-};
+  dot: {
+    type: String,
+    default: "",
+  },
+  color: {
+    type: String,
+    default: "",
+  },
+  customStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+// $mainColor 为 main.js 注册的全局属性
+const { proxy } = getCurrentInstance();
+
+const displayText = computed(() => {
+  const val = props.value;
+  if (val === null || val === undefined || val === "" || val === "null") {
+    return `${props.unit || "￥"}0.00`;
+  }
+  return unitPrice(val, props.unit);
+});
+const priceStyle = computed(() => {
+  const resolvedColor = props.color || proxy.$mainColor || "";
+  return resolvedColor
+    ? { color: resolvedColor, ...props.customStyle }
+    : { ...props.customStyle };
+});
 </script>
diff --git a/seller/src/libs/util.js b/seller/src/libs/util.js
index b8898e279..67f7a4f0d 100644
--- a/seller/src/libs/util.js
+++ b/seller/src/libs/util.js
@@ -3,6 +3,7 @@ import lazyLoading from "./lazyLoading.js";
 import { router } from "@/router/index";
 import Cookies from "js-cookie";
 import config from "@/config/index";
+import { useAppStore } from "@/stores/app";
 
 let util = {};
 
@@ -199,13 +200,14 @@ util.handleTitle = function (vm, item) {
   return item.title;
 };
 
-util.setCurrentPath = function (vm, name) {
+util.setCurrentPath = function (name) {
+  const appStore = useAppStore();
   let title = "";
   let isOtherRouter = false;
-  vm.$store.state.app.routers.forEach((item) => {
+  appStore.routers.forEach((item) => {
     if (item.children.length == 1) {
       if (item.children[0].name == name) {
-        title = util.handleTitle(vm, item);
+        title = util.handleTitle(null, item);
         if (item.name == "otherRouter") {
           isOtherRouter = true;
         }
@@ -213,7 +215,7 @@ util.setCurrentPath = function (vm, name) {
     } else {
       item.children.forEach((child) => {
         if (child.name == name) {
-          title = util.handleTitle(vm, child);
+          title = util.handleTitle(null, child);
           if (item.name == "otherRouter") {
             isOtherRouter = true;
           }
@@ -226,8 +228,8 @@ util.setCurrentPath = function (vm, name) {
     currentPathArr = [
       {
         title: util.handleTitle(
-          vm,
-          util.getRouterObjByName(vm.$store.state.app.routers, "home_index")
+          null,
+          util.getRouterObjByName(appStore.routers, "home_index")
         ),
         path: "",
         name: "home_index",
@@ -237,8 +239,8 @@ util.setCurrentPath = function (vm, name) {
     currentPathArr = [
       {
         title: util.handleTitle(
-          vm,
-          util.getRouterObjByName(vm.$store.state.app.routers, "home_index")
+          null,
+          util.getRouterObjByName(appStore.routers, "home_index")
         ),
         path: "/home",
         name: "home_index",
@@ -250,7 +252,7 @@ util.setCurrentPath = function (vm, name) {
       },
     ];
   } else {
-    let currentPathObj = vm.$store.state.app.routers.filter((item) => {
+    let currentPathObj = appStore.routers.filter((item) => {
       if (item.children.length <= 1) {
         return item.children[0].name == name;
       }
@@ -311,22 +313,20 @@ util.setCurrentPath = function (vm, name) {
       ];
     }
   }
-  vm.$store.commit("setCurrentPath", currentPathArr);
+  appStore.setCurrentPath(currentPathArr);
 
   return currentPathArr;
 };
 
-util.openNewPage = function (vm, name, argu, query) {
-  if (!vm.$store) {
-    return;
-  }
-  let storeOpenedList = vm.$store.state.app.storeOpenedList;
+util.openNewPage = function (name, argu, query) {
+  const appStore = useAppStore();
+  let storeOpenedList = appStore.storeOpenedList;
   let openedPageLen = storeOpenedList.length;
   let i = 0;
   let tagHasOpened = false;
   while (i < openedPageLen) {
     if (name == storeOpenedList[i].name) {
-      vm.$store.commit("storeOpenedList", {
+      appStore.updateOpenedList({
         index: i,
         argu: argu,
         query: query,
@@ -337,7 +337,7 @@ util.openNewPage = function (vm, name, argu, query) {
     i++;
   }
   if (!tagHasOpened) {
-    let tag = vm.$store.state.app.tagsList.filter((item) => {
+    let tag = appStore.tagsList.filter((item) => {
       if (item.children) {
         return name == item.children[0].name;
       }
@@ -348,10 +348,10 @@ util.openNewPage = function (vm, name, argu, query) {
       tag = tag.children ? tag.children[0] : tag;
       if (argu) tag.argu = argu;
       if (query) tag.query = query;
-      vm.$store.commit("increateTag", tag);
+      appStore.increateTag(tag);
     }
   }
-  vm.$store.commit("setCurrentPageName", name);
+  appStore.setCurrentPageName(name);
 };
 
 util.toDefaultPage = function (routers, name, route, next) {
@@ -378,13 +378,14 @@ util.toDefaultPage = function (routers, name, route, next) {
   }
 };
 
-util.initRouter = function (vm) {
+util.initRouter = function () {
+  const appStore = useAppStore();
   const constRoutes = [];
   let userInfo = Cookies.get("userInfoSeller");
   if (!userInfo) {
     return;
   }
-  if (!vm.$store.state.app.added) {
+  if (!appStore.added) {
     getCurrentPermissionList().then((res) => {
       if (!res.success) return false;
       let menuData = res.result;
@@ -405,24 +406,23 @@ util.initRouter = function (vm) {
       }
       util.initAllMenuData(constRoutes, menuData);
       util.registerDynamicRoutes(menuData);
-      vm.$store.commit(
-        "updateAppRouter",
+      appStore.updateAppRouter(
         constRoutes.filter((item) => item.children && item.children.length > 0)
       );
-      util.initMenuData(vm, menuData);
+      util.initMenuData(menuData);
       window.localStorage.setItem("menuData", JSON.stringify(menuData));
-      vm.$store.commit("setAdded", true);
+      appStore.setAdded(true);
     });
   } else {
     let data = window.localStorage.getItem("menuData");
     if (!data) {
-      vm.$store.commit("setAdded", false);
-      util.initRouter(vm);
+      appStore.setAdded(false);
+      util.initRouter();
       return;
     }
     let menuData = JSON.parse(data);
     util.registerDynamicRoutes(menuData);
-    util.initMenuData(vm, menuData);
+    util.initMenuData(menuData);
   }
 };
 
@@ -438,7 +438,8 @@ util.initAllMenuData = function (constRoutes, data) {
   util.initRouterNode(constRoutes, allMenuData);
 };
 
-util.initMenuData = function (vm, data) {
+util.initMenuData = function (data) {
+  const appStore = useAppStore();
   const menuRoutes = [];
   let menuData = data;
   let navList = [HOME_NAV_ITEM];
@@ -448,23 +449,23 @@ util.initMenuData = function (vm, data) {
   if (navList.length < 1) {
     return;
   }
-  vm.$store.commit("setNavList", navList);
+  appStore.setNavList(navList);
   let currNav = window.localStorage.getItem("currNav");
   if (currNav) {
     for (let item of navList) {
       if (item.name == currNav) {
-        vm.$store.commit("setCurrNavTitle", item.title);
+        appStore.setCurrNavTitle(item.title);
         break;
       }
     }
   } else {
     currNav = HOME_NAV_NAME;
-    vm.$store.commit("setCurrNavTitle", HOME_NAV_ITEM.title);
+    appStore.setCurrNavTitle(HOME_NAV_ITEM.title);
   }
-  vm.$store.commit("setCurrNav", currNav);
+  appStore.setCurrNav(currNav);
 
   if (currNav === HOME_NAV_NAME) {
-    vm.$store.commit("updateMenulist", []);
+    appStore.updateMenulist([]);
     return;
   }
 
@@ -475,20 +476,19 @@ util.initMenuData = function (vm, data) {
     }
   }
   util.initRouterNode(menuRoutes, menuData);
-  vm.$store.commit(
-    "updateMenulist",
+  appStore.updateMenulist(
     menuRoutes.filter((item) => item.children.length > 0)
   );
 
   let tagsList = [];
-  vm.$store.state.app.routers.map((item) => {
+  appStore.routers.map((item) => {
     if (item.children.length <= 1) {
       tagsList.push(item.children[0]);
     } else {
       tagsList.push(...item.children);
     }
   });
-  vm.$store.commit("setTagsList", tagsList);
+  appStore.setTagsList(tagsList);
 };
 
 util.initRouterNode = function (routers, data) {
diff --git a/seller/src/main.js b/seller/src/main.js
index 821d1f0bf..0396b42fd 100644
--- a/seller/src/main.js
+++ b/seller/src/main.js
@@ -1,8 +1,8 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import "./styles/theme.less";
 import App from "./App.vue";
 import { router } from "./router/index";
-import store from "./store";
 import { setupElementPlus } from "@/plugins/element";
 import { setupLegacyMessage } from "@/utils/message";
 import liliDialog from "@/views/lili-dialog";
@@ -50,7 +50,7 @@ app.use(VueLazyload, {
 });
 
 app.use(router);
-app.use(store);
+app.use(createPinia());
 
 app.component("liliDialog", liliDialog);
 app.component("priceColorScheme", PriceColorScheme);
diff --git a/seller/src/router/index.js b/seller/src/router/index.js
index f53a6e111..493c83458 100644
--- a/seller/src/router/index.js
+++ b/seller/src/router/index.js
@@ -3,7 +3,6 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 import Util from "../libs/util";
 import Cookies from "js-cookie";
-import store from "@/store";
 import { routers } from "./router";
 
 NProgress.configure({ showSpinner: false });
@@ -44,7 +43,7 @@ router.beforeEach((to, from, next) => {
 });
 
 router.afterEach((to) => {
-  Util.openNewPage({ $store: store }, to.name, to.params, to.query);
+  Util.openNewPage(to.name, to.params, to.query);
   NProgress.done();
   window.scrollTo(0, 0);
 });
diff --git a/seller/src/store/index.js b/seller/src/store/index.js
deleted file mode 100644
index 779cf67ad..000000000
--- a/seller/src/store/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createStore } from "vuex";
-import app from "./modules/app";
-import setting from "./modules/setting";
-import user from "./modules/user";
-import dict from "./modules/dict";
-
-const store = createStore({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {
-    app,
-    user,
-    setting,
-    dict,
-  },
-});
-
-export default store;
diff --git a/seller/src/store/modules/app.js b/seller/src/store/modules/app.js
deleted file mode 100644
index fe8f55edf..000000000
--- a/seller/src/store/modules/app.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import { otherRouter } from "@/router/router";
-import Util from "@/libs/util";
-
-const app = {
-  state: {
-    shipTemplates: "",
-    regions: [],
-    styleStore: "",
-    loading: false,
-    added: false,
-    navList: [],
-    currNav: "",
-    currNavTitle: "",
-    cachePage: [],
-    lang: "",
-    isFullScreen: false,
-    openedSubmenuArr: [],
-    menuTheme: "dark",
-    themeColor: "",
-    storeOpenedList: [
-      {
-        title: "首页",
-        path: "",
-        name: "home_index",
-      },
-    ],
-    currentPageName: "",
-    currentPath: [
-      {
-        title: "首页",
-        path: "",
-        name: "home_index",
-      },
-    ],
-    menuList: [],
-    routers: [otherRouter],
-    tagsList: [...otherRouter.children],
-    messageCount: 0,
-    dontCache: ["test", "test"],
-    refMenu: "",
-  },
-  mutations: {
-    childrenMenu(state, v) {
-      state.refMenu = v;
-    },
-    updateAppRouter(state, routes) {
-      state.routers.push(...routes);
-    },
-    updateDefaultRouter() {},
-    setLoading(state, v) {
-      state.loading = v;
-    },
-    setAdded(state, v) {
-      state.added = v;
-    },
-    setNavList(state, list) {
-      state.navList = list;
-    },
-    setCurrNav(state, v) {
-      state.currNav = v;
-    },
-    setCurrNavTitle(state, v) {
-      state.currNavTitle = v;
-    },
-    setTagsList(state, list) {
-      state.tagsList.push(...list);
-    },
-    updateMenulist(state, routes) {
-      state.menuList = routes;
-    },
-    addOpenSubmenu(state, name) {
-      if (name.length && state.openedSubmenuArr.indexOf(name) === -1) {
-        state.openedSubmenuArr.push(name);
-      }
-    },
-    closePage(state, name) {
-      state.cachePage.forEach((item, index) => {
-        if (item == name) {
-          state.cachePage.splice(index, 1);
-        }
-      });
-      localStorage.cachePage = JSON.stringify(state.cachePage);
-    },
-    initCachepage(state) {
-      if (localStorage.cachePage) {
-        state.cachePage = JSON.parse(localStorage.cachePage);
-      }
-    },
-    removeTag(state, name) {
-      state.storeOpenedList.map((item, index) => {
-        if (item.name == name) {
-          state.storeOpenedList.splice(index, 1);
-        }
-      });
-    },
-    storeOpenedList(state, get) {
-      let openedPage = state.storeOpenedList[get.index];
-      if (get.argu) openedPage.argu = get.argu;
-      if (get.query) openedPage.query = get.query;
-      state.storeOpenedList.splice(get.index, 1, openedPage);
-      localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
-    },
-    clearAllTags(state) {
-      state.storeOpenedList.splice(1);
-      state.cachePage.length = 0;
-      localStorage.cachePage = "";
-      localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
-    },
-    clearOtherTags(state, vm) {
-      let currentName = vm.$route.name;
-      let currentIndex = 0;
-      state.storeOpenedList.forEach((item, index) => {
-        if (item.name == currentName) {
-          currentIndex = index;
-        }
-      });
-      if (currentIndex == 0) {
-        state.storeOpenedList.splice(1);
-      } else {
-        state.storeOpenedList.splice(currentIndex + 1);
-        state.storeOpenedList.splice(1, currentIndex - 1);
-      }
-      state.cachePage = state.cachePage.filter((item) => item == currentName);
-      localStorage.cachePage = JSON.stringify(state.cachePage);
-      localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
-    },
-    setOpenedList(state) {
-      state.storeOpenedList = localStorage.storeOpenedList
-        ? JSON.parse(localStorage.storeOpenedList)
-        : [otherRouter.children[0]];
-    },
-    setCurrentPath(state, pathArr) {
-      state.currentPath = pathArr;
-    },
-    setCurrentPageName(state, name) {
-      state.currentPageName = name;
-    },
-    setAvatarPath(state, path) {
-      localStorage.avatorImgPath = path;
-    },
-    switchLang(state, lang) {
-      state.lang = lang;
-      localStorage.lang = lang;
-    },
-    clearOpenedSubmenu(state) {
-      state.openedSubmenuArr.length = 0;
-    },
-    setMessageCount(state, count) {
-      state.messageCount = count;
-    },
-    increateTag(state, tagObj) {
-      if (!Util.oneOf(tagObj.name, state.dontCache)) {
-        state.cachePage.push(tagObj.name);
-        localStorage.cachePage = JSON.stringify(state.cachePage);
-      }
-      state.storeOpenedList.push(tagObj);
-      localStorage.storeOpenedList = JSON.stringify(state.storeOpenedList);
-    },
-  },
-};
-
-export default app;
diff --git a/seller/src/store/modules/dict.js b/seller/src/store/modules/dict.js
deleted file mode 100644
index 13580af30..000000000
--- a/seller/src/store/modules/dict.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const dict = {
-    state: {
-        // 经常需要读取的数据字典
-        sex: [],
-        messageType: [],
-        priority: [],
-        leaveType: []
-    },
-    mutations: {
-        // 设置值的改变方法
-        setSex(state, list) {
-            state.sex = list;
-        },
-        setMessageType(state, list) {
-            state.messageType = list;
-        },
-        setPriority(state, list) {
-            state.priority = list;
-        },
-        setLeaveType(state, list) {
-            state.leaveType = list;
-        },
-    }
-};
-
-export default dict;
diff --git a/seller/src/store/modules/setting.js b/seller/src/store/modules/setting.js
deleted file mode 100644
index b7b1ac2f7..000000000
--- a/seller/src/store/modules/setting.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import config from "@/config/index";
-
-const { setting } = config;
-
-const localSetting = window.localStorage.getItem('setting')
-const settingData = {
-  state: {
-    setting:localSetting ? JSON.parse(localSetting) : setting,
-  },
-  mutations: {
-    updateSetting(state, data) {
-      state.setting = data;
-    },
-  },
-};
-
-export default settingData;
diff --git a/seller/src/store/modules/user.js b/seller/src/store/modules/user.js
deleted file mode 100644
index b96797e13..000000000
--- a/seller/src/store/modules/user.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Cookies from 'js-cookie';
-import { removeStore } from '@/libs/storage';
-
-// 退出登录时需要清除的会话/店铺数据
-// 保留 uuid（设备标识）、setting（主题）、currNav、category（缓存）、saveLogin（记住登录状态）等无关键
-const LOGOUT_KEYS = [
-    'accessToken',
-    'refreshToken',
-    'menuData',
-    'seller_expiration_time',
-    'sellersiteName',
-    'sellerlogoImg',
-    'sellerIconImg'
-];
-
-const user = {
-    state: {},
-    mutations: {
-        logout () {
-            Cookies.remove('userInfoSeller');
-            // 精确清除会话相关键，不再 localStorage.clear() 误删无关数据
-            LOGOUT_KEYS.forEach(key => removeStore(key));
-        }
-    }
-};
-
-export default user;
diff --git a/seller/src/stores/app.js b/seller/src/stores/app.js
new file mode 100644
index 000000000..3cda0c3fa
--- /dev/null
+++ b/seller/src/stores/app.js
@@ -0,0 +1,162 @@
+import { defineStore } from "pinia";
+import { otherRouter } from "@/router/router";
+
+// 原 vuex app 模块的 pinia 版本；mutation 全部转为同名 action
+// 例外：storeOpenedList mutation 与 state 同名，改名 updateOpenedList；
+// clearOtherTags 原接收组件实例 vm，改为直接接收当前路由名 currentName
+export const useAppStore = defineStore("app", {
+  state: () => ({
+    shipTemplates: "",
+    regions: [],
+    styleStore: "",
+    loading: false,
+    added: false,
+    navList: [],
+    currNav: "",
+    currNavTitle: "",
+    cachePage: [],
+    lang: "",
+    isFullScreen: false,
+    openedSubmenuArr: [],
+    menuTheme: "dark",
+    themeColor: "",
+    storeOpenedList: [
+      {
+        title: "首页",
+        path: "",
+        name: "home_index",
+      },
+    ],
+    currentPageName: "",
+    currentPath: [
+      {
+        title: "首页",
+        path: "",
+        name: "home_index",
+      },
+    ],
+    menuList: [],
+    routers: [otherRouter],
+    tagsList: [...otherRouter.children],
+    messageCount: 0,
+    dontCache: ["test", "test"],
+    refMenu: "",
+  }),
+  actions: {
+    childrenMenu(v) {
+      this.refMenu = v;
+    },
+    updateAppRouter(routes) {
+      this.routers.push(...routes);
+    },
+    updateDefaultRouter() {},
+    setLoading(v) {
+      this.loading = v;
+    },
+    setAdded(v) {
+      this.added = v;
+    },
+    setNavList(list) {
+      this.navList = list;
+    },
+    setCurrNav(v) {
+      this.currNav = v;
+    },
+    setCurrNavTitle(v) {
+      this.currNavTitle = v;
+    },
+    setTagsList(list) {
+      this.tagsList.push(...list);
+    },
+    updateMenulist(routes) {
+      this.menuList = routes;
+    },
+    addOpenSubmenu(name) {
+      if (name.length && this.openedSubmenuArr.indexOf(name) === -1) {
+        this.openedSubmenuArr.push(name);
+      }
+    },
+    closePage(name) {
+      this.cachePage.forEach((item, index) => {
+        if (item == name) {
+          this.cachePage.splice(index, 1);
+        }
+      });
+      localStorage.cachePage = JSON.stringify(this.cachePage);
+    },
+    initCachepage() {
+      if (localStorage.cachePage) {
+        this.cachePage = JSON.parse(localStorage.cachePage);
+      }
+    },
+    removeTag(name) {
+      this.storeOpenedList.map((item, index) => {
+        if (item.name == name) {
+          this.storeOpenedList.splice(index, 1);
+        }
+      });
+    },
+    updateOpenedList(get) {
+      let openedPage = this.storeOpenedList[get.index];
+      if (get.argu) openedPage.argu = get.argu;
+      if (get.query) openedPage.query = get.query;
+      this.storeOpenedList.splice(get.index, 1, openedPage);
+      localStorage.storeOpenedList = JSON.stringify(this.storeOpenedList);
+    },
+    clearAllTags() {
+      this.storeOpenedList.splice(1);
+      this.cachePage.length = 0;
+      localStorage.cachePage = "";
+      localStorage.storeOpenedList = JSON.stringify(this.storeOpenedList);
+    },
+    clearOtherTags(currentName) {
+      let currentIndex = 0;
+      this.storeOpenedList.forEach((item, index) => {
+        if (item.name == currentName) {
+          currentIndex = index;
+        }
+      });
+      if (currentIndex == 0) {
+        this.storeOpenedList.splice(1);
+      } else {
+        this.storeOpenedList.splice(currentIndex + 1);
+        this.storeOpenedList.splice(1, currentIndex - 1);
+      }
+      this.cachePage = this.cachePage.filter((item) => item == currentName);
+      localStorage.cachePage = JSON.stringify(this.cachePage);
+      localStorage.storeOpenedList = JSON.stringify(this.storeOpenedList);
+    },
+    setOpenedList() {
+      this.storeOpenedList = localStorage.storeOpenedList
+        ? JSON.parse(localStorage.storeOpenedList)
+        : [otherRouter.children[0]];
+    },
+    setCurrentPath(pathArr) {
+      this.currentPath = pathArr;
+    },
+    setCurrentPageName(name) {
+      this.currentPageName = name;
+    },
+    setAvatarPath(path) {
+      localStorage.avatorImgPath = path;
+    },
+    switchLang(lang) {
+      this.lang = lang;
+      localStorage.lang = lang;
+    },
+    clearOpenedSubmenu() {
+      this.openedSubmenuArr.length = 0;
+    },
+    setMessageCount(count) {
+      this.messageCount = count;
+    },
+    increateTag(tagObj) {
+      if (this.dontCache.indexOf(tagObj.name) < 0) {
+        this.cachePage.push(tagObj.name);
+        localStorage.cachePage = JSON.stringify(this.cachePage);
+      }
+      this.storeOpenedList.push(tagObj);
+      localStorage.storeOpenedList = JSON.stringify(this.storeOpenedList);
+    },
+  },
+});
diff --git a/seller/src/stores/dict.js b/seller/src/stores/dict.js
new file mode 100644
index 000000000..c97cb8a90
--- /dev/null
+++ b/seller/src/stores/dict.js
@@ -0,0 +1,26 @@
+import { defineStore } from "pinia";
+
+export const useDictStore = defineStore("dict", {
+  state: () => ({
+    // 经常需要读取的数据字典
+    sex: [],
+    messageType: [],
+    priority: [],
+    leaveType: [],
+  }),
+  actions: {
+    // 设置值的改变方法
+    setSex(list) {
+      this.sex = list;
+    },
+    setMessageType(list) {
+      this.messageType = list;
+    },
+    setPriority(list) {
+      this.priority = list;
+    },
+    setLeaveType(list) {
+      this.leaveType = list;
+    },
+  },
+});
diff --git a/seller/src/stores/setting.js b/seller/src/stores/setting.js
new file mode 100644
index 000000000..20498c1ca
--- /dev/null
+++ b/seller/src/stores/setting.js
@@ -0,0 +1,17 @@
+import { defineStore } from "pinia";
+import config from "@/config/index";
+
+const { setting } = config;
+
+const localSetting = window.localStorage.getItem("setting");
+
+export const useSettingStore = defineStore("setting", {
+  state: () => ({
+    setting: localSetting ? JSON.parse(localSetting) : setting,
+  }),
+  actions: {
+    updateSetting(data) {
+      this.setting = data;
+    },
+  },
+});
diff --git a/seller/src/stores/user.js b/seller/src/stores/user.js
new file mode 100644
index 000000000..81880d819
--- /dev/null
+++ b/seller/src/stores/user.js
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import Cookies from "js-cookie";
+import { removeStore } from "@/libs/storage";
+
+// 退出登录时需要清除的会话/店铺数据
+// 保留 uuid（设备标识）、setting（主题）、currNav、category（缓存）、saveLogin（记住登录状态）等无关键
+const LOGOUT_KEYS = [
+  "accessToken",
+  "refreshToken",
+  "menuData",
+  "seller_expiration_time",
+  "sellersiteName",
+  "sellerlogoImg",
+  "sellerIconImg",
+];
+
+export const useUserStore = defineStore("user", {
+  actions: {
+    logout() {
+      Cookies.remove("userInfoSeller");
+      // 精确清除会话相关键，不再 localStorage.clear() 误删无关数据
+      LOGOUT_KEYS.forEach((key) => removeStore(key));
+    },
+  },
+});
diff --git a/seller/src/views/ForgetPassword.vue b/seller/src/views/ForgetPassword.vue
index 2a89218e8..65573dd82 100644
--- a/seller/src/views/ForgetPassword.vue
+++ b/seller/src/views/ForgetPassword.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="forget-password" @click="$refs.verify.show = false">
+  <div class="forget-password" @click="hideVerify">
     <div style="height: 50px"></div>
     <div class="logo-box">
-      <img :src="$store.state.logoImg" width="150" @click="$router.push('/')" />
+      <img :src="logoImg" width="150" @click="$router.push('/')" />
       <div>修改密码</div>
     </div>
     <div class="login-container">
       <el-form
-        ref="formFirst"
+        ref="formFirstRef"
         :model="formFirst"
         :rules="ruleInline"
         style="width: 300px"
@@ -46,7 +46,7 @@
         </el-form-item>
       </el-form>
       <el-form
-        ref="form"
+        ref="formRef"
         :model="form"
         :rules="ruleInline"
         style="width: 300px"
@@ -91,7 +91,7 @@
         </el-form-item>
       </el-form>
       <verify
-        ref="verify"
+        ref="verifyRef"
         class="verify-con"
         :verifyType="verifyType"
         @change="verifyChange"
@@ -115,157 +115,171 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { Iphone, Message, Lock } from "@element-plus/icons-vue";
+import { Message as $Message } from "@/utils/message";
+import { md5 } from "@/utils/md5.js";
 import * as RegExp from "@/utils/regular.js";
 import * as apiLogin from "@/api/index.js";
 import { sendSms } from "@/api/common.js";
 import config from "@/config/index";
 import verify from "@/views/my-components/verify";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "ForgetPassword",
-  components: { verify, Iphone, Message, Lock },
-  data() {
-    return {
-      config,
-      loading: false,
-      loading1: false,
-      formFirst: {
-        mobile: "",
-        code: "",
-      },
-      form: {
-        password: "",
-        oncePasd: "",
-      },
-      year: new Date().getFullYear(),
-      step: 0,
-      ruleInline: {
-        mobile: [
-          { required: true, message: "请输入手机号码" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-        code: [{ required: true, message: "请输入手机验证码" }],
-        password: [
-          { required: true, message: "密码不能为空" },
-          { pattern: RegExp.password, message: "密码不能少于6位" },
-        ],
-      },
-      verifyStatus: false,
-      verifyType: "FIND_USER",
-      codeMsg: "发送验证码",
-      interval: "",
-      time: 60,
-    };
-  },
-  methods: {
-    next() {
-      this.$refs.formFirst.validate((valid) => {
-        if (valid) {
-          this.loading = true;
-          const data = JSON.parse(JSON.stringify(this.formFirst));
-          apiLogin
-            .validateCode(data)
-            .then((res) => {
-              this.loading = false;
-              if (res.success) {
-                this.step = 1;
-              } else {
-                this.$Message.warning(res.message);
-              }
-            })
-            .catch(() => {
-              this.loading = false;
-            });
-        }
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          if (params.password !== params.oncePasd) {
-            this.$Message.warning("两次输入密码不一致");
-            return;
-          }
-          params.mobile = this.formFirst.mobile;
-          params.password = this.md5(params.password);
-          delete params.oncePasd;
-          this.loading1 = true;
+defineOptions({ name: "ForgetPassword" });
 
-          apiLogin
-            .forgetAndModify(params)
-            .then((res) => {
-              this.loading1 = false;
-              if (res.success) {
-                this.$Message.success("修改密码成功");
-                this.$router.push("login");
-              }
-            })
-            .catch(() => {
-              this.loading1 = false;
-            });
-        }
-      });
+const router = useRouter();
+const appStore = useAppStore();
+
+const logoImg = computed(() => appStore.logoImg);
+
+const loading = ref(false);
+const loading1 = ref(false);
+const formFirst = reactive({
+  mobile: "",
+  code: "",
+});
+const form = reactive({
+  password: "",
+  oncePasd: "",
+});
+const year = new Date().getFullYear();
+const step = ref(0);
+const ruleInline = {
+  mobile: [
+    { required: true, message: "请输入手机号码" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
     },
-    sendCode() {
-      if (this.time === 60) {
-        if (this.formFirst.mobile === "") {
-          this.$Message.warning("请先填写手机号");
-          return;
-        }
-        if (!this.verifyStatus) {
-          this.$Message.warning("请先完成安全验证");
-          return;
-        }
-        const params = {
-          mobile: this.formFirst.mobile,
-          verificationEnums: "FIND_USER",
-        };
-        sendSms(params)
-          .then((res) => {
-            if (res.success) {
-              this.$Message.success("验证码发送成功");
-              const that = this;
-              this.interval = setInterval(() => {
-                that.time--;
-                if (that.time === 0) {
-                  that.time = 60;
-                  that.codeMsg = "重新发送";
-                  that.verifyStatus = false;
-                  clearInterval(that.interval);
-                } else {
-                  that.codeMsg = that.time;
-                }
-              }, 1000);
-            } else {
-              this.$Message.warning(res.message);
-            }
-          })
-          .catch(() => {});
-      }
-    },
-    verifyChange(con) {
-      if (!con.status) return;
-      this.$refs.verify.show = false;
-      this.verifyStatus = true;
-    },
-    verifyBtnClick() {
-      if (!this.verifyStatus) {
-        this.$refs.verify.init();
-      }
-    },
-  },
-  mounted() {
-    document.querySelector(".forget-password").style.height = window.innerHeight + "px";
-    this.$refs.formFirst.resetFields();
-  },
+  ],
+  code: [{ required: true, message: "请输入手机验证码" }],
+  password: [
+    { required: true, message: "密码不能为空" },
+    { pattern: RegExp.password, message: "密码不能少于6位" },
+  ],
 };
+const verifyStatus = ref(false);
+const verifyType = ref("FIND_USER");
+const codeMsg = ref("发送验证码");
+const interval = ref("");
+const time = ref(60);
+
+const formFirstRef = ref(null);
+const formRef = ref(null);
+const verifyRef = ref(null);
+
+function hideVerify() {
+  verifyRef.value.show = false;
+}
+
+function next() {
+  formFirstRef.value.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      const data = JSON.parse(JSON.stringify(formFirst));
+      apiLogin
+        .validateCode(data)
+        .then((res) => {
+          loading.value = false;
+          if (res.success) {
+            step.value = 1;
+          } else {
+            $Message.warning(res.message);
+          }
+        })
+        .catch(() => {
+          loading.value = false;
+        });
+    }
+  });
+}
+
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(form));
+      if (params.password !== params.oncePasd) {
+        $Message.warning("两次输入密码不一致");
+        return;
+      }
+      params.mobile = formFirst.mobile;
+      params.password = md5(params.password);
+      delete params.oncePasd;
+      loading1.value = true;
+
+      apiLogin
+        .forgetAndModify(params)
+        .then((res) => {
+          loading1.value = false;
+          if (res.success) {
+            $Message.success("修改密码成功");
+            router.push("login");
+          }
+        })
+        .catch(() => {
+          loading1.value = false;
+        });
+    }
+  });
+}
+
+function sendCode() {
+  if (time.value === 60) {
+    if (formFirst.mobile === "") {
+      $Message.warning("请先填写手机号");
+      return;
+    }
+    if (!verifyStatus.value) {
+      $Message.warning("请先完成安全验证");
+      return;
+    }
+    const params = {
+      mobile: formFirst.mobile,
+      verificationEnums: "FIND_USER",
+    };
+    sendSms(params)
+      .then((res) => {
+        if (res.success) {
+          $Message.success("验证码发送成功");
+          interval.value = setInterval(() => {
+            time.value--;
+            if (time.value === 0) {
+              time.value = 60;
+              codeMsg.value = "重新发送";
+              verifyStatus.value = false;
+              clearInterval(interval.value);
+            } else {
+              codeMsg.value = time.value;
+            }
+          }, 1000);
+        } else {
+          $Message.warning(res.message);
+        }
+      })
+      .catch(() => {});
+  }
+}
+
+function verifyChange(con) {
+  if (!con.status) return;
+  hideVerify();
+  verifyStatus.value = true;
+}
+
+function verifyBtnClick() {
+  if (!verifyStatus.value) {
+    verifyRef.value.init();
+  }
+}
+
+onMounted(() => {
+  document.querySelector(".forget-password").style.height = window.innerHeight + "px";
+  formFirstRef.value.resetFields();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/Main.vue b/seller/src/views/Main.vue
index 83575b3ce..f0d80136d 100644
--- a/seller/src/views/Main.vue
+++ b/seller/src/views/Main.vue
@@ -75,11 +75,13 @@
       </div>
     </div>
     <circleLoading class="loading-position" v-show="loading" />
-    <configDrawer ref="config" />
+    <configDrawer ref="configRef" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { ChatDotRound, Setting, UserFilled } from "@element-plus/icons-vue";
 import shrinkableMenu from "./main-components/shrinkable-menu/shrinkable-menu.vue";
 import tagsPageOpened from "./main-components/tags-page-opened.vue";
@@ -92,147 +94,134 @@ import { logout } from "@/api/index";
 import { getIMDetail } from "@/api/common";
 import { userMsg } from "@/api/index";
 import config from "@/config/index.js";
+import { Message } from "@/utils/message";
+import { getStore, setStore } from "@/libs/storage";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
+import { useSettingStore } from "@/stores/setting";
 
-export default {
-  components: {
-    ChatDotRound,
-    Setting,
-    UserFilled,
-    shrinkableMenu,
-    tagsPageOpened,
-    circleLoading,
-    configDrawer,
-    storeQrcode,
-  },
-  data() {
-    return {
-      config,
-      sliceNum: 5,
-      userInfo: {},
-      storeSideLogo: "",
-      IMLink: "",
-      load: false,
-    };
-  },
-  computed: {
-    setting() {
-      return this.$store.state.setting.setting;
-    },
-    loading() {
-      return this.$store.state.app.loading;
-    },
-    pageTagsList() {
-      return this.$store.state.app.storeOpenedList;
-    },
-    showSubMenu() {
-      return this.$store.state.app.menuList.length > 0;
-    },
-    lang() {
-      return this.$store.state.app.lang;
-    },
-  },
-  methods: {
-    handleClickSetting() {
-      this.$refs.config.open();
-    },
-    async im() {
-      const accessToken = this.getStore("accessToken");
-      this.load = true;
-      await this.getIMDetailMethods();
-      const userInfo = await userMsg();
-      this.load = false;
-      if (userInfo.success && this.IMLink) {
-        window.open(`${this.IMLink}?token=` + accessToken);
-      } else {
-        this.$Message.error("请登录后再联系客服");
-      }
-    },
-    async getIMDetailMethods() {
-      const res = await getIMDetail();
-      if (res.success) {
-        this.IMLink = res.result;
-      }
-    },
-    init() {
-      const pathArr = util.setCurrentPath(this, this.$route.name);
-      if (pathArr.length >= 2) {
-        this.$store.commit("addOpenSubmenu", pathArr[1].name);
-      }
-      this.storeSideLogo = localStorage.getItem("sellerlogoImg");
-      window.document.title = localStorage.getItem("sellersiteName");
-      const link =
-        document.querySelector("link[rel*='icon']") ||
-        document.createElement("link");
-      link.type = "image/x-icon";
-      link.href = localStorage.getItem("sellerIconImg");
-      link.rel = "shortcut icon";
-      document.getElementsByTagName("head")[0].appendChild(link);
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+const userStore = useUserStore();
+const settingStore = useSettingStore();
 
-      const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
-      this.userInfo = userInfo;
-      this.checkTag(this.$route.name);
+const configRef = ref(null);
+const sliceNum = ref(5);
+const userInfo = ref({});
+const storeSideLogo = ref("");
+const IMLink = ref("");
+const load = ref(false);
 
-      const currWidth = document.body.clientWidth;
-      if (currWidth <= 1200) {
-        this.sliceNum = 2;
-      }
-    },
-    handleClickUserDropdown(name) {
-      if (name === "changePass") {
-        util.openNewPage(this, "change_pass");
-        this.$router.push({ name: "change_pass" });
-      } else if (name === "loginOut") {
-        logout().then(() => {
-          Cookies.set("accessToken", "");
-          this.$store.commit("logout", this);
-          this.$store.commit("clearOpenedSubmenu");
-          this.setStore("accessToken", "");
-          this.setStore("refreshToken", "");
-          this.$router.push({ path: "/login" });
-        });
-      }
-    },
-    checkTag(name) {
-      const openpageHasTag = this.pageTagsList.some((item) => item.name === name);
-      if (!openpageHasTag) {
-        util.openNewPage(
-          this,
-          name,
-          this.$route.params || {},
-          this.$route.query || {}
-        );
-      }
-    },
-    resize() {
-      const currWidth = document.body.clientWidth;
-      const count = currWidth / 300;
-      this.sliceNum = count > 6 ? 6 : count;
-    },
-  },
-  watch: {
-    $route(to) {
-      this.$store.commit("setCurrentPageName", to.name);
-      const pathArr = util.setCurrentPath(this, to.name);
-      if (pathArr.length > 2) {
-        this.$store.commit("addOpenSubmenu", pathArr[1].name);
-      }
-      this.checkTag(to.name);
-      localStorage.currentPageName = to.name;
-    },
-    lang() {
-      util.setCurrentPath(this, this.$route.name);
-    },
-  },
-  created() {
-    this.$store.commit("setOpenedList");
-  },
-  mounted() {
-    this.init();
-    this.resize();
-    window.addEventListener("resize", this.resize);
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.resize);
-  },
-};
+const setting = computed(() => settingStore.setting);
+const loading = computed(() => appStore.loading);
+const pageTagsList = computed(() => appStore.storeOpenedList);
+const showSubMenu = computed(() => appStore.menuList.length > 0);
+const lang = computed(() => appStore.lang);
+
+function handleClickSetting() {
+  configRef.value.open();
+}
+
+async function im() {
+  const accessToken = getStore("accessToken");
+  load.value = true;
+  await getIMDetailMethods();
+  const userInfo = await userMsg();
+  load.value = false;
+  if (userInfo.success && IMLink.value) {
+    window.open(`${IMLink.value}?token=` + accessToken);
+  } else {
+    Message.error("请登录后再联系客服");
+  }
+}
+
+async function getIMDetailMethods() {
+  const res = await getIMDetail();
+  if (res.success) {
+    IMLink.value = res.result;
+  }
+}
+
+function init() {
+  const pathArr = util.setCurrentPath(route.name);
+  if (pathArr.length >= 2) {
+    appStore.addOpenSubmenu(pathArr[1].name);
+  }
+  storeSideLogo.value = localStorage.getItem("sellerlogoImg");
+  window.document.title = localStorage.getItem("sellersiteName");
+  const link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.type = "image/x-icon";
+  link.href = localStorage.getItem("sellerIconImg");
+  link.rel = "shortcut icon";
+  document.getElementsByTagName("head")[0].appendChild(link);
+
+  userInfo.value = JSON.parse(Cookies.get("userInfoSeller"));
+  checkTag(route.name);
+
+  const currWidth = document.body.clientWidth;
+  if (currWidth <= 1200) {
+    sliceNum.value = 2;
+  }
+}
+
+function handleClickUserDropdown(name) {
+  if (name === "changePass") {
+    util.openNewPage("change_pass");
+    router.push({ name: "change_pass" });
+  } else if (name === "loginOut") {
+    logout().then(() => {
+      Cookies.set("accessToken", "");
+      userStore.logout();
+      appStore.clearOpenedSubmenu();
+      setStore("accessToken", "");
+      setStore("refreshToken", "");
+      router.push({ path: "/login" });
+    });
+  }
+}
+
+function checkTag(name) {
+  const openpageHasTag = pageTagsList.value.some((item) => item.name === name);
+  if (!openpageHasTag) {
+    util.openNewPage(name, route.params || {}, route.query || {});
+  }
+}
+
+function resize() {
+  const currWidth = document.body.clientWidth;
+  const count = currWidth / 300;
+  sliceNum.value = count > 6 ? 6 : count;
+}
+
+watch(
+  () => route.name,
+  (name) => {
+    appStore.setCurrentPageName(name);
+    const pathArr = util.setCurrentPath(name);
+    if (pathArr.length > 2) {
+      appStore.addOpenSubmenu(pathArr[1].name);
+    }
+    checkTag(name);
+    localStorage.currentPageName = name;
+  }
+);
+
+watch(lang, () => {
+  util.setCurrentPath(route.name);
+});
+
+appStore.setOpenedList();
+
+onMounted(() => {
+  init();
+  resize();
+  window.addEventListener("resize", resize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", resize);
+});
 </script>
diff --git a/seller/src/views/appointment/components/ServiceAreaFence.vue b/seller/src/views/appointment/components/ServiceAreaFence.vue
index bbf0f76e9..f82aaf997 100644
--- a/seller/src/views/appointment/components/ServiceAreaFence.vue
+++ b/seller/src/views/appointment/components/ServiceAreaFence.vue
@@ -33,567 +33,608 @@
   </div>
 </template>
 
-<script>
-import { markRaw } from "vue";
+<script setup>
+import { markRaw, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import config from "@/config/index";
+import { Message } from "@/utils/message";
 
 const OVERLAY_ID = "polygon";
 
-export default {
-  name: "ServiceAreaFence",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    visible: {
-      type: Boolean,
-      default: true,
-    },
+defineOptions({ name: "ServiceAreaFence" });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
   },
-  emits: ["update:modelValue"],
-  data() {
-    return {
-      keyword: "",
-      tips: [],
-      pointCount: 0,
-      areaCount: 0,
-      drawing: false,
-      mode: "edit",
-      ready: false,
-    };
+  visible: {
+    type: Boolean,
+    default: true,
   },
-  created() {
-    this.map = null;
-    this.editor = null;
-    this.polygon = null;
-    this.suggestion = null;
-    this.TMap = null;
-    this.geometryId = "";
-    this.draftRing = [];
-    this.clickRing = [];
-    this.areas = [];
-    this.booting = false;
-    this.alive = true;
-  },
-  watch: {
-    visible(val) {
-      if (!val) {
-        this.destroyMap();
-        return;
-      }
-      this.$nextTick(() => this.scheduleInit());
-    },
-    modelValue(val) {
-      if (!this.ready || val === this.currentJson()) {
-        return;
-      }
-      this.renderPolygons(parsePolygons(val));
-    },
-  },
-  mounted() {
-    this.observer = new ResizeObserver(() => {
-      if (this.map) {
-        this.resizeMap();
-        return;
-      }
-      this.scheduleInit();
-    });
-    if (this.$refs.mapEl) {
-      this.observer.observe(this.$refs.mapEl);
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const keyword = ref("");
+const tips = ref([]);
+const pointCount = ref(0);
+const areaCount = ref(0);
+const drawing = ref(false);
+const mode = ref("edit");
+const ready = ref(false);
+
+// 模板 ref（原 this.$refs.mapEl），与顶层变量无同名冲突，保持原名
+const mapEl = ref(null);
+
+// 以下字段原本未在 data 声明、直接挂 this 上（created/mounted/方法内赋值），
+// 非响应式实例字段，这里补声明为普通变量，避免 script setup 严格模式 ReferenceError
+let map = null;
+let editor = null;
+let polygon = null;
+let suggestion = null;
+let TMap = null;
+let geometryId = "";
+let draftRing = [];
+let clickRing = [];
+let areas = [];
+let booting = false;
+let alive = true;
+let observer = null;
+let mapBox = null;
+let onMapDblClick = null;
+let onMapContextMenu = null;
+let pendingRing = null;
+let committedJson = "";
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (!val) {
+      destroyMap();
+      return;
     }
-    this.scheduleInit();
-  },
-  beforeUnmount() {
-    this.alive = false;
-    if (this.observer) {
-      this.observer.disconnect();
+    nextTick(() => scheduleInit());
+  }
+);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!ready.value || val === currentJson()) {
+      return;
     }
-    this.destroyMap();
-  },
-  methods: {
-    scheduleInit() {
-      if (this.map || this.booting || !this.visible || !this.alive) {
+    renderPolygons(parsePolygons(val));
+  }
+);
+
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    if (map) {
+      resizeMap();
+      return;
+    }
+    scheduleInit();
+  });
+  if (mapEl.value) {
+    observer.observe(mapEl.value);
+  }
+  scheduleInit();
+});
+
+onBeforeUnmount(() => {
+  alive = false;
+  if (observer) {
+    observer.disconnect();
+  }
+  destroyMap();
+});
+
+function scheduleInit() {
+  if (map || booting || !props.visible || !alive) {
+    return;
+  }
+  const el = mapEl.value;
+  if (!el || el.clientWidth < 10 || el.clientHeight < 10) {
+    return;
+  }
+  initMap();
+}
+
+function initMap() {
+  if (!config.tMapKey) {
+    // 原代码写作 this.$message，但全局只注册了 $Message（小写笔误），此处按作者意图使用 Message
+    Message.error("未配置腾讯地图 Key");
+    return;
+  }
+  const el = mapEl.value;
+  if (!el || el.clientWidth < 10 || el.clientHeight < 10) {
+    return;
+  }
+  booting = true;
+  loadTMap(config.tMapKey)
+    .then((tmap) => {
+      if (!alive || !props.visible) {
+        booting = false;
         return;
       }
-      const el = this.$refs.mapEl;
-      if (!el || el.clientWidth < 10 || el.clientHeight < 10) {
+      const box = mapEl.value;
+      if (!box || box.clientWidth < 10 || box.clientHeight < 10) {
+        booting = false;
         return;
       }
-      this.initMap();
-    },
-    initMap() {
-      if (!config.tMapKey) {
-        this.$message.error("未配置腾讯地图 Key");
-        return;
-      }
-      const el = this.$refs.mapEl;
-      if (!el || el.clientWidth < 10 || el.clientHeight < 10) {
-        return;
-      }
-      this.booting = true;
-      loadTMap(config.tMapKey)
-        .then((TMap) => {
-          if (!this.alive || !this.visible) {
-            this.booting = false;
-            return;
-          }
-          const box = this.$refs.mapEl;
-          if (!box || box.clientWidth < 10 || box.clientHeight < 10) {
-            this.booting = false;
-            return;
-          }
-          this.TMap = markRaw(TMap);
-          this.map = markRaw(
-            new TMap.Map(box, {
-              zoom: 11,
-              center: new TMap.LatLng(39.90923, 116.397428),
-              doubleClickZoom: false,
-            })
-          );
-          if (typeof this.map.setDoubleClickZoom === "function") {
-            this.map.setDoubleClickZoom(false);
-          }
-          this.bindFinishGesture(box);
-          const polygonStyle = new TMap.PolygonStyle({
-            color: "rgba(64,158,255,0.25)",
-            showBorder: true,
-            borderColor: "#409EFF",
-            borderWidth: 2,
-          });
-          this.polygon = markRaw(
-            new TMap.MultiPolygon({
-              map: this.map,
-              styles: {
-                default: polygonStyle,
-                highlight: polygonStyle,
-              },
-              geometries: [],
-            })
-          );
-          this.editor = markRaw(
-            new TMap.tools.GeometryEditor({
-              map: this.map,
-              overlayList: [
-                {
-                  id: OVERLAY_ID,
-                  overlay: this.polygon,
-                  drawingStyleId: "highlight",
-                  selectedStyleId: "highlight",
-                },
-              ],
-              actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
-              activeOverlayId: OVERLAY_ID,
-              selectable: true,
-              snappable: true,
-              enableKeyboardEsc: true,
-              enableUndoDraw: true,
-            })
-          );
-          if (typeof this.editor.setSnapPolyStartPointOnDrawing === "function") {
-            this.editor.setSnapPolyStartPointOnDrawing(true);
-          }
-          if (typeof this.editor.setUndoDrawEnable === "function") {
-            this.editor.setUndoDrawEnable(true);
-          }
-          if (typeof this.editor.setKeyboardEscEnable === "function") {
-            this.editor.setKeyboardEscEnable(true);
-          }
-          this.map.on("click", (event) => this.onMapClick(event));
-          this.editor.on("drawing", (evt) => this.onDrawing(evt));
-          this.editor.on("draw_complete", (geometry) => this.onDrawComplete(geometry));
-          this.editor.on("draw_error", () => {
-            this.$message.warning("围栏不能自相交，请调整顶点后再结束");
-          });
-          this.editor.on("adjust_complete", (geometry) => this.onAdjustComplete(geometry));
-          this.editor.on("delete_complete", (list) => this.onDeleteComplete(list));
-          this.suggestion = markRaw(new TMap.service.Suggestion({ pageSize: 8 }));
-          this.ready = true;
-          this.booting = false;
-          this.renderPolygons(parsePolygons(this.modelValue));
-          this.$nextTick(() => this.resizeMap());
+      TMap = markRaw(tmap);
+      map = markRaw(
+        new TMap.Map(box, {
+          zoom: 11,
+          center: new TMap.LatLng(39.90923, 116.397428),
+          doubleClickZoom: false,
         })
-        .catch((error) => {
-          this.destroyMap();
-          const text = String(error && error.message ? error.message : error);
-          if (text.includes("far <= 0") || text.includes("near <= 0")) {
-            return;
-          }
-          this.$message.error("腾讯地图加载失败，请检查 Key 是否开通 JavaScript API GL");
-        });
-    },
-    resizeMap() {
-      const el = this.$refs.mapEl;
-      if (!this.map || !el || el.clientWidth < 10 || el.clientHeight < 10) {
-        return;
-      }
-      if (typeof this.map.resize === "function") {
-        this.map.resize();
-      }
-    },
-    search() {
-      const keyword = (this.keyword || "").trim();
-      if (!this.suggestion || !keyword) {
-        this.tips = [];
-        return;
-      }
-      this.suggestion
-        .getSuggestions({ keyword })
-        .then((result) => {
-          this.tips = (result.data || [])
-            .filter((item) => item.location)
-            .map((item) => ({
-              name: item.title,
-              address: item.address || "",
-              location: item.location,
-            }));
-        })
-        .catch(() => {
-          this.tips = [];
-        });
-    },
-    selectTip(tip) {
-      if (!tip || !tip.location || !this.map) {
-        return;
-      }
-      this.map.setCenter(tip.location);
-      this.map.setZoom(15);
-      this.tips = [];
-    },
-    bindFinishGesture(box) {
-      this.unbindFinishGesture();
-      this.mapBox = box;
-      this.onMapDblClick = (event) => {
-        if (!this.drawing || this.pickedCount() < 3) {
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.finishDraw();
-      };
-      this.onMapContextMenu = (event) => {
-        if (this.mode !== "draw") {
-          return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.undoDrawPoint();
-      };
-      box.addEventListener("dblclick", this.onMapDblClick, true);
-      box.addEventListener("contextmenu", this.onMapContextMenu, true);
-    },
-    unbindFinishGesture() {
-      if (this.mapBox && this.onMapDblClick) {
-        this.mapBox.removeEventListener("dblclick", this.onMapDblClick, true);
-      }
-      if (this.mapBox && this.onMapContextMenu) {
-        this.mapBox.removeEventListener("contextmenu", this.onMapContextMenu, true);
-      }
-      this.mapBox = null;
-      this.onMapDblClick = null;
-      this.onMapContextMenu = null;
-    },
-    undoDrawPoint() {
-      if (!this.editor) {
-        return;
-      }
-      if (typeof this.editor.undo === "function") {
-        this.editor.undo();
-        return;
-      }
-      const event = new KeyboardEvent("keydown", {
-        key: "z",
-        code: "KeyZ",
-        ctrlKey: true,
-        bubbles: true,
-        cancelable: true,
-      });
-      if (this.mapBox) {
-        this.mapBox.dispatchEvent(event);
-      }
-      document.dispatchEvent(event);
-    },
-    onMapClick(event) {
-      if (!this.drawing) {
-        return;
-      }
-      const point = latLngOf(event && (event.latLng || event.latlng));
-      if (!point) {
-        return;
-      }
-      this.clickRing = dedupeRing((this.clickRing || []).concat([point]));
-      this.pointCount = this.pickedCount();
-    },
-    onDrawing(evt) {
-      const ring = dedupeRing(ringFromPaths(evt && evt.geometry && evt.geometry.paths));
-      if (!ring.length) {
-        return;
-      }
-      this.draftRing = ring;
-      this.pointCount = this.pickedCount();
-    },
-    pickedCount() {
-      return Math.max((this.draftRing || []).length, (this.clickRing || []).length);
-    },
-    pickedRing() {
-      const editorRing = dedupeRing(this.draftRing || []);
-      const clickRing = dedupeRing(this.clickRing || []);
-      if (clickRing.length >= 3) {
-        return clickRing;
-      }
-      return editorRing.length >= clickRing.length ? editorRing : clickRing;
-    },
-    startDraw() {
-      if (!this.editor || !this.polygon) {
-        return;
-      }
-      this.mode = "draw";
-      this.drawing = true;
-      this.pointCount = 0;
-      this.draftRing = [];
-      this.clickRing = [];
-      this.pendingRing = null;
-      this.editor.setActiveOverlay(OVERLAY_ID);
-      if (typeof this.editor.setSelectable === "function") {
-        this.editor.setSelectable(false);
-      }
-      this.editor.setActionMode(this.TMap.tools.constants.EDITOR_ACTION.DRAW);
-    },
-    startEdit() {
-      if (!this.editor) {
-        return;
-      }
-      if (this.drawing && this.pickedCount() >= 3) {
-        this.finishDraw();
-      } else if (typeof this.editor.stop === "function") {
-        try {
-          this.editor.stop();
-        } catch (e) {
-          // 没有进行中的绘制时停止会抛错
-        }
-      }
-      this.mode = "edit";
-      this.drawing = false;
-      this.pointCount = 0;
-      this.draftRing = [];
-      this.clickRing = [];
-      this.pendingRing = null;
-      if (typeof this.editor.setSelectable === "function") {
-        this.editor.setSelectable(true);
-      }
-      this.editor.setActionMode(this.TMap.tools.constants.EDITOR_ACTION.INTERACT);
-      this.fitAll();
-    },
-    finishDraw() {
-      if (!this.editor || !this.polygon || !this.drawing) {
-        return;
-      }
-      const ring = this.pickedRing();
-      if (ring.length < 3) {
-        this.$message.warning("至少点击 3 个顶点后再结束");
-        return;
-      }
-      this.pendingRing = ring;
-      const before = (this.areas || []).length;
-      if (typeof this.editor.stop === "function") {
-        try {
-          this.editor.stop();
-        } catch (e) {
-          // 编辑器中断绘制时可能抛错，随后用已选顶点落图
-        }
-      }
-      if ((this.areas || []).length === before && this.pendingRing) {
-        this.appendArea("fence-" + Date.now(), this.pendingRing);
-      }
-      this.pendingRing = null;
-    },
-    deleteSelected() {
-      if (!this.editor || this.mode !== "edit") {
-        this.$message.warning("请先进入编辑模式并选中区域");
-        return;
-      }
-      const selected = typeof this.editor.getSelectedList === "function" ? this.editor.getSelectedList() || [] : [];
-      if (!selected.length) {
-        this.$message.warning("请先选中要删除的区域");
-        return;
-      }
-      const ids = selected.map((item) => item && item.id).filter(Boolean);
-      if (typeof this.editor.delete === "function") {
-        this.editor.delete();
-      }
-      this.areas = (this.areas || []).filter((area) => !ids.includes(area.id));
-      this.redrawAreas();
-      this.publishAreas();
-    },
-    onDrawComplete(geometry) {
-      if (!this.polygon) {
-        return;
-      }
-      let ring = ringFromGeometry(geometry);
-      if (ring.length < 3) {
-        ring = this.pendingRing || this.pickedRing();
-      }
-      this.pendingRing = null;
-      if (ring.length < 3) {
-        return;
-      }
-      this.appendArea((geometry && geometry.id) || "fence-" + Date.now(), ring);
-    },
-    onAdjustComplete(geometry) {
-      const ring = ringFromGeometry(geometry);
-      const id = geometry && geometry.id;
-      if (!id || ring.length < 3) {
-        return;
-      }
-      const areas = (this.areas || []).slice();
-      const index = areas.findIndex((item) => item.id === id);
-      if (index >= 0) {
-        areas[index] = { id, ring };
-      } else {
-        areas.push({ id, ring });
-      }
-      this.areas = areas;
-      this.publishAreas();
-    },
-    onDeleteComplete(list) {
-      const ids = (list || []).map((item) => item && item.id).filter(Boolean);
-      if (!ids.length) {
-        return;
-      }
-      this.areas = (this.areas || []).filter((area) => !ids.includes(area.id));
-      this.publishAreas();
-    },
-    appendArea(id, ring) {
-      const clean = dedupeRing(ring || []);
-      if (clean.length < 3) {
-        return;
-      }
-      const areas = (this.areas || []).filter((area) => area.id !== id);
-      areas.push({ id, ring: clean });
-      this.areas = areas;
-      this.redrawAreas();
-      this.publishAreas();
-      this.draftRing = [];
-      this.clickRing = [];
-      this.pointCount = 0;
-      this.fitAll();
-      if (this.mode === "draw") {
-        this.drawing = true;
-        if (typeof this.editor.setSelectable === "function") {
-          this.editor.setSelectable(false);
-        }
-        this.editor.setActionMode(this.TMap.tools.constants.EDITOR_ACTION.DRAW);
-      }
-    },
-    redrawAreas() {
-      if (!this.polygon || !this.TMap) {
-        return;
-      }
-      this.polygon.setGeometries(
-        (this.areas || []).map((area) => ({
-          id: area.id,
-          styleId: "highlight",
-          paths: area.ring.map((point) => new this.TMap.LatLng(point.lat, point.lng)),
-        }))
       );
-    },
-    publishAreas() {
-      const areas = this.areas || [];
-      this.areaCount = areas.length;
-      if (!areas.length) {
-        this.committedJson = "";
-        if (this.modelValue) {
-          this.$emit("update:modelValue", "");
-        }
-        return;
+      if (typeof map.setDoubleClickZoom === "function") {
+        map.setDoubleClickZoom(false);
       }
-      const json = JSON.stringify({
-        paths: areas.map((area) =>
-          area.ring.map((point) => [
-            Number(Number(point.lng).toFixed(6)),
-            Number(Number(point.lat).toFixed(6)),
-          ])
-        ),
+      bindFinishGesture(box);
+      const polygonStyle = new TMap.PolygonStyle({
+        color: "rgba(64,158,255,0.25)",
+        showBorder: true,
+        borderColor: "#409EFF",
+        borderWidth: 2,
       });
-      this.committedJson = json;
-      if (json !== (this.modelValue || "")) {
-        this.$emit("update:modelValue", json);
+      polygon = markRaw(
+        new TMap.MultiPolygon({
+          map: map,
+          styles: {
+            default: polygonStyle,
+            highlight: polygonStyle,
+          },
+          geometries: [],
+        })
+      );
+      editor = markRaw(
+        new TMap.tools.GeometryEditor({
+          map: map,
+          overlayList: [
+            {
+              id: OVERLAY_ID,
+              overlay: polygon,
+              drawingStyleId: "highlight",
+              selectedStyleId: "highlight",
+            },
+          ],
+          actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT,
+          activeOverlayId: OVERLAY_ID,
+          selectable: true,
+          snappable: true,
+          enableKeyboardEsc: true,
+          enableUndoDraw: true,
+        })
+      );
+      if (typeof editor.setSnapPolyStartPointOnDrawing === "function") {
+        editor.setSnapPolyStartPointOnDrawing(true);
       }
-    },
-    renderPolygons(polygons) {
-      if (!this.polygon || !this.TMap || !this.editor) {
-        return;
+      if (typeof editor.setUndoDrawEnable === "function") {
+        editor.setUndoDrawEnable(true);
       }
-      if (typeof this.editor.stop === "function") {
-        try {
-          this.editor.stop();
-        } catch (e) {
-          // 初始化时没有进行中的绘制
-        }
+      if (typeof editor.setKeyboardEscEnable === "function") {
+        editor.setKeyboardEscEnable(true);
       }
-      this.areas = (polygons || []).map((ring, index) => ({
-        id: "fence-" + index,
-        ring,
-      }));
-      this.redrawAreas();
-      this.areaCount = this.areas.length;
-      this.committedJson = this.modelValue || "";
-      this.mode = "edit";
-      this.drawing = false;
-      this.pointCount = 0;
-      this.editor.setActiveOverlay(OVERLAY_ID);
-      if (typeof this.editor.setSelectable === "function") {
-        this.editor.setSelectable(true);
-      }
-      this.editor.setActionMode(this.TMap.tools.constants.EDITOR_ACTION.INTERACT);
-      this.fitAll();
-    },
-    fitAll() {
-      if (!this.map || !this.TMap) {
-        return;
-      }
-      const points = [];
-      (this.areas || []).forEach((area) => {
-        (area.ring || []).forEach((point) => points.push(point));
+      map.on("click", (event) => onMapClick(event));
+      editor.on("drawing", (evt) => onDrawing(evt));
+      editor.on("draw_complete", (geometry) => onDrawComplete(geometry));
+      editor.on("draw_error", () => {
+        Message.warning("围栏不能自相交，请调整顶点后再结束");
       });
-      if (points.length < 2) {
+      editor.on("adjust_complete", (geometry) => onAdjustComplete(geometry));
+      editor.on("delete_complete", (list) => onDeleteComplete(list));
+      suggestion = markRaw(new TMap.service.Suggestion({ pageSize: 8 }));
+      ready.value = true;
+      booting = false;
+      renderPolygons(parsePolygons(props.modelValue));
+      nextTick(() => resizeMap());
+    })
+    .catch((error) => {
+      destroyMap();
+      const text = String(error && error.message ? error.message : error);
+      if (text.includes("far <= 0") || text.includes("near <= 0")) {
         return;
       }
-      const bounds = new this.TMap.LatLngBounds();
-      points.forEach((point) => bounds.extend(new this.TMap.LatLng(point.lat, point.lng)));
-      this.map.fitBounds(bounds, { padding: 48 });
-    },
-    currentJson() {
-      return this.committedJson || "";
-    },
-    destroyMap() {
-      this.ready = false;
-      this.booting = false;
-      this.drawing = false;
-      this.unbindFinishGesture();
-      const editor = this.editor;
-      const map = this.map;
-      this.editor = null;
-      this.map = null;
-      this.polygon = null;
-      this.suggestion = null;
-      try {
-        if (editor && typeof editor.destroy === "function") {
-          editor.destroy();
-        }
-      } catch (e) {
-        // 容器已隐藏时，腾讯地图会在销毁过程中抛 far <= 0
-      }
-      try {
-        if (map && typeof map.destroy === "function") {
-          map.destroy();
-        }
-      } catch (e) {
-        // 同上
-      }
-    },
-  },
-};
+      Message.error("腾讯地图加载失败，请检查 Key 是否开通 JavaScript API GL");
+    });
+}
+
+function resizeMap() {
+  const el = mapEl.value;
+  if (!map || !el || el.clientWidth < 10 || el.clientHeight < 10) {
+    return;
+  }
+  if (typeof map.resize === "function") {
+    map.resize();
+  }
+}
+
+function search() {
+  const kw = (keyword.value || "").trim();
+  if (!suggestion || !kw) {
+    tips.value = [];
+    return;
+  }
+  suggestion
+    .getSuggestions({ keyword: kw })
+    .then((result) => {
+      tips.value = (result.data || [])
+        .filter((item) => item.location)
+        .map((item) => ({
+          name: item.title,
+          address: item.address || "",
+          location: item.location,
+        }));
+    })
+    .catch(() => {
+      tips.value = [];
+    });
+}
+
+function selectTip(tip) {
+  if (!tip || !tip.location || !map) {
+    return;
+  }
+  map.setCenter(tip.location);
+  map.setZoom(15);
+  tips.value = [];
+}
+
+function bindFinishGesture(box) {
+  unbindFinishGesture();
+  mapBox = box;
+  onMapDblClick = (event) => {
+    if (!drawing.value || pickedCount() < 3) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    finishDraw();
+  };
+  onMapContextMenu = (event) => {
+    if (mode.value !== "draw") {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    undoDrawPoint();
+  };
+  box.addEventListener("dblclick", onMapDblClick, true);
+  box.addEventListener("contextmenu", onMapContextMenu, true);
+}
+
+function unbindFinishGesture() {
+  if (mapBox && onMapDblClick) {
+    mapBox.removeEventListener("dblclick", onMapDblClick, true);
+  }
+  if (mapBox && onMapContextMenu) {
+    mapBox.removeEventListener("contextmenu", onMapContextMenu, true);
+  }
+  mapBox = null;
+  onMapDblClick = null;
+  onMapContextMenu = null;
+}
+
+function undoDrawPoint() {
+  if (!editor) {
+    return;
+  }
+  if (typeof editor.undo === "function") {
+    editor.undo();
+    return;
+  }
+  const event = new KeyboardEvent("keydown", {
+    key: "z",
+    code: "KeyZ",
+    ctrlKey: true,
+    bubbles: true,
+    cancelable: true,
+  });
+  if (mapBox) {
+    mapBox.dispatchEvent(event);
+  }
+  document.dispatchEvent(event);
+}
+
+function onMapClick(event) {
+  if (!drawing.value) {
+    return;
+  }
+  const point = latLngOf(event && (event.latLng || event.latlng));
+  if (!point) {
+    return;
+  }
+  clickRing = dedupeRing((clickRing || []).concat([point]));
+  pointCount.value = pickedCount();
+}
+
+function onDrawing(evt) {
+  const ring = dedupeRing(ringFromPaths(evt && evt.geometry && evt.geometry.paths));
+  if (!ring.length) {
+    return;
+  }
+  draftRing = ring;
+  pointCount.value = pickedCount();
+}
+
+function pickedCount() {
+  return Math.max((draftRing || []).length, (clickRing || []).length);
+}
+
+function pickedRing() {
+  const editorRing = dedupeRing(draftRing || []);
+  const clickRingDeduped = dedupeRing(clickRing || []);
+  if (clickRingDeduped.length >= 3) {
+    return clickRingDeduped;
+  }
+  return editorRing.length >= clickRingDeduped.length ? editorRing : clickRingDeduped;
+}
+
+function startDraw() {
+  if (!editor || !polygon) {
+    return;
+  }
+  mode.value = "draw";
+  drawing.value = true;
+  pointCount.value = 0;
+  draftRing = [];
+  clickRing = [];
+  pendingRing = null;
+  editor.setActiveOverlay(OVERLAY_ID);
+  if (typeof editor.setSelectable === "function") {
+    editor.setSelectable(false);
+  }
+  editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
+}
+
+function startEdit() {
+  if (!editor) {
+    return;
+  }
+  if (drawing.value && pickedCount() >= 3) {
+    finishDraw();
+  } else if (typeof editor.stop === "function") {
+    try {
+      editor.stop();
+    } catch (e) {
+      // 没有进行中的绘制时停止会抛错
+    }
+  }
+  mode.value = "edit";
+  drawing.value = false;
+  pointCount.value = 0;
+  draftRing = [];
+  clickRing = [];
+  pendingRing = null;
+  if (typeof editor.setSelectable === "function") {
+    editor.setSelectable(true);
+  }
+  editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
+  fitAll();
+}
+
+function finishDraw() {
+  if (!editor || !polygon || !drawing.value) {
+    return;
+  }
+  const ring = pickedRing();
+  if (ring.length < 3) {
+    Message.warning("至少点击 3 个顶点后再结束");
+    return;
+  }
+  pendingRing = ring;
+  const before = (areas || []).length;
+  if (typeof editor.stop === "function") {
+    try {
+      editor.stop();
+    } catch (e) {
+      // 编辑器中断绘制时可能抛错，随后用已选顶点落图
+    }
+  }
+  if ((areas || []).length === before && pendingRing) {
+    appendArea("fence-" + Date.now(), pendingRing);
+  }
+  pendingRing = null;
+}
+
+function deleteSelected() {
+  if (!editor || mode.value !== "edit") {
+    Message.warning("请先进入编辑模式并选中区域");
+    return;
+  }
+  const selected = typeof editor.getSelectedList === "function" ? editor.getSelectedList() || [] : [];
+  if (!selected.length) {
+    Message.warning("请先选中要删除的区域");
+    return;
+  }
+  const ids = selected.map((item) => item && item.id).filter(Boolean);
+  if (typeof editor.delete === "function") {
+    editor.delete();
+  }
+  areas = (areas || []).filter((area) => !ids.includes(area.id));
+  redrawAreas();
+  publishAreas();
+}
+
+function onDrawComplete(geometry) {
+  if (!polygon) {
+    return;
+  }
+  let ring = ringFromGeometry(geometry);
+  if (ring.length < 3) {
+    ring = pendingRing || pickedRing();
+  }
+  pendingRing = null;
+  if (ring.length < 3) {
+    return;
+  }
+  appendArea((geometry && geometry.id) || "fence-" + Date.now(), ring);
+}
+
+function onAdjustComplete(geometry) {
+  const ring = ringFromGeometry(geometry);
+  const id = geometry && geometry.id;
+  if (!id || ring.length < 3) {
+    return;
+  }
+  const list = (areas || []).slice();
+  const index = list.findIndex((item) => item.id === id);
+  if (index >= 0) {
+    list[index] = { id, ring };
+  } else {
+    list.push({ id, ring });
+  }
+  areas = list;
+  publishAreas();
+}
+
+function onDeleteComplete(list) {
+  const ids = (list || []).map((item) => item && item.id).filter(Boolean);
+  if (!ids.length) {
+    return;
+  }
+  areas = (areas || []).filter((area) => !ids.includes(area.id));
+  publishAreas();
+}
+
+function appendArea(id, ring) {
+  const clean = dedupeRing(ring || []);
+  if (clean.length < 3) {
+    return;
+  }
+  const list = (areas || []).filter((area) => area.id !== id);
+  list.push({ id, ring: clean });
+  areas = list;
+  redrawAreas();
+  publishAreas();
+  draftRing = [];
+  clickRing = [];
+  pointCount.value = 0;
+  fitAll();
+  if (mode.value === "draw") {
+    drawing.value = true;
+    if (typeof editor.setSelectable === "function") {
+      editor.setSelectable(false);
+    }
+    editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.DRAW);
+  }
+}
+
+function redrawAreas() {
+  if (!polygon || !TMap) {
+    return;
+  }
+  polygon.setGeometries(
+    (areas || []).map((area) => ({
+      id: area.id,
+      styleId: "highlight",
+      paths: area.ring.map((point) => new TMap.LatLng(point.lat, point.lng)),
+    }))
+  );
+}
+
+function publishAreas() {
+  const list = areas || [];
+  areaCount.value = list.length;
+  if (!list.length) {
+    committedJson = "";
+    if (props.modelValue) {
+      emit("update:modelValue", "");
+    }
+    return;
+  }
+  const json = JSON.stringify({
+    paths: list.map((area) =>
+      area.ring.map((point) => [
+        Number(Number(point.lng).toFixed(6)),
+        Number(Number(point.lat).toFixed(6)),
+      ])
+    ),
+  });
+  committedJson = json;
+  if (json !== (props.modelValue || "")) {
+    emit("update:modelValue", json);
+  }
+}
+
+function renderPolygons(polygons) {
+  if (!polygon || !TMap || !editor) {
+    return;
+  }
+  if (typeof editor.stop === "function") {
+    try {
+      editor.stop();
+    } catch (e) {
+      // 初始化时没有进行中的绘制
+    }
+  }
+  areas = (polygons || []).map((ring, index) => ({
+    id: "fence-" + index,
+    ring,
+  }));
+  redrawAreas();
+  areaCount.value = areas.length;
+  committedJson = props.modelValue || "";
+  mode.value = "edit";
+  drawing.value = false;
+  pointCount.value = 0;
+  editor.setActiveOverlay(OVERLAY_ID);
+  if (typeof editor.setSelectable === "function") {
+    editor.setSelectable(true);
+  }
+  editor.setActionMode(TMap.tools.constants.EDITOR_ACTION.INTERACT);
+  fitAll();
+}
+
+function fitAll() {
+  if (!map || !TMap) {
+    return;
+  }
+  const points = [];
+  (areas || []).forEach((area) => {
+    (area.ring || []).forEach((point) => points.push(point));
+  });
+  if (points.length < 2) {
+    return;
+  }
+  const bounds = new TMap.LatLngBounds();
+  points.forEach((point) => bounds.extend(new TMap.LatLng(point.lat, point.lng)));
+  map.fitBounds(bounds, { padding: 48 });
+}
+
+function currentJson() {
+  return committedJson || "";
+}
+
+function destroyMap() {
+  ready.value = false;
+  booting = false;
+  drawing.value = false;
+  unbindFinishGesture();
+  const oldEditor = editor;
+  const oldMap = map;
+  editor = null;
+  map = null;
+  polygon = null;
+  suggestion = null;
+  try {
+    if (oldEditor && typeof oldEditor.destroy === "function") {
+      oldEditor.destroy();
+    }
+  } catch (e) {
+    // 容器已隐藏时，腾讯地图会在销毁过程中抛 far <= 0
+  }
+  try {
+    if (oldMap && typeof oldMap.destroy === "function") {
+      oldMap.destroy();
+    }
+  } catch (e) {
+    // 同上
+  }
+}
 
 function ensureProcessShim() {
   const current = window.process;
diff --git a/seller/src/views/appointment/components/SystemFormFieldPreview.vue b/seller/src/views/appointment/components/SystemFormFieldPreview.vue
index 369154252..011784e9c 100644
--- a/seller/src/views/appointment/components/SystemFormFieldPreview.vue
+++ b/seller/src/views/appointment/components/SystemFormFieldPreview.vue
@@ -88,7 +88,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed } from "vue";
+
+defineOptions({ name: "SystemFormFieldPreview" });
+
+const props = defineProps({
+  field: { type: Object, required: true },
+});
+
 function pad(n) {
   return String(n).padStart(2, "0");
 }
@@ -103,88 +111,80 @@ function nowTimeText() {
   return `${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-export default {
-  name: "SystemFormFieldPreview",
-  props: {
-    field: { type: Object, required: true },
-  },
-  computed: {
-    isInlineOptions() {
-      return [
-        "CHECKBOX",
-        "RADIO",
-        "CITY",
-        "DATE",
-        "DATE_RANGE",
-        "SELECT",
-        "TEXT",
-        "TIME",
-        "TIME_RANGE",
-      ].includes(this.field.field_type);
-    },
-    imageSlotCount() {
-      const n = Number(this.field.max_upload_count);
-      return Math.min(10, Math.max(1, Number.isFinite(n) ? n : 1));
-    },
-    optionListStacked() {
-      // 一行放不下两个选项时改为纵向堆叠
-      const labels = (this.field.options || []).map((item) => item.label || "");
-      if (labels.length < 2) return false;
-      const itemWidth = (text) => 24 + Array.from(text).length * 14;
-      const available = 230;
-      for (let i = 0; i < labels.length; i += 2) {
-        const next = labels[i + 1];
-        if (next == null) break;
-        if (itemWidth(labels[i]) + 12 + itemWidth(next) > available) {
-          return true;
-        }
-      }
-      return false;
-    },
-    showDefault() {
-      return this.field.default_visibility === "SHOW";
-    },
-    singleDefault() {
-      if (!this.showDefault) return "";
-      if (this.field.field_type === "DATE") {
-        return this.field.default_date_mode === "SPECIFIED_DATE"
-          ? this.field.default_date
-          : todayText();
-      }
-      return this.field.default_time_mode === "SPECIFIED_TIME"
-        ? this.field.default_time
-        : nowTimeText();
-    },
-    dateRangeText() {
-      if (this.rangeStart && this.rangeEnd) {
-        return `${this.rangeStart} - ${this.rangeEnd}`;
-      }
-      return this.field.hint_text || "请选择";
-    },
-    rangeStart() {
-      if (!this.showDefault) return "";
-      if (this.field.field_type === "DATE_RANGE") {
-        return this.field.default_date_mode === "SPECIFIED_DATE"
-          ? this.field.default_date_start
-          : todayText();
-      }
-      return this.field.default_time_mode === "SPECIFIED_TIME"
-        ? this.field.default_time_start
-        : nowTimeText();
-    },
-    rangeEnd() {
-      if (!this.showDefault) return "";
-      if (this.field.field_type === "DATE_RANGE") {
-        return this.field.default_date_mode === "SPECIFIED_DATE"
-          ? this.field.default_date_end
-          : todayText();
-      }
-      return this.field.default_time_mode === "SPECIFIED_TIME"
-        ? this.field.default_time_end
-        : nowTimeText();
-    },
-  },
-};
+const isInlineOptions = computed(() => {
+  return [
+    "CHECKBOX",
+    "RADIO",
+    "CITY",
+    "DATE",
+    "DATE_RANGE",
+    "SELECT",
+    "TEXT",
+    "TIME",
+    "TIME_RANGE",
+  ].includes(props.field.field_type);
+});
+const imageSlotCount = computed(() => {
+  const n = Number(props.field.max_upload_count);
+  return Math.min(10, Math.max(1, Number.isFinite(n) ? n : 1));
+});
+const optionListStacked = computed(() => {
+  // 一行放不下两个选项时改为纵向堆叠
+  const labels = (props.field.options || []).map((item) => item.label || "");
+  if (labels.length < 2) return false;
+  const itemWidth = (text) => 24 + Array.from(text).length * 14;
+  const available = 230;
+  for (let i = 0; i < labels.length; i += 2) {
+    const next = labels[i + 1];
+    if (next == null) break;
+    if (itemWidth(labels[i]) + 12 + itemWidth(next) > available) {
+      return true;
+    }
+  }
+  return false;
+});
+const showDefault = computed(() => {
+  return props.field.default_visibility === "SHOW";
+});
+const singleDefault = computed(() => {
+  if (!showDefault.value) return "";
+  if (props.field.field_type === "DATE") {
+    return props.field.default_date_mode === "SPECIFIED_DATE"
+      ? props.field.default_date
+      : todayText();
+  }
+  return props.field.default_time_mode === "SPECIFIED_TIME"
+    ? props.field.default_time
+    : nowTimeText();
+});
+const dateRangeText = computed(() => {
+  if (rangeStart.value && rangeEnd.value) {
+    return `${rangeStart.value} - ${rangeEnd.value}`;
+  }
+  return props.field.hint_text || "请选择";
+});
+const rangeStart = computed(() => {
+  if (!showDefault.value) return "";
+  if (props.field.field_type === "DATE_RANGE") {
+    return props.field.default_date_mode === "SPECIFIED_DATE"
+      ? props.field.default_date_start
+      : todayText();
+  }
+  return props.field.default_time_mode === "SPECIFIED_TIME"
+    ? props.field.default_time_start
+    : nowTimeText();
+});
+const rangeEnd = computed(() => {
+  if (!showDefault.value) return "";
+  if (props.field.field_type === "DATE_RANGE") {
+    return props.field.default_date_mode === "SPECIFIED_DATE"
+      ? props.field.default_date_end
+      : todayText();
+  }
+  return props.field.default_time_mode === "SPECIFIED_TIME"
+    ? props.field.default_time_end
+    : nowTimeText();
+});
 </script>
 
 <style scoped>
diff --git a/seller/src/views/appointment/inStoreSettings.vue b/seller/src/views/appointment/inStoreSettings.vue
index 307e9f988..dce415f7f 100644
--- a/seller/src/views/appointment/inStoreSettings.vue
+++ b/seller/src/views/appointment/inStoreSettings.vue
@@ -23,52 +23,50 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getInStoreSettings, saveInStoreSettings } from "@/api/appointment";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "appointmentInStoreSettings",
-  data() {
-    return {
-      loading: false,
-      saving: false,
-      form: {
-        userBooking: true,
-        workOrder: true,
-        endService: true,
-      },
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      getInStoreSettings()
-        .then((res) => {
-          if (res.success && res.result) {
-            this.form = { ...this.form, ...res.result };
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSave() {
-      this.saving = true;
-      saveInStoreSettings(this.form)
-        .then((res) => {
-          if (res.success) {
-            this.$message.success("保存成功");
-          }
-        })
-        .finally(() => {
-          this.saving = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "appointmentInStoreSettings" });
+
+const loading = ref(false);
+const saving = ref(false);
+const form = ref({
+  userBooking: true,
+  workOrder: true,
+  endService: true,
+});
+
+onMounted(() => {
+  loadData();
+});
+
+function loadData() {
+  loading.value = true;
+  getInStoreSettings()
+    .then((res) => {
+      if (res.success && res.result) {
+        form.value = { ...form.value, ...res.result };
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function handleSave() {
+  saving.value = true;
+  saveInStoreSettings(form.value)
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+      }
+    })
+    .finally(() => {
+      saving.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/appointment/onSiteSettings.vue b/seller/src/views/appointment/onSiteSettings.vue
index 9feac67d4..7ad273c70 100644
--- a/seller/src/views/appointment/onSiteSettings.vue
+++ b/seller/src/views/appointment/onSiteSettings.vue
@@ -50,59 +50,57 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getOnSiteSettings, saveOnSiteSettings } from "@/api/appointment";
+import { Message } from "@/utils/message";
 import ServiceAreaFence from "./components/ServiceAreaFence.vue";
 
-export default {
-  name: "appointmentOnSiteSettings",
-  components: { ServiceAreaFence },
-  data() {
-    return {
-      activeTab: "flow",
-      loading: false,
-      saving: false,
-      form: {
-        userBooking: true,
-        acceptOrder: true,
-        onSiteCheckin: true,
-        serviceEvidence: false,
-        endService: true,
-        serviceAreaEnabled: false,
-        serviceAreaGeo: "",
-      },
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    loadData() {
-      this.loading = true;
-      getOnSiteSettings()
-        .then((res) => {
-          if (res.success && res.result) {
-            this.form = { ...this.form, ...res.result };
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSave() {
-      this.saving = true;
-      saveOnSiteSettings(this.form)
-        .then((res) => {
-          if (res.success) {
-            this.$message.success("保存成功");
-          }
-        })
-        .finally(() => {
-          this.saving = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "appointmentOnSiteSettings" });
+
+const activeTab = ref("flow");
+const loading = ref(false);
+const saving = ref(false);
+const form = ref({
+  userBooking: true,
+  acceptOrder: true,
+  onSiteCheckin: true,
+  serviceEvidence: false,
+  endService: true,
+  serviceAreaEnabled: false,
+  serviceAreaGeo: "",
+});
+
+onMounted(() => {
+  loadData();
+});
+
+function loadData() {
+  loading.value = true;
+  getOnSiteSettings()
+    .then((res) => {
+      if (res.success && res.result) {
+        form.value = { ...form.value, ...res.result };
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function handleSave() {
+  saving.value = true;
+  saveOnSiteSettings(form.value)
+    .then((res) => {
+      if (res.success) {
+        // 原代码为 this.$message（小写），全局只注册了 $Message，按作者意图修正
+        Message.success("保存成功");
+      }
+    })
+    .finally(() => {
+      saving.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/appointment/serviceCalendar.vue b/seller/src/views/appointment/serviceCalendar.vue
index 8c9a007f4..e3c932439 100644
--- a/seller/src/views/appointment/serviceCalendar.vue
+++ b/seller/src/views/appointment/serviceCalendar.vue
@@ -35,81 +35,74 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
 import { getServiceCalendarMonth, getServiceCalendarDay } from "@/api/appointment";
 
+defineOptions({ name: "appointmentServiceCalendar" });
+
 function formatMonth(date) {
   const y = date.getFullYear();
   const m = String(date.getMonth() + 1).padStart(2, "0");
   return `${y}-${m}`;
 }
 
-export default {
-  name: "appointmentServiceCalendar",
-  data() {
-    return {
-      loading: false,
-      currentMonth: formatMonth(new Date()),
-      monthDays: [],
-      dayVisible: false,
-      dayLoading: false,
-      activeDate: "",
-      dayStatus: "ALL",
-      dayRows: [],
-    };
-  },
-  computed: {
-    monthLabel() {
-      return this.currentMonth;
-    },
-  },
-  mounted() {
-    this.loadMonth();
-  },
-  methods: {
-    goToday() {
-      this.currentMonth = formatMonth(new Date());
-      this.loadMonth();
-    },
-    changeMonth(delta) {
-      const [y, m] = this.currentMonth.split("-").map(Number);
-      const date = new Date(y, m - 1 + delta, 1);
-      this.currentMonth = formatMonth(date);
-      this.loadMonth();
-    },
-    loadMonth() {
-      this.loading = true;
-      getServiceCalendarMonth(this.currentMonth)
-        .then((res) => {
-          if (res.success) {
-            this.monthDays = res.result?.days || res.result || [];
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    openDay(date) {
-      this.activeDate = date;
-      this.dayStatus = "ALL";
-      this.dayVisible = true;
-      this.loadDay();
-    },
-    loadDay() {
-      if (!this.activeDate) return;
-      this.dayLoading = true;
-      getServiceCalendarDay({ date: this.activeDate, status: this.dayStatus })
-        .then((res) => {
-          if (res.success) {
-            this.dayRows = res.result?.records || res.result || [];
-          }
-        })
-        .finally(() => {
-          this.dayLoading = false;
-        });
-    },
-  },
-};
+const loading = ref(false);
+const currentMonth = ref(formatMonth(new Date()));
+const monthDays = ref([]);
+const dayVisible = ref(false);
+const dayLoading = ref(false);
+const activeDate = ref("");
+const dayStatus = ref("ALL");
+const dayRows = ref([]);
+
+const monthLabel = computed(() => currentMonth.value);
+
+onMounted(() => {
+  loadMonth();
+});
+
+function goToday() {
+  currentMonth.value = formatMonth(new Date());
+  loadMonth();
+}
+function changeMonth(delta) {
+  const [y, m] = currentMonth.value.split("-").map(Number);
+  const date = new Date(y, m - 1 + delta, 1);
+  currentMonth.value = formatMonth(date);
+  loadMonth();
+}
+function loadMonth() {
+  loading.value = true;
+  getServiceCalendarMonth(currentMonth.value)
+    .then((res) => {
+      if (res.success) {
+        monthDays.value = res.result?.days || res.result || [];
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function openDay(date) {
+  activeDate.value = date;
+  dayStatus.value = "ALL";
+  dayVisible.value = true;
+  loadDay();
+}
+function loadDay() {
+  if (!activeDate.value) return;
+  dayLoading.value = true;
+  getServiceCalendarDay({ date: activeDate.value, status: dayStatus.value })
+    .then((res) => {
+      if (res.success) {
+        dayRows.value = res.result?.records || res.result || [];
+      }
+    })
+    .finally(() => {
+      dayLoading.value = false;
+    });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/appointment/serviceStaffList.vue b/seller/src/views/appointment/serviceStaffList.vue
index 6ab902aa2..7cf3f35a8 100644
--- a/seller/src/views/appointment/serviceStaffList.vue
+++ b/seller/src/views/appointment/serviceStaffList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="80px" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="80px" @keyup.enter="handleSearch">
         <el-form-item label="员工姓名" prop="staffName">
           <el-input v-model="searchForm.staffName" clearable placeholder="模糊搜索" style="width: 220px" />
         </el-form-item>
@@ -90,8 +90,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { ElMessageBox } from "element-plus";
+import { Message } from "@/utils/message";
 import { getUserListData } from "@/api/index";
 import {
   getServiceStaffPage,
@@ -101,163 +103,172 @@ import {
   deleteServiceStaff,
 } from "@/api/appointment";
 
-export default {
-  name: "appointmentServiceStaffList",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        staffName: "",
-        status: "",
-      },
-      createVisible: false,
-      createLoading: false,
-      clerkLoading: false,
-      clerkOptions: [],
-      createForm: {
-        id: "",
-        clerkUserId: "",
-        staffName: "",
-        contactPhone: "",
-        sortOrder: 0,
-        status: "ENABLED",
-      },
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      getServiceStaffPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result?.records || [];
-            this.total = res.result?.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    emptyForm() {
-      return {
-        id: "",
-        clerkUserId: "",
-        staffName: "",
-        contactPhone: "",
-        sortOrder: 0,
-        status: "ENABLED",
-      };
-    },
-    openCreate() {
-      this.createForm = this.emptyForm();
-      this.createVisible = true;
-      this.loadClerks();
-    },
-    openEdit(row) {
-      this.createForm = {
-        id: row.id,
-        clerkUserId: row.clerkUserId || "",
-        staffName: row.staffName || "",
-        contactPhone: row.contactPhone || "",
-        sortOrder: row.sortOrder == null ? 0 : row.sortOrder,
-        status: row.status || "ENABLED",
-      };
-      this.createVisible = true;
-      this.loadClerks();
-    },
-    loadClerks() {
-      this.clerkLoading = true;
-      getUserListData({ pageNumber: 1, pageSize: 200 })
-        .then((res) => {
-          if (res.success) {
-            const records = res.result?.records || [];
-            const usedIds = new Set(
-              (this.data || [])
-                .filter((staff) => staff.id !== this.createForm.id)
-                .map((staff) => staff.clerkUserId)
-                .filter(Boolean)
-            );
-            const options = records.filter(
-              (clerk) => clerk.memberId && clerk.status !== false && !usedIds.has(clerk.memberId)
-            );
-            const currentId = this.createForm.clerkUserId;
-            if (currentId && !options.some((clerk) => clerk.memberId === currentId)) {
-              options.unshift({
-                memberId: currentId,
-                clerkName: this.createForm.staffName || "当前店员",
-              });
-            }
-            this.clerkOptions = options;
-          }
-        })
-        .finally(() => {
-          this.clerkLoading = false;
-        });
-    },
-    clerkOptionLabel(clerk) {
-      return clerk.clerkName || "未命名店员";
-    },
-    onClerkChange(memberId) {
-      const clerk = this.clerkOptions.find((item) => item.memberId === memberId);
-      if (!clerk) {
-        return;
+defineOptions({ name: "appointmentServiceStaffList" });
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  staffName: "",
+  status: "",
+});
+const createVisible = ref(false);
+const createLoading = ref(false);
+const clerkLoading = ref(false);
+const clerkOptions = ref([]);
+const createForm = ref({
+  id: "",
+  clerkUserId: "",
+  staffName: "",
+  contactPhone: "",
+  sortOrder: 0,
+  status: "ENABLED",
+});
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖（原 ref="searchForm" 在 script 中未被使用）
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  loadData();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadData();
+}
+
+function loadData() {
+  loading.value = true;
+  getServiceStaffPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result?.records || [];
+        total.value = res.result?.total || 0;
       }
-      this.createForm.staffName = clerk.clerkName || "";
-      this.createForm.contactPhone = clerk.mobile || "";
-    },
-    submitCreate() {
-      if (!this.createForm.clerkUserId) {
-        this.$message.warning("请选择店员");
-        return;
-      }
-      if (!this.createForm.staffName) {
-        this.$message.warning("请填写员工姓名");
-        return;
-      }
-      const editing = !!this.createForm.id;
-      const request = editing ? updateServiceStaff(this.createForm.id, this.createForm) : createServiceStaff(this.createForm);
-      this.createLoading = true;
-      request
-        .then((res) => {
-          if (res.success) {
-            this.$message.success(editing ? "已保存" : "创建成功");
-            this.createVisible = false;
-            this.loadData();
-          }
-        })
-        .finally(() => {
-          this.createLoading = false;
-        });
-    },
-    handleDelete(row) {
-      ElMessageBox.confirm(`确认删除服务人员「${row.staffName || ""}」？`, "提示", { type: "warning" })
-        .then(() => deleteServiceStaff(row.id))
-        .then((res) => {
-          if (res && res.success) {
-            this.$message.success("已删除");
-            this.loadData();
-          }
-        })
-        .catch(() => {});
-    },
-    toggleStatus(row, enabled) {
-      updateServiceStaffStatus(row.id, enabled ? "ENABLED" : "DISABLED").then((res) => {
-        if (res.success) {
-          row.status = enabled ? "ENABLED" : "DISABLED";
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function emptyForm() {
+  return {
+    id: "",
+    clerkUserId: "",
+    staffName: "",
+    contactPhone: "",
+    sortOrder: 0,
+    status: "ENABLED",
+  };
+}
+
+function openCreate() {
+  createForm.value = emptyForm();
+  createVisible.value = true;
+  loadClerks();
+}
+
+function openEdit(row) {
+  createForm.value = {
+    id: row.id,
+    clerkUserId: row.clerkUserId || "",
+    staffName: row.staffName || "",
+    contactPhone: row.contactPhone || "",
+    sortOrder: row.sortOrder == null ? 0 : row.sortOrder,
+    status: row.status || "ENABLED",
+  };
+  createVisible.value = true;
+  loadClerks();
+}
+
+function loadClerks() {
+  clerkLoading.value = true;
+  getUserListData({ pageNumber: 1, pageSize: 200 })
+    .then((res) => {
+      if (res.success) {
+        const records = res.result?.records || [];
+        const usedIds = new Set(
+          (data.value || [])
+            .filter((staff) => staff.id !== createForm.value.id)
+            .map((staff) => staff.clerkUserId)
+            .filter(Boolean)
+        );
+        const options = records.filter(
+          (clerk) => clerk.memberId && clerk.status !== false && !usedIds.has(clerk.memberId)
+        );
+        const currentId = createForm.value.clerkUserId;
+        if (currentId && !options.some((clerk) => clerk.memberId === currentId)) {
+          options.unshift({
+            memberId: currentId,
+            clerkName: createForm.value.staffName || "当前店员",
+          });
         }
-      });
-    },
-  },
-};
+        clerkOptions.value = options;
+      }
+    })
+    .finally(() => {
+      clerkLoading.value = false;
+    });
+}
+
+function clerkOptionLabel(clerk) {
+  return clerk.clerkName || "未命名店员";
+}
+
+function onClerkChange(memberId) {
+  const clerk = clerkOptions.value.find((item) => item.memberId === memberId);
+  if (!clerk) {
+    return;
+  }
+  createForm.value.staffName = clerk.clerkName || "";
+  createForm.value.contactPhone = clerk.mobile || "";
+}
+
+function submitCreate() {
+  if (!createForm.value.clerkUserId) {
+    // 原代码 this.$message 小写，全局仅注册了 $Message，此处按作者意图修正
+    Message.warning("请选择店员");
+    return;
+  }
+  if (!createForm.value.staffName) {
+    Message.warning("请填写员工姓名");
+    return;
+  }
+  const editing = !!createForm.value.id;
+  const request = editing ? updateServiceStaff(createForm.value.id, createForm.value) : createServiceStaff(createForm.value);
+  createLoading.value = true;
+  request
+    .then((res) => {
+      if (res.success) {
+        Message.success(editing ? "已保存" : "创建成功");
+        createVisible.value = false;
+        loadData();
+      }
+    })
+    .finally(() => {
+      createLoading.value = false;
+    });
+}
+
+function handleDelete(row) {
+  ElMessageBox.confirm(`确认删除服务人员「${row.staffName || ""}」？`, "提示", { type: "warning" })
+    .then(() => deleteServiceStaff(row.id))
+    .then((res) => {
+      if (res && res.success) {
+        Message.success("已删除");
+        loadData();
+      }
+    })
+    .catch(() => {});
+}
+
+function toggleStatus(row, enabled) {
+  updateServiceStaffStatus(row.id, enabled ? "ENABLED" : "DISABLED").then((res) => {
+    if (res.success) {
+      row.status = enabled ? "ENABLED" : "DISABLED";
+    }
+  });
+}
 </script>
diff --git a/seller/src/views/appointment/systemFormDesigner.vue b/seller/src/views/appointment/systemFormDesigner.vue
index 37c3b2296..81ba117be 100644
--- a/seller/src/views/appointment/systemFormDesigner.vue
+++ b/seller/src/views/appointment/systemFormDesigner.vue
@@ -260,7 +260,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import {
   Delete,
@@ -299,282 +301,268 @@ import {
   hasOptions,
 } from "@/constants/systemForm";
 
-export default {
-  name: "appointmentSystemFormDesigner",
-  components: { editor, SystemFormFieldPreview, Delete, CopyDocument, ArrowUp, ArrowDown },
-  data() {
-    return {
-      loading: false,
-      saving: false,
-      formId: "",
-      formName: "",
-      fields: [],
-      selectedKey: "",
-      baseline: "",
-      batchVisible: false,
-      batchText: "",
-      palette: FORM_FIELD_PALETTE,
-      paletteIcons: {
-        CHECKBOX: Checked,
-        CITY: Location,
-        RADIO: CircleCheck,
-        DATE: Calendar,
-        DATE_RANGE: Tickets,
-        SELECT: ArrowDown,
-        TEXT: EditPen,
-        TIME: Clock,
-        TIME_RANGE: Timer,
-        RICH_TEXT: Document,
-        IMAGE: Picture,
-      },
-      OPTION_MAX,
-      FIELD_LABEL_MAX,
-      OPTION_LABEL_MAX,
-      HINT_TEXT_MAX,
-      Delete,
-    };
-  },
-  computed: {
-    selected() {
-      return this.fields.find((item) => item.field_key === this.selectedKey) || null;
-    },
-    dateRangeValue: {
-      get() {
-        const field = this.selected;
-        if (!field) return null;
-        return field.default_date_start && field.default_date_end
-          ? [field.default_date_start, field.default_date_end]
-          : null;
-      },
-      set(val) {
-        if (!this.selected) return;
-        this.selected.default_date_start = val?.[0] || null;
-        this.selected.default_date_end = val?.[1] || null;
-      },
-    },
-    timeRangeValue: {
-      get() {
-        const field = this.selected;
-        if (!field) return null;
-        return field.default_time_start && field.default_time_end
-          ? [field.default_time_start, field.default_time_end]
-          : null;
-      },
-      set(val) {
-        if (!this.selected) return;
-        this.selected.default_time_start = val?.[0] || null;
-        this.selected.default_time_end = val?.[1] || null;
-      },
-    },
-  },
-  watch: {
-    selectedKey() {
-      this.closeBatch();
-    },
-  },
-  mounted() {
-    this.formId = this.$route.query.id || "";
-    if (this.formId) {
-      this.loadForm();
-    } else {
-      this.captureBaseline();
-    }
-  },
-  methods: {
-    addOption,
-    removeOption,
-    hasRequiredSwitch,
-    hasOptions,
-    fieldTypeLabel(type) {
-      return FORM_FIELD_LABEL[type] || type;
-    },
-    captureBaseline() {
-      this.baseline = JSON.stringify({
-        formName: this.formName,
-        fields: this.fields,
-      });
-    },
-    loadForm() {
-      this.loading = true;
-      getRequest(`/appointment/system-forms/${this.formId}`)
-        .then((res) => {
-          if (!res.success || !res.result) {
-            ElMessage.error("表单不存在");
-            this.$router.push({ name: "appointment-system-forms" });
-            return;
-          }
-          this.formName = res.result.formName || "";
-          this.fields = parseFormSchema(res.result.formSchema);
-          this.selectedKey = this.fields[0]?.field_key || "";
-          this.captureBaseline();
-        })
-        .catch(() => {
-          ElMessage.error("加载表单失败");
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    addField(type) {
-      const field = createField(type);
-      this.fields.push(field);
-      this.selectedKey = field.field_key;
-    },
-    removeField(index) {
-      this.fields.splice(index, 1);
-      this.selectedKey = this.fields[index]?.field_key || this.fields[index - 1]?.field_key || "";
-    },
-    copyField(index) {
-      const source = this.fields[index];
-      if (!source) return;
-      const cloned = JSON.parse(JSON.stringify(source));
-      cloned.field_key = createFieldKey();
-      if (Array.isArray(cloned.options)) {
-        cloned.options = cloned.options.map((opt) => ({
-          ...opt,
-          value: createFieldKey(), // 避免与原字段共用 option value
-        }));
-      }
-      this.fields.splice(index + 1, 0, cloned);
-      this.selectedKey = cloned.field_key;
-    },
-    moveField(index, step) {
-      const target = index + step;
-      if (target < 0 || target >= this.fields.length) return;
-      const list = [...this.fields];
-      const [item] = list.splice(index, 1);
-      list.splice(target, 0, item);
-      this.fields = list;
-    },
-    closeBatch() {
-      this.batchVisible = false;
-      this.batchText = "";
-    },
-    confirmBatch() {
-      if (!this.selected) return;
-      this.selected.options = batchAddOptions(this.selected.options, this.batchText, {
-        radio: this.selected.field_type === "RADIO",
-      });
-      this.closeBatch();
-    },
-    handleReset() {
-      ElMessageBox.confirm("将撤销本次未保存的编辑，恢复进入页面时的内容？", "重置", {
-        type: "warning",
-      }).then(() => {
-        const snap = JSON.parse(this.baseline || "{}");
-        this.formName = snap.formName || "";
-        this.fields = JSON.parse(JSON.stringify(snap.fields || []));
-        this.selectedKey = this.fields[0]?.field_key || "";
-      }).catch(() => {});
-    },
-    validate() {
-      if (!this.formName.trim()) {
-        ElMessage.error("请填写表单名称");
-        return false;
-      }
-      if (!this.fields.length) {
-        ElMessage.error("请至少添加一个表单组件");
-        return false;
-      }
-      for (const field of this.fields) {
-        if (field.field_type !== "RICH_TEXT") {
-          const label = (field.field_label || "").trim();
-          if (!label) {
-            ElMessage.error("请填写组件标题");
-            return false;
-          }
-          if (label.length > FIELD_LABEL_MAX) {
-            ElMessage.error(`组件标题最多 ${FIELD_LABEL_MAX} 个字`);
-            return false;
-          }
-        }
-        if (hasOptions(field.field_type)) {
-          const labels = (field.options || []).map((item) => item.label?.trim()).filter(Boolean);
-          if (labels.length < 2) {
-            ElMessage.error(`${field.field_label || "选项组件"}至少需要 2 个选项`);
-            return false;
-          }
-          if ((field.options || []).some((item) => (item.label || "").length > OPTION_LABEL_MAX)) {
-            ElMessage.error("选项最多 10 个字");
-            return false;
-          }
-        }
-        if (field.hint_text && field.hint_text.length > HINT_TEXT_MAX) {
-          ElMessage.error("提示语最多 10 个字");
-          return false;
-        }
-        if (
-          field.default_visibility === "SHOW" &&
-          field.default_date_mode === "SPECIFIED_DATE" &&
-          field.field_type === "DATE" &&
-          !field.default_date
-        ) {
-          ElMessage.error("请为日期组件指定默认日期");
-          return false;
-        }
-        if (
-          field.default_visibility === "SHOW" &&
-          field.default_date_mode === "SPECIFIED_DATE" &&
-          field.field_type === "DATE_RANGE"
-        ) {
-          if (!field.default_date_start || !field.default_date_end) {
-            ElMessage.error("请为日期范围指定起止日期");
-            return false;
-          }
-          if (field.default_date_start > field.default_date_end) {
-            ElMessage.error("日期范围的结束日期不能早于开始日期");
-            return false;
-          }
-        }
-        if (
-          field.default_visibility === "SHOW" &&
-          field.default_time_mode === "SPECIFIED_TIME" &&
-          field.field_type === "TIME" &&
-          !field.default_time
-        ) {
-          ElMessage.error("请为时间组件指定默认时间");
-          return false;
-        }
-        if (
-          field.default_visibility === "SHOW" &&
-          field.default_time_mode === "SPECIFIED_TIME" &&
-          field.field_type === "TIME_RANGE"
-        ) {
-          if (!field.default_time_start || !field.default_time_end) {
-            ElMessage.error("请为时间范围指定起止时间");
-            return false;
-          }
-          if (field.default_time_start > field.default_time_end) {
-            ElMessage.error("时间范围的结束时间不能早于开始时间");
-            return false;
-          }
-        }
-      }
-      return true;
-    },
-    handleSave() {
-      if (!this.validate()) return;
-      this.saving = true;
-      postRequestWithNoForm("/appointment/system-forms", {
-        id: this.formId || undefined,
-        formName: this.formName.trim(),
-        formSchema: serializeFormSchema(this.fields),
-        status: "ENABLED",
-      })
-        .then((res) => {
-          if (res.success) {
-            ElMessage.success("已保存并发布");
-            this.formId = res.result?.id || this.formId;
-            this.captureBaseline();
-            this.$router.push({ name: "appointment-system-forms" });
-          }
-        })
-        .finally(() => {
-          this.saving = false;
-        });
-    },
-  },
+defineOptions({ name: "appointmentSystemFormDesigner" });
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const saving = ref(false);
+const formId = ref("");
+const formName = ref("");
+const fields = ref([]);
+const selectedKey = ref("");
+const baseline = ref("");
+const batchVisible = ref(false);
+const batchText = ref("");
+const palette = FORM_FIELD_PALETTE;
+const paletteIcons = {
+  CHECKBOX: Checked,
+  CITY: Location,
+  RADIO: CircleCheck,
+  DATE: Calendar,
+  DATE_RANGE: Tickets,
+  SELECT: ArrowDown,
+  TEXT: EditPen,
+  TIME: Clock,
+  TIME_RANGE: Timer,
+  RICH_TEXT: Document,
+  IMAGE: Picture,
 };
+
+const selected = computed(
+  () => fields.value.find((item) => item.field_key === selectedKey.value) || null
+);
+const dateRangeValue = computed({
+  get() {
+    const field = selected.value;
+    if (!field) return null;
+    return field.default_date_start && field.default_date_end
+      ? [field.default_date_start, field.default_date_end]
+      : null;
+  },
+  set(val) {
+    if (!selected.value) return;
+    selected.value.default_date_start = val?.[0] || null;
+    selected.value.default_date_end = val?.[1] || null;
+  },
+});
+const timeRangeValue = computed({
+  get() {
+    const field = selected.value;
+    if (!field) return null;
+    return field.default_time_start && field.default_time_end
+      ? [field.default_time_start, field.default_time_end]
+      : null;
+  },
+  set(val) {
+    if (!selected.value) return;
+    selected.value.default_time_start = val?.[0] || null;
+    selected.value.default_time_end = val?.[1] || null;
+  },
+});
+
+watch(selectedKey, () => {
+  closeBatch();
+});
+
+onMounted(() => {
+  formId.value = route.query.id || "";
+  if (formId.value) {
+    loadForm();
+  } else {
+    captureBaseline();
+  }
+});
+
+function fieldTypeLabel(type) {
+  return FORM_FIELD_LABEL[type] || type;
+}
+function captureBaseline() {
+  baseline.value = JSON.stringify({
+    formName: formName.value,
+    fields: fields.value,
+  });
+}
+function loadForm() {
+  loading.value = true;
+  getRequest(`/appointment/system-forms/${formId.value}`)
+    .then((res) => {
+      if (!res.success || !res.result) {
+        ElMessage.error("表单不存在");
+        router.push({ name: "appointment-system-forms" });
+        return;
+      }
+      formName.value = res.result.formName || "";
+      fields.value = parseFormSchema(res.result.formSchema);
+      selectedKey.value = fields.value[0]?.field_key || "";
+      captureBaseline();
+    })
+    .catch(() => {
+      ElMessage.error("加载表单失败");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function addField(type) {
+  const field = createField(type);
+  fields.value.push(field);
+  selectedKey.value = field.field_key;
+}
+function removeField(index) {
+  fields.value.splice(index, 1);
+  selectedKey.value = fields.value[index]?.field_key || fields.value[index - 1]?.field_key || "";
+}
+function copyField(index) {
+  const source = fields.value[index];
+  if (!source) return;
+  const cloned = JSON.parse(JSON.stringify(source));
+  cloned.field_key = createFieldKey();
+  if (Array.isArray(cloned.options)) {
+    cloned.options = cloned.options.map((opt) => ({
+      ...opt,
+      value: createFieldKey(), // 避免与原字段共用 option value
+    }));
+  }
+  fields.value.splice(index + 1, 0, cloned);
+  selectedKey.value = cloned.field_key;
+}
+function moveField(index, step) {
+  const target = index + step;
+  if (target < 0 || target >= fields.value.length) return;
+  const list = [...fields.value];
+  const [item] = list.splice(index, 1);
+  list.splice(target, 0, item);
+  fields.value = list;
+}
+function closeBatch() {
+  batchVisible.value = false;
+  batchText.value = "";
+}
+function confirmBatch() {
+  if (!selected.value) return;
+  selected.value.options = batchAddOptions(selected.value.options, batchText.value, {
+    radio: selected.value.field_type === "RADIO",
+  });
+  closeBatch();
+}
+function handleReset() {
+  ElMessageBox.confirm("将撤销本次未保存的编辑，恢复进入页面时的内容？", "重置", {
+    type: "warning",
+  }).then(() => {
+    const snap = JSON.parse(baseline.value || "{}");
+    formName.value = snap.formName || "";
+    fields.value = JSON.parse(JSON.stringify(snap.fields || []));
+    selectedKey.value = fields.value[0]?.field_key || "";
+  }).catch(() => {});
+}
+function validate() {
+  if (!formName.value.trim()) {
+    ElMessage.error("请填写表单名称");
+    return false;
+  }
+  if (!fields.value.length) {
+    ElMessage.error("请至少添加一个表单组件");
+    return false;
+  }
+  for (const field of fields.value) {
+    if (field.field_type !== "RICH_TEXT") {
+      const label = (field.field_label || "").trim();
+      if (!label) {
+        ElMessage.error("请填写组件标题");
+        return false;
+      }
+      if (label.length > FIELD_LABEL_MAX) {
+        ElMessage.error(`组件标题最多 ${FIELD_LABEL_MAX} 个字`);
+        return false;
+      }
+    }
+    if (hasOptions(field.field_type)) {
+      const labels = (field.options || []).map((item) => item.label?.trim()).filter(Boolean);
+      if (labels.length < 2) {
+        ElMessage.error(`${field.field_label || "选项组件"}至少需要 2 个选项`);
+        return false;
+      }
+      if ((field.options || []).some((item) => (item.label || "").length > OPTION_LABEL_MAX)) {
+        ElMessage.error("选项最多 10 个字");
+        return false;
+      }
+    }
+    if (field.hint_text && field.hint_text.length > HINT_TEXT_MAX) {
+      ElMessage.error("提示语最多 10 个字");
+      return false;
+    }
+    if (
+      field.default_visibility === "SHOW" &&
+      field.default_date_mode === "SPECIFIED_DATE" &&
+      field.field_type === "DATE" &&
+      !field.default_date
+    ) {
+      ElMessage.error("请为日期组件指定默认日期");
+      return false;
+    }
+    if (
+      field.default_visibility === "SHOW" &&
+      field.default_date_mode === "SPECIFIED_DATE" &&
+      field.field_type === "DATE_RANGE"
+    ) {
+      if (!field.default_date_start || !field.default_date_end) {
+        ElMessage.error("请为日期范围指定起止日期");
+        return false;
+      }
+      if (field.default_date_start > field.default_date_end) {
+        ElMessage.error("日期范围的结束日期不能早于开始日期");
+        return false;
+      }
+    }
+    if (
+      field.default_visibility === "SHOW" &&
+      field.default_time_mode === "SPECIFIED_TIME" &&
+      field.field_type === "TIME" &&
+      !field.default_time
+    ) {
+      ElMessage.error("请为时间组件指定默认时间");
+      return false;
+    }
+    if (
+      field.default_visibility === "SHOW" &&
+      field.default_time_mode === "SPECIFIED_TIME" &&
+      field.field_type === "TIME_RANGE"
+    ) {
+      if (!field.default_time_start || !field.default_time_end) {
+        ElMessage.error("请为时间范围指定起止时间");
+        return false;
+      }
+      if (field.default_time_start > field.default_time_end) {
+        ElMessage.error("时间范围的结束时间不能早于开始时间");
+        return false;
+      }
+    }
+  }
+  return true;
+}
+function handleSave() {
+  if (!validate()) return;
+  saving.value = true;
+  postRequestWithNoForm("/appointment/system-forms", {
+    id: formId.value || undefined,
+    formName: formName.value.trim(),
+    formSchema: serializeFormSchema(fields.value),
+    status: "ENABLED",
+  })
+    .then((res) => {
+      if (res.success) {
+        ElMessage.success("已保存并发布");
+        formId.value = res.result?.id || formId.value;
+        captureBaseline();
+        router.push({ name: "appointment-system-forms" });
+      }
+    })
+    .finally(() => {
+      saving.value = false;
+    });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/appointment/systemFormList.vue b/seller/src/views/appointment/systemFormList.vue
index 19517bb04..defaf68c3 100644
--- a/seller/src/views/appointment/systemFormList.vue
+++ b/seller/src/views/appointment/systemFormList.vue
@@ -54,84 +54,89 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getRequest, postRequestWithNoForm, deleteRequest } from "@/libs/axios";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { countFormFields } from "@/constants/systemForm";
 
-export default {
-  name: "appointmentSystemFormList",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: {
-        formName: "",
-        status: "",
-        pageNumber: 1,
-        pageSize: 10,
-      },
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    fieldCount: countFormFields,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadData();
-    },
-    handleReset() {
-      this.searchForm.formName = "";
-      this.searchForm.status = "";
-      this.searchForm.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      getRequest("/appointment/system-forms", this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result?.records || [];
-            this.total = res.result?.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDesigner(id) {
-      this.$router.push({
-        name: "appointment-system-form-designer",
-        query: id ? { id } : {},
-      });
-    },
-    toggleStatus(row, enabled) {
-      const status = enabled ? "ENABLED" : "DISABLED";
-      postRequestWithNoForm("/appointment/system-forms", {
-        id: row.id,
-        formName: row.formName,
-        formSchema: row.formSchema || "[]",
-        status,
-      }).then((res) => {
-        if (res.success) {
-          row.status = status;
-          ElMessage.success(enabled ? "已启用" : "已停用");
-        }
-      });
-    },
-    handleDelete(row) {
-      ElMessageBox.confirm("确认删除该表单？", "提示", { type: "warning" }).then(() => {
-        deleteRequest(`/appointment/system-forms/${row.id}`).then((res) => {
-          if (res.success) {
-            ElMessage.success("已删除");
-            this.loadData();
-          }
-        });
-      });
-    },
-  },
-};
+defineOptions({ name: "appointmentSystemFormList" });
+
+const router = useRouter();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({
+  formName: "",
+  status: "",
+  pageNumber: 1,
+  pageSize: 10,
+});
+
+const fieldCount = countFormFields;
+
+onMounted(() => {
+  loadData();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadData();
+}
+
+function handleReset() {
+  searchForm.formName = "";
+  searchForm.status = "";
+  searchForm.pageNumber = 1;
+  loadData();
+}
+
+function loadData() {
+  loading.value = true;
+  getRequest("/appointment/system-forms", searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result?.records || [];
+        total.value = res.result?.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function goDesigner(id) {
+  router.push({
+    name: "appointment-system-form-designer",
+    query: id ? { id } : {},
+  });
+}
+
+function toggleStatus(row, enabled) {
+  const status = enabled ? "ENABLED" : "DISABLED";
+  postRequestWithNoForm("/appointment/system-forms", {
+    id: row.id,
+    formName: row.formName,
+    formSchema: row.formSchema || "[]",
+    status,
+  }).then((res) => {
+    if (res.success) {
+      row.status = status;
+      ElMessage.success(enabled ? "已启用" : "已停用");
+    }
+  });
+}
+
+function handleDelete(row) {
+  ElMessageBox.confirm("确认删除该表单？", "提示", { type: "warning" }).then(() => {
+    deleteRequest(`/appointment/system-forms/${row.id}`).then((res) => {
+      if (res.success) {
+        ElMessage.success("已删除");
+        loadData();
+      }
+    });
+  });
+}
 </script>
diff --git a/seller/src/views/appointment/workOrderList.vue b/seller/src/views/appointment/workOrderList.vue
index eea736f81..bec6c6411 100644
--- a/seller/src/views/appointment/workOrderList.vue
+++ b/seller/src/views/appointment/workOrderList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="80px" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="80px" @keyup.enter="handleSearch">
         <el-form-item label="工单编号" prop="workOrderSn">
           <el-input v-model="searchForm.workOrderSn" clearable style="width: 200px" />
         </el-form-item>
@@ -75,7 +75,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   getWorkOrderPage,
   getWorkOrderStatusCounts,
@@ -83,102 +85,103 @@ import {
   endWorkOrderService,
 } from "@/api/appointment";
 import { SERVICE_MODE_LABEL, WORK_ORDER_STATUS_LABEL } from "@/constants/appointment";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "appointmentWorkOrderList",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      statusTab: "ALL",
-      statusCounts: {},
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        serviceStatus: "",
-        workOrderSn: "",
-        orderSn: "",
-        serviceMode: "",
-      },
-      statusTabs: [
-        { value: "ALL", label: "全部" },
-        { value: "PENDING_CLAIM", label: "待领取" },
-        { value: "WAIT_VERIFY", label: "待核销" },
-        { value: "IN_SERVICE", label: "服务中" },
-        { value: "SERVICE_ENDED", label: "服务结束" },
-        { value: "REFUNDED", label: "已退款" },
-      ],
-    };
-  },
-  mounted() {
-    if (this.$route.query.tab) {
-      this.statusTab = this.$route.query.tab;
-      this.searchForm.serviceStatus = this.$route.query.tab === "ALL" ? "" : this.$route.query.tab;
+defineOptions({ name: "appointmentWorkOrderList" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const statusTab = ref("ALL");
+const statusCounts = ref({});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  serviceStatus: "",
+  workOrderSn: "",
+  orderSn: "",
+  serviceMode: "",
+});
+const statusTabs = ref([
+  { value: "ALL", label: "全部" },
+  { value: "PENDING_CLAIM", label: "待领取" },
+  { value: "WAIT_VERIFY", label: "待核销" },
+  { value: "IN_SERVICE", label: "服务中" },
+  { value: "SERVICE_ENDED", label: "服务结束" },
+  { value: "REFUNDED", label: "已退款" },
+]);
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  if (route.query.tab) {
+    statusTab.value = route.query.tab;
+    searchForm.serviceStatus = route.query.tab === "ALL" ? "" : route.query.tab;
+  }
+  loadCounts();
+  loadData();
+});
+
+function serviceModeText(v) {
+  return SERVICE_MODE_LABEL[v] || v || "—";
+}
+function statusText(v) {
+  return WORK_ORDER_STATUS_LABEL[v] || v || "—";
+}
+function tabLabel(item) {
+  const count = statusCounts.value[item.value];
+  return count != null ? `${item.label}(${count})` : item.label;
+}
+function onTabClick(tab) {
+  searchForm.serviceStatus = tab.paneName === "ALL" ? "" : tab.paneName;
+  searchForm.pageNumber = 1;
+  loadData();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  loadData();
+}
+function loadCounts() {
+  getWorkOrderStatusCounts()
+    .then((res) => {
+      if (res.success && res.result) {
+        statusCounts.value = res.result;
+      }
+    })
+    .catch(() => {});
+}
+function loadData() {
+  loading.value = true;
+  getWorkOrderPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result?.records || [];
+        total.value = res.result?.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleClaim(row) {
+  claimWorkOrder(row.id).then((res) => {
+    if (res.success) {
+      Message.success("领取成功");
+      loadCounts();
+      loadData();
     }
-    this.loadCounts();
-    this.loadData();
-  },
-  methods: {
-    serviceModeText(v) {
-      return SERVICE_MODE_LABEL[v] || v || "—";
-    },
-    statusText(v) {
-      return WORK_ORDER_STATUS_LABEL[v] || v || "—";
-    },
-    tabLabel(item) {
-      const count = this.statusCounts[item.value];
-      return count != null ? `${item.label}(${count})` : item.label;
-    },
-    onTabClick(tab) {
-      this.searchForm.serviceStatus = tab.paneName === "ALL" ? "" : tab.paneName;
-      this.searchForm.pageNumber = 1;
-      this.loadData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.loadData();
-    },
-    loadCounts() {
-      getWorkOrderStatusCounts()
-        .then((res) => {
-          if (res.success && res.result) {
-            this.statusCounts = res.result;
-          }
-        })
-        .catch(() => {});
-    },
-    loadData() {
-      this.loading = true;
-      getWorkOrderPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result?.records || [];
-            this.total = res.result?.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleClaim(row) {
-      claimWorkOrder(row.id).then((res) => {
-        if (res.success) {
-          this.$message.success("领取成功");
-          this.loadCounts();
-          this.loadData();
-        }
-      });
-    },
-    handleEnd(row) {
-      endWorkOrderService(row.id).then((res) => {
-        if (res.success) {
-          this.$message.success("已结束服务");
-          this.loadCounts();
-          this.loadData();
-        }
-      });
-    },
-  },
-};
+  });
+}
+function handleEnd(row) {
+  endWorkOrderService(row.id).then((res) => {
+    if (res.success) {
+      Message.success("已结束服务");
+      loadCounts();
+      loadData();
+    }
+  });
+}
 </script>
diff --git a/seller/src/views/change-password/change-password.vue b/seller/src/views/change-password/change-password.vue
index 1919afed7..cc44e5c29 100644
--- a/seller/src/views/change-password/change-password.vue
+++ b/seller/src/views/change-password/change-password.vue
@@ -3,7 +3,7 @@
     <el-card class="change-pass">
       <template #header>修改密码</template>
       <el-form
-        ref="editPasswordForm"
+        ref="editPasswordFormRef"
         :model="editPasswordForm"
         label-width="100px"
         label-position="right"
@@ -41,84 +41,83 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import SetPassword from "@/components/lili/set-password";
 import { changePass } from "@/api/index";
 import { ElMessageBox } from "element-plus";
+import { md5 } from "@/utils/md5.js";
+import { useAppStore } from "@/stores/app";
+import { useUserStore } from "@/stores/user";
 
-export default {
-  name: "change_pass",
-  components: {
-    SetPassword,
-  },
-  data() {
-    const valideRePassword = (rule, value, callback) => {
-      if (value !== this.editPasswordForm.newPassword) {
-        callback(new Error("两次输入密码不一致"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      savePassLoading: false,
-      editPasswordForm: {
-        oldPass: "",
-        newPassword: "",
-        rePass: "",
-      },
-      strength: "",
-      passwordValidate: {
-        oldPass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
-        newPassword: [
-          { required: true, message: "请输入新密码", trigger: "blur" },
-          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
-          { max: 32, message: "最多输入32个字符", trigger: "blur" },
-        ],
-        rePass: [
-          { required: true, message: "请再次输入新密码", trigger: "blur" },
-          { validator: valideRePassword, trigger: "blur" },
-        ],
-      },
-    };
-  },
-  methods: {
-    changeInputPass(v, grade, strength) {
-      this.strength = strength;
-    },
-    editPassword() {
-      const params = {
-        password: this.md5(this.editPasswordForm.oldPass),
-        newPassword: this.md5(this.editPasswordForm.newPassword),
-      };
-      this.$refs.editPasswordForm.validate((valid) => {
-        if (!valid) return;
-        this.savePassLoading = true;
-        changePass(params)
-          .then((res) => {
-            if (res?.success) {
-              ElMessageBox.alert("修改密码成功，需重新登录", "修改密码成功", {
-                confirmButtonText: "确定",
-              }).then(() => {
-                this.$store.commit("logout", this);
-                this.$store.commit("clearOpenedSubmenu");
-                this.$router.push({ name: "login" });
-              });
-            }
-          })
-          .finally(() => {
-            this.savePassLoading = false;
-          });
-      });
-    },
-    cancelEditPass() {
-      this.$store.commit("removeTag", "change_pass");
-      localStorage.storeOpenedList = JSON.stringify(
-        this.$store.state.app.storeOpenedList
-      );
-      const list = this.$store.state.app.storeOpenedList;
-      const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
-      this.$router.push({ name: lastPageName });
-    },
-  },
+defineOptions({ name: "change_pass" });
+
+const router = useRouter();
+const appStore = useAppStore();
+const userStore = useUserStore();
+
+const editPasswordFormRef = ref(null);
+const savePassLoading = ref(false);
+const editPasswordForm = reactive({
+  oldPass: "",
+  newPassword: "",
+  rePass: "",
+});
+const strength = ref("");
+const valideRePassword = (rule, value, callback) => {
+  if (value !== editPasswordForm.newPassword) {
+    callback(new Error("两次输入密码不一致"));
+  } else {
+    callback();
+  }
 };
+const passwordValidate = {
+  oldPass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+  newPassword: [
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 6, message: "请至少输入6个字符", trigger: "blur" },
+    { max: 32, message: "最多输入32个字符", trigger: "blur" },
+  ],
+  rePass: [
+    { required: true, message: "请再次输入新密码", trigger: "blur" },
+    { validator: valideRePassword, trigger: "blur" },
+  ],
+};
+
+function changeInputPass(v, grade, strengthVal) {
+  strength.value = strengthVal;
+}
+function editPassword() {
+  const params = {
+    password: md5(editPasswordForm.oldPass),
+    newPassword: md5(editPasswordForm.newPassword),
+  };
+  editPasswordFormRef.value.validate((valid) => {
+    if (!valid) return;
+    savePassLoading.value = true;
+    changePass(params)
+      .then((res) => {
+        if (res?.success) {
+          ElMessageBox.alert("修改密码成功，需重新登录", "修改密码成功", {
+            confirmButtonText: "确定",
+          }).then(() => {
+            userStore.logout();
+            appStore.clearOpenedSubmenu();
+            router.push({ name: "login" });
+          });
+        }
+      })
+      .finally(() => {
+        savePassLoading.value = false;
+      });
+  });
+}
+function cancelEditPass() {
+  appStore.removeTag("change_pass");
+  localStorage.storeOpenedList = JSON.stringify(appStore.storeOpenedList);
+  const list = appStore.storeOpenedList;
+  const lastPageName = list.length > 1 ? list[list.length - 1].name : list[0].name;
+  router.push({ name: lastPageName });
+}
 </script>
diff --git a/seller/src/views/distribution/distributionGoods.vue b/seller/src/views/distribution/distributionGoods.vue
index 5cd524960..8c2b78545 100644
--- a/seller/src/views/distribution/distributionGoods.vue
+++ b/seller/src/views/distribution/distributionGoods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -132,7 +132,7 @@
       </div>
     </el-card>
 
-    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
 
     <el-dialog
       v-model="modalVisible"
@@ -222,7 +222,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import {
   getDistributionGoods,
   distributionGoodsCancel,
@@ -230,242 +231,259 @@ import {
   updateDistributionGoodsCommission,
 } from "@/api/distribution";
 import { getShopGoodsLabelListSeller } from "@/api/goods";
-import liliDialog from "@/views/lili-dialog";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "distributionGoods",
-  components: { liliDialog },
-  data() {
-    return {
-      modalVisible: false,
-      modalTitle: "添加分销商品",
-      editVisible: false,
-      editLoading: false,
-      submitLoading: false,
-      loading: true,
-      currentAuthStatus: "ALL",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        goodsName: "",
-        storeCategoryPath: "",
-        goodsType: "",
-        authStatus: "",
-      },
-      shopCategoryList: [],
-      shopCategoryProps: {
-        value: "value",
-        label: "label",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      selectedGoodsList: [],
-      editForm: {
-        id: "",
-        goodsName: "",
-        commission: "",
-        commissionError: false,
-      },
-      commissionPattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.loadFilterOptions();
-      this.getDataList();
-    },
-    loadFilterOptions() {
-      getShopGoodsLabelListSeller()
-        .then((res) => {
-          if (res?.success) {
-            this.shopCategoryList = this.formatShopCategory(res.result || []);
-          }
-        })
-        .catch(() => {});
-    },
-    formatShopCategory(list) {
-      return (list || []).map((item) => ({
-        value: item.id,
-        label: item.labelName,
-        children:
-          item.children && item.children.length
-            ? this.formatShopCategory(item.children)
-            : undefined,
-      }));
-    },
-    goodsTypeText(value) {
-      if (value === "PHYSICAL_GOODS") return "实物商品";
-      if (value === "VIRTUAL_GOODS") return "虚拟商品";
-      if (value === "E_COUPON") return "电子卡券";
-      return "-";
-    },
-    authStatusText(value) {
-      if (value === "TOBEAUDITED") return "待审核";
-      if (value === "REFUSE") return "审核未通过";
-      return "已审核";
-    },
-    onAuthStatusChange(name) {
-      this.searchForm.authStatus = name === "ALL" ? "" : name;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    add() {
-      this.$refs.liliDialog.goodsData = [];
-      this.$refs.liliDialog.open("goods");
-    },
-    selectedGoodsData(selected) {
-      if (!selected?.length) return;
-      this.selectedGoodsList = selected.map((item) => ({
-        skuId: item.id,
-        goodsId: item.goodsId,
-        thumbnail: item.thumbnail,
-        goodsName: item.goodsName,
-        specs: item.simpleSpecs || "-",
-        price: item.price,
-        commission: "1",
-        commissionError: false,
-      }));
-      this.modalVisible = true;
-      this.modalTitle = `添加分销商品（已选${this.selectedGoodsList.length}项）`;
-    },
-    validateRowCommission(row) {
-      const valid = this.commissionPattern.test(String(row.commission || "").trim());
-      row.commissionError = !valid;
-      return valid;
-    },
-    validateAllCommission() {
-      let valid = true;
-      this.selectedGoodsList.forEach((row) => {
-        if (!this.validateRowCommission(row)) {
-          valid = false;
+defineOptions({ name: "distributionGoods" });
+
+const modalVisible = ref(false);
+const modalTitle = ref("添加分销商品");
+const editVisible = ref(false);
+const editLoading = ref(false);
+const submitLoading = ref(false);
+const loading = ref(true);
+const currentAuthStatus = ref("ALL");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  goodsName: "",
+  storeCategoryPath: "",
+  goodsType: "",
+  authStatus: "",
+});
+const shopCategoryList = ref([]);
+const shopCategoryProps = {
+  value: "value",
+  label: "label",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
+};
+const selectedGoodsList = ref([]);
+const editForm = ref({
+  id: "",
+  goodsName: "",
+  commission: "",
+  commissionError: false,
+});
+const commissionPattern = /^[1-9]\d{0,3}(\.\d{1,2})?$/;
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+const liliDialogRef = ref(null);
+const editFormRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  loadFilterOptions();
+  getDataList();
+}
+
+function loadFilterOptions() {
+  getShopGoodsLabelListSeller()
+    .then((res) => {
+      if (res?.success) {
+        shopCategoryList.value = formatShopCategory(res.result || []);
+      }
+    })
+    .catch(() => {});
+}
+
+function formatShopCategory(list) {
+  return (list || []).map((item) => ({
+    value: item.id,
+    label: item.labelName,
+    children:
+      item.children && item.children.length
+        ? formatShopCategory(item.children)
+        : undefined,
+  }));
+}
+
+function goodsTypeText(value) {
+  if (value === "PHYSICAL_GOODS") return "实物商品";
+  if (value === "VIRTUAL_GOODS") return "虚拟商品";
+  if (value === "E_COUPON") return "电子卡券";
+  return "-";
+}
+
+function authStatusText(value) {
+  if (value === "TOBEAUDITED") return "待审核";
+  if (value === "REFUSE") return "审核未通过";
+  return "已审核";
+}
+
+function onAuthStatusChange(name) {
+  searchForm.authStatus = name === "ALL" ? "" : name;
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function add() {
+  liliDialogRef.value.goodsData = [];
+  liliDialogRef.value.open("goods");
+}
+
+function selectedGoodsData(selected) {
+  if (!selected?.length) return;
+  selectedGoodsList.value = selected.map((item) => ({
+    skuId: item.id,
+    goodsId: item.goodsId,
+    thumbnail: item.thumbnail,
+    goodsName: item.goodsName,
+    specs: item.simpleSpecs || "-",
+    price: item.price,
+    commission: "1",
+    commissionError: false,
+  }));
+  modalVisible.value = true;
+  modalTitle.value = `添加分销商品（已选${selectedGoodsList.value.length}项）`;
+}
+
+function validateRowCommission(row) {
+  const valid = commissionPattern.test(String(row.commission || "").trim());
+  row.commissionError = !valid;
+  return valid;
+}
+
+function validateAllCommission() {
+  let valid = true;
+  selectedGoodsList.value.forEach((row) => {
+    if (!validateRowCommission(row)) {
+      valid = false;
+    }
+  });
+  return valid;
+}
+
+function removeSelectedGoods(index) {
+  selectedGoodsList.value.splice(index, 1);
+  if (!selectedGoodsList.value.length) {
+    modalVisible.value = false;
+    return;
+  }
+  modalTitle.value = `添加分销商品（已选${selectedGoodsList.value.length}项）`;
+}
+
+function handleSubmit() {
+  if (!selectedGoodsList.value.length) return;
+  if (!validateAllCommission()) {
+    Message.error("请为所有商品填写大于1且小于9999的合法佣金金额");
+    return;
+  }
+  submitLoading.value = true;
+  const items = selectedGoodsList.value.map((item) => ({
+    skuId: item.skuId,
+    commission: Number(item.commission),
+  }));
+  distributionGoodsBatchCheck(items)
+    .then((res) => {
+      if (res?.success || res?.message === "success") {
+        const addedCount = Array.isArray(res?.result) ? res.result.length : 0;
+        if (addedCount > 0) {
+          Message.success(`成功添加${addedCount}个分销商品`);
+        } else {
+          Message.info("所选商品均已是分销商品，已跳过");
+        }
+      }
+      modalVisible.value = false;
+      selectedGoodsList.value = [];
+      getDataList();
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getDistributionGoods(searchForm)
+    .then((res) => {
+      if (res?.success) {
+        const page = res.result || {};
+        data.value = page.records || [];
+        total.value = page.total || 0;
+      } else {
+        data.value = [];
+        total.value = 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function remove(row) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除此分销商品吗?",
+    loading: true,
+    onOk: () => {
+      distributionGoodsCancel(row.id).then((res) => {
+        Modal.remove();
+        if (res?.success) {
+          Message.success("删除成功");
+          getDataList();
         }
       });
-      return valid;
     },
-    removeSelectedGoods(index) {
-      this.selectedGoodsList.splice(index, 1);
-      if (!this.selectedGoodsList.length) {
-        this.modalVisible = false;
-        return;
+  });
+}
+
+function edit(row) {
+  editForm.value = {
+    id: row.id,
+    goodsName: row.goodsName,
+    commission: row.commission != null ? String(row.commission) : "1",
+    commissionError: false,
+  };
+  editVisible.value = true;
+}
+
+function handleEditSubmit() {
+  const valid = commissionPattern.test(String(editForm.value.commission || "").trim());
+  editForm.value.commissionError = !valid;
+  if (!valid) {
+    Message.error("请输入大于1且小于9999的合法佣金金额");
+    return;
+  }
+  editLoading.value = true;
+  updateDistributionGoodsCommission(editForm.value.id, {
+    commission: Number(editForm.value.commission),
+  })
+    .then((res) => {
+      if (res?.success || res?.message === "success") {
+        Message.success("修改成功");
+        editVisible.value = false;
+        getDataList();
       }
-      this.modalTitle = `添加分销商品（已选${this.selectedGoodsList.length}项）`;
-    },
-    handleSubmit() {
-      if (!this.selectedGoodsList.length) return;
-      if (!this.validateAllCommission()) {
-        this.$Message.error("请为所有商品填写大于1且小于9999的合法佣金金额");
-        return;
-      }
-      this.submitLoading = true;
-      const items = this.selectedGoodsList.map((item) => ({
-        skuId: item.skuId,
-        commission: Number(item.commission),
-      }));
-      distributionGoodsBatchCheck(items)
-        .then((res) => {
-          if (res?.success || res?.message === "success") {
-            const addedCount = Array.isArray(res?.result) ? res.result.length : 0;
-            if (addedCount > 0) {
-              this.$Message.success(`成功添加${addedCount}个分销商品`);
-            } else {
-              this.$Message.info("所选商品均已是分销商品，已跳过");
-            }
-          }
-          this.modalVisible = false;
-          this.selectedGoodsList = [];
-          this.getDataList();
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getDistributionGoods(this.searchForm)
-        .then((res) => {
-          if (res?.success) {
-            const page = res.result || {};
-            this.data = page.records || [];
-            this.total = page.total || 0;
-          } else {
-            this.data = [];
-            this.total = 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    remove(row) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除此分销商品吗?",
-        loading: true,
-        onOk: () => {
-          distributionGoodsCancel(row.id).then((res) => {
-            this.$Modal.remove();
-            if (res?.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    edit(row) {
-      this.editForm = {
-        id: row.id,
-        goodsName: row.goodsName,
-        commission: row.commission != null ? String(row.commission) : "1",
-        commissionError: false,
-      };
-      this.editVisible = true;
-    },
-    handleEditSubmit() {
-      const valid = this.commissionPattern.test(String(this.editForm.commission || "").trim());
-      this.editForm.commissionError = !valid;
-      if (!valid) {
-        this.$Message.error("请输入大于1且小于9999的合法佣金金额");
-        return;
-      }
-      this.editLoading = true;
-      updateDistributionGoodsCommission(this.editForm.id, {
-        commission: Number(this.editForm.commission),
-      })
-        .then((res) => {
-          if (res?.success || res?.message === "success") {
-            this.$Message.success("修改成功");
-            this.editVisible = false;
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.editLoading = false;
-        });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      editLoading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/distribution/distributionOrder.vue b/seller/src/views/distribution/distributionOrder.vue
index ec371e404..14ab2a794 100644
--- a/seller/src/views/distribution/distributionOrder.vue
+++ b/seller/src/views/distribution/distributionOrder.vue
@@ -2,7 +2,7 @@
   <div>
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -122,110 +122,119 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { getDistributionOrder } from "@/api/distribution";
-import { orderStatusList } from "./dataJson";
 import vueQr from "vue-qr";
+import * as filters from "@/utils/filters";
 
-export default {
-  name: "distributionOrder",
-  components: { vueQr },
-  data() {
-    return {
-      timeRange: [],
-      orderStatusList,
-      distributionId: this.$route.query.id,
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  watch: {
-    $route(e) {
-      this.distributionId = e.query.id ? e.query.id : undefined;
-      this.getDataList();
-    },
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.searchForm.distributionId = this.distributionId;
-      this.loading = true;
-      if (this.timeRange && this.timeRange[0] && this.timeRange[1]) {
-        const startTime = new Date(this.timeRange[0]).getTime();
-        const endTime = new Date(this.timeRange[1]).getTime();
-        this.searchForm.startTime = this.$filters.unixToDate(startTime / 1000);
-        this.searchForm.endTime = this.$filters.unixToDate(endTime / 1000);
+defineOptions({ name: "distributionOrder" });
+
+const route = useRoute();
+
+const timeRange = ref([]);
+const distributionId = ref(route.query.id);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与响应式变量 searchForm 互相覆盖
+const searchFormRef = ref(null);
+const table = ref(null);
+
+watch(
+  () => route.query,
+  (e) => {
+    distributionId.value = e.id ? e.id : undefined;
+    getDataList();
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getDataList();
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function getDataList() {
+  searchForm.distributionId = distributionId.value;
+  loading.value = true;
+  if (timeRange.value && timeRange.value[0] && timeRange.value[1]) {
+    const startTime = new Date(timeRange.value[0]).getTime();
+    const endTime = new Date(timeRange.value[1]).getTime();
+    searchForm.startTime = filters.unixToDate(startTime / 1000);
+    searchForm.endTime = filters.unixToDate(endTime / 1000);
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getDistributionOrder(searchForm)
+    .then((res) => {
+      if (res?.success) {
+        const page = res.result || {};
+        data.value = page.records || [];
+        total.value = page.total || 0;
       } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
+        data.value = [];
+        total.value = 0;
       }
-      getDistributionOrder(this.searchForm)
-        .then((res) => {
-          if (res?.success) {
-            const page = res.result || {};
-            this.data = page.records || [];
-            this.total = page.total || 0;
-          } else {
-            this.data = [];
-            this.total = 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    filterStatus(status) {
-      const arr = [
-        { status: "NO_COMPLETED", title: "未完成" },
-        { status: "COMPLETE", title: "完成" },
-        { status: "REFUND", title: "退款" },
-      ];
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].status === status) {
-          return arr[i].title;
-        }
-      }
-      return "未完成";
-    },
-    filterStatusTagType(status) {
-      const arr = [
-        { status: "NO_COMPLETED", type: "warning" },
-        { status: "COMPLETE", type: "success" },
-        { status: "REFUND", type: "danger" },
-      ];
-      for (let i = 0; i < arr.length; i++) {
-        if (arr[i].status === status) {
-          return arr[i].type;
-        }
-      }
-      return "warning";
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function filterStatus(status) {
+  const arr = [
+    { status: "NO_COMPLETED", title: "未完成" },
+    { status: "COMPLETE", title: "完成" },
+    { status: "REFUND", title: "退款" },
+  ];
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].status === status) {
+      return arr[i].title;
+    }
+  }
+  return "未完成";
+}
+
+function filterStatusTagType(status) {
+  const arr = [
+    { status: "NO_COMPLETED", type: "warning" },
+    { status: "COMPLETE", type: "success" },
+    { status: "REFUND", type: "danger" },
+  ];
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i].status === status) {
+      return arr[i].type;
+    }
+  }
+  return "warning";
+}
 </script>
 
 <style lang="scss">
diff --git a/seller/src/views/error-page/403.vue b/seller/src/views/error-page/403.vue
index dc816f3e1..815a8ca4d 100644
--- a/seller/src/views/error-page/403.vue
+++ b/seller/src/views/error-page/403.vue
@@ -17,20 +17,21 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error403",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error403" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/error-page/404.vue b/seller/src/views/error-page/404.vue
index 7b34d24b7..30b2dee29 100644
--- a/seller/src/views/error-page/404.vue
+++ b/seller/src/views/error-page/404.vue
@@ -17,20 +17,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error404",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error404" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/error-page/500.vue b/seller/src/views/error-page/500.vue
index 0d9769e7d..25c2f7962 100644
--- a/seller/src/views/error-page/500.vue
+++ b/seller/src/views/error-page/500.vue
@@ -17,20 +17,22 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Error500",
-  methods: {
-    backPage() {
-      this.$router.go(-1);
-    },
-    goHome() {
-      this.$router.push({
-        name: "home_index",
-      });
-    },
-  },
-};
+<script setup>
+import { useRouter } from "vue-router";
+
+defineOptions({ name: "Error500" });
+
+const router = useRouter();
+
+function backPage() {
+  router.go(-1);
+}
+
+function goHome() {
+  router.push({
+    name: "home_index",
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/goods/card-key/cardKeyPool.vue b/seller/src/views/goods/card-key/cardKeyPool.vue
index 398326fe7..921815287 100644
--- a/seller/src/views/goods/card-key/cardKeyPool.vue
+++ b/seller/src/views/goods/card-key/cardKeyPool.vue
@@ -220,7 +220,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   importCardKey,
   addCardKey,
@@ -235,6 +237,7 @@ import {
   formatCardKeyStatus,
   CARD_KEY_STATUS_TAG,
 } from "@/constants/cardKey";
+import { Message, Modal } from "@/utils/message";
 
 /**
  * 商家卡池管理页：导入/新增/作废/导出，列表展示明文卡密（仅商家授权上下文）。
@@ -243,332 +246,355 @@ import {
  * @author Mike
  * @date 2026-07-31
  */
-export default {
-  name: "cardKeyPool",
-  data() {
-    return {
-      skuId: "",
-      goodsId: "",
-      goodsName: "",
-      skuOptions: [],
-      skuLoading: false,
-      statusTab: "ALL",
-      stats: null,
-      poolLocked: false,
-      loading: false,
-      exportLoading: false,
-      templateLoading: false,
-      data: [],
-      total: 0,
-      importRange: [],
-      searchForm: {
-        cardNo: "",
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      importModal: false,
-      importResultVisible: false,
-      importResult: {},
-      addVisible: false,
-      addLoading: false,
-      addForm: {
-        cardNo: "",
-        cardSecret: "",
-      },
-      addRules: {
-        cardNo: [{ required: true, message: "卡号不能为空", trigger: "blur" }],
-        cardSecret: [{ required: true, message: "卡密不能为空", trigger: "blur" }],
-      },
-    };
-  },
-  computed: {
-    statusTabsWithCount() {
-      const s = this.stats || {};
-      const withCount = (label, count) =>
-        count != null && this.stats ? `${label}(${count})` : label;
-      const total =
-        (s.unusedCount || 0) +
-        (s.reservedCount || 0) +
-        (s.allocatedCount || 0) +
-        (s.voidedCount || 0);
-      return [
-        { title: withCount("全部", total), value: "ALL" },
-        { title: withCount("未使用", s.unusedCount || 0), value: "UNUSED" },
-        { title: withCount("已预占", s.reservedCount || 0), value: "RESERVED" },
-        { title: withCount("已分配", s.allocatedCount || 0), value: "ALLOCATED" },
-        { title: withCount("已作废", s.voidedCount || 0), value: "VOIDED" },
-      ];
-    },
-  },
-  watch: {
-    "$route.query": {
-      handler() {
-        const prevSkuId = this.skuId;
-        this.initFromRoute();
-        if (this.skuId && this.skuId !== prevSkuId) {
-          this.resetPoolViewState();
-          this.loadStats();
-          this.getList();
-        }
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    formatStatus: formatCardKeyStatus,
-    statusTag(status) {
-      return CARD_KEY_STATUS_TAG[status] || "info";
-    },
-    goBack() {
-      this.$router.back();
-    },
-    initFromRoute() {
-      const q = this.$route.query;
-      this.skuId = q.skuId || "";
-      this.goodsId = q.goodsId || "";
-      this.goodsName = q.goodsName || "";
-    },
-    formatSkuOptionLabel(sku) {
-      if (!sku) return "";
-      const spec = sku.simpleSpecs || sku.sn || sku.id;
-      const qty =
-        sku.poolStock != null && sku.poolStock !== ""
-          ? sku.poolStock
-          : sku.quantity != null
-            ? sku.quantity
-            : "—";
-      return `${spec}（库存 ${qty}）`;
-    },
-    resetPoolViewState() {
-      this.statusTab = "ALL";
-      this.searchForm.pageNumber = 1;
-      this.searchForm.cardNo = "";
-      this.importRange = [];
-      this.poolLocked = false;
-      this.stats = null;
-      this.data = [];
-      this.total = 0;
-    },
-    /** 卡池变更后刷新 SKU 选择器中的可售库存（后端 syncSkuStock → quantity） */
-    refreshSkuOptionStock() {
-      if (!this.goodsId) return Promise.resolve();
-      return this.loadSkuOptions();
-    },
-    async loadSkuOptions() {
-      if (!this.goodsId) {
-        this.skuOptions = [];
-        return;
-      }
-      this.skuLoading = true;
-      try {
-        const res = await getQueryGoodsIdGoodsList(this.goodsId);
-        if (res.success) {
-          this.skuOptions = (res.result || []).filter((s) => !s.deleteFlag);
-        }
-      } catch {
-        this.skuOptions = [];
-      } finally {
-        this.skuLoading = false;
-      }
-    },
-    onSkuChange(newSkuId) {
-      if (!newSkuId) return;
-      this.skuId = newSkuId;
-      this.resetPoolViewState();
-      this.$router.replace({
-        path: this.$route.path,
-        query: {
-          ...this.$route.query,
-          skuId: newSkuId,
-          goodsId: this.goodsId,
-          goodsName: this.goodsName,
-        },
-      });
-      this.loadStats();
-      this.getList();
-    },
-    onStatusTabClick(tab) {
-      this.statusTab = tab.paneName;
-      this.searchForm.pageNumber = 1;
-      this.getList();
-    },
-    buildListParams() {
-      const params = {
-        skuId: this.skuId,
-        pageNumber: this.searchForm.pageNumber,
-        pageSize: this.searchForm.pageSize,
-      };
-      if (this.goodsId) params.goodsId = this.goodsId;
-      if (this.searchForm.cardNo) params.cardNo = this.searchForm.cardNo;
-      if (this.statusTab && this.statusTab !== "ALL") {
-        params.status = this.statusTab;
-      }
-      if (this.importRange && this.importRange.length === 2) {
-        params.createTimeStart = this.importRange[0];
-        params.createTimeEnd = this.importRange[1];
-      }
-      return params;
-    },
-    loadStats() {
-      if (!this.skuId) return;
-      getCardKeyStats(this.skuId).then((res) => {
-        if (res.success) {
-          this.stats = res.result;
-        }
-      });
-    },
-    getList() {
-      if (!this.skuId) return;
-      this.loading = true;
-      getCardKeyList(this.buildListParams())
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-            this.poolLocked = false;
-          } else {
-            this.checkPoolLocked(res);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    /** 审核拒绝 / SKU 删除 / 关店时禁用卡池操作（S-06 / S-07 / EC-21~23） */
-    checkPoolLocked(res) {
-      const lockedCodes = [
-        "CARD_KEY_GOODS_AUTH_REFUSE",
-        "CARD_KEY_SKU_DELETED",
-        "CARD_KEY_STORE_CLOSED",
-      ];
-      if (res.code && lockedCodes.includes(String(res.code))) {
-        this.poolLocked = true;
-      }
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getList();
-    },
-    handleReset() {
-      this.searchForm.cardNo = "";
-      this.importRange = [];
-      this.searchForm.pageNumber = 1;
-      this.getList();
-    },
-    onPageSizeChange() {
-      this.searchForm.pageNumber = 1;
-      this.getList();
-    },
-    handleImportUpload(file) {
-      if (!/\.xlsx$/i.test(file.name)) {
-        this.$Message.error("请上传 .xlsx 文件");
-        return false;
-      }
-      importCardKey(this.skuId, file).then((res) => {
-        if (res.success) {
-          this.importModal = false;
-          this.importResult = res.result || {};
-          this.importResultVisible = true;
-          this.loadStats();
-          this.getList();
-          this.refreshSkuOptionStock();
-        } else {
-          this.checkPoolLocked(res);
-        }
-      });
-      return false;
-    },
-    handleDownloadTemplate() {
-      this.templateLoading = true;
-      downloadImportTemplate()
-        .then(() => {
-          this.$Message.success("模板下载成功");
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.templateLoading = false;
-        });
-    },
-    openAddDialog() {
-      this.addForm = { cardNo: "", cardSecret: "" };
-      this.addVisible = true;
-    },
-    submitAdd() {
-      this.$refs.addFormRef.validate((valid) => {
-        if (!valid) return;
-        this.addLoading = true;
-        addCardKey({
-          skuId: this.skuId,
-          cardNo: this.addForm.cardNo.trim(),
-          cardSecret: this.addForm.cardSecret.trim(),
-        })
-          .then((res) => {
-            this.addLoading = false;
-            if (res.success) {
-              this.$Message.success("新增成功");
-              this.addVisible = false;
-              this.loadStats();
-              this.getList();
-              this.refreshSkuOptionStock();
-            } else {
-              this.checkPoolLocked(res);
-            }
-          })
-          .catch(() => {
-            this.addLoading = false;
-          });
-      });
-    },
-    handleVoid(row) {
-      this.$Modal.confirm({
-        title: "确认作废",
-        content: `确定作废卡号「${row.cardNo}」？作废后不可恢复。`,
-        onOk: () => {
-          voidCardKey(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("作废成功");
-              this.loadStats();
-              this.getList();
-              this.refreshSkuOptionStock();
-            }
-          });
-        },
-      });
-    },
-    handleExport() {
-      this.exportLoading = true;
-      const params = { ...this.buildListParams() };
-      delete params.pageNumber;
-      delete params.pageSize;
-      exportCardKey(params, this.skuId)
-        .then(() => {
-          this.$Message.success("导出成功");
-        })
-        .catch(() => {})
-        .finally(() => {
-          this.exportLoading = false;
-        });
-    },
-    async init() {
-      this.initFromRoute();
-      if (this.goodsId) {
-        await this.loadSkuOptions();
-      }
-      if (!this.skuId && this.skuOptions.length) {
-        this.onSkuChange(this.skuOptions[0].id);
-        return;
-      }
-      if (this.skuId) {
-        this.loadStats();
-        this.getList();
-      }
-    },
-  },
-  mounted() {
-    this.init();
-  },
+defineOptions({ name: "cardKeyPool" });
+
+const route = useRoute();
+const router = useRouter();
+
+const skuId = ref("");
+const goodsId = ref("");
+const goodsName = ref("");
+const skuOptions = ref([]);
+const skuLoading = ref(false);
+const statusTab = ref("ALL");
+const stats = ref(null);
+const poolLocked = ref(false);
+const loading = ref(false);
+const exportLoading = ref(false);
+const templateLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const importRange = ref([]);
+const searchForm = reactive({
+  cardNo: "",
+  pageNumber: 1,
+  pageSize: 20,
+});
+const importModal = ref(false);
+const importResultVisible = ref(false);
+const importResult = ref({});
+const addVisible = ref(false);
+const addLoading = ref(false);
+const addForm = ref({
+  cardNo: "",
+  cardSecret: "",
+});
+const addRules = {
+  cardNo: [{ required: true, message: "卡号不能为空", trigger: "blur" }],
+  cardSecret: [{ required: true, message: "卡密不能为空", trigger: "blur" }],
 };
+
+const searchFormRef = ref(null);
+const addFormRef = ref(null);
+
+const statusTabsWithCount = computed(() => {
+  const s = stats.value || {};
+  const withCount = (label, count) =>
+    count != null && stats.value ? `${label}(${count})` : label;
+  const totalCount =
+    (s.unusedCount || 0) +
+    (s.reservedCount || 0) +
+    (s.allocatedCount || 0) +
+    (s.voidedCount || 0);
+  return [
+    { title: withCount("全部", totalCount), value: "ALL" },
+    { title: withCount("未使用", s.unusedCount || 0), value: "UNUSED" },
+    { title: withCount("已预占", s.reservedCount || 0), value: "RESERVED" },
+    { title: withCount("已分配", s.allocatedCount || 0), value: "ALLOCATED" },
+    { title: withCount("已作废", s.voidedCount || 0), value: "VOIDED" },
+  ];
+});
+
+watch(
+  () => route.query,
+  () => {
+    const prevSkuId = skuId.value;
+    initFromRoute();
+    if (skuId.value && skuId.value !== prevSkuId) {
+      resetPoolViewState();
+      loadStats();
+      getList();
+    }
+  },
+  { deep: true }
+);
+
+const formatStatus = formatCardKeyStatus;
+
+function statusTag(status) {
+  return CARD_KEY_STATUS_TAG[status] || "info";
+}
+
+function goBack() {
+  router.back();
+}
+
+function initFromRoute() {
+  const q = route.query;
+  skuId.value = q.skuId || "";
+  goodsId.value = q.goodsId || "";
+  goodsName.value = q.goodsName || "";
+}
+
+function formatSkuOptionLabel(sku) {
+  if (!sku) return "";
+  const spec = sku.simpleSpecs || sku.sn || sku.id;
+  const qty =
+    sku.poolStock != null && sku.poolStock !== ""
+      ? sku.poolStock
+      : sku.quantity != null
+        ? sku.quantity
+        : "—";
+  return `${spec}（库存 ${qty}）`;
+}
+
+function resetPoolViewState() {
+  statusTab.value = "ALL";
+  searchForm.pageNumber = 1;
+  searchForm.cardNo = "";
+  importRange.value = [];
+  poolLocked.value = false;
+  stats.value = null;
+  data.value = [];
+  total.value = 0;
+}
+
+/** 卡池变更后刷新 SKU 选择器中的可售库存（后端 syncSkuStock → quantity） */
+function refreshSkuOptionStock() {
+  if (!goodsId.value) return Promise.resolve();
+  return loadSkuOptions();
+}
+
+async function loadSkuOptions() {
+  if (!goodsId.value) {
+    skuOptions.value = [];
+    return;
+  }
+  skuLoading.value = true;
+  try {
+    const res = await getQueryGoodsIdGoodsList(goodsId.value);
+    if (res.success) {
+      skuOptions.value = (res.result || []).filter((s) => !s.deleteFlag);
+    }
+  } catch {
+    skuOptions.value = [];
+  } finally {
+    skuLoading.value = false;
+  }
+}
+
+function onSkuChange(newSkuId) {
+  if (!newSkuId) return;
+  skuId.value = newSkuId;
+  resetPoolViewState();
+  router.replace({
+    path: route.path,
+    query: {
+      ...route.query,
+      skuId: newSkuId,
+      goodsId: goodsId.value,
+      goodsName: goodsName.value,
+    },
+  });
+  loadStats();
+  getList();
+}
+
+function onStatusTabClick(tab) {
+  statusTab.value = tab.paneName;
+  searchForm.pageNumber = 1;
+  getList();
+}
+
+function buildListParams() {
+  const params = {
+    skuId: skuId.value,
+    pageNumber: searchForm.pageNumber,
+    pageSize: searchForm.pageSize,
+  };
+  if (goodsId.value) params.goodsId = goodsId.value;
+  if (searchForm.cardNo) params.cardNo = searchForm.cardNo;
+  if (statusTab.value && statusTab.value !== "ALL") {
+    params.status = statusTab.value;
+  }
+  if (importRange.value && importRange.value.length === 2) {
+    params.createTimeStart = importRange.value[0];
+    params.createTimeEnd = importRange.value[1];
+  }
+  return params;
+}
+
+function loadStats() {
+  if (!skuId.value) return;
+  getCardKeyStats(skuId.value).then((res) => {
+    if (res.success) {
+      stats.value = res.result;
+    }
+  });
+}
+
+function getList() {
+  if (!skuId.value) return;
+  loading.value = true;
+  getCardKeyList(buildListParams())
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+        poolLocked.value = false;
+      } else {
+        checkPoolLocked(res);
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+/** 审核拒绝 / SKU 删除 / 关店时禁用卡池操作（S-06 / S-07 / EC-21~23） */
+function checkPoolLocked(res) {
+  const lockedCodes = [
+    "CARD_KEY_GOODS_AUTH_REFUSE",
+    "CARD_KEY_SKU_DELETED",
+    "CARD_KEY_STORE_CLOSED",
+  ];
+  if (res.code && lockedCodes.includes(String(res.code))) {
+    poolLocked.value = true;
+  }
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getList();
+}
+
+function handleReset() {
+  searchForm.cardNo = "";
+  importRange.value = [];
+  searchForm.pageNumber = 1;
+  getList();
+}
+
+function onPageSizeChange() {
+  searchForm.pageNumber = 1;
+  getList();
+}
+
+function handleImportUpload(file) {
+  if (!/\.xlsx$/i.test(file.name)) {
+    Message.error("请上传 .xlsx 文件");
+    return false;
+  }
+  importCardKey(skuId.value, file).then((res) => {
+    if (res.success) {
+      importModal.value = false;
+      importResult.value = res.result || {};
+      importResultVisible.value = true;
+      loadStats();
+      getList();
+      refreshSkuOptionStock();
+    } else {
+      checkPoolLocked(res);
+    }
+  });
+  return false;
+}
+
+function handleDownloadTemplate() {
+  templateLoading.value = true;
+  downloadImportTemplate()
+    .then(() => {
+      Message.success("模板下载成功");
+    })
+    .catch(() => {})
+    .finally(() => {
+      templateLoading.value = false;
+    });
+}
+
+function openAddDialog() {
+  addForm.value = { cardNo: "", cardSecret: "" };
+  addVisible.value = true;
+}
+
+function submitAdd() {
+  addFormRef.value.validate((valid) => {
+    if (!valid) return;
+    addLoading.value = true;
+    addCardKey({
+      skuId: skuId.value,
+      cardNo: addForm.value.cardNo.trim(),
+      cardSecret: addForm.value.cardSecret.trim(),
+    })
+      .then((res) => {
+        addLoading.value = false;
+        if (res.success) {
+          Message.success("新增成功");
+          addVisible.value = false;
+          loadStats();
+          getList();
+          refreshSkuOptionStock();
+        } else {
+          checkPoolLocked(res);
+        }
+      })
+      .catch(() => {
+        addLoading.value = false;
+      });
+  });
+}
+
+function handleVoid(row) {
+  Modal.confirm({
+    title: "确认作废",
+    content: `确定作废卡号「${row.cardNo}」？作废后不可恢复。`,
+    onOk: () => {
+      voidCardKey(row.id).then((res) => {
+        if (res.success) {
+          Message.success("作废成功");
+          loadStats();
+          getList();
+          refreshSkuOptionStock();
+        }
+      });
+    },
+  });
+}
+
+function handleExport() {
+  exportLoading.value = true;
+  const params = { ...buildListParams() };
+  delete params.pageNumber;
+  delete params.pageSize;
+  exportCardKey(params, skuId.value)
+    .then(() => {
+      Message.success("导出成功");
+    })
+    .catch(() => {})
+    .finally(() => {
+      exportLoading.value = false;
+    });
+}
+
+async function init() {
+  initFromRoute();
+  if (goodsId.value) {
+    await loadSkuOptions();
+  }
+  if (!skuId.value && skuOptions.value.length) {
+    onSkuChange(skuOptions.value[0].id);
+    return;
+  }
+  if (skuId.value) {
+    loadStats();
+    getList();
+  }
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/goods/goods-manage/category.vue b/seller/src/views/goods/goods-manage/category.vue
index 2ee75cf80..8ee459110 100644
--- a/seller/src/views/goods/goods-manage/category.vue
+++ b/seller/src/views/goods/goods-manage/category.vue
@@ -37,7 +37,7 @@
         :close-on-click-modal="false"
         destroy-on-close
       >
-        <el-form ref="form" :model="formAdd" label-width="120px" :rules="formValidate">
+        <el-form ref="formRef" :model="formAdd" label-width="120px" :rules="formValidate">
           <el-form-item v-if="showParent" label="上级分类" prop="parentId">
             {{ parentTitle }}
             <el-input v-model="formAdd.parentId" style="display: none" />
@@ -65,7 +65,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import {
   addShopGoodsLabel,
   delCategdelShopGoodsLabel,
@@ -74,170 +75,166 @@ import {
 } from "@/api/goods";
 import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "goods-category",
-  components: {
-    uploadPicInput,
-  },
-  data() {
-    return {
-      submitLoading: false,
-      categoryList: [],
-      loading: false,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      showParent: false,
-      parentTitle: "",
-      formAdd: this.createDefaultForm(),
-      formValidate: {
-        name: [regular.REQUIRED, regular.VARCHAR20],
-        sortOrder: [regular.REQUIRED, regular.INTEGER],
-      },
-      tableData: [],
-    };
-  },
-  methods: {
-    createDefaultForm() {
-      return {
-        parentId: "",
-        name: "",
-        image: "",
-        sortOrder: 0,
-        level: 0,
-      };
-    },
-    normalizeCategoryTree(list, parentId = 0, level = 0) {
-      if (!Array.isArray(list) || list.length === 0) return;
-      list.forEach((item) => {
-        if (!item || typeof item !== "object") return;
-        item.name = item.name || item.labelName;
-        item.parentId = item.parentId ?? parentId;
-        item.level = item.level ?? level;
-        if (Array.isArray(item.children) && item.children.length) {
-          this.normalizeCategoryTree(item.children, item.id, Number(item.level) + 1);
-        }
-      });
-    },
-    init() {
-      this.getAllList();
-    },
-    addChildren(v) {
-      this.modalType = 0;
-      this.modalTitle = "添加子分类";
-      this.parentTitle = v.name;
-      this.formAdd = this.createDefaultForm();
-      this.formAdd.level = Number(v.level) + 1;
-      this.showParent = true;
-      delete this.formAdd.id;
-      this.formAdd.parentId = v.id;
-      this.modalVisible = true;
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑";
-      this.formAdd.id = v.id;
-      this.formAdd.name = v.name;
-      this.formAdd.level = v.level;
-      this.formAdd.parentId = v.parentId ?? 0;
-      this.formAdd.sortOrder = v.sortOrder;
-      this.formAdd.image = v.image;
-      this.showParent = false;
-      this.modalVisible = true;
-    },
-    addParent() {
-      this.modalType = 0;
-      this.modalTitle = "添加一级分类";
-      this.parentTitle = "顶级分类";
-      this.showParent = true;
-      this.formAdd = this.createDefaultForm();
-      delete this.formAdd.id;
-      this.formAdd.parentId = 0;
-      this.formAdd.level = 0;
-      this.modalVisible = true;
-    },
-    Submit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        const params = this.buildLabelParams(this.formAdd);
-        if (this.modalType === 0) {
-          delete params.id;
-          addShopGoodsLabel(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("添加成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.$refs.form.resetFields();
-            }
-          });
-        } else {
-          editShopGoodsLabel(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-              this.getAllList();
-              this.modalVisible = false;
-              this.$refs.form.resetFields();
-            }
-          });
-        }
-      });
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          delCategdelShopGoodsLabel(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getAllList();
-            }
-          });
-        },
-      });
-    },
-    getAllList() {
-      this.loading = true;
-      getShopGoodsLabelList()
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.normalizeCategoryTree(res.result);
-            this.categoryList = JSON.parse(JSON.stringify(res.result));
-            this.tableData = JSON.parse(JSON.stringify(res.result));
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    buildLabelParams(form) {
-      const params = {
-        id: form.id,
-        parentId: form.parentId,
-        labelName: form.name,
-        image: form.image,
-        sortOrder: form.sortOrder,
-        level: form.level,
-      };
-      Object.keys(params).forEach((key) => {
-        if (params[key] === undefined || params[key] === "") {
-          delete params[key];
-        }
-      });
-      return params;
-    },
-  },
-  mounted() {
-    this.init();
-  },
+defineOptions({ name: "goods-category" });
+
+const submitLoading = ref(false);
+const categoryList = ref([]);
+const loading = ref(false);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const showParent = ref(false);
+const parentTitle = ref("");
+const formAdd = ref(createDefaultForm());
+const formValidate = {
+  name: [regular.REQUIRED, regular.VARCHAR20],
+  sortOrder: [regular.REQUIRED, regular.INTEGER],
 };
+const tableData = ref([]);
+
+// formRef：模板 ref 改名避免与顶层变量互相覆盖
+const formRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function createDefaultForm() {
+  return {
+    parentId: "",
+    name: "",
+    image: "",
+    sortOrder: 0,
+    level: 0,
+  };
+}
+function normalizeCategoryTree(list, parentId = 0, level = 0) {
+  if (!Array.isArray(list) || list.length === 0) return;
+  list.forEach((item) => {
+    if (!item || typeof item !== "object") return;
+    item.name = item.name || item.labelName;
+    item.parentId = item.parentId ?? parentId;
+    item.level = item.level ?? level;
+    if (Array.isArray(item.children) && item.children.length) {
+      normalizeCategoryTree(item.children, item.id, Number(item.level) + 1);
+    }
+  });
+}
+function init() {
+  getAllList();
+}
+function addChildren(v) {
+  modalType.value = 0;
+  modalTitle.value = "添加子分类";
+  parentTitle.value = v.name;
+  formAdd.value = createDefaultForm();
+  formAdd.value.level = Number(v.level) + 1;
+  showParent.value = true;
+  delete formAdd.value.id;
+  formAdd.value.parentId = v.id;
+  modalVisible.value = true;
+}
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑";
+  formAdd.value.id = v.id;
+  formAdd.value.name = v.name;
+  formAdd.value.level = v.level;
+  formAdd.value.parentId = v.parentId ?? 0;
+  formAdd.value.sortOrder = v.sortOrder;
+  formAdd.value.image = v.image;
+  showParent.value = false;
+  modalVisible.value = true;
+}
+function addParent() {
+  modalType.value = 0;
+  modalTitle.value = "添加一级分类";
+  parentTitle.value = "顶级分类";
+  showParent.value = true;
+  formAdd.value = createDefaultForm();
+  delete formAdd.value.id;
+  formAdd.value.parentId = 0;
+  formAdd.value.level = 0;
+  modalVisible.value = true;
+}
+function Submit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    const params = buildLabelParams(formAdd.value);
+    if (modalType.value === 0) {
+      delete params.id;
+      addShopGoodsLabel(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("添加成功");
+          getAllList();
+          modalVisible.value = false;
+          formRef.value.resetFields();
+        }
+      });
+    } else {
+      editShopGoodsLabel(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+          getAllList();
+          modalVisible.value = false;
+          formRef.value.resetFields();
+        }
+      });
+    }
+  });
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      delCategdelShopGoodsLabel(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getAllList();
+        }
+      });
+    },
+  });
+}
+function getAllList() {
+  loading.value = true;
+  getShopGoodsLabelList()
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        normalizeCategoryTree(res.result);
+        categoryList.value = JSON.parse(JSON.stringify(res.result));
+        tableData.value = JSON.parse(JSON.stringify(res.result));
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function buildLabelParams(form) {
+  const params = {
+    id: form.id,
+    parentId: form.parentId,
+    labelName: form.name,
+    image: form.image,
+    sortOrder: form.sortOrder,
+    level: form.level,
+  };
+  Object.keys(params).forEach((key) => {
+    if (params[key] === undefined || params[key] === "") {
+      delete params[key];
+    }
+  });
+  return params;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/goods/goods-seller/alertQuantity.vue b/seller/src/views/goods/goods-seller/alertQuantity.vue
index f26bce7c0..bba4e82dc 100644
--- a/seller/src/views/goods/goods-seller/alertQuantity.vue
+++ b/seller/src/views/goods/goods-seller/alertQuantity.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <div @keyup.enter="handleSearch">
-        <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
           <el-form-item label="商品名称" prop="goodsName">
             <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
           </el-form-item>
@@ -39,7 +39,7 @@
           <el-button type="primary" class="export" @click="exportStock">批量导出</el-button>
           <el-button class="export" @click="openImportStock">批量导入</el-button>
         </div>
-        <el-table ref="table" v-loading="loading" border :data="stockAllData" class="mt_10" style="width: 100%">
+        <el-table ref="tableRef" v-loading="loading" border :data="stockAllData" class="mt_10" style="width: 100%">
           <el-table-column label="商品信息" min-width="400">
             <template #default="{ row }">
               <div style="margin-top: 5px; height: 90px; display: flex">
@@ -115,139 +115,139 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import {
   getGoodsCategoryAll,
   getGoodsSkuListDataSeller,
   importStockExcel,
   queryExportStock,
 } from "@/api/goods";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "alertQuantity",
-  data() {
-    return {
-      importModal: false,
-      spinShow: false,
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      },
-      stockAllData: [],
-      total: 0,
-      categoryList: [],
-      category: [],
-      file: null,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-      this.deepGroup();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.categoryPath = this.category?.length ? this.category.join(",") : null;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      };
-      this.category = [];
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getGoodsSkuListDataSeller(this.searchForm).then((res) => {
-        if (res.success) {
-          this.stockAllData = res.result.records;
-          this.total = res.result.total;
-        }
-        this.loading = false;
-      });
-    },
-    deepGroup() {
-      getGoodsCategoryAll().then((res) => {
-        if (res.success) {
-          this.categoryList = res.result.map((item) => ({
-            value: item.id,
-            label: item.name,
-            children: (item.children || []).map((child) => ({
-              value: child.id,
-              label: child.name,
-              children: (child.children || []).map((grandson) => ({
-                value: grandson.id,
-                label: grandson.name,
-              })),
-            })),
-          }));
-        }
-      });
-    },
-    async exportStock() {
-      let randomNumber = "";
-      for (let i = 0; i < 10; i++) {
-        randomNumber += Math.floor(Math.random() * 10);
+defineOptions({ name: "alertQuantity" });
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const importModal = ref(false);
+const spinShow = ref(false);
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+});
+const stockAllData = ref([]);
+const total = ref(0);
+const categoryList = ref([]);
+const category = ref([]);
+const file = ref(null);
+
+function init() {
+  getDataList();
+  deepGroup();
+}
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.categoryPath = category.value?.length ? category.value.join(",") : null;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+  };
+  category.value = [];
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getGoodsSkuListDataSeller(searchForm.value).then((res) => {
+    if (res.success) {
+      stockAllData.value = res.result.records;
+      total.value = res.result.total;
+    }
+    loading.value = false;
+  });
+}
+function deepGroup() {
+  getGoodsCategoryAll().then((res) => {
+    if (res.success) {
+      categoryList.value = res.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+        children: (item.children || []).map((child) => ({
+          value: child.id,
+          label: child.name,
+          children: (child.children || []).map((grandson) => ({
+            value: grandson.id,
+            label: grandson.name,
+          })),
+        })),
+      }));
+    }
+  });
+}
+async function exportStock() {
+  let randomNumber = "";
+  for (let i = 0; i < 10; i++) {
+    randomNumber += Math.floor(Math.random() * 10);
+  }
+  queryExportStock(searchForm.value)
+    .then((res) => {
+      const blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8" });
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = randomNumber + ".xlsx";
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
+      } else {
+        navigator.msSaveBlob(blob, randomNumber + ".xlsx");
       }
-      queryExportStock(this.searchForm)
-        .then((res) => {
-          const blob = new Blob([res], { type: "application/vnd.ms-excel;charset=utf-8" });
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = randomNumber + ".xlsx";
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else {
-            navigator.msSaveBlob(blob, randomNumber + ".xlsx");
-          }
-        })
-        .catch((err) => console.log(err));
-    },
-    openImportStock() {
-      this.importModal = true;
-    },
-    handleUpload(file) {
-      this.file = file;
-      this.upload();
-      return false;
-    },
-    upload() {
-      const fd = new FormData();
-      fd.append("files", this.file);
-      this.spinShow = true;
-      importStockExcel(fd).then((res) => {
-        this.spinShow = false;
-        if (res.success) {
-          this.$Message.success("导入成功");
-          this.importModal = false;
-          this.getDataList();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .catch((err) => console.log(err));
+}
+function openImportStock() {
+  importModal.value = true;
+}
+function handleUpload(f) {
+  file.value = f;
+  upload();
+  return false;
+}
+function upload() {
+  const fd = new FormData();
+  fd.append("files", file.value);
+  spinShow.value = true;
+  importStockExcel(fd).then((res) => {
+    spinShow.value = false;
+    if (res.success) {
+      Message.success("导入成功");
+      importModal.value = false;
+      getDataList();
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 @import "@/styles/table-common.scss";
diff --git a/seller/src/views/goods/goods-seller/alertQuantityWarn.vue b/seller/src/views/goods/goods-seller/alertQuantityWarn.vue
index 03487c77d..06eaff2c3 100644
--- a/seller/src/views/goods/goods-seller/alertQuantityWarn.vue
+++ b/seller/src/views/goods/goods-seller/alertQuantityWarn.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <div @keyup.enter="handleSearch">
-        <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+        <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
           <el-form-item label="商品名称" prop="goodsName">
             <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
           </el-form-item>
@@ -120,7 +120,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import {
   getGoodsCategoryAll,
   getGoodsListDataByStockSeller,
@@ -128,6 +130,9 @@ import {
   updateGoodsAlertStocks,
   updateGoodsSkuStocks,
 } from "@/api/goods";
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "alertQuantityWarn" });
 
 const ROUTE_TAB_MAP = {
   alertQuantityWarn: "warnList",
@@ -135,154 +140,165 @@ const ROUTE_TAB_MAP = {
   alertQuantityWarnSetting: "warnSetting",
 };
 
-export default {
-  name: "alertQuantityWarn",
-  data() {
-    return {
-      loading: true,
-      updateStockModalVisible: false,
-      activeTab: "warnList",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      },
-      checkFlag: false,
-      stockList: [],
-      warnData: [],
-      skuAllData: [],
-      total: 0,
-      categoryList: [],
-      category: [],
-      selectedSku: {},
-    };
-  },
-  watch: {
-    "$route.name"(name) {
-      this.applyRouteTab(name);
-      this.handleReset();
-    },
-  },
-  mounted() {
-    this.applyRouteTab();
-    this.init();
-  },
-  methods: {
-    applyRouteTab(name = this.$route.name) {
-      this.activeTab = ROUTE_TAB_MAP[name] || "warnList";
-    },
-    init() {
-      this.getDataList();
-      this.deepGroup();
-    },
-    openUpdataStockModal(row) {
-      this.stockList = [];
-      this.selectedSku = JSON.parse(JSON.stringify(row));
-      this.stockList.push(this.selectedSku);
-      this.updateStockModalVisible = true;
-    },
-    updateStock() {
-      const updateStockList = this.stockList.map((i) => ({
-        skuId: i.id,
-        quantity: i.quantity,
+const route = useRoute();
+
+const loading = ref(true);
+const updateStockModalVisible = ref(false);
+const activeTab = ref("warnList");
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+});
+const checkFlag = ref(false);
+const stockList = ref([]);
+const warnData = ref([]);
+const skuAllData = ref([]);
+const total = ref(0);
+const categoryList = ref([]);
+const category = ref([]);
+const selectedSku = ref({});
+
+const searchFormRef = ref(null);
+
+watch(
+  () => route.name,
+  (name) => {
+    applyRouteTab(name);
+    handleReset();
+  }
+);
+
+onMounted(() => {
+  applyRouteTab();
+  init();
+});
+
+function applyRouteTab(name = route.name) {
+  activeTab.value = ROUTE_TAB_MAP[name] || "warnList";
+}
+
+function init() {
+  getDataList();
+  deepGroup();
+}
+
+function openUpdataStockModal(row) {
+  stockList.value = [];
+  selectedSku.value = JSON.parse(JSON.stringify(row));
+  stockList.value.push(selectedSku.value);
+  updateStockModalVisible.value = true;
+}
+
+function updateStock() {
+  const updateStockList = stockList.value.map((i) => ({
+    skuId: i.id,
+    quantity: i.quantity,
+  }));
+  updateGoodsSkuStocks(updateStockList).then((res) => {
+    if (res.success) {
+      updateStockModalVisible.value = false;
+      Message.success("更新库存成功");
+      getDataList();
+    }
+  });
+}
+
+function updateWarnStock(row) {
+  if (checkFlag.value) {
+    updateGoodsAlertStocks({ skuId: row.id, alertQuantity: row.alertQuantity }).then((res) => {
+      if (res.success) {
+        Message.success("更新成功");
+      }
+    });
+  }
+}
+
+function checkVal(row) {
+  if (
+    !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row.alertQuantity) ||
+    parseInt(row.alertQuantity) < 0 ||
+    parseInt(row.alertQuantity) > 99999999
+  ) {
+    Message.error("请输入0~99999999之间的数字值");
+    row.alertQuantity = 0;
+    checkFlag.value = false;
+    return;
+  }
+  checkFlag.value = true;
+}
+
+function switchTabs() {
+  handleReset();
+}
+
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.categoryPath = category.value?.length ? category.value.join(",") : null;
+  getDataList();
+}
+
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+  };
+  category.value = [];
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  if (activeTab.value === "warnList") {
+    getGoodsListDataByStockSeller(searchForm.value).then((res) => {
+      if (res.success) {
+        warnData.value = res.result.records;
+        total.value = res.result.total;
+      }
+      loading.value = false;
+    });
+  } else {
+    getGoodsSkuListDataSeller(searchForm.value).then((res) => {
+      if (res.success) {
+        skuAllData.value = res.result.records;
+        total.value = res.result.total;
+      }
+      loading.value = false;
+    });
+  }
+}
+
+function deepGroup() {
+  getGoodsCategoryAll().then((res) => {
+    if (res.success) {
+      categoryList.value = res.result.map((item) => ({
+        value: item.id,
+        label: item.name,
+        children: (item.children || []).map((child) => ({
+          value: child.id,
+          label: child.name,
+          children: (child.children || []).map((grandson) => ({
+            value: grandson.id,
+            label: grandson.name,
+          })),
+        })),
       }));
-      updateGoodsSkuStocks(updateStockList).then((res) => {
-        if (res.success) {
-          this.updateStockModalVisible = false;
-          this.$Message.success("更新库存成功");
-          this.getDataList();
-        }
-      });
-    },
-    updateWarnStock(row) {
-      if (this.checkFlag) {
-        updateGoodsAlertStocks({ skuId: row.id, alertQuantity: row.alertQuantity }).then((res) => {
-          if (res.success) {
-            this.$Message.success("更新成功");
-          }
-        });
-      }
-    },
-    checkVal(row) {
-      if (
-        !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row.alertQuantity) ||
-        parseInt(row.alertQuantity) < 0 ||
-        parseInt(row.alertQuantity) > 99999999
-      ) {
-        this.$Message.error("请输入0~99999999之间的数字值");
-        row.alertQuantity = 0;
-        this.checkFlag = false;
-        return;
-      }
-      this.checkFlag = true;
-    },
-    switchTabs() {
-      this.handleReset();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.categoryPath = this.category?.length ? this.category.join(",") : null;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-      };
-      this.category = [];
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.activeTab === "warnList") {
-        getGoodsListDataByStockSeller(this.searchForm).then((res) => {
-          if (res.success) {
-            this.warnData = res.result.records;
-            this.total = res.result.total;
-          }
-          this.loading = false;
-        });
-      } else {
-        getGoodsSkuListDataSeller(this.searchForm).then((res) => {
-          if (res.success) {
-            this.skuAllData = res.result.records;
-            this.total = res.result.total;
-          }
-          this.loading = false;
-        });
-      }
-    },
-    deepGroup() {
-      getGoodsCategoryAll().then((res) => {
-        if (res.success) {
-          this.categoryList = res.result.map((item) => ({
-            value: item.id,
-            label: item.name,
-            children: (item.children || []).map((child) => ({
-              value: child.id,
-              label: child.name,
-              children: (child.children || []).map((grandson) => ({
-                value: grandson.id,
-                label: grandson.name,
-              })),
-            })),
-          }));
-        }
-      });
-    },
-  },
-};
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/goods/goods-seller/components/AppointmentPublishPanel.vue b/seller/src/views/goods/goods-seller/components/AppointmentPublishPanel.vue
index f35d3d7a8..93ee38db3 100644
--- a/seller/src/views/goods/goods-seller/components/AppointmentPublishPanel.vue
+++ b/seller/src/views/goods/goods-seller/components/AppointmentPublishPanel.vue
@@ -292,8 +292,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { getRequest } from "@/libs/axios";
+import { Message } from "@/utils/message";
 import {
   SERVICE_MODE,
   BOOKABLE_DATE_MODE,
@@ -307,6 +310,35 @@ import {
   slotKey,
 } from "@/constants/appointment";
 
+defineOptions({ name: "AppointmentPublishPanel" });
+
+const props = defineProps({
+  settings: { type: Object, default: () => defaultAppointmentSettings() },
+  division: { type: Object, default: () => defaultSlotDivision() },
+  skuCapacities: { type: Object, default: () => ({}) },
+  skuInfo: { type: Array, default: () => [] },
+  divisionTarget: {
+    type: String,
+    default: "",
+  },
+});
+const emit = defineEmits(["update:settings", "update:division", "update:skuCapacities"]);
+
+const router = useRouter();
+
+const localSettings = ref(defaultAppointmentSettings());
+const localDivision = ref(defaultSlotDivision());
+const enabledSlotKeys = ref([]);
+const systemFormOptions = ref([]);
+const capacityDialogVisible = ref(false);
+const capacityDraft = ref({});
+const activeSkuRowKey = ref("");
+const syncing = ref(false);
+const divisionReady = ref(false);
+
+// 历史遗留：原代码读取未声明的 this.part，恒为 undefined，行为原样保留
+const part = undefined;
+
 function parseMinutes(timeStr) {
   if (!timeStr) return 0;
   const [h, m] = timeStr.split(":").map(Number);
@@ -319,402 +351,391 @@ function formatMinutes(total) {
   return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
 }
 
-export default {
-  name: "AppointmentPublishPanel",
-  props: {
-    settings: { type: Object, default: () => defaultAppointmentSettings() },
-    division: { type: Object, default: () => defaultSlotDivision() },
-    skuCapacities: { type: Object, default: () => ({}) },
-    skuInfo: { type: Array, default: () => [] },
-    divisionTarget: {
-      type: String,
-      default: "",
-    },
+const bookableDateHint = computed(() => {
+  return "设置预约服务的可预约日期。例如：周六、周天不选中，则在可预约日期中的周一到周五可用。";
+});
+const customDateRange = computed({
+  get() {
+    const { bookableCustomStartDate, bookableCustomEndDate } = localSettings.value;
+    if (bookableCustomStartDate && bookableCustomEndDate) {
+      return [bookableCustomStartDate, bookableCustomEndDate];
+    }
+    return null;
   },
-  emits: ["update:settings", "update:division", "update:skuCapacities"],
-  data() {
-    return {
-      SERVICE_MODE,
-      BOOKABLE_DATE_MODE,
-      ADVANCE_MODE,
-      CANCEL_MODE,
-      FORM_SUBMIT_MODE,
-      SLOT_DIVISION_MODE,
-      WEEKDAY_OPTIONS,
-      localSettings: defaultAppointmentSettings(),
-      localDivision: defaultSlotDivision(),
-      enabledSlotKeys: [],
-      systemFormOptions: [],
-      capacityDialogVisible: false,
-      capacityDraft: {},
-      activeSkuRowKey: "",
-      syncing: false,
-      divisionReady: false,
+  set(val) {
+    if (val && val.length === 2) {
+      localSettings.value.bookableCustomStartDate = val[0];
+      localSettings.value.bookableCustomEndDate = val[1];
+    } else {
+      localSettings.value.bookableCustomStartDate = "";
+      localSettings.value.bookableCustomEndDate = "";
+    }
+  },
+});
+const autoTimeRange = computed({
+  get() {
+    if (localDivision.value.autoStartTime && localDivision.value.autoEndTime) {
+      return [localDivision.value.autoStartTime, localDivision.value.autoEndTime];
+    }
+    return null;
+  },
+  set(val) {
+    if (val && val.length === 2) {
+      localDivision.value.autoStartTime = val[0];
+      localDivision.value.autoEndTime = val[1];
+    }
+  },
+});
+const activeCapacityRows = computed(() => {
+  return localDivision.value.confirmedSlots
+    .filter((slot) => isSlotEnabled(slot))
+    .map((slot) => ({
+      key: slotKey(slot),
+      label: `${slot.startTime}-${slot.endTime}`,
+    }));
+});
+const allSlotsChecked = computed(() => {
+  const enabled = localDivision.value.confirmedSlots.filter((s) => isSlotEnabled(s));
+  return enabled.length > 0 && enabled.length === enabledSlotKeys.value.length;
+});
+const slotIndeterminate = computed(() => {
+  const enabled = localDivision.value.confirmedSlots.filter((s) => isSlotEnabled(s));
+  return enabledSlotKeys.value.length > 0 && enabledSlotKeys.value.length < enabled.length;
+});
+
+watch(
+  () => props.settings,
+  (val) => {
+    if (syncing.value) return;
+    localSettings.value = { ...defaultAppointmentSettings(), ...(val || {}) };
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  () => props.division,
+  (val) => {
+    if (syncing.value) return;
+    localDivision.value = { ...defaultSlotDivision(), ...(val || {}) };
+    enabledSlotKeys.value = (localDivision.value.confirmedSlots || [])
+      .filter((s) => s.slotEnabled !== false)
+      .map((s) => slotKey(s));
+  },
+  { immediate: true, deep: true }
+);
+watch(
+  localSettings,
+  (val) => {
+    syncing.value = true;
+    emit("update:settings", { ...val });
+    nextTick(() => {
+      syncing.value = false;
+    });
+  },
+  { deep: true }
+);
+watch(
+  localDivision,
+  (val) => {
+    syncing.value = true;
+    emit("update:division", { ...val });
+    nextTick(() => {
+      syncing.value = false;
+    });
+  },
+  { deep: true }
+);
+watch(enabledSlotKeys, (val) => {
+  localDivision.value.confirmedSlots = (localDivision.value.confirmedSlots || []).map((slot) => ({
+    ...slot,
+    slotEnabled: val.includes(slotKey(slot)),
+  }));
+});
+watch(
+  () => props.divisionTarget,
+  () => {
+    prepareDivisionTarget();
+  },
+  { immediate: true }
+);
+
+function prepareDivisionTarget() {
+  divisionReady.value = false;
+  if (!props.divisionTarget) {
+    return;
+  }
+  nextTick(() => {
+    divisionReady.value = !!document.querySelector(props.divisionTarget);
+  });
+}
+function isSlotEnabled(slot) {
+  return slot.slotEnabled !== false;
+}
+function toggleAllSlots(checked) {
+  if (checked) {
+    enabledSlotKeys.value = localDivision.value.confirmedSlots.map((s) => slotKey(s));
+  } else {
+    enabledSlotKeys.value = [];
+  }
+}
+function loadSystemForms() {
+  getRequest("/appointment/system-forms/enabled")
+    .then((res) => {
+      if (res.success) {
+        systemFormOptions.value = res.result || [];
+      }
+    })
+    .catch(() => {});
+}
+function goAddSystemForm() {
+  // 主布局无 keep-alive，新开页避免发品表单被销毁
+  const route = router.resolve({ name: "appointment-system-form-designer" });
+  window.open(route.href, "_blank");
+}
+function addCustomDraft() {
+  const last = localDivision.value.customDrafts[localDivision.value.customDrafts.length - 1];
+  const start = last?.endTime || "08:00";
+  const endMinutes = parseMinutes(start) + 60;
+  const end = endMinutes >= 24 * 60 ? "23:59" : formatMinutes(endMinutes);
+  localDivision.value.customDrafts.push({ startTime: start, endTime: end });
+}
+function removeCustomDraft(index) {
+  localDivision.value.customDrafts.splice(index, 1);
+}
+function confirmSlots() {
+  let slots = [];
+  if (localDivision.value.slotDivisionMode === SLOT_DIVISION_MODE.AUTO) {
+    const duration = Number(localDivision.value.serviceDurationMinutes);
+    if (!duration || duration < 15) {
+      Message.error("请填写有效的服务时长（15-480 分钟）");
+      return false;
+    }
+    const start = parseMinutes(localDivision.value.autoStartTime);
+    const end = parseMinutes(localDivision.value.autoEndTime);
+    if (!localDivision.value.autoStartTime || !localDivision.value.autoEndTime || end <= start) {
+      Message.error("请选择有效的起止时间（同一天内，结束大于开始）");
+      return false;
+    }
+    for (let t = start; t + duration <= end; t += duration) {
+      slots.push({
+        startTime: formatMinutes(t),
+        endTime: formatMinutes(t + duration),
+        slotEnabled: true,
+      });
+    }
+    if (!slots.length) {
+      Message.error("未生成有效时段，请检查起止时间与服务时长");
+      return false;
+    }
+  } else {
+    const drafts = localDivision.value.customDrafts || [];
+    if (!drafts.length) {
+      Message.error("请至少添加一条自定义时段");
+      return false;
+    }
+    let prevEnd = -1;
+    for (const row of drafts) {
+      if (!row.startTime || !row.endTime) {
+        Message.error("请完整填写每条时段的开始和结束时间");
+        return false;
+      }
+      const s = parseMinutes(row.startTime);
+      const e = parseMinutes(row.endTime);
+      if (e <= s) {
+        Message.error("结束时间须大于开始时间，且不支持跨天");
+        return false;
+      }
+      if (s < prevEnd) {
+        Message.error("自定义时段不得重叠，须按时间顺序添加");
+        return false;
+      }
+      prevEnd = e;
+      slots.push({ startTime: row.startTime, endTime: row.endTime, slotEnabled: true });
+    }
+  }
+  localDivision.value.confirmedSlots = slots;
+  enabledSlotKeys.value = slots.map((s) => slotKey(s));
+  Message.success(`已确认 ${slots.length} 个时段`);
+  return true;
+}
+function openSkuCapacityDialog(skuRow) {
+  activeSkuRowKey.value = getSkuRowKey(skuRow);
+  const draft = {};
+  activeCapacityRows.value.forEach((row) => {
+    draft[row.key] = props.skuCapacities?.[activeSkuRowKey.value]?.[row.key] ?? 0;
+  });
+  capacityDraft.value = draft;
+  capacityDialogVisible.value = true;
+}
+function saveSkuCapacities() {
+  const next = { ...(props.skuCapacities || {}) };
+  next[activeSkuRowKey.value] = { ...capacityDraft.value };
+  emit("update:skuCapacities", next);
+  capacityDialogVisible.value = false;
+}
+function validateRules() {
+  const s = localSettings.value;
+  if (!s.serviceModes?.length) {
+    Message.error("预约规则：请至少选择一种服务模式");
+    return false;
+  }
+  if (s.bookableDateMode === BOOKABLE_DATE_MODE.CUSTOM) {
+    if (!s.bookableCustomStartDate || !s.bookableCustomEndDate) {
+      Message.error("预约规则：请选择自定义可预约日期范围");
+      return false;
+    }
+    if (!s.bookableWeekdays?.length) {
+      Message.error("预约规则：请至少勾选一天可约星期");
+      return false;
+    }
+  }
+  if (!s.bookableDays || s.bookableDays < 1) {
+    Message.error("预约规则：预约日期范围须为正整数");
+    return false;
+  }
+  if (s.advanceMode === ADVANCE_MODE.REQUIRE_HOURS && (!s.advanceHours || s.advanceHours < 1)) {
+    Message.error("预约规则：请填写提前预约小时数");
+    return false;
+  }
+  if (
+    s.cancelMode === CANCEL_MODE.ALLOW_BEFORE_HOURS &&
+    (!s.cancelAheadHours || s.cancelAheadHours < 1)
+  ) {
+    Message.error("预约规则：请填写取消政策小时数");
+    return false;
+  }
+  return true;
+}
+function validateDivision() {
+  const enabledSlots = (localDivision.value.confirmedSlots || []).filter((slot) =>
+    isSlotEnabled(slot)
+  );
+  if (!enabledSlots.length) {
+    Message.error("时段划分：请确认时间段并至少启用 1 个时段");
+    return false;
+  }
+  return true;
+}
+function validate() {
+  if (part === "rules") {
+    return validateRules();
+  }
+  if (part === "division") {
+    return validateDivision();
+  }
+  return validateRules() && validateDivision();
+}
+function buildSettingsPayload() {
+  return {
+    appointmentSettings: { ...localSettings.value },
+  };
+}
+function buildDivisionPayload() {
+  const enabledSlots = (localDivision.value.confirmedSlots || []).filter((slot) =>
+    isSlotEnabled(slot)
+  );
+  return {
+    appointmentSlotTemplate: {
+      slotDivisionMode: localDivision.value.slotDivisionMode,
+      serviceDurationMinutes: localDivision.value.serviceDurationMinutes,
+      autoStartTime: localDivision.value.autoStartTime,
+      autoEndTime: localDivision.value.autoEndTime,
+      slots: enabledSlots.map((slot) => ({
+        startTime: slot.startTime,
+        endTime: slot.endTime,
+        slotEnabled: true,
+      })),
+    },
+  };
+}
+function buildSubmitPayload() {
+  return {
+    ...buildSettingsPayload(),
+    ...buildDivisionPayload(),
+  };
+}
+function buildSkuSlotCapacities(skuRow) {
+  const rowKey = getSkuRowKey(skuRow);
+  const map = props.skuCapacities?.[rowKey] || {};
+  return (localDivision.value.confirmedSlots || [])
+    .filter((slot) => isSlotEnabled(slot))
+    .map((slot) => ({
+      startTime: slot.startTime,
+      endTime: slot.endTime,
+      slotCapacity: map[slotKey(slot)] ?? 0,
+    }));
+}
+function getSkuRowKey(row) {
+  return props.skuInfo
+    .map((info) => row[info.name])
+    .filter(Boolean)
+    .join("::");
+}
+function hydrateFromGoods(result) {
+  if (result.appointmentSettings) {
+    localSettings.value = { ...defaultAppointmentSettings(), ...result.appointmentSettings };
+  }
+  if (result.appointmentSlotTemplate) {
+    const tpl = result.appointmentSlotTemplate;
+    localDivision.value = {
+      ...defaultSlotDivision(),
+      slotDivisionMode: tpl.slotDivisionMode || SLOT_DIVISION_MODE.AUTO,
+      serviceDurationMinutes: tpl.serviceDurationMinutes || 60,
+      autoStartTime: tpl.autoStartTime || "08:00",
+      autoEndTime: tpl.autoEndTime || "18:00",
+      confirmedSlots: tpl.slots || [],
+      customDrafts: tpl.slots?.length
+        ? tpl.slots.map((s) => ({ startTime: s.startTime, endTime: s.endTime }))
+        : defaultSlotDivision().customDrafts,
     };
-  },
-  computed: {
-    bookableDateHint() {
-      return "设置预约服务的可预约日期。例如：周六、周天不选中，则在可预约日期中的周一到周五可用。";
-    },
-    customDateRange: {
-      get() {
-        const { bookableCustomStartDate, bookableCustomEndDate } = this.localSettings;
-        if (bookableCustomStartDate && bookableCustomEndDate) {
-          return [bookableCustomStartDate, bookableCustomEndDate];
-        }
-        return null;
-      },
-      set(val) {
-        if (val && val.length === 2) {
-          this.localSettings.bookableCustomStartDate = val[0];
-          this.localSettings.bookableCustomEndDate = val[1];
-        } else {
-          this.localSettings.bookableCustomStartDate = "";
-          this.localSettings.bookableCustomEndDate = "";
-        }
-      },
-    },
-    autoTimeRange: {
-      get() {
-        if (this.localDivision.autoStartTime && this.localDivision.autoEndTime) {
-          return [this.localDivision.autoStartTime, this.localDivision.autoEndTime];
-        }
-        return null;
-      },
-      set(val) {
-        if (val && val.length === 2) {
-          this.localDivision.autoStartTime = val[0];
-          this.localDivision.autoEndTime = val[1];
-        }
-      },
-    },
-    activeCapacityRows() {
-      return this.localDivision.confirmedSlots
-        .filter((slot) => this.isSlotEnabled(slot))
-        .map((slot) => ({
-          key: slotKey(slot),
-          label: `${slot.startTime}-${slot.endTime}`,
-        }));
-    },
-    allSlotsChecked() {
-      const enabled = this.localDivision.confirmedSlots.filter((s) => this.isSlotEnabled(s));
-      return enabled.length > 0 && enabled.length === this.enabledSlotKeys.length;
-    },
-    slotIndeterminate() {
-      const enabled = this.localDivision.confirmedSlots.filter((s) => this.isSlotEnabled(s));
-      return this.enabledSlotKeys.length > 0 && this.enabledSlotKeys.length < enabled.length;
-    },
-  },
-  watch: {
-    settings: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (this.syncing) return;
-        this.localSettings = { ...defaultAppointmentSettings(), ...(val || {}) };
-      },
-    },
-    division: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if (this.syncing) return;
-        this.localDivision = { ...defaultSlotDivision(), ...(val || {}) };
-        this.enabledSlotKeys = (this.localDivision.confirmedSlots || [])
-          .filter((s) => s.slotEnabled !== false)
-          .map((s) => slotKey(s));
-      },
-    },
-    localSettings: {
-      deep: true,
-      handler(val) {
-        this.syncing = true;
-        this.$emit("update:settings", { ...val });
-        this.$nextTick(() => {
-          this.syncing = false;
-        });
-      },
-    },
-    localDivision: {
-      deep: true,
-      handler(val) {
-        this.syncing = true;
-        this.$emit("update:division", { ...val });
-        this.$nextTick(() => {
-          this.syncing = false;
-        });
-      },
-    },
-    enabledSlotKeys(val) {
-      this.localDivision.confirmedSlots = (this.localDivision.confirmedSlots || []).map((slot) => ({
-        ...slot,
-        slotEnabled: val.includes(slotKey(slot)),
-      }));
-    },
-    divisionTarget: {
-      immediate: true,
-      handler() {
-        this.prepareDivisionTarget();
-      },
-    },
-  },
-  mounted() {
-    this.loadSystemForms();
-    this.prepareDivisionTarget();
-  },
-  methods: {
-    prepareDivisionTarget() {
-      this.divisionReady = false;
-      if (!this.divisionTarget) {
-        return;
-      }
-      this.$nextTick(() => {
-        this.divisionReady = !!document.querySelector(this.divisionTarget);
+    enabledSlotKeys.value = (tpl.slots || [])
+      .filter((s) => s.slotEnabled !== false)
+      .map((s) => slotKey(s));
+  }
+  if (result.skuList?.length) {
+    const cap = {};
+    result.skuList.forEach((sku) => {
+      const specKey = (sku.specList || []).map((s) => s.specValue).filter(Boolean).join("::");
+      const keys = [specKey, sku.id, sku.sn].filter(Boolean);
+      const slotMap = {};
+      (sku.slotCapacities || []).forEach((item) => {
+        slotMap[slotKey(item)] = item.slotCapacity ?? 0;
       });
-    },
-    slotKey,
-    isSlotEnabled(slot) {
-      return slot.slotEnabled !== false;
-    },
-    toggleAllSlots(checked) {
-      if (checked) {
-        this.enabledSlotKeys = this.localDivision.confirmedSlots.map((s) => slotKey(s));
-      } else {
-        this.enabledSlotKeys = [];
-      }
-    },
-    loadSystemForms() {
-      getRequest("/appointment/system-forms/enabled")
-        .then((res) => {
-          if (res.success) {
-            this.systemFormOptions = res.result || [];
-          }
-        })
-        .catch(() => {});
-    },
-    goAddSystemForm() {
-      // 主布局无 keep-alive，新开页避免发品表单被销毁
-      const route = this.$router.resolve({ name: "appointment-system-form-designer" });
-      window.open(route.href, "_blank");
-    },
-    addCustomDraft() {
-      const last = this.localDivision.customDrafts[this.localDivision.customDrafts.length - 1];
-      const start = last?.endTime || "08:00";
-      const endMinutes = parseMinutes(start) + 60;
-      const end = endMinutes >= 24 * 60 ? "23:59" : formatMinutes(endMinutes);
-      this.localDivision.customDrafts.push({ startTime: start, endTime: end });
-    },
-    removeCustomDraft(index) {
-      this.localDivision.customDrafts.splice(index, 1);
-    },
-    confirmSlots() {
-      let slots = [];
-      if (this.localDivision.slotDivisionMode === SLOT_DIVISION_MODE.AUTO) {
-        const duration = Number(this.localDivision.serviceDurationMinutes);
-        if (!duration || duration < 15) {
-          this.$Message.error("请填写有效的服务时长（15-480 分钟）");
-          return false;
-        }
-        const start = parseMinutes(this.localDivision.autoStartTime);
-        const end = parseMinutes(this.localDivision.autoEndTime);
-        if (!this.localDivision.autoStartTime || !this.localDivision.autoEndTime || end <= start) {
-          this.$Message.error("请选择有效的起止时间（同一天内，结束大于开始）");
-          return false;
-        }
-        for (let t = start; t + duration <= end; t += duration) {
-          slots.push({
-            startTime: formatMinutes(t),
-            endTime: formatMinutes(t + duration),
-            slotEnabled: true,
-          });
-        }
-        if (!slots.length) {
-          this.$Message.error("未生成有效时段，请检查起止时间与服务时长");
-          return false;
-        }
-      } else {
-        const drafts = this.localDivision.customDrafts || [];
-        if (!drafts.length) {
-          this.$Message.error("请至少添加一条自定义时段");
-          return false;
-        }
-        let prevEnd = -1;
-        for (const row of drafts) {
-          if (!row.startTime || !row.endTime) {
-            this.$Message.error("请完整填写每条时段的开始和结束时间");
-            return false;
-          }
-          const s = parseMinutes(row.startTime);
-          const e = parseMinutes(row.endTime);
-          if (e <= s) {
-            this.$Message.error("结束时间须大于开始时间，且不支持跨天");
-            return false;
-          }
-          if (s < prevEnd) {
-            this.$Message.error("自定义时段不得重叠，须按时间顺序添加");
-            return false;
-          }
-          prevEnd = e;
-          slots.push({ startTime: row.startTime, endTime: row.endTime, slotEnabled: true });
-        }
-      }
-      this.localDivision.confirmedSlots = slots;
-      this.enabledSlotKeys = slots.map((s) => slotKey(s));
-      this.$Message.success(`已确认 ${slots.length} 个时段`);
-      return true;
-    },
-    openSkuCapacityDialog(skuRow) {
-      this.activeSkuRowKey = this.getSkuRowKey(skuRow);
-      const draft = {};
-      this.activeCapacityRows.forEach((row) => {
-        draft[row.key] = this.skuCapacities?.[this.activeSkuRowKey]?.[row.key] ?? 0;
+      keys.forEach((key) => {
+        cap[key] = { ...slotMap };
       });
-      this.capacityDraft = draft;
-      this.capacityDialogVisible = true;
-    },
-    saveSkuCapacities() {
-      const next = { ...(this.skuCapacities || {}) };
-      next[this.activeSkuRowKey] = { ...this.capacityDraft };
-      this.$emit("update:skuCapacities", next);
-      this.capacityDialogVisible = false;
-    },
-    validateRules() {
-      const s = this.localSettings;
-      if (!s.serviceModes?.length) {
-        this.$Message.error("预约规则：请至少选择一种服务模式");
-        return false;
-      }
-      if (s.bookableDateMode === BOOKABLE_DATE_MODE.CUSTOM) {
-        if (!s.bookableCustomStartDate || !s.bookableCustomEndDate) {
-          this.$Message.error("预约规则：请选择自定义可预约日期范围");
-          return false;
-        }
-        if (!s.bookableWeekdays?.length) {
-          this.$Message.error("预约规则：请至少勾选一天可约星期");
-          return false;
-        }
-      }
-      if (!s.bookableDays || s.bookableDays < 1) {
-        this.$Message.error("预约规则：预约日期范围须为正整数");
-        return false;
-      }
-      if (s.advanceMode === ADVANCE_MODE.REQUIRE_HOURS && (!s.advanceHours || s.advanceHours < 1)) {
-        this.$Message.error("预约规则：请填写提前预约小时数");
-        return false;
-      }
-      if (
-        s.cancelMode === CANCEL_MODE.ALLOW_BEFORE_HOURS &&
-        (!s.cancelAheadHours || s.cancelAheadHours < 1)
-      ) {
-        this.$Message.error("预约规则：请填写取消政策小时数");
-        return false;
-      }
-      return true;
-    },
-    validateDivision() {
-      const enabledSlots = (this.localDivision.confirmedSlots || []).filter((slot) =>
-        this.isSlotEnabled(slot)
-      );
-      if (!enabledSlots.length) {
-        this.$Message.error("时段划分：请确认时间段并至少启用 1 个时段");
-        return false;
-      }
-      return true;
-    },
-    validate() {
-      if (this.part === "rules") {
-        return this.validateRules();
-      }
-      if (this.part === "division") {
-        return this.validateDivision();
-      }
-      return this.validateRules() && this.validateDivision();
-    },
-    buildSettingsPayload() {
-      return {
-        appointmentSettings: { ...this.localSettings },
-      };
-    },
-    buildDivisionPayload() {
-      const enabledSlots = (this.localDivision.confirmedSlots || []).filter((slot) =>
-        this.isSlotEnabled(slot)
-      );
-      return {
-        appointmentSlotTemplate: {
-          slotDivisionMode: this.localDivision.slotDivisionMode,
-          serviceDurationMinutes: this.localDivision.serviceDurationMinutes,
-          autoStartTime: this.localDivision.autoStartTime,
-          autoEndTime: this.localDivision.autoEndTime,
-          slots: enabledSlots.map((slot) => ({
-            startTime: slot.startTime,
-            endTime: slot.endTime,
-            slotEnabled: true,
-          })),
-        },
-      };
-    },
-    buildSubmitPayload() {
-      return {
-        ...this.buildSettingsPayload(),
-        ...this.buildDivisionPayload(),
-      };
-    },
-    buildSkuSlotCapacities(skuRow) {
-      const rowKey = this.getSkuRowKey(skuRow);
-      const map = this.skuCapacities?.[rowKey] || {};
-      return (this.localDivision.confirmedSlots || [])
-        .filter((slot) => this.isSlotEnabled(slot))
-        .map((slot) => ({
-          startTime: slot.startTime,
-          endTime: slot.endTime,
-          slotCapacity: map[slotKey(slot)] ?? 0,
-        }));
-    },
-    getSkuRowKey(row) {
-      return this.skuInfo
-        .map((info) => row[info.name])
-        .filter(Boolean)
-        .join("::");
-    },
-    hydrateFromGoods(result) {
-      if (result.appointmentSettings) {
-        this.localSettings = { ...defaultAppointmentSettings(), ...result.appointmentSettings };
-      }
-      if (result.appointmentSlotTemplate) {
-        const tpl = result.appointmentSlotTemplate;
-        this.localDivision = {
-          ...defaultSlotDivision(),
-          slotDivisionMode: tpl.slotDivisionMode || SLOT_DIVISION_MODE.AUTO,
-          serviceDurationMinutes: tpl.serviceDurationMinutes || 60,
-          autoStartTime: tpl.autoStartTime || "08:00",
-          autoEndTime: tpl.autoEndTime || "18:00",
-          confirmedSlots: tpl.slots || [],
-          customDrafts: tpl.slots?.length
-            ? tpl.slots.map((s) => ({ startTime: s.startTime, endTime: s.endTime }))
-            : defaultSlotDivision().customDrafts,
-        };
-        this.enabledSlotKeys = (tpl.slots || [])
-          .filter((s) => s.slotEnabled !== false)
-          .map((s) => slotKey(s));
-      }
-      if (result.skuList?.length) {
-        const cap = {};
-        result.skuList.forEach((sku) => {
-          const specKey = (sku.specList || []).map((s) => s.specValue).filter(Boolean).join("::");
-          const keys = [specKey, sku.id, sku.sn].filter(Boolean);
-          const slotMap = {};
-          (sku.slotCapacities || []).forEach((item) => {
-            slotMap[slotKey(item)] = item.slotCapacity ?? 0;
-          });
-          keys.forEach((key) => {
-            cap[key] = { ...slotMap };
-          });
-        });
-        this.$emit("update:skuCapacities", cap);
-      }
-    },
-  },
-};
+    });
+    emit("update:skuCapacities", cap);
+  }
+}
+
+onMounted(() => {
+  loadSystemForms();
+  prepareDivisionTarget();
+});
+
+// 父组件 goodsOperationSec.vue 通过 ref 调用以下方法，保持公开接口不变
+defineExpose({
+  prepareDivisionTarget,
+  slotKey,
+  isSlotEnabled,
+  toggleAllSlots,
+  loadSystemForms,
+  goAddSystemForm,
+  addCustomDraft,
+  removeCustomDraft,
+  confirmSlots,
+  openSkuCapacityDialog,
+  saveSkuCapacities,
+  validateRules,
+  validateDivision,
+  validate,
+  buildSettingsPayload,
+  buildDivisionPayload,
+  buildSubmitPayload,
+  buildSkuSlotCapacities,
+  getSkuRowKey,
+  hydrateFromGoods,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/goods/goods-seller/draftGoods.vue b/seller/src/views/goods/goods-seller/draftGoods.vue
index bcb6a34a9..e15ce3f0c 100644
--- a/seller/src/views/goods/goods-seller/draftGoods.vue
+++ b/seller/src/views/goods/goods-seller/draftGoods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -23,7 +23,7 @@
     </el-card>
 
     <el-card>
-      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
+      <el-table v-loading="loading" border :data="data" ref="tableRef" class="mt_10" style="width: 100%">
         <el-table-column prop="id" label="编号" min-width="120" />
         <el-table-column label="商品原图" width="120" align="center">
           <template #default="{ row }">
@@ -66,88 +66,94 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getDraftGoodsListData, deleteDraftGoods } from "@/api/goods";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "goods",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "create_time",
-        order: "desc",
-        saveType: "TEMPLATE",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    editGoods(v) {
-      this.$router.push({
-        name: "goods-template-operation-edit",
-        query: { draftId: v.id },
-      });
-    },
-    removeDraft(id) {
-      this.$Modal.confirm({
-        title: "确认审核",
-        content: "您确认要删除id为 " + id + " 的模版吗?",
-        loading: true,
-        onOk: () => {
-          deleteDraftGoods(id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.getDataList();
-    },
-    handleReset() {
-      this.$refs.searchForm.resetFields();
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getDraftGoodsListData(this.searchForm).then((res) => {
-        this.loading = false;
+defineOptions({ name: "goods" });
+
+const route = useRoute();
+const router = useRouter();
+
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "create_time",
+  order: "desc",
+  saveType: "TEMPLATE",
+});
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getDataList();
+}
+function editGoods(v) {
+  router.push({
+    name: "goods-template-operation-edit",
+    query: { draftId: v.id },
+  });
+}
+function removeDraft(id) {
+  Modal.confirm({
+    title: "确认审核",
+    content: "您确认要删除id为 " + id + " 的模版吗?",
+    loading: true,
+    onOk: () => {
+      deleteDraftGoods(id).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          Message.success("删除成功");
+          getDataList();
         }
       });
     },
-  },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    $route() {
-      this.init();
-    },
-  },
-};
+  });
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 10;
+  getDataList();
+}
+function handleReset() {
+  searchFormRef.value.resetFields();
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 10;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getDraftGoodsListData(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
+
+watch(
+  () => route.query,
+  () => {
+    init();
+  }
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/goods/goods-seller/goods.vue b/seller/src/views/goods/goods-seller/goods.vue
index 422135b4d..a9fbbad17 100644
--- a/seller/src/views/goods/goods-seller/goods.vue
+++ b/seller/src/views/goods/goods-seller/goods.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -164,7 +164,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         :data="data"
         class="mt_10"
@@ -257,7 +257,7 @@
     </el-card>
 
     <el-dialog v-model="modalVisible" title="下架操作" width="500px" :close-on-click-modal="false">
-      <el-form ref="underForm" :model="underForm" label-width="100px">
+      <el-form ref="underFormRef" :model="underForm" label-width="100px">
         <el-form-item label="下架原因" prop="reason">
           <el-input v-model="underForm.reason" clearable />
         </el-form-item>
@@ -270,7 +270,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getCategoryTree,
   getGoodsListData,
@@ -280,411 +282,415 @@ import {
   upGoods,
   lowGoods,
 } from "@/api/goods";
-export default {
-  name: "goods",
-  data() {
-    return {
-      id: "", //要操作的id
-      loading: true, // 表单加载状态
-      modalVisible: false, // 添加或编辑显示
-      createRange: [],
-      searchForm: {
-        // 搜索框初始化对象
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "create_time", // 默认排序字段
-        order: "desc", // 默认排序方式
-        storeCategoryPath: "",
-        categoryPath: "",
-        skuName: "",
-        skuSn: "",
-        stockStatus: "",
-        stockMin: "",
-        stockMax: "",
-        priceMin: "",
-        priceMax: "",
-      },
-      platformCategoryList: [],
-      shopCategoryList: [],
-      platformCategoryProps: {
-        value: "id",
-        label: "name",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      shopCategoryProps: {
-        value: "value",
-        label: "label",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      underForm: {
-        // 下架原因
-        reason: "",
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      currentStatus: "ALL",
-      goodsNumerData: {},
-      selectedRows: [], // 选中的行数据
-      selectAll: false, // 全选状态
-    };
-  },
-  computed: {
-    goodsStatusWithCount() {
-      return [
-        {title: '全部', value: 'ALL'},
-        {title: `出售中${this.goodsNumerData.upperGoodsNum ? '(' + this.goodsNumerData.upperGoodsNum + ')' : ''}`, value: 'UPPER'},
-        {title: `仓库中${this.goodsNumerData.downGoodsNum ? '(' + this.goodsNumerData.downGoodsNum + ')' : ''}`, value: 'DOWN'},
-        {title: `待审核${this.goodsNumerData.auditGoodsNum ? '(' + this.goodsNumerData.auditGoodsNum + ')' : ''}`, value: 'TOBEAUDITED'},
-        {title: `审核未通过${this.goodsNumerData.refuseGoodsNum ? '(' + this.goodsNumerData.refuseGoodsNum + ')' : ''}`, value: 'REFUSE'}
-      ];
-    }
-  },
-  methods: {
-    clearTableSelection() {
-      this.$refs.table?.clearSelection?.();
-    },
-    onStatusTabClick(tab) {
-      this.goodsStatusClick(tab.paneName);
-    },
-    goodsTypeText(v) {
-      if (v === "PHYSICAL_GOODS") return "实物商品";
-      if (v === "VIRTUAL_GOODS") return "虚拟商品";
-      if (v === "E_COUPON") return "电子卡券"; // 卡密商品
-      if (v === "APPOINTMENT_GOODS") return "预约商品";
-      return v || "—";
-    },
-    findTreeNodeLabel(tree, targetId, valueKey, labelKey) {
-      for (const node of tree || []) {
-        if (String(node[valueKey]) === String(targetId)) {
-          return node[labelKey];
-        }
-        const childLabel = this.findTreeNodeLabel(node.children, targetId, valueKey, labelKey);
-        if (childLabel) return childLabel;
-      }
-      return "";
-    },
-    platformCategoryText(path) {
-      if (!path) return "—";
-      const ids = String(path).split(",").filter(Boolean);
-      if (!ids.length) return "—";
-      const labels = ids
-        .map((id) => this.findTreeNodeLabel(this.platformCategoryList, id, "id", "name"))
-        .filter(Boolean);
-      return labels.length ? labels.join(" / ") : "—";
-    },
-    /** 跳转卡池管理；单 SKU 商品默认取第一个 SKU（card-key-pool 需 skuId） */
-    async goCardKeyPool(row) {
-      let skuId = row.skuId;
-      if (!skuId) {
-        try {
-          const res = await getQueryGoodsIdGoodsList(row.id);
-          if (res.success && res.result?.length) {
-            skuId = res.result[0].id;
-          } else {
-            this.$message.warning("该商品暂无 SKU，请先完善商品规格");
-            return;
-          }
-        } catch {
-          this.$message.error("获取商品规格失败");
-          return;
-        }
-      }
-      this.$router.push({
-        path: "/card-key-pool",
-        query: {
-          skuId,
-          goodsId: row.id,
-          goodsName: row.goodsName,
-        },
-      });
-    },
-    marketEnableText(v) {
-      if (v === "DOWN") return "下架";
-      if (v === "UPPER") return "上架";
-      return "";
-    },
-    authFlagText(v) {
-      if (v === "TOBEAUDITED") return "待审核";
-      if (v === "PASS") return "通过";
-      if (v === "REFUSE") return "拒绝";
-      return "";
-    },
-    // 初始化数据
-    init() {
-      this.loadFilterOptions();
-      this.getDataList();
-      this.getNumberData();
-    },
-    loadFilterOptions() {
-      getShopGoodsLabelListSeller()
-        .then((res) => {
-          if (res?.success) {
-            this.shopCategoryList = this.formatShopCategory(res.result || []);
-          }
-        })
-        .catch(() => {});
-      getCategoryTree()
-        .then((res) => {
-          if (res?.success) {
-            this.platformCategoryList = res.result || [];
-          }
-        })
-        .catch(() => {});
-    },
-    onStockStatusChange(value) {
-      if (value !== "IN_STOCK") {
-        this.searchForm.stockMin = "";
-        this.searchForm.stockMax = "";
-      }
-    },
-    buildSearchParams(includeGoodsStatus = true) {
-      const { stockStatus, stockMin, stockMax, priceMin, priceMax, ...rest } = this.searchForm;
-      const params = { ...rest };
+import { Message, Modal } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-      if (!includeGoodsStatus) {
-        delete params.goodsStatus;
-      }
+defineOptions({ name: "goods" });
 
-      if (this.createRange && this.createRange.length === 2) {
-        params.startDate = this.createRange[0];
-        params.endDate = this.createRange[1];
-      }
+const route = useRoute();
+const router = useRouter();
 
-      if (stockStatus === "IN_STOCK") {
-        params.geQuantity = stockMin !== "" && stockMin != null ? Number(stockMin) : 1;
-        if (stockMax !== "" && stockMax != null) {
-          params.leQuantity = Number(stockMax);
-        }
-      } else if (stockStatus === "OUT_OF_STOCK") {
-        params.geQuantity = 0;
-        params.leQuantity = 0;
-      } else {
-        if (stockMin !== "" && stockMin != null) params.geQuantity = Number(stockMin);
-        if (stockMax !== "" && stockMax != null) params.leQuantity = Number(stockMax);
-      }
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+const underFormRef = ref(null);
 
-      if (priceMin !== "" && priceMax !== "") {
-        params.price = `${priceMin}_${priceMax}`;
-      } else if (priceMin !== "") {
-        params.price = String(priceMin);
-      } else if (priceMax !== "") {
-        params.price = `0_${priceMax}`;
-      }
-
-      return params;
-    },
-    formatShopCategory(list) {
-      return (list || []).map((item) => ({
-        value: item.id,
-        label: item.labelName,
-        children:
-          item.children && item.children.length
-            ? this.formatShopCategory(item.children)
-            : undefined,
-      }));
-    },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    // 搜索
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getNumberData();
-    },
-    // 获取数据
-    getDataList() {
-      this.loading = true;
-      getGoodsListData(this.buildSearchParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getNumberData() {
-      getGoodsNumerData(this.buildSearchParams(false)).then((res) => {
-        if (res.success) {
-          this.goodsNumerData = res.result;
-        }
-      })
-    },
-    // 编辑
-    edit(v) {
-      this.id = v.id;
-      if (v.underMessage) {
-        this.underForm.reason = v.underMessage;
-      } else {
-        this.underForm.reason = "";
-      }
-      this.modalVisible = true;
-    },
-    // 下架
-    lower() {
-      let params = {
-        goodsId: this.id,
-        reason:this.underForm.reason
-      };
-      lowGoods(params).then((res) => {
-        this.$Modal.remove();
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.modalVisible = false;
-          this.getDataList();
-          this.getNumberData(); // 添加这行
-        }
-      });
-    },
-    // 上架
-    upper(v) {
-      this.$Modal.confirm({
-        title: "确认上架",
-        content: "您确认要上架 " + v.goodsName + " ?",
-        loading: true,
-        onOk: () => {
-           let params = {
-            goodsId: v.id
-          };
-          upGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("上架成功");
-              this.getDataList();
-              this.getNumberData(); // 添加这行
-            }
-          });
-        },
-      });
-    },
-
-    // 编辑商品
-    editGoods(v) {
-      this.$filters.customRouterPush({
-        name: "goods-operation-edit",
-        query: { id: v.id },
-      });
-    },
-
-    // 复制商品
-    copyGoods(v) {
-      this.$filters.customRouterPush({
-        name: "goods-operation",
-        query: { copyId: v.id },
-      });
-    },
-
-    // 商品状态筛选
-    goodsStatusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined || name === null) {
-        delete this.searchForm.goodsStatus;
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.goodsStatus = name;
-        this.currentStatus = name;
-      }
-      this.selectedRows = [];
-      this.clearTableSelection();
-      this.getDataList();
-    },
-
-    onSelectionChange(selection) {
-      this.selectedRows = selection;
-    },
-
-    // 批量上架
-    batchUpper() {
-      if (this.selectedRows.length === 0) {
-        this.$Message.warning('请先选择要上架的商品');
-        return;
-      }
-
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
-      this.$Modal.confirm({
-        title: '确认批量上架',
-        content: `您确认要上架以下商品吗？\n${goodsNames}`,
-        loading: true,
-        onOk: () => {
-          // 提取所有选中商品的ID
-          const goodsIds = this.selectedRows.map(item => item.id);
-          const params = {
-            goodsId: goodsIds // 传递ID数组
-          };
-
-          upGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success('批量上架成功');
-              this.selectedRows = [];
-              this.selectAll = false;
-              this.getDataList();
-              this.getNumberData();
-            }
-          }).catch(() => {
-            this.$Modal.remove();
-          });
-        }
-      });
-    },
-
-    // 批量下架
-    batchLower() {
-      if (this.selectedRows.length === 0) {
-        this.$Message.warning('请先选择要下架的商品');
-        return;
-      }
-
-      const goodsNames = this.selectedRows.map(item => item.goodsName).join('、');
-      this.$Modal.confirm({
-        title: '确认批量下架',
-        content: `您确认要下架以下商品吗？\n${goodsNames}`,
-        loading: true,
-        onOk: () => {
-          // 提取所有选中商品的ID
-          const goodsIds = this.selectedRows.map(item => item.id);
-          const params = {
-            goodsId: goodsIds, // 传递ID数组
-            reason: '批量下架操作' // 可以设置默认下架原因
-          };
-
-          lowGoods(params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success('批量下架成功');
-              this.selectedRows = [];
-              this.selectAll = false;
-              this.getDataList();
-              this.getNumberData();
-            }
-          }).catch(() => {
-            this.$Modal.remove();
-          });
-        }
-      });
-    },
-  },
-  mounted() {
-    const goodsStatus = this.$route.query.goodsStatus;
-    if (goodsStatus) {
-      this.currentStatus = goodsStatus;
-      this.searchForm.goodsStatus = goodsStatus;
-    }
-    this.init();
-  },
+const id = ref(""); //要操作的id
+const loading = ref(true); // 表单加载状态
+const modalVisible = ref(false); // 添加或编辑显示
+const createRange = ref([]);
+const searchForm = ref({
+  // 搜索框初始化对象
+  pageNumber: 1, // 当前页数
+  pageSize: 20, // 页面大小
+  sort: "create_time", // 默认排序字段
+  order: "desc", // 默认排序方式
+  storeCategoryPath: "",
+  categoryPath: "",
+  skuName: "",
+  skuSn: "",
+  stockStatus: "",
+  stockMin: "",
+  stockMax: "",
+  priceMin: "",
+  priceMax: "",
+});
+const platformCategoryList = ref([]);
+const shopCategoryList = ref([]);
+const platformCategoryProps = {
+  value: "id",
+  label: "name",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
 };
+const shopCategoryProps = {
+  value: "value",
+  label: "label",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
+};
+const underForm = ref({
+  // 下架原因
+  reason: "",
+});
+const submitLoading = ref(false); // 添加或编辑提交状态
+const data = ref([]); // 表单数据
+const total = ref(0); // 表单数据总数
+const currentStatus = ref("ALL");
+const goodsNumerData = ref({});
+const selectedRows = ref([]); // 选中的行数据
+const selectAll = ref(false); // 全选状态
+
+const goodsStatusWithCount = computed(() => {
+  return [
+    {title: '全部', value: 'ALL'},
+    {title: `出售中${goodsNumerData.value.upperGoodsNum ? '(' + goodsNumerData.value.upperGoodsNum + ')' : ''}`, value: 'UPPER'},
+    {title: `仓库中${goodsNumerData.value.downGoodsNum ? '(' + goodsNumerData.value.downGoodsNum + ')' : ''}`, value: 'DOWN'},
+    {title: `待审核${goodsNumerData.value.auditGoodsNum ? '(' + goodsNumerData.value.auditGoodsNum + ')' : ''}`, value: 'TOBEAUDITED'},
+    {title: `审核未通过${goodsNumerData.value.refuseGoodsNum ? '(' + goodsNumerData.value.refuseGoodsNum + ')' : ''}`, value: 'REFUSE'}
+  ];
+});
+
+function clearTableSelection() {
+  tableRef.value?.clearSelection?.();
+}
+function onStatusTabClick(tab) {
+  goodsStatusClick(tab.paneName);
+}
+function goodsTypeText(v) {
+  if (v === "PHYSICAL_GOODS") return "实物商品";
+  if (v === "VIRTUAL_GOODS") return "虚拟商品";
+  if (v === "E_COUPON") return "电子卡券"; // 卡密商品
+  if (v === "APPOINTMENT_GOODS") return "预约商品";
+  return v || "—";
+}
+function findTreeNodeLabel(tree, targetId, valueKey, labelKey) {
+  for (const node of tree || []) {
+    if (String(node[valueKey]) === String(targetId)) {
+      return node[labelKey];
+    }
+    const childLabel = findTreeNodeLabel(node.children, targetId, valueKey, labelKey);
+    if (childLabel) return childLabel;
+  }
+  return "";
+}
+function platformCategoryText(path) {
+  if (!path) return "—";
+  const ids = String(path).split(",").filter(Boolean);
+  if (!ids.length) return "—";
+  const labels = ids
+    .map((id) => findTreeNodeLabel(platformCategoryList.value, id, "id", "name"))
+    .filter(Boolean);
+  return labels.length ? labels.join(" / ") : "—";
+}
+/** 跳转卡池管理；单 SKU 商品默认取第一个 SKU（card-key-pool 需 skuId） */
+async function goCardKeyPool(row) {
+  let skuId = row.skuId;
+  if (!skuId) {
+    try {
+      const res = await getQueryGoodsIdGoodsList(row.id);
+      if (res.success && res.result?.length) {
+        skuId = res.result[0].id;
+      } else {
+        Message.warning("该商品暂无 SKU，请先完善商品规格");
+        return;
+      }
+    } catch {
+      Message.error("获取商品规格失败");
+      return;
+    }
+  }
+  router.push({
+    path: "/card-key-pool",
+    query: {
+      skuId,
+      goodsId: row.id,
+      goodsName: row.goodsName,
+    },
+  });
+}
+function marketEnableText(v) {
+  if (v === "DOWN") return "下架";
+  if (v === "UPPER") return "上架";
+  return "";
+}
+function authFlagText(v) {
+  if (v === "TOBEAUDITED") return "待审核";
+  if (v === "PASS") return "通过";
+  if (v === "REFUSE") return "拒绝";
+  return "";
+}
+// 初始化数据
+function init() {
+  loadFilterOptions();
+  getDataList();
+  getNumberData();
+}
+function loadFilterOptions() {
+  getShopGoodsLabelListSeller()
+    .then((res) => {
+      if (res?.success) {
+        shopCategoryList.value = formatShopCategory(res.result || []);
+      }
+    })
+    .catch(() => {});
+  getCategoryTree()
+    .then((res) => {
+      if (res?.success) {
+        platformCategoryList.value = res.result || [];
+      }
+    })
+    .catch(() => {});
+}
+function onStockStatusChange(value) {
+  if (value !== "IN_STOCK") {
+    searchForm.value.stockMin = "";
+    searchForm.value.stockMax = "";
+  }
+}
+function buildSearchParams(includeGoodsStatus = true) {
+  const { stockStatus, stockMin, stockMax, priceMin, priceMax, ...rest } = searchForm.value;
+  const params = { ...rest };
+
+  if (!includeGoodsStatus) {
+    delete params.goodsStatus;
+  }
+
+  if (createRange.value && createRange.value.length === 2) {
+    params.startDate = createRange.value[0];
+    params.endDate = createRange.value[1];
+  }
+
+  if (stockStatus === "IN_STOCK") {
+    params.geQuantity = stockMin !== "" && stockMin != null ? Number(stockMin) : 1;
+    if (stockMax !== "" && stockMax != null) {
+      params.leQuantity = Number(stockMax);
+    }
+  } else if (stockStatus === "OUT_OF_STOCK") {
+    params.geQuantity = 0;
+    params.leQuantity = 0;
+  } else {
+    if (stockMin !== "" && stockMin != null) params.geQuantity = Number(stockMin);
+    if (stockMax !== "" && stockMax != null) params.leQuantity = Number(stockMax);
+  }
+
+  if (priceMin !== "" && priceMax !== "") {
+    params.price = `${priceMin}_${priceMax}`;
+  } else if (priceMin !== "") {
+    params.price = String(priceMin);
+  } else if (priceMax !== "") {
+    params.price = `0_${priceMax}`;
+  }
+
+  return params;
+}
+function formatShopCategory(list) {
+  return (list || []).map((item) => ({
+    value: item.id,
+    label: item.labelName,
+    children:
+      item.children && item.children.length
+        ? formatShopCategory(item.children)
+        : undefined,
+  }));
+}
+// 分页 改变页码
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+// 分页 改变页数
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+// 搜索
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+  getNumberData();
+}
+// 获取数据
+function getDataList() {
+  loading.value = true;
+  getGoodsListData(buildSearchParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getNumberData() {
+  getGoodsNumerData(buildSearchParams(false)).then((res) => {
+    if (res.success) {
+      goodsNumerData.value = res.result;
+    }
+  })
+}
+// 编辑
+function edit(v) {
+  id.value = v.id;
+  if (v.underMessage) {
+    underForm.value.reason = v.underMessage;
+  } else {
+    underForm.value.reason = "";
+  }
+  modalVisible.value = true;
+}
+// 下架
+function lower() {
+  let params = {
+    goodsId: id.value,
+    reason: underForm.value.reason
+  };
+  lowGoods(params).then((res) => {
+    Modal.remove();
+    if (res.success) {
+      Message.success("操作成功");
+      modalVisible.value = false;
+      getDataList();
+      getNumberData(); // 添加这行
+    }
+  });
+}
+// 上架
+function upper(v) {
+  Modal.confirm({
+    title: "确认上架",
+    content: "您确认要上架 " + v.goodsName + " ?",
+    loading: true,
+    onOk: () => {
+       let params = {
+        goodsId: v.id
+      };
+      upGoods(params).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("上架成功");
+          getDataList();
+          getNumberData(); // 添加这行
+        }
+      });
+    },
+  });
+}
+
+// 编辑商品
+function editGoods(v) {
+  customRouterPush({
+    name: "goods-operation-edit",
+    query: { id: v.id },
+  });
+}
+
+// 复制商品
+function copyGoods(v) {
+  customRouterPush({
+    name: "goods-operation",
+    query: { copyId: v.id },
+  });
+}
+
+// 商品状态筛选
+function goodsStatusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined || name === null) {
+    delete searchForm.value.goodsStatus;
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.value.goodsStatus = name;
+    currentStatus.value = name;
+  }
+  selectedRows.value = [];
+  clearTableSelection();
+  getDataList();
+}
+
+function onSelectionChange(selection) {
+  selectedRows.value = selection;
+}
+
+// 批量上架
+function batchUpper() {
+  if (selectedRows.value.length === 0) {
+    Message.warning('请先选择要上架的商品');
+    return;
+  }
+
+  const goodsNames = selectedRows.value.map(item => item.goodsName).join('、');
+  Modal.confirm({
+    title: '确认批量上架',
+    content: `您确认要上架以下商品吗？\n${goodsNames}`,
+    loading: true,
+    onOk: () => {
+      // 提取所有选中商品的ID
+      const goodsIds = selectedRows.value.map(item => item.id);
+      const params = {
+        goodsId: goodsIds // 传递ID数组
+      };
+
+      upGoods(params).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success('批量上架成功');
+          selectedRows.value = [];
+          selectAll.value = false;
+          getDataList();
+          getNumberData();
+        }
+      }).catch(() => {
+        Modal.remove();
+      });
+    }
+  });
+}
+
+// 批量下架
+function batchLower() {
+  if (selectedRows.value.length === 0) {
+    Message.warning('请先选择要下架的商品');
+    return;
+  }
+
+  const goodsNames = selectedRows.value.map(item => item.goodsName).join('、');
+  Modal.confirm({
+    title: '确认批量下架',
+    content: `您确认要下架以下商品吗？\n${goodsNames}`,
+    loading: true,
+    onOk: () => {
+      // 提取所有选中商品的ID
+      const goodsIds = selectedRows.value.map(item => item.id);
+      const params = {
+        goodsId: goodsIds, // 传递ID数组
+        reason: '批量下架操作' // 可以设置默认下架原因
+      };
+
+      lowGoods(params).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success('批量下架成功');
+          selectedRows.value = [];
+          selectAll.value = false;
+          getDataList();
+          getNumberData();
+        }
+      }).catch(() => {
+        Modal.remove();
+      });
+    }
+  });
+}
+
+onMounted(() => {
+  const goodsStatus = route.query.goodsStatus;
+  if (goodsStatus) {
+    currentStatus.value = goodsStatus;
+    searchForm.value.goodsStatus = goodsStatus;
+  }
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .search-form-row {
diff --git a/seller/src/views/goods/goods-seller/goodsOperation.vue b/seller/src/views/goods/goods-seller/goodsOperation.vue
index d60a1aff7..13eccbfa3 100644
--- a/seller/src/views/goods/goods-seller/goodsOperation.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperation.vue
@@ -9,7 +9,7 @@
       </el-steps>
     </div>
     <!-- 第一步 选择分类 -->
-    <first-step ref='first' v-show="activestep === 0" @change="getFirstData"></first-step>
+    <first-step ref='firstRef' v-show="activestep === 0" @change="getFirstData"></first-step>
     <!-- 第二步 商品详细信息 -->
     <second-step ref='second' :firstData="firstData" v-if="activestep === 1"></second-step>
     <!-- 第三步 发布完成 -->
@@ -18,43 +18,41 @@
     
   </div>
 </template>
-<script>
-import firstStep from  './goodsOperationFirst'
-import secondStep from  './goodsOperationSec'
-import thirdStep from  './goodsOperationThird'
-export default {
-  name: "addGoods",
-  components: {
-    firstStep,
-    secondStep,
-    thirdStep
-  },
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import firstStep from './goodsOperationFirst'
+import secondStep from './goodsOperationSec'
+import thirdStep from './goodsOperationThird'
 
-  data() {
-    return {
-      /** 当前激活步骤*/
-      activestep: 0,
-      firstData: {}, // 第一步传递的数据
-    };
-  },
-  methods: {
-    // 选择商品分类回调
-    getFirstData (item) {
-      this.firstData = item;
-      this.activestep = 1;
-    }
-  },
-  mounted() {
-    // 编辑商品、模板、复制商品
-    if (this.$route.query.id || this.$route.query.draftId || this.$route.query.copyId) {
-      this.activestep = 1;
-    } else {
-      this.activestep = 0
-      this.$refs.first.selectGoodsType = true;
-    }
-    
+defineOptions({ name: "addGoods" });
+
+const route = useRoute();
+
+const firstRef = ref(null);
+
+/** 当前激活步骤*/
+const activestep = ref(0);
+const firstData = ref({}); // 第一步传递的数据
+
+// 子组件 goodsOperationSec 通过 $parent.activestep-- 回退一步
+defineExpose({ activestep });
+
+// 选择商品分类回调
+function getFirstData (item) {
+  firstData.value = item;
+  activestep.value = 1;
+}
+
+onMounted(() => {
+  // 编辑商品、模板、复制商品
+  if (route.query.id || route.query.draftId || route.query.copyId) {
+    activestep.value = 1;
+  } else {
+    activestep.value = 0
+    firstRef.value.selectGoodsType = true;
   }
-};
+});
 </script>
 <style lang="scss" scoped>
 @import "./addGoods.scss";
diff --git a/seller/src/views/goods/goods-seller/goodsOperationFirst.vue b/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
index e9df91df4..c889121b1 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationFirst.vue
@@ -85,143 +85,142 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, markRaw, onMounted, ref, watch } from "vue";
 import * as API_GOODS from "@/api/goods";
 import { Box, Calendar, CreditCard, Ticket } from "@element-plus/icons-vue";
+import { Message } from "@/utils/message";
 
-export default {
-  components: { Box, Calendar, CreditCard, Ticket },
-  data() {
-    return {
-      selectGoodsType: false,
-      goodsTypeWay: [
-        {
-          title: "实物商品",
-          desc: "零售批发，物流配送",
-          type: "PHYSICAL_GOODS",
-          icon: "Box",
-          tone: "tone-physical",
-        },
-        {
-          title: "虚拟商品",
-          desc: "虚拟核验，无需物流",
-          type: "VIRTUAL_GOODS",
-          icon: "Ticket",
-          tone: "tone-virtual",
-        },
-        {
-          title: "电子卡券",
-          desc: "卡密自动发卡，无需物流",
-          type: "E_COUPON",
-          icon: "CreditCard",
-          tone: "tone-coupon",
-        },
-        {
-          title: "预约商品",
-          desc: "时段预约，到店或上门",
-          type: "APPOINTMENT_GOODS",
-          icon: "Calendar",
-          tone: "tone-appointment",
-        },
-      ],
-      category: [
-        { name: "", id: "" },
-        { name: "", id: "" },
-        { name: "", id: "" },
-      ],
-      goodsType: "",
-      pendingGoodsType: "",
-      categoryListLevel1: [],
-      categoryListLevel2: [],
-      categoryListLevel3: [],
-    };
+const emit = defineEmits(["change"]);
+
+const selectGoodsType = ref(false);
+// icon 直接存组件对象：<script setup> 下无 components 选项，字符串名无法在 <component :is> 中解析
+const goodsTypeWay = ref([
+  {
+    title: "实物商品",
+    desc: "零售批发，物流配送",
+    type: "PHYSICAL_GOODS",
+    icon: markRaw(Box),
+    tone: "tone-physical",
   },
-  computed: {
-    selectedTypeTitle() {
-      const hit = this.goodsTypeWay.find((item) => item.type === this.goodsType);
-      return hit ? hit.title : "";
-    },
+  {
+    title: "虚拟商品",
+    desc: "虚拟核验，无需物流",
+    type: "VIRTUAL_GOODS",
+    icon: markRaw(Ticket),
+    tone: "tone-virtual",
   },
-  watch: {
-    selectGoodsType(val) {
-      if (val) {
-        this.syncGoodsTypeSelection();
-      }
-    },
+  {
+    title: "电子卡券",
+    desc: "卡密自动发卡，无需物流",
+    type: "E_COUPON",
+    icon: markRaw(CreditCard),
+    tone: "tone-coupon",
   },
-  methods: {
-    syncGoodsTypeSelection() {
-      this.pendingGoodsType = this.goodsType;
-    },
-    openGoodsTypeDialog() {
-      this.selectGoodsType = true;
-    },
-    handleClickGoodsType(item) {
-      this.pendingGoodsType = item.type;
-    },
-    cancelGoodsType() {
-      this.syncGoodsTypeSelection();
-      this.selectGoodsType = false;
-    },
-    confirmGoodsType() {
-      if (!this.pendingGoodsType) {
-        this.$Message.error("请选择商品类型");
-        return;
-      }
-      this.goodsType = this.pendingGoodsType;
-      this.selectGoodsType = false;
-    },
-    handleSelectCategory(row, index, level) {
-      if (level === 1) {
-        this.category.forEach((cate) => {
-          (cate.name = ""), (cate.id = "");
-        });
-        this.category[0].name = row.name;
-        this.category[0].id = row.id;
-        this.categoryListLevel2 = this.categoryListLevel1[index].children;
-        this.categoryListLevel3 = [];
-      } else if (level === 2) {
-        this.category[1].name = row.name;
-        this.category[1].id = row.id;
-        this.category[2].name = "";
-        this.category[2].id = "";
-        this.categoryListLevel3 = this.categoryListLevel2[index].children;
-      } else {
-        this.category[2].name = row.name;
-        this.category[2].id = row.id;
-      }
-    },
-    GET_NextLevelCategory() {
-      API_GOODS.getGoodsCategoryAll().then((res) => {
-        if (res.success && res.result) {
-          this.categoryListLevel1 = res.result;
-        }
-      });
-    },
-    next() {
-      window.scrollTo(0, 0);
-      if (!this.goodsType) {
-        this.$Message.error("请选择商品类型");
-        this.openGoodsTypeDialog();
-        return;
-      }
-      if (!this.category[0].name) {
-        this.$Message.error("请选择商品分类");
-        return;
-      } else if (!this.category[2].name) {
-        this.$Message.error("必须选择到三级分类");
-        return;
-      }
-      this.$emit("change", {
-        category: this.category,
-        goodsType: this.goodsType,
-      });
-    },
+  {
+    title: "预约商品",
+    desc: "时段预约，到店或上门",
+    type: "APPOINTMENT_GOODS",
+    icon: markRaw(Calendar),
+    tone: "tone-appointment",
   },
-  mounted() {
-    this.GET_NextLevelCategory();
-  },
-};
+]);
+const category = ref([
+  { name: "", id: "" },
+  { name: "", id: "" },
+  { name: "", id: "" },
+]);
+const goodsType = ref("");
+const pendingGoodsType = ref("");
+const categoryListLevel1 = ref([]);
+const categoryListLevel2 = ref([]);
+const categoryListLevel3 = ref([]);
+
+const selectedTypeTitle = computed(() => {
+  const hit = goodsTypeWay.value.find((item) => item.type === goodsType.value);
+  return hit ? hit.title : "";
+});
+
+watch(selectGoodsType, (val) => {
+  if (val) {
+    syncGoodsTypeSelection();
+  }
+});
+
+function syncGoodsTypeSelection() {
+  pendingGoodsType.value = goodsType.value;
+}
+function openGoodsTypeDialog() {
+  selectGoodsType.value = true;
+}
+function handleClickGoodsType(item) {
+  pendingGoodsType.value = item.type;
+}
+function cancelGoodsType() {
+  syncGoodsTypeSelection();
+  selectGoodsType.value = false;
+}
+function confirmGoodsType() {
+  if (!pendingGoodsType.value) {
+    Message.error("请选择商品类型");
+    return;
+  }
+  goodsType.value = pendingGoodsType.value;
+  selectGoodsType.value = false;
+}
+function handleSelectCategory(row, index, level) {
+  if (level === 1) {
+    category.value.forEach((cate) => {
+      (cate.name = ""), (cate.id = "");
+    });
+    category.value[0].name = row.name;
+    category.value[0].id = row.id;
+    categoryListLevel2.value = categoryListLevel1.value[index].children;
+    categoryListLevel3.value = [];
+  } else if (level === 2) {
+    category.value[1].name = row.name;
+    category.value[1].id = row.id;
+    category.value[2].name = "";
+    category.value[2].id = "";
+    categoryListLevel3.value = categoryListLevel2.value[index].children;
+  } else {
+    category.value[2].name = row.name;
+    category.value[2].id = row.id;
+  }
+}
+function GET_NextLevelCategory() {
+  API_GOODS.getGoodsCategoryAll().then((res) => {
+    if (res.success && res.result) {
+      categoryListLevel1.value = res.result;
+    }
+  });
+}
+function next() {
+  window.scrollTo(0, 0);
+  if (!goodsType.value) {
+    Message.error("请选择商品类型");
+    openGoodsTypeDialog();
+    return;
+  }
+  if (!category.value[0].name) {
+    Message.error("请选择商品分类");
+    return;
+  } else if (!category.value[2].name) {
+    Message.error("必须选择到三级分类");
+    return;
+  }
+  emit("change", {
+    category: category.value,
+    goodsType: goodsType.value,
+  });
+}
+
+onMounted(() => {
+  GET_NextLevelCategory();
+});
+
+// 父组件 goodsOperation.vue 通过 ref 直接赋值 selectGoodsType 打开弹窗
+defineExpose({ selectGoodsType });
 </script>
 <style lang="scss" scoped>
 @import "./addGoods.scss";
diff --git a/seller/src/views/goods/goods-seller/goodsOperationSec.vue b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
index ecd73b8ef..2859d8ecb 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationSec.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationSec.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="rootEl">
     <el-dialog v-model="visible" title="预览图片">
       <img v-if="visible" :src="previewPicture" style="width: 100%">
     </el-dialog>
@@ -17,7 +17,7 @@
           {{ tab.label }}
         </button>
       </div>
-      <el-form ref="baseInfoForm" label-width="120px" :model="baseInfoForm" :rules="baseInfoFormRule">
+      <el-form ref="baseInfoFormRef" label-width="120px" :model="baseInfoForm" :rules="baseInfoFormRule">
         <div class="base-info-item">
           <div id="goods-section-basic" class="goods-section" data-section="basic">
             <div class="goods-section-hd">
@@ -198,7 +198,7 @@
           <div class="form-item-view">
             <el-form-item class="form-item-view-el" label="PC商品描述" prop="intro" style="width: 100%">
               <div class="intro-editor-field">
-                <editor ref="editor" v-model="baseInfoForm.intro" height="800px" openXss></editor>
+                <editor ref="editorRef" v-model="baseInfoForm.intro" height="800px" openXss></editor>
                 <div class="promise-intro-btn">
                   <el-button type="primary" @click="promiseIntroEditor">将PC商品描述同步到移动端描述
                   </el-button>
@@ -208,7 +208,7 @@
 
             <el-form-item class="form-item-view-el" label="移动端描述" prop="skuList" style="width: 100%">
               <div class="intro-editor-field">
-                <editor ref="introEditor" v-model="baseInfoForm.mobileIntro" height="800px" openXss></editor>
+                <editor ref="introEditorRef" v-model="baseInfoForm.mobileIntro" height="800px" openXss></editor>
               </div>
             </el-form-item>
           </div>
@@ -646,7 +646,7 @@
     <!--</el-dialog>-->
     <el-dialog v-model="picModelFlag" width="1200px" title="选择图片" append-to-body destroy-on-close>
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :isComponent="true"
         :initialize="picModelFlag"
         :max-select="selectedFormBtnName === 'goodsGalleryFiles' ? 1 : 0"
@@ -662,13 +662,23 @@
 
   </div>
 </template>
-<script>
+<script setup>
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_GOODS from "@/api/goods";
 import * as API_Shop from "@/api/shops";
 import cloneObj from "@/utils/index";
 import { Camera, Delete, Plus, Refresh, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
-import tinymec from "@/views/lili-components/editor/index.vue";
+import editor from "@/views/lili-components/editor/index.vue";
 
 import { uploadFile } from "@/libs/axios";
 import { regular } from "@/utils";
@@ -678,2102 +688,2120 @@ import {
   defaultAppointmentSettings,
   defaultSlotDivision,
 } from "@/constants/appointment";
+import { getStore } from "@/libs/storage";
+import { Message, Notice } from "@/utils/message";
 
+defineOptions({ name: "goodsOperationSec" });
 
-export default {
-  name: "goodsOperationSec",
-  components: {
-    Camera,
-    Delete,
-    Plus,
-    Refresh,
-    ZoomIn,
-    editor: tinymec,
-    vuedraggable,
-    ossManage,
-    AppointmentPublishPanel,
+const props = defineProps({
+  firstData: {
+    default: () => ({}),
+    type: Object,
   },
-  props: {
-    firstData: {
-      default: () => ({}),
-      type: Object,
+});
+
+const route = useRoute();
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+// 表单验证项，商品价格
+const checkPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("商品价格不能为空"));
+  }
+  setTimeout(() => {
+    if (!regular.money.test(value)) {
+      callback(new Error("请输入正整数或者两位小数"));
+    } else if (parseFloat(value) > 99999999) {
+      callback(new Error("商品价格设置超过上限值"));
+    } else {
+      callback();
+    }
+  }, 1000);
+};
+
+const baseInfoFormRule = {
+  goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60],
+  price: [regular.REQUIRED, { validator: checkPrice }],
+  sellingPoint: [regular.REQUIRED, regular.VARCHAR60],
+  goodsUnit: [{ required: true, message: "请选择计量单位" }],
+  name: [regular.REQUIRED, regular.VARCHAR5],
+  value: [regular.REQUIRED, regular.VARCHAR60],
+  templateId: [regular.REQUIRED],
+  weight: [regular.REQUIRED],
+};
+
+const params = {
+  pageNumber: 1,
+  pageSize: 1000,
+};
+
+const openImage = ref(false);
+const needToloadSku = ref(false);
+const total = ref(0);
+const goodsVideo = ref("");
+const showContent = ref(false);
+const loadingVideo = ref(false);
+const listImages = ref([]);
+const newSkuValues = ref([]);
+const contentImage = ref("");
+const previewImage = ref(''); // 预览图片地址
+const global = ref(0);
+const accessToken = ref(""); //令牌token
+const goodsParams = ref([]);
+const categoryId = ref(""); // 商品分类第三级id
+const activeTab = ref("basic");
+const scrollingByClick = ref(false);
+//提交状态
+const submitLoading = ref(false);
+//上传图片路径
+const uploadFileUrl = uploadFile;
+// 预览图片路径
+const previewPicture = ref("");
+//商品图片
+const previewGoodsPicture = ref("");
+//展示图片层
+const visible = ref(false);
+//展示商品图片
+const goodsPictureVisible = ref(false);
+//展示sku图片
+const showSkuPicture = ref(false);
+//选择的sku
+const selectedSku = ref({});
+
+/** 发布商品基本参数 */
+const baseInfoForm = ref({
+  salesModel: "RETAIL",
+  /** 商品相册列表 */
+  goodsGalleryFiles: [],
+  /** 是否立即发布 true 立即发布 false 放入仓库 */
+  release: 1,
+  /** 是否为推荐商品 */
+  recommend: 1,
+  /** 店铺分类 */
+  storeCategoryPath: "",
+  brandId: "",
+  /** 计量单位 **/
+  goodsUnit: "",
+  /** 商品类型 **/
+  goodsType: "",
+  /** 分类路径 **/
+  categoryPath: "",
+  /** 商品卖点 **/
+  sellingPoint: "",
+  /** 商品详情 **/
+  intro: "",
+  mobileIntro: "",
+  updateSku: true,
+  /** 是否重新生成sku */
+  regeneratorSkuFlag: false,
+  /** 物流模板id **/
+  templateId: "",
+  /** 参数组*/
+  goodsParamsDTOList: [],
+  /** 商品分类中文名 */
+  categoryName: [],
+  goodsVideo: "",
+  /** 商品参数用于验证 */
+  goodsParams: [],
+});
+
+// 原 Options API 中直接挂在 this 上的非响应式字段
+let goodsId;
+let currentSkuItem = "";
+let form;
+let editTitle;
+let selectCount;
+let scrollParent = null;
+let _onPublishScroll;
+let _scrollTick = false;
+let _scrollClickTimer;
+let skuIndex;
+
+const wholesalePreviewColumns = [
+  {
+    title: "销售规则",
+    width: 480,
+    render: (h, params) => {
+      let guide =
+        "当商品购买数量 ≥" +
+        params.row.num +
+        " 时，售价为 ￥" +
+        params.row.price +
+        " /" +
+        baseInfoForm.value.goodsUnit;
+      return h("div", guide);
     },
   },
-  computed: {
-    /** 卡密商品：库存只读展示 quantity，提交时 quantity 传 0（FR-S-01 / P-02） */
-    isECouponGoods() {
-      return this.baseInfoForm.goodsType === "E_COUPON";
-    },
-    /** 预约商品：规则区 + 时段库存，SKU 数量列隐藏 */
-    isAppointmentGoods() {
-      return this.baseInfoForm.goodsType === "APPOINTMENT_GOODS";
-    },
-    isVirtualGoods() {
-      return this.baseInfoForm.goodsType === "VIRTUAL_GOODS";
-    },
-    isVirtualLikeGoods() {
-      return this.isVirtualGoods || this.isECouponGoods || this.isAppointmentGoods;
-    },
-    hideSkuQuantity() {
-      return this.isECouponGoods || this.isAppointmentGoods;
-    },
-    /** 仅实物需要运费模板；E_COUPON 强制 templateId=0（§6.1） */
-    needsLogistics() {
-      return this.baseInfoForm.goodsType === "PHYSICAL_GOODS";
-    },
-    /** 预约、卡券固定零售，不展示销售模式切换 */
-    showSalesModel() {
-      return !this.isECouponGoods && !this.isAppointmentGoods;
-    },
-    priceSectionTitle() {
-      if (this.isAppointmentGoods) return "规格与可约数量";
-      if (this.isECouponGoods) return "规格价格";
-      return "价格库存";
-    },
-    priceSectionDesc() {
-      if (this.isAppointmentGoods) return "规格、售价与各时段可预约数量";
-      if (this.isECouponGoods) return "规格与售价，库存由卡池管理";
-      return "销售模式、规格与库存";
-    },
-    otherSectionDesc() {
-      if (this.needsLogistics) return "上架状态、运费模板与店内分类";
-      return "上架状态与店内分类";
-    },
-    sectionTabs() {
-      const tabs = [
-        { name: "basic", label: "基础信息" },
-        { name: "specs", label: "图文信息" },
-      ];
-      if (this.isAppointmentGoods) {
-        tabs.push({ name: "appointment", label: "预约规则" });
+];
+
+const wholesaleColumns = [
+  {
+    title: "购买数量",
+    key: "num",
+    align: "center",
+    slot: "wholesaleNum",
+  },
+  {
+    title: "商品单价",
+    key: "price",
+    align: "center",
+    width: "280px",
+    slot: "wholesalePrice",
+  },
+];
+
+const wholesaleData = ref([
+  {
+    num: 0,
+    price: 0,
+    goodsId,
+  },
+]);
+
+const invalidGoodsGalleryFiles = ref([]);
+const goodsPictureFallback =
+  "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22148%22%20height%3D%22148%22%20viewBox%3D%220%200%20148%20148%22%3E%3Crect%20width%3D%22148%22%20height%3D%22148%22%20fill%3D%22%23f5f7fa%22/%3E%3Ctext%20x%3D%2274%22%20y%3D%2274%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20font-size%3D%2212%22%20fill%3D%22%23999%22%3EImage%20unavailable%3C/text%3E%3C/svg%3E";
+/** 表格头 */
+const skuTableColumn = ref([]);
+/** 表格数据 */
+const skuTableData = ref([]);
+// 持久化的sku数据
+const skuTableDataCopy = ref([]);
+// 持久化的sku数据
+const skuInfoCopy = ref([]);
+/** 默认的规格参数 */
+const skuData = ref([]);
+/** 默认的规格值 */
+const skuVals = ref([]);
+// 某一规格名下的规格值
+const skuVal = ref([]);
+// 规格展开的项
+const open_panel = ref(["1", "2"]);
+/** 要提交的规格数据*/
+const skuInfo = ref([]);
+/** 物流模板 **/
+const logisticsTemplate = ref([]);
+
+/** 固定列校验提示内容 */
+const validatatxt = ref("请输入0~99999999之间的数字值");
+//参数panel展示
+const params_panel = ref([]);
+/** 存储未通过校验的单元格位置  */
+const validateError = ref([]);
+const currentSkuVal = ref("");
+const skuInfoRules = ref({});
+/** 品牌列表 */
+const brandList = ref([]);
+/** 店铺分类列表 */
+const shopCategory = ref([]);
+/** 商品单位列表 */
+const goodsUnitList = ref([]);
+const containsSameSkuItem = ref(false);
+const containsSameSkuValue = ref(false);
+const containsSameSkuNewValue = ref(false);
+// 展示商品视频
+const showGoodsVideo = ref(false);
+const ignoreColumn = [
+  // 添加规格时需要忽略的参数
+  "_index",
+  "_rowKey",
+  "sn",
+  // "cost",
+  "price",
+  "weight",
+  "quantity",
+  // "alertQuantity",
+  "specId",
+  "specValueId",
+];
+const picModelFlag = ref(false); // 图片选择器
+const selectedFormBtnName = ref(""); // 点击图片绑定form
+const selectedImage = ref([]);
+const lastEditSkuValue = ref('');
+const appointmentSettings = ref(defaultAppointmentSettings());
+const appointmentDivision = ref(defaultSlotDivision());
+const skuSlotCapacities = ref({});
+
+// 模板 ref：baseInfoForm/editor/ossManage 与顶层变量重名，模板 ref 改名避免互相覆盖
+const rootEl = ref(null);
+const sectionNav = ref(null);
+const baseInfoFormRef = ref(null);
+const editorRef = ref(null);
+const introEditorRef = ref(null);
+const appointmentPanel = ref(null);
+const tree = ref(null);
+const ossManageRef = ref(null);
+
+/** 卡密商品：库存只读展示 quantity，提交时 quantity 传 0（FR-S-01 / P-02） */
+const isECouponGoods = computed(() => {
+  return baseInfoForm.value.goodsType === "E_COUPON";
+});
+/** 预约商品：规则区 + 时段库存，SKU 数量列隐藏 */
+const isAppointmentGoods = computed(() => {
+  return baseInfoForm.value.goodsType === "APPOINTMENT_GOODS";
+});
+const isVirtualGoods = computed(() => {
+  return baseInfoForm.value.goodsType === "VIRTUAL_GOODS";
+});
+const isVirtualLikeGoods = computed(() => {
+  return isVirtualGoods.value || isECouponGoods.value || isAppointmentGoods.value;
+});
+const hideSkuQuantity = computed(() => {
+  return isECouponGoods.value || isAppointmentGoods.value;
+});
+/** 仅实物需要运费模板；E_COUPON 强制 templateId=0（§6.1） */
+const needsLogistics = computed(() => {
+  return baseInfoForm.value.goodsType === "PHYSICAL_GOODS";
+});
+/** 预约、卡券固定零售，不展示销售模式切换 */
+const showSalesModel = computed(() => {
+  return !isECouponGoods.value && !isAppointmentGoods.value;
+});
+const priceSectionTitle = computed(() => {
+  if (isAppointmentGoods.value) return "规格与可约数量";
+  if (isECouponGoods.value) return "规格价格";
+  return "价格库存";
+});
+const priceSectionDesc = computed(() => {
+  if (isAppointmentGoods.value) return "规格、售价与各时段可预约数量";
+  if (isECouponGoods.value) return "规格与售价，库存由卡池管理";
+  return "销售模式、规格与库存";
+});
+const otherSectionDesc = computed(() => {
+  if (needsLogistics.value) return "上架状态、运费模板与店内分类";
+  return "上架状态与店内分类";
+});
+const sectionTabs = computed(() => {
+  const tabs = [
+    { name: "basic", label: "基础信息" },
+    { name: "specs", label: "图文信息" },
+  ];
+  if (isAppointmentGoods.value) {
+    tabs.push({ name: "appointment", label: "预约规则" });
+  }
+  tabs.push(
+    { name: "price", label: "价格库存" },
+    { name: "other", label: "其他信息" },
+  );
+  return tabs;
+});
+
+// 如果点击了展示商品视频，则初始化商品视频
+watch(showGoodsVideo, (val) => {
+  if (val) {
+    initVideo();
+  }
+});
+
+/** E_COUPON / APPOINTMENT 提交固定传 0，预约品库存走 slot_capacity */
+function resolveSubmitQuantity(sku) {
+  if (isECouponGoods.value || isAppointmentGoods.value) {
+    return 0;
+  }
+  return sku.quantity;
+}
+function defaultSkuQuantity() {
+  return isECouponGoods.value || isAppointmentGoods.value ? 0 : "";
+}
+function openAppointmentCapacity(row) {
+  appointmentPanel.value?.openSkuCapacityDialog(row);
+}
+function draggableItemKey(item) {
+  return item;
+}
+// 选择图片modal
+function handleCLickImg(val, index) {
+  selectedImage.value = [];
+  picModelFlag.value = true;
+  selectedFormBtnName.value = val;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function handleLoadingSkuData() {
+  needToloadSku.value = false
+  renderTableData(skuTableData.value)
+}
+function changeSkuOpenImage() {
+  skuTableData.value.forEach(item => {
+    item.images = []
+  })
+  if (skuInfo.value.length > 0 && skuInfo.value[0].spec_values.length > 0) {
+    skuInfo.value[0].spec_values.forEach(item => {
+      item.images = []
+    })
+  }
+}
+// ship大小不正确
+function handleVideoMaxSize(file) {
+  Notice.warning({
+    title: "超过文件大小限制",
+    desc: "视频大小不能超过10MB",
+  });
+}
+function parseOssSelectionUrl(item) {
+  if (!item) return "";
+  if (typeof item === "string") {
+    const index = item.indexOf(",");
+    return index >= 0 ? item.slice(index + 1) : item;
+  }
+  return item.url || "";
+}
+// 图片选择后回调
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) {
+    return;
+  }
+  if (selectedFormBtnName.value === "selectedSkuImages") {
+    if (!selectedSku.value.images) {
+      selectedSku.value.images = [];
+    }
+    selectedSku.value.images.push(val.url);
+  } else {
+    baseInfoForm.value[selectedFormBtnName.value].push(val.url);
+  }
+}
+function confirmUrls() {
+  const urls = (selectedImage.value || [])
+    .map((item) => parseOssSelectionUrl(item))
+    .filter(Boolean);
+  if (!urls.length) {
+    Message.warning("请选择图片");
+    return;
+  }
+  if (selectedFormBtnName.value === "selectedSkuImages") {
+    if (!selectedSku.value.images) {
+      selectedSku.value.images = [];
+    }
+    urls.forEach((url) => {
+      if (selectedSku.value.images.length < 5) {
+        selectedSku.value.images.push(url);
       }
-      tabs.push(
-        { name: "price", label: "价格库存" },
-        { name: "other", label: "其他信息" },
-      );
-      return tabs;
-    },
-  },
-  data() {
-    // 表单验证项，商品价格
-    const checkPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("商品价格不能为空"));
+    });
+  } else if (selectedFormBtnName.value === "goodsGalleryFiles") {
+    urls.forEach((url) => {
+      if (baseInfoForm.value.goodsGalleryFiles.length < 5) {
+        baseInfoForm.value.goodsGalleryFiles.push(url);
       }
-      setTimeout(() => {
-        if (!regular.money.test(value)) {
-          callback(new Error("请输入正整数或者两位小数"));
-        } else if (parseFloat(value) > 99999999) {
-          callback(new Error("商品价格设置超过上限值"));
-        } else {
-          callback();
-        }
-      }, 1000);
-    };
-    return {
-      regular,
-      openImage: false,
-      needToloadSku: false,
-      total: 0,
-      goodsVideo: "",
-      showContent: false,
-      loadingVideo: false,
-      listImages: [],
-      newSkuValues: [],
-      contentImage: "",
-      previewImage: '', // 预览图片地址
-      global: 0,
-      accessToken: "", //令牌token
-      goodsParams: [],
-      categoryId: "", // 商品分类第三级id
-      activeTab: "basic",
-      scrollingByClick: false,
-      //提交状态
-      submitLoading: false,
-      //上传图片路径
-      uploadFileUrl: uploadFile,
-      // 预览图片路径
-      previewPicture: "",
-      //商品图片
-      previewGoodsPicture: "",
-      //展示图片层
-      visible: false,
-      //展示商品图片
-      goodsPictureVisible: false,
-      //展示sku图片
-      showSkuPicture: false,
-      //选择的sku
-      selectedSku: {},
-      wholesalePreviewColumns: [
-        {
-          title: "销售规则",
-          width: 480,
-          render: (h, params) => {
-            let guide =
-              "当商品购买数量 ≥" +
-              params.row.num +
-              " 时，售价为 ￥" +
-              params.row.price +
-              " /" +
-              this.baseInfoForm.goodsUnit;
-            return h("div", guide);
-          },
-        },
-      ],
-      wholesaleColumns: [
-        {
-          title: "购买数量",
-          key: "num",
-          align: "center",
-          slot: "wholesaleNum",
-        },
-        {
-          title: "商品单价",
-          key: "price",
-          align: "center",
-          width: "280px",
-          slot: "wholesalePrice",
-        },
-      ],
-      wholesaleData: [
-        {
-          num: 0,
-          price: 0,
-          goodsId: this.goodsId,
-        },
-      ],
-      /** 发布商品基本参数 */
-      baseInfoForm: {
-        salesModel: "RETAIL",
-        /** 商品相册列表 */
-        goodsGalleryFiles: [],
-        /** 是否立即发布 true 立即发布 false 放入仓库 */
-        release: 1,
-        /** 是否为推荐商品 */
-        recommend: 1,
-        /** 店铺分类 */
-        storeCategoryPath: "",
-        brandId: "",
-        /** 计量单位 **/
-        goodsUnit: "",
-        /** 商品类型 **/
-        goodsType: "",
-        /** 分类路径 **/
-        categoryPath: "",
-        /** 商品卖点 **/
-        sellingPoint: "",
-        /** 商品详情 **/
-        intro: "",
-        mobileIntro: "",
-        updateSku: true,
-        /** 是否重新生成sku */
-        regeneratorSkuFlag: false,
-        /** 物流模板id **/
-        templateId: "",
-        /** 参数组*/
-        goodsParamsDTOList: [],
-        /** 商品分类中文名 */
-        categoryName: [],
-        goodsVideo: "",
-        /** 商品参数用于验证 */
-        goodsParams: [],
-      },
-      invalidGoodsGalleryFiles: [],
-      goodsPictureFallback:
-        "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22148%22%20height%3D%22148%22%20viewBox%3D%220%200%20148%20148%22%3E%3Crect%20width%3D%22148%22%20height%3D%22148%22%20fill%3D%22%23f5f7fa%22/%3E%3Ctext%20x%3D%2274%22%20y%3D%2274%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%20font-size%3D%2212%22%20fill%3D%22%23999%22%3EImage%20unavailable%3C/text%3E%3C/svg%3E",
-      /** 表格头 */
-      skuTableColumn: [],
-      /** 表格数据 */
-      skuTableData: [],
-      // 持久化的sku数据
-      skuTableDataCopy: [],
-      // 持久化的sku数据
-      skuInfoCopy: [],
-      /** 默认的规格参数 */
-      skuData: [],
-      /** 默认的规格值 */
-      skuVals: [],
-      // 某一规格名下的规格值
-      skuVal: [],
-      // 规格展开的项
-      open_panel: ["1", "2"],
-      /** 要提交的规格数据*/
-      skuInfo: [],
-      /** 物流模板 **/
-      logisticsTemplate: [],
+    });
+  } else if (selectedFormBtnName.value) {
+    const target = baseInfoForm.value[selectedFormBtnName.value];
+    if (Array.isArray(target)) {
+      urls.forEach((url) => target.push(url));
+    }
+  }
+  selectedImage.value = [];
+  picModelFlag.value = false;
+}
+// 局部刷新
+function refresh(v) {
+  if (v == 'template') {
+    GET_ShipTemplate('localRefresh');
+  } else if (v == 'goodsUnit') {
+    goodsUnitList.value = []
+    GET_GoodsUnit('localRefresh');
+  } else {
+    getGoodsBrandList('localRefresh');
+  }
+}
+function getImages(v) {
+  previewImage.value = v;
+  visible.value = true;
+}
+function mouseOver(v) {
+  showContent.value = true
+  listImages.value = v
+  if (listImages.value.images.length <= 0) {
+    contentImage.value = '规格专属图片暂无'
+  } else {
+    contentImage.value = '当前规格专属图片'
+  }
+}
+function mouseLeave() {
+  // showContent.value = false
+}
+function getParamOptions(options) {
+  if (!options) return [];
+  return String(options)
+    .split(",")
+    .map((i) => i.trim())
+    .filter((i) => i);
+}
+function selectParams(params, value, paramsIndex) {
+  if (!Array.isArray(baseInfoForm.value.goodsParamsDTOList)) {
+    baseInfoForm.value.goodsParamsDTOList = [];
+  }
 
-      /** 固定列校验提示内容 */
-      validatatxt: "请输入0~99999999之间的数字值",
-      //参数panel展示
-      params_panel: [],
-      /** 存储未通过校验的单元格位置  */
-      validateError: [],
-      baseInfoFormRule: {
-        goodsName: [regular.REQUIRED, regular.WHITE_SPACE, regular.VARCHAR60],
-        price: [regular.REQUIRED, { validator: checkPrice }],
-        sellingPoint: [regular.REQUIRED, regular.VARCHAR60],
-        goodsUnit: [{ required: true, message: "请选择计量单位" }],
-        name: [regular.REQUIRED, regular.VARCHAR5],
-        value: [regular.REQUIRED, regular.VARCHAR60],
-        templateId: [regular.REQUIRED],
-        weight: [regular.REQUIRED],
+  // 确保baseInfoForm.goodsParams存在
+  if (!Array.isArray(baseInfoForm.value.goodsParams)) {
+    baseInfoForm.value.goodsParams = [];
+  }
+
+  // 确保对应索引的参数项存在
+  if (!baseInfoForm.value.goodsParams[paramsIndex]) {
+    baseInfoForm.value.goodsParams[paramsIndex] = {};
+  }
+
+  // 更新baseInfoForm中的值用于验证
+  baseInfoForm.value.goodsParams[paramsIndex].paramValue = value || '';
+
+  const list = baseInfoForm.value.goodsParamsDTOList;
+  const paramId = params && params.id ? String(params.id) : "";
+  const index = list.findIndex((i) => String(i.paramId) === paramId);
+
+  if (!value && value !== 0) {
+    if (index >= 0) {
+      list.splice(index, 1);
+    }
+    // 清空表单项的值
+    params.paramValue = '';
+    return;
+  }
+  const newItem = {
+    paramId,
+    paramName: params.paramName,
+    paramValue: value,
+    isIndex: params.isIndex || 0,
+    required: params.required || 0,
+    sort: params.sort || 0,
+  };
+
+  if (index >= 0) {
+    list[index] = newItem;
+  } else {
+    list.push(newItem);
+  }
+
+  // 同步更新表单项的值
+  params.paramValue = value;
+}
+// 编辑sku图片
+function editSkuPicture(row) {
+  showContent.value = false
+  if (row.images && row.images.length > 0) {
+    previewPicture.value = row.images[0];
+  }
+  selectedSku.value = row;
+  showSkuPicture.value = true;
+}
+// 初始化视频操作
+async function initVideo() {
+  if (baseInfoForm.value.goodsVideo) {
+    const { default: DPlayer } = await import("dplayer");
+    goodsVideo.value = new DPlayer({
+      container: document.getElementById('dplayer'),
+      video: {
+        url: baseInfoForm.value.goodsVideo,
+        pic: ''
       },
-      params: {
-        pageNumber: 1,
-        pageSize: 1000,
-      },
-      currentSkuVal: "",
-      skuInfoRules: {},
-      /** 品牌列表 */
-      brandList: [],
-      /** 店铺分类列表 */
-      shopCategory: [],
-      /** 商品单位列表 */
-      goodsUnitList: [],
-      containsSameSkuItem: false,
-      containsSameSkuValue: false,
-      containsSameSkuNewValue: false,
-      // 展示商品视频
-      showGoodsVideo: false,
-      ignoreColumn: [
-        // 添加规格时需要忽略的参数
-        "_index",
-        "_rowKey",
-        "sn",
-        // "cost",
-        "price",
-        "weight",
-        "quantity",
-        // "alertQuantity",
-        "specId",
-        "specValueId",
-      ],
-      picModelFlag: false, // 图片选择器
-      selectedFormBtnName: "", // 点击图片绑定form
-      selectedImage: [],
-      lastEditSkuValue: '',
-      appointmentSettings: defaultAppointmentSettings(),
-      appointmentDivision: defaultSlotDivision(),
-      skuSlotCapacities: {},
-    };
-  },
-  watch: {
-    // 如果点击了展示商品视频，则初始化商品视频
-    showGoodsVideo(val) {
-      if (val) {
-        this.initVideo();
+    });
+  }
+}
+function pre() {
+  // 上一步
+  proxy.$parent.activestep--;
+}
+function handleTabChange(name) {
+  if (name !== "specs") {
+    return;
+  }
+  nextTick(() => {
+    editorRef.value?.getEditor?.()?.dispatch?.("ResizeEditor");
+    introEditorRef.value?.getEditor?.()?.dispatch?.("ResizeEditor");
+  });
+}
+function getScrollParent() {
+  let node = rootEl.value && rootEl.value.parentElement;
+  while (node && node !== document.body) {
+    const overflowY = window.getComputedStyle(node).overflowY;
+    if (overflowY === "auto" || overflowY === "scroll") {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function bindPublishScroll() {
+  unbindPublishScroll();
+  scrollParent = getScrollParent();
+  if (scrollParent) {
+    _onPublishScroll = () => onPublishScroll();
+    scrollParent.addEventListener("scroll", _onPublishScroll, { passive: true });
+  }
+}
+function unbindPublishScroll() {
+  if (scrollParent && _onPublishScroll) {
+    scrollParent.removeEventListener("scroll", _onPublishScroll);
+  }
+  scrollParent = null;
+}
+function onPublishScroll() {
+  if (scrollingByClick.value) return;
+  if (_scrollTick) return;
+  _scrollTick = true;
+  requestAnimationFrame(() => {
+    _scrollTick = false;
+    syncActiveTabByScroll();
+  });
+}
+function syncActiveTabByScroll() {
+  const scroller = scrollParent || getScrollParent();
+  if (!scroller) return;
+  const navHeight = (sectionNav.value && sectionNav.value.offsetHeight) || 48;
+  const marker = scroller.getBoundingClientRect().top + navHeight + 12;
+  let current = "basic";
+  sectionTabs.value.forEach((tab) => {
+    const el = document.getElementById(`goods-section-${tab.name}`);
+    if (el && el.getBoundingClientRect().top <= marker) {
+      current = tab.name;
+    }
+  });
+  if (activeTab.value !== current) {
+    activeTab.value = current;
+    handleTabChange(current);
+  }
+}
+function sectionNo(name) {
+  const index = sectionTabs.value.findIndex((tab) => tab.name === name);
+  return index >= 0 ? index + 1 : "";
+}
+function jumpToTab(name) {
+  activeTab.value = name;
+  scrollingByClick.value = true;
+  handleTabChange(name);
+  nextTick(() => {
+    const el = document.getElementById(`goods-section-${name}`);
+    const scroller = scrollParent || getScrollParent();
+    if (!el || !scroller) {
+      scrollingByClick.value = false;
+      return;
+    }
+    const navHeight = (sectionNav.value && sectionNav.value.offsetHeight) || 48;
+    const top =
+      el.getBoundingClientRect().top -
+      scroller.getBoundingClientRect().top +
+      scroller.scrollTop -
+      navHeight -
+      8;
+    scroller.scrollTo({ top: Math.max(top, 0), behavior: "smooth" });
+    window.clearTimeout(_scrollClickTimer);
+    _scrollClickTimer = window.setTimeout(() => {
+      scrollingByClick.value = false;
+    }, 600);
+  });
+}
+function tabForInvalidFields(fields) {
+  const keys = Object.keys(fields || {});
+  for (const key of keys) {
+    if (key === "goodsGalleryFiles" || key === "goodsVideo" || key === "intro" || key === "skuList") {
+      return "specs";
+    }
+    if (key === "salesModel" || key === "wholesaleRule") {
+      return "price";
+    }
+    if (key === "shopCategory" || key === "templateId" || key === "weight") {
+      return "other";
+    }
+  }
+  return "basic";
+}
+// 预览图片
+function handleView(url) {
+  previewPicture.value = url;
+  visible.value = true;
+}
+// 移除已选图片
+function handleRemove(item, index) {
+  item.splice(index, 1)
+  previewPicture.value = "";
+}
+// 查看商品大图
+function handleViewGoodsPicture(url) {
+  if (invalidGoodsGalleryFiles.value.includes(url)) {
+    Message.warning("图片链接已失效，请重新上传主图");
+    return;
+  }
+  previewGoodsPicture.value = url;
+  goodsPictureVisible.value = true;
+}
+function handleGoodsPictureError(event, url) {
+  if (!invalidGoodsGalleryFiles.value.includes(url)) {
+    invalidGoodsGalleryFiles.value.push(url);
+  }
+  const img = event && event.target;
+  if (!img || img.dataset.fallbackApplied) return;
+  img.dataset.fallbackApplied = "true";
+  img.src = goodsPictureFallback;
+}
+// 移除商品图片
+function handleRemoveGoodsPicture(file) {
+  baseInfoForm.value.goodsGalleryFiles =
+    baseInfoForm.value.goodsGalleryFiles.filter((i) => i !== file);
+  invalidGoodsGalleryFiles.value =
+    invalidGoodsGalleryFiles.value.filter((i) => i !== file);
+}
+function assignSkuTableIndex() {
+  skuTableData.value.forEach((row, index) => {
+    row._index = index;
+  });
+}
+// 更新sku图片
+function updateSkuPicture() {
+  baseInfoForm.value.regeneratorSkuFlag = true;
+  let _index = selectedSku.value._index;
+  if (_index === undefined || _index === null) {
+    _index = skuTableData.value.indexOf(selectedSku.value);
+  }
+  if (_index >= 0) {
+    skuTableData.value[_index] = selectedSku.value;
+  }
+}
+// sku图片上传成功
+function handleSuccess(res, file, images) {
+  if (file.response) {
+    file.url = file.response.result;
+    if (images) {
+      images.push(file.url);
+    }
+    previewPicture.value = file.url;
+  }
+}
+function handleAddWholesaleData() {
+  if (
+    wholesaleData.value.length === 1 &&
+    (wholesaleData.value[0].price <= 0 || wholesaleData.value[0].num <= 0)
+  ) {
+    Message.error("请输入正确的销售规则");
+    return;
+  }
+  if (wholesaleData.value.length < 3) {
+    wholesaleData.value.push({
+      price:
+        Number(wholesaleData.value[wholesaleData.value.length - 1].price) -
+        0.01,
+      num:
+        Number(wholesaleData.value[wholesaleData.value.length - 1].num) + 1,
+      goodsId,
+    });
+  }
+  renderTableData(skuTableData.value);
+  syncWholesalePriceToSku();
+}
+function wholesaleRulePreview(row) {
+  const unit = baseInfoForm.value.goodsUnit || "";
+  const unitText = unit ? `/${unit}` : "";
+  return `当商品购买数量 ≥${row.num} 时，售价为 ￥${row.price}${unitText}`;
+}
+function handleDeleteWholesaleData(index) {
+  wholesaleData.value.splice(index, 1);
+  renderTableData(skuTableData.value);
+  syncWholesalePriceToSku();
+}
+// 同步批发价格到SKU
+function syncWholesalePriceToSku() {
+  if (baseInfoForm.value.salesModel === 'WHOLESALE' && wholesaleData.value.length > 0) {
+    // 使用第一个批发价格作为SKU的基础价格
+    const basePrice = wholesaleData.value[0].price || 0;
+    skuTableData.value.forEach(sku => {
+      sku.price = basePrice;
+    });
+  }
+}
+// 处理销售模式切换
+function handleSalesModeChange() {
+  renderTableData(skuTableData.value);
+  // 如果切换到批发模式，同步价格
+  if (baseInfoForm.value.salesModel === 'WHOLESALE') {
+    syncWholesalePriceToSku();
+  }
+}
+function checkWholesaleNum(index) {
+  if (wholesaleData.value[index].num < 0) {
+    Message.error("购买数量必须大于0");
+    wholesaleData.value[index].num = 0;
+    return;
+  }
+  if (
+    index > 0 &&
+    wholesaleData.value[index - 1].num >= wholesaleData.value[index].num
+  ) {
+    Notice.error({
+      title: "在批发模式的销售规则中",
+      desc: "下一个购买数量必须大于上一个购买数量",
+      duration: 5,
+    });
+    wholesaleData.value[index].num = wholesaleData.value[index - 1].num + 1;
+  }
+  renderTableData(skuTableData.value);
+  syncWholesalePriceToSku();
+}
+function checkWholesalePrice(index) {
+  if (wholesaleData.value[index].price < 0) {
+    Message.error("商品单价必须大于0");
+    wholesaleData.value[index].price = 0;
+    return;
+  }
+  if (
+    index > 0 &&
+    wholesaleData.value[index - 1].price <= wholesaleData.value[index].price
+  ) {
+    Notice.error({
+      title: "在批发模式的销售规则中",
+      desc: "下一个商品单价必须小于上一个商品单价",
+      duration: 5,
+    });
+    wholesaleData.value[index].price =
+      wholesaleData.value[index - 1].price - 0.01;
+  }
+  renderTableData(skuTableData.value);
+  syncWholesalePriceToSku();
+}
+// 商品图片上传成功
+function handleSuccessGoodsPicture(res, file) {
+  if (file.response) {
+    file.url = file.response.result;
+    baseInfoForm.value.goodsGalleryFiles.push(file.url);
+  }
+}
+// 图片格式不正确
+function handleFormatError(file) {
+  Notice.warning({
+    title: "文件格式不正确",
+    desc: "文件 " + file.name + " 的格式不正确",
+  });
+}
+function beforeVideoUpload(file) {
+  const allowTypes = ["avi", "wmv", "mpeg", "mp4", "mov"];
+  const ext = (file.name.split(".").pop() || "").toLowerCase();
+  if (!allowTypes.includes(ext)) {
+    Message.warning("视频格式仅支持 avi、wmv、mpeg、mp4、mov");
+    return false;
+  }
+  const maxSize = 50 * 1024 * 1024;
+  if (file.size > maxSize) {
+    Message.warning("视频大小不能超过 50MB");
+    return false;
+  }
+  loadingVideo.value = true;
+}
+function handleSuccessGoodsVideo(res, file) {
+  if (file.response) {
+    file.url = file.response.result;
+    baseInfoForm.value.goodsVideo = file.url;
+  }
+  loadingVideo.value = false;
+}
+function handleRemoveGoodsVideo() {
+  baseInfoForm.value.goodsVideo = "";
+  showGoodsVideo.value = false;
+  if (goodsVideo.value && typeof goodsVideo.value.destroy === "function") {
+    goodsVideo.value.destroy();
+  }
+  goodsVideo.value = "";
+}
+// 图片大小不正确
+function handleMaxSize(size = 2) {
+  Notice.warning({
+    title: "超过文件大小限制",
+    desc: `图片大小不能超过${size}MB`,
+  });
+}
+// 图片上传前钩子
+function handleBeforeUploadGoodsPicture(file) {
+  const check = baseInfoForm.value.goodsGalleryFiles.length < 5;
+  if (!check) {
+    Notice.warning({
+      title: "图片数量不能大于五张",
+    });
+    return false;
+  }
+}
+// sku图片上传前钩子
+function handleBeforeUpload(file) {
+  const check =
+    selectedSku.value.images !== undefined &&
+    selectedSku.value.images.length > 5;
+  if (check) {
+    Notice.warning({ title: "图片数量不能大于五张" });
+    return false;
+  }
+}
+
+/** 无品牌时后端用 0，选择器空值用空字符串，避免 el-select 直接显示 0 */
+function normalizeBrandId(id) {
+  if (id === 0 || id === "0" || id == null || id === "") return "";
+  return id;
+}
+
+/** 查询商品品牌列表 */
+function getGoodsBrandList(type) {
+  API_GOODS.getCategoryBrandListDataSeller(categoryId.value).then(
+    (response) => {
+      brandList.value = response;
+      if (type === 'localRefresh') {
+        Message.success("刷新成功");
       }
     }
-  },
-  methods: {
-    /** E_COUPON / APPOINTMENT 提交固定传 0，预约品库存走 slot_capacity */
-    resolveSubmitQuantity(sku) {
-      if (this.isECouponGoods || this.isAppointmentGoods) {
-        return 0;
-      }
-      return sku.quantity;
-    },
-    defaultSkuQuantity() {
-      return this.isECouponGoods || this.isAppointmentGoods ? 0 : "";
-    },
-    openAppointmentCapacity(row) {
-      this.$refs.appointmentPanel?.openSkuCapacityDialog(row);
-    },
-    draggableItemKey(item) {
-      return item;
-    },
-    // 选择图片modal
-    handleCLickImg(val, index) {
-      this.selectedImage = [];
-      this.picModelFlag = true;
-      this.selectedFormBtnName = val;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    handleLoadingSkuData() {
-      this.needToloadSku = false
-      this.renderTableData(this.skuTableData)
-    },
-    changeSkuOpenImage() {
-      this.skuTableData.forEach(item => {
-        item.images = []
-      })
-      if (this.skuInfo.length > 0 && this.skuInfo[0].spec_values.length > 0) {
-        this.skuInfo[0].spec_values.forEach(item => {
-          item.images = []
-        })
-      }
-    },
-    // ship大小不正确
-    handleVideoMaxSize(file) {
-      this.$Notice.warning({
-        title: "超过文件大小限制",
-        desc: "视频大小不能超过10MB",
-      });
-    },
-    parseOssSelectionUrl(item) {
-      if (!item) return "";
-      if (typeof item === "string") {
-        const index = item.indexOf(",");
-        return index >= 0 ? item.slice(index + 1) : item;
-      }
-      return item.url || "";
-    },
-    // 图片选择后回调
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) {
-        return;
-      }
-      if (this.selectedFormBtnName === "selectedSkuImages") {
-        if (!this.selectedSku.images) {
-          this.selectedSku.images = [];
-        }
-        this.selectedSku.images.push(val.url);
-      } else {
-        this.baseInfoForm[this.selectedFormBtnName].push(val.url);
-      }
-    },
-    confirmUrls() {
-      const urls = (this.selectedImage || [])
-        .map((item) => this.parseOssSelectionUrl(item))
-        .filter(Boolean);
-      if (!urls.length) {
-        this.$Message.warning("请选择图片");
-        return;
-      }
-      if (this.selectedFormBtnName === "selectedSkuImages") {
-        if (!this.selectedSku.images) {
-          this.selectedSku.images = [];
-        }
-        urls.forEach((url) => {
-          if (this.selectedSku.images.length < 5) {
-            this.selectedSku.images.push(url);
-          }
-        });
-      } else if (this.selectedFormBtnName === "goodsGalleryFiles") {
-        urls.forEach((url) => {
-          if (this.baseInfoForm.goodsGalleryFiles.length < 5) {
-            this.baseInfoForm.goodsGalleryFiles.push(url);
-          }
-        });
-      } else if (this.selectedFormBtnName) {
-        const target = this.baseInfoForm[this.selectedFormBtnName];
-        if (Array.isArray(target)) {
-          urls.forEach((url) => target.push(url));
-        }
-      }
-      this.selectedImage = [];
-      this.picModelFlag = false;
-    },
-    // 局部刷新
-    refresh(v) {
-      if (v == 'template') {
-        this.GET_ShipTemplate('localRefresh');
-      } else if (v == 'goodsUnit') {
-        this.goodsUnitList = []
-        this.GET_GoodsUnit('localRefresh');
-      } else {
-        this.getGoodsBrandList('localRefresh');
-      }
-    },
-    getImages(v) {
-      this.previewImage = v;
-      this.visible = true;
-    },
-    mouseOver(v) {
-      this.showContent = true
-      this.listImages = v
-      if (this.listImages.images.length <= 0) {
-        this.contentImage = '规格专属图片暂无'
-      } else {
-        this.contentImage = '当前规格专属图片'
-      }
-    },
-    mouseLeave() {
-      // this.showContent = false
-    },
-    getParamOptions(options) {
-      if (!options) return [];
-      return String(options)
-        .split(",")
-        .map((i) => i.trim())
-        .filter((i) => i);
-    },
-    selectParams(params, value, paramsIndex) {
-      if (!Array.isArray(this.baseInfoForm.goodsParamsDTOList)) {
-        this.baseInfoForm.goodsParamsDTOList = [];
-      }
-      
-      // 确保baseInfoForm.goodsParams存在
-      if (!Array.isArray(this.baseInfoForm.goodsParams)) {
-        this.baseInfoForm.goodsParams = [];
-      }
-      
-      // 确保对应索引的参数项存在
-      if (!this.baseInfoForm.goodsParams[paramsIndex]) {
-        this.baseInfoForm.goodsParams[paramsIndex] = {};
-      }
-      
-      // 更新baseInfoForm中的值用于验证
-      this.baseInfoForm.goodsParams[paramsIndex].paramValue = value || '';
-      
-      const list = this.baseInfoForm.goodsParamsDTOList;
-      const paramId = params && params.id ? String(params.id) : "";
-      const index = list.findIndex((i) => String(i.paramId) === paramId);
+  ).catch(() => {
+    if (type === 'localRefresh') {
+      Message.error("刷新失败，请重试");
+    }
+  });
+}
 
-      if (!value && value !== 0) {
-        if (index >= 0) {
-          list.splice(index, 1);
+// 获取商品单位
+function GET_GoodsUnit(type) {
+  API_GOODS.getGoodsUnitList(params).then((res) => {
+    if (res.success) {
+      goodsUnitList.value.push(...res.result.records.map((i) => i.name));
+      total.value = res.result.total;
+    }
+    if (type === 'localRefresh' && res.success) {
+      Message.success("刷新成功");
+    } else if (type === 'localRefresh') {
+      Message.error("刷新失败，请重试");
+    }
+  });
+}
+// 获取当前店铺分类
+function GET_ShopGoodsLabel() {
+  API_GOODS.getShopGoodsLabelListSeller().then((res) => {
+    if (res.success) {
+      const shopCategories = !baseInfoForm.value.storeCategoryPath
+        ? []
+        : baseInfoForm.value.storeCategoryPath.split(",").filter(Boolean);
+
+      shopCategory.value = res.result.map((i) => {
+        i.title = i.labelName;
+        i.expand = false;
+        i.children = i.children.map((j) => {
+          j.title = j.labelName;
+          j.expand = false;
+          return j;
+        });
+        return i;
+      });
+
+      nextTick(() => {
+        tree.value?.setCheckedKeys(shopCategories);
+      });
+    }
+  });
+}
+// 编辑时获取商品信息
+async function GET_GoodData(id, draftId) {
+  let response = {};
+  if (draftId) {
+    response = await API_GOODS.getDraftGoodsDetail(draftId);
+  } else {
+    response = await API_GOODS.getGoods(id);
+    goodsId = response.result.id;
+  }
+
+  response.result.recommend
+    ? (response.result.recommend = 1)
+    : (response.result.recommend = 0);
+  invalidGoodsGalleryFiles.value = [];
+  baseInfoForm.value = { ...baseInfoForm.value, ...response.result };
+  baseInfoForm.value.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
+  baseInfoForm.value.brandId = normalizeBrandId(baseInfoForm.value.brandId);
+  categoryId.value = response.result.categoryPath.split(",")[2];
+
+  // 如果是复制商品，需要清除ID，确保提交时作为新商品
+  if (route.query.copyId) {
+    baseInfoForm.value.id = "";
+  }
+
+  if (
+    response.result.goodsGalleryList &&
+    response.result.goodsGalleryList.length > 0
+  ) {
+    baseInfoForm.value.goodsGalleryFiles =
+      response.result.goodsGalleryList.map((i) => {
+        return i;
+      });
+  }
+
+  if (
+    response.result.wholesaleList &&
+    response.result.wholesaleList.length > 0
+  ) {
+    wholesaleData.value = response.result.wholesaleList;
+  }
+
+  if (isECouponGoods.value || isAppointmentGoods.value) {
+    baseInfoForm.value.salesModel = "RETAIL";
+  }
+
+  if (response.result.salesModel === "WHOLESALE" && showSalesModel.value) {
+    baseInfoForm.value.weight = response.result.skuList[0].weight;
+  }
+
+  renderGoodsDetailSku(response.result.skuList);
+  nextTick(() => {
+    if (isAppointmentGoods.value) {
+      appointmentPanel.value?.hydrateFromGoods(response.result);
+    }
+  });
+
+  /** 查询品牌列表 */
+  getGoodsBrandList();
+
+  /** 查询店铺商品分类 */
+  GET_ShopGoodsLabel();
+  GET_GoodsUnit();
+
+  if (props.firstData.category) {
+    const cateId = [];
+    baseInfoForm.value.categoryName = [];
+    props.firstData.category.forEach((cate) => {
+      baseInfoForm.value.categoryName.push(cate.name);
+      cateId.push(cate.id);
+    });
+    categoryId.value = cateId[2];
+
+    baseInfoForm.value.categoryPath = cateId.toString();
+  }
+  props.firstData.goodsType &&
+    (baseInfoForm.value.goodsType = props.firstData.goodsType);
+
+  /** 查询商品参数 */
+  GET_GoodsParams();
+
+  nextTick(() => {
+    editorRef.value?.setContent?.(baseInfoForm.value.intro);
+    introEditorRef.value?.setContent?.(baseInfoForm.value.mobileIntro);
+  });
+}
+/** TinyMCE 的 v-model 可能滞后，提交前从编辑器实例取最新 HTML */
+function syncIntroFromEditors() {
+  const pcEditor = editorRef.value;
+  const mobileEditor = introEditorRef.value;
+  if (pcEditor?.getContent) {
+    baseInfoForm.value.intro = pcEditor.getContent() ?? "";
+  }
+  if (mobileEditor?.getContent) {
+    baseInfoForm.value.mobileIntro = mobileEditor.getContent() ?? "";
+  }
+}
+// 渲染sku数据
+function renderGoodsDetailSku(skuList) {
+  let skus = [];
+  let skusInfo = [];
+  skuList.map((e) => {
+    let sku = {
+      id: e.id,
+      sn: e.sn,
+      price: e.price,
+      // cost: e.cost,
+      quantity: e.quantity,
+      // alertQuantity: e.alertQuantity,
+      weight: e.weight,
+    };
+    if (e.goodsGalleryList && e.goodsGalleryList.length >= 1) {
+      openImage.value = true
+    } else {
+      openImage.value = false
+    }
+    e.specList.forEach((u) => {
+      if (u.specName === "images") {
+        sku.images = u.specImage;
+      } else {
+        sku[u.specName] = u.specValue;
+        if (
+          !skusInfo.some((s) => s.name === u.specName) &&
+          !ignoreColumn.includes(u.specName)
+        ) {
+          skusInfo.push({
+            name: u.specName,
+            spec_id: u.specNameId,
+            spec_values: [
+              {
+                id: u.specValueId,
+                name: u.specName,
+                value: u.specValue || "",
+                images: e.goodsGalleryList || []
+              },
+            ],
+          });
+        } else {
+          skusInfo = skusInfo.map((sk) => {
+            if (
+              !sk.spec_values.some((s) => s.value === u.specValue) &&
+              sk.name === u.specName
+            ) {
+              sk.spec_values.push({
+                id: u.specValueId,
+                name: u.specName,
+                value: u.specValue || "",
+                images: e.goodsGalleryList || []
+              });
+            }
+            if (!sk.spec_id && u.specName === "specId") {
+              sk.spec_id = u.specValue;
+            }
+            return sk;
+          });
         }
-        // 清空表单项的值
-        params.paramValue = '';
+      }
+    });
+    skus.push(sku);
+  });
+  skuInfo.value = skusInfo;
+  skuTableData.value = skus;
+  renderTableData(skus);
+}
+// 将pc商品描述同步给移动端
+function promiseIntroEditor() {
+  syncIntroFromEditors();
+  const pcContent = baseInfoForm.value.intro ?? "";
+  baseInfoForm.value.mobileIntro = pcContent;
+  nextTick(() => {
+    introEditorRef.value?.setContent?.(pcContent);
+  });
+}
+
+/** 根据当前分类id查询商品应包含的参数 */
+function GET_GoodsParams() {
+  goodsParams.value = [];
+  params_panel.value = [];
+  API_GOODS.getCategoryParamsListDataSeller(categoryId.value).then(
+    (response) => {
+      const list = Array.isArray(response)
+        ? response
+        : Array.isArray(response?.result)
+          ? response.result
+          : [];
+      if (!list.length) {
         return;
       }
-      const newItem = {
-        paramId,
-        paramName: params.paramName,
-        paramValue: value,
-        isIndex: params.isIndex || 0,
-        required: params.required || 0,
-        sort: params.sort || 0,
+
+      if (!Array.isArray(baseInfoForm.value.goodsParamsDTOList)) {
+        baseInfoForm.value.goodsParamsDTOList = [];
+      }
+
+      const mergedSelected = new Map();
+      const selectedList = [];
+      baseInfoForm.value.goodsParamsDTOList.forEach((item) => {
+        if (!item) return;
+        if (Array.isArray(item.goodsParamsItemDTOList)) {
+          selectedList.push(...item.goodsParamsItemDTOList);
+        } else if (item.paramId || item.paramName) {
+          selectedList.push(item);
+        }
+      });
+      selectedList.forEach((param) => {
+        if (!param) return;
+        const key = param.paramId ? String(param.paramId) : param.paramName;
+        if (!key) return;
+        mergedSelected.set(key, param);
+      });
+
+      baseInfoForm.value.goodsParamsDTOList = Array.from(mergedSelected.values()).map((p) => {
+        return {
+          paramId: p.paramId ? String(p.paramId) : "",
+          paramName: p.paramName,
+          paramValue: p.paramValue,
+          isIndex: p.isIndex || 0,
+          required: p.required || 0,
+          sort: p.sort || 0,
+        };
+      });
+
+      const findSelectedValue = (param) => {
+        if (!param) return undefined;
+        const byId = mergedSelected.get(String(param.id));
+        if (byId) return byId.paramValue;
+        const byName = mergedSelected.get(param.paramName);
+        if (byName) return byName.paramValue;
+        return undefined;
       };
 
-      if (index >= 0) {
-        list[index] = newItem;
-      } else {
-        list.push(newItem);
-      }
-
-      // 同步更新表单项的值
-      params.paramValue = value;
-    },
-    // 编辑sku图片
-    editSkuPicture(row) {
-      this.showContent = false
-      if (row.images && row.images.length > 0) {
-        this.previewPicture = row.images[0];
-      }
-      this.selectedSku = row;
-      this.showSkuPicture = true;
-    },
-    // 初始化视频操作
-    async initVideo() {
-      if (this.baseInfoForm.goodsVideo) {
-        const { default: DPlayer } = await import("dplayer");
-        this.goodsVideo = new DPlayer({
-          container: document.getElementById('dplayer'),
-          video: {
-            url: this.baseInfoForm.goodsVideo,
-            pic: ''
-          },
-        });
-      }
-    },
-    pre() {
-      // 上一步
-      this.$parent.activestep--;
-    },
-    handleTabChange(name) {
-      if (name !== "specs") {
-        return;
-      }
-      this.$nextTick(() => {
-        this.$refs.editor?.getEditor?.()?.dispatch?.("ResizeEditor");
-        this.$refs.introEditor?.getEditor?.()?.dispatch?.("ResizeEditor");
-      });
-    },
-    getScrollParent() {
-      let node = this.$el && this.$el.parentElement;
-      while (node && node !== document.body) {
-        const overflowY = window.getComputedStyle(node).overflowY;
-        if (overflowY === "auto" || overflowY === "scroll") {
-          return node;
-        }
-        node = node.parentElement;
-      }
-      return null;
-    },
-    bindPublishScroll() {
-      this.unbindPublishScroll();
-      this.scrollParent = this.getScrollParent();
-      if (this.scrollParent) {
-        this._onPublishScroll = () => this.onPublishScroll();
-        this.scrollParent.addEventListener("scroll", this._onPublishScroll, { passive: true });
-      }
-    },
-    unbindPublishScroll() {
-      if (this.scrollParent && this._onPublishScroll) {
-        this.scrollParent.removeEventListener("scroll", this._onPublishScroll);
-      }
-      this.scrollParent = null;
-    },
-    onPublishScroll() {
-      if (this.scrollingByClick) return;
-      if (this._scrollTick) return;
-      this._scrollTick = true;
-      requestAnimationFrame(() => {
-        this._scrollTick = false;
-        this.syncActiveTabByScroll();
-      });
-    },
-    syncActiveTabByScroll() {
-      const scroller = this.scrollParent || this.getScrollParent();
-      if (!scroller) return;
-      const navHeight = (this.$refs.sectionNav && this.$refs.sectionNav.offsetHeight) || 48;
-      const marker = scroller.getBoundingClientRect().top + navHeight + 12;
-      let current = "basic";
-      this.sectionTabs.forEach((tab) => {
-        const el = document.getElementById(`goods-section-${tab.name}`);
-        if (el && el.getBoundingClientRect().top <= marker) {
-          current = tab.name;
-        }
-      });
-      if (this.activeTab !== current) {
-        this.activeTab = current;
-        this.handleTabChange(current);
-      }
-    },
-    sectionNo(name) {
-      const index = this.sectionTabs.findIndex((tab) => tab.name === name);
-      return index >= 0 ? index + 1 : "";
-    },
-    jumpToTab(name) {
-      this.activeTab = name;
-      this.scrollingByClick = true;
-      this.handleTabChange(name);
-      this.$nextTick(() => {
-        const el = document.getElementById(`goods-section-${name}`);
-        const scroller = this.scrollParent || this.getScrollParent();
-        if (!el || !scroller) {
-          this.scrollingByClick = false;
-          return;
-        }
-        const navHeight = (this.$refs.sectionNav && this.$refs.sectionNav.offsetHeight) || 48;
-        const top =
-          el.getBoundingClientRect().top -
-          scroller.getBoundingClientRect().top +
-          scroller.scrollTop -
-          navHeight -
-          8;
-        scroller.scrollTo({ top: Math.max(top, 0), behavior: "smooth" });
-        window.clearTimeout(this._scrollClickTimer);
-        this._scrollClickTimer = window.setTimeout(() => {
-          this.scrollingByClick = false;
-        }, 600);
-      });
-    },
-    tabForInvalidFields(fields) {
-      const keys = Object.keys(fields || {});
-      for (const key of keys) {
-        if (key === "goodsGalleryFiles" || key === "goodsVideo" || key === "intro" || key === "skuList") {
-          return "specs";
-        }
-        if (key === "salesModel" || key === "wholesaleRule") {
-          return "price";
-        }
-        if (key === "shopCategory" || key === "templateId" || key === "weight") {
-          return "other";
-        }
-      }
-      return "basic";
-    },
-    // 预览图片
-    handleView(url) {
-      this.previewPicture = url;
-      this.visible = true;
-    },
-    // 移除已选图片
-    handleRemove(item, index) {
-      item.splice(index, 1)
-      this.previewPicture = "";
-    },
-    // 查看商品大图
-    handleViewGoodsPicture(url) {
-      if (this.invalidGoodsGalleryFiles.includes(url)) {
-        this.$Message.warning("图片链接已失效，请重新上传主图");
-        return;
-      }
-      this.previewGoodsPicture = url;
-      this.goodsPictureVisible = true;
-    },
-    handleGoodsPictureError(event, url) {
-      if (!this.invalidGoodsGalleryFiles.includes(url)) {
-        this.invalidGoodsGalleryFiles.push(url);
-      }
-      const img = event && event.target;
-      if (!img || img.dataset.fallbackApplied) return;
-      img.dataset.fallbackApplied = "true";
-      img.src = this.goodsPictureFallback;
-    },
-    // 移除商品图片
-    handleRemoveGoodsPicture(file) {
-      this.baseInfoForm.goodsGalleryFiles =
-        this.baseInfoForm.goodsGalleryFiles.filter((i) => i !== file);
-      this.invalidGoodsGalleryFiles =
-        this.invalidGoodsGalleryFiles.filter((i) => i !== file);
-    },
-    assignSkuTableIndex() {
-      this.skuTableData.forEach((row, index) => {
-        row._index = index;
-      });
-    },
-    // 更新sku图片
-    updateSkuPicture() {
-      this.baseInfoForm.regeneratorSkuFlag = true;
-      let _index = this.selectedSku._index;
-      if (_index === undefined || _index === null) {
-        _index = this.skuTableData.indexOf(this.selectedSku);
-      }
-      if (_index >= 0) {
-        this.skuTableData[_index] = this.selectedSku;
-      }
-    },
-    // sku图片上传成功
-    handleSuccess(res, file, images) {
-      if (file.response) {
-        file.url = file.response.result;
-        if (images) {
-          images.push(file.url);
-        }
-        this.previewPicture = file.url;
-      }
-    },
-    handleAddWholesaleData() {
-      if (
-        this.wholesaleData.length === 1 &&
-        (this.wholesaleData[0].price <= 0 || this.wholesaleData[0].num <= 0)
-      ) {
-        this.$Message.error("请输入正确的销售规则");
-        return;
-      }
-      if (this.wholesaleData.length < 3) {
-        this.wholesaleData.push({
-          price:
-            Number(this.wholesaleData[this.wholesaleData.length - 1].price) -
-            0.01,
-          num:
-            Number(this.wholesaleData[this.wholesaleData.length - 1].num) + 1,
-          goodsId: this.goodsId,
-        });
-      }
-      this.renderTableData(this.skuTableData);
-      this.syncWholesalePriceToSku();
-    },
-    wholesaleRulePreview(row) {
-      const unit = this.baseInfoForm.goodsUnit || "";
-      const unitText = unit ? `/${unit}` : "";
-      return `当商品购买数量 ≥${row.num} 时，售价为 ￥${row.price}${unitText}`;
-    },
-    handleDeleteWholesaleData(index) {
-      this.wholesaleData.splice(index, 1);
-      this.renderTableData(this.skuTableData);
-      this.syncWholesalePriceToSku();
-    },
-    // 同步批发价格到SKU
-    syncWholesalePriceToSku() {
-      if (this.baseInfoForm.salesModel === 'WHOLESALE' && this.wholesaleData.length > 0) {
-        // 使用第一个批发价格作为SKU的基础价格
-        const basePrice = this.wholesaleData[0].price || 0;
-        this.skuTableData.forEach(sku => {
-          sku.price = basePrice;
-        });
-      }
-    },
-    // 处理销售模式切换
-    handleSalesModeChange() {
-      this.renderTableData(this.skuTableData);
-      // 如果切换到批发模式，同步价格
-      if (this.baseInfoForm.salesModel === 'WHOLESALE') {
-        this.syncWholesalePriceToSku();
-      }
-    },
-    checkWholesaleNum(index) {
-      if (this.wholesaleData[index].num < 0) {
-        this.$Message.error("购买数量必须大于0");
-        this.wholesaleData[index].num = 0;
-        return;
-      }
-      if (
-        index > 0 &&
-        this.wholesaleData[index - 1].num >= this.wholesaleData[index].num
-      ) {
-        this.$Notice.error({
-          title: "在批发模式的销售规则中",
-          desc: "下一个购买数量必须大于上一个购买数量",
-          duration: 5,
-        });
-        this.wholesaleData[index].num = this.wholesaleData[index - 1].num + 1;
-      }
-      this.renderTableData(this.skuTableData);
-      this.syncWholesalePriceToSku();
-    },
-    checkWholesalePrice(index) {
-      if (this.wholesaleData[index].price < 0) {
-        this.$Message.error("商品单价必须大于0");
-        this.wholesaleData[index].price = 0;
-        return;
-      }
-      if (
-        index > 0 &&
-        this.wholesaleData[index - 1].price <= this.wholesaleData[index].price
-      ) {
-        this.$Notice.error({
-          title: "在批发模式的销售规则中",
-          desc: "下一个商品单价必须小于上一个商品单价",
-          duration: 5,
-        });
-        this.wholesaleData[index].price =
-          this.wholesaleData[index - 1].price - 0.01;
-      }
-      this.renderTableData(this.skuTableData);
-      this.syncWholesalePriceToSku();
-    },
-    // 商品图片上传成功
-    handleSuccessGoodsPicture(res, file) {
-      if (file.response) {
-        file.url = file.response.result;
-        this.baseInfoForm.goodsGalleryFiles.push(file.url);
-      }
-    },
-    // 图片格式不正确
-    handleFormatError(file) {
-      this.$Notice.warning({
-        title: "文件格式不正确",
-        desc: "文件 " + file.name + " 的格式不正确",
-      });
-    },
-    beforeVideoUpload(file) {
-      const allowTypes = ["avi", "wmv", "mpeg", "mp4", "mov"];
-      const ext = (file.name.split(".").pop() || "").toLowerCase();
-      if (!allowTypes.includes(ext)) {
-        this.$Message.warning("视频格式仅支持 avi、wmv、mpeg、mp4、mov");
-        return false;
-      }
-      const maxSize = 50 * 1024 * 1024;
-      if (file.size > maxSize) {
-        this.$Message.warning("视频大小不能超过 50MB");
-        return false;
-      }
-      this.loadingVideo = true;
-    },
-    handleSuccessGoodsVideo(res, file) {
-      if (file.response) {
-        file.url = file.response.result;
-        this.baseInfoForm.goodsVideo = file.url;
-      }
-      this.loadingVideo = false;
-    },
-    handleRemoveGoodsVideo() {
-      this.baseInfoForm.goodsVideo = "";
-      this.showGoodsVideo = false;
-      if (this.goodsVideo && typeof this.goodsVideo.destroy === "function") {
-        this.goodsVideo.destroy();
-      }
-      this.goodsVideo = "";
-    },
-    // 图片大小不正确
-    handleMaxSize(size = 2) {
-      this.$Notice.warning({
-        title: "超过文件大小限制",
-        desc: `图片大小不能超过${size}MB`,
-      });
-    },
-    // 图片上传前钩子
-    handleBeforeUploadGoodsPicture(file) {
-      const check = this.baseInfoForm.goodsGalleryFiles.length < 5;
-      if (!check) {
-        this.$Notice.warning({
-          title: "图片数量不能大于五张",
-        });
-        return false;
-      }
-    },
-    // sku图片上传前钩子
-    handleBeforeUpload(file) {
-      const check =
-        this.selectedSku.images !== undefined &&
-        this.selectedSku.images.length > 5;
-      if (check) {
-        this.$Notice.warning({ title: "图片数量不能大于五张" });
-        return false;
-      }
-    },
-
-    /** 无品牌时后端用 0，选择器空值用空字符串，避免 el-select 直接显示 0 */
-    normalizeBrandId(id) {
-      if (id === 0 || id === "0" || id == null || id === "") return "";
-      return id;
-    },
-
-    /** 查询商品品牌列表 */
-    getGoodsBrandList(type) {
-      API_GOODS.getCategoryBrandListDataSeller(this.categoryId).then(
-        (response) => {
-          this.brandList = response;
-          if (type === 'localRefresh') {
-            this.$Message.success("刷新成功");
+      const isGrouped = list[0] && Array.isArray(list[0].params);
+      const flatParams = isGrouped
+        ? list.reduce((acc, g) => {
+          if (g && Array.isArray(g.params)) {
+            acc.push(...g.params);
           }
-        }
-      ).catch(() => {
-        if (type === 'localRefresh') {
-          this.$Message.error("刷新失败，请重试");
-        }
-      });
-    },
+          return acc;
+        }, [])
+        : list;
 
-    // 获取商品单位
-    GET_GoodsUnit(type) {
-      API_GOODS.getGoodsUnitList(this.params).then((res) => {
-        if (res.success) {
-          this.goodsUnitList.push(...res.result.records.map((i) => i.name));
-          this.total = res.result.total;
-        }
-        if (type === 'localRefresh' && res.success) {
-          this.$Message.success("刷新成功");
-        } else if (type === 'localRefresh') {
-          this.$Message.error("刷新失败，请重试");
-        }
-      });
-    },
-    // 获取当前店铺分类
-    GET_ShopGoodsLabel() {
-      API_GOODS.getShopGoodsLabelListSeller().then((res) => {
-        if (res.success) {
-          const shopCategories = !this.baseInfoForm.storeCategoryPath
-            ? []
-            : this.baseInfoForm.storeCategoryPath.split(",").filter(Boolean);
-
-          this.shopCategory = res.result.map((i) => {
-            i.title = i.labelName;
-            i.expand = false;
-            i.children = i.children.map((j) => {
-              j.title = j.labelName;
-              j.expand = false;
-              return j;
-            });
-            return i;
-          });
-
-          this.$nextTick(() => {
-            this.$refs.tree?.setCheckedKeys(shopCategories);
-          });
-        }
-      });
-    },
-    // 编辑时获取商品信息
-    async GET_GoodData(id, draftId) {
-      let response = {};
-      if (draftId) {
-        response = await API_GOODS.getDraftGoodsDetail(draftId);
-      } else {
-        response = await API_GOODS.getGoods(id);
-        this.goodsId = response.result.id;
-      }
-
-      response.result.recommend
-        ? (response.result.recommend = 1)
-        : (response.result.recommend = 0);
-      this.invalidGoodsGalleryFiles = [];
-      this.baseInfoForm = { ...this.baseInfoForm, ...response.result };
-      this.baseInfoForm.release = 1; //即使是被放入仓库，修改的时候也会显示会立即发布
-      this.baseInfoForm.brandId = this.normalizeBrandId(this.baseInfoForm.brandId);
-      this.categoryId = response.result.categoryPath.split(",")[2];
-
-      // 如果是复制商品，需要清除ID，确保提交时作为新商品
-      if (this.$route.query.copyId) {
-        this.baseInfoForm.id = "";
-      }
-
-      if (
-        response.result.goodsGalleryList &&
-        response.result.goodsGalleryList.length > 0
-      ) {
-        this.baseInfoForm.goodsGalleryFiles =
-          response.result.goodsGalleryList.map((i) => {
-            return i;
-          });
-      }
-
-      if (
-        response.result.wholesaleList &&
-        response.result.wholesaleList.length > 0
-      ) {
-        this.wholesaleData = response.result.wholesaleList;
-      }
-
-      if (this.isECouponGoods || this.isAppointmentGoods) {
-        this.baseInfoForm.salesModel = "RETAIL";
-      }
-
-      if (response.result.salesModel === "WHOLESALE" && this.showSalesModel) {
-        this.baseInfoForm.weight = response.result.skuList[0].weight;
-      }
-
-      this.renderGoodsDetailSku(response.result.skuList);
-      this.$nextTick(() => {
-        if (this.isAppointmentGoods) {
-          this.$refs.appointmentPanel?.hydrateFromGoods(response.result);
-        }
-      });
-
-      /** 查询品牌列表 */
-      this.getGoodsBrandList();
-
-      /** 查询店铺商品分类 */
-      this.GET_ShopGoodsLabel();
-      this.GET_GoodsUnit();
-
-      if (this.firstData.category) {
-        const cateId = [];
-        this.baseInfoForm.categoryName = [];
-        this.firstData.category.forEach((cate) => {
-          this.baseInfoForm.categoryName.push(cate.name);
-          cateId.push(cate.id);
-        });
-        this.categoryId = cateId[2];
-
-        this.baseInfoForm.categoryPath = cateId.toString();
-      }
-      this.firstData.goodsType &&
-        (this.baseInfoForm.goodsType = this.firstData.goodsType);
-
-      /** 查询商品参数 */
-      this.GET_GoodsParams();
-
-      this.$nextTick(() => {
-        this.$refs.editor?.setContent?.(this.baseInfoForm.intro);
-        this.$refs.introEditor?.setContent?.(this.baseInfoForm.mobileIntro);
-      });
-    },
-    /** TinyMCE 的 v-model 可能滞后，提交前从编辑器实例取最新 HTML */
-    syncIntroFromEditors() {
-      const pcEditor = this.$refs.editor;
-      const mobileEditor = this.$refs.introEditor;
-      if (pcEditor?.getContent) {
-        this.baseInfoForm.intro = pcEditor.getContent() ?? "";
-      }
-      if (mobileEditor?.getContent) {
-        this.baseInfoForm.mobileIntro = mobileEditor.getContent() ?? "";
-      }
-    },
-    // 渲染sku数据
-    renderGoodsDetailSku(skuList) {
-      let skus = [];
-      let skusInfo = [];
-      skuList.map((e) => {
-        let sku = {
-          id: e.id,
-          sn: e.sn,
-          price: e.price,
-          // cost: e.cost,
-          quantity: e.quantity,
-          // alertQuantity: e.alertQuantity,
-          weight: e.weight,
-        };
-        if (e.goodsGalleryList && e.goodsGalleryList.length >= 1) {
-          this.openImage = true
-        } else {
-          this.openImage = false
-        }
-        e.specList.forEach((u) => {
-          if (u.specName === "images") {
-            sku.images = u.specImage;
-          } else {
-            sku[u.specName] = u.specValue;
-            if (
-              !skusInfo.some((s) => s.name === u.specName) &&
-              !this.ignoreColumn.includes(u.specName)
-            ) {
-              skusInfo.push({
-                name: u.specName,
-                spec_id: u.specNameId,
-                spec_values: [
-                  {
-                    id: u.specValueId,
-                    name: u.specName,
-                    value: u.specValue || "",
-                    images: e.goodsGalleryList || []
-                  },
-                ],
-              });
-            } else {
-              skusInfo = skusInfo.map((sk) => {
-                if (
-                  !sk.spec_values.some((s) => s.value === u.specValue) &&
-                  sk.name === u.specName
-                ) {
-                  sk.spec_values.push({
-                    id: u.specValueId,
-                    name: u.specName,
-                    value: u.specValue || "",
-                    images: e.goodsGalleryList || []
-                  });
-                }
-                if (!sk.spec_id && u.specName === "specId") {
-                  sk.spec_id = u.specValue;
-                }
-                return sk;
-              });
-            }
-          }
-        });
-        skus.push(sku);
-      });
-      this.skuInfo = skusInfo;
-      this.skuTableData = skus;
-      this.renderTableData(skus);
-    },
-    // 将pc商品描述同步给移动端
-    promiseIntroEditor() {
-      this.syncIntroFromEditors();
-      const pcContent = this.baseInfoForm.intro ?? "";
-      this.baseInfoForm.mobileIntro = pcContent;
-      this.$nextTick(() => {
-        this.$refs.introEditor?.setContent?.(pcContent);
-      });
-    },
-
-    /** 根据当前分类id查询商品应包含的参数 */
-    GET_GoodsParams() {
-      this.goodsParams = [];
-      this.params_panel = [];
-      API_GOODS.getCategoryParamsListDataSeller(this.categoryId).then(
-        (response) => {
-          const list = Array.isArray(response)
-            ? response
-            : Array.isArray(response?.result)
-              ? response.result
-              : [];
-          if (!list.length) {
-            return;
-          }
-
-          if (!Array.isArray(this.baseInfoForm.goodsParamsDTOList)) {
-            this.baseInfoForm.goodsParamsDTOList = [];
-          }
-
-          const mergedSelected = new Map();
-          const selectedList = [];
-          this.baseInfoForm.goodsParamsDTOList.forEach((item) => {
-            if (!item) return;
-            if (Array.isArray(item.goodsParamsItemDTOList)) {
-              selectedList.push(...item.goodsParamsItemDTOList);
-            } else if (item.paramId || item.paramName) {
-              selectedList.push(item);
-            }
-          });
-          selectedList.forEach((param) => {
-            if (!param) return;
-              const key = param.paramId ? String(param.paramId) : param.paramName;
-              if (!key) return;
-              mergedSelected.set(key, param);
-          });
-
-          this.baseInfoForm.goodsParamsDTOList = Array.from(mergedSelected.values()).map((p) => {
-            return {
-              paramId: p.paramId ? String(p.paramId) : "",
-              paramName: p.paramName,
-              paramValue: p.paramValue,
-              isIndex: p.isIndex || 0,
-              required: p.required || 0,
-              sort: p.sort || 0,
-            };
-          });
-
-          const findSelectedValue = (param) => {
-            if (!param) return undefined;
-            const byId = mergedSelected.get(String(param.id));
-            if (byId) return byId.paramValue;
-            const byName = mergedSelected.get(param.paramName);
-            if (byName) return byName.paramValue;
-            return undefined;
+      goodsParams.value = flatParams
+        .map((p) => {
+          const selectedValue = findSelectedValue(p);
+          return {
+            ...p,
+            paramValue:
+              selectedValue !== undefined ? selectedValue : (p.paramValue || ""),
           };
+        })
+        .sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0));
 
-          const isGrouped = list[0] && Array.isArray(list[0].params);
-          const flatParams = isGrouped
-            ? list.reduce((acc, g) => {
-              if (g && Array.isArray(g.params)) {
-                acc.push(...g.params);
-              }
-              return acc;
-            }, [])
-            : list;
-
-          this.goodsParams = flatParams
-            .map((p) => {
-              const selectedValue = findSelectedValue(p);
-              return {
-                ...p,
-                paramValue:
-                  selectedValue !== undefined ? selectedValue : (p.paramValue || ""),
-              };
-            })
-            .sort((a, b) => Number(a.sort || 0) - Number(b.sort || 0));
-
-          // 初始化baseInfoForm.goodsParams用于表单验证
-          this.baseInfoForm.goodsParams = [];
-          this.goodsParams.forEach((param, index) => {
-            this.baseInfoForm.goodsParams[index] = {
-              paramValue: param.paramValue || ''
-            };
-          });
-
-          // 确保表单验证能正确初始化
-          this.$nextTick(() => {
-            if (this.$refs.baseInfoForm) {
-              this.$refs.baseInfoForm.clearValidate();
-            }
-          });
-        }
-      );
-    },
-    /** 添加规格项 */
-    addSkuItem() {
-      if (this.containsSameSkuItem) {
-        this.$Message.error("存在重复规格项！");
-        return;
-      }
-      if (this.containsSameSkuValue) {
-        this.$Message.error("存在重复规格值！");
-        return;
-      }
-      if (this.skuInfo.length >= 5) {
-        this.$Message.error("规格项不能大于5个！");
-        return;
-      }
-      if (this.skuInfo.find((i) => i.name === "")) {
-        this.$Message.error("规格项不能为空！");
-        return;
-      }
-      this.skuInfo.push({
-        spec_values: [{ name: "", value: "", images: [] }],
-        name: "",
-      });
-
-      this.renderTableData(this.skuTableData);
-    },
-    changeSkuItem(val) {
-      this.currentSkuItem = val;
-    },
-    // 编辑规格名
-    editSkuItem(val, index, item) {
-      if (this.skuTableData.find((i) => i[val])) {
-        this.$Message.error("已存在相同规格项！");
-        this.containsSameSkuItem = true;
-        return;
-      }
-      this.containsSameSkuItem = false;
-      if (this.zz(0, val) > 20) {
-        this.$Message.error("规格值最多十个字符长度！");
-        // val = val.toString().slice(0, 4);
-        this.skuInfo[index].name = this.countCharacters(val, 10);
-        this.$forceUpdate();// 调用该方法会触发组件的重新渲染
-        // return;
-      }
-      this.skuTableData = this.skuTableData.map((e) => {
-        e[val] = e[this.currentSkuItem];
-        delete e[this.currentSkuItem];
-        return e;
-      });
-
-      this.skuInfo[index].name = val;
-      this.skuInfo[index].spec_values.forEach((e) => {
-        e.name = val;
-      });
-      this.currentSkuItem = val;
-      this.renderTableData(this.skuTableData);
-    },
-    // 正则验证（中文超过10个英文数字超过20个）
-    zz(len, value) {
-      for (let i = 0; i < value.length; i++) {
-        //正则表达式判断中文
-        if (/[\u4e00-\u9fa5]/.test(value[i])) {
-          len += 2;
-        } else {
-          len++;
-        }
-      }
-      return len;
-    },
-    countCharacters(defaultStr, defaultNum) {
-      let str = '' + defaultStr || '',
-        num = +defaultNum || 0,
-        res = '',
-        length = 0;
-      if (!str || !num) {
-        return str;
-      }
-      // 循环字符串，判断长度 最少也会返回一个字
-      for (const i in str) {
-        res += str[i];
-        // 测试长度
-        length += /[\u4e00-\u9fa5]/.test(str[i]) ? 2 : 1;
-        // 如果长度大于设置长度 或者 循环到最后则终止循环
-        if (length >= num || +i == str.length - 1) {
-          break;
-        }
-      }
-      return res;
-    },
-    // 编辑规格值
-    skuValueChange(val, index, item) {
-
-      if (val.value === '') {
-        return;
-      }
-      if (this.skuTableData.find((i) => i[val.name] === val.value)) {
-        this.$Message.error("已存在相同规格值！");
-
-        this.skuInfo = cloneObj(this.skuInfoCopy);
-        this.skuTableData = cloneObj(this.skuTableDataCopy);
-        return;
-      }
-
-      this.containsSameSkuValue = false;
-      if (this.zz(0, val.value) > 20) {
-        this.$Message.error("规格值最多十个字符长度！");
-        // val.value = val.value.toString().slice(0, 4);
-        // 使用传入的 item 引用，避免对未定义的 $index 访问
-        item.spec_values[index].value = this.countCharacters(val.value, 10);
-        this.$forceUpdate();// 调用该方法会触发组件的重新渲染
-        // return;
-      }
-      this.lastEditSkuValue = val.value;
-      let curVal = this.currentSkuVal;
-      this.skuTableData = this.skuTableData.map((e) => {
-        if (e[val.name] === curVal) {
-          e[val.name] = val.value;
-        }
-        return e;
-      });
-      this.currentSkuVal = val.value;
-      this.skuTableDataCopy = cloneObj(this.skuTableData);
-      this.skuInfoCopy = cloneObj(this.skuInfo);
-      this.renderTableData(this.skuTableData);
-    },
-    // 获取焦点时，取得规格名对应的规格值
-    changeSkuVals(val, name) {
-      this.currentSkuVal = val.value;
-      if (name) {
-        this.skuData.forEach((e, index) => {
-          if (e === name) {
-            if (this.skuVal.length !== this.skuVals[index].length) {
-              this.skuVal = this.skuVals[index];
-            }
-          }
-        });
-      }
-    },
-    checkSkuVal(val, groupIndex, spec) {
-      if (val.value === "") {
-        // 内联错误提示，不使用弹窗
-        val._error = '规格值不能为空！';
-
-        // 如果规格项和规格名称存在，从表格数据中移除包含该空规格值的行
-        if (spec && spec.name && this.skuInfo[groupIndex]) {
-          // 从表格数据中过滤掉包含该空规格值的行
-          this.skuTableData = this.skuTableData.filter(item => {
-            return item[spec.name] !== val.value && item[spec.name] !== "";
-          });
-
-          // 重新渲染表格数据
-          this.renderTableData(this.skuTableData);
-        }
-      } else if (val._error) {
-        // 清除错误
-        delete val._error;
-        if (this.skuInfo[groupIndex]) {
-          this.skuInfo[groupIndex].spec_values = this.skuInfo[groupIndex].spec_values.filter((i) => i.value !== "");
-        }
-        // this.skuTableData = this.skuTableData.filter(
-        //   (e) => e[spec && spec.name] !== this.lastEditSkuValue
-        // );
-      }
-
-      // 判断是否存在重复规格值
-      if (!this.skuTableData.find((i) => i[val.name] === val.value)) {
-        this.skuTableDataCopy = cloneObj(this.skuTableData);
-        this.skuInfoCopy = cloneObj(this.skuInfo);
-      }
-    },
-    /** 移除当前规格项 进行数据变化*/
-    handleCloseSkuItem($index, item) {
-      if ($index === 0 && this.skuInfo.length === 1) {
-        this.skuInfo = [];
-        this.skuTableData = [];
-      } else {
-        // 获取当前操作的规格项，在规格项数组中的位置（下标）
-        let itemIndex = 0;
-        this.skuInfo.forEach((i, _index) => {
-          if (i.name === item.name) {
-            itemIndex = _index;
-          }
-        });
-        if (itemIndex === this.skuInfo.length - 1) {
-          // 如果当前为最后一个规格项，则按照下标按照最后一个规格项生成规则删除
-          // 最后一个规格项生成规格数据规则： 如为最后一个规格项，则在规格列表每隔1个中删除n(n为最后一个规格项的规格值列表数量 - 1)个规格数据，生成一个规格数据
-
-          // 除了当前操作的规格项的规格项列表，用于获取所有规格项的规格值列表总数
-          let filterSkuInfo = this.skuInfo.filter((i) => i.name !== item.name);
-          let index = 1;
-          let totalLength = 1;
-          filterSkuInfo.forEach((skuInfo) => {
-            totalLength *= skuInfo.spec_values.length;
-          });
-          // 去除第一个，因为第一个不需要生成新的规格数据
-          item.spec_values.splice(0, 1);
-          for (let i = 0; i < totalLength; i++) {
-            // 移除对应的规格数据
-            this.skuTableData.splice(index, item.spec_values.length);
-            index++;
-          }
-        } else {
-          // 当前规格项生成规格数据的时候，每次应该生成的条数
-          let currentNum =
-            this.skuInfo[this.skuInfo.length - 1].spec_values.length;
-          for (let i = this.skuInfo.length - 2; i > itemIndex; i--) {
-            // 计算每次删除规格数据后移动的位置（计算规则为，以最后的规格项的规格值数量为基础，乘以其他规格项的规格值总数）
-            currentNum *= this.skuInfo[i].spec_values.length;
-          }
-          // 移除对应规格数据的起始索引，起始位置为每次生成条数的下一位
-          let beginIndex = currentNum + 1;
-
-          let filterSkuInfo = this.skuInfo.filter((i) => i.name !== item.name);
-          let totalLength = 1;
-          filterSkuInfo.forEach((skuInfo) => {
-            totalLength *= skuInfo.spec_values.length;
-          });
-          for (let i = 0; i < totalLength; i++) {
-            // 移除对应的规格数据，删除数量为 每次生成条数 * （当前规格项的规格值总数 - 1）
-            this.skuTableData.splice(
-              beginIndex,
-              currentNum * (item.spec_values.length - 1)
-            );
-            beginIndex += currentNum;
-          }
-        }
-        this.skuInfo.splice($index, 1);
-
-        this.skuTableData = this.skuTableData.map((e) => {
-          delete e[item.name];
-          return e;
-        });
-      }
-      /**
-       * 渲染规格详细表格
-       */
-      this.renderTableData(this.skuTableData);
-    },
-    // 添加规格值的验证
-    validateEmpty(params) {
-      let flag = true;
-      params.forEach((item) => {
-        for (const key in item) {
-          if (item[key] !== "0" && !item.value) {
-            this.$Message.error("请必填规格项");
-            flag = false;
-            return false; // 终止程序
-          }
-        }
-      });
-
-      return flag;
-    },
-    /** 添加当前规格项的规格值*/
-    addSpec($index, item) {
-      if (!this.newSkuValues[$index]) {
-        this.$Message.error("请输入规格值");
-        return;
-      }
-
-      if (this.containsSameSkuItem) {
-        this.$Message.error("存在重复规格项！");
-        return;
-      }
-
-      if (item.spec_values.find((i) => i.value === this.newSkuValues[$index])) {
-        this.newSkuValues[$index] = "";
-        this.skuInfo = cloneObj(this.skuInfoCopy);
-        this.skuTableData = cloneObj(this.skuTableDataCopy);
-        this.$Message.error("存在重复规格值！");
-        this.containsSameSkuNewValue = true;
-        return;
-      }
-
-      if (this.validateEmpty(item.spec_values)) {
-        if (item.spec_values.length >= 10) {
-          this.$Message.error("规格值不能大于10个！");
-          return;
-        }
-        let itemValue = {
-          name: item.name,
-          value: this.newSkuValues[$index],
+      // 初始化baseInfoForm.goodsParams用于表单验证
+      baseInfoForm.value.goodsParams = [];
+      goodsParams.value.forEach((param, index) => {
+        baseInfoForm.value.goodsParams[index] = {
+          paramValue: param.paramValue || ''
         };
-        if (this.openImage) {
-          itemValue.images = []
-        } else {
-          itemValue.images = this.baseInfoForm.goodsGalleryFiles
+      });
+
+      // 确保表单验证能正确初始化
+      nextTick(() => {
+        if (baseInfoFormRef.value) {
+          baseInfoFormRef.value.clearValidate();
         }
-        item.spec_values.push(itemValue);
+      });
+    }
+  );
+}
+/** 添加规格项 */
+function addSkuItem() {
+  if (containsSameSkuItem.value) {
+    Message.error("存在重复规格项！");
+    return;
+  }
+  if (containsSameSkuValue.value) {
+    Message.error("存在重复规格值！");
+    return;
+  }
+  if (skuInfo.value.length >= 5) {
+    Message.error("规格项不能大于5个！");
+    return;
+  }
+  if (skuInfo.value.find((i) => i.name === "")) {
+    Message.error("规格项不能为空！");
+    return;
+  }
+  skuInfo.value.push({
+    spec_values: [{ name: "", value: "", images: [] }],
+    name: "",
+  });
 
-        // 生成新的规格组合
-        const newCombinations = this.generateSkuCombinations(this.skuInfo);
+  renderTableData(skuTableData.value);
+}
+function changeSkuItem(val) {
+  currentSkuItem = val;
+}
+// 编辑规格名
+function editSkuItem(val, index, item) {
+  if (skuTableData.value.find((i) => i[val])) {
+    Message.error("已存在相同规格项！");
+    containsSameSkuItem.value = true;
+    return;
+  }
+  containsSameSkuItem.value = false;
+  if (zz(0, val) > 20) {
+    Message.error("规格值最多十个字符长度！");
+    // val = val.toString().slice(0, 4);
+    skuInfo.value[index].name = countCharacters(val, 10);
+    proxy.$forceUpdate();// 调用该方法会触发组件的重新渲染
+    // return;
+  }
+  skuTableData.value = skuTableData.value.map((e) => {
+    e[val] = e[currentSkuItem];
+    delete e[currentSkuItem];
+    return e;
+  });
 
+  skuInfo.value[index].name = val;
+  skuInfo.value[index].spec_values.forEach((e) => {
+    e.name = val;
+  });
+  currentSkuItem = val;
+  renderTableData(skuTableData.value);
+}
+// 正则验证（中文超过10个英文数字超过20个）
+function zz(len, value) {
+  for (let i = 0; i < value.length; i++) {
+    //正则表达式判断中文
+    if (/[\u4e00-\u9fa5]/.test(value[i])) {
+      len += 2;
+    } else {
+      len++;
+    }
+  }
+  return len;
+}
+function countCharacters(defaultStr, defaultNum) {
+  let str = '' + defaultStr || '',
+    num = +defaultNum || 0,
+    res = '',
+    length = 0;
+  if (!str || !num) {
+    return str;
+  }
+  // 循环字符串，判断长度 最少也会返回一个字
+  for (const i in str) {
+    res += str[i];
+    // 测试长度
+    length += /[\u4e00-\u9fa5]/.test(str[i]) ? 2 : 1;
+    // 如果长度大于设置长度 或者 循环到最后则终止循环
+    if (length >= num || +i == str.length - 1) {
+      break;
+    }
+  }
+  return res;
+}
+// 编辑规格值
+function skuValueChange(val, index, item) {
+
+  if (val.value === '') {
+    return;
+  }
+  if (skuTableData.value.find((i) => i[val.name] === val.value)) {
+    Message.error("已存在相同规格值！");
+
+    skuInfo.value = cloneObj(skuInfoCopy.value);
+    skuTableData.value = cloneObj(skuTableDataCopy.value);
+    return;
+  }
+
+  containsSameSkuValue.value = false;
+  if (zz(0, val.value) > 20) {
+    Message.error("规格值最多十个字符长度！");
+    // val.value = val.value.toString().slice(0, 4);
+    // 使用传入的 item 引用，避免对未定义的 $index 访问
+    item.spec_values[index].value = countCharacters(val.value, 10);
+    proxy.$forceUpdate();// 调用该方法会触发组件的重新渲染
+    // return;
+  }
+  lastEditSkuValue.value = val.value;
+  let curVal = currentSkuVal.value;
+  skuTableData.value = skuTableData.value.map((e) => {
+    if (e[val.name] === curVal) {
+      e[val.name] = val.value;
+    }
+    return e;
+  });
+  currentSkuVal.value = val.value;
+  skuTableDataCopy.value = cloneObj(skuTableData.value);
+  skuInfoCopy.value = cloneObj(skuInfo.value);
+  renderTableData(skuTableData.value);
+}
+// 获取焦点时，取得规格名对应的规格值
+function changeSkuVals(val, name) {
+  currentSkuVal.value = val.value;
+  if (name) {
+    skuData.value.forEach((e, index) => {
+      if (e === name) {
+        if (skuVal.value.length !== skuVals.value[index].length) {
+          skuVal.value = skuVals.value[index];
+        }
+      }
+    });
+  }
+}
+function checkSkuVal(val, groupIndex, spec) {
+  if (val.value === "") {
+    // 内联错误提示，不使用弹窗
+    val._error = '规格值不能为空！';
+
+    // 如果规格项和规格名称存在，从表格数据中移除包含该空规格值的行
+    if (spec && spec.name && skuInfo.value[groupIndex]) {
+      // 从表格数据中过滤掉包含该空规格值的行
+      skuTableData.value = skuTableData.value.filter(item => {
+        return item[spec.name] !== val.value && item[spec.name] !== "";
+      });
+
+      // 重新渲染表格数据
+      renderTableData(skuTableData.value);
+    }
+  } else if (val._error) {
+    // 清除错误
+    delete val._error;
+    if (skuInfo.value[groupIndex]) {
+      skuInfo.value[groupIndex].spec_values = skuInfo.value[groupIndex].spec_values.filter((i) => i.value !== "");
+    }
+    // skuTableData.value = skuTableData.value.filter(
+    //   (e) => e[spec && spec.name] !== lastEditSkuValue.value
+    // );
+  }
+
+  // 判断是否存在重复规格值
+  if (!skuTableData.value.find((i) => i[val.name] === val.value)) {
+    skuTableDataCopy.value = cloneObj(skuTableData.value);
+    skuInfoCopy.value = cloneObj(skuInfo.value);
+  }
+}
+/** 移除当前规格项 进行数据变化*/
+function handleCloseSkuItem($index, item) {
+  if ($index === 0 && skuInfo.value.length === 1) {
+    skuInfo.value = [];
+    skuTableData.value = [];
+  } else {
+    // 获取当前操作的规格项，在规格项数组中的位置（下标）
+    let itemIndex = 0;
+    skuInfo.value.forEach((i, _index) => {
+      if (i.name === item.name) {
+        itemIndex = _index;
+      }
+    });
+    if (itemIndex === skuInfo.value.length - 1) {
+      // 如果当前为最后一个规格项，则按照下标按照最后一个规格项生成规则删除
+      // 最后一个规格项生成规格数据规则： 如为最后一个规格项，则在规格列表每隔1个中删除n(n为最后一个规格项的规格值列表数量 - 1)个规格数据，生成一个规格数据
+
+      // 除了当前操作的规格项的规格项列表，用于获取所有规格项的规格值列表总数
+      let filterSkuInfo = skuInfo.value.filter((i) => i.name !== item.name);
+      let index = 1;
+      let totalLength = 1;
+      filterSkuInfo.forEach((skuInfo) => {
+        totalLength *= skuInfo.spec_values.length;
+      });
+      // 去除第一个，因为第一个不需要生成新的规格数据
+      item.spec_values.splice(0, 1);
+      for (let i = 0; i < totalLength; i++) {
+        // 移除对应的规格数据
+        skuTableData.value.splice(index, item.spec_values.length);
+        index++;
+      }
+    } else {
+      // 当前规格项生成规格数据的时候，每次应该生成的条数
+      let currentNum =
+        skuInfo.value[skuInfo.value.length - 1].spec_values.length;
+      for (let i = skuInfo.value.length - 2; i > itemIndex; i--) {
+        // 计算每次删除规格数据后移动的位置（计算规则为，以最后的规格项的规格值数量为基础，乘以其他规格项的规格值总数）
+        currentNum *= skuInfo.value[i].spec_values.length;
+      }
+      // 移除对应规格数据的起始索引，起始位置为每次生成条数的下一位
+      let beginIndex = currentNum + 1;
+
+      let filterSkuInfo = skuInfo.value.filter((i) => i.name !== item.name);
+      let totalLength = 1;
+      filterSkuInfo.forEach((skuInfo) => {
+        totalLength *= skuInfo.spec_values.length;
+      });
+      for (let i = 0; i < totalLength; i++) {
+        // 移除对应的规格数据，删除数量为 每次生成条数 * （当前规格项的规格值总数 - 1）
+        skuTableData.value.splice(
+          beginIndex,
+          currentNum * (item.spec_values.length - 1)
+        );
+        beginIndex += currentNum;
+      }
+    }
+    skuInfo.value.splice($index, 1);
+
+    skuTableData.value = skuTableData.value.map((e) => {
+      delete e[item.name];
+      return e;
+    });
+  }
+  /**
+   * 渲染规格详细表格
+   */
+  renderTableData(skuTableData.value);
+}
+// 添加规格值的验证
+function validateEmpty(params) {
+  let flag = true;
+  params.forEach((item) => {
+    for (const key in item) {
+      if (item[key] !== "0" && !item.value) {
+        Message.error("请必填规格项");
+        flag = false;
+        return false; // 终止程序
+      }
+    }
+  });
+
+  return flag;
+}
+/** 添加当前规格项的规格值*/
+function addSpec($index, item) {
+  if (!newSkuValues.value[$index]) {
+    Message.error("请输入规格值");
+    return;
+  }
+
+  if (containsSameSkuItem.value) {
+    Message.error("存在重复规格项！");
+    return;
+  }
+
+  if (item.spec_values.find((i) => i.value === newSkuValues.value[$index])) {
+    newSkuValues.value[$index] = "";
+    skuInfo.value = cloneObj(skuInfoCopy.value);
+    skuTableData.value = cloneObj(skuTableDataCopy.value);
+    Message.error("存在重复规格值！");
+    containsSameSkuNewValue.value = true;
+    return;
+  }
+
+  if (validateEmpty(item.spec_values)) {
+    if (item.spec_values.length >= 10) {
+      Message.error("规格值不能大于10个！");
+      return;
+    }
+    let itemValue = {
+      name: item.name,
+      value: newSkuValues.value[$index],
+    };
+    if (openImage.value) {
+      itemValue.images = []
+    } else {
+      itemValue.images = baseInfoForm.value.goodsGalleryFiles
+    }
+    item.spec_values.push(itemValue);
+
+    // 生成新的规格组合
+    const newCombinations = generateSkuCombinations(skuInfo.value);
+
+    // 保留原有组合的属性值
+    skuTableData.value = newCombinations.map(combination => {
+      // 查找匹配的原有组合
+      const existingCombination = skuTableData.value.find(item => {
+        // 检查所有规格项是否匹配
+        return skuInfo.value.every(info => {
+          return item[info.name] === combination[info.name];
+        });
+      });
+
+      if (existingCombination) {
         // 保留原有组合的属性值
-        this.skuTableData = newCombinations.map(combination => {
-          // 查找匹配的原有组合
-          const existingCombination = this.skuTableData.find(item => {
-            // 检查所有规格项是否匹配
-            return this.skuInfo.every(info => {
-              return item[info.name] === combination[info.name];
-            });
-          });
-
-          if (existingCombination) {
-            // 保留原有组合的属性值
-            return {
-              ...combination,
-              id: existingCombination.id || "",
-              sn: existingCombination.sn || "",
-              quantity: this.hideSkuQuantity
-                ? (existingCombination.quantity ?? 0)
-                : (existingCombination.quantity || ""),
-              cost: existingCombination.cost || "",
-              price: existingCombination.price || "",
-              weight: existingCombination.weight || ""
-            };
-          } else {
-            // 新组合使用默认值
-            return {
-              ...combination,
-              quantity: this.defaultSkuQuantity(),
-            };
-          }
-        });
-        this.baseInfoForm.regeneratorSkuFlag = true;
-        this.newSkuValues[$index] = "";
-
-        this.skuTableDataCopy = cloneObj(this.skuTableData);
-        this.skuInfoCopy = cloneObj(this.skuInfo);
+        return {
+          ...combination,
+          id: existingCombination.id || "",
+          sn: existingCombination.sn || "",
+          quantity: hideSkuQuantity.value
+            ? (existingCombination.quantity ?? 0)
+            : (existingCombination.quantity || ""),
+          cost: existingCombination.cost || "",
+          price: existingCombination.price || "",
+          weight: existingCombination.weight || ""
+        };
+      } else {
+        // 新组合使用默认值
+        return {
+          ...combination,
+          quantity: defaultSkuQuantity(),
+        };
       }
+    });
+    baseInfoForm.value.regeneratorSkuFlag = true;
+    newSkuValues.value[$index] = "";
+
+    skuTableDataCopy.value = cloneObj(skuTableData.value);
+    skuInfoCopy.value = cloneObj(skuInfo.value);
+  }
+}
+function handleClearSku() {
+  skuInfo.value = [];
+  skuTableData.value = [];
+  renderTableData(skuTableData.value);
+}
+/** 移除当前规格值 */
+function handleCloseSkuValue(item, index, spec) {
+  if (spec.spec_values.length <= 1) {
+    Message.error("至少保留一个规格值！");
+    return;
+  }
+
+  // 从规格项中移除规格值
+  skuInfo.value.forEach((i) => {
+    if (i.name === spec.name) {
+      i.spec_values.splice(index, 1);
+    }
+  });
+
+  // 生成新的规格组合
+  const newCombinations = generateSkuCombinations(skuInfo.value);
+
+  // 保留原有组合的属性值
+  skuTableData.value = newCombinations.map(combination => {
+    // 查找匹配的原有组合
+    const existingCombination = skuTableData.value.find(item => {
+      // 检查所有规格项是否匹配
+      return skuInfo.value.every(info => {
+        return item[info.name] === combination[info.name];
+      });
+    });
+
+    if (existingCombination) {
+      // 保留原有组合的属性值
+      return {
+        ...combination,
+        id: existingCombination.id || "",
+        sn: existingCombination.sn || "",
+        quantity: hideSkuQuantity.value
+          ? (existingCombination.quantity ?? 0)
+          : (existingCombination.quantity || ""),
+        cost: existingCombination.cost || "",
+        price: existingCombination.price || "",
+        weight: existingCombination.weight || ""
+      };
+    } else {
+      // 新组合使用默认值
+      return {
+        ...combination,
+        quantity: defaultSkuQuantity(),
+      };
+    }
+  });
+
+  baseInfoForm.value.regeneratorSkuFlag = true;
+}
+
+/**
+ * 渲染table所需要的column 和 data
+ */
+function renderTableData(skus) {
+  skuTableColumn.value = [];
+  let pushData = [];
+  // 渲染头部
+  skuInfo.value.forEach((sku) => {
+    // 列名称
+    let columnName = sku.name;
+    pushData.push({
+      title: columnName,
+      key: columnName,
+    });
+  });
+  // 有成本价和价格的情况
+  if (baseInfoForm.value.salesModel !== "WHOLESALE") {
+    pushData.push(
+      // {
+      //   title: "成本价",
+      //   slot: "cost",
+      // },
+      {
+        title: "价格",
+        slot: "price",
+      }
+    );
+  }
+
+  if (baseInfoForm.value.salesModel === "WHOLESALE" && wholesaleData.value) {
+    wholesaleData.value.forEach((item, index) => {
+      pushData.push({
+        title: "购买量 ≥ " + item.num,
+        slot: "wholePrice" + index,
+      });
+    });
+  }
+
+  // 有重量的情况
+  if (
+    needsLogistics.value &&
+    baseInfoForm.value.salesModel !== "WHOLESALE"
+  ) {
+    pushData.push({
+      title: "重量",
+      slot: "weight",
+    });
+  }
+  if (isAppointmentGoods.value) {
+    pushData.push({
+      title: "可预约数量",
+      slot: "appointmentCapacity",
+      minWidth: 160,
+    });
+  } else if (!isECouponGoods.value) {
+    pushData.push({
+      title: "库存",
+      slot: "quantity",
+    });
+  }
+  pushData.push(
+    // {
+    //   title: "库存预警",
+    //   slot: "alertQuantity",
+    // },
+    {
+      title: "货号",
+      slot: "sn",
     },
-    handleClearSku() {
-      this.skuInfo = [];
-      this.skuTableData = [];
-      this.renderTableData(this.skuTableData);
-    },
-    /** 移除当前规格值 */
-    handleCloseSkuValue(item, index, spec) {
-      if (spec.spec_values.length <= 1) {
-        this.$Message.error("至少保留一个规格值！");
+  );
+
+  skuTableColumn.value = pushData;
+
+  // 生成规格组合
+  if (skuInfo.value.length > 0) {
+    const newCombinations = generateSkuCombinations(skuInfo.value);
+
+    // 保留原有组合的属性值
+    skuTableData.value = newCombinations.map(combination => {
+      // 查找匹配的原有组合
+      const existingCombination = skus.find(item => {
+        // 检查所有规格项是否匹配
+        return skuInfo.value.every(info => {
+          return item[info.name] === combination[info.name];
+        });
+      });
+
+      if (existingCombination) {
+        // 保留原有组合的属性值
+        return {
+          ...combination,
+          id: existingCombination.id || "",
+          sn: existingCombination.sn || "",
+          quantity: hideSkuQuantity.value
+            ? (existingCombination.quantity ?? 0)
+            : (existingCombination.quantity || ""),
+          cost: existingCombination.cost || "",
+          price: existingCombination.price || (baseInfoForm.value.salesModel === 'WHOLESALE' && wholesaleData.value.length > 0 ? wholesaleData.value[0].price : ""),
+          weight: existingCombination.weight || ""
+        };
+      } else {
+        // 新组合使用默认值，批发模式下设置默认价格
+        return {
+          ...combination,
+          id: "",
+          sn: "",
+          quantity: defaultSkuQuantity(),
+          cost: "",
+          price: baseInfoForm.value.salesModel === 'WHOLESALE' && wholesaleData.value.length > 0 ? wholesaleData.value[0].price : "",
+          weight: ""
+        };
+      }
+    });
+    assignSkuTableIndex();
+  }
+}
+
+/**
+ * 迭代属性，形成表格
+ * result 渲染的数据
+ * array spec数据
+ */
+function specIterator(result, spec, skus) {
+  let table = result;
+  if (spec.length > 0) {
+    //清除当前循环的分组
+    let cloneTemp = cloneObj(spec);
+    cloneTemp.shift();
+    spec[0].spec_values.forEach((specItem) => {
+      let index = skuIndex;
+      if (table[index]) {
+        table[index][spec[0].name] = specItem.value;
+      } else if (skus && skus[index] && specItem.value !== "") {
+        let obj = {
+          ...skus[index],
+          id: skus[index].id,
+          sn: skus[index].sn,
+          quantity: skus[index].quantity,
+          cost: skus[index].cost,
+          price: skus[index].price,
+          // [spec[0].name]: skus[index][spec[0].name] ? skus[index][spec[0].name] : specItem.value,
+          [spec[0].name]: specItem.value,
+          images:
+            skus[index].images || baseInfoForm.value.goodsGalleryFiles || [],
+        };
+        if (specItem.value !== "") {
+          obj.id = skus[index].id;
+        }
+        if (skus[index].weight !== "") {
+          obj.weight = skus[index].weight;
+        }
+        table.push(obj);
+      } else if (specItem.value !== "") {
+        table.push({
+          [spec[0].name]: specItem.value,
+          images: baseInfoForm.value.goodsGalleryFiles || [],
+        });
+      }
+
+      table = specIterator(table, cloneTemp, skus, index);
+    });
+  } else {
+    skuIndex++;
+  }
+  return table;
+}
+/**
+ * 生成所有可能的规格组合
+ * @param {Array} skuInfo 规格信息
+ * @returns {Array} 所有可能的规格组合
+ */
+function generateSkuCombinations(skuInfo) {
+  if (!skuInfo || skuInfo.length === 0) {
+    return [];
+  }
+
+  // 提取每个规格项的规格值
+  const specValues = skuInfo.map(item => {
+    return item.spec_values
+      .filter(val => val.value !== "") // 过滤掉空值
+      .map(val => ({
+        name: item.name,
+        value: val.value,
+        images: val.images || baseInfoForm.value.goodsGalleryFiles || []
+      }));
+  });
+
+  // 如果有规格项没有有效的规格值，返回空数组
+  if (specValues.some(values => values.length === 0)) {
+    return [];
+  }
+
+  // 递归生成所有组合
+  const generateCombinations = (index, current) => {
+    if (index === specValues.length) {
+      // 基本属性
+      const combination = {
+        images: baseInfoForm.value.goodsGalleryFiles || []
+      };
+
+      // 添加规格属性
+      current.forEach(spec => {
+        combination[spec.name] = spec.value;
+
+        // 如果是第一个规格项且有图片，使用其图片
+        if (spec.name === skuInfo[0].name) {
+          combination.images = spec.images;
+        }
+      });
+
+      return [combination];
+    }
+
+    const results = [];
+    for (const value of specValues[index]) {
+      results.push(...generateCombinations(index + 1, [...current, value]));
+    }
+    return results;
+  };
+
+  return generateCombinations(0, []);
+}
+
+// 判断相同数组的值
+function scalarArrayEquals(array1, array2) {
+  return (
+    array1.length === array2.length &&
+    array1.every(function (v, i) {
+      return v === array2[i];
+    })
+  );
+}
+/** 自动完成表单所需方法*/
+function filterMethod(value, option) {
+  return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
+}
+/** 数据改变之后 抛出数据 */
+function updateSkuTable(row, item, rowIndex) {
+  let index = rowIndex;
+  if (index === undefined || index === null) {
+    index = row._index;
+  }
+  if (index === undefined || index === null) {
+    index = skuTableData.value.indexOf(row);
+  }
+  if (index < 0 || !skuTableData.value[index]) {
+    return;
+  }
+  row._index = index;
+  baseInfoForm.value.regeneratorSkuFlag = true;
+  /** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
+  if (item === "weight") {
+    if (
+      !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row[item]) ||
+      parseInt(row[item]) < 0 ||
+      parseInt(row[item]) > 99999999
+    ) {
+      // 校验未通过 加入错误存储列表中
+      validateError.value.push([index, item]);
+      validatatxt.value = "请输入0~99999999之间的数字值";
+      return;
+    }
+  } else if (item === "quantity") {
+    if (
+      !/^[0-9]\d*$/.test(row[item]) ||
+      parseInt(row[item]) < 0 ||
+      parseInt(row[item]) > 99999999
+    ) {
+      // 库存
+      validateError.value.push([index, item]);
+      validatatxt.value = "请输入0~99999999之间的整数";
+      return;
+    }
+  }
+  nextTick(() => {
+    if (skuTableData.value[index]) {
+      skuTableData.value[index][item] = row[item];
+    }
+  });
+}
+// 店内分类选择
+function selectTree(v) {
+  if (v.length > 0) {
+    // 转换null为""
+    for (let attr in v[0]) {
+      if (v[0][attr] == null) {
+        v[0][attr] = "";
+      }
+    }
+    let str = JSON.stringify(v[0]);
+    let menu = JSON.parse(str);
+    form = menu;
+    editTitle = menu.title;
+  }
+}
+// 店内分类选中
+function changeSelect(v) {
+  selectCount = v.length;
+  let ids = "";
+  v.forEach(function (e) {
+    ids += e.id + ",";
+  });
+  ids = ids.substring(0, ids.length - 1);
+
+  if (ids.length > 100) {
+    Message.error("选择了过多的店铺分类，请谨慎选择");
+  }
+  baseInfoForm.value.storeCategoryPath = ids;
+}
+/**  添加商品 **/
+function save() {
+  if (containsSameSkuItem.value) {
+    jumpToTab("price");
+    Message.error("存在重复规格项！");
+    return;
+  }
+  if (containsSameSkuValue.value) {
+    jumpToTab("price");
+    Message.error("存在重复规格值！");
+    return;
+  }
+  let checkFlag = false;
+  let missingParams = [];
+  goodsParams.value.forEach((param) => {
+    if (!param || !param.required) return;
+    const check = baseInfoForm.value.goodsParamsDTOList.some((paramsItem) => {
+      if (String(paramsItem.paramId) !== String(param.id)) return false;
+      return !!paramsItem.paramValue;
+    });
+    if (!check) {
+      checkFlag = true;
+      missingParams.push(param.paramName);
+    }
+  });
+  if (checkFlag) {
+    jumpToTab("basic");
+    Message.error(`以下参数为必填项：${missingParams.join('、')}`);
+    return;
+  }
+  submitLoading.value = true;
+  baseInfoFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      if (baseInfoForm.value.salesModel === "WHOLESALE") {
+        for (let i = 0; i < wholesaleData.value.length; i++) {
+          checkWholesaleNum(i);
+          checkWholesalePrice(i);
+          wholesaleData.value[i].goodsId = goodsId;
+        }
+        baseInfoForm.value.wholesaleList = wholesaleData.value;
+      }
+
+      // 判断是否是复制商品
+      if (!route.query.copyId) {
+        baseInfoForm.value.goodsId = goodsId;
+      }
+      syncIntroFromEditors();
+      let submit = JSON.parse(JSON.stringify(baseInfoForm.value));
+      if (
+        submit.goodsGalleryFiles &&
+        submit.goodsGalleryFiles.length <= 0
+      ) {
+        submitLoading.value = false;
+        jumpToTab("specs");
+        Message.error("请上传商品图片");
+        return;
+      }
+      const invalidGalleryFiles = submit.goodsGalleryFiles.filter((url) =>
+        invalidGoodsGalleryFiles.value.includes(url)
+      );
+      if (invalidGalleryFiles.length > 0) {
+        submitLoading.value = false;
+        jumpToTab("specs");
+        Message.error("存在已失效的商品主图，请删除后重新上传");
+        return;
+      }
+      if (submit.templateId === "") submit.templateId = 0;
+      if (submit.brandId === "" || submit.brandId == null) submit.brandId = 0;
+      if (isECouponGoods.value) {
+        submit.templateId = 0;
+        submit.salesModel = "RETAIL";
+      }
+      if (isAppointmentGoods.value) {
+        submit.templateId = 0;
+        submit.salesModel = "RETAIL";
+        if (!appointmentPanel.value?.validateRules()) {
+          submitLoading.value = false;
+          jumpToTab("appointment");
+          return;
+        }
+        if (!appointmentPanel.value?.validateDivision()) {
+          submitLoading.value = false;
+          jumpToTab("appointment");
+          return;
+        }
+        Object.assign(submit, appointmentPanel.value.buildSubmitPayload());
+      }
+      let flag = false;
+      let paramValue = "";
+
+      if (flag) {
+        Message.error(paramValue + " 参数值不能为空");
+        submitLoading.value = false;
         return;
       }
 
-      // 从规格项中移除规格值
-      this.skuInfo.forEach((i) => {
-        if (i.name === spec.name) {
-          i.spec_values.splice(index, 1);
+      if (goodsUnitList.value && !goodsUnitList.value.find(i => i === baseInfoForm.value.goodsUnit)) {
+        submit.goodsUnit = ""
+        Message.error("商品单位不存在");
+        submitLoading.value = false;
+        jumpToTab("basic");
+        return;
+      }
+      let skuInfoNames = skuInfo.value.map((n) => n.name);
+      submit.skuList = [];
+      let containEmptyImage = false;
+      skuTableData.value.map((sku) => {
+        let skuCopy = {
+          cost: 1,
+          price: sku.price,
+          quantity: resolveSubmitQuantity(sku),
+          // alertQuantity: sku.alertQuantity,
+          sn: sku.sn,
+          images: [],
+        };
+        if (openImage.value) {
+          skuInfo.value[0].spec_values.forEach(item => {
+            if (!item.images || item.images.length === 0) {
+              containEmptyImage = true;
+              return;
+            }
+            if (item.value === sku[skuInfo.value[0].name]) {
+              skuCopy.images = item.images
+            }
+          })
+
         }
-      });
-
-      // 生成新的规格组合
-      const newCombinations = this.generateSkuCombinations(this.skuInfo);
-
-      // 保留原有组合的属性值
-      this.skuTableData = newCombinations.map(combination => {
-        // 查找匹配的原有组合
-        const existingCombination = this.skuTableData.find(item => {
-          // 检查所有规格项是否匹配
-          return this.skuInfo.every(info => {
-            return item[info.name] === combination[info.name];
-          });
-        });
-
-        if (existingCombination) {
-          // 保留原有组合的属性值
-          return {
-            ...combination,
-            id: existingCombination.id || "",
-            sn: existingCombination.sn || "",
-            quantity: this.hideSkuQuantity
-              ? (existingCombination.quantity ?? 0)
-              : (existingCombination.quantity || ""),
-            cost: existingCombination.cost || "",
-            price: existingCombination.price || "",
-            weight: existingCombination.weight || ""
-          };
-        } else {
-          // 新组合使用默认值
-          return {
-            ...combination,
-            quantity: this.defaultSkuQuantity(),
-          };
+        if (sku.weight) {
+          skuCopy.weight = sku.weight;
         }
+        if (baseInfoForm.value.weight) {
+          skuCopy.weight = baseInfoForm.value.weight;
+        }
+        if (sku.id) {
+          skuCopy.id = sku.id;
+        }
+        for (let skuInfoName of skuInfoNames) {
+          skuCopy[skuInfoName] = sku[skuInfoName];
+        }
+        if (isAppointmentGoods.value && appointmentPanel.value) {
+          skuCopy.slotCapacities = appointmentPanel.value.buildSkuSlotCapacities(sku);
+        }
+        submit.skuList.push(skuCopy);
       });
-
-      this.baseInfoForm.regeneratorSkuFlag = true;
-    },
-
-    /**
-     * 渲染table所需要的column 和 data
-     */
-    renderTableData(skus) {
-      this.skuTableColumn = [];
-      let pushData = [];
-      // 渲染头部
-      this.skuInfo.forEach((sku) => {
-        // 列名称
-        let columnName = sku.name;
-        pushData.push({
-          title: columnName,
-          key: columnName,
-        });
-      });
-      // 有成本价和价格的情况
-      if (this.baseInfoForm.salesModel !== "WHOLESALE") {
-        pushData.push(
-          // {
-          //   title: "成本价",
-          //   slot: "cost",
-          // },
-          {
-            title: "价格",
-            slot: "price",
-          }
+      if (containEmptyImage) {
+        Message.error("开启规格图片，所有规格图片不能为空！");
+        submitLoading.value = false;
+        jumpToTab("price");
+        return;
+      }
+      if (submit.goodsGalleryFiles.length > 0) {
+        submit.goodsGalleryList = submit.goodsGalleryFiles.map(
+          (i) => i
         );
       }
-
-      if (this.baseInfoForm.salesModel === "WHOLESALE" && this.wholesaleData) {
-        this.wholesaleData.forEach((item, index) => {
-          pushData.push({
-            title: "购买量 ≥ " + item.num,
-            slot: "wholePrice" + index,
-          });
-        });
-      }
-
-      // 有重量的情况
-      if (
-        this.needsLogistics &&
-        this.baseInfoForm.salesModel !== "WHOLESALE"
-      ) {
-        pushData.push({
-          title: "重量",
-          slot: "weight",
-        });
-      }
-      if (this.isAppointmentGoods) {
-        pushData.push({
-          title: "可预约数量",
-          slot: "appointmentCapacity",
-          minWidth: 160,
-        });
-      } else if (!this.isECouponGoods) {
-        pushData.push({
-          title: "库存",
-          slot: "quantity",
-        });
-      }
-      pushData.push(
-        // {
-        //   title: "库存预警",
-        //   slot: "alertQuantity",
-        // },
-        {
-          title: "货号",
-          slot: "sn",
-        },
-      );
-
-      this.skuTableColumn = pushData;
-
-      // 生成规格组合
-      if (this.skuInfo.length > 0) {
-        const newCombinations = this.generateSkuCombinations(this.skuInfo);
-
-        // 保留原有组合的属性值
-        this.skuTableData = newCombinations.map(combination => {
-          // 查找匹配的原有组合
-          const existingCombination = skus.find(item => {
-            // 检查所有规格项是否匹配
-            return this.skuInfo.every(info => {
-              return item[info.name] === combination[info.name];
-            });
-          });
-
-          if (existingCombination) {
-            // 保留原有组合的属性值
-            return {
-              ...combination,
-              id: existingCombination.id || "",
-              sn: existingCombination.sn || "",
-              quantity: this.hideSkuQuantity
-                ? (existingCombination.quantity ?? 0)
-                : (existingCombination.quantity || ""),
-              cost: existingCombination.cost || "",
-              price: existingCombination.price || (this.baseInfoForm.salesModel === 'WHOLESALE' && this.wholesaleData.length > 0 ? this.wholesaleData[0].price : ""),
-              weight: existingCombination.weight || ""
-            };
+      /** 参数校验 **/
+      /* Object.keys(submit.goodsParamsList).forEach((item) => {
+      });*/
+      submit.release ? (submit.release = true) : (submit.release = false);
+      submit.recommend
+        ? (submit.recommend = true)
+        : (submit.recommend = false);
+      // 判断是否是复制商品
+      if (goodsId && !route.query.copyId) {
+        API_GOODS.editGoods(goodsId, submit).then((res) => {
+          if (res.success) {
+            submitLoading.value = false;
+            router.go(-1);
           } else {
-            // 新组合使用默认值，批发模式下设置默认价格
-            return {
-              ...combination,
-              id: "",
-              sn: "",
-              quantity: this.defaultSkuQuantity(),
-              cost: "",
-              price: this.baseInfoForm.salesModel === 'WHOLESALE' && this.wholesaleData.length > 0 ? this.wholesaleData[0].price : "",
-              weight: ""
-            };
+            submitLoading.value = false;
           }
-        });
-        this.assignSkuTableIndex();
-      }
-    },
-
-    /**
-     * 迭代属性，形成表格
-     * result 渲染的数据
-     * array spec数据
-     */
-    specIterator(result, spec, skus) {
-      let table = result;
-      if (spec.length > 0) {
-        //清除当前循环的分组
-        let cloneTemp = cloneObj(spec);
-        cloneTemp.shift();
-        spec[0].spec_values.forEach((specItem) => {
-          let index = this.skuIndex;
-          if (table[index]) {
-            table[index][spec[0].name] = specItem.value;
-          } else if (skus && skus[index] && specItem.value !== "") {
-            let obj = {
-              ...skus[index],
-              id: skus[index].id,
-              sn: skus[index].sn,
-              quantity: skus[index].quantity,
-              cost: skus[index].cost,
-              price: skus[index].price,
-              // [spec[0].name]: skus[index][spec[0].name] ? skus[index][spec[0].name] : specItem.value,
-              [spec[0].name]: specItem.value,
-              images:
-                skus[index].images || this.baseInfoForm.goodsGalleryFiles || [],
-            };
-            if (specItem.value !== "") {
-              obj.id = skus[index].id;
-            }
-            if (skus[index].weight !== "") {
-              obj.weight = skus[index].weight;
-            }
-            table.push(obj);
-          } else if (specItem.value !== "") {
-            table.push({
-              [spec[0].name]: specItem.value,
-              images: this.baseInfoForm.goodsGalleryFiles || [],
-            });
-          }
-
-          table = this.specIterator(table, cloneTemp, skus, index);
+        }).catch(() => {
+          submitLoading.value = false;
+          Message.error("保存失败，请重试");
         });
       } else {
-        this.skuIndex++;
-      }
-      return table;
-    },
-    /**
-     * 生成所有可能的规格组合
-     * @param {Array} skuInfo 规格信息
-     * @returns {Array} 所有可能的规格组合
-     */
-    generateSkuCombinations(skuInfo) {
-      if (!skuInfo || skuInfo.length === 0) {
-        return [];
-      }
-
-      // 提取每个规格项的规格值
-      const specValues = skuInfo.map(item => {
-        return item.spec_values
-          .filter(val => val.value !== "") // 过滤掉空值
-          .map(val => ({
-            name: item.name,
-            value: val.value,
-            images: val.images || this.baseInfoForm.goodsGalleryFiles || []
-          }));
-      });
-
-      // 如果有规格项没有有效的规格值，返回空数组
-      if (specValues.some(values => values.length === 0)) {
-        return [];
-      }
-
-      // 递归生成所有组合
-      const generateCombinations = (index, current) => {
-        if (index === specValues.length) {
-          // 基本属性
-          const combination = {
-            images: this.baseInfoForm.goodsGalleryFiles || []
-          };
-
-          // 添加规格属性
-          current.forEach(spec => {
-            combination[spec.name] = spec.value;
-
-            // 如果是第一个规格项且有图片，使用其图片
-            if (spec.name === skuInfo[0].name) {
-              combination.images = spec.images;
-            }
-          });
-
-          return [combination];
-        }
-
-        const results = [];
-        for (const value of specValues[index]) {
-          results.push(...generateCombinations(index + 1, [...current, value]));
-        }
-        return results;
-      };
-
-      return generateCombinations(0, []);
-    },
-
-    // 判断相同数组的值
-    scalarArrayEquals(array1, array2) {
-      return (
-        array1.length === array2.length &&
-        array1.every(function (v, i) {
-          return v === array2[i];
-        })
-      );
-    },
-    /** 自动完成表单所需方法*/
-    filterMethod(value, option) {
-      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1;
-    },
-    /** 数据改变之后 抛出数据 */
-    updateSkuTable(row, item, rowIndex) {
-      let index = rowIndex;
-      if (index === undefined || index === null) {
-        index = row._index;
-      }
-      if (index === undefined || index === null) {
-        index = this.skuTableData.indexOf(row);
-      }
-      if (index < 0 || !this.skuTableData[index]) {
-        return;
-      }
-      row._index = index;
-      this.baseInfoForm.regeneratorSkuFlag = true;
-      /** 进行自定义校验 判断是否是数字（小数也能通过）重量 */
-      if (item === "weight") {
-        if (
-          !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(row[item]) ||
-          parseInt(row[item]) < 0 ||
-          parseInt(row[item]) > 99999999
-        ) {
-          // 校验未通过 加入错误存储列表中
-          this.validateError.push([index, item]);
-          this.validatatxt = "请输入0~99999999之间的数字值";
-          return;
-        }
-      } else if (item === "quantity") {
-        if (
-          !/^[0-9]\d*$/.test(row[item]) ||
-          parseInt(row[item]) < 0 ||
-          parseInt(row[item]) > 99999999
-        ) {
-          // 库存
-          this.validateError.push([index, item]);
-          this.validatatxt = "请输入0~99999999之间的整数";
-          return;
-        }
-      }
-      this.$nextTick(() => {
-        if (this.skuTableData[index]) {
-          this.skuTableData[index][item] = row[item];
-        }
-      });
-    },
-    // 店内分类选择
-    selectTree(v) {
-      if (v.length > 0) {
-        // 转换null为""
-        for (let attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
-          }
-        }
-        let str = JSON.stringify(v[0]);
-        let menu = JSON.parse(str);
-        this.form = menu;
-        this.editTitle = menu.title;
-      }
-    },
-    // 店内分类选中
-    changeSelect(v) {
-      this.selectCount = v.length;
-      let ids = "";
-      v.forEach(function (e) {
-        ids += e.id + ",";
-      });
-      ids = ids.substring(0, ids.length - 1);
-
-      if (ids.length > 100) {
-        this.$Message.error("选择了过多的店铺分类，请谨慎选择");
-      }
-      this.baseInfoForm.storeCategoryPath = ids;
-    },
-    /**  添加商品 **/
-    save() {
-      if (this.containsSameSkuItem) {
-        this.jumpToTab("price");
-        this.$Message.error("存在重复规格项！");
-        return;
-      }
-      if (this.containsSameSkuValue) {
-        this.jumpToTab("price");
-        this.$Message.error("存在重复规格值！");
-        return;
-      }
-      let checkFlag = false;
-      let missingParams = [];
-      this.goodsParams.forEach((param) => {
-        if (!param || !param.required) return;
-        const check = this.baseInfoForm.goodsParamsDTOList.some((paramsItem) => {
-          if (String(paramsItem.paramId) !== String(param.id)) return false;
-          return !!paramsItem.paramValue;
-        });
-        if (!check) {
-          checkFlag = true;
-          missingParams.push(param.paramName);
-        }
-      });
-      if (checkFlag) {
-        this.jumpToTab("basic");
-        this.$Message.error(`以下参数为必填项：${missingParams.join('、')}`);
-        return;
-      }
-      this.submitLoading = true;
-      this.$refs["baseInfoForm"].validate((valid, fields) => {
-        if (valid) {
-          if (this.baseInfoForm.salesModel === "WHOLESALE") {
-            for (let i = 0; i < this.wholesaleData.length; i++) {
-              this.checkWholesaleNum(i);
-              this.checkWholesalePrice(i);
-              this.wholesaleData[i].goodsId = this.goodsId;
-            }
-            this.baseInfoForm.wholesaleList = this.wholesaleData;
-          }
-
-          // 判断是否是复制商品
-          if (!this.$route.query.copyId) {
-            this.baseInfoForm.goodsId = this.goodsId;
-          }
-          this.syncIntroFromEditors();
-          let submit = JSON.parse(JSON.stringify(this.baseInfoForm));
-          if (
-            submit.goodsGalleryFiles &&
-            submit.goodsGalleryFiles.length <= 0
-          ) {
-            this.submitLoading = false;
-            this.jumpToTab("specs");
-            this.$Message.error("请上传商品图片");
-            return;
-          }
-          const invalidGalleryFiles = submit.goodsGalleryFiles.filter((url) =>
-            this.invalidGoodsGalleryFiles.includes(url)
-          );
-          if (invalidGalleryFiles.length > 0) {
-            this.submitLoading = false;
-            this.jumpToTab("specs");
-            this.$Message.error("存在已失效的商品主图，请删除后重新上传");
-            return;
-          }
-          if (submit.templateId === "") submit.templateId = 0;
-          if (submit.brandId === "" || submit.brandId == null) submit.brandId = 0;
-          if (this.isECouponGoods) {
-            submit.templateId = 0;
-            submit.salesModel = "RETAIL";
-          }
-          if (this.isAppointmentGoods) {
-            submit.templateId = 0;
-            submit.salesModel = "RETAIL";
-            if (!this.$refs.appointmentPanel?.validateRules()) {
-              this.submitLoading = false;
-              this.jumpToTab("appointment");
-              return;
-            }
-            if (!this.$refs.appointmentPanel?.validateDivision()) {
-              this.submitLoading = false;
-              this.jumpToTab("appointment");
-              return;
-            }
-            Object.assign(submit, this.$refs.appointmentPanel.buildSubmitPayload());
-          }
-          let flag = false;
-          let paramValue = "";
-
-          if (flag) {
-            this.$Message.error(paramValue + " 参数值不能为空");
-            this.submitLoading = false;
-            return;
-          }
-
-          if (this.goodsUnitList && !this.goodsUnitList.find(i => i === this.baseInfoForm.goodsUnit)) {
-            submit.goodsUnit = ""
-            this.$Message.error("商品单位不存在");
-            this.submitLoading = false;
-            this.jumpToTab("basic");
-            return;
-          }
-          let skuInfoNames = this.skuInfo.map((n) => n.name);
-          submit.skuList = [];
-          let containEmptyImage = false;
-          this.skuTableData.map((sku) => {
-            let skuCopy = {
-              cost: 1,
-              price: sku.price,
-              quantity: this.resolveSubmitQuantity(sku),
-              // alertQuantity: sku.alertQuantity,
-              sn: sku.sn,
-              images: [],
-            };
-            if (this.openImage) {
-              this.skuInfo[0].spec_values.forEach(item => {
-                if (!item.images || item.images.length === 0) {
-                  containEmptyImage = true;
-                  return;
-                }
-                if (item.value === sku[this.skuInfo[0].name]) {
-                  skuCopy.images = item.images
-                }
-              })
-
-            }
-            if (sku.weight) {
-              skuCopy.weight = sku.weight;
-            }
-            if (this.baseInfoForm.weight) {
-              skuCopy.weight = this.baseInfoForm.weight;
-            }
-            if (sku.id) {
-              skuCopy.id = sku.id;
-            }
-            for (let skuInfoName of skuInfoNames) {
-              skuCopy[skuInfoName] = sku[skuInfoName];
-            }
-            if (this.isAppointmentGoods && this.$refs.appointmentPanel) {
-              skuCopy.slotCapacities = this.$refs.appointmentPanel.buildSkuSlotCapacities(sku);
-            }
-            submit.skuList.push(skuCopy);
-          });
-          if (containEmptyImage) {
-            this.$Message.error("开启规格图片，所有规格图片不能为空！");
-            this.submitLoading = false;
-            this.jumpToTab("price");
-            return;
-          }
-          if (submit.goodsGalleryFiles.length > 0) {
-            submit.goodsGalleryList = submit.goodsGalleryFiles.map(
-              (i) => i
-            );
-          }
-          /** 参数校验 **/
-          /* Object.keys(submit.goodsParamsList).forEach((item) => {
-          });*/
-          submit.release ? (submit.release = true) : (submit.release = false);
-          submit.recommend
-            ? (submit.recommend = true)
-            : (submit.recommend = false);
-          // 判断是否是复制商品
-          if (this.goodsId && !this.$route.query.copyId) {
-            API_GOODS.editGoods(this.goodsId, submit).then((res) => {
-              if (res.success) {
-                this.submitLoading = false;
-                this.$router.go(-1);
-              } else {
-                this.submitLoading = false;
-              }
-            }).catch(() => {
-              this.submitLoading = false;
-              this.$Message.error("保存失败，请重试");
-            });
+        API_GOODS.createGoods(submit).then((res) => {
+          if (res.success) {
+            submitLoading.value = false;
+            proxy.$parent.activestep = 2;
+            window.scrollTo(0, 0);
           } else {
-            API_GOODS.createGoods(submit).then((res) => {
-              if (res.success) {
-                this.submitLoading = false;
-                this.$parent.activestep = 2;
-                window.scrollTo(0, 0);
-              } else {
-                this.submitLoading = false;
-              }
-            });
+            submitLoading.value = false;
           }
-        } else {
-          this.submitLoading = false;
-          this.jumpToTab(this.tabForInvalidFields(fields));
-          this.$Message.error("还有必填项未做处理，请检查表单");
-        }
-      });
-    },
-    GET_ShipTemplate(type) {
-      // 获取物流模板
-      API_Shop.getShipTemplate().then((res) => {
-        if (res.success) {
-          this.logisticsTemplate = res.result;
-        }
-        if (type === 'localRefresh' && res.success) {
-          this.$Message.success("刷新成功");
-        } else if (type === 'localRefresh') {
-          this.$Message.error("刷新失败，请重试");
-        }
-      });
-    }
-  },
-  mounted() {
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
-    this.GET_ShipTemplate()
-    if (this.$route.query.id || this.$route.query.draftId) {
-      // 编辑商品、模板
-      this.GET_GoodData(this.$route.query.id, this.$route.query.draftId);
-    } else if (this.$route.query.copyId) {
-      // 复制商品
-      this.GET_GoodData(this.$route.query.copyId);
-    } else if (this.firstData.tempId) {
-      // 选择模板
-      this.GET_GoodData("", this.firstData.tempId);
+        });
+      }
     } else {
-      // 新增商品
-      const cateId = [];
-      (this.firstData.category || []).forEach((cate) => {
-        this.baseInfoForm.categoryName.push(cate.name);
-        cateId.push(cate.id);
-      });
-      this.categoryId = cateId[2];
-      this.baseInfoForm.categoryPath = cateId.toString();
-      this.baseInfoForm.goodsType = this.firstData.goodsType;
-
-      this.GET_GoodsParams();
-      this.getGoodsBrandList();
-      this.GET_GoodsUnit();
-      this.GET_ShopGoodsLabel();
+      submitLoading.value = false;
+      jumpToTab(tabForInvalidFields(fields));
+      Message.error("还有必填项未做处理，请检查表单");
     }
-    this.$nextTick(() => {
-      this.bindPublishScroll();
-      this.handleTabChange("specs");
+  });
+}
+function GET_ShipTemplate(type) {
+  // 获取物流模板
+  API_Shop.getShipTemplate().then((res) => {
+    if (res.success) {
+      logisticsTemplate.value = res.result;
+    }
+    if (type === 'localRefresh' && res.success) {
+      Message.success("刷新成功");
+    } else if (type === 'localRefresh') {
+      Message.error("刷新失败，请重试");
+    }
+  });
+}
+
+onMounted(() => {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+  GET_ShipTemplate()
+  if (route.query.id || route.query.draftId) {
+    // 编辑商品、模板
+    GET_GoodData(route.query.id, route.query.draftId);
+  } else if (route.query.copyId) {
+    // 复制商品
+    GET_GoodData(route.query.copyId);
+  } else if (props.firstData.tempId) {
+    // 选择模板
+    GET_GoodData("", props.firstData.tempId);
+  } else {
+    // 新增商品
+    const cateId = [];
+    (props.firstData.category || []).forEach((cate) => {
+      baseInfoForm.value.categoryName.push(cate.name);
+      cateId.push(cate.id);
     });
-  },
-  beforeUnmount() {
-    window.clearTimeout(this._scrollClickTimer);
-    this.unbindPublishScroll();
-  },
-};
+    categoryId.value = cateId[2];
+    baseInfoForm.value.categoryPath = cateId.toString();
+    baseInfoForm.value.goodsType = props.firstData.goodsType;
+
+    GET_GoodsParams();
+    getGoodsBrandList();
+    GET_GoodsUnit();
+    GET_ShopGoodsLabel();
+  }
+  nextTick(() => {
+    bindPublishScroll();
+    handleTabChange("specs");
+  });
+});
+
+onBeforeUnmount(() => {
+  window.clearTimeout(_scrollClickTimer);
+  unbindPublishScroll();
+});
 </script>
 <style lang="scss" scoped>
 /* 规格值内联错误提示样式 */
diff --git a/seller/src/views/goods/goods-seller/goodsOperationThird.vue b/seller/src/views/goods/goods-seller/goodsOperationThird.vue
index 8f4e56053..523f4936e 100644
--- a/seller/src/views/goods/goods-seller/goodsOperationThird.vue
+++ b/seller/src/views/goods/goods-seller/goodsOperationThird.vue
@@ -16,18 +16,19 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  methods: {
-     // 跳转商品列表
-    gotoGoodsList() {
-      this.$router.push({name: "goods"});
-    },
-    // 刷新页面
-    gotoBack() {
-      this.$router.go();
-    },
-  }
+<script setup>
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+
+// 跳转商品列表
+function gotoGoodsList() {
+  router.push({name: "goods"});
+}
+
+// 刷新页面
+function gotoBack() {
+  router.go();
 }
 </script>
 <style lang="scss" scoped>
diff --git a/seller/src/views/home/home.vue b/seller/src/views/home/home.vue
index 650b7acec..78a45760e 100644
--- a/seller/src/views/home/home.vue
+++ b/seller/src/views/home/home.vue
@@ -207,7 +207,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import defaultLogo from "@/assets/logo1.png";
 import { getSellerHomeData, getHomeNotice } from "@/api/index";
 import { getOrderOverView, goodsStatistics } from "@/api/goods";
@@ -217,6 +219,12 @@ import { getIMDetail } from "@/api/common";
 import { seeArticle } from "@/api/pages";
 import Cookies from "js-cookie";
 import { userMsg } from "@/api/index";
+import { Message } from "@/utils/message";
+import { getStore } from "@/libs/storage";
+
+defineOptions({ name: "home" });
+
+const router = useRouter();
 
 const HOME_ROUTE_TARGETS = {
   orderList: { name: "orderList", path: "/order/orderList" },
@@ -237,161 +245,153 @@ const HOME_ROUTE_TARGETS = {
 
 const AFTER_SALE_RETURN_GOODS_STATUSES = ["PASS", "BUYER_RETURN"];
 
-export default {
-  name: "home",
-  data() {
-    return {
-      defaultLogo,
-      noticeFlage: false,
-      homeData: {},
-      overviewToday: {},
-      overviewYesterday: {},
-      topGoodsData: [],
-      afterSaleNumData: {},
-      procurementStatusCount: {},
-      userData: {},
-      notices: "",
-      noticesDetail: {
-        title: "",
-      },
-      IMLink: "",
-      load: false,
-    };
-  },
-  methods: {
-    navigateAfterSale(serviceStatus) {
-      const routeKey = AFTER_SALE_RETURN_GOODS_STATUSES.includes(serviceStatus)
-        ? "returnGoodsOrder"
-        : "returnMoneyOrder";
-      this.navigateTo(routeKey, { serviceStatus });
-    },
-    navigateToProcurementAudit() {
-      this.navigateTo("procurementPurchaseOrderList", { status: "SUBMITTED" });
-    },
-    navigateTo(key, query) {
-      const target = HOME_ROUTE_TARGETS[key] || { name: key };
-      if (target.name && this.$router.hasRoute(target.name)) {
-        this.$router.push({ name: target.name, query });
-        return;
-      }
-      if (target.path) {
-        const resolved = this.$router.resolve({ path: target.path, query });
-        if (resolved.matched.length > 0) {
-          this.$router.push({ path: target.path, query });
-          return;
-        }
-      }
-      this.$Message.warning("暂无权限访问该页面");
-    },
-    compareText(today, yesterday) {
-      const t = Number(today) || 0;
-      const y = Number(yesterday) || 0;
-      if (y === 0) {
-        return t > 0 ? "↑ --" : "—";
-      }
-      const rate = (((t - y) / y) * 100).toFixed(1);
-      if (t > y) return `↑ ${rate}%`;
-      if (t < y) return `↓ ${Math.abs(rate)}%`;
-      return "—";
-    },
-    compareClass(today, yesterday) {
-      const t = Number(today) || 0;
-      const y = Number(yesterday) || 0;
-      if (t > y) return "compare-up";
-      if (t < y) return "compare-down";
-      return "compare-flat";
-    },
-    // ElProgress 的 percentage 必须是 0-100 的数字，评分缺失/异常时兜底为 0
-    scorePercent(score) {
-      const n = Number(score) * 20;
-      return Number.isFinite(n) ? Math.min(100, Math.max(0, n)) : 0;
-    },
-    async init() {
-      const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
-      this.userData = userInfo;
+const noticeFlage = ref(false);
+const homeData = ref({});
+const overviewToday = ref({});
+const overviewYesterday = ref({});
+const topGoodsData = ref([]);
+const afterSaleNumData = ref({});
+const procurementStatusCount = ref({});
+const userData = ref({});
+const notices = ref("");
+const noticesDetail = ref({
+  title: "",
+});
+const IMLink = ref("");
+const load = ref(false);
 
-      const res = await getHomeNotice();
-      if (res.success) {
-        this.notices = res.result.records;
-      }
-    },
-    async clickLinkNotices(val) {
-      const res = await seeArticle(val.id);
-      if (res.success) {
-        this.noticesDetail = res.result;
-        this.noticeFlage = true;
-      }
-    },
-    async im() {
-      const accessToken = this.getStore("accessToken");
-      this.load = true;
-      await this.getIMDetailMethods();
-      const userInfo = await userMsg();
-      this.load = false;
-      if (userInfo.success && this.IMLink) {
-        window.open(`${this.IMLink}?token=` + accessToken);
-      } else {
-        this.$Message.error("请登录后再联系客服");
-      }
-    },
-    async getIMDetailMethods() {
-      const res = await getIMDetail();
-      if (res.success) {
-        this.IMLink = res.result;
-      }
-    },
-    async getHomeData() {
-      const res = await getSellerHomeData();
-      if (res.success) {
-        this.homeData = res.result;
-      }
-    },
-    async loadOverview() {
-      const year = new Date().getFullYear();
-      const [todayRes, yesterdayRes] = await Promise.all([
-        getOrderOverView({ searchType: "TODAY", year }),
-        getOrderOverView({ searchType: "YESTERDAY", year }),
-      ]);
-      if (todayRes.success) {
-        this.overviewToday = todayRes.result || {};
-      }
-      if (yesterdayRes.success) {
-        this.overviewYesterday = yesterdayRes.result || {};
-      }
-    },
-    async loadSalesRank() {
-      const year = new Date().getFullYear();
-      const res = await goodsStatistics({
-        searchType: "LAST_SEVEN",
-        year,
-        type: "NUM",
-      });
-      if (res.success && res.result) {
-        this.topGoodsData = res.result.slice(0, 10);
-      }
-    },
-    async loadAfterSaleNum() {
-      const res = await getAfterSaleNumVO({});
-      if (res.success) {
-        this.afterSaleNumData = res.result || {};
-      }
-    },
-    async loadProcurementStatusCount() {
-      const res = await getProcurementOrderStatusCount({});
-      if (res.success) {
-        this.procurementStatusCount = res.result || {};
-      }
-    },
-  },
-  mounted() {
-    this.init();
-    this.getHomeData();
-    this.loadOverview();
-    this.loadSalesRank();
-    this.loadAfterSaleNum();
-    this.loadProcurementStatusCount();
-  },
-};
+function navigateAfterSale(serviceStatus) {
+  const routeKey = AFTER_SALE_RETURN_GOODS_STATUSES.includes(serviceStatus)
+    ? "returnGoodsOrder"
+    : "returnMoneyOrder";
+  navigateTo(routeKey, { serviceStatus });
+}
+function navigateToProcurementAudit() {
+  navigateTo("procurementPurchaseOrderList", { status: "SUBMITTED" });
+}
+function navigateTo(key, query) {
+  const target = HOME_ROUTE_TARGETS[key] || { name: key };
+  if (target.name && router.hasRoute(target.name)) {
+    router.push({ name: target.name, query });
+    return;
+  }
+  if (target.path) {
+    const resolved = router.resolve({ path: target.path, query });
+    if (resolved.matched.length > 0) {
+      router.push({ path: target.path, query });
+      return;
+    }
+  }
+  Message.warning("暂无权限访问该页面");
+}
+function compareText(today, yesterday) {
+  const t = Number(today) || 0;
+  const y = Number(yesterday) || 0;
+  if (y === 0) {
+    return t > 0 ? "↑ --" : "—";
+  }
+  const rate = (((t - y) / y) * 100).toFixed(1);
+  if (t > y) return `↑ ${rate}%`;
+  if (t < y) return `↓ ${Math.abs(rate)}%`;
+  return "—";
+}
+function compareClass(today, yesterday) {
+  const t = Number(today) || 0;
+  const y = Number(yesterday) || 0;
+  if (t > y) return "compare-up";
+  if (t < y) return "compare-down";
+  return "compare-flat";
+}
+// ElProgress 的 percentage 必须是 0-100 的数字，评分缺失/异常时兜底为 0
+function scorePercent(score) {
+  const n = Number(score) * 20;
+  return Number.isFinite(n) ? Math.min(100, Math.max(0, n)) : 0;
+}
+async function init() {
+  const userInfo = JSON.parse(Cookies.get("userInfoSeller"));
+  userData.value = userInfo;
+
+  const res = await getHomeNotice();
+  if (res.success) {
+    notices.value = res.result.records;
+  }
+}
+async function clickLinkNotices(val) {
+  const res = await seeArticle(val.id);
+  if (res.success) {
+    noticesDetail.value = res.result;
+    noticeFlage.value = true;
+  }
+}
+async function im() {
+  const accessToken = getStore("accessToken");
+  load.value = true;
+  await getIMDetailMethods();
+  const userInfo = await userMsg();
+  load.value = false;
+  if (userInfo.success && IMLink.value) {
+    window.open(`${IMLink.value}?token=` + accessToken);
+  } else {
+    Message.error("请登录后再联系客服");
+  }
+}
+async function getIMDetailMethods() {
+  const res = await getIMDetail();
+  if (res.success) {
+    IMLink.value = res.result;
+  }
+}
+async function getHomeData() {
+  const res = await getSellerHomeData();
+  if (res.success) {
+    homeData.value = res.result;
+  }
+}
+async function loadOverview() {
+  const year = new Date().getFullYear();
+  const [todayRes, yesterdayRes] = await Promise.all([
+    getOrderOverView({ searchType: "TODAY", year }),
+    getOrderOverView({ searchType: "YESTERDAY", year }),
+  ]);
+  if (todayRes.success) {
+    overviewToday.value = todayRes.result || {};
+  }
+  if (yesterdayRes.success) {
+    overviewYesterday.value = yesterdayRes.result || {};
+  }
+}
+async function loadSalesRank() {
+  const year = new Date().getFullYear();
+  const res = await goodsStatistics({
+    searchType: "LAST_SEVEN",
+    year,
+    type: "NUM",
+  });
+  if (res.success && res.result) {
+    topGoodsData.value = res.result.slice(0, 10);
+  }
+}
+async function loadAfterSaleNum() {
+  const res = await getAfterSaleNumVO({});
+  if (res.success) {
+    afterSaleNumData.value = res.result || {};
+  }
+}
+async function loadProcurementStatusCount() {
+  const res = await getProcurementOrderStatusCount({});
+  if (res.success) {
+    procurementStatusCount.value = res.result || {};
+  }
+}
+
+onMounted(() => {
+  init();
+  getHomeData();
+  loadOverview();
+  loadSalesRank();
+  loadAfterSaleNum();
+  loadProcurementStatusCount();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/lili-components/affix-time.vue b/seller/src/views/lili-components/affix-time.vue
index fbf85908a..dc0a7ca1f 100644
--- a/seller/src/views/lili-components/affix-time.vue
+++ b/seller/src/views/lili-components/affix-time.vue
@@ -46,120 +46,117 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getShopListData } from "@/api/shops.js";
 
-export default {
-  props: ["closeShop"],
-  data() {
-    return {
-      month: "",
-      selectedWay: {
-        title: "过去7天",
-        selected: true,
-        searchType: "LAST_SEVEN",
-      },
-      storeId: "",
-      dates: [],
-      params: {
-        pageNumber: 1,
-        pageSize: 100,
-        storeName: "",
-      },
-      dateList: [
-        { title: "今天", selected: false, searchType: "TODAY" },
-        { title: "昨天", selected: false, searchType: "YESTERDAY" },
-        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
-        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
-      ],
-      originDateList: [
-        { title: "今天", selected: false, searchType: "TODAY" },
-        { title: "昨天", selected: false, searchType: "YESTERDAY" },
-        { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
-        { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
-      ],
-      shopTotal: 0,
-      shopsData: [],
+const props = defineProps(["closeShop"]);
+const emit = defineEmits(["selected"]);
+
+const month = ref("");
+const selectedWay = ref({
+  title: "过去7天",
+  selected: true,
+  searchType: "LAST_SEVEN",
+});
+const storeId = ref("");
+const dates = ref([]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 100,
+  storeName: "",
+});
+const dateList = ref([
+  { title: "今天", selected: false, searchType: "TODAY" },
+  { title: "昨天", selected: false, searchType: "YESTERDAY" },
+  { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+  { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
+]);
+const originDateList = ref([
+  { title: "今天", selected: false, searchType: "TODAY" },
+  { title: "昨天", selected: false, searchType: "YESTERDAY" },
+  { title: "过去7天", selected: true, searchType: "LAST_SEVEN" },
+  { title: "过去30天", selected: false, searchType: "LAST_THIRTY" },
+]);
+const shopTotal = ref(0);
+const shopsData = ref([]);
+
+function getShopList() {
+  getShopListData(params).then((res) => {
+    if (res.success) {
+      shopTotal.value = res.result.total;
+      shopsData.value = res.result.records || [];
+    }
+  });
+}
+function changeshop() {
+  selectedWay.value.storeId = storeId.value;
+  emit("selected", selectedWay.value);
+}
+function getFiveYears() {
+  const getYear = new Date().getFullYear();
+  const lastFiveYear = getYear - 5;
+  const maxMonth = new Date().getMonth() + 1;
+  const dateArr = [];
+  for (let year = lastFiveYear; year <= getYear; year++) {
+    for (let month = 1; month <= 12; month++) {
+      if (year === getYear && month > maxMonth) {
+        continue;
+      }
+      dateArr.push({ year, month });
+    }
+  }
+  dates.value = dateArr.reverse();
+}
+function changeSelect(e) {
+  month.value = e;
+  if (month.value) {
+    dateList.value.forEach((res) => {
+      res.selected = false;
+    });
+    const parts = String(month.value).split("-");
+    selectedWay.value = {
+      ...selectedWay.value,
+      year: parts[0],
+      month: parts[1],
+      searchType: "",
+      storeId: storeId.value,
     };
-  },
-  mounted() {
-    this.getFiveYears();
-    if (!this.closeShop) this.getShopList();
-  },
-  methods: {
-    getShopList() {
-      getShopListData(this.params).then((res) => {
-        if (res.success) {
-          this.shopTotal = res.result.total;
-          this.shopsData = res.result.records || [];
-        }
-      });
-    },
-    changeshop() {
-      this.selectedWay.storeId = this.storeId;
-      this.$emit("selected", this.selectedWay);
-    },
-    getFiveYears() {
-      const getYear = new Date().getFullYear();
-      const lastFiveYear = getYear - 5;
-      const maxMonth = new Date().getMonth() + 1;
-      const dates = [];
-      for (let year = lastFiveYear; year <= getYear; year++) {
-        for (let month = 1; month <= 12; month++) {
-          if (year === getYear && month > maxMonth) {
-            continue;
-          }
-          dates.push({ year, month });
-        }
-      }
-      this.dates = dates.reverse();
-    },
-    changeSelect(e) {
-      this.month = e;
-      if (this.month) {
-        this.dateList.forEach((res) => {
-          res.selected = false;
-        });
-        const parts = String(this.month).split("-");
-        this.selectedWay = {
-          ...this.selectedWay,
-          year: parts[0],
-          month: parts[1],
-          searchType: "",
-          storeId: this.storeId,
-        };
-        this.$emit("selected", this.selectedWay);
-      } else {
-        const current =
-          this.dateList.find((item) => item.selected) ||
-          this.dateList.find((item) => item.title === this.selectedWay.title) ||
-          this.dateList.find((item) => item.searchType === "LAST_SEVEN");
-        this.clickBreadcrumb(current);
-      }
-    },
-    clickBreadcrumb(item) {
-      if (!item) return;
-      let currentIndex;
-      this.dateList.forEach((res, index) => {
-        res.selected = false;
-        if (res.title === item.title) {
-          currentIndex = index;
-        }
-      });
-      item.selected = true;
-      item.storeId = this.storeId;
-      this.month = "";
-      if (item.searchType === "") {
-        const origin = this.originDateList[currentIndex];
-        item.searchType = (origin && origin.searchType) || "LAST_SEVEN";
-      }
-      this.selectedWay = item;
-      this.selectedWay.year = new Date().getFullYear();
-      this.selectedWay.month = "";
-      this.$emit("selected", this.selectedWay);
-    },
-  },
-};
+    emit("selected", selectedWay.value);
+  } else {
+    const current =
+      dateList.value.find((item) => item.selected) ||
+      dateList.value.find((item) => item.title === selectedWay.value.title) ||
+      dateList.value.find((item) => item.searchType === "LAST_SEVEN");
+    clickBreadcrumb(current);
+  }
+}
+function clickBreadcrumb(item) {
+  if (!item) return;
+  let currentIndex;
+  dateList.value.forEach((res, index) => {
+    res.selected = false;
+    if (res.title === item.title) {
+      currentIndex = index;
+    }
+  });
+  item.selected = true;
+  item.storeId = storeId.value;
+  month.value = "";
+  if (item.searchType === "") {
+    const origin = originDateList.value[currentIndex];
+    item.searchType = (origin && origin.searchType) || "LAST_SEVEN";
+  }
+  selectedWay.value = item;
+  selectedWay.value.year = new Date().getFullYear();
+  selectedWay.value.month = "";
+  emit("selected", selectedWay.value);
+}
+
+onMounted(() => {
+  getFiveYears();
+  if (!props.closeShop) getShopList();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/lili-components/editor/index.vue b/seller/src/views/lili-components/editor/index.vue
index a2e9de042..afd1854b9 100644
--- a/seller/src/views/lili-components/editor/index.vue
+++ b/seller/src/views/lili-components/editor/index.vue
@@ -8,172 +8,174 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import {
+  computed,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "vue";
 import { initEditor } from "@/views/lili-components/editor/config";
 import { loadTinymce } from "@/views/lili-components/editor/load-tinymce";
 
 import uploadImage from "@/views/lili-components/editor/upload-image.vue";
-export default {
-  components:{uploadImage},
-  name: "Tinymce",
-  props: {
-    modelValue: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    height:{
-      type:String,
-      default:'500px'
-    }
-  },
-  emits: ["update:modelValue", "input"],
-  data() {
-    return {
-      // 引入编辑器的配置
-      initEditor,
-      hasChange: false, // 标记内容是否有更改
-      hasInit: false, // 标记编辑器是否已初始化
-      pendingContent: null, // 编辑器未就绪时暂存待回填内容
-      tinymceId:
-        "tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""), // 生成唯一的编辑器 ID
-      fullscreen: false, // 标记编辑器是否处于全屏模式
-      toolbar: [], // 工具栏配置
-      content: "", // 编辑器内容
-    };
-  },
-  computed: {
-    bindValue() {
-      return this.modelValue ?? this.value ?? "";
-    },
-  },
-  watch: {
-    bindValue: {
-      handler(val) {
-        if (!this.hasChange) {
-          this.setContent(val || "");
-        }
-      },
-    },
-  },
-  methods: {
-    emitContent(content) {
-      this.$emit("update:modelValue", content);
-      this.$emit("input", content);
-    },
-    getEditor() {
-      return window.tinymce?.get(this.tinymceId);
-    },
-    isEditorReady() {
-      const editor = this.getEditor();
-      return !!(editor && editor.initialized && editor.dom);
-    },
-    // 数据返回并给富文本框插入图片
-    insertImage(arr){
-      const editor = this.getEditor();
-      if (!editor || !this.isEditorReady()) {
-        return;
-      }
-      arr.forEach(v => editor.insertContent(`<img  src="${v}" >`))
-    },
-    init() {
-      // 初始化编辑器
-      this.initTinymce();
-    },
-    initTinymce() {
-      if (this.getEditor()) {
-        return;
-      }
-      const _this = this;
-      window.tinymce.init({
-        selector: `#${this.tinymceId}`,
-        convert_urls: false,
-        init_instance_callback: (editor) => {
-          _this.hasInit = true;
-          const initial = _this.pendingContent ?? _this.bindValue;
-          _this.pendingContent = null;
-          if (initial) {
-            _this.applyContent(editor, initial);
-          }
-          // 不监听 NodeChange/SetContent：初始化或回填时会把空内容写回 v-model，覆盖已加载的商品描述
-          editor.on("input change undo redo KeyUp", () => {
-            _this.hasChange = true;
-            _this.emitContent(editor.getContent());
-          });
-        },
-        setup(editor) {
-          // 监听全屏状态变化
-          editor.on("FullscreenStateChanged", (e) => {
-            _this.fullscreen = e.state;
-          });
-        },
-        ..._this.initEditor,
 
-        height:this.height
+defineOptions({ name: "Tinymce" });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: String,
+    default: "",
+  },
+  height: {
+    type: String,
+    default: "500px",
+  },
+});
+const emit = defineEmits(["update:modelValue", "input"]);
+
+// 引入编辑器的配置（data 中的 initEditor 与 import 同名，直接使用 import）
+const hasChange = ref(false); // 标记内容是否有更改
+const hasInit = ref(false); // 标记编辑器是否已初始化
+const pendingContent = ref(null); // 编辑器未就绪时暂存待回填内容
+const tinymceId =
+  "tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""); // 生成唯一的编辑器 ID
+const fullscreen = ref(false); // 标记编辑器是否处于全屏模式
+const toolbar = ref([]); // 工具栏配置
+const content = ref(""); // 编辑器内容
+
+const bindValue = computed(() => {
+  return props.modelValue ?? props.value ?? "";
+});
+
+watch(bindValue, (val) => {
+  if (!hasChange.value) {
+    setContent(val || "");
+  }
+});
+
+function emitContent(val) {
+  emit("update:modelValue", val);
+  emit("input", val);
+}
+function getEditor() {
+  return window.tinymce?.get(tinymceId);
+}
+function isEditorReady() {
+  const editor = getEditor();
+  return !!(editor && editor.initialized && editor.dom);
+}
+// 数据返回并给富文本框插入图片
+function insertImage(arr) {
+  const editor = getEditor();
+  if (!editor || !isEditorReady()) {
+    return;
+  }
+  arr.forEach((v) => editor.insertContent(`<img  src="${v}" >`));
+}
+function init() {
+  // 初始化编辑器
+  initTinymce();
+}
+function initTinymce() {
+  if (getEditor()) {
+    return;
+  }
+  window.tinymce.init({
+    selector: `#${tinymceId}`,
+    convert_urls: false,
+    init_instance_callback: (editor) => {
+      hasInit.value = true;
+      const initial = pendingContent.value ?? bindValue.value;
+      pendingContent.value = null;
+      if (initial) {
+        applyContent(editor, initial);
+      }
+      // 不监听 NodeChange/SetContent：初始化或回填时会把空内容写回 v-model，覆盖已加载的商品描述
+      editor.on("input change undo redo KeyUp", () => {
+        hasChange.value = true;
+        emitContent(editor.getContent());
       });
     },
-    applyContent(editor, content) {
-      if (!editor || !editor.initialized || !editor.dom) {
-        return false;
-      }
-      try {
-        editor.setContent(content);
-        return true;
-      } catch (e) {
-        console.warn("tinymce setContent failed", e);
-        return false;
-      }
+    setup(editor) {
+      // 监听全屏状态变化
+      editor.on("FullscreenStateChanged", (e) => {
+        fullscreen.value = e.state;
+      });
     },
-    setContent(value) {
-      const content = value || "";
-      this.hasChange = false;
-      if (!this.isEditorReady()) {
-        this.pendingContent = content;
-        return;
-      }
-      this.pendingContent = null;
-      this.applyContent(this.getEditor(), content);
-      this.emitContent(content);
-    },
-    getContent() {
-      const editor = this.getEditor();
-      if (!editor || !editor.initialized) {
-        return this.pendingContent ?? this.bindValue ?? "";
-      }
-      return editor.getContent();
-    },
-    destroyTinymce() {
-      const tinymce = this.getEditor();
+    ...initEditor,
 
-      if (tinymce) {
-        // 销毁编辑器实例
-        tinymce.destroy();
-      }
-    },
-  },
-  mounted() {
-    // 编辑器脚本改为按需加载，加载完成后再初始化
+    height: props.height,
+  });
+}
+function applyContent(editor, val) {
+  if (!editor || !editor.initialized || !editor.dom) {
+    return false;
+  }
+  try {
+    editor.setContent(val);
+    return true;
+  } catch (e) {
+    console.warn("tinymce setContent failed", e);
+    return false;
+  }
+}
+function setContent(value) {
+  const val = value || "";
+  hasChange.value = false;
+  if (!isEditorReady()) {
+    pendingContent.value = val;
+    return;
+  }
+  pendingContent.value = null;
+  applyContent(getEditor(), val);
+  emitContent(val);
+}
+function getContent() {
+  const editor = getEditor();
+  if (!editor || !editor.initialized) {
+    return pendingContent.value ?? bindValue.value ?? "";
+  }
+  return editor.getContent();
+}
+function destroyTinymce() {
+  const tinymce = getEditor();
+
+  if (tinymce) {
+    // 销毁编辑器实例
+    tinymce.destroy();
+  }
+}
+
+onMounted(() => {
+  // 编辑器脚本改为按需加载，加载完成后再初始化
+  loadTinymce().then(() => {
+    init();
+  });
+});
+onActivated(() => {
+  if (window.tinymce) {
+    initTinymce();
+  } else {
     loadTinymce().then(() => {
-      this.init();
+      initTinymce();
     });
-  },
-  activated() {
-    if (window.tinymce) {
-      this.initTinymce();
-    } else {
-      loadTinymce().then(() => {
-        this.initTinymce();
-      });
-    }
-  },
-  deactivated() {
-    this.destroyTinymce();
-  },
-  unmounted() {
-    this.destroyTinymce();
-  },
-};
+  }
+});
+onDeactivated(() => {
+  destroyTinymce();
+});
+onUnmounted(() => {
+  destroyTinymce();
+});
+
+// 父组件通过 ref 调用：goodsOperationSec 使用 getEditor/setContent/getContent
+defineExpose({ getEditor, setContent, getContent });
 </script>
diff --git a/seller/src/views/lili-components/editor/upload-image.vue b/seller/src/views/lili-components/editor/upload-image.vue
index 232780327..a110e6a8a 100644
--- a/seller/src/views/lili-components/editor/upload-image.vue
+++ b/seller/src/views/lili-components/editor/upload-image.vue
@@ -32,7 +32,7 @@
         </vuedraggable>
         <div class="upload-box">
           <el-upload
-            ref="upload"
+            ref="uploadRef"
             :action="uploadFileUrl"
             :headers="accessToken"
             :show-file-list="false"
@@ -64,7 +64,7 @@
       @closed="resetOssSelection"
     >
       <OssManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="showOssManager"
         :hide-select-footer="true"
@@ -84,123 +84,120 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
 import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
 import vuedraggable from "vuedraggable";
 import { uploadFile } from "@/libs/axios";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import OssManage from "@/views/sys/oss-manage/ossManage";
 
-export default {
-  name: "upload-image",
-  components: {
-    OssManage,
-    vuedraggable,
-    Delete,
-    Plus,
-    ZoomIn,
-  },
-  data() {
-    return {
-      show: false,
-      uploadFileUrl: uploadFile,
-      accessToken: {},
-      showOssManager: false,
-      images: [],
-      selectedImage: [],
-      viewImage: false,
-      previewUrl: "",
-    };
-  },
-  mounted() {
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
-  },
-  methods: {
-    draggableItemKey(item) {
-      return item?.url || item;
-    },
-    handleClickUploadImage() {
-      this.show = true;
-    },
-    handleView(url) {
-      this.previewUrl = url;
-      this.viewImage = true;
-    },
-    callback() {
-      const formatImages = this.images.map((item) => item.url);
-      this.$emit("callback", formatImages);
-      this.show = false;
-    },
-    handleRemoveGoodsPicture(__index) {
-      this.images.splice(__index, 1);
-    },
-    handleBeforeUpload(file) {
-      const okType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
-      if (!okType) {
-        this.$Message.warning("文件 " + file.name + " 的格式不正确，请选择 jpg/jpeg/png");
-        return false;
-      }
-      if (file.size / 1024 / 1024 > 10) {
-        this.$Message.warning("图片大小不能超过10MB");
-        return false;
-      }
-      return true;
-    },
-    handleSuccessGoodsPicture(res) {
-      const url = res?.result ?? res?.data?.result;
-      if (url) {
-        this.images.push({ url });
-      } else {
-        this.$Message.error(res?.message || "上传失败");
-      }
-    },
-    handleUploadError(err) {
-      this.$Message.error(err?.message || String(err));
-    },
-    confirmUrls() {
-      this.applySelectedImages();
-      this.showOssManager = false;
-    },
-    cancelOssImport() {
-      this.selectedImage = [];
-      this.showOssManager = false;
-    },
-    resetOssSelection() {
-      this.selectedImage = [];
-    },
-    handleOssSelected(list) {
-      this.selectedImage = Array.isArray(list) ? list : [];
-    },
-    parseOssSelectionUrl(item) {
-      if (!item) {
-        return "";
-      }
-      if (typeof item === "string") {
-        const index = item.indexOf(",");
-        return index >= 0 ? item.slice(index + 1) : item;
-      }
-      return item.url || "";
-    },
-    applySelectedImages() {
-      (this.selectedImage || []).forEach((item) => {
-        const url = this.parseOssSelectionUrl(item);
-        if (url) {
-          this.images.push({ url });
-        }
-      });
-    },
-    importOSS() {
-      this.selectedImage = [];
-      this.showOssManager = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "upload-image" });
+
+const emit = defineEmits(["callback"]);
+
+const show = ref(false);
+const uploadFileUrl = uploadFile;
+const accessToken = ref({});
+const showOssManager = ref(false);
+const images = ref([]);
+const selectedImage = ref([]);
+const viewImage = ref(false);
+const previewUrl = ref("");
+
+// 模板 ref：upload/ossManage 原名与顶层变量无冲突，但统一改名避免与后续变量互相覆盖
+const uploadRef = ref(null);
+const ossManageRef = ref(null);
+
+onMounted(() => {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+});
+
+function draggableItemKey(item) {
+  return item?.url || item;
+}
+function handleClickUploadImage() {
+  show.value = true;
+}
+function handleView(url) {
+  previewUrl.value = url;
+  viewImage.value = true;
+}
+function callback() {
+  const formatImages = images.value.map((item) => item.url);
+  emit("callback", formatImages);
+  show.value = false;
+}
+function handleRemoveGoodsPicture(__index) {
+  images.value.splice(__index, 1);
+}
+function handleBeforeUpload(file) {
+  const okType = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
+  if (!okType) {
+    Message.warning("文件 " + file.name + " 的格式不正确，请选择 jpg/jpeg/png");
+    return false;
+  }
+  if (file.size / 1024 / 1024 > 10) {
+    Message.warning("图片大小不能超过10MB");
+    return false;
+  }
+  return true;
+}
+function handleSuccessGoodsPicture(res) {
+  const url = res?.result ?? res?.data?.result;
+  if (url) {
+    images.value.push({ url });
+  } else {
+    Message.error(res?.message || "上传失败");
+  }
+}
+function handleUploadError(err) {
+  Message.error(err?.message || String(err));
+}
+function confirmUrls() {
+  applySelectedImages();
+  showOssManager.value = false;
+}
+function cancelOssImport() {
+  selectedImage.value = [];
+  showOssManager.value = false;
+}
+function resetOssSelection() {
+  selectedImage.value = [];
+}
+function handleOssSelected(list) {
+  selectedImage.value = Array.isArray(list) ? list : [];
+}
+function parseOssSelectionUrl(item) {
+  if (!item) {
+    return "";
+  }
+  if (typeof item === "string") {
+    const index = item.indexOf(",");
+    return index >= 0 ? item.slice(index + 1) : item;
+  }
+  return item.url || "";
+}
+function applySelectedImages() {
+  (selectedImage.value || []).forEach((item) => {
+    const url = parseOssSelectionUrl(item);
+    if (url) {
+      images.value.push({ url });
+    }
+  });
+}
+function importOSS() {
+  selectedImage.value = [];
+  showOssManager.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/lili-components/multiple-region.vue b/seller/src/views/lili-components/multiple-region.vue
index a08ac9293..f9864f00d 100644
--- a/seller/src/views/lili-components/multiple-region.vue
+++ b/seller/src/views/lili-components/multiple-region.vue
@@ -9,7 +9,7 @@
   >
     <div v-loading="spinShow" class="flex">
       <el-tree
-        ref="tree"
+        ref="treeRef"
         class="tree"
         :data="data"
         :props="treeProps"
@@ -23,175 +23,184 @@
     </template>
   </el-dialog>
 </template>
-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted } from "vue";
 import { getAllCity } from "@/api/index";
-export default {
-  data() {
-    return {
-      switched: false,
-      spinShow: false,
-      data: [],
-      selectedWay: [],
-      callBackData: "",
-      treeProps: {
-        label: "title",
-        children: "children",
-      },
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    clear() {
-      this.data = [];
-      this.selectedWay = [];
-      this.init();
-    },
-    cancel() {
-      this.switched = false;
-      this.data.forEach((item) => {
-        item.disabled = false;
-        item.children.forEach((child) => {
-          child.disabled = false;
-        });
-      });
-    },
-    open(val, index) {
-      if (val) {
-        let checkedData = this.$store.state.shipTemplate;
-        let checkData = [];
-        let disabledData = checkedData.filter((item, i) => {
-          if (i != index) {
-            return i != index;
-          } else {
-            checkData.push(item);
-          }
-        });
-        checkData.forEach((check) => {
-          check.areaId.split(",").forEach((ids) => {
-            this.data.forEach((item) => {
-              if (check.selectedAll) {
-                check.area.split(",").forEach((area) => {
-                  if (area == item.name) {
-                    item.checked = true;
-                  }
-                });
-              }
-              item.children.forEach((child) => {
-                if (item.checked) {
-                  child.checked = true;
-                }
-                if (child.id == ids) {
-                  child.checked = true;
-                }
-              });
-            });
-          });
-        });
-        disabledData.forEach((dis) => {
-          dis.areaId.split(",").forEach((ids) => {
-            this.data.forEach((item) => {
-              if (dis.selectedAll) {
-                dis.area.split(",").forEach((area) => {
-                  if (area == item.name) {
-                    item.disabled = true;
-                  }
-                });
-              }
-              item.children.forEach((child) => {
-                if (item.disabled) {
-                  child.disabled = true;
-                } else if (child.id == ids) {
-                  child.disabled = true;
-                }
-              });
-            });
-          });
-        });
-        this.syncTreeCheckedKeys();
+import { useAppStore } from "@/stores/app";
+
+const emit = defineEmits(["selected"]);
+
+const appStore = useAppStore();
+
+const treeRef = ref(null);
+const switched = ref(false);
+const spinShow = ref(false);
+const data = ref([]);
+const selectedWay = ref([]);
+const callBackData = ref("");
+const treeProps = reactive({
+  label: "title",
+  children: "children",
+});
+
+onMounted(() => {
+  init();
+});
+
+function clear() {
+  data.value = [];
+  selectedWay.value = [];
+  init();
+}
+
+function cancel() {
+  switched.value = false;
+  data.value.forEach((item) => {
+    item.disabled = false;
+    item.children.forEach((child) => {
+      child.disabled = false;
+    });
+  });
+}
+
+function open(val, index) {
+  if (val) {
+    let checkedData = appStore.shipTemplates;
+    let checkData = [];
+    let disabledData = checkedData.filter((item, i) => {
+      if (i != index) {
+        return i != index;
+      } else {
+        checkData.push(item);
       }
-      this.switched = true;
-    },
-    syncTreeCheckedKeys() {
-      this.$nextTick(() => {
-        const keys = [];
-        this.data.forEach((item) => {
-          if (item.checked) {
-            keys.push(item.id);
+    });
+    checkData.forEach((check) => {
+      check.areaId.split(",").forEach((ids) => {
+        data.value.forEach((item) => {
+          if (check.selectedAll) {
+            check.area.split(",").forEach((area) => {
+              if (area == item.name) {
+                item.checked = true;
+              }
+            });
           }
           item.children.forEach((child) => {
-            if (child.checked) {
-              keys.push(child.id);
+            if (item.checked) {
+              child.checked = true;
+            }
+            if (child.id == ids) {
+              child.checked = true;
             }
           });
         });
-        if (this.$refs.tree) {
-          this.$refs.tree.setCheckedKeys(keys);
+      });
+    });
+    disabledData.forEach((dis) => {
+      dis.areaId.split(",").forEach((ids) => {
+        data.value.forEach((item) => {
+          if (dis.selectedAll) {
+            dis.area.split(",").forEach((area) => {
+              if (area == item.name) {
+                item.disabled = true;
+              }
+            });
+          }
+          item.children.forEach((child) => {
+            if (item.disabled) {
+              child.disabled = true;
+            } else if (child.id == ids) {
+              child.disabled = true;
+            }
+          });
+        });
+      });
+    });
+    syncTreeCheckedKeys();
+  }
+  switched.value = true;
+}
+
+function syncTreeCheckedKeys() {
+  nextTick(() => {
+    const keys = [];
+    data.value.forEach((item) => {
+      if (item.checked) {
+        keys.push(item.id);
+      }
+      item.children.forEach((child) => {
+        if (child.checked) {
+          keys.push(child.id);
         }
       });
-    },
-    submit() {
-      const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);
-      const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes();
-      let list = [...checkedNodes, ...halfCheckedNodes];
+    });
+    if (treeRef.value) {
+      treeRef.value.setCheckedKeys(keys);
+    }
+  });
+}
 
-      let sort = [];
-      list.forEach((item) => {
-        item.selectedList = [];
-        item.selectedAll = false;
-        if (item.level == "province" && !item.disabled) {
-          sort.push({ ...item });
-        }
-        sort.forEach((sortItem) => {
-          if (item.level != "province" && sortItem.id == item.parentId && !item.disabled) {
-            sortItem.selectedList.push({ ...item });
-          }
-        });
-      });
+function submit() {
+  const checkedNodes = treeRef.value.getCheckedNodes(false, true);
+  const halfCheckedNodes = treeRef.value.getHalfCheckedNodes();
+  let list = [...checkedNodes, ...halfCheckedNodes];
 
-      this.data.forEach((whether) => {
-        sort.forEach((item) => {
-          if (
-            item.id == whether.id &&
-            item.selectedList.length == whether.children.length
-          ) {
-            item.selectedList.forEach((child) => {
-              child.selectedAll = true;
-            });
-            item.selectedAll = true;
-          }
-        });
-      });
+  let sort = [];
+  list.forEach((item) => {
+    item.selectedList = [];
+    item.selectedAll = false;
+    if (item.level == "province" && !item.disabled) {
+      sort.push({ ...item });
+    }
+    sort.forEach((sortItem) => {
+      if (item.level != "province" && sortItem.id == item.parentId && !item.disabled) {
+        sortItem.selectedList.push({ ...item });
+      }
+    });
+  });
 
-      this.$emit("selected", sort);
-      this.cancel();
-    },
-    init() {
-      this.spinShow = true;
-      getAllCity()
-        .then((res) => {
-          if (res.result) {
-            this.data = [];
-            res.result.forEach((item) => {
-              item.children.forEach((child) => {
-                child.title = child.name;
-              });
-              this.data.push({
-                title: item.name,
-                ...item,
-              });
-              this.selectedWay.push({ name: item.name, id: item.id });
-            });
-            this.$store.state.regions = this.data;
-          }
-        })
-        .finally(() => {
-          this.spinShow = false;
+  data.value.forEach((whether) => {
+    sort.forEach((item) => {
+      if (
+        item.id == whether.id &&
+        item.selectedList.length == whether.children.length
+      ) {
+        item.selectedList.forEach((child) => {
+          child.selectedAll = true;
         });
-    },
-  },
-};
+        item.selectedAll = true;
+      }
+    });
+  });
+
+  emit("selected", sort);
+  cancel();
+}
+
+function init() {
+  spinShow.value = true;
+  getAllCity()
+    .then((res) => {
+      if (res.result) {
+        data.value = [];
+        res.result.forEach((item) => {
+          item.children.forEach((child) => {
+            child.title = child.name;
+          });
+          data.value.push({
+            title: item.name,
+            ...item,
+          });
+          selectedWay.value.push({ name: item.name, id: item.id });
+        });
+        appStore.regions = data.value;
+      }
+    })
+    .finally(() => {
+      spinShow.value = false;
+    });
+}
+
+defineExpose({ clear, open });
 </script>
 <style scoped lang="scss">
 .flex {
diff --git a/seller/src/views/lili-dialog/goods-dialog.vue b/seller/src/views/lili-dialog/goods-dialog.vue
index 143cafdc5..926ff99c3 100755
--- a/seller/src/views/lili-dialog/goods-dialog.vue
+++ b/seller/src/views/lili-dialog/goods-dialog.vue
@@ -109,9 +109,9 @@
       </el-form>
       </div>
 
-      <div ref="tableWrap" class="goods-table-wrap">
+      <div ref="tableWrapRef" class="goods-table-wrap">
         <el-table
-          ref="goodsTable"
+          ref="goodsTableRef"
           v-loading="loading"
           :data="goodsData"
           border
@@ -194,7 +194,8 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
 import * as API_Goods from "@/api/goods";
 
 const defaultFilterForm = () => ({
@@ -212,270 +213,273 @@ const defaultFilterForm = () => ({
   stockMax: "",
 });
 
-export default {
-  emits: ["selected"],
-  props: {
-    selectedWay: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  selectedWay: {
+    type: Array,
+    default: () => [],
   },
-  data() {
-    return {
-      type: "multiple",
-      selectedList: [],
-      platformCategoryList: [],
-      shopCategoryList: [],
-      brandList: [],
-      platformCategoryProps: {
-        value: "id",
-        label: "name",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      shopCategoryProps: {
-        value: "value",
-        label: "label",
-        children: "children",
-        checkStrictly: true,
-        emitPath: false,
-      },
-      filterForm: defaultFilterForm(),
-      total: 0,
-      goodsParams: {
-        pageNumber: 1,
-        pageSize: 20,
-        order: "desc",
-        marketEnable: "UPPER",
-        authFlag: "PASS",
-        sort: "createTime",
-      },
-      goodsData: [],
-      loading: false,
-      tableHeight: 400,
-      syncingSelection: false,
-    };
-  },
-  watch: {
-    selectedWay: {
-      handler(val) {
-        this.selectedList = Array.isArray(val) ? val.slice() : [];
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.init();
-    this.$nextTick(this.calcTableHeight);
-    window.addEventListener("resize", this.calcTableHeight);
-  },
-  beforeUnmount() {
-    window.removeEventListener("resize", this.calcTableHeight);
-  },
-  methods: {
-    calcTableHeight() {
-      this.$nextTick(() => {
-        const wrap = this.$refs.tableWrap;
-        if (wrap) {
-          this.tableHeight = Math.max(wrap.clientHeight, 320);
-        }
-      });
-    },
-    onSearchGoods() {
-      this.goodsParams.pageNumber = 1;
-      this.getQueryGoodsList();
-    },
-    resetFilter() {
-      this.filterForm = defaultFilterForm();
-      this.onSearchGoods();
-    },
-    changePageSize(v) {
-      this.goodsParams.pageNumber = v;
-      this.getQueryGoodsList();
-    },
-    buildQueryParams() {
-      const params = {
-        ...this.goodsParams,
-        goodsName: this.filterForm.goodsName || undefined,
-        goodsId: this.filterForm.goodsId || undefined,
-        goodsType: this.filterForm.goodsType || undefined,
-        brandId: this.filterForm.brandId || undefined,
-        storeCategoryPath: this.filterForm.storeCategoryPath || undefined,
-        categoryPath: this.filterForm.categoryPath || undefined,
-        geQuantity: undefined,
-        leQuantity: undefined,
-        geBuyCount: undefined,
-        leBuyCount: undefined,
-        price: undefined,
-      };
+});
+const emit = defineEmits(["selected"]);
 
-      const { priceMin, priceMax, salesMin, salesMax, stockMin, stockMax } = this.filterForm;
-      if (priceMin !== "" && priceMax !== "") {
-        params.price = `${priceMin}_${priceMax}`;
-      } else if (priceMin !== "") {
-        params.price = String(priceMin);
-      } else if (priceMax !== "") {
-        params.price = `0_${priceMax}`;
-      }
-
-      if (stockMin !== "" && stockMin != null) params.geQuantity = Number(stockMin);
-      if (stockMax !== "" && stockMax != null) params.leQuantity = Number(stockMax);
-      if (salesMin !== "" && salesMin != null) params.geBuyCount = Number(salesMin);
-      if (salesMax !== "" && salesMax != null) params.leBuyCount = Number(salesMax);
-
-      return params;
-    },
-    getQueryGoodsList() {
-      this.loading = true;
-      API_Goods.getGoodsSkuData(this.buildQueryParams())
-        .then((res) => {
-          this.initGoods(res);
-        })
-        .finally(() => {
-          this.loading = false;
-          this.calcTableHeight();
-        });
-    },
-    initGoods(res) {
-      const records = res?.result?.records || [];
-      this.total = res?.result?.total || 0;
-      const selectedIds = new Set(
-        (this.selectedList || [])
-          .map((e) => e.id || e.skuId)
-          .filter((id) => id != null)
-          .map(String)
-      );
-      records.forEach((item) => {
-        item.___type = "goods";
-        item.selected = selectedIds.has(String(item.id));
-      });
-      this.goodsData = records;
-      this.syncTableSelection();
-    },
-    syncTableSelection() {
-      this.$nextTick(() => {
-        const table = this.$refs.goodsTable;
-        if (!table) return;
-        if (this.type === "multiple") {
-          // clearSelection/toggleRowSelection 都会触发 selection-change，
-          // 同步期间忽略，避免把已选状态清掉
-          this.syncingSelection = true;
-          table.clearSelection();
-          this.goodsData.forEach((row) => {
-            if (row.selected) {
-              table.toggleRowSelection(row, true);
-            }
-          });
-          this.$nextTick(() => {
-            this.syncingSelection = false;
-          });
-          return;
-        }
-        const selected = this.goodsData.find((item) => item.selected);
-        table.setCurrentRow(selected || null);
-      });
-    },
-    emitSelected(list) {
-      this.selectedList = list;
-      this.$emit("selected", this.selectedList);
-    },
-    handleRowClick(row) {
-      if (this.type === "multiple") return;
-      this.goodsData.forEach((item) => {
-        item.selected = false;
-      });
-      row.selected = true;
-      this.emitSelected([row]);
-      this.$refs.goodsTable?.setCurrentRow(row);
-    },
-    handleSelectionChange(selection) {
-      if (this.type !== "multiple" || this.syncingSelection) return;
-      const selectedIds = new Set(selection.map((item) => String(item.id)));
-      this.goodsData.forEach((item) => {
-        item.selected = selectedIds.has(String(item.id));
-      });
-      const currentPageIds = new Set(this.goodsData.map((item) => String(item.id)));
-      const otherPages = this.selectedList.filter((item) => {
-        const id = item.id || item.skuId;
-        return id != null && !currentPageIds.has(String(id));
-      });
-      this.emitSelected([...otherPages, ...selection]);
-    },
-    formatShopCategory(list) {
-      return (list || []).map((item) => ({
-        value: item.id,
-        label: item.labelName,
-        children:
-          item.children && item.children.length ? this.formatShopCategory(item.children) : undefined,
-      }));
-    },
-    goodsTypeText(value) {
-      if (value === "PHYSICAL_GOODS") return "实物商品";
-      if (value === "VIRTUAL_GOODS") return "虚拟商品";
-      if (value === "E_COUPON") return "电子卡券";
-      return "-";
-    },
-    brandText(brandId) {
-      if (!brandId) return "-";
-      const brand = this.brandList.find((item) => String(item.id) === String(brandId));
-      return brand?.name || "-";
-    },
-    findTreeNodeLabel(tree, targetId, valueKey, labelKey) {
-      for (const node of tree || []) {
-        if (String(node[valueKey]) === String(targetId)) {
-          return node[labelKey];
-        }
-        const childLabel = this.findTreeNodeLabel(node.children, targetId, valueKey, labelKey);
-        if (childLabel) return childLabel;
-      }
-      return "";
-    },
-    categoryPathText(path, tree, valueKey, labelKey) {
-      if (!path) return "-";
-      const ids = String(path).split(",").filter(Boolean);
-      if (!ids.length) return "-";
-      const labels = ids
-        .map((id) => this.findTreeNodeLabel(tree, id, valueKey, labelKey))
-        .filter(Boolean);
-      return labels.length ? labels.join(" / ") : "-";
-    },
-    storeCategoryText(path) {
-      return this.categoryPathText(path, this.shopCategoryList, "value", "label");
-    },
-    platformCategoryText(path) {
-      if (!path) return "-";
-      const ids = String(path).split(",").filter(Boolean);
-      if (!ids.length) return "-";
-      const targetId = ids.length >= 3 ? ids[2] : ids[ids.length - 1];
-      const label = this.findTreeNodeLabel(this.platformCategoryList, targetId, "id", "name");
-      return label || "-";
-    },
-    init() {
-      this.getQueryGoodsList();
-      API_Goods.getCategoryTree()
-        .then((res) => {
-          if (res?.success) {
-            this.platformCategoryList = res.result || [];
-          }
-        })
-        .catch(() => {});
-      API_Goods.getShopGoodsLabelListSeller()
-        .then((res) => {
-          if (res?.success) {
-            this.shopCategoryList = this.formatShopCategory(res.result || []);
-          }
-        })
-        .catch(() => {});
-      API_Goods.getBrandListData()
-        .then((res) => {
-          this.brandList = Array.isArray(res) ? res : res?.result || [];
-        })
-        .catch(() => {});
-    },
-  },
+const type = ref("multiple");
+const selectedList = ref([]);
+const platformCategoryList = ref([]);
+const shopCategoryList = ref([]);
+const brandList = ref([]);
+// 静态配置对象，仅模板读取、从不修改，无需响应式
+const platformCategoryProps = {
+  value: "id",
+  label: "name",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
 };
+const shopCategoryProps = {
+  value: "value",
+  label: "label",
+  children: "children",
+  checkStrictly: true,
+  emitPath: false,
+};
+const filterForm = ref(defaultFilterForm());
+const total = ref(0);
+const goodsParams = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  order: "desc",
+  marketEnable: "UPPER",
+  authFlag: "PASS",
+  sort: "createTime",
+});
+const goodsData = ref([]);
+const loading = ref(false);
+const tableHeight = ref(400);
+const syncingSelection = ref(false);
+
+// 模板 ref：原名 tableWrap/goodsTable，统一改名 xxxRef 避免与变量同名互相覆盖
+const tableWrapRef = ref(null);
+const goodsTableRef = ref(null);
+
+watch(
+  () => props.selectedWay,
+  (val) => {
+    selectedList.value = Array.isArray(val) ? val.slice() : [];
+  },
+  { deep: true, immediate: true }
+);
+
+function calcTableHeight() {
+  nextTick(() => {
+    const wrap = tableWrapRef.value;
+    if (wrap) {
+      tableHeight.value = Math.max(wrap.clientHeight, 320);
+    }
+  });
+}
+function onSearchGoods() {
+  goodsParams.pageNumber = 1;
+  getQueryGoodsList();
+}
+function resetFilter() {
+  filterForm.value = defaultFilterForm();
+  onSearchGoods();
+}
+function changePageSize(v) {
+  goodsParams.pageNumber = v;
+  getQueryGoodsList();
+}
+function buildQueryParams() {
+  const params = {
+    ...goodsParams,
+    goodsName: filterForm.value.goodsName || undefined,
+    goodsId: filterForm.value.goodsId || undefined,
+    goodsType: filterForm.value.goodsType || undefined,
+    brandId: filterForm.value.brandId || undefined,
+    storeCategoryPath: filterForm.value.storeCategoryPath || undefined,
+    categoryPath: filterForm.value.categoryPath || undefined,
+    geQuantity: undefined,
+    leQuantity: undefined,
+    geBuyCount: undefined,
+    leBuyCount: undefined,
+    price: undefined,
+  };
+
+  const { priceMin, priceMax, salesMin, salesMax, stockMin, stockMax } = filterForm.value;
+  if (priceMin !== "" && priceMax !== "") {
+    params.price = `${priceMin}_${priceMax}`;
+  } else if (priceMin !== "") {
+    params.price = String(priceMin);
+  } else if (priceMax !== "") {
+    params.price = `0_${priceMax}`;
+  }
+
+  if (stockMin !== "" && stockMin != null) params.geQuantity = Number(stockMin);
+  if (stockMax !== "" && stockMax != null) params.leQuantity = Number(stockMax);
+  if (salesMin !== "" && salesMin != null) params.geBuyCount = Number(salesMin);
+  if (salesMax !== "" && salesMax != null) params.leBuyCount = Number(salesMax);
+
+  return params;
+}
+function getQueryGoodsList() {
+  loading.value = true;
+  API_Goods.getGoodsSkuData(buildQueryParams())
+    .then((res) => {
+      initGoods(res);
+    })
+    .finally(() => {
+      loading.value = false;
+      calcTableHeight();
+    });
+}
+function initGoods(res) {
+  const records = res?.result?.records || [];
+  total.value = res?.result?.total || 0;
+  const selectedIds = new Set(
+    (selectedList.value || [])
+      .map((e) => e.id || e.skuId)
+      .filter((id) => id != null)
+      .map(String)
+  );
+  records.forEach((item) => {
+    item.___type = "goods";
+    item.selected = selectedIds.has(String(item.id));
+  });
+  goodsData.value = records;
+  syncTableSelection();
+}
+function syncTableSelection() {
+  nextTick(() => {
+    const table = goodsTableRef.value;
+    if (!table) return;
+    if (type.value === "multiple") {
+      // clearSelection/toggleRowSelection 都会触发 selection-change，
+      // 同步期间忽略，避免把已选状态清掉
+      syncingSelection.value = true;
+      table.clearSelection();
+      goodsData.value.forEach((row) => {
+        if (row.selected) {
+          table.toggleRowSelection(row, true);
+        }
+      });
+      nextTick(() => {
+        syncingSelection.value = false;
+      });
+      return;
+    }
+    const selected = goodsData.value.find((item) => item.selected);
+    table.setCurrentRow(selected || null);
+  });
+}
+function emitSelected(list) {
+  selectedList.value = list;
+  emit("selected", selectedList.value);
+}
+function handleRowClick(row) {
+  if (type.value === "multiple") return;
+  goodsData.value.forEach((item) => {
+    item.selected = false;
+  });
+  row.selected = true;
+  emitSelected([row]);
+  goodsTableRef.value?.setCurrentRow(row);
+}
+function handleSelectionChange(selection) {
+  if (type.value !== "multiple" || syncingSelection.value) return;
+  const selectedIds = new Set(selection.map((item) => String(item.id)));
+  goodsData.value.forEach((item) => {
+    item.selected = selectedIds.has(String(item.id));
+  });
+  const currentPageIds = new Set(goodsData.value.map((item) => String(item.id)));
+  const otherPages = selectedList.value.filter((item) => {
+    const id = item.id || item.skuId;
+    return id != null && !currentPageIds.has(String(id));
+  });
+  emitSelected([...otherPages, ...selection]);
+}
+function formatShopCategory(list) {
+  return (list || []).map((item) => ({
+    value: item.id,
+    label: item.labelName,
+    children:
+      item.children && item.children.length ? formatShopCategory(item.children) : undefined,
+  }));
+}
+function goodsTypeText(value) {
+  if (value === "PHYSICAL_GOODS") return "实物商品";
+  if (value === "VIRTUAL_GOODS") return "虚拟商品";
+  if (value === "E_COUPON") return "电子卡券";
+  return "-";
+}
+function brandText(brandId) {
+  if (!brandId) return "-";
+  const brand = brandList.value.find((item) => String(item.id) === String(brandId));
+  return brand?.name || "-";
+}
+function findTreeNodeLabel(tree, targetId, valueKey, labelKey) {
+  for (const node of tree || []) {
+    if (String(node[valueKey]) === String(targetId)) {
+      return node[labelKey];
+    }
+    const childLabel = findTreeNodeLabel(node.children, targetId, valueKey, labelKey);
+    if (childLabel) return childLabel;
+  }
+  return "";
+}
+function categoryPathText(path, tree, valueKey, labelKey) {
+  if (!path) return "-";
+  const ids = String(path).split(",").filter(Boolean);
+  if (!ids.length) return "-";
+  const labels = ids
+    .map((id) => findTreeNodeLabel(tree, id, valueKey, labelKey))
+    .filter(Boolean);
+  return labels.length ? labels.join(" / ") : "-";
+}
+function storeCategoryText(path) {
+  return categoryPathText(path, shopCategoryList.value, "value", "label");
+}
+function platformCategoryText(path) {
+  if (!path) return "-";
+  const ids = String(path).split(",").filter(Boolean);
+  if (!ids.length) return "-";
+  const targetId = ids.length >= 3 ? ids[2] : ids[ids.length - 1];
+  const label = findTreeNodeLabel(platformCategoryList.value, targetId, "id", "name");
+  return label || "-";
+}
+function init() {
+  getQueryGoodsList();
+  API_Goods.getCategoryTree()
+    .then((res) => {
+      if (res?.success) {
+        platformCategoryList.value = res.result || [];
+      }
+    })
+    .catch(() => {});
+  API_Goods.getShopGoodsLabelListSeller()
+    .then((res) => {
+      if (res?.success) {
+        shopCategoryList.value = formatShopCategory(res.result || []);
+      }
+    })
+    .catch(() => {});
+  API_Goods.getBrandListData()
+    .then((res) => {
+      brandList.value = Array.isArray(res) ? res : res?.result || [];
+    })
+    .catch(() => {});
+}
+
+onMounted(() => {
+  init();
+  nextTick(calcTableHeight);
+  window.addEventListener("resize", calcTableHeight);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", calcTableHeight);
+});
+
+// 父组件（lili-dialog/index.vue 的 $refs.goodsDialog、link-dialog.vue 的 $refs["lili-component"]）
+// 通过实例写入 type 切换单选/多选；expose 的 ref 外部读写等价于原 data 字段
+defineExpose({ type });
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/seller/src/views/lili-dialog/index.vue b/seller/src/views/lili-dialog/index.vue
index 5fd072869..1b5d415d7 100755
--- a/seller/src/views/lili-dialog/index.vue
+++ b/seller/src/views/lili-dialog/index.vue
@@ -12,7 +12,7 @@
   >
     <goodsDialog
       v-if="goodsVisible"
-      ref="goodsDialog"
+      ref="goodsDialogRef"
       :selectedWay="goodsData"
       @selected="
         (val) => {
@@ -51,86 +51,96 @@
     </template>
   </el-dialog>
 </template>
-<script>
+<script setup>
+import { computed, ref } from "vue";
 import goodsDialog from "./goods-dialog";
 import linkDialog from "./link-dialog";
-export default {
-  components: {
-    goodsDialog,
-    linkDialog,
+
+const emit = defineEmits(["closeFlag", "selectedGoodsData", "selectedLink"]);
+
+const goodsVisible = ref(false);
+const linkVisible = ref(false);
+const goodsFlag = ref(false);
+const goodsData = ref([]);
+const linkData = ref("");
+
+// 模板 ref：原 ref="goodsDialog" 与 import 的组件同名，改名避免互相覆盖
+const goodsDialogRef = ref(null);
+
+const flag = computed({
+  get() {
+    return goodsVisible.value || linkVisible.value;
   },
-  emits: ["closeFlag", "selectedGoodsData", "selectedLink"],
-  data() {
-    return {
-      goodsVisible: false,
-      linkVisible: false,
-      goodsFlag: false,
-      goodsData: [],
-      linkData: "",
-    };
-  },
-  computed: {
-    flag: {
-      get() {
-        return this.goodsVisible || this.linkVisible;
-      },
-      set(val) {
-        if (val) {
-          if (this.goodsFlag) {
-            this.goodsVisible = true;
-          } else {
-            this.linkVisible = true;
-          }
-        } else {
-          this.goodsVisible = false;
-          this.linkVisible = false;
-        }
-      },
-    },
-  },
-  methods: {
-    clearGoodsSelected() {
-      this.goodsData = [];
-    },
-    clickClose() {
-      this.goodsVisible = false;
-      this.linkVisible = false;
-      this.goodsFlag = false;
-      this.$emit("closeFlag", false);
-    },
-    singleGoods() {
-      const timer = setInterval(() => {
-        if (this.$refs.goodsDialog) {
-          this.$refs.goodsDialog.type = "single";
-          clearInterval(timer);
-        }
-      }, 100);
-    },
-    clickOK() {
-      if (this.goodsVisible) {
-        this.$emit("selectedGoodsData", this.goodsData);
-      } else if (this.linkVisible) {
-        this.$emit("selectedLink", this.linkData);
-      }
-      this.clickClose();
-    },
-    open(type, mutiple) {
-      if (type == "goods") {
-        this.goodsFlag = true;
-        this.goodsVisible = true;
-        if (mutiple) {
-          this.singleGoods();
-        }
+  set(val) {
+    if (val) {
+      if (goodsFlag.value) {
+        goodsVisible.value = true;
       } else {
-        this.goodsFlag = false;
-        this.linkVisible = true;
+        linkVisible.value = true;
       }
-    },
-    close() {
-      this.clickClose();
-    },
+    } else {
+      goodsVisible.value = false;
+      linkVisible.value = false;
+    }
   },
-};
+});
+
+function clearGoodsSelected() {
+  goodsData.value = [];
+}
+function clickClose() {
+  goodsVisible.value = false;
+  linkVisible.value = false;
+  goodsFlag.value = false;
+  emit("closeFlag", false);
+}
+function singleGoods() {
+  const timer = setInterval(() => {
+    if (goodsDialogRef.value) {
+      goodsDialogRef.value.type = "single";
+      clearInterval(timer);
+    }
+  }, 100);
+}
+function clickOK() {
+  if (goodsVisible.value) {
+    emit("selectedGoodsData", goodsData.value);
+  } else if (linkVisible.value) {
+    emit("selectedLink", linkData.value);
+  }
+  clickClose();
+}
+function open(type, mutiple) {
+  if (type == "goods") {
+    goodsFlag.value = true;
+    goodsVisible.value = true;
+    if (mutiple) {
+      singleGoods();
+    }
+  } else {
+    goodsFlag.value = false;
+    linkVisible.value = true;
+  }
+}
+function close() {
+  clickClose();
+}
+
+// 外部通过 ref 访问的成员（grep seller/src 全量确认）：
+// - open：所有调用方打开弹窗（goods/link）
+// - singleGoods：shop/modelList/forYour.vue、mixModel.vue 直接调用
+// - clearGoodsSelected：shop/wap/decorate.vue、modelList/goodsAndType.vue 调用
+// - goodsData：促销/采购/装修多处回写已选商品
+// - goodsFlag：shop/wap/decorate.vue 直接写入
+// - flag（可写 computed）：shop/wap/decorate.vue 写入触发弹层开关
+defineExpose({
+  open,
+  singleGoods,
+  clearGoodsSelected,
+  goodsData,
+  goodsFlag,
+  flag,
+});
 </script>
 <style scoped lang="scss">
 .lili-goods-drawer {
diff --git a/seller/src/views/lili-dialog/link-dialog.vue b/seller/src/views/lili-dialog/link-dialog.vue
index f428f3919..7a22c367b 100755
--- a/seller/src/views/lili-dialog/link-dialog.vue
+++ b/seller/src/views/lili-dialog/link-dialog.vue
@@ -8,7 +8,7 @@
         :key="i"
       >
         <component
-          ref="lili-component"
+          ref="liliComponentRef"
           :is="templateWay[item.name]"
           @selected="
             (val) => {
@@ -20,48 +20,43 @@
     </el-tabs>
   </div>
 </template>
-<script>
-import wap from "./wap.js";
+<script setup>
+import { nextTick, onMounted, ref, watch } from "vue";
+import wapList from "./wap.js";
 import goodsDialog from "./goods-dialog";
 import templateWay from "./template/index";
-export default {
-  emits: ["selectedLink"],
-  components: {
-    goodsDialog,
+
+const emit = defineEmits(["selectedLink"]);
+
+const changed = ref("");
+const selected = ref(0);
+const selectedLink = ref("");
+// wap 为共享的模块级数组，保持原 data 引用同一数组的行为
+const wap = ref(wapList);
+const activeTab = ref(wapList[0]?.title || "");
+// v-for 内模板 ref 收集为数组
+const liliComponentRef = ref([]);
+
+watch(
+  changed,
+  (val) => {
+    emit("selectedLink", val[0]);
   },
-  setup() {
-    return { templateWay };
-  },
-  data() {
-    return {
-      changed: "",
-      selected: 0,
-      selectedLink: "",
-      wap,
-      activeTab: wap[0]?.title || "",
-    };
-  },
-  watch: {
-    changed: {
-      handler(val) {
-        this.$emit("selectedLink", val[0]);
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      if (this.$refs["lili-component"]?.[0]) {
-        this.$refs["lili-component"][0].type = "single";
-      }
-    });
-    this.wap.forEach((item) => {
-      if (item) {
-        item.selected = false;
-      }
-    });
-  },
-};
+  { deep: true }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    if (liliComponentRef.value?.[0]) {
+      liliComponentRef.value[0].type = "single";
+    }
+  });
+  wap.value.forEach((item) => {
+    if (item) {
+      item.selected = false;
+    }
+  });
+});
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/seller/src/views/lili-dialog/template/category.vue b/seller/src/views/lili-dialog/template/category.vue
index 1ab7cb864..1624c653c 100644
--- a/seller/src/views/lili-dialog/template/category.vue
+++ b/seller/src/views/lili-dialog/template/category.vue
@@ -26,91 +26,91 @@
   </div>
 
 </template>
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getCategoryTree } from "@/api/goods.js";
 
-export default {
-  data() {
-    return {
-      parentIndex: '', // 分类父级下标
-      secondIndex: '', // 分类二级下标
-      thirdIndex: '', // 分类三级下标
-      categoryList: [], // 分类列表一级数据
-      secondLevel: [], // 分类列表二级数据
-      thirdLevel: [], // 分类列表三级数据
-      selectedData: "", // 已选分类数据
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    loadCategoryFromCache() {
-      try {
-        const raw = localStorage.getItem("category");
-        if (!raw) {
-          return null;
-        }
-        const parsed = JSON.parse(raw);
-        return Array.isArray(parsed) ? parsed : null;
-      } catch {
-        return null;
-      }
-    },
-    applyCategoryList(category) {
-      if (!Array.isArray(category)) {
-        this.categoryList = [];
-        return;
-      }
-      category.forEach((item) => {
-        item.___type = "category";
-      });
-      this.categoryList = category;
-    },
-    // 点击一级
-    handleClickChild(item, index) {
-      this.parentIndex = index;
-      this.secondLevel = item.children || [];
-      item.___type = "category";
-      item.allId = item.id;
+const emit = defineEmits(["selected"]);
 
-      this.secondIndex = '';
-      this.thirdIndex = '';
-      this.thirdLevel = []
-      this.$emit("selected", [item]);
-    },
-    // 点击二级
-    handleClickSecondChild(second, index) {
-      second.___type = "category";
-      second.allId = `${second.parentId},${second.id}`
+// 无 defineExpose：grep seller/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关；
+//   shop/wap/decorate.vue 仅通过 @selected 事件交互）
+const parentIndex = ref(''); // 分类父级下标
+const secondIndex = ref(''); // 分类二级下标
+const thirdIndex = ref(''); // 分类三级下标
+const categoryList = ref([]); // 分类列表一级数据
+const secondLevel = ref([]); // 分类列表二级数据
+const thirdLevel = ref([]); // 分类列表三级数据
+const selectedData = ref(""); // 已选分类数据
 
-      this.secondIndex = index;
-      this.thirdLevel = second.children || [];
-      this.thirdIndex = '';
-      this.$emit("selected", [second]);
-    },
-    // 点击三级
-    handleClickthirdChild(item, index) {
-      item.___type = "category";
-      item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
-      this.$emit("selected", [item]);
-      this.thirdIndex = index;
-    },
-    init() {
-      const cached = this.loadCategoryFromCache();
-      if (cached) {
-        this.applyCategoryList(cached);
-        return;
-      }
-      getCategoryTree().then((res) => {
-        if (res.success && Array.isArray(res.result)) {
-          localStorage.setItem("category", JSON.stringify(res.result));
-          this.applyCategoryList(res.result);
-        }
-      });
-    },
-  },
-};
+function loadCategoryFromCache() {
+  try {
+    const raw = localStorage.getItem("category");
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function applyCategoryList(category) {
+  if (!Array.isArray(category)) {
+    categoryList.value = [];
+    return;
+  }
+  category.forEach((item) => {
+    item.___type = "category";
+  });
+  categoryList.value = category;
+}
+// 点击一级
+function handleClickChild(item, index) {
+  parentIndex.value = index;
+  secondLevel.value = item.children || [];
+  item.___type = "category";
+  item.allId = item.id;
+
+  secondIndex.value = '';
+  thirdIndex.value = '';
+  thirdLevel.value = []
+  emit("selected", [item]);
+}
+// 点击二级
+function handleClickSecondChild(second, index) {
+  second.___type = "category";
+  second.allId = `${second.parentId},${second.id}`
+
+  secondIndex.value = index;
+  thirdLevel.value = second.children || [];
+  thirdIndex.value = '';
+  emit("selected", [second]);
+}
+// 点击三级
+function handleClickthirdChild(item, index) {
+  item.___type = "category";
+  item.allId = `${categoryList.value[parentIndex.value].id},${item.parentId},${item.id}`
+  emit("selected", [item]);
+  thirdIndex.value = index;
+}
+function init() {
+  const cached = loadCategoryFromCache();
+  if (cached) {
+    applyCategoryList(cached);
+    return;
+  }
+  getCategoryTree().then((res) => {
+    if (res.success && Array.isArray(res.result)) {
+      localStorage.setItem("category", JSON.stringify(res.result));
+      applyCategoryList(res.result);
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .list {
diff --git a/seller/src/views/lili-dialog/template/other.vue b/seller/src/views/lili-dialog/template/other.vue
index b60717221..774761db3 100644
--- a/seller/src/views/lili-dialog/template/other.vue
+++ b/seller/src/views/lili-dialog/template/other.vue
@@ -44,8 +44,9 @@
     </el-row>
   </div>
 </template>
-<script>
-import { markRaw } from "vue";
+<script setup>
+import { markRaw, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   House,
   ShoppingCart,
@@ -60,52 +61,52 @@ import {
   Link,
 } from "@element-plus/icons-vue";
 
-export default {
-  data() {
-    return {
-      linkList: [
-        { title: "首页", icon: markRaw(House), ___type: "home" },
-        { title: "购物车", icon: markRaw(ShoppingCart), ___type: "cart" },
-        { title: "收藏商品", icon: markRaw(Star), ___type: "collection" },
-        { title: "我的订单", icon: markRaw(Document), ___type: "order" },
-        { title: "个人中心", icon: markRaw(User), ___type: "user" },
-        { title: "拼团频道", icon: markRaw(Promotion), ___type: "group" },
-        { title: "秒杀频道", icon: markRaw(Promotion), ___type: "seckill" },
-        { title: "领券中心", icon: markRaw(PriceTag), ___type: "coupon" },
-        { title: "签到", icon: markRaw(Sunny), ___type: "sign" },
-        { title: "砍价", icon: markRaw(Share), ___type: "kanjia" },
-        { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
-      ],
-      linkItem: {
-        title: "外部链接",
-        icon: markRaw(Link),
-        ___type: "link",
-        url: "",
-      },
-      linkVisible: false,
-      linkPopoverVisible: false,
-      selectedIndex: 9999999,
-    };
-  },
-  methods: {
-    showLinkItem(item) {
-      return (
-        (item.title !== "拼团频道" && item.title !== "签到") ||
-        this.$route.name !== "renovation"
-      );
-    },
-    handleLink(val, index) {
-      val = { ...val, ___type: "other" };
-      this.selectedIndex = index;
-      if (index === this.linkList.length) {
-        this.linkPopoverVisible = true;
-      } else {
-        this.linkPopoverVisible = false;
-      }
-      this.$emit("selected", [val]);
-    },
-  },
-};
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+
+const linkList = ref([
+  { title: "首页", icon: markRaw(House), ___type: "home" },
+  { title: "购物车", icon: markRaw(ShoppingCart), ___type: "cart" },
+  { title: "收藏商品", icon: markRaw(Star), ___type: "collection" },
+  { title: "我的订单", icon: markRaw(Document), ___type: "order" },
+  { title: "个人中心", icon: markRaw(User), ___type: "user" },
+  { title: "拼团频道", icon: markRaw(Promotion), ___type: "group" },
+  { title: "秒杀频道", icon: markRaw(Promotion), ___type: "seckill" },
+  { title: "领券中心", icon: markRaw(PriceTag), ___type: "coupon" },
+  { title: "签到", icon: markRaw(Sunny), ___type: "sign" },
+  { title: "砍价", icon: markRaw(Share), ___type: "kanjia" },
+  { title: "积分商城", icon: markRaw(ShoppingBag), ___type: "point" },
+]);
+const linkItem = ref({
+  title: "外部链接",
+  icon: markRaw(Link),
+  ___type: "link",
+  url: "",
+});
+const linkVisible = ref(false);
+const linkPopoverVisible = ref(false);
+const selectedIndex = ref(9999999);
+
+function showLinkItem(item) {
+  return (
+    (item.title !== "拼团频道" && item.title !== "签到") ||
+    route.name !== "renovation"
+  );
+}
+function handleLink(val, index) {
+  val = { ...val, ___type: "other" };
+  selectedIndex.value = index;
+  if (index === linkList.value.length) {
+    linkPopoverVisible.value = true;
+  } else {
+    linkPopoverVisible.value = false;
+  }
+  emit("selected", [val]);
+}
+
+// 无 defineExpose：grep seller/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关）
 </script>
 <style lang="scss" scoped>
 @import "../style.scss";
diff --git a/seller/src/views/lili-dialog/template/pages.vue b/seller/src/views/lili-dialog/template/pages.vue
index 8e3807374..2980f827a 100644
--- a/seller/src/views/lili-dialog/template/pages.vue
+++ b/seller/src/views/lili-dialog/template/pages.vue
@@ -12,25 +12,20 @@
 
   </div>
 </template>
-<script>
+<script setup>
 // import Article from "@/views/page/article-manage/articleList.vue";
-export default {
-  components: {
-    // Article,
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    callbackArticle(val) {
-      val.___type = "pages";
 
-      val.___path = "/pages/passport/article";
+const emit = defineEmits(["selected"]);
 
-      this.$emit("selected", [val]);
-    },
-  },
-};
+// 无 defineExpose：grep seller/src 全量确认无外部 ref/$refs/$parent 访问本组件成员
+// （link-dialog.vue 的 $refs["lili-component"][0].type 写入指向首个 tab 的 goods-dialog，与本组件无关）
+function callbackArticle(val) {
+  val.___type = "pages";
+
+  val.___path = "/pages/passport/article";
+
+  emit("selected", [val]);
+}
 </script>
 <style lang="scss" scoped>
 :deep(.el-card__body) {
diff --git a/seller/src/views/lili-dialog/template/shops.vue b/seller/src/views/lili-dialog/template/shops.vue
index 75c6e6a85..af3f60abc 100644
--- a/seller/src/views/lili-dialog/template/shops.vue
+++ b/seller/src/views/lili-dialog/template/shops.vue
@@ -56,53 +56,50 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { getShopListData } from "@/api/shops.js";
-export default {
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      params: {
-        pageNumber: 1,
-        pageSize: 12,
-        storeDisable: "OPEN",
-        storeName: "",
-      },
-      shopsData: [],
-      selected: 9999999999,
-    };
-  },
-  created() {
-    this.init();
-  },
-  methods: {
-    resetSearch() {
-      this.shopsData = [];
-      this.params.pageNumber = 1;
-      this.init();
-    },
-    changePageSize(v) {
-      this.params.pageNumber = v;
-      this.init();
-    },
-    init() {
-      this.loading = true;
-      getShopListData(this.params).then((res) => {
-        if (res.success) {
-          this.total = res.result.total;
-          this.shopsData = res.result.records;
-        }
-        this.loading = false;
-      });
-    },
-    clickShop(val, i) {
-      this.selected = i;
-      val = { ...val, ___type: "shops" };
-      this.$emit("selected", [val]);
-    },
-  },
-};
+
+const emit = defineEmits(["selected"]);
+
+const loading = ref(false);
+const total = ref(0);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 12,
+  storeDisable: "OPEN",
+  storeName: "",
+});
+const shopsData = ref([]);
+const selected = ref(9999999999);
+
+// created
+init();
+
+function resetSearch() {
+  shopsData.value = [];
+  params.pageNumber = 1;
+  init();
+}
+function changePageSize(v) {
+  params.pageNumber = v;
+  init();
+}
+function init() {
+  loading.value = true;
+  getShopListData(params).then((res) => {
+    if (res.success) {
+      total.value = res.result.total;
+      shopsData.value = res.result.records;
+    }
+    loading.value = false;
+  });
+}
+function clickShop(val, i) {
+  selected.value = i;
+  val = { ...val, ___type: "shops" };
+  emit("selected", [val]);
+}
 </script>
 <style lang="scss" scoped>
 @import "../style.scss";
diff --git a/seller/src/views/login.vue b/seller/src/views/login.vue
index 2dba113de..9a8d8388b 100644
--- a/seller/src/views/login.vue
+++ b/seller/src/views/login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="login" @click="$refs.verify.show = false">
+  <div class="login" @click="hideVerify">
     <div class="login-hero">
       <img class="login-bg" :src="loginBg" alt="" />
       <div class="login-panel" @keyup.enter="submitLogin">
@@ -10,7 +10,7 @@
         <el-tabs v-model="loginType" class="login-tabs">
           <el-tab-pane label="账号登录" name="passwordLogin">
             <el-form
-              ref="usernameLoginForm"
+              ref="usernameLoginFormRef"
               :model="form"
               :rules="rules"
               class="form"
@@ -46,11 +46,11 @@
           </el-tab-pane>
           <el-tab-pane label="手机登录" name="mobileLogin">
             <el-form
-              ref="formSms"
+              ref="formSmsRef"
               :model="formSms"
               :rules="ruleInline"
               class="form"
-              @click.self="$refs.verify.show = false"
+              @click.self="hideVerify"
             >
               <el-form-item prop="mobile">
                 <el-input
@@ -105,7 +105,7 @@
         </el-button>
 
         <verify
-          ref="verify"
+          ref="verifyRef"
           class="verify-con"
           verifyType="LOGIN"
           @change="verifyChange"
@@ -117,215 +117,220 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { User, Lock, Iphone, Message } from "@element-plus/icons-vue";
 import * as RegExp from "@/utils/regular.js";
 import { sendSms } from "@/api/common.js";
 import { login, storeSmsLogin, userMsg } from "@/api/index";
 import util from "@/libs/util.js";
+import { setStore } from "@/libs/storage";
+import { Message as $Message } from "@/utils/message";
+import { md5 } from "@/utils/md5.js";
 import Footer from "@/views/main-components/footer";
 import Header from "@/views/main-components/header";
 import verify from "@/views/my-components/verify";
 import Cookies from "js-cookie";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  components: {
-    Header,
-    Footer,
-    verify,
-    User,
-    Lock,
-    Iphone,
-    Message,
-  },
-  data() {
-    return {
-      loginBg: require("@/assets/login-bg.jpg"),
-      loginLogo: require("@/assets/logo-lilishop.png"),
-      saveLogin: true,
-      sendCodeLoading: false,
-      loading: false,
-      verifyStatus: false,
-      smsCodeSent: false,
-      time: 60,
-      loginType: "passwordLogin",
-      form: {
-        username: "",
-        password: "",
-        mobile: "",
-        code: "",
-      },
-      formSms: {
-        mobile: "",
-        code: "",
-      },
-      rules: {
-        username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
-        password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
-      },
-      ruleInline: {
-        mobile: [
-          { required: true, message: "请输入手机号码" },
-          {
-            pattern: RegExp.mobile,
-            message: "请输入正确的手机号",
-          },
-        ],
-        code: [{ required: true, message: "请输入手机验证码" }],
-      },
-      codeMsg: "发送验证码",
-    };
-  },
-  computed: {
-    isMobileValid() {
-      return RegExp.mobile.test(this.formSms.mobile);
-    },
-    canSubmitLogin() {
-      if (this.loginType === "passwordLogin") {
-        return !!(this.form.username.trim() && this.form.password.trim());
-      }
-      return this.smsCodeSent;
-    },
-  },
-  watch: {
-    "formSms.mobile"() {
-      this.smsCodeSent = false;
-      this.verifyStatus = false;
-      this.formSms.code = "";
-    },
-  },
-  created() {
-    window.localStorage.setItem("menuData", "");
-  },
-  methods: {
-    afterLogin(res) {
-      const accessToken = res.result.accessToken;
-      this.setStore("accessToken", accessToken);
-      this.setStore("refreshToken", res.result.refreshToken);
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-      userMsg()
-        .then((res) => {
-          if (res.success) {
-            this.setStore("saveLogin", this.saveLogin);
-            if (this.saveLogin) {
-              Cookies.set("userInfoSeller", JSON.stringify(res.result), {
-                expires: 7,
-              });
-            } else {
-              Cookies.set("userInfoSeller", JSON.stringify(res.result));
-            }
-
-            util.initRouter(this);
-            this.$store.commit("setAvatarPath", res.result.storeLogo);
-
-            const redirectRouter = this.$route.query.redirect;
-            this.$router.push({
-              path: redirectRouter || "/home",
-            });
-          } else {
-            this.loading = false;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    sendCode() {
-      if (!this.isMobileValid) {
-        this.$Message.warning("请输入正确的手机号");
-        return;
-      }
-      if (!this.verifyStatus) {
-        this.$refs.verify.init();
-        return;
-      }
-      if (this.time === 60) {
-        this.sendCodeLoading = true;
-        const params = {
-          mobile: this.formSms.mobile,
-          verificationEnums: "LOGIN",
-        };
-        sendSms(params)
-          .then((res) => {
-            if (res.success) {
-              this.smsCodeSent = true;
-              this.$Message.success("验证码发送成功");
-              const that = this;
-              this.interval = setInterval(() => {
-                that.time--;
-                if (that.time === 0) {
-                  this.sendCodeLoading = false;
-                  that.time = 60;
-                  that.codeMsg = "重新发送";
-                  that.verifyStatus = false;
-                  clearInterval(that.interval);
-                } else {
-                  that.codeMsg = that.time;
-                }
-              }, 1000);
-            } else {
-              this.$Message.warning(res.message);
-            }
-          })
-          .catch(() => {
-            this.sendCodeLoading = false;
-          });
-      }
-    },
-    submitLogin() {
-      if (!this.canSubmitLogin) return;
-
-      if (this.loginType === "passwordLogin") {
-        this.$refs.usernameLoginForm.validate((valid) => {
-          if (valid) {
-            this.$refs.verify.init();
-          }
-        });
-      } else if (this.loginType === "mobileLogin") {
-        this.$refs.formSms.validate((valid) => {
-          if (valid) {
-            this.loading = true;
-            storeSmsLogin(this.formSms)
-              .then((res) => {
-                this.loading = false;
-                if (res.success) {
-                  this.afterLogin(res);
-                }
-              })
-              .catch(() => {
-                this.loading = false;
-              });
-          }
-        });
-      }
-    },
-    verifyChange(con) {
-      if (!con.status) return;
-
-      if (this.loginType === "passwordLogin") {
-        this.loading = true;
-        const fd = new FormData();
-        fd.append("username", this.form.username);
-        fd.append("password", this.md5(this.form.password));
-        login(fd)
-          .then((res) => {
-            this.loading = false;
-            if (res && res.success) {
-              this.afterLogin(res);
-            }
-          })
-          .catch(() => {
-            this.loading = false;
-          });
-      } else {
-        this.verifyStatus = true;
-        this.sendCode();
-      }
-
-      this.$refs.verify.show = false;
-    },
-  },
+const loginBg = require("@/assets/login-bg.jpg");
+const loginLogo = require("@/assets/logo-lilishop.png");
+const saveLogin = ref(true);
+const sendCodeLoading = ref(false);
+const loading = ref(false);
+const verifyStatus = ref(false);
+const smsCodeSent = ref(false);
+const time = ref(60);
+const loginType = ref("passwordLogin");
+const form = reactive({
+  username: "",
+  password: "",
+  mobile: "",
+  code: "",
+});
+const formSms = reactive({
+  mobile: "",
+  code: "",
+});
+const rules = {
+  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
+  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
 };
+const ruleInline = {
+  mobile: [
+    { required: true, message: "请输入手机号码" },
+    {
+      pattern: RegExp.mobile,
+      message: "请输入正确的手机号",
+    },
+  ],
+  code: [{ required: true, message: "请输入手机验证码" }],
+};
+const codeMsg = ref("发送验证码");
+let interval = null;
+
+const usernameLoginFormRef = ref(null);
+const formSmsRef = ref(null);
+const verifyRef = ref(null);
+
+const isMobileValid = computed(() => {
+  return RegExp.mobile.test(formSms.mobile);
+});
+const canSubmitLogin = computed(() => {
+  if (loginType.value === "passwordLogin") {
+    return !!(form.username.trim() && form.password.trim());
+  }
+  return smsCodeSent.value;
+});
+
+watch(
+  () => formSms.mobile,
+  () => {
+    smsCodeSent.value = false;
+    verifyStatus.value = false;
+    formSms.code = "";
+  }
+);
+
+window.localStorage.setItem("menuData", "");
+
+function hideVerify() {
+  verifyRef.value.show = false;
+}
+
+function afterLogin(res) {
+  const accessToken = res.result.accessToken;
+  setStore("accessToken", accessToken);
+  setStore("refreshToken", res.result.refreshToken);
+
+  userMsg()
+    .then((res) => {
+      if (res.success) {
+        setStore("saveLogin", saveLogin.value);
+        if (saveLogin.value) {
+          Cookies.set("userInfoSeller", JSON.stringify(res.result), {
+            expires: 7,
+          });
+        } else {
+          Cookies.set("userInfoSeller", JSON.stringify(res.result));
+        }
+
+        util.initRouter();
+        appStore.setAvatarPath(res.result.storeLogo);
+
+        const redirectRouter = route.query.redirect;
+        router.push({
+          path: redirectRouter || "/home",
+        });
+      } else {
+        loading.value = false;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+
+function sendCode() {
+  if (!isMobileValid.value) {
+    $Message.warning("请输入正确的手机号");
+    return;
+  }
+  if (!verifyStatus.value) {
+    verifyRef.value.init();
+    return;
+  }
+  if (time.value === 60) {
+    sendCodeLoading.value = true;
+    const params = {
+      mobile: formSms.mobile,
+      verificationEnums: "LOGIN",
+    };
+    sendSms(params)
+      .then((res) => {
+        if (res.success) {
+          smsCodeSent.value = true;
+          $Message.success("验证码发送成功");
+          interval = setInterval(() => {
+            time.value--;
+            if (time.value === 0) {
+              sendCodeLoading.value = false;
+              time.value = 60;
+              codeMsg.value = "重新发送";
+              verifyStatus.value = false;
+              clearInterval(interval);
+            } else {
+              codeMsg.value = time.value;
+            }
+          }, 1000);
+        } else {
+          $Message.warning(res.message);
+        }
+      })
+      .catch(() => {
+        sendCodeLoading.value = false;
+      });
+  }
+}
+
+function submitLogin() {
+  if (!canSubmitLogin.value) return;
+
+  if (loginType.value === "passwordLogin") {
+    usernameLoginFormRef.value.validate((valid) => {
+      if (valid) {
+        verifyRef.value.init();
+      }
+    });
+  } else if (loginType.value === "mobileLogin") {
+    formSmsRef.value.validate((valid) => {
+      if (valid) {
+        loading.value = true;
+        storeSmsLogin(formSms)
+          .then((res) => {
+            loading.value = false;
+            if (res.success) {
+              afterLogin(res);
+            }
+          })
+          .catch(() => {
+            loading.value = false;
+          });
+      }
+    });
+  }
+}
+
+function verifyChange(con) {
+  if (!con.status) return;
+
+  if (loginType.value === "passwordLogin") {
+    loading.value = true;
+    const fd = new FormData();
+    fd.append("username", form.username);
+    fd.append("password", md5(form.password));
+    login(fd)
+      .then((res) => {
+        loading.value = false;
+        if (res && res.success) {
+          afterLogin(res);
+        }
+      })
+      .catch(() => {
+        loading.value = false;
+      });
+  } else {
+    verifyStatus.value = true;
+    sendCode();
+  }
+
+  hideVerify();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/main-components/config-drawer.vue b/seller/src/views/main-components/config-drawer.vue
index be5b77d6e..573dd0dae 100644
--- a/seller/src/views/main-components/config-drawer.vue
+++ b/seller/src/views/main-components/config-drawer.vue
@@ -17,39 +17,37 @@
   </div>
 </template>
 
-<script>
-import { mapState } from "vuex";
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useSettingStore } from "@/stores/setting";
+import { setStore } from "@/libs/storage";
 
-export default {
-  name: "configDrawer",
-  data() {
-    return {
-      drawer: false,
-    };
+defineOptions({ name: "configDrawer" });
+
+const settingStore = useSettingStore();
+
+const drawer = ref(false);
+
+const setting = computed(() => settingStore.setting);
+
+watch(
+  setting,
+  (val) => {
+    setStore("setting", val);
+    settingStore.updateSetting(val);
   },
-  computed: {
-    ...mapState({
-      setting: (state) => state.setting.setting,
-    }),
-  },
-  watch: {
-    setting: {
-      handler(val) {
-        this.setStore("setting", val);
-        this.$store.commit("updateSetting", val);
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    open() {
-      this.drawer = true;
-    },
-    close() {
-      this.drawer = false;
-    },
-  },
-};
+  { deep: true }
+);
+
+function open() {
+  drawer.value = true;
+}
+
+function close() {
+  drawer.value = false;
+}
+
+defineExpose({ open, close });
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/main-components/footer.vue b/seller/src/views/main-components/footer.vue
index 0b6d520f1..f250162c8 100644
--- a/seller/src/views/main-components/footer.vue
+++ b/seller/src/views/main-components/footer.vue
@@ -32,18 +32,11 @@
   </div>
 </template>
 
-<script>
-const config = require("@/config/index");
+<script setup>
+import config from "@/config/index";
+import zhizhaoImg from "@/assets/images/zhizhao.jpg";
 
-export default {
-  data() {
-    return {
-      config,
-      zhizhaoImg: require("@/assets/images/zhizhao.jpg"),
-      year: new Date().getFullYear(),
-    };
-  },
-};
+const year = new Date().getFullYear();
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/main-components/fullscreen.vue b/seller/src/views/main-components/fullscreen.vue
index ba0014df3..f3bbbc994 100644
--- a/seller/src/views/main-components/fullscreen.vue
+++ b/seller/src/views/main-components/fullscreen.vue
@@ -9,93 +9,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onBeforeUnmount } from "vue";
 import { FullScreen, ScaleToOriginal } from "@element-plus/icons-vue";
 
-export default {
-  name: "fullScreen",
-  components: { FullScreen, ScaleToOriginal },
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    value: {
-      type: Boolean,
-      default: false,
-    },
+defineOptions({ name: "fullScreen" });
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  computed: {
-    showFullScreenBtn() {
-      return window.navigator.userAgent.indexOf("MSIE") < 0;
-    },
+  value: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    handleFullscreen() {
-      const main = document.body;
-      if (this.modelValue) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        if (main.requestFullscreen) {
-          main.requestFullscreen();
-        } else if (main.mozRequestFullScreen) {
-          main.mozRequestFullScreen();
-        } else if (main.webkitRequestFullScreen) {
-          main.webkitRequestFullScreen();
-        } else if (main.msRequestFullscreen) {
-          main.msRequestFullscreen();
-        }
-      }
-    },
-    handleChange() {
-      this.handleFullscreen();
-    },
-    emitFullscreenState(isFullscreen) {
-      this.$emit("update:modelValue", isFullscreen);
-      this.$emit("input", isFullscreen);
-      this.$emit("on-change", isFullscreen);
-    },
-    onFullscreenChange() {
-      const isFullscreen = !!(
-        document.fullscreenElement ||
-        document.mozFullScreenElement ||
-        document.webkitFullscreenElement ||
-        document.fullScreen ||
-        document.mozFullScreen ||
-        document.webkitIsFullScreen
-      );
-      this.emitFullscreenState(isFullscreen);
-    },
-  },
-  created() {
-    const isFullscreen = !!(
-      document.fullscreenElement ||
-      document.mozFullScreenElement ||
-      document.webkitFullscreenElement ||
-      document.fullScreen ||
-      document.mozFullScreen ||
-      document.webkitIsFullScreen
-    );
-    this.emitFullscreenState(isFullscreen);
-    document.addEventListener("fullscreenchange", this.onFullscreenChange);
-    document.addEventListener("mozfullscreenchange", this.onFullscreenChange);
-    document.addEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    document.addEventListener("msfullscreenchange", this.onFullscreenChange);
-  },
-  beforeUnmount() {
-    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
-    document.removeEventListener("mozfullscreenchange", this.onFullscreenChange);
-    document.removeEventListener("webkitfullscreenchange", this.onFullscreenChange);
-    document.removeEventListener("msfullscreenchange", this.onFullscreenChange);
-  },
-};
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+
+const showFullScreenBtn = computed(() => {
+  return window.navigator.userAgent.indexOf("MSIE") < 0;
+});
+
+function handleFullscreen() {
+  const main = document.body;
+  if (props.modelValue) {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitCancelFullScreen) {
+      document.webkitCancelFullScreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+  } else {
+    if (main.requestFullscreen) {
+      main.requestFullscreen();
+    } else if (main.mozRequestFullScreen) {
+      main.mozRequestFullScreen();
+    } else if (main.webkitRequestFullScreen) {
+      main.webkitRequestFullScreen();
+    } else if (main.msRequestFullscreen) {
+      main.msRequestFullscreen();
+    }
+  }
+}
+function handleChange() {
+  handleFullscreen();
+}
+function emitFullscreenState(isFullscreen) {
+  emit("update:modelValue", isFullscreen);
+  emit("input", isFullscreen);
+  emit("on-change", isFullscreen);
+}
+function onFullscreenChange() {
+  const isFullscreen = !!(
+    document.fullscreenElement ||
+    document.mozFullScreenElement ||
+    document.webkitFullscreenElement ||
+    document.fullScreen ||
+    document.mozFullScreen ||
+    document.webkitIsFullScreen
+  );
+  emitFullscreenState(isFullscreen);
+}
+
+const isFullscreen = !!(
+  document.fullscreenElement ||
+  document.mozFullScreenElement ||
+  document.webkitFullscreenElement ||
+  document.fullScreen ||
+  document.mozFullScreen ||
+  document.webkitIsFullScreen
+);
+emitFullscreenState(isFullscreen);
+document.addEventListener("fullscreenchange", onFullscreenChange);
+document.addEventListener("mozfullscreenchange", onFullscreenChange);
+document.addEventListener("webkitfullscreenchange", onFullscreenChange);
+document.addEventListener("msfullscreenchange", onFullscreenChange);
+
+onBeforeUnmount(() => {
+  document.removeEventListener("fullscreenchange", onFullscreenChange);
+  document.removeEventListener("mozfullscreenchange", onFullscreenChange);
+  document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
+  document.removeEventListener("msfullscreenchange", onFullscreenChange);
+});
 </script>
diff --git a/seller/src/views/main-components/header.vue b/seller/src/views/main-components/header.vue
index ebf6efc3f..5712a7046 100644
--- a/seller/src/views/main-components/header.vue
+++ b/seller/src/views/main-components/header.vue
@@ -6,63 +6,58 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import { getBaseSite } from "@/api/common.js";
 
-export default {
-  data() {
-    return {
-      storeSideLogo: require("@/assets/logo-lilishop.png"),
-    };
-  },
-  methods: {
-    init() {
-      if (
-        !localStorage.getItem("sellersiteName") ||
-        !localStorage.getItem("sellerlogoImg") ||
-        !localStorage.getItem("sellerIconImg") ||
-        !localStorage.getItem("seller_expiration_time")
-      ) {
-        this.getSite();
-      } else if (new Date() > localStorage.getItem("seller_expiration_time")) {
-        this.getSite();
-      } else {
-        this.storeSideLogo = localStorage.getItem("sellerlogoImg");
-        window.document.title = localStorage.getItem("sellersiteName");
-        this.applyFavicon(localStorage.getItem("sellerIconImg"));
+const storeSideLogo = ref(require("@/assets/logo-lilishop.png"));
+
+function init() {
+  if (
+    !localStorage.getItem("sellersiteName") ||
+    !localStorage.getItem("sellerlogoImg") ||
+    !localStorage.getItem("sellerIconImg") ||
+    !localStorage.getItem("seller_expiration_time")
+  ) {
+    getSite();
+  } else if (new Date() > localStorage.getItem("seller_expiration_time")) {
+    getSite();
+  } else {
+    storeSideLogo.value = localStorage.getItem("sellerlogoImg");
+    window.document.title = localStorage.getItem("sellersiteName");
+    applyFavicon(localStorage.getItem("sellerIconImg"));
+  }
+}
+function applyFavicon(href) {
+  const link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.type = "image/x-icon";
+  link.href = href;
+  link.rel = "shortcut icon";
+  document.getElementsByTagName("head")[0].appendChild(link);
+}
+function getSite() {
+  getBaseSite()
+    .then((res) => {
+      if (res.success && res.result.settingValue) {
+        const data = JSON.parse(res.result.settingValue);
+        const expirationTime = new Date().setHours(new Date().getHours() + 1);
+        localStorage.setItem("seller_expiration_time", expirationTime);
+        localStorage.setItem("sellersiteName", data.siteName);
+        localStorage.setItem("sellerlogoImg", data.storeSideLogo);
+        localStorage.setItem("sellerIconImg", data.storeSideIcon);
+        storeSideLogo.value = data.storeSideLogo;
+        window.document.title = data.siteName;
+        applyFavicon(data.storeSideIcon);
       }
-    },
-    applyFavicon(href) {
-      const link =
-        document.querySelector("link[rel*='icon']") ||
-        document.createElement("link");
-      link.type = "image/x-icon";
-      link.href = href;
-      link.rel = "shortcut icon";
-      document.getElementsByTagName("head")[0].appendChild(link);
-    },
-    getSite() {
-      getBaseSite()
-        .then((res) => {
-          if (res.success && res.result.settingValue) {
-            const data = JSON.parse(res.result.settingValue);
-            const expirationTime = new Date().setHours(new Date().getHours() + 1);
-            localStorage.setItem("seller_expiration_time", expirationTime);
-            localStorage.setItem("sellersiteName", data.siteName);
-            localStorage.setItem("sellerlogoImg", data.storeSideLogo);
-            localStorage.setItem("sellerIconImg", data.storeSideIcon);
-            this.storeSideLogo = data.storeSideLogo;
-            window.document.title = data.siteName;
-            this.applyFavicon(data.storeSideIcon);
-          }
-        })
-        .catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/main-components/message-tip.vue b/seller/src/views/main-components/message-tip.vue
index 44f77baa5..6e0c84385 100644
--- a/seller/src/views/main-components/message-tip.vue
+++ b/seller/src/views/main-components/message-tip.vue
@@ -12,30 +12,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { useRouter } from "vue-router";
 import { Bell } from "@element-plus/icons-vue";
 import util from "@/libs/util.js";
 
-export default {
-  name: "messageTip",
-  components: { Bell },
-  props: {
-    value: {
-      type: Number,
-      default: 0,
-    },
-    message: {
-      type: String,
-      default: "",
-    },
+defineOptions({ name: "messageTip" });
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: 0,
   },
-  methods: {
-    showMessage() {
-      util.openNewPage(this, "message_index");
-      this.$router.push({
-        name: "message_index",
-      });
-    },
+  message: {
+    type: String,
+    default: "",
   },
-};
+});
+
+const router = useRouter();
+
+function showMessage() {
+  util.openNewPage("message_index");
+  router.push({
+    name: "message_index",
+  });
+}
 </script>
diff --git a/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue b/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
index 6ce7844e0..7c8b3b124 100644
--- a/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
+++ b/seller/src/views/main-components/shrinkable-menu/shrinkable-menu.vue
@@ -33,71 +33,77 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import util, { HOME_NAV_NAME, HOME_NAV_ITEM } from "@/libs/util.js";
+import { setStore } from "@/libs/storage";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "shrinkableMenu",
-  computed: {
-    menuList() {
-      return this.$store.state.app.menuList;
-    },
-    navList() {
-      return this.$store.state.app.navList;
-    },
-    currNav() {
-      return this.$store.state.app.currNav;
-    },
-  },
-  watch: {
-    $route(val) {
-      this.syncRouteMenu(val);
-    },
-  },
-  methods: {
-    syncRouteMenu(route) {
-      if (!route?.name) {
-        return;
-      }
-      if (route.name === "home_index") {
-        this.activateHomeNav();
-        return;
-      }
-      const firstRouterName =
-        route.meta?.firstRouterName || util.getFirstRouterName(route.name);
-      if (firstRouterName && firstRouterName !== this.currNav) {
-        this.selectNav(firstRouterName);
-      }
-    },
-    activateHomeNav() {
-      this.$store.commit("setCurrNav", HOME_NAV_NAME);
-      this.$store.commit("setCurrNavTitle", HOME_NAV_ITEM.title);
-      this.setStore("currNav", HOME_NAV_NAME);
-      this.$store.commit("updateMenulist", []);
-    },
-    changeMenu(name) {
-      if (!name) return;
-      this.$router.push({ name });
-    },
-    selectNav(name) {
-      this.$store.commit("childrenMenu", this.$refs.childrenMenu);
-      this.$store.commit("setCurrNav", name);
-      this.setStore("currNav", name);
-      if (name === HOME_NAV_NAME) {
-        this.$store.commit("updateMenulist", []);
-        this.$store.commit("setCurrNavTitle", HOME_NAV_ITEM.title);
-        if (this.$route.name !== "home_index") {
-          this.$router.push({ name: "home_index" });
-        }
-        return;
-      }
-      util.initRouter(this);
-    },
-  },
-  mounted() {
-    this.syncRouteMenu(this.$route);
-  },
-};
+defineOptions({ name: "shrinkableMenu" });
+
+const appStore = useAppStore();
+const route = useRoute();
+const router = useRouter();
+
+const childrenMenu = ref(null);
+
+const menuList = computed(() => appStore.menuList);
+const navList = computed(() => appStore.navList);
+const currNav = computed(() => appStore.currNav);
+
+watch(
+  () => route.name,
+  () => {
+    syncRouteMenu(route);
+  }
+);
+
+function syncRouteMenu(route) {
+  if (!route?.name) {
+    return;
+  }
+  if (route.name === "home_index") {
+    activateHomeNav();
+    return;
+  }
+  const firstRouterName =
+    route.meta?.firstRouterName || util.getFirstRouterName(route.name);
+  if (firstRouterName && firstRouterName !== currNav.value) {
+    selectNav(firstRouterName);
+  }
+}
+
+function activateHomeNav() {
+  appStore.setCurrNav(HOME_NAV_NAME);
+  appStore.setCurrNavTitle(HOME_NAV_ITEM.title);
+  setStore("currNav", HOME_NAV_NAME);
+  appStore.updateMenulist([]);
+}
+
+function changeMenu(name) {
+  if (!name) return;
+  router.push({ name });
+}
+
+function selectNav(name) {
+  appStore.childrenMenu(childrenMenu.value);
+  appStore.setCurrNav(name);
+  setStore("currNav", name);
+  if (name === HOME_NAV_NAME) {
+    appStore.updateMenulist([]);
+    appStore.setCurrNavTitle(HOME_NAV_ITEM.title);
+    if (route.name !== "home_index") {
+      router.push({ name: "home_index" });
+    }
+    return;
+  }
+  util.initRouter();
+}
+
+onMounted(() => {
+  syncRouteMenu(route);
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/main-components/store-qrcode.vue b/seller/src/views/main-components/store-qrcode.vue
index 00581f5c9..ee82b344f 100644
--- a/seller/src/views/main-components/store-qrcode.vue
+++ b/seller/src/views/main-components/store-qrcode.vue
@@ -36,129 +36,126 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, ref } from "vue";
 import Cookies from "js-cookie";
 import vueQr from "vue-qr";
 import { getStoreMpQrcode } from "@/api/index";
 import { getBaseSite } from "@/api/common.js";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "store-qrcode",
-  components: { "vue-qr": vueQr },
-  data() {
-    return {
-      visible: false,
-      storeId: "",
-      wapUrl: "",
-      pcUrlBase: "",
-      mpQrcode: "",
-      mpError: "",
-      mpLoaded: false,
-    };
-  },
-  computed: {
-    h5Url() {
-      if (!this.storeId || !this.wapUrl) return "";
-      return this.joinUrl(this.wapUrl, `/pages/product/shopPage?id=${this.storeId}`);
-    },
-    pcUrl() {
-      if (!this.storeId || !this.pcUrlBase) return "";
-      return this.joinUrl(this.pcUrlBase, `/merchant?id=${this.storeId}`);
-    },
-    mpQrSrc() {
-      if (!this.mpQrcode) return "";
-      const mime = String(this.mpQrcode).startsWith("/9j/")
-        ? "image/jpeg"
-        : "image/png";
-      return `data:${mime};base64,${this.mpQrcode}`;
-    },
-  },
-  methods: {
-    joinUrl(base, path) {
-      return String(base || "").replace(/\/$/, "") + path;
-    },
-    parseSettingValue(raw) {
-      if (!raw) return {};
-      if (typeof raw === "object") return raw;
-      try {
-        return JSON.parse(raw);
-      } catch (e) {
-        return {};
+defineOptions({ name: "store-qrcode" });
+
+const visible = ref(false);
+const storeId = ref("");
+const wapUrl = ref("");
+const pcUrlBase = ref("");
+const mpQrcode = ref("");
+const mpError = ref("");
+const mpLoaded = ref(false);
+
+const h5Url = computed(() => {
+  if (!storeId.value || !wapUrl.value) return "";
+  return joinUrl(wapUrl.value, `/pages/product/shopPage?id=${storeId.value}`);
+});
+const pcUrl = computed(() => {
+  if (!storeId.value || !pcUrlBase.value) return "";
+  return joinUrl(pcUrlBase.value, `/merchant?id=${storeId.value}`);
+});
+const mpQrSrc = computed(() => {
+  if (!mpQrcode.value) return "";
+  const mime = String(mpQrcode.value).startsWith("/9j/")
+    ? "image/jpeg"
+    : "image/png";
+  return `data:${mime};base64,${mpQrcode.value}`;
+});
+
+function joinUrl(base, path) {
+  return String(base || "").replace(/\/$/, "") + path;
+}
+function parseSettingValue(raw) {
+  if (!raw) return {};
+  if (typeof raw === "object") return raw;
+  try {
+    return JSON.parse(raw);
+  } catch (e) {
+    return {};
+  }
+}
+function initStore() {
+  try {
+    const userInfo = JSON.parse(Cookies.get("userInfoSeller") || "{}") || {};
+    storeId.value = userInfo.id || userInfo.storeId || "";
+  } catch (e) {
+    storeId.value = "";
+  }
+}
+function open() {
+  initStore();
+  visible.value = true;
+}
+function loadCodes() {
+  initStore();
+  getBaseSite()
+    .then((res) => {
+      const data = parseSettingValue(res && res.result && res.result.settingValue);
+      const fallback = typeof window !== "undefined" ? window.BASE || {} : {};
+      // wap/站点地址常配官网，H5、PC 店铺页用买家端域名
+      wapUrl.value = fallback.WAP_URL || data.staticPageWapAddress || "";
+      pcUrlBase.value = fallback.PC_URL || data.staticPageAddress || "";
+    })
+    .catch(() => {
+      const fallback = typeof window !== "undefined" ? window.BASE || {} : {};
+      wapUrl.value = fallback.WAP_URL || "";
+      pcUrlBase.value = fallback.PC_URL || "";
+    });
+  loadMpQrcode();
+}
+function loadMpQrcode() {
+  if (!storeId.value || mpLoaded.value) return;
+  mpError.value = "";
+  getStoreMpQrcode()
+    .then((res) => {
+      if (res && res.success && res.result) {
+        if (String(res.result).startsWith("eyJ")) {
+          mpError.value = "请先配置微信小程序";
+          return;
+        }
+        mpQrcode.value = res.result;
+        mpLoaded.value = true;
+        mpError.value = "";
+      } else {
+        mpError.value = "请先配置微信小程序";
       }
-    },
-    initStore() {
-      try {
-        const userInfo = JSON.parse(Cookies.get("userInfoSeller") || "{}") || {};
-        this.storeId = userInfo.id || userInfo.storeId || "";
-      } catch (e) {
-        this.storeId = "";
-      }
-    },
-    open() {
-      this.initStore();
-      this.visible = true;
-    },
-    loadCodes() {
-      this.initStore();
-      getBaseSite()
-        .then((res) => {
-          const data = this.parseSettingValue(res && res.result && res.result.settingValue);
-          const fallback = typeof window !== "undefined" ? window.BASE || {} : {};
-          // wap/站点地址常配官网，H5、PC 店铺页用买家端域名
-          this.wapUrl = fallback.WAP_URL || data.staticPageWapAddress || "";
-          this.pcUrlBase = fallback.PC_URL || data.staticPageAddress || "";
-        })
-        .catch(() => {
-          const fallback = typeof window !== "undefined" ? window.BASE || {} : {};
-          this.wapUrl = fallback.WAP_URL || "";
-          this.pcUrlBase = fallback.PC_URL || "";
-        });
-      this.loadMpQrcode();
-    },
-    loadMpQrcode() {
-      if (!this.storeId || this.mpLoaded) return;
-      this.mpError = "";
-      getStoreMpQrcode()
-        .then((res) => {
-          if (res && res.success && res.result) {
-            if (String(res.result).startsWith("eyJ")) {
-              this.mpError = "请先配置微信小程序";
-              return;
-            }
-            this.mpQrcode = res.result;
-            this.mpLoaded = true;
-            this.mpError = "";
-          } else {
-            this.mpError = "请先配置微信小程序";
-          }
-        })
-        .catch(() => {
-          this.mpError = "请先配置微信小程序";
-        });
-    },
-    copyText(text) {
-      if (!text) return;
-      const ok = () => this.$Message.success("复制成功");
-      const fail = () => this.$Message.error("复制失败");
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(ok).catch(fail);
-        return;
-      }
-      const textArea = document.createElement("textarea");
-      textArea.value = text;
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      try {
-        document.execCommand("copy");
-        ok();
-      } catch (e) {
-        fail();
-      }
-      document.body.removeChild(textArea);
-    },
-  },
-};
+    })
+    .catch(() => {
+      mpError.value = "请先配置微信小程序";
+    });
+}
+function copyText(text) {
+  if (!text) return;
+  const ok = () => Message.success("复制成功");
+  const fail = () => Message.error("复制失败");
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(ok).catch(fail);
+    return;
+  }
+  const textArea = document.createElement("textarea");
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    ok();
+  } catch (e) {
+    fail();
+  }
+  document.body.removeChild(textArea);
+}
+
+// 外部无 ref/$refs/$parent 访问（仅 Main.vue 以 <store-qrcode /> 使用），无需暴露成员
+defineExpose({});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/main-components/tags-page-opened.vue b/seller/src/views/main-components/tags-page-opened.vue
index 88de245d4..0d56691fc 100644
--- a/seller/src/views/main-components/tags-page-opened.vue
+++ b/seller/src/views/main-components/tags-page-opened.vue
@@ -41,148 +41,163 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "tagsPageOpened",
-  props: {
-    pageTagsList: Array,
-    beforePush: {
-      type: Function,
-      default: () => true,
-    },
-  },
-  data() {
-    return {
-      currentPageName: this.$route.name,
-      tagBodyLeft: 0,
-      visible: false,
-      contextMenuLeft: 0,
-      contextMenuTop: 0,
-      actionList: {
-        others: "关闭其他",
-        clearAll: "关闭所有",
-      },
-    };
-  },
-  computed: {
-    tagsList() {
-      return this.$store.state.app.storeOpenedList;
-    },
-  },
-  methods: {
-    isActive(item) {
-      return item.children
-        ? item.children[0].name === this.currentPageName
-        : item.name === this.currentPageName;
-    },
-    tagType(item) {
-      return this.isActive(item) ? "primary" : "info";
-    },
-    itemTitle(item) {
-      if (typeof item.title === "object") {
-        return item.title;
-      }
-      return item.title;
-    },
-    closePage(event, name) {
-      let storeOpenedList = this.$store.state.app.storeOpenedList;
-      let lastPageObj = storeOpenedList[0];
-      if (this.currentPageName === name) {
-        const len = storeOpenedList.length;
-        for (let i = 1; i < len; i++) {
-          if (storeOpenedList[i].name === name) {
-            lastPageObj =
-              i < len - 1 ? storeOpenedList[i + 1] : storeOpenedList[i - 1];
-            break;
-          }
-        }
-      } else if (event && event.target) {
-        const tagWidth = event.target.parentNode?.offsetWidth || 0;
-        this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
-      }
-      this.$store.commit("removeTag", name);
-      this.$store.commit("closePage", name);
-      storeOpenedList = this.$store.state.app.storeOpenedList;
-      localStorage.storeOpenedList = JSON.stringify(storeOpenedList);
-      if (this.currentPageName === name) {
-        this.linkTo(lastPageObj);
-      }
-    },
-    linkTo(item) {
-      if (this.$route.name === item.name) return;
-      const routerObj = { name: item.name };
-      if (item.argu) routerObj.params = item.argu;
-      if (item.query) routerObj.query = item.query;
-      if (this.beforePush(item)) {
-        this.$router.push(routerObj);
-      }
-    },
-    handlescroll(e) {
-      const type = e.type;
-      let delta = 0;
-      if (type === "DOMMouseScroll" || type === "mousewheel") {
-        delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
-      }
-      let left = 0;
-      if (delta > 0) {
-        left = Math.min(0, this.tagBodyLeft + delta);
-      } else if (
-        this.$refs.scrollCon.offsetWidth - 100 <
-        this.$refs.scrollBody.offsetWidth
-      ) {
-        if (
-          this.tagBodyLeft <
-          -(this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100)
-        ) {
-          left = this.tagBodyLeft;
-        } else {
-          left = Math.max(
-            this.tagBodyLeft + delta,
-            this.$refs.scrollCon.offsetWidth -
-              this.$refs.scrollBody.offsetWidth -
-              100
-          );
-        }
-      } else {
-        this.tagBodyLeft = 0;
-      }
-      this.tagBodyLeft = left;
-    },
-    handleTagsOption(type) {
-      if (type === "clearAll") {
-        this.$store.commit("clearAllTags");
-        this.$router.push({ name: "home_index" });
-      } else {
-        this.$store.commit("clearOtherTags", this);
-      }
-      this.tagBodyLeft = 0;
-    },
-    contextMenu(item, e) {
-      this.visible = true;
-      const offsetLeft = this.$el.getBoundingClientRect().left;
-      this.contextMenuLeft = e.clientX - offsetLeft + 10;
-      this.contextMenuTop = e.clientY - 64;
-    },
-    closeMenu() {
-      this.visible = false;
-    },
-  },
-  watch: {
-    $route(to) {
-      this.currentPageName = to.name;
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener("click", this.closeMenu);
-      } else {
-        document.body.removeEventListener("click", this.closeMenu);
-      }
-    },
-  },
-  beforeUnmount() {
-    document.body.removeEventListener("click", this.closeMenu);
+<script setup>
+import { ref, computed, watch, onBeforeUnmount } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "tagsPageOpened" });
+
+const props = defineProps({
+  pageTagsList: Array,
+  beforePush: {
+    type: Function,
+    default: () => true,
   },
+});
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const currentPageName = ref(route.name);
+const tagBodyLeft = ref(0);
+const visible = ref(false);
+const contextMenuLeft = ref(0);
+const contextMenuTop = ref(0);
+const actionList = {
+  others: "关闭其他",
+  clearAll: "关闭所有",
 };
+
+const scrollCon = ref(null);
+const scrollBody = ref(null);
+
+const tagsList = computed(() => appStore.storeOpenedList);
+
+const isActive = (item) => {
+  return item.children
+    ? item.children[0].name === currentPageName.value
+    : item.name === currentPageName.value;
+};
+
+const tagType = (item) => {
+  return isActive(item) ? "primary" : "info";
+};
+
+const itemTitle = (item) => {
+  if (typeof item.title === "object") {
+    return item.title;
+  }
+  return item.title;
+};
+
+const closePage = (event, name) => {
+  let storeOpenedList = appStore.storeOpenedList;
+  let lastPageObj = storeOpenedList[0];
+  if (currentPageName.value === name) {
+    const len = storeOpenedList.length;
+    for (let i = 1; i < len; i++) {
+      if (storeOpenedList[i].name === name) {
+        lastPageObj =
+          i < len - 1 ? storeOpenedList[i + 1] : storeOpenedList[i - 1];
+        break;
+      }
+    }
+  } else if (event && event.target) {
+    const tagWidth = event.target.parentNode?.offsetWidth || 0;
+    tagBodyLeft.value = Math.min(tagBodyLeft.value + tagWidth, 0);
+  }
+  appStore.removeTag(name);
+  appStore.closePage(name);
+  storeOpenedList = appStore.storeOpenedList;
+  localStorage.storeOpenedList = JSON.stringify(storeOpenedList);
+  if (currentPageName.value === name) {
+    linkTo(lastPageObj);
+  }
+};
+
+const linkTo = (item) => {
+  if (route.name === item.name) return;
+  const routerObj = { name: item.name };
+  if (item.argu) routerObj.params = item.argu;
+  if (item.query) routerObj.query = item.query;
+  if (props.beforePush(item)) {
+    router.push(routerObj);
+  }
+};
+
+const handlescroll = (e) => {
+  const type = e.type;
+  let delta = 0;
+  if (type === "DOMMouseScroll" || type === "mousewheel") {
+    delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
+  }
+  let left = 0;
+  if (delta > 0) {
+    left = Math.min(0, tagBodyLeft.value + delta);
+  } else if (
+    scrollCon.value.offsetWidth - 100 <
+    scrollBody.value.offsetWidth
+  ) {
+    if (
+      tagBodyLeft.value <
+      -(scrollBody.value.offsetWidth - scrollCon.value.offsetWidth + 100)
+    ) {
+      left = tagBodyLeft.value;
+    } else {
+      left = Math.max(
+        tagBodyLeft.value + delta,
+        scrollCon.value.offsetWidth -
+          scrollBody.value.offsetWidth -
+          100
+      );
+    }
+  } else {
+    tagBodyLeft.value = 0;
+  }
+  tagBodyLeft.value = left;
+};
+
+const handleTagsOption = (type) => {
+  if (type === "clearAll") {
+    appStore.clearAllTags();
+    router.push({ name: "home_index" });
+  } else {
+    appStore.clearOtherTags(route.name);
+  }
+  tagBodyLeft.value = 0;
+};
+
+const contextMenu = (item, e) => {
+  visible.value = true;
+  const offsetLeft = scrollCon.value.getBoundingClientRect().left;
+  contextMenuLeft.value = e.clientX - offsetLeft + 10;
+  contextMenuTop.value = e.clientY - 64;
+};
+
+const closeMenu = () => {
+  visible.value = false;
+};
+
+watch(
+  () => route.name,
+  (name) => {
+    currentPageName.value = name;
+  }
+);
+
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener("click", closeMenu);
+  } else {
+    document.body.removeEventListener("click", closeMenu);
+  }
+});
+
+onBeforeUnmount(() => {
+  document.body.removeEventListener("click", closeMenu);
+});
 </script>
 
 <style lang="scss">
diff --git a/seller/src/views/member/memberComment.vue b/seller/src/views/member/memberComment.vue
index 24bf5906e..ea1bcb0fc 100644
--- a/seller/src/views/member/memberComment.vue
+++ b/seller/src/views/member/memberComment.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -42,7 +42,7 @@
     </el-card>
 
     <el-card>
-      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
+      <el-table v-loading="loading" border :data="data" ref="tableRef" class="mt_10" style="width: 100%">
         <el-table-column prop="memberName" label="会员名称" min-width="150" show-overflow-tooltip />
         <el-table-column prop="goodsName" label="商品名称" min-width="150" show-overflow-tooltip />
         <el-table-column prop="content" label="评价内容" min-width="300" show-overflow-tooltip />
@@ -88,7 +88,7 @@
     </el-card>
 
     <el-dialog v-model="modalVisible" :title="modalTitle" width="500px" :close-on-click-modal="false">
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="评价内容">
           <span v-if="!content">暂无评价</span>
           <el-input v-else v-model="content" type="textarea" maxlength="200" disabled :rows="4" style="width: 90%" />
@@ -126,127 +126,129 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Member from "@/api/member";
+import { Message } from "@/utils/message";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 
-export default {
-  name: "memberComment",
-  components: { uploadPicThumb },
-  data() {
-    return {
-      detailInfo: {},
-      image: [],
-      replyStatus: false,
-      modalVisible: false,
-      modalTitle: "",
-      loading: true,
-      content: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        startTime: "",
-        endTime: "",
-      },
-      selectDate: null,
-      form: {
-        replyImage: [],
-        reply: "",
-      },
-      formValidate: {
-        reply: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        startTime: "",
-        endTime: "",
-      };
-      this.selectDate = null;
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startTime = v[0];
-        this.searchForm.endTime = v[1];
-      } else {
-        this.searchForm.startTime = "";
-        this.searchForm.endTime = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Member.getMemberReview(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          API_Member.replyMemberReview(this.form.id, this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("回复成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    detail(v) {
-      this.form.replyImage = [];
-      this.loading = true;
-      API_Member.getMemberInfoReview(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.form.id = res.result.id;
-          this.content = res.result.content;
-          this.form.reply = res.result.reply;
-          this.replyStatus = res.result.replyStatus;
-          this.image = res.result.images ? (res.result.images || "").split(",") : [];
-          this.form.replyImage = res.result.replyImage ? (res.result.replyImage || "").split(",") : [];
-          this.detailInfo = res.result;
-          this.modalVisible = true;
-          this.modalTitle = "详细";
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
+defineOptions({ name: "memberComment" });
+
+const detailInfo = ref({});
+const image = ref([]);
+const replyStatus = ref(false);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const loading = ref(true);
+const content = ref("");
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc",
+  startTime: "",
+  endTime: "",
+});
+const selectDate = ref(null);
+const form = reactive({
+  replyImage: [],
+  reply: "",
+});
+const formValidate = {
+  reply: [{ required: true, message: "请输入回复内容", trigger: "blur" }],
 };
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef/tableRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+// formRef：模板 ref 改名避免与顶层变量 form 互相覆盖
+const formRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 10;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 10,
+    sort: "createTime",
+    order: "desc",
+    startTime: "",
+    endTime: "",
+  };
+  selectDate.value = null;
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.value.startTime = v[0];
+    searchForm.value.endTime = v[1];
+  } else {
+    searchForm.value.startTime = "";
+    searchForm.value.endTime = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Member.getMemberReview(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      API_Member.replyMemberReview(form.id, form).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("回复成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+function detail(v) {
+  form.replyImage = [];
+  loading.value = true;
+  API_Member.getMemberInfoReview(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      form.id = res.result.id;
+      content.value = res.result.content;
+      form.reply = res.result.reply;
+      replyStatus.value = res.result.replyStatus;
+      image.value = res.result.images ? (res.result.images || "").split(",") : [];
+      form.replyImage = res.result.replyImage ? (res.result.replyImage || "").split(",") : [];
+      detailInfo.value = res.result;
+      modalVisible.value = true;
+      modalTitle.value = "详细";
+    }
+  });
+}
 </script>
 
 <style lang="scss">
diff --git a/seller/src/views/message/message.vue b/seller/src/views/message/message.vue
index fe09e7ad6..0d87e954c 100644
--- a/seller/src/views/message/message.vue
+++ b/seller/src/views/message/message.vue
@@ -84,137 +84,137 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import { Clock, ArrowLeft } from "@element-plus/icons-vue";
 import * as API_Index from "@/api/index";
 
-export default {
-  name: "message_index",
-  components: { Clock, ArrowLeft },
-  data() {
-    return {
-      loading: true,
-      mesTypeList: [
-        { type: "unread", title: "未读消息" },
-        { type: "read", title: "已读消息" },
-        { type: "recycleBin", title: "回收站" },
-      ],
-      params: {
-        status: "UN_READY",
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-      },
-      total: 0,
-      currentMesList: [],
-      currentMessageType: "unread",
-      showMesTitleList: true,
-      unReadCount: 0,
-      noDataText: "暂无未读消息",
-      mes: {
-        title: "",
-        time: "",
-        content: "",
-      },
-    };
-  },
-  methods: {
-    changePage() {
-      this.refreshMessage();
-    },
-    changePageSize() {
-      this.refreshMessage();
-    },
-    refreshMessage() {
-      let status;
-      const type = this.currentMessageType;
-      if (type == "unread") status = "UN_READY";
-      else if (type == "read") status = "ALREADY_READY";
-      else status = "ALREADY_REMOVE";
-      this.params.status = status;
-      this.loading = true;
-      API_Index.getMessageSendData(this.params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.currentMesList = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    getAll() {
-      API_Index.getAllMessage(this.params).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.unReadCount = res.result.UN_READY.total;
-          this.currentMesList = res.result.UN_READY.records;
-        }
-      });
-    },
-    backMesTitleList() {
-      this.showMesTitleList = true;
-    },
-    setCurrentMesType(type) {
-      if (this.currentMessageType !== type) {
-        this.showMesTitleList = true;
-      }
-      this.currentMessageType = type;
-      if (type == "unread") this.noDataText = "暂无未读消息";
-      else if (type == "read") this.noDataText = "暂无已读消息";
-      else this.noDataText = "回收站无消息";
-      this.params.pageNumber = 1;
-      this.refreshMessage();
-    },
-    openMessage(row) {
-      this.showMesTitleList = false;
-      this.mes.title = row.title;
-      this.mes.time = row.createTime;
-      this.getContent(row);
-    },
-    markAsRead(v) {
-      this.loading = true;
-      API_Index.read(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) this.getAll();
-      });
-    },
-    deleteMes(v) {
-      this.loading = true;
-      API_Index.deleteMessage(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) this.refreshMessage();
-      });
-    },
-    restoreMes(v) {
-      API_Index.reductionMessage(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) this.refreshMessage();
-      });
-    },
-    deleteReal(v) {
-      this.loading = true;
-      API_Index.clearMessage(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) this.refreshMessage();
-      });
-    },
-    getContent(v) {
-      this.mes.content = v.content;
-      API_Index.read(v.id).then((res) => {
-        this.loading = false;
-        if (res.success) this.getAll();
-      });
-    },
-  },
-  mounted() {
-    this.getAll();
-  },
-  watch: {
-    $route(to) {
-      if (to.name == "message_index") this.getAll();
-    },
-  },
-};
+defineOptions({ name: "message_index" });
+
+const route = useRoute();
+
+const loading = ref(true);
+const mesTypeList = ref([
+  { type: "unread", title: "未读消息" },
+  { type: "read", title: "已读消息" },
+  { type: "recycleBin", title: "回收站" },
+]);
+const params = reactive({
+  status: "UN_READY",
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc",
+});
+const total = ref(0);
+const currentMesList = ref([]);
+const currentMessageType = ref("unread");
+const showMesTitleList = ref(true);
+const unReadCount = ref(0);
+const noDataText = ref("暂无未读消息");
+const mes = reactive({
+  title: "",
+  time: "",
+  content: "",
+});
+
+// messageList：模板 ref 对应声明（原 Options API 中未在 script 内使用，仅保留绑定）
+const messageList = ref(null);
+
+onMounted(() => {
+  getAll();
+});
+
+watch(() => route, (to) => {
+  if (to.name == "message_index") getAll();
+});
+
+function changePage() {
+  refreshMessage();
+}
+function changePageSize() {
+  refreshMessage();
+}
+function refreshMessage() {
+  let status;
+  const type = currentMessageType.value;
+  if (type == "unread") status = "UN_READY";
+  else if (type == "read") status = "ALREADY_READY";
+  else status = "ALREADY_REMOVE";
+  params.status = status;
+  loading.value = true;
+  API_Index.getMessageSendData(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      currentMesList.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getAll() {
+  API_Index.getAllMessage(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      unReadCount.value = res.result.UN_READY.total;
+      currentMesList.value = res.result.UN_READY.records;
+    }
+  });
+}
+function backMesTitleList() {
+  showMesTitleList.value = true;
+}
+function setCurrentMesType(type) {
+  if (currentMessageType.value !== type) {
+    showMesTitleList.value = true;
+  }
+  currentMessageType.value = type;
+  if (type == "unread") noDataText.value = "暂无未读消息";
+  else if (type == "read") noDataText.value = "暂无已读消息";
+  else noDataText.value = "回收站无消息";
+  params.pageNumber = 1;
+  refreshMessage();
+}
+function openMessage(row) {
+  showMesTitleList.value = false;
+  mes.title = row.title;
+  mes.time = row.createTime;
+  getContent(row);
+}
+function markAsRead(v) {
+  loading.value = true;
+  API_Index.read(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) getAll();
+  });
+}
+function deleteMes(v) {
+  loading.value = true;
+  API_Index.deleteMessage(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) refreshMessage();
+  });
+}
+function restoreMes(v) {
+  API_Index.reductionMessage(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) refreshMessage();
+  });
+}
+function deleteReal(v) {
+  loading.value = true;
+  API_Index.clearMessage(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) refreshMessage();
+  });
+}
+function getContent(v) {
+  mes.content = v.content;
+  API_Index.read(v.id).then((res) => {
+    loading.value = false;
+    if (res.success) getAll();
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/lili/circle-loading.vue b/seller/src/views/my-components/lili/circle-loading.vue
index d2d3675f7..209af5cb0 100644
--- a/seller/src/views/my-components/lili/circle-loading.vue
+++ b/seller/src/views/my-components/lili/circle-loading.vue
@@ -6,13 +6,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { Loading } from "@element-plus/icons-vue";
 
-export default {
-  name: "circleLoading",
-  components: { Loading },
-};
+defineOptions({ name: "circleLoading" });
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/lili/department-choose.vue b/seller/src/views/my-components/lili/department-choose.vue
index 7ce069b38..e1c42bbed 100644
--- a/seller/src/views/my-components/lili/department-choose.vue
+++ b/seller/src/views/my-components/lili/department-choose.vue
@@ -13,56 +13,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { initDepartment } from "@/api/index";
 
-export default {
-  name: "departmentChoose",
-  data() {
-    return {
-      selectDep: [],
-      department: [],
-      cascaderProps: {
-        value: "value",
-        label: "label",
-        children: "children",
-        checkStrictly: true,
-        emitPath: true,
-      },
-    };
-  },
-  methods: {
-    initDepartmentData() {
-      initDepartment().then((res) => {
-        if (res.success) {
-          const arr = Array.isArray(res.result) ? res.result : [];
-          this.filterData(arr);
-          this.department = arr;
-        }
-      });
-    },
-    handleChangeDep(value) {
-      let departmentId = "";
-      if (value && value.length > 0) {
-        departmentId = value[value.length - 1];
-      }
-      this.$emit("on-change", departmentId);
-    },
-    clearSelect() {
-      this.selectDep = [];
-    },
-    filterData(data) {
-      data.forEach((e) => {
-        e.value = e.id;
-        e.label = e.title;
-        if (e.children) {
-          this.filterData(e.children);
-        }
-      });
-    },
-  },
-  created() {
-    this.initDepartmentData();
-  },
-};
+defineOptions({ name: "departmentChoose" });
+
+const emit = defineEmits(["on-change"]);
+
+const selectDep = ref([]);
+const department = ref([]);
+const cascaderProps = ref({
+  value: "value",
+  label: "label",
+  children: "children",
+  checkStrictly: true,
+  emitPath: true,
+});
+
+function initDepartmentData() {
+  initDepartment().then((res) => {
+    if (res.success) {
+      const arr = Array.isArray(res.result) ? res.result : [];
+      filterData(arr);
+      department.value = arr;
+    }
+  });
+}
+function handleChangeDep(value) {
+  let departmentId = "";
+  if (value && value.length > 0) {
+    departmentId = value[value.length - 1];
+  }
+  emit("on-change", departmentId);
+}
+function clearSelect() {
+  selectDep.value = [];
+}
+function filterData(data) {
+  data.forEach((e) => {
+    e.value = e.id;
+    e.label = e.title;
+    if (e.children) {
+      filterData(e.children);
+    }
+  });
+}
+
+initDepartmentData();
+
+// 供父组件通过 ref 清空选择/读取选中项（当前引用方 clerkManage 未使用，作为公共组件 API 保留）
+defineExpose({ clearSelect, selectDep });
 </script>
diff --git a/seller/src/views/my-components/lili/department-tree-choose.vue b/seller/src/views/my-components/lili/department-tree-choose.vue
index 2e987bfe4..5d34f727f 100644
--- a/seller/src/views/my-components/lili/department-tree-choose.vue
+++ b/seller/src/views/my-components/lili/department-tree-choose.vue
@@ -35,114 +35,113 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
 import { initDepartment, searchDepartment } from "@/api/index";
 
-export default {
-  name: "departmentTreeChoose",
-  props: {
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    placeholder: {
-      type: String,
-      default: "点击选择部门",
-    },
+defineOptions({ name: "departmentTreeChoose" });
+
+const props = defineProps({
+  multiple: {
+    type: Boolean,
+    default: false,
   },
-  data() {
-    return {
-      depLoading: false,
-      departmentTitle: "",
-      searchKey: "",
-      dataDep: [],
-      cloneDep: [],
-      departmentId: [],
-      treeProps: {
-        label: "title",
-        children: "children",
-      },
-    };
+  clearable: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    initDepartmentData() {
-      this.depLoading = true;
-      initDepartment()
-        .then((res) => {
-          if (res.success) {
-            this.dataDep = res.result;
-            this.cloneDep = JSON.parse(JSON.stringify(this.dataDep));
-          }
-        })
-        .finally(() => {
-          this.depLoading = false;
-        });
-    },
-    searchDep() {
-      if (this.searchKey) {
-        this.depLoading = true;
-        searchDepartment({ title: this.searchKey })
-          .then((res) => {
-            if (res.success) {
-              res.result.forEach((e) => {
-                if (e.status == -1) {
-                  e.title = "[已禁用] " + e.title;
-                  e.disabled = true;
-                }
-              });
-              this.dataDep = res.result;
-            }
-          })
-          .finally(() => {
-            this.depLoading = false;
-          });
-      } else {
-        this.dataDep = JSON.parse(JSON.stringify(this.cloneDep));
-      }
-    },
-    selectTree(node) {
-      if (!node) {
-        this.$emit("on-change", null);
-        this.departmentId = "";
-        this.departmentTitle = "";
-        return;
-      }
-      this.departmentId = node.id;
-      this.departmentTitle = node.title;
-      this.$emit("on-change", {
-        departmentId: this.departmentId,
-        departmentTitle: this.departmentTitle,
-      });
-    },
-    clearSelect() {
-      this.departmentId = [];
-      this.departmentTitle = "";
-      this.initDepartmentData();
-      if (this.multiple) {
-        this.$emit("on-change", []);
-      } else {
-        this.$emit("on-change", "");
-      }
-      this.$emit("on-clear");
-    },
-    setData(ids, title) {
-      this.departmentTitle = title;
-      if (this.multiple) {
-        this.departmentId = ids;
-      } else {
-        this.departmentId = [];
-        this.departmentId.push(ids);
-      }
-    },
-  },
-  created() {
-    this.initDepartmentData();
+  placeholder: {
+    type: String,
+    default: "点击选择部门",
   },
+});
+const emit = defineEmits(["on-change", "on-clear"]);
+
+const depLoading = ref(false);
+const departmentTitle = ref("");
+const searchKey = ref("");
+const dataDep = ref([]);
+const cloneDep = ref([]);
+const departmentId = ref([]);
+const treeProps = {
+  label: "title",
+  children: "children",
 };
+
+function initDepartmentData() {
+  depLoading.value = true;
+  initDepartment()
+    .then((res) => {
+      if (res.success) {
+        dataDep.value = res.result;
+        cloneDep.value = JSON.parse(JSON.stringify(dataDep.value));
+      }
+    })
+    .finally(() => {
+      depLoading.value = false;
+    });
+}
+function searchDep() {
+  if (searchKey.value) {
+    depLoading.value = true;
+    searchDepartment({ title: searchKey.value })
+      .then((res) => {
+        if (res.success) {
+          res.result.forEach((e) => {
+            if (e.status == -1) {
+              e.title = "[已禁用] " + e.title;
+              e.disabled = true;
+            }
+          });
+          dataDep.value = res.result;
+        }
+      })
+      .finally(() => {
+        depLoading.value = false;
+      });
+  } else {
+    dataDep.value = JSON.parse(JSON.stringify(cloneDep.value));
+  }
+}
+function selectTree(node) {
+  if (!node) {
+    emit("on-change", null);
+    departmentId.value = "";
+    departmentTitle.value = "";
+    return;
+  }
+  departmentId.value = node.id;
+  departmentTitle.value = node.title;
+  emit("on-change", {
+    departmentId: departmentId.value,
+    departmentTitle: departmentTitle.value,
+  });
+}
+function clearSelect() {
+  departmentId.value = [];
+  departmentTitle.value = "";
+  initDepartmentData();
+  if (props.multiple) {
+    emit("on-change", []);
+  } else {
+    emit("on-change", "");
+  }
+  emit("on-clear");
+}
+function setData(ids, title) {
+  departmentTitle.value = title;
+  if (props.multiple) {
+    departmentId.value = ids;
+  } else {
+    departmentId.value = [];
+    departmentId.value.push(ids);
+  }
+}
+
+initDepartmentData();
+
+// 父组件（clerkManage）通过 ref 调用 setData / clearSelect
+defineExpose({ setData, clearSelect });
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/lili/set-password.vue b/seller/src/views/my-components/lili/set-password.vue
index ac57ea25f..dd9bb418e 100644
--- a/seller/src/views/my-components/lili/set-password.vue
+++ b/seller/src/views/my-components/lili/set-password.vue
@@ -29,99 +29,101 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "setPassword",
-  props: {
-    modelValue: String,
-    value: String,
-    size: String,
-    placeholder: {
-      type: String,
-      default: "请输入密码，长度为6-20个字符",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: {
-      type: Number,
-      default: 20,
-    },
+<script setup>
+import { ref, watch } from "vue";
+
+defineOptions({ name: "setPassword" });
+
+const props = defineProps({
+  modelValue: String,
+  value: String,
+  size: String,
+  placeholder: {
+    type: String,
+    default: "请输入密码，长度为6-20个字符",
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  data() {
-    return {
-      currentValue: this.modelValue ?? this.value ?? "",
-      tipStyle: "password-tip-none",
-      strengthValue: 0,
-      progressStatus: "",
-      strength: "无",
-      grade: 0,
-    };
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue(val) {
-      this.setCurrentValue(val);
-    },
-    value(val) {
-      this.setCurrentValue(val);
-    },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    checkStrengthValue(v) {
-      let grade = 0;
-      if (/\d/.test(v)) grade++;
-      if (/[a-z]/.test(v)) grade++;
-      if (/[A-Z]/.test(v)) grade++;
-      if (/\W/.test(v)) grade++;
-      if (v.length >= 10) grade++;
-      this.grade = grade;
-      return grade;
-    },
-    strengthChange() {
-      if (!this.currentValue) {
-        this.tipStyle = "password-tip-none";
-        this.strength = "无";
-        this.strengthValue = 0;
-        return;
-      }
-      const grade = this.checkStrengthValue(this.currentValue);
-      if (grade <= 1) {
-        this.progressStatus = "exception";
-        this.tipStyle = "password-tip-weak";
-        this.strength = "弱";
-        this.strengthValue = 33;
-      } else if (grade >= 2 && grade <= 4) {
-        this.progressStatus = "";
-        this.tipStyle = "password-tip-middle";
-        this.strength = "中";
-        this.strengthValue = 66;
-      } else {
-        this.progressStatus = "success";
-        this.tipStyle = "password-tip-strong";
-        this.strength = "强";
-        this.strengthValue = 100;
-      }
-    },
-    handleChange() {
-      this.strengthChange();
-      this.$emit("update:modelValue", this.currentValue);
-      this.$emit("input", this.currentValue);
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) return;
-      this.currentValue = value ?? "";
-      this.strengthChange();
-      this.$emit("on-change", this.currentValue, this.grade, this.strength);
-    },
+  maxlength: {
+    type: Number,
+    default: 20,
   },
-};
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+
+const currentValue = ref(props.modelValue ?? props.value ?? "");
+const tipStyle = ref("password-tip-none");
+const strengthValue = ref(0);
+const progressStatus = ref("");
+const strength = ref("无");
+const grade = ref(0);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+
+function checkStrengthValue(v) {
+  let g = 0;
+  if (/\d/.test(v)) g++;
+  if (/[a-z]/.test(v)) g++;
+  if (/[A-Z]/.test(v)) g++;
+  if (/\W/.test(v)) g++;
+  if (v.length >= 10) g++;
+  grade.value = g;
+  return g;
+}
+function strengthChange() {
+  if (!currentValue.value) {
+    tipStyle.value = "password-tip-none";
+    strength.value = "无";
+    strengthValue.value = 0;
+    return;
+  }
+  const g = checkStrengthValue(currentValue.value);
+  if (g <= 1) {
+    progressStatus.value = "exception";
+    tipStyle.value = "password-tip-weak";
+    strength.value = "弱";
+    strengthValue.value = 33;
+  } else if (g >= 2 && g <= 4) {
+    progressStatus.value = "";
+    tipStyle.value = "password-tip-middle";
+    strength.value = "中";
+    strengthValue.value = 66;
+  } else {
+    progressStatus.value = "success";
+    tipStyle.value = "password-tip-strong";
+    strength.value = "强";
+    strengthValue.value = 100;
+  }
+}
+function handleChange() {
+  strengthChange();
+  emit("update:modelValue", currentValue.value);
+  emit("input", currentValue.value);
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
+function setCurrentValue(value) {
+  if (value === currentValue.value) return;
+  currentValue.value = value ?? "";
+  strengthChange();
+  emit("on-change", currentValue.value, grade.value, strength.value);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/lili/upload-pic-input.vue b/seller/src/views/my-components/lili/upload-pic-input.vue
index a66f9d707..fd31eed07 100644
--- a/seller/src/views/my-components/lili/upload-pic-input.vue
+++ b/seller/src/views/my-components/lili/upload-pic-input.vue
@@ -53,7 +53,7 @@
 
     <el-dialog v-model="picModalFlag" width="1200px" append-to-body :z-index="3500" destroy-on-close>
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModalFlag"
         :max-select="1"
@@ -69,119 +69,122 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, ref, useAttrs, watch } from "vue";
 import { View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/libs/axios";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
-export default {
-  name: "uploadPicInput",
-  components: {
-    ossManage,
-    View,
+defineOptions({ name: "uploadPicInput" });
+
+const props = defineProps({
+  modelValue: String,
+  value: String,
+  size: {
+    default: "default",
+    type: String,
   },
-  props: {
-    modelValue: String,
-    value: String,
-    size: {
-      default: "default",
-      type: String,
-    },
-    placeholder: {
-      type: String,
-      default: "图片链接",
-    },
-    showInput: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    maxlength: Number,
+  placeholder: {
+    type: String,
+    default: "图片链接",
   },
-  emits: ["update:modelValue", "input", "on-change"],
-  data() {
-    return {
-      accessToken: {},
-      currentValue: this.modelValue ?? this.value ?? "",
-      viewImage: false,
-      uploadFileUrl: uploadFile,
-      picModalFlag: false,
-      selectedFormBtnName: "",
-      picIndex: "",
-      selectedImage: [],
-    };
+  showInput: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    handleCLickImg(val, index) {
-      this.picModalFlag = true;
-      this.selectedFormBtnName = val;
-      this.picIndex = index;
-      this.selectedImage = [];
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(val) {
-      if (val?.url) {
-        this.selectedImage = [val.url];
-      }
-    },
-    handleOssSelected(list) {
-      this.selectedImage = (list || []).map((item) => item.split(",")[1]).filter(Boolean);
-    },
-    confirmSelectedImage() {
-      if (!this.selectedImage.length) {
-        this.$Message.warning("请选择图片");
-        return;
-      }
-      this.currentValue = this.selectedImage[this.selectedImage.length - 1];
-      this.picModalFlag = false;
-      this.picIndex = "";
-      this.emitValue(this.currentValue);
-    },
-    init() {
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-    },
-    emitValue(val) {
-      this.$emit("update:modelValue", val);
-      this.$emit("input", val);
-      this.$emit("on-change", val);
-    },
-    handleChange() {
-      this.emitValue(this.currentValue);
-      this.$attrs.rollback && this.$attrs.rollback();
-    },
-    setCurrentValue(value) {
-      if (value === this.currentValue) {
-        return;
-      }
-      this.currentValue = value ?? "";
-      this.emitValue(this.currentValue);
-    },
+  disabled: {
+    type: Boolean,
+    default: false,
   },
-  watch: {
-    modelValue(val) {
-      this.setCurrentValue(val);
-    },
-    value(val) {
-      this.setCurrentValue(val);
-    },
+  readonly: {
+    type: Boolean,
+    default: false,
   },
-  created() {
-    this.init();
-  },
-};
+  maxlength: Number,
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change"]);
+const attrs = useAttrs();
+
+const accessToken = ref({});
+const currentValue = ref(props.modelValue ?? props.value ?? "");
+const viewImage = ref(false);
+const uploadFileUrl = ref(uploadFile);
+const picModalFlag = ref(false);
+const selectedFormBtnName = ref("");
+const picIndex = ref("");
+const selectedImage = ref([]);
+
+// 模板 ref：ossManage 与 import 组件同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleCLickImg(val, index) {
+  picModalFlag.value = true;
+  selectedFormBtnName.value = val;
+  picIndex.value = index;
+  selectedImage.value = [];
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function callbackSelected(val) {
+  if (val?.url) {
+    selectedImage.value = [val.url];
+  }
+}
+function handleOssSelected(list) {
+  selectedImage.value = (list || []).map((item) => item.split(",")[1]).filter(Boolean);
+}
+function confirmSelectedImage() {
+  if (!selectedImage.value.length) {
+    Message.warning("请选择图片");
+    return;
+  }
+  currentValue.value = selectedImage.value[selectedImage.value.length - 1];
+  picModalFlag.value = false;
+  picIndex.value = "";
+  emitValue(currentValue.value);
+}
+function init() {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+}
+function emitValue(val) {
+  emit("update:modelValue", val);
+  emit("input", val);
+  emit("on-change", val);
+}
+function handleChange() {
+  emitValue(currentValue.value);
+  attrs.rollback && attrs.rollback();
+}
+function setCurrentValue(value) {
+  if (value === currentValue.value) {
+    return;
+  }
+  currentValue.value = value ?? "";
+  emitValue(currentValue.value);
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setCurrentValue(val);
+  }
+);
+
+// 原 created 钩子
+init();
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/lili/upload-pic-thumb.vue b/seller/src/views/my-components/lili/upload-pic-thumb.vue
index 526d192c3..234f4f9c0 100644
--- a/seller/src/views/my-components/lili/upload-pic-thumb.vue
+++ b/seller/src/views/my-components/lili/upload-pic-thumb.vue
@@ -66,7 +66,7 @@
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
-        ref="ossManage"
+        ref="ossManageRef"
         :is-component="true"
         :initialize="picModelFlag"
         :hide-select-footer="true"
@@ -81,204 +81,203 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { Camera, Delete, View } from "@element-plus/icons-vue";
 import { uploadFile } from "@/libs/axios";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 import vuedraggable from "vuedraggable";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
-export default {
-  name: "uploadPicThumb",
-  components: {
-    vuedraggable,
-    ossManage,
-    Camera,
-    Delete,
-    View,
+defineOptions({ name: "uploadPicThumb" });
+
+const props = defineProps({
+  modelValue: { type: null },
+  value: { type: null },
+  draggable: {
+    type: Boolean,
+    default: true,
   },
-  props: {
-    modelValue: { type: null },
-    value: { type: null },
-    draggable: {
-      type: Boolean,
-      default: true,
-    },
-    multiple: {
-      type: Boolean,
-      default: true,
-    },
-    disable: {
-      type: Boolean,
-      default: false,
-    },
-    remove: {
-      type: Boolean,
-      default: true,
-    },
-    limit: {
-      type: Number,
-      default: 10,
-    },
-    isView: {
-      type: Boolean,
-      default: false,
-    },
+  multiple: {
+    type: Boolean,
+    default: true,
   },
-  emits: ["update:modelValue", "input", "on-change", "uploadchange"],
-  data() {
-    return {
-      accessToken: {},
-      uploadFileUrl: uploadFile,
-      uploadList: [],
-      viewImage: false,
-      imgUrl: "",
-      picModelFlag: false,
-      selectedFormBtnName: "",
-      selectedImage: [],
-    };
+  disable: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    bindValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value;
-    },
+  remove: {
+    type: Boolean,
+    default: true,
   },
-  methods: {
-    handleCLickImg(val) {
-      this.picModelFlag = true;
-      this.selectedFormBtnName = val;
-      this.selectedImage = [];
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
+  limit: {
+    type: Number,
+    default: 10,
+  },
+  isView: {
+    type: Boolean,
+    default: false,
+  },
+});
+const emit = defineEmits(["update:modelValue", "input", "on-change", "uploadchange"]);
+
+const accessToken = ref({});
+const uploadFileUrl = uploadFile;
+const uploadList = ref([]);
+const viewImage = ref(false);
+const imgUrl = ref("");
+const picModelFlag = ref(false);
+const selectedFormBtnName = ref("");
+const selectedImage = ref([]);
+
+// 模板 ref：与 import 名 ossManage 重名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+const bindValue = computed(() => {
+  return props.modelValue !== undefined ? props.modelValue : props.value;
+});
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    setData(val);
+  }
+);
+watch(
+  () => props.value,
+  (val) => {
+    setData(val);
+  }
+);
+
+function handleCLickImg(val) {
+  picModelFlag.value = true;
+  selectedFormBtnName.value = val;
+  selectedImage.value = [];
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function parseOssSelectionUrl(item) {
+  if (!item) {
+    return "";
+  }
+  if (typeof item === "string") {
+    const index = item.indexOf(",");
+    return index >= 0 ? item.slice(index + 1) : item;
+  }
+  return item.url || "";
+}
+function callbackSelected(val) {
+  if (props.multiple) {
+    return;
+  }
+  if (!val?.url) {
+    return;
+  }
+  picModelFlag.value = false;
+  if (uploadList.value.length > 0) {
+    uploadList.value.splice(0, 1);
+  }
+  uploadList.value.push({ ...val, status: "finished" });
+  returnValue();
+}
+function confirmUrls() {
+  if (selectedImage.value.length) {
+    selectedImage.value.forEach((element) => {
+      const url = parseOssSelectionUrl(element);
+      if (url) {
+        uploadList.value.push({ url, status: "finished" });
+      }
+    });
+  }
+  selectedImage.value = [];
+  picModelFlag.value = false;
+  returnValue();
+}
+function onEnd() {
+  returnValue();
+}
+function init() {
+  setData(bindValue.value, true);
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+}
+function handleView(url) {
+  imgUrl.value = url;
+  viewImage.value = true;
+}
+function handleRemove(file) {
+  uploadList.value = uploadList.value.filter((i) => i.url !== file.url);
+  returnValue();
+}
+function emitValue(val) {
+  emit("update:modelValue", val);
+  emit("input", val);
+  emit("on-change", val);
+}
+function returnValue() {
+  if (!uploadList.value || uploadList.value.length < 1) {
+    const empty = props.multiple ? [] : "";
+    emitValue(empty);
+    return;
+  }
+  if (!props.multiple) {
+    emitValue(uploadList.value[0].url);
+  } else {
+    emitValue(uploadList.value.map((e) => e.url));
+  }
+}
+function setData(v, init) {
+  if (typeof v == "string") {
+    if (props.multiple) {
+      if (!v) {
+        uploadList.value = [];
+        return;
+      }
+      setData(
+        v.split(",").map((s) => s.trim()).filter(Boolean),
+        init
+      );
+      return;
+    }
+    if (!v) {
+      return;
+    }
+    uploadList.value = [{ url: v, status: "finished" }];
+    emit("uploadchange", v);
+    emitValue(v);
+  } else if (typeof v == "object" && v) {
+    if (!props.multiple) {
+      Message.warning("单张上传仅支持字符串数据类型");
+      return;
+    }
+    uploadList.value = [];
+    const list = v.length > props.limit ? v.slice(0, props.limit) : v;
+    if (v.length > props.limit) {
+      Message.warning("最多只能上传" + props.limit + "张图片");
+    }
+    list.forEach((e) => {
+      uploadList.value.push({
+        status: "finished",
+        ...(typeof e === "string" ? { url: e } : e),
       });
-    },
-    parseOssSelectionUrl(item) {
-      if (!item) {
-        return "";
-      }
-      if (typeof item === "string") {
-        const index = item.indexOf(",");
-        return index >= 0 ? item.slice(index + 1) : item;
-      }
-      return item.url || "";
-    },
-    callbackSelected(val) {
-      if (this.multiple) {
-        return;
-      }
-      if (!val?.url) {
-        return;
-      }
-      this.picModelFlag = false;
-      if (this.uploadList.length > 0) {
-        this.uploadList.splice(0, 1);
-      }
-      this.uploadList.push({ ...val, status: "finished" });
-      this.returnValue();
-    },
-    confirmUrls() {
-      if (this.selectedImage.length) {
-        this.selectedImage.forEach((element) => {
-          const url = this.parseOssSelectionUrl(element);
-          if (url) {
-            this.uploadList.push({ url, status: "finished" });
-          }
-        });
-      }
-      this.selectedImage = [];
-      this.picModelFlag = false;
-      this.returnValue();
-    },
-    onEnd() {
-      this.returnValue();
-    },
-    init() {
-      this.setData(this.bindValue, true);
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-    },
-    handleView(imgUrl) {
-      this.imgUrl = imgUrl;
-      this.viewImage = true;
-    },
-    handleRemove(file) {
-      this.uploadList = this.uploadList.filter((i) => i.url !== file.url);
-      this.returnValue();
-    },
-    emitValue(val) {
-      this.$emit("update:modelValue", val);
-      this.$emit("input", val);
-      this.$emit("on-change", val);
-    },
-    returnValue() {
-      if (!this.uploadList || this.uploadList.length < 1) {
-        const empty = this.multiple ? [] : "";
-        this.emitValue(empty);
-        return;
-      }
-      if (!this.multiple) {
-        this.emitValue(this.uploadList[0].url);
-      } else {
-        this.emitValue(this.uploadList.map((e) => e.url));
-      }
-    },
-    setData(v, init) {
-      if (typeof v == "string") {
-        if (this.multiple) {
-          if (!v) {
-            this.uploadList = [];
-            return;
-          }
-          this.setData(
-            v.split(",").map((s) => s.trim()).filter(Boolean),
-            init
-          );
-          return;
-        }
-        if (!v) {
-          return;
-        }
-        this.uploadList = [{ url: v, status: "finished" }];
-        this.$emit("uploadchange", v);
-        this.emitValue(v);
-      } else if (typeof v == "object" && v) {
-        if (!this.multiple) {
-          this.$Message.warning("单张上传仅支持字符串数据类型");
-          return;
-        }
-        this.uploadList = [];
-        const list = v.length > this.limit ? v.slice(0, this.limit) : v;
-        if (v.length > this.limit) {
-          this.$Message.warning("最多只能上传" + this.limit + "张图片");
-        }
-        list.forEach((e) => {
-          this.uploadList.push({
-            status: "finished",
-            ...(typeof e === "string" ? { url: e } : e),
-          });
-        });
-        if (init) {
-          this.emitValue(list);
-        } else {
-          this.$emit("on-change", list);
-        }
-      }
-    },
-  },
-  watch: {
-    modelValue(val) {
-      this.setData(val);
-    },
-    value(val) {
-      this.setData(val);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    });
+    if (init) {
+      emitValue(list);
+    } else {
+      emit("on-change", list);
+    }
+  }
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/map/index.vue b/seller/src/views/my-components/map/index.vue
index c0c068c9f..2367bf36c 100644
--- a/seller/src/views/my-components/map/index.vue
+++ b/seller/src/views/my-components/map/index.vue
@@ -17,116 +17,114 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { getRegion } from "@/api/common.js";
 import config from "@/config/index";
-export default {
-  name: "map",
-  data() {
-    return {
-      config,
-      showMap: false,
-      mapSearch: "",
-      map: null,
-      autoComplete: null,
-      geocoder: null,
-      positionPicker: null,
-      tips: [],
-      addrContent: {},
-      loading: false,
+import { Message } from "@/utils/message";
+
+defineOptions({ name: "map" });
+
+const emit = defineEmits(["getAddress"]);
+
+const showMap = ref(false);
+const mapSearch = ref("");
+const map = ref(null);
+const autoComplete = ref(null);
+const geocoder = ref(null);
+const positionPicker = ref(null);
+const tips = ref([]);
+const addrContent = ref({});
+const loading = ref(false);
+
+watch(mapSearch, (val) => {
+  searchOfMap(val);
+});
+
+function ok() {
+  if (addrContent.value && addrContent.value.regeocode) {
+    const params = {
+      cityCode: addrContent.value.regeocode.addressComponent.citycode,
+      townName: addrContent.value.regeocode.addressComponent.township,
     };
-  },
-  watch: {
-    mapSearch(val) {
-      this.searchOfMap(val);
-    },
-  },
-  methods: {
-    ok() {
-      if (this.addrContent && this.addrContent.regeocode) {
-        const params = {
-          cityCode: this.addrContent.regeocode.addressComponent.citycode,
-          townName: this.addrContent.regeocode.addressComponent.township,
-        };
-        getRegion(params).then((res) => {
-          if (res.success) {
-            this.addrContent.addr = res.result.name.replace(/,/g, " ");
-            this.addrContent.addrId = res.result.id;
-            this.loading = false;
-            this.$emit("getAddress", this.addrContent);
-          }
-        });
-      } else {
-        this.$Message.error("未获取到坐标信息！请查看高德API配置是否正确");
+    getRegion(params).then((res) => {
+      if (res.success) {
+        addrContent.value.addr = res.result.name.replace(/,/g, " ");
+        addrContent.value.addrId = res.result.id;
+        loading.value = false;
+        emit("getAddress", addrContent.value);
       }
+    });
+  } else {
+    Message.error("未获取到坐标信息！请查看高德API配置是否正确");
+  }
+}
+function init() {
+  AMapLoader.load({
+    key: config.aMapKey,
+    version: "",
+    plugins: [
+      "AMap.ToolBar",
+      "AMap.Autocomplete",
+      "AMap.PlaceSearch",
+      "AMap.Geolocation",
+      "AMap.Geocoder",
+    ],
+    AMapUI: {
+      version: "1.1",
+      plugins: ["misc/PositionPicker"],
     },
-    init() {
-      AMapLoader.load({
-        key: this.config.aMapKey,
-        version: "",
-        plugins: [
-          "AMap.ToolBar",
-          "AMap.Autocomplete",
-          "AMap.PlaceSearch",
-          "AMap.Geolocation",
-          "AMap.Geocoder",
-        ],
-        AMapUI: {
-          version: "1.1",
-          plugins: ["misc/PositionPicker"],
-        },
-      })
-        .then((AMap) => {
-          let that = this;
-          this.map = new AMap.Map("map-container", {
-            zoom: 12,
-          });
-          that.map.addControl(new AMap.ToolBar());
-          that.map.addControl(new AMap.Autocomplete());
-          that.map.addControl(new AMap.PlaceSearch());
-          that.map.addControl(new AMap.Geocoder());
-
-          let autoOptions = {
-            city: "全国",
-          };
-          that.autoComplete = new AMap.Autocomplete(autoOptions);
-          that.geocoder = new AMap.Geocoder(autoOptions);
-
-          that.positionPicker = new AMapUI.PositionPicker({
-            mode: "dragMap",
-            map: that.map,
-          });
-          that.positionPicker.start();
-          that.positionPicker.on("success", function (positionResult) {
-            that.addrContent = positionResult;
-          });
-        })
-        .catch(() => {});
-    },
-    searchOfMap(val) {
-      let that = this;
-      this.autoComplete.search(val, function (status, result) {
-        if (status == "complete" && result.info == "OK") {
-          that.tips = result.tips;
-        } else {
-          that.tips = [];
-        }
+  })
+    .then((AMap) => {
+      map.value = new AMap.Map("map-container", {
+        zoom: 12,
       });
-    },
-    selectAddr(location) {
-      if (!location) {
-        this.$Message.warning("请选择正确点位");
-        return false;
-      }
-      const lnglat = [location.lng, location.lat];
-      this.positionPicker.start(lnglat);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      map.value.addControl(new AMap.ToolBar());
+      map.value.addControl(new AMap.Autocomplete());
+      map.value.addControl(new AMap.PlaceSearch());
+      map.value.addControl(new AMap.Geocoder());
+
+      let autoOptions = {
+        city: "全国",
+      };
+      autoComplete.value = new AMap.Autocomplete(autoOptions);
+      geocoder.value = new AMap.Geocoder(autoOptions);
+
+      positionPicker.value = new AMapUI.PositionPicker({
+        mode: "dragMap",
+        map: map.value,
+      });
+      positionPicker.value.start();
+      positionPicker.value.on("success", function (positionResult) {
+        addrContent.value = positionResult;
+      });
+    })
+    .catch(() => {});
+}
+function searchOfMap(val) {
+  autoComplete.value.search(val, function (status, result) {
+    if (status == "complete" && result.info == "OK") {
+      tips.value = result.tips;
+    } else {
+      tips.value = [];
+    }
+  });
+}
+function selectAddr(location) {
+  if (!location) {
+    Message.warning("请选择正确点位");
+    return false;
+  }
+  const lnglat = [location.lng, location.lat];
+  positionPicker.value.start(lnglat);
+}
+
+onMounted(() => {
+  init();
+});
+
+// 唯一引用方 multiple-map.vue 通过 ref 引用本组件但从不访问任何成员（仅监听 getAddress 事件），无需暴露成员
 </script>
 <style lang="scss" scoped>
 #map-container {
diff --git a/seller/src/views/my-components/map/multiple-map.vue b/seller/src/views/my-components/map/multiple-map.vue
index 15fd53d5d..7fa2d7675 100644
--- a/seller/src/views/my-components/map/multiple-map.vue
+++ b/seller/src/views/my-components/map/multiple-map.vue
@@ -40,85 +40,87 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { aMapSwitch } from "@/config/index";
 import mapping from "@/views/my-components/map/index.vue";
 import * as API_Setup from "@/api/common.js";
+import { Message } from "@/utils/message";
 
-export default {
-  components: { mapping },
-  data() {
-    return {
-      aMapSwitch,
-      enableMap: false,
-      mapDefault: "select",
-      data: {
-        province: [],
-        city: [],
-        area: [],
-        street: [],
-      },
-      chiosend: [],
-    };
-  },
-  mounted() {
-    this.chiosend = new Array(4).fill("");
-  },
-  methods: {
-    open() {
-      this.enableMap = true;
-      this.init({ id: 0 }, "province");
-    },
-    changeMap(val) {
-      this.mapDefault = val;
-    },
-    init(val, level = "province", index) {
-      if (level == 0) {
-        this.chiosend.splice(3, 1, val);
-      } else {
-        API_Setup.getChildRegion(val.id).then((res) => {
-          if (res.result.length && val.id !== 0) {
-            this.chiosend[index] = val;
-          } else if (!res.result.length) {
-            this.chiosend[index] = val;
-          }
-          this.data[level] = res.result;
-          if (level == "city") {
-            this.data.area = [];
-            this.data.street = [];
-            this.chiosend.splice(1, 3, "", "", "");
-          }
-          if (level == "area") {
-            this.data.street = [];
-            this.chiosend.splice(2, 2, "", "");
-          }
-          if (level == "street") {
-            this.chiosend.splice(3, 1, "");
-          }
-        });
+const emit = defineEmits(["callback"]);
+
+const enableMap = ref(false);
+const mapDefault = ref("select");
+const data = reactive({
+  province: [],
+  city: [],
+  area: [],
+  street: [],
+});
+const chiosend = ref([]);
+
+// 模板 ref，对应高德地图子组件
+const map = ref(null);
+
+onMounted(() => {
+  chiosend.value = new Array(4).fill("");
+});
+
+function open() {
+  enableMap.value = true;
+  init({ id: 0 }, "province");
+}
+function changeMap(val) {
+  mapDefault.value = val;
+}
+function init(val, level = "province", index) {
+  if (level == 0) {
+    chiosend.value.splice(3, 1, val);
+  } else {
+    API_Setup.getChildRegion(val.id).then((res) => {
+      if (res.result.length && val.id !== 0) {
+        chiosend.value[index] = val;
+      } else if (!res.result.length) {
+        chiosend.value[index] = val;
       }
-    },
-    getAddress(center) {
-      this.$emit("callback", {
-        type: this.mapDefault,
-        data: center,
-      });
-      this.enableMap = false;
-    },
-    finished() {
-      if (!this.chiosend[0]) {
-        this.$Message.error("请选择地址");
-        return;
+      data[level] = res.result;
+      if (level == "city") {
+        data.area = [];
+        data.street = [];
+        chiosend.value.splice(1, 3, "", "", "");
       }
-      const params = this.chiosend.filter((item) => item !== "" && item.value !== "");
-      this.enableMap = false;
-      this.$emit("callback", {
-        type: this.mapDefault,
-        data: params,
-      });
-    },
-  },
-};
+      if (level == "area") {
+        data.street = [];
+        chiosend.value.splice(2, 2, "", "");
+      }
+      if (level == "street") {
+        chiosend.value.splice(3, 1, "");
+      }
+    });
+  }
+}
+function getAddress(center) {
+  emit("callback", {
+    type: mapDefault.value,
+    data: center,
+  });
+  enableMap.value = false;
+}
+function finished() {
+  if (!chiosend.value[0]) {
+    Message.error("请选择地址");
+    return;
+  }
+  const params = chiosend.value.filter((item) => item !== "" && item.value !== "");
+  enableMap.value = false;
+  emit("callback", {
+    type: mapDefault.value,
+    data: params,
+  });
+}
+
+// 父组件（shopAddress/shopSetting/orderDetail）通过 ref 调用 open() 打开弹窗
+defineExpose({ open });
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/my-components/verify/index.vue b/seller/src/views/my-components/verify/index.vue
index 4b58c9423..3047c8284 100644
--- a/seller/src/views/my-components/verify/index.vue
+++ b/seller/src/views/my-components/verify/index.vue
@@ -37,111 +37,110 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, watch } from "vue";
 import { Refresh, DArrowRight } from "@element-plus/icons-vue";
 import { getVerifyImg, postVerifyImg } from "./verify.js";
+import { Message } from "@/utils/message";
 
-export default {
-  components: { Refresh, DArrowRight },
-  props: {
-    verifyType: {
-      default: "LOGIN",
-      type: String,
-    },
+const props = defineProps({
+  verifyType: {
+    default: "LOGIN",
+    type: String,
   },
-  data() {
-    return {
-      show: false,
-      type: "LOGIN",
-      data: {
-        backImage: "",
-        slidingImage: "",
-        originalHeight: 150,
-        originalWidth: 300,
-        sliderWidth: 60,
-        sliderHeight: 60,
-      },
-      distance: 0,
-      flag: false,
-      downX: 0,
-      bgColor: "#04ad11",
-      verifyText: "拖动滑块解锁",
-    };
+});
+const emit = defineEmits(["change"]);
+
+const show = ref(false);
+const type = ref("LOGIN");
+const data = ref({
+  backImage: "",
+  slidingImage: "",
+  originalHeight: 150,
+  originalWidth: 300,
+  sliderWidth: 60,
+  sliderHeight: 60,
+});
+const distance = ref(0);
+const flag = ref(false);
+const downX = ref(0);
+const bgColor = ref("#04ad11");
+const verifyText = ref("拖动滑块解锁");
+
+watch(
+  () => props.verifyType,
+  (v) => {
+    type.value = v;
   },
-  methods: {
-    mouseDown(e) {
-      this.downX = e.clientX;
-      this.flag = true;
-    },
-    mouseMove(e) {
-      if (this.flag) {
-        const offset = e.clientX - this.downX;
-        if (offset > this.data.originalWidth - 43) {
-          this.distance = this.data.originalWidth - 43;
-        } else if (offset < 0) {
-          this.distance = 0;
+  { immediate: true }
+);
+
+function mouseDown(e) {
+  downX.value = e.clientX;
+  flag.value = true;
+}
+function mouseMove(e) {
+  if (flag.value) {
+    const offset = e.clientX - downX.value;
+    if (offset > data.value.originalWidth - 43) {
+      distance.value = data.value.originalWidth - 43;
+    } else if (offset < 0) {
+      distance.value = 0;
+    } else {
+      distance.value = offset;
+    }
+  }
+}
+function mouseUp() {
+  if (!flag.value) return false;
+  flag.value = false;
+  const params = {
+    verificationEnums: type.value,
+    xPos: distance.value,
+  };
+  postVerifyImg(params)
+    .then((res) => {
+      if (res.success) {
+        if (res.result) {
+          bgColor.value = "green";
+          verifyText.value = "解锁成功";
+          emit("change", { status: true, distance: distance.value });
         } else {
-          this.distance = offset;
+          bgColor.value = "red";
+          verifyText.value = "解锁失败";
+          setTimeout(() => init(), 1000);
+          emit("change", { status: false, distance: distance.value });
         }
+      } else {
+        init();
       }
-    },
-    mouseUp() {
-      if (!this.flag) return false;
-      this.flag = false;
-      const params = {
-        verificationEnums: this.type,
-        xPos: this.distance,
-      };
-      postVerifyImg(params)
-        .then((res) => {
-          if (res.success) {
-            if (res.result) {
-              this.bgColor = "green";
-              this.verifyText = "解锁成功";
-              this.$emit("change", { status: true, distance: this.distance });
-            } else {
-              this.bgColor = "red";
-              this.verifyText = "解锁失败";
-              setTimeout(() => this.init(), 1000);
-              this.$emit("change", { status: false, distance: this.distance });
-            }
-          } else {
-            this.init();
-          }
-        })
-        .catch(() => {
-          this.init();
-        });
-    },
-    init() {
-      this.flag = false;
-      this.downX = 0;
-      this.distance = 0;
-      this.bgColor = "#04ad11";
-      this.verifyText = "拖动滑块解锁";
-      getVerifyImg(this.type)
-        .then((res) => {
-          if (res.result) {
-            this.data = res.result;
-            this.show = true;
-          } else {
-            this.$Message.warning("请求失败请重试！");
-          }
-        })
-        .catch(() => {
-          this.$Message.warning("验证码加载失败，请点击重试");
-        });
-    },
-  },
-  watch: {
-    verifyType: {
-      immediate: true,
-      handler(v) {
-        this.type = v;
-      },
-    },
-  },
-};
+    })
+    .catch(() => {
+      init();
+    });
+}
+function init() {
+  flag.value = false;
+  downX.value = 0;
+  distance.value = 0;
+  bgColor.value = "#04ad11";
+  verifyText.value = "拖动滑块解锁";
+  getVerifyImg(type.value)
+    .then((res) => {
+      if (res.result) {
+        data.value = res.result;
+        show.value = true;
+      } else {
+        Message.warning("请求失败请重试！");
+      }
+    })
+    .catch(() => {
+      Message.warning("验证码加载失败，请点击重试");
+    });
+}
+
+// login.vue / ForgetPassword.vue 通过 verifyRef.value.show = false 关闭、verifyRef.value.init() 打开
+defineExpose({ show, init });
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/after-order/orderComplaint.vue b/seller/src/views/order/after-order/orderComplaint.vue
index 1eaa4978e..fc56c283d 100644
--- a/seller/src/views/order/after-order/orderComplaint.vue
+++ b/seller/src/views/order/after-order/orderComplaint.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -104,96 +104,100 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
 import vueQr from "vue-qr";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "orderComplaint",
-  components: { vueQr },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  watch: {
-    $route() {
-      this.getDataList();
-    },
-  },
-  methods: {
-    complainStatusText(v) {
-      const map = {
-        NEW: "新投诉",
-        CANCEL: "已撤销",
-        WAIT_APPEAL: "待申诉",
-        COMMUNICATION: "对话中",
-        WAIT_ARBITRATION: "等待仲裁",
-        COMPLETE: "已完成",
-      };
-      return map[v] || v || "-";
-    },
-    complainStatusTagType(v) {
-      const map = {
-        NEW: "primary",
-        CANCEL: "info",
-        WAIT_APPEAL: "warning",
-        COMMUNICATION: "warning",
-        WAIT_ARBITRATION: "",
-        COMPLETE: "success",
-      };
-      return map[v] || "info";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getOrderComplain(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    detail(v) {
-      this.$filters.customRouterPush({
-        name: "order-complaint-detail",
-        query: { id: v.id },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+defineOptions({ name: "orderComplaint" });
+
+const route = useRoute();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与 searchForm 数据互相覆盖
+const searchFormRef = ref(null);
+
+watch(
+  () => route.query,
+  () => {
+    getDataList();
+  }
+);
+
+onMounted(() => {
+  init();
+});
+
+function complainStatusText(v) {
+  const map = {
+    NEW: "新投诉",
+    CANCEL: "已撤销",
+    WAIT_APPEAL: "待申诉",
+    COMMUNICATION: "对话中",
+    WAIT_ARBITRATION: "等待仲裁",
+    COMPLETE: "已完成",
+  };
+  return map[v] || v || "-";
+}
+function complainStatusTagType(v) {
+  const map = {
+    NEW: "primary",
+    CANCEL: "info",
+    WAIT_APPEAL: "warning",
+    COMMUNICATION: "warning",
+    WAIT_ARBITRATION: "",
+    COMPLETE: "success",
+  };
+  return map[v] || "info";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getOrderComplain(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function detail(v) {
+  customRouterPush({
+    name: "order-complaint-detail",
+    query: { id: v.id },
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/order/after-order/orderComplaintDetail.vue b/seller/src/views/order/after-order/orderComplaintDetail.vue
index 69754c8ae..539f61c1e 100644
--- a/seller/src/views/order/after-order/orderComplaintDetail.vue
+++ b/seller/src/views/order/after-order/orderComplaintDetail.vue
@@ -188,134 +188,135 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import * as API_Order from "@/api/order";
+import { Message } from "@/utils/message";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
+
+defineOptions({ name: "orderComplaintDetail" });
+
+const route = useRoute();
+const router = useRouter();
+
 const emptyComplaint = () => ({
   id: "",
   orderComplaintCommunications: [],
 });
 
-export default {
-  name: "orderComplaintDetail",
-  components: {
-    uploadPicThumb,
-  },
-  data() {
-    return {
-      loading: false,
-      id: "",
-      complaintInfo: emptyComplaint(),
-      images: [],
-      appealImages: [],
-      submitLoading: false,
-      params: {
-        content: "",
-        complainId: "",
-      },
-      appeal: {
-        orderComplaintId: "",
-        appealContent: "",
-        appealImages: [],
-      },
-    };
-  },
-  methods: {
-    complainStatusText(v) {
-      const map = {
-        NEW: "新投诉",
-        CANCEL: "已撤销",
-        WAIT_APPEAL: "待申诉",
-        COMMUNICATION: "对话中",
-        WAIT_ARBITRATION: "等待仲裁",
-        COMPLETE: "已完成",
-      };
-      return map[v] || v || "-";
-    },
-    getDetail() {
-      if (!this.id) return;
-      this.loading = true;
-      API_Order.getOrderComplainDetail(this.id)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.complaintInfo = res.result || emptyComplaint();
-            this.images = (res.result.images || "")
-              .split(",")
-              .map((s) => s.trim())
-              .filter(Boolean);
-            this.appealImages = (res.result.appealImages || "")
-              .split(",")
-              .map((s) => s.trim())
-              .filter(Boolean);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    returnDataList() {
-      this.$router.push({ name: "orderComplaint" });
-    },
-    appealSubmit() {
-      if (!this.appeal.appealContent) {
-        this.$Message.error("请填写申诉内容");
-        return;
+const loading = ref(false);
+const id = ref("");
+const complaintInfo = ref(emptyComplaint());
+const images = ref([]);
+const appealImages = ref([]);
+const submitLoading = ref(false);
+const params = reactive({
+  content: "",
+  complainId: "",
+});
+const appeal = reactive({
+  orderComplaintId: "",
+  appealContent: "",
+  appealImages: [],
+});
+
+onMounted(() => {
+  id.value = route.query.id;
+  getDetail();
+});
+
+watch(
+  () => route.query.id,
+  (val) => {
+    id.value = val;
+    getDetail();
+  }
+);
+
+function complainStatusText(v) {
+  const map = {
+    NEW: "新投诉",
+    CANCEL: "已撤销",
+    WAIT_APPEAL: "待申诉",
+    COMMUNICATION: "对话中",
+    WAIT_ARBITRATION: "等待仲裁",
+    COMPLETE: "已完成",
+  };
+  return map[v] || v || "-";
+}
+function getDetail() {
+  if (!id.value) return;
+  loading.value = true;
+  API_Order.getOrderComplainDetail(id.value)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        complaintInfo.value = res.result || emptyComplaint();
+        images.value = (res.result.images || "")
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+        appealImages.value = (res.result.appealImages || "")
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
       }
-      this.submitLoading = true;
-      const appealImages = Array.isArray(this.appeal.appealImages)
-        ? this.appeal.appealImages
-        : [];
-      API_Order.appeal({
-        orderComplaintId: this.id,
-        appealContent: this.appeal.appealContent,
-        appealImages,
-      })
-        .then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success("申诉成功");
-            this.appeal.appealContent = "";
-            this.appeal.appealImages = [];
-            this.getDetail();
-          }
-        })
-        .catch(() => {
-          this.submitLoading = false;
-        });
-    },
-    handleSubmit() {
-      if (!this.params.content) {
-        this.$Message.error("请填写对话内容");
-        return;
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function returnDataList() {
+  router.push({ name: "orderComplaint" });
+}
+function appealSubmit() {
+  if (!appeal.appealContent) {
+    Message.error("请填写申诉内容");
+    return;
+  }
+  submitLoading.value = true;
+  const appealImages = Array.isArray(appeal.appealImages)
+    ? appeal.appealImages
+    : [];
+  API_Order.appeal({
+    orderComplaintId: id.value,
+    appealContent: appeal.appealContent,
+    appealImages,
+  })
+    .then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        Message.success("申诉成功");
+        appeal.appealContent = "";
+        appeal.appealImages = [];
+        getDetail();
       }
-      this.submitLoading = true;
-      this.params.complainId = this.id;
-      API_Order.addOrderCommunication(this.params)
-        .then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success("对话成功");
-            this.params.content = "";
-            this.getDetail();
-          }
-        })
-        .catch(() => {
-          this.submitLoading = false;
-        });
-    },
-  },
-  mounted() {
-    this.id = this.$route.query.id;
-    this.getDetail();
-  },
-  watch: {
-    "$route.query.id"(val) {
-      this.id = val;
-      this.getDetail();
-    },
-  },
-};
+    })
+    .catch(() => {
+      submitLoading.value = false;
+    });
+}
+function handleSubmit() {
+  if (!params.content) {
+    Message.error("请填写对话内容");
+    return;
+  }
+  submitLoading.value = true;
+  params.complainId = id.value;
+  API_Order.addOrderCommunication(params)
+    .then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        Message.success("对话成功");
+        params.content = "";
+        getDetail();
+      }
+    })
+    .catch(() => {
+      submitLoading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/after-order/returnGoodsOrder.vue b/seller/src/views/order/after-order/returnGoodsOrder.vue
index 043ef5fc2..52d1c6f1c 100644
--- a/seller/src/views/order/after-order/returnGoodsOrder.vue
+++ b/seller/src/views/order/after-order/returnGoodsOrder.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -153,182 +153,184 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "after-sale-order",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        serviceType: "RETURN_GOODS",
-        orderSn: "",
-        memberName: "",
-        serviceStatus: "",
-        storeName: "",
-        sn: "",
-        keywords: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      currentStatus: "",
-      afterSaleNumData: {},
-    };
-  },
-  computed: {
-    serviceStatusWithCount() {
-      return [
-        { title: "全部", value: "" },
-        {
-          title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
-          value: "APPLY",
-        },
-        {
-          title: `通过售后${this.afterSaleNumData.passNum ? "(" + this.afterSaleNumData.passNum + ")" : ""}`,
-          value: "PASS",
-        },
-        {
-          title: `拒绝售后${this.afterSaleNumData.refuseNum ? "(" + this.afterSaleNumData.refuseNum + ")" : ""}`,
-          value: "REFUSE",
-        },
-        {
-          title: `待收货${this.afterSaleNumData.buyerReturnNum ? "(" + this.afterSaleNumData.buyerReturnNum + ")" : ""}`,
-          value: "BUYER_RETURN",
-        },
-        {
-          title: `确认收货${this.afterSaleNumData.sellerConfirmNum ? "(" + this.afterSaleNumData.sellerConfirmNum + ")" : ""}`,
-          value: "SELLER_CONFIRM",
-        },
-        {
-          title: `完成售后${this.afterSaleNumData.completeNum ? "(" + this.afterSaleNumData.completeNum + ")" : ""}`,
-          value: "COMPLETE",
-        },
-        {
-          title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? "(" + this.afterSaleNumData.sellerTerminationNum + ")" : ""}`,
-          value: "SELLER_TERMINATION",
-        },
-        {
-          title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? "(" + this.afterSaleNumData.buyerCancelNum + ")" : ""}`,
-          value: "BUYER_CANCEL",
-        },
-        {
-          title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? "(" + this.afterSaleNumData.waitRefundNum + ")" : ""}`,
-          value: "WAIT_REFUND",
-        },
-      ];
+defineOptions({ name: "after-sale-order" });
+
+const route = useRoute();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  serviceType: "RETURN_GOODS",
+  orderSn: "",
+  memberName: "",
+  serviceStatus: "",
+  storeName: "",
+  sn: "",
+  keywords: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const currentStatus = ref("");
+const afterSaleNumData = ref({});
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖（原 ref="searchForm" 未被使用）
+const searchFormRef = ref(null);
+
+const serviceStatusWithCount = computed(() => {
+  return [
+    { title: "全部", value: "" },
+    {
+      title: `申请售后${afterSaleNumData.value.applyNum ? "(" + afterSaleNumData.value.applyNum + ")" : ""}`,
+      value: "APPLY",
     },
-  },
-  methods: {
-    serviceStatusText(status) {
-      const map = {
-        APPLY: "申请中",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CANCEL: "买家取消售后",
-        COMPLETE: "完成售后",
-        WAIT_REFUND: "待平台退款",
-      };
-      return map[status] || status || "-";
+    {
+      title: `通过售后${afterSaleNumData.value.passNum ? "(" + afterSaleNumData.value.passNum + ")" : ""}`,
+      value: "PASS",
     },
-    serviceStatusTagType(status) {
-      const map = {
-        APPLY: "primary",
-        PASS: "info",
-        REFUSE: "warning",
-        BUYER_RETURN: "warning",
-        SELLER_CONFIRM: "",
-        SELLER_TERMINATION: "success",
-        BUYER_CANCEL: "danger",
-        COMPLETE: "success",
-        WAIT_REFUND: "primary",
-      };
-      return map[status] || "info";
+    {
+      title: `拒绝售后${afterSaleNumData.value.refuseNum ? "(" + afterSaleNumData.value.refuseNum + ")" : ""}`,
+      value: "REFUSE",
     },
-    init() {
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `待收货${afterSaleNumData.value.buyerReturnNum ? "(" + afterSaleNumData.value.buyerReturnNum + ")" : ""}`,
+      value: "BUYER_RETURN",
     },
-    changePage() {
-      this.getDataList();
+    {
+      title: `确认收货${afterSaleNumData.value.sellerConfirmNum ? "(" + afterSaleNumData.value.sellerConfirmNum + ")" : ""}`,
+      value: "SELLER_CONFIRM",
     },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
+    {
+      title: `完成售后${afterSaleNumData.value.completeNum ? "(" + afterSaleNumData.value.completeNum + ")" : ""}`,
+      value: "COMPLETE",
     },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `卖家终止售后${afterSaleNumData.value.sellerTerminationNum ? "(" + afterSaleNumData.value.sellerTerminationNum + ")" : ""}`,
+      value: "SELLER_TERMINATION",
     },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
+    {
+      title: `买家取消售后${afterSaleNumData.value.buyerCancelNum ? "(" + afterSaleNumData.value.buyerCancelNum + ")" : ""}`,
+      value: "BUYER_CANCEL",
     },
-    getDataList() {
-      this.loading = true;
-      API_Order.getAfterSaleOrderPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
+    {
+      title: `等待平台退款${afterSaleNumData.value.waitRefundNum ? "(" + afterSaleNumData.value.waitRefundNum + ")" : ""}`,
+      value: "WAIT_REFUND",
     },
-    getAfterSaleNumData() {
-      const { serviceStatus, ...searchParams } = this.searchForm;
-      API_Order.getAfterSaleNumVO(searchParams).then((res) => {
-        if (res.success) {
-          this.afterSaleNumData = res.result;
-        }
-      });
-    },
-    detail(v) {
-      const sn = v.sn;
-      this.$filters.customRouterPush({
-        name: "return-goods-order-detail",
-        query: { sn: sn },
-      });
-    },
-    onStatusTabClick(tab) {
-      this.serviceStatusClick(tab.paneName);
-    },
-    serviceStatusClick(item) {
-      this.currentStatus = item;
-      if (item === "" || item === undefined) {
-        delete this.searchForm.serviceStatus;
-      } else {
-        this.searchForm.serviceStatus = item;
-      }
-      this.getDataList();
-      this.getAfterSaleNumData();
-    },
-  },
-  mounted() {
-    const status = this.$route.query.serviceStatus;
-    if (status) {
-      this.currentStatus = status;
-      this.searchForm.serviceStatus = status;
+  ];
+});
+
+function serviceStatusText(status) {
+  const map = {
+    APPLY: "申请中",
+    PASS: "通过售后",
+    REFUSE: "拒绝售后",
+    BUYER_RETURN: "买家退货，待卖家收货",
+    SELLER_CONFIRM: "卖家确认收货",
+    SELLER_TERMINATION: "卖家终止售后",
+    BUYER_CANCEL: "买家取消售后",
+    COMPLETE: "完成售后",
+    WAIT_REFUND: "待平台退款",
+  };
+  return map[status] || status || "-";
+}
+function serviceStatusTagType(status) {
+  const map = {
+    APPLY: "primary",
+    PASS: "info",
+    REFUSE: "warning",
+    BUYER_RETURN: "warning",
+    SELLER_CONFIRM: "",
+    SELLER_TERMINATION: "success",
+    BUYER_CANCEL: "danger",
+    COMPLETE: "success",
+    WAIT_REFUND: "primary",
+  };
+  return map[status] || "info";
+}
+function init() {
+  getDataList();
+  getAfterSaleNumData();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+  getAfterSaleNumData();
+}
+function selectDateRange(v) {
+  if (v) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getAfterSaleOrderPage(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
     }
-    this.init();
-  },
-};
+  });
+}
+function getAfterSaleNumData() {
+  const { serviceStatus, ...searchParams } = searchForm;
+  API_Order.getAfterSaleNumVO(searchParams).then((res) => {
+    if (res.success) {
+      afterSaleNumData.value = res.result;
+    }
+  });
+}
+function detail(v) {
+  const sn = v.sn;
+  customRouterPush({
+    name: "return-goods-order-detail",
+    query: { sn: sn },
+  });
+}
+function onStatusTabClick(tab) {
+  serviceStatusClick(tab.paneName);
+}
+function serviceStatusClick(item) {
+  currentStatus.value = item;
+  if (item === "" || item === undefined) {
+    delete searchForm.serviceStatus;
+  } else {
+    searchForm.serviceStatus = item;
+  }
+  getDataList();
+  getAfterSaleNumData();
+}
+
+onMounted(() => {
+  const status = route.query.serviceStatus;
+  if (status) {
+    currentStatus.value = status;
+    searchForm.serviceStatus = status;
+  }
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/after-order/returnMoneyOrder.vue b/seller/src/views/order/after-order/returnMoneyOrder.vue
index 3f0d176b6..b83d937c6 100644
--- a/seller/src/views/order/after-order/returnMoneyOrder.vue
+++ b/seller/src/views/order/after-order/returnMoneyOrder.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -73,7 +73,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         :data="data"
         class="mt_10"
@@ -145,8 +145,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
+import { customRouterPush } from "@/utils/filters";
+
+defineOptions({ name: "returnMoneyOrder" });
+
+const route = useRoute();
 
 const createDefaultSearchForm = () => ({
   pageNumber: 1,
@@ -163,166 +170,163 @@ const createDefaultSearchForm = () => ({
   keywords: "",
 });
 
-export default {
-  name: "returnMoneyOrder",
-  data() {
-    return {
-      loading: true,
-      searchForm: createDefaultSearchForm(),
-      selectDate: null,
-      data: [],
-      total: 0,
-      currentStatus: "",
-      afterSaleNumData: {},
-    };
-  },
-  computed: {
-    serviceStatusWithCount() {
-      return [
-        { title: "全部", value: "" },
-        {
-          title: `申请售后${this.afterSaleNumData.applyNum ? "(" + this.afterSaleNumData.applyNum + ")" : ""}`,
-          value: "APPLY",
-        },
-        {
-          title: `通过售后${this.afterSaleNumData.passNum ? "(" + this.afterSaleNumData.passNum + ")" : ""}`,
-          value: "PASS",
-        },
-        {
-          title: `拒绝售后${this.afterSaleNumData.refuseNum ? "(" + this.afterSaleNumData.refuseNum + ")" : ""}`,
-          value: "REFUSE",
-        },
-        {
-          title: `完成售后${this.afterSaleNumData.completeNum ? "(" + this.afterSaleNumData.completeNum + ")" : ""}`,
-          value: "COMPLETE",
-        },
-        {
-          title: `卖家终止售后${this.afterSaleNumData.sellerTerminationNum ? "(" + this.afterSaleNumData.sellerTerminationNum + ")" : ""}`,
-          value: "SELLER_TERMINATION",
-        },
-        {
-          title: `买家取消售后${this.afterSaleNumData.buyerCancelNum ? "(" + this.afterSaleNumData.buyerCancelNum + ")" : ""}`,
-          value: "BUYER_CANCEL",
-        },
-        {
-          title: `等待平台退款${this.afterSaleNumData.waitRefundNum ? "(" + this.afterSaleNumData.waitRefundNum + ")" : ""}`,
-          value: "WAIT_REFUND",
-        },
-      ];
+const loading = ref(true);
+// searchForm 会被整体替换（handleReset），使用 ref
+const searchForm = ref(createDefaultSearchForm());
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const currentStatus = ref("");
+const afterSaleNumData = ref({});
+
+// searchFormRef / tableRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+const serviceStatusWithCount = computed(() => {
+  return [
+    { title: "全部", value: "" },
+    {
+      title: `申请售后${afterSaleNumData.value.applyNum ? "(" + afterSaleNumData.value.applyNum + ")" : ""}`,
+      value: "APPLY",
     },
-  },
-  methods: {
-    serviceStatusText(status) {
-      const map = {
-        APPLY: "申请中",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CANCEL: "买家取消售后",
-        COMPLETE: "完成售后",
-        WAIT_REFUND: "待平台退款",
-      };
-      return map[status] || status || "-";
+    {
+      title: `通过售后${afterSaleNumData.value.passNum ? "(" + afterSaleNumData.value.passNum + ")" : ""}`,
+      value: "PASS",
     },
-    serviceStatusTagType(status) {
-      const map = {
-        APPLY: "primary",
-        PASS: "info",
-        REFUSE: "warning",
-        BUYER_RETURN: "warning",
-        SELLER_CONFIRM: "",
-        SELLER_TERMINATION: "success",
-        BUYER_CANCEL: "danger",
-        COMPLETE: "success",
-        WAIT_REFUND: "primary",
-      };
-      return map[status] || "info";
+    {
+      title: `拒绝售后${afterSaleNumData.value.refuseNum ? "(" + afterSaleNumData.value.refuseNum + ")" : ""}`,
+      value: "REFUSE",
     },
-    init() {
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `完成售后${afterSaleNumData.value.completeNum ? "(" + afterSaleNumData.value.completeNum + ")" : ""}`,
+      value: "COMPLETE",
     },
-    changePage() {
-      this.getDataList();
+    {
+      title: `卖家终止售后${afterSaleNumData.value.sellerTerminationNum ? "(" + afterSaleNumData.value.sellerTerminationNum + ")" : ""}`,
+      value: "SELLER_TERMINATION",
     },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
+    {
+      title: `买家取消售后${afterSaleNumData.value.buyerCancelNum ? "(" + afterSaleNumData.value.buyerCancelNum + ")" : ""}`,
+      value: "BUYER_CANCEL",
     },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getAfterSaleNumData();
+    {
+      title: `等待平台退款${afterSaleNumData.value.waitRefundNum ? "(" + afterSaleNumData.value.waitRefundNum + ")" : ""}`,
+      value: "WAIT_REFUND",
     },
-    handleReset() {
-      this.searchForm = createDefaultSearchForm();
-      this.selectDate = null;
-      this.currentStatus = "";
-      this.getDataList();
-      this.getAfterSaleNumData();
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
+  ];
+});
+
+onMounted(() => {
+  const status = route.query.serviceStatus;
+  if (status) {
+    currentStatus.value = status;
+    searchForm.value.serviceStatus = status;
+  }
+  init();
+});
+
+function serviceStatusText(status) {
+  const map = {
+    APPLY: "申请中",
+    PASS: "通过售后",
+    REFUSE: "拒绝售后",
+    BUYER_RETURN: "买家退货，待卖家收货",
+    SELLER_CONFIRM: "卖家确认收货",
+    SELLER_TERMINATION: "卖家终止售后",
+    BUYER_CANCEL: "买家取消售后",
+    COMPLETE: "完成售后",
+    WAIT_REFUND: "待平台退款",
+  };
+  return map[status] || status || "-";
+}
+function serviceStatusTagType(status) {
+  const map = {
+    APPLY: "primary",
+    PASS: "info",
+    REFUSE: "warning",
+    BUYER_RETURN: "warning",
+    SELLER_CONFIRM: "",
+    SELLER_TERMINATION: "success",
+    BUYER_CANCEL: "danger",
+    COMPLETE: "success",
+    WAIT_REFUND: "primary",
+  };
+  return map[status] || "info";
+}
+function init() {
+  getDataList();
+  getAfterSaleNumData();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 20;
+  getDataList();
+  getAfterSaleNumData();
+}
+function handleReset() {
+  searchForm.value = createDefaultSearchForm();
+  selectDate.value = null;
+  currentStatus.value = "";
+  getDataList();
+  getAfterSaleNumData();
+}
+function selectDateRange(v) {
+  if (v) {
+    searchForm.value.startDate = v[0];
+    searchForm.value.endDate = v[1];
+  } else {
+    searchForm.value.startDate = "";
+    searchForm.value.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getAfterSaleOrderPage(searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getAfterSaleOrderPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    getAfterSaleNumData() {
-      const { serviceStatus, ...searchParams } = this.searchForm;
-      API_Order.getAfterSaleNumVO(searchParams).then((res) => {
-        if (res.success) {
-          this.afterSaleNumData = res.result;
-        }
-      });
-    },
-    detail(v) {
-      this.$filters.customRouterPush({
-        name: "return-goods-order-detail",
-        query: { sn: v.sn },
-      });
-    },
-    onStatusTabClick(tab) {
-      this.serviceStatusClick(tab.paneName);
-    },
-    serviceStatusClick(item) {
-      this.currentStatus = item;
-      if (item === "" || item === undefined) {
-        delete this.searchForm.serviceStatus;
-      } else {
-        this.searchForm.serviceStatus = item;
-      }
-      this.getDataList();
-      this.getAfterSaleNumData();
-    },
-  },
-  mounted() {
-    const status = this.$route.query.serviceStatus;
-    if (status) {
-      this.currentStatus = status;
-      this.searchForm.serviceStatus = status;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function getAfterSaleNumData() {
+  const { serviceStatus, ...searchParams } = searchForm.value;
+  API_Order.getAfterSaleNumVO(searchParams).then((res) => {
+    if (res.success) {
+      afterSaleNumData.value = res.result;
     }
-    this.init();
-  },
-};
+  });
+}
+function detail(v) {
+  customRouterPush({
+    name: "return-goods-order-detail",
+    query: { sn: v.sn },
+  });
+}
+function onStatusTabClick(tab) {
+  serviceStatusClick(tab.paneName);
+}
+function serviceStatusClick(item) {
+  currentStatus.value = item;
+  if (item === "" || item === undefined) {
+    delete searchForm.value.serviceStatus;
+  } else {
+    searchForm.value.serviceStatus = item;
+  }
+  getDataList();
+  getAfterSaleNumData();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue b/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
index 65c432b32..a7432c616 100644
--- a/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
+++ b/seller/src/views/order/after-order/reurnGoodsOrderDetail.vue
@@ -348,276 +348,278 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
-export default {
-  name: "returnGoodsOrderDetail",
-  data() {
-    return {
-      sn: "", // 订单号
-      logisticsModal: false, //查询物流模态框
+import { Message, Modal } from "@/utils/message";
 
-      logisticsInfo: {}, //物流信息
-      afterSaleInfo: {}, // 售后信息
-      afterSaleImage: [], //会员申诉图片
-      submitLoading: false, // 添加或编辑提交状态
-      confirmLoading: false, // 确认收货提交状态
-      storeMsg: {}, // 商家地址信息
-      //商家处理意见
-      params: {
-        serviceStatus: "PASS",
-        remark: "",
-      },
-      //平台退款
-      refundPriceForm: {
-        remark: "",
-      },
-      afterSaleRefundStatusList: [
-        {
-          name: "退款申请",
-          status: "APPLY",
-        },
-        {
-          name: "通过售后",
-          status: "PASS",
-        },
-        {
-          name: "拒绝售后",
-          status: "REFUSE",
-        },
-        {
-          name: "卖家终止售后",
-          status: "SELLER_TERMINATION",
-        },
-        {
-          name: "买家取消售后",
-          status: "BUYER_CANCEL",
-        },
-        {
-          name: "完成售后",
-          status: "COMPLETE",
-        },
-        {
-          name: "待平台退款",
-          status: "WAIT_REFUND",
-        },
-      ],
-      afterSaleStatusList: [
-        // 售后状态列表
-        {
-          name: "申请中",
-          status: "APPLY",
-        },
-        {
-          name: "通过售后",
-          status: "PASS",
-        },
-        {
-          name: "拒绝售后",
-          status: "REFUSE",
-        },
-        {
-          name: "买家退货，待卖家收货",
-          status: "BUYER_RETURN",
-        },
-        {
-          name: "卖家确认收货",
-          status: "SELLER_CONFIRM",
-        },
-        {
-          name: "卖家终止售后",
-          status: "SELLER_TERMINATION",
-        },
-        {
-          name: "买家取消售后",
-          status: "BUYER_CANCEL",
-        },
-        {
-          name: "完成售后",
-          status: "COMPLETE",
-        },
-        {
-          name: "待平台退款",
-          status: "WAIT_REFUND",
-        },
-      ],
-    };
+defineOptions({ name: "returnGoodsOrderDetail" });
+
+const route = useRoute();
+
+const sn = ref(""); // 订单号
+const logisticsModal = ref(false); //查询物流模态框
+
+const logisticsInfo = ref({}); //物流信息
+const afterSaleInfo = ref({}); // 售后信息
+const afterSaleImage = ref([]); //会员申诉图片
+const submitLoading = ref(false); // 添加或编辑提交状态
+const confirmLoading = ref(false); // 确认收货提交状态
+const storeMsg = ref({}); // 商家地址信息
+// 原代码未在 data 声明、直接挂 this 上的字段，补声明避免 ReferenceError
+let loading = false;
+//商家处理意见
+const params = reactive({
+  serviceStatus: "PASS",
+  remark: "",
+});
+//平台退款
+const refundPriceForm = reactive({
+  remark: "",
+});
+const afterSaleRefundStatusList = ref([
+  {
+    name: "退款申请",
+    status: "APPLY",
   },
-  computed: {
-    isRefundOnly() {
-      return this.afterSaleInfo.serviceType === "RETURN_MONEY";
-    },
-    sectionTitle() {
-      return this.isRefundOnly ? "退款申请" : "退货申请";
-    },
-    buyerLogisticsName() {
-      const info = this.afterSaleInfo;
-      return (
-        info.mLogisticsName ||
-        info.mlogisticsName ||
-        this.logisticsInfo.shipper ||
-        "-"
-      );
-    },
-    buyerLogisticsNo() {
-      const info = this.afterSaleInfo;
-      return (
-        info.mLogisticsNo ||
-        info.mlogisticsNo ||
-        this.logisticsInfo.logisticCode ||
-        "-"
-      );
-    },
-    canConfirmReceipt() {
-      const vo = this.afterSaleInfo.afterSaleAllowOperationVO;
-      if (vo && vo.rog) return true;
-      return this.afterSaleInfo.serviceStatus === "BUYER_RETURN";
-    },
+  {
+    name: "通过售后",
+    status: "PASS",
   },
-  methods: {
-    // 获取售后详情
-    getDetail() {
-      this.loading = true;
-      API_Order.getAfterSaleOrderDetail(this.sn).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.afterSaleInfo = res.result;
-          this.afterSaleInfo.showDelivery = this.showDelivery(
-            this.afterSaleInfo.serviceStatus
-          );
-          this.afterSaleInfo.serviceName = this.filterOrderStatus(
-            this.afterSaleInfo.serviceStatus
-          );
-          this.afterSaleImage = (res.result.afterSaleImage || "").split(",");
-          //退货地址去掉逗号
-          if (this.afterSaleInfo.mconsigneeAddressPath)
-            this.afterSaleInfo.mconsigneeAddressPath = this.afterSaleInfo.mconsigneeAddressPath.replaceAll(
+  {
+    name: "拒绝售后",
+    status: "REFUSE",
+  },
+  {
+    name: "卖家终止售后",
+    status: "SELLER_TERMINATION",
+  },
+  {
+    name: "买家取消售后",
+    status: "BUYER_CANCEL",
+  },
+  {
+    name: "完成售后",
+    status: "COMPLETE",
+  },
+  {
+    name: "待平台退款",
+    status: "WAIT_REFUND",
+  },
+]);
+const afterSaleStatusList = ref([
+  // 售后状态列表
+  {
+    name: "申请中",
+    status: "APPLY",
+  },
+  {
+    name: "通过售后",
+    status: "PASS",
+  },
+  {
+    name: "拒绝售后",
+    status: "REFUSE",
+  },
+  {
+    name: "买家退货，待卖家收货",
+    status: "BUYER_RETURN",
+  },
+  {
+    name: "卖家确认收货",
+    status: "SELLER_CONFIRM",
+  },
+  {
+    name: "卖家终止售后",
+    status: "SELLER_TERMINATION",
+  },
+  {
+    name: "买家取消售后",
+    status: "BUYER_CANCEL",
+  },
+  {
+    name: "完成售后",
+    status: "COMPLETE",
+  },
+  {
+    name: "待平台退款",
+    status: "WAIT_REFUND",
+  },
+]);
+
+const isRefundOnly = computed(() => {
+  return afterSaleInfo.value.serviceType === "RETURN_MONEY";
+});
+const sectionTitle = computed(() => {
+  return isRefundOnly.value ? "退款申请" : "退货申请";
+});
+const buyerLogisticsName = computed(() => {
+  const info = afterSaleInfo.value;
+  return (
+    info.mLogisticsName ||
+    info.mlogisticsName ||
+    logisticsInfo.value.shipper ||
+    "-"
+  );
+});
+const buyerLogisticsNo = computed(() => {
+  const info = afterSaleInfo.value;
+  return (
+    info.mLogisticsNo ||
+    info.mlogisticsNo ||
+    logisticsInfo.value.logisticCode ||
+    "-"
+  );
+});
+const canConfirmReceipt = computed(() => {
+  const vo = afterSaleInfo.value.afterSaleAllowOperationVO;
+  if (vo && vo.rog) return true;
+  return afterSaleInfo.value.serviceStatus === "BUYER_RETURN";
+});
+
+// 获取售后详情
+function getDetail() {
+  loading = true;
+  API_Order.getAfterSaleOrderDetail(sn.value).then((res) => {
+    loading = false;
+    if (res.success) {
+      afterSaleInfo.value = res.result;
+      afterSaleInfo.value.showDelivery = showDelivery(
+        afterSaleInfo.value.serviceStatus
+      );
+      afterSaleInfo.value.serviceName = filterOrderStatus(
+        afterSaleInfo.value.serviceStatus
+      );
+      afterSaleImage.value = (res.result.afterSaleImage || "").split(",");
+      //退货地址去掉逗号
+      if (afterSaleInfo.value.mconsigneeAddressPath)
+        afterSaleInfo.value.mconsigneeAddressPath = afterSaleInfo.value.mconsigneeAddressPath.replaceAll(
+          ",",
+          " "
+        );
+
+      params.actualRefundPrice = afterSaleInfo.value.applyRefundPrice;
+      // 如果显示物流信息，展示商家地址
+      if (afterSaleInfo.value.showDelivery) {
+        API_Order.storeAddress(sn.value).then((resu) => {
+          if (resu.success) {
+            const obj = resu.result;
+            obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
               ",",
-              " "
+              ""
             );
-
-          this.params.actualRefundPrice = this.afterSaleInfo.applyRefundPrice;
-          // 如果显示物流信息，展示商家地址
-          if (this.afterSaleInfo.showDelivery) {
-            API_Order.storeAddress(this.sn).then((resu) => {
-              if (resu.success) {
-                const obj = resu.result;
-                obj.salesConsigneeAddressPath = obj.salesConsigneeAddressPath.replaceAll(
-                  ",",
-                  ""
-                );
-                this.storeMsg = obj;
-              }
-            });
+            storeMsg.value = obj;
           }
-        }
-      });
-    },
-    //平台退款
-    refundPriceSubmit() {
-      if (this.refundPriceForm.remark == "") {
-        this.$Message.error("请输入退款备注");
-        return;
+        });
       }
-      this.$Modal.confirm({
-        title: "确认退款",
-        content: "请确认退款？",
-        loading: true,
-        onOk: () => {
-          API_Order.refundPrice(this.sn, this.refundPriceForm).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("收款成功");
-              this.getDetail();
-            }
-          });
-        },
-      });
-    },
-    //查询物流
-    logisticsSeller() {
-      this.logisticsModal = true;
-      this.logisticsInfo = {};
-      API_Order.getAfterSaleTraces(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.logisticsInfo = res.result;
-        }
-      });
-    },
-    // 商家确认收货 / 拒收
-    sellerConfirmSubmit(type) {
-      const isPass = type === "PASS";
-      this.$Modal.confirm({
-        title: isPass ? "确认收货" : "确认拒收",
-        content: isPass ? "请确认已经收到退货货物？" : "确认拒收此货物？",
-        loading: true,
-        onOk: () => {
-          this.confirmLoading = true;
-          API_Order.afterSaleSellerConfirm(this.sn, {
-            serviceStatus: type,
-            remark: this.params.remark || "",
-          }).then((res) => {
-            this.$Modal.remove();
-            this.confirmLoading = false;
-            if (res.success) {
-              this.$Message.success(isPass ? "收货成功" : "拒收成功");
-              this.getDetail();
-            }
-          }).catch(() => {
-            this.$Modal.remove();
-            this.confirmLoading = false;
-          });
-        },
-      });
-    },
-    //关闭物流弹出框
-    logisticsClose() {
-      this.logisticsModal = false;
-    },
-    //回复
-    handleSubmit() {
-      if (this.params.remark == "") {
-        this.$Message.error("请输入备注信息");
-        return;
-      }
-      if (this.params.serviceStatus === "PASS" && this.params.actualRefundPrice === "") {
-        this.$Message.error("请输入退款金额");
-        return;
-      }
-      API_Order.afterSaleSellerReview(this.sn, this.params).then((res) => {
-        this.submitLoading = false;
+    }
+  });
+}
+//平台退款
+function refundPriceSubmit() {
+  if (refundPriceForm.remark == "") {
+    Message.error("请输入退款备注");
+    return;
+  }
+  Modal.confirm({
+    title: "确认退款",
+    content: "请确认退款？",
+    loading: true,
+    onOk: () => {
+      API_Order.refundPrice(sn.value, refundPriceForm).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.$Message.success("审核成功");
-          this.params.remark = "";
-          this.getDetail();
+          Message.success("收款成功");
+          getDetail();
         }
       });
     },
-    filterOrderStatus(status) {
-      const list =
-        this.afterSaleInfo.serviceType === "RETURN_MONEY"
-          ? this.afterSaleRefundStatusList
-          : this.afterSaleStatusList;
-      const ob = list.filter((e) => e.status === status);
-      return ob.length > 0 ? ob[0].name : status;
-    },
-    // 根据订单状态判断是否显示物流信息
-    showDelivery(status) {
-      let flag = false;
-      this.afterSaleStatusList.forEach((e, index) => {
-        // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
-        if (e.status === status && index >= 3 && index !== 6) {
-          flag = true;
+  });
+}
+//查询物流
+function logisticsSeller() {
+  logisticsModal.value = true;
+  logisticsInfo.value = {};
+  API_Order.getAfterSaleTraces(sn.value).then((res) => {
+    if (res.success && res.result != null) {
+      logisticsInfo.value = res.result;
+    }
+  });
+}
+// 商家确认收货 / 拒收
+function sellerConfirmSubmit(type) {
+  const isPass = type === "PASS";
+  Modal.confirm({
+    title: isPass ? "确认收货" : "确认拒收",
+    content: isPass ? "请确认已经收到退货货物？" : "确认拒收此货物？",
+    loading: true,
+    onOk: () => {
+      confirmLoading.value = true;
+      API_Order.afterSaleSellerConfirm(sn.value, {
+        serviceStatus: type,
+        remark: params.remark || "",
+      }).then((res) => {
+        Modal.remove();
+        confirmLoading.value = false;
+        if (res.success) {
+          Message.success(isPass ? "收货成功" : "拒收成功");
+          getDetail();
         }
+      }).catch(() => {
+        Modal.remove();
+        confirmLoading.value = false;
       });
-      return flag;
     },
-  },
-  mounted() {
-    this.sn = this.$route.query.sn;
-    this.getDetail();
-  },
-};
+  });
+}
+//关闭物流弹出框
+function logisticsClose() {
+  logisticsModal.value = false;
+}
+//回复
+function handleSubmit() {
+  if (params.remark == "") {
+    Message.error("请输入备注信息");
+    return;
+  }
+  if (params.serviceStatus === "PASS" && params.actualRefundPrice === "") {
+    Message.error("请输入退款金额");
+    return;
+  }
+  API_Order.afterSaleSellerReview(sn.value, params).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+      Message.success("审核成功");
+      params.remark = "";
+      getDetail();
+    }
+  });
+}
+function filterOrderStatus(status) {
+  const list =
+    afterSaleInfo.value.serviceType === "RETURN_MONEY"
+      ? afterSaleRefundStatusList.value
+      : afterSaleStatusList.value;
+  const ob = list.filter((e) => e.status === status);
+  return ob.length > 0 ? ob[0].name : status;
+}
+// 根据订单状态判断是否显示物流信息
+function showDelivery(status) {
+  let flag = false;
+  afterSaleStatusList.value.forEach((e, index) => {
+    // 订单为买家退货，待卖家收货之后的状态，并且不是买家取消售后，展示物流信息
+    if (e.status === status && index >= 3 && index !== 6) {
+      flag = true;
+    }
+  });
+  return flag;
+}
+
+onMounted(() => {
+  sn.value = route.query.sn;
+  getDetail();
+});
 </script>
 <style lang="scss">
 .main-content {
diff --git a/seller/src/views/order/order/exportOrderDeliver.vue b/seller/src/views/order/order/exportOrderDeliver.vue
index 5d270b5f9..7f26e89cf 100644
--- a/seller/src/views/order/order/exportOrderDeliver.vue
+++ b/seller/src/views/order/order/exportOrderDeliver.vue
@@ -45,101 +45,106 @@
   </el-card>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { UploadFilled } from "@element-plus/icons-vue";
 import { downLoadDeliverExcel, uploadDeliverExcel } from "@/api/order.js";
 import { baseUrl } from "@/libs/axios.js";
+import { getStore } from "@/libs/storage";
+import { useAppStore } from "@/stores/app";
 import downloadImg from "@/assets/download.png";
 import uploadImg from "@/assets/upload.png";
 import successImg from "@/assets/success.png";
 
-export default {
-  components: { UploadFilled },
-  data() {
-    return {
-      file: "",
-      action: baseUrl + "/order/order/batchDeliver",
-      accessToken: {},
-      stepList: [
-        {
-          img: downloadImg,
-          title: "1.下载批量发货导入模板",
-          checked: true,
-        },
-        {
-          img: uploadImg,
-          title: "2.上传数据",
-          checked: false,
-        },
-        {
-          img: successImg,
-          title: "3.完成",
-          checked: false,
-        },
-      ],
-    };
+const appStore = useAppStore();
+const router = useRouter();
+
+const file = ref("");
+const action = baseUrl + "/order/order/batchDeliver";
+const accessToken = ref({});
+const stepList = ref([
+  {
+    img: downloadImg,
+    title: "1.下载批量发货导入模板",
+    checked: true,
   },
-  mounted() {
-    this.accessToken.accessToken = this.getStore("accessToken");
+  {
+    img: uploadImg,
+    title: "2.上传数据",
+    checked: false,
   },
-  methods: {
-    handleCheckStep(val) {
-      if (val.title.search("3") === -1) {
-        this.stepList.forEach((item) => {
-          item.checked = false;
-        });
-        val.checked = true;
+  {
+    img: successImg,
+    title: "3.完成",
+    checked: false,
+  },
+]);
+
+onMounted(() => {
+  accessToken.value.accessToken = getStore("accessToken");
+});
+
+function handleCheckStep(val) {
+  if (val.title.search("3") === -1) {
+    stepList.value.forEach((item) => {
+      item.checked = false;
+    });
+    val.checked = true;
+  }
+}
+
+function handleUpload(uploadFile) {
+  file.value = uploadFile;
+  upload();
+  return false;
+}
+
+function navigationToGoodsOrder() {
+  router.push({ path: "/order/orderList" });
+}
+
+function close() {
+  appStore.removeTag("export-order-deliver");
+  localStorage.storeOpenedList = JSON.stringify(appStore.storeOpenedList);
+  router.go(-1);
+}
+
+async function upload() {
+  const fd = new FormData();
+  fd.append("files", file.value);
+  const res = await uploadDeliverExcel(fd);
+  if (res.success) {
+    stepList.value.forEach((item) => {
+      item.checked = false;
+    });
+    stepList.value[2].checked = true;
+  }
+}
+
+function downLoad() {
+  downLoadDeliverExcel()
+    .then((res) => {
+      const blob = new Blob([res], {
+        type: "application/vnd.ms-excel;charset=utf-8",
+      });
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = "批量发货导入模板.xls";
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
+      } else {
+        navigator.msSaveBlob(blob, "批量发货导入模板.xls");
       }
-    },
-    handleUpload(file) {
-      this.file = file;
-      this.upload();
-      return false;
-    },
-    navigationToGoodsOrder() {
-      this.$router.push({ path: "/order/orderList" });
-    },
-    close() {
-      this.$store.commit("removeTag", "export-order-deliver");
-      localStorage.storeOpenedList = JSON.stringify(this.$store.state.app.storeOpenedList);
-      this.$router.go(-1);
-    },
-    async upload() {
-      const fd = new FormData();
-      fd.append("files", this.file);
-      const res = await uploadDeliverExcel(fd);
-      if (res.success) {
-        this.stepList.forEach((item) => {
-          item.checked = false;
-        });
-        this.stepList[2].checked = true;
-      }
-    },
-    downLoad() {
-      downLoadDeliverExcel()
-        .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=utf-8",
-          });
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = "批量发货导入模板.xls";
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else {
-            navigator.msSaveBlob(blob, "批量发货导入模板.xls");
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-  },
-};
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/order/orderDetail.vue b/seller/src/views/order/order/orderDetail.vue
index 8172da052..2ac8ea9c7 100644
--- a/seller/src/views/order/order/orderDetail.vue
+++ b/seller/src/views/order/order/orderDetail.vue
@@ -406,7 +406,7 @@
     </div>
 
     <el-dialog v-model="modal" title="修改金额" width="530px">
-      <el-form ref="modifyPriceForm" :model="modifyPriceForm" label-width="100px" :rules="modifyPriceValidate" @submit.prevent>
+      <el-form ref="modifyPriceFormRef" :model="modifyPriceForm" label-width="100px" :rules="modifyPriceValidate" @submit.prevent>
         <el-form-item label="订单金额" prop="orderPrice">
           <el-input-number v-model="modifyPriceForm.orderPrice" :min="0.01" :max="99999" style="width: 100%" />
         </el-form-item>
@@ -418,7 +418,7 @@
     </el-dialog>
 
     <el-dialog v-model="sellerRemarkModal" title="编辑备注" width="530px">
-      <el-form ref="modifyRemarkForm" :model="modifyRemarkForm" label-width="100px">
+      <el-form ref="modifyRemarkFormRef" :model="modifyRemarkForm" label-width="100px">
         <el-form-item label="订单备注" prop="sellerRemark">
           <el-input v-model="modifyRemarkForm.sellerRemark" maxlength="20" show-word-limit />
         </el-form-item>
@@ -430,7 +430,7 @@
     </el-dialog>
 
     <el-dialog v-model="addressModal" title="修改收件信息" width="530px">
-      <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="addressRule">
+      <el-form ref="addressFormRef" :model="addressForm" label-width="100px" :rules="addressRule">
         <el-form-item label="收件人" prop="consigneeName">
           <el-input v-model="addressForm.consigneeName" maxlength="20" />
         </el-form-item>
@@ -774,7 +774,7 @@
 
     <el-dialog v-model="faceSheetModal" title="打印电子面单" width="500px">
       <el-form
-        ref="faceSheetForm"
+        ref="faceSheetFormRef"
         :model="faceSheetForm"
         :rules="faceSheetFormValidate"
         label-width="90px"
@@ -812,7 +812,7 @@
           已核销 {{ appointmentVerification.verifiedCount }}/{{ appointmentVerification.totalCount }}，
           请继续输入剩余核销码直至全部完成。
         </el-alert>
-        <el-form ref="appointmentTakeForm" :model="appointmentTakeForm" label-width="100px" :rules="appointmentTakeValidate">
+        <el-form ref="appointmentTakeFormRef" :model="appointmentTakeForm" label-width="100px" :rules="appointmentTakeValidate">
           <el-form-item label="服务人员" prop="staffId">
             <el-select
               v-model="appointmentTakeForm.staffId"
@@ -852,7 +852,7 @@
           </el-table-column>
         </el-table>
       </template>
-      <el-form v-else ref="orderTakeForm" :model="orderTakeForm" label-width="100px" :rules="orderTakeValidate">
+      <el-form v-else ref="orderTakeFormRef" :model="orderTakeForm" label-width="100px" :rules="orderTakeValidate">
         <el-form-item label="核销码" prop="qrCode">
           <el-input v-model="orderTakeForm.qrCode" placeholder="请输入核销码" maxlength="10" clearable />
         </el-form-item>
@@ -873,7 +873,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref, watch } from "vue";
+import { onBeforeRouteLeave, useRoute, useRouter } from "vue-router";
 import * as API_Order from "@/api/order";
 import * as API_Logistics from "@/api/logistics";
 import * as RegExp from "@/libs/RegExp.js";
@@ -902,843 +904,847 @@ import {
   verifyAppointmentCode,
 } from "@/api/appointment";
 import { WORK_ORDER_STATUS_LABEL, parseFormAnswerGroups } from "@/constants/appointment";
-export default {
-  name: "orderDetail",
-  components: {
-    multipleMap,
-    "vue-qr": vueQr,
-  },
-  data () {
-    return {
-      typeList: [],
-      showPrices: false,
-      printHiddenFlag: false,
-      loading: false,
-      logisticsType: "KUAIDINIAO",
-      someJSONdata: "",
-      faceSheetForm: {
-        logisticsId: "",
-      },
-      faceSheetFormValidate: {
-        logisticsId: [{ required: true, message: "请选择物流公司" }],
-      },
-      logisticsModal: false,
-      faceSheetModal: false,
-      logisticsInfo: {
-        shipper: "",
-      },
-      packageTraceList: [],
-      sellerRemarkModal: false,
-      addr: "",
-      regionId: "",
+import { Message } from "@/utils/message";
 
-      orderLogModal: false,
-      checkedLogistics: [], //选中的物流公司集合
-      allowOperation: {}, //订单可才做选项
-      sn: "", //订单编号
-      orderInfo: {
-        order: {
-          priceDetailDTO: {},
-        },
-      },
-      modal: false,
-      //调整价格表单
-      modifyPriceForm: {
-        orderPrice: 0,
-      },
-      modifyRemarkForm: {
-        sellerRemark: "",
-      },
-      fulfillModal: false,
-      fulfillSubmitting: false,
-      autoOpenFulfill: true,
-      fulfillForm: {
-        fulfillmentMode: "WHOLE",
-        logisticsNo: "",
-        logisticsId: "",
-        deliveryRemark: "",
-        selectedOrderItemIds: [],
-        deliveryNumMap: {},
-      },
-      orderPackages: [],
-      //验证要调整的订单金额
-      modifyPriceValidate: {
-        orderPrice: [
-          { required: true, message: "请输入大于等于0或小于99999的合法金额" },
-          {
-            pattern: /^\d+(\.(([1-9])|(0[1-9])|([\d^0]\d)))?$/,
-            message: "请输入大于0小于9999的合法金额",
-            trigger: "change",
-          },
-        ],
-      },
+defineOptions({ name: "orderDetail" });
 
-      addressModal: false,
-      printModal: false,
-      orderTakeModal: false,
-      orderTakeForm: {
-        qrCode: "",
-      },
-      appointmentVerification: {
-        codes: [],
-        totalCount: 0,
-        verifiedCount: 0,
-        workOrderStatus: "",
-        workOrderVisible: false,
-      },
-      enabledStaffList: [],
-      appointmentTakeForm: {
-        staffId: "",
-        code: "",
-      },
-      appointmentVerifyLoading: false,
-      appointmentTakeValidate: {
-        staffId: [{ required: true, message: "请选择服务人员", trigger: "change" }],
-        code: [{ required: true, message: "核销码不能为空", trigger: "blur" }],
-      },
-      orderTakeValidate: {
-        qrCode: [{ required: true, message: "订单核销码不能为空", trigger: "blur" }],
-      },
-      //收件地址表单
-      addressForm: {
-        consigneeName: "",
-        consigneeMobile: "",
-        consigneeDetail: "",
-        consigneeAddressPath: "",
-        consigneeAddressIdPath: "",
-      },
-      fulfillRules: {
-        logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
-        logisticsId: [{ required: true, message: "请选择物流公司", trigger: "change" }],
-      },
-      addressRule: {
-        consigneeName: [
-          { required: true, message: "收货人姓名不能为空", trigger: "blur" },
-        ],
-        consigneeMobile: [
-          { required: true, message: "联系方式不能为空", trigger: "blur" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-        consigneeDetail: [
-          { required: true, message: "详细地址不能为空", trigger: "blur" },
-        ],
-      },
+const route = useRoute();
+const router = useRouter();
 
-      data: [], // 表单数据
-    };
-  },
-  computed: {
-    /** 电子卡券订单：隐藏物流/发货/售后，展示 orderItems[].cardKeys（FR-S-04 / FR-S-05） */
-    isECouponOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      return t === "E_COUPON" || this.$route.query.orderType === "E_COUPON";
-    },
-    isVirtualOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      return t === "VIRTUAL" || this.$route.query.orderType === "VIRTUAL";
-    },
-    isNonPhysicalOrder() {
-      return this.isVirtualOrder || this.isECouponOrder || this.isAppointmentOrder;
-    },
-    /** 实物订单才展示收货、配送、运费和发货记录 */
-    showDelivery() {
-      return !this.isNonPhysicalOrder;
-    },
-    /** 实物订单始终展示发票；卡密、预约、虚拟仅在买家索取发票时展示 */
-    showInvoice() {
-      const order = this.orderInfo && this.orderInfo.order;
-      if (!order) return false;
-      if (order.needReceipt == true) return true;
-      return this.showDelivery;
-    },
-    isAppointmentOrder() {
-      const t = this.orderInfo?.order?.orderType;
-      // 详情未回时用路由 query 兜底
-      return t === "APPOINTMENT" || this.$route.query.orderType === "APPOINTMENT";
-    },
-    appointmentWorkOrderStatusText() {
-      return WORK_ORDER_STATUS_LABEL[this.appointmentVerification.workOrderStatus]
-        || this.appointmentVerification.workOrderStatus
-        || "—";
-    },
-    appointmentSlotText() {
-      const v = this.appointmentVerification || {};
-      if (!v.slotDate) return "";
-      const date = String(v.slotDate).slice(0, 10);
-      const slot = v.slotStartTime && v.slotEndTime ? `${v.slotStartTime}-${v.slotEndTime}` : "";
-      return [date, slot].filter(Boolean).join(" ");
-    },
-    appointmentFormGroups() {
-      return parseFormAnswerGroups(this.appointmentVerification?.formAnswerJson);
-    },
-    hasCardKeySection() {
-      return orderHasCardKeySection({
-        orderItems: this.data,
-        isECouponOrder: this.isECouponOrder,
-      });
-    },
-    cardKeyFulfillLines() {
-      return collectCardKeyFulfillLines(this.data);
-    },
-    ecouponCardKeyRows() {
-      return flattenOrderCardKeys(this.data, true);
-    },
-    canShip() {
-      return canShowShipButton(this.allowOperation, this.orderInfo?.order);
-    },
-    showFulfillModeSelector() {
-      const status = this.orderInfo?.order?.orderStatus;
-      if (status === "PARTS_DELIVERED") return false;
-      const op = this.allowOperation || {};
-      return [op.fulfillWhole, op.fulfillSplit, op.fulfillNoDelivery].filter(Boolean).length > 1;
-    },
-    deliverableOrderItems() {
-      return (this.data || []).filter((item) => {
-        if (!this.getOrderItemId(item)) return false;
-        return this.getRemainingDeliveryNum(item) > 0;
-      });
-    },
-    canOrderTake() {
-      if (this.isAppointmentOrder) {
-        const order = this.orderInfo?.order;
-        if (!order || order.orderStatus !== "TAKE") return false;
-        return (this.appointmentVerification.verifiedCount || 0)
-          < (this.appointmentVerification.totalCount || 0);
-      }
-      if (this.allowOperation.take) return true;
-      const order = this.orderInfo?.order;
-      if (!order) return false;
-      const isVirtual =
-        this.$route.query.orderType === "VIRTUAL" ||
-        order.orderType === "VIRTUAL";
-      return isVirtual && order.orderStatus === "TAKE";
-    },
-  },
-  watch: {
-    $route (to, from) {
-      this.$router.go(0);
-    },
-  },
-  methods: {
-    formatCardKeyStatus,
-    cardKeyFulfillAlertType,
-    resolveCardKeyFulfillMessage,
-    lineCardKeyRows(line) {
-      return line.cardKeys || [];
-    },
-    copyCardKey(row) {
-      const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(() => {
-          this.$Message.success("已复制到剪贴板");
-        });
-      } else {
-        const ta = document.createElement("textarea");
-        ta.value = text;
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand("copy");
-        document.body.removeChild(ta);
-        this.$Message.success("已复制到剪贴板");
-      }
-    },
-    getPromotionText(row) {
-      let resultText = "";
-      if (row && row.promotionType) {
-        const type = row.promotionType.split(",");
-        if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
-        if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
-        if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
-        if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
-        if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
-      }
-      return resultText === "" ? "未参与" : resultText;
-    },
-    gotoHomes () {
-      return false
-    },
-    getOrderItemId(item) {
-      return item && (item.id || item.orderItemId || item.sn);
-    },
-    getLogisticsId(item) {
-      return item && (item.logisticsId || item.id);
-    },
-    getLogisticsName(item) {
-      return item && (item.logisticsName || item.name || item.logisticsCompany || item.logisticsId || item.id);
-    },
-    parseOrderItemSpecs(specs) {
-      if (!specs) return {};
-      try {
-        return JSON.parse(specs);
-      } catch (e) {
-        return {};
-      }
-    },
-    getShippedPackageNum(item) {
-      if (item != null && item.deliverNumber != null && item.deliverNumber !== "") {
-        const direct = Number(item.deliverNumber);
-        if (Number.isFinite(direct)) return direct;
-      }
-      const orderItemId = this.getOrderItemId(item);
-      if (!orderItemId || !this.orderPackages.length) return 0;
-      let total = 0;
-      this.orderPackages.forEach((pkg) => {
-        (pkg.orderPackageItemList || []).forEach((pkgItem) => {
-          if (this.isPackageItemMatch(item, pkgItem)) {
-            total += Number(pkgItem.deliverNumber ?? pkgItem.num ?? 0);
-          }
-        });
-      });
-      return total;
-    },
-    isPackageItemMatch(orderItem, pkgItem) {
-      const orderKeys = [
-        this.getOrderItemId(orderItem),
-        orderItem?.sn,
-        orderItem?.id,
-        orderItem?.orderItemId,
-      ]
-        .filter(Boolean)
-        .map(String);
-      const pkgKeys = [
-        pkgItem.orderItemSn,
-        pkgItem.orderItemId,
-        pkgItem.orderItemsId,
-        pkgItem.id,
-        pkgItem.sn,
-      ]
-        .filter(Boolean)
-        .map(String);
-      return pkgKeys.some((key) => orderKeys.includes(key));
-    },
-    getRemainingDeliveryNum(item) {
-      if (item != null && item.remainDeliverNumber != null && item.remainDeliverNumber !== "") {
-        const remain = Number(item.remainDeliverNumber);
-        if (Number.isFinite(remain)) return Math.max(remain, 0);
-      }
-      const total = Number(item && item.num) || 0;
-      return Math.max(total - this.getShippedPackageNum(item), 0);
-    },
-    isNoDeliveryPackage,
-    getFulfillmentModeLabel,
-    initFulfillNumMap() {
-      const map = {};
-      this.deliverableOrderItems.forEach((item) => {
-        const id = this.getOrderItemId(item);
-        if (id) {
-          map[id] = this.getRemainingDeliveryNum(item);
-        }
-      });
-      this.fulfillForm.deliveryNumMap = map;
-    },
-    refreshFulfillAfterSubmit() {
-      this.fulfillModal = false;
-      this.loading = true;
-      return Promise.all([
-        API_Order.getOrderDetail(this.sn).then((res) => {
-          if (res.success) {
-            this.orderInfo = res.result;
-            this.allowOperation = res.result.allowOperationVO;
-            this.data = res.result.orderItems;
-            this.typeList = res.result.order.priceDetailDTO.discountPriceDetail
-              ? JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail))
-              : [];
-            this.getContentPrice();
-            this.getOrderPrice();
-          }
-        }),
-        this.getOrderPackages(),
-      ]).finally(() => {
-        this.loading = false;
-        this.resetFulfillForm(false);
-        this.initFulfillNumMap();
-        this.$nextTick(() => {
-          this.$refs.fulfillTable?.clearSelection();
-          this.$refs.fulfillFormRef?.clearValidate();
-        });
-      });
-    },
-    handleFulfillNumChange(row, value) {
-      const id = this.getOrderItemId(row);
-      if (!id) return;
-      const num = Number(value);
-      if (!Number.isFinite(num) || num < 1) return;
-      if (!this.fulfillForm.selectedOrderItemIds.includes(id)) {
-        this.fulfillForm.selectedOrderItemIds = [...this.fulfillForm.selectedOrderItemIds, id];
-        this.$nextTick(() => {
-          this.$refs.fulfillTable?.toggleRowSelection(row, true);
-        });
-      }
-    },
-    isPartDeliveryRowSelectable(row) {
-      return this.getRemainingDeliveryNum(row) > 0;
-    },
-    handleFulfillSelectionChange(selection) {
-      const selectedIds = [];
-      selection.forEach((item) => {
-        const id = this.getOrderItemId(item);
-        if (!id) return;
-        selectedIds.push(id);
-        if (this.fulfillForm.deliveryNumMap[id] == null) {
-          this.fulfillForm.deliveryNumMap[id] = this.getRemainingDeliveryNum(item);
-        }
-      });
-      this.fulfillForm.selectedOrderItemIds = selectedIds;
-    },
-    buildFulfillItems() {
-      return this.fulfillForm.selectedOrderItemIds
-        .map((orderItemId) => ({
-          orderItemId,
-          deliveryNum: Number(this.fulfillForm.deliveryNumMap[orderItemId]),
-        }))
-        .filter((item) => item.orderItemId && item.deliveryNum > 0);
-    },
-    resetFulfillForm(clearMode = true) {
-      const mode = clearMode
-        ? resolveDefaultFulfillmentMode(
-            this.allowOperation,
-            this.orderInfo?.order?.orderStatus
-          ) || "WHOLE"
-        : this.fulfillForm.fulfillmentMode;
-      this.fulfillForm = {
-        fulfillmentMode: mode,
-        logisticsNo: "",
-        logisticsId: "",
-        deliveryRemark: "",
-        selectedOrderItemIds: [],
-        deliveryNumMap: {},
-      };
-      this.$nextTick(() => {
-        this.$refs.fulfillFormRef?.clearValidate();
-        this.$refs.fulfillTable?.clearSelection();
-      });
-    },
-    openFulfill(presetMode) {
-      this.resetFulfillForm(true);
-      if (presetMode === "SPLIT" || this.$route.query.fulfillMode === "SPLIT") {
-        this.fulfillForm.fulfillmentMode = "SPLIT";
-      } else {
-        const mode = resolveDefaultFulfillmentMode(
-          this.allowOperation,
-          this.orderInfo?.order?.orderStatus
-        );
-        if (mode) this.fulfillForm.fulfillmentMode = mode;
-      }
-      this.fulfillModal = true;
-      this.getCheckedLogistics();
-      this.getOrderPackages();
-    },
-    buildFulfillPayload() {
-      const mode = this.fulfillForm.fulfillmentMode;
-      const payload = { fulfillmentMode: mode };
-      if (mode === "WHOLE" || mode === "SPLIT") {
-        payload.logisticsId = this.fulfillForm.logisticsId;
-        payload.logisticsNo = this.fulfillForm.logisticsNo;
-      }
-      if (mode === "NO_DELIVERY") {
-        const remark = (this.fulfillForm.deliveryRemark || "").trim();
-        if (remark) payload.deliveryRemark = remark;
-      }
-      if (mode === "SPLIT") {
-        payload.items = this.buildFulfillItems();
-      }
-      return payload;
-    },
-    submitFulfill() {
-      const mode = this.fulfillForm.fulfillmentMode;
-      const payload = this.buildFulfillPayload();
-      const validateMsg = validateFulfillForm(mode, payload);
-      if (validateMsg) {
-        this.$Message.error(validateMsg);
-        return;
-      }
-      if (mode !== "NO_DELIVERY") {
-        this.$refs.fulfillFormRef.validate((valid) => {
-          if (!valid) return;
-          this.doSubmitFulfill(payload);
-        });
-      } else {
-        this.doSubmitFulfill(payload);
-      }
-    },
-    doSubmitFulfill(payload) {
-      this.fulfillSubmitting = true;
-      API_Order.orderFulfill(this.sn, payload)
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("发货成功");
-            this.refreshFulfillAfterSubmit();
-          } else if (res.code === 1003) {
-            this.$Message.warning(res.message || "访问过于频繁，请稍后再试");
-          }
-        })
-        .finally(() => {
-          this.fulfillSubmitting = false;
-        });
-    },
-    getCheckedLogistics() {
-      API_Order.getLogisticsChecked().then((res) => {
-        if (res.success) {
-          this.checkedLogistics = Array.isArray(res.result) ? res.result : [];
-        }
-      });
-    },
-    getOrderPackages() {
-      return API_Order.getPackage(this.sn).then((res) => {
-        if (res.success) {
-          this.orderPackages = Array.isArray(res.result) ? res.result : [];
-        }
-        this.initFulfillNumMap();
-      });
-    },
+// 模板 ref（与表单 data 同名的改为 xxxRef，避免互相覆盖）
+const modifyPriceFormRef = ref(null);
+const modifyRemarkFormRef = ref(null);
+const addressFormRef = ref(null);
+const faceSheetFormRef = ref(null);
+const appointmentTakeFormRef = ref(null);
+const orderTakeFormRef = ref(null);
+const fulfillFormRef = ref(null);
+const fulfillTable = ref(null);
+const map = ref(null);
 
-    // 获取订单详情
-    getDataDetail () {
-      this.loading = true;
-      API_Order.getOrderDetail(this.sn).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.orderInfo = res.result;
-          this.allowOperation = res.result.allowOperationVO;
-          this.data = res.result.orderItems || [];
-          const discountDetail = res.result.order.priceDetailDTO?.discountPriceDetail;
-          this.typeList = discountDetail
-            ? JSON.parse(JSON.stringify(discountDetail))
-            : [];
-          this.getContentPrice();
-          this.getOrderPrice();
-          if (this.isAppointmentOrder) {
-            this.loadAppointmentVerification();
-          }
-          if (
-            this.autoOpenFulfill &&
-            this.canShip &&
-            (this.$route.query.openFulfill || this.$route.query.fulfillMode)
-          ) {
-            this.autoOpenFulfill = false;
-            this.$nextTick(() => this.openFulfill(this.$route.query.fulfillMode));
-          }
-        }
-      });
-    },
-    modifyPrice () {
-      this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice;
-      this.modal = true;
-    },
-    modifyPriceSubmit () {
-      this.$refs.modifyPriceForm.validate((valid) => {
-        if (valid) {
-          API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("修改订单金额成功");
-              this.modal = false;
-              this.getDataDetail();
-            }
-          });
-        }
-      });
-    },
-    modifyRemark () {
-      this.modifyRemarkForm.sellerRemark = this.orderInfo.order.sellerRemark || "";
-      this.sellerRemarkModal = true;
-    },
-    modifyRemarkSubmit () {
-      this.$refs.modifyRemarkForm.validate((valid) => {
-        if (valid) {
-          API_Order.modifyOrderRemark(this.sn, this.modifyRemarkForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("编辑订单备注成功");
-              this.sellerRemarkModal = false;
-              this.getDataDetail();
-            }
-          });
-        }
-      });
-    },
-    checkLogistics () {
-      this.logisticsModal = true;
-      if (this.orderPackages.length > 0) {
-        this.logisticsList();
-      } else {
-        this.logistics();
-      }
-    },
-    logisticsList () {
-      API_Order.getPackage(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.packageTraceList = res.result;
-        }
-      });
-    },
-    logistics () {
-      API_Order.getTraces(this.sn).then((res) => {
-        if (res.success && res.result != null) {
-          this.logisticsInfo = res.result;
-        }
-      });
-    },
-    toPrint () {
-      API_Logistics.getCheckedOn().then((res) => {
-        if (res.success) {
-          this.checkedLogistics = res.result;
-          this.faceSheetModal = true;
-        }
-      });
-    },
-    sfPrint () {
-      API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then((res) => {
-        if (res.success) {
-          const headers = {
-            "X-Auth-token": res.result.token,
-          };
-          API_Logistics.getShunFengFaceSheet(res.result.url, headers).then((sheetRes) => {
-            const blob = new Blob([sheetRes], {
-              type: "application/pdf;charset=utf-8",
-            });
-            if ("download" in document.createElement("a")) {
-              const link = document.createElement("a");
-              link.download = `${this.orderInfo.order.sn}.pdf`;
-              link.style.display = "none";
-              link.href = URL.createObjectURL(blob);
-              document.body.appendChild(link);
-              link.click();
-              URL.revokeObjectURL(link.href);
-              document.body.removeChild(link);
-            } else {
-              navigator.msSaveBlob(blob, `${this.orderInfo.order.sn}.pdf`);
-            }
-          });
-        }
-      });
-    },
-    toPrints (printWindow) {
-      this.faceSheetModal = false;
-      if (!this.someJSONdata) {
-        printWindow && printWindow.close();
-        return;
-      }
-      const win = printWindow || window.open("", "_blank");
-      if (!win) {
-        this.$Message.error("无法打开打印窗口，请允许浏览器弹窗");
-        return;
-      }
-      win.document.write(this.someJSONdata);
-      win.document.close();
-      win.focus();
-      this.$Message.success("电子面单发货成功");
-      this.getDataDetail();
-      this.getOrderPackages();
-    },
-    submitFaceSheet () {
-      this.$refs.faceSheetForm.validate((valid) => {
-        if (valid) {
-          const printWindow = window.open("", "_blank");
-          API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then((res) => {
-            if (res.success && res.result.printTemplate) {
-              this.someJSONdata = res.result.printTemplate;
-              this.toPrints(printWindow);
-            } else {
-              printWindow && printWindow.close();
-              this.$Message.error("电子面单发货失败！");
-            }
-          }).catch(() => {
-            printWindow && printWindow.close();
-            this.$Message.error("电子面单发货失败！");
-          });
-        }
-      });
-    },
-    getLogisticsSetting () {
-      API_Logistics.getLogisticsSetting().then((res) => {
-        if (res.success) {
-          this.logisticsType = res.result;
-        }
-      });
-    },
-    getOrderPrice () {
-      if (this.showPrices) {
-        this.showPrices = false
-      } else if (!this.showPrices) {
-        this.showPrices = true
-      }
-    },
-    getContentPrice () {
-      for (let i = 0; i < this.typeList.length; i++) {
-        for (let j = i + 1; j < this.typeList.length; j++) {
-          if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
-            this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
-            this.typeList.splice(j, 1)
-          }
-        }
-      }
-      if (this.typeList.length >= 3) {
-        this.getContentPrice();
-      }
-    },
-    selectedRegion (val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-        const ids = val.data.map((item) => item.id).join(",");
-        this.addr = paths;
-        this.regionId = ids;
-        this.addressForm.consigneeAddressPath = paths;
-        this.addressForm.consigneeAddressIdPath = ids;
-      } else {
-        this.addr = val.data.addr;
-        this.regionId = val.data.addrId;
-        this.addressForm.consigneeAddressPath = val.data.addr;
-        this.addressForm.consigneeAddressIdPath = val.data.addrId;
-      }
-    },
-    //订单日志
-    orderLog () {
-      this.orderLogModal = true;
-    },
-    //订单日志取消
-    handelCancel () {
-      this.orderLogModal = false;
-    },
-    loadAppointmentVerification() {
-      getAppointmentVerificationByOrderSn(this.sn)
-        .then((res) => {
-          if (res.success && res.result) {
-            this.appointmentVerification = res.result;
-          }
-        })
-        .catch(() => {});
-    },
-    loadEnabledStaff() {
-      getEnabledServiceStaff()
-        .then((res) => {
-          if (res.success) {
-            this.enabledStaffList = res.result || [];
-          }
-        })
-        .catch(() => {});
-    },
-    orderTake() {
-      if (this.isAppointmentOrder) {
-        this.appointmentTakeForm = { staffId: "", code: "" };
-        this.loadEnabledStaff();
-        this.loadAppointmentVerification();
-        this.orderTakeModal = true;
-        this.$nextTick(() => {
-          this.$refs.appointmentTakeForm?.clearValidate();
-        });
-        return;
-      }
-      this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode || "";
-      this.orderTakeModal = true;
-      this.$nextTick(() => {
-        this.$refs.orderTakeForm?.clearValidate();
-      });
-    },
-    appointmentVerifySubmit() {
-      this.$refs.appointmentTakeForm.validate((valid) => {
-        if (!valid) return;
-        this.appointmentVerifyLoading = true;
-        verifyAppointmentCode({
-          code: this.appointmentTakeForm.code,
-          staffId: this.appointmentTakeForm.staffId,
-        })
-          .then((res) => {
-            if (!res.success) return;
-            const result = res.result || {};
-            this.appointmentTakeForm.code = "";
-            this.loadAppointmentVerification();
-            if (result.allVerified) {
-              if (result.orderCompleted) {
-                this.$Message.success("全部核销完成，订单已完成");
-                this.orderTakeModal = false;
-                this.getDataDetail();
-              } else {
-                this.$Message.success("全部核销完成，请在工单中结束服务");
-                this.orderTakeModal = false;
-                this.getDataDetail();
-              }
-            } else {
-              this.$Message.success(`核销成功（${result.verifiedCount}/${result.totalCount}）`);
-            }
-          })
-          .finally(() => {
-            this.appointmentVerifyLoading = false;
-          });
-      });
-    },
-    orderTakeSubmit() {
-      this.$refs.orderTakeForm.validate((valid) => {
-        if (!valid) return;
-        API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then((res) => {
-          if (res.success) {
-            this.$Message.success("订单核销成功");
-            this.orderTakeModal = false;
-            this.getDataDetail();
-          }
-        });
-      });
-    },
-    //打印发货单
-    printOrder () {
-      this.printModal = true;
-    },
-    printHiddenInfo () {
-      this.printHiddenFlag = !this.printHiddenFlag;
-    },
-    printCancel () {
-      // this.printHiddenFlag = false;
-    },
-    handlePrintInvoice() {
-      printElement("printInfo", "发货单");
-    },
-    //弹出修改收货地址框
-    editAddress () {
-      this.addressModal = true;
-      this.addr = this.orderInfo.order.consigneeAddressPath;
-      this.regionId = this.orderInfo.order.consigneeAddressIdPath;
-      this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
-      this.addressForm.consigneeMobile = this.orderInfo.order.consigneeMobile;
-      this.addressForm.consigneeDetail = this.orderInfo.order.consigneeDetail;
-      this.addressForm.consigneeAddressPath = this.orderInfo.order.consigneeAddressPath;
-      this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
-    },
-    //修改收货地址
-    editAddressSubmit () {
-      if (this.regionId == "") {
-        this.$Message.error("请选择地址");
-        return;
-      }
-      this.addressForm.consigneeAddressPath = this.addr;
-      this.addressForm.consigneeAddressIdPath = this.regionId;
-      this.$refs.addressForm.validate((valid) => {
-        if (valid) {
-          API_Order.editOrderConsignee(this.sn, this.addressForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("收货地址修改成功");
-              this.addressModal = false;
-              this.getDataDetail();
-            }
-          });
-        }
-      });
-    },
-  },
-  mounted () {
-    this.sn = this.$route.query.sn;
-    this.getDataDetail();
-    this.getLogisticsSetting();
-    this.getOrderPackages();
-  },
-  beforeRouteLeave (to, from, next) {
-    if (to.name === "orderList" || to.name === "virtualOrderList") {
-      to.meta.keepAlive = true;
-    }
-    next();
-  },
+const typeList = ref([]);
+const showPrices = ref(false);
+const printHiddenFlag = ref(false);
+const loading = ref(false);
+const logisticsType = ref("KUAIDINIAO");
+const someJSONdata = ref("");
+const faceSheetForm = reactive({
+  logisticsId: "",
+});
+const faceSheetFormValidate = {
+  logisticsId: [{ required: true, message: "请选择物流公司" }],
 };
+const logisticsModal = ref(false);
+const faceSheetModal = ref(false);
+const logisticsInfo = ref({
+  shipper: "",
+});
+const packageTraceList = ref([]);
+const sellerRemarkModal = ref(false);
+const addr = ref("");
+const regionId = ref("");
+
+const orderLogModal = ref(false);
+const checkedLogistics = ref([]); //选中的物流公司集合
+const allowOperation = ref({}); //订单可才做选项
+const sn = ref(""); //订单编号
+const orderInfo = ref({
+  order: {
+    priceDetailDTO: {},
+  },
+});
+const modal = ref(false);
+//调整价格表单
+const modifyPriceForm = reactive({
+  orderPrice: 0,
+});
+const modifyRemarkForm = reactive({
+  sellerRemark: "",
+});
+const fulfillModal = ref(false);
+const fulfillSubmitting = ref(false);
+const autoOpenFulfill = ref(true);
+const fulfillForm = ref({
+  fulfillmentMode: "WHOLE",
+  logisticsNo: "",
+  logisticsId: "",
+  deliveryRemark: "",
+  selectedOrderItemIds: [],
+  deliveryNumMap: {},
+});
+const orderPackages = ref([]);
+//验证要调整的订单金额
+const modifyPriceValidate = {
+  orderPrice: [
+    { required: true, message: "请输入大于等于0或小于99999的合法金额" },
+    {
+      pattern: /^\d+(\.(([1-9])|(0[1-9])|([\d^0]\d)))?$/,
+      message: "请输入大于0小于9999的合法金额",
+      trigger: "change",
+    },
+  ],
+};
+
+const addressModal = ref(false);
+const printModal = ref(false);
+const orderTakeModal = ref(false);
+const orderTakeForm = reactive({
+  qrCode: "",
+});
+const appointmentVerification = ref({
+  codes: [],
+  totalCount: 0,
+  verifiedCount: 0,
+  workOrderStatus: "",
+  workOrderVisible: false,
+});
+const enabledStaffList = ref([]);
+const appointmentTakeForm = ref({
+  staffId: "",
+  code: "",
+});
+const appointmentVerifyLoading = ref(false);
+const appointmentTakeValidate = {
+  staffId: [{ required: true, message: "请选择服务人员", trigger: "change" }],
+  code: [{ required: true, message: "核销码不能为空", trigger: "blur" }],
+};
+const orderTakeValidate = {
+  qrCode: [{ required: true, message: "订单核销码不能为空", trigger: "blur" }],
+};
+//收件地址表单
+const addressForm = reactive({
+  consigneeName: "",
+  consigneeMobile: "",
+  consigneeDetail: "",
+  consigneeAddressPath: "",
+  consigneeAddressIdPath: "",
+});
+const fulfillRules = {
+  logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
+  logisticsId: [{ required: true, message: "请选择物流公司", trigger: "change" }],
+};
+const addressRule = {
+  consigneeName: [
+    { required: true, message: "收货人姓名不能为空", trigger: "blur" },
+  ],
+  consigneeMobile: [
+    { required: true, message: "联系方式不能为空", trigger: "blur" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
+    },
+  ],
+  consigneeDetail: [
+    { required: true, message: "详细地址不能为空", trigger: "blur" },
+  ],
+};
+
+const data = ref([]); // 表单数据
+
+/** 电子卡券订单：隐藏物流/发货/售后，展示 orderItems[].cardKeys（FR-S-04 / FR-S-05） */
+const isECouponOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  return t === "E_COUPON" || route.query.orderType === "E_COUPON";
+});
+const isVirtualOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  return t === "VIRTUAL" || route.query.orderType === "VIRTUAL";
+});
+const isAppointmentOrder = computed(() => {
+  const t = orderInfo.value?.order?.orderType;
+  // 详情未回时用路由 query 兜底
+  return t === "APPOINTMENT" || route.query.orderType === "APPOINTMENT";
+});
+const isNonPhysicalOrder = computed(() => {
+  return isVirtualOrder.value || isECouponOrder.value || isAppointmentOrder.value;
+});
+/** 实物订单才展示收货、配送、运费和发货记录 */
+const showDelivery = computed(() => {
+  return !isNonPhysicalOrder.value;
+});
+/** 实物订单始终展示发票；卡密、预约、虚拟仅在买家索取发票时展示 */
+const showInvoice = computed(() => {
+  const order = orderInfo.value && orderInfo.value.order;
+  if (!order) return false;
+  if (order.needReceipt == true) return true;
+  return showDelivery.value;
+});
+const appointmentWorkOrderStatusText = computed(() => {
+  return WORK_ORDER_STATUS_LABEL[appointmentVerification.value.workOrderStatus]
+    || appointmentVerification.value.workOrderStatus
+    || "—";
+});
+const appointmentSlotText = computed(() => {
+  const v = appointmentVerification.value || {};
+  if (!v.slotDate) return "";
+  const date = String(v.slotDate).slice(0, 10);
+  const slot = v.slotStartTime && v.slotEndTime ? `${v.slotStartTime}-${v.slotEndTime}` : "";
+  return [date, slot].filter(Boolean).join(" ");
+});
+const appointmentFormGroups = computed(() => {
+  return parseFormAnswerGroups(appointmentVerification.value?.formAnswerJson);
+});
+const hasCardKeySection = computed(() => {
+  return orderHasCardKeySection({
+    orderItems: data.value,
+    isECouponOrder: isECouponOrder.value,
+  });
+});
+const cardKeyFulfillLines = computed(() => {
+  return collectCardKeyFulfillLines(data.value);
+});
+const ecouponCardKeyRows = computed(() => {
+  return flattenOrderCardKeys(data.value, true);
+});
+const canShip = computed(() => {
+  return canShowShipButton(allowOperation.value, orderInfo.value?.order);
+});
+const showFulfillModeSelector = computed(() => {
+  const status = orderInfo.value?.order?.orderStatus;
+  if (status === "PARTS_DELIVERED") return false;
+  const op = allowOperation.value || {};
+  return [op.fulfillWhole, op.fulfillSplit, op.fulfillNoDelivery].filter(Boolean).length > 1;
+});
+const deliverableOrderItems = computed(() => {
+  return (data.value || []).filter((item) => {
+    if (!getOrderItemId(item)) return false;
+    return getRemainingDeliveryNum(item) > 0;
+  });
+});
+const canOrderTake = computed(() => {
+  if (isAppointmentOrder.value) {
+    const order = orderInfo.value?.order;
+    if (!order || order.orderStatus !== "TAKE") return false;
+    return (appointmentVerification.value.verifiedCount || 0)
+      < (appointmentVerification.value.totalCount || 0);
+  }
+  if (allowOperation.value.take) return true;
+  const order = orderInfo.value?.order;
+  if (!order) return false;
+  const isVirtual =
+    route.query.orderType === "VIRTUAL" ||
+    order.orderType === "VIRTUAL";
+  return isVirtual && order.orderStatus === "TAKE";
+});
+
+watch(
+  () => route.query,
+  (to, from) => {
+    router.go(0);
+  }
+);
+
+onMounted(() => {
+  sn.value = route.query.sn;
+  getDataDetail();
+  getLogisticsSetting();
+  getOrderPackages();
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  if (to.name === "orderList" || to.name === "virtualOrderList") {
+    to.meta.keepAlive = true;
+  }
+  next();
+});
+
+function lineCardKeyRows(line) {
+  return line.cardKeys || [];
+}
+function copyCardKey(row) {
+  const text = `卡号：${row.cardNo || ""}\n卡密：${row.cardSecret || ""}`;
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(() => {
+      Message.success("已复制到剪贴板");
+    });
+  } else {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    document.body.removeChild(ta);
+    Message.success("已复制到剪贴板");
+  }
+}
+function getPromotionText(row) {
+  let resultText = "";
+  if (row && row.promotionType) {
+    const type = row.promotionType.split(",");
+    if (type.indexOf("PINTUAN") != -1) resultText += "拼团 ";
+    if (type.indexOf("SECKILL") != -1) resultText += "秒杀 ";
+    if (type.indexOf("COUPON") != -1) resultText += "优惠券 ";
+    if (type.indexOf("FULL_DISCOUNT") != -1) resultText += "满减 ";
+    if (type.indexOf("POINTS_GOODS") != -1) resultText += "积分商品 ";
+  }
+  return resultText === "" ? "未参与" : resultText;
+}
+function gotoHomes () {
+  return false
+}
+function getOrderItemId(item) {
+  return item && (item.id || item.orderItemId || item.sn);
+}
+function getLogisticsId(item) {
+  return item && (item.logisticsId || item.id);
+}
+function getLogisticsName(item) {
+  return item && (item.logisticsName || item.name || item.logisticsCompany || item.logisticsId || item.id);
+}
+function parseOrderItemSpecs(specs) {
+  if (!specs) return {};
+  try {
+    return JSON.parse(specs);
+  } catch (e) {
+    return {};
+  }
+}
+function getShippedPackageNum(item) {
+  if (item != null && item.deliverNumber != null && item.deliverNumber !== "") {
+    const direct = Number(item.deliverNumber);
+    if (Number.isFinite(direct)) return direct;
+  }
+  const orderItemId = getOrderItemId(item);
+  if (!orderItemId || !orderPackages.value.length) return 0;
+  let total = 0;
+  orderPackages.value.forEach((pkg) => {
+    (pkg.orderPackageItemList || []).forEach((pkgItem) => {
+      if (isPackageItemMatch(item, pkgItem)) {
+        total += Number(pkgItem.deliverNumber ?? pkgItem.num ?? 0);
+      }
+    });
+  });
+  return total;
+}
+function isPackageItemMatch(orderItem, pkgItem) {
+  const orderKeys = [
+    getOrderItemId(orderItem),
+    orderItem?.sn,
+    orderItem?.id,
+    orderItem?.orderItemId,
+  ]
+    .filter(Boolean)
+    .map(String);
+  const pkgKeys = [
+    pkgItem.orderItemSn,
+    pkgItem.orderItemId,
+    pkgItem.orderItemsId,
+    pkgItem.id,
+    pkgItem.sn,
+  ]
+    .filter(Boolean)
+    .map(String);
+  return pkgKeys.some((key) => orderKeys.includes(key));
+}
+function getRemainingDeliveryNum(item) {
+  if (item != null && item.remainDeliverNumber != null && item.remainDeliverNumber !== "") {
+    const remain = Number(item.remainDeliverNumber);
+    if (Number.isFinite(remain)) return Math.max(remain, 0);
+  }
+  const total = Number(item && item.num) || 0;
+  return Math.max(total - getShippedPackageNum(item), 0);
+}
+function initFulfillNumMap() {
+  const deliveryMap = {};
+  deliverableOrderItems.value.forEach((item) => {
+    const id = getOrderItemId(item);
+    if (id) {
+      deliveryMap[id] = getRemainingDeliveryNum(item);
+    }
+  });
+  fulfillForm.value.deliveryNumMap = deliveryMap;
+}
+function refreshFulfillAfterSubmit() {
+  fulfillModal.value = false;
+  loading.value = true;
+  return Promise.all([
+    API_Order.getOrderDetail(sn.value).then((res) => {
+      if (res.success) {
+        orderInfo.value = res.result;
+        allowOperation.value = res.result.allowOperationVO;
+        data.value = res.result.orderItems;
+        typeList.value = res.result.order.priceDetailDTO.discountPriceDetail
+          ? JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail))
+          : [];
+        getContentPrice();
+        getOrderPrice();
+      }
+    }),
+    getOrderPackages(),
+  ]).finally(() => {
+    loading.value = false;
+    resetFulfillForm(false);
+    initFulfillNumMap();
+    nextTick(() => {
+      fulfillTable.value?.clearSelection();
+      fulfillFormRef.value?.clearValidate();
+    });
+  });
+}
+function handleFulfillNumChange(row, value) {
+  const id = getOrderItemId(row);
+  if (!id) return;
+  const num = Number(value);
+  if (!Number.isFinite(num) || num < 1) return;
+  if (!fulfillForm.value.selectedOrderItemIds.includes(id)) {
+    fulfillForm.value.selectedOrderItemIds = [...fulfillForm.value.selectedOrderItemIds, id];
+    nextTick(() => {
+      fulfillTable.value?.toggleRowSelection(row, true);
+    });
+  }
+}
+function isPartDeliveryRowSelectable(row) {
+  return getRemainingDeliveryNum(row) > 0;
+}
+function handleFulfillSelectionChange(selection) {
+  const selectedIds = [];
+  selection.forEach((item) => {
+    const id = getOrderItemId(item);
+    if (!id) return;
+    selectedIds.push(id);
+    if (fulfillForm.value.deliveryNumMap[id] == null) {
+      fulfillForm.value.deliveryNumMap[id] = getRemainingDeliveryNum(item);
+    }
+  });
+  fulfillForm.value.selectedOrderItemIds = selectedIds;
+}
+function buildFulfillItems() {
+  return fulfillForm.value.selectedOrderItemIds
+    .map((orderItemId) => ({
+      orderItemId,
+      deliveryNum: Number(fulfillForm.value.deliveryNumMap[orderItemId]),
+    }))
+    .filter((item) => item.orderItemId && item.deliveryNum > 0);
+}
+function resetFulfillForm(clearMode = true) {
+  const mode = clearMode
+    ? resolveDefaultFulfillmentMode(
+        allowOperation.value,
+        orderInfo.value?.order?.orderStatus
+      ) || "WHOLE"
+    : fulfillForm.value.fulfillmentMode;
+  fulfillForm.value = {
+    fulfillmentMode: mode,
+    logisticsNo: "",
+    logisticsId: "",
+    deliveryRemark: "",
+    selectedOrderItemIds: [],
+    deliveryNumMap: {},
+  };
+  nextTick(() => {
+    fulfillFormRef.value?.clearValidate();
+    fulfillTable.value?.clearSelection();
+  });
+}
+function openFulfill(presetMode) {
+  resetFulfillForm(true);
+  if (presetMode === "SPLIT" || route.query.fulfillMode === "SPLIT") {
+    fulfillForm.value.fulfillmentMode = "SPLIT";
+  } else {
+    const mode = resolveDefaultFulfillmentMode(
+      allowOperation.value,
+      orderInfo.value?.order?.orderStatus
+    );
+    if (mode) fulfillForm.value.fulfillmentMode = mode;
+  }
+  fulfillModal.value = true;
+  getCheckedLogistics();
+  getOrderPackages();
+}
+function buildFulfillPayload() {
+  const mode = fulfillForm.value.fulfillmentMode;
+  const payload = { fulfillmentMode: mode };
+  if (mode === "WHOLE" || mode === "SPLIT") {
+    payload.logisticsId = fulfillForm.value.logisticsId;
+    payload.logisticsNo = fulfillForm.value.logisticsNo;
+  }
+  if (mode === "NO_DELIVERY") {
+    const remark = (fulfillForm.value.deliveryRemark || "").trim();
+    if (remark) payload.deliveryRemark = remark;
+  }
+  if (mode === "SPLIT") {
+    payload.items = buildFulfillItems();
+  }
+  return payload;
+}
+function submitFulfill() {
+  const mode = fulfillForm.value.fulfillmentMode;
+  const payload = buildFulfillPayload();
+  const validateMsg = validateFulfillForm(mode, payload);
+  if (validateMsg) {
+    Message.error(validateMsg);
+    return;
+  }
+  if (mode !== "NO_DELIVERY") {
+    fulfillFormRef.value.validate((valid) => {
+      if (!valid) return;
+      doSubmitFulfill(payload);
+    });
+  } else {
+    doSubmitFulfill(payload);
+  }
+}
+function doSubmitFulfill(payload) {
+  fulfillSubmitting.value = true;
+  API_Order.orderFulfill(sn.value, payload)
+    .then((res) => {
+      if (res.success) {
+        Message.success("发货成功");
+        refreshFulfillAfterSubmit();
+      } else if (res.code === 1003) {
+        Message.warning(res.message || "访问过于频繁，请稍后再试");
+      }
+    })
+    .finally(() => {
+      fulfillSubmitting.value = false;
+    });
+}
+function getCheckedLogistics() {
+  API_Order.getLogisticsChecked().then((res) => {
+    if (res.success) {
+      checkedLogistics.value = Array.isArray(res.result) ? res.result : [];
+    }
+  });
+}
+function getOrderPackages() {
+  return API_Order.getPackage(sn.value).then((res) => {
+    if (res.success) {
+      orderPackages.value = Array.isArray(res.result) ? res.result : [];
+    }
+    initFulfillNumMap();
+  });
+}
+
+// 获取订单详情
+function getDataDetail () {
+  loading.value = true;
+  API_Order.getOrderDetail(sn.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      orderInfo.value = res.result;
+      allowOperation.value = res.result.allowOperationVO;
+      data.value = res.result.orderItems || [];
+      const discountDetail = res.result.order.priceDetailDTO?.discountPriceDetail;
+      typeList.value = discountDetail
+        ? JSON.parse(JSON.stringify(discountDetail))
+        : [];
+      getContentPrice();
+      getOrderPrice();
+      if (isAppointmentOrder.value) {
+        loadAppointmentVerification();
+      }
+      if (
+        autoOpenFulfill.value &&
+        canShip.value &&
+        (route.query.openFulfill || route.query.fulfillMode)
+      ) {
+        autoOpenFulfill.value = false;
+        nextTick(() => openFulfill(route.query.fulfillMode));
+      }
+    }
+  });
+}
+function modifyPrice () {
+  modifyPriceForm.orderPrice = orderInfo.value.order.flowPrice;
+  modal.value = true;
+}
+function modifyPriceSubmit () {
+  modifyPriceFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.modifyOrderPrice(sn.value, modifyPriceForm).then((res) => {
+        if (res.success) {
+          Message.success("修改订单金额成功");
+          modal.value = false;
+          getDataDetail();
+        }
+      });
+    }
+  });
+}
+function modifyRemark () {
+  modifyRemarkForm.sellerRemark = orderInfo.value.order.sellerRemark || "";
+  sellerRemarkModal.value = true;
+}
+function modifyRemarkSubmit () {
+  modifyRemarkFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.modifyOrderRemark(sn.value, modifyRemarkForm).then((res) => {
+        if (res.success) {
+          Message.success("编辑订单备注成功");
+          sellerRemarkModal.value = false;
+          getDataDetail();
+        }
+      });
+    }
+  });
+}
+function checkLogistics () {
+  logisticsModal.value = true;
+  if (orderPackages.value.length > 0) {
+    logisticsList();
+  } else {
+    logistics();
+  }
+}
+function logisticsList () {
+  API_Order.getPackage(sn.value).then((res) => {
+    if (res.success && res.result != null) {
+      packageTraceList.value = res.result;
+    }
+  });
+}
+function logistics () {
+  API_Order.getTraces(sn.value).then((res) => {
+    if (res.success && res.result != null) {
+      logisticsInfo.value = res.result;
+    }
+  });
+}
+function toPrint () {
+  API_Logistics.getCheckedOn().then((res) => {
+    if (res.success) {
+      checkedLogistics.value = res.result;
+      faceSheetModal.value = true;
+    }
+  });
+}
+function sfPrint () {
+  API_Order.getOrderFaceSheet(sn.value, faceSheetForm).then((res) => {
+    if (res.success) {
+      const headers = {
+        "X-Auth-token": res.result.token,
+      };
+      API_Logistics.getShunFengFaceSheet(res.result.url, headers).then((sheetRes) => {
+        const blob = new Blob([sheetRes], {
+          type: "application/pdf;charset=utf-8",
+        });
+        if ("download" in document.createElement("a")) {
+          const link = document.createElement("a");
+          link.download = `${orderInfo.value.order.sn}.pdf`;
+          link.style.display = "none";
+          link.href = URL.createObjectURL(blob);
+          document.body.appendChild(link);
+          link.click();
+          URL.revokeObjectURL(link.href);
+          document.body.removeChild(link);
+        } else {
+          navigator.msSaveBlob(blob, `${orderInfo.value.order.sn}.pdf`);
+        }
+      });
+    }
+  });
+}
+function toPrints (printWindow) {
+  faceSheetModal.value = false;
+  if (!someJSONdata.value) {
+    printWindow && printWindow.close();
+    return;
+  }
+  const win = printWindow || window.open("", "_blank");
+  if (!win) {
+    Message.error("无法打开打印窗口，请允许浏览器弹窗");
+    return;
+  }
+  win.document.write(someJSONdata.value);
+  win.document.close();
+  win.focus();
+  Message.success("电子面单发货成功");
+  getDataDetail();
+  getOrderPackages();
+}
+function submitFaceSheet () {
+  faceSheetFormRef.value.validate((valid) => {
+    if (valid) {
+      const printWindow = window.open("", "_blank");
+      API_Order.getOrderFaceSheet(sn.value, faceSheetForm).then((res) => {
+        if (res.success && res.result.printTemplate) {
+          someJSONdata.value = res.result.printTemplate;
+          toPrints(printWindow);
+        } else {
+          printWindow && printWindow.close();
+          Message.error("电子面单发货失败！");
+        }
+      }).catch(() => {
+        printWindow && printWindow.close();
+        Message.error("电子面单发货失败！");
+      });
+    }
+  });
+}
+function getLogisticsSetting () {
+  API_Logistics.getLogisticsSetting().then((res) => {
+    if (res.success) {
+      logisticsType.value = res.result;
+    }
+  });
+}
+function getOrderPrice () {
+  if (showPrices.value) {
+    showPrices.value = false
+  } else if (!showPrices.value) {
+    showPrices.value = true
+  }
+}
+function getContentPrice () {
+  for (let i = 0; i < typeList.value.length; i++) {
+    for (let j = i + 1; j < typeList.value.length; j++) {
+      if (typeList.value[i].promotionId === typeList.value[j].promotionId) {
+        typeList.value[i].discountPrice = typeList.value[i].discountPrice + typeList.value[j].discountPrice
+        typeList.value.splice(j, 1)
+      }
+    }
+  }
+  if (typeList.value.length >= 3) {
+    getContentPrice();
+  }
+}
+function selectedRegion (val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+    const ids = val.data.map((item) => item.id).join(",");
+    addr.value = paths;
+    regionId.value = ids;
+    addressForm.consigneeAddressPath = paths;
+    addressForm.consigneeAddressIdPath = ids;
+  } else {
+    addr.value = val.data.addr;
+    regionId.value = val.data.addrId;
+    addressForm.consigneeAddressPath = val.data.addr;
+    addressForm.consigneeAddressIdPath = val.data.addrId;
+  }
+}
+//订单日志
+function orderLog () {
+  orderLogModal.value = true;
+}
+//订单日志取消
+function handelCancel () {
+  orderLogModal.value = false;
+}
+function loadAppointmentVerification() {
+  getAppointmentVerificationByOrderSn(sn.value)
+    .then((res) => {
+      if (res.success && res.result) {
+        appointmentVerification.value = res.result;
+      }
+    })
+    .catch(() => {});
+}
+function loadEnabledStaff() {
+  getEnabledServiceStaff()
+    .then((res) => {
+      if (res.success) {
+        enabledStaffList.value = res.result || [];
+      }
+    })
+    .catch(() => {});
+}
+function orderTake() {
+  if (isAppointmentOrder.value) {
+    appointmentTakeForm.value = { staffId: "", code: "" };
+    loadEnabledStaff();
+    loadAppointmentVerification();
+    orderTakeModal.value = true;
+    nextTick(() => {
+      appointmentTakeFormRef.value?.clearValidate();
+    });
+    return;
+  }
+  orderTakeForm.qrCode = orderInfo.value.order.verificationCode || "";
+  orderTakeModal.value = true;
+  nextTick(() => {
+    orderTakeFormRef.value?.clearValidate();
+  });
+}
+function appointmentVerifySubmit() {
+  appointmentTakeFormRef.value.validate((valid) => {
+    if (!valid) return;
+    appointmentVerifyLoading.value = true;
+    verifyAppointmentCode({
+      code: appointmentTakeForm.value.code,
+      staffId: appointmentTakeForm.value.staffId,
+    })
+      .then((res) => {
+        if (!res.success) return;
+        const result = res.result || {};
+        appointmentTakeForm.value.code = "";
+        loadAppointmentVerification();
+        if (result.allVerified) {
+          if (result.orderCompleted) {
+            Message.success("全部核销完成，订单已完成");
+            orderTakeModal.value = false;
+            getDataDetail();
+          } else {
+            Message.success("全部核销完成，请在工单中结束服务");
+            orderTakeModal.value = false;
+            getDataDetail();
+          }
+        } else {
+          Message.success(`核销成功（${result.verifiedCount}/${result.totalCount}）`);
+        }
+      })
+      .finally(() => {
+        appointmentVerifyLoading.value = false;
+      });
+  });
+}
+function orderTakeSubmit() {
+  orderTakeFormRef.value.validate((valid) => {
+    if (!valid) return;
+    API_Order.orderTake(sn.value, orderTakeForm.qrCode).then((res) => {
+      if (res.success) {
+        Message.success("订单核销成功");
+        orderTakeModal.value = false;
+        getDataDetail();
+      }
+    });
+  });
+}
+//打印发货单
+function printOrder () {
+  printModal.value = true;
+}
+function printHiddenInfo () {
+  printHiddenFlag.value = !printHiddenFlag.value;
+}
+function printCancel () {
+  // printHiddenFlag.value = false;
+}
+function handlePrintInvoice() {
+  printElement("printInfo", "发货单");
+}
+//弹出修改收货地址框
+function editAddress () {
+  addressModal.value = true;
+  addr.value = orderInfo.value.order.consigneeAddressPath;
+  regionId.value = orderInfo.value.order.consigneeAddressIdPath;
+  addressForm.consigneeName = orderInfo.value.order.consigneeName;
+  addressForm.consigneeMobile = orderInfo.value.order.consigneeMobile;
+  addressForm.consigneeDetail = orderInfo.value.order.consigneeDetail;
+  addressForm.consigneeAddressPath = orderInfo.value.order.consigneeAddressPath;
+  addressForm.consigneeAddressIdPath = orderInfo.value.order.consigneeAddressIdPath;
+}
+//修改收货地址
+function editAddressSubmit () {
+  if (regionId.value == "") {
+    Message.error("请选择地址");
+    return;
+  }
+  addressForm.consigneeAddressPath = addr.value;
+  addressForm.consigneeAddressIdPath = regionId.value;
+  addressFormRef.value.validate((valid) => {
+    if (valid) {
+      API_Order.editOrderConsignee(sn.value, addressForm).then((res) => {
+        if (res.success) {
+          Message.success("收货地址修改成功");
+          addressModal.value = false;
+          getDataDetail();
+        }
+      });
+    }
+  });
+}
 </script>
 <style lang="scss">
 .lineH30 {
diff --git a/seller/src/views/order/order/orderList.vue b/seller/src/views/order/order/orderList.vue
index 36fe89b23..c9a1bd711 100644
--- a/seller/src/views/order/order/orderList.vue
+++ b/seller/src/views/order/order/orderList.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         label-width="70px"
         class="search-form order-search-form"
@@ -156,322 +156,325 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { CopyDocument } from "@element-plus/icons-vue";
 import * as API_Order from "@/api/order";
 import { canShowShipButton, isNonShippableOrder } from "@/utils/orderFulfill";
-export default {
-  name: "orderList",
-  components: { CopyDocument },
-  data() {
-    return {
-      fields: {
-        订单编号: "sn",
-        下单时间: "createTime",
-        客户名称: "memberName",
-        支付方式: {
-          field: "clientType",
-          callback: (value) => {
-            if (value == "H5") return "移动端";
-            if (value == "PC") return "PC端";
-            if (value == "WECHAT_MP") return "小程序端";
-            if (value == "APP") return "移动应用端";
-            return value;
-          },
-        },
-        商品数量: "groupNum",
-        付款状态: {
-          field: "payStatus",
-          callback: (value) =>
-            value == "UNPAID" ? "未付款" : value == "PAID" ? "已付款" : "",
-        },
-        店铺: "storeName",
-      },
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-        orderType: "",
-        orderSn: "",
-        keywords: "",
-        goodsType: "",
-        orderStatus: "",
-        paymentMethod: "",
-        orderPromotionType: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      orderNumData: {},
-      currentStatus: "ALL",
-    };
-  },
-  computed: {
-    orderStatusWithCount() {
-      return [
-        { title: "全部", value: "ALL" },
-        {
-          title: `未付款${this.orderNumData.waitPayNum ? "(" + this.orderNumData.waitPayNum + ")" : ""}`,
-          value: "UNPAID",
-        },
-        {
-          title: `已付款${this.orderNumData.waitDeliveryNum ? "(" + this.orderNumData.waitDeliveryNum + ")" : ""}`,
-          value: "PAID",
-        },
-        {
-          title: `待发货${this.orderNumData.waitShipNum ? "(" + this.orderNumData.waitShipNum + ")" : ""}`,
-          value: "UNDELIVERED",
-        },
-        {
-          title: `部分发货${this.orderNumData.partsDeliveredNumNum ? "(" + this.orderNumData.partsDeliveredNumNum + ")" : ""}`,
-          value: "PARTS_DELIVERED",
-        },
-        {
-          title: `待收货${this.orderNumData.deliveredNum ? "(" + this.orderNumData.deliveredNum + ")" : ""}`,
-          value: "DELIVERED",
-        },
-        {
-          title: `待核验${this.orderNumData.waitCheckNum ? "(" + this.orderNumData.waitCheckNum + ")" : ""}`,
-          value: "TAKE",
-        },
-        {
-          title: `待自提${this.orderNumData.waitSelfPickNum ? "(" + this.orderNumData.waitSelfPickNum + ")" : ""}`,
-          value: "STAY_PICKED_UP",
-        },
-        {
-          title: `已完成${this.orderNumData.finishNum ? "(" + this.orderNumData.finishNum + ")" : ""}`,
-          value: "COMPLETED",
-        },
-        {
-          title: `已关闭${this.orderNumData.closeNum ? "(" + this.orderNumData.closeNum + ")" : ""}`,
-          value: "CANCELLED",
-        },
-      ];
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
+
+defineOptions({ name: "orderList" });
+
+const route = useRoute();
+
+const fields = ref({
+  订单编号: "sn",
+  下单时间: "createTime",
+  客户名称: "memberName",
+  支付方式: {
+    field: "clientType",
+    callback: (value) => {
+      if (value == "H5") return "移动端";
+      if (value == "PC") return "PC端";
+      if (value == "WECHAT_MP") return "小程序端";
+      if (value == "APP") return "移动应用端";
+      return value;
     },
   },
-  methods: {
-    onStatusTabClick(tab) {
-      this.orderStatusClick(tab.paneName);
+  商品数量: "groupNum",
+  付款状态: {
+    field: "payStatus",
+    callback: (value) =>
+      value == "UNPAID" ? "未付款" : value == "PAID" ? "已付款" : "",
+  },
+  店铺: "storeName",
+});
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+  orderType: "",
+  orderSn: "",
+  keywords: "",
+  goodsType: "",
+  orderStatus: "",
+  paymentMethod: "",
+  orderPromotionType: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const orderNumData = ref({});
+const currentStatus = ref("ALL");
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+const orderStatusWithCount = computed(() => {
+  return [
+    { title: "全部", value: "ALL" },
+    {
+      title: `未付款${orderNumData.value.waitPayNum ? "(" + orderNumData.value.waitPayNum + ")" : ""}`,
+      value: "UNPAID",
     },
-    orderGoods(row) {
-      const items = row && row.orderItems;
-      return items && items.length ? items : [{}];
+    {
+      title: `已付款${orderNumData.value.waitDeliveryNum ? "(" + orderNumData.value.waitDeliveryNum + ")" : ""}`,
+      value: "PAID",
     },
-    afterSaleText(status) {
-      const map = {
-        NOT_APPLIED: "—",
-        NEW: "—",
-        PART_AFTER_SALE: "部分售后",
-        ALREADY_APPLIED: "售后中",
-        EXPIRED: "不可售后",
-      };
-      return map[status] || "—";
+    {
+      title: `待发货${orderNumData.value.waitShipNum ? "(" + orderNumData.value.waitShipNum + ")" : ""}`,
+      value: "UNDELIVERED",
     },
-    copyText(text) {
-      if (!text) {
-        return;
+    {
+      title: `部分发货${orderNumData.value.partsDeliveredNumNum ? "(" + orderNumData.value.partsDeliveredNumNum + ")" : ""}`,
+      value: "PARTS_DELIVERED",
+    },
+    {
+      title: `待收货${orderNumData.value.deliveredNum ? "(" + orderNumData.value.deliveredNum + ")" : ""}`,
+      value: "DELIVERED",
+    },
+    {
+      title: `待核验${orderNumData.value.waitCheckNum ? "(" + orderNumData.value.waitCheckNum + ")" : ""}`,
+      value: "TAKE",
+    },
+    {
+      title: `待自提${orderNumData.value.waitSelfPickNum ? "(" + orderNumData.value.waitSelfPickNum + ")" : ""}`,
+      value: "STAY_PICKED_UP",
+    },
+    {
+      title: `已完成${orderNumData.value.finishNum ? "(" + orderNumData.value.finishNum + ")" : ""}`,
+      value: "COMPLETED",
+    },
+    {
+      title: `已关闭${orderNumData.value.closeNum ? "(" + orderNumData.value.closeNum + ")" : ""}`,
+      value: "CANCELLED",
+    },
+  ];
+});
+
+onMounted(() => {
+  const orderStatus = route.query.orderStatus;
+  if (orderStatus) {
+    currentStatus.value = orderStatus;
+    searchForm.orderStatus = orderStatus;
+  }
+  init();
+});
+
+function onStatusTabClick(tab) {
+  orderStatusClick(tab.paneName);
+}
+function orderGoods(row) {
+  const items = row && row.orderItems;
+  return items && items.length ? items : [{}];
+}
+function afterSaleText(status) {
+  const map = {
+    NOT_APPLIED: "—",
+    NEW: "—",
+    PART_AFTER_SALE: "部分售后",
+    ALREADY_APPLIED: "售后中",
+    EXPIRED: "不可售后",
+  };
+  return map[status] || "—";
+}
+function copyText(text) {
+  if (!text) {
+    return;
+  }
+  const done = () => Message.success("已复制订单编号");
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(done).catch(() => copyTextFallback(text, done));
+    return;
+  }
+  copyTextFallback(text, done);
+}
+function copyTextFallback(text, done) {
+  const input = document.createElement("textarea");
+  input.value = text;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand("copy");
+  document.body.removeChild(input);
+  done();
+}
+function clientTypeText(v) {
+  const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
+  return map[v] || v || "-";
+}
+function orderPromotionText(v) {
+  const map = {
+    NORMAL: "普通订单",
+    PINTUAN: "拼团订单",
+    GIFT: "赠品订单",
+    POINTS: "积分订单",
+    KANJIA: "砍价订单",
+  };
+  return map[v] || v || "-";
+}
+function orderPromotionTagType(v) {
+  const map = {
+    NORMAL: "primary",
+    PINTUAN: "danger",
+    GIFT: "success",
+    POINTS: "info",
+    KANJIA: "warning",
+  };
+  return map[v] || "info";
+}
+function paymentMethodText(v) {
+  const map = {
+    NOT_ACTUALLY_PAID: "-",
+    WECHAT: "微信支付",
+    ALIPAY: "支付宝",
+    WALLET: "余额支付",
+    BANK_TRANSFER: "线下转账",
+  };
+  return map[v] || v || "-";
+}
+function orderStatusText(v) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    STAY_PICKED_UP: "待自提",
+    PARTS_DELIVERED: "部分发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已关闭",
+  };
+  return map[v] || v || "-";
+}
+function orderStatusTagType(v) {
+  const map = {
+    UNPAID: "danger",
+    PAID: "primary",
+    UNDELIVERED: "info",
+    STAY_PICKED_UP: "info",
+    PARTS_DELIVERED: "warning",
+    DELIVERED: "warning",
+    COMPLETED: "success",
+    TAKE: "warning",
+    CANCELLED: "danger",
+  };
+  return map[v] || "info";
+}
+function init() {
+  getDataList();
+  getOrderNumData();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+  getOrderNumData();
+}
+function selectDateRange(v) {
+  if (v && v.length === 2) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  } else {
+    searchForm.startDate = "";
+    searchForm.endDate = "";
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getOrderList(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      const done = () => this.$Message.success("已复制订单编号");
-      if (navigator.clipboard && navigator.clipboard.writeText) {
-        navigator.clipboard.writeText(text).then(done).catch(() => this.copyTextFallback(text, done));
-        return;
-      }
-      this.copyTextFallback(text, done);
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
+function detail(v, openFulfill = false) {
+  customRouterPush({
+    name: "order-detail",
+    query: {
+      sn: v.sn,
+      ...(openFulfill ? { openFulfill: "1" } : {}),
+      ...(openFulfill && v.orderStatus === "PARTS_DELIVERED" ? { fulfillMode: "SPLIT" } : {}),
     },
-    copyTextFallback(text, done) {
-      const input = document.createElement("textarea");
-      input.value = text;
-      document.body.appendChild(input);
-      input.select();
-      document.execCommand("copy");
-      document.body.removeChild(input);
-      done();
-    },
-    clientTypeText(v) {
-      const map = { H5: "移动端", PC: "PC端", WECHAT_MP: "小程序端", APP: "移动应用端" };
-      return map[v] || v || "-";
-    },
-    orderPromotionText(v) {
-      const map = {
-        NORMAL: "普通订单",
-        PINTUAN: "拼团订单",
-        GIFT: "赠品订单",
-        POINTS: "积分订单",
-        KANJIA: "砍价订单",
-      };
-      return map[v] || v || "-";
-    },
-    orderPromotionTagType(v) {
-      const map = {
-        NORMAL: "primary",
-        PINTUAN: "danger",
-        GIFT: "success",
-        POINTS: "info",
-        KANJIA: "warning",
-      };
-      return map[v] || "info";
-    },
-    paymentMethodText(v) {
-      const map = {
-        NOT_ACTUALLY_PAID: "-",
-        WECHAT: "微信支付",
-        ALIPAY: "支付宝",
-        WALLET: "余额支付",
-        BANK_TRANSFER: "线下转账",
-      };
-      return map[v] || v || "-";
-    },
-    orderStatusText(v) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        STAY_PICKED_UP: "待自提",
-        PARTS_DELIVERED: "部分发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已关闭",
-      };
-      return map[v] || v || "-";
-    },
-    orderStatusTagType(v) {
-      const map = {
-        UNPAID: "danger",
-        PAID: "primary",
-        UNDELIVERED: "info",
-        STAY_PICKED_UP: "info",
-        PARTS_DELIVERED: "warning",
-        DELIVERED: "warning",
-        COMPLETED: "success",
-        TAKE: "warning",
-        CANCELLED: "danger",
-      };
-      return map[v] || "info";
-    },
-    init() {
-      this.getDataList();
-      this.getOrderNumData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-      this.getOrderNumData();
-    },
-    selectDateRange(v) {
-      if (v && v.length === 2) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      } else {
-        this.searchForm.startDate = "";
-        this.searchForm.endDate = "";
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getOrderList(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-    detail(v, openFulfill = false) {
-      this.$filters.customRouterPush({
-        name: "order-detail",
-        query: {
-          sn: v.sn,
-          ...(openFulfill ? { openFulfill: "1" } : {}),
-          ...(openFulfill && v.orderStatus === "PARTS_DELIVERED" ? { fulfillMode: "SPLIT" } : {}),
-        },
+  });
+}
+function canShip(row) {
+  if (!row) return false;
+  if (row.allowOperationVO) {
+    return canShowShipButton(row.allowOperationVO, row);
+  }
+  if (isNonShippableOrder(row)) return false;
+  return row.orderStatus === "UNDELIVERED" || row.orderStatus === "PARTS_DELIVERED";
+}
+async function exportOrder() {
+  if (!searchForm.startDate || !searchForm.endDate) {
+    Message.error("必须选择时间范围，搜索后进行导出！");
+    return;
+  }
+  API_Order.exportOrder(searchForm)
+    .then((res) => {
+      const blob = new Blob([res], {
+        type: "application/vnd.ms-excel;charset=utf-8",
       });
-    },
-    canShip(row) {
-      if (!row) return false;
-      if (row.allowOperationVO) {
-        return canShowShipButton(row.allowOperationVO, row);
-      }
-      if (isNonShippableOrder(row)) return false;
-      return row.orderStatus === "UNDELIVERED" || row.orderStatus === "PARTS_DELIVERED";
-    },
-    async exportOrder() {
-      if (!this.searchForm.startDate || !this.searchForm.endDate) {
-        this.$Message.error("必须选择时间范围，搜索后进行导出！");
-        return;
-      }
-      API_Order.exportOrder(this.searchForm)
-        .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.ms-excel;charset=utf-8",
-          });
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = "订单列表.xlsx";
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else {
-            navigator.msSaveBlob(blob, "订单列表.xlsx");
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    orderStatusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined) {
-        this.searchForm.orderStatus = "";
-        this.currentStatus = "ALL";
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = "订单列表.xlsx";
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
       } else {
-        this.searchForm.orderStatus = name;
-        this.currentStatus = name;
+        navigator.msSaveBlob(blob, "订单列表.xlsx");
       }
-      this.getDataList();
-    },
-    getOrderNumData() {
-      const { orderStatus, pageNumber, pageSize, sort, order, ...searchParams } = this.searchForm;
-      API_Order.getOrderNum(searchParams)
-        .then((res) => {
-          if (res.success) {
-            this.orderNumData = res.result;
-          }
-        })
-        .catch((err) => {
-          console.error("获取订单数量统计失败:", err);
-        });
-    },
-  },
-  mounted() {
-    const orderStatus = this.$route.query.orderStatus;
-    if (orderStatus) {
-      this.currentStatus = orderStatus;
-      this.searchForm.orderStatus = orderStatus;
-    }
-    this.init();
-  },
-};
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+function orderStatusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined) {
+    searchForm.orderStatus = "";
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.orderStatus = name;
+    currentStatus.value = name;
+  }
+  getDataList();
+}
+function getOrderNumData() {
+  const { orderStatus, pageNumber, pageSize, sort, order, ...searchParams } = searchForm;
+  API_Order.getOrderNum(searchParams)
+    .then((res) => {
+      if (res.success) {
+        orderNumData.value = res.result;
+      }
+    })
+    .catch((err) => {
+      console.error("获取订单数量统计失败:", err);
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/order/orderVerification.vue b/seller/src/views/order/order/orderVerification.vue
index 7ba235eef..ba1016f37 100644
--- a/seller/src/views/order/order/orderVerification.vue
+++ b/seller/src/views/order/order/orderVerification.vue
@@ -113,135 +113,131 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { reactive, ref } from "vue";
 import { confirmVerification, getVerificationRecords, previewVerification } from "@/api/order";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "orderVerification",
-  data() {
-    return {
-      activeTab: "verify",
-      code: "",
-      lookingUp: false,
-      submitting: false,
-      confirmVisible: false,
-      preview: {
-        code: "",
-        orderSn: "",
-        goods: [],
-      },
-      loading: false,
-      records: [],
-      total: 0,
-      pageNumber: 1,
-      pageSize: 20,
-      verifiedRange: null,
-      recordQuery: {
-        goodsName: "",
-        verifierName: "",
-      },
-    };
-  },
-  methods: {
-    specText(specs) {
-      if (!specs) return "";
-      try {
-        const obj = typeof specs === "string" ? JSON.parse(specs) : specs;
-        if (!obj || typeof obj !== "object") return "";
-        return Object.keys(obj)
-          .filter((key) => key !== "images")
-          .map((key) => `${key}：${obj[key]}`)
-          .join(" ");
-      } catch (e) {
-        return "";
+defineOptions({ name: "orderVerification" });
+
+const activeTab = ref("verify");
+const code = ref("");
+const lookingUp = ref(false);
+const submitting = ref(false);
+const confirmVisible = ref(false);
+const preview = ref({
+  code: "",
+  orderSn: "",
+  goods: [],
+});
+const loading = ref(false);
+const records = ref([]);
+const total = ref(0);
+const pageNumber = ref(1);
+const pageSize = ref(20);
+const verifiedRange = ref(null);
+const recordQuery = reactive({
+  goodsName: "",
+  verifierName: "",
+});
+
+function specText(specs) {
+  if (!specs) return "";
+  try {
+    const obj = typeof specs === "string" ? JSON.parse(specs) : specs;
+    if (!obj || typeof obj !== "object") return "";
+    return Object.keys(obj)
+      .filter((key) => key !== "images")
+      .map((key) => `${key}：${obj[key]}`)
+      .join(" ");
+  } catch (e) {
+    return "";
+  }
+}
+function confirmVerify() {
+  const inputCode = (code.value || "").trim();
+  if (!inputCode) {
+    Message.warning("请输入核销码");
+    return;
+  }
+  lookingUp.value = true;
+  previewVerification(inputCode)
+    .then((res) => {
+      lookingUp.value = false;
+      if (res.success && res.result) {
+        preview.value = {
+          code: res.result.code || inputCode,
+          orderSn: res.result.orderSn || "",
+          goods: res.result.goods || [],
+        };
+        confirmVisible.value = true;
       }
-    },
-    confirmVerify() {
-      const code = (this.code || "").trim();
-      if (!code) {
-        this.$Message.warning("请输入核销码");
-        return;
+    })
+    .catch(() => {
+      lookingUp.value = false;
+    });
+}
+function submitVerify() {
+  const submitCode = (preview.value.code || "").trim();
+  if (!submitCode) {
+    Message.warning("请输入核销码");
+    return;
+  }
+  submitting.value = true;
+  confirmVerification(submitCode)
+    .then((res) => {
+      submitting.value = false;
+      if (res.success) {
+        Message.success(res.result || "核销成功");
+        confirmVisible.value = false;
+        code.value = "";
+        preview.value = { code: "", orderSn: "", goods: [] };
+        pageNumber.value = 1;
+        loadRecords();
       }
-      this.lookingUp = true;
-      previewVerification(code)
-        .then((res) => {
-          this.lookingUp = false;
-          if (res.success && res.result) {
-            this.preview = {
-              code: res.result.code || code,
-              orderSn: res.result.orderSn || "",
-              goods: res.result.goods || [],
-            };
-            this.confirmVisible = true;
-          }
-        })
-        .catch(() => {
-          this.lookingUp = false;
-        });
-    },
-    submitVerify() {
-      const code = (this.preview.code || "").trim();
-      if (!code) {
-        this.$Message.warning("请输入核销码");
-        return;
+    })
+    .catch(() => {
+      submitting.value = false;
+    });
+}
+function onTabChange(name) {
+  if (name === "records") {
+    loadRecords();
+  }
+}
+function onSizeChange() {
+  pageNumber.value = 1;
+  loadRecords();
+}
+function searchRecords() {
+  pageNumber.value = 1;
+  loadRecords();
+}
+function loadRecords() {
+  loading.value = true;
+  const range = verifiedRange.value;
+  const params = {
+    pageNumber: pageNumber.value,
+    pageSize: pageSize.value,
+    goodsName: (recordQuery.goodsName || "").trim(),
+    verifierName: (recordQuery.verifierName || "").trim(),
+  };
+  if (range && range.length === 2) {
+    params.startTime = range[0];
+    params.endTime = range[1];
+  }
+  getVerificationRecords(params)
+    .then((res) => {
+      loading.value = false;
+      if (res.success) {
+        records.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      this.submitting = true;
-      confirmVerification(code)
-        .then((res) => {
-          this.submitting = false;
-          if (res.success) {
-            this.$Message.success(res.result || "核销成功");
-            this.confirmVisible = false;
-            this.code = "";
-            this.preview = { code: "", orderSn: "", goods: [] };
-            this.pageNumber = 1;
-            this.loadRecords();
-          }
-        })
-        .catch(() => {
-          this.submitting = false;
-        });
-    },
-    onTabChange(name) {
-      if (name === "records") {
-        this.loadRecords();
-      }
-    },
-    onSizeChange() {
-      this.pageNumber = 1;
-      this.loadRecords();
-    },
-    searchRecords() {
-      this.pageNumber = 1;
-      this.loadRecords();
-    },
-    loadRecords() {
-      this.loading = true;
-      const range = this.verifiedRange;
-      const params = {
-        pageNumber: this.pageNumber,
-        pageSize: this.pageSize,
-        goodsName: (this.recordQuery.goodsName || "").trim(),
-        verifierName: (this.recordQuery.verifierName || "").trim(),
-      };
-      if (range && range.length === 2) {
-        params.startTime = range[0];
-        params.endTime = range[1];
-      }
-      getVerificationRecords(params)
-        .then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.records = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-        });
-    },
-  },
-};
+    })
+    .catch(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/order/virtualOrderList.vue b/seller/src/views/order/order/virtualOrderList.vue
index 4fb9ec690..8e1ee798c 100644
--- a/seller/src/views/order/order/virtualOrderList.vue
+++ b/seller/src/views/order/order/virtualOrderList.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -57,7 +57,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -126,110 +126,113 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Order from "@/api/order";
-export default {
-  name: "fictitiousOrderList",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "",
-        order: "",
-        startDate: "",
-        endDate: "",
-        orderType: "VIRTUAL",
-        orderSn: "",
-        buyerName: "",
-        orderStatus: "",
-      },
-      selectDate: null,
-      data: [],
-      total: 0,
-      orderStatus: [
-        { title: "全部", value: "" },
-        { title: "未付款", value: "UNPAID" },
-        { title: "已付款", value: "PAID" },
-        { title: "待核验", value: "TAKE" },
-        { title: "已完成", value: "COMPLETED" },
-        { title: "已关闭", value: "CANCELLED" },
-      ],
-      currentStatus: "",
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSort(e) {
-      this.searchForm.sort = e.prop;
-      this.searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      this.getDataList();
-    },
-    selectDateRange(v) {
-      if (v) {
-        this.searchForm.startDate = v[0];
-        this.searchForm.endDate = v[1];
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Order.getOrderList(this.searchForm).then((res) => {
-        this.loading = false;
+import { Message, Modal } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
+
+defineOptions({ name: "fictitiousOrderList" });
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "",
+  order: "",
+  startDate: "",
+  endDate: "",
+  orderType: "VIRTUAL",
+  orderSn: "",
+  buyerName: "",
+  orderStatus: "",
+});
+const selectDate = ref(null);
+const data = ref([]);
+const total = ref(0);
+const orderStatus = ref([
+  { title: "全部", value: "" },
+  { title: "未付款", value: "UNPAID" },
+  { title: "已付款", value: "PAID" },
+  { title: "待核验", value: "TAKE" },
+  { title: "已完成", value: "COMPLETED" },
+  { title: "已关闭", value: "CANCELLED" },
+]);
+const currentStatus = ref("");
+
+// searchFormRef/tableRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function changeSort(e) {
+  searchForm.sort = e.prop;
+  searchForm.order = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  getDataList();
+}
+function selectDateRange(v) {
+  if (v) {
+    searchForm.startDate = v[0];
+    searchForm.endDate = v[1];
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Order.getOrderList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function confirmPrice(v) {
+  Modal.confirm({
+    title: "确认收款",
+    content: "您确定要收款吗？",
+    loading: true,
+    onOk: () => {
+      API_Order.orderPay(v.sn).then((res) => {
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          Message.success("收款成功");
+          getDataList();
         }
+        Modal.remove();
       });
     },
-    confirmPrice(v) {
-      this.$Modal.confirm({
-        title: "确认收款",
-        content: "您确定要收款吗？",
-        loading: true,
-        onOk: () => {
-          API_Order.orderPay(v.sn).then((res) => {
-            if (res.success) {
-              this.$Message.success("收款成功");
-              this.getDataList();
-            }
-            this.$Modal.remove();
-          });
-        },
-      });
-    },
-    detail(v) {
-      let sn = v.sn;
-      this.$filters.customRouterPush({
-        name: "order-detail",
-        query: { sn: sn, orderType: v.orderType },
-      });
-    },
-    onStatusTabClick(tab) {
-      const item = tab.paneName;
-      this.currentStatus = item;
-      this.searchForm.orderStatus = item;
-      this.getDataList();
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+function detail(v) {
+  let sn = v.sn;
+  customRouterPush({
+    name: "order-detail",
+    query: { sn: sn, orderType: v.orderType },
+  });
+}
+function onStatusTabClick(tab) {
+  const item = tab.paneName;
+  currentStatus.value = item;
+  searchForm.orderStatus = item;
+  getDataList();
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/order/receiptManager/receipt.vue b/seller/src/views/order/receiptManager/receipt.vue
index 7dceb5e05..b616a23d4 100644
--- a/seller/src/views/order/receiptManager/receipt.vue
+++ b/seller/src/views/order/receiptManager/receipt.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
         <el-form-item label="订单编号" prop="orderSn">
           <el-input v-model="searchForm.orderSn" clearable placeholder="请输入订单编号" style="width: 240px" />
         </el-form-item>
@@ -26,7 +26,7 @@
 
     <el-card>
       <div class="receipt-tip">订单状态为已发货/已完成可开票</div>
-      <el-table ref="table" v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+      <el-table ref="tableRef" v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
         <el-table-column label="订单号" min-width="120">
           <template #default="{ row }">
             <a class="link-text" @click="$router.push({ name: 'order-detail', query: { sn: row.orderSn } })">
@@ -181,217 +181,219 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Order from "@/api/order";
 import { uploadFile } from "@/libs/axios";
+import { getStore } from "@/libs/storage";
+import { Message } from "@/utils/message";
 
-export default {
-  name: "receipt",
-  data() {
-    return {
-      loading: true,
-      receiptModalVisible: false,
-      receiptDetailLoading: false,
-      invoiceSubmitting: false,
-      receiptModalMode: "detail",
-      uploadFileUrl: uploadFile,
-      accessToken: {},
-      receiptUploadData: { directoryPath: "default" }, // OSS 上传目录（与后端存储配置一致）
-      currentReceipt: {},
-      selectedReceiptRow: null,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        receiptStatus: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    orderStatusText(status) {
-      const map = {
-        UNPAID: "未付款",
-        PAID: "已付款",
-        UNDELIVERED: "待发货",
-        DELIVERED: "已发货",
-        COMPLETED: "已完成",
-        TAKE: "待核验",
-        CANCELLED: "已取消",
-      };
-      return map[status] || status;
-    },
-    orderStatusTagType(status) {
-      const map = {
-        UNPAID: "danger",
-        PAID: "primary",
-        UNDELIVERED: "info",
-        DELIVERED: "info",
-        COMPLETED: "success",
-        TAKE: "warning",
-        CANCELLED: "danger",
-      };
-      return map[status] || "info";
-    },
-    canInvoicing(row) {
-      if (!row) return false;
-      return (
-        (row.orderStatus === "COMPLETED" || row.orderStatus === "DELIVERED") &&
-        Number(row.receiptStatus) === 0
-      );
-    },
-    initUploadAccessToken() {
-      this.accessToken = { accessToken: this.getStore("accessToken") };
-    },
-    hasValue(value) {
-      if (value === null || value === undefined) return false;
-      return String(value).trim() !== "";
-    },
-    hasPrice(value) {
-      return value !== null && value !== undefined && value !== "";
-    },
-    formatPrice(value) {
-      if (value === null || value === undefined || value === "") return "暂无";
-      return `￥${value}`;
-    },
-    isVatSpecialReceipt(receipt) {
-      if (!receipt) return false;
-      const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
-      return receiptType === "2" || receiptType === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL";
-    },
-    formatReceiptType(receipt) {
-      if (!receipt || (!receipt.receiptType && !receipt.invoiceKind)) return "电子普通发票";
-      const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
-      if (receiptType === "电子普通发票" || receiptType === "增值税专用发票") return receiptType;
-      return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
-    },
-    getInvoiceAddress(receipt) {
-      if (!receipt) return "";
-      return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
-    },
-    buildInvoicingPayload() {
-      const invoiceAddress = this.getInvoiceAddress(this.currentReceipt);
-      return invoiceAddress ? { invoiceAddress } : {};
-    },
-    beforeInvoiceUpload(file) {
-      const allowed = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
-      const okType = allowed.includes(file.type) || /\.(jpg|jpeg|png|pdf)$/i.test(file.name);
-      if (!okType) {
-        this.$Message.warning("请上传 jpg、jpeg、png 或 pdf 格式文件");
-        return false;
-      }
-      if (file.size / 1024 / 1024 > 10) {
-        this.$Message.warning("发票附件不能超过 10MB");
-        return false;
-      }
-      return true;
-    },
-    handleInvoiceUploadSuccess(res) {
-      if (res && res.success && res.result) {
-        this.currentReceipt.invoiceAddress = res.result;
-        if (this.selectedReceiptRow) {
-          this.selectedReceiptRow.invoiceAddress = res.result;
-        }
-        this.$Message.success("发票上传成功");
-      } else {
-        this.$Message.error((res && res.message) || "发票上传失败");
-      }
-    },
-    handleInvoiceUploadError() {
-      this.$Message.error("发票上传失败");
-    },
-    viewInvoiceFile(url) {
-      if (!url) return;
-      window.open(url, "_blank");
-    },
-    init() {
-      this.getData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getData();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        receiptStatus: "",
-      };
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      API_Order.getReceiptPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    async openReceiptModal(row, mode = "detail") {
-      if (!row) return;
-      this.receiptModalMode = mode;
-      this.selectedReceiptRow = row;
-      this.currentReceipt = { ...row };
-      this.receiptModalVisible = true;
-      this.receiptDetailLoading = true;
-      try {
-        const res = await API_Order.getReceiptDetail(row.id);
-        if (res.success && res.result) {
-          this.currentReceipt = { ...row, ...res.result };
-        } else {
-          this.$Message.warning("发票详情获取失败，已展示列表中的发票信息");
-        }
-      } catch (e) {
-        this.$Message.error("发票详情获取失败");
-      } finally {
-        this.receiptDetailLoading = false;
-      }
-    },
-    async submitInvoicing() {
-      if (!this.selectedReceiptRow) return;
-      if (!this.canInvoicing(this.selectedReceiptRow)) {
-        this.$Message.warning("当前订单状态不支持开票");
-        return;
-      }
-      const params = this.buildInvoicingPayload();
-      if (!params.invoiceAddress) {
-        this.$Message.warning("请先上传发票");
-        return;
-      }
-      this.invoiceSubmitting = true;
-      try {
-        const res = await API_Order.invoicing(this.selectedReceiptRow.id, params);
-        if (res.success) {
-          this.$Message.success("开票成功");
-          this.receiptModalVisible = false;
-          this.getData();
-        }
-      } catch (e) {
-        this.$Message.error("开票失败");
-      } finally {
-        this.invoiceSubmitting = false;
-      }
-    },
-  },
-  mounted() {
-    this.initUploadAccessToken();
-    this.init();
-  },
-};
+defineOptions({ name: "receipt" });
+
+const loading = ref(true);
+const receiptModalVisible = ref(false);
+const receiptDetailLoading = ref(false);
+const invoiceSubmitting = ref(false);
+const receiptModalMode = ref("detail");
+const uploadFileUrl = ref(uploadFile);
+const accessToken = ref({});
+const receiptUploadData = ref({ directoryPath: "default" }); // OSS 上传目录（与后端存储配置一致）
+const currentReceipt = ref({});
+const selectedReceiptRow = ref(null);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc",
+  receiptStatus: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef / tableRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+
+function orderStatusText(status) {
+  const map = {
+    UNPAID: "未付款",
+    PAID: "已付款",
+    UNDELIVERED: "待发货",
+    DELIVERED: "已发货",
+    COMPLETED: "已完成",
+    TAKE: "待核验",
+    CANCELLED: "已取消",
+  };
+  return map[status] || status;
+}
+function orderStatusTagType(status) {
+  const map = {
+    UNPAID: "danger",
+    PAID: "primary",
+    UNDELIVERED: "info",
+    DELIVERED: "info",
+    COMPLETED: "success",
+    TAKE: "warning",
+    CANCELLED: "danger",
+  };
+  return map[status] || "info";
+}
+function canInvoicing(row) {
+  if (!row) return false;
+  return (
+    (row.orderStatus === "COMPLETED" || row.orderStatus === "DELIVERED") &&
+    Number(row.receiptStatus) === 0
+  );
+}
+function initUploadAccessToken() {
+  accessToken.value = { accessToken: getStore("accessToken") };
+}
+function hasValue(value) {
+  if (value === null || value === undefined) return false;
+  return String(value).trim() !== "";
+}
+function hasPrice(value) {
+  return value !== null && value !== undefined && value !== "";
+}
+function formatPrice(value) {
+  if (value === null || value === undefined || value === "") return "暂无";
+  return `￥${value}`;
+}
+function isVatSpecialReceipt(receipt) {
+  if (!receipt) return false;
+  const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+  return receiptType === "2" || receiptType === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL";
+}
+function formatReceiptType(receipt) {
+  if (!receipt || (!receipt.receiptType && !receipt.invoiceKind)) return "电子普通发票";
+  const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+  if (receiptType === "电子普通发票" || receiptType === "增值税专用发票") return receiptType;
+  return isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
+}
+function getInvoiceAddress(receipt) {
+  if (!receipt) return "";
+  return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
+}
+function buildInvoicingPayload() {
+  const invoiceAddress = getInvoiceAddress(currentReceipt.value);
+  return invoiceAddress ? { invoiceAddress } : {};
+}
+function beforeInvoiceUpload(file) {
+  const allowed = ["image/jpeg", "image/jpg", "image/png", "application/pdf"];
+  const okType = allowed.includes(file.type) || /\.(jpg|jpeg|png|pdf)$/i.test(file.name);
+  if (!okType) {
+    Message.warning("请上传 jpg、jpeg、png 或 pdf 格式文件");
+    return false;
+  }
+  if (file.size / 1024 / 1024 > 10) {
+    Message.warning("发票附件不能超过 10MB");
+    return false;
+  }
+  return true;
+}
+function handleInvoiceUploadSuccess(res) {
+  if (res && res.success && res.result) {
+    currentReceipt.value.invoiceAddress = res.result;
+    if (selectedReceiptRow.value) {
+      selectedReceiptRow.value.invoiceAddress = res.result;
+    }
+    Message.success("发票上传成功");
+  } else {
+    Message.error((res && res.message) || "发票上传失败");
+  }
+}
+function handleInvoiceUploadError() {
+  Message.error("发票上传失败");
+}
+function viewInvoiceFile(url) {
+  if (!url) return;
+  window.open(url, "_blank");
+}
+function init() {
+  getData();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getData();
+}
+function changePageSize(v) {
+  searchForm.value.pageSize = v;
+  getData();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getData();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 10,
+    sort: "createTime",
+    order: "desc",
+    receiptStatus: "",
+  };
+  getData();
+}
+function getData() {
+  loading.value = true;
+  API_Order.getReceiptPage(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+async function openReceiptModal(row, mode = "detail") {
+  if (!row) return;
+  receiptModalMode.value = mode;
+  selectedReceiptRow.value = row;
+  currentReceipt.value = { ...row };
+  receiptModalVisible.value = true;
+  receiptDetailLoading.value = true;
+  try {
+    const res = await API_Order.getReceiptDetail(row.id);
+    if (res.success && res.result) {
+      currentReceipt.value = { ...row, ...res.result };
+    } else {
+      Message.warning("发票详情获取失败，已展示列表中的发票信息");
+    }
+  } catch (e) {
+    Message.error("发票详情获取失败");
+  } finally {
+    receiptDetailLoading.value = false;
+  }
+}
+async function submitInvoicing() {
+  if (!selectedReceiptRow.value) return;
+  if (!canInvoicing(selectedReceiptRow.value)) {
+    Message.warning("当前订单状态不支持开票");
+    return;
+  }
+  const params = buildInvoicingPayload();
+  if (!params.invoiceAddress) {
+    Message.warning("请先上传发票");
+    return;
+  }
+  invoiceSubmitting.value = true;
+  try {
+    const res = await API_Order.invoicing(selectedReceiptRow.value.id, params);
+    if (res.success) {
+      Message.success("开票成功");
+      receiptModalVisible.value = false;
+      getData();
+    }
+  } catch (e) {
+    Message.error("开票失败");
+  } finally {
+    invoiceSubmitting.value = false;
+  }
+}
+
+onMounted(() => {
+  initUploadAccessToken();
+  init();
+});
 </script>
 <style lang="scss">
 @import "@/styles/table-common.scss";
diff --git a/seller/src/views/procurement/damage-report/list.vue b/seller/src/views/procurement/damage-report/list.vue
index 3ac4434bf..f08cbb968 100644
--- a/seller/src/views/procurement/damage-report/list.vue
+++ b/seller/src/views/procurement/damage-report/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="80px">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="80px">
         <el-form-item label="创建时间">
           <el-date-picker
             v-model="dateRange"
@@ -86,7 +86,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
 import { ElMessageBox } from "element-plus";
 import {
   getDamageReportPage,
@@ -103,193 +104,204 @@ import {
   damageStatusTag,
   formatMoney,
 } from "../constants";
+import { Message, Modal } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-damage-report-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      dateRange: [],
-      currentStatus: "ALL",
-      statusCountData: {},
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        status: "",
-      },
-    };
-  },
-  computed: {
-    statusTabs() {
-      const tabs = [{ title: "全部", value: "ALL" }];
-      Object.keys(DAMAGE_STATUS).forEach((key) => {
-        const count = this.statusCountData[key];
-        const label = DAMAGE_STATUS[key];
-        tabs.push({
-          title: count ? `${label}（${count}）` : label,
-          value: key,
-        });
-      });
-      return tabs;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    damageStatusText,
-    damageStatusTag,
-    formatMoney,
-    init() {
-      this.getStatusCount();
-      this.getDataList();
-    },
-    buildSearchParams(includeStatus = true) {
-      const params = { ...this.searchForm };
-      if (!includeStatus) {
-        delete params.status;
+defineOptions({ name: "procurement-damage-report-list" });
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const dateRange = ref([]);
+const currentStatus = ref("ALL");
+const statusCountData = ref({});
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  status: "",
+});
+
+const statusTabs = computed(() => {
+  const tabs = [{ title: "全部", value: "ALL" }];
+  Object.keys(DAMAGE_STATUS).forEach((key) => {
+    const count = statusCountData.value[key];
+    const label = DAMAGE_STATUS[key];
+    tabs.push({
+      title: count ? `${label}（${count}）` : label,
+      value: key,
+    });
+  });
+  return tabs;
+});
+
+onMounted(() => {
+  init();
+});
+
+function init() {
+  getStatusCount();
+  getDataList();
+}
+
+function buildSearchParams(includeStatus = true) {
+  const params = { ...searchForm.value };
+  if (!includeStatus) {
+    delete params.status;
+  }
+  if (dateRange.value && dateRange.value.length === 2) {
+    params.startDate = dateRange.value[0];
+    params.endDate = dateRange.value[1];
+  }
+  return params;
+}
+
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getStatusCount();
+  getDataList();
+}
+
+function resetSearch() {
+  searchForm.value = { pageNumber: 1, pageSize: 10, status: "" };
+  dateRange.value = [];
+  currentStatus.value = "ALL";
+  getStatusCount();
+  getDataList();
+}
+
+function onStatusTabClick(tab) {
+  statusClick(tab.paneName);
+}
+
+function statusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined) {
+    searchForm.value.status = "";
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.value.status = name;
+    currentStatus.value = name;
+  }
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+
+function getStatusCount() {
+  getDamageReportStatusCount(buildSearchParams(false)).then((res) => {
+    if (res.success) {
+      statusCountData.value = res.result || {};
+    }
+  });
+}
+
+function getDataList() {
+  loading.value = true;
+  getDamageReportPage(buildSearchParams(true))
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      if (this.dateRange && this.dateRange.length === 2) {
-        params.startDate = this.dateRange[0];
-        params.endDate = this.dateRange[1];
-      }
-      return params;
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getStatusCount();
-      this.getDataList();
-    },
-    resetSearch() {
-      this.searchForm = { pageNumber: 1, pageSize: 10, status: "" };
-      this.dateRange = [];
-      this.currentStatus = "ALL";
-      this.getStatusCount();
-      this.getDataList();
-    },
-    onStatusTabClick(tab) {
-      this.statusClick(tab.paneName);
-    },
-    statusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined) {
-        this.searchForm.status = "";
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.status = name;
-        this.currentStatus = name;
-      }
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getStatusCount() {
-      getDamageReportStatusCount(this.buildSearchParams(false)).then((res) => {
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function refreshList() {
+  getStatusCount();
+  getDataList();
+}
+
+function goCreate() {
+  customRouterPush({ name: "procurement-damage-report-operation" });
+}
+
+function goDetail(row) {
+  customRouterPush({
+    name: "procurement-damage-report-operation",
+    query: { id: row.id, readonly: 1 },
+  });
+}
+
+function handleSubmit(row) {
+  Modal.confirm({
+    title: "提交报损单",
+    content: "确认提交该报损单？",
+    onOk: () => {
+      submitDamageReport(row.id).then((res) => {
         if (res.success) {
-          this.statusCountData = res.result || {};
+          Message.success("提交成功");
+          refreshList();
         }
       });
     },
-    getDataList() {
-      this.loading = true;
-      getDamageReportPage(this.buildSearchParams(true))
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    refreshList() {
-      this.getStatusCount();
-      this.getDataList();
-    },
-    goCreate() {
-      this.$filters.customRouterPush({ name: "procurement-damage-report-operation" });
-    },
-    goDetail(row) {
-      this.$filters.customRouterPush({
-        name: "procurement-damage-report-operation",
-        query: { id: row.id, readonly: 1 },
+  });
+}
+
+function handleApprove(row) {
+  Modal.confirm({
+    title: "审核通过",
+    content: "确认通过该报损单？",
+    onOk: () => {
+      approveDamageReport(row.id).then((res) => {
+        if (res.success) {
+          Message.success("审核通过");
+          refreshList();
+        }
       });
     },
-    handleSubmit(row) {
-      this.$Modal.confirm({
-        title: "提交报损单",
-        content: "确认提交该报损单？",
-        onOk: () => {
-          submitDamageReport(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("提交成功");
-              this.refreshList();
-            }
-          });
-        },
+  });
+}
+
+function handleReject(row) {
+  ElMessageBox.prompt("请输入驳回原因", "驳回报损单", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    inputPlaceholder: "驳回原因",
+  })
+    .then(({ value }) => {
+      rejectDamageReport(row.id, value || "驳回").then((res) => {
+        if (res.success) {
+          Message.success("已驳回");
+          refreshList();
+        }
+      });
+    })
+    .catch(() => {});
+}
+
+function handleCancel(row) {
+  Modal.confirm({
+    title: "作废报损单",
+    content: "确认作废该报损单？",
+    onOk: () => {
+      cancelDamageReport(row.id).then((res) => {
+        if (res.success) {
+          Message.success("已作废");
+          refreshList();
+        }
       });
     },
-    handleApprove(row) {
-      this.$Modal.confirm({
-        title: "审核通过",
-        content: "确认通过该报损单？",
-        onOk: () => {
-          approveDamageReport(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("审核通过");
-              this.refreshList();
-            }
-          });
-        },
+  });
+}
+
+function handleComplete(row) {
+  Modal.confirm({
+    title: "完成报损",
+    content: "完成后将扣减库存，是否继续？",
+    onOk: () => {
+      completeDamageReport(row.id).then((res) => {
+        if (res.success) {
+          Message.success("报损完成，库存已扣减");
+          refreshList();
+        }
       });
     },
-    handleReject(row) {
-      ElMessageBox.prompt("请输入驳回原因", "驳回报损单", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        inputPlaceholder: "驳回原因",
-      })
-        .then(({ value }) => {
-          rejectDamageReport(row.id, value || "驳回").then((res) => {
-            if (res.success) {
-              this.$Message.success("已驳回");
-              this.refreshList();
-            }
-          });
-        })
-        .catch(() => {});
-    },
-    handleCancel(row) {
-      this.$Modal.confirm({
-        title: "作废报损单",
-        content: "确认作废该报损单？",
-        onOk: () => {
-          cancelDamageReport(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("已作废");
-              this.refreshList();
-            }
-          });
-        },
-      });
-    },
-    handleComplete(row) {
-      this.$Modal.confirm({
-        title: "完成报损",
-        content: "完成后将扣减库存，是否继续？",
-        onOk: () => {
-          completeDamageReport(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("报损完成，库存已扣减");
-              this.refreshList();
-            }
-          });
-        },
-      });
-    },
-  },
-};
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/damage-report/operation.vue b/seller/src/views/procurement/damage-report/operation.vue
index 01a314624..47990d51d 100644
--- a/seller/src/views/procurement/damage-report/operation.vue
+++ b/seller/src/views/procurement/damage-report/operation.vue
@@ -149,11 +149,13 @@
       </template>
     </el-card>
 
-    <liliDialog ref="liliDialog" @selectedGoodsData="onGoodsSelected" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="onGoodsSelected" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import liliDialog from "@/views/lili-dialog";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 import {
@@ -164,179 +166,170 @@ import {
   submitDamageReport,
 } from "@/api/procurement";
 import { damageStatusText, damageStatusTag, formatMoney } from "../constants";
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-damage-report-operation",
-  components: { liliDialog, uploadPicThumb },
-  data() {
-    return {
-      readonly: false,
-      submitLoading: false,
-      form: {
-        damageDate: "",
-        damageReasonId: "",
-        remark: "",
-        evidence: [],
-      },
-      items: [],
-      detail: {},
-      reasonOptions: [],
-      evidenceImageList: [],
-    };
-  },
-  computed: {
-    pageTitle() {
-      return this.readonly ? "报损单详情" : "新建报损单";
-    },
-    reasonText() {
-      const reason = this.reasonOptions.find((item) => item.id === this.detail.damageReasonId);
-      return reason ? reason.reason : "-";
-    },
-    totalQuantity() {
-      return this.items.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0);
-    },
-    totalAmount() {
-      return this.items.reduce((sum, item) => sum + (Number(item.amount) || 0), 0);
-    },
-  },
-  mounted() {
-    this.readonly = this.$route.query.readonly === "1" || !!this.$route.query.id;
-    this.loadReasons();
-    if (this.$route.query.id) {
-      this.loadDetail(this.$route.query.id);
+defineOptions({ name: "procurement-damage-report-operation" });
+
+const route = useRoute();
+
+const readonly = ref(false);
+const submitLoading = ref(false);
+const form = reactive({
+  damageDate: "",
+  damageReasonId: "",
+  remark: "",
+  evidence: [],
+});
+const items = ref([]);
+const detail = ref({});
+const reasonOptions = ref([]);
+const evidenceImageList = ref([]);
+const liliDialogRef = ref(null);
+
+const pageTitle = computed(() => (readonly.value ? "报损单详情" : "新建报损单"));
+const reasonText = computed(() => {
+  const reason = reasonOptions.value.find((item) => item.id === detail.value.damageReasonId);
+  return reason ? reason.reason : "-";
+});
+const totalQuantity = computed(() =>
+  items.value.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0)
+);
+const totalAmount = computed(() =>
+  items.value.reduce((sum, item) => sum + (Number(item.amount) || 0), 0)
+);
+
+onMounted(() => {
+  readonly.value = route.query.readonly === "1" || !!route.query.id;
+  loadReasons();
+  if (route.query.id) {
+    loadDetail(route.query.id);
+  }
+});
+
+function loadReasons() {
+  getStockReasonList({ category: "DAMAGE", pageNumber: 1, pageSize: 100 }).then((res) => {
+    if (res.success) {
+      reasonOptions.value = res.result.records || [];
     }
-  },
-  methods: {
-    damageStatusText,
-    damageStatusTag,
-    formatMoney,
-    loadReasons() {
-      getStockReasonList({ category: "DAMAGE", pageNumber: 1, pageSize: 100 }).then((res) => {
-        if (res.success) {
-          this.reasonOptions = res.result.records || [];
-        }
-      });
-    },
-    recalcRow(row) {
-      row.amount = (Number(row.unitPrice) || 0) * (Number(row.quantity) || 0);
-    },
-    onQuantityBlur(row) {
-      const val = parseInt(row.quantity, 10);
-      row.quantity = Number.isNaN(val) || val < 1 ? 1 : val;
-      this.recalcRow(row);
-    },
-    onUnitPriceBlur(row) {
-      const val = parseFloat(row.unitPrice);
-      row.unitPrice = Number.isNaN(val) || val < 0 ? 0 : Math.round(val * 100) / 100;
-      this.recalcRow(row);
-    },
-    loadDetail(id) {
-      getDamageReportDetail(id).then((res) => {
-        if (res.success && res.result) {
-          this.detail = res.result;
-          this.form.damageDate = res.result.damageDate;
-          this.form.damageReasonId = res.result.damageReasonId;
-          this.form.remark = res.result.remark;
-          this.form.evidence = res.result.evidence;
-          this.evidenceImageList = this.parseEvidenceImages(res.result.evidence);
-        }
-      });
-      getDamageReportItems(id).then((res) => {
-        if (res.success) {
-          this.items = res.result || [];
-        }
-      });
-    },
-    parseEvidenceImages(val) {
-      if (!val) return [];
-      if (Array.isArray(val)) return val.filter(Boolean);
-      return String(val)
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean);
-    },
-    openSkuPicker() {
-      this.$refs.liliDialog.goodsData = this.items.map((item) => ({
-        id: item.skuId,
-        goodsId: item.goodsId,
-        goodsName: item.goodsName,
-        price: item.unitPrice,
-        cost: item.unitPrice,
-      }));
-      this.$refs.liliDialog.open("goods");
-    },
-    onGoodsSelected(selected) {
-      const map = new Map(this.items.map((item) => [item.skuId, item]));
-      this.items = selected.map((sku) => {
-        const existed = map.get(sku.id);
-        if (existed) return existed;
-        const unitPrice = sku.cost || sku.price || 0;
-        return {
-          goodsId: sku.goodsId,
-          skuId: sku.id,
-          goodsName: sku.goodsName,
-          quantity: 1,
-          unitPrice,
-          amount: unitPrice,
-        };
-      });
-    },
-    removeItem(index) {
-      this.items.splice(index, 1);
-    },
-    validateForm() {
-      if (!this.form.damageReasonId) {
-        this.$Message.warning("请选择报损原因");
-        return false;
-      }
-      if (!this.items.length) {
-        this.$Message.warning("请添加报损商品");
-        return false;
-      }
-      return true;
-    },
-    handleSave(andSubmit) {
-      if (!this.validateForm()) return;
-      this.submitLoading = true;
-      const payload = {
-        damageDate: this.form.damageDate || undefined,
-        damageReasonId: this.form.damageReasonId,
-        remark: this.form.remark,
-        evidence: Array.isArray(this.form.evidence)
-          ? this.form.evidence.join(",")
-          : this.form.evidence || "",
-        items: this.items.map((item) => ({
-          goodsId: item.goodsId,
-          skuId: item.skuId,
-          goodsName: item.goodsName,
-          quantity: item.quantity,
-          unitPrice: item.unitPrice,
-        })),
-      };
-      createDamageReport(payload)
-        .then((res) => {
-          if (!res.success) return;
-          const reportId = res.result.id;
-          if (andSubmit) {
-            return submitDamageReport(reportId).then((subRes) => {
-              if (subRes.success) {
-                this.$Message.success("保存并提交成功");
-                this.goBack();
-              }
-            });
+  });
+}
+function recalcRow(row) {
+  row.amount = (Number(row.unitPrice) || 0) * (Number(row.quantity) || 0);
+}
+function onQuantityBlur(row) {
+  const val = parseInt(row.quantity, 10);
+  row.quantity = Number.isNaN(val) || val < 1 ? 1 : val;
+  recalcRow(row);
+}
+function onUnitPriceBlur(row) {
+  const val = parseFloat(row.unitPrice);
+  row.unitPrice = Number.isNaN(val) || val < 0 ? 0 : Math.round(val * 100) / 100;
+  recalcRow(row);
+}
+function loadDetail(id) {
+  getDamageReportDetail(id).then((res) => {
+    if (res.success && res.result) {
+      detail.value = res.result;
+      form.damageDate = res.result.damageDate;
+      form.damageReasonId = res.result.damageReasonId;
+      form.remark = res.result.remark;
+      form.evidence = res.result.evidence;
+      evidenceImageList.value = parseEvidenceImages(res.result.evidence);
+    }
+  });
+  getDamageReportItems(id).then((res) => {
+    if (res.success) {
+      items.value = res.result || [];
+    }
+  });
+}
+function parseEvidenceImages(val) {
+  if (!val) return [];
+  if (Array.isArray(val)) return val.filter(Boolean);
+  return String(val)
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+function openSkuPicker() {
+  liliDialogRef.value.goodsData = items.value.map((item) => ({
+    id: item.skuId,
+    goodsId: item.goodsId,
+    goodsName: item.goodsName,
+    price: item.unitPrice,
+    cost: item.unitPrice,
+  }));
+  liliDialogRef.value.open("goods");
+}
+function onGoodsSelected(selected) {
+  const map = new Map(items.value.map((item) => [item.skuId, item]));
+  items.value = selected.map((sku) => {
+    const existed = map.get(sku.id);
+    if (existed) return existed;
+    const unitPrice = sku.cost || sku.price || 0;
+    return {
+      goodsId: sku.goodsId,
+      skuId: sku.id,
+      goodsName: sku.goodsName,
+      quantity: 1,
+      unitPrice,
+      amount: unitPrice,
+    };
+  });
+}
+function removeItem(index) {
+  items.value.splice(index, 1);
+}
+function validateForm() {
+  if (!form.damageReasonId) {
+    Message.warning("请选择报损原因");
+    return false;
+  }
+  if (!items.value.length) {
+    Message.warning("请添加报损商品");
+    return false;
+  }
+  return true;
+}
+function handleSave(andSubmit) {
+  if (!validateForm()) return;
+  submitLoading.value = true;
+  const payload = {
+    damageDate: form.damageDate || undefined,
+    damageReasonId: form.damageReasonId,
+    remark: form.remark,
+    evidence: Array.isArray(form.evidence) ? form.evidence.join(",") : form.evidence || "",
+    items: items.value.map((item) => ({
+      goodsId: item.goodsId,
+      skuId: item.skuId,
+      goodsName: item.goodsName,
+      quantity: item.quantity,
+      unitPrice: item.unitPrice,
+    })),
+  };
+  createDamageReport(payload)
+    .then((res) => {
+      if (!res.success) return;
+      const reportId = res.result.id;
+      if (andSubmit) {
+        return submitDamageReport(reportId).then((subRes) => {
+          if (subRes.success) {
+            Message.success("保存并提交成功");
+            goBack();
           }
-          this.$Message.success("保存成功");
-          this.goBack();
-        })
-        .finally(() => {
-          this.submitLoading = false;
         });
-    },
-    goBack() {
-      this.$filters.customRouterPush({ name: "procurementDamageReportList" });
-    },
-  },
-};
+      }
+      Message.success("保存成功");
+      goBack();
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+function goBack() {
+  customRouterPush({ name: "procurementDamageReportList" });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/inbound/list.vue b/seller/src/views/procurement/inbound/list.vue
index da49f5f96..a31e07444 100644
--- a/seller/src/views/procurement/inbound/list.vue
+++ b/seller/src/views/procurement/inbound/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="80px">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="80px">
         <el-form-item label="入库单号">
           <el-input v-model="searchForm.inboundSn" placeholder="入库单号" clearable style="width: 200px" />
         </el-form-item>
@@ -48,62 +48,65 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { getProcurementInboundPage } from "@/api/procurement";
 import { formatMoney } from "../constants";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-inbound-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        inboundSn: "",
-        sort: "createTime",
-        order: "desc",
-      },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    resetSearch() {
-      this.searchForm.inboundSn = "";
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getProcurementInboundPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goCreate() {
-      this.$filters.customRouterPush({ name: "procurement-inbound-operation" });
-    },
-    goDetail(row) {
-      this.$filters.customRouterPush({
-        name: "procurement-inbound-operation",
-        query: { id: row.id, readonly: 1 },
-      });
-    },
-  },
-};
+defineOptions({ name: "procurement-inbound-list" });
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+  inboundSn: "",
+  sort: "createTime",
+  order: "desc",
+});
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  getDataList();
+});
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function resetSearch() {
+  searchForm.inboundSn = "";
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getProcurementInboundPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function goCreate() {
+  customRouterPush({ name: "procurement-inbound-operation" });
+}
+
+function goDetail(row) {
+  customRouterPush({
+    name: "procurement-inbound-operation",
+    query: { id: row.id, readonly: 1 },
+  });
+}
 </script>
diff --git a/seller/src/views/procurement/inbound/operation.vue b/seller/src/views/procurement/inbound/operation.vue
index bb3987d4b..35e5e425b 100644
--- a/seller/src/views/procurement/inbound/operation.vue
+++ b/seller/src/views/procurement/inbound/operation.vue
@@ -100,7 +100,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 import {
   getProcurementOrderPage,
@@ -110,153 +112,146 @@ import {
   getProcurementInboundItems,
 } from "@/api/procurement";
 import { procurementStatusText, formatMoney } from "../constants";
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-inbound-operation",
-  components: { uploadPicThumb },
-  data() {
-    return {
-      readonly: false,
-      submitLoading: false,
-      form: {
-        procurementOrderId: "",
-        certificateImages: [],
-      },
-      orderOptions: [],
-      items: [],
-      detail: {},
-      inboundItems: [],
-      certificateImageList: [],
-    };
-  },
-  computed: {
-    pageTitle() {
-      return this.readonly ? "入库单详情" : "新建入库单";
-    },
-    totalInboundQuantity() {
-      return (this.inboundItems || []).reduce(
-        (sum, item) => sum + (Number(item.inboundQuantity) || 0),
-        0
-      );
-    },
-  },
-  mounted() {
-    this.readonly = this.$route.query.readonly === "1";
-    if (this.$route.query.id) {
-      this.loadInboundDetail(this.$route.query.id);
-    } else {
-      this.loadPendingOrders();
-      if (this.$route.query.procurementOrderId) {
-        this.form.procurementOrderId = this.$route.query.procurementOrderId;
-        this.onOrderChange(this.$route.query.procurementOrderId);
-      }
+defineOptions({ name: "procurement-inbound-operation" });
+
+const route = useRoute();
+
+const readonly = ref(false);
+const submitLoading = ref(false);
+const form = reactive({
+  procurementOrderId: "",
+  certificateImages: [],
+});
+const orderOptions = ref([]);
+const items = ref([]);
+const detail = ref({});
+const inboundItems = ref([]);
+const certificateImageList = ref([]);
+
+const pageTitle = computed(() => (readonly.value ? "入库单详情" : "新建入库单"));
+const totalInboundQuantity = computed(() =>
+  (inboundItems.value || []).reduce(
+    (sum, item) => sum + (Number(item.inboundQuantity) || 0),
+    0
+  )
+);
+
+onMounted(() => {
+  readonly.value = route.query.readonly === "1";
+  if (route.query.id) {
+    loadInboundDetail(route.query.id);
+  } else {
+    loadPendingOrders();
+    if (route.query.procurementOrderId) {
+      form.procurementOrderId = route.query.procurementOrderId;
+      onOrderChange(route.query.procurementOrderId);
     }
-  },
-  methods: {
-    procurementStatusText,
-    formatMoney,
-    remainQty(row) {
-      return (row.quantity || 0) - (row.receivedQuantity || 0);
-    },
-    onInboundQtyBlur(row) {
-      const max = this.remainQty(row);
-      const val = parseInt(row.inboundQuantity, 10);
-      if (Number.isNaN(val) || val < 0) {
-        row.inboundQuantity = 0;
-      } else if (val > max) {
-        row.inboundQuantity = max;
-      } else {
-        row.inboundQuantity = val;
+  }
+});
+
+function remainQty(row) {
+  return (row.quantity || 0) - (row.receivedQuantity || 0);
+}
+function onInboundQtyBlur(row) {
+  const max = remainQty(row);
+  const val = parseInt(row.inboundQuantity, 10);
+  if (Number.isNaN(val) || val < 0) {
+    row.inboundQuantity = 0;
+  } else if (val > max) {
+    row.inboundQuantity = max;
+  } else {
+    row.inboundQuantity = val;
+  }
+}
+function loadPendingOrders() {
+  getProcurementOrderPage({
+    pageNumber: 1,
+    pageSize: 100,
+    status: "",
+  }).then((res) => {
+    if (res.success) {
+      orderOptions.value = (res.result.records || []).filter((o) =>
+        ["PENDING_INBOUND", "PARTIAL_INBOUND"].includes(o.status)
+      );
+    }
+  });
+}
+function onOrderChange(orderId) {
+  if (!orderId) {
+    items.value = [];
+    return;
+  }
+  getProcurementOrderDetail(orderId).then((res) => {
+    if (res.success && res.result) {
+      items.value = (res.result.items || [])
+        .filter((item) => remainQty(item) > 0)
+        .map((item) => ({
+          ...item,
+          procurementOrderItemId: item.id,
+          inboundQuantity: remainQty(item),
+        }));
+    }
+  });
+}
+function loadInboundDetail(id) {
+  getProcurementInboundDetail(id).then((res) => {
+    if (res.success) {
+      detail.value = res.result || {};
+      certificateImageList.value = parseCertificateImages(detail.value.certificateImages);
+    }
+  });
+  getProcurementInboundItems(id).then((res) => {
+    if (res.success) inboundItems.value = res.result || [];
+  });
+}
+function parseCertificateImages(val) {
+  if (!val) return [];
+  if (Array.isArray(val)) return val.filter(Boolean);
+  return String(val)
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
+}
+function handleSubmit() {
+  if (!form.procurementOrderId) {
+    Message.warning("请选择采购单");
+    return;
+  }
+  const validItems = items.value.filter((item) => item.inboundQuantity > 0);
+  if (!validItems.length) {
+    Message.warning("请填写本次入库数量");
+    return;
+  }
+  submitLoading.value = true;
+  createProcurementInbound({
+    procurementOrderId: form.procurementOrderId,
+    certificateImages: Array.isArray(form.certificateImages)
+      ? form.certificateImages.join(",")
+      : form.certificateImages || "",
+    items: validItems.map((item) => ({
+      procurementOrderItemId: item.procurementOrderItemId || item.id,
+      goodsId: item.goodsId,
+      skuId: item.skuId,
+      goodsName: item.goodsName,
+      inboundQuantity: item.inboundQuantity,
+    })),
+  })
+    .then((res) => {
+      if (res.success) {
+        Message.success("入库成功");
+        goBack();
       }
-    },
-    loadPendingOrders() {
-      getProcurementOrderPage({
-        pageNumber: 1,
-        pageSize: 100,
-        status: "",
-      }).then((res) => {
-        if (res.success) {
-          this.orderOptions = (res.result.records || []).filter((o) =>
-            ["PENDING_INBOUND", "PARTIAL_INBOUND"].includes(o.status)
-          );
-        }
-      });
-    },
-    onOrderChange(orderId) {
-      if (!orderId) {
-        this.items = [];
-        return;
-      }
-      getProcurementOrderDetail(orderId).then((res) => {
-        if (res.success && res.result) {
-          this.items = (res.result.items || [])
-            .filter((item) => this.remainQty(item) > 0)
-            .map((item) => ({
-              ...item,
-              procurementOrderItemId: item.id,
-              inboundQuantity: this.remainQty(item),
-            }));
-        }
-      });
-    },
-    loadInboundDetail(id) {
-      getProcurementInboundDetail(id).then((res) => {
-        if (res.success) {
-          this.detail = res.result || {};
-          this.certificateImageList = this.parseCertificateImages(this.detail.certificateImages);
-        }
-      });
-      getProcurementInboundItems(id).then((res) => {
-        if (res.success) this.inboundItems = res.result || [];
-      });
-    },
-    parseCertificateImages(val) {
-      if (!val) return [];
-      if (Array.isArray(val)) return val.filter(Boolean);
-      return String(val)
-        .split(",")
-        .map((s) => s.trim())
-        .filter(Boolean);
-    },
-    handleSubmit() {
-      if (!this.form.procurementOrderId) {
-        this.$Message.warning("请选择采购单");
-        return;
-      }
-      const validItems = this.items.filter((item) => item.inboundQuantity > 0);
-      if (!validItems.length) {
-        this.$Message.warning("请填写本次入库数量");
-        return;
-      }
-      this.submitLoading = true;
-      createProcurementInbound({
-        procurementOrderId: this.form.procurementOrderId,
-        certificateImages: Array.isArray(this.form.certificateImages)
-          ? this.form.certificateImages.join(",")
-          : this.form.certificateImages || "",
-        items: validItems.map((item) => ({
-          procurementOrderItemId: item.procurementOrderItemId || item.id,
-          goodsId: item.goodsId,
-          skuId: item.skuId,
-          goodsName: item.goodsName,
-          inboundQuantity: item.inboundQuantity,
-        })),
-      })
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("入库成功");
-            this.goBack();
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-    goBack() {
-      this.$filters.customRouterPush({ name: "procurementInboundList" });
-    },
-  },
-};
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+function goBack() {
+  customRouterPush({ name: "procurementInboundList" });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/inventory-count/detail.vue b/seller/src/views/procurement/inventory-count/detail.vue
index ce52c3a23..f8c273db6 100644
--- a/seller/src/views/procurement/inventory-count/detail.vue
+++ b/seller/src/views/procurement/inventory-count/detail.vue
@@ -68,7 +68,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   getInventoryCountDetail,
   getInventoryCountItemsPage,
@@ -76,83 +78,80 @@ import {
 } from "@/api/procurement";
 import { MARKET_ENABLE } from "../constants";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-inventory-count-detail",
-  data() {
-    return {
-      MARKET_ENABLE,
-      loading: false,
-      exporting: false,
-      detail: {},
-      data: [],
-      total: 0,
-      sn: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        goodsName: "",
-      },
-    };
-  },
-  mounted() {
-    this.sn = this.$route.query.sn || "";
-    const id = this.$route.query.id;
-    if (id) {
-      getInventoryCountDetail(id).then((res) => {
-        if (res.success) {
-          this.detail = res.result || {};
-          this.sn = this.detail.sn || this.sn;
-        }
-      });
-      this.getDataList();
-    }
-  },
-  methods: {
-    getDataList() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.loading = true;
-      getInventoryCountItemsPage(id, this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        goodsName: "",
-      };
-      this.getDataList();
-    },
-    handleExport() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.exporting = true;
-      exportInventoryCountItems(id)
-        .then((blob) => {
-          downloadBlob(blob, `盘点单_${this.sn || id}.xlsx`);
-        })
-        .finally(() => {
-          this.exporting = false;
-        });
-    },
-    goBack() {
-      this.$filters.customRouterPush({ name: "procurementInventoryCountList" });
-    },
-  },
-};
+defineOptions({ name: "procurement-inventory-count-detail" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const exporting = ref(false);
+const detail = ref({});
+const data = ref([]);
+const total = ref(0);
+const sn = ref("");
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  goodsName: "",
+});
+
+onMounted(() => {
+  sn.value = route.query.sn || "";
+  const id = route.query.id;
+  if (id) {
+    getInventoryCountDetail(id).then((res) => {
+      if (res.success) {
+        detail.value = res.result || {};
+        sn.value = detail.value.sn || sn.value;
+      }
+    });
+    getDataList();
+  }
+});
+
+function getDataList() {
+  const id = route.query.id;
+  if (!id) return;
+  loading.value = true;
+  getInventoryCountItemsPage(id, searchForm.value)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    goodsName: "",
+  };
+  getDataList();
+}
+function handleExport() {
+  const id = route.query.id;
+  if (!id) return;
+  exporting.value = true;
+  exportInventoryCountItems(id)
+    .then((blob) => {
+      downloadBlob(blob, `盘点单_${sn.value || id}.xlsx`);
+    })
+    .finally(() => {
+      exporting.value = false;
+    });
+}
+function goBack() {
+  customRouterPush({ name: "procurementInventoryCountList" });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/inventory-count/list.vue b/seller/src/views/procurement/inventory-count/list.vue
index 5166bcaf8..42995ef88 100644
--- a/seller/src/views/procurement/inventory-count/list.vue
+++ b/seller/src/views/procurement/inventory-count/list.vue
@@ -33,67 +33,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import { createInventoryCount, getInventoryCountPage } from "@/api/procurement";
+import { Message, Modal } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-inventory-count-list",
-  data() {
-    return {
-      loading: false,
-      creating: false,
-      data: [],
-      total: 0,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    getDataList() {
-      this.loading = true;
-      getInventoryCountPage(this.searchForm)
+defineOptions({ name: "procurement-inventory-count-list" });
+
+const loading = ref(false);
+const creating = ref(false);
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+});
+
+onMounted(() => {
+  getDataList();
+});
+
+function getDataList() {
+  loading.value = true;
+  getInventoryCountPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function handleCreate() {
+  Modal.confirm({
+    title: "生成盘点单",
+    content: "将快照当前店铺全部 SKU 库存，是否继续？",
+    onOk: () => {
+      creating.value = true;
+      createInventoryCount()
         .then((res) => {
           if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
+            Message.success("盘点单已生成");
+            getDataList();
           }
         })
         .finally(() => {
-          this.loading = false;
+          creating.value = false;
         });
     },
-    handleCreate() {
-      this.$Modal.confirm({
-        title: "生成盘点单",
-        content: "将快照当前店铺全部 SKU 库存，是否继续？",
-        onOk: () => {
-          this.creating = true;
-          createInventoryCount()
-            .then((res) => {
-              if (res.success) {
-                this.$Message.success("盘点单已生成");
-                this.getDataList();
-              }
-            })
-            .finally(() => {
-              this.creating = false;
-            });
-        },
-      });
-    },
-    goDetail(row) {
-      this.$filters.customRouterPush({
-        name: "procurement-inventory-count-detail",
-        query: { id: row.id, sn: row.sn },
-      });
-    },
-  },
-};
+  });
+}
+
+function goDetail(row) {
+  customRouterPush({
+    name: "procurement-inventory-count-detail",
+    query: { id: row.id, sn: row.sn },
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/purchase-order/list.vue b/seller/src/views/procurement/purchase-order/list.vue
index 0bc59eb6e..a86294405 100644
--- a/seller/src/views/procurement/purchase-order/list.vue
+++ b/seller/src/views/procurement/purchase-order/list.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="80px" class="search-form">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="80px" class="search-form">
         <el-form-item label="单据编号">
           <el-input v-model="searchForm.orderSn" placeholder="采购单号" clearable style="width: 200px" />
         </el-form-item>
@@ -94,7 +94,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   getProcurementOrderPage,
   getProcurementOrderStatusCount,
@@ -108,187 +110,199 @@ import {
   procurementStatusTag,
   formatMoney,
 } from "../constants";
+import { customRouterPush } from "@/utils/filters";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "procurement-purchase-order-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      createRange: [],
-      currentStatus: "ALL",
-      statusCountData: {},
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        orderSn: "",
-        goodsName: "",
-        status: "",
-        sort: "createTime",
-        order: "desc",
-      },
-    };
-  },
-  computed: {
-    statusTabs() {
-      const tabs = [{ title: "全部", value: "ALL" }];
-      Object.keys(PROCUREMENT_STATUS).forEach((key) => {
-        const count = this.statusCountData[key];
-        const label = PROCUREMENT_STATUS[key];
-        tabs.push({
-          title: count ? `${label}（${count}）` : label,
-          value: key,
-        });
-      });
-      return tabs;
-    },
-  },
-  mounted() {
-    const status = this.$route.query.status;
-    if (status) {
-      this.currentStatus = status;
-      this.searchForm.status = status;
+defineOptions({ name: "procurement-purchase-order-list" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const data = ref([]);
+const total = ref(0);
+const createRange = ref([]);
+const currentStatus = ref("ALL");
+const statusCountData = ref({});
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  orderSn: "",
+  goodsName: "",
+  status: "",
+  sort: "createTime",
+  order: "desc",
+});
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+const statusTabs = computed(() => {
+  const tabs = [{ title: "全部", value: "ALL" }];
+  Object.keys(PROCUREMENT_STATUS).forEach((key) => {
+    const count = statusCountData.value[key];
+    const label = PROCUREMENT_STATUS[key];
+    tabs.push({
+      title: count ? `${label}（${count}）` : label,
+      value: key,
+    });
+  });
+  return tabs;
+});
+
+onMounted(() => {
+  const status = route.query.status;
+  if (status) {
+    currentStatus.value = status;
+    searchForm.value.status = status;
+  }
+  init();
+});
+
+function init() {
+  getStatusCount();
+  getDataList();
+}
+
+function buildSearchParams(includeStatus = true) {
+  const params = { ...searchForm.value };
+  if (!includeStatus) {
+    delete params.status;
+  }
+  if (createRange.value && createRange.value.length === 2) {
+    params.startCreateTime = createRange.value[0];
+    params.endCreateTime = createRange.value[1];
+  }
+  return params;
+}
+
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getStatusCount();
+  getDataList();
+}
+
+function resetSearch() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 10,
+    orderSn: "",
+    goodsName: "",
+    status: "",
+    sort: "createTime",
+    order: "desc",
+  };
+  createRange.value = [];
+  currentStatus.value = "ALL";
+  getStatusCount();
+  getDataList();
+}
+
+function onStatusTabClick(tab) {
+  statusClick(tab.paneName);
+}
+
+function statusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined) {
+    searchForm.value.status = "";
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.value.status = name;
+    currentStatus.value = name;
+  }
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+
+function getStatusCount() {
+  getProcurementOrderStatusCount(buildSearchParams(false)).then((res) => {
+    if (res.success) {
+      statusCountData.value = res.result || {};
     }
-    this.init();
-  },
-  methods: {
-    procurementStatusText,
-    procurementStatusTag,
-    formatMoney,
-    init() {
-      this.getStatusCount();
-      this.getDataList();
-    },
-    buildSearchParams(includeStatus = true) {
-      const params = { ...this.searchForm };
-      if (!includeStatus) {
-        delete params.status;
+  });
+}
+
+function getDataList() {
+  loading.value = true;
+  getProcurementOrderPage(buildSearchParams(true))
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      if (this.createRange && this.createRange.length === 2) {
-        params.startCreateTime = this.createRange[0];
-        params.endCreateTime = this.createRange[1];
-      }
-      return params;
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getStatusCount();
-      this.getDataList();
-    },
-    resetSearch() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 10,
-        orderSn: "",
-        goodsName: "",
-        status: "",
-        sort: "createTime",
-        order: "desc",
-      };
-      this.createRange = [];
-      this.currentStatus = "ALL";
-      this.getStatusCount();
-      this.getDataList();
-    },
-    onStatusTabClick(tab) {
-      this.statusClick(tab.paneName);
-    },
-    statusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined) {
-        this.searchForm.status = "";
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.status = name;
-        this.currentStatus = name;
-      }
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getStatusCount() {
-      getProcurementOrderStatusCount(this.buildSearchParams(false)).then((res) => {
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function refreshList() {
+  getStatusCount();
+  getDataList();
+}
+
+function goCreate() {
+  customRouterPush({ name: "procurement-purchase-order-operation" });
+}
+
+function goDetail(row) {
+  customRouterPush({
+    name: "procurement-purchase-order-operation",
+    query: { id: row.id, readonly: 1 },
+  });
+}
+
+function goInbound(row) {
+  customRouterPush({
+    name: "procurement-inbound-operation",
+    query: { procurementOrderId: row.id },
+  });
+}
+
+function handleSubmit(row) {
+  Modal.confirm({
+    title: "确认提交",
+    content: "提交后采购单将进入审核流程，是否继续？",
+    onOk: () => {
+      submitProcurementOrder(row.id).then((res) => {
         if (res.success) {
-          this.statusCountData = res.result || {};
+          Message.success("提交成功");
+          refreshList();
         }
       });
     },
-    getDataList() {
-      this.loading = true;
-      getProcurementOrderPage(this.buildSearchParams(true))
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    refreshList() {
-      this.getStatusCount();
-      this.getDataList();
-    },
-    goCreate() {
-      this.$filters.customRouterPush({ name: "procurement-purchase-order-operation" });
-    },
-    goDetail(row) {
-      this.$filters.customRouterPush({
-        name: "procurement-purchase-order-operation",
-        query: { id: row.id, readonly: 1 },
+  });
+}
+
+function handleAudit(row, pass) {
+  const title = pass ? "审核通过" : "审核驳回";
+  Modal.confirm({
+    title,
+    content: pass ? "确认通过该采购单？" : "确认驳回该采购单？",
+    onOk: () => {
+      auditProcurementOrder(row.id, { pass, remark: "" }).then((res) => {
+        if (res.success) {
+          Message.success("操作成功");
+          refreshList();
+        }
       });
     },
-    goInbound(row) {
-      this.$filters.customRouterPush({
-        name: "procurement-inbound-operation",
-        query: { procurementOrderId: row.id },
+  });
+}
+
+function handleClose(row) {
+  Modal.confirm({
+    title: "关闭采购单",
+    content: "关闭后不可继续入库，是否继续？",
+    onOk: () => {
+      closeProcurementOrder(row.id).then((res) => {
+        if (res.success) {
+          Message.success("已关闭");
+          refreshList();
+        }
       });
     },
-    handleSubmit(row) {
-      this.$Modal.confirm({
-        title: "确认提交",
-        content: "提交后采购单将进入审核流程，是否继续？",
-        onOk: () => {
-          submitProcurementOrder(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("提交成功");
-              this.refreshList();
-            }
-          });
-        },
-      });
-    },
-    handleAudit(row, pass) {
-      const title = pass ? "审核通过" : "审核驳回";
-      this.$Modal.confirm({
-        title,
-        content: pass ? "确认通过该采购单？" : "确认驳回该采购单？",
-        onOk: () => {
-          auditProcurementOrder(row.id, { pass, remark: "" }).then((res) => {
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.refreshList();
-            }
-          });
-        },
-      });
-    },
-    handleClose(row) {
-      this.$Modal.confirm({
-        title: "关闭采购单",
-        content: "关闭后不可继续入库，是否继续？",
-        onOk: () => {
-          closeProcurementOrder(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("已关闭");
-              this.refreshList();
-            }
-          });
-        },
-      });
-    },
-  },
-};
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/procurement/purchase-order/operation.vue b/seller/src/views/procurement/purchase-order/operation.vue
index a578e2430..fb2b278d1 100644
--- a/seller/src/views/procurement/purchase-order/operation.vue
+++ b/seller/src/views/procurement/purchase-order/operation.vue
@@ -122,11 +122,13 @@
       </div>
     </el-card>
 
-    <liliDialog ref="liliDialog" @selectedGoodsData="onGoodsSelected" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="onGoodsSelected" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import liliDialog from "@/views/lili-dialog";
 import {
   createProcurementOrder,
@@ -140,182 +142,179 @@ import {
   procurementStatusTag,
   formatMoney,
 } from "../constants";
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "procurement-purchase-order-operation",
-  components: { liliDialog },
-  data() {
-    return {
-      form: { remark: "", stockReasonId: "" },
-      items: [],
-      orderDetail: {},
-      reasonOptions: [],
-      submitLoading: false,
-      readonly: false,
-    };
-  },
-  computed: {
-    pageTitle() {
-      if (this.readonly) return "采购单详情";
-      return this.$route.query.id ? "编辑采购单" : "新建采购单";
-    },
-    totalQuantity() {
-      return this.items.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0);
-    },
-    totalAmount() {
-      return this.items.reduce((sum, item) => sum + this.calcSubtotal(item), 0);
-    },
-  },
-  mounted() {
-    this.loadReasons();
-    if (this.$route.query.id) {
-      this.readonly = true;
-      this.loadDetail(this.$route.query.id);
+defineOptions({ name: "procurement-purchase-order-operation" });
+
+const route = useRoute();
+
+const form = reactive({ remark: "", stockReasonId: "" });
+const items = ref([]);
+const orderDetail = ref({});
+const reasonOptions = ref([]);
+const submitLoading = ref(false);
+const readonly = ref(false);
+
+// liliDialogRef：模板 ref 改名避免与 import 的组件同名互相覆盖
+const liliDialogRef = ref(null);
+
+const pageTitle = computed(() => {
+  if (readonly.value) return "采购单详情";
+  return route.query.id ? "编辑采购单" : "新建采购单";
+});
+const totalQuantity = computed(() =>
+  items.value.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0)
+);
+const totalAmount = computed(() =>
+  items.value.reduce((sum, item) => sum + calcSubtotal(item), 0)
+);
+
+onMounted(() => {
+  loadReasons();
+  if (route.query.id) {
+    readonly.value = true;
+    loadDetail(route.query.id);
+  }
+});
+
+function loadReasons() {
+  getStockReasonList({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
+    if (res.success) {
+      reasonOptions.value = res.result.records || [];
     }
-  },
-  methods: {
-    procurementStatusText,
-    procurementStatusTag,
-    formatMoney,
-    loadReasons() {
-      getStockReasonList({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
-        if (res.success) {
-          this.reasonOptions = res.result.records || [];
-        }
-      });
-    },
-    calcSubtotal(row) {
-      return (Number(row.unitPriceWithTax) || 0) * (Number(row.quantity) || 0);
-    },
-    recalcRow() {},
-    onQuantityBlur(row) {
-      const val = parseInt(row.quantity, 10);
-      row.quantity = Number.isNaN(val) || val < 1 ? 1 : val;
-      this.recalcRow(row);
-    },
-    onTaxRateBlur(row) {
-      const val = parseInt(row.taxRate, 10);
-      if (Number.isNaN(val) || val < 0) {
-        row.taxRate = 0;
-      } else if (val > 100) {
-        row.taxRate = 100;
-      } else {
-        row.taxRate = val;
-      }
-      this.recalcRow(row);
-    },
-    onDecimalBlur(row, field) {
-      const val = parseFloat(row[field]);
-      row[field] = Number.isNaN(val) || val < 0 ? 0 : Math.round(val * 100) / 100;
-      this.recalcRow(row);
-    },
-    loadDetail(id) {
-      getProcurementOrderDetail(id).then((res) => {
-        if (res.success && res.result) {
-          this.orderDetail = res.result;
-          this.form.remark = res.result.remark || "";
-          this.form.stockReasonId = res.result.stockReasonId || "";
-          this.items = (res.result.items || []).map((item) => ({ ...item }));
-        }
-      });
-    },
-    openSkuPicker() {
-      this.$refs.liliDialog.goodsData = this.items.map((item) => ({
-        id: item.skuId,
-        goodsId: item.goodsId,
-        goodsName: item.goodsName,
-        price: item.retailPrice,
-      }));
-      this.$refs.liliDialog.open("goods");
-    },
-    onGoodsSelected(selected) {
-      const map = new Map(this.items.map((item) => [item.skuId, item]));
-      this.items = selected.map((sku) => {
-        const existed = map.get(sku.id);
-        if (existed) return existed;
-        return {
-          goodsId: sku.goodsId,
-          skuId: sku.id,
-          goodsName: sku.goodsName,
-          retailPrice: sku.price || 0,
-          quantity: 1,
-          taxRate: 0,
-          unitPriceWithTax: sku.cost || sku.price || 0,
-        };
-      });
-    },
-    removeItem(index) {
-      this.items.splice(index, 1);
-    },
-    validateItems() {
-      if (!this.form.stockReasonId) {
-        this.$Message.warning("请选择出入库原因");
-        return false;
-      }
-      if (!this.items.length) {
-        this.$Message.warning("请至少添加一个商品");
-        return false;
-      }
-      for (const item of this.items) {
-        if (!item.quantity || item.quantity < 1) {
-          this.$Message.warning("采购数量必须大于0");
-          return false;
-        }
-        if (item.unitPriceWithTax == null || item.unitPriceWithTax < 0) {
-          this.$Message.warning("请填写含税单价");
-          return false;
-        }
-      }
-      return true;
-    },
-    handleSave(andSubmit) {
-      if (!this.validateItems()) return;
-      this.submitLoading = true;
-      const payload = {
-        remark: this.form.remark,
-        stockReasonId: this.form.stockReasonId,
-        items: this.items.map((item) => ({
-          goodsId: item.goodsId,
-          skuId: item.skuId,
-          goodsName: item.goodsName,
-          retailPrice: item.retailPrice,
-          quantity: item.quantity,
-          taxRate: item.taxRate || 0,
-          unitPriceWithTax: item.unitPriceWithTax,
-        })),
-      };
-      createProcurementOrder(payload)
-        .then((res) => {
-          if (!res.success) return;
-          const orderId = res.result.id;
-          if (andSubmit) {
-            return submitProcurementOrder(orderId).then((subRes) => {
-              if (subRes.success) {
-                this.$Message.success("保存并提交成功");
-                this.goBack();
-              }
-            });
+  });
+}
+function calcSubtotal(row) {
+  return (Number(row.unitPriceWithTax) || 0) * (Number(row.quantity) || 0);
+}
+function recalcRow() {}
+function onQuantityBlur(row) {
+  const val = parseInt(row.quantity, 10);
+  row.quantity = Number.isNaN(val) || val < 1 ? 1 : val;
+  recalcRow(row);
+}
+function onTaxRateBlur(row) {
+  const val = parseInt(row.taxRate, 10);
+  if (Number.isNaN(val) || val < 0) {
+    row.taxRate = 0;
+  } else if (val > 100) {
+    row.taxRate = 100;
+  } else {
+    row.taxRate = val;
+  }
+  recalcRow(row);
+}
+function onDecimalBlur(row, field) {
+  const val = parseFloat(row[field]);
+  row[field] = Number.isNaN(val) || val < 0 ? 0 : Math.round(val * 100) / 100;
+  recalcRow(row);
+}
+function loadDetail(id) {
+  getProcurementOrderDetail(id).then((res) => {
+    if (res.success && res.result) {
+      orderDetail.value = res.result;
+      form.remark = res.result.remark || "";
+      form.stockReasonId = res.result.stockReasonId || "";
+      items.value = (res.result.items || []).map((item) => ({ ...item }));
+    }
+  });
+}
+function openSkuPicker() {
+  liliDialogRef.value.goodsData = items.value.map((item) => ({
+    id: item.skuId,
+    goodsId: item.goodsId,
+    goodsName: item.goodsName,
+    price: item.retailPrice,
+  }));
+  liliDialogRef.value.open("goods");
+}
+function onGoodsSelected(selected) {
+  const map = new Map(items.value.map((item) => [item.skuId, item]));
+  items.value = selected.map((sku) => {
+    const existed = map.get(sku.id);
+    if (existed) return existed;
+    return {
+      goodsId: sku.goodsId,
+      skuId: sku.id,
+      goodsName: sku.goodsName,
+      retailPrice: sku.price || 0,
+      quantity: 1,
+      taxRate: 0,
+      unitPriceWithTax: sku.cost || sku.price || 0,
+    };
+  });
+}
+function removeItem(index) {
+  items.value.splice(index, 1);
+}
+function validateItems() {
+  if (!form.stockReasonId) {
+    Message.warning("请选择出入库原因");
+    return false;
+  }
+  if (!items.value.length) {
+    Message.warning("请至少添加一个商品");
+    return false;
+  }
+  for (const item of items.value) {
+    if (!item.quantity || item.quantity < 1) {
+      Message.warning("采购数量必须大于0");
+      return false;
+    }
+    if (item.unitPriceWithTax == null || item.unitPriceWithTax < 0) {
+      Message.warning("请填写含税单价");
+      return false;
+    }
+  }
+  return true;
+}
+function handleSave(andSubmit) {
+  if (!validateItems()) return;
+  submitLoading.value = true;
+  const payload = {
+    remark: form.remark,
+    stockReasonId: form.stockReasonId,
+    items: items.value.map((item) => ({
+      goodsId: item.goodsId,
+      skuId: item.skuId,
+      goodsName: item.goodsName,
+      retailPrice: item.retailPrice,
+      quantity: item.quantity,
+      taxRate: item.taxRate || 0,
+      unitPriceWithTax: item.unitPriceWithTax,
+    })),
+  };
+  createProcurementOrder(payload)
+    .then((res) => {
+      if (!res.success) return;
+      const orderId = res.result.id;
+      if (andSubmit) {
+        return submitProcurementOrder(orderId).then((subRes) => {
+          if (subRes.success) {
+            Message.success("保存并提交成功");
+            goBack();
           }
-          this.$Message.success("保存成功");
-          this.goBack();
-        })
-        .finally(() => {
-          this.submitLoading = false;
         });
-    },
-    handleAudit(pass) {
-      auditProcurementOrder(this.orderDetail.id, { pass, remark: "" }).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.goBack();
-        }
-      });
-    },
-    goBack() {
-      this.$filters.customRouterPush({ name: "procurementPurchaseOrderList" });
-    },
-  },
-};
+      }
+      Message.success("保存成功");
+      goBack();
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+function handleAudit(pass) {
+  auditProcurementOrder(orderDetail.value.id, { pass, remark: "" }).then((res) => {
+    if (res.success) {
+      Message.success("操作成功");
+      goBack();
+    }
+  });
+}
+function goBack() {
+  customRouterPush({ name: "procurementPurchaseOrderList" });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/coupon/coupon-publish.vue b/seller/src/views/promotion/coupon/coupon-publish.vue
index ed207efb0..ec0252af6 100644
--- a/seller/src/views/promotion/coupon/coupon-publish.vue
+++ b/seller/src/views/promotion/coupon/coupon-publish.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
@@ -232,350 +232,358 @@
         </div>
       </el-form>
     </el-card>
-    <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
+    <sku-select ref="skuSelectRef" @selectedGoodsData="selectedGoodsData"></sku-select>
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { saveShopCoupon, getShopCoupon, editShopCoupon } from "@/api/promotion";
 import { getGoodsCategoryAll } from "@/api/goods";
 import { regular } from "@/utils";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
+import { useAppStore } from "@/stores/app";
 import skuSelect from "@/views/lili-dialog";
 
-export default {
-  name: "add-coupon",
-  components: {
-    skuSelect,
-  },
-  watch: {
-    "form.getType": {
-      handler(val) {
-        if (val == "FREE") {
-          this.rangeTimeType = 1;
-        } else {
-          this.rangeTimeType = 0;
-        }
-        if (this.rangeTimeType == 0) {
-          delete this.formRule.rangeTime;
-        }
-      },
-      deep: true,
-    },
-    $route(e) {
-      this.id = e.query.id;
-      if (this.id) {
-        this.getCoupon();
-      } else {
-        this.$refs.form.resetFields();
-      }
-    },
-  },
-  data() {
-    const checkPrice = (rule, value, callback) => {
-      if (!value && value !== 0) {
-        return callback(new Error("面额不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("面额设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    const checkWeight = (rule, value, callback) => {
-      if (!value && typeof value !== "number") {
-        callback(new Error("消费门槛不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("消费门槛设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      disabled: this.$route.query.onlyView,
-      rangeTimeType: 1,
-      modalType: 0,
-      form: {
-        storeCommission: 0,
-        publishNum: 0,
-        scopeType: "ALL",
-        couponLimitNum: 1,
-        couponType: "PRICE",
-        couponName: "",
-        promotionName: "",
-        getType: "FREE",
-        promotionGoodsList: [],
-        scopeIdGoods: [],
-        rangeDayType: "",
-        effectiveDays: 1,
-      },
-      id: this.$route.query.id,
-      submitLoading: false,
-      selectedGoods: [],
-      goodsCategoryList: [],
-      formRule: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        couponName: [{ required: true, message: "优惠券名称不能为空" }],
-        price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
-        rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
-        consumeThreshold: [
-          { required: true, message: "请输入消费门槛" },
-          { validator: checkWeight },
-        ],
-        couponDiscount: [
-          { required: true, message: "请输入折扣" },
-          {
-            pattern: regular.discount,
-            message: "请输入0-10的数字,可有一位小数",
-          },
-        ],
-        storeCommission: [
-          { required: true, message: "请输入店铺承担比例" },
-          { pattern: regular.rate, message: "请输入0-100的正整数" },
-        ],
-        publishNum: [
-          { required: true, message: "请输入发放数量" },
-          { pattern: regular.Integer, message: "请输入正整数" },
-        ],
-        couponLimitNum: [
-          { required: true, message: "领取限制不能为空" },
-          { pattern: regular.Integer, message: "请输入正整数" },
-        ],
-        description: [{ required: true, message: "请输入范围描述" }],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  async mounted() {
-    await this.getCagetoryList();
-    if (this.id) {
-      this.getCoupon();
-      this.modalType = 1;
-    }
-  },
-  methods: {
-    getCoupon() {
-      getShopCoupon(this.id).then((res) => {
-        let data = res.result;
-        if (!data.promotionGoodsList) data.promotionGoodsList = [];
-        this.rangeTimeType = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
-        if (data.scopeType == "PORTION_GOODS_CATEGORY") {
-          let prevCascader = data.scopeId.split(",");
-          function next(params, prev) {
-            for (let i = 0; i < params.length; i++) {
-              const item = params[i];
-              if (item.children) {
-                next(item.children, [...prev, item]);
-              } else {
-                if (prevCascader.includes(item.id)) {
-                  prevCascader = prevCascader.map((key) => {
-                    if (key === item.id) {
-                      let result = prev.map((item) => item.id);
-                      return [...result, item.id];
-                    } else {
-                      return key;
-                    }
-                  });
-                } else {
-                  i === params.length - 1 && (prev = []);
-                }
-              }
-            }
-          }
+defineOptions({ name: "add-coupon" });
 
-          next(this.goodsCategoryList, []);
-          data.scopeIdGoods = prevCascader;
-        }
-        data.rangeTime = [];
-        if (data.startTime && data.endTime) {
-          data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
-        }
-        this.form = data;
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
 
-          if (this.rangeTimeType == 1) {
-            params.rangeDayType = "FIXEDTIME";
-            const rangeTime = this.form.rangeTime;
-            const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
-            const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
-            params.startTime = this.$filters.unixToDate(start.getTime() / 1000);
-            params.endTime = this.$filters.unixToDate(end.getTime() / 1000);
-            delete params.effectiveDays;
-          } else {
-            params.rangeDayType = "DYNAMICTIME";
-            delete params.rangeTime;
-          }
+const formRef = ref(null);
+const skuSelectRef = ref(null);
 
-          let scopeId = [];
+const checkPrice = (rule, value, callback) => {
+  if (!value && value !== 0) {
+    return callback(new Error("面额不能为空"));
+  } else if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("面额设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+const checkWeight = (rule, value, callback) => {
+  if (!value && typeof value !== "number") {
+    callback(new Error("消费门槛不能为空"));
+  } else if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("消费门槛设置超过上限值"));
+  } else {
+    callback();
+  }
+};
 
-          if (
-            params.scopeType == "PORTION_GOODS" &&
-            (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
-          ) {
-            this.$Modal.warning({ title: "提示", content: "请选择指定商品" });
-            return;
-          }
-
-          if (
-            params.scopeType == "PORTION_GOODS_CATEGORY" &&
-            (!params.scopeIdGoods || params.scopeIdGoods.length == 0)
-          ) {
-            this.$Modal.warning({ title: "提示", content: "请选择商品分类" });
-            return;
-          }
-
-          if (params.scopeType == "PORTION_GOODS") {
-            params.promotionGoodsList.forEach((item) => {
-              scopeId.push(item.skuId);
-            });
-            params.scopeId = scopeId.toString();
-          } else if (params.scopeType == "ALL") {
-            delete params.promotionGoodsList;
-          } else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
-            scopeId = this.filterCategoryId(params.scopeIdGoods, []);
-            params.scopeId = scopeId.toString();
-            delete params.promotionGoodsList;
-          }
-          delete params.scopeIdGoods;
-
-          this.submitLoading = true;
-          if (this.modalType === 0) {
-            delete params.id;
-
-            saveShopCoupon(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("优惠券发送成功");
-                this.closeCurrentPage();
-              }
-            });
-          } else {
-            delete params.consumeLimit;
-            delete params.updateTime;
-
-            editShopCoupon(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("优惠券修改成功");
-                this.closeCurrentPage();
-              }
-            });
-          }
-        }
-      });
-    },
-    closeCurrentPage() {
-      this.$store.commit("removeTag", "add-coupon");
-      localStorage.pageOpenedList = JSON.stringify(this.$store.state.app.pageOpenedList);
-      this.$router.go(-1);
-    },
-    openSkuList() {
-      this.$refs.skuSelect.open("goods");
-      let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.skuSelect.goodsData = data;
-    },
-    changeSelect(e) {
-      this.selectedGoods = e;
-    },
-    delSelectGoods() {
-      if (this.selectedGoods.length <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选商品吗?",
-        onOk: () => {
-          let ids = [];
-          this.selectedGoods.forEach(function (e) {
-            ids.push(e.skuId);
-          });
-
-          this.form.promotionGoodsList = this.form.promotionGoodsList.filter((item) => {
-            return !ids.includes(item.skuId);
-          });
-        },
-      });
-    },
-    delGoods(index) {
-      this.form.promotionGoodsList.splice(index, 1);
-    },
-    selectedGoodsData(item) {
-      let list = [];
-      item.forEach((e) => {
-        list.push({
-          goodsName: e.goodsName,
-          price: e.price,
-          originalPrice: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          storeName: e.storeName,
-          skuId: e.id,
-          categoryPath: e.categoryPath,
-          thumbnail: e.small,
-          goodsType: e.goodsType,
-          goodsId: e.goodsId,
-          originPrice: e.price,
-        });
-      });
-      this.form.promotionGoodsList = list;
-    },
-    async getCagetoryList() {
-      let data = await getGoodsCategoryAll();
-      this.goodsCategoryList = data.result;
-      this.goodsCategoryList = this.goodsCategoryList.map((item) => {
-        if (item.children) {
-          item.children = item.children.map((child) => {
-            if (child.children) {
-              child.children = child.children.map((son) => {
-                return {
-                  value: son.id,
-                  label: son.name,
-                };
-              });
-              return {
-                value: child.id,
-                label: child.name,
-                children: child.children,
-              };
-            } else {
-              return {
-                value: child.id,
-                label: child.name,
-              };
-            }
-          });
-        }
-        return { value: item.id, label: item.name, children: item.children };
-      });
-    },
-    filterCategoryId(list, idArr) {
-      list.forEach((e) => {
-        if (e instanceof Array) {
-          this.filterCategoryId(e, idArr);
-        } else {
-          if (!idArr.includes(e)) idArr.push(e);
-        }
-      });
-      return idArr;
+const disabled = ref(route.query.onlyView);
+const rangeTimeType = ref(1);
+const modalType = ref(0);
+const form = ref({
+  storeCommission: 0,
+  publishNum: 0,
+  scopeType: "ALL",
+  couponLimitNum: 1,
+  couponType: "PRICE",
+  couponName: "",
+  promotionName: "",
+  getType: "FREE",
+  promotionGoodsList: [],
+  scopeIdGoods: [],
+  rangeDayType: "",
+  effectiveDays: 1,
+});
+const id = ref(route.query.id);
+const submitLoading = ref(false);
+const selectedGoods = ref([]);
+const goodsCategoryList = ref([]);
+const formRule = reactive({
+  promotionName: [{ required: true, message: "活动名称不能为空" }],
+  couponName: [{ required: true, message: "优惠券名称不能为空" }],
+  price: [{ required: true, message: "请输入面额" }, { validator: checkPrice }],
+  rangeTime: [{ required: true, message: "请选择优惠券有效期" }],
+  consumeThreshold: [
+    { required: true, message: "请输入消费门槛" },
+    { validator: checkWeight },
+  ],
+  couponDiscount: [
+    { required: true, message: "请输入折扣" },
+    {
+      pattern: regular.discount,
+      message: "请输入0-10的数字,可有一位小数",
     },
+  ],
+  storeCommission: [
+    { required: true, message: "请输入店铺承担比例" },
+    { pattern: regular.rate, message: "请输入0-100的正整数" },
+  ],
+  publishNum: [
+    { required: true, message: "请输入发放数量" },
+    { pattern: regular.Integer, message: "请输入正整数" },
+  ],
+  couponLimitNum: [
+    { required: true, message: "领取限制不能为空" },
+    { pattern: regular.Integer, message: "请输入正整数" },
+  ],
+  description: [{ required: true, message: "请输入范围描述" }],
+});
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+watch(
+  () => form.value.getType,
+  (val) => {
+    if (val == "FREE") {
+      rangeTimeType.value = 1;
+    } else {
+      rangeTimeType.value = 0;
+    }
+    if (rangeTimeType.value == 0) {
+      delete formRule.rangeTime;
+    }
+  },
+  { deep: true }
+);
+watch(
+  () => route.query,
+  (e) => {
+    id.value = e.id;
+    if (id.value) {
+      getCoupon();
+    } else {
+      formRef.value.resetFields();
+    }
+  }
+);
+
+onMounted(async () => {
+  await getCagetoryList();
+  if (id.value) {
+    getCoupon();
+    modalType.value = 1;
+  }
+});
+
+function getCoupon() {
+  getShopCoupon(id.value).then((res) => {
+    let data = res.result;
+    if (!data.promotionGoodsList) data.promotionGoodsList = [];
+    rangeTimeType.value = data.rangeDayType === "DYNAMICTIME" ? 0 : 1;
+    if (data.scopeType == "PORTION_GOODS_CATEGORY") {
+      let prevCascader = data.scopeId.split(",");
+      function next(params, prev) {
+        for (let i = 0; i < params.length; i++) {
+          const item = params[i];
+          if (item.children) {
+            next(item.children, [...prev, item]);
+          } else {
+            if (prevCascader.includes(item.id)) {
+              prevCascader = prevCascader.map((key) => {
+                if (key === item.id) {
+                  let result = prev.map((item) => item.id);
+                  return [...result, item.id];
+                } else {
+                  return key;
+                }
+              });
+            } else {
+              i === params.length - 1 && (prev = []);
+            }
+          }
+        }
+      }
+
+      next(goodsCategoryList.value, []);
+      data.scopeIdGoods = prevCascader;
+    }
+    data.rangeTime = [];
+    if (data.startTime && data.endTime) {
+      data.rangeTime.push(new Date(data.startTime), new Date(data.endTime));
+    }
+    form.value = data;
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(form.value));
+      params.getType != "ACTIVITY" ? delete params.effectiveDays : "";
+
+      if (rangeTimeType.value == 1) {
+        params.rangeDayType = "FIXEDTIME";
+        const rangeTime = form.value.rangeTime;
+        const start = rangeTime[0] instanceof Date ? rangeTime[0] : new Date(rangeTime[0]);
+        const end = rangeTime[1] instanceof Date ? rangeTime[1] : new Date(rangeTime[1]);
+        params.startTime = unixToDate(start.getTime() / 1000);
+        params.endTime = unixToDate(end.getTime() / 1000);
+        delete params.effectiveDays;
+      } else {
+        params.rangeDayType = "DYNAMICTIME";
+        delete params.rangeTime;
+      }
+
+      let scopeId = [];
+
+      if (
+        params.scopeType == "PORTION_GOODS" &&
+        (!params.promotionGoodsList || params.promotionGoodsList.length == 0)
+      ) {
+        Modal.warning({ title: "提示", content: "请选择指定商品" });
+        return;
+      }
+
+      if (
+        params.scopeType == "PORTION_GOODS_CATEGORY" &&
+        (!params.scopeIdGoods || params.scopeIdGoods.length == 0)
+      ) {
+        Modal.warning({ title: "提示", content: "请选择商品分类" });
+        return;
+      }
+
+      if (params.scopeType == "PORTION_GOODS") {
+        params.promotionGoodsList.forEach((item) => {
+          scopeId.push(item.skuId);
+        });
+        params.scopeId = scopeId.toString();
+      } else if (params.scopeType == "ALL") {
+        delete params.promotionGoodsList;
+      } else if (params.scopeType == "PORTION_GOODS_CATEGORY") {
+        scopeId = filterCategoryId(params.scopeIdGoods, []);
+        params.scopeId = scopeId.toString();
+        delete params.promotionGoodsList;
+      }
+      delete params.scopeIdGoods;
+
+      submitLoading.value = true;
+      if (modalType.value === 0) {
+        delete params.id;
+
+        saveShopCoupon(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("优惠券发送成功");
+            closeCurrentPage();
+          }
+        });
+      } else {
+        delete params.consumeLimit;
+        delete params.updateTime;
+
+        editShopCoupon(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("优惠券修改成功");
+            closeCurrentPage();
+          }
+        });
+      }
+    }
+  });
+}
+function closeCurrentPage() {
+  appStore.removeTag("add-coupon");
+  localStorage.pageOpenedList = JSON.stringify(appStore.pageOpenedList);
+  router.go(-1);
+}
+function openSkuList() {
+  skuSelectRef.value.open("goods");
+  let data = JSON.parse(JSON.stringify(form.value.promotionGoodsList));
+  data.forEach((e) => {
+    e.id = e.skuId;
+  });
+  skuSelectRef.value.goodsData = data;
+}
+function changeSelect(e) {
+  selectedGoods.value = e;
+}
+function delSelectGoods() {
+  if (selectedGoods.value.length <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选商品吗?",
+    onOk: () => {
+      let ids = [];
+      selectedGoods.value.forEach(function (e) {
+        ids.push(e.skuId);
+      });
+
+      form.value.promotionGoodsList = form.value.promotionGoodsList.filter((item) => {
+        return !ids.includes(item.skuId);
+      });
+    },
+  });
+}
+function delGoods(index) {
+  form.value.promotionGoodsList.splice(index, 1);
+}
+function selectedGoodsData(item) {
+  let list = [];
+  item.forEach((e) => {
+    list.push({
+      goodsName: e.goodsName,
+      price: e.price,
+      originalPrice: e.price,
+      quantity: e.quantity,
+      storeId: e.storeId,
+      storeName: e.storeName,
+      skuId: e.id,
+      categoryPath: e.categoryPath,
+      thumbnail: e.small,
+      goodsType: e.goodsType,
+      goodsId: e.goodsId,
+      originPrice: e.price,
+    });
+  });
+  form.value.promotionGoodsList = list;
+}
+async function getCagetoryList() {
+  let data = await getGoodsCategoryAll();
+  goodsCategoryList.value = data.result;
+  goodsCategoryList.value = goodsCategoryList.value.map((item) => {
+    if (item.children) {
+      item.children = item.children.map((child) => {
+        if (child.children) {
+          child.children = child.children.map((son) => {
+            return {
+              value: son.id,
+              label: son.name,
+            };
+          });
+          return {
+            value: child.id,
+            label: child.name,
+            children: child.children,
+          };
+        } else {
+          return {
+            value: child.id,
+            label: child.name,
+          };
+        }
+      });
+    }
+    return { value: item.id, label: item.name, children: item.children };
+  });
+}
+function filterCategoryId(list, idArr) {
+  list.forEach((e) => {
+    if (e instanceof Array) {
+      filterCategoryId(e, idArr);
+    } else {
+      if (!idArr.includes(e)) idArr.push(e);
+    }
+  });
+  return idArr;
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/coupon/coupon-receive.vue b/seller/src/views/promotion/coupon/coupon-receive.vue
index 57f94ef69..184bb4b17 100644
--- a/seller/src/views/promotion/coupon/coupon-receive.vue
+++ b/seller/src/views/promotion/coupon/coupon-receive.vue
@@ -3,7 +3,7 @@
     <el-button style="margin-bottom: 10px" @click="back()">返回</el-button>
 
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="90px" class="search-form mb_10">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="90px" class="search-form mb_10">
         <el-form-item label="优惠券名称" prop="couponName">
           <el-input
             v-model="searchForm.couponName"
@@ -144,93 +144,111 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getCouponReceiveList } from "@/api/promotion";
-export default {
-  name: "coupon-recevie",
-  props: {
-    promotionStatus: {
-      type: String,
-      default: "",
-    },
+import { useAppStore } from "@/stores/app";
+
+defineOptions({ name: "coupon-recevie" });
+
+const props = defineProps({
+  promotionStatus: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        getType: "",
-        couponId: this.$route.query.couponId,
-      },
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-      refreshTable: true,
-      selectDate: [],
-    };
-  },
-  watch: {
-    $route(e) {
-      this.searchForm.couponId = e.query.couponId;
-      if (this.couponId) {
-        this.getDataList();
-      } else {
-        this.$refs.searchForm?.resetFields();
-      }
-    },
-  },
-  methods: {
-    back() {
-      this.$store.commit("removeTag", "coupon-receive");
-      this.$router.go(-1);
-    },
-    check() {
-      this.$emit("selected", this.selectList);
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-      if (this.getType === "ACTIVITY") this.check();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getCouponReceiveList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+});
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  getType: "",
+  couponId: route.query.couponId,
+});
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+const refreshTable = ref(true);
+const selectDate = ref([]);
+
+const searchFormRef = ref(null);
+
+watch(
+  () => route.query,
+  (query) => {
+    searchForm.couponId = query.couponId;
+    // 原代码此处判断的 couponId 在 data 中并不存在，恒为 undefined；保持原行为
+    if (props.couponId) {
+      getDataList();
+    } else {
+      searchFormRef.value?.resetFields();
+    }
+  }
+);
+
+function back() {
+  appStore.removeTag("coupon-receive");
+  router.go(-1);
+}
+
+function check() {
+  emit("selected", selectList.value);
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+  // 原代码此处判断的 getType 组件并未声明该 prop，恒为 undefined；保持原行为
+  if (props.getType === "ACTIVITY") check();
+}
+
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = selectDate.value[0].getTime();
+    searchForm.endTime = selectDate.value[1].getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getCouponReceiveList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
diff --git a/seller/src/views/promotion/coupon/coupon.vue b/seller/src/views/promotion/coupon/coupon.vue
index 3b8aab46d..b2d557d02 100644
--- a/seller/src/views/promotion/coupon/coupon.vue
+++ b/seller/src/views/promotion/coupon/coupon.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="90px"
@@ -181,315 +181,350 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getShopCouponList,
   updateCouponStatus,
   deleteShopCoupon,
 } from "@/api/promotion";
 import { formatPromotionCouponValidityHtml } from "@/utils/promotions";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "coupon",
-  props: {
-    getType: {
-      type: String,
-      default: "",
-    },
-    promotionStatus: {
-      type: String,
-      default: "",
-    },
-    selectedList: {
-      type: Array,
-      default: () => [],
-    },
+defineOptions({ name: "coupon" });
+
+const props = defineProps({
+  getType: {
+    type: String,
+    default: "",
   },
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "create_time",
-        order: "desc",
-        getType: "",
-      },
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      total: 0,
-      selectDate: [],
-      showActionColumn: true,
-      showStatusColumn: true,
-      isSyncingSelection: false,
-    };
+  promotionStatus: {
+    type: String,
+    default: "",
   },
-  watch: {
-    $route(to) {
-      if (to.fullPath == "/promotions/manager-coupon") {
-        this.init();
+  selectedList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits(["selected"]);
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "create_time",
+  order: "desc",
+  getType: "",
+});
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const total = ref(0);
+const selectDate = ref([]);
+const showActionColumn = ref(true);
+const showStatusColumn = ref(true);
+const isSyncingSelection = ref(false);
+
+// searchFormRef/table：模板 ref 绑定（searchFormRef 原名 searchForm，改名避免与顶层变量互相覆盖）
+const searchFormRef = ref(null);
+const table = ref(null);
+
+watch(
+  () => route.fullPath,
+  (fullPath) => {
+    if (fullPath == "/promotions/manager-coupon") {
+      init();
+    }
+  }
+);
+
+watch(
+  () => props.selectedList,
+  (val) => {
+    if (isSyncingSelection.value) return;
+    if (isSameSelection(val, selectList.value)) return;
+    nextTick(() => {
+      syncTableSelection(val);
+    });
+  },
+  { deep: true }
+);
+
+function formatActivityTime(row) {
+  return formatPromotionCouponValidityHtml(row);
+}
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+
+function scopeTypeText(type) {
+  const map = {
+    ALL: "全品类",
+    PORTION_GOODS_CATEGORY: "商品分类",
+    PORTION_SHOP_CATEGORY: "店铺分类",
+    PORTION_GOODS: "指定商品",
+  };
+  return map[type] || "未知";
+}
+
+function scopeTypeTagType(type) {
+  const map = {
+    ALL: "info",
+    PORTION_GOODS_CATEGORY: "warning",
+    PORTION_SHOP_CATEGORY: "warning",
+    PORTION_GOODS: "primary",
+  };
+  return map[type] || "danger";
+}
+
+function getTypeText(type) {
+  const map = {
+    FREE: "免费获取",
+    ACTIVITY: "活动获取",
+    INSIDE: "内购",
+    IGAME: "游戏人生",
+  };
+  return map[type] || "未知";
+}
+
+function getTypeTagType(type) {
+  const map = {
+    FREE: "danger",
+    ACTIVITY: "warning",
+    INSIDE: "success",
+    IGAME: "success",
+  };
+  return map[type] || "info";
+}
+
+function couponTypeText(type) {
+  const map = {
+    DISCOUNT: "打折",
+    PRICE: "减免现金",
+  };
+  return map[type] || "未知";
+}
+
+function couponTypeTagType(type) {
+  const map = {
+    DISCOUNT: "primary",
+    PRICE: "info",
+  };
+  return map[type] || "info";
+}
+
+function isSameSelection(next, current) {
+  const a = next || [];
+  const b = current || [];
+  if (a.length !== b.length) return false;
+  const nextIds = a.map((item) => item.id).sort().join(",");
+  const currentIds = b.map((item) => item.id).sort().join(",");
+  return nextIds === currentIds;
+}
+
+function syncTableSelection(selected) {
+  const tableEl = table.value;
+  if (!tableEl) return;
+  const nextList = selected ? [...selected] : [];
+  isSyncingSelection.value = true;
+  tableEl.clearSelection();
+  if (nextList.length) {
+    data.value.forEach((row) => {
+      if (nextList.some((item) => item.id === row.id)) {
+        tableEl.toggleRowSelection(row, true);
       }
-    },
-    selectedList: {
-      handler(val) {
-        if (this.isSyncingSelection) return;
-        if (this.isSameSelection(val, this.selectList)) return;
-        this.$nextTick(() => {
-          this.syncTableSelection(val);
-        });
-      },
-      deep: true,
-    },
-  },
-  methods: {
-    formatActivityTime(row) {
-      return formatPromotionCouponValidityHtml(row);
-    },
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    scopeTypeText(type) {
-      const map = {
-        ALL: "全品类",
-        PORTION_GOODS_CATEGORY: "商品分类",
-        PORTION_SHOP_CATEGORY: "店铺分类",
-        PORTION_GOODS: "指定商品",
-      };
-      return map[type] || "未知";
-    },
-    scopeTypeTagType(type) {
-      const map = {
-        ALL: "info",
-        PORTION_GOODS_CATEGORY: "warning",
-        PORTION_SHOP_CATEGORY: "warning",
-        PORTION_GOODS: "primary",
-      };
-      return map[type] || "danger";
-    },
-    getTypeText(type) {
-      const map = {
-        FREE: "免费获取",
-        ACTIVITY: "活动获取",
-        INSIDE: "内购",
-        IGAME: "游戏人生",
-      };
-      return map[type] || "未知";
-    },
-    getTypeTagType(type) {
-      const map = {
-        FREE: "danger",
-        ACTIVITY: "warning",
-        INSIDE: "success",
-        IGAME: "success",
-      };
-      return map[type] || "info";
-    },
-    couponTypeText(type) {
-      const map = {
-        DISCOUNT: "打折",
-        PRICE: "减免现金",
-      };
-      return map[type] || "未知";
-    },
-    couponTypeTagType(type) {
-      const map = {
-        DISCOUNT: "primary",
-        PRICE: "info",
-      };
-      return map[type] || "info";
-    },
-    isSameSelection(next, current) {
-      const a = next || [];
-      const b = current || [];
-      if (a.length !== b.length) return false;
-      const nextIds = a.map((item) => item.id).sort().join(",");
-      const currentIds = b.map((item) => item.id).sort().join(",");
-      return nextIds === currentIds;
-    },
-    syncTableSelection(selected) {
-      const table = this.$refs.table;
-      if (!table) return;
-      const nextList = selected ? [...selected] : [];
-      this.isSyncingSelection = true;
-      table.clearSelection();
-      if (nextList.length) {
-        this.data.forEach((row) => {
-          if (nextList.some((item) => item.id === row.id)) {
-            table.toggleRowSelection(row, true);
+    });
+  }
+  selectList.value = nextList;
+  selectCount.value = nextList.length;
+  nextTick(() => {
+    isSyncingSelection.value = false;
+  });
+}
+
+function check() {
+  emit("selected", selectList.value);
+}
+
+function receivePage(id) {
+  if (id) {
+    router.push({ name: "coupon-receive", query: { couponId: id } });
+  } else {
+    router.push({ name: "coupon-receive" });
+  }
+}
+
+function init() {
+  getDataList();
+}
+
+function add() {
+  router.push({ name: "add-coupon" });
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function clearSelectAll() {
+  table.value?.clearSelection();
+}
+
+function changeSelect(e) {
+  if (isSyncingSelection.value) return;
+  selectList.value = e;
+  selectCount.value = e.length;
+  if (props.getType === "ACTIVITY") check();
+}
+
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getShopCouponList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
+        nextTick(() => {
+          if (props.selectedList.length) {
+            syncTableSelection(props.selectedList);
           }
         });
       }
-      this.selectList = nextList;
-      this.selectCount = nextList.length;
-      this.$nextTick(() => {
-        this.isSyncingSelection = false;
-      });
-    },
-    check() {
-      this.$emit("selected", this.selectList);
-    },
-    receivePage(id) {
-      if (id) {
-        this.$router.push({ name: "coupon-receive", query: { couponId: id } });
-      } else {
-        this.$router.push({ name: "coupon-receive" });
-      }
-    },
-    init() {
-      this.getDataList();
-    },
-    add() {
-      this.$router.push({ name: "add-coupon" });
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      if (this.isSyncingSelection) return;
-      this.selectList = e;
-      this.selectCount = e.length;
-      if (this.getType === "ACTIVITY") this.check();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getShopCouponList(this.searchForm)
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function see(v, only) {
+  const data = only ? { onlyView: true, id: v.id } : { id: v.id };
+  router.push({ name: "add-coupon", query: data });
+}
+
+function close(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "确认要关闭此优惠券么?",
+    loading: true,
+    onOk: () => {
+      updateCouponStatus({
+        couponIds: v.id,
+        effectiveDays: 0,
+      })
         .then((res) => {
+          Modal.remove();
           if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-            this.$nextTick(() => {
-              if (this.selectedList.length) {
-                this.syncTableSelection(this.selectedList);
-              }
-            });
+            Message.success("优惠券已关闭");
+            getDataList();
           }
         })
-        .finally(() => {
-          this.loading = false;
+        .catch(() => {
+          Modal.remove();
         });
     },
-    see(v, only) {
-      const data = only ? { onlyView: true, id: v.id } : { id: v.id };
-      this.$router.push({ name: "add-coupon", query: data });
+  });
+}
+
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "确认要删除此优惠券么?",
+    loading: true,
+    onOk: () => {
+      deleteShopCoupon(v.id)
+        .then((res) => {
+          Modal.remove();
+          if (res.success) {
+            Message.success("优惠券已删除");
+            getDataList();
+          }
+        })
+        .catch(() => {
+          Modal.remove();
+        });
     },
-    close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "确认要关闭此优惠券么?",
-        loading: true,
-        onOk: () => {
-          updateCouponStatus({
-            couponIds: v.id,
-            effectiveDays: 0,
-          })
-            .then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("优惠券已关闭");
-                this.getDataList();
-              }
-            })
-            .catch(() => {
-              this.$Modal.remove();
-            });
-        },
+  });
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要下架的优惠券");
+    return;
+  }
+  Modal.confirm({
+    title: "确认下架",
+    content: "您确认要下架所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      const ids = selectList.value.map((e) => e.id);
+      updateCouponStatus({
+        couponIds: ids.toString(),
+        promotionStatus: "CLOSE",
+      }).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("下架成功");
+          clearSelectAll();
+          getDataList();
+        }
       });
     },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "确认要删除此优惠券么?",
-        loading: true,
-        onOk: () => {
-          deleteShopCoupon(v.id)
-            .then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success("优惠券已删除");
-                this.getDataList();
-              }
-            })
-            .catch(() => {
-              this.$Modal.remove();
-            });
-        },
-      });
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要下架的优惠券");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认下架",
-        content: "您确认要下架所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          const ids = this.selectList.map((e) => e.id);
-          updateCouponStatus({
-            couponIds: ids.toString(),
-            promotionStatus: "CLOSE",
-          }).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("下架成功");
-              this.clearSelectAll();
-              this.getDataList();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    if (this.getType) {
-      this.searchForm.getType = this.getType;
-      this.showActionColumn = false;
-    }
-    if (this.promotionStatus) {
-      this.searchForm.promotionStatus = this.promotionStatus;
-      this.showStatusColumn = false;
-    }
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  if (props.getType) {
+    searchForm.getType = props.getType;
+    showActionColumn.value = false;
+  }
+  if (props.promotionStatus) {
+    searchForm.promotionStatus = props.promotionStatus;
+    showStatusColumn.value = false;
+  }
+  init();
+});
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/flash-discount/flash-discount-add.vue b/seller/src/views/promotion/flash-discount/flash-discount-add.vue
index 75c5891b8..9ac16e85e 100644
--- a/seller/src/views/promotion/flash-discount/flash-discount-add.vue
+++ b/seller/src/views/promotion/flash-discount/flash-discount-add.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px">
+      <el-form ref="formRef" :model="form" label-width="120px">
         <el-form-item label="活动名称" required>
           <el-input v-model="form.promotionName" style="width: 320px" />
         </el-form-item>
@@ -49,82 +49,88 @@
         </el-form-item>
       </el-form>
     </el-card>
-    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoods" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoods" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getFlashDiscountDetail, saveFlashDiscount, editFlashDiscount } from "@/api/promotion.js";
 import { promotionPriceMin } from "@/constants/goodsType";
+import { unixToDate } from "@/utils/filters";
+import { Message } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      form: {
-        promotionName: "",
-        rangeTime: [],
-        limitNum: 0,
-        description: "",
-        scopeType: "PORTION_GOODS",
-        promotionGoodsList: [],
-      },
-    };
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      getFlashDiscountDetail(this.$route.query.id).then((res) => {
-        if (res.success) {
-          Object.assign(this.form, res.result);
-          this.form.rangeTime = [new Date(res.result.startTime), new Date(res.result.endTime)];
-        }
+const route = useRoute();
+const router = useRouter();
+
+const form = reactive({
+  promotionName: "",
+  rangeTime: [],
+  limitNum: 0,
+  description: "",
+  scopeType: "PORTION_GOODS",
+  promotionGoodsList: [],
+});
+
+// formRef / liliDialogRef：模板 ref 改名避免与 form 变量、liliDialog 全局组件互相覆盖
+const formRef = ref(null);
+const liliDialogRef = ref(null);
+
+onMounted(() => {
+  if (route.query.id) {
+    getFlashDiscountDetail(route.query.id).then((res) => {
+      if (res.success) {
+        Object.assign(form, res.result);
+        form.rangeTime = [new Date(res.result.startTime), new Date(res.result.endTime)];
+      }
+    });
+  }
+});
+
+function openGoods() {
+  liliDialogRef.value.open("goods");
+}
+
+function selectedGoods(list) {
+  list.forEach((g) => {
+    if (!form.promotionGoodsList.find((i) => i.skuId === g.id)) {
+      form.promotionGoodsList.push({
+        skuId: g.id,
+        goodsId: g.goodsId,
+        goodsName: g.goodsName,
+        originalPrice: g.price,
+        price: g.price,
+        quantity: g.quantity,
+        goodsType: g.goodsType,
       });
     }
-  },
-  methods: {
-    promotionPriceMin,
-    openGoods() {
-      this.$refs.liliDialog.open("goods");
-    },
-    selectedGoods(list) {
-      list.forEach((g) => {
-        if (!this.form.promotionGoodsList.find((i) => i.skuId === g.id)) {
-          this.form.promotionGoodsList.push({
-            skuId: g.id,
-            goodsId: g.goodsId,
-            goodsName: g.goodsName,
-            originalPrice: g.price,
-            price: g.price,
-            quantity: g.quantity,
-            goodsType: g.goodsType,
-          });
-        }
-      });
-    },
-    submit() {
-      const payload = { ...this.form };
-      if (payload.rangeTime && payload.rangeTime.length === 2) {
-        const start =
-          payload.rangeTime[0] instanceof Date
-            ? payload.rangeTime[0]
-            : new Date(payload.rangeTime[0]);
-        const end =
-          payload.rangeTime[1] instanceof Date
-            ? payload.rangeTime[1]
-            : new Date(payload.rangeTime[1]);
-        payload.startTime = this.$filters.unixToDate(start.getTime() / 1000);
-        payload.endTime = this.$filters.unixToDate(end.getTime() / 1000);
-      }
-      delete payload.rangeTime;
-      const req = payload.id ? editFlashDiscount(payload) : saveFlashDiscount(payload);
-      req.then((res) => {
-        if (res.success) {
-          this.$Message.success("保存成功");
-          this.$router.back();
-        }
-      });
-    },
-  },
-};
+  });
+}
+
+function submit() {
+  const payload = { ...form };
+  if (payload.rangeTime && payload.rangeTime.length === 2) {
+    const start =
+      payload.rangeTime[0] instanceof Date
+        ? payload.rangeTime[0]
+        : new Date(payload.rangeTime[0]);
+    const end =
+      payload.rangeTime[1] instanceof Date
+        ? payload.rangeTime[1]
+        : new Date(payload.rangeTime[1]);
+    payload.startTime = unixToDate(start.getTime() / 1000);
+    payload.endTime = unixToDate(end.getTime() / 1000);
+  }
+  delete payload.rangeTime;
+  const req = payload.id ? editFlashDiscount(payload) : saveFlashDiscount(payload);
+  req.then((res) => {
+    if (res.success) {
+      Message.success("保存成功");
+      router.back();
+    }
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/flash-discount/flash-discount.vue b/seller/src/views/promotion/flash-discount/flash-discount.vue
index d82d2a7ee..274115420 100644
--- a/seller/src/views/promotion/flash-discount/flash-discount.vue
+++ b/seller/src/views/promotion/flash-discount/flash-discount.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
         <el-form-item label="活动名称" prop="promotionName">
           <el-input v-model="searchForm.promotionName" placeholder="请输入活动名称" clearable style="width: 240px" />
         </el-form-item>
@@ -50,58 +50,60 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getFlashDiscountList, updateFlashDiscountStatus } from "@/api/promotion.js";
+import { Message } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      data: [],
-      searchForm: { pageNumber: 1, pageSize: 20, sort: "createTime", order: "desc" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    statusText(s) {
-      return { NEW: "未开始", START: "进行中", END: "已结束", CLOSE: "已关闭" }[s] || s;
-    },
-    statusType(s) {
-      return { NEW: "info", START: "success", END: "danger", CLOSE: "danger" }[s] || "info";
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getFlashDiscountList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    goAdd() {
-      this.$router.push({ name: "flash-discount-add" });
-    },
-    goEdit(row) {
-      this.$router.push({ name: "flash-discount-add", query: { id: row.id } });
-    },
-    toggleStatus(row) {
-      updateFlashDiscountStatus(row.id).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getDataList();
-        }
-      });
-    },
-  },
-};
+const router = useRouter();
+
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const searchForm = reactive({ pageNumber: 1, pageSize: 20, sort: "createTime", order: "desc" });
+
+// searchFormRef：模板 ref 改名避免与顶层变量 searchForm 互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  getDataList();
+});
+
+function statusText(s) {
+  return { NEW: "未开始", START: "进行中", END: "已结束", CLOSE: "已关闭" }[s] || s;
+}
+function statusType(s) {
+  return { NEW: "info", START: "success", END: "danger", CLOSE: "danger" }[s] || "info";
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getFlashDiscountList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function goAdd() {
+  router.push({ name: "flash-discount-add" });
+}
+function goEdit(row) {
+  router.push({ name: "flash-discount-add", query: { id: row.id } });
+}
+function toggleStatus(row) {
+  updateFlashDiscountStatus(row.id).then((res) => {
+    if (res.success) {
+      Message.success("操作成功");
+      getDataList();
+    }
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/full-discount/full-discount-add.vue b/seller/src/views/promotion/full-discount/full-discount-add.vue
index 1abf6c5ee..6fcc77fbe 100644
--- a/seller/src/views/promotion/full-discount/full-discount-add.vue
+++ b/seller/src/views/promotion/full-discount/full-discount-add.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form ref="form" :model="form" label-width="120px" :rules="formRule">
+      <el-form ref="formRef" :model="form" label-width="120px" :rules="formRule">
         <div class="base-info-item">
           <h4>基本信息</h4>
           <div class="form-item-view">
@@ -230,11 +230,13 @@
         </div>
       </el-form>
     </el-card>
-    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   getShopCouponList,
   getFullDiscountById,
@@ -243,260 +245,260 @@ import {
 } from "@/api/promotion";
 import { getGoodsSkuListDataSeller } from "@/api/goods";
 import { regular } from "@/utils";
-import vueQr from "vue-qr";
 import { goodsTypeLabel } from "@/constants/goodsType";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  name: "add-full-discount",
-  components: {
-    "vue-qr": vueQr,
-  },
-  data() {
-    const checkWeight = (rule, value, callback) => {
-      if (!value && typeof value !== "number") {
-        callback(new Error("优惠门槛不能为空"));
-      } else if (!regular.money.test(value)) {
-        callback(new Error("请输入正整数或者两位小数"));
-      } else if (parseFloat(value) > 99999999) {
-        callback(new Error("优惠门槛设置超过上限值"));
-      } else {
-        callback();
-      }
-    };
-    const checkDiscount = (rule, value, callback) => {
-      if (value === null || value === undefined || value === "") {
-        callback(new Error("请填写优惠折扣"));
-      } else if (value < 0.1 || value > 9.9) {
-        callback(new Error("请输入0-10的数字,可有一位小数"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      form: {
-        discountType: "fullMinusFlag",
-        scopeType: "ALL",
-        promotionGoodsList: [],
-        promotionStatus: "NEW",
-      },
-      id: this.$route.query.id,
-      submitLoading: false,
-      selectedGoods: [],
-      couponList: [],
-      giftList: [],
-      giftLoading: false,
-      couponLoading: false,
-      formRule: {
-        promotionName: [{ required: true, message: "活动名称不能为空" }],
-        rangeTime: [{ required: true, message: "请选择活动时间" }],
-        description: [{ required: true, message: "请填写活动描述" }],
-        fullMoney: [{ required: true, validator: checkWeight }],
-        fullMinus: [
-          { required: true, message: "请填写优惠金额" },
-          { pattern: regular.money, message: "请输入正确金额" },
-        ],
-        fullRate: [{ required: true, validator: checkDiscount }],
-      },
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
-  },
-  computed: {
-    fieldDisabled() {
-      return !!this.id && this.form.promotionStatus !== "NEW";
-    },
-  },
-  mounted() {
-    if (this.id) {
-      this.getDetail();
-    }
-    this.getCouponList();
-    this.getGiftList();
-  },
-  methods: {
-    giftOptionLabel(item) {
-      if (!item) return "";
-      const typeLabel =
-        item.goodsType === "E_COUPON" ? ` [${goodsTypeLabel(item.goodsType)}]` : "";
-      const stock =
-        item.goodsType === "E_COUPON" && item.quantity != null
-          ? ` · 库存${item.quantity}`
-          : "";
-      return `${item.goodsName || ""}${typeLabel}${stock}`;
-    },
-    closeCurrentPage() {
-      this.$router.back();
-    },
-    openSkuList() {
-      const data = JSON.parse(JSON.stringify(this.form.promotionGoodsList || []));
-      data.forEach((e) => {
-        e.id = e.skuId || e.id;
-      });
-      // 先写入已选商品，再打开选择器，保证回显时 selectedWay 已就绪
-      this.$refs.liliDialog.goodsData = data;
-      this.$refs.liliDialog.open("goods");
-    },
-    getDetail() {
-      getFullDiscountById(this.id).then((res) => {
-        const data = res.result;
-        if (data.scopeType === "ALL") {
-          data.promotionGoodsList = [];
-        }
-        if (data.fullMinusFlag) {
-          data.discountType = "fullMinusFlag";
-          delete data.fullMinusFlag;
-        } else {
-          data.discountType = "fullRateFlag";
-          delete data.fullRateFlag;
-        }
-        data.rangeTime = [new Date(data.startTime), new Date(data.endTime)];
-        if (data.fullRate !== null && data.fullRate !== undefined && data.fullRate !== "") {
-          data.fullRate = parseFloat(Number(data.fullRate).toFixed(1));
-        }
-        this.form = data;
-      });
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        const params = JSON.parse(JSON.stringify(this.form));
-        params.startTime = this.$filters.unixToDate(this.form.rangeTime[0] / 1000);
-        params.endTime = this.$filters.unixToDate(this.form.rangeTime[1] / 1000);
+defineOptions({ name: "add-full-discount" });
 
-        if (params.couponFlag && !params.couponId) {
-          this.$Message.warning("请选择优惠券");
-          return;
-        }
-        if (params.giftFlag && !params.giftId) {
-          this.$Message.warning("请选择赠品");
-          return;
-        }
-        if (params.pointFlag && !params.point) {
-          this.$Message.warning("请填写积分");
-          return;
-        }
+const route = useRoute();
+const router = useRouter();
 
-        if (
-          params.scopeType === "PORTION_GOODS" &&
-          (!params.promotionGoodsList || params.promotionGoodsList.length === 0)
-        ) {
-          this.$Message.warning("请选择指定商品");
-          return;
-        }
-        if (params.scopeType === "ALL") {
-          delete params.promotionGoodsList;
-          params.number = -1;
-        } else {
-          const scopeId = [];
-          params.number = 1;
-          params.promotionGoodsList.forEach((e) => {
-            e.startTime = params.startTime;
-            e.endTime = params.endTime;
-            scopeId.push(e.skuId);
-          });
-          params.scopeId = scopeId.toString();
-        }
-        if (params.discountType === "fullMinusFlag") {
-          params.fullMinusFlag = true;
-        } else {
-          params.fullRateFlag = true;
-        }
-        delete params.discountType;
-        delete params.rangeTime;
-        if (!this.id) {
-          delete params.id;
-        } else {
-          delete params.updateTime;
-        }
+const checkWeight = (rule, value, callback) => {
+  if (!value && typeof value !== "number") {
+    callback(new Error("优惠门槛不能为空"));
+  } else if (!regular.money.test(value)) {
+    callback(new Error("请输入正整数或者两位小数"));
+  } else if (parseFloat(value) > 99999999) {
+    callback(new Error("优惠门槛设置超过上限值"));
+  } else {
+    callback();
+  }
+};
+const checkDiscount = (rule, value, callback) => {
+  if (value === null || value === undefined || value === "") {
+    callback(new Error("请填写优惠折扣"));
+  } else if (value < 0.1 || value > 9.9) {
+    callback(new Error("请输入0-10的数字,可有一位小数"));
+  } else {
+    callback();
+  }
+};
 
-        this.submitLoading = true;
-        const request = this.id ? editFullDiscount(params) : newFullDiscount(params);
-        request.then((res) => {
-          this.submitLoading = false;
-          if (res.success) {
-            this.$Message.success(this.id ? "编辑活动成功" : "添加活动成功");
-            this.closeCurrentPage();
-          }
-        });
-      });
-    },
-    changeSelect(e) {
-      this.selectedGoods = e;
-    },
-    delSelectGoods() {
-      if (this.selectedGoods.length <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选商品吗?",
-        onOk: () => {
-          const ids = this.selectedGoods.map((e) => e.skuId || e.id);
-          this.form.promotionGoodsList = this.form.promotionGoodsList.filter(
-            (item) => !ids.includes(item.skuId)
-          );
-        },
-      });
-    },
-    delGoods(index) {
-      this.form.promotionGoodsList.splice(index, 1);
-    },
-    selectedGoodsData(item) {
-      const list = [];
-      item.forEach((e) => {
-        list.push({
-          goodsName: e.goodsName,
-          price: e.price,
-          quantity: e.quantity,
-          storeId: e.storeId,
-          storeName: e.storeName,
-          thumbnail: e.thumbnail,
-          skuId: e.id,
-          goodsId: e.goodsId,
-          goodsType: e.goodsType,
-        });
-      });
-      this.form.promotionGoodsList = list;
-    },
-    getCouponList(query) {
-      const params = {
-        pageSize: 20,
-        pageNumber: 1,
-        getType: "ACTIVITY",
-        couponName: query,
-        promotionStatus: "START",
-      };
-      this.couponLoading = true;
-      getShopCouponList(params).then((res) => {
-        this.couponLoading = false;
-        if (res.success) {
-          this.couponList = res.result.records;
-        }
-      });
-    },
-    getGiftList(query) {
-      const params = {
-        pageSize: 20,
-        pageNumber: 1,
-        id: query === this.form.giftId ? this.form.giftId : null,
-        goodsName: query === this.form.giftId ? null : query,
-        marketEnable: "UPPER",
-        authFlag: "PASS",
-      };
-      this.giftLoading = true;
-      getGoodsSkuListDataSeller(params).then((res) => {
-        this.giftLoading = false;
-        if (res.success) {
-          this.giftList = res.result.records;
-        }
-      });
-    },
+const form = ref({
+  discountType: "fullMinusFlag",
+  scopeType: "ALL",
+  promotionGoodsList: [],
+  promotionStatus: "NEW",
+});
+const id = ref(route.query.id);
+const submitLoading = ref(false);
+const selectedGoods = ref([]);
+const couponList = ref([]);
+const giftList = ref([]);
+const giftLoading = ref(false);
+const couponLoading = ref(false);
+const formRule = {
+  promotionName: [{ required: true, message: "活动名称不能为空" }],
+  rangeTime: [{ required: true, message: "请选择活动时间" }],
+  description: [{ required: true, message: "请填写活动描述" }],
+  fullMoney: [{ required: true, validator: checkWeight }],
+  fullMinus: [
+    { required: true, message: "请填写优惠金额" },
+    { pattern: regular.money, message: "请输入正确金额" },
+  ],
+  fullRate: [{ required: true, validator: checkDiscount }],
+};
+const options = {
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
 };
+
+// formRef：模板 ref 改名避免与顶层变量互相覆盖
+const formRef = ref(null);
+const liliDialogRef = ref(null);
+
+const fieldDisabled = computed(() => {
+  return !!id.value && form.value.promotionStatus !== "NEW";
+});
+
+onMounted(() => {
+  if (id.value) {
+    getDetail();
+  }
+  getCouponList();
+  getGiftList();
+});
+
+function giftOptionLabel(item) {
+  if (!item) return "";
+  const typeLabel =
+    item.goodsType === "E_COUPON" ? ` [${goodsTypeLabel(item.goodsType)}]` : "";
+  const stock =
+    item.goodsType === "E_COUPON" && item.quantity != null
+      ? ` · 库存${item.quantity}`
+      : "";
+  return `${item.goodsName || ""}${typeLabel}${stock}`;
+}
+function closeCurrentPage() {
+  router.back();
+}
+function openSkuList() {
+  const data = JSON.parse(JSON.stringify(form.value.promotionGoodsList || []));
+  data.forEach((e) => {
+    e.id = e.skuId || e.id;
+  });
+  // 先写入已选商品，再打开选择器，保证回显时 selectedWay 已就绪
+  liliDialogRef.value.goodsData = data;
+  liliDialogRef.value.open("goods");
+}
+function getDetail() {
+  getFullDiscountById(id.value).then((res) => {
+    const data = res.result;
+    if (data.scopeType === "ALL") {
+      data.promotionGoodsList = [];
+    }
+    if (data.fullMinusFlag) {
+      data.discountType = "fullMinusFlag";
+      delete data.fullMinusFlag;
+    } else {
+      data.discountType = "fullRateFlag";
+      delete data.fullRateFlag;
+    }
+    data.rangeTime = [new Date(data.startTime), new Date(data.endTime)];
+    if (data.fullRate !== null && data.fullRate !== undefined && data.fullRate !== "") {
+      data.fullRate = parseFloat(Number(data.fullRate).toFixed(1));
+    }
+    form.value = data;
+  });
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    const params = JSON.parse(JSON.stringify(form.value));
+    params.startTime = unixToDate(form.value.rangeTime[0] / 1000);
+    params.endTime = unixToDate(form.value.rangeTime[1] / 1000);
+
+    if (params.couponFlag && !params.couponId) {
+      Message.warning("请选择优惠券");
+      return;
+    }
+    if (params.giftFlag && !params.giftId) {
+      Message.warning("请选择赠品");
+      return;
+    }
+    if (params.pointFlag && !params.point) {
+      Message.warning("请填写积分");
+      return;
+    }
+
+    if (
+      params.scopeType === "PORTION_GOODS" &&
+      (!params.promotionGoodsList || params.promotionGoodsList.length === 0)
+    ) {
+      Message.warning("请选择指定商品");
+      return;
+    }
+    if (params.scopeType === "ALL") {
+      delete params.promotionGoodsList;
+      params.number = -1;
+    } else {
+      const scopeId = [];
+      params.number = 1;
+      params.promotionGoodsList.forEach((e) => {
+        e.startTime = params.startTime;
+        e.endTime = params.endTime;
+        scopeId.push(e.skuId);
+      });
+      params.scopeId = scopeId.toString();
+    }
+    if (params.discountType === "fullMinusFlag") {
+      params.fullMinusFlag = true;
+    } else {
+      params.fullRateFlag = true;
+    }
+    delete params.discountType;
+    delete params.rangeTime;
+    if (!id.value) {
+      delete params.id;
+    } else {
+      delete params.updateTime;
+    }
+
+    submitLoading.value = true;
+    const request = id.value ? editFullDiscount(params) : newFullDiscount(params);
+    request.then((res) => {
+      submitLoading.value = false;
+      if (res.success) {
+        Message.success(id.value ? "编辑活动成功" : "添加活动成功");
+        closeCurrentPage();
+      }
+    });
+  });
+}
+function changeSelect(e) {
+  selectedGoods.value = e;
+}
+function delSelectGoods() {
+  if (selectedGoods.value.length <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选商品吗?",
+    onOk: () => {
+      const ids = selectedGoods.value.map((e) => e.skuId || e.id);
+      form.value.promotionGoodsList = form.value.promotionGoodsList.filter(
+        (item) => !ids.includes(item.skuId)
+      );
+    },
+  });
+}
+function delGoods(index) {
+  form.value.promotionGoodsList.splice(index, 1);
+}
+function selectedGoodsData(item) {
+  const list = [];
+  item.forEach((e) => {
+    list.push({
+      goodsName: e.goodsName,
+      price: e.price,
+      quantity: e.quantity,
+      storeId: e.storeId,
+      storeName: e.storeName,
+      thumbnail: e.thumbnail,
+      skuId: e.id,
+      goodsId: e.goodsId,
+      goodsType: e.goodsType,
+    });
+  });
+  form.value.promotionGoodsList = list;
+}
+function getCouponList(query) {
+  const params = {
+    pageSize: 20,
+    pageNumber: 1,
+    getType: "ACTIVITY",
+    couponName: query,
+    promotionStatus: "START",
+  };
+  couponLoading.value = true;
+  getShopCouponList(params).then((res) => {
+    couponLoading.value = false;
+    if (res.success) {
+      couponList.value = res.result.records;
+    }
+  });
+}
+function getGiftList(query) {
+  const params = {
+    pageSize: 20,
+    pageNumber: 1,
+    id: query === form.value.giftId ? form.value.giftId : null,
+    goodsName: query === form.value.giftId ? null : query,
+    marketEnable: "UPPER",
+    authFlag: "PASS",
+  };
+  giftLoading.value = true;
+  getGoodsSkuListDataSeller(params).then((res) => {
+    giftLoading.value = false;
+    if (res.success) {
+      giftList.value = res.result.records;
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/full-discount/full-discount.vue b/seller/src/views/promotion/full-discount/full-discount.vue
index aa326ffe3..b65b68ed3 100644
--- a/seller/src/views/promotion/full-discount/full-discount.vue
+++ b/seller/src/views/promotion/full-discount/full-discount.vue
@@ -2,7 +2,7 @@
   <div class="search full-cut">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -105,106 +105,117 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getFullDiscountList, updateFullDiscount } from "@/api/promotion.js";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      selectDate: [],
-      total: 0,
-      loading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    openOrClose(row) {
-      let name = "开启";
-      if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
-        name = "关闭";
-        this.$Modal.confirm({
-          title: "提示",
-          content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
-          loading: true,
-          onOk: () => {
-            updateFullDiscount(row.id).then((res) => {
-              this.$Modal.remove();
-              if (res.success) {
-                this.$Message.success(`${name}成功`);
-                this.getDataList();
-              }
-            });
-          },
+const router = useRouter();
+
+const selectDate = ref([]);
+const total = ref(0);
+const loading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+
+// searchFormRef：模板 ref 改名避免与 searchForm 变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+
+function init() {
+  getDataList();
+}
+
+function openOrClose(row) {
+  let name = "开启";
+  if (row.promotionStatus === "NEW" || row.promotionStatus === "START") {
+    name = "关闭";
+    Modal.confirm({
+      title: "提示",
+      content: `确认${name}此活动吗?需要一定时间才能生效，请耐心等待`,
+      loading: true,
+      onOk: () => {
+        updateFullDiscount(row.id).then((res) => {
+          Modal.remove();
+          if (res.success) {
+            Message.success(`${name}成功`);
+            getDataList();
+          }
         });
-      }
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = this.selectDate[0].getTime();
-        this.searchForm.endTime = this.selectDate[1].getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
-      }
-      getFullDiscountList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    add() {
-      this.$router.push({ name: "full-discount-detail" });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "full-discount-detail", query: { id: row.id } });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      },
+    });
+  }
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = selectDate.value[0].getTime();
+    searchForm.endTime = selectDate.value[1].getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getFullDiscountList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+
+function add() {
+  router.push({ name: "full-discount-detail" });
+}
+
+function goDetail(row) {
+  router.push({ name: "full-discount-detail", query: { id: row.id } });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/live/addLive.vue b/seller/src/views/promotion/live/addLive.vue
index 2b3330fff..8b98914ad 100644
--- a/seller/src/views/promotion/live/addLive.vue
+++ b/seller/src/views/promotion/live/addLive.vue
@@ -5,7 +5,7 @@
         为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
       </el-alert>
 
-      <el-form ref="liveForm" :model="liveForm" :rules="liveRulesForm" label-width="120px">
+      <el-form ref="liveFormRef" :model="liveForm" :rules="liveRulesForm" label-width="120px">
         <el-form-item label="直播标题" prop="name">
           <el-input :disabled="liveStatus != 'NEW'" v-model="liveForm.name" style="width: 460px" />
           <div class="tips">直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符</div>
@@ -122,168 +122,179 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { uploadFile } from "@/libs/axios";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
 import { addLive, addLiveGoods, editLive, getLiveInfo, delRoomLiveGoods } from "@/api/promotion";
 import liveGoods from "./liveGoods";
+import { Message } from "@/utils/message";
+import { getStore } from "@/libs/storage";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  components: { liveGoods, uploadPicThumb },
-  data() {
-    return {
-      spinShow: false,
-      liveGoodsVisible: false,
-      imageVisible: false,
-      imageSrc: "",
-      action: uploadFile,
-      accessToken: {},
-      liveStatus: "NEW",
-      liveRulesForm: {
-        name: [
-          { required: true, message: "请输入直播标题", trigger: "blur" },
-          { max: 17, min: 3, message: "直播间名字最短3个汉字，最长17个汉字" },
-        ],
-        anchorName: [
-          { required: true, message: "请输入主播昵称", trigger: "blur" },
-          { max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
-        ],
-        anchorWechat: [{ required: true, message: "请输入主播微信号", trigger: "blur" }],
-        startTime: [{ required: true, message: "请正确输入开始时间以及结束时间" }],
-        feedsImg: [{ required: true, message: "分享卡片封面不能为空", trigger: "blur" }],
-        coverImg: [{ required: true, message: "直播间背景墙不能为空", trigger: "blur" }],
-        shareImg: [{ required: true, message: "直播间分享图不能为空", trigger: "blur" }],
-      },
-      liveForm: {
-        name: "",
-        anchorName: "",
-        anchorWechat: "",
-        feedsImg: "",
-        coverImg: "",
-        shareImg: "",
-        startTime: "",
-      },
-      times: [],
-      liveData: [],
-    };
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      this.getLiveDetail();
-    }
-    this.accessToken = { accessToken: this.getStore("accessToken") };
-  },
-  methods: {
-    disabledDate(date) {
-      return date && date.valueOf() < Date.now() - 86400000;
-    },
-    async deleteGoods(val, index) {
-      this.spinShow = true;
-      const res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
-      if (res.success) {
-        this.$Message.success("删除成功!");
-        this.liveData.splice(index, 1);
-      }
-      this.spinShow = false;
-    },
-    async getLiveDetail() {
-      const result = await getLiveInfo(this.$route.query.id);
-      if (result.success) {
-        const data = result.result;
-        for (const key in data) {
-          this.liveForm[key] = data[key];
-        }
-        this.liveData = data.commodityList;
-        this.times = [
-          this.$filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
-          this.$filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
-        ];
-        this.liveStatus = data.status;
-      }
-    },
-    onMove(code, dir) {
-      const moveComm = (curIndex, nextIndex) => {
-        const arr = this.liveData;
-        arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
-        return arr;
-      };
-      this.liveData.some((val, index) => {
-        if (val.id === code) {
-          if (dir === 1 && index === 0) {
-            this.$Message.warning("已在顶部！");
-          } else if (dir === 0 && index === this.liveData.length - 1) {
-            this.$Message.warning("已在底部！");
-          } else {
-            const nextIndex = dir === 1 ? index - 1 : index + 1;
-            this.liveData = moveComm(index, nextIndex);
-          }
-          return true;
-        }
-        return false;
-      });
-    },
-    callBackData(way) {
-      this.liveGoodsVisible = false;
-      this.spinShow = true;
-      addLiveGoods({
-        roomId: this.$route.query.roomId,
-        liveGoodsId: way.liveGoodsId,
-        goodsId: way.goodsId,
-      }).then((res) => {
-        if (res.success) {
-          this.liveData.push(way);
-        }
-        this.spinShow = false;
-      });
-    },
-    tipsDateError() {
-      this.$Message.error(
-        "直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）"
-      );
-    },
-    handleChangeTime(daterange) {
-      if (!daterange || daterange.length !== 2) return;
-      const siteTime = new Date().getTime() / 1000;
-      const selectTime = new Date(daterange[0]).getTime() / 1000;
-      const endTime = new Date(daterange[1]).getTime() / 1000;
-      if (selectTime <= siteTime + 15 * 60) {
-        this.tipsDateError();
-        return;
-      }
-      if (selectTime + 30 * 60 >= endTime || selectTime + 24 * 60 * 60 <= endTime) {
-        this.tipsDateError();
-        return;
-      }
-      this.liveForm.startTime = selectTime;
-      this.liveForm.endTime = endTime;
-    },
-    createLives() {
-      this.$refs.liveForm.validate((valid) => {
-        if (!valid) return;
-        this.spinShow = true;
-        if (this.$route.query.id) {
-          this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
-          delete this.liveForm.updateTime;
-          editLive(this.liveForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("修改成功!");
-              this.$router.push({ path: "/promotion/live" });
-            }
-            this.spinShow = false;
-          });
-        } else {
-          addLive(this.liveForm).then((res) => {
-            if (res.success) {
-              this.$Message.success("添加成功!");
-              this.$router.push({ path: "/live" });
-            }
-            this.spinShow = false;
-          });
-        }
-      });
-    },
-  },
+const route = useRoute();
+const router = useRouter();
+
+const spinShow = ref(false);
+const liveGoodsVisible = ref(false);
+const imageVisible = ref(false);
+const imageSrc = ref("");
+const action = uploadFile;
+const accessToken = ref({});
+const liveStatus = ref("NEW");
+const liveRulesForm = {
+  name: [
+    { required: true, message: "请输入直播标题", trigger: "blur" },
+    { max: 17, min: 3, message: "直播间名字最短3个汉字，最长17个汉字" },
+  ],
+  anchorName: [
+    { required: true, message: "请输入主播昵称", trigger: "blur" },
+    { max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
+  ],
+  anchorWechat: [{ required: true, message: "请输入主播微信号", trigger: "blur" }],
+  startTime: [{ required: true, message: "请正确输入开始时间以及结束时间" }],
+  feedsImg: [{ required: true, message: "分享卡片封面不能为空", trigger: "blur" }],
+  coverImg: [{ required: true, message: "直播间背景墙不能为空", trigger: "blur" }],
+  shareImg: [{ required: true, message: "直播间分享图不能为空", trigger: "blur" }],
 };
+const liveForm = reactive({
+  name: "",
+  anchorName: "",
+  anchorWechat: "",
+  feedsImg: "",
+  coverImg: "",
+  shareImg: "",
+  startTime: "",
+});
+const times = ref([]);
+const liveData = ref([]);
+
+// liveFormRef：模板 ref 改名避免与 liveForm 变量互相覆盖
+const liveFormRef = ref(null);
+
+onMounted(() => {
+  if (route.query.id) {
+    getLiveDetail();
+  }
+  accessToken.value = { accessToken: getStore("accessToken") };
+});
+
+function disabledDate(date) {
+  return date && date.valueOf() < Date.now() - 86400000;
+}
+
+async function deleteGoods(val, index) {
+  spinShow.value = true;
+  const res = await delRoomLiveGoods(liveForm.roomId, val.liveGoodsId);
+  if (res.success) {
+    Message.success("删除成功!");
+    liveData.value.splice(index, 1);
+  }
+  spinShow.value = false;
+}
+
+async function getLiveDetail() {
+  const result = await getLiveInfo(route.query.id);
+  if (result.success) {
+    const data = result.result;
+    for (const key in data) {
+      liveForm[key] = data[key];
+    }
+    liveData.value = data.commodityList;
+    times.value = [
+      unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
+      unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
+    ];
+    liveStatus.value = data.status;
+  }
+}
+
+function onMove(code, dir) {
+  const moveComm = (curIndex, nextIndex) => {
+    const arr = liveData.value;
+    arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
+    return arr;
+  };
+  liveData.value.some((val, index) => {
+    if (val.id === code) {
+      if (dir === 1 && index === 0) {
+        Message.warning("已在顶部！");
+      } else if (dir === 0 && index === liveData.value.length - 1) {
+        Message.warning("已在底部！");
+      } else {
+        const nextIndex = dir === 1 ? index - 1 : index + 1;
+        liveData.value = moveComm(index, nextIndex);
+      }
+      return true;
+    }
+    return false;
+  });
+}
+
+function callBackData(way) {
+  liveGoodsVisible.value = false;
+  spinShow.value = true;
+  addLiveGoods({
+    roomId: route.query.roomId,
+    liveGoodsId: way.liveGoodsId,
+    goodsId: way.goodsId,
+  }).then((res) => {
+    if (res.success) {
+      liveData.value.push(way);
+    }
+    spinShow.value = false;
+  });
+}
+
+function tipsDateError() {
+  Message.error(
+    "直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）"
+  );
+}
+
+function handleChangeTime(daterange) {
+  if (!daterange || daterange.length !== 2) return;
+  const siteTime = new Date().getTime() / 1000;
+  const selectTime = new Date(daterange[0]).getTime() / 1000;
+  const endTime = new Date(daterange[1]).getTime() / 1000;
+  if (selectTime <= siteTime + 15 * 60) {
+    tipsDateError();
+    return;
+  }
+  if (selectTime + 30 * 60 >= endTime || selectTime + 24 * 60 * 60 <= endTime) {
+    tipsDateError();
+    return;
+  }
+  liveForm.startTime = selectTime;
+  liveForm.endTime = endTime;
+}
+
+function createLives() {
+  liveFormRef.value.validate((valid) => {
+    if (!valid) return;
+    spinShow.value = true;
+    if (route.query.id) {
+      liveForm.commodityList = JSON.stringify(liveForm.commodityList);
+      delete liveForm.updateTime;
+      editLive(liveForm).then((res) => {
+        if (res.success) {
+          Message.success("修改成功!");
+          router.push({ path: "/promotion/live" });
+        }
+        spinShow.value = false;
+      });
+    } else {
+      addLive(liveForm).then((res) => {
+        if (res.success) {
+          Message.success("添加成功!");
+          router.push({ path: "/live" });
+        }
+        spinShow.value = false;
+      });
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/live/live.vue b/seller/src/views/promotion/live/live.vue
index 7f2d5a8b6..53a2bb3ef 100644
--- a/seller/src/views/promotion/live/live.vue
+++ b/seller/src/views/promotion/live/live.vue
@@ -67,74 +67,77 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRouter } from "vue-router";
 import { getLiveList, whetherStar } from "@/api/promotion.js";
-export default {
-  data() {
-    return {
-      total: 0,
-      searchForm: {
-        pageSize: 20,
-        pageNumber: 1,
-        status: "NEW",
-      },
-      tabs: [
-        { title: "直播中", status: "START" },
-        { title: "未开始", status: "NEW" },
-        { title: "已结束", status: "END" },
-      ],
-      liveData: [],
-    };
+
+const router = useRouter();
+
+const total = ref(0);
+const searchForm = reactive({
+  pageSize: 20,
+  pageNumber: 1,
+  status: "NEW",
+});
+const tabs = ref([
+  { title: "直播中", status: "START" },
+  { title: "未开始", status: "NEW" },
+  { title: "已结束", status: "END" },
+]);
+const liveData = ref([]);
+
+watch(
+  () => searchForm.status,
+  () => {
+    liveData.value = [];
+    getStoreLives();
   },
-  watch: {
-    "searchForm.status": {
-      handler() {
-        this.liveData = [];
-        this.getStoreLives();
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.getStoreLives();
-  },
-  methods: {
-    async star(val, index) {
-      const switched = this.liveData[index].recommend;
-      try {
-        const res = await whetherStar({ id: val.id, recommend: switched });
-        if (res.success) {
-          this.getStoreLives();
-          return;
-        }
-        this.liveData[index].recommend = !switched;
-      } catch (e) {
-        this.liveData[index].recommend = !switched;
-      }
-    },
-    changePageSize(val) {
-      this.searchForm.pageSize = val;
-      this.getStoreLives();
-    },
-    changePageNumber(val) {
-      this.searchForm.pageNumber = val;
-      this.getStoreLives();
-    },
-    async getStoreLives() {
-      let result = await getLiveList(this.searchForm);
-      if (result.success) {
-        this.liveData = result.result.records;
-        this.total = result.result.total;
-      }
-    },
-    getLiveDetail(val) {
-      this.$router.push({
-        path: "/live-detail",
-        query: { ...val, liveStatus: this.searchForm.status },
-      });
-    },
-  },
-};
+  { deep: true }
+);
+
+onMounted(() => {
+  getStoreLives();
+});
+
+async function star(val, index) {
+  const switched = liveData.value[index].recommend;
+  try {
+    const res = await whetherStar({ id: val.id, recommend: switched });
+    if (res.success) {
+      getStoreLives();
+      return;
+    }
+    liveData.value[index].recommend = !switched;
+  } catch (e) {
+    liveData.value[index].recommend = !switched;
+  }
+}
+
+function changePageSize(val) {
+  searchForm.pageSize = val;
+  getStoreLives();
+}
+
+function changePageNumber(val) {
+  searchForm.pageNumber = val;
+  getStoreLives();
+}
+
+async function getStoreLives() {
+  let result = await getLiveList(searchForm);
+  if (result.success) {
+    liveData.value = result.result.records;
+    total.value = result.result.total;
+  }
+}
+
+function getLiveDetail(val) {
+  router.push({
+    path: "/live-detail",
+    query: { ...val, liveStatus: searchForm.status },
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/live/liveGoods.vue b/seller/src/views/promotion/live/liveGoods.vue
index 54498b7c9..2e13bd2c7 100644
--- a/seller/src/views/promotion/live/liveGoods.vue
+++ b/seller/src/views/promotion/live/liveGoods.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-card>
-      <el-form :model="liveForm" ref="liveForm" :rules="liveRulesForm" label-width="120px">
+      <el-form :model="liveForm" ref="liveFormRef" :rules="liveRulesForm" label-width="120px">
         <el-form-item label="直播标题" prop="name">
           <div class="form-field-block">
             <el-input disabled v-model="liveForm.name" style="width:460px"></el-input>
@@ -124,68 +124,76 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getLiveInfo } from "@/api/promotion.js";
-export default {
-  data() {
-    return {
-      imageVisible: false,
-      imageSrc: "",
-      liveForm: {
-        name: "",
-        anchorName: "",
-        anchorWechat: "",
-        feedsImg: "",
-        coverImg: "",
-        shareImg: "",
-        startTime: "",
-      },
-      times: [],
-      liveData: [],
-      commodityList: "",
-    };
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      this.getLiveDetail();
+import { Notice } from "@/utils/message";
+import { getStore } from "@/libs/storage";
+import { unixToDate } from "@/utils/filters";
+
+const route = useRoute();
+
+const imageVisible = ref(false);
+const imageSrc = ref("");
+const liveForm = reactive({
+  name: "",
+  anchorName: "",
+  anchorWechat: "",
+  feedsImg: "",
+  coverImg: "",
+  shareImg: "",
+  startTime: "",
+});
+const times = ref([]);
+const liveData = ref([]);
+const commodityList = ref("");
+
+// liveFormRef：模板 ref 改名避免与 liveForm 变量互相覆盖
+const liveFormRef = ref(null);
+
+// 原代码未在 data 声明、直接挂 this 的字段，script setup 下需显式声明
+let accessToken;
+let liveStatus;
+
+onMounted(() => {
+  if (route.query.id) {
+    getLiveDetail();
+  }
+  accessToken = {
+    accessToken: getStore("accessToken"),
+  };
+});
+
+function handleView(src) {
+  imageVisible.value = true;
+  imageSrc.value = src;
+}
+function handleMaxSize(file) {
+  Notice.warning({
+    title: "文件大小过大",
+    desc: "所选文件大小过大, 不得超过 1M.",
+  });
+}
+async function getLiveDetail() {
+  let result = await getLiveInfo(route.query.id);
+
+  if (result.success) {
+    let data = result.result;
+    for (let key in data) {
+      liveForm[key] = data[key];
     }
-    this.accessToken = {
-      accessToken: this.getStore("accessToken"),
-    };
-  },
 
-  methods: {
-    handleView(src) {
-      this.imageVisible = true;
-      this.imageSrc = src;
-    },
-    handleMaxSize(file) {
-      this.$Notice.warning({
-        title: "文件大小过大",
-        desc: "所选文件大小过大, 不得超过 1M.",
-      });
-    },
-    async getLiveDetail() {
-      let result = await getLiveInfo(this.$route.query.id);
+    liveData.value = data.commodityList;
+    commodityList.value = data.commodityList;
 
-      if (result.success) {
-        let data = result.result;
-        for (let key in data) {
-          this.liveForm[key] = data[key];
-        }
-
-        this.liveData = data.commodityList;
-        this.commodityList = data.commodityList;
-
-        this.times = [
-          this.$filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
-          this.$filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
-        ];
-        this.liveStatus = data.status;
-      }
-    },
-  },
-};
+    times.value = [
+      unixToDate(data.startTime, "yyyy-MM-dd hh:mm"),
+      unixToDate(data.endTime, "yyyy-MM-dd hh:mm"),
+    ];
+    liveStatus = data.status;
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/nth-item-discount/nth-item-discount-add.vue b/seller/src/views/promotion/nth-item-discount/nth-item-discount-add.vue
index 8171cf06b..8ada649a4 100644
--- a/seller/src/views/promotion/nth-item-discount/nth-item-discount-add.vue
+++ b/seller/src/views/promotion/nth-item-discount/nth-item-discount-add.vue
@@ -50,77 +50,80 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getNthItemDiscountDetail, saveNthItemDiscount, editNthItemDiscount } from "@/api/promotion.js";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  data() {
-    return {
-      form: {
-        promotionName: "",
-        rangeTime: [],
-        nthNum: 2,
-        discountType: "HALF",
-        discountValue: 8,
-        description: "",
-        scopeType: "PORTION_GOODS",
-        promotionGoodsList: [],
-      },
-    };
-  },
-  mounted() {
-    if (this.$route.query.id) {
-      getNthItemDiscountDetail(this.$route.query.id).then((res) => {
-        if (res.success) {
-          Object.assign(this.form, res.result);
-          this.form.rangeTime = [new Date(res.result.startTime), new Date(res.result.endTime)];
-        }
+const route = useRoute();
+const router = useRouter();
+
+const liliDialog = ref(null);
+
+const form = reactive({
+  promotionName: "",
+  rangeTime: [],
+  nthNum: 2,
+  discountType: "HALF",
+  discountValue: 8,
+  description: "",
+  scopeType: "PORTION_GOODS",
+  promotionGoodsList: [],
+});
+
+onMounted(() => {
+  if (route.query.id) {
+    getNthItemDiscountDetail(route.query.id).then((res) => {
+      if (res.success) {
+        Object.assign(form, res.result);
+        form.rangeTime = [new Date(res.result.startTime), new Date(res.result.endTime)];
+      }
+    });
+  }
+});
+
+function openGoods() {
+  liliDialog.value.open("goods");
+}
+function selectedGoods(list) {
+  list.forEach((g) => {
+    if (!form.promotionGoodsList.find((i) => i.skuId === g.id)) {
+      form.promotionGoodsList.push({
+        skuId: g.id,
+        goodsId: g.goodsId,
+        goodsName: g.goodsName,
+        originalPrice: g.price,
+        price: g.price,
+        quantity: g.quantity,
       });
     }
-  },
-  methods: {
-    openGoods() {
-      this.$refs.liliDialog.open("goods");
-    },
-    selectedGoods(list) {
-      list.forEach((g) => {
-        if (!this.form.promotionGoodsList.find((i) => i.skuId === g.id)) {
-          this.form.promotionGoodsList.push({
-            skuId: g.id,
-            goodsId: g.goodsId,
-            goodsName: g.goodsName,
-            originalPrice: g.price,
-            price: g.price,
-            quantity: g.quantity,
-          });
-        }
-      });
-    },
-    submit() {
-      const payload = { ...this.form };
-      if (payload.rangeTime && payload.rangeTime.length === 2) {
-        const start =
-          payload.rangeTime[0] instanceof Date
-            ? payload.rangeTime[0]
-            : new Date(payload.rangeTime[0]);
-        const end =
-          payload.rangeTime[1] instanceof Date
-            ? payload.rangeTime[1]
-            : new Date(payload.rangeTime[1]);
-        payload.startTime = this.$filters.unixToDate(start.getTime() / 1000);
-        payload.endTime = this.$filters.unixToDate(end.getTime() / 1000);
-      }
-      delete payload.rangeTime;
-      const req = payload.id ? editNthItemDiscount(payload) : saveNthItemDiscount(payload);
-      req.then((res) => {
-        if (res.success) {
-          this.$Message.success("保存成功");
-          this.$router.back();
-        }
-      });
-    },
-  },
-};
+  });
+}
+function submit() {
+  const payload = { ...form };
+  if (payload.rangeTime && payload.rangeTime.length === 2) {
+    const start =
+      payload.rangeTime[0] instanceof Date
+        ? payload.rangeTime[0]
+        : new Date(payload.rangeTime[0]);
+    const end =
+      payload.rangeTime[1] instanceof Date
+        ? payload.rangeTime[1]
+        : new Date(payload.rangeTime[1]);
+    payload.startTime = unixToDate(start.getTime() / 1000);
+    payload.endTime = unixToDate(end.getTime() / 1000);
+  }
+  delete payload.rangeTime;
+  const req = payload.id ? editNthItemDiscount(payload) : saveNthItemDiscount(payload);
+  req.then((res) => {
+    if (res.success) {
+      Message.success("保存成功");
+      router.back();
+    }
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/nth-item-discount/nth-item-discount.vue b/seller/src/views/promotion/nth-item-discount/nth-item-discount.vue
index 623e78ee8..90fb4265d 100644
--- a/seller/src/views/promotion/nth-item-discount/nth-item-discount.vue
+++ b/seller/src/views/promotion/nth-item-discount/nth-item-discount.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form" @keyup.enter="handleSearch">
         <el-form-item label="活动名称" prop="promotionName">
           <el-input v-model="searchForm.promotionName" placeholder="请输入活动名称" clearable style="width: 240px" />
         </el-form-item>
@@ -54,61 +54,63 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getNthItemDiscountList, updateNthItemDiscountStatus } from "@/api/promotion.js";
+import { Message } from "@/utils/message";
 
-export default {
-  data() {
-    return {
-      loading: false,
-      total: 0,
-      data: [],
-      searchForm: { pageNumber: 1, pageSize: 20, sort: "createTime", order: "desc" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    statusText(s) {
-      return { NEW: "未开始", START: "进行中", END: "已结束", CLOSE: "已关闭" }[s] || s;
-    },
-    statusType(s) {
-      return { NEW: "info", START: "success", END: "danger", CLOSE: "danger" }[s] || "info";
-    },
-    discountTypeText(t) {
-      return { HALF: "半价", FREE: "免单", RATE: "打折" }[t] || t;
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getNthItemDiscountList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    goAdd() {
-      this.$router.push({ name: "nth-item-discount-add" });
-    },
-    goEdit(row) {
-      this.$router.push({ name: "nth-item-discount-add", query: { id: row.id } });
-    },
-    toggleStatus(row) {
-      updateNthItemDiscountStatus(row.id).then((res) => {
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getDataList();
-        }
-      });
-    },
-  },
-};
+const router = useRouter();
+
+const loading = ref(false);
+const total = ref(0);
+const data = ref([]);
+const searchForm = reactive({ pageNumber: 1, pageSize: 20, sort: "createTime", order: "desc" });
+
+// searchFormRef：模板 ref 改名避免与顶层变量 searchForm 互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  getDataList();
+});
+
+function statusText(s) {
+  return { NEW: "未开始", START: "进行中", END: "已结束", CLOSE: "已关闭" }[s] || s;
+}
+function statusType(s) {
+  return { NEW: "info", START: "success", END: "danger", CLOSE: "danger" }[s] || "info";
+}
+function discountTypeText(t) {
+  return { HALF: "半价", FREE: "免单", RATE: "打折" }[t] || t;
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  getNthItemDiscountList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function goAdd() {
+  router.push({ name: "nth-item-discount-add" });
+}
+function goEdit(row) {
+  router.push({ name: "nth-item-discount-add", query: { id: row.id } });
+}
+function toggleStatus(row) {
+  updateNthItemDiscountStatus(row.id).then((res) => {
+    if (res.success) {
+      Message.success("操作成功");
+      getDataList();
+    }
+  });
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/promotion/pintuan/pintuan-edit.vue b/seller/src/views/promotion/pintuan/pintuan-edit.vue
index dadec96c2..7c81a7769 100644
--- a/seller/src/views/promotion/pintuan/pintuan-edit.vue
+++ b/seller/src/views/promotion/pintuan/pintuan-edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="new-pintuan">
     <el-card>
-      <el-form ref="form" :model="form" label-width="130px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="130px" :rules="formValidate">
         <el-form-item label="活动名称" prop="promotionName">
           <div class="form-field-block">
             <el-input
@@ -80,115 +80,118 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { savePintuan, editPintuan, getPintuanDetail } from "@/api/promotion";
+import { Message } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  data() {
-    return {
-      id: this.$route.query.id,
-      form: {
-        promotionName: "",
-        promotionTitle: "",
-        pintuanRule: "",
-        requiredNum: "",
-        fictitious: 0,
-        limitNum: "",
-        startTime: "",
-        endTime: "",
-        rangeTime: [],
-      },
-      formValidate: {
-        promotionName: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
-        requiredNum: [
-          { required: true, message: "成团人数不能为空", trigger: "blur" },
-          {
-            pattern: /^([2-9]|10)?$/,
-            message: "成团人数不合法",
-            trigger: "blur",
-          },
-        ],
-        limitNum: [
-          { required: true, message: "限购数量不能为空", trigger: "blur" },
-          {
-            pattern: /^(0|[1-9]\d?|100)$/,
-            message: "限购数量不合法",
-            trigger: "blur",
-          },
-        ],
-        rangeTime: [{ required: true, message: "请选择活动时间", trigger: "change" }],
-      },
-      submitLoading: false,
-      options: {
-        disabledDate(date) {
-          return date && date.valueOf() < Date.now() - 86400000;
-        },
-      },
-    };
+const route = useRoute();
+const router = useRouter();
+
+const id = ref(route.query.id);
+const form = ref({
+  promotionName: "",
+  promotionTitle: "",
+  pintuanRule: "",
+  requiredNum: "",
+  fictitious: 0,
+  limitNum: "",
+  startTime: "",
+  endTime: "",
+  rangeTime: [],
+});
+const formValidate = ref({
+  promotionName: [{ required: true, message: "活动名称不能为空", trigger: "blur" }],
+  requiredNum: [
+    { required: true, message: "成团人数不能为空", trigger: "blur" },
+    {
+      pattern: /^([2-9]|10)?$/,
+      message: "成团人数不合法",
+      trigger: "blur",
+    },
+  ],
+  limitNum: [
+    { required: true, message: "限购数量不能为空", trigger: "blur" },
+    {
+      pattern: /^(0|[1-9]\d?|100)$/,
+      message: "限购数量不合法",
+      trigger: "blur",
+    },
+  ],
+  rangeTime: [{ required: true, message: "请选择活动时间", trigger: "change" }],
+});
+const submitLoading = ref(false);
+const options = ref({
+  disabledDate(date) {
+    return date && date.valueOf() < Date.now() - 86400000;
   },
-  mounted() {
-    if (this.id) {
-      this.getDetail();
+});
+
+const formRef = ref(null);
+
+onMounted(() => {
+  if (id.value) {
+    getDetail();
+  }
+});
+
+function closeCurrentPage() {
+  router.back();
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (!valid) return;
+    submitLoading.value = true;
+    const params = JSON.parse(JSON.stringify(form.value));
+    params.fictitious = !!params.fictitious;
+    params.startTime = unixToDate(form.value.rangeTime[0] / 1000);
+    params.endTime = unixToDate(form.value.rangeTime[1] / 1000);
+
+    if (!params.startTime || !params.endTime) {
+      Message.error("活动时间不能为空");
+      submitLoading.value = false;
+      return;
+    }
+    if (new Date(params.startTime).getTime() < Date.now()) {
+      Message.error("拼团活动开始时间不能小于当前时间");
+      submitLoading.value = false;
+      return;
     }
-  },
-  methods: {
-    closeCurrentPage() {
-      this.$router.back();
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (!valid) return;
-        this.submitLoading = true;
-        const params = JSON.parse(JSON.stringify(this.form));
-        params.fictitious = !!params.fictitious;
-        params.startTime = this.$filters.unixToDate(this.form.rangeTime[0] / 1000);
-        params.endTime = this.$filters.unixToDate(this.form.rangeTime[1] / 1000);
 
-        if (!params.startTime || !params.endTime) {
-          this.$Message.error("活动时间不能为空");
-          this.submitLoading = false;
-          return;
-        }
-        if (new Date(params.startTime).getTime() < Date.now()) {
-          this.$Message.error("拼团活动开始时间不能小于当前时间");
-          this.submitLoading = false;
-          return;
-        }
-
-        delete params.rangeTime;
-        if (!this.id) {
-          delete params.id;
-          savePintuan(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("拼团活动添加成功");
-              this.closeCurrentPage();
-            }
-          });
-        } else {
-          if (params.promotionGoodsList === "") delete params.promotionGoodsList;
-          editPintuan(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("编辑成功");
-              this.closeCurrentPage();
-            }
-          });
-        }
-      });
-    },
-    getDetail() {
-      getPintuanDetail(this.id).then((res) => {
+    delete params.rangeTime;
+    if (!id.value) {
+      delete params.id;
+      savePintuan(params).then((res) => {
+        submitLoading.value = false;
         if (res.success) {
-          const data = res.result;
-          data.rangeTime = [new Date(data.startTime), new Date(data.endTime)];
-          this.form = data;
-          this.form.fictitious = data.fictitious ? 1 : 0;
+          Message.success("拼团活动添加成功");
+          closeCurrentPage();
         }
       });
-    },
-  },
-};
+    } else {
+      if (params.promotionGoodsList === "") delete params.promotionGoodsList;
+      editPintuan(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("编辑成功");
+          closeCurrentPage();
+        }
+      });
+    }
+  });
+}
+function getDetail() {
+  getPintuanDetail(id.value).then((res) => {
+    if (res.success) {
+      const data = res.result;
+      data.rangeTime = [new Date(data.startTime), new Date(data.endTime)];
+      form.value = data;
+      form.value.fictitious = data.fictitious ? 1 : 0;
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/pintuan/pintuan-goods.vue b/seller/src/views/promotion/pintuan/pintuan-goods.vue
index 7392f6165..6a63d3dc7 100644
--- a/seller/src/views/promotion/pintuan/pintuan-goods.vue
+++ b/seller/src/views/promotion/pintuan/pintuan-goods.vue
@@ -125,209 +125,226 @@
       </div>
     </el-card>
 
-    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getPintuanGoodsList, getPintuanDetail, editPintuan } from "@/api/promotion.js";
 import liliDialog from "@/views/lili-dialog";
 import vueQr from "vue-qr";
 import { promotionPriceMin } from "@/constants/goodsType";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  components: { liliDialog, vueQr },
-  data() {
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false);
+const submitLoading = ref(false);
+const promotionStatus = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+const goodsData = ref([]);
+const selectList = ref([]);
+const selectCount = ref(0);
+
+// liliDialogRef：模板 ref 改名避免与 import 的组件同名互相覆盖
+const liliDialogRef = ref(null);
+const table = ref(null);
+
+const readonly = computed(() => {
+  return route.query.status === "view" || promotionStatus.value !== "NEW";
+});
+
+onMounted(() => {
+  init();
+});
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+
+function closeCurrentPage() {
+  router.back();
+}
+
+function init() {
+  getPintuanMsg();
+}
+
+function changePage() {
+  getDataList();
+}
+
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getPintuanMsg() {
+  getPintuanDetail(route.query.id).then((res) => {
+    if (res.success && res.result) {
+      data.value = [res.result];
+      promotionStatus.value = res.result.promotionStatus;
+      getDataList();
+    }
+  });
+}
+
+function getDataList() {
+  loading.value = true;
+  const params = {
+    pintuanId: route.query.id,
+    pageNumber: readonly.value ? searchForm.pageNumber : 1,
+    pageSize: readonly.value ? searchForm.pageSize : 1000,
+  };
+  getPintuanGoodsList(params).then((res) => {
+    loading.value = false;
+    if (res.success && res.result) {
+      const serverRecords = res.result.records || [];
+      goodsData.value = readonly.value
+        ? serverRecords
+        : mergeGoodsData(serverRecords);
+      total.value = res.result.total || 0;
+    }
+  });
+}
+
+function mergeGoodsData(serverRecords) {
+  const localMap = new Map(goodsData.value.map((item) => [item.skuId, item]));
+  const serverSkuIds = new Set(serverRecords.map((item) => item.skuId));
+
+  const merged = serverRecords.map((serverItem) => {
+    const local = localMap.get(serverItem.skuId);
+    return local ? { ...serverItem, price: local.price } : serverItem;
+  });
+
+  const unsavedItems = goodsData.value.filter(
+    (item) => item.skuId && !serverSkuIds.has(item.skuId)
+  );
+  return [...merged, ...unsavedItems];
+}
+
+function openSkuList() {
+  const data = JSON.parse(JSON.stringify(goodsData.value));
+  data.forEach((e) => {
+    e.id = e.skuId;
+  });
+  liliDialogRef.value.goodsData = data;
+  liliDialogRef.value.open("goods");
+}
+
+function selectedGoodsData(selected) {
+  const existingMap = new Map(goodsData.value.map((item) => [item.skuId, item]));
+  goodsData.value = selected.map((item) => {
+    const existed = existingMap.get(item.id);
+    if (existed) {
+      return existed;
+    }
     return {
-      loading: false,
-      submitLoading: false,
-      promotionStatus: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-      goodsData: [],
-      selectList: [],
-      selectCount: 0,
+      goodsName: item.goodsName,
+      price: item.price,
+      originalPrice: item.price,
+      quantity: item.quantity,
+      storeId: item.storeId,
+      sellerName: item.sellerName,
+      thumbnail: item.thumbnail,
+      skuId: item.id,
+      categoryPath: item.categoryPath,
+      goodsId: item.goodsId,
+      goodsType: item.goodsType,
     };
-  },
-  computed: {
-    readonly() {
-      return this.$route.query.status === "view" || this.promotionStatus !== "NEW";
-    },
-  },
-  methods: {
-    promotionPriceMin,
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    closeCurrentPage() {
-      this.$router.back();
-    },
-    init() {
-      this.getPintuanMsg();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getPintuanMsg() {
-      getPintuanDetail(this.$route.query.id).then((res) => {
-        if (res.success && res.result) {
-          this.data = [res.result];
-          this.promotionStatus = res.result.promotionStatus;
-          this.getDataList();
-        }
-      });
-    },
-    getDataList() {
-      this.loading = true;
-      const params = {
-        pintuanId: this.$route.query.id,
-        pageNumber: this.readonly ? this.searchForm.pageNumber : 1,
-        pageSize: this.readonly ? this.searchForm.pageSize : 1000,
-      };
-      getPintuanGoodsList(params).then((res) => {
-        this.loading = false;
-        if (res.success && res.result) {
-          const serverRecords = res.result.records || [];
-          this.goodsData = this.readonly
-            ? serverRecords
-            : this.mergeGoodsData(serverRecords);
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    mergeGoodsData(serverRecords) {
-      const localMap = new Map(this.goodsData.map((item) => [item.skuId, item]));
-      const serverSkuIds = new Set(serverRecords.map((item) => item.skuId));
+  });
+  clearSelectAll();
+}
 
-      const merged = serverRecords.map((serverItem) => {
-        const local = localMap.get(serverItem.skuId);
-        return local ? { ...serverItem, price: local.price } : serverItem;
-      });
+function updateGoodsPrice(index, value) {
+  if (goodsData.value[index]) {
+    goodsData.value[index].price = value;
+  }
+}
 
-      const unsavedItems = this.goodsData.filter(
-        (item) => item.skuId && !serverSkuIds.has(item.skuId)
-      );
-      return [...merged, ...unsavedItems];
+function changeSelect(selection) {
+  selectList.value = selection;
+  selectCount.value = selection.length;
+}
+
+function clearSelectAll() {
+  table.value?.clearSelection();
+  selectList.value = [];
+  selectCount.value = 0;
+}
+
+function delGoods(index) {
+  goodsData.value.splice(index, 1);
+  selectCount.value = 0;
+}
+
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: `您确认要删除所选 ${selectCount.value} 项数据?`,
+    onOk: () => {
+      const ids = selectList.value.map((e) => e.skuId);
+      goodsData.value = goodsData.value.filter((item) => !ids.includes(item.skuId));
+      clearSelectAll();
     },
-    openSkuList() {
-      const data = JSON.parse(JSON.stringify(this.goodsData));
-      data.forEach((e) => {
-        e.id = e.skuId;
-      });
-      this.$refs.liliDialog.goodsData = data;
-      this.$refs.liliDialog.open("goods");
-    },
-    selectedGoodsData(selected) {
-      const existingMap = new Map(this.goodsData.map((item) => [item.skuId, item]));
-      this.goodsData = selected.map((item) => {
-        const existed = existingMap.get(item.id);
-        if (existed) {
-          return existed;
-        }
-        return {
-          goodsName: item.goodsName,
-          price: item.price,
-          originalPrice: item.price,
-          quantity: item.quantity,
-          storeId: item.storeId,
-          sellerName: item.sellerName,
-          thumbnail: item.thumbnail,
-          skuId: item.id,
-          categoryPath: item.categoryPath,
-          goodsId: item.goodsId,
-          goodsType: item.goodsType,
-        };
-      });
-      this.clearSelectAll();
-    },
-    updateGoodsPrice(index, value) {
-      if (this.goodsData[index]) {
-        this.goodsData[index].price = value;
-      }
-    },
-    changeSelect(selection) {
-      this.selectList = selection;
-      this.selectCount = selection.length;
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-      this.selectList = [];
-      this.selectCount = 0;
-    },
-    delGoods(index) {
-      this.goodsData.splice(index, 1);
-      this.selectCount = 0;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: `您确认要删除所选 ${this.selectCount} 项数据?`,
-        onOk: () => {
-          const ids = this.selectList.map((e) => e.skuId);
-          this.goodsData = this.goodsData.filter((item) => !ids.includes(item.skuId));
-          this.clearSelectAll();
-        },
-      });
-    },
-    save() {
-      if (!this.goodsData.length) {
-        this.$Message.warning("请选择活动商品");
-        return;
-      }
-      for (const item of this.goodsData) {
-        if (item.price === "" || item.price === null || item.price === undefined) {
-          this.$Message.warning(`请填写【${item.goodsName}】的价格`);
-          return;
-        }
-      }
-      const params = JSON.parse(JSON.stringify(this.data[0]));
-      params.promotionGoodsList = this.goodsData.map((item) => ({
-        ...item,
-        promotionId: params.id,
-        startTime: params.startTime,
-        endTime: params.endTime,
-      }));
-      this.submitLoading = true;
-      editPintuan(params).then((res) => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("修改拼团商品成功");
-          this.closeCurrentPage();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+function save() {
+  if (!goodsData.value.length) {
+    Message.warning("请选择活动商品");
+    return;
+  }
+  for (const item of goodsData.value) {
+    if (item.price === "" || item.price === null || item.price === undefined) {
+      Message.warning(`请填写【${item.goodsName}】的价格`);
+      return;
+    }
+  }
+  const params = JSON.parse(JSON.stringify(data.value[0]));
+  params.promotionGoodsList = goodsData.value.map((item) => ({
+    ...item,
+    promotionId: params.id,
+    startTime: params.startTime,
+    endTime: params.endTime,
+  }));
+  submitLoading.value = true;
+  editPintuan(params).then((res) => {
+    submitLoading.value = false;
+    if (res.success) {
+      Message.success("修改拼团商品成功");
+      closeCurrentPage();
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/pintuan/pintuan.vue b/seller/src/views/promotion/pintuan/pintuan.vue
index 64a1f9c1c..d7d267c75 100644
--- a/seller/src/views/promotion/pintuan/pintuan.vue
+++ b/seller/src/views/promotion/pintuan/pintuan.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -113,135 +113,139 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getPintuanList, editPintuanStatus } from "@/api/promotion";
-export default {
-  name: "pintuan",
-  data() {
-    return {
-      selectDate: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        promotionName: "",
-        promotionStatus: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
+import { Message, Modal } from "@/utils/message";
+
+defineOptions({ name: "pintuan" });
+
+const router = useRouter();
+
+const selectDate = ref([]);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  promotionName: "",
+  promotionStatus: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  getPintuanList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      getPintuanList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    newAct() {
-      this.$router.push({ name: "pintuan-edit" });
-    },
-    edit(v) {
-      this.$router.push({ name: "pintuan-edit", query: { id: v.id } });
-    },
-    manage(v, status) {
-      this.$router.push({ name: "pintuan-goods", query: { id: v.id, status } });
-    },
-    open(v) {
-      const sTime = new Date();
-      sTime.setMinutes(sTime.getMinutes() + 10);
-      const eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
-      const params = {
-        startTime: sTime.getTime(),
-        endTime: eTime.getTime(),
-      };
-      this.$Modal.confirm({
-        title: "确认开启",
-        content: "您确认要开启此拼团活动？（默认为当前时间后十分钟至当天结束）",
-        loading: true,
-        onOk: () => {
-          editPintuanStatus(v.id, params).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("开启活动成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function newAct() {
+  router.push({ name: "pintuan-edit" });
+}
+function edit(v) {
+  router.push({ name: "pintuan-edit", query: { id: v.id } });
+}
+function manage(v, status) {
+  router.push({ name: "pintuan-goods", query: { id: v.id, status } });
+}
+function open(v) {
+  const sTime = new Date();
+  sTime.setMinutes(sTime.getMinutes() + 10);
+  const eTime = new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1);
+  const params = {
+    startTime: sTime.getTime(),
+    endTime: eTime.getTime(),
+  };
+  Modal.confirm({
+    title: "确认开启",
+    content: "您确认要开启此拼团活动？（默认为当前时间后十分钟至当天结束）",
+    loading: true,
+    onOk: () => {
+      editPintuanStatus(v.id, params).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("开启活动成功");
+          getDataList();
+        }
       });
     },
-    close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "您确认要关闭此拼团活动?",
-        loading: true,
-        onOk: () => {
-          editPintuanStatus(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("关闭活动成功");
-              this.getDataList();
-            }
-          });
-        },
+  });
+}
+function close(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "您确认要关闭此拼团活动?",
+    loading: true,
+    onOk: () => {
+      editPintuanStatus(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("关闭活动成功");
+          getDataList();
+        }
       });
     },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/seckill/seckill-goods.vue b/seller/src/views/promotion/seckill/seckill-goods.vue
index aa2bb8f8d..0cd20dc81 100644
--- a/seller/src/views/promotion/seckill/seckill-goods.vue
+++ b/seller/src/views/promotion/seckill/seckill-goods.vue
@@ -173,11 +173,13 @@
       </div>
     </el-card>
 
-    <liliDialog ref="liliDialog" @selectedGoodsData="selectedGoodsData" />
+    <liliDialog ref="liliDialogRef" @selectedGoodsData="selectedGoodsData" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   seckillGoodsList,
   seckillDetail,
@@ -186,246 +188,243 @@ import {
 } from "@/api/promotion.js";
 import liliDialog from "@/views/lili-dialog";
 import { promotionPriceMin } from "@/constants/goodsType";
+import { Message, Modal } from "@/utils/message";
+import { unixToDate } from "@/utils/filters";
 
-export default {
-  components: {
-    liliDialog,
-  },
-  data() {
+const route = useRoute();
+const router = useRouter();
+
+const tabCurrent = ref("0");
+const promotionStatus = ref("");
+const loading = ref(false);
+const submitLoading = ref(false);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const total = ref(0);
+const data = ref([]);
+const goodsList = ref([]);
+const readonlyGoodsList = ref([]);
+
+// liliDialogRef：模板 ref 改名避免与 import 的组件同名互相覆盖
+const liliDialogRef = ref(null);
+
+const readonly = computed(() => {
+  return route.query.mode === "view" || promotionStatus.value !== "NEW";
+});
+const tabIndex = computed(() => {
+  return Number(tabCurrent.value) || 0;
+});
+
+onMounted(() => {
+  init();
+});
+
+function seckillStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || status || "-";
+}
+function seckillStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+function applyStatusText(status) {
+  const map = {
+    APPLY: "申请中",
+    PASS: "已通过",
+    REFUSE: "已拒绝",
+  };
+  return map[status] || "未申请";
+}
+function applyStatusTagType(status) {
+  const map = {
+    APPLY: "warning",
+    PASS: "success",
+    REFUSE: "danger",
+  };
+  return map[status] || "info";
+}
+function closeCurrentPage() {
+  router.back();
+}
+function init() {
+  getSeckillMsg();
+}
+function changePage() {
+  getReadonlyGoodsList();
+}
+function changePageSize() {
+  searchForm.pageNumber = 1;
+  getReadonlyGoodsList();
+}
+function getSeckillMsg() {
+  seckillDetail(route.query.id).then((res) => {
+    if (res.success && res.result) {
+      data.value = [res.result];
+      promotionStatus.value = res.result.promotionStatus;
+      if (readonly.value) {
+        getReadonlyGoodsList();
+      } else {
+        getManageGoodsList();
+      }
+    }
+  });
+}
+function getManageGoodsList() {
+  if (!data.value[0]?.hours) {
+    return;
+  }
+  loading.value = true;
+  const hourValues = data.value[0].hours.split(",");
+  const hourLabels = unixHours(data.value[0].hours);
+  goodsList.value = hourLabels.map((hour, index) => ({
+    hour,
+    timeLine: hourValues[index],
+    list: [],
+  }));
+
+  seckillGoodsList({
+    seckillId: route.query.id,
+    pageNumber: 1,
+    pageSize: 1000,
+  }).then((res) => {
+    loading.value = false;
+    if (res.success && res.result?.records?.length) {
+      res.result.records.forEach((item) => {
+        const slot = goodsList.value.find(
+          (g) => String(g.timeLine) === String(item.timeLine)
+        );
+        if (slot) {
+          slot.list.push(item);
+        }
+      });
+    }
+  });
+}
+function getReadonlyGoodsList() {
+  loading.value = true;
+  searchForm.seckillId = route.query.id;
+  seckillGoodsList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success && res.result) {
+      readonlyGoodsList.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function openSkuList() {
+  const existing = goodsList.value[tabIndex.value]?.list || [];
+  liliDialogRef.value.goodsData = existing.map((item) => ({
+    ...item,
+    id: item.skuId || item.id,
+  }));
+  liliDialogRef.value.open("goods");
+}
+function selectedGoodsData(selected) {
+  const timeLine = goodsList.value[tabIndex.value]?.timeLine;
+  if (timeLine === undefined) {
+    return;
+  }
+  const existingMap = new Map(
+    (goodsList.value[tabIndex.value].list || []).map((item) => [item.skuId, item])
+  );
+  const list = selected.map((item) => {
+    const existed = existingMap.get(item.id);
+    if (existed) {
+      return existed;
+    }
     return {
-      tabCurrent: "0",
-      promotionStatus: "",
-      loading: false,
-      submitLoading: false,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      total: 0,
-      data: [],
-      goodsList: [],
-      readonlyGoodsList: [],
+      goodsName: item.goodsName,
+      price: item.price,
+      originalPrice: item.price,
+      promotionApplyStatus: item.promotionApplyStatus || "",
+      quantity: item.quantity,
+      seckillId: route.query.id,
+      storeId: item.storeId,
+      storeName: item.storeName,
+      skuId: item.id,
+      timeLine,
+      goodsType: item.goodsType,
     };
-  },
-  computed: {
-    readonly() {
-      return this.$route.query.mode === "view" || this.promotionStatus !== "NEW";
-    },
-    tabIndex() {
-      return Number(this.tabCurrent) || 0;
-    },
-  },
-  methods: {
-    promotionPriceMin,
-    seckillStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || status || "-";
-    },
-    seckillStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    applyStatusText(status) {
-      const map = {
-        APPLY: "申请中",
-        PASS: "已通过",
-        REFUSE: "已拒绝",
-      };
-      return map[status] || "未申请";
-    },
-    applyStatusTagType(status) {
-      const map = {
-        APPLY: "warning",
-        PASS: "success",
-        REFUSE: "danger",
-      };
-      return map[status] || "info";
-    },
-    closeCurrentPage() {
-      this.$router.back();
-    },
-    init() {
-      this.getSeckillMsg();
-    },
-    changePage() {
-      this.getReadonlyGoodsList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getReadonlyGoodsList();
-    },
-    getSeckillMsg() {
-      seckillDetail(this.$route.query.id).then((res) => {
-        if (res.success && res.result) {
-          this.data = [res.result];
-          this.promotionStatus = res.result.promotionStatus;
-          if (this.readonly) {
-            this.getReadonlyGoodsList();
-          } else {
-            this.getManageGoodsList();
+  });
+  goodsList.value[tabIndex.value].list = list;
+}
+function updateGoodsField(tabIndex, index, field, value) {
+  if (goodsList.value[tabIndex]?.list?.[index]) {
+    goodsList.value[tabIndex].list[index][field] = value;
+  }
+}
+function delGoods(tabIndex, index, row) {
+  if (row.promotionApplyStatus === "PASS") {
+    Modal.confirm({
+      title: "确认删除",
+      content: "您确认要删除该商品吗？删除后不可恢复",
+      onOk: () => {
+        delSeckillGoods({
+          seckillId: row.seckillId,
+          id: row.id,
+        }).then((res) => {
+          if (res.success) {
+            goodsList.value[tabIndex].list.splice(index, 1);
+            Message.success("删除成功");
           }
-        }
-      });
-    },
-    getManageGoodsList() {
-      if (!this.data[0]?.hours) {
-        return;
-      }
-      this.loading = true;
-      const hourValues = this.data[0].hours.split(",");
-      const hourLabels = this.unixHours(this.data[0].hours);
-      this.goodsList = hourLabels.map((hour, index) => ({
-        hour,
-        timeLine: hourValues[index],
-        list: [],
-      }));
-
-      seckillGoodsList({
-        seckillId: this.$route.query.id,
-        pageNumber: 1,
-        pageSize: 1000,
-      }).then((res) => {
-        this.loading = false;
-        if (res.success && res.result?.records?.length) {
-          res.result.records.forEach((item) => {
-            const slot = this.goodsList.find(
-              (g) => String(g.timeLine) === String(item.timeLine)
-            );
-            if (slot) {
-              slot.list.push(item);
-            }
-          });
-        }
-      });
-    },
-    getReadonlyGoodsList() {
-      this.loading = true;
-      this.searchForm.seckillId = this.$route.query.id;
-      seckillGoodsList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success && res.result) {
-          this.readonlyGoodsList = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    openSkuList() {
-      const existing = this.goodsList[this.tabIndex]?.list || [];
-      this.$refs.liliDialog.goodsData = existing.map((item) => ({
-        ...item,
-        id: item.skuId || item.id,
-      }));
-      this.$refs.liliDialog.open("goods");
-    },
-    selectedGoodsData(selected) {
-      const timeLine = this.goodsList[this.tabIndex]?.timeLine;
-      if (timeLine === undefined) {
-        return;
-      }
-      const existingMap = new Map(
-        (this.goodsList[this.tabIndex].list || []).map((item) => [item.skuId, item])
-      );
-      const list = selected.map((item) => {
-        const existed = existingMap.get(item.id);
-        if (existed) {
-          return existed;
-        }
-        return {
-          goodsName: item.goodsName,
-          price: item.price,
-          originalPrice: item.price,
-          promotionApplyStatus: item.promotionApplyStatus || "",
-          quantity: item.quantity,
-          seckillId: this.$route.query.id,
-          storeId: item.storeId,
-          storeName: item.storeName,
-          skuId: item.id,
-          timeLine,
-          goodsType: item.goodsType,
-        };
-      });
-      this.goodsList[this.tabIndex].list = list;
-    },
-    updateGoodsField(tabIndex, index, field, value) {
-      if (this.goodsList[tabIndex]?.list?.[index]) {
-        this.goodsList[tabIndex].list[index][field] = value;
-      }
-    },
-    delGoods(tabIndex, index, row) {
-      if (row.promotionApplyStatus === "PASS") {
-        this.$Modal.confirm({
-          title: "确认删除",
-          content: "您确认要删除该商品吗？删除后不可恢复",
-          onOk: () => {
-            delSeckillGoods({
-              seckillId: row.seckillId,
-              id: row.id,
-            }).then((res) => {
-              if (res.success) {
-                this.goodsList[tabIndex].list.splice(index, 1);
-                this.$Message.success("删除成功");
-              }
-            });
-          },
         });
-        return;
-      }
-      this.goodsList[tabIndex].list.splice(index, 1);
-      this.$Message.success("删除成功");
-    },
-    save() {
-      const applyVos = [];
-      this.goodsList.forEach((slot) => {
-        slot.list.forEach((item) => {
-          applyVos.push(item);
-        });
-      });
-      if (!applyVos.length) {
-        this.$Message.warning("请先选择活动商品");
-        return;
-      }
-      this.submitLoading = true;
-      setSeckillGoods({
-        seckillId: this.$route.query.id,
-        applyVos,
-      }).then((res) => {
-        this.submitLoading = false;
-        if (res?.success) {
-          this.$Message.success("提交活动商品成功");
-          this.closeCurrentPage();
-        }
-      });
-    },
-    showReason(reason) {
-      this.$Modal.info({
-        title: "拒绝原因",
-        content: reason,
-      });
-    },
-    unixDate(time) {
-      return this.$filters.unixToDate(new Date(time) / 1000);
-    },
-    unixHours(item) {
-      if (!item) {
-        return [];
-      }
-      return item.split(",").map((hour) => `${hour}:00`);
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+      },
+    });
+    return;
+  }
+  goodsList.value[tabIndex].list.splice(index, 1);
+  Message.success("删除成功");
+}
+function save() {
+  const applyVos = [];
+  goodsList.value.forEach((slot) => {
+    slot.list.forEach((item) => {
+      applyVos.push(item);
+    });
+  });
+  if (!applyVos.length) {
+    Message.warning("请先选择活动商品");
+    return;
+  }
+  submitLoading.value = true;
+  setSeckillGoods({
+    seckillId: route.query.id,
+    applyVos,
+  }).then((res) => {
+    submitLoading.value = false;
+    if (res?.success) {
+      Message.success("提交活动商品成功");
+      closeCurrentPage();
+    }
+  });
+}
+function showReason(reason) {
+  Modal.info({
+    title: "拒绝原因",
+    content: reason,
+  });
+}
+function unixDate(time) {
+  return unixToDate(new Date(time) / 1000);
+}
+function unixHours(item) {
+  if (!item) {
+    return [];
+  }
+  return item.split(",").map((hour) => `${hour}:00`);
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/promotion/seckill/seckill.vue b/seller/src/views/promotion/seckill/seckill.vue
index b17ae401a..3a584d14c 100644
--- a/seller/src/views/promotion/seckill/seckill.vue
+++ b/seller/src/views/promotion/seckill/seckill.vue
@@ -2,7 +2,7 @@
   <div class="search seckill">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -108,92 +108,102 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { seckillList } from "@/api/promotion";
 
-export default {
-  name: "seckill",
-  data() {
-    return {
-      selectDate: [],
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    promotionStatusText(status) {
-      const map = {
-        NEW: "未开始",
-        START: "已开始",
-        END: "已结束",
-        CLOSE: "已关闭",
-      };
-      return map[status] || "未知";
-    },
-    promotionStatusTagType(status) {
-      const map = {
-        NEW: "info",
-        START: "success",
-        END: "danger",
-        CLOSE: "danger",
-      };
-      return map[status] || "danger";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 20;
-      this.getDataList();
-    },
-    view(v) {
-      this.$router.push({ name: "seckill-goods", query: { id: v.id, mode: "view" } });
-    },
-    manage(v) {
-      this.$router.push({ name: "seckill-goods", query: { id: v.id } });
-    },
-    getDataList() {
-      this.loading = true;
-      if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
-        this.searchForm.startTime = new Date(this.selectDate[0]).getTime();
-        this.searchForm.endTime = new Date(this.selectDate[1]).getTime();
-      } else {
-        this.searchForm.startTime = null;
-        this.searchForm.endTime = null;
+defineOptions({ name: "seckill" });
+
+const router = useRouter();
+
+const selectDate = ref([]);
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+function promotionStatusText(status) {
+  const map = {
+    NEW: "未开始",
+    START: "已开始",
+    END: "已结束",
+    CLOSE: "已关闭",
+  };
+  return map[status] || "未知";
+}
+
+function promotionStatusTagType(status) {
+  const map = {
+    NEW: "info",
+    START: "success",
+    END: "danger",
+    CLOSE: "danger",
+  };
+  return map[status] || "danger";
+}
+
+function init() {
+  getDataList();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 20;
+  getDataList();
+}
+
+function view(v) {
+  router.push({ name: "seckill-goods", query: { id: v.id, mode: "view" } });
+}
+
+function manage(v) {
+  router.push({ name: "seckill-goods", query: { id: v.id } });
+}
+
+function getDataList() {
+  loading.value = true;
+  if (selectDate.value && selectDate.value[0] && selectDate.value[1]) {
+    searchForm.startTime = new Date(selectDate.value[0]).getTime();
+    searchForm.endTime = new Date(selectDate.value[1]).getTime();
+  } else {
+    searchForm.startTime = null;
+    searchForm.endTime = null;
+  }
+  seckillList(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records;
+        total.value = res.result.total;
       }
-      seckillList(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records;
-            this.total = res.result.total;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/bill/accountStatementBill.vue b/seller/src/views/shop/bill/accountStatementBill.vue
index ab3f3d794..29c03a662 100644
--- a/seller/src/views/shop/bill/accountStatementBill.vue
+++ b/seller/src/views/shop/bill/accountStatementBill.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -87,88 +87,90 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { onBeforeRouteLeave, useRouter } from "vue-router";
 import * as API_Shop from "@/api/shops";
 
-export default {
-  name: "accountStatementBill",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    billStatusText(v) {
-      const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
-      return map[v] || "已付款";
-    },
-    billStatusTagType(v) {
-      const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
-      return map[v] || "success";
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleReset() {
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      };
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      this.searchForm.billStatus = "OUT";
-      API_Shop.getBillPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    detail(v) {
-      this.$router.push({
-        name: "bill-detail",
-        query: { id: v.id },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  beforeRouteLeave(to, from, next) {
-    from.meta.keepAlive = false;
-    next();
-  },
-};
+defineOptions({ name: "accountStatementBill" });
+
+const router = useRouter();
+
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+// searchFormRef：模板 ref 改名避免与顶层变量互相覆盖
+const searchFormRef = ref(null);
+
+onMounted(() => {
+  init();
+});
+
+onBeforeRouteLeave((to, from) => {
+  from.meta.keepAlive = false;
+});
+
+function billStatusText(v) {
+  const map = { OUT: "已出账", CHECK: "已对账", COMPLETE: "已付款" };
+  return map[v] || "已付款";
+}
+function billStatusTagType(v) {
+  const map = { OUT: "primary", CHECK: "warning", COMPLETE: "success" };
+  return map[v] || "success";
+}
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.value.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = v;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleReset() {
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 20,
+    sort: "createTime",
+    order: "desc",
+    startDate: "",
+    endDate: "",
+  };
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  searchForm.value.billStatus = "OUT";
+  API_Shop.getBillPage(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function detail(v) {
+  router.push({
+    name: "bill-detail",
+    query: { id: v.id },
+  });
+}
 </script>
 <style lang="scss" scoped>
 @import "@/styles/table-common.scss";
diff --git a/seller/src/views/shop/bill/billDetail.vue b/seller/src/views/shop/bill/billDetail.vue
index adb7379c6..da15e7f3c 100644
--- a/seller/src/views/shop/bill/billDetail.vue
+++ b/seller/src/views/shop/bill/billDetail.vue
@@ -292,249 +292,252 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onBeforeRouteLeave, useRoute } from "vue-router";
+import { onMounted, reactive, ref, watch } from "vue";
 import * as filters from "@/utils/filters";
 import * as API_Shop from "@/api/shops";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "bill-detail",
-  data() {
-    return {
-      activeTab: "order",
-      loading: false,
-      billData: [
-        {
-          billPrice: 0,
-          orderPrice: 0,
-          siteCouponCommission: 0,
-          pointSettlementPrice: 0,
-          kanjiaSettlementPrice: 0,
-          giftCardSubsidy: 0,
-          distributionCommission: 0,
-          commissionPrice: 0,
-          refundPrice: 0,
-          siteCouponRefundCommission: 0,
-          pointRefundSettlementPrice: 0,
-          kanjiaRefundSettlementPrice: 0,
-          giftCardRefundSubsidy: 0,
-          distributionRefundCommission: 0,
-          refundCommissionPrice: 0,
-        },
-      ],
-      data: [
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-        { name: "计算中", value: 0 },
-      ],
-      id: "",
-      bill: {},
-      orderData: [],
-      orderParam: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "id",
-        order: "desc",
-        startDate: null,
-        endDate: null,
-      },
-      orderTotal: 0,
-      refundTotal: 0,
-      billStatusList: [
-        { status: "OUT", value: "已出账", title: "生成账单" },
-        { status: "CHECK", value: "已对账", title: "商家对账" },
-        { status: "PAY", value: "已付款", title: "平台付款" },
-        { status: "COMPLETE", value: "已完成", title: "结算完成" },
-      ],
-      billStatusStep: [],
-    };
-  },
-  methods: {
-    formatPrice(value) {
-      return this.$filters.unitPrice(value, "￥");
-    },
-    negate(value) {
-      return 0 - value;
-    },
-    isPayFlow(row) {
-      return row.flowType === "PAY";
-    },
-    orderSubsidyTotal(row) {
-      return (
-        row.pointSettlementPrice + row.kanjiaSettlementPrice + row.siteCouponCommission
-      );
-    },
-    orderSubsidyDisplay(row) {
-      if (row.pointSettlementPrice == 0) {
-        return "-";
-      }
-      return this.orderSubsidyTotal(row);
-    },
-    orderCommissionDisplay(row) {
-      return row.commissionPrice == 0 ? "-" : row.commissionPrice;
-    },
-    orderDistributionRebateDisplay(row) {
-      return row.distributionRebate == 0 ? "-" : row.distributionRebate;
-    },
-    orderExpenseTotal(row) {
-      return row.commissionPrice + row.distributionRebate;
-    },
-    getBillStatusStep() {
-      this.billStatusStep = [];
-      let current = "";
-      let myCur = false;
-      let myIdx = 0;
-      this.billStatusList.map((item, index) => {
-        if (item.status === this.bill.billStatus) {
-          myCur = true;
-          myIdx = index;
-          current = "";
-        } else if (!myCur) {
-          current = "";
-        } else if (myIdx + 1 === index) {
-          current = "current";
-        } else {
-          current = "future";
-        }
-        this.billStatusStep.push({ ...item, className: current });
-      });
-      if (this.bill.billStatus === "COMPLETE") {
-        this.billStatusStep[this.billStatusStep.length - 1].className = "current";
-      }
-    },
-    orderChangePage(v) {
-      this.orderParam.pageNumber = v;
-      this.getOrder();
-    },
-    orderChangePageSize(v) {
-      this.orderParam.pageNumber = 1;
-      this.orderParam.pageSize = v;
-      this.getOrder();
-    },
-    reconciliation() {
-      this.$Modal.confirm({
-        title: "确认核对结算单",
-        content: "您确认要核对此结算单么?",
-        loading: true,
-        onOk: () => {
-          API_Shop.reconciliation(this.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("账单核对成功");
-              this.init();
-            }
-          });
-        },
-      });
-    },
-    download() {
-      API_Shop.downloadBill(this.id)
-        .then((res) => {
-          const blob = new Blob([res], {
-            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-          });
-          if ("download" in document.createElement("a")) {
-            const link = document.createElement("a");
-            link.download = "结算单-" + this.id + ".xlsx";
-            link.style.display = "none";
-            link.href = URL.createObjectURL(blob);
-            document.body.appendChild(link);
-            link.click();
-            URL.revokeObjectURL(link.href);
-            document.body.removeChild(link);
-          } else {
-            navigator.msSaveBlob(blob, "结算单-" + this.id + ".xlsx");
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-        });
-    },
-    init() {
-      this.id = this.$route.query.id;
-      this.getDetail();
-    },
-    getDetail() {
-      API_Shop.getBillDetail(this.id).then((res) => {
-        if (res.success) {
-          this.bill = res.result;
-          this.initTable();
-          this.getOrder();
-          this.getBillStatusStep();
-        }
-      });
-    },
-    initTable() {
-      const bill = this.bill;
-      const money = (val) => (val === null || val === undefined || val === "" ? 0 : val);
+defineOptions({ name: "bill-detail" });
 
-      this.data[0].name = "结算单状态";
-      this.data[0].value = filters.unixSellerBillStatus(bill.billStatus);
-      this.data[1].name = "结算单号";
-      this.data[1].value = bill.sn;
-      this.data[2].name = "店铺名称";
-      this.data[2].value = bill.storeName;
-      this.data[3].name = "起止日期";
-      this.data[3].value = bill.startTime + "~" + bill.endTime;
-      this.data[4].name = "银行开户名";
-      this.data[4].value = bill.bankAccountName;
-      this.data[5].name = "银行账号";
-      this.data[5].value = bill.bankAccountNumber;
-      this.data[6].name = "开户行支行名称";
-      this.data[6].value = bill.bankName;
-      this.data[7].name = "支行联行号";
-      this.data[7].value = bill.bankCode;
-      this.data[8].name = "支付时间";
-      this.data[8].value = bill.payTime === null ? "未付款" : bill.payTime;
+const route = useRoute();
 
-      this.billData[0].billPrice = money(this.bill.billPrice);
-      this.billData[0].orderPrice = money(this.bill.orderPrice);
-      this.billData[0].siteCouponCommission = money(this.bill.siteCouponCommission);
-      this.billData[0].pointSettlementPrice = money(this.bill.pointSettlementPrice);
-      this.billData[0].kanjiaSettlementPrice = money(this.bill.kanjiaSettlementPrice);
-      this.billData[0].giftCardSubsidy = money(this.bill.giftCardSubsidy);
-      this.billData[0].distributionCommission = money(this.bill.distributionCommission);
-      this.billData[0].commissionPrice = money(this.bill.commissionPrice);
-      this.billData[0].refundPrice = money(this.bill.refundPrice);
-      this.billData[0].siteCouponRefundCommission = money(this.bill.siteCouponRefundCommission);
-      this.billData[0].pointRefundSettlementPrice = money(this.bill.pointRefundSettlementPrice);
-      this.billData[0].kanjiaRefundSettlementPrice = money(this.bill.kanjiaRefundSettlementPrice);
-      this.billData[0].giftCardRefundSubsidy = money(this.bill.giftCardRefundSubsidy);
-      this.billData[0].distributionRefundCommission = money(this.bill.distributionRefundCommission);
-      this.billData[0].refundCommissionPrice = money(this.bill.refundCommissionPrice);
-    },
-    getOrder() {
-      this.loading = true;
-      API_Shop.getSellerFlow(this.id, this.orderParam).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.orderData = res.result.records;
-          this.orderTotal = res.result.total;
-        }
-      });
-    },
+const activeTab = ref("order");
+const loading = ref(false);
+const billData = ref([
+  {
+    billPrice: 0,
+    orderPrice: 0,
+    siteCouponCommission: 0,
+    pointSettlementPrice: 0,
+    kanjiaSettlementPrice: 0,
+    giftCardSubsidy: 0,
+    distributionCommission: 0,
+    commissionPrice: 0,
+    refundPrice: 0,
+    siteCouponRefundCommission: 0,
+    pointRefundSettlementPrice: 0,
+    kanjiaRefundSettlementPrice: 0,
+    giftCardRefundSubsidy: 0,
+    distributionRefundCommission: 0,
+    refundCommissionPrice: 0,
   },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    "$route.query.id"(val) {
-      this.id = val;
-      this.getDetail();
-    },
-  },
-  beforeRouteLeave(to, from, next) {
-    if (to.name === "accountStatementBill" || to.name === "storeBill") {
-      to.meta.keepAlive = true;
+]);
+const data = ref([
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+  { name: "计算中", value: 0 },
+]);
+const id = ref("");
+const bill = ref({});
+const orderData = ref([]);
+const orderParam = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "id",
+  order: "desc",
+  startDate: null,
+  endDate: null,
+});
+const orderTotal = ref(0);
+const refundTotal = ref(0);
+const billStatusList = ref([
+  { status: "OUT", value: "已出账", title: "生成账单" },
+  { status: "CHECK", value: "已对账", title: "商家对账" },
+  { status: "PAY", value: "已付款", title: "平台付款" },
+  { status: "COMPLETE", value: "已完成", title: "结算完成" },
+]);
+const billStatusStep = ref([]);
+
+onMounted(() => {
+  init();
+});
+
+watch(
+  () => route.query.id,
+  (val) => {
+    id.value = val;
+    getDetail();
+  }
+);
+
+onBeforeRouteLeave((to, from, next) => {
+  if (to.name === "accountStatementBill" || to.name === "storeBill") {
+    to.meta.keepAlive = true;
+  }
+  next();
+});
+
+function formatPrice(value) {
+  return filters.unitPrice(value, "￥");
+}
+function negate(value) {
+  return 0 - value;
+}
+function isPayFlow(row) {
+  return row.flowType === "PAY";
+}
+function orderSubsidyTotal(row) {
+  return (
+    row.pointSettlementPrice + row.kanjiaSettlementPrice + row.siteCouponCommission
+  );
+}
+function orderSubsidyDisplay(row) {
+  if (row.pointSettlementPrice == 0) {
+    return "-";
+  }
+  return orderSubsidyTotal(row);
+}
+function orderCommissionDisplay(row) {
+  return row.commissionPrice == 0 ? "-" : row.commissionPrice;
+}
+function orderDistributionRebateDisplay(row) {
+  return row.distributionRebate == 0 ? "-" : row.distributionRebate;
+}
+function orderExpenseTotal(row) {
+  return row.commissionPrice + row.distributionRebate;
+}
+function getBillStatusStep() {
+  billStatusStep.value = [];
+  let current = "";
+  let myCur = false;
+  let myIdx = 0;
+  billStatusList.value.map((item, index) => {
+    if (item.status === bill.value.billStatus) {
+      myCur = true;
+      myIdx = index;
+      current = "";
+    } else if (!myCur) {
+      current = "";
+    } else if (myIdx + 1 === index) {
+      current = "current";
+    } else {
+      current = "future";
     }
-    next();
-  },
-};
+    billStatusStep.value.push({ ...item, className: current });
+  });
+  if (bill.value.billStatus === "COMPLETE") {
+    billStatusStep.value[billStatusStep.value.length - 1].className = "current";
+  }
+}
+function orderChangePage(v) {
+  orderParam.pageNumber = v;
+  getOrder();
+}
+function orderChangePageSize(v) {
+  orderParam.pageNumber = 1;
+  orderParam.pageSize = v;
+  getOrder();
+}
+function reconciliation() {
+  Modal.confirm({
+    title: "确认核对结算单",
+    content: "您确认要核对此结算单么?",
+    loading: true,
+    onOk: () => {
+      API_Shop.reconciliation(id.value).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("账单核对成功");
+          init();
+        }
+      });
+    },
+  });
+}
+function download() {
+  API_Shop.downloadBill(id.value)
+    .then((res) => {
+      const blob = new Blob([res], {
+        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      });
+      if ("download" in document.createElement("a")) {
+        const link = document.createElement("a");
+        link.download = "结算单-" + id.value + ".xlsx";
+        link.style.display = "none";
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click();
+        URL.revokeObjectURL(link.href);
+        document.body.removeChild(link);
+      } else {
+        navigator.msSaveBlob(blob, "结算单-" + id.value + ".xlsx");
+      }
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
+function init() {
+  id.value = route.query.id;
+  getDetail();
+}
+function getDetail() {
+  API_Shop.getBillDetail(id.value).then((res) => {
+    if (res.success) {
+      bill.value = res.result;
+      initTable();
+      getOrder();
+      getBillStatusStep();
+    }
+  });
+}
+function initTable() {
+  const billVal = bill.value;
+  const money = (val) => (val === null || val === undefined || val === "" ? 0 : val);
+
+  data.value[0].name = "结算单状态";
+  data.value[0].value = filters.unixSellerBillStatus(billVal.billStatus);
+  data.value[1].name = "结算单号";
+  data.value[1].value = billVal.sn;
+  data.value[2].name = "店铺名称";
+  data.value[2].value = billVal.storeName;
+  data.value[3].name = "起止日期";
+  data.value[3].value = billVal.startTime + "~" + billVal.endTime;
+  data.value[4].name = "银行开户名";
+  data.value[4].value = billVal.bankAccountName;
+  data.value[5].name = "银行账号";
+  data.value[5].value = billVal.bankAccountNumber;
+  data.value[6].name = "开户行支行名称";
+  data.value[6].value = billVal.bankName;
+  data.value[7].name = "支行联行号";
+  data.value[7].value = billVal.bankCode;
+  data.value[8].name = "支付时间";
+  data.value[8].value = billVal.payTime === null ? "未付款" : billVal.payTime;
+
+  billData.value[0].billPrice = money(billVal.billPrice);
+  billData.value[0].orderPrice = money(billVal.orderPrice);
+  billData.value[0].siteCouponCommission = money(billVal.siteCouponCommission);
+  billData.value[0].pointSettlementPrice = money(billVal.pointSettlementPrice);
+  billData.value[0].kanjiaSettlementPrice = money(billVal.kanjiaSettlementPrice);
+  billData.value[0].giftCardSubsidy = money(billVal.giftCardSubsidy);
+  billData.value[0].distributionCommission = money(billVal.distributionCommission);
+  billData.value[0].commissionPrice = money(billVal.commissionPrice);
+  billData.value[0].refundPrice = money(billVal.refundPrice);
+  billData.value[0].siteCouponRefundCommission = money(billVal.siteCouponRefundCommission);
+  billData.value[0].pointRefundSettlementPrice = money(billVal.pointRefundSettlementPrice);
+  billData.value[0].kanjiaRefundSettlementPrice = money(billVal.kanjiaRefundSettlementPrice);
+  billData.value[0].giftCardRefundSubsidy = money(billVal.giftCardRefundSubsidy);
+  billData.value[0].distributionRefundCommission = money(billVal.distributionRefundCommission);
+  billData.value[0].refundCommissionPrice = money(billVal.refundCommissionPrice);
+}
+function getOrder() {
+  loading.value = true;
+  API_Shop.getSellerFlow(id.value, orderParam).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      orderData.value = res.result.records;
+      orderTotal.value = res.result.total;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/bill/storeBill.vue b/seller/src/views/shop/bill/storeBill.vue
index 33eb818c8..26b5560ea 100644
--- a/seller/src/views/shop/bill/storeBill.vue
+++ b/seller/src/views/shop/bill/storeBill.vue
@@ -2,7 +2,7 @@
   <div class="search">
     <el-card>
       <el-form
-        ref="searchForm"
+        ref="searchFormRef"
         :model="searchForm"
         inline
         label-width="70px"
@@ -90,120 +90,121 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
 import * as API_Shop from "@/api/shops";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { customRouterPush } from "@/utils/filters";
 
-export default {
-  name: "storeBill",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      },
-      data: [],
-      total: 0,
-      currentStatus: "ALL",
-    };
-  },
-  computed: {
-    billStatusTabs() {
-      return [
-        { title: "全部", value: "ALL" },
-        { title: "已出账", value: "OUT" },
-        { title: "已对账", value: "CHECK" },
-        { title: "已完成", value: "COMPLETE" },
-      ];
-    },
-  },
-  methods: {
-    onStatusTabClick(tab) {
-      this.billStatusClick(tab.paneName);
-    },
-    billStatusClick(name) {
-      if (name === "ALL" || name === "" || name === undefined || name === null) {
-        delete this.searchForm.billStatus;
-        this.currentStatus = "ALL";
-      } else {
-        this.searchForm.billStatus = name;
-        this.currentStatus = name;
-      }
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    init() {
-      this.getDataList();
-    },
-    changePage() {
-      this.getDataList();
-    },
-    changePageSize() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.getDataList();
-    },
-    handleReset() {
-      const { billStatus } = this.searchForm;
-      this.searchForm = {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-        startDate: "",
-        endDate: "",
-      };
-      if (this.currentStatus !== "ALL") {
-        this.searchForm.billStatus = billStatus;
-      }
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Shop.getBillPage(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    detail(v) {
-      this.$filters.customRouterPush({
-        name: "bill-detail",
-        query: { id: v.id },
-      });
-    },
-    handleExport() {
-      const params = { ...this.searchForm };
-      API_Finance.exportBillList(params).then((blob) => {
-        downloadBlob(blob, "结算单列表.xlsx");
-      });
-    },
-  },
-  mounted() {
-    const billStatus = this.$route.query.billStatus;
-    if (billStatus) {
-      this.currentStatus = billStatus;
-      this.searchForm.billStatus = billStatus;
+defineOptions({ name: "storeBill" });
+
+const route = useRoute();
+
+const searchFormRef = ref(null);
+
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc",
+  startDate: "",
+  endDate: "",
+});
+const data = ref([]);
+const total = ref(0);
+const currentStatus = ref("ALL");
+
+const billStatusTabs = computed(() => {
+  return [
+    { title: "全部", value: "ALL" },
+    { title: "已出账", value: "OUT" },
+    { title: "已对账", value: "CHECK" },
+    { title: "已完成", value: "COMPLETE" },
+  ];
+});
+
+function onStatusTabClick(tab) {
+  billStatusClick(tab.paneName);
+}
+function billStatusClick(name) {
+  if (name === "ALL" || name === "" || name === undefined || name === null) {
+    delete searchForm.value.billStatus;
+    currentStatus.value = "ALL";
+  } else {
+    searchForm.value.billStatus = name;
+    currentStatus.value = name;
+  }
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function init() {
+  getDataList();
+}
+function changePage() {
+  getDataList();
+}
+function changePageSize() {
+  searchForm.value.pageNumber = 1;
+  getDataList();
+}
+function handleSearch() {
+  searchForm.value.pageNumber = 1;
+  searchForm.value.pageSize = 10;
+  getDataList();
+}
+function handleReset() {
+  const { billStatus } = searchForm.value;
+  searchForm.value = {
+    pageNumber: 1,
+    pageSize: 10,
+    sort: "createTime",
+    order: "desc",
+    startDate: "",
+    endDate: "",
+  };
+  if (currentStatus.value !== "ALL") {
+    searchForm.value.billStatus = billStatus;
+  }
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Shop.getBillPage(searchForm.value).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
     }
-    this.init();
-  },
-  beforeRouteLeave(to, from, next) {
-    from.meta.keepAlive = false;
-    next();
-  },
-};
+  });
+}
+function detail(v) {
+  customRouterPush({
+    name: "bill-detail",
+    query: { id: v.id },
+  });
+}
+function handleExport() {
+  const params = { ...searchForm.value };
+  API_Finance.exportBillList(params).then((blob) => {
+    downloadBlob(blob, "结算单列表.xlsx");
+  });
+}
+
+onMounted(() => {
+  const billStatus = route.query.billStatus;
+  if (billStatus) {
+    currentStatus.value = billStatus;
+    searchForm.value.billStatus = billStatus;
+  }
+  init();
+});
+
+onBeforeRouteLeave((to, from) => {
+  from.meta.keepAlive = false;
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/finance/summary.vue b/seller/src/views/shop/finance/summary.vue
index ac864b6ec..78b624e52 100644
--- a/seller/src/views/shop/finance/summary.vue
+++ b/seller/src/views/shop/finance/summary.vue
@@ -27,45 +27,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Finance from "@/api/finance";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "shop-finance-summary",
-  data() {
-    return {
-      dateRange: [],
-      summary: null,
-    };
-  },
-  mounted() {
-    this.loadData();
-  },
-  methods: {
-    buildParams() {
-      const p = {};
-      if (this.dateRange?.length === 2) {
-        p.startDate = this.dateRange[0];
-        p.endDate = this.dateRange[1];
-      }
-      return p;
-    },
-    loadData() {
-      API_Finance.getStoreSummary(this.buildParams()).then((res) => {
-        if (res.success) this.summary = res.result;
-      });
-    },
-    handleExport() {
-      API_Finance.exportStoreSummary(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "店铺周期汇总.xlsx");
-      });
-    },
-    exportFlow() {
-      API_Finance.exportStoreFlow(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "店铺流水.xlsx");
-      });
-    },
-  },
-};
+defineOptions({ name: "shop-finance-summary" });
+
+const dateRange = ref([]);
+const summary = ref(null);
+
+onMounted(() => {
+  loadData();
+});
+
+function buildParams() {
+  const p = {};
+  if (dateRange.value?.length === 2) {
+    p.startDate = dateRange.value[0];
+    p.endDate = dateRange.value[1];
+  }
+  return p;
+}
+
+function loadData() {
+  API_Finance.getStoreSummary(buildParams()).then((res) => {
+    if (res.success) summary.value = res.result;
+  });
+}
+
+function handleExport() {
+  API_Finance.exportStoreSummary(buildParams()).then((blob) => {
+    downloadBlob(blob, "店铺周期汇总.xlsx");
+  });
+}
+
+function exportFlow() {
+  API_Finance.exportStoreFlow(buildParams()).then((blob) => {
+    downloadBlob(blob, "店铺流水.xlsx");
+  });
+}
 </script>
diff --git a/seller/src/views/shop/floorList.vue b/seller/src/views/shop/floorList.vue
index aadcfa821..bb52787e4 100644
--- a/seller/src/views/shop/floorList.vue
+++ b/seller/src/views/shop/floorList.vue
@@ -69,7 +69,7 @@
       append-to-body
       destroy-on-close
     >
-      <el-form ref="form" :model="formData" label-width="80px">
+      <el-form ref="formRef" :model="formData" label-width="80px">
         <el-form-item label="模板名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入模板名称" />
         </el-form-item>
@@ -82,159 +82,163 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import * as API_floor from "@/api/other.js";
-export default {
-  name: "floorList",
-  data() {
-    return {
-      showModal: false,
-      total: 0,
-      formData: {
-        status: false,
-        name: "",
-      },
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        pageType: "INDEX",
-        pageClientType: "PC",
-      },
-      loading: false,
-      pageTypes: [
-        { type: "INDEX", title: "首页" },
-        { type: "SPECIAL", title: "专题" },
-      ],
-      list: [],
-    };
-  },
-  mounted() {
-    this.getTemplateList();
-  },
-  methods: {
-    newTemplate() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const data = this.formData;
-          data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
-          delete data.status;
-          (data.pageType = this.searchForm.pageType),
-            (data.pageClientType = "PC");
-          if (data.id) {
-            API_floor.updateHome(data.id, data).then((res) => {
-              this.$Message.success("编辑模板成功");
-              this.showModal = false;
-              this.getTemplateList();
-            });
-          } else {
-            API_floor.setHomeSetup(data).then((res) => {
-              this.$Message.success("新建模板成功");
-              this.showModal = false;
-              this.getTemplateList();
-            });
-          }
-        } else {
-          this.loading = false;
-        }
-      });
-    },
+import { Message, Modal } from "@/utils/message";
 
-    handleTabChange(type) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageType = type;
-      this.getTemplateList();
-    },
+defineOptions({ name: "floorList" });
 
-    createTemp() {
-      this.$refs.form?.resetFields();
-      this.formData = { status: false, name: "" };
-      this.showModal = true;
-    },
+const router = useRouter();
 
-    Template(item) {
-      item.status = item.pageShow;
-      this.formData = { ...item };
-      this.showModal = true;
-    },
+const showModal = ref(false);
+const total = ref(0);
+const formData = ref({
+  status: false,
+  name: "",
+});
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  pageType: "INDEX",
+  pageClientType: "PC",
+});
+const loading = ref(false);
+const pageTypes = ref([
+  { type: "INDEX", title: "首页" },
+  { type: "SPECIAL", title: "专题" },
+]);
+const list = ref([]);
 
-    decorate(val) {
-      const data = { id: val.id, pageShow: val.pageShow, pageType: this.searchForm.pageType };
+// formRef：模板 ref 改名避免与顶层变量互相覆盖
+const formRef = ref(null);
 
-      this.$router.push({
-        name: "renovation",
-        query: data,
-      });
-    },
+onMounted(() => {
+  getTemplateList();
+});
 
-    changePageNum(val) {
-      this.searchForm.pageNumber = val;
-      this.getTemplateList();
-    },
-    changePageSize(val) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = val;
-      this.getTemplateList();
-    },
-    getTemplateList() {
-      this.loading = true;
-      API_floor.getHomeList(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.total = res.result.total;
-          this.list = res.result.records;
-          this.list.forEach((e) => {
-            if (e.pageShow === "OPEN") {
-              e.pageShow = true;
-            } else {
-              e.pageShow = false;
-            }
-          });
-        }
-      });
-    },
-
-    beforeRelease(row) {
-      if (row.pageShow) {
-        this.$Message.warning(
-          this.total === 1
-            ? "当前为唯一页面，无法关闭"
-            : "请直接开启其他页面，当前页面会自动关闭"
-        );
-        return false;
-      }
-      return new Promise((resolve, reject) => {
-        API_floor.releasePageHome(row.id).then((res) => {
-          if (res && res.success) {
-            this.$Message.success("发布模板成功");
-            resolve(true);
-            this.getTemplateList();
-          } else {
-            reject(new Error("release failed"));
-          }
-        }).catch(() => {
-          reject(new Error("release failed"));
+function newTemplate() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      const data = formData.value;
+      data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
+      delete data.status;
+      (data.pageType = searchForm.pageType),
+        (data.pageClientType = "PC");
+      if (data.id) {
+        API_floor.updateHome(data.id, data).then((res) => {
+          Message.success("编辑模板成功");
+          showModal.value = false;
+          getTemplateList();
         });
-      });
-    },
-    confirmDel(id) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "删除此模板？",
-        onOk: () => this.delTemplate(id),
-      });
-    },
-    delTemplate(id) {
-      API_floor.removePageHome(id).then((res) => {
-        if (res.success) {
-          this.$Message.success("删除模板成功");
-          this.getTemplateList();
+      } else {
+        API_floor.setHomeSetup(data).then((res) => {
+          Message.success("新建模板成功");
+          showModal.value = false;
+          getTemplateList();
+        });
+      }
+    } else {
+      loading.value = false;
+    }
+  });
+}
+
+function handleTabChange(type) {
+  searchForm.pageNumber = 1;
+  searchForm.pageType = type;
+  getTemplateList();
+}
+
+function createTemp() {
+  formRef.value?.resetFields();
+  formData.value = { status: false, name: "" };
+  showModal.value = true;
+}
+
+function Template(item) {
+  item.status = item.pageShow;
+  formData.value = { ...item };
+  showModal.value = true;
+}
+
+function decorate(val) {
+  const data = { id: val.id, pageShow: val.pageShow, pageType: searchForm.pageType };
+
+  router.push({
+    name: "renovation",
+    query: data,
+  });
+}
+
+function changePageNum(val) {
+  searchForm.pageNumber = val;
+  getTemplateList();
+}
+function changePageSize(val) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = val;
+  getTemplateList();
+}
+function getTemplateList() {
+  loading.value = true;
+  API_floor.getHomeList(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      total.value = res.result.total;
+      list.value = res.result.records;
+      list.value.forEach((e) => {
+        if (e.pageShow === "OPEN") {
+          e.pageShow = true;
+        } else {
+          e.pageShow = false;
         }
       });
-    },
-  },
-};
+    }
+  });
+}
+
+function beforeRelease(row) {
+  if (row.pageShow) {
+    Message.warning(
+      total.value === 1
+        ? "当前为唯一页面，无法关闭"
+        : "请直接开启其他页面，当前页面会自动关闭"
+    );
+    return false;
+  }
+  return new Promise((resolve, reject) => {
+    API_floor.releasePageHome(row.id).then((res) => {
+      if (res && res.success) {
+        Message.success("发布模板成功");
+        resolve(true);
+        getTemplateList();
+      } else {
+        reject(new Error("release failed"));
+      }
+    }).catch(() => {
+      reject(new Error("release failed"));
+    });
+  });
+}
+function confirmDel(id) {
+  Modal.confirm({
+    title: "提示",
+    content: "删除此模板？",
+    onOk: () => delTemplate(id),
+  });
+}
+function delTemplate(id) {
+  API_floor.removePageHome(id).then((res) => {
+    if (res.success) {
+      Message.success("删除模板成功");
+      getTemplateList();
+    }
+  });
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/hotzone/components/Hotzone.vue b/seller/src/views/shop/hotzone/components/Hotzone.vue
index 5566f2020..0accdf6e9 100644
--- a/seller/src/views/shop/hotzone/components/Hotzone.vue
+++ b/seller/src/views/shop/hotzone/components/Hotzone.vue
@@ -10,7 +10,7 @@
             :key="index"
             :index="index"
             :setting="zone"
-            :ref="`zone${index}`"
+            :ref="(el) => setZoneRef(el, index)"
             @delItem="removeItem($event)"
             @changeInfo="changeInfo($event)"
           ></zone>
@@ -62,158 +62,185 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted, getCurrentInstance } from "vue";
 import Zone from "./Zone";
-import addItem from "../directives/addItem";
+import vAddItem from "../directives/addItem";
 
-export default {
-  name: "HotZone",
-  data() {
-    return {
-      zones: [],
-    };
+defineOptions({ name: "HotZone" });
+
+const props = defineProps({
+  image: {
+    type: String,
+    required: true,
   },
-  props: {
-    image: {
-      type: String,
-      required: true,
-    },
-    zonesInit: {
-      type: Array,
-      default: () => [],
-    },
-    max: {
-      type: Number,
-    },
+  zonesInit: {
+    type: Array,
+    default: () => [],
   },
-  mounted() {
-    this.zones = this.zonesInit.concat();
+  max: {
+    type: Number,
   },
-  methods: {
-    async addHotzone() {
-      let perInfo = {
-        topPer: 0.15,
-        leftPer: 0.3,
-        widthPer: 0.2,
-        heightPer: 0.2,
-        img: "",
-        link: "",
-        type: "",
-        title: "",
-      };
-      let images = await this.getImageSize(this.image);
-      if (images) {
-        if (images.height >= 1000) {
-          perInfo.heightPer = this.convertNumberToDecimal(images.height) / (images.height / 1000);
-        } else {
-          perInfo.heightPer = this.convertNumberToDecimal(images.height);
-        }
-        perInfo.widthPer = this.convertNumberToDecimal(images.width) / 2;
-      }
-      this.addItem(perInfo);
-    },
-    convertNumberToDecimal(num) {
-      if (num >= 10000) {
-        return num / 100000;
-      } else if (num >= 1000) {
-        return num / 10000;
-      } else if (num >= 100) {
-        return num / 1000;
-      } else if (num >= 10) {
-        return num / 100;
-      }
-    },
-    getImageSize(url) {
-      return new Promise(function (resolve, reject) {
-        let image = new Image();
-        image.onload = function () {
-          resolve({
-            width: image.width,
-            height: image.height,
-          });
-        };
-        image.onerror = function () {
-          reject(new Error("error"));
-        };
-        image.src = url;
+});
+const emit = defineEmits([
+  "choose",
+  "erase",
+  "overRange",
+  "remove",
+  "add",
+  "change",
+]);
+
+const zones = ref([]);
+const zoneRefs = ref([]);
+const instance = getCurrentInstance();
+
+onMounted(() => {
+  zones.value = props.zonesInit.concat();
+});
+
+// v-for 内的动态 ref：按 index 收集 Zone 组件实例
+function setZoneRef(el, index) {
+  if (el) zoneRefs.value[index] = el;
+}
+
+async function addHotzone() {
+  let perInfo = {
+    topPer: 0.15,
+    leftPer: 0.3,
+    widthPer: 0.2,
+    heightPer: 0.2,
+    img: "",
+    link: "",
+    type: "",
+    title: "",
+  };
+  let images = await getImageSize(props.image);
+  if (images) {
+    if (images.height >= 1000) {
+      perInfo.heightPer = convertNumberToDecimal(images.height) / (images.height / 1000);
+    } else {
+      perInfo.heightPer = convertNumberToDecimal(images.height);
+    }
+    perInfo.widthPer = convertNumberToDecimal(images.width) / 2;
+  }
+  addItem(perInfo);
+}
+
+function convertNumberToDecimal(num) {
+  if (num >= 10000) {
+    return num / 100000;
+  } else if (num >= 1000) {
+    return num / 10000;
+  } else if (num >= 100) {
+    return num / 1000;
+  } else if (num >= 10) {
+    return num / 100;
+  }
+}
+
+function getImageSize(url) {
+  return new Promise(function (resolve, reject) {
+    let image = new Image();
+    image.onload = function () {
+      resolve({
+        width: image.width,
+        height: image.height,
       });
-    },
-    editZone(index) {
-      this.$refs[`zone${index}`][0].showModalFn(index);
-    },
-    delZone(index) {
-      this.$refs[`zone${index}`][0].delItem(index);
-    },
-    showZoneText(zone) {
-      switch (zone.type) {
-        case "goods":
-          return `商品：${zone.goodsName}`;
-        case "category":
-          return `分类：${zone.name}`;
-        case "shops":
-          return `店铺：${zone.storeName}`;
-        case "pages":
-          return `文章：${zone.title}`;
-        case "marketing":
-          return `促销活动商品：${zone.goodsName}`;
-        case "other":
-          return `${zone.title}`;
-        default:
-          return "请选择跳转链接";
-      }
-    },
-    changeInfo(res) {
-      let { info, index, zoneInfo } = res;
-      info = { ...zoneInfo, ...info };
-      // 改变热区并发送change通知
-      Object.assign(this.zones[index], info);
-      this.hasChange("changeInfo");
-      this.$forceUpdate();
-    },
-    addItem(setting) {
-      this.zones.push(setting);
-      this.$emit("choose");
-      // this.hasChange()  不应该发送通知，mouseup判定成功才应该发
-      // this.$emit('add', setting)
-    },
-    eraseItem(index = this.zones.length - 1) {
-      this.zones.splice(index, 1);
-      this.$emit("erase", index);
-    },
-    isOverRange() {
-      let { max, zones } = this;
+    };
+    image.onerror = function () {
+      reject(new Error("error"));
+    };
+    image.src = url;
+  });
+}
 
-      return max && zones.length > max;
-    },
-    overRange() {
-      const index = this.zones.length - 1;
+function editZone(index) {
+  zoneRefs.value[index].showModalFn(index);
+}
 
-      this.zones.splice(index, 1);
-      this.$emit("overRange", index);
-    },
-    removeItem(index = this.zones.length - 1) {
-      this.zones.splice(index, 1);
-      this.hasChange("removeItem");
-      this.$emit("remove", index);
-    },
-    changeItem(info, isAdd) {
-      const index = this.zones.length - 1;
-      // 改变热区并发送change通知
-      Object.assign(this.zones[index], info);
-      this.hasChange("changeItem");
-      isAdd && this.$emit("add", this.zones[index]);
-    },
-    hasChange(from) {
-      this.$emit("change", this.zones);
-    },
-  },
-  directives: {
-    addItem,
-  },
-  components: {
-    Zone,
-  },
-};
+function delZone(index) {
+  zoneRefs.value[index].delItem(index);
+}
+
+function showZoneText(zone) {
+  switch (zone.type) {
+    case "goods":
+      return `商品：${zone.goodsName}`;
+    case "category":
+      return `分类：${zone.name}`;
+    case "shops":
+      return `店铺：${zone.storeName}`;
+    case "pages":
+      return `文章：${zone.title}`;
+    case "marketing":
+      return `促销活动商品：${zone.goodsName}`;
+    case "other":
+      return `${zone.title}`;
+    default:
+      return "请选择跳转链接";
+  }
+}
+
+function changeInfo(res) {
+  let { info, index, zoneInfo } = res;
+  info = { ...zoneInfo, ...info };
+  // 改变热区并发送change通知
+  Object.assign(zones.value[index], info);
+  hasChange("changeInfo");
+  instance.proxy.$forceUpdate();
+}
+
+function addItem(setting) {
+  zones.value.push(setting);
+  emit("choose");
+  // this.hasChange()  不应该发送通知，mouseup判定成功才应该发
+  // this.$emit('add', setting)
+}
+
+function eraseItem(index = zones.value.length - 1) {
+  zones.value.splice(index, 1);
+  emit("erase", index);
+}
+
+function isOverRange() {
+  return props.max && zones.value.length > props.max;
+}
+
+function overRange() {
+  const index = zones.value.length - 1;
+
+  zones.value.splice(index, 1);
+  emit("overRange", index);
+}
+
+function removeItem(index = zones.value.length - 1) {
+  zones.value.splice(index, 1);
+  hasChange("removeItem");
+  emit("remove", index);
+}
+
+function changeItem(info, isAdd) {
+  const index = zones.value.length - 1;
+  // 改变热区并发送change通知
+  Object.assign(zones.value[index], info);
+  hasChange("changeItem");
+  isAdd && emit("add", zones.value[index]);
+}
+
+function hasChange(from) {
+  emit("change", zones.value);
+}
+
+// v-add-item 指令通过 binding.instance 调用以下方法/读取 zones
+defineExpose({
+  zones,
+  addItem,
+  eraseItem,
+  isOverRange,
+  overRange,
+  changeItem,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/hotzone/components/Zone.vue b/seller/src/views/shop/hotzone/components/Zone.vue
index e7b501ba3..eb56eecf2 100644
--- a/seller/src/views/shop/hotzone/components/Zone.vue
+++ b/seller/src/views/shop/hotzone/components/Zone.vue
@@ -85,162 +85,165 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog width="1200px" v-model="picModelFlag">
-      <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManage"/>
+      <ossManage @callback="callbackSelected" :isComponent="true"  :initialize="picModelFlag" ref="ossManageRef"/>
     </el-dialog>
   </li>
 </template>
 
-<script>
-import changeSize from "../directives/changeSize";
-import dragItem from "../directives/dragItem";
-// import ossManage from "@/views/sys/oss-manage/ossManage";
+<script setup>
+import { ref, reactive, watch, onMounted, nextTick } from "vue";
+// 自定义指令：script setup 中以 vXxx 命名的顶层变量即注册为指令
+import vChangeSize from "../directives/changeSize";
+import vDragItem from "../directives/dragItem";
 import ossManage from "@/views/sys/oss-manage/ossManage";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "Zone",
-  components: {
-    ossManage,
-  },
+defineOptions({ name: "Zone" });
 
-  data() {
-    return {
-      zoneTop: "",
-      zoneLeft: "",
-      zoneWidth: "",
-      zoneHeight: "",
-      hideZone: false,
-      tooSmall: false,
-      showModal: false,
-      picModelFlag: false,
-      currentIndex: 0,
-      currentShowIndex: -1,
-      zoneForm: {
-        img: "",
-        link: "",
-        type: "",
-      },
-    };
-  },
-  props: ["index", "setting"],
-  mounted() {
-    this.setZoneInfo(this.setting);
-  },
-  methods: {
-    setZoneInfo(val) {
-      this.zoneTop = this.getZoneStyle(val.topPer);
-      this.zoneLeft = this.getZoneStyle(val.leftPer);
-      this.zoneWidth = this.getZoneStyle(val.widthPer);
-      this.zoneHeight = this.getZoneStyle(val.heightPer);
-      this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01;
-      this.zoneForm.link = val.link;
-      this.settingZone(val);
-    },
-    handlehideZone(isHide = true) {
-      if (this.hideZone === isHide) {
-        return;
-      }
+const props = defineProps(["index", "setting"]);
+const emit = defineEmits(["changeInfo", "delItem"]);
 
-      this.hideZone = isHide;
-    },
-    changeInfo(info = {}) {
-      const { index } = this;
+const zoneTop = ref("");
+const zoneLeft = ref("");
+const zoneWidth = ref("");
+const zoneHeight = ref("");
+const hideZone = ref(false);
+const tooSmall = ref(false);
+const showModal = ref(false);
+const picModelFlag = ref(false);
+const currentIndex = ref(0);
+const currentShowIndex = ref(-1);
+const zoneForm = reactive({
+  img: "",
+  link: "",
+  type: "",
+});
+// 历史遗留：原 Options 写法 this.selectedNav 未在 data 声明（只赋值未读取），此处补声明仅作占位
+const selectedNav = ref(null);
 
-      this.$emit("changeInfo", {
-        info,
-        index,
-        zoneInfo: this.zoneForm,
-      });
-    },
-    showModalFn(index) {
-      this.showModal = true;
-      this.currentIndex = index;
-    },
-    // 选择图片
-    handleSelectImg() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(item) {
-      this.picModelFlag = false;
-      this.zoneForm.img = item.url;
-    },
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
 
-    // 调起选择链接弹窗
-    handleSelectLink(item, index) {
-      if (item) this.selectedNav = item;
-      this.$refs.liliDialog.open("link");
-    },
-    // 已选链接
-    selectedLink(val) {
-      this.zoneForm.link = this.$filters.formatLinkType(val);
-      this.settingZone(val);
-      this.changeInfo(this.zoneForm);
-      this.showModal = false;
-    },
-    settingZone(val) {
-      this.zoneForm.type = val.___type || val.type;
-      this.zoneForm.title = val.title;
-      switch (val.___type) {
-        case "goods":
-          this.zoneForm.id = val.id;
-          this.zoneForm.goodsId = val.goodsId;
-          this.zoneForm.goodsName = val.goodsName;
-          break;
-        case "category":
-          this.zoneForm.id = val.allId;
-          this.zoneForm.name = val.name;
-          break;
-        case "shops":
-          this.zoneForm.id = val.id;
-          this.zoneForm.storeName = val.storeName;
-          break;
-        case "pages":
-          this.zoneForm.id = val.id;
-          this.zoneForm.___path = val.___path;
-          this.zoneForm.title = val.title;
-          break;
-        case "marketing":
-          this.zoneForm.id = val.id;
-          this.zoneForm.goodsId = val.goodsId;
-          this.zoneForm.goodsName = val.goodsName;
-          break;
-        default:
-          break;
-      }
-    },
-    saveZone() {},
-    cancelZone() {
-      this.showModal = false;
-    },
-    delZone() {
-      this.delItem(this.currentIndex);
-    },
-    delItem(index) {
-      this.$emit("delItem", index);
-    },
-    getZoneStyle(val) {
-      return `${(val || 0) * 100}%`;
-    },
-  },
+onMounted(() => {
+  setZoneInfo(props.setting);
+});
 
-  watch: {
-    setting: {
-      handler: function (val) {
-        this.setZoneInfo(val);
-      },
-      deep: true,
-    },
+function setZoneInfo(val) {
+  zoneTop.value = getZoneStyle(val.topPer);
+  zoneLeft.value = getZoneStyle(val.leftPer);
+  zoneWidth.value = getZoneStyle(val.widthPer);
+  zoneHeight.value = getZoneStyle(val.heightPer);
+  tooSmall.value = val.widthPer < 0.01 && val.heightPer < 0.01;
+  zoneForm.link = val.link;
+  settingZone(val);
+}
+function handlehideZone(isHide = true) {
+  if (hideZone.value === isHide) {
+    return;
+  }
+
+  hideZone.value = isHide;
+}
+function changeInfo(info = {}) {
+  const { index } = props;
+
+  emit("changeInfo", {
+    info,
+    index,
+    zoneInfo: zoneForm,
+  });
+}
+function showModalFn(index) {
+  showModal.value = true;
+  currentIndex.value = index;
+}
+// 选择图片
+function handleSelectImg() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(item) {
+  picModelFlag.value = false;
+  zoneForm.img = item.url;
+}
+
+// 调起选择链接弹窗
+function handleSelectLink(item, index) {
+  // 历史遗留：selectedNav 只赋值未读取，原样保留
+  if (item) selectedNav.value = item;
+  liliDialog.value.open("link");
+}
+// 已选链接
+function selectedLink(val) {
+  zoneForm.link = formatLinkType(val);
+  settingZone(val);
+  changeInfo(zoneForm);
+  showModal.value = false;
+}
+function settingZone(val) {
+  zoneForm.type = val.___type || val.type;
+  zoneForm.title = val.title;
+  switch (val.___type) {
+    case "goods":
+      zoneForm.id = val.id;
+      zoneForm.goodsId = val.goodsId;
+      zoneForm.goodsName = val.goodsName;
+      break;
+    case "category":
+      zoneForm.id = val.allId;
+      zoneForm.name = val.name;
+      break;
+    case "shops":
+      zoneForm.id = val.id;
+      zoneForm.storeName = val.storeName;
+      break;
+    case "pages":
+      zoneForm.id = val.id;
+      zoneForm.___path = val.___path;
+      zoneForm.title = val.title;
+      break;
+    case "marketing":
+      zoneForm.id = val.id;
+      zoneForm.goodsId = val.goodsId;
+      zoneForm.goodsName = val.goodsName;
+      break;
+    default:
+      break;
+  }
+}
+function saveZone() {}
+function cancelZone() {
+  showModal.value = false;
+}
+function delZone() {
+  delItem(currentIndex.value);
+}
+function delItem(index) {
+  emit("delItem", index);
+}
+function getZoneStyle(val) {
+  return `${(val || 0) * 100}%`;
+}
+
+watch(
+  () => props.setting,
+  (val) => {
+    setZoneInfo(val);
   },
-  directives: {
-    changeSize,
-    dragItem,
-  },
-};
+  { deep: true }
+);
+
+// 父组件 Hotzone.vue 通过 $refs 调用 showModalFn / delItem
+defineExpose({
+  showModalFn,
+  delItem,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/hotzone/index.vue b/seller/src/views/shop/hotzone/index.vue
index 166ad62c8..e91cd6747 100644
--- a/seller/src/views/shop/hotzone/index.vue
+++ b/seller/src/views/shop/hotzone/index.vue
@@ -11,7 +11,7 @@
   >
     <template v-if="flag && hotzoneRes">
       <hotzone
-        ref="hotzone"
+        ref="hotzoneRef"
         :zonesInit="hotzoneRes.zoneInfo"
         :image="hotzoneRes.img"
         @change="changeHotzone"
@@ -23,47 +23,50 @@
     </template>
   </el-dialog>
 </template>
-<script>
+<script setup>
+import { ref } from "vue";
 import hotzone from "./components/Hotzone.vue";
 
-export default {
-  components: {
-    hotzone,
-  },
-  data() {
-    return {
-      flag: false,
-      hotzoneRes: null,
-    };
-  },
-  methods: {
-    changeHotzone(info) {
-      if (this.hotzoneRes) {
-        this.hotzoneRes.zoneInfo = info;
-      }
-      this.$emit("changeZone", info);
-    },
-    clickClose() {
-      this.flag = false;
-      this.hotzoneRes = null;
-      this.$emit("closeFlag", false);
-    },
-    clickOK() {
-      this.clickClose();
-    },
-    open(val) {
-      this.hotzoneRes = val || null;
-      if (this.hotzoneRes && !this.hotzoneRes.zoneInfo) {
-        this.hotzoneRes.zoneInfo = [];
-      }
-      this.flag = true;
-    },
-    close() {
-      this.flag = false;
-      this.hotzoneRes = null;
-    },
-  },
+const emit = defineEmits(["changeZone", "closeFlag"]);
+
+const flag = ref(false);
+const hotzoneRes = ref(null);
+
+// hotzoneRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const hotzoneRef = ref(null);
+
+const changeHotzone = (info) => {
+  if (hotzoneRes.value) {
+    hotzoneRes.value.zoneInfo = info;
+  }
+  emit("changeZone", info);
 };
+
+const clickClose = () => {
+  flag.value = false;
+  hotzoneRes.value = null;
+  emit("closeFlag", false);
+};
+
+const clickOK = () => {
+  clickClose();
+};
+
+const open = (val) => {
+  hotzoneRes.value = val || null;
+  if (hotzoneRes.value && !hotzoneRes.value.zoneInfo) {
+    hotzoneRes.value.zoneInfo = [];
+  }
+  flag.value = true;
+};
+
+const close = () => {
+  flag.value = false;
+  hotzoneRes.value = null;
+};
+
+// decorate.vue 通过 hotzoneRef.value.open(val) 调用
+defineExpose({ open, close });
 </script>
 <style scoped lang="scss">
 :deep(.el-dialog__body) {
diff --git a/seller/src/views/shop/modelForm.vue b/seller/src/views/shop/modelForm.vue
index 290733b1f..b53ff8493 100644
--- a/seller/src/views/shop/modelForm.vue
+++ b/seller/src/views/shop/modelForm.vue
@@ -130,138 +130,145 @@
         </table>
       </div>
     </el-dialog>
-    <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
+    <liliDialog ref="liliDialogRef" @selectedLink="selectedLink"></liliDialog>
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
       <ossManage
         @callback="callbackSelected"
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick, onMounted } from "vue";
 import { ShoppingCart } from "@element-plus/icons-vue";
 import logoImg from "@/assets/logo.png";
 import Draggable from "vuedraggable";
 import ModelFormItem from "./modelFormItem.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelForm",
-  components: {
-    Draggable,
-    ModelFormItem,
-    ossManage,
-    ShoppingCart,
-  },
-  props: ["data"],
-  data() {
-    return {
-      logoImg,
-      picModelFlag: false,
-      showModal: false,
-      showModalNav: false,
-      selectedNav: null,
-      promotionTags: ["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"],
-      topAdvert: {
-        type: "topAdvert",
-        img: "",
-        url: "",
-        bgColor: "#de000d",
-        size: "1200*80",
-      },
-      currentIndex: 0,
-      navList: {
-        type: "navBar",
-        list: [
-          { name: "秒杀", url: "", title: "" },
-          { name: "闪购", url: "", title: "" },
-          { name: "优惠券", url: "", title: "" },
-          { name: "拍卖", url: "", title: "" },
-          { name: "服装城", url: "", title: "" },
-        ],
-      },
-    };
-  },
-  mounted() {
-    document.body.ondrop = function (event) {
-      let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
-      if (isFirefox) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-  },
-  methods: {
-    getModelItemKey(element) {
-      return element.model || element.key || element.type;
+import { formatLinkType } from "@/utils/filters";
+
+defineOptions({ name: "modelForm" });
+
+const props = defineProps(["data"]);
+
+const picModelFlag = ref(false);
+const showModal = ref(false);
+const showModalNav = ref(false);
+const selectedNav = ref(null);
+const promotionTags = ref(["买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"]);
+const topAdvert = ref({
+  type: "topAdvert",
+  img: "",
+  url: "",
+  bgColor: "#de000d",
+  size: "1200*80",
+});
+const currentIndex = ref(0);
+const navList = ref({
+  type: "navBar",
+  list: [
+    { name: "秒杀", url: "", title: "" },
+    { name: "闪购", url: "", title: "" },
+    { name: "优惠券", url: "", title: "" },
+    { name: "拍卖", url: "", title: "" },
+    { name: "服装城", url: "", title: "" },
+  ],
+});
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+// 父组件 renovation.vue 通过 $refs.modelForm 读取并整体赋值 navList / topAdvert
+defineExpose({ navList, topAdvert });
+
+onMounted(() => {
+  document.body.ondrop = function (event) {
+    let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
+    if (isFirefox) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+});
+
+function getModelItemKey(element) {
+  return element.model || element.key || element.type;
+}
+
+function handleSelectLink(item, index) {
+  if (item) selectedNav.value = item;
+  liliDialogRef.value.open("link");
+  currentIndex.value = index;
+}
+
+function selectedLink(val) {
+  if (showModalNav.value) {
+    selectedNav.value.url = formatLinkType(val);
+    selectedNav.value.type = val.___type === "other" && val.url === "" ? "link" : "other";
+  } else {
+    topAdvert.value.url = formatLinkType(val);
+    topAdvert.value.type = val.___type === "other" && val.url === "" ? "link" : "other";
+  }
+  navList.value.list[currentIndex.value].title = val.title;
+}
+
+function handleDelNav(index) {
+  navList.value.list.splice(index, 1);
+}
+
+function handleAddNav() {
+  navList.value.list.push({ name: "", url: "", title: "" });
+  nextTick(() => {
+    selectedNav.value = navList.value.list[navList.value.list.length - 1];
+  });
+}
+
+function handleMoveEnd({ newIndex, oldIndex }) {
+  console.log("index", newIndex, oldIndex);
+}
+
+function handleModel(type) {
+  if (type == "topAdvert") {
+    showModal.value = true;
+  } else {
+    showModalNav.value = true;
+  }
+}
+
+function handleSelectImg() {
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function callbackSelected(item) {
+  picModelFlag.value = false;
+  topAdvert.value.img = item.url;
+}
+
+function handleModelAdd(evt) {
+  const newIndex = evt.newIndex;
+  const current = props.data.list[newIndex];
+  if (!current || current.key) {
+    return;
+  }
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  props.data.list[newIndex] = {
+    ...JSON.parse(JSON.stringify(current)),
+    options: {
+      ...current.options,
     },
-    handleSelectLink(item, index) {
-      if (item) this.selectedNav = item;
-      this.$refs.liliDialog.open("link");
-      this.currentIndex = index;
-    },
-    selectedLink(val) {
-      if (this.showModalNav) {
-        this.selectedNav.url = this.$filters.formatLinkType(val);
-        this.selectedNav.type = val.___type === "other" && val.url === "" ? "link" : "other";
-      } else {
-        this.topAdvert.url = this.$filters.formatLinkType(val);
-        this.topAdvert.type = val.___type === "other" && val.url === "" ? "link" : "other";
-      }
-      this.navList.list[this.currentIndex].title = val.title;
-    },
-    handleDelNav(index) {
-      this.navList.list.splice(index, 1);
-    },
-    handleAddNav() {
-      this.navList.list.push({ name: "", url: "", title: "" });
-      this.$nextTick(() => {
-        this.selectedNav = this.navList.list[this.navList.list.length - 1];
-      });
-    },
-    handleMoveEnd({ newIndex, oldIndex }) {
-      console.log("index", newIndex, oldIndex);
-    },
-    handleModel(type) {
-      if (type == "topAdvert") {
-        this.showModal = true;
-      } else {
-        this.showModalNav = true;
-      }
-    },
-    handleSelectImg() {
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    callbackSelected(item) {
-      this.picModelFlag = false;
-      this.topAdvert.img = item.url;
-    },
-    handleModelAdd(evt) {
-      const newIndex = evt.newIndex;
-      const current = this.data.list[newIndex];
-      if (!current || current.key) {
-        return;
-      }
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      this.data.list[newIndex] = {
-        ...JSON.parse(JSON.stringify(current)),
-        options: {
-          ...current.options,
-        },
-        key,
-        model: current.type + "_" + key,
-      };
-    },
-  },
-};
+    key,
+    model: current.type + "_" + key,
+  };
+}
 </script>
 <style lang="scss" scoped>
 @import "./modelList/setup-box.scss";
diff --git a/seller/src/views/shop/modelFormItem.vue b/seller/src/views/shop/modelFormItem.vue
index 4c725ce10..f53949ba4 100644
--- a/seller/src/views/shop/modelFormItem.vue
+++ b/seller/src/views/shop/modelFormItem.vue
@@ -256,13 +256,14 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, ref } from "vue";
 import ModelCarousel from "./modelList/carousel.vue";
 import ModelCarousel1 from "./modelList/carousel1.vue";
 import ModelCarousel2 from "./modelList/carousel2.vue";
@@ -281,98 +282,82 @@ import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
 import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
 import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 import decorateImg from "@/assets/nav/decorate.png";
-export default {
-  name: "modelFormItem",
-  props: ["element", "select", "index", "data"],
-  components: {
-    ModelCarousel,
-    ModelCarousel1,
-    ModelCarousel2,
-    Recommend,
-    NewGoodsSort,
-    FirstPageAdvert,
-    NotEnough,
-    Seckill,
-    goodsType,
-    ossManage,
-    oneRowThreeColumns,
-    "seckill-only-album":seckillOnlyAlbum,
-    onlyGoodsModel,
-    mixModel,
-    forYour
-  },
-  data() {
-    return {
-      decorateImg,
-      showModal: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确定后写回的原数据
-      picModelFlag: false, // 图片选择器
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 编辑模块
-    handleSelectModel(item) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      this.showModal = true;
-    },
-    // 删除模块
-    handleModelDelete() {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "<p>确定删除当前模块吗？</p>",
-        onOk: () => {
-          this.$nextTick(() => {
-            this.data.list.splice(this.index, 1);
-          });
-        },
-      });
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    // 确定选择链接
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
+import { Modal } from "@/utils/message";
+import { formatLinkType } from "@/utils/filters";
 
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
+defineOptions({ name: "modelFormItem" });
+
+const props = defineProps(["element", "select", "index", "data"]);
+
+const showModal = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确定后写回的原数据
+const picModelFlag = ref(false); // 图片选择器
+
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 编辑模块
+function handleSelectModel(item) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  showModal.value = true;
+}
+// 删除模块
+function handleModelDelete() {
+  Modal.confirm({
+    title: "提示",
+    content: "<p>确定删除当前模块吗？</p>",
+    onOk: () => {
+      nextTick(() => {
+        props.data.list.splice(props.index, 1);
       });
     },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-  },
-};
+  });
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+}
+// 确定选择链接
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./modelList/setup-box.scss";
diff --git a/seller/src/views/shop/modelList/carousel.vue b/seller/src/views/shop/modelList/carousel.vue
index 13107a1a5..40f22aee0 100644
--- a/seller/src/views/shop/modelList/carousel.vue
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -123,77 +123,77 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, getCurrentInstance } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      userInfo: {},
-      articleList: [
-        { title: "促销计算规则" },
-        { title: "商家申请开店" },
-        { title: "商家账号注册" },
-        { title: "促销计算规则" },
-      ],
-    };
-  },
+import { formatLinkType } from "@/utils/filters";
 
-  methods: {
-    handleSelectModel() {
-      // 编辑模块
-      this.showModal = true;
-    },
-    // 添加轮播图
-    handleAdd() {
-      this.data.options.list.push({ img: "", url: "", type: "" });
-      this.$forceUpdate();
-    },
-    handleSelectLink(item) {
-      // 选择链接
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      this.selected.img = item.url;
-    },
-    handleDel(index) {
-      // 删除图片
-      this.data.options.list.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择图片
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const picModelFlag = ref(false); // 选择图片modal
+const userInfo = reactive({});
+const articleList = ref([
+  { title: "促销计算规则" },
+  { title: "商家申请开店" },
+  { title: "商家账号注册" },
+  { title: "促销计算规则" },
+]);
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleSelectModel() {
+  // 编辑模块
+  showModal.value = true;
+}
+// 添加轮播图
+function handleAdd() {
+  props.data.options.list.push({ img: "", url: "", type: "" });
+  proxy.$forceUpdate();
+}
+function handleSelectLink(item) {
+  // 选择链接
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+function callbackSelected(item) {
+  // 选择图片回调
+  picModelFlag.value = false;
+  selected.value.img = item.url;
+}
+function handleDel(index) {
+  // 删除图片
+  props.data.options.list.splice(index, 1);
+}
+function selectedLink(val) {
+  // 选择链接回调
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择图片
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/carousel1.vue b/seller/src/views/shop/modelList/carousel1.vue
index cc8d6d88e..a11ad3924 100644
--- a/seller/src/views/shop/modelList/carousel1.vue
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -84,76 +84,77 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManageRef" />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { getCurrentInstance, nextTick, onMounted, ref } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      bgColor: "#fff", // 轮播背景色
-    };
-  },
-  mounted() {
-    this.bgColor = this.data.options.list[0].bgColor;
-  },
-  methods: {
-    handleSelectModel() {
-      // 编辑模块
-      this.showModal = true;
-    },
-    // 自动切换时改变背景色
-    autoChange(oVal, val) {
-      this.bgColor = this.data.options.list[val].bgColor;
-    },
-    // 添加轮播图片和链接
-    handleAdd() {
-      this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
-      this.$forceUpdate();
-    },
-    // 打开选择链接modal
-    handleSelectLink(item) {
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      this.selected.img = item.url;
-    },
-    // 删除图片
-    handleDel(index) {
-      this.data.options.list.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 打开选择图片modal
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+import { formatLinkType } from "@/utils/filters";
+
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const picModelFlag = ref(false); // 选择图片modal
+const bgColor = ref("#fff"); // 轮播背景色
+
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+onMounted(() => {
+  bgColor.value = props.data.options.list[0].bgColor;
+});
+
+// 编辑模块
+function handleSelectModel() {
+  showModal.value = true;
+}
+// 自动切换时改变背景色
+function autoChange(oVal, val) {
+  bgColor.value = props.data.options.list[val].bgColor;
+}
+// 添加轮播图片和链接
+function handleAdd() {
+  props.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
+  proxy.$forceUpdate();
+}
+// 打开选择链接modal
+function handleSelectLink(item) {
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+// 选择图片回调
+function callbackSelected(item) {
+  picModelFlag.value = false;
+  selected.value.img = item.url;
+}
+// 删除图片
+function handleDel(index) {
+  props.data.options.list.splice(index, 1);
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 打开选择图片modal
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/carousel2.vue b/seller/src/views/shop/modelList/carousel2.vue
index a42fac2be..f055c9376 100644
--- a/seller/src/views/shop/modelList/carousel2.vue
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -204,88 +204,88 @@
     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
     <!-- 选择图片 -->
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManageRef" />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, nextTick, getCurrentInstance } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "modelCarousel",
-  props: ["data"],
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      showModal: false, // modal显隐
-      selected: null, // 已选数据
-      picModelFlag: false, // 选择图片modal
-      userInfo: {},
-      articleList: [
-        { title: "促销计算规则" },
-        { title: "商家申请开店" },
-        { title: "商家账号注册" },
-        { title: "促销计算规则" },
-      ],
-    };
-  },
+import { formatLinkType } from "@/utils/filters";
 
-  methods: {
-    handleSelectModel() {
-      // 编辑模块
-      this.showModal = true;
-    },
-    // 添加轮播
-    handleAdd() {
-      this.data.options.list.push({ img: "", url: "" });
-      this.$forceUpdate();
-    },
-    // 添加图片组
-    handleAddGroup() {
-      this.data.options.listRight.push([
-        { img: "", url: "" },
-        { img: "", url: "" },
-        { img: "", url: "" },
-      ]);
-    },
-    // 删除图片组
-    handleTabRemove(index) {
-      this.data.options.listRight.splice(index, 1);
-    },
-    // 打开图片链接
-    handleSelectLink(item) {
-      this.$refs.liliDialog.open("link");
-      this.selected = item;
-    },
-    callbackSelected(item) {
-      // 选择图片回调
-      this.picModelFlag = false;
-      this.selected.img = item.url;
-    },
-    // 删除图片
-    handleDel(index) {
-      this.data.options.list.splice(index, 1);
-    },
-    selectedLink(val) {
-      // 选择链接回调
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 打开选择图片modal
-    handleSelectImg(item) {
-      this.selected = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-  },
-};
+defineOptions({ name: "modelCarousel" });
+
+const props = defineProps(["data"]);
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false); // modal显隐
+const selected = ref(null); // 已选数据
+const picModelFlag = ref(false); // 选择图片modal
+const userInfo = reactive({});
+const articleList = ref([
+  { title: "促销计算规则" },
+  { title: "商家申请开店" },
+  { title: "商家账号注册" },
+  { title: "促销计算规则" },
+]);
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleSelectModel() {
+  // 编辑模块
+  showModal.value = true;
+}
+// 添加轮播
+function handleAdd() {
+  props.data.options.list.push({ img: "", url: "" });
+  proxy.$forceUpdate();
+}
+// 添加图片组
+function handleAddGroup() {
+  props.data.options.listRight.push([
+    { img: "", url: "" },
+    { img: "", url: "" },
+    { img: "", url: "" },
+  ]);
+}
+// 删除图片组
+function handleTabRemove(index) {
+  props.data.options.listRight.splice(index, 1);
+}
+// 打开图片链接
+function handleSelectLink(item) {
+  liliDialog.value.open("link");
+  selected.value = item;
+}
+function callbackSelected(item) {
+  // 选择图片回调
+  picModelFlag.value = false;
+  selected.value.img = item.url;
+}
+// 删除图片
+function handleDel(index) {
+  props.data.options.list.splice(index, 1);
+}
+function selectedLink(val) {
+  // 选择链接回调
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 打开选择图片modal
+function handleSelectImg(item) {
+  selected.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/firstPageAdvert.vue b/seller/src/views/shop/modelList/firstPageAdvert.vue
index 17d592e95..9013571b5 100644
--- a/seller/src/views/shop/modelList/firstPageAdvert.vue
+++ b/seller/src/views/shop/modelList/firstPageAdvert.vue
@@ -113,80 +113,80 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
+import { formatLinkType } from "@/utils/filters";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
   },
-  components: { ossManage },
-  data() {
-    return {
-      options: this.data.options, // 当前类型数据
-      showModal: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确定后写回的原数据
-      picModelFlag: false, // 图片选择器
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 打开装修modal
-    handleSelectModel(item, type) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      this.showModal = true;
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-  },
-};
+});
+
+const options = ref(props.data.options); // 当前类型数据
+const showModal = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确定后写回的原数据
+const picModelFlag = ref(false); // 图片选择器
+
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 打开装修modal
+function handleSelectModel(item, type) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  showModal.value = true;
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/seller/src/views/shop/modelList/forYour.vue b/seller/src/views/shop/modelList/forYour.vue
index bb5e93ef9..7a626abed 100644
--- a/seller/src/views/shop/modelList/forYour.vue
+++ b/seller/src/views/shop/modelList/forYour.vue
@@ -158,7 +158,7 @@
 
     <!-- 选择商品。链接 -->
     <liliDialog
-      ref="liliDialog"
+      ref="liliDialogRef"
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
@@ -170,110 +170,104 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, nextTick } from "vue";
+import { formatLinkType } from "@/utils/filters";
 import ossManage from "@/views/sys/oss-manage/ossManage.vue";
 
-export default {
-  name: "forYour",
-  data() {
-    return {
-      showModal: false,
+defineOptions({ name: "forYour" });
 
-      picModelFlag: false,
-      selectedData: "", //选中的数据
-      goodsIndex: 0, // 商品索引
-      align: "",
-      defaultCallbackImageType: "",
-      current: "",
-    };
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  components: {
-    ossManage,
-  },
-  mounted() {
-   },
-  methods: {
-    handleSelectImg(type, index) {
-      this.defaultCallbackImageType = type;
-      this.goodsIndex = index;
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
+});
 
-    handleSelectGoods(val, index) {
-      this.$refs.liliDialog.open("goods");
-      this.$refs.liliDialog.singleGoods();
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    handleSelectLink(val, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.selectedData = val;
+const showModal = ref(false);
+const picModelFlag = ref(false);
+const selectedData = ref(""); //选中的数据
+const goodsIndex = ref(0); // 商品索引
+const align = ref("");
+const defaultCallbackImageType = ref("");
+const current = ref("");
 
-      this.goodsIndex = index;
-    },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (this.defaultCallbackImageType == "image") {
-        this.data.options.data.image.src = val.url;
-      } else {
-        this.data.options.data[this.defaultCallbackImageType][
-          this.goodsIndex
-        ].img = val.url;
-      }
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
-      this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
-      this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
-      this.data.options.data.hot.list[this.goodsIndex].url =
-        this.$filters.formatLinkType(val[0]);
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
 
-      console.log(val, this.selectedData, this.goodsIndex);
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      console.log(val,this.selectedData)
-      if (this.selectedData == "image") {
-        this.data.options.data.image.url =
-          this.$filters.formatLinkType(val);
-      } else {
-        console.log(this.data.options.data.list,this.goodsIndex)
-        this.data.options.data.list[
-          this.goodsIndex
-        ].url =  this.$filters.formatLinkType(val);
-      }
-    },
-    /*
-     * 点击不同模块进行编辑
-     * 判断也很简单，就是第一个第二个模块进行判断
-     *
-     * */
-    handleSelectModel() {
-      this.showModal = true;
-    },
-  },
-};
+function handleSelectImg(type, index) {
+  defaultCallbackImageType.value = type;
+  goodsIndex.value = index;
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function handleSelectGoods(val, index) {
+  liliDialogRef.value.open("goods");
+  liliDialogRef.value.singleGoods();
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+function handleSelectLink(val, index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+  selectedData.value = val;
+
+  goodsIndex.value = index;
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (defaultCallbackImageType.value == "image") {
+    props.data.options.data.image.src = val.url;
+  } else {
+    props.data.options.data[defaultCallbackImageType.value][
+      goodsIndex.value
+    ].img = val.url;
+  }
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  props.data.options.data.hot.list[goodsIndex.value].img = val[0].thumbnail;
+  props.data.options.data.hot.list[goodsIndex.value].title = val[0].goodsName;
+  props.data.options.data.hot.list[goodsIndex.value].price = val[0].price;
+  props.data.options.data.hot.list[goodsIndex.value].url =
+    formatLinkType(val[0]);
+
+  console.log(val, selectedData.value, goodsIndex.value);
+}
+// 选择链接回调
+function selectedLink(val) {
+  console.log(val, selectedData.value)
+  if (selectedData.value == "image") {
+    props.data.options.data.image.url =
+      formatLinkType(val);
+  } else {
+    console.log(props.data.options.data.list, goodsIndex.value)
+    props.data.options.data.list[
+      goodsIndex.value
+    ].url =  formatLinkType(val);
+  }
+}
+/*
+ * 点击不同模块进行编辑
+ * 判断也很简单，就是第一个第二个模块进行判断
+ *
+ * */
+function handleSelectModel() {
+  showModal.value = true;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/goodsAndType.vue b/seller/src/views/shop/modelList/goodsAndType.vue
index 6582c5409..edeedb88d 100644
--- a/seller/src/views/shop/modelList/goodsAndType.vue
+++ b/seller/src/views/shop/modelList/goodsAndType.vue
@@ -123,116 +123,118 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, onMounted } from "vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "goods",
+defineOptions({ name: "goods" });
 
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  data() {
-    return {
-      tabIndex:0,
-      current: 0,
-      showModal: false,
-      selected: {}, // 已选数据
-      picModelFlag: false,
-      tabCurrentlyIndex: 0, // 选项卡索引
-    };
-  },
-  mounted(){
-    this.tabIndex = this.data.options.labels[0].___index
-  },
-  methods: {
-    /**
-     * 算出最大的index 然后索引叠加
-     */
-    handleTabsAdd() {
-      let findAllIndex = this.data.options.labels.map((item) => {
-        return item.___index;
-      });
-      let max = Math.max.apply(null, findAllIndex);
+});
 
-      this.data.options.labels.push({
-        label: "标签" + (max + 1),
-        ___index: max + 1,
-      });
-    },
-    // 删除标签
-    handleContextMenuDelete(item,index) {
-      // 删除标签下关联的商品
-      this.data.options.list.forEach((lab,currently)=>{
-        if(lab.___index == item.___index){
-           this.data.options.list.splice(currently,1)
-        }
-      })
-      // 删除当前标签
-      this.data.options.labels.splice(index,1)
-    },
-    // 删除商品
-    delGoods(val) {
-      this.data.options.list.forEach((item, i) => {
-        if (
-          item.title == val.title &&
-          item.___index == this.tabCurrentlyIndex
-        ) {
-          this.data.options.list.splice(i, 1);
-        }
-      });
-    },
-    // 切换选项卡
-    handleClickTab(name) {
-      console.log(name)
-      this.tabCurrentlyIndex = name;
-    },
-    // 添加当前选项卡中的商品
-    addCurrentGoods() {
+const liliDialog = ref(null);
 
-      this.$refs.liliDialog.clearGoodsSelected();
-      this.$refs.liliDialog.open("goods");
-    },
-    // 编辑模块
-    handleSelectModel(item) {
-      console.log(item);
-      this.selected = item;
-      this.showModal = true;
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (val.length) {
-        val.forEach((item) => {
-          const pushGoodsDetail = {
-            img: item.thumbnail,
-            price: item.price,
-            title: item.goodsName,
-            desc: "",
-            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
-            ___index: this.tabCurrentlyIndex,
-          };
-          this.data.options.list.push(pushGoodsDetail);
-        });
-      }
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected[this.current].url =
-        this.$filters.formatLinkType(val);
-      this.selected[this.current].type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
+const tabIndex = ref(0);
+const current = ref(0);
+const showModal = ref(false);
+const selected = ref({}); // 已选数据
+const picModelFlag = ref(false);
+const tabCurrentlyIndex = ref(0); // 选项卡索引
 
-      console.log(this.selected[this.current]);
-    },
-    handleSelectLink(index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-  },
-};
+onMounted(() => {
+  tabIndex.value = props.data.options.labels[0].___index;
+});
+
+/**
+ * 算出最大的index 然后索引叠加
+ */
+function handleTabsAdd() {
+  let findAllIndex = props.data.options.labels.map((item) => {
+    return item.___index;
+  });
+  let max = Math.max.apply(null, findAllIndex);
+
+  props.data.options.labels.push({
+    label: "标签" + (max + 1),
+    ___index: max + 1,
+  });
+}
+
+// 删除标签
+function handleContextMenuDelete(item, index) {
+  // 删除标签下关联的商品
+  props.data.options.list.forEach((lab, currently) => {
+    if (lab.___index == item.___index) {
+      props.data.options.list.splice(currently, 1);
+    }
+  });
+  // 删除当前标签
+  props.data.options.labels.splice(index, 1);
+}
+
+// 删除商品
+function delGoods(val) {
+  props.data.options.list.forEach((item, i) => {
+    if (item.title == val.title && item.___index == tabCurrentlyIndex.value) {
+      props.data.options.list.splice(i, 1);
+    }
+  });
+}
+
+// 切换选项卡
+function handleClickTab(name) {
+  console.log(name);
+  tabCurrentlyIndex.value = name;
+}
+
+// 添加当前选项卡中的商品
+function addCurrentGoods() {
+  liliDialog.value.clearGoodsSelected();
+  liliDialog.value.open("goods");
+}
+
+// 编辑模块
+function handleSelectModel(item) {
+  console.log(item);
+  selected.value = item;
+  showModal.value = true;
+}
+
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (val.length) {
+    val.forEach((item) => {
+      const pushGoodsDetail = {
+        img: item.thumbnail,
+        price: item.price,
+        title: item.goodsName,
+        desc: "",
+        url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+        ___index: tabCurrentlyIndex.value,
+      };
+      props.data.options.list.push(pushGoodsDetail);
+    });
+  }
+}
+
+// 选择链接回调
+function selectedLink(val) {
+  selected.value[current.value].url = formatLinkType(val);
+  selected.value[current.value].type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+
+  console.log(selected.value[current.value]);
+}
+
+function handleSelectLink(index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+  current.value = index;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/mixModel.vue b/seller/src/views/shop/modelList/mixModel.vue
index fb171b3ea..6d7a49af0 100644
--- a/seller/src/views/shop/modelList/mixModel.vue
+++ b/seller/src/views/shop/modelList/mixModel.vue
@@ -154,120 +154,117 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { getCurrentInstance, nextTick, ref } from "vue";
 import left from "./mixs/mix-goods";
 import right from "./mixs/mix-brand";
 import ossManage from "@/views/sys/oss-manage/ossManage.vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "mixModel",
-  data() {
-    return {
-      showModal: false,
-      current: "", //当前选择的模块
-      picModelFlag: false,
-      selectedData: "", //选中的数据
-      goodsIndex: 0, // 商品索引
-      align: "",
-      defaultCallbackImageType: "",
-    };
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  components: {
-    left,
-    right,
-    ossManage,
-  },
-  mounted() {},
-  methods: {
-    handleSelectImg(type, index) {
-      this.defaultCallbackImageType = type;
-      this.goodsIndex = index;
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
+defineOptions({ name: "mixModel" });
 
-    handleSelectGoods(val, index) {
-      this.$refs.liliDialog.open("goods");
-      this.$refs.liliDialog.singleGoods();
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    handleSelectLink(val, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.selectedData = val;
-      this.goodsIndex = index;
-    },
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (this.defaultCallbackImageType == "default") {
-        console.log(this.current.data.image);
-        this.current.data.image.src = val.url;
-      } else {
-        console.log(this.goodsIndex, this.data.options[this.align].data.list);
-        this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
-
-        // this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
-      }
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      console.log(val);
-      this.$nextTick(() => {
-        this.data.options[this.align].data.list[this.goodsIndex].img =
-          val[0].thumbnail;
-        this.data.options[this.align].data.list[this.goodsIndex].title =
-          val[0].goodsName;
-        this.data.options[this.align].data.list[this.goodsIndex].price =
-          val[0].price;
-        this.data.options[this.align].data.list[this.goodsIndex].url =
-          val[0].url;
-      });
-      console.log(this.data.options[this.align].data.list[this.goodsIndex]);
-      this.$forceUpdate();
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (this.selectedData != "list") {
-        this.data.options[this.align].data[this.selectedData].url = this.$filters.formatLinkType(val);
-        console.log(this.data.options[this.align].data[this.selectedData])
-      }
-      if (this.selectedData == "list") {
-         this.data.options[this.align].data[this.selectedData][this.goodsIndex]
-        .url = this.$filters.formatLinkType(val);
-      }
-    },
-    /*
-     * 点击不同模块进行编辑
-     * 判断也很简单，就是第一个第二个模块进行判断
-     *
-     * */
-    handleSelectModel(align) {
-      this.align = align;
-      this.current = this.data.options[align];
-      console.log(this.data.options[align]);
-      this.showModal = true;
-    },
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
+
+const { proxy } = getCurrentInstance();
+
+const showModal = ref(false);
+const current = ref(""); //当前选择的模块
+const picModelFlag = ref(false);
+const selectedData = ref(""); //选中的数据
+const goodsIndex = ref(0); // 商品索引
+const align = ref("");
+const defaultCallbackImageType = ref("");
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function handleSelectImg(type, index) {
+  defaultCallbackImageType.value = type;
+  goodsIndex.value = index;
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+
+function handleSelectGoods(val, index) {
+  liliDialog.value.open("goods");
+  liliDialog.value.singleGoods();
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+function handleSelectLink(val, index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+  selectedData.value = val;
+  goodsIndex.value = index;
+}
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (defaultCallbackImageType.value == "default") {
+    console.log(current.value.data.image);
+    current.value.data.image.src = val.url;
+  } else {
+    console.log(goodsIndex.value, props.data.options[align.value].data.list);
+    props.data.options[align.value].data.list[goodsIndex.value].img = val.url;
+
+    // props.data.options[align.value].data[selectedData.value][goodsIndex.value].url = val.img
+  }
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  console.log(val);
+  nextTick(() => {
+    props.data.options[align.value].data.list[goodsIndex.value].img =
+      val[0].thumbnail;
+    props.data.options[align.value].data.list[goodsIndex.value].title =
+      val[0].goodsName;
+    props.data.options[align.value].data.list[goodsIndex.value].price =
+      val[0].price;
+    props.data.options[align.value].data.list[goodsIndex.value].url =
+      val[0].url;
+  });
+  console.log(props.data.options[align.value].data.list[goodsIndex.value]);
+  proxy.$forceUpdate();
+}
+// 选择链接回调
+function selectedLink(val) {
+  if (selectedData.value != "list") {
+    props.data.options[align.value].data[selectedData.value].url = formatLinkType(val);
+    console.log(props.data.options[align.value].data[selectedData.value])
+  }
+  if (selectedData.value == "list") {
+     props.data.options[align.value].data[selectedData.value][goodsIndex.value]
+    .url = formatLinkType(val);
+  }
+}
+/*
+ * 点击不同模块进行编辑
+ * 判断也很简单，就是第一个第二个模块进行判断
+ *
+ * */
+function handleSelectModel(alignVal) {
+  align.value = alignVal;
+  current.value = props.data.options[alignVal];
+  console.log(props.data.options[alignVal]);
+  showModal.value = true;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/mixs/mix-brand.vue b/seller/src/views/shop/modelList/mixs/mix-brand.vue
index eb9605899..1c25fa371 100644
--- a/seller/src/views/shop/modelList/mixs/mix-brand.vue
+++ b/seller/src/views/shop/modelList/mixs/mix-brand.vue
@@ -22,25 +22,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ArrowRight } from "@element-plus/icons-vue";
-export default {
-  name: "mix-goods",
-  components: { ArrowRight },
-  data() {
-    return {}
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  mounted() {
 
-  },
-  methods: {}
-}
+defineOptions({ name: "mix-goods" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/mixs/mix-goods.vue b/seller/src/views/shop/modelList/mixs/mix-goods.vue
index 5c84bbc4a..d69653383 100644
--- a/seller/src/views/shop/modelList/mixs/mix-goods.vue
+++ b/seller/src/views/shop/modelList/mixs/mix-goods.vue
@@ -24,24 +24,15 @@
     </div>
 </template>
 
-<script>
-export default {
-  name: "mix-goods",
-  data() {
-    return {}
-  },
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  components: {},
-  mounted() {
+<script setup>
+defineOptions({ name: "mix-goods" });
 
-  },
-  methods: {}
-}
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/newGoodsSort.vue b/seller/src/views/shop/modelList/newGoodsSort.vue
index 780ccdbce..b44ca36d4 100644
--- a/seller/src/views/shop/modelList/newGoodsSort.vue
+++ b/seller/src/views/shop/modelList/newGoodsSort.vue
@@ -242,125 +242,123 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, ref } from "vue";
+import { formatLinkType } from "@/utils/filters";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
   },
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      options: this.data.options, // 当前数据
-      showModal: false, // modal显隐
-      showModal1: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确定后写回的原数据
-      picModelFlag: false, // 选择图片modal
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 装修modal
-    handleSelectModel(item, type) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      if (type) {
-        this.showModal1 = true;
-      } else {
-        this.showModal = true;
-      }
-    },
-    handleSelectLink() {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    handleSelectGoods(item) {
-      if (item) {
-        this.editTarget = item;
-        this.selected = this.cloneItem(item);
-      }
-      this.$refs.liliDialog.open("goods", "single");
-      setTimeout(() => {
-        this.$refs.liliDialog.goodsData = [this.selected];
-      }, 500);
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      if (!this.selected) return;
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (!val?.length || !this.selected) return;
-      const goods = val[0];
-      this.selected.img = goods.thumbnail;
-      this.selected.price = goods.price;
-      this.selected.name = goods.goodsName;
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-      if (this.editTarget && !this.showModal && !this.showModal1) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-        this.editTarget = null;
-        this.selected = {};
-      }
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleCancelModal1() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-    handleConfirmModal1() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-  },
-};
+});
+
+const options = ref(props.data.options); // 当前数据
+const showModal = ref(false); // modal显隐
+const showModal1 = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确定后写回的原数据
+const picModelFlag = ref(false); // 选择图片modal
+
+const liliDialog = ref(null);
+// ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 装修modal
+function handleSelectModel(item, type) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  if (type) {
+    showModal1.value = true;
+  } else {
+    showModal.value = true;
+  }
+}
+function handleSelectLink() {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+}
+function handleSelectGoods(item) {
+  if (item) {
+    editTarget.value = item;
+    selected.value = cloneItem(item);
+  }
+  liliDialog.value.open("goods", "single");
+  setTimeout(() => {
+    liliDialog.value.goodsData = [selected.value];
+  }, 500);
+}
+// 选择链接回调
+function selectedLink(val) {
+  if (!selected.value) return;
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (!val?.length || !selected.value) return;
+  const goods = val[0];
+  selected.value.img = goods.thumbnail;
+  selected.value.price = goods.price;
+  selected.value.name = goods.goodsName;
+  selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+  if (editTarget.value && !showModal.value && !showModal1.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+    editTarget.value = null;
+    selected.value = {};
+  }
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleCancelModal1() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
+function handleConfirmModal1() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/seller/src/views/shop/modelList/notEnough.vue b/seller/src/views/shop/modelList/notEnough.vue
index ae10d7bc7..af340e6c6 100644
--- a/seller/src/views/shop/modelList/notEnough.vue
+++ b/seller/src/views/shop/modelList/notEnough.vue
@@ -96,118 +96,116 @@
         ></liliDialog>
     </div>
 </template>
-<script>
-export default {
-    props:{
-        data:{
-            type: Object,
-            default: null
-        }
-    },
-    data() {
-        return {
-            currentIndex:0,
-            conData:this.data,
-            selected:{},
-            editTarget: null,
-            showModal:false,
-            showGoodsModal: false,
-            showContent:true,
-            draftNavList: [],
-            draftGoodsList: [],
-        }
-    },
-    watch:{
-        data:function(val){
-            this.conData = val
-        },
-        conData:function(val){
-            this.$emit('content',val)
-        }
-    },
-    methods:{
-        cloneList(list) {
-            return JSON.parse(JSON.stringify(list || []));
-        },
-        cloneItem(item) {
-            return JSON.parse(JSON.stringify(item || {}));
-        },
-        changeCurr(index){
-            this.currentIndex = index;
-        },
-        handleSelectModel () {
-            this.draftNavList = this.cloneList(this.conData.options.navList);
-            this.draftGoodsList = this.cloneList(this.conData.options.list);
-            this.showModal = true;
-        },
-        handleSelectGoods(item) {
-            this.editTarget = item;
-            this.selected = this.cloneItem(item);
-            this.showGoodsModal = true;
-        },
-        handleOpenGoodsPicker() {
-            this.$refs.liliDialog.open('goods', 'single');
-            setTimeout(() => {
-                this.$refs.liliDialog.goodsData = [this.selected];
-            }, 500);
-        },
-        selectedGoodsData(val){
-            if (!val?.length) return;
-            const goods = val[0];
-            this.selected.img = goods.thumbnail;
-            this.selected.price = goods.price;
-            this.selected.name = goods.goodsName;
-            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-        },
-        handleDelNav(index){
-            this.draftNavList.splice(index,1);
-            this.draftGoodsList.splice(index,1);
-        },
-        handleAddNav(){
-            this.draftNavList.push({ title:'', desc:'' });
-            this.draftGoodsList.push([
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-                { img:'', name:'', price:0, url:'' },
-            ]);
-        },
-        handleCancelModal() {
-            this.draftNavList = [];
-            this.draftGoodsList = [];
-            this.showModal = false;
-        },
-        handleConfirmModal() {
-            this.conData.options.navList = this.cloneList(this.draftNavList);
-            this.conData.options.list = this.cloneList(this.draftGoodsList);
-            this.draftNavList = [];
-            this.draftGoodsList = [];
-            this.showContent = false;
-            this.$nextTick(() => {
-                this.showContent = true;
-            });
-            this.showModal = false;
-        },
-        handleCancelGoodsModal() {
-            this.editTarget = null;
-            this.selected = {};
-            this.showGoodsModal = false;
-        },
-        handleConfirmGoodsModal() {
-            if (this.editTarget) {
-                Object.assign(this.editTarget, this.cloneItem(this.selected));
-            }
-            this.editTarget = null;
-            this.selected = {};
-            this.showGoodsModal = false;
-        },
+<script setup>
+import { nextTick, ref, watch } from "vue";
+
+const props = defineProps({
+    data:{
+        type: Object,
+        default: null
     }
+});
+const emit = defineEmits(['content']);
+
+const currentIndex = ref(0);
+const conData = ref(props.data);
+const selected = ref({});
+const editTarget = ref(null);
+const showModal = ref(false);
+const showGoodsModal = ref(false);
+const showContent = ref(true);
+const draftNavList = ref([]);
+const draftGoodsList = ref([]);
+
+const liliDialog = ref(null);
+
+watch(() => props.data, (val) => {
+    conData.value = val;
+});
+watch(conData, (val) => {
+    emit('content', val);
+});
+
+function cloneList(list) {
+    return JSON.parse(JSON.stringify(list || []));
+}
+function cloneItem(item) {
+    return JSON.parse(JSON.stringify(item || {}));
+}
+function changeCurr(index){
+    currentIndex.value = index;
+}
+function handleSelectModel () {
+    draftNavList.value = cloneList(conData.value.options.navList);
+    draftGoodsList.value = cloneList(conData.value.options.list);
+    showModal.value = true;
+}
+function handleSelectGoods(item) {
+    editTarget.value = item;
+    selected.value = cloneItem(item);
+    showGoodsModal.value = true;
+}
+function handleOpenGoodsPicker() {
+    liliDialog.value.open('goods', 'single');
+    setTimeout(() => {
+        liliDialog.value.goodsData = [selected.value];
+    }, 500);
+}
+function selectedGoodsData(val){
+    if (!val?.length) return;
+    const goods = val[0];
+    selected.value.img = goods.thumbnail;
+    selected.value.price = goods.price;
+    selected.value.name = goods.goodsName;
+    selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+function handleDelNav(index){
+    draftNavList.value.splice(index,1);
+    draftGoodsList.value.splice(index,1);
+}
+function handleAddNav(){
+    draftNavList.value.push({ title:'', desc:'' });
+    draftGoodsList.value.push([
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+        { img:'', name:'', price:0, url:'' },
+    ]);
+}
+function handleCancelModal() {
+    draftNavList.value = [];
+    draftGoodsList.value = [];
+    showModal.value = false;
+}
+function handleConfirmModal() {
+    conData.value.options.navList = cloneList(draftNavList.value);
+    conData.value.options.list = cloneList(draftGoodsList.value);
+    draftNavList.value = [];
+    draftGoodsList.value = [];
+    showContent.value = false;
+    nextTick(() => {
+        showContent.value = true;
+    });
+    showModal.value = false;
+}
+function handleCancelGoodsModal() {
+    editTarget.value = null;
+    selected.value = {};
+    showGoodsModal.value = false;
+}
+function handleConfirmGoodsModal() {
+    if (editTarget.value) {
+        Object.assign(editTarget.value, cloneItem(selected.value));
+    }
+    editTarget.value = null;
+    selected.value = {};
+    showGoodsModal.value = false;
 }
 </script>
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/modelList/oneRowThreeColumns.vue b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
index 79d7857f6..e5daea381 100644
--- a/seller/src/views/shop/modelList/oneRowThreeColumns.vue
+++ b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
@@ -45,7 +45,7 @@
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
-      ref="liliDialog"
+      ref="liliDialogRef"
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
@@ -56,75 +56,80 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, ref } from "vue";
+import { formatLinkType } from "@/utils/filters";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  name: "oneRowThreeColumns",
-  components:{ossManage},
-  props: {
-    data: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      showModal:false,
-      selected: {}, // 已选数据
-      picModelFlag:false,
-      current:0,
-    };
-  },
-  methods: {
-    // 回显图片
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      this.selected[this.current].img = val.url;
-      console.log(this.selected)
-    },
-    // 编辑模块
-    handleSelectModel(item) {
-      this.selected = item;
-      this.showModal = true;
 
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      console.log(val);
-      let goods = val[0];
-      this.selected.img = goods.thumbnail;
-      this.selected.price = goods.price;
-      this.selected.name = goods.goodsName;
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    handleSelectLink(index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-    handleSelectImg(index){
-      // 选择图片
-      this.current = index;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    }
+defineOptions({ name: "oneRowThreeColumns" });
+
+defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
   }
+});
+
+const showModal = ref(false);
+const selected = ref({}); // 已选数据
+const picModelFlag = ref(false);
+const current = ref(0);
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+// 回显图片
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  selected.value[current.value].img = val.url;
+  console.log(selected.value)
+}
+
+// 编辑模块
+function handleSelectModel(item) {
+  selected.value = item;
+  showModal.value = true;
+
+}
+
+// 选择商品回调
+function selectedGoodsData(val) {
+  console.log(val);
+  let goods = val[0];
+  selected.value.img = goods.thumbnail;
+  selected.value.price = goods.price;
+  selected.value.name = goods.goodsName;
+  selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+
+function handleSelectLink(index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+  current.value = index;
+}
+
+function handleSelectImg(index) {
+  // 选择图片
+  current.value = index;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
 }
 </script>
 
diff --git a/seller/src/views/shop/modelList/onlyGoodsModel.vue b/seller/src/views/shop/modelList/onlyGoodsModel.vue
index 2c9b4a4b5..b7618f8c6 100644
--- a/seller/src/views/shop/modelList/onlyGoodsModel.vue
+++ b/seller/src/views/shop/modelList/onlyGoodsModel.vue
@@ -76,75 +76,70 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
+import { formatLinkType } from "@/utils/filters";
 
-export default {
-  name: "onlyGoodsList",
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  data() {
-    return {
-      flag:false,
-      tabIndex:0,
-      current: 0,
-      showModal: false,
-      selected: {}, // 已选数据
-      picModelFlag: false,
-    };
-  },
-  mounted(){
+defineOptions({ name: "onlyGoodsList" });
 
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  methods: {
-    // 删除商品
-    delGoods(val,i) {
-      this.data.options.list.splice(i, 1);
-    },
-    // 添加当前选项卡中的商品
-    addCurrentGoods() {
-      this.$refs.liliDialog.open("goods");
-    },
-    // 编辑模块
-    handleSelectModel(item) {
-      console.log(item);
-      this.selected = item;
-      this.showModal = true;
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      if (val.length) {
-        val.forEach((item) => {
-          const pushGoodsDetail = {
-            img: item.thumbnail,
-            price: item.price,
-            title: item.goodsName,
-            desc: "",
-            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
-          };
-          this.data.options.list.push(pushGoodsDetail);
-        });
-      }
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected[this.current].url =
-        this.$filters.formatLinkType(val);
-      this.selected[this.current].type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
+});
 
-      console.log(this.selected[this.current]);
-    },
-    handleSelectLink(index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-      this.current = index;
-    },
-  },
-};
+const flag = ref(false);
+const tabIndex = ref(0);
+const current = ref(0);
+const showModal = ref(false);
+const selected = ref({}); // 已选数据
+const picModelFlag = ref(false);
+
+const liliDialog = ref(null);
+
+// 删除商品
+function delGoods(val, i) {
+  props.data.options.list.splice(i, 1);
+}
+// 添加当前选项卡中的商品
+function addCurrentGoods() {
+  liliDialog.value.open("goods");
+}
+// 编辑模块
+function handleSelectModel(item) {
+  console.log(item);
+  selected.value = item;
+  showModal.value = true;
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  if (val.length) {
+    val.forEach((item) => {
+      const pushGoodsDetail = {
+        img: item.thumbnail,
+        price: item.price,
+        title: item.goodsName,
+        desc: "",
+        url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+      };
+      props.data.options.list.push(pushGoodsDetail);
+    });
+  }
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value[current.value].url = formatLinkType(val);
+  selected.value[current.value].type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+
+  console.log(selected.value[current.value]);
+}
+function handleSelectLink(index) {
+  // 调起选择链接弹窗
+  liliDialog.value.open("link");
+  current.value = index;
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/modelList/recommend.vue b/seller/src/views/shop/modelList/recommend.vue
index d5531b1e0..cb8d1cf27 100644
--- a/seller/src/views/shop/modelList/recommend.vue
+++ b/seller/src/views/shop/modelList/recommend.vue
@@ -216,7 +216,7 @@
     </el-dialog>
     <!-- 选择商品。链接 -->
     <liliDialog
-      ref="liliDialog"
+      ref="liliDialogRef"
       @selectedLink="selectedLink"
       @selectedGoodsData="selectedGoodsData"
     ></liliDialog>
@@ -227,114 +227,111 @@
         :is-component="true"
         :initialize="picModelFlag"
         :max-select="1"
-        ref="ossManage"
+        ref="ossManageRef"
       />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { nextTick, reactive, ref } from "vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
+import { formatLinkType } from "@/utils/filters";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
   },
-  components: {
-    ossManage,
-  },
-  data() {
-    return {
-      msgLeft: this.data.options.contentLeft, // 左侧数据
-      msgRight: this.data.options.contentRight, // 右侧数据
-      showModal: false, // modal显隐
-      showModal1: false, // modal显隐
-      selected: {}, // 弹窗编辑草稿
-      editTarget: null, // 确定后写回的原数据
-      picModelFlag: false, // 图片选择
-    };
-  },
-  methods: {
-    cloneItem(item) {
-      return JSON.parse(JSON.stringify(item || {}));
-    },
-    // 编辑
-    handleSelectModel(item, type) {
-      this.editTarget = item;
-      this.selected = this.cloneItem(item);
-      if (type) {
-        this.showModal1 = true;
-      } else {
-        this.showModal = true;
-      }
-    },
-    handleSelectLink(item, index) {
-      // 调起选择链接弹窗
-      this.$refs.liliDialog.open("link");
-    },
-    handleSelectGoods(item) {
-      // 调起选择商品
-      this.$refs.liliDialog.open("goods", "single");
-    },
-    // 选择链接回调
-    selectedLink(val) {
-      this.selected.url = this.$filters.formatLinkType(val);
-      this.selected.type =
-        val.___type === "other" && val.url === "" ? "link" : "other";
-    },
-    // 选择商品回调
-    selectedGoodsData(val) {
-      console.log(val);
-      let goods = val[0];
-      this.selected.img = goods.thumbnail;
-      this.selected.price = goods.price;
-      this.selected.name = goods.goodsName;
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
-    },
-    handleSelectImg() {
-      // 选择图片
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    // 选择图片回调
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selected.img = val.url;
-    },
-    handleCancelModal() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleConfirmModal() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal = false;
-    },
-    handleCancelModal1() {
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-    handleConfirmModal1() {
-      if (this.editTarget) {
-        Object.assign(this.editTarget, this.cloneItem(this.selected));
-      }
-      this.editTarget = null;
-      this.selected = {};
-      this.showModal1 = false;
-    },
-  },
-};
+});
+
+const msgLeft = reactive(props.data.options.contentLeft); // 左侧数据
+const msgRight = reactive(props.data.options.contentRight); // 右侧数据
+const showModal = ref(false); // modal显隐
+const showModal1 = ref(false); // modal显隐
+const selected = ref({}); // 弹窗编辑草稿
+const editTarget = ref(null); // 确定后写回的原数据
+const picModelFlag = ref(false); // 图片选择
+
+const liliDialogRef = ref(null);
+const ossManageRef = ref(null);
+
+function cloneItem(item) {
+  return JSON.parse(JSON.stringify(item || {}));
+}
+// 编辑
+function handleSelectModel(item, type) {
+  editTarget.value = item;
+  selected.value = cloneItem(item);
+  if (type) {
+    showModal1.value = true;
+  } else {
+    showModal.value = true;
+  }
+}
+function handleSelectLink(item, index) {
+  // 调起选择链接弹窗
+  liliDialogRef.value.open("link");
+}
+function handleSelectGoods(item) {
+  // 调起选择商品
+  liliDialogRef.value.open("goods", "single");
+}
+// 选择链接回调
+function selectedLink(val) {
+  selected.value.url = formatLinkType(val);
+  selected.value.type =
+    val.___type === "other" && val.url === "" ? "link" : "other";
+}
+// 选择商品回调
+function selectedGoodsData(val) {
+  console.log(val);
+  let goods = val[0];
+  selected.value.img = goods.thumbnail;
+  selected.value.price = goods.price;
+  selected.value.name = goods.goodsName;
+  selected.value.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+}
+function handleSelectImg() {
+  // 选择图片
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+// 选择图片回调
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selected.value.img = val.url;
+}
+function handleCancelModal() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleConfirmModal() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal.value = false;
+}
+function handleCancelModal1() {
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
+function handleConfirmModal1() {
+  if (editTarget.value) {
+    Object.assign(editTarget.value, cloneItem(selected.value));
+  }
+  editTarget.value = null;
+  selected.value = {};
+  showModal1.value = false;
+}
 </script>
 <style lang="scss" scoped>
 @import "./setup-box.scss";
diff --git a/seller/src/views/shop/modelList/seckill-only-album.vue b/seller/src/views/shop/modelList/seckill-only-album.vue
index 3c8860d8e..799591d45 100644
--- a/seller/src/views/shop/modelList/seckill-only-album.vue
+++ b/seller/src/views/shop/modelList/seckill-only-album.vue
@@ -37,121 +37,119 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
 import Swiper from "swiper";
 import "swiper/swiper-bundle.css";
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      options: this.data.options, // 当前数据
-      actStatus: 0, // 0 未开始  1 进行中   2 已结束
-      actName: "限时秒杀",
-      currHour: "00", // 当前秒杀场
-      diffSeconds: 0, // 倒地时
-      hours: "00", // 小时
-      minutes: "00", // 分钟
-      seconds: "00", // 秒
-      interval: undefined, // 定时器
-      swiperInstance: null,
-    };
-  },
-  watch: {
-    diffSeconds(val) {
-      const hours = Math.floor(val / 3600);
-      // 当前秒数 / 60，向下取整
-      // 获取到所有分钟数 3600 / 60 = 60分钟
-      // 对60取模，超过小时数的分钟数
-      const minutes = Math.floor(val / 60) % 60;
-      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
-      const seconds = val % 60;
-      this.hours = hours < 10 ? "0" + hours : hours;
-      this.minutes = minutes < 10 ? "0" + minutes : minutes;
-      this.seconds = seconds < 10 ? "0" + seconds : seconds;
 
-      if (val === 0) {
-        clearInterval(this.interval);
-        this.hours = 0;
-        this.minutes = 0;
-        this.seconds = 0;
-        this.countDown(this.options.list);
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+const options = ref(props.data.options); // 当前数据
+const actStatus = ref(0); // 0 未开始  1 进行中   2 已结束
+const actName = ref("限时秒杀");
+const currHour = ref("00"); // 当前秒杀场
+const diffSeconds = ref(0); // 倒地时
+const hours = ref("00"); // 小时
+const minutes = ref("00"); // 分钟
+const seconds = ref("00"); // 秒
+const interval = ref(undefined); // 定时器
+const swiperInstance = ref(null);
+const swiperEl = ref(null);
+
+watch(diffSeconds, (val) => {
+  const h = Math.floor(val / 3600);
+  // 当前秒数 / 60，向下取整
+  // 获取到所有分钟数 3600 / 60 = 60分钟
+  // 对60取模，超过小时数的分钟数
+  const m = Math.floor(val / 60) % 60;
+  // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+  const s = val % 60;
+  hours.value = h < 10 ? "0" + h : h;
+  minutes.value = m < 10 ? "0" + m : m;
+  seconds.value = s < 10 ? "0" + s : s;
+
+  if (val === 0) {
+    clearInterval(interval.value);
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    countDown(options.value.list);
+  }
+});
+
+onMounted(() => {
+  countDown(options.value.list);
+  initSwiper();
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval.value);
+  if (swiperInstance.value) {
+    swiperInstance.value.destroy(true, true);
+    swiperInstance.value = null;
+  }
+});
+
+function initSwiper() {
+  if (!swiperEl.value) {
+    return;
+  }
+  swiperInstance.value = new Swiper(swiperEl.value, {
+    slidesPerView: 5,
+    autoplay: true,
+    loop: true,
+  });
+}
+// 倒计时
+function countDown(list) {
+  /**
+   * 默认倒计时两小时
+   * 如果没有开始，则显示未开始
+   * 进行中显示倒计时
+   * 今天的秒杀结束则显示已结束
+   */
+  let nowHour = new Date().getHours();
+  if (nowHour < Number(list[0].time)) {
+    // 活动未开始
+    currHour.value = list[0].time;
+    actStatus.value = 0;
+  } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+    // 活动已结束
+    actStatus.value = 2;
+    currHour.value = list[list.length - 1].time;
+  } else {
+    // 活动进行中
+    actStatus.value = 1;
+    for (let i = 0; i < list.length; i++) {
+      if (nowHour == Number(list[i].time)) {
+        currHour.value = list[i].time;
+      }
+      if (
+        nowHour > Number(list[i].time) &&
+        nowHour < Number(list[i].time + 2)
+      ) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-  mounted() {
-    this.countDown(this.options.list);
-    this.initSwiper();
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-    if (this.swiperInstance) {
-      this.swiperInstance.destroy(true, true);
-      this.swiperInstance = null;
     }
-  },
-  methods: {
-    initSwiper() {
-      if (!this.$refs.swiperEl) {
-        return;
-      }
-      this.swiperInstance = new Swiper(this.$refs.swiperEl, {
-        slidesPerView: 5,
-        autoplay: true,
-        loop: true,
-      });
-    },
-    // 倒计时
-    countDown(list) {
-      /**
-       * 默认倒计时两小时
-       * 如果没有开始，则显示未开始
-       * 进行中显示倒计时
-       * 今天的秒杀结束则显示已结束
-       */
-      let nowHour = new Date().getHours();
-      if (nowHour < Number(list[0].time)) {
-        // 活动未开始
-        this.currHour = list[0].time;
-        this.actStatus = 0;
-      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
-        // 活动已结束
-        this.actStatus = 2;
-        this.currHour = list[list.length - 1].time;
-      } else {
-        // 活动进行中
-        this.actStatus = 1;
-        for (let i = 0; i < list.length; i++) {
-          if (nowHour == Number(list[i].time)) {
-            this.currHour = list[i].time;
-          }
-          if (
-            nowHour > Number(list[i].time) &&
-            nowHour < Number(list[i].time + 2)
-          ) {
-            this.currHour = list[i].time;
-          }
-        }
-        // 当前0点时间戳
-        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-        // 活动倒计时
-        this.diffSeconds = Math.floor(
-          (zeroTime +
-            3600 * 1000 * (this.currHour + 2) -
-            new Date().getTime()) /
-          1000
-        );
-        this.interval = setInterval(() => {
-          this.diffSeconds--;
-        }, 1000);
-      }
-    },
-  },
-};
+    // 当前0点时间戳
+    let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+    // 活动倒计时
+    diffSeconds.value = Math.floor(
+      (zeroTime +
+        3600 * 1000 * (currHour.value + 2) -
+        new Date().getTime()) /
+      1000
+    );
+    interval.value = setInterval(() => {
+      diffSeconds.value--;
+    }, 1000);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .seckill {
diff --git a/seller/src/views/shop/modelList/seckill.vue b/seller/src/views/shop/modelList/seckill.vue
index 502b0e759..558c06ff2 100644
--- a/seller/src/views/shop/modelList/seckill.vue
+++ b/seller/src/views/shop/modelList/seckill.vue
@@ -39,87 +39,84 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: {
-    data: {
-      type: Object,
-      default: null,
-    },
-  },
-  data() {
-    return {
-      options: this.data.options,
-      actStatus: 0,
-      actName: "限时秒杀",
-      currHour: "00",
-      diffSeconds: 0,
-      hours: "00",
-      minutes: "00",
-      seconds: "00",
-      interval: undefined,
-    };
-  },
-  watch: {
-    diffSeconds(val) {
-      const hours = Math.floor(val / 3600);
-      const minutes = Math.floor(val / 60) % 60;
-      const seconds = val % 60;
-      this.hours = hours < 10 ? "0" + hours : hours;
-      this.minutes = minutes < 10 ? "0" + minutes : minutes;
-      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-      if (val === 0) {
-        clearInterval(this.interval);
-        this.hours = 0;
-        this.minutes = 0;
-        this.seconds = 0;
-        this.countDown(this.options.list);
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+const options = ref(props.data.options);
+const actStatus = ref(0);
+const actName = ref("限时秒杀");
+const currHour = ref("00");
+const diffSeconds = ref(0);
+const hours = ref("00");
+const minutes = ref("00");
+const seconds = ref("00");
+let interval = undefined;
+
+watch(diffSeconds, (val) => {
+  const h = Math.floor(val / 3600);
+  const m = Math.floor(val / 60) % 60;
+  const s = val % 60;
+  hours.value = h < 10 ? "0" + h : h;
+  minutes.value = m < 10 ? "0" + m : m;
+  seconds.value = s < 10 ? "0" + s : s;
+
+  if (val === 0) {
+    clearInterval(interval);
+    hours.value = 0;
+    minutes.value = 0;
+    seconds.value = 0;
+    countDown(options.value.list);
+  }
+});
+
+onMounted(() => {
+  countDown(options.value.list);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(interval);
+});
+
+function countDown(list) {
+  const nowHour = new Date().getHours();
+  if (nowHour < Number(list[0].time)) {
+    currHour.value = list[0].time;
+    actStatus.value = 0;
+  } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+    actStatus.value = 2;
+    currHour.value = list[list.length - 1].time;
+  } else {
+    actStatus.value = 1;
+    for (let i = 0; i < list.length; i++) {
+      if (nowHour == Number(list[i].time)) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-  mounted() {
-    this.countDown(this.options.list);
-  },
-  beforeUnmount() {
-    clearInterval(this.interval);
-  },
-  methods: {
-    countDown(list) {
-      const nowHour = new Date().getHours();
-      if (nowHour < Number(list[0].time)) {
-        this.currHour = list[0].time;
-        this.actStatus = 0;
-      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
-        this.actStatus = 2;
-        this.currHour = list[list.length - 1].time;
-      } else {
-        this.actStatus = 1;
-        for (let i = 0; i < list.length; i++) {
-          if (nowHour == Number(list[i].time)) {
-            this.currHour = list[i].time;
-          }
-          if (
-            nowHour > Number(list[i].time) &&
-            nowHour < Number(list[i].time + 2)
-          ) {
-            this.currHour = list[i].time;
-          }
-        }
-        const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
-        this.diffSeconds = Math.floor(
-          (zeroTime +
-            3600 * 1000 * (this.currHour + 2) -
-            new Date().getTime()) /
-            1000
-        );
-        this.interval = setInterval(() => {
-          this.diffSeconds--;
-        }, 1000);
+      if (
+        nowHour > Number(list[i].time) &&
+        nowHour < Number(list[i].time + 2)
+      ) {
+        currHour.value = list[i].time;
       }
-    },
-  },
-};
+    }
+    const zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+    diffSeconds.value = Math.floor(
+      (zeroTime +
+        3600 * 1000 * (currHour.value + 2) -
+        new Date().getTime()) /
+        1000
+    );
+    interval = setInterval(() => {
+      diffSeconds.value--;
+    }, 1000);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .seckill-wrap {
diff --git a/seller/src/views/shop/renovation.vue b/seller/src/views/shop/renovation.vue
index cc6dcc0c6..b344038ab 100644
--- a/seller/src/views/shop/renovation.vue
+++ b/seller/src/views/shop/renovation.vue
@@ -28,143 +28,136 @@
         </draggable>
       </div>
       <div class="show-content">
-        <model-form ref="modelForm" :data="modelForm"></model-form>
+        <model-form ref="modelFormRef" :data="modelForm"></model-form>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { useRoute } from "vue-router";
 import { Picture } from "@element-plus/icons-vue";
 import { modelData } from "./modelConfig";
 import Draggable from "vuedraggable";
 import ModelForm from "./modelForm.vue";
 import * as API_floor from "@/api/other.js";
-export default {
-  components: {
-    Draggable,
-    ModelForm,
-    Picture,
-  },
-  mounted() {
-    const cache = this.getStore('managerPCPageCache')
-    this.hasCache = !!cache;
-      if(cache){
-        this.$Modal.confirm({
-        title: '提示',
-        content: '获取到本地有缓存数据，是否使用缓存数据？',
-        okText: '使用',
-        cancelText: '取消',
-        onOk: () => {
-          this.applyPageData(cache);
-        }
-      });
+import { getStore, setStore } from "@/libs/storage";
+import { Message, Modal } from "@/utils/message";
+
+const route = useRoute();
+
+const hasCache = ref(false);
+const modelForm = ref({ list: [] });
+const submitLoading = ref(false);
+
+const modelFormRef = ref(null);
+
+onMounted(() => {
+  const cache = getStore('managerPCPageCache')
+  hasCache.value = !!cache;
+    if(cache){
+      Modal.confirm({
+      title: '提示',
+      content: '获取到本地有缓存数据，是否使用缓存数据？',
+      okText: '使用',
+      cancelText: '取消',
+      onOk: () => {
+        applyPageData(cache);
+      }
+    });
+  }
+  getTemplateItem(route.query.id);
+});
+
+function getModelKey(model) {
+  return model.type || model.name;
+}
+function cloneModel(model) {
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  const cloned = JSON.parse(JSON.stringify(model));
+  return {
+    ...cloned,
+    key,
+    model: cloned.type + "_" + key,
+  };
+}
+function clearCache(){
+  setStore('managerPCPageCache', '')
+  Message.success('清除成功')
+}
+function witeLocalStore(){
+  const data ={...modelForm.value}
+  data.list.unshift(modelFormRef.value.navList);
+  data.list.unshift(modelFormRef.value.topAdvert);
+  setStore('managerPCPageCache', data)
+  Message.success('写入成功')
+}
+function saveTemplate() {
+  submitTemplate(route.query.pageShow ? 'OPEN' : 'CLOSE')
+}
+function submitTemplate(pageShow) {
+  submitLoading.value = true
+  const modelFormData = JSON.parse(JSON.stringify(modelForm.value))
+  modelFormData.list.unshift(modelFormRef.value.navList);
+  modelFormData.list.unshift(modelFormRef.value.topAdvert);
+  const data = {
+    id: route.query.id,
+    pageData: JSON.stringify(modelFormData),
+    pageShow: route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
+    pageClientType: 'PC',
+  };
+  API_floor.updateHome(route.query.id, data).then((res) => {
+    submitLoading.value = false
+    if (res.success) {
+      Message.success("保存模板成功");
     }
-    this.getTemplateItem(this.$route.query.id);
-  },
-  data() {
-    return {
-      hasCache:false,
-      modelData,
-      modelForm: { list: [] },
-      submitLoading: false,
-    };
-  },
-  methods: {
-    getModelKey(model) {
-      return model.type || model.name;
-    },
-    cloneModel(model) {
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      const cloned = JSON.parse(JSON.stringify(model));
-      return {
-        ...cloned,
-        key,
-        model: cloned.type + "_" + key,
-      };
-    },
-    clearCache(){
-      this.setStore('managerPCPageCache', '')
-      this.$Message.success('清除成功')
-    },
-    witeLocalStore(){
-      const data ={...this.modelForm}
-      data.list.unshift(this.$refs.modelForm.navList);
-      data.list.unshift(this.$refs.modelForm.topAdvert);
-      this.setStore('managerPCPageCache', data)
-      this.$Message.success('写入成功')
-    },
-    saveTemplate() {
-      this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
-    },
-    submitTemplate(pageShow) {
-      this.submitLoading = true
-      const modelForm = JSON.parse(JSON.stringify(this.modelForm))
-      modelForm.list.unshift(this.$refs.modelForm.navList);
-      modelForm.list.unshift(this.$refs.modelForm.topAdvert);
-      const data = {
-        id: this.$route.query.id,
-        pageData: JSON.stringify(modelForm),
-        pageShow: this.$route.query.pageType === 'SPECIAL' ? 'CLOSE' : pageShow,
-        pageClientType: 'PC',
-      };
-      API_floor.updateHome(this.$route.query.id, data).then((res) => {
-        this.submitLoading = false
-        if (res.success) {
-          this.$Message.success("保存模板成功");
-        }
-      });
-    },
-    resetTemplate() {
-      this.getTemplateItem(this.$route.query.id);
-    },
-    applyPageData(raw) {
-      const empty = { list: [] };
-      if (raw == null || raw === "") {
-        this.modelForm = empty;
-        return;
-      }
-      let pageData = raw;
-      if (typeof raw === "string") {
-        try {
-          pageData = JSON.parse(raw);
-        } catch {
-          this.modelForm = empty;
-          return;
-        }
-      }
-      const list = Array.isArray(pageData)
-        ? pageData
-        : Array.isArray(pageData?.list)
-          ? pageData.list
-          : [];
-      const form = Array.isArray(pageData) ? { list } : { ...pageData, list };
-      if (list[0]?.type === "topAdvert") {
-        this.$refs.modelForm.topAdvert = list[0];
-        if (list[1]) {
-          this.$refs.modelForm.navList = list[1];
-        }
-        this.modelForm = { ...form, list: list.slice(2) };
-        return;
-      }
-      this.modelForm = { ...form, list };
-    },
-    getTemplateItem(id) {
-      API_floor.getHomeData(id).then((res) => {
-        if (res.success) {
-          this.applyPageData(res.result?.pageData);
-        }
-      });
-    },
-  },
-  watch: {
-    modelForm: {
-      deep: true,
-      handler: function (val) {
-        console.log(val);
-      },
-    },
-  },
-};
+  });
+}
+function resetTemplate() {
+  getTemplateItem(route.query.id);
+}
+function applyPageData(raw) {
+  const empty = { list: [] };
+  if (raw == null || raw === "") {
+    modelForm.value = empty;
+    return;
+  }
+  let pageData = raw;
+  if (typeof raw === "string") {
+    try {
+      pageData = JSON.parse(raw);
+    } catch {
+      modelForm.value = empty;
+      return;
+    }
+  }
+  const list = Array.isArray(pageData)
+    ? pageData
+    : Array.isArray(pageData?.list)
+      ? pageData.list
+      : [];
+  const form = Array.isArray(pageData) ? { list } : { ...pageData, list };
+  if (list[0]?.type === "topAdvert") {
+    modelFormRef.value.topAdvert = list[0];
+    if (list[1]) {
+      modelFormRef.value.navList = list[1];
+    }
+    modelForm.value = { ...form, list: list.slice(2) };
+    return;
+  }
+  modelForm.value = { ...form, list };
+}
+function getTemplateItem(id) {
+  API_floor.getHomeData(id).then((res) => {
+    if (res.success) {
+      applyPageData(res.result?.pageData);
+    }
+  });
+}
+
+watch(modelForm, function (val) {
+  console.log(val);
+}, { deep: true });
 </script>
 <style lang="scss" scoped>
 .renovation {
diff --git a/seller/src/views/shop/ship/logistics.vue b/seller/src/views/shop/ship/logistics.vue
index 86383fe5d..399327fa5 100644
--- a/seller/src/views/shop/ship/logistics.vue
+++ b/seller/src/views/shop/ship/logistics.vue
@@ -79,137 +79,136 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import * as API_Shop from "@/api/shops";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "logistics",
-  data() {
-    return {
-      row: {},
-      openModal: false,
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc",
-      },
-      openModalTitle: "开启信息",
-      ruleValidate: {},
-      faceSheetForm: {
-        faceSheetFlag: false,
-        customerName: "",
-        payType: "1",
-        expType: "1",
-        customerPwd: "",
-        monthCode: "",
-        sendSite: "",
-        sendStaff: "",
-      },
-      data: [],
-      openText: false,
-      logisticsId: "",
-    };
-  },
-  watch: {
-    "faceSheetForm.faceSheetFlag"(val) {
-      this.openText = !!val;
-    },
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      API_Shop.getLogistics().then((res) => {
-        this.loading = false;
+defineOptions({ name: "logistics" });
+
+const row = ref({});
+const openModal = ref(false);
+const loading = ref(true);
+const searchForm = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc",
+});
+const openModalTitle = ref("开启信息");
+const ruleValidate = ref({});
+const faceSheetForm = ref({
+  faceSheetFlag: false,
+  customerName: "",
+  payType: "1",
+  expType: "1",
+  customerPwd: "",
+  monthCode: "",
+  sendSite: "",
+  sendStaff: "",
+});
+const data = ref([]);
+const openText = ref(false);
+const logisticsId = ref("");
+
+watch(
+  () => faceSheetForm.value.faceSheetFlag,
+  (val) => {
+    openText.value = !!val;
+  }
+);
+
+function init() {
+  getDataList();
+}
+function getDataList() {
+  loading.value = true;
+  API_Shop.getLogistics().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result;
+    }
+  });
+}
+function open(v) {
+  row.value = v;
+  openModal.value = true;
+  openModalTitle.value = "开启信息";
+  openText.value = false;
+  faceSheetForm.value.faceSheetFlag = false;
+}
+function getFaceSheetInfo(v) {
+  row.value = v;
+  logisticsId.value = v.logisticsId;
+  openModalTitle.value = "修改信息";
+  API_Shop.getIsCheck(logisticsId.value).then((res) => {
+    if (res.success) {
+      faceSheetForm.value.faceSheetFlag = res.result.faceSheetFlag;
+      openText.value = !!faceSheetForm.value.faceSheetFlag;
+      faceSheetForm.value.customerName = res.result.customerName;
+      faceSheetForm.value.customerPwd = res.result.customerPwd;
+      faceSheetForm.value.monthCode = res.result.monthCode;
+      faceSheetForm.value.sendSite = res.result.sendSite;
+      faceSheetForm.value.sendStaff = res.result.sendStaff;
+      faceSheetForm.value.payType = res.result.payType;
+      faceSheetForm.value.expType = res.result.expType;
+    }
+  });
+  openModal.value = true;
+}
+function frontDownload(val) {
+  const a = document.createElement("a");
+  if (val === "use") {
+    a.href = "static/instructions.xlsx";
+    a.download = "使用说明.xlsx";
+  } else if (val === "type") {
+    a.href = "static/logisticsType.xlsx";
+    a.download = "快递类型.xlsx";
+  }
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+function submit() {
+  if (!row.value.selected) {
+    API_Shop.logisticsChecked(row.value.logisticsId, faceSheetForm.value).then((res) => {
+      openModal.value = false;
+      if (res.success) {
+        Message.success("物流公司开启成功");
+        init();
+      }
+    });
+  } else {
+    API_Shop.editChecked(logisticsId.value, faceSheetForm.value).then((res) => {
+      if (res.success) {
+        Message.success("修改成功");
+        openModal.value = false;
+        init();
+      }
+    });
+  }
+}
+function close(v) {
+  Modal.confirm({
+    title: "确认关闭",
+    content: "您确认关闭此物流公司?",
+    loading: true,
+    onOk: () => {
+      API_Shop.logisticsUnChecked(v.logisticsId).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.data = res.result;
+          Message.success("物流公司关闭成功");
+          init();
         }
       });
     },
-    open(v) {
-      this.row = v;
-      this.openModal = true;
-      this.openModalTitle = "开启信息";
-      this.openText = false;
-      this.faceSheetForm.faceSheetFlag = false;
-    },
-    getFaceSheetInfo(v) {
-      this.row = v;
-      this.logisticsId = v.logisticsId;
-      this.openModalTitle = "修改信息";
-      API_Shop.getIsCheck(this.logisticsId).then((res) => {
-        if (res.success) {
-          this.faceSheetForm.faceSheetFlag = res.result.faceSheetFlag;
-          this.openText = !!this.faceSheetForm.faceSheetFlag;
-          this.faceSheetForm.customerName = res.result.customerName;
-          this.faceSheetForm.customerPwd = res.result.customerPwd;
-          this.faceSheetForm.monthCode = res.result.monthCode;
-          this.faceSheetForm.sendSite = res.result.sendSite;
-          this.faceSheetForm.sendStaff = res.result.sendStaff;
-          this.faceSheetForm.payType = res.result.payType;
-          this.faceSheetForm.expType = res.result.expType;
-        }
-      });
-      this.openModal = true;
-    },
-    frontDownload(val) {
-      const a = document.createElement("a");
-      if (val === "use") {
-        a.href = "static/instructions.xlsx";
-        a.download = "使用说明.xlsx";
-      } else if (val === "type") {
-        a.href = "static/logisticsType.xlsx";
-        a.download = "快递类型.xlsx";
-      }
-      a.style.display = "none";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-    },
-    submit() {
-      if (!this.row.selected) {
-        API_Shop.logisticsChecked(this.row.logisticsId, this.faceSheetForm).then((res) => {
-          this.openModal = false;
-          if (res.success) {
-            this.$Message.success("物流公司开启成功");
-            this.init();
-          }
-        });
-      } else {
-        API_Shop.editChecked(this.logisticsId, this.faceSheetForm).then((res) => {
-          if (res.success) {
-            this.$Message.success("修改成功");
-            this.openModal = false;
-            this.init();
-          }
-        });
-      }
-    },
-    close(v) {
-      this.$Modal.confirm({
-        title: "确认关闭",
-        content: "您确认关闭此物流公司?",
-        loading: true,
-        onOk: () => {
-          API_Shop.logisticsUnChecked(v.logisticsId).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("物流公司关闭成功");
-              this.init();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/ship/shipTemplate.vue b/seller/src/views/shop/ship/shipTemplate.vue
index e386295c7..e063d7c45 100644
--- a/seller/src/views/shop/ship/shipTemplate.vue
+++ b/seller/src/views/shop/ship/shipTemplate.vue
@@ -62,7 +62,7 @@
           </table>
         </el-tab-pane>
         <el-tab-pane v-if="csTab" :label="title" :name="operation">
-          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
             <el-form-item label="模板名称" prop="name">
               <el-input v-model="form.name" maxlength="10" clearable style="width: 20%" />
             </el-form-item>
@@ -175,264 +175,86 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, onMounted } from "vue";
 import * as API_Shop from "@/api/shops";
 import multipleRegion from "@/views/lili-components/multiple-region";
+import { useAppStore } from "@/stores/app";
+import { Message, Modal } from "@/utils/message";
 
-export default {
+defineOptions({
   name: "shipTemplate",
-  components: {
-    multipleRegion,
-  },
-  data() {
-    return {
-      gotop: false,
-      index:'0',
-      selectedIndex: 0, //选中的地址模板下标
-      item: "", //运费模板子模板
-      shipInfo: [], // 运费模板数据
-      title: "添加运费模板", // 模态框标题
-      operation: "INFO", // 操作状态
-      currentTab: "INFO", // 当前模板tab
-      // submitLoading:false,
-      saveError: false, // 是否显示错误提示
-      csTab: false, // 添加运费模板显示
-      form: {
-        // 添加或编辑表单对象初始化数据
-        name: "",
-        pricingMethod: "WEIGHT",
-      },
-      formValidate: {
-        name: [
-          {
-            required: true,
-            message: "请输入模板名称",
-            trigger: "blur",
-          },
-        ],
-        pricingMethod: [
-          // 计费方式
-          {
-            required: true,
-            message: "请选择计费方式",
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-  computed: {
-    regions() {
-      return this.$store.state.regions;
-    },
-  },
-  methods: {
-    // 初始化数据
-    init() {
-      this.currentTab = "INFO";
-      this.csTab = false;
-      this.operation = "INFO";
-      this.getData();
-    },
-    //切换tabPane
-    handleClickType(tab) {
-      const tabName = tab.paneName ?? tab.props?.name;
-      if (tabName === "INFO") {
-        this.getData();
-        this.csTab = false;
-      }
-    },
-    //添加运费模板
-    add() {
-      this.$refs.region.clear();
-      this.title = "添加运费模板";
-      this.csTab = true;
-      this.operation = "ADD";
-      this.currentTab = "ADD";
-      this.saveError = false;
-      this.form = {
-        pricingMethod: "WEIGHT",
-        name: "",
-        freightTemplateChildList: [
-          {
-            area: "",
-            areaId: "",
-            firstCompany: 0,
-            firstPrice: 0,
-            continuedCompany: 0,
-            continuedPrice: 0,
-            selectedAll: false,
-          },
-        ],
-      };
-    },
-    handleScroll(){
-       let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
-      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
-    },
-    //修改运费模板
-    edit(item) {
-      this.title = "修改运费模板";
-      this.csTab = true;
-      this.operation = "EDIT";
-      this.currentTab = "EDIT";
-      this.saveError = false;
-      //给form赋值
-      this.form = item;
+});
 
-      let top = document.documentElement.scrollTop || document.body.scrollTop;
-      // 实现滚动效果
-      const timeTop = setInterval(() => {
-        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
-        if (top <= 0) {
-          clearInterval(timeTop);
-        }
-      }, 0);
-    },
-    //选择地区
-    editRegion(item, index) {
-      this.selectedIndex = index;
-      this.item = item;
+const appStore = useAppStore();
 
-      this.regions.forEach((addr) => {
-        this.form.freightTemplateChildList.forEach((child) => {
-          child.area.split(",").forEach((area) => {
-            if (addr.name == area) {
-              addr.selectedAll = true;
-              child.selectedAll = true;
-            }
-          });
-        });
-      });
-      this.$store.state.shipTemplate = this.form.freightTemplateChildList;
-
-      this.$refs.region.open(item, index);
+const gotop = ref(false);
+const index = ref("0");
+const selectedIndex = ref(0); //选中的地址模板下标
+const curItem = ref(""); //运费模板子模板
+const shipInfo = ref([]); // 运费模板数据
+const title = ref("添加运费模板"); // 模态框标题
+const operation = ref("INFO"); // 操作状态
+const currentTab = ref("INFO"); // 当前模板tab
+// submitLoading:false,
+const saveError = ref(false); // 是否显示错误提示
+const csTab = ref(false); // 添加运费模板显示
+const form = ref({
+  // 添加或编辑表单对象初始化数据
+  name: "",
+  pricingMethod: "WEIGHT",
+});
+const formValidate = {
+  name: [
+    {
+      required: true,
+      message: "请输入模板名称",
+      trigger: "blur",
     },
-    //刷细数据
-    refresh() {
-      this.csTab = false;
-      this.operation = "INFO";
-      this.currentTab = "INFO";
-      this.getData();
-      this.$Message.success("刷新成功");
+  ],
+  pricingMethod: [
+    // 计费方式
+    {
+      required: true,
+      message: "请选择计费方式",
+      trigger: "blur",
     },
-    //运费模板数据
-    getData() {
-      API_Shop.getShipTemplate().then((res) => {
-        this.shipInfo = Array.isArray(res.result) ? res.result : [];
-      });
-    },
-    /**
-     * 选择地址回调
-     */
-    handleSelect(v) {
-      let area = "";
-      let areaId = "";
-      if (v != "") {
-        v.forEach((child) => {
-          if (child.selectedList != "") {
-            // 只显示省份
+  ],
+};
 
-            if (child.selectedAll) {
-              area += child.name + ",";
-              this.form.freightTemplateChildList[
-                this.selectedIndex
-              ].selectedAll = true;
-            }
+const formRef = ref(null);
+const region = ref(null);
 
-            child.selectedList.forEach((son) => {
-              if (child.selectedAll) {
-                areaId += son.id + ",";
-                return;
-              } else {
-                // 显示城市
-                area += son.name + ",";
-                areaId += son.id + ",";
-              }
-            });
-          }
-        });
-      }
-      this.item.area = area;
-      this.item.areaId = areaId;
-    },
-    //添加或者修改运费模板
-    handleSubmit() {
-      const headers = {
-        "Content-Type": "application/json;charset=utf-8",
-      };
+const regions = computed(() => appStore.regions);
 
-      this.$refs.form.validate((valid) => {
-        // const regNumber = /^\+?[1-9][0-9]*$/;
-        // const regMoney =
-        //   /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
-        if (valid) {
-          if (this.form.pricingMethod != "FREE") {
-            //校验运费模板详细信息
-            for (
-              let i = 0;
-              i < this.form.freightTemplateChildList.length;
-              i++
-            ) {
-              if (
-                this.form.freightTemplateChildList[i].area == "" ||
-                this.form.freightTemplateChildList[i].firstCompany == "" ||
-                // this.form.freightTemplateChildList[i].firstPrice == "" ||
-                this.form.freightTemplateChildList[i].continuedCompany == ""
-                // this.form.freightTemplateChildList[i].continuedPrice == ""
-              ) {
-                this.saveError = true;
-                return;
-              }
-              //  if (
-              //   regNumber.test(
-              //     this.form.freightTemplateChildList[i].firstCompany
-              //   ) == false ||
-              //   regNumber.test(
-              //     this.form.freightTemplateChildList[i].continuedCompany
-              //   ) == false ||
-              //   regMoney.test(
-              //     this.form.freightTemplateChildList[i].firstPrice
-              //   ) == false ||
-              //   regMoney.test(
-              //     this.form.freightTemplateChildList[i].continuedPrice
-              //   ) == false
-              // ) {
-              //   this.saveError = true;
-              //   return;
-              // }
-            }
-          }
-
-          if (this.operation == "ADD") {
-            API_Shop.addShipTemplate(this.form, headers).then((res) => {
-              if (res.success) {
-                this.$Message.success("新增成功");
-                this.operation = "INFO";
-                this.currentTab = "INFO";
-                this.csTab = false;
-                this.getData();
-              }
-            });
-          } else {
-            API_Shop.editShipTemplate(this.form.id, this.form, headers).then(
-              (res) => {
-                if (res.success) {
-                  this.$Message.success("新增成功");
-                  this.operation = "INFO";
-                  this.currentTab = "INFO";
-                  this.csTab = false;
-                  this.getData();
-                }
-              }
-            );
-          }
-        }
-      });
-    },
-    //添加子模板
-    addShipTemplateChildren() {
-      const params = {
+// 初始化数据
+function init() {
+  currentTab.value = "INFO";
+  csTab.value = false;
+  operation.value = "INFO";
+  getData();
+}
+//切换tabPane
+function handleClickType(tab) {
+  const tabName = tab.paneName ?? tab.props?.name;
+  if (tabName === "INFO") {
+    getData();
+    csTab.value = false;
+  }
+}
+//添加运费模板
+function add() {
+  region.value.clear();
+  title.value = "添加运费模板";
+  csTab.value = true;
+  operation.value = "ADD";
+  currentTab.value = "ADD";
+  saveError.value = false;
+  form.value = {
+    pricingMethod: "WEIGHT",
+    name: "",
+    freightTemplateChildList: [
+      {
         area: "",
         areaId: "",
         firstCompany: 0,
@@ -440,41 +262,218 @@ export default {
         continuedCompany: 0,
         continuedPrice: 0,
         selectedAll: false,
-      };
-      this.form.freightTemplateChildList.push(params);
-    },
-    //删除一个子模板
-    removeTemplateChildren(index) {
-      if (Object.keys(this.form.freightTemplateChildList).length == 1) {
-        this.$Message.error("必须保留一个子模板");
-        return;
+      },
+    ],
+  };
+}
+function handleScroll() {
+  let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
+  scrolltop > 30 ? (gotop.value = true) : (gotop.value = false);
+}
+//修改运费模板
+function edit(item) {
+  title.value = "修改运费模板";
+  csTab.value = true;
+  operation.value = "EDIT";
+  currentTab.value = "EDIT";
+  saveError.value = false;
+  //给form赋值
+  form.value = item;
+
+  let top = document.documentElement.scrollTop || document.body.scrollTop;
+  // 实现滚动效果
+  const timeTop = setInterval(() => {
+    document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
+    if (top <= 0) {
+      clearInterval(timeTop);
+    }
+  }, 0);
+}
+//选择地区
+function editRegion(item, index) {
+  selectedIndex.value = index;
+  curItem.value = item;
+
+  regions.value.forEach((addr) => {
+    form.value.freightTemplateChildList.forEach((child) => {
+      child.area.split(",").forEach((area) => {
+        if (addr.name == area) {
+          addr.selectedAll = true;
+          child.selectedAll = true;
+        }
+      });
+    });
+  });
+  appStore.shipTemplates = form.value.freightTemplateChildList;
+
+  region.value.open(item, index);
+}
+//刷细数据
+function refresh() {
+  csTab.value = false;
+  operation.value = "INFO";
+  currentTab.value = "INFO";
+  getData();
+  Message.success("刷新成功");
+}
+//运费模板数据
+function getData() {
+  API_Shop.getShipTemplate().then((res) => {
+    shipInfo.value = Array.isArray(res.result) ? res.result : [];
+  });
+}
+/**
+ * 选择地址回调
+ */
+function handleSelect(v) {
+  let area = "";
+  let areaId = "";
+  if (v != "") {
+    v.forEach((child) => {
+      if (child.selectedList != "") {
+        // 只显示省份
+
+        if (child.selectedAll) {
+          area += child.name + ",";
+          form.value.freightTemplateChildList[
+            selectedIndex.value
+          ].selectedAll = true;
+        }
+
+        child.selectedList.forEach((son) => {
+          if (child.selectedAll) {
+            areaId += son.id + ",";
+            return;
+          } else {
+            // 显示城市
+            area += son.name + ",";
+            areaId += son.id + ",";
+          }
+        });
       }
-      this.form.freightTemplateChildList.splice(index, 1);
-    },
-    //删除运费模板
-    remove(id) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        // 记得确认修改此处
-        content: "您确认要删除此运费模板 ?",
-        loading: true,
-        onOk: () => {
-          API_Shop.deleteShipTemplate(id).then((res) => {
+    });
+  }
+  curItem.value.area = area;
+  curItem.value.areaId = areaId;
+}
+//添加或者修改运费模板
+function handleSubmit() {
+  const headers = {
+    "Content-Type": "application/json;charset=utf-8",
+  };
+
+  formRef.value.validate((valid) => {
+    // const regNumber = /^\+?[1-9][0-9]*$/;
+    // const regMoney =
+    //   /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
+    if (valid) {
+      if (form.value.pricingMethod != "FREE") {
+        //校验运费模板详细信息
+        for (
+          let i = 0;
+          i < form.value.freightTemplateChildList.length;
+          i++
+        ) {
+          if (
+            form.value.freightTemplateChildList[i].area == "" ||
+            form.value.freightTemplateChildList[i].firstCompany == "" ||
+            // form.value.freightTemplateChildList[i].firstPrice == "" ||
+            form.value.freightTemplateChildList[i].continuedCompany == ""
+            // form.value.freightTemplateChildList[i].continuedPrice == ""
+          ) {
+            saveError.value = true;
+            return;
+          }
+          //  if (
+          //   regNumber.test(
+          //     form.value.freightTemplateChildList[i].firstCompany
+          //   ) == false ||
+          //   regNumber.test(
+          //     form.value.freightTemplateChildList[i].continuedCompany
+          //   ) == false ||
+          //   regMoney.test(
+          //     form.value.freightTemplateChildList[i].firstPrice
+          //   ) == false ||
+          //   regMoney.test(
+          //     form.value.freightTemplateChildList[i].continuedPrice
+          //   ) == false
+          // ) {
+          //   saveError.value = true;
+          //   return;
+          // }
+        }
+      }
+
+      if (operation.value == "ADD") {
+        API_Shop.addShipTemplate(form.value, headers).then((res) => {
+          if (res.success) {
+            Message.success("新增成功");
+            operation.value = "INFO";
+            currentTab.value = "INFO";
+            csTab.value = false;
+            getData();
+          }
+        });
+      } else {
+        API_Shop.editShipTemplate(form.value.id, form.value, headers).then(
+          (res) => {
             if (res.success) {
-              this.$Message.success("删除成功");
+              Message.success("新增成功");
+              operation.value = "INFO";
+              currentTab.value = "INFO";
+              csTab.value = false;
+              getData();
             }
-            this.$Modal.remove();
-            this.getData();
-          });
-        },
+          }
+        );
+      }
+    }
+  });
+}
+//添加子模板
+function addShipTemplateChildren() {
+  const params = {
+    area: "",
+    areaId: "",
+    firstCompany: 0,
+    firstPrice: 0,
+    continuedCompany: 0,
+    continuedPrice: 0,
+    selectedAll: false,
+  };
+  form.value.freightTemplateChildList.push(params);
+}
+//删除一个子模板
+function removeTemplateChildren(index) {
+  if (Object.keys(form.value.freightTemplateChildList).length == 1) {
+    Message.error("必须保留一个子模板");
+    return;
+  }
+  form.value.freightTemplateChildList.splice(index, 1);
+}
+//删除运费模板
+function remove(id) {
+  Modal.confirm({
+    title: "确认删除",
+    // 记得确认修改此处
+    content: "您确认要删除此运费模板 ?",
+    loading: true,
+    onOk: () => {
+      API_Shop.deleteShipTemplate(id).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+        }
+        Modal.remove();
+        getData();
       });
     },
-  },
-  mounted() {
-    this.init();
-    window.addEventListener("scroll", this.handleScroll, true);
-  },
-};
+  });
+}
+
+onMounted(() => {
+  init();
+  window.addEventListener("scroll", handleScroll, true);
+});
 </script>
 <style lang="scss" scoped>
 .ncsc-default-table thead th {
diff --git a/seller/src/views/shop/shopAddress.vue b/seller/src/views/shop/shopAddress.vue
index 4b6566f93..77c142279 100644
--- a/seller/src/views/shop/shopAddress.vue
+++ b/seller/src/views/shop/shopAddress.vue
@@ -40,7 +40,7 @@
       width="500px"
       :close-on-click-modal="false"
     >
-      <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
         <el-form-item label="名称" prop="addressName">
           <el-input v-model="form.addressName" clearable style="width: 90%" />
         </el-form-item>
@@ -61,156 +61,154 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, reactive, ref } from "vue";
 import * as API_Shop from "@/api/shops";
 import { validateMobile } from "@/libs/validate";
+import { Message, Modal } from "@/utils/message";
 import multipleMap from "@/views/my-components/map/multiple-map";
 
-export default {
-  name: "shopAddress",
-  components: { multipleMap },
-  data() {
-    return {
-      loading: true,
-      modalType: 0,
-      modalVisible: false,
-      modalTitle: "",
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 10,
-      },
-      form: {
-        addressName: "",
-        center: "",
-        address: "",
-        mobile: "",
-      },
-      formValidate: {
-        addressName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
-        longitude: [{ required: true, message: "请输入地址经度", trigger: "blur" }],
-        latitude: [{ required: true, message: "请输入地址纬度", trigger: "blur" }],
-        mobile: [
-          { required: true, message: "请输入联系电话号", trigger: "blur" },
-          { validator: validateMobile, trigger: "blur" },
-        ],
-        address: [{ required: true, message: " ", trigger: "blur" }],
-      },
-      submitLoading: false,
-      data: [],
-      total: 0,
-    };
-  },
-  methods: {
-    init() {
-      this.getDataList();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-    },
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    getAddress(val) {
-      if (val.type === "select") {
-        const paths = val.data.map((item) => item.name).join(",");
-        this.form.address = paths;
-        this.form.center = val.data[val.data.length - 1].center;
-      } else {
-        this.form.address = val.data.addr;
-        this.form.address = val.data.address;
-        this.form.center = val.data.position.lng + "," + val.data.position.lat;
-      }
-    },
-    getDataList() {
-      this.loading = true;
-      API_Shop.getShopAddress(this.searchForm).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    resetForm() {
-      this.form = {
-        addressName: "",
-        center: "",
-        address: "",
-        mobile: "",
-      };
-    },
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加自提地址";
-      this.resetForm();
-      this.modalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.form?.resetFields();
-      });
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalVisible = true;
-      this.modalTitle = "修改自提地址";
-      this.form.id = v.id;
-      this.form.address = v.address;
-      this.form.addressName = v.addressName;
-      this.form.mobile = v.mobile;
-      this.form.center = v.center;
-      this.form.longitude = v.center.split(",")[0];
-      this.form.latitude = v.center.split(",")[1];
-    },
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          if (this.modalType == 0) {
-            const params = { ...this.form };
-            delete params.id;
-            API_Shop.addShopAddress(params).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("添加成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          } else {
-            API_Shop.editShopAddress(this.form.id, this.form).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("修改成功");
-                this.getDataList();
-                this.modalVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    deleteSubmit(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "确认删除自提地址么？",
-        loading: true,
-        onOk: () => {
-          API_Shop.deleteShopAddress(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("此自自提地址已删除");
-              this.init();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
+defineOptions({ name: "shopAddress" });
+
+const formRef = ref(null);
+
+const loading = ref(true);
+const modalType = ref(0);
+const modalVisible = ref(false);
+const modalTitle = ref("");
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 10,
+});
+const form = ref({
+  addressName: "",
+  center: "",
+  address: "",
+  mobile: "",
+});
+const formValidate = {
+  addressName: [{ required: true, message: "请输入地址名称", trigger: "blur" }],
+  longitude: [{ required: true, message: "请输入地址经度", trigger: "blur" }],
+  latitude: [{ required: true, message: "请输入地址纬度", trigger: "blur" }],
+  mobile: [
+    { required: true, message: "请输入联系电话号", trigger: "blur" },
+    { validator: validateMobile, trigger: "blur" },
+  ],
+  address: [{ required: true, message: " ", trigger: "blur" }],
 };
+const submitLoading = ref(false);
+const data = ref([]);
+const total = ref(0);
+
+function init() {
+  getDataList();
+}
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+}
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  getDataList();
+}
+function getAddress(val) {
+  if (val.type === "select") {
+    const paths = val.data.map((item) => item.name).join(",");
+    form.value.address = paths;
+    form.value.center = val.data[val.data.length - 1].center;
+  } else {
+    form.value.address = val.data.addr;
+    form.value.address = val.data.address;
+    form.value.center = val.data.position.lng + "," + val.data.position.lat;
+  }
+}
+function getDataList() {
+  loading.value = true;
+  API_Shop.getShopAddress(searchForm).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function resetForm() {
+  form.value = {
+    addressName: "",
+    center: "",
+    address: "",
+    mobile: "",
+  };
+}
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加自提地址";
+  resetForm();
+  modalVisible.value = true;
+  nextTick(() => {
+    formRef.value?.resetFields();
+  });
+}
+function edit(v) {
+  modalType.value = 1;
+  modalVisible.value = true;
+  modalTitle.value = "修改自提地址";
+  form.value.id = v.id;
+  form.value.address = v.address;
+  form.value.addressName = v.addressName;
+  form.value.mobile = v.mobile;
+  form.value.center = v.center;
+  form.value.longitude = v.center.split(",")[0];
+  form.value.latitude = v.center.split(",")[1];
+}
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      if (modalType.value == 0) {
+        const params = { ...form.value };
+        delete params.id;
+        API_Shop.addShopAddress(params).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("添加成功");
+            getDataList();
+            modalVisible.value = false;
+          }
+        });
+      } else {
+        API_Shop.editShopAddress(form.value.id, form.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("修改成功");
+            getDataList();
+            modalVisible.value = false;
+          }
+        });
+      }
+    }
+  });
+}
+function deleteSubmit(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "确认删除自提地址么？",
+    loading: true,
+    onOk: () => {
+      API_Shop.deleteShopAddress(v.id).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("此自自提地址已删除");
+          init();
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style scoped>
 .link-text {
diff --git a/seller/src/views/shop/shopSetting.vue b/seller/src/views/shop/shopSetting.vue
index 8b39a4e9c..726e09903 100644
--- a/seller/src/views/shop/shopSetting.vue
+++ b/seller/src/views/shop/shopSetting.vue
@@ -3,7 +3,7 @@
     <el-card style="margin-left: 10px">
       <el-tabs v-model="type" @click="handleClickType">
         <el-tab-pane label="基本信息" name="INFO">
-          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
             <el-form-item label="店铺名称">
               <el-input v-model="storeName" disabled clearable style="width: 20%" />
             </el-form-item>
@@ -35,7 +35,7 @@
           </el-form>
         </el-tab-pane>
         <el-tab-pane label="发货地址">
-          <el-form ref="addressGoods" :model="addressGoods" label-width="120px" :rules="addressGoodsValidate" class="shop-setting-form">
+          <el-form ref="addressGoodsRef" :model="addressGoods" label-width="120px" :rules="addressGoodsValidate" class="shop-setting-form">
             <el-form-item label="发货人姓名" prop="salesConsignorName">
               <el-input v-model="addressGoods.salesConsignorName" maxlength="11" clearable style="width: 20%">
               </el-input>
@@ -65,7 +65,7 @@
           </el-form>
         </el-tab-pane>
         <el-tab-pane label="退货地址" name="REFUND_GOODS_ADDRESS">
-          <el-form ref="addressForm" :model="addressForm" label-width="100px" :rules="afterFormValidate">
+          <el-form ref="addressFormRef" :model="addressForm" label-width="100px" :rules="afterFormValidate">
             <el-form-item label="收货人" prop="salesConsigneeName">
               <el-input v-model="addressForm.salesConsigneeName" maxlength="11" clearable style="width: 20%" />
             </el-form-item>
@@ -116,325 +116,327 @@
       </el-tabs>
     </el-card>
 
-    <multipleMap ref="map" @callback="callbackAddress" />
+    <multipleMap ref="mapRef" @callback="callbackAddress" />
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Shop from "@/api/shops";
 import { validateMobile } from "@/libs/validate";
 import uploadPicThumb from "@/views/my-components/lili/upload-pic-thumb";
-
 import multipleMap from "@/views/my-components/map/multiple-map";
 import * as RegExp from "@/libs/RegExp.js";
 import Cookies from "js-cookie";
-export default {
-  name: "shopSetting",
-  components: {
-    uploadPicThumb,
+import { Message } from "@/utils/message";
 
-    multipleMap
-  },
-  data() {
-    return {
-      currentKey: "", //存储当前点击地址的key
-      showMap: false, // 是否展示地图
-      type: "INFO",
+defineOptions({ name: "shopSetting" });
 
-      storeName: "", //店铺名称
+const currentKey = ref(""); //存储当前点击地址的key
+const showMap = ref(false); // 是否展示地图
+const type = ref("INFO");
 
-      regionId: [], // 地区id
-      addressForm: {
-        // 退货地址
-        salesConsigneeName: "", // 收货人姓名
-        salesConsigneeMobile: "", // 收货人电话
-        salesConsigneeAddressId: "", // 售后地址id,逗号分割
-        salesConsigneeAddressPath: "", // 售后地址，逗号分割
-        salesConsigneeDetail: "", // 详细地址
-      },
-      //im form
-      udeskForm: {
-        merchantEuid: "",
-      },
-      udeskFormValidate: {
-        merchantEuid: [
-          { required: true, message: "请输入店铺坐席ID", trigger: "blur" },
-        ],
-      },
-      afterFormValidate: {
-        salesConsigneeMobile: [
-          { required: true, message: "手机号不能为空", trigger: "blur" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-        salesConsigneeName: [
-          { required: true, message: "请输入收货人", trigger: "blur" },
-        ],
-        salesConsigneeDetail: [
-          { required: true, message: "请输入详细地址", trigger: "blur" },
-        ],
-      },
-      form: {
-        // 添加或编辑表单对象初始化数据
-        storeAddressPath: "", // 店铺地址中文
-        storeCenter: "", // 经度 + 纬度
-        longitude: "", //经度
-        latitude: "", //纬度
-        storeAddressDetail: "", //详细地址
-        storeAddressIdPath: "", //地址
-        storeDesc: "", // 店铺描述
-        pageShow: false,
-        selfPickFlag: false,
-      },
+const storeName = ref(""); //店铺名称
 
-      // 表单验证规则
-      formValidate: {
-        addressName: [
-          {
-            required: true,
-            message: "请输入地址名称",
-            trigger: "blur",
-          },
-        ],
-        longitude: [
-          {
-            required: true,
-            message: "请输入地址经度",
-            trigger: "blur",
-          },
-        ],
-        latitude: [
-          {
-            required: true,
-            message: "请输入地址纬度",
-            trigger: "blur",
-          },
-        ],
-        mobile: [
-          {
-            required: true,
-            message: "请输入地址纬度",
-            trigger: "blur",
-          },
-          {
-            validator: validateMobile,
-            trigger: "blur",
-          },
-        ],
-        storeAddressDetail: [
-          {
-            required: true,
-            message: "请输入详细地址",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      //发货地址
-      addressGoods: {
-        salesConsignorName: " ",
-        salesConsignorMobile: " ",
-        salesConsignorAddressId: " ",
-        salesConsignorAddressPath: " ",
-        salesConsignorDetail: " ",
-      },
-
-      addressGoodsValidate: {
-        salesConsignorName: [
-          { required: true, message: "请输入发货人姓名", trigger: "blur" },
-        ],
-        salesConsignorMobile: [
-          { required: true, message: "手机号不能为空", trigger: "blur" },
-          {
-            pattern: RegExp.mobile,
-            trigger: "blur",
-            message: "请输入正确的手机号",
-          },
-        ],
-        salesConsignorDetail: [
-          { required: true, message: "请输入详细地址", trigger: "blur" },
-        ],
-      },
-    };
-  },
-  methods: {
-    // 回调地址
-    callbackAddress(val) {
-      if (val.type === 'select') {
-        const paths = val.data.map(item => item.name).join(',')
-
-        const ids = val.data.map(item => item.id).join(',')
-
-        if (this.currentKey === 'storeAddress') {
-          this.form.storeAddressPath = paths
-          this.form.storeAddressIdPath = ids
-          this.form.storeCenter = val.data[val.data.length - 1].center
-        }
-        if (this.currentKey === 'addressGoods') {
-          this.addressGoods.salesConsignorAddressPath = paths
-          this.addressGoods.salesConsignorAddressId = ids
-        }
-        if (this.currentKey === 'salesConsigneeAddressPath') {
-          this.addressForm.salesConsigneeAddressPath = paths
-          this.addressForm.salesConsigneeAddressId = ids
-        }
-
-      }
-      else {
-        if (this.currentKey === 'storeAddressstoreAddress') {
-          this.form.storeAddressPath = val.data.addr;
-          this.form.storeAddressIdPath = val.data.addrId;
-          this.form.storeCenter = val.data.position.lng + "," + val.data.position.lat;
-        }
-        if (this.currentKey === 'addressGoods') {
-          this.addressGoods.salesConsignorAddressPath = val.data.addr;
-          this.addressGoods.salesConsignorAddressId = val.data.addrId;
-        }
-        if (this.currentKey === 'salesConsigneeAddressPath') {
-          this.addressForm.salesConsigneeAddressPath = val.data.addr;
-          this.addressForm.salesConsigneeAddressId = val.data.addrId;
-        }
-      }
+const regionId = ref([]); // 地区id
+// 历史遗留：loading、regionGoods、regionIdS 未在原 data 中声明，仅在方法内赋值，保持原行为
+let loading = false;
+let regionGoods = null;
+let regionIdS = null;
+const addressForm = ref({
+  // 退货地址
+  salesConsigneeName: "", // 收货人姓名
+  salesConsigneeMobile: "", // 收货人电话
+  salesConsigneeAddressId: "", // 售后地址id,逗号分割
+  salesConsigneeAddressPath: "", // 售后地址，逗号分割
+  salesConsigneeDetail: "", // 详细地址
+});
+//im form
+const udeskForm = ref({
+  merchantEuid: "",
+});
+const udeskFormValidate = {
+  merchantEuid: [
+    { required: true, message: "请输入店铺坐席ID", trigger: "blur" },
+  ],
+};
+const afterFormValidate = {
+  salesConsigneeMobile: [
+    { required: true, message: "手机号不能为空", trigger: "blur" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
     },
-    // 修改地址
-    handleChangeAddress(key) {
-      this.currentKey = key
-      this.$refs.map.open();
+  ],
+  salesConsigneeName: [
+    { required: true, message: "请输入收货人", trigger: "blur" },
+  ],
+  salesConsigneeDetail: [
+    { required: true, message: "请输入详细地址", trigger: "blur" },
+  ],
+};
+const form = ref({
+  // 添加或编辑表单对象初始化数据
+  storeAddressPath: "", // 店铺地址中文
+  storeCenter: "", // 经度 + 纬度
+  longitude: "", //经度
+  latitude: "", //纬度
+  storeAddressDetail: "", //详细地址
+  storeAddressIdPath: "", //地址
+  storeDesc: "", // 店铺描述
+  pageShow: false,
+  selfPickFlag: false,
+});
+
+// 表单验证规则
+const formValidate = {
+  addressName: [
+    {
+      required: true,
+      message: "请输入地址名称",
+      trigger: "blur",
     },
-    // 初始化数据
-    init() {
-      this.getShopInfo();
-      this.getDeliverAddress()
+  ],
+  longitude: [
+    {
+      required: true,
+      message: "请输入地址经度",
+      trigger: "blur",
     },
+  ],
+  latitude: [
+    {
+      required: true,
+      message: "请输入地址纬度",
+      trigger: "blur",
+    },
+  ],
+  mobile: [
+    {
+      required: true,
+      message: "请输入地址纬度",
+      trigger: "blur",
+    },
+    {
+      validator: validateMobile,
+      trigger: "blur",
+    },
+  ],
+  storeAddressDetail: [
+    {
+      required: true,
+      message: "请输入详细地址",
+      trigger: "blur",
+    },
+  ],
+};
+const submitLoading = ref(false); // 添加或编辑提交状态
+//发货地址
+const addressGoods = ref({
+  salesConsignorName: " ",
+  salesConsignorMobile: " ",
+  salesConsignorAddressId: " ",
+  salesConsignorAddressPath: " ",
+  salesConsignorDetail: " ",
+});
+
+const addressGoodsValidate = {
+  salesConsignorName: [
+    { required: true, message: "请输入发货人姓名", trigger: "blur" },
+  ],
+  salesConsignorMobile: [
+    { required: true, message: "手机号不能为空", trigger: "blur" },
+    {
+      pattern: RegExp.mobile,
+      trigger: "blur",
+      message: "请输入正确的手机号",
+    },
+  ],
+  salesConsignorDetail: [
+    { required: true, message: "请输入详细地址", trigger: "blur" },
+  ],
+};
+
+const formRef = ref(null);
+const addressGoodsRef = ref(null);
+const addressFormRef = ref(null);
+const udeskFormRef = ref(null);
+const mapRef = ref(null);
+
+// 回调地址
+function callbackAddress(val) {
+  if (val.type === 'select') {
+    const paths = val.data.map(item => item.name).join(',')
+
+    const ids = val.data.map(item => item.id).join(',')
+
+    if (currentKey.value === 'storeAddress') {
+      form.value.storeAddressPath = paths
+      form.value.storeAddressIdPath = ids
+      form.value.storeCenter = val.data[val.data.length - 1].center
+    }
+    if (currentKey.value === 'addressGoods') {
+      addressGoods.value.salesConsignorAddressPath = paths
+      addressGoods.value.salesConsignorAddressId = ids
+    }
+    if (currentKey.value === 'salesConsigneeAddressPath') {
+      addressForm.value.salesConsigneeAddressPath = paths
+      addressForm.value.salesConsigneeAddressId = ids
+    }
+
+  }
+  else {
+    if (currentKey.value === 'storeAddressstoreAddress') {
+      form.value.storeAddressPath = val.data.addr;
+      form.value.storeAddressIdPath = val.data.addrId;
+      form.value.storeCenter = val.data.position.lng + "," + val.data.position.lat;
+    }
+    if (currentKey.value === 'addressGoods') {
+      addressGoods.value.salesConsignorAddressPath = val.data.addr;
+      addressGoods.value.salesConsignorAddressId = val.data.addrId;
+    }
+    if (currentKey.value === 'salesConsigneeAddressPath') {
+      addressForm.value.salesConsigneeAddressPath = val.data.addr;
+      addressForm.value.salesConsigneeAddressId = val.data.addrId;
+    }
+  }
+}
+// 修改地址
+function handleChangeAddress(key) {
+  currentKey.value = key
+  mapRef.value.open();
+}
+// 初始化数据
+function init() {
+  getShopInfo();
+  getDeliverAddress()
+}
 
 
-    setAddressGoods() {
-      console.log(this.$refs.addressGoods)
+function setAddressGoods() {
+  console.log(addressGoodsRef.value)
 
-      this.$refs.addressGoods.validate((valid) => {
-        if (valid) {
-          API_Shop.editDeliverAddress(this.addressGoods).then(res => {
-            if (res.success) {
-              this.$Message.success("修改成功")
-            }
-          })
-        }
-      });
-    },
-    //获取店铺信息
-    getShopInfo() {
-      this.loading = true;
-      API_Shop.getShopInfo().then((res) => {
-        this.loading = false;
+  addressGoodsRef.value.validate((valid) => {
+    if (valid) {
+      API_Shop.editDeliverAddress(addressGoods.value).then(res => {
         if (res.success) {
-          this.form = res.result;
-
-          this.storeName = res.result.storeName;
-          this.form.storeCenter = res.result.storeCenter;
-          Cookies.set("userInfoSeller", JSON.stringify(res.result));
-          if (res.result.merchantEuid) {
-            //赋予坐席id
-            this.udeskForm.merchantEuid = res.result.merchantEuid;
-          }
-        }
-      });
-    },
-    pageShow(type) {
-      this.form.pageShow = type
-    },
-    changeSelfPickFlag(item) {
-      if (item) {
-        this.form.selfPickFlag = item
-      }
-    },
-    getDeliverAddress() {
-      API_Shop.getDeliverAddress().then(res => {
-        if (res.success) {
-          if (res.result != '' && res.result != null) {
-            this.addressGoods = res.result;
-            this.regionGoods = res.result.salesConsignorAddressPath;
-            this.regionIdS = res.result.salesConsignorAddressId;
-          }
+          Message.success("修改成功")
         }
       })
-    },
+    }
+  });
+}
+//获取店铺信息
+function getShopInfo() {
+  loading = true;
+  API_Shop.getShopInfo().then((res) => {
+    loading = false;
+    if (res.success) {
+      form.value = res.result;
 
-    //重置
-    handleReset() {
-      this.$refs.form.resetFields();
-    },
-    //提交保存
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          API_Shop.saveShopInfo(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-              this.getShopInfo();
-            }
-          });
-        }
-      });
-    },
-    merchantSubmit() {
-      this.$refs.udeskForm.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          API_Shop.updatEmerchantId(this.udeskForm).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-              this.getShopInfo();
-            }
-          });
-        }
-      });
-    },
+      storeName.value = res.result.storeName;
+      form.value.storeCenter = res.result.storeCenter;
+      Cookies.set("userInfoSeller", JSON.stringify(res.result));
+      if (res.result.merchantEuid) {
+        //赋予坐席id
+        udeskForm.value.merchantEuid = res.result.merchantEuid;
+      }
+    }
+  });
+}
+function pageShow(type) {
+  form.value.pageShow = type
+}
+function changeSelfPickFlag(item) {
+  if (item) {
+    form.value.selfPickFlag = item
+  }
+}
+function getDeliverAddress() {
+  API_Shop.getDeliverAddress().then(res => {
+    if (res.success) {
+      if (res.result != '' && res.result != null) {
+        addressGoods.value = res.result;
+        regionGoods = res.result.salesConsignorAddressPath;
+        regionIdS = res.result.salesConsignorAddressId;
+      }
+    }
+  })
+}
 
-    //tab切换
-    handleClickType(v) {
-      //退款
-      if (v == "INFO") {
-        this.getShopInfo();
-      }
-      //退货
-      if (v == "REFUND_GOODS_ADDRESS") {
-        this.getRefundGoodsAddress();
-      }
-    },
-    //获取商家退货地址
-    getRefundGoodsAddress() {
-      API_Shop.getRefundGoodsAddress().then((res) => {
-        if (res.result != null) {
-          this.addressForm = res.result;
+//重置
+function handleReset() {
+  formRef.value.resetFields();
+}
+//提交保存
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      API_Shop.saveShopInfo(form.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+          getShopInfo();
         }
       });
-    },
-    //提交保存
-    afterHandleSubmit() {
-      this.$refs.addressForm.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          API_Shop.saveRefundGoodsAddress(this.addressForm).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("修改成功");
-              this.getRefundGoodsAddress();
-            }
-          });
+    }
+  });
+}
+function merchantSubmit() {
+  udeskFormRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      API_Shop.updatEmerchantId(udeskForm.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+          getShopInfo();
         }
       });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+    }
+  });
+}
+
+//tab切换
+function handleClickType(v) {
+  //退款
+  if (v == "INFO") {
+    getShopInfo();
+  }
+  //退货
+  if (v == "REFUND_GOODS_ADDRESS") {
+    getRefundGoodsAddress();
+  }
+}
+//获取商家退货地址
+function getRefundGoodsAddress() {
+  API_Shop.getRefundGoodsAddress().then((res) => {
+    if (res.result != null) {
+      addressForm.value = res.result;
+    }
+  });
+}
+//提交保存
+function afterHandleSubmit() {
+  addressFormRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      API_Shop.saveRefundGoodsAddress(addressForm.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("修改成功");
+          getRefundGoodsAddress();
+        }
+      });
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+});
 </script>
 <style scoped lang="scss">
 .desc {
diff --git a/seller/src/views/shop/system/clerk/clerkManage.vue b/seller/src/views/shop/system/clerk/clerkManage.vue
index 8f96668bd..b042f2d71 100644
--- a/seller/src/views/shop/system/clerk/clerkManage.vue
+++ b/seller/src/views/shop/system/clerk/clerkManage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form ref="searchForm" :model="searchForm" inline label-width="70px" class="search-form">
+      <el-form ref="searchFormRef" :model="searchForm" inline label-width="70px" class="search-form">
         <el-form-item label="店员名称">
           <el-input
             type="text"
@@ -37,7 +37,7 @@
       </div>
       <br>
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -178,9 +178,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, nextTick, onMounted, reactive, ref } from "vue";
 import {
-  checkClerk,
+  checkClerk as fetchCheckClerk,
   getUserListData,
   getAllRoleList,
   addUser,
@@ -190,442 +191,441 @@ import {
   resetPassword,
   getClerk
 } from "@/api/index";
-import {validateMobile} from "@/libs/validate";
+import { validateMobile } from "@/libs/validate";
 import { Search } from "@element-plus/icons-vue";
+import { Message, Modal } from "@/utils/message";
+import { md5 } from "@/utils/md5.js";
 import departmentChoose from "@/views/my-components/lili/department-choose";
 import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
 
-export default {
-  name: "clerk-manage",
-  components: {
-    Search,
-    departmentChoose,
-    departmentTreeChoose,
-  },
-  data() {
-    return {
-      open:0,
-      loading: true, // 加载状态
-      selectCount: 0, // 已选数量
-      selectList: [], // 已选数据列表
-      searchForm: { // 请求参数
-        clerkName: "",
-        departmentId: "",
-        pageNumber: 1,
-        pageSize: 10,
-        sort: "createTime",
-        order: "desc"
-      },
-      modalType: 0, // 新增编辑标识
-      userModalVisible: false, // 用户modal显隐
-      userEditModalVisible:false,
-      modalTitle: "", // modal标题
-      form: { // 表单
-        username: "",
-        mobile: 0,
-        sex: "",
-        isSuper: 0,
-        roles: [],
-        departmentId: "",
-        departmentTitle: ""
-      },
+defineOptions({ name: "clerk-manage" });
 
-      editForm: { // 表单
-        isSuper: 0,
-        roles: [],
-        departmentId: "",
-        departmentTitle: ""
-      },
-      mobile: "",
-      clerkName: "",
+const searchFormRef = ref(null);
+const tableRef = ref(null);
+const dep = ref(null);
+const editFormRef = ref(null);
+const editDepTree = ref(null);
+const addForm = ref(null);
+const addDepTree = ref(null);
 
-      newMember: false,
-      oldMember: false,
-      memberCheck: false,
-      roleList: [], // 角色列表
-      errorPass: "", // 错误提示
-      formValidate: { // 验证规则
-        username: [
-          {required: true, message: "用户名不能为空", trigger: "blur"}
-        ],
-        password: [
-          {required: true, message: "密码不能为空", trigger: "blur"}
-        ],
-        mobile: [
-          {required: true, message: "手机号不能为空", trigger: "blur"},
-          {validator: validateMobile, trigger: "blur"}
-        ]
-      },
-      submitLoading: false, // 提交状态
-      data: [], // 用户数据
-      total: 0, // 总数
-    };
-  },
-  computed: {
-    addFormRules() {
-      const rules = {
-        username: this.formValidate.username,
-        mobile: this.formValidate.mobile,
-      };
-      if (this.newMember) {
-        rules.password = this.formValidate.password;
-      }
-      return rules;
-    },
-  },
-  methods: {
-    // 初始化数据
-    init() {
-      this.getUserList();
-    },
-    checkClerks() {
-      this.open = this.form.mobile.length;
+const open = ref(0);
+const loading = ref(true); // 加载状态
+const selectCount = ref(0); // 已选数量
+const selectList = ref([]); // 已选数据列表
+const searchForm = reactive({ // 请求参数
+  clerkName: "",
+  departmentId: "",
+  pageNumber: 1,
+  pageSize: 10,
+  sort: "createTime",
+  order: "desc"
+});
+const modalType = ref(0); // 新增编辑标识
+const userModalVisible = ref(false); // 用户modal显隐
+const userEditModalVisible = ref(false);
+const modalTitle = ref(""); // modal标题
+const form = ref({ // 表单
+  username: "",
+  mobile: 0,
+  sex: "",
+  isSuper: 0,
+  roles: [],
+  departmentId: "",
+  departmentTitle: ""
+});
 
-      if(this.open == 11 ){
-        this.checkClerk();
-      }
-      if(this.open < 11){
-        this.checkAgainClerk()
-      }
-    },
-    // 选择部门回调
-    handleSelectDepTree(v) {
-      if (v) {
-        this.form.departmentId = v.departmentId;
-        this.form.departmentTitle = v.departmentTitle;
-      } else {
-        this.form.departmentId = "";
-        this.form.departmentTitle = "";
-      }
-    },
-    // 选择部门回调
-    handleEditSelectDepTree(v) {
-      if (v) {
-        this.editForm.departmentId = v.departmentId;
-        this.editForm.departmentTitle = v.departmentTitle;
-      } else {
-        this.editForm.departmentId = "";
-        this.editForm.departmentTitle = "";
-      }
-    },
-    //重新校验会员
-    checkAgainClerk() {
-      this.memberCheck = false;
-      this.newMember = false;
-      this.oldMember = false;
-      this.form.username = "";
-      this.form.password = "";
-      this.form.isSuper = 0;
-      this.form.roles = [];
-      this.errorPass = "";
-    },
-    // 检测当前手机号对应会员：无 id 为新建会员，有 id 为已有会员
-    checkClerk() {
-      if (!this.form.mobile) {
-        return;
-      }
-      this.newMember = false;
-      this.oldMember = false;
-      this.form.username = "";
-      this.form.password = "";
-      this.errorPass = "";
-      checkClerk(this.form.mobile).then((res) => {
-        if (!res.success) {
-          return;
-        }
-        if (!res.result || !res.result.id) {
-          // 平台无此会员，需新建账号并设置密码
-          this.newMember = true;
-          this.oldMember = false;
-        } else {
-          // 已有会员，仅绑定为店员，不需要也不应展示/回填密码
-          this.newMember = false;
-          this.oldMember = true;
-          this.form.username = res.result.username || "";
-          this.form.password = "";
-        }
-        this.form.isSuper = 0;
-        this.memberCheck = true;
+const editForm = reactive({ // 表单
+  isSuper: 0,
+  roles: [],
+  departmentId: "",
+  departmentTitle: ""
+});
+const mobile = ref("");
+const clerkName = ref("");
+
+const newMember = ref(false);
+const oldMember = ref(false);
+const memberCheck = ref(false);
+const roleList = ref([]); // 角色列表
+const errorPass = ref(""); // 错误提示
+const formValidate = { // 验证规则
+  username: [
+    {required: true, message: "用户名不能为空", trigger: "blur"}
+  ],
+  password: [
+    {required: true, message: "密码不能为空", trigger: "blur"}
+  ],
+  mobile: [
+    {required: true, message: "手机号不能为空", trigger: "blur"},
+    {validator: validateMobile, trigger: "blur"}
+  ]
+};
+const submitLoading = ref(false); // 提交状态
+const data = ref([]); // 用户数据
+const total = ref(0); // 总数
+
+const addFormRules = computed(() => {
+  const rules = {
+    username: formValidate.username,
+    mobile: formValidate.mobile,
+  };
+  if (newMember.value) {
+    rules.password = formValidate.password;
+  }
+  return rules;
+});
+
+// 初始化数据
+function init() {
+  getUserList();
+}
+function checkClerks() {
+  open.value = form.value.mobile.length;
+
+  if (open.value == 11) {
+    checkClerk();
+  }
+  if (open.value < 11) {
+    checkAgainClerk();
+  }
+}
+// 选择部门回调
+function handleSelectDepTree(v) {
+  if (v) {
+    form.value.departmentId = v.departmentId;
+    form.value.departmentTitle = v.departmentTitle;
+  } else {
+    form.value.departmentId = "";
+    form.value.departmentTitle = "";
+  }
+}
+// 选择部门回调
+function handleEditSelectDepTree(v) {
+  if (v) {
+    editForm.departmentId = v.departmentId;
+    editForm.departmentTitle = v.departmentTitle;
+  } else {
+    editForm.departmentId = "";
+    editForm.departmentTitle = "";
+  }
+}
+//重新校验会员
+function checkAgainClerk() {
+  memberCheck.value = false;
+  newMember.value = false;
+  oldMember.value = false;
+  form.value.username = "";
+  form.value.password = "";
+  form.value.isSuper = 0;
+  form.value.roles = [];
+  errorPass.value = "";
+}
+// 检测当前手机号对应会员：无 id 为新建会员，有 id 为已有会员
+function checkClerk() {
+  if (!form.value.mobile) {
+    return;
+  }
+  newMember.value = false;
+  oldMember.value = false;
+  form.value.username = "";
+  form.value.password = "";
+  errorPass.value = "";
+  fetchCheckClerk(form.value.mobile).then((res) => {
+    if (!res.success) {
+      return;
+    }
+    if (!res.result || !res.result.id) {
+      // 平台无此会员，需新建账号并设置密码
+      newMember.value = true;
+      oldMember.value = false;
+    } else {
+      // 已有会员，仅绑定为店员，不需要也不应展示/回填密码
+      newMember.value = false;
+      oldMember.value = true;
+      form.value.username = res.result.username || "";
+      form.value.password = "";
+    }
+    form.value.isSuper = 0;
+    memberCheck.value = true;
+  });
+}
+// 搜索项部门选择
+function handleSelectDep(v) {
+  searchForm.departmentId = v;
+}
+// 分页 修改页码
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getUserList();
+  clearSelectAll();
+}
+// 分页 修改页数
+function changePageSize(v) {
+  searchForm.pageSize = v;
+  searchForm.pageNumber = 1;
+  getUserList();
+}
+function getUserList() {
+  // 多条件搜索用户列表
+  loading.value = true;
+  getUserListData(searchForm).then(res => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+// 搜索
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = 10;
+  getUserList();
+}
+// 排序
+function changeSort(e) {
+  searchForm.sort = e.prop;
+  searchForm.order =
+    e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  getUserList();
+}
+// 获取角色列表
+function getRoleList() {
+  let params = {
+    pageSize: 100
+  }
+  getAllRoleList(params).then(res => {
+    if (res.success) {
+      roleList.value = res.result.records;
+    }
+  });
+}
+// 重置密码
+function resetPass() {
+  if (selectCount.value == 0) {
+    Message.warning('请选中数据后重试!');
+    return
+  }
+  Modal.confirm({
+    title: "确认重置",
+    content:
+      "您确认要重置所选的 " +
+      selectCount.value +
+      " 条用户数据密码为【123456】?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
       });
-    },
-    // 搜索项部门选择
-    handleSelectDep(v) {
-      this.searchForm.departmentId = v;
-    },
-    // 分页 修改页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getUserList();
-      this.clearSelectAll();
-    },
-    // 分页 修改页数
-    changePageSize(v) {
-      this.searchForm.pageSize = v;
-      this.searchForm.pageNumber = 1;
-      this.getUserList();
-    },
-    getUserList() {
-      // 多条件搜索用户列表
-      this.loading = true;
-      getUserListData(this.searchForm).then(res => {
-        this.loading = false;
+      ids = ids.substring(0, ids.length - 1);
+
+      resetPassword(ids).then(res => {
+        Modal.remove();
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
-        }
-      });
-    },
-    // 搜索
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = 10;
-      this.getUserList();
-    },
-    // 排序
-    changeSort(e) {
-      this.searchForm.sort = e.prop;
-      this.searchForm.order =
-        e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      this.getUserList();
-    },
-    // 获取角色列表
-    getRoleList() {
-      let params = {
-        pageSize: 100
-      }
-      getAllRoleList(params).then(res => {
-        if (res.success) {
-          this.roleList = res.result.records;
-        }
-      });
-    },
-    // 重置密码
-    resetPass() {
-      if (this.selectCount == 0) {
-        this.$Message.warning('请选中数据后重试!');
-        return
-      }
-      this.$Modal.confirm({
-        title: "确认重置",
-        content:
-          "您确认要重置所选的 " +
-          this.selectCount +
-          " 条用户数据密码为【123456】?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-
-          resetPassword(ids).then(res => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.clearSelectAll();
-              this.getUserList();
-            }
-          });
-        }
-      });
-    },
-    updateSubmit(){
-      this.submitLoading = true;
-
-      editOtherUser(this.editForm.id,this.editForm).then(res => {
-        this.submitLoading = false;
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.getUserList();
-          this.userEditModalVisible = false;
-        }
-      });
-    },
-    // 确认提交
-    submitUser() {
-      this.$refs.addForm?.validate(valid => {
-        if (valid) {
-          const params = JSON.parse(JSON.stringify(this.form));
-          delete params.id;
-          delete params.status;
-          if (this.newMember) {
-            if (params.password == "" || params.password == undefined) {
-              this.errorPass = "密码不能为空";
-              return;
-            }
-            if (params.password.length < 6) {
-              this.errorPass = "密码长度不得少于6位";
-              return;
-            }
-            params.password = this.md5(params.password);
-          } else if (this.oldMember) {
-            // 后端 ClerkAddDTO 对 username/password 有 @NotEmpty 校验；
-            // 已有会员走 findByMobile 分支，不会使用该 password，仅用于通过参数校验
-            params.username = this.form.username;
-            params.password = params.password || "000000";
-          }
-          this.submitLoading = true;
-          addUser(params).then(res => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getUserList();
-              this.userModalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    // 添加用户
-    add() {
-      this.modalType = 0;
-      this.modalTitle = "添加店员";
-      this.form = {
-        username: "",
-        mobile: "",
-        password: "",
-        isSuper: 0,
-        roles: [],
-        departmentId: "",
-        departmentTitle: "",
-      };
-      this.oldMember = false;
-      this.newMember = false;
-      this.memberCheck = false;
-      this.userModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.addForm?.resetFields();
-        this.$refs.addDepTree?.clearSelect?.();
-      });
-    },
-    // 编辑用户
-    edit(v) {
-      getClerk(v.id).then(res => {
-        if (!res.success || !res.result) {
-          return;
-        }
-        this.mobile = res.result.mobile;
-        this.clerkName = res.result.clerkName;
-        this.editForm.isSuper = res.result.isSuper ? 1 : 0;
-        this.editForm.id = res.result.id;
-        this.editForm.departmentId = res.result.departmentId;
-        const selectRolesId = [];
-        if (res.result.roles) {
-          res.result.roles.forEach(function (e) {
-            selectRolesId.push(e.id);
-          });
-        }
-        this.editForm.roles = selectRolesId;
-        this.modalTitle = "修改店员";
-        this.userEditModalVisible = true;
-        this.$nextTick(() => {
-          this.$refs.editDepTree?.setData(
-            res.result.departmentId,
-            res.result.departmentTitle
-          );
-        });
-      });
-    },
-    // 启用
-    enable(v) {
-      let params = {
-        status: true
-      }
-      this.$Modal.confirm({
-        title: "确认启用",
-        content: "您确认要启用用户 " + v.clerkName + " ?",
-        loading: true,
-        onOk: () => {
-          enableClerk(v.id, params).then(res => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getUserList();
-            }
-          });
-        }
-      });
-    },
-    // 禁用
-    disable(v) {
-      let params = {
-        status: false
-      }
-      this.$Modal.confirm({
-        title: "确认禁用",
-        content: "您确认要禁用用户 " + v.clerkName + " ?",
-        loading: true,
-        onOk: () => {
-          enableClerk(v.id, params).then(res => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("操作成功");
-              this.getUserList();
-            }
-          });
-        }
-      });
-    },
-    // 删除用户
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除用户 " + v.clerkName + " ?",
-        loading: true,
-        onOk: () => {
-          deleteClerk(v.id).then(res => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getUserList();
-            }
-          });
-        }
-      });
-    },
-    // 选中状态
-    showSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    // 批量删除
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条店员?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteClerk(ids).then(res => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.clearSelectAll();
-              this.getUserList();
-            }
-          });
+          Message.success("操作成功");
+          clearSelectAll();
+          getUserList();
         }
       });
     }
-  },
-  mounted() {
-    this.init();
-    this.getRoleList();
+  });
+}
+function updateSubmit() {
+  submitLoading.value = true;
+
+  editOtherUser(editForm.id, editForm).then(res => {
+    submitLoading.value = false;
+    if (res.success) {
+      Message.success("操作成功");
+      getUserList();
+      userEditModalVisible.value = false;
+    }
+  });
+}
+// 确认提交
+function submitUser() {
+  addForm.value?.validate(valid => {
+    if (valid) {
+      const params = JSON.parse(JSON.stringify(form.value));
+      delete params.id;
+      delete params.status;
+      if (newMember.value) {
+        if (params.password == "" || params.password == undefined) {
+          errorPass.value = "密码不能为空";
+          return;
+        }
+        if (params.password.length < 6) {
+          errorPass.value = "密码长度不得少于6位";
+          return;
+        }
+        params.password = md5(params.password);
+      } else if (oldMember.value) {
+        // 后端 ClerkAddDTO 对 username/password 有 @NotEmpty 校验；
+        // 已有会员走 findByMobile 分支，不会使用该 password，仅用于通过参数校验
+        params.username = form.value.username;
+        params.password = params.password || "000000";
+      }
+      submitLoading.value = true;
+      addUser(params).then(res => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("操作成功");
+          getUserList();
+          userModalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+// 添加用户
+function add() {
+  modalType.value = 0;
+  modalTitle.value = "添加店员";
+  form.value = {
+    username: "",
+    mobile: "",
+    password: "",
+    isSuper: 0,
+    roles: [],
+    departmentId: "",
+    departmentTitle: "",
+  };
+  oldMember.value = false;
+  newMember.value = false;
+  memberCheck.value = false;
+  userModalVisible.value = true;
+  nextTick(() => {
+    addForm.value?.resetFields();
+    addDepTree.value?.clearSelect?.();
+  });
+}
+// 编辑用户
+function edit(v) {
+  getClerk(v.id).then(res => {
+    if (!res.success || !res.result) {
+      return;
+    }
+    mobile.value = res.result.mobile;
+    clerkName.value = res.result.clerkName;
+    editForm.isSuper = res.result.isSuper ? 1 : 0;
+    editForm.id = res.result.id;
+    editForm.departmentId = res.result.departmentId;
+    const selectRolesId = [];
+    if (res.result.roles) {
+      res.result.roles.forEach(function (e) {
+        selectRolesId.push(e.id);
+      });
+    }
+    editForm.roles = selectRolesId;
+    modalTitle.value = "修改店员";
+    userEditModalVisible.value = true;
+    nextTick(() => {
+      editDepTree.value?.setData(
+        res.result.departmentId,
+        res.result.departmentTitle
+      );
+    });
+  });
+}
+// 启用
+function enable(v) {
+  let params = {
+    status: true
   }
-};
+  Modal.confirm({
+    title: "确认启用",
+    content: "您确认要启用用户 " + v.clerkName + " ?",
+    loading: true,
+    onOk: () => {
+      enableClerk(v.id, params).then(res => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getUserList();
+        }
+      });
+    }
+  });
+}
+// 禁用
+function disable(v) {
+  let params = {
+    status: false
+  }
+  Modal.confirm({
+    title: "确认禁用",
+    content: "您确认要禁用用户 " + v.clerkName + " ?",
+    loading: true,
+    onOk: () => {
+      enableClerk(v.id, params).then(res => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("操作成功");
+          getUserList();
+        }
+      });
+    }
+  });
+}
+// 删除用户
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除用户 " + v.clerkName + " ?",
+    loading: true,
+    onOk: () => {
+      deleteClerk(v.id).then(res => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("删除成功");
+          getUserList();
+        }
+      });
+    }
+  });
+}
+// 选中状态
+function showSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+// 清除选中状态
+function clearSelectAll() {
+  tableRef.value?.clearSelection();
+}
+// 批量删除
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条店员?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteClerk(ids).then(res => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("删除成功");
+          clearSelectAll();
+          getUserList();
+        }
+      });
+    }
+  });
+}
+
+onMounted(() => {
+  init();
+  getRoleList();
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/shop/system/department/storeDepartmentManage.vue b/seller/src/views/shop/system/department/storeDepartmentManage.vue
index 5ea7ecb79..c9438726a 100644
--- a/seller/src/views/shop/system/department/storeDepartmentManage.vue
+++ b/seller/src/views/shop/system/department/storeDepartmentManage.vue
@@ -37,7 +37,7 @@
           </div>
         </el-col>
         <el-col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <el-form ref="form" :model="form" label-width="100px" :rules="formValidate">
+          <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
             <el-form-item label="部门名称" prop="title">
               <el-input v-model="form.title" />
             </el-form-item>
@@ -84,7 +84,7 @@
       width="500px"
       :close-on-click-modal="false"
     >
-      <el-form ref="formAdd" :model="formAdd" label-width="85px" :rules="formValidate">
+      <el-form ref="formAddRef" :model="formAdd" label-width="85px" :rules="formValidate">
         <div v-if="showParent">
           <el-form-item label="上级部门：">{{ form.title }}</el-form-item>
         </div>
@@ -105,7 +105,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import {
   initDepartment,
   addDepartment,
@@ -115,266 +116,266 @@ import {
   getRoleList,
   updateDepartmentRole,
 } from "@/api/index";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "store-department-manage",
-  data() {
-    return {
-      loading: true,
-      maxHeight: "500px",
-      strict: true,
-      userLoading: false,
-      loadingEdit: false,
-      modalVisible: false,
-      selectList: [],
-      selectCount: 0,
-      showParent: false,
-      modalTitle: "",
-      editTitle: "",
-      selectedRole: [],
-      searchKey: "",
-      currentNodeKey: null,
-      treeProps: {
-        label: "title",
-        children: "children",
-        isLeaf: "isLeaf",
-      },
-      form: {
-        id: "",
-        title: "",
-        parentId: "",
-        parentTitle: "",
-        sortOrder: 0,
-        status: 0,
-      },
-      formAdd: {},
-      formValidate: {
-        title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
-        sortOrder: [
-          {
-            required: true,
-            type: "number",
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false,
-      data: [],
-      dataEdit: [],
-      users: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getParentList();
-    },
-    getParentList() {
-      this.loading = true;
-      initDepartment().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          const list = Array.isArray(res.result) ? res.result : [];
-          this.data = this.bubbleSort(this.normalizeDepartmentTree(list));
-        }
-      });
-    },
-    normalizeDepartmentTree(list) {
-      return list.map((item) => {
-        const node = { ...item };
-        if (Array.isArray(node.children) && node.children.length > 0) {
-          node.children = this.normalizeDepartmentTree(node.children);
-        } else {
-          delete node.children;
-        }
-        return node;
-      });
-    },
-    onNodeClick(data) {
-      if (!data) {
-        this.cancelSelect();
-        return;
-      }
-      const row = JSON.parse(JSON.stringify(data));
-      for (const attr in row) {
-        if (row[attr] == null) {
-          row[attr] = "";
-        }
-      }
-      this.editTitle = row.title;
-      this.currentNodeKey = row.id;
-      this.userLoading = true;
+defineOptions({ name: "store-department-manage" });
 
-      getUserByDepartmentId(row.id).then((res) => {
-        const way = [];
-        res.result &&
-          res.result.forEach((item) => {
-            way.push(item.roleId);
-          });
-        this.selectedRole = way;
-      });
+const treeRef = ref(null);
+const formRef = ref(null);
+const formAddRef = ref(null);
 
-      getRoleList({
-        pageNumber: 1,
-        pageSize: 10000,
-      }).then((res) => {
-        this.userLoading = false;
-        if (res.success) {
-          this.users = res.result.records;
-          this.form = row;
-        }
-      });
-    },
-    onCheckChange(_data, { checkedNodes }) {
-      this.selectList = checkedNodes;
-      this.selectCount = checkedNodes.length;
-    },
-    bubbleSort(array) {
-      if (!Array.isArray(array)) return [];
-      const len = array.length;
-      if (len < 2) return array;
-      for (let i = 0; i < len; i++) {
-        for (let j = 0; j < i; j++) {
-          if (array[j].sortOrder > array[i].sortOrder) {
-            const temp = array[j];
-            array[j] = array[i];
-            array[i] = temp;
-          }
-        }
-      }
-      return array;
-    },
-    cancelSelect() {
-      this.$refs.treeRef?.setCurrentKey(null);
-      this.currentNodeKey = null;
-      this.$refs.form.resetFields();
-      delete this.form.id;
-      this.editTitle = "";
-      this.selectedRole = [];
-    },
-    selectTreeEdit(v) {
-      if (v.length > 0) {
-        for (const attr in v[0]) {
-          if (v[0][attr] == null) {
-            v[0][attr] = "";
-          }
-        }
-        const data = JSON.parse(JSON.stringify(v[0]));
-        this.form.parentId = data.id;
-        this.form.parentTitle = data.title;
-      }
-    },
-    cancelAdd() {
-      this.modalVisible = false;
-    },
-    handleReset() {
-      this.$refs.form.resetFields();
-      this.form.status = 0;
-    },
-    submitEdit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.id) {
-            this.$Message.warning("请先点击选择要修改的部门");
-            return;
-          }
-          const roleWay = [];
-          this.selectedRole.forEach((item) => {
-            roleWay.push({
-              departmentId: this.form.id,
-              roleId: item,
-            });
-          });
-
-          Promise.all([
-            editDepartment(this.form.id, this.form),
-            updateDepartmentRole(this.form.id, roleWay),
-          ]).then((res) => {
-            this.submitLoading = false;
-            if (res[0].success) {
-              this.$Message.success("编辑成功");
-              this.init();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    submitAdd() {
-      this.$refs.formAdd.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          addDepartment(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("添加成功");
-              this.init();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    add() {
-      if (this.form.id == "" || this.form.id == null) {
-        this.$Message.warning("请先点击选择一个部门");
-        return;
-      }
-      this.modalTitle = "添加子部门";
-      this.showParent = true;
-      this.formAdd = {
-        parentId: this.form.id,
-        sortOrder: 0,
-        status: 0,
-      };
-      this.modalVisible = true;
-    },
-    addRoot() {
-      this.modalTitle = "添加一级部门";
-      this.showParent = false;
-      this.formAdd = {
-        parentId: 0,
-        sortOrder: 0,
-        status: 0,
-      };
-      this.modalVisible = true;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未勾选要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content:
-          "您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteDepartment(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.selectList = [];
-              this.selectCount = 0;
-              this.cancelSelect();
-              this.init();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    const height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
+const loading = ref(true);
+const maxHeight = ref("500px");
+const strict = ref(true);
+const userLoading = ref(false);
+const loadingEdit = ref(false);
+const modalVisible = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const showParent = ref(false);
+const modalTitle = ref("");
+const editTitle = ref("");
+const selectedRole = ref([]);
+const searchKey = ref("");
+const currentNodeKey = ref(null);
+const treeProps = {
+  label: "title",
+  children: "children",
+  isLeaf: "isLeaf",
 };
+const form = ref({
+  id: "",
+  title: "",
+  parentId: "",
+  parentTitle: "",
+  sortOrder: 0,
+  status: 0,
+});
+const formAdd = ref({});
+const formValidate = {
+  title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
+  sortOrder: [
+    {
+      required: true,
+      type: "number",
+      message: "排序值不能为空",
+      trigger: "blur",
+    },
+  ],
+};
+const submitLoading = ref(false);
+const data = ref([]);
+const dataEdit = ref([]);
+const users = ref([]);
+
+function init() {
+  getParentList();
+}
+function getParentList() {
+  loading.value = true;
+  initDepartment().then((res) => {
+    loading.value = false;
+    if (res.success) {
+      const list = Array.isArray(res.result) ? res.result : [];
+      data.value = bubbleSort(normalizeDepartmentTree(list));
+    }
+  });
+}
+function normalizeDepartmentTree(list) {
+  return list.map((item) => {
+    const node = { ...item };
+    if (Array.isArray(node.children) && node.children.length > 0) {
+      node.children = normalizeDepartmentTree(node.children);
+    } else {
+      delete node.children;
+    }
+    return node;
+  });
+}
+function onNodeClick(data) {
+  if (!data) {
+    cancelSelect();
+    return;
+  }
+  const row = JSON.parse(JSON.stringify(data));
+  for (const attr in row) {
+    if (row[attr] == null) {
+      row[attr] = "";
+    }
+  }
+  editTitle.value = row.title;
+  currentNodeKey.value = row.id;
+  userLoading.value = true;
+
+  getUserByDepartmentId(row.id).then((res) => {
+    const way = [];
+    res.result &&
+      res.result.forEach((item) => {
+        way.push(item.roleId);
+      });
+    selectedRole.value = way;
+  });
+
+  getRoleList({
+    pageNumber: 1,
+    pageSize: 10000,
+  }).then((res) => {
+    userLoading.value = false;
+    if (res.success) {
+      users.value = res.result.records;
+      form.value = row;
+    }
+  });
+}
+function onCheckChange(_data, { checkedNodes }) {
+  selectList.value = checkedNodes;
+  selectCount.value = checkedNodes.length;
+}
+function bubbleSort(array) {
+  if (!Array.isArray(array)) return [];
+  const len = array.length;
+  if (len < 2) return array;
+  for (let i = 0; i < len; i++) {
+    for (let j = 0; j < i; j++) {
+      if (array[j].sortOrder > array[i].sortOrder) {
+        const temp = array[j];
+        array[j] = array[i];
+        array[i] = temp;
+      }
+    }
+  }
+  return array;
+}
+function cancelSelect() {
+  treeRef.value?.setCurrentKey(null);
+  currentNodeKey.value = null;
+  formRef.value.resetFields();
+  delete form.value.id;
+  editTitle.value = "";
+  selectedRole.value = [];
+}
+function selectTreeEdit(v) {
+  if (v.length > 0) {
+    for (const attr in v[0]) {
+      if (v[0][attr] == null) {
+        v[0][attr] = "";
+      }
+    }
+    const data = JSON.parse(JSON.stringify(v[0]));
+    form.value.parentId = data.id;
+    form.value.parentTitle = data.title;
+  }
+}
+function cancelAdd() {
+  modalVisible.value = false;
+}
+function handleReset() {
+  formRef.value.resetFields();
+  form.value.status = 0;
+}
+function submitEdit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      if (!form.value.id) {
+        Message.warning("请先点击选择要修改的部门");
+        return;
+      }
+      const roleWay = [];
+      selectedRole.value.forEach((item) => {
+        roleWay.push({
+          departmentId: form.value.id,
+          roleId: item,
+        });
+      });
+
+      Promise.all([
+        editDepartment(form.value.id, form.value),
+        updateDepartmentRole(form.value.id, roleWay),
+      ]).then((res) => {
+        submitLoading.value = false;
+        if (res[0].success) {
+          Message.success("编辑成功");
+          init();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+function submitAdd() {
+  formAddRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      addDepartment(formAdd.value).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          Message.success("添加成功");
+          init();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+function add() {
+  if (form.value.id == "" || form.value.id == null) {
+    Message.warning("请先点击选择一个部门");
+    return;
+  }
+  modalTitle.value = "添加子部门";
+  showParent.value = true;
+  formAdd.value = {
+    parentId: form.value.id,
+    sortOrder: 0,
+    status: 0,
+  };
+  modalVisible.value = true;
+}
+function addRoot() {
+  modalTitle.value = "添加一级部门";
+  showParent.value = false;
+  formAdd.value = {
+    parentId: 0,
+    sortOrder: 0,
+    status: 0,
+  };
+  modalVisible.value = true;
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未勾选要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content:
+      "您确认要删除所选的 " + selectCount.value + " 条数据及其下级所有数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteDepartment(ids).then((res) => {
+        Modal.remove();
+        if (res.success) {
+          Message.success("删除成功");
+          selectList.value = [];
+          selectCount.value = 0;
+          cancelSelect();
+          init();
+        }
+      });
+    },
+  });
+}
+
+onMounted(() => {
+  const height = document.documentElement.clientHeight;
+  maxHeight.value = Number(height - 287) + "px";
+  init();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/seller/src/views/shop/system/role/storeRoleManage.vue b/seller/src/views/shop/system/role/storeRoleManage.vue
index 4a77f699f..f4e78853f 100644
--- a/seller/src/views/shop/system/role/storeRoleManage.vue
+++ b/seller/src/views/shop/system/role/storeRoleManage.vue
@@ -7,7 +7,7 @@
       </div>
 
       <el-table
-        ref="table"
+        ref="tableRef"
         v-loading="loading"
         border
         :data="data"
@@ -56,7 +56,7 @@
       :close-on-click-modal="false"
       destroy-on-close
     >
-      <el-form ref="roleForm" :model="roleForm" label-width="80px" :rules="roleFormValidate">
+      <el-form ref="roleFormRef" :model="roleForm" label-width="80px" :rules="roleFormValidate">
         <el-form-item label="角色名称" prop="name">
           <el-input v-model="roleForm.name" />
         </el-form-item>
@@ -81,7 +81,7 @@
     >
       <div v-loading="treeLoading" style="position: relative; max-height: 560px; overflow: auto">
         <el-tree
-          ref="permTree"
+          ref="permTreeRef"
           :key="permTreeKey"
           :data="permData"
           :props="{ label: 'title', children: 'children', disabled: 'disabled' }"
@@ -148,376 +148,379 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { nextTick, onMounted, ref } from "vue";
 import {
-  getRoleList,
+  getRoleList as fetchRoleList,
   getAllPermissionList,
-  addRole,
+  addRole as addRoleReq,
   editRole,
   deleteRole,
   loadDepartment,
   selectRoleMenu,
   saveRoleMenu,
 } from "@/api/index";
+import { Message, Modal } from "@/utils/message";
 import util from "@/libs/util.js";
+import { useAppStore } from "@/stores/app";
 
-export default {
-  name: "role-manage",
-  data() {
-    return {
-      superModelLoading: false,
-      selectIsSuperModel: false,
-      rolePermsWay: [],
-      openLevel: "0",
-      loading: true,
-      treeLoading: true,
-      depTreeLoading: true,
-      submitPermLoading: false,
-      submitDepLoading: false,
-      sortColumn: "",
-      sortType: "desc",
-      modalType: 0,
-      roleModalVisible: false,
-      permModalVisible: false,
-      depModalVisible: false,
-      modalTitle: "",
-      roleForm: {
-        name: "",
-        description: "",
-      },
-      roleFormValidate: {
-        name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
-      },
-      submitLoading: false,
-      selectList: [],
-      selectCount: 0,
-      data: [],
-      pageNumber: 1,
-      pageSize: 20,
-      total: 0,
-      permData: [],
-      editRolePermId: "",
-      selectAllFlag: false,
-      depData: [],
-      dataType: 0,
-      editDepartments: [],
-      saveRoleWay: [],
-      permTreeKey: 0,
-      permCheckedKeys: [],
-      permExpandedKeys: [],
-    };
-  },
-  methods: {
-    init() {
-      this.getRoleList();
-      this.getPermList();
-    },
-    changePage() {
-      this.getRoleList();
-      this.clearSelectAll();
-    },
-    changePageSize() {
-      this.pageNumber = 1;
-      this.getRoleList();
-    },
-    changeSort(e) {
-      this.sortColumn = e.prop;
-      this.sortType = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
-      if (!e.order) {
-        this.sortType = "";
+defineOptions({ name: "role-manage" });
+
+const appStore = useAppStore();
+
+const tableRef = ref(null);
+const roleFormRef = ref(null);
+const permTreeRef = ref(null);
+
+const superModelLoading = ref(false);
+const selectIsSuperModel = ref(false);
+const rolePermsWay = ref([]);
+const openLevel = ref("0");
+const loading = ref(true);
+const treeLoading = ref(true);
+const depTreeLoading = ref(true);
+const submitPermLoading = ref(false);
+const submitDepLoading = ref(false);
+const sortColumn = ref("");
+const sortType = ref("desc");
+const modalType = ref(0);
+const roleModalVisible = ref(false);
+const permModalVisible = ref(false);
+const depModalVisible = ref(false);
+const modalTitle = ref("");
+const roleForm = ref({
+  name: "",
+  description: "",
+});
+const roleFormValidate = {
+  name: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
+};
+const submitLoading = ref(false);
+const selectList = ref([]);
+const selectCount = ref(0);
+const data = ref([]);
+const pageNumber = ref(1);
+const pageSize = ref(20);
+const total = ref(0);
+const permData = ref([]);
+const editRolePermId = ref("");
+const selectAllFlag = ref(false);
+const depData = ref([]);
+const dataType = ref(0);
+const editDepartments = ref([]);
+const saveRoleWay = ref([]);
+const permTreeKey = ref(0);
+const permCheckedKeys = ref([]);
+const permExpandedKeys = ref([]);
+
+function init() {
+  getRoleList();
+  getPermList();
+}
+function changePage() {
+  getRoleList();
+  clearSelectAll();
+}
+function changePageSize() {
+  pageNumber.value = 1;
+  getRoleList();
+}
+function changeSort(e) {
+  sortColumn.value = e.prop;
+  sortType.value = e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : "";
+  if (!e.order) {
+    sortType.value = "";
+  }
+  getRoleList();
+}
+function setRole(val) {
+  let enable;
+  val == "onlyView" ? (enable = 0) : (enable = 1);
+  saveRoleWay.value.map((item) => {
+    item.isSuper = enable;
+  });
+}
+function getRoleList() {
+  loading.value = true;
+  let params = {
+    pageNumber: pageNumber.value,
+    pageSize: pageSize.value,
+    sort: sortColumn.value,
+    order: sortType.value,
+  };
+  fetchRoleList(params).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records;
+      total.value = res.result.total;
+    }
+  });
+}
+function getPermList() {
+  treeLoading.value = true;
+  getAllPermissionList().then((res) => {
+    if (res.success) {
+      deleteDisableNode(res.result);
+      permData.value = res.result;
+    }
+    treeLoading.value = false;
+  });
+}
+function deleteDisableNode(permData) {
+  permData.forEach(function (e) {
+    if (e.status == -1) {
+      e.title = "[已禁用] " + e.title;
+      e.disabled = true;
+    }
+    if (e.children && e.children.length > 0) {
+      deleteDisableNode(e.children);
+    }
+  });
+}
+function submitRole() {
+  roleFormRef.value.validate((valid) => {
+    if (valid) {
+      if (modalType.value == 0) {
+        submitLoading.value = true;
+        addRoleReq(roleForm.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getRoleList();
+            roleModalVisible.value = false;
+          }
+        });
+      } else {
+        submitLoading.value = true;
+        roleForm.value.roleId = roleForm.value.id;
+        editRole(roleForm.value).then((res) => {
+          submitLoading.value = false;
+          if (res.success) {
+            Message.success("操作成功");
+            getRoleList();
+            roleModalVisible.value = false;
+          }
+        });
       }
-      this.getRoleList();
-    },
-    setRole(val) {
-      let enable;
-      val == "onlyView" ? (enable = 0) : (enable = 1);
-      this.saveRoleWay.map((item) => {
-        item.isSuper = enable;
-      });
-    },
-    getRoleList() {
-      this.loading = true;
-      let params = {
-        pageNumber: this.pageNumber,
-        pageSize: this.pageSize,
-        sort: this.sortColumn,
-        order: this.sortType,
-      };
-      getRoleList(params).then((res) => {
-        this.loading = false;
+    }
+  });
+}
+function addRole() {
+  modalType.value = 0;
+  modalTitle.value = "添加角色";
+  roleForm.value = {
+    name: "",
+    description: "",
+  };
+  roleModalVisible.value = true;
+  nextTick(() => {
+    roleFormRef.value?.clearValidate();
+  });
+}
+function edit(v) {
+  modalType.value = 1;
+  modalTitle.value = "编辑角色";
+  roleFormRef.value?.resetFields();
+  for (let attr in v) {
+    if (v[attr] == null) {
+      v[attr] = "";
+    }
+  }
+  let str = JSON.stringify(v);
+  let roleInfo = JSON.parse(str);
+  roleForm.value = roleInfo;
+  roleModalVisible.value = true;
+}
+function remove(v) {
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除角色 " + v.name + " ?",
+    loading: true,
+    onOk: () => {
+      deleteRole(v.id).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.data = res.result.records;
-          this.total = res.result.total;
+          Message.success("删除成功");
+          getRoleList();
         }
       });
     },
-    getPermList() {
-      this.treeLoading = true;
-      getAllPermissionList().then((res) => {
+  });
+}
+function clearSelectAll() {
+  tableRef.value?.clearSelection();
+}
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+}
+function delAll() {
+  if (selectCount.value <= 0) {
+    Message.warning("您还未选择要删除的数据");
+    return;
+  }
+  Modal.confirm({
+    title: "确认删除",
+    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
+    loading: true,
+    onOk: () => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteRole(ids).then((res) => {
+        Modal.remove();
         if (res.success) {
-          this.deleteDisableNode(res.result);
-          this.permData = res.result;
+          Message.success("删除成功");
+          clearSelectAll();
+          getRoleList();
         }
-        this.treeLoading = false;
       });
     },
-    deleteDisableNode(permData) {
-      let that = this;
-      permData.forEach(function (e) {
+  });
+}
+async function editPerm(v) {
+  permData.value.map((item) => {
+    item.children.length != 0
+      ? item.children.map((child) => {
+          child.children.length != 0
+            ? child.children.map((kid) => {
+                delete kid.isSuper;
+              })
+            : "";
+          delete child.isSuper;
+        })
+      : "";
+    delete item.isSuper;
+  });
+
+  if (treeLoading.value) {
+    Message.warning("菜单权限数据加载中，请稍后点击查看");
+    return;
+  }
+  editRolePermId.value = v.id;
+  modalTitle.value = "分配 " + v.name + " 的菜单权限";
+  let rolePerms;
+  let res = await selectRoleMenu(v.id);
+  if (res.result) {
+    rolePerms = res.result;
+    rolePermsWay.value = res.result;
+  }
+  permCheckedKeys.value = collectCheckedKeys(permData.value, rolePerms);
+  permExpandedKeys.value = computeExpandedKeys(openLevel.value);
+  permTreeKey.value += 1;
+  permModalVisible.value = true;
+}
+function collectCheckedKeys(permData, rolePerms) {
+  const keys = [];
+  const walk = (nodes) => {
+    nodes.forEach((p) => {
+      if (hasPerm(p, rolePerms) && p.status != -1) {
+        if (p.children && p.children.length === 0) {
+          keys.push(p.id);
+        }
+      }
+      if (p.children && p.children.length > 0) {
+        walk(p.children);
+      }
+    });
+  };
+  walk(permData);
+  return keys;
+}
+function hasPerm(p, rolePerms) {
+  if (!rolePerms) return false;
+  let flag = false;
+  for (let i = 0; i < rolePerms.length; i++) {
+    if (p.id == rolePerms[i].menuId) {
+      p.isSuper = rolePerms[i].isSuper;
+      flag = true;
+      break;
+    }
+  }
+  return flag;
+}
+function submitPermEdit() {
+  saveRoleWay.value = [];
+  selectIsSuperModel.value = true;
+  const tree = permTreeRef.value;
+  const selectedNodes = [
+    ...tree.getCheckedNodes(false, true),
+  ];
+  let way = [];
+  selectedNodes.forEach((e) => {
+    let perm = {
+      title: e.title,
+      isSuper: e.isSuper ? 1 : 0,
+      menuId: e.id,
+      roleId: editRolePermId.value,
+    };
+    way.push(perm);
+    saveRoleWay.value = way;
+  });
+}
+function saveRole() {
+  superModelLoading.value = true;
+  saveRoleMenu(editRolePermId.value, saveRoleWay.value).then((res) => {
+    superModelLoading.value = false;
+    if (res.success) {
+      Message.success("操作成功");
+      appStore.setAdded(false);
+      util.initRouter();
+      getRoleList();
+      permModalVisible.value = false;
+      selectIsSuperModel.value = false;
+    }
+  });
+}
+function loadData(item, callback) {
+  loadDepartment(item.id, { openDataFilter: false }).then((res) => {
+    if (res.success) {
+      res.result.forEach(function (e) {
+        e.checked = false;
+        if (e.isParent) {
+          e.loading = false;
+          e.children = [];
+        }
         if (e.status == -1) {
           e.title = "[已禁用] " + e.title;
           e.disabled = true;
         }
-        if (e.children && e.children.length > 0) {
-          that.deleteDisableNode(e.children);
-        }
       });
-    },
-    submitRole() {
-      this.$refs.roleForm.validate((valid) => {
-        if (valid) {
-          if (this.modalType == 0) {
-            this.submitLoading = true;
-            addRole(this.roleForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getRoleList();
-                this.roleModalVisible = false;
-              }
-            });
-          } else {
-            this.submitLoading = true;
-            this.roleForm.roleId = this.roleForm.id;
-            editRole(this.roleForm).then((res) => {
-              this.submitLoading = false;
-              if (res.success) {
-                this.$Message.success("操作成功");
-                this.getRoleList();
-                this.roleModalVisible = false;
-              }
-            });
-          }
-        }
-      });
-    },
-    addRole() {
-      this.modalType = 0;
-      this.modalTitle = "添加角色";
-      this.roleForm = {
-        name: "",
-        description: "",
-      };
-      this.roleModalVisible = true;
-      this.$nextTick(() => {
-        this.$refs.roleForm?.clearValidate();
-      });
-    },
-    edit(v) {
-      this.modalType = 1;
-      this.modalTitle = "编辑角色";
-      this.$refs.roleForm?.resetFields();
-      for (let attr in v) {
-        if (v[attr] == null) {
-          v[attr] = "";
-        }
+      callback(res.result);
+    }
+  });
+}
+function computeExpandedKeys(level) {
+  const keys = [];
+  const walk = (nodes, depth) => {
+    nodes.forEach((n) => {
+      if (level === "0") {
+        keys.push(n.id);
+      } else if (level === "2" && depth < 1) {
+        keys.push(n.id);
+      } else if (level === "3" && depth < 2) {
+        keys.push(n.id);
       }
-      let str = JSON.stringify(v);
-      let roleInfo = JSON.parse(str);
-      this.roleForm = roleInfo;
-      this.roleModalVisible = true;
-    },
-    remove(v) {
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除角色 " + v.name + " ?",
-        loading: true,
-        onOk: () => {
-          deleteRole(v.id).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getRoleList();
-            }
-          });
-        },
-      });
-    },
-    clearSelectAll() {
-      this.$refs.table?.clearSelection();
-    },
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-    },
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未选择要删除的数据");
-        return;
+      if (n.children && n.children.length) {
+        walk(n.children, depth + 1);
       }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteRole(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.clearSelectAll();
-              this.getRoleList();
-            }
-          });
-        },
-      });
-    },
-    async editPerm(v) {
-      this.permData.map((item) => {
-        item.children.length != 0
-          ? item.children.map((child) => {
-              child.children.length != 0
-                ? child.children.map((kid) => {
-                    delete kid.isSuper;
-                  })
-                : "";
-              delete child.isSuper;
-            })
-          : "";
-        delete item.isSuper;
-      });
+    });
+  };
+  if (level !== "1") {
+    walk(permData.value, 0);
+  }
+  return keys;
+}
+function changeOpen(v) {
+  permExpandedKeys.value = computeExpandedKeys(v);
+  permTreeKey.value += 1;
+}
 
-      if (this.treeLoading) {
-        this.$Message.warning("菜单权限数据加载中，请稍后点击查看");
-        return;
-      }
-      this.editRolePermId = v.id;
-      this.modalTitle = "分配 " + v.name + " 的菜单权限";
-      let rolePerms;
-      let res = await selectRoleMenu(v.id);
-      if (res.result) {
-        rolePerms = res.result;
-        this.rolePermsWay = res.result;
-      }
-      this.permCheckedKeys = this.collectCheckedKeys(this.permData, rolePerms);
-      this.permExpandedKeys = this.computeExpandedKeys(this.openLevel);
-      this.permTreeKey += 1;
-      this.permModalVisible = true;
-    },
-    collectCheckedKeys(permData, rolePerms) {
-      const keys = [];
-      const walk = (nodes) => {
-        nodes.forEach((p) => {
-          if (this.hasPerm(p, rolePerms) && p.status != -1) {
-            if (p.children && p.children.length === 0) {
-              keys.push(p.id);
-            }
-          }
-          if (p.children && p.children.length > 0) {
-            walk(p.children);
-          }
-        });
-      };
-      walk(permData);
-      return keys;
-    },
-    hasPerm(p, rolePerms) {
-      if (!rolePerms) return false;
-      let flag = false;
-      for (let i = 0; i < rolePerms.length; i++) {
-        if (p.id == rolePerms[i].menuId) {
-          p.isSuper = rolePerms[i].isSuper;
-          flag = true;
-          break;
-        }
-      }
-      return flag;
-    },
-    submitPermEdit() {
-      this.saveRoleWay = [];
-      this.selectIsSuperModel = true;
-      const tree = this.$refs.permTree;
-      const selectedNodes = [
-        ...tree.getCheckedNodes(false, true),
-      ];
-      let way = [];
-      selectedNodes.forEach((e) => {
-        let perm = {
-          title: e.title,
-          isSuper: e.isSuper ? 1 : 0,
-          menuId: e.id,
-          roleId: this.editRolePermId,
-        };
-        way.push(perm);
-        this.saveRoleWay = way;
-      });
-    },
-    saveRole() {
-      this.superModelLoading = true;
-      saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
-        this.superModelLoading = false;
-        if (res.success) {
-          this.$Message.success("操作成功");
-          this.$store.commit("setAdded", false);
-          util.initRouter(this);
-          this.getRoleList();
-          this.permModalVisible = false;
-          this.selectIsSuperModel = false;
-        }
-      });
-    },
-    loadData(item, callback) {
-      loadDepartment(item.id, { openDataFilter: false }).then((res) => {
-        if (res.success) {
-          res.result.forEach(function (e) {
-            e.checked = false;
-            if (e.isParent) {
-              e.loading = false;
-              e.children = [];
-            }
-            if (e.status == -1) {
-              e.title = "[已禁用] " + e.title;
-              e.disabled = true;
-            }
-          });
-          callback(res.result);
-        }
-      });
-    },
-    computeExpandedKeys(level) {
-      const keys = [];
-      const walk = (nodes, depth) => {
-        nodes.forEach((n) => {
-          if (level === "0") {
-            keys.push(n.id);
-          } else if (level === "2" && depth < 1) {
-            keys.push(n.id);
-          } else if (level === "3" && depth < 2) {
-            keys.push(n.id);
-          }
-          if (n.children && n.children.length) {
-            walk(n.children, depth + 1);
-          }
-        });
-      };
-      if (level !== "1") {
-        walk(this.permData, 0);
-      }
-      return keys;
-    },
-    changeOpen(v) {
-      this.permExpandedKeys = this.computeExpandedKeys(v);
-      this.permTreeKey += 1;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 <style lang="scss" scoped>
 .role-list {
diff --git a/seller/src/views/shop/wap/decorate.vue b/seller/src/views/shop/wap/decorate.vue
index 9f523a25f..d96dab57e 100644
--- a/seller/src/views/shop/wap/decorate.vue
+++ b/seller/src/views/shop/wap/decorate.vue
@@ -517,15 +517,17 @@
       </template>
     </el-dialog>
 
-    <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
+    <hotzone ref="hotzoneRef" @changeZone="changeZone"></hotzone>
 
     <el-dialog v-model="picModelFlag" width="1200px" append-to-body destroy-on-close>
-      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManage" />
+      <ossManage @callback="callbackSelected" :is-component="true" :initialize="picModelFlag" :max-select="1" ref="ossManageRef" />
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, nextTick } from "vue";
 import { CircleClose } from "@element-plus/icons-vue";
+import { Message } from "@/utils/message";
 import alignTextLeftImg from "@/assets/align-text-left.png";
 import alignTextCenterImg from "@/assets/align-text-center.png";
 import alignTextRightImg from "@/assets/align-text-right.png";
@@ -534,303 +536,295 @@ import { modelData } from "./config";
 import hotzone from "@/views/shop/hotzone";
 import ways from "@/views/lili-dialog/wap.js";
 import categoryTemplate from "@/views/lili-dialog/template/category";
-export default {
-  components: {
-    ossManage,
-    hotzone,
-    categoryTemplate,
-    CircleClose,
-  },
-  data() {
+
+const props = defineProps(["res"]);
+const emit = defineEmits(["handleDrawer"]);
+
+// alignTextLeftImg/alignTextCenterImg/alignTextRightImg、ways(选择链接的类型)、modelData(装修数据) 为 import 常量，模板中直接使用
+const picModelFlag = ref(false); //图片选择器
+const linkType = ref("goods"); // dialog弹窗口类型
+const styleFlag = ref(false); //广告魔方开关
+const textAlign = ref(
+  props.res.options.list[0] ? props.res.options.list[0].textAlign : "center"
+); //文字对齐方式
+const promotionsFlag = ref(false); //广告魔方开关
+const selectedLinkIndex = ref(""); //选择链接的索引
+const selectedGoods = ref(""); // 已选商品
+const selectedLinks = ref(""); // 已选链接
+const modelList = ref(""); // 装修列表
+const enableSelectCategory = ref(false); //商品是否绑定分类
+const pendingCategory = ref(null); // 选择分类弹窗草稿
+const goodsSelectedIndex = ref(0); //绑定商品分类的索引
+
+// hotzoneRef/ossManageRef：模板 ref 与组件 import 同名，改名避免互相覆盖
+const liliDialog = ref(null);
+const hotzoneRef = ref(null);
+const ossManageRef = ref(null);
+
+watch(
+  () => props.res,
+  (val) => {},
+  { deep: true }
+);
+
+// 选择分类（弹窗内暂存，确定后写回）
+function onCategorySelected(val) {
+  pendingCategory.value = val;
+}
+function handleCancelCategoryModal() {
+  pendingCategory.value = null;
+  enableSelectCategory.value = false;
+}
+function handleConfirmCategoryModal() {
+  if (pendingCategory.value?.length) {
+    confirmCategory(pendingCategory.value);
+  }
+  pendingCategory.value = null;
+  enableSelectCategory.value = false;
+}
+function confirmCategory(val) {
+  let data = {
+    ...props.res.options.list[0].titleWay[goodsSelectedIndex.value],
+  };
+  let callback = {
+    id: val[0].id,
+    name: val[0].name,
+    categoryIdWay: val[0].id,
+  };
+  data = {
+    ...data,
+    bindCategory: callback,
+  };
+  props.res.options.list[0].listWay = props.res.options.list[0].listWay.filter(
+    (item) => {
+      return item.___index != goodsSelectedIndex.value;
+    }
+  );
+  props.res.options.list[0].titleWay[goodsSelectedIndex.value] = data;
+
+  console.log(props.res.options.list[0]);
+}
+// 商品排序
+function slotGoods(list, key, val) {
+  const newVal = [];
+  let newValIndex = 0;
+  // 给当前点击的商品分组
+  list.forEach((item, index) => {
+    if (item.___index == key) {
+      newVal.push(item);
+    }
+  });
+  // 获得当前点击商品的索引
+  newVal.forEach((item, index) => {
+    if (item.id == val.id) {
+      newValIndex = index;
+    }
+  });
+  // 进行商品排序
+  upData(newVal, newValIndex);
+  if (list.length == newVal.length) {
+    list = newVal;
+  } else {
+    let newList;
+    newVal.forEach((item, index) => {
+      newList = list.filter((child) => {
+        return child.id != item.id && child.___index != key;
+      });
+    });
+    list = [...newList, ...newVal];
+  }
+
+  props.res.options.list[0]["listWay"] = list;
+}
+
+// 轮播图排序
+function slotBanner(val, key, index, down) {
+  console.log(val);
+  if (down == "down") {
+    downData(val.options.list, index);
+  } else {
+    upData(val.options.list, index);
+  }
+}
+function upData(arr, index) {
+  let newArr = [];
+  if (arr.length > 1 && index !== 0) {
+    newArr = swapItems(arr, index, index - 1);
+  }
+  return newArr;
+}
+function swapItems(arr, index1, index2) {
+  arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+  return arr;
+}
+function downData(arr, index) {
+  let newArr = [];
+  if (arr.length > 1 && index !== arr.length - 1) {
+    newArr = swapItems(arr, index, index + 1);
+  }
+  return newArr;
+}
+// 改变横纵切换title内容
+function changeDirection(val, data) {
+  if (val == "horizontal") {
+    const props = { ...data };
+    data.title = [];
+    data.title.push(props.title[0]);
+  }
+}
+// 选择风格
+function selectStyle() {
+  styleFlag.value = !styleFlag.value;
+}
+function selectPromotions() {
+  promotionsFlag.value = !promotionsFlag.value;
+}
+// 回调选择的链接
+function selectedLink(val) {
+  selectedLinks.value.zoneInfo = [];
+  delete val.selected;
+  delete val.intro;
+  delete val.mobileIntro;
+  selectedLinks.value.url = val;
+}
+// 回调的商品信息
+function selectedGoodsData(val) {
+  if (!val) return false;
+  let data = val.map((item) => {
+    delete item.selected;
+    delete item.intro;
+    delete item.mobileIntro;
     return {
-      alignTextLeftImg,
-      alignTextCenterImg,
-      alignTextRightImg,
-      ways, // 选择链接的类型
-      picModelFlag: false, //图片选择器
-      linkType: "goods", // dialog弹窗口类型
-      styleFlag: false, //广告魔方开关
-      textAlign: this.res.options.list[0]
-        ? this.res.options.list[0].textAlign
-        : "center", //文字对齐方式
-      promotionsFlag: false, //广告魔方开关
-      selectedLinkIndex: "", //选择链接的索引
-      modelData, // 装修数据
-      selectedGoods: "", // 已选商品
-      selectedLinks: "", // 已选链接
-      modelList: "", // 装修列表
-      enableSelectCategory: false, //商品是否绑定分类
-      pendingCategory: null, // 选择分类弹窗草稿
-      goodsSelectedIndex: 0, //绑定商品分类的索引
+      img: item.thumbnail,
+      title: item.goodsName,
+      type: selectedGoods.value.title,
+      ___index: selectedGoods.value.___index,
+      ...item,
     };
-  },
-  watch: {
-    res: {
-      handler(val) {},
-      deep: true,
-    },
-  },
-  props: ["res"],
-  methods: {
-    // 选择分类（弹窗内暂存，确定后写回）
-    onCategorySelected(val) {
-      this.pendingCategory = val;
-    },
-    handleCancelCategoryModal() {
-      this.pendingCategory = null;
-      this.enableSelectCategory = false;
-    },
-    handleConfirmCategoryModal() {
-      if (this.pendingCategory?.length) {
-        this.confirmCategory(this.pendingCategory);
-      }
-      this.pendingCategory = null;
-      this.enableSelectCategory = false;
-    },
-    confirmCategory(val) {
-      let data = {
-        ...this.res.options.list[0].titleWay[this.goodsSelectedIndex],
-      };
-      let callback = {
-        id: val[0].id,
-        name: val[0].name,
-        categoryIdWay: val[0].id,
-      };
-      data = {
-        ...data,
-        bindCategory: callback,
-      };
-      this.res.options.list[0].listWay =
-        this.res.options.list[0].listWay.filter((item) => {
-          return item.___index != this.goodsSelectedIndex;
-        });
-      this.res.options.list[0].titleWay[this.goodsSelectedIndex] = data;
+  });
+  props.res.options.list[0].listWay.push(...data);
+  // 清除已经绑定的分类
+  props.res.options.list[0].titleWay[goodsSelectedIndex.value].bindCategory =
+    "";
+  linkType.value = "";
+}
+// 绑定商品
+function bindGoodsId(val, index) {
+  selectedGoods.value = val;
+  goodsSelectedIndex.value = index;
+  liliDialogFlag(true);
+}
+// 绑定分类
+function bindGoodsCategory(index, key) {
+  pendingCategory.value = null;
+  enableSelectCategory.value = true;
+  goodsSelectedIndex.value = index;
+}
+// 点击抽屉
+function clickDrawer(item, index) {
+  emit("handleDrawer", item);
+  styleFlag.value = false;
+  promotionsFlag.value = false;
+}
+// 打开图片选择器
+function liliDialogFlag(flag) {
+  liliDialog.value.clearGoodsSelected();
+  liliDialog.value.goodsFlag = flag;
+  liliDialog.value.flag = true;
+}
 
-      console.log(this.res.options.list[0]);
-    },
-    // 商品排序
-    slotGoods(list, key, val) {
-      const newVal = [];
-      let newValIndex = 0;
-      // 给当前点击的商品分组
-      list.forEach((item, index) => {
-        if (item.___index == key) {
-          newVal.push(item);
-        }
+function changeTextAlign(val) {
+  props.res.options.list[0].textAlign = val;
+  textAlign.value = val;
+}
+// 点击链接赋值一个唯一值，并将当前选择的模块赋值
+function clickLink(val, index, oval) {
+  selectedLinks.value = val;
+  if (val.model === "hotzone") {
+    if (!val.zoneInfo) {
+      val.zoneInfo = [];
+    }
+    hotzoneRef.value.open(val);
+  } else {
+    liliDialogFlag(false);
+  }
+}
+function addZone(zoneInfo) {
+  selectedLinks.value.zoneInfo.push(zoneInfo);
+}
+function changeZone(zoneInfo) {
+  selectedLinks.value.zoneInfo = zoneInfo;
+}
+//点击图片解析成base64
+function changeFile(item, index) {
+  const file = document.getElementById("files" + index).files[0];
+  if (file == void 0) return false;
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  nextTick((res) => {
+    reader.onload = (e) => {
+      item.img = e.target.result;
+    };
+  });
+}
+//添加设置
+function addDecorate(type, data) {
+  if (type === "notice") {
+    if (data.options.list[0].direction == "vertical") {
+      props.res.options.list[0].title.push({
+        content: "",
       });
-      // 获得当前点击商品的索引
-      newVal.forEach((item, index) => {
-        if (item.id == val.id) {
-          newValIndex = index;
-        }
-      });
-      // 进行商品排序
-      this.upData(newVal, newValIndex);
-      if (list.length == newVal.length) {
-        list = newVal;
-      } else {
-        let newList;
-        newVal.forEach((item, index) => {
-          newList = list.filter((child) => {
-            return child.id != item.id && child.___index != key;
-          });
-        });
-        list = [...newList, ...newVal];
-      }
-
-      this.res.options.list[0]["listWay"] = list;
-    },
-
-    // 轮播图排序
-    slotBanner(val, key, index, down) {
-      console.log(val);
-      if (down == "down") {
-        this.downData(val.options.list, index);
-      } else {
-        this.upData(val.options.list, index);
-      }
-    },
-    upData(arr, index) {
-      let newArr = [];
-      if (arr.length > 1 && index !== 0) {
-        newArr = this.swapItems(arr, index, index - 1);
-      }
-      return newArr;
-    },
-    swapItems(arr, index1, index2) {
-      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
-      return arr;
-    },
-    downData(arr, index) {
-      let newArr = [];
-      if (arr.length > 1 && index !== arr.length - 1) {
-        newArr = this.swapItems(arr, index, index + 1);
-      }
-      return newArr;
-    },
-    // 改变横纵切换title内容
-    changeDirection(val, data) {
-      if (val == "horizontal") {
-        const props = { ...data };
-        data.title = [];
-        data.title.push(props.title[0]);
-      }
-    },
-    // 选择风格
-    selectStyle() {
-      this.styleFlag = !this.styleFlag;
-    },
-    selectPromotions() {
-      this.promotionsFlag = !this.promotionsFlag;
-    },
-    // 回调选择的链接
-    selectedLink(val) {
-      this.selectedLinks.zoneInfo = [];
-      delete val.selected;
-      delete val.intro;
-      delete val.mobileIntro;
-      this.selectedLinks.url = val;
-    },
-    // 回调的商品信息
-    selectedGoodsData(val) {
-      if (!val) return false;
-      let data = val.map((item) => {
-        delete item.selected;
-        delete item.intro;
-        delete item.mobileIntro;
-        return {
-          img: item.thumbnail,
-          title: item.goodsName,
-          type: this.selectedGoods.title,
-          ___index: this.selectedGoods.___index,
-          ...item,
-        };
-      });
-      this.res.options.list[0].listWay.push(...data);
-      // 清除已经绑定的分类
-      this.res.options.list[0].titleWay[this.goodsSelectedIndex].bindCategory =
-        "";
-      this.linkType = "";
-    },
-    // 绑定商品
-    bindGoodsId(val, index) {
-      this.selectedGoods = val;
-      this.goodsSelectedIndex = index;
-      this.liliDialogFlag(true);
-    },
-    // 绑定分类
-    bindGoodsCategory(index, key) {
-      this.pendingCategory = null;
-      this.enableSelectCategory = true;
-      this.goodsSelectedIndex = index;
-    },
-    // 点击抽屉
-    clickDrawer(item, index) {
-      this.$emit("handleDrawer", item);
-      this.styleFlag = false;
-      this.promotionsFlag = false;
-    },
-    // 打开图片选择器
-    liliDialogFlag(flag) {
-      this.$refs.liliDialog.clearGoodsSelected();
-      this.$refs.liliDialog.goodsFlag = flag;
-      this.$refs.liliDialog.flag = true;
-    },
-
-    changeTextAlign(val) {
-      this.res.options.list[0].textAlign = val;
-      this.textAlign = val;
-    },
-    // 点击链接赋值一个唯一值，并将当前选择的模块赋值
-    clickLink(val, index, oval) {
-      this.selectedLinks = val;
-      if (val.model === "hotzone") {
-        if (!val.zoneInfo) {
-          val.zoneInfo = [];
-        }
-        this.$refs.hotzone.open(val);
-      } else {
-        this.liliDialogFlag(false);
-      }
-    },
-    addZone(zoneInfo) {
-      this.selectedLinks.zoneInfo.push(zoneInfo);
-    },
-    changeZone(zoneInfo) {
-      this.selectedLinks.zoneInfo = zoneInfo;
-    },
-    //点击图片解析成base64
-    changeFile(item, index) {
-      const file = document.getElementById("files" + index).files[0];
-      if (file == void 0) return false;
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
-    },
-    //添加设置
-    addDecorate(type, data) {
-      if (type === "notice") {
-        if (data.options.list[0].direction == "vertical") {
-          this.res.options.list[0].title.push({
-            content: "",
-          });
-        } else {
-          this.$Message.error("仅纵向支持多添加");
-        }
-      } else {
-        let way = {
-          img: "https://picsum.photos/id/264/200/200",
-          title: "标题",
-          link: "",
-          url: "",
-          size: this.res.options.list[0] ? this.res.options.list[0].size : "",
-          model: "link",
-        };
-        this.res.options.list.push(way);
-      }
-    },
-    addHotPoint() {
-      let way = {
-        img: "https://picsum.photos/id/264/200/200",
-        text: "标题",
-        link: "",
-        url: "",
-      };
-      this.res.options.list[0].points.push(way);
-    },
-    // 图片选择器回显
-    callbackSelected(val) {
-      this.picModelFlag = false;
-      if (!val?.url) return;
-      this.selectedGoods.img = val.url;
-    },
-    // 点击选择图片
-    handleClickFile(item, index) {
-      this.selectedGoods = item;
-      this.picModelFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.ossManage) {
-          this.$refs.ossManage.selectImage = true;
-        }
-      });
-    },
-    removeNotice(index) {
-      this.$nextTick(() => {
-        this.res.options.list[0].title.splice(index, 1);
-      });
-    },
-    // 关闭
-    closeDecorate(index) {
-      this.$nextTick(() => {
-        this.res.options.list.splice(index, 1);
-      });
-    },
-  },
-};
+    } else {
+      Message.error("仅纵向支持多添加");
+    }
+  } else {
+    let way = {
+      img: "https://picsum.photos/id/264/200/200",
+      title: "标题",
+      link: "",
+      url: "",
+      size: props.res.options.list[0] ? props.res.options.list[0].size : "",
+      model: "link",
+    };
+    props.res.options.list.push(way);
+  }
+}
+function addHotPoint() {
+  let way = {
+    img: "https://picsum.photos/id/264/200/200",
+    text: "标题",
+    link: "",
+    url: "",
+  };
+  props.res.options.list[0].points.push(way);
+}
+// 图片选择器回显
+function callbackSelected(val) {
+  picModelFlag.value = false;
+  if (!val?.url) return;
+  selectedGoods.value.img = val.url;
+}
+// 点击选择图片
+function handleClickFile(item, index) {
+  selectedGoods.value = item;
+  picModelFlag.value = true;
+  nextTick(() => {
+    if (ossManageRef.value) {
+      ossManageRef.value.selectImage = true;
+    }
+  });
+}
+function removeNotice(index) {
+  nextTick(() => {
+    props.res.options.list[0].title.splice(index, 1);
+  });
+}
+// 关闭
+function closeDecorate(index) {
+  nextTick(() => {
+    props.res.options.list.splice(index, 1);
+  });
+}
 </script>
 <style scoped lang="scss">
 @import "./decorate.scss";
diff --git a/seller/src/views/shop/wap/index.vue b/seller/src/views/shop/wap/index.vue
index bf52b77e2..19a708300 100644
--- a/seller/src/views/shop/wap/index.vue
+++ b/seller/src/views/shop/wap/index.vue
@@ -74,162 +74,158 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue";
+import { useRoute } from "vue-router";
 import { CircleClose } from "@element-plus/icons-vue";
 import templates from "./template/index";
 import Draggable from "vuedraggable";
 import { modelData } from "./config";
 import decorate from "./decorate";
 import * as API_Other from "@/api/other";
-export default {
-  components: {
-    Draggable,
-    decorate,
-    CircleClose,
-  },
-  data() {
-    return {
-      templates, // 模板类型
-      modelData, // 装修模型
-      qrcode: "", // 二维码
-      selected: 0, // 已选下标
-      contentData: {
-        // 总数据
-        list: [],
-      },
-      decorateData: "", // 装修数据
-      decoratePromotionsData: "", // 装修数据
-    };
-  },
-  watch: {
-    contentData: {
-      handler(val) {
-        this.$store.state.styleStore = val;
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.init();
+import { getStore } from "@/libs/storage";
+import { Modal } from "@/utils/message";
+import { useAppStore } from "@/stores/app";
+
+const route = useRoute();
+const appStore = useAppStore();
+
+// templates: 模板类型，modelData: 装修模型，均为 import 常量，模板中直接使用
+const qrcode = ref(""); // 二维码
+const selected = ref(0); // 已选下标
+const contentData = ref({
+  // 总数据
+  list: [],
+});
+const decorateData = ref(""); // 装修数据
+const decoratePromotionsData = ref(""); // 装修数据
+
+watch(
+  contentData,
+  (val) => {
+    appStore.styleStore = val;
   },
+  { deep: true }
+);
 
-  methods: {
-    getModelKey(model) {
-      return model.type || model.name;
-    },
-    getContentItemKey(element) {
-      return element.key || element.model || element.type;
-    },
-    cloneModel(model) {
-      const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      const cloned = JSON.parse(JSON.stringify(model));
-      return {
-        ...cloned,
-        key,
-        model: cloned.type + "_" + key,
-      };
-    },
-    // 初始化数据
-    init() {
-      // 先读缓存，如果缓存有值则读缓存。
-      const cache = this.getStore('managerMobilePageCache')
-        if(cache){
-          this.$Modal.confirm({
-          title: '提示',
-          content: '获取到本地有缓存数据，是否使用缓存数据？',
-          okText: '使用',
-          cancelText: '取消',
-          onOk: () => {
-            const data = JSON.parse(cache);
-            this.contentData = data;
-          }
-        });
+onMounted(() => {
+  init();
+});
 
-        }
-      if (!this.$route.query.id) return false;
+function getModelKey(model) {
+  return model.type || model.name;
+}
+function getContentItemKey(element) {
+  return element.key || element.model || element.type;
+}
+function cloneModel(model) {
+  const key = Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  const cloned = JSON.parse(JSON.stringify(model));
+  return {
+    ...cloned,
+    key,
+    model: cloned.type + "_" + key,
+  };
+}
+// 初始化数据
+function init() {
+  // 先读缓存，如果缓存有值则读缓存。
+  const cache = getStore('managerMobilePageCache')
+    if(cache){
+      Modal.confirm({
+      title: '提示',
+      content: '获取到本地有缓存数据，是否使用缓存数据？',
+      okText: '使用',
+      cancelText: '取消',
+      onOk: () => {
+        const data = JSON.parse(cache);
+        contentData.value = data;
+      }
+    });
 
-      API_Other.getHomeData(this.$route.query.id).then((res) => {
-        this.contentData = JSON.parse(res.result.pageData);
+    }
+  if (!route.query.id) return false;
 
-        this.handleComponent(this.contentData.list[0], 0);
-      });
+  API_Other.getHomeData(route.query.id).then((res) => {
+    contentData.value = JSON.parse(res.result.pageData);
 
+    handleComponent(contentData.value.list[0], 0);
+  });
+
+}
+
+// 中间组件拖动，右侧数据绑定不变
+function handleContentlEnd(evt) {
+  const { newIndex } = evt;
+  handleComponent(contentData.value.list[newIndex], newIndex);
+}
+
+// 关闭楼层装修
+function closeComponent(index) {
+  nextTick(() => {
+    decorateData.value = "";
+
+    // 如果当前楼层不为一
+    if (contentData.value.list.length > 1) {
+      // 如果当前最底层 给下一层赋值
+
+      if (index - 1 == -1) {
+        handleComponent(contentData.value.list[index], index);
+      } else {
+        // 如果不是最底层给上一层赋值
+        handleComponent(contentData.value.list[index - 1], index - 1);
+      }
+      contentData.value.list.splice(index, 1);
+    } else {
+      contentData.value.list.splice(index, 1);
+    }
+  });
+}
+
+// 点击楼层装修
+function handleComponent(val, index) {
+  selected.value = index;
+  decorateData.value = val;
+}
+// 右侧栏回调
+function handleDrawer(val) {
+  const newIndex = selected.value;
+  decorateData.value = "";
+  contentData.value.list[newIndex] = {
+    ...val,
+    options: {
+      ...val.options,
     },
+    model: val.type,
+  };
+  contentData.value = JSON.parse(JSON.stringify(contentData.value));
+  decorateData.value = contentData.value.list[newIndex];
+}
 
-    // 中间组件拖动，右侧数据绑定不变
-    handleContentlEnd(evt) {
-      const { newIndex } = evt;
-      this.handleComponent(this.contentData.list[newIndex], newIndex);
+// 封装拖拽参数（原名 package，ESM 严格模式下为保留字，改名 packageModel）
+function packageModel(val, newIndex) {
+  contentData.value.list[newIndex] = "";
+  val = JSON.parse(JSON.stringify(val));
+  const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
+  contentData.value.list[newIndex] = {
+    ...val,
+    options: {
+      ...val.options,
     },
+    key,
+    model: val.model || val.type + "_" + key,
+  };
+}
+// 拖动
+function handleContentlAdd(evt) {
+  const { newIndex } = evt;
 
-    // 关闭楼层装修
-    closeComponent(index) {
-      this.$nextTick(() => {
-        this.decorateData = "";
-
-        // 如果当前楼层不为一
-        if (this.contentData.list.length > 1) {
-          // 如果当前最底层 给下一层赋值
-
-          if (index - 1 == -1) {
-            this.handleComponent(this.contentData.list[index], index);
-          } else {
-            // 如果不是最底层给上一层赋值
-            this.handleComponent(this.contentData.list[index - 1], index - 1);
-          }
-          this.contentData.list.splice(index, 1);
-        } else {
-          this.contentData.list.splice(index, 1);
-        }
-      });
-    },
-
-    // 点击楼层装修
-    handleComponent(val, index) {
-      this.selected = index;
-      this["decorateData"] = val;
-    },
-    // 右侧栏回调
-    handleDrawer(val) {
-      const newIndex = this.selected;
-      this.decorateData = "";
-      this.contentData.list[newIndex] = {
-        ...val,
-        options: {
-          ...val.options,
-        },
-        model: val.type,
-      };
-      this.contentData.list = JSON.parse(JSON.stringify(this.contentData.list));
-      this.decorateData = this.contentData.list[newIndex];
-    },
-
-    // 封装拖拽参数
-    package(val, newIndex) {
-      this.contentData.list[newIndex] = "";
-      val = JSON.parse(JSON.stringify(val));
-      const key = val.key || Date.now() + "_" + Math.ceil(Math.random() * 99999);
-      this.contentData.list[newIndex] = {
-        ...val,
-        options: {
-          ...val.options,
-        },
-        key,
-        model: val.model || val.type + "_" + key,
-      };
-    },
-    // 拖动
-    handleContentlAdd(evt) {
-      const { newIndex } = evt;
-
-      this.package(this.contentData.list[newIndex], newIndex);
-      this.handleComponent(this.contentData.list[newIndex], newIndex);
-    },
-    handleMove() {
-      return true;
-    },
-  },
-};
+  packageModel(contentData.value.list[newIndex], newIndex);
+  handleComponent(contentData.value.list[newIndex], newIndex);
+}
+function handleMove() {
+  return true;
+}
 </script>
 <style scoped lang="scss">
 @import "./style.scss";
diff --git a/seller/src/views/shop/wap/main.vue b/seller/src/views/shop/wap/main.vue
index 60ddf2eb6..c4ce42b1e 100644
--- a/seller/src/views/shop/wap/main.vue
+++ b/seller/src/views/shop/wap/main.vue
@@ -6,31 +6,25 @@
     <component :is="layout[name]"></component>
   </div>
 </template>
-<script>
-import layout from "./index";
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import layout from "./index"; // 装修模块
 import navbar from "./navbar";
-export default {
-  components: {
-    navbar
-  },
 
-  data() {
-    return {
-      layout, // 装修模块
-      name: "index", // 装修的页面
-      pagetype: "INDEX",
-    };
-  },
-  mounted() {
-    this.pagetype = this.$route.query.pagetype || "INDEX";
-  },
-  methods: {
-    selected(val) {
-      // 顶部栏点击切换
-      this.name = val;
-    }
-  }
-};
+const route = useRoute();
+
+const name = ref("index"); // 装修的页面
+const pagetype = ref("INDEX");
+
+onMounted(() => {
+  pagetype.value = route.query.pagetype || "INDEX";
+});
+
+function selected(val) {
+  // 顶部栏点击切换
+  name.value = val;
+}
 </script>
 <style scoped lang="scss">
 .box {
diff --git a/seller/src/views/shop/wap/navbar.vue b/seller/src/views/shop/wap/navbar.vue
index d0d5c6ac0..19cfeecdb 100644
--- a/seller/src/views/shop/wap/navbar.vue
+++ b/seller/src/views/shop/wap/navbar.vue
@@ -56,203 +56,208 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/stores/app";
+import { Message } from "@/utils/message";
+import { getStore, setStore } from "@/libs/storage";
 import * as API_Other from "@/api/other.js";
 
-export default {
-  props: ["pagetype"],
-  data() {
-    return {
-      hasCache:false, // 是否有缓存
-      progress: true, // 展示进度
-      num: 20, // 提交进度
-      saveDialog: false, // 加载状态
-      way: [
-        {
-          title: "首页",
-          name: "index",
-          selected: true,
-        },
-      ],
+const props = defineProps(["pagetype"]);
+const emit = defineEmits(["selected"]);
 
-      submitWay: {
-        // 表单信息
-        pageShow: this.$route.query.type || false,
-        name: this.$route.query.name || "模板名称",
-        pageClientType: "H5"
-      }
-    };
+const route = useRoute();
+const router = useRouter();
+const appStore = useAppStore();
+
+const hasCache = ref(false); // 是否有缓存
+const progress = ref(true); // 展示进度
+const num = ref(20); // 提交进度
+const saveDialog = ref(false); // 加载状态
+const way = ref([
+  {
+    title: "首页",
+    name: "index",
+    selected: true,
   },
-  watch: {
-    pagetype: {
-      handler(val) {
-        this.way.length = 0;
-        if (val == "INDEX") {
-          this.way.push({ title: "首页", name: "index", selected: true });
-        } else if (val == "SPECIAL") {
-          this.way.push({ title: "专题", name: "special", selected: true });
-        }
-      },
-      immediate: true,
-    },
-  },
-  mounted() {
-    this.hasCache = this.getStore('managerMobilePageCache') ? true : false;
-  },
-  methods: {
-    clearCache(){
-      this.setStore('managerMobilePageCache','');
-      this.$Message.success('清空成功')
-    },
-    // 将楼层装修的内容写入到本地缓存中
-    witeLocalStore(){
-      this.setStore('managerMobilePageCache', this.$store.state.styleStore)
-      this.$Message.success('写入成功')
-    },
+]);
 
-    clickBtn(val) {
-      this.way.forEach((item, index) => {
-        item.selected = false;
-      });
-      val.selected = true;
-      this.$emit("selected", val.name);
-    },
+const submitWay = reactive({
+  // 表单信息
+  pageShow: route.query.type || false,
+  name: route.query.name || "模板名称",
+  pageClientType: "H5"
+});
 
-    /**
-     * 加载，并保存模板
-     */
-    handleSpinShow() {
-      this.saveDialog = true;
-    },
-
-    // 填写是否发布，模板名称之后保存
-    save() {
-       if (
-        this.$store.state.styleStore == void 0 &&
-        this.$route.query.pagetype != 'SPECIAL'
-      ) {
-        this.$Message.error("请装修楼层");
-        return false;
-      }
-
-      this.submitWay?.pageShow === true
-        ? (this.submitWay.pageShow = "OPEN")
-        : (this.submitWay.pageShow = "CLOSE");
-
-      this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
-      this.submitWay.pageType = this.$route.query.pagetype || "INDEX";
-
-      this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
-    },
-
-    // 更新
-    updateHome() {
-      this.progress = false;
-      API_Other.updateHome(this.$route.query.id, {
-        pageData: JSON.stringify(this.$store.state.styleStore),
-        name: this.submitWay.name,
-        pageShow: this.submitWay.pageShow,
-        pageType: this.submitWay.pageType,
-        pageClientType: "H5",
-      })
-        .then(res => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("修改成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.saveDialog = false;
-            this.$Message.error("修改失败，请稍后重试");
-          }
-          console.log(res);
-        })
-        .catch(error => {});
-    },
-
-
-    // 更新
-    update(submitWay) {
-      console.log(this.$store.state.openStyleStore[0], "123123123");
-      if (this.$store.state.openStyleStore == void 0) {
-        this.$Message.error("请装修楼层!");
-        return false;
-      }
-      this.progress = false;
-
-      let id = this.$route.query.id;
-      const pagetype = this.$route.query.pagetype;
-      console.log(this.$store.state.openStyleStore, submitWay);
-      const pageType = {
-        INDEX: "INDEX",
-        ALERT: "OPEN_SCREEN_PAGE",
-        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
-      }[pagetype ? pagetype : "INDEX"];
-
-      if (pagetype) {
-        submitWay.pageData = JSON.stringify(
-          this.$store.state.openStyleStore[0]
-        );
-        submitWay.pageType = pageType;
-        id = this.$store.state.openStoreId;
-      }
-
-      API_Other.updateHome(id, submitWay)
-        .then((res) => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("修改成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.saveDialog = false;
-            this.$Message.error("修改失败，请稍后重试");
-          }
-          console.log(res);
-        })
-        .catch((error) => {});
-    },
-
-
-
-    // 返回查询数据页面
-    goBack() {
-      this.$router.go(-1);
-    },
-
-    // 保存
-    submit(submitWay) {
-      this.progress = false;
-      API_Other.setHomeSetup(submitWay)
-        .then(res => {
-          this.num = 50;
-          if (res.success) {
-            this.num = 80;
-            /**制作保存成功动画¸ */
-            setTimeout(() => {
-              this.saveDialog = false;
-              this.$Message.success("保存成功");
-              this.goBack();
-            }, 1000);
-          } else {
-            this.progress = true;
-            this.saveDialog = false;
-            this.$Message.error("保存失败，请稍后重试");
-          }
-          console.log(res);
-        })
-        .catch(error => {});
+watch(
+  () => props.pagetype,
+  (val) => {
+    way.value.length = 0;
+    if (val == "INDEX") {
+      way.value.push({ title: "首页", name: "index", selected: true });
+    } else if (val == "SPECIAL") {
+      way.value.push({ title: "专题", name: "special", selected: true });
     }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  hasCache.value = getStore('managerMobilePageCache') ? true : false;
+});
+
+function clearCache() {
+  setStore('managerMobilePageCache','');
+  Message.success('清空成功')
+}
+// 将楼层装修的内容写入到本地缓存中
+function witeLocalStore() {
+  setStore('managerMobilePageCache', appStore.styleStore)
+  Message.success('写入成功')
+}
+
+function clickBtn(val) {
+  way.value.forEach((item, index) => {
+    item.selected = false;
+  });
+  val.selected = true;
+  emit("selected", val.name);
+}
+
+/**
+ * 加载，并保存模板
+ */
+function handleSpinShow() {
+  saveDialog.value = true;
+}
+
+// 填写是否发布，模板名称之后保存
+function save() {
+   if (
+    appStore.styleStore == void 0 &&
+    route.query.pagetype != 'SPECIAL'
+  ) {
+    Message.error("请装修楼层");
+    return false;
   }
-};
+
+  submitWay?.pageShow === true
+    ? (submitWay.pageShow = "OPEN")
+    : (submitWay.pageShow = "CLOSE");
+
+  submitWay.pageData = JSON.stringify(appStore.styleStore);
+  submitWay.pageType = route.query.pagetype || "INDEX";
+
+  route.query.id ? updateHome() : submit(submitWay);
+}
+
+// 更新
+function updateHome() {
+  progress.value = false;
+  API_Other.updateHome(route.query.id, {
+    pageData: JSON.stringify(appStore.styleStore),
+    name: submitWay.name,
+    pageShow: submitWay.pageShow,
+    pageType: submitWay.pageType,
+    pageClientType: "H5",
+  })
+    .then(res => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("修改成功");
+          goBack();
+        }, 1000);
+      } else {
+        saveDialog.value = false;
+        Message.error("修改失败，请稍后重试");
+      }
+      console.log(res);
+    })
+    .catch(error => {});
+}
+
+
+// 更新
+function update(submitWay) {
+  console.log(appStore.openStyleStore[0], "123123123");
+  if (appStore.openStyleStore == void 0) {
+    Message.error("请装修楼层!");
+    return false;
+  }
+  progress.value = false;
+
+  let id = route.query.id;
+  const pagetype = route.query.pagetype;
+  console.log(appStore.openStyleStore, submitWay);
+  const pageType = {
+    INDEX: "INDEX",
+    ALERT: "OPEN_SCREEN_PAGE",
+    OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+  }[pagetype ? pagetype : "INDEX"];
+
+  if (pagetype) {
+    submitWay.pageData = JSON.stringify(
+      appStore.openStyleStore[0]
+    );
+    submitWay.pageType = pageType;
+    id = appStore.openStoreId;
+  }
+
+  API_Other.updateHome(id, submitWay)
+    .then((res) => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("修改成功");
+          goBack();
+        }, 1000);
+      } else {
+        saveDialog.value = false;
+        Message.error("修改失败，请稍后重试");
+      }
+      console.log(res);
+    })
+    .catch((error) => {});
+}
+
+
+
+// 返回查询数据页面
+function goBack() {
+  router.go(-1);
+}
+
+// 保存
+function submit(submitWay) {
+  progress.value = false;
+  API_Other.setHomeSetup(submitWay)
+    .then(res => {
+      num.value = 50;
+      if (res.success) {
+        num.value = 80;
+        /**制作保存成功动画¸ */
+        setTimeout(() => {
+          saveDialog.value = false;
+          Message.success("保存成功");
+          goBack();
+        }, 1000);
+      } else {
+        progress.value = true;
+        saveDialog.value = false;
+        Message.error("保存失败，请稍后重试");
+      }
+      console.log(res);
+    })
+    .catch(error => {});
+}
 </script>
 <style scoped lang="scss">
 .model-item {
diff --git a/seller/src/views/shop/wap/template/tpl_banner.vue b/seller/src/views/shop/wap/template/tpl_banner.vue
index 7ab182c4d..13434af05 100644
--- a/seller/src/views/shop/wap/template/tpl_banner.vue
+++ b/seller/src/views/shop/wap/template/tpl_banner.vue
@@ -9,11 +9,9 @@
     </el-carousel>
   </div>
 </template>
-<script>
-export default {
-  title: "导航栏",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "导航栏" });
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_flex_five.vue b/seller/src/views/shop/wap/template/tpl_flex_five.vue
index eba7ea0c0..52e88ad79 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_five.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_five.vue
@@ -12,9 +12,12 @@
 <script>
 export default {
   title: "五列单行图片模块",
-  props: ["res"],
 };
 </script>
+
+<script setup>
+defineProps(["res"]);
+</script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .layout {
diff --git a/seller/src/views/shop/wap/template/tpl_flex_four.vue b/seller/src/views/shop/wap/template/tpl_flex_four.vue
index e31dc7e2d..36a980c34 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_four.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_four.vue
@@ -8,12 +8,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "四列单行图片模块",
-  props: ["res"],
+});
 
-};
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_flex_one.vue b/seller/src/views/shop/wap/template/tpl_flex_one.vue
index a53fcc417..e82a5f754 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_one.vue
@@ -5,10 +5,8 @@
         </div>
     </div>
 </template>
-<script>
-export default {
-    props: ['res']
-}
+<script setup>
+defineProps(['res']);
 </script>
 <style lang="scss" scoped>
 @import './tpl.scss';
diff --git a/seller/src/views/shop/wap/template/tpl_flex_three.vue b/seller/src/views/shop/wap/template/tpl_flex_three.vue
index f6e8744ff..c2ff11e8c 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_three.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_three.vue
@@ -7,11 +7,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "三列单行图片模块",
-  props: ["res"],
-};
+});
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_flex_two.vue b/seller/src/views/shop/wap/template/tpl_flex_two.vue
index 5cb0ae6b5..a1a2cdc1f 100644
--- a/seller/src/views/shop/wap/template/tpl_flex_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_two.vue
@@ -11,11 +11,14 @@
   </div>
 </template>
 <script>
+// 自定义选项（组件在 <component :is> 场景下按 title 展示名称），需保留在普通 script 块
 export default {
   title: "两张横图",
-  props: ["res"],
 };
 </script>
+<script setup>
+defineProps(["res"]);
+</script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .flex-two {
diff --git a/seller/src/views/shop/wap/template/tpl_goods.vue b/seller/src/views/shop/wap/template/tpl_goods.vue
index 1fb20bef1..aadaa4766 100644
--- a/seller/src/views/shop/wap/template/tpl_goods.vue
+++ b/seller/src/views/shop/wap/template/tpl_goods.vue
@@ -39,59 +39,53 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
+import { computed, reactive, watch } from "vue";
 import { CircleClose } from "@element-plus/icons-vue";
-export default {
-  components: { CircleClose },
-  data() {
-    return {
-      selected: {
-        index: 0,
-        val: "",
-      },
-    };
+
+const props = defineProps(["res"]);
+
+const selected = reactive({
+  index: 0,
+  val: "",
+});
+
+const goodsBlock = computed(() => props.res?.list?.[0] || null);
+
+watch(
+  goodsBlock,
+  (val) => {
+    if (!val) {
+      return;
+    }
+    const firstGoods = (val.listWay || []).find(Boolean);
+    if (firstGoods) {
+      selected.val = firstGoods.type;
+    } else if (val.titleWay?.[0]?.title) {
+      selected.val = val.titleWay[0].title;
+    }
   },
-  props: ["res"],
-  computed: {
-    goodsBlock() {
-      return this.res?.list?.[0] || null;
-    },
-  },
-  watch: {
-    goodsBlock: {
-      handler(val) {
-        if (!val) {
-          return;
-        }
-        const firstGoods = (val.listWay || []).find(Boolean);
-        if (firstGoods) {
-          this.selected.val = firstGoods.type;
-        } else if (val.titleWay?.[0]?.title) {
-          this.selected.val = val.titleWay[0].title;
-        }
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    isGoodsVisible(item) {
-      if (!item) {
-        return false;
-      }
-      if (item.___index != undefined) {
-        return this.selected.index == item.___index;
-      }
-      return this.selected.val == item.type;
-    },
-    closeGoods(val, index) {
-      this.goodsBlock.listWay.splice(index, 1);
-    },
-    handleClickTitle(val, index) {
-      this.selected.index = index;
-      this.selected.val = val.title;
-    },
-  },
-};
+  { immediate: true }
+);
+
+function isGoodsVisible(item) {
+  if (!item) {
+    return false;
+  }
+  if (item.___index != undefined) {
+    return selected.index == item.___index;
+  }
+  return selected.val == item.type;
+}
+
+function closeGoods(val, index) {
+  goodsBlock.value.listWay.splice(index, 1);
+}
+
+function handleClickTitle(val, index) {
+  selected.index = index;
+  selected.val = val.title;
+}
 </script>
 <style lang="scss" scoped>
 .layout {
diff --git a/seller/src/views/shop/wap/template/tpl_group.vue b/seller/src/views/shop/wap/template/tpl_group.vue
index c3abd5917..b25f24294 100644
--- a/seller/src/views/shop/wap/template/tpl_group.vue
+++ b/seller/src/views/shop/wap/template/tpl_group.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_integral.vue b/seller/src/views/shop/wap/template/tpl_integral.vue
index 53eb17a6b..0979feae1 100644
--- a/seller/src/views/shop/wap/template/tpl_integral.vue
+++ b/seller/src/views/shop/wap/template/tpl_integral.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_join_group.vue b/seller/src/views/shop/wap/template/tpl_join_group.vue
index 3b60a09f4..2c7bdf408 100644
--- a/seller/src/views/shop/wap/template/tpl_join_group.vue
+++ b/seller/src/views/shop/wap/template/tpl_join_group.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue b/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
index 07ee3c05b..c129cdd9f 100644
--- a/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
@@ -15,11 +15,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "左一右二",
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue b/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
index a7adb4088..249429658 100644
--- a/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
@@ -15,11 +15,8 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "左二右一",
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_menu.vue b/seller/src/views/shop/wap/template/tpl_menu.vue
index 1e942c32e..fd58704bb 100644
--- a/seller/src/views/shop/wap/template/tpl_menu.vue
+++ b/seller/src/views/shop/wap/template/tpl_menu.vue
@@ -10,10 +10,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"],
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_search.vue b/seller/src/views/shop/wap/template/tpl_search.vue
index 5be127fa3..db9945727 100644
--- a/seller/src/views/shop/wap/template/tpl_search.vue
+++ b/seller/src/views/shop/wap/template/tpl_search.vue
@@ -5,12 +5,9 @@
         </div>
     </div>
 </template>
-<script>
+<script setup>
 import { Search } from "@element-plus/icons-vue";
-export default {
-    components: { Search },
-    props: ['res']
-}
+defineProps(['res']);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_spike.vue b/seller/src/views/shop/wap/template/tpl_spike.vue
index c3abd5917..b25f24294 100644
--- a/seller/src/views/shop/wap/template/tpl_spike.vue
+++ b/seller/src/views/shop/wap/template/tpl_spike.vue
@@ -27,10 +27,8 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  props: ["res"]
-};
+<script setup>
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_text_picture.vue b/seller/src/views/shop/wap/template/tpl_text_picture.vue
index add2784f1..4d83cba25 100644
--- a/seller/src/views/shop/wap/template/tpl_text_picture.vue
+++ b/seller/src/views/shop/wap/template/tpl_text_picture.vue
@@ -33,11 +33,14 @@
 </template>
 
 <script>
+// 自定义选项（组件在 <component :is> 场景下按 title 展示名称），需保留在普通 script 块
 export default {
   title: "文字图片模板",
-  props: ["res"]
 };
 </script>
+<script setup>
+defineProps(["res"]);
+</script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .layout {
diff --git a/seller/src/views/shop/wap/template/tpl_title.vue b/seller/src/views/shop/wap/template/tpl_title.vue
index 7286f2ce4..fe184f6a8 100644
--- a/seller/src/views/shop/wap/template/tpl_title.vue
+++ b/seller/src/views/shop/wap/template/tpl_title.vue
@@ -25,11 +25,12 @@
   </div>
 </template>
 
-<script>
-export default {
+<script setup>
+defineOptions({
   title: "标题栏",
-  props: ["res"],
-};
+});
+
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue b/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
index 3eae5ffcd..10e6cb1dd 100644
--- a/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
@@ -15,11 +15,9 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "上一下二",
-  props: ["res"]
-};
+<script setup>
+defineOptions({ title: "上一下二" });
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue b/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
index e87321621..164b190d0 100644
--- a/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
@@ -14,11 +14,9 @@
   </div>
 </template>
 
-<script>
-export default {
-  title: "上二下一",
-  props: ["res"],
-};
+<script setup>
+defineOptions({ title: "上二下一" });
+defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
diff --git a/seller/src/views/shop/wap/template/tpl_view_list.vue b/seller/src/views/shop/wap/template/tpl_view_list.vue
index acd4568ef..a0dc2eb16 100644
--- a/seller/src/views/shop/wap/template/tpl_view_list.vue
+++ b/seller/src/views/shop/wap/template/tpl_view_list.vue
@@ -1,9 +1,7 @@
 <template>
     <div class="layout">请选择风格</div>
 </template>
-<script>
-export default {
-}
+<script setup>
 </script>
 <style scoped lang="scss">
 @import './tpl.scss';
diff --git a/seller/src/views/shop/wap/wapList.vue b/seller/src/views/shop/wap/wapList.vue
index c9828fbf5..9782f5659 100644
--- a/seller/src/views/shop/wap/wapList.vue
+++ b/seller/src/views/shop/wap/wapList.vue
@@ -56,136 +56,143 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
+import { Message, Modal } from "@/utils/message";
 import * as API_Other from "@/api/other.js";
-export default {
-  data() {
-    return {
-      loading: false,
-      pageTypes: [
-        { type: "INDEX", title: "首页" },
-        { type: "SPECIAL", title: "专题" },
-      ],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        sort: "createTime",
-        order: "desc",
-        pageType: "INDEX",
-        pageClientType: "H5",
-      },
-      total: 0,
-      list: [],
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    handleTabChange(val) {
-      if (val == "ALERT") {
-        this.$router.push({
-          path: "/floorList/main",
-          query: { pagetype: val },
-        });
-        return;
-      }
-      if (val == "OPEN_SCREEN_ANIMATION") {
-        this.$router.push({
-          path: "/floorList/main",
-          query: { pagetype: val },
-        });
-        return;
-      }
-      this.params.pageNumber = 1;
-      this.params.pageType = val;
-      this.init();
-    },
 
-    changePageNum(val) {
-      this.params.pageNumber = val;
-      this.init();
-    },
-    beforeRelease(row) {
-      if (row.pageShow) {
-        this.$Message.warning(
-          this.total === 1
-            ? "当前为唯一页面，无法关闭"
-            : "请直接开启其他页面，当前页面会自动关闭"
-        );
-        return false;
+const router = useRouter();
+
+const loading = ref(false);
+const pageTypes = ref([
+  { type: "INDEX", title: "首页" },
+  { type: "SPECIAL", title: "专题" },
+]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  sort: "createTime",
+  order: "desc",
+  pageType: "INDEX",
+  pageClientType: "H5",
+});
+const total = ref(0);
+const list = ref([]);
+
+onMounted(() => {
+  init();
+});
+
+function handleTabChange(val) {
+  if (val == "ALERT") {
+    router.push({
+      path: "/floorList/main",
+      query: { pagetype: val },
+    });
+    return;
+  }
+  if (val == "OPEN_SCREEN_ANIMATION") {
+    router.push({
+      path: "/floorList/main",
+      query: { pagetype: val },
+    });
+    return;
+  }
+  params.pageNumber = 1;
+  params.pageType = val;
+  init();
+}
+
+function changePageNum(val) {
+  params.pageNumber = val;
+  init();
+}
+
+function beforeRelease(row) {
+  if (row.pageShow) {
+    Message.warning(
+      total.value === 1
+        ? "当前为唯一页面，无法关闭"
+        : "请直接开启其他页面，当前页面会自动关闭"
+    );
+    return false;
+  }
+  return new Promise((resolve, reject) => {
+    API_Other.releasePageHome(row.id).then((res) => {
+      if (res && res.success) {
+        Message.success("发布成功");
+        resolve(true);
+        init();
+      } else {
+        reject(new Error("release failed"));
       }
-      return new Promise((resolve, reject) => {
-        API_Other.releasePageHome(row.id).then((res) => {
-          if (res && res.success) {
-            this.$Message.success("发布成功");
-            resolve(true);
-            this.init();
-          } else {
-            reject(new Error("release failed"));
-          }
-        }).catch(() => {
-          reject(new Error("release failed"));
-        });
-      });
+    }).catch(() => {
+      reject(new Error("release failed"));
+    });
+  });
+}
+
+function init() {
+  loading.value = true;
+  API_Other.getHomeList(params).then((res) => {
+    loading.value = false;
+    if (!res.result) return false;
+    res.result.records.forEach((item) => {
+      if (item.pageShow == "OPEN") {
+        item.pageShow = true;
+      } else {
+        item.pageShow = false;
+      }
+    });
+    list.value = res.result.records;
+    total.value = res.result.total;
+  });
+}
+
+function handleEdit(val) {
+  router.push({
+    path: "/floorList/main",
+    query: {
+      id: val.id,
+      name: val.name,
+      type: val.pageShow,
+      pagetype: params.pageType,
     },
-    init() {
-      this.loading = true;
-      API_Other.getHomeList(this.params).then((res) => {
-        this.loading = false;
-        if (!res.result) return false;
-        res.result.records.forEach((item) => {
-          if (item.pageShow == "OPEN") {
-            item.pageShow = true;
-          } else {
-            item.pageShow = false;
-          }
-        });
-        this.list = res.result.records;
-        this.total = res.result.total;
-      });
-    },
-    handleEdit(val) {
-      this.$router.push({
-        path: "/floorList/main",
-        query: {
-          id: val.id,
-          name: val.name,
-          type: val.pageShow,
-          pagetype: this.params.pageType,
-        },
-      });
-    },
-    handleAdd() {
-      this.$router.push({
-        path: "/floorList/main",
-        query: { pagetype: this.params.pageType },
-      });
-    },
-    changePageSize(v) {
-      this.params.pageNumber = 1;
-      this.params.pageSize = v;
-      this.init();
-    },
-    confirmDel(row) {
-      this.$Modal.confirm({
-        title: "提示",
-        content: "删除此模板？",
-        onOk: () => this.handleDel(row),
-      });
-    },
-    handleDel(val) {
-      this.loading = true;
-      API_Other.removePageHome(val.id).then((res) => {
-        this.loading = false;
-        if (res.result) {
-          this.init();
-          this.$Message.success("删除成功");
-        }
-      });
-    },
-  },
-};
+  });
+}
+
+function handleAdd() {
+  router.push({
+    path: "/floorList/main",
+    query: { pagetype: params.pageType },
+  });
+}
+
+function changePageSize(v) {
+  params.pageNumber = 1;
+  params.pageSize = v;
+  init();
+}
+
+function confirmDel(row) {
+  Modal.confirm({
+    title: "提示",
+    content: "删除此模板？",
+    onOk: () => handleDel(row),
+  });
+}
+
+function handleDel(val) {
+  loading.value = true;
+  API_Other.removePageHome(val.id).then((res) => {
+    loading.value = false;
+    if (res.result) {
+      init();
+      Message.success("删除成功");
+    }
+  });
+}
 </script>
 <style scoped lang="scss">
 .page-type-tabs {
diff --git a/seller/src/views/statistics/data-report.vue b/seller/src/views/statistics/data-report.vue
index 7b069d204..039790bff 100644
--- a/seller/src/views/statistics/data-report.vue
+++ b/seller/src/views/statistics/data-report.vue
@@ -26,7 +26,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 import {
   ArrowRight,
   DataAnalysis,
@@ -35,6 +37,10 @@ import {
   TrendCharts,
 } from "@element-plus/icons-vue";
 
+defineOptions({ name: "seller-data-report" });
+
+const router = useRouter();
+
 const REPORT_MODULES = [
   {
     name: "storePerformanceReport",
@@ -62,26 +68,11 @@ const REPORT_MODULES = [
   },
 ];
 
-export default {
-  name: "seller-data-report",
-  components: {
-    ArrowRight,
-    TrendCharts,
-    DataAnalysis,
-    Document,
-    Goods,
-  },
-  data() {
-    return {
-      modules: REPORT_MODULES,
-    };
-  },
-  methods: {
-    goReport(name) {
-      this.$router.push({ name });
-    },
-  },
-};
+const modules = ref(REPORT_MODULES);
+
+function goReport(name) {
+  router.push({ name });
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/seller/src/views/statistics/goods-comparison.vue b/seller/src/views/statistics/goods-comparison.vue
index cd532af91..63e9c7814 100644
--- a/seller/src/views/statistics/goods-comparison.vue
+++ b/seller/src/views/statistics/goods-comparison.vue
@@ -131,10 +131,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { getBrandListData, getCategoryTree } from "@/api/goods";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
+
+defineOptions({ name: "seller-goods-comparison-report" });
 
 const CLIENT_TYPE_OPTIONS = [
   { label: "移动端", value: "H5" },
@@ -144,121 +148,114 @@ const CLIENT_TYPE_OPTIONS = [
   { label: "未知", value: "UNKNOWN" },
 ];
 
-export default {
-  name: "seller-goods-comparison-report",
-  data() {
-    return {
-      loading: false,
-      dateType: "DAY",
-      queryDate: "",
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        categoryId: "",
-        brandId: "",
-        clientType: "",
-        keyword: "",
-        sortType: "PRICE",
-      },
-      categoryList: [],
-      categoryProps: { value: "id", label: "name", children: "children", checkStrictly: true, emitPath: false },
-      brandList: [],
-      clientTypeOptions: CLIENT_TYPE_OPTIONS,
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadOptions();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const today = new Date();
-      this.queryDate = this.formatDay(today);
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDay(date) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return `${y}-${m}-${d}`;
-    },
-    onDateTypeChange() {
-      if (this.dateType === "DAY" && !this.queryDate) {
-        this.queryDate = this.formatDay(new Date());
-      }
-    },
-    loadOptions() {
-      getCategoryTree()
-        .then((res) => {
-          if (res.success) this.categoryList = res.result || [];
-        })
-        .catch(() => {});
-      getBrandListData()
-        .then((res) => {
-          if (res.success) this.brandList = res.result || [];
-        })
-        .catch(() => {});
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    buildParams() {
-      const p = { ...this.params, reportDateType: this.dateType };
-      if (this.dateType === "DAY") {
-        if (this.queryDate) {
-          p.queryDate = `${this.queryDate} 00:00:00`;
-        }
-      } else if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getGoodsComparisonReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportGoodsComparisonReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "商品同比环比报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-    rateClass(rate) {
-      if (!rate) return "";
-      if (rate.startsWith("+")) return "trend-up";
-      if (rate.startsWith("-") && rate !== "0%") return "trend-down";
-      return "";
-    },
-  },
-};
+const loading = ref(false);
+const dateType = ref("DAY");
+const queryDate = ref("");
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  categoryId: "",
+  brandId: "",
+  clientType: "",
+  keyword: "",
+  sortType: "PRICE",
+});
+const categoryList = ref([]);
+const categoryProps = ref({ value: "id", label: "name", children: "children", checkStrictly: true, emitPath: false });
+const brandList = ref([]);
+const clientTypeOptions = ref(CLIENT_TYPE_OPTIONS);
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  initDefaultRange();
+  loadOptions();
+  loadData();
+});
+
+function initDefaultRange() {
+  const today = new Date();
+  queryDate.value = formatDay(today);
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDay(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+function onDateTypeChange() {
+  if (dateType.value === "DAY" && !queryDate.value) {
+    queryDate.value = formatDay(new Date());
+  }
+}
+function loadOptions() {
+  getCategoryTree()
+    .then((res) => {
+      if (res.success) categoryList.value = res.result || [];
+    })
+    .catch(() => {});
+  getBrandListData()
+    .then((res) => {
+      if (res.success) brandList.value = res.result || [];
+    })
+    .catch(() => {});
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function buildParams() {
+  const p = { ...params, reportDateType: dateType.value };
+  if (dateType.value === "DAY") {
+    if (queryDate.value) {
+      p.queryDate = `${queryDate.value} 00:00:00`;
+    }
+  } else if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getGoodsComparisonReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportGoodsComparisonReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "商品同比环比报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
+function rateClass(rate) {
+  if (!rate) return "";
+  if (rate.startsWith("+")) return "trend-up";
+  if (rate.startsWith("-") && rate !== "0%") return "trend-down";
+  return "";
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/statistics/goods-sales-summary.vue b/seller/src/views/statistics/goods-sales-summary.vue
index ca43974bb..a647d9d36 100644
--- a/seller/src/views/statistics/goods-sales-summary.vue
+++ b/seller/src/views/statistics/goods-sales-summary.vue
@@ -75,73 +75,77 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { downloadBlob } from "@/utils/downloadBlob";
+import * as filters from "@/utils/filters";
 
-export default {
-  name: "seller-goods-sales-summary-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: { pageNumber: 1, pageSize: 20, keyword: "", sortType: "PRICE" },
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getGoodsSalesSummaryReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportGoodsSalesSummaryReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "商品销售汇总报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-  },
-};
+defineOptions({ name: "seller-goods-sales-summary-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({ pageNumber: 1, pageSize: 20, keyword: "", sortType: "PRICE" });
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  initDefaultRange();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+
+function loadData() {
+  loading.value = true;
+  API_Statistics.getGoodsSalesSummaryReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+
+function handleExport() {
+  API_Statistics.exportGoodsSalesSummaryReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "商品销售汇总报表.xlsx");
+  });
+}
+
+function formatMoney(val) {
+  return filters.unitPrice(val, "￥");
+}
+
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
 </script>
diff --git a/seller/src/views/statistics/goods.vue b/seller/src/views/statistics/goods.vue
index f6ead9f3b..fa23698d5 100644
--- a/seller/src/views/statistics/goods.vue
+++ b/seller/src/views/statistics/goods.vue
@@ -33,49 +33,43 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
 import * as API_Goods from "@/api/goods";
 import affixTime from "@/views/lili-components/affix-time";
 
-export default {
-  components: {
-    affixTime,
-  },
-  data() {
-    return {
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-        shopId: "",
-        type: "NUM",
-      },
-      data: [],
-    };
-  },
-  methods: {
-    handleClickType(tab) {
-      this.params.type = tab.paneName;
-      this.getData();
-    },
-    clickBreadcrumb(item) {
-      const type = this.params.type;
-      this.params = { ...item };
-      this.params.type = type;
-      this.getData();
-    },
-    getData() {
-      Promise.all([API_Goods.goodsStatistics(this.params)]).then((res) => {
-        if (res[0].result) {
-          this.data = res[0].result;
-        }
-      });
-    },
-  },
-  mounted() {
-    this.getData();
-  },
-};
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+  shopId: "",
+  type: "NUM",
+});
+const data = ref([]);
+
+onMounted(() => {
+  getData();
+});
+
+function handleClickType(tab) {
+  params.value.type = tab.paneName;
+  getData();
+}
+
+function clickBreadcrumb(item) {
+  const type = params.value.type;
+  params.value = { ...item };
+  params.value.type = type;
+  getData();
+}
+
+function getData() {
+  Promise.all([API_Goods.goodsStatistics(params.value)]).then((res) => {
+    if (res[0].result) {
+      data.value = res[0].result;
+    }
+  });
+}
 </script>
 <style scoped lang="scss">
 .page-col {
diff --git a/seller/src/views/statistics/order.vue b/seller/src/views/statistics/order.vue
index c2a517357..63494dd5d 100644
--- a/seller/src/views/statistics/order.vue
+++ b/seller/src/views/statistics/order.vue
@@ -247,267 +247,261 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import * as API_Goods from "@/api/goods";
 import orderRow from "./order/orderDetail";
 import refundRow from "./order/refundOrder";
 import affixTime from "@/views/lili-components/affix-time";
 
-export default {
-  components: { orderRow, refundRow, affixTime },
+const orderOrRefund = ref("order"); // order | refund
+const total = ref(0); // 总数
+// 订单状态
+const orderStatusList = ref({
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
 
-  data() {
-    return {
-      orderOrRefund: "order", // order | refund
-      total: 0, // 总数
-      // 订单状态
-      orderStatusList: {
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
+const serviceTypeList = ref({
+  // 服务类型
+  CANCEL: "取消",
+  RETURN_GOODS: "退货",
+  EXCHANGE_GOODS: "换货",
+  RETURN_MONEY: "退款",
+});
+const serviceStatusList = ref({
+  // 服务状态
+  APPLY: "申请售后",
+  PASS: "通过售后",
+  REFUSE: "拒绝售后",
+  BUYER_RETURN: "买家退货，待卖家收货",
+  SELLER_RE_DELIVERY: "商家换货/补发",
+  SELLER_CONFIRM: "卖家确认收货",
+  SELLER_TERMINATION: "卖家终止售后",
+  BUYER_CONFIRM: "买家确认收货",
+  BUYER_CANCEL: "买家取消售后",
+  WAIT_REFUND: "等待平台退款",
+  COMPLETE: "完成售后",
+});
+//
 
-      serviceTypeList: {
-        // 服务类型
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceStatusList: {
-        // 服务状态
-        APPLY: "申请售后",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_RE_DELIVERY: "商家换货/补发",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CONFIRM: "买家确认收货",
-        BUYER_CANCEL: "买家取消售后",
-        WAIT_REFUND: "等待平台退款",
-        COMPLETE: "完成售后",
-      },
-      //
+const data = ref([]);
 
-      data: [],
-
-      // 交易概况
-      transactionList: [
-        {
-          label: "转换",
-          value: "",
-        },
-        {
-          label: "订单",
-          value: "",
-        },
-        {
-          label: "退单",
-          value: "",
-        },
-      ],
-
-      chartList: [], // 绘制订单图表数据
-      orderChart: "", //订单图表
-
-      overViewList: {}, // 绘制订单统计概览
-      overViewChart: "", //订单订单统计概览图标
-
-      // 时间
-      dateList: [
-        {
-          title: "今天",
-          selected: false,
-          value: "TODAY",
-        },
-        {
-          title: "昨天",
-          selected: false,
-          value: "YESTERDAY",
-        },
-        {
-          title: "过去7天",
-          selected: true,
-          value: "LAST_SEVEN",
-        },
-        {
-          title: "过去30天",
-          selected: false,
-          value: "LAST_THIRTY",
-        },
-      ],
-      // 订单传参
-      orderParams: {
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        year: "",
-        shopId: "",
-        memberId: "",
-      },
-      // 订单概念
-      overViewParams: {
-        month: "",
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: "",
-        year: "",
-      },
-      defaultParams: {
-        month: "",
-        searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
-        storeId: "",
-        year: "",
-      },
-      // 退单订单
-      refundParams: {
-        pageNumber: 1,
-        pageSize: 20,
-        searchType: "LAST_SEVEN",
-        storeId: "",
-        year: "",
-      },
-      showRecords:false,
-
-      //
-      //
-    };
+// 交易概况
+const transactionList = ref([
+  {
+    label: "转换",
+    value: "",
   },
-  watch: {
-    refundParams: {
-      handler(val) {
-        this.getOrderList();
-      },
-      deep: true,
-      immediate: true,
-    },
-    orderOrRefund() {
-      this.showRecords = false;
-      this.refundParams.pageNumber = 1;
-      this.getOrderList();
-    },
-    orderParams: {
-      handler() {
-        this.initOrderChartList();
-      },
-      deep: true,
-    },
-    overViewParams: {
-      handler() {
-        this.initOrderOverViewList();
-      },
-      deep: true,
-    },
+  {
+    label: "订单",
+    value: "",
   },
-  methods: {
-    // 订单图
-    initOrderChart() {
-      // 默认已经加载 legend-filter 交互
-      let data = this.chartList;
+  {
+    label: "退单",
+    value: "",
+  },
+]);
 
-      data.forEach((item) => {
-        item.createTime = item.createTime.split(" ")[0];
-        item.title = "交易额";
+const chartList = ref([]); // 绘制订单图表数据
+// G2 图表实例（原 data 中初始化为 ""）
+const orderChart = ref(""); //订单图表
+
+const overViewList = ref({}); // 绘制订单统计概览
+const overViewChart = ref(""); //订单订单统计概览图标
+
+// 时间
+const dateList = ref([
+  {
+    title: "今天",
+    selected: false,
+    value: "TODAY",
+  },
+  {
+    title: "昨天",
+    selected: false,
+    value: "YESTERDAY",
+  },
+  {
+    title: "过去7天",
+    selected: true,
+    value: "LAST_SEVEN",
+  },
+  {
+    title: "过去30天",
+    selected: false,
+    value: "LAST_THIRTY",
+  },
+]);
+// 订单传参
+const orderParams = ref({
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  year: "",
+  shopId: "",
+  memberId: "",
+});
+// 订单概念
+const overViewParams = ref({
+  month: "",
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  storeId: "",
+  year: "",
+});
+const defaultParams = ref({
+  month: "",
+  searchType: "LAST_SEVEN", // TODAY ,  YESTERDAY , LAST_SEVEN , LAST_THIRTY
+  storeId: "",
+  year: "",
+});
+// 退单订单
+const refundParams = ref({
+  pageNumber: 1,
+  pageSize: 20,
+  searchType: "LAST_SEVEN",
+  storeId: "",
+  year: "",
+});
+const showRecords = ref(false);
+
+//
+//
+
+watch(
+  refundParams,
+  (val) => {
+    getOrderList();
+  },
+  { deep: true, immediate: true }
+);
+watch(orderOrRefund, () => {
+  showRecords.value = false;
+  refundParams.value.pageNumber = 1;
+  getOrderList();
+});
+watch(
+  orderParams,
+  () => {
+    initOrderChartList();
+  },
+  { deep: true }
+);
+watch(
+  overViewParams,
+  () => {
+    initOrderOverViewList();
+  },
+  { deep: true }
+);
+
+// 订单图
+function initOrderChart() {
+  // 默认已经加载 legend-filter 交互
+  let data = chartList.value;
+
+  data.forEach((item) => {
+    item.createTime = item.createTime.split(" ")[0];
+    item.title = "交易额";
+  });
+  orderChart.value.data(data);
+
+  orderChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
+
+  orderChart.value
+    .line()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("smooth");
+
+  orderChart.value
+    .point()
+    .position("createTime*price")
+    .label("price")
+    .color("title")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  orderChart.value.area().position("createTime*price").color("title").shape("smooth");
+
+  orderChart.value.render();
+}
+
+function clickBreadcrumb(item, index) {
+  let callback = JSON.parse(JSON.stringify(item));
+  console.log("callback", callback);
+  orderParams.value = callback;
+
+  overViewParams.value = callback;
+  refundParams.value = callback;
+  refundParams.value.pageNumber = 1;
+  refundParams.value.pageSize = 20;
+}
+
+// 实例化订单概览
+async function initOrderOverViewList() {
+  const res = await API_Goods.getOrderOverView(overViewParams.value);
+  if (res.success) {
+    overViewList.value = res.result;
+  }
+}
+// 实例化订单图表
+async function initOrderChartList(name) {
+  orderChart.value ? orderChart.value.clear() : "";
+  const res = await API_Goods.getOrderChart(orderParams.value);
+  if (res.success) {
+    chartList.value = res.result;
+
+    if (!orderChart.value) {
+      const { Chart } = await import("@antv/g2");
+      orderChart.value = new Chart({
+        container: "orderChart",
+        autoFit: true,
+        height: 500,
+        padding: [70, 70, 70, 70],
       });
-      this.orderChart.data(data);
+    }
 
-      this.orderChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
+    initOrderChart(); //订单表
+  }
+}
+// 统计相关订单统计
+async function getOrderList() {
+  let res;
+  if (orderOrRefund.value === "order") {
+    // 订单
+    res = await API_Goods.statisticsOrderList(refundParams.value);
+  } else {
+    // 退单
+    res = await API_Goods.statisticsOrderRefundList(refundParams.value);
+  }
+  if (res.success) {
+    showRecords.value = true;
+    data.value = res.result.records;
+    total.value = res.result.total;
+  }
+}
 
-      this.orderChart
-        .line()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("smooth");
+// 实例化初始值
+function initBaseParams() {
+  let data = new Date();
+  getOrderList();
+  orderParams.value.year = data.getFullYear();
+  overViewParams.value.year = data.getFullYear();
+}
 
-      this.orderChart
-        .point()
-        .position("createTime*price")
-        .label("price")
-        .color("title")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-         this.orderChart.area().position("createTime*price").color("title").shape("smooth");
-
-      this.orderChart.render();
-    },
-
-    clickBreadcrumb(item, index) {
-      let callback = JSON.parse(JSON.stringify(item));
-      console.log("callback",callback)
-      this.orderParams = callback;
-
-      this.overViewParams = callback;
-      this.refundParams = callback;
-      this.refundParams.pageNumber = 1
-      this.refundParams.pageSize = 20
-    },
-
-    // 实例化订单概览
-    async initOrderOverViewList() {
-      const res = await API_Goods.getOrderOverView(this.overViewParams);
-      if (res.success) {
-        this.overViewList = res.result;
-      }
-    },
-    // 实例化订单图表
-    async initOrderChartList(name) {
-      this.orderChart ? this.orderChart.clear() : ''
-      const res = await API_Goods.getOrderChart(this.orderParams);
-      if (res.success) {
-        this.chartList = res.result;
-
-        if (!this.orderChart) {
-          const { Chart } = await import("@antv/g2");
-          this.orderChart = new Chart({
-            container: "orderChart",
-            autoFit: true,
-            height: 500,
-            padding: [70, 70, 70, 70],
-          });
-        }
-
-        this.initOrderChart(); //订单表
-      }
-    },
-    // 统计相关订单统计
-    async getOrderList() {
-      let res;
-      if (this.orderOrRefund === "order") {
-        // 订单
-        res = await API_Goods.statisticsOrderList(this.refundParams);
-      } else {
-        // 退单
-        res = await API_Goods.statisticsOrderRefundList(this.refundParams);
-      }
-      if (res.success) {
-        this.showRecords = true;
-        this.data = res.result.records;
-        this.total = res.result.total;
-      }
-    },
-
-    // 实例化初始值
-    initBaseParams() {
-      let data = new Date();
-      this.getOrderList();
-      this.orderParams.year = data.getFullYear();
-      this.overViewParams.year = data.getFullYear();
-    },
-  },
-
-  mounted() {
-    this.initBaseParams();
-  },
-};
+onMounted(() => {
+  initBaseParams();
+});
 </script>
 <style scoped lang="scss">
 .active {
diff --git a/seller/src/views/statistics/order/orderDetail.vue b/seller/src/views/statistics/order/orderDetail.vue
index 50e77dee3..cb9974745 100644
--- a/seller/src/views/statistics/order/orderDetail.vue
+++ b/seller/src/views/statistics/order/orderDetail.vue
@@ -81,36 +81,34 @@
     </div>
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      orderStatusList: {
-        // 订单状态
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
-    };
-  },
-  props: ["res"],
-  methods: {
-    handleClickGoods(goodsId) {
-      if (!goodsId) {
-        this.$Message.warning("商品信息不存在");
-        return;
-      }
-      this.$filters.customRouterPush({
-        name: "goods-operation-edit",
-        query: { id: goodsId },
-      });
-    },
-  },
-};
+<script setup>
+import { ref } from "vue";
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
+
+defineProps(["res"]);
+
+const orderStatusList = ref({
+  // 订单状态
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
+
+function handleClickGoods(goodsId) {
+  if (!goodsId) {
+    Message.warning("商品信息不存在");
+    return;
+  }
+  customRouterPush({
+    name: "goods-operation-edit",
+    query: { id: goodsId },
+  });
+}
 </script>
 <style lang="scss" scoped>
 .shop {
diff --git a/seller/src/views/statistics/order/refundOrder.vue b/seller/src/views/statistics/order/refundOrder.vue
index af5a4206c..dc55ada37 100644
--- a/seller/src/views/statistics/order/refundOrder.vue
+++ b/seller/src/views/statistics/order/refundOrder.vue
@@ -75,55 +75,53 @@
 
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      orderStatusList: { // 订单状态
-        UNDELIVERED: "待发货",
-        UNPAID: "未付款",
-        PAID: "已付款",
-        DELIVERED: "已发货",
-        CANCELLED: "已关闭",
-        COMPLETED: "已完成",
-        TAKE: "已完成",
-      },
-      // 售后类型
-      serviceTypeList: {
-        CANCEL: "取消",
-        RETURN_GOODS: "退货",
-        EXCHANGE_GOODS: "换货",
-        RETURN_MONEY: "退款",
-      },
-      serviceStatusList: {
-        APPLY: "申请售后",
-        PASS: "通过售后",
-        REFUSE: "拒绝售后",
-        BUYER_RETURN: "买家退货，待卖家收货",
-        SELLER_RE_DELIVERY: "商家换货/补发",
-        SELLER_CONFIRM: "卖家确认收货",
-        SELLER_TERMINATION: "卖家终止售后",
-        BUYER_CONFIRM: "买家确认收货",
-        BUYER_CANCEL: "买家取消售后",
-        WAIT_REFUND: "等待平台退款",
-        COMPLETE: "完成售后",
-      },
-    };
-  },
-  props: ["res"],
-  methods: {
-    handleClickGoods(goodsId) {
-      if (!goodsId) {
-        this.$Message.warning("商品信息不存在");
-        return;
-      }
-      this.$filters.customRouterPush({
-        name: "goods-operation-edit",
-        query: { id: goodsId },
-      });
-    },
+<script setup>
+import { reactive } from "vue";
+import { Message } from "@/utils/message";
+import { customRouterPush } from "@/utils/filters";
+
+defineProps(["res"]);
+
+const orderStatusList = reactive({ // 订单状态
+  UNDELIVERED: "待发货",
+  UNPAID: "未付款",
+  PAID: "已付款",
+  DELIVERED: "已发货",
+  CANCELLED: "已关闭",
+  COMPLETED: "已完成",
+  TAKE: "已完成",
+});
+// 售后类型
+const serviceTypeList = reactive({
+  CANCEL: "取消",
+  RETURN_GOODS: "退货",
+  EXCHANGE_GOODS: "换货",
+  RETURN_MONEY: "退款",
+});
+const serviceStatusList = reactive({
+  APPLY: "申请售后",
+  PASS: "通过售后",
+  REFUSE: "拒绝售后",
+  BUYER_RETURN: "买家退货，待卖家收货",
+  SELLER_RE_DELIVERY: "商家换货/补发",
+  SELLER_CONFIRM: "卖家确认收货",
+  SELLER_TERMINATION: "卖家终止售后",
+  BUYER_CONFIRM: "买家确认收货",
+  BUYER_CANCEL: "买家取消售后",
+  WAIT_REFUND: "等待平台退款",
+  COMPLETE: "完成售后",
+});
+
+function handleClickGoods(goodsId) {
+  if (!goodsId) {
+    Message.warning("商品信息不存在");
+    return;
   }
-};
+  customRouterPush({
+    name: "goods-operation-edit",
+    query: { id: goodsId },
+  });
+}
 </script>
 <style lang="scss" scoped>
 .shop {
diff --git a/seller/src/views/statistics/sales-order-detail.vue b/seller/src/views/statistics/sales-order-detail.vue
index 87ba66f62..87fcaa29d 100644
--- a/seller/src/views/statistics/sales-order-detail.vue
+++ b/seller/src/views/statistics/sales-order-detail.vue
@@ -67,85 +67,82 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "seller-sales-order-detail-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: {
-        pageNumber: 1,
-        pageSize: 20,
-        orderSn: "",
-        memberName: "",
-        keyword: "",
-      },
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getSalesOrderDetailReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportSalesOrderDetailReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "销售订单明细报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    clientTypeText(val) {
-      const map = {
-        H5: "移动端",
-        PC: "PC端",
-        WECHAT_MP: "小程序",
-        APP: "移动应用端",
-        UNKNOWN: "未知",
-      };
-      return map[val] || val || "";
-    },
-  },
-};
+defineOptions({ name: "seller-sales-order-detail-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+  orderSn: "",
+  memberName: "",
+  keyword: "",
+});
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  initDefaultRange();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getSalesOrderDetailReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportSalesOrderDetailReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "销售订单明细报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function clientTypeText(val) {
+  const map = {
+    H5: "移动端",
+    PC: "PC端",
+    WECHAT_MP: "小程序",
+    APP: "移动应用端",
+    UNKNOWN: "未知",
+  };
+  return map[val] || val || "";
+}
 </script>
diff --git a/seller/src/views/statistics/store-performance.vue b/seller/src/views/statistics/store-performance.vue
index 4919afd6e..66208488d 100644
--- a/seller/src/views/statistics/store-performance.vue
+++ b/seller/src/views/statistics/store-performance.vue
@@ -85,81 +85,78 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
 import * as API_Statistics from "@/api/statistics";
 import { downloadBlob } from "@/utils/downloadBlob";
+import { unitPrice } from "@/utils/filters";
 
-export default {
-  name: "seller-store-performance-report",
-  data() {
-    return {
-      loading: false,
-      dateRange: [],
-      defaultTime: [new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)],
-      params: { pageNumber: 1, pageSize: 20 },
-      data: [],
-      total: 0,
-    };
-  },
-  mounted() {
-    this.initDefaultRange();
-    this.loadData();
-  },
-  methods: {
-    initDefaultRange() {
-      const end = new Date();
-      const start = new Date();
-      start.setDate(start.getDate() - 6);
-      this.dateRange = [this.formatDate(start, true), this.formatDate(end, false)];
-    },
-    formatDate(date, startOfDay) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
-    },
-    buildParams() {
-      const p = { ...this.params };
-      if (this.dateRange && this.dateRange.length === 2) {
-        p.startTime = this.dateRange[0];
-        p.endTime = this.dateRange[1];
-      }
-      return p;
-    },
-    handleSearch() {
-      this.params.pageNumber = 1;
-      this.loadData();
-    },
-    loadData() {
-      this.loading = true;
-      API_Statistics.getStorePerformanceReport(this.buildParams()).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.data = res.result.records || [];
-          this.total = res.result.total || 0;
-        }
-      });
-    },
-    handleExport() {
-      API_Statistics.exportStorePerformanceReport(this.buildParams()).then((blob) => {
-        downloadBlob(blob, "店铺业绩报表.xlsx");
-      });
-    },
-    formatMoney(val) {
-      return this.$filters.unitPrice(val, "￥");
-    },
-    formatPercent(val) {
-      if (val == null || val === "") return "0%";
-      return `${Number(val).toFixed(2)}%`;
-    },
-    rateClass(rate) {
-      if (!rate) return "";
-      if (rate.startsWith("+")) return "trend-up";
-      if (rate.startsWith("-") && rate !== "0%") return "trend-down";
-      return "";
-    },
-  },
-};
+defineOptions({ name: "seller-store-performance-report" });
+
+const loading = ref(false);
+const dateRange = ref([]);
+const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
+const params = reactive({ pageNumber: 1, pageSize: 20 });
+const data = ref([]);
+const total = ref(0);
+
+onMounted(() => {
+  initDefaultRange();
+  loadData();
+});
+
+function initDefaultRange() {
+  const end = new Date();
+  const start = new Date();
+  start.setDate(start.getDate() - 6);
+  dateRange.value = [formatDate(start, true), formatDate(end, false)];
+}
+function formatDate(date, startOfDay) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return startOfDay ? `${y}-${m}-${d} 00:00:00` : `${y}-${m}-${d} 23:59:59`;
+}
+function buildParams() {
+  const p = { ...params };
+  if (dateRange.value && dateRange.value.length === 2) {
+    p.startTime = dateRange.value[0];
+    p.endTime = dateRange.value[1];
+  }
+  return p;
+}
+function handleSearch() {
+  params.pageNumber = 1;
+  loadData();
+}
+function loadData() {
+  loading.value = true;
+  API_Statistics.getStorePerformanceReport(buildParams()).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      data.value = res.result.records || [];
+      total.value = res.result.total || 0;
+    }
+  });
+}
+function handleExport() {
+  API_Statistics.exportStorePerformanceReport(buildParams()).then((blob) => {
+    downloadBlob(blob, "店铺业绩报表.xlsx");
+  });
+}
+function formatMoney(val) {
+  return unitPrice(val, "￥");
+}
+function formatPercent(val) {
+  if (val == null || val === "") return "0%";
+  return `${Number(val).toFixed(2)}%`;
+}
+function rateClass(rate) {
+  if (!rate) return "";
+  if (rate.startsWith("+")) return "trend-up";
+  if (rate.startsWith("-") && rate !== "0%") return "trend-down";
+  return "";
+}
 </script>
 
 <style scoped>
diff --git a/seller/src/views/statistics/traffic.vue b/seller/src/views/statistics/traffic.vue
index a7906363d..55ca91a1f 100644
--- a/seller/src/views/statistics/traffic.vue
+++ b/seller/src/views/statistics/traffic.vue
@@ -40,122 +40,118 @@
     </el-card>
   </div>
 </template>
-<script>
+<script setup>
+import { onMounted, ref, watch } from "vue";
 import affixTime from "@/views/lili-components/affix-time";
 import * as API_Member from "@/api/member";
 
-export default {
-  components: { affixTime },
+const uvs = ref(0);
+const pvs = ref(0);
+// G2 图表实例（原 data 中初始化为 ""）
+const orderChart = ref("");
+const params = ref({
+  searchType: "LAST_SEVEN",
+  year: "",
+  month: "",
+});
+const data = ref([]);
 
-  data() {
-    return {
-      uvs: 0,
-      pvs: 0,
-      orderChart: "",
-      params: {
-        searchType: "LAST_SEVEN",
-        year: "",
-        month: "",
-      },
-      data: [],
-    };
+watch(
+  params,
+  () => {
+    uvs.value = 0;
+    pvs.value = 0;
+    init();
   },
-  watch: {
-    params: {
-      handler() {
-        this.uvs = 0;
-        this.pvs = 0;
-        this.init();
-      },
-      deep: true,
+  { deep: true }
+);
+
+function initChart() {
+  const uv = [];
+  const pv = [];
+
+  data.value.forEach((item) => {
+    uv.push({
+      date: item.date,
+      uvNum: item.uvNum,
+      title: "访客数UV",
+      pv: item.uvNum,
+    });
+    pv.push({
+      date: item.date,
+      pvNum: item.pvNum,
+      pv: item.pvNum,
+      title: "浏览量PV",
+    });
+  });
+
+  const chartData = [...uv, ...pv];
+
+  orderChart.value.data(chartData);
+  orderChart.value.scale({
+    activeQuantity: {
+      range: [0, 1],
+      nice: true,
     },
-  },
-  methods: {
-    initChart() {
-      const uv = [];
-      const pv = [];
+  });
+  orderChart.value.tooltip({
+    showCrosshairs: true,
+    shared: true,
+  });
 
-      this.data.forEach((item) => {
-        uv.push({
-          date: item.date,
-          uvNum: item.uvNum,
-          title: "访客数UV",
-          pv: item.uvNum,
+  orderChart.value
+    .line()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("smooth");
+
+  orderChart.value
+    .point()
+    .position("date*pv")
+    .color("title")
+    .label("pv")
+    .shape("circle")
+    .style({
+      stroke: "#fff",
+      lineWidth: 1,
+    });
+  orderChart.value.area().position("date*pv").color("title").shape("smooth");
+
+  orderChart.value.render();
+}
+
+function clickBreadcrumb(item) {
+  params.value = JSON.parse(JSON.stringify(item));
+}
+
+function init() {
+  orderChart.value ? orderChart.value.clear() : "";
+  API_Member.getStatisticsList(params.value).then(async (res) => {
+    if (res.result) {
+      data.value = res.result;
+      res.result.forEach((item) => {
+        uvs.value += item.uvNum;
+        pvs.value += item.pvNum;
+      });
+
+      if (!orderChart.value) {
+        const { Chart } = await import("@antv/g2");
+        orderChart.value = new Chart({
+          container: "orderChart",
+          autoFit: true,
+          height: 500,
+          padding: [70, 70, 70, 70],
         });
-        pv.push({
-          date: item.date,
-          pvNum: item.pvNum,
-          pv: item.pvNum,
-          title: "浏览量PV",
-        });
-      });
+      }
+      initChart();
+    }
+  });
+}
 
-      const chartData = [...uv, ...pv];
-
-      this.orderChart.data(chartData);
-      this.orderChart.scale({
-        activeQuantity: {
-          range: [0, 1],
-          nice: true,
-        },
-      });
-      this.orderChart.tooltip({
-        showCrosshairs: true,
-        shared: true,
-      });
-
-      this.orderChart
-        .line()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("smooth");
-
-      this.orderChart
-        .point()
-        .position("date*pv")
-        .color("title")
-        .label("pv")
-        .shape("circle")
-        .style({
-          stroke: "#fff",
-          lineWidth: 1,
-        });
-      this.orderChart.area().position("date*pv").color("title").shape("smooth");
-
-      this.orderChart.render();
-    },
-    clickBreadcrumb(item) {
-      this.params = JSON.parse(JSON.stringify(item));
-    },
-    init() {
-      this.orderChart ? this.orderChart.clear() : "";
-      API_Member.getStatisticsList(this.params).then(async (res) => {
-        if (res.result) {
-          this.data = res.result;
-          res.result.forEach((item) => {
-            this.uvs += item.uvNum;
-            this.pvs += item.pvNum;
-          });
-
-          if (!this.orderChart) {
-            const { Chart } = await import("@antv/g2");
-            this.orderChart = new Chart({
-              container: "orderChart",
-              autoFit: true,
-              height: 500,
-              padding: [70, 70, 70, 70],
-            });
-          }
-          this.initChart();
-        }
-      });
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+onMounted(() => {
+  init();
+});
 </script>
 <style scoped lang="scss">
 .table {
diff --git a/seller/src/views/sys/oss-manage/ossManage.vue b/seller/src/views/sys/oss-manage/ossManage.vue
index 8f4e19e5c..f72f9419c 100644
--- a/seller/src/views/sys/oss-manage/ossManage.vue
+++ b/seller/src/views/sys/oss-manage/ossManage.vue
@@ -181,7 +181,7 @@
                     <div>
                       <el-upload
                         v-if="canUploadImages"
-                        ref="up"
+                        ref="upRef"
                         :action="sellerUrl + '/store/common/upload/file'"
                         :data="uploadData"
                         :headers="accessToken"
@@ -282,7 +282,7 @@
       width="500px"
       destroy-on-close
     >
-      <el-form ref="form" label-width="95px" :model="form" :rules="formValidate">
+      <el-form ref="formRef" label-width="95px" :model="form" :rules="formValidate">
         <el-form-item label="原文件名" prop="name">
           <el-input v-model="form.name" />
         </el-form-item>
@@ -347,7 +347,7 @@
       destroy-on-close
     >
       <el-form
-        ref="formValidate"
+        ref="formValidateRef"
         label-width="80px"
         :model="groupFormValidate"
         :rules="groupRuleValidate"
@@ -371,6 +371,23 @@
  * - 支持图片/视频/文件分类、分组 CRUD、上传、预览、下载、删除
  * - isComponent=true 时作为弹窗选择器嵌入商品编辑、店铺装修等页面
  */
+
+const playIcon =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23409eff' d='M8 5v14l11-7z'/%3E%3C/svg%3E";
+
+// DPlayer 实例：原为模块级变量（多实例共享），保持原有作用域
+let dp;
+</script>
+
+<script setup>
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { Delete, Download, View, Document } from "@element-plus/icons-vue";
 import {
@@ -382,1167 +399,1177 @@ import {
   renameFile,
   updateFileDirectory,
 } from "@/api/index";
-import {sellerUrl} from "@/libs/axios";
+import { sellerUrl } from "@/libs/axios";
 import config from "@/config/index";
+import { getStore } from "@/libs/storage";
 
-const playIcon =
-  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23409eff' d='M8 5v14l11-7z'/%3E%3C/svg%3E";
+defineOptions({ name: "oss-manage" });
 
-let dp;
-export default {
-  name: "oss-manage",
-  components: { Delete, Download, View, Document },
-  props: {
-    isComponent: {
-      default: false,
-      type: Boolean,
-    },
-    choose: {
-      type: String,
-      default: ""
-    },
-    initialize: {
-      type: Boolean,
-      default: false,
-    },
-    maxSelect: {
-      type: Number,
-      default: 0,
-    },
-    hideSelectFooter: {
-      type: Boolean,
-      default: false,
-    },
+const props = defineProps({
+  isComponent: {
+    default: false,
+    type: Boolean,
   },
-  data() {
-    return {
-      sellerUrl, // 上传文件路径
-      config, // api地址
-      fileDirectoryId: "",
-      groupFormValidate: {
-        id: "",
-        level: 0,
-        parentId: "0",
-        directoryName: "",
-      },
-      groupRuleValidate: {
-        directoryName: [
-          {
-            required: true,
-            message: "请输入分组名称",
-            trigger: "blur",
-          },
-        ],
-      },
-      enableGroup: false, // 是否展示分组
-      selectImage: false, //是否是选择
-      accessToken: {}, // 上传token鉴权
-      loading: false, // 表单加载状态
-      fileType: "pic", // 兼容外部调用：pic / video
-      showType: "list", // 展示类型
-      modalVisible: false, // 添加或编辑显示
-      uploadVisible: false, // 上传展示
-      videoVisible: false, // 视频预览
-      picVisible: false, // 图片预览
-      fileVisible: false, // 文件预览
-      picTitle: "", // 图片 title
-      videoTitle: "", // 视频 title
-      fileTitle: "", // 文件 title
-      pendingVideoUrl: "", // 待播放视频地址
-      modalTitle: "", // 添加或编辑标题
-      activeRoleTab: "STORE", // 商家固定为 STORE，与素材 ownerId（storeId）一致
-      activeCategoryTab: "IMAGE",
-      searchForm: {
-        // 搜索框对应data对象
-        name: "",
-        fileKey: "",
-        fileType: "",
-        fileCategory: "IMAGE",
-        userEnums: "STORE",
-        pageNumber: 1, // 当前页数
-        pageSize: 20, // 页面大小
-        sort: "createTime", // 默认排序字段
-        order: "desc", // 默认排序方式
-      },
-      oldKey: "", // 请求参数
-      form: {
-        // 表单
-        name: "",
-        fileKey: "",
-      },
-      file: {}, // 文件数据
-      // 表单验证规则
-      formValidate: {
-        name: [{required: true, message: "不能为空", trigger: "blur"}],
-        fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
-      },
-      submitLoading: false, // 添加或编辑提交状态
-      selectList: [], // 多选数据
-      selectCount: 0, // 多选计数
-      totalSize: "", // 文件大小统计
-      columns: [
-        // 表头
-        {
-          type: "selection",
-          width: 60,
-          align: "center",
-        },
-        {
-          title: "缩略图(点击预览)",
-          key: "url",
-          width: 300,
-          align: "center",
-          render: (h, params) => {
-            if (this.isImageFile(params.row)) {
-              return h("img", {
-                attrs: {
-                  src: params.row.url || "",
-                  alt: "加载图片失败",
-                },
-                style: {
-                  cursor: "pointer",
-                  width: "80px",
-                  height: "60px",
-                  margin: "10px 0",
-                  "object-fit": "contain",
-                },
-                on: {
-                  click: () => {
-                    this.showPic(params.row);
-                  },
-                },
-              });
-            } else if (this.isVideoFile(params.row)) {
-              // 如果视频文件大小超过5MB不予加载video
-              if (params.row.fileSize < 1024 * 1024 * 5) {
-                return h(
-                  "video",
-                  {
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  },
-                  [
-                    h("source", {
-                      attrs: {
-                        src: params.row.url,
-                      },
-                    }),
-                  ]
-                );
-              } else {
-                return h("img", {
-                  attrs: {
-                    src: playIcon,
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showVideo(params.row);
-                    },
-                  },
-                });
-              }
-            } else {
-              return h("span", "非多媒体类型");
-            }
-          },
-        },
-        {
-          title: "文件类型",
-          key: "fileType",
-          width: 115,
-          className: this.selectImage == true ? "none" : "",
-        },
-        {
-          title: "文件大小",
-          key: "fileSize",
-          width: 115,
-          sortable: true,
-          className: this.selectImage == true ? "none" : "",
-          render: (h, params) => {
-            let m =
-              ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-            return h("span", m);
-          },
-        },
-        {
-          title: "上传者",
-          key: "createBy",
-          width: 200,
-          render: (h, params) => {
-            let m;
-            if (params.row.userEnums == "MANAGER") {
-              m = "[管理员]";
-            } else if (params.row.userEnums == "STORE") {
-              m = "[商家]";
-            } else if (params.row.userEnums == "CUSTOMER") {
-              m = "[客服]";
-            } else {
-              m = "[用户]";
-            }
-            m += params.row.createBy;
-            return h("span", m);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          // width: 300,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                    display: this.selectImage === true ? "inline-block" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedParams(params.row);
-                    },
-                  },
-                },
-                "选择"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                    display: this.selectImage === true ? "inline-block" : "none",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    marginRight: "5px",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                  on: {
-                    click: () => {
-                      this.download(params.row);
-                    },
-                  },
-                },
-                "下载"
-              ),
-              h(
-                "span",
-                {
-                  style: {
-                    margin: "0 8px",
-                    color: "#dcdee2",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                },
-                "|"
-              ),
-              h(
-                "a",
-                {
-                  style: {
-                    color: "#2d8cf0",
-                    cursor: "pointer",
-                    textDecoration: "none",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                  on: {
-                    click: () => {
-                      this.remove(params.row);
-                    },
-                  },
-                },
-                "删除"
-              ),
-            ]);
-          },
-        },
-      ],
-      viewColumns: [
-        {
-          title: "缩略图(点击预览)",
-          key: "url",
-          // width: 150,
-          align: "center",
-          render: (h, params) => {
-            if (this.isImageFile(params.row)) {
-              return h("img", {
-                attrs: {
-                  src: params.row.url || "",
-                  alt: "加载图片失败",
-                },
-                style: {
-                  cursor: "pointer",
-                  width: "80px",
-                  height: "60px",
-                  margin: "10px 0",
-                  "object-fit": "contain",
-                },
-                on: {
-                  click: () => {
-                    this.showPic(params.row);
-                  },
-                },
-              });
-            } else if (this.isVideoFile(params.row)) {
-              // 如果视频文件大小超过5MB不予加载video
-              if (params.row.fileSize < 1024 * 1024 * 5) {
-                return h(
-                  "video",
-                  {
-                    style: {
-                      cursor: "pointer",
-                      width: "80px",
-                      height: "60px",
-                      margin: "10px 0",
-                      "object-fit": "contain",
-                    },
-                    on: {
-                      click: () => {
-                        this.showVideo(params.row);
-                      },
-                    },
-                  },
-                  [
-                    h("source", {
-                      attrs: {
-                        src: params.row.url,
-                      },
-                    }),
-                  ]
-                );
-              } else {
-                return h("img", {
-                  attrs: {
-                    src: playIcon,
-                  },
-                  style: {
-                    cursor: "pointer",
-                    width: "80px",
-                    height: "60px",
-                    margin: "10px 0",
-                    "object-fit": "contain",
-                  },
-                  on: {
-                    click: () => {
-                      this.showVideo(params.row);
-                    },
-                  },
-                });
-              }
-            } else {
-              return h("span", "非多媒体类型");
-            }
-          },
-        },
-        {
-          title: "上传者",
-          key: "createBy",
-          width: 120,
-          sortable: true,
-          render: (h, params) => {
-            let m;
-            if (params.row.userEnums == "MANAGER") {
-              m = "[管理员]";
-            } else if (params.row.userEnums == "STORE") {
-              m = "[商家]";
-            } else if (params.row.userEnums == "CUSTOMER") {
-              m = "[客服]";
-            } else {
-              m = "[用户]";
-            }
-            m += params.row.createBy;
-            return h("span", m);
-          },
-        },
-        {
-          title: "操作",
-          key: "action",
-          align: "center",
-          fixed: "right",
-          width: 300,
-          render: (h, params) => {
-            return h("div", [
-              h(
-                "Button",
-                {
-                  props: {
-                    type: "default",
-                    size: "small",
-                  },
-                  style: {
-                    marginRight: "5px",
-                    display:
-                      this.selectImage === true ? "inline-block" : "none",
-                  },
-                  on: {
-                    click: () => {
-                      this.selectedParams(params.row);
-                    },
-                  },
-                },
-                "选择"
-              )
-            ]);
-          },
-        },
-      ],
-      data: [], // 表单数据
-      total: 0, // 表单数据总数
-      pageSizeOpts: [5, 10, 20], // 页码展示项
-      list: [], // 列表
-      //树结构
-      treeData: [],
-      treeDataDefault: [],
-      treeRenderKey: 0,
-      selectedGroupData: "",
-      insertOrUpdate: "insert",
-      groupLoading: false,
-      // 图片列表
-      selectedOss: [],
-      myData: [
-        {
-          title: 'parent 1',
-          expand: true,
-          render: (h, {root, node, data}) => {
-            return h('span', {style: {display: 'inline-block', width: '100%'}}, [
-              h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-              h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                [h("Button", {
-                  ...this.buttonProps,
-                  icon: 'ios-add',
-                  type: 'primary',
-                  style: {width: '64px'},
-                  onClick: () => {
-                    this.append(data)
-                  }
-                })
-                ])
-            ]);
-          },
-          children: [
-            {
-              title: 'child 1-1',
-              expand: true,
-              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
-            },
-            {
-              title: 'child 1-2',
-              expand: true,
-              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
-            }
-          ]
-        }
-      ],
-      buttonProps: {type: 'default', size: 'small',},
-    };
+  choose: {
+    type: String,
+    default: ""
   },
-  watch: {
-    selectImage(val) {
-      if (val) {
-        if (this.isComponent) {
-          // 弹窗选图模式：加载本店素材，而非平台管理员资源
-          this.activeRoleTab = "STORE";
-          this.searchForm.userEnums = "STORE";
-          this.init();
-        } else if (!this.data.length) {
-          this.init();
-        }
-      }
-    },
-    choose(val) {
-      if (val) this.selectImage = val
-    },
-    selectedOss(val) {
-      if (val && val.length && !(this.isComponent && this.selectImage)) {
-        this.$emit("callback", { url: val[val.length - 1].split(",")[1] });
-      }
-    },
-    // 弹窗打开时重置状态并加载分组与素材列表
-    initialize(val) {
-      if (val && this.isComponent) {
-        this.selectedOss = [];
-        this.activeRoleTab = "STORE";
-        this.activeCategoryTab = "IMAGE";
-        this.searchForm.userEnums = "STORE";
-        this.searchForm.fileCategory = "IMAGE";
-        delete this.searchForm.fileDirectoryId;
-        this.selectedGroupData = "";
-        this.selectImage = true;
-      }
-    },
+  initialize: {
+    type: Boolean,
+    default: false,
   },
-  computed: {
-    // 商家端展示分组树与分组维护能力
-    canShowGroups() {
-      return this.activeRoleTab === "STORE";
-    },
-    // 商家端允许上传图片/视频/文件
-    canUploadImages() {
-      return this.activeRoleTab === "STORE";
-    },
-    uploadButtonText() {
-      const textMap = {
-        IMAGE: "上传图片",
-        VIDEO: "上传视频",
-        FILE: "上传文件",
-      };
-      return textMap[this.activeCategoryTab] || "上传图片";
-    },
-    uploadData() {
-      const data = {
-        userEnums: this.activeRoleTab,
-        directoryType: this.activeRoleTab,
-      };
-      const directoryId = this.searchForm.fileDirectoryId;
-      if (directoryId && directoryId !== "0") {
-        data.directoryPath = directoryId;
-      }
-      return data;
-    },
+  maxSelect: {
+    type: Number,
+    default: 0,
   },
-
-  methods: {
-    beforeUpload(file) {
-      if (!this.canUploadImages) {
-        ElMessage.warning("当前模块不支持上传");
-        return false;
-      }
-      const maxSize = 20480 * 1024;
-      if (file && file.size > maxSize) {
-        this.handleMaxSize(file);
-        return false;
-      }
-      return true;
-    },
-    handleTreeNodeClick(data) {
-      if (data) {
-        this.handleCateChange([data]);
-      }
-    },
-    onTreeDropdownCommand(cmd, data) {
-      this.selectedGroupData = data;
-      if (cmd === "edit") {
-        this.handleContextMenuEdit(null, null, data);
-      } else if (cmd === "delete") {
-        this.handleContextMenuDelete();
-      }
-    },
-    onMouseOver(item, index) {
-      this.data[index].isShowPreview = true;
-      this.$forceUpdate();
-    },
-    onMouseOut(item, index) {
-      this.data[index].isShowPreview = false;
-    },
-    handleRoleTabChange(name) {
-      this.activeRoleTab = name;
-      this.searchForm.pageNumber = 1;
-      this.searchForm.userEnums = name;
-      delete this.searchForm.fileDirectoryId;
-      this.selectedGroupData = "";
-      this.groupFormValidate.id = "";
-      this.groupFormValidate.level = 0;
-      this.selectedOss = [];
-      this.updateTreeDataByRole();
-      this.getDataList();
-    },
-    handleCategoryTabChange(name) {
-      this.activeCategoryTab = name;
-      this.searchForm.fileCategory = name;
-      this.searchForm.fileType = "";
-      this.searchForm.pageNumber = 1;
-      delete this.searchForm.fileDirectoryId;
-      this.selectedGroupData = "";
-      this.selectedOss = [];
-      if (this.showType === "list") {
-        this.searchForm.pageSize = 20;
-      } else {
-        this.searchForm.pageSize = 12;
-      }
-      this.updateTreeDataByRole();
-      this.getDataList();
-    },
-    updateTreeDataByRole() {
-      const rootTitleMap = {
-        IMAGE: "全部图片",
-        VIDEO: "全部视频",
-        FILE: "全部文件",
-      };
-      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
-      this.treeData = [
-        {
-          title: rootTitleMap[this.activeCategoryTab] || "全部图片",
-          label: "全部分类",
-          value: "0",
-          type: this.activeRoleTab,
-          level: 0,
-          children: [],
-          id: "0",
-          categoryId: 0,
-        },
-        ...currentTree,
-      ];
-      this.treeRenderKey += 1;
-    },
-    filterTreeByRole(tree = [], role) {
-      if (!tree || !tree.length) return [];
-      return tree
-        .filter((item) => item.type === role)
-        .map((item) => ({
-          ...item,
-          children: [],
-        }));
-    },
-    // 复选框值改变时触发
-    selectOssChange(e) {
-      if (this.maxSelect === 1 && e.length > 1) {
-        const last = e[e.length - 1];
-        this.selectedOss = [last];
-        e = [last];
-      }
-      if (e) {
-        this.selectList = e.map(item => {
-          return {id: item.split(',')[0]}
-        });
-        this.selectCount = e.length;
-        // let size = 0;
-        // e.forEach((item) => {size += item.fileSize * 1.0;});
-        // this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-        this.$emit("selected", e);
-      }
-    },
-    handleCardClick(item, event) {
-      if (!(this.isComponent && this.selectImage)) return;
-      if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
-        return;
-      }
-      const key = `${item.id},${item.url}`;
-      let next;
-      if (this.maxSelect === 1) {
-        next = this.selectedOss.includes(key) ? [] : [key];
-      } else if (this.selectedOss.includes(key)) {
-        next = this.selectedOss.filter((k) => k !== key);
-      } else {
-        next = [...this.selectedOss, key];
-      }
-      this.selectedOss = next;
-      this.selectOssChange(next);
-    },
-    // 页码改变时回调
-    pageChange(value) {
-      this.selectedOss = [];
-      this.searchForm.pageNumber = value;
-      this.getDataList();
-    },
-    // 自定义tree节点显示内容和交互
-    renderContent(h, {root, node, data}) {
-      if (data.value === '0') {
-        return h('span', {style: {display: 'inline-block', width: '100%'}},
-          [
-            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
-          ]
-        );
-      } else {
-        return h('span', {style: {display: 'inline-block', width: '100%'}},
-          [
-            h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
-            h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}},
-              [
-                h("Dropdown", {style: {marginLeft: "4px"}},
-                  [
-                    h("Icon", {
-                      props: {type: 'ios-more', size: "20",},
-                      style: {display: 'inline-block'},
-                      on: {
-                        click: () => {
-                        }
-                      }
-                    }),
-                    h("DropdownMenu", {
-                      slot: "list"
-                    }, [
-                      h("DropdownItem", {
-                        nativeOn: {
-                          click: () => {
-                            this.handleContextMenuEdit(root, node, data)
-                          }
-                        }
-                      }, "编辑"),
-                      h("DropdownItem", {
-                        nativeOn: {
-                          click: () => {
-                            this.handleContextMenuDelete()
-                          }
-                        }
-                      }, "删除"),
-                    ])
-                  ]),
-              ])
-          ]
-        );
-      }
-
-    },
-
-
-    handleContextMenu(val) {
-      console.log('handleContextMenu', val);
-      this.selectedGroupData = val;
-    },
-    // 编辑分组
-    handleContextMenuEdit(root, node, data) {
-      this.insertOrUpdate = "update";
-      this.enableGroup = true;
-      this.groupFormValidate.id = data.value;
-      this.groupFormValidate.directoryName = data.title || data.label;
-      this.groupFormValidate.level = 0;
-      this.groupFormValidate.parentId = "0";
-    },
-    // 删除分组
-    async handleContextMenuDelete(val) {
-      ElMessageBox.confirm("是否删除该分组", "提示", { type: "warning" }).then(async () => {
-          const res = await delFileDirectory(this.selectedGroupData.value);
-          if (res.success) {
-            ElMessage.success("删除成功!");
-            this.getDataList();
-            this.getAllList();
-          }
-      }).catch(() => {});
-    },
-    async submitAddGroup() {
-      this.$refs["formValidate"].validate(async (valid) => {
-        if (valid) {
-          let res;
-          const params = {
-            directoryName: this.groupFormValidate.directoryName,
-            level: 0,
-            parentId: "0",
-            directoryType: this.activeRoleTab,
-          };
-          if (this.insertOrUpdate === "insert") {
-            res = await addFileDirectory(params);
-          } else {
-            params.id = this.groupFormValidate.id;
-            res = await updateFileDirectory(params);
-          }
-
-          if (res.success) {
-            ElMessage.success("操作成功!");
-            this.enableGroup = false;
-            this.getAllList();
-          }
-          } else {
-          ElMessage.error("请填写完整信息!");
-        }
-      });
-    },
-    handleClickAddGroup() {
-      this.insertOrUpdate = "insert";
-      this.groupFormValidate = {
-        id: "",
-        level: 0,
-        parentId: "0",
-        directoryName: "",
-      };
-      this.enableGroup = true;
-    },
-    copyFileUrl(row) {
-      const textArea = document.createElement("textarea");
-      textArea.value = row.url;
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      try {
-        document.execCommand("copy");
-        ElMessage.success("复制成功");
-      } catch (err) {
-        console.error("Unable to copy to clipboard", err);
-      }
-      document.body.removeChild(textArea);
-    },
-
-    // 获取全部文件目录
-    getAllList(parent_id) {
-      this.loading = true;
-      getFileDirectory(parent_id).then((res) => {
-        this.loading = false;
-        if (res.success) {
-          this.treeDataDefault = this.getTree(res.result);
-          this.updateTreeDataByRole();
-        }
-      });
-    },
-    // 文件目录分类格式化：仅展示一级分组
-    getTree(tree = []) {
-      const flat = [];
-      const walk = (nodes) => {
-        if (!nodes || !nodes.length) return;
-        nodes.forEach((item) => {
-          flat.push({
-            title: item.directoryName,
-            value: item.id,
-            type: item.directoryType,
-            label: item.directoryName,
-            level: 0,
-            expand: false,
-            selected: false,
-            contextmenu: false,
-            parentId: "0",
-            children: [],
-          });
-          if (item.children && item.children.length) {
-            walk(item.children);
-          }
-        });
-      };
-      walk(tree);
-      return flat;
-    },
-
-    // 选择分类回调
-    handleCateChange(data) {
-      if (data) {
-        this.selectedGroupData = data[0];
-        let {value, type, level} = data[0];
-        this.list.push({value, type, level});
-        this.searchForm.fileDirectoryId = value;
-        if (value === "0" || value === 0) {
-          delete this.searchForm.fileDirectoryId;
-        }
-        this.searchForm.userEnums = type || this.activeRoleTab;
-        this.getDataList();
-        this.selectedOss = [];
-      }
-    },
-    /**
-     * 选择
-     */
-    selectedParams(val) {
-      this.$emit("callback", val);
-    },
-    handleSelectConfirm() {
-      if (!this.selectedOss.length) {
-        ElMessage.warning("请选择图片");
-        return;
-      }
-      const last = this.selectedOss[this.selectedOss.length - 1];
-      this.$emit("callback", { url: last.split(",")[1] });
-    },
-    handleSelectCancel() {
-      this.selectedOss = [];
-      this.$emit("callback", { url: "" });
-    },
-    // 初始化数据
-    init() {
-      this.accessToken = {
-        accessToken: this.getStore("accessToken"),
-      };
-      this.searchForm.userEnums = this.activeRoleTab;
-      this.searchForm.fileCategory = this.activeCategoryTab;
-      this.getDataList();
-      this.getAllList();
-    },
-    // 查看大图
-    showPic(v) {
-      this.prepareFileMeta(v);
-      this.picTitle = v.name || "图片预览";
-      this.picVisible = true;
-    },
-    // 查看文件（PDF 等）
-    showFile(v) {
-      this.prepareFileMeta(v);
-      this.fileTitle = v.name || "文件预览";
-      this.fileVisible = true;
-    },
-    // 查看视频
-    showVideo(v) {
-      this.prepareFileMeta(v);
-      this.videoTitle = v.name || "视频预览";
-      this.pendingVideoUrl = v.url;
-      this.videoVisible = true;
-    },
-    async initDPlayer() {
-      const container = this.$refs.dplayerRef;
-      if (!container || !this.pendingVideoUrl) return;
-      if (dp) {
-        dp.destroy();
-        dp = null;
-      }
-      const { default: DPlayer } = await import("dplayer");
-      dp = new DPlayer({
-        container,
-        screenshot: true,
-        video: {
-          url: this.pendingVideoUrl,
-        },
-      });
-    },
-    // 关闭视频
-    closeVideo() {
-      if (dp) {
-        dp.destroy();
-        dp = null;
-      }
-      this.pendingVideoUrl = "";
-    },
-    // 分页 改变页码
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getDataList();
-      this.clearSelectAll();
-    },
-    // 分页 改变页数
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getDataList();
-    },
-    // 排序
-    changeSort(e) {
-      this.searchForm.sort = e.key;
-      this.searchForm.order = e.order;
-      if (e.order == "normal") {
-        this.searchForm.order = "";
-      }
-      this.getDataList();
-    },
-    // 起止时间筛选已移除
-    // 改变查看方式
-    changeShowType() {
-      this.searchForm.pageNumber = 1;
-      if (this.showType == "list") {
-        this.searchForm.pageSize = 20;
-      } else {
-        this.searchForm.pageSize = 12;
-      }
-      this.getDataList();
-    },
-    // 获取列表数据
-    getDataList(type = null) {
-      if (this.showType == "list") {
-        this.pageSizeOpts = [10, 20, 50];
-      } else {
-        this.pageSizeOpts = [12, 24, 48];
-      }
-      this.loading = true;
-      getFileListData(this.searchForm)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else {
-            this.data = [];
-            this.total = 0;
-          }
-        })
-        .catch(() => {
-          this.data = [];
-          this.total = 0;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    // 兼容外部按场景切换分类（如装修选图/选视频）
-    changeFileType() {
-      const categoryMap = {
-        pic: "IMAGE",
-        video: "VIDEO",
-        file: "FILE",
-        all: "IMAGE",
-      };
-      const category = categoryMap[this.fileType] || "IMAGE";
-      this.activeCategoryTab = category;
-      this.handleCategoryTabChange(category);
-    },
-    isImageFile(row) {
-      return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
-    },
-    isVideoFile(row) {
-      return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
-    },
-    isPdfFile(row) {
-      return (
-        row?.fileType === "application/pdf" ||
-        (row?.name && row.name.toLowerCase().endsWith(".pdf"))
-      );
-    },
-    previewFile(item) {
-      if (this.isVideoFile(item)) {
-        this.showVideo(item);
-      } else if (this.isImageFile(item)) {
-        this.showPic(item);
-      } else {
-        this.showFile(item);
-      }
-    },
-    prepareFileMeta(v) {
-      this.file = v;
-      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-    },
-    // 上传文件超过大小限制
-    handleMaxSize() {
-      ElMessage.warning("所选文件大小过大，不得超过 20MB");
-    },
-    // 上传成功回调
-    handleSuccess(res, file) {
-      if (!this.canUploadImages) {
-        ElMessage.warning("当前模块不支持上传");
-        return;
-      }
-      if (res.success) {
-        ElMessage.success("上传文件 " + file.name + " 成功");
-        this.getDataList();
-      } else {
-        ElMessage.error(res.message);
-      }
-    },
-    // 上传失败回调
-    handleError(error, file, fileList) {
-      ElMessage.error(error.toString());
-    },
-    // 清空上传文件
-    clearFiles() {
-      this.$refs.up.clearFiles();
-    },
-    // 取消修改文件名
-    handleCancel() {
-      this.modalVisible = false;
-    },
-    // 下载文件
-    download(v) {
-      window.open(
-        v.url + "?attname=&response-content-type=application/octet-stream"
-      );
-    },
-    // 批量删除文件
-    removeAll() {
-      if (this.selectCount <= 0) {
-        ElMessage.warning("您还未选择要删除的数据");
-        return;
-      }
-      ElMessageBox.confirm("您确认要删除所选的 " + this.selectCount + " 个文件?", "确认删除", { type: "warning" }).then(() => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deleteFile(ids).then((res) => {
-            if (res.success) {
-              this.selectedOss = [];
-              // this.clearSelectAll();
-              this.init();
-              ElMessage.success("批量删除文件成功");
-            }
-          })
-            .catch((err) => {
-              console.log("失败", err);
-            });
-      }).catch(() => {});
-    },
-    // 单个删除文件
-    remove(v) {
-      ElMessageBox.confirm("您确认要删除文件 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
-          deleteFile(v.id).then((res) => {
-            if (res.success) {
-              ElMessage.success("删除文件 " + v.name + " 成功");
-              this.getDataList();
-            }
-          })
-      }).catch(() => {});
-    },
-    // 提交修改文件名
-    handleSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-          let params = {
-            id: this.form.id,
-            key: this.oldKey,
-            newKey: this.form.fileKey,
-            newName: this.form.name,
-          };
-          renameFile(params).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              ElMessage.success("操作成功");
-              this.getDataList();
-              this.modalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    // 修改文件名modal
-    rename(v) {
-      this.modalTitle = "编辑文件名";
-      // 转换null为""
-      for (let attr in v) {
-        if (v[attr] == null) {
-          v[attr] = "";
-        }
-      }
-      let str = JSON.stringify(v);
-      let data = JSON.parse(str);
-      this.form = data;
-      this.oldKey = data.fileKey;
-      this.modalVisible = true;
-    },
-    // 清除选中状态
-    clearSelectAll() {
-      this.$refs.table.selectAll(false);
-      this.totalSize = "";
-    },
-    // 选中回调
-    changeSelect(e) {
-      this.selectList = e;
-      this.selectCount = e.length;
-      let size = 0;
-      e.forEach((item) => {
-        size += item.fileSize * 1.0;
-      });
-      this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
-      this.$emit("selected", e)
-    },
-  },
-  mounted() {
-    if (!this.isComponent) {
-      // 是组件的话，初始化不调用接口
-      this.init();
-    } else {
-      this.searchForm.pageSize = 18; // 页面大小
-    }
+  hideSelectFooter: {
+    type: Boolean,
+    default: false,
   },
+});
+const emit = defineEmits(["callback", "selected"]);
+
+// $forceUpdate 依赖组件实例
+const { proxy } = getCurrentInstance();
+
+const fileDirectoryId = ref("");
+const groupFormValidate = ref({
+  id: "",
+  level: 0,
+  parentId: "0",
+  directoryName: "",
+});
+const groupRuleValidate = {
+  directoryName: [
+    {
+      required: true,
+      message: "请输入分组名称",
+      trigger: "blur",
+    },
+  ],
 };
+const enableGroup = ref(false); // 是否展示分组
+const selectImage = ref(false); //是否是选择
+const accessToken = ref({}); // 上传token鉴权
+const loading = ref(false); // 表单加载状态
+const fileType = ref("pic"); // 兼容外部调用：pic / video
+const showType = ref("list"); // 展示类型
+const modalVisible = ref(false); // 添加或编辑显示
+const uploadVisible = ref(false); // 上传展示
+const videoVisible = ref(false); // 视频预览
+const picVisible = ref(false); // 图片预览
+const fileVisible = ref(false); // 文件预览
+const picTitle = ref(""); // 图片 title
+const videoTitle = ref(""); // 视频 title
+const fileTitle = ref(""); // 文件 title
+const pendingVideoUrl = ref(""); // 待播放视频地址
+const modalTitle = ref(""); // 添加或编辑标题
+const activeRoleTab = ref("STORE"); // 商家固定为 STORE，与素材 ownerId（storeId）一致
+const activeCategoryTab = ref("IMAGE");
+const searchForm = reactive({
+  // 搜索框对应data对象
+  name: "",
+  fileKey: "",
+  fileType: "",
+  fileCategory: "IMAGE",
+  userEnums: "STORE",
+  pageNumber: 1, // 当前页数
+  pageSize: 20, // 页面大小
+  sort: "createTime", // 默认排序字段
+  order: "desc", // 默认排序方式
+});
+const oldKey = ref(""); // 请求参数
+const form = ref({
+  // 表单
+  name: "",
+  fileKey: "",
+});
+const file = ref({}); // 文件数据
+// 表单验证规则
+const formValidate = {
+  name: [{required: true, message: "不能为空", trigger: "blur"}],
+  fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+};
+const submitLoading = ref(false); // 添加或编辑提交状态
+const selectList = ref([]); // 多选数据
+const selectCount = ref(0); // 多选计数
+const totalSize = ref(""); // 文件大小统计
+const columns = ref([
+  // 表头
+  {
+    type: "selection",
+    width: 60,
+    align: "center",
+  },
+  {
+    title: "缩略图(点击预览)",
+    key: "url",
+    width: 300,
+    align: "center",
+    render: (h, params) => {
+      if (isImageFile(params.row)) {
+        return h("img", {
+          attrs: {
+            src: params.row.url || "",
+            alt: "加载图片失败",
+          },
+          style: {
+            cursor: "pointer",
+            width: "80px",
+            height: "60px",
+            margin: "10px 0",
+            "object-fit": "contain",
+          },
+          on: {
+            click: () => {
+              showPic(params.row);
+            },
+          },
+        });
+      } else if (isVideoFile(params.row)) {
+        // 如果视频文件大小超过5MB不予加载video
+        if (params.row.fileSize < 1024 * 1024 * 5) {
+          return h(
+            "video",
+            {
+              style: {
+                cursor: "pointer",
+                width: "80px",
+                height: "60px",
+                margin: "10px 0",
+                "object-fit": "contain",
+              },
+              on: {
+                click: () => {
+                  showVideo(params.row);
+                },
+              },
+            },
+            [
+              h("source", {
+                attrs: {
+                  src: params.row.url,
+                },
+              }),
+            ]
+          );
+        } else {
+          return h("img", {
+            attrs: {
+              src: playIcon,
+            },
+            style: {
+              cursor: "pointer",
+              width: "80px",
+              height: "60px",
+              margin: "10px 0",
+              "object-fit": "contain",
+            },
+            on: {
+              click: () => {
+                showVideo(params.row);
+              },
+            },
+          });
+        }
+      } else {
+        return h("span", "非多媒体类型");
+      }
+    },
+  },
+  {
+    title: "文件类型",
+    key: "fileType",
+    width: 115,
+    className: selectImage.value == true ? "none" : "",
+  },
+  {
+    title: "文件大小",
+    key: "fileSize",
+    width: 115,
+    sortable: true,
+    className: selectImage.value == true ? "none" : "",
+    render: (h, params) => {
+      let m =
+        ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      return h("span", m);
+    },
+  },
+  {
+    title: "上传者",
+    key: "createBy",
+    width: 200,
+    render: (h, params) => {
+      let m;
+      if (params.row.userEnums == "MANAGER") {
+        m = "[管理员]";
+      } else if (params.row.userEnums == "STORE") {
+        m = "[商家]";
+      } else if (params.row.userEnums == "CUSTOMER") {
+        m = "[客服]";
+      } else {
+        m = "[用户]";
+      }
+      m += params.row.createBy;
+      return h("span", m);
+    },
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    fixed: "right",
+    // width: 300,
+    render: (h, params) => {
+      return h("div", [
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              marginRight: "5px",
+              display: selectImage.value === true ? "inline-block" : "none",
+            },
+            on: {
+              click: () => {
+                selectedParams(params.row);
+              },
+            },
+          },
+          "选择"
+        ),
+        h(
+          "span",
+          {
+            style: {
+              margin: "0 8px",
+              color: "#dcdee2",
+              display: selectImage.value === true ? "inline-block" : "none",
+            },
+          },
+          "|"
+        ),
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              marginRight: "5px",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+            on: {
+              click: () => {
+                download(params.row);
+              },
+            },
+          },
+          "下载"
+        ),
+        h(
+          "span",
+          {
+            style: {
+              margin: "0 8px",
+              color: "#dcdee2",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+          },
+          "|"
+        ),
+        h(
+          "a",
+          {
+            style: {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+              display: selectImage.value == true ? "none" : "inline-block",
+            },
+            on: {
+              click: () => {
+                remove(params.row);
+              },
+            },
+          },
+          "删除"
+        ),
+      ]);
+    },
+  },
+]);
+const viewColumns = ref([
+  {
+    title: "缩略图(点击预览)",
+    key: "url",
+    // width: 150,
+    align: "center",
+    render: (h, params) => {
+      if (isImageFile(params.row)) {
+        return h("img", {
+          attrs: {
+            src: params.row.url || "",
+            alt: "加载图片失败",
+          },
+          style: {
+            cursor: "pointer",
+            width: "80px",
+            height: "60px",
+            margin: "10px 0",
+            "object-fit": "contain",
+          },
+          on: {
+            click: () => {
+              showPic(params.row);
+            },
+          },
+        });
+      } else if (isVideoFile(params.row)) {
+        // 如果视频文件大小超过5MB不予加载video
+        if (params.row.fileSize < 1024 * 1024 * 5) {
+          return h(
+            "video",
+            {
+              style: {
+                cursor: "pointer",
+                width: "80px",
+                height: "60px",
+                margin: "10px 0",
+                "object-fit": "contain",
+              },
+              on: {
+                click: () => {
+                  showVideo(params.row);
+                },
+              },
+            },
+            [
+              h("source", {
+                attrs: {
+                  src: params.row.url,
+                },
+              }),
+            ]
+          );
+        } else {
+          return h("img", {
+            attrs: {
+              src: playIcon,
+            },
+            style: {
+              cursor: "pointer",
+              width: "80px",
+              height: "60px",
+              margin: "10px 0",
+              "object-fit": "contain",
+            },
+            on: {
+              click: () => {
+                showVideo(params.row);
+              },
+            },
+          });
+        }
+      } else {
+        return h("span", "非多媒体类型");
+      }
+    },
+  },
+  {
+    title: "上传者",
+    key: "createBy",
+    width: 120,
+    sortable: true,
+    render: (h, params) => {
+      let m;
+      if (params.row.userEnums == "MANAGER") {
+        m = "[管理员]";
+      } else if (params.row.userEnums == "STORE") {
+        m = "[商家]";
+      } else if (params.row.userEnums == "CUSTOMER") {
+        m = "[客服]";
+      } else {
+        m = "[用户]";
+      }
+      m += params.row.createBy;
+      return h("span", m);
+    },
+  },
+  {
+    title: "操作",
+    key: "action",
+    align: "center",
+    fixed: "right",
+    width: 300,
+    render: (h, params) => {
+      return h("div", [
+        h(
+          "Button",
+          {
+            props: {
+              type: "default",
+              size: "small",
+            },
+            style: {
+              marginRight: "5px",
+              display:
+                selectImage.value === true ? "inline-block" : "none",
+            },
+            on: {
+              click: () => {
+                selectedParams(params.row);
+              },
+            },
+          },
+          "选择"
+        )
+      ]);
+    },
+  },
+]);
+const data = ref([]); // 表单数据
+const total = ref(0); // 表单数据总数
+const pageSizeOpts = ref([5, 10, 20]); // 页码展示项
+const list = ref([]); // 列表
+//树结构
+const treeData = ref([]);
+const treeDataDefault = ref([]);
+const treeRenderKey = ref(0);
+const selectedGroupData = ref("");
+const insertOrUpdate = ref("insert");
+const groupLoading = ref(false);
+// 图片列表
+const selectedOss = ref([]);
+const buttonProps = {type: 'default', size: 'small',};
+// 历史遗留死代码：模板未使用 myData，其 render 中的 append 从未定义，原样保留
+const myData = ref([
+  {
+    title: 'parent 1',
+    expand: true,
+    render: (h, {root, node, data}) => {
+      return h('span', {style: {display: 'inline-block', width: '100%'}}, [
+        h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
+          [h("Button", {
+            ...buttonProps,
+            icon: 'ios-add',
+            type: 'primary',
+            style: {width: '64px'},
+            onClick: () => {
+              // eslint-disable-next-line no-undef -- 历史遗留：append 从未定义，原样保留
+              append(data)
+            }
+          })
+          ])
+      ]);
+    },
+    children: [
+      {
+        title: 'child 1-1',
+        expand: true,
+        children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+      },
+      {
+        title: 'child 1-2',
+        expand: true,
+        children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
+      }
+    ]
+  }
+]);
+
+// 模板 ref：up/form/formValidate 与顶层变量重名，改名避免互相覆盖
+const upRef = ref(null);
+const formRef = ref(null);
+const formValidateRef = ref(null);
+const dplayerRef = ref(null);
+// 历史遗留：模板中不存在 ref="table"，clearSelectAll 调用会报错，原样保留
+const tableRef = ref(null);
+
+watch(selectImage, (val) => {
+  if (val) {
+    if (props.isComponent) {
+      // 弹窗选图模式：加载本店素材，而非平台管理员资源
+      activeRoleTab.value = "STORE";
+      searchForm.userEnums = "STORE";
+      init();
+    } else if (!data.value.length) {
+      init();
+    }
+  }
+});
+watch(
+  () => props.choose,
+  (val) => {
+    if (val) selectImage.value = val;
+  }
+);
+watch(selectedOss, (val) => {
+  if (val && val.length && !(props.isComponent && selectImage.value)) {
+    emit("callback", { url: val[val.length - 1].split(",")[1] });
+  }
+});
+// 弹窗打开时重置状态并加载分组与素材列表
+watch(
+  () => props.initialize,
+  (val) => {
+    if (val && props.isComponent) {
+      selectedOss.value = [];
+      activeRoleTab.value = "STORE";
+      activeCategoryTab.value = "IMAGE";
+      searchForm.userEnums = "STORE";
+      searchForm.fileCategory = "IMAGE";
+      delete searchForm.fileDirectoryId;
+      selectedGroupData.value = "";
+      selectImage.value = true;
+    }
+  }
+);
+
+// 商家端展示分组树与分组维护能力
+const canShowGroups = computed(() => {
+  return activeRoleTab.value === "STORE";
+});
+// 商家端允许上传图片/视频/文件
+const canUploadImages = computed(() => {
+  return activeRoleTab.value === "STORE";
+});
+const uploadButtonText = computed(() => {
+  const textMap = {
+    IMAGE: "上传图片",
+    VIDEO: "上传视频",
+    FILE: "上传文件",
+  };
+  return textMap[activeCategoryTab.value] || "上传图片";
+});
+const uploadData = computed(() => {
+  const data = {
+    userEnums: activeRoleTab.value,
+    directoryType: activeRoleTab.value,
+  };
+  const directoryId = searchForm.fileDirectoryId;
+  if (directoryId && directoryId !== "0") {
+    data.directoryPath = directoryId;
+  }
+  return data;
+});
+
+function beforeUpload(file) {
+  if (!canUploadImages.value) {
+    ElMessage.warning("当前模块不支持上传");
+    return false;
+  }
+  const maxSize = 20480 * 1024;
+  if (file && file.size > maxSize) {
+    handleMaxSize(file);
+    return false;
+  }
+  return true;
+}
+function handleTreeNodeClick(data) {
+  if (data) {
+    handleCateChange([data]);
+  }
+}
+function onTreeDropdownCommand(cmd, data) {
+  selectedGroupData.value = data;
+  if (cmd === "edit") {
+    handleContextMenuEdit(null, null, data);
+  } else if (cmd === "delete") {
+    handleContextMenuDelete();
+  }
+}
+function onMouseOver(item, index) {
+  data.value[index].isShowPreview = true;
+  proxy.$forceUpdate();
+}
+function onMouseOut(item, index) {
+  data.value[index].isShowPreview = false;
+}
+function handleRoleTabChange(name) {
+  activeRoleTab.value = name;
+  searchForm.pageNumber = 1;
+  searchForm.userEnums = name;
+  delete searchForm.fileDirectoryId;
+  selectedGroupData.value = "";
+  groupFormValidate.value.id = "";
+  groupFormValidate.value.level = 0;
+  selectedOss.value = [];
+  updateTreeDataByRole();
+  getDataList();
+}
+function handleCategoryTabChange(name) {
+  activeCategoryTab.value = name;
+  searchForm.fileCategory = name;
+  searchForm.fileType = "";
+  searchForm.pageNumber = 1;
+  delete searchForm.fileDirectoryId;
+  selectedGroupData.value = "";
+  selectedOss.value = [];
+  if (showType.value === "list") {
+    searchForm.pageSize = 20;
+  } else {
+    searchForm.pageSize = 12;
+  }
+  updateTreeDataByRole();
+  getDataList();
+}
+function updateTreeDataByRole() {
+  const rootTitleMap = {
+    IMAGE: "全部图片",
+    VIDEO: "全部视频",
+    FILE: "全部文件",
+  };
+  const currentTree = filterTreeByRole(treeDataDefault.value, activeRoleTab.value);
+  treeData.value = [
+    {
+      title: rootTitleMap[activeCategoryTab.value] || "全部图片",
+      label: "全部分类",
+      value: "0",
+      type: activeRoleTab.value,
+      level: 0,
+      children: [],
+      id: "0",
+      categoryId: 0,
+    },
+    ...currentTree,
+  ];
+  treeRenderKey.value += 1;
+}
+function filterTreeByRole(tree = [], role) {
+  if (!tree || !tree.length) return [];
+  return tree
+    .filter((item) => item.type === role)
+    .map((item) => ({
+      ...item,
+      children: [],
+    }));
+}
+// 复选框值改变时触发
+function selectOssChange(e) {
+  if (props.maxSelect === 1 && e.length > 1) {
+    const last = e[e.length - 1];
+    selectedOss.value = [last];
+    e = [last];
+  }
+  if (e) {
+    selectList.value = e.map(item => {
+      return {id: item.split(',')[0]}
+    });
+    selectCount.value = e.length;
+    // let size = 0;
+    // e.forEach((item) => {size += item.fileSize * 1.0;});
+    // totalSize.value = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+    emit("selected", e);
+  }
+}
+function handleCardClick(item, event) {
+  if (!(props.isComponent && selectImage.value)) return;
+  if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
+    return;
+  }
+  const key = `${item.id},${item.url}`;
+  let next;
+  if (props.maxSelect === 1) {
+    next = selectedOss.value.includes(key) ? [] : [key];
+  } else if (selectedOss.value.includes(key)) {
+    next = selectedOss.value.filter((k) => k !== key);
+  } else {
+    next = [...selectedOss.value, key];
+  }
+  selectedOss.value = next;
+  selectOssChange(next);
+}
+// 页码改变时回调
+function pageChange(value) {
+  selectedOss.value = [];
+  searchForm.pageNumber = value;
+  getDataList();
+}
+// 自定义tree节点显示内容和交互
+function renderContent(h, {root, node, data}) {
+  if (data.value === '0') {
+    return h('span', {style: {display: 'inline-block', width: '100%'}},
+      [
+        h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}}, [])
+      ]
+    );
+  } else {
+    return h('span', {style: {display: 'inline-block', width: '100%'}},
+      [
+        h('span', [h("Icon", {type: 'ios-paper-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
+        h('span', {style: {display: 'inline-block', float: 'right', marginRight: '10px'}},
+          [
+            h("Dropdown", {style: {marginLeft: "4px"}},
+              [
+                h("Icon", {
+                  props: {type: 'ios-more', size: "20",},
+                  style: {display: 'inline-block'},
+                  on: {
+                    click: () => {
+                    }
+                  }
+                }),
+                h("DropdownMenu", {
+                  slot: "list"
+                }, [
+                  h("DropdownItem", {
+                    nativeOn: {
+                      click: () => {
+                        handleContextMenuEdit(root, node, data)
+                      }
+                    }
+                  }, "编辑"),
+                  h("DropdownItem", {
+                    nativeOn: {
+                      click: () => {
+                        handleContextMenuDelete()
+                      }
+                    }
+                  }, "删除"),
+                ])
+              ]),
+          ])
+      ]
+    );
+  }
+
+}
+
+
+function handleContextMenu(val) {
+  console.log('handleContextMenu', val);
+  selectedGroupData.value = val;
+}
+// 编辑分组
+function handleContextMenuEdit(root, node, data) {
+  insertOrUpdate.value = "update";
+  enableGroup.value = true;
+  groupFormValidate.value.id = data.value;
+  groupFormValidate.value.directoryName = data.title || data.label;
+  groupFormValidate.value.level = 0;
+  groupFormValidate.value.parentId = "0";
+}
+// 删除分组
+async function handleContextMenuDelete(val) {
+  ElMessageBox.confirm("是否删除该分组", "提示", { type: "warning" }).then(async () => {
+      const res = await delFileDirectory(selectedGroupData.value.value);
+      if (res.success) {
+        ElMessage.success("删除成功!");
+        getDataList();
+        getAllList();
+      }
+  }).catch(() => {});
+}
+async function submitAddGroup() {
+  formValidateRef.value.validate(async (valid) => {
+    if (valid) {
+      let res;
+      const params = {
+        directoryName: groupFormValidate.value.directoryName,
+        level: 0,
+        parentId: "0",
+        directoryType: activeRoleTab.value,
+      };
+      if (insertOrUpdate.value === "insert") {
+        res = await addFileDirectory(params);
+      } else {
+        params.id = groupFormValidate.value.id;
+        res = await updateFileDirectory(params);
+      }
+
+      if (res.success) {
+        ElMessage.success("操作成功!");
+        enableGroup.value = false;
+        getAllList();
+      }
+      } else {
+      ElMessage.error("请填写完整信息!");
+    }
+  });
+}
+function handleClickAddGroup() {
+  insertOrUpdate.value = "insert";
+  groupFormValidate.value = {
+    id: "",
+    level: 0,
+    parentId: "0",
+    directoryName: "",
+  };
+  enableGroup.value = true;
+}
+function copyFileUrl(row) {
+  const textArea = document.createElement("textarea");
+  textArea.value = row.url;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try {
+    document.execCommand("copy");
+    ElMessage.success("复制成功");
+  } catch (err) {
+    console.error("Unable to copy to clipboard", err);
+  }
+  document.body.removeChild(textArea);
+}
+
+// 获取全部文件目录
+function getAllList(parent_id) {
+  loading.value = true;
+  getFileDirectory(parent_id).then((res) => {
+    loading.value = false;
+    if (res.success) {
+      treeDataDefault.value = getTree(res.result);
+      updateTreeDataByRole();
+    }
+  });
+}
+// 文件目录分类格式化：仅展示一级分组
+function getTree(tree = []) {
+  const flat = [];
+  const walk = (nodes) => {
+    if (!nodes || !nodes.length) return;
+    nodes.forEach((item) => {
+      flat.push({
+        title: item.directoryName,
+        value: item.id,
+        type: item.directoryType,
+        label: item.directoryName,
+        level: 0,
+        expand: false,
+        selected: false,
+        contextmenu: false,
+        parentId: "0",
+        children: [],
+      });
+      if (item.children && item.children.length) {
+        walk(item.children);
+      }
+    });
+  };
+  walk(tree);
+  return flat;
+}
+
+// 选择分类回调
+function handleCateChange(data) {
+  if (data) {
+    selectedGroupData.value = data[0];
+    let {value, type, level} = data[0];
+    list.value.push({value, type, level});
+    searchForm.fileDirectoryId = value;
+    if (value === "0" || value === 0) {
+      delete searchForm.fileDirectoryId;
+    }
+    searchForm.userEnums = type || activeRoleTab.value;
+    getDataList();
+    selectedOss.value = [];
+  }
+}
+/**
+ * 选择
+ */
+function selectedParams(val) {
+  emit("callback", val);
+}
+function handleSelectConfirm() {
+  if (!selectedOss.value.length) {
+    ElMessage.warning("请选择图片");
+    return;
+  }
+  const last = selectedOss.value[selectedOss.value.length - 1];
+  emit("callback", { url: last.split(",")[1] });
+}
+function handleSelectCancel() {
+  selectedOss.value = [];
+  emit("callback", { url: "" });
+}
+// 初始化数据
+function init() {
+  accessToken.value = {
+    accessToken: getStore("accessToken"),
+  };
+  searchForm.userEnums = activeRoleTab.value;
+  searchForm.fileCategory = activeCategoryTab.value;
+  getDataList();
+  getAllList();
+}
+// 查看大图
+function showPic(v) {
+  prepareFileMeta(v);
+  picTitle.value = v.name || "图片预览";
+  picVisible.value = true;
+}
+// 查看文件（PDF 等）
+function showFile(v) {
+  prepareFileMeta(v);
+  fileTitle.value = v.name || "文件预览";
+  fileVisible.value = true;
+}
+// 查看视频
+function showVideo(v) {
+  prepareFileMeta(v);
+  videoTitle.value = v.name || "视频预览";
+  pendingVideoUrl.value = v.url;
+  videoVisible.value = true;
+}
+async function initDPlayer() {
+  const container = dplayerRef.value;
+  if (!container || !pendingVideoUrl.value) return;
+  if (dp) {
+    dp.destroy();
+    dp = null;
+  }
+  const { default: DPlayer } = await import("dplayer");
+  dp = new DPlayer({
+    container,
+    screenshot: true,
+    video: {
+      url: pendingVideoUrl.value,
+    },
+  });
+}
+// 关闭视频
+function closeVideo() {
+  if (dp) {
+    dp.destroy();
+    dp = null;
+  }
+  pendingVideoUrl.value = "";
+}
+// 分页 改变页码
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getDataList();
+  clearSelectAll();
+}
+// 分页 改变页数
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getDataList();
+}
+// 排序
+function changeSort(e) {
+  searchForm.sort = e.key;
+  searchForm.order = e.order;
+  if (e.order == "normal") {
+    searchForm.order = "";
+  }
+  getDataList();
+}
+// 起止时间筛选已移除
+// 改变查看方式
+function changeShowType() {
+  searchForm.pageNumber = 1;
+  if (showType.value == "list") {
+    searchForm.pageSize = 20;
+  } else {
+    searchForm.pageSize = 12;
+  }
+  getDataList();
+}
+// 获取列表数据
+function getDataList(type = null) {
+  if (showType.value == "list") {
+    pageSizeOpts.value = [10, 20, 50];
+  } else {
+    pageSizeOpts.value = [12, 24, 48];
+  }
+  loading.value = true;
+  getFileListData(searchForm)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else {
+        data.value = [];
+        total.value = 0;
+      }
+    })
+    .catch(() => {
+      data.value = [];
+      total.value = 0;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+// 兼容外部按场景切换分类（如装修选图/选视频）
+function changeFileType() {
+  const categoryMap = {
+    pic: "IMAGE",
+    video: "VIDEO",
+    file: "FILE",
+    all: "IMAGE",
+  };
+  const category = categoryMap[fileType.value] || "IMAGE";
+  activeCategoryTab.value = category;
+  handleCategoryTabChange(category);
+}
+function isImageFile(row) {
+  return row?.fileCategory === "IMAGE" || (row?.fileType && row.fileType.includes("image"));
+}
+function isVideoFile(row) {
+  return row?.fileCategory === "VIDEO" || (row?.fileType && row.fileType.includes("video"));
+}
+function isPdfFile(row) {
+  return (
+    row?.fileType === "application/pdf" ||
+    (row?.name && row.name.toLowerCase().endsWith(".pdf"))
+  );
+}
+function previewFile(item) {
+  if (isVideoFile(item)) {
+    showVideo(item);
+  } else if (isImageFile(item)) {
+    showPic(item);
+  } else {
+    showFile(item);
+  }
+}
+function prepareFileMeta(v) {
+  file.value = v;
+  file.value.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+}
+// 上传文件超过大小限制
+function handleMaxSize() {
+  ElMessage.warning("所选文件大小过大，不得超过 20MB");
+}
+// 上传成功回调
+function handleSuccess(res, file) {
+  if (!canUploadImages.value) {
+    ElMessage.warning("当前模块不支持上传");
+    return;
+  }
+  if (res.success) {
+    ElMessage.success("上传文件 " + file.name + " 成功");
+    getDataList();
+  } else {
+    ElMessage.error(res.message);
+  }
+}
+// 上传失败回调
+function handleError(error, file, fileList) {
+  ElMessage.error(error.toString());
+}
+// 清空上传文件
+function clearFiles() {
+  upRef.value.clearFiles();
+}
+// 取消修改文件名
+function handleCancel() {
+  modalVisible.value = false;
+}
+// 下载文件
+function download(v) {
+  window.open(
+    v.url + "?attname=&response-content-type=application/octet-stream"
+  );
+}
+// 批量删除文件
+function removeAll() {
+  if (selectCount.value <= 0) {
+    ElMessage.warning("您还未选择要删除的数据");
+    return;
+  }
+  ElMessageBox.confirm("您确认要删除所选的 " + selectCount.value + " 个文件?", "确认删除", { type: "warning" }).then(() => {
+      let ids = "";
+      selectList.value.forEach(function (e) {
+        ids += e.id + ",";
+      });
+      ids = ids.substring(0, ids.length - 1);
+      deleteFile(ids).then((res) => {
+        if (res.success) {
+          selectedOss.value = [];
+          // clearSelectAll();
+          init();
+          ElMessage.success("批量删除文件成功");
+        }
+      })
+        .catch((err) => {
+          console.log("失败", err);
+        });
+  }).catch(() => {});
+}
+// 单个删除文件
+function remove(v) {
+  ElMessageBox.confirm("您确认要删除文件 " + v.name + " ?", "确认删除", { type: "warning" }).then(() => {
+      deleteFile(v.id).then((res) => {
+        if (res.success) {
+          ElMessage.success("删除文件 " + v.name + " 成功");
+          getDataList();
+        }
+      })
+  }).catch(() => {});
+}
+// 提交修改文件名
+function handleSubmit() {
+  formRef.value.validate((valid) => {
+    if (valid) {
+      submitLoading.value = true;
+      let params = {
+        id: form.value.id,
+        key: oldKey.value,
+        newKey: form.value.fileKey,
+        newName: form.value.name,
+      };
+      renameFile(params).then((res) => {
+        submitLoading.value = false;
+        if (res.success) {
+          ElMessage.success("操作成功");
+          getDataList();
+          modalVisible.value = false;
+        }
+      });
+    }
+  });
+}
+// 修改文件名modal
+function rename(v) {
+  modalTitle.value = "编辑文件名";
+  // 转换null为""
+  for (let attr in v) {
+    if (v[attr] == null) {
+      v[attr] = "";
+    }
+  }
+  let str = JSON.stringify(v);
+  let data = JSON.parse(str);
+  form.value = data;
+  oldKey.value = data.fileKey;
+  modalVisible.value = true;
+}
+// 清除选中状态
+function clearSelectAll() {
+  tableRef.value.selectAll(false);
+  totalSize.value = "";
+}
+// 选中回调
+function changeSelect(e) {
+  selectList.value = e;
+  selectCount.value = e.length;
+  let size = 0;
+  e.forEach((item) => {
+    size += item.fileSize * 1.0;
+  });
+  totalSize.value = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+  emit("selected", e)
+}
+
+onMounted(() => {
+  if (!props.isComponent) {
+    // 是组件的话，初始化不调用接口
+    init();
+  } else {
+    searchForm.pageSize = 18; // 页面大小
+  }
+});
+
+// 父组件通过 ref 设置 selectImage 开启选图模式
+defineExpose({ selectImage });
 </script>
diff --git a/seller/yarn.lock b/seller/yarn.lock
index 11696c122..a95a15417 100644
--- a/seller/yarn.lock
+++ b/seller/yarn.lock
@@ -2138,7 +2138,7 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.6.4":
+"@vue/devtools-api@^6.6.4":
   version "6.6.4"
   resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz#cbe97fe0162b365edc1dba80e173f90492535343"
   integrity sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==
@@ -5238,6 +5238,11 @@ normalize-wheel-es@^1.2.0:
   resolved "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
   integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
 
+nostics@^1.1.4:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/nostics/-/nostics-1.3.0.tgz#e1d538463acb0207f9a0ef9ec551b075930559c4"
+  integrity sha512-wzRsrJwNlFbqIRQt8aCeL2WE8USip/uuvGSOZV1D02CxX8ABTMbw8IywKjH7yWHETMXbWJI4OBpihg9rmz2Vyg==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz"
@@ -5526,6 +5531,13 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pinia@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-4.0.3.tgz#9cf9e353b3602e24a96e4ca4425817ecb9993292"
+  integrity sha512-XMQqpvjgG7LMqVhhFUzKLT4KEbsYbfZZ0CZU9PgdFm1O2VKBmIkykL8+SfNhOaT7sR0wT6BEgKT0YNDYWgmVRA==
+  dependencies:
+    nostics "^1.1.4"
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz"
@@ -6947,13 +6959,6 @@ vuedraggable@^4.1.0:
   dependencies:
     sortablejs "1.14.0"
 
-vuex@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
-  integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
-  dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.11"
-
 watchpack@^2.4.0, watchpack@^2.5.2:
   version "2.5.2"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.5.2.tgz#e12e82d84674266fc1c6dbfe38891b92ff0522ec"