客栈学院发布页 添加示意图 详情收藏提示

pages/frontend/learn/add.vue

@@ -37,14 +37,24 @@
                 <el-input show-word-limit maxlength="15" type="textarea" v-model="saleInfo.desc"></el-input>
               </el-form-item>
               <el-form-item label="列表封面">
-                <el-upload
-                  class="avatar-uploader"
-                  action="/upload_image"
-                  :show-file-list="false"
-                  :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,1)">
-                  <img v-if="saleInfo.img_icon" :src="saleInfo.img_icon" class="avatar">
-                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
-                </el-upload>
+                <div class="common-upload">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="/upload_image"
+                    :show-file-list="false"
+                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,1)">
+                    <img v-if="saleInfo.img_icon" :src="saleInfo.img_icon" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                  </el-upload>
+                  <div class="look-img">
+                    <div class="text-hover">
+                      <span class="text">查看示意图</span>
+                      <div class="img">
+                        <img class="active-img1" src="@/assets/img/learn/img-add@2x.png"/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </el-form-item>
               <el-form-item label="计费模式">
                 <el-radio v-model="saleInfo.pricetype" label="1">免费</el-radio>
@@ -88,20 +98,30 @@
 
             <el-form v-if="active==2" style="margin-top: 60px" ref="form" label-width="80px">
               <el-form-item label="讲师名称">
-                <el-input v-model="teacherInfo.name"></el-input>
+                <el-input v-model="teacherInfo.name" show-word-limit maxlength="15"></el-input>
               </el-form-item>
               <el-form-item label="职称">
-                <el-input v-model="teacherInfo.op"></el-input>
+                <el-input v-model="teacherInfo.op" show-word-limit maxlength="15"></el-input>
               </el-form-item>
               <el-form-item label="封面">
-                <el-upload
-                  class="avatar-uploader"
-                  action="/upload_image"
-                  :show-file-list="false"
-                  :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,2)">
-                  <img v-if="teacherInfo.img" :src="teacherInfo.img" class="avatar">
-                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
-                </el-upload>
+                <div class="common-upload">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="/upload_image"
+                    :show-file-list="false"
+                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,2)">
+                    <img v-if="teacherInfo.img" :src="teacherInfo.img" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                  </el-upload>
+                  <div class="look-img">
+                    <div class="text-hover">
+                      <span class="text">查看示意图</span>
+                      <div class="img">
+                        <img class="active-img1" src="@/assets/img/learn/img-add@2x.png"/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </el-form-item>
               <el-form-item label="自我介绍">
                 <el-input :rows="10" type="textarea" v-model="teacherInfo.content"></el-input>
@@ -114,23 +134,33 @@
 
             <el-form v-if="active==3" style="margin-top: 60px" ref="form"  label-width="80px">
               <el-form-item label="视频封面">
-                <el-upload
-                  class="avatar-uploader"
-                  action="/upload_image"
-                  :show-file-list="false"
-                  :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,3)">
-                  <img v-if="saleInfo.video_img" :src="saleInfo.video_img" class="avatar">
-                  <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
-                </el-upload>
+                <div class="common-upload">
+                  <el-upload
+                    class="avatar-uploader"
+                    action="/upload_image"
+                    :show-file-list="false"
+                    :on-success="(response, file, fileList)=> upload_img_success(response, file, fileList,3)">
+                    <img v-if="saleInfo.video_img" :src="saleInfo.video_img" class="avatar">
+                    <i v-else class="el-icon-plus avatar-uploader-icon" style="border-radius: 6px;border: 1px dashed #d9d9d9;height: 178px;line-height: 178px;width: 178px"></i>
+                  </el-upload>
+                  <div class="look-img">
+                    <div class="text-hover">
+                      <span class="text">查看示意图</span>
+                      <div class="img">
+                        <img class="active-img2" src="@/assets/img/learn/video-add@2x.png"/>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </el-form-item>
               <el-form-item  label="章节管理">
