add api

@@ -7,16 +7,42 @@
       </div>
     </div>
 
+    <div class="shoe bg1"></div>
+
     <div style="position: absolute; width: 100%;">
-      <div class="item account">
-        <input class="input-class" name="account" placeholder="支付宝帐号"></input>
+      <div class="item">
+        <div class="logo"></div>
+      </div>
+
+      <div class="item">
+        <div class="title"></div>
+      </div>
+
+      <div class="item">
+        <div class="desc"></div>
+      </div>
+
+      <div class="item">
+        <div class="account-label"></div>
       </div>
 
-      <div class="item username">
-        <input class="input-class" name="username" placeholder="支付宝姓名"></input>
+      <div class="item">
+        <input class="input-class" v-model="alipayAccount" name="account" placeholder="支付宝帐号"></input>
       </div>
 
-      <div class="item submit">
+      <div class="item">
+        <div class="name-label"></div>
+      </div>
+
+      <div class="item">
+        <input class="input-class" v-model="alipayName" name="username" placeholder="支付宝姓名"></input>
+      </div>
+
+      <div class="item">
+        <div class="tip"></div>
+      </div>
+
+      <div class="item">
         <div class="btn" @click="onClick"></div>
       </div>
 
@@ -26,14 +52,87 @@
 
 <script>
 
+import { Dialog } from 'cube-ui';
+
 export default {
   name: 'AlipayForm',
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      alipayAccount: '',
+      alipayName: ''
+    };
+  },
   methods: {
     onClick() {
-      console.log('huangtao');
+      if (!this.alipayAccount || !this.alipayName) {
+        this.$createToast({
+          type: 'warn',
+          time: 1000,
+          txt: '不能为空'
+        }).show();
+        return;
+      }
+
+      this.showBtn();
     },
     onBack() {
       this.$yoho.finishPage({});
+    },
+    content() {
+      return `信息一旦提交后不可修改，确认提交吗？<br>支付宝账号：${this.alipayAccount} <br>支付宝姓名：${this.alipayName}`;
+    },
+    showBtn() {
+      this.$createDialog({
+        type: 'confirm',
+        content: this.content(),
+        confirmBtn: {
+          text: '确定',
+          active: true,
+          disabled: false,
+          href: 'javascript:;'
+        },
+        cancelBtn: {
+          text: '取消',
+          active: false,
+          disabled: false,
+          href: 'javascript:;'
+        },
+        onConfirm: () => {
+          this.submit();
+        },
+        onCancel: () => {
+          // this.$createToast({
+          //   type: 'warn',
+          //   time: 1000,
+          //   txt: '点击取消按钮'
+          // }).show();
+        }
+      }).show();
+    },
+    submit() {
+      this.$api.post('/alipay/submit', {
+        alipayAccount: this.alipayAccount,
+        alipayName: this.alipayName
+      }).then(result => {
+        if (result.code !== 200) {
+          this.$createToast({
+            type: 'warn',
+            time: 1000,
+            txt: result.message
+          }).show();
+          return;
+        }
+
+        this.$createToast({
+          type: 'text',
+          time: 1000,
+          txt: result.message
+        }).show();
+      });
+
     }
   }
 };
@@ -49,7 +148,75 @@ export default {
   }
 
   .bg {
-    background-image: url("~statics/image/alipay/bg.jpg");
+    background-image: url("~statics/image/alipay/bg1.png");
+    background-size: contain;
+  }
+
+  .bg1 {
+    background-image: url("~statics/image/alipay/bg2.png");
+    background-size: cover;
+  }
+
+  .logo {
+    display: inline-block;
+    width: 361px;
+    height: 62px;
+    margin-top: 45px;
+    background-image: url("~statics/image/alipay/logo.png");
+    background-size: cover;
+  }
+
+  .title {
+    display: inline-block;
+    width: 474px;
+    height: 240px;
+    margin-top: 40px;
+    background-image: url("~statics/image/alipay/title.png");
+    background-size: cover;
+  }
+
+  .desc {
+    display: inline-block;
+    width: 645px;
+    height: 352px;
+    margin-top: 30px;
+    background-image: url("~statics/image/alipay/desc.png");
+    background-size: cover;
+  }
+
+  .tip {
+    display: inline-block;
+    width: 483px;
+    height: 52px;
+    margin-top: 20px;
+    background-image: url("~statics/image/alipay/tip.png");
+    background-size: cover;
+  }
+
+  .shoe {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 213px;
+    background-image: url("~statics/image/alipay/bg2.png");
+    background-size: cover;
+  }
+
+  .account-label {
+    display: inline-block;
+    width: 181px;
+    height: 33px;
+    margin-top: 50px;
+    background-image: url("~statics/image/alipay/account.png");
+    background-size: cover;
+  }
+
+  .name-label {
+    display: inline-block;
+    width: 181px;
+    height: 32px;
+    margin-top: 25px;
+    background-image: url("~statics/image/alipay/name.png");
     background-size: cover;
   }
 
