From 05049e728e71ac032f360bd111fa3c2066929de6 Mon Sep 17 00:00:00 2001
From: huangzhenbao <17818024429@163.com>
Date: Mon, 9 Mar 2026 15:59:53 +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=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/mall/admin/cms/category/list.uvue       | 32 +-------
 pages/mall/admin/kefu/auto_reply.uvue         | 48 +----------
 .../mall/admin/marketing/seckill/config.uvue  | 82 +------------------
 pages/mall/admin/marketing/seckill/index.uvue | 32 +-------
 pages/mall/admin/marketing/seckill/list.uvue  | 37 +--------
 5 files changed, 14 insertions(+), 217 deletions(-)

diff --git a/pages/mall/admin/cms/category/list.uvue b/pages/mall/admin/cms/category/list.uvue
index 396e25b2..c0136ed2 100644
--- a/pages/mall/admin/cms/category/list.uvue
+++ b/pages/mall/admin/cms/category/list.uvue
@@ -44,9 +44,7 @@
               <view class="img-box-placeholder"></view>
             </view>
             <view class="td col-status">
-              <view :class="['switch-mock', item.status ? 'active' : '']" @click="toggleStatus(item)">
-                <view class="switch-handle"></view>
-              </view>
+              <StatusSwitch v-model="item.status" />
             </view>
             <view class="td col-op">
               <view class="op-links">
@@ -123,16 +121,7 @@
 
           <view class="form-item row">
             <view class="label-box"><text class="label-txt">状态:</text></view>
-            <view class="radio-group">
-              <view class="radio-item" @click="formStatus = true">
-                <view :class="['radio-circle', formStatus ? 'checked' : '']"><view v-if="formStatus" class="radio-in"></view></view>
-                <text class="radio-la">显示</text>
-              </view>
-              <view class="radio-item" @click="formStatus = false">
-                <view :class="['radio-circle', !formStatus ? 'checked' : '']"><view v-if="!formStatus" class="radio-in"></view></view>
-                <text class="radio-la">隐藏</text>
-              </view>
-            </view>
+            <StatusSwitch v-model="formStatus" activeText="显示" inactiveText="隐藏" />
           </view>
         </scroll-view>
 
