huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

抽离公共状态组件

Browse Source
This commit is contained in:
huangzhenbao
2026-03-09 15:49:16 +08:00
parent 7e71126774
commit a1ab7f4faa
5 changed files with 148 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
pages/mall/admin/product/classification/index.uvue
View File

@@ -50,10 +50,7 @@
<text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ item.description || '-' }}</text>
<text class="td-cell flex-1">{{ item.sort_order }}</text>
<view class="td-cell flex-2 row-center">
<view class="switch-mock" :class="item.is_active ? 'switch-on' : ''" @click="toggleStatus(item)">
<view class="switch-dot"></view>
<text class="switch-text">{{ item.is_active ? '开启' : '关闭' }}</text>
</view>
<StatusSwitch v-model="item.is_active" @change="toggleStatus(item)" />
</view>
<view class="td-cell flex-3 row-center">
<text class="btn-link" @click="openDrawer(item)">编辑</text>
@@ -75,10 +72,7 @@
<text class="td-cell flex-2" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ child.description || '-' }}</text>
<text class="td-cell flex-1">{{ child.sort_order }}</text>
<view class="td-cell flex-2 row-center">
<view class="switch-mock" :class="child.is_active ? 'switch-on' : ''" @click="toggleStatus(child)">
<view class="switch-dot"></view>
<text class="switch-text">{{ child.is_active ? '开启' : '关闭' }}</text>
</view>
<StatusSwitch v-model="child.is_active" @change="toggleStatus(child)" />
</view>
<view class="td-cell flex-3 row-center">
<text class="btn-link" @click="openDrawer(child)">编辑</text>
@@ -154,10 +148,7 @@
<view class="form-item">
<view class="form-label-box"><text class="form-label">状态:</text></view>
<view class="form-input-box">
<view class="switch-mock" :class="form.is_active ? 'switch-on' : ''" @click="form.is_active = !form.is_active">
<view class="switch-dot"></view>
<text class="switch-text">{{ form.is_active ? '开启' : '关闭' }}</text>
</view>
<StatusSwitch v-model="form.is_active" />
</view>
</view>
</view>
@@ -174,6 +165,7 @@
<script setup lang="uts">
import { ref, reactive, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
import StatusSwitch from '@/components/StatusSwitch.uvue'
interface CateItem {
id: string; // Updated to match UUID string type per DB documentation
@@ -669,51 +661,6 @@ align-items: center;
justify-content: center;
}
/* Switch Mock */
.switch-mock {
width: 54px;
height: 24px;
background-color: #ccc;
border-radius: 12px;
position: relative;
transition: all 0.3s;
display: flex;
align-items: center;
padding: 0 6px;
cursor: pointer;
}
.switch-on {
background-color: #1890ff;
}
.switch-dot {
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 3px;
top: 3px;
transition: all 0.3s;
}
.switch-on .switch-dot {
left: 33px;
}
.switch-text {
font-size: 12px;
color: #fff;
margin-left: auto;
line-height: 24px;
}
.switch-on .switch-text {
margin-left: 0;
margin-right: auto;
}
/* Drawer styles */
.drawer-mask {
position: fixed;

47
pages/mall/admin/product/labels/index.uvue
View File

@@ -52,16 +52,10 @@ class="group-item"
</view>
<text class="td-cell flex-3">{{ groups[activeGroupIndex]?.name }}</text>
<view class="td-cell flex-2 row-center">
<view class="status-switch-mini" :class="label.status ? 'active' : ''" @click="label.status = !label.status">
<text class="switch-txt-inner">{{ label.status ? '开启' : '关闭' }}</text>
<view class="switch-dot-mini"></view>
</view>
<StatusSwitch v-model="label.status" />
</view>
<view class="td-cell flex-2 row-center">
<view class="status-switch-mini" :class="label.showInMobile ? 'active' : ''" @click="label.showInMobile = !label.showInMobile">
<text class="switch-txt-inner">{{ label.showInMobile ? '开启' : '关闭' }}</text>
<view class="switch-dot-mini"></view>
</view>
<StatusSwitch v-model="label.showInMobile" activeText="显示" inactiveText="隐藏" />
</view>
<view class="td-cell flex-2 row-center">
<text class="btn-op-blue" @click="openLabelDrawer(label)">修改</text>
@@ -119,6 +113,7 @@ class="group-item"
<script setup lang="uts">
import { ref, reactive, computed } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
interface Label {
id: number;
@@ -316,42 +311,6 @@ border-radius: 4px;
font-size: 12px;
}
.status-switch-mini {
width: 60px;
height: 24px;
background-color: #ccc;
border-radius: 12px;
position: relative;
transition: all 0.3s;
display: flex;
flex-direction: row;
align-items: center;
}
.status-switch-mini.active { background-color: #1890ff; }
.switch-txt-inner {
font-size: 11px;
color: #fff;
margin-left: 24px;
}
.status-switch-mini.active .switch-txt-inner {
margin-left: 8px;
}
.switch-dot-mini {
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 3px;
transition: all 0.3s;
}
.status-switch-mini.active .switch-dot-mini { left: 39px; }
.btn-op-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
.btn-op-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
.v-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }

32
pages/mall/admin/product/protection/index.uvue
View File

@@ -32,11 +32,9 @@
<text class="td flex-4">{{ item.name }}</text>
<text class="td flex-5 color-6">{{ item.desc }}</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>
</view>
<view class="td flex-2 row-center">
<StatusSwitch v-model="item.status" activeText="显示" inactiveText="隐藏" />
</view>
<view class="td flex-2 row-center">
<text class="btn-action-blue" @click="openModal(item)">编辑</text>
<view class="v-divider-line"></view>
<text class="btn-action-red" @click="deleteItem(index)">删除</text>
@@ -105,6 +103,7 @@
<script setup lang="uts">
import { ref, reactive } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
interface ProtectionItem {
id: number;
@@ -268,29 +267,6 @@ function deleteItem(index: number) {
height: 30px;
}
/* Switch */
.status-switch-mini {
width: 44px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
transition: background-color 0.3s;
}
.status-switch-mini.active { background-color: #1890ff; }
.switch-dot-mini {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: left 0.3s;
}
.status-switch-mini.active .switch-dot-mini { left: 26px; }
.btn-action-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
.btn-action-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
.v-divider-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }