fix[litemall-vue: 注释debugger

74126a92 · Junling Bu · 9b217226 · 74126a92 · 74126a92 · 74126a92
Commit 74126a92 authored Apr 16, 2019 by Junling Bu
--- a/litemall-vue/src/views/items/detail/mix.js
+++ b/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])

--- a/litemall-vue/src/views/items/list/index.vue
+++ b/litemall-vue/src/views/items/list/index.vue
 <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;
+      // 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>
--- a/litemall-vue/src/views/items/search-result/index.vue
+++ b/litemall-vue/src/views/items/search-result/index.vue
 <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;
+      // 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>
--- a/litemall-vue/src/views/user/module-collect/index.vue
+++ b/litemall-vue/src/views/user/module-collect/index.vue
 <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;
+        // 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>
--- a/litemall-vue/src/views/user/user-information-set/index.vue
+++ b/litemall-vue/src/views/user/user-information-set/index.vue
 <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;
+      // 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>
--- a/litemall-vue/src/vue/mixin/list-load-more.js
+++ b/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);