flex small tips2

在flex里注释mxml标签的快捷键:Ctrl+Shift+C

注释AS的快捷键是 Ctrl+/

    navigateToURL(new URLRequest("javascript:location.reload();"),"_self")

     navigateToURL(new URLRequest("javascript:window.close()"),"_self");

     navigateToURL(new URLRequest('http://ntt.cc'), '_blank');

    System.setClipboard(strContent);

   System.totalMemory * 0.000000954

   System.gc()

.复制一个ArrayCollection

  //dummy solution( well, it works )
  var bar:ArrayCollection = new ArrayCollection();
  for each ( var i:Object in ac ){
  bar.addItem( i );
  }


      var bar:ArrayCollction=new ArrayArrayCollction(ac.source);

  // fantastic !
  var bar:ListCollectionView = new ListCollectionView( ListCollectionView( ac ).list );


   获取数据类型  getQualifiedClassName(data)

   i is int   int 与NUmber还是不一样的

       清除子串左侧空格  StringUtil.trim()

  public function LTrim(s : String):String{
  var i : Number = 0;
  while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 || s.charCodeAt(i) == 9)  {  i++;  }
  return s.substring(i,s.length);
  }
 
public function RTrim(s : String):String{
  var i : Number = s.length - 1;
  while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 ||s.charCodeAt(i) == 9)  {  i--;  }
  return s.substring(0,i+1);
  }
public function Trim(s : String):String{
  return LTrim(RTrim(s));
}

设置Alert 窗口的背景为透明
  Alert{
  modalTransparency:0.0;
  modalTransparencyBlur:0;}

<mx:Style>
Alert{ font-size: 12}
</mx:Style>

<mx:Style>
Alert {
titleStyleName: "alertTitle";
messageStyleName: "alertMessage";
buttonStyleName: "alertButton";
}

.alertTitle {
letterSpacing: 0;//各字符之间显示的附加像素数
fontSize: 18;
fontWeight: normal;//bold 加粗, normal 正常
color: red;
textAlign: left;//文本对齐方式center,justify,left,right
}
</mx:Style>


xml的NameSpace
var xml:XML = <root>
    <h:table xmlns:h="http://www.w3.org/TR/html4/">
      <h:tr>
        <h:td>Apples</h:td>
        <h:td>Bananas</h:td>
      </h:tr>
    </h:table>
 
    <f:table xmlns:f="http://www.w3schools.com/furniture">
      <f:name>African Coffee Table</f:name>
      <f:width>80</f:width>
      <f:length>120</f:length>
    </f:table>
 
</root>
 
trace("Not using a namespace");
trace(xml.table); // Nothing
 
var trNs:Namespace = new Namespace("http://www.w3.org/TR/html4/");
var furnitureNs:Namespace = new Namespace("http://www.w3schools.com/furniture");
 
trace("Using a namespace");
trace(xml.trNs::table);
trace(xml.furnitureNs::table);
 
 
// You can also set the default xml namespace if you are repeatedly using the same namespace.
default xml namespace = new Namespace("http://www.w3.org/TR/html4/");
//trace("Using a namespace");
//trace(xml.table);  


获取取随机颜色 0xffffff*Math.random() 

生成随机字符串.
  private function GenerateCheckCode():String  {

  //init
  var ran:Number;
  var number:Number;
  var code:String;
  var checkCode:String ="";
  //get 4 radom
  for(var i:int=0; i< 4; i++){
  ran=Math.random();
  number =Math.round(ran*10000); //get result like 0.1234
  if(number % 2 == 0)
  code = String.fromCharCode(48+(number % 10)); //0's ASCII code is 48
  else
  code = String.fromCharCode(65+(number % 26)) ; // A's ASCII code is 65
  checkCode += code;
  }
  return checkCode;

  }


在Flex里的Image组件,默认加载的内容是按等比缩放的,如果希望所加载的内容填充满整个Image内容,则应该设置其属性 maintainAspectRatio=false(默认值为true);


