ゼロから、シンプルなショッピングプラットフォームを構築します（15）フロントエンドモール部分

ゼロから、シンプルなショッピングプラットフォームを構築します（14）フロントエンドモールパーツ：
https ：//blog.csdn.net/time_____/article/details/108545330
プロジェクトのソースコード（継続的な更新）：https：//gitee.com/ DieHunter / myCode / tree / master / Shopping

前回の記事では、ホームページと一部のパブリックコンポーネントのインターフェースと機能を実装しました。プロジェクトで使用したツールクラス、ルーティング、グローバルステータスをカプセル化しました。この記事では、製品分類と製品テーマのインターフェースを紹介します。実装プロセスは同じです。コンポーネント内の個別の非同期要求は、データの輻輳を軽減するために使用されます

カテゴリ：

インターフェイスのスタイルと効果

注：カテゴリの商品リストとホームページの商品は随時変更されないため、Vueのkeep-aliveコンポーネントを使用できます。この機能は、コンポーネントが切り替えられたときに状態をメモリに保持して、DOMの繰り返しレンダリングを防止する、つまり保存することです。ページが読み込まれるたびに不要なリクエストを防ぐためにコンポーネントが破棄されることはありません。効果は次のとおりです。

keep-aliveコンポーネントをapp.vueに追加して、ルーティングコンポーネントをラップします

<keep-alive include="Home,Kind">
   <router-view class="appView"></router-view>
</keep-alive>

ここでは、分類リストを左右の2つのコンポーネントに分割してタブ切り替えバーを形成し、左側の分類メニューを選択して切り替えて、右側の製品リストを再レンダリングします。

左スイッチコンポーネントleftMenu.vue

<template>
  <div id="left">
    <div
      v-for="(item,index) in list"
      :key="index"
      @click="sel(item.val)"
      :class="item.val==onesel?'selec':''"
    >{
     
     {item.name}}</div>
  </div>
</template>

