代理端增加海报，部分页面增加scoped避免样式污染

package.json

@@ -25,9 +25,11 @@
 		"gulp-load-plugins": "1.5.0",
 		"gulp-replace": "0.6.1",
 		"hls.js": "^1.5.17",
+		"html2canvas": "^1.4.1",
 		"lodash": "4.17.5",
 		"mockjs": "^1.1.0",
 		"npm": "^6.9.0",
+		"qrcodejs2": "^0.0.2",
 		"svg-sprite-loader": "3.7.3",
 		"video.js": "^8.20.0",
 		"videojs-contrib-hls": "^5.15.0",
@@ -40,8 +42,6 @@
 		"vuex": "3.0.1"
 	},
 	"devDependencies": {
-		"sass": "^1.80.1",
-		"sass-loader": "^7.3.1",
 		"autoprefixer": "7.1.2",
 		"babel-core": "6.22.1",
 		"babel-eslint": "7.1.1",
@@ -83,6 +83,8 @@
 		"postcss-import": "11.0.0",
 		"postcss-loader": "2.0.8",
 		"rimraf": "2.6.0",
+		"sass": "^1.80.1",
+		"sass-loader": "^7.3.1",
 		"selenium-server": "3.0.1",
 		"semver": "5.3.0",
 		"shelljs": "0.7.6",

src/utils/httpRequest.js

@@ -14,8 +14,8 @@ const http = axios.create({
 })
 
 // const requestURl = "http://localhost:8100/sqx_fast/";
-// const requestURl = "https://video.hnsiyao.cn/sqx_fast/";
+const requestURl = "https://video.hnsiyao.cn/sqx_fast/";
-const requestURl = "https://dj-api.hnsiyao.cn/sqx_fast/";
+// const requestURl = "https://dj-api.hnsiyao.cn/sqx_fast/";
 
 /**
  * 请求拦截

src/views/campus/campus.vue

@@ -1,9 +1,10 @@
 <template>
   <div>
-
     <el-row>
-      <div style="float: right;">
+      <div style="float: right">
-        <el-button size="mini" type="primary" icon="document" @click="refresh()">刷新</el-button>
+        <el-button size="mini" type="primary" icon="document" @click="refresh()"
+          >刷新</el-button
+        >
       </div>
       <el-col :span="24" class="cards">
         <div class="box">
@@ -11,14 +12,16 @@
             <div class="box_color">H5分享</div>
             <div class="text_color">
               <div>
-                分享链接：<span>{{h5shareUrl}}</span>
+                分享链接：<span>{{ h5shareUrl }}</span>
                 <!-- <i class="el-icon-edit" @click="copyBtn(h5shareUrl)"
                   style="color: red;"></i> -->
               </div>
-              <div style="margin-top: 20px;">
+              <div style="margin-top: 20px">
-                分享二维码：<img :src="h5erweimaImg" style="width: 100px;height: 100px;" />
+                分享二维码：<img
+                  :src="h5erweimaImg"
+                  style="width: 100px; height: 100px"
+                />
               </div>
-
             </div>
             <!--
             <el-button size="mini" type="primary" @click="compile()">编辑
@@ -32,12 +35,14 @@
             <div class="box_color">微信小程序分享</div>
             <div class="text_color">
               <div>
-                分享链接：<span>{{xhxshareUrl}}</span>
+                分享链接：<span>{{ xhxshareUrl }}</span>
               </div>
-              <div style="margin-top: 20px;">
+              <div style="margin-top: 20px">
-                分享二维码：<img :src="xcxerweimaImg" style="width: 100px;height: 100px;" />
+                分享二维码：<img
+                  :src="xcxerweimaImg"
+                  style="width: 100px; height: 100px"
+                />
               </div>
-
             </div>
           </div>
         </div>
@@ -48,12 +53,14 @@
             <div class="box_color">抖音小程序分享</div>
             <div class="text_color">
               <div>
-                分享链接：<span>{{xhxshareUrl}}</span>
+                分享链接：<span>{{ xhxshareUrl }}</span>
               </div>
-              <div style="margin-top: 20px;">
+              <div style="margin-top: 20px">
-                分享二维码：<img :src="dyxerweimaImg" style="width: 100px;height: 100px;" />
+                分享二维码：<img
+                  :src="dyxerweimaImg"
+                  style="width: 100px; height: 100px"
+                />
               </div>
-
             </div>
           </div>
         </div>
@@ -64,25 +71,47 @@
             <div class="box_color">APP分享</div>
             <div class="text_color">
               <div>
-                分享链接：<span>{{appshareUrl}}</span>
+                分享链接：<span>{{ appshareUrl }}</span>
               </div>
-              <div style="margin-top: 20px;">
+              <div style="margin-top: 20px">
-                分享二维码：<img src="../../assets/img/avatar.png" style="width: 100px;height: 100px;" />
+                分享海报：<img
+                  :src="posterImg"
+                  style="width: 120px; height: auto"
+                />
+
+                <el-button size="mini" type="primary" @click="imgDown(posterImg)"
+                  >海报下载
+                </el-button>
               </div>
             </div>
+            
           </div>
         </div>
       </el-col>
     </el-row>
     <!-- 添加社区 -->
     <el-dialog title="添加社区" :visible.sync="dialogFormVisible" center>
-      <div style="margin-bottom: 10px;">
+      <div style="margin-bottom: 10px">
-        <span style="width: 200px;display: inline-block;text-align: right;">社区名称：</span>
+        <span style="width: 200px; display: inline-block; text-align: right"
-        <el-input style="width:50%;" v-model="campusName" type="text" placeholder="请输入社区名称"></el-input>
+          >社区名称：</span
+        >
+        <el-input
+          style="width: 50%"
+          v-model="campusName"
+          type="text"
+          placeholder="请输入社区名称"
+        ></el-input>
       </div>
-      <div style="margin-bottom: 10px;">
+      <div style="margin-bottom: 10px">
-        <span style="width: 200px;display: inline-block;text-align: right;">社区地址：</span>
+        <span style="width: 200px; display: inline-block; text-align: right"
-        <el-input style="width:50%;" v-model="campusDetails" type="text" placeholder="请输入社区地址"></el-input>
+          >社区地址：</span
+        >
+        <el-input
+          style="width: 50%"
+          v-model="campusDetails"
+          type="text"
+          placeholder="请输入社区地址"
+        ></el-input>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -93,10 +122,10 @@
     <el-dialog title="修改" :visible.sync="dialogFormVisible1" center>
       <el-form :model="form">
         <el-form-item label="分享链接：" :label-width="formLabelWidth">
-          <el-input v-model="form.campusName" style="width:65%;"></el-input>
+          <el-input v-model="form.campusName" style="width: 65%"></el-input>
         </el-form-item>
         <el-form-item label="分享图片：" :label-width="formLabelWidth">
-          <el-input v-model="form.campusDetails" style="width:65%;"></el-input>
+          <el-input v-model="form.campusDetails" style="width: 65%"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -104,348 +133,441 @@
         <el-button type="primary" @click="CompileNoticeTo()">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 海报 -->
+    <div>
+      <!-- 海报html元素 -->
+      <div
+        id="posterHtml"
+        :style="{ backgroundImage: 'url(' + posterHtmlBg + ')' }"
+        style="
+          background-repeat: no-repeat;
+          background-size: 1242px 2688px;
+          width: 1242px;
+          height: 2688px;
+        "
+        v-show="false"
+      >
+        <div>{{ posterContent }}</div>
+        <!-- 二维码 -->
+        <div><div id="qrcodeImg"></div></div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-  import Clipboard from 'clipboard';
+import html2canvas from "html2canvas";
-  export default {
+import Clipboard from "clipboard";
-    data() {
+import QRCode from 'qrcodejs2';
-      return {
+import { create } from "lodash";
-        limit: 10,
+export default {
-        page: 1,
+  data() {
-        checkBoxData: [], //多选框选择的值
+    return {
-        formLabelWidth: '200px',
+      posterContent: "", // 文案内容
-        tableDataLoading: false,
+      posterImg: "", // 最终生成的海报图片
-        dialogFormVisible: false,
+      posterImgName: "宣传海报", // 最终生成的海报图片名称
-        dialogFormVisible1: false,
+      posterHtmlBg: require("../../assets/img/poster.jpg"), // 背景图
-        tableData: [],
+      showPoster: false,
-        campusName: '',
+      limit: 10,
-        campusDetails: '',
+      page: 1,
-        form: {
+      checkBoxData: [], //多选框选择的值
-          campusId: '',
+      formLabelWidth: "200px",
-          campusName: '',
+      tableDataLoading: false,
-          campusDetails: ''
+      dialogFormVisible: false,
-        },
+      dialogFormVisible1: false,
-        h5erweimaImg: '', //h5分享码
+      tableData: [],
-        xcxerweimaImg: '', //微信小程序分享码
+      campusName: "",
-        dyxerweimaImg: '', //抖音小程序分享码
+      campusDetails: "",
-        h5Url: '', //h5域名
+      form: {
-        guanfangCode: '', //官方邀请码
+        campusId: "",
-        invitationCode: '',
+        campusName: "",
-        h5shareUrl: '', //h5分享链接
+        campusDetails: "",
-        appshareUrl: '', //app分享链接
+      },
-        xhxshareUrl:'',//小程序分享链接
+      h5erweimaImg: "", //h5分享码
-      }
+      xcxerweimaImg: "", //微信小程序分享码
+      dyxerweimaImg: "", //抖音小程序分享码
+      h5Url: "", //h5域名
+      guanfangCode: "", //官方邀请码
+      invitationCode: "",
+      h5shareUrl: "", //h5分享链接
+      appshareUrl: "", //app分享链接
+      xhxshareUrl: "", //小程序分享链接
+    };
+  },
+  methods: {
+    createQrcode(text) {
+      // 生成二维码
+      const qrcodeImgEl = document.getElementById("qrcodeImg");
+      let qrcode = new QRCode(qrcodeImgEl, {
+        width: 190,
+        height: 190,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+      qrcode.makeCode(text);
     },
-    methods: {
+    createPoster() {
-      // 多选
+      //click 点击按钮生成海报
-      changeFun(val) {
+      // 生成海报
-        this.checkBoxData = val;
+      const vm = this;
-      },
+      const domObj = document.getElementById("posterHtml");
-      handleSizeChange(val) {
+      html2canvas(domObj, {
-        this.limit = val;
+        useCORS: true,
-        this.dataSelect()
+        allowTaint: false,
-      },
+        logging: false,
-      handleCurrentChange(val) {
+        letterRendering: true,
-        this.page = val;
+        onclone(doc) {
-        this.dataSelect()
+          let e = doc.querySelector("#posterHtml");
-      },
+          e.style.display = "block";
-      // 刷新
+        },
-      refresh() {
+      }).then((canvas) => {
-        console.log('------')
+        // 在微信里,可长按保存或转发
-        this.xianshi()
+        vm.posterImg = canvas.toDataURL("image/png");
-      },
+        console.log(vm.posterImg)
-      // 添加社区弹框
+        // vm.imgDown(vm.posterImg);
-      classifyStair() {
+      });
-        this.dialogFormVisible = true
+    },
-      },
+    // 保存图片到本地
-      // 添加社区
+    imgDown(img) {
-      StairNoticeTo() {
+      if(!this.posterImg){
-        if (this.campusName == '') {
+        return this.$message({
-          this.$notify({
+          titile:'提示',
-            title: '提示',
+          message:'请先生成海报',
-            duration: 1800,
+          type:'warning'
-            message: '请输入社区名称',
+        })
-            type: 'warning'
+      }
-          });
+      var alink = document.createElement("a");
-          return
+      alink.href = img;
-        }
+      alink.download = this.posterImgName; // 图片名
-        if (this.campusDetails == '') {
+      alink.click();
-          this.$notify({
+    },
-            title: '提示',
+    // 多选
-            duration: 1800,
+    changeFun(val) {
-            message: '请输入社区地址',
+      this.checkBoxData = val;
-            type: 'warning'
+    },
-          });
+    handleSizeChange(val) {
-          return
+      this.limit = val;
-        }
+      this.dataSelect();
-        this.$http({
+    },
-          url: this.$http.adornUrl('helpCampus/insertCampus'),
+    handleCurrentChange(val) {
-          method: 'post',
+      this.page = val;
-          data: this.$http.adornData({
+      this.dataSelect();
-            'campusName': this.campusName,
+    },
-            'campusDetails': this.campusDetails,
+    // 刷新
-          })
+    refresh() {
-        }).then(({
+      console.log("------");
-          data
+      this.xianshi();
-        }) => {
+    },
-          this.dialogFormVisible = false
+    // 添加社区弹框
+    classifyStair() {
+      this.dialogFormVisible = true;
+    },
+    // 添加社区
+    StairNoticeTo() {
+      if (this.campusName == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入社区名称",
+          type: "warning",
+        });
+        return;
+      }
+      if (this.campusDetails == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入社区地址",
+          type: "warning",
+        });
+        return;
+      }
+      this.$http({
+        url: this.$http.adornUrl("helpCampus/insertCampus"),
+        method: "post",
+        data: this.$http.adornData({
+          campusName: this.campusName,
+          campusDetails: this.campusDetails,
+        }),
+      }).then(({ data }) => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.campusName = "";
+            this.campusDetails = "";
+            this.dataSelect();
+          },
+        });
+      });
+    },
+    // 修改社区
+    compile(index, rows) {
+      this.dialogFormVisible1 = true;
+      this.form.campusId = rows.campusId;
+      this.form.campusName = rows.campusName;
+      this.form.campusDetails = rows.campusDetails;
+    },
+    // 修改社区
+    CompileNoticeTo() {
+      this.$http({
+        url: this.$http.adornUrl("helpCampus/updateCampus "),
+        method: "post",
+        data: this.$http.adornData({
+          campusId: this.form.campusId,
+          campusName: this.form.campusName,
+          campusDetails: this.form.campusDetails,
+        }),
+      }).then(({ data }) => {
+        if (data.code == 0) {
           this.$message({
-            message: '添加成功',
+            message: "操作成功",
-            type: 'success',
+            type: "success",
             duration: 1500,
             onClose: () => {
-              this.campusName = ''
+              this.dialogFormVisible1 = false;
-              this.campusDetails = ''
+              this.dataSelect();
-              this.dataSelect()
+            },
-            }
+          });
-          })
+        } else {
-        })
+          this.$message({
-      },
+            message: data.msg,
-      // 修改社区
+            type: "error",
-      compile(index, rows) {
+            duration: 1500,
-        this.dialogFormVisible1 = true;
+            onClose: () => {
-        this.form.campusId = rows.campusId;
+              this.dialogFormVisible1 = false;
-        this.form.campusName = rows.campusName;
+              this.dataSelect();
-        this.form.campusDetails = rows.campusDetails;
+            },
-      },
+          });
-      // 修改社区
+        }
-      CompileNoticeTo() {
+      });
-        this.$http({
+    },
-          url: this.$http.adornUrl('helpCampus/updateCampus '),
+    // 批量删除
-          method: 'post',
+    deleteStairs(id) {
-          data: this.$http.adornData({
+      this.$confirm(`确定批量删除信息?`, "提示", {
-            'campusId': this.form.campusId,
+        confirmButtonText: "确定",
-            'campusName': this.form.campusName,
+        cancelButtonText: "取消",
-            'campusDetails': this.form.campusDetails
+        type: "warning",
-          })
+      })
-        }).then(({
+        .then(() => {
-          data
+          var ids = id
-        }) => {
+            ? [id]
-          if (data.code == 0) {
+            : this.checkBoxData.map((item) => {
-            this.$message({
+                return item.campusId;
-              message: '操作成功',
+              });
-              type: 'success',
-              duration: 1500,
-              onClose: () => {
-                this.dialogFormVisible1 = false
-                this.dataSelect()
-              }
-            })
-          } else {
-            this.$message({
-              message: data.msg,
-              type: 'error',
-              duration: 1500,
-              onClose: () => {
-                this.dialogFormVisible1 = false
-                this.dataSelect()
-              }
-            })
-          }
-        })
-      },
-      // 批量删除
-      deleteStairs(id) {
-        this.$confirm(`确定批量删除信息?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          var ids = id ? [id] : this.checkBoxData.map(item => {
-            return item.campusId
-          })
           this.$http({
             url: this.$http.adornUrl(`helpCampus/deleteCampus?ids=${ids}`),
-            method: 'get',
+            method: "get",
-            params: this.$http.adornParams({})
+            params: this.$http.adornParams({}),
-          }).then(({
+          }).then(({ data }) => {
-            data
-          }) => {
             if (data.code == 0) {
               this.$message({
-                message: '删除成功',
+                message: "删除成功",
-                type: 'success',
+                type: "success",
                 duration: 1500,
                 onClose: () => {
-                  this.content = ''
+                  this.content = "";
-                  this.status = 0
+                  this.status = 0;
-                  this.dataSelect()
+                  this.dataSelect();
-                }
+                },
-              })
+              });
             } else {
               this.$message({
                 message: data.msg,
-                type: 'error',
+                type: "error",
                 duration: 1500,
                 onClose: () => {
-                  this.content = ''
+                  this.content = "";
-                  this.status = 0
+                  this.status = 0;
-                  this.dataSelect()
+                  this.dataSelect();
-                }
+                },
-              })
+              });
             }
-          })
+          });
-        }).catch(() => {})
-      },
-      //删除
-      deleteStair(row) {
-        this.$confirm(`确定删除此条信息?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl(`helpCampus/deleteCampus?ids=${row.campusId}`),
-            method: 'get',
-            params: this.$http.adornParams({})
-          }).then(({
-            data
-          }) => {
-            if (data.code == 0) {
-              this.$message({
-                message: '删除成功',
-                type: 'success',
-                duration: 1500,
-                onClose: () => {
-                  this.dataSelect()
-                }
-              })
-            } else {
-              this.$message({
-                message: data.msg,
-                type: 'error',
-                duration: 1500,
-                onClose: () => {
-                  this.dataSelect()
-                }
-              })
-            }
-
-          })
-        }).catch(() => {})
-      },
-      // 重置
-      cleans() {
-        this.phone = ''
-        this.status = 0
-        this.dataSelect()
-      },
-      // 获取派单数据列表
-      dataSelect() {
-        this.tableDataLoading = true
-        this.$http({
-          url: this.$http.adornUrl('urlAddress/selectUrlAddress'),
-          method: 'get',
-          params: this.$http.adornParams({})
-        }).then(({
-          data
-        }) => {
-          this.tableDataLoading = false
-          let returnData = data.data;
-          this.tableData = returnData
         })
-      },
+        .catch(() => {});
-      // 配置信息
-      xianshi() {
-        var qdCode = this.$cookie.get('qdCode')
-        // 获取h5域名
-        // this.$http({
-        //   url: this.$http.adornUrl('common/type/19'),
-        //   method: 'get',
-        //   data: this.$http.adornData({})
-        this.$http({
-          url: this.$http.adornUrl('urlAddress/selectUrlAddress'),
-          method: 'get',
-          params: this.$http.adornParams({})
-        }).then(({
-          data
-        }) => {
-          if (data.code == 0) {
-
-            this.h5Url = data.data.urlAddress
-            this.xianshi2()
-          }
-        })
-      },
-      xianshi2() {
-        var qdCode = this.$cookie.get('qdCode')
-        // 获取官方邀请码
-        this.$http({
-          url: this.$http.adornUrl('common/type/88'),
-          method: 'get',
-          data: this.$http.adornData({})
-        }).then(({
-          data
-        }) => {
-          if (data.code == 0) {
-            this.guanfangCode = data.data.value
-            this.invitationCode = this.guanfangCode + ',' + qdCode,
-              this.h5erweimaImg = this.$http.adornUrl('app/invite/insertQrCode?content=' + qdCode)
-            this.xcxerweimaImg = this.$http.adornUrl('app/invite/mpCreateQr?invitationCode=' + this.invitationCode)
-            this.dyxerweimaImg = this.$http.adornUrl('app/invite/dyCreateQr?invitationCode=' + this.invitationCode)
-            this.h5shareUrl = this.h5Url + '/pages/index/index?invitation=' + this.guanfangCode + '&qdCode=' +
-              qdCode
-            this.xhxshareUrl =  '/pages/index/index?invitation=' + this.guanfangCode + '&qdCode=' +
-              qdCode
-            this.appshareUrl = this.h5Url + '/pages/login/registerApp?invitation=' + this.guanfangCode + '&qdCode=' +
-              qdCode
-          }
-
-        })
-      },
-      // 复制
-      copyBtn(text) {
-        let clipboard = new Clipboard('.copy')
-        clipboard.on('success', e => {
-          console.log('复制成功')
-          // 释放内存
-          clipboard.destroy()
-        })
-        clipboard.on('error', e => {
-          // 不支持复制
-          console.log('该浏览器不支持自动复制')
-          // 释放内存
-          clipboard.destroy()
-        })
-      }
     },
-    mounted() {
+    //删除
-      this.xianshi()
+    deleteStair(row) {
-      // this.dataSelect()
+      this.$confirm(`确定删除此条信息?`, "提示", {
-    }
+        confirmButtonText: "确定",
-  };
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$http({
+            url: this.$http.adornUrl(
+              `helpCampus/deleteCampus?ids=${row.campusId}`
+            ),
+            method: "get",
+            params: this.$http.adornParams({}),
+          }).then(({ data }) => {
+            if (data.code == 0) {
+              this.$message({
+                message: "删除成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  this.dataSelect();
+                },
+              });
+            } else {
+              this.$message({
+                message: data.msg,
+                type: "error",
+                duration: 1500,
+                onClose: () => {
+                  this.dataSelect();
+                },
+              });
+            }
+          });
+        })
+        .catch(() => {});
+    },
+    // 重置
+    cleans() {
+      this.phone = "";
+      this.status = 0;
+      this.dataSelect();
+    },
+    // 获取派单数据列表
+    dataSelect() {
+      this.tableDataLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("urlAddress/selectUrlAddress"),
+        method: "get",
+        params: this.$http.adornParams({}),
+      }).then(({ data }) => {
+        this.tableDataLoading = false;
+        let returnData = data.data;
+        this.tableData = returnData;
+      });
+    },
+    // 配置信息
+    xianshi() {
+      var qdCode = this.$cookie.get("qdCode");
+      // 获取h5域名
+      // this.$http({
+      //   url: this.$http.adornUrl('common/type/19'),
+      //   method: 'get',
+      //   data: this.$http.adornData({})
+      this.$http({
+        url: this.$http.adornUrl("urlAddress/selectUrlAddress"),
+        method: "get",
+        params: this.$http.adornParams({}),
+      }).then(({ data }) => {
+        if (data.code == 0) {
+          this.h5Url = data.data.urlAddress;
+          this.xianshi2();
+        }
+      });
+    },
+    xianshi2() {
+      var qdCode = this.$cookie.get("qdCode");
+      // 获取官方邀请码
+      this.$http({
+        url: this.$http.adornUrl("common/type/88"),
+        method: "get",
+        data: this.$http.adornData({}),
+      }).then(({ data }) => {
+        if (data.code == 0) {
+          this.guanfangCode = data.data.value;
+          (this.invitationCode = this.guanfangCode + "," + qdCode),
+            (this.h5erweimaImg = this.$http.adornUrl(
+              "app/invite/insertQrCode?content=" + qdCode
+            ));
+          this.xcxerweimaImg = this.$http.adornUrl(
+            "app/invite/mpCreateQr?invitationCode=" + this.invitationCode
+          );
+          this.dyxerweimaImg = this.$http.adornUrl(
+            "app/invite/dyCreateQr?invitationCode=" + this.invitationCode
+          );
+          this.h5shareUrl =
+            this.h5Url +
+            "/pages/index/index?invitation=" +
+            this.guanfangCode +
+            "&qdCode=" +
+            qdCode;
+          this.xhxshareUrl =
+            "/pages/index/index?invitation=" +
+            this.guanfangCode +
+            "&qdCode=" +
+            qdCode;
+          this.appshareUrl =
+            this.h5Url +
+            "/pages/login/registerApp?invitation=" +
+            this.guanfangCode +
+            "&qdCode=" +
+            qdCode;
+            this.createQrcode( this.appshareUrl);
+            this.createPoster();
+        }
+      });
+    },
+    // 复制
+    copyBtn(text) {
+      let clipboard = new Clipboard(".copy");
+      clipboard.on("success", (e) => {
+        console.log("复制成功");
+        // 释放内存
+        clipboard.destroy();
+      });
+      clipboard.on("error", (e) => {
+        // 不支持复制
+        console.log("该浏览器不支持自动复制");
+        // 释放内存
+        clipboard.destroy();
+      });
+    },
+  },
+  mounted() {
+    this.xianshi();
+    // this.dataSelect()
+  },
+};
 </script>
 
-<style>
+<style scoped>
-  .box {
+#posterHtml{
-    padding: 44px;
+  position: relative;
-    border: 1px solid #eee;
+}
-    margin: 15px 10px;
+#qrcodeImg {
-  }
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 125px;
+}
+.box {
+  padding: 44px;
+  border: 1px solid #eee;
+  margin: 15px 10px;
+}
 
-  .box_num {
+.box_num {
-    font-size: 14px;
+  font-size: 14px;
-    color: #66b1ff;
+  color: #66b1ff;
-  }
+}
 
-  .box_num .box_color {
+.box_num .box_color {
-    color: #333;
+  color: #333;
-    font-size: 14px;
+  font-size: 14px;
-    margin-bottom: 15px;
+  margin-bottom: 15px;
-  }
+}
 
-  .box_num div span {
+.box_num div span {
-    font-size: 20px;
+  font-size: 20px;
-    margin-left: 5px;
+  margin-left: 5px;
-  }
+}
 
-  .text_color {
+.text_color {
-    color: #4f9dec;
+  color: #4f9dec;
-  }
+}
 
-  .text_color span {
+.text_color span {
-    margin-right: 5px;
+  margin-right: 5px;
-  }
+}
 </style>

src/views/common/login.vue

@@ -3,27 +3,58 @@
     <div class="site-content__wrapper">
       <div class="site-content">
         <div class="login-main">
-          <h3 class="login-title">{{entryName}}</h3>
+          <h3 class="login-title">{{ entryName }}</h3>
-          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
+          <el-form
+            :model="dataForm"
+            :rules="dataRule"
+            ref="dataForm"
+            @keyup.enter.native="dataFormSubmit()"
+            status-icon
+          >
             <el-form-item prop="userName">
-              <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+              <el-input
+                v-model="dataForm.userName"
+                placeholder="帐号"
+              ></el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+              <el-input
+                v-model="dataForm.password"
+                type="password"
+                placeholder="密码"
+              ></el-input>
             </el-form-item>
-         <el-form-item prop="captcha">
+            <el-form-item prop="captcha">
               <el-row :gutter="20">
                 <el-col :span="14">
                   <el-input v-model="dataForm.captcha" placeholder="验证码">
                   </el-input>
                 </el-col>
                 <el-col :span="10" class="login-captcha">
-                  <img :src="captchaPath" @click="getCaptcha()" alt="">
+                  <img :src="captchaPath" @click="getCaptcha()" alt="" />
                 </el-col>
               </el-row>
             </el-form-item>
             <el-form-item>
-              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+              <div class="btn-box">
+                <div class="" style="margin-top: 38px">
+                  <el-button
+                    class="login-btn-submit"
+                    type="primary"
+                    @click="dataFormSubmit()"
+                    >登录</el-button
+                  >
+                </div>
+                <!-- <div>
+                  <el-button
+                    class="login-btn-submit"
+                    plain
+                    type="primary"
+                    @click="dataFormSubmit()"
+                    >注册</el-button
+                  >
+                </div> -->
+              </div>
             </el-form-item>
           </el-form>
         </div>
@@ -33,150 +64,157 @@
 </template>
 
 <script>
-  import { getUUID } from '@/utils'
+import { getUUID } from "@/utils";
-	import { entryName } from '@/utils/httpRequest'
+import { entryName } from "@/utils/httpRequest";
-  export default {
+export default {
-    data () {
+  data() {
-      return {
+    return {
-        dataForm: {
+      dataForm: {
-          userName: '',
+        userName: "",
-          password: '',
+        password: "",
-          uuid: '',
+        uuid: "",
-          captcha: '',
+        captcha: "",
-					entryName:'',
+        entryName: "",
-        },
-        dataRule: {
-          userName: [
-            { required: true, message: '帐号不能为空', trigger: 'blur' }
-          ],
-          password: [
-            { required: true, message: '密码不能为空', trigger: 'blur' }
-          ],
-          captcha: [
-            { required: true, message: '验证码不能为空', trigger: 'blur' }
-          ]
-        },
-        captchaPath: ''
-      }
-    },
-    created () {
-			this.entryName = entryName
-      this.getCaptcha()
-    },
-    methods: {
-      // 提交表单
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl('sys/login'),
-              method: 'post',
-              data: this.$http.adornData({
-                'username': this.dataForm.userName,
-                'password': this.dataForm.password,
-                'uuid': this.dataForm.uuid,
-                'captcha': this.dataForm.captcha,
-                'adminType':2
-              })
-            }).then(({data}) => {
-              if (data && data.code === 0) {
-                this.$cookie.set('token', data.token)
-                this.$router.replace({ name: 'home' })
-              } else {
-                this.getCaptcha()
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
       },
-      // 获取验证码
+      dataRule: {
-      getCaptcha () {
+        userName: [
-        this.dataForm.uuid = getUUID()
+          { required: true, message: "帐号不能为空", trigger: "blur" },
-        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
+        ],
-      }
+        password: [
-    }
+          { required: true, message: "密码不能为空", trigger: "blur" },
-  }
+        ],
+        captcha: [
+          { required: true, message: "验证码不能为空", trigger: "blur" },
+        ],
+      },
+      captchaPath: "",
+    };
+  },
+  created() {
+    this.entryName = entryName;
+    this.getCaptcha();
+  },
+  methods: {
+    // 提交表单
+    dataFormSubmit() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl("sys/login"),
+            method: "post",
+            data: this.$http.adornData({
+              username: this.dataForm.userName,
+              password: this.dataForm.password,
+              uuid: this.dataForm.uuid,
+              captcha: this.dataForm.captcha,
+              adminType: 2,
+            }),
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$cookie.set("token", data.token);
+              this.$router.replace({ name: "home" });
+            } else {
+              this.getCaptcha();
+              this.$message.error(data.msg);
+            }
+          });
+        }
+      });
+    },
+    // 获取验证码
+    getCaptcha() {
+      this.dataForm.uuid = getUUID();
+      this.captchaPath = this.$http.adornUrl(
+        `/captcha.jpg?uuid=${this.dataForm.uuid}`
+      );
+    },
+  },
+};
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-  .site-wrapper.site-page--login {
+.btn-box {
+  display: flex;
+  gap: 20px;
+  flex-direction: column;
+}
+.site-wrapper.site-page--login {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(38, 50, 56, 0.2);
+  overflow: hidden;
+  &:before {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background-image: url(~@/assets/img/login_bg.jpg);
+    background-size: cover;
+  }
+  .site-content__wrapper {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(38, 50, 56, .2);
+    padding: 0;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: transparent;
+  }
+  .site-content {
+    min-height: 100%;
+    // padding: 30px 500px 30px 30px;
+  }
+  .brand-info {
+    margin: 220px 100px 0 90px;
+    color: #fff;
+  }
+  .brand-info__text {
+    margin: 0 0 22px 0;
+    font-size: 48px;
+    font-weight: 400;
+    text-transform: uppercase;
+  }
+  .brand-info__intro {
+    margin: 10px 0;
+    font-size: 16px;
+    line-height: 1.58;
+    opacity: 0.6;
+  }
+  .login-main {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-left: -200px;
+    margin-top: -150px;
+    padding: 20px 30px;
+    width: 400px;
+    border-radius: 8px;
+    background-color: #fff;
+  }
+  .login-title {
+    font-size: 20px;
+    text-align: center;
+    margin-top: 10px;
+  }
+  .login-captcha {
     overflow: hidden;
-    &:before {
+    > img {
-      position: fixed;
-      top: 0;
-      left: 0;
-      z-index: -1;
       width: 100%;
-      height: 100%;
+      cursor: pointer;
-      content: "";
-      background-image: url(~@/assets/img/login_bg.jpg);
-      background-size: cover;
-    }
-    .site-content__wrapper {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      padding: 0;
-      margin: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      background-color: transparent;
-    }
-    .site-content {
-      min-height: 100%;
-      // padding: 30px 500px 30px 30px;
-    }
-    .brand-info {
-      margin: 220px 100px 0 90px;
-      color: #fff;
-    }
-    .brand-info__text {
-      margin:  0 0 22px 0;
-      font-size: 48px;
-      font-weight: 400;
-      text-transform : uppercase;
-    }
-    .brand-info__intro {
-      margin: 10px 0;
-      font-size: 16px;
-      line-height: 1.58;
-      opacity: .6;
-    }
-    .login-main {
-      position: absolute;
-      top:50%;
-      left: 50%;
-	  margin-left: -200px;
-	  margin-top: -150px;
-	  padding: 20px 30px;
-      width: 400px;
-	  border-radius:8px;
-      background-color: #fff;
-    }
-    .login-title {
-      font-size: 20px;
-	  text-align:center;
-	  margin-top:10px;
-    }
-    .login-captcha {
-      overflow: hidden;
-      > img {
-        width: 100%;
-        cursor: pointer;
-      }
-    }
-    .login-btn-submit {
-      width: 100%;
-      margin-top: 38px;
     }
   }
+  .login-btn-submit {
+    width: 100%;
+    // margin-top: 38px;
+  }
+}
 </style>

src/views/mission/mission.vue

@@ -2783,7 +2783,7 @@
   }
 </script>
 
-<style>
+<style  scoped>
   .el-dialog {
     /* width: 65% !important; */
   }

src/views/mission/missionDy.vue

@@ -1837,7 +1837,7 @@
 	}
 </script>
 
-<style>
+<style  scoped>
 	.el-dialog {
 		/* width: 65% !important; */
 	}

src/views/mission/missionWx.vue

@@ -1899,7 +1899,7 @@
 	}
 </script>
 
-<style>
+<style  scoped>
 	.el-dialog {
 		/* width: 65% !important; */
 	}