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,
              'xk-item-selected': xk.selected,
            }"
            @click="switchXk(xk)"
          >
            <view class="xk-info">
              <text class="xk-name">{{ xk.xkmc }}</text>
              <text v-if="xk.selected" class="xk-selected-tip">已选择</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 goToWks = () => {
  setData({ title: props.title });
  uni.reLaunch({
    url: "/pages/base/xk/qk/wks",
  });
};

// 加载选课列表
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 === 1) {
        // 有待支付的选课，跳转到支付页面
        setData(result);
        uni.reLaunch({
          url: "/pages/base/xk/pay/index",
        });
        return;
      } else if (result.type === 2 || result.type === 3) {
        // 正常选课列表或已支付但有选课列表供切换
        if (result.xkList && result.xkList.length) {
          xkList.value = result.xkList;
          switchXk(result.xkList[0]);
          return;
        }
      }
    }
    goToWks();
  }
};

// 切换选课
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);
      }

      &-selected {
        background-color: rgba(64, 158, 255, 0.1);
        border-left: 3px solid #409eff;
      }

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

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

        .xk-selected-tip {
          font-size: 12px;
          color: #409eff;
          background-color: rgba(64, 158, 255, 0.1);
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>