sports-merchant-minapp/src/subPack/ExtensionClass/index.vue

<template>
  <view class="px32rpx py24rpx">
    <view class="bg-white rounded-16rpx p-24rpx">
      <wd-select-picker
        label="补课课时"
        v-model="MakeUpClassId"
        :columns="data"
        placeholder="请选择补课课时"
        align-right
        type="radio"
        value-key="id"
        safe-area-inset-bottom
        label-key="name"
      ></wd-select-picker>
      <wd-divider color="#F0F0F0"></wd-divider>
    </view>
    <view class="mt20rpx bg-white rounded-16rpx p24rpx mb20rpx">
      <view class="mb20rpx">
        <wd-checkbox
          v-model="isCheckAll"
          size="large"
          shape="square"
          @change="handleCheckAllChange"
          ><text class="font-semibold text-32rpx">全选</text>
        </wd-checkbox>
      </view>
      <wd-checkbox-group
        v-model="checkedAll"
        inline
        size="large"
        shape="square"
        @change="handleChange"
      >
        <wd-checkbox
          :modelValue="item.familyUserId"
          v-for="item in userList"
          :key="item.familyUserId"
          >{{ item.familyUserName }}</wd-checkbox
        >
      </wd-checkbox-group>
      <view
        class="mt24rpx border border-gray border-solid rounded-xl overflow-hidden"
      >
        <wd-textarea
          v-model="postponeReason"
          placeholder="请填写延课原因"
          border
        />
      </view>
    </view>
    <WdButton block size="large" @click="handleSubmit">提交</WdButton>
  </view>
</template>

<script setup lang="ts">
import router from "@/router";

const isCheckAll = ref(false);
const MakeUpClassId = ref<string>("");
const checkedAll = ref<string[]>([]);
const postponeReason = ref("");
const priceRulesId = ref();
const { send: getUserList, data: userList } = useRequest(
  (coursePriceRulesId) =>
    Apis.app.getClassPostponeUsers({ params: { coursePriceRulesId } }),
  { immediate: false },
);
const { data, send: getData } = useRequest(
  (id: string, coursesType: number) =>
    Apis.app.queryListByCoursesId({
      params: { coursesType, id },
    }),
  {
    immediate: false,
  },
);
const { send: submit } = useRequest(
  (data) =>
    Apis.app.classPostpone({
      data,
    }),
  {
    immediate: false,
  },
);
onLoad(async (query: any) => {
  priceRulesId.value = query.id;
  await getUserList(query.id);
  await getData(query.coursesId, 1);
});
function handleChange({ value }: any) {
  if (value.length == userList.value.length) {
    isCheckAll.value = true;
  } else {
    isCheckAll.value = false;
  }
}
function handleCheckAllChange() {
  if (isCheckAll.value) {
    checkedAll.value = userList.value.map((it) => it.familyUserId) as string[];
  } else {
    checkedAll.value = [];
  }
}
async function handleSubmit() {
  if (!MakeUpClassId.value)
    return uni.showToast({ title: "请选择补课课时", icon: "none" });
  if (checkedAll.value.length == 0)
    return uni.showToast({ title: "请选择补课学生", icon: "none" });
  if (!postponeReason.value)
    return uni.showToast({ title: "请填写延课原因", icon: "none" });
  await submit({
    coursePriceRulesId: MakeUpClassId.value,
    postponeReason: postponeReason.value,
    priceRulesId: priceRulesId.value,
    familyUserVOList: checkedAll.value.map((item) => {
      return {
        familyUserId: item,
      };
    }),
  });
  router.back();

  console.log(MakeUpClassId.value, "补课课时");
}
</script>

<style scoped>
:deep(.wd-select-picker__cell) {
  padding: 0 !important;
}
</style>
<route lang="json">
{
  "name": "ExtensionClass",
  "style": {
    "navigationBarTitleText": "填写延期信息",
    "disableScroll": true
  }
}
</route>