|
|
|
<template>
|
|
|
|
<view class="page">
|
|
|
|
<view class="head-info">
|
|
|
|
|
|
|
|
<!-- 搜索 -->
|
|
|
|
<view class="head-search">
|
|
|
|
<navbar :title="'首页'" :isCenter="true" :back="false"></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>
|