2022-8-4 ad

src/api/ad/index.js

@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+export function store(data){
+  return request({
+    method:'post',
+    url:'/api/admin/advertisement/store',
+    data
+  })
+}
+
+export function index(params){
+  return request({
+    method:'get',
+    url:'/api/admin/advertisement/index',
+    params
+  })
+}
+
+export function show(params){
+  return request({
+    method:'get',
+    url:'/api/admin/advertisement/show',
+    params
+  })
+}
+
+export function update(data){
+  return request({
+    method:'post',
+    url:'/api/admin/advertisement/update',
+    data
+  })
+}

src/styles/index.scss

@@ -67,6 +67,8 @@ div:focus {
 }
 
 
+
+
   /*表头错行 .el-table th.gutter{
     display: table-cell!important;
 } */
@@ -171,26 +173,17 @@ top: 41px !important;
   bottom: -11.5px;
 }
 
-.searchFields {
-  display: flex;
-  align-items: center;
-}
-.searchFields .el-input__inner{
-  height: 32px !important;
-  line-height: 32px !important;
-}
-
-.el-menu-item{
-  color: #303133 !important;
-}
-
 ::-webkit-scrollbar {
-  width: 4px;
+  width: 8px;
-  height: 4px;
+  height: 8px;
-
 }
 
 ::-webkit-scrollbar-thumb {
   border-radius: 5px;
   background: #ddd;
 }
+
+.app-main{
+  background: #EFF2F9;
+}
+

src/utils/request.js

@@ -1,12 +1,8 @@
 import axios from 'axios'
-import {
+import { MessageBox, Message,Loading } from 'element-ui'
-  MessageBox,
-  Message
-} from 'element-ui'
 import store from '@/store'
