广告位静态页面完成

src/assets/scss/global.scss

@@ -66,4 +66,12 @@ aside{
 }
 .el-menu-item,.el-submenu__title{
     padding: 0 20px 0 0px !important;
+}
+
+.ap_title{
+    font-family: PingFang-SC, PingFang-SC;
+    font-weight: bold;
+    font-size: 16px;
+    color: #002846;
+    line-height: 16px;
 }

src/views/modules/advertising.vue

@@ -1,17 +1,247 @@
 <template>
     <div class="agent_page">
-        <h3>广告位管理</h3>
+        <div class="ap_title">{{ title }}</div>
+        <div class="add adf">
+            <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增广告位</el-button>
+        </div>
+        <el-table :data="dataList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无广告" max-height="578px" style="margin-top: 18px;">
+            <el-table-column label="序号" width="50">
+                <template #default="scope">
+                    {{ scope.$index + 1 }}
+                </template>
+            </el-table-column>
+            <el-table-column label="广告位位置" prop="xx"></el-table-column>
+            <el-table-column label="广告位类型" prop="xx">
+                <template #default="{ row }"></template>
+            </el-table-column>
+            <el-table-column label="图片" prop="xx">
+                <template #default="{ row }"></template>
+            </el-table-column>
+            <el-table-column label="广告位标题" prop="xx"></el-table-column>
+            <el-table-column label="跳转链接" prop="xx"></el-table-column>
+            <el-table-column label="点击量" prop="xx"></el-table-column>
+            <el-table-column label="创建时间" prop="createDate"></el-table-column>
+            <el-table-column label="排序" prop="xx"></el-table-column>
+            <el-table-column label="上架状态" prop="xx">
+                <template #default="{ row }">
+                    <el-switch v-model="row.status" active-color="#33A7A7" inactive-color="#B9C0C8" @change="e=>statusChange(e,row)"></el-switch>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" width="200">
+                <template #default="scope">
+                    <el-button link type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                    <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <el-row style="display: flex;justify-content: center;">
+            <el-pagination
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="queryParams.page"
+                :page-sizes="[5, 10, 20, 50]"
+                :page-size="10"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+                v-show="total > 0">
+            </el-pagination>
+        </el-row>
+        <el-dialog width="40%" :visible.sync="show" :title="dialogTitle" @close="cancel">
+            <el-form ref="advertRef" :model="advertForm" :rules="advertRules" label-width="100px" style="width: 90%;margin: 0 auto;">
+                <el-form-item label="广告位位置" prop="aaa">
+                    <el-select v-model="advertForm.aaa" placeholder="请选择广告位位置" style="width:100%">
+                        <el-option label="首页" value="1"></el-option>
+                        <el-option label="发布问卷" value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="广告位类型" prop="bbb">
+                    <el-select v-model="advertForm.bbb" placeholder="请选择广告位类型" style="width:100%">
+                        <el-option label="banner区" value="1"></el-option>
+                        <el-option label="弹框" value="2"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="广告位标题" prop="ccc">
+                    <el-input v-model="advertForm.ccc" placeholder="请输入广告位标题"></el-input>
+                </el-form-item>
+                <el-form-item label="配图" prop="" class="red">
+                    <el-upload
+                        list-type="picture-card"
+                        :action="uploadUrl"
+                        :headers="uploadHeaders"
+                        :on-success="uploadFileSuccess"
+                        :on-remove="removeFile"
+                        :before-upload="beforeAvatarUpload"
+                        :limit="5"
+                        :file-list="fileList">
+                        <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <div class="dialog-tip">图片最小分辨率：702*200</div>
+                </el-form-item>
+                <el-form-item label="跳转链接" prop="eee">
+                    <el-radio-group v-model="advertForm.eee">
+                        <el-radio :label="1">微信公众号</el-radio>
+                        <el-radio :label="2">微信小程序</el-radio>
+                    </el-radio-group>
+                    <el-input v-model="advertForm.fff" placeholder="配置跳转链接"></el-input>
+                </el-form-item>
+            </el-form>
+            <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
+                <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
+                <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script setup name="">
-    import { ref, getCurrentInstance } from 'vue'
+    import qs from 'qs'
+    import Cookies from "js-cookie"
+    import { ref, getCurrentInstance, onMounted } from 'vue'
     const { proxy } = getCurrentInstance();
