［新增］部署

mock/serializers/user/UserSerializer.js

@@ -14,7 +14,7 @@ const makeId = require("../../util/makeId");
  * @param role
  * @returns {UserSerializerType}
  */
-module.exports = (role = "TEACHER") => {
+module.exports = (role = "STUDENT") => {
   return {
     id: makeId(),
     role: role,

src/views/student/Code/ProjectDetail/DeployDetail.vue

@@ -1,3 +1,90 @@
 <template>
-  <h1>DEPLOY</h1>
+  <div class="data-table">
+    <section>
+      <button
+        :class="['button', 'block', 'is-link', { 'is-loading': isActive }]"
+        @click="isActive = !isActive"
+      >
+        开始部署
+      </button>
+      <b-message
+        title="部署进行中..."
+        :active.sync="isActive"
+        type="is-warning"
+      >
+        部署已经开始，一次部署需要大约5－10分钟，请5-10分钟后刷新页面获取部署结果
+      </b-message>
+    </section>
+    <!--部署记录-->
+    <div class="deploy-list">
+      <div class="subtitle">部署结果</div>
+      <div class="deploy-item">本次部署ID: #{{ deployInfo.id }}</div>
+      <div class="deploy-item">本次部署时间: 2019-01-14 15:05</div>
+      <div class="deploy-item">
+        部署结果:
+        <div class="tag is-success">部署成功</div>
+      </div>
+      <div class="deploy-item">
+        <div class="subtitle">项目部署地址</div>
+        <a :href="`http://${deployInfo.pageUrl}`" target="_blank">查看详情</a>
+      </div>
+      <div class="deploy-item">
+        <div class="subtitle">配置信息</div>
+        <div>暂无项目配置信息</div>
+      </div>
+      <div class="deploy-item">
+        <div class="subtitle">部署输出信息</div>
+        <div class="code-section">
+          <div class="code-content">{{ deployInfo.deployMessage }}</div>
+        </div>
+        <!--<div class="code-section">{{deployInfo.deployMessage}}</div>-->
+      </div>
+    </div>
+  </div>
 </template>
+<script>
+import { getDeployDetail } from "@/api/codehw";
+
+export default {
+  data() {
+    return {
+      isActive: false,
+      deployInfo: {}
+    };
+  },
+  mounted() {
+    getDeployDetail(123).then(res => {
+      console.log(res.data);
+      this.deployInfo = res.data;
+    });
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../../../assets/scss/app";
+.deploy-list {
+  margin-top: 1.5rem;
+  .deploy-item {
+    margin-top: 10px;
+    font-weight: bold;
+    .tag {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+  }
+  .subtitle {
+    margin-top: 1.5rem;
+    width: 100%;
+    font-weight: bold;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #dbdbdb;
+  }
+}
+.code-section {
+  background-color: #2d3044;
+  padding: 20px 20px 20px 20px;
+  .code-content {
+    color: #cacff1;
+  }
+}
+</style>