From 80acd0fd2e751e4ddc47c763a7084375729f6b77 Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Mon, 9 Mar 2026 16:12:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=A7=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=8A=B6=E6=80=81=E7=BB=84=E4=BB=B62?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mall/admin/kefu/list.uvue               | 53 +--------------
 .../mall/admin/marketing/checkin/reward.uvue  | 24 +------
 pages/mall/admin/marketing/coupon/list.uvue   | 33 ++--------
 pages/mall/admin/marketing/lottery/list.uvue  | 42 ++----------
 .../product/product-management/index.uvue     | 65 ++-----------------
 5 files changed, 26 insertions(+), 191 deletions(-)

diff --git a/pages/mall/admin/kefu/list.uvue b/pages/mall/admin/kefu/list.uvue
index 8eeb3a9f..c66d25e1 100644
--- a/pages/mall/admin/kefu/list.uvue
+++ b/pages/mall/admin/kefu/list.uvue
@@ -13,7 +13,7 @@
         <view class="th col-id"><text class="th-txt">ID</text></view>
         <view class="th col-avatar"><text class="th-txt">客服头像</text></view>
         <view class="th col-name"><text class="th-txt">客服名称</text></view>
-        <view class="th col-status"><text class="th-txt">客服状态</text></view>
+        <view class="th col-status"><text class="th-txt">状态</text></view>
         <view class="th col-time"><text class="th-txt">添加时间</text></view>
         <view class="th col-op"><text class="th-txt">操作</text></view>
       </view>
@@ -26,12 +26,7 @@
           </view>
           <view class="td col-name"><text class="td-txt">{{ item.name }}</text></view>
           <view class="td col-status">
-            <view :class="['switch-btn', item.status ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
-              <view class="switch-inner">
-                <text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
-              </view>
-              <view class="switch-dot"></view>
-            </view>
+            <StatusSwitch v-model="item.status" />
           </view>
           <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
           <view class="td col-op">
