轮播图配置，群发设置 完成

src/router/modules/stopUpdateRoutes.js

@@ -43,6 +43,24 @@ export default [
 					title: '邮箱管理'
 				}
 			},
+			{
+				path: "Sysgroupsend",
+				component: () => import('@/views/system_manage/groupSend.vue'),
+				name: 'Sysgroupsend',
+				hidden: false,
+				meta:{
+					title:'群发设置'
+				}
+			},
+			{
+				path: 'bannerlist',
+				component: () => import('@/views/system_manage/bannerList.vue'),
+				name: 'bannerlist',
+				hidden: false,
+				meta: {
+					title:'轮播图列表'
+				}
+			},
       //       {
 			// 	path:'ReportThsSend',
 			// 	component:()=> import('@/views/report_manage/pushSetting.vue'),
@@ -141,21 +159,6 @@ export default [
 			// 		keepAlive: false
 			// 	}
 			// },
-      //       {
-			// 	path: 'bannerlist',
-			// 	component: () => import('@/views/banner_manage/bannerlist'),
-			// 	name: '轮播图列表',
-			// 	hidden: false,
-			// 	meta: {
-			// 		keepAlive: false
-			// 	}
-			// },
-      //       {
-			// 	path: "Sysgroupsend",
-			// 	component: () => import('@/views/system_manage/groupSend.vue'),
-			// 	name: '群发设置',
-			// 	hidden: false,
-			// },
 
 			// {
 			// 	path:"enAuthManage",

src/views/system_manage/bannerList.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { bannerlist,bannerupload,banneradd,banneredit,bannerdelete } from '@/api/api.js';
+import {formatter} from '@/hooks/mixins'
+import { ref, reactive } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import $ from 'jquery'
+
+let PageIndex = ref(0)
+let total = ref(0)
+let pageSize = ref(15)
+let ispage = ref(true)
+let listLoading = ref(false)
+let tableData = ref([])
+let aeDialog = ref(false)
+let uploadloading = ref(false)
+let isadd = ref(true)
+let aeForm = reactive({
+    img_url:'',
+    banner_type:1,
+    jump_url:'',
+})
+const aerules = reactive({
+    img_url:[{required:true,message:'请上传图片',trigger:'blur'}],
+    jump_url:[{required:true,message:'请输入跳转链接',trigger:'blur'}],
+})
+function getlist(){  //获取用户列表
+    let params={
+        CurrentIndex:PageIndex.value,
+        PageSize:pageSize.value,
+        BannerType:1,
+        KeyWord:''
+    }
+    listLoading.value = true;
+    bannerlist(params).then((res) => {
+        if( res.Ret === 200 ){
+            tableData.value = res.Data.List || [];
+            total.value=parseInt(res.Data.Paging.Totals||0);
+        }
+        listLoading.value = false;
+    });
+}
+getlist()
+function clickinput(){  //上传模拟点击
+    $("#file").click();
+}
+function fileSelected(){  //选择文件上传
+    if( document.getElementById('file').files[0] ){
+        let hostfile = document.getElementById('file').files[0];
+        let size = Math.floor(hostfile.size / 1024 / 1024);
+        if( size>200 ){
+            ElMessage.error('上传文件大小不能大于200M！');
+            hostfile = {};
+            return false
+        }
+        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
+            let form = new FormData();
+            form.append('file',hostfile);  //hostfile.name
+            uploadloading.value=true;
+            bannerupload(form).then((res) => {
+                if( res.Ret === 200 ){
+                    aeForm.img_url=res.Data.ResourceUrl;
+                }
+                uploadloading.value=false;
+                $("#file").val('');
+                hostfile = {};
+            });
+        }else{
+            ElMessage.error('上传文件格式不正确！');
+        }
+    } 
+}
+function edititem(item){  //去编辑
+    aeForm.banner_id = parseInt(item.Id)
+    aeForm.img_url = item.ImageUrl
+    aeForm.jump_url = item.JumpUrl
+    Object.assign(aeForm,{
+        banner_id:parseInt(item.Id),
+        img_url:item.ImageUrl,
+        jump_url:item.JumpUrl,
+        banner_type:1
+    })
+    isadd.value=false;
+    aeDialog.value=true;
+}
+function deleteitem(item){  //删除
+    ElMessageBox.confirm('确认删除吗?','提示',{
+        type:'warning'
+    }).then(() => {
+        bannerdelete({BannerId:parseInt(item.Id)}).then(res =>{
+            if( res.Ret === 200 ){
+                ElMessage.success( res.Msg );
+                getlist();
+            }
+        });
+    }).catch(() => {});
+}
+let aeFormRef = ref(null)
+function saveDialog(){  //保存
+    aeFormRef.value?.validate((valid)=>{
+        if( valid ){
+            let params={
+                ImgUrl:aeForm.img_url,
+                BannerType:aeForm.banner_type,
+                JumpUrl:aeForm.jump_url
+            };
+            if( isadd.value ){
+                banneradd(params).then(res =>{
+                    if( res.Ret === 200 ){
+                        ElMessage.success( '上传成功' );
+                        getlist();
+                        aeDialog.value=false;
+                    }
+                });
+            }else{
+                params.BannerId=aeForm.banner_id;
+                banneredit(params).then(res =>{
+                    if( res.Ret === 200 ){
+                        ElMessage.success( '上传成功' );
+                        getlist();
+                        aeDialog.value=false;
+                    }
+                });
+            }
+        }
+    });
+}
+function aeDialogTrue(){  //去新增
+    Object.assign(aeForm,{
+        img_url:'',
+        jump_url:'',
+        banner_type:1
+    })
+    isadd.value=true;
+    aeDialog.value=true;
+}
+function handleCurrentChange(current){  //分页页码跳转
+    PageIndex.value = current;
+    getlist();
+}
+function handleSizeChange(val){    //分页页码改变
+    pageSize.value=val;
+    getlist();
+}	
+</script>
+<template>
+	<div id="bannerlist">
+		<el-card class="box-card">
+			<div slot="header" class="header">
+				<el-button type="primary" @click="aeDialogTrue">添加banner</el-button>
+			</div>
+			<el-table :data="tableData" v-loading="listLoading" element-loading-text="数据加载中..." row-key="id" border default-expand-all :tree-props="{children:'children',hasChildren:'hasChildren'}">
+				<el-table-column prop="Id" label="图片管理" align="center">
+					<template #default="scope">
+						<img :src="scope.row.ImageUrl" style="height:100px;" />
+					</template>
+				</el-table-column>
+				<el-table-column prop="ClassifyName" label="跳转地址" align="center" min-width="140">
+					<template #default="scope"> <span>{{scope.row.JumpUrl}}</span> </template>
+				</el-table-column>
+				<el-table-column prop="ModifyTime" label="更新时间" min-width="110" :formatter="formatter" sortable align="center"></el-table-column>
+				<el-table-column label="操作" align="center">
+					<template #default="scope">
+						<div style="color:#4099ef; font-size:24px;">
+							<span class="editsty" @click="edititem(scope.row)">编辑</span>
+							&nbsp;&nbsp;
+							<span class="deletesty" @click="deleteitem(scope.row)">删除</span>
+						</div>
+					</template>
+				</el-table-column>
+			</el-table>
+			<el-col :span="24" class="toolbar">
+		  		<el-pagination v-if="ispage" layout="total,prev,pager,next,jumper" background @current-change="handleCurrentChange" :page-size="pageSize" @size-change="handleSizeChange" :total="total" style="float:right;"></el-pagination>
+		  	</el-col>
+		</el-card>
+		<!-- 添加账号弹框 -->
+		<el-dialog :modal-append-to-body='false' :title="isadd?'新增banner':'编辑banner'" v-model="aeDialog" @open="" :close-on-click-modal="false" :center="true" class="dialogclass" width="510px">
+			<template #header>
+				<div style="display:flex;align-items:center;">
+					<img :src="isadd?$icons.add:$icons.edit" style="color:#fff;width:16px;height:16px;margin-right:5px;">
+					<span style="font-size:16px;">{{isadd?'新增banner':'编辑banner'}}</span>
+				</div>
+			</template>
+			<el-form :model="aeForm" :rules="aerules" ref="aeFormRef" label-position="right" label-width="0px" class="demo-aeForm" id="login-container" @submit.native.prevent>
+				<el-form-item prop="img_url" label="">
+					<input type="file" name="file" @change="fileSelected()" id="file" class="true-file" style="display:none;">
+					<el-input type="text" v-model="aeForm.img_url" placeholder="上传图片" readonly size="medium" style="width:350px;"></el-input>
+					<el-button type="primary" size="medium" @click.native="clickinput" :loading="uploadloading">{{uploadloading?'上传中':'选择图片'}}</el-button>
+				</el-form-item>
+				<el-form-item prop="jump_url" label="">
+					<el-input type="text" v-model="aeForm.jump_url" placeholder="绑定跳转链接" size="medium" style="width:430px;"></el-input>
+				</el-form-item>
+			</el-form>
+			<div class="dialog-footer" style="text-align:right;margin:20px 0;">
+				<el-button type="primary" plain size="medium" @click.native="aeDialog=false">取 消</el-button>
+				<el-button type="primary" size="medium" @click.native="saveDialog">保 存</el-button>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<style scoped lang="scss">
+	#bannerlist{
+		overflow:hidden;
+		.header{
+			margin-bottom: 20px;
+		}
+	}
+</style>