@@ -61,6 +228,7 @@ export default {
   .input-class {
     width: 480px;
     height: 57px;
+    margin-top: 20px;
     border: 2px solid #131835;
     font-size: 17px;
     color: #131835;
@@ -84,8 +252,11 @@ export default {
 
   .btn {
     display: inline-block;
-    width: 300px;
-    height: 130px;
+    width: 227px;
+    height: 71px;
+    margin-top: 40px;
+    background-image: url("~statics/image/alipay/btn.png");
+    background-size: cover;
   }
 
   .header {

@@ -132,6 +132,13 @@ module.exports = {
     SECRET_KEY: '_x2VtO7fEmylgjojmLi7qwTBtRm30S8BrO0FxOPK',
     ORIGIN: 'https://cdn.yoho.cn',
     BUCKET_NAME: 'yohocdn'
+  },
+  mysql: {
+    host: 'localhost',
+    userName: 'root',
+    password: 'root',
+    port: '3306',
+    db: 'yoho_apm_test'
   }
 };
 
@@ -263,6 +270,13 @@ if (isProduction) {
         prettyPrint: true,
         debugStdout: true
       }
+    },
+    mysql: {
+      host: '192.168.102.219',
+      userName: 'yh_test',
+      password: 'yh_test',
+      port: '3306',
+      db: 'yoho_apm_test'
     }
   });
 }

@@ -81,13 +81,16 @@ exports.createApp = async(app) => {
     const ssrApiMiddleware = require('./doraemon/middleware/ssr-api');
     const ssrRouteMiddleware = require('./doraemon/middleware/ssr');
     const qiniuMiddleware = require('./doraemon/middleware/qiniu');
+    const alipayRouter = require('./doraemon/router');
 
     // YOHO 前置中间件
     app.use(setYohoDataMiddleware);
     app.use(userMiddleware);
     app.get('/mapp/getToken', qiniuMiddleware.getToken);
+    app.use('/mapp/alipay', alipayRouter);
     app.use('/mapp', ssrApiMiddleware);
 
+
     app.use(ssrRouteMiddleware.routers);
 
     app.all('*', ssrRouteMiddleware.ssrRender); // 404

+const alipayService = require('./alipay.service');
+
+function submit(req, res, next) {
+  const { alipayAccount, alipayName } = req.body;
+  const uid = req.user.uid;
+
+  // if (!uid) {
+  //   return res.json({
+  //     code: 401,
+  //     message: '抱歉，您暂未登录！'
+  //   });
+  // }
+
+  if (!alipayAccount || !alipayName) {
+    return res.json({
+      code: 404,
+      message: '用户名或帐号不能为空，请重新填写'
+    });
+  }
+
+  alipayService.create({ uid, alipayAccount, alipayName }).then(result => {
+    if (result.error) {
+      return res.json(result.error);
+    }
+
+    return res.json(result);
+  }).catch(next);
+}
+
+module.exports = {
+  submit
+};

+const mysql = require('./mysql-client');
+const TABEL = 'user_alipay';
+
+
+async function insert(data) {
+  return mysql(TABEL).insert({
+    ...data,
+    createdAt: new Date().valueOf()
+  });
+}
+
+module.exports = {
+  insert
+};

+const alipayRepository = require('./alipay.repository');
+const { logger } = global.yoho;
+
+async function create({ uid, alipayAccount, alipayName }) {
+  try {
+    const result = await alipayRepository.insert({
+      uid, alipayAccount, alipayName
+    });
+
+    if (!result) {
+      return {
+        error: {
+          code: 500,
+          message: '服务器出错，请稍候再来提交'
+        }
+      };
+    }
+
+    return {
+      code: 200,
+      message: '提交成功'
+    };
+  } catch (e) {
+    if (e.code === 'ER_DUP_ENTRY') {
+      // 重复的情况
+      return {
+        error: {
+          code: 404,
+          message: '您已提交过支付宝信息，请不要重复提交！'
+        }
+      };
+    } else {
+      logger.error('mysql error =>', e);
+
+      return {
+        error: {
+          code: 500,
+          message: '服务器出错，请稍候再来提交'
+        }
+      };
+    }
+  }
+}
+
+module.exports = {
+  create
+};

+const knex = require('knex');
+const config = global.yoho.config;
+
+function init() {
+  return knex({
+    client: 'mysql',
+    connection: {
+      host: config.mysql.host,
+      port: config.mysql.port,
+      user: config.mysql.userName,
+      password: config.mysql.password,
+      database: config.mysql.db
+    },
+    pool: { min: 0, max: 10 }
+  });
+}
+
+module.exports = init();

@@ -7,7 +7,10 @@
 'use strict';
 
 const router = require('express').Router(); // eslint-disable-line
-// const cRoot = './controllers';
 
+const alipayController = require('./middleware/alipay.controller');
+const auth = require('./middleware/auth');
+
+router.post('/submit', alipayController.submit);
 
 module.exports = router;

@@ -42,8 +42,10 @@
     "express": "^4.16.4",
     "express-session": "^1.15.6",
     "fastclick": "^1.0.6",
+    "knex": "^0.16.3",
     "lodash": "^4.17.11",
     "lottie-web": "^5.4.2",
+    "mysql": "^2.16.0",
     "qiniu": "^7.2.1",
     "request-promise": "^4.2.2",
     "serve-favicon": "^2.5.0",