Explorar el Código

add pay result page

KaysonCui hace 5 años
padre
commit
53a4291642

+ 1 - 1
front/project/h5/index.js

@@ -2,7 +2,7 @@ export default {
   mode: () => import('./app'),
   apiToken: 'token',
   loginAuth(route, { user }) {
-    if (route.needLogin && !user.login) return true;
+    if (route.needLogin && !user.login) return false;
     return true;
   },
 };

+ 57 - 27
front/project/h5/routes/page/bind/page.js

@@ -36,11 +36,10 @@ export default class extends Page {
       .then(result => {
         if (result) {
           this.setState({ mobileError: '' });
-          return User.validMobile(area, mobile)
-            .then(r => {
-              if (number !== this.validNumber) return;
-              this.setState({ needEmail: r });
-            });
+          return User.validMobile(area, mobile).then(r => {
+            if (number !== this.validNumber) return;
+            this.setState({ needEmail: r });
+          });
         }
         this.setState({ needEmail: false });
         return login ? Promise.resolve() : Promise.reject(new Error('该手机已绑定其他账号,请更换手机号码'));
@@ -55,7 +54,7 @@ export default class extends Page {
     const { area, mobile } = data;
     if (!area || !mobile || mobileError) return Promise.reject();
     return Common.sendSms(area, mobile)
-      .then((result) => {
+      .then(result => {
         if (result) {
           asyncSMessage('发送成功');
           this.setState({ mobileError: '', validError: '' });
@@ -75,9 +74,15 @@ export default class extends Page {
     if (mobileError || validError) return;
     if (!area || !mobile || !mobileVerifyCode) return;
     if (needEmail && !email) return;
-    User.bind(area, mobile, mobileVerifyCode, email).then(() => {
-      linkTo('/product');
-    })
+    User.bind(area, mobile, mobileVerifyCode, email)
+      .then(() => {
+        const { url } = this.props.core.query;
+        if (url) {
+          toLink(url);
+        } else {
+          linkTo('/product');
+        }
+      })
       .catch(err => {
         if (err.message.indexOf('验证码') >= 0) {
           this.setState({ validError: err.message });
@@ -91,24 +96,49 @@ export default class extends Page {
     const { needEmail } = this.state;
     return (
       <div>
-        <SelectInput placeholder="请输入手机号" selectValue={this.state.data.area} select={MobileArea} value={this.state.data.mobile} error={this.state.mobileError} onSelect={(value) => {
-          this.changeData('area', value);
-          this.validMobile();
-        }} onChange={(e) => {
-          this.changeData('mobile', e.target.value);
-          this.validMobile();
-        }} />
-        <VerificationInput placeholder="请输入验证码" value={this.state.data.mobileVerifyCode} error={this.state.validError} onSend={() => {
-          return this.sendValid();
-        }} onChange={(e) => {
-          this.changeData('mobileVerifyCode', e.target.value);
-        }} />
-        {needEmail && <Input placeholder="请输入邮箱" value={this.state.data.email} onChange={(e) => {
-          this.changeData('email', e.target.value);
-        }} />}
-        <Button margin={25} radius block onClick={() => {
-          this.submit();
-        }}>
+        <SelectInput
+          placeholder="请输入手机号"
+          selectValue={this.state.data.area}
+          select={MobileArea}
+          value={this.state.data.mobile}
+          error={this.state.mobileError}
+          onSelect={value => {
+            this.changeData('area', value);
+            this.validMobile();
+          }}
+          onChange={e => {
+            this.changeData('mobile', e.target.value);
+            this.validMobile();
+          }}
+        />
+        <VerificationInput
+          placeholder="请输入验证码"
+          value={this.state.data.mobileVerifyCode}
+          error={this.state.validError}
+          onSend={() => {
+            return this.sendValid();
+          }}
+          onChange={e => {
+            this.changeData('mobileVerifyCode', e.target.value);
+          }}
+        />
+        {needEmail && (
+          <Input
+            placeholder="请输入邮箱"
+            value={this.state.data.email}
+            onChange={e => {
+              this.changeData('email', e.target.value);
+            }}
+          />
+        )}
+        <Button
+          margin={25}
+          radius
+          block
+          onClick={() => {
+            this.submit();
+          }}
+        >
           绑定
         </Button>
       </div>

+ 2 - 1
front/project/h5/routes/page/index.js

@@ -7,5 +7,6 @@ import invitation from './invitation';
 import study from './study';
 import message from './message';
 import open from './open';
+import pay from './pay';
 
-export default [home, login, bind, identity, invitation, study, id, message, open];
+export default [home, login, bind, identity, invitation, study, id, message, open, pay];

+ 12 - 8
front/project/h5/routes/page/login/page.js

@@ -1,25 +1,29 @@
 import React from 'react';
 import './index.less';
 import Page from '@src/containers/Page';
-import { WechatH5AppId, H5Url } from '../../../../Constant';
+import { WechatH5AppId } from '../../../../Constant';
 import { User } from '../../../stores/user';
 
 export default class extends Page {
   init() {
-    const { code } = this.props.core.query;
+    const { code, url } = this.props.core.query;
     if (code) {
-      User.loginWechat(code).then((info) => {
+      User.loginWechat(code).then(info => {
         if (info.bindMobile) {
-          replaceLink('/');
+          if (url) {
+            toLink(url);
+          } else {
+            replaceLink('/');
+          }
         } else {
-          replaceLink('/bind');
+          replaceLink(`/bind?url=${url}`);
         }
       });
     } else {
-      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WechatH5AppId}&redirect_uri=${encodeURIComponent(
-        `${H5Url}/login`,
+      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WechatH5AppId}&redirect_uri=${encodeURIComponent(
+        `${window.location.href}`,
       )}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
-      window.location.href = url;
+      window.location.href = authUrl;
     }
   }
 

+ 67 - 1
front/project/h5/routes/page/pay/index.less

@@ -1,3 +1,69 @@
 @charset "utf-8";
 
-#pay {}
+#pay {
+  padding: 20px;
+
+  .title {
+    color: #242424FF;
+    font-size: 16px;
+    margin-bottom: 20px;
+    font-weight: 600;
+  }
+
+  .info {
+    margin-bottom: 20px;
+    color: #303036FF;
+
+    .info-block {
+      padding: 20px 5px;
+      border-bottom: 1px solid #eee;
+
+      .info-item {
+        font-size: 12px;
+
+        .f-r {
+          color: #8897A8FF;
+        }
+      }
+    }
+  }
+
+  .desc {
+    color: #303036FF;
+    margin-bottom: 30px;
+  }
+
+  .agree {
+    color: #5E677BFF;
+
+    .ant-checkbox-wrapper {
+      margin-right: 10px;
+    }
+  }
+
+  .fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    line-height: 64px;
+    padding: 0 15px;
+    border-top: 1px solid #eee;
+    background: #fff;
+
+    .tip {
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+      top: -50px;
+      color: #A7A7B7FF;
+      font-size: 12px;
+    }
+
+    .fee {
+      display: inline-block;
+    }
+  }
+}

+ 94 - 21
front/project/h5/routes/page/pay/page.js

@@ -1,11 +1,12 @@
-// import React from 'react';
+import React from 'react';
 import './index.less';
+import { Link } from 'react-router-dom';
 import Page from '@src/containers/Page';
+import { Checkbox } from 'antd';
 // import Assets from '@src/components/Assets';
 // import { getMap, formatDate } from '@src/services/Tools';
-// import Checkbox from '../../../components/CheckBox';
-// import Button from '../../../components/Button';
-// import Icon from '../../../components/Icon';
+import Button from '../../../components/Button';
+import Money from '../../../components/Money';
 import { Order } from '../../../stores/order';
 import { Main } from '../../../stores/main';
 // import { ServiceKey } from '../../../../Constant';
@@ -19,43 +20,115 @@ export default class extends Page {
 
   initData() {
     const { id } = this.params;
-    Order.getOrder(id)
-      .then(result => {
-        this.setState({ data: result });
-      });
-    Main.getContract('course')
-      .then(result => {
-        this.setState({ contract: result });
-      });
+    Order.getOrder(id).then(result => {
+      this.setState({ data: result });
+    });
+    Main.getContract('course').then(result => {
+      this.setState({ contract: result });
+    });
   }
 
   pay() {
     const { id } = this.params;
-    Order.wechatJs(id)
-      .then(() => {
-
-      });
+    Order.wechatJs(id).then(() => {});
   }
 
   renderView() {
     const { productType } = this.state;
+    let info = '';
     if (productType === 'data') {
-      return this.renderData();
+      info = this.renderData();
     }
     if (productType === 'course_package') {
-      return this.renderCoursePackage();
+      info = this.renderCoursePackage();
+    } else {
+      info = this.renderSingle();
     }
-    return this.renderSingle();
+    info = this.renderData();
+    return (
+      <div className="detail">
+        <div className="title" style={{ marginBottom: 0 }}>
+          商品信息
+        </div>
+        {info}
+        <div className="title">退款政策</div>
+        <div className="desc">本产品为虚拟产品,购买成功后不支持退款。</div>
+        <div className="title">版权说明</div>
+        <div className="desc">本商品仅限购买者本人使用,不可商用和传播。</div>
+        <div className="agree">
+          <Checkbox />
+          我已阅读并同意 <Link to="">千行课程购买协议</Link>
+        </div>
+        <div className="fixed">
+          <div className="tip">*若在购买过程中遇到问题,请联系千行小助手协助解决</div>
+          <div className="fee">
+            应付: <Money value={1000} size="lager" />
+          </div>
+          <Button
+            width={110}
+            className="f-r"
+            radius
+            onClick={() => {
+              this.buy();
+            }}
+          >
+            立即购买
+          </Button>
+        </div>
+      </div>
+    );
   }
 
   renderData() {
+    return (
+      <div className="info data">
+        <div className="info-block">
+          XXXXXX资料 <Money className="f-r" value={300} />
+        </div>
+        <div className="info-block">
+          <div className="info-item">
+            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
+          </div>
+          <div className="info-item">
+            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
+          </div>
+          <div className="info-item">
+            OG 20 语法 SC <span className="f-r">开通有效期: 3个月 使用有效期: 3个月</span>
+          </div>
+        </div>
+      </div>
+    );
   }
 
   renderCoursePackage() {
-
+    return (
+      <div className="info course-package">
+        <div className="info-block">
+          OG 20套餐 <Money className="f-r" value={300} />
+        </div>
+        <div className="info-block">
+          开通有效期 <span className="f-r">3个月</span>
+        </div>
+        <div className="info-block">
+          使用有效期 <span className="f-r">3个月</span>
+        </div>
+      </div>
+    );
   }
 
   renderSingle() {
-
+    return (
+      <div className="info single">
+        <div className="info-block">
+          OG 20套餐 <Money className="f-r" value={300} />
+        </div>
+        <div className="info-block">
+          开通有效期 <span className="f-r">3个月</span>
+        </div>
+        <div className="info-block">
+          使用有效期 <span className="f-r">3个月</span>
+        </div>
+      </div>
+    );
   }
 }

+ 1 - 2
front/project/h5/routes/product/index.js

@@ -6,7 +6,6 @@ import courseVideo from './courseVideo';
 import courseDetail from './courseDetail';
 import coursePackage from './coursePackage';
 import courseVs from './courseVs';
-import bought from './bought';
 import main from './main';
 
-export default [courseVideo, coursePackage, courseVs, courseDetail, serviceDetail, data, dataDetail, dataHistory, bought, main];
+export default [courseVideo, coursePackage, courseVs, courseDetail, serviceDetail, data, dataDetail, dataHistory, main];

+ 10 - 2
front/src/containers/App.js

@@ -69,10 +69,18 @@ export default class App extends Component {
                 path={route.matchPath || route.path}
                 render={props => {
                   if (project.loginAuth && !project.loginAuth(route, store.getState())) {
-                    return <Redirect to={project.loginPath || '/login'} />;
+                    return (
+                      <Redirect
+                        to={`${project.loginPath || '/login'}?url=${encodeURIComponent(window.location.href)}`}
+                      />
+                    );
                   }
                   if (project.powerAuth && !project.powerAuth(route, store.getState())) {
-                    return <Redirect to={project.powerPath || '/power'} />;
+                    return (
+                      <Redirect
+                        to={`${project.powerPath || '/power'}?url=${encodeURIComponent(window.location.href)}`}
+                      />
+                    );
                   }
                   return this.renderMode(route, props);
                 }}

+ 1 - 0
front/src/stores/core.js

@@ -58,6 +58,7 @@ export default class CoreStore extends Base {
   }
 
   locationChange(location, action) {
+    console.log(location, action);
     if (action === 'POP') {
       this.locationPop(location);
     } else if (action === 'REPLACE') {