czg_team
/
video_delegate
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
YeMingfei666 2024-12-18 17:15:18 +08:00
parent f85a73cf77
commit eb99a6165a
9 changed files with 19279 additions and 13436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20253
npm-shrinkwrap.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

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

BIN
src/assets/img/poster.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

4
src/utils/httpRequest.js
View File

@ -14,8 +14,8 @@ const http = axios.create({
}) })
// const requestURl = "http://localhost:8100/sqx_fast/"; // 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/";
/** /**
* 请求拦截 * 请求拦截

552
src/views/campus/campus.vue
View File

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

154
src/views/common/login.vue
View File

@ -3,13 +3,26 @@
<div class="site-content__wrapper"> <div class="site-content__wrapper">
<div class="site-content"> <div class="site-content">
<div class="login-main"> <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-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>
<el-form-item prop="password"> <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>
<el-form-item prop="captcha"> <el-form-item prop="captcha">
<el-row :gutter="20"> <el-row :gutter="20">
@ -18,12 +31,30 @@
</el-input> </el-input>
</el-col> </el-col>
<el-col :span="10" class="login-captcha"> <el-col :span="10" class="login-captcha">
<img :src="captchaPath" @click="getCaptcha()" alt=""> <img :src="captchaPath" @click="getCaptcha()" alt="" />
</el-col> </el-col>
</el-row> </el-row>
</el-form-item> </el-form-item>
<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-item>
</el-form> </el-form>
</div> </div>
@ -33,80 +64,87 @@
</template> </template>
<script> <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: { dataRule: {
userName: [ userName: [
{ required: true, message: '帐号不能为空', trigger: 'blur' } { required: true, message: "帐号不能为空", trigger: "blur" },
], ],
password: [ password: [
{ required: true, message: '密码不能为空', trigger: 'blur' } { required: true, message: "密码不能为空", trigger: "blur" },
], ],
captcha: [ captcha: [
{ required: true, message: '验证码不能为空', trigger: 'blur' } { required: true, message: "验证码不能为空", trigger: "blur" },
] ],
}, },
captchaPath: '' captchaPath: "",
} };
}, },
created () { created() {
this.entryName = entryName this.entryName = entryName;
this.getCaptcha() this.getCaptcha();
}, },
methods: { methods: {
// 提交表单 // 提交表单
dataFormSubmit () { dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => { this.$refs["dataForm"].validate((valid) => {
if (valid) { if (valid) {
this.$http({ this.$http({
url: this.$http.adornUrl('sys/login'), url: this.$http.adornUrl("sys/login"),
method: 'post', method: "post",
data: this.$http.adornData({ data: this.$http.adornData({
'username': this.dataForm.userName, username: this.dataForm.userName,
'password': this.dataForm.password, password: this.dataForm.password,
'uuid': this.dataForm.uuid, uuid: this.dataForm.uuid,
'captcha': this.dataForm.captcha, captcha: this.dataForm.captcha,
'adminType':2 adminType: 2,
}) }),
}).then(({data}) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {
this.$cookie.set('token', data.token) this.$cookie.set("token", data.token);
this.$router.replace({ name: 'home' }) this.$router.replace({ name: "home" });
} else { } else {
this.getCaptcha() this.getCaptcha();
this.$message.error(data.msg) this.$message.error(data.msg);
} }
}) });
} }
}) });
}, },
// 获取验证码 // 获取验证码
getCaptcha () { getCaptcha() {
this.dataForm.uuid = getUUID() this.dataForm.uuid = getUUID();
this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`) this.captchaPath = this.$http.adornUrl(
} `/captcha.jpg?uuid=${this.dataForm.uuid}`
} );
} },
},
};
</script> </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; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(38, 50, 56, .2); background-color: rgba(38, 50, 56, 0.2);
overflow: hidden; overflow: hidden;
&:before { &:before {
position: fixed; position: fixed;
@ -143,29 +181,29 @@
margin: 0 0 22px 0; margin: 0 0 22px 0;
font-size: 48px; font-size: 48px;
font-weight: 400; font-weight: 400;
text-transform : uppercase; text-transform: uppercase;
} }
.brand-info__intro { .brand-info__intro {
margin: 10px 0; margin: 10px 0;
font-size: 16px; font-size: 16px;
line-height: 1.58; line-height: 1.58;
opacity: .6; opacity: 0.6;
} }
.login-main { .login-main {
position: absolute; position: absolute;
top:50%; top: 50%;
left: 50%; left: 50%;
margin-left: -200px; margin-left: -200px;
margin-top: -150px; margin-top: -150px;
padding: 20px 30px; padding: 20px 30px;
width: 400px; width: 400px;
border-radius:8px; border-radius: 8px;
background-color: #fff; background-color: #fff;
} }
.login-title { .login-title {
font-size: 20px; font-size: 20px;
text-align:center; text-align: center;
margin-top:10px; margin-top: 10px;
} }
.login-captcha { .login-captcha {
overflow: hidden; overflow: hidden;
@ -176,7 +214,7 @@
} }
.login-btn-submit { .login-btn-submit {
width: 100%; width: 100%;
margin-top: 38px; // margin-top: 38px;
}
} }
}
</style> </style>

2
src/views/mission/mission.vue
View File

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

2
src/views/mission/missionDy.vue
View File

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

2
src/views/mission/missionWx.vue
View File

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