打开APP、倒计时

src/components/detail/group/index.js

@@ -15,6 +15,8 @@ class Group extends Component {
             pdd_price: 0,
             number: 0,
             data: {},
+            countdown: props.countdown,
+            now_groupon_list: [],
         }
     }
 
@@ -102,14 +104,49 @@ class Group extends Component {
         }
     }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            countdown: nextProps.countdown,
+        })
+    }
+
+    componentDidMount() {
+        if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info && this.props.courseInfo.courseInfo.course_info.pdd_group_info) {
+            let now_groupon_list = this.props.courseInfo.courseInfo.course_info.pdd_group_info.now_groupon_list;
+            if(now_groupon_list && now_groupon_list.length > 0) {
+                setInterval(() => {
+                    now_groupon_list.map(item=>{
+                        item.end_time -= 1;
+                        return item;
+                    });
+                    this.setState({
+                        now_groupon_list,
+                    })
+                }, 1000);
+            }
+        }
+    }
+
     hideMbc = () => {
         this.setState({
             alreadyIn: false
         });
     }
 
+    formatTimeByMillisecond = (millisecond) => {
+        let date = millisecond * 1000,
+                hours = 0,
+                minutes = 0,
+                seconds = 0;
+                    date -= 1000
+                    hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
+                    minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
+                    seconds = `${parseInt((date - hours * 3600000 - minutes * 60000 ) / 1000)}`.padStart(2, 0);
+                        return `${hours}:${minutes}:${seconds}`;
+    }
+
     render() {
-        const {alreadyIn} = this.state;
+        const {alreadyIn, countdown, now_groupon_list} = this.state;
         let groupInfo = '',groupon_member = '', group_status = -1, groupSuccessMbc = null;
         if (this.props.courseInfo && this.props.courseInfo.courseInfo && this.props.courseInfo.courseInfo.course_info) {
             groupInfo = this.props.courseInfo.courseInfo.course_info.pdd_group_info;
@@ -156,7 +193,7 @@ class Group extends Component {
                         <div className='content'>
                             <p>你已参团</p>
                             {groupTip}
-                            <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 23：23：23 后结束</div>
+                            <div className='group-btn' onClick={this.invitedFriends}>邀请好友参团 {countdown} 后结束</div>
                             <p className='dec'>分享到3个群后，成团率高达98%</p>
                         </div>
                     </div>;
@@ -185,7 +222,7 @@ class Group extends Component {
                                     </div>
                                     <div className='group-status'>
                                         <p>还差<span className='red'>{item.number}人</span>拼成</p>
-                                        <p>剩余 {item.end_time}</p>
+                                        <p>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                     </div>
                                     <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>
                                 </li>
@@ -224,7 +261,7 @@ class Group extends Component {
                                                 <img className='avatar' src={item.avatar} alt=""/>
                                                 <div className='user-name'>
                                                     <p className='name text-overflow-one'>{item.user_name}</p>
-                                                    <p className='time'>剩余 {item.end_time}</p>
+                                                    <p className='time'>剩余 {this.formatTimeByMillisecond(item.end_time)}</p>
                                                 </div>
                                                 <p className='group-status'>还差{item.number}人</p>
                                                 <span onClick={()=>{this.toPay(item.pdd_order_id)}} className='topay'>去参团</span>

src/components/detail/group/togroup.js

@@ -92,11 +92,24 @@ class ToGroup extends Component {
                 course_list: res.data.data.course_list,
                 userInfo,
                 number: res.data.data.number,
+                countdown: '',
             });
-        });
 
-        http.post(`${api['pay-api']}/m/sale/signature`).then(res => {
-                console.log(res);
+            if(res.data.data.is_success === 0) {
+                let date = res.data.data.end_time * 1000,
+                hours = 0,
+                minutes = 0,
+                seconds = 0;
+                setInterval(() => {
+                    date -= 1000
+                    hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
+                    minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
+                    seconds = `${parseInt((date - hours * 3600000 - minutes * 60000 ) / 1000)}`.padStart(2, 0);
+                    this.setState({
+                        countdown: `${hours}:${minutes}:${seconds}`
+                    });
+                }, 1000)
+            }
         });
     }
 
@@ -162,7 +175,7 @@ class ToGroup extends Component {
 
 function GorupContent(props) {
     let tip, btn, dec, groupTip, shareTip, groupSuccessMbc;
-    const { pdd_price, data, groupon_member, is_success, person_num, userInfo, share, number } = props.data;
+    const { pdd_price, data, groupon_member, is_success, person_num, userInfo, share, number, countdown } = props.data;
     let ary=[],num = number;
     while(num != 0) {
         ary.push(num);
@@ -207,7 +220,7 @@ function GorupContent(props) {
 
         if(uid === userInfo.data.data.uid) {
             tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p>
-            btn = <span className='group-btn' onClick={props.invitedFriends}>邀请好友参团 23：23：23 后结束</span>
+            btn = <span className='group-btn' onClick={props.invitedFriends}>邀请好友参团 {countdown} 后结束</span>
             dec = <p className='dec'>分享到3个群后，成团率高达98%</p>
         } else {
             tip = <p className='tip'>{`拼团省￥${pdd_price}元`}</p>

src/components/detail/index.js

@@ -247,7 +247,7 @@ class Detail extends Component {
                 {/*拼团*/}
                 {
                     (courseInfo.group_status === 3 || courseInfo.group_status === 4) &&
-                    <Group history={this.props.history}/>
+                    <Group history={this.props.history} countdown={countdown}/>
                 }
 
 

src/components/scholarship/DrawDocument/DrawDocument.js

@@ -37,7 +37,7 @@ export default class DrawDocument extends Component {
                         <Flex justify='between' align='center' style={{height: '44px'}}>
                             <p className={'tip'}>收支明细及待确认金额请前往App查看</p>
                             {/* <div className={'app'}>在APP打开</div> */}
-                            <OpenApp className='app'/>
+                            <OpenApp className='app' text='在APP打开'/>
                         </Flex>
                     </WingBlank>
                 </div>

src/components/scholarship/index.js

@@ -5,6 +5,7 @@ import { is_weixin, http, api } from "@/utils";
 import CategoryItem from './CategoryItem/CategoryItem.js';
 import SortItem from './SortItem/SortItem.js';
 import { connect } from 'react-redux';
+import OpenApp from '@/common/CallApp';
 
 const Item = List.Item;
 
@@ -386,9 +387,9 @@ class _Scholarship extends Component {
                         2.该课程正式开课时，如果用户没有退款，对应的订单金额会自动转入您的账号余额，否则该佣金会自动收回。
                     </p>
                     <WhiteSpace></WhiteSpace>
-                    <Flex style={{ fontSize: '13px', color: '#000' }} justify='center'>
-                        <span>待确认订单详情可</span>
-                        <span style={{ color: '#0099FF', marginLeft: '10px' }}>前往APP查看</span>
+                    <Flex style={{ fontSize: '14px', color: '#0099FF' }} justify='center'>
+                        <span style={{color: "#333", marginRight: '10px'}}>待确认订单详情可</span>
+                        <OpenApp className='toApp' text='前往APP查看'/>
                     </Flex>
                 </Modal>
             </div>