vue中产品列表手写选项卡以及对应的列表(仅供参考不建议直接使用)

    <!-- 产品列表 -->

      <div class="product_main">

        <div class="product_tabs">

          <div

            class="product_tabs_div"

            v-for="(item, index) in productFieldList"

            :key="item.nameCn"

            @click="btnChooseClick(item.id)"

            :class="{ bg: index == currentProductFieldIndex }"

          >

            <img draggable="false" :src="ossPath + item.img2Cn" alt="" />

            <span class="span1">|</span

            ><span class="span2">{{ item.nameCn }}</span>

          </div>

        </div>

        <div class="product_lista">

          <div

            class="product_item"

            v-for="item in productList"

            :key="item.id"

            :class="{

              show: item.fieldIds.indexOf(currentProductField + '') > -1,

            }"

          >

            <a

              class="product_lista"

              :href="publicPath + 'product_detail.html?id=' + item.id"

            >

              <div class="product_item_all">

                <div class="product_item_all_left">

                  <img

                    draggable="false"

                    :src="ossPath + item.imagesCn"

                    alt=""

                  />

                </div>

                <div class="product_item_all_right">

                  <p>{{ item.nameForListCn }}</p>

                  <p>{{ item.aliasForListCn }}</p>

                  <p>{{ item.infoForListCn }}</p>

                </div>

              </div>

            </a>

          </div>

        </div>

      </div>

 

  mounted() {

    const urlGets = C.URL_GET();

    // 查询产品类型列表

    api.****().then((data) => {

      this.productFieldList = data.result.list;

      this.btnChooseClick(urlGets.fieldId || this.productFieldList[0].id);

      // 查询产品类型列表id

      api.***().then((data) => {

        let productList = data.result.list;

        productList.forEach((productItem) => {

          if (productItem.imagesCn) {

            let imagesCnArr = JSON.parse(productItem.imagesCn);

            if (imagesCnArr.length > 0) {

              productItem.imagesCn = imagesCnArr[0].url;

            }

          }

          if (productItem.fieldIds) {

            let fieldIdsArr = productItem.fieldIds.split("#");

            productItem.fieldIds = fieldIdsArr;

          }

        });

        this.productList = productList;

        // console.log(this.product_itemDry);

      });

    });

  },

  methods: {

    btnChooseClick(fieldId) {

      this.currentProductField = fieldId;

      this.productFieldList.forEach((item, index) => {

        if (item.id == fieldId) {

          this.currentProductFieldIndex = index;

        }

      });

    },

  },