236 行
8.6 KiB
HTML
可执行文件
236 行
8.6 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
||
<style>
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.list > .el-button {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.left_name {
|
||
width: 160px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
line-height: 56px;
|
||
color: #666;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.list > input {
|
||
margin: 10px 0;
|
||
width: 300px;
|
||
border: 1px solid #ccc;
|
||
padding: 10px;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.list > select {
|
||
width: 322px;
|
||
margin: 10px 0;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.list > textarea {
|
||
resize: none;
|
||
width: 300px;
|
||
height: 100px;
|
||
padding: 10px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
input, textarea {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
|
||
.tips {
|
||
margin-left: 180px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
.pic-tips {
|
||
width: 445px;
|
||
margin-left: 180px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
margin-bottom: 20px;
|
||
}
|
||
</style>
|
||
<body style="padding: 50px">
|
||
<div id="logoApp">
|
||
<form id="form">
|
||
<div class="list">
|
||
<span class="left_name">安卓收银机登录Logo：</span>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage('android_icon')">
|
||
<i v-if="!dataForm.android_icon" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="dataForm.android_icon">
|
||
</div>
|
||
<el-button plain size="small" @click="selectImage('android_icon')">选择图片</el-button>
|
||
</div>
|
||
<p class="pic-tips">建议400px*100px</p>
|
||
<div class="list">
|
||
<span class="left_name">PC收银机登录Logo：</span>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage('pc_icon')">
|
||
<i v-if="!dataForm.pc_icon" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="dataForm.pc_icon">
|
||
</div>
|
||
<el-button plain size="small" @click="selectImage('pc_icon')">选择图片</el-button>
|
||
</div>
|
||
<p class="pic-tips">建议200px*63px</p>
|
||
<div class="list">
|
||
<span class="left_name">PC左上角Logo：</span>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage('cashier_icon')">
|
||
<i v-if="!dataForm.cashier_icon" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="dataForm.cashier_icon">
|
||
</div>
|
||
<el-button plain size="small" @click="selectImage('cashier_icon')">选择图片</el-button>
|
||
</div>
|
||
<p class="pic-tips">建议160px*50px</p>
|
||
<div class="list">
|
||
<span class="left_name">PC收银机登录背景图：</span>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage('pc_bg')">
|
||
<i v-if="!dataForm.pc_bg" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="dataForm.pc_bg">
|
||
</div>
|
||
<el-button plain size="small" @click="selectImage('pc_bg')">选择图片</el-button>
|
||
</div>
|
||
<p class="pic-tips">建议1000px*600px（或等比例图片）</p>
|
||
<div class="list">
|
||
<span class="left_name">安卓收银机登录背景图：</span>
|
||
<div class="el-upload el-upload--picture-card el-upload-list--picture-card upload-img-small-auto"
|
||
@click="selectImage('android_bg')">
|
||
<i v-if="!dataForm.android_bg" class="el-icon-plus"></i>
|
||
<img v-else class="el-upload-list__item-thumbnail img-auto" :src="dataForm.android_bg">
|
||
</div>
|
||
<el-button plain size="small" @click="selectImage('android_bg')">选择图片</el-button>
|
||
</div>
|
||
<p class="pic-tips">建议1000px*650px（或等比例图片）</p>
|
||
<div class="center">
|
||
<if condition="$authArr['addIcon']">
|
||
<el-button type="primary" size="medium" @click="save">保存</el-button>
|
||
</if>
|
||
</div>
|
||
</form>
|
||
<el-dialog title="选择图片" :modal-append-to-body="false" :visible.sync="showSelectImage" custom-class="select-image-el-dialog" :top="'10px'">
|
||
<template-select-image :can-select-num="1" @selectfile="selectFile"></template-select-image>
|
||
</el-dialog>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
var logoApp = new Vue({
|
||
el: '#logoApp',
|
||
data: function () {
|
||
return {
|
||
showSelectImage: false,
|
||
actFileName: '',
|
||
dataForm: {
|
||
android_icon: "{$info['android_icon']}",
|
||
pc_icon: "{$info['pc_icon']}",
|
||
cashier_icon: "{$info['cashier_icon']}",
|
||
pc_bg: "{$info['pc_bg']}",
|
||
android_bg: "{$info['android_bg']}",
|
||
android_icon_id: "{$info['android_icon_id']}",
|
||
pc_icon_id: "{$info['pc_icon_id']}",
|
||
cashier_icon_id: "{$info['cashier_icon_id']}",
|
||
pc_bg_id: "{$info['pc_bg_id']}",
|
||
android_bg_id: "{$info['android_bg_id']}",
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
selectFile: function (item) {
|
||
console.log(item);
|
||
this.showSelectImage = false;
|
||
if (item.length) {
|
||
this.dataForm[this.actFileName + '_id'] = item[0].id;
|
||
this.dataForm[this.actFileName] = item[0].path;
|
||
}
|
||
},
|
||
selectImage: function (actName) {
|
||
this.actFileName = actName;
|
||
this.showSelectImage = true;
|
||
},
|
||
save: function () {
|
||
for (var i in this.dataForm) {
|
||
if (!this.dataForm[i]) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请先完善图片信息',
|
||
duration: 1000
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
this.$loading({
|
||
lock: true,
|
||
text: '保存中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('addIcon')}",
|
||
type: "POST",
|
||
data: this.dataForm,
|
||
success: (res) => {
|
||
this.$loading().close();
|
||
if (res.status == 1) {
|
||
this.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
onClose: () => {
|
||
MenuApp.refreshWindow();
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
error: () => {
|
||
this.$message({
|
||
type: 'error',
|
||
message: '出错了！',
|
||
duration: 1000
|
||
});
|
||
this.$loading().close();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
|
||
},
|
||
created: function () {
|
||
|
||
}
|
||
});
|
||
</script> |