下拉菜单 绑定数据

<template> 

<!-- 下拉菜单 -->

          <div class="nav_mg_top">

            <div class="down_bg">

              <div class="dropdown pa">

                <span>{{ LANG.test1.desc83 }}</span>

                <div class="dropdown-content">

                  <ul>

                    <li @click="classification()">{{ LANG.test1.desc184 }}</li>

                    <li @click="classificationDsc()">

                      {{ LANG.test1.desc84 }}

                    </li>

                    <li @click="classificationAsc()">

                      {{ LANG.test1.desc85 }}

                    </li>

                    <li @click="priceDsc()">{{ LANG.test1.desc86 }}</li>

                    <li @click="priceAsc()">{{ LANG.test1.desc87 }}</li>

                  </ul>

                </div>

              </div>

            </div>

            <div class="filtration">

              <div class="pa">

                <span>{{ LANG.test1.desc183 }}</span>

                <div>

                  <ul>

                    <li @click="grade()">{{ LANG.test1.desc184 }}</li>

                    <li @click="gradeN()">{{ LANG.test1.desc96 }}</li>

                    <li @click="gradeR()">{{ LANG.test1.desc94 }}</li>

                    <li @click="gradeSR()">{{ LANG.test1.desc90 }}</li>

                    <li @click="gradeSSR()">{{ LANG.test1.desc95 }}</li>

                  </ul>

                </div>

              </div>

            </div>

          </div>

</tamplate>

<style>

//下拉菜单

.nav_mg_top {

  margin-top: 3%;

}

.filtration {

  float: right;

  margin-right: 5%;

  z-index: 999;

  width: 2rem;

  height: 0.4rem;

  line-height: 0.4rem;

  background: url("../assets/images/Rectangle.png") no-repeat;

  background-size: 100% 100%;

  span {

    display: inline-block;

    font-weight: 700;

    color: #e7e7e7;

    text-indent: 0.25rem;

  }

  li {

    font-weight: 700;

    color: #e7e7e7;

    display: none;

  }

}

.filtration:hover ul li {

  display: block;

  z-index: 9999;

}

.pa div {

  position: relative;

  z-index: 999;

}

.down_bg {

  float: right;

  width: 2.7rem;

  height: 0.4rem;

  line-height: 0.4rem;

  background: url("../assets/images/Rectangle.png") no-repeat;

  background-size: 100% 100%;

}

.dropdown {

  position: relative;

  display: inline-block;

  color: #e7e7e7;

  span {

    font-weight: 700;

    margin-left: 20%;

    white-space: nowrap;

  }

}

.dropdown-content {

  z-index: 999;

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  padding: 0.03rem 0;

}

.dropdown-content:last-child {

  padding: 0 0;

}

.down_bg:hover .dropdown .dropdown-content {

  display: block;

}

ul {

  display: block;

  text-align: center;

  cursor: pointer;

}

ul li {

  width: 100%;

  white-space: nowrap;

  line-height: 0.3rem;

  background: #1e2127;

  font-weight: 700;

}

ul li:hover {

  background-color: #4b7dc8;

  width: 100%;

}

</style>

<script>

data()

{
return{

cur: 1, //当前页码

num:0,

qualityIl: 4,

}

}

methods:{

 clickHand: function (index) {

      this.$axios

        .get("/website/PersonalPet", {

          params: {

            num: this.num, //默认价格排序

            currentPage: this.cur,

            address: this.CTManager.account,

            qualityIl: this.qualityIl,

          },

        })

        .then((res) => {

          if (res.data.msg == "成功") {

            this.dataList = [];

            this.quality = [];

            for (let i = 0; i < res.data.data.dataList.length; i++) {

              this.dataList.push(res.data.data.dataList[i]);

              this.quality.push(res.data.data.dataList[i].quality);

            }

          }

          this.all = res.data.data.totalPage; //总页数

          this.cur = res.data.data.currentPage;

          this.totalPage = res.data.data.pageSize;

          this.$nextTick(() => {

            for (let j = 0; j < this.quality.length; j++) {

              if (this.quality[j] == 0) {

                this.$refs.bgImg[j].className = "nrsrssr N ";

                this.$refs.bg[j].className = "bj pic  MaskGroup";

              } else if (this.quality[j] == 1) {

                this.$refs.bg[j].className = "bj pic  MaskGroup1 ";

                this.$refs.bgImg[j].className = "nrsrssr R";

              } else if (this.quality[j] == 2) {

                this.$refs.bg[j].className = "bj pic MaskGroup2 ";

                this.$refs.bgImg[j].className = "nrsrssr SR";

              } else if (this.quality[j] == 3) {

                this.$refs.bg[j].className = "bj pic  MaskGroup3 ";

                this.$refs.bgImg[j].className = "nrsrssr SSR";

              }

            }

          });

        })

        .catch((err) => {

          console.log(err, "!==");

        });

    },

   // 品级排序

    grade() {

      this.cur = 1;

      this.qualityIl = 4;

      this.clickHand();

    },

    gradeN() {

      this.cur = 1;

      this.qualityIl = 0;

      this.clickHand();

    },

    gradeR() {

      this.cur = 1;

      this.qualityIl = 1;

      this.clickHand();

    },

    gradeSR() {

      this.cur = 1;

      this.qualityIl = 2;

      this.clickHand();

    },

    gradeSSR() {

      this.cur = 1;

      this.qualityIl = 3;

      this.clickHand();

    },

    //类 价格 排序

    //默认

    classification() {

      this.cur = 1;

      this.num = 0;

      this.clickHand();

    },

    //类降

    classificationDsc() {

      this.cur = 1;

      this.num = 3;

      this.clickHand();

    },

    //类升

    classificationAsc() {

      this.cur = 1;

      this.num = 4;

      this.clickHand();

    },

    // 价格降

    priceDsc() {

      this.cur = 1;

      this.num = 1;

      this.clickHand();

    },

    // 价格升

    priceAsc() {

      this.cur = 1;

      this.num = 2;

      this.clickHand();

    },

}

</script>