<script>
import Config from "../../config/config";
import ShopType from "../../config/shopType";
const { EventName } = Config;
export default {
  data() {
    return {
      list: ShopType.shopType,
      onesel: "0"//默认选中第一项
    };
  },
  methods: {
    sel(item) {
      if (this.onesel == item) return;//防止重复点击同一个选项
      this.onesel = item;
      this.$events.emitEvent(EventName.SelectKind, item);//触发选中商品类型事件
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
#left {
  .w(215);
  height: 100%;
  position: fixed;
  .f_s(34);
  border-right: unit(1 / @pxtorem, rem) solid #d6d6d6;
  margin-right: unit(215 / @pxtorem, rem);
  div {
    .h(125);
    .l_h(125);
    text-align: center;
  }
  .selec {
    border-left: unit(8 / @pxtorem, rem) solid @mainColor;
    text-indent: unit(-8 / @pxtorem, rem);
    color: @mainColor;
  }
}
</style>

右側の製品リストコンポーネント、rightShop.vue

<template>
  <transition name="fade">
    <div class="rightShop" v-if="transitionSwitch">
      <h2 id="head">
        <img :src="imgPath+themeList.shopPic" v-if="themeList.shopPic" alt />
      </h2>
      <ul>
        <li v-for="(item,index) in list" :key="index" @click="clickHandler(item)">
          <img :src="imgPath+item.shopPic" />
          <span>{
     
     {item.shopName}} {
     
     {item.shopScale}}克</span>
        </li>
      </ul>
    </div>
  </transition>
</template>
<script>
import Config from "../../config/config";
import RightShopBussiness from "./bussiness";
const { EventName } = Config;
export default {
  data() {
    return {
      themeList: {},
      list: [],
      imgPath: Config.RequestPath,
      rightShopBussiness: null,
      transitionSwitch: true,
      beforeIndex: 0
    };
  },
  created() {
    this.rightShopBussiness = new RightShopBussiness(this);
    this.rightShopBussiness.initPageConfig(this.beforeIndex);
    this.$events.onEvent(EventName.SelectKind, data => {//监听选择种类事件
      this.transitionSwitch = false;//通过v-show实现fade动画效果
      this.rightShopBussiness.initPageConfig(data);
    });
  },
  destroyed() {
    this.$events.offEvent(EventName.SelectKind);//销毁事件监听
  },
  methods: {
    clickHandler(data) {
      this.$router.push({ name: "ShopInfo", query: { ...data } });
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
.rightShop {
  padding-left: unit(215 / @pxtorem, rem);
  img {
    width: 90%;
    display: block;
    margin: unit(40 / @pxtorem, rem) auto;
  }
  ul {
    margin-top: unit(70 / @pxtorem, rem);
    margin-bottom: unit(110 / @pxtorem, rem);
    li {
      display: inline-block;
      width: 33%;
      vertical-align: top;
      text-align: center;
      img {
        width: 70%;
        margin: 0 auto;
      }
      span {
        .f_s(28);
        text-align: center;
      }
    }
  }
}
</style>

製品カテゴリページをルーター構成に追加し、ホームページおよびショッピングカートインターフェイスと同じレベルのページの下に新しい種類のページを作成すると、製品カテゴリページが完成します。

<template>
  <div>
    <Top title="分类"></Top>
    <div class="content">
      <leftMenu></leftMenu>
      <rightShop></rightShop>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import TabBar from "../../components/tabBar/tabBar";
import Top from "../../components/top/top";
import leftMenu from "../../components/leftMenu/leftMenu";
import rightShop from "../../components/rightShop/rightShop";
export default {
  name: "Kind",
  components: {
    Top,
    leftMenu,
    rightShop,
    TabBar
  }
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
</style>

製品テーマ

製品テーマページでは、ユーザーがホームページのカルーセル画像とテーマモジュールをクリックしてテーマ製品リストのサブページに入ると、製品リスト内の1つの製品をホームページのコンポーネントから再利用できます。

themeListは広告タイトルの画像であり、ホームページの商品リストとテーマページの商品リストはshopTypeで区別され、shopItemコンポーネントが導入されています。

themeList.vue広告タイトル

<template>
  <div class="themeContent">
    <h2>
      <img v-if="themeList.shopPic" :src="imgPath+themeList.shopPic" alt />
    </h2>
  </div>
</template>

<script>
import Config from "../../config/config";
import ThemeListBussiness from "./bussiness";
export default {
  data() {
    return {
      themeList: {},
      imgPath: Config.RequestPath,
      themeListBussiness: null
    };
  },
  created() {
    this.themeListBussiness = new ThemeListBussiness(this);
    this.themeListBussiness.initPageConfig(this.$route.query);
  },
  methods: {}
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
.themeContent {
  h2 {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
</style>

最後に、shopThemeの新しいページページを作成し、前の2つのコンポーネントを紹介します

<template>
  <div>
    <Top :title="title" :isBack="true"></Top>
    <div class="content">
      <ThemeList></ThemeList>
      <ShopItem :shopType="shopType"></ShopItem>
    </div>
  </div>
</template>

<script>
import Top from "../../components/top/top";
import ThemeList from "../../components/themeList/themeList";
import ShopItem from "../../components/shopItem/shopItem";
export default {
  name: "ShopTheme",
  data() {
    return {
      shopType: this.$route.query._type,
      title: this.$route.query._shopName
    };
  },
  components: {
    Top,
    ThemeList,
    ShopItem
  }
};
</script>

<style lang="less" scoped>
@import "../../style/init.less";
.content {
  padding-bottom: 0;
}
</style>

これまでに、製品分類とテーマリストのページが完成しました

最後に、製品データベースデータのダウンロードが提供され（すべて手動で1つずつ入力）、Robo3tを介してリモートウェアハウスアドレスをインポートできます。この記事の
終わりに、次の記事で製品詳細ページの実現について紹介します。