fix: 修复进入首页未弹出角色确认框的问题；修复用户研究页报错的问题

src/modules/home/components/Btn.vue

 <template>
   <div class="btn" :style="{ left: attrs.left, top: attrs.top }">
-    <button>{{attrs.title || ''}}</button>
+    <button :class="{ disabled: disabled }">{{attrs.title || ''}}</button>
   </div>
 </template>
 <script>
 export default {
   props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     attrs: {
       type: Object,
       default() {
@@ -20,6 +24,22 @@ export default {
   position:absolute;
   left:0;
   top:0;
+  background:#fff;
+  border-radius: 16px;
+}
+.btn::before, .btn::after{
+  content: '';
+  display:block;
+  width:3px;
+  height:15px;
+  background:#333;
+  position:absolute;
+  left:35%;
+  top:-15px;
+  border-radius:1px;
+}
+.btn::after{
+  left:65%;
 }
 button{
   display: inline-block;
@@ -48,4 +68,9 @@ button{
 button:hover{
   background:rgba(96,167,151, .8);
 }
+button.disabled{
+  background:#b4dcd2;
+  border-color:#c3c3c3;
+  cursor: not-allowed;
+}
 </style>

src/modules/home/components/RoleSelect.vue

@@ -55,7 +55,11 @@ export default {
   },
   methods: {
     handleSelect() {
+      if (this.roleSelected) {
         this.$emit('roleSelect', this.roleSelected)
+      } else {
+        this.$message.error('请选择角色')
+      }
     }
   }
 }

src/modules/home/views/Index.vue

@@ -8,8 +8,10 @@
         <div class="logo">金融</div>
         <app-menu />
       </div>
+      <el-button type="primary" disabled>1111</el-button>
+      <!-- <btn :attrs="{ title: '用户分析', left: '360px', top: '134px' }" @click.native="handleClick('/user-study')" disabled/> -->
+      <btn v-for="(item, index) in btnList" :key="index" :attrs="{ title: item.label, left: item.left, top: item.top }" @click.native="handleClick(item)" :disabled="item.disabled.includes(role)"/>
     </div>
-    <!-- <btn :attrs="{ title: '用户研究', left: '240px', top: '120px' }" @click.native="handleClick('/user-study')" /> -->
     <role-select :visible="visible" @roleSelect="fetchSelectRole" />
   </div>
 </template>
@@ -17,18 +19,18 @@
 <script>
 import AppMenu from '@/components/base/AppMenu.vue'
 import RoleSelect from '../components/RoleSelect.vue'
+import Btn from '../components/Btn.vue'
 import { selectRole } from '../api'
 export default {
-  components: { AppMenu, RoleSelect },
+  components: { AppMenu, RoleSelect, Btn },
   data() {
     return {
       visible: false,
-      menuList: [
-        { label: '首页', path: '/home' },
-        { label: '产品分析', path: '/product-analysis' },
-        { label: '用户研究', path: '/user-study' },
-        { label: '营销工具使用', path: '/market-tools' },
-        { label: '作品展示', path: '/works-show' }
+      btnList: [
+        { label: '产品分析', path: '/product-analysis', disabled: [0, 2, 3], left: '960px', top: '134px' },
+        { label: '用户分析', path: '/user-study', disabled: [0, 1, 3], left: '340px', top: '134px' },
+        { label: '营销工具使用', path: '/market-tools', disabled: [0, 1, 2], left: '650px', top: '344px' },
+        { label: '作品展示', path: '/works-show', disabled: [], left: '320px', top: '344px' }
       ],
       menuMap: {}
     }
@@ -39,11 +41,21 @@ export default {
     },
     case() {
       return this.$store.state.case
+    },
+    role() {
+      return this.$store.state.role
+    }
+  },
+  created() {
+    if (!this.role) {
+      this.visible = true
     }
   },
   methods: {
-    handleClick(path) {
-      this.$router.push(path)
+    handleClick(item) {
+      if (!item.disabled.includes(this.role)) {
+        this.$router.push(item.path)
+      }
     },
     menuSelect(item) {
       this.$router.push(item.path)

src/modules/user-study/views/Index.vue

@@ -98,35 +98,36 @@ export default {
     }
   },
   created() {
-    console.log(this.$store.state.case)
     this.init()
     this.status = this.$route.query.type || '0'
   },
   methods: {
     init() {
-      if (!(this.$store.state.case && this.$store.state.case.id)) {
-        this.$alert('请先选择完成产品分析案例选择，再进行用户分析', {
-          confirmButtonText: '重新开始',
-          showClose: false,
-          callback: action => {
-            this.$route.push('/home')
-          }
-        })
-      } else {
       Promise.all([this.fetchQuestions(), this.fetchGetReport()]).then(res => {
         // 组装数据
         const questions = res[0]
-          const selection = res[1].answer.options
+        console.log(res[0], res[1])
+        let selection = []
+        if (res[1].answer && Array.isArray(res[1].answer.options)) {
+          selection = res[1].answer.options
+          this.score = res[1].answer.score
+        }
         if (selection.length > 0 && this.status !== '3') {
           this.status = '1'
         }
         this.initQuestions(questions, selection)
-          this.score = res[1].answer.score
         this.handleChoiceSelect()
       }).catch(err => {
-          console.log(err)
+        if (!(this.$store.state.case && this.$store.state.case.id)) {
+          this.$alert('请先选择完成产品分析案例选择，再进行用户分析', {
+            confirmButtonText: '回到首页',
+            showClose: false,
+            callback: action => {
+              this.$route.push('/home')
+            }
           })
         }
+      })
     },
     handlePrev() {
       this.current.index--

src/modules/works-show/views/Index.vue

@@ -23,7 +23,7 @@
         <div class="btn-bar" v-if="marketing_status">
           <el-button type="primary" size="medium" plain round :disabled="[0, 1, 2].includes(role)"  @click="handleGo(4)">编辑</el-button>
         </div>
-        <p class="tips" v-else>您还未完成产品分析报告，<br>请先去完成吧！</p>
+        <p class="tips" v-else>您还未完成营销工具使用，<br>请先去完成吧！</p>
       </div>
     </div>
   </div>