zc_saas_h5/components/common/selectGradeBox.vue

<template>
  <view>
    <u-popup v-model="isShow" @close="close" mode="bottom" border-radius="40">
      <view class="popup_box">
        <view class="check_head">
          <view class="grade">选择班级</view>
          <u-icon
            name="close"
            color="#CFCFCF"
            size="30"
            @click="close"
          ></u-icon>
        </view>
        <view class="check_con">
          <scroll-view scroll-y="true" style="height: 580rpx">
            <view>
              <u-radio-group v-model="gradeValue">
                <view
                  v-for="(item, index) in gradeList"
                  :key="index"
                  class="items_c"
                >
                  <view class="border_c">
                    <view>
                      <u-radio
                        shape="circle"
                        active-color="#FC3F3F"
                        :name="index"
                        :disabled="
                          item.studentNum > 0 &&
                          item.studentNum == item.studentUpper
                        "
                      >
                        <view
                          :class="
                            index == gradeValue
                              ? 'white-box blue-box'
                              : 'white-box'
                          "
                        >
                          <view>
                            <view class="blackTxt">{{ item.className }}</view>
                            <Class-time-tip :classInfo="item"></Class-time-tip>
                          </view>
                        </view>
                      </u-radio>
                    </view>
                  </view>
                </view>
              </u-radio-group>
            </view>
          </scroll-view>
        </view>
        <view class="confrim-btn">
          <view class="okBtn" @click="okPopup()">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ClassTimeTip from "@/components/common/ClassTimeTip.vue";
export default {
  name: "SaasMiniprogramSelectGradeBox",
  data() {
    return {
      gradeValue: 0,
      gradeList: [],
      isShow: false,
    };
  },

  mounted() {},

  methods: {
    goodsGradeList(id) {
      return this.$api.goodsGradeList({ goodsId: id }).then((res) => {
        let { code, rows } = res.data;
        if (code == 200) {
          if (rows.length == 0) {
            let item = {
              className: "系统分班",
              gradeId: 0,
            };
            rows.push(item);
          } else {
            let isGradeFull = rows.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              rows.unshift(item);
            }
          }
          return Promise.resolve(rows);
        }
      });
    },
    async open(data, selectGradeId) {
      console.log(data, selectGradeId, "data, selectGradeId");
      this.isShow = true;
      this.gradeValue = 0;
      if (Array.isArray(data)) {
        this.gradeList = data;
      } else {
        this.gradeList = await this.goodsGradeList(data);
      }
      if (selectGradeId) {
        this.gradeValue = this.gradeList.findIndex(
          (e) => e.gradeId == selectGradeId
        );
      }
      console.log(this.gradeValue, "this.gradeValue");
    },
    okPopup() {
      this.isShow = false;
      this.$emit("submit", this.gradeList[this.gradeValue]);
    },
    close() {
      this.isShow = false;
      console.log(this.isShow, "this.isShow");
      //   this.$emit("close");
    },
  },
  components: { ClassTimeTip },
};
</script>

<style lang="scss" scoped>
.popup_box {
  height: 824rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 28rpx 28rpx 0rpx 0rpx;
  .check_head {
    padding: 0rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104rpx;
    background: #f2f2f2;
  }
  .items_c {
    padding: 0rpx 32rpx;
  }
  .border_c {
    display: flex;
    align-items: center;
    padding: 20rpx 0rpx;
    border-bottom: 1rpx solid #f2f2f2;
  }
  .okBtn {
    width: 232rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #fc3f3f;
    border-radius: 120rpx;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
  }
  .confrim-btn {
    // border-top:1px solid #eee;
    height: 98rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>