Start from scratch, build a simple shopping platform (fourteen) front-end mall part: blog.csdn.net/time_____/a… Project source code (continuously updated) : gitee.com/DieHunter/m…

In the previous article, the interface and function of the home page and some public components were realized. Before, the tool class, routing and global state used in the project were encapsulated. This article will introduce commodity classification and commodity theme interface

Category of goods:

Interface style and effect

Note: due to the classification of goods list and home goods won’t change often, we can use the Vue the keep alive – component, it is used in the component when switching state is retained in memory, prevent repeated rendering DOM, also save the component is not destroyed, prevent loading page every time doing unnecessary requests, implementation effects as follows

Add the keep-alive component to app.vue and wrap the routing component

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

Here, we divide the category list into two components on the left and right respectively to form a TAB switching bar, and select and switch through the category menu on the left to re-render the commodity list on the right

  • The left toggle component 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"// The first item is selected by default
    };
  },
  methods: {
    sel(item) {
      if (this.onesel == item) return;// Prevent clicking the same option twice
      this.onesel = item;
      this.$events.emitEvent(EventName.SelectKind, item);// Triggers the selected item type event}}};</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>
Copy the code

     

  • Right item list component 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= > {// Listen for select type events
      this.transitionSwitch = false;// Use v-show for fade
      this.rightShopBussiness.initPageConfig(data);
    });
  },
  destroyed() {
    this.$events.offEvent(EventName.SelectKind);// Destroy event listeners
  },
  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>
Copy the code

     

  • Add the category page to the Router configuration. Create a Kind page under the same page as the home page and shopping cart interface. The category page is complete

    <template>
  <div>
    <Top title="Classification"></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>
Copy the code

     

Goods subject

The commodity theme page is a sub-page of the commodity list by clicking the rote chart and the theme module of the home page. The single commodity in the commodity list can be reused by the component of the home page

ThemeList is the advertisement title picture. Through shopType, the list of goods on the home page and the list of goods on the theme page are distinguished, so as to introduce shopItem component

  • Themelist. vue Advertisement title

    <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>
Copy the code


  • Finally, create a New shopTheme page and introduce the previous two components

    <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>
Copy the code

    At this point, the product category and topic list page is completed

Finally, the product database data download is provided (manual input one by one), remote warehouse address, can be imported by Robo3t to end this article, the next chapter will introduce the implementation of the product details page