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

<template>
  <view class="px32rpx py-20rpx">
    <view class="bg-white rounded-32rpx py28rpx">
      <view class="px24rpx box-border">
        <view class="text-32rpx font-semibold">选择约课学生</view>
        <view class="mt28rpx">
          <view
            v-if="selectedTags.length"
            class="flex flex-wrap gap-10rpx mb20rpx"
          >
            <view
              v-for="item in selectedTags"
              :key="item.id"
              class="bg-[rgba(0,0,0,0.1)] text-[rgb(0,0,0,0.9)] text-24rpx px20rpx py10rpx rounded-full flex items-center cursor-pointer"
              @click="removeTag(item)"
            >
              {{ item.fullName }}
              <text class="ml10rpx font-bold">×</text>
            </view>
          </view>
          <view class="flex items-center mt28rpx">
            <view class="text-28rpx">学生姓名：</view>
            <wd-input
              v-model="inputValue"
              type="text"
              placeholder="请输入姓名"
              no-border
              @focus="inputFocus"
            />
          </view>
        </view>
      </view>
      <scroll-view scroll-y class="max-h-600rpx">
        <view
          v-if="data.length"
          class="mt10rpx py10rpx rounded-xl px24rpx"
          v-for="item in data"
          @click="selectStudent(item)"
          :key="item.id"
          hover-class="hover:bg-gray-100"
        >
          <view class="text-28rpx">
            {{ item.fullName }}
          </view>
          <view class="mt12rpx text-[rgb(0,0,0,0.3)] text-24rpx"
            >{{ item.phone }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  <fixdbtn block size="large" @click="handleSubmit">提交</fixdbtn>
</template>

<script setup lang="ts">
import type { FamilyMembers } from "@/api/globals";
import router from "@/router";
import { useWatcher } from "alova/client";
const inputValue = ref("");
const selectedTags = ref<FamilyMembers[]>([]);
const { data } = useWatcher(
  () =>
    Apis.app.getFamilyMembersByName({
      params: { name: inputValue.value, courseId: coursePriceRulesId.value },
    }),
  [inputValue],
  { debounce: 500, immediate: false, initialData: [] },
);
const { send: setFormData } = useRequest(
  (data) => Apis.app.temporaryCourse({ data }),
  {
    immediate: false,
  },
);
const isFirst = ref(true);
const coursePriceRulesId = ref();
onLoad((query: any) => {
  coursePriceRulesId.value = query.id;
});
// 选择学生
const selectStudent = (item: FamilyMembers) => {
  if (!selectedTags.value.some((it) => it.id == item.id)) {
    selectedTags.value.push(item);
  }
  inputValue.value = "";
};
function inputFocus() {
  if (!isFirst.value) return;
  inputValue.value = "1";
  inputValue.value = "";
  isFirst.value = false;
}
// 删除 tag
const removeTag = (item: FamilyMembers) => {
  selectedTags.value = selectedTags.value.filter((tag) => tag.id !== item.id);
};
async function handleSubmit() {
  if (selectedTags.value.length == 0)
    return uni.showToast({ title: "请选择约课的学生" });
  console.log(selectedTags.value, "提交核销数据");
  const formData = {
    coursePriceRulesId: coursePriceRulesId.value,
    userIds: selectedTags.value.map((it) => it.id),
  };
  await setFormData(formData);
  uni.showToast({ title: "预约成功", icon: "success" });
  setTimeout(() => {
    router.back();
  }, 1500);
}
</script>

<style scoped>
.absolute {
  position: absolute;
}
.z-10 {
  z-index: 10;
}
</style>

<route lang="json">
{
  "name": "ReservationClass",
  "style": {
    "navigationBarTitleText": "选择课程"
  }
}
</route>