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:59:53 +08:00
parent a1ab7f4faa
commit 05049e728e
5 changed files with 14 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/mall/admin/cms/category/list.uvue
View File

@@ -44,9 +44,7 @@
<view class="img-box-placeholder"></view>
</view>
<view class="td col-status">
<view :class="['switch-mock', item.status ? 'active' : '']" @click="toggleStatus(item)">
<view class="switch-handle"></view>
</view>
<StatusSwitch v-model="item.status" />
</view>
<view class="td col-op">
<view class="op-links">
@@ -123,16 +121,7 @@
<view class="form-item row">
<view class="label-box"><text class="label-txt">状态:</text></view>
<view class="radio-group">
<view class="radio-item" @click="formStatus = true">
<view :class="['radio-circle', formStatus ? 'checked' : '']"><view v-if="formStatus" class="radio-in"></view></view>
<text class="radio-la">显示</text>
</view>
<view class="radio-item" @click="formStatus = false">
<view :class="['radio-circle', !formStatus ? 'checked' : '']"><view v-if="!formStatus" class="radio-in"></view></view>
<text class="radio-la">隐藏</text>
</view>
</view>
<StatusSwitch v-model="formStatus" activeText="显示" inactiveText="隐藏" />
</view>
</scroll-view>
@@ -147,6 +136,7 @@
<script setup lang="uts">
import { ref } from 'vue'
import StatusSwitch from '@/components/StatusSwitch.uvue'
const filterKeyword = ref('')
const categoryList = ref([
@@ -206,10 +196,6 @@ const handleEdit = (item: any) => {
showDrawer.value = true
}
const toggleStatus = (item: any) => {
item.status = !item.status
}
const closeDrawer = () => {
isClosing.value = true
setTimeout(() => {
@@ -265,10 +251,7 @@ const handleQuery = () => { console.log('Querying...') }
.col-status { width: 120px; justify-content: center; }
.col-op { width: 220px; justify-content: center; }
.img-box-placeholder { width: 40px; height: 40px; background-color: #f5f7fa; border-radius: 4px; }
.switch-mock { width: 40px; height: 20px; background-color: #dcdfe6; border-radius: 10px; position: relative; transition: all 0.3s; }
.switch-mock.active { background-color: #2d8cf0; }
.switch-handle { width: 16px; height: 16px; background-color: #fff; border-radius: 8px; position: absolute; top: 2px; left: 2px; transition: all 0.3s; }
.active .switch-handle { left: 22px; }
.op-links { display: flex; flex-direction: row; align-items: center; }
.link-txt { font-size: 13px; color: #2d8cf0; cursor: pointer; }
.danger { color: #ed4014; }
@@ -331,13 +314,6 @@ const handleQuery = () => { console.log('Querying...') }
}
.img-icon { font-size: 30px; color: #ccc; }
.radio-group { display: flex; flex-direction: row; gap: 30px; }
.radio-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; }
.radio-circle { width: 16px; height: 16px; border: 1px solid #dcdee2; border-radius: 50%; margin-right: 8px; display: flex; align-items: center; justify-content: center; }
.radio-circle.checked { border-color: #2d8cf0; }
.radio-in { width: 8px; height: 8px; background-color: #2d8cf0; border-radius: 50%; }
.radio-la { font-size: 14px; color: #606266; }
.drawer-footer { height: 60px; border-top: 1px solid #f0f0f0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 24px; }
.btn-cancel { padding: 8px 20px; border: 1px solid #dcdee2; border-radius: 4px; margin-right: 15px; }
.btn-confirm { padding: 8px 20px; background-color: #2d8cf0; border-radius: 4px; }

48
pages/mall/admin/kefu/auto_reply.uvue
View File

@@ -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;

82
pages/mall/admin/marketing/seckill/config.uvue
View File

@@ -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;

32
pages/mall/admin/marketing/seckill/index.uvue
View File

@@ -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;

37
pages/mall/admin/marketing/seckill/list.uvue
View File

@@ -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;