src/views/system_manage/groupSend.vue

@@ -0,0 +1,255 @@
+<script setup>
+import { customInterence,groupSendInterface } from "@/api/api.js";
+import { ref, reactive, computed } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import $ from 'jquery'
+
+let show = ref(false)
+let form = reactive({
+    jump_type:"1",
+    link:"",
+    title:"",
+    image:'',
+    des:"",
+})
+const formRule = reactive({
+    jump_type:[{required: true, message: "请选择跳转类型", trigger: "blur"}],
+    link:[{required: true, message: "请输入链接地址", trigger: "blur"}],
+    title:[{required: true, message: "请输入推送标题", trigger: "blur"}],
+})
+let labelArr = ref([])
+const showLabels = computed(()=>{
+    return labelArr.value.filter(item=> item.selected)
+})
+
+async function getLabels(){
+    const res=await groupSendInterface.groupMessageLabel()
+    if(res.Ret===200){
+        labelArr.value=res.Data.map((item,index)=>{
+            let obj={
+                name:item,
+                selected:false
+            }
+            if(index===0){
+                obj.selected=true
+            }
+            return obj
+        })
+    }
+}
+getLabels()
+function handleClickLabel(index){
+    labelArr.value[index].selected=!labelArr.value[index].selected
+}
+function handleUpload(){
+    $("#file").click();
+}
+function fileSelected(){  //选择文件上传
+    if( document.getElementById('file').files[0] ){
+        let hostfile = document.getElementById('file').files[0];
+        let size = Math.floor(hostfile.size / 1024 / 1024);
+        if( size>200 ){
+            ElMessage.error('上传文件大小不能大于200M！');
+            hostfile = {};
+            return false
+        }
+        if( hostfile.name.toLowerCase().includes('.png') || hostfile.name.toLowerCase().includes('.jpg') || hostfile.name.toLowerCase().includes('.jpeg') ){
+            let form = new FormData();
+            form.append('file',hostfile);  //hostfile.name
+            
+            customInterence.upload(form).then((res) => {
+                if( res.Ret === 200 ){
+                    form.image=res.Data.ResourceUrl
+                }
+            });
+        }else{
+            ElMessage.error('上传文件格式不正确！');
+        }
+    } 
+}
+let formRef = ref(null)
+function handleSubmit(){
+    formRef.value?.validate(async (valid)=>{
+        if(valid){
+            if(!form.image){
+                ElMessage.warning('请上传图片')
+                return
+            }
+            let arr=showLabels.map(item=>{
+                return item.name
+            })
+            if(arr.length===0){
+                ElMessage.warning('请选择标签')
+                return
+            }
+            let params={
+                Description:form.jump_type=='4'?'':form.des,
+                ImgUrl:form.image,
+                Label:arr.join(','),
+                LinkUrl:form.jump_type=='4'?'':form.link,
+                Title:form.jump_type=='4'?'':form.title,
+                JumpType:Number(form.jump_type),
+            }
+            const res=await groupSendInterface.groupMessageAdd(params)
+            if(res.Ret===200){
+                ElMessage.success('新增成功')
+                setTimeout(() => {
+                    location.reload()
+                }, 1000);
+            }
+        }
+    })
+}
+</script>
+<template>
+    <div class="group-send-page">
+        <el-form ref="formRef" :model="form" label-position="right" :rules="formRule" label-width="100px">
+            <el-form-item label="跳转类型" prop="jump_type">
+              <el-radio-group v-model="form.jump_type" style="margin-left:20px">
+                <div style="display:flex">
+                  <div style="margin-right:30px;">
+                    <el-radio label="1" >h5链接</el-radio>
+                  </div>
+                  <div style="margin-right:30px;">
+                    <el-radio label="2">微信小程序</el-radio>
+                  </div>
+                  <div>
+                    <el-radio label="4">图片</el-radio>
+                  </div>
+                </div>
+              </el-radio-group>
+            </el-form-item>
+            
+            <el-form-item label="推送链接" prop="link" v-if="form.jump_type!=4">
+                <el-input v-model="form.link" placeholder="请输入链接地址" style="width:500px;margin-left:20px"></el-input>
+            </el-form-item>
+            <el-form-item label="推送标题" prop="title" v-if="form.jump_type!=4">
+                <el-input v-model="form.title" placeholder="请输入推送标题" style="width:500px;margin-left:20px"></el-input>
+            </el-form-item>
+            <el-form-item label="上传图片" prop="image">
+                  <input type="file" name="file" @change="fileSelected()" id="file" style="display:none;">
+                  <el-image style="width: 200px; height: 200px" :src="form.image" fit="cover" v-if="form.image" @click="handleUpload"></el-image>
+                  <div style="margin-left:20px" v-else>
+                      <div class="upload-default-box" @click="handleUpload"></div>
+                      <p style="font-size:14px;color:#999">支持png、jpg格式</p>
+                  </div>
+            </el-form-item>
+            <el-form-item label="描述" prop="des" v-show="form.jump_type!=4">
+                <el-input type="textarea" maxlength="64" clearable placeholder="请输入描述内容" :rows="5" v-model="form.des" style="margin-left:20px;width:500px"></el-input>
+            </el-form-item>
+            <el-form-item label="默认标签" prop="labels">
+                <div class="label-box" style="margin-left:20px">
+                    <span v-for="item in showLabels" :key="item.name" class="label-item">{{item.name}}</span>
+                    <span style="font-size:14px;color:#0099FF;cursor: pointer;margin-left:30px" @click="show=true">+更改</span>
+                </div>
+            </el-form-item>
+  
+            <div style="text-align: center; margin-top: 40px; margin-bottom: 20px">
+                <el-button type="primary" @click="handleSubmit" style="width: 145px">推送</el-button>
+            </div>
+        </el-form>
+  
+        <!-- 选择标签弹窗 -->
+        <el-dialog width="620px" top="15vh" v-model="show" :modal-append-to-body="false" @close="show=false">
+          <template #header>
+            <div>
+                <img width="20" src="../../assets/img/icons/label.png" alt="" style="position:relative;top:4px;margin-right:10px">
+                <span>群发标签</span>
+            </div>
+          </template>
+          <div class="label-select-wrap">
+              <span 
+                  class="label-item" 
+                  :class="item.selected?'label-active':null" 
+                  v-for="(item,index) in labelArr" 
+                  :key="item.name" 
+                  @click="handleClickLabel(index)"
+              >{{item.name}}</span>
+          </div>
+        </el-dialog>
+    </div>
+</template>
+<style lang="scss" scoped>
+  .group-send-page{
+      width: 100%;
+      background: #FFFFFF;
+      box-sizing: border-box;
+      // box-shadow: 0 3px 6px rgba(0, 0, 0 ,0.05);
+      border-radius: 4px;
+      min-height: calc(100vh - 120px);
+      padding: 30px;
+      .el-form-item{
+          margin-bottom: 40px;
+      }
+      
+  }
+  .upload-default-box{
+      width: 103px;
+      height: 103px;
+      background: #E9E9E9;
+      border-radius: 2px;
+      position: relative;
+      cursor: pointer;
+      &::after{
+          content: '';
+          display: block;
+          background-image: url('../../assets/img/icons/add_icon.png');
+          background-size: cover;
+          width: 50px;
+          height: 50px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%,-50%);
+      }
+  }
+  
+  .des-box{
+      width: 815px;
+      height: 257px;
+      border: 1px solid #DCDFE6;
+      display: block;
+      box-sizing: border-box;
+      padding: 20px;
+      border-radius: 4px;
+  }
+  
+  .label-box{
+      .label-item{
+          display: inline-block;
+          background-color: #E0EEFD;
+          padding: 10px 20px;
+          min-width: 80px;
+          text-align: center;
+          color: #2D8CF0;
+          font-size: 14px;
+          border-radius: 2px;
+          line-height: 1;
+          margin-right: 20px;
+          margin-bottom: 20px;
+      }
+  }
+  
+  .label-select-wrap{
+      // margin-bottom: 30px;
+      padding: 10px 10px 30px 10px;
+      .label-item{
+          display: inline-block;
+          background-color: #ECECEC;
+          padding: 10px 20px;
+          min-width: 80px;
+          text-align: center;
+          color: #333;
+          font-size: 14px;
+          border-radius: 2px;
+          line-height: 1;
+          margin-right: 20px;
+          margin-bottom: 20px;
+          cursor: pointer;
+      }
+      .label-active{
+          background-color: #E0EEFD;
+          color: #2D8CF0;
+      }
+  }
+</style>