h5zy

src/store/modules/xianhuo/xianhuo.js

@@ -18,8 +18,9 @@ const state = {
   classLight: {},
   zyFilterData: {}, //过滤数据
   zyData: [],
-  loading:false,
-  finished:false
+  loading: false,
+  finished: false,
+  count: 0
 }
 const mutations = {
   xianhuo(state, payload) {
@@ -44,12 +45,18 @@ const actions = {
   }, payload) {
     state.loading = true;
     state.finished = false;
-    let p = payload.data.params;
-    console
+    let p = payload.data.p;
+    if(p == 1){
+      state.zyData = [];
+    }
     Services.getZyData(qs.stringify(payload.data)).then((res) => {
       state.loading = false;
       let data = res.data;
       if (data.error_code == 0) {
+        let totalPage = Math.ceil(data.data.total / 10);
+        if (p == totalPage) {
+          state.finished = true;
+        }
         if (data.data.aggs) {
           commit("xianhuo", { //过滤数据
             type: "filter",
@@ -85,10 +92,12 @@ const actions = {
         }
 
       } else {
-
+        state.loading = false;
+        state.finished = true;
       }
     }).catch(function (err) {
       state.loading = false;
+      state.finished = true;
     });
   }
 }

src/views/common/GoodsOne.vue

@@ -60,7 +60,7 @@
                     </div>
                 </div>
                 <div class="but-shop">
-                    <a href="javascript:void(0)" class="but" >我要下单</a>
+                    <a class="but" @click="placeOrder(itemchild.goods_id)">我要下单</a>
                 </div>
             </div>
         </div>
@@ -101,6 +101,9 @@
                     this.$set(this.dataList[index],'check',true);
                     this.$set(this.dataList[index],'checkBtn','收起梯度价格<i class="icon-top"></i>');
                 }
+            },
+            placeOrder(id){
+                console.log(id)
             }
         },
         components: {

src/views/common/goodsDetail.vue

+<template>
+  <div class="details-pop" v-if="detailsData.isShow">
+    <div class="mui-backdrop" style="opacity:1"></div>
+    <div class="mui-poppicker mui-active">
+      <div class="close">
+        <i class="icon iconfont icon-guanbi"></i>
+      </div>
+      <zy></zy>
+    </div>
+  </div>
+</template>
+<script>
+import zy from "@/views/common/zyDetail";
+import ly from "@/views/common/lyDetail";
+export default {
+  props:{
+    detailsData:{
+      type:Object,
+      default(){
+        return {}
+      }
+    }
+  },
+  components: {
+    zy,
+    ly
+  }
+};
+</script>
+<style lang="scss">
+.details-pop {
+  position: fixed;
+  left: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 999;
+  overflow: hidden;
+  .mui-backdrop {
+    position: fixed;
+    z-index: 87;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+  .mui-poppicker {
+    width: 100%;
+    z-index: 90;
+    position: absolute;
+    top: 20%;
+    bottom: 0px;
+    background-color: #fff;
+    border-top: solid 1px #ccc;
+    -webkit-transition: 0.3s;
+    -webkit-transform: translateY(300px);
+    &.mui-active {
+      -webkit-transform: translateY(0px);
+    }
+    .close {
+      position: absolute;
+      top: -25px;
+      right: 10px;
+      color: #fff;
+    }
+  }
+}
+</style>
+
+

src/views/xianhuo/xianhuo.vue

@@ -7,7 +7,7 @@
           <div class="self-ichunt">
             <div class="search-sift">
               <!-- <div class="title-cut" v-show="zyRank"> -->
-              <div class="title-cut">
+              <div class="title-cut" v-if="!isScrollShow">
                 <p class="fr xuan" @click="openRight">
                   <span class="font">筛选</span>
                   <i class="icon iconfont icon-shaixuan"></i>
@@ -37,7 +37,7 @@
                 </ul>
               </div>
               <!-- <div class="sift-box" v-show="zyFilter||zyClass"> -->
-              <div class="sift-box">
+              <div class="sift-box" v-if="!isScrollShow">
                 <dl :class="{'p_act': zyFilterInit == 0}">
                   <dt
                     @click="changeZyFilterInit(0)"
@@ -137,17 +137,21 @@
                   </dd>
                 </dl>
               </div>
+              <div class="sosoarr" v-if="isScrollShow">
+                <template v-for="(v,k) in navTopStr">
+                  <span v-if="k!=='classStr'&&k!=='rightStr'&&v">
+                    <b>·</b>
+                    {{v}}
+                  </span>
+                  <span v-if="(k=='classStr'||k=='rightStr')&&v">{{v}}</span>
+                </template>
+              </div>
             </div>
           </div>
         </div>
       </div>
-      <div class="content_scroll">
-        <van-list
-          v-model="loadingXh"
-          :finished="finished"
-          finished-text="我是有底线的噢"
-          @load="onLoad"
-        >
+      <div class="content_scroll" @scroll="scrollEvent" :style="{'top':isScrollShow?'44px':'80px'}">
+        <van-list v-model="loadingXh" :finished="finished" finished-text="我是有底线的噢" @load="onLoad">
           <GoodsOne :dataList="zyData" :isZy="isZy"></GoodsOne>
         </van-list>
       </div>
@@ -164,6 +168,7 @@
       :class="{'backdrop':true,'zIndex': zyFilterInit!=-1}"
       v-if="isShowRight || zyFilterInit!=-1"
     ></div>
+    <goodsDetail :detailsData="detailsData"></goodsDetail>
   </div>
 </template>
 <script>
@@ -172,6 +177,7 @@ import { Icon, Field, List, Cell } from "vant";
 import { mapState } from "vuex";
 import rightSelect from "./rightSelect";
 import GoodsOne from "@/views/common/GoodsOne.vue";
+import goodsDetail from "@/views/common/goodsDetail.vue";
 export default {
   name: "xianhuo",
   components: {
@@ -179,11 +185,13 @@ export default {
     "van-icon": Icon,
     rightSelect,
     "van-list": List,
-    GoodsOne
+    GoodsOne,
+    goodsDetail
   },
   data() {
     return {
-      isZy:true,
+      detailsData:{isShow:false,id:""},
+      isZy: true,
       zyFilterInit: -1,
       zyRankInit: 0, //0综合 1库存多到少 2//库存少到多 3//价格高到低 4//价格低到高
       classFilter: "",
@@ -203,7 +211,16 @@ export default {
       isShowRight: false, //是否展示右侧
       list: [],
       loadingXh: false,
-      p: 0
+      p: 0,
+      rightFilterData: {},
+      navTopStr: {
+        classStr: "",
+        brandStr: "",
+        encapStr: "",
+        packingStr: "",
+        rightStr: ""
+      },
+      isScrollShow: false
     };
   },
   created() {},
@@ -226,6 +243,7 @@ export default {
       this.loadingXh = now;
     },
     zyRankInit(now) {
+      this.p = 1;
       this.getZyData();
     },
     classLight(now) {
@@ -243,11 +261,18 @@ export default {
         this.classFilter =
           this.firstClassName + "," + this.secondClass[index].class_id2_name;
       }
+      this.navTopStr.classStr = this.classFilter;
     }
   },
   methods: {
+    scrollEvent(e) {
+      if (e.target.scrollTop > 40) {
+        this.isScrollShow = true;
+      } else {
+        this.isScrollShow = false;
+      }
+    },
     onLoad() {
-      console.log(this.loadingXh);
       this.p++;
       this.getZyData();
     },
@@ -257,7 +282,9 @@ export default {
     },
     filterRight(v) {
       this.isShowRight = false;
-      this.getZyData(v);
+      this.p = 1;
+      this.rightFilterData = v;
+      this.getZyData();
     },
     openRight() {
       this.isShowRight = true;
@@ -302,9 +329,10 @@ export default {
         }
       }
     },
-    getZyData(rightFilter = {}) {
+    getZyData() {
       let params = { p: this.p, offset: 10 };
-      let rightFilterStr = JSON.stringify(rightFilter);
+      this.navTopStr.rightStr = "";
+      let rightFilterStr = JSON.stringify(this.rightFilterData);
       if (this.addClassStr) {
         params["class_id/condition"] = this.addClassStr;
       }
@@ -329,10 +357,22 @@ export default {
         params["single_rank"] = 2;
       }
       if (rightFilterStr !== "{}") {
-        if (JSON.stringify(rightFilter.filterData) !== "{}") {
-          params["attrs/nested"] = JSON.stringify(rightFilter.filterData);
+        if (JSON.stringify(this.rightFilterData.filterData) !== "{}") {
+          params["attrs/nested"] = JSON.stringify(
+            this.rightFilterData.filterData
+          );
+          let str = "";
+          for (let k in this.rightFilterData.filterData) {
+            let singData = this.rightFilterData.filterData[k];
+            if (singData.length) {
+              str += "." + singData.join();
+            }
+          }
+          str = str.slice(1);
+          console.log(str)
+          this.navTopStr.rightStr = str;
         }
-        if (rightFilter.isyh) {
+        if (this.rightFilterData.isyh) {
           params["avail_rank"] = 1;
         }
       }
@@ -416,17 +456,20 @@ export default {
           this.firstClassName = "";
           this.secondClassName = "";
           this.classFilter = "";
+          this.navTopStr.classStr = "";
         } else {
           this.addClassStr = this.classStr;
           this.classFilter = this.secondClassName
             ? this.firstClassName + "," + this.secondClassName
             : this.firstClassName;
+          this.navTopStr.classStr = this.classFilter;
         }
       } else if (type == "brand") {
         //制造商
         this.brandStr = "";
         this.brand = "";
         if (this.isResetData) {
+          this.navTopStr.brandStr = "";
         } else {
           for (let i = 0; i < this.zyFilterData["brand_id"].list.length; i++) {
             if (this.zyFilterData["brand_id"].list[i].check) {
@@ -437,11 +480,13 @@ export default {
         }
         this.brandStr = this.brandStr.slice(0, -1);
         this.brand = this.brand.slice(0, -1);
+        this.navTopStr.brandStr = this.brand;
       } else if (type == "encap") {
         //封装规格
         this.encapStr = "";
         this.encap = "";
         if (this.isResetData) {
+          this.navTopStr.encapStr = "";
         } else {
           for (let i = 0; i < this.zyFilterData["encap"].list.length; i++) {
             if (this.zyFilterData["encap"].list[i].check) {
@@ -453,11 +498,13 @@ export default {
 
         this.encapStr = this.encapStr.slice(0, -1);
         this.encap = this.encap.slice(0, -1);
+        this.navTopStr.encapStr = this.encap;
       } else if (type == "packing") {
         //包装筛选
         this.packingStr = "";
         this.packing = "";
         if (this.isResetData) {
+          this.navTopStr.packingStr = "";
         } else {
           for (let i = 0; i < this.zyFilterData["packing"].list.length; i++) {
             if (this.zyFilterData["packing"].list[i].check) {
@@ -468,7 +515,9 @@ export default {
         }
         this.packingStr = this.packingStr.slice(0, -1);
         this.packing = this.packing.slice(0, -1);
+        this.navTopStr.packingStr = this.packing;
       }
+      this.p = 1;
       this.getZyData();
     }
   }
@@ -712,6 +761,34 @@ export default {
           }
         }
       }
+      .sosoarr {
+        display: block;
+        position: fixed;
+        top: 44px;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        background-color: #fff;
+        font-size: 15px;
+        font-weight: 400;
+        height: 44px;
+        line-height: 44px;
+        width: 100%;
+        -webkit-box-shadow: 0 2px 5px #eeeeee;
+        box-shadow: 0 2px 5px #eeeeee;
+        table-layout: fixed;
+        border-bottom: 1px solid #d6d7dc;
+        text-align: center;
+        padding: 0 15%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        b {
+          font-weight: bold;
+          font-size: 16px;
+          margin: 0 3px;
+        }
+      }
     }
   }
   .content_scroll {