-import {
+import { getToken } from '@/utils/auth'
-  getToken
+let loading;
-} from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
@@ -19,6 +15,11 @@ const service = axios.create({
 service.interceptors.request.use(
   config => {
     // do something before request is sent
+    loading = Loading.service({
+      lock:true,
+      background:"rgba(0,0,0,0.4)",
+      text:"正在加载中..."
+    })
 
     if (store.getters.token) {
       // let each request carry token
@@ -26,7 +27,7 @@ service.interceptors.request.use(
       // please modify it according to the actual situation
       //config.headers['X-Token'] = getToken();
 
-      config.headers['Authorization'] = "Bearer " + getToken()
+      config.headers['Authorization'] ="Bearer "+getToken()
     }
     return config
   },
@@ -42,7 +43,7 @@ service.interceptors.response.use(
   /**
    * If you want to get http information such as headers or status
    * Please return  response => response
-   */
+  */
 
   /**
    * Determine the request status by custom code
@@ -50,11 +51,11 @@ service.interceptors.response.use(
    * You can also judge the status by HTTP Status Code
    */
   response => {
+    loading.close()
     const res = response.data
 
     // if the custom code is not 20000, it is judged as an error.
-
+    if (res.errcode) {
-    if (res.hasOwnProperty("errcode")) {
       Message({
         message: res.errmsg || 'Error',
         type: 'error',
@@ -64,12 +65,11 @@ service.interceptors.response.use(
       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
       if (res.errcode === 50008 || res.errcode === 50012 || res.errcode === 50014) {
         // to re-login
-        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again',
+        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
-          'Confirm logout', {
+          confirmButtonText: 'Re-Login',
-            confirmButtonText: 'Re-Login',
+          cancelButtonText: 'Cancel',
-            cancelButtonText: 'Cancel',
+          type: 'warning'
-            type: 'warning'
+        }).then(() => {
-          }).then(() => {
           store.dispatch('user/resetToken').then(() => {
             location.reload()
           })
@@ -81,6 +81,7 @@ service.interceptors.response.use(
     }
   },
   error => {
+    loading.close()
     console.log('err' + error) // for debug
     Message({
       message: error.message,

src/views/marketing/ad.vue

@@ -7,12 +7,13 @@
           <div class="selects">
             <div class="selects-item">
               <div class="selects-item-label">活动名称：</div>
-              <Input placeholder="活动名称搜索" clearable style="width: 150px;"/>
+              <Input v-model="select.name" placeholder="活动名称搜索" clearable style="width: 150px;"/>
             </div>
 
             <div class="selects-item">
               <div class="selects-item-label">发布系统：</div>
               <Select placeholder="选择发布系统" style="width: 150px;" clearable>
+                <Option></Option>
               </Select>
             </div>
 
@@ -27,7 +28,7 @@
             </div>
 
             <div class="selects-item">
-              <Button type="primary" style="margin: 0 6px 0 12px;">查询</Button>
+              <Button type="primary" style="margin: 0 6px 0 12px;" @click="getAds">查询</Button>
             </div>
 
             <div class="selects-item">
@@ -35,25 +36,32 @@
             </div>
 
             <div class="selects-item">
-              <Button style="margin: 0 6px;" type="info" @click="$refs['addAd'].isShow = true">新增</Button>
+              <Button style="margin: 0 6px;" type="info" @click="$refs['addAd'].isShow = true,$refs['addAd'].type = 'add'">新增</Button>
             </div>
           </div>
         </slot>
       </lx-header>
     </div>
 
-    <xy-table :list="list" :table-item="table"></xy-table>
+    <xy-table
+      :list="list"
+      :table-item="table"
+      @editor="editorShow">
+
+    </xy-table>
 
     <div style="display: flex;justify-content: flex-end;">
       <Page :total="total" show-elevator />
     </div>
 
     <!--    新增-->
-    <add-ad ref="addAd"></add-ad>
+    <add-ad ref="addAd" @refresh="getAds"></add-ad>
   </div>
 </template>
 
 <script>
+import {index} from "@/api/ad"
+
 import addAd from './components/addAd'
 export default {
   components:{
@@ -77,31 +85,52 @@ export default {
           label:'图片',
           sortable:false,
           width:260,
-          align:'left'
+          align:'left',
+          customFn:(row)=>{
+            if(row.pic){
+              return (<el-image style={{'width':'80px'}} src={row.pic} fit={'fit'}></el-image>)
+            }else{
+              return (<div>暂无图片</div>)
+            }
+          }
         },
         {
           label:'活动名称',
           sortable:false,
           width: 180,
-          align:'left'
+          align:'left',
+          prop:'name'
         },
         {
           label:'发布系统',
-          width: 180
+          width: 180,
+          prop:'origin_system'
         },
         {
           label:'活动跳转',
           sortable:false,
           width: 300,
-          align:'left'
+          align:'left',
+          prop:'action'
         },
         {
           label:'类型',
-          width: 120
+          width: 120,
+          prop:'type',
+          formatter:(cell,data,value)=>{
+            switch (value){
+              case 1:
+                return '首页轮播图'
+                break;
+              default:
+                return '未知'
+            }
+          }
         },
         {
           label:'排序',
-          width: 100
+          width: 100,
+          prop:'sort'
         },
         {
           label:'状态',
@@ -109,23 +138,33 @@ export default {
           customFn:(row)=>{
             return (
               <div>
-                <Tag color={row.stauts == 1 ? 'green' : 'blue'}>{row.stauts == 1 ? '启用' : '未启用'}</Tag>
+                <Tag color={row.state == 1 ? 'green' : 'blue'}>{row.state == 1 ? '启用' : '未启用'}</Tag>
               </div>
             )
           }
         },
         {
           label:'有效期',
-          width: 220
+          width: 220,
+          customFn:(row)=>{
+            return (<div>{row.valid_time_begin} - {row.valid_time_over}</div>)
+          }
         },
         {
           label:'创建人/创建时间',
-          width: 220
+          width: 220,
+          prop:'created_at'
         }
       ],
     }
   },
   methods: {
+    async getAds(){
+      console.log(this.select)
+      const res = await index()
+      this.list = res.data
+    },
+
     resetSelect(){
       this.select = {
         pageSize:10,
@@ -135,7 +174,16 @@ export default {
         createDate:[],
         effectiveDate:[]
       }
+    },
+
+    editorShow(row){
+      this.$refs['addAd'].type = 'editor'
+      this.$refs['addAd'].id = row.id
+      this.$refs['addAd'].isShow = true
     }
+  },
+  mounted() {
+    this.getAds()
   }
 
 }

src/views/marketing/components/addAd.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <xy-dialog :is-show.sync="isShow" type="form" title="新增广告" :form="form" :rules="rules" @submit="submit">
+    <xy-dialog :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增广告' : '编辑广告'" :form="form" :rules="rules" @submit="submit">
       <template v-slot:name>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -17,7 +17,9 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>类型：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择类型" v-model="form.type" style="width: 300px;"/>
+            <el-select clearable placeholder="请选择类型" v-model="form.type" style="width: 300px;">
+              <el-option v-for="item in types" :value="item.value" :key="item.value" :label="item.label"></el-option>
+            </el-select>
           </div>
         </div>
       </template>
@@ -27,7 +29,9 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>发布系统：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择发布系统" v-model="form.system" style="width: 300px;"/>
+            <el-select clearable placeholder="请选择发布系统" v-model="form.system" style="width: 300px;">
+              <el-option v-for="item in systems" :key="item.value" :value="item.value" :label="item.label"></el-option>
+            </el-select>
           </div>
         </div>
       </template>
@@ -37,17 +41,21 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>跳转方向：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择跳转方向" v-model="form.to" style="width: 300px;"/>
+            <el-select clearable placeholder="请选择跳转方向" v-model="form.to" style="width: 300px;">
+              <el-option v-for="item in toUrls" :key="item.value" :value="item.value" :label="item.label"></el-option>
+            </el-select>
           </div>
         </div>
       </template>
-      <template v-slot:status>
+      <template v-slot:state>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>状态：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择状态" v-model="form.status" style="width: 300px;"/>
+            <el-select clearable placeholder="请选择状态" v-model="form.state" style="width: 300px;">
+              <el-option v-for="item in states" :value="item.value" :label="item.label" :key="item.value"></el-option>
+            </el-select>
           </div>
         </div>
       </template>
@@ -57,7 +65,7 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>排序：
           </div>
           <div class="xy-table-item-content">
-            <el-select clearable placeholder="请选择排序" v-model="form.sort" style="width: 300px;"/>
+            <el-input clearable placeholder="请填写排序" v-model="form.sort" style="width: 300px;"/>
           </div>
         </div>
       </template>
@@ -67,7 +75,16 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>有效期：
           </div>
           <div class="xy-table-item-content">
-            <el-date-picker append-to-body clearable placeholder="请选择有效期" v-model="form.effectDate" style="width: 300px;"/>
+            <el-date-picker
+              :editable="false"
+              type="daterange"
+              append-to-body
+              clearable
+              placeholder="请选择有效期"
+              v-model="form.effectDate"
+              style="width: 300px;"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"/>
           </div>
         </div>
       </template>
@@ -77,12 +94,16 @@
             <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>图片：
           </div>
           <div class="xy-table-item-content">
+            <img v-if="form.img" :src="form.img" class="avatar">
             <el-upload
+              v-else
               class="avatar-uploader"
-              action=" "
+              list-type="picture-card"
-              :show-file-list="false">
+              action="/api/admin/upload-file"
-              <img v-if="form.img" :src="form.img" class="avatar">
+              :show-file-list="false"
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+              :on-error="uploadFail"
+              :on-success="uploadSuccess">
+              <i  class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </div>
         </div>
@@ -92,33 +113,191 @@
 </template>
 
 <script>
+import {store,show,update} from '@/api/ad'
+import {getparameter} from '@/api/system/dictionary'
+import { Message } from 'element-ui'
 export default {
   data() {
     return {
+      id:'',
+      type:'add',
       isShow:false,
+      systems:[],
+      toUrls:[],
+      types:[{label:'首页轮播图',value:1}],
+      states:[
+        {
+          label:'禁用',
+          value:0
+        },
+        {
+          label:'启动',
+          value:1
+        }
+      ],
 
       form:{
         name:'',
         type:'',
         system:'',
         to:'',
-        status:'',
+        state:'',
         sort:'',
         effectDate:[],
         img:''
       },
       rules:{
-
+        name:[
+          {required:true,message:"请填写活动名称"}
+        ],
+        type:[
+          {required:true,message:"请选择类型"}
+        ],
+        system:[
+          {required:true,message:"请选择发布系统"}
+        ],
+        to:[
+          {required:true,message:"请选择跳转方向"}
+        ],
+        state:[
+          {required:true,message:"请选择状态"}
+        ],
+        sort:[
+          {required:true,message:"请填写排序"}
+        ],
+        effectDate:[
+          {required:true,message:"请选择日期"}
+        ],
+        img:[
+          {required:true,message:"请选择图片"}
+        ]
       }
     }
   },
   methods: {
+    //获取类型
+    async getSystem(){
+      let res = await getparameter({number:'system'})
+      this.systems = res.detail.map(item => {
+        return {
+          label:item.value,
+          value:item.id
+        }
+      })
+    },
+    async getToUrl(){
+      let res = await getparameter({number:'toUrl'})
+      this.toUrls = res.detail.map(item => {
+        return {
+          label:item.value,
+          value:item.id
+        }
+      })
+    },
+
+    //上传
+    uploadFail(err){
+      console.log(err)
+    },
+    uploadSuccess(response){
+      console.log(response)
+      this.form.img = response.url
+    },
     submit(){
       console.log(this.form)
 
+      if(this.type === 'add'){
+        store({
+          pic:this.form.img,
+          name:this.form.name,
+          action:this.form.to,
+          origin_system:this.form.system,
+          type:this.form.type,
+          sort:this.form.sort,
+          state:this.form.state,
+          valid_time_begin:this.form.effectDate[0],
+          valid_time_over:this.form.effectDate[1]
+        }).then(res => {
+          Message({
+            type:'success',
+            message:'添加广告成功'
+          })
+          this.isShow = false
+          this.$emit('refresh')
+          this.form = {
+            name:'',
+            type:'',
+            system:'',
+            to:'',
+            state:'',
+            sort:'',
+            effectDate:[],
+            img:''
+          }
+          this.id = ''
+        })
+        return
+      }
+      if(this.type === 'editor'){
+        update({
+          id:this.id,
+          pic:this.form.img,
+          name:this.form.name,
+          action:this.form.to,
+          origin_system:this.form.system,
+          type:this.form.type,
+          sort:this.form.sort,
+          state:this.form.state,
+          valid_time_begin:this.form.effectDate[0],
+          valid_time_over:this.form.effectDate[1]
+        }).then(res => {
+          Message({
+            type:'success',
+            message:'编辑广告成功'
+          })
+          this.isShow = false
+          this.$emit('refresh')
+          this.form = {
+            name:'',
+            type:'',
+            system:'',
+            to:'',
+            state:'',
+            sort:'',
+            effectDate:[],
+            img:''
+          }
+          this.id = ''
+        })
+        return
+      }
+    },
+
+    //获取详情
+    async getDetailAd (){
+      const res = await show({id:this.id})
+      this.form.name = res?.name
+      this.form.state = res?.state
+      this.form.system = res?.origin_system
+      this.form.to = Number(res?.action)
+      this.form.sort = res?.sort
+      this.form.type = res?.type
+      this.form.img = res?.pic
+      this.form.effectDate = [res?.valid_time_begin,res?.valid_time_over]
     }
-  }
+  },
+  watch:{
+    isShow(val){
+      if(val){
+        this.getSystem()
+        this.getToUrl()
 
+        if(this.type === 'editor'){
+          this.getDetailAd()
+        }
+      }
+    }
+  }
 }
 </script>
 
@@ -138,14 +317,14 @@ export default {
 .avatar-uploader-icon {
   font-size: 28px;
   color: #8c939d;
-  width: 128px;
+  width: 120px;
-  height: 128px;
+  height: 120px;
-  line-height: 128px;
+  line-height: 120px;
   text-align: center;
 }
 .avatar {
-  width: 128px;
+  width: 120px;
-  height: 128px;
+  height: 120px;
   display: block;
 }
 </style>