h5商城完成

src/api/index.js

@@ -25,7 +25,7 @@ export const getGoodList = (params) => {
     })
 }
 // 获取商品详情
-export const getGoodInfo = (params) => {
+export const getGoodInfoList = (params) => {
     return request({
         url: '/v2/api-h5/goods/info',
         method: 'get',

src/views/home/index.vue

@@ -8,6 +8,7 @@
           center-active
           color="#FA7D22"
           height="120"
+          v-model="categoryIndex"
         >
           <v-tab
             @click="selectTab(item)"
@@ -22,7 +23,6 @@
     <div class="swiper-container">
       <div class="swiper-wrapper">
         <div
-          @click="selectGood(item)"
           v-for="(item, index) in goodList"
           :key="index"
           class="swiper-slide"
@@ -106,7 +106,7 @@
         <div class="content">嫩滑细腻 紧实肌肤</div>
       </div> -->
       <div class="ingredient-content">
-        <div class="content">{{ goodInfo.component }}</div>
+        <div class="content" v-html="goodInfo.component"></div>
       </div>
     </div>
   </div>
@@ -114,7 +114,12 @@
 
 <script>
 var Swiper = require("../../utils/swiper-bundle.min");
-import { getBanner, getCategory, getGoodList, getGoodInfo } from "../../api";
+import {
+  getBanner,
+  getCategory,
+  getGoodList,
+  getGoodInfoList,
+} from "../../api";
 import QRCode from "qrcodejs2";
 export default {
   components: {
@@ -130,16 +135,23 @@ export default {
       isOver: false,
       isSkinOver: false,
       goods_id: "", //商品ID
+      page: 1,
+      total: 0,
+      category_id: "", //分类ID
+      Myswiper: "", //swiper实例
+      categoryIndex: 0,
+      category_id_act: "",
     };
   },
   created() {
     // 获取banner传过来的商品ID
     this.goods_id = this.$route.query.goods_id;
+    // 获取banner传过来的商品分类
+    this.category_id_act = this.$route.query.category_id;
     // 获取商品分类列表
     this.getCategory();
   },
   mounted() {
-    this.swiper();
     this.init();
   },
   methods: {
@@ -172,10 +184,13 @@ export default {
         .replace(/&amp;nbsp;/g, "\u3000");
     },
     // swiper轮播图
-    swiper() {
+    swiper(list) {
       let effect = 1;
       let that = this;
-      var swiper = new Swiper(".swiper-container", {
+      if(that.Myswiper){
+        return that.Myswiper
+      }
+      that.Myswiper = new Swiper(".swiper-container", {
         speed: 2500,
         slidesPerView: 5,
         spaceBetween: 30,
@@ -183,6 +198,12 @@ export default {
         watchSlidesProgress: true,
         slideToClickedSlide: true,
         preloadImages: true,
+        observer: true,
+        onSlideChangeEnd: function (swiper) {
+          swiper.update();
+          swiper.startAutoplay();
+          swiper.reLoop();
+        },
         on: {
           setTranslate: function () {
             let slides = this.slides;
@@ -203,30 +224,39 @@ export default {
               slide.transition(transition);
             }
           },
-          transitionStart() {
-            // 如果是第一张或者第二张就不居中
-            if (this.activeIndex == 0 || this.activeIndex == 1) {
-              this.setTranslate(0);
-            }
-            // 最后一张或者两张不动
-            if (
-              this.activeIndex == this.slides.length - 2 ||
-              this.activeIndex == this.slides.length - 1
-            ) {
-              let slideW = (this.width / 5).toFixed(5); //每个轮播的宽度
-              let keepW = slideW * (this.slides.length - 5); //需要设置的setTranslate的宽度
-              this.setTranslate(-keepW);
-            }
-          },
+          // transitionStart() {
+          //   // 如果是第一张或者第二张就不居中
+          //   if (this.activeIndex == 0 || this.activeIndex == 1) {
+          //     this.setTranslate(0);
+          //   }
+          //   // 最后一张或者两张不动
+          //   if (
+          //     this.activeIndex == this.slides.length - 2 ||
+          //     this.activeIndex == this.slides.length - 1
+          //   ) {
+          //     let slideW = (this.width / 5).toFixed(5); //每个轮播的宽度
+          //     let keepW = slideW * (this.slides.length - 5); //需要设置的setTranslate的宽度
+          //     this.setTranslate(-keepW);
+          //   }
+          // },
 
           // 滑动切换商品详情
-          touchEnd: function (swiper, event) {
+          touchStart(e) {},
+          slideChange: function (swiper) {
+            that.goods_id = "";
             //你的事件
             let id = that.goodList[swiper.activeIndex].id;
             that.getGoodInfo(id);
           },
+          // 滑动商品切换到最后一个加载
+          reachEnd(swiper) {
+            if (that.goodList.length < that.total) {
+              that.getGoodList(++that.page);
+            }
+          },
         },
       });
+      return this.Myswiper;
     },
     // 二维码
     qrcodeScan() {
@@ -245,22 +275,57 @@ export default {
     getCategory() {
       getCategory().then((res) => {
         if (res.status == 200) {
+          res.data.data.list.forEach((item, index) => {
+            if (item.id == this.category_id_act) {
+              this.categoryIndex = index;
+            }
+          });
           this.categoryList = res.data.data.list;
           this.getGoodList();
         }
       });
     },
     // 获取商品列表
-    getGoodList(id) {
+    getGoodList(page) {
       let params = {
-        page: 1,
-        limit: 10,
-        category_id: id ? id : this.categoryList[0].id, //分类ID
+        page: page || this.page,
+        limit: 50,
+        category_id: this.category_id_act
+          ? this.category_id_act
+          : this.category_id
+          ? this.category_id
+          : this.categoryList[0].id, //分类ID
       };
       getGoodList(params).then((res) => {
         if (res.status == 200) {
-          this.goodList = res.data.data.list;
-          this.getGoodInfo();
+          // 滑动下一页数据
+          this.total = res.data.data.total;
+          let list = this.goodList;
+          if (page == 1 || this.page == 1) {
+            list = [];
+          }
+          this.goodList = list;
+          let mySwiper = this.swiper(list);
+          let selectID = ''
+          res.data.data.list.forEach((item, index) => {
+            if(index==0){
+              selectID=item.id
+            }
+            list.push(item);
+            if (item.id == this.goods_id) {
+              setTimeout(() => {
+                mySwiper.slideTo(index, 1000, false);
+              }, 100);
+              this.goods_id=''
+              selectID=''
+            }
+          });
+          if(selectID){
+            this.getGoodInfo(selectID);
+            setTimeout(() => {
+              mySwiper.slideTo(0, 1000, false);
+            }, 100);
+          }
         }
       });
     },
@@ -268,14 +333,8 @@ export default {
     getGoodInfo(id) {
       this.isOver = false;
       this.isSkinOver = false;
-      getGoodInfo({
-        id: this.goods_id
-          ? this.goods_id
-          : id
-          ? id
-          : this.goodList[0]
-          ? this.goodList[0].id
-          : "",
+      getGoodInfoList({
+        id
       }).then((res) => {
         if (res.status == 200) {
           if (this.goodInfo.id == res.data.data.id) {
@@ -290,6 +349,7 @@ export default {
               let a = c.replace(c, "...");
               res.data.data.goods_name = b + a;
             }
+            // 处理价格
             if (res.data.data.price) {
               let priceA = res.data.data.price.indexOf(".");
               res.data.data.price = res.data.data.price.slice(0, priceA);
@@ -300,6 +360,8 @@ export default {
             if (res.data.data.skin_type > 7) {
               this.isSkinOver = true;
             }
+            // 处理富文本
+            res.data.data.component = this.showHtml(res.data.data.component);
             this.goodInfo = res.data.data;
             this.qrcodeScan();
           }
@@ -308,17 +370,14 @@ export default {
     },
     // 选择商品分类
     selectTab(e) {
+      this.page = 1;
       // 重置banner传过来的商品
       this.goods_id = "";
-      let id = e.id;
-      this.getGoodList(id);
-    },
-    // 选择商品
-    selectGood(e) {
-      // 重置banner传过来的商品
-      this.goods_id = "";
-      let id = e.id;
-      this.getGoodInfo(id);
+      this.category_id_act = "";
+      this.category_id = e.id;
+      this.getGoodList();
+      let mySwiper = this.swiper();
+      
     },
   },
 };
@@ -574,7 +633,7 @@ body {
     .content {
       margin-top: 30px;
       font-size: 30px;
-      color: #666666;
+      // color: #666666;
       margin-left: 32px;
     }
   }

src/views/swiper/index.vue

@@ -33,6 +33,7 @@ export default {
         path: "/home",
         query: {
           goods_id: e.goods_id,
+          category_id:e.category_id
         },
       });
     },