mteacher/src/views/service/ServiceStudent.vue

<template>
  <div style="min-height: 100vh">
    <van-sticky>
      <m-header :backUrl="backUrl" :isFixed="false">
        <template slot="right">
          <div
            @click="
              () => {
                $router.push('/goodsOrder');
              }
            "
          >
            商品订单
          </div>
        </template>
      </m-header>
      <search @onSearch="onSearch" placeholder="请输入姓名或手机号" />
    </van-sticky>
    <van-list
      v-model="loading"
      v-if="dataShow"
      :finished="finished"
      :immediate-check="false"
      finished-text="- 没有更多内容 -"
      @load="getStudent"
    >
      <van-radio-group v-model="radioSelect">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in dataList"
            :key="index"
            @click="onSelect(item)"
            title-class="title-class"
            class="input-cell"
            :center="true"
            is-link
          >
            <template slot="icon">
              <img
                class="logo"
                v-if="item.headUrl"
                :src="item.headUrl"
                alt=""
              />
              <img
                class="logo"
                v-else
                src="@/assets/images/icon_students.png"
                alt=""
              />
            </template>
            <template slot="title">
              <div class="label">
                {{ item.name }}
                <span class="phone_section">
                  {{ item.phone ? desensitPhone(item.phone) : null }}
                  <a
                    @click.stop="() => {}"
                    v-if="type != 'sale'"
                    style="height: 0.17rem"
                    :href="'tel:' + item.phone"
                    ><i class="icon_phone"></i
                  ></a>
                </span>
              </div>
            </template>
            <!-- <template slot="default">
              <van-radio :name="item.userId">
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? activeButtonIcon : inactiveButtonIcon"
                  />
                </template>
              </van-radio>
            </template> -->
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-list>
    <m-empty class="empty" v-else />
    <!-- <div class="button-group">
            <van-button type="primary" @click="onSubmit" round size="large">确认选择</van-button>
        </div> -->
  </div>
</template>
<script>
import MHeader from "@/components/header";
import search from "@/components/Search";
import MEmpty from "@/components/MEmpty";
import { getStudentsByTeacherOrgan } from "./api";
export default {
  name: "teacherList",
  components: {
    MHeader,
    search,
    MEmpty,
  },
  data() {
    let query = this.$route.query;
    // 如果有 保存记录，测删除
    localStorage.removeItem("repaireForm");
    return {
      type: query.type,
      radioSelect: null,
      radioSelectOrganId: null,
      loading: false,
      finished: false,
      params: {
        search: null,
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      dataList: [],
      backUrl: {
        status: true,
        path: "/home",
      },
    };
  },
  async mounted() {
    await this.getStudent();
  },
  methods: {
    onSelect(item) {
      // 商品销售
      this.$router.push({
        path: "/goodsSale",
        query: {
          studentId: item.userId,
          studentName: item.name,
          organId: item.organId,
        },
      });
      // this.radioSelect = item.userId;
      // this.radioSelectOrganId = item.organId;
    },
    onSubmit() {
      if (!this.radioSelect) {
        this.$toast("请选择学生");
        return;
      }
      localStorage.setItem("studentId", this.radioSelect);
      let studentName = null;
      this.dataList.forEach((item) => {
        if (item.userId == this.radioSelect) {
          studentName = item.name;
        }
      });
      // 商品销售
      this.$router.push({
        path: "/goodsSale",
        query: {
          studentId: this.radioSelect,
          studentName: studentName,
          organId: this.radioSelectOrganId,
        },
      });
    },
    // 搜索
    onSearch(val) {
      this.params.search = val;
      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getStudent();
    },
    async getStudent() {
      let params = this.params;
      params.search = params.search ? params.search : null;
      let studentList = null;
      try {
        studentList = await getStudentsByTeacherOrgan(params);
        // }
        let result = studentList.data;
        this.loading = false;
        if (studentList.code == 200) {
          // 重点这句，判断是不是重复请求了
          if (this.dataList.length > 0 && result.pageNo == 1) {
            return;
          }
          params.page = result.pageNo;
          this.dataList = this.dataList.concat(result.rows);
          if (params.page >= result.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      } catch {
        //
      }
    },
    desensitPhone(phone) {
      // 手机号脱敏
      let first = phone.substr(0, 3);
      let last = phone.substr(-4);
      return first + "****" + last;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");

/deep/.van-cell__title {
  font-size: 0.14rem;
  color: @mFontColor;
  flex: 1 auto;
}

.logo {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.12rem;
  border-radius: 100%;
}

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

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

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

/deep/.van-radio__icon .van-icon {
  border-color: @sFontColor;
}

/deep/.van-radio__icon--checked {
  .van-icon {
    border-color: @orangeColor;
    background: @orangeColor;
  }
}

.van-tag {
  margin-left: 0.08rem;
}

.button-group {
  margin: 0.3rem 0.26rem 0.2rem;

  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}
.phone_section {
  display: flex;
  align-items: center;
  font-size: 0.14rem;
  color: #999;
}
.icon_phone {
  margin-left: 0.1rem;
  width: 0.14rem;
  height: 0.17rem;
  display: inline-block;
  background: url("../../assets/images/icon_phone.png") no-repeat center center;
  background-size: contain;
}

.title-class {
  display: flex;
  align-items: center;
  .label {
    display: flex;
    flex-direction: column;
    font-size: 0.16rem;
    color: #1a1a1a;
  }
}
</style>