ykt-wxapp/pages/case/group-manage.vue

<template>
  <view class="manage-container">
    <view class="group-list">
      <view v-for="(item, index) in groups" :key="index" class="group-item">
        <view class="left-action" @click="handleDelete(index)">
          <uni-icons type="minus-filled" size="24" color="#ff4d4f"></uni-icons>
        </view>
        <view class="group-name">{{ item.name }}</view>
        <view class="right-actions">
          <uni-icons type="compose" size="24" color="#5d8aff" class="icon-edit" @click="handleEdit(item, index)"></uni-icons>
          <uni-icons type="bars" size="24" color="#5d8aff" class="icon-drag"></uni-icons>
        </view>
      </view>
    </view>

    <!-- Bottom Button -->
    <view class="footer">
      <button class="add-btn" @click="handleAdd">添加新分组</button>
    </view>

    <!-- Dialog -->
    <view v-if="showDialog" class="dialog-mask">
      <view class="dialog-content">
        <view class="dialog-header">{{ dialogTitle }}</view>
        <view class="dialog-body">
          <input class="dialog-input" type="text" v-model="inputValue" placeholder="请输入分组名称" />
        </view>
        <view class="dialog-footer">
          <button class="dialog-btn cancel" @click="closeDialog">取消</button>
          <button class="dialog-btn confirm" @click="handleSave">保存</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// State
const groups = ref([
  { id: 1, name: '糖尿病' },
  { id: 2, name: '高血压' },
  { id: 3, name: '高血脂' }
]);

const showDialog = ref(false);
const dialogMode = ref('add'); // 'add' or 'edit'
const inputValue = ref('');
const editingIndex = ref(-1);

const dialogTitle = ref('添加新分组');

// Methods
const handleAdd = () => {
  dialogMode.value = 'add';
  dialogTitle.value = '添加新分组';
  inputValue.value = '';
  showDialog.value = true;
};

const handleEdit = (item, index) => {
  dialogMode.value = 'edit';
  dialogTitle.value = '编辑分组名称';
  inputValue.value = item.name;
  editingIndex.value = index;
  showDialog.value = true;
};

const handleDelete = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该分组吗？',
    success: (res) => {
      if (res.confirm) {
        groups.value.splice(index, 1);
      }
    }
  });
};

const closeDialog = () => {
  showDialog.value = false;
};

const handleSave = () => {
  if (!inputValue.value.trim()) {
    uni.showToast({ title: '请输入分组名称', icon: 'none' });
    return;
  }

  if (dialogMode.value === 'add') {
    groups.value.push({
      id: Date.now(),
      name: inputValue.value
    });
  } else {
    groups.value[editingIndex.value].name = inputValue.value;
  }

  closeDialog();
};
</script>

<style lang="scss" scoped>
.manage-container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 80px; // Space for footer
}

.group-list {
  padding: 0 15px;
}

.group-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;

  .left-action {
    margin-right: 15px;
  }

  .group-name {
    flex: 1;
    font-size: 16px;
    color: #333;
  }

  .right-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    
    .icon-edit, .icon-drag {
      padding: 5px; // Increase tap area
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 15px 20px 30px; // Safe area padding
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  .add-btn {
    background-color: #5d8aff;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    border: none;
    
    &::after {
      border: none;
    }
  }
}

// Custom Dialog Styles
.dialog-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  width: 280px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  .dialog-header {
    padding: 20px 0 10px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #333;
  }

  .dialog-body {
    padding: 10px 20px 20px;

    .dialog-input {
      border: 1px solid #ddd;
      height: 40px;
      padding: 0 10px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  .dialog-footer {
    display: flex;
    padding: 0 20px 20px;
    justify-content: space-between;
    gap: 15px;

    .dialog-btn {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      margin: 0;
      
      &.cancel {
        background-color: #fff;
        color: #666;
        border: 1px solid #ddd;
      }
      
      &.confirm {
        background-color: #5d8aff;
        color: #fff;
        border: none; // Remove border for confirm button usually
      }

      &::after {
        border: none;
      }
    }
  }
}
</style>