YingXingAI/pages/login/perfect/perfect.vue

<template>
  <view class="flex-col page">
    <u-navbar
      :border-bottom="false"
      title="个人资料"
      :custom-back="back"
    ></u-navbar>
    <view v-if="step == 0" class="flex-col group_2">
      <!-- <h3 class="text_3">个人资料设置</h3> -->
      <view class="flex-col items-center group_1">
        <u-avatar
          :mode="shape"
          :src="headerImg"
          @click="chooseAvatar"
          size="260"
        />
        <text class="text_4">请上传头像</text>
      </view>
      <view class="flex-col group_5 input-box">
        <u-input
          type="text"
          :maxlength="8"
          v-model="form.userName"
          placeholder="请输入用户名称"
          class="text-wrapper view"
        />
      </view>
      <view class="flex-col input-box" style="margin-top: 16px">
        <u-input
          type="text"
          :maxlength="8"
          v-model="form.name"
          placeholder="请输入真实的姓名"
          class="text-wrapper view"
        />
      </view>
      <view class="flex-col group_3">
        <text class="text_7" style="margin-bottom: 26px">性别</text>
        <u-radio-group
          v-model="form.sex"
          placement="row"
          name="sexGroup"
          width="50%"
        >
          <u-radio
            v-for="(item, index) in sexOptions"
            :key="index"
            :name="item.value"
          >
            {{ item.label }}
          </u-radio>
        </u-radio-group>
        <!-- <view
          class="flex-col items-center group_6"
          @click="form.sex = '男'"
          :class="{ on: form.sex === '男' }"
        >
          <image src="/static/common/img/male.png" class="image_4" />
          <text class="text_8">男</text>
        </view>
        <view
          class="flex-col items-center group_4"
          @click="form.sex = '女'"
          :class="{ on: form.sex === '女' }"
        >
          <image src="/static/common/img/female.png" class="image_4" />
          <text class="text_9">女</text>
        </view> -->
      </view>
      <u-button
        shape="circle"
        class="button text-wrapper_1"
        type="primary"
        @click="next"
        >下一步</u-button
      >
    </view>
    <u-navbar
      :custom-back="back"
      v-if="step == 1"
      :border-bottom="false"
      :background="background"
    >
    </u-navbar>
    <view v-if="step == 1" class="flex-col group_3 userList">
      <h3 class="text_3">填写学校信息</h3>
      <view class="flex-col group_4">
        <view class="justify-between list-item group_5">
          <text class="text_8">学历</text>
          <view class="item-right">
            <view class="input-cover" @click="educationalShow = true"></view>
            <u-input
              v-model="form.educationStr"
              placeholder="请选择学历"
              inputAlign="right"
              disabled
            />
            <u-action-sheet
              :list="educationalList"
              v-model="educationalShow"
              @click="educationalSelect"
            >
            </u-action-sheet>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">学校</text>
          <view class="item-right">
            <view class="input-cover" @click="shoolShow = true"></view>
            <u-input
              v-model="shoolName"
              placeholder="请选择学校"
              inputAlign="right"
              disabled
            />
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
            <u-select
              v-model="shoolShow"
              :default-value="defaultTime"
              mode="single-column"
              title="学校选择"
              :list="shoolList"
              @confirm="shoolSelect"
            >
            </u-select>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">学院</text>
          <view class="item-right">
            <view class="input-cover" @click="collegeShow = true"></view>
            <u-input
              v-model="form.college"
              placeholder="请选择学院"
              inputAlign="right"
              disabled
            />
            <u-select
              v-model="collegeShow"
              mode="single-column"
              :list="CollegeList"
              @confirm="selectCpllege"
            ></u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">专业</text>
          <view class="item-right">
            <view class="input-cover" @click="majorShow = true"></view>
            <u-input
              v-model="form.major"
              placeholder="请选择专业"
              inputAlign="right"
              disabled
            />
            <u-select
              v-model="majorShow"
              mode="single-column"
              :list="MajorList"
              @confirm="selectMajor"
            ></u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
        <view class="justify-between list-item">
          <text class="text_8">时间</text>
          <view class="item-right">
            <view class="input-cover" @click="timeShow = true"></view>
            <u-input
              v-model="showTime"
              placeholder="请选择时间"
              inputAlign="right"
              disabled
            />
            <u-select
              v-model="timeShow"
              :default-value="defaultTime"
              mode="mutil-column"
              title="在校时间"
              :list="timeList"
              @confirm="confirm"
            >
            </u-select>
            <image
              src="/static/common/img/row_right.png"
              class="right-img"
            ></image>
          </view>
        </view>
      </view>
      <template v-if="isGraduate">
        <h3 class="text_3">就业信息</h3>
        <view class="flex-col group_4">
          <view class="justify-between list-item">
            <text class="text_8">行业领域</text>
            <view class="item-right">
              <view
                class="input-cover"
                @click="workAreaPopupShow = true"
              ></view>
              <u-input
                v-model="selectedWorkArea"
                placeholder="请选择行业"
                inputAlign="right"
                disabled
              />
              <u-select
                v-model="workAreaPopupShow"
                mode="single-column"
                title="行业领域"
                :list="WorkAreaList"
                @confirm="workAreaSelect"
              >
              </u-select>
              <image
                src="/static/common/img/row_right.png"
                class="right-img"
              ></image>
            </view>
          </view>
        </view>
      </template>
      <u-button
        shape="circle"
        class="button text-wrapper_1"
        type="primary"
        @click="complete"
        >完成</u-button
      >
    </view>

    <view v-if="step == 2" class="flex-col preference-page">
      <u-navbar title="推荐偏好" :border-bottom="false" :custom-back="back" />

      <view class="selected-count">
        已选择（{{ selectedPreferences.length }}/10）
        <text class="desc"
          >您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-个人信息中修改。</text
        >
      </view>

      <view class="selected-tags">
        <view
          v-for="item in selectedPreferences"
          :key="item.lableName"
          class="tag selected"
        >
          {{ item.lableName }}
          <image
            class="close-btn"
            src="/static/common/img/handDelete.png"
            @click.stop="removePreference(item)"
          ></image>
        </view>
      </view>
      <view class="line"></view>
      <view class="all-tags">
        <view class="title">行业领域</view>
        <view class="tags-list">
          <view
            v-for="(item, index) in industryList"
            :key="item.lableId"
            class="industry-tag"
            :class="{ selected: selectedIndustryId === item.lableId }"
            @click="handleIndustrySelect(index)"
            >{{ item.lableName }}</view
          >
        </view>
        <view class="title">行业方向</view>
        <view class="tags-list industry-tag-list">
          <view
            v-for="item in industryDirectionList"
            :key="item.lableName"
            class="industry-tag"
            :class="{ selected: selectedPreferences.includes(item) }"
            @click="togglePreference(item)"
            >{{ item.lableName }}</view
          >
        </view>
      </view>
      <view class="line-shadow"></view>
      <view class="btn-box">
        <u-button shape="circle" class="button" type="primary" @click="nextStep"
          >下一步</u-button
        >
      </view>
    </view>
    <view v-if="step == 3" class="flex-col preference-page">
      <u-navbar title="推荐偏好" :border-bottom="false" :custom-back="back" />
      <view class="selected-count">
        已选择（{{ selectedInterests.length }}/10）
        <text class="desc"
          >您选择的标签将影响系统推荐给你的信息类型，进入系统后可以在我的-个人信息中修改。</text
        >
      </view>

      <view class="selected-tags">
        <view
          v-for="item in selectedInterests"
          :key="item.lableId"
          class="tag selected"
        >
          {{ item.lableName }}
          <image
            class="close-btn"
            src="/static/common/img/handDelete.png"
            @click.stop="removeInterest(item)"
          ></image>
        </view>
      </view>
      <view class="line"></view>
      <view class="all-tags">
        <view class="title">兴趣爱好</view>
        <view class="tags-list">
          <view
            v-for="item in interestList"
            :key="item.lableId"
            class="tag"
            :class="{ selected: selectedInterests.includes(item) }"
            @click="toggleInterest(item)"
            >{{ item.lableName }}</view
          >
        </view>
      </view>
      <view class="line-shadow"></view>
      <view class="btn-box">
        <u-button
          shape="circle"
          class="button"
          type="primary"
          @click="finishPreference"
          >完成</u-button
        >
      </view>
    </view>

    <u-top-tips :z-index="999" ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import headerImg from "@/static/common/img/headerImg.png";
