fix[litemall-vue: 注释debugger
This commit is contained in:
Junling Bu
@@ -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])
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,7 +16,7 @@ export default {
|
||||
methods: {
|
||||
async resetInit() {
|
||||
this.resetData();
|
||||
debugger;
|
||||
// debugger;
|
||||
const page = await this.initData();
|
||||
this.$nextTick(() => {
|
||||
this.setPages(page);
|
||||
|
||||
Reference in New Issue
Block a user