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

修复大部分页面状态组件2

Browse Source
This commit is contained in:
huangzhenbao
2026-03-09 16:12:51 +08:00
parent 05049e728e
commit 80acd0fd2e
5 changed files with 26 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
pages/mall/admin/kefu/list.uvue
View File

@@ -13,7 +13,7 @@
<view class="th col-id"><text class="th-txt">ID</text></view>
<view class="th col-avatar"><text class="th-txt">客服头像</text></view>
<view class="th col-name"><text class="th-txt">客服名称</text></view>
<view class="th col-status"><text class="th-txt">客服状态</text></view>
<view class="th col-status"><text class="th-txt">状态</text></view>
<view class="th col-time"><text class="th-txt">添加时间</text></view>
<view class="th col-op"><text class="th-txt">操作</text></view>
</view>
@@ -26,12 +26,7 @@
</view>
<view class="td col-name"><text class="td-txt">{{ item.name }}</text></view>
<view class="td col-status">
<view :class="['switch-btn', item.status ? 'switch-on' : 'switch-off']" @click="toggleStatus(item)">
<view class="switch-inner">
<text class="switch-txt">{{ item.status ? '开启' : '关闭' }}</text>
</view>
<view class="switch-dot"></view>
</view>
<StatusSwitch v-model="item.status" />
</view>
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
<view class="td col-op">
@@ -68,6 +63,7 @@
<script setup lang="uts">
import { ref } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
interface KefuItem {
id: string
@@ -87,10 +83,6 @@ const kefuList = ref<KefuItem[]>([
{ id: '152', avatar: '/static/logo.png', name: 'kk', status: true, time: '2024-09-16 00:05:22' }
])
const toggleStatus = (item: KefuItem) => {
item.status = !item.status
}
const handleAdd = () => {
console.log('Add Kefu')
}
@@ -202,45 +194,6 @@ const handleAdd = () => {
background-color: #f0f0f0;
}
/* 开关组件 1:1 复刻 */
.switch-btn {
width: 60px;
height: 24px;
border-radius: 12px;
position: relative;
display: flex;
align-items: center;
padding: 0 6px;
cursor: pointer;
transition: all 0.3s;
}
.switch-on { background-color: #2d8cf0; }
.switch-off { background-color: #ccc; }
.switch-inner {
flex: 1;
display: flex;
justify-content: center;
}
.switch-txt {
color: #fff;
font-size: 11px;
}
.switch-dot {
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 9px;
position: absolute;
top: 3px;
}
.switch-on .switch-dot { right: 3px; }
.switch-off .switch-dot { left: 3px; }
/* 操作按钮 */
.btn-action {
font-size: 13px;

24
pages/mall/admin/marketing/checkin/reward.uvue
View File

@@ -23,7 +23,7 @@
<view class="th cell-type">类型</view>
<view class="th cell-days">签到天数</view>
<view class="th cell-reward">奖励内容</view>
<view class="th cell-status">是否可用</view>
<view class="th cell-status">状态</view>
<view class="th cell-op">操作</view>
</view>
@@ -36,9 +36,7 @@
<text class="td-txt">积分+{{ item.integral }}, 经验+{{ item.exp }}</text>
</view>
<view class="td cell-status">
<view class="switch-mock" :class="{ active: item.is_open }" @click="toggleStatus(item)">
<view class="switch-dot"></view>
</view>
<StatusSwitch v-model="item.is_open" />
</view>
<view class="td cell-op">
<text class="op-link" @click="handleEdit(item)">编辑</text>
@@ -81,6 +79,7 @@
<script setup lang="uts">
import { ref, reactive, computed } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
const currentTab = ref('continuous')
const showModal = ref(false)
@@ -114,11 +113,6 @@ const openModal = (type: string) => {
showModal.value = true
}
const toggleStatus = (item: any) => {
item.is_open = !item.is_open
uni.showToast({ title: '修改成功', icon: 'success' })
}
const handleEdit = (item: any) => {
uni.showToast({ title: '编辑功能暂未对接', icon: 'none' })
}
@@ -238,18 +232,6 @@ const handleSubmit = () => {
.op-link.del { color: #ff4d4f; }
.ml-10 { margin-left: 10px; }
.switch-mock {
width: 44px; height: 22px; background-color: #bfbfbf; border-radius: 11px;
display: flex; align-items: center; padding: 0 4px; position: relative;
transition: background-color 0.3s; cursor: pointer;
}
.switch-mock.active { background-color: #1890ff; }
.switch-dot {
width: 14px; height: 14px; background-color: #fff; border-radius: 50%;
position: absolute; left: 4px; transition: left 0.3s;
}
.switch-mock.active .switch-dot { left: 26px; }
/* Modal */
.modal-mask {
position: fixed; top: 0; left: 0; right: 0; bottom: 0;

33
pages/mall/admin/marketing/coupon/list.uvue
View File

@@ -63,7 +63,7 @@
<view class="th p-3">领取/使用限制</view>
<view class="th p-3">领取日期</view>
<view class="th p-2">发布数量</view>
<view class="th p-2">是否开启</view>
<view class="th p-2">状态</view>
<view class="th p-1 op-cell shadow-left">操作</view>
</view>
@@ -102,9 +102,10 @@
</view>
</view>
<view class="td p-2">
<view :class="['switch-box', item.isOpen ? 'active' : '']" @click="toggleStatus(index)">
<view class="switch-dot"></view>
</view>
<StatusSwitch
:modelValue="item.isOpen"
@update:modelValue="(val : boolean) => onToggleStatus(index, val)"
/>
</view>
<!-- 操作列：Sticky 固定 -->
<view class="td p-1 op-cell shadow-left">
@@ -199,6 +200,7 @@
<script setup lang="uts">
import { ref, reactive, onMounted, computed } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
import supa from '@/components/supadb/aksupainstance.uts'
interface CouponItem {
@@ -704,29 +706,6 @@ onMounted(() => {
.op-split { color: #e8eaec; margin: 0; font-size: 12px; }
.text-danger { color: #ed4014; }
/* Switch 开关 */
.switch-box {
width: 40px;
height: 20px;
background-color: #dcdfe6;
border-radius: 10px;
position: relative;
transition: all 0.3s;
cursor: pointer;
}
.switch-box.active { background-color: #19be6b; }
.switch-dot {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 8px;
position: absolute;
top: 2px;
left: 2px;
transition: all 0.3s;
}
.switch-box.active .switch-dot { transform: translateX(20px); }
/* 📱 响应式媒体查询 (Priority 策略) */
/* 平板：隐藏次要列 */
@media screen and (max-width: 1450px) {

42
pages/mall/admin/marketing/lottery/list.uvue
View File

@@ -50,7 +50,7 @@
<text class="col-80 center">抽奖次数</text>
<text class="col-80 center">中奖次数</text>
<text class="col-80 center">活动状态</text>
<text class="col-80 center">开启状态</text>
<text class="col-80 center">状态</text>
<text class="col-180">活动时间</text>
<text class="col-120 center">操作</text>
</view>
@@ -68,9 +68,7 @@
<text class="status-text">{{ item.statusText }}</text>
</view>
<view class="col-80 center">
<view class="switch-box" :class="item.isOpen ? 'active' : ''" @click="toggleStatus(item)">
<view class="switch-dot"></view>
</view>
<StatusSwitch v-model="item.isOpen" />
</view>
<view class="col-180">
<view class="time-range">
@@ -106,7 +104,12 @@
</template>
<script uts>
import StatusSwitch from '@/components/StatusSwitch.uvue'
export default {
components: {
StatusSwitch
},
data() {
return {
searchQuery: '',
@@ -204,10 +207,6 @@ export default {
},
handleSearch() {
uni.showToast({ title: '搜索', icon: 'none' })
},
toggleStatus(item : any) {
item.isOpen = !item.isOpen
uni.showToast({ title: '状态已变更', icon: 'none' })
}
}
}
@@ -334,33 +333,6 @@ export default {
.id-text { font-size: 13px; color: #808695; }
.status-text { font-size: 13px; color: #515a6e; }
/* 开关组件 */
.switch-box {
width: 40px;
height: 20px;
background-color: #ccc;
border-radius: 10px;
position: relative;
transition: background-color 0.3s;
cursor: pointer;
}
.switch-box.active {
background-color: #2d8cf0;
}
.switch-dot {
width: 16px;
height: 16px;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
transition: transform 0.3s;
}
.switch-box.active .switch-dot {
transform: translateX(20px);
}
.time-range {
display: flex;
flex-direction: column;

65
pages/mall/admin/product/product-management/index.uvue
View File

@@ -115,10 +115,12 @@
<view class="td col-stock"><text>{{ item.stock }}</text></view>
<view class="td col-sort"><text>{{ item.sort }}</text></view>
<view class="td col-status">
<view class="mock-switch" :class="{ on: item.status === 1 }">
<text class="switch-txt">{{ item.status === 1 ? '上架' : '下架' }}</text>
<view class="switch-dot"></view>
</view>
<StatusSwitch
:modelValue="item.status === 1"
activeText="上架"
inactiveText="下架"
@update:modelValue="(val : boolean) => item.status = (val ? 1 : 0)"
/>
</view>
<view class="td col-op op-group">
<text class="op-link" @click.stop="goEdit(item.id)">编辑</text>
@@ -162,6 +164,7 @@
<script setup lang="uts">
import { ref } from 'vue'
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'
import StatusSwitch from '@/components/StatusSwitch.uvue'
const total = ref(49)
const activeStatus = ref('selling')
@@ -521,60 +524,6 @@ function moveToRecycle(id: number) {
.p-name-txt { font-size: 13px; line-height: 1.4; color: #333; }
.activity-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 4px;
.tag {
padding: 2px 4px;
font-size: 11px;
color: #fff;
border-radius: 2px;
&.kj { background: #1890ff; }
&.pt { background: #52c41a; }
&.ms { background: #f5222d; }
}
}
.mock-switch {
width: 50px;
height: 20px;
background: #dbdbdb;
border-radius: 10px;
position: relative;
display: flex;
align-items: center;
padding: 0 4px;
&.on {
background: #1890ff;
.switch-dot { left: 32px; }
.switch-txt { left: 6px; }
}
&:not(.on) {
.switch-txt { right: 6px; }
.switch-dot { left: 2px; }
}
.switch-txt {
position: absolute;
font-size: 10px;
color: #fff;
}
.switch-dot {
position: absolute;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
transition: left 0.2s;
}
}
.op-link {
font-size: 13px;
color: #1890ff;
cursor: pointer;
&.danger { color: #ff4d4f; }
}
.op-divider { color: #e8e8e8; font-size: 12px; margin: 0 4px; }
.more-dropdown {