ykt-wxapp/pages/case/batch-transfer.vue

<template>
  <view class="transfer-container">
    <view class="content">
      <view class="section-title">选择新负责团队</view>
      <view class="selector-item" @click="selectTeam">
        <text :class="team ? '' : 'placeholder'">{{ team ? team.name : "请选择选择团队" }}</text>
        <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
      </view>

      <template v-if="team">
        <view class="section-title">选择责任人</view>
        <view class="selector-item" @click="selectUser">
          <text :class="user ? '' : 'placeholder'">{{ user ? user.name : "请选择责任人" }}</text>
          <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
        </view>
      </template>

      <view class="tips">客户将与本团队解除服务关系，本团队成员将没有权限查询到客户档案。</view>
    </view>

    <view class="footer">
      <button class="btn plain" @click="cancel">取消</button>
      <button class="btn primary" @click="save">保存</button>
    </view>
  </view>
</template>

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

const team = ref(null);
const user = ref(null);

// Mock Data
const teams = [
  { id: 1, name: '张敏西服务团队' },
  { id: 2, name: '李医生团队' },
  { id: 3, name: '王医生团队' }
];

const users = [
  { id: 101, name: '张医生' },
  { id: 102, name: '李医生' },
  { id: 103, name: '王医生' }
];

const selectTeam = () => {
  uni.showActionSheet({
    itemList: teams.map(t => t.name),
    success: (res) => {
      team.value = teams[res.tapIndex];
      user.value = null; // Reset user when team changes
    }
  });
};

const selectUser = () => {
  uni.showActionSheet({
    itemList: users.map(u => u.name),
    success: (res) => {
      user.value = users[res.tapIndex];
    }
  });
};

const cancel = () => {
  uni.navigateBack();
};

const save = () => {
  if (!team.value) {
    uni.showToast({ title: '请选择团队', icon: 'none' });
    return;
  }
  if (!user.value) {
    uni.showToast({ title: '请选择责任人', icon: 'none' });
    return;
  }
  
  uni.showLoading({ title: '保存中' });
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({ title: '操作成功' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};
</script>

<style lang="scss" scoped>
.transfer-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  padding: 20px;

  .section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    
    &:first-child {
      margin-top: 0;
    }
  }

  .selector-item {
    background-color: #fff;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    
    text {
      font-size: 14px;
      color: #333;
      
      &.placeholder {
        color: #999;
      }
    }
  }

  .tips {
    margin-top: 15px;
    font-size: 14px;
    color: #999;
    line-height: 1.5;
  }
}

.footer {
  background-color: #fff;
  padding: 15px 20px 30px;
  display: flex;
  gap: 15px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);

  .btn {
    flex: 1;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    border-radius: 4px;
    margin: 0;

    &.plain {
      background-color: #fff;
      color: #666;
      border: 1px solid #ddd;
    }

    &.primary {
      background-color: #5d8aff;
      color: #fff;
      border: none;
    }
    
    &::after {
      border: none;
    }
  }
}
</style>