1、由于商品详情是点击商品列表中的商品得以跳转实现,而商品详情组件也需要用到商品信息,因此可以通过共享商品的id然后去后台查询展示详情,或者直接将该商品所有的信息直接共享,为方便起见,我们这里直接使用后者方法。
2、在store\index.js
的state
中新增goodsDetail
状态:
state:{ // 商品详情 goodsDetail:{} }
3、在store\index.js
的mutations
中新增设置goodsDetail
的setGoodsDetail
方法:
mutations:{ setGoodsDetail(state,goods){ this.state.goodsDetail = goods; } }
1、我们在router\index.js
中新增商品详情的路由配置:
{ name:"GoodsDetail", path:"/goodsdetail", component:()=>import('@/views/GoodsDetail.vue') }
2、实现Goods.vue
中之前尚未实现的goodsDetail
方法:
methods:{ goodsDetail(goods){ // 提交详情 this.$store.commit("setGoodsDetail",goods); // 跳转到详情页 this.$router.push({name:"GoodsDetail"}); } }
1、上传一张暂无详情信息的图片到assets\img
下
文件下载 |
文件名称:暂无详情图 | 文件大小:12kb |
下载声明:本站资源仅供学习和研究使用,不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理! | ||
下载地址:本地下载" rel="nofollow noopener noreferrer" target="_blank"> 点击下载 | |
2、在views
目录下新建GoodsDetail.vue
组件,代码如下:
注意:添加购物车和利己购买方法暂不实现
<template> <div id="goods-detail"> <div class="detail"> <!-- 顶部导航栏 --> <mt-header title="商品详情"> <mt-button slot="left" icon="back" @click="goback">返回</mt-button> </mt-header> <!-- 轮播图 --> <div class="banner"> <mt-swipe :auto="2000"> <mt-swipe-item v-for="(item,index) in goodsDetail.img" :key="index"> <img :src="item"> </mt-swipe-item> </mt-swipe> </div> <div class="title"> <div class="name">{{goodsDetail.name}}</div> <div class="explain">{{goodsDetail.explain}}</div> <div class="price">价格:¥:{{goodsDetail.price}}</div> </div> <div class="contents"> <span>商品详情</span> <span>评价</span> </div> <div class="info"> <!-- 后期可以使用v-if或使用嵌套路由切换商品详情和评价 --> <img :src="noinfo"> </div> </div> <div class="operate"> <!-- 这两个方法暂时不实现 --> <div class="cart" @click="addToCart(goodsDetail)">加入购物车</div> <div class="buy" @click="toBuy(goodsDetail)">立即购买</div> </div> </div> </template> <script> export default { data(){ return { noinfo:require("../assets/img/noinfo.png") } }, methods:{ goback(){ this.$router.go(-1); } }, computed:{ goodsDetail(){ return this.$store.state.goodsDetail; } } } </script> <style scoped> #goods-detail { position: fixed; z-index: 2; top: 0; bottom: 0; width: 100%; height:100%; background-color: #fff; } .detail{ position: fixed; top: 0; bottom: 50px; width: 100%; overflow-y: auto; } .banner { height: 256px; } .mint-swipe-item img { width: 100%; height: 256px; } .title{ margin-left: 10px; } .title .name { line-height: 40px; font-size: 22px; } .title .explain { color: #555; font-size: 12px; } .title .price { font-size: 18px; font-weight: bold; line-height: 25px; color: #e8380d; } .contents { margin-top: 10px; display: flex; text-align: center; background-color: #f6f6f6; font-size: 12px; } .contents span { flex: 1; margin: 10px 0; line-height: 20px; } .contents span:not(:last-child) { border-right: 1px solid #aaa; } .info { padding-top: 20px; } .info img { display: block; width: 100%; } .operate { position: fixed; bottom: 0; width: 100%; height: 50px; line-height: 50px; font-size: 14px; text-align: center; color: #fff; } .operate .cart { float: left; width: 50%; background-color: #1296db; } .operate .buy { float: right; width: 50%; background-color: #e8380d; } </style>