<!DOCTYPE html>
|
<html class="x-admin-sm">
|
|
<head>
|
<meta charset="UTF-8">
|
<title>生活号设置</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
|
<link rel="stylesheet" href="./css/font.css">
|
<link rel="stylesheet" href="./css/xadmin.css">
|
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="./js/xadmin.js"></script>
|
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/http.js" type="text/javascript" charset="utf-8"></script>
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
<style>
|
.layui-form-label {
|
width: 100px;
|
padding-top: 0;
|
font-size: 14px;
|
}
|
|
.layui-input-inline {
|
width: 220px !important;
|
}
|
|
input[type=text] {
|
width: 100px;
|
margin-top: 5px;
|
}
|
|
.desc {
|
color: #999;
|
padding-bottom: 5px;
|
}
|
|
.layui-btn-fluid {
|
max-width: 200px;
|
}
|
|
input[type=text] {
|
width: 200px !important;
|
margin-top: 0px;
|
}
|
|
#poster {
|
max-width: 100px;
|
max-height: 100px;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-row">
|
<form class="layui-form">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>SceneID</label>
|
<div class="layui-input-inline" style="display: flex;align-items: center">
|
<input type="text" name="sceneId" lay-verify="required"
|
autocomplete="off" class="layui-input" v-model="sceneId" placeholder="请输入SceneID">
|
<a target="_blank" href="http://www.baidu.com" style="margin-left: 5px;"><i class="layui-icon"></i>
|
</a>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>生活号名称</label>
|
<div class="layui-input-inline">
|
<input type="text" name="name" lay-verify="required"
|
autocomplete="off" class="layui-input" v-model="name" placeholder="请输入生活号名称">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>生活号头像</label>
|
<div class="layui-input-inline">
|
|
<label class="desc">建议和支付宝生活号图标一致</label>
|
<div class="layui-upload">
|
<button type="button" class="layui-btn" id="test1">上传图片</button>
|
<div class="layui-upload-list">
|
<img class="layui-upload-img poster" id="poster">
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
生活号简介</label>
|
<div class="layui-input-inline">
|
<label class="desc">最少6个字符，最多150个字符</label>
|
|
<textarea class="layui-textarea" maxlength="150" minlength="6" name="desc"
|
placeholder="请输入简介" v-model="desc"></textarea>
|
</div>
|
</div>
|
|
<button id="add" style="display: none" class="layui-btn layui-btn-primary layui-btn-fluid" lay-filter="add"
|
lay-submit="">确定
|
</button>
|
|
</form>
|
</div>
|
</div>
|
<script src="js/common.js"></script>
|
<script>
|
var upload;
|
common.initLayui(function () {
|
upload = common.initUploadImagePlugin({
|
elem: "#test1",
|
showElem: "#poster",
|
uploadUrl: "/admin/upload/image?from=activity",
|
dir: 'sponsorad',
|
field: "image",
|
showLoading:true,
|
uploadSuccess: function (res) {
|
app.uploadSuccess(res.data);
|
}
|
});
|
});
|
|
var listener;
|
|
//外部触发的提交按钮
|
function submit(callback) {
|
listener = callback;
|
//提交文件
|
if ($(".layui-upload-file").eq(0).val())
|
upload.upload();
|
else
|
app.uploadSuccess();
|
}
|
|
var app = new Vue({
|
el: '.layui-form',
|
data: {
|
icon: "",
|
name: "",
|
desc: "",
|
sceneId: ""
|
},
|
created: function () {
|
console.log("得到的值为："+common.getQueryString("data"));
|
var data = JSON.parse(common.getQueryString("data"));
|
this.icon = data.icon;
|
this.name = data.name;
|
this.desc = data.desc;
|
this.sceneId = data.sceneId;
|
$("#poster").attr("src", this.icon);
|
setTimeout(function () {
|
app.render();
|
});
|
},
|
watch: {},
|
methods: {
|
render: function () {
|
console.log("render")
|
layui.use(['form', 'layer', 'jquery'], function () {
|
$ = layui.jquery;
|
var form = layui.form,
|
layer = layui.layer;
|
common.initLayuiForm(form);
|
|
|
//监听提交
|
form.on('submit(add)',
|
function (data) {
|
if (!$("#poster").attr("src")) {
|
common.notify.error("请选择生活号头像")
|
return false;
|
}
|
|
//重新赋值
|
data.field.icon = app.icon;
|
console.log(data.field);
|
listener(data.field);
|
return false;
|
});
|
|
});
|
},
|
uploadSuccess(res) {
|
if (res)
|
this.icon = res;
|
//提交表单
|
$("#add").click();
|
}
|
}
|
});
|
|
|
</script>
|
</body>
|
|
</html>
|
