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

This commit is contained in:
2026-03-09 16:12:51 +08:00
parent 05049e728e
commit 80acd0fd2e
5 changed files with 26 additions and 191 deletions

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;

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) {

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;