|
-
- import React, { Component } from 'react';
- import {
- Platform,
- StyleSheet,
- Text,
- View,
- Image,
- ImageBackground,
- PixelRatio,
- NativeModules,
- } from 'react-native';
-
-
-
- //引用插件
- import Package from './package.json'
- import HttpUtils from './HttpUtils.js';
- import CodePush from "react-native-code-push";
- import DeviceInfo from "react-native-device-info";
- import * as Animatable from 'react-native-animatable';
- import Swiper from 'react-native-swiper';
- import Carousel from 'react-native-snap-carousel';
- // import {BoxShadow} from 'react-native-shadow';
- import StarRatingBar from 'react-native-star-rating-view/StarRatingBar';
-
- var testMac = 'FF:FF:FF:FF:FF:FF'
- var curAdIndex = 0;
- var errorMsg = {
- ERR_MAC_GET:'设备编号获取错误',
- ERR_START_AD:'广告播放系统错误',
- ERR_DATA_GET:'广告数据获取错误',
- ERR_HEARTBEAT:'设备心跳数据错误',
- ERR_NO_DATA:'暂无优惠信息'
- }
- var animationThemes = [
- // 滑入
- {
- first:"slideInDown",
- second:"slideInLeft",
- third:"slideInRight"
- },
- // 放大
- {
- first:"zoomInDown",
- second:"zoomInLeft",
- third:"zoomInRight"
- },
- // 翻转
- {
- first:"flipInX",
- second:"flipInY",
- third:"flipInX"
- },
- // 弹出
- {
- first:"bounceInDown",
- second:"bounceInLeft",
- third:"bounceInRight"
- }
- ]
- const shadowOpt = {
- width: 800/PixelRatio.get(),
- height: 240/PixelRatio.get(),
- color:"#000",
- border:2,
- radius:3,
- opacity:0.5,
- x:2,
- y:3,
- style:{marginVertical:5}
- }
-
- var curTimer = null;
- var curRankTimer = null;
-
- var hbRequestCount
- var getAdDataCount
- var pageChangeCount
-
- var adDataList = [];
- var adDataBgList = [];
-
- var heartConfig = {
- heartbeatInterval:300,
- dataRefreshInterval:3600,
- pageChangeInterval:10,
- }
-
- var requestFailedCount = 0;
- var versionInfo = '';
-
-
- let codePushOptions = {
- //设置检查更新的频率
- //ON_APP_RESUME APP恢复到前台的时候
- //ON_APP_START APP开启的时候
- //MANUAL 手动检查
- checkFrequency : CodePush.CheckFrequency.ON_APP_START
- };
-
- export default class MyPage extends Component {
-
- constructor(props) {
- super(props);
- this.state = {
- baseInfo: null,
- contentItem0:null,
- contentItem1:null,
- contentItem2:null,
- animationTheme:animationThemes[0],
- contentDisplayStatus:false,
- syncMessage: "初始化..." ,
- errorMessage: '加载中...',
- progress: {
- receivedBytes:0,
- totalBytes:0
- },
- updating:true,
- macAddress: '',
- versionInfo:'未知',
- adType: 0,
- curAdType02Index: 0, //广告图index
- coverImgUrl: '',
- previewImg: '',
- curImgState: false,
- merchantRankList: [],
- hasRankList: true,// 有排名列表
- openRankList: false,//开启播放排名
-
- };
-
- this.setAdSwiperItemDom = this.setAdSwiperItemDom.bind(this);
- /* this.codePushUpdate = this.codePushUpdate.bind(this);
- this.startAd = this.startAd.bind(this);
- this.showErrMsg = this.showErrMsg.bind(this); */
- }
-
- componentDidMount() {
- this.codePushUpdate();
-
- DeviceInfo.getMACAddress().then((mac)=>{
- if (mac=='' || mac==null ) {
- if (NativeModules.BuildConfig.buildType == 'debug') {
- this.setState({macAddress : this.testMac})
- this.startAd()
- } else {
- this.showErrMsg(errorMsg.ERR_MAC_GET);
- }
- } else {
- this.setState({macAddress : mac})
- this.startAd()
- }
- }).catch(e => {
- this.showErrMsg(errorMsg.ERR_START_AD);
- })
- }
-
- componentDidUpdate() {
- /* console.log(this.refs.scrollView)
- if (this.refs.scrollView != undefined) {
- var ScrollView = this.refs.scrollView;
- ScrollView.scrollBy(0, true);
- } */
-
- }
-
- //更新函数
- async codePushUpdate() {
- CodePush.allowRestart();
- await CodePush.getUpdateMetadata(CodePush.UpdateState.RUNNING)
- .then((metadata: LocalPackage) => {
- this.setState({ versionInfo: metadata ? 'b'+NativeModules.BuildConfig.versionCode+"-" + metadata.label : 'b'+ NativeModules.BuildConfig.versionCode});
- versionInfo = this.state.versionInfo;
- }, (error: any) => {
- this.setState({ versionInfo: "Unknown"});
- versionInfo = this.state.versionInfo;
- });
- await CodePush.sync(
- { mandatoryInstallMode: CodePush.InstallMode.ON_NEXT_RESTART,
- installMode: CodePush.InstallMode.ON_NEXT_RESTART},
- this.codePushStatusDidChange.bind(this),
- this.codePushDownloadDidProgress.bind(this)
- ).then((status: SyncStatus) => {
-
- }, (error: any) => {
- console.log(error)
- // CodePush.restartApp();
- });
- }
-
-
- // 监听更新状态
- codePushStatusDidChange(syncStatus) {
- switch(syncStatus) {
- case CodePush.SyncStatus.CHECKING_FOR_UPDATE:
- this.setState({ syncMessage: "检查更新" });
- break;
- case CodePush.SyncStatus.DOWNLOADING_PACKAGE:
- this.setState({ syncMessage: "下载更新" });
- break;
- case CodePush.SyncStatus.AWAITING_USER_ACTION:
- this.setState({ syncMessage: "等待用户操作" });
- break;
- case CodePush.SyncStatus.INSTALLING_UPDATE:
- this.setState({ syncMessage: "安装更新" });
- break;
- case CodePush.SyncStatus.UP_TO_DATE:
- this.setState({ syncMessage: "已更新到最新程序", updating: false });
- break;
- case CodePush.SyncStatus.UPDATE_IGNORED:
- this.setState({ syncMessage: "更新被取消", updating: false });
- break;
- case CodePush.SyncStatus.UPDATE_INSTALLED:
- this.setState({ syncMessage: "更新已安装,重启应用后生效", updating: false });
- break;
- case CodePush.SyncStatus.UNKNOWN_ERROR:
- this.setState({ syncMessage: "未知错误", updating: false });
- break;
- }
- }
- codePushDownloadDidProgress(progress) {
- this.setState({ progress });
- }
-
- // 列表滚动
- updateContent() {
- if (adDataList.length <=0)
- return false;
-
- if (curAdIndex >= adDataList.length) {
- curAdIndex = 0;
-
- }
-
- this.setState({contentItem0:adDataList[curAdIndex]});
-
- if (curAdIndex + 1 < adDataList.length)
- this.setState({contentItem1:adDataList[curAdIndex+1]});
- else
- this.setState({contentItem1:null});
-
- if (curAdIndex + 2 < adDataList.length)
- this.setState({contentItem2:adDataList[curAdIndex+2]});
- else
- this.setState({contentItem2:null});
-
- curAdIndex+=3
-
- return true;
- }
-
- hbRequest() {
- return HttpUtils.post(NativeModules.BuildConfig.apiHost
- + 'api/wxDeviceScreenAd/heartbeat?deviceId='
- + encodeURIComponent(this.state.macAddress),
- {version:this.state.versionInfo})
- .then(result => {
- if (result.code == 200) {
- let config = JSON.parse(result.data.config);
- heartConfig.heartbeatInterval = config.heartbeatInterval
- heartConfig.dataRefreshInterval=config.dataRefreshInterval
- heartConfig.pageChangeInterval=config.pageChangeInterval
-
- // 动画划入
- if(config.animationTheme == 0){
- this.setState({
- animationTheme:animationThemes[0]
- })
- }else if(config.animationTheme == 1){
- // 放大
- this.setState({
- animationTheme:animationThemes[1]
- })
- }else if(config.animationTheme == 2){
- // 淡入
- this.setState({
- animationTheme:animationThemes[2]
- })
- }else if(config.animationTheme == 3){
- // 弹入
- this.setState({
- animationTheme:animationThemes[3]
- })
- }
- } else {
- //do nothing
- }
-
- })
- .catch(error => {
- requestFailedCount++
- this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
- })
- }
-
- showErrMsg(errMsg) {
- this.setState({contentDisplayStatus: false})
- this.setState({errorMessage : errMsg});
- }
- //开启 排名页播放的计时器
- dealRankTimer(type) {
- if (type) {
- let num = Number(heartConfig.pageChangeInterval) * 1000;
- curRankTimer = setInterval(() => {
- this.setState({
- openRankList: false
- })
- clearInterval(curRankTimer);
- },num)
- } else {
- clearInterval(curRankTimer);
- }
- }
-
- //判断播放类型adType 0 纯券 1纯广告图 2 广告图+券
- dealLoopType(dataList) {
- adDataList = dataList.filter((item) => {
- return item.type == 0;
- })
- adDataBgList = dataList.filter((item) => {
- return item.type == 2;
- })
- let merchantRankList = dataList.filter((item) => {
- if (item.type == 3) {
- item.extInfo = JSON.parse(item.extInfo);
- item.extInfo.executionIndex = Number(item.extInfo.executionIndex);
- item.extInfo.populationIndex = Number(item.extInfo.populationIndex);
- }
- return item.type == 3;
- })
- //
- let num = 0;
- if (adDataList.length > 0 && adDataBgList.length > 0) {
- num = 2;
- this.setState({previewImg: adDataBgList[0].coverImg});
- } else if (adDataList.length > 0 && !adDataBgList.length) {
- num = 0;
- } else if (!adDataList.length && adDataBgList.length > 0) {
- num = 1;
- }
- //aaa
- this.setState({adType: num })
- this.setState({
- merchantRankList: merchantRankList,
- hasRankList: merchantRankList.length > 0 ? true:false
- })
- //aaa
- if (this.state.adType == 1 && this.state.hasRankList) {
- let obj = {
- hasRank: true,
- }
- adDataBgList.push(obj)
- }
-
-
- }
-
- getAdDataList(first) {
- HttpUtils.get(NativeModules.BuildConfig.apiHost
- + 'api/wxDeviceScreenAd/list?deviceId='
- + encodeURIComponent(this.state.macAddress)
- + '&pageNum=1&pageSize=1000')
- .then(result => {
- if (result.code != 200) {
- this.showErrMsg(result.message+'\n'+this.state.macAddress);
- } else if (result.data.list) {
- //
- //type==0的是券 1是? 2是广告大图
- let curData = result.data.list;
- this.dealLoopType(curData);
-
-
- if (this.updateContent()) {
- this.setState({contentDisplayStatus: true})
- } else {
- this.showErrMsg(errorMsg.ERR_NO_DATA);
- }
- } else {
- this.showErrMsg(errorMsg.ERR_DATA_GET);
- }
- })
- .catch(error => {
- if (first) {
- this.showErrMsg(error.message);
- }
- else {
- requestFailedCount++
- this.setState({ versionInfo: versionInfo+`[${requestFailedCount}]`});
- }
- })
- }
- getBaseInfo() {
- HttpUtils.get(NativeModules.BuildConfig.apiHost
- + 'api/wxDeviceScreenAd/info?deviceId='
- + encodeURIComponent(this.state.macAddress))
- .then(result => {
- if (result.code != 200) {
- this.showErrMsg(result.message+'\n'+this.state.macAddress);
- } else if (result.data) {
- this.setState({baseInfo:result.data});
- } else {
- this.showErrMsg(errorMsg.ERR_DATA_GET);
- }
- })
- .catch(error => {
- this.showErrMsg(error.message);
- })
-
- }
-
- componentWillUnmount(){
- if (curTimer)
- clearTimeout(curTimer)
- }
-
-
-
- async routine() {
- hbRequestCount -=1;
- getAdDataCount -=1;
- //等待第一次图片加载完成再倒计时
- if (!this.state.openRankList) {
- if (this.state.adType == 2 && this.state.curImgState) {
- pageChangeCount -=1;
- }
- if (this.state.adType != 2) {
- pageChangeCount -=1;
- }
- }
-
-
-
- try {
- if (getAdDataCount<=0) {
- this.getAdDataList(false)
- getAdDataCount = heartConfig.dataRefreshInterval
- } else if (hbRequestCount<=0) {
- this.hbRequest()
- hbRequestCount = heartConfig.heartbeatInterval
- }
-
- //如果是adType == 2时间间隔到了,要检验轮播是否走完在决定切换
- if (this.state.adType == 2) {
- if (pageChangeCount<=0) {
-
- let curNum = this.state.curAdType02Index + 1;
- if (curNum >= adDataBgList.length) {
- //如果播放到了最后一页,接下来暂停计时器,可能播放商户排名页
- if (!this.state.openRankList) {
- this.dealRankTimer(true);
- this.setState({
- openRankList: true,
- })
- }
-
- curNum = 0;
- }
-
-
- this.setState({
- curAdType02Index: curNum,
- previewImg:adDataBgList[curNum].coverImg
- })
- pageChangeCount = heartConfig.pageChangeInterval
- }
-
-
- } else if (this.state.adType == 0) {
- if (pageChangeCount <= 0) { //页面切换间隔
- //如果播放到了最后一页,接下来暂停计时器,可能播放商户排名页
- if (curAdIndex >= adDataList.length) {
- this.dealRankTimer(true);
- this.setState({
- openRankList: true,
- })
- }
- if (this.state.contentDisplayStatus && this.state.baseInfo) {
- this.setState({ contentDisplayStatus: false})
- if (this.updateContent()) {
- this.setState({ contentDisplayStatus: true})
- }
- } else {
- await this.getBaseInfo()
- await this.getAdDataList(true)
- getAdDataCount = heartConfig.dataRefreshInterval
- hbRequestCount = heartConfig.heartbeatInterval
- }
- pageChangeCount = heartConfig.pageChangeInterval
- }
- }
-
-
- } catch(e){
- this.setState({ versionInfo: versionInfo+'[E]'});
- }
-
- curTimer = setTimeout(()=>{
- this.routine();
- },1000);
- }
-
- startAd() {
- hbRequestCount = 0;
- getAdDataCount = 0;
- pageChangeCount = 0;
- this.routine();
- }
-
- getContentViewItemUplayer(contentItem) {
- if (contentItem.type == 0) {
- if (contentItem.subType == 2)
- return (<Image source={require('./image/timed.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
- if (contentItem.subType == 6)
- return (<Image source={require('./image/discount.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
- if (contentItem.subType == 7)
- return (<Image source={require('./image/groupbuy.png')} resizeMode='center' style={styles.contentItemUpLayer} /> )
- return null;
- }
- }
-
- getContentViewItemActionStr(contentItem) {
-
- if (contentItem.type == 0) {
- if (contentItem.subType == 2)
- return '扫码秒杀';
- else if (contentItem.subType == 6)
- return '扫码砍价';
- else if (contentItem.subType == 7)
- return '扫码拼团';
- else
- return '扫码领取';
- }
- }
-
- getContentViewItemMerchantName(contentItem) {
- if (contentItem.type == 0) {
- if (contentItem.target.merchantVoList.length > 1)
- return '多商户通用';
- else
- return contentItem.target.merchantVoList[0].merchantName;
- }
- }
- //排名 rank dom
- rankDom() {
- let rankDomStack = [];
- let {merchantRankList,} = this.state;
-
- if (merchantRankList.length > 0) {
- merchantRankList.map((item,index) => {
- let animation = '';
- if (this.state.adType == 0) {
- if (index == 0) {
- animation = this.state.animationTheme.first;
- } else if (index == 1) {
- animation = this.state.animationTheme.second;
- } else if (index == 2) {
- animation = this.state.animationTheme.third;
- } else if (index == 3) {
- animation = this.state.animationTheme.second;
- } else if (index == 4) {
- animation = this.state.animationTheme.third;
- }
- } else if (this.state.adType == 2) {
- animation = 'fadeIn';
- } else if (this.state.adType == 1) {
- animation = '';
- }
-
- rankDomStack.push(this.rankItemDom(item,index,animation));
- })
- }
- return rankDomStack;
- }
- //每一条 rank
- rankItemDom(item,index,animation) {
- let fontSizeNum = 40/(PixelRatio.get());
- let fontSizeNum02 = 46/(PixelRatio.get());
- let curStyleObj = {
- width: fontSizeNum,
- height: fontSizeNum,
- }
- let curStyleObj02 = {
- width: fontSizeNum02,
- height: fontSizeNum02,
- }
- return (
- <Animatable.View animation={animation} style={styles.rankItemBox} key={index}>
- <Image style={styles.RankLogo} resizeMode="stretch" source={{uri:item.coverImg}}></Image>
- <View style={styles.rankContent}>
- <Text style={styles.merchantText} numberOfLines={1} ellipsizeMode="tail">{item.title}</Text>
- <View style={styles.rankRunBox}>
- <View style={styles.rankRun01}>
- <Text style={styles.starTitle}>经营指数: {item.extInfo.executionIndex} 分</Text>
- <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:22/PixelRatio.get()}}>
- <StarRatingBar
- score={item.extInfo.executionIndex}
- allowsHalfStars={true}
- accurateHalfStars={true}
- starStyle={curStyleObj}
- emptyStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/star_gray.png')} />}
- filledStarImage={<Image style={curStyleObj} resizeMode="stretch" source={require('./image/star_yellow.png')} />}
- scoreTextStyle={{color:'transparent'}}
- />
- </View>
-
- </View>
-
- <View style={styles.rankRun02}>
- <Text style={styles.starTitle}>人气指数: {item.extInfo.populationIndex} 分</Text>
- <View style={{height: fontSizeNum,flexDirection: 'row', alignItems: 'center',marginTop:22/PixelRatio.get()}}>
- <StarRatingBar
- score={item.extInfo.populationIndex}
- allowsHalfStars={true}
- accurateHalfStars={true}
- starStyle={curStyleObj02}
- emptyStarImage={<Image style={curStyleObj02} resizeMode="stretch" source={require('./image/hot_gray.png')} />}
- filledStarImage={<Image style={curStyleObj02} resizeMode="stretch" source={require('./image/hot_yellow.png')} />}
- scoreTextStyle={{color:'transparent'}}
- />
- </View>
- </View>
- </View>
-
- </View>
-
- <Image source={{uri:item.target.qrCode}} resizeMode="stretch" style={styles.rankQrcodeImg}></Image>
-
- </Animatable.View>
- )
- }
- //券列表content部分
- getContentViewItem(contentItem, annomation) {
- if (!contentItem)
- return (
- <View style={styles.contentItem}>
- </View>
- )
-
- actionText = this.getContentViewItemActionStr(contentItem);
- merchantName = this.getContentViewItemMerchantName(contentItem);
- //
- // contentItem.target.salePriceStr = 234005.8;
- // console.warn(annomation)
- let curNumStr = contentItem.target.salePriceStr+'';
- let curStyleObj = {};
- if (curNumStr.length > 5 || Number(curNumStr) > 10000) {
- curStyleObj = styles.contentItemTopDetailCurPriceStr02;
- } else {
- curStyleObj = styles.contentItemTopDetailCurPriceStr01;
- }
- return (
-
- <Animatable.View animation={annomation} style={styles.contentItem}>
-
- <ImageBackground source={require('./image/item-background.png')} resizeMode='center' style={styles.contentItemDownLayer} >
- {/* 列表 */}
- <View style={styles.contentItemTop}>
- <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.contentItemTopCoverImg} />
- <View style={styles.contentItemTopDetail}>
- {/* 券的title */}
- <Text style={styles.contentItemTopDetailTitle} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
- <View style={styles.contentItemTopDetailPrice}>
- {/* 售价 */}
- <View style={styles.contentItemTopDetailCurPrice}>
- <Text style={styles.contentItemTopDetailCurPriceStrUnit}>¥</Text>
- <Text style={curStyleObj}>{contentItem.target.salePriceStr}</Text>
- {/* <Text style={styles.contentItemTopDetailCurPriceStr}>{contentItem.target.salePriceStr}</Text> */}
- </View>
- {/* 面额 */}
- <View style={styles.contentItemTopDetailSalePrice}>
- <Text style={styles.contentItemTopDetailSalePriceStr} >¥{contentItem.target.priceStr}</Text>
- </View>
- </View>
- </View>
- {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
- <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode} />
- </View>
- {/* 优惠券底部商户名称 */}
- <View style={styles.contentItemBottom}>
- <Text style={styles.contentItemBottomMerchantName}>{merchantName}</Text>
- <Text style={styles.contentItemBottomPlacehold}>{contentItem.target.merchantVoList[0].buildingName}{contentItem.target.merchantVoList[0].floorName}</Text>
- <Text style={styles.contentItemBottomAction}>{actionText}</Text>
- </View>
- </ImageBackground>
- {this.getContentViewItemUplayer(contentItem)}
- </Animatable.View>
- )
- }
-
- getContentView() {
- if (this.state.contentDisplayStatus) {
- //aaa
- return (<View style={styles.content}>
- {this.getContentViewItem(this.state.contentItem0,this.state.animationTheme.first)}
- {this.getContentViewItem(this.state.contentItem1,this.state.animationTheme.second)}
- {this.getContentViewItem(this.state.contentItem2,this.state.animationTheme.third)}
- </View>)
- }else{
- return (
- <View style={styles.content}>
- <Text style={styles.updatePage}>{this.state.errorMessage}</Text>
- </View>)
- }
- }
- setAdSwiperItemDom(item) {
- let contentItem = item.item;
- if (this.state.hasRankList && contentItem.hasRank != undefined && contentItem.hasRank) {
- return (
- this.renderRankDom()
- )
- } else {
- return (
- <View style={styles.onlyAdSwiperItem}>
- <Image source={{uri: contentItem.coverImg}} resizeMode='stretch' style={styles.onlyAdTypeItemImg} />
- </View>
- )
- }
-
- }
- setSwiperItemDom(item) {
- let contentItem = item.item;
- let index = item.index;
- let curLogo = null;
- if (contentItem.type == 0) {
- if (contentItem.subType == 2)
- curLogo = require('./image/timed.png');
- if (contentItem.subType == 6)
- curLogo = require('./image/discount.png');
- if (contentItem.subType == 7)
- curLogo = require('./image/groupbuy.png');
- }
- //
- // contentItem.target.salePriceStr = 24502228;
- let curNumStr = contentItem.target.salePriceStr+'';
- let curStyleObj = {};
- if (curNumStr.length > 6 || Number(curNumStr) > 100000) {
- curStyleObj = styles.contentItemTopDetailCurPriceStr04;
- } else {
- curStyleObj = styles.contentItemTopDetailCurPriceStr03;
- }
- return (
- <View style={styles.carouselItemWrap}>
- {/* <BoxShadow setting={shadowOpt}> */}
- <View>
- <View style={styles.contentItemTopForAd} key={index}>
- <Image source={curLogo} resizeMode='center' style={styles.contentItemUpLayerLogo} />
-
- {/* <ImageBackground style={styles.adTypeSwiper02} resizeMode="stretch" source={require('./image/item-background.png')}></ImageBackground> */}
- <Image source={{uri: contentItem.coverImg}} resizeMode='cover' style={styles.adTypeItemImg} />
- <View style={styles.contentItemTopDetail}>
- {/* 券的title */}
- <Text style={styles.contentItemTopDetailTitle02} numberOfLines={2} ellipsizeMode="tail">{contentItem.target.title}</Text>
- <View style={styles.contentItemTopDetailPrice}>
- {/* 售价 */}
- <View style={styles.contentItemTopDetailCurPrice}>
- <Text style={styles.contentItemTopDetailCurPriceStrUnit02}>¥</Text>
- <Text style={curStyleObj}>{contentItem.target.salePriceStr}</Text>
- </View>
- {/* 面额 */}
- <View style={styles.contentItemTopDetailSalePrice02}>
- <Text style={styles.contentItemTopDetailSalePriceStr02} >¥{contentItem.target.priceStr}</Text>
- </View>
- </View>
- </View>
- {/* <Image source={{uri:'data:image/png;base64,'+contentItem.qrcode}} resizeMode='contain' style={styles.contentItemTopQrcode} /> */}
- <View style={styles.contentItemTopQrcodeBox}>
- <Image source={{uri:contentItem.target.qrCode}} resizeMode='contain' style={styles.contentItemTopQrcode02} />
- </View>
-
-
- </View>
- </View>
- {/* </BoxShadow> */}
- </View>
- )
- }
-
- getUpdateView() {
- if (this.state.progress.totalBytes > 0)
- return (
- <Text style={styles.updatePage}>{this.state.syncMessage}{'\n'}
- {this.state.progress.receivedBytes} of {this.state.progress.totalBytes} bytes received{'\n'}
- </Text>
- );
- return (
- <Text style={styles.updatePage}>{this.state.syncMessage}
- </Text>
- );
- }
- rendDefaultImg() {
- if (this.state.coverImgUrl) {
- return (
- <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={{uri: this.state.coverImgUrl}}></ImageBackground>
- )
- } else {
- return (
- <ImageBackground style={styles.adTypeBg} resizeMode="stretch" source={require('./image/background.png')}></ImageBackground>
- )
- }
- }
- renderTicketDom() {
- return (
- <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
- {/* 头部title二维码开始 */}
- <View style={styles.title}>
- <View style={styles.titleImagePlace}>
- <Image source={require('./image/title.png')} resizeMode='center' style={styles.titleImage} />
- </View>
- <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
- <View style={styles.titleQrcodePlacehold}></View>
- <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
- <View style={styles.titleQrcodePlacehold}></View>
- </ImageBackground>
- </View>
- {/* 券列表展示列表开始 */}
- {this.getContentView()}
- {/* 底部商场信息展示开始 */}
- <View style={styles.bottom}>
- <View style={styles.bottomLogoBackground}>
- <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
- </View>
- <View style={styles.bottomQrcode1Background}>
- <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
- <Text style={styles.bottomQrcode1Str}>小程序</Text>
- </View>
- <View style={styles.bottomQrcode2Background}>
- <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
- <Text style={styles.bottomQrcode1Str}>公众号</Text>
- </View>
- <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
- </View>
- </ImageBackground>
- );
- }
- //rank page aaa
- renderRankDom() {
- return (
- <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background-yellow.png')}>
- {/* 头部title二维码开始 */}
- <View style={styles.title}>
- <View style={styles.titleImagePlace}>
- <Image source={require('./image/title_yellow.png')} resizeMode='center' style={styles.titleImage} />
- </View>
- <ImageBackground source={require('./image/title-qrcode.png') } resizeMode='center' style={styles.titleQrcodeBonder} >
- <View style={styles.titleQrcodePlacehold}></View>
- <Image source={{uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.titleQrcode} />
- <View style={styles.titleQrcodePlacehold}></View>
- </ImageBackground>
- </View>
- {/* 券列表展示列表开始 */}
- <View style={styles.content}>
- {this.rankDom()}
- </View>
- {/* 底部商场信息展示开始 */}
- <View style={styles.bottom}>
- <View style={styles.bottomLogoBackground}>
- <Image source={{ uri: this.state.baseInfo.imgUrlH}} resizeMode='contain' style={styles.bottomLogo} />
- </View>
- <View style={styles.bottomQrcode1Background}>
- <Image source={{ uri: this.state.baseInfo.imgQrcodeWeapp}} resizeMode='center' style={styles.bottomQrcode1} />
- <Text style={styles.bottomQrcode1Str}>小程序</Text>
- </View>
- <View style={styles.bottomQrcode2Background}>
- <Image source={{ uri: this.state.baseInfo.imgQrcodeWemp}} resizeMode='center' style={styles.bottomQrcode2} />
- <Text style={styles.bottomQrcode1Str}>公众号</Text>
- </View>
- <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
- </View>
- </ImageBackground>
- );
- }
- renderAdDom() {
- let curWidthNum = 1080/(PixelRatio.get());
- return (
- // <ImageBackground style={styles.adTypeBg} source={require('./image/ad1.jpg')}> slideInDown zoomInDown
- <View style={styles.adWrapBox}>
- <Image style={styles.adWrapHideImg}
- onLoadStart={() => {
- this.setState({
- curImgState: false
- })
- }}
- onLoad={() => {
- this.setState({
- coverImgUrl: this.state.previewImg,
- curImgState: true
- })
- }}
- resizeMode="stretch" source={{uri: this.state.previewImg}}>
- </Image>
-
- <Animatable.View animation="fadeIn" style={styles.adWrap} key={this.state.coverImgUrl}>
- {this.rendDefaultImg()}
- </Animatable.View>
-
- <View style={styles.adTypeSwiper02}>
- <Carousel
- style={styles.adTypeSwiper02Content}
- ref={'carousel02'}
- data={adDataList}
- renderItem={this.setSwiperItemDom}
- sliderWidth={curWidthNum}
- itemWidth={curWidthNum}
- layout={'stack'}
- activeSlideOffset={0}
- autoplay={true}
- loop={true}
- autoplayInterval={5000}
- />
- </View>
- </View>
-
- );
- }
- getAdView(){
- if (this.state.baseInfo) {
- if (this.state.adType == 0) {
- if (this.state.hasRankList && this.state.openRankList) {
- return (
- this.renderRankDom()
- )
- } else {
- return (
- this.renderTicketDom()
- )
- }
- } else if (this.state.adType == 2) {
- if (this.state.hasRankList && this.state.openRankList) {
- return (
- this.renderRankDom()
- )
- } else {
- return (
- this.renderAdDom()
- )
- }
-
- } else if (this.state.adType == 1) {
- let curWidthNum = 1080/(PixelRatio.get())
- return(
- <Carousel
- ref={'carousel01'}
- data={adDataBgList}
- renderItem={this.setAdSwiperItemDom}
- sliderWidth={curWidthNum}
- itemWidth={curWidthNum}
- activeSlideOffset={0}
- autoplay={true}
- loop={true}
- autoplayInterval={5000}
- />
- )
- }
- }
- else {
- return (
- <ImageBackground style={styles.background} resizeMode='center' source={require('./image/background.png')}>
- {/* 头部title二维码开始 */}
- <View style={styles.title}>
- </View>
- {/* 券列表展示列表开始 */}
- {this.getContentView()}
- {/* 底部商场信息展示开始 */}
- <View style={styles.bottom}>
- <View style={styles.bottomLogoBackground}>
- </View>
- <View style={styles.bottomQrcode1Background}>
- </View>
- <View style={styles.bottomQrcode2Background}>
- </View>
- <Text style={styles.bottomPlacehold}>{this.state.versionInfo}</Text>
- </View>
- </ImageBackground>
- );
- }
-
- }
-
- render() {
-
- //if (this.state.updating) {
- // return this.getUpdateView();
- //}
- return this.getAdView();
- }
- }
- MyPage = CodePush(codePushOptions)(MyPage);
- const styles = StyleSheet.create({
- updatePage:{
- flex: 2,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 63/PixelRatio.get(),
- color: 'darkblue'
- },
-
- //layer background
- background:{
- flex: 1,
- width:'100%',
- height:'100%'
- },
-
- //layer top
- title:{
- flex: 6,
- flexDirection: 'row',
- alignItems: 'center',
- paddingLeft:42/PixelRatio.get(),
- paddingRight:42/PixelRatio.get(),
- backgroundColor:'transparent'
- },
-
- content:{
- flex: 18,
- flexDirection: 'column',
- alignItems: 'center',
- backgroundColor:'transparent'
- },
-
- bottom:{
- flex: 2,
- flexDirection: 'row',
- alignItems: 'center',
- paddingLeft:42/PixelRatio.get(),
- paddingRight:42/PixelRatio.get(),
- backgroundColor:'transparent'
- },
-
- //layer title
- titleImagePlace: {
- flex: 2,
- paddingTop: '20%',
- paddingLeft: '15%',
- alignItems: 'center',
- backgroundColor:'transparent'
- },
- titleImage: {
- width:'100%',
- height:'100%',
- flex: 1,
- backgroundColor:'transparent'
- },
-
- titleQrcodeBonder: {
- width:'100%',
- height:'100%',
- alignItems: 'center',
- flexDirection: 'column',
- flex: 1,
- backgroundColor:'transparent'
- },
-
- titleQrcodePlacehold: {
- flex: 5,
- backgroundColor:'transparent'
- },
-
- titleQrcode: {
- flex: 6,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent'
- },
-
- //layer bottom
- bottomLogoBackground: {
- flex: 3,
- borderRadius:16/PixelRatio.get(),
- marginTop: 26/PixelRatio.get(),
- marginBottom: 26/PixelRatio.get(),
- backgroundColor:'transparent',//'rgba(255,255,255,0.5)',
- },
- bottomLogo: {
- width:'100%',
- height:'100%',
- backgroundColor:'transparent'
- },
- bottomQrcode1Background : {
- flex: 1,
- width:'100%',
- height:'100%',
- marginLeft: 21/PixelRatio.get(),
- paddingTop: 27/PixelRatio.get(),
- paddingBottom: 11/PixelRatio.get(),
- flexDirection: 'column',
- backgroundColor:'transparent'
- },
-
- bottomQrcode2Background : {
- flex: 1,
- width:'100%',
- height:'100%',
- marginLeft: 21/PixelRatio.get(),
- paddingTop: 26/PixelRatio.get(),
- paddingBottom: 11/PixelRatio.get(),
- flexDirection: 'column',
- backgroundColor:'transparent'
- },
-
- bottomQrcode1: {
- flex: 2,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent'
- },
-
- bottomQrcode2: {
- flex: 2,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent'
- },
-
- bottomQrcode1Str: {
- flex: 1,
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 16/PixelRatio.get(),
- color : 'white',
- backgroundColor:'transparent'
- },
-
- bottomQrcode2Str: {
- flex: 1,
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 16/PixelRatio.get(),
- color : 'white',
- backgroundColor:'transparent'
- },
-
- bottomPlacehold: {
- flex: 8,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlign :'right',
- textAlignVertical:'bottom',
- fontSize: 27/PixelRatio.get(),
- color : 'gray'
- },
-
- //layer content item
- contentItem:{
- flex: 1,
- width:'100%',
- height:'100%',
- flexDirection: 'column',
- backgroundColor:'transparent'
- },
-
- contentItemDownLayer:{
- position:'absolute',
- width:'100%',
- height:'100%',
- flexDirection: 'column',
- alignItems: 'center',
- backgroundColor:'transparent'
- },
-
- contentItemUpLayer:{
- width:210/PixelRatio.get(),
- height:153/PixelRatio.get(),
- position:'absolute',
- backgroundColor:'transparent'
- },
- contentItemUpLayerLogo: {
- width:160/PixelRatio.get(),
- height:83/PixelRatio.get(),
- position: 'absolute',
- left: -20/PixelRatio.get(),
- top: 20/PixelRatio.get(),
- zIndex:100,
- backgroundColor: 'transparent',
- },
-
- contentItemTop:{
- flex: 3,
- width:'100%',
- height:'100%',
- paddingLeft: 66/PixelRatio.get(),
- paddingRight: 53/PixelRatio.get(),
- paddingTop: 40/PixelRatio.get(),
- flexDirection: 'row',
- alignItems: 'center',
- backgroundColor:'transparent'
- },
-
- contentItemBottom:{
- flex: 1,
- width:'100%',
- height:'100%',
- paddingLeft: 66/PixelRatio.get(),
- paddingRight: 53/PixelRatio.get(),
- paddingBottom: 40/PixelRatio.get(),
- flexDirection: 'row',
- alignItems: 'center',
- backgroundColor:'transparent'
- },
-
- //layer content item top
- contentItemTopCoverImg:{
- flex: 5,
- width:'100%',
- height:'100%',
- borderRadius:27/PixelRatio.get(),
- backgroundColor:'transparent'
- },
-
- contentItemTopDetail:{
- flex: 6,
- width:'100%',
- height:'100%',
- paddingLeft: 20/PixelRatio.get(),
- paddingRight: 20/PixelRatio.get(),
- alignItems: 'center',
- backgroundColor:'transparent'
- },
-
- contentItemTopQrcode:{
- flex: 5,
- width:'100%',
- height:'100%',
- marginLeft:18/PixelRatio.get(),
- // backgroundColor:'transparent'
- },
-
- contentItemTopQrcodeBox:{
- flex: 5,
- width:'100%',
- height:'100%',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- marginLeft: -28/PixelRatio.get(),
- // backgroundColor:'transparent'
- },
-
- contentItemTopQrcode02:{
- width:'90%',
- height:'90%',
- },
-
- //layer content item bottom
- contentItemBottomMerchantName:{
- flex: 5,
- width:'100%',
- height:'100%',
- alignItems: 'center',
- color:"black",
- backgroundColor:'transparent',
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 27/PixelRatio.get(),
- fontWeight : 'bold',
-
- },
-
- contentItemBottomPlacehold:{
- flex: 6,
- fontSize: 27/PixelRatio.get(),
- paddingLeft: 27/PixelRatio.get(),
- paddingRight: 79/PixelRatio.get(),
- width:'100%',
- height:'100%',
- color:"black",
- textAlignVertical:'center',
- backgroundColor:'transparent',
- },
-
- contentItemBottomAction:{
- flex: 5,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 36/PixelRatio.get(),
- color: 'black',
- },
-
- contentItemBottomAction02:{
- width:'100%',
- height: 60/PixelRatio.get(),
- backgroundColor:'transparent',
- textAlign :'center',
- textAlignVertical:'center',
- fontSize: 36/PixelRatio.get(),
- color: 'black',
- },
-
- // 券的title
- contentItemTopDetailTitle:{
- flex: 2,
- // height:'100%',
- width:'100%',
- marginTop:"2%",
- backgroundColor:'transparent',
- textAlign :'left',
- color:"black",
- textAlignVertical:'center',
- fontSize: 53/PixelRatio.get(),
- },
- // 券的title
- contentItemTopDetailTitle02:{
- flex: 2,
- // height:'100%',
- width:'100%',
- marginTop:"2%",
- paddingRight: 14/PixelRatio.get(),
- backgroundColor:'transparent',
- textAlign :'left',
- color:"black",
- textAlignVertical:'center',
- fontSize: 42/PixelRatio.get(),
- },
- /*
- contentItemTopDetailRemark:{
- flex: 1,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlign :'left',
- textAlignVertical:'center',
- fontSize: 27/PixelRatio.get(),
- color : 'gray'
- },
- */
- contentItemTopDetailPrice:{
- flex: 2,
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- flexDirection: 'row',
- },
-
- // 售价的样式
- contentItemTopDetailCurPrice:{
- position:"absolute",
- bottom:10,
- left:0,
- width:'100%',
- height:'100%',
- flexDirection: 'row',
- backgroundColor:'transparent',
- },
-
- contentItemTopDetailCurPriceStr01:{
- backgroundColor:'transparent',
- fontSize:96/PixelRatio.get(),
- fontFamily:"PingFangSC-Bold",
- fontWeight: "bold",
- textAlign :'left',
- textAlignVertical:'bottom',
- color : 'red'
- },
- //金额超10000,字号修改
- contentItemTopDetailCurPriceStr02:{
- backgroundColor:'transparent',
- fontSize:64/PixelRatio.get(),
- fontFamily:"PingFangSC-Bold",
- fontWeight: "bold",
- textAlign :'left',
- textAlignVertical:'bottom',
- paddingBottom: 8/PixelRatio.get(),
- color : 'red'
- },
-
- contentItemTopDetailCurPriceStr03:{
- backgroundColor:'transparent',
- fontSize:72/PixelRatio.get(),
- fontFamily:"PingFangSC-Bold",
- fontWeight: "bold",
- textAlign :'left',
- color : 'red'
- },
- //金额超10000,字号修改
- contentItemTopDetailCurPriceStr04:{
- backgroundColor:'transparent',
- fontSize:52/PixelRatio.get(),
- fontFamily:"PingFangSC-Bold",
- fontWeight: "bold",
- textAlign :'left',
- paddingTop: 16/PixelRatio.get(),
- color : 'red'
- },
-
- contentItemTopDetailCurPriceStrUnit:{
- backgroundColor:'transparent',
- textAlign :'left',
- textAlignVertical:'bottom',
- paddingBottom: 16/PixelRatio.get(),
- fontSize: 48/PixelRatio.get(),
- color : 'red',
- },
-
- contentItemTopDetailCurPriceStrUnit02:{
- backgroundColor:'transparent',
- textAlign :'left',
- textAlignVertical:'center',
- paddingBottom: 16/PixelRatio.get(),
- fontSize: 48/PixelRatio.get(),
- color : 'red'
- },
- // 面额的样式
- contentItemTopDetailSalePrice:{
- position:"absolute",
- bottom:2,
- left:0,
- // flex: 1,
- paddingTop:138/PixelRatio.get(),
- width:'100%',
- // height:'100%',
- backgroundColor:'transparent',
- },
-
- contentItemTopDetailSalePrice02:{
- position:"absolute",
- bottom:14/PixelRatio.get(),
- left:0,
- // flex: 1,
- paddingTop:138/PixelRatio.get(),
- width:'100%',
- // height:'100%',
- backgroundColor:'transparent',
- },
-
- contentItemTopDetailSalePriceStr:{
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlign :'left',
- textAlignVertical:'bottom',
- fontSize: 27/PixelRatio.get(),
- textDecorationLine: 'line-through',
- color : 'gray'
- },
-
-
- contentItemTopDetailSalePriceStr02:{
- width:'100%',
- height:'100%',
- backgroundColor:'transparent',
- textAlignVertical:'center',
- textAlign :'left',
- fontSize: 27/PixelRatio.get(),
- textDecorationLine: 'line-through',
- color : 'gray'
- },
-
-
- adTypeBg:{
- flex: 1,
- width: '100%',
- height: '100%',
- },
- adWrapBox: {
- width: '100%',
- height: '100%',
- position: 'relative',
-
- },
- adWrap: {
- width: '100%',
- height: '100%',
- position: 'absolute',
- left: 0,
- top: 0,
- zIndex: 10,
- },
- adWrapHideImg: {
- width: '100%',
- height: '100%',
- position: 'absolute',
- left: 0,
- top: 0,
- zIndex: -1,
- opacity:0,
- },
-
- adTypeSwiper02:{
- flex: 1,
- alignItems: 'center',
- position: 'absolute',
- left: 0,
- bottom: 60/PixelRatio.get(),
- width: '100%',
- height: 270/PixelRatio.get(),
- paddingTop: 10/PixelRatio.get(),
- paddingBottom: 10/PixelRatio.get(),
- backgroundColor: 'rgba(0,0,0,.1)',
- },
-
- adTypeItemImgWrap:{
- flex: 1,
- width: '100%',
- height: 369/PixelRatio.get(),
- flexDirection: 'row',
- alignItems: 'center',
- },
-
- adTypeItemImg:{
- width: 200/PixelRatio.get(),
- height: 200/PixelRatio.get(),
- marginLeft: 8/PixelRatio.get(),
- marginTop: 20/PixelRatio.get(),
- borderRadius:27/PixelRatio.get(),
- backgroundColor:'transparent'
- },
-
- bottomBox:{
- position: 'absolute',
- bottom: 20/PixelRatio.get(),
- left: 0,
- width: '100%',
- height: 130/PixelRatio.get(),
- flexDirection: 'row',
- alignItems: 'center',
- backgroundColor:'transparent',
- },
-
- contentItemTopForAd:{
- position: 'relative',
- flex: 1,
- width: 800/PixelRatio.get(),
- // width: '100%',
- height:'100%',
- paddingLeft: 12/PixelRatio.get(),
- paddingRight: 26/PixelRatio.get(),
- flexDirection: 'row',
- alignItems: 'flex-start',
- borderRadius: 6,
- backgroundColor:'rgba(255,255,255,.8)',
-
- },
-
- onlyAdSwiperItem:{
- width: '100%',
- height: '100%',
- },
-
- onlyAdTypeItemImg:{
- width: '100%',
- height: '100%',
- },
-
- carouselItemWrap: {
- flex: 1,
- width: '100%',
- backgroundColor: 'transparent',
- alignItems: 'center',
-
- },
- //排名的列表样式
- rankItemBox: {
- // flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- width: '92%',
- height: 240/PixelRatio.get(),
- backgroundColor: '#fff',
- borderRadius: 18/PixelRatio.get(),
- marginTop: 30/PixelRatio.get(),
- },
-
- rankContent: {
- flex: 1,
- flexDirection: 'column',
- marginLeft: 22/PixelRatio.get(),
- },
-
- rankItemBg: {
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- width: '100%',
- height: 250/PixelRatio.get(),
- },
-
- RankLogo: {
- width: 188/PixelRatio.get(),
- height: 200/PixelRatio.get(),
- marginLeft: 20/PixelRatio.get(),
- },
-
- rankQrcodeImg: {
- width: 200/PixelRatio.get(),
- height: 200/PixelRatio.get(),
- marginRight: 20/PixelRatio.get(),
- },
-
- starTitle: {
- fontSize: 32/PixelRatio.get(),
- },
-
- rankRun01: {
- marginTop: 12/PixelRatio.get(),
- },
-
- rankRun02: {
- marginTop: 12/PixelRatio.get(),
- marginLeft: 10/PixelRatio.get(),
- },
-
- merchantText: {
- fontSize: 40/PixelRatio.get(),
- fontWeight : 'bold',
- marginBottom: 10/PixelRatio.get(),
- marginTop: 22/PixelRatio.get(),
- },
-
- rankRunBox: {
- flex: 1,
- flexDirection: 'row',
-
- }
-
- });
|