You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.3 KiB
172 lines
4.3 KiB
<template>
|
|
<view class="wanlshop-category-container">
|
|
<!-- 导航条 -->
|
|
<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
|
|
<view
|
|
class="cu-bar fixed bg-white solid-bottom"
|
|
:style="{
|
|
height: $wanlshop.wanlsys().height + 'px',
|
|
paddingTop: $wanlshop.wanlsys().top + 'px'
|
|
}"
|
|
>
|
|
<view class="action" @tap="handleGroups">
|
|
<text class="wlIcon-pintuan3"></text>
|
|
<!-- <view class="cu-tag badge">拼</view> -->
|
|
</view>
|
|
<view class="search-form round">
|
|
<text class="wlIcon-sousuo1 text-bold"></text>
|
|
<swiper
|
|
class="search-swiper placeholder"
|
|
vertical
|
|
autoplay
|
|
circular
|
|
interval="3000"
|
|
>
|
|
<swiper-item @tap="productSearch('')">搜索商品、类目</swiper-item>
|
|
<swiper-item
|
|
v-for="(item, index) in common.modulesData.searchModules"
|
|
:key="item.keywords"
|
|
@tap="productSearch(item.keywords)"
|
|
>
|
|
{{ item.keywords }}
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- #ifndef MP -->
|
|
<view class="action" @tap="showModal('menu')">
|
|
<text class="wlIcon-gengduo"></text>
|
|
<!-- {{( statistics.notice.notice + statistics.notice.order + statistics.notice.chat + statistics.order.pay + statistics.order.delive + statistics.order.receiving + statistics.order.evaluate + cart.cartnum )}} -->
|
|
<view
|
|
class="cu-tag badge bg-orange"
|
|
v-if="
|
|
statistics.notice.notice +
|
|
statistics.notice.order +
|
|
statistics.notice.chat +
|
|
statistics.order.pay +
|
|
statistics.order.delive +
|
|
statistics.order.receiving +
|
|
statistics.order.evaluate +
|
|
cart.cartnum >
|
|
0
|
|
"
|
|
></view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
<!-- 加载类目 -->
|
|
<wanl-shop-classify
|
|
:mainHeight="height"
|
|
:categoryStyle="parseInt(common.appStyle.category_style)"
|
|
:categoryData="common.modulesData.categoryModules"
|
|
:adverData="common.adData.categoryAdverts"
|
|
/>
|
|
<!-- 模态框 -->
|
|
<view class="WANL-MODAL">
|
|
<view
|
|
class="cu-modal top-modal"
|
|
:class="modalName == 'menu' ? 'show' : ''"
|
|
@tap="hideModal"
|
|
>
|
|
<view class="wanl-modal-menu cu-dialog" @tap.stop="">
|
|
<wanl-direct @change="hideModal" />
|
|
</view>
|
|
</view>
|
|
<!-- 分享 -->
|
|
<view
|
|
class="cu-modal bottom-modal"
|
|
:class="modalName == 'share' ? 'show' : ''"
|
|
@tap="hideModal"
|
|
>
|
|
<view class="cu-dialog" @tap.stop="">
|
|
<wanl-share
|
|
:scrollAnimation="scrollAnimation"
|
|
shareTitle="我发现了一个很好的线上购物商城，这是商城类目"
|
|
shareText="品质好而且很省钱如果自己在上面购买，每年可以省下1%~40%的钱"
|
|
:image="$wanlshop.appstc('/common/logo.png')"
|
|
:href="common.appConfig.domain + '/pages/category?QRtype=category'"
|
|
@change="hideModal"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex';
|
|
import wanlShopClassify from '@/components/wanl-shop/classify';
|
|
export default {
|
|
data() {
|
|
return {
|
|
height: 0,
|
|
modalName: null,
|
|
scrollAnimation: 300
|
|
};
|
|
},
|
|
components: {
|
|
wanlShopClassify
|
|
},
|
|
computed: {
|
|
...mapState(['common', 'statistics', 'cart'])
|
|
},
|
|
onLoad() {
|
|
let wanlsys = this.$wanlshop.wanlsys();
|
|
// #ifdef APP-PLUS
|
|
this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height;
|
|
// #endif
|
|
// #ifdef H5
|
|
this.height = wanlsys.windowHeight + wanlsys.windowBottom - wanlsys.height - 50;
|
|
// #endif
|
|
// #ifdef MP
|
|
this.height = wanlsys.windowHeight - wanlsys.height;
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
wx.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
});
|
|
// #endif
|
|
},
|
|
methods: {
|
|
// 弹出层
|
|
showModal(name) {
|
|
// 滚动下分享
|
|
if (name == 'share' && this.modalName != 'share') {
|
|
setTimeout(() => {
|
|
this.scrollAnimation = 300;
|
|
}, 300);
|
|
}
|
|
this.modalName = name;
|
|
},
|
|
hideModal(name) {
|
|
if (name) {
|
|
this.showModal(name);
|
|
} else {
|
|
this.modalName = null;
|
|
}
|
|
},
|
|
handleGroups() {
|
|
this.$wanlshop.to('/pages/apps/groups/index');
|
|
},
|
|
productSearch(text) {
|
|
this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.cu-custom .cu-bar {
|
|
z-index: 99;
|
|
}
|
|
.cu-bar .action {
|
|
position: relative;
|
|
}
|
|
|
|
/* #ifdef MP */
|
|
.cu-bar .search-form {
|
|
margin: 0 0 0 25rpx;
|
|
}
|
|
/* #endif */
|
|
</style>
|
|
|