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.
540 lines
14 KiB
540 lines
14 KiB
<template>
|
|
<view class="wanlshop-container">
|
|
<!-- <image src="../static/images/indexbg.png" mode="widthFix" class="indexbgHeader"></image> -->
|
|
<view
|
|
v-if="common.modulesData.homeModules.page"
|
|
class="wanlshop-container__head"
|
|
:style="{
|
|
height: headHeight + 'px',
|
|
color: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff' ? '#ffffff' : '#333333' : '',
|
|
backgroundColor: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor : '#f7f7f7',
|
|
backgroundImage: 'url(' + $wanlshop.oss( common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBackgroundImage : '', 0, 50, 1, 'transparent', 'png' ) + ')'
|
|
}"
|
|
>
|
|
<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }" >
|
|
|
|
<view class="navigater flex align-center justify-between">
|
|
<!-- <view class="flex" @tap="scanCode">
|
|
<view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
|
|
</view> -->
|
|
<view class="search flex align-center margin-lr-sm round">
|
|
<view class="icon text-df text-bold wanl-gray-dark">
|
|
<text class="wlIcon-sousuo1"></text>
|
|
</view>
|
|
<swiper vertical autoplay circular interval="3000">
|
|
<swiper-item @tap="handleSearch('')">
|
|
<text class="wanl-gray-dark text-cut">搜索商品</text>
|
|
</swiper-item>
|
|
<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords" @tap="handleSearch(item.keywords)" >
|
|
<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="flex">
|
|
<!-- <view class="margin-right-bj text-xxl position-relative" @tap="$wanlshop.to('/pages/user/coupon/list')">
|
|
<text class="wlIcon-coupon"/>
|
|
<view class="cu-tag badge">减</view>
|
|
</view> -->
|
|
<!-- <view class="margin-right-bj text-xxl position-relative" @tap="handleModal('share')">
|
|
<text class="wlIcon-fenxiangcopy"/>
|
|
</view> -->
|
|
|
|
<view class="text-xxl" @tap="$wanlshop.to('/pages/notice/notice')">
|
|
<text class="wlIcon-xiaoxizhongxin" style="color:#000"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="toolbar flex padding-lr-bj align-center">
|
|
<scroll-view
|
|
class="scroll"
|
|
scroll-x
|
|
scroll-with-animation
|
|
:scroll-left="scrollLeft"
|
|
>
|
|
<view class="scroll__item" :class="{ action: currentItemId === 'follow' }" @tap="handleSelect('follow', 0)" >
|
|
关注
|
|
</view>
|
|
<view class="scroll__item" :class="{ action: currentItemId === 'home' }" @tap="handleSelect('home', 1)" >
|
|
推荐
|
|
</view>
|
|
<view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules" :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }" @tap="handleSelect('cid' + item.id, index + 2)" >
|
|
{{ item.name }}
|
|
</view>
|
|
</scroll-view>
|
|
<view class="category flex align-center" @tap="handleModal('category')">
|
|
<text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
|
|
<text v-else class="wlIcon-fanhui4"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 主体 -->
|
|
<swiper
|
|
class="wanlshop-container__main"
|
|
:current-item-id="currentItemId"
|
|
:style="{
|
|
height: windowHeight + 'px'
|
|
}"
|
|
@change="changeCurrent"
|
|
@animationfinish="animationFinish"
|
|
>
|
|
<!-- 发现页 -->
|
|
<swiper-item item-id="follow">
|
|
<wanl-shop-find
|
|
:windowHeight="windowHeight"
|
|
:headHeight="headHeight"
|
|
:currentItemId="currentItemId"
|
|
:homeModules="common.modulesData.homeModules"
|
|
:appConfig="common.appConfig"
|
|
:user="user"
|
|
/>
|
|
</swiper-item>
|
|
<!-- 主页 -->
|
|
<swiper-item item-id="home">
|
|
<wanl-shop-page
|
|
:windowHeight="windowHeight"
|
|
:headHeight="headHeight"
|
|
:headTop="headTop"
|
|
:pageModules="common.modulesData.homeModules"
|
|
:adData="common.adData"
|
|
/>
|
|
</swiper-item>
|
|
<!-- 分类 -->
|
|
<swiper-item
|
|
v-for="(item, index) in common.modulesData.categoryModules"
|
|
:key="item.id"
|
|
:item-id="'cid' + item.id"
|
|
>
|
|
<wanl-shop-category
|
|
:cid="item.id"
|
|
:headHeight="headHeight"
|
|
:windowHeight="windowHeight"
|
|
:currentItemId="currentItemId"
|
|
:homeModules="common.modulesData.homeModules"
|
|
:childlist="item.childlist"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 弹窗 -->
|
|
<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
|
|
<!-- 顶部 -->
|
|
<view class="cu-modal top-modal" :class="modalName == 'category' ? 'show' : ''" @tap="handleModal()">
|
|
<view
|
|
class="cu-dialog padding-lr-bj padding-bottom-bj"
|
|
:style="{ paddingTop: headHeight + 12 + 'px' }"
|
|
@tap.stop=""
|
|
>
|
|
<view class="category text-min">
|
|
<view
|
|
class="item round bg-gray"
|
|
:class="{ action: currentItemId === 'follow' }"
|
|
@tap="handleSelect('follow', 0)"
|
|
>
|
|
我的关注
|
|
</view>
|
|
<view
|
|
class="item round bg-gray"
|
|
:class="{ action: currentItemId === 'home' }"
|
|
@tap="handleSelect('home', 1)"
|
|
>
|
|
主页
|
|
</view>
|
|
<view
|
|
class="item round bg-gray"
|
|
v-for="(item, index) in common.modulesData.categoryModules"
|
|
:key="item.id"
|
|
:class="{ action: currentItemId === 'cid' + item.id }"
|
|
@tap="handleSelect('cid' + item.id, index + 2)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享 -->
|
|
<view
|
|
class="cu-modal wanl-share bottom-modal"
|
|
:class="modalName == 'share' ? 'show' : ''"
|
|
@tap="handleModal()"
|
|
>
|
|
<view class="cu-dialog" @tap.stop="">
|
|
<wanl-share
|
|
ref="wanlShare"
|
|
page="pages/index"
|
|
:scene="{qr:'i'}"
|
|
:scrollAnimation="scrollAnimation"
|
|
@change="handleModal"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 版本更新 -->
|
|
<view class="cu-modal" :class="{ show: update.update }">
|
|
<view class="cu-dialog">
|
|
<view class="hade">
|
|
<image
|
|
:src="$wanlshop.appstc('/common/update.png')"
|
|
mode="aspectFit"
|
|
></image>
|
|
<view class="title">
|
|
<view class="text-white text-bold5">{{ update.data.title }}</view>
|
|
<text class="text-white text-bold5">
|
|
最新版本：{{ update.data.versionName }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="info">
|
|
<view class="text-lg text-bold5"><text>更新内容：</text></view>
|
|
<rich-text class="wanl-gray-dark" :nodes="update.data.content" />
|
|
<!-- 开始下载 -->
|
|
<view class="margin-top-xl" v-if="update.download.start">
|
|
<view class="flex margin-bottom-sm">
|
|
<view class="cu-progress round striped active">
|
|
<view
|
|
class="bg-orange"
|
|
:style="{ width: update.download.progress + '%' }"
|
|
></view>
|
|
</view>
|
|
<text class="margin-left-sm">{{ update.download.progress }}%</text>
|
|
</view>
|
|
<view class="wanl-gray-dark text-sm text-center">
|
|
<text>
|
|
下载中，请稍等（{{
|
|
$wanlshop.conver(update.download.totalBytesWritten)
|
|
}}/{{
|
|
$wanlshop.conver(update.download.totalBytesExpectedToWrite)
|
|
}}）
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<!-- 开始安装 -->
|
|
<view class="margin-top-xl text-center" v-else-if="update.download.install">
|
|
安装中...
|
|
</view>
|
|
<!-- 更新提示 -->
|
|
<view class="flex justify-around margin-top-xl" v-else>
|
|
<button class="cu-btn radius-bock bg-gray lg" @tap="ignore">
|
|
忽略升级
|
|
</button>
|
|
<button class="cu-btn radius-bock bg-blue lg" @tap="download">
|
|
立刻升级
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapActions } from 'vuex';
|
|
import wanlShopPage from '@/components/wanl-shop/page';
|
|
import wanlShopFind from '@/components/wanl-shop/find';
|
|
import wanlShopCategory from '@/components/wanl-shop/category';
|
|
|
|
export default {
|
|
components: {
|
|
wanlShopPage,
|
|
wanlShopFind,
|
|
wanlShopCategory
|
|
},
|
|
computed: {
|
|
...mapState(['common', 'user', 'update'])
|
|
},
|
|
data() {
|
|
return {
|
|
modalName: '',
|
|
scrollAnimation: 300,
|
|
headHeight: 75,
|
|
windowHeight: 0,
|
|
headTop: 0,
|
|
currentItemId: 'home',
|
|
currentData: {},
|
|
scrollLeft: 0,
|
|
contentText: {
|
|
contentdown: '下拉加载更多',
|
|
contentrefresh: '加载中',
|
|
contentnomore: '我是有底线的'
|
|
}
|
|
};
|
|
},
|
|
onShow() {
|
|
// #ifdef APP-PLUS
|
|
plus.navigator.setFullscreen(false);
|
|
// #endif
|
|
// 计算页面尺寸
|
|
let sys = this.$wanlshop.wanlsys();
|
|
this.headTop = sys.top;
|
|
this.headHeight = sys.height + uni.upx2px(60);
|
|
this.windowHeight = sys.windowHeight;
|
|
setTimeout(() => {
|
|
uni.setNavigationBarColor({
|
|
frontColor: this.$store.state.common.modulesData.homeModules.page
|
|
? this.$store.state.common.modulesData.homeModules.page.style
|
|
.navigationBarTextStyle
|
|
: '',
|
|
backgroundColor: this.$store.state.common.modulesData.homeModules.page
|
|
? this.$store.state.common.modulesData.homeModules.page.style
|
|
.navigationBarBackgroundColor
|
|
: ''
|
|
});
|
|
}, 200);
|
|
},
|
|
onReady() {
|
|
// 判断网络类型
|
|
uni.getNetworkType({
|
|
success: res => {
|
|
if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
|
|
this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
|
|
} else if (res.networkType == 'none') {
|
|
this.$wanlshop.msg('没有网络');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
onLoad(query) {
|
|
// 判断是否小程序来源
|
|
if(query.hasOwnProperty('scene')){
|
|
let scene = decodeURIComponent(query.scene);
|
|
scene = this.$wanlshop.getParam(scene);
|
|
console.log('微信小程序：',scene);
|
|
}
|
|
// 测试接口
|
|
// uni.request({
|
|
// url: '/wanlshop/product/activelists',
|
|
// method: 'GET',
|
|
// data: {
|
|
// type:1,
|
|
// active_id:'123123',
|
|
// username:'Ceshi'
|
|
// },
|
|
// success: res => {
|
|
// console.log(res,"测试发票接口")
|
|
// }
|
|
// })
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
download: 'update/download', // 立即下载
|
|
ignore: 'update/ignore' // 忽略更新
|
|
}),
|
|
// 选择Tag
|
|
handleSelect(id, index) {
|
|
this.currentItemId = id;
|
|
this.scrollLeft = (index - 1) * 50;
|
|
},
|
|
// 动画
|
|
animationFinish(e) {
|
|
//#ifdef APP-PLUS
|
|
this.changeCurrent(e);
|
|
//#endif
|
|
},
|
|
// 滚动的tag
|
|
changeCurrent(e) {
|
|
this.currentItemId = e.detail.currentItemId;
|
|
this.scrollLeft = (e.detail.current - 1) * 50;
|
|
},
|
|
// 弹出层
|
|
handleModal(name) {
|
|
// 滚动分享
|
|
if (name == 'share') {
|
|
setTimeout(() => {
|
|
this.scrollAnimation = 0;
|
|
}, 300);
|
|
}
|
|
// 强制关闭海报
|
|
if(this.modalName == 'share'){
|
|
this.$refs.wanlShare.closePoster();
|
|
}
|
|
this.modalName = this.modalName ? null : name;
|
|
},
|
|
// 扫码
|
|
scanCode() {
|
|
// #ifndef H5
|
|
uni.scanCode({
|
|
success: res => {
|
|
let query = this.$wanlshop.getParam(res.result),
|
|
id = query.id;
|
|
switch (query.qr) {
|
|
case 'g':
|
|
this.onGoods(id);
|
|
break;
|
|
case 'gr':
|
|
this.$wanlshop.to(`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
|
|
break;
|
|
case 'u':
|
|
this.$wanlshop.to(`/pages/user/info?id=${id}`);
|
|
break;
|
|
case 'fu':
|
|
this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
|
|
break;
|
|
case 'c':
|
|
this.$wanlshop.on('/pages/category');
|
|
break;
|
|
case 'p':
|
|
this.$wanlshop.to(`/pages/page/index?id=${id}`);
|
|
break;
|
|
case 's':
|
|
this.onShop(id);
|
|
break;
|
|
case 'live':
|
|
// #ifdef APP-PLUS || MP-WEIXIN
|
|
this.$wanlshop.auth(`/pages/shop/live/live`);
|
|
// #endif
|
|
// #ifndef APP-PLUS || MP-WEIXIN
|
|
this.$wanlshop.msg('目前只开放App和微信小程序直播');
|
|
// #endif
|
|
break;
|
|
case 'chat':
|
|
this.toChat(id);
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
// #endif
|
|
// #ifdef H5
|
|
this.$wanlshop.msg('暂不支持H5扫码');
|
|
// #endif
|
|
},
|
|
// 搜索
|
|
handleSearch(text) {
|
|
this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
|
|
},
|
|
//禁止父元素滑动 1.0.3升级
|
|
moveHandle() {}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.wanlshop-container {
|
|
position: relative;
|
|
.indexbgHeader{
|
|
position: absolute;
|
|
width:100%;
|
|
height:auto;
|
|
top:0;
|
|
left:0;
|
|
z-index:-1;
|
|
}
|
|
&__head {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background-size: 100% auto;
|
|
background-repeat: no-repeat;
|
|
.navigater {
|
|
height: 86rpx;
|
|
// padding-left: 25rpx;
|
|
padding-right: 25rpx;
|
|
/* #ifdef MP */
|
|
padding-right: 200rpx;
|
|
/* #endif */
|
|
.search {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
height: 66rpx;
|
|
border: 2rpx solid #fff;
|
|
.icon {
|
|
margin: 0 20rpx;
|
|
}
|
|
swiper {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-right: 10rpx;
|
|
swiper-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.toolbar {
|
|
color:#222222;
|
|
.scroll {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
&__item {
|
|
position: relative;
|
|
z-index: 2;
|
|
font-size: 28rpx;
|
|
display: inline-flex;
|
|
height: 58rpx;
|
|
align-items: center;
|
|
margin-right: 40rpx;
|
|
&.action {
|
|
position: relative;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
padding-bottom:10px;
|
|
&::after {
|
|
content: ' ';
|
|
// width: 68rpx;
|
|
width:100%;
|
|
height: 8rpx;
|
|
background: #EB6100;
|
|
border-radius: 4px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// height: 4rpx;
|
|
// width: 30rpx;
|
|
// border-radius: 6rpx;
|
|
// background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.category {
|
|
box-shadow: #eee -16rpx 0 16rpx -16rpx;
|
|
height: 58rpx;
|
|
font-size: 28rpx;
|
|
padding-left: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
&__main {
|
|
position: relative;
|
|
z-index: 99;
|
|
}
|
|
.WANL-MODAL {
|
|
.cu-modal {
|
|
&.top-modal {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
text-align: inherit;
|
|
.cu-dialog {
|
|
background: #fff;
|
|
border-radius: 0 0 18rpx 18rpx;
|
|
.category {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-auto-flow: row dense;
|
|
grid-gap: 16rpx;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 12rpx 0;
|
|
border: 2rpx solid transparent;
|
|
&.action {
|
|
background-color: transparent;
|
|
border-color: #f40;
|
|
color: #f40;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|