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 { xsKxApi, xsYxListApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
import { useDataStore } from "@/store/modules/data";

const { getCurXs } = useUserStore();
const { setData } = useDataStore();

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

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

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

// 加载选课列表
const loadXkList = async () => {
  uni.showLoading({
    title: "加载中...",
  });
  const params = {
    xsId: props.xsId,
    njmcId: getCurXs.njmcId,
    xklxId: props.xklxId
  };
  if (!props.isQk) {
    const res = await xsYxListApi(params);
    uni.hideLoading();
    if (res.resultCode === 1 && res.result && res.result.length) {
      xkList.value = res.result;
      switchXk(res.result[0]);
    } else {
      xkList.value = [];
      switchXk({});
    }
  } else {
    const res = await xsKxApi(params);
    uni.hideLoading();
    if (res.resultCode === 1) {
      const result = res.result || {};
      if (result.type && result.type === 1) {
        if (result.xkList && result.xkList.length) {
          xkList.value = result.xkList;
          switchXk(result.xkList[0]);
        } else {
          uni.reLaunch({
            url: "/pages/base/course-selection/notopen",
          });
        }
      } else if (result.type && result.type === 2) { 
        // 跳转到支付页面
        setData(result);
        uni.reLaunch({
          url: "/pages/base/course-selection/payment",
        });
      } else {
        uni.reLaunch({
          url: "/pages/base/course-selection/notopen",
        });
      }
    } else {
      uni.reLaunch({
        url: "/pages/base/course-selection/notopen",
      });
    }
  }
}

// 切换选课
const switchXk = (xk: any) => {
  curXk.value = xk;
  showFlag.value = false;
  emit("change", xk);
}

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

// 初始化加载数据
if (props.xsId) {
  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>