medical-mall/pages/mall/admin/app/mobile/version.uvue

<template>
  <view class="admin-page">
    <view class="action-bar">
      <button class="btn primary" @click="handlePublish">发布版本</button>
    </view>
    
    <view class="admin-card content-card">
      <view class="admin-table">
        <!-- 表头 -->
        <view class="table-header">
          <view class="col col-version"><text>版本号</text></view>
          <view class="col col-platform"><text>平台类型</text></view>
          <view class="col col-info"><text>升级信息</text></view>
          <view class="col col-force"><text>是否强制</text></view>
          <view class="col col-date"><text>发布日期</text></view>
          <view class="col col-url"><text>下载地址</text></view>
          <view class="col col-ops"><text>操作</text></view>
        </view>

        <!-- 表格内容 -->
        <view class="table-body">
          <view v-if="versionList.length === 0" class="table-empty">
            <text class="empty-txt">暂无数据</text>
          </view>
          <view v-for="item in versionList" :key="item.id" class="table-row">
            <view class="col col-version"><text>{{ item.version }}</text></view>
            <view class="col col-platform"><text>{{ item.platform }}</text></view>
            <view class="col col-info"><text>{{ item.info }}</text></view>
            <view class="col col-force"><text>{{ item.isForce ? '是' : '否' }}</text></view>
            <view class="col col-date"><text>{{ item.date }}</text></view>
            <view class="col col-url"><text class="link">{{ item.url }}</text></view>
            <view class="col col-ops">
              <text class="op-link" @click="handleEdit(item)">编辑</text>
              <text class="op-split">|</text>
              <text class="op-link delete" @click="handleDelete(item)">删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

interface VersionItem {
  id: number
  version: string
  platform: string
  info: string
  isForce: boolean
  date: string
  url: string
}

const versionList = ref<VersionItem[]>([])

const handlePublish = () => {
  uni.showToast({ title: '暂不支持发布', icon: 'none' })
}

const handleEdit = (item: VersionItem) => {
  console.log('Edit', item)
}

const handleDelete = (item: VersionItem) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该版本吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '删除成功', icon: 'success' })
      }
    }
  })
}
</script>

<style scoped lang="scss">
.admin-page {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
}

.btn.primary {
  width: 100px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: #1890ff !important;
  color: #fff !important;
  font-size: 14px !important;
  border-radius: 4px !important;
  text-align: center !important;
  border: none;
}

.content-card {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.admin-table {
  width: 100%;
}

.table-header {
  display: flex;
  flex-direction: row;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.col {
  padding: 12px 15px;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  
  &.col-version { width: 100px; }
  &.col-platform { width: 120px; }
  &.col-info { flex: 1; }
  &.col-force { width: 100px; }
  &.col-date { width: 150px; }
  &.col-url { width: 200px; }
  &.col-ops { width: 120px; justify-content: center; }
}

.table-header .col {
  font-weight: bold;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.table-empty {
  padding: 100px 0;
  text-align: center;
  width: 100%;
  
  .empty-txt {
    font-size: 14px;
    color: #999;
  }
}

.link {
  color: #1890ff;
}

.op-link {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  
  &.delete {
    color: #ff4d4f;
  }
}

.op-split {
  margin: 0 8px;
  color: #e8e8e8;
}
</style>