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.
 
 
 
 
 
huazhiyu/pages/home/home.vue

243 lines
5.9 KiB

<template>
<view class="page">
<view class="head-info">
<!-- 搜索 -->
<view class="head-search">
<navbar :title="'首页'" :isCenter="true" :back="true"></navbar>
<view class="icon-info" @click="onSkip('menu')">
<u-icon name="grid" size="26"></u-icon>
</view>
<view class="search" @click="onSearch">
<view class="icon">
<u-icon name="search" size="26"></u-icon>
</view>
<view class="hint">
<text class="max">请输入关键字搜索</text>
<text class="min">热门内容</text>
</view>
</view>
</view>
<!-- 分类列表 -->
</view>
<mescroll-body ref="mescrollRef"
@down="downCallback"
@up="upCallback"
:down="downOption"
:up="upOption"
:top="0">
<view class="main" v-show="classifyShow===0">
<!-- banner -->
<view class="banner">
<u-swiper :circular="true" :list="swiperList" previousMargin="30" nextMargin="30" :autoplay="true"></u-swiper>
</view>
<view class="devide"></view>
<view class="new-product">
<view class="product-title">
<view class="title">
<text>新品推荐</text>
</view>
</view>
<view class="goods-list">
<view class="list" v-for="(item,index) in recommend" :key="index" @click="onSkip('goods',item)">
<view class="pictrue">
<image :src="item"></image>
</view>
</view>
</view>
</view>
<view class="devide"></view>
<view class="new-product">
<view class="product-title">
<view class="title">
<text>甄选好物</text>
</view>
</view>
<image src="/static/image/x.png" @click="onSkip('goods','/static/image/x.png')" class="zenxuan" mode=""></image>
</view>
<view class="devide"></view>
<view class="new-product">
<view class="product-title">
<view class="title">
<text>商品推荐</text>
</view>
</view>
<image src="/static/image/mescroll-empty.png" class="empty" mode="widthFix"></image>
<view style="padding: 0rpx 0 20rpx 0;">
~空空如也~
</view>
</view>
</view>
</mescroll-body>
<ClassifyData v-show="classifyShow!=0"></ClassifyData>
<!-- tabbar -->
<TabBar :tabBarShow="0"></TabBar>
</view>
</template>
<script>
import navbar from '@/components/navbar.vue'
import TabBar from '../../components/TabBar/TabBar.vue';
import ClassifyData from '../../components/ClassifyData/ClassifyData.vue';
// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
components:{
TabBar,
ClassifyData,
navbar
},
data(){
return{
mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
downOption: {},
// 上拉加载的配置(可选, 绝大部分情况无需配置)
upOption: {
use: false
},
swiperList: [
'/static/image/b1.png',
'/static/image/b2.png',
'/static/image/b3.png'
],
slideNum: 0,
classifyShow: 0,
// 页面高度
pageHeight: 500,
recommend:[
'/static/image/v1.png',
'/static/image/v2.png',
'/static/image/v3.png',
'/static/image/v4.png',
]
}
},
onReady() {
uni.hideTabBar();
// #ifdef MP
uni.setNavigationBarTitle({
title: '首页',
})
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: 'rgb(221, 190, 127)',
})
// #endif
},
onLoad() {
// this.H5Login()
},
onPageScroll(e){
let scrollTop = e.scrollTop;
if(scrollTop > 0){
this.pageHeight = 210;
}else{
this.pageHeight = 500;
}
},
onReachBottom(){
console.log(12333);
},
methods:{
/*下拉刷新的回调, 有三种处理方式:*/
downCallback(){
this.mescroll.endSuccess();
},
/*上拉加载的回调*/
upCallback(page) {
setTimeout(() =>{
this.mescroll.endByPage(10, 20);
},2000)
},
/**
* 菜单导航滚动
*/
ScrollMenu(e){
let scrollLeft = e.target.scrollLeft;
const query = uni.createSelectorQuery().in(this);
query.select('.nav').boundingClientRect(data => {
let wid = e.target.scrollWidth - data.width - (data.left*2+5);
this.slideNum = (scrollLeft/wid*300) / 2;
}).exec();
},
/**
* 搜索点击
*/
onSearch(){
uni.navigateTo({url:'/pages/search/search'})
},
/**
* 跳转点击
* @param {String} type 跳转类型
*/
onSkip(type,item){
switch (type){
case 'menu':
uni.navigateTo({
url: '/pages/SearchGoodsList/SearchGoodsList'
})
break;
case 'inform':
break;
case 'goods':
uni.navigateTo({
url: '/pages/GoodsDetails/GoodsDetails?item='+item,
animationType: 'zoom-fade-out',
animationDuration: 200
})
break;
}
},
// getQueryString(name) {
// let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
// let r = window.location.search.substr(1).match(reg);
// if (r !== null) return unescape(r[2]);
// return null;
// },
// H5Login(){
// let pageUrl = window.location.href;
// let code =this.getQueryString('code');
// console.log(code,"lldd");
// let appid="wx5a2c9f7e82918b85"
// let redirect_uri = encodeURIComponent(pageUrl);
// // let redirect_uri = pageUrl;
// console.log(redirect_uri)
// let authUrl =
// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
// if (code) {
// uni.setStorageSync("code",code)
// } else {
// // window.location.href = authUrl;
// console.log("没有code")
// // return await Promise.reject("跳转授权");
// }
// }
}
};
</script>
<style scoped lang="scss">
@import 'home.scss';
</style>