903 lines
25 KiB
JavaScript
Executable File
903 lines
25 KiB
JavaScript
Executable File
import React, { Component } from 'react'
|
|
import Taro, { getCurrentInstance } from '@tarojs/taro'
|
|
import { View, Text, ScrollView, Picker, Video, SwiperItem, Swiper, Image } from '@tarojs/components'
|
|
import { SpAddress } from '@/components'
|
|
import { withPager, withBackToTop } from '@/hocs'
|
|
import { connect } from 'react-redux'
|
|
import { AtDrawer } from 'taro-ui'
|
|
import {
|
|
BackToTop,
|
|
Loading,
|
|
RecommendItem,
|
|
SearchBar,
|
|
SpNote,
|
|
FilterBar,
|
|
SpTabbar,
|
|
SpPage,
|
|
SpImage
|
|
} from '@/components'
|
|
import api from '@/api'
|
|
import { classNames, pickBy, isWeixin } from '@/utils'
|
|
import S from '@/spx'
|
|
|
|
import './list.scss'
|
|
|
|
@connect(({ colors }) => ({
|
|
colors: colors.current
|
|
}))
|
|
// @withPager
|
|
@withBackToTop
|
|
export default class RecommendList extends Component {
|
|
$instance = getCurrentInstance()
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
|
|
this.state = {
|
|
...this.state,
|
|
list: [],
|
|
query: null,
|
|
showDrawer: false,
|
|
selectColumn: {},
|
|
columnList: [],
|
|
info: {},
|
|
areaList: [],
|
|
multiIndex: [],
|
|
isShowSearch: false,
|
|
shareInfo: {},
|
|
isSpAddressOpened: false,
|
|
play: false,
|
|
windowWidth: 750,
|
|
page: {
|
|
isLoading: true
|
|
},
|
|
currentIndex: 0,
|
|
// swiperList: [
|
|
// {
|
|
// type: 'image',
|
|
// src: process.env.APP_IMAGE_CDN_NEW + '/index/22.jpg'
|
|
// },
|
|
// {
|
|
// type: 'image',
|
|
// src: process.env.APP_IMAGE_CDN_NEW + '/index/33.jpg'
|
|
// },
|
|
// // {
|
|
// // type: 'video',
|
|
// // src: 'https://espier-oss-cdn.oss-cn-shanghai.aliyuncs.com/default_project/wxAssets/index/video-1.mp4'
|
|
// // }
|
|
// ],
|
|
swiperList: [],
|
|
activeInfo: {}
|
|
}
|
|
}
|
|
|
|
componentDidMount () {
|
|
api.wx.shareSetting({ shareindex: 'planting' }).then((res) => {
|
|
this.setState({
|
|
shareInfo: res
|
|
})
|
|
})
|
|
}
|
|
|
|
componentDidShow () {
|
|
const params = this.$instance.router.params
|
|
if (params) {
|
|
const { id, name } = params
|
|
this.setState({
|
|
selectColumn: {
|
|
id,
|
|
name,
|
|
isChooseColumn: true
|
|
}
|
|
})
|
|
}
|
|
// Taro.showLoading({ title: '' })
|
|
// this.resetPage()
|
|
// this.setState({
|
|
// list: []
|
|
// })
|
|
setTimeout(() => {
|
|
// this.nextPage()
|
|
// Taro.hideLoading()
|
|
this.setState({
|
|
page: {
|
|
isLoading: false
|
|
}
|
|
})
|
|
}, 300)
|
|
// this.praiseNum()
|
|
// this.getActiveDetail()
|
|
}
|
|
|
|
onShareAppMessage () {
|
|
const res = this.state.shareInfo
|
|
const { userId } = Taro.getStorageSync('userinfo')
|
|
const query = userId ? `/pages/recommend/list?uid=${userId}` : '/pages/recommend/list'
|
|
return {
|
|
title: res.title,
|
|
imageUrl: res.imageUrl,
|
|
path: query
|
|
}
|
|
}
|
|
|
|
onShareTimeline () {
|
|
const res = this.state.shareInfo
|
|
const { userId } = Taro.getStorageSync('userinfo')
|
|
const query = userId ? `uid=${userId}` : ''
|
|
return {
|
|
title: res.title,
|
|
imageUrl: res.imageUrl,
|
|
query: query
|
|
}
|
|
}
|
|
|
|
getActiveDetail = async (id = 1) => {
|
|
const { status, activity_info = {}, total_count } = await api.user.registrationActivity({ activity_id: id })
|
|
this.setState({
|
|
page: {
|
|
isLoading: false,
|
|
},
|
|
activeInfo: {
|
|
...activity_info,
|
|
total_count,
|
|
status
|
|
},
|
|
swiperList: activity_info.pics.map(item => ({
|
|
type: 'image',
|
|
src: item
|
|
}))
|
|
})
|
|
}
|
|
|
|
async fetch (params) {
|
|
const { page_no: page, page_size: pageSize } = params
|
|
const { columnList, areaList } = this.state
|
|
let { selectColumn } = this.state
|
|
const article_query = {
|
|
...this.state.query,
|
|
article_type: 'bring',
|
|
page,
|
|
pageSize,
|
|
category_id: selectColumn.id
|
|
}
|
|
|
|
if (columnList.length === 0) {
|
|
const columns = await api.article.columnList()
|
|
let clist = pickBy(columns, {
|
|
name: 'category_name',
|
|
id: 'category_id'
|
|
})
|
|
let defaultItem = {}
|
|
if (!selectColumn.id) {
|
|
defaultItem = { id: '', name: '全部', isChooseColumn: true }
|
|
} else {
|
|
defaultItem = { id: '', name: '全部', isChooseColumn: false }
|
|
clist.map((item) => {
|
|
if (item.id === selectColumn.id) {
|
|
item.isChooseColumn = true
|
|
} else {
|
|
item.isChooseColumn = false
|
|
}
|
|
})
|
|
}
|
|
selectColumn = Object.assign({}, defaultItem)
|
|
clist.unshift(defaultItem)
|
|
this.setState({
|
|
columnList: clist
|
|
})
|
|
}
|
|
|
|
const {
|
|
list,
|
|
total_count: total,
|
|
province_list
|
|
} = S.getAuthToken()
|
|
? await api.article.authList(article_query)
|
|
: await api.article.list(article_query)
|
|
|
|
if (areaList.length === 0) {
|
|
let res = await api.member.areaList()
|
|
let regions = []
|
|
province_list.map((item) => {
|
|
let match = res.find((area) => item == area.id)
|
|
if (match) {
|
|
regions.push(match)
|
|
}
|
|
})
|
|
const addList = pickBy(regions, {
|
|
label: 'label',
|
|
id: 'id',
|
|
children: 'children'
|
|
})
|
|
this.addList = addList
|
|
let arrProvice = []
|
|
let arrCity = []
|
|
let arrCounty = []
|
|
|
|
addList.map((item, index) => {
|
|
arrProvice.push(item.label)
|
|
if (index === 0) {
|
|
item.children.map((c_item, c_index) => {
|
|
arrCity.push(c_item.label)
|
|
if (c_index === 0) {
|
|
c_item.children.map((cny_item) => {
|
|
arrCounty.push(cny_item.label)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.setState({
|
|
areaList: [arrProvice, arrCity, arrCounty]
|
|
})
|
|
}
|
|
|
|
const nList = pickBy(list, {
|
|
img: 'image_url',
|
|
item_id: 'article_id',
|
|
title: 'title',
|
|
author: 'author',
|
|
summary: 'summary',
|
|
head_portrait: 'head_portrait',
|
|
isPraise: 'isPraise',
|
|
articlePraiseNum: 'articlePraiseNum.count'
|
|
})
|
|
|
|
nList.map((item) => {
|
|
if (!item.articlePraiseNum) {
|
|
item.articlePraiseNum = 0
|
|
}
|
|
})
|
|
|
|
this.setState({
|
|
list: [...this.state.list, ...nList]
|
|
})
|
|
|
|
return {
|
|
total
|
|
}
|
|
}
|
|
|
|
handleClickItem = (item) => {
|
|
const url = `/subpage/pages/recommend/detail?id=${item.item_id}`
|
|
Taro.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
|
|
handleConfirm = (val) => {
|
|
this.setState(
|
|
{
|
|
showDrawer: false,
|
|
query: {
|
|
showDrawer: false,
|
|
...this.state.query,
|
|
title: val
|
|
}
|
|
},
|
|
() => {
|
|
this.resetPage()
|
|
this.setState(
|
|
{
|
|
list: []
|
|
},
|
|
() => {
|
|
this.nextPage()
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
|
|
handleClickFilter = () => {
|
|
this.setState({
|
|
showDrawer: true
|
|
})
|
|
}
|
|
|
|
handleClickParmas = (id) => {
|
|
let { columnList, selectColumn } = this.state
|
|
columnList.map((item) => {
|
|
if (item.id === id) {
|
|
item.isChooseColumn = true
|
|
selectColumn = item
|
|
} else {
|
|
item.isChooseColumn = false
|
|
}
|
|
})
|
|
this.setState({
|
|
columnList,
|
|
selectColumn
|
|
})
|
|
}
|
|
handleRegionRefresh = (e) => {
|
|
e.stopPropagation()
|
|
this.resetPage()
|
|
let { query } = this.state
|
|
Object.assign(query, { regions_id: [], province: '', city: '', area: '' })
|
|
this.setState(
|
|
{
|
|
multiIndex: [],
|
|
areaList: [],
|
|
list: [],
|
|
info: { city: '', county: '', province: '' },
|
|
query
|
|
},
|
|
() => {
|
|
this.nextPage()
|
|
}
|
|
)
|
|
}
|
|
|
|
handleSearchOn = () => {
|
|
this.setState({
|
|
isShowSearch: true
|
|
})
|
|
}
|
|
|
|
handleSearchOff = () => {
|
|
this.setState({
|
|
isShowSearch: false
|
|
})
|
|
}
|
|
|
|
handleSearchChange = (val) => {
|
|
this.setState({
|
|
query: {
|
|
...this.state.query,
|
|
title: val
|
|
}
|
|
})
|
|
}
|
|
|
|
handleSearchClear = () => {
|
|
this.setState(
|
|
{
|
|
isShowSearch: false,
|
|
query: {
|
|
...this.state.query,
|
|
title: ''
|
|
}
|
|
},
|
|
() => {
|
|
this.resetPage()
|
|
this.setState(
|
|
{
|
|
list: []
|
|
},
|
|
() => {
|
|
this.nextPage()
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
|
|
handleClickSearchParams = (type) => {
|
|
this.setState({
|
|
showDrawer: false
|
|
})
|
|
if (type === 'reset') {
|
|
const { paramsList, selectParams } = this.state
|
|
console.log('handleClickSearchParams:paramsList', paramsList)
|
|
console.log('handleClickSearchParams:selectParams', selectParams)
|
|
paramsList && paramsList.map((item) => {
|
|
item.attribute_values.map((v_item) => {
|
|
if (v_item.attribute_value_id === '') {
|
|
v_item.isChooseParams = true
|
|
} else {
|
|
v_item.isChooseParams = false
|
|
}
|
|
})
|
|
})
|
|
selectParams && selectParams.map((item) => {
|
|
item.attribute_value_id = ''
|
|
})
|
|
this.setState({
|
|
paramsList,
|
|
selectParams,
|
|
})
|
|
this.resetColumn()
|
|
}
|
|
|
|
this.resetPage()
|
|
this.setState(
|
|
{
|
|
list: []
|
|
},
|
|
() => {
|
|
this.nextPage()
|
|
}
|
|
)
|
|
}
|
|
|
|
resetColumn () {
|
|
this.setState({
|
|
selectColumn: Object.assign({}, { id: '', name: '全部', isChooseColumn: true }),
|
|
columnList: this.state.columnList.map((d, idx) => {
|
|
d.isChooseColumn = idx == 0 ? true : false
|
|
return d
|
|
})
|
|
})
|
|
}
|
|
|
|
// 选定开户地区
|
|
handleClickPicker = () => {
|
|
let arrProvice = []
|
|
let arrCity = []
|
|
let arrCounty = []
|
|
if (this.addList) {
|
|
this.addList.map((item, index) => {
|
|
arrProvice.push(item.label)
|
|
if (index === 0) {
|
|
item.children.map((c_item, c_index) => {
|
|
arrCity.push(c_item.label)
|
|
if (c_index === 0) {
|
|
c_item.children.map((cny_item) => {
|
|
arrCounty.push(cny_item.label)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.setState({
|
|
showDrawer: false,
|
|
areaList: [arrProvice, arrCity, arrCounty],
|
|
multiIndex: [0, 0, 0]
|
|
})
|
|
}
|
|
}
|
|
|
|
bindMultiPickerChange = async () => {
|
|
const { info } = this.state
|
|
// this.addList.map((item, index) => {
|
|
// if (index === e.detail.value[0]) {
|
|
// info.province = item.label
|
|
// item.children.map((s_item, sIndex) => {
|
|
// if (sIndex === e.detail.value[1]) {
|
|
// info.city = s_item.label
|
|
// s_item.children.map((th_item, thIndex) => {
|
|
// if (thIndex === e.detail.value[2]) {
|
|
// info.county = th_item.label
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
|
|
const { province, city, area } = info
|
|
this.setState(
|
|
{
|
|
query: {
|
|
...this.state.query,
|
|
province,
|
|
city
|
|
// area
|
|
}
|
|
},
|
|
() => {
|
|
this.resetPage()
|
|
this.setState(
|
|
{
|
|
list: []
|
|
},
|
|
() => {
|
|
setTimeout(() => {
|
|
this.nextPage()
|
|
}, 0)
|
|
}
|
|
)
|
|
}
|
|
)
|
|
}
|
|
|
|
bindMultiPickerColumnChange = (e) => {
|
|
const { areaList, multiIndex } = this.state
|
|
if (e.detail.column === 0) {
|
|
this.setState({
|
|
multiIndex: [e.detail.value, 0, 0]
|
|
})
|
|
this.addList.map((item, index) => {
|
|
if (index === e.detail.value) {
|
|
let arrCity = []
|
|
let arrCounty = []
|
|
item.children.map((c_item, c_index) => {
|
|
arrCity.push(c_item.label)
|
|
if (c_index === 0) {
|
|
c_item.children.map((cny_item) => {
|
|
arrCounty.push(cny_item.label)
|
|
})
|
|
}
|
|
})
|
|
areaList[1] = arrCity
|
|
areaList[2] = arrCounty
|
|
this.setState({ areaList })
|
|
}
|
|
})
|
|
} else if (e.detail.column === 1) {
|
|
multiIndex[1] = e.detail.value
|
|
multiIndex[2] = 0
|
|
this.setState(
|
|
{
|
|
multiIndex
|
|
},
|
|
() => {
|
|
this.addList[multiIndex[0]].children.map((c_item, c_index) => {
|
|
if (c_index === e.detail.value) {
|
|
let arrCounty = []
|
|
c_item.children.map((cny_item) => {
|
|
arrCounty.push(cny_item.label)
|
|
})
|
|
areaList[2] = arrCounty
|
|
this.setState({ areaList })
|
|
}
|
|
})
|
|
}
|
|
)
|
|
} else {
|
|
multiIndex[2] = e.detail.value
|
|
this.setState({
|
|
multiIndex
|
|
})
|
|
}
|
|
}
|
|
|
|
handleClose = (e) => {
|
|
this.setState({
|
|
showDrawer: false
|
|
})
|
|
}
|
|
|
|
handleClickCloseSpAddress = () => {
|
|
this.setState({
|
|
isSpAddressOpened: false
|
|
})
|
|
}
|
|
|
|
handleClickOpenSpAddress = () => {
|
|
this.setState({
|
|
isSpAddressOpened: true
|
|
})
|
|
}
|
|
|
|
|
|
onPickerChange = (selectValue) => {
|
|
const info = {
|
|
province: selectValue[0].label,
|
|
city: selectValue[1].label,
|
|
// area: selectValue[2].label
|
|
}
|
|
this.setState({
|
|
info
|
|
}, () => {
|
|
this.bindMultiPickerChange()
|
|
})
|
|
}
|
|
|
|
handleVideoClick = (play) => {
|
|
let video
|
|
if (isWeixin) {
|
|
video = Taro.createVideoContext('recommend-video')
|
|
} else if (isWeb) {
|
|
video = document.getElementById('recommend-video')
|
|
}
|
|
|
|
if (!video) {
|
|
return
|
|
}
|
|
|
|
if (play) {
|
|
setTimeout(() => {
|
|
video.play()
|
|
}, 200)
|
|
} else {
|
|
isWeixin ? video.stop() : video.pause()
|
|
}
|
|
this.setState({
|
|
play
|
|
})
|
|
}
|
|
onSwiperChange = (e) => {
|
|
const { current } = e.detail
|
|
this.setState({
|
|
currentIndex: current
|
|
})
|
|
}
|
|
|
|
handleApply = () => {
|
|
const { activeInfo = {} } = this.state
|
|
let url = '/pages/recommend/detail?id='
|
|
if (activeInfo.total_count) {
|
|
url = `/pages/recommend/status?id=`
|
|
}
|
|
Taro.navigateTo({
|
|
url: url + activeInfo.activity_id
|
|
})
|
|
}
|
|
handleBackToIndex = () => {
|
|
Taro.redirectTo({
|
|
url: '/pages/index'
|
|
})
|
|
}
|
|
|
|
render () {
|
|
const {
|
|
list,
|
|
showBackToTop,
|
|
scrollTop,
|
|
page,
|
|
showDrawer,
|
|
info,
|
|
columnList,
|
|
selectColumn,
|
|
multiIndex,
|
|
areaList,
|
|
query,
|
|
isShowSearch,
|
|
isSpAddressOpened,
|
|
play,
|
|
swiperList,
|
|
currentIndex,
|
|
activeInfo
|
|
} = this.state
|
|
const { colors } = this.props
|
|
let address = info.province + info.city
|
|
const windowWidth = Taro.getSystemInfoSync().windowWidth
|
|
const height = windowWidth * 9 / 17
|
|
|
|
return (
|
|
<SpPage renderFooter={<SpTabbar />} loading={page.isLoading} className='has-nav' title="" isBlack >
|
|
<View className='page-recommend-list'>
|
|
{false && <>
|
|
<View className='recommend-list__toolbar'>
|
|
<View
|
|
className={`recommend-list__search ${query && query.title && isShowSearch ? 'on-search' : null
|
|
}`}
|
|
>
|
|
<SearchBar
|
|
showDailog={false}
|
|
keyword={query ? query.title : ''}
|
|
onFocus={this.handleSearchOn}
|
|
onChange={this.handleSearchChange}
|
|
onClear={this.handleSearchClear}
|
|
onCancel={this.handleSearchOff}
|
|
onConfirm={this.handleConfirm.bind(this)}
|
|
/>
|
|
</View>
|
|
<FilterBar className='recommend-list__tabs'>
|
|
<View className='filter-bar__item' onClick={this.handleClickFilter.bind(this)}>
|
|
<View className='iconfont icon-menu'></View>
|
|
<Text>{selectColumn.name || '栏目'}</Text>
|
|
</View>
|
|
<View className='filter-bar__item region-picker'>
|
|
{/* <Picker
|
|
mode='multiSelector'
|
|
onClick={this.handleClickPicker}
|
|
onChange={this.bindMultiPickerChange}
|
|
onColumnChange={this.bindMultiPickerColumnChange}
|
|
value={multiIndex}
|
|
range={areaList}
|
|
>
|
|
<View>
|
|
<View className='iconfont icon-periscope'></View>
|
|
<Text>{address || '地区'}</Text>
|
|
</View>
|
|
</Picker> */}
|
|
<View onClick={this.handleClickOpenSpAddress.bind(this)}>
|
|
<View className='iconfont icon-periscope'></View>
|
|
<Text>{address || '地区'}</Text>
|
|
</View>
|
|
<SpAddress isOpened={isSpAddressOpened} onClose={this.handleClickCloseSpAddress} onChange={this.onPickerChange} />
|
|
|
|
{address ? (
|
|
<View
|
|
className='zoom-btn icon-close iconfont'
|
|
onClick={this.handleRegionRefresh.bind(this)}
|
|
></View>
|
|
// <Text className='icon-close' onClick={this.handleRegionRefresh.bind(this)}>x</Text>
|
|
) : (
|
|
''
|
|
)}
|
|
</View>
|
|
</FilterBar>
|
|
</View>
|
|
<AtDrawer
|
|
show={showDrawer}
|
|
right
|
|
mask
|
|
width={`${Taro.pxTransform(570)}`}
|
|
onClose={this.handleClose}
|
|
>
|
|
<View className='drawer-item'>
|
|
<View className='drawer-item__options'>
|
|
{columnList.map((item, index) => {
|
|
return (
|
|
<View
|
|
className={classNames(
|
|
'drawer-item__options__item',
|
|
item.isChooseColumn ? 'drawer-item__options__checked' : ''
|
|
)}
|
|
// className='drawer-item__options__item'
|
|
style={
|
|
item.isChooseColumn
|
|
? {
|
|
background: (colors && colors.data && colors.data[0].primary) || null
|
|
}
|
|
: {}
|
|
}
|
|
key={`${index}1`}
|
|
onClick={this.handleClickParmas.bind(this, item.id)}
|
|
>
|
|
{item.name}
|
|
</View>
|
|
)
|
|
})}
|
|
<View className='drawer-item__options__none'> </View>
|
|
<View className='drawer-item__options__none'> </View>
|
|
<View className='drawer-item__options__none'> </View>
|
|
</View>
|
|
</View>
|
|
<View className='drawer-footer'>
|
|
<Text
|
|
className='drawer-footer__btn'
|
|
onClick={this.handleClickSearchParams.bind(this, 'reset')}
|
|
>
|
|
重置
|
|
</Text>
|
|
<Text
|
|
className='drawer-footer__btn drawer-footer__btn_active'
|
|
style={{ background: (colors && colors.data && colors.data[0].primary) || null }}
|
|
onClick={this.handleClickSearchParams.bind(this, 'submit')}
|
|
>
|
|
确定
|
|
</Text>
|
|
</View>
|
|
</AtDrawer>
|
|
|
|
<ScrollView
|
|
className='recommend-list__scroll'
|
|
scrollY
|
|
scrollTop={scrollTop}
|
|
scrollWithAnimation
|
|
onScroll={this.handleScroll}
|
|
onScrollToLower={this.nextPage}
|
|
>
|
|
<View className='recommend-list recommend-list__type-grid'>
|
|
{list.map((item) => {
|
|
return (
|
|
<View className='recommend-list__item'>
|
|
<RecommendItem
|
|
key={item.item_id}
|
|
info={item}
|
|
onClick={() => this.handleClickItem(item)}
|
|
/>
|
|
</View>
|
|
)
|
|
})}
|
|
</View>
|
|
{page.isLoading ? <Loading>正在加载...</Loading> : null}
|
|
{!page.isLoading && !page.hasNext && !list.length && (
|
|
<SpNote img='trades_empty.png'>暂无数据~</SpNote>
|
|
)}
|
|
</ScrollView>
|
|
</>}
|
|
|
|
{/* 鞋床故事 */}
|
|
{page.isLoading ? <Loading></Loading> :
|
|
<View className="recommend-content">
|
|
<Video
|
|
id="recommend-video"
|
|
src={`${process.env.APP_IMAGE_CDN_NEW}/recommend/162S.mp4`}
|
|
poster={`${process.env.APP_IMAGE_CDN_NEW}/recommend/poster.jpg`}
|
|
initialTime={0}
|
|
controls={play}
|
|
autoplay={false}
|
|
loop={false}
|
|
// muted={true}
|
|
showProgress={true}
|
|
showFullscreenBtn={false}
|
|
showPlayBtn={true}
|
|
showCenterPlayBtn={false}
|
|
enableProgressGesture={true}
|
|
showMuteBtn
|
|
objectFit="cover"
|
|
style={{ width: "100%", height: "400rpx", marginTop: "20rpx" }}
|
|
onPlay={() => {
|
|
|
|
}}
|
|
onEnded={() => {
|
|
|
|
}}
|
|
onClick={() => {
|
|
!play && this.handleVideoClick(true)
|
|
}}
|
|
/>
|
|
<View className="content-item">
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/03.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/02.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/04.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/05.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/06.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/07.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/08.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
<SpImage height={height * 2} width={windowWidth * 2} mode="aspectFill" src='recommend/09.jpg' isShowMenuByLongpress={false} lazyLoad isNew />
|
|
</View>
|
|
<View className="content-btn" onClick={this.handleBackToIndex} >
|
|
返回首页
|
|
</View>
|
|
</View>
|
|
}
|
|
|
|
{/* 活动部分 */}
|
|
{/* {page.isLoading ? <Loading></Loading> :
|
|
<View className="active-content">
|
|
<Swiper
|
|
className={classNames('swiper')}
|
|
indicatorColor="#999"
|
|
indicatorActiveColor="#333"
|
|
current={currentIndex}
|
|
interval={5000}
|
|
duration={800}
|
|
// indicatorDots
|
|
circular
|
|
autoplay={true}
|
|
onChange={this.onSwiperChange}
|
|
>
|
|
{swiperList.map((item, index) => (
|
|
<SwiperItem key={index} className="" style={{ height: "100%" }}>
|
|
{item.type === "image" && (
|
|
<Image
|
|
src={item.src}
|
|
style={{ width: "100%", height: "100%", objectPosition: "center" }}
|
|
mode={'aspectFill'}
|
|
showMenuByLongpress={false}
|
|
/>
|
|
)}
|
|
{item.type === "video" && (
|
|
<Video
|
|
id="video"
|
|
src={item.src}
|
|
poster={item.poster}
|
|
initialTime={0}
|
|
controls={false}
|
|
autoplay={true}
|
|
loop={true}
|
|
muted={true}
|
|
showProgress={false}
|
|
showFullscreenBtn={false}
|
|
showPlayBtn={false}
|
|
showCenterPlayBtn={false}
|
|
enableProgressGesture={false}
|
|
objectFit="cover"
|
|
style={{ width: "100%", height: "100%" }}
|
|
onPlay={() => {
|
|
}}
|
|
onEnded={() => {
|
|
}}
|
|
/>
|
|
)}
|
|
</SwiperItem>
|
|
))}
|
|
</Swiper>
|
|
<View className="item-btns">
|
|
<View className="item-tit">{activeInfo.activity_name}</View>
|
|
{activeInfo.end_time * 1000 >= Date.now() && <View className="item-btn" onClick={this.handleApply}>
|
|
<View className="item-btn-txt">{activeInfo.total_count ? '已报名' : '活动申请'}</View>
|
|
</View>}
|
|
</View>
|
|
<View className='spot-pagination'>
|
|
{swiperList.map((_, index) => (
|
|
<View key={index} className={'spot-pagination-bullet ' + ((currentIndex == index) ? 'spot-pagination-bullet-active' : "")} style={{ width: 1 / swiperList.length * 100 + '%' }}></View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
} */}
|
|
<BackToTop show={showBackToTop} onClick={this.scrollBackToTop} />
|
|
|
|
</View>
|
|
</SpPage>
|
|
)
|
|
}
|
|
}
|