修复大部分页面状态组件

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;