s-shop商品详情页（移动端）使用Vue实现主要用到了Vant-ui

最新推荐文章于 2024-05-23 15:14:10 发布

开某人214

最新推荐文章于 2024-05-23 15:14:10 发布

阅读量613

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_69635978/article/details/133825543

版权

实现效果

1. 同PC端一样，使用Vue的$router 和 $route 传递商品id

1. 定义productDetail路由

需要传递商品的id值

	{
		path: '/productDetail/:id',
		component: () => import('./pages/productDetail.vue'),
	},

2. 商品列表用 $router 传递参数

              <van-grid-item v-for="(i,inx) in productList" :key="inx">
                <!--       用@click绑定一个点击事件实现，当点击该商品图片时向 /productDetail的路由中添加该商品的id          -->
                <van-image :src="`http://127.0.0.1:8081/api`+ i.mainImage"
                           @click="$router.push(`/productDetail/${i.id}`)"/>
                <p style="margin-top: 5px">{{ i.name }}</p>
                <p style="color: orange;margin-top: 2px">￥ {{ i.price }}</p>
              </van-grid-item>

3. 在商品详情页用$route 接收传递过来的参数

<template>
  <div>
 
  </div>
</template>
 
<script>
export default {
  name: "productDetail",
  data(){
    return{
      id:0,
    }
  },
  mounted() {
    this.getProductDetail()
  },
  methods:{
    getProductDetail(){
      var that = this
      //用$route接收传递过来的id值，没有$router没有使用path时，传递的参数会存在 params中
      //在使用path后params会被忽略，这种情况可以使用querry
      that.id = this.$route.params.id
      this.axios.get(`/api/product/${that.id}`).then(function (response){
        console.log(response.data)
      })
      console.log(that.id)
    }
  }
}
</script>
 
<style scoped>
 
</style>

2. 将详情页面的静态页面写出

实现效果

实现代码

唯一值得关注的是轮播部分用到的是自定义指示器

<template>
  <div style="background-color: lightgrey">
    <!--  导航栏  -->
    <div id="head">
      <van-nav-bar title="商品列表" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18"/>
        </template>
      </van-nav-bar>
    </div>

    <!--  轮播图  -->
    <div style="background-color:lightgrey">
      <van-swipe @change="onChange">
        <van-swipe-item>
          <van-image height="80%" src="https://img01.yzcdn.cn/vant/apple-3.jpg" style="padding: 25px"/>
        </van-swipe-item>
        <van-swipe-item>
          <van-image height="80%" src="https://img01.yzcdn.cn/vant/apple-1.jpg" style="padding: 25px"/>
        </van-swipe-item>
        <van-swipe-item>
          <van-image height="80%" src="https://img01.yzcdn.cn/vant/apple-2.jpg" style="padding: 25px"/>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/4</div>
        </template>
      </van-swipe>
    </div>

    <!--  商品信息  -->

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <h1 style="display: inline-block">￥ 10.00</h1>
      <div style="display: inline-block;float: right">
        <div style="color: grey;font-size:x-small;display: inline-block;float: right;margin-left: 10px">
          <p>11</p>
          <p>销量</p>
        </div>
        <div style="color: grey;font-size:x-small;display: inline-block;float: right;">
          <p>31</p>
          <p>浏览</p>
        </div>
      </div>
      <p style="margin-top: 10px">描述信息</p>
    </div>

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <p style="display: inline-block;margin-left: 30px">选择规格：</p>
      <van-icon name="arrow" style="display: inline-block;float:right;margin-right: 20px"/>
    </div>

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <p>图文详情</p>
    </div>

    <div>
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车"/>
        <van-goods-action-icon icon="star-o" text="收藏"/>
        <van-goods-action-button type="warning" text="加入购物车"/>
        <van-goods-action-button type="danger" text="立即购买"/>
      </van-goods-action>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import {Sku} from 'vant';

Vue.use(Sku);
export default {
  name: "productDetail",
  data() {
    return {
      id: 0,
      product: [],
      imageList: [],
      //  轮播
      current: 0,

    }
  },
  mounted() {
    this.getProductDetail()
  },
  methods: {
    //轮播
    onChange(index) {
      this.current = index;
    },
    getProductDetail() {
      var that = this
      that.id = this.$route.params.id
      this.axios.get(`/api/product/${that.id}`).then(function (response) {
        that.product = response.data
        that.imageList.push(response.data.subImages.split(","))
        console.log(that.imageList)
      })
    }
  }
}
</script>

<style scoped>
/* 自定义指示器 */
.custom-indicator {
  /*position: absolute;*/
  float: right;
  margin-right: 10px;
  color: white;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>

3. 使用axios调用接口将数据渲染到页面上

实现效果

总代码

<template>
  <div style="background-color: lightgrey">
    <!--  导航栏  -->
    <div id="head">
      <van-nav-bar title="商品列表" left-text="返回" left-arrow>
        <template #right>
          <van-icon name="search" size="18"/>
        </template>
      </van-nav-bar>
    </div>

    <!--  轮播图  -->
    <div style="background-color:lightgrey">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(i,inx) in imageList" :key="inx">
          <van-image height="80%" :src="`http://127.0.0.1:8081/api`+ i" style="padding: 25px"/>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{imageList.length}}</div>
        </template>
      </van-swipe>
    </div>

    <!--  商品信息  -->

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <h1 style="display: inline-block;color: orange">￥ {{product.price}}</h1>
      <div style="display: inline-block;float: right">
        <div style="color: grey;font-size:x-small;display: inline-block;float: right;margin-left: 10px">
          <p>11</p>
          <p>销量</p>
        </div>
        <div style="color: grey;font-size:x-small;display: inline-block;float: right;">
          <p>31</p>
          <p>浏览</p>
        </div>
      </div>
      <p style="margin-top: 10px">{{product.subTitle}}</p>
    </div>

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <p style="display: inline-block;margin-left: 30px">选择规格：</p>
      <van-icon name="arrow" style="display: inline-block;float:right;margin-right: 20px"/>
    </div>

    <div style="margin: 20px 10px;background-color: white;padding: 10px">
      <p>图文详情</p>
    </div>

    <div>
      <van-goods-action>
        <van-goods-action-icon icon="cart-o" text="购物车"/>
        <van-goods-action-icon icon="star-o" text="收藏"/>
        <van-goods-action-button type="warning" text="加入购物车"/>
        <van-goods-action-button type="danger" text="立即购买"/>
      </van-goods-action>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import {Sku} from 'vant';

Vue.use(Sku);
export default {
  name: "productDetail",
  data() {
    return {
      id: 0,
      product: [],
      imageList: [],
      //  轮播
      current: 0,

    }
  },
  mounted() {
    this.getProductDetail()
  },
  methods: {
    //轮播
    onChange(index) {
      this.current = index;
    },
    getProductDetail() {
      var that = this
      that.id = this.$route.params.id
      this.axios.get(`/api/product/${that.id}`).then(function (response) {
        that.product = response.data
        console.log(that.product)
        that.imageList = (response.data.subImages.split(","))
      })
    }
  }
}
</script>

<style scoped>
/* 自定义指示器 */
.custom-indicator {
  /*position: absolute;*/
  float: right;
  margin-right: 10px;
  color: white;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>