feat: 产品分析开发完成

src/modules/product-analysis/api.js

@@ -16,3 +16,20 @@ export function getCasesList(id) {
 export function selectCase(id) {
   return httpRequest.post(`/api/xtraining/api/v1/${id}/select-case`, {})
 }
+
+// 获取产品分析填空题
+export function caseCompletions(id) {
+  return httpRequest.get(`/api/xtraining/api/v1/${id}/case-completions`, {})
+}
+
+// 提交案例（产品）分析报告
+export function commitCase(data) {
+  return httpRequest.post('/api/xtraining/api/v1/commit-case', data, {
+    headers: { 'Content-Type': 'application/json' }
+  })
+}
+
+// 获取案例（产品）分析结答题结果
+export function getCommitCase() {
+  return httpRequest.get('/api/xtraining/api/v1/commit-case-detail', {})
+}

src/modules/product-analysis/components/Compares.vue

@@ -21,6 +21,9 @@
 <script>
 import Box from './Box.vue'
 export default {
+  props: {
+    data: { type: Object }
+  },
   components: { Box },
   data() {
     return {
@@ -41,6 +44,16 @@ export default {
       }
       this.inputList.splice(index, 1)
     }
+  },
+  created() {
+    console.log(this.data.completions[0])
+    if (this.data.completions[0].commit_answer !== '') {
+      this.inputList = []
+      this.data.completions[0].commit_answer.split(';').forEach(item => {
+        const val = item.split(',')
+        this.inputList.push({ input1: val[0], input2: val[1] })
+      })
+    }
   }
 }
 </script>

src/modules/product-analysis/components/Cost.vue

@@ -5,7 +5,7 @@
         <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i1.png" class="icon">
         <div class="right-con">
           <div class="num">
-            <input v-model="form.input1" type="text">
+            <input v-model="data.completions[0].commit_answer" type="text" placeholder="请输入">
             <span>%</span>
           </div>
           <div class="name">托管费</div>
@@ -15,7 +15,7 @@
         <img src="https://webapp-pub.ezijing.com/x-training-new/cost-i2.png" class="icon">
         <div class="right-con col-blue">
           <div class="num">
-            <input v-model="form.input2" type="text">
+            <input v-model="data.completions[1].commit_answer" type="text" placeholder="请输入">
             <span>%</span>
           </div>
           <div class="name">管理费</div>
@@ -29,13 +29,11 @@
 import Box from './Box.vue'
 export default {
   components: { Box },
+  props: {
+    data: { type: Object }
+  },
   data() {
-    return {
-      form: {
-        input1: '',
-        input2: ''
-      }
-    }
+    return {}
   }
 }
 </script>
@@ -85,6 +83,9 @@ export default {
           height: 28px;
           width: 65px;
           text-align: right;
+          &::-webkit-input-placeholder{
+            font-size: 16px;
+          }
         }
         span{
           font-size: 14px;

src/modules/product-analysis/components/Features.vue

 <template>
   <box title="风险收益特征">
     <div class="content-box">
-      <input type="text" class="input-id1" placeholder="请输入基金类型">
-      <input type="text" class="input-id2" placeholder="请输入基金类型">
-      <input type="text" class="input-id3" placeholder="请输入基金类型">
-      <input type="text" class="input-id4" placeholder="请输入基金类型">
+      <input v-for="(item, index) in data.completions" :key="index" v-model="item.commit_answer" type="text" :class="`input-id${index + 1}`" placeholder="请输入基金类型">
     </div>
   </box>
 </template>
@@ -12,7 +9,13 @@
 <script>
 import Box from './Box.vue'
 export default {
-  components: { Box }
+  components: { Box },
+  props: {
+    data: { type: Object }
+  },
+  mounted() {
+    console.log(this.data)
+  }
 }
 </script>
 

src/modules/product-analysis/components/InvestTarget.vue

 <template>
   <box title="投资目标">
-    <textarea></textarea>
+    <textarea v-for="(item, index) in data.completions" v-model="item.commit_answer" :key="index"></textarea>
   </box>
 </template>
 
@@ -9,15 +9,23 @@ import Box from './Box.vue'
 export default {
   components: {
     Box
+  },
+  props: {
+    data: {
+      type: Object
+    }
+  },
+  data() {
+    return {}
   }
 }
 </script>
 
 <style lang="scss" scoped>
-textarea{
+textarea {
   width: 603px;
   height: 150px;
-  background: #ECECEC;
+  background: #ececec;
   border-radius: 10px;
   outline: none;
   resize: none;

src/modules/product-analysis/components/Products.vue

 <template>
   <box title="产品概括">
     <ul>
-      <li v-for="(item, index) in productList" :key="index">
-        <img :src="item.icon" class="icon">
-        <div class="tag">{{ item.tag }}</div>
-        <textarea placeholder="请输入"></textarea>
+      <li v-for="(item, index) in data.completions" :key="index">
+        <img :src="`https://webapp-pub.ezijing.com/x-training-new/products${index + 1}.png`" class="icon" />
+        <div class="tag">{{ item.subject }}</div>
+        <textarea placeholder="请输入" v-model="item.commit_answer"></textarea>
       </li>
     </ul>
   </box>
@@ -14,121 +14,99 @@
 import Box from './Box.vue'
 export default {
   components: { Box },
+  props: {
+    data: { type: Object }
+  },
   data() {
-    return {
-      productList: [
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products1.png',
-          tag: '基金类型'
-        },
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products2.png',
-          tag: '运作方式'
-        },
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products3.png',
-          tag: '开放频率'
-        },
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products4.png',
-          tag: '交易币种'
-        },
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products5.png',
-          tag: '基金管理人'
-        },
-        {
-          icon: 'https://webapp-pub.ezijing.com/x-training-new/products6.png',
-          tag: '基金委托人'
-        }
-      ]
-    }
+    return {}
+  },
+  created() {
   }
 }
 </script>
 
 <style lang="scss" scoped>
