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

<template>
  <div class="goodsList">
    <van-sticky>
      <m-header :backUrl="backUrl2" :isFixed="false" name="商品列表" />
      <search @onSearch="onSearch" placeholder="请输入商品名称">
        <template #left>
          <van-dropdown-menu
            active-color="#01C1B5"
            style="padding-right: 0.1rem"
          >
            <!-- <van-dropdown-item :title="valueText1" v-model="value1" :options="option1" @change="onOptionChange" /> -->
            <van-dropdown-item
              :title="valueText2"
              v-model="value2"
              :options="option2"
              @change="onOptionChange"
            />
          </van-dropdown-menu>
        </template>
      </search>
    </van-sticky>
    <div>
      <van-list
        v-model="loading"
        class="studentContainer"
        v-if="dataShow"
        key="data"
        :immediate-check="false"
        :finished="finished"
        finished-text=""
        @load="getRepair"
      >
        <van-cell-group>
          <van-cell
            style="align-items: flex-start"
            v-for="(item, index) in dataList"
            :key="index"
            class="input-cell"
            @click="onChoiceGood(item)"
            :center="true"
          >
            <template slot="icon">
              <div class="logo-section">
                <img class="logo" v-if="item.image" :src="item.image" alt="" />
                <img
                  class="logo"
                  v-else
                  src="@/assets/images/icon_student.png"
                  alt=""
                />
              </div>
            </template>
            <template slot="title">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                "
              >
                {{ item.name }}
              </div>
              <van-tag plain color="#C2A076" style="margin: 0.04rem 0"
                >品牌：{{ item.brand }}</van-tag
              >
              <p style="padding: 0.02rem 0; font-size: 0.14rem; color: #808080">
                型号：{{ item.specification }}
              </p>
              <div class="price-section">
                <div>
                  <span class="money"
                    ><span style="font-weight: 400; font-size: 0.14rem"
                      >现价:</span
                    ><i>￥</i>{{ item.discountPrice | moneyFormat }}</span
                  ><del>原价:￥{{ item.marketPrice | moneyFormat }}</del>
                </div>
                <div style="font-size: 0.14rem; color: #808080">×1</div>
              </div>
            </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 MEmpty from "@/components/MEmpty";
import Search from "@/components/Search";
import { queryGoodsPage, queryGoodsCategoryPage } from "../api";
export default {
  components: { MHeader, MEmpty, Search },
  data() {
    // const query = this.$route.query
    return {
      loading: false,
      finished: false,
      params: {
        status: 1,
        // educationalShow: 1,
        // studentShowOrganId: query.organId,
        page: 1,
        rows: 20,
      },
      dataShow: true, // 是否有数据
      backUrl2: {
        callBack: () => {
          this.$emit("input", false);
        },
      },
      value2: "all",
      valueText2: "商品: 全部",
      search: null,
      option2: [],
      dataList: [],
    };
  },
  async mounted() {
    await queryGoodsCategoryPage({ delFlag: 0, rows: 9999 }).then((res) => {
      let result = res.data;
      if (result.code == 200) {
        let tempArray = [{ text: "全部", value: "all" }];
        result.data.rows.forEach((row) => {
          tempArray.push({
            text: row.name,
            value: row.id,
          });
        });
        this.option2 = tempArray;
      }
    });

    this.loading = true;
    this.getRepair();
  },
  methods: {
    onSearch(value) {
      // 商品搜索
      this.search = value;
      this.params.page = 1;
      this.dataList = [];
      this.loading = true;
      this.finished = false;
      this.dataShow = true;
      this.getRepair();
    },
    onOptionChange() {
      this.option2.forEach((item) => {
        if (item.value == this.value2) {
          this.valueText2 = item.value == "all" ? "商品: 全部" : item.text;
        }
      });

      this.params.page = 1;
      this.dataList = [];
      this.dataShow = true;
      this.loading = true;
      this.finished = false;
      this.getRepair();
    },
    onChoiceGood(item) {
      this.$emit("getChoiceGood", {
        marketPrice: item.marketPrice,
        discountPrice: item.discountPrice,
        specification: item.specification,
        brand: item.brand,
        image: item.image,
        name: item.name,
        id: item.id,
        type: item.type,
      });
      this.$emit("input", false);
    },
    async getRepair() {
      let params = this.params;
      params.type = "ACCESSORIES"; // 只查询辅件
      params.goodsCategoryId = this.value2 == "all" ? null : this.value2;
      params.search = this.search ? this.search : null;
      // params.groupGoods = 0
      await queryGoodsPage(params).then((res) => {
        let result = res.data;
        this.loading = false;
        if (result.code == 200) {
          params.page = result.data.pageNo;
          this.dataList = this.dataList.concat(result.data.rows);
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = 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;
    flex-basis: 70% !important;
  }
  .logo-section {
    flex-basis: 30%;
  }

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    // margin-right: .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;
    }
  }
}
/deep/.van-dropdown-menu__bar {
  background: transparent;
  box-shadow: inherit;
  height: 34px;
}
</style>