From b06418c37c2b9e3c01c8e382fb311d35629f1d9a Mon Sep 17 00:00:00 2001
From: Administrator <15274802129@163.com>
Date: Wed, 23 Apr 2025 17:53:03 +0800
Subject: [PATCH] feat(mall): 添加活动报名状态字段
---
src/main/resources/templates/febs/views/modules/votesActivity/optionInfo.html | 408 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 408 insertions(+), 0 deletions(-)
diff --git a/src/main/resources/templates/febs/views/modules/votesActivity/optionInfo.html b/src/main/resources/templates/febs/views/modules/votesActivity/optionInfo.html
new file mode 100644
index 0000000..64bf0f5
--- /dev/null
+++ b/src/main/resources/templates/febs/views/modules/votesActivity/optionInfo.html
@@ -0,0 +1,408 @@
+<div class="layui-fluid layui-anim febs-anim" id="febs-option-info" lay-title="活动选项编辑">
+ <div class="layui-row febs-container">
+ <div class="layui-col-md12">
+ <div class="layui-fluid" id="option-info">
+ <form class="layui-form" action="" lay-filter="option-info-form">
+ <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+ <ul class="layui-tab-title">
+ <li class="layui-this">基础信息</li>
+ </ul>
+ <div class="layui-tab-content">
+ <input type="text" name="id"
+ placeholder="" autoComplete="off" class="layui-input febs-hide">
+ <div class="layui-tab-item layui-show">
+ <blockquote class="layui-elem-quote blue-border">审核</blockquote>
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">审核：</label>
+ <div class="layui-input-block">
+ <input type="radio" name="state" value="0" title="待审核" checked />
+ <input type="radio" name="state" value="1" title="同意" />
+ <input type="radio" name="state" value="2" title="拒绝" />
+ </div>
+ </div>
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">封面：</label>
+ <div class="layui-input-block">
+ <input type="text" lay-verify="required" name="image" autocomplete="off" class="layui-input" readonly>
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn" id="openImg">封面审核</button>
+ </div>
+ </div>
+
+
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">参赛作品：</label>
+ <div class="layui-input-block">
+ <input type="text" lay-verify="required" name="videoUrl" autocomplete="off" class="layui-input" readonly>
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <button type="button" class="layui-btn layui-btn-normal layui-btn" id="openVideo">作品审核</button>
+ </div>
+ </div>
+ </div>
+ <blockquote class="layui-elem-quote blue-border">基础信息</blockquote>
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">所属活动：</label>
+ <div class="layui-input-block">
+ <div id="activity-option"></div>
+ </div>
+ </div>
+
+ <div class="layui-col-lg6">
+ <label class="layui-form-label">序号：</label>
+ <div class="layui-input-block">
+ <input type="number" name="orderCnt" placeholder="" autocomplete="off" class="layui-input" data-value="{$voteOption.number}">
+ </div>
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">选项名称：</label>
+ <div class="layui-input-block">
+ <input type="text" name="optionName" lay-verify="required" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">姓名：</label>
+ <div class="layui-input-block">
+ <input type="text" name="realName" lay-verify="required" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+
+ </div>
+
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label">性别：</label>
+ <div class="layui-input-block">
+ <input type="radio" name="sex" value="1" title="男" />
+ <input type="radio" name="sex" value="2" title="女" />
+ <input type="radio" name="sex" value="3" title="保密" checked />
+ </div>
+ </div>
+ <div class="layui-form-item" id="area-picker">
+ <div class="layui-form-label">选择省/市</div>
+ <div class="layui-input-inline" style="width: 200px;">
+ <select name="province" class="province-selector" >
+ <option value="">--选择省--</option>
+ </select>
+ </div>
+ <div class="layui-input-inline" style="width: 200px;" >
+ <select name="city" class="city-selector">
+ <option value="">--选择市--</option>
+ </select>
+ </div>
+ </div>
+
+ </div>
+ <div class="layui-row layui-col-space10 layui-form-item">
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">详细地址：</label>
+ <div class="layui-input-block">
+ <input type="text" name="address" lay-verify="required" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require">手机：</label>
+ <div class="layui-input-block">
+ <input type="text" name="mobilePhone" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+
+ </div>
+ <div class="layui-row layui-col-space10 layui-form-item">
+
+ <div class="layui-col-lg6">
+ <label class="layui-form-label">邮箱：</label>
+ <div class="layui-input-block">
+ <input type="text" name="email" autocomplete="off" class="layui-input" >
+ </div>
+ </div>
+ <div class="layui-col-lg6">
+ <label class="layui-form-label febs-form-item-require" style="white-space: nowrap;">是否签约MCN：</label>
+ <div class="layui-input-block">
+ <select name="mcnState" lay-verify="required" class="layui-input">
+ <option value="0">否</option>
+ <option value="1">是</option>
+ </select>
+ </div>
+ </div>
+ </div>
+
+ <div class="layui-form-item">
+ <label class="layui-form-label">爱好：</label>
+ <div class="layui-input-block">
+ <label>
+ <textarea name="hobby" rows="5" autocomplete="off" class="layui-textarea" ></textarea>
+ </label>
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <label class="layui-form-label febs-form-item-require">选项描述：</label>
+ <div class="layui-input-block">
+ <div style="border: 1px solid #ccc;">
+ <div id="toolbar-container" class="toolbar"></div>
+ <div id="text-container" class="text" style="height: 450px;"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="layui-form-item febs-hide">
+ <button class="layui-btn" lay-submit="" lay-filter="option-info-form-submit" id="submit">保存</button>
+ </div>
+ </form>
+ </div>
+ </div>
+ </div>
+</div>
+<style>
+ .blue-border {
+ border-left-color: #2db7f5;
+ font-size: 18px;
+ }
+ .layui-table-cell {
+ height:auto;
+ }
+ .layui-upload-list {
+ margin: 0 !important;
+ }
+ .multi-images {
+ margin: 0 5px !important;
+ }
+</style>
+<!-- 表格操作栏 end -->
+<script data-th-inline="javascript">
+ layui.use(['febs', 'form', 'formSelects', 'validate', 'laydate', 'layedit', 'table', 'xmSelect', 'layarea'], function () {
+ var $ = layui.jquery,
+ febs = layui.febs,
+ layer = layui.layer,
+ table = layui.table,
+ formSelects = layui.formSelects,
+ form = layui.form,
+ $view = $('#option-info'),
+ voteOption = [[${voteOption}]],
+ layedit = layui.layedit,
+ layarea = layui.layarea,
+ validate = layui.validate;
+
+ form.render();
+ const E = window.wangEditor;
+ const editor = new E('#toolbar-container', '#text-container'); // 传入两个元素
+ editor.config.showLinkImg = false;
+ editor.config.uploadFileName = 'file';
+ editor.config.customUploadImg = function (files, insertImgFn) {
+ // files 是 input 中选中的文件列表
+ // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+ // 上传图片，返回结果，将图片插入到编辑器中
+ for (let i = 0; i < files.length; i++){
+ var form = new FormData();
+ form.append("file", files[0]);
+ $.ajax({
+ url:'/admin/goods/uploadFileBase64',
+ type: "post",
+ processData: false,
+ contentType: false,
+ data: form,
+ dataType: 'json',
+ success(res) {
+ // 上传代码返回结果之后，将图片插入到编辑器中
+ insertImgFn(res.data.src, res.data.title, '')
+ }
+ })
+ }
+ };
+ editor.create();
+
+ formSelects.render();
+
+ let activityOptions = xmSelect.render({
+ el: '#activity-option',
+ language: 'zn',
+ prop : {
+ value : 'id',
+ children : 'child'
+ },
+ iconfont: {
+ parent: 'hidden',
+ },
+ tips: '请选择',
+ filterable: true,
+ radio: true,
+ clickClose: true,
+ tree: {
+ show: true,
+ //非严格模式
+ strict: false,
+ },
+ data: []
+ })
+
+ febs.get(ctx + 'admin/happyActivity/allActivities', null, function(res) {
+ activityOptions.update({
+ data : res.data,
+ autoRow: true,
+ });
+ initOptionInfo();
+ })
+ let obj1 = layarea.render({
+ elem: '#area-picker',
+ change: function (res) {
+ //选择结果
+ console.log(res);
+ }
+ });
+ layarea.render({
+ elem: '#area-picker',
+ data: {
+ province: "上海",
+ city: "上海",
+ county: "浦东新区",
+ },
+ change: function (res) {
+ //选择结果
+ console.log(res);
+ }
+ });
+
+ function initOptionInfo() {
+ console.log("voteOption:", voteOption); // 调试信息
+ form.val("option-info-form", {
+ "id": voteOption.id,
+ "activityId": voteOption.activityId,
+ "optionName": voteOption.optionName,
+ "realName": voteOption.realName,
+ "description": voteOption.description,
+ "orderCnt": voteOption.orderCnt,
+ "mobilePhone": voteOption.mobilePhone,
+ "sex": voteOption.sex,
+ "hobby": voteOption.hobby,
+ "mcnState": voteOption.mcnState,
+ "address": voteOption.address,
+ "province": voteOption.province,
+ "city": voteOption.city,
+ "videoUrl": voteOption.videoUrl,
+ "state": voteOption.state,
+ "image": voteOption.image,
+ "email": voteOption.email
+ });
+
+ var arr = [];
+ arr.push(voteOption.activityId)
+ activityOptions.setValue(arr);
+
+ editor.txt.html(voteOption.description);
+
+ setTimeout(() => {
+ obj1.reload({
+ data: {
+ province: voteOption.province,
+ city: voteOption.city,
+ }
+ });
+ }, 200);
+ }
+
+
+
+ form.on('submit(option-info-form-submit)', function (data) {
+ data.field.activityId = activityOptions.getValue('valueStr');
+ data.field.description = editor.txt.html();
+ console.log(data.field);
+ $.ajax({
+ 'url':ctx + 'admin/happyActivity/optionUpdate',
+ 'type':'post',
+ 'dataType':'json',
+ 'headers' : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
+ 'traditional': true,//ajax传递数组必须添加属性
+ 'data':JSON.stringify(data.field),
+ 'success':function (data) {
+ if(data.code==200){
+ layer.closeAll();
+ febs.alert.success(data.message);
+ $('#febs-activity-option').find('#query').click();
+ }else{
+ febs.alert.warn(data.message);
+ }
+ },
+ 'error':function () {
+ febs.alert.warn('服务器繁忙');
+ }
+ })
+ return false;
+ });
+
+ // 添加点击事件监听器
+ $('#openImg').on('click', function() {
+ let imageUrl = voteOption.image;
+ //页面层
+ layer.open({
+ type: 1,
+ title: "图片",
+ skin: 'layui-layer-rim', //加上边框
+ area: ['100%', '100%'], //宽高
+ shadeClose: true, //开启遮罩关闭
+ end: function (index, layero) {
+ return false;
+ },
+ content: '<div style="text-align:center"><img src="' + imageUrl + '" /></div>'
+ });
+ });
+
+ // 添加点击事件监听器
+ $('#openVideo').on('click', function() {
+ let videoUrl = voteOption.videoUrl;
+
+ // 校验视频URL是否有效
+ if (!videoUrl || !isVideoUrlValid(videoUrl)) {
+ alert('视频地址无效，请检查！');
+ return;
+ }
+
+ // 使用更安全的方式生成HTML内容
+ let videoContent = $('<div>').append(
+ $('<video>', {
+ controls: true,
+ autoplay: true,
+ name: 'media',
+ style: "width: 30%;height: 30%;"
+ }).append(
+ $('<source>', {
+ src: videoUrl,
+ type: 'video/mp4'
+ })
+ )
+ ).prop('outerHTML');
+
+ // 页面层
+ layer.open({
+ type: 1,
+ title: "视频",
+ skin: 'layui-layer-rim', // 加上边框
+ area: ['100%', '100%'],
+ shadeClose: true, // 开启遮罩关闭
+ content: `<div style="text-align:center">${videoContent}</div>`
+ });
+ });
+
+ // 视频URL校验函数
+ function isVideoUrlValid(url) {
+ try {
+ const urlObj = new URL(url);
+ return urlObj.protocol === 'http:' || urlObj.protocol === 'https:';
+ } catch (e) {
+ return false;
+ }
+ }
+
+ });
+</script>
--
Gitblit v1.9.1