martial-mini/pages/common-info/common-info.vue

<template>
  <view class="common-info-page">
    <!-- Tab切换 -->
    <custom-tabs :tabs="tabs" :current="currentTab" @change="handleTabChange"></custom-tabs>

    <!-- 新增按钮 -->
    <view class="add-btn-wrapper" @click="handleAdd">
      <text class="add-icon">⊕</text>
      <text class="add-text">{{ currentTab === 0 ? '新增选手' : '新增联系人' }}</text>
    </view>

    <!-- 选手列表 -->
    <view class="player-list" v-if="currentTab === 0 && playerList.length > 0">
      <view class="player-item" v-for="(item, index) in playerList" :key="index">
        <view class="player-info">
          <view class="player-name">{{ item.name }}</view>
          <view class="player-id">身份证：{{ item.idCard }}</view>
        </view>
        <view class="player-actions">
          <view class="action-btn edit-btn" @click.stop="handleEdit(item)">
            <image class="action-icon" src="/static/images/编辑@3x.png" mode="aspectFit"></image>
            <text>编辑</text>
          </view>
          <view class="action-btn delete-btn" @click.stop="handleDelete(item)">
            <image class="action-icon" src="/static/images/删除@3x.png" mode="aspectFit"></image>
            <text>删除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="currentTab === 0 && playerList.length === 0">
      <text class="empty-text">暂无选手信息</text>
    </view>

    <!-- 联系人Tab内容 -->
    <view class="empty-state" v-if="currentTab === 1">
      <text class="empty-text">暂无联系人信息</text>
    </view>

    <!-- 删除确认弹窗 -->
    <confirm-modal
      :show="showDeleteModal"
      title="删除选手"
      content="确定要删除该选手吗？"
      @cancel="showDeleteModal = false"
      @confirm="confirmDelete"
    ></confirm-modal>

    <!-- 删除成功提示 -->
    <view class="delete-success-toast" v-if="showSuccessToast">
      <text class="toast-icon">✓</text>
      <text class="toast-text">删除成功</text>
    </view>
  </view>
</template>

<script>
import CustomTabs from '../../components/custom-tabs/custom-tabs.vue';
import ConfirmModal from '../../components/confirm-modal/confirm-modal.vue';

export default {
  components: {
    CustomTabs,
    ConfirmModal
  },
  data() {
    return {
      tabs: ['选手', '联系人'],
      currentTab: 0,
      playerList: [
        {
          id: 1,
          name: '张三',
          idCard: '123456789000000000'
        },
        {
          id: 2,
          name: '张三',
          idCard: '123456789000000000'
        },
        {
          id: 3,
          name: '张三',
          idCard: '123456789000000000'
        },
        {
          id: 4,
          name: '张三',
          idCard: '123456789000000000'
        },
        {
          id: 5,
          name: '张三',
          idCard: '123456789000000000'
        }
      ],
      showDeleteModal: false,
      showSuccessToast: false,
      currentItem: null
    };
  },
  methods: {
    handleTabChange(index) {
      this.currentTab = index;
    },
    handleAdd() {
      if (this.currentTab === 0) {
        uni.navigateTo({
          url: '/pages/add-player/add-player'
        });
      } else if (this.currentTab === 1) {
        uni.navigateTo({
          url: '/pages/add-contact/add-contact'
        });
      }
    },
    handleEdit(item) {
      uni.navigateTo({
        url: '/pages/edit-player/edit-player?id=' + item.id
      });
    },
    handleDelete(item) {
      this.currentItem = item;
      this.showDeleteModal = true;
    },
    confirmDelete() {
      this.showDeleteModal = false;
      // 执行删除操作
      const index = this.playerList.findIndex(item => item.id === this.currentItem.id);
      if (index > -1) {
        this.playerList.splice(index, 1);
      }
      // 显示成功提示
      this.showSuccessToast = true;
      setTimeout(() => {
        this.showSuccessToast = false;
      }, 2000);
    }
  }
};
</script>

<style lang="scss" scoped>
.common-info-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.add-btn-wrapper {
  background-color: #fff;
  padding: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.add-icon {
  font-size: 36rpx;
  color: #C93639;
}

.add-text {
  font-size: 30rpx;
  color: #C93639;
}

.player-list {
  padding: 30rpx;
}

.player-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.player-info {
  margin-bottom: 20rpx;
}

.player-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}

.player-id {
  font-size: 26rpx;
  color: #666666;
}

.player-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 5rpx;
  padding: 12rpx 30rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: 2rpx solid;
}

.edit-btn {
  color: #C93639;
  border-color: #C93639;
}

.delete-btn {
  color: #C93639;
  border-color: #C93639;
}

.icon {
  font-size: 28rpx;
}

.action-icon {
  width: 28rpx;
  height: 28rpx;
}

.empty-state {
  padding: 200rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

.delete-success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 30rpx 50rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  gap: 15rpx;
  z-index: 10000;
}

.toast-icon {
  font-size: 40rpx;
}

.toast-text {
  font-size: 28rpx;
}
</style>