|
@@ -0,0 +1,265 @@
|
|
|
+<template>
|
|
|
+ <div class="scroll-touch">
|
|
|
+ <scroll-view
|
|
|
+ :scroll-left="scrollleft"
|
|
|
+ id="fixd"
|
|
|
+ :class="['section-area','fix']"
|
|
|
+ scroll-x="true"
|
|
|
+ style="width: 100%;white-space:nowrap;background-color:#fff; border-bottom: 1px solid #ebebeb; box-sizing: border-box;"
|
|
|
+ >
|
|
|
+ <div class="nav">
|
|
|
+ <div
|
|
|
+ :id="'navitem' +index"
|
|
|
+ @click="tabClick(index)"
|
|
|
+ v-for="(item,index) in nav"
|
|
|
+ :key="index"
|
|
|
+ class="nav_item"
|
|
|
+ :class="activeIndex == index? 'active':''"
|
|
|
+ >{{item.name}}</div>
|
|
|
+ </div>
|
|
|
+ </scroll-view>
|
|
|
+ <swiper
|
|
|
+ :style="['height:100vh']"
|
|
|
+ class="swiper"
|
|
|
+ duration="200"
|
|
|
+ :current="activeIndex"
|
|
|
+ @change="swiperChange"
|
|
|
+ >
|
|
|
+ <div v-for="(swi,s) in nav" :key="s">
|
|
|
+ <swiper-item>
|
|
|
+ <div class="content scroll-touch" v-if="activeIndex == s">
|
|
|
+ <!-- {{swi.name}} -->
|
|
|
+ <div class="content-ad">
|
|
|
+ <!-- banner广告 -->
|
|
|
+ <ad unit-id="adunit-7496c51cbc82905d" ad-intervals="30"></ad>
|
|
|
+ </div>
|
|
|
+ <wsh-list-wrap :channelId="swi.channel_id" />
|
|
|
+ </div>
|
|
|
+ </swiper-item>
|
|
|
+ </div>
|
|
|
+ </swiper>
|
|
|
+ <!-- <div class="clude-fixed" @click="cludeHandle" v-if="cludeShow">赚金币</div> -->
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import {get} from '@/utils/request'
|
|
|
+import ListWrap from '@/components/list-wrap'
|
|
|
+import config from '@/utils/config'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ 'wsh-list-wrap': ListWrap
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ nav: [],
|
|
|
+ top: 0, // 导航栏初始到屏幕顶部高度
|
|
|
+ activeIndex: 0, // 选项卡及swiper位置
|
|
|
+ scrollleft: 0, // scroll-view 横向滚动条位置
|
|
|
+ windowWidth: 0, // 窗口宽度
|
|
|
+ swiperHeight: 2000, // 此处为swiper高度,
|
|
|
+ cludeShow: true,
|
|
|
+ scrollTimer: '',
|
|
|
+ homeAd: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.login()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getUserInfo () {
|
|
|
+ await wx.request({
|
|
|
+ method: 'post',
|
|
|
+ url: config.userUrl,
|
|
|
+ data: {
|
|
|
+ appid: config.appId,
|
|
|
+ mp_token: wx.getStorageSync('mpToken'),
|
|
|
+ user_id: wx.getStorageSync('userInfo').user_id
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ wx.setStorageSync('userInfo', res.data.data.user_info)
|
|
|
+ this.userInfo = wx.getStorageSync('userInfo')
|
|
|
+ } else {
|
|
|
+ wx.clearStorage()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ login () {
|
|
|
+ let user = wx.getStorageSync('userInfo')
|
|
|
+ if (!user) {
|
|
|
+ var that = this
|
|
|
+ wx.login({
|
|
|
+ success (res) {
|
|
|
+ if (res.code) {
|
|
|
+ console.log({
|
|
|
+ 'res': res,
|
|
|
+ 'config': config.appId
|
|
|
+ })
|
|
|
+ // 这里可以把code传给后台,后台用此获取openid及session_key
|
|
|
+ that.loginHandle(res.code)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.getUserInfo()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ loginHandle (code) {
|
|
|
+ // console.log(config.loginUrl)
|
|
|
+ wx.request({
|
|
|
+ method: 'post',
|
|
|
+ url: config.loginUrl,
|
|
|
+ data: {
|
|
|
+ code: code,
|
|
|
+ appid: config.appId
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ // console.log(res)
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ wx.setStorageSync('mpToken', res.data.data.mp_token)
|
|
|
+ wx.setStorageSync('sessionKey', res.data.data.session_key)
|
|
|
+ wx.setStorageSync('userInfo', res.data.data.user_info)
|
|
|
+ this.userInfo = wx.getStorageSync('userInfo')
|
|
|
+ } else {
|
|
|
+ wx.clearStorage()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cludeHandle () {
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/banner/main'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async getCategoryNav () {
|
|
|
+ const params = {
|
|
|
+ key_name: 'channels-huanlian'
|
|
|
+ }
|
|
|
+ let navData = await get('/v1/common/web-config', params)
|
|
|
+ this.nav = navData.list
|
|
|
+ },
|
|
|
+ tabClick (e) {
|
|
|
+ this.activeIndex = e
|
|
|
+ },
|
|
|
+ swiperChange (e) {
|
|
|
+ this.activeIndex = e.mp.detail.current
|
|
|
+ let that = this
|
|
|
+ const query = wx.createSelectorQuery()
|
|
|
+ query.select('#navitem' + this.activeIndex).boundingClientRect()
|
|
|
+ query.exec(function (res) {
|
|
|
+ if (res[0].right > that.windowWidth) {
|
|
|
+ that.scrollleft = res[0].right
|
|
|
+ } else if (res[0].left < 0) {
|
|
|
+ that.scrollleft = res[0].left
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getCategoryNav()
|
|
|
+ },
|
|
|
+ onLoad () {
|
|
|
+ let that = this
|
|
|
+ let res = wx.getSystemInfoSync()
|
|
|
+ that.windowWidth = res.windowWidth
|
|
|
+ const query = wx.createSelectorQuery()
|
|
|
+ query.select('#fixd', '.nav').boundingClientRect()
|
|
|
+ query.exec(function (res) {
|
|
|
+ that.top = res[0].top
|
|
|
+ })
|
|
|
+ if (wx.createInterstitialAd) {
|
|
|
+ this.homeAd = wx.createInterstitialAd({
|
|
|
+ adUnitId: 'adunit-5ecedc2dc28ef414'
|
|
|
+ })
|
|
|
+ this.homeAd.onLoad(() => {
|
|
|
+ console.log('插屏 广告加载成功')
|
|
|
+ })
|
|
|
+ this.homeAd.onError((err) => {
|
|
|
+ console.log('onError event emit', err)
|
|
|
+ })
|
|
|
+ // this.homeAd.onClose(() => {})
|
|
|
+ }
|
|
|
+ if (this.homeAd) {
|
|
|
+ const self = this
|
|
|
+ setTimeout(() => {
|
|
|
+ self.homeAd.show().catch((err) => {
|
|
|
+ console.error('errer', err)
|
|
|
+ })
|
|
|
+ }, 10000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll (e) {
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+// .section-area ::-webkit-scrollbar {
|
|
|
+// width: 0;
|
|
|
+// height: 0;
|
|
|
+// color: transparent;
|
|
|
+// }
|
|
|
+.scroll-touch {
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+}
|
|
|
+.nav {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .nav_item {
|
|
|
+ flex: auto;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #f34b50;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content {
|
|
|
+ background-color: #fff;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .content-ad {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.fix {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 10;
|
|
|
+ // animation: move 0.1s linear;
|
|
|
+}
|
|
|
+.swiper {
|
|
|
+ position: relative;
|
|
|
+ top: 50px;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+@keyframes move {
|
|
|
+ from {
|
|
|
+ opacity: 0.7;
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+.clude-fixed {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ bottom: 17%;
|
|
|
+ right: 2%;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: yellow;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 50px;
|
|
|
+}
|
|
|
+</style>
|