xinfeiyue-wx/package_sub/pages/RecommendForm/RecommendForm.vue

<template>
  <page-meta
      :page-style="`overflow:${
      isShowRecommend
        ? 'hidden'
        : 'visible'
    };`"
  ></page-meta>
  <view class="container safe-area-inset-bottom">
    <image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>

    <view class="wrap">
      <view class="card">
        <u-form :model="form" ref="uForm" label-width="auto">
          <u-form-item label="学生姓名" prop="name">
            <u-input v-model="form.name" placeholder="请输入" input-align="right" />
          </u-form-item>
          <u-form-item label="性别" prop="sex">
            <u-input type="select" v-model="form.sex" placeholder="请选择" input-align="right" @click="isShowSex = true"/>
          </u-form-item>
          <u-form-item label="中考年份" required prop="year">
            <u-input type="select" v-model="form.year" placeholder="请选择" input-align="right" @click="isShowYear = true" />
          </u-form-item>
          <u-form-item label="民族" prop="nationality">
            <u-input v-model="form.nationality" placeholder="请输入" input-align="right" />
          </u-form-item>
<!--          <u-form-item label="所在城市" required prop="city">-->
<!--            <u-input type="select" v-model="form.city" placeholder="请选择" input-align="right" @click="regionType = 'city',isShowRegion = true" />-->
<!--          </u-form-item>-->
          <u-form-item label="所在县区" required prop="area_id">
            <u-input type="select" :value="formArea" placeholder="请选择" input-align="right" @click="isShowAreaSelect = true" />
          </u-form-item>
          <u-form-item label="所在学校" prop="school_id">
            <u-input type="select" :value="form.school_name" placeholder="请输入" input-align="right" @click="isShowSchoolSelect = true" />
          </u-form-item>
        </u-form>
      </view>

      <view class="card">
        <view class="card__title">成绩</view>

        <view class="score">
          <view class="score-row">
            <view class="score-row__text">估分成绩：</view>
            <u-input v-model="form.anticipate_score" style="width: 280rpx;" placeholder="输入估分成绩" input-align="center" border border-color="#e0e0e0" :height="50" :clearable="false"></u-input>
          </view>

          <view class="score-row">
            <view class="score-row__text">成绩稳定性：</view>

            <view class="my-radio-group">
              <view class="my-radio" :class="form.is_stable ? 'my-radio--checked' : ''" @click="form.is_stable = 1">是</view>
              <view class="my-radio" :class="!form.is_stable ? 'my-radio--checked' : ''" @click="form.is_stable = 0">否</view>
            </view>
          </view>

          <view class="score-row">
            <view class="score-row__text">是否为裸分：</view>

            <view class="my-radio-group">
              <view class="my-radio" :class="form.is_bare ? 'my-radio--checked' : ''" @click="form.is_bare = 1">是</view>
              <view class="my-radio" :class="!form.is_bare ? 'my-radio--checked' : ''" @click="form.is_bare = 0">否</view>
            </view>
          </view>
        </view>
      </view>

      <u-button
          shape="circle"
          :custom-style="{
            background: 'linear-gradient(to right, #2e63ef, #4186f2)',
            height: '76rpx',
            'line-height': '76rpx',
            'color': '#fff',
            'font-size': '33rpx',
            'letter-spacing': '5rpx',
            'width': '450rpx',
            'margin': '130rpx auto 0'
          }"
          @click="submit">保存</u-button>
    </view>

    <u-select v-model="isShowSex" :list="sexList" @confirm="e => form.sex = e[0].value"></u-select>
    <u-picker
        mode="time"
        v-model="isShowYear"
        :params="{
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				}"
        @confirm="e => form.year = e.year"></u-picker>
<!--    <u-picker-->
<!--        mode="region"-->
<!--        v-model="isShowRegion"-->
<!--        :default-region="defaultRegion"-->
<!--        :params="regionParams"-->
<!--        @confirm="regionPick"></u-picker>-->
    <u-select v-model="isShowSchoolSelect" mode="mutil-column-auto" :list="schoolList" @confirm="schoolListConfirm"></u-select>

    <u-select v-model="isShowAreaSelect"
              :list="areaList"
              @confirm="areaConfirm"></u-select>

    <u-popup v-model="isShowRecommend" border-radius="10" mode="bottom" safe-area-inset-bottom length="90%" closeable :custom-style="{ 'background': '#eaf9fe' }">
      <view>
        <view class="recommend-panel" v-for="(value, key) in {top:'冲',steady:'稳',safeguard:'保'}" :key="key">
          <view class="recommend-panel__title">
            “{{ value }}”推荐学校
          </view>

          <view class="recommend-panel__content">
            <view class="list">
              <view
                  class="list-item"
                  v-for="i in recommends[key]"
                  :key="i.id"
                  @click="$u.route({
              url: '/package_sub/pages/SchoolDetail/SchoolDetail',
              params: {
                id: i.id
              }
            })">
                <view class="left">
                  <image mode="aspectFill" class="list-item__img" :src="(i.icon && i.icon.url) ? i.icon.url : vuex_default_icon"></image>
                </view>
                <view class="right">
                  <view class="list-item__title">
                    <text>{{ i.name }}</text>
                    <u-icon name="arrow-right" color="#333" :size="30"></u-icon>
                  </view>
                  <view class="list-item__tags">
                    <view class="list-item__tags--area">
                      {{ schoolArea(i.area_id) }}
                    </view>
                    <view class="list-item__tags--type" v-for="(tag, index1) in i.type" :key="index1">
                      {{ tag }}
                    </view>
                  </view>
                  <view class="list-item__info">
                    办学性质：{{ i.nature === 1 ? '公办' : (i.nature === 2 ? '民办' : '-') }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <u-button
            shape="circle"
            :custom-style="{
            background: 'linear-gradient(to right, #2e63ef, #4186f2)',
            height: '76rpx',
            'line-height': '76rpx',
            'color': '#fff',
            'font-size': '33rpx',
            'letter-spacing': '5rpx',
            'width': '450rpx',
            'margin': '60rpx auto 0'
          }"
            @click="">去模拟填报</u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      regionType: 'city',
      isShowRegion: false,
      isShowYear: false,
      isShowSex: false,
      sexList: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        },
        {
          value: '保密',
          label: '保密'
        }
      ],
      form: {
        area_id: "",
        year: "",
        name: "",
        sex: "",
        nationality: "",
        city: "",
        school_id: "",
        school_name: "",
        anticipate_score: "",
        is_stable: 1,
        is_bare: 1
      },
      rules: {
        area_id: [
          {
            required: true,
            message: '请选择县区'
          }
        ],
      },

      isShowAreaSelect: false,
      areaList: [],
      isShowSchoolSelect: false,
      schoolList: [],

      recommends: {
        top: [],
        steady: [],
        safeguard: []
      },
      isShowRecommend: false,
    };
  },
  watch: {
    vuex_user: {
      handler: function (newVal) {
        const keys = new Map([
          ['middle_exam_year', 'year'],
          ['name', 'name'],
          ['sex', 'sex'],
          ['nationality', 'nationality']
        ])
        Array.from(keys.keys()).forEach(key => {
          if (newVal[key]) {
            this.form[keys.get(key)] = newVal[key]
          }
        })
      },
      immediate: true
    }
  },
  computed: {
    formArea() {
      return this.areaList.find(i => i.value === this.form.area_id)?.label
    },
    regionParams() {
      return this.regionType === 'city' ? {
        province: true,
        city: true,
        area: false,
      } : {
        province: false,
        city: false,
        area: true,
      }
    },
    defaultRegion() {
      if (this.regionType === 'area') {
        return [this.form.province,this.form.city]
      }
    },
    schoolArea() {
      return function (areaId) {
        return this.areaList.find(i => i.value === areaId)?.label
      }
    }
  },
  methods: {
    areaConfirm(e) {
      if (e[0]) {
        this.form.area_id = e[0].value
      }
    },
    async getArea() {
      try {
        const res = await this.$u.api.area()
        this.areaList = res.list?.map(i => ({ label: i.name, value: i.id }))
      } catch (err) {
        console.error(err)
      }
    },
    schoolListConfirm(e) {
      if (e[1]) {
        const { extra, label } = e[1]
        this.form.school_id = extra
        this.form.school_name = label
      }
    },
    async getSchools() {
      try {
        const { list } = await this.$u.api.schoolList({
          page: 1,
          page_size: 9999
        })
        this.schoolList = this.areaList.map(area => ({
          id: area.value,
          value: area.value,
          label: area.label,
          children: list.data.filter(school => school.area_id === area.value)?.map(i => ({
            value: i.code,
            label: i.name,
            extra: i.id
          }))
        }))
      } catch (err) {
        console.error(err)
      }
    },

    regionPick(e) {
      if (e.hasOwnProperty('province')) {
        this.form.province = e.province?.label
      }
      if (e.hasOwnProperty('city')) {
        this.form.city = e.city?.label
      }
      if (e.hasOwnProperty('area')) {
        this.form.area = e.area?.label
      }
    },

    submit () {
      this.$refs['uForm'].validate(valid => {
        if (valid) {
          try {
            this.$u.api.recommendForm(this.form).then(async res => {
              console.log(res)
              uni.showToast({
                title: '提交成功',
                icon: 'none',
                duration: 1000
              })
              const { model } = res
              this.recommends = model?.recommends
              this.isShowRecommend = true
            })
          } catch (err) {
            console.error(err)
          }
        }
      })
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  created() {
    this.getArea().then(_ => this.getSchools())
  },
}
</script>

<style lang="scss">
.u-drawer-bottom {
  background: #eaf9fe !important;
}
.container {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: #eaf8fe;

  .wrap {
    z-index: 3;
    position: relative;
    padding-top: 3.6vh;

    .card {
      margin: 20rpx 24rpx 0;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: #ffffff;
      padding: 32rpx 36rpx 40rpx 40rpx;

      &__title {
        display: inline-block;
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
        padding: 0 10rpx;
        z-index: 3;
        position: relative;

        &::after {
          content: '';
          background: linear-gradient(to right, #2e63ef, #4187f2);
          height: 6rpx;
          border-radius: 4rpx;
          z-index: 0;
          position: absolute;
          bottom: 4rpx;
          left: 0;
          right: 0;
        }
      }
    }

    .score {
      margin-top: 38rpx;

      &-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__text {
          flex-basis: 170rpx;
          font-size: 28rpx;
          text-transform: uppercase;
          color: #333333;
        }
      }
    }
    .score-row + .score-row {
      margin-top: 20rpx;
    }
  }
}
.bkg {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
}
.my-radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .my-radio {
    width: 131rpx;
    height: 48rpx;
    border-radius: 24rpx;
    font-size: 24rpx;
    line-height: 48rpx;
    text-transform: uppercase;
    color: #000000;
    background-color: #e4e9f0;
    text-align: center;
    transition: all .2s;

    &--checked {
      background-color: #1165f8;
      color: #fff;
    }
  }
  .my-radio + .my-radio {
    margin-left: 18rpx;
  }
}

.recommend-panel {
  padding: 0 24rpx;

  &__title {
    font-size: 36rpx;
    text-transform: uppercase;
    color: #333333;
    font-weight: bold;
    padding: 44rpx 0;
  }
  &__content {
    .list {

      &-item {
        padding: 24rpx 28rpx 24rpx 32rpx;
        border-radius: 20rpx;
        filter: drop-shadow(-2.179px 3.355px 2.5px rgba(208,209,209,0.3));
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          .list-item__img {
            border-radius: 100%;
            height: 150rpx;
            width: 150rpx;
          }
        }
        .right {
          flex: 1;
          margin-left: 34rpx;

          .list-item__title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            text {
              max-width: 300rpx;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 30rpx;
              color: #333333;
              font-weight: 500;
            }
          }
          .list-item__tags {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-top: 20rpx;

            &--area {
              color: #1a95da;
              font-size: 24rpx;
              border-radius: 20rpx;
              background-color: rgba(26, 149, 218, 0.2);
              padding: 8rpx 18rpx;
            }
            &--type {
              color: #dd9447;
              font-size: 24rpx;
              border-radius: 20rpx;
              background-color: rgba(233, 144, 50, 0.2);
              padding: 6rpx 18rpx;
            }
            & > view + view {
              margin-left: 10rpx;
            }
          }
          .list-item__info {
            padding-top: 20rpx;
            font-size: 24rpx;
            text-transform: uppercase;
            color: rgba(51, 51, 51, 0.8);
          }
        }
      }
      .list-item + .list-item {
        margin-top: 24rpx;
      }
    }
  }
}
</style>