From 73372f312e8b8bae98623006640b016f9a433988 Mon Sep 17 00:00:00 2001 From: nickchange <126672920+nickchange@users.noreply.github.com> Date: 星期一, 16 十月 2023 15:12:49 +0800 Subject: [PATCH] 10.16 --- cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html | 163 ++++++++++++++++++++++++-- cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackage_info.js | 55 +++++++- cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackageDiscount.js | 2 cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_add.html | 123 ++++++++++++++++++-- 4 files changed, 307 insertions(+), 36 deletions(-) diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_add.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_add.html index 2a03a70..e80936c 100644 --- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_add.html +++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_add.html @@ -1,4 +1,48 @@ @layout("/common/_container.html"){ +<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=77b37f0753049c4e712ea79a24e0719c"></script> +<style> + .avatar-uploader .el-upload { + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + height: 100px; + width: 100px; + overflow: hidden; + } + + .avatar-uploader .el-upload:hover { + border-color: #409EFF; + } + .avatar-uploader-icon { + font-size: 28px; + color: #8c939d; + width: 100px; + height: 100px; + line-height: 100px; + margin-top: 32px; + text-align: center; + } + .avatar { + width: 100px; + height: 100px; + display: block; + } + + .col-sm-12 { + margin-top: 20px; + } + + .col-sm-12 select { + height: 33px; + } + #app1{ + margin-left: 255px; + } + + +</style> + <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="form-horizontal"> @@ -141,20 +185,28 @@ <label class="col-sm-3 control-label head-scu-label"></label> <label>推荐像素:210x280px</label> </div> -<div class="form-group"> - <label class="col-sm-3 control-label head-scu-label">*详情页</label> - <div class="col-sm-2"> - <div id="detailDrawingPreId"> - <div><img width="100px" height="100px" src="${ctxPath}/img/NoPIC.png"></div> + + +<div id="app1" class="form-group"> + <label class="col-sm-3 control-label head-scu-label">*详情页(请上传不超过五张图片): </label> + <div class="col-sm-4" style="width: 100%;margin-left: 11%;margin-top: 1%"> + <el-upload + :limit="5" + class="avatar-uploader" + action="/tCouponManage/uploadPic" + list-type="picture-card" + accept="." + :on-success="handleAvatarSuccess" + :on-remove="handleRemove"> + <i class="el-icon-plus"></i> + </el-upload> + <el-dialog :visible.sync="dialogVisible"> + <img width="100%" :src="imageUrl1" alt=""> + </el-dialog> </div> - </div> - <div class="col-sm-2"> - <div class="head-scu-btn upload-btn" id="detailDrawingBtnId"> - <i class="fa fa-upload"></i> 上传 - </div> - </div> - <input type="hidden" id="detailDrawing" value=""/> </div> + + <div class="form-group"> <label class="col-sm-3 control-label head-scu-label"></label> <label>推荐像素:780x440px</label> @@ -223,7 +275,54 @@ </div> </div> <script src="${ctxPath}/modular/system/coursePackage/coursePackage_info.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> +<script src="${ctxPath}/js/vue/vue.js"></script> +<script src="${ctxPath}/js/elementui/index.js"></script> +<link rel="stylesheet" href="${ctxPath}/js/elementui/index.css"> +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"> + <script type="text/javascript"> + + + + + var vue2 = new Vue({ + el: '#app1', + props: { + // 数量限制 + limit: { + type: Number, + default: 2 + }, + }, + data: { + autoUpload: true,//自动上传 + imageUrl1: '',//模型数据,用于上传图片完成后图片预览 + dialogVisible: false + }, + methods: { + handleAvatarSuccess(res, file) { + console.log(CoursePackageInfo.goodsPicArray1) + CoursePackageInfo.goodsPicArray1.push(file); + }, + beforeAvatarUpload(file) { + const isLt2M = file.size / 1024 / 1024 < 10; + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 10MB!'); + } + return isLt2M; + }, + handleRemove(file, fileList) { + CoursePackageInfo.goodsPicArray1 = CoursePackageInfo.goodsPicArray1.filter(item => { + return item.uid != file.uid; + }); + }, + }, + created() { + }, + }); + + laydate.render({ elem: '#classStartTime' ,type: 'time' diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html index b475cf4..a63b600 100644 --- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html +++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/coursePackage/coursePackage_edit.html @@ -1,4 +1,46 @@ @layout("/common/_container.html"){ +<style> + .avatar-uploader .el-upload { + border: 1px dashed #d9d9d9; + border-radius: 6px; + cursor: pointer; + position: relative; + height: 100px; + width: 100px; + overflow: hidden; + } + + .avatar-uploader .el-upload:hover { + border-color: #409EFF; + } + .avatar-uploader-icon { + font-size: 28px; + color: #8c939d; + width: 100px; + height: 100px; + line-height: 100px; + margin-top: 32px; + text-align: center; + } + .avatar { + width: 100px; + height: 100px; + display: block; + } + + .col-sm-12 { + margin-top: 20px; + } + + .col-sm-12 select { + height: 33px; + } + #app1{ + margin-left: 255px; + } + + +</style> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="form-horizontal"> @@ -148,20 +190,47 @@ <label class="col-sm-3 control-label head-scu-label"></label> <label>推荐像素:210x280px</label> </div> - <div class="form-group"> - <label class="col-sm-3 control-label head-scu-label">*详情页</label> - <div class="col-sm-2"> - <div id="detailDrawingPreId"> - <div><img width="100px" height="100px" src="${item.detailDrawing}"></div> - </div> - </div> - <div class="col-sm-2"> - <div class="head-scu-btn upload-btn" id="detailDrawingBtnId"> - <i class="fa fa-upload"></i> 上传 - </div> - </div> - <input type="hidden" id="detailDrawing" value="${item.detailDrawing}"/> - </div> +<!-- <div class="form-group">--> +<!-- <label class="col-sm-3 control-label head-scu-label">*详情页</label>--> +<!-- <div class="col-sm-2">--> +<!-- <div id="detailDrawingPreId">--> +<!-- <div><img width="100px" height="100px" src="${item.detailDrawing}"></div>--> +<!-- </div>--> +<!-- </div>--> +<!-- <div class="col-sm-2">--> +<!-- <div class="head-scu-btn upload-btn" id="detailDrawingBtnId">--> +<!-- <i class="fa fa-upload"></i> 上传--> +<!-- </div>--> +<!-- </div>--> +<!-- <input type="hidden" id="detailDrawing" value="${item.detailDrawing}"/>--> +<!-- </div>--> + + + + +<div class="row" id="app1"> + <div class="form-group"> + <label class="col-sm-3 control-label head-scu-label">*详情页(请上传不超过五张图片): </label> + <div class="col-sm-2" style="width: 100%;margin-left: 11%;margin-top: 1%"> + <el-upload + :limit="5" + class="avatar-uploader" + action="/tCouponManage/uploadPic" + list-type="picture-card" + accept="." + :file-list="imageUrl2" + :on-success="handleAvatarSuccess" + :on-remove="handleRemove"> + <i class="el-icon-plus"></i> + </el-upload> + <el-dialog :visible.sync="dialogVisible"> + <img width="100%" :src="imageUrl2" alt=""> + </el-dialog> + </div> + </div> +</div> + + <div class="form-group"> <label class="col-sm-3 control-label head-scu-label"></label> <label>推荐像素:780x440px</label> @@ -257,8 +326,74 @@ </div> </div> <script src="${ctxPath}/modular/system/coursePackage/coursePackage_info.js"></script> +<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script> +<script src="${ctxPath}/js/vue/vue.js"></script> +<script src="${ctxPath}/js/elementui/index.js"></script> +<link rel="stylesheet" href="${ctxPath}/js/elementui/index.css"> +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"> + <script type="text/javascript"> + + let id = "${item.detailDrawing}" + let obj = [] + + var vue2 = new Vue({ + el: '#app1', + props: { + // 数量限制 + limit: { + type: Number, + default: 2 + }, + }, + data: { + autoUpload: true,//自动上传 + imageUrl1: '',//模型数据,用于上传图片完成后图片预览 + imageUrl2: [], + dialogVisible: false + }, + methods: { + handleAvatarSuccess(res, file) { + file.url =file.response + CoursePackageInfo.goodsPicArray1.push(file); + }, + changeImg(){ + var i = id.split(",") + for (let j = 0; j <i.length; j++) { + let obj={ + fileName:i[j], + uuid:i[j], + url:i[j], + response:i[j], + } + this.imageUrl2.push(obj) + + } + }, + beforeAvatarUpload(file) { + const isLt2M = file.size / 1024 / 1024 < 10; + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 10MB!'); + } + return isLt2M; + }, + handleRemove(file, fileList) { + CoursePackageInfo.goodsPicArray1 = CoursePackageInfo.goodsPicArray1.filter(item => { + return item.uid != file.uid; + }); + }, + }, + created() { + this.changeImg() + CoursePackageInfo.goodsPicArray1 = this.imageUrl2 + }, + }); + + + + + console.log("============>"+`${couponIds}`) laydate.render({ elem: '#classStartTime' diff --git a/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackageDiscount.js b/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackageDiscount.js index 07f3d30..f7e8c4b 100644 --- a/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackageDiscount.js +++ b/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackageDiscount.js @@ -93,6 +93,7 @@ } lay('.startAndEndDay').each(function(i, e){ laydate.render({ + trigger: 'click', elem: e ,type: 'datetime' ,range: true @@ -117,6 +118,7 @@ }); lay('.time').each(function(i, e){ laydate.render({ + trigger: 'click', elem: this ,type: 'time' ,range: true diff --git a/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackage_info.js b/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackage_info.js index d705d60..618aa38 100644 --- a/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackage_info.js +++ b/cloud-server-management/src/main/webapp/static/modular/system/coursePackage/coursePackage_info.js @@ -2,6 +2,7 @@ * 用户详情对话框(可用于添加和修改对话框) */ var CoursePackageInfo = { + goodsPicArray1:[], userInfoData: {}, goodsPicArray: [], }; @@ -60,6 +61,22 @@ let codeTime = $('#codeTime').val(); let type = $('#type').val(); let holitime = $('#holitime').val(); + + + var goodImgs = CoursePackageInfo.goodsPicArray1; + // if(goodImgs.length==0){ + // Feng.info("请上传赛事活动图片") + // return; + // } + var imgOne =""; + for (let i = 0; i <goodImgs.length; i++) { + if(i==goodImgs.length-1){ + imgOne += (goodImgs[i].response) + }else { + imgOne+=(goodImgs[i].response+",") + } + + } // let classStartTime = JSON.stringify($('#classStartTime').val()); @@ -147,10 +164,10 @@ Feng.error("课包封面不能为空"); return } - if(null == detailDrawing || '' == detailDrawing){ - Feng.error("详情页不能为空"); - return - } + // if(null == detailDrawing || '' == detailDrawing){ + // Feng.error("详情页不能为空"); + // return + // } if(null == introduceDrawing || '' == introduceDrawing){ Feng.error("课包介绍不能为空"); return @@ -177,7 +194,7 @@ // classEndTime: classStartTime.split(" - ")[1], classWeeks: classWeeks, coverDrawing: coverDrawing, - detailDrawing: detailDrawing, + detailDrawing: imgOne, introduceDrawing: introduceDrawing, sort: sort, validDays: validDays, @@ -219,6 +236,24 @@ let maxSubscribeNumber = $('#maxSubscribeNumber').val(); let codeTime = $('#codeTime').val(); let type = $('#type').val(); + + + + + var goodImgs = CoursePackageInfo.goodsPicArray1; + // if(goodImgs.length==0){ + // Feng.info("请上传赛事活动图片") + // return; + // } + var imgOne =""; + for (let i = 0; i <goodImgs.length; i++) { + if(i==goodImgs.length-1){ + imgOne += (goodImgs[i].response) + }else { + imgOne+=(goodImgs[i].response+",") + } + + } let holitime = $('#holitime').val(); @@ -304,10 +339,10 @@ Feng.error("课包封面不能为空"); return } - if(null == detailDrawing || '' == detailDrawing){ - Feng.error("详情页不能为空"); - return - } + // if(null == detailDrawing || '' == detailDrawing){ + // Feng.error("详情页不能为空"); + // return + // } if(null == introduceDrawing || '' == introduceDrawing){ Feng.error("课包介绍不能为空"); return @@ -335,7 +370,7 @@ // classEndTime: classStartTime.split(" - ")[1], classWeeks: classWeeks, coverDrawing: coverDrawing, - detailDrawing: detailDrawing, + detailDrawing: imgOne, introduceDrawing: introduceDrawing, sort: sort, validDays: validDays, -- Gitblit v1.7.1