zhxy-jzd/src/pages/base/components/XkPicker/index.vue

<template>
  <view>
    <view class="title-section" @click="showPicker">
      <view class="title">
        <text v-if="curXk && curXk.xkmc">{{ curXk.xkmc }}</text>
        <text v-else>{{ title }}</text>
      </view>
      <view class="switch-btn" v-if="xkList.length > 1">切换</view>
    </view>
    <!-- 俱乐部选择弹窗 -->
    <u-popup :show="showFlag" @close="showFlag = false" mode="bottom" round="10">
      <view class="xk-picker">
        <view class="xk-header">
          <text class="xk-title">选择俱乐部</text>
          <u-icon name="close" size="20" @click="showFlag = false"></u-icon>
        </view>
        <view class="xk-list">
          <view v-for="(xk, index) in xkList" :key="index" class="xk-item" :class="{
            'xk-item-active': curXk.id === xk.id
          }" @click="switchXk(xk)">
            <view class="xk-info">
              <text class="xk-name">{{ xk.xkmc }}</text>
            </view>
            <u-icon v-if="curXk.id === xk.id" name="checkmark" color="#409EFF" size="20"></u-icon>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { xsXkListApi, xsXkkcListApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
const { getCurXs } = useUserStore();

// 接收外部传入属性
const props = defineProps<{
  isXs: boolean, // 是否是已经选的课程
  xsId: string,
  njId: string,
  xklxId: string, // 选课类型Id（962488654：兴趣课 / 816059832：俱乐部）
  title: string,
}>();

// 定义一个上级传入的emit响应事件用于接收数据变更
const emit = defineEmits(['change'])

const curXs = computed(() => getCurXs);

// 学生列表数据
const xkList = ref<any>([]);
// 当前学生数据
const curXk = ref<any>({});
// 控制选择器显示状态
const showFlag = ref(false);
// 显示选择器
const showPicker = () => {
  showFlag.value = true;
}

// 加载选课列表
const loadXkList = async () => {
  uni.showLoading({
    title: "加载中...",
  });
  const func = props.isXs ? xsXkListApi : xsXkkcListApi;
  func({
    xsId: props.xsId,
    njId: props.njId,
    xklxId: props.xklxId,
  })
    .then((res) => {
      if (res.resultCode == 1) {
        if (res.result && res.result.length) {
          xkList.value = res.result;
          curXk.value = res.result[0];
        } else {
          if (props.isXs) {
            xkList.value = [];
            curXk.value = {};
          } else {
            uni.reLaunch({
              url: "/pages/base/course-selection/notopen",
            });
          }
        }
        switchXk(curXk.value);
        uni.hideLoading();
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
}

// 切换选课
function switchXk(xk: any) {
  curXk.value = xk;
  showFlag.value = false;
  if (xk && xk.id) {
    // 显示切换成功提示
    uni.showToast({
      title: `已切换到${xk.xkmc}`,
      icon: "none",
    });
  }
  emit("change", xk);
}

// 监听当前学生信息变更
watch(() => props.xsId, (newVal) => {
  console.log("当前学生信息变更", newVal);
  loadXkList();
});

// 初始化加载数据
if (props.xsId && props.njId) {
  loadXkList();
}
</script>

<style lang="scss" scoped>
/* 全局图片样式 */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.title-section {
  display: flex;
  align-items: center;
  .title {
    flex: 1 0 1px;
    font-size: 24px;
    font-weight: bold;
  }

  .subtitle {
    font-size: 14px;
    opacity: 0.8;
  }
  
  .switch-btn {
    padding: 5px 15px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 15px;
    font-size: 15px;
  }
}

/* 选择器弹窗样式 */
.xk-picker {
  background-color: #ffffff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding-bottom: 20px;

  .xk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;

    .xk-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }

  .xk-list {
    padding: 0 15px;

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

      &:last-child {
        border-bottom: none;
      }

      &-active {
        background-color: rgba(64, 158, 255, 0.05);
      }

      .xk-info {
        flex: 1;
        margin-left: 12px;

        .xk-name {
          font-size: 15px;
          font-weight: 500;
          color: #303133;
          margin-bottom: 4px;
        }
      }
    }
  }
}


</style>