mteacher/src/views/service/model/studentInstrument.vue

<template>
  <div class="goods">
    <m-header :backUrl="backUrl2" name="学员乐器列表" />
    <div>
      <van-list v-model="loading" class="studentContainer" v-if="dataShow" key="data" :immediate-check="false" :finished="finished" finished-text="" @load="getStudentList">
        <van-cell-group>
          <van-cell class="input-cell" :center="true" v-for="item in dataList" :key="item.id" @click="selectGood(item)">
            <template slot="icon">
              <van-image :src="item.goodsImg" class="logo">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>

              <!-- <img class="logo" v-else src="@/assets/images/icon_student.png" alt=""> -->
            </template>
            <template slot="title">
              <div style="display: flex; align-items: center; justify-content: space-between">
                {{ item.goodsName }} <span>{{ item.goodsBrand }}</span>
              </div>
              <p style="padding: 0.02rem 0; font-size: 0.14rem; color: #808080">型号：{{ item.specification }}</p>
              <van-tag plain v-if="item.open" color="#01C1B5" style="margin: 0; background: #f2fffc">乐器保养</van-tag>
              <van-tag plain v-else color="#C0C0C0" style="margin: 0">乐器保养</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>
      <m-empty class="empty" msg="暂无乐器列表" v-else key="data" />
    </div>
  </div>
</template>

<script>
import MHeader from "@/components/header";
import { studentInstrumentGetList } from "../api";
import MEmpty from "@/components/MEmpty";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);
export default {
  name: "goods",
  components: { MEmpty, MHeader },
  props: {
    studentId: [String, Number],
    organId: [String, Number],
  },
  data() {
    return {
      backUrl2: {
        callBack: () => {
          this.$emit("input", false);
        },
      },
      dataShow: true,
      loading: false,
      finished: false,
      dataList: [],
      params: {
        search: null,
        page: 1,
        rows: 20,
      },
    };
  },
  mounted() {
    this.loading = true;
    this.getStudentList();
  },
  methods: {
    async getStudentList() {
      let params = this.params;
      params.studentId = this.studentId;
      params.organId = this.organId;
      await studentInstrumentGetList(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          let rows = result.data || [];
          params.page = rows.pageNo;
          rows.rows.forEach((item) => {
            if (dayjs().isBetween(item.startTime, item.endTime)) {
              item.open = 1;
            } else {
              item.open = 0;
            }
          });
          this.dataList = this.dataList.concat(rows.rows);
          if (params.page >= rows.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    selectGood(item) {
      this.$emit("getChoiceInstrument", item);
      this.$emit("input", false);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/commonLess/variable.less");
.studentContainer {
  /deep/.van-cell-group {
    margin-top: 0;
  }
  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: @mFontColor;
    flex: 1 auto;
  }

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    margin-right: 0.12rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }

  .input-cell {
    padding: 0.12rem 0.16rem;

    .van-radio {
      justify-content: flex-end;
    }
  }

  /deep/.van-cell__value {
    height: 0.2rem;
  }

  .van-tag {
    margin-left: 0.08rem;
  }
}
.input-cell {
  .price-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    del {
      font-size: 0.12rem;
      color: #666666;
      padding-left: 0.1rem;
    }
  }

  .money {
    color: #ff3535;
    font-weight: 600;
    font-size: 0.16rem;
    i {
      font-style: normal;
      font-size: 0.14rem;
    }
  }
}
</style>