修改bug 71533

src/views/courseResources/courseDetails/index.vue

@@ -230,6 +230,46 @@
       :course-id="videoId"
       @change="handlePlayerChange"
     />
+<!--    选择身份对话框-->
+    <el-dialog
+      :visible.sync="selectIdentityVisible"
+      width="585px"
+      class="selectIDDialog"
+      :modal-append-to-body="false"
+      :modal="true"
+      :show-close="false"
+      :close-on-click-modal="false"
+      title="请选择您的身份"
+    >
+      <div slot="title">
+        <div class="title">请选择您的身份</div>
+        <div class="closeBox" @click="selectIdentityVisible = false">
+          <el-image
+            class="img"
+            :src="require('@/assets/image/kezi_icon_guanbi.png')"
+            fit="cover"
+          />
+        </div>
+      </div>
+      <div class="identity-box">
+        <div class="identity-card" @click="toCourseMall('firm')">
+          <el-image
+            class="img"
+            :src="require('@/assets/image/touxiang_img_male4.png')"
+            fit="cover"
+          />
+          <div class="identity-name">企业用户</div>
+        </div>
+        <div class="identity-card" @click="toCourseMall('college')">
+          <el-image
+            class="img"
+            :src="require('@/assets/image/touxiang_img_male2.png')"
+            fit="cover"
+          />
+          <div class="identity-name">院校用户</div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -252,6 +292,8 @@ export default {
   },
   data() {
     return {
+      // 控制是否打开选择身份对话框
+      selectIdentityVisible: false,
       loading: false,
       videoId: '', // 试听课视频id
       // 课程是否可观看
@@ -400,6 +442,14 @@ export default {
     this.getRecommendCourse()
   },
   methods: {
+    // 跳转 课程商城
+    toCourseMall(param) {
+      this.selectIdentityVisible = false
+      this.$router.push({
+        path: '/courseResources/courseMall/index',
+        query: { mallIdentityType: param }
+      })
+    },
     handlePlayerChange(e) {
       this.dialogVisible = e
     },
@@ -503,7 +553,7 @@ export default {
     },
     // 查看更多推荐课程
     getMore() {
-      console.log('查看更多')
+      this.selectIdentityVisible = true
     },
     // 获取课程介绍详情内容
     getCourseDetails() {
@@ -1218,4 +1268,103 @@ export default {
     color: #f96f21;
   }
 }
+// 选择身份的样式
+.selectIDDialog {
+  ::v-deep .el-dialog {
+    .el-dialog__header {
+      position: relative;
+      text-align: center;
+      padding: 54px 0 0 0;
+
+      .title {
+        display: block;
+        height: 36px;
+        font-size: 24px;
+        font-family: Microsoft YaHei, Microsoft YaHei-700, serif;
+        font-weight: 500;
+        color: #6f6f6f;
+        line-height: 36px;
+      }
+
+      .closeBox {
+        cursor: pointer;
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        top: -32px;
+        right: -48px;
+        border-radius: 50%;
+
+        .img {
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+        }
+      }
+
+      .closeBox:hover,
+      .closeBox:focus {
+        background-color: #292929;
+      }
+
+      //.el-dialog__headerbtn {
+      //  position: absolute;
+      //  top: -32px;
+      //  right: -48px;
+      //  width: 24px;
+      //  height: 24px;
+      //  background: #9fa3a1;
+      //  border-radius: 50%;
+      //
+      //  .el-dialog__close {
+      //    color: black;
+      //  }
+      //}
+
+      //.el-dialog__headerbtn:focus .el-dialog__close,
+      //.el-dialog__headerbtn:hover .el-dialog__close {
+      //  color: #46bcf3;
+      //}
+    }
+
+    .el-dialog__body {
+      padding: 0;
+
+      .identity-box {
+        display: flex;
+        padding: 52px 137px 98px 137px;
+        justify-content: space-between;
+
+        .identity-card {
+          cursor: pointer;
+          width: 96px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          .img {
+            width: 96px;
+            height: 96px;
+          }
+
+          .identity-name {
+            height: 27px;
+            font-size: 18px;
+            font-family: Microsoft YaHei, Microsoft YaHei-700, serif;
+            font-weight: 500;
+            color: #6f6f6f;
+            line-height: 27px;
+            text-align: center;
+            margin-top: 16px;
+          }
+        }
+
+        .identity-card:hover .identity-name,
+        .identity-card:focus .identity-name {
+          color: #3888fc;
+        }
+      }
+    }
+  }
+}
 </style>