export default {
  data() {
    return {
      step: 0,
      headerImg: headerImg,
      shoolName: "",
      showTime: "",
      form: {
        userId: "", //用户id
        name: "", //名字
        userName: "", //用户名
        sex: "男", //性别
        path: "", //头像
        educationStr: "", //学历
        schoolId: "", //学校
        college: "", //学院
        major: "", //专业
        startYear: "", //开始时间
        endYear: "", //结束时间,
        collegeId: "", //学院id
        majorId: "", //专业id
        list: [],
      },
      studentId: '', //在校生id
      sexOptions: [
        { label: "男生", value: "男" },
        { label: "女生", value: "女" },
      ],
      background: {
        backgroundColor: "#f6f8fa",
      },
      value: "",
      defaultTime: "",
      show: false,
      educationalShow: false,
      educationalList: [
        //学历选择列表
        {
          text: "大专",
        },
        {
          text: "本科",
        },
        {
          text: "硕士研究生",
        },
        {
          text: "博士研究生",
        },
      ],
      shoolShow: false,
      shoolList: [], //学校选择
      CollegeList: [], //学院选择
      MajorList: [], //专业选择
      timeShow: false,
      timeList: [], //时间选择
      collegeShow: false,
      majorShow: false,
      isGraduate: false,
      workAreaPopupShow: false, //就业领域选择
      selectedWorkArea: "",
      selectedWorkAreaId: "",
      WorkAreaList: [],
      selectedPreferences: [],
      industryList: [], // 行业领域列表
      selectedIndustry: [], // 行业领域选择
      industryDirectionList: [], // 行业方向列表
      selectedIndustryDirection: [], // 行业方向选择
      labelList: [], // 原始标签数据
      interestList: [],
      selectedInterests: [],
      shape: "square",
      selectedIndustryName: '', // 当前选中的行业领域名称
      selectedIndustryId: null, // 当前选中的行业领域ID，初始化为null以避免匹配任何id
    };
  },
  onLoad(e) {
    // this.GetLableList();
    // this.GetInterestLable()
    this.getWorkFile();
    // 监听从裁剪页发布的事件，获得裁剪结果
    uni.$on("uAvatarCropper", (path) => {
      this.headerImg = path;
      let file = this.common.base64toFile(path, new Date().getTime());
      if (file.type.indexOf("image") < 0) {
        // this.$tips("请选择图片", "error");
        this.$refs.uToast.show({
          title: "请选择图片",
          type: "error",
        });
        return false;
      }
      uni.uploadFile({
        url: this.$u.http.config.baseUrl + "/app/User/File",
        file: file,
        fileType: "image",
        header: {
          Authorization: "Bearer " + this.vuex_token,
        },
        complete: (res) => {
          this.form.path = JSON.parse(res.data).data;
        },
      });
    });

    if (this.vuex_user.id) {
      this.form.userId = this.vuex_user.id;
    } else {
      this.$u.route({
        url: "/pages/login/login/login",
      });
    }

    if (this.vuex_userInfo.realName) {
      this.form.name = this.vuex_userInfo.realName;
    }

    this.getShool();
    var arr1 = [],
      arr2 = [];
    var isyear = new Date().getFullYear();
    for (var i = 1990; i <= isyear + 10; i++) {
      if (i <= isyear) {
        arr1.push({
          value: i,
          label: i,
        });
      }
      arr2.push({
        value: i,
        label: i,
      });
    }
    this.timeList.push(arr1);
    this.timeList.push(arr2);
    this.defaultTime = [arr1.length - 1, arr2.length - 7];
    this.echoFn();
  },

  methods: {
    nextStep() {
      this.step = 3;
      this.GetInterestLable();
      console.log("下一步");
    },
    async GetInterestLable() {
      const res = await this.$u.apiList.GetInterestLable();
      console.log("获取标签", res);
      this.interestList = res;
    },
    toggleInterest(item) {
      // 先判断是否已达到最大选择数量
      if (this.selectedInterests.length >= 10) {
        this.$refs.uToast.show({
          title: "最多选择10个",
          type: "error",
        });
        return;
      }

      // 从 interestList 中查找待移除的标签
      const interestIndex = this.interestList.findIndex(
        (i) => i.lableId === item.lableId
      );

      if (interestIndex > -1) {
        // 移除标签
        this.interestList.splice(interestIndex, 1);
        // 添加到已选择列表
        this.selectedInterests.push(item);
      }
    },
    removeInterest(item) {
      // 从已选择列表中移除
      const selectedIndex = this.selectedInterests.findIndex(
        (i) => i.lableId === item.lableId
      );
      if (selectedIndex > -1) {
        this.selectedInterests.splice(selectedIndex, 1);
        // 添加回 interestList
        this.interestList.push(item);
      }
    },
    togglePreference(item) {
      // 先判断是否已达到最大选择数量
      if (this.selectedPreferences.length >= 10) {
        this.$refs.uToast.show({
          title: "最多选择10个",
          type: "error",
        });
        return;
      }

      // 从 industryDirectionList 中查找待移除的标签
      const directionIndex = this.industryDirectionList.findIndex(
        (i) => i.lableId === item.lableId
      );
      if (directionIndex > -1) {
        // 移除标签
        this.industryDirectionList.splice(directionIndex, 1);
        // 添加到已选择列表
        this.selectedPreferences.push(item);
      }
    },
    removePreference(item) {
      // 从已选择列表中移除
      const selectedIndex = this.selectedPreferences.findIndex(
        (i) => i.lableId === item.lableId
      );
      if (selectedIndex > -1) {
        this.selectedPreferences.splice(selectedIndex, 1);

        // 获取当前选中的行业领域（根据lableId）
        const currentIndustry = this.labelList.find(
          (i) => i.lableId === this.selectedIndustryId // ***修改：使用lableId查找***
        );
        if (currentIndustry && currentIndustry.list) {
          // 如果删除的标签属于当前行业领域，则添加回列表
          const originalItem = currentIndustry.list.find(
            (i) => i.lableId === item.lableId
          );
          if (originalItem) {
            this.industryDirectionList.push(originalItem);
          }
        }
      }
    },
    // 回填个人信息  如果已经存在教师身份，学生身份未认证时
    async echoFn() {
      const res = await this.$u.apiList.SelectUserTypeApi();
      console.log(res, "res---");
      const jzgFlag = res.jzgFlag;
      const studentFlag = res.studentFlag;
      if (studentFlag === false && jzgFlag === true) {
        this.form.name = this.vuex_user.name;
        this.form.userName = this.vuex_user.userName
        this.form.sex = this.vuex_user.sex;
        this.headerImg = this.$u.http.config.baseUrl + this.vuex_user.head;
        this.shape = 'circle'
        this.form.path = this.vuex_user.head;
      }
    },
    //完成信息填写
    async complete() {
      var data = this.form;
      if (data.educationStr == "") {
        // return this.$tips("请选择学历", "error");
        return this.$refs.uToast.show({
          title: "请选择学历",
          type: "error",
        });
      }
      if (data.schoolId == "") {
        // return this.$tips("请选择学校", "error");
        return this.$refs.uToast.show({
          title: "请选择学校",
          type: "error",
        });
      }
      if (data.college == "") {
        // return this.$tips("请填写学院", "error");
        return this.$refs.uToast.show({
          title: "请填写学院",
          type: "error",
        });
      }
      if (data.major == "") {
        // return this.$tips("请填写专业", "error");
        return this.$refs.uToast.show({
          title: "请填写专业",
          type: "error",
        });
      }
      if (data.startYear == "" && data.endYear == "") {
        // return this.$tips("请选择在校时间", "error");
        return this.$refs.uToast.show({
          title: "请选择在校时间",
          type: "error",
        });
      }
      if (new Date(data.startYear) - new Date(data.endYear) > 0) {
        // return this.$tips("请选择正确的在校时间", "error");
        return this.$refs.uToast.show({
          title: "请选择正确的在校时间",
          type: "error",
        });
      }
      if (this.isGraduate) {
        console.log("跳转标签设置");
        if (this.selectedWorkAreaId == "") {
          this.$refs.uToast.show({
            title: "请选择行业领域",
            type: "error",
          });
          return;
        }
        this.step = 2;
        console.log("form---", this.form);
        this.GetLableList();
        return;
      } else {
        this.step = 3;
        this.GetInterestLable()
      }
      // data.userType = 0;
      // // 按照之前逻辑  真实姓名传参给 userName
      // data.userName = this.form.name;
      // // 新增用户名
      // data.name = this.form.userName;
      // data.list = this.selectedWorkAreaId
      //   ? [{ lableId: this.selectedWorkAreaId }]
      //   : [];
      // data.workFieldId = this.WorkAreaList[0].value;
      // console.log(data, "data--");
      // const res = await this.$u.api.saveUserInfo(data);

      // const req = {
      //   userId: this.vuex_user.id,
      //   educationId: res,
      // };
      // const result = await this.$u.apiList.SelectEducation(req);
      // console.log(result, "result--");
      // this.$u.vuex("vuex_token", result.token);
      // this.$u.vuex("vuex_glyType", result.glyType);
      // this.$u.vuex("vuex_user", result.user);
      // this.$u.api.getUser().then(() => {
      //   this.vuex_user.isFill = true;
      //   uni.switchTab({
      //     url: "../../main/index/index",
      //   });
      // });
    },
    // 获取学校
    getShool() {
      this.$u.api.GetAllSchool().then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.shoolList.push({
            label: res[i].schoolName + "",
            value: res[i].id + "",
          });
        }
      });

      setTimeout(() => {
        if (this.vuex_userInfo.schoolName) {
          this.shoolName = this.vuex_userInfo.schoolName.name;
          this.form.schoolId = this.vuex_userInfo.schoolName.id;
          this.getColleg(this.form.schoolId);

          // console.log(this.vuex_userInfo.schoolName.id);
          // console.log('this.form',this.form);
        }
      }, 300);
    },
    //获取学院
    getColleg(id) {
      const data = {
        schoolid: id,
      };
      this.$u.apiList.GetCollegeList(data).then((res) => {
        this.CollegeList = [];
        for (let i = 0; i < res.length; i++) {
          this.CollegeList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院专业
    getMajor(id) {
      const data = {
        schoolid: this.form.schoolId,
        collegeid: id,
      };
      this.$u.apiList.GetMajorList(data).then((res) => {
        this.MajorList = [];
        for (let i = 0; i < res.length; i++) {
          this.MajorList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    // 学历选择
    educationalSelect(index) {
      this.form.educationStr = this.educationalList[index].text;
    },
    // 时间选择
    confirm(e) {
      this.showTime = e[0].value + " - " + e[1].value;
      this.form.startYear = e[0].value + "";
      this.form.endYear = e[1].value + "";

      // 判断是否为毕业生
      const currentYear = new Date().getFullYear();
      if (parseInt(e[1].value) < currentYear) {
        this.isGraduate = true;
      } else {
        this.isGraduate = false;
      }
    },
    // 学校选择
    shoolSelect(e) {
      this.form.college = "";
      this.form.collegeId = "";
      this.form.major = "";
      this.form.majorId = "";
      this.shoolName = e[0].label;
      this.form.schoolId = e[0].value;
      this.getColleg(this.form.schoolId);
    },
    //学院选择
    selectCpllege(e) {
      this.form.major = "";
      this.form.majorId = "";
      this.form.college = e[0].label;
      this.form.collegeId = e[0].value;
      this.getMajor(this.form.collegeId);
    },
    //选择专业
    selectMajor(e) {
      this.form.major = e[0].label;
      this.form.majorId = e[0].value;
    },
    // 头像裁剪
    chooseAvatar() {
      // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
      this.shape = "circle";
      this.$u.route({
        // 关于此路径，请见下方"注意事项"
        url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
        // 内部已设置以下默认参数值，可不传这些参数
        params: {
          // 输出图片宽度，高等于宽，单位px
          destWidth: 200,
          // 裁剪框宽度，高等于宽，单位px
          rectWidth: 200,
          // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
          fileType: "jpg",
          shape: "circle", // 新增：设置为圆形裁剪
        },
      });
    },
    back() {
      if (this.step > 0) {
        if (this.step === 3 && !this.isGraduate) {
          // 如果不是毕业生，从 step 3 直接返回到 step 1
          this.step = 1;
        } else {
          this.step--;
        }
      } else {
        uni.navigateBack(); // 当 step 为 0 时，返回上一页
      }
    },
    next() {
      const data = this.form;
      if (!data.path) {
        // return this.$tips("请上传头像", "error");
        return this.$refs.uToast.show({
          title: "请上传头像",
          type: "error",
        });
      }
      if (!data.name) {
        // return this.$tips("请填写真实姓名", "error");
        return this.$refs.uToast.show({
          title: "请填写真实姓名",
          type: "error",
        });
      }
      if (!data.userName) {
        // return this.$tips("请填写真实姓名", "error");
        return this.$refs.uToast.show({
          title: "请填写用户名",
          type: "error",
        });
      }
      var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g");
      if (!reg.test(data.name)) {
        //  this.$tips("请输入正确的真实姓名", "error");
        this.$refs.uToast.show({
          title: "请输入正确的真实姓名",
          type: "error",
        });
        return;
      }
      if (!data.sex) {
        // return this.$tips("请选择性别", "error");
        return this.$refs.uToast.show({
          title: "请选择性别",
          type: "error",
        });
      }
      this.step = 1;
      console.log(this.form, "this.form--");
    },
    getWorkFile() {
      this.$u.apiList.GetWorkFile().then((res) => {
        this.studentId = res.find(item => item.workFieldName === '在校生').id;
        this.WorkAreaList = res.map((item) => {
          return {
            label: item.workFieldName,
            value: item.id,
          };
        }).filter(item => item.label !== '在校生' && item.label !== '教师' && item.label !== '未知');
      });
      console.log('WorkAreaList----',this.WorkAreaList)
    },
    workAreaSelect(e) {
      console.log("选择行业领域", e);
      this.selectedWorkArea = e[0].label;
      this.selectedWorkAreaId = e[0].value;
      let param = { WorkFileId: e[0].value };
      this.$u.apiList.GetLableList(param).then((res) => {
        this.labelList = res;
        console.log("res----", res);
      });
    },
    GetLableList() {
      let param = { WorkFileId: this.selectedWorkAreaId };
      this.$u.apiList.GetLableList(param).then((res) => {
        this.labelList = res;
        // industryList 存储完整的对象数组
        this.industryList = res;

        // 默认选中第一个行业领域并显示其方向
        if (res.length > 0) {
          this.selectedIndustryId = res[0].lableId; // ***修改：使用lableId***
          this.selectedIndustryName = res[0].lableName; // 存储名称

          if (res[0].list) {
            this.industryDirectionList = res[0].list;
          } else {
            this.industryDirectionList = [];
          }
        } else {
          this.selectedIndustryId = null; // 如果没有数据，清空选中状态为null
          this.selectedIndustryName = ''; // 清空名称
          this.industryDirectionList = []; // 清空行业方向列表
        }
      });
    },
    // 处理行业领域选择
    handleIndustrySelect(index) {
      const clickedIndustryItem = this.industryList[index]; // 获取完整对象

      // 更新选中的行业领域ID和名称
      this.selectedIndustryId = clickedIndustryItem.lableId; // ***修改：使用lableId***
      this.selectedIndustryName = clickedIndustryItem.lableName;

      // 获取已选择的标签ID列表
      const selectedIds = this.selectedPreferences.map((item) => item.lableId);

      if (clickedIndustryItem && clickedIndustryItem.list) {
        // 过滤掉已选择的标签
        this.industryDirectionList = clickedIndustryItem.list.filter(
          (item) => !selectedIds.includes(item.lableId)
        );
      } else {
        this.industryDirectionList = [];
      }
    },
    // 完成偏好设置
    async finishPreference() {
      if (
        this.selectedPreferences.length === 0 &&
        this.selectedInterests.length === 0
      ) {
        this.$refs.uToast.show({
          title: "请至少选择一个标签",
          type: "error",
        });
        return;
      }

      try {
        // 构建标签列表，只包含当前选中的标签
        const preferenceList = this.selectedPreferences.map((item) => ({
          lableId: item.lableId,
        }));

        const interestList = this.selectedInterests.map((item) => ({
          lableId: item.lableId,
        }));

        this.form.list = [...preferenceList, ...interestList];
        this.form.userType = this.isGraduate ? 2 : 0;
        this.form.workFieldId = this.isGraduate ? this.selectedWorkAreaId : this.studentId;  //在校生id
        // 调用保存接口
        const res = await this.$u.api.saveUserInfo(this.form);
        const req = {
          userId: this.vuex_user.id,
          educationId: res,
        };
        const result = await this.$u.apiList.SelectEducation(req);
        this.$u.vuex("vuex_token", result.token);
        this.$u.vuex("vuex_glyType", result.glyType);
        this.$u.vuex("vuex_user", result.user);

        this.$u.api.getUser().then(() => {
          this.vuex_user.isFill = true;
          uni.switchTab({
            url: "../../main/index/index",
          });
        });
        // 保存成功后跳转到首页
      } catch (error) {
        this.$refs.uToast.show({
          title: "保存失败，请重试",
          type: "error",
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: rgb(255, 255, 255);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  height: 100%;

  .group_2 {
    padding: 0.49rem 0.29rem 1.15rem;
    overflow-y: auto;

    .text_3 {
      align-self: center;
      color: rgb(51, 51, 51);
      font-size: 0.18rem;
      font-family: PingFang;
      line-height: 0.17rem;
    }

    .group_1 {
      margin-top: 0.15rem;

      .text_4 {
        margin-top: 0.15rem;
        color: rgb(153, 153, 153);
        font-size: 0.14rem;
        font-family: PingFang;
        line-height: 0.13rem;
      }
    }

    .group_5 {
      margin-top: 0.4rem;

      .text_5 {
        align-self: flex-start;
        color: rgb(51, 51, 51);
        font-size: 0.15rem;
        font-family: PingFang;
        line-height: 0.14rem;
      }

      .view {
        // border-bottom: solid 0.005rem rgb(153, 153, 153);
      }

      .text-wrapper {
        // margin-top: 0.16rem;
      }
    }
    .input-box {
      padding: 20rpx 40rpx;
      border-radius: 100rpx;
      background: #f6f8f9;
    }

    .group_3 {
      margin-top: 32rpx;
      // height: 1.35rem;
      position: relative;

      .image_4 {
        filter: drop-shadow(0px 0.015rem 0.03rem rgba(102, 102, 102, 0.23));
        width: 0.68rem;
        height: 0.68rem;
      }

      .text_7 {
        color: rgb(51, 51, 51);
        font-size: 32rpx;
        font-family: PingFang;
        line-height: 32rpx;
        font-weight: bold;
        // position: absolute;
        // left: 0;
        // top: 0;
      }

      .group_4.on,
      .group_6.on {
        image {
          border: 2px solid #5ac0ff;
          border-radius: 50%;
          overflow: hidden;
        }
      }

      .group_6 {
        position: absolute;
        left: 0.4rem;
        top: 0.4rem;

        .text_8 {
          margin-top: 0.15rem;
          color: rgb(51, 51, 51);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.13rem;
        }
      }

      .group_4 {
        position: absolute;
        right: 0.4rem;
        top: 0.4rem;

        .text_9 {
          margin-top: 0.15rem;
          color: rgb(51, 51, 51);
          font-size: 0.14rem;
          font-family: PingFang;
          line-height: 0.13rem;
        }
      }
    }

    .text-wrapper_1 {
      padding: 0.15rem 0 0.14rem;
      /*  background-image: linear-gradient(90deg,
          rgb(135, 230, 254) 0%,
          rgb(91, 192, 254) 52%,
          rgb(46, 155, 255) 100%);
      box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
      background: #3cb5fb;
      border-radius: 0.23rem;
    }

    .button {
      margin: 66rpx 0 0;
    }
  }
}

.userList {
  // padding-left: 0.16rem;
  // padding-top: 0.3rem;
  background: #f6f8fa;
  height: 100vh;
  .text-wrapper_1 {
    padding: 0.15rem 0 0.14rem;
    /* background-image: linear-gradient(90deg,
        #87e6fe 0%,
        #5bc0fe 52%,
        #2e9bff 100%);
    box-shadow: 0px 0.03rem 0.09rem rgba(38, 122, 199, 0.34); */
    background: #3cb5fb;
    border-radius: 0.23rem;
  }

  .button {
    margin: 0.6rem 0.15rem 0;
  }

  .text_3 {
    // align-self: center;
    margin-top: 40rpx;
    margin-left: 50rpx;
    color: rgb(51, 51, 51);
    font-size: 0.18rem;
    font-family: PingFang;
    line-height: 0.17rem;
  }

  .group_4 {
    margin: 40rpx auto;
    background: #fff;
    width: calc(100% - 80rpx);
    padding: 20rpx;
    border-radius: 32rpx;

    .list-item {
      padding: 0.05rem 0.1rem 0.05rem;
      border-bottom: 2rpx solid #f6f8f9;
      &:last-child {
        border-bottom: none;
      }

      .text_8 {
        color: #000;
        font-size: 32rpx;
        font-family: PingFang;
        line-height: 0.35rem;
        // margin-right: 0.15rem;
      }
      .item-right {
        display: flex;
        align-items: center;
        width: calc(100% - 150rpx);
        position: relative;
      }

      .input-cover {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }

      .right-img {
        width: 12rpx;
        height: 24rpx;
        margin-left: 10rpx;
        margin-top: 5rpx;
      }

      .text_26 {
        color: #000;
        font-size: 0.17rem;
        font-family: PingFang;
        line-height: 32rpx;
      }
    }

    .group_5 {
      margin-top: 0;
    }

    ::v-deep .u-input__input {
      font-size: 32rpx;
    }
  }
}
::v-deep .u-navbar-placeholder {
  background: #f6f8fa;
  // display: none;
  height: 40rpx !important;
}

.preference-page {
  background: #fff;
  height: calc(100vh - 300rpx);
  display: flex;
  flex-direction: column;

  .selected-count {
    padding: 24rpx;
    font-weight: bold;
    font-size: 32rpx;
    line-height: 48rpx;
    color: rgba(0, 0, 0, 0.9);
    .desc {
      display: block;
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.6);
      line-height: 40rpx;
      margin-top: 8rpx;
    }
  }
  .selected-tags {
    padding: 0 24rpx;
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx 24rpx;

    .tag {
      display: flex;
      align-items: center;
      background: #3cb5fb;
      color: #fff;
      border-radius: 64rpx;
      padding: 20rpx;
      font-size: 28rpx;
      position: relative;
      // max-width: 200rpx;
      margin-right: 0;
      margin-bottom: 0;
      box-sizing: border-box;
      justify-content: flex-start;
      gap: 6rpx;
    }

    .close-btn {
      font-size: 28rpx;
      margin-right: 8rpx;
      cursor: pointer;
      color: #fff;
      font-weight: bold;
      line-height: 1;
      display: inline-block;
      width: 32rpx;
      height: 32rpx;
      text-align: center;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.18);
    }
  }
  .line {
    width: 100%;
    height: 4rpx;
    background: #f6f8f9;
    margin-top: 24rpx;
    margin-bottom: 44rpx;
  }
  .line-shadow {
    width: 100%;
    height: 2rpx;
    background: #ffffff;
    box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
    margin-top: 56rpx;
  }
  .all-tags {
    padding: 0 24rpx;
    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
      margin-bottom: 18rpx;
    }
    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx 24rpx;
      margin-bottom: 32rpx;
      align-content: flex-start;
      .tag {
        background: #f6f8f9;
        color: #333;
        border-radius: 200rpx;
        padding: 20rpx 32rpx;
        font-size: 28rpx;
        &.selected {
          background: #3cb5fb;
          color: #fff;
        }
      }

      .industry-tag {
        background: #f0f4f8;
        color: #333;
        border-radius: 200rpx;
        padding: 20rpx 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        text-align: center;
        line-height: 28rpx;
        box-sizing: border-box;
        height: 64rpx;
        &.selected {
          background: #3cb5fb;
          color: #fff;
        }
      }
    }
    .industry-tag-list {
      height:776rpx;
      overflow-y: auto;
    }
  }
  .btn-box {
    position: fixed;
    bottom: 62rpx;
    left: 0;
    right: 0;
    padding: 0 24rpx;
  }
  .button {
    margin: 48rpx 0 0 0;
    width: 100%;
  }
}
</style>