index.js
3.21 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, {PureComponent} from 'react';
import './index.scss'
import {guochaoListApi} from '../../api/guochaoApi'
import {getEnv, linkToMiniApp} from "../../../../../common/utils";
import { Link } from 'react-router-dom'
import wx from "weixin-js-sdk";
import config from "../../config";
export default class top40 extends PureComponent {
constructor(props) {
super(props);
this.state = {
env:'',
data: [],
display:false
}
this.init();
this.scrollTop = this.scrollTop.bind(this);
document.title = '潮流无界';
}
async init() {
let list = await guochaoListApi({});
if (list.result)
this.setState({
data: list.data
})
this.wxReady();
}
componentDidMount= ()=> {
this.wxReady();
window.addEventListener('scroll',this.handleScroll);
};
componentWillUnmount= ()=> {
window.removeEventListener('scroll',this.handleScroll);
};
scrollTop= ()=> {
let _this = this;
let timer = setTimeout(function() {
window.scrollBy(0, -100);
if (window.pageYOffset <= 0) {
clearTimeout(timer);
}else{
_this.scrollTop();
}
}, 20);
};
handleScroll=()=> {
let _this = this;
if (window.pageYOffset >100) {
_this.setState({ display: true });
}else {
_this.setState({ display: false });
}
};
wxReady= async ()=> {
let envFlag = await getEnv();
if (!envFlag && navigator.userAgent.match(/miniProgram/i)) {
this.setState({env:"miniprogram"});
envFlag = true;
}
if (envFlag) {
if (wx.miniProgram.postMessage) {
wx.miniProgram.postMessage({
data: {
title: '潮流无界'
}
});
}
this.setState({env:"miniprogram"});
}
};
render() {
let {data ,env} = this.state;
let list = (data, select) =>{
let arr = [];
if(data.length){
data.map((value,index) =>{
if(value.place == select){
arr.push(<a className='item'
data-url={`/pages/goodsList/brandStore?shop_id=${value.shop_id}&shop_name=${value.shop_name}`} onClick={linkToMiniApp} data-type="miniApp"
href={env === "miniprogram" ? "javascript:void(0)" : value.url}
key={value.id}><img src={'https:' + value.logo}/></a>)
}
})
}
return arr;
}
return (
<div className='wrap'>
<Link to={config.routerPath+'/guochao.html'} className='back'></Link>
<div onClick={this.scrollTop} className={this.state.display?'toTop':''}></div>
<div className='up'>
{list(data,0)}
</div>
<div className='down'>
{list(data,1)}
</div>
</div>
)
}
}