From 1cb12391db6154f2d1a8fdf8e0506fe3f3eb2f15 Mon Sep 17 00:00:00 2001 From: luo <2855143437@qq.com> Date: 星期日, 08 十月 2023 16:19:34 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- cloud-server-management/src/main/webapp/WEB-INF/view/system/tCompetition/TCompetition_add.html | 122 +++++++++++++++++++++++++++++++++++----- 1 files changed, 106 insertions(+), 16 deletions(-) diff --git a/cloud-server-management/src/main/webapp/WEB-INF/view/system/tCompetition/TCompetition_add.html b/cloud-server-management/src/main/webapp/WEB-INF/view/system/tCompetition/TCompetition_add.html index dec58f2..b49d32e 100644 --- a/cloud-server-management/src/main/webapp/WEB-INF/view/system/tCompetition/TCompetition_add.html +++ b/cloud-server-management/src/main/webapp/WEB-INF/view/system/tCompetition/TCompetition_add.html @@ -1,5 +1,47 @@ @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"> @@ -28,7 +70,7 @@ <div class="form-group" id="shop"> <label class="col-sm-3 control-label">举办门店:</label> <div class="col-sm-9"> - <select class="form-control" id="shopId" name="shopId" multiple> + <select class="form-control" id="shopId" name="shopId"> <option value="">选择门店</option> </select> </div> @@ -114,7 +156,26 @@ </div> <#avatar id="coverDrawing" name="赛事封面(推荐像素:210*280px):" /> - <#avatar id="imgs" name="赛事图片(推荐像素:780*440px):" /> + <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="." + :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> <#avatar id="registrationNotes" name="报名须知(推荐像素:宽780px):" /> </div> @@ -132,26 +193,55 @@ </div> </div> <script src="${ctxPath}/modular/system/tCompetition/tCompetition_info.js"></script> -<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"> -<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.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"> <script> - $(document).ready(function() { - $('#shopId').select2({ - multiple: true, - closeOnSelect: false - }); - }); - - laydate.render({ - elem: '#startTime' - ,type:"datetime" + var vue2 = new Vue({ + el: '#app1', + props: { + // 数量限制 + limit: { + type: Number, + default: 2 + }, + }, + data: { + autoUpload: true,//自动上传 + imageUrl1: '',//模型数据,用于上传图片完成后图片预览 + dialogVisible: false + }, + methods: { + handleAvatarSuccess(res, file) { + console.log(TCarInfoDlg.goodsPicArray1) + TCarInfoDlg.goodsPicArray1.push(file); + }, + beforeAvatarUpload(file) { + const isLt2M = file.size / 1024 / 1024 < 10; + if (!isLt2M) { + this.$message.error('上传图片大小不能超过 10MB!'); + } + return isLt2M; + }, + handleRemove(file, fileList) { + TCarInfoDlg.goodsPicArray1 = TCarInfoDlg.goodsPicArray1.filter(item => { + return item.uid != file.uid; + }); + }, + }, + created() { + }, }); laydate.render({ elem: '#endTime' - ,type:"datetime" + ,type:"date" }); laydate.render({ + elem: '#startTime' + ,type:"date" + }); + + laydate.render({ elem: '#registerEndTime' ,type:"datetime" }); -- Gitblit v1.7.1