@@ -68,6 +63,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface KefuItem {
   id: string
@@ -87,10 +83,6 @@ const kefuList = ref<KefuItem[]>([
   { id: '152', avatar: '/static/logo.png', name: 'kk', status: true, time: '2024-09-16 00:05:22' }
 ])
 
-const toggleStatus = (item: KefuItem) => {
-  item.status = !item.status
-}
-
 const handleAdd = () => {
   console.log('Add Kefu')
 }
@@ -202,45 +194,6 @@ const handleAdd = () => {
   background-color: #f0f0f0;
 }
 
-/* 开关组件 1:1 复刻 */
-.switch-btn {
-  width: 60px;
-  height: 24px;
-  border-radius: 12px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 6px;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.switch-on { background-color: #2d8cf0; }
-.switch-off { background-color: #ccc; }
-
-.switch-inner {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-}
-
-.switch-txt {
-  color: #fff;
-  font-size: 11px;
-}
-
-.switch-dot {
-  width: 18px;
-  height: 18px;
-  background-color: #fff;
-  border-radius: 9px;
-  position: absolute;
-  top: 3px;
-}
-
-.switch-on .switch-dot { right: 3px; }
-.switch-off .switch-dot { left: 3px; }
-
 /* 操作按钮 */
 .btn-action {
   font-size: 13px;
diff --git a/pages/mall/admin/marketing/checkin/reward.uvue b/pages/mall/admin/marketing/checkin/reward.uvue
index 43c0a535..6320e3ab 100644
--- a/pages/mall/admin/marketing/checkin/reward.uvue
+++ b/pages/mall/admin/marketing/checkin/reward.uvue
@@ -23,7 +23,7 @@
           <view class="th cell-type">类型</view>
           <view class="th cell-days">签到天数</view>
           <view class="th cell-reward">奖励内容</view>
-          <view class="th cell-status">是否可用</view>
+          <view class="th cell-status">状态</view>
           <view class="th cell-op">操作</view>
         </view>
 
@@ -36,9 +36,7 @@
               <text class="td-txt">积分+{{ item.integral }}, 经验+{{ item.exp }}</text>
             </view>
             <view class="td cell-status">
-              <view class="switch-mock" :class="{ active: item.is_open }" @click="toggleStatus(item)">
-                <view class="switch-dot"></view>
-              </view>
+              <StatusSwitch v-model="item.is_open" />
             </view>
             <view class="td cell-op">
               <text class="op-link" @click="handleEdit(item)">编辑</text>
@@ -81,6 +79,7 @@
 
 <script setup lang="uts">
 import { ref, reactive, computed } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const currentTab = ref('continuous')
 const showModal = ref(false)
@@ -114,11 +113,6 @@ const openModal = (type: string) => {
   showModal.value = true
 }
 
-const toggleStatus = (item: any) => {
-  item.is_open = !item.is_open
-  uni.showToast({ title: '修改成功', icon: 'success' })
-}
-
 const handleEdit = (item: any) => {
   uni.showToast({ title: '编辑功能暂未对接', icon: 'none' })
 }
@@ -238,18 +232,6 @@ const handleSubmit = () => {
 .op-link.del { color: #ff4d4f; }
 .ml-10 { margin-left: 10px; }
 
-.switch-mock {
-  width: 44px; height: 22px; background-color: #bfbfbf; border-radius: 11px;
-  display: flex; align-items: center; padding: 0 4px; position: relative;
-  transition: background-color 0.3s; cursor: pointer;
-}
-.switch-mock.active { background-color: #1890ff; }
-.switch-dot {
-  width: 14px; height: 14px; background-color: #fff; border-radius: 50%;
-  position: absolute; left: 4px; transition: left 0.3s;
-}
-.switch-mock.active .switch-dot { left: 26px; }
-
 /* Modal */
 .modal-mask {
   position: fixed; top: 0; left: 0; right: 0; bottom: 0;
diff --git a/pages/mall/admin/marketing/coupon/list.uvue b/pages/mall/admin/marketing/coupon/list.uvue
index 23ebc2da..1412f549 100644
--- a/pages/mall/admin/marketing/coupon/list.uvue
+++ b/pages/mall/admin/marketing/coupon/list.uvue
@@ -63,7 +63,7 @@
             <view class="th p-3">领取/使用限制</view>
             <view class="th p-3">领取日期</view>
             <view class="th p-2">发布数量</view>
-            <view class="th p-2">是否开启</view>
+            <view class="th p-2">状态</view>
             <view class="th p-1 op-cell shadow-left">操作</view>
           </view>
 
@@ -102,9 +102,10 @@
                   </view>
                 </view>
                 <view class="td p-2">
-                  <view :class="['switch-box', item.isOpen ? 'active' : '']" @click="toggleStatus(index)">
-                    <view class="switch-dot"></view>
-                  </view>
+                  <StatusSwitch 
+                    :modelValue="item.isOpen" 
+                    @update:modelValue="(val : boolean) => onToggleStatus(index, val)"
+                  />
                 </view>
                 <!-- 操作列：Sticky 固定 -->
                 <view class="td p-1 op-cell shadow-left">
@@ -199,6 +200,7 @@
 
 <script setup lang="uts">
 import { ref, reactive, onMounted, computed } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 import supa from '@/components/supadb/aksupainstance.uts'
 
 interface CouponItem {
@@ -704,29 +706,6 @@ onMounted(() => {
 .op-split { color: #e8eaec; margin: 0; font-size: 12px; }
 .text-danger { color: #ed4014; }
 
-/* Switch 开关 */
-.switch-box {
-  width: 40px;
-  height: 20px;
-  background-color: #dcdfe6;
-  border-radius: 10px;
-  position: relative;
-  transition: all 0.3s;
-  cursor: pointer;
-}
-.switch-box.active { background-color: #19be6b; }
-.switch-dot {
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 8px;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: all 0.3s;
-}
-.switch-box.active .switch-dot { transform: translateX(20px); }
-
 /* 📱 响应式媒体查询 (Priority 策略) */
 /* 平板：隐藏次要列 */
 @media screen and (max-width: 1450px) {
diff --git a/pages/mall/admin/marketing/lottery/list.uvue b/pages/mall/admin/marketing/lottery/list.uvue
index 5440ad62..ad2e75c6 100644
--- a/pages/mall/admin/marketing/lottery/list.uvue
+++ b/pages/mall/admin/marketing/lottery/list.uvue
@@ -50,7 +50,7 @@
         <text class="col-80 center">抽奖次数</text>
         <text class="col-80 center">中奖次数</text>
         <text class="col-80 center">活动状态</text>
-        <text class="col-80 center">开启状态</text>
+        <text class="col-80 center">状态</text>
         <text class="col-180">活动时间</text>
         <text class="col-120 center">操作</text>
       </view>
@@ -68,9 +68,7 @@
             <text class="status-text">{{ item.statusText }}</text>
           </view>
           <view class="col-80 center">
-            <view class="switch-box" :class="item.isOpen ? 'active' : ''" @click="toggleStatus(item)">
-              <view class="switch-dot"></view>
-            </view>
+            <StatusSwitch v-model="item.isOpen" />
           </view>
           <view class="col-180">
             <view class="time-range">
@@ -106,7 +104,12 @@
 </template>
 
 <script uts>
+import StatusSwitch from '@/components/StatusSwitch.uvue'
+
 export default {
+  components: {
+    StatusSwitch
+  },
   data() {
     return {
       searchQuery: '',
@@ -204,10 +207,6 @@ export default {
     },
     handleSearch() {
       uni.showToast({ title: '搜索', icon: 'none' })
-    },
-    toggleStatus(item : any) {
-      item.isOpen = !item.isOpen
-      uni.showToast({ title: '状态已变更', icon: 'none' })
     }
   }
 }
@@ -334,33 +333,6 @@ export default {
 .id-text { font-size: 13px; color: #808695; }
 .status-text { font-size: 13px; color: #515a6e; }
 
-/* 开关组件 */
-.switch-box {
-  width: 40px;
-  height: 20px;
-  background-color: #ccc;
-  border-radius: 10px;
-  position: relative;
-  transition: background-color 0.3s;
-  cursor: pointer;
-}
-.switch-box.active {
-  background-color: #2d8cf0;
-}
-.switch-dot {
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  transition: transform 0.3s;
-}
-.switch-box.active .switch-dot {
-  transform: translateX(20px);
-}
-
 .time-range {
   display: flex;
   flex-direction: column;
diff --git a/pages/mall/admin/product/product-management/index.uvue b/pages/mall/admin/product/product-management/index.uvue
index 62c97616..53d7b4ac 100644
--- a/pages/mall/admin/product/product-management/index.uvue
+++ b/pages/mall/admin/product/product-management/index.uvue
@@ -115,10 +115,12 @@
           <view class="td col-stock"><text>{{ item.stock }}</text></view>
           <view class="td col-sort"><text>{{ item.sort }}</text></view>
           <view class="td col-status">
-            <view class="mock-switch" :class="{ on: item.status === 1 }">
-              <text class="switch-txt">{{ item.status === 1 ? '上架' : '下架' }}</text>
-              <view class="switch-dot"></view>
-            </view>
+            <StatusSwitch 
+              :modelValue="item.status === 1" 
+              activeText="上架" 
+              inactiveText="下架"
+              @update:modelValue="(val : boolean) => item.status = (val ? 1 : 0)"
+            />
           </view>
           <view class="td col-op op-group">
             <text class="op-link" @click.stop="goEdit(item.id)">编辑</text>
@@ -162,6 +164,7 @@
 <script setup lang="uts">
 import { ref } from 'vue'
 import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const total = ref(49)
 const activeStatus = ref('selling')
@@ -521,60 +524,6 @@ function moveToRecycle(id: number) {
 .p-name-txt { font-size: 13px; line-height: 1.4; color: #333; }
 
 .activity-tags {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 4px;
-  .tag {
-    padding: 2px 4px;
-    font-size: 11px;
-    color: #fff;
-    border-radius: 2px;
-    &.kj { background: #1890ff; }
-    &.pt { background: #52c41a; }
-    &.ms { background: #f5222d; }
-  }
-}
-
-.mock-switch {
-  width: 50px;
-  height: 20px;
-  background: #dbdbdb;
-  border-radius: 10px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  padding: 0 4px;
-  &.on {
-    background: #1890ff;
-    .switch-dot { left: 32px; }
-    .switch-txt { left: 6px; }
-  }
-  &:not(.on) {
-    .switch-txt { right: 6px; }
-    .switch-dot { left: 2px; }
-  }
-  .switch-txt { 
-    position: absolute;
-    font-size: 10px; 
-    color: #fff; 
-  }
-  .switch-dot {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    background: #fff;
-    border-radius: 50%;
-    transition: left 0.2s;
-  }
-}
-
-.op-link { 
-  font-size: 13px; 
-  color: #1890ff; 
-  cursor: pointer; 
-  &.danger { color: #ff4d4f; }
-}
 .op-divider { color: #e8e8e8; font-size: 12px; margin: 0 4px; }
 
 .more-dropdown {