fix[litemall-vue: 注释debugger

litemall-vue/src/views/items/detail/mix.js

@@ -20,7 +20,7 @@ export default {
       this.isSkuBuy && this.$emit('skuBuy', data);
     },
     selectSkuData(data) {
-      debugger
+      // debugger
       if (data.selectedSkuComb) {
         data.selectedSkuComb.sku_str = data.selectedSkuComb.props_str_arr
           .map(str => str.match(/[^:]*:([^:]*)/)[1])

litemall-vue/src/views/items/list/index.vue

@@ -1,251 +1,251 @@
-<template>
-  <div class="item_list over-hide">
-    <form action="/search">
-      <van-search
-        placeholder="请输入商品名称"
-        v-model="searchVal"
-        @click="$router.push({ name: 'search' })"
-        showAction
-      />
-    </form>
-
-    <van-tabs v-model="tabActive" @disabled="toggleFilterModal(true)">
-      <van-tab
-        v-for="(tab, tabIndex)  in tabsItem"
-        :title="tab.name"
-        :key="tab.type"
-        :disabled="tab.sort === false"
-      >
-        <InfinityScroll
-          :ref="'tabScrolls' + tabIndex"
-          class="full-page scroll-wrap fix-height"
-          :beforeRequest="beforeRequest"
-          :apiUrl="listApi"
-          @onLoad="onLoad(tabIndex, $event)"
-        >
-          <item-group>
-            <item-card-hori
-              v-for="(item, i) in tab.items"
-              :key="i"
-              :goods="item"
-              @click="itemClick(item.id)"
-            />
-          </item-group>
-        </InfinityScroll>
-      </van-tab>
-    </van-tabs>
-
-    <van-popup class="filterItem" v-model="filterItemShow" position="right">
-      <ul>
-        <li
-          v-for="(li, i) in filterItem"
-          :key="i"
-          @click="filterMethod(i)"
-          :class="{filter_active: li.isActive}"
-        >
-          {{li.name}}
-          <van-icon name="success" v-show="li.isActive" class="float-r"/>
-        </li>
-      </ul>
-    </van-popup>
-
-    <!-- <transition name="fade">
-			<van-icon
-				name="arrowupcircle"
-				class="backTop"
-				@click.native="backTop"
-				v-show="showArrow"
-			/>
-    </transition>-->
-  </div>
-</template>
-
-<script>
-import { GOODS_SEARCH } from '@/api/goods';
-
-import ItemGroup from '@/vue/components/item-group';
-import ItemCardHori from '@/vue/components/item-card-hori/';
-import { Search, Tab, Tabs, Popup } from 'vant';
-// import { throttle } from 'lodash';
-import InfinityScroll from '@/vue/components/infinity-scroll';
-
-export default {
-  name: 'Item-list',
-  props: {
-    keyword: {
-      type: String,
-      default: ''
-    },
-    itemClass: {
-      type: [String, Number],
-      default: ''
-    }
-  },
-
-  data() {
-    return {
-      listApi: GOODS_SEARCH,
-      shop_id: 1,
-      tabActive: 0,
-      tabsItem: [
-        { name: '默认', sort: '', items: [] },
-        { name: '销量', sort: 'sold_quantity', items: [] },
-        { name: '最新', sort: 'created_at', items: [] }
-        // { name: '筛选', sort: false, items: [] }
-      ],
-      is_haitao: 0,
-      filterItem: [
-        {
-          name: '全部',
-          filterType: 2,
-          isActive: true
-        },
-        {
-          name: '店铺商品',
-          filterType: 0,
-          isActive: false
-        },
-        {
-          name: '海淘商品',
-          filterType: 1,
-          isActive: false
-        }
-      ],
-      isHaitao: 2,
-      searchVal: '',
-      filterItemShow: false
-      // showArrow: false
-    };
-  },
-
-  computed: {
-    sortVal() {
-      const { tabActive: i } = this;
-      return this.tabsItem[i].sort;
-    }
-  },
-
-  created() {
-    // this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
-  },
-
-  methods: {
-    onLoad(i, items) {
-      this.tabsItem[i].items.push(...items);
-    },
-    beforeRequest() {
-      return {
-        params: {
-          q: this.searchVal,
-          shop_id: this.shop_id,
-          cid: this.itemClass,
-          sort: this.sortVal,
-          is_haitao: this.isHaitao
-        }
-      };
-    },
-    // 滚动容器改变, 导致滚动监听失效, 暂时先注释了
-    // eventListen(isBind = true) {
-    //   if (isBind) {
-    //     this.$el.addEventListener('scroll', this.scrollShowArrow);
-    //   } else {
-    //     this.$el.removeEventListener('scroll', this.scrollShowArrow);
-    //   }
-    // },
-    // scrollShowArrow() {
-    //   this.showArrow = this.$el.scrollTop > 120;
-    // },
-    activeFilter(i) {
-      this.filterItem.forEach((item, index) => {
-        item.isActive = i === index;
-      });
-    },
-    resetActiveTab() {
-      const { tabActive: i } = this;
-      this.tabsItem[i].items = [];
-      const targetScroll = this.$refs[`tabScrolls${i}`][0];
-      debugger;
-      targetScroll && targetScroll.resetInit();
-    },
-    toggleFilterModal(status) {
-      this.filterItemShow = status;
-    },
-    filterMethod(i) {
-      const filterType = this.filterItem[i].filterType;
-      if (filterType === this.isHaitao) return;
-
-      this.isHaitao = filterType;
-      this.activeFilter(i);
-      this.toggleFilterModal(false);
-      this.resetActiveTab();
-    },
-    // backTop() {
-    //   this.$el.scrollTop = 0;
-    // },
-    itemClick(id) {
-      this.$router.push({ name: 'detail', params: { itemId: id } });
-    }
-  },
-
-  components: {
-    InfinityScroll,
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
-    [Tab.name]: Tab,
-    [Tabs.name]: Tabs,
-    [Search.name]: Search,
-    [Popup.name]: Popup
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s;
-}
-
-.fix-height {
-  padding-bottom: 88px;
-}
-
-.over-hide {
-  overflow: hidden;
-}
-
-.item_list {
-  background-color: #fff;
-  padding-bottom: 0;
-}
-.fixedTop {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-}
-
-.items_loading {
-  margin: 0 auto;
-}
-.filterItem {
-  width: 40%;
-  height: 100%;
-  li {
-    padding: 10px;
-    &.filter_active {
-      color: $red;
-    }
-  }
-}
-.backTop {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  font-size: 24px;
-}
-</style>
+<template>
+  <div class="item_list over-hide">
+    <form action="/search">
+      <van-search
+        placeholder="请输入商品名称"
+        v-model="searchVal"
+        @click="$router.push({ name: 'search' })"
+        showAction
+      />
+    </form>
+
+    <van-tabs v-model="tabActive" @disabled="toggleFilterModal(true)">
+      <van-tab
+        v-for="(tab, tabIndex)  in tabsItem"
+        :title="tab.name"
+        :key="tab.type"
+        :disabled="tab.sort === false"
+      >
+        <InfinityScroll
+          :ref="'tabScrolls' + tabIndex"
+          class="full-page scroll-wrap fix-height"
+          :beforeRequest="beforeRequest"
+          :apiUrl="listApi"
+          @onLoad="onLoad(tabIndex, $event)"
+        >
+          <item-group>
+            <item-card-hori
+              v-for="(item, i) in tab.items"
+              :key="i"
+              :goods="item"
+              @click="itemClick(item.id)"
+            />
+          </item-group>
+        </InfinityScroll>
+      </van-tab>
+    </van-tabs>
+
+    <van-popup class="filterItem" v-model="filterItemShow" position="right">
+      <ul>
+        <li
+          v-for="(li, i) in filterItem"
+          :key="i"
+          @click="filterMethod(i)"
+          :class="{filter_active: li.isActive}"
+        >
+          {{li.name}}
+          <van-icon name="success" v-show="li.isActive" class="float-r"/>
+        </li>
+      </ul>
+    </van-popup>
+
+    <!-- <transition name="fade">
+			<van-icon
+				name="arrowupcircle"
+				class="backTop"
+				@click.native="backTop"
+				v-show="showArrow"
+			/>
+    </transition>-->
+  </div>
+</template>
+
+<script>
+import { GOODS_SEARCH } from '@/api/goods';
+
+import ItemGroup from '@/vue/components/item-group';
+import ItemCardHori from '@/vue/components/item-card-hori/';
+import { Search, Tab, Tabs, Popup } from 'vant';
+// import { throttle } from 'lodash';
+import InfinityScroll from '@/vue/components/infinity-scroll';
+
+export default {
+  name: 'Item-list',
+  props: {
+    keyword: {
+      type: String,
+      default: ''
+    },
+    itemClass: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      listApi: GOODS_SEARCH,
+      shop_id: 1,
+      tabActive: 0,
+      tabsItem: [
+        { name: '默认', sort: '', items: [] },
+        { name: '销量', sort: 'sold_quantity', items: [] },
+        { name: '最新', sort: 'created_at', items: [] }
+        // { name: '筛选', sort: false, items: [] }
+      ],
+      is_haitao: 0,
+      filterItem: [
+        {
+          name: '全部',
+          filterType: 2,
+          isActive: true
+        },
+        {
+          name: '店铺商品',
+          filterType: 0,
+          isActive: false
+        },
+        {
+          name: '海淘商品',
+          filterType: 1,
+          isActive: false
+        }
+      ],
+      isHaitao: 2,
+      searchVal: '',
+      filterItemShow: false
+      // showArrow: false
+    };
+  },
+
+  computed: {
+    sortVal() {
+      const { tabActive: i } = this;
+      return this.tabsItem[i].sort;
+    }
+  },
+
+  created() {
+    // this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
+  },
+
+  methods: {
+    onLoad(i, items) {
+      this.tabsItem[i].items.push(...items);
+    },
+    beforeRequest() {
+      return {
+        params: {
+          q: this.searchVal,
+          shop_id: this.shop_id,
+          cid: this.itemClass,
+          sort: this.sortVal,
+          is_haitao: this.isHaitao
+        }
+      };
+    },
+    // 滚动容器改变, 导致滚动监听失效, 暂时先注释了
+    // eventListen(isBind = true) {
+    //   if (isBind) {
+    //     this.$el.addEventListener('scroll', this.scrollShowArrow);
+    //   } else {
+    //     this.$el.removeEventListener('scroll', this.scrollShowArrow);
+    //   }
+    // },
+    // scrollShowArrow() {
+    //   this.showArrow = this.$el.scrollTop > 120;
+    // },
+    activeFilter(i) {
+      this.filterItem.forEach((item, index) => {
+        item.isActive = i === index;
+      });
+    },
+    resetActiveTab() {
+      const { tabActive: i } = this;
+      this.tabsItem[i].items = [];
+      const targetScroll = this.$refs[`tabScrolls${i}`][0];
+      // debugger;
+      targetScroll && targetScroll.resetInit();
+    },
+    toggleFilterModal(status) {
+      this.filterItemShow = status;
+    },
+    filterMethod(i) {
+      const filterType = this.filterItem[i].filterType;
+      if (filterType === this.isHaitao) return;
+
+      this.isHaitao = filterType;
+      this.activeFilter(i);
+      this.toggleFilterModal(false);
+      this.resetActiveTab();
+    },
+    // backTop() {
+    //   this.$el.scrollTop = 0;
+    // },
+    itemClick(id) {
+      this.$router.push({ name: 'detail', params: { itemId: id } });
+    }
+  },
+
+  components: {
+    InfinityScroll,
+    [ItemGroup.name]: ItemGroup,
+    [ItemCardHori.name]: ItemCardHori,
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Search.name]: Search,
+    [Popup.name]: Popup
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s;
+}
+
+.fix-height {
+  padding-bottom: 88px;
+}
+
+.over-hide {
+  overflow: hidden;
+}
+
+.item_list {
+  background-color: #fff;
+  padding-bottom: 0;
+}
+.fixedTop {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+}
+
+.items_loading {
+  margin: 0 auto;
+}
+.filterItem {
+  width: 40%;
+  height: 100%;
+  li {
+    padding: 10px;
+    &.filter_active {
+      color: $red;
+    }
+  }
+}
+.backTop {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  font-size: 24px;
+}
+</style>

litemall-vue/src/views/items/search-result/index.vue

@@ -1,166 +1,166 @@
-<template>
-  <div class="item_list">
-    <form action="/search" class="fixedTop">
-      <van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
-    </form>
-
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      :immediate-check="false"
-      :offset="100"
-      @load="loadMore"
-    >
-      <item-group>
-        <item-card-hori
-          v-for="(item) in items"
-          :key="item.id"
-          :goods="item"
-          @click="itemClick(item.id)"
-        />
-      </item-group>
-    </van-list>
-
-    <is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
-
-    <transition name="fade">
-      <van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
-    </transition>
-  </div>
-</template>
-
-<script>
-import { GOODS_SEARCH } from '@/api/goods';
-
-import ItemGroup from '@/vue/components/item-group/';
-import IsEmpty from '@/vue/components/is-empty/';
-import ItemCardHori from '@/vue/components/item-card-hori/';
-import { Search, List } from 'vant';
-import _ from 'lodash';
-
-import loadMore from '@/vue/mixin/list-load-more';
-import scrollFixed from '@/vue/mixin/scroll-fixed';
-
-export default {
-  name: 'Item-list',
-  props: {
-    keyword: {
-      type: String,
-      default: ''
-    }
-  },
-
-  mixins: [loadMore, scrollFixed],
-
-  data() {
-    return {
-      isEmpty: false,
-      shop_id: '',
-      searchVal: '',
-      showArrow: false
-    };
-  },
-
-  activated() {
-    this.searchVal = this.keyword;
-    this.resetInit();
-    this.eventListen();
-  },
-
-  deactivated() {
-    document
-      .getElementById('app')
-      .removeEventListener('scroll', this.scrollShowArrow);
-  },
-
-  created() {
-    this.initData();
-    this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
-  },
-
-  methods: {
-    initData() {
-      debugger;
-      this.items = [];
-
-      return this.$reqGet(
-        `/wx/goods/list`,
-        {
-          keyword: this.searchVal,
-          page: 1,
-          size: 100,
-          sort: 'name',
-          order: 'desc',
-          categoryId: 0
-        },
-        {
-          hideLoading: true
-        }
-      ).then(res => {
-        const { goodsList, filterCategoryList } = res.data.data;
-        _.each(goodsList, v => {
-          v.pic_url = v.picUrl;
-        });
-        this.items.push(...goodsList);
-        // return page;
-      });
-    },
-    eventListen() {
-      document
-        .getElementById('app')
-        .addEventListener('scroll', this.scrollShowArrow);
-    },
-    scrollShowArrow() {
-      this.showArrow = document.getElementById('app').scrollTop > 120;
-    },
-    backTop() {
-      document.getElementById('app').scrollTop = 0;
-    },
-    itemClick(i) {
-      this.$router.push({ name: 'detail', params: { itemId: i } });
-    }
-  },
-
-  components: {
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
-    [Search.name]: Search,
-    [List.name]: List,
-    [IsEmpty.name]: IsEmpty
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s;
-}
-
-.item_list {
-  background-color: #fff;
-  padding-top: 50px;
-  box-sizing: border-box;
-}
-.fixedTop {
-  position: fixed;
-  width: 100%;
-  top: 0;
-  z-index: 999;
-}
-
-.items_loading {
-  margin: 0 auto;
-}
-.backTop {
-  position: fixed;
-  right: 20px;
-  bottom: 20px;
-  font-size: 24px;
-}
-</style>
+<template>
+  <div class="item_list">
+    <form action="/search" class="fixedTop">
+      <van-search placeholder="请输入商品名称" v-model="searchVal" @search="resetInit" showAction/>
+    </form>
+
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      :immediate-check="false"
+      :offset="100"
+      @load="loadMore"
+    >
+      <item-group>
+        <item-card-hori
+          v-for="(item) in items"
+          :key="item.id"
+          :goods="item"
+          @click="itemClick(item.id)"
+        />
+      </item-group>
+    </van-list>
+
+    <is-empty v-if="items.length === 0">抱歉,没有找到符合条件商品</is-empty>
+
+    <transition name="fade">
+      <van-icon name="arrowupcircle" class="backTop" @click.native="backTop" v-show="showArrow"></van-icon>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { GOODS_SEARCH } from '@/api/goods';
+
+import ItemGroup from '@/vue/components/item-group/';
+import IsEmpty from '@/vue/components/is-empty/';
+import ItemCardHori from '@/vue/components/item-card-hori/';
+import { Search, List } from 'vant';
+import _ from 'lodash';
+
+import loadMore from '@/vue/mixin/list-load-more';
+import scrollFixed from '@/vue/mixin/scroll-fixed';
+
+export default {
+  name: 'Item-list',
+  props: {
+    keyword: {
+      type: String,
+      default: ''
+    }
+  },
+
+  mixins: [loadMore, scrollFixed],
+
+  data() {
+    return {
+      isEmpty: false,
+      shop_id: '',
+      searchVal: '',
+      showArrow: false
+    };
+  },
+
+  activated() {
+    this.searchVal = this.keyword;
+    this.resetInit();
+    this.eventListen();
+  },
+
+  deactivated() {
+    document
+      .getElementById('app')
+      .removeEventListener('scroll', this.scrollShowArrow);
+  },
+
+  created() {
+    this.initData();
+    this.scrollShowArrow = _.throttle(this.scrollShowArrow, 100);
+  },
+
+  methods: {
+    initData() {
+      // debugger;
+      this.items = [];
+
+      return this.$reqGet(
+        `/wx/goods/list`,
+        {
+          keyword: this.searchVal,
+          page: 1,
+          size: 100,
+          sort: 'name',
+          order: 'desc',
+          categoryId: 0
+        },
+        {
+          hideLoading: true
+        }
+      ).then(res => {
+        const { goodsList, filterCategoryList } = res.data.data;
+        _.each(goodsList, v => {
+          v.pic_url = v.picUrl;
+        });
+        this.items.push(...goodsList);
+        // return page;
+      });
+    },
+    eventListen() {
+      document
+        .getElementById('app')
+        .addEventListener('scroll', this.scrollShowArrow);
+    },
+    scrollShowArrow() {
+      this.showArrow = document.getElementById('app').scrollTop > 120;
+    },
+    backTop() {
+      document.getElementById('app').scrollTop = 0;
+    },
+    itemClick(i) {
+      this.$router.push({ name: 'detail', params: { itemId: i } });
+    }
+  },
+
+  components: {
+    [ItemGroup.name]: ItemGroup,
+    [ItemCardHori.name]: ItemCardHori,
+    [Search.name]: Search,
+    [List.name]: List,
+    [IsEmpty.name]: IsEmpty
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s;
+}
+
+.item_list {
+  background-color: #fff;
+  padding-top: 50px;
+  box-sizing: border-box;
+}
+.fixedTop {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 999;
+}
+
+.items_loading {
+  margin: 0 auto;
+}
+.backTop {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  font-size: 24px;
+}
+</style>

litemall-vue/src/views/user/module-collect/index.vue

@@ -1,127 +1,127 @@
-<template>
-  <div class="user_collect">
-    <form action="/search" class="fixedTop">
-      <van-search placeholder="请输入商品名称" v-model="searchVal"/>
-    </form>
-
-    <van-list
-      v-model="loading"
-      :finished="finished"
-      :immediate-check="false"
-      :offset="100"
-      @load="loadMore"
-    >
-      <item-group>
-        <item-card-hori
-          v-for="(item, i) in items"
-          :style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
-          :key="i"
-          :goods="item"
-          @click="itemClick(i,item)"
-        >
-          <van-icon
-            name="lajitong"
-            slot="footer"
-            @click.stop="cancelCollect($event, i,item)"
-            style="float: right;"
-          />
-        </item-card-hori>
-      </item-group>
-    </van-list>
-
-    <is-empty v-if="isEmpty">没有商品收藏</is-empty>
-
-    <!-- <div class="clear_invalid" v-if="items.length" @click="clearInvalid">
-      <van-icon name="lajitong"/>清除失效商品
-    </div>-->
-  </div>
-</template>
-
-<script>
-import { GOODS_COLLECT_LIST } from '@/api/user';
-
-import ItemGroup from '@/vue/components/item-group/';
-import ItemCardHori from '@/vue/components/item-card-hori/';
-import IsEmpty from '@/vue/components/is-empty/';
-import { Search, List } from 'vant';
-
-import loadMore from '@/vue/mixin/list-load-more';
-import scrollFixed from '@/vue/mixin/scroll-fixed';
-
-export default {
-  mixins: [loadMore, scrollFixed],
-
-  data() {
-    return {
-      shop_id: 1,
-      items: [],
-      searchVal: ''
-    };
-  },
-
-  created() {
-    this.resetInit();
-  },
-
-  methods: {
-    initData() {
-      return this.$reqGet(
-        '/wx/collect/list?type=0&page=1&size=100',
-        {},
-        {
-          hideLoading: true
-        }
-      ).then(res => {
-        debugger;
-        const { collectList, page } = res.data.data;
-        this.items.push(...collectList);
-        return page;
-      });
-    },
-    cancelCollect(event, i, item) {
-      this.$dialog.confirm({ message: '是否取消收藏该商品' }).then(() => {
-        this.$reqPost(
-          '/wx/collect/addordelete',
-          { valueId: item.valueId, type: 0 },
-          {
-            hideLoading: true
-          }
-        ).then(res => {
-          this.items.splice(i, 1);
-        });
-      });
-    },
-    clearInvalid() {
-      this.$dialog.confirm({ message: '确定清除所有失效商品吗?' });
-    },
-    itemClick(i, item) {
-      // const item_id = this.items[i].item_id;
-      // const status = this.items[i].goods_status;
-      // status &&
-      this.$router.push(`/items/detail/${item.valueId}`);
-      // !status && this.$toast('该商品已失效');
-    }
-  },
-
-  components: {
-    [ItemGroup.name]: ItemGroup,
-    [ItemCardHori.name]: ItemCardHori,
-    [Search.name]: Search,
-    [IsEmpty.name]: IsEmpty,
-    [List.name]: List
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.clear_invalid {
-  width: 120px;
-  color: $font-color-gray;
-  border: 1px solid $font-color-gray;
-  margin: 0 auto;
-  text-align: center;
-  padding: 5px 3px;
-  margin-top: 20px;
-  border-radius: 3px;
-}
-</style>
+<template>
+  <div class="user_collect">
+    <form action="/search" class="fixedTop">
+      <van-search placeholder="请输入商品名称" v-model="searchVal"/>
+    </form>
+
+    <van-list
+      v-model="loading"
+      :finished="finished"
+      :immediate-check="false"
+      :offset="100"
+      @load="loadMore"
+    >
+      <item-group>
+        <item-card-hori
+          v-for="(item, i) in items"
+          :style="{backgroundColor: !item.goods_status && '#fcfcfc'}"
+          :key="i"
+          :goods="item"
+          @click="itemClick(i,item)"
+        >
+          <van-icon
+            name="lajitong"
+            slot="footer"
+            @click.stop="cancelCollect($event, i,item)"
+            style="float: right;"
+          />
+        </item-card-hori>
+      </item-group>
+    </van-list>
+
+    <is-empty v-if="isEmpty">没有商品收藏</is-empty>
+
+    <!-- <div class="clear_invalid" v-if="items.length" @click="clearInvalid">
+      <van-icon name="lajitong"/>清除失效商品
+    </div>-->
+  </div>
+</template>
+
+<script>
+import { GOODS_COLLECT_LIST } from '@/api/user';
+
+import ItemGroup from '@/vue/components/item-group/';
+import ItemCardHori from '@/vue/components/item-card-hori/';
+import IsEmpty from '@/vue/components/is-empty/';
+import { Search, List } from 'vant';
+
+import loadMore from '@/vue/mixin/list-load-more';
+import scrollFixed from '@/vue/mixin/scroll-fixed';
+
+export default {
+  mixins: [loadMore, scrollFixed],
+
+  data() {
+    return {
+      shop_id: 1,
+      items: [],
+      searchVal: ''
+    };
+  },
+
+  created() {
+    this.resetInit();
+  },
+
+  methods: {
+    initData() {
+      return this.$reqGet(
+        '/wx/collect/list?type=0&page=1&size=100',
+        {},
+        {
+          hideLoading: true
+        }
+      ).then(res => {
+        // debugger;
+        const { collectList, page } = res.data.data;
+        this.items.push(...collectList);
+        return page;
+      });
+    },
+    cancelCollect(event, i, item) {
+      this.$dialog.confirm({ message: '是否取消收藏该商品' }).then(() => {
+        this.$reqPost(
+          '/wx/collect/addordelete',
+          { valueId: item.valueId, type: 0 },
+          {
+            hideLoading: true
+          }
+        ).then(res => {
+          this.items.splice(i, 1);
+        });
+      });
+    },
+    clearInvalid() {
+      this.$dialog.confirm({ message: '确定清除所有失效商品吗?' });
+    },
+    itemClick(i, item) {
+      // const item_id = this.items[i].item_id;
+      // const status = this.items[i].goods_status;
+      // status &&
+      this.$router.push(`/items/detail/${item.valueId}`);
+      // !status && this.$toast('该商品已失效');
+    }
+  },
+
+  components: {
+    [ItemGroup.name]: ItemGroup,
+    [ItemCardHori.name]: ItemCardHori,
+    [Search.name]: Search,
+    [IsEmpty.name]: IsEmpty,
+    [List.name]: List
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.clear_invalid {
+  width: 120px;
+  color: $font-color-gray;
+  border: 1px solid $font-color-gray;
+  margin: 0 auto;
+  text-align: center;
+  padding: 5px 3px;
+  margin-top: 20px;
+  border-radius: 3px;
+}
+</style>

litemall-vue/src/views/user/user-information-set/index.vue

@@ -1,141 +1,141 @@
-<template>
-  <div class="user_information">
-    <van-cell-group>
-      <van-cell title="头像" class="cell_middle">
-        <van-uploader :afterRead="avatarAfterRead">
-          <div class="user_avatar_upload">
-            <img
-              :src="avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
-              alt="你的头像"
-              v-if="avatar"
-            >
-            <van-icon name="camera_full" v-else></van-icon>
-          </div>
-        </van-uploader>
-      </van-cell>
-
-      <!-- <van-cell title="背景图" to="/user/information/setbg" isLink></van-cell> -->
-      <!-- <van-cell title="昵称" to="/user/information/setNickname" :value="nickName" isLink/> -->
-      <!-- <van-cell title="性别" :value="genderText" @click="showSex = true" isLink/> -->
-      <!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
-      <!-- <van-cell title="手机号" to="/user/information/setMobile" :value="mobile" isLink></van-cell> -->
-      <van-cell title="背景图" isLink></van-cell>
-      <van-cell title="昵称" :value="nickName" isLink/>
-      <van-cell title="性别" isLink/>
-      <!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
-      <van-cell title="手机号" :value="mobile" isLink></van-cell>
-    </van-cell-group>
-    <van-button class="bottom_btn" @click="loginOut" type="primary" bottomAction>退出登录</van-button>
-    <van-popup v-model="showSex" position="bottom">
-      <van-picker
-        showToolbar
-        :columns="sexColumns"
-        title="选择性别"
-        @cancel="showSex = false"
-        @confirm="onSexConfirm"
-      />
-    </van-popup>
-  </div>
-</template>
-
-<script>
-import { Uploader, Picker, Popup, Button } from 'vant';
-import { USER_PROFILE } from '@/api/user';
-import { removeLocalStorage } from 'core/utils/local-storage';
-import { getLocalStorage } from 'core/utils/local-storage';
-export default {
-  data() {
-    return {
-      sexColumns: [
-        {
-          values: ['保密', '男', '女'],
-          defaultIndex: 0
-        }
-      ],
-      showSex: false,
-      avatar: '',
-      nickName: '',
-      gender: -1,
-      mobile: ''
-    };
-  },
-
-  computed: {
-    genderText() {
-      const text = ['保密', '男', '女'];
-      return text[this.gender] || '';
-    }
-  },
-
-  created() {
-    this.getUserInfo();
-  },
-
-  methods: {
-    avatarAfterRead(file) {
-      console.log(file);
-    },
-    onSexConfirm(value, index) {
-      this.$reqPut(USER_PROFILE, {
-        gender: index[0]
-      }).then(res => {
-        this.gender = res.data.data.gender;
-        this.showSex = false;
-      });
-    },
-    getUserInfo() {
-      const infoData = getLocalStorage(
-        'nickName',
-        'background_image',
-        'avatar'
-      );
-      debugger;
-      this.avatar = infoData.avatar;
-      this.nickName = infoData.nickName;
-      // this.gender = infoData.gender;
-      // this.mobile = infoData.mobile;
-    },
-    loginOut() {
-      removeLocalStorage(
-        'Authorization',
-        // 'user_id',
-        'avatar',
-        // 'background_image',
-        'nickName'
-      );
-      this.$router.push({ name: 'home' });
-    }
-  },
-
-  components: {
-    [Button.name]: Button,
-    [Uploader.name]: Uploader,
-    [Picker.name]: Picker,
-    [Popup.name]: Popup
-  }
-};
-</script>
-
-
-<style lang="scss" scoped>
-.user_information {
-  .user_avatar_upload {
-    position: relative;
-    width: 50px;
-    height: 50px;
-    border: 1px solid $border-color;
-    img {
-      max-width: 100%;
-      max-height: 100%;
-    }
-    i {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 20px;
-      color: $border-color;
-    }
-  }
-}
-</style>
+<template>
+  <div class="user_information">
+    <van-cell-group>
+      <van-cell title="头像" class="cell_middle">
+        <van-uploader :afterRead="avatarAfterRead">
+          <div class="user_avatar_upload">
+            <img
+              :src="avatar + '?x-oss-process=image/resize,m_fill,h_50,w_50'"
+              alt="你的头像"
+              v-if="avatar"
+            >
+            <van-icon name="camera_full" v-else></van-icon>
+          </div>
+        </van-uploader>
+      </van-cell>
+
+      <!-- <van-cell title="背景图" to="/user/information/setbg" isLink></van-cell> -->
+      <!-- <van-cell title="昵称" to="/user/information/setNickname" :value="nickName" isLink/> -->
+      <!-- <van-cell title="性别" :value="genderText" @click="showSex = true" isLink/> -->
+      <!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
+      <!-- <van-cell title="手机号" to="/user/information/setMobile" :value="mobile" isLink></van-cell> -->
+      <van-cell title="背景图" isLink></van-cell>
+      <van-cell title="昵称" :value="nickName" isLink/>
+      <van-cell title="性别" isLink/>
+      <!-- <van-cell title="密码设置" to="/user/information/setPassword" isLink/> -->
+      <van-cell title="手机号" :value="mobile" isLink></van-cell>
+    </van-cell-group>
+    <van-button class="bottom_btn" @click="loginOut" type="primary" bottomAction>退出登录</van-button>
+    <van-popup v-model="showSex" position="bottom">
+      <van-picker
+        showToolbar
+        :columns="sexColumns"
+        title="选择性别"
+        @cancel="showSex = false"
+        @confirm="onSexConfirm"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Uploader, Picker, Popup, Button } from 'vant';
+import { USER_PROFILE } from '@/api/user';
+import { removeLocalStorage } from 'core/utils/local-storage';
+import { getLocalStorage } from 'core/utils/local-storage';
+export default {
+  data() {
+    return {
+      sexColumns: [
+        {
+          values: ['保密', '男', '女'],
+          defaultIndex: 0
+        }
+      ],
+      showSex: false,
+      avatar: '',
+      nickName: '',
+      gender: -1,
+      mobile: ''
+    };
+  },
+
+  computed: {
+    genderText() {
+      const text = ['保密', '男', '女'];
+      return text[this.gender] || '';
+    }
+  },
+
+  created() {
+    this.getUserInfo();
+  },
+
+  methods: {
+    avatarAfterRead(file) {
+      console.log(file);
+    },
+    onSexConfirm(value, index) {
+      this.$reqPut(USER_PROFILE, {
+        gender: index[0]
+      }).then(res => {
+        this.gender = res.data.data.gender;
+        this.showSex = false;
+      });
+    },
+    getUserInfo() {
+      const infoData = getLocalStorage(
+        'nickName',
+        'background_image',
+        'avatar'
+      );
+      // debugger;
+      this.avatar = infoData.avatar;
+      this.nickName = infoData.nickName;
+      // this.gender = infoData.gender;
+      // this.mobile = infoData.mobile;
+    },
+    loginOut() {
+      removeLocalStorage(
+        'Authorization',
+        // 'user_id',
+        'avatar',
+        // 'background_image',
+        'nickName'
+      );
+      this.$router.push({ name: 'home' });
+    }
+  },
+
+  components: {
+    [Button.name]: Button,
+    [Uploader.name]: Uploader,
+    [Picker.name]: Picker,
+    [Popup.name]: Popup
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+.user_information {
+  .user_avatar_upload {
+    position: relative;
+    width: 50px;
+    height: 50px;
+    border: 1px solid $border-color;
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 20px;
+      color: $border-color;
+    }
+  }
+}
+</style>

litemall-vue/src/vue/mixin/list-load-more.js

@@ -16,7 +16,7 @@ export default {
   methods: {
     async resetInit() {
       this.resetData();
-      debugger;
+      // debugger;
       const page = await this.initData();
       this.$nextTick(() => {
         this.setPages(page);