修复大部分页面状态组件

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;

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;

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;