| | |
| | | <!DOCTYPE html> |
| | | <html class="x-admin-sm"> |
| | | <html class="x-admin-sm" xmlns:v-bind="http://www.w3.org/1999/xhtml"> |
| | | |
| | | <head> |
| | | <meta charset="UTF-8"> |
| | |
| | | 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"> |
| | | <link rel="stylesheet" href="./css/common.css"> |
| | | <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script> |
| | | <script type="text/javascript" src="./js/xadmin.js"></script> |
| | | <script type="text/javascript" src="./js/vue.min.js"></script> |
| | |
| | | |
| | | <style> |
| | | .poster { |
| | | max-width: 300px; |
| | | max-height: 300px; |
| | | max-width: 150px; |
| | | max-height: 150px; |
| | | } |
| | | |
| | | .layui-input-inline { |
| | | width: auto !important; |
| | | } |
| | | |
| | | .btn-add-award { |
| | | color: white !important; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .award-type-list { |
| | | display: flex; |
| | | } |
| | | |
| | | .award-type-list .award-type { |
| | | position: relative; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .award-type-list img { |
| | | position: absolute; |
| | | right: -5px; |
| | | width: 20px; |
| | | height: 20px; |
| | | top: -5px; |
| | | } |
| | | |
| | | .desc { |
| | | color: #999; |
| | | padding-bottom: 5px; |
| | | } |
| | | |
| | | textarea { |
| | | width: 365px !important; |
| | | } |
| | | |
| | | .banner-container { |
| | | display: none; |
| | | } |
| | | |
| | | .banner { |
| | | display: flex; |
| | | } |
| | | |
| | | .banner-image-container { |
| | | position: relative; |
| | | margin-right: 5px; |
| | | } |
| | | |
| | | .banner-image-container i { |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | } |
| | | |
| | | .hidden { |
| | | display: none; |
| | | } |
| | | |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | |
| | | |
| | | <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">活动内容</div> |
| | | <div class="layui-card-header">抽奖信息</div> |
| | | <div class="layui-card-body"> |
| | | <div class="layui-row"> |
| | | <form class="layui-form"> |
| | | <div class="layui-form-item"> |
| | | <label for="L_name" class="layui-form-label"> |
| | | <span class="x-red">*</span>活动名称</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="text" id="L_name" name="name" lay-verify="username|required" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | |
| | | <form class="layui-form" lay-filter="form-activity-info"> |
| | | <div class="layui-form-item"> |
| | | <label for="L_appName" class="layui-form-label"> |
| | | <span class="x-red">*</span>活动海报</label> |
| | | <span class="x-red">*</span>抽奖活动封面</label> |
| | | <div class="layui-input-inline"> |
| | | |
| | | <div class="layui-upload"> |
| | | <button type="button" class="layui-btn" id="test1">选择图片</button> |
| | | <button type="button" class="layui-btn" id="choicePoster">选择图片</button> |
| | | <div class="layui-upload-list"> |
| | | <img class="layui-upload-img poster" id="poster"> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label for="L_desc" class="layui-form-label"> |
| | | 活动简介</label> |
| | | <div class="layui-input-inline"> |
| | | <textarea id="L_desc" name="desc" required="" lay-verify="desc" |
| | | autocomplete="off" class="layui-textarea"></textarea></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="maxPersonCount" required="" lay-verify="required|number" |
| | | autocomplete="off" class="layui-input"></div> |
| | | <span class="x-red">*</span>抽奖活动详情页横幅设置</label> |
| | | <div> |
| | | |
| | | <div> |
| | | |
| | | <!-- lay-filter="banner" --> |
| | | <input type="radio" name="showBanner" value="0" title="和抽奖活动封面一致" checked="" |
| | | lay-filter="banner"> |
| | | <input type="radio" name="showBanner" value="1" title="重新设置" lay-filter="banner"> |
| | | </div> |
| | | |
| | | <div class="layui-upload layui-input-inline banner-container"> |
| | | <button type="button" class="layui-btn" id="choiceBanner">选择图片</button> |
| | | <div class="layui-upload-list banner"> |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | </div> |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" |
| | | id="saveActivityInfo" lay-submit="">保存 |
| | | </button> |
| | | |
| | | |
| | | <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="preStartTime" required="" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | 预计结束时间</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="text" name="preFinishTime" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | 预计开奖时间</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="text" name="preOpenTime" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | |
| | | |
| | | <div class="layui-form-item"> |
| | | <label for="L_remarks" class="layui-form-label"></label> |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" id="save" |
| | | lay-filter="save-activity" lay-submit="">保存 |
| | | </button> |
| | | </div> |
| | | </form> |
| | | </div> |
| | | |
| | |
| | | </div> |
| | | |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">活动奖品</div> |
| | | <div class="layui-card-header">奖品信息</div> |
| | | <div class="layui-card-body"> |
| | | <!--奖品列表 --> |
| | | |
| | | <form class="layui-form award-form"> |
| | | <div v-for="(item,index) in tempAwardsList"> |
| | | <form class="layui-form" lay-filter="form-award-info"> |
| | | |
| | | |
| | | <div class="layui-form-item"> |
| | | <label for="L_name" class="layui-form-label"> |
| | | <span class="x-red">*</span>奖品名称</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="text" id="L_name" placeholder="请输入奖品名称" name="name" lay-verify="username|required" |
| | | autocomplete="off" class="layui-input"></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="maxPersonCount" placeholder="请输入奖品数量" required="" lay-verify="required|number" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | <span class="x-red">*</span>奖品类型</label> |
| | | <div class="layui-input-inline"> |
| | | <select name="city" lay-verify="required"> |
| | | <option value=""></option> |
| | | <option value="0">支付宝现金红包</option> |
| | | </select> |
| | | </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="maxPersonCount" placeholder="请输入红包总金额" required="" lay-verify="required|number" |
| | | autocomplete="off" class="layui-input"></div> |
| | | </div> |
| | | <div class="layui-tab layui-tab-card" lay-filter="award"> |
| | | <ul class="layui-tab-title"> |
| | | <li v-for="(item,index) in tempAwardsList" v-bind:class="{'layui-this':item.selected}" |
| | | v-bind:lay-id="index">{{item.title}} |
| | | </li> |
| | | <button class="layui-btn btn-add-award" type="button" data-type="tabAdd" |
| | | v-on:click="addAward"><i |
| | | class="layui-icon"></i>增加奖项 |
| | | </button> |
| | | </ul> |
| | | <div class="layui-tab-content"> |
| | | <div class="layui-tab-item" v-for="(item,index) in tempAwardsList" |
| | | v-bind:class="{'layui-show':item.selected}"> |
| | | <div class="award-type-list"> |
| | | <div class="award-type"> |
| | | <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" |
| | | v-on:click="awardRedPacktRandom($event,index)">随机红包 |
| | | </button> |
| | | <img src="img/icon_checked_round.png" v-if="item.data.type==2"> |
| | | </div> |
| | | <div class="award-type"> |
| | | <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" |
| | | v-on:click="awardRedPacktDivide($event,index)">固定红包 |
| | | </button> |
| | | <img src="img/icon_checked_round.png" v-if="item.data.type==1"> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | <span class="x-red">*</span>中奖方式</label> |
| | | <div class="layui-input-inline"> |
| | | <select name="city" lay-verify="required"> |
| | | <option value=""></option> |
| | | <option value="0">随机</option> |
| | | <option value="0">均分</option> |
| | | </select> |
| | | <button type="button" |
| | | class="layui-btn layui-btn-radius layui-btn-danger btn-award-delete" |
| | | v-bind:lay-index="index" v-on:click="deleteAward(index)" |
| | | style="margin-top: 10px;"> |
| | | 删除 |
| | | </button> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | <i @click="delAward(index)" class="layui-icon"></i> |
| | | |
| | | <hr class="layui-bg-green"> |
| | | |
| | | </div> |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" id="saveAwardInfo" lay-submit="">保存 |
| | | </button> |
| | | |
| | | |
| | | <i v-on:click="addAward" class="layui-btn">添加奖项</i> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label for="L_remarks" class="layui-form-label"></label> |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" |
| | | lay-filter="save-awards" lay-submit="">保存 |
| | | </button> |
| | | </div> |
| | | </form> |
| | | |
| | | </div> |
| | |
| | | |
| | | |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">开奖设置</div> |
| | | <div class="layui-card-header">参与条件</div> |
| | | <div class="layui-card-body"> |
| | | <form class="layui-form" lay-filter="form-join-info"> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | <span class="x-red">*</span>参与条件</label> |
| | | <div class="layui-input-block"> |
| | | <div class="desc"> |
| | | 用户满足以下设置条件后方可参与抽奖 |
| | | </div> |
| | | <div> |
| | | <input type="radio" name="must" value="0" title="不设置/无" checked=""> |
| | | <input type="radio" name="must" value="1" title="用户必须要满足以下条件"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | <span class="x-red">*</span>跳转链路</label> |
| | | <div> |
| | | |
| | | <div class="award-type-list"> |
| | | <div class="award-type"> |
| | | <button type="button" class="layui-btn layui-btn-primary layui-btn-lg" |
| | | v-on:click="openAdEditDialog('alipayLife')">关注生活号 |
| | | </button> |
| | | <img src="img/icon_checked_round.png" v-if="joinInfo.adInfo.type=='alipayLife'"> |
| | | </div> |
| | | <div class="award-type"> |
| | | <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">浏览小程序 |
| | | </button> |
| | | <img src="img/icon_checked_round.png" v-if="false"> |
| | | </div> |
| | | |
| | | <div class="award-type"> |
| | | <button type="button" class="layui-btn layui-btn-primary layui-btn-lg">浏览直播间 |
| | | </button> |
| | | <img src="img/icon_checked_round.png" v-if="false"> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label for="L_desc" class="layui-form-label"> |
| | | 参与条件说明</label> |
| | | <div class="layui-input-inline"> |
| | | <textarea id="L_desc" name="desc" lay-verify="desc" |
| | | autocomplete="off" class="layui-textarea" maxlength="256"></textarea></div> |
| | | </div> |
| | | |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" id="saveJoinInfo" |
| | | lay-filter="save-activity" lay-submit="">保存 |
| | | </button> |
| | | </form> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-card"> |
| | | <div class="layui-card-header">广告设置</div> |
| | | <div class="layui-card-header">开奖条件</div> |
| | | <div class="layui-card-body"> |
| | | |
| | | <form class="layui-form" lay-filter="form-open-info"> |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | <span class="x-red">*</span>至少参与人数</label> |
| | | <div class="layui-input-inline"> |
| | | <label class="desc">最少1000人,最多100000人,默认5000人(活动结束时止)</label> |
| | | <div class="flex-row flex-center"> |
| | | <input type="text" name="minPersonCount" required="" lay-verify="integer" |
| | | autocomplete="off" class="layui-input input-small" placeholder="正整数"> 人 |
| | | </div> |
| | | </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">至少1天,最多7天,默认3天(活动发布时起)</label> |
| | | <div class="flex-row flex-center"> |
| | | <input type="text" name="day" required="" lay-verify="integer" |
| | | autocomplete="off" class="layui-input input-small" placeholder="正整数"> 天 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="layui-form-item"> |
| | | <label class="layui-form-label"> |
| | | 开奖条件说明</label> |
| | | <div class="layui-input-inline"> |
| | | <label class="desc">最多150个字符,可换行且兼容符号表情</label> |
| | | <div class="flex-row flex-center"> |
| | | <textarea class="layui-textarea" maxlength="150"></textarea> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <button class="layui-btn layui-btn-radius layui-btn-normal" id="saveOpenInfo" |
| | | lay-filter="save-activity" lay-submit="">保存 |
| | | </button> |
| | | </form> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | |
| | | <button class="layui-btn layui-btn-warm layui-btn-lg" id="submit" lay-submit="">立即提交</button> |
| | | <button class="layui-btn layui-btn-warm layui-btn-lg" v-on:click="submit">立即提交</button> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | <script src="js/common.js"></script> |
| | | |
| | | <script> |
| | | //验证管理器 |
| | | var validManager = { |
| | | //验证抽奖信息 |
| | | verifyActivityInfo() { |
| | | const field = common.layuiForm.val('form-activity-info'); |
| | | if (!$("#poster").attr("src")) { |
| | | common.notify.error("请选择封面图片"); |
| | | return false; |
| | | } |
| | | |
| | | //判断条件 |
| | | if (field.showBanner == 1 && $(".banner").find("img").length == 0) { |
| | | common.notify.error("请选择banner图片"); |
| | | return false; |
| | | } |
| | | |
| | | if (field.showBanner == 1 && $(".banner").find("img").length > 3) { |
| | | common.notify.error("banner图最多3张"); |
| | | return false; |
| | | } |
| | | return true; |
| | | }, |
| | | //验证奖品信息 |
| | | verifyAwardInfo() { |
| | | console.log("verifyAwardInfo"); |
| | | if (app.tempAwardsList == null || app.tempAwardsList.length == 0) { |
| | | common.notify.error("请添加奖项"); |
| | | return false; |
| | | } |
| | | var hasAward = false; |
| | | for (var i = 0; i < app.tempAwardsList.length; i++) { |
| | | if (app.tempAwardsList[i].data && app.tempAwardsList[i].data.type) { |
| | | hasAward = true; |
| | | break; |
| | | } |
| | | } |
| | | |
| | | if (!hasAward) { |
| | | common.notify.error("请选择奖项类型"); |
| | | return false; |
| | | } |
| | | |
| | | const field = common.layuiForm.val('form-award-info'); |
| | | |
| | | return true; |
| | | }, |
| | | //验证参与信息 |
| | | verifyJoinInfo() { |
| | | const field = common.layuiForm.val('form-join-info'); |
| | | console.log(field); |
| | | if (!app.joinInfo.adInfo.data) { |
| | | common.notify.error("请选择参与条件-跳转链路"); |
| | | return false; |
| | | } |
| | | |
| | | |
| | | return true; |
| | | }, |
| | | //验证开奖条件 |
| | | verifyOpenInfo() { |
| | | const field = common.layuiForm.val('form-open-info'); |
| | | console.log(field); |
| | | if (parseInt(field.minPersonCount) < 1000 || parseInt(field.minPersonCount) > 10000) { |
| | | common.notify.error("至少参与人数的范围为:1000-10000"); |
| | | return false; |
| | | } |
| | | |
| | | if (parseInt(field.day) < 1 || parseInt(field.day) > 7) { |
| | | common.notify.error("活动有效期的范围为:1-7"); |
| | | return false; |
| | | } |
| | | |
| | | return true; |
| | | }, |
| | | verify(es) { |
| | | |
| | | for (var i = 0; i < es.length; i++) { |
| | | if (!es[i]()) { |
| | | return false; |
| | | } |
| | | } |
| | | return true; |
| | | }, |
| | | verifyAll() { |
| | | return this.verify([this.verifyActivityInfo, this.verifyAwardInfo, this.verifyJoinInfo, this.verifyOpenInfo]); |
| | | } |
| | | }; |
| | | |
| | | var formManager = { |
| | | |
| | | //保存到临时变量 |
| | | saveActivityInfoToTemp() { |
| | | app.temp.activity = app.activity; |
| | | }, |
| | | saveAwardInfoToTemp() { |
| | | app.temp.awardInfo = app.tempAwardsList; |
| | | }, |
| | | saveJoinInfoToTemp() { |
| | | //赋值 |
| | | const field = common.layuiForm.val('form-join-info'); |
| | | var joinInfo = app.joinInfo; |
| | | joinInfo.must = field.must; |
| | | joinInfo.desc = field.desc; |
| | | app.temp.joinInfo = joinInfo; |
| | | }, |
| | | saveOpenInfoToTemp() { |
| | | const field = common.layuiForm.val('form-open-info'); |
| | | var openInfo = app.openInfo; |
| | | for (key in field) { |
| | | openInfo[key] = field[key]; |
| | | } |
| | | app.temp.openInfo = openInfo; |
| | | }, |
| | | saveToTemp() { |
| | | this.saveActivityInfoToTemp(); |
| | | this.saveAwardInfoToTemp(); |
| | | this.saveJoinInfoToTemp(); |
| | | this.saveOpenInfoToTemp(); |
| | | } |
| | | |
| | | }; |
| | | |
| | | </script> |
| | | |
| | | <script> |
| | | //文件上传初始化 |
| | | var uploadPoster; |
| | | var uploadBanner; |
| | | var bannerFileList; |
| | | common.initLayui(function () { |
| | | //layui相关初始化成功 |
| | | app.initData(); |
| | | |
| | | uploadPoster = common.initUploadImagePlugin({ |
| | | elem: "#choicePoster", |
| | | showElem: "#poster", |
| | | uploadUrl: "/admin/upload/image?from=activity", |
| | | dir: 'poster', |
| | | field: "image", |
| | | uploadSuccess: function (res) { |
| | | app.posterUploadSuccess(res.data); |
| | | } |
| | | }); |
| | | |
| | | var bannerUrlList = new Array(); |
| | | |
| | | uploadBanner = common.initUploadImagePlugin({ |
| | | elem: "#choiceBanner", |
| | | uploadUrl: "/admin/upload/image?from=activity", |
| | | dir: 'banner', |
| | | field: "image", |
| | | multiple: true, |
| | | choose(obj) { |
| | | var files = bannerFileList = obj.pushFile(); |
| | | |
| | | obj.preview(function (index, file, result) { |
| | | var item = getBannerItemHtml(result); |
| | | item.find("i").on('click', function () { |
| | | //删除当前数据 |
| | | delete files[index] |
| | | item.remove(); |
| | | uploadBanner.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选 |
| | | }); |
| | | |
| | | $(".banner").append(item); |
| | | }); |
| | | }, |
| | | uploadSuccess: function (res) { |
| | | //计算需要上传文件的数量 |
| | | var count = 0; |
| | | for (key in bannerFileList) { |
| | | count++; |
| | | } |
| | | bannerUrlList.push(res.data); |
| | | //文件上传完毕 |
| | | if (bannerUrlList.length == count) { |
| | | app.bannerUploadSuccess(bannerUrlList); |
| | | } |
| | | } |
| | | }); |
| | | |
| | | }); |
| | | |
| | | function getBannerItemHtml(src) { |
| | | var html = "<div class='banner-image-container'>"; |
| | | html += "<img class='layui-upload-img poster' src='" + src + "'>"; |
| | | html += "<i class='layui-icon'></i>"; |
| | | html += "</div>"; |
| | | var item = $(html); |
| | | return item; |
| | | } |
| | | |
| | | |
| | | var app = new Vue({ |
| | | el: '#main', |
| | | data: { |
| | | poster: '', |
| | | activity: null, |
| | | awardsList: [], |
| | | tempAwardsList: [{}], |
| | | openInfo: null, |
| | | adInfo: null, |
| | | uploadPosterUrl: '/admin/upload/image?from=activity' |
| | | activity: {}, |
| | | tempAwardsList: [], |
| | | openInfo: {}, |
| | | joinInfo: {adInfo: {}}, |
| | | temp: {//临时数据,用于提交到服务端 |
| | | |
| | | }, |
| | | tempField: {//field临时存储 |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | | tempAwardsList: function () { |
| | | setTimeout(function () { |
| | | layui.use(['form'], function () { |
| | | form.render(); |
| | | }) |
| | | // layui.use(['form'], function () { |
| | | // form = layui.form; |
| | | // form.render(); |
| | | // }) |
| | | common.layuiForm.render(); |
| | | }); |
| | | } |
| | | }, |
| | | created: function () { |
| | | |
| | | }, |
| | | mounted: function () { |
| | | this.addAward(); |
| | | }, |
| | | methods: { |
| | | //初始化数据 |
| | | initData() { |
| | | $this = this; |
| | | /**************初始化抽奖信息************/ |
| | | if (this.activity.poster) |
| | | $("#poster").attr("src", this.activity.poster); |
| | | if (this.activity.banner && this.activity.banner.length > 0) { |
| | | for (var i = 0; i < this.activity.banner.length; i++) { |
| | | var url = this.activity.banner[i].img; |
| | | var item = getBannerItemHtml(url); |
| | | item.find("i").on('click', function () { |
| | | //删除当前数据 |
| | | app.activity.banner.splice(i, 1); |
| | | item.remove(); |
| | | }); |
| | | $(".banner").append(item); |
| | | } |
| | | } |
| | | |
| | | //选择banner |
| | | common.layuiForm.on('radio(banner)', function (data) { |
| | | if (data.value == 1) { |
| | | $(".banner-container").css("display", "block"); |
| | | } else { |
| | | $(".banner-container").css("display", "none"); |
| | | } |
| | | }); |
| | | |
| | | common.layuiForm.on('submit(form-activity-info)', |
| | | function (data) { |
| | | field = common.layuiForm.val('form-activity-info'); |
| | | if (!validManager.verifyActivityInfo()) |
| | | return false; |
| | | // 数据暂存 |
| | | app.tempField.activity = field; |
| | | //有封面图 |
| | | if ($(".layui-upload-file").eq(0).val()) { |
| | | //上传封面图 |
| | | uploadPoster.upload(); |
| | | } else { |
| | | $this.posterUploadSuccess(); |
| | | } |
| | | return false; |
| | | }); |
| | | /**************初始化奖品信息************/ |
| | | common.layuiForm.on('submit(form-award-info)', |
| | | function (data) { |
| | | console.log("提交奖品信息"); |
| | | if (!validManager.verifyAwardInfo()) |
| | | return false; |
| | | //赋值 |
| | | $("#saveJoinInfo").click(); |
| | | |
| | | return false; |
| | | }); |
| | | |
| | | /**************初始化参与条件************/ |
| | | common.layuiForm.on('submit(form-join-info)', |
| | | function (data) { |
| | | console.log("提交参与条件"); |
| | | if (!validManager.verifyJoinInfo()) |
| | | return false; |
| | | $("#saveOpenInfo").click(); |
| | | return false; |
| | | }); |
| | | |
| | | /**************初始化开奖条件************/ |
| | | common.layuiForm.on('submit(form-open-info)', |
| | | function (data) { |
| | | console.log("提交开奖条件"); |
| | | if (!validManager.verifyOpenInfo()) |
| | | return false; |
| | | |
| | | |
| | | return false; |
| | | }); |
| | | }, |
| | | |
| | | //封面图上传成功 |
| | | posterUploadSuccess(res) { |
| | | console.log("封面图上传成功"); |
| | | console.log(res); |
| | | //上传文件 |
| | | var bannerEmpty = true; |
| | | for (key in bannerFileList) { |
| | | bannerEmpty = false; |
| | | break; |
| | | } |
| | | if (!bannerEmpty) { |
| | | //上传banner图片 |
| | | uploadBanner.upload(); |
| | | } else { |
| | | this.bannerUploadSuccess(); |
| | | } |
| | | }, |
| | | //banner图上传成功 |
| | | bannerUploadSuccess(res) { |
| | | console.log(res); |
| | | console.log("Banner图上传成功"); |
| | | if (res) { |
| | | for (var i = 0; i < res.length; i++) { |
| | | //添加新的数据 |
| | | var banner = {}; |
| | | banner.url = res[i]; |
| | | if (!this.activity.bannerList) { |
| | | this.activity.bannerList = new Array(); |
| | | } |
| | | this.activity.bannerList.push(banner); |
| | | } |
| | | } |
| | | //提交奖项 |
| | | $("#saveAwardInfo").click(); |
| | | |
| | | }, |
| | | |
| | | //添加 |
| | | requestAdd: function () { |
| | | //组装数据 |
| | |
| | | }, function (res) { |
| | | }); |
| | | }, |
| | | //图片上传成功 |
| | | posterUploadSuccess: function (url) { |
| | | //获取表单的数据 |
| | | app.data.poster = url; |
| | | app.requestAdd(); |
| | | }, |
| | | |
| | | addAward: function () { |
| | | this.tempAwardsList.push({}); |
| | | }, |
| | | delAward: function (index) { |
| | | this.tempAwardsList.splice(index, 1); |
| | | }, |
| | | //提交 |
| | | submit: function () { |
| | | $("#poster").trigger("click"); |
| | | //未验证通过 |
| | | if (!validManager.verifyAll()) { |
| | | return; |
| | | } |
| | | //触发表单提交 |
| | | $("#saveActivityInfo").click(); |
| | | //保存临时变量 |
| | | formManager.saveToTemp(); |
| | | console.log("临时变量") |
| | | //将数据提交到服务器 |
| | | var temp = this.temp; |
| | | |
| | | |
| | | |
| | | console.log(this.temp); |
| | | }, |
| | | |
| | | /** |
| | | * 奖项 |
| | | */ |
| | | |
| | | addAward: function () { |
| | | var awardCount = this.tempAwardsList.length; |
| | | if (awardCount >= 5) { |
| | | common.notify.error("奖项最多为5个"); |
| | | return; |
| | | } |
| | | var awardTitle = ""; |
| | | switch (awardCount) { |
| | | case 0: |
| | | awardTitle = "奖项一" |
| | | break; |
| | | case 1: |
| | | awardTitle = "奖项二" |
| | | break; |
| | | case 2: |
| | | awardTitle = "奖项三" |
| | | break; |
| | | case 3: |
| | | awardTitle = "奖项四" |
| | | break; |
| | | case 4: |
| | | awardTitle = "奖项五" |
| | | break; |
| | | } |
| | | |
| | | this.tempAwardsList.push({title: awardTitle, data: {}, selected: true}); |
| | | this.selectAward(this.tempAwardsList.length - 1); |
| | | }, |
| | | selectAward(index) { |
| | | for (var i = 0; i < this.tempAwardsList.length; i++) { |
| | | if (i == index) {//选中 |
| | | var award = this.tempAwardsList[i]; |
| | | award.selected = true; |
| | | this.$set(this.tempAwardsList, i, award); |
| | | } else {//不选中 |
| | | if (this.tempAwardsList[i].selected) { |
| | | var award = this.tempAwardsList[i]; |
| | | award.selected = false; |
| | | this.$set(this.tempAwardsList, i, award); |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | deleteAward: function (index) { |
| | | if (app.tempAwardsList.length <= 1) { |
| | | common.notify.error("最低保留一个奖项"); |
| | | return; |
| | | } |
| | | //删除元素后选中的下标 |
| | | var selectedIndex; |
| | | if (index == 0) { |
| | | selectedIndex = 0; |
| | | } else if (index == app.tempAwardsList.length - 1) { |
| | | selectedIndex = index - 1; |
| | | } else { |
| | | selectedIndex = index; |
| | | } |
| | | |
| | | var list = app.tempAwardsList; |
| | | list.splice(index, 1); |
| | | for (var i = 0; i < list.length; i++) { |
| | | var awardTitle = ""; |
| | | switch (i) { |
| | | case 0: |
| | | awardTitle = "奖项一" |
| | | break; |
| | | case 1: |
| | | awardTitle = "奖项二" |
| | | break; |
| | | case 2: |
| | | awardTitle = "奖项三" |
| | | break; |
| | | case 3: |
| | | awardTitle = "奖项四" |
| | | break; |
| | | case 4: |
| | | awardTitle = "奖项五" |
| | | break; |
| | | } |
| | | list[i].title = awardTitle; |
| | | app.tempAwardsList = list; |
| | | } |
| | | //选中的下表 |
| | | console.log("选中下标:" + selectedIndex); |
| | | this.selectAward(selectedIndex); |
| | | }, |
| | | awardRedPacktRandom: function (event, index) { |
| | | app.openAwardEdit(index, 2); |
| | | }, |
| | | awardRedPacktDivide: function (event, index) { |
| | | app.openAwardEdit(index, 1); |
| | | }, |
| | | //打开编辑弹框 |
| | | openAwardEdit(index, type) { |
| | | var $this = this; |
| | | var params = {}; |
| | | switch (type) { |
| | | case 1: |
| | | params.url = "./award-type-redpacket-divide.html"; |
| | | params.title = "固定红包设置"; |
| | | break;//固定红包 |
| | | case 2: |
| | | params.url = "./award-type-redpacket-random.html"; |
| | | params.title = "随机红包设置"; |
| | | break;//随机红包 |
| | | } |
| | | var award = {}; |
| | | if (app.tempAwardsList[index].data && app.tempAwardsList[index].data.type == type) { |
| | | award = app.tempAwardsList[index].data; |
| | | } |
| | | var dialogIndex = common.openEditDialog({ |
| | | title: params.title, |
| | | width: 500, |
| | | height: 400, |
| | | content: params.url + "?data=" + encodeURIComponent(JSON.stringify(award)), |
| | | submit(res) { |
| | | var award = app.tempAwardsList[index]; |
| | | var data = award.data; |
| | | data.total = res.total; |
| | | data.count = res.count; |
| | | data.type = type; |
| | | $this.$set($this.tempAwardsList, index, award); |
| | | console.log(app.tempAwardsList) |
| | | common.closeDialog(dialogIndex); |
| | | // $(el).parent().find("input[type=radio]").eq(0).attr("checked", true); |
| | | }, |
| | | }); |
| | | }, |
| | | |
| | | /** |
| | | * 选择参与条件 |
| | | */ |
| | | openAdEditDialog(type) { |
| | | var $this = this; |
| | | var params = {}; |
| | | var data = {}; |
| | | |
| | | switch (type) { |
| | | case 'alipayLife': |
| | | params.title = "生活号设置" |
| | | params.url = "./sponsor-ad-alipaylife.html" |
| | | if (this.joinInfo.adInfo.data) { |
| | | data = this.joinInfo.adInfo.data; |
| | | } |
| | | break; |
| | | } |
| | | |
| | | var dialogIndex = common.openEditDialog({ |
| | | title: params.title, |
| | | width: 500, |
| | | height: 450, |
| | | content: params.url + "?data=" + encodeURIComponent(JSON.stringify(data)), |
| | | submit(res) { |
| | | console.log("得到的值为:"); |
| | | console.log(res); |
| | | var data = $this.joinInfo.adInfo.data; |
| | | if (data == undefined) |
| | | data = {}; |
| | | data.icon = res.icon; |
| | | data.name = res.name; |
| | | data.sceneId = res.sceneId; |
| | | data.desc = res.desc; |
| | | $this.$set($this.joinInfo.adInfo, 'data', data); |
| | | $this.$set($this.joinInfo.adInfo, 'type', type); |
| | | |
| | | common.closeDialog(dialogIndex); |
| | | }, |
| | | }); |
| | | } |
| | | |
| | | } |
| | | }); |
| | | |
| | | |
| | | layui.use('upload', function () { |
| | | var $ = layui.jquery |
| | | , upload = layui.upload; |
| | | |
| | | //普通图片上传 |
| | | var uploadInst = upload.render({ |
| | | elem: '#test1', |
| | | auto: false, |
| | | url: app.data.uploadPosterUrl, |
| | | field: 'image', |
| | | bindAction: '#poster' |
| | | , choose: function (obj) { |
| | | //预读本地文件示例,不支持ie8 |
| | | obj.preview(function (index, file, result) { |
| | | $('#poster').attr('src', result); //图片链接(base64) |
| | | }); |
| | | }, |
| | | done: function (res, index, upload) { //上传后的回调 |
| | | alert("图片上传成功") |
| | | app.posterUploadSuccess(); |
| | | }, |
| | | error: function () { |
| | | layer.alert("图片上传失败", {icon: 6}, null); |
| | | } |
| | | }); |
| | | }); |
| | | |
| | | |
| | | //图片上传成功 |
| | | |
| | | var form = null; |
| | | layui.use(['form', 'layer', 'jquery'], |
| | | function () { |
| | | $ = layui.jquery; |
| | | form = layui.form; |
| | | layer = layui.layer; |
| | | |
| | | //自定义验证规则 |
| | | form.verify({ |
| | | username: function (value) { |
| | | if (value.length < 5) { |
| | | return '活动名称至少得5个字符啊'; |
| | | } |
| | | }, |
| | | appcode: [/^([A-Za-z0-9]|\-|_)+$/, '应用标识只能包含 数字、英文字符、_ 、-'], |
| | | desc: function (value) { |
| | | if (value != null && value.length > 128) { |
| | | return '简介最大为128个字符'; |
| | | } |
| | | }, |
| | | remarks: function (value) { |
| | | if (value != null && value.length > 128) { |
| | | return '备注最大为128个字符'; |
| | | } |
| | | }, |
| | | |
| | | }); |
| | | |
| | | //监听提交 |
| | | //保存活动 |
| | | form.on('submit(save-activity)', |
| | | function (data) { |
| | | app.data.activity = data.field; |
| | | console.log(data.field); |
| | | return false; |
| | | }); |
| | | |
| | | //保存奖项 |
| | | form.on('submit(save-awards)', |
| | | function (data) { |
| | | alert(JSON.stringify(data.field)); |
| | | app.data.activity = data.field; |
| | | console.log(data.field); |
| | | return true; |
| | | }); |
| | | |
| | | });</script> |
| | | </script> |
| | | </body> |
| | | |
| | | </html> |