@@ -147,6 +136,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const filterKeyword = ref('')
 const categoryList = ref([
@@ -206,10 +196,6 @@ const handleEdit = (item: any) => {
   showDrawer.value = true
 }
 
-const toggleStatus = (item: any) => {
-  item.status = !item.status
-}
-
 const closeDrawer = () => { 
   isClosing.value = true
   setTimeout(() => {
@@ -265,10 +251,7 @@ const handleQuery = () => { console.log('Querying...') }
 .col-status { width: 120px; justify-content: center; }
 .col-op { width: 220px; justify-content: center; }
 .img-box-placeholder { width: 40px; height: 40px; background-color: #f5f7fa; border-radius: 4px; }
-.switch-mock { width: 40px; height: 20px; background-color: #dcdfe6; border-radius: 10px; position: relative; transition: all 0.3s; }
-.switch-mock.active { background-color: #2d8cf0; }
-.switch-handle { width: 16px; height: 16px; background-color: #fff; border-radius: 8px; position: absolute; top: 2px; left: 2px; transition: all 0.3s; }
-.active .switch-handle { left: 22px; }
+
 .op-links { display: flex; flex-direction: row; align-items: center; }
 .link-txt { font-size: 13px; color: #2d8cf0; cursor: pointer; }
 .danger { color: #ed4014; }
@@ -331,13 +314,6 @@ const handleQuery = () => { console.log('Querying...') }
 }
 .img-icon { font-size: 30px; color: #ccc; }
 
-.radio-group { display: flex; flex-direction: row; gap: 30px; }
-.radio-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; }
-.radio-circle { width: 16px; height: 16px; border: 1px solid #dcdee2; border-radius: 50%; margin-right: 8px; display: flex; align-items: center; justify-content: center; }
-.radio-circle.checked { border-color: #2d8cf0; }
-.radio-in { width: 8px; height: 8px; background-color: #2d8cf0; border-radius: 50%; }
-.radio-la { font-size: 14px; color: #606266; }
-
 .drawer-footer { height: 60px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 24px; }
 .btn-cancel { padding: 8px 20px; border: 1px solid #dcdee2; border-radius: 4px; margin-right: 15px; }
 .btn-confirm { padding: 8px 20px; background-color: #2d8cf0; border-radius: 4px; }
diff --git a/pages/mall/admin/kefu/auto_reply.uvue b/pages/mall/admin/kefu/auto_reply.uvue
index 0a883ece..9f4020ff 100644
--- a/pages/mall/admin/kefu/auto_reply.uvue
+++ b/pages/mall/admin/kefu/auto_reply.uvue
@@ -43,9 +43,7 @@
 					<text class="td flex-2">{{ item.type === 'text' ? '文字消息' : '图片消息' }}</text>
 					<text class="td flex-4 color-6 truncate">{{ item.content }}</text>
 					<view class="td flex-2 row-center">
-						<view class="status-switch-mini" :class="item.status ? 'active' : ''" @click="toggleStatus(index)">
-							<view class="switch-dot-mini"></view>
-						</view>
+						<StatusSwitch v-model="item.status" />
 					</view>
 					<view class="td flex-2 row-center">
 						<text class="btn-action-blue" @click="openModal(item)">编辑</text>
@@ -96,18 +94,7 @@
 					<view class="form-item-box">
 						<view class="label-box"><text class="form-label">状态:</text></view>
 						<view class="val-box row-center-start">
-							<view class="radio-item" @click="form.status = true">
-								<view class="radio-circle" :class="form.status ? 'radio-checked' : ''">
-									<view v-if="form.status" class="radio-dot-inner"></view>
-								</view>
-								<text class="radio-txt">开启</text>
-							</view>
-							<view class="radio-item" @click="form.status = false">
-								<view class="radio-circle" :class="!form.status ? 'radio-checked' : ''">
-									<view v-if="!form.status" class="radio-dot-inner"></view>
-								</view>
-								<text class="radio-txt">关闭</text>
-							</view>
+							<StatusSwitch v-model="form.status" />
 						</view>
 					</view>
 				</view>
@@ -122,6 +109,7 @@
 
 <script setup lang="uts">
 import { ref, reactive } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 interface AutoReplyItem {
 	id: number;
@@ -195,10 +183,6 @@ function saveReply() {
 	uni.showToast({ title: '保存成功', icon: 'success' })
 }
 
-function toggleStatus(index: number) {
-	list[index].status = !list[index].status
-}
-
 function deleteItem(index: number) {
 	uni.showModal({
 		title: '提示',
@@ -349,32 +333,6 @@ function deleteItem(index: number) {
 .btn-action-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
 .v-divider-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }
 
-/* 状态开关 */
-.status-switch-mini {
-	width: 44px;
-	height: 22px;
-	background-color: #dcdfe6;
-	border-radius: 11px;
-	position: relative;
-	transition: background-color 0.3s;
-}
-.status-switch-mini.active {
-	background-color: #1890ff;
-}
-.switch-dot-mini {
-	width: 18px;
-	height: 18px;
-	background-color: #fff;
-	border-radius: 50%;
-	position: absolute;
-	top: 2px;
-	left: 2px;
-	transition: left 0.3s;
-}
-.status-switch-mini.active .switch-dot-mini {
-	left: 24px;
-}
-
 /* 弹窗样式 */
 .modal-overlay {
 	position: fixed;
diff --git a/pages/mall/admin/marketing/seckill/config.uvue b/pages/mall/admin/marketing/seckill/config.uvue
index a4712cf2..7f1d34c7 100644
--- a/pages/mall/admin/marketing/seckill/config.uvue
+++ b/pages/mall/admin/marketing/seckill/config.uvue
@@ -47,10 +47,7 @@
               <text class="td-txt">{{ item.sort }}</text>
             </view>
             <view class="td cell-status">
-              <view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
-                <view class="switch-dot"></view>
-                <text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
-              </view>
+              <StatusSwitch v-model="item.status" />
             </view>
             <view class="td cell-op">
               <view class="op-links">
@@ -107,16 +104,7 @@
         </view>
         <view class="form-item">
           <text class="form-label">状态：</text>
-          <view class="radio-group">
-            <view class="radio-item" @click="formData.status = true">
-              <view class="radio-circle" :class="{ active: formData.status }"></view>
-              <text class="radio-txt">显示</text>
-            </view>
-            <view class="radio-item" @click="formData.status = false">
-              <view class="radio-circle" :class="{ active: !formData.status }"></view>
-              <text class="radio-txt">隐藏</text>
-            </view>
-          </view>
+          <StatusSwitch v-model="formData.status" activeText="显示" inactiveText="隐藏" />
         </view>
       </view>
       <view class="drawer-footer">
@@ -129,6 +117,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const showDrawer = ref(false)
 const isAnimating = ref(false)
@@ -153,11 +142,6 @@ const configList = ref([
   }
 ])
 
-const toggleStatus = (item: any) => {
-  item.status = !item.status
-  uni.showToast({ title: '修改成功', icon: 'success' })
-}
-
 const handleEdit = (item: any) => {
   formData.value = { ...item }
   showDrawer.value = true
@@ -320,32 +304,6 @@ const closeDrawer = () => {
   border-radius: 4px;
 }
 
-.switch-mock {
-  width: 50px;
-  height: 24px;
-  background-color: #bfbfbf;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 4px;
-  position: relative;
-  transition: background-color 0.3s;
-}
-.switch-mock.active { background-color: #1890ff; }
-.switch-dot {
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  left: 4px;
-  transition: left 0.3s;
-}
-.switch-mock.active .switch-dot { left: 30px; }
-.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
-.switch-mock.active .switch-txt { margin-left: 4px; }
-
 .op-links {
   display: flex;
   flex-direction: row;
@@ -462,40 +420,6 @@ const closeDrawer = () => {
 }
 .upload-ic { font-size: 24px; color: #bfbfbf; }
 
-.radio-group {
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
-}
-.radio-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-.radio-circle {
-  width: 16px;
-  height: 16px;
-  border: 1px solid #d9d9d9;
-  border-radius: 50%;
-  position: relative;
-}
-.radio-circle.active {
-  border-color: #1890ff;
-}
-.radio-circle.active::after {
-  content: '';
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: 8px;
-  height: 8px;
-  background-color: #1890ff;
-  border-radius: 50%;
-}
-.radio-txt { font-size: 14px; color: #262626; }
-
 .drawer-footer {
   padding: 10px 16px;
   border-top: 1px solid #f0f0f0;
diff --git a/pages/mall/admin/marketing/seckill/index.uvue b/pages/mall/admin/marketing/seckill/index.uvue
index 987e1312..bb7bf75a 100644
--- a/pages/mall/admin/marketing/seckill/index.uvue
+++ b/pages/mall/admin/marketing/seckill/index.uvue
@@ -78,10 +78,7 @@
               <text class="td-txt-small">结束: {{ item.end_date }}</text>
             </view>
             <view class="td cell-status">
-              <view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
-                <view class="switch-dot"></view>
-                <text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
-              </view>
+              <StatusSwitch v-model="item.status" @change="toggleStatus(item)" />
             </view>
             <view class="td cell-op">
               <view class="op-links">
@@ -121,6 +118,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const seckillList = ref([
   {
@@ -308,32 +306,6 @@ const handleDelete = (item: any) => {
 }
 .period-txt { color: #1890ff; font-size: 12px; }
 
-.switch-mock {
-  width: 50px;
-  height: 24px;
-  background-color: #bfbfbf;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 4px;
-  position: relative;
-  transition: background-color 0.3s;
-}
-.switch-mock.active { background-color: #1890ff; }
-.switch-dot {
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  left: 4px;
-  transition: left 0.3s;
-}
-.switch-mock.active .switch-dot { left: 30px; }
-.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
-.switch-mock.active .switch-txt { margin-left: 4px; }
-
 .op-links {
   display: flex;
   flex-direction: row;
diff --git a/pages/mall/admin/marketing/seckill/list.uvue b/pages/mall/admin/marketing/seckill/list.uvue
index 19dc9ac4..6824032c 100644
--- a/pages/mall/admin/marketing/seckill/list.uvue
+++ b/pages/mall/admin/marketing/seckill/list.uvue
@@ -78,10 +78,7 @@
               <text class="td-txt-small">结束: {{ item.end_date }}</text>
             </view>
             <view class="td cell-status">
-              <view class="switch-mock" :class="{ active: item.status }" @click="toggleStatus(item)">
-                <view class="switch-dot"></view>
-                <text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
-              </view>
+              <StatusSwitch v-model="item.status" />
             </view>
             <view class="td cell-op">
               <view class="op-links">
@@ -121,6 +118,7 @@
 
 <script setup lang="uts">
 import { ref } from 'vue'
+import StatusSwitch from '@/components/StatusSwitch.uvue'
 
 const seckillList = ref([
   {
@@ -136,11 +134,6 @@ const seckillList = ref([
   }
 ])
 
-const toggleStatus = (item: any) => {
-  item.status = !item.status
-  uni.showToast({ title: '修改成功', icon: 'success' })
-}
-
 const handleAdd = () => {
   uni.showToast({ title: '添加活动功能开发中', icon: 'none' })
 }
@@ -310,32 +303,6 @@ const handleDelete = (item: any) => {
 }
 .period-txt { color: #1890ff; font-size: 12px; }
 
-.switch-mock {
-  width: 50px;
-  height: 24px;
-  background-color: #bfbfbf;
-  border-radius: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0 4px;
-  position: relative;
-  transition: background-color 0.3s;
-}
-.switch-mock.active { background-color: #1890ff; }
-.switch-dot {
-  width: 16px;
-  height: 16px;
-  background-color: #fff;
-  border-radius: 50%;
-  position: absolute;
-  left: 4px;
-  transition: left 0.3s;
-}
-.switch-mock.active .switch-dot { left: 30px; }
-.switch-txt { font-size: 11px; color: #fff; margin-left: 20px; }
-.switch-mock.active .switch-txt { margin-left: 4px; }
-
 .op-links {
   display: flex;
   flex-direction: row;