广告位/广告管理

src/components/PageHeader.vue

@@ -2,7 +2,7 @@
   <div class="page-header">
     <div class="header-left">
       <!-- <img :src="logoImg" /> -->
-       <h1>后台管理</h1>
+       <h1>恒星管理</h1>
       <div class="header-nav">
         <!--        <a :class="{cur:navIdx==-1}" href="/seller">工作台</a>-->
         <a :class="{ cur: navIdx == idx }" v-for="(item, idx) in nav" :href="item.url" :key="idx" @click="onNav(idx)">{{ item.label }}</a>

src/router/index.js

@@ -141,10 +141,10 @@ const routes = [{
             } ,
             {
                 meta: {
-                    action: "adList",
+                    action: "adList/:pid?",
                     title: '广告'
                 },
-                path: 'adList',
+                path: 'adList/:pid?',
                 name: 'adList',
                 component: () =>
                     import ('@views/ad/index.vue')

src/store/navMenu.js

@@ -19,7 +19,7 @@ export default {
         menu(state){
             let result =  state.list[state.navIdx]
             if(result && result.children){
-                console.log(result.children)
+               
                 return result.children;
             }
             return []

src/views/ad/components/edit.vue

@@ -2,52 +2,54 @@
   <div>
     <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
       <el-form-item
-          label="所属站点："
-          prop="website_id"
+          label="广告位名称："
       >
-      <el-select
-        v-model="form.website_id"
-        :multiple=false
-        :clearable="true"
-        filterable
-        remote
-        reserve-keyword
-        placeholder="请输入关键词"
-        :remote-method="remoteMethod"
-        :loading="loading">
-        <el-option
-          v-for="item in websiteList"
-          :key="item.id"
-          :label="item.website_name"
-          :value="item.id">
-        </el-option>
-      </el-select>
-    
+        {{ form.p_name }}
       </el-form-item>
       <el-form-item
-          label="网站名称："
-          prop="title"
+          label="广告类型："
       >
-        <el-input v-model="form.title"  maxlength="50" placeholder="请输入资讯标题"></el-input>
+        {{ form.type_name }}
       </el-form-item>
       <el-form-item
-          label="网站地址："
-          prop="url"
+          label="广告名称："
+          prop="name"
       >
-        <el-input v-model="form.url"  maxlength="50" placeholder="请输入网站地址"></el-input>
+        <el-input v-model="form.name"  maxlength="50" placeholder="请输入广告名称"></el-input>
       </el-form-item>
-      <el-form-item  prop="image_url"  >
+      <el-form-item
+          label="广告介绍："
+          prop="introduce"
+      >
+        <el-input type="textarea" v-model="form.introduce"  maxlength="200" placeholder="请输入广告介绍"></el-input>
+      </el-form-item>
+
+      <el-form-item
+          label="链接文字："
+          prop="text_name"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_name"  maxlength="200" placeholder="请输入链接文字"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="链接地址："
+          prop="text_url"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="Title提示："
+          prop="text_title"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_title"  maxlength="200" placeholder="请输入Title提示"></el-input>
+      </el-form-item>
+
+      <el-form-item  prop="image_src" v-if="form.typeid ==2" >
           <template v-slot:label >
-            <span  style="display: inline-block">网站LOGO：</span>
-            <el-tooltip
-                class="box-item"
-                effect="dark"
-                content="建议大小：90px*30px  支持格式：jpg、gif、png"
-                placement="top"
-            >
-              <i class="el-icon-warning"></i>
-            </el-tooltip>
-            <span  style="display: inline-block"> </span>
+            <span  style="display: inline-block">图片地址：</span>
+          
           </template>
           <input
               type="file"
@@ -57,20 +59,49 @@
               @change="beforeAvatarUpload"
           />
           <div class="uploadImg" @click="uploadSildeShowClick">
-              <div v-if="!form.logo_url" class="uploadImg_warp">
+              <div v-if="!form.image_src" class="uploadImg_warp">
                 <div class="uploadImg_img"><img src="@/assets/default_avatar.png"></div>
                 <span>点击上传</span>
               </div>
-            <div v-else style="width: 100%; height: 100%;"><img :src="form.logo_url" style="width: 100%;height: 100%;"></div>
+            <div v-else style="width: 100%; height: 100%;"><img :src="form.image_src" style="width: 100%;height: 100%;"></div>
           </div>
         </el-form-item>
+        <el-form-item
+          label="链接地址："
+          prop="image_url"
+          v-if="form.typeid ==2"
+      >
+        <el-input  v-model="form.image_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
+      </el-form-item>
       <el-form-item
-          label="网站介绍："
-          prop="describe"
+          label="图片ALT："
+          prop="image_alt"
+          v-if="form.typeid ==2"
+      >
+        <el-input  v-model="form.image_alt"  maxlength="200" placeholder="请输入图片ALT"></el-input>
+      </el-form-item>
+        <el-form-item
+          label="投放开始时间："
+          prop="f_t_date"
       >
-        <el-input type="textarea" v-model="form.describe"  maxlength="50" placeholder="请输入网站介绍"></el-input>
+              <el-date-picker
+              v-model="form.f_t_date"
+              type="datetimerange"
+              range-separator="至"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+              
+            </el-date-picker>
       </el-form-item>
-      <!---1通过，2待审核，3待发 4,拒绝 5删除-->
+
+        <el-form-item
+          label="备注："
+          prop="remark"
+      >
+        <el-input  v-model="form.remark"  maxlength="200" placeholder="请输入备注"></el-input>
+      </el-form-item>
+      <!---1通过，2待审-->
       <el-form-item
           label="状态："
           prop="status"
@@ -83,7 +114,7 @@
 
       <el-form-item>
         <div style="text-align: center">
-          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loading="isloading">保存</el-button>
+          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loAding="isloAding">保存</el-button>
           <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
         </div>
       </el-form-item>
@@ -97,11 +128,11 @@ export default {
         Editor
     },
   props: {
-    LinkDataForm: {
+    AdDataForm: {
       type: Object,
       default: () => {}
     },
-    isloading:{
+    isloAding:{
       type:Boolean,
       default: true
     },
@@ -111,13 +142,26 @@ export default {
   },
   data() {
     return {
+      isShow:'',
       form: {
-        website_id:'',//站点ID
-        title:'',//标题
-        url:'',//地址
-        logo_url:'', //图片地址
-        status:1,//状态
-        describe:'', //备注信息
+        id:'',
+        pid:'',
+        typeid:'',
+        f_t_date:[],
+        name:'',//广告标题
+        thumb:'',//示意图
+        typeid:'', //广告类型
+        introduce:'', //广告介绍
+        text_name:'',//文本内容
+        text_url:'',//文本跳转地址
+        text_title:'',//文本提示标题
+
+        image_src:'',//图片地址
+        image_url:'',//跳转地址
+        image_alt:'',//图片提示
+        status:'',//状态
+        remark:'',//备注信息
+        p_name:'',
       },
       categoryList: [],
       Isdisabled: false,
@@ -125,50 +169,89 @@ export default {
         website_id: [
           { required: true, message: '请选择所属站点' },
         ],
-        title: [
-          {  required: true, message: '网站名称不能为空' },
-        ],
-        url: [
-          {  required: true, message: '网站地址不能为空' },
+        name: [
+          {  required: true, message: '广告位名称不能为空' },
         ],
         status: [
           {  required: true, message: '请选择状态' },
         ],
+        text_name:[
+          {  required: true, message: '链接文字不能为空' },
+        ],
+        text_url:[
+          {  required: true, message: '链接地址不能为空' },
+        ],
+        text_title:[
+          {  required: true, message: '链接提示不能为空' },
+        ],
+        f_t_date:[
+          {  required: true, message: '投放时间不能为空' },
+        ],
+        image_src:[
+          {  required: true, message: '图片地址不能为空' },
+        ],
       },
       pageSize:20,
       page:1,
       keyWord:'',
-      websiteList:[]
+    }
+  },
+  watch:{
+    "form.width":{
+      immediate:true, 
+      handler: function(n,o){
+        console.log("宽：",n)
+        if(n>0 && this.form.height>0){
+           setTimeout(() => {
+            this.form.size = "1"
+            this.$refs['size'].clearValidate()
+           })
+          
+        }else{
+           this.form.size = ""
+        }
+      }
+    }
+    , 
+    "form.height":{
+      immediate:true, 
+      handler: function(n,o){
+        console.log("高：",n)
+        if(n>0 && this.form.width>0){
+          setTimeout(() => {
+            this.form.size = "1"
+            this.$refs['size'].clearValidate()
+           })
+          
+        }else{
+           this.form.size = ""
+        }
+      }
     }
   },
   mounted() {
-    if(this.LinkDataForm) {
-      this.form = Object.assign({} , this.LinkDataForm)
+    if(this.AdDataForm) {
+      this.form = Object.assign({} , this.AdDataForm)
+      this.form.p_name =  this.form.name
+      this.form.f_t_date = [this.form.fromtime,this.form.totime]
     }
-    this.remoteMethod()
+ 
   },
   methods: {
-    remoteMethod(keyWord){
-      let _t= this
-      let parames = {
-        'page':this.currentPage,
-        'pageSize':this.pageSize,
-        'keyWord':keyWord
+    onclickType(val){
+      console.log(val)
+      if(val==1){
+          this.isShow = false
+      }else{
+        this.isShow = true
       }
-      this.$api.website.getWebsiteList(parames).then(res=>{
-                if(res.code==200){
-                  _t.websiteList = res.data.rows
-                }else{
-                    this.$message.error("查询失败")
-                }
-            })
     },
-    isLinkOk(o){
+    isAdOk(o){
         console.log(o)
         if(o==true){
-            this.isLink = true
+            this.isAd = true
         }else{
-          this.isLink = false
+          this.isAd = false
         }
     },
     handelIncrease(step) {
@@ -185,7 +268,7 @@ export default {
       that.$refs['form'].validate((valid) => {
         if (valid) {
           this.form.tag = that.tags
-          this.$emit('LinkSubmitClick', this.form)
+          this.$emit('AdSubmitClick', this.form)
         }
       })
     },
@@ -217,7 +300,7 @@ export default {
             message: '上传成功'
           })
           // this.avatarUrl =  res.data.imgUrl
-          this.form.logo_url = res.data.imgUrl
+          this.form.image_src = res.data.imgUrl
         }else{
           this.$message({
             type: 'error',
@@ -250,13 +333,7 @@ export default {
       };
       reader.readAsDataURL(filePic);
     },
-    addTag() {
-      if (this.tagInput.trim()) {
-        this.tags.push(this.tagInput.trim());
-        
-        this.tagInput = '';
-      }
-    },
+   
     removeTag(index) {
       this.tags.splice(index, 1);
     }

src/views/ad/index.vue

@@ -2,9 +2,9 @@
     <div class="main-content__div">
       <div class="table-box__div" v-cloak v-loading="loadingFlag">
         <el-form  class="demo-form-inline">
-          <el-form-item label="网站名称">
+          <el-form-item label="广告名称">
             <el-input
-              placeholder="网站名称"
+              placeholder="广告名称"
               v-model="keyword"
               style="width:150px;"
               size="small"
@@ -20,13 +20,6 @@
       </div>
       <!-- 列表 -->
       <div class="table-box__div" v-cloak v-loading="loadingFlag">
-        <!-- 查询表单 -->
-        <el-form :inline="true" class="demo-form-inline">
-          <el-form-item>
-            <el-button type="primary" size="small" @click="addClick">添加网站</el-button>
-          </el-form-item>
-        
-        </el-form>
         <el-table
           size="mini"
           :data="tableData"
@@ -34,21 +27,15 @@
           style="width: 100%;font-size: 15px;"
           :header-cell-style="{background:'#FAFAFA'}"
         >
-          <el-table-column label="编号" width="150" prop="id"></el-table-column>
-          <el-table-column label="网站标题" prop="title" width="250"></el-table-column>
-          <el-table-column label="站点名称" prop="website_name" width="250"></el-table-column>
-          <el-table-column label="排序" prop="sort" width="250"></el-table-column>
-          <el-table-column label="状态" prop="status_name" width="100"></el-table-column>
-          <el-table-column label="网站图片"  width="80">
-            <template v-slot="scope">
-              <el-image
-              style="width: 50px; height: 50px"
-              :src="scope.row.logo_url"
-              ></el-image>
-          </template>
-          </el-table-column>
-          <el-table-column label="创建时间" prop="created_at" width="200"></el-table-column>
-          <el-table-column label="更新时间" prop="updated_at" width="200"></el-table-column>
+          <el-table-column label="编号" width="100" prop="id"></el-table-column>
+          <el-table-column label="广告类型" prop="type_name" width="100"></el-table-column>
+          <el-table-column label="广告位名称" prop="place_name" width="200"></el-table-column>
+          <el-table-column label="广告名称" prop="name" width="250"></el-table-column>
+          <el-table-column label="状态" prop="runing_name" width="100"></el-table-column>
+          <el-table-column label="审核" prop="status_name" width="100"></el-table-column>
+          <el-table-column label="开始时间" prop="fromtime" width="200"></el-table-column>
+          <el-table-column label="结束时间" prop="totime" width="200"></el-table-column>
+          <el-table-column label="剩余(天)" prop="day" width="100"></el-table-column>
           <el-table-column   prop="" label="操作" align="center"  fixed="right" width="200">
                   <template v-slot="scope">
                     <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
@@ -71,7 +58,7 @@
         </div>
       </div>
     </div>
-  <Dialog title="温馨提示" content="您确认要删除该网站吗？"
+  <Dialog title="温馨提示" content="您确认要删除该广告吗？"
           @close="DialogShow = false"
           @submitSureClick="submitSureClickDel"
           @DialogFalse="DialogShow = false"
@@ -79,16 +66,16 @@
   </Dialog>
   <DialogSlot
       title="添加/编辑"
-      @close="LinkDialogShow = false"
-      @DialogClose="LinkDialogShow = false"
-      :innerVisible="LinkDialogShow"
-      @colesClick="LinkDialogShow  = false"
+      @close="AdDialogShow = false"
+      @DialogClose="AdDialogShow = false"
+      :innerVisible="AdDialogShow"
+      @colesClick="AdDialogShow  = false"
   >
     <editFrom
-        @colesClick="LinkDialogShow = false"
-        :LinkDataForm="LinkDataForm"
+        @colesClick="AdDialogShow = false"
+        :AdDataForm="AdDataForm"
          :isloading="isloading"
-        @LinkSubmitClick="LinkSubmitClick"
+        @AdSubmitClick="AdSubmitClick"
         @closeDlg="closeDlg"
         >
     </editFrom>
@@ -124,12 +111,12 @@
         isShowSource: false, // 是否显示来源列
         id:0,
         DialogShow: false, //控制删除弹窗
-        LinkId:'',
-        LinkRowIndex:'',
-        LinkDataForm: {},
-        LinkTableData: [],
+        AdId:'',
+        AdRowIndex:'',
+        AdDataForm: {},
+        AdTableData: [],
         isloading:false, //提交按钮状态
-        LinkDialogShow: false, // 控制保存弹窗
+        AdDialogShow: false, // 控制保存弹窗
         pid:0,
         keyword:''
       }
@@ -147,8 +134,11 @@
             'pageSize':this.pageSize,
             'keyWord':this.keyword
         }
+        if(this.pid>0){
+          parames.pid = this.pid
+        }
         console.log("参数：",parames)
-        this.$api.link.getLinkList(parames).then(res=>{
+        this.$api.ad.getAdList(parames).then(res=>{
                 _t.loadingFlag = false;
                 if(res.code==200){
                   if(res.data.rows.length==0){
@@ -182,32 +172,28 @@
         _t.pageSize = 10
        this.getList()
       },
-      addClick(){
-        this.LinkDataForm = {}
-        this.LinkDialogShow = true
-      },
       //更新分类
       updateClick(row,index){
         console.log(row)
-        this.LinkDataForm = row
+        this.AdDataForm = row
         this.rowIndex = index
-        this.LinkDialogShow = true
+        this.AdDialogShow = true
       },
-      // LinkDialogShow(){
+      // AdDialogShow(){
       //   this.isloading = false
       // },
       closeDlg(val){
-          this.LinkDialogShow = false
+          this.AdDialogShow = false
           this.isloading = false
       },
-      LinkSubmitClick(data){
+      AdSubmitClick(data){
         let _t = this
         console.log("提交数据",data)
         let parames = data
         _t.isloading = true
         //有id更新，没有新增
         if(parames.id){
-          this.$api.link.updateLink(parames).then(res=>{
+          this.$api.ad.updateAd(parames).then(res=>{
                 _t.loadingFlag = false;
                 if(res.code==200){
                   _t.tableData[_t.rowIndex] = parames
@@ -216,11 +202,11 @@
                 }else{
                     this.$message.error("修改失败")
                 }
-                this.LinkDialogShow = false
+                this.AdDialogShow = false
                 this.isloading = false
             })
         }else{
-          this.$api.link.createLink(parames).then(res=>{
+          this.$api.ad.createAd(parames).then(res=>{
                 _t.loadingFlag = false;
                 if(res.code==200){
                      console.log("创建成功")
@@ -228,7 +214,7 @@
                 }else{
                     this.$message.error(res.message)
                 }
-                this.LinkDialogShow = false
+                this.AdDialogShow = false
                 this.isloading = false
             })
         }
@@ -236,8 +222,8 @@
       },
       //删除分类
       deleteAuthority(row, index) {
-        this.LinkId = row.id
-        this.LinkRowIndex = index
+        this.AdId = row.id
+        this.AdRowIndex = index
         this.DialogShow = true
       },
       searchFrom(){
@@ -248,9 +234,9 @@
       submitSureClickDel(row,index){
         let _t = this
         let parames = {
-          'id':this.LinkId
+          'id':this.AdId
         }
-        this.$api.link.delLink(parames).then(res=>{
+        this.$api.ad.delAd(parames).then(res=>{
           if(res.code==200){
             this.DialogShow = false
             _t.tableData.splice(index, 1);
@@ -264,7 +250,7 @@
 
     },
     created() {
-        this.pid = this.$route.params.Id;
+        this.pid = this.$route.params.pid;
         this.getList();
     }
   }

src/views/adPlace/components/ad.vue

@@ -0,0 +1,411 @@
+<template>
+  <div>
+    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
+      <el-form-item
+          label="广告位名称："
+      >
+        {{ form.p_name }}
+      </el-form-item>
+      <el-form-item
+          label="广告类型："
+      >
+        {{ form.type_name }}
+      </el-form-item>
+      <el-form-item
+          label="广告名称："
+          prop="name"
+      >
+        <el-input v-model="form.name"  maxlength="50" placeholder="请输入广告名称"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="广告介绍："
+          prop="introduce"
+      >
+        <el-input type="textarea" v-model="form.introduce"  maxlength="200" placeholder="请输入广告介绍"></el-input>
+      </el-form-item>
+
+      <el-form-item
+          label="链接文字："
+          prop="text_name"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_name"  maxlength="200" placeholder="请输入链接文字"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="链接地址："
+          prop="text_url"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="Title提示："
+          prop="text_title"
+          v-if="form.typeid ==1"
+      >
+        <el-input  v-model="form.text_title"  maxlength="200" placeholder="请输入Title提示"></el-input>
+      </el-form-item>
+
+      <el-form-item  prop="image_src" v-if="form.typeid ==2" >
+          <template v-slot:label >
+            <span  style="display: inline-block">图片地址：</span>
+          
+          </template>
+          <input
+              type="file"
+              class="inputIcon"
+              ref="upfile"
+              required
+              @change="beforeAvatarUpload"
+          />
+          <div class="uploadImg" @click="uploadSildeShowClick">
+              <div v-if="!form.image_src" class="uploadImg_warp">
+                <div class="uploadImg_img"><img src="@/assets/default_avatar.png"></div>
+                <span>点击上传</span>
+              </div>
+            <div v-else style="width: 100%; height: 100%;"><img :src="form.image_src" style="width: 100%;height: 100%;"></div>
+          </div>
+        </el-form-item>
+        <el-form-item
+          label="链接地址："
+          prop="image_url"
+          v-if="form.typeid ==2"
+      >
+        <el-input  v-model="form.image_url"  maxlength="200" placeholder="请输入链接地址"></el-input>
+      </el-form-item>
+      <el-form-item
+          label="图片ALT："
+          prop="image_alt"
+          v-if="form.typeid ==2"
+      >
+        <el-input  v-model="form.image_alt"  maxlength="200" placeholder="请输入图片ALT"></el-input>
+      </el-form-item>
+        <el-form-item
+          label="投放开始时间："
+          prop="f_t_date"
+      >
+              <el-date-picker
+              v-model="form.f_t_date"
+              type="datetimerange"
+              range-separator="至"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期">
+              
+            </el-date-picker>
+      </el-form-item>
+
+        <el-form-item
+          label="备注："
+          prop="remark"
+      >
+        <el-input  v-model="form.remark"  maxlength="200" placeholder="请输入备注"></el-input>
+      </el-form-item>
+      <!---1通过，2待审-->
+      <el-form-item
+          label="状态："
+          prop="status"
+      >
+      <el-radio-group v-model="form.status">
+          <el-radio :label="1">通过</el-radio>
+          <el-radio :label="2">待审核</el-radio>
+      </el-radio-group>
+      </el-form-item>
+
+      <el-form-item>
+        <div style="text-align: center">
+          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loAding="isloAding">保存</el-button>
+          <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import Editor from "../../../components/editor/Editor";
+export default {
+  components: {
+        Editor
+    },
+  props: {
+    AdDataForm: {
+      type: Object,
+      default: () => {}
+    },
+    isloAding:{
+      type:Boolean,
+      default: true
+    },
+    closeDlg:{
+      type:Function
+    }
+  },
+  data() {
+    return {
+      isShow:'',
+      form: {
+        id:'',
+        typeid:'',
+        f_t_date:[],
+        name:'',//广告标题
+        thumb:'',//示意图
+        typeid:'', //广告类型
+        introduce:'', //广告介绍
+        text_name:'',//文本内容
+        text_url:'',//文本跳转地址
+        text_title:'',//文本提示标题
+
+        image_src:'',//图片地址
+        image_url:'',//跳转地址
+        image_alt:'',//图片提示
+        status:'',//状态
+        remark:'',//备注信息
+        p_name:'',
+      },
+      categoryList: [],
+      Isdisabled: false,
+      rules: {
+        website_id: [
+          { required: true, message: '请选择所属站点' },
+        ],
+        name: [
+          {  required: true, message: '广告位名称不能为空' },
+        ],
+        status: [
+          {  required: true, message: '请选择状态' },
+        ],
+        text_name:[
+          {  required: true, message: '链接文字不能为空' },
+        ],
+        text_url:[
+          {  required: true, message: '链接地址不能为空' },
+        ],
+        text_title:[
+          {  required: true, message: '链接提示不能为空' },
+        ],
+        f_t_date:[
+          {  required: true, message: '投放时间不能为空' },
+        ],
+        image_src:[
+          {  required: true, message: '图片地址不能为空' },
+        ],
+      },
+      pageSize:20,
+      page:1,
+      keyWord:'',
+    }
+  },
+  watch:{
+    "form.width":{
+      immediate:true, 
+      handler: function(n,o){
+        console.log("宽：",n)
+        if(n>0 && this.form.height>0){
+           setTimeout(() => {
+            this.form.size = "1"
+            this.$refs['size'].clearValidate()
+           })
+          
+        }else{
+           this.form.size = ""
+        }
+      }
+    }
+    , 
+    "form.height":{
+      immediate:true, 
+      handler: function(n,o){
+        console.log("高：",n)
+        if(n>0 && this.form.width>0){
+          setTimeout(() => {
+            this.form.size = "1"
+            this.$refs['size'].clearValidate()
+           })
+          
+        }else{
+           this.form.size = ""
+        }
+      }
+    }
+  },
+  mounted() {
+    if(this.AdDataForm) {
+      this.form = Object.assign({} , this.AdDataForm)
+      this.form.p_name =  this.form.name
+      this.form.pid =  this.form.id
+      this.form.name = ''
+      this.form.introduce= ''
+
+    }
+ 
+  },
+  methods: {
+    onclickType(val){
+      console.log(val)
+      if(val==1){
+          this.isShow = false
+      }else{
+        this.isShow = true
+      }
+    },
+    isAdOk(o){
+        console.log(o)
+        if(o==true){
+            this.isAd = true
+        }else{
+          this.isAd = false
+        }
+    },
+    handelIncrease(step) {
+          console.log("step====:",step)
+          this.form.content = step
+    },
+    closeDlg() {
+      console.log("edit提交")
+      this.$emit('closeDlg',1)
+    },
+    onSubmit() {
+      let that = this
+      
+      that.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.form.tag = that.tags
+          this.$emit('AdSubmitClick', this.form)
+        }
+      })
+    },
+
+    uploadSildeShowClick() {
+      this.$refs.upfile.value = ''
+      this.$refs.upfile.click()
+    },
+    beforeAvatarUpload(e) {
+      let than = this
+      let files = e.target.files[0]
+      let suffixName = files.name.substring(files.name.lastIndexOf('.') + 1);   /* 得到文件后缀名 */
+      if (suffixName !== 'jpg' && suffixName !== 'png' && suffixName !== 'jpeg' && suffixName !== 'gif' ) {
+        this.$message.warning("上传文件只能是 jpg、png、jpeg、gif 格式!");
+        // this.ishowFile = true
+        return;
+      }
+      this.verificationPicFile(files, () => this.fileAdd(files))
+    },
+    fileAdd(files) {
+      let formData = new FormData();
+      // 组装post提交的数据
+      formData.append("file", files);
+      this.$api.publicApi.uploadFile(formData).then( res => {
+        console.log(res)
+        if( res.code == '200') {
+          this.$message({
+            type: 'success',
+            message: '上传成功'
+          })
+          // this.avatarUrl =  res.data.imgUrl
+          this.form.image_src = res.data.imgUrl
+        }else{
+          this.$message({
+            type: 'error',
+            message: '上传失败'
+          })
+        }
+      })
+    },
+    verificationPicFile(file, callback) {
+      const that = this
+      //读取图片数据
+      var filePic = file;
+      var reader = new FileReader();
+      reader.onload = function (e) {
+        var data = e.target.result;
+        //加载图片获取图片真实宽度和高度
+        var image = new Image();
+        image.onload=function(){
+          var width = image.width;
+          var height = image.height;
+          if (width >= 100 && height >= 100){
+            callback()
+          } else {
+            // that.ishowFile = true
+            that.from.avatar = ''
+            that.$message.error('上传图片建议200*200px！')
+          }
+        };
+        image.src= data;
+      };
+      reader.readAsDataURL(filePic);
+    },
+   
+    removeTag(index) {
+      this.tags.splice(index, 1);
+    }
+  }
+}
+</script>
+<style>
+.el-cascader-node>.el-radio{
+  margin-top:25px;
+}
+</style>
+
+<style lang="less" scoped>
+
+.uploadImg {
+  width: 110px;
+  height: 100px;
+  border: 1px solid #F8F8F8;
+  border-radius: 4px;
+  cursor:pointer;
+  position: absolute;
+  top: 0;
+}
+.inputIcon {
+  width: 110px;
+  height: 100px;
+  position: relative;
+  opacity: 0;
+}
+.uploadImg_warp {
+  width: 100%;
+  height: 100%;
+  display:flex ;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.uploadImg_img {
+  height: 32px;
+}
+.footerBotton {
+  text-align: center;
+}
+.avatar-uploader {
+  width: 110px;
+  height: 110px;
+  border: 1px solid #F8F8F8;
+  border-radius: 4px;
+  position: relative;
+}
+.el-icon-plus {
+  width: 110px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+.el-icon-plus-icon {
+  display: block;
+  margin-bottom: 15px;
+}
+.el-icon-plus-up {
+  color: #222222;
+  font-size: 12px;
+  line-height: 17px;
+  font-weight: 400;
+}
+/deep/ .el-radio {
+  line-height: 40px;
+}
+</style>
+
+

src/views/adPlace/index.vue

@@ -48,9 +48,11 @@
           </el-table-column>
           <el-table-column label="创建时间" prop="created_at" width="200"></el-table-column>
           <el-table-column label="更新时间" prop="updated_at" width="200"></el-table-column>
-          <el-table-column   prop="" label="操作" align="center"  fixed="right" width="200">
+          <el-table-column   prop="" label="操作" align="center"  fixed="right" min-width="285">
                   <template v-slot="scope">
                     <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
+                      <span class="btn"  @click="adList(scope.row, scope.$index)">广告列表</span>
+                      <span class="btn"  @click="AdClick(scope.row, scope.$index)">添加广告</span>
                       <span class="btn"  @click="updateClick(scope.row, scope.$index)">编辑</span>
                       <span class="btn"  @click="deleteAuthority(scope.row,scope.$index)">删除</span>
                     </div>
@@ -92,16 +94,37 @@
         >
     </editFrom>
   </DialogSlot>
+
+
+
+  <DialogSlot
+      title="添加/编辑"
+      @close="AdDialogShow = false"
+      @DialogClose="AdDialogShow = false"
+      :innerVisible="AdDialogShow"
+      @colesClick="AdDialogShow  = false"
+  >
+    <Ad
+        @colesClick="AdDialogShow = false"
+        :AdDataForm="AdDataForm"
+         :isloAding="isloAdPlaceing"
+        @AdSubmitClick="AdSubmitClick"
+        @closeDlg="closeDlg"
+        >
+    </Ad>
+  </DialogSlot>
   </template>
   <script>
   import Dialog from "../../components/dialog";
   import editFrom from "./components/edit";
+  import Ad from "./components/ad";
   import DialogSlot from "../../components/DialogSlot";
   export default {
     components: {
       Dialog,
       editFrom,
-      DialogSlot
+      DialogSlot,
+      Ad,
     },
     data() {
       return {
@@ -130,7 +153,15 @@
         isloAdPlaceing:false, //提交按钮状态
         AdPlaceDialogShow: false, // 控制保存弹窗
         pid:0,
-        keyword:''
+        keyword:'',
+
+        loAdingFlag: false,
+        AdId:'',
+        AdRowIndex:'',
+        AdDataForm: {},
+        AdTableData: [],
+        isloAding:false, //提交按钮状态
+        AdDialogShow: false, // 控制保存弹窗
       }
     },
     mounted() {
@@ -185,6 +216,12 @@
         this.AdPlaceDataForm = {}
         this.AdPlaceDialogShow = true
       },
+
+      AdClick(row){
+        this.AdDataForm = row
+        this.AdDialogShow = true
+      },
+
       //更新分类
       updateClick(row,index){
         console.log(row)
@@ -192,9 +229,6 @@
         this.rowIndex = index
         this.AdPlaceDialogShow = true
       },
-      // AdPlaceDialogShow(){
-      //   this.isloAdPlaceing = false
-      // },
       closeDlg(val){
           this.AdPlaceDialogShow = false
           this.isloAdPlaceing = false
@@ -233,6 +267,24 @@
         }
        
       },
+      AdSubmitClick(data){
+        let _t = this
+        console.log("提交数据",data)
+        let parames = data
+        _t.isloAding = true
+        //有id更新，没有新增
+        this.$api.ad.createAd(parames).then(res=>{
+              _t.loAdingFlag = false;
+              if(res.code==200){
+                    console.log("创建成功")
+                  this.getList()
+              }else{
+                  this.$message.error(res.message)
+              }
+              this.AdDialogShow = false
+              this.isloAding = false
+          })
+      },
       //删除分类
       deleteAuthority(row, index) {
         this.AdPlaceId = row.id
@@ -258,8 +310,11 @@
             this.$message.error(res.message)
           }
         })
+      },
+      adList(row){
+        console.log(row)
+          this.$router.push("/left/adList/"+row.id)
       }
-
     },
     created() {
         this.pid = this.$route.params.Id;