volunteer-4/src/pages-sub/home/inputScore/index.vue

<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="h-screen overflow-hidden flex flex-col bg-[#F8F8F8]" :bordered="false">
    <Navbar title="成绩填写" left-arrow @click-left="navigatorBack" safeAreaInsetTop />
    <view class="px-[32rpx] pt-[47rpx] flex flex-col" hover-class="none">
      <text class="text-[22rpx] text-[#636363] text-normal" :selectable="false" :decode="false">
        为了使推荐更准确，请您认真填写
      </text>
      <text
        class="text-[28rpx] text-[#000] text-medium mt-[47rpx]"
        :selectable="false"
        :decode="false"
      >
        预估总分
      </text>
      <wd-input
        custom-class="mt-[24rpx] rounded-[16rpx] bg-white flex items-center px-[32rpx] py-[24rpx]"
        custom-input-class="h-full flex items-center"
        type="number"
        v-model="score"
        placeholder="请输入分数"
        @input="handleChange"
        inputmode="numeric"
        :focus="true"
        :no-border="true"
      >
        <template #suffix>
          <text class="" :selectable="false" :decode="false">分</text>
        </template>
      </wd-input>
      <wd-picker
        custom-class="mt-[16rpx]"
        :columns="termList"
        value-key="code"
        label-key="name"
        v-model="term"
      />
    </view>

    <view class="mt-[32rpx] px-[32rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
      <view class="mb-[16rpx]" hover-class="none">
        <text class="" :selectable="false" :decode="false">首选科目</text>
        <text class="text-[24rpx] text-gray">({{ requireSubjectList.length }}选1)</text>
      </view>
      <RadioGroup
        v-model="requireSubject"
        cell
        inline
        class="custom-radio-group"
        checked-color="#1580FF"
      >
        <Radio
          v-for="item in requireSubjectList"
          :key="item.code"
          :name="item.code"
          shape="button"
          class="custom-radio"
        >
          {{ item.name }}
        </Radio>
      </RadioGroup>
    </view>

    <view class="mt-[32rpx] px-[32rpx]" hover-class="none">
      <view class="mb-[16rpx]" hover-class="none" v-if="requireSubjectList.length > 0">
        <text class="" :selectable="false" :decode="false">次选科目</text>
        <text class="text-[24rpx] text-gray">
          ({{ optionalSubjectList.length }}选{{ requireSubjectList.length > 0 ? 2 : 3 }})
        </text>
      </view>
      <CheckboxGroup v-model="optionalSubject" :max="3" checked-color="#1580FF">
        <Checkbox
          v-for="item in optionalSubjectList"
          :key="item.code"
          :name="item.code"
          class="custom-checkbox"
        >
          {{ item.name }}
        </Checkbox>
      </CheckboxGroup>
    </view>
    <button
      block
      class="mt-auto mb-[32rpx] rounded-[8rpx]! bg-[#1580FF]! mx-[32rpx]! text-[32rpx]! text-[#fff]! font-normal"
      @click="saveScore"
      :disabled="btnFlag < 3"
    >
      保存
    </button>
    <view class="bg-white pb-safe" hover-class="none"></view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import CheckboxGroup from '@/pages-sub/components/check-group/CheckboxGroup.vue'
import Checkbox from '@/pages-sub/components/check-group/Checkbox.vue'
import RadioGroup from '@/pages-sub/components/radio-group/RadioGroup.vue'
import Radio from '@/pages-sub/components/radio-group/Radio.vue'

import {
  useRules,
  requireSubjectList,
  optionalSubjectList,
} from '@/pages-sub/home/inputScore/useRules'

const userStore = useUserStore()

// 学期
const term = ref(userStore.userInfo.estimatedAchievement.year)
const termList = ref<{ name: string; code: number }[]>(userStore.userInfo.city.lizations)

const navigatorBack = () => {
  uni.navigateBack()
}

// 输入成绩
const score = ref<number | string>(userStore.userInfo.estimatedAchievement.expectedScore || '')
const handleChange = (e: any) => {
  const _score = Number(score.value) || 0
  if (_score > userStore.userInfo.city.allscore) {
    score.value = userStore.userInfo.city?.allscore
  }
}

// 单选 必选学科
const requireSubject = ref(userStore.userInfo.estimatedAchievement.requireSubject.code || '')

// 任意选择科目
const optionalSubject = ref(
  userStore.userInfo.estimatedAchievement.optionalSubject.map((item) => item.code),
)

// 判断是否关闭按钮
const btnFlag = computed(() => {
  let num = 0
  if (requireSubject.value !== '') {
    num++
  }
  num = num + optionalSubject.value.length
  return num
})

onBeforeMount(() => {
  useRules()
})

const saveScore = () => {
  if (score.value === '') {
    uni.showToast({
      title: '请检查分数',
    })
    return
  }
  const data = {
    year: term, // 学期
    score: score.value, // 成绩
    optionalSubject: optionalSubjectList.value.filter((item) =>
      optionalSubject.value.includes(item.code),
    ), // 任意选择科目
    requireSubject: requireSubject.value, // 必选科目
    cityCode: userStore.userInfo.city.code, // 城市code
  }

  userStore.setEstimatedAchievement(data)

  uni.showToast({
    title: '保存成功',
    icon: 'none',
  })
  setTimeout(() => {
    uni.navigateBack()
  }, 500)
}
</script>

<style lang="scss" scoped>
:deep(.custom-checkbox) {
  .checkbox {
    width: 152rpx;
    height: 76rpx;
    background-color: #fff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #fff;
  }
  .checkbox__icon {
    display: none;
  }
}

:deep(.checkbox-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
  justify-content: center;
  background-color: #f8f8f8;
}
:deep(.checkbox-active) {
  background-color: rgba(21, 128, 255, 0.1) !important;
  border-color: #1580ff !important;
  .checkbox__label,
  .radio__label {
    color: #1580ff !important;
  }
}

:deep(.custom-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 32rpx;
  justify-items: center;
  background-color: #f8f8f8;
}

:deep(.custom-radio) {
  width: 152rpx;
  height: 76rpx;
  background-color: #fff;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #fff;

  .radio__icon {
    display: none;
  }

  .radio-active {
    background-color: rgba(21, 128, 255, 0.1) !important;
    border-color: #1580ff !important;
    border: 2rpx solid #1580ff;
    border-radius: 8rpx;
  }
}
</style>