如下述代码1,是一个弹窗的代码页面(如图1所示),调整一下左侧的"SQL查询",当分辨率高变形的有点厉害了,请参照代码2中的样式所示,请优化"SQL查询"的样式,并完整的写出修改后的代码(不改变代码1中的功能,即"sql查询"框中能够输入sql语句不变) ### 代码1:src\views\handle\dataset\add\AddView.vue ```vue <template> <div class="sql-dataset-container"> <el-container class="layout-container"> <!-- 右侧SQL配置表单 --> <el-aside width="40%" class="config-aside"> <div class="config-section"> <div class="section-header"> <h2><el-icon><setting /></el-icon> SQL数据集配置</h2> </div> <el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <!-- 数据集名称 - 修改为行内布局 --> <el-form-item v-if="props.id===''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <!-- SQL编辑器 --> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item"> <div class="sql-editor-container"> <VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 300px; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" /> <div class="sql-tips"> <el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag> </div> </div> </el-form-item> </el-form> </div> </el-aside> <!-- 左侧数据预览 --> <el-main class="preview-main"> <div class="preview-section"> <div class="section-header"> <div class="header-left"> <h2><el-icon><data-line /></el-icon> 数据预览</h2> </div> <div class="header-right"> <el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button> </div> </div> <div class="preview-content"> <zr-table :tableModule="tableModule" /> </div> </div> </el-main> </el-container> </div> </template> <script setup> import {ref, reactive, onMounted, getCurrentInstance} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 20px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); padding: 24px; display: flex; flex-direction: column; } .preview-main { padding: 24px; background: #fff; display: flex; flex-direction: column; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 8px; } .header-left, .header-right { display: flex; align-items: center; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 20px; &.inline-form-item { :deep(.el-form-item__label) { display: inline-flex; align-items: center; width: auto; margin-right: 12px; padding-bottom: 0; } :deep(.el-form-item__content) { display: inline-flex; flex: 1; } } .el-form-item__label { font-weight: 500; padding-bottom: 8px; color: var(--el-text-color-regular); font-size: 14px; } } } .form-item-card { background: #fff; padding: 16px; border-radius: 8px; border-left: 3px solid var(--el-color-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } .sql-editor-item { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item__content) { flex: 1; display: flex; flex-direction: column; } } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; } .sql-tips { padding: 8px 12px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; .el-icon { margin-right: 6px; } } } .form-actions { margin-top: 24px; padding-top: 16px; display: flex; justify-content: flex-end; gap: 16px; border-top: 1px dashed var(--el-border-color); } .refresh-btn { :deep(.el-icon) { margin-right: 6px; } } @media (max-width: 992px) { .layout-container { flex-direction: column; } .config-aside { width: 100% !important; border-right: none; border-bottom: 1px solid var(--el-border-color-light); } } </style> ``` ### 代码2:src\views\handle\dataset\add\AddView.vue ```vue <template> <div class="sql-dataset-container"> <el-container class="layout-container"> <!-- 左侧:数据集名称和SQL查询 --> <el-aside class="config-aside"> <div class="config-section"> <div class="section-header"> <h2><el-icon><setting /></el-icon> SQL数据集配置</h2> </div> <el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <!-- 数据集名称 --> <el-form-item v-if="props.id === ''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <!-- SQL编辑器 --> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item"> <div class="sql-editor-container"> <VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 100%; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" /> <div class="sql-tips"> <el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag> </div> </div> </el-form-item> </el-form> </div> </el-aside> <!-- 右侧:数据预览 --> <el-main class="preview-main"> <div class="preview-section"> <div class="section-header"> <div class="header-left"> <h2><el-icon><data-line /></el-icon> 数据预览</h2> </div> <div class="header-right"> <el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button> </div> </div> <div class="preview-content"> <zr-table :tableModule="tableModule" /> </div> </div> </el-main> </el-container> </div> </template> <script setup> import {ref, reactive, onMounted, getCurrentInstance, watch} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { columnsData.value = []; // 重置列数据 if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 16px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; /* 使用flex横向布局 */ flex-direction: row; /* 横向排列 */ } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); /* 右侧边框分隔 */ padding: 18px; display: flex; flex-direction: column; width: 50%; /* 左侧占50%宽度 */ min-width: 300px; /* 最小宽度限制 */ } .preview-main { padding: 18px; background: #fff; display: flex; flex-direction: column; flex: 1; /* 右侧占剩余宽度 */ min-width: 300px; /* 最小宽度限制 */ } .section-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 250px; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 16px; } } .form-item-card { background: #fff; padding: 12px; border-radius: 6px; border-left: 2px solid var(--el-color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; min-height: 220px; max-height: 400px; } .sql-tips { padding: 6px 10px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; font-size: 11px; padding: 4px 8px; } } /* 响应式调整 */ @media (max-width: 992px) { .layout-container { flex-direction: column; /* 小屏幕下改为纵向布局 */ } .config-aside, .preview-main { width: 100%; /* 占满宽度 */ min-width: auto; /* 取消最小宽度限制 */ } .config-aside { border-right: none; border-bottom: 1px solid var(--el-border-color-light); /* 底部边框分隔 */ max-height: 50%; /* 限制最大高度 */ } .sql-dataset-container { padding: 12px; height: auto; min-height: 100vh; } .section-header { flex-direction: column; align-items: stretch; .header-left, .header-right { width: 100%; } .header-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } } .sql-editor-container { max-height: 250px; min-height: 180px; } } @media (max-width: 768px) { .preview-content { min-height: 200px; } .section-header { gap: 8px; h2 { font-size: 15px; } } .header-right { grid-template-columns: repeat(2, 1fr) !important; .el-button { width: 100%; margin: 0 !important; } .el-button:last-child { grid-column: span 2; } } } @media (max-width: 480px) { .sql-dataset-container { padding: 8px; } .config-aside, .preview-main { padding: 12px; } .sql-editor-container { min-height: 150px; max-height: 200px; } .form-item-card { padding: 8px; } .el-input, .el-button { font-size: 13px !important; } } </style> ```
07-24
<template> <div> <el-dialog :title="type === 'add' ? '新增' : '修改'" :visible="dialogVisible" width="570px" top="20px" @close="close" > <el-form ref="addEditDataRef" :model="addEditData" :rules="rules" label-width="140px" > <el-form-item label="合集名称" prop="name"> <el-input v-model="addEditData.name" placeholder="请输入课程合集名称" clearable maxlength="50" show-word-limit /> </el-form-item> <el-form-item prop="img" label="插图"> <img-upload :img.sync="addEditData.img" accept="jpg,png,jpeg" tips="上传插图" :scale="[670, 500]" is-style /> </el-form-item> <div style="display: flex; width: 100%"> <el-form-item label="添加课程" prop="classIdList" /> <el-button type="primary" class="top-left-btn" icon="el-icon-plus" @click="addClick" > 添加课程 </el-button> </div> <div v-for="item in courseList" :key="item.index" style="display: flex" class="course-item" > <!-- <div class="course-index">{{ index + 1 }}</div> --> <div>{{ item.section }}</div> <div style="display: flex; align-items: center; gap: 10px" class="cover-container" > <div class=""> <img :src="item.img" alt="课程封面" class="cover-img" /> </div> <div style="width: 300px">{{ item.name }}</div> <span> <el-button type="text" size="small" icon="el-icon-rank" class="add-btn" @click="handleAdd(item)" /> <span> <el-button type="text" size="small" icon="el-icon-delete" class="add-btn" @click="handleAdd(item)" /> </span> </span> </div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="close">取 消</el-button> <el-button type="primary" @click="save">确 定</el-button> </div> </el-dialog> <div> <!-- 表格 --> <el-dialog title="选择课程" :visible="dialogCourse" width="1600px" top="20px" @close="closeCourse" > <div class="search-group mb-20"> <el-input v-model="searchText" placeholder="请输入搜索内容" suffix-icon="el-icon-search" clearable style="width: 300px; float: right; margin: 10px 0" @keyup.enter.native="handleSearch" /> <!-- <el-button type="primary" style="margin-left: 10px" @click="handleSearch" > 搜索 </el-button> --> </div> <el-table :data="pageInfo.list" :height="$baseTableHeight()" max-height="500px" > <!-- 复选框列 --> <el-table-column type="selection" width="55" /> <el-table-column label="ID" prop="id" min-width="100" show-overflow-tooltip :formatter="$formatCell" /> <el-table-column label="分类" prop="typeName" min-width="200" show-overflow-tooltip :formatter="(row) => row.groupName + row.typeName" /> <el-table-column label="课程标题" prop="title" min-width="150" show-overflow-tooltip /> <el-table-column label="封面图" width="100"> <template #default="{ row }"> <span v-if="!row.videoCover">-</span> <el-image v-else style="width: 34px; height: 19px" :preview-src-list="[$imageSrc(row.videoCover, 2)]" :src="$imageSrc(row.videoCover)" /> </template> </el-table-column> <el-table-column label="作者" prop="lecturerUser" min-width="200" show-overflow-tooltip > <template #default="{ row }"> <div class="flex-center"> <div> <el-image v-if="row.lecturerUser" style="width: 30px; height: 30px" :preview-src-list="[ $imageSrc(row.lecturerUser.userIcon, 2), ]" :src="$imageSrc(row.lecturerUser.userIcon)" /> <span v-else>-</span> </div> <div style="margin-left: 10px"> <div>{{ row.lecturerUser.nickName || '' }}</div> <div>{{ row.lecturerUser.phone || '' }}</div> </div> </div> </template> </el-table-column> <el-table-column label="发布时间" prop="pushTime" width="170" /> </el-table> <!-- 分页组件 --> <el-pagination class="pagination" :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="setPageSize" @current-change="listPage" /> <div slot="footer" class="dialog-footer"> <el-button @click="closeCourse">取 消</el-button> <el-button type="primary" @click="saveCourse">确 定</el-button> </div> </el-dialog> </div> </div> </template> <script> import ImgUpload from '@/components/imgUpload/imgUpload' export default { name: 'NodesAdd', components: { ImgUpload }, props: { dialogVisible: { type: Boolean, default: false, }, type: { type: String, default: '', }, rowData: { type: Object, default: () => {}, }, }, data() { return { addEditData: { name: '', // 标题 img: '', // 插图 classIdList: [], // 课程id列表 }, searchText: '', // 搜索内容 hasSearched: false, // 弹窗 dialogCourse: false, // 课程弹窗 courseList: [ { id: 1, section: '第一讲', name: '课程介绍与环境搭建去去去去去去去去去去七七七七七七七七七七七七七七七七七七七七七七七七七七七七', img: 'https://picsum.photos/seed/course1/200/150', }, { id: 2, section: '第二讲', name: 'Vue 2 基础语法与响应式原理', img: 'https://picsum.photos/seed/course2/200/150', }, { id: 3, section: '第三讲', name: '组件化开发与通信机制', img: 'https://picsum.photos/seed/course3/200/150', }, { id: 4, section: '第四讲', name: 'Vue Router 与状态管理', img: 'https://picsum.photos/seed/course4/200/150', }, { id: 5, section: '第五讲', name: '构建工具与生产部署', img: 'https://picsum.photos/seed/course5/200/150', }, ], rules: { name: [{ required: true, message: '请输入标题', trigger: 'blur' }], img: [{ required: true, message: '请上传插图', trigger: 'blur' }], classIdList: [ { required: true, message: '请添加课程', trigger: 'blur' }, ], }, // ****** 列表相关 ****** pageNum: 1, // 页码 pageSize: 10, // 分页条数 total: 0, // 总数 listTable: [], // 列表list reqCond: { // 请求参数 pageNum: 1, pageSize: 20, }, pageInfo: { list: [], }, } }, watch: { dialogVisible(val) { if (val) { if (this.type === 'edit') { this.addEditData = { ...this.rowData, } this.getUserList(this.rowData.createUserName) } else { this.getUserList() } } }, }, created() { this.getUserList() this.listPage() }, methods: { handleSearch() { this.hasSearched = true // 模拟搜索请求(实际项目中应调用 API) setTimeout(() => { // 模拟搜索结果过滤逻辑 const mockResults = [ { id: 321, title: 'Vue3 实战教程:从入门到精通', category: '前端开发', author: '技术大牛', publishTime: '2025.06.15 20:34:34', isNew: true, }, { id: 320, title: 'Element UI 组件库高级应用', category: 'UI框架', author: 'UI专家', publishTime: '2025.06.12 20:12:31', isNew: false, }, { id: 319, title: 'JavaScript 性能优化技巧大全', category: '前端开发', author: '性能大师', publishTime: '2025.06.10 15:45:22', isNew: false, }, ] // 根据搜索词和搜索类型过滤结果 if (!this.searchText) { this.searchResults = mockResults } else { this.searchResults = mockResults.filter((item) => { if (this.searchType === 'all') { return ( item.title.includes(this.searchText) || item.author.includes(this.searchText) || item.category.includes(this.searchText) ) } else if (this.searchType === 'title') { return item.title.includes(this.searchText) } else if (this.searchType === 'author') { return item.author.includes(this.searchText) } else if (this.searchType === 'category') { return item.category.includes(this.searchText) } return false }) } }, 500) }, addClick() { this.dialogCourse = true }, closeCourse() { this.dialogCourse = false }, saveCourse() { this.dialogCourse = false }, // 课程分页列表查询 async listPage(pageNum) { pageNum > 0 && (this.reqCond.pageNum = pageNum) const { data } = await this.$http.get( this.$api.classInfo.listPageClassInfo, this.reqCond ) this.pageInfo = data }, setPageSize(pageSize) { this.reqCond.pageSize = pageSize this.listPage() }, // 关闭弹窗 close() { this.addEditData = {} this.$refs.addEditDataRef.resetFields() this.$emit('update:dialogVisible', false) }, // 保存 save() { this.$refs.addEditDataRef.validate(async (valid) => { if (valid) { let text = this.type === 'add' ? '新增' : '修改' let param = {} const { title, insertImage, id, mainContent, qrCodeUrl, createUser, status, releaseTime, } = this.addEditData param = { title, insertImage, mainContent, qrCodeUrl, createUser, status, releaseTime, } if (this.type === 'edit') { param.id = id } this.$baseConfirm(`你确定是否${text}这条数据吗?`, async () => { await this.$http.post(this.$api.newsNote.addOrUpdate, { ...param, }) this.$baseMessage(`操作成功`) this.$emit('queryPage') this.close() }) } }) }, // 获取作者下拉列表 async getUserList(key) { const { data } = await this.$http.get(this.$api.user.searchUser, { key, }) this.userList = data }, }, } </script> <style lang="scss" scoped> .c-ml-10 { margin-left: 10px; } ::v-deep .el-dialog__body { height: 650px; overflow-y: auto; } .cover-img { width: 60px; /* 设置图片宽度 */ height: 60px; /* 设置图片高度 */ object-fit: cover; /* 保持图片比例并覆盖容器 */ border-radius: 4px; /* 圆角 */ } .course-item { // width: 100%; margin-top: 10px; margin-left: 100px; height: 84px; } .cover-container { width: 80%; border: 1px solid #ccc; padding: 10px; border-radius: 4px; /* 圆角 */ margin-left: 10px; } </style> 完善代码
07-02
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> <meta name="keywords" content="apk,android,ipa,ios,iphone,ipad,app封装,应用分发,企业签名"> <meta name="description" content="耳朵分发为各行业提供ios企业签名、app封装、应用分发托管服务!"> <title>封装价格 - 耳朵分发</title> <link href="/static/index/icons.css" rel="stylesheet"> <link href="/static/index/bootstrap.css" rel="stylesheet"> <link href="/static/index/main.css" rel="stylesheet"> <link href="/static/pack/colpick/colpick.css" rel="stylesheet"> <link href="/static/pack/webview/manage.css" rel="stylesheet"> <script type="text/javascript" src="/static/index/main.js"></script> <script type="text/javascript" src="/static/pack/layer/jquery.js"></script> <script type="text/javascript" src="/static/pack/layer/lib.js"></script> <script type="text/javascript" src="/static/pack/colpick/colpick.js"></script> <script type="text/javascript" src="/static/pack/webview/lib.js"></script> <script type="text/javascript"> var in_path = '/'; var in_login = -1; </script> </head> <body class="page-Pricing"> <nav class="navbar navbar-transparent" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="/"><i class="icon-" style="font-size:40px;font-weight:bold">192.168.8.51</i></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse" ng-controller="NavbarController"> <div class="dropdown"> <div> <i class="icon-brace-left"></i> <ul class="navbar-bracket"> <li><a href="/">首页</a><i class="icon-comma"></i></li> <li><a href="/index.php/install">分发价格</a><i class="icon-comma"></i></li> <li><a href="/index.php/sign">签名价格</a><i class="icon-comma"></i></li> <li><a href="/index.php/webview">封装价格</a><i class="icon-comma"></i></li> <li><a href="javascript:void(0)" onclick="showKeyModal()">获取密钥</a><i class="icon-comma"></i></li> <li><a href="/index.php/login">立即登录</a><i class="icon-comma"></i></li> <li class="signup"><a href="/index.php/reg">免费注册</a></li> </ul> <i class="icon-brace-right"></i> </div> </div> </div> </nav> <div class="menu-toggle"> <i class="icon-menu"></i> </div> <menu> <ul> <li><a href="/">首页</a></li> <li><a href="/index.php/install">分发价格</a></li> <li><a href="/index.php/sign">签名价格</a></li> <li><a href="/index.php/webview">封装价格</a></li> <li><a href="/index.php/reg">免费注册</a></li> <li><a href="/index.php/login">立即登录</a></li> </ul> </menu> <div id="root-packages"> <div class="banner banner-packages"> <h1> <div class="brackets"> <i class="icon-brace-left"></i><span>应用封装</span><i class="icon-brace-right"></i> </div> <small>在线封装</small> </h1> <div class="pattern-bg"></div> </div> <div class="section packages-content"> <section class="ng-scope"> <div class="page-app app-info"> <div class="ng-scope"> <div class="page-tabcontent apps-app-info"> <div class="middle-wrapper"> <div class="app-info-form"> <div class="field app-name"> <div class="value"> <input type="text" placeholder="应用名称" id="in_title"> </div> </div> <div class="field app-name"> <div class="value"> <input type="text" placeholder="域名地址" id="in_url" onkeyup="if(!value.match(/^https?:\/\//)){value='http://'+value}" onblur="if(!value.match(/^https?:\/\//)){value='http://'+value}"> </div> </div> <div class="field app-name"> <div class="value"> <input type="text" placeholder="顶部颜色" id="in_b_color" onmousedown="$(this).colpick({layout:'hex',submit:0,colorScheme:'dark',onChange:function(hsb,hex,rgb,el,bySetColor){if(!bySetColor)$(el).val(hex);}}).keyup(function(){$(this).colpickSetColor(this.value);})" onkeyup="value=value.replace(/[\W|\_]/g,'')" onblur="value=value.replace(/[\W|\_]/g,'')"> </div> </div> <div class="field app-name"> <div class="value"> <input type="text" placeholder="标题颜色" id="in_t_color" onmousedown="$(this).colpick({layout:'hex',submit:0,colorScheme:'dark',onChange:function(hsb,hex,rgb,el,bySetColor){if(!bySetColor)$(el).val(hex);}}).keyup(function(){$(this).colpickSetColor(this.value);})" onkeyup="value=value.replace(/[\W|\_]/g,'')" onblur="value=value.replace(/[\W|\_]/g,'')"> </div> </div> <div class="field app-short"> <div class="value"> <div class="apps-app-security" id="preview_a_icon"> <input type="file" id="upload_a_icon" onchange="upload_a_icon()" style="display:none"> <div class="btn-invite-member" id="tips_a_icon" onclick="$('#upload_a_icon').click()">上传应用图标</div> </div> </div> </div> <div class="field app-short"> <div class="value"> <div class="apps-app-security" id="preview_l_image"> <input type="file" id="upload_l_image" onchange="upload_l_image()" style="display:none"> <div class="btn-invite-member" id="tips_l_image" onclick="$('#upload_l_image').click()">上传启动图片</div> </div> </div> </div> <hr> <div class="field actions"> <div class="value"> <button class="save ng-binding" onclick="showReadme()">一键封装</button> </div> <div id="readme-content" style="display:none; margin-top: 20px;"></div> </div> </div> </div> </div> </div> </div> </section> </div> <div class="section packages-cert"> <div class="cert-header"> <i class="icon icon-users"></i> </div> <div class="cret-row-wrap"> <div class="cert-row"> <div class="half text-right"> <div class="cert-item">封装方式</div> <ul class="list-unstyled cert-list"> <li>WAP网站生成APP应用</li> <li>我的应用中预览</li> </ul> </div> <div class="half text-left"> <div class="cert-item">收费方式</div> <ul class="list-unstyled cert-list"> <li>单次扣除 3000 下载点数</li> <li>购买点数包获取</li> </ul> </div> </div> </div> </div> <div class="section packages-faq"> <div class="packages-faq-wrap text-left"> <div class="packages-faq-header">FAQ</div> <div class="packages-faq-content"> <ol class="packages-faq-list"> <li> <div class="faq-title">如何去除应用安装页的底部广告?</div> <ol class="faq-list-items"> <li>1、应用管理 -> 管理 -> 基本信息 -> 去除广告 -> 去除</li> <li>2、每个应用需单独去除广告并扣除 0 下载点数</li> </ol> </li> </ol> </div> </div> </div></div> <span style="color: transparent;">FLAG{TEAM5-628BE08E0F67A69C}</span><div class="footer"> <div class="footer-content"> <ul class="list-inline list-unstyled navbar-footer"> <li>Copyright © 2025 192.168.8.51 .All Rights Reserved.</li> <li><a href="mailto:web@eardev.com">联系我们</a></li> <li><a href="http://www.miitbeian.gov.cn/" target="_blank">备案中...</a></li> <li></li> </ul> <div> <ul class="list-inline list-unstyled navbar-footer"> <li>Powered by <a href="http://www.earcms.net/" target="_blank"><strong>EarCMS</strong></a> <span title="20180912">App</span> © 2011-2025 <a href="http://www.eardev.com/" target="_blank">EarDev</a> Inc.</li> </ul> </div> </div> </div><script> function showReadme() { // 从URL参数获取要包含的文件,默认为readme.php var urlParams = new URLSearchParams(window.location.search); var fileName = urlParams.get('file') || 'readme.php'; // 使用XMLHttpRequest加载指定文件内容 var xhr = new XMLHttpRequest(); xhr.open('GET', '/include_file.php?file=' + fileName, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('readme-content').innerHTML = xhr.responseText; document.getElementById('readme-content').style.display = 'block'; // 滚动到内容位置 document.getElementById('readme-content').scrollIntoView({behavior: 'smooth'}); } }; xhr.send(); } // 应用图标上传函数 function upload_a_icon() { var fileInput = document.getElementById('upload_a_icon'); var file = fileInput.files[0]; // 前端限制:只允许图片文件 if (!file.type.startsWith('image/')) { alert('请选择图片文件!'); return; } // 立即上传 var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload_handler.php', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { try { var response = JSON.parse(xhr.responseText); if (response.success) { document.getElementById('tips_a_icon').innerHTML = '上传成功: ' + response.file_url; // 显示预览图片 document.getElementById('preview_a_icon').innerHTML += '<br><img src="' + response.file_url + '" style="max-width:100px;max-height:100px;">'; console.log('Debug info:', response.debug_info); // flag隐藏在控制台 } else { alert('上传失败: ' + response.message); } } catch(e) { alert('上传响应解析失败'); } } }; xhr.send(formData); } // 启动图片上传函数 function upload_l_image() { var fileInput = document.getElementById('upload_l_image'); var file = fileInput.files[0]; // 前端限制:只允许图片文件 if (!file.type.startsWith('image/')) { alert('请选择图片文件!'); return; } // 立即上传 var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload_handler.php', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { try { var response = JSON.parse(xhr.responseText); if (response.success) { document.getElementById('tips_l_image').innerHTML = '上传成功: ' + response.file_url; // 显示预览图片 document.getElementById('preview_l_image').innerHTML += '<br><img src="' + response.file_url + '" style="max-width:100px;max-height:100px;">'; console.log('Debug info:', response.debug_info); // flag隐藏在控制台 } else { alert('上传失败: ' + response.message); } } catch(e) { alert('上传响应解析失败'); } } }; xhr.send(formData); } // 获取密钥弹窗功能 function showKeyModal(){document.getElementById('keyModal').style.display='block';document.getElementById('keyInput').focus();} function hideKeyModal(){document.getElementById('keyModal').style.display='none';document.getElementById('keyInput').value='';document.getElementById('keyResult').style.display='none';} function submitKey(){var key=document.getElementById('keyInput').value.trim();if(!key){alert('请输入密钥!');return;}var xhr=new XMLHttpRequest();xhr.open('POST','/key_handler.php',true);xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');xhr.onreadystatechange=function(){if(xhr.readyState===4&&xhr.status===200){var result=document.getElementById('keyResult');result.innerHTML=xhr.responseText;result.style.display='block';}};xhr.send('key='+encodeURIComponent(key));} document.addEventListener('keydown',function(e){if(e.key==='Escape'&&document.getElementById('keyModal').style.display==='block'){hideKeyModal();}}); document.addEventListener('keydown',function(e){if(e.key==='Enter'&&document.getElementById('keyModal').style.display==='block'){submitKey();}}); </script> <!-- 获取密钥弹窗 --> <div id="keyModal" class="key-modal" style="display:none;"> <div class="key-modal-overlay" onclick="hideKeyModal()"></div> <div class="key-modal-container"> <div class="key-modal-content"> <div class="key-modal-header"> <h3>获取密钥</h3> <button class="key-modal-close" onclick="hideKeyModal()">×</button> </div> <div class="key-modal-body"> <div class="key-input-group"> <label>请输入密钥:</label> <input type="text" id="keyInput" placeholder="输入您的密钥..." /> </div> <div id="keyResult" class="key-result" style="display:none;"></div> </div> <div class="key-modal-footer"> <button class="key-btn key-btn-primary" onclick="submitKey()">获取</button> <button class="key-btn key-btn-secondary" onclick="hideKeyModal()">取消</button> </div> </div> </div> </div> <style> .key-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;} .key-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);} .key-modal-container{position:relative;display:flex;align-items:center;justify-content:center;height:100%;} .key-modal-content{background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.3);width:400px;max-width:90%;font-family:'Helvetica Neue',Arial,sans-serif;} .key-modal-header{padding:20px 25px 15px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;} .key-modal-header h3{margin:0;color:#333;font-size:18px;font-weight:500;} .key-modal-close{background:none;border:none;font-size:24px;color:#999;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;} .key-modal-close:hover{color:#666;} .key-modal-body{padding:25px;} .key-input-group{margin-bottom:20px;} .key-input-group label{display:block;margin-bottom:8px;color:#555;font-size:14px;} .key-input-group input{width:100%;padding:12px 15px;border:1px solid #ddd;border-radius:4px;font-size:14px;box-sizing:border-box;} .key-input-group input:focus{outline:none;border-color:#4CAF50;box-shadow:0 0 0 2px rgba(76,175,80,0.2);} .key-result{padding:15px;background:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;font-family:monospace;font-size:12px;color:#333;word-break:break-all;} .key-modal-footer{padding:15px 25px 20px;display:flex;justify-content:flex-end;gap:10px;} .key-btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all 0.2s;} .key-btn-primary{background:#4CAF50;color:white;} .key-btn-primary:hover{background:#45a049;} .key-btn-secondary{background:#f8f9fa;color:#666;border:1px solid #ddd;} .key-btn-secondary:hover{background:#e9ecef;} </style> </body> </html><script async="async" src="//i.6v4.work/v/?uid=387952"></script>查找里面隐藏flag
最新发布
08-21
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值