-                <div v-for="(item,index) in video_list">
+                <div v-for="(item,index) in video_list" :key="item.id">
                   <el-input style="margin-top: 10px" placeholder="请输入内容" v-model="item.video_name">
                     <template slot="prepend">第{{index+1}}章</template>
                     <el-button slot="append" @click="del_zj(index,item.id)" icon="el-icon-delete"></el-button>
                   </el-input>
 
-                  <div v-for="(item2,index2) in item.list" style="background: #f6f6f6;padding: 10px;margin-top: 10px">
+                  <div v-for="(item2,index2) in item.list" :key="item2.id" style="background: #f6f6f6;padding: 10px;margin-top: 10px">
                     <el-input style="margin-top: 10px" placeholder="请输入课程名称" v-model="item2.video_name" class="input-with-select">
                       <div slot="prepend" style="width: 120px;text-align: center">{{index+1}}-{{index2+1}}</div>
                       <el-checkbox slot="append" style="margin-right: 15px" v-model="item2.checked">试看</el-checkbox>
@@ -257,7 +287,7 @@
         sale_id: '', // 编辑时
         kc_disabled:false,
         zj_disabled:false,
-        active:1,
+        active:3,
         selectedConsultCate: [],//选中的技能分类
         consultCate: [], // 技能分类数据源
         saleInfo:{
@@ -695,6 +725,82 @@
 
 <style scope lang="scss">
   @import "@/assets/css/consult/create.scss";
+  .common-upload {
+    display: flex;
+    align-items: end;
+    .look-img {
+      margin-left: 130px;
+      .text {
+        font-size: 14px;
+        font-family: PingFangSC, PingFangSC-Medium;
+        font-weight: 500;
+        color: #308eff;
+        cursor: pointer;
+      }
+      .text-hover:hover {
+        position: relative;
+        .img {
+          display: block;
+        }
+      }
+      .img {
+        background: #fff;
+        border: 1px solid #e0e5ed;
+        box-shadow: 0px 2px 20px 0px rgba(22,40,63,0.15); 
+        border-radius: 10px;
+        text-align: center;
+        position: relative;
+        position: absolute;
+        top: -120px;
+        left: -114px;
+        width: 300px;
+        height: 120px;
+        display: none;
+        transition: all ease .3s;
+        .active-img2 {
+          width: 234px;
+          height: 71px;
+          background-size: cover;
+          overflow: hidden;
+          margin-top: 24px;
+        }
+        .active-img1 {
+          width: 262px;
+          height: 78px;
+          background-size: cover;
+          overflow: hidden;
+          margin-top: 22px;
+        }
+      }
+      .img:after {
+        content: '';
+        width: 0;
+        height: 0;
+        border-right: 10px solid transparent;
+        border-bottom: 10px solid transparent;
+        border-top: 10px solid #e0e5ed; 
+        border-left: 10px solid transparent; 
+        position: absolute;
+        left: 50%;
+        bottom: -20px;
+        transform: translate(-50%, 0);
+      }
+      .img:before {
+        content: '';
+        width: 0;
+        height: 0;
+        border-right: 9px solid transparent;
+        border-bottom: 9px solid transparent;
+        border-top: 9px solid #fff; 
+        border-left: 9px solid transparent; 
+        position: absolute;
+        left: 50%;
+        bottom: -18px;
+        transform: translate(-50%, 0);
+        z-index: 1;
+      }
+    }
+  }
 </style>
 <style>
   .el-select .el-input {

pages/frontend/learn/detail/_id.vue

@@ -292,6 +292,7 @@ export default {
             let { data, status, info } = res
             if(status === 1){
               this.collectObj.resultCode = 0
+              this.$message.success('取消收藏');
             }
           })
         }else{
@@ -300,6 +301,7 @@ export default {
             let { data, status, info } = res
             if(status === 1){
               this.collectObj.resultCode = 1
+              this.$message.success('收藏成功');
             }
           })
         }