商品列表、商品详情数据对接

htmldev/cps/src/main.js

@@ -7,6 +7,7 @@ import VueCookie from 'vue-cookie'
 import refreshTitle from './utils/refreshTitle'
 import './utils/filter'
 import './assets/styles/icon.scss'
+import { Lazyload } from 'vant'
 // 全站配置
 window.SITE_CONFIG = {}
 Vue.prototype.$refreshTitle = refreshTitle
@@ -22,6 +23,7 @@ Vue.directive('myBlur', {
   }
 })
 
+Vue.use(Lazyload)
 Vue.use(VueCookie)
 Vue.config.ignoredElements = ['wx-open-launch-weapp']
 

htmldev/cps/src/router/index.js

@@ -160,10 +160,6 @@ const routes = [
         path: '/detail/:source/:goodsId',
         name: 'CategoryDetail',
         component: _import('views/category/detail/index'),
-        meta: {
-          isUseCache: false,
-          keepAlive: true
-        },
         props: (route) => ({
           source: route.params.source,
           goodsId: route.params.goodsId

htmldev/cps/src/views/category/detail/api/api.js

@@ -0,0 +1,15 @@
+import request from '@/api/request'
+
+/**
+ * 商品详情页
+ * @param source 来源
+ * @param goodsId 商品ID
+ */
+export const apiGoodsDetail = (source, goodsId) => request({
+  method: 'GET',
+  url: '/api/buy/goods/detail',
+  params: {
+    source: source,
+    goods_id: goodsId
+  }
+})

htmldev/cps/src/views/category/detail/child/banner/index.vue

@@ -24,20 +24,24 @@ export default {
     swiper,
     swiperSlide
   },
+  props: {
+    arrBanner: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
   computed: {
     fbtSWOptions () {
       return {
         // loop: true,
-        // autoplay: this.arrBanner.length > 1,
-        autoplay: false,
+        autoplay: this.arrBanner.length > 1,
         pagination: {
           el: '.sw-pagination',
           clickable: true
         }
       }
-    },
-    arrBanner () {
-      return ['http://p1.music.126.net/uuO0NVbTBmvumV6Qa-ExJw==/109951166598780468.jpg?imageView&quality=89', 'http://p1.music.126.net/2gK-S1egQdDTMgs8zTzmFg==/109951166598932300.jpg?imageView&quality=89']
     }
   }
 }

htmldev/cps/src/views/category/detail/index.vue

@@ -1,45 +1,61 @@
 <template>
-  <div>
+  <div
+    class="padding-bottom-94">
     <!--轮播图-->
-    <Banner/>
+    <Banner
+      :arrBanner="goodsCarouselPictures"/>
     <!--价格信息-->
     <div class="main">
       <div class="header">
         <div class="price-wrap">
           <p class="price">
             <span>￥</span>
-            <span>129</span>
+            <span>{{ goodsInfo.price && goodsInfo.price.toFixed(2) }}</span>
           </p>
           <p class="origin">券后价</p>
         </div>
         <div class="income">
           <span>预估收益 ¥</span>
-          <span>44.77</span>
+          <span>{{ goodsInfo.commission && goodsInfo.commission.toFixed(2) }}</span>
         </div>
       </div>
-      <p class="origin-price">原价¥ 599</p>
+      <p class="origin-price">原价¥ {{ goodsInfo.market_price && goodsInfo.market_price.toFixed(2) }}</p>
       <div
         class="name-wrap">
-        <img src="" alt="">
-        <p>这是名字这是名字这是名字这是名字这是名字这是名这是名字这是名字这是名字这是名字这是名字这是名</p>
+        <p>{{ goodsInfo.goods_name }}</p>
       </div>
-      <div class="coupon-wrap">
+      <div
+        class="coupon-wrap"
+        v-if="couponInfo.fav > 0">
         <div>
-          <p class="amount">333元优惠券</p>
-          <p class="expires">10月20日-11月11日</p>
+          <p class="amount">{{ couponInfo.fav }}元优惠券</p>
+          <p class="expires">{{
+              couponInfo.use_begin_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
+            }}-{{
+              couponInfo.use_end_time.replace(/\s\d{2}|:\d{2}/g, '').replace('-', '年').replace('-', '月') + '日'
+            }}</p>
         </div>
         <van-button type="default">立即领券</van-button>
       </div>
     </div>
+    <!--商品详情图片-->
+    <div
+      class="photo-list">
+      <img
+        v-lazy="str"
+        alt=""
+        v-for="(str, index) in goodsDetailPictures"
+        :key="index">
+    </div>
     <!--底部按钮-->
     <div class="footer">
       <a href="javascript:;">
         <span>分享赚</span>
-        <span>￥99999.79</span>
+        <span>￥{{ goodsInfo.commission }}</span>
       </a>
       <a href="javascript:;">
         <span>自购省</span>
-        <span>券￥99999.79 + ￥99999999.79</span>
+        <span>券￥{{ couponInfo.fav }} + ￥{{ goodsInfo.commission }}</span>
       </a>
     </div>
   </div>
@@ -47,21 +63,65 @@
 
 <script>
 import Banner from './child/banner'
-import { Button } from 'vant'
+import { Button, Toast } from 'vant'
+import { apiGoodsDetail } from './api/api'
 
 export default {
   name: 'index',
   components: {
     Banner,
     'van-button': Button
+  },
+  props: {
+    source: {
+      type: String,
+      default: ''
+    },
+    goodsId: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data () {
+    return {
+      goodsInfo: {},
+      couponInfo: {}, // 优惠券相关
+      goodsCarouselPictures: [], // 商品轮播图
+      goodsDetailPictures: [] // 商品详情图片
+    }
+  },
+  created () {
+    this.funInit()
+  },
+  methods: {
+    async funInit () {
+      try {
+        const { status, data, msg } = await apiGoodsDetail(this.source, this.goodsId)
+        if (status) {
+          this.goodsInfo = data
+          this.couponInfo = data.coupon_info
+          if (Array.isArray(data.goods_carousel_pictures)) {
+            this.goodsCarouselPictures = data.goods_carousel_pictures
+          }
+          if (Array.isArray(data.goods_detail_pictures)) {
+            this.goodsDetailPictures = data.goods_detail_pictures
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (e) {}
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.padding-bottom-94 {
+  padding-bottom: 94px;
+}
+
 .main {
-  width: 365px;
-  padding-bottom: 120px;
+  width: 355px;
   margin: 0 auto;
 }
 
@@ -137,7 +197,7 @@ export default {
 }
 
 .name-wrap {
-  margin-top: 10px;
+  margin: 10px 0 14px;
   overflow: hidden;
 
   img {
@@ -161,7 +221,6 @@ export default {
   justify-content: flex-end;
   width: 359px;
   height: 84px;
-  margin-top: 14px;
   background: url("./image/ic_coupon_big.png") center center/100% 100% no-repeat;
 
   & > div {
@@ -244,4 +303,15 @@ export default {
     }
   }
 }
+
+.photo-list {
+  margin-top: 14px;
+
+  img {
+    display: block;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+}
 </style>

htmldev/cps/src/views/category/index/child/main.vue

@@ -37,9 +37,9 @@
             <div class="price-wrap">
               <p class="price">
                 <span>￥</span>
-                <span>{{ item.price.toFixed(2) }}</span>
+                <span>{{ item.price && item.price.toFixed(2) }}</span>
               </p>
-              <p class="origin">¥{{ item.market_price.toFixed(2) }}</p>
+              <p class="origin">¥{{ item.market_price && item.market_price.toFixed(2) }}</p>
             </div>
             <!--暂时不用这个字段-->
             <!--<div class="sale-count">-->