vue移动端购物商场首页制作

1.搭建项目框架

 

 

 

新建首页主组件及其子组件并将子组件展示出来

2.封装所需接口

 

 

 

 3.编写轮播图组件

<template>
<div id="swipercom">
      <div class="swiper-container" id="swiperIndex">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                  <img :src="item.pic" alt="">
              </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
      </div>
  </div>

</template>

<script>
import 'swiper/css/swiper.css'
import Swiper from 'swiper'

export default {
  name: 'swiperCom',
  data(){
    return{
 imgs:[
        { pic: require("../assets/img/banner2.jpg") },
        { pic: require("../assets/img/banner3.jpg") },
        { pic: require("../assets/img/banner1.gif") },
      ],
    }
    },
    mounted(){//view与model绑定成功之后
        var mySwiper = new Swiper('#swiperIndex',{
            loop: true,
              autoplay: {
                delay: 3000,
                disableOnInteraction: false,
                waitForTransition: false,
            },
            //配置分页器内容
            pagination:{
                el:".swiper-pagination",//分页器与哪个标签关联
                clickable:true//分页器是否可以点击
                
            }
        })
    }
}
</script>


<style lang="less" scoped>
    #swipercom{
        width: 3rem;
        height: 3.2rem;
    #swiperIndex.swiper-container{
        width: 7.5rem;
        height: 3.2rem;
        // border-radius: 0.1rem;
        
        .swiper-slide img{
            width: 100%;
        }
        .swiper-pagination-bullet-active{
            background-color: #8d78cd;
        }
    
    }
    }
    </style>

并通过v-for循环 将轮播图片循环展示

4.编写商品分类组件

 

<template>
  <div class="packge">
    <div class="label">
      <div class="zikuai"></div>
      <span>商品分类</span>
    </div>
    <div class="iconList">
      <div class="iconItem" v-for="(item, i) in hotClass" :key="i" @click="getClass(item.id)">
        <img :src="'http://47.95.13.193/myToiletries' + item.icon" alt="" />
        <span class="count">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import { getHotClass } from "@/api/index.js";
export default {
  name: "musicList",
  data() {
    return {
      hotClass: [],
      hotCommodity: [],
      imgs: [
      ],
    };
  },
  methods:{
    getClass(id){
          this.$router.push(`/ClassifyView/${id}`)
    }
  },
  async mounted() {
    let res1 = await getHotClass();
    console.log(res1);
    this.hotClass = res1.data.data;
  },
};
</script>

<style lang="less" scoped>
.packge {
  width: 7.5rem;
  padding: 0 0.25rem;
}
.label {
  display: flex;
  margin-top: 0.3rem;
  margin-left: 0.05rem;
}
.zikuai {
  background: #6652ff;
  width: 0.1rem;
  height: 0.4rem;
  margin-right: 0.1rem;
}
.iconList {
  width: 7rem;
  display: flex;
  justify-content: space-between;
  // padding: 0.4rem;
  margin-top: 0.2rem;
  .iconItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    img {
      width: 1.65rem;
      height: 1.65rem;
      border-radius: 0.1rem;
    }
    span {
      position: absolute;
      right: 0.3rem;
      top: 1.2rem;
      font-size: 0.26rem;
      background: rgba(114, 71, 244, 0.7);
      width: 1rem;
      text-align: center;
      border-radius: 0.1rem;
      color: #fff;
      overflow: hidden;
      height: 0.4rem;
    }
  }
}
</style>

 

5.编写热门商品页面

 

