medical-mall/pages/mall/admin/maintain/data/clear.uvue

<template>
  <view class="admin-page">
    <view class="admin-sections">
      <!-- 页面标题与提示 -->
      <view class="page-header">
        <text class="title">清除数据</text>
        <view class="warning-tip">
          <text class="warning-icon">⚠</text>
          <text class="warning-text">清除数据请谨慎，清除就无法恢复哦！</text>
        </view>
      </view>

      <!-- 卡片网格 -->
      <view class="card-grid">
        <view v-for="card in cards" :key="card.id" class="clear-card">
          <view class="card-content">
            <text class="card-title">{{ card.title }}</text>
            <text class="card-desc">{{ card.desc }}</text>
          </view>
          <view class="card-footer">
            <button :class="['btn', card.primary ? 'primary' : 'ghost']" @click="handleAction(card)">
              {{ card.btnText }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref } from 'vue'

const cards = ref([
  { id: 1, title: '更换域名', desc: '替换所有本地上传的图片域名', btnText: '立即更换', primary: true },
  { id: 2, title: '清除用户生成的临时附件', desc: '清除用户生成的临时附件，不会影响商品图', btnText: '立即清理', primary: false },
  { id: 3, title: '清除回收站商品', desc: '清除回收站商品，谨慎操作', btnText: '立即清理', primary: false },
  { id: 4, title: '清除用户数据', desc: '用户相关的所有表都将被清除，谨慎操作', btnText: '立即清理', primary: false },
  { id: 5, title: '清除商城数据', desc: '清除所有商城数据，谨慎操作', btnText: '立即清理', primary: false },
  { id: 6, title: '清除商品分类', desc: '会清除所有商品分类，谨慎操作', btnText: '立即清理', primary: false },
  { id: 7, title: '清除订单数据', desc: '清除用户所有订单数据，谨慎操作', btnText: '立即清理', primary: false },
  { id: 8, title: '清除客服数据', desc: '清除添加的客服数据，谨慎操作', btnText: '立即清理', primary: false },
  { id: 9, title: '清除微信数据', desc: '清除微信菜单保存数据，微信关键字无效回复', btnText: '立即清理', primary: false },
  { id: 10, title: '清除内容分类', desc: '清除添加的文章和文章分类，谨慎操作', btnText: '立即清理', primary: false },
  { id: 11, title: '清除所有附件', desc: '清除所有附件用户生成和后台上传，谨慎操作', btnText: '立即清理', primary: false },
  { id: 12, title: '清除系统记录', desc: '清除系统记录，谨慎操作', btnText: '立即清理', primary: false }
])

function handleAction(card: any) {
  uni.showModal({
    title: '极其危险的操作',
    content: `您确定要对「${card.title}」执行此操作吗？数据清除后将无法恢复！`,
    confirmColor: '#ff4d4f',
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '正在处理...' })
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '操作完成' })
        }, 2000)
      }
    }
  })
}
</script>

<style scoped lang="scss">
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  min-height: 100vh;
}

.page-header {
  background-color: #fff;
  padding: 16px 24px;
  border-radius: 4px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.warning-tip {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.warning-icon {
  color: #ff4d4f;
  margin-right: 8px;
}

.warning-text {
  color: #ff4d4f;
  font-size: 14px;
}

.card-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
}

.clear-card {
  width: calc(25% - 15px); /* 4列布局 */
  background-color: #fff;
  border-radius: 4px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
}

.card-desc {
  font-size: 14px;
  color: #999;
  line-height: 1.6;
  margin-bottom: 24px;
  height: 44px; /* 保持描述文字高度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  height: 32px;
  padding: 0 20px;
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn.primary {
  background-color: #1890ff;
  color: #fff;
  border: none;
}

.btn.ghost {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #666;
}

@media screen and (max-width: 1400px) {
  .clear-card {
    width: calc(33.33% - 14px);
  }
}
@media screen and (max-width: 1000px) {
  .clear-card {
    width: calc(50% - 10px);
  }
}
</style>