-ul{
+ul {
   padding-top: 27px;
   display: flex;
   flex-wrap: wrap;
   margin-right: -24px;
-  li{
+  li {
     margin-right: 18px;
     margin-bottom: 13px;
     width: 198px;
     height: 240px;
-    background: #F1FCF9;
-    border: 1px solid #B8EBDE;
+    background: #f1fcf9;
+    border: 1px solid #b8ebde;
     border-radius: 12px;
-    &:nth-child(2){
-      background: #ECFAFC;
-      border: 1px solid #B5EBEB;
-      textarea{
-        border-bottom: 1px solid #A5E1E9;
-        color: #62C2D0;
+    &:nth-child(2) {
+      background: #ecfafc;
+      border: 1px solid #b5ebeb;
+      textarea {
+        border-bottom: 1px solid #a5e1e9;
+        color: #62c2d0;
       }
     }
-    &:nth-child(3){
-      background: #FFFDF0;
-      border: 1px solid #F0ECCB;
+    &:nth-child(3) {
+      background: #fffdf0;
+      border: 1px solid #f0eccb;
       margin-right: 0;
-      textarea{
-        border-bottom: 1px solid #DAD396;
-        color: #D9D292;
+      textarea {
+        border-bottom: 1px solid #dad396;
+        color: #d9d292;
       }
     }
-    &:nth-child(4){
-      background: #FDF8EE;
-      border: 1px solid #ECD7AA;
-      textarea{
-        border-bottom: 1px solid #E2C485;
-        color: #E2C485;
+    &:nth-child(4) {
+      background: #fdf8ee;
+      border: 1px solid #ecd7aa;
+      textarea {
+        border-bottom: 1px solid #e2c485;
+        color: #e2c485;
       }
     }
-    &:nth-child(5){
-      background: #FCEDE9;
-      border: 1px solid #F2C1B6;
-      textarea{
-        border-bottom: 1px solid #DE9888;
-        color: #DE9888;
+    &:nth-child(5) {
+      background: #fcede9;
+      border: 1px solid #f2c1b6;
+      textarea {
+        border-bottom: 1px solid #de9888;
+        color: #de9888;
       }
     }
-    &:nth-child(6){
-      background: #F1FCF9;
-      border: 1px solid #B8EBDE;
+    &:nth-child(6) {
+      background: #f1fcf9;
+      border: 1px solid #b8ebde;
       margin-right: 0;
-      textarea{
-        border-bottom: 1px solid #7BC1AF;
-        color: #7BC1AF;
+      textarea {
+        border-bottom: 1px solid #7bc1af;
+        color: #7bc1af;
       }
     }
-    .icon{
+    .icon {
       width: 82px;
       display: block;
       margin: 36px auto 18px;
     }
-    .tag{
+    .tag {
       text-align: center;
       font-size: 16px;
-      color: #8E8E8E;
+      color: #8e8e8e;
       line-height: 100%;
     }
-    textarea{
+    textarea {
       width: 150px;
       height: 43px;
       outline: none;
       resize: none;
       margin: 15px auto 0;
       display: block;
-      border-bottom: 1px solid #7BC1AF;
+      border-bottom: 1px solid #7bc1af;
       background: none;
-      color: #68B8A4;
+      color: #68b8a4;
       text-align: center;
       padding-top: 10px;
-      &::-webkit-input-placeholder{
+      &::-webkit-input-placeholder {
         font-size: 18px;
-        color: #CACACA;
+        color: #cacaca;
       }
     }
   }

src/modules/product-analysis/views/Report.vue

@@ -2,29 +2,32 @@
   <div class="product-analysis-report">
     <div class="page-mian">
       <div class="pdf-left">
-        <embed class="embed" width="100%" height="100%" src="https://test-certificate-frontend-api.ezijing.com/files/6816543487312265216.pdf" />
+        <embed class="embed" width="100%" height="100%" :src="cases.pdf_uris[0]" />
       </div>
       <div class="right-content">
-        <input type="text" class="code" placeholder="请输入基金简称+基金代码" />
+        <input type="text" class="code" placeholder="请输入基金简称+基金代码" v-model="titleValue"/>
         <div class="title">产品分析报告</div>
-        <!-- 产品概括 -->
-        <product></product>
-        <!-- 投资目标 -->
-        <invest-target></invest-target>
-        <!-- 业绩比较基准 -->
-        <compares></compares>
-        <!-- 风险收益特征 -->
-        <features></features>
-        <!-- 基金涉及费用 -->
-        <cost ref="cost"></cost>
+        <div v-for="(item, index) in completions" :key="index">
+          <!-- 产品概括 -->
+          <product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
+          <!-- 投资目标 -->
+          <invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
+          <!-- 业绩比较基准 -->
+          <compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
+          <!-- 风险收益特征 -->
+          <features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
+          <!-- 基金涉及费用 -->
+          <cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
+        </div>
         <!-- 提交 -->
-        <div class="submit-btn" @click="submit">提交报告</div>
+        <div class="submit-btn" @click="commitCase">提交报告</div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { caseCompletions, getCommitCase, commitCase } from '../api'
 import Product from '../components/Products.vue'
 import InvestTarget from '../components/InvestTarget.vue'
 import Compares from '../components/Compares.vue'
@@ -38,9 +41,100 @@ export default {
     Features,
     Cost
   },
+  data() {
+    return {
+      completions: [],
+      resultCompletions: [],
+      titleValue: ''
+    }
+  },
+  computed: {
+    cases() {
+      return this.$store.state.case
+    }
+  },
+  mounted() {
+    this.getCommitCase()
+  },
   methods: {
-    submit() {
-      console.log(this.$refs.cost.form)
+    // 模板  数据回显
+    caseCompletions(id) {
+      caseCompletions(id).then(res => {
+        res.data.items.map(item => {
+          return item.completions.map(cItem => {
+            if (!Array.isArray(this.resultCompletions)) {
+              const findData = this.resultCompletions.answer.find(fItem => { return fItem.id === cItem.id })
+              findData ? cItem.commit_answer = findData.commit_answer : cItem.commit_answer = ''
+            } else {
+              cItem.commit_answer = ''
+            }
+            return cItem
+          })
+        })
+        this.completions = res.data.items
+        // 标题回显
+        this.titleValue = this.completions.find(item => { return item.tag === 'product_title' }).completions[0].commit_answer
+      })
+    },
+    // 结果
+    getCommitCase() {
+      getCommitCase().then(res => {
+        this.resultCompletions = res.data.records
+        this.caseCompletions(this.cases.id)
+      })
+    },
+    // 提交
+    commitCase() {
+      // 产品概括数据
+      const productCount = []
+      this.$refs.product[0].data.completions.forEach(item => {
+        productCount.push({ id: item.id, commit_answer: item.commit_answer })
+      })
+      // 投资目标
+      const originalData = this.$refs.investTarget[0].data.completions[0]
+      const investTargetCount = [{ id: originalData.id, commit_answer: originalData.commit_answer }]
+      // 业绩比较基准数据
+      const comparesCount = []
+      this.$refs.compares[0].inputList.forEach(item => {
+        comparesCount.push(`${item.input1},${item.input2}`)
+      })
+      const comparesData = {
+        id: this.$refs.compares[0].data.completions[0].id,
+        commit_answer: comparesCount.join(';')
+      }
+      // 风险收益特征数据
+      const featuresCount = []
+      this.$refs.features[0].data.completions.forEach(item => {
+        featuresCount.push({ id: item.id, commit_answer: item.commit_answer })
+      })
+      // 基金涉及费用数据
+      const costCount = []
+      this.$refs.cost[0].data.completions.forEach(item => {
+        costCount.push({ id: item.id, commit_answer: item.commit_answer })
+      })
+      // 标题数据
+      const findTitleData = this.completions.find(item => { return item.tag === 'product_title' }).completions[0]
+      const titCount = [{ id: findTitleData.id, commit_answer: this.titleValue }]
+      const allData = [...productCount, ...investTargetCount, ...[comparesData], ...featuresCount, ...costCount, ...titCount]
+      if (allData.findIndex(item => { return item.commit_answer === '' }) === -1) {
+        commitCase({ answers: JSON.stringify(allData) }).then(res => {
+          const data = {
+            score: res.data.score,
+            data: [
+              this.$refs.product[0].data,
+              this.$refs.investTarget[0].data,
+              this.$refs.compares[0].data,
+              this.$refs.features[0].data,
+              this.$refs.cost[0].data,
+              { tag: 'title', value: this.titleValue }
+            ]
+          }
+          window.localStorage.reportData = JSON.stringify(data)
+          this.$router.push({ path: '/product-analysis/result' })
+        })
+      } else {
+        this.$message('请填写完整')
+      }
     }
   }
 }
@@ -53,7 +147,7 @@ input {
   outline: none;
 }
 .product-analysis-report {
-  padding: 33px 100px;
+  padding: 33px 50px;
   .page-mian {
     overflow: hidden;
     background: #fff;

src/modules/product-analysis/views/Result.vue

 <template>
   <div class="result-box">
+    <div class="pop-layer"></div>
     <div class="trophy-box">
       <img src="https://webapp-pub.ezijing.com/x-training-new/trophy.png">
-      <div class="text">你的得分是<span>98</span>分</div>
+      <div class="text">你的得分是<span>{{ score }}</span>分</div>
     </div>
     <div class="title-box">
       <div class="title">产品分析报告</div>
-      <div class="code">广发资源优选股票053476</div>
+      <div class="code">{{ title }}</div>
+    </div>
+    <div v-for="(item, index) in completions" :key="index">
+      <!-- 产品概括 -->
+      <product ref="product" v-if="item.tag === 'product_overview'" :data="item"></product>
+      <!-- 投资目标 -->
+      <invest-target ref="investTarget" v-if="item.tag === 'investment_objectives'" :data="item"></invest-target>
+      <!-- 业绩比较基准 -->
+      <compares ref="compares" v-if="item.tag === 'performance_benchmark'" :data="item"></compares>
+      <!-- 风险收益特征 -->
+      <features ref="features" v-if="item.tag === 'risk_return_characteristics'" :data="item"></features>
+      <!-- 基金涉及费用 -->
+      <cost ref="cost" v-if="item.tag === 'fund_related_expenses'" :data="item"></cost>
     </div>
-    <!-- 产品概括 -->
-    <product></product>
-    <!-- 投资目标 -->
-    <invest-target></invest-target>
-    <!-- 业绩比较基准 -->
-    <compares></compares>
-    <!-- 风险收益特征 -->
-    <features></features>
-    <!-- 基金涉及费用 -->
-    <cost ref="cost"></cost>
   </div>
 </template>
 
@@ -34,6 +37,19 @@ export default {
     Compares,
     Features,
     Cost
+  },
+  data() {
+    return {
+      completions: [],
+      score: '',
+      title: ''
+    }
+  },
+  created() {
+    const localData = JSON.parse(window.localStorage.reportData)
+    this.completions = localData.data
+    this.score = localData.score
+    this.title = this.completions.find(item => { return item.tag === 'title' }).value
   }
 }
 </script>
@@ -47,6 +63,15 @@ export default {
   border-radius: 10px;
   padding: 20px;
   box-sizing: border-box;
+  position: relative;
+  .pop-layer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+  }
   .trophy-box{
     padding: 50px 0 38px 0;
     position: relative;