修复大部分页面状态组件

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;