实习总结 - 广告位管理 - 设计实现（1） - 页面布局

任何时候都不要忘记微笑~ 

1. 文件夹

localhost:9528/#/market/advert/edit/new

2. 路由

{
        path: 'advert',
        name: 'advert',
        component: () => import('@/views/advert/index'),
        meta: {
          title: '广告位管理',
          icon: 'table'
        },
        // redirect: '/market/advert/list',
        children: [{
            path: '/',
            name: 'list',
            component: () => import('@/views/advert/list'),
            meta: {
              title: '广告位管理',
              icon: 'tree',
              breadcrumb: false
            },
            hidden: true
          },
          {
            path: 'edit/:id',
            name: 'edit',
            component: () => import('@/views/advert/edit'),
            meta: {
              title: '新建广告位',
              icon: 'tree'
            },
            hidden: true
          }
        ]
      },

3. 静态页面设计

广告位管理主页面列表 list.vue

<template>
  <div class="admin-layout base-layout-warp coupon">
    <div class="layout-header">广告位管理</div>
    <div class="layout-col2">
      <div class="layout-float">
        <div class="float-item">
          <el-select v-model="searchParams.status" placeholder="发布状态">
            <el-option
              v-for="(item,index) in Object.keys(PublishMap)"
              :value="item"
              :key="index"
              :label="PublishMap[item]"
            />
          </el-select>
        </div>
        <div class="float-item">
          <el-select v-model="searchParams.adsPosition" placeholder="推广位置">
            <el-option
              v-for="(item,index) in PositionMap"
              :value="item.value"
              :key="index"
              :label="item.label"
            />
          </el-select>
        </div>
        <div class="float-item">
          <el-input v-model="searchParams.query" placeholder="请输入广告ID或广告名称" />
        </div>
        <div class="float-item">
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="clearbtn">清空</el-button>
        </div>
      </div>
      <div class="float-item" style="float：right;">
        <el-button type="primary" @click="createNew">新建广告</el-button>
      </div>
    </div>
    <div class="layout-content">
      <el-table :data="advList" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="id" label="广告ID" max-width="100" />
        <el-table-column prop="showOrder" label="排序" max-width="80" />
        <el-table-column prop="adsName" label="广告名称" min-width="200" />
        <el-table-column prop="adsPosition" label="推广位置" min-width="160">
          <template slot-scope="scope">{{ PositionMap[scope.row.adsPosition].label }}</template>
        </el-table-column>
        <el-table-column prop="adsType" label="类型" min-width="100">
          <template slot-scope="scope">{{ GoTypeMap[scope.row.adsType] }}</template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" min-width="130">
          <template slot-scope="scope">
            <span>{{tformat(new Date(scope.row.createTime),"yyyy-MM-dd hh:mm:ss")}}</span>
          </template>
        </el-table-column>
        <el-table-column label="最新编辑时间" prop="updateTime" min-width="130">
          <template slot-scope="scope">
            <span>{{tformat(new Date(scope.row.updateTime),"yyyy-MM-dd hh:mm:ss")}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="发布状态" min-width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :inactive-value="0"
              :active-value="1"
              @change="switchPublishStatus(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteAd(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="pageIndex"
      :total="total"
      :page-size="pageNum"
      class="layout-page"
      layout="total, prev, pager, next, jumper"
      background
      @current-change="currentPageChange"
    />
  </div>
</template>

data() {
    return {
      searchParams: {
        status: '',
        adsPosition: '',
        query: '',
      },
      pageIndex: 1,
      pageNum: 10,
      total: 0,
      advList: [],
    }
  },

新建广告页面edit

<template>
  <div class="admin-layout base-layout-warp coupon-edit">
    <div class="layout-content">
      <div class="layout-form-container" style="width:90%">
        <el-form
          ref="advForm"
          :model="advForm"
          :rules="rules"
          :disabled="disableForm"
          label-width="140px"
        >
          <el-form-item label="广告排序：" prop="showOrder">
            <el-input
              v-model.number="advForm.showOrder"
              maxlength="50"
              placeholder="请输入正整数，数字越大，优先级越高"
              style="width:200px"
            />
          </el-form-item>
          <el-form-item label="广告名称：" prop="adsName">
            <el-input
              v-model="advForm.adsName"
              style="width:200px"
              maxlength="60"
              placeholder="最多输入60个字符"
            />
          </el-form-item>
          <el-form-item label="推广位置：" prop="adsPosition">
            <el-select v-model="advForm.adsPosition" placeholder="请选择推广位置">
              <el-option
                v-for="(item, index) in PositionMap"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="开屏停留时长:" v-if="advForm.adsPosition == 3" prop="adsStopTime">
            <el-select v-model="advForm.adsStopTime">
              <el-option
                v-for="(item, index) in StopTime"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="广告内容：" class="is-required">
            <el-select v-model="advForm.adsContentType" placeholder="类型">
              <el-option
                v-for="(item, index) in Type"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="is-required" v-if="advForm.adsContentType == 0">
            <div class="fcolumns">
              <div class="fc1">手机图片：</div>
              <div class="fc2">
                <el-upload
                  :action="picUrl"
                  :limit="1"
                  list-type="picture-card"
                  :file-list="adsPhoneImgList"
                  :on-success="handleMobileSuccess"
                  :on-remove="handleMobileRemove"
                  :before-upload="beforeUpload"
                  accept=".jpg, .jpeg, .gif, .png"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <p>只支持.jpg .png .gif格式</p>
              </div>
            </div>
            <div class="fcolumns">
              <div class="fc1">pad图片：</div>
              <div class="fc2">
                <el-upload
                  :action="picUrl"
                  :limit="1"
                  :file-list="adsIpadImgList"
                  list-type="picture-card"
                  :on-success="handlePadSuccess"
                  :on-remove="handlePadRemove"
                  :before-upload="beforeUpload"
                  accept=".jpg, .jpeg, .gif, .png"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <p>只支持.jpg .png .gif格式</p>
              </div>
            </div>
          </el-form-item>
          <el-form-item class="is-required" v-if="advForm.adsContentType == 1">
            <div class="fcolumns">
              <div class="fcolumns">
                <div class="fc1">手机视频：</div>
                <div class="fc2">
                  <p>只支持.mp4格式,小于5M</p>
                </div>
              </div>
              <div class="fcolumns" style="margin-left:20px">
                <div class="fc1">pad视频：</div>
                <div class="fc2">
                  <p>只支持.mp4格式,小于5M</p>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="跳转类型：" prop="adsType">
            <el-radio-group v-model="advForm.adsType">
              <el-radio-button
                v-for="(item, index) in Object.keys(GoTypeMap)"
                :key="index"
                :label="item"
                class="fradio"
              >{{ GoTypeMap[item] }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="advForm.adsType == 3" label prop="pageIndex">
            <el-select v-model="advForm.pageIndex" placeholder="请选择app内跳转页面">
              <el-option
                v-for="(item, index) in Object.keys(AppPageMap)"
                :label="AppPageMap[item]"
                :value="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="advForm.adsType == 1" label prop="jumpUrl">
            <el-input v-model="advForm.jumpUrl" placeholder="请输入网址" class="finput" />
          </el-form-item>
          <el-form-item v-if="advForm.adsType == 2" label prop="iosSellCourseType">
            <span>ios：</span>
            <el-select v-model="advForm.iosSellCourseType" placeholder="请选择跳转页面">
              <el-option
                v-for="(item, index) in IOSPages"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="advForm.adsType == 2" label prop="androidSellUrl">
            <span>安卓：</span>
            <el-input v-model="advForm.androidSellUrl" placeholder="请输入网址" class="finput" />
          </el-form-item>
          <!--1.8新增商品售卖-->
          <el-form-item v-if="advForm.adsType == 4" label prop="isoGoodId">
            <span>IOS：</span>
            <el-input v-model="advForm.isoGoodId" placeholder="请输入商品ID" class="finput" />
          </el-form-item>
          <el-form-item v-if="advForm.adsType == 4" label prop="androidGoodId">
            <span>安卓：</span>
            <el-input v-model="advForm.androidGoodId" placeholder="请输入商品ID" class="finput" />
          </el-form-item>
          <el-form-item
            class="is-required"
            v-if="advForm.adsPosition == 1 || advForm.adsPosition == 2"
            label="出现频率："
            prop="showTimes"
          >
            <el-select v-model="advForm.showTimes" placeholder="请选择弹窗广告出现频率">
              <el-option
                v-for="(item, index) in FreqMap"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            class="is-required"
            label="曝光人群"
            prop="exposurePeople"
            v-if="advForm.adsPosition == 3"
          >
            <el-select v-model="advForm.exposurePeople">
              <el-option
                v-for="(item, index) in Exposure"
                :value="item.value"
                :key="index"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="backToList">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

data() {
    return {
      picUrl: '',
      isEdit: false,
      adsPhoneImgList: [],
      adsIpadImgList: [],
      adsPhoneVideoList: [],
      adsIpadVideoList: [],
      advForm: {
        showOrder: 0,
        adsName: '',
        adsIpadImg: '',
        adsPhoneImg: '',
        adsPosition: '',
        adsType: '3',
        iosSellCourseType: '',
        jumpUrl: '',
        androidSellUrl: '',
        showTimes: '',
        pageIndex: '',
        isoGoodId: '', //ios商品ID  1.8
        androidGoodId: '', //android商品ID  1.8
        adsStopTime: 1, // 开屏停留时常，默认5s
        adsContentType: '', // 广告内容：图片/视频
        videoUrl: '',
        exposurePeople: 0, // 曝光人群 Android IOS 所有
      },
    }
}

 

本文地址：https://blog.csdn.net/Sabrina_cc/article/details/108974562