-    
+    const title = proxy.$route.meta.title;
+    const uploadUrl = `${window.SITE_CONFIG["apiURL"]}/sys/oss/uploadFile`
+    const uploadHeaders = {token:Cookies.get("token")};
+    const fileList = ref([]);
+    const queryParams = ref({
+        page:1,
+        limit:10
+    })
+    const dataList = ref([])
+    const total = ref(0)
+    const loading = ref(false)
+    const buttonLoading = ref(false)
+    const show = ref(false)
+    const dialogTitle = ref('新增广告位')
+    const advertRef = ref(null)
+    const advertForm = ref({
+        id:''
+    })
+    const advertRules = ref({
+        aaa: [
+            { required: true, message: '请选择广告位位置', trigger: 'change' }
+        ],
+        bbb: [
+            { required: true, message: '请选择广告位类型', trigger: 'change' }
+        ],
+        ccc: [
+            { required: true, message: '请输入广告位标题', trigger: 'blur' }
+        ]
+    })
+
+    const getList = async () => {
+        let query = {...queryParams.value};
+        loading.value = true;
+        // const res = await getCoachList(query);
+        // dataList.value = res.data.list;
+        // total.value = res.data.total;
+        loading.value = false;
+    }
+    const handleSizeChange = (e)=>{
+        queryParams.value.limit = e;
+        getList();
+    }
+    const handleCurrentChange = (e)=>{
+        queryParams.value.page = e;
+        getList();
+    }
+
+    const reset = () => {
+        advertForm.value = {
+            id:'',
+        };
+        proxy.resetForm("advertRef");
+    }
+    const handleAdd = () => {
+        reset();
+        dialogTitle.value = "新增广告位";
+        show.value = true;
+    }
+    const handleEdit = (row) => {
+        reset();
+        // getCoachInfo(row.id).then(response => {
+            advertForm.value = response.data;
+            dialogTitle.value = "编辑广告位";
+            show.value = true;
+        // });
+    }
+
+    const submitForm = () => {
+        proxy.$refs.advertRef.validate((valid) => {
+            if (valid) {
+                buttonLoading.value = true;
+                if(fileList.value.length===0) return proxy.$message.error('请上传图片');
+                // if(advertForm.value.id){
+                //     updateCoach(advertForm.value).then((res)=>{
+                //         if(res.code!==0) return proxy.$message.error(res.msg);
+                //         buttonLoading.value = false;
+                //         userShow.value = false;
+                //         getList();
+                //     })
+                // }else{
+                //     addCoach(advertForm.value).then((res)=>{
+                //         if(res.code!==0) return proxy.$message.error(res.msg);
+                //         buttonLoading.value = false;
+                //         userShow.value = false;
+                //         getList();
+                //     })
+                // }
+            } else {
+                return false;
+            }
+        });
+    }
+    const cancel = () => {
+        show.value = false;
+        reset();
+    }
+    async function handleDelete(row) {
+        // await proxy?.$modal.confirm('确认删除教练【' + row.realName + '】吗？').finally(() => loading.value = false);
+        // let res = await deleteCoach([row.id]);
+        // if (res.code === 0) proxy?.$modal.msgSuccess("删除成功");
+        // else return proxy?.$modal.msgError(res.msg);
+        // await getList();
+    }
+
+    const uploadFileSuccess = e =>{
+        if(e.data){
+          fileList.value.unshift({name:'',url:e.data});
+        }
+    }
+    const removeFile = (e) => {
+        let url = e[0]?.url||'';
+        let idx = fileList.value.find(f=>f.url==url);
+        if(idx>-1) fileList.value.splice(idx,1)
+    }
+    const beforeAvatarUpload = (file) => {
+        // if (!['image/jpeg', 'image/png', 'image/jpg'].includes(file.type)) {
+        //     return proxy.$message.error('上传图片只能是 JPG/PNG/JPEG 格式!');
+        // }
+        // if (file.size / 1024 / 1024 > 5) {
+        //     return proxy.$message.error('上传图片大小不能超过 5MB!');
+        // }
+        return true;
+    }
+
+    onMounted(()=>{
+        getList();
+    })
 </script>
 
 <style scoped lang="scss">
+    ::v-deep .el-form-item.red{
+        .el-form-item__label::before{
+            content: "*";
+            color: #f56c6c;
+            margin-right: 4px;
+        }
+    }
+
     .agent_page{
         padding: 24px 16px;
+
+        .add{
+            margin-top: -10px;
+            justify-content: flex-end;
+        }
     }
 </style>