|
@@ -0,0 +1,134 @@
|
|
|
+#set(title="添加广告")
|
|
|
+#@header()
|
|
|
+<style>
|
|
|
+ .img{cursor: pointer;max-height:128px;padding: 10px;max-width: 128px;margin-left: -10px;}
|
|
|
+ .mask{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,0.83);top:0;z-index:6666;overflow: hidden;}
|
|
|
+ #photo{width: 80%;}
|
|
|
+ input[type=file] {height:128px;opacity: 0;width: 128px;cursor: pointer;margin: 0 auto;}
|
|
|
+ .bo{margin:0 auto;width:200px;position:absolute;bottom:0;background-color: #2f4050;width: 100%;padding: 5px;}
|
|
|
+ .pull-right{cursor: pointer;}
|
|
|
+ [v-cloak] {display: none;}
|
|
|
+</style>
|
|
|
+<body class="bg">
|
|
|
+<div id="app" v-cloak>
|
|
|
+ <form id="addForm" method="post">
|
|
|
+ <table class="table">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td width="150">选择图片 <span>*</span></td>
|
|
|
+ <td colspan="3">
|
|
|
+ <img class="img" alt="添加封面" :src="mCove==''?'#(path)/static/ui/img/icon_p.png':mCove">
|
|
|
+ <input type="file" accept="image/*" accept='image/*' v-on:change="change($event,0)" style="margin-top:-128px;width:70%;margin-left: -30px;">
|
|
|
+ <span class="pull-right" @click="review">照片预览</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>显示次序</td>
|
|
|
+ <td><input type="number" class="form-control" v-model="item.mView" min="1">
|
|
|
+ <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 按照数字从小到大显示第多少张</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>是否显示</td>
|
|
|
+ <td>
|
|
|
+ <el-switch
|
|
|
+ v-model="item.mShow"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949">
|
|
|
+ </el-switch>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <input type="hidden" name="dataImage" v-model="dataImage"/>
|
|
|
+ </form>
|
|
|
+ <div class="mask" v-show="show">
|
|
|
+ <img id="photo">
|
|
|
+ <div class="bo">
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <button class="btn btn-primary" @click="save()">裁剪</button>
|
|
|
+ <button class="btn btn-danger" style="margin-left: 30px;" @click="cancel()">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+#set(layer=true,util=true,vue=true,cropper=true,element=true)
|
|
|
+#@op()
|
|
|
+#@js()
|
|
|
+<script>
|
|
|
+ var cropper = null;
|
|
|
+ var vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ item: {cover: '',mView: 1,mShow:true},
|
|
|
+ show: false,
|
|
|
+ mCove: '',
|
|
|
+ dataImage: '',
|
|
|
+ dialogVisible:false
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
+ if ('#(op)' == 'edit') {
|
|
|
+ this.item =#(banner);
|
|
|
+ this.mCove = this.item.cover;
|
|
|
+ this.item.mShow=this.item.mShow==0?true:false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //创建列表
|
|
|
+ change: function (e, index) {
|
|
|
+ var objUrl = vm.getUri(e.currentTarget.files[0]);
|
|
|
+ if (objUrl == null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ vm.show = true;
|
|
|
+ vm.index = index;
|
|
|
+ document.getElementById("photo").src = objUrl;
|
|
|
+ cropper = getClipper(21 / 9, objUrl, 'photo');
|
|
|
+ },
|
|
|
+ getUri: function (file) {
|
|
|
+ var url = null;
|
|
|
+ if (window.createObjectURL != undefined) { // basic
|
|
|
+ url = window.createObjectURL(file);
|
|
|
+ } else if (window.URL != undefined) { // mozilla(firefox)
|
|
|
+ url = window.URL.createObjectURL(file);
|
|
|
+ } else if (window.webkitURL != undefined) { // webkit or chrome
|
|
|
+ url = window.webkitURL.createObjectURL(file);
|
|
|
+ }
|
|
|
+ return url;
|
|
|
+ },
|
|
|
+ //预览
|
|
|
+ review: function () {
|
|
|
+ var json={"id":123,"start":0,"data":[{"alt":"照片预览","pid":666,"src":vm.item.cover,"thumb":""}]}
|
|
|
+ layer.photos({photos:json,anim: 2});
|
|
|
+ },
|
|
|
+ //保存图像
|
|
|
+ save: function () {
|
|
|
+ vm.show = false;
|
|
|
+ var croppedCanvas = cropper.getCroppedCanvas({height: 480});
|
|
|
+ var dataUrl = croppedCanvas.toDataURL();
|
|
|
+ sendAjax("#(path)/admin/upload/uploadData", {dataImage: dataUrl}, function (res) {
|
|
|
+ vm.mCove = dataUrl;
|
|
|
+ vm.item.cover = res.url;
|
|
|
+ cancelLoding();
|
|
|
+ })
|
|
|
+ cropper.destroy();
|
|
|
+ },
|
|
|
+ //取消剪裁
|
|
|
+ cancel: function () {
|
|
|
+ vm.show = false;
|
|
|
+ cropper.destroy();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ $("#add").click(function () {
|
|
|
+ if (vm.item.cover == '') {
|
|
|
+ showToastError("请上传一个图片");
|
|
|
+ return
|
|
|
+ }
|
|
|
+ vm.item.mShow=vm.item.mShow==true?0:1;
|
|
|
+ var data = {banner: JSON.stringify(vm.item)};
|
|
|
+ ajaxSubmit("#(path)/admin/work/banner/#(op)", data);
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|