<template>
  <div class="packge">
    <div class="label">
      <div class="zikuai"></div>
      <span>热门商品</span>
    </div>
    <div class="iconList">
      <div class="iconItem" v-for="(item, i) in hotCommodity" :key="i">
        <div class="hot"><img src="../assets/img/hot.jpg" alt="" /></div>
        <img :src="'http://47.95.13.193/myToiletries/' + item.photo" alt="" />
        <div class="present">
          <div class="pname">
            <p style="font-size: 0.28rem; width: 4.9rem">
              <strong>{{ item.name }}</strong>
            </p>
          </div>
          <div class="detail">
            <p style="font-size: 0.1rem">{{ item.info }}</p>
          </div>
          <router-link
            class="count"
            :to="{ path: '/shoplist' }"
            @click="change(item.id)"
            style="text-decoration: none"
            >购买</router-link
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";
import { getHotCommodity } from "@/api/index.js";
import store from "@/store/index.js";
export default {
  name: "hopwares",
  data() {
    return {
      hotCommodity: [],
      imgs: [],
    };
  },
  async mounted() {
    let res2 = await getHotCommodity();
    this.hotCommodity = res2.data.data;
    console.log(res2);
  },
  methods: {
    change(id) {
      store.commit("setplayIndex", id);
    },
  },
};
</script>

<style lang="less" scoped>
.packge {
  width: 7.5rem;
  padding: 0 0.25rem;
}
.label {
  display: flex;
  margin-top: 0.3rem;
  margin-left: 0.05rem;
}
.zikuai {
  background: #6652ff;
  width: 0.1rem;
  height: 0.4rem;
  margin-right: 0.1rem;
}
.iconList {
  width: 7rem;
  display: flex;
  justify-content: space-between;
  // padding: 0.4rem;
  margin-top: 0.2rem;
  display: flex;
  flex-direction: column;
  .iconItem {
    width: 7rem;
    display: flex;
    // flex-direction: column;
    align-items: center;
    position: relative;
    position: relative;
    background: #fff;
    border-bottom: 0.15rem solid #f5f5f5;
    // background: aquamarine;
    .hot {
      position: absolute;
      top: 0rem;
      right: 0.1rem;
      width: 0.5rem;
      height: 0.5rem;
      float: right;
      img {
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    img {
      width: 1.65rem;
      height: 1.65rem;
      //   border-radius:0.1rem ;
      float: left;
    }
    .present {
      width: 5rem;
      .pname {
        width: 5rem;
        // height: 0.6rem;
        // background: yellow;
      }
      .detail {
        width: 5.4rem;
        font-size: 0.02rem;
      }
    }
    .count {
      width: 0.3rem;
      font-size: 0.2rem;
      background: rgba(142, 120, 206);
      width: 1rem;
      text-align: center;
      border-radius: 0.08rem;
      color: #fff;
      margin-left: 0.01rem;
      display: inline-block;
    }
  }
}
</style>

 

<template>
<div class="iconList">
    <div class="iconItem" @click="$router.push('/')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-zhuye"  class='active1'></use>
      </svg>
      <span class="active1">主页</span>
    </div>
    <div class="iconItem active2" @click="$router.push('/classifyview/1')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-yingyong"></use>
      </svg>
      <span class="active2">分类</span>
    </div>
    <div class="iconItem" @click="$router.push('/search')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-faxian"></use>
      </svg>
      <span>发现</span>
    </div>
    <div class="iconItem" @click="$router.push('/dingdan')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-gouwuche"></use>
      </svg>
      <span>购物车</span>
    </div>
    <div class="iconItem"  @click="$router.push('/me')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-geren"></use>
      </svg>
      <span>个人中心</span>
    </div>
  </div>
</template>

<script>
import "swiper/css/swiper.css";
import Swiper from "swiper";

export default {
  name: "bottom",
  
       data(){
        return{ }
        },
         methods:{
      leftChange(index) {
              //当前的背景颜色赋给当前点击的索引
             this.changeLeftBackground = index;
       },
         }
}
</script>

<style lang="less" scoped>
.iconList {
    background: #fff;
    position: fixed;
    left: 0;
    bottom: -0.1rem;
  width: 7.5rem;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  .iconItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 0.5rem;
      height: 0.5rem;
      fill: #6f6f6f;
    }
    span {
      font-size: 0.01rem;
    }
  }
}
.active1{
  color:#9285f9;
  fill:#9285f9
}
</style>