imgload更改

Author: wenlan-coder

src/common/utils.js

@@ -7,4 +7,18 @@ export function debounce(fn,delay){
             fn.apply(this,args)
         },delay);
     }
+}
+//时间格式转换
+function add0(m){return m<10?'0'+m:m }
+export function format(value)
+{
+
+var time = new Date(value);
+var y = time.getFullYear();
+var m = time.getMonth()+1;
+var d = time.getDate();
+var h = time.getHours();
+var mm = time.getMinutes();
+var s = time.getSeconds();
+return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
 }

src/components/common/scroll/BetterScroll.vue

@@ -127,4 +127,5 @@
         }, this.refreshDelay)
       }
     }
+  }
 </script>

src/components/common/scroll/Scroll.vue

@@ -1,9 +1,10 @@
 <template>
-<div ref="wrapper" class="wrapper">
-
-        <div class="content"><slot></slot></div>
- 
+<div ref="wrapper">
+<div class="content">
+    <slot></slot>
 </div>
+</div>
+ 
 
 </template>
 
@@ -27,7 +28,7 @@ export default {
             default:false,
             
         },
-        goods:{
+        data:{
             type:Array,
             default:null,
         }
@@ -100,8 +101,8 @@ export default {
     },
     //性能优化，watch全局监听，更新30条数据后refresh
     watch:{
-        goods(){
-            console.log(this.goods)
+        data(){
+            console.log(this.data)
             setTimeout(()=>{
                 this.refresh();
             },this.refreshDelay)

src/components/content/goods/GoodsList.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="goods">
   <goods-list-item  v-for="(item,index) in goods" :key="index" :goodsItem=item></goods-list-item>
-
   </div>
 </template>
 
@@ -14,13 +13,13 @@ export default {
     props:{
     goods:{
     type:Array,
-    default:[],
+    default(){
+      return []
+    },
               }  
           }
         }
     
-
-
 </script>
 
 <style>

src/components/content/goods/GoodsListItem.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="goods-list-item" @click="clickDetail">
-       <img :src="goodsItem.show.img" alt="" @load="imgLoad"/>
+    <img :src="resImage" alt="" @load="imgLoad">
     <div class="goods-info">
       <p>{{ goodsItem.title }}</p>
       <span class="price">{{ goodsItem.price }}</span>
       <span class="collect">{{ goodsItem.cfav }}</span>
     </div>
-   
-  
   </div>
 </template>
 
@@ -19,6 +17,11 @@ export default {
       default: {},
     },
   },
+  computed:{
+    resImage(){
+      return this.goodsItem.image ||this.goodsItem.show.img;
+    }
+  },
   data(){
     return {
       iid:null,
@@ -27,23 +30,25 @@ export default {
   },
     methods:{
     imgLoad(){
-    this.$bus.$emit('imgLoad')
-    },
+      console.log("goodslist组件里面的图片监听");
+      // if(this.$route.path.indexOf('/home')){
+      //   this.$bus.$emit('homeImgLoad')}
+      //   else if(this.$route.path.indexOf('/detail')){
+      //     this.$bus.$emit('detailImgLoad') 
+      //   }
+       this.$bus.$emit("ImgLoad")
+      },
     clickDetail(){
     this.$router.push({
       name:'detail',
       params:{
         iid:this.goodsItem.iid,
-                                                                                                                                                          
-       
-
-      }
+}
     })
     },
   }
-};
+}
 </script>
-
 <style>
 .goods-list-item {
   position: relative;
@@ -83,6 +88,6 @@ export default {
   width: 14px;
   height: 14px;
   background: url("~assets/img/common/collect.svg") 0px 0/14px 14px;
-  left: -15px;
+  left:-15px;
 }
 </style>

src/main.js

@@ -5,10 +5,21 @@ import elementUi from 'element-ui'
 import  'element-ui/lib/theme-chalk/index.css'  //Element UI样式
 import VueAwesomeSwiper from 'vue-awesome-swiper' 
 import 'swiper/css/swiper.css'
-Vue.prototype.$bus = new Vue()
+Vue.prototype.$bus = new Vue()  //事件总线bus，进行简单同组件传值
 Vue.use(elementUi)  //使用element-ui组件
 Vue.use(VueAwesomeSwiper, /* { default options with global component } */)  //使用swiper组件
 Vue.config.productionTip = false  
+Vue.filter('dateFormat', function(originVal) {
+  const dt = new Date(originVal)
+  const y = dt.getFullYear()
+  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+  const d = (dt.getDate() + '').padStart(2, '0')
+  const hh = (dt.getHours() + '').padStart(2, '0')
+  const mm = (dt.getMinutes() + '').padStart(2, '0')
+  const ss = (dt.getSeconds() + '').padStart(2, '0')
+  //时间格式年月日、时分秒
+  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+})
 
 new Vue({
   router,

src/network/detail.js

@@ -10,6 +10,12 @@ export function getDetail(iid){
     })
 
 }
+//获取推荐信息
+export function getRecommend(){
+    return request({
+        url:'/recommend'
+    })
+}
 //goods类
 export class Goods{
     constructor(itemInfo,columns,services){

src/router/index.js

@@ -33,7 +33,7 @@ const routes =[
 
 const router = new VueRouter({
   routes,
-  mode:'history'
+  mode:'hash'
 })
 
 export default router

src/views/detail/Detail.vue

@@ -1,22 +1,29 @@
 <template>
 <div id="detail">
     <detail-nav-bar class="detail-nav"></detail-nav-bar>
-      <scroll class="content">
-      <detail-swiper :topImg="topImg">npm</detail-swiper>
+    <!-- 加载图片后计算高度，初始化滚动失败， -->
+      <scroll class="wrapper"  ref="scroll">  
+      <detail-swiper :top-img="topImg">npm</detail-swiper>
       <detail-base-info :goods="goods"></detail-base-info>
       <detail-shop-info :shop="shop"></detail-shop-info>
+      <detail-image-info :detail-info="detailInfo"></detail-image-info>
+      <detail-item-params :detail-params="itemParams"></detail-item-params>
+      <detail-info-comment :comment="commentInfo"></detail-info-comment>
+      <goods-list :goods="recommends"></goods-list>
       </scroll>
-    
 </div>
 </template>
-
 <script>
 import DetailNavBar from './childComps/DetailNavBar.vue'
 import DetailSwiper from './childComps/DetailSwiper.vue'
-import {getDetail,Goods,Shop} from 'network/detail'
+import {getDetail,Goods,Shop,getRecommend} from 'network/detail'
 import DetailBaseInfo from './childComps/DetailBaseInfo.vue'
 import DetailShopInfo from './childComps/DetailShopInfo'
 import Scroll from 'components/common/scroll/Scroll'
+import DetailImageInfo from './childComps/DetailImageInfo.vue'
+import DetailItemParams from './childComps/DetailItemParams.vue'
+import DetailInfoComment from './childComps/DetailInfoComment.vue'
+import GoodsList from 'components/content/goods/GoodsList.vue'
 export default {
     name:'Detail',  //使用keep-alive必须加name
     components:{
@@ -25,8 +32,10 @@ export default {
         DetailBaseInfo,
         DetailShopInfo,
         Scroll,
-
-     
+        DetailImageInfo,
+        DetailItemParams,
+        DetailInfoComment,
+        GoodsList
 
     },
     data(){
@@ -35,45 +44,71 @@ export default {
             topImg:null,
             goods:{},
             shop:{},
+            detailInfo:{},
+            itemParams:{},
+            commentInfo:{},
+            recommends:[]
         }
     },
     created(){
+        // console.log("created");
         //保存商品id
         this.iid=this.$route.params.iid;
-        // console.log('created')
-        
+        // console.log('created')        
         //请求商品图片
         getDetail(this.iid).then(res=>{
             const data =res.result
-            this.topImg = res.result.itemInfo.topImages
+            this.topImg = res.result.itemInfo.topImages;
             // console.log(res.result);
             //获取商品数据
-            this.goods =new Goods(data.itemInfo,data.columns,data.shopInfo.services)
+            this.goods =new Goods(data.itemInfo,data.columns,data.shopInfo.services);
             //请求店铺信息
-            this.shop = new Shop(data.shopInfo)
+            this.shop = new Shop(data.shopInfo);
             // console.log(this.shop);
+            //取出商品详情信息
+            this.detailInfo=data.detailInfo;
+            //取出参数信息
+            this.itemParams=data.itemParams;
+            //取出评论信息
+            // console.log(data.rate);
+            if(data.rate.cRate!==0){
+            
+            this.commentInfo=data.rate.list[0];
+            // console.log(this.commentInfo);
+            }
+            }),
+        getRecommend().then(res=>{
+            // console.log(res);
+            // console.log(res.data.list);
+            this.recommends =res.data.list;
         })
-
-    
-
+    },
+    mounted(){
+        //监听图片刷新
+    this.$bus.$on("imageLoad",()=>{
+    console.log("detail里面组件监听");
+    this.$refs.scroll.refresh();   //重新计算高度
+     })
+    //  this.$bus.$on("detailImgLoad",()=>{
+    // console.log("detailImgload里面组件监听");
+    // this.$refs.scroll.refresh();   //重新计算高度
+    //  })
     }
-
+    // updated(){
+    //      this.$refs.scroll.refresh();   //重新计算高度
+    // }
 }
 </script>
 
 <style scoped>
-
 #detail{
     position: relative;
     z-index: 9;
     background-color:#fff;
     height: 100vh;
 }
-.content{
-  position:relative;
-  bottom:49px ;
-  right: 0;
-  left: 0;
+.wrapper{
+  height: calc( 100% - 48px );
   overflow: hidden;
 
 }