251 行
9.4 KiB
HTML
可执行文件
251 行
9.4 KiB
HTML
可执行文件
<!doctype html>
|
||
<html lang="en">
|
||
<!--[1.5.25]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" href="__PUBLIC__/css/system-gallery.css">
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<script charset="utf-8" src="__PUBLIC__/js/system-gallery.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.config.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/UEditor/ueditor.all.js"></script>
|
||
<title>产品修改</title>
|
||
<style>
|
||
html, body {
|
||
background-color: rgb(246, 248, 249);
|
||
font-size: 0;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.box {
|
||
border: 1px solid #bbb;
|
||
border-radius: 5px;
|
||
background-color: white;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.list > .el-button {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.title {
|
||
background-color: #f5f5f5;
|
||
color: black;
|
||
font-size: 18px;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
line-height: 60px;
|
||
border-radius: 5px 5px 0 0;
|
||
text-indent: 15px;
|
||
}
|
||
|
||
.left_name {
|
||
width: 120px;
|
||
text-align: right;
|
||
font-size: 14px;
|
||
line-height: 56px;
|
||
color: #666;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.list > .input_div {
|
||
width: 600px;
|
||
}
|
||
|
||
.tips {
|
||
margin-left: 140px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div style="padding: 30px;background-color: white" id="app" v-cloak>
|
||
<form class="layui-form" id="form">
|
||
<input type="hidden" name="id" value="{$list['id']}">
|
||
<div class="list">
|
||
<label class="left_name">产品名称</label>
|
||
<div class="input_div">
|
||
<div class="el-input">
|
||
<input type="text"
|
||
name="title"
|
||
value="{$list['title']}"
|
||
required="required"
|
||
placeholder="请输入产品名称" class="el-input__inner">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="list">
|
||
<label class="left_name">产品简介</label>
|
||
<div class="input_div">
|
||
<div class="el-input">
|
||
<input type="text"
|
||
name="docuat"
|
||
value="{$list['docuat']}"
|
||
required="required"
|
||
placeholder="请输入产品简介" class="el-input__inner">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list" style="align-items: flex-start;">
|
||
<label class="left_name">产品图片</label>
|
||
<label class="file_label">
|
||
<input type="hidden" name="image_id" value="{$list['image_id']}"/>
|
||
<input type="file" name="image"
|
||
placeholder="选择图片" accept="image/png,image/jpeg"/>
|
||
<img src="{$list['image']}"
|
||
onerror="this.onerror=null;this.src='__PUBLIC__/paper/images/wx_add.png'">
|
||
</label>
|
||
<el-button plain size="small" @click="selectImage('image')"
|
||
>图库图片
|
||
<el-tooltip class="item" effect="dark" content="点击图片选择本地图片，点击按钮选择图库图片" placement="top-start">
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</el-button>
|
||
</div>
|
||
<p class="tips">建议大小（200*200）</p>
|
||
|
||
<div class="list" style="align-items: flex-start">
|
||
<label class="left_name">内容</label>
|
||
<div>
|
||
<div id="editor" type="text/plain" style="width:600px;height: 400px;" name="content">
|
||
{$list['content']}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="center">
|
||
<el-button type="primary" size="medium" @click="save">保存</el-button>
|
||
</div>
|
||
</form>
|
||
<el-dialog title="选择图片" :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 type="text/javascript">
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
showSelectImage: false,
|
||
actFileName: ''
|
||
}
|
||
},
|
||
methods: {
|
||
selectFile: function (item) {
|
||
//console.log(item[0]['id']);
|
||
this.showSelectImage = false;
|
||
if (item.length) {
|
||
$("input[name='" + this.actFileName + "']").val('');
|
||
$("input[name='" + this.actFileName + "_id']").val(item[0].id);
|
||
$("input[name='" + this.actFileName + "']").next('img').attr('src', item[0].path);
|
||
}
|
||
},
|
||
selectImage: function (actName) {
|
||
this.actFileName = actName;
|
||
this.showSelectImage = true;
|
||
},
|
||
save: function () {
|
||
var name = $("input[name='title']").val();
|
||
var docuat = $("input[name='docuat']").val();
|
||
var image_id = $("input[name='image_id']").val();
|
||
var image = $("input[name='image']").val() || $("input[name='image']").attr('d-value');
|
||
|
||
if (name == '' || docuat == '' || (!image_id && !image)) {
|
||
this.$message({
|
||
type: 'warning',
|
||
message: '请完善信息',
|
||
duration: 1000
|
||
});
|
||
return false;
|
||
}
|
||
var fd = new FormData(document.getElementById('form'));
|
||
var that = this;
|
||
this.$loading({
|
||
lock: true,
|
||
text: '保存中，请等待',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(255, 255, 255, 0.7)'
|
||
});
|
||
$.ajax({
|
||
url: "{:U('editCommodity')}",
|
||
type: "POST",
|
||
data: fd,
|
||
processData: false, // jQuery不要去处理发送的数据
|
||
contentType: false, // jQuery不要去设置Content-Type请求头
|
||
success: function (res) {
|
||
that.$loading().close();
|
||
if (res.status == 1) {
|
||
that.$message({
|
||
type: 'success',
|
||
message: res.msg,
|
||
duration: 1000,
|
||
onClose: function () {
|
||
$("input[name='file']").val('');
|
||
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||
parent.layer.close(index); //再执行关闭
|
||
}
|
||
});
|
||
} else {
|
||
that.$message({
|
||
type: 'error',
|
||
message: res.msg,
|
||
duration: 1000
|
||
});
|
||
}
|
||
},
|
||
error: function () {
|
||
that.$message({
|
||
type: 'error',
|
||
message: '出错了！',
|
||
duration: 1000
|
||
});
|
||
that.$loading().close();
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted: function () {
|
||
$("input[type='file']").on('change', function () {
|
||
if (this.files.length) {
|
||
var that = this;
|
||
var imgObj = this.files[0];
|
||
var imgType = ['image/jpeg', 'image/jpg', 'image/png'];
|
||
if (jQuery.inArray(imgObj.type, imgType) != -1) {
|
||
//是图片
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(imgObj);
|
||
reader.onload = function () {
|
||
$(that).next('img').attr('src', this.result);
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
created: function () {
|
||
|
||
}
|
||
});
|
||
|
||
var ue = UE.getEditor('editor');
|
||
// var html = ue.getContent();
|
||
</script>
|
||
</html> |