分享样式画完

1

package.json

@@ -25,6 +25,7 @@
     "default-passive-events": "^1.0.10",
     "echarts": "^4.8.0",
     "element-ui": "^2.13.2",
+    "html-to-image": "^1.9.0",
     "http-server": "^0.12.3",
     "i": "^0.3.6",
     "js-base64": "^3.6.0",

src/styles/iconfont/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id  */
-  src: url('iconfont.ttf?t=1642679515371') format('truetype');
+  src: url('iconfont.ttf?t=1645413076814') format('truetype');
 }
 
 .iconfont {
@@ -411,3 +411,15 @@
   content: "\e67f";
 }
 
+.icon-jigouxieyiguanli:before {
+  content: "\e680";
+}
+
+.icon-gouxuan:before {
+  content: "\e681";
+}
+
+.icon-weigouxuan:before {
+  content: "\e682";
+}
+

src/views/liveClassManager/modals/groupChat.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="shareWrap">
+    <el-form
+      :inline="true"
+      :model="searchForm"
+      @submit="search"
+      @reset="onReSet"
+    >
+      <el-form-item>
+        <el-input
+          v-model.trim="searchForm.search"
+          clearable
+          @keyup.enter.native="search"
+          placeholder="群聊名称/乐团编号"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          clearable
+          filterable
+          placeholder="请选择分部"
+          v-model="search.organId"
+        >
+          <el-option
+            v-for="(item, index) in selects.branchs"
+            :key="index"
+            :label="item.name"
+            :value="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button native-type="submit" type="primary">搜索</el-button>
+        <el-button native-type="reset" type="danger">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="tableWrap">
+      <el-checkbox-group v-model="checkList">
+        <div class="cell" @click="resectCheck">
+          <el-checkbox class="chioseBox" label="123456"><br /></el-checkbox>
+          <div class="dotle">乐团</div>
+          <div class="teamInfo">
+            <p class="title">长笛声部1班</p>
+            <p class="subInfo">武汉第十一小学乐团（共15人）</p>
+          </div>
+        </div>
+      </el-checkbox-group>
+    </div>
+          <pagination
+          sync
+          :total.sync="rules.total"
+          :page.sync="rules.page"
+          :limit.sync="rules.limit"
+          :page-sizes="rules.page_size"
+          @pagination="getList"
+        />
+  </div>
+</template>
+<script>
+import pagination from "@/components/Pagination/index";
+export default {
+    components: { pagination },
+  data() {
+    return {
+      searchForm: {
+        organIds: "",
+        search: "",
+      },
+      checkList: [],
+           rules: {
+        // 分页规则
+        limit: 10, // 限制显示条数
+        page: 1, // 当前页
+        total: 0, // 总条数
+        page_size: [10, 20, 40, 50], // 选择限制显示条数
+      },
+    };
+  },
+  mounted() {
+    this.$store.dispatch("setBranchs");
+  },
+  methods: {
+    onReSet() {},
+    search() {},
+    resectCheck(e) {
+      console.log(e);
+    },
+    getList(){},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.shareWrap {
+  background-color: #f9f9f9;
+  padding: 15px;
+}
+.chioseBox {
+  /deep/.el-checkbox__inner {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    &::after {
+      height: 8px;
+      left: 6px;
+      position: absolute;
+      top: 3px;
+      width: 4px;
+    }
+  }
+}
+.cell {
+  height: 63px;
+  background: #ffffff;
+  padding: 10px 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+}
+.dotle {
+  width: 42px;
+  height: 43px;
+  background: var(--color-primary);
+  border-radius: 4px;
+  line-height: 42px;
+  text-align: center;
+  color: #fff;
+  margin-left: 17px;
+  font-size: 14px;
+}
+.teamInfo {
+  font-size: 14px;
+  margin-left: 8px;
+  .title {
+    font-weight: 500;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+  .subInfo {
+    color: #666666;
+    line-height: 22px;
+  }
+}
+</style>

src/views/liveClassManager/modals/shareDetail.vue

@@ -27,20 +27,25 @@
       </div>
       <div class="codeWrap" v-if="form.shareType == 2">
         <div class="shareWrap">
-          <preview :form="row" />
+          <preview :form="row" id="preview" />
         </div>
-        <div class="shareBtn" @click="copyText">复制分享内容</div>
+        <div class="shareBtn" @click="shareImage">复制分享内容</div>
+      </div>
+      <div class="groupWrap" v-if="form.shareType == 3">
+        <!-- im分享 -->
+        <groupChat />
       </div>
-      <div class="groupWrap" v-if="form.shareType == 3"></div>
     </div>
   </div>
 </template>
 <script>
+import { toPng } from "html-to-image";
 import copy from "copy-to-clipboard";
 import preview from "./preview";
+import groupChat from './groupChat'
 export default {
   props: ["row"],
-  components: { preview },
+  components: { preview,groupChat },
   data() {
     return {
       form: {
@@ -66,6 +71,24 @@ export default {
         this.$message.success("复制成功");
       }
     },
+    shareImage() {
+      var node = document.getElementById("preview");
+      toPng(node)
+        .then( (dataUrl)=> {
+          var img = new Image();
+          img.src = dataUrl;
+          // 在这里下载
+          let link = document.createElement("a");
+          let fname = this.row.roomTitle || "分享图片文件.png"; //下载文件的名字
+          link.href = dataUrl;
+          link.setAttribute("download", fname);
+          document.body.appendChild(link);
+          link.click();
+        })
+        .catch(function (error) {
+          console.error("oops, something went wrong!", error);
+        });
+    },
   },
 };
 </script>
@@ -99,7 +122,7 @@ export default {
 }
 .shareBtn {
   height: 48px;
-  background: #00a79d;
+  background: var(--color-primary);
   border-radius: 32px;
   width: 192px;
   color: #fff;

src/views/liveClassManager/newLiveClass.vue

@@ -78,31 +78,55 @@
             :rules="[{ required: true, message: '请选择预热模板' }]"
           >
             <div class="chioseWrap">
-              <div class="chioseItem" @click="form.preTemplate = 1">
+              <div class="chioseItem" @click="setPreTemplate(1)">
                 <img src="./images/img1.png" alt="" />
+                <!--        v-model="form.preTemplate" -->
                 <div class="remberBox">
-                  <div
+                  <el-checkbox
+                    v-model="form.preTemplate == 1"
+                    class="chioseBox"
+                    :label="1"
+                    :checked="form.preTemplate == 1"
+                    ><br
+                  /></el-checkbox>
+                  <!-- <div
                     class="dotWrap"
                     :class="[form.preTemplate == 1 ? 'checked' : '']"
-                  ></div>
+                  ></div> -->
                 </div>
               </div>
-              <div class="chioseItem" @click="form.preTemplate = 2">
+              <div class="chioseItem" @click="setPreTemplate(2)">
                 <img src="./images/img2.png" alt="" />
                 <div class="remberBox">
-                  <div
+                  <!--  v-model="form.preTemplate" -->
+                  <el-checkbox
+                    v-model="form.preTemplate == 2"
+                    name="2"
+                    class="chioseBox"
+                    :label="2"
+                    :checked="form.preTemplate == 2"
+                    ><br
+                  /></el-checkbox>
+                  <!-- <div
                     class="dotWrap"
                     :class="[form.preTemplate == 2 ? 'checked' : '']"
-                  ></div>
+                  ></div> -->
                 </div>
               </div>
-              <div class="chioseItem" @click="form.preTemplate = 3">
+              <div class="chioseItem" @click="setPreTemplate(3)">
                 <img src="./images/img3.png" alt="" />
                 <div class="remberBox">
-                  <div
+                  <el-checkbox
+                    v-model="form.preTemplate == 3"
+                    class="chioseBox"
+                    :label="3"
+                    :checked="form.preTemplate == 3"
+                    ><br
+                  /></el-checkbox>
+                  <!-- <div
                     class="dotWrap"
                     :class="[form.preTemplate == 3 ? 'checked' : '']"
-                  ></div>
+                  ></div> -->
                 </div>
               </div>
             </div>
@@ -185,13 +209,13 @@ export default {
       form: {
         roomTitle: "",
         teacherName: "",
-        speakerId:"",
+        speakerId: "",
         liveStartTime: "",
         liveRemark: "",
         preTemplate: null,
         whether_like: "",
-        whether_chat:"",
-        whether_video:""
+        whether_chat: "",
+        whether_video: "",
       },
     };
   },
@@ -210,6 +234,9 @@ export default {
         }
       });
     },
+    setPreTemplate(index) {
+      this.$set(this.form, "preTemplate", index);
+    },
   },
 };
 </script>
@@ -270,6 +297,20 @@ export default {
       position: absolute;
       top: 1px;
       right: 1px;
+      .chioseBox {
+        /deep/.el-checkbox__inner {
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          &::after {
+            height: 8px;
+            left: 6px;
+            position: absolute;
+            top: 3px;
+            width: 4px;
+          }
+        }
+      }
       .dotWrap {
         width: 21px;
         height: 21px;

vue.config.js

@@ -19,8 +19,8 @@ const name = defaultSettings.title || '管乐迷后台管理系统' // page titl
 // let target = 'http://192.168.3.251:8000' // 何国威
 // let target = 'http://192.168.3.250:8000' //邹璇
 // let target = 'http://192.168.3.119:8000' //勇哥
-let target = 'http://dev.dayaedu.com' // 开发环境
-// let target = 'https://test.dayaedu.com' //测试环境
+// let target = 'http://dev.dayaedu.com' // 开发环境
+let target = 'https://test.dayaedu